/* ===========================================================================
   SCALE MINDS / SPATIAL DESIGN SYSTEM v3.2.2  ·  03-07 · COMPONENTS
   ---------------------------------------------------------------------------
   Sections 03-07 are the original stylesheet, unchanged apart from the footer
   selector (`footer` -> `.site-footer`, so blog/comment markup can never
   inherit it). Section 08 holds everything WordPress needs on top: real
   images inside apertures, inner-page components, blog, case-study pages,
   forms and core-block content. Loaded on the front end AND in the editor.

   TABLE OF CONTENTS
   03 · LAYOUT ............ wrap · section · tonal wash
   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
   08 · WORDPRESS ......... media images · item-count variants · page intro
                            text section · team · lead-form section · forms
                            blog · single post · case study · 404 · search
                            comments · pagination · core-block prose
   =========================================================================== */

.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 ======================= */
.site-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; } }
/* No JavaScript: never leave content invisible. (html.js is set in <head>.) */
html:not(.js) .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 ADDITIONS
   Everything below is new. It reuses the tokens above and never overrides
   an original rule for the original markup - it only adds modifiers and new
   components built from the same primitives.
   =========================================================================== */

/* -- 08.1 Real images inside apertures ------------------------------------
   An uploaded image fills the aperture; the recessed rim is redrawn on top so
   photos still read as sitting *in* the glass, and the specular sweep is
   softened so it glazes rather than washes out the photo. */
.media-ph.has-img{ padding:0; }
.media-ph.has-img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.media-ph.has-img::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 2px 6px rgba(20,30,25,.10), inset 0 0 0 1px rgba(255,255,255,.5);
}
.media-ph.has-img::after{ z-index:1; opacity:.35; }
.media-ph.ratio-16x9{ aspect-ratio:16/9; }
.media-ph.ratio-3x2{ aspect-ratio:3/2; }
.media-ph.ratio-4x5{ aspect-ratio:4/5; }
.media-ph.ratio-1x1{ aspect-ratio:1/1; }

.visual-chip .avatar,.card-avatar{ overflow:hidden; }
.visual-chip .avatar img,.card-avatar img{ width:100%; height:100%; object-fit:cover; }
.logo-cell img{ max-width:72%; max-height:38px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.logo-cell:hover img{ filter:none; opacity:1; }
a.logo-cell{ color:inherit; }

/* -- 08.2 Item-count variants (the client can add/remove items) ------------ */
.proof-strip[data-count="3"]{ grid-template-columns:repeat(3,1fr); }
.proof-strip[data-count="2"]{ grid-template-columns:repeat(2,1fr); }
.proof-strip[data-count="1"]{ grid-template-columns:1fr; }
@media (max-width:600px){
  .proof-strip[data-count="3"]{ grid-template-columns:1fr 1fr; }
  .proof-strip[data-count="3"] .p:nth-child(3){ grid-column:1 / -1; }
}
@media (min-width:1101px){
  .pillars[data-count="1"]{ grid-template-columns:1fr; }
  .pillars[data-count="2"]{ grid-template-columns:repeat(2,1fr); }
  .pillars[data-count="3"],.pillars[data-count="6"],.pillars[data-count="9"]{ grid-template-columns:repeat(3,1fr); }
  .pillars[data-count="4"],.pillars[data-count="7"],.pillars[data-count="8"]{ grid-template-columns:repeat(4,1fr); }
}
.pillar-link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--green); }
.pillar-link .arr{ transition:transform var(--dur-base) var(--ease-out); }
.pillar-link:hover .arr{ transform:translateX(3px); }
.testi-row[data-count="1"]{ grid-template-columns:1fr; }
.testi-row[data-count="2"]{ grid-template-columns:repeat(2,1fr); }
.testi-row[data-count="4"]{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .testi-row[data-count]{ grid-template-columns:1fr; } }
.logo-row[data-count="4"]{ grid-template-columns:repeat(4,1fr); }
.logo-row[data-count="5"]{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .logo-row[data-count="4"],.logo-row[data-count="5"]{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .logo-row[data-count="4"],.logo-row[data-count="5"]{ grid-template-columns:repeat(2,1fr); } }
.hero-grid.is-solo{ grid-template-columns:1fr; }
.hero-grid.is-solo .hero-left{ max-width:760px; }
.hero-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.fit.is-solo{ grid-template-columns:1fr; max-width:760px; }
.faq-grid.is-solo{ grid-template-columns:1fr; }
.faq-grid.is-solo .faq-list{ max-width:900px; }
.faq-a-inner p + p,.faq-a-inner p + ul,.faq-a-inner ul + p{ margin-top:10px; }
.faq-a-inner ul + p{ margin-top:0; }
.faq-a-inner a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Case study cards link to their page: the headline link stretches over the
   whole card, so the card reads as one target without changing its look. */
.work-spread.is-linked{ position:relative; }
.work-link{ color:inherit; }
.work-link::after{ content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; }
.work-link:focus-visible{ box-shadow:none; }
.work-link:focus-visible::after{ box-shadow:var(--focus-ring); }
.industry-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3vw,36px); }
.industry-filter a{ display:inline-flex; padding:8px 16px; border-radius:var(--r-pill); font-size:12.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); }
.industry-filter a:hover{ color:var(--green); }
.industry-filter a[aria-current="page"]{ color:#fff; background:linear-gradient(180deg,var(--green-lift),var(--green)); border-color:rgba(0,0,0,.06); }

/* -- 08.3 Page intro (inner-page header; same optics as the hero H1) ------- */
.page-intro{ padding:clamp(48px,6vw,88px) 0 var(--sec-pad); }
.page-intro-in{ display:flex; flex-direction:column; gap:28px; max-width:880px; }
.page-intro.is-center .page-intro-in{ align-items:center; text-align:center; margin:0 auto; }
.page-intro.is-center .trust-mark{ align-self:center; }
.page-intro h1{ max-width:22ch; text-wrap:balance; font-size:clamp(2.2rem,3.65vw,3.28rem); }
@media (max-width:1024px){ .page-intro h1{ font-size:clamp(1.85rem,8vw,3.6rem); } }
.page-intro h1 .g{ color:var(--green); }
.page-intro .hero-sub{ max-width:60ch; }
.page-intro.is-center .hero-sub{ margin:0 auto; }
.page-intro.is-compact{ padding-bottom:clamp(16px,2vw,24px); }
.page-intro .crumbs{ display:flex; flex-wrap:wrap; gap:6px 9px; align-items:center; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }
.page-intro .crumbs a{ color:var(--green); }
.page-intro .crumbs .sep{ color:var(--hairline-2); }

/* -- 08.4 Prose: long-form text on the canvas (text block, posts, legal) --- */
.prose{ max-width:72ch; font-size:16px; line-height:1.72; color:var(--fg-2); }
.prose > * + *{ margin-top:1.1em; }
.prose h2,.prose h3,.prose h4{ color:var(--fg-1); font-weight:600; text-wrap:balance; }
.prose h2{ font-size:clamp(1.4rem,2.2vw,1.8rem); line-height:1.16; letter-spacing:-.026em; margin-top:1.8em; }
.prose h3{ font-size:clamp(1.15rem,1.7vw,1.35rem); line-height:1.24; letter-spacing:-.02em; margin-top:1.6em; }
.prose h4{ font-size:1.05rem; line-height:1.3; letter-spacing:-.014em; margin-top:1.4em; }
.prose > :first-child{ margin-top:0; }
.prose a{ color:var(--green); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover{ color:var(--green-2); }
.prose strong,.prose b{ color:var(--fg-1); font-weight:600; }
.prose ul,.prose ol{ padding-left:1.3em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:.45em; }
.prose li::marker{ color:var(--green); }
.prose 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.08em; font-weight:500; color:var(--fg-1); }
.prose blockquote cite{ display:block; margin-top:10px; font-size:12.5px; font-style:normal; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-4); }
.prose hr{ border:0; border-top:1px solid var(--hairline); margin:2.2em 0; }
.prose img{ height:auto; border-radius:var(--r-lg); }
.prose figure{ margin-left:0; margin-right:0; }
.prose figcaption{ margin-top:8px; font-size:12.5px; color:var(--fg-4); }
.prose table{ width:100%; border-collapse:collapse; font-size:14px; }
.prose th,.prose td{ padding:10px 12px; border-bottom:1px solid var(--hairline); text-align:left; }
.prose th{ color:var(--fg-1); font-weight:600; }
.prose code{ font-size:.9em; padding:2px 6px; border-radius:6px; background:var(--mat-tint); }
.prose pre{ overflow-x:auto; padding:18px; border-radius:var(--r-md); background:var(--fg-1); color:#fff; font-size:13px; line-height:1.6; }
.prose pre code{ background:none; padding:0; }
.prose .wp-block-image,.prose .wp-block-gallery,.prose .wp-block-embed{ margin-top:1.8em; margin-bottom:1.8em; }
.prose .alignwide{ max-width:none; }
.prose .aligncenter{ margin-left:auto; margin-right:auto; }
.prose .alignleft{ float:left; margin:0 1.4em 1em 0; max-width:50%; }
.prose .alignright{ float:right; margin:0 0 1em 1.4em; max-width:50%; }
.prose .wp-block-buttons{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.prose .wp-block-button__link{ display:inline-flex; align-items:center; padding:14px 22px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600; text-decoration:none; 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,.24); }
.prose .wp-block-separator{ border:0; border-top:1px solid var(--hairline); }
.prose::after{ content:''; display:table; clear:both; }

/* Text section block */
.text-section .prose{ margin:0; }
.text-section.is-narrow .section-head .left,.text-section.is-narrow .prose{ max-width:72ch; }
.text-section.is-center .section-head .left{ margin:0 auto; text-align:center; align-items:center; }
.text-section.is-center .prose{ margin:0 auto; }
.text-card{ padding:clamp(24px,3.5vw,44px); border-radius:var(--r-xl); }
.text-card .prose{ max-width:72ch; }
.text-section.is-narrow .text-card{ max-width:880px; }
.text-section.is-center .text-card{ margin:0 auto; }

/* -- 08.5 Team -------------------------------------------------------------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.team-grid[data-count="3"]{ grid-template-columns:repeat(3,1fr); }
.team-grid[data-count="2"]{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1024px){ .team-grid,.team-grid[data-count="3"]{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid,.team-grid[data-count]{ grid-template-columns:1fr; } }
.team-card{ display:flex; flex-direction:column; gap:18px; padding:14px 14px 24px; }
.team-card .media-ph{ aspect-ratio:4/5; border-radius:calc(var(--r-lg) - 6px); }
.team-card .team-body{ display:flex; flex-direction:column; gap:6px; padding:0 10px; }
.team-card .team-role{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.team-card p{ margin-top:4px; font-size:13.5px; line-height:1.56; color:var(--fg-3); }
.team-card .team-link{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--green); }

/* -- 08.6 Lead-form section + form states ------------------------------------ */
.lead-section .hero-form{ max-width:820px; }
.lead-section.is-center .section-head .left{ margin:0 auto; text-align:center; align-items:center; }
.lead-section.is-center .hero-form{ margin:0 auto; }
.lead-section.is-center .form-micro{ justify-content:center; }
.form-error{
  display:flex; align-items:flex-start; gap:var(--space-3); padding:14px 18px; border-radius:var(--r-lg);
  font-size:13px; color:var(--red); background:var(--red-tint); border:1px solid rgba(178,47,29,.28);
}
.form-error[hidden],.form-error:empty{ display:none; }
.hero-form input[aria-invalid="true"]{ border-color:var(--red); box-shadow:inset 0 1px 3px rgba(20,30,25,.06), 0 0 0 4px rgba(178,47,29,.10); }
.form-submit[disabled]{ opacity:.72; cursor:progress; transform:none; }

/* -- 08.7 Cards grid (blog, archives, search, related) ----------------------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .card-grid{ grid-template-columns:1fr; } }
.post-card{ display:flex; flex-direction:column; gap:18px; padding:14px 14px 24px; }
.post-card .media-ph{ aspect-ratio:3/2; border-radius:calc(var(--r-lg) - 6px); }
.post-card-body{ display:flex; flex-direction:column; gap:10px; padding:0 10px; flex:1; }
.post-card-meta{ display:flex; flex-wrap:wrap; gap:4px 9px; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }
.post-card-meta b{ color:var(--green); font-weight:600; }
.post-card-meta .sep{ color:var(--hairline-2); }
.post-card h2,.post-card h3{ font-size:1.12rem; font-weight:600; line-height:1.3; letter-spacing:-.016em; color:var(--fg-1); }
.post-card p{ font-size:13.5px; line-height:1.56; color:var(--fg-3); }
.post-card .outcome-link{ margin-top:auto; }
.post-card-link{ color:inherit; }
.post-card-link::after{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:2; }
.post-card-link:focus-visible{ box-shadow:none; }
.post-card-link:focus-visible::after{ box-shadow:var(--focus-ring); }
.post-card:hover h2,.post-card:hover h3{ color:var(--green); }
.post-card:hover .arr{ transform:translateX(3px); }
.post-card .arr{ transition:transform var(--dur-base) var(--ease-out); }
.empty-state{ padding:clamp(28px,4vw,48px); border-radius:var(--r-xl); display:flex; flex-direction:column; gap:14px; align-items:flex-start; max-width:760px; }
.empty-state p{ font-size:14.5px; color:var(--fg-3); }

/* Pagination */
.pagination{ margin-top:clamp(32px,4vw,52px); }
.pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pagination .page-numbers{ min-width:44px; height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; 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); }
.pagination a.page-numbers:hover{ color:var(--green); box-shadow:var(--elev-2), var(--rim); }
.pagination .page-numbers.current{ color:#fff; background:linear-gradient(180deg,var(--green-lift),var(--green)); border-color:rgba(0,0,0,.06); }
.pagination .page-numbers.dots{ background:none; border:0; box-shadow:none; }

/* -- 08.8 Single post --------------------------------------------------------- */
.article-media{ margin-bottom:clamp(28px,4vw,48px); }
.article-media .media-ph{ aspect-ratio:16/9; border-radius:var(--r-xl); }
.article-layout{ display:flex; justify-content:center; }
.article-layout .prose{ width:100%; }
.article-foot{ max-width:72ch; margin:clamp(32px,4vw,52px) auto 0; display:flex; flex-direction:column; gap:20px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-list a{ display:inline-flex; padding:6px 12px; 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:11.5px; font-weight:500; color:var(--fg-3); }
.tag-list a:hover{ color:var(--green); }
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .post-nav{ grid-template-columns:1fr; } }
.post-nav a{ display:flex; flex-direction:column; gap:6px; padding:20px 22px; }
.post-nav .l{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-4); }
.post-nav .t{ font-size:14.5px; font-weight:600; color:var(--fg-1); letter-spacing:-.012em; }
.post-nav .next{ text-align:right; }

/* -- 08.9 Case study single ------------------------------------------------ */
.case-hero{ padding:clamp(40px,5vw,72px) 0 var(--sec-pad); }
.case-hero .work-spread{ margin-bottom:0; }
.case-hero .work-spread:hover{ transform:none; box-shadow:var(--elev-2), var(--rim); }
.case-hero h1{ font-size:clamp(1.6rem,2.9vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:-.028em; text-wrap:balance; }
.case-story{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .case-story{ grid-template-columns:1fr; } }
.case-story .plane{ padding:26px; display:flex; flex-direction:column; gap:14px; }
.case-story .step{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.case-story .prose{ font-size:14.5px; line-height:1.65; color:var(--fg-3); }
.case-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:760px){ .case-gallery{ grid-template-columns:1fr 1fr; } }
.case-gallery .media-ph{ aspect-ratio:4/5; }
.case-links{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.case-crumbs{ margin-bottom:18px; }
.case-crumbs a{ color:var(--green); }
.case-links.is-center{ justify-content:center; }

/* -- 08.10 Search form, 404 ------------------------------------------------- */
.search-form{ display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px; border-radius:var(--r-xl); max-width:620px;
  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); }
.search-form input[type="search"]{ width:100%; padding:15px 18px; font:inherit; font-size:15px; font-weight:500; 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); }
.search-form input[type="search"]: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; }
.page-intro.is-center .search-form{ margin:0 auto; width:100%; }

/* -- 08.11 Comments ---------------------------------------------------------- */
.comments{ max-width:72ch; margin:clamp(40px,5vw,64px) auto 0; display:flex; flex-direction:column; gap:22px; }
.comments-title{ font-size:1.3rem; font-weight:600; letter-spacing:-.024em; }
.comment-list,.comment-list .children{ display:flex; flex-direction:column; gap:12px; }
.comment-list .children{ margin-top:12px; padding-left:clamp(12px,4vw,36px); }
.comment-body{ padding:20px 22px; 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; color:var(--fg-2); }
.comment-body .comment-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; margin-bottom:10px; font-size:12px; color:var(--fg-4); }
.comment-body .fn{ font-weight:600; color:var(--fg-1); font-size:13.5px; }
.comment-body .avatar{ border-radius:var(--r-pill); }
.comment-body .comment-author{ display:flex; align-items:center; gap:10px; }
.comment-body .says{ display:none; }
.comment-body .reply a{ font-size:12px; font-weight:600; color:var(--green); }
.comment-content p + p{ margin-top:.8em; }
.comment-respond{ padding:26px; border-radius:var(--r-xl); background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.8); box-shadow:var(--elev-2), var(--rim); }
.comment-respond .comment-reply-title{ font-size:1.1rem; font-weight:600; margin-bottom:14px; }
.comment-form{ display:flex; flex-direction:column; gap:12px; font-size:13.5px; color:var(--fg-3); }
.comment-form label{ display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--fg-2); }
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{ width:100%; padding:13px 16px; font:inherit; font-size:14.5px; 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); }
.comment-form textarea:focus,.comment-form input:focus{ border-color:var(--green); outline:none; box-shadow:0 0 0 4px rgba(18,123,66,.14); }
.comment-form input.btn{ font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.comment-form-cookies-consent{ display:flex; gap:8px; align-items:flex-start; }
.comment-form-cookies-consent label{ font-weight:400; margin:0; }

/* -- 08.12 Password form, sticky posts, captions --------------------------- */
.post-password-form{ display:flex; flex-direction:column; gap:12px; max-width:520px; }
.post-password-form input[type="password"]{ width:100%; padding:13px 16px; font:inherit; border-radius:var(--r-md); border:1px solid rgba(23,32,28,.12); background:#fff; }
.post-password-form input[type="submit"]{ align-self:flex-start; padding:12px 20px; border-radius:var(--r-pill); font:inherit; font-weight:600; color:#fff; background:var(--green); cursor:pointer; border:0; }
.wp-caption-text,.gallery-caption{ font-size:12.5px; color:var(--fg-4); }
.faq-a-inner strong{ color:var(--fg-1); font-weight:600; }

/* Guidance notes shown only to logged-in editors (and inside the editor). */
.sm-editor-note{
  margin:12px auto; max-width:var(--container); padding:14px 18px; border-radius:12px;
  font-family:var(--f-sans); font-size:13px; line-height:1.5; color:var(--fg-3);
  background:#fff; border:1px dashed rgba(11,95,50,.4);
}
.sm-editor-note b{ color:var(--green); }
.bypostauthor,.sticky{ /* required by WordPress theme review; no visual change */ }