/* ============================================================
   NUMBER NINJAS - Homepage v3
   Theme ported from Company Profile 2026 (v4)

   VIDEO SLOTS - four places to drop files, each marked in the
   markup with a "VIDEO SLOT" comment:
     1. Hero        - Saad and Omar intro
     2, 3, 4. Clients - three founder testimonials
   Each slot has a commented <video> tag. Uncomment it, set src
   and poster, then delete the .vid-ph placeholder above it.
   Portrait footage: change --ratio on that .vid to 177.78%.
   ============================================================ */

:root{--nn-ochre:#C79A3C;
  --paper:#EAEFE9;
  --navy:#073737;
  --navy-deep:#041F1F;
  --teal:#285251;
  --teal-2:#C79A3C;
  --tint:#DCE4DE;
  --rule:#BCC9C5;
  --rule-dark:rgba(234,239,233,.16);
  --body:#285251;
  --meta:#3a5c59;
  --white:#F1F4EF;
  --maxw:1180px;
  --mediaw:472px;
  --pad:clamp(20px,5vw,40px);
  --inner:calc(min(var(--maxw), 100%) - (2 * var(--pad)));
  --sec:clamp(46px,5.4vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Jost',sans-serif;margin:0;color:var(--navy);letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:1}
.sec{padding-block:var(--sec)}
.sec--tint{background:var(--tint)}
.sec--navy{background:var(--navy);position:relative;overflow:hidden}
.sec--tight{padding-block:clamp(44px,5vw,64px)}
.sec--flush{padding-block:0}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- icon primitives ---------- */
.ico{
  width:52px;height:52px;border-radius:2px;background:var(--tint);flex:none;
  display:flex;align-items:center;justify-content:center
}
.ico svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico--sm{width:38px;height:38px;border-radius:2px}
.ico--sm svg{width:17px;height:17px}

/* ---------- section heading kit ---------- */
.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:18px}
/* the brand mark itself — crossed blades — as a tiny section glyph, ahead of the drawn line */
.eyebrow::before{
  content:'';display:block;width:11px;height:11px;flex:none;background:var(--teal);
  --gly:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 10 88 Q 55.35 55.63 90 12 Q 44.65 44.37 10 88 Z M 10 12 Q 44.65 55.63 90 88 Q 55.35 44.37 10 12 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--gly) center/contain no-repeat;
  mask:var(--gly) center/contain no-repeat;
  opacity:0;transform:scale(.45) rotate(-30deg);
  transition:opacity .5s var(--ease) .05s,transform .65s var(--ease-soft) .05s
}
.eyebrow.in::before,.in .eyebrow::before{opacity:1;transform:scale(1) rotate(0deg)}
.sec--navy .eyebrow::before{background:var(--teal-2)}
.eyebrow i{
  display:block;width:26px;height:2px;background:var(--teal);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .12s
}
.eyebrow.in i,.in .eyebrow i{transform:scaleX(1)}
.eyebrow span{font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}
.sec--navy .eyebrow span{color:var(--teal-2)}
.sec--navy .eyebrow i{background:var(--teal-2)}
.h2{font-size:clamp(1.85rem,3.5vw,2.85rem);font-weight:400;line-height:1.1}
.h2 em{font-style:normal;color:var(--teal)}
.sec--navy .h2{color:var(--white)}
.sec--navy .h2 em{color:var(--teal-2)}
.deck{margin-top:16px;max-width:72ch;color:var(--body);font-size:clamp(1rem,1.5vw,1.06rem)}
.sec--navy .deck{color:rgba(255,255,255,.68)}
.head{margin-bottom:clamp(36px,5vw,56px)}
/* split head: heading left, deck right, hairline under. Keeps the Services
   block structurally distinct from the Introduction block above it. */
.head.head--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:clamp(20px,5vw,60px);
  align-items:end;padding-bottom:26px;border-bottom:1px solid var(--rule);
  margin-bottom:clamp(32px,4vw,48px)
}
.head--split .deck{margin-top:0;padding-bottom:5px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(234,239,233,.9);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--rule)}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--teal);transition:width .12s linear}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;gap:32px}
.nav-logo img{height:38px;width:auto}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{
  font-size:13.5px;font-weight:500;color:var(--navy);opacity:.78;position:relative;padding-block:4px;
  transition:opacity .2s var(--ease)
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--teal);
  transition:right .28s var(--ease)
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{right:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Jost',sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:13px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--fill{background:var(--teal);color:#EAEFE9}
.btn--fill:hover{background:#04211f;transform:translateY(-1px)}
.btn--ghost{border-color:var(--rule);color:var(--navy);background:transparent}
.btn--ghost:hover{border-color:var(--navy);transform:translateY(-1px)}
.btn--sm{padding:10px 20px;font-size:13px}
.nav-cta{margin-left:4px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1.6px;background:var(--navy);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.nav.is-open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---------- video primitive ---------- */
.vid{
  position:relative;width:100%;padding-top:var(--ratio,56.25%);border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18)
}
.vid video,.vid iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.vid-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;cursor:pointer;transition:background .3s var(--ease)
}
.vid-ph:hover{background:rgba(255,255,255,.05)}
.vid-play{
  width:64px;height:64px;border-radius:2px;background:var(--teal);display:flex;align-items:center;
  justify-content:center;transition:transform .3s var(--ease),background .3s var(--ease)
}
.vid-ph:hover .vid-play{transform:scale(1.07);background:#285251}
.vid-play svg{width:20px;height:20px;fill:#EAEFE9;margin-left:3px}
.vid-ph small{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vid--light{background:var(--tint);border-color:var(--rule)}
.vid--light .vid-ph:hover{background:rgba(21,48,75,.03)}
.vid--light .vid-ph small{color:var(--meta)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,88px)}
.hero::before{
  content:'';position:absolute;top:0;bottom:0;right:0;
  left:calc(50% + (var(--inner) / 2) - var(--mediaw) - 68px);
  background:var(--navy);
}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) var(--mediaw);gap:clamp(40px,6vw,80px);align-items:center}
.hero h1{font-size:clamp(2.3rem,4.7vw,3.7rem);font-weight:400;line-height:1.05;letter-spacing:-.03em}
.hero h1 span{display:block}
.hero h1 .t{color:var(--teal)}
.hero .deck{margin-top:24px;max-width:50ch}
.hero-rule{width:88px;height:2px;background:var(--teal);margin:26px 0 0;transform-origin:left}
.hero-rule.in{animation:grow .8s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-fine{margin-top:18px;font-size:13px;color:var(--meta);display:flex;align-items:center;gap:9px}
.hero-fine svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero-cap{margin-top:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.55)}
.hero-cap b{color:#EAEFE9;font-weight:600;font-size:13.5px}

/* ---------- stat strip ---------- */
.statstrip{border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr)}
.stat{position:relative;padding-block:clamp(26px,3.4vw,38px)}
.stat+.stat{padding-left:clamp(20px,4vw,52px)}
.stat+.stat::before{
  content:'';position:absolute;left:0;top:clamp(26px,3.4vw,38px);bottom:clamp(26px,3.4vw,38px);
  width:1px;background:var(--rule)
}
.stat-fig{
  font-family:'Jost',sans-serif;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:300;
  color:var(--navy);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums
}
.stat-lab{margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--meta)}

/* ---------- logo marquee ---------- */
.band-lab{
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal);
  text-align:center;margin-bottom:34px
}
.mq{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.mq-row{overflow:hidden;padding-block:9px}
.mq-track{display:flex;width:max-content}
.mq.ready .mq-track{animation:mq 78s linear infinite}
.mq.ready .mq-track--rev{animation-direction:reverse;animation-duration:92s}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;gap:clamp(38px,5vw,70px);padding-right:clamp(38px,5vw,70px)}
.mq-set img{
  width:auto;flex:none;filter:grayscale(100%);opacity:.5;
  transition:filter .3s var(--ease),opacity .3s var(--ease)
}
.mq-set img:hover{filter:none;opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-note{margin-top:26px;text-align:center;font-size:12.5px;color:var(--meta)}

/* ---------- introduction (hairline statement rows: claim left, evidence right) ---------- */
.rows{border-top:1px solid var(--rule)}
.rowitem{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);
  padding-block:clamp(28px,3.6vw,42px);border-bottom:1px solid var(--rule);align-items:start
}
.rowitem-l{display:flex;align-items:center;gap:18px}
.rowitem-l h3{font-size:1.22rem;font-weight:600;line-height:1.3}
.rowitem p{color:var(--body)}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.card{
  position:relative;overflow:hidden;background:var(--white);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(26px,3vw,34px);transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)
}
.card:hover{transform:translateY(-4px);border-color:#658481}
.card:hover::before{transform:scaleX(1)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.card h3{margin-top:22px;font-size:1.22rem;font-weight:600}
.card hr{margin:16px 0 20px;height:1px;background:var(--rule);border:0}
.card li{position:relative;padding-left:18px;color:var(--body);font-size:14.5px;margin-bottom:11px}
.card li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:2px;background:var(--teal)}
.card li:last-child{margin-bottom:0}
.card--core{background:var(--navy);border-color:var(--navy)}
.card--core h3{color:var(--white)}
.card--core hr{background:var(--rule-dark)}
.card--core li{color:rgba(255,255,255,.72)}
.card--core li::before{background:var(--teal-2)}
.card--core .ico{background:rgba(101,132,129,.16)}
.card--core .ico svg{stroke:var(--teal-2)}
.card--core::before{background:var(--teal-2)}

/* ---------- track record ---------- */
.tr-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:clamp(28px,5vw,64px);align-items:end}
.tr-fig{
  font-family:'Jost',sans-serif;font-size:clamp(3.4rem,8.4vw,6.4rem);font-weight:300;
  color:var(--teal-2);line-height:.92;letter-spacing:-.035em;font-variant-numeric:tabular-nums
}
.tr-lab{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.tr-note{color:rgba(255,255,255,.7);padding-bottom:10px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(40px,5vw,60px)}
.chip{
  position:relative;border:1px solid var(--rule-dark);border-radius:2px;padding:22px 18px;text-align:center;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)
}
.chip:hover{border-color:rgba(101,132,129,.55);background:rgba(255,255,255,.03);transform:translateY(-3px)}
.chip b{display:block;font-family:'Jost',sans-serif;font-size:1.28rem;font-weight:500;color:#EAEFE9;letter-spacing:-.01em}
.chip span{display:block;margin-top:8px;font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-2)}

/* ---------- engagements ---------- */
.eng{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.eng-item{background:var(--paper);padding:clamp(26px,3vw,36px);transition:background .3s var(--ease)}
.eng-item:hover{background:var(--white)}
.eng-item h3{margin-top:22px;font-size:1.1rem;font-weight:600}
.eng-item p{margin-top:12px;color:var(--body);font-size:14.5px}
.eng-meta{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--meta)
}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin-top:14px}
.steps::before{
  content:'';position:absolute;left:6%;right:6%;top:17px;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform 1.15s var(--ease)
}
.steps.in::before{transform:scaleX(1)}
.step{position:relative;padding-right:16px}
.step-n{
  position:relative;z-index:2;width:34px;height:34px;border-radius:2px;background:var(--tint);
  border:1px solid var(--teal);color:var(--teal);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;transition:background .3s var(--ease),color .3s var(--ease)
}
.step:hover .step-n{background:var(--teal);color:#EAEFE9}
.step h4{margin-top:18px;font-size:1rem;font-weight:600}
.step p{margin-top:8px;font-size:13.5px;color:var(--body)}
.proc-tag{
  display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:2px;
  background:var(--white);border:1px solid var(--rule);font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--navy)
}
.proc-tag i{width:6px;height:6px;border-radius:2px;background:var(--teal)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(101,132,129,.5)}55%{box-shadow:0 0 0 6px rgba(101,132,129,0)}}

/* ---------- retainer tiers ---------- */
.grouplab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.grouplab span{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);flex:0 1 auto}
.grouplab i{height:1px;background:var(--rule);flex:1 1 48px;min-width:32px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
.tier{
  position:relative;background:var(--white);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(26px,3vw,32px);display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.tier:hover{transform:translateY(-4px);border-color:#658481}
.tier--mid{background:var(--navy);border-color:var(--navy)}
.tier-lab{font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}
/* the fee, stated on the tier itself rather than only on the pricing page */
.tier-price{margin-top:12px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font-family:'Jost',system-ui,sans-serif;font-size:1.42rem;font-weight:500;letter-spacing:-.015em;
  line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.tier-price span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.tier-price em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--meta)}
.tier h3{margin-top:13px;font-size:1.12rem;font-weight:600;line-height:1.32}
.tier-price{margin-top:20px;display:flex;align-items:baseline;gap:7px}
.tier-price b{
  font-family:'Jost',sans-serif;font-size:2.1rem;font-weight:400;
  letter-spacing:-.035em;color:var(--navy);line-height:1
}
.tier-price span{font-size:13px;font-weight:500;color:var(--meta)}
.tier-for{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--body)
}
.tier--mid .tier-for{border-top-color:var(--rule-dark)}
.tier ul{margin-top:20px;flex:1}
.tier li{position:relative;padding-left:21px;font-size:14px;color:var(--body);margin-bottom:11px}
.tier li:last-child{margin-bottom:0}
.tier li::before{
  content:'';position:absolute;left:0;top:6px;width:10px;height:5px;border-left:1.6px solid var(--teal);
  border-bottom:1.6px solid var(--teal);transform:rotate(-45deg)
}
.tier li b{color:var(--navy);font-weight:600}
.tiers-note{
  margin-top:clamp(20px,2.6vw,26px);font-size:13.5px;color:var(--meta);display:flex;align-items:flex-start;gap:10px
}
.tiers-note svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
.sec--navy .tiers-note{color:rgba(234,239,233,.72)}
.sec--navy .tiers-note svg{stroke:var(--teal-2)}

/* ---------- fixed-fee pricing ---------- */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,32px)}
.panel{background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:clamp(26px,3vw,36px)}
.panel--tint{background:var(--tint);border-color:#BCC9C5}
.panel-lab{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.panel-lab span{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal)}
.panel-lab i{height:1px;background:var(--rule);flex:1}
.panel--tint .panel-lab i{background:#BCC9C5}
.row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-block:16px;border-bottom:1px solid var(--rule)}
.panel--tint .row{border-bottom-color:#BCC9C5}
.row::before{
  content:'';position:absolute;left:-16px;top:16px;bottom:16px;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease)
}
.row:hover::before{transform:scaleY(1)}
.row:last-of-type{border-bottom:0}
.row-l b{display:block;font-family:'Jost',sans-serif;font-size:1.02rem;font-weight:600}
.row-l span{display:block;margin-top:3px;font-size:13px;color:var(--meta)}
.row-p{font-family:'Jost',sans-serif;font-size:1.06rem;font-weight:600;color:var(--teal);white-space:nowrap}
.row-p em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--meta);margin-right:3px}
[id^="fees-"]{scroll-margin-top:112px}
.panel-more{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:'Jost',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);text-decoration:none}
.panel-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.panel-more:hover svg{transform:translateX(4px)}
.terms{
  margin-top:clamp(24px,3vw,32px);background:var(--tint);border-radius:2px;padding:22px clamp(20px,3vw,32px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px
}
.terms span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--navy);opacity:.86}
.terms svg{width:13px;height:13px;stroke:var(--teal);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- advantage ---------- */
.adv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.adv-lab{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);padding-bottom:14px;border-bottom:1px solid var(--rule)}
.adv-list{margin-top:8px}
.adv-list li{display:flex;align-items:flex-start;gap:16px;padding-block:18px;border-bottom:1px solid var(--rule)}
.adv-list li:last-child{border-bottom:0}
.adv-list .ai{
  width:38px;height:38px;border-radius:2px;background:var(--tint);flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:2px
}
.adv-list .ai svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.adv-list b{display:block;font-family:'Jost',sans-serif;font-size:1rem;font-weight:600}
.adv-list em{display:block;font-style:normal;margin-top:3px;font-size:13.5px;color:var(--body)}
.partner{
  margin-top:clamp(28px,4vw,40px);border:1px solid var(--rule);border-radius:2px;
  padding:20px clamp(20px,3vw,28px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  transition:border-color .3s var(--ease),background .3s var(--ease)
}
.partner:hover{border-color:#BCC9C5;background:var(--tint)}
.partner p{font-size:14.5px;color:var(--body)}
.partner b{color:var(--navy);font-weight:600}
.partner a{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--teal)}
.partner a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.partner a:hover svg{transform:translateX(3px)}

/* ---------- video testimonials ---------- */
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
.vcard{
  background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:clamp(16px,1.8vw,20px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.vcard:hover{transform:translateY(-4px);border-color:#658481}
.vcard-body{padding:20px 6px 4px}
.vcard-pull{font-size:14.5px;color:var(--body)}
.vcard footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:14px}
.vcard .mono{width:42px;height:42px;font-size:.85rem}
.vcard b{display:block;font-family:'Jost',sans-serif;font-size:.95rem;font-weight:600}
.vcard em{display:block;font-style:normal;margin-top:2px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--meta)}
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:13px;height:13px;fill:var(--teal)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.mem-top{display:flex;align-items:center;gap:18px}
.mono{
  width:62px;height:62px;border-radius:2px;background:var(--tint);color:var(--teal);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;
  font-size:1.05rem;font-weight:600;letter-spacing:.02em
}
.mem-top h3{font-size:1.24rem;font-weight:600}
.mem-top em{display:block;font-style:normal;margin-top:3px;font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}
.team p{margin-top:22px;color:var(--body);font-size:14.8px}
.team-foot{
  margin-top:clamp(32px,4vw,48px);padding-top:26px;border-top:1px solid var(--rule);text-align:center;
  font-size:14.5px;color:var(--body)
}

/* ---------- closing CTA ---------- */
.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:clamp(36px,6vw,80px);align-items:start}
.close h2{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:400;line-height:1.08}
.close h2 em{font-style:normal;color:var(--teal)}
.contacts{margin-top:34px}
.contacts li{display:flex;align-items:center;gap:16px;padding-block:12px}
.contacts .ico{width:42px;height:42px}
.contacts .ico svg{width:18px;height:18px}
.contacts a,.contacts span{font-size:15px;color:var(--navy)}
.contacts a{transition:color .2s var(--ease)}
.contacts a:hover{color:var(--teal)}
.next-lab{font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal);margin-bottom:26px}
.next li{position:relative;padding-left:52px;padding-bottom:30px}
.next li:last-child{padding-bottom:0}
.next li::before{
  content:'';position:absolute;left:16px;top:32px;bottom:-2px;width:1px;
  background:repeating-linear-gradient(to bottom,#BCC9C5 0 3px,transparent 3px 7px)
}
.next li:last-child::before{display:none}
.next-n{
  position:absolute;left:0;top:0;width:33px;height:33px;border-radius:2px;
  border:1px solid var(--teal);color:var(--teal);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;background:var(--tint)
}
.next h4{font-size:1rem;font-weight:600}
.next p{margin-top:6px;font-size:14px;color:var(--body)}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--navy-deep);color:rgba(255,255,255,.66);padding-block:clamp(52px,6vw,72px) 0;
  border-top:1px solid var(--rule-dark)}
/* the mark, faint, watching over the footer the way a seal sits on a letter */
.foot::before{content:'';position:absolute;top:clamp(46px,5.4vw,66px);right:clamp(20px,4vw,48px);
  width:clamp(70px,7.5vw,108px);height:clamp(70px,7.5vw,108px);
  background:url('assets/logo/mark-reversed.svg') center/contain no-repeat;opacity:.06;pointer-events:none}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,48px)}
.foot img{height:42px;width:auto;margin-bottom:20px}
.foot p{font-size:14px;max-width:34ch}
.foot h4{font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#EAEFE9;margin-bottom:18px}
.foot li{margin-bottom:11px}
.foot a{font-size:14px;color:rgba(255,255,255,.66);transition:color .2s var(--ease)}
.foot a:hover{color:#EAEFE9}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:38px;height:38px;border-radius:2px;border:1px solid var(--rule-dark);
  display:flex;align-items:center;justify-content:center;transition:border-color .25s var(--ease),background .25s var(--ease)
}
.socials a:hover{border-color:var(--teal-2);background:rgba(101,132,129,.12)}
.socials svg{width:15px;height:15px;fill:rgba(255,255,255,.7)}
.socials a:hover svg{fill:#EAEFE9}
.foot-bar{
  margin-top:clamp(40px,5vw,56px);border-top:1px solid var(--rule-dark);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center
}
.foot-bar p{font-size:12.5px;letter-spacing:.03em}
.foot-bar .r{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal-2)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .chips{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:38px}
  .steps::before{display:none}
}
@media (max-width:1024px){
  .hero::before{left:0;top:auto;height:0}
  .hero-in{grid-template-columns:1fr}
  .hero-media{background:var(--navy);border-radius:2px;padding:clamp(18px,3vw,26px);max-width:640px}
}
@media (max-width:980px){
  .nav-links{
    position:fixed;inset:69px 0 auto;background:var(--paper);border-bottom:1px solid var(--rule);
    max-height:calc(100dvh - 69px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;gap:0;padding:8px var(--pad) 22px;margin:0;
    transform:translateY(-120%);transition:transform .38s var(--ease);z-index:59
  }
  .nav.is-open .nav-links{transform:none}
  .nav-links a{padding-block:13px;border-bottom:1px solid var(--rule);font-size:15px}
  .nav-links a::after{display:none}
  .burger{display:block}
  .nav-cta{display:none}
  .price,.adv,.team,.close,.eng{grid-template-columns:1fr}
  .cards,.tiers{grid-template-columns:1fr}
  .rowitem{grid-template-columns:1fr;gap:16px}
  .vcards{grid-template-columns:repeat(2,1fr)}
  .head.head--split{grid-template-columns:1fr;align-items:start;gap:18px}
  .head--split .deck{padding-bottom:0}
  .tr-top{grid-template-columns:1fr;align-items:start}
  .tr-note{padding-bottom:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .chips,.steps{grid-template-columns:repeat(2,1fr)}
  .vcards{grid-template-columns:1fr}
  .statstrip{grid-template-columns:1fr}
  .stat+.stat{padding-left:0;border-top:1px solid var(--rule)}
  .stat+.stat::before{display:none}
  .hero-actions .btn{flex:1 1 100%}
  .terms{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-grid{grid-template-columns:1fr}
  .partner a{margin-left:0}
  .mq.ready .mq-track{animation-duration:52s}
  .mq.ready .mq-track--rev{animation-duration:62s}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .eyebrow i,.steps::before{transform:none}
  .eyebrow::before{transition:none;transform:none}
  .mq-row{overflow:visible}
  .mq-track{width:auto;animation:none}
  .mq-set{flex-wrap:wrap;justify-content:center}
  .mq-dup{display:none}
}

/* ---- Number Ninjas display type ---- */
h1,.h2,.hero h1,.close h2,.nlet h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:0}
.hero h1 span,.h2 em,.close h2 em,.nlet h2 em,.hero h1 .t{letter-spacing:0}
.hero h1 .t{display:block;font-family:'Jost',sans-serif;font-size:clamp(.95rem,1.5vw,1.15rem);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-top:22px}
/* 60/30/10: concentrate the accent (Ochre) on primary CTAs only */
.btn--fill{background:#C79A3C;color:#073737}
.btn--fill:hover{background:#B3862F}
.btn--fill svg{stroke:#073737}

/* ---- Tweaks: expressive feel controls ---- */
/* Accent temperature: remaps the site accent (eyebrows, rules, icons, buttons, highlights) */
html[data-accent="ochre"]{--teal:#C79A3C;--teal-2:#C79A3C}
html[data-accent="brick"]{--teal:#A63840;--teal-2:#C06670}
/* Density: reshapes vertical rhythm */
html[data-density="compact"]{--sec:clamp(40px,5vw,64px)}
html[data-density="spacious"]{--sec:clamp(88px,11vw,150px)}
html[data-density="compact"] .hero{padding-block:clamp(40px,5vw,60px)}
html[data-density="spacious"] .hero{padding-block:clamp(76px,10vw,128px)}
/* Headline personality: editorial serif (default) vs modern geometric sans */
html[data-face="modern"] h1,html[data-face="modern"] .h2,html[data-face="modern"] .close h2,html[data-face="modern"] .nlet h2{font-family:'Jost',sans-serif;font-weight:600;letter-spacing:-.02em}
html[data-face="modern"] .hero h1{font-weight:600;letter-spacing:-.025em}

/* ---- Tweaks panel UI ---- */
.nntw{position:fixed;right:20px;bottom:20px;z-index:200;font-family:'Jost',sans-serif}
.nntw-toggle{display:inline-flex;align-items:center;gap:9px;background:#073737;color:#EAEFE9;border:0;cursor:pointer;
  font:600 11px/1 'Jost',sans-serif;letter-spacing:.19em;text-transform:uppercase;padding:12px 16px}
.nntw-toggle i{display:block;width:14px;height:14px;flex:none}
.nntw-toggle i svg{width:14px;height:14px;stroke:#EAEFE9;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nntw-panel{display:none;width:258px;background:#F1F4EF;border:0.8px solid #658481;padding:20px;margin-bottom:10px}
.nntw.open .nntw-panel{display:block}
.nntw-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.nntw-head b{font:500 13px/1 'Jost';letter-spacing:.02em;color:#073737}
.nntw-reset{background:none;border:0;cursor:pointer;font:500 10px/1 'Jost';letter-spacing:.16em;text-transform:uppercase;color:#658481}
.nntw-reset:hover{color:#073737}
.nntw-grp{margin-bottom:16px}
.nntw-grp:last-child{margin-bottom:0}
.nntw-grp>span{display:block;font:500 9.5px/1 'Jost';letter-spacing:.22em;text-transform:uppercase;color:#285251;margin-bottom:9px}
.nntw-seg{display:flex;border:0.8px solid #BCC9C5}
.nntw-seg button{flex:1;background:#EAEFE9;border:0;border-right:0.8px solid #BCC9C5;cursor:pointer;
  padding:9px 4px;font:500 11px/1.2 'Jost';letter-spacing:.03em;color:#285251;transition:background .18s,color .18s}
.nntw-seg button:last-child{border-right:0}
.nntw-seg button[aria-pressed="true"]{background:#073737;color:#EAEFE9}
@media (max-width:620px){.nntw{right:12px;bottom:12px}.nntw-panel{width:min(258px,calc(100vw - 24px))}}
/* ---- premium motion layer ---- */
:root{--ease-soft:cubic-bezier(.16,.84,.24,1);--ease-line:cubic-bezier(.33,1,.68,1)}
/* no reveal animation on content: text and blocks render immediately, no stagger */
/* Reveals are off by design: blocks render immediately with no stagger.
   Only the reveal's own properties are neutralised here - do NOT add
   transition:none, which would also cancel every hover on these elements. */
.rv,.rv.in{opacity:1;transform:none}
/* nav condenses as the page moves */
.nav-in{transition:padding .45s var(--ease-soft)}
.nav-logo img{transition:height .45s var(--ease-soft)}
.nav.is-stuck .nav-in{padding-block:10px}
.nav.is-stuck .nav-logo img{height:31px}
/* ghost button: solid sweep fill, no gradient */
.btn--ghost{position:relative;z-index:0;overflow:hidden}
.btn--ghost::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--navy);transform:translateX(-101%);transition:transform .5s var(--ease-line)}
.btn--ghost:hover{color:#EAEFE9;border-color:var(--navy)}
.btn--ghost:hover::after{transform:none}
/* card icon lifts with the card */
.ico{transition:transform .4s var(--ease-soft)}
.card:hover .ico,.tier:hover .ico{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){
  .btn--ghost::after{display:none}
}

/* service-page link on a service card */
.card-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--teal);text-decoration:none}
.card-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.card-more:hover svg{transform:translateX(3px)}
.card--core .card-more{color:var(--teal-2)}

/* .next on a dark ground (service-page cadence lists) */
.sec--navy .next h4{color:var(--white)}
.sec--navy .next p{color:rgba(234,239,233,.68)}
.sec--navy .next li::before{background:var(--rule-dark)}

/* ============ nav services dropdown ============ */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop>a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--teal);transition:right .28s var(--ease)}
.navdrop:hover>a::after,.navdrop:focus-within>a::after{right:0}
.navdrop-menu{
  position:absolute;top:calc(100% + 17px);left:-16px;min-width:268px;background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:6px 0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s
}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{opacity:1;visibility:visible;transform:none}
.navdrop-menu a{padding:11px 20px;font-size:13.5px;opacity:.82;white-space:nowrap}
.navdrop-menu a::after{display:none}
/* transparent bridge across the nav's bottom padding so hover survives the gap */
.navdrop-menu::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.navdrop-menu a:hover{opacity:1;background:var(--tint);color:var(--teal)}
@media (max-width:980px){
  .navdrop{display:block}
  .navdrop-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;border-radius:0;padding:0 0 0 16px;min-width:0;background:transparent}
  .navdrop-menu a{border-bottom:1px solid var(--rule);font-size:14px;padding:11px 0}
  .navdrop-menu::before{display:none}
}

/* ============ service-page hero (dark statement + snapshot) ============ */
.phero{background:var(--navy);color:#EAEFE9;padding-block:clamp(52px,7vw,88px) clamp(56px,7vw,92px)}
.phero-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.phero .crumb{color:rgba(234,239,233,.5);margin-bottom:26px}
.phero .crumb a{color:rgba(234,239,233,.62)}
.phero .crumb a:hover{color:var(--teal-2)}
.phero .crumb i{background:var(--rule-dark)}
.phero-lab{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal-2)}
.phero-lab i{display:block;width:26px;height:2px;background:var(--teal-2);flex:none}
.phero h1{color:#EAEFE9;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(2.4rem,5vw,4rem);line-height:1.04;letter-spacing:0;margin:22px 0 0}
.phero h1 em{font-style:normal;color:var(--teal-2)}
.phero-deck{margin-top:26px;max-width:52ch;font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.7;color:rgba(234,239,233,.72)}
.phero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.phero .btn--ghost{border-color:var(--rule-dark);color:#EAEFE9}
.phero .btn--ghost::after{background:#EAEFE9}
.phero .btn--ghost:hover{color:var(--navy);border-color:#EAEFE9}
.phero-fine{margin-top:22px;font-size:12.5px;color:rgba(234,239,233,.72);display:flex;align-items:center;gap:9px}
.phero-fine svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;flex:none}
/* month-end snapshot panel */
.snap{border:1px solid var(--rule-dark);border-radius:2px;padding:clamp(22px,2.4vw,28px)}
.snap-lab{display:flex;align-items:center;gap:12px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,239,233,.55);margin-bottom:6px}
.snap-lab i{height:1px;background:var(--rule-dark);flex:1}
.snap-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-block:14px;border-bottom:1px solid var(--rule-dark)}
.snap-row:last-child{border-bottom:0;padding-bottom:0}
.snap-k{font-size:12.5px;color:rgba(234,239,233,.62)}
.snap-v{font-size:1.06rem;font-weight:500;color:#EAEFE9;font-variant-numeric:tabular-nums;white-space:nowrap}
.snap-v--acc{color:#C79A3C}
/* the closing-CTA companion panel: same hairline language, light ground */
.close-r{border:1px solid var(--rule);border-radius:2px;padding:clamp(22px,2.4vw,28px);
  transition:border-color .4s var(--ease)}
.close-r:hover{border-color:var(--teal)}
.close-r .snap-lab{color:var(--meta)}
.close-r .snap-lab i{background:var(--rule)}
.close-r:hover .snap-lab i{background:var(--teal)}
.close-r .snap-row{border-bottom-color:var(--rule)}
.close-r .snap-k{color:var(--body)}
.close-r .snap-v{color:var(--navy)}
.close-r .snap-v--acc{color:var(--teal)}
.close-r .snap-row:hover .snap-k{color:var(--navy)}
.close-r .snap-row:hover .snap-v,.close-r .snap-row:hover .snap-v--acc{color:var(--navy-deep)}
@media (max-width:900px){.phero-in{grid-template-columns:1fr}}

/* ============ cadence timeline ============ */
.cad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dark)}
/* the grid paints its own hairline ground, so a short row would leave a visible empty cell */
.cad:has(>div:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.cad:has(>div:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.cad>div{background:var(--navy);padding:clamp(28px,3.2vw,38px) clamp(22px,2.4vw,28px)}
.cad-when{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-2)}
.cad h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.55rem;letter-spacing:0;margin:18px 0 15px;color:#EAEFE9}
.cad p{margin:0 0 26px;font-size:14px;line-height:1.75;color:rgba(234,239,233,.66)}
.cad-out{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-dark);font-size:12px;letter-spacing:.02em;color:var(--teal-2)}
.cad>div:first-child{padding-left:0}
.cad>div:last-child{padding-right:0}
@media (max-width:900px){
  .cad{grid-template-columns:repeat(2,1fr)}
  .cad>div{padding-left:clamp(22px,2.4vw,28px);padding-right:clamp(22px,2.4vw,28px)}
  .cad>div:nth-child(2n+1){padding-left:0}
  .cad>div:nth-child(2n){padding-right:0}
}
@media (max-width:560px){
  .cad{grid-template-columns:1fr}
  .cad>div{padding-left:0;padding-right:0}
}

/* ============ in-scope / out-of-scope ============ */
.scope{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,30px)}
.scope-col{border:1px solid var(--rule);border-radius:2px;padding:clamp(24px,3vw,32px);background:var(--white)}
.scope-col--out{background:transparent}
.scope-lab{display:flex;align-items:center;gap:12px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.scope-lab i{height:1px;background:var(--rule);flex:1}
.scope-col--out .scope-lab{color:var(--meta)}
.scope-row{padding-block:15px;border-bottom:1px solid var(--rule)}
.scope-row:last-child{border-bottom:0;padding-bottom:0}
.scope-row b{display:block;font-size:.98rem;font-weight:600}
.scope-row span{display:block;margin-top:4px;font-size:13.5px;color:var(--body);line-height:1.6}
.scope-col--out .scope-row b{color:var(--meta);font-weight:500}
@media (max-width:820px){.scope{grid-template-columns:1fr}}

/* ============ case studies ============ */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,30px)}
.case{border:1px solid var(--rule);border-radius:2px;padding:clamp(26px,3vw,34px);background:var(--white);display:flex;flex-direction:column}
.case-lab{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.case h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.72rem;letter-spacing:0;margin:12px 0 0}
.case-meta{margin-top:8px;font-size:12.5px;color:var(--meta)}
.case-body{margin-top:26px;margin-bottom:26px;padding-top:18px;border-top:1px solid var(--rule)}
.case-body dt{font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--meta)}
.case-body dd{margin:7px 0 18px;font-size:14.5px;line-height:1.65;color:var(--body)}
.case-body dd:last-child{margin-bottom:0}
.case-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;margin-top:auto}
.case-figs>div{background:var(--tint);padding:16px 14px;text-align:center}
.case-fig{font-size:1.5rem;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.case-figlab{margin-top:7px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);line-height:1.4}
.case-note{margin-top:clamp(20px,2.6vw,28px);font-size:13.5px;color:var(--meta);display:flex;align-items:flex-start;gap:9px}
.case-note svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;flex:none;margin-top:2px}
@media (max-width:900px){.cases{grid-template-columns:1fr}}
@media (max-width:560px){.case-figs{grid-template-columns:1fr}.case-figs>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;text-align:left;padding:13px 15px}.case-figlab{margin-top:0;text-align:right}}

/* ============ breadcrumb + FAQ grid (shared by service pages) ============ */
.crumb{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--meta);margin-bottom:22px}
.crumb a{color:var(--meta)}
.crumb a:hover{color:var(--teal)}
.crumb i{width:14px;height:1px;background:var(--rule);display:block}
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.faq>div{background:var(--paper);padding:clamp(24px,3vw,32px)}
.faq h3{font-size:1.02rem;font-weight:600;margin:0 0 12px}
.faq p{margin:0;color:var(--body);font-size:14.5px;line-height:1.65}
@media (max-width:820px){.faq{grid-template-columns:1fr}}
/* cadence: pin the hairline output rule to the cell foot so all four align */
.cad>div{display:flex;flex-direction:column}
.cad-out{margin-top:auto;min-height:calc(1.5em + 18px);line-height:1.5;display:flex;align-items:flex-start}

/* ============ FP&A resourcing rate tiers ============ */
.rates{margin-top:18px;border-top:1px solid var(--rule)}
.rates>div{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:14px;padding-block:11px;border-bottom:1px solid var(--rule)}
.rates>div:last-child{border-bottom:0}
.rates span{font-size:12.5px;letter-spacing:.02em;color:var(--meta)}
.rates b{font-size:.98rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rates em{font-style:normal;font-size:12.5px;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:74px;text-align:right}
.tier-hours b{font-family:'Jost',sans-serif;font-size:clamp(1.7rem,2.6vw,2.1rem);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.tier-hours{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px}
.tier-hours span{font-size:13px;color:var(--meta)}

/* four service cards: 2x2 rather than a cramped 4-up */
.cards--4{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.cards--4{grid-template-columns:1fr}}

/* light-ground variant of the track-record chip grid (sector tiles) */
.chips--light .chip{border-color:var(--rule);background:var(--white)}
.chips--light .chip:hover{border-color:#658481;background:var(--tint)}
.chip-name{font-size:.98rem;font-weight:600;letter-spacing:0}
.chip-note{margin-top:7px;font-size:12px;letter-spacing:.02em;color:var(--meta);line-height:1.5}

/* ============ team page: partner profile cards + stat row ============ */
.mem-card{--cardpad:clamp(28px,3.2vw,38px);position:relative;background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:var(--cardpad);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.mem-card:hover{transform:translateY(-4px);border-color:#658481}
.mem-card .mono{width:62px;height:62px;font-size:1.05rem}
.mem-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.7rem;letter-spacing:0}
.mem-card em{display:block;font-style:normal;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}
.mem-card>p{margin:22px 0 0;font-size:14.5px;line-height:1.7;color:var(--body)}
.mem-owns{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.mem-owns-lab{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-bottom:12px}
.mem-owns ul{margin:0;padding:0;list-style:none}
.mem-owns li{position:relative;padding-left:18px;font-size:14px;line-height:1.55;color:var(--body);margin-bottom:9px}
.mem-owns li:last-child{margin-bottom:0}
.mem-owns li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:2px;background:var(--teal)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);border-radius:2px}
.statrow>div{background:var(--navy);padding:clamp(24px,2.8vw,32px) clamp(16px,2vw,22px);text-align:center}
.statrow .num,.statrow .fig{font-family:'Jost',sans-serif;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;letter-spacing:-.02em;line-height:1;color:#EAEFE9;font-variant-numeric:tabular-nums}
.statrow-lab{margin-top:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-2);line-height:1.5}
@media (max-width:820px){.statrow{grid-template-columns:repeat(2,1fr)}}

/* partner card credential facts */
.mem-facts{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.mem-facts>div{background:var(--tint);padding:13px 14px}
.mem-fact{font-family:'Jost',sans-serif;font-size:1.16rem;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.mem-factlab{margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);line-height:1.4}

/* partner social links */
.mem-social{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);display:flex;gap:10px}
.mem-social a{
  width:38px;height:38px;border-radius:2px;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s var(--ease),background .25s var(--ease)
}
.mem-social a:hover{border-color:#658481;background:var(--tint)}
.mem-social svg{width:17px;height:17px;fill:var(--teal);stroke:none;display:block}

/* ============ consultation form ============ */
.form{display:grid;gap:20px}
.field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;font-family:'Jost',sans-serif;font-size:15px;font-weight:400;color:var(--navy);
  background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:13px 14px;
  transition:border-color .25s var(--ease)
}
.field input::placeholder,.field textarea::placeholder{color:var(--meta);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal)}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-note{font-size:12.5px;line-height:1.6;color:var(--meta);display:flex;align-items:flex-start;gap:9px}
.form-note svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;flex:none;margin-top:2px}
.form-ok{border:1px solid var(--teal);background:var(--tint);border-radius:2px;padding:clamp(26px,3vw,34px)}
.form-ok h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.6rem;letter-spacing:0;margin:0 0 12px}
.form-ok p{margin:0;font-size:14.5px;line-height:1.7;color:var(--body)}
.form-lab{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.form-lab span{font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}
.form-lab i{height:1px;background:var(--rule);flex:1}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
/* chip used as a routing link */
a.chip{display:block;text-decoration:none;color:inherit}
a.chip .chip-name{color:#EAEFE9}
a.chip .chip-note{color:rgba(234,239,233,.62)}
a.chip:hover{border-color:var(--teal-2);background:rgba(255,255,255,.04)}
a.chip .chip-go{margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-2)}

/* ============ service index rows (dark ground) ============ */
.routes{margin-top:clamp(34px,4vw,48px);border-top:1px solid var(--rule-dark)}
.route{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) auto;gap:clamp(18px,3vw,40px);
  align-items:baseline;padding-block:clamp(20px,2.2vw,26px);border-bottom:1px solid var(--rule-dark);
  text-decoration:none;color:inherit;transition:padding-left .3s var(--ease)
}
.route:hover{padding-left:8px}
.route-name{font-size:1.1rem;font-weight:500;color:#EAEFE9;letter-spacing:0;transition:color .25s var(--ease)}
.route:hover .route-name{color:var(--teal-2)}
.route-note{font-size:14px;line-height:1.6;color:rgba(234,239,233,.6)}
.route-go{display:flex;align-items:center;justify-content:flex-end}
.route-go svg{width:17px;height:17px;stroke:var(--teal-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.route:hover .route-go svg{transform:translateX(5px)}
@media (max-width:760px){
  .route{grid-template-columns:1fr auto;gap:6px 18px}
  .route-note{grid-column:1 / -1}
}

/* ============ resources index ============ */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3.4vw,40px)}
.filter{
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);background:transparent;border:1px solid var(--rule);border-radius:2px;padding:9px 15px;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)
}
.filter:hover{border-color:#658481;color:var(--navy)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#EAEFE9}
.posts{border-top:1px solid var(--rule)}
.post{display:block;padding-block:clamp(22px,2.6vw,30px);border-bottom:1px solid var(--rule)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.post-cat{color:var(--teal)}
.post h3{margin:12px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:0;line-height:1.25}
.post h3 a{color:var(--navy);text-decoration:none;transition:color .25s var(--ease)}
.post h3 a:hover{color:var(--teal)}
.post p{margin:10px 0 0;font-size:14.5px;line-height:1.7;color:var(--body);max-width:76ch}
.post[hidden]{display:none}
/* featured lead item */
.lead{border:1px solid var(--rule);border-radius:2px;background:var(--white);padding:clamp(28px,3.4vw,42px);margin-bottom:clamp(30px,3.6vw,44px)}
.lead .post-meta{margin-bottom:4px}
.lead h2{margin:14px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:0;line-height:1.18}
.lead h2 a{color:var(--navy);text-decoration:none;transition:color .25s var(--ease)}
.lead h2 a:hover{color:var(--teal)}
.lead p{margin:18px 0 0;font-size:16px;line-height:1.75;color:var(--body);max-width:72ch}
.lead-go{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:13.5px;font-weight:600;color:var(--teal);text-decoration:none}
.lead-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.lead-go:hover svg{transform:translateX(3px)}
.empty{padding-block:34px;font-size:14.5px;color:var(--meta)}
/* subscribe strip */
.sub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;max-width:560px;margin-top:26px}
@media (max-width:560px){.sub{grid-template-columns:1fr}}

/* ============ article page ============ */
.article{max-width:70ch;margin:0 auto}
.article p.article-lede{font-size:18.5px;line-height:1.7;color:var(--navy);margin:0 0 26px}
.article p{font-size:16.5px;line-height:1.8;color:var(--body);margin:0 0 22px}
.article h2{margin:44px 0 16px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:0;line-height:1.25;color:var(--navy)}
.article h3{margin:32px 0 12px;font-size:1.05rem;font-weight:600;color:var(--navy)}
.article ul,.article ol{margin:0 0 22px;padding-left:0;list-style:none}
.article li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.75;color:var(--body);margin-bottom:11px}
.article li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:2px;background:var(--teal)}
.article blockquote{margin:32px 0;padding:26px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.article blockquote p{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.4;color:var(--navy);letter-spacing:0}
.article strong{font-weight:600;color:var(--navy)}
.article-fig{margin:32px 0;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.article-fig table{width:100%;border-collapse:collapse;font-size:14.5px}
.article-fig th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--meta);padding:14px 16px;border-bottom:1px solid var(--rule)}
.article-fig td{padding:13px 16px;border-bottom:1px solid var(--rule);color:var(--body);font-variant-numeric:tabular-nums}
.article-fig tr:last-child td{border-bottom:0}
.article-fig td:last-child,.article-fig th:last-child{text-align:right}
.byline{display:flex;align-items:center;gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid var(--rule-dark)}
.byline .mono{width:46px;height:46px;font-size:.9rem;background:rgba(101,132,129,.16);color:var(--teal-2)}
.byline b{display:block;font-size:.98rem;font-weight:600;color:#EAEFE9}
.byline span{display:block;margin-top:3px;font-size:12px;letter-spacing:.02em;color:rgba(234,239,233,.62)}
.article-end{max-width:70ch;margin:clamp(40px,5vw,60px) auto 0;padding-top:28px;border-top:1px solid var(--rule)}

/* ============ resources: article cards with imagery ============ */
.postgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.8vw,34px)}
.pcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:2px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.pcard:hover{transform:translateY(-4px);border-color:#658481}
.pcard-img{position:relative;width:100%;aspect-ratio:16/9;background:var(--tint);border-bottom:1px solid var(--rule)}
.pcard-body{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;flex:1}
.pcard h3{margin:12px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.2rem,1.9vw,1.45rem);letter-spacing:0;line-height:1.25}
.pcard h3 a{color:var(--navy);text-decoration:none;transition:color .25s var(--ease)}
.pcard:hover h3 a{color:var(--teal)}
.pcard p{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--body)}
.pcard[hidden]{display:none}
/* featured lead with image */
.lead--img{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden}
.lead-media{position:relative;min-height:300px;background:var(--tint);border-right:1px solid var(--rule)}
.lead-copy{padding:clamp(28px,3.4vw,42px)}
.lead--img h2{margin-top:14px}
@media (max-width:900px){
  .postgrid{grid-template-columns:1fr}
  .lead--img{grid-template-columns:1fr}
  .lead-media{min-height:220px;border-right:0;border-bottom:1px solid var(--rule)}
}
/* ============ template library ============ */
.tmpls{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px}
.tmpl{background:var(--paper);padding:clamp(22px,2.6vw,28px);display:flex;gap:18px;align-items:flex-start;text-decoration:none;color:inherit;transition:background .25s var(--ease)}
.tmpl:hover{background:var(--white)}
.tmpl-fmt{flex:none;min-width:52px;padding:6px 8px;text-align:center;border:1px solid var(--rule);border-radius:2px;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);background:var(--tint)}
.tmpl-txt b{display:block;font-size:1rem;font-weight:600;color:var(--navy)}
.tmpl-txt span{display:block;margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--body)}
.tmpl-txt em{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.tmpl-txt em svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.tmpl:hover .tmpl-txt em svg{transform:translateY(2px)}
.tmpl>svg{flex:none;width:15px;height:15px;margin-left:auto;align-self:center;stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.tmpls{grid-template-columns:1fr}}

/* .close block on a dark ground (Resources subscribe) */
.sec--navy .close h2{color:#EAEFE9}
.sec--navy .close h2 em{color:var(--teal-2)}
.sec--navy .next-lab{color:var(--teal-2)}
.sec--navy .contacts a,.sec--navy .contacts span{color:#EAEFE9}
.sec--navy .contacts .ico{background:rgba(101,132,129,.16)}
.sec--navy .contacts .ico svg{stroke:var(--teal-2)}

/* ============ pricing overview table ============ */
.ptable{border:1px solid var(--rule);border-radius:2px;overflow:hidden;background:var(--white)}
.prow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 110px 16px;gap:clamp(14px,2.4vw,28px);align-items:center;padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,26px);border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;transition:background .25s var(--ease)}
.prow:last-child{border-bottom:0}
.prow--head{background:var(--tint);padding-block:14px}
.prow--head span{font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--meta)}
a.prow:hover{background:var(--tint)}
.p-name{font-size:1.02rem;font-weight:600;color:var(--navy)}
.p-name small{display:block;margin-top:5px;font-size:12.5px;font-weight:400;color:var(--meta);letter-spacing:.02em}
.p-how{font-size:13.5px;line-height:1.6;color:var(--body)}
.p-from{font-family:'Jost',sans-serif;font-size:1.06rem;font-weight:600;color:var(--teal);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.p-from em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--meta);letter-spacing:.06em}
.p-go svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease);display:block}
a.prow:hover .p-go svg{transform:translateX(4px)}
.prow--head span:nth-child(3){text-align:right}
@media (max-width:860px){
  .prow{grid-template-columns:minmax(0,1fr) 110px 16px;gap:10px 16px}
  .p-how{grid-column:1 / -1;order:3}
  .prow--head{display:none}
}
/* pricing model explainers */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-dark)}
.models>div{background:var(--navy);padding:clamp(26px,3vw,34px)}
.models-lab{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-2)}
.models h3{margin:16px 0 14px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.5rem;letter-spacing:0;color:#EAEFE9}
.models p{margin:0;font-size:14px;line-height:1.75;color:rgba(234,239,233,.66)}
.models-use{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-dark);font-size:12px;letter-spacing:.02em;color:var(--teal-2)}
.models>div:first-child{padding-left:0}
.models>div:last-child{padding-right:0}
@media (max-width:820px){
  .models{grid-template-columns:1fr}
  .models>div{padding-left:0;padding-right:0}
}


/* ============ TEXT COLOUR FLOOR - read before adding any text colour ============
   On the Nil ground (#EAEFE9 / #F1F4EF):
     BODY + SMALL TEXT   -> #285251 (Shrub 500) or darker. 7.46:1
     NEVER #658481 (Shrub 300) for text. 3.49:1 - hairlines and rules only.
   On a Shrub field (#073737 / #041F1F):
     SECONDARY TEXT      -> rgba(234,239,233,.68) minimum. Below .68 fails AA.
     ACCENT / EYEBROW    -> #C79A3C (Ochre) at full opacity.
   Large display numerals are not exempt: WCAG large starts at 24px normal
   or 18.66px bold, so a 19px/500 figure still needs 4.5:1.
   ============================================================================= */

/* ============ QA pass: checklist glyphs on scope lists ============ */
.scope-lab,.scope-row{padding-left:30px}
.scope-row{position:relative}
.scope-row::before{
  content:'';position:absolute;left:0;top:18px;width:15px;height:15px;background:var(--teal);
  --gly:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  -webkit-mask:var(--gly) center/contain no-repeat;mask:var(--gly) center/contain no-repeat;
  transition:transform .3s var(--ease-soft),opacity .3s var(--ease)
}
.scope-row:first-of-type::before{top:18px}
.scope-col--out .scope-row::before{background:var(--meta);--gly:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.sec--navy .scope-row::before{background:var(--teal-2)}
.scope-row:hover::before{transform:scale(1.16)}
.scope-lab i{margin-left:0}

/* ============ QA pass: hover polish ============ */
/* inline "read more" arrows nudge on hover, everywhere they appear */
.panel-more svg,.lead-go svg,.tmpl svg{transition:transform .3s var(--ease)}
.panel-more:hover svg,.lead-go:hover svg{transform:translateX(5px)}
.pcard:hover .panel-more svg{transform:translateX(5px)}

/* pricing cards lift like the rest of the card system */
.pcard{transition:transform .3s var(--ease),border-color .3s var(--ease)}
.pgrid .pcard:hover{transform:translateY(-3px);border-color:#658481}

/* dark divider cells warm slightly under the cursor.
   Edge cells zero their outer padding so text aligns to the page margin, so the
   highlight is painted by a pseudo-element that bleeds outward by the same amount
   — otherwise the first cell's fill hugs its text while the others are inset. */
.cad>div,.models>div{position:relative;isolation:isolate}
.cad>div>*,.models>div>*{position:relative;z-index:1}
.cad>div::before,.models>div::before{
  content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;
  background:var(--navy-deep);opacity:0;transition:opacity .35s var(--ease);pointer-events:none
}
.cad>div:hover::before,.models>div:hover::before{opacity:1}
.cad>div:first-child::before{left:calc(-1 * clamp(22px,2.4vw,28px))}
.cad>div:last-child::before{right:calc(-1 * clamp(22px,2.4vw,28px))}
.models>div:first-child::before{left:calc(-1 * clamp(26px,3vw,34px))}
.models>div:last-child::before{right:calc(-1 * clamp(26px,3vw,34px))}
@media (max-width:900px){
  .cad>div::before{left:0;right:0}
  .cad>div:nth-child(2n+1)::before{left:calc(-1 * clamp(22px,2.4vw,28px))}
  .cad>div:nth-child(2n)::before{right:calc(-1 * clamp(22px,2.4vw,28px))}
}
@media (max-width:820px){
  .models>div::before{left:calc(-1 * clamp(26px,3vw,34px));right:calc(-1 * clamp(26px,3vw,34px))}
}
@media (max-width:560px){
  .cad>div::before{left:calc(-1 * clamp(22px,2.4vw,28px));right:calc(-1 * clamp(22px,2.4vw,28px))}
}
@media (prefers-reduced-motion:reduce){
  .cad>div::before,.models>div::before{transition:none}
}

/* scope rows: same restrained hover as the timelines - the glyph grows, the text
   nudges and the row's own hairline warms. No block fill; it read as "selected". */
.scope-row{transition:border-bottom-color .3s var(--ease)}
.scope-row b,.scope-row span{transition:transform .34s var(--ease-soft)}
.scope-row:hover b,.scope-row:hover span{transform:translateX(3px)}
.scope-col .scope-row:hover{border-bottom-color:var(--teal)}
.scope-col--out .scope-row:hover{border-bottom-color:var(--meta)}
.sec--navy .scope-col .scope-row:hover{border-bottom-color:var(--teal-2)}
@media (prefers-reduced-motion:reduce){
  .scope-row b,.scope-row span{transition:none;transform:none}
}

/* stat cells and template rows */
.statrow>div{transition:background .35s var(--ease)}
.statrow>div:hover{background:var(--navy-deep)}
.tmpl:hover .tmpl-txt em svg{transform:translateX(4px)}
.tmpl:hover>svg{transform:translateX(4px)}

/* engagement + faq cells share the card hover language */
.faq>div{transition:background .3s var(--ease)}
.faq>div:hover{background:var(--white)}

@media (prefers-reduced-motion:reduce){
  .scope-row::before{transition:none;transform:none}
}


/* ============ QA pass: reading measure ============ */
/* long single-line notes were running to ~170 characters; cap them for readability */
/* footnotes and captions sit under a full-width grid, so they should run to the
   same right edge rather than stopping short of it */
.tiers-note,.band-lab,.route-note,.next p{max-width:none}
/* centred footnotes: cap the text but keep the block (and its rule) full width */
.team-foot{max-width:none}
.team-foot p{max-width:none}
.case-note{max-width:none}
.tiers-note{max-width:104ch}


/* ============ QA pass: mobile touch targets ============ */
/* chips and pills were 38px tall; 44px is the minimum comfortable touch target */
@media (max-width:980px){
  .filter,.pchip{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  .nntw-toggle{min-height:44px}
  /* the burger is the ONLY route to navigation below this breakpoint */
  .burger{min-width:44px;min-height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
}


/* ============ case-study artifact shots ============ */
.case-shot{
  position:relative;display:block;width:100%;aspect-ratio:16/10;margin-bottom:clamp(20px,2.4vw,26px);
  border:1px solid var(--rule);border-radius:2px;background:var(--tint);overflow:hidden;padding:0;
}
.case-shot image-slot,.case-shot img{display:block;width:100%;height:100%;object-fit:cover}
/* live HTML artifact used as the thumbnail: rendered at its true width and scaled down,
   inert so the frame stays one click target. The ratio is padded rather than aspect-ratio
   because the frame has no in-flow child to size against. */
.case-shot.is-doc::before{content:"";display:block;width:100%;padding-top:62.5%}
.case-doc{position:absolute;inset:0;overflow:hidden;background:#fff;pointer-events:none}
.case-doc iframe{position:absolute;top:0;left:0;width:1700px;height:1062px;border:0;transform-origin:0 0}.case-shot.is-filled:hover{border-color:var(--teal-2)}
/* dedicated enlarge control: only exists once a real image is in the slot, and sits
   clear of the slot's own Replace/Reframe controls so it cannot swallow them */
.case-zoom{
  position:absolute;left:10px;bottom:10px;z-index:2;
  min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;color:var(--navy);
  cursor:zoom-in;padding:0;opacity:0;transition:opacity .25s var(--ease),background .25s var(--ease)
}
.case-shot.is-filled .case-zoom{display:inline-flex;opacity:.86}
.case-shot.is-filled:hover .case-zoom,.case-zoom:focus-visible{opacity:1}
.case-zoom:hover{background:var(--white)}
.case-zoom svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.case-shot.is-filled{cursor:zoom-in}
/* ---- work-sample lightbox ---- */
.shotbox{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
  padding:clamp(20px,4vw,56px) clamp(66px,7vw,86px);background:rgba(4,31,31,.95);cursor:zoom-out}
.shotbox.is-on{display:flex}
.shotbox-f{position:relative;margin:0;max-width:min(1400px,94vw);max-height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;cursor:default}
/* the sheet takes a moment to arrive: hold the frame back and say so, rather than
   leaving the previous sample on screen until the new one paints over it */
.shotbox-load{position:absolute;left:0;right:0;top:0;bottom:56px;z-index:4;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.shotbox.is-loading .shotbox-load{display:flex}
.shotbox-load i{width:26px;height:26px;border:1px solid rgba(234,239,233,.24);border-top-color:#EAEFE9;
  border-radius:50%;animation:shotspin .75s linear infinite}
.shotbox-load span{font-family:'Jost',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(234,239,233,.55)}
@keyframes shotspin{to{transform:rotate(360deg)}}
.shotbox.is-loading .shotbox-doc{background:rgba(4,31,31,.4)}
.shotbox.is-loading .shotbox-doc iframe{opacity:0}
@media (prefers-reduced-motion:reduce){.shotbox-load i{animation-duration:2s}}
.shotbox-f img{display:block;max-width:100%;flex:1 1 auto;min-height:0;width:auto;height:auto;object-fit:contain;object-position:center top;
  border:1px solid var(--rule-dark);background:var(--paper)}
.shotbox-cap{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.shotbox-tools{flex:none;display:flex;align-items:center;gap:18px}
/* zoom, on the artifact views only: the numbers are the point, so let people lean in */
.shotbox-zoom{display:none;align-items:center;gap:2px;border:1px solid var(--rule-dark)}
.shotbox.is-doc .shotbox-zoom{display:flex}
.shotbox-zoom button{min-width:38px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;
  border:0;background:transparent;color:rgba(234,239,233,.72);cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease)}
.shotbox-zoom button:hover{color:var(--teal-2);background:rgba(234,239,233,.06)}
.shotbox-zoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.shotbox-pct{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;min-width:58px!important;
  border-left:1px solid var(--rule-dark)!important;border-right:1px solid var(--rule-dark)!important}
/* the artifact, scaled to fit the dialog: still selectable text, not a bitmap */
.shotbox-doc{display:none;flex:none;overflow:auto;align-self:center;max-width:100%;border:1px solid var(--rule-dark);background:var(--paper);-webkit-overflow-scrolling:touch}
.shotbox-doc iframe{width:1700px;border:0;transform-origin:0 0;display:block;background:#fff;position:absolute;top:0;left:0;transition:opacity .2s var(--ease)}
.shotbox-pad{position:relative}
.shotbox-f figcaption{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5;color:rgba(234,239,233,.72);max-width:74ch}
.shotbox-x,.shotbox-nav{position:absolute;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-dark);border-radius:0;background:rgba(4,31,31,.82);color:var(--white);cursor:pointer;padding:0;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.shotbox-x:hover,.shotbox-nav:hover{border-color:var(--teal-2);color:var(--teal-2)}
.shotbox-x{top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px)}
.shotbox-nav{top:50%;transform:translateY(-50%)}
.shotbox-prev{left:clamp(10px,1.6vw,20px)}
.shotbox-next{right:clamp(10px,1.6vw,20px)}
.shotbox.is-solo .shotbox-nav{display:none}
.shotbox-x svg,.shotbox-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shotbox-ctr{flex:none;white-space:nowrap;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(234,239,233,.5)}
@media (max-width:640px){.shotbox{padding:16px 16px 68px}.shotbox-nav{top:auto;bottom:14px;transform:none}}.case-cap{
  margin-top:-14px;margin-bottom:clamp(20px,2.4vw,26px);
  font-size:11.5px;color:var(--meta);display:flex;align-items:flex-start;gap:8px;line-height:1.5
}
.case-cap svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;flex:none;margin-top:2px}

/* craft strip: what the work looks like, decoupled from any client */
.craft{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
.craft figure{margin:0}
.craft .case-shot{margin-bottom:14px}
.craft figcaption{font-size:12.5px;color:var(--body);line-height:1.6}
.craft figcaption b{display:block;font-weight:500;color:var(--navy);margin-bottom:3px}
@media (max-width:900px){.craft{grid-template-columns:1fr}}

/* lightbox */
.lbx{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(4,31,31,.92);padding:clamp(20px,4vw,56px);cursor:zoom-out
}
.lbx[open],.lbx.is-on{display:flex}
.lbx img{max-width:100%;max-height:82vh;display:block;border:1px solid var(--rule-dark);border-radius:2px}
.lbx-cap{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vw,30px);text-align:center;
  font-size:12px;letter-spacing:.06em;color:var(--teal-2);padding:0 24px
}
.lbx-x{
  position:absolute;top:clamp(14px,2.4vw,24px);right:clamp(14px,2.4vw,24px);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule-dark);border-radius:2px;color:var(--paper);cursor:pointer;
  transition:background .25s var(--ease)
}
.lbx-x:hover{background:rgba(234,239,233,.1)}
.lbx-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.case-shot::after{transition:none}}


/* ============ QA pass: line breaking ============ */
/* short decks were wrapping a single word onto a second line; pretty/balance
   keep the last line from being stranded wherever the text nearly fits */
p,li,dd,.case-cap,.tiers-note,.route-note,.scope-row span{text-wrap:pretty}
/* short intro blocks: split evenly rather than stranding a two-word last line */
figcaption,.tier-for,.phero-deck,.faq dd{text-wrap:balance}
/* scope rows are a two-column table, not a standalone intro. Even 'pretty' pulls
   a word down to avoid a short last line; these should just fill greedily. */
.scope-row span{text-wrap:auto;text-wrap-style:auto}
h1,h2,h3,h4,.h2{text-wrap:balance}


/* ============ about: narrative timeline ============ */
.story{position:relative;display:flex;flex-direction:column;gap:clamp(28px,3.2vw,42px)}
.story::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--rule)}
.sec--navy .story::before{background:var(--rule-dark)}
.chapter{position:relative;padding-left:clamp(26px,3.2vw,44px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,2.4vw,36px);align-items:start}
.chapter::before{content:'';position:absolute;left:-4px;top:9px;width:9px;height:9px;border-radius:2px;background:var(--teal);transition:transform .3s var(--ease)}
.sec--navy .chapter::before{background:var(--teal-2)}
.chapter:hover::before{transform:scale(1.35)}
.chapter-yr{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-variant-numeric:tabular-nums}
.sec--navy .chapter-yr{color:var(--teal-2)}
.chapter h3{margin:9px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.3rem,2vw,1.62rem);letter-spacing:0;line-height:1.22}
.sec--navy .chapter h3{color:var(--white)}
.chapter-body p{margin:0 0 11px;font-size:14.5px;line-height:1.66;color:var(--body);text-wrap:pretty}
.sec--navy .chapter-body p{color:rgba(234,239,233,.7)}
.chapter-body p:last-child{margin-bottom:0}
.chapter-mark{margin-top:12px;padding-top:11px;border-top:1px solid var(--rule);font-size:12px;letter-spacing:.02em;color:var(--teal)}
.sec--navy .chapter-mark{border-top-color:var(--rule-dark);color:var(--teal-2)}
@media (max-width:820px){.chapter{grid-template-columns:1fr;gap:14px}}

/* pull quote / belief statement */
.belief{max-width:24ch;margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.24;letter-spacing:0;color:var(--navy);text-wrap:balance}
.sec--navy .belief{color:var(--white)}
.belief em{font-style:normal;color:var(--teal)}
.sec--navy .belief em{color:var(--teal-2)}
.beliefs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.beliefs-list{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px)}
.beliefs-list>div{padding-top:18px;border-top:1px solid var(--rule)}
.sec--navy .beliefs-list>div{border-top-color:var(--rule-dark)}
.beliefs-list b{display:block;font-family:'Jost',sans-serif;font-weight:500;font-size:15.5px;color:var(--navy);margin-bottom:7px}
.sec--navy .beliefs-list b{color:var(--white)}
.beliefs-list span{display:block;font-size:14px;line-height:1.7;color:var(--body);text-wrap:pretty}
.sec--navy .beliefs-list span{color:rgba(234,239,233,.66)}
@media (max-width:820px){.beliefs{grid-template-columns:1fr}}


/* ============ about: the four positions ============ */
.creed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.creed>div{padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,44px) clamp(24px,2.8vw,34px) 0;
  border-top:1px solid var(--rule-dark);position:relative;transition:border-top-color .4s var(--ease)}
.creed>div:nth-child(2n){padding-right:0;padding-left:clamp(24px,3vw,44px)}
.creed>div:nth-child(2n)::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule-dark)}
.creed-n{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(2rem,3.4vw,2.7rem);
  line-height:1;color:var(--teal-2);font-variant-numeric:tabular-nums;transition:color .34s var(--ease)}
.creed h3{margin:clamp(11px,1.4vw,15px) 0 9px;font-family:'Jost',sans-serif;font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.16rem);letter-spacing:-.01em;color:var(--white);text-wrap:balance}
.creed p{margin:0;font-size:14.5px;line-height:1.7;color:rgba(234,239,233,.66);text-wrap:pretty;max-width:none;
  transition:color .34s var(--ease)}
/* the positions had no hover at all: the rule above the live one warms, the numeral
   goes to paper and the copy steps forward. No panels, it sits on navy already. */
.creed>div:hover{border-top-color:var(--teal-2)}
.creed>div:hover .creed-n{color:var(--white)}
.creed>div:hover p{color:rgba(234,239,233,.9)}
.creed>div:nth-child(2n)::before{transition:background .4s var(--ease)}
.creed>div:nth-child(2n):hover::before{background:var(--teal-2)}
@media (prefers-reduced-motion:reduce){
  .creed>div,.creed-n,.creed p,.creed>div:nth-child(2n)::before{transition:none}
}
.creed-close{margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--rule-dark);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:baseline}
.creed-close p.belief{max-width:15ch;margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.2;color:var(--white)}
.creed-close p{margin:0;font-size:14.5px;line-height:1.75;color:rgba(234,239,233,.6);max-width:44ch;text-wrap:pretty}
@media (max-width:820px){
  .creed{grid-template-columns:1fr}
  .creed>div,.creed>div:nth-child(2n){padding-left:0;padding-right:0}
  .creed>div:nth-child(2n)::before{display:none}
  .creed-close{grid-template-columns:1fr;gap:18px}
}


/* ============ timeline interaction (matches .step-n fill language) ============ */
/* vertical numbered steps */
.next li{transition:opacity .5s var(--ease)}
/* the step under the cursor holds focus; its neighbours recede */
.next:hover li{opacity:.66}
.next li:hover{opacity:1}
/* a solid rule draws down over the dashed connector, rather than switching colour */
.next li::after{
  content:'';position:absolute;left:16px;top:32px;bottom:-2px;width:1px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .58s var(--ease-line);pointer-events:none
}
.next li:last-child::after{display:none}
.next li:hover::after{transform:scaleY(1)}
.next-n{
  isolation:isolate;overflow:hidden;font-variant-numeric:tabular-nums;
  transition:color .34s var(--ease),border-color .34s var(--ease),
             transform .5s var(--ease-soft),box-shadow .5s var(--ease)
}
/* the fill wipes up from the baseline instead of appearing */
.next-n::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--teal);
  transform:scaleY(0);transform-origin:bottom;transition:transform .44s var(--ease-soft)
}
.next li:hover .next-n{color:#EAEFE9;border-color:var(--teal);transform:translateY(-2px);
  box-shadow:0 7px 18px -9px rgba(7,55,55,.5),0 0 0 4px rgba(40,82,81,.07)}
.next li:hover .next-n::before{transform:scaleY(1)}
.next li h4{transition:color .34s var(--ease),transform .5s var(--ease-soft) .05s}
.next li p{transition:transform .5s var(--ease-soft) .09s}
.next li:hover h4{color:var(--teal);transform:translateX(4px)}
.next li:hover p{transform:translateX(4px)}
.sec--navy .next-n::before{background:var(--teal-2)}
.sec--navy .next li::after{background:var(--teal-2)}
.sec--navy .next li:hover .next-n{color:var(--navy);border-color:var(--teal-2);
  box-shadow:0 7px 18px -9px rgba(0,0,0,.6),0 0 0 4px rgba(122,169,166,.1)}
.sec--navy .next li:hover h4{color:var(--teal-2)}

/* about: narrative chapters — the rail draws down beside the chapter you are reading */
.chapter::after{
  content:'';position:absolute;left:0;top:9px;width:1px;height:0;background:var(--teal);
  transition:height .5s var(--ease-line)
}
.sec--navy .chapter::after{background:var(--teal-2)}
.chapter:hover::after{height:calc(100% - 9px)}
.chapter-yr,.chapter h3{transition:transform .34s var(--ease-soft)}
.chapter:hover .chapter-yr,.chapter:hover h3{transform:translateX(3px)}
.chapter-mark{transition:border-top-color .35s var(--ease)}
.chapter:hover .chapter-mark{border-top-color:var(--teal)}
.sec--navy .chapter:hover .chapter-mark{border-top-color:var(--teal-2)}

@media (prefers-reduced-motion:reduce){
  .next li h4,.next li p,.chapter-yr,.chapter h3{transition:none;transform:none}
  .next li,.next li::after,.next-n,.next-n::before{transition:none}
  .next:hover li{opacity:1}
  .next li:hover .next-n{transform:none}
  .chapter::after{transition:none}
  .chapter:hover::after{height:0}
}


/* ============ hero snapshot panel: hover ============ */
/* a spec table, so the figures stay anchored - the rule draws and the label
   brightens instead. Same line-draw language as the about chapters. */
.snap{transition:border-color .4s var(--ease)}
.snap:hover{border-color:rgba(234,239,233,.28)}
.snap-row{position:relative}
.snap-row::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--teal-2);
  transition:width .5s var(--ease-line)
}
.snap-row:hover::after{width:100%}
.snap-k{transition:color .3s var(--ease),transform .34s var(--ease-soft)}
.snap-row:hover .snap-k{color:rgba(234,239,233,.92);transform:translateX(3px)}
.snap-v{transition:color .3s var(--ease)}
.snap-row:hover .snap-v{color:#fff}
.snap-row:hover .snap-v--acc{color:#D9AE52}
@media (prefers-reduced-motion:reduce){
  .snap-row::after{transition:none}
  .snap-row:hover::after{width:0}
  .snap-k{transition:none;transform:none}
  .snap-row:hover .snap-k{transform:none}
}


/* ============ live local time ============ */
.clock{
  display:inline-flex;align-items:baseline;gap:9px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--meta);font-variant-numeric:tabular-nums
}
.clock i{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none;align-self:center;
  animation:nnbeat 2.8s var(--ease) infinite}
@keyframes nnbeat{0%,100%{opacity:1}50%{opacity:.35}}
.foot .clock{color:rgba(234,239,233,.5)}
.foot .clock i{background:var(--teal-2)}
.nav .clock{margin-left:auto;margin-right:4px}
@media (max-width:1180px){.nav .clock{display:none}}

/* ============ copy-to-clipboard email ============ */
.copyable{display:inline-flex;align-items:center;gap:9px}
.copybtn{
  background:none;border:1px solid var(--rule-dark);border-radius:2px;padding:3px 8px;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,239,233,.5);opacity:0;transform:translateX(-4px);
  transition:opacity .28s var(--ease),transform .28s var(--ease-soft),color .28s var(--ease),border-color .28s var(--ease)
}
.copyable:hover .copybtn,.copybtn:focus-visible{opacity:1;transform:none}
.copybtn:hover{color:var(--teal-2);border-color:var(--teal-2)}
.copybtn[data-done="1"]{opacity:1;transform:none;color:var(--teal-2);border-color:var(--teal-2)}

/* ============ capacity / response signal ============ */
.signal{
  display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--rule);
  border-radius:2px;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:var(--white);transition:border-color .3s var(--ease)
}
.signal:hover{border-color:var(--teal)}
.signal i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;
  animation:nnbeat 2.8s var(--ease) infinite}
.phero .signal{background:transparent;border-color:var(--rule-dark);color:rgba(234,239,233,.72);margin-bottom:20px}
.phero .signal i{background:var(--teal-2)}

@media (prefers-reduced-motion:reduce){
  .clock i,.signal i{animation:none}
  .copybtn{transition:none;transform:none}
}


/* ============ [75] sitewide regulatory disclosure ============ */
.foot-legal{border-top:1px solid var(--rule-dark);margin-top:clamp(34px,4vw,48px);padding-top:22px}
.foot-legal p{font-size:11.5px;line-height:1.72;color:rgba(234,239,233,.62);max-width:none;
  text-align:justify;text-wrap:auto;hyphens:auto}
.foot-legal b{font-weight:500;color:rgba(234,239,233,.85)}
.foot-legal p:last-child{margin-bottom:0}
/* the disclosure already sits under its own rule, so the bar below it does not
   need the full section gap as well */
.foot-legal+.foot-bar{margin-top:clamp(18px,2vw,24px)}


/* ============ [95] the duotone rule for all photography ============ */
/* A colour photo would drop a fourth, fifth and sixth colour onto a two-colour
   page. Every photographic image is desaturated and tinted to Shrub, so it
   keeps its information and loses its palette. Artefact images opt out via
   .nnimg--raw, because our own documents are already in the brand palette. */
.nnimg{position:relative;overflow:hidden;background:var(--tint);border:1px solid var(--rule)}
.nnimg.is-filled{isolation:isolate}
.nnimg image-slot{display:block;width:100%;height:100%}
/* The tint is a real child, not ::after: :has() does not invalidate
   pseudo-element styles when data-filled flips on the descendant slot. */
/* mix-blend-mode is declared up front, not switched on with .is-filled: changing
   a compositing property in the same style change cancels the opacity transition. */
.nnimg-tint{position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);z-index:1}
.nnimg.is-filled image-slot{filter:grayscale(1) contrast(1.05)}
.nnimg.is-filled .nnimg-tint{opacity:.88}
.nnimg--raw.is-filled image-slot{filter:none}
.nnimg--raw .nnimg-tint{display:none}
.sec--navy .nnimg{border-color:var(--rule-dark);background:var(--navy-deep)}

/* An odd item count would leave the final grid cell empty, and .faq paints its
   hairlines by bleeding the container background through 1px gaps, so an empty
   cell renders as a solid slab. Make a trailing odd item span the row. */
.faq > :last-child:nth-child(odd){grid-column:1 / -1}

/* ============ [96] partner portraits ============ */
/* the portraits are small studio headshots, so they are kept small and quiet: the
   name carries the card, the photograph only confirms who is speaking */
.mem-top{display:flex;align-items:center;gap:clamp(18px,1.9vw,24px);
  padding-bottom:clamp(20px,2.2vw,26px);margin-bottom:clamp(22px,2.4vw,28px);
  border-bottom:1px solid var(--rule)}
.mem-photo{width:clamp(86px,8vw,104px);height:clamp(86px,8vw,104px);aspect-ratio:auto;flex:none;
  border:1px solid var(--rule);border-radius:50%;overflow:hidden;background:var(--tint);
  transition:border-color .4s var(--ease)}
.mem-card:hover .mem-photo{border-color:var(--teal)}
.mem-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
/* role above name, so the eye lands on the person and not the job title */
.mem-top>div:last-child{display:flex;flex-direction:column-reverse;align-items:flex-start;
  gap:7px;min-width:0}
.mem-top h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,2.3vw,1.98rem);line-height:1.04;letter-spacing:-.008em;color:var(--navy)}
.mem-top em{font-style:normal;display:flex;align-items:center;gap:9px;margin:0;
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.mem-top em::before{content:'';display:block;width:16px;height:1px;background:var(--teal);flex:none}
.mem-top .mono{flex:none}

/* ============ [97] the wider team ============ */
/* five people in tiles reads as a crowd; as a roster of hairline rows each one
   gets a full measure for its own paragraph, and the page breathes */
.crew{margin-top:clamp(28px,3.2vw,40px);border-top:1px solid var(--rule)}
.crew>article{display:grid;grid-template-columns:minmax(180px,21%) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:start;
  padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--rule)}
.crew-top{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:0;margin:0;border:0}
.crew-photo{width:clamp(66px,6.2vw,80px);height:clamp(66px,6.2vw,80px);flex:none;
  border:1px solid var(--rule);border-radius:50%;overflow:hidden;background:var(--tint);
  transition:border-color .4s var(--ease)}
.crew>article:hover .crew-photo{border-color:var(--teal)}
.crew-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.crew-photo--pending{position:relative;border-style:dashed;border-color:var(--rule)}
.crew-photo--pending::before{content:'';position:absolute;inset:0;margin:auto;width:34%;height:34%;
  background:var(--meta);opacity:.5;
  --gly:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 10 88 Q 55.35 55.63 90 12 Q 44.65 44.37 10 88 Z M 10 12 Q 44.65 55.63 90 88 Q 55.35 44.37 10 12 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--gly) center/contain no-repeat;mask:var(--gly) center/contain no-repeat}
/* role above name, matching the partner cards */
.crew-top>div:last-child{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:7px;
  min-width:0;width:100%}
.crew-top h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.24rem,1.8vw,1.5rem);line-height:1.08;letter-spacing:-.005em;color:var(--navy);
  transition:color .34s var(--ease)}
.crew>article:hover .crew-top h3{color:var(--teal)}
.crew-top em{font-style:normal;display:block;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  line-height:1.5;text-transform:uppercase;color:var(--teal);white-space:nowrap}
/* the longest role needs a ~198px column; below ~1040px the 21% column is narrower
   than that, so the label has to be free to wrap */
@media (max-width:1040px){.crew-top em{white-space:normal}}
.crew-body{min-width:0;max-width:none}
.crew-body>p{margin:0;font-size:14px;line-height:1.76;color:var(--body);text-wrap:pretty}
.crew-pending{color:var(--meta)}
.crew-cred{margin-top:clamp(14px,1.5vw,18px);display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.02em;color:var(--meta)}
.crew-cred::before{content:'';display:block;width:13px;height:1px;background:var(--teal);flex:none}
@media (max-width:760px){
  .crew>article{grid-template-columns:1fr;gap:18px}
  .crew-top{flex-direction:row;align-items:center;gap:16px}
  .crew-top>div:last-child{width:auto}
}
@media (prefers-reduced-motion:reduce){.crew-photo,.crew-top h3{transition:none}}
@media (prefers-reduced-motion:reduce){.crew>article,.crew-photo{transition:none}}
.mem-vouch{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);font-size:13.5px;
  line-height:1.62;color:var(--body);text-wrap:pretty}
.mem-vouch b{font-weight:500;color:var(--navy)}

/* ============ [97] the artefact as the hero image ============ */
.artband{border-top:1px solid var(--rule)}
.artband .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,58px);align-items:center}
.artband-l .k{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px}
.artband-l h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.18;letter-spacing:-.005em;margin-bottom:14px}
.artband-l p{font-size:14.5px;line-height:1.66;color:var(--body);max-width:52ch;text-wrap:pretty}
.artband-l .cap{margin-top:20px;font-size:11.5px;color:var(--meta);font-variant-numeric:tabular-nums}
.artband-img{aspect-ratio:16/10}
@media (max-width:900px){.artband .wrap{grid-template-columns:1fr}}

/* ============ [98] place, About page only ============ */
.placeband{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,48px);align-items:end;margin-top:clamp(32px,4vw,46px)}
.placeband-img{aspect-ratio:3/2}
.placeband p{font-size:14px;line-height:1.68;color:rgba(234,239,233,.72);text-wrap:pretty}
.placeband .k{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-2);margin-bottom:12px}
@media (max-width:820px){.placeband{grid-template-columns:1fr}}

/* ============ [99] the logo wall, treated ============ */
.mq-set img{filter:grayscale(1) opacity(.5);transition:filter .35s var(--ease)}
.mq-set img:hover{filter:grayscale(0) opacity(1)}


/* ==== scope block on dark grounds ==== */
.sec--navy .scope-lab span{color:#EAEFE9}
.sec--navy .scope-lab i{background:var(--rule-dark)}
.sec--navy .scope-col{border-color:var(--rule-dark)}
.sec--navy .scope-row{border-color:var(--rule-dark)}
.sec--navy .scope-row b{color:#EAEFE9}
.sec--navy .scope-row span{color:rgba(234,239,233,.72)}
.sec--navy .scope-row::before{background:var(--nn-ochre,#C79A3C)}
.sec--navy .scope-col--out .scope-row::before{background:var(--teal-2)}
.sec--navy .scope-col .scope-row:hover{background:rgba(234,239,233,.05)}
.sec--navy .scope-row:hover{border-color:var(--teal-2)}


/* ============ depth: dossier stack + sensitivity surface ============ */
.workstage{position:relative;background:#073737;border-radius:2px;padding:clamp(30px,4vw,58px);overflow:hidden}
.workstage::after{content:'';position:absolute;inset:clamp(16px,2vw,26px);border:1px solid rgba(234,239,233,.14);pointer-events:none}
.dossier{position:relative;width:min(560px,100%);height:470px;margin:6px auto 0;
  perspective:1600px;perspective-origin:50% 38%;transform-style:preserve-3d;
  transform:rotateX(var(--dx,0deg)) rotateY(var(--dy,0deg));
  transition:transform .6s cubic-bezier(.2,.9,.25,1)}
.dsh{position:absolute;left:0;width:min(474px,94%);height:276px;background:#EAEFE9;border:1px solid #BCC9C5;border-radius:1px;
  padding:24px 26px 20px;overflow:hidden;transform-style:preserve-3d;transform-origin:50% 84%;
  transition:transform .5s cubic-bezier(.2,.9,.25,1),border-color .4s var(--ease)}
.dsh::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#073737;
  transition:height .4s var(--ease)}

/* resting stack: flat in Z so every hit area matches its box exactly */
.dsh:nth-child(1){top:0;z-index:1;transform:translate3d(0,0,0) rotateZ(-.5deg)}
.dsh:nth-child(2){top:58px;left:22px;z-index:2;transform:translate3d(0,0,0) rotateZ(.22deg)}
.dsh:nth-child(3){top:116px;left:44px;z-index:3;transform:translate3d(0,0,0) rotateZ(-.12deg)}
.dsh:nth-child(3)::before{background:#C79A3C}

/* stack hover: fan far enough vertically that all three header bands stay readable */
.dwrap:hover .dsh:nth-child(1),.dossier:hover .dsh:nth-child(1){transform:translate3d(-16px,-34px,16px) rotateZ(-1.5deg) rotateY(2deg)}
.dwrap:hover .dsh:nth-child(2),.dossier:hover .dsh:nth-child(2){transform:translate3d(8px,0,8px) rotateZ(.6deg) rotateY(-1deg)}
.dwrap:hover .dsh:nth-child(3),.dossier:hover .dsh:nth-child(3){transform:translate3d(2px,34px,0) rotateZ(-.3deg) rotateY(.8deg)}

/* one sheet held: it squares up and lifts; the others square up behind it into a
   tidy pile, so no sheet is left half covered with its text truncated */
.dwrap:hover .dsh.is-front,.dossier:hover .dsh.is-front{transform:translate3d(0,0,78px) rotateZ(0deg);border-color:#658481}
.dwrap:hover .dsh.is-back,.dossier:hover .dsh.is-back{transform:translate3d(var(--ox,0px),var(--oy,0px),var(--oz,-30px)) rotateZ(0deg)}
/* fixed hover targets: they never move, so the cursor can travel from one sheet
   to the next without the target sliding out from under it */
.dwrap{position:relative;width:min(560px,100%);margin:6px auto 0}
.dwrap .dossier{margin:0}
.dhit{position:absolute;inset:0;z-index:9}
.dhit i{position:absolute;left:0;right:0;display:block;height:58px}
.dhit i:nth-child(1){top:0}
.dhit i:nth-child(2){top:58px}
.dhit i:nth-child(3){top:116px;height:auto;bottom:0}
.dsh.is-front::before{height:3px}
.dsh.is-front .dsh-n{color:#285251}

.dsh-h{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:13px;border-bottom:1px solid #BCC9C5;margin-bottom:15px}
.dsh:nth-child(3) .dsh-h{padding-right:44px}
.dsh:nth-child(3) .dsh-h::after{content:'';position:absolute;right:0;top:-4px;width:30px;height:30px;
  background:url('assets/logo/mark.svg') center/contain no-repeat;opacity:.28}
.dsh-k{font-size:8.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#285251}
.dsh-n{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:19px;color:#658481;line-height:1;font-variant-numeric:tabular-nums}
.dsh-t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:20px;line-height:1.2;color:#073737;
  margin:0 0 14px;letter-spacing:.01em;max-width:27ch}
.dsh-r{display:flex;justify-content:space-between;gap:18px;font-size:10.5px;padding:6px 0;border-bottom:1px solid #DCE4DE}
.dsh-r:last-of-type{border-bottom:0}
.dsh-r b{font-weight:400;color:#285251}
.dsh-r span{color:#073737;font-variant-numeric:tabular-nums}
.dsh-r--tot b,.dsh-r--tot span{font-weight:500;color:#073737}
.dsh-b{display:flex;align-items:flex-end;gap:9px;height:74px;margin-top:12px}
.dsh-b i{flex:1;background:#073737;display:block}
.dsh-b i.a{background:#C79A3C}
.dsh-x{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#285251;margin-top:8px}
.fld{position:relative;height:392px;overflow:hidden;background:#073737;border-radius:2px}
.fld canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fld .ov{position:relative;height:100%;display:grid;place-items:center;text-align:center;padding:26px}
.fld .kk{font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#C79A3C;margin-bottom:15px}
.fld h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.7rem,3.6vw,2.7rem);
  color:#EAEFE9;line-height:1.14;letter-spacing:.01em}
.fld p{font-size:13px;color:rgba(234,239,233,.72);margin-top:13px;max-width:46ch;margin-inline:auto}
@media (max-width:760px){
  .dossier{height:410px;perspective:1100px}
  .dhit i:nth-child(1){top:0;height:50px}
  .dhit i:nth-child(2){top:50px;height:50px}
  .dhit i:nth-child(3){top:100px;height:auto;bottom:0}
  .dsh{height:246px;padding:20px 20px 18px}
  .dsh:nth-child(2){top:54px;left:13px}
  .dsh:nth-child(3){top:108px;left:26px}
  .fld{height:340px}
}
@media (prefers-reduced-motion:reduce){
  .dossier,.dsh{transition:none}
  .dossier{transform:none !important}
}

/* ============ case index ============ */
.csfilt{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,36px)}
.csfilt button{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--rule);border-radius:2px;background:transparent;color:var(--meta);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.csfilt button:hover{border-color:var(--teal-2);color:var(--navy)}
.csfilt button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.csgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px)}
.cscard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(22px,2.4vw,28px);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cscard:hover{border-color:var(--teal);transform:translateY(-3px)}
.csnum{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:17px;color:var(--teal-2);font-variant-numeric:tabular-nums}
.cshead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.cssect{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.csfig{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(1.85rem,3vw,2.4rem);
  line-height:1.05;color:var(--navy);margin:17px 0 6px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cslab{font-size:11px;color:var(--body);line-height:1.5;margin-bottom:16px}
.csmeta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.csmeta span{font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);
  border:1px solid var(--rule);border-radius:2px;padding:4px 8px}
.cscard p.csw{font-size:13.5px;color:var(--body);line-height:1.62;margin:0 0 22px;flex:1 0 auto}
.csgo{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);padding-top:16px;border-top:1px solid var(--rule);margin-top:auto}
.csgo svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;transition:transform .3s var(--ease)}
.cscard:hover .csgo svg{transform:translateX(5px)}
.csstat{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.csstat--live{color:#C79A3C}
@media (max-width:820px){.csgrid{grid-template-columns:1fr}}


/* ============ CTA buttons: considered hover, no shadows or gradients ============ */
/* A solid panel wipes across from the leading edge and the arrow travels out and
   back in, so the button reads as a mechanism rather than a colour change. */
.btn{position:relative;z-index:0;isolation:isolate;overflow:hidden;
  transition:transform .3s var(--ease-soft),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;background:#073737;
  transform:translateX(-101%);transition:transform .52s var(--ease-line)}
.btn:hover::after{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.988);transition-duration:.08s}
.btn:focus-visible{outline:1px solid var(--navy);outline-offset:3px}

/* primary: Ochre at rest, Shrub panel on hover, label and arrow invert */
.btn--fill:hover{color:#EAEFE9;background:#C79A3C}
.btn--fill:hover svg{stroke:#EAEFE9}
/* secondary: hairline at rest, same panel on hover */
.btn--ghost::after{background:#073737}
.btn--ghost:hover{color:#EAEFE9;border-color:#073737}

/* the arrow leaves by the right edge and re-enters from the left */
@keyframes nnArrowThrough{
  0%{transform:translateX(0);opacity:1}
  42%{transform:translateX(11px);opacity:0}
  43%{transform:translateX(-11px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
.btn:hover svg{transform:none;animation:nnArrowThrough .56s var(--ease-line)}

/* on a Shrub field the panel inverts: Nil wipes in, label goes dark */
.sec--navy .btn--ghost,.foot .btn--ghost{border-color:var(--rule-dark);color:#EAEFE9}
.sec--navy .btn--ghost::after,.foot .btn--ghost::after{background:#EAEFE9}
.sec--navy .btn--ghost:hover,.foot .btn--ghost:hover{color:#073737;border-color:#EAEFE9}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::after{transition:none}
  .btn:hover{transform:none}
  .btn:hover svg{animation:none}
  .btn:hover::after{transform:none}
}


/* ============ case study index: imagery-led, service-filtered ============ */
.csfilt{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,36px)}
.csfilt button{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.07em;
  padding:9px 15px;border:1px solid var(--rule);border-radius:2px;background:transparent;color:var(--body);
  cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.csfilt button:hover{border-color:var(--teal);color:var(--navy)}
.csfilt button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#EAEFE9}
.csgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);align-items:stretch}
.cscard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;transition:transform .35s var(--ease-soft),border-color .35s var(--ease)}
.cscard:hover{transform:translateY(-3px);border-color:var(--teal-2)}
.csimg{position:relative;aspect-ratio:16/10;background:var(--tint);border-bottom:1px solid var(--rule);overflow:hidden}
.csimg image-slot{position:absolute;inset:0;width:100%;height:100%}
.csimg::after{content:'';position:absolute;inset:0;background:var(--navy);opacity:0;mix-blend-mode:color;
  pointer-events:none;transition:opacity .5s var(--ease)}
.csimg.has-img::after{opacity:.82}
.csimg.has-img{filter:grayscale(1) contrast(1.04)}
.csbody{display:flex;flex-direction:column;flex:1;padding:clamp(17px,1.9vw,21px)}
.cshead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.cssect{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.csnum{font-size:10.5px;font-weight:500;color:var(--meta);font-variant-numeric:tabular-nums}
.csfig{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:29px;line-height:1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.csfigk{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin-top:7px}
.cscard p{font-size:13px;line-height:1.6;color:var(--body);margin:14px 0 18px;flex:1}
.csfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--rule);padding-top:13px}
.cssvc{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.csfoot svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .3s var(--ease);flex:none}
.cscard:hover .csfoot svg{transform:translateX(4px)}
.csnote{margin-top:clamp(24px,3vw,32px);padding-top:18px;border-top:1px solid var(--rule);
  display:flex;gap:11px;font-size:12px;color:var(--meta);line-height:1.6;max-width:96ch}
.csnote svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:1.8;flex:none;margin-top:2px}
@media (max-width:980px){.csgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.csgrid{grid-template-columns:1fr}}


/* ============ client marquee: quieter, and it stops when you look at it ============ */
/* The rows fade out at both edges so logos leave the frame rather than being
   sliced by it, and the whole band halts on hover so a name can be read. */
.mq{--mq-fade:clamp(40px,7vw,110px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent 100%)}
.mq-row+.mq-row{margin-top:clamp(30px,3.6vw,50px)}
.mq-track{animation-play-state:running}
.mq:hover .mq-track{animation-play-state:paused}
.mq img{filter:grayscale(1);opacity:.42;
  transition:opacity .45s var(--ease),filter .45s var(--ease),transform .45s var(--ease-soft)}
.mq:hover img{opacity:.3}
.mq img:hover{opacity:1;filter:grayscale(0);transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .mq img{transition:none}
  .mq:hover img{opacity:.42}
  .mq img:hover{opacity:1;transform:none}
}


/* ============ client band label: centred caption, ruled on both sides ============ */
.mqband{padding-block:clamp(30px,3.4vw,46px) clamp(26px,3vw,40px)}
.mqband .wrap{margin-bottom:clamp(22px,2.6vw,34px)}
.band-lab{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:12px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--meta);text-align:center;line-height:1.5;margin:0}
.band-lab span{font-weight:500;letter-spacing:.2em;color:var(--navy)}
.band-lab::before,.band-lab::after{content:'';flex:0 1 clamp(22px,7vw,104px);height:1px;background:var(--rule)}
@media (max-width:640px){
  .band-lab{flex-wrap:wrap;font-size:11px}
  .band-lab::before,.band-lab::after{flex-basis:20px}
}


/* ============ client logos: one height everywhere ============ */
/* Logos were rendering at natural size on the pages the band was copied to,
   so a tall wordmark could run 120px+ while the homepage sat at 34px. */
/* The homepage sizes each logo by hand (inline width/height) so a stacked
   wordmark and a wide one look equally weighted. The extracted logos carry no
   such sizing, so a box constrains them instead: wide marks hit the width cap,
   tall marks hit the height cap, and the optical range matches the homepage. */
.mq .mq-set img[style*="height"]{max-height:none;max-width:none}
.mq .mq-set img:not([style*="height"]){
  height:auto;width:auto;max-height:34px;max-width:124px;object-fit:contain;flex:0 0 auto}
@media (max-width:640px){.mq .mq-set img:not([style*="height"]){max-height:27px;max-width:100px}}

/* the measure cap on paragraphs was leaving the caption narrow and left-set */
.band-lab{max-width:none;width:100%;margin-inline:auto}


/* the duotone was written for image-slot only; real <img> needs the same step */
.nnimg.is-filled img{filter:grayscale(1) contrast(1.05)}
.nnimg--raw.is-filled img{filter:none}

/* ============ speaking interlude (About) ============ */
/* Overlapping editorial split: the copy panel sits over the photograph rather
   than beneath it, so the block reads as one composition, not an image plus a caption. */
.speak{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;margin:0}
.speak-img{grid-column:4 / 13;grid-row:1;position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--rule)}
.speak-img img{width:100%;height:100%;object-fit:cover;object-position:58% 74%;display:block}
.speak-txt{grid-column:1 / 7;grid-row:1;z-index:1;background:var(--paper);
  border:1px solid var(--rule);border-top:2px solid var(--navy);
  padding:clamp(26px,3vw,40px) clamp(24px,2.8vw,38px) clamp(22px,2.6vw,32px)}
.speak-k{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.speak-k i{width:22px;height:1px;background:var(--teal);flex:none}
.speak-k span{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--teal)}
.speak-txt h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.2;letter-spacing:.01em;color:var(--navy);text-wrap:balance}
.speak-txt h2 em{font-style:normal;color:var(--teal)}
.speak-txt>p{font-size:13.5px;line-height:1.68;color:var(--body);margin-top:15px;max-width:46ch;text-wrap:pretty}
.speak-cr{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}
.speak-cr b{display:block;font-size:13px;font-weight:500;color:var(--navy)}
.speak-cr span{display:block;font-size:11.5px;line-height:1.55;color:var(--meta)}
.speak-cr b+span{margin-top:4px}
@media (max-width:900px){
  .speak{grid-template-columns:1fr;gap:0}
  .speak-img{grid-column:1;grid-row:1;aspect-ratio:3/2}
  .speak-txt{grid-column:1;grid-row:2;margin:-28px 16px 0;z-index:1}
}
@media (max-width:520px){.speak-txt{margin:-20px 0 0}}




/* ============ client logos: equal optical weight ============ */
/* ---- the logo wall: normalised by rendered area ----
   Capping every mark at one pixel HEIGHT made square lockups tiny: a 30x30 badge
   next to a 150x23 wordmark reads as half the logo. Each mark is sized so its
   rendered area is comparable instead, clamped to 24-48px tall and 150px wide.
   Weight is handled separately by the opacity pass below. */
.mq .mq-set img[src$="logo-01.png"]{height:30.6px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-02.png"]{height:34.3px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-03.png"]{height:31.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-04.png"]{height:27.2px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-05.png"]{height:31.9px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-06.png"]{height:34.7px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-07.png"]{height:33.5px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-08.png"]{height:31.7px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-09.png"]{height:27.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-10.png"]{height:27.6px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-11.png"]{height:38.4px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-12.png"]{height:24.9px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-13.png"]{height:44.2px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-14.png"]{height:43.8px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-15.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-16.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-17.png"]{height:28.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-18.png"]{height:34.5px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-19.png"]{height:45.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-20.png"]{height:27.3px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-21.png"]{height:28.5px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-22.png"]{height:24.9px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-23.png"]{height:33.8px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-24.png"]{height:30.7px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-25.png"]{height:44.7px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-26.png"]{height:44.8px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-27.png"]{height:31.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-28.png"]{height:31px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-29.png"]{height:38.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-30.png"]{height:41.6px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-31.png"]{height:28.5px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-32.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-33.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-34.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-35.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-36.png"]{height:48px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-37.png"]{height:25.7px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-38.png"]{height:24px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-39.png"]{height:25px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-40.png"]{height:24.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-41.png"]{height:28.9px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-42.png"]{height:40.3px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-43.png"]{height:37.6px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-44.png"]{height:33.1px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-45.png"]{height:26.9px !important;max-height:none !important;max-width:none !important}
.mq .mq-set img[src$="logo-46.png"]{height:34.6px !important;max-height:none !important;max-width:none !important}
@media (max-width:640px){.mq .mq-set img{transform:scale(.74);transform-origin:center}}


/* ============ per-logo optical compensation ============ */
/* Size alone cannot equalise these: raw ink coverage across the set spans
   2.9% to 70.6% (24.8x), so a sparse brushmark and a solid reversed-out
   wordmark render at wildly different weights even at identical box area.
   Each value below scales the band's base .42 opacity by sqrt(median / that
   logo's composited ink), which lifts the faint marks and holds back the
   heavy ones. Measured from the rendered files. */
.mq img[src$="logo-35.png"]{opacity:0.96}
.mq img[src$="logo-43.png"]{opacity:0.423}
.mq img[src$="logo-18.png"]{opacity:0.707}
.mq img[src$="logo-15.png"]{opacity:0.657}
.mq img[src$="logo-14.png"]{opacity:0.617}
.mq img[src$="logo-16.png"]{opacity:0.616}
.mq img[src$="logo-32.png"]{opacity:0.579}
.mq img[src$="logo-25.png"]{opacity:0.559}
.mq img[src$="logo-33.png"]{opacity:0.55}
.mq img[src$="logo-20.png"]{opacity:0.506}
.mq img[src$="logo-04.png"]{opacity:0.503}
.mq img[src$="logo-23.png"]{opacity:0.493}
.mq img[src$="logo-31.png"]{opacity:0.486}
.mq img[src$="logo-07.png"]{opacity:0.479}
.mq img[src$="logo-06.png"]{opacity:0.469}
.mq img[src$="logo-01.png"]{opacity:0.454}
.mq img[src$="logo-03.png"]{opacity:0.452}
.mq img[src$="logo-24.png"]{opacity:0.439}
.mq img[src$="logo-13.png"]{opacity:0.433}
.mq img[src$="logo-19.png"]{opacity:0.433}
.mq img[src$="logo-08.png"]{opacity:0.427}
.mq img[src$="logo-41.png"]{opacity:0.424}
.mq img[src$="logo-21.png"]{opacity:0.42}
.mq img[src$="logo-05.png"]{opacity:0.412}
.mq img[src$="logo-34.png"]{opacity:0.404}
.mq img[src$="logo-12.png"]{opacity:0.4}
.mq img[src$="logo-17.png"]{opacity:0.395}
.mq img[src$="logo-28.png"]{opacity:0.394}
.mq img[src$="logo-26.png"]{opacity:0.39}
.mq img[src$="logo-02.png"]{opacity:0.381}
.mq img[src$="logo-27.png"]{opacity:0.361}
.mq img[src$="logo-11.png"]{opacity:0.354}
.mq img[src$="logo-10.png"]{opacity:0.333}
.mq img[src$="logo-39.png"]{opacity:0.331}
.mq img[src$="logo-30.png"]{opacity:0.329}
.mq img[src$="logo-09.png"]{opacity:0.324}
.mq img[src$="logo-44.png"]{opacity:0.319}
.mq img[src$="logo-45.png"]{opacity:0.447}
.mq img[src$="logo-46.png"]{opacity:0.364}
.mq img[src$="logo-40.png"]{opacity:0.313}
.mq img[src$="logo-37.png"]{opacity:0.289}
.mq img[src$="logo-42.png"]{opacity:0.288}
.mq img[src$="logo-38.png"]{opacity:0.278}
.mq img[src$="logo-22.png"]{opacity:0.26}
.mq img[src$="logo-29.png"]{opacity:0.26}
.mq img[src$="logo-36.png"]{opacity:0.26}
/* hover still resolves to full strength for every logo */
.mq img[src$=".png"]:hover{opacity:1 !important}


/* ============ cross-page navigation wipe ============ */



/* ============================================================
   HOVER SYSTEM - one language, applied to every block
   Three responses only, chosen by what the block already is:
     1. bordered card  -> lifts 4px, hairline warms, Ochre rule draws across the top
     2. flat cell in a hairline grid -> ground lightens (or deepens on Shrub)
     3. children of a hovered block  -> accent type brightens, arrows travel
   Timing is shared so no two sections feel differently tuned.
   ============================================================ */

/* ---- 1. bordered cards: the same lift everywhere ---- */
.case,.cscard,.post,.mem-card,.vcard{
  transition:transform .34s var(--ease-soft),border-color .34s var(--ease),background .34s var(--ease)}
.case:hover,.cscard:hover,.post:hover,.mem-card:hover,.vcard:hover{
  transform:translateY(-4px);border-color:#658481}
.case{position:relative;overflow:hidden}
.case::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:#C79A3C;
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-line);z-index:1}
.case:hover::before{transform:scaleX(1)}
.cscard{position:relative;overflow:hidden}
.cscard::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:#C79A3C;
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-line);z-index:1}
.cscard:hover::before{transform:scaleX(1)}
.post{position:relative;overflow:hidden}
.post::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:#C79A3C;
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-line);z-index:1}
.post:hover::before{transform:scaleX(1)}
.mem-card{position:relative;overflow:hidden}
.mem-card::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:#C79A3C;
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-line);z-index:1}
.mem-card:hover::before{transform:scaleX(1)}
.vcard{position:relative;overflow:hidden}
.vcard::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:#C79A3C;
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-line);z-index:1}
.vcard:hover::before{transform:scaleX(1)}

/* ---- 2. flat cells: ground shifts, never a border ---- */
.artband{transition:background .34s var(--ease)}
.artband:hover{background:var(--white)}
.artband-img{overflow:hidden}
.artband-img img,.artband-img image-slot{transition:transform .7s var(--ease-soft)}
.artband:hover .artband-img img,.artband:hover .artband-img image-slot{transform:scale(1.028)}

/* ---- 3. children respond to the parent, they are not targets themselves ---- */
/* accent figures and labels brighten */
.case:hover .case-fig,.cscard:hover .csfig{color:#C79A3C;transition:color .34s var(--ease)}
.case-fig,.case-lab,.tier-lab,.pcard-lab,.post-cat{transition:color .34s var(--ease)}
.tier:hover .tier-lab,.pcard:hover .pcard-lab,.post:hover .post-cat{color:#073737}
.sec--navy .case:hover .case-fig{color:#C79A3C}
/* dark cells: the outcome line warms */
.cad-out,.models-use{transition:color .34s var(--ease)}
.cad>div:hover .cad-out,.models>div:hover .models-use{color:#C79A3C}
/* the total row in a dossier sheet firms up when its sheet is in hand */
.dsh-r--tot{transition:color .34s var(--ease),border-color .34s var(--ease)}
.dsh.is-front .dsh-r--tot{border-color:#658481}
/* arrows travel on any hovered block that contains one */
.case:hover .csgo svg,.cscard:hover .csgo svg,.post:hover .p-go svg{transform:translateX(5px)}

/* ---- section labels: the hairline extends when its section is entered ---- */
.scope-lab i,.snap-lab i,.next-lab i,.band-lab i,.statrow-lab i{
  transition:background .45s var(--ease)}
.scope:hover .scope-lab i,.snap:hover .snap-lab i{background:#658481}

/* ---- form rows ---- */
.field-row label,.field-row .fl{transition:color .3s var(--ease)}
.field-row:focus-within label,.field-row:focus-within .fl{color:#073737}

@media (prefers-reduced-motion:reduce){
  .case,.cscard,.post,.mem-card,.vcard,.artband{transition:none}
  .case:hover,.cscard:hover,.post:hover,.mem-card:hover,.vcard:hover{transform:none}
  .artband:hover .artband-img img,.artband:hover .artband-img image-slot{transform:none}
}


/* ---- hover system, part 2: rows and dark cells ----
   These report no transition of their own, so their hover states were snapping.
   Same 340ms timing as the cards, so the whole page feels tuned together. */
.snap-row{transition:background .34s var(--ease)}
.snap-row>.snap-k,.snap-row>.snap-v{transition:color .34s var(--ease),transform .34s var(--ease-soft)}
.cad>div,.models>div,.statrow>div,.eng-item,.tmpl,.faq>div{
  transition:background .34s var(--ease)}
.scope-row{transition:border-bottom-color .3s var(--ease),background .34s var(--ease)}
/* card-like blocks keep their own, faster timing rather than the reveal's */
.card,.tier,.pcard{transition:transform .34s var(--ease-soft),border-color .34s var(--ease),background .34s var(--ease)}


/* ============================================================
   CASE STUDY ANATOMY
   Artefact sequence, a four-field spec bar, workstream tags, and the
   engagement told as three acts. Flat panels and hairlines only.
   ============================================================ */

/* ---- artefacts shown in sequence, each captioned by what it is ---- */
.case-seq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:22px}
.case-seq figure{margin:0;display:flex;flex-direction:column;gap:9px}
.case-seq .case-shot{margin:0}
.case-seq figcaption{font-size:11.5px;line-height:1.5;color:var(--meta)}
.case-seq figcaption b{display:block;font-weight:500;color:var(--navy);font-size:12px;margin-bottom:2px}
.case-seq .seq-n{font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--teal);
  font-variant-numeric:tabular-nums;margin-right:6px}
@media (max-width:700px){.case-seq{grid-template-columns:1fr}}

/* ---- four-field spec bar ---- */
.case-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;margin:18px 0 22px}
.case-spec>div{background:var(--paper);padding:13px 14px}
.case-spec dt{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.case-spec dd{margin:5px 0 0;font-size:13px;font-weight:500;color:var(--navy);line-height:1.35}
@media (max-width:700px){.case-spec{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- workstream tags: what was actually done, not the service name ---- */
.case-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.case-tags span{font-size:10.5px;font-weight:500;letter-spacing:.1em;padding:5px 9px;
  border:1px solid var(--rule);border-radius:2px;color:var(--body);background:var(--paper);
  transition:border-color .34s var(--ease),color .34s var(--ease)}
.case:hover .case-tags span{border-color:var(--teal-2);color:var(--navy)}

/* ---- three acts ---- */
.case-act+.case-act{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule)}
.case-act h4{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.case-act p{font-size:14px;line-height:1.65;color:var(--body)}
.case-act p+p{margin-top:10px}
/* the client, before a word about ourselves */
.case-who{font-size:14px;line-height:1.65;color:var(--navy);margin-bottom:18px}
/* the objection, in the words it was put to us */
.case-obj{margin:0 0 12px;padding-left:16px;border-left:2px solid var(--teal-2);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.16rem;line-height:1.45;color:var(--navy)}
/* the process led by what we refused to do */
.case-refuse{font-size:13px;line-height:1.6;color:var(--navy);background:var(--tint);
  border-radius:2px;padding:13px 15px;margin-bottom:14px}
.case-refuse b{font-weight:500}
.case-steps{list-style:none;margin:0;padding:0;counter-reset:cs}
.case-steps li{position:relative;padding-left:30px;font-size:13.5px;line-height:1.6;color:var(--body)}
.case-steps li+li{margin-top:10px}
.case-steps li::before{counter-increment:cs;content:counter(cs,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:10.5px;font-weight:500;color:var(--teal);font-variant-numeric:tabular-nums}

/* ---- attributed quote ---- */
.case-quote{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.case-quote blockquote{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.24rem;
  line-height:1.45;color:var(--navy)}
.case-quote figcaption{margin-top:11px;font-size:12px;color:var(--meta);line-height:1.5}
.case-quote figcaption b{display:block;font-weight:500;color:var(--navy);font-size:12.5px}
.case-pending{margin-top:9px;font-size:11px;line-height:1.5;color:var(--meta);display:flex;gap:7px}
.case-pending svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;margin-top:2px}

/* ---- other engagements, as a run of names ---- */
.case-run{margin-top:clamp(30px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--rule)}
.case-run .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-bottom:12px}
.case-run p{font-size:14.5px;line-height:1.9;color:var(--navy)}
.case-run p span{color:var(--meta)}


/* ============================================================
   BOOKING: choice of route, calendar, screening, consent
   ============================================================ */
.bkchoose{display:flex;gap:9px;margin-bottom:clamp(24px,2.6vw,32px)}
.bkchoose button{flex:1;font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:.03em;
  padding:14px 16px;border:1px solid var(--rule);border-radius:2px;background:transparent;color:var(--body);
  cursor:pointer;text-align:left;transition:border-color .34s var(--ease),color .34s var(--ease),background .34s var(--ease)}
.bkchoose button b{display:block;font-weight:500;color:var(--navy);margin-bottom:3px}
.bkchoose button span{font-size:11.5px;color:var(--meta)}
.bkchoose button:hover{border-color:var(--teal-2)}
.bkchoose button[aria-pressed="true"]{border-color:var(--navy);background:var(--white)}
.bkchoose button[aria-pressed="true"] b{color:var(--navy)}
@media (max-width:640px){.bkchoose{flex-direction:column}}

/* calendar embed frame - no spinner, the ground shows until it loads */
.bkcal{border:1px solid var(--rule);border-radius:2px;background:var(--white);overflow:hidden}
.bkcal-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 18px;border-bottom:1px solid var(--rule)}
.bkcal-h .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.bkcal-h .t{font-size:12px;color:var(--meta)}
.bkcal-body{min-height:520px;position:relative;background:var(--paper)}
.bkcal-body iframe{width:100%;height:100%;min-height:520px;border:0;display:block}
.bkcal-set{padding:clamp(26px,3vw,40px);text-align:left;max-width:56ch}
.bkcal-set h4{font-size:1.06rem;font-weight:600;margin-bottom:10px}
.bkcal-set p{font-size:13.5px;line-height:1.65;color:var(--body)}
.bkcal-set code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--tint);
  padding:2px 6px;border-radius:2px;color:var(--navy)}
.bkcal-set p+p{margin-top:11px}

/* screening statement */
  background:var(--tint);padding:clamp(20px,2.2vw,26px)}

/* consent line under the submit */
.form-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12px;line-height:1.6;color:var(--meta)}
.form-consent input{margin:2px 0 0;accent-color:var(--navy);flex:none}
.form-consent a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}


/* ============================================================
   PRICING: term toggle, partner cell, instalments, awkward FAQ
   ============================================================ */
.pterm{display:inline-flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:2px;margin-bottom:clamp(22px,2.4vw,30px)}
.pterm button{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;
  padding:10px 16px;border:0;background:var(--paper);color:var(--body);cursor:pointer;
  transition:background .34s var(--ease),color .34s var(--ease)}
.pterm button[aria-pressed="true"]{background:var(--navy);color:var(--paper)}
/* the note belongs to the chips above it, so it stays tucked under them and the
   clear break goes below, before the cards */
.pterm-note{font-size:12px;color:var(--meta);margin:8px 0 26px;line-height:1.6}

/* a partner cell sitting inside the price grid rather than beside it */
.pcard--partner{background:var(--navy);border-color:var(--navy);color:var(--paper);display:flex;flex-direction:column}
.pcard--partner .pcard-lab{color:var(--teal-2)}
.pcard--partner h3,.pcard--partner .pcard-rng{color:var(--paper)}
.pcard--partner .pcard-what{color:rgba(234,239,233,.76)}
.pcard--partner .pcard-who{display:flex;align-items:center;gap:13px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--rule-dark)}
.pcard--partner .pcard-who .nnimg{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden}
.pcard--partner .pcard-who b{display:block;font-size:13px;font-weight:500;color:var(--paper)}
.pcard--partner .pcard-who span{font-size:11.5px;color:rgba(234,239,233,.7)}

/* instalments and the two ways to proceed */
.pinst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;margin-top:clamp(30px,3.4vw,44px)}
.pinst>div{background:var(--paper);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column}
.pinst .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.pinst h3{font-size:1.08rem;font-weight:600;margin-bottom:9px}
.pinst p{font-size:13.5px;line-height:1.65;color:var(--body);margin-bottom:16px}
.pinst .btn{margin-top:auto;align-self:flex-start}
/* one of the two routes is the one we would pick, so it is stated rather than implied */
.pinst>div.pinst--lead{background:var(--navy)}
.pinst--lead .k{color:var(--teal-2)}
.pinst--lead h3{color:#EAEFE9}
.pinst--lead p{color:rgba(234,239,233,.74)}
/* the flag must not drive the header height, or the flagged card's whole stack
   drops below its neighbour's across the divider */
.pinst .k{display:flex;align-items:center;gap:12px;min-height:24px}
.pinst .k em{font-style:normal;flex:none;margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  line-height:1;padding:5px 8px;border-radius:2px;background:var(--teal-2);color:var(--navy-deep)}
@media (max-width:700px){.pinst{grid-template-columns:1fr}}

/* the awkward question, answered rather than avoided */
.pfaq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px}
.pfaq>div{background:var(--paper);padding:clamp(20px,2.2vw,26px);transition:background .34s var(--ease)}
.pfaq>div:hover{background:var(--white)}
.pfaq h3{font-size:1rem;font-weight:600;margin-bottom:9px}
.pfaq p{font-size:13.5px;line-height:1.68;color:var(--body)}
.pfaq p+p{margin-top:9px}
@media (max-width:760px){.pfaq{grid-template-columns:1fr}}


/* ============================================================
   HOMEPAGE: indexed service table, counted principles, criteria,
   figures about the reader, two exits
   ============================================================ */
/* [07] the services as an index rather than six cards */
/* the table bleeds 14px into the gutter so a hovered row has a lead-in and does not
   start flush against its own first character */
.svctbl{width:calc(100% + 28px);margin-inline:-14px;border-collapse:collapse}
.svctbl th:first-child,.svctbl td:first-child{padding-left:14px}
.svctbl th:last-child,.svctbl td:last-child{padding-right:14px}
.svctbl th{text-align:left;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--meta);padding:0 16px 13px 0;border-bottom:1px solid var(--rule)}
.svctbl th:first-child{width:26%}
.svctbl th:nth-child(3){width:24%}
.svctbl th:last-child{width:44px}
.svctbl td{padding:19px 16px 19px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.svctbl tr:last-child td{border-bottom:0}
/* an ochre marker grows down the left edge of the live row */
.svctbl tbody td:first-child{position:relative}
.svctbl tbody td:first-child::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--teal-2);transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .4s var(--ease-soft)}
.svctbl tbody tr:hover td:first-child::before{transform:scaleY(1)}
.svctbl .nm{font-size:15.5px;font-weight:500;color:var(--navy);transition:color .34s var(--ease)}
.svctbl .ds{font-size:13.5px;line-height:1.55;color:var(--body);transition:color .34s var(--ease)}
.svctbl .wh{font-size:12.5px;line-height:1.5;color:var(--meta);transition:color .34s var(--ease)}
.svctbl tbody tr:hover .wh{color:var(--teal)}
.svctbl .go svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .38s var(--ease-soft),stroke .34s var(--ease)}
.svctbl tbody tr{transition:background .34s var(--ease);cursor:pointer}
/* the whole row is the target, so the whole row answers: ground, marker, type, arrow */
.svctbl tbody tr:hover{background:var(--tint)}
.svctbl tbody tr:hover .nm{color:var(--teal)}
.svctbl tbody tr:hover .ds{color:var(--navy)}
.svctbl tbody tr:hover .go svg{transform:translateX(7px);stroke:var(--teal-2)}
.svctbl tbody tr:focus-within{background:var(--tint)}
.svctbl tbody tr:focus-within td:first-child::before{transform:scaleY(1)}
.svctbl a{display:block}
@media (max-width:760px){
  .svctbl th:nth-child(2),.svctbl td:nth-child(2),
  .svctbl th:nth-child(3),.svctbl td:nth-child(3){display:none}
  .svctbl th:first-child{width:auto}
  .svctbl .nm{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .svctbl tbody td:first-child::before,.svctbl .go svg{transition:none}
}

/* [85] three counted principles, set in the same open-column language as the
   reader figures above: no drawn boxes, inset hairlines, a ground that rises on hover */
.prin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:none;
  border-top:1px solid var(--rule-dark)}
.prin>div{position:relative;isolation:isolate;z-index:0;background:none;display:flex;flex-direction:column;
  padding:clamp(30px,3.6vw,46px) clamp(20px,2.6vw,34px) clamp(8px,1.2vw,14px) 0}
.prin>div+div{padding-left:clamp(24px,3vw,40px)}
.prin>div+div::before{content:'';position:absolute;left:0;top:clamp(30px,3.6vw,46px);bottom:clamp(10px,1.4vw,18px);
  width:1px;background:var(--rule-dark);transform-origin:50% 0;
  transition:opacity .4s var(--ease),transform .5s var(--ease-soft)}
/* no filled panel here: the section sits on a photograph, and a translucent slab
   reads as a band. The hover lives in the numeral, the rule and the copy. */
.prin>div+div:hover::before{background:var(--teal-2);opacity:.7}
.prin .n{font-family:'Jost',system-ui,sans-serif;font-weight:300;letter-spacing:-.03em;
  font-size:clamp(2.2rem,3.6vw,3rem);line-height:.9;color:var(--paper);font-variant-numeric:tabular-nums;
  transition:color .34s var(--ease)}
.prin>div:hover .n{color:var(--teal-2)}
/* the same ochre hairline the figures carry, so the two sections rhyme */
.prin .n::after{content:'';display:block;width:34px;height:2px;margin-top:clamp(18px,2.2vw,26px);
  background:var(--teal-2);transition:width .55s var(--ease-soft)}
.prin>div:hover .n::after{width:min(100%,160px)}
.prin h3{font-size:1.08rem;font-weight:600;color:var(--paper);margin:clamp(18px,2.2vw,26px) 0 11px}
.prin p{font-size:14px;line-height:1.7;color:rgba(234,239,233,.78);max-width:none;text-wrap:pretty;
  transition:color .34s var(--ease)}
.prin>div:hover p{color:rgba(234,239,233,.94)}
.prin .out{margin-top:auto;padding-top:clamp(22px,2.6vw,32px);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(234,239,233,.5);transition:color .34s var(--ease);white-space:nowrap}
@media (max-width:820px){.prin .out{white-space:normal}}
.prin>div:hover .out{color:var(--teal-2)}
@media (max-width:820px){
  .prin{grid-template-columns:1fr}
  .prin>div{padding-left:0;padding-right:0;padding-top:clamp(26px,4vw,34px)}
  .prin>div+div{padding-left:0;border-top:1px solid var(--rule-dark)}
  .prin>div+div::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .prin .n::after,.prin>div+div::before,.prin p{transition:none}
}

/* [69][20] figures about the reader, not about us */
.rfig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rule);background:none;border-radius:0}
.rfig>div{position:relative;display:flex;flex-direction:column;background:none;
  padding:clamp(36px,4.2vw,58px) clamp(24px,3vw,44px) clamp(8px,1.2vw,14px) 0}
.rfig>div+div{padding-left:clamp(24px,3vw,44px)}
/* the dividers are inset hairlines rather than a drawn box, so the figures sit on the page */
.rfig>div+div::before{content:'';position:absolute;left:0;top:clamp(28px,3.2vw,42px);bottom:clamp(10px,1.4vw,18px);
  width:1px;background:var(--rule)}
.rfig .f{font-family:'Jost',system-ui,sans-serif;font-weight:300;letter-spacing:-.035em;
  font-size:clamp(2.8rem,5.2vw,4.3rem);line-height:.9;color:var(--navy);font-variant-numeric:tabular-nums}
/* an ochre hairline carries the accent, and lengthens as the reader moves across */
.rfig .f::after{content:'';display:block;width:34px;height:2px;margin-top:clamp(20px,2.4vw,28px);
  background:var(--teal-2);transition:width .5s var(--ease-soft)}
.rfig>div:hover .f::after{width:58px}
.rfig p{margin-top:clamp(20px,2.4vw,28px);font-size:15.5px;line-height:1.7;color:var(--body);max-width:none;text-wrap:pretty}
.rfig .src{margin-top:auto;padding-top:clamp(26px,3vw,36px);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--meta);line-height:1.6;max-width:none}
@media (max-width:820px){
  .rfig{grid-template-columns:1fr}
  .rfig>div{padding:clamp(24px,4vw,30px) 0;border-top:1px solid var(--rule)}
  .rfig>div:first-child{border-top:0}
  .rfig>div+div{padding-left:0}
  .rfig>div+div::before{display:none}
  .rfig .src{margin-top:18px;padding-top:0}
}
@media (prefers-reduced-motion:reduce){.rfig .f::after{transition:none}}

/* [24][19][71] criteria, and what we are not */
.crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);align-items:stretch}
/* the two columns are read against each other, so they are given opposite weights:
   the qualifying side sits on white under an ochre rule, the exclusions on tint. */
.crit-col{position:relative;padding:clamp(26px,3vw,38px);border:1px solid var(--rule);border-radius:2px;
  background:var(--white)}
.crit-col::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--teal-2)}
.crit-col--no{background:var(--tint)}
.crit-col--no::before{background:var(--rule)}
.crit-lab{display:flex;align-items:center;gap:13px;margin-bottom:clamp(20px,2.2vw,26px);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.crit-lab i{height:1px;background:var(--rule);flex:1}
.crit-lab--no{color:var(--meta)}
.crit ul{list-style:none;margin:0;padding:0}
.crit li{position:relative;padding:0 0 0 32px;font-size:15.5px;line-height:1.7;color:var(--body)}
.crit li+li{margin-top:clamp(14px,1.6vw,18px);padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--rule)}
.crit-col--no li+li{border-top-color:var(--rule)}
.crit li b{display:block;font-weight:600;color:var(--navy);margin-bottom:3px}
.crit li::before{content:'';position:absolute;left:0;top:8px;width:15px;height:15px;background:var(--teal-2);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.crit-col--no li::before{background:var(--meta);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.crit li+li::before{top:calc(clamp(14px,1.6vw,18px) + 8px)}
.crit-note{margin-top:clamp(22px,2.4vw,28px);padding-top:clamp(18px,2vw,22px);border-top:1px solid var(--rule);
  font-size:14.5px;line-height:1.72;color:var(--body)}
.crit-note b{font-weight:500;color:var(--navy)}
@media (max-width:760px){.crit{grid-template-columns:1fr}.crit-col{padding:clamp(22px,5vw,28px)}}

/* [73][74] two exits at the foot, one for each side of the market */
.exits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule-dark);
  margin-top:clamp(30px,3.4vw,44px)}
.exits>div{background:var(--navy);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;
  transition:background .34s var(--ease)}
.exits>div:hover{background:var(--navy-deep)}
.exits .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-2);margin-bottom:11px}
.exits h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.4rem,2.2vw,1.8rem);
  font-weight:500;color:var(--paper);line-height:1.25;margin-bottom:11px}
.exits p{font-size:13.5px;line-height:1.65;color:rgba(234,239,233,.76);margin-bottom:18px}
.exits .btn{margin-top:auto;align-self:flex-start}
@media (max-width:760px){.exits{grid-template-columns:1fr}}


/* ============================================================
   SERVICE PAGES: sticky CTA, named stages, capacity cap,
   a partner vouching, and open engagements
   ============================================================ */
/* [06] sticky bar, only after the hero has gone */
.stickcta{position:fixed;left:0;right:0;bottom:0;z-index:800;background:var(--navy);
  border-top:1px solid var(--rule-dark);transform:translateY(101%);
  transition:transform .42s var(--ease-soft);will-change:transform}
.stickcta.is-on{transform:none}
.stickcta-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:18px}
.stickcta b{font-size:13px;font-weight:500;color:var(--paper)}
.stickcta em{font-style:normal;font-size:11.5px;color:rgba(234,239,233,.62);margin-right:auto}
.stickcta .x{flex:none;background:none;border:0;padding:8px;cursor:pointer;line-height:0;
  color:rgba(234,239,233,.6);transition:color .3s var(--ease)}
.stickcta .x:hover{color:var(--paper)}
.stickcta .x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
@media (max-width:700px){
  .stickcta em{display:none}
  .stickcta-in{padding:10px 16px;gap:12px}
  .stickcta .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.stickcta{transition:none}}

/* [94] stage names as proper nouns */
.cad-name{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#C79A3C;margin-top:5px}

/* [84] the cap, stated as a limit rather than a boast */
.cap{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,40px);align-items:start;
  border:1px solid var(--rule);border-radius:2px;background:var(--white);padding:clamp(22px,2.6vw,32px)}
.cap-fig{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.6rem,4.4vw,3.6rem);
  line-height:.95;color:var(--navy);font-variant-numeric:tabular-nums}
.cap-fig span{display:block;font-family:'Jost',sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-top:9px}
.cap-b h3{font-size:1.06rem;font-weight:600;margin-bottom:10px}
.cap-b p{font-size:13.5px;line-height:1.68;color:var(--body)}
.cap-b p+p{margin-top:9px}
.cap-b b{font-weight:500;color:var(--navy)}
@media (max-width:620px){.cap{grid-template-columns:1fr}}

/* [58][15] a partner vouching, in the first person, at the CTA */
.vouch{display:flex;gap:clamp(16px,2vw,22px);align-items:flex-start;margin-top:clamp(24px,2.8vw,34px);
  padding-top:clamp(22px,2.4vw,28px);border-top:1px solid var(--rule)}
.vouch .nnimg{width:62px;height:62px;flex:none;border-radius:50%;overflow:hidden}
.vouch-b blockquote{margin:0 0 11px;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.45;color:var(--navy)}
.vouch-b .who b{font-size:13px;font-weight:500;color:var(--navy)}
.vouch-b .who{font-size:12px;color:var(--meta);line-height:1.55}
.sec--navy .vouch{border-top-color:var(--rule-dark)}
.sec--navy .vouch-b blockquote{color:var(--paper)}
.sec--navy .vouch-b .who b{color:var(--paper)}
.sec--navy .vouch-b .who{color:rgba(234,239,233,.66)}

/* [93] an engagement that is still running */
.case-open{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
  border:1px solid var(--rule);border-radius:2px;padding:4px 9px;margin-bottom:12px}
.case-open i{width:5px;height:5px;border-radius:50%;background:#C79A3C;flex:none}


/* ============================================================
   ABOUT + RESOURCES additions
   ============================================================ */
.chapter-yr{display:inline}

/* [80] confidentiality as a commitment */
.conf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px}
.conf>div{background:var(--paper);padding:clamp(22px,2.5vw,30px);transition:background .34s var(--ease)}
.conf>div:hover{background:var(--white)}
.conf .k{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:11px}
.conf .k svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.conf h3{font-size:1rem;font-weight:600;margin-bottom:9px}
.conf p{font-size:13.5px;line-height:1.65;color:var(--body)}
@media (max-width:820px){.conf{grid-template-columns:1fr}}

/* [38] a live count beside the filters */
.filtcount{font-size:12px;color:var(--meta);margin-left:auto;align-self:center;white-space:nowrap}
.filtcount b{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}

/* [39] author block on an article card */
.post-by{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}
.post-by .nnimg{width:28px;height:28px;flex:none;border-radius:50%;overflow:hidden}
.post-by b{font-size:12px;font-weight:500;color:var(--navy)}
.post-by span{font-size:11.5px;color:var(--meta)}

/* [40] channels with a published count */
.chan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px}
.chan>a{background:var(--paper);padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:8px;
  transition:background .34s var(--ease)}
.chan>a:hover{background:var(--white)}
.chan .n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.8rem;line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums}
.chan b{font-size:13.5px;font-weight:500;color:var(--navy)}
.chan span{font-size:12px;line-height:1.55;color:var(--body)}
.chan .go{margin-top:auto;padding-top:11px;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);transition:color .3s var(--ease)}
.chan>a:hover .go{color:#C79A3C}
@media (max-width:820px){.chan{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.chan{grid-template-columns:1fr}}

/* [37] the newsletter, named, with its latest issue */
.nlet{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.nlet h2{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:400;line-height:1.08;color:#EAEFE9}
.nlet h2 em{font-style:normal;color:var(--teal-2)}
.nlet .deck{margin-top:20px}
.nlet .next{margin-bottom:clamp(26px,3vw,38px)}
.nlet .next li p{max-width:42ch}
.nlet .sub{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:30px}
.nlet .sub .field{flex:1 1 260px;min-width:0}
.nlet .sub .btn{flex:none}
.nlet-issue{border:1px solid var(--rule-dark);border-radius:2px;padding:clamp(20px,2.2vw,26px)}
.nlet-issue .k{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-2);margin-bottom:12px}
.nlet-issue h3{font-size:1.04rem;font-weight:600;color:var(--paper);margin-bottom:9px;line-height:1.35}
.nlet-issue p{font-size:13px;line-height:1.6;color:rgba(234,239,233,.74)}
.nlet-issue .meta{margin-top:13px;padding-top:12px;border-top:1px solid var(--rule-dark);
  font-size:11.5px;color:rgba(234,239,233,.6)}
@media (max-width:820px){.nlet{grid-template-columns:1fr}.nlet .sub{flex-direction:column;align-items:stretch}.nlet .sub .btn{width:100%}}

/* [45] guest contribution */
.guest{margin-top:clamp(30px,3.4vw,44px);padding-top:24px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.guest p{flex:1;min-width:280px;font-size:13.5px;line-height:1.65;color:var(--body)}
.guest b{font-weight:500;color:var(--navy)}


/* ============================================================
   CASE INDEX: testimonial with an outcome, cross-links
   ============================================================ */
/* [26] a testimonial that carries the client mark and the outcome */
.tout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px}
.tout>figure{margin:0;background:var(--paper);padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;transition:background .34s var(--ease)}
.tout>figure:hover{background:var(--white)}
.tout .mark{height:26px;display:flex;align-items:center;margin-bottom:18px}
.tout .mark .nnimg{height:26px;width:104px}
.tout blockquote{margin:0 0 18px;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.14rem,1.8vw,1.32rem);line-height:1.45;color:var(--navy)}
.tout .res{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;
  padding-bottom:16px;border-bottom:1px solid var(--rule)}
.tout .res b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;line-height:1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.tout .res span{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.tout figcaption{margin-top:auto;font-size:12px;line-height:1.55;color:var(--meta)}
.tout figcaption b{display:block;font-size:12.5px;font-weight:500;color:var(--navy)}
@media (max-width:760px){.tout{grid-template-columns:1fr}}

/* [17] cross-links between engagements */
.xlink{margin-top:clamp(30px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--rule)}
.xlink .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-bottom:14px}
.xlink-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px}
.xlink-row a{background:var(--paper);padding:17px 19px;display:flex;flex-direction:column;gap:6px;
  transition:background .34s var(--ease)}
.xlink-row a:hover{background:var(--white)}
.xlink-row .s{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.xlink-row b{font-size:13.5px;font-weight:500;color:var(--navy)}
.xlink-row span.d{font-size:12px;line-height:1.5;color:var(--body)}
@media (max-width:760px){.xlink-row{grid-template-columns:1fr}}


/* ============================================================
   FREE TOOLS, FULL-BLEED BAND, WORKSPACE GALLERY
   ============================================================ */
/* [34] a calculator that answers a real question, nothing gated */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px}
.calc>div{background:var(--paper);padding:clamp(24px,2.8vw,34px)}
.calc-in .k,.calc-out .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px}
.calc-f{margin-bottom:16px}
.calc-f:last-of-type{margin-bottom:0}
.calc-f label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;
  font-size:12.5px;color:var(--body)}
.calc-f label b{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.calc-f input[type=range]{width:100%;accent-color:#073737;height:22px}
.calc-f input[type=number]{width:100%;font-family:'Jost',sans-serif;font-size:14px;color:var(--navy);
  background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:10px 12px}
.calc-f input[type=number]:focus{outline:0;border-color:var(--teal)}
.calc-out{background:var(--navy) !important;display:flex;flex-direction:column}
.calc-out .k{color:var(--teal-2)}
.calc-fig{font-family:'Jost',system-ui,sans-serif;font-weight:500;font-size:clamp(3.1rem,6.4vw,4.5rem);
  line-height:1;letter-spacing:-.03em;color:var(--paper);font-variant-numeric:tabular-nums}
.calc-unit{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-2);margin-top:10px}
.calc-sub{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-dark);
  font-size:13px;line-height:1.65;color:rgba(234,239,233,.78)}
.calc-note{margin-top:auto;padding-top:18px;font-size:11.5px;line-height:1.6;color:rgba(234,239,233,.55)}
@media (max-width:760px){.calc{grid-template-columns:1fr}}

/* [05] a full-bleed band with a scrim for legibility */
.fbband{position:relative;min-height:clamp(320px,42vw,460px);display:flex;align-items:flex-end;
  background:var(--navy);overflow:hidden;isolation:isolate}
.fbband .nnimg{position:absolute;inset:0;z-index:0}
.fbband .nnimg image-slot{width:100%;height:100%}
.fbband .nnimg{border:0;background:var(--navy)}
.fbband .nnimg img{width:100%;height:100%;object-fit:cover;display:block}
.fbband .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(180deg,rgba(4,31,31,.10) 0%,rgba(4,31,31,.30) 40%,rgba(4,31,31,.72) 68%,rgba(4,31,31,.93) 100%),
    linear-gradient(90deg,rgba(4,31,31,.72) 0%,rgba(4,31,31,.30) 46%,rgba(4,31,31,0) 78%)}
.fbband .in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(30px,4vw,58px) var(--pad);pointer-events:none}
.fbband .in a,.fbband .in .btn,.fbband .in button{pointer-events:auto}
.fbband .k{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal-2);margin-bottom:14px}
.fbband h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.2;color:var(--paper);max-width:24ch}
.fbband p{margin-top:14px;font-size:14px;line-height:1.7;color:rgba(234,239,233,.82);max-width:52ch}

/* [28] workspace gallery, each frame captioned */
.wsgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
/* the caption sits ON the frame, like a label gummed to a print, and the sheet
   lifts off the page when you reach for it */
.wsgal figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:2px;
  border:1px solid var(--rule);background:var(--tint)}
.wsgal .nnimg{position:absolute;inset:0;border:0;overflow:hidden}
.wsgal .nnimg img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-soft)}
.wsgal figure:hover .nnimg img{transform:scale(1.045)}
/* the frame darkens into itself from the bottom up, so the caption has ground
   to sit on without a panel cutting the photograph in half */
.wsgal figure::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(4,31,31,.92) 0%,rgba(4,31,31,.74) 26%,rgba(4,31,31,.3) 55%,rgba(4,31,31,0) 82%);
  transition:opacity .45s var(--ease)}
.wsgal figure:hover::after{opacity:.88}
.wsgal figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(16px,1.8vw,22px) clamp(15px,1.6vw,19px);
  font-size:12px;line-height:1.55;color:rgba(234,239,233,.82);
  transition:transform .5s var(--ease-soft)}
.wsgal figure:hover figcaption{transform:translateY(-3px)}
.wsgal figcaption b{display:block;font-size:13px;font-weight:500;color:#EAEFE9;margin:0 0 4px}
.wsgal figcaption .t>span{display:block}
@media (max-width:760px){.wsgal{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .wsgal figure,.wsgal .nnimg img,.wsgal figcaption,.wsgal figure::after{transition:none}
  .wsgal figure:hover{transform:none;box-shadow:none}
  .wsgal figure:hover .nnimg img{transform:none}
  .wsgal figure:hover figcaption{transform:none}
}

/* the calculator sits on a Shrub section, so its input half inverts too */
.calc--dark{background:var(--rule-dark);border-color:var(--rule-dark)}
.calc--dark .calc-in{background:var(--navy-deep)}
.calc--dark .calc-in .k{color:var(--teal-2)}
.calc--dark .calc-f label{color:rgba(234,239,233,.78)}
.calc--dark .calc-f label b{color:var(--paper)}
.calc--dark .calc-f input[type=range]{accent-color:#C79A3C}


/* ============================================================
   AUDIT FIXES
   ============================================================ */
/* On a Shrub section .scope-col kept its light fill while the text inverted
   to Nil, so the whole column read light-on-light. The panel is the section
   ground here; only the hairlines separate the columns. */
.sec--navy .scope-col,.sec--navy .scope-col--out{background:transparent}
.sec--navy .scope-col .scope-row{border-bottom-color:var(--rule-dark)}
.sec--navy .scope-lab i{background:var(--rule-dark)}

/* keep the partner price cell dark whatever order the pricing rules land in */
.pgrid .pcard--partner{background:var(--navy);border-color:var(--navy)}
.pgrid .pcard--partner .pcard-lab{color:#C79A3C}

/* hover gaps found by the audit: a gallery figure and the library scale cells */
.wsgal figure{transition:transform .5s var(--ease-soft),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.wsgal figure:hover{transform:translateY(-6px);border-color:var(--teal);
  box-shadow:0 20px 44px -24px rgba(4,31,31,.5),0 3px 10px -6px rgba(4,31,31,.3)}

/* .pcard>p.pcard-what (added for the body gap) outranked the partner card's
   own colour, so the description rendered dark on Shrub. Match its specificity. */
.pgrid .pcard--partner>p.pcard-what{color:rgba(234,239,233,.78)}


/* ============================================================
   CONTROLS ON SELF-DARKENING COMPONENTS
   The dark-ground button rules were scoped to .sec--navy, but several
   components paint their own Shrub cell INSIDE a light section, so a ghost
   button in them rendered Shrub-on-Shrub. Scope the inversion to the thing
   that owns the dark surface instead of to the section.
   ============================================================ */
.exits .btn--ghost,.prin .btn--ghost,.pcard--partner .btn--ghost,
.nlet .btn--ghost,.stickcta .btn--ghost,.cad>div .btn--ghost,
.models>div .btn--ghost,.calc-out .btn--ghost,.fbband .btn--ghost,
.nlet-issue .btn--ghost{color:#EAEFE9;border-color:var(--rule-dark)}
.exits .btn--ghost::after,.prin .btn--ghost::after,.pcard--partner .btn--ghost::after,
.nlet .btn--ghost::after,.stickcta .btn--ghost::after,.cad>div .btn--ghost::after,
.models>div .btn--ghost::after,.calc-out .btn--ghost::after,.fbband .btn--ghost::after,
.nlet-issue .btn--ghost::after{background:#EAEFE9}
.exits .btn--ghost:hover,.prin .btn--ghost:hover,.pcard--partner .btn--ghost:hover,
.nlet .btn--ghost:hover,.stickcta .btn--ghost:hover,.cad>div .btn--ghost:hover,
.models>div .btn--ghost:hover,.calc-out .btn--ghost:hover,.fbband .btn--ghost:hover,
.nlet-issue .btn--ghost:hover{color:#073737;border-color:#EAEFE9}

/* inline text links in the same self-darkening cells */
.exits .panel-more,.pcard--partner .panel-more,.prin .panel-more,
.cad>div .panel-more,.models>div .panel-more{color:#C79A3C}


/* ============ [98] case study detail page ============ */
/* the arithmetic, stated as a ledger rather than a paragraph */
.res{border:1px solid var(--rule);border-radius:2px;background:var(--white)}
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.res-grid>div{background:var(--white);padding:clamp(18px,2vw,24px)}
.res-grid--sub{grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.res-k{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);line-height:1.5}
.res-v{margin-top:9px;font-family:'Jost',system-ui,sans-serif;font-size:clamp(1.24rem,1.9vw,1.6rem);
  font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums}
.res-v--neg{color:var(--meta)}
.res-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  padding:clamp(20px,2.2vw,26px) clamp(18px,2vw,24px);background:var(--navy);color:rgba(234,239,233,.74)}
.res-total span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.res-total b{margin-left:auto;font-family:'Jost',system-ui,sans-serif;font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:500;letter-spacing:-.015em;color:var(--teal-2);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .res-grid,.res-grid--sub{grid-template-columns:1fr}
  .res-grid>div{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .res-v{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.cnav a,.cnav a::after{transition:none}}

/* ---- a named case with real evidence: identity, then the number, then proof ---- */
.case--wide{grid-column:1/-1}
/* the client, named, with room for their mark */
.casew-id{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);
  padding-bottom:clamp(16px,1.8vw,22px);margin-bottom:clamp(20px,2.2vw,26px);
  border-bottom:1px solid var(--rule)}
/* the client mark, treated exactly as the logo wall treats it: greyscale and held
   back at rest, full colour when the row is being read */
.casew-logo{width:clamp(74px,7vw,92px);height:clamp(34px,3.2vw,42px);flex:none;
  border:0;border-radius:0;background:transparent;overflow:visible;
  display:flex;align-items:center;justify-content:flex-start}
.casew-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.42;
  transition:filter .45s var(--ease),opacity .45s var(--ease)}
.casefold-s:hover .casew-logo img,.casefold[open] .casew-logo img{filter:grayscale(0);opacity:1}
@media (prefers-reduced-motion:reduce){.casew-logo img{transition:none}}
/* when the client cannot be named, the slot still carries a mark so the row reads
   like its neighbours: a held-back plate that comes forward on open, same as a logo */
.casew-logo--conf{align-items:stretch;justify-content:stretch}
.casew-logo--conf span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:1px dashed var(--rule);background:transparent;
  font-family:'Jost',sans-serif;font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.1;text-align:center;color:var(--meta);opacity:.5;
  transition:opacity .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.casew-logo--conf svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.casefold-s:hover .casew-logo--conf span,.casefold[open] .casew-logo--conf span{opacity:1;color:var(--teal-2);border-color:var(--teal-2)}
@media (prefers-reduced-motion:reduce){.casew-logo--conf span{transition:none}}
.casew-name{min-width:0;flex:1}
.casew-name h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.34rem,2.1vw,1.7rem);line-height:1.1;letter-spacing:-.008em;color:var(--navy)}
.casew-name p{margin:5px 0 0;font-size:11.5px;font-weight:500;letter-spacing:.03em;color:var(--meta)}
.casew-id .case-open{flex:none;margin:0}
.casew{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:start}
.casew-l,.casew-r{min-width:0}
/* the client's question IS the headline; a separate pull-quote only said it twice */
/* the headline fills its column to the rule below it: greedy wrapping, since
   'pretty' pulls a word down to even the last line and leaves a short right edge */
.casew-h{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.44rem,2.4vw,1.92rem);line-height:1.14;letter-spacing:-.01em;color:var(--navy);
  text-wrap:auto;text-wrap-style:auto}
.casew-lede{margin:clamp(13px,1.5vw,17px) 0 0;font-size:15.5px;line-height:1.68;color:var(--body)}
.casew-l>.cdet{margin-top:18px}
.casew-r{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,18px)}
/* the three counts beside the ledger, as a hairline strip */
.res-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:2px}
.res-counts>div{background:var(--white);padding:13px 12px;text-align:center}
.res-counts b{display:block;font-family:'Jost',system-ui,sans-serif;font-size:1.16rem;font-weight:500;
  line-height:1.1;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums}
.res-counts span{display:block;margin-top:6px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);line-height:1.4}
/* the three acts as disclosures: the case reads in six lines, or opens */
.cdet{border-top:1px solid var(--rule)}
.cdet summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  transition:color .3s var(--ease)}
.cdet summary::-webkit-details-marker{display:none}
.cdet summary:hover{color:var(--navy)}
.cdet summary i{position:relative;box-sizing:border-box;width:16px;height:16px;flex:none;
  border:1px solid currentColor;border-radius:2px}
.cdet summary i::before,.cdet summary i::after{content:'';position:absolute;background:currentColor;
  transition:transform .25s var(--ease)}
.cdet summary i::before{left:3px;right:3px;top:calc(50% - .5px);height:1px}
.cdet summary i::after{top:3px;bottom:3px;left:calc(50% - .5px);width:1px}
.cdet[open] summary i::after{transform:scaleY(0)}
.cdet-b{padding-bottom:0;animation:cdetIn .32s var(--ease) both}
.cdet-b>p{font-size:15px;line-height:1.66;color:var(--body)}
.cdet-b>p+*{margin-top:12px}
@keyframes cdetIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* claim, then the sentence that backs it. A stack of hairline rules read as a
   footnote list; the work is the substance of the case, so each item is a counted
   card on its own ground, two up, flush on shared hairlines. */
.cfix{list-style:none;margin:0;padding:0;counter-reset:cfix;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:2px}
.cfix li{counter-increment:cfix;position:relative;background:var(--white);
  padding:clamp(15px,1.8vw,19px);border-bottom:0;transition:background .34s var(--ease)}
.cfix li:hover{background:var(--tint)}
/* the count, set in the figure face and held back so the claim still leads */
.cfix li::before{content:counter(cfix,decimal-leading-zero);display:block;margin-bottom:9px;
  font-family:'Jost',system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:var(--teal);font-variant-numeric:tabular-nums;transition:color .34s var(--ease)}
.cfix li:hover::before{color:var(--navy)}
.cfix b{display:block;font-family:'Jost',system-ui,sans-serif;font-size:14.5px;font-weight:600;
  letter-spacing:-.003em;color:var(--navy);margin-bottom:5px;transition:color .34s var(--ease)}
.cfix li:hover b{color:var(--teal)}
.cfix span{display:block;font-size:14px;line-height:1.6;color:var(--body)}
/* an odd last item takes the full width rather than leaving a hole */
.cfix li:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:820px){.cfix li:last-child:nth-child(odd){grid-column:auto}}
@media (prefers-reduced-motion:reduce){.cfix li,.cfix b,.cfix li::before{transition:none}}
/* the arithmetic as a ledger rather than a paragraph */
.res{border:1px solid var(--rule);border-radius:2px;background:var(--white)}
.res-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
.res-grid>div{background:var(--white);padding:12px clamp(14px,1.5vw,18px);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.res-k{font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);line-height:1.5}
/* the stacked variant above set a 9px top margin; in the centred row that margin
   is part of the item's box and pushes the figure below the label's centre */
.res-v{margin-top:0;font-family:'Jost',system-ui,sans-serif;font-size:1.05rem;font-weight:500;line-height:1.1;
  letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;flex:none}
.res-v--neg{color:var(--meta)}
.res-total{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:15px clamp(14px,1.5vw,18px);background:var(--navy);color:rgba(234,239,233,.74)}
.res-total span{font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.res-total b{margin-left:auto;font-family:'Jost',system-ui,sans-serif;font-size:1.32rem;font-weight:500;
  letter-spacing:-.015em;color:var(--teal-2);font-variant-numeric:tabular-nums}
/* the artefacts: two up, sized as exhibits rather than full-bleed screenshots */
.case-ev{margin-top:clamp(24px,2.8vw,34px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--rule)}
/* the redaction note belongs before the work, not after it */
.case-note--top{margin:0 0 clamp(18px,2vw,24px)}
.case-ev-lab{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,1.6vw,18px);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.case-ev-lab i{height:1px;background:var(--rule);flex:1}
.case-ev-lab em{flex:none;font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--meta)}
.case-ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.case-ev-grid figure{margin:0}
.case-ev-grid .case-shot{position:relative;aspect-ratio:auto;margin:0 0 11px;cursor:zoom-in;display:block;
  max-height:230px;overflow:hidden}
/* The sheet is cropped to an exhibit height. That cut used to be washed out with a
   46px gradient to the section ground, which read as a vignette rather than a crop —
   and on solo shots, which are not cropped at all, it faded the bottom of a complete
   thumbnail for no reason. The frame's own hairline is the crop marker instead. */
.case-ev-grid .case-shot::after{content:none}
.case-ev-grid .case-shot{border-bottom-width:1px}
.case-ev-grid .case-shot img{width:100%;height:auto;display:block}
.case-ev-grid figcaption{font-size:13.5px;line-height:1.58;color:var(--body)}
.case-ev-grid figcaption b{display:block;font-weight:500;color:var(--navy);font-size:14px;margin-bottom:3px;
  letter-spacing:.01em}
@media (max-width:900px){.casew{grid-template-columns:1fr}}
@media (max-width:680px){
  .case-ev-grid{grid-template-columns:1fr}
  .casew-id{flex-wrap:wrap}
  .case-ev-grid .case-shot{max-height:none}
}
@media (prefers-reduced-motion:reduce){.cdet summary,.cdet summary i::before,.cdet summary i::after{transition:none}.cdet-b{animation:none}}

/* ============ [99] cadence timeline ============ */
/* a month laid out along a rail: the rail draws itself, the stages arrive in
   sequence behind it, and the stage under the cursor takes the focus */
.tline{list-style:none;margin:clamp(8px,1.2vw,16px) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
/* the rail carries whatever number of steps a page needs */
.tline--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tline--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tline--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tline--5 .tstep p,.tline--6 .tstep p{max-width:28ch}
.tline::before{content:'';position:absolute;left:0;right:0;top:calc(clamp(22px,2.4vw,28px) + 17px);
  height:1px;background:rgba(122,169,166,.28)}
.tstep{position:relative;padding:0 clamp(16px,2vw,26px) 0 0;
  transition:opacity .5s var(--ease)}
/* the rail segment ahead of this node charges while it is being read */
.tstep::after{content:'';position:absolute;left:17px;right:0;top:calc(clamp(22px,2.4vw,28px) + 17px);
  height:1px;background:var(--teal-2);transform:scaleX(0);transform-origin:left;
  transition:transform .66s var(--ease-soft);pointer-events:none}
.tstep:last-child::after{display:none}
.tstep:hover::after{transform:scaleX(1)}
.tstep-when{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(234,239,233,.66);margin-bottom:clamp(10px,1.2vw,14px);
  transition:color .34s var(--ease)}
.tstep:hover .tstep-when{color:var(--teal-2)}
/* the node: same square chip language as the numbered steps elsewhere */
.tstep-node{position:relative;z-index:2;isolation:isolate;overflow:hidden;
  width:34px;height:34px;border-radius:2px;border:1px solid var(--teal-2);background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--teal-2);
  font-variant-numeric:tabular-nums;
  transition:color .34s var(--ease),transform .55s var(--ease-soft),box-shadow .55s var(--ease)}
.tstep-node i{position:absolute;inset:0;z-index:-1;background:var(--teal-2);
  transform:scaleY(0);transform-origin:bottom;transition:transform .46s var(--ease-soft)}
.tstep:hover .tstep-node{color:var(--navy-deep);transform:translateY(-3px);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.65),0 0 0 5px rgba(122,169,166,.1)}
.tstep:hover .tstep-node i{transform:scaleY(1)}
.tstep-b{margin-top:clamp(16px,1.8vw,22px);
  transition:transform .55s var(--ease-soft) .05s}
.tstep:hover .tstep-b{transform:translateY(-3px)}
/* the label row is reserved even when a step has no phase name of its own, so
   titles, body copy and output rules stay on shared baselines across the row */
.tstep-ph{height:15px;line-height:15px;font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(234,239,233,.7);margin-bottom:7px;transition:color .34s var(--ease)}
.tstep-ph:empty{visibility:hidden}
.tstep:hover .tstep-ph{color:rgba(234,239,233,.7)}
.tstep h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.3rem,2vw,1.68rem);line-height:1.1;letter-spacing:-.008em;color:#EAEFE9;
  transition:color .34s var(--ease)}
.tstep:hover h3{color:var(--teal-2)}
.tstep p{margin:9px 0 0;font-size:13px;line-height:1.68;color:rgba(234,239,233,.66);max-width:34ch}
.tstep-out{margin-top:clamp(12px,1.4vw,16px);padding-top:11px;border-top:1px solid var(--rule-dark);
  display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.02em;color:var(--teal-2);
  transition:border-color .4s var(--ease)}
.tstep-out::before{content:'';display:block;width:11px;height:1px;background:var(--teal-2);flex:none}
.tstep:hover .tstep-out{border-color:rgba(122,169,166,.42)}
/* the stages not being read recede, but stay legible on the navy ground */
.tline:hover .tstep{opacity:.62}
.tline:hover .tstep:hover{opacity:1}
@media (max-width:900px){
  .tline{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,40px) 0}
  .tline::before,.tstep::after{display:none}
  .tstep{padding-right:clamp(18px,2.4vw,28px)}
}
@media (max-width:560px){
  .tline{grid-template-columns:1fr}
  .tstep p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .tstep{transition:none}
  .tstep::after,.tstep-node i{transition:none}
  .tstep-node,.tstep-b,.tstep-when,.tstep-ph,.tstep h3{transition:none}
  .tstep:hover .tstep-node,.tstep:hover .tstep-b{transform:none}
  .tline:hover .tstep{opacity:1}
}

/* ============ [100] scope columns: the included side leads ============ */
/* the cap-and-shadow treatment read as a foreign component. The site already has
   a device for "this is the main one": a Shrub-filled card among light ones, the
   same as .card--core in the services grid. */
.scope-col{position:relative;background:var(--navy);border-color:var(--navy);box-shadow:none;
  transition:border-color .4s var(--ease)}
.scope-col::before{display:none}
.scope-col .scope-lab{color:var(--teal-2)}
.scope-col .scope-lab i{background:var(--rule-dark)}
.scope-col .scope-row{border-bottom-color:var(--rule-dark)}
.scope-col .scope-row b{color:#EAEFE9}
.scope-col .scope-row span{color:rgba(234,239,233,.72)}
.scope-col .scope-row::before{background:var(--teal-2)}
.scope-col .scope-row:hover{border-bottom-color:var(--teal-2)}
/* the excluded column is the annotation beside it: no fill, just a hairline */
.scope-col--out{background:transparent;border-color:var(--rule);border-style:solid;box-shadow:none}
.scope-col--out .scope-lab{color:var(--meta)}
.scope-col--out .scope-lab i{background:var(--rule)}
.scope-col--out .scope-row{border-bottom-color:var(--rule)}
.scope-col--out .scope-row b{color:var(--meta);font-weight:500}
.scope-col--out .scope-row span{color:var(--body)}
.scope-col--out .scope-row::before{background:var(--meta)}
.scope-col--out .scope-row:hover{border-bottom-color:var(--meta)}
/* on a Shrub section the ground is already dark, so the lead column takes a wash
   instead and the hairlines do the separating */
.sec--navy .scope-col{background:rgba(234,239,233,.06);border-color:rgba(122,169,166,.34)}
.sec--navy .scope-col .scope-lab{color:var(--teal-2)}
.sec--navy .scope-col--out{background:transparent;border-color:var(--rule-dark)}
.sec--navy .scope-col--out .scope-lab{color:rgba(234,239,233,.5)}
.sec--navy .scope-col--out .scope-row b{color:rgba(234,239,233,.82)}
.sec--navy .scope-col--out .scope-row span{color:rgba(234,239,233,.6)}
@media (prefers-reduced-motion:reduce){.scope-col{transition:none}}

/* ============ [101] FAQ as a disclosure list ============ */
/* nine open answers in a two-column grid was most of a screen; the questions are
   the index and the answer opens where it is asked */
.faq{display:flex;flex-direction:column;grid-template-columns:none;gap:0;
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.faq>details{background:var(--paper);padding:0;transition:background .3s var(--ease)}
.faq>details+details{border-top:1px solid var(--rule)}
.faq>details:hover,.faq>details[open]{background:var(--white)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2vw,28px);padding:clamp(17px,1.9vw,22px) clamp(18px,2.2vw,26px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1rem;font-weight:500;line-height:1.4;color:var(--navy);
  transition:color .3s var(--ease)}
.faq>details:hover summary h3,.faq>details[open] summary h3{color:var(--teal)}
.faq summary i{position:relative;box-sizing:border-box;width:17px;height:17px;flex:none;
  border:1px solid var(--rule);border-radius:2px;color:var(--teal);
  transition:border-color .3s var(--ease),transform .3s var(--ease-soft)}
.faq>details:hover summary i{border-color:var(--teal)}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;background:currentColor;
  transition:transform .26s var(--ease)}
.faq summary i::before{left:3px;right:3px;top:calc(50% - .5px);height:1px}
.faq summary i::after{top:3px;bottom:3px;left:calc(50% - .5px);width:1px}
.faq>details[open] summary i{border-color:var(--teal)}
.faq>details[open] summary i::after{transform:scaleY(0)}
.faq-a{padding:0 clamp(18px,2.2vw,26px) clamp(19px,2.1vw,24px);
  animation:faqIn .3s var(--ease) both}
.faq-a p{margin:0;max-width:none;color:var(--body);font-size:14.5px;line-height:1.68;
  text-wrap:auto;text-wrap-style:auto}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* on a Shrub ground the panel is the section itself */
.sec--navy .faq{background:transparent;border-color:var(--rule-dark)}
.sec--navy .faq>details{background:transparent}
.sec--navy .faq>details+details{border-top-color:var(--rule-dark)}
.sec--navy .faq>details:hover,.sec--navy .faq>details[open]{background:rgba(234,239,233,.05)}
.sec--navy .faq summary h3{color:#EAEFE9}
.sec--navy .faq>details:hover summary h3,.sec--navy .faq>details[open] summary h3{color:var(--teal-2)}
.sec--navy .faq summary i{border-color:var(--rule-dark);color:var(--teal-2)}
.sec--navy .faq>details:hover summary i,.sec--navy .faq>details[open] summary i{border-color:var(--teal-2)}
.sec--navy .faq-a p{color:rgba(234,239,233,.72)}
@media (prefers-reduced-motion:reduce){
  .faq>details,.faq summary h3,.faq summary i,.faq summary i::before,.faq summary i::after{transition:none}
  .faq-a{animation:none}
}

/* ============ [102] section decks run the full measure ============ */
/* the deck was capped at 72ch and balanced, so it stopped short of the grid it
   introduces; it should align with the cards beneath it */
.deck{max-width:none;text-wrap:auto;text-wrap-style:auto}
/* the split head puts the deck in its own column, which already sets the measure */
.head--split .deck{max-width:none}

/* ============ [103] one section rhythm, everywhere ============ */
/* every seam is the same: 2x --sec. Trimmed from the old value so a section that
   ends on a footnote no longer reads as dead space, without introducing a second
   gap size that makes section starts look uneven. */

/* ============ [104] footnotes run the full measure ============ */
.tiers-note,.case-note,.csnote,.crit-note,.calc-note,.form-note,.route-note,.team-foot p,.case-run p{
  max-width:none;text-wrap:auto;text-wrap-style:auto}

/* ============ [105] body copy fills its container ============ */
/* balance was evening out line lengths inside cards and cells, so text stopped
   short of the divider above it. These all run to the container edge now. */
.card li,.article li,.next p,.cad p,.models p,.tier li,.tier-for,.crit li,.adv-list li,
.scope-row span,.cfix span,.faq-a p,.tstep p{max-width:none;text-wrap:auto;text-wrap-style:auto}

/* ============ [106] the highlighted volume band ============ */
/* .tier li lands later in the file with equal specificity, so these carry the
   doubled class to win. Shrub fill, the same device as the lead service card. */
.tier.tier--mid{background:var(--navy);border-color:var(--navy)}
.tier.tier--mid .tier-lab{color:var(--teal-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tier.tier--mid .tier-lab em{display:inline-block;font-style:normal;font-size:8.5px;letter-spacing:.16em;
  line-height:1;padding:4px 7px;border-radius:2px;background:var(--teal-2);color:var(--navy-deep)}
.tier-lab em{display:none}
.tier.tier--mid h3{color:#EAEFE9}
.tier.tier--mid .tier-price{color:#EAEFE9}
.tier.tier--mid .tier-price em,.tier.tier--mid .tier-price span{color:rgba(234,239,233,.62)}
.tier.tier--mid .tier-for{color:rgba(234,239,233,.72);border-top-color:var(--rule-dark)}
.tier.tier--mid li{color:rgba(234,239,233,.76)}
.tier.tier--mid li b{color:#EAEFE9}
.tier.tier--mid li::before{background:var(--teal-2)}
.tier.tier--mid:hover{border-color:var(--teal-2)}

/* ============ [107] catch-up and cleanup, priced per transaction ============ */
/* the fee and the sentence that qualifies it share one baseline; the conditions
   run along the foot as a single line rather than three cells of prose */
.catchup{background:var(--white);border:1px solid var(--rule);border-radius:2px;
  margin-top:clamp(16px,1.8vw,22px);transition:border-color .4s var(--ease)}
.catchup:hover{border-color:#658481}
.catchup-top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;padding:clamp(18px,2.1vw,24px) clamp(22px,2.6vw,32px)}
/* one baseline: FROM, the figure, and the unit sit on the same line as the copy */
.catchup-p{display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap;white-space:nowrap}
.catchup-p span{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.catchup-p b{font-family:'Jost',system-ui,sans-serif;font-size:clamp(1.72rem,2.8vw,2.3rem);font-weight:500;
  letter-spacing:-.02em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.catchup-p em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--meta)}
.catchup-top p{margin:0;font-size:13.5px;line-height:1.72;color:var(--body)}
/* the conditions, as a run of terms under their own hairline */
.catchup-foot{display:flex;flex-wrap:wrap;align-items:center;gap:9px clamp(26px,3.4vw,46px);
  padding:13px clamp(22px,2.6vw,32px);border-top:1px solid var(--rule);background:var(--tint)}
/* no separator glyphs: a wrapped line would strand one at the start of the row,
   so the terms are held apart by space alone */
.catchup-foot span{font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--meta);line-height:1.5}
@media (max-width:820px){
  .catchup-top{grid-template-columns:1fr;gap:14px}
}

/* ============ [108] case ledger: word values and the aside ============ */
/* not every case ends on a currency figure; some end on a word */
.res-v--word{font-size:.98rem;font-weight:500;letter-spacing:0;text-align:right}
.casew-aside{margin:0;font-size:14px;line-height:1.68;color:var(--body)}
/* two wide cases in one section: separate them with the section's own hairline */
.cases .case--wide+.case--wide{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(28px,3.2vw,42px);
  border-top:1px solid var(--rule)}

/* ============ [109] a case study opens only when asked ============ */
/* closed, each case is a docket line: the client, what it was, and the one number
   that settles it. Opening is a deliberate act rather than a scroll tax. */
.cases .case--wide{padding:0;overflow:hidden}
.casefold{display:block}
.casefold-s{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(14px,1.8vw,24px);padding:clamp(18px,2.1vw,26px) clamp(18px,2.2vw,28px);
  transition:background .34s var(--ease)}
.casefold-s::-webkit-details-marker{display:none}
.casefold-s:hover,.casefold[open] .casefold-s{background:var(--tint)}
.casefold-t{min-width:0}
.casefold-t h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.16rem,1.8vw,1.46rem);line-height:1.14;letter-spacing:-.008em;color:var(--navy);
  transition:color .34s var(--ease)}
.casefold-s:hover .casefold-t h3{color:var(--teal)}
.casefold-t p{margin:5px 0 0;font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--meta);
  white-space:nowrap;min-width:0;overflow:hidden;text-overflow:clip}
@media (max-width:820px){.casefold-t p{white-space:normal}}
/* the settling figure, right-aligned, so the row can be read in one pass */
.casefold-fig{text-align:right;min-width:0}
.casefold-fig b{display:block;font-family:'Jost',system-ui,sans-serif;font-size:clamp(1.06rem,1.6vw,1.3rem);
  font-weight:500;letter-spacing:-.012em;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums}
.casefold-fig span{display:block;margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);line-height:1.4}
/* the control: the square chip used on the pricing bands and the FAQ */
.casefold-x{position:relative;box-sizing:border-box;width:26px;height:26px;flex:none;
  border:1px solid var(--rule);border-radius:2px;color:var(--teal);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.casefold-s:hover .casefold-x{border-color:var(--teal);background:var(--white)}
.casefold-x::before,.casefold-x::after{content:'';position:absolute;background:currentColor;
  transition:transform .28s var(--ease-soft)}
.casefold-x::before{left:6px;right:6px;top:calc(50% - .5px);height:1px}
.casefold-x::after{top:6px;bottom:6px;left:calc(50% - .5px);width:1px}
.casefold[open] .casefold-x{border-color:var(--teal)}
.casefold[open] .casefold-x::after{transform:scaleY(0)}
.casefold-b{padding:clamp(6px,1vw,10px) clamp(18px,2.2vw,28px) clamp(22px,2.6vw,32px);
  border-top:1px solid var(--rule);animation:caseIn .36s var(--ease) both}
@keyframes caseIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.casefold-b>.case-note--top{margin-top:clamp(16px,1.8vw,20px)}
/* each case is its own bordered card; the second must keep all four edges */
.cases .case--wide+.case--wide{margin-top:clamp(16px,1.8vw,22px);padding-top:0}
@media (max-width:820px){
  .casefold-s{grid-template-columns:auto minmax(0,1fr) auto;row-gap:14px}
  .casefold-fig{grid-column:1/3;text-align:left}
  .casefold-x{grid-column:3;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  .casefold-s,.casefold-t h3,.casefold-x,.casefold-x::before,.casefold-x::after{transition:none}
  .casefold-b{animation:none}
}

/* ============ [110] hour blocks on the highlighted tier ============ */
/* .tier-hours never set a colour, so on the Shrub-filled band the figure fell to
   the inherited navy and disappeared. State it for both grounds. */
.tier .tier-hours b{color:var(--navy)}
.tier .tier-hours span{color:var(--meta)}
.tier.tier--mid .tier-hours b{color:#EAEFE9}
.tier.tier--mid .tier-hours span{color:rgba(234,239,233,.62)}
.sec--navy .tier .tier-hours b{color:#EAEFE9}
.sec--navy .tier .tier-hours span{color:rgba(234,239,233,.62)}

/* ============ [111] the hour spec, demoted below the fee ============ */
/* on a priced tier the fee is the headline, so the block size becomes a spec line
   rather than a second large figure competing with it */
.tier-hours--sm{display:block;margin:9px 0 0;font-family:inherit;font-size:11.5px;font-weight:500;
  letter-spacing:.03em;color:var(--meta)}
.tier.tier--mid .tier-hours--sm{color:rgba(234,239,233,.62)}

/* ============ [112] a tier quoted rather than listed ============ */
/* the figure slot has to hold words on a bespoke scope, so it drops to the
   heading size and keeps the qualifier on its own line beneath */
.tier-price--txt{display:block;font-size:1.12rem;letter-spacing:-.005em;line-height:1.3}
.tier-price--txt em{display:block;margin-top:4px}

/* ============ [113] adjacent deliverables, named rather than announced ============ */
/* a one-line banner asking "need the deck too?" reads like an ad. Naming the three
   things and letting each be its own quiet target is the same device the scope rows
   and the case exhibits use. */
.also{margin-top:clamp(28px,3.6vw,40px)}
.also-lab{display:flex;align-items:center;gap:12px;margin-bottom:clamp(13px,1.5vw,17px);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.also-lab i{height:1px;background:var(--rule);flex:1}
.also-lab em{flex:none;font-style:normal;font-size:9.5px;letter-spacing:.14em;color:var(--meta)}
.also-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:2px}
.also-c{display:flex;flex-direction:column;background:var(--white);padding:clamp(17px,2vw,22px);
  text-decoration:none;transition:background .34s var(--ease)}
.also-c:hover{background:var(--tint)}
.also-c b{font-family:'Jost',system-ui,sans-serif;font-size:1rem;font-weight:600;color:var(--navy);
  letter-spacing:-.005em;transition:color .34s var(--ease)}
.also-c:hover b{color:var(--teal)}
.also-c span{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--body)}
.also-c i{margin-top:clamp(14px,1.6vw,18px);padding-top:12px;border-top:1px solid var(--rule);
  display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.also-c i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.also-c:hover i svg{transform:translateX(3px)}
@media (max-width:760px){.also-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.also-c,.also-c b,.also-c i svg{transition:none}}

/* ============ [114] partner review, stated on the case ============ */
/* the review is the differentiator on a resourcing engagement, so it sits in the
   right column as its own panel rather than a line of body copy */
.revw{border:1px solid var(--rule);border-radius:2px;background:var(--white);
  padding:clamp(15px,1.8vw,19px);transition:border-color .4s var(--ease)}
.revw:hover{border-color:#658481}
.revw-l{display:flex;align-items:center;gap:11px;margin-bottom:10px;
  font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.revw-l i{height:1px;background:var(--rule);flex:1}
.revw p{margin:0;font-size:12.5px;line-height:1.66;color:var(--body)}
.revw p b{font-weight:600;color:var(--navy)}
.revw a{margin-top:13px;padding-top:12px;border-top:1px solid var(--rule);
  display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);text-decoration:none}
.revw a svg{width:11px;height:11px;fill:currentColor;stroke:none;
  transition:transform .3s var(--ease)}
.revw a:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.revw,.revw a svg{transition:none}}

/* ============ [115] a client review, on the case it belongs to ============ */
/* the review sits in the right column beside the arithmetic it is vouching for,
   built from the same panel parts as the partner-review block */
.cquote{margin:0;border:1px solid var(--rule);border-radius:2px;background:var(--white);
  padding:clamp(15px,1.8vw,19px);transition:border-color .4s var(--ease)}
.cquote:hover{border-color:#658481}
.cquote-stars{display:flex;align-items:center;gap:3px;margin-bottom:11px}
.cquote-stars svg{width:12px;height:12px;fill:var(--teal);stroke:none;flex:none}
.cquote-stars em{margin-left:7px;font-style:normal;font-family:'Jost',system-ui,sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.cquote p{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:15.5px;line-height:1.5;
  color:var(--navy);text-wrap:pretty}
.cquote footer{margin-top:13px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.cquote footer span{display:block;margin-top:4px;font-weight:500;letter-spacing:.1em;color:var(--meta)}
@media (prefers-reduced-motion:reduce){.cquote{transition:none}}

/* ============ [116] a confidential case carries no mark ============ */
/* the summary grid opens with the client logo; when the client cannot be named
   that column has to come out rather than sit empty */
.casefold-s:not(:has(.casew-logo)){grid-template-columns:minmax(0,1fr) auto auto}
@media (max-width:820px){
  .casefold-s:not(:has(.casew-logo)){grid-template-columns:minmax(0,1fr) auto}
}
/* ============ [103] partner card: the profile link rides in the header row ============ */
.mem-top .mem-link{margin-left:auto;align-self:center;width:38px;height:38px;flex:none;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:2px;background:var(--white);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.mem-top .mem-link svg{width:15px;height:15px;fill:var(--teal);transition:fill .3s var(--ease)}
.mem-top .mem-link:hover{border-color:var(--teal-2);background:var(--paper)}
.mem-top .mem-link:hover svg{fill:var(--navy)}
.team .mem-card>p:last-child,.team>div>p:last-child{margin-bottom:0}
/* ============ [105] hover states for the blocks that had none ============
   Same vocabulary as the rest of the site: hairlines warm to Ochre, icon tiles
   invert, glyphs and text step a few pixels. Nothing lifts that is not a card. */
/* homepage partner columns (open columns, so they warm rather than lift) */
.team>div .mem-top{transition:border-color .34s var(--ease)}
.team>div h3{transition:color .34s var(--ease)}
.team>div:hover .mem-top{border-bottom-color:var(--teal-2)}
.team>div:hover h3{color:var(--teal)}
.team>div:hover .mem-photo{border-color:var(--teal-2)}
/* advantage rows: the icon tile inverts and the row rule warms */
.adv-list li{transition:border-color .34s var(--ease)}
.adv-list li:hover{border-bottom-color:var(--teal-2)}
.adv-list .ai{transition:background .34s var(--ease)}
.adv-list .ai svg{transition:stroke .34s var(--ease)}
.adv-list li:hover .ai{background:var(--rule)}
.adv-list li:hover .ai svg{stroke:var(--navy)}
.adv-list li b{transition:color .34s var(--ease)}
.adv-list li:hover b{color:var(--teal)}
/* fit criteria: the panel border warms, the hovered line steps in */
.crit-col{transition:border-color .34s var(--ease),box-shadow .34s var(--ease)}
.crit-col:hover{border-color:#658481;box-shadow:0 12px 30px -22px rgba(7,55,55,.35)}
.crit li{transition:padding-left .34s var(--ease-soft),color .34s var(--ease)}
.crit li::before{transition:background .34s var(--ease),transform .4s var(--ease-soft)}
.crit li:hover{padding-left:36px}
.crit li:hover::before{transform:scale(1.14)}
.crit-col--no li:hover::before{background:var(--navy)}
/* reader figures: the accent rule already grows, the figure warms with it */
.rfig .f{transition:color .34s var(--ease)}
.rfig>div:hover .f{color:var(--teal)}
@media (prefers-reduced-motion:reduce){
  .adv-list .ai,.crit li,.crit li::before,.crit-col{transition:none}
  .crit li:hover{padding-left:32px}
  .crit li:hover::before{transform:none}
}

/* case index: the count that rides in each filter chip */
.csfilt button span{margin-left:7px;color:inherit;opacity:.55;font-variant-numeric:tabular-nums}
.csfilt button[aria-pressed="true"] span{opacity:.7}
/* the case-studies pointer band: sits directly under the head, so no leading rule */
.xlink--lead{margin-top:0;padding-top:0;border-top:0}
.xlink-row--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.xlink-row--solo{grid-template-columns:minmax(0,1fr)}

/* ============ footer: the colophon ============ */
.fcol{background:var(--navy);color:var(--paper);border-top:0;padding:clamp(30px,3.4vw,44px) 0 24px}
.fcol-logo{height:34px;width:auto;display:block;margin-bottom:16px}
.fcol-cols{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr}
.fcol-cols>div{padding:0 clamp(18px,2.2vw,26px) clamp(24px,2.8vw,32px);border-right:1px solid var(--rule-dark)}
.fcol-cols>div:first-child{padding-left:0}
.fcol-cols>div:last-child{border-right:0;padding-right:0}
.fcol-k{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rule);margin-bottom:14px}
.fcol-cols p{margin:0;font-size:13px;line-height:1.65;color:var(--rule)}
.fcol-cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.fcol-cols a{font-size:13.5px;line-height:1.35;color:var(--paper);border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.fcol-cols a:hover{color:var(--rule);border-bottom-color:var(--rule)}
.fcol-cols .copyable{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fcol .copybtn{border-color:var(--rule-dark);color:var(--rule)}
.fcol .copybtn:hover,.fcol .copybtn[data-done="1"]{color:var(--paper);border-color:var(--rule)}
.fcol-social{display:flex;gap:10px;margin-top:18px}
.fcol-social a{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule-dark);
  border-radius:2px;color:var(--rule);transition:color .3s var(--ease),border-color .3s var(--ease)}
.fcol-social a:hover{color:var(--paper);border-color:var(--rule)}
.fcol-social svg{width:14px;height:14px;fill:currentColor;display:block}
.fcol-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  border-top:1px solid var(--rule-dark);padding-top:16px}
.fcol-bar p{margin:0;font-size:11px;line-height:1.7;color:rgba(234,239,233,.52);max-width:96ch}
.fcol-bar b{font-weight:500;color:var(--rule)}
.fcol-bar .clock{flex:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rule);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:9px}
.fcol-bar .clock i{width:5px;height:5px;border-radius:50%;background:var(--teal-2);display:block;flex:none}
@media (max-width:900px){
  .fcol-cols{grid-template-columns:1fr 1fr}
  .fcol-cols>div{padding-left:0;padding-right:clamp(18px,2.2vw,26px)}
  .fcol-cols>div:nth-child(2n){border-right:0}
  .fcol-cols>div:nth-child(n+3){border-top:1px solid var(--rule-dark);padding-top:24px}
}
@media (max-width:560px){
  .fcol-top{flex-direction:column;align-items:flex-start}
  .fcol-mark{align-items:flex-start}
  .fcol-cols{grid-template-columns:1fr}
  .fcol-cols>div{border-right:0;border-top:1px solid var(--rule-dark);padding-top:24px}
  .fcol-cols>div:first-child{border-top:0;padding-top:0}
  .fcol-bar{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ============ a dark section read through a photograph ============ */
/* the picture carries the human element; the brand colour is laid over it so the
   section still reads as navy and the type keeps its contrast */
.sec--photo{position:relative;isolation:isolate;overflow:hidden}
.secphoto-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 44%;display:block;z-index:0}
.secphoto-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,31,31,.9) 0%,rgba(7,55,55,.82) 34%,rgba(7,55,55,.9) 68%,rgba(4,31,31,.96) 100%),
    linear-gradient(90deg,rgba(4,31,31,.55) 0%,rgba(4,31,31,.12) 58%,rgba(4,31,31,.4) 100%)}
.sec--photo>.wrap{position:relative;z-index:2}
/* the boardroom sits lower in frame, and the ledger needs a heavier cover than the
   principles copy does */
.secphoto-bg--record{object-position:50% 62%}
.secphoto-scrim--record{background:
  linear-gradient(180deg,rgba(4,31,31,.95) 0%,rgba(7,55,55,.9) 40%,rgba(7,55,55,.93) 72%,rgba(4,31,31,.97) 100%),
  linear-gradient(90deg,rgba(4,31,31,.5) 0%,rgba(4,31,31,.2) 50%,rgba(4,31,31,.5) 100%)}
@media (max-width:860px){
  .secphoto-bg{object-position:64% 42%}
  .secphoto-scrim{background:linear-gradient(180deg,rgba(4,31,31,.93) 0%,rgba(7,55,55,.9) 40%,rgba(4,31,31,.96) 100%)}
}
/* track record: the headline figure beside the heading, raises as a ledger */
.rec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,60px);
  padding-bottom:clamp(20px,2.4vw,28px)}
.rec-head .head,.rec-head h2{margin:0}
.rec-figs{flex:none;display:flex;gap:clamp(26px,3.4vw,48px);align-items:flex-end}
.rec-fig{text-align:right}
.rec-fig .tr-lab{margin-top:8px}
.rec-fig .tr-fig{font-size:clamp(2rem,3.4vw,2.7rem)}
.raises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,4.4vw,64px);
  margin-top:clamp(14px,1.6vw,20px)}
.raise{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:0 12px;padding:10px 0}
.raise b{font-family:'Jost',sans-serif;font-weight:500;font-size:1.06rem;color:#EAEFE9;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;min-width:4.4ch}
.raise .l{border-bottom:1px dotted rgba(234,239,233,.22);transform:translateY(-4px)}
.raise em{font-style:normal;font-size:13px;color:var(--rule);letter-spacing:.01em}
.raise i{font-style:normal;margin-left:14px;font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--teal-2);white-space:nowrap}
#record .tr-note{margin:clamp(18px,2vw,24px) 0 0;max-width:76ch;padding-bottom:0}
@media (max-width:760px){
  .rec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .rec-fig{text-align:left}
  .rec-figs{align-items:flex-start}
  .raises{grid-template-columns:1fr}
}
@media (max-width:420px){
  .raise{grid-template-columns:auto 1fr;gap:2px 12px}
  .raise .l{display:none}
  .raise i{margin-left:0;grid-column:2}
}

/* ---- reader figures: the column answers to the pointer ---- */
/* a ground rises behind the hovered column, so the three read as one instrument
   with one part live, rather than three static blocks */
.rfig>div::after{content:'';position:absolute;left:0;right:0;bottom:0;top:0;z-index:-1;
  background:linear-gradient(180deg,rgba(220,228,222,0) 0%,rgba(220,228,222,.72) 100%);
  opacity:0;transform:scaleY(.86);transform-origin:100% 100%;
  transition:opacity .42s var(--ease),transform .5s var(--ease-soft)}
.rfig>div{isolation:isolate;z-index:0}
.rfig>div:hover::after{opacity:1;transform:none}
/* the accent rule runs the width of the column instead of nudging 28px */
.rfig .f::after{width:34px;transition:width .55s var(--ease-soft),background .4s var(--ease)}
.rfig>div:hover .f::after{width:min(100%,180px)}
/* the source line is the quiet proof; it steps forward only when asked */
.rfig .src{transition:color .34s var(--ease)}
.rfig>div:hover .src{color:var(--teal)}
.rfig p{transition:color .34s var(--ease)}
/* the dividers retract from the hovered edge, so the live column reads unbounded */
.rfig>div+div::before{transition:opacity .4s var(--ease),transform .5s var(--ease-soft);transform-origin:50% 0}
.rfig>div:hover+div::before,.rfig>div:hover::before{opacity:0;transform:scaleY(.7)}
@media (prefers-reduced-motion:reduce){
  .rfig>div::after,.rfig .f::after,.rfig .src,.rfig>div+div::before{transition:none}
}
.rfig--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rfig--2 p{max-width:none}
.rfig--2 .src{max-width:none;white-space:nowrap}
@media (max-width:980px){.rfig--2 .src{white-space:normal}}
@media (max-width:820px){.rfig--2{grid-template-columns:1fr}}
@media (min-width:761px) and (max-width:1040px){
  .svctbl th:nth-child(3),.svctbl td:nth-child(3){display:none}
  .svctbl th:first-child{width:32%}
}

/* ============ [106] the cross-link bands and their CTAs answer as one target ============ */
.partner{position:relative;overflow:hidden}
/* an ochre rule draws across the top of the band, matching the card treatment */
.partner::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--teal-2);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-line)}
.partner:hover::before{transform:scaleX(1)}
.partner:hover{border-color:#658481}
.partner a{position:relative;transition:color .3s var(--ease)}
.partner a::after{content:'';position:absolute;left:0;right:23px;bottom:-4px;height:1px;background:var(--teal-2);
  transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--ease-line)}
.partner:hover a{color:var(--navy)}
.partner:hover a::after,.partner a:focus-visible::after{transform:scaleX(1)}
.partner:hover a svg{transform:translateX(6px);stroke:var(--teal-2)}
.partner a svg{transition:transform .34s var(--ease-soft),stroke .3s var(--ease)}

/* the same treatment on the per-card service links */
.card-more{position:relative}
.card-more::after{content:'';position:absolute;left:0;right:23px;bottom:-5px;height:1px;background:currentColor;
  opacity:.5;transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--ease-line)}
.card:hover .card-more::after,.card-more:hover::after,.card-more:focus-visible::after{transform:scaleX(1)}
.card:hover .card-more svg,.card-more:hover svg{transform:translateX(6px)}

/* ============ [107] homepage partner blocks: they had no hover at all ============ */
/* these are not cards and not links, so the treatment is typographic: the portrait
   warms, the name follows, and the header rule picks up the accent */
.team>div:not(.mem-card){position:relative}
.team>div:not(.mem-card) .mem-top{transition:border-color .4s var(--ease)}
.team>div:not(.mem-card):hover .mem-top{border-color:#658481}
.team>div:not(.mem-card) .mem-photo{transition:border-color .4s var(--ease),transform .5s var(--ease-soft)}
.team>div:not(.mem-card):hover .mem-photo{border-color:var(--teal-2);transform:translateY(-2px)}
.team>div:not(.mem-card) .mem-top h3{transition:color .34s var(--ease)}
.team>div:not(.mem-card):hover .mem-top h3{color:var(--teal)}
.team>div:not(.mem-card) .mem-top em::before{transition:width .5s var(--ease-soft),background .34s var(--ease)}
.team>div:not(.mem-card):hover .mem-top em::before{width:34px;background:var(--teal-2)}
@media (prefers-reduced-motion:reduce){
  .partner::before,.partner a::after,.card-more::after,
  .team>div:not(.mem-card) .mem-photo,.team>div:not(.mem-card) .mem-top em::before{transition:none}
}

/* ============ [108] sectors as photographic plates ============ */
/* back on the photograph, but treated like a print plate: an inset hairline, a deeper
   ground, and the mechanic held back until the plate is live */
.sects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(26px,3vw,38px)}
.sect{position:relative;isolation:isolate;overflow:hidden;border-radius:2px;background:var(--tint);
  min-height:clamp(330px,29vw,410px);display:flex;align-items:flex-end}
.sect-bg{position:absolute;inset:0;z-index:0;transition:transform 1.1s var(--ease-soft)}
.sect:hover .sect-bg{transform:scale(1.055)}
.sect-bg image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.sect-bg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the ramp starts at the top edge so the tag and the name always have cover */
.sect::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,31,31,.12) 0%,rgba(4,31,31,.36) 24%,rgba(4,31,31,.8) 48%,rgba(4,31,31,.95) 74%,rgba(4,31,31,.98) 100%);
  transition:opacity .5s var(--ease)}
.sect:hover::after{opacity:.95}
/* an inset hairline, the way a plate is trimmed inside its own edge */
.sect-edge{position:absolute;inset:10px;z-index:2;pointer-events:none;border:1px solid rgba(234,239,233,.16);
  border-radius:1px;transition:border-color .5s var(--ease),inset .5s var(--ease-soft)}
.sect:hover .sect-edge{border-color:rgba(199,154,60,.55)}
.sect-in{position:relative;z-index:3;pointer-events:none;padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:10px;width:100%}
.sect-h{display:flex;align-items:baseline;gap:11px}
.sect-n{font-family:'Jost',sans-serif;font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--teal-2);
  font-variant-numeric:tabular-nums;flex:none}
.sect-k{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(234,239,233,.72)}
.sect h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.3rem,1.8vw,1.52rem);line-height:1.12;letter-spacing:.004em;color:var(--paper);
  white-space:nowrap}
@media (max-width:1040px){.sect h3{white-space:normal;text-wrap:pretty}}
.sect p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(234,239,233,.82);text-wrap:pretty;
  transition:color .34s var(--ease)}
.sect:hover p{color:rgba(234,239,233,.95)}
@media (max-width:900px){.sects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sects{grid-template-columns:1fr}.sect{min-height:290px}}
@media (prefers-reduced-motion:reduce){
  .sect-bg,.sect::after,.sect-edge,.sect p{transition:none}
  .sect:hover .sect-bg{transform:none}
}


/* ============ [110] the wider team rows: the hover was almost invisible ============ */
/* only the portrait ring and the name were moving. The row now behaves like the other
   indexed rows on the site: an ochre rule draws along its foot and the credential warms. */
.crew>article{position:relative;transition:border-bottom-color .34s var(--ease)}
.crew>article::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--teal-2);transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-line)}
.crew>article:hover::after{transform:scaleX(1)}
.crew>article:hover .crew-photo{border-color:var(--teal-2)}
.crew-body>p{transition:color .34s var(--ease)}
.crew>article:hover .crew-body>p{color:var(--navy)}
.crew-cred{transition:color .34s var(--ease),border-color .34s var(--ease)}
.crew>article:hover .crew-cred{color:var(--teal)}
/* the partner cards above lift, so give their portrait the same ochre ring for one language */
.mem-card:hover .mem-photo{border-color:var(--teal-2)}
@media (prefers-reduced-motion:reduce){
  .crew>article,.crew>article::after,.crew-body>p,.crew-cred{transition:none}
}

/* [98b] a single live artefact beside the pages it opens onto */
.case-ev-grid--solo{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);align-items:start}
.case-ev-grid--solo .case-shot{max-height:none}
.case-pglist{list-style:none;margin:0;padding:0;counter-reset:pg;border-top:1px solid var(--rule)}
.case-pglist li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.case-pglist b{flex:none;width:22px;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--teal);font-variant-numeric:tabular-nums}
.case-pglist span{display:block;font-size:13.5px;line-height:1.55;color:var(--body)}
.case-pglist em{display:block;font-style:normal;font-weight:500;font-size:14px;color:var(--navy);margin-bottom:3px;letter-spacing:.01em}
@media (max-width:900px){.case-ev-grid--solo{grid-template-columns:1fr}}

/* [98c] the case list, read on a service page rather than the index */
.cases--embed{margin-bottom:clamp(22px,2.6vw,32px)}
.cases--embed:empty{display:none}

/* [12b] the suites panel is the recommendation, not just the second column:
   an accent rule across the head and a flag on the label, so the eye lands there first */
.panel--hero{position:relative;border-color:var(--teal);box-shadow:0 12px 34px rgba(7,55,55,.08)}
.panel--hero::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--teal)}

/* [12c] the pricing panels answer to the pointer, same hairline shift the case
   panels use, so a reader can tell they are looking at one column and not both */
.panel{transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.panel:hover{border-color:#658481;box-shadow:0 14px 34px rgba(7,55,55,.09);transform:translateY(-2px)}
.panel--hero:hover{border-color:var(--teal);box-shadow:0 18px 42px rgba(7,55,55,.13)}
@media (prefers-reduced-motion:reduce){.panel{transition:none}.panel:hover{transform:none}}

/* [12d] the panels that were left out of the hover pass. .scope-col already
   declared a border-colour transition and never had a state to run it. */
.scope-col:hover{border-color:#658481}
.cap{transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.cap:hover{border-color:#658481;box-shadow:0 12px 30px rgba(7,55,55,.08);transform:translateY(-2px)}
.lead{transition:border-color .34s var(--ease),transform .34s var(--ease)}
.lead:hover{border-color:#658481;transform:translateY(-3px)}
.nlet-issue{transition:border-color .4s var(--ease)}
.nlet-issue:hover{border-color:var(--teal-2)}
.pinst>div{transition:background .34s var(--ease)}
.pinst>div:hover{background:var(--white)}
@media (prefers-reduced-motion:reduce){
  .cap,.lead{transition:none}
  .cap:hover,.lead:hover{transform:none}
}

/* [13] the filing calendar: a hairline strip of dates, set in the display face
   so it reads as a calendar rather than another card grid */
.eng--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.eng--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.eng--4{grid-template-columns:1fr}}
/* the filing year on one axis: the two clusters are the point, so the markers sit
   where the dates actually fall and alternate above and below to stay legible */
.ytl{position:relative;height:440px;margin-top:clamp(26px,3vw,38px)}
.ytl-line{position:absolute;left:0;right:0;top:210px;height:1px;background:var(--rule)}
.ytl-end{position:absolute;top:218px;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--meta)}
.ytl-end--s{left:0}.ytl-end--e{right:0}
.ytl-node{position:absolute;width:238px;transform:translateX(-50%)}
.ytl-node::before{content:'';position:absolute;left:50%;width:1px;background:var(--rule)}
.ytl-node::after{content:'';position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--teal)}
.ytl-node--up{bottom:268px}
.ytl-node--up::before{top:100%;height:38px}
.ytl-node--up::after{top:calc(100% + 34px)}
.ytl-node--dn{top:260px}
.ytl-node--dn::before{bottom:100%;height:50px}
.ytl-node--dn::after{bottom:calc(100% + 46px)}
.ytl-node--key::after{background:var(--teal)}
.ytl-card{background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:clamp(16px,1.8vw,20px);
  transition:border-color .34s var(--ease),transform .34s var(--ease)}
.ytl-node:hover .ytl-card{border-color:#658481;transform:translateY(-3px)}
.ytl-k{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.ytl-d{margin-top:6px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.4rem,2.1vw,1.8rem);line-height:1;letter-spacing:-.012em;color:var(--navy)}
.ytl-l{list-style:none;margin:12px 0 0;padding:0}
.ytl-l li{padding:7px 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.45;color:var(--body)}
.ytl-l li:first-child{border-top:0;padding-top:0}
.ytl-l li b{color:var(--navy);font-weight:600}
@media (max-width:1080px){.ytl-node{width:204px}.ytl-l li{font-size:13px}}
@media (max-width:820px){
  .ytl{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
  .ytl-line,.ytl-end{display:none}
  .ytl-node{position:static;width:auto;transform:none}
  .ytl-node::before,.ytl-node::after{display:none}
}
@media (max-width:600px){.ytl{grid-template-columns:1fr}}

/* [13b] the navy scope rows had picked up a block fill on hover, which the light
   ones deliberately avoid: it reads as selected rather than hovered. And the
   column border was warming at the same time, so one pointer moved three things.
   Keep the hairline and the glyph, drop the fill and the column. */
.sec--navy .scope-col .scope-row:hover{background:transparent}
.sec--navy .scope-col:hover,.sec--navy .scope-col--out:hover{border-color:var(--rule-dark)}

/* ============================================================
   [14] NAV: rule & rail, with the services panel
   The links read as a directory rather than a sentence, the hairline sits under
   the bar at rest instead of arriving on scroll, and Services opens a panel
   because seven bare names in a column explain nothing.
   ============================================================ */
.nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--rule)}
.nav.is-stuck{border-bottom-color:var(--rule);box-shadow:0 10px 30px -24px rgba(7,55,55,.55)}
.nav-links{gap:24px;align-items:center}
.nav-links a{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.62;
  white-space:nowrap;padding-block:5px}
.nav-links a:hover{opacity:1}
.nav-links a::after{height:1px;bottom:-2px;background:var(--navy)}
.nav-links .is-here{opacity:1;color:var(--teal)}
.nav-links .is-here::after{right:0;background:var(--teal)}
.navdrop>a{display:inline-flex;align-items:center}
.navdrop>a::before{display:none}
.navdrop>a::after{height:1px;bottom:-2px;background:var(--navy)}
.nav-cta{margin-left:12px}
/* the small dropdown (About) keeps its list, but inherits the new label scale */
.navdrop-menu a{font-size:12.5px;letter-spacing:.02em;text-transform:none;font-weight:500;opacity:.82}

/* ---- the services panel ---- */
.navdrop--mega{position:static}
.navdrop--mega>a{position:relative}
/* the three parent triggers open on hover/focus only — they are not pages */
.navdrop>a:not([href]){cursor:default}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:10;
  box-shadow:0 24px 42px -30px rgba(7,55,55,.55);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.navdrop:hover .mega,.navdrop:focus-within .mega,.navdrop.is-drop-open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--maxw);margin:0 auto;padding:28px var(--pad) 32px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 436px}
.mega-col{padding-right:34px}
.mega-col+.mega-col{padding-left:34px;border-left:1px solid var(--rule)}
.mega-k{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.mega a.mi{display:block;padding:10px 0;border-bottom:1px solid var(--rule);opacity:1;
  text-transform:none;letter-spacing:0;font-weight:400;white-space:normal}
.mega a.mi:last-of-type{border-bottom:0}
.mega a.mi::after{display:none}
.mega a.mi b{display:block;font-size:13.5px;font-weight:600;color:var(--navy);transition:color .25s var(--ease)}
.mega a.mi span{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--body)}
.mega a.mi:hover b{color:var(--teal)}
.mega-feat{padding-left:34px;border-left:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:start;gap:10px}
.mega-feat>a.fc{min-width:0}
.mega-feat .fc{background:var(--navy);border-radius:2px;padding:20px}
.mega-feat .fk{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-2)}
.mega-feat h4{margin-top:6px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:1.3rem;line-height:1.2;color:#EAEFE9}
.mega-feat p{margin-top:5px;font-size:11.5px;line-height:1.45;color:rgba(234,239,233,.7)}
.mega-feat .go{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:10.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nn-ochre);opacity:1;padding:0}
.mega-feat .go::after{display:none}
.mega-feat .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1120px){.nav-links{gap:19px}.nav-links a{letter-spacing:.09em}}
@media (max-width:980px){
  .navdrop--mega{position:relative;display:block}
  .mega{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent}
    .mega-in{display:block;padding:0 0 0 16px;max-width:none}
  .mega-col,.mega-col+.mega-col{padding:0;border-left:0}
  .mega-k{margin-top:12px}
  .mega a.mi span{display:none}
  .mega-feat{display:none}
}

/* [14b] the panel items answer to the pointer properly: the row lights, an accent
   rule steps in from the left and the label carries a mark forward */
.mega a.mi{position:relative;padding-left:0;transition:padding-left .3s var(--ease-soft),background .3s var(--ease)}
.mega a.mi::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-soft)}
.mega a.mi:hover{background:var(--tint);padding-left:14px}
.mega a.mi:hover::before{transform:scaleY(1)}
.mega a.mi span{transition:color .25s var(--ease)}
.mega a.mi:hover span{color:var(--navy)}

/* the featured block: the resourcing offer, carried on ochre so it reads as an
   offer rather than a seventh service */
.mega-feat .fc{position:relative;overflow:hidden;padding:22px 20px}
.mega-feat .fc::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nn-ochre)}
.mega-feat .fk{color:var(--nn-ochre)}
.mega-feat .fc:hover .go{color:#EAEFE9}
.mega-feat .go{transition:color .25s var(--ease)}
.mega-feat .go svg{transition:transform .3s var(--ease-soft)}
.mega-feat .fc:hover .go svg{transform:translateX(4px)}
/* the card is an <a> inside the bar, so it inherits the nav's uppercase and
   tracking unless they are reset here */
.mega-feat a.fc{display:block;text-decoration:none;transition:background .3s var(--ease);
  text-transform:none;letter-spacing:normal;font-size:13px;font-weight:400;opacity:1;white-space:normal;padding:15px 17px}
.mega-feat a.fc::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nn-ochre);
  right:auto;height:auto;transform:none}
.mega-feat .fk{text-transform:uppercase;letter-spacing:.2em}
.mega-feat .go{text-transform:uppercase;letter-spacing:.14em}
.mega-feat a.fc:hover{background:#0A2C2C}

/* [14b-2] the second featured card: white label. The FP&A card owns ochre, so this
   one takes the teal edge — same species of offer, distinct channel. */
.mega-feat a.fc--slim{padding:15px 17px}
.mega-feat a.fc--slim::after{background:#7FA39C}
.mega-feat a.fc--slim .fk{color:#8FB0A9}
.mega-feat a.fc--slim h4{font-size:1.1rem;margin-top:6px}
.mega-feat a.fc--slim p{margin-top:5px;font-size:11.5px;line-height:1.45}
.mega-feat a.fc--slim .go{margin-top:9px;font-size:10px}


/* [14c] the smaller panels: About and Resources carry too few items to earn a
   full-bleed sheet, so they sit as a wide anchored panel under their own item */
.navdrop--panel{position:relative}
.mega--panel{left:-16px;right:auto;width:580px;top:calc(100% + 17px);
  border:1px solid var(--rule);border-radius:2px;box-shadow:0 18px 38px -26px rgba(7,55,55,.5)}
.mega--panel .mega-in{max-width:none;padding:22px 24px 24px;grid-template-columns:minmax(0,1fr) 216px}
.mega--panel .mega-col{padding-right:26px}
.mega--panel .mega-feat{padding-left:26px;grid-template-columns:1fr}
.mega--panel .mega-feat a.fc{padding:18px 17px}
.mega--panel .mega-feat h4{font-size:1.2rem}
@media (max-width:980px){
  .mega--panel{position:static;width:auto;border:0;box-shadow:none;border-radius:0}
  .mega--panel .mega-in{grid-template-columns:1fr;padding:0 0 0 16px}
  .mega--panel .mega-col{padding-right:0}
}

/* the Resources panel is the last item in the bar, so it opens to the left of its
   own edge rather than pushing past the viewport */
.nav-links .navdrop--panel:last-of-type .mega--panel{left:auto;right:-16px}
@media (max-width:980px){.nav-links .navdrop--panel:last-of-type .mega--panel{right:auto}}

/* [15] the newsletter block sat on the same Shrub as the footer, so the two read
   as one slab. On tint it needs its own light-ground treatment. */
.sec--tint .nlet h2{color:var(--navy)}
.sec--tint .nlet h2 em{color:var(--teal)}
.sec--tint .nlet .deck{color:var(--body)}
.sec--tint .nlet .next-lab{color:var(--teal)}
.sec--tint .nlet .next h4{color:var(--navy)}
.sec--tint .nlet .next p{color:var(--body)}
.sec--tint .nlet .next-n{color:var(--teal);border-color:var(--rule)}
.sec--tint .nlet .next li{border-color:var(--rule)}
.sec--tint .nlet .field label{color:var(--meta)}
.sec--tint .nlet .field input{background:var(--white);border-color:var(--rule);color:var(--navy)}
.sec--tint .nlet .form-note{color:var(--meta)}
.sec--tint .nlet .form-note svg{stroke:var(--teal)}

/* [16] the footer bar: the legal note was squeezed to 96ch beside the clock, and
   the copyright was buried at the end of the same sentence. Give the note the full
   measure and put the copyright on its own line with the clock. */
.fcol-bar{display:block;border-top:1px solid var(--rule-dark);padding-top:18px}
.fcol-bar p{max-width:none;font-size:11.5px;line-height:1.75;color:rgba(234,239,233,.5)}
.fcol-bar b{color:rgba(234,239,233,.78);font-weight:500}
.fcol-end{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(234,239,233,.09)}
.fcol-cr{font-size:11px;letter-spacing:.05em;color:rgba(234,239,233,.62)}
.fcol-bar .clock{flex:none}
@media (max-width:600px){.fcol-end{gap:12px}}

/* [17] template library: grouped hairline rows rather than 10 equal cards.
   The hover moves four things together — the row steps in behind an accent rule,
   the format chip fills, and the request arrow travels. */
.tgroup+.tgroup{margin-top:clamp(26px,3vw,38px)}
.tmh{display:flex;align-items:baseline;gap:10px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.tmh em{font-style:normal;color:var(--meta);letter-spacing:.05em;text-transform:none;font-weight:400;font-size:12px}
.tgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,3.6vw,54px)}
.trow{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background .3s var(--ease),padding .3s var(--ease-soft)}
.trow::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-soft)}
.trow:hover{background:var(--white)}
.trow:hover::before{transform:scaleY(1)}
.tfmt{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);
  border:1px solid var(--rule);border-radius:2px;padding:4px 0;text-align:center;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.trow:hover .tfmt{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.tname{min-width:0}
.tname b{display:block;font-size:15px;font-weight:600;color:var(--navy);transition:color .25s var(--ease)}
.tname span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--body)}
.trow:hover .tname b{color:var(--teal)}
.tget{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--meta);white-space:nowrap;
  transition:color .25s var(--ease)}
.trow:hover .tget{color:var(--teal)}
.tget svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;transform:translateY(-1px);transition:transform .34s var(--ease-soft)}
.trow:hover .tget svg{transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){
  .trow,.trow::before,.tfmt,.tget svg{transition:none}
  .trow:hover{padding-left:0;padding-right:0}
}
@media (max-width:760px){.tgrid2{grid-template-columns:1fr}}

/* [18] the row hover, made general. Anything that reads as a list row now answers
   the pointer the same way the template rows do: an accent rule wipes down the
   left edge, the row steps in behind it, the label warms and the glyph travels. */

/* comparison rows on Resources */
.tmpl{position:relative;transition:background .3s var(--ease),padding-left .3s var(--ease-soft)}
.tmpl::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-soft);z-index:1}
.tmpl:hover{background:var(--white);padding-left:calc(clamp(22px,2.6vw,28px) + 12px)}
.tmpl:hover::before{transform:scaleY(1)}
.tmpl-fmt{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tmpl:hover .tmpl-fmt{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.tmpl-txt b{transition:color .25s var(--ease)}
.tmpl:hover .tmpl-txt b{color:var(--teal)}
.tmpl-txt em{transition:color .25s var(--ease)}
.tmpl-txt em svg{transition:transform .34s var(--ease-soft)}
.tmpl:hover .tmpl-txt em svg{transform:translateY(2px)}

/* related-service rows on the dark sections */
.route{position:relative}
.route::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--teal-2);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-soft)}
.route{transition:padding-left .3s var(--ease-soft),background .3s var(--ease)}
.route:hover{padding-left:14px;background:rgba(234,239,233,.045)}
.route:hover::before{transform:scaleY(1)}
.route-go svg{transition:transform .34s var(--ease-soft)}
.route:hover .route-go svg{transform:translateX(4px)}

/* the "see also" cells */
.also-c{position:relative}
.also-c::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease-soft)}
.also-c{transition:background .34s var(--ease),padding-left .3s var(--ease-soft)}
.also-c:hover{padding-left:calc(clamp(17px,2vw,22px) + 12px)}
.also-c:hover::before{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  .tmpl,.route,.also-c,.tmpl::before,.route::before,.also-c::before{transition:none}
  .tmpl:hover,.route:hover,.also-c:hover{padding-left:inherit}
}

/* [18b] ONE authoritative row hover. Earlier attempts moved the row with padding,
   then with padding plus negative margins; both re-measured the text box and
   re-wrapped the description mid-hover. The ground and the accent rule stay put and
   the children translate instead, so nothing is ever re-measured. */
/* row content steps in on hover. the download action is excluded: its arrow carries a
   downward motion of its own, and sliding it sideways cancels that read */
.trow>*:not(.tget),.tmpl>*,.route>*,.also-c>*,.mega a.mi>*{
  transition:transform .34s var(--ease-soft),color .25s var(--ease)}
.trow:hover>*:not(.tget),.tmpl:hover>*,.route:hover>*,.also-c:hover>*,.mega a.mi:hover>*{transform:translateX(10px)}
@media (prefers-reduced-motion:reduce){
  .trow>*:not(.tget),.tmpl>*,.route>*,.also-c>*,.mega a.mi>*{transition:none}
  .trow:hover>*:not(.tget),.tmpl:hover>*,.route:hover>*,.also-c:hover>*,.mega a.mi:hover>*{transform:none}
}

/* [19] the speaking panel: the paragraph was capped at 46ch and the headline was
   balanced, so both stopped well short of the panel edge while the panel itself
   only ran to half the grid. Let the copy fill its box. */
.speak-txt{grid-column:1 / 8}
.speak-txt h2{text-wrap:pretty}
.speak-txt>p{max-width:none}
.speak-cr b,.speak-cr span{max-width:none}
@media (max-width:900px){.speak-txt{grid-column:1 / -1}}

/* [19b] the speaking block reads as one composition, so it answers the pointer as
   one: the photograph settles closer, the copy panel lifts off it and warms its
   hairline. Hovering either half moves both. */
.speak-img{transition:transform .6s var(--ease-soft),border-color .4s var(--ease)}
.speak-img img{transition:transform .8s var(--ease-soft),filter .5s var(--ease);filter:saturate(.94)}
.speak:hover .speak-img{border-color:#658481}
.speak:hover .speak-img img{transform:scale(1.035);filter:saturate(1.04)}
.speak-txt{transition:transform .5s var(--ease-soft),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.speak:hover .speak-txt{transform:translateY(-5px);border-color:#658481;
  border-top-color:var(--teal);box-shadow:0 26px 50px -30px rgba(7,55,55,.55)}
.speak-k i{transition:width .5s var(--ease-soft)}
.speak:hover .speak-k i{width:38px}
@media (prefers-reduced-motion:reduce){
  .speak-img,.speak-img img,.speak-txt,.speak-k i{transition:none}
  .speak:hover .speak-img img,.speak:hover .speak-txt{transform:none}
}

/* [19c] the two creed columns hovered differently: only the right-hand one has a
   vertical divider, and that divider was warming on hover, so the right column got
   an extra move the left could never make. Drop that, and give both the same step
   the other row lists use. */
.creed>div:nth-child(2n):hover::before{background:var(--rule-dark)}
.creed>div>*{transition:transform .34s var(--ease-soft),color .34s var(--ease)}
.creed>div:hover>*{transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){
  .creed>div>*{transition:none}
  .creed>div:hover>*{transform:none}
}

/* [20] the generic .pinst hover turned every card white, including the navy lead
   card, whose text is light — so hovering it made the copy nearly invisible.
   The dark card deepens instead. */
.pinst>div.pinst--lead:hover{background:var(--navy-deep)}

/* [20b] the capacity panel was removed from the last page carrying it; its rules
   are retained only so a future panel can reuse them. */

/* [21] the article byline carried initials rather than the portrait that already
   exists for the same partner on Team and the homepage. */
.byline-photo{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;position:relative}
.byline-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.post-by .nnimg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}

/* [21b] the vouching portrait is a real <img> now, so it needs the same cover
   and crop the member cards use. */
.vouch .nnimg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}

/* ============ [22] template request gate ============ */
/* The templates are on Drive now, so a row opens a short form before the file.
   One dialog is built once and reused for every row. */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,40px)}
.gate[hidden]{display:none}
.gate-scrim{position:absolute;inset:0;background:rgba(7,55,55,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .24s var(--ease)}
.gate[data-on] .gate-scrim{opacity:1}
.gate-box{position:relative;z-index:1;width:100%;max-width:452px;background:var(--paper);
  border:1px solid var(--rule);border-top:2px solid var(--navy);border-radius:2px;
  padding:clamp(26px,3vw,34px);box-shadow:0 40px 80px -40px rgba(7,55,55,.6);
  opacity:0;transform:translateY(14px) scale(.985);transition:opacity .26s var(--ease),transform .3s var(--ease-soft)}
.gate[data-on] .gate-box{opacity:1;transform:none}
.gate-x{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;
  background:none;border:0;border-radius:2px;cursor:pointer;color:var(--meta);transition:color .2s var(--ease),background .2s var(--ease)}
.gate-x:hover{color:var(--navy);background:var(--tint)}
.gate-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.gate-k{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.gate-h{margin:9px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:1.62rem;line-height:1.2;color:var(--navy)}
/* the file being requested, as an object rather than a divider */
.gate-file{display:flex;align-items:center;gap:14px;margin:17px 0 0;padding:14px 16px;
  background:var(--white);border:1px solid var(--rule);border-radius:2px;position:relative;overflow:hidden}
.gate-file::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nn-ochre)}
.gate-fmt{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  width:46px;padding:7px 0 6px;background:var(--tint);border-radius:2px;color:var(--teal)}
.gate-fmt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.gate-fmt i{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy)}
.gate-ft{min-width:0}
.gate-file b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--navy)}
.gate-file em{display:block;margin-top:3px;font-style:normal;font-size:12px;line-height:1.4;color:var(--meta)}
.gate-form{margin-top:19px;display:flex;flex-direction:column;gap:14px}
.gate-f{display:block}
.gate-f span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.gate-f span em{flex:none;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  color:var(--nn-ochre,#C9A227)}
.gate-f input{width:100%;padding:11px 13px;font-family:'Jost',sans-serif;font-size:14px;font-weight:400;
  color:var(--navy);background:var(--white);border:1px solid var(--rule);border-radius:2px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.gate-f input::placeholder{color:#93A5A1}
.gate-f input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(101,132,129,.16)}
.gate-f input[data-bad]{border-color:#A63840;background:rgba(166,56,64,.04)}
.gate-f input[data-bad]:focus{border-color:#A63840;box-shadow:0 0 0 3px rgba(166,56,64,.14)}
.gate-err{margin:0;font-size:12.5px;color:#A63840}
/* opt-in card: the tick is drawn, so checked reads as a state not a widget */
.gate-c{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;background:var(--white);
  border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.gate-c:hover{border-color:var(--meta)}
.gate-c:has(input:checked){border-color:var(--teal);background:rgba(101,132,129,.07)}
.gate-c input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gate-cb{flex:none;width:18px;height:18px;margin-top:1px;display:grid;place-items:center;
  background:var(--white);border:1.5px solid var(--rule);border-radius:2px;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.gate-cb svg{width:11px;height:11px;fill:none;stroke:var(--paper);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);
  transition:opacity .18s var(--ease),transform .2s var(--ease-soft)}
.gate-c input:checked ~ .gate-cb{background:var(--teal);border-color:var(--teal)}
.gate-c input:checked ~ .gate-cb svg{opacity:1;transform:none}
.gate-c input:focus-visible ~ .gate-cb{box-shadow:0 0 0 3px rgba(101,132,129,.28)}
.gate-ct b{display:block;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--navy)}
.gate-ct em{display:block;margin-top:3px;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--meta)}
@media (prefers-reduced-motion:reduce){.gate-cb,.gate-cb svg{transition:none}}
.gate-go{width:100%;justify-content:center;margin-top:2px;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),opacity .22s var(--ease)}
/* unavailable until every field is right, and it looks unavailable rather than
   inviting a click that will be refused */
.gate-go[disabled]{background:var(--rule);border-color:var(--rule);color:var(--meta);
  cursor:not-allowed;box-shadow:none;transform:none}
.gate-go[disabled] svg{opacity:.5}
.gate-need{margin:-4px 0 0;font-size:11.5px;line-height:1.5;color:var(--meta);text-align:center}
@media (prefers-reduced-motion:reduce){.gate-go{transition:none}}
.gate-fine{margin:0;font-size:11.5px;line-height:1.55;color:var(--meta)}
.gate-fine a{color:var(--teal)}
.gate-done{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule);text-align:center}
.gate-tick{width:44px;height:44px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;
  background:rgba(101,132,129,.14);color:var(--teal)}
.gate-tick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gate-done b{display:block;font-size:1.02rem;font-weight:600;color:var(--navy)}
.gate-done p{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--body)}
.gate-done a{color:var(--teal)}
/* the rows are buttons in behaviour now, so say so */
.trow[data-tpl]{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .gate-scrim,.gate-box{transition:none}
  .gate[data-on] .gate-box{transform:none}
}

/* [21] the template row: chip and the request label were baseline-aligned to the
   title, so both sat high against a two-line text block and left a void beneath.
   Centre them on the block instead. Alignment only, so the row is not re-measured. */
.trow{align-items:center}
.trow .tfmt{align-self:center}

/* the gate recognises a returning requester and prefills; this releases it */
.gate-not{align-self:flex-start;margin-top:-4px;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--nn-shrub-2,#285251);
  text-decoration:underline;text-decoration-color:rgba(40,82,81,.35);text-underline-offset:3px;transition:color .2s}
.gate-not:hover{color:var(--nn-teal,#0F6E64);text-decoration-color:currentColor}
.gate-not:focus-visible{outline:2px solid var(--nn-teal,#0F6E64);outline-offset:3px;border-radius:2px}

/* the subscribe confirmation. Reuses the gate shell, so only the inner parts
   are described here. */
.thx .gate-box{max-width:428px;text-align:center;border-top-color:var(--teal);
  max-height:100%;overflow:auto;overscroll-behavior:contain}
.thx-tick{width:52px;height:52px;margin:2px auto 16px;border-radius:50%;display:grid;place-items:center;
  background:rgba(101,132,129,.14);color:var(--teal)}
.thx-tick svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:thx-draw .42s var(--ease-soft) .12s forwards}
@keyframes thx-draw{to{stroke-dashoffset:0}}
.thx-p{margin:11px 0 0;font-size:13.5px;line-height:1.62;color:var(--body)}
.thx-mail{margin-top:16px;padding:11px 14px;background:var(--white);border:1px solid var(--rule);border-radius:2px;
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.thx-mail[hidden]{display:none}
.thx-mail::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal)}
.thx-mail span{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.thx-mail b{font-size:14px;font-weight:600;color:var(--navy);word-break:break-all}
.thx-list{list-style:none;margin:18px 0 0;padding:0;text-align:left;border-top:1px solid var(--rule)}
.thx-list li{padding:12px 0;border-bottom:1px solid var(--rule)}
.thx-list li b{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--navy)}
.thx-list li span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--meta)}
.thx-go{width:100%;justify-content:center;margin-top:20px}
@media (prefers-reduced-motion:reduce){.thx-tick svg{animation:none;stroke-dashoffset:0}}

/* the address, with a copy action, for while automated signup is not live */
.thx-addr{margin-top:17px;padding:14px 16px;background:var(--white);border:1px solid var(--rule);border-radius:2px;
  text-align:left;position:relative;overflow:hidden}
.thx-addr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nn-ochre,#C9A227)}
.thx-addr > span{display:block;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.thx-addr-r{display:flex;align-items:center;gap:12px;margin-top:5px}
.thx-addr-r b{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--navy);word-break:break-all}
.thx-copy{flex:none;display:flex;align-items:center;gap:6px;padding:7px 11px;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);background:var(--tint);border:1px solid var(--rule);border-radius:2px;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.thx-copy:hover{color:var(--navy);border-color:var(--meta)}
.thx-copy[data-done]{color:var(--paper);background:var(--teal);border-color:var(--teal)}
.thx-copy svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.thx-copy i{font-style:normal}
.thx-later{display:block;width:100%;margin-top:11px;padding:6px 0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:500;color:var(--meta);background:none;border:0;
  text-decoration:underline;text-decoration-color:rgba(101,132,129,.4);text-underline-offset:3px;transition:color .2s var(--ease)}
.thx-later:hover{color:var(--navy)}

/* ============ footer: the newsletter, under Get in touch ============
   A field and one short promise, nothing else. Sits below the social row in the
   shortest column, which is where the footer had space to give it. */
.fsub{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-dark)}
.fsub-k{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--nn-ochre,#C9A227);margin-bottom:9px}
.fsub-f{margin:0}
.fsub-row{display:flex;align-items:stretch;gap:0;background:rgba(234,239,233,.07);
  border:1px solid rgba(234,239,233,.18);border-radius:2px;overflow:hidden;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.fsub-row:hover{background:rgba(234,239,233,.11);border-color:rgba(234,239,233,.32)}
.fsub-row:focus-within{background:rgba(234,239,233,.13);border-color:var(--nn-ochre,#C9A227)}
.fsub-row input{flex:1;min-width:0;padding:10px 12px;font-family:inherit;font-size:14px;font-weight:400;
  color:var(--paper);background:transparent;border:0;border-radius:0}
.fsub-row input::placeholder{color:rgba(234,239,233,.58)}
.fsub-row input:focus{outline:0}
.fsub-b{flex:none;display:grid;place-items:center;width:38px;padding:0;cursor:pointer;
  color:var(--navy);background:var(--nn-ochre,#C9A227);border:0;
  transition:background .25s var(--ease),color .25s var(--ease)}
.fsub-b:hover{background:var(--paper)}
.fsub-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s var(--ease)}
.fsub-b:hover svg{transform:translateX(3px)}
.fsub-b[data-done]{color:var(--navy);background:var(--teal-2);pointer-events:none}
.fsub-b[data-done] svg{transform:none}
.fsub-row[data-bad]{border-color:var(--brick,#A63840)}
.fsub-n{margin:9px 0 0;font-size:11px;line-height:1.55;color:rgba(234,239,233,.44)}
.fsub-n[data-err]{color:#E39098}
@media (prefers-reduced-motion:reduce){.fsub-b svg{transition:none}.fsub-b:hover svg{transform:none}}

/* the section newsletter field now reports the same way the footer band does */
.sub .field input[data-bad]{border-color:#A63840;background:rgba(166,56,64,.04)}
.sub .field input[data-bad]:focus{border-color:#A63840;box-shadow:0 0 0 3px rgba(166,56,64,.14)}
.form-note[data-err]{color:#A63840}

/* ---- scope columns that are two alternatives, not in/out ----
   .scope-col is filled Shrub as the "this is the main one" device, so a pair of
   plain columns reads as two identical dark slabs. --alt is the neutral light
   partner: same ticks and same teal, no --out muting, because neither column
   here is a negative. */
.scope-col--alt{background:var(--white);border-color:var(--rule)}
.scope-col--alt .scope-lab{color:var(--teal)}
.scope-col--alt .scope-lab i{background:var(--rule)}
.scope-col--alt .scope-row{border-bottom-color:var(--rule)}
.scope-col--alt .scope-row b{color:var(--navy)}
.scope-col--alt .scope-row span{color:var(--body)}
.scope-col--alt .scope-row::before{background:var(--teal)}
.scope-col--alt .scope-row:hover{background:rgba(7,55,55,.03);border-bottom-color:var(--teal)}

/* ---- the suites panel, filled Shrub ----
   Same "this is the main one" device as .card--core and .scope-col: one dark panel
   among light ones. Inverts the label, rows, prices and hairlines; the ochre button
   already reads on Shrub. */
.panel--dark{background:var(--navy);border-color:var(--navy);box-shadow:0 14px 38px rgba(7,55,55,.16)}
.panel--dark .panel-lab span{color:var(--nn-ochre,#C79A3C)}
.panel--dark .panel-lab i{background:var(--rule-dark)}
.panel--dark .row{border-bottom-color:var(--rule-dark)}
.panel--dark .row-l b{color:#EAEFE9}
.panel--dark .row-l span{color:rgba(234,239,233,.66)}
.panel--dark .row-p{color:var(--nn-ochre,#C79A3C)}
.panel--dark .row-p em{color:rgba(234,239,233,.6)}
.panel--dark .row::before{background:var(--nn-ochre,#C79A3C)}
/* --hero drew a teal top rule and a teal border; on Shrub the ochre reads instead */
.panel--dark.panel--hero{border-color:var(--navy)}
.panel--dark.panel--hero::before{background:var(--nn-ochre,#C79A3C)}
.panel--dark.panel--hero:hover{border-color:var(--nn-ochre,#C79A3C);box-shadow:0 20px 46px rgba(7,55,55,.22)}

/* ---- the select's own drop-down list, branded where the browser allows it ----
   The closed control is ours already; the open list is drawn by the operating
   system, which is why it arrives in system grey with the system typeface. Chrome
   exposes it via appearance:base-select. Gated behind @supports, so every other
   browser keeps the native picker rather than a half-styled one. */
@supports (appearance:base-select){
  .field select,.field select::picker(select){appearance:base-select}
  .field select::picker-icon{color:var(--meta);transition:transform .25s var(--ease)}
  .field select:open::picker-icon{transform:rotate(180deg)}
  .field select::picker(select){
    background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:5px;
    box-shadow:0 16px 40px rgba(7,55,55,.16);
    font-family:'Jost',sans-serif;font-size:15px;font-weight:400;color:var(--navy)}
  .field select option{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:1px;
    color:var(--navy);background:transparent;transition:background .18s var(--ease)}
  .field select option:hover,.field select option:focus{background:var(--tint);outline:none}
  /* the OS tick is replaced with the teal marker used elsewhere on the site */
  .field select option::checkmark{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal)}
  .field select option:not(:checked)::checkmark{background:transparent}
  .field select option:checked{font-weight:500}
}
@media (prefers-reduced-motion:reduce){
  @supports (appearance:base-select){
    .field select::picker-icon,.field select option{transition:none}
    .field select:open::picker-icon{transform:none}
  }
}

/* ---- required-field marker ----
   The label is already small uppercase, so the word rides inside it in ochre
   rather than an asterisk that needs a legend to decode. */
.field label .req{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nn-ochre,#C79A3C);margin-left:6px}
.field select:invalid,.field select option[value=""]{color:var(--meta)}
.field select option:not([value=""]){color:var(--navy)}
/* the privacy note is an icon beside a text block, so the text needs its own box
   or the trailing link wraps onto a line of its own with a stranded full stop */
.form-note>span{display:block}

/* The booking form is much taller than the four-step list beside it, so a 46%
   companion column leaves a wide void down the right. Narrower here only; the
   shared .close ratio is right everywhere else. */
@media (min-width:901px){
  #bk-form{grid-template-columns:minmax(0,1fr) minmax(0,308px);gap:clamp(36px,4.4vw,64px)}
}

.field-count{margin-top:7px;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--meta);text-align:right}
.field-count.is-full{color:var(--nn-ochre,#C79A3C)}

/* ---- booking route choice, made legible as a choice ----
   Selection was carried by a hairline darkening from --rule to --navy, which is
   almost invisible next to an unselected card on the same tint. The chosen route
   is now filled Shrub with an ochre rule and a filled marker, so the state does
   not rest on a border colour alone. */
.bkchoose{gap:12px}
.bkchoose button{position:relative;overflow:hidden;padding:19px 46px 19px 22px;font-size:14px;
  background:var(--white);border-color:var(--rule);
  transition:border-color .34s var(--ease),background .34s var(--ease),
             transform .34s var(--ease-soft),box-shadow .34s var(--ease)}
.bkchoose button b{font-size:15.5px;font-weight:600;margin-bottom:4px}
.bkchoose button span{font-size:12.5px}
/* the marker: an outlined ring that fills when the route is chosen */
.bkchoose button::after{content:'';position:absolute;top:50%;right:20px;margin-top:-7px;
  width:14px;height:14px;border-radius:50%;border:1.5px solid var(--rule);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.bkchoose button:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 8px 22px rgba(7,55,55,.08)}
.bkchoose button:hover::after{border-color:var(--teal)}
.bkchoose button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);
  box-shadow:0 12px 30px rgba(7,55,55,.18);transform:none}
.bkchoose button[aria-pressed="true"]::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--nn-ochre,#C79A3C)}
.bkchoose button[aria-pressed="true"] b{color:#EAEFE9}
.bkchoose button[aria-pressed="true"] span{color:rgba(234,239,233,.7)}
.bkchoose button[aria-pressed="true"]::after{border-color:var(--nn-ochre,#C79A3C);
  background:var(--nn-ochre,#C79A3C);box-shadow:inset 0 0 0 3px var(--navy)}
.bkchoose button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .bkchoose button,.bkchoose button::after{transition:none}
  .bkchoose button:hover{transform:none}
}

/* ---- consent opt-in, given the same hairline language as the fields above it ----
   It was a bare native checkbox beside 12px grey text: the only control on the
   form with no box around it. Now a real row with a custom box, a hover state and
   a full-width hit target, since the whole label toggles it. */
.form-consent{align-items:center;gap:13px;margin-top:18px;padding:14px 16px;font-size:12.5px;
  border:1px solid var(--rule);border-radius:2px;background:transparent;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.form-consent:hover{border-color:var(--teal);background:var(--white)}
.form-consent input{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:0;
  border:1px solid var(--rule);border-radius:2px;background:var(--white);cursor:pointer;
  background-repeat:no-repeat;background-position:center;background-size:12px;
  transition:background-color .22s var(--ease),border-color .22s var(--ease)}
.form-consent input:checked{background-color:var(--navy);border-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAEFE9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.form-consent input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* once opted in, the row stops reading as a grey aside */
.form-consent:has(input:checked){border-color:var(--teal);background:var(--white);color:var(--body)}
@media (prefers-reduced-motion:reduce){.form-consent,.form-consent input{transition:none}}

/* 12.5px in --meta was smaller and lighter than anything else on the form, so it
   read as fine print rather than a question. The ask carries at field weight and
   the qualifier sits under it. */
.form-consent{align-items:flex-start;font-size:13px;line-height:1.55;color:var(--meta)}
.form-consent input{margin-top:1px}
.form-consent b{display:block;font-size:14.5px;font-weight:500;color:var(--navy);margin-bottom:3px;
  transition:color .3s var(--ease)}

/* [hidden] is a UA rule at zero specificity, so any class that sets display beats
   it — .close{display:grid} kept #bk-form on screen after the route switch set
   hidden. This restores the attribute's meaning wherever it is used. */
[hidden]{display:none!important}

/* The consent row sat below the submit button on a tinted section with no fill, so
   it was both unread and barely visible. It now precedes the button and carries the
   same white ground as the fields, with an ochre edge to mark it as the one optional
   thing on the form. */
.form-consent{background:var(--white);border-left:3px solid var(--nn-ochre,#C79A3C);
  padding:15px 18px;margin-top:4px}
.form-consent:hover{background:var(--white);border-color:var(--rule);
  border-left-color:var(--nn-ochre,#C79A3C)}
.form-consent:has(input:checked){border-color:var(--teal);border-left-color:var(--nn-ochre,#C79A3C)}

/* the two parts run on one line beside the box rather than stacking under it, which
   halves the row height */
.form-consent{align-items:center;padding:13px 18px}
.form-consent input{margin-top:0}
.form-consent b{display:inline;margin-bottom:0;font-size:13.5px}
.form-consent span{font-size:13.5px}

.form-consent{display:flex;align-items:center;gap:16px}
.form-consent>span{display:block;flex:1}

/* the branded picker rows were running ~90px tall: my padding on top of the
   engine's own option box. Tighten to a list, not a stack of cards. */
@supports (appearance:base-select){
  .field select::picker(select){padding:4px;font-size:14.5px}
  .field select option{padding:8px 11px;gap:9px;line-height:1.25;min-height:0;min-block-size:0}
  .field select option::checkmark{width:5px;height:5px;flex:none}
}

/* ---- nav panel feature: a photograph, framed as a plate ----
   object-fit + transform:scale fought each other and centred the ceiling, so the
   image is placed explicitly instead: 4.8x the frame width, offset so Omar's head
   sits at 30% and centred. 4.8 is the smallest factor at which a 30% subject line
   still leaves the image covering the whole frame - below about 4.6 the bottom edge
   lifts off the frame and leaves a bare strip. Percentages resolve against the 4:5
   frame, so the crop holds at every panel width.
   Source 1600x900; subject at 56% x, 66% y. A 4:5 plate, so the caption has its
   own third of the frame instead of landing on his chest. */
.fph{position:relative;display:block;overflow:hidden;border-radius:2px;
  aspect-ratio:4/5;background:var(--navy-deep);text-decoration:none}
.fph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:56% 50%;
  filter:none;
  transform:scale(2.6);transform-origin:52% 85.4%;
  transition:transform .7s var(--ease-soft)}
/* One real element, two stacked ramps: a short lift off the top edge so the frame
   reads as a plate, and a deep ramp up the bottom so the caption sits on ink rather
   than on a lit wall. A child rather than ::before/::after, because pseudo-element
   gradients are dropped by DOM-cloning renderers. */
.fph-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;display:block;
  transition:opacity .5s var(--ease);
  background:
    linear-gradient(180deg,rgba(4,31,31,0) 40%,rgba(4,31,31,.55) 56%,rgba(4,31,31,.92) 70%,#041F1F 84%,#041F1F 100%)}
.fph-edge{position:absolute;inset:9px;z-index:3;pointer-events:none;
  border:1px solid rgba(234,239,233,.22);border-radius:1px;
  transition:border-color .5s var(--ease)}
.fph:hover .fph-edge{border-color:rgba(199,154,60,.62)}
.fph-c{position:absolute;left:19px;right:19px;bottom:16px;z-index:4;display:block;
  white-space:normal;overflow-wrap:break-word;hyphens:none}
.fph-c em{display:block;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--nn-ochre,#C79A3C);margin-bottom:8px}
.fph-c b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:20.5px;font-weight:500;
  line-height:1.14;color:#EAEFE9;letter-spacing:0;text-transform:none;
  text-shadow:0 1px 12px rgba(4,31,31,.6);transition:color .3s var(--ease)}
.fph-c i{display:block;font-style:normal;margin-top:7px;font-size:10.5px;line-height:1.4;
  letter-spacing:.03em;text-transform:none;color:rgba(234,239,233,.62)}
.fph:hover img{transform:scale(2.78)}
.fph:hover .fph-c b{color:var(--nn-ochre,#C79A3C)}
.fph:focus-visible{outline:2px solid var(--nn-ochre,#C79A3C);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fph img,.fph-edge{transition:none}.fph:hover img{transform:scale(2.6)}}


/* [16d] the four positions were reading long: the numeral sat on its own line
   above each heading, so every item cost an extra 44px of stacked height. Set
   the numeral in a left gutter, on the heading's baseline, and pull the block
   padding in. Same content, roughly a third less height. */
.creed>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.4vw,20px);
  align-items:baseline;padding-top:clamp(15px,1.7vw,20px);padding-bottom:clamp(16px,1.8vw,22px)}
.creed-n{grid-column:1;grid-row:1;font-size:clamp(1.35rem,2vw,1.7rem)}
.creed h3{grid-column:2;grid-row:1;margin:0}
.creed p{grid-column:2;grid-row:2;margin-top:6px;font-size:14px;line-height:1.6}

/* [17b] the client band runs continuously and ignores the pointer: it is a proof
   strip, not something to interact with. pointer-events:none is enough to retire
   every hover treatment, which leaves the per-logo resting opacities untouched. */
.mq,.mq *{pointer-events:none}
.mq:hover .mq-track,.mq-track{animation-play-state:running !important}

/* [18] artefact bands sit full-bleed: the photograph runs edge to edge and the
   copy is set on it, carried by the scrim gradient rather than a panel. */
.fbband+.sec,.fbband+section{border-top:0}
.fbband .in .k{color:var(--nn-ochre)}

/* [19] paper and air: the two flat grounds get depth. Tint sections carry a fine
   grain so they read as stock rather than fill; navy sections get a single soft
   light source from the top left instead of one dead value. Photo sections are
   excluded — they already have an image doing this work. */
.sec--tint:not(.sec--photo){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");background-size:180px 180px;background-blend-mode:multiply}
.mqband{background-image:none}
.sec--navy:not(.sec--photo){background-image:
  radial-gradient(120% 90% at 12% -10%,rgba(234,239,233,.055) 0%,rgba(234,239,233,0) 58%),
  radial-gradient(90% 70% at 100% 110%,rgba(4,31,31,.5) 0%,rgba(4,31,31,0) 60%)}

/* [20] an empty slot inside a full-bleed band was navy ink on navy ground: the
   drop affordance existed but could not be seen. While unfilled the slot carries
   the paper tint and the scrim and copy step back; once an image lands, the band
   returns to its intended treatment. */
.fbband .nnimg:not(.is-filled){background:var(--tint)}
.fbband .nnimg:not(.is-filled)~.scrim{opacity:.07}
.fbband .nnimg:not(.is-filled)~.in{opacity:.22}
.fbband .nnimg~.scrim,.fbband .nnimg~.in{transition:opacity .4s var(--ease)}