/* ============================================================
   Ventus Optera — flight-instruments design system (live).
   Ported from _design-proto/vo-proto.css. Tokens live in
   base/_variables.css (single source of truth); this file is the
   component library. Pages opt in by linking THIS instead of
   css/style.css. The strangler entry point for the migration:
   as each page is rebuilt it switches its <link> to system.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap');
@import url('base/_variables.css');
/* Shared injected chrome (header.html / footer.html). Same partials the legacy
   css/style.css uses, so the nav + footer render identically across the
   migration boundary. Re-skinned to the flight-instruments nav in Wave E once
   every page is on system.css. */
@import url('components/_header.css');
@import url('components/_footer.css');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:100px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-gutter)}
/* injected chrome (header/footer) wraps content in .container; size it to match .wrap */
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-gutter)}
/* Eyebrow labels: Space Grotesk letterspaced caps (NOT mono; mono is reserved
   for genuine data/readout surfaces: .readout cells, .phase .num, .kicker, footer). */
.eyebrow{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
/* Phase-number eyebrows ("01 · Audit") are readout data, not prose labels: stay mono. */
.eyebrow.num{font-family:var(--mono);font-weight:400;font-size:.82rem;letter-spacing:.2em}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.02em}
p{margin-bottom:0}
.link{color:var(--bronze);font-weight:500}
.link:hover{color:var(--bronze-deep)}

/* ---------- NAV ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:var(--space-2);color:#fff}
.brand .mark{width:38px;height:38px;border-radius:var(--radius-icon);background:var(--ink-2);border:1px solid var(--line-dark);display:grid;place-items:center;overflow:hidden}
.brand .mark img{width:100%;height:100%;object-fit:cover}
.brand b{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
.navlinks{display:flex;gap:30px;font-size:.9rem;color:var(--muted-dark);font-weight:500}
.navlinks a:hover,.navlinks a.active{color:#fff}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--display);font-weight:500;font-size:.98rem;padding:14px 26px;border-radius:var(--radius-btn);transition:var(--dur-base);display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0}
.btn svg{width:15px;height:15px}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-deep);transform:translateY(-2px)}
.btn-ghost{color:#fff;border:1px solid var(--line-dark);background:transparent}
.btn-ghost:hover{border-color:var(--airflow);color:var(--airflow)}
/* ghost on light bg */
.btn-ghost-light{color:var(--text);border:1px solid var(--line-light);background:transparent}
.btn-ghost-light:hover{border-color:var(--amber);color:var(--text);background:var(--amber)}
/* documented "Disabled" button variant (DESIGN-SYSTEM.md §5); muted + inert, reads on any bg */
.disabled-link{background:var(--muted);color:var(--paper);opacity:.45;pointer-events:none}

/* ---------- HERO (home) ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;min-height:640px;display:flex;align-items:center}
.hero .flow{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 30%,rgba(10,24,38,.55) 52%,transparent 74%)}
.hero-glow{position:absolute;right:2%;top:14%;width:620px;height:620px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(242,169,59,.18),transparent 60%);filter:blur(6px);pointer-events:none}
.hero .wrap{position:relative;z-index:5;padding-top:120px;padding-bottom:var(--space-section-sm);width:100%}
.hero-eyebrow{margin-bottom:var(--space-4)}
h1.hero-title{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:600;max-width:15ch;margin-bottom:var(--space-4)}
h1.hero-title .lift{color:var(--amber)}
.hero-sub{font-size:1.12rem;color:var(--muted-dark);max-width:46ch;margin-bottom:40px}
.cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}

/* ---------- PAGE-HERO (secondary pages) ---------- */
.page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;min-height:360px;display:flex;align-items:flex-end}
.page-hero .flow{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.page-hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(10,24,38,.6) 46%,transparent 82%)}
.page-hero .wrap{position:relative;z-index:5;padding:150px var(--space-gutter) 52px;width:100%}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:20ch;margin:var(--space-stack) 0 var(--space-3)}
.page-hero .lead{font-size:1.12rem;color:var(--muted-dark);max-width:52ch}
.page-hero .eyebrow{display:block}
.page-hero.pre-readout .wrap{padding-bottom:var(--space-section-sm)} /* extra clearance when a readout strip sits under the hero */

/* ---------- INSTRUMENT READOUT STRIP ---------- */
.readout{position:relative;z-index:5;border-top:1px solid rgba(242,169,59,.32);background:var(--ink-2)}
.readout .wrap{display:flex;flex-wrap:wrap;gap:0}
.readout .cell{flex:1;min-width:160px;padding:22px 24px 22px 26px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted-dark);border-right:1px solid var(--line-dark);position:relative}
.readout .cell::before{content:"";position:absolute;left:0;top:24px;width:3px;height:12px;background:var(--amber);opacity:.9}
.readout .cell:first-child{padding-left:0} /* first cell aligns to the .wrap gutter edge */
.readout .cell:first-child::before{display:none}
.readout .cell:last-child{border-right:0}
.readout .cell b{display:block;color:#fff;font-size:1.02rem;letter-spacing:-.01em;margin-top:4px}
.readout .cell .amber{color:var(--amber)}

/* ---------- SECTIONS ---------- */
.section{padding:var(--space-section) 0}
/* Alternating section rhythm: body is --paper, alt sections lift to the lighter
   --paper-2. Cards inside alt sections still read via their border + hover shadow. */
.section-alt{background:var(--paper-2)}
.section-head{max-width:56ch;margin-bottom:var(--space-7)}
/* Amber decouple (DESIGN-SYSTEM.md §2): section-heads sit on light sections, so
   their eyebrows read in bronze. Dark contexts re-color later (.panel = airflow). */
.section-head .eyebrow{color:var(--bronze)}
.section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:var(--space-3) 0 var(--space-stack)}
.section-head p{color:var(--muted);font-size:1.08rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* "See it in practice" style aside under a card grid */
.section-note{margin-top:26px;font-size:.98rem;color:var(--muted)}

/* ---------- FLIGHT-PATH / CLIMB-CHART ---------- */
.flightpath{position:relative}
.flightpath::before{content:"";position:absolute;left:0;right:0;top:-24px;bottom:-24px;z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0 47px,rgba(20,35,46,.055) 47px 48px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.flightpath::after{content:"ALTITUDE";position:absolute;left:0;top:-24px;z-index:0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:rgba(20,35,46,.28);
  writing-mode:vertical-rl;transform:rotate(180deg)}
.fp-line{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);position:relative;z-index:2}
.phase{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--radius-card);padding:30px var(--space-5) 34px;position:relative}
.phase:nth-child(2){transform:translateY(28px)}
.phase:nth-child(3){transform:translateY(-8px)}
.phase:nth-child(1){transform:translateY(64px)}
.phase .num{font-family:var(--mono);font-size:.88rem;color:var(--bronze-deep);letter-spacing:.1em}
.phase h3{font-size:1.32rem;margin:18px 0 12px;letter-spacing:-.01em}
.phase p{color:var(--muted);font-size:.98rem}
.phase .dot{position:absolute;top:-26px;left:30px;width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(242,169,59,.16)}

/* ---------- DARK INSTRUMENT PANEL + GRID ---------- */
.panel{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.panel .eyebrow{color:var(--airflow)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--radius-panel);overflow:hidden;margin-top:12px}
.cellbox{background:var(--ink);padding:36px 30px;transition:var(--dur-slow)}
.cellbox:hover{background:var(--ink-2)}
.cellbox .ic{width:40px;height:40px;border-radius:var(--radius-icon);background:rgba(111,183,212,.1);border:1px solid var(--line-dark);display:grid;place-items:center;margin-bottom:20px}
.cellbox .ic svg{width:20px;height:20px;stroke:var(--airflow);fill:none;stroke-width:2}
.cellbox h3{font-size:1.2rem;margin-bottom:10px}
.cellbox p{color:var(--muted-dark);font-size:.95rem}

/* ---------- LIGHT CARDS (services / blog grids) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--radius-card);padding:30px var(--space-5);transition:var(--dur-base);display:flex;flex-direction:column}
/* Card doctrine: a card is a destination, so the whole surface is the link.
   Only an <a class="card"> lifts and takes a focus ring. A .card with no
   destination (a plain <div>) stays a flat, non-lifting tile. */
a.card:hover{transform:translateY(-3px);border-color:rgba(20,35,46,.22);box-shadow:0 12px 30px rgba(20,35,46,.07)}
a.card:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.card .ic{width:42px;height:42px;border-radius:var(--radius-icon);background:rgba(111,183,212,.12);border:1px solid var(--line-light);display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:21px;height:21px;stroke:var(--bronze);fill:none;stroke-width:2}
/* Chunky, boxless card glyph: the icon a clickable destination card carries. */
.card-icon{width:40px;height:40px;fill:none;stroke:var(--bronze);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px;display:block}
.card .kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.card h3{font-size:1.28rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.98rem;flex:1}
.card .more{margin-top:var(--space-stack);font-family:var(--display);font-weight:500;color:var(--bronze);display:inline-flex;align-items:center;gap:7px}
.card .more svg{width:14px;height:14px}
a.card:hover .more{color:var(--bronze-deep)}

/* ---------- PROJECT CARDS (portfolio) ---------- */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.project{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--radius-panel);overflow:hidden;transition:var(--dur-base);display:flex;flex-direction:column}
.project:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,35,46,.09)}
.project .media{aspect-ratio:16/9;background:var(--ink);display:grid;place-items:center;overflow:hidden;position:relative;border-bottom:1px solid var(--line-light)}
.project .media img{width:100%;height:100%;object-fit:cover}
.project .media.logo img{width:auto;height:auto;max-width:58%;max-height:52%;object-fit:contain} /* logos: centered on navy letterbox */
.project .media .flow{position:absolute;inset:0;opacity:.5}
.project .body{padding:28px var(--space-5) 30px}
.project .role{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.project h3{font-size:1.34rem;margin:10px 0 10px}
.project p{color:var(--muted);font-size:.98rem;margin-bottom:var(--space-stack)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.project .tags+p{margin-top:var(--space-stack)} /* link line after the chip row */
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line-light);border-radius:var(--radius-pill);padding:5px 11px}
.project.featured{grid-column:1 / -1}
.project.featured .inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch}
.project.featured .media{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line-light);min-height:340px}
.project.featured .body{padding:44px 44px;display:flex;flex-direction:column;justify-content:center}
.project.featured h3{font-size:1.9rem}

/* BDSC case study (#item-bdsc, portfolio): the source is a tall full-page
   capture (~1:2.17 portrait), so this card opts out of the side-by-side
   featured layout and shows the ENTIRE landing page. The inner grid stacks
   (screenshot above body, full width) and the image renders at its natural
   ratio (contain, top-anchored on a light frame) instead of cover-cropping to
   a center sliver. Scoped by id so no other project/card is affected. */
#item-bdsc .inner{grid-template-columns:1fr}
#item-bdsc .media{aspect-ratio:auto;min-height:0;border-right:0;border-top:1px solid var(--line-light);background:var(--paper);padding:32px 24px;align-items:start}
#item-bdsc .media img{width:100%;max-width:620px;height:auto;object-fit:contain;object-position:top;border:1px solid var(--line-light);border-radius:var(--radius-card)}

/* BDSC home teaser (index.html): keeps the compact side-by-side card. The tall
   capture is pinned to fill the media box (which the grid sizes to the body
   height) so object-fit:cover crops to the TOP of the page: the recognizable
   nav + hero + product cards, not a center sliver. Absolute fill is needed
   because height:100% won't resolve against the auto-height media otherwise.
   Scoped to this card only. */
.project.featured.bdsc-teaser .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:260px 1fr;gap:var(--space-6);align-items:start}
.portrait{border-radius:var(--radius-panel);overflow:hidden;border:1px solid rgba(20,35,46,.16);background:var(--ink);aspect-ratio:4/5;position:relative;box-shadow:0 10px 30px rgba(10,24,38,.14)}
.portrait img{width:100%;height:100%;object-fit:cover}
.prose p{color:var(--text);font-size:1.1rem;margin-bottom:1.3rem;max-width:60ch}
.prose p.big{font-size:1.35rem;line-height:1.5;color:var(--text)}
.prose h2{margin:52px 0 var(--space-stack)} /* section rhythm in long-form prose (blog posts, case studies) — echoes .svc-main h2 */
.prose+.cards,.cards+.prose{margin-top:var(--space-5)} /* card grids interleaved with prose (case studies) */
.proof-strip{margin:48px auto 0;max-width:620px}
.proof-strip img{width:100%;height:auto;display:block;border-radius:var(--radius-panel);border:1px solid rgba(20,35,46,.16);box-shadow:0 10px 30px rgba(10,24,38,.13);filter:grayscale(1) contrast(1.02);transition:filter var(--dur-slower) ease}
.proof-strip:hover img{filter:grayscale(0) contrast(1)}
.proof-strip figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px;text-align:center}
/* Client credibility marquee — bold names, instantly scannable. Quiet (no accent): the airflow stays the one signature. NOT the grayscale .logo-garden. */
.creds{border-bottom:1px solid var(--line-light)}
.creds .wrap{display:flex;align-items:baseline;gap:var(--space-3) 30px;flex-wrap:wrap;padding:30px var(--space-gutter)}
.creds .lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.creds .names{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.creds .names b{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1;color:var(--text)}
.creds .sep{width:1px;height:1.05em;background:var(--line-light);align-self:center}

/* ---------- FORMS (contact) ---------- */
.form-card{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--radius-panel);padding:36px 34px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:1rem;color:var(--text);background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-input);padding:13px 15px;transition:var(--dur-fast)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,169,59,.16)}
.field .hint{font-size:.85rem;color:var(--muted);margin-top:6px}
/* Radio rows: plain body-type labels beside the control (overrides the mono
   uppercase .field label treatment; must stay after the .field rules). */
.radio-group{display:flex;flex-wrap:wrap;gap:8px 20px}
.radio-group label{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--text);margin-bottom:0}
.radio-group input[type="radio"]{width:auto}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-6);align-items:start}
.contact-grid h2+.prose{margin-top:var(--space-stack)}
.contact-lines{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.contact-line{display:flex;gap:var(--space-3);align-items:flex-start}
.contact-line .ic{width:38px;height:38px;flex:none;border-radius:var(--radius-icon);background:rgba(111,183,212,.12);border:1px solid var(--line-light);display:grid;place-items:center}
.contact-line .ic svg{width:18px;height:18px;stroke:var(--bronze);fill:none;stroke-width:2}
.contact-line b{font-family:var(--display);font-size:1rem}
.contact-line span{display:block;color:var(--muted);font-size:.95rem}

/* ---------- SERVICE DETAIL PAGE ---------- */
.svc-layout{display:grid;grid-template-columns:210px 1fr;gap:var(--space-6);align-items:start}
.svc-sidebar{position:sticky;top:112px}
.svc-sidebar .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.svc-sidebar a{display:block;padding:9px 0 9px 14px;color:var(--muted);border-left:2px solid var(--line-light);transition:var(--dur-fast);font-size:.92rem;line-height:1.3}
.svc-sidebar a:hover{color:var(--text);border-color:var(--bronze)}
.svc-sidebar a.active{color:var(--text);border-left:2px solid var(--amber);font-weight:600}
.svc-main > p{color:var(--text);font-size:1.08rem;max-width:64ch;margin-bottom:1.3rem}
.svc-main > p b{color:var(--text)}
.svc-main h2{font-size:1.7rem;margin:46px 0 14px}
.svc-main h2:first-child{margin-top:0}
.svc-main .cards,.svc-main .cards.two{margin:24px 0 8px}
.svc-cta{margin-top:52px;background:var(--ink);color:#fff;border-radius:var(--radius-panel);padding:44px 44px;position:relative;overflow:hidden}
.svc-cta .flow{position:absolute;inset:0;opacity:.4}
.svc-cta > *{position:relative;z-index:2}
.svc-cta h3{color:#fff;font-size:1.55rem;margin:10px 0 22px;max-width:26ch}
/* Injected service-sidebar.html (nav.service-sidebar): grouped variant of .svc-sidebar.
   !important overrides the shared partial's inline h5 styles without editing it mid-migration. */
.service-sidebar{position:sticky;top:112px;font-size:.92rem}
.service-sidebar h4{font-family:var(--display);font-size:1rem;margin-bottom:8px}
.service-sidebar h4 .all-services-link{color:var(--text)}
.service-sidebar h4 .all-services-link:hover{color:var(--bronze)}
.service-sidebar h5{font-family:var(--mono)!important;font-size:.62rem!important;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)!important;font-weight:600;padding-left:0!important;margin:16px 0 6px!important}
.service-sidebar ul{list-style:none}
.service-sidebar li a{display:block;padding:8px 0 8px 14px;color:var(--muted);border-left:2px solid var(--line-light);transition:var(--dur-fast);line-height:1.3}
.service-sidebar li a:hover{color:var(--text);border-color:var(--bronze)}
.service-sidebar li a.active{color:var(--text);border-left:2px solid var(--amber);font-weight:600}
@media(max-width:900px){
  .svc-layout{grid-template-columns:1fr;gap:var(--space-1)}
  .svc-sidebar{position:static;margin-bottom:20px}
  .svc-sidebar a{display:inline-block;border-left:0;border-bottom:2px solid var(--line-light);padding:6px 14px 6px 0;margin-right:14px}
  .service-sidebar{position:static;margin-bottom:20px}
}

/* ---------- FINAL CTA ---------- */
.final{background:linear-gradient(180deg,var(--ink-2),var(--ink));color:#fff;text-align:center;position:relative;overflow:hidden}
.final .wrap{position:relative;z-index:3;padding:var(--space-section) var(--space-gutter)}
.final h2{font-size:clamp(2rem,4vw,3.1rem);margin:var(--space-3) 0 18px} /* top gap from the eyebrow above */
.final .cta-row{justify-content:center;margin-top:var(--space-4)}
.final p{color:var(--muted-dark);max-width:40ch;margin:0 auto 34px;font-size:1.1rem}
.final .flow{position:absolute;inset:0;opacity:.5}

/* ---------- 404 ---------- */
.notfound{position:relative;background:var(--ink);color:#fff;overflow:hidden;min-height:78vh;display:flex;align-items:center;text-align:center}
.notfound .flow{position:absolute;inset:0;z-index:1;opacity:.85}
.notfound .wrap{position:relative;z-index:5;max-width:640px}
.notfound .code{font-family:var(--mono);font-size:clamp(3rem,9vw,6rem);color:var(--amber);letter-spacing:.05em;line-height:1}
.notfound h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:18px 0 14px}
.notfound p{color:var(--muted-dark);max-width:40ch;margin:0 auto 30px;font-size:1.1rem}

/* ---------- LOGO GARDEN (real client proof) ---------- */
.logo-garden{background:var(--paper);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.logo-garden .wrap{padding:36px var(--space-gutter)}
.logo-garden .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:24px}
/* Column gap sized so all 10 logos fit one row inside the 1136px .wrap
   (44px left the last logo widowed on its own row at desktop widths). Below
   the one-row threshold, cap the row so the 10 logos break evenly 5+5
   instead of widowing the last one. */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 36px}
@media(max-width:1160px){.logo-row{max-width:600px;margin:0 auto}}
.logo-row img{max-height:26px;max-width:150px;width:auto;height:auto;object-fit:contain;opacity:.5;filter:grayscale(1);transition:opacity var(--dur-base) ease,filter var(--dur-base) ease}
/* Optical-size balance: source logos differ in aspect ratio + built-in padding,
   so one flat cap leaves some reading heavy and some small. Per-logo height
   nudges even out the visual weight (order matches the markup). */
.logo-row img:nth-child(1){max-height:28px}   /* Boston Dynamics — light wordmark, needs presence */
.logo-row img:nth-child(2){max-height:22px}   /* Samsung — bold ellipse, reads heavy */
.logo-row img:nth-child(3){max-height:30px}   /* Uber — padded glyph, reads small */
.logo-row img:nth-child(4){max-height:20px}   /* Hyundai — ultra-wide (7.8:1), was capped thin at 13px */
.logo-row img:nth-child(6){max-height:30px}   /* L3 Technologies — padded, reads small */
.logo-row img:nth-child(8){max-height:23px}   /* LifeProof — widest, reads heavy */
.logo-row img:hover{opacity:1;filter:grayscale(0)}

/* ---------- FOOTER ---------- */
/* The real site footer comes from the injected footer.html + components/_footer.css
   (imported at the top of this file). No footer rule here, so _footer.css governs
   .site-footer on every migrated page. */

/* ---------- MODAL (portfolio Figma embed; opened by main.js initFigmaModal) ---------- */
.modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(10,24,38,.72);padding:6vh 20px;overflow:auto}
.modal-content{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--radius-panel);max-width:1040px;margin:0 auto;padding:20px;position:relative;box-shadow:0 24px 60px rgba(10,24,38,.4)}
.modal-content .close-button{position:absolute;top:8px;right:16px;font-size:1.9rem;line-height:1;color:var(--muted);cursor:pointer;z-index:2}
.modal-content .close-button:hover{color:var(--text)}
.modal iframe{width:100%;min-height:72vh;border-radius:var(--radius-card);display:block}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .cards,.cards.two,.projects{grid-template-columns:1fr}
  .about-grid,.contact-grid,.project.featured .inner{grid-template-columns:1fr}
  .about-grid .portrait{max-width:260px}
  .creds .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  .creds .sep{display:none}
  .project.featured .media{border-right:0;border-bottom:1px solid var(--line-light);min-height:220px}
}
@media(max-width:820px){
  .navlinks{display:none}
  .phases{grid-template-columns:1fr;gap:20px}
  .phase:nth-child(1),.phase:nth-child(2),.phase:nth-child(3){transform:none}
  .flightpath::before,.flightpath::after,.fp-line{display:none}
  .phase .dot{display:none} /* dots anchor the hidden flight-path line; orphaned without it */
  .grid3{grid-template-columns:1fr}
  .readout .cell{border-right:0;border-bottom:1px solid var(--line-dark);min-width:100%}
  .readout .cell:first-child{padding-left:26px} /* stacked: keep the shared left padding */
  .readout .cell:last-child{border-bottom:0}
  .section{padding:var(--space-section-sm) 0}
  .page-hero .wrap{padding-top:130px}
}
/* Reduced motion is handled in js/airflow.js at inject time: the airflow
   tracers and flight-path are SMIL <animate>, which CSS cannot pause, so
   the JS renders them as static drawn lines instead (see REDUCE). */