/* ════════════════════════════════════════════════════════════════
   2050 EXPERT — SHARED SITE STYLESHEET (v2)
   Loaded by every page as /styles/site.css
   Tokens + component system. Edit once, applies everywhere.
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Departure Mono";
  src: url("../fonts/DepartureMono-Regular.otf") format("opentype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700; font-display: swap;
}

:root {
  --em: #16A85A; --em-b: #1FD27A; --fo: #014A2E; --fo-d: #022601;
  --mi: #B5F0C9; --mi-s: #DDF7E5;
  --nv: #03171F; --nv2: #0A2128; --nv3: #122A33; --nv4: #1E3A45;
  --pa: #FAF8F4; --wh: #FFFFFF;
  --f4: #736A62; --f5: #333740; --f1: #F0EEE9;
  --pi: #F3C9C7; --ye: #F7E26E; --li: #D8F25E; --au: #3A1B5C;
  --mo: "Departure Mono","VT323",ui-monospace,monospace;
  --bd: "Space Grotesk",system-ui,sans-serif;
  --fast: 120ms; --med: 220ms; --slow: 480ms;
  --ease: cubic-bezier(.16,.84,.30,1.00);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--bd); font-size: 17px; line-height: 1.55; color: var(--f5);
       background: var(--pa); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Layout ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 56px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Type helpers ── */
.ey  { font: 10px/1 var(--mo); letter-spacing: .2em; text-transform: uppercase; display: inline-block; }
.ey-e { color: var(--em); } .ey-m { color: var(--mi); } .ey-f { color: var(--fo); }
.tag  { display: inline-block; padding: 5px 12px 4px;
        font: 10px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; }
.tag-y { background: var(--ye); color: var(--fo-d); }
.tag-p { background: var(--pi); color: var(--nv); }
.tag-l { background: var(--li); color: var(--fo-d); }
.tag-m { background: var(--mi); color: var(--fo-d); }
.tag-e { background: transparent; border: 1px solid rgba(22,168,90,.4); color: var(--em); }
.link-arr { font: 10px/1 var(--mo); letter-spacing: .16em; text-transform: uppercase;
            border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arr-e { color: var(--em); } .link-arr-m { color: var(--mi); } .link-arr-f { color: var(--fo); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 24px;
       font: 11px/1 var(--mo); letter-spacing: .14em; text-transform: uppercase;
       border: 1.5px solid transparent; cursor: pointer;
       transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-p  { background: var(--em); color: var(--fo-d); border-color: var(--em); }
.btn-p:hover  { background: var(--em-b); border-color: var(--em-b); }
.btn-gm { background: transparent; color: var(--mi); border-color: rgba(181,240,201,.4); }
.btn-gm:hover { background: var(--mi); color: var(--fo-d); border-color: var(--mi); }
.btn-gd { background: transparent; color: var(--fo); border-color: var(--fo); }
.btn-gd:hover { background: var(--fo); color: var(--mi); }
.btn-lg { padding: 18px 30px; font-size: 12px; }

/* ════════════════════════════════════ NAV ════════════════════════════════════ */
.site-nav { position: sticky; top: 0; z-index: 100;
            background: rgba(3,23,31,.95); border-bottom: 1px solid rgba(181,240,201,.12);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between;
             padding: 16px 56px; max-width: 1280px; margin: 0 auto; gap: 24px; }
.logo { font: 20px/1 var(--mo); color: var(--mi); display: flex; align-items: baseline; gap: 0; }
.logo .e { color: var(--em); }
.logo .sup { font-size: 10px; letter-spacing: .16em; margin-left: 9px; opacity: .7; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font: 10px/1 var(--mo); letter-spacing: .16em; text-transform: uppercase;
               color: var(--mi); opacity: .6; transition: opacity var(--fast) var(--ease); }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active { color: var(--em); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer;
              font: 10px/1 var(--mo); letter-spacing: .16em; text-transform: uppercase; color: var(--mi); }

/* ════════════════════════════════════ HERO (corporate) ════════════════════════════════════ */
.hero { background: var(--nv); color: var(--mi); position: relative; overflow: hidden;
        padding: 104px 0 96px; }
.bp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; }
.hero .ey, .hero .tag { margin-bottom: 26px; }
.hero h1 { font: clamp(40px,5.6vw,84px)/1.02 var(--bd); font-weight: 600;
           letter-spacing: -.022em; color: #fff; max-width: 20ch; margin-bottom: 22px; }
.hero h1 .ac { color: var(--mi); }
.hero .lede { font: clamp(17px,1.4vw,21px)/1.55 var(--bd); color: var(--mi);
              opacity: .82; max-width: 54ch; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 0; }
.hero-compact { padding: 88px 0 72px; }

/* Proof strip (under hero) */
.proof-strip { background: var(--fo-d); border-bottom: 1px solid rgba(181,240,201,.08); }
.proof-strip-inner { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
                     max-width: 1280px; margin: 0 auto; padding: 18px 56px; }
.proof-item { font: 10px/1.4 var(--mo); letter-spacing: .16em; text-transform: uppercase;
              color: var(--mi); opacity: .65; }
.proof-dot { color: var(--em); opacity: .8; }

/* ════════════════════════════════════ MARQUEE ════════════════════════════════════ */
.marquee { background: var(--em); border-block: 1px solid var(--fo); padding: 14px 0; overflow: hidden; }
.mtrack { display: flex; gap: 0; white-space: nowrap; animation: scrollX 40s linear infinite; }
.mitem { display: inline-flex; align-items: center; gap: 32px;
         font: 19px/1 var(--bd); font-weight: 500; color: var(--fo-d); padding-right: 32px; }
.mdot { font-size: 11px; opacity: .4; }
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mtrack { animation: none; } }

/* ════════════════════════════════════ SECTION SCAFFOLD ════════════════════════════════════ */
.sec { padding: 112px 0; }
.sec-dark { background: var(--nv); color: var(--mi); }
.sec-paper { background: var(--pa); }
.sec-forest { background: var(--fo-d); color: var(--mi); }
.sec-head { max-width: 820px; margin-bottom: 52px; }
.sec-head .ey, .sec-head .tag { margin-bottom: 20px; }
.sec-head h2 { font: clamp(32px,4vw,60px)/1.05 var(--bd); font-weight: 600;
               letter-spacing: -.02em; margin-bottom: 18px; }
.sec-dark .sec-head h2, .sec-forest .sec-head h2 { color: #fff; }
.sec-paper .sec-head h2 { color: var(--nv); }
.sec-head p { font: clamp(17px,1.3vw,20px)/1.6 var(--bd); max-width: 60ch; }
.sec-dark .sec-head p, .sec-forest .sec-head p { color: var(--mi); opacity: .72; }
.sec-paper .sec-head p { color: var(--f4); }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end;
                gap: 24px; flex-wrap: wrap; max-width: none; }

/* ════════════════════════════════════ COMMERCIAL-SHIFT PANEL ════════════════════════════════════ */
.shift { background: var(--nv); color: var(--mi); padding: 104px 0; position: relative; overflow: hidden; }
.shift-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr;
               gap: 64px; align-items: center; }
.shift h2 { font: clamp(28px,3.4vw,48px)/1.1 var(--bd); font-weight: 600;
            letter-spacing: -.02em; color: #fff; }
.shift p { font: clamp(16px,1.3vw,19px)/1.65 var(--bd); color: var(--mi); opacity: .75; }
.shift p + p { margin-top: 16px; }

/* ════════════════════════════════════ CAPABILITY GRID (3/4-up) ════════════════════════════════════ */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
            background: rgba(181,240,201,.1); border: 1px solid rgba(181,240,201,.1); }
.cap-grid.four { grid-template-columns: repeat(2,1fr); }
.cap-card { background: var(--nv); padding: 40px 36px; display: flex; flex-direction: column;
            gap: 14px; transition: background var(--med) var(--ease); }
.sec-paper .cap-grid { background: rgba(20,30,35,.1); border-color: rgba(20,30,35,.1); }
.sec-paper .cap-card { background: var(--pa); }
.sec-paper .cap-card:hover { background: var(--f1); }
.cap-card:hover { background: var(--nv2); }
.cap-n { font: 24px/1 var(--mo); color: var(--em); }
.cap-card h3 { font: clamp(19px,1.7vw,25px)/1.2 var(--bd); font-weight: 600; }
.sec-dark .cap-card h3 { color: #fff; }
.sec-paper .cap-card h3 { color: var(--nv); }
.cap-card p { font: 15px/1.6 var(--bd); flex: 0 0 auto; }
.sec-dark .cap-card p { color: var(--mi); opacity: .65; }
.sec-paper .cap-card p { color: var(--f4); }
.cap-points { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.cap-points li { font: 13px/1.4 var(--bd); padding-left: 18px; position: relative; }
.sec-dark .cap-points li { color: var(--mi); opacity: .72; }
.sec-paper .cap-points li { color: var(--f5); }
.cap-points li::before { content: "—"; position: absolute; left: 0; color: var(--em);
                         font: 12px/1.4 var(--mo); opacity: 1; }
.cap-outcome { font: 13px/1.5 var(--bd); font-style: italic; padding: 12px 0 0;
               margin-top: 4px; border-top: 1px solid rgba(181,240,201,.12); }
.sec-dark .cap-outcome { color: var(--mi); opacity: .6; }
.sec-paper .cap-outcome { color: var(--f4); border-top-color: rgba(20,30,35,.1); }
.cap-cta { font: 10px/1 var(--mo); letter-spacing: .15em; text-transform: uppercase;
           color: var(--em); margin-top: auto; padding-top: 6px; align-self: flex-start;
           border-bottom: 1px solid transparent; transition: border-color var(--fast) var(--ease); }
.cap-card:hover .cap-cta { border-bottom-color: var(--em); }

/* ════════════════════════════════════ DIAGNOSTIC CARDS ════════════════════════════════════ */
.diag-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.diag-card { background: var(--nv); border: 1px solid rgba(181,240,201,.14); padding: 34px 32px;
             display: flex; flex-direction: column; gap: 12px;
             transition: border-color var(--med) var(--ease), background var(--med) var(--ease); }
.diag-card:hover { border-color: rgba(22,168,90,.5); background: var(--nv2); }
.sec-paper .diag-card { background: var(--wh); border-color: rgba(20,30,35,.12); }
.sec-paper .diag-card:hover { border-color: rgba(22,168,90,.45); background: var(--f1); }
.diag-eyebrow { font: 9px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; color: var(--em); }
.diag-card h3 { font: clamp(18px,1.6vw,23px)/1.2 var(--bd); font-weight: 600; }
.sec-dark .diag-card h3 { color: #fff; } .sec-paper .diag-card h3 { color: var(--nv); }
.diag-best { font: 14px/1.55 var(--bd); }
.sec-dark .diag-best { color: var(--mi); opacity: .65; } .sec-paper .diag-best { color: var(--f4); }
.diag-receive { font: 13px/1.5 var(--bd); padding: 12px 0 0; margin-top: 2px;
                border-top: 1px solid rgba(181,240,201,.12); }
.sec-dark .diag-receive { color: var(--mi); opacity: .8; }
.sec-paper .diag-receive { color: var(--f5); border-top-color: rgba(20,30,35,.1); }
.diag-receive b { color: var(--em); font-weight: 500; }
.diag-cta { font: 10px/1 var(--mo); letter-spacing: .15em; text-transform: uppercase;
            color: var(--em); margin-top: auto; padding-top: 8px; align-self: flex-start;
            border-bottom: 1px solid transparent; transition: border-color var(--fast) var(--ease); }
.diag-card:hover .diag-cta { border-bottom-color: var(--em); }
.diag-status { font: 8px/1 var(--mo); letter-spacing: .16em; text-transform: uppercase;
               color: var(--mi); opacity: .4; align-self: flex-start; padding: 4px 8px;
               border: 1px solid rgba(181,240,201,.2); }

/* ════════════════════════════════════ WHAT-WE-DO / SERVICE AREAS ════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
            background: rgba(181,240,201,.1); border: 1px solid rgba(181,240,201,.1); }
.sec-paper .svc-grid { background: rgba(20,30,35,.1); border-color: rgba(20,30,35,.1); }
.svc-item { background: var(--nv); padding: 32px 30px; display: flex; flex-direction: column; gap: 8px; }
.sec-paper .svc-item { background: var(--pa); }
.svc-item h4 { font: clamp(16px,1.4vw,20px)/1.25 var(--bd); font-weight: 600; }
.sec-dark .svc-item h4 { color: #fff; } .sec-paper .svc-item h4 { color: var(--nv); }
.svc-item p { font: 14px/1.55 var(--bd); }
.sec-dark .svc-item p { color: var(--mi); opacity: .62; } .sec-paper .svc-item p { color: var(--f4); }

/* ════════════════════════════════════ HOW WE WORK ════════════════════════════════════ */
.how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.how-step { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px;
            border: 1px solid rgba(181,240,201,.14); background: var(--nv2); }
.sec-paper .how-step { border-color: rgba(20,30,35,.1); background: var(--wh); }
.how-n { font: 11px/1 var(--mo); letter-spacing: .14em; color: var(--em); }
.how-step h4 { font: 18px/1.2 var(--bd); font-weight: 600; }
.sec-dark .how-step h4 { color: #fff; } .sec-paper .how-step h4 { color: var(--nv); }
.how-step p { font: 14px/1.55 var(--bd); }
.sec-dark .how-step p { color: var(--mi); opacity: .62; } .sec-paper .how-step p { color: var(--f4); }

/* ════════════════════════════════════ CLIENT-WORK CARDS ════════════════════════════════════ */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
             background: rgba(181,240,201,.1); border: 1px solid rgba(181,240,201,.1); }
.wc { background: var(--nv); padding: 44px 40px; display: flex; flex-direction: column; gap: 12px;
      transition: background var(--med) var(--ease); }
.wc:hover { background: var(--nv2); }
.wc-n  { font: 30px/1 var(--mo); color: var(--em); }
.wc-cl { font: 10px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; color: var(--mi); opacity: .45; }
.wc h3 { font: clamp(18px,1.8vw,24px)/1.25 var(--bd); font-weight: 600; color: #fff; }
.wc p  { font: 14px/1.55 var(--bd); color: var(--mi); opacity: .6; flex: 1; }
.wc-tag { display: inline-block; margin-top: 8px; padding: 5px 12px 4px;
          font: 9px/1 var(--mo); letter-spacing: .15em; text-transform: uppercase;
          border: 1px solid rgba(181,240,201,.18); color: var(--em); align-self: flex-start; }

/* ════════════════════════════════════ THE FUTURE? MODULE ════════════════════════════════════ */
.note-row { display: grid; grid-template-columns: 96px 132px 1fr 72px; gap: 20px; align-items: center;
            padding: 22px 0; border-top: 1px solid rgba(181,240,201,.1); cursor: pointer;
            transition: background var(--fast) var(--ease), padding var(--fast) var(--ease); }
.note-row:last-child { border-bottom: 1px solid rgba(181,240,201,.1); }
.note-row:hover { background: rgba(181,240,201,.04); padding-inline: 14px; }
.note-row:hover .nt { color: var(--em); }
.nm { font: 10px/1 var(--mo); letter-spacing: .12em; text-transform: uppercase; color: var(--mi); opacity: .4; }
.nt { font: clamp(16px,1.4vw,19px)/1.3 var(--bd); font-weight: 500; color: #fff; transition: color var(--fast) var(--ease); }
.nr { font: 10px/1 var(--mo); letter-spacing: .1em; text-transform: uppercase; color: var(--mi); opacity: .35; text-align: right; }

/* ════════════════════════════════════ FOUNDER BLOCK ════════════════════════════════════ */
.founder-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
.fi { position: relative; aspect-ratio: 3/4; background: var(--nv2); overflow: hidden; }
.fi img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.fi-script { position: absolute; bottom: 18px; left: 10px; font: 88px/.85 'Caveat',cursive;
             font-weight: 700; color: var(--pi); transform: rotate(-4deg); pointer-events: none;
             text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.fc { display: flex; flex-direction: column; gap: 18px; }
.fc h2 { font: clamp(34px,4vw,56px)/1.05 var(--bd); font-weight: 600; letter-spacing: -.02em; color: var(--nv); }
.fc .lede { font: clamp(17px,1.4vw,20px)/1.55 var(--bd); color: var(--f4); }
.fc .body { font: 15px/1.6 var(--bd); color: var(--f4); }
.fstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 24px;
          border-top: 1px solid rgba(20,30,35,.1); margin-top: 4px; }
.fs .fs-l { font: 9px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; color: var(--em);
            display: block; margin-bottom: 6px; }
.fs p { font: 13px/1.45 var(--bd); color: var(--f5); }

/* ════════════════════════════════════ QUALIFICATION / FINAL CTA PANEL ════════════════════════════════════ */
.cta-panel { background: var(--nv); color: var(--mi); padding: 104px 0; position: relative; overflow: hidden; }
.cta-panel-inner { position: relative; z-index: 1; max-width: 760px; }
.cta-panel h2 { font: clamp(30px,3.6vw,54px)/1.06 var(--bd); font-weight: 600;
                letter-spacing: -.02em; color: #fff; margin-bottom: 16px; }
.cta-panel p { font: clamp(16px,1.3vw,19px)/1.6 var(--bd); color: var(--mi); opacity: .75;
               margin-bottom: 28px; max-width: 56ch; }
.cta-panel-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-note { font: 10px/1 var(--mo); letter-spacing: .12em; text-transform: uppercase; color: var(--mi); opacity: .45; }

/* ════════════════════════════════════ PRICE / COMMERCIAL BLOCK ════════════════════════════════════ */
.price-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.price-big { font: clamp(40px,4.5vw,64px)/1 var(--mo); color: var(--em); }
.price-sep { width: 1px; height: 52px; background: rgba(181,240,201,.2); flex-shrink: 0; }
.sec-paper .price-sep { background: rgba(20,30,35,.12); }
.price-meta { display: flex; flex-direction: column; gap: 7px; }
.price-meta span { font: 10px/1 var(--mo); letter-spacing: .14em; text-transform: uppercase; }
.sec-dark .price-meta span { color: var(--mi); opacity: .7; }
.sec-paper .price-meta span { color: var(--f4); }
.commercial-block { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
                    border: 1px solid rgba(181,240,201,.2); padding: 16px 24px; }
.commercial-block .cb-t { font: 12px/1.6 var(--mo); letter-spacing: .12em; text-transform: uppercase; color: var(--em); }

/* ════════════════════════════════════ REVIEW / NUMBERED GRID ════════════════════════════════════ */
.review-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
               background: rgba(20,30,35,.1); border: 1px solid rgba(20,30,35,.1); }
.sec-dark .review-grid { background: rgba(181,240,201,.1); border-color: rgba(181,240,201,.1); }
.ri { background: var(--pa); padding: 24px 20px; display: flex; flex-direction: column; gap: 8px;
      transition: background var(--fast) var(--ease); }
.sec-dark .ri { background: var(--nv); }
.ri:hover { background: var(--f1); } .sec-dark .ri:hover { background: var(--nv2); }
.ri-n { font: 12px/1 var(--mo); color: var(--em); letter-spacing: .06em; }
.ri-t { font: 14px/1.35 var(--bd); font-weight: 500; }
.sec-dark .ri-t { color: #fff; } .ri-t { color: var(--nv); }
.ri-b { font: 13px/1.45 var(--bd); color: var(--f4); }
.sec-dark .ri-b { color: var(--mi); opacity: .6; }

/* ════════════════════════════════════ FOOTER ════════════════════════════════════ */
.site-footer { background: var(--fo-d); color: var(--mi); padding: 80px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1fr 2.4fr; gap: 64px; margin-bottom: 56px; align-items: flex-start; }
.foot-logo { font: 50px/1 var(--mo); }
.foot-logo .e { color: var(--em); }
.foot-logo .lbl { font-size: 14px; letter-spacing: .12em; display: block; margin-top: 8px; opacity: .55; }
.foot-line { font: 13px/1.55 var(--bd); color: var(--mi); opacity: .35; margin-top: 14px; max-width: 28ch; }
.foot-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.foot-col .ch { font: 9px/1 var(--mo); letter-spacing: .2em; text-transform: uppercase; color: var(--em);
                margin-bottom: 16px; display: block; }
.foot-col ul { display: flex; flex-direction: column; gap: 10px; }
.foot-col li a, .foot-col li { font: 14px/1.4 var(--bd); color: var(--mi); opacity: .5;
                               transition: opacity var(--fast) var(--ease); display: inline-block; }
.foot-col li a:hover { opacity: 1; }
.foot-base { display: flex; flex-direction: column; gap: 6px; padding-top: 24px;
             border-top: 1px solid rgba(181,240,201,.1); }
.foot-base .fb-copy { font: 10px/1.4 var(--mo); letter-spacing: .1em; text-transform: uppercase; color: var(--mi); }
.foot-base .fb-legal { font: 10px/1.5 var(--bd); color: var(--mi); }

/* ════════════════════════════════════ PAGE HERO (post / case study) ════════════════════════════════════ */
.ph-hero { background: var(--nv); color: var(--mi); padding: 80px 0 60px; position: relative; overflow: hidden; }
.ph-hero-inner { position: relative; z-index: 1; }
.crumb { display: inline-flex; align-items: center; gap: 8px; font: 9px/1 var(--mo); letter-spacing: .18em;
         text-transform: uppercase; color: var(--mi); opacity: .45; margin-bottom: 28px; transition: opacity var(--fast); }
.crumb:hover { opacity: .8; }
.crumb a { color: var(--mi); } .crumb .sep { opacity: .4; }
.ph-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 22px; }
.ph-date, .ph-read { font: 9px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; color: var(--mi); opacity: .4; }
.ph-sep { color: var(--mi); opacity: .2; font: 11px var(--mo); }
.ph-hero h1 { font: clamp(28px,4vw,56px)/1.08 var(--bd); font-weight: 600; letter-spacing: -.022em;
              color: #fff; max-width: 22ch; margin-bottom: 14px; }
.ph-lede { font: clamp(16px,1.3vw,20px)/1.6 var(--bd); color: var(--mi); opacity: .65; max-width: 52ch; }

/* ════════════════════════════════════ ARTICLE BODY ════════════════════════════════════ */
.post-body { padding: 72px 0 56px; }
.post-content h2 { font: clamp(20px,2vw,28px)/1.2 var(--bd); font-weight: 600; color: var(--nv);
                   letter-spacing: -.015em; margin: 40px 0 12px; }
.post-content h3 { font: clamp(16px,1.4vw,20px)/1.3 var(--bd); font-weight: 600; color: var(--nv); margin: 28px 0 8px; }
.post-content p { font: 17px/1.7 var(--bd); color: var(--f4); margin-bottom: 18px; }
.post-content p strong { color: var(--f5); font-weight: 600; }
.post-content a { color: var(--em); border-bottom: 1px solid rgba(22,168,90,.3); }
.post-content ul, .post-content ol { margin: 0 0 18px 0; padding-left: 0; display: flex; flex-direction: column; gap: 8px; }
.post-content li { font: 17px/1.65 var(--bd); color: var(--f4); padding-left: 20px; position: relative; }
.post-content li::before { content: "—"; position: absolute; left: 0; color: var(--em); font: 14px/1 var(--mo); }
.post-content blockquote { margin: 32px 0; padding: 20px 24px; border-left: 3px solid var(--em); background: var(--f1); }
.post-content blockquote p { font: 18px/1.6 var(--bd); font-weight: 500; color: var(--f5); margin: 0; }
.post-section-tag { font: 9px/1 var(--mo); letter-spacing: .22em; text-transform: uppercase; color: var(--em);
                    display: block; margin: 48px 0 16px; padding-top: 48px; border-top: 1px solid rgba(20,30,35,.08); }
.post-rule { height: 1px; background: rgba(20,30,35,.08); margin: 40px 0; }

/* Author block */
.author-block { display: flex; align-items: flex-start; gap: 20px; padding: 28px 32px; background: var(--nv); margin: 56px 0 0; }
.author-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(181,240,201,.2); }
.author-info { display: flex; flex-direction: column; gap: 6px; }
.author-label { font: 8px/1 var(--mo); letter-spacing: .22em; text-transform: uppercase; color: var(--em); }
.author-name { font: 16px/1.2 var(--bd); font-weight: 600; color: #fff; }
.author-bio { font: 13px/1.6 var(--bd); color: var(--mi); opacity: .55; max-width: 52ch; }

/* Post / case nav */
.post-nav { background: var(--pa); padding: 48px 0; border-top: 1px solid rgba(20,30,35,.08); }
.post-nav-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }
.post-nav-prev, .post-nav-next { display: flex; flex-direction: column; gap: 5px; }
.post-nav-next { align-items: flex-end; }
.post-nav-dir { font: 8px/1 var(--mo); letter-spacing: .22em; text-transform: uppercase; color: var(--f4); opacity: .5; }
.post-nav-title { font: clamp(13px,1.1vw,16px)/1.3 var(--bd); font-weight: 500; color: var(--nv);
                  transition: color var(--fast); max-width: 28ch; }
.post-nav-prev:hover .post-nav-title, .post-nav-next:hover .post-nav-title { color: var(--em); }
.post-nav-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.post-nav-note { font: 8px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; color: var(--f4); opacity: .45; }

/* Newsletter band */
.nl-band { background: var(--nv); padding: 52px 0; }
.nl-band-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
.nl-band-l { display: flex; flex-direction: column; gap: 10px; }
.nl-band-eyebrow { font: 9px/1 var(--mo); letter-spacing: .22em; text-transform: uppercase; color: var(--em); }
.nl-band-h { font: clamp(20px,2vw,28px)/1.2 var(--bd); font-weight: 600; color: #fff; }
.nl-band-p { font: 15px/1.6 var(--bd); color: var(--mi); opacity: .55; max-width: 48ch; }
.nl-band-proof { font: 9px/1 var(--mo); letter-spacing: .16em; text-transform: uppercase; color: var(--mi); opacity: .3; }
.nl-band-ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* On-site newsletter form */
.nl-form-onsite { display: flex; flex-direction: column; gap: 12px; }
.nl-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-input { background: rgba(181,240,201,.06); border: 1px solid rgba(181,240,201,.25); color: #fff;
            font: 15px/1 var(--bd); padding: 14px 16px; flex: 1; min-width: 200px; outline: none;
            transition: border-color var(--fast); }
.nl-input::placeholder { color: var(--mi); opacity: .4; }
.nl-input:focus { border-color: var(--em); }
.nl-microcopy { font: 9px/1.5 var(--mo); letter-spacing: .1em; text-transform: uppercase; color: var(--mi); opacity: .4; }
.nl-secondary { font: 10px/1 var(--mo); letter-spacing: .14em; text-transform: uppercase; color: var(--em);
                border-bottom: 1px solid rgba(22,168,90,.3); padding-bottom: 2px; align-self: flex-start; }

/* ════════════════════════════════════ FAQ / FIT FILTER ════════════════════════════════════ */
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit-card { padding: 30px 28px; border: 1px solid rgba(181,240,201,.14); background: var(--nv2); }
.sec-paper .fit-card { border-color: rgba(20,30,35,.1); background: var(--wh); }
.fit-card.yes { border-left: 3px solid var(--em); }
.fit-card.no { border-left: 3px solid var(--pi); }
.fit-card h4 { font: 11px/1 var(--mo); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.fit-card.yes h4 { color: var(--em); } .fit-card.no h4 { color: var(--pi); }
.fit-card p { font: 15px/1.6 var(--bd); }
.sec-dark .fit-card p { color: var(--mi); opacity: .7; } .sec-paper .fit-card p { color: var(--f4); }

/* ════════════════════════════════════ RESPONSIVE ════════════════════════════════════ */
/* ════════════════════════════════════ THE FUTURE? — EDITORIAL LISTING ════════════════════════════════════ */
.tf-bar { background: var(--fo-d); border-bottom: 1px solid rgba(181,240,201,.08); }
.tf-bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
                gap: 12px; max-width: 1280px; margin: 0 auto; padding: 18px 56px; }
.tf-bar-note { font: 10px/1 var(--mo); letter-spacing: .18em; text-transform: uppercase; color: var(--mi); opacity: .5; }
.tf-list { padding: 64px 0 88px; }
.tf-row { display: grid; grid-template-columns: 132px 124px 1fr 64px; gap: 36px; align-items: start;
          padding: 38px 0; border-top: 1px solid rgba(20,30,35,.1);
          transition: background var(--fast) var(--ease), padding var(--fast) var(--ease); }
.tf-row:last-child { border-bottom: 1px solid rgba(20,30,35,.1); }
.tf-row:hover { background: var(--f1); padding-inline: 20px; }
.tf-row:hover .tf-title { color: var(--em); }
.tf-date { font: 10px/1.5 var(--mo); letter-spacing: .14em; text-transform: uppercase; color: var(--f4); opacity: .6; padding-top: 6px; }
.tf-cat .tag { white-space: normal; line-height: 1.35; text-align: left; }
.tf-title { font: 600 clamp(20px,2vw,27px)/1.22 var(--bd); color: var(--nv); letter-spacing: -.015em; margin-bottom: 12px; transition: color var(--fast) var(--ease); }
.tf-excerpt { font: 15px/1.6 var(--bd); color: var(--f4); max-width: 58ch; }
.tf-read { font: 10px/1.5 var(--mo); letter-spacing: .1em; text-transform: uppercase; color: var(--f4); opacity: .5; text-align: right; padding-top: 6px; }

@media (max-width: 980px) {
  .wrap, .wrap-narrow, .nav-inner, .proof-strip-inner, .tf-bar-inner { padding-inline: 24px; }
  .nav-links { display: none; }
  .tf-row { grid-template-columns: 110px 1fr; gap: 14px 20px; }
  .tf-row .tf-cat { grid-column: 1; }
  .tf-row .tf-date { grid-row: 1; }
  .tf-row > div:nth-child(3) { grid-column: 1 / -1; }
  .tf-read { display: none; }
  .shift-inner { grid-template-columns: 1fr; gap: 32px; }
  .cap-grid, .cap-grid.four { grid-template-columns: 1fr; }
  .diag-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: repeat(2,1fr); }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .fstats { grid-template-columns: 1fr 1fr; }
  .note-row { grid-template-columns: 80px 1fr; }
  .note-row .nm:nth-child(2), .note-row .nr { display: none; }
  .nl-band-inner { grid-template-columns: 1fr; gap: 28px; }
  .post-nav-grid { grid-template-columns: 1fr 1fr; }
  .post-nav-cta { display: none; }
  .fit-cols { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .how-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .fstats { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; }
  .price-row { flex-direction: column; align-items: flex-start; }
  .price-sep { display: none; }
}

/* Related reading list — build-generated, on-brand */
.related { margin: 3rem 0 2rem; }
.related-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.related-list li { border-top: 1px solid var(--rule); padding: 0.75rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.related-list li a { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); text-decoration: none; }
.related-list li a:hover { color: var(--accent); }
.related-list li span { font-family: var(--mono); font-size: 10px; color: var(--mid); white-space: nowrap; flex-shrink: 0; }