/* ==========================================================================
   Imbue Sustainability — site styles
   Structure modelled on the iSprout reference build; palette, type and
   motion are Imbue's own. Swap the tokens in :root to retune the brand.
   ========================================================================== */

:root{
  /* Brand palette — sage / cream / deep charcoal-green */
  /* Official Imbue brand colours — Brand Guidelines 2026, section 03 */
  --deep-forest:#1A2C1E;
  --midnight-navy:#0A2533;
  --sage:#A8C4B4;
  --ash-white:#EBF3E6;
  --carbon:#171717;

  /* Working aliases */
  --ink:var(--deep-forest);
  --ink-2:#22371f;
  --ink-3:#2c4429;
  --navy:var(--midnight-navy);
  --cream:var(--ash-white);
  --cream-2:#dce8d6;
  --sage-deep:#5f8570;
  --sage-soft:#cbdfd4;
  --line:rgba(235,243,230,.16);
  --line-dark:rgba(26,44,30,.14);

  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --radius:30px;
  --radius-sm:18px;
  --gutter:clamp(20px,3.4vw,72px);
  --maxw:2100px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  /* Scales from 16px on a phone to 19px on a large desktop */
  font-size:clamp(1rem,.42vw + .92rem,1.19rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ---------- Type ---------- */
.h-xxl,.h-xl,.h-l,.h-m,.h-s{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:0}
.h-xxl{font-size:clamp(2.6rem,6.6vw,7.4rem)}
.h-xl{font-size:clamp(2rem,4.4vw,5rem);line-height:1.04}
.h-l{font-size:clamp(1.6rem,2.9vw,3.4rem);line-height:1.08}
.h-m{font-size:clamp(1.25rem,1.6vw,2.05rem);line-height:1.16}
.h-s{font-size:clamp(1.05rem,1.1vw,1.45rem);line-height:1.25}
.lead{font-size:clamp(1.05rem,.9vw,1.45rem);line-height:1.52;opacity:.86;max-width:60ch}
.eyebrow{
  font-family:var(--font-display);
  font-size:clamp(.72rem,.4vw,.85rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  opacity:.62;margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
p{margin:0 0 1rem;max-width:72ch}
.muted{opacity:.72}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,140px);position:relative}
.section.tight{padding-block:clamp(48px,6vw,90px)}
.dark{background:var(--ink);color:var(--cream)}
.dark .eyebrow{opacity:.55}
.grid{display:grid;gap:clamp(20px,2.6vw,40px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,72px);align-items:start}

/* ---------- Buttons / badges ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.35rem;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  background:var(--ink);color:var(--cream);
  border:1px solid transparent;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:var(--sage-deep)}
.btn.light{background:var(--cream);color:var(--ink)}
.btn.light:hover{background:var(--sage-soft)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.85}
.btn.ghost:hover{background:currentColor;color:var(--ink);opacity:1}
.btn .arw{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);
  transition:transform .35s var(--ease);
}
.btn.light .arw{background:rgba(26,44,30,.1)}
.btn:hover .arw{transform:rotate(45deg)}
.btn .arw svg{width:11px;height:11px}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line-dark);
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  font-family:var(--font-display);
}
.dark .pill{border-color:var(--line)}

/* Corner arrow badge — the reference build's signature detail */
.corner-badge{
  position:absolute;width:clamp(46px,5vw,64px);height:clamp(46px,5vw,64px);
  border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--ink);z-index:4;
}
.corner-badge svg{width:40%;height:40%}
.corner-badge.tr{top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px)}
.corner-badge.bl{bottom:clamp(16px,2vw,28px);left:clamp(16px,2vw,28px)}
.corner-badge.sage{background:var(--sage);color:var(--ink)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding:clamp(12px,1.6vw,20px) 0;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),color .4s var(--ease);
  color:var(--cream);
}
.nav.scrolled{background:rgba(26,44,30,.85);backdrop-filter:blur(14px)}
.nav.on-light{color:var(--ink)}
.nav.on-light.scrolled{background:rgba(235,243,230,.9)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:.65rem}
.nav-logo img{height:clamp(30px,3vw,40px);width:auto}
.nav-logo .wordmark{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;
}
.nav-links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2rem);list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;opacity:.8;
  position:relative;padding-block:.3rem;transition:opacity .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;
  transition:width .35s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{opacity:1}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:0;color:inherit;padding:.4rem;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}
.mobile-menu{
  position:fixed;inset:0;z-index:59;background:var(--ink);color:var(--cream);
  visibility:hidden;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:var(--gutter);
  transform:translateY(-100%);transition:transform .55s var(--ease);
}
.mobile-menu.open{transform:translateY(0);visibility:visible;pointer-events:auto}
.mobile-menu a{font-family:var(--font-display);font-size:2rem;font-weight:600;letter-spacing:-.03em;padding-block:.3rem;border-bottom:1px solid var(--line)}

/* ---------- Contained hero ---------- */
.hero{padding:clamp(72px,9vw,104px) 0 0;background:var(--ink)}
.hero-panel{
  position:relative;
  border-radius:var(--radius);overflow:hidden;
  min-height:min(86vh,860px);
  display:flex;align-items:flex-end;
  /* Branded fallback shows if the photograph is unavailable */
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(168,196,180,.45),transparent 58%),
    linear-gradient(200deg,#24391f 0%,#1A2C1E 48%,#0f1c12 100%);
  isolation:isolate;
}
.hero-panel .media,.media-fill{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero-panel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(15,28,18,.34) 0%,rgba(15,28,18,.12) 30%,rgba(15,28,18,.9) 100%),
    linear-gradient(94deg,rgba(15,28,18,.82) 0%,rgba(15,28,18,.5) 42%,rgba(15,28,18,.06) 78%);
}
.hero-content{position:relative;z-index:2;padding:clamp(24px,4vw,58px);width:100%;color:var(--cream)}
.hero-content .h-xxl{max-width:20ch;text-wrap:balance}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:clamp(20px,3vw,40px)}
.hero-stats{display:flex;gap:clamp(18px,3vw,48px);flex-wrap:wrap}
.hero-stat .n{font-family:var(--font-display);font-size:clamp(1.5rem,2.1vw,2.9rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.hero-stat .l{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin-top:.35rem}
.scroll-cue{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.75;
}
.scroll-cue .dot{width:26px;height:26px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}
.scroll-cue .dot svg{width:10px;height:10px;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}

/* ---------- Full-bleed faded background for dark sections ----------
   A treated project photograph bleeds off the right edge and dissolves
   into the deep forest before it reaches the type, so the headline keeps
   its contrast and the empty half of the band gets depth. Driven by data:
   set an `image` on the block and the markup opts the section in. */
.has-bleed{position:relative;isolation:isolate;overflow:hidden}
.bleed-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center right;
  opacity:.34;filter:saturate(.5);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 24%,rgba(0,0,0,.3) 46%,rgba(0,0,0,.78) 70%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0 24%,rgba(0,0,0,.3) 46%,rgba(0,0,0,.78) 70%,#000 100%);
}
/* Scrim: horizontal pass protects the type, vertical pass stops the
   photograph cutting off hard at the band edges */
.has-bleed::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink) 0 22%,rgba(26,44,30,.7) 48%,rgba(26,44,30,.32) 78%,rgba(26,44,30,.26) 100%),
    linear-gradient(180deg,var(--ink) 0,rgba(26,44,30,0) 18%,rgba(26,44,30,.25) 55%,rgba(26,44,30,.75) 82%,var(--ink) 100%);
}
.has-bleed > .wrap{position:relative;z-index:1}
@media (max-width:860px){
  /* No room for a side-by-side split on a phone, so the photograph becomes
     a faint full-width texture instead of competing with the headline */
  .bleed-bg{opacity:.18;background-position:center}
  .has-bleed::after{background:linear-gradient(180deg,rgba(26,44,30,.8),rgba(26,44,30,.93))}
}

/* ---------- Client & partner strip ---------- */
.clients .wrap{display:flex;flex-direction:column;gap:clamp(22px,3vw,40px)}
/* A fixed four-up matrix, not auto-fit: the count is chosen to divide
   evenly so the last row is never left with a single orphan */
.client-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.client-cell{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(88px,7vw,128px);padding:clamp(14px,1.6vw,28px);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);
}
.client-cell:nth-child(4n+1){border-left:0}
@media (max-width:1100px){
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .client-cell:nth-child(4n+1){border-left:1px solid var(--line)}
  .client-cell:nth-child(2n+1){border-left:0}
}
/* Logos are flattened to one weight so a wall of mismatched brand colours
   reads as a single strip rather than a ransom note */
/* Every logo ships on the same 600x200 canvas, already balanced by visual
   area, so one width rule is all the sizing they need */
.client-cell img{
  width:100%;max-width:clamp(180px,18vw,320px);height:auto;
  filter:brightness(0) invert(1);opacity:.62;
  transition:opacity .4s var(--ease);
}
.client-name{
  margin:0;max-width:none;text-align:center;
  font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;
  font-size:clamp(1.05rem,1.22vw,1.5rem);line-height:1.25;
  color:var(--sage);opacity:.82;
  transition:opacity .4s var(--ease);
}
.client-cell:hover img,.client-cell:hover .client-name{opacity:1}

/* ---------- Credential cards ---------- */
.cred{background:var(--cream)}
.cred-card{
  border:1px solid var(--line-dark);border-radius:var(--radius-sm);
  padding:clamp(20px,2.4vw,34px);background:rgba(255,255,255,.4);
  display:flex;flex-direction:column;gap:.9rem;min-height:100%;
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.cred-card:hover{transform:translateY(-4px);background:#fff}
.cred-icon{
  width:46px;height:46px;border-radius:50%;background:var(--sage-soft);color:var(--ink-2);
  display:grid;place-items:center;
}
.cred-icon svg{width:22px;height:22px}
.cred-card .n{font-family:var(--font-display);font-size:clamp(1.8rem,2.4vw,3.1rem);font-weight:600;letter-spacing:-.035em;line-height:1}

/* ---------- Numbered approach cards ---------- */
.num-card{
  border-top:1px solid var(--line-dark);padding-top:1.4rem;
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .45s var(--ease);
}
.dark .num-card{border-color:var(--line)}
.num-card:hover{transform:translateY(-4px)}
.num-card .num{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  color:var(--sage-deep);
}
.dark .num-card .num{color:var(--sage)}
.num-card ul{margin:.2rem 0 0;padding-left:1.05rem;font-size:.92rem;opacity:.75;line-height:1.75}
.num-card .go{
  margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.num-card .go svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.num-card:hover .go svg{transform:translate(3px,-3px)}

/* ---------- Quote / founder block ---------- */
.quote-panel{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.portrait{
  border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/5;
  /* Capped so the portrait stays a supporting element beside the quote
     rather than competing with it on a wide screen */
  max-width:clamp(220px,24vw,380px);
  background:linear-gradient(170deg,var(--sage-soft),var(--sage));position:relative;
}
.portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom;position:relative;z-index:1}
.portrait.is-empty::before{
  content:attr(data-initials);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:500;
  color:var(--sage);opacity:.5;
}
blockquote{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(1.5rem,2.6vw,3.2rem);line-height:1.14;text-wrap:balance}
.attrib{margin-top:1.4rem;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

/* Collage */
.collage{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,56px)}
.collage figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(160deg,#2c4429,#1A2C1E);position:relative}
.collage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.collage .c1{grid-column:span 2;aspect-ratio:4/5}
.collage .c2{grid-column:span 4;aspect-ratio:16/9}
.collage .c3{grid-column:span 3;aspect-ratio:16/10}
.collage .c4{grid-column:span 3;aspect-ratio:16/10}

/* ---------- Sticky stacked cards ---------- */
.stack{position:relative}
.stack-card{
  position:sticky;top:clamp(80px,12vh,120px);
  border-radius:var(--radius);padding:clamp(24px,4vw,60px);
  margin-bottom:clamp(18px,2.6vw,34px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,48px);align-items:center;
  box-shadow:0 -12px 50px rgba(26,44,30,.14);
}
/* Four-step cycle, so the same rules cover the homepage's three cards and the
   services page's eight */
.stack-card:nth-child(4n+1){background:var(--ink);color:var(--cream)}
.stack-card:nth-child(4n+2){background:var(--midnight-navy);color:var(--cream)}
.stack-card:nth-child(4n+3){background:var(--sage-soft);color:var(--ink)}
.stack-card:nth-child(4n+4){background:var(--ink-3);color:var(--cream)}
.stack-card .idx{font-family:var(--font-display);font-size:.8rem;letter-spacing:.16em;opacity:.7;margin-bottom:1rem}
.stack-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem}
.stack-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem;opacity:.88}
.stack-list li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor;margin-top:.55rem;opacity:.7}
.stack-media{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.08);position:relative}
.stack-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Division cards (services page) ----------
   Same sticky stack as the homepage. A sticky card only behaves while it is
   shorter than the viewport, so the card itself stays short — division, lead
   and scope headings — and the full bullet list lives behind a disclosure. */
/* The page header carries its own bleed tuning: the section-level scrim goes
   solid at the top and bottom, which is right between two light sections but
   crushes a header that starts at the nav. Here the top only needs enough
   darkening to keep the nav legible. */
.page-head .bleed-bg{opacity:.5;background-position:60% 42%}
.page-head.has-bleed::after{
  background:
    linear-gradient(90deg,var(--ink) 0 20%,rgba(26,44,30,.66) 46%,rgba(26,44,30,.24) 76%,rgba(26,44,30,.2) 100%),
    linear-gradient(180deg,rgba(26,44,30,.58) 0,rgba(26,44,30,0) 26%,rgba(26,44,30,0) 72%,var(--ink) 100%);
}
@media (max-width:860px){
  .page-head .bleed-bg{opacity:.22;background-position:center}
  .page-head.has-bleed::after{background:linear-gradient(180deg,rgba(26,44,30,.78),rgba(26,44,30,.94))}
}

.svc-card{display:block;scroll-margin-top:clamp(84px,12vh,130px)}
.svc-head{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(20px,3vw,48px);align-items:center;
}
.svc-media{
  border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:16/10;
  background:rgba(255,255,255,.08);position:relative;
}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A logo is not a photograph: no crop, no panel, just breathing room */
.svc-media.is-logo{background:none;aspect-ratio:16/8;display:grid;place-items:center}
.svc-media.is-logo img{position:static;width:min(100%,330px);height:auto;object-fit:contain}
/* Full-scope disclosure: keeps the card short enough to stack, without
   sending the detail to another part of the page */
.svc-scope{
  margin-top:clamp(20px,2.4vw,34px);padding-top:clamp(14px,1.8vw,24px);
  border-top:1px solid rgba(235,243,230,.18);
}
.stack-card:nth-child(4n+3) .svc-scope{border-top-color:rgba(26,44,30,.16)}
.svc-scope>summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:600;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:.7;transition:opacity .3s var(--ease);
}
.svc-scope>summary::-webkit-details-marker{display:none}
.svc-scope>summary::marker{content:""}
.svc-scope>summary:hover{opacity:1}
.svc-scope .chev{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:currentColor;transition:transform .35s var(--ease);
}
.svc-scope .chev svg{width:11px;height:11px;color:var(--ink)}
.stack-card:nth-child(4n+3) .svc-scope .chev svg{color:var(--cream)}
.svc-scope[open] .chev{transform:rotate(180deg)}
/* An expanded card leaves the sticky stack. Open, it is taller than the
   viewport, and a pinned card gets ridden over by the next one — so the scope
   would be unreachable exactly when someone asked to read it. */
.stack-card:has(.svc-scope[open]){position:static;z-index:5}
.svc-groups{
  margin-top:clamp(18px,2.2vw,30px);
  display:grid;gap:clamp(18px,2.4vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
}
.svc-group .gt{
  font-family:var(--font-display);font-weight:600;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:.68;margin:0 0 .75rem;
}
.svc-group .stack-list{margin-top:0}
@media (max-width:860px){
  .svc-head{grid-template-columns:1fr}
  .svc-media{order:-1}
  /* A pinned card fills a phone screen, and the tallest ones no longer fit
     inside it anyway, so the stack becomes a plain sequence here */
  .stack-card{position:static;top:auto}
}

/* ---------- Expertise list ---------- */
.exp-list{border-top:1px solid var(--line)}
.exp-row{
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(18px,2.6vw,34px) 0;position:relative;
  transition:padding-inline .4s var(--ease),color .4s var(--ease);
}
.exp-row:hover{padding-inline:clamp(8px,1.6vw,26px);color:var(--sage)}
.exp-row .t{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,3.1rem);font-weight:600;letter-spacing:-.03em}
.exp-row .d{max-width:40ch;font-size:.95rem;opacity:.7}
.exp-row .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;transition:background .35s var(--ease),color .35s var(--ease)}
.exp-row:hover .go{background:var(--sage);color:var(--ink);border-color:var(--sage)}
.exp-row .go svg{width:13px;height:13px}

/* ---------- Case study cards ---------- */
.case-card{
  border-radius:var(--radius-sm);overflow:hidden;position:relative;
  background:var(--ink-2);color:var(--cream);display:flex;flex-direction:column;
  transition:transform .5s var(--ease);
}
.case-card:hover{transform:translateY(-6px)}
.case-media{aspect-ratio:16/10;position:relative;background:linear-gradient(160deg,#2c4429,#1A2C1E);overflow:hidden}
.case-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.case-card:hover .case-media img{transform:scale(1.05)}
.case-body{padding:clamp(16px,1.8vw,26px);display:flex;flex-direction:column;gap:.55rem;flex:1}
.case-body .client{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.case-body .t{font-family:var(--font-display);font-size:1.08rem;font-weight:600;letter-spacing:-.02em;line-height:1.24}
.case-figs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.8rem}
.case-figs span{
  font-size:.72rem;letter-spacing:.05em;padding:.28rem .6rem;border-radius:999px;
  border:1px solid var(--line);opacity:.86;
}

/* ---------- Team ---------- */
.team-card{display:flex;flex-direction:column;gap:.85rem}
.team-photo{
  aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--sage-soft),var(--sage));
  display:grid;place-items:center;
}
.team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;transition:transform .6s var(--ease)}
.team-card:hover .team-photo img{transform:scale(1.045)}
.team-photo .initials{font-family:var(--font-display);font-size:2.2rem;font-weight:600;color:var(--ink);opacity:.5}
.team-card .nm{font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.team-card .rl{font-size:.84rem;opacity:.68}
.team-card .ql{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;opacity:.5}
.bio{font-size:.95rem;opacity:.8;line-height:1.7}

/* ---------- CTA ---------- */
.cta-panel{
  border-radius:var(--radius);padding:clamp(30px,5vw,84px);
  background:var(--sage);color:var(--ink);position:relative;overflow:hidden;
}
.cta-panel::after{
  content:"";position:absolute;right:-12%;top:-40%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(243,238,226,.55),transparent 66%);
}
.cta-panel .inner{position:relative;z-index:1;max-width:44ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(20px,3vw,34px)}

/* ---------- Forms ---------- */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border-radius:12px;font:inherit;font-size:.95rem;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:inherit;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage);background:rgba(255,255,255,.1)}
.field select option{color:#111}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--cream);padding-top:clamp(48px,6vw,96px)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:start}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(32px,5vw,64px)}
.footer h4{font-family:var(--font-display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin:0 0 1rem;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer ul a{font-size:.95rem;opacity:.82;transition:opacity .3s var(--ease),padding-left .3s var(--ease)}
.footer ul a:hover{opacity:1;padding-left:5px}
.locs{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,56px);margin-top:clamp(32px,4vw,56px);padding-top:clamp(20px,2.6vw,32px);border-top:1px solid var(--line)}
.loc .city{display:flex;align-items:baseline;gap:.7rem}
.loc .city .n{font-family:var(--font-display);font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.loc .addr{font-size:.9rem;opacity:.7;margin-top:.3rem;max-width:28ch}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:clamp(30px,4vw,56px);padding-block:1.4rem;border-top:1px solid var(--line);
  font-size:.82rem;opacity:.6;
}

/* ---------- Page header (inner pages) ---------- */
.page-head{background:var(--ink);color:var(--cream);padding:clamp(120px,15vw,190px) 0 clamp(40px,6vw,80px)}
.page-head .h-xxl{max-width:18ch}
.page-head .lead{max-width:60ch;margin-top:1.2rem}
.crumb{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:1.4rem}

/* ---------- Reveal animation ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .quote-panel{grid-template-columns:1fr}
  .portrait{max-width:340px;aspect-ratio:1}
  .stack-card{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:block}
  .g-3,.g-2,.split{grid-template-columns:1fr}
  .collage{grid-template-columns:repeat(2,1fr)}
  .collage .c1,.collage .c2,.collage .c3,.collage .c4{grid-column:span 1;aspect-ratio:4/5}
  .exp-row{flex-direction:column;align-items:flex-start;gap:.6rem}
  .exp-row .go{position:absolute;right:0;top:50%;transform:translateY(-50%)}
  .footer-cols{grid-template-columns:1fr 1fr}
  .form .row{grid-template-columns:1fr}
  .hero-panel{min-height:78vh}
}
@media (max-width:640px){
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  .hero-row{gap:1.1rem}
  .scroll-cue{display:none}
}
@media (max-width:540px){
  .g-4{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .corner-badge{display:none}
}

/* Logo swap: sage lockup on dark, deep forest on light */
.nav-logo .logo-dark{display:none}
.nav.on-light .logo-light{display:none}
.nav.on-light .logo-dark{display:block}

/* Inner-page hero media */
.page-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:21/9;background:linear-gradient(160deg,#2c4429,#1A2C1E)}
.page-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.page-media{aspect-ratio:16/10}}

/* Team listing (Team page) */
.team-list{display:grid;gap:clamp(28px,4vw,56px)}
.team-full{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;
  padding-bottom:clamp(24px,3vw,44px);border-bottom:1px solid var(--line-dark)}
.team-full:last-child{border-bottom:0}
.team-full .team-photo{aspect-ratio:1}
@media (max-width:860px){.team-full{grid-template-columns:1fr}.team-full .team-photo{max-width:220px}}

/* Contact page */
.contact-rows{margin-top:clamp(20px,3vw,36px);border-top:1px solid var(--line-dark)}
.contact-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.9rem 0;border-bottom:1px solid var(--line-dark)}
.contact-row .k{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;flex:0 0 auto}
.contact-row .v{font-family:var(--font-display);font-size:1.05rem;font-weight:500;letter-spacing:-.02em;text-align:right}
a.v:hover{color:var(--sage-deep)}
.form-card{background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:clamp(22px,3vw,44px)}
@media (max-width:640px){.contact-row{flex-direction:column;gap:.2rem}.contact-row .v{text-align:left}}

/* ---------- Article body (Insights) ---------- */
.prose{max-width:74ch}
.prose > * + *{margin-top:1.1em}
.prose h2{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2vw,2.1rem);line-height:1.14;margin-top:2.2em;
}
.prose h3{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.2vw,1.3rem);line-height:1.2;margin-top:1.8em;
}
.prose p{max-width:none;line-height:1.7}
.prose ul{list-style:none;padding:0;margin-left:0}
.prose ul li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;font-size:1rem;line-height:1.65}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--sage-deep);opacity:1;
}
.prose a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:600}
.prose blockquote{
  margin:1.8em 0;padding:clamp(18px,2.4vw,30px);border-radius:var(--radius-sm);
  background:rgba(168,196,180,.22);border-left:3px solid var(--sage);
  font-family:var(--font-body);font-size:1.02rem;font-weight:400;line-height:1.6;letter-spacing:0;
}
.prose blockquote p{margin:0}
.prose blockquote p + p{margin-top:.8em;font-size:.9rem;opacity:.75}
.post-foot{
  display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(36px,5vw,64px);
  padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--line-dark);
}
.page-head .crumb a{text-decoration:underline;text-underline-offset:3px}
.media-caption{
  max-width:80ch;margin:.9rem 0 0;font-size:.84rem;line-height:1.5;opacity:.62;font-style:italic;
}

/* Hero video sits over the poster image and fades in once it is actually playing,
   so the hero is never blank and never jumps */
.hero-video{opacity:0;transition:opacity .9s var(--ease);z-index:1}
.hero-video.is-playing{opacity:1}