/* ============================================================================
   PINWHEEL LIGHT SYSTEM
   The locked light design system, ported from the approved prototypes.

   Loads AFTER styles.css and is scoped to `body.light`, so pages that have not
   been ported yet keep rendering the existing dark theme untouched. Templates
   opt in one at a time via the light-theme whitelist in layout.antlers.html.

   Palette (locked):
     canvas #fff · surface #F5F5F5 · hairline #E7E7E7
     ink #000A14 · stone #565b66 · muted #8b909a
     violet #775EF7 (primary) · #5b43e0 (small type on light)
     lavender #F1EFFE surface / #E4DFFD hairline
     muted secondary accents: rose #A8708E · teal #4F8F88
   Type scale (locked): 82px display hubs · 58px interior · 51.2px editorial
   ========================================================================= */

/* ── 1 · Scope + tokens ───────────────────────────────────────────────── */
html:has(body.light){background:#fff}

body.light{
  /* production tokens remapped to the light system */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#F5F5F5;
  --text:#000A14;
  --muted:#565b66;
  --muted-2:#6b717b;/* AA: 4.91:1 on #fff, 4.51:1 on #F5F5F5 — was #8b909a at 3.20:1 */
  --line:#E7E7E7;
  --violet:#775EF7;
  --violet-600:#5f46e6;
  --accent:#5b43e0;

  /* light-system additions */
  --ink:#000A14;
  --stone:#565b66;
  --lav:#F1EFFE;
  --lav-line:#E4DFFD;
  --rose:#A8708E;
  --teal:#4F8F88;

  background:#fff;
  color:var(--text);
  color-scheme:light;
}

/* ── 2 · Shell — one shared component across every light page ─────────── */
/* Header: borderless (locked), translucent white, filled violet CTA. */
body.light header{
  background:rgba(255,255,255,.9);
  border-bottom:0;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
body.light .brand{color:var(--ink)}
body.light .nav-links a{color:var(--stone)}
body.light .nav-links a:hover,
body.light .nav-links a.active{color:var(--ink)}
body.light .menu-btn span{background:var(--ink)}
body.light .nav[data-open="true"] .nav-links{background:#fff;border-bottom:1px solid var(--line)}

/* Nav CTA: the locked filled-violet button, identical on every page. */
body.light .nav .btn-primary{background:var(--violet);color:#fff;border-color:var(--violet)}
body.light .nav .btn-primary:hover{background:var(--violet-600);color:#fff;border-color:var(--violet-600)}

/* Shared text link */
body.light .link{color:var(--ink)}
body.light .link:hover{color:var(--accent)}

/* Footer */
body.light footer{border-top:1px solid var(--line)}
body.light .foot .brand{color:var(--ink)}
body.light .foot-links a{color:var(--stone)}
body.light .foot-links a:hover{color:var(--ink)}
body.light .foot-base{color:var(--muted-2);border-top-color:var(--line)}

/* ── 3 · Article ──────────────────────────────────────────────────────────
   Architecture unchanged from production; this is the token remap plus the
   locked centered editorial hero and the lavender newsletter module.
   Research figures keep their existing identity. */

/* paper tokens → light system (production defines these on .article) */
body.light main.article{
  --paper:#ffffff;
  --ink:#000A14;
  --ink-soft:#565b66;
  --ink-line:#E7E7E7;
  --ink-accent:#5b43e0;
}

/* reading-mode header: no dark-cover transparency; steady white bar */
body.light.reading header,
body.light.reading header.lifted{
  background:rgba(255,255,255,.92);
  border-bottom:0;
  border-bottom-color:transparent;
}
body.light.reading header.lifted .brand{color:var(--ink)}
body.light.reading header.lifted .nav-links a{color:var(--stone)}
body.light.reading header.lifted .nav-links a:hover,
body.light.reading header.lifted .nav-links a.active{color:var(--ink)}
body.light.reading header.lifted .menu-btn span{background:var(--ink)}
body.light.reading .nav .btn-primary,
body.light.reading header.lifted .btn-primary{
  background:var(--violet);color:#fff;border-color:var(--violet);padding:.92em 1.8em;box-shadow:none;
}
body.light.reading .nav .btn-primary:hover,
body.light.reading header.lifted .btn-primary:hover{
  background:var(--violet-600);color:#fff;border-color:var(--violet-600);transform:none;box-shadow:none;
}
body.light.reading header.lifted .nav[data-open="true"] .nav-links{background:#fff;border-bottom-color:var(--line)}

/* hero — LOCKED: centered editorial composition, article's own 51.2px scale
   (hubs keep the 82px display token), 26ch measure, hairline into the body. */
body.light .article-head{background:#fff;border-bottom:1px solid var(--line)}
body.light .article-head a.eyebrow{color:var(--accent)}
body.light .article-head a.eyebrow:hover{color:var(--ink)}
body.light .article-head h1{color:var(--ink)}
body.light .article-head .dek{color:var(--stone)}
body.light .byline .avatar{background:var(--surface-2);border-color:var(--line)}

body.light .article-head--center{padding:clamp(3.4rem,7vw,5.6rem) 0 clamp(3rem,6vw,4.4rem);text-align:center}
body.light .article-head--center a.eyebrow{margin-bottom:1.5rem}
body.light .article-head--center h1{max-width:26ch;margin-inline:auto;text-wrap:balance}
body.light .article-head--center .dek{margin-inline:auto;max-width:52ch}
/* metadata hierarchy (locked): author name stronger neutral, rest muted, never violet */
body.light .article-head--center .a-meta{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.35em;color:#6b7079;
}
body.light .article-head--center .a-meta .byline{color:#3f4550;font-weight:600}

/* body */
body.light .article-body{background:#fff}
body.light .prose .lab-link a{color:var(--ink)}
body.light .callout{background:rgba(91,67,224,.04);border-color:rgba(91,67,224,.18)}

/* newsletter — the approved lavender module, narrow article variant */
body.light .article-news{background:#fff}
body.light .article-news .news-inline{border-top:0;padding-top:0}
body.light .article-news .news-mod{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center;
  background:var(--lav);border:1px solid var(--lav-line);border-radius:18px;padding:30px 34px;
}
body.light .article-news .news-mod h2{font-family:Poppins,sans-serif;font-weight:500;font-size:20px;line-height:26px;letter-spacing:-.4px;color:var(--ink);margin:0;max-width:none}
body.light .article-news .news-mod p{font-family:Inter,sans-serif;font-size:14px;line-height:22px;color:var(--stone);margin:6px 0 0}
body.light .article-news .news-mod .news-row{display:flex;gap:10px}
body.light .article-news .news-mod .news-row input{background:#fff;border:1px solid var(--lav-line);border-radius:999px;height:45.71px;padding:0 20px;min-width:210px;color:var(--ink)}
body.light .article-news .news-mod .news-row input::placeholder{color:var(--muted-2)}
body.light .article-news .news-mod .news-row input:focus{border-color:var(--violet);outline:none}
body.light .article-news .news-mod .news-fine{color:var(--muted-2);text-align:right;margin:8px 0 0;font-size:12px}
@media(max-width:760px){
  body.light .article-news .news-mod{grid-template-columns:1fr;padding:26px 24px}
  body.light .article-news .news-mod .news-fine{text-align:left}
}

/* continue reading — hairline list */
body.light .article-more{background:#fff}
body.light a.r-item .rc{color:var(--accent)}
body.light a.r-item h3{color:var(--ink)}
body.light a.r-item .rm{color:var(--muted-2)}
body.light a.r-item:hover h3{color:var(--accent)}

/* ── 4 · Insights hub ─────────────────────────────────────────────────────
   Architecture unchanged from the dark hub; this is the locked light
   translation. NOTE: uses production's existing .wrap container (1160px); the
   approved prototypes were composed at 1224px. Proportions are identical —
   the outer measure is a one-time system decision, flagged for review. */

/* hero — centered major-hub composition, 82px display token + its ladder */
body.light .ins-hero{padding:104px 0 64px}
body.light .ins-hero--center{text-align:center}
body.light .ins-hero .ins-eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
body.light .ins-hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:82px;line-height:93px;letter-spacing:-3.456px;color:var(--ink);margin:0 auto;max-width:1130px;text-wrap:balance}
body.light .ins-hero .ins-sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:22px auto 0;max-width:640px}
@media(max-width:1024px){body.light .ins-hero h1{font-size:58px;line-height:66px;letter-spacing:-2px}}
@media(max-width:768px){body.light .ins-hero h1{font-size:50px;line-height:57px;letter-spacing:-1.7px}}
@media(max-width:640px){body.light .ins-hero h1{font-size:45px;line-height:54px;letter-spacing:-3.4px}body.light .ins-hero{padding:64px 0 40px}}
@media(max-width:400px){body.light .ins-hero h1{font-size:34px;line-height:40px;letter-spacing:-1px}}

body.light .ins-section{padding:8px 0 96px}

/* topics filter + search */
body.light .topics{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem 1.4rem;border-top:1px solid var(--line);padding-top:22px}
body.light .topics .t-label{font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
body.light .topics button{background:none;border:0;padding:0;cursor:pointer;font-family:Poppins,sans-serif;font-weight:500;font-size:.95rem;color:var(--stone);transition:color .15s ease}
body.light .topics button:hover{color:var(--ink)}
body.light .topics button.active{color:var(--ink);text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:2px;text-underline-offset:5px}
body.light .t-search{margin-left:auto;min-width:190px;background:none;border:0;border-bottom:1px solid var(--line);padding:.4rem 0;color:var(--ink);font-family:Inter,sans-serif;font-weight:500;font-size:.92rem}
body.light .t-search::placeholder{color:var(--muted-2)}
body.light .t-search:focus{outline:none;border-bottom-color:var(--violet)}
body.light .t-search::-webkit-search-cancel-button{filter:none}

/* library grid — hairline rows */
body.light .posts{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,5vw,4.5rem);margin-top:36px}
body.light a.post{display:block;border-top:1px solid var(--line);padding:1.8rem 0;color:inherit;text-decoration:none}
body.light a.post .cat{font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:8px}
/* category dot — violet by default, muted secondary accents where meaningful */
body.light a.post .cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet);flex:none}
body.light a.post .cat--content-strategy::before{background:var(--rose)}
body.light a.post .cat--technical-seo::before{background:var(--teal)}
body.light a.post .cat--digital-pr::before{background:var(--muted-2)}
body.light a.post h3{font-family:Poppins,sans-serif;font-weight:500;font-size:1.22rem;letter-spacing:-.02em;line-height:1.3;margin-top:.7rem;color:var(--ink);transition:color .15s ease}
body.light a.post .ex{color:var(--stone);font-family:Inter,sans-serif;font-size:.95rem;line-height:1.6;margin-top:.6rem}
body.light a.post .meta{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:.82rem;color:var(--muted-2);margin-top:.9rem}
body.light a.post:hover h3{color:var(--accent)}
body.light .posts-empty{color:var(--stone);font-size:1rem;padding-top:1.8rem}

/* featured story — flagship at double weight on the selective gray surface.
   Internal composition is the approved variant B: image −7%, 64px centre
   gutter, editorial content inset 24px from the right edge. */
body.light .posts .post--lead{
  grid-column:1 / -1;display:grid;grid-template-columns:0.82fr 1.18fr;column-gap:64px;align-items:center;
  background:var(--surface-2);border-top:0;border-radius:18px;padding:37px 24px 37px 0;margin-bottom:14px;
}
body.light .posts .post--lead > .post-fig{margin:0;align-self:center}
body.light .post--lead h3{font-family:Poppins,sans-serif;font-weight:500;font-size:30px;line-height:38px;letter-spacing:-.6px;margin-top:.7rem}
body.light .post--lead .lead-tag{color:var(--accent)}
body.light .post-lead-body{min-width:0}
@media(max-width:720px){
  body.light .posts .post--lead{grid-template-columns:1fr;row-gap:1.15rem;padding:1.6rem}
}

/* covers — the real article card figures keep their identity */
body.light .post-fig{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:1.05rem;background:#0d1420;line-height:0}
body.light .post-fig img{display:block;width:100%;height:auto}

/* byline avatar */
body.light .byline .avatar{background:var(--surface-2);border:1px solid var(--line)}
body.light .byline .avatar svg{stroke:var(--muted-2)}

/* newsletter — the locked lavender module: copy left, form right */
body.light .ins-news{background:#fff;padding:8px 0 96px}
body.light .ins-news .news-mod{
  display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:24px 48px;align-items:center;
  background:var(--lav);border:1px solid var(--lav-line);border-radius:18px;padding:40px 48px;
}
body.light .ins-news .news-copy h2{font-family:Poppins,sans-serif;font-weight:500;font-size:24px;line-height:31px;letter-spacing:-.48px;color:var(--ink);margin:0;text-align:left;max-width:none}
body.light .ins-news .news-copy p{font-family:Inter,sans-serif;font-size:15px;line-height:24px;color:var(--stone);margin:8px 0 0;text-align:left}
body.light .ins-news .news-form{margin:0}
body.light .ins-news .news-row{display:flex;gap:12px;justify-content:flex-end}
body.light .ins-news .news-row input{background:#fff;border:1px solid var(--lav-line);border-radius:999px;padding:0 22px;height:45.71px;min-width:260px;font-family:Inter,sans-serif;font-size:15px;color:var(--ink)}
body.light .ins-news .news-row input::placeholder{color:var(--muted-2)}
body.light .ins-news .news-row input:focus{outline:none;border-color:var(--violet)}
body.light .ins-news .news-fine{font-family:Inter,sans-serif;font-size:12.5px;color:var(--muted-2);text-align:right;margin:10px 0 0}
@media(max-width:900px){
  body.light .ins-news .news-mod{grid-template-columns:1fr;padding:32px 28px}
  body.light .ins-news .news-row{justify-content:flex-start}
  body.light .ins-news .news-fine{text-align:left}
}

/* Subscribe / primary button — approved pill metrics (45.71px), production
   Poppins (Hanken Grotesk is not installed in production — see port notes). */
body.light .news-row .btn-primary{
  font-weight:600;font-size:15.5px;line-height:15.5px;height:45.71px;padding:0 30px;
  border-radius:999px;background:var(--violet);color:#fff;border-color:var(--violet);justify-content:center;
}
body.light .news-row .btn-primary:hover{background:var(--violet-600);border-color:var(--violet-600);transform:none;box-shadow:none}

/* Insights hub — responsive (approved prototype breakpoints). The light grid
   rule out-specifies production's, so the collapse is restated here. */
@media(max-width:1024px){
  body.light .posts{grid-template-columns:1fr}
  body.light .ins-hero h1{font-size:44px;line-height:50px;letter-spacing:-1.2px}
}
@media(max-width:640px){
  body.light .topics{gap:.55rem 1rem}
  body.light .t-search{margin-left:0;width:100%}
}

/* ── 5 · Shared violet CTA band ───────────────────────────────────────────
   The locked closing component, shared by every light page that uses it. */
/* closing rhythm (locked): last content -> band ~104px, band -> footer 140px.
   Production's footer adds 54.4px of its own top padding, so the wrap
   contributes 86px. Do not reintroduce the old 132px arrival padding. */
body.light .ctaband-wrap{padding:8px 0 86px}
body.light .ctaband{
  position:relative;background:var(--violet);border-radius:24px;text-align:center;
  padding:120px 24px 105px;max-width:1072px;margin:0 auto;
}
body.light .ctaband h2{font-family:Poppins,sans-serif;font-weight:500;font-size:58px;line-height:68px;letter-spacing:-1.352px;color:#fff;margin:0 auto;max-width:none}
body.light .ctaband p{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:rgba(255,255,255,.72);max-width:443px;margin:22px auto 0}
body.light .ctaband .btn-white{
  margin-top:37px;background:#fff;color:var(--ink);border-color:#fff;
  font-weight:600;font-size:15.5px;line-height:15.5px;height:45.71px;padding:0 30px;
  border-radius:999px;justify-content:center;
}
body.light .ctaband .btn-white:hover{background:#fff;color:var(--ink);transform:none;box-shadow:0 10px 24px rgba(0,0,0,.15)}
@media(max-width:640px){
  body.light .ctaband{padding:72px 24px 64px;border-radius:18px}
  body.light .ctaband h2{font-size:34px;line-height:40px;letter-spacing:-.8px}
}

/* ── 6 · Work hub ─────────────────────────────────────────────────────────
   Centered hero → neutral engagement field → violet CTA. No filters, no
   aggregate stats, no confidentiality note (field retained in the CMS). */

/* hero — centered major-hub composition. text-align is declared explicitly:
   the designer stylesheet lineage carries a left-aligned .work-hero h1 rule,
   and inheritance alone loses to a direct rule. */
body.light .work-hero{padding:104px 0 72px;text-align:center}
body.light .work-hero .work-eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
body.light .work-hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:82px;line-height:93px;letter-spacing:-3.456px;color:var(--ink);margin:0 auto;max-width:1130px;text-wrap:balance;text-align:center}
body.light .work-hero .work-sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:22px auto 0;max-width:560px;text-align:center}
@media(max-width:1024px){body.light .work-hero h1{font-size:58px;line-height:66px;letter-spacing:-2px}}
@media(max-width:768px){body.light .work-hero h1{font-size:50px;line-height:57px;letter-spacing:-1.7px}}
@media(max-width:640px){body.light .work-hero h1{font-size:45px;line-height:54px;letter-spacing:-3.4px}body.light .work-hero{padding:72px 0 48px}}
@media(max-width:400px){body.light .work-hero h1{font-size:34px;line-height:40px;letter-spacing:-1px}}

/* engagements — neutral field, white compact cards, left-aligned content */
body.light .work-section{background:var(--surface-2);padding:88px 0 80px}
body.light .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.4vw,1.7rem);margin-top:0}
body.light .case-card{
  display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:clamp(1.6rem,2.6vw,2.1rem);color:inherit;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease;
}
body.light .case-card::before{content:none}   /* production's violet glow does not apply on light */
body.light .case-card:hover{border-color:rgba(119,94,247,.4);transform:translateY(-3px)}
body.light .case-card .pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.15rem}
body.light .pill{font-family:Poppins,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;padding:.36rem .72rem;border-radius:999px;line-height:1;white-space:nowrap}
body.light .pill--industry{background:var(--lav);color:var(--accent);border:1px solid var(--lav-line)}
body.light .pill--stage,body.light .pill--service{background:transparent;color:var(--stone);border:1px solid var(--line)}
body.light .case-card .metric{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(2.3rem,4.4vw,3.2rem);letter-spacing:-.03em;line-height:1;color:var(--violet)}
body.light .case-card .metric span{color:var(--stone);font-weight:500}
body.light .case-card h3{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(1.1rem,1.7vw,1.3rem);letter-spacing:-.01em;line-height:1.38;color:var(--ink);margin:.85rem 0 0;max-width:34ch}
body.light .case-card .case-link{margin-top:auto;padding-top:1.25rem;font-family:Poppins,sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);display:inline-flex;gap:.45em;align-items:center;transition:color .15s ease}
body.light .case-card:hover .case-link{color:var(--accent)}
/* a lone published case must not stretch to a lead card on light */
body.light .case-card:only-child{grid-column:auto;padding:clamp(1.6rem,2.6vw,2.1rem)}

/* CTA arrival over the neutral field boundary */
body.light .work-section + .ctaband-wrap{padding-top:96px}

@media(max-width:820px){body.light .case-grid{grid-template-columns:1fr}}

/* ── 7 · Case study detail ────────────────────────────────────────────────
   Centered editorial hero → metric band → Challenge (+ optional starting-state
   card) → What we did → Results (one figure) → optional testimonial → More
   work → violet CTA. */

/* hero — the editorial/detail scale (51.2px), NOT the 82px hub token */
body.light .cs-hero{padding:96px 0 56px;text-align:center}
body.light .cs-eyebrow{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:20px}
body.light .cs-eyebrow .label,body.light .cs-eyebrow .cs-cat{font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
body.light .cs-eyebrow .label{color:var(--accent);text-decoration:none}
body.light .cs-eyebrow .label:hover{color:var(--ink)}
body.light .cs-eyebrow .cs-sep{color:#c9ccd2}
body.light .cs-eyebrow .cs-cat{color:var(--stone)}
body.light .cs-hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:51.2px;line-height:1.09;letter-spacing:-.035em;color:var(--ink);margin:0 auto;max-width:26ch;text-wrap:balance;text-align:center}
body.light .cs-dek{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:20px auto 0;max-width:56ch;text-align:center}
body.light .cs-meta{font-family:Inter,sans-serif;font-weight:500;font-size:13px;color:var(--muted-2);margin:22px 0 0;text-align:center}
@media(max-width:640px){body.light .cs-hero{padding:64px 0 40px}body.light .cs-hero h1{font-size:34px;line-height:40px}}

/* top-line metric band */
body.light .cs-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
body.light .cs-stats{display:grid;grid-template-columns:repeat(3,1fr)}
body.light .cs-stat{text-align:center;padding:0 1rem}
body.light .cs-stat + .cs-stat{border-left:1px solid var(--line)}
body.light .cs-stat b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.03em;color:var(--violet)}
body.light .cs-stat > span{display:block;margin-top:8px;font-family:Inter,sans-serif;font-size:14px;color:var(--stone)}
/* metric_num wraps the accent character in its own span — keep it inline */
body.light .cs-stat b span{display:inline;color:inherit;font-weight:inherit}
@media(max-width:640px){
  body.light .cs-stats{grid-template-columns:1fr;gap:1.4rem}
  body.light .cs-stat + .cs-stat{border-left:0;border-top:1px solid var(--line);padding-top:1.4rem}
}

/* sections + normalized eyebrow */
body.light .cs-section{padding:88px 0}
body.light .cs-section--gray{background:var(--surface-2)}
body.light .cs-section .svcd-label{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 15px;max-width:none}
body.light .cs-section .svcd-head h2{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:0}
body.light .cs-section .svcd-head p:not(.svcd-label){font-family:Inter,sans-serif;font-size:16.5px;line-height:27px;color:var(--stone);margin:14px 0 0;max-width:52ch}

/* challenge — narrative left, optional starting-state card right */
body.light .cs-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,5rem);align-items:center}
body.light .cs-split--full{grid-template-columns:1fr}   /* no metric: text takes the row */
body.light .cs-split-text h2{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:0 0 18px}
body.light .cs-split-text .cs-prose p{font-family:Inter,sans-serif;font-size:16.5px;line-height:27px;color:var(--stone);margin:0;max-width:54ch}
body.light .cs-split-text .cs-prose p + p{margin-top:14px}
body.light .cs-proof-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2.4rem;text-align:left}
body.light .cs-proof-card b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:64px;line-height:1;letter-spacing:-.03em;color:var(--violet)}
body.light .cs-proof-card span{display:block;margin-top:12px;font-family:Inter,sans-serif;font-size:14.5px;line-height:23px;color:var(--stone);max-width:26ch}

/* what we did — the Services matrix language, violet dashes */
body.light .svcd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
body.light .svcd-item{background:#fff;padding:32px}
body.light .svcd-item h3{font-family:Poppins,sans-serif;font-weight:500;font-size:19px;line-height:1.12;letter-spacing:-.38px;color:var(--ink);margin:0 0 10px}
body.light .svcd-item p{font-family:Inter,sans-serif;font-size:15px;line-height:24px;color:var(--stone);margin:0}
body.light .cs-grid{margin-top:40px}
body.light .cs-grid .svcd-item::before{content:"";display:block;width:34px;height:3px;border-radius:2px;margin-bottom:14px;background:var(--violet)}

/* results — one figure, rendered at the approved narrower width, left-aligned
   on the section's editorial edge; caption directly beneath. */
body.light .cs-results{border-top:1px solid var(--line)}
body.light .cs-figure{margin:44px 0 0;max-width:87.5%}
body.light .cs-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:#0d1420}
body.light .cs-figure figcaption{margin-top:12px;font-family:Inter,sans-serif;font-size:13.5px;line-height:21px;color:var(--muted-2)}
body.light .cs-figure .fig-label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}

/* testimonial — standalone centred human-proof beat (optional) */
body.light .cs-quote-section{padding:72px 0}
body.light .cs-quote{font-family:Poppins,sans-serif;font-weight:500;font-size:26px;line-height:38px;letter-spacing:-.52px;color:var(--ink);margin:0}
body.light .cs-quote--center{max-width:30ch;margin:0 auto;text-align:center}
body.light .cs-attr{font-family:Inter,sans-serif;font-size:14px;color:var(--stone);margin:18px 0 0}
body.light .cs-attr--center{text-align:center}

/* more work — 3-up hub cards */
body.light .cs-more-grid{grid-template-columns:repeat(3,1fr);margin-top:26px}
body.light .cs-more-grid .case-card h3{font-size:1.05rem}
body.light .cs-more-grid .case-card .metric{font-size:clamp(2rem,3.4vw,2.5rem)}
/* no testimonial: Results hands straight to More work at normal rhythm.
   Flagged on <main>, because inside the related-work loop `proof_quote`
   would resolve against the related entry rather than this page. */
body.light .case--noquote .cs-results{padding-bottom:56px}
body.light .case--noquote .cs-morework{padding-top:40px}

@media(max-width:1024px){
  body.light .cs-split{grid-template-columns:1fr;gap:2.2rem}
  body.light .cs-proof-card{max-width:420px}
  body.light .cs-more-grid,body.light .svcd-grid{grid-template-columns:1fr}
  body.light .cs-figure{max-width:100%}
}
@media(max-width:640px){body.light .cs-section{padding:64px 0}}

/* case study: last More-work card -> CTA band = 96 + the wrap's 8 = 104px */
body.light .cs-morework{padding-bottom:96px}

/* ── 8 · Homepage ─────────────────────────────────────────
   The locked prototype (pinwheel-prototypes/index-figma.html) is the visual
   source of truth. Every value below is measured from it at 1280px.

   CONTAINERS. The prototype composes on a 1238px display container with 24px
   gutters, and the site default `.wrap` is 1160px with 40px gutters — 1080px
   usable, which is 50px narrower than the hero H1's own 1130px measure. 1160
   stays the site default; the homepage opts into component-specific display
   containers here rather than the global being widened. */
body.light .home .wrap{width:1238px;max-width:calc(100% - 48px);margin-inline:auto;padding:0}
/* two sections use the designer's asymmetric wide frame, not the display container */
body.light .home .services .wrap,
body.light .home .results .wrap{width:100%;max-width:1440px;margin-inline:auto}
body.light .home .services .wrap{padding:0 91px 0 131px}
body.light .home .results .wrap{padding:0 108px 0 132px}
@media(max-width:900px){
  body.light .home .services .wrap,
  body.light .home .results .wrap{max-width:none;padding:0 22px}
}
@media(max-width:720px){body.light .home .wrap{width:auto;max-width:none;padding:0 22px}}

/* hero — the 82px display token on its full 1130px measure: ONE line at
   desktop. The token is never shrunk to force the fit; the container is
   what was wrong. */
body.light .home .hero{min-height:auto;border-bottom:0;padding:104px 0 128px;text-align:center}
body.light .home .hero .in{max-width:none;margin:0 auto}
body.light .home .hero .eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:15px;letter-spacing:1.44px;text-transform:uppercase;color:var(--accent);margin:10px 0 34px}
body.light .home .hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:82px;line-height:93px;letter-spacing:-3.456px;color:var(--ink);max-width:1130px;margin:0 auto;text-wrap:balance}
body.light .home .hero h1 em{font-style:normal;color:var(--violet)}
body.light .home .hero .sub{font-family:Inter,sans-serif;font-size:16px;line-height:30px;color:var(--stone);max-width:611px;margin:24px auto 0}
body.light .home .hero .row{display:flex;align-items:center;justify-content:center;gap:28px;margin:24px 0 0}
body.light .home .hero .btn-primary{background:var(--violet);color:#fff;border-color:var(--violet);font-weight:600;font-size:15.5px;line-height:15.5px;height:45.71px;padding:0 30px;border-radius:999px;justify-content:center}
body.light .home .hero .btn-primary:hover{background:var(--violet-600);border-color:var(--violet-600);transform:none;box-shadow:none}
body.light .home .hero .link{font-family:Inter,sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
body.light .home .hero .link:hover{color:var(--violet)}
@media(max-width:1240px){body.light .home .hero{padding:88px 0 104px}}
@media(max-width:1024px){body.light .home .hero h1{font-size:58px;line-height:66px;letter-spacing:-2px}}
@media(max-width:768px){body.light .home .hero h1{font-size:50px;line-height:57px;letter-spacing:-1.7px}}
@media(max-width:640px){body.light .home .hero{padding:72px 0 80px}body.light .home .hero h1{font-size:45px;line-height:54px;letter-spacing:-1.5px}body.light .home .hero .row{flex-direction:column;gap:18px}}
@media(max-width:400px){body.light .home .hero h1{font-size:34px;line-height:40px;letter-spacing:-1px}}

/* logo wall — geometry is the shared standard in section 13 */
body.light .home .logobar{padding:0 0 8px}

/* positioning statement — 1141px measure, left aligned */
body.light .home .intro{padding:162px 0 104px}
body.light .home .intro h2{font-family:Poppins,sans-serif;font-weight:500;font-size:45.938px;line-height:60.986px;letter-spacing:-1.0708px;color:var(--ink);max-width:1141px;margin:0;text-align:left}
@media(max-width:1240px){body.light .home .intro{padding:120px 0 80px}}
@media(max-width:768px){body.light .home .intro{padding:80px 0 56px}body.light .home .intro h2{font-size:32px;line-height:44px;letter-spacing:-.7px}}

/* section heads shared by What we do / Proof / Research */
body.light .home .section-head{margin-bottom:36px}
body.light .home .section-head .label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:1.44px;text-transform:uppercase;color:var(--accent)}
body.light .home .section-head .divider{height:1px;background:var(--line);margin:16px 0 0;border:0}
/* What we do sits its heading 56px below the rule; Proof and Research don't */
body.light .home .services .section-head .divider{margin-bottom:56px}
/* the prototype's section headings wrap naturally at their measure; the site
   default balances them, which moves the break point. The hero H1 keeps
   balance (the prototype has it there). */
body.light .home .intro h2,
body.light .home .services h2,body.light .home .results h2,body.light .home .notes h2{text-wrap:wrap}
body.light .home .services h2,body.light .home .results h2,body.light .home .notes h2{font-family:Poppins,sans-serif;font-weight:500;font-size:50px;line-height:54px;letter-spacing:-.75px;color:var(--ink);margin:0}
body.light .home .services h2{max-width:1142px}
body.light .home .results h2{max-width:590px}
@media(max-width:900px){body.light .home .services h2,body.light .home .results h2,body.light .home .notes h2{font-size:clamp(2rem,4.6vw,3.125rem);line-height:1.08}}
body.light .home .services-sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin-top:4px;max-width:524px}

/* What we do — the designer's tiled panel on a hairline grid, two up. The
   locked 2x2 four-tile composition. */
body.light .home .services{background:var(--surface-2);padding:86px 0 96px}
/* the locked panel pins its two row heights (258.336 / 283.93); minmax keeps
   that rhythm while letting a longer real heading grow rather than clip */
body.light .home .services-grid{margin-top:48px;background:var(--line);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:1px;overflow:hidden}
/* the pinned rows belong to the 2x2 desktop panel only */
@media(min-width:761px){body.light .home .services-grid{grid-template-rows:minmax(258.336px,auto) minmax(283.93px,auto)}}
/* guard only: never leave a bare hairline cell if the grid drops to 3 rows */
body.light .home .services-grid .svc:last-child:nth-child(odd){grid-column:1/-1}
body.light .home .svc{background:#fff;padding:44px}
body.light .home .svc .num{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:24px;letter-spacing:1.44px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
body.light .home .svc h3{font-family:Poppins,sans-serif;font-weight:500;font-size:28px;line-height:39.2px;letter-spacing:-.84px;color:var(--ink);margin:0 0 12px}
body.light .home .svc p{font-family:Inter,sans-serif;font-size:16px;line-height:25.6px;color:var(--stone);margin:0;max-width:none}
body.light .home .svc-more{display:inline-block;margin-top:36px}
@media(max-width:760px){body.light .home .services{padding:60px 0 64px}body.light .home .services-grid{grid-template-columns:1fr}body.light .home .services-grid .svc:last-child:nth-child(odd){grid-column:auto}body.light .home .svc{padding:32px}}

/* Proof — three selected engagements */
body.light .home .results{padding:156px 0 96px}
body.light .home .results .section-head{margin-bottom:32px}
body.light .home .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px;margin-top:86px}
body.light .home .rcard{display:flex;flex-direction:column;min-height:375px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--violet);border-radius:18px;padding:34px;transition:transform .15s ease,box-shadow .15s ease}
body.light .home .rcard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,15,20,.1)}
/* two-line box so a longer real sector keeps the three card titles on one baseline */
body.light .home .rcard .rlabel{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);min-height:30px;margin-bottom:24px}
body.light .home .rcard .rtitle{font-family:Poppins,sans-serif;font-weight:500;font-size:24px;line-height:39.2px;letter-spacing:-.84px;color:var(--ink);margin:0 0 16px}
body.light .home .rcard .rstat{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
body.light .home .rcard .rstat b{font-family:Poppins,sans-serif;font-weight:600;font-size:38px;line-height:38px;letter-spacing:0;color:var(--ink)}
body.light .home .rcard .rstat span{font-family:Inter,sans-serif;font-size:15.7px;line-height:1.3;color:var(--stone);max-width:none}
body.light .home .rcard .rcase{margin-top:14px;font-size:14px}
@media(max-width:1024px){body.light .home .results{padding:96px 0 72px}body.light .home .results-grid{grid-template-columns:1fr;margin-top:48px}body.light .home .rcard{min-height:0}}

/* Research — three real article covers */
body.light .home .notes{padding:149px 0 96px}
body.light .home .notes .section-head{margin-bottom:32px}
body.light .home .notes-lede{font-family:Inter,sans-serif;font-size:16px;line-height:25.6px;color:var(--stone);margin:12px 0 0;max-width:52ch}
body.light .home .notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:41px}
body.light .home .ncard{display:flex;flex-direction:column;gap:24px;color:inherit;text-decoration:none;transition:transform .15s ease}
body.light .home .ncard:hover{transform:translateY(-4px)}
/* The prototype's covers were purpose-drawn 3:2 artboards. Production serves
   each article's own `card_figure`, so the frame follows the asset's aspect
   ratio rather than cropping it — same treatment as the ported Insights hub.
   (The dark chart assets are still queued for a light-system redraw.) */
body.light .home .ncard .ncover{margin:0;line-height:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0d1420}
body.light .home .ncard .ncover img{display:block;width:100%;height:auto}
body.light .home .ncard .ntext{display:flex;flex-direction:column;gap:8px}
body.light .home .ncat{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:22.4px;color:var(--accent);display:flex;align-items:center;gap:8px;margin:0}
body.light .home .ncat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
body.light .home .ncard h3{font-family:Poppins,sans-serif;font-weight:500;font-size:20px;line-height:32px;letter-spacing:-.6px;color:var(--ink);margin:0}
body.light .home .notes-all{display:inline-block;margin-top:40px}
@media(min-width:641px) and (max-width:1024px){body.light .home .notes-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){body.light .home .notes-grid{grid-template-columns:1fr}}
@media(max-width:1024px){body.light .home .notes{padding:72px 0 96px}}

/* CTA band — 1072px card. The 8/86 wrap keeps the locked closing rhythm
   (last content → band 104px, band → footer 140px) shared by every ported page. */
body.light .home .ctaband{max-width:1072px;margin:0 auto;padding:120px 24px 105px}
body.light .home .ctaband h2{font-size:58px;line-height:68px;letter-spacing:-1.352px;font-weight:500}
body.light .home .ctaband p{font-size:18px;line-height:28.8px;max-width:443px;margin:22px auto 0}
body.light .home .ctaband .btn{margin-top:37px}
@media(max-width:768px){body.light .home .ctaband{padding:64px 24px 56px}body.light .home .ctaband h2{font-size:36px;line-height:44px;letter-spacing:-.8px}}

/* ── 9 · About ────────────────────────────────────────────
   Centered hero → experience split on the neutral field → team
   centerpiece → shared CTA. Values are the locked prototype's. */

/* hero — the same 82px display token and ladder as the other hubs */
body.light .ab-hero{padding:104px 0 72px;text-align:center}
body.light .ab-hero .ab-eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
body.light .ab-hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:82px;line-height:93px;letter-spacing:-3.456px;color:var(--ink);margin:0 auto;max-width:1130px;text-wrap:balance;text-align:center}
body.light .ab-hero .ab-sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:22px auto 0;max-width:560px}
@media(max-width:1024px){body.light .ab-hero h1{font-size:58px;line-height:66px;letter-spacing:-2px}}
@media(max-width:768px){body.light .ab-hero h1{font-size:50px;line-height:57px;letter-spacing:-1.7px}}
@media(max-width:640px){body.light .ab-hero{padding:72px 0 48px}body.light .ab-hero h1{font-size:45px;line-height:54px;letter-spacing:-1.5px}}
@media(max-width:400px){body.light .ab-hero h1{font-size:34px;line-height:40px;letter-spacing:-1px}}

/* experience — concise split band on the neutral field */
body.light .ab-exp{background:var(--surface-2);padding:88px 0}
body.light .ab-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
body.light .ab-split-head .svcd-label{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 15px}
body.light .ab-split-head h2{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(2rem,3.6vw,3.125rem);line-height:1.08;letter-spacing:-.75px;color:var(--ink);margin:0;max-width:16ch}
body.light .ab-split-body{padding-top:42px}
body.light .ab-split-body p{font-family:Inter,sans-serif;font-size:16.5px;line-height:27px;color:var(--stone);margin:0;max-width:54ch}
body.light .ab-split-body p+p{margin-top:14px}

/* team — white centerpiece */
body.light .ab-team{padding:96px 0}
body.light .ab-team .svcd-label{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 15px}
body.light .ab-team h2{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(2rem,3.6vw,3.125rem);line-height:1.08;letter-spacing:-.75px;color:var(--ink);margin:0}
body.light .ab-team-intro{font-family:Inter,sans-serif;font-size:16.5px;line-height:27px;color:var(--stone);margin:18px 0 0;max-width:56ch}
body.light .tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 32px;margin-top:56px}
body.light .tm{display:flex;flex-direction:column;align-items:flex-start}
body.light .tm-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center}
body.light .tm-avatar img{width:100%;height:100%;object-fit:cover}
body.light .tm-avatar svg{width:34px;height:34px;stroke:var(--muted-2);fill:none;stroke-width:1.6}
body.light .tm-name{font-family:Poppins,sans-serif;font-weight:500;font-size:16.5px;line-height:23px;color:var(--ink);margin-top:16px}
body.light .tm-role{font-family:Inter,sans-serif;font-size:13.5px;line-height:20px;color:var(--muted-2);margin-top:2px}

@media(max-width:1024px){
  body.light .ab-split{grid-template-columns:1fr;gap:2rem}
  body.light .ab-split-body{padding-top:0}
  body.light .tm-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  body.light .tm-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  body.light .tm-avatar{width:72px;height:72px}
}

/* ── 10 · Contact ─────────────────────────────────────────
   Centered 58px hero → quiet logo bar → form + What to expect on the
   neutral field → footer. No CTA band; the form is the call to action. */

/* hero — the interior editorial scale, NOT the 82px hub token: at the
   display token this headline breaks into a heavy two-line block, which is
   disproportionate for a short utility page. One clean line at 58. */
body.light .cx-hero{padding:104px 0 72px;text-align:center}
body.light .cx-hero .cx-eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
body.light .cx-hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:58px;line-height:66.7px;letter-spacing:-.58px;color:var(--ink);margin:0 auto;max-width:1130px;text-wrap:balance;text-align:center}
body.light .cx-hero .cx-sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:22px auto 0;max-width:560px}
@media(max-width:768px){body.light .cx-hero h1{font-size:45px;line-height:52px;letter-spacing:-.9px}}
@media(max-width:640px){body.light .cx-hero{padding:72px 0 48px}}
@media(max-width:400px){body.light .cx-hero h1{font-size:34px;line-height:40px;letter-spacing:-.7px}}

/* logo bar — the shared trust strip, footprint tightened via padding only
   (the logos, label, composition and opacity are untouched). Top transition
   is the hero's own 72px. */
body.light .contactpage .trust-strip{padding:0 0 48px}

/* form + expect — neutral field, two columns */
body.light .cx-section{background:var(--surface-2);padding:88px 0 96px}
body.light .cx-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(3rem,6vw,6rem);align-items:start}

/* form */
body.light .cx-field{margin-bottom:22px}
body.light .cx-field label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:13.5px;line-height:20px;letter-spacing:0;color:var(--ink);margin-bottom:8px}
body.light .cx-field .opt{font-weight:400;color:var(--muted-2)}
body.light .cx-form .cx-field input,body.light .cx-form .cx-field textarea{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:12px;padding:13px 16px;font-family:Inter,sans-serif;font-size:15.5px;line-height:24px;color:var(--ink)}
body.light .cx-form .cx-field input::placeholder,body.light .cx-form .cx-field textarea::placeholder{color:var(--muted-2)}
body.light .cx-form .cx-field input:focus,body.light .cx-form .cx-field textarea:focus{outline:none;border-color:var(--violet);border-bottom-color:var(--violet)}
body.light .cx-form .cx-field textarea{resize:vertical;min-height:132px}
/* server-side validation messages */
body.light .cx-field .field-error{display:block;font-family:Inter,sans-serif;font-size:13px;line-height:20px;color:#b3261e;margin-top:7px}
body.light .cx-field input[aria-invalid="true"],body.light .cx-field textarea[aria-invalid="true"]{border-color:#b3261e}
body.light .cx-submit{margin-top:6px;background:var(--violet);color:#fff;border:0;cursor:pointer;font-family:Poppins,sans-serif;font-weight:600;font-size:15.5px;line-height:15.5px;height:45.71px;padding:0 30px;border-radius:999px;justify-content:center}
body.light .cx-submit:hover{background:var(--violet-600);transform:none;box-shadow:none}
body.light .cx-fine{font-family:Inter,sans-serif;font-size:13px;line-height:21px;color:var(--muted-2);margin:16px 0 0;max-width:44ch}

/* what to expect — hairline list, not cards */
body.light .cx-expect .svcd-label{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
body.light .cx-rows{border-top:1px solid #E0E0E0}
body.light .cx-row{border-bottom:1px solid #E0E0E0;padding:18px 0}
body.light .cx-row h3{font-family:Poppins,sans-serif;font-weight:500;font-size:16.5px;line-height:24px;color:var(--ink);margin:0}
body.light .cx-row p{font-family:Inter,sans-serif;font-size:14.5px;line-height:23px;color:var(--stone);margin:5px 0 0;max-width:44ch}

@media(max-width:1024px){
  body.light .cx-grid{grid-template-columns:1fr;gap:3rem}
  body.light .cx-expect{max-width:560px}
}

/* ── 11 · Services hub ────────────────────────────────────
   Canonical: pinwheel-prototypes/figma-original/services-light.html.
   Every value measured from it at 1280px. The hub composes on a 1224px
   display container; 1160px stays the site default and this opts out of it
   the same way Home does. */
body.light .serviceshub .wrap{width:1224px;max-width:calc(100% - 48px);margin-inline:auto;padding:0}
@media(max-width:720px){body.light .serviceshub .wrap{width:auto;max-width:none;padding:0 22px}}

/* hero — THE HUB CONVENTION (variant B, approved 2026-08-22). Services is the
   fourth page on the shared hub hero: Work's and About's rule verbatim, which
   are already identical to each other. The earlier 58px left-aligned interior
   hero predated the convention and was never revisited; canonical reference is
   now services-light-heroB.html. The headline keeps its own break after
   "behind" — deliberate two-line logic, the token is never shrunk to fit. */
body.light .svc-hero--hub{text-align:center;padding:104px 0 72px}
body.light .svc-hero--hub .svc-eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
body.light .svc-hero--hub h1{font-family:Poppins,sans-serif;font-weight:500;font-size:82px;line-height:93px;letter-spacing:-3.456px;color:var(--ink);margin:0 auto;max-width:1130px;text-align:center;text-wrap:balance}
body.light .svc-hero--hub h1 em{font-style:normal;color:var(--violet)}
body.light .svc-hero--hub .svc-hero-sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:22px auto 0;max-width:640px;text-align:center}
body.light .svc-hero-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--violet);color:#fff;border:0;font-family:Inter,sans-serif;font-weight:500;font-size:15px;line-height:15.5px;height:52.22px;padding:0 23.11px;border-radius:999px;margin-top:32px}
body.light .svc-hero-btn:hover{background:var(--violet-600);color:#fff;transform:none;box-shadow:none}
@media(max-width:1024px){body.light .svc-hero--hub h1{font-size:58px;line-height:66px;letter-spacing:-2px}}
@media(max-width:768px){body.light .svc-hero--hub h1{font-size:50px;line-height:57px;letter-spacing:-1.7px}}
@media(max-width:640px){body.light .svc-hero--hub{padding:72px 0 48px}body.light .svc-hero--hub h1{font-size:45px;line-height:54px;letter-spacing:-1.5px}}
@media(max-width:400px){body.light .svc-hero--hub h1{font-size:34px;line-height:40px;letter-spacing:-1px}}

/* groups */
body.light .svc-group{padding:96px 0}
body.light .svc-group--gray{background:var(--surface-2)}
body.light .svc-group-head{max-width:646px}
body.light .svc-group-head h2{font-family:Poppins,sans-serif;font-weight:500;font-size:50px;line-height:54px;letter-spacing:-.75px;color:var(--ink);margin:0;text-wrap:wrap}
body.light .svc-group-head p{font-family:Inter,sans-serif;font-size:16px;line-height:25.6px;color:var(--stone);margin:22px 0 0;max-width:none}
body.light .svc-explore-link{display:inline-flex;align-items:center;gap:6px;margin:22px 0 0;font-family:Inter,sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
body.light .svc-explore-link:hover{color:var(--violet)}
@media(max-width:900px){body.light .svc-group-head h2{font-size:clamp(2rem,4.6vw,3.125rem);line-height:1.08}}

/* card grids — three-across only where a group has exactly three cards */
body.light .svc-grid{display:grid;margin-top:60px}
body.light .svc-grid--3{grid-template-columns:repeat(3,1fr);gap:15px}
body.light .svc-grid--2{grid-template-columns:repeat(2,1fr);gap:16px}
body.light .svc-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--violet);border-radius:18px;padding:37px 45px}
body.light .svc-grid--3 .svc-card{padding:37px 18px}
body.light .svc-card--purple{border-top-color:var(--violet)}
body.light .svc-card--rose{border-top-color:var(--rose)}
body.light .svc-card--teal{border-top-color:var(--teal)}
body.light .svc-card h3{font-family:Poppins,sans-serif;font-weight:500;font-size:23px;line-height:29.9px;letter-spacing:0;color:var(--ink);margin:0}
body.light .svc-card p{font-family:Inter,sans-serif;font-size:14px;line-height:22.4px;color:var(--stone);margin:12px 0 0}

/* scan chips — inside the card, from the linked service's own capabilities */
body.light .svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
body.light .svc-chip{background:#fff;border:1px solid #E0E0E0;border-radius:999px;padding:9px 17px;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:21.45px;color:var(--stone);white-space:nowrap}

/* logo bar geometry is the shared standard in section 13 */
body.light .svc-logobar{padding:96px 0 8px}
body.light .svc-logobar+.svc-ctaband-wrap{padding-top:96px}

@media(max-width:1024px){body.light .svc-grid--3,body.light .svc-grid--2{grid-template-columns:1fr}}
@media(max-width:640px){
  body.light .svc-group{padding:60px 0}
  body.light .svc-logobar{padding-top:60px}
  body.light .svc-logobar+.svc-ctaband-wrap{padding-top:60px}
  body.light .svc-chip{white-space:normal}
}

/* ── 12 · Service detail ──────────────────────────────────
   Canonical: pinwheel-prototypes/figma-original/service-aeo-simple.html.
   One generic system for every service. 1224px display container, same
   opt-out from the 1160px default. */
body.light .servicedetail .wrap{width:1224px;max-width:calc(100% - 48px);margin-inline:auto;padding:0}
@media(max-width:720px){body.light .servicedetail .wrap{width:auto;max-width:none;padding:0 22px}}

body.light .svcd-hero{padding:139px 0 149px;text-align:center}
body.light .svcd-hero .svcd-eyebrow{display:flex;justify-content:center;margin-bottom:19px}
body.light .svcd-hero .svcd-eyebrow .label{font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:1.68px;text-transform:uppercase;color:var(--accent)}
/* the homepage display token. `max-width:none` is the locked one-line
   behaviour: the token is never shrunk to force a fit, and the headline
   breaks at the author's own point once one line no longer fits. */
body.light .svcd-hero h1{font-family:Poppins,sans-serif;font-weight:500;font-size:82px;line-height:93px;letter-spacing:-3.456px;color:var(--ink);margin:0 auto;max-width:none;text-align:center;text-wrap:wrap}
body.light .svcd-hero h1 em{font-style:normal;color:var(--violet)}
body.light .svcd-hero h1 .h1-br{display:none}
@media(min-width:1241px){body.light .svcd-hero h1{white-space:nowrap}}
@media(max-width:1240px){body.light .svcd-hero h1{white-space:normal}body.light .svcd-hero h1 .h1-br{display:inline}}
body.light .svcd-hero-sub{font-family:Inter,sans-serif;font-size:16px;line-height:25.6px;color:var(--stone);margin:26px auto 0;max-width:611px;text-align:center}
body.light .svcd-hero .svc-hero-btn{margin-top:25px}
@media(max-width:1024px){body.light .svcd-hero h1{font-size:58px;line-height:66px;letter-spacing:-2px}}
@media(max-width:768px){body.light .svcd-hero h1{font-size:50px;line-height:57px;letter-spacing:-1.7px}}
@media(max-width:640px){body.light .svcd-hero{padding:78px 0 80px}body.light .svcd-hero h1{font-size:45px;line-height:54px;letter-spacing:-1.5px}}
@media(max-width:400px){body.light .svcd-hero h1{font-size:34px;line-height:40px;letter-spacing:-1px}}

body.light .svcd-section{padding:96px 0}
body.light .svcd-section--gray{background:var(--surface-2)}
body.light .svcd-head .svcd-label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:1.68px;text-transform:uppercase;color:var(--accent);margin:0 0 23px}
body.light .svcd-head h2{font-family:Poppins,sans-serif;font-weight:500;font-size:50px;line-height:54px;letter-spacing:-.75px;color:var(--ink);margin:0;text-wrap:wrap}
body.light .svcd-head p:not(.svcd-label){font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:23px 0 0;max-width:704px}
@media(max-width:900px){body.light .svcd-head h2{font-size:clamp(2rem,4.6vw,3.125rem);line-height:1.08}}

/* capability matrix — one crisp module on a 1px grid. The designer's
   per-cell colour hierarchy survives as a short accent dash cycling the
   muted secondary system. No illustrative icons. */
body.light .svcd-grid{margin-top:48px;background:var(--line);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden}
body.light .svcd-item{background:#fff;padding:32px}
body.light .svcd-item::before{content:"";display:block;width:34px;height:3px;border-radius:2px;margin-bottom:14px;background:var(--violet)}
body.light .svcd-item:nth-child(3n+2)::before{background:var(--rose)}
body.light .svcd-item:nth-child(3n+3)::before{background:var(--teal)}
body.light .svcd-item h3{font-family:Poppins,sans-serif;font-weight:500;font-size:19px;line-height:26px;letter-spacing:-.38px;color:var(--ink);margin:0 0 10px}
body.light .svcd-item p{font-family:Inter,sans-serif;font-size:15px;line-height:24px;color:var(--stone);margin:0}

/* proof — the designed moment. The locked page pairs the quote with a case
   card; no service is associated with a Work engagement, so the text half
   centres on its own rather than leaving the second column blank. */
body.light .svcd-proof{display:flex;gap:96px;align-items:center}
body.light .svcd-proof-text{flex:1;min-width:0}
body.light .svcd-proof-text .svcd-label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:1.68px;text-transform:uppercase;color:var(--accent);margin:0 0 15px}
body.light .svcd-quote{font-family:Poppins,sans-serif;font-weight:500;font-size:26px;line-height:38px;letter-spacing:-.52px;color:var(--ink);margin:0;max-width:400px}
body.light .svcd-attr{font-family:Inter,sans-serif;font-size:14px;line-height:22px;color:var(--stone);margin:16px 0 0}
body.light .svcd-proof--text-only{justify-content:center;text-align:center}
body.light .svcd-proof--text-only .svcd-proof-text{flex:0 1 auto;max-width:760px}
body.light .svcd-proof--text-only .svcd-quote{max-width:26ch;margin-inline:auto}

/* Optional modules collapse cleanly: with no FAQ the page runs
   hero → what's included → proof → CTA, and with no proof either it runs
   hero → what's included → CTA, both on the standardized closing rhythm. */
body.light .servicedetail .svc-ctaband-wrap{padding-top:8px}

@media(max-width:1024px){
  body.light .svcd-grid{grid-template-columns:1fr}
  body.light .svcd-proof{flex-direction:column;gap:40px;align-items:flex-start}
  body.light .svcd-proof--text-only{align-items:center}
}
@media(max-width:640px){body.light .svcd-section{padding:60px 0}}

/* ── 13 · Shared logo wall ────────────────────────────────
   ONE standard for every surface that shows the approved logo bar — Home,
   the Services hub, and Contact. Locked prototype geometry: 1000px row,
   five across, 32/40 gaps, uniform 26px caps, grayscale at .38. Only the
   surrounding padding differs per page (each page's own section above).

   The per-logo cap heights are authored as inline styles in Globals, so the
   normalization has to out-rank them; the authored values stay as the
   fallback for any surface still on the dark system. */
body.light .logobar .label,
body.light .trust-strip .trust-strip-label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.8px;text-transform:uppercase;color:var(--stone);margin:0 0 28px;text-align:center}
body.light .logobar,body.light .trust-strip{text-align:center}
body.light .logobar .logo-row,
body.light .trust-strip .logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:32px 40px;align-items:center;justify-items:center;max-width:1000px;margin:0 auto}
body.light .logobar .logo-row img.logo,
body.light .trust-strip .logo-row img.logo{max-width:100%;height:26px!important;width:auto;object-fit:contain;filter:brightness(0);opacity:.38}
body.light .logobar .logo-row img.logo:hover,
body.light .trust-strip .logo-row img.logo:hover{opacity:.7}
@media(max-width:640px){
  body.light .logobar .logo-row,
  body.light .trust-strip .logo-row{grid-template-columns:repeat(3,1fr);gap:20px 24px}
}

/* ── 13b · Hub hero optical centering ─────────────────────
   The H1/dek mass is the optical anchor; the eyebrow is metadata that floats
   above it and should not pull the centered mass down. One shared adjustment
   for the four hub pages — no page-specific offsets.

   Implemented as a transform on the hero's inner wrapper rather than as
   padding, so section heights, the eyebrow/H1/dek spacing and every following
   section stay exactly where they are.

   Desktop only. All four already step down to a tighter 64-72px top padding
   at 640px, where the eyebrow is a much smaller share of the mass and the
   issue is not visibly present.

   Home is separately composed (CTA pair + trust wall immediately below) and is
   deliberately excluded, as are Contact, articles, case studies and service
   detail. */
@media(min-width:641px){
  body.light .svc-hero--hub > .wrap,
  body.light .work-hero    > .wrap,
  body.light .ins-hero     > .wrap,
  body.light .ab-hero      > .wrap{transform:translateY(-36px)}
}

/* ── 14 · Utility pages ───────────────────────────────────
   /thank-you · /subscribed · 404 · the two coming-soon pages. All five share
   one shape — eyebrow, headline, one supporting line, a primary action and a
   secondary link — so they share one treatment. Compact and utility-first:
   no logo wall, no CTA band, no decoration. Typography is the interior
   editorial token already used on Contact, so they read as the same site. */
body.light .utility .page-hero{padding:104px 0 120px;text-align:center;min-height:auto;border-bottom:0}
body.light .utility .page-hero .in{max-width:none;margin:0 auto}
body.light .utility .eyebrow{display:inline-block;font-family:Inter,sans-serif;font-weight:600;font-size:12px;line-height:19.2px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 22px;text-decoration:none}
body.light .utility a.eyebrow:hover{color:var(--violet)}
body.light .utility h1{font-family:Poppins,sans-serif;font-weight:500;font-size:58px;line-height:66.7px;letter-spacing:-.58px;color:var(--ink);margin:0 auto;max-width:900px;text-align:center;text-wrap:balance}
body.light .utility .sub{font-family:Inter,sans-serif;font-size:18px;line-height:28.8px;color:var(--stone);margin:22px auto 0;max-width:611px;text-align:center}
body.light .utility .row{display:flex;align-items:center;justify-content:center;gap:28px;margin:32px 0 0}
body.light .utility .btn-primary{background:var(--violet);color:#fff;border-color:var(--violet);font-family:Poppins,sans-serif;font-weight:600;font-size:15.5px;line-height:15.5px;height:45.71px;padding:0 30px;border-radius:999px;justify-content:center}
body.light .utility .btn-primary:hover{background:var(--violet-600);border-color:var(--violet-600);transform:none;box-shadow:none}
body.light .utility .link{font-family:Inter,sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
body.light .utility .link:hover{color:var(--violet)}
@media(max-width:768px){body.light .utility h1{font-size:45px;line-height:52px;letter-spacing:-.9px}}
@media(max-width:640px){
  body.light .utility .page-hero{padding:72px 0 88px}
  body.light .utility .row{flex-direction:column;gap:18px}
}
@media(max-width:400px){body.light .utility h1{font-size:34px;line-height:40px;letter-spacing:-.7px}}

/* ── 15 · Reduced motion ──────────────────────────────────
   Honour the OS setting. The scroll-reveal must still END VISIBLE — it is a
   real content gate, so it is set to its final state rather than disabled,
   which would leave revealed sections permanently transparent for anyone with
   the preference on. Hover lifts and transitions are simply dropped. */
@media (prefers-reduced-motion: reduce){
  body.light .reveal,
  body.light .stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  body.light .rcard:hover,
  body.light .ncard:hover,
  body.light .case-card:hover,
  body.light .svc-card:hover,
  body.light .post:hover,
  body.light .btn:hover,
  body.light .btn-primary:hover{transform:none!important;box-shadow:none!important}
  body.light *,
  body.light *::before,
  body.light *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}