/* Catalyst12 — B2B site inspired by Reiss / Gymshark editorial confidence */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --ink:#1a1a1a;
  --grey:#575756;
  --grey-2:#6e6e6d;
  --grey-soft:#f4f3f1;
  --line:#e5e3df;
  --orange:#ef7a37;
  --orange-dark:#d8642a;
  --white:#ffffff;
  --max:1320px;
  --serif:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .25s}
a:hover{color:var(--orange)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--grey)}
h1{font-size:clamp(2.5rem,6vw,5.5rem)}
h2{font-size:clamp(1.9rem,4vw,3.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
p{font-size:1.0625rem;color:var(--grey-2)}
.eyebrow{
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);font-weight:600;display:inline-block;margin-bottom:1rem;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 2rem}

/* ===== NAV ===== */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 2rem;max-width:var(--max);margin:0 auto;
}
.nav-logo img{height:34px}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{
  font-size:.88rem;font-weight:500;letter-spacing:.02em;color:var(--grey);
}
.nav-cta{
  background:var(--orange);color:#fff !important;
  padding:.7rem 1.3rem;border-radius:2px;font-weight:600;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
}
.nav-cta:hover{background:var(--orange-dark);color:#fff !important}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--grey)}
.nav-has-sub{position:relative}
.nav-has-sub .nav-sub-trigger{display:inline-flex;align-items:center;gap:.3rem}
.nav-caret{font-size:.7em;transition:transform .2s;color:var(--grey-2)}
.nav-has-sub:hover .nav-caret,.nav-has-sub:focus-within .nav-caret{transform:rotate(180deg)}
.nav-sub{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:10px;
  background:#fff;border:1px solid var(--line);min-width:240px;padding:.5rem 0;
  display:none;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-has-sub:hover .nav-sub,.nav-has-sub:focus-within .nav-sub{display:block}
.nav-sub a{display:block;padding:.7rem 1.25rem;font-size:.88rem;color:var(--grey);white-space:nowrap}
.nav-sub a:hover{background:var(--grey-soft);color:var(--ink)}

@media(max-width:900px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:1rem 2rem;border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.9rem 0;border-bottom:1px solid var(--line);width:100%}
  .nav-links a:last-child{border:0}
  .nav-toggle{display:block}
  .nav-has-sub{width:100%;border-bottom:1px solid var(--line)}
  .nav-has-sub .nav-sub-trigger{padding:.9rem 0;width:100%}
  .nav-has-sub .nav-caret{display:none}
  .nav-sub{position:static;transform:none;display:block;border:0;box-shadow:none;padding:0 0 .5rem 1rem;min-width:0}
  .nav-sub a{padding:.5rem 0;border-bottom:0;font-size:.85rem;color:var(--grey-2)}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;padding:1rem 2rem;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  border:0;cursor:pointer;transition:all .25s;border-radius:2px;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark);color:#fff;transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--grey);color:#fff}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline{background:transparent;color:var(--grey);border:1px solid var(--grey)}
.btn-outline:hover{background:var(--grey);color:#fff}

/* ===== HERO ===== */
.hero{
  background:var(--ink);color:#fff;
  padding:8rem 0 7rem;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(239,122,55,.18), transparent 60%),
    linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 2rem}
.hero h1{color:#fff;max-width:15ch;margin-bottom:1.5rem}
.hero h1 .accent{color:var(--orange);font-style:italic;font-weight:700}
.hero-lead{font-size:1.25rem;max-width:52ch;color:#c8c8c6;margin-bottom:2.5rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.hero-meta{
  display:flex;gap:2.5rem;margin-top:4rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap;
}
.hero-meta div{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#8d8d8b}
.hero-meta strong{display:block;color:#fff;font-size:1.75rem;font-family:var(--serif);letter-spacing:-.01em;margin-bottom:.25rem;font-weight:700}

/* ===== SECTIONS ===== */
section{padding:6rem 0}
.section-tight{padding:4rem 0}
.section-light{background:var(--grey-soft)}
.section-dark{background:var(--ink);color:#fff}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#c8c8c6}
.section-orange{background:var(--orange);color:#fff}
.section-orange h2{color:#fff}
.section-orange p{color:rgba(255,255,255,.92)}

.section-head{max-width:720px;margin-bottom:3.5rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ===== GRID ===== */
.grid{display:grid;gap:2rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ===== CARDS ===== */
.card{
  background:#fff;padding:2.5rem;border:1px solid var(--line);
  transition:all .3s;
}
.card:hover{border-color:var(--orange);transform:translateY(-4px)}
.card .num{font-family:var(--serif);font-size:3rem;color:var(--orange);font-weight:700;line-height:1;margin-bottom:1rem}
.card h3{margin-bottom:.8rem}
.card.dark{background:#242423;border-color:#2e2e2d;color:#c8c8c6}
.card.dark h3{color:#fff}

/* Stat */
.stat{text-align:left;padding:2rem 0;border-top:1px solid var(--line)}
.stat-num{font-family:var(--serif);font-size:clamp(2.5rem,5vw,4rem);color:var(--orange);font-weight:700;line-height:1;letter-spacing:-.02em}
.stat-label{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);margin-top:.5rem}
.stat-desc{margin-top:.75rem;font-size:.95rem}

/* Feature row (alternating image/text) */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:6rem}
.feature-row:last-child{margin-bottom:0}
.feature-row.reverse .feature-img{order:2}
.feature-img{aspect-ratio:4/5;background:var(--grey-soft);overflow:hidden;position:relative}
.feature-img img, .feature-img video{width:100%;height:100%;object-fit:cover;display:block}
.feature-video{aspect-ratio:9/16 !important;max-height:720px;background:#0f0f0f}
.feature-video video{object-fit:contain}

/* Video sound toggle */
.video-sound{
  position:absolute;bottom:1rem;left:1rem;z-index:3;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:all .2s;
}
.video-sound:hover{background:var(--orange);transform:scale(1.05)}
.video-sound svg{pointer-events:none}

/* Bottom-right label (moves out of the way of any top-left logo in the video) */
.feature-img .label.label-br{
  top:auto;left:auto;bottom:1rem;right:1rem;
}

.feature-img .label.label-br{top:auto;bottom:1.25rem;left:auto;right:1.25rem;background:#fff;color:var(--orange)}
.video-sound{
  position:absolute;top:1rem;right:1rem;z-index:3;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(15,15,15,.7);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:background .25s, transform .25s;
}
.video-sound:hover{background:var(--orange);transform:scale(1.06)}
.video-sound svg{display:block}

/* ===== Cookie banner ===== */
#c12-cookie{
  position:fixed;left:1.25rem;right:1.25rem;bottom:1.25rem;z-index:9000;
  max-width:760px;margin:0 auto;background:#1a1a1a;color:#fff;
  border:1px solid #2a2a2a;border-radius:4px;padding:1.25rem 1.5rem;
  display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
  transform:translateY(20px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s;
}
#c12-cookie.show{transform:none;opacity:1}
#c12-cookie .c12-copy{flex:1;min-width:260px}
#c12-cookie h4{font-family:var(--sans);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 .35rem;font-weight:600}
#c12-cookie p{color:#c8c8c6;font-size:.88rem;line-height:1.5;margin:0}
#c12-cookie p a{color:#fff;text-decoration:underline}
#c12-cookie .c12-actions{display:flex;gap:.6rem;flex-wrap:wrap}
#c12-cookie button{
  border:0;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;padding:.7rem 1.1rem;border-radius:2px;
  cursor:pointer;transition:all .25s;
}
#c12-cookie .c12-accept{background:var(--orange);color:#fff}
#c12-cookie .c12-accept:hover{background:var(--orange-dark)}
#c12-cookie .c12-reject{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
#c12-cookie .c12-reject:hover{background:rgba(255,255,255,.08)}
@media (max-width:640px){
  #c12-cookie{flex-direction:column;align-items:stretch;text-align:left}
  #c12-cookie .c12-actions{justify-content:flex-end}
}
.feature-img .label{
  position:absolute;top:1.5rem;left:1.5rem;background:#fff;
  padding:.5rem 1rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--orange);
}
@media(max-width:900px){
  .feature-row{grid-template-columns:1fr;gap:2rem;margin-bottom:4rem}
  .feature-row.reverse .feature-img{order:0}
}

/* ===== FRAMEWORK STEPPER ===== */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stepper .step{background:#fff;padding:2.5rem 2rem;position:relative}
.stepper .step .step-num{font-family:var(--serif);font-size:.9rem;color:var(--orange);font-weight:700;letter-spacing:.2em;margin-bottom:1rem}
.stepper .step h3{margin-bottom:.5rem;color:var(--grey)}
.stepper .step .weeks{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);margin-bottom:1rem;display:block}
@media(max-width:900px){.stepper{grid-template-columns:1fr}}

/* ===== QUOTE ===== */
.pullquote{
  max-width:900px;margin:0 auto;text-align:center;
  font-family:var(--serif);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.25;color:var(--grey);
}
.pullquote .mark{color:var(--orange)}
.pullquote cite{
  display:block;margin-top:2rem;font-family:var(--sans);font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;font-style:normal;font-weight:600;color:var(--grey-2);
}

/* ===== DIAGNOSTIC QUIZ ===== */
.quiz-wrap{max-width:820px;margin:0 auto}
.quiz-bar{height:4px;background:var(--line);margin-bottom:3rem;overflow:hidden}
.quiz-bar-fill{height:100%;background:var(--orange);width:0;transition:width .4s}
.quiz-step{display:none}
.quiz-step.active{display:block;animation:fadeIn .4s}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quiz-count{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:1rem}
.quiz-question{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--grey);margin-bottom:2rem;letter-spacing:-.01em;line-height:1.2}
.quiz-options{display:grid;gap:.75rem}
.quiz-opt{
  border:1px solid var(--line);background:#fff;padding:1.3rem 1.6rem;
  text-align:left;cursor:pointer;font-size:1rem;color:var(--grey);
  font-family:var(--sans);font-weight:400;transition:all .2s;
  display:flex;align-items:center;gap:1rem;
}
.quiz-opt:hover{border-color:var(--orange);color:var(--ink)}
.quiz-opt.selected{border-color:var(--orange);background:#fff8f3;color:var(--ink)}
.quiz-opt .dot{width:14px;height:14px;border:1px solid var(--grey-2);border-radius:50%;flex:none;position:relative}
.quiz-opt.selected .dot{border-color:var(--orange)}
.quiz-opt.selected .dot::after{content:"";position:absolute;inset:3px;background:var(--orange);border-radius:50%}
.quiz-nav{display:flex;justify-content:space-between;margin-top:2.5rem;gap:1rem}
.quiz-result{display:none}
.quiz-result.show{display:block;animation:fadeIn .5s}
.score-ring{
  width:180px;height:180px;border-radius:50%;margin:0 auto 2rem;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--orange) calc(var(--p)*1%), var(--line) 0);
}
.score-ring::before{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}
.score-ring span{position:relative;font-family:var(--serif);font-size:3rem;font-weight:700;color:var(--grey)}
.score-ring small{position:relative;font-size:.8rem;color:var(--grey-2);letter-spacing:.15em;text-transform:uppercase;display:block;margin-top:.25rem;text-align:center}

/* ===== PEOPLE ===== */
.person{
  text-align:left;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  padding:1.75rem;
  height:100%;
  transition:border-color .25s, box-shadow .25s;
}
.person:hover{border-color:var(--orange);box-shadow:0 18px 40px -22px rgba(0,0,0,.12)}
.person-img{
  width:100%;max-width:none;aspect-ratio:1/1;
  overflow:hidden;background:var(--grey-soft);
  margin:0 0 1.5rem;border-radius:4px;
}
.person-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(15%)}
.person h3{margin:0 0 .35rem;font-size:1.35rem;line-height:1.2}
.person .role{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);font-weight:600;margin-bottom:1rem;display:block;
}
.person p{font-size:.95rem;line-height:1.55;color:var(--grey-2);margin:0 0 1rem}
.person .tags{padding-top:.5rem;justify-content:flex-start}
.person .linkedin-link{margin-top:auto;padding-top:1.25rem;display:flex;justify-content:flex-start;gap:1rem}

/* Founder grid — keep tight so two cards sit naturally side-by-side */
.founders-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;
  max-width:780px;margin:0 auto;
}
@media(max-width:700px){
  .founders-grid{grid-template-columns:1fr;max-width:380px}
}

/* Affiliation logos under the fractional team grid */
.team-affiliations{
  margin:4rem auto 0;padding:2.5rem 2rem 0;
  border-top:1px solid var(--line);
  max-width:900px;text-align:center;
}
.team-affiliations .affiliation-label{
  display:block;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey-2);font-weight:600;
  margin-bottom:1.75rem;
}
.team-affiliations .logos-row{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:3.5rem;
}
.team-affiliations a{
  display:inline-flex;align-items:center;
  transition:filter .25s, color .25s;
}
.team-affiliations img{
  max-height:42px;width:auto;
  /* Recolour the TrueWorth PNG to Catalyst12 dark grey */
  filter:brightness(0) saturate(100%) opacity(.55);
  transition:filter .25s;
}
.team-affiliations a:hover img{
  /* Hover → orange */
  filter:brightness(0) saturate(100%) invert(54%) sepia(89%) saturate(2270%) hue-rotate(347deg) brightness(98%) contrast(90%);
}
.team-affiliations .wordmark{
  font-family:var(--serif);font-weight:700;
  font-size:1.5rem;letter-spacing:.55em;
  color:var(--grey);text-transform:uppercase;
  padding-right:.55em;
  transition:color .25s;
}
.team-affiliations a:hover .wordmark{color:var(--orange)}
@media(max-width:600px){
  .person-img{max-width:160px}
  .team-affiliations{margin-top:3rem;padding:2rem 1rem 0}
  .team-affiliations .logos-row{gap:2rem}
  .team-affiliations img{max-height:34px}
  .team-affiliations .wordmark{font-size:1.2rem}
}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);border:1px solid var(--line);padding:.4rem .8rem;font-weight:500}

/* ===== CTA BANNER ===== */
.cta-banner{
  background:var(--ink);color:#fff;padding:6rem 0;text-align:center;
  background-image:linear-gradient(180deg,#1a1a1a 0%,#262625 100%);
}
.cta-banner h2{color:#fff;max-width:20ch;margin:0 auto 1rem}
.cta-banner p{color:#c8c8c6;max-width:50ch;margin:0 auto 2rem}

/* ===== BLOG ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.post{cursor:pointer}
.post-img{aspect-ratio:3/2;background:var(--grey-soft);margin-bottom:1.5rem;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.post:hover .post-img img{transform:scale(1.04)}
.post-meta{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:.75rem}
.post h3{margin-bottom:.75rem;font-size:1.4rem}
.post p{font-size:.95rem}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form-field{margin-bottom:1.25rem}
.form-field label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);margin-bottom:.5rem;font-weight:600}
.form-field input,.form-field textarea,.form-field select{
  width:100%;border:1px solid var(--line);padding:.9rem 1rem;font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:#fff;border-radius:0;transition:border-color .2s;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:0;border-color:var(--orange)}
.form-field textarea{min-height:140px;resize:vertical}

/* ===== FOOTER ===== */
footer{background:#0f0f0f;color:#8d8d8b;padding:5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}
footer img{height:34px;margin-bottom:1.5rem}
footer h4{color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.25rem;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:.6rem;font-size:.9rem}
footer a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid #222;padding-top:2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem}

/* ===== PAGE HEAD (non-home hero) ===== */
.page-head{
  background:var(--ink);color:#fff;padding:7rem 0 5rem;
}
.page-head .eyebrow{color:var(--orange)}
.page-head h1{color:#fff;max-width:20ch;margin-bottom:1rem;font-size:clamp(2.2rem,5vw,4.2rem)}
.page-head p{color:#c8c8c6;max-width:60ch;font-size:1.15rem}

/* Accent rule */
.rule{width:48px;height:3px;background:var(--orange);margin-bottom:1.5rem}

/* ===== ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference){

  /* Scroll-reveal base */
  .reveal{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.delay-1{transition-delay:.08s}
  .reveal.delay-2{transition-delay:.16s}
  .reveal.delay-3{transition-delay:.24s}
  .reveal.delay-4{transition-delay:.32s}

  /* Hero intro */
  .hero .eyebrow{animation:fadeUp .8s .1s both}
  .hero h1{animation:fadeUp .9s .2s both}
  .hero .hero-lead{animation:fadeUp .9s .35s both}
  .hero .hero-ctas{animation:fadeUp .9s .5s both}
  .hero .hero-meta{animation:fadeUp .9s .65s both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* Accent underline pulse on italic word */
  .hero h1 .accent{position:relative;display:inline-block}
  .hero h1 .accent::after{
    content:"";position:absolute;left:0;bottom:.05em;height:3px;width:100%;
    background:var(--orange);transform:scaleX(0);transform-origin:left;
    animation:sweep 1.2s 1s cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes sweep{to{transform:scaleX(1)}}

  /* Nav link underline */
  .nav-links a:not(.nav-cta){position:relative}
  .nav-links a:not(.nav-cta)::after{
    content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;
    background:var(--orange);transform:scaleX(0);transform-origin:right;
    transition:transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left}

  /* Cards — tighter lift */
  .card{transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s}
  .card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(0,0,0,.22)}

  /* Feature images — Ken Burns style zoom on reveal */
  .feature-img img, .case-img img, .post-img img, .person-img img{
    transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s;
  }
  .feature-img:hover img, .case-img:hover img{transform:scale(1.04)}
  .post:hover .post-img img{transform:scale(1.06)}

  /* Feature-img label slide in */
  .feature-img .label{transform:translateY(-8px);opacity:0;transition:all .5s .2s cubic-bezier(.2,.7,.2,1)}
  .reveal.in .feature-img .label, .feature-img.in .label{transform:none;opacity:1}

  /* Stepper steps stagger-reveal */
  .stepper .step{opacity:0;transform:translateY(20px);transition:all .7s cubic-bezier(.2,.7,.2,1)}
  .stepper.in .step{opacity:1;transform:none}
  .stepper.in .step:nth-child(1){transition-delay:0s}
  .stepper.in .step:nth-child(2){transition-delay:.1s}
  .stepper.in .step:nth-child(3){transition-delay:.2s}
  .stepper.in .step:nth-child(4){transition-delay:.3s}

  /* Stat numbers — slight count-up feel via rise */
  .stat-num, .num{display:inline-block;transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s}
  .reveal .stat-num, .reveal .num{opacity:0;transform:translateY(14px)}
  .reveal.in .stat-num, .reveal.in .num{opacity:1;transform:none}

  /* Buttons — sheen */
  .btn-primary{position:relative;overflow:hidden}
  .btn-primary::before{
    content:"";position:absolute;top:0;left:-75%;width:60%;height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    transform:skewX(-20deg);transition:left .6s cubic-bezier(.2,.7,.2,1);
  }
  .btn-primary:hover::before{left:125%}

  /* Hero background subtle drift */
  .hero::before{animation:drift 18s ease-in-out infinite alternate}
  @keyframes drift{
    0%{background-position:0% 0%, 0% 0%}
    100%{background-position:6% -4%, 0% 0%}
  }

  /* Quiz option lift */
  .quiz-opt{transition:all .25s cubic-bezier(.2,.7,.2,1)}
  .quiz-opt:hover{transform:translateX(4px)}

  /* Score ring draw-in */
  .score-ring{animation:ringIn 1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ringIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}

  /* Tag hover */
  .tag{transition:all .25s}
  .tag:hover{border-color:var(--orange);color:var(--orange)}

  /* Checklist entry stagger */
  .reveal .checklist li{opacity:0;transform:translateX(-10px);transition:all .5s cubic-bezier(.2,.7,.2,1)}
  .reveal.in .checklist li{opacity:1;transform:none}
  .reveal.in .checklist li:nth-child(1){transition-delay:.05s}
  .reveal.in .checklist li:nth-child(2){transition-delay:.12s}
  .reveal.in .checklist li:nth-child(3){transition-delay:.19s}
  .reveal.in .checklist li:nth-child(4){transition-delay:.26s}
  .reveal.in .checklist li:nth-child(5){transition-delay:.33s}
  .reveal.in .checklist li:nth-child(6){transition-delay:.40s}
  .reveal.in .checklist li:nth-child(7){transition-delay:.47s}
  .reveal.in .checklist li:nth-child(8){transition-delay:.54s}
}

/* Services list */
.service-block{padding:3rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:3rem}
.service-block:last-child{border-bottom:1px solid var(--line)}
.service-block .tag-lg{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:.75rem}
.service-block h3{font-size:2rem;margin-bottom:1rem}
.service-block ul{list-style:none;margin-top:1.5rem}
.service-block li{padding:.6rem 0;border-top:1px solid var(--line);color:var(--grey-2);display:flex;gap:1rem}
.service-block li::before{content:"—";color:var(--orange);font-weight:700}
@media(max-width:900px){.service-block{grid-template-columns:1fr;gap:1rem}}

/* Results / case cards */
.case{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:4rem 0;border-top:1px solid var(--line);align-items:center}
.case.reverse{direction:rtl}
.case.reverse > *{direction:ltr}
.case-img{aspect-ratio:4/3;background:var(--grey-soft);overflow:hidden}
.case-img img{width:100%;height:100%;object-fit:cover}
.case h3{font-size:1.8rem;margin-bottom:.5rem}
.case .client{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:1.5rem;display:block}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.case-stats strong{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--orange);font-weight:700;line-height:1;margin-bottom:.4rem}
.case-stats span{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey-2)}
@media(max-width:900px){.case,.case.reverse{grid-template-columns:1fr;direction:ltr}}

/* Checklist */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}
.checklist li{list-style:none;padding:1rem 1.2rem;border-left:2px solid var(--orange);background:#fff;font-size:.95rem;color:var(--grey)}
@media(max-width:700px){.checklist{grid-template-columns:1fr}}

/* Marquee of logos / facts strip */
.strip{background:var(--ink);padding:2rem 0;color:#fff;overflow:hidden}
.strip-inner{display:flex;gap:3rem;align-items:center;justify-content:center;flex-wrap:wrap}
.strip-item{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:#c8c8c6}
.strip-item .dot-sep{color:var(--orange);margin:0 1rem}

/* ===== CLIENT LOGO STRIP ===== */
.client-strip{padding:3.5rem 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.client-strip .strip-label{text-align:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2);font-weight:600;margin-bottom:2rem}
.client-strip .logos{display:flex;align-items:center;justify-content:space-around;gap:2rem;flex-wrap:wrap;max-width:1100px;margin:0 auto;padding:0 2rem}
.client-strip .logos img{max-height:44px;max-width:180px;width:auto;filter:grayscale(100%) brightness(.55);opacity:.75;transition:all .3s}
.client-strip .logos img:hover{filter:grayscale(0%) brightness(1);opacity:1}
.client-strip .logos .logo-text{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:var(--grey);opacity:.65;transition:opacity .3s;line-height:44px}
.client-strip .logos .logo-text:hover{opacity:1}

/* ===== FAQ ===== */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{padding:1.75rem 0;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--grey);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--orange);font-size:1.5rem;font-weight:400;transition:transform .3s;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open] summary{color:var(--orange)}
.faq-item .faq-body{padding:0 0 1.75rem;max-width:70ch}
.faq-item .faq-body p{font-size:1rem;line-height:1.7;margin-bottom:1rem}
.faq-item .faq-body ul{padding-left:1.25rem;margin:1rem 0}
.faq-item .faq-body li{font-size:1rem;line-height:1.7;color:var(--grey)}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:9999;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.skip-link:focus{left:1rem;top:1rem;color:#fff}

/* Footer social icons */
.foot-social{display:flex;gap:.8rem;margin-top:1rem}
.foot-social a{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;background:#1e1e1e;color:#c8c8c6;transition:all .2s}
.foot-social a:hover{background:var(--orange);color:#fff}
.foot-social svg{width:16px;height:16px}

/* ===========================================================
   MOBILE SWEEP — collapses hardcoded inline 2-col grids and
   tightens layouts that shipped without media queries.
   =========================================================== */
@media (max-width: 900px) {
  /* Generic: any element with inline grid-template-columns using
     1fr 1fr, 2fr 1fr, 1.2fr 1fr, 1.6fr 1fr collapses to single column. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: left !important;
  }

  /* Diagnostic teaser inner section orange: stop the CTA from being trapped on the right */
  .section-orange .wrap > div:last-child { text-align: left !important; }

  /* Hero meta: three stats were laid out as a horizontal flex that got cramped.
     Stack them with a top border between. */
  .hero-meta { gap: 1.5rem !important; flex-direction: column; align-items: flex-start; }
  .hero-meta div { font-size: .7rem; }
  .hero-meta strong { font-size: 1.5rem; }

  /* Heart-pull cards and other 2-col layouts already collapse via .grid-2, but tighten padding */
  .card { padding: 1.75rem 1.5rem; }
  .card .num { font-size: 2.2rem; margin-bottom: .75rem; }

  /* Sections: less vertical breathing room on mobile */
  section { padding: 4rem 0; }
  .hero { padding: 5rem 0 4.5rem; }
  .cta-banner { padding: 4rem 0; }
  .page-head { padding: 5rem 0 3rem; }

  /* Feature row video: cap height so 9:16 vertical video doesn't dominate screen */
  .feature-video { max-height: 520px !important; aspect-ratio: 9/16 !important; }

  /* Stepper steps get a visible border between them when stacked */
  .stepper .step { border-bottom: 1px solid var(--line); }
  .stepper .step:last-child { border-bottom: 0; }

  /* Case studies collapse cleanly — stats row needs smaller font */
  .case-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .case-stats strong { font-size: 1.3rem; }

  /* Blog cards breathe better */
  .blog-grid { gap: 2rem; }
  .post h3 { font-size: 1.2rem; }

  /* Client logos strip: centre items, smaller logos */
  .client-strip { padding: 2.5rem 0; }
  .client-strip .logos { gap: 1.5rem; }
  .client-strip .logos img { max-height: 32px; max-width: 120px; }

  /* Footer: reduce grid density and spacing */
  .foot-grid { gap: 2rem; margin-bottom: 2.5rem; }
  footer { padding: 3.5rem 0 1.5rem; }
  .foot-bottom { font-size: .72rem; gap: .75rem; flex-direction: column; align-items: flex-start; }

  /* Cookie banner: actions full width on small screens */
  #c12-cookie { padding: 1rem 1.25rem; left: .75rem; right: .75rem; bottom: .75rem; }
  #c12-cookie h4 { font-size: .78rem; }
  #c12-cookie p { font-size: .82rem; }

  /* Contact page person cards — image smaller, flex wraps */
  .contact-grid img[style*="border-radius:50%"] { width: 72px !important; height: 72px !important; }

  /* Service blocks keep bullets readable */
  .service-block { padding: 2rem 0; }
  .service-block h3 { font-size: 1.4rem; }

  /* FAQ summaries wrap without the + being orphaned */
  .faq-item summary { font-size: 1.05rem; gap: 1rem; padding: 1.25rem 0; }

  /* Testimonial cards — tighter padding */
  .tm-card { padding: 1.75rem 1.5rem; }
  .tm-card blockquote { font-size: .95rem; }
}

/* Extra-small screens (narrow phones) */
@media (max-width: 480px) {
  .wrap { padding: 0 1.25rem; }
  .nav-inner { padding: .9rem 1.25rem; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .hero-ctas .btn, .cta-banner .btn { width: 100%; text-align: center; }
  .hero-ctas { flex-direction: column; }
  .quiz-opt { padding: 1rem 1.1rem; font-size: .95rem; }
  .quiz-question { font-size: 1.3rem; }
  .quiz-nav { flex-direction: column-reverse; }
  .quiz-nav .btn { width: 100%; text-align: center; }
  /* Stack case stats on very small screens */
  .case-stats { grid-template-columns: 1fr; }
  /* Form inputs easier to tap */
  .form-field input, .form-field textarea, .form-field select { padding: 1rem; }
}

/* ===========================================================
   MOBILE TIGHTEN v2 — reduce inter-section dead space and
   constrain video so it feels centred on small screens.
   =========================================================== */
@media (max-width: 900px) {
  section, .client-strip { padding: 2.5rem 0 !important; }
  .hero { padding: 4rem 0 3rem !important; }
  .cta-banner { padding: 3rem 0 !important; }
  .page-head { padding: 4rem 0 2.5rem !important; }

  /* Force align-items: start so any cell with an inline align-items:center
     doesn't try to vertically centre content in a 1-col grid row */
  [style*="grid-template-columns"] { align-items: start !important; }

  /* Video feature on home: constrain width, centre horizontally,
     remove the letterbox dead space inside the 9:16 container */
  .feature-video {
    max-width: 320px !important;
    margin: 0 auto !important;
    max-height: none !important;
  }

  /* Feature-img 1:1 square on home "Start with the truth" — cap at 320px
     so it doesn't turn into a huge square on wider phones */
  .section-dark [style*="aspect-ratio:1/1"],
  .section-dark [style*="aspect-ratio: 1/1"] {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Remove the big bottom margin on sections whose next section is
     the Stancia partnership (centred layout — user perceived dead gap).
     Achieved by always using tight padding above. */
}

/* ===========================================================
   MOBILE TIGHTEN v3 — eliminate dead space under dark-section CTAs
   =========================================================== */
@media (max-width: 900px) {
  /* For inline 2-col grids inside dark sections (home "Start with the truth",
     diagnostic deep-dive etc.) — aggressively tighten vertical space. */
  .section-dark [style*="grid-template-columns"],
  .section-light [style*="grid-template-columns"],
  .section-orange [style*="grid-template-columns"]{
    gap: 1.5rem !important;
    align-items: stretch !important;
  }

  /* Any feature-img sitting in a dark/orange section with inline aspect-ratio:1/1
     becomes a short landscape banner on mobile (was a big square taking 311px). */
  .section-dark .feature-img[style*="aspect-ratio:1/1"],
  .section-orange .feature-img[style*="aspect-ratio:1/1"] {
    aspect-ratio: 16/9 !important;
    max-width: 100% !important;
    max-height: 200px !important;
    margin: 0 auto !important;
  }

  /* Step-zero services image (aspect-ratio:4/5) also gets trimmed */
  .section-orange .feature-img[style*="aspect-ratio:4/5"] {
    aspect-ratio: 16/9 !important;
    max-height: 220px !important;
  }

  /* Checklist inside dark sections stacks single column tight */
  .section-dark .checklist { grid-template-columns: 1fr !important; gap: .6rem !important; }
  .section-dark .checklist li { padding: .8rem 1rem; font-size: .9rem; }

  /* Sections: even tighter than v2 */
  section { padding: 3rem 0 !important; }
  .cta-banner { padding: 3rem 0 !important; }
  .page-head { padding: 4rem 0 2rem !important; }

  /* Remove any orphan grid-auto-rows that might inherit odd heights */
  .wrap[style*="display:grid"] > * { align-self: start !important; }
}

/* 5-column stepper variant (Diagnose → Wins Delivered flow) */
.stepper.stepper-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.stepper.stepper-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.stepper.stepper-5{grid-template-columns:1fr}}

/* ===== PARTNER CARDS ===== */
.partner-card{
  background:#fff;
  padding:2.5rem;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:relative;
  transition:border-color .25s, box-shadow .25s;
}
.partner-card:hover{border-color:var(--orange);box-shadow:0 18px 40px -22px rgba(0,0,0,.18)}

/* Person header inside a partner card (used for Constance et al) */
.partner-person{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem 0 1rem;
  margin-top:1.25rem;
  border-top:1px solid var(--line);
}
.partner-person-img{
  width:64px;height:64px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
  filter:grayscale(0%);
  background:var(--grey-soft);
}
.partner-person-meta{display:flex;flex-direction:column;line-height:1.25}
.partner-person-name{
  font-family:var(--serif);
  font-weight:700;
  color:var(--grey);
  font-size:1.05rem;
}
.partner-person-role{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:600;
  margin-top:.2rem;
}
.partner-person-bio{
  font-size:.95rem;
  font-style:italic;
  color:var(--grey);
  border-left:2px solid var(--orange);
  padding:.25rem 0 .25rem 1rem;
  margin:0 0 1rem;
}
@media(max-width:600px){
  .partner-person-img{width:56px;height:56px}
}

/* ===== PARTNER CARDS — multi-person ===== */
.partner-people{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin:1.75rem 0 0;
  padding:1.5rem 0 0;
  border-top:1px solid var(--line);
}
.partner-person-block{display:flex;flex-direction:column;gap:.75rem}
.partner-person-img-placeholder{
  display:inline-grid;
  place-items:center;
  background:var(--orange);
  color:#fff;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.partner-person-meta{display:flex;flex-direction:column;line-height:1.25;gap:.15rem}
.partner-person-linkedin{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  font-weight:600;
  color:var(--grey);
  margin-top:.4rem;
  width:fit-content;
}
.partner-person-linkedin:hover{color:var(--orange)}

/* Partner card body wrapper — min-height ensures both cards' body sections
   end at the same Y position so the people sections start visually aligned
   even when one card has longer body copy than the other. */
.partner-card .partner-body{ min-height: 16rem }
.partner-card .partner-spacer{ flex: 1 }
@media(max-width:900px){ .partner-card .partner-body{ min-height: 0 } }