/* ============================================================================
   ClubIT V1 — shared design system, design 5a
   Loaded by every page after tokens.css. Page-specific components stay in that
   page's own <style> block; anything that appears on two or more pages belongs
   here, so the pages cannot drift apart as the site grows.
   Contrast: every colour pair in this file has been computed and passes 4.5:1.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:var(--step-0);line-height:1.6;color:var(--ink);background:var(--white);font-weight:400;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-head);line-height:1.12;letter-spacing:-.022em;font-weight:800;color:var(--navy)}
p{margin:0}
a{color:var(--purple);text-decoration-thickness:1px;text-underline-offset:.18em}
img,video{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--aqua)}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--navy);padding:.75rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the one repeated structural device ---------- */
.eyebrow{font-size:var(--step--1);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:currentColor;flex:none}
.on-dark .eyebrow{color:var(--teal)}

/* ---------- sections ---------- */
.band{padding-block:clamp(3.25rem,6vw,5.25rem)}
/* The masthead is sticky at 80px, so anything linked to from the nav, the
   footer or a hero chip has to clear it. */
section[id],article[id]{scroll-margin-top:96px}
.band-dark{background:var(--navy);color:#DDE3F0}
.band-dark h2,.band-dark h3,.band-dark h4{color:var(--white)}
.band-tint{background:#F6F6FA}
.lede{font-size:var(--step-1);line-height:1.55;max-width:var(--measure);color:var(--ink)}
.band-dark .lede{color:#C3CDE2}
.head{margin-bottom:2.25rem}
.head h2{font-size:var(--step-4);max-width:22ch;text-wrap:balance}
.head p{margin-top:1rem}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.25rem}
.head-row h2{font-size:var(--step-3);max-width:24ch}
.more{font-weight:700;font-size:var(--step-0);white-space:nowrap}
.on-dark .more{color:var(--aqua)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:inherit;font-weight:700;font-size:var(--step-0);
  padding:.95rem 1.6rem;border-radius:9px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--purple);color:var(--white)}          /* white on purple = 5.04 ✓ */
.btn-primary:hover{background:var(--purple-deep)}
.btn-outline{border-color:rgba(15,26,51,.32);color:var(--navy);background:transparent}
.btn-outline:hover{border-color:var(--navy);background:rgba(15,26,51,.04)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:var(--white);background:transparent}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-invert{background:var(--white);color:var(--navy)}
.btn-invert:hover{background:var(--aqua)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:#25355c}

/* ---------- masthead: white, per 5a ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.masthead .shell{display:flex;align-items:center;gap:1.5rem;min-height:80px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:40px;width:auto;object-fit:contain}
@media(max-width:520px){.brand img{height:32px}}
.nav{display:none;gap:1.5rem;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--step--1)}
.nav a:hover{color:var(--purple)}
.masthead-end{display:flex;align-items:center;gap:1rem;margin-left:auto}
.nav+.masthead-end{margin-left:1.5rem}
.tel{font-weight:600;font-size:var(--step--1);color:#5E6779;text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--navy)}
.masthead .btn{padding:.65rem 1.15rem;font-size:var(--step--1);white-space:nowrap}
/* On a 320px screen the logo plus the full CTA wording overflows by 45px, so
   the button carries a short label as well and swaps at 440px. */
.masthead .btn .sm{display:none}
@media(max-width:440px){
  .masthead .btn .lg{display:none}
  .masthead .btn .sm{display:inline}
}
@media(max-width:860px){.tel{display:none}}
@media(min-width:1100px){.nav{display:flex}}


/* ---------- proof strip, navy, directly under the hero ---------- */
.strip{background:var(--navy);padding-block:clamp(1.5rem,3vw,1.85rem)}
.strip .shell{display:grid;gap:1.35rem 1.25rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.strip .shell{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.strip .shell{grid-template-columns:repeat(6,1fr)}}
.strip .n{font-size:var(--step-2);font-weight:800;letter-spacing:-.035em;color:var(--teal);line-height:1;
  font-variant-numeric:tabular-nums}
.strip .n .u{font-size:.5em;font-weight:700;letter-spacing:0}
.strip .l{font-size:var(--step--1);color:rgba(255,255,255,.72);margin-top:.45rem;font-weight:600;line-height:1.4}


/* systems the sector actually runs */
.systems{background:#F6F6FA;border-radius:16px;padding:1.6rem 1.75rem}
.band-tint .systems{background:var(--white);border:1px solid var(--line)}
.systems-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.systems-head .t{font-size:var(--step--1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.systems-head .c{font-size:var(--step--1);color:#5E6779}
.systems ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.systems ul{grid-template-columns:repeat(4,1fr)}}
.systems li{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;
  font-size:var(--step--1);font-weight:600;color:var(--navy);line-height:1.35}
.band-tint .systems li{background:#F6F6FA}


/* ---------- NEVO ---------- */
.nevo-grid{display:grid;gap:2.5rem}
@media(min-width:960px){.nevo-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.5rem}}
.nevo-mark{width:180px;height:auto;margin-bottom:1.25rem;filter:brightness(0) invert(1)}
.pillars{display:grid;gap:.85rem}
.pillar{background:var(--navy-2);border-radius:12px;padding:1.4rem 1.5rem;display:grid;gap:.6rem;align-items:center}
@media(min-width:560px){.pillar{grid-template-columns:120px minmax(0,1fr);gap:1.75rem}}
.pillar .name{font-size:var(--step-1);font-weight:800;letter-spacing:-.01em;line-height:1}
.pillar .name.is-support{color:var(--lavender)}   /* 7.36 on navy-2 */
.pillar .name.is-secure{color:#7FB4E0}            /* 6.03 — brand blue fails at 2.24 */
.pillar .name.is-grow{color:var(--teal)}          /* 6.56 */
.pillar p{font-size:var(--step--1);line-height:1.6;color:#B9C1D6}
.pillar p b{color:var(--white);font-weight:700}

/* ============================================================================
   PROOF — the three testimonials, now that the transcripts exist.
   Each card is quote-led, because the quote is the part that was missing and
   it is the part a prospect believes.
   ========================================================================== */
.cases{display:grid;gap:1.25rem}
@media(min-width:760px){.cases{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.case .shot,.case .ph{aspect-ratio:16/9}
.case .shot{overflow:hidden;background:var(--navy)}
.case .shot img{width:100%;height:100%;object-fit:cover}
/* Evans Head's frame is 1.86:1 and carries a lower-third at its left edge, so
   the overflow comes off the right rather than being split. */
.case .shot img.pin-left{object-position:left center}
/* Industry-panel photography. Sits in the column the .ph placeholders occupy,
   so it keeps their 4:3 box and adds a caption underneath it. */
.panel-shot{margin:0}
.panel-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--navy)}
.panel-shot figcaption{font-size:.75rem;line-height:1.55;margin-top:.6rem;color:var(--ink)}
.panel-shot figcaption b{color:var(--navy)}
.case-body{padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.case .sector{font-size:var(--step--1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.7rem}
.case h3{font-size:var(--step-1);margin-bottom:.8rem;line-height:1.28}
.case blockquote{margin:0 0 1rem;padding-left:1rem;border-left:3px solid var(--purple)}
.case blockquote p{font-size:var(--step-0);font-weight:600;line-height:1.5;color:var(--navy)}
.case blockquote cite{display:block;font-style:normal;font-size:var(--step--1);font-weight:600;
  color:#5E6779;margin-top:.6rem}
.case .did{font-size:var(--step--1);line-height:1.6;margin-bottom:1.1rem}
.case .did b{color:var(--navy)}
.case .go{margin-top:auto;font-weight:700;font-size:var(--step--1)}


/* ---------- credentials ---------- */
.cred{display:grid;gap:1.1rem}
@media(min-width:900px){.cred{grid-template-columns:repeat(3,1fr)}}
.cred-card{background:var(--navy-2);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:1.7rem 1.5rem;display:flex;flex-direction:column}
.cred-card .domain{font-size:var(--step--1);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.cred-head{display:flex;align-items:flex-start;gap:1.1rem;margin:1.1rem 0 1rem}
.cred-head>div{min-width:0}
.cred-shot{width:92px;height:115px;flex:none;border-radius:8px;overflow:hidden;
  border:2px dashed var(--lavender);background:rgba(255,255,255,.05);
  display:grid;place-items:center;text-align:center;padding:.35rem}
.cred-shot span{font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--lavender);line-height:1.35}
.cred-card h3{font-size:var(--step-1);margin:.55rem 0 .1rem}
.cred-card .role{font-size:var(--step--1);color:var(--lavender);font-weight:700}
.cred-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.cred-card li{font-size:var(--step--1);color:#C3CDE2;line-height:1.55;padding-left:1.25rem;position:relative}
.cred-card li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--teal);
  clip-path:polygon(0 0,60% 0,100% 100%,0 100%)}
.cred-card li b{color:var(--white);font-weight:700}
.cred-yrs{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--step-2);font-weight:800;color:var(--white);letter-spacing:-.03em;line-height:1}
.cred-yrs span{display:block;font-size:var(--step--1);font-weight:600;color:#A9B6D2;letter-spacing:0;margin-top:.35rem}


/* ---------- the contract: what the first 90 days commits to ---------- */
.contract{display:grid;gap:0}
.row{display:grid;gap:.5rem 1.75rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
@media(min-width:820px){.row{grid-template-columns:150px minmax(0,1fr) 230px;align-items:baseline}}
.row .when-t{font:700 var(--step--1)/1.3 ui-monospace,Menlo,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple)}
.row h3{font-size:var(--step-1);margin-bottom:.45rem}
.row p{font-size:var(--step--1);line-height:1.6}
.row .proof-out{font-size:var(--step--1);font-weight:700;color:var(--navy);
  border-left:3px solid var(--blue);padding-left:.85rem}


/* ---------- purple close ---------- */
.close{background:var(--purple);color:var(--white)}   /* .88 white over purple = 4.28, fails */
.close .shell{display:grid;gap:2rem}
@media(min-width:900px){.close .shell{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3rem}}
.close h2{font-size:var(--step-4);color:var(--white);max-width:22ch;margin-bottom:.9rem}
.close p{font-size:var(--step-1);line-height:1.55;color:var(--white);max-width:var(--measure)}
.terms{margin-top:1.6rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.28);
  display:grid;gap:.6rem;font-size:var(--step--1);color:var(--white);line-height:1.6}
.terms b{color:var(--white)}
.terms a{color:var(--white);font-weight:700}


/* ---------- footer ---------- */
footer{background:var(--navy);color:#8F9AB5;padding-block:3.25rem 1.75rem;font-size:var(--step--1)}
.foot-grid{display:grid;gap:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:700px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.foot-grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.foot-grid img{width:150px;height:auto;margin-bottom:1.1rem}
.foot-grid h2{font-size:var(--step--1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--white);margin-bottom:.9rem}
.foot-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.foot-grid a{color:#8F9AB5;text-decoration:none}
.foot-grid a:hover{color:var(--white)}
.foot-end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;color:#8892AB}


/* ============================================================================
   PHOTO SLOTS — two states, deliberately distinguishable at a glance.
     figure.shot = a real photo confirmed to fit the slot
     .ph         = a photo that does NOT exist yet, carrying its brief
   Full brief: PHOTO-BRIEF.md. figcaption uses --ink, never --muted (3.11 on white).
   ========================================================================== */
/* Grid and flex items default to min-width:auto, which lets a box carrying an
   aspect-ratio derive a minimum WIDTH from its content HEIGHT and blow the
   track wider than its container. Every media box here may shrink instead. */
.ph,.shot,.panel-shot{min-width:0}

figure.shot{margin:0}
figure.shot img{width:100%;height:100%;border-radius:8px;object-fit:cover;background:#F6F6FA}
figure.shot figcaption{font-size:.7rem;line-height:1.5;margin-top:.55rem;color:var(--ink)}
figure.shot figcaption b{color:var(--navy)}
.on-dark figure.shot figcaption{color:#A9B6D2}
.on-dark figure.shot figcaption b{color:var(--white)}

.ph{border-radius:8px;border:2px dashed var(--purple);background:#F4F1FE;
  display:grid;place-items:center;text-align:center;padding:1.1rem}
.ph .pid{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--purple);color:var(--white);padding:.22rem .55rem;border-radius:99px;
  display:inline-block;margin-bottom:.55rem}
.ph p{font-size:var(--step--1);color:var(--ink);line-height:1.5}
.ph p+p{margin-top:.45rem}
.ph-dark{background:rgba(113,79,247,.14);border-color:var(--lavender)}
.ph-dark p{color:#C7D1E6}
.ph-dark .pid{background:var(--lavender);color:var(--navy)}
.ph-dark b{color:var(--white)}

/* content that does not exist yet / needs sign-off */
.todo{border:2px dashed var(--purple);border-radius:14px;padding:1.4rem;background:#F4F1FE}
.todo .tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--purple);color:var(--white);padding:.25rem .6rem;border-radius:99px;margin-bottom:.75rem}
.todo p{font-size:var(--step--1);color:var(--ink);line-height:1.6}
.todo p+p{margin-top:.7rem}
.todo b{color:var(--navy)}
.on-dark .todo{background:rgba(113,79,247,.16);border-color:var(--lavender)}
.on-dark .todo p{color:#C7D1E6}
.on-dark .todo b{color:var(--white)}
.on-dark .todo .tag{background:var(--lavender);color:var(--navy)}
.todo code{font-size:.9em;background:rgba(15,26,51,.08);padding:.1rem .35rem;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================================
   Added 16 Sep for the capability / about / results / insights / locations
   build. Anything here is used by two or more pages, per the base.css rule.
   ========================================================================== */

/* ---------- breadcrumbs ---------- */
.crumbs{background:#F6F6FA;border-bottom:1px solid var(--line);padding-block:.85rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:.3rem .55rem;font-size:var(--step--1)}
.crumbs li{display:flex;align-items:center;gap:.55rem;color:#5E6779}
.crumbs li+li::before{content:"/";color:#7B8391}  /* 3.9 on tint — separator, not content */
.crumbs a{color:var(--blue);font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li[aria-current]{font-weight:700;color:var(--navy)}

/* ---------- service / hub hero ---------- */
.shero{background:linear-gradient(180deg,#F6F6FA 0%,var(--white) 100%);border-bottom:1px solid var(--line)}
.shero-inner{padding-block:clamp(2.25rem,5.5vw,3.75rem);max-width:56rem}
.shero h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.35rem);letter-spacing:-.03em;margin-bottom:1.1rem;
  text-wrap:balance}
.shero .lede{margin-bottom:1.75rem;max-width:44rem}
.shero .hero-actions{margin-bottom:.25rem}

/* ---------- body prose + aside ---------- */
.prose-wrap{display:grid;gap:2.5rem}
@media(min-width:1000px){.prose-wrap{grid-template-columns:minmax(0,1fr) 20rem;gap:3.5rem;align-items:start}}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-size:var(--step-2);margin-top:2.25rem;max-width:30ch}
.prose h3{font-size:var(--step-1);margin-top:1.6rem}
.prose p,.prose li{font-size:var(--step-0);line-height:1.7}
.prose b,.prose strong{color:var(--navy);font-weight:700}
.prose ul{margin-left:0;padding-left:0;list-style:none;display:grid;gap:.7rem}
.prose ul li{padding-left:1.5rem;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--purple);clip-path:polygon(0 0,60% 0,100% 100%,0 100%)}
.prose>ul{margin-top:1.1rem}
.pull{border-left:4px solid var(--purple);background:#F6F6FA;border-radius:0 12px 12px 0;
  padding:1.25rem 1.4rem;margin-top:1.5rem}
.pull p{font-size:var(--step-1);line-height:1.5;font-weight:600;color:var(--navy)}
.pull cite{display:block;font-style:normal;font-size:var(--step--1);font-weight:600;color:#5E6779;
  margin-top:.65rem}

/* ---------- aside rail ---------- */
.rail{display:grid;gap:1.1rem;position:static}
@media(min-width:1000px){.rail{position:sticky;top:104px}}
.rail-card{border:1px solid var(--line);border-radius:14px;padding:1.4rem;background:var(--white)}
.rail-card.is-dark{background:var(--navy);border-color:var(--navy)}
.rail-card.is-dark h2,.rail-card.is-dark h3{color:var(--white)}
.rail-card.is-dark p,.rail-card.is-dark li{color:#C3CDE2}
.rail-card.is-dark a{color:var(--aqua)}
.rail-card h2{font-size:var(--step--1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.9rem}
.rail-card.is-dark h2{color:var(--teal)}
.rail-card h3{font-size:var(--step-1);margin-bottom:.5rem}
.rail-card p{font-size:var(--step--1);line-height:1.6}
.rail-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.rail-card li{font-size:var(--step--1);line-height:1.45}
.rail-card li a{color:var(--navy);font-weight:600;text-decoration:none}
.rail-card li a:hover{color:var(--purple)}
.rail-card li a[aria-current]{color:var(--purple)}
.rail-card .btn{margin-top:1rem;width:100%;justify-content:center}

/* ---------- capability hub cards ---------- */
.hubs{display:grid;gap:1.1rem}
@media(min-width:720px){.hubs{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.hubs{grid-template-columns:repeat(3,1fr)}}
.hub{border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.5rem;background:var(--white);
  display:flex;flex-direction:column;text-decoration:none;transition:border-color .16s,transform .16s}
.hub:hover{border-color:var(--purple);transform:translateY(-2px)}
/* flex:none matters: .hub p{flex:1} below would otherwise let this eyebrow
   absorb the spare height in a short card and push the heading down. */
.hub .n{font:700 var(--step--1)/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--purple);
  margin-bottom:.8rem;flex:none}
.hub h2,.hub h3{font-size:var(--step-1);margin-bottom:.6rem}
.hub p{font-size:var(--step--1);line-height:1.6;color:var(--ink);flex:1}
.hub ul{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.hub li{font-size:.75rem;font-weight:600;background:#F6F6FA;border:1px solid var(--line);
  border-radius:99px;padding:.3rem .7rem;color:#5E6779}
.hub .go{margin-top:1.1rem;font-weight:700;font-size:var(--step--1);color:var(--purple)}

/* ---------- related links ---------- */
.rel{display:grid;gap:.9rem}
@media(min-width:700px){.rel{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.rel{grid-template-columns:repeat(3,1fr)}}
.rel a{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;
  display:block;background:var(--white);transition:border-color .16s}
.rel a:hover{border-color:var(--purple)}
.rel .t{font-weight:700;color:var(--navy);font-size:var(--step-0);margin-bottom:.3rem}
.rel .d{font-size:var(--step--1);color:var(--ink);line-height:1.5}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem;margin-top:1.5rem}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--white)}
.faq summary{cursor:pointer;padding:1.1rem 1.3rem;font-weight:700;color:var(--navy);
  font-size:var(--step-0);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple);font-weight:800;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 1.3rem 1.2rem;font-size:var(--step--1);line-height:1.7}
.faq .a p+p{margin-top:.8rem}

/* ---------- simple content list (insights, locations) ---------- */
.listing{display:grid;gap:1.1rem}
@media(min-width:760px){.listing{grid-template-columns:1fr 1fr}}
@media(min-width:1140px){.listing{grid-template-columns:repeat(3,1fr)}}
.item{border:1px solid var(--line);border-radius:14px;padding:1.5rem;background:var(--white);
  display:flex;flex-direction:column}
.item .meta{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.6rem}
.item h3{font-size:var(--step-1);margin-bottom:.6rem;line-height:1.3}
.item p{font-size:var(--step--1);line-height:1.6;flex:1}
.item .go{margin-top:1rem;font-weight:700;font-size:var(--step--1)}

/* ---------- click-to-load YouTube ---------- */
.yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--navy);
  border:0;padding:0;cursor:pointer;display:block;width:100%}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.72}
.yt .btn-play{position:absolute;inset:0;display:grid;place-items:center}
.yt .btn-play span{width:74px;height:74px;border-radius:50%;background:var(--purple);position:relative;
  box-shadow:0 8px 30px rgba(0,0,0,.4)}
.yt .btn-play span::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
  border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.yt:hover .btn-play span{background:var(--purple-deep)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-note{font-size:var(--step--1);color:#5E6779;margin-top:.7rem;line-height:1.55}

/* ---------- measured outcomes on case studies ---------- */
.metrics{display:grid;gap:1rem;margin-top:1.2rem}
@media(min-width:700px){.metrics{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.metric{border:1px solid var(--line);border-left:4px solid var(--purple);border-radius:0 12px 12px 0;
  padding:1.15rem 1.3rem;background:#F6F6FA}
.metric .mv{font-size:var(--step-2);font-weight:800;letter-spacing:-.03em;color:var(--navy);
  line-height:1.1}
.metric .ml{font-size:var(--step--1);line-height:1.5;color:var(--ink);margin-top:.45rem}
.metric .ms{font-size:.72rem;line-height:1.5;color:#5E6779;margin-top:.5rem}
.case-metric{font-size:var(--step--1);line-height:1.5;color:var(--ink);margin-bottom:.8rem;
  padding:.55rem .8rem;background:#F6F6FA;border-left:3px solid var(--purple);border-radius:0 8px 8px 0}
.case-metric b{color:var(--navy);font-weight:800}

/* ---------- offices: address card + click-to-load map ----------------------
   The still is self-hosted (build/maps.py, OpenStreetMap tiles) so the page
   carries no third-party request until a visitor opens the live map. Same
   bargain as .yt above; keep the two consistent if either changes. */
.office{margin:0 0 1.9rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff}
.office-head{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:flex-start;
  justify-content:space-between;padding:1.15rem 1.35rem}
.office-kind{font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--purple);margin-bottom:.45rem}
.office address{font-style:normal;font-family:Manrope,system-ui,sans-serif;font-weight:700;
  font-size:var(--step-0);line-height:1.5;color:var(--navy)}
.office-pending{font-size:var(--step--1);line-height:1.55;color:#5E6779;margin-top:.45rem}
.office-act{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:var(--step--1);font-weight:700}
.office-act a{white-space:nowrap}
.gmap{position:relative;display:block;width:100%;min-width:0;aspect-ratio:2/1;border:0;padding:0;
  margin:0;cursor:pointer;background:var(--navy);overflow:hidden;
  border-top:1px solid var(--line)}
.gmap img{width:100%;height:100%;object-fit:cover;display:block}
.gmap-cue{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  background:var(--purple);color:#fff;font:700 var(--step--1)/1 Manrope,system-ui,sans-serif;
  padding:.72rem 1.15rem;border-radius:99px;box-shadow:0 8px 26px rgba(15,26,51,.35);
  white-space:nowrap}
.gmap:hover .gmap-cue{background:var(--purple-deep)}
.gmap:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gmap-note{font-size:.72rem;line-height:1.5;color:#5E6779;padding:.7rem 1.35rem 1rem}
@media(max-width:560px){.gmap{aspect-ratio:3/2}}

/* ---------- offices, three across (contact page) ---------- */
.offices{display:grid;gap:1.2rem;margin:1.4rem 0 2rem}
@media(min-width:900px){.offices{grid-template-columns:repeat(3,1fr)}}
.offices .office{margin:0;display:flex;flex-direction:column}
.offices .office-head{flex-direction:column;gap:.7rem;padding:1rem 1.1rem}
.offices .office-kind{letter-spacing:.06em;font-size:.64rem}
.offices .office address{font-size:var(--step--1)}
.offices .gmap{margin-top:auto;aspect-ratio:3/2}
.offices .gmap-cue{font-size:.72rem;padding:.55rem .85rem;bottom:.7rem}
.offices .gmap-note{padding:.6rem 1.1rem .85rem;font-size:.68rem}

/* ---------- forms ---------------------------------------------------------
   One form component, used by the Technology Review request and anything that
   follows it. No third-party widget: the anti-spam is a honeypot plus an
   arithmetic question, which costs a visitor nothing and loads nothing. */
.cform{margin:1.4rem 0 0;border:1px solid var(--line);border-radius:16px;padding:1.5rem;
  background:#fff;box-shadow:0 1px 2px rgba(15,26,51,.04)}
@media(min-width:700px){.cform{padding:1.9rem 2rem}}
.cform-row{display:grid;gap:0}
@media(min-width:620px){.cform-row{grid-template-columns:1fr 1fr;gap:0 1.1rem}}
.fld{display:block;margin-bottom:1.05rem}
.fld label{display:block;font:700 var(--step--1)/1.4 Manrope,system-ui,sans-serif;
  color:var(--navy);margin-bottom:.4rem}
.fld label span{float:right;font-weight:600;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);padding-top:.2rem}
.fld input,.fld select,.fld textarea{width:100%;font:400 var(--step-0)/1.5 inherit;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.7rem .85rem;
  -webkit-appearance:none;appearance:none}
.fld textarea{resize:vertical;min-height:6.5rem}
.fld select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2340485C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(113,79,247,.18)}
.fld input:user-invalid,.fld select:user-invalid{border-color:#B3261E}
.fld-help{display:block;font-size:.74rem;line-height:1.5;color:#5E6779;margin-top:.4rem}
.fld-check{max-width:22rem}
.fld-check b{font-variant-numeric:tabular-nums;color:var(--purple)}
/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-end{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;
  border-top:1px solid var(--line);padding-top:1.25rem;margin-top:.35rem}
.cform-terms{flex:1 1 18rem;font-size:.74rem;line-height:1.55;color:#5E6779}
.cform-alt{font-size:var(--step--1);line-height:1.6;color:#5E6779;margin-top:.9rem}
.form-msg:empty{display:none}
.form-msg{margin-top:1.1rem;padding:.85rem 1.05rem;border-radius:10px;font-size:var(--step--1);
  line-height:1.55;font-weight:600}
.form-msg.is-ok{background:#E7F6EC;color:#0F6E3D;border:1px solid #BFE5CC}
.form-msg.is-err{background:#FDECEA;color:#B3261E;border:1px solid #F5C6C2}
.form-msg a{color:inherit;text-decoration:underline}