:root {
  --navy: #071d3b;
  --navy-2: #0a274f;
  --ink: #0c1725;
  --steel: #647181;
  --line: #d9dee5;
  --mist: #f4f6f8;
  --white: #ffffff;
  --accent: #9aa7b6;
  --max: 1180px;
  --radius: 4px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 38px; height: 1px; background: currentColor; }
.section { padding: 92px 0; }
.section.alt { background: var(--mist); }
.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head h2, .page-hero h1, .hero h1 { margin: 12px 0 18px; line-height: 1.02; letter-spacing: -.035em; }
.section-head h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
.section-head p { color: var(--steel); font-size: 1.08rem; max-width: 690px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10,35,70,.09);
}
.nav {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: flex; align-items: center; min-width: 210px; }
.brand img { width: 214px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: .86rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 10px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--navy); transition: right .2s ease; }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta { border: 1px solid var(--navy); padding: 12px 17px !important; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--navy); color: white; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-btn span { display: block; width: 26px; height: 2px; margin: 5px 0; background: var(--navy); }

.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 88px);
  display: grid;
  align-items: center;
  background: var(--navy);
  color: white;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(7,29,59,.96) 0%, rgba(7,29,59,.90) 46%, rgba(7,29,59,.72) 100%), url('../images/hero-grid.svg');
  background-size: cover, 760px 760px;
  background-position: center, 80% center;
}
.hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -120px; bottom: -160px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.hero-inner { position: relative; z-index: 1; padding: 88px 0; }
.hero-copy { max-width: 870px; }
.hero h1 { font-size: clamp(3.5rem, 8vw, 7.6rem); max-width: 980px; text-transform: uppercase; }
.hero h1 span { display: block; color: #b8c2cf; font-weight: 400; }
.hero p { max-width: 670px; color: #d6dde6; font-size: clamp(1.05rem, 1.8vw, 1.28rem); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; font-weight: 700; font-size: .84rem; letter-spacing: .075em; text-transform: uppercase; transition: .2s ease; }
.btn-light { background: white; color: var(--navy); }
.btn-light:hover { background: transparent; color: white; border-color: white; }
.btn-outline { color: white; border-color: rgba(255,255,255,.5); }
.btn-outline:hover { border-color: white; background: rgba(255,255,255,.08); }
.btn-dark { background: var(--navy); color: white; }
.btn-dark:hover { background: var(--navy-2); }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 76px; max-width: 780px; border-top: 1px solid rgba(255,255,255,.18); }
.metric { padding: 20px 24px 0 0; }
.metric + .metric { border-left: 1px solid rgba(255,255,255,.18); padding-left: 24px; }
.metric strong { display: block; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.metric span { color: #aeb9c8; font-size: .88rem; }

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cap-card { min-height: 270px; padding: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: .2s ease; background: white; }
.cap-card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(5,25,49,.08); position: relative; z-index: 2; }
.cap-num { font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--steel); }
.cap-card h3 { margin: 54px 0 10px; font-size: 1.4rem; letter-spacing: -.02em; }
.cap-card p { color: var(--steel); margin: 0; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.tech-panel { position: relative; min-height: 520px; background: var(--navy); overflow: hidden; }
.tech-panel::before { content:""; position:absolute; inset:0; background:url('../images/hero-grid.svg') center/700px 700px; opacity:.9; }
.tech-panel .crosshair { position:absolute; width:250px; height:250px; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.92; filter: brightness(0) invert(1); }
.tech-label { position:absolute; z-index:2; left:28px; bottom:24px; color:white; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.check-list { list-style:none; padding:0; margin:30px 0 0; }
.check-list li { padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; }
.check-list li::before { content:"+"; color:var(--navy); font-weight:700; }

.process { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.step { background:white; padding:30px; min-height:230px; }
.step span { font-size:.72rem; letter-spacing:.18em; font-weight:700; color:var(--steel); }
.step h3 { margin:44px 0 10px; font-size:1.25rem; }
.step p { margin:0; color:var(--steel); font-size:.96rem; }

.cta-band { background:var(--navy); color:white; padding:70px 0; }
.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.cta-inner h2 { font-size:clamp(2rem,4vw,3.4rem); margin:0; line-height:1.03; letter-spacing:-.03em; max-width:730px; }

.page-hero { background:var(--navy); color:white; padding:96px 0 86px; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background:url('../images/hero-grid.svg') right center/620px auto no-repeat; opacity:.65; pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(3.2rem,7vw,6.5rem); text-transform:uppercase; max-width:950px; }
.page-hero p { max-width:720px; color:#d1d9e4; font-size:1.16rem; }

.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value-card { padding:30px; background:var(--mist); border-top:3px solid var(--navy); }
.value-card h3 { margin:18px 0 8px; }
.value-card p { color:var(--steel); margin:0; }

.service-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:100px 1fr 1.4fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); align-items:start; }
.service-row .index { color:var(--steel); font-size:.76rem; font-weight:700; letter-spacing:.16em; }
.service-row h3 { margin:0; font-size:1.45rem; }
.service-row p { margin:0; color:var(--steel); }

.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.project-card { background:var(--mist); min-height:390px; display:flex; flex-direction:column; }
.project-visual { flex:1; min-height:230px; background:var(--navy); position:relative; overflow:hidden; }
.project-visual::before { content:""; position:absolute; inset:0; background:url('../images/hero-grid.svg') center/500px 500px; opacity:.8; }
.project-visual::after { content:""; position:absolute; width:120px; height:120px; border:1px solid rgba(255,255,255,.3); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.project-body { padding:24px; }
.project-body small { font-size:.7rem; letter-spacing:.15em; font-weight:700; text-transform:uppercase; color:var(--steel); }
.project-body h3 { margin:8px 0 6px; font-size:1.35rem; }
.project-body p { margin:0; color:var(--steel); }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
.contact-details { padding:30px 0; border-top:1px solid var(--line); }
.contact-details div { padding:18px 0; border-bottom:1px solid var(--line); }
.contact-details strong { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:4px; }
.contact-details span { color:var(--steel); }
.form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.field input, .field textarea { width:100%; border:1px solid #cfd5dc; background:white; padding:14px 15px; outline:none; border-radius:0; }
.field input:focus, .field textarea:focus { border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
.field textarea { min-height:160px; resize:vertical; }
.form-status { grid-column:1/-1; padding:12px 14px; background:#eef2f5; font-size:.92rem; display:none; }
.form-status.show { display:block; }

.site-footer { background:#041428; color:#d4dbe5; padding:58px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:50px; }
.footer-brand img { width:250px; filter:brightness(0) invert(1); opacity:.96; }
.footer-brand p { max-width:440px; color:#9eabba; margin:20px 0 0; }
.footer-col h4 { color:white; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; margin:0 0 16px; }
.footer-col a { display:block; color:#aeb9c8; padding:4px 0; }
.footer-col a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:45px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; color:#8f9cad; font-size:.82rem; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .nav { height:74px; }
  .brand img { width:185px; }
  .menu-btn { display:block; }
  .nav-links { position:absolute; top:74px; left:0; right:0; background:white; border-bottom:1px solid var(--line); padding:20px; display:none; flex-direction:column; align-items:flex-start; gap:8px; }
  .nav-links.open { display:flex; }
  .nav-links a { width:100%; }
  .hero { min-height:calc(100vh - 74px); }
  .cap-grid { grid-template-columns:1fr 1fr; }
  .split, .contact-grid { grid-template-columns:1fr; gap:44px; }
  .process { grid-template-columns:1fr 1fr; }
  .project-grid, .values-grid { grid-template-columns:1fr 1fr; }
  .service-row { grid-template-columns:70px 1fr; }
  .service-row p { grid-column:2; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width: 620px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .section { padding:66px 0; }
  .hero-inner { padding:62px 0; }
  .hero h1 { font-size:clamp(3rem,17vw,5.1rem); }
  .hero-metrics { grid-template-columns:1fr; }
  .metric { padding:14px 0; }
  .metric + .metric { border-left:0; border-top:1px solid rgba(255,255,255,.18); padding-left:0; }
  .cap-grid, .project-grid, .values-grid, .process { grid-template-columns:1fr; }
  .cap-card { min-height:220px; }
  .cap-card h3 { margin-top:34px; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
  .page-hero { padding:72px 0 64px; }
  .service-row { grid-template-columns:1fr; gap:8px; }
  .service-row p { grid-column:1; }
  .form { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}

/* ===== Foremarke Precision V2 / real project imagery ===== */
.hero-v2::before {
  background-image: linear-gradient(90deg, rgba(7,29,59,.98) 0%, rgba(7,29,59,.96) 45%, rgba(7,29,59,.86) 100%), url('../images/hero-grid.svg');
  background-size: cover, 760px 760px;
  background-position: center, 80% center;
}
.hero-v2::after { display:none; }
.hero-v2 { min-height: 760px; }
.hero-layout {
  position: relative; z-index: 1;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  gap:64px; align-items:center; padding:76px 0 74px;
}
.hero-layout .hero-copy { max-width:760px; }
.hero-v2 h1 { font-size:clamp(3.4rem,6.6vw,6.55rem); }
.hero-v2 .hero-metrics { margin-top:54px; max-width:none; }
.hero-media { min-height:610px; position:relative; }
.hero-photo {
  position:absolute; inset:66px 0 0 76px; margin:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); background:#0c2442;
}
.hero-photo::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); background:linear-gradient(180deg,rgba(7,29,59,.04),rgba(7,29,59,.22)); }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-cad {
  position:absolute; top:0; left:0; width:70%; margin:0; background:white; color:var(--navy);
  padding:12px 12px 8px; box-shadow:0 24px 60px rgba(0,0,0,.26); z-index:3;
}
.hero-cad img { width:100%; aspect-ratio:1.62; object-fit:cover; }
.hero-cad figcaption, .feature-photo figcaption, .two-photo-row figcaption, .input-gallery figcaption {
  font-size:.66rem; letter-spacing:.17em; font-weight:700; padding:9px 2px 2px; text-transform:uppercase;
}
.hero-media-tag {
  position:absolute; right:-1px; bottom:26px; z-index:4; color:white; border:1px solid rgba(255,255,255,.42);
  padding:10px 13px; font-size:.65rem; letter-spacing:.17em; font-weight:700; background:rgba(7,29,59,.84); text-transform:uppercase;
}
.discipline-strip { background:#041428; color:#d8e0ea; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.discipline-strip .container { min-height:54px; display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; font-size:.68rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.discipline-strip i { display:block; width:3px; height:3px; background:#94a4b6; border-radius:50%; }
.work-section { background:#071d3b; color:white; }
.work-section .section-head p { color:#b8c2cf; }
.work-heading { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; }
.work-heading .section-head { margin-bottom:42px; }
.text-link { color:#d7e0ea; text-transform:uppercase; font-size:.72rem; font-weight:700; letter-spacing:.15em; padding-bottom:50px; }
.text-link:hover { color:white; }
.work-mosaic { display:grid; grid-template-columns:1.05fr 1fr 1fr; grid-template-rows:280px 280px; gap:14px; }
.work-tile { margin:0; position:relative; overflow:hidden; background:#0b274f; }
.work-tile.tall { grid-row:1 / 3; }
.work-tile.wide { grid-column:2 / 4; }
.work-tile img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.work-tile:hover img { transform:scale(1.025); }
.work-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(2,13,27,.84)); }
.work-tile figcaption { position:absolute; left:20px; right:20px; bottom:16px; z-index:2; font-size:.86rem; font-weight:700; letter-spacing:.02em; }
.work-tile figcaption span { display:block; color:#b7c3d0; font-size:.64rem; text-transform:uppercase; letter-spacing:.16em; margin-bottom:3px; }
.feature-photo { margin:0; position:relative; background:#e9ecef; overflow:hidden; min-height:520px; }
.feature-photo img { width:100%; height:100%; min-height:520px; object-fit:cover; }
.feature-photo figcaption { position:absolute; left:18px; bottom:18px; padding:9px 11px; background:rgba(255,255,255,.92); color:var(--navy); }
.photo-split .feature-photo img { object-position:center 64%; }
.two-photo-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.two-photo-row figure, .input-gallery figure { margin:0; background:var(--mist); overflow:hidden; }
.two-photo-row img { width:100%; height:430px; object-fit:cover; }
.two-photo-row figcaption, .input-gallery figcaption { padding:12px 2px 0; }
.input-gallery { display:grid; grid-template-columns:1.25fr .85fr 1fr; gap:16px; margin-bottom:46px; }
.input-gallery img { width:100%; height:310px; object-fit:cover; }
.input-gallery figure:first-child img { object-position:center; }
.page-hero-photo::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,29,59,.98) 0%,rgba(7,29,59,.90) 58%,rgba(7,29,59,.60) 100%); z-index:0; }
.page-hero-photo::after { background-image:url('../images/work/cad-frame.webp'); background-size:680px auto; background-position:92% center; opacity:.19; mix-blend-mode:screen; }
.project-grid-v2 { grid-template-columns:repeat(3,1fr); align-items:stretch; }
.photo-card { background:#f4f6f8; min-height:0; }
.photo-card .project-visual { height:300px; min-height:300px; flex:none; background:#dfe4e9; }
.photo-card .project-visual::before, .photo-card .project-visual::after { display:none; }
.photo-card .project-visual img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.photo-card:hover .project-visual img { transform:scale(1.025); }
.photo-card .project-body { min-height:190px; }
.project-card-wide { grid-column:span 2; display:grid; grid-template-columns:1.2fr .8fr; }
.project-card-wide .project-visual { height:100%; min-height:410px; }
.project-card-wide .project-body { align-self:center; padding:36px; }

@media (max-width: 1040px) {
  .hero-layout { grid-template-columns:1fr .78fr; gap:38px; }
  .hero-media { min-height:540px; }
  .hero-photo { left:40px; }
  .hero-cad { width:78%; }
  .work-mosaic { grid-template-rows:245px 245px; }
}
@media (max-width: 900px) {
  .hero-v2 { min-height:auto; }
  .hero-layout { grid-template-columns:1fr; padding:62px 0; }
  .hero-layout .hero-copy { max-width:none; }
  .hero-media { min-height:560px; max-width:720px; width:100%; }
  .hero-photo { inset:74px 0 0 58px; }
  .hero-cad { width:64%; }
  .work-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:330px 260px 310px; }
  .work-tile.tall { grid-row:1 / 3; }
  .work-tile.wide { grid-column:1 / 3; }
  .project-grid-v2 { grid-template-columns:1fr 1fr; }
  .project-card-wide { grid-column:span 2; }
  .input-gallery { grid-template-columns:1fr 1fr; }
  .input-gallery figure:first-child { grid-column:1/-1; }
}
@media (max-width: 620px) {
  .hero-layout { padding:46px 0 54px; gap:38px; }
  .hero-v2 h1 { font-size:clamp(2.85rem,16vw,4.4rem); }
  .hero-media { min-height:430px; }
  .hero-photo { inset:64px 0 0 28px; }
  .hero-cad { width:76%; padding:7px 7px 5px; }
  .hero-media-tag { bottom:12px; font-size:.58rem; }
  .discipline-strip .container { gap:11px; padding:12px 0; }
  .work-heading { display:block; }
  .text-link { display:inline-block; padding:0 0 26px; }
  .work-mosaic { grid-template-columns:1fr; grid-template-rows:none; }
  .work-tile, .work-tile.tall, .work-tile.wide { grid-column:auto; grid-row:auto; height:300px; }
  .feature-photo, .feature-photo img { min-height:420px; }
  .two-photo-row, .input-gallery, .project-grid-v2 { grid-template-columns:1fr; }
  .two-photo-row img { height:320px; }
  .input-gallery figure:first-child, .project-card-wide { grid-column:auto; }
  .input-gallery img { height:280px; }
  .project-card-wide { display:flex; }
  .project-card-wide .project-visual { min-height:320px; height:320px; }
}