/* ═══════════════════════════════════════════════════════════════════════════
   THEME STYLES
   ---------------------------------------------------------------------------
   The source stylesheet minus its :root block, copied verbatim. Tokens live in
   tokens.css (loaded first). WordPress-specific additions are appended at the
   very end under a "WORDPRESS" section (source: tools/wp-additions.css), so
   the original stylesheet remains diffable against the source file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SCALE MINDS / SPATIAL DESIGN SYSTEM v3.2.2
   ---------------------------------------------------------------------------
   Direction: Spatial UI (layered material), not decorative glassmorphism.
   Depth is structural: every surface sits on a known plane (z0 canvas →
   z1 recessed → z2 raised → z3 floating → z4 chrome). Translucency is used
   only where something genuinely overlaps something else.

   Brand rules preserved: Inter only · no italics (weight + colour = emphasis)
   · green is the single accent · red/amber are functional signals only
   · on dark green planes the only accent is --yellow (echoes the logo yellow;
     5.83:1 on green, 11.1:1 on green-deep). Never yellow on light glass.
   · the multi-colour Scale Minds logo mark is the ONE sanctioned exception to
     the single-accent rule. Logo mark colours never leak into UI elements.
   Ratio holds at ~60% light canvas / 30% neutral material / 10% green.
   All body and UI text verified ≥ 4.5:1 against its effective backdrop;
   translucent panels are kept ≥ 72% opaque so contrast never depends on
   what happens to scroll beneath them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ---------------------------------------------------------------------------
   01 · TOKENS ............ canvas · material · edges · ink · accent · signals
                            elevation · blur · spacing · radius · motion · layout
   02 · BASE .............. reduced-motion guard · reset · html/body · light field
   03 · UTILITIES ......... a11y (vis-hidden, skip, focus) · wrap · section
   04 · PRIMITIVES ........ .plane material system · .lift · type scale · buttons
                            section-head · media placeholders
   05 · SECTIONS .......... nav · hero · proof · thesis · engine · mid-cta · work
                            testimonials · principles · fit · faq · cta · footer
   06 · MOTION ............ reveal-on-scroll · reduced-motion states
   07 · FALLBACKS ......... no-backdrop-filter degradation
   ═══════════════════════════════════════════════════════════════════════════ */



@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  scroll-padding-top:92px; background:var(--canvas);
}
body{
  font-family:var(--f-sans); font-size:15px; line-height:1.6;
  letter-spacing:-.011em; color:var(--fg-1); background:var(--canvas);
  overflow-x:hidden; position:relative; min-height:100%;
}

/* ── The ambient light field. This is the "room" the surfaces float in.
      Fixed, so panels genuinely pass over changing light as you scroll. ── */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 78% -10%, rgba(18,123,66,.10), transparent 62%),
    radial-gradient(900px 700px at 8% 12%,  rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1000px 900px at 50% 108%, rgba(11,95,50,.07), transparent 60%),
    linear-gradient(180deg,#F5F7F6 0%, var(--canvas) 38%, var(--canvas-2) 100%);
}
/* Fine grain: kills banding on the gradients and stops the glass reading plastic */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--green); color:#fff; }

em{ font-style:normal; font-weight:600; color:var(--green); }
em.neg{ color:var(--red); }
em.ink{ color:var(--fg-1); }

/* Focus ring follows each element's own radius (a forced radius here would
   visibly re-shape pill buttons and inputs on keyboard focus). */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}
.vis-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff; padding:12px 18px;
  font-weight:600; font-size:13px; border-radius:var(--r-sm);
}
.skip:focus{ left:16px; top:16px; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); width:100%; }
.section{ padding:var(--sec-pad) 0; position:relative; }
/* Alternating tonal wash: a 4.5% green veil fading out over the section's top.
   Marks every second section boundary so tighter gaps still read as chapters.
   Decorative only; no effect on text contrast (dark ink on it stays > AA). */
.section-tonal{ background:linear-gradient(180deg, rgba(11,95,50,.045), rgba(11,95,50,0) 78%); }

/* ═══════════════ MATERIAL PRIMITIVES ═══════════════
   .plane = a surface on a plane. Modifier sets which plane.            */
.plane{
  position:relative; border-radius:var(--r-lg);
  background:var(--mat-2);
  -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--elev-2), var(--rim);
}
.plane--recessed{
  background:var(--mat-1);
  box-shadow:inset 0 1px 3px rgba(20,30,25,.06), inset 0 0 0 1px rgba(255,255,255,.45);
  border-color:rgba(255,255,255,.5);
}
.plane--raised{ background:var(--mat-3); box-shadow:var(--elev-3), var(--rim); }
.plane--float{ box-shadow:var(--elev-4), var(--rim); background:var(--mat-3); }
.plane--tint{ background:linear-gradient(180deg, rgba(230,240,234,.9), rgba(255,255,255,.78)); }

/* Interactive planes lift toward the viewer rather than just changing colour */
.lift{ transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease); will-change:transform; }
.lift:hover{ transform:translate3d(0,-4px,0); box-shadow:var(--elev-4), var(--rim); border-color:rgba(255,255,255,.95); }

/* ── Type scale ── */
.kicker{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:10.5px; font-weight:600; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4);
}
.kicker .dot{
  width:7px; height:7px; border-radius:var(--r-pill); flex:0 0 auto;
  background:var(--green); box-shadow:0 0 0 3px rgba(11,95,50,.14);
}

/* Two short declarative lines. A short measure earns a large size: the eye takes
   each line whole, so the type can carry weight without shouting. Optical
   tracking tightens as the size grows, which is why this is a clamp on both. */
.h1{
  font-size:clamp(2.9rem,6.4vw,5.4rem); font-weight:600;
  line-height:.98; letter-spacing:clamp(-.046em,-.04em,-.034em); color:var(--fg-1);
}
/* Balanced wrapping on display headings: no orphan words on the last line. */
.display-2{ font-size:clamp(1.6rem,2.9vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:-.028em; text-wrap:balance; }
.display-3{ font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:600; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.h3{ font-size:clamp(1.2rem,2vw,1.55rem); font-weight:600; line-height:1.22; letter-spacing:-.022em; }
.h4{ font-size:1.08rem; font-weight:600; line-height:1.28; letter-spacing:-.014em; }
.lede{ font-size:15.5px; font-weight:400; line-height:1.62; letter-spacing:-.005em; color:var(--fg-3); max-width:64ch; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ── Buttons: pressable objects, not rectangles ── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; position:relative; isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.btn .arr,.nav-cta .arr,.form-submit .arr{ transition:transform var(--dur-base) var(--ease-out); }
/* Directional glyphs on green surfaces are yellow - same rule as the Figma primary button */
.btn-primary .arr,.nav-cta .arr,.form-submit .arr{ color:var(--yellow); }
/* Hover motion follows the glyph's own direction: → slides right, ↗ lifts
   diagonally (.arr-ne), ↓ drops (.arr-dn). One rule per glyph family. */
.btn:hover .arr,.nav-cta:hover .arr,.form-submit:hover .arr{ transform:translateX(3px); }
.btn:hover .arr-ne{ transform:translate(2px,-2px); }
.btn:hover .arr-dn{ transform:translate(0,3px); }
.btn:active{ transform:translateY(1px) scale(.988); }

.btn-primary{
  background:linear-gradient(180deg,var(--green-lift),var(--green)); color:#fff; border-color:rgba(0,0,0,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(11,95,50,.24), 0 2px 4px rgba(11,95,50,.18);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 28px rgba(11,95,50,.30), 0 3px 6px rgba(11,95,50,.2); }
.btn-quiet{
  background:var(--mat-3); color:var(--fg-1); border-color:rgba(255,255,255,.8);
  -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
  box-shadow:var(--elev-1), var(--rim);
}
.btn-quiet:hover{ transform:translateY(-2px); box-shadow:var(--elev-2), var(--rim); }
.btn-onGreen{
  background:#fff; color:var(--green-deep); border-color:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.btn-onGreen:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.btn-onGreen-quiet{
  background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.42);
  -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
}
.btn-onGreen-quiet:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7); transform:translateY(-2px); }

/* ── Section header: one quiet column - kicker, headline, lede. ── */
.section-head{ margin-bottom:clamp(40px,5vw,68px); }
.section-head .left{ display:flex; flex-direction:column; gap:18px; max-width:780px; }

/* Media placeholders: recessed apertures cut into the canvas */
.media-ph{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  display:flex; align-items:flex-end; padding:18px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.55), rgba(214,222,218,.55)),
    linear-gradient(180deg,#E7EBE9,#DBE1DE);
  box-shadow:inset 0 2px 6px rgba(20,30,25,.10), inset 0 0 0 1px rgba(255,255,255,.5), var(--elev-1);
}
.media-ph::after{ /* specular sweep, reads as a glazed aperture */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%);
}
.media-ph .ph-label{ display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }
.media-ph .ph-kind{ font-size:12px; font-weight:600; color:var(--fg-2); letter-spacing:-.01em; }
.media-ph .ph-ratio{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }

/* ═══════════════════════ NAV / z4 chrome, true glass ═══════════════════════ */
.nav{ position:sticky; top:0; z-index:60; padding:14px 0 0; }
.nav-in{
  max-width:var(--container); margin:0 auto; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding:0 10px 0 22px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--blur-3); backdrop-filter:var(--blur-3);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--elev-3), var(--rim);
  transition:background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.nav-shell{ max-width:calc(var(--container) + 2 * var(--pad)); margin:0 auto; padding:0 var(--pad); }
.nav.scrolled .nav-in{ background:rgba(255,255,255,.78); box-shadow:var(--elev-4), var(--rim); }
.nav-brand{ display:inline-flex; align-items:center; }
.nav-brand .sm-lockup{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  padding:9px 14px; font-size:14px; font-weight:500; color:var(--fg-3);
  border-radius:var(--r-pill); transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-links a:hover{ color:var(--fg-1); background:rgba(255,255,255,.75); }
/* Scroll-spy: the link for the section in view reads as the current location */
.nav-links a.active{ color:var(--green); background:rgba(255,255,255,.85); }
.nav-cta{
  margin-left:10px; display:inline-flex; align-items:center; gap:var(--space-2);
  padding:11px 18px!important; color:#fff!important; font-weight:600!important;
  background:linear-gradient(180deg,var(--green-lift),var(--green));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(11,95,50,.26);
}
.nav-cta:hover{ background:linear-gradient(180deg,var(--green),var(--green-2))!important; }
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--mat-3); border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-1), var(--rim);
  align-items:center; justify-content:center; flex-direction:column; gap:var(--space-1);
}
.nav-toggle i{ display:block; width:17px; height:1.5px; background:var(--fg-1); border-radius:2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
@media (max-width:960px){
  .nav-links{
    position:absolute; top:86px; left:var(--pad); right:var(--pad);
    flex-direction:column; align-items:stretch; gap:var(--space-1); padding:12px;
    border-radius:var(--r-lg); background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:var(--blur-3); backdrop-filter:var(--blur-3);
    border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-4), var(--rim);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:13px 14px; font-size:16px; border-radius:var(--r-md); }
  .nav-cta{ margin-left:0!important; margin-top:6px; justify-content:center; }
  .nav-toggle{ display:inline-flex; }
}

/* ═══════════════════════ HERO ═══════════════════════ */
.hero{ padding:clamp(48px,6vw,88px) 0 var(--sec-pad); }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,4.5vw,72px); align-items:center; }
@media (max-width:1024px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-left{ display:flex; flex-direction:column; gap:28px; }
.trust-mark{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  padding:8px 16px; border-radius:var(--r-pill); font-size:12px; font-weight:500; color:var(--fg-2);
  background:var(--mat-3); border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
  box-shadow:var(--elev-1), var(--rim);
}
.trust-mark .dot{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--green); box-shadow:0 0 0 3px rgba(11,95,50,.15); }
/* Headline is a 19ch category statement, so the hero steps the H1 clamp down one
   optical size: each line still sets whole, unwrapped, inside the 1.08fr column. */
.hero h1{ max-width:19ch; text-wrap:balance; font-size:clamp(2.2rem,3.65vw,3.28rem); }
/* Single-column hero: the column widens, so the clamp re-derives from viewport
   width - sized so "Fullstack Ecommerce" always sets as one unwrapped line. */
@media (max-width:1024px){ .hero h1{ max-width:19ch; font-size:clamp(1.85rem,8vw,3.6rem); } }
/* Second line is the payload. Green, and optically nudged left so the cap-F and
   cap-M align on the same vertical, not on their sidebearings. */
.hero h1 .g{ display:block; color:var(--green); margin-left:-.02em; }
/* Hairline between statement and support: separates the claim from the detail
   without adding another box to the page. */
.hero-sub{
  font-size:17px; line-height:1.58; color:var(--fg-3); max-width:50ch;
  padding-top:22px; border-top:1px solid var(--hairline);
}
.hero-sub b{ color:var(--fg-1); font-weight:600; }

/* Hero form: one floating input plane, inputs recessed into it */
.hero-form{ display:flex; flex-direction:column; gap:14px; }
.form-shell{
  padding:12px; border-radius:var(--r-xl); background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-3), var(--rim);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }
.hero-form input{
  width:100%; padding:15px 18px; font-size:15px; font-weight:500; font-family:inherit;
  color:var(--fg-1); border-radius:var(--r-md); border:1px solid rgba(23,32,28,.12);
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 3px rgba(20,30,25,.06);
  transition:border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.hero-form input::placeholder{ color:var(--fg-4); font-weight:400; }
.hero-form input:hover{ border-color:rgba(23,32,28,.2); }
.hero-form input:focus{ border-color:var(--green); background:#fff; box-shadow:inset 0 1px 2px rgba(20,30,25,.04), 0 0 0 4px rgba(18,123,66,.14); outline:none; }
.form-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); white-space:nowrap;
  padding:15px 24px; border-radius:var(--r-md); font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(180deg,var(--green-lift),var(--green));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(11,95,50,.26);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.form-submit:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 28px rgba(11,95,50,.32); }
.form-submit:active{ transform:translateY(0) scale(.99); }
.form-micro{ display:flex; flex-wrap:wrap; gap:18px; padding:0 6px; }
.form-micro .m{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--fg-4); }
.form-micro .m .d{ width:5px; height:5px; border-radius:var(--r-pill); background:var(--green); }
.form-confirm{
  display:none; align-items:flex-start; gap:var(--space-3); padding:18px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(230,240,234,.95), rgba(255,255,255,.85));
  border:1px solid rgba(11,95,50,.28); box-shadow:var(--elev-2), var(--rim);
}
.form-confirm.show{ display:flex; }
.form-confirm .check{
  width:26px; height:26px; flex:0 0 auto; border-radius:var(--r-pill);
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; box-shadow:0 3px 8px rgba(11,95,50,.3);
}
.form-confirm b{ display:block; color:var(--green-deep); font-weight:600; font-size:14px; }
.form-confirm span{ font-size:13px; color:var(--fg-2); }

/* Proof strip: segmented control on its own plane */
.proof-strip{
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
  border-radius:var(--r-lg); background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.75); box-shadow:var(--elev-2), var(--rim);
}
.proof-strip .p{ padding:18px 20px; display:flex; flex-direction:column; gap:5px; position:relative; }
.proof-strip .p + .p::before{ content:''; position:absolute; left:0; top:16px; bottom:16px; width:1px; background:var(--hairline); }
.proof-strip .p.hi{ background:linear-gradient(180deg, rgba(230,240,234,.85), rgba(230,240,234,.4)); }
.proof-strip .v{ font-size:1.55rem; font-weight:600; letter-spacing:-.032em; color:var(--fg-1); font-variant-numeric:tabular-nums; }
.proof-strip .p:first-child .v,.proof-strip .p.hi .v{ color:var(--green); }
.proof-strip .l{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); }
@media (max-width:600px){
  .proof-strip{ grid-template-columns:1fr 1fr; }
  /* two columns: keep the vertical rule inside each row, add a rule between rows */
  .proof-strip .p:nth-child(3)::before{ display:none; }
  .proof-strip .p:nth-child(3),.proof-strip .p:nth-child(4){ border-top:1px solid var(--hairline); }
}

/* Hero visual: a stack of planes at genuinely different depths */
.hero-visual{ position:relative; perspective:1400px; }
.hero-visual .media-ph{ aspect-ratio:4/5; align-items:flex-start; border-radius:var(--r-xl); }
.visual-chip{
  position:absolute; left:-18px; bottom:56px; max-width:290px; display:flex; gap:var(--space-3);
  padding:16px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:var(--blur-3); backdrop-filter:var(--blur-3);
  border:1px solid rgba(255,255,255,.85); box-shadow:var(--elev-4), var(--rim);
}
.visual-chip .avatar{ width:42px; height:42px; flex:0 0 auto; border-radius:var(--r-md); background:linear-gradient(150deg,#E7EBE9,#CDD5D1); box-shadow:inset 0 1px 2px rgba(255,255,255,.8), var(--elev-1); }
.visual-chip p{ font-size:13px; line-height:1.45; color:var(--fg-1); font-weight:500; }
.visual-chip .attr{ display:block; margin-top:6px; font-size:11px; color:var(--fg-4); }
.visual-chip .attr b{ color:var(--fg-2); font-weight:600; }
.visual-stat{
  position:absolute; right:-18px; top:36px; padding:16px 20px; border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(160deg,var(--green-lift),var(--green) 55%,var(--green-2));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px rgba(11,95,50,.32), 0 4px 10px rgba(11,95,50,.24);
}
.visual-stat .n{ font-size:2rem; font-weight:600; letter-spacing:-.034em; font-variant-numeric:tabular-nums; }
.visual-stat .n .u{ font-size:.9rem; font-weight:500; margin-left:2px; }
.visual-stat .l{ display:block; margin-top:2px; font-size:10.5px; font-weight:600; letter-spacing:.06em; line-height:1.35; color:rgba(255,255,255,.9); }
@media (max-width:1024px){ .visual-chip{ left:8px; } .visual-stat{ right:8px; } }
/* Narrow apertures: the stat chip must clear the caption block at the top-left,
   so it drops below the caption's two lines instead of overlapping it. */
@media (max-width:600px){ .visual-stat{ top:74px; } }

/* ═══════════════════════ PROOF ═══════════════════════ */
.proof-header{ text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; margin-bottom:clamp(32px,4vw,52px); }
.logo-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3); margin-bottom:clamp(32px,4vw,52px); }
.logo-cell{
  height:78px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md);
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
  border:1px solid rgba(255,255,255,.65); box-shadow:var(--elev-1), var(--rim);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.logo-cell:hover{ transform:translateY(-3px); box-shadow:var(--elev-2), var(--rim); }
.logo-cell .lbl{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }
@media (max-width:900px){ .logo-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .logo-row{ grid-template-columns:repeat(2,1fr); } }

.outcome-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .outcome-band{ grid-template-columns:1fr; } }
.outcome-card{ display:flex; flex-direction:column; gap:var(--space-4); padding:26px; }
.outcome-card:hover{ border-color:rgba(11,95,50,.28); }
/* Direction marker centres on the numeral's optical middle, not its baseline. */
.outcome-stat{ display:flex; align-items:center; gap:var(--space-2); }
.outcome-num{ font-size:clamp(2.3rem,3.6vw,2.9rem); font-weight:600; letter-spacing:-.036em; color:var(--green); font-variant-numeric:tabular-nums; }
.outcome-num .unit{ font-size:.55em; font-weight:600; margin-left:1px; }
.outcome-dir{ font-size:14px; color:var(--green); font-weight:700; }
.outcome-label{ font-size:15px; font-weight:600; color:var(--fg-1); }
.outcome-brand{ display:block; margin-top:3px; font-size:12.5px; color:var(--fg-4); }
.outcome-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:600; color:var(--green); padding-top:16px; border-top:1px solid var(--hairline);
}
.outcome-card:hover .arr{ transform:translateX(3px); }
.outcome-card .arr{ transition:transform var(--dur-base) var(--ease-out); }
.proof-cta{ margin-top:clamp(32px,4vw,52px); display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; text-align:center; }
.proof-cta-text{ font-size:1.12rem; font-weight:500; color:var(--fg-2); }
.proof-cta-link{ display:inline-flex; align-items:center; gap:var(--space-2); font-weight:600; color:var(--green); }

/* ═══════════════════════ THESIS ═══════════════════════ */
.thesis-pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:880px){ .thesis-pair{ grid-template-columns:1fr; } }
.pair-col{ display:flex; flex-direction:column; gap:var(--space-3); }
.pair-head{ display:flex; flex-direction:column; gap:var(--space-3); padding:26px; border-radius:var(--r-lg); border:1px solid transparent; }
.pair-col.problem .pair-head{
  background:linear-gradient(180deg, rgba(178,47,29,.09), rgba(255,255,255,.6));
  border-color:rgba(178,47,29,.22); box-shadow:var(--elev-1), var(--rim);
  -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
}
.pair-col.solution .pair-head{
  background:linear-gradient(180deg, rgba(11,95,50,.1), rgba(255,255,255,.6));
  border-color:rgba(11,95,50,.24); box-shadow:var(--elev-1), var(--rim);
  -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
}
.pill{
  align-self:flex-start; display:inline-flex; align-items:center; gap:var(--space-2); padding:7px 14px;
  border-radius:var(--r-pill); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.9); box-shadow:var(--elev-1);
}
.pill::before{ content:''; width:6px; height:6px; border-radius:var(--r-pill); background:currentColor; }
.pair-col.problem .pill{ color:var(--red); border:1px solid rgba(178,47,29,.3); }
.pair-col.solution .pill{ color:var(--green); border:1px solid rgba(11,95,50,.3); }
.pair-h{ font-size:1.3rem; font-weight:600; letter-spacing:-.024em; color:var(--fg-1); }
.pair-cell{ display:grid; grid-template-columns:36px 1fr; gap:var(--space-4); padding:22px 24px; border-radius:var(--r-lg); }
.pair-icon{ width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex:0 0 auto; }
.pair-col.problem .pair-icon{ color:var(--red); background:var(--red-tint); border:1px solid rgba(178,47,29,.28); }
.pair-col.solution .pair-icon{ color:var(--green); background:var(--mat-tint); border:1px solid rgba(11,95,50,.28); }
.pair-meta{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }
.pair-headline{ margin-top:5px; font-size:15.5px; font-weight:600; color:var(--fg-1); letter-spacing:-.012em; }
.pair-detail{ margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--fg-3); }

/* ═══════════════════════ ENGINE ═══════════════════════ */
.pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:1100px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }
/* No accent rule and no light-pool at the card top: the tile's own rim light and
   shadow already state its plane, so a second top-edge treatment read as debris. */
.pillar{ display:flex; flex-direction:column; gap:18px; padding:28px 24px; position:relative; overflow:hidden; }

/* One icon treatment for all five. Identical glass chip, identical optical weight,
   so the row scans as a set of peers rather than a ramp of importance. */
.pillar-icon{
  width:54px; height:54px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  color:var(--green); position:relative; z-index:1; flex:0 0 auto;
  /* Specular highlight layered into the background at the same angle as every
     other glass surface on the page, rather than as an overlay that would sit
     on top of the glyph. */
  background:
    linear-gradient(150deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,245,242,.62));
  -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,95,50,.06),
    0 2px 5px rgba(20,30,25,.05),
    0 6px 16px rgba(20,30,25,.05);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pillar:hover .pillar-icon{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,95,50,.08),
    0 4px 10px rgba(20,30,25,.06),
    0 12px 26px rgba(11,95,50,.10);
}
.pillar-num{ font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--fg-4); font-variant-numeric:tabular-nums; }
.pillar h3{ margin-top:5px; }
.pillar p{ font-size:13.5px; line-height:1.56; color:var(--fg-3); }
.pillar > div{ position:relative; z-index:1; }
.pillar-tools{ margin-top:auto; padding-top:18px; border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
.tool-chip{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--elev-1); font-size:11px; font-weight:500; color:var(--fg-3);
}

/* ═══════════════════════ MID-CTA ═══════════════════════ */
/* Green rhythm band 1 of 2: after four luminous sections the page needs a deep
   plane. Same material language as the closing CTA, so the two greens rhyme. */
.midcta{ padding:var(--sec-pad) 0; }
.midcta-in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  padding:clamp(30px,4vw,52px); border-radius:var(--r-xl); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(155deg,#0E6E3B 0%, var(--green) 45%, var(--green-deep) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 24px 56px rgba(6,46,27,.24), 0 6px 16px rgba(6,46,27,.18);
}
.midcta-in::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 300px at 85% -20%, rgba(255,255,255,.16), transparent 60%); }
.midcta-text{ max-width:660px; display:flex; flex-direction:column; gap:var(--space-3); position:relative; }
.midcta .meta{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.midcta .display-3{ color:#fff; }
.midcta .display-3 em{ color:var(--yellow); }
.midcta p{ font-size:14px; color:rgba(255,255,255,.85); line-height:1.56; }
.midcta .btn{ position:relative; }

/* ═══════════════════════ WORK ═══════════════════════ */
.work-spread{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(24px,3vw,36px); margin-bottom:20px; border-radius:var(--r-xl);
  background:rgba(255,255,255,.66); -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.75); box-shadow:var(--elev-2), var(--rim);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.work-spread:hover{ transform:translateY(-3px); box-shadow:var(--elev-3), var(--rim); }
/* Flip swaps the columns too, not just the order - otherwise the image lands in
   the wide 1.15fr track and renders ~35% larger than its unflipped siblings. */
.work-spread.flip{ grid-template-columns:1.15fr .85fr; }
.work-spread.flip .work-img{ order:2; }
@media (max-width:900px){
  .work-spread,.work-spread.flip{ grid-template-columns:1fr; }
  .work-spread.flip .work-img{ order:0; }
}
.work-img{ position:relative; }
.work-img .media-ph{ aspect-ratio:4/5; }
.result-tag{
  position:absolute; right:-14px; bottom:22px; display:flex; flex-direction:column; gap:2px;
  padding:14px 18px; border-radius:var(--r-md); color:#fff;
  background:linear-gradient(160deg,var(--green-lift),var(--green) 60%,var(--green-2));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 16px 34px rgba(11,95,50,.3);
}
.result-tag .v{ font-size:1.4rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.result-tag .l{ font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.work-text{ display:flex; flex-direction:column; gap:var(--space-4); }
/* Meta items never break mid-phrase: whole items wrap to the next line instead. */
.work-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }
.work-meta b,.work-meta > span{ white-space:nowrap; }
.work-meta b{ color:var(--green); font-weight:600; }
.work-meta .sep{ color:var(--hairline-2); }
.work-text p{ font-size:14.5px; line-height:1.65; color:var(--fg-3); max-width:60ch; }
.meta-row{ display:grid; grid-template-columns:repeat(3,auto); gap:var(--space-3); justify-content:start; margin-top:4px; }
.meta-row > div{
  display:flex; flex-direction:column; gap:3px; padding:12px 18px; border-radius:var(--r-md);
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.75); box-shadow:var(--elev-1), var(--rim);
}
.meta-row .l{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); }
.meta-row .v{ font-size:15px; font-weight:600; color:var(--fg-1); letter-spacing:-.015em; }
@media (max-width:560px){
  .meta-row{ grid-template-columns:1fr 1fr; }
  /* On narrow screens the tag shares the aperture's bottom band with the caption
     and collides with it - move it to the top-right, mirroring the hero stat chip. */
  .result-tag{ right:12px; bottom:auto; top:14px; }
}

.creative-strip{
  margin-top:28px; padding:22px; border-radius:var(--r-xl); overflow:hidden;
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.75); box-shadow:var(--elev-2), var(--rim);
}
.creative-strip-head{ display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:18px; font-size:11.5px; font-weight:500; color:var(--fg-4); letter-spacing:.02em; }
.creative-strip-head b{ color:var(--fg-1); font-weight:600; }
.creative-marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.creative-track{ display:flex; gap:var(--space-3); width:max-content; animation:slide 46s linear infinite; }
.creative-tile{ width:132px; height:166px; flex:0 0 auto; border-radius:var(--r-md); }
.marquee-toggle{
  font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--fg-2);
  padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.9); box-shadow:var(--elev-1);
}
.marquee-toggle:hover{ color:var(--fg-1); }
.creative-track.paused{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .creative-track{ animation:none; } }

.work-foot{
  margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap;
  padding:24px 28px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.7); box-shadow:var(--elev-1), var(--rim);
  -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
}
.work-foot p{ font-size:14px; color:var(--fg-3); }
.work-foot b{ color:var(--fg-1); font-weight:600; }

/* ═══════════════════════ TESTIMONIALS ═══════════════════════ */
.testi-head{ margin-bottom:clamp(32px,4vw,52px); }
.testi-head .left{ display:flex; flex-direction:column; gap:var(--space-4); }

.testi-featured{
  display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(24px,3.5vw,44px); align-items:center;
  padding:clamp(24px,3vw,36px); border-radius:var(--r-xl); margin-bottom:20px;
  background:rgba(255,255,255,.7); -webkit-backdrop-filter:var(--blur-3); backdrop-filter:var(--blur-3);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-3), var(--rim);
}
@media (max-width:880px){ .testi-featured{ grid-template-columns:1fr; } }
.testi-featured .media-ph{ aspect-ratio:3/4; }
.featured-body{ display:flex; flex-direction:column; gap:20px; }
.featured-tag{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.featured-quote{ font-size:clamp(1.2rem,2.2vw,1.7rem); font-weight:500; line-height:1.36; letter-spacing:-.024em; color:var(--fg-1); }
.featured-meta{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--hairline); }
.attr-name{ display:block; font-size:14.5px; font-weight:600; color:var(--fg-1); }
.attr-role{ display:block; font-size:12.5px; color:var(--fg-4); margin-top:2px; }
.featured-stat{ display:flex; flex-direction:column; gap:2px; text-align:right; }
.featured-stat .n{ font-size:1.8rem; font-weight:600; letter-spacing:-.034em; color:var(--green); font-variant-numeric:tabular-nums; }
.featured-stat .n .u{ font-size:.5em; }
.featured-stat .l{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-4); line-height:1.45; }

.testi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .testi-row{ grid-template-columns:1fr; } }
.testi-card{ display:flex; flex-direction:column; gap:20px; padding:26px; }
.testi-card blockquote{ font-size:14.5px; line-height:1.6; color:var(--fg-2); font-weight:500; }
.card-attr{ margin-top:auto; display:flex; align-items:center; gap:var(--space-3); padding-top:18px; border-top:1px solid var(--hairline); }
.card-avatar{ width:38px; height:38px; border-radius:var(--r-pill); flex:0 0 auto; background:linear-gradient(150deg,#E7EBE9,#CDD5D1); box-shadow:inset 0 1px 2px rgba(255,255,255,.8), var(--elev-1); }
.card-name{ display:block; font-size:13.5px; font-weight:600; color:var(--fg-1); }
.card-org{ display:block; font-size:12px; color:var(--fg-4); }
.testi-foot{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.testi-foot .l{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }

/* ═══════════════════════ PRINCIPLES ═══════════════════════ */
/* Green rhythm band 2 of 2: the operating-philosophy panel - three sections
   after the first green band, three before the closing green CTA. */
.principles-lead{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,3.5vw,48px); align-items:center;
  padding:clamp(24px,3vw,36px); border-radius:var(--r-xl); margin-bottom:22px;
  color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(155deg,#0E6E3B 0%, var(--green) 45%, var(--green-deep) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 24px 56px rgba(6,46,27,.24), 0 6px 16px rgba(6,46,27,.18);
}
.principles-lead::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 300px at 85% -20%, rgba(255,255,255,.14), transparent 60%); }
@media (max-width:880px){ .principles-lead{ grid-template-columns:1fr; } }
.principles-lead .media-ph{ aspect-ratio:3/2; }
.lead-text{ display:flex; flex-direction:column; gap:14px; position:relative; }
.lead-text .meta{ font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.lead-text .meta b{ color:#fff; font-weight:600; }
.lead-text .display-3{ color:#fff; }
.lead-text .display-3 em{ color:var(--yellow); }
.lead-text p{ font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.85); max-width:58ch; }

.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .principles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .principles{ grid-template-columns:1fr; } }
.principle{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px; align-items:start; }
/* Same glass chip as the pillar icons, so numbered markers read as one family
   across the page. Uniform weight: no ramp, no card is louder than its neighbour. */
.principle .pn{
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--green);
  width:40px; height:40px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  position:relative; flex:0 0 auto;
  /* Specular is layered into the background, not an overlay pseudo, so it can
     never sit on top of the numeral and eat its contrast. */
  background:
    linear-gradient(150deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,245,242,.62));
  -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,95,50,.06),
    0 2px 5px rgba(20,30,25,.05),
    0 6px 16px rgba(20,30,25,.05);
}
.principle p{ margin-top:8px; font-size:13.5px; line-height:1.58; color:var(--fg-3); }

/* ═══════════════════════ FIT ═══════════════════════ */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:880px){ .fit{ grid-template-columns:1fr; } }
.fit-col{ padding:clamp(22px,3vw,32px); border-radius:var(--r-xl); border:1px solid rgba(255,255,255,.75); box-shadow:var(--elev-2), var(--rim); -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2); }
.fit-col.yes{ background:linear-gradient(180deg, rgba(11,95,50,.10), rgba(255,255,255,.7) 46%); }
.fit-col.no{ background:linear-gradient(180deg, rgba(23,32,28,.07), rgba(255,255,255,.7) 46%); }
.fit-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid var(--hairline); }
.fit-head h3{ font-size:1.15rem; font-weight:600; letter-spacing:-.02em; color:var(--fg-1); }
.fit-stamp{ font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.9); box-shadow:var(--elev-1); white-space:nowrap; flex:0 0 auto; }
.fit-col.yes .fit-stamp{ color:var(--green); border:1px solid rgba(11,95,50,.28); }
.fit-col.no .fit-stamp{ color:var(--fg-3); border:1px solid var(--hairline-2); }
.fit-col li{ display:grid; grid-template-columns:26px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--hairline); }
.fit-col li:last-child{ border-bottom:0; padding-bottom:0; }
.fit-col .mk{ width:24px; height:24px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; box-shadow:var(--elev-1); }
.fit-col.yes .mk{ color:#fff; background:linear-gradient(180deg,var(--green-lift),var(--green)); }
.fit-col.no .mk{ color:var(--fg-3); background:rgba(255,255,255,.92); border:1px solid var(--hairline-2); }
.fit-col .lbl{ font-size:14.5px; font-weight:600; color:var(--fg-1); letter-spacing:-.012em; }
.fit-col .lbl small{ display:block; margin-top:5px; font-size:13px; font-weight:400; line-height:1.55; color:var(--fg-3); }

/* ═══════════════════════ FAQ ═══════════════════════ */
.faq-grid{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(20px,3vw,36px); align-items:start; }
@media (max-width:980px){ .faq-grid{ grid-template-columns:1fr; } }
.faq-aside{ display:flex; flex-direction:column; gap:var(--space-4); position:sticky; top:104px; }
@media (max-width:980px){ .faq-aside{ position:static; } }
.aside-card{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:26px; border-radius:var(--r-xl);
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:var(--blur-2); backdrop-filter:var(--blur-2);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-2), var(--rim); }
.aside-card h3{ font-size:1.05rem; font-weight:600; letter-spacing:-.018em; color:var(--fg-1); }
.aside-card p{ font-size:13.5px; line-height:1.58; color:var(--fg-3); }
.aside-card .stamp{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); }

.faq-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.faq-item{
  border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:var(--blur-1); backdrop-filter:var(--blur-1);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--elev-1), var(--rim);
  transition:box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out);
}
.faq-item:hover{ transform:translateY(-2px); box-shadow:var(--elev-2), var(--rim); }
.faq-item.open{ background:rgba(255,255,255,.86); box-shadow:var(--elev-3), var(--rim); }
.faq-q{ width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; padding:20px 24px; text-align:left; }
.faq-q .n{ font-size:10.5px; font-weight:600; letter-spacing:.12em; color:var(--green); font-variant-numeric:tabular-nums; }
.faq-q > span:nth-child(2){ font-size:15px; font-weight:600; color:var(--fg-1); letter-spacing:-.015em; }
.faq-q .pm{ position:relative; width:22px; height:22px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); box-shadow:var(--elev-1); flex:0 0 auto; }
.faq-q .pm::before,.faq-q .pm::after{ content:''; position:absolute; left:50%; top:50%; background:var(--green); border-radius:2px; transform:translate(-50%,-50%); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.faq-q .pm::before{ width:10px; height:1.6px; }
.faq-q .pm::after{ width:1.6px; height:10px; }
.faq-item.open .faq-q .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease-out); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a-inner > div{ padding:0 24px 22px 62px; font-size:14px; line-height:1.68; color:var(--fg-3); }
.faq-a-inner b{ color:var(--fg-1); font-weight:600; }
.faq-a-inner ul{ margin:10px 0 10px 0; display:flex; flex-direction:column; gap:6px; }
.faq-a-inner li{ padding-left:16px; position:relative; }
.faq-a-inner li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:var(--r-pill); background:var(--green); }
@media (max-width:560px){ .faq-a-inner > div{ padding-left:24px; } .faq-q{ grid-template-columns:1fr auto; } .faq-q .n{ display:none; } }

/* ═══════════════════════ CTA / the deep plane ═══════════════════════ */
.cta{ padding:var(--sec-pad) 0; }
.cta-shell{
  position:relative; overflow:hidden; border-radius:clamp(24px,3vw,40px); color:#fff;
  padding:clamp(36px,5vw,72px);
  background:linear-gradient(155deg,#0E6E3B 0%, var(--green) 40%, var(--green-deep) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 70px rgba(6,46,27,.28), 0 8px 20px rgba(6,46,27,.2);
}
.cta-shell::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 340px at 82% -10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 400px at 8% 110%, rgba(255,255,255,.09), transparent 60%); }
.cta-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
@media (max-width:880px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-grid h2{ margin-top:16px; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:600; line-height:1.04; letter-spacing:-.036em; text-wrap:balance; }
.cta-grid h2 em{ color:var(--yellow); }
.cta .kicker{ color:rgba(255,255,255,.72); }
.cta .kicker .dot{ background:var(--yellow); box-shadow:0 0 0 3px rgba(255,222,33,.2); }
.cta .lede{ color:rgba(255,255,255,.85); }
.cta-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:24px; }
.cta-bullets{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-top:clamp(32px,4vw,48px); }
@media (max-width:880px){ .cta-bullets{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cta-bullets{ grid-template-columns:1fr; } }
.cta-bullets > div{
  padding:16px 18px; border-radius:var(--r-md); font-size:12.5px; font-weight:500; color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* ═══════════════════════ FOOTER ═══════════════════════ */
footer{ padding:var(--sec-pad) 0 40px; border-top:1px solid var(--hairline); }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); padding-bottom:40px; }
@media (max-width:880px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }
.foot-brand .foot-lockup{ height:40px; width:auto; margin-bottom:4px; }
.foot-brand p{ margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--fg-3); max-width:38ch; }
.foot-col h3{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4); margin-bottom:16px; }
.foot-col li{ margin-bottom:10px; }
.foot-col a{ font-size:14px; color:var(--fg-2); transition:color var(--dur-fast) var(--ease); }
.foot-col a:hover{ color:var(--green); }
.foot-bot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--hairline); font-size:12.5px; color:var(--fg-4); }
.foot-bot a:hover{ color:var(--green); }

/* ═══════════════════════ REVEAL / depth-aware entrance ═══════════════════════ */
.reveal{ opacity:0; transform:translate3d(0,22px,0) scale(.985); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* Graceful degradation where backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .plane,.nav-in,.form-shell,.work-spread,.testi-featured,
  .aside-card,.faq-item,.creative-strip,.fit-col,.proof-strip,.visual-chip{ background:rgba(255,255,255,.96); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   08 · WORDPRESS
   ---------------------------------------------------------------------------
   Everything above this line is the untouched design system. The rules below
   are the additions WordPress needs: admin bar offset, real images inside the
   apertures, variable item counts, editable emphasis colour, form states,
   rich-text content, listings, pagination, single case studies and posts.
   Each reuses the tokens and primitives above; nothing introduces a new
   colour, radius, shadow or type size.
   Source: tools/wp-additions.css (appended by tools/extract-assets.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Core aliases ── */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.sm-editor-note{ display:none; }

/* ── Admin bar: the sticky nav and anchor targets sit below it ── */
.admin-bar .nav{ top:32px; }
.admin-bar main [id]{ scroll-margin-top:32px; }
@media (max-width:782px){ .admin-bar .nav{ top:46px; } .admin-bar main [id]{ scroll-margin-top:46px; } }
@media (max-width:600px){ .admin-bar .nav{ position:relative; top:0; } }

/* ── Variable item counts. The design assumes 4 metrics, 6 logos, 5 pillars,
      3 testimonial cards, 4 bullets and 3 footer columns; the blocks set a
      custom property only when the count differs. Scoped to the desktop
      range so the design's own breakpoints keep control below it. ── */
@media (min-width:601px){ .proof-strip{ grid-template-columns:repeat(var(--proof-cols,4),1fr); } }
@media (max-width:600px){
  .proof-strip .p:nth-child(odd)::before{ display:none; }
  .proof-strip .p:nth-child(n+3){ border-top:1px solid var(--hairline); }
}
@media (min-width:901px){ .logo-row{ grid-template-columns:repeat(var(--logo-cols,6),1fr); } }
@media (min-width:1101px){ .pillars{ grid-template-columns:repeat(var(--pillar-cols,5),1fr); } }
@media (min-width:901px){ .testi-row{ grid-template-columns:repeat(var(--testi-cols,3),1fr); } }
@media (min-width:881px){ .cta-bullets{ grid-template-columns:repeat(var(--cta-cols,4),1fr); } }
@media (min-width:881px){ .foot-top{ grid-template-columns:1.6fr repeat(var(--foot-cols,3),1fr); } }
.foot-top[style*="--foot-cols:0"]{ grid-template-columns:1fr; }

/* ── Hero variants ── */
.hero-grid--single{ grid-template-columns:1fr; }
.hero-grid--single .hero-left{ max-width:780px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ── Emphasis colour is chosen per heading in the editor (green is the default) ── */
.em-red em{ color:var(--red); }
.em-ink em{ color:var(--fg-1); }
.pair-col.problem .pair-h em{ color:var(--red); }

/* ── Real images inside the media apertures ── */
.media-ph.has-img{ padding:0; }
.media-ph.has-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-ph.has-img::after{ background:linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%); }
.ratio-4x5{ aspect-ratio:4/5; } .ratio-3x4{ aspect-ratio:3/4; } .ratio-3x2{ aspect-ratio:3/2; } .ratio-16x9{ aspect-ratio:16/9; }
.logo-cell.has-img{ padding:0 16px; }
.logo-cell.has-img img{ max-height:36px; max-width:78%; width:auto; height:auto; object-fit:contain; }
a.logo-cell{ text-decoration:none; }
.card-avatar.has-img,.avatar.has-img{ overflow:hidden; }
.card-avatar.has-img img,.avatar.has-img img{ width:100%; height:100%; object-fit:cover; }

/* ── Whole-card links (stretched over the card, focus ring on the card) ── */
.work-spread{ position:relative; }
.work-link,.post-card-link,.pillar-link{ color:inherit; }
.work-link::after,.post-card-link::after,.pillar-link::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.work-link:focus-visible,.post-card-link:focus-visible,.pillar-link:focus-visible{ box-shadow:none; }
.work-spread:has(.work-link:focus-visible),.post-card:has(.post-card-link:focus-visible),.pillar:has(.pillar-link:focus-visible){ box-shadow:var(--focus-ring), var(--elev-3), var(--rim); }

/* ── Form states (validation, sending, sent) ── */
.form-error{ display:block; padding:0 6px; font-size:12.5px; font-weight:500; color:var(--red); }
.form-error[hidden]{ display:none; }
.hero-form input[aria-invalid="true"]{ border-color:var(--red); box-shadow:inset 0 1px 2px rgba(20,30,25,.04), 0 0 0 4px var(--red-tint); }
.form-submit[disabled]{ opacity:.72; cursor:progress; transform:none; }
.hero-form.is-sent .form-shell,.hero-form.is-sent .form-micro,.hero-form.is-sent .form-error{ display:none; }
.form-row--search{ grid-template-columns:1fr auto; }
.sm-search-bar{ max-width:560px; margin-bottom:clamp(24px,3vw,36px); }

/* ── FAQ answers written with paragraph / list blocks ── */
.faq-a-inner p{ margin:0; }
.faq-a-inner p + p,.faq-a-inner ul + p,.faq-a-inner p + ul{ margin-top:10px; }
.faq-a-inner strong{ color:var(--fg-1); font-weight:600; }
.faq-a-inner ul{ list-style:none; padding:0; }
.faq-grid--single{ grid-template-columns:1fr; }

/* ── Reading column and rich text: Text section block, posts, case-study story ── */
.wrap--narrow{ max-width:calc(820px + 2 * var(--pad)); }
.prose-body{ font-size:15.5px; line-height:1.7; color:var(--fg-2); }
.prose-body > * + *{ margin-top:16px; }
.prose-body h2{ font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:600; line-height:1.2; letter-spacing:-.02em; color:var(--fg-1); text-wrap:balance; }
.prose-body h3{ font-size:1.08rem; font-weight:600; line-height:1.28; letter-spacing:-.014em; color:var(--fg-1); }
.prose-body h4,.prose-body h5,.prose-body h6{ font-size:1rem; font-weight:600; color:var(--fg-1); }
.prose-body > * + h2{ margin-top:36px; }
.prose-body > * + h3{ margin-top:28px; }
.prose-body a{ color:var(--green); font-weight:500; text-decoration:underline; text-decoration-color:rgba(11,95,50,.35); text-underline-offset:3px; transition:text-decoration-color var(--dur-fast) var(--ease); }
.prose-body a:hover{ text-decoration-color:var(--green); }
.prose-body strong,.prose-body b{ color:var(--fg-1); font-weight:600; }
.prose-body ul,.prose-body ol{ display:flex; flex-direction:column; gap:8px; padding:0; }
.prose-body ul li{ padding-left:16px; position:relative; }
.prose-body ul li::before{ content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:var(--r-pill); background:var(--green); }
.prose-body ol{ list-style:decimal inside; }
.prose-body ol li::marker{ color:var(--green); font-weight:600; }
.prose-body blockquote{ padding:22px 26px; border-radius:var(--r-lg); background:var(--mat-2); border:1px solid rgba(255,255,255,.7); box-shadow:var(--elev-1), var(--rim); font-size:1.05rem; font-weight:500; line-height:1.5; color:var(--fg-1); }
.prose-body blockquote p{ margin:0; }
.prose-body blockquote cite{ display:block; margin-top:10px; font-size:12.5px; font-style:normal; color:var(--fg-4); }
.prose-body figure{ margin:0; }
.prose-body img{ height:auto; border-radius:var(--r-lg); box-shadow:var(--elev-2); }
.prose-body figcaption{ margin-top:8px; font-size:12.5px; color:var(--fg-4); }
.prose-body hr{ border:0; border-top:1px solid var(--hairline); margin:32px 0; }
.prose-body table{ width:100%; border-collapse:collapse; font-size:14px; }
.prose-body th,.prose-body td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--hairline); vertical-align:top; }
.prose-body th{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); }
.prose-body iframe,.prose-body video{ max-width:100%; }
.prose-body .wp-block-embed__wrapper{ border-radius:var(--r-lg); overflow:hidden; }
.alignleft{ float:left; margin:4px 24px 16px 0; } .alignright{ float:right; margin:4px 0 16px 24px; } .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.alignwide,.alignfull{ max-width:100%; }

/* ── Page / archive heads for templates without a Hero block ── */
.page-head{ padding-top:clamp(40px,5vw,72px); padding-bottom:0; }
.page-head .section-head{ margin-bottom:0; }
.page-head + .section,.page-head + .wrap{ padding-top:clamp(28px,3vw,44px); }
.post-hero{ margin-bottom:0; }

/* ── Post cards (journal, archives, search) ── */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{ display:flex; flex-direction:column; overflow:hidden; }
.post-card-media{ display:block; }
.post-card-media .media-ph{ border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:none; }
.post-card-body{ display:flex; flex-direction:column; gap:12px; padding:24px 26px 26px; }
.post-card-body p{ font-size:14px; line-height:1.6; color:var(--fg-3); }
.sm-empty{ max-width:520px; }

/* ── Single case study ── */
.case-story{ display:grid; grid-template-columns:repeat(var(--case-cols,3),1fr); gap:18px; margin-top:28px; }
@media (max-width:980px){ .case-story{ grid-template-columns:1fr; } }
.case-card{ display:flex; flex-direction:column; gap:14px; padding:26px; }
.case-card .prose-body{ font-size:14.5px; }
.case-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .case-gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .case-gallery{ grid-template-columns:1fr; } }
.testi-featured--solo{ grid-template-columns:1fr; }
.post-nav{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; margin-top:36px; }
.sm-case > .wrap > .post-nav{ margin:0 0 var(--sec-pad); }

/* ── Pagination ── */
.sm-pagination{ margin-top:36px; display:flex; justify-content:center; }
.sm-pagination ul{ display:flex; flex-wrap:wrap; gap:6px; }
.sm-pagination a,.sm-pagination span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 14px;
  border-radius:var(--r-pill); font-size:13.5px; font-weight:600; color:var(--fg-2);
  background:var(--mat-3); border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-1), var(--rim);
  transition:color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.sm-pagination a:hover{ color:var(--green); transform:translateY(-1px); }
.sm-pagination .current{ color:#fff; background:linear-gradient(180deg,var(--green-lift),var(--green)); border-color:rgba(0,0,0,.06); }
.sm-pagination .dots{ background:transparent; border:0; box-shadow:none; }

/* ── 404 ── */
.sm-404 .section-head{ margin-bottom:28px; }
.sm-404 .sm-search-bar{ margin-bottom:24px; }

/* ── Footer social links (only when set in Site Settings → Social) ── */
.foot-social{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:14px; }
.foot-social a{ font-size:13px; font-weight:500; color:var(--fg-3); transition:color var(--dur-fast) var(--ease); }
.foot-social a:hover{ color:var(--green); }

/* ── Comments (posts only) ── */
.sm-comments .comment-list{ display:flex; flex-direction:column; gap:14px; margin:24px 0 32px; }
.sm-comments .comment-list .children{ margin:14px 0 0 24px; display:flex; flex-direction:column; gap:14px; }
.sm-comments .comment-body{ padding:20px 24px; border-radius:var(--r-lg); background:var(--mat-2); border:1px solid rgba(255,255,255,.7); box-shadow:var(--elev-1), var(--rim); font-size:14px; }
.sm-comments .comment-author .avatar{ width:38px; height:38px; border-radius:var(--r-pill); display:inline-block; vertical-align:middle; margin-right:10px; }
.sm-comments .comment-metadata{ font-size:12px; color:var(--fg-4); margin:4px 0 10px; }
.sm-comments .comment-reply-link{ font-size:12.5px; font-weight:600; color:var(--green); }
.sm-comments .comment-form label{ display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); margin-bottom:6px; }
.sm-comments .comment-form input:not([type=submit]):not([type=checkbox]),.sm-comments .comment-form textarea{
  width:100%; padding:14px 18px; font:inherit; font-size:15px; color:var(--fg-1); border-radius:var(--r-md);
  border:1px solid rgba(23,32,28,.12); background:rgba(255,255,255,.9); box-shadow:inset 0 1px 3px rgba(20,30,25,.06);
}
.sm-comments .comment-form p{ margin-bottom:14px; }