:root{
  --cream:#F7F4EE; --paper:#FDFBF7; --ink:#251E18; --muted:#6B6156;
  --navy:#132649; --navy-soft:#1E3A6E; --line:#E3DDD2; --gold:#B08D3E;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:"Libre Baskerville",Georgia,serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
header{padding:28px 0;border-bottom:1px solid var(--line)}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.wordmark{font-family:"Playfair Display",serif;font-weight:700;font-size:22px;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;text-decoration:none}
.wordmark span{color:var(--navy)}
.header-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.header-tag a{color:var(--navy);text-decoration:none}
.hero{padding:88px 0 56px;text-align:center}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
h1{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(34px,5.4vw,58px);line-height:1.14;max-width:860px;margin:0 auto}
h1 em{font-style:italic;color:var(--navy)}
.hero p{max-width:640px;margin:26px auto 0;color:var(--muted);font-size:17px}
.statband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.stats{display:grid;grid-template-columns:repeat(6,1fr)}
.stats.five{grid-template-columns:repeat(5,1fr)}
.stat{padding:34px 12px;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat b{display:block;font-family:"Playfair Display",serif;font-size:clamp(19px,2vw,26px);font-weight:700;color:var(--navy);white-space:nowrap}
.stat span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
@media(max-width:900px){.stats,.stats.five{grid-template-columns:repeat(3,1fr)}.stat:nth-child(4){border-left:none}}
@media(max-width:560px){.stats,.stats.five{grid-template-columns:repeat(2,1fr)}.stat{border-left:none;border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:none}}
.logos{padding:48px 0 14px;text-align:center}
.logos-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.logo-wall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 52px;max-width:960px;margin:0 auto}
.logo-wall a{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-wall img{height:30px;width:auto;display:block;filter:brightness(0);opacity:.55;transition:opacity .15s ease}
.logo-wall img.blend{filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.75}
.logo-wall img.invert{filter:invert(1) grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.75}
.logo-wall img.icon{height:26px}
.logo-wall img.tall{height:40px}
.logo-wall a:hover img{opacity:.95}
.logo-wall .logo-name{font-family:"Playfair Display",serif;font-size:16px;font-weight:600;color:var(--ink);opacity:.6;letter-spacing:.03em}
.logo-wall a:hover .logo-name{opacity:.95}
section{padding:64px 0}
.sec-head{max-width:700px;margin:0 auto 46px;text-align:center}
h2{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.2}
.sec-head p{margin-top:14px;color:var(--muted)}
.featured{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.featured{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:34px 32px;break-inside:avoid;position:relative}
.card .metric{font-family:"Playfair Display",serif;font-size:26px;font-weight:700;color:var(--navy);margin-bottom:4px}
.card .metric-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
blockquote{font-size:16px;line-height:1.72}
blockquote.lg{font-size:17.5px}
.attrib{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#F8F6F2;display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-weight:600;font-size:16px;flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.attrib .who b{display:block;font-family:"Playfair Display",serif;font-size:15.5px;font-weight:600}
.attrib .who span{font-size:13px;color:var(--muted)}
.stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:14px}
.wall{columns:3;column-gap:22px}
.wall .card{margin-bottom:22px}
@media(max-width:980px){.wall{columns:2}}
@media(max-width:640px){.wall{columns:1}}
.honest{background:var(--navy);color:#EDE9E0}
.honest h2,.honest .sec-head p{color:#F8F6F2}
.honest .sec-head p{color:#B9C3D6}
.honest .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.honest blockquote{color:#EDE9E0}
.honest .attrib{border-top-color:rgba(255,255,255,.14)}
.honest .attrib .who b{color:#F8F6F2}
.honest .attrib .who span{color:#9FACC4}
.honest .avatar{background:#F8F6F2;color:var(--navy)}
.honest .metric-label{color:#C9A55C}
.cta{text-align:center;padding:84px 0}
.cta h2{max-width:640px;margin:0 auto}
.cta p{max-width:520px;margin:18px auto 0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;font-size:12.5px;color:var(--muted)}
footer a{color:var(--navy);text-decoration:none}

/* Site tabs (shared with the React header on / and /roadmap) */
.nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.nav a:hover,.nav a.active{color:var(--navy)}
a.btn{display:inline-block;background:var(--navy);color:#F8F6F2;font-family:"Playfair Display",serif;font-weight:600;font-size:15px;letter-spacing:.04em;padding:13px 30px;border-radius:6px;text-decoration:none;transition:background .15s ease,transform .15s ease}
a.btn:hover{background:var(--navy-soft);transform:translateY(-1px)}
a.btn.sm{font-size:14px;padding:10px 22px}
.nav a.btn{color:#F8F6F2;font-size:14px;letter-spacing:.04em;text-transform:none}
@media(max-width:640px){header{padding:18px 0}.header-row{gap:12px}.nav{gap:14px}.nav a:not(.btn){font-size:11px}.nav a.btn{padding:8px 16px;font-size:13px}}

/* Case study index cards */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.case-grid{grid-template-columns:1fr}}
a.case-card{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:30px 28px;transition:border-color .15s ease, transform .15s ease}
a.case-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.case-card .co{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.case-card h3{font-family:"Playfair Display",serif;font-weight:600;font-size:20px;line-height:1.3;margin-bottom:12px}
.case-card p{font-size:14px;color:var(--muted)}
.case-card .go{margin-top:18px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}

/* Case study detail pages */
.case-hero{padding:72px 0 48px}
.case-hero .crumb{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:26px}
.case-hero .crumb a{color:var(--navy);text-decoration:none}
.case-hero .tags{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.case-hero h1{text-align:left;margin:0;max-width:900px;font-size:clamp(30px,4.6vw,48px)}
.case-hero h1 em{font-style:italic;color:var(--navy)}
.case-hero .dek{max-width:760px;margin-top:22px;color:var(--muted);font-size:17px}
.case-sec{padding:56px 0;border-top:1px solid var(--line)}
.case-sec .num{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.case-sec h2{margin-bottom:22px}
.case-sec .lede{max-width:760px;color:var(--muted);margin-bottom:30px}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin:26px 0}
@media(max-width:560px){.glance{grid-template-columns:repeat(2,1fr)}}
.glance .g{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:22px 16px;text-align:center}
.glance .g b{display:block;font-family:"Playfair Display",serif;font-size:clamp(19px,2vw,25px);font-weight:700;color:var(--navy);white-space:nowrap}
.glance .g span{display:block;margin-top:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.pull{border-left:3px solid var(--gold);padding:6px 0 6px 26px;margin:34px 0;max-width:780px}
.pull blockquote{font-family:"Playfair Display",serif;font-size:20px;font-style:italic;line-height:1.55}
.pull .by{margin-top:14px;font-size:13px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
@media(max-width:820px){.facts{grid-template-columns:1fr}}
.facts .f{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.facts .f b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.facts .f span{font-size:14.5px}
.timeline{margin:30px 0;max-width:820px}
.tl{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.tl:last-child{border-bottom:1px solid var(--line)}
.tl .when{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding-top:3px}
.tl h4{font-family:"Playfair Display",serif;font-size:17px;font-weight:600;margin-bottom:8px}
.tl p{font-size:14.5px;color:var(--muted)}
@media(max-width:560px){.tl{grid-template-columns:1fr;gap:8px}}
ul.checks{list-style:none;max-width:780px;margin:20px 0}
ul.checks li{padding:10px 0 10px 30px;position:relative;font-size:15px}
ul.checks li::before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:700}
.case-next{background:var(--navy);color:#EDE9E0;text-align:center;padding:76px 0}
.case-next h2{color:#F8F6F2;max-width:640px;margin:0 auto}
.case-next p{max-width:560px;margin:18px auto 0;color:#B9C3D6}
.case-next a.btn{display:inline-block;margin-top:30px;background:#F8F6F2;color:var(--navy);font-family:"Playfair Display",serif;font-weight:600;font-size:15px;letter-spacing:.04em;padding:14px 34px;border-radius:6px;text-decoration:none}
.words-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
@media(max-width:820px){.words-grid{grid-template-columns:1fr}}

/* Mobile rhythm */
@media(max-width:640px){
  .hero{padding:52px 0 40px}
  .hero p{margin-top:20px;font-size:15.5px}
  section{padding:46px 0}
  .sec-head{margin-bottom:30px}
  .sec-head p{font-size:14.5px}
  .cta{padding:56px 0}
  .case-hero{padding:44px 0 34px}
  .case-hero .dek{font-size:15.5px;margin-top:16px}
  .case-sec{padding:40px 0}
  .logos{padding:36px 0 8px}
  .logo-wall{gap:18px 28px}
  .logo-wall img{height:26px}
  .logo-wall img.tall{height:32px}
  .card{padding:26px 22px}
  .featured{gap:16px}
  .wall .card{margin-bottom:16px}
  .case-grid{gap:14px}
  a.case-card{padding:24px 22px}
  blockquote.lg{font-size:16px}
  .glance{gap:12px}
  .glance .g{padding:18px 12px}
  .stat{padding:24px 10px}
  .case-next{padding:56px 0}
  .timeline .tl{padding:16px 0}
  .facts{gap:12px}
  .attrib{margin-top:18px;padding-top:16px}
}

/* Specificity fixes: combined selectors so vertical rhythm AND side padding both apply */
.hero.wrap{padding:88px 24px 56px}
section.wrap{padding:64px 24px}
.logos.wrap{padding:48px 24px 14px}
.cta.wrap{padding:84px 24px}
.case-hero.wrap{padding:72px 24px 48px}
.case-sec.wrap{padding:56px 24px}
@media(max-width:640px){
  .hero.wrap{padding:52px 24px 40px}
  section.wrap{padding:46px 24px}
  .logos.wrap{padding:36px 24px 8px}
  .cta.wrap{padding:56px 24px}
  .case-hero.wrap{padding:44px 24px 34px}
  .case-sec.wrap{padding:40px 24px}
}

.logo-wall.small{gap:16px 30px;max-width:1000px}
.logo-wall.small img{height:20px;filter:brightness(0);opacity:.48}
.logo-wall.small span:hover img{opacity:.85}
@media(max-width:640px){.logo-wall.small{gap:12px 20px}.logo-wall.small img{height:16px}}

.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-width:1060px;margin:0 auto}
.logo-tile{background:var(--paper);border:1px solid var(--line);border-radius:6px;height:84px;display:flex;align-items:center;justify-content:center;padding:14px 18px}
.logo-tile img{max-height:36px;max-width:100%;width:auto;filter:brightness(0);opacity:.62;transition:opacity .15s ease}
.logo-tile:hover img{opacity:.95}
.logo-wall img{opacity:.78}
@media(max-width:640px){.logo-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}.logo-tile{height:64px;padding:10px 12px}.logo-tile img{max-height:26px}}

.logo-tile img.blend{filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.72}

/* Logo marquee */
.marquee-wrap{max-width:1100px;margin:0 auto}
.marquee{overflow:hidden;position:relative;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:mq 90s linear infinite}
.marquee.rev .marquee-track{animation-duration:110s;animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-item{padding-right:64px;flex:none;display:flex;align-items:center}
.mq-item img{height:26px;width:auto;display:block;filter:brightness(0);opacity:.74}
.mq-item img.blend{filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.7}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
@media(max-width:640px){.mq-item{padding-right:40px}.mq-item img{height:20px}}
