/* =====================================================================
   TingChou Design — responsive recreation
   Branding follows the Crea✦Ting Design System handoff:
     warm paper grounds · near-black ink · gold "spark" accent (#C8972F)
     Display: Poppins · Body: Hanken Grotesk · Meta: Space Mono
   Mobile-first. 3 breakpoints mirroring Wix Studio:
     base <=767 (Mobile) · >=768 (Tablet) · >=1001 (Desktop)
   ===================================================================== */

/* ---------- Tokens (from DS colors.css / typography.css) ---------- */
:root{
  /* paper / grounds */
  --paper:#FAF9F5; --paper-deep:#F2EFE8; --paper-card:#FFFFFF; --paper-edge:#FFFFFF;
  /* ink / text */
  --ink:#1A1A18; --ink-soft:#3C3C3A; --ink-muted:#6B6B66; --ink-faint:#A6A39A;
  --ink-line:#DEDACE; --ink-line-2:#CFCABB;
  /* gold spark (the ✦) */
  --gold:#C8972F; --gold-deep:#A2761E; --gold-soft:#E6C679; --gold-wash:#F1E6C7;
  /* clay support */
  --clay:#B05D40; --clay-deep:#8A4530; --clay-wash:#F0DDD2;
  /* deep surface */
  --ink-surface:#201F1C; --ink-surface-2:#2C2A26;

  --maxw:1300px;
  --pad:20px;
}
/* project detail pages keep the original narrower margin (layout not reworked for 1440) */
body.proj-page{--maxw:1300px}
:root{
  --nav-h:64px;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(26,26,24,.05), 0 6px 20px rgba(26,26,24,.06);
  --shadow-md:0 14px 44px rgba(26,26,24,.12);

  --f-display:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* warm hero panel wash */
  --hero-wash:linear-gradient(135deg,#F4E2B4 0%,var(--gold-wash) 50%,var(--clay-wash) 100%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:64px}
.eyebrow{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.eyebrow-serif{font-family:var(--f-body);font-style:italic;font-size:1.08rem;color:var(--clay-deep)}
.lede{color:var(--ink-soft);font-size:1.08rem;max-width:60ch}
.accent{color:var(--gold-deep)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.h-display{font-family:var(--f-display);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--ink);font-size:clamp(2.1rem,7vw,3.4rem)}
.h-2{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;font-size:clamp(1.6rem,4.5vw,2.5rem);line-height:1.1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.4em;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:500;font-size:.95rem;border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s, border-color .2s}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-accent{background:var(--gold);color:var(--ink)}
.btn-accent:hover{background:var(--gold-deep);color:var(--paper)}
.link-arrow{font-family:var(--f-display);font-weight:500;display:inline-flex;align-items:center;gap:.4em;color:var(--gold-deep)}
.link-arrow svg{transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}
/* inline hyperlink treatment — gold underline + external-link character */
.cs-inlink{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .15s ease,text-decoration-color .15s ease}
.cs-inlink:hover{color:var(--gold);text-decoration-color:var(--gold)}
.cs-inlink::after{content:"\2197";font-size:.82em;margin-left:.1em;vertical-align:baseline;text-decoration:none}

/* 09 Business — image rows, pillar sublines, press links, approval image */
.biz-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.biz-row img{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);background:#fff}
.biz-sub{margin-top:.55em}
.biz-sub strong{color:var(--ink);font-weight:700}
.biz-press{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:16px 0 2px;font-family:var(--f-mono);font-size:.8rem}
.biz-press .k{color:var(--gold-deep);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.biz-single{margin:22px 0 0}
.biz-single img{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);background:#fff}
/* 09 intro gallery — tall photo left, photo + box render stacked right */
.biz-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin:22px 0}
.biz-gallery>.biz-tall{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);background:#fff}
.biz-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.biz-col>img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.biz-col>img:not(.biz-box){border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);background:#fff}
.biz-box{max-width:92%;margin:2px auto 0}
@media(max-width:620px){.biz-gallery{grid-template-columns:1fr}}
@media(max-width:620px){.biz-row{grid-template-columns:1fr}}

/* Shared DS marker — → arrow list (finer itemized sub-points) */
.arrow-list{list-style:none;margin:14px 0 0;padding:0 0 0 1.9rem}
#research-and-discovery .arrow-list{padding-left:0}
.arrow-list>li{position:relative;padding-left:1.6em;margin:0 0 .7em;font-family:var(--f-body);font-size:.98rem;color:var(--ink-soft);line-height:1.6}
.arrow-list>li:last-child{margin-bottom:0}
.arrow-list>li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:700}
.arrow-list>li strong{color:var(--ink);font-weight:700}

/* 10 Outcome — What I delivered / Continue Growing, equal side-by-side columns */
.outcome-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 46px;margin:34px 0 6px}
.outcome-col .dp-h{margin:0}
@media(max-width:640px){.outcome-cols{grid-template-columns:1fr;gap:30px}}

/* 10 Outcome — Continue Growing roadmap (2-col arrow list) */
.grow{margin:32px 0 4px}
.grow .arrow-list{margin-top:14px}
.arrow-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}
.arrow-grid>li{margin-bottom:0}
@media(max-width:620px){.arrow-grid{grid-template-columns:1fr}}

/* 08 Accessibility — parrot floats in the intro (text wraps), perched on the frame below */
.cs-body.ax-intro{max-width:none}
.ax-parrot{float:right;width:174px;height:auto;margin:0 0 -24px 20px;position:relative;z-index:3;transform:translateY(-10px);pointer-events:none;filter:drop-shadow(0 7px 11px rgba(26,26,24,.12))}
@media(max-width:640px){.ax-parrot{width:124px;margin:0 0 -16px auto;display:block;float:none}}
.nowrap{white-space:nowrap}
/* red italic treatment for the reflective question, no arrow */
.cs-ask{font-style:italic;color:var(--clay);font-weight:500}

/* 08 Accessibility — framed intro video (clay/orange frame, mirrors .ctx-frame) */
.ax-hero{margin:28px 0 8px;clear:right}
.ax-frame{position:relative;border:6px solid var(--clay);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.ax-frame .ax-video{display:block;width:100%;height:auto;border-radius:14px}
.ax-hero figcaption{margin-top:12px;font-size:.9rem;color:var(--ink-muted);text-align:left}

/* 11 · Learnings — 2x2 grid, flush to the section's content margins */
.cards.cards-2col{grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;width:100%;max-width:none;margin-top:28px;align-items:stretch}
.cards.cards-2col > .card{width:auto;max-width:none;margin:0;height:100%}
@media(max-width:640px){.cards.cards-2col{grid-template-columns:1fr}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.85);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--ink-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;display:inline-flex;align-items:baseline}
.brand .spark{width:.6em;height:.6em;margin:0 .08em;fill:var(--gold);align-self:center;flex:0 0 auto}
.nav-links{display:none;gap:30px;align-items:center}
.nav-links a{font-family:var(--f-display);font-weight:500;font-size:.96rem;color:var(--ink-soft);position:relative;padding:.2em 0}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);border-radius:2px}
.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s ease;border-bottom:1px solid var(--ink-line);background:var(--paper)}
.mobile-menu.open{grid-template-rows:1fr}
.mobile-menu>div{min-height:0}
.mobile-menu a{display:block;padding:16px var(--pad);font-family:var(--f-display);font-weight:500;border-top:1px solid var(--ink-line)}
.mobile-menu a:first-child{border-top:0}

/* ---------- HERO carousel (full-bleed image slides, text overlaid left) ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero-track{position:relative}
.slide{display:none}
.slide.active{display:flex;align-items:flex-start;min-height:clamp(420px,60vh,660px);
  background-position:left center;background-size:cover;background-repeat:no-repeat}
.slide-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);padding-block:clamp(36px,6vh,64px);
  color:#fff;text-decoration:none;display:block}
.hero-eyebrow{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  font-size:clamp(.72rem,1.3vw,.86rem);color:#fff;margin-bottom:16px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-title{font-family:var(--f-display);font-weight:600;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(1.85rem,4.2vw,3.1rem);color:#fff;max-width:min(22ch,100%);text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero-sub{margin-top:12px;font-family:var(--f-body);font-weight:500;font-size:clamp(1rem,1.8vw,1.35rem);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.28)}
/* arrows pinned to the bottom-left & bottom-right corners (dots stay centered between them)
   so they never cover the hero text */
.hero-arrows{position:absolute;z-index:3;left:0;right:0;bottom:14px;display:flex;justify-content:space-between;pointer-events:none;padding-inline:clamp(12px,3vw,24px)}
.hero-arrows button{pointer-events:auto;width:44px;height:44px;border-radius:var(--r-pill);background:rgba(255,255,255,.82);color:var(--ink);border:0;display:grid;place-items:center;box-shadow:var(--shadow-sm);font-size:1.15rem}
.hero-arrows button:hover{background:#fff}
.hero-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;gap:8px;justify-content:center;padding:0;background:none}
.hero-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hero-dots button[aria-selected="true"]{background:#fff;width:22px;border-radius:5px}

/* ---------- INTRO (Anchored Flip) ---------- */
.intro{background:var(--paper)}
.intro .container{display:grid;gap:30px}
.phase-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.28em;color:var(--ink-faint)}
.phase-eyebrow b{color:var(--ink-muted);font-weight:700}
.phase-eyebrow .sep{color:var(--ink-faint)}
.phase-headline{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1;font-size:clamp(3rem,15vw,6.5rem);margin:10px 0 22px}
.phase-headline .pre{color:var(--ink-faint);font-weight:300}
.phase-headline .suf{color:var(--ink);font-weight:600}
.intro p+p{margin-top:14px}
.intro-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.intro-art{order:-1;display:grid;place-items:center}
.intro-art img{max-width:320px;width:80%}

/* ---------- SELECTED WORKS ---------- */
.works-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.works-grid{display:grid;gap:22px}
.work-card{border:1px solid var(--ink-line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-card);
  transition:transform .2s ease, box-shadow .25s ease;display:flex;flex-direction:column}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.work-thumb{aspect-ratio:16/10;background:var(--paper-deep);overflow:hidden}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.work-card:hover .work-thumb img{transform:scale(1.04)}
.work-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.work-cat{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.work-title{font-family:var(--f-display);font-weight:600;font-size:1.25rem;margin:8px 0 8px;letter-spacing:-.01em}
.work-desc{color:var(--ink-soft);font-size:.96rem}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.work-tag{display:inline-block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);background:var(--gold-wash);border-radius:var(--r-pill);padding:5px 12px}
.work-card.soon{opacity:.72}
.badge{display:inline-block;margin-left:8px;font-family:var(--f-mono);font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink-muted);border:1px solid var(--ink-line-2);padding:3px 8px;border-radius:var(--r-pill);vertical-align:middle}
/* Coming-soon badge overlaid at the top of the card image */
.work-thumb{position:relative}
.badge-overlay{position:absolute;top:32px;left:50%;transform:translateX(-50%);z-index:2;margin-left:0;font-size:.66rem;letter-spacing:.12em;padding:5px 12px;background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}

/* ---------- PROCESS (six phases) ---------- */
.process{background:var(--ink-surface);color:var(--paper)}
.process .eyebrow{color:var(--gold-soft)}
.process .h-2{color:var(--paper);margin-top:8px;max-width:18ch}
.phase-grid{display:grid;gap:1px;background:var(--ink-surface-2);border:1px solid var(--ink-surface-2);border-radius:var(--r-lg);overflow:hidden;margin-top:34px}
.phase-cell{background:var(--ink-surface);padding:26px 22px;min-height:150px}
.phase-cell .num{font-family:var(--f-mono);color:var(--gold);font-size:.8rem;font-weight:700}
.phase-cell h3{font-family:var(--f-display);font-weight:600;font-size:1.4rem;margin:10px 0 8px;color:var(--paper)}
.phase-cell h3 .pre{color:var(--ink-faint);font-weight:300}
.phase-cell h3 .suf{color:var(--paper);font-weight:700}
.phase-cell p{color:#C9C7C0;font-size:.95rem}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--ink-line);padding-block:40px;background:var(--paper)}
.footer .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.footer .mail{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,3.5vw,1.5rem);letter-spacing:-.01em}
.footer .mail:hover{color:var(--gold-deep)}
.footer small{color:var(--ink-muted)}

/* ---------- CASE STUDY ---------- */
.cs-hero{padding-block:48px 36px}
.cs-hero .eyebrow{display:block;margin-bottom:16px}
.cs-title{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.02;font-size:clamp(2.4rem,9vw,4.6rem)}
.cs-sub{margin-top:18px;font-size:1.1rem;color:var(--ink-soft);max-width:60ch}
.cs-cover{margin-top:30px;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-deep);aspect-ratio:16/9}
.cs-cover img{width:100%;height:100%;object-fit:cover}
.cs-meta{display:grid;gap:18px;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding-block:26px;margin-top:36px}
.cs-meta .row span{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
.cs-meta .row span::before{content:"";flex:none;width:.95em;height:.95em;margin-right:.5em;background-color:var(--gold-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.cs-meta .row p{font-size:.98rem;color:var(--ink)}
.cs-section{padding-block:48px;border-top:1px solid var(--ink-line)}
.cs-label{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.cs-h{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;line-height:1.08;font-size:clamp(1.6rem,5vw,2.6rem);margin:12px 0 18px}
.cs-body{color:var(--ink-soft);font-size:1.04rem;max-width:68ch}
.cs-body p+p{margin-top:14px}
.cards{display:grid;gap:18px;margin-top:28px}
.card{border:0;border-radius:var(--r-md);padding:22px;background:var(--paper)}
.card .k{font-family:var(--f-mono);color:var(--gold-deep);font-size:.85rem;font-weight:700;display:inline-flex;align-items:center}
.card .k.nospark::before{display:none}
.card .k::before{content:"";flex:none;width:.95em;height:.95em;margin-right:.5em;background-color:var(--gold-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.card h4{font-family:var(--f-display);font-weight:600;font-size:1.1rem;margin:8px 0 8px}
.card p{color:var(--ink-soft);font-size:.95rem}
.metrics{display:grid;gap:18px;margin-top:28px;align-items:stretch}
.metric{border:0;border-radius:var(--r-md);padding:22px 20px;background:var(--gold-wash)}
.metric .big{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,4.5vw,2.2rem);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;line-height:1.1}
.metric .cap{color:var(--ink-soft);font-size:.92rem;margin-top:6px}
.metric .core{margin-top:12px;padding-top:12px;border-top:1px dashed var(--ink-line-2);font-size:.88rem;color:var(--ink-muted)}

/* ---- Overview impact metrics: per-column color + click-to-reveal ---- */
.cs-label.has-spark{display:inline-flex;align-items:center;gap:.5em}
.cs-label.has-spark::before{content:"";flex:none;width:.95em;height:.95em;background-color:var(--gold-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.metrics-hint{font-family:var(--f-body);font-style:italic;color:var(--clay);font-size:.97rem;margin-top:24px}
/* action / instruction wording uses clay site-wide */
.action-cue{color:var(--clay)}
.metrics-impact{align-items:end;margin-top:72px}
.metrics-impact .metric{position:relative;padding-right:54px;transition:transform .2s ease,box-shadow .2s ease}
.metrics-impact .metric.m1{background:#ECEAFB}
.metrics-impact .metric.m2{background:#FAE57E}
.metrics-impact .metric.m3{background:#DCD2C3}
.metrics-impact .metric.m4{background:#EC9460}
.metrics-impact .metric .cap{color:var(--ink-soft)}
.metric-plus{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--ink);background:transparent;cursor:pointer;padding:0;
  display:grid;place-items:center;transition:transform .3s ease,background .2s ease}
.metric-plus::before,.metric-plus::after{content:"";position:absolute;background:var(--ink);border-radius:2px}
.metric-plus::before{width:13px;height:1.7px}
.metric-plus::after{width:1.7px;height:13px}
.metric-plus:hover{background:rgba(26,26,24,.08)}
.metric.open .metric-plus{transform:rotate(135deg)}
.metrics-impact .metric .core{max-height:0;opacity:0;overflow:hidden;margin-top:0;padding-top:0;border-top:0;color:var(--ink-soft);
  transition:max-height .42s ease,opacity .3s ease,margin-top .3s ease,padding-top .3s ease}
.metrics-impact .metric.open .core{max-height:280px;opacity:1;margin-top:14px;padding-top:14px;border-top:1px dashed rgba(26,26,24,.28)}
.metrics-impact .metric .core em{font-style:italic;font-weight:600;color:var(--ink)}

/* ===== Handoff spec: chaptering rhythm · depth · context showpiece ===== */
/* spark prefix usable on any label (hero eyebrow, outcome line) */
.spark-pre::before{content:"";display:inline-block;vertical-align:-.06em;width:.9em;height:.9em;margin-right:.5em;background-color:var(--gold-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Tag-line — design-library component: pill statement with a leading ✦ star */
.cs-tagline{display:block;width:fit-content;max-width:100%;margin:26px 0;
  padding:12px 28px 12px 24px;background:var(--gold-wash);border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.4;
  letter-spacing:-.01em;color:var(--ink)}
.cs-tagline::before{content:"";display:inline-block;vertical-align:-.05em;width:1em;height:1em;
  margin-right:.55em;background-color:var(--gold-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.cs-tagline strong{font-weight:700;color:var(--ink)}

/* 08 Accessibility — two-track (Print 8% / Digital 14%) Problem->Solution comparison */
.ax-framing{margin:36px 0 14px}
.ax-framing h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em;line-height:1.12;color:var(--ink);margin:0 0 10px}
.embed-ax{margin:8px 0 6px}
.ax-flow{margin-top:30px;display:flex;flex-direction:column;gap:48px}
.ax-track{display:flex;flex-direction:column;gap:26px;scroll-margin-top:96px}
#ax-digital{border-top:1px solid var(--ink-line-2);padding-top:48px}
.ax-head{padding-bottom:2px}
.ax-label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:0}
.ax-num{font-family:var(--f-display);font-weight:600;font-size:clamp(2.6rem,6vw,3.7rem);line-height:1;letter-spacing:-.02em;color:var(--ink);margin:.12em 0 .04em}
.ax-subhead{font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--ink);margin:0}
.ax-block{min-width:0}
.ax-tag{display:inline-flex;align-items:center;gap:.5em;padding:.36em 1.05em;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.01em}
.ax-tag--problem{background:var(--clay-wash);color:var(--clay-deep)}
.ax-tag--solution{background:#E2EFD6;color:#3E7C3C}
.ax-block>p{margin:.75em 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.62}
.ax-block .ax-sub{margin-top:.6em}
.ax-block .ax-sub strong{color:var(--ink);font-weight:700}
.ax-code{font-family:var(--f-mono);font-size:.86em;background:var(--paper-deep);border:1px solid var(--ink-line);border-radius:6px;padding:.05em .4em;white-space:nowrap}
.ax-media{margin-top:16px;display:grid;gap:12px;max-width:880px}
.ax-media img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);background:#fff}
.ax-secondary{display:block;max-width:210px;height:auto;margin-top:16px;border-radius:var(--r-md);border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);background:#fff}
.ax-transition{text-align:left;font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em;line-height:1.12;color:var(--ink);margin:36px 0 12px}
@media(max-width:820px){
  .ax-flow{gap:44px}
  .ax-transition{margin-top:26px}
  .ax-head{padding-bottom:10px}
}

/* Brain Break — reusable full-width interstitial (close + preview between sections) */
.brain-break{background:#FBF1DA;text-align:center;padding-block:clamp(60px,9vw,104px) clamp(36px,5vw,56px);padding-inline:var(--pad)}
.brain-break .bb-inner{max-width:700px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.bb-q{font-family:var(--f-display);font-weight:300;font-size:clamp(1.4rem,3.4vw,2.15rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0;order:1}
.bb-sub{font-family:var(--f-body);font-size:1.04rem;line-height:1.6;color:var(--ink-muted);margin:clamp(44px,6.5vw,76px) 0 0;order:2}
.bb-arrow{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:clamp(12px,2vw,18px) auto 0;border:1.5px solid var(--ink-line-2);border-radius:50%;color:var(--ink-soft);cursor:pointer;text-decoration:none;transition:border-color .2s ease,color .2s ease,background .2s ease;order:3}
.bb-arrow:hover{border-color:var(--ink-soft);color:var(--ink);background:rgba(26,26,24,.04)}
.bb-arrow:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.bb-arrow svg{width:14px;height:14px;display:block}
.bb-q,.bb-sub{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.brain-break.in .bb-q,.brain-break.in .bb-sub{opacity:1;transform:none}
.brain-break.in .bb-sub{transition-delay:.12s}
@keyframes bb-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.brain-break.in .bb-arrow{animation:bb-bounce 1.9s ease-in-out infinite}
.bb-solo .bb-arrow{margin-top:clamp(40px,7vw,72px)}
@media(min-width:1001px){.brain-break{margin-inline:-72px}}
@media(prefers-reduced-motion:reduce){
  .bb-q,.bb-sub{opacity:1;transform:none;transition:none}
  .brain-break.in .bb-arrow{animation:none}
}

/* depth + hover lift (200ms) */
.cs-cover{box-shadow:var(--shadow-md)}
.figure{box-shadow:var(--shadow-md);transition:transform .2s ease,box-shadow .2s ease}
.figure:hover{transform:translateY(-4px);box-shadow:0 20px 52px rgba(26,26,24,.17)}
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.team-grid figure{transition:transform .2s ease}
.team-grid figure:hover{transform:translateY(-3px)}
.embed{box-shadow:none;background:transparent}

/* gold, editorial "+" control */
.metric-plus{border-color:var(--gold-deep)}
.metric-plus::before,.metric-plus::after{background:var(--gold-deep)}
.metric-plus:hover{background:rgba(200,151,47,.12)}

/* Context showpiece: asymmetric + offset frame + owl overlap */
/* 01 · The Context — single column, full-width media, owl perched on the frame */
.ctx-media{margin:98px 0 22px}
.ctx-frame{position:relative;width:100%;margin:0;background:#5B7CE6;padding:7px;border-radius:var(--r-lg)}
.ctx-video{display:block;width:100%;height:auto;border-radius:17px}
.ctx-owl{position:absolute;top:0;right:28px;width:88px;height:auto;transform:translateY(-90%);z-index:3;filter:drop-shadow(0 6px 10px rgba(26,26,24,.18))}
.ctx-media figcaption{margin:14px 0 0;text-align:left;font-size:.85rem;color:var(--ink-muted)}

/* Design Process figures */
.dp-band{background:transparent;border:0;box-shadow:none;margin-top:22px}
.dp-band img{width:100%;max-width:760px;margin:0 auto;display:block}
.dp-bird{display:block;width:170px;max-width:46%;height:auto;margin:26px auto 2px}
.covers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.covers-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);display:block;transition:transform .2s ease}
.covers-grid img:hover{transform:translateY(-3px)}
.dp-note{margin-top:14px;font-size:.85rem;color:var(--ink-muted);text-align:center;font-style:italic}
.dp-collage{background:transparent;border:0;box-shadow:none;margin-top:6px;margin-bottom:-22px}
/* Design Process — structured blocks matching the original */
.dp-h{font-family:var(--f-display);font-weight:600;font-size:clamp(1.1rem,2.3vw,1.35rem);color:var(--ink);margin:40px 0 10px}
.dp-intro{display:grid;gap:22px;margin-top:6px}
.dp-intro .cs-body{max-width:none}
.dp-mascot{width:61%;max-width:308px;height:auto;justify-self:start}
.dp-split{display:grid;gap:30px;margin-top:30px;align-items:center}
.dp-keywords{margin:16px 0 26px}
.dp-keywords img{display:block;width:100%;max-width:596px;margin:0}
.dp-dots-fig{margin:24px 0 0}
.dp-dots-fig img{display:block;width:100%;max-width:564px;margin:0}
.dp-cue{font-family:var(--f-body);font-style:italic;font-size:1rem;margin-top:14px}
.dp-foot{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-faint);margin-top:6px}
@media(min-width:820px){
  .dp-intro{grid-template-columns:1.15fr .85fr;align-items:center;gap:18px}
  .dp-mascot{width:90%}
  .dp-split{grid-template-columns:1.15fr .85fr}
}

/* color-progression block heading — italic serif, right-aligned (matches original) */
.dp-cp-h{font-family:var(--f-body);font-style:italic;font-weight:600;font-size:clamp(1.2rem,2.6vw,1.55rem);color:var(--ink);text-align:right;margin:0 0 18px}

/* cover gallery — click to enlarge for detail */
.covers-grid img{cursor:zoom-in}
.cover-lightbox{position:fixed;inset:0;background:rgba(26,26,24,.82);display:none;place-items:center;z-index:1000;padding:4vmin;cursor:zoom-out}
.cover-lightbox.open{display:grid}
.cover-lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5)}

/* Context Problem / Mission with hand-drawn icons */
.problem-mission{display:grid;gap:30px;margin-top:38px;text-align:center}
.pm-icon{width:54px;height:auto;margin:0 auto 12px;display:block}
.pm-tag{display:inline-block;font-family:var(--f-body);font-size:.8125rem;font-weight:600;padding:.34em .85em;border-radius:var(--r-pill);line-height:1.3;margin-bottom:10px}
.pm-tag--clay{background:var(--clay-wash);color:var(--clay-deep)}
.pm-tag--green{background:#E2EFD6;color:#3E7C3C}
.pm-item p{color:var(--ink-soft);font-size:.93rem;max-width:40ch;margin:0 auto;line-height:1.55}
@media(min-width:768px){.problem-mission{grid-template-columns:1fr 1fr;gap:28px}}
.dp-collage img{width:100%;max-width:100%;margin:0;display:block;border-radius:var(--r-md)}
/* enlarge the brand-strategy collage past the card edges (clear of the side menu) */
@media(min-width:1001px){.dp-collage{margin-inline:-80px;margin-top:6px;margin-bottom:-22px}}
.card-img{display:block;max-width:100%;max-height:210px;margin:0 auto 16px;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);background:var(--paper-deep)}
.dp-wide{margin-top:24px;background:transparent;border:0}
.dp-wide img{width:100%;display:block;border-radius:var(--r-md)}
.dp-wide svg{width:100%;height:auto;display:block}
/* brand/asset images sit flat — never inside a white drop-shadow box */
.figure{background:transparent;box-shadow:none}
.figure:hover{box-shadow:none}
.dp-collage img{box-shadow:none}

/* hero meta as cards (Role / Responsibility / Team / Timeline) */
/* project meta — clean editorial divided strip (no boxes) */
.cs-meta-cards{gap:0;margin-top:34px}
.cs-meta-cards .card{background:transparent;border:0;border-top:1px solid var(--ink-line-2);border-radius:0;box-shadow:none;padding:18px 0}
.cs-meta-cards .card:hover{transform:none;box-shadow:none}
.cs-meta-cards .card .k{font-family:var(--f-mono);color:var(--gold-deep);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cs-meta-cards .card p{color:var(--ink);font-size:.95rem;margin-top:10px;line-height:1.5}
@media(min-width:560px){.cs-meta-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){
  .cs-hero .cs-meta-cards{grid-template-columns:repeat(4,1fr)}
  .cs-meta-cards .card{padding:18px 22px;border-left:1px solid var(--ink-line)}
  .cs-meta-cards .card:first-child{border-left:0;padding-left:0}
}
/* hero banner shows in full (no 16:9 side-crop) */
.cs-cover{aspect-ratio:auto;background:transparent}
.cs-cover img{height:auto;object-fit:initial}
.cs-press{display:inline-flex;align-items:center;gap:.55em;margin-top:18px;background:var(--gold-wash);padding:7px 14px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em}
.cs-press .k{color:var(--gold-deep);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.cs-press a{color:var(--gold-deep);font-weight:600}
.cs-press a:hover{color:var(--gold)}

@media(min-width:640px){.covers-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.covers-grid{grid-template-columns:repeat(5,1fr)}}
.figure{margin-top:26px;border-radius:var(--r-md);overflow:hidden;border:0;background:var(--paper-deep)}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{padding:12px 16px;font-size:.85rem;color:var(--ink-muted)}
.figure.placeholder{display:grid;place-items:center;min-height:200px;color:var(--ink-muted);font-family:var(--f-mono);font-size:.8rem;text-align:center;padding:24px}
.figure.placeholder code{color:var(--gold-deep)}
.fig-grid{display:grid;gap:14px;margin-top:26px}
@media (min-width:768px){.fig-grid{grid-template-columns:1fr 1fr}}
.fig-grid .figure{margin-top:0}
.fig-trio{display:grid;gap:14px;margin-top:26px;grid-template-columns:1fr}
@media (min-width:768px){.fig-trio{grid-template-columns:repeat(3,1fr)}}
.fig-trio .figure{margin-top:0}
.figure.persona{border:0;background:transparent;max-width:300px}
.figure.persona img{mix-blend-mode:multiply}
.figure.persona figcaption{padding-inline:0}
.fig-trio .figure.persona{max-width:none}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:20px 14px;margin-top:30px}
.team-grid figure{margin:0;text-align:center}
.team-grid img{width:100%;max-width:104px;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--paper-deep);margin:0 auto;display:block}
.team-grid figcaption{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.03em;color:var(--ink-muted);margin-top:8px;line-height:1.25}
/* interactive widget embeds */
.embed{margin-top:26px;border:0;border-radius:var(--r-md);overflow:hidden;background:var(--paper-card)}
.embed iframe{display:block;width:100%;border:0}
.embed-cap{font-size:.8rem;color:var(--clay);padding:10px 16px;border-top:1px solid var(--ink-line);font-family:var(--f-mono);letter-spacing:.02em}
.embed-ax iframe{height:600px}
@media (max-width:640px){.embed-ax iframe{height:1000px}}
.embed-lh iframe{height:640px}
@media (max-width:640px){.embed-lh iframe{height:1060px}}
.embed-wf iframe{height:640px}
@media (max-width:640px){.embed-wf iframe{height:1080px}}
/* quote — Crea✦Ting design-system style (display 500, gold rule, mono caption) */
/* 10 Outcome — Voices from the classroom (shaded quote cards) */
.voices-title{font-family:var(--f-body);font-style:italic;font-weight:600;font-size:clamp(1.3rem,2.6vw,1.72rem);letter-spacing:-.01em;color:var(--ink);margin:46px 0 20px}
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.voice{margin:0;border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px)}
.voice p{font-family:var(--f-display);font-weight:500;font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.46;letter-spacing:-.01em;margin:0}
.voice cite{display:block;margin-top:18px;font-style:normal;font-family:var(--f-mono);font-weight:700;font-size:.85rem;letter-spacing:.04em;line-height:1.5}
.voice--green{background:#E7EFDE}.voice--green p{color:#3F6A33}.voice--green cite{color:#5E824F}
.voice--cream{background:#F6ECCE}.voice--cream p{color:#8A6C22}.voice--cream cite{color:#9E8235}
.voice--blue{background:#E5EAF7}.voice--blue p{color:#3A4E86}.voice--blue cite{color:#6274A6}
@media(max-width:640px){.voices{grid-template-columns:1fr;gap:16px}}

.quote{margin-top:28px;max-width:36rem;border-left:3px solid var(--gold);padding:0 0 0 clamp(20px,3vw,32px)}
.quote p{font-family:var(--f-display);font-weight:500;font-style:normal;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.32;letter-spacing:-.01em;color:var(--ink);margin:0}
.quote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em;color:var(--ink-muted)}
.quote cite strong{color:var(--ink);font-weight:700}

/* ===== 06 · Color GPS — boxless rebuild ===== */
.cg-num{font-family:var(--f-mono);color:var(--gold-deep);font-size:.8rem;font-weight:700;letter-spacing:.08em}
.cg-h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.01em;color:var(--ink);margin:8px 0 12px}
.cg-block{margin-top:60px}
.cg-block .cs-body{max-width:64ch}
/* Block A — before / after */
.cg-ba{margin-top:56px}
.cg-ba-title{font-family:var(--f-display);font-weight:600;font-size:clamp(1.1rem,2.4vw,1.4rem);text-align:left;color:var(--ink);margin:0 0 26px;letter-spacing:-.01em}
.cg-ba-grid{display:grid;gap:30px}
.cg-col img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.cg-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:8px;margin-top:16px}
/* tags — Crea✦Ting design-system Tag style (filled soft pills) */
.cg-tag{font-family:var(--f-body);font-size:.8125rem;font-weight:600;padding:.32em .8em;border-radius:var(--r-pill);border:1px solid transparent;line-height:1.3}
.cg-tag--clay{background:var(--clay-wash);color:var(--clay-deep)}
.cg-tag--green{background:#E2EFD6;color:#3E7C3C}
@media(min-width:760px){
  .cg-ba-grid{grid-template-columns:1fr 1.32fr;gap:0;align-items:start;margin-inline:0 -7%}
  .cg-ba-grid .cg-col:first-child{padding-right:40px;border-right:1px solid var(--ink-line)}
  .cg-ba-grid .cg-col:last-child{padding-left:40px;overflow:visible}
  /* systemized-after.png has ~14.9% transparent margins (centered content) — shift left to flush it, image file untouched */
  .cg-ba-grid .cg-col:last-child img{margin-left:-14.9%}
}
/* Block B — sub-head (group divider; distinct from the ✦ block headers) */
.cg-subhead{margin-top:76px}
.cg-subhead .eyebrow-k{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px}
.cg-subhead h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.1rem);color:var(--ink);margin:0 0 16px;letter-spacing:-.015em;line-height:1.1}
.cg-subhead hr{border:0;border-top:1px solid var(--ink-line-2);margin:0}
/* ✦ block headers (01/02/03) reuse .dp-h.spark-pre; tighten margin inside blocks */
.cg-blockhead{margin:0 0 12px}
/* Block 01 — split (text left, image right) */
.cg-split{display:grid;gap:26px;margin-top:60px}
.cg-split-img{margin:0}
.cg-split-img img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
@media(min-width:820px){.cg-split{grid-template-columns:.78fr 1.22fr;align-items:start;gap:44px}.cg-split-text{padding-top:36px}}
/* Block 02 — full-width architecture grid */
.cg-fullimg{margin-top:22px}
.cg-fullimg img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
@media(max-width:620px){.cg-fullimg{overflow-x:auto;-webkit-overflow-scrolling:touch}.cg-fullimg img{width:auto;max-width:none;height:62vh;border-radius:var(--r-sm)}}
/* Block 02 — architecture grid: row-label gutter + per-column grade headers, hover-enlarge, PDF links */
.arch{position:relative;display:grid;grid-template-columns:88px 1fr;align-items:stretch;margin-top:22px}
.arch-gutter{position:relative}
.arch-lbl{position:absolute;right:12px;transform:translateY(-50%);text-align:right;font-family:var(--f-mono);font-size:.6rem;line-height:1.28;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.arch-img{position:relative;min-width:0;aspect-ratio:2856 / 1713}
.arch-cols{position:absolute;inset:0;display:flex;border-radius:6px}
.arch-col{position:relative;flex:1 1 0;background-image:url("dp/color-gps/arch-grid-cols.png");background-repeat:no-repeat;background-size:600% 100%;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;transform-origin:center}
.arch-cols:hover .arch-col:not(:hover){opacity:.4}
.arch-col:nth-child(1){background-position:0% 50%}
.arch-col:nth-child(2){background-position:20% 50%}
.arch-col:nth-child(3){background-position:40% 50%}
.arch-col:nth-child(4){background-position:60% 50%}
.arch-col:nth-child(5){background-position:80% 50%}
.arch-col:nth-child(6){background-position:100% 50%}
.arch-col:hover{opacity:1;transform:scale(1.05);z-index:5;box-shadow:0 10px 30px rgba(26,26,24,.18);border-radius:8px}
.arch-glabel{position:absolute;top:4%;left:50%;transform:translate(-50%,-50%);font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);pointer-events:none}
.arch-plink{position:absolute;left:14%;right:14%;top:68%;bottom:2%;display:block;cursor:pointer;border-radius:8px}
.arch-plink:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
@media(max-width:620px){.arch{grid-template-columns:56px 1fr}.arch-lbl{right:8px;font-size:.48rem;letter-spacing:.08em}.arch-glabel{font-size:.55rem}}
/* Block 03 — cue */
.cg-cue{font-family:var(--f-body);font-style:italic;color:var(--clay);margin:16px 0 0;display:flex;align-items:baseline;gap:.5em}
.cg-cue::before{content:"\2192";font-style:normal;font-weight:700;color:var(--clay);animation:cue-nudge 1.3s ease-in-out infinite}
@keyframes cue-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.cg-cue::before{animation:none}}
.cs-nav{display:flex;justify-content:space-between;gap:14px;margin-top:40px;padding-block:40px;border-top:1px solid var(--ink-line)}
.cs-nav a{font-family:var(--f-display);font-weight:500;display:inline-flex;align-items:center;gap:.4em;color:var(--gold-deep)}
.cs-nav a svg{transition:transform .2s}
.cs-nav a.cs-next:hover svg{transform:translateX(4px)}
.cs-nav a.cs-prev:hover svg{transform:translateX(-4px)}

/* About */
.about-wrap{display:grid;gap:30px;padding-block:60px}
.about-wrap h1{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(2.4rem,8vw,4rem)}
.about-wrap .body{color:var(--ink-soft);font-size:1.1rem;max-width:60ch}
.about-wrap .body strong{color:var(--ink);font-weight:700}
.about-wrap .body .gold-note{color:var(--gold-deep)}
.about-wrap .body p+p{margin-top:16px}
.about-text{display:grid;gap:24px}
.about-text h1 .title-spark{width:.5em;height:.5em;fill:var(--gold);vertical-align:.04em;margin-left:.12em}
.lead-star{width:.7em;height:.7em;fill:var(--gold-deep);vertical-align:-.04em;margin-right:.42em;display:inline-block}
.about-illus{margin:0;justify-self:center}
.about-illus img{width:92%;max-width:396px;height:auto;mix-blend-mode:multiply}
@media (min-width:768px){
  .about-wrap{grid-template-columns:minmax(0,36rem) auto;justify-content:start;align-items:end;gap:clamp(40px,5vw,84px)}
  .about-illus{justify-self:start}
  .about-illus img{max-width:484px;width:100%}
}

/* ---------- TABLET (>=768px) ---------- */
@media (min-width:768px){
  :root{--pad:40px}
  .section{padding-block:84px}
  .slide.active{min-height:clamp(460px,58vh,640px)}
  .intro .container{grid-template-columns:1.2fr .8fr;align-items:center;gap:40px}
  .intro-art{order:0}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .phase-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metrics-impact{grid-auto-rows:230px}
  .cs-meta{grid-template-columns:repeat(4,1fr);gap:30px}
}
.cs-meta{align-items:start}
.cs-meta .row.press{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;border-top:1px dashed var(--ink-line-2);padding-top:16px;margin-top:6px}
.cs-meta .row.press span{margin-bottom:0}
.cs-meta .row.press a{color:var(--gold-deep);font-weight:500}
.cs-meta .row.press a:hover{color:var(--gold)}

/* ---------- DESKTOP (>=1001px) ---------- */
@media (min-width:1001px){
  :root{--pad:48px;--nav-h:72px}
  .nav-links{display:flex}
  .nav-toggle{display:none}
  .mobile-menu{display:none}
  .section{padding-block:104px}
  .slide.active{min-height:clamp(560px,72vh,720px)}
  .hero-arrows{bottom:20px;padding-inline:40px}
  .intro .container{grid-template-columns:1.25fr .75fr;gap:64px}
  .intro-art img{max-width:380px}
  .works-grid{grid-template-columns:repeat(3,1fr)}
  .phase-grid{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metrics-impact{grid-auto-rows:310px}
  .metric .big{font-size:clamp(1.1rem,1.5vw,1.7rem)}
  .cs-section{padding-block:72px}
  .cs-hero{padding-block:72px 48px}
}

/* ---------- Case-study section navigator (sticky left rail) ---------- */
.cs-hero,.cs-section{scroll-margin-top:88px}
.cs-shell{display:block}
.cs-toc{display:none}
/* content column reads as a clean white surface, distinct from the warm page + rail */
.cs-doc{background:var(--paper-card)}
/* first section in the doc: drop its top border so it doesn't double the hero divider */
.cs-doc>section.cs-section:first-of-type{border-top:0}
@media (min-width:1001px){
  .cs-shell{max-width:var(--maxw);margin-inline:auto;padding-inline:48px;
    display:grid;grid-template-columns:204px minmax(0,1fr);gap:56px;align-items:start}
  .cs-doc{min-width:0;align-self:start;border:1px solid var(--ink-line);border-radius:var(--r-lg);padding-inline:72px}
  .cs-doc .container{max-width:none;margin-inline:0;padding-inline:0}
  /* panel top padding so content sits inside the white card */
  .cs-doc>section.cs-section:first-of-type{padding-top:42px}
  .cs-doc>section.cs-section:last-of-type{padding-bottom:48px}
  .cs-toc{display:block;position:sticky;top:92px;align-self:start}
  .cs-toc-title{font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-muted);margin:0 0 12px 10px}
  .cs-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  .cs-toc a{display:flex;gap:10px;align-items:baseline;padding:11px 12px;border-radius:8px;white-space:nowrap;
    font-family:var(--f-display);font-weight:500;font-size:.88rem;line-height:1.2;color:var(--ink-soft);
    transition:color .15s ease, background .15s ease}
  .cs-toc a>span:last-child{overflow:hidden;text-overflow:ellipsis}
  .cs-toc a .n{font-family:var(--f-mono);font-weight:700;font-size:.7rem;color:var(--ink-faint);flex:0 0 auto;min-width:1.4em}
  .cs-toc a:hover{color:var(--ink);background:var(--paper-deep)}
  .cs-toc a.active{color:var(--ink);background:var(--gold-wash)}
  .cs-toc a.active .n{color:var(--gold-deep)}
}

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

/* ============================================================
   SPARK STUDIO — case-study components (mirrors Takeoff patterns)
   ============================================================ */
:root{ --sp-accent:#ffffff; }

/* White photo-mat frame (screenshots carry the colour).
   One variable drives every frame: 02 analytics, 04 scenario, 05 cells, 07 figures. */
.sp-frame{
  border:6px solid var(--sp-accent);
  border-radius:20px;
  overflow:hidden; line-height:0;
  box-shadow:0 12px 32px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
}
.sp-frame img{display:block;width:100%;height:auto}
.sp-fig{margin:26px 0 8px}
.sp-fig figcaption{margin-top:12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.02em;color:var(--ink-muted);line-height:1.5;padding:0}

/* Hero meta pills (same radius/size/weight as .cg-tag / .pm-tag) */
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sp-tag{font-family:var(--f-body);font-size:.8125rem;font-weight:600;padding:.34em .85em;border-radius:var(--r-pill);background:var(--gold-wash);color:var(--gold-deep);line-height:1.3}

/* Hand-drawn portraits: natural edges, no frame, no crop (rule 6b).
   mix-blend multiply knocks the white ground out onto the paper. */
.sp-portrait{border:0;background:transparent;max-width:280px;margin:22px 0 8px}
.sp-portrait img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.sp-portrait figcaption{padding:0;margin-top:10px;font-family:var(--f-mono);font-size:.76rem;color:var(--ink-muted);line-height:1.5}

/* 04 · A/B/C mode blocks — identical construction for all three */
.sp-mode{margin-top:30px}
.sp-mode + .sp-mode{margin-top:12px}
.sp-mode-head{font-family:var(--f-display);font-weight:600;font-size:clamp(1.05rem,2vw,1.28rem);color:var(--ink);margin:0}
.sp-mode-head .lede{display:block;font-family:var(--f-body);font-weight:400;font-size:.95rem;color:var(--clay);margin-top:4px}
.persona-block{display:flex;gap:20px;align-items:flex-start;margin:16px 0 6px}
.persona-block img{
  width:110px; height:auto;         /* natural aspect, no crop */
  border-radius:0; object-fit:contain;
  flex:0 0 110px; background:transparent;
  mix-blend-mode:multiply;
}
.persona-block .pb-body{min-width:0}
.persona-block .pb-name{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--ink);margin:0}
.persona-block .pb-arch{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin:4px 0 8px}
.persona-block p{font-size:.95rem;color:var(--ink-soft);line-height:1.6;margin:0}
@media(max-width:560px){
  .persona-block img{width:88px;flex-basis:88px}
}

/* 05 · Before / After — uniform ratio, level rows */
.ba-heads{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.ba-head{font-family:var(--f-mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ba-head.before{color:var(--ink-muted)}
.ba-head.after{color:var(--gold-deep)}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px;margin-top:12px}
.ba-cell{min-width:0}
.ba-cell .sp-frame{aspect-ratio:16 / 10}
.ba-cell .sp-frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba-cap{margin-top:12px}
.ba-cap .role{display:none}
.ba-cap .n{font-family:var(--f-mono);font-size:.7rem;font-weight:700;color:var(--gold-deep);letter-spacing:.06em;margin-right:.5em}
.ba-cap .t{font-family:var(--f-display);font-weight:600;font-size:.98rem;color:var(--ink)}
.ba-cap p{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin:5px 0 0}
@media(max-width:640px){
  .ba-heads{display:none}
  .ba-grid{grid-template-columns:1fr;gap:20px}
  .ba-cap .role{display:inline-block;font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);margin-right:.4em}
}

/* ============================================================
   ISTE EVENT — reuses Spark white-mat frame (.sp-frame/.sp-fig), pills (.sp-tag),
   arrow-list, quote, cs-meta. Adds YouTube, two-ups, ownership table, embeds.
   ============================================================ */
/* YouTube: same white-mat treatment as the photos */
.yt-embed{aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:6px solid var(--sp-accent);
  box-shadow:0 12px 32px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.05);margin:0}
.yt-embed iframe{width:100%;height:100%;border:0;display:block}
.yt-fig{margin:26px 0 8px}
.yt-fig figcaption{margin-top:12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.02em;color:var(--ink-muted);line-height:1.5}

/* Two-up evidence / fabrication grid */
.ev-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0 8px}
.ev-two .sp-fig{margin:0}
@media(max-width:640px){.ev-two{grid-template-columns:1fr;gap:20px}}

/* Social: narrow phone-format two-up, centered, not stretched into a full-width mat */
.ev-social{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start;margin:22px 0 8px}
.ev-social .sp-fig{margin:0;flex:0 1 240px;max-width:250px}
.ev-social .sp-frame{border-width:5px;border-radius:16px}

/* Ownership / metrics table */
.cs-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:.95rem}
.cs-table th{text-align:left;padding:12px 12px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);border-bottom:2px solid var(--ink)}
.cs-table td{padding:13px 12px;border-bottom:1px solid var(--ink-line);color:var(--ink-soft);line-height:1.5;vertical-align:top}
.cs-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.cs-table .owner{font-family:var(--f-display)}
.cs-table-wrap{overflow-x:auto;margin-top:24px}
@media(max-width:640px){.cs-table td:first-child{white-space:normal}}

/* Event interactive embeds */
.embed-dist iframe{height:660px}
.embed-swag iframe{height:700px}
@media(max-width:640px){
  .embed-dist iframe{height:880px}
  .embed-swag iframe{height:1020px}
}

/* Spark interactive embeds (fixed fallback heights; app.js auto-fits when it can) */
/* Height-sync writes the real height; these min-heights approximate the settled
   desktop size so a late-loading embed shifts layout by pixels, not screens. */
.embed-sp-brand iframe{min-height:600px}
.embed-sp-principles iframe{min-height:620px}
.embed-sp-mode iframe{min-height:700px}
.embed-sp-gen iframe{min-height:760px}
@media(max-width:640px){
  .embed-sp-brand iframe,.embed-sp-principles iframe,.embed-sp-mode iframe,.embed-sp-gen iframe{min-height:420px}
}

/* ============================================================
   SPARK STUDIO — Fix Round 1 (quote cards, callouts, 02 two-col,
   persona crop, before/after chips+zoom, lite YouTube)
   ============================================================ */
:root{ --sp-quote-bg:#F6EEDD; }

/* Lite YouTube (preview + play, iframe on click) */
.yt-lite{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;cursor:pointer;margin:0;
  border:6px solid var(--sp-accent);box-shadow:0 12px 32px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.05)}
.yt-lite img{width:100%;height:100%;object-fit:cover;display:block}
.yt-lite .yt-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:12px;
  background:#212121 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;opacity:.92;transition:background-color .2s}
.yt-lite:hover .yt-play{background-color:#c00}
.yt-lite:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}

/* Teacher-quote card: avatar left, tinted panel, gold rule (Nicole + Ms. Jones) */
.sp-qcard{display:flex;gap:clamp(18px,2.5vw,26px);align-items:flex-start;background:var(--sp-quote-bg);
  border-left:3px solid var(--gold);border-radius:16px;padding:clamp(20px,3vw,30px);margin:28px 0 8px;max-width:660px}
.sp-qcard .q-portrait{flex:0 0 128px;width:128px}
.sp-qcard .q-portrait img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.sp-qcard .q-body{min-width:0}
.sp-qcard blockquote{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.42;color:var(--ink)}
.sp-qcard cite{display:block;margin-top:16px;font-style:normal;font-family:var(--f-mono);font-weight:700;font-size:.85rem;letter-spacing:.03em;color:var(--ink)}
.sp-qcard cite .role{display:block;font-weight:400;color:var(--ink-muted);margin-top:3px;letter-spacing:.02em}
@media(max-width:560px){.sp-qcard{flex-direction:column;gap:14px}.sp-qcard .q-portrait{width:104px;flex-basis:104px}}

/* Callout: tinted panel + left pillar. Red variant (Root cause), frame variant (Scenario) */
.sp-callout{--bar:var(--gold-deep);--bg:var(--paper-deep);background:var(--bg);border-left:5px solid var(--bar);
  border-radius:0 14px 14px 0;padding:20px clamp(20px,2.6vw,28px);margin:26px 0}
.sp-callout .k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bar);font-weight:700;margin:0 0 8px}
.sp-callout .t{font-family:var(--f-body);font-style:italic;font-size:clamp(1.14rem,2.1vw,1.5rem);line-height:1.3;color:var(--ink);margin:0 0 10px}
.sp-callout p{margin:0;color:var(--ink-soft);line-height:1.6}
.sp-callout--red{--bar:var(--clay);--bg:#F6E7DF}
.sp-callout--red .t{color:var(--clay-deep)}
.sp-callout--frame{--bar:var(--gold-deep);--bg:var(--paper-deep)}

/* 02 · two-column: numbered list + pinned analytics image */
.sp-opp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,44px);align-items:start;margin-top:22px}
.sp-opp .opp-list{list-style:none;counter-reset:opp;margin:0;padding:0}
.sp-opp .opp-list li{position:relative;padding-left:2.6em;margin:0 0 20px;line-height:1.6;color:var(--ink-soft)}
.sp-opp .opp-list li:last-child{margin-bottom:0}
.sp-opp .opp-list li::before{counter-increment:opp;content:counter(opp);position:absolute;left:0;top:.05em;width:1.85em;height:1.85em;
  border-radius:50%;background:var(--gold-wash);color:var(--gold-deep);font-family:var(--f-mono);font-weight:700;font-size:.82rem;
  display:flex;align-items:center;justify-content:center}
.sp-opp .opp-list li strong{color:var(--ink);font-weight:700}
.opp-img{position:relative;margin:0}
.opp-img .sp-frame{margin:0}
.opp-pin{position:absolute;right:12px;width:30px;height:30px;border-radius:50%;background:var(--gold-deep);color:#fff;
  font-family:var(--f-mono);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.28);border:2px solid #fff;z-index:2}
@media(max-width:720px){.sp-opp{grid-template-columns:1fr}.sp-opp .opp-img{order:-1;margin-bottom:6px}}

/* 04c · persona portraits: container matches text height, bottom-cropped */
.persona-block{display:flex;gap:20px;align-items:stretch;margin:16px 0 6px}
.persona-block .p-portrait{flex:0 0 110px;width:110px;overflow:hidden;align-self:stretch;border-radius:8px}
.persona-block .p-portrait img{width:100%;height:100%;object-fit:cover;object-position:top;mix-blend-mode:multiply;display:block}
@media(max-width:560px){.persona-block .p-portrait{flex-basis:88px;width:88px}}

/* 05 · before/after chips + subtle tints + hover zoom */
.ba-cell{border-radius:14px;padding:12px}
.ba-cell.before{background:#F5F2EA}
.ba-cell.after{background:#EDF4E7}
.ba-chip{display:inline-block;font-family:var(--f-mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.32em .72em;border-radius:999px;margin:2px 0 12px}
.ba-cell.before .ba-chip{background:#E7E1D3;color:#6B6355}
.ba-cell.after .ba-chip{background:#DCEBCE;color:#3E7C3C}
.ba-cell .sp-frame{overflow:hidden}
.ba-cell .sp-frame img{transition:transform .35s ease}
.ba-cell .sp-frame:hover img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.ba-cell .sp-frame img{transition:none}.ba-cell .sp-frame:hover img{transform:none}}

/* ============================================================
   SPARK STUDIO — Master Fix (01 root-cause pill, 02 hotspots,
   03 browns, 04 scenario side-by-side, 05 number/chip system)
   ============================================================ */
:root{ --clay-red:#B23A2B; --ba-brown:#6B5333; --ba-green:#3E7C3C; }

/* 01 · Root cause: pill + red italic question + plain body (no card/pillar) */
.rc-tag{display:inline-block;background:var(--clay-red);color:#fff;border-radius:999px;padding:8px 18px;
  font-family:var(--f-body);font-weight:600;font-size:.9rem;letter-spacing:.01em;margin:28px 0 12px}
.rc-q{font-family:var(--f-body);font-style:italic;font-size:clamp(1.14rem,2.1vw,1.5rem);line-height:1.3;
  color:var(--clay-red);margin:0 0 12px}
#the-problem .cards .card:nth-child(3) h4{color:var(--clay-red)}

/* 03 · Ms. Jones card: warm browns on the cream panel */
.sp-qcard--brown blockquote{color:#4A2F22}
.sp-qcard--brown blockquote strong{color:#4A2F22;font-weight:700}
.sp-qcard--brown cite{color:#6E4C39}
.sp-qcard--brown cite .role{color:#8A6A55;font-style:italic}

/* 04 · Scenario callout + image side-by-side (~45/55, vertically centered) */
.sp-scenario{display:grid;grid-template-columns:45fr 55fr;gap:clamp(20px,3vw,36px);align-items:center;margin:26px 0}
.sp-scenario .sp-callout{margin:0}
.sp-scenario .sp-fig{margin:0}
@media(max-width:720px){.sp-scenario{grid-template-columns:1fr;gap:16px}}
/* tighten the gap between each persona block and its embed so the pair reads as one unit */
.sp-mode .persona-block{margin-bottom:2px}
.sp-mode .embed{margin-top:12px}

/* 02 · interactive numbered hotspots over the analytics image */
.opp-fig{position:relative;margin:0}
.opp-fig .sp-frame{margin:0}
.opp-box{position:absolute;border:2px solid var(--gold-deep);border-radius:8px;background:rgba(200,151,47,.10);
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.opp-box.is-active{opacity:1}
.opp-hotspot{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer}
.opp-hotspot .opp-badge{width:30px;height:30px;border-radius:50%;background:var(--gold-deep);color:#fff;font-family:var(--f-mono);
  font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.28);flex:0 0 auto;transition:background .2s}
.opp-hotspot .opp-plabel{font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.03em;background:#fff;
  color:var(--gold-deep);border:1px solid var(--gold-soft);border-radius:999px;padding:.4em .7em;white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.opp-hotspot:hover .opp-plabel,.opp-hotspot:focus-visible .opp-plabel,.opp-hotspot.is-active .opp-plabel{opacity:1;transform:none}
.opp-hotspot.is-active .opp-badge,.opp-hotspot:hover .opp-badge{background:var(--clay)}
.opp-hotspot:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:999px}
.sp-opp .opp-list li{cursor:default;border-radius:8px;transition:background .2s}
.sp-opp .opp-list li.is-active{background:var(--gold-wash)}
.sp-opp .opp-list li.is-active::before{background:var(--gold-deep);color:#fff}

/* 05 · number/chip color system + hanging-indent grid */
.ba-head.before{color:var(--ba-brown)}
.ba-head.after{color:var(--ba-green)}
.ba-cell.before .ba-chip{background:#EDE6D6;color:var(--ba-brown)}
.ba-cell.after .ba-chip{background:#DCEBCE;color:var(--ba-green)}
.ba-cap{display:grid;grid-template-columns:auto 1fr;column-gap:14px;margin-top:12px}
.ba-cap .n{grid-column:1;grid-row:1 / 3;align-self:start;font-family:var(--f-mono);font-weight:700;font-size:1.5rem;line-height:1;margin:0}
.ba-cap .t{grid-column:2;grid-row:1;align-self:center}
.ba-cap p{grid-column:2;grid-row:2;margin:5px 0 0}
.ba-cell.before .ba-cap .n{color:var(--ba-brown)}
.ba-cell.after .ba-cap .n{color:var(--ba-green)}

/* ============================================================
   SPARK STUDIO — Fix Round 3
   ============================================================ */
:root{ --jones-brown:#5A3A28; }
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* §3 Root cause tag → DS red-tint tag (soft clay wash bg + deep clay-red text) */
.rc-tag{background:var(--clay-wash);color:var(--clay-deep)}

/* §2 · 01 friction cards = one 1×3 row (matches text column) + connector card-03 → Root cause */
#the-problem .cards{grid-template-columns:repeat(3,1fr)}
/* connector bound structurally to card 03 (stays centered under it at any width) */
#the-problem .cards .card:nth-child(3){position:relative}
.rc-link{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:2px;height:20px;background:var(--clay-red)}
.rc-link::after{content:"";position:absolute;left:-3px;bottom:-8px;width:8px;height:8px;border-radius:50%;background:var(--clay-red)}
@media(max-width:640px){#the-problem .cards{grid-template-columns:1fr}.rc-link{display:none}}

/* §4 · 02 larger image column + click-to-enlarge cursor */
.sp-opp{grid-template-columns:42fr 58fr}
.opp-fig .sp-frame img{cursor:zoom-in}

/* §5 · 03 Ms. Jones: unify all type to one brown, body a step smaller */
.sp-qcard--brown blockquote{color:var(--jones-brown);font-size:clamp(.95rem,1.35vw,1.12rem)}
.sp-qcard--brown blockquote strong{color:var(--jones-brown)}
.sp-qcard--brown cite{color:var(--jones-brown)}
.sp-qcard--brown cite .role{color:var(--jones-brown);font-style:italic}

/* §7 · 04 Scenario: image LEFT / text RIGHT, image side larger */
.sp-scenario{grid-template-columns:55fr 45fr}

/* §10 · 04 A/B/C comparison strip */
.sp-abc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 10px}
.sp-abc a{display:block;text-decoration:none;background:var(--paper-card);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:18px;transition:transform .18s,box-shadow .18s}
.sp-abc a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.sp-abc .l{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--gold-wash);color:var(--gold-deep);font-family:var(--f-mono);font-weight:700;align-items:center;justify-content:center;font-size:.9rem}
.sp-abc h4{font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--ink);margin:12px 0 4px}
.sp-abc p{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.5}
.sp-mode{scroll-margin-top:84px}
@media(max-width:640px){.sp-abc{grid-template-columns:1fr}}

/* §11 · 05 numbers = small color-shaded circle */
.ba-cap .n{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1}
.ba-cell.before .ba-cap .n{background:#EDE6D6;color:var(--ba-brown)}
.ba-cell.after .ba-cap .n{background:#DCEBCE;color:var(--ba-green)}

/* ============================================================
   SPARK STUDIO — Fix Round 5
   ============================================================ */
:root{ --sp-blue:#2E6FE0; --sp-blue-bg:#EAF1FC; }

/* §01 · friction cards → vertical numbered flow with downward connectors */
#the-problem .cards{display:flex;flex-direction:column;gap:0;max-width:none;margin-top:22px}
#the-problem .card{position:relative;background:transparent;border:0;box-shadow:none;padding:14px 0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;width:100%;max-width:none;margin:0}
#the-problem .card:hover{transform:none;box-shadow:none}
#the-problem .card .k{grid-column:1;grid-row:1 / 3;align-self:start;margin:0;font-family:var(--f-mono);font-weight:700;font-size:.72rem;letter-spacing:.05em;color:var(--ink-muted);background:var(--paper-deep);border-radius:999px;padding:.5em .85em;white-space:nowrap;height:max-content}
#the-problem .card:nth-child(3) .k{color:#fff;background:var(--clay-red)}
#the-problem .card h4{grid-column:2;grid-row:1;margin:0;align-self:center}
#the-problem .card:nth-child(3) h4{color:var(--clay-red)}
#the-problem .card p{grid-column:2;grid-row:2;margin:5px 0 0}
/* connectors: neutral between items, clay-red from card 03 into the Root cause tag */
#the-problem .card::after{content:"";position:absolute;left:26px;bottom:-1px;width:2px;height:16px;background:var(--ink-line-2);transform:translateX(-1px)}
#the-problem .card:nth-child(3)::after{background:var(--clay-red);height:20px;bottom:-12px}
#the-problem .card:nth-child(3) .rc-link{display:none}   /* superseded by the flow connector */

/* §02c · text ~40% / image ~60% */
.sp-opp{grid-template-columns:40fr 60fr}

/* §04a · Scenario callout in the product-blue scheme */
.sp-callout--frame{--bar:var(--sp-blue);--bg:var(--sp-blue-bg)}
.sp-callout--frame .k{color:var(--sp-blue)}
.sp-callout--frame .t{color:var(--sp-blue)}
.sp-callout--frame p{color:#33507e}

/* §05a · hover grows the whole framed cell (no inner-image crop) */
.ba-cell .sp-frame{transition:transform .3s ease, box-shadow .3s ease}
.ba-cell .sp-frame:hover{transform:scale(1.05);z-index:3;position:relative;box-shadow:0 18px 44px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.05)}
.ba-cell .sp-frame img{transform:none!important;transition:none}
.ba-cell .sp-frame:hover img{transform:none!important}
@media(prefers-reduced-motion:reduce){.ba-cell .sp-frame{transition:none}.ba-cell .sp-frame:hover{transform:none}}

/* §05b · per-cell chips removed; column headers carry the labels */
.ba-chip{display:none!important}

/* ============================================================
   SPARK STUDIO — Fix Round 5b (01 connectors + root-cause align + question font)
   ============================================================ */
/* fixed number column so titles + Root cause share one left edge */
#the-problem .card{grid-template-columns:132px 1fr}
/* connectors centered under the number pillars */
#the-problem .card::after{left:52px}
#the-problem .card:nth-child(3)::after{left:52px}
/* Root cause block indented to align with the card titles ("Editing is a Band-Aid") */
.rc-block{margin-left:148px}
/* question matches the header font (Poppins 600), body stays body text */
.rc-q{font-family:var(--f-display);font-weight:600;font-style:normal;font-size:clamp(1.12rem,2.2vw,1.42rem);color:var(--clay-red)}
@media(max-width:640px){
  #the-problem .card{grid-template-columns:auto 1fr}
  #the-problem .card::after,#the-problem .card:nth-child(3)::after{left:26px}
  .rc-block{margin-left:0}
}

/* Fix Round 5c: Root cause question matches header size (1.1rem), body matches card body (.95rem) */
.rc-q{font-size:1.1rem}
.rc-block .cs-body{font-size:.95rem}

/* Fix Round 5d: 02 enlarge the analytics image (list narrower, image dominant). Image stays exact/full-res in export -> no pixelation. */
.sp-opp{grid-template-columns:34fr 66fr;gap:clamp(20px,2.6vw,34px);align-items:start}
@media(max-width:720px){.sp-opp{grid-template-columns:1fr}}

/* ===== R6 · teacher quotes · action cues · switch bar · ABC thumbnails ===== */
/* (1)(2) quote sizing: slightly smaller text + more line-height; unified Jones + Nicole */
.sp-qcard blockquote,.sp-qcard--brown blockquote{font-size:clamp(.9rem,1.15vw,1.06rem);line-height:1.68}

/* (4) action cue: clay-red italic + leading arrow */
.sp-cue{margin:16px 0 2px;font-family:var(--f-display);font-style:italic;font-weight:500;
  color:var(--clay-red);font-size:1rem;display:flex;align-items:baseline;gap:.55em}
.sp-cue::before{content:"\2192";font-style:normal;font-weight:700;transform:translateY(1px)}

/* (6) three-mode switch bar */
.sp-spectrum{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,42px);margin:6px 0 2px}
.sp-spectrum-copy{flex:1 1 320px;margin:0}
.sp-switch{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px;border-radius:999px;
  background:linear-gradient(90deg,#63C9C4 0%,#5B96EE 100%);box-shadow:0 8px 22px rgba(46,111,224,.22)}
.sp-seg{display:inline-flex;align-items:center;gap:8px;border:2px solid transparent;background:transparent;
  cursor:pointer;border-radius:999px;padding:9px 11px;color:rgba(255,255,255,.92);font:inherit;transition:all .18s ease}
.sp-seg-ic{display:inline-flex;width:20px;height:20px;flex:0 0 auto}
.sp-seg-ic svg{width:100%;height:100%}
.sp-seg-lbl{display:none;font-family:var(--f-display);font-weight:700;font-size:.92rem;white-space:nowrap}
.sp-seg:hover:not(.is-active){background:rgba(255,255,255,.2);color:#fff}
.sp-seg.is-active{background:#fff;border-color:#2E6FE0;color:#2E6FE0;padding:8px 15px;box-shadow:0 3px 10px rgba(46,111,224,.28)}
.sp-seg.is-active .sp-seg-lbl{display:inline}
@media(max-width:560px){.sp-switch{width:100%;justify-content:space-between}
  .sp-seg.is-active .sp-seg-lbl{display:none}.sp-seg.is-active{padding:9px 11px}}

/* (5) ABC card thumbnails */
.abc-thumb{display:block;width:100%;margin:0 0 12px;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);line-height:0;transition:box-shadow .18s}
.abc-thumb svg{display:block;width:100%;height:auto}
.sp-abc a:hover .abc-thumb{box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* ================= R7 · section polish (01/02/03/04) ================= */
/* 01 · Nicole quote text → dark brown (match Ms Jones) */
#the-problem .sp-qcard blockquote,#the-problem .sp-qcard blockquote strong{color:var(--jones-brown)}
#the-problem .sp-qcard cite{color:var(--jones-brown)}
#the-problem .sp-qcard cite .role{color:var(--jones-brown);font-style:italic}
/* 01 · align all body copy to one right margin (full doc width) */
#the-problem .cs-body{max-width:none}
/* 01 · remove the red connector under 03·Process; white star in that pill */
#the-problem .card:nth-child(3)::after{display:none}
#the-problem .card:nth-child(3) .k::before{background-color:#fff}

/* 02 · enlarge dashboard image; keep boxes + labels always visible */
.sp-opp{grid-template-columns:30fr 70fr;gap:clamp(18px,2.4vw,32px);align-items:start}
.opp-box{opacity:1}
.opp-hotspot .opp-plabel{opacity:1;transform:none}
/* 02 · dashed connectors from each list item toward the image */
.sp-opp .opp-list li{position:relative}
.sp-opp .opp-list li::after{content:"";position:absolute;top:.85em;
  right:calc(-1 * clamp(18px,2.4vw,32px));width:clamp(18px,2.4vw,32px);
  border-top:2px dashed var(--clay-red);opacity:.5}
@media(max-width:720px){.sp-opp{grid-template-columns:1fr}.sp-opp .opp-list li::after{display:none}}

/* 03 · nudge Ms Jones portrait up to the text's top edge */
#strategic-context .sp-qcard--brown .q-portrait{margin-top:-8px}

/* 04 · spacing around the spectrum row + after the action cue */
.sp-spectrum{margin:30px 0 26px}
.sp-cue{margin:18px 0 30px}
/* 04 · move ABC thumbnail below the number + text */
.abc-thumb{margin:14px 0 0}

/* ================= R8 · 01 connectors · 05 white frame · 03 align ================= */
/* 01 · center the flow connectors under the pillars (132px number column) */
#the-problem .card::after{left:66px}
@media(max-width:640px){#the-problem .card::after,#the-problem .card:nth-child(3)::after{left:47px}}

/* 05 · white backing so translucent mockups sit on a clean, consistent white container */
.ba-cell .sp-frame{background:#fff}

/* 03 · align intro copy to full left/right margin; lift Ms Jones portrait 10px more */
#strategic-context .cs-body{max-width:none}
#strategic-context .sp-qcard--brown .q-portrait{margin-top:-18px}

/* ================= R9 · 01 remove connectors · 02 label↔bubble · 04 pad · 05 zoom ================= */
/* 01 · remove the vertical flow connectors entirely */
#the-problem .card::after{display:none!important}

/* 02 · align each list label to its bubble height on the image; keep dotted connectors */
@media(min-width:721px){
  .sp-opp{align-items:stretch}
  .sp-opp .opp-list{position:relative}
  .sp-opp .opp-list li{position:absolute;left:0;right:0;margin:0}
  .sp-opp .opp-list li[data-opp="1"]{top:25%}
  .sp-opp .opp-list li[data-opp="2"]{top:58%}
  .sp-opp .opp-list li[data-opp="3"]{top:78%}
  .sp-opp .opp-list li::after{border-top:2px dashed var(--clay-red);opacity:.6}
}

/* 04 · more breathing room above the spectrum paragraph */
.sp-spectrum{margin:52px 0 26px}

/* 05 · larger hover preview + click-to-enlarge each screen */
.ba-cell .sp-frame{cursor:zoom-in}
.ba-cell .sp-frame:hover{transform:scale(1.16)!important}

/* ================= R10 · 02 label/box nudges · 04 thumbnail top-align ================= */
/* 02 · remove all red dotted connectors */
.sp-opp .opp-list li::after{display:none!important}
/* 02 · lift Trouble spots up so it no longer overlaps Student learning activity */
@media(min-width:721px){ .sp-opp .opp-list li[data-opp="2"]{top:48%} }
/* 02 · shift the three "Spark Studio can import" badges left 15px */
.opp-hotspot{transform:translateX(-15px)}
/* 02 · drop outline boxes 2 & 3 by 10px */
.opp-box[data-opp="2"],.opp-box[data-opp="3"]{transform:translateY(10px)}

/* 04 · top-align the A/B/C thumbnails (reserve the 2-line description height) */
.sp-abc p{min-height:3em}

/* ================= R11 · 02 restore hover feedback on the analytics boxes ================= */
/* faint by default; the box matching the hovered paragraph (or badge) pops */
.opp-box{border-color:rgba(200,151,47,.32);background:transparent;
  transition:border-color .2s,background .2s,box-shadow .2s}
.opp-box.is-active{border-color:var(--gold-deep);background:rgba(200,151,47,.14);
  box-shadow:0 6px 20px rgba(200,151,47,.25)}
/* dim non-active import labels so the hovered pairing reads clearly */
.opp-hotspot .opp-plabel{opacity:.55}
.opp-hotspot.is-active .opp-plabel{opacity:1}
.opp-hotspot.is-active .opp-badge{transform:scale(1.08)}

/* R11b · shift the three import badge+label frames a further 15px left (30px total) */
.opp-hotspot{transform:translateX(-30px)}

/* R12 · shift only the brown outline boxes left (badges/labels unchanged) */
/* box 1 & 3 → left 20px; box 2 → left 15px; keep boxes 2 & 3 dropped 10px */
.opp-box[data-opp="1"]{transform:translateX(-20px)}
.opp-box[data-opp="2"]{transform:translate(-15px,10px)}
.opp-box[data-opp="3"]{transform:translate(-20px,10px)}

/* ================= R13 · 04 switch below paragraph + ABC state sync ================= */
/* paragraph keeps its top breathing room; switch bar becomes a left-aligned block below it */
.sp-spectrum-copy{margin-top:52px;max-width:68ch}
.sp-switch{display:flex;width:-moz-fit-content;width:fit-content;margin:20px 0 8px}
/* the ABC container reflects the active switch mode (autoplay-driven) */
.sp-abc a{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sp-abc a.is-active{border-color:#2E6FE0;box-shadow:0 10px 26px rgba(46,111,224,.20);transform:translateY(-4px)}
.sp-abc a.is-active .l{background:#2E6FE0;color:#fff}

/* R14 · bolden persona subheaders (Traditional & Focused / High-Velocity Prep / Targeted Intervention) */
.persona-block .pb-arch{font-weight:700}


/* Intro — quoted lede with gold rule + bold phrase */
.intro-quote{margin:6px 0 0;max-width:62ch}
.intro-quote p{font-family:var(--f-body);font-weight:400;font-style:normal;font-size:1.08rem;line-height:1.6;letter-spacing:0;color:var(--ink-soft)}
.intro-quote p strong{color:var(--ink);font-weight:700}
/* Intro — caption line with animated spark */
.intro-caption{margin-top:20px;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.02em;color:var(--ink-muted)}
.intro-caption em{font-style:italic}
.twinkle-star{display:inline-block;width:1.05em;height:1.05em;margin:0 .12em 0 .3em;vertical-align:-.16em;fill:var(--gold);transform-origin:center;animation:twinkle 1.9s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.8) rotate(0deg)}50%{opacity:1;transform:scale(1.12) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.twinkle-star{animation:none;opacity:1}}

/* ================= R15 · 02 swap — dashboard image LEFT, labels/text RIGHT ================= */
.sp-opp{grid-template-columns:68fr 32fr}
.opp-fig{order:-1}
@media(max-width:720px){.sp-opp{grid-template-columns:1fr}.opp-fig{order:-1}}

/* R16 · 02 · lift list item 1 to align with the image's "1" badge (18%) */
@media(min-width:721px){ .sp-opp .opp-list li[data-opp="1"]{top:18%} }

/* R17 · 05 · "After · Data Grounded" cells → clearer light green (was reading yellowish) */
.ba-cell.after{background:#E3F1DD}

/* R18 · 05 · soften the "After" green ~30% lighter (≈70% intensity) */
.ba-cell.after{background:#EBF5E7}

/* R19 · 07 · frameless laptop mockup (embed image directly on the page) */
.sp-fig--bare .sp-frame{border:0;box-shadow:none;border-radius:0;background:transparent;overflow:visible}
.sp-fig--bare{margin:14px 0 8px}

/* R20 · 07 · shrink laptop mockup ~20% + surrounding padding; space around team-photo caption */
.sp-fig--bare{max-width:80%;margin:28px auto 34px}
#final-impact .sp-fig figcaption{margin:16px 0 26px}

/* ================= R21 · 03 · Five design principles as cream cards (icons kept) ================= */
.dp-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.dp-card{display:flex;flex-direction:column}
.dp-card .dp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dp-card .k{margin:0}
.dp-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:#EAF1FC;flex:0 0 auto}
.dp-ic svg{width:22px;height:22px;fill:none;stroke:#2E6FE0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-card h4{margin:2px 0 6px;font-size:1.02rem;line-height:1.3}
.dp-card p{margin:0}
@media(max-width:760px){.dp-principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.dp-principles{grid-template-columns:1fr}}

/* R22 · 03 · principles icons — no background tile, gold stroke to match the ✦ */
.dp-ic{background:none;width:auto;height:auto}
.dp-ic svg{width:26px;height:26px;stroke:var(--gold-deep)}

/* R23 · 03 · stack the icon directly under the number, left-aligned */
.dp-card .dp-top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px}

/* R24 · 03 · remove principle-card icons */
.dp-ic{display:none}

/* R25 · 03 · bottom row (cards 4 & 5) stretch to span the full 3-card width */
@media(min-width:761px){
  .dp-principles{grid-template-columns:repeat(6,1fr)}
  .dp-card{grid-column:span 2}
  .dp-card:nth-child(4),.dp-card:nth-child(5){grid-column:span 3}
}

/* R26 · 03 · a touch more bottom padding on cards 4 & 5 */
.dp-card:nth-child(4),.dp-card:nth-child(5){padding-bottom:34px}

/* R27 · 03 · enlarge "Ms. Jones' Real-World Story" ~2pt; keep the sub-line size */
#strategic-context .sp-qcard--brown cite{font-size:1.02rem}
#strategic-context .sp-qcard--brown cite .role{font-size:.85rem}

/* R28 · 03 · Jones card: extend to right margin, more portrait↔text gap, rebalanced padding */
#strategic-context .sp-qcard--brown{
  max-width:none;
  gap:clamp(28px,3.6vw,42px);
  padding:clamp(28px,3.2vw,38px) clamp(36px,4.5vw,52px);
}

/* R29 · 03 · Jones card: title above the quote, source line below */
#strategic-context .sp-qcard--brown .q-title{font-family:var(--f-mono);font-weight:700;font-size:1.02rem;
  letter-spacing:.03em;color:var(--jones-brown);margin:0 0 14px}
#strategic-context .sp-qcard--brown blockquote{margin-top:0}
#strategic-context .sp-qcard--brown cite{display:block;margin-top:16px;font-style:italic;
  font-family:var(--f-mono);font-weight:400;font-size:.85rem;color:var(--jones-brown);letter-spacing:.02em}

/* R30 · 01 · Nicole Cross quote card extends to the right margin */
#the-problem .sp-qcard{max-width:none}

/* R31 · 03 · move Ms. Jones portrait down 15px (from -18px to -3px) */
#strategic-context .sp-qcard--brown .q-portrait{margin-top:-3px}

/* R32 · all Spark body copy spans the full left/right margin (consistent measure) */
#overview .cs-body,
#the-problem .cs-body,
#the-design-opportunity .cs-body,
#strategic-context .cs-body,
#the-design-framework .cs-body,
#before-and-after .cs-body,
#adaptive-ai-generator-concept .cs-body,
#final-impact .cs-body,
.sp-spectrum-copy{max-width:none}

/* R33 · 04 · more space before the switch bar and above "A · Hidden Data" */
.sp-switch{margin-top:36px}
#mode-a{margin-top:34px}

/* R34 · 04 · tighten space between mode mockups + short divider between each mode */
.sp-mode + .sp-mode{margin-top:6px}
.sp-mode + .sp-mode::before{content:"";display:block;width:56px;height:2px;border-radius:2px;
  background:var(--ink-line-2);margin:0 0 26px}
.sp-mode .embed{margin-top:8px}

/* R35 · restore the comfortable reading measure on body text (revert R32/R8/R7 full-width) */
#overview .cs-body,
#the-problem .cs-body,
#the-design-opportunity .cs-body,
#strategic-context .cs-body,
#the-design-framework .cs-body,
#before-and-after .cs-body,
#adaptive-ai-generator-concept .cs-body,
#final-impact .cs-body,
.sp-spectrum-copy{max-width:68ch}

/* R36 · headers share the body reading width so their right edges align (Spark page) */
:is(#overview,#what-shipped,#shipped-impact,#the-problem,#the-design-opportunity,#strategic-context,#design-exploration,#the-design-framework,#before-and-after,#adaptive-ai-generator-concept,#final-impact) :is(.cs-h,.dp-h,.cs-body,.sp-spectrum-copy){max-width:37rem}

/* R37 · cap offset body texts (friction cards, root-cause, persona) to the same reading right-edge */
#the-problem .card p{max-width:calc(37rem - 148px)}
#the-problem .rc-block .cs-body{max-width:calc(37rem - 148px)}
.sp-mode .pb-body p{max-width:calc(37rem - 130px)}

/* R38 · 04 · tighten inter-mode spacing further (pull up into iframe bottom whitespace) */
.sp-mode + .sp-mode{margin-top:-20px}
.sp-mode + .sp-mode::before{margin:0 0 12px}
.sp-mode .embed{margin-top:4px}
.sp-mode .persona-block{margin:8px 0 2px}

/* R39 · 04 · +15px space above persona illustration + name (8px → 23px) */
.sp-mode .persona-block{margin-top:23px}

/* R40 · 01 · root-cause question adopts the .cs-ask treatment: italic clay, 500, 1.24rem */
.rc-q{font-family:var(--f-body);font-style:italic;font-weight:500;font-size:1.24rem;color:var(--clay)}

/* R41 · 00 · more space between the video caption and the body text */
#overview .yt-fig{margin-bottom:26px}

/* R42 · 01 · intro body text and Nicole quote side by side */
.problem-intro{display:grid;grid-template-columns:44fr 56fr;gap:clamp(24px,3vw,40px);align-items:start;margin:0 0 6px}
.problem-intro .cs-body{margin:0;max-width:none}
.problem-intro .sp-qcard{margin:0}
.problem-intro .sp-qcard .q-portrait{flex-basis:100px;width:100px}
@media(max-width:860px){.problem-intro{grid-template-columns:1fr;gap:22px}}

/* R43 · 00 · zoom the hero 10% and let the rounded frame crop the unclean edges */
.cs-cover--zoom img{transform:scale(1.1)}

/* R44 · section labels use the darker gold (match hero eyebrow) for readability */
:is(#overview,#the-problem,#the-design-opportunity,#strategic-context,#the-design-framework,#before-and-after,#adaptive-ai-generator-concept,#final-impact) .cs-label{color:var(--gold-deep)}

/* R45 · GLOBAL · section labels use the darker gold (--gold-deep) for readability, matching the hero eyebrow */
.cs-label{color:var(--gold-deep)}

/* R46 · HOME intro refresh — flipping word (Poppins, regular grey prefix + medium suffix,
   0 tracking, more space above), lede matched to About body size, gold rule removed +
   left aligned (plain .lede paragraph), breakfast tagline removed, more space above CTA */
.phase-headline{letter-spacing:0;margin-top:clamp(30px,4vw,52px)}
.phase-headline .pre{font-weight:400}
.phase-headline .suf{font-weight:500}
.intro-lede{font-size:1.1rem;line-height:1.6;max-width:60ch}
.intro-lede strong{color:var(--ink);font-weight:700}
.intro-cta{margin-top:40px}

/* R47 · HOME intro nudged down another 30px overall */
.section.intro{margin-top:30px}

/* R48 · tighten gap between phase eyebrow and flipping word by ~10px */
.phase-headline{margin-top:clamp(20px,3.6vw,42px)}

/* R49 · phase eyebrow nudged down 10px */
.phase-eyebrow{margin-top:10px}

/* ============================================================
   TAKEOFF · page-specific rules merged from inline <style>
   (so takeoff.html can link this shared stylesheet)
   ============================================================ */
.metrics-impact.measuring .metric .core{transition:none}
.ax-media--flat img{border:0;box-shadow:none}
.dp-wide--lg{margin-inline:-5%}
.team-illus{margin:6px 0 0}
.team-illus img{width:100%;height:auto;display:block;border-radius:var(--r-md)}
.team-tag{text-align:center;margin:50px 0 0;line-height:1.5;color:var(--gold-deep)}
.team-tag-main{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.team-tag-sub{display:inline;font-family:var(--f-mono);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.team-tag-sub::before{content:"·";margin:0 .45em;opacity:.7}
.voices-sub{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink-muted);margin:0 0 22px}
.voice--plum{background:#ECE6F3}
.voice--plum p{color:#574178}
.voice--plum cite{color:#7A6398}
.cg-col--after{overflow:visible}
.cg-hotfig{position:relative;margin:0}
.cg-hotfig img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.cg-hotbox{display:none}
.cg-hotbox.is-active{opacity:1}
.cg-hotspot{position:absolute;z-index:3;display:flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;transform:translate(-50%,-50%)}
.cg-hbadge{width:26px;height:26px;border-radius:50%;background:#E2EFD6;color:#3E7C3C;border:1.5px solid rgba(62,124,60,.45);font-family:var(--f-mono);font-weight:700;font-size:.78rem;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:transform .15s ease,background .15s ease,color .15s ease}
.cg-hotspot:hover .cg-hbadge,.cg-hotspot.is-active .cg-hbadge{background:#3E7C3C;color:#fff;transform:scale(1.14)}
.cg-hotspot:focus-visible{outline:3px solid #3E7C3C;outline-offset:3px;border-radius:999px}
.cg-tags--hot .cg-tag{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease,background .15s ease,color .15s ease}
.cg-tags--hot .cg-tag.is-active{background:#3E7C3C;color:#fff;box-shadow:0 3px 10px rgba(62,124,60,.35);transform:translateY(-1px)}
/* ============================================================
   EVENT · page-specific rules merged from inline <style>
   ============================================================ */
/* flip cards */
.flip-cue{font-family:var(--f-body);font-style:italic;color:var(--clay);font-weight:500;margin:18px 0 4px}
.flip-cue .cue-arrow{display:inline-block;font-style:normal;animation:cueNudge 1.2s ease-in-out infinite}
@keyframes cueNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
@media(max-width:1000px){
.flip-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.flip-grid{grid-template-columns:1fr}
}
.flip-card{perspective:1200px;background:none;border:0;padding:0;text-align:left;min-height:252px;cursor:pointer;font:inherit;width:100%}
.flip-wide{grid-column:1 / -1;min-height:184px}
.flip-inner{position:relative;display:block;width:100%;min-height:inherit;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-md);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:var(--shadow-sm)}
.flip-front{background:var(--paper-card);border:1px solid var(--ink-line)}
.flip-back{background:var(--ink-surface);color:var(--paper);transform:rotateY(180deg)}
.flip-num{font-family:var(--f-mono);color:var(--gold-deep);font-weight:700;font-size:.8rem}
.flip-k{font-family:var(--f-mono);color:var(--gold-soft);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.flip-h{font-family:var(--f-display);font-weight:600;font-size:1.12rem;line-height:1.15}
.flip-front .flip-h{color:var(--ink)}
.flip-p{font-family:var(--f-body);font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
.flip-back .flip-p{color:#C9C7C0}
.flip-hint{margin-top:4px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.flip-back .flip-hint{color:var(--gold-soft)}
@media(prefers-reduced-motion:reduce){
.flip-inner{transition:none}
.flip-cue .cue-arrow{animation:none}
}
/* click-reveal challenge photos (one at a time,aligned to selected card) */
.challenge-photos{margin-top:22px;min-height:4px}
.cp-item{display:none;margin:0}
.cp-item.on{display:block;animation:cpFade .4s ease}
@keyframes cpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cp-item .sp-frame{width:100%}
.cp-item figcaption{margin-top:10px;font-family:var(--f-mono);font-size:.76rem;color:var(--ink-muted);line-height:1.5}
@media(min-width:761px){
.cp-item{width:48%}
.cp-item.pos-1{margin-left:34%}
.cp-item.pos-2{margin-left:52%}
}
/* research competitor block under first card */
.comp-under{margin-top:18px;max-width:100%}
@media(max-width:820px){
.comp-under{max-width:100%}
}
.comp-figs{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:768px){.comp-figs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1001px){.comp-figs{grid-template-columns:repeat(3,1fr)}}
.comp-figs .sp-frame{aspect-ratio:4/3}
.comp-figs .sp-frame img{width:100%;height:100%;object-fit:cover}
.comp-cap{margin-top:10px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-muted);line-height:1.5}
/* design-process: flat figures + text/image rows */
.dp-flat{margin-top:0;background:transparent;box-shadow:none;border:0;border-radius:0}
.dp-flat:hover{transform:none;box-shadow:none}
.dp-flat img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.step-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:12px 0 32px}
@media(max-width:760px){
.step-row{grid-template-columns:1fr;gap:16px}
}
.step-media-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dist-cap{margin-top:12px;font-family:var(--f-mono);font-size:.76rem;color:var(--ink-muted);line-height:1.5}
/* ownership table (blue header,ref live site) */
.own-wrap{margin:18px 0 30px;overflow-x:auto}
.own-table{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;background:var(--paper-card);border:1px solid var(--ink-line);border-radius:var(--r-md);overflow:hidden}
.own-table thead th{background:#B7CBF2;color:#22314F;font-family:var(--f-display);font-weight:600;font-size:.9rem;text-align:left;padding:15px 18px}
.own-table td{padding:15px 18px;border-top:1px solid var(--ink-line);color:var(--ink-soft);font-size:.92rem;line-height:1.5;vertical-align:top}
.own-table .own-name{font-family:var(--f-display);font-weight:700;color:var(--ink);white-space:nowrap}
/* section 04 solution hero video */
.sol-hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-bottom:14px}
@media(max-width:820px){
.sol-hero{grid-template-columns:1fr;gap:16px}
}
.sol-video{margin:0}
.sol-video figcaption{margin-top:12px;font-family:var(--f-mono);font-size:.76rem;color:var(--ink-muted);line-height:1.5}
/* ===== v4 additions ===== */
/* red action / callout */
.action-red{font-family:var(--f-body);font-style:italic;font-weight:600;color:var(--clay);margin:10px 0 6px}
.callout-q{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.3;color:var(--clay-deep);border-left:3px solid var(--clay);padding:2px 0 2px 18px;margin:18px 0}
/* solution hero video: pillarbox,top-aligned */
#the-solution .cs-label{margin-bottom:2px}
.sol-hero{align-items:start}
.sol-hero-text .cs-h{margin-top:0}
.sol-video .vidbox{aspect-ratio:16/9;background:#000;border-radius:18px;border:6px solid #fff;box-shadow:0 12px 32px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;display:flex;align-items:center;justify-content:center}
.sol-video .vidbox video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.sol-video figcaption{margin-bottom:26px}
.ba-cell .ba-cap{margin:0}
.ba-cell .ba-cap .n{font-family:var(--f-mono);font-weight:700;color:var(--gold-deep);font-size:.72rem;margin-right:.5em}
.ba-cell .ba-cap .t{font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--ink);display:block;margin:2px 0 4px}
.ba-cell .ba-cap p{font-size:.9rem;line-height:1.5;color:var(--ink-soft);margin:0}
/* swag grid: big left,two stacked right */
.swag-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin:24px 0 8px;align-items:stretch}
@media(max-width:760px){
.swag-grid{grid-template-columns:1fr}
}
.swag-grid figure{margin:0}
.swag-left .sp-frame,.swag-left .sp-frame img{height:100%}
.swag-left .sp-frame img{width:100%;object-fit:cover}
.swag-right{display:grid;grid-template-rows:1fr 1fr;gap:16px}
/* impact table: gold header row */
#impact-and-metrics .cs-table thead th{background:var(--gold-wash);color:var(--ink);border-bottom:2px solid var(--gold)}
/* result: equal-height social + 2x2 youtube grid */
.social-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:620px;margin:22px 0 8px}
@media(max-width:560px){
.social-pair{grid-template-columns:1fr}
}
.social-pair .sp-frame{height:420px;background:var(--paper-deep)}
.social-pair .sp-frame img{width:100%;height:100%;object-fit:contain}
.yt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
@media(max-width:640px){
.yt-grid{grid-template-columns:1fr}
}
.yt-grid .yt-fig{margin:0}
/* reflection: image beside text,equal height */
.reflect-row{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:stretch;margin-top:8px}
@media(max-width:820px){
.reflect-row{grid-template-columns:1fr}
}
.reflect-row .sp-fig{margin:0}
.reflect-row .sp-frame{height:100%}
.reflect-row .sp-frame img{width:100%;height:100%;object-fit:cover}
/* ===== v5: white social letterbox + ownership table matches Impact (rounded top) ===== */
.social-pair .sp-frame{background:#fff}
.own-wrap{border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden}
.own-table{border:0;background:transparent;border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden}
.own-table thead th{background:var(--gold-wash);color:var(--ink);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--gold);padding:14px 16px}
.own-table td{padding:14px 16px;border-bottom:1px solid var(--ink-line)}
.own-table .own-name{font-family:var(--f-display);font-weight:700;color:var(--ink)}
/* ===== v5b: taller flip cards so flipped back content + hint never clip ===== */
.flip-card{min-height:352px}
@media(max-width:1000px){
.flip-card{min-height:352px}
}
@media(max-width:620px){
.flip-card{min-height:308px}
}
.flip-wide{min-height:200px}
.flip-face{justify-content:flex-start}
.flip-hint{margin-top:12px;padding-bottom:2px}
/* ===== v5c: swag grid equal heights,right images taller,no right captions ===== */
.swag-grid{align-items:start}
.swag-left .sp-frame{height:480px}
.swag-left .sp-frame img{width:100%;height:100%;object-fit:cover}
.swag-left figcaption{margin-top:10px}
.swag-right{height:480px;grid-template-rows:1fr 1fr}
.swag-right .sp-frame{height:100%}
.swag-right .sp-frame img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
.swag-left .sp-frame,.swag-right,.swag-right .sp-frame{height:auto}
.swag-right{grid-template-rows:auto auto}
.swag-left .sp-frame img,.swag-right .sp-frame img{height:auto}
}
/* ===== v6b: constraints as static note; reveal images sit under cards 1-3 ===== */
.challenge-photos{margin-top:20px}
.constraints-note{margin-top:28px;padding:20px 24px;background:var(--paper-card);border:1px solid var(--ink-line);border-left:3px solid var(--gold);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.constraints-note .cn-k{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 8px}
.constraints-note p:last-child{margin:0;color:var(--ink-soft);line-height:1.6}
/* ===== v6c: tighter design-process spacing + enlarged brief ===== */
.dp-h.spark-pre{margin-bottom:4px}
.step-row{align-items:start;margin:6px 0 30px}
.dp-flat figcaption{padding:10px 2px 0;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-muted);line-height:1.5}
/* ===== v6d: enlarge booth video (no side black) + green After tags/numbers ===== */
.sol-video .vidbox{aspect-ratio:auto;background:transparent;border:0;box-shadow:none;overflow:visible;display:flex;justify-content:center;align-items:flex-start}
.sol-video .vidbox video{width:auto;height:auto;max-width:100%;max-height:620px;object-fit:contain;border-radius:18px;border:6px solid #fff;background:#000;box-shadow:0 12px 32px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.06)}
/* ===== v6e: animated action arrow + rounded Impact table ===== */
.action-red .cue-arrow{display:inline-block;font-style:normal;animation:cueNudge 1.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
.action-red .cue-arrow{animation:none}
}
#impact-and-metrics .cs-table{border-collapse:separate;border-spacing:0;border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden}
/* R50 · hero text vertically centered (was top-aligned); eyebrow removed from slides */
.slide.active{align-items:center}


/* R51 · widen hero title measure slightly so Spark's longer first line stays on one line */
.hero-title{max-width:min(25ch,100%)}

/* R52 · hero CTA button — white outline, transparent bg, white text (slide-inner is now a div, not a full-slide link) */
.hero-cta{margin-top:22px}
.btn-hero{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn-hero:hover{background:#fff;color:var(--ink);border-color:#fff}

/* R46 · 05 · more space between each before/after image and its caption */
.ba-cell .ba-cap{margin-top:22px}

/* R53 · Home intro connecting mini-game embed (paired with the flipping word, right column) */
.intro-game{width:100%}
.embed-connect{margin-top:0;background:transparent;overflow:visible;border-radius:0}
.embed-connect iframe{height:540px}
@media (max-width:767px){.embed-connect iframe{height:480px}}

/* R54 · nudge the intro game left ~100px on desktop so it sits closer to the flipping word */
@media (min-width:1001px){ .intro-game{transform:translateX(-100px)} }

/* R47 · 04 · Design Exploration wireframe figures */
.wire-fig{margin:22px 0 8px}
.wire-frame{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.wire-frame svg{display:block;width:100%;height:auto}
.wire-fig figcaption{margin-top:12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.02em;color:var(--ink-muted);line-height:1.5}

/* R48 · 04 · persona user-flow (three teachers, three modes) */
.uflow{margin:24px 0 8px}
.uflow-start{max-width:540px;margin:0 auto;text-align:center;background:var(--gold-wash);border:1px solid var(--gold-soft);border-radius:var(--r-md);padding:14px 22px;position:relative}
.uflow-start .uflow-badge{display:inline-block;font-family:var(--f-mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.uflow-start p{margin:0;font-family:var(--f-display);font-weight:500;font-size:.98rem;color:var(--ink)}
.uflow-start::after{content:"";position:absolute;left:50%;bottom:-24px;width:2px;height:24px;background:var(--gold-soft)}
.uflow-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.uflow-lane{background:var(--paper-card);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:16px}
.uflow-persona{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.uf-ava{flex:0 0 auto;width:52px;height:52px;border-radius:12px;overflow:hidden;background:var(--paper-deep);display:block}
.uf-ava img{width:100%;height:100%;object-fit:cover;object-position:top;mix-blend-mode:multiply}
.uf-name{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--ink)}
.uf-mode{display:block;margin-top:2px;font-family:var(--f-mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.uf-arrow{display:block;width:2px;height:14px;background:var(--gold-soft);margin:8px auto 12px}
.uflow-lane .wire-mini{border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.uflow-lane .wire-mini svg{display:block;width:100%;height:auto}
.uf-out{margin:12px 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
@media(max-width:820px){.uflow-lanes{grid-template-columns:1fr;gap:16px}}

/* R49 · 04 · per-teacher swimlanes (Home -> Set up -> Generate -> Document) */
.swimlanes{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.lane{background:var(--paper-card);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.lane-persona{display:flex;align-items:center;gap:12px}
.lane-steps{display:flex;gap:24px;align-items:flex-start}
.lane-steps .step{flex:1 1 0;min-width:0;position:relative;margin:0}
.lane-steps .step svg{display:block;width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow-sm)}
.lane-steps .step figcaption{margin-top:8px;font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.03em;color:var(--ink-muted);text-align:center;text-transform:uppercase}
.lane-steps .step + .step::before{content:"";position:absolute;left:-16px;top:38%;width:8px;height:8px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:translateY(-50%) rotate(45deg)}
@media(max-width:820px){
  .lane-steps{overflow-x:auto;gap:28px;padding-bottom:6px}
  .lane-steps .step{flex:0 0 150px}
}

/* R50 · 04 · Anima-style branching flow (opener above the swimlanes) */
.anima-flow{margin:22px 0 10px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--ink-line);padding:12px 14px}
.anima-flow svg{display:block;width:100%;height:auto}
.anima-flow image{border-radius:10px}
.anima-flow figcaption{margin-top:8px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-muted);text-align:center;line-height:1.5}
@media(max-width:680px){.anima-flow{overflow-x:auto}.anima-flow svg{min-width:660px}}

/* R55 · top-align intro columns so the left eyebrow lines up with the game title */
@media (min-width:768px){ .intro .container{align-items:start} }

/* R56 · game moves below the intro word: single-column intro, fixed game size for a
   consistent scale on desktop + tablet, hidden on mobile (overrides the 2-col game layout) */
@media (min-width:768px){ .intro .container{grid-template-columns:1fr} }
.intro-game{max-width:480px;margin-top:28px;transform:none}
@media (max-width:767px){ .intro-game{display:none} }

/* R57 · desktop keeps the game on the right (2-col); tablet stays stacked below (R56) */
@media (min-width:1001px){ .intro .container{grid-template-columns:minmax(0,1fr) 520px} .intro-game{margin-top:0} }

/* R52 · 04 · embedded Teacher Dashboard flow (Claude Design bundle) */
.embed-sp-flow iframe{min-height:640px}
@media(max-width:1000px){.embed-sp-flow iframe{min-height:440px}}

/* ============================================================
   PORTFOLIO-REBUILD (rb-) · 03 Progress · timeline at a glance
   Vertical rail on mobile, horizontal spine from tablet up.
   ============================================================ */
.rb-tl{position:relative;margin:34px 0 8px;display:grid;gap:24px}
.rb-tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--ink-line-2)}
.rb-tl-item{position:relative;padding-left:30px}
.rb-tl-dot{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
/* R2 · timeline spark carries the same gold-wash halo as the dots (circular backing) */
.rb-tl-spark{position:absolute;left:-4px;top:-1px;width:20px;height:20px;padding:4px;background:var(--gold-wash);border-radius:50%;fill:var(--gold)}
.rb-tl-date{display:block;font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.rb-tl-name{display:block;font-size:.95rem;color:var(--ink-soft);margin-top:3px;max-width:34ch}
@media(min-width:768px){
  .rb-tl{grid-template-columns:repeat(5,1fr);gap:0;margin-top:40px}
  .rb-tl::before{left:6px;right:6px;top:5px;bottom:auto;width:auto;height:2px}
  .rb-tl-item{padding:26px 18px 0 0}
  .rb-tl-dot{left:0;top:0}
  .rb-tl-spark{left:-4px;top:-4px}
}

/* ============================================================
   SPARK STUDIO · R53 · 02 Impact · metrics grid spacing
   Make the space above and below the metric cards identical.
   ============================================================ */
/* Kill the trailing margin of the intro paragraph above the cards */
#shipped-impact .cs-body:has(+ .metrics) p:last-child{margin-bottom:0}
/* One explicit, symmetric rhythm: 32px above, 32px below */
#shipped-impact .metrics{margin-top:32px;margin-bottom:32px}
/* Kill the leading margin of the paragraph below the cards */
#shipped-impact .metrics + .cs-body p:first-child{margin-top:0}
/* Mobile: slightly tighter, still symmetric */
@media (max-width:767px){
#shipped-impact .metrics{margin-top:24px;margin-bottom:24px}
}

/* ============================================================
   SPARK STUDIO · R55 · Concept-fence brain break kicker
   Adds a mono eyebrow above the brain-break statement so the
   "From here on · Concept" fence reuses Takeoff's reading-break
   component instead of the old blue callout.
   ============================================================ */
.brain-break .bb-k{order:0;margin:0 0 clamp(14px,2vw,20px);font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.brain-break.in .bb-k{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.brain-break .bb-k{opacity:1;transform:none;transition:none}}

/* ============================================================
   SPARK STUDIO · R56 · 06 flow embed · enlarge ~10%
   The interactive fills its column and is scaled to fit width,
   so to make the whole thing ~10% bigger we widen its container
   ~10% on desktop (centered bleed, mirrors the brain-break
   full-bleed pattern). fit() inside the iframe then scales the
   artboard up to the wider frame; height auto-grows. No clipping.
   Tablet/mobile unchanged (already full width).
   ============================================================ */
@media(min-width:1001px){
  .embed-sp-flow{width:calc(100% + 118px);margin-inline:-59px}
}

/* R3 · site-wide footer signature: Built by Ting (spark) Claude */
.built-by{display:block;margin-top:6px;font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.built-by .bb-spark{width:10px;height:10px;fill:var(--gold);vertical-align:-1px;margin:0 2px}

/* R58 · flipping section polish — golden eyebrow above the word + game framed in a soft card */
.phase-eyebrow{color:var(--gold-deep)}
.embed-connect{background:var(--paper-card);border:1px solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 22px;overflow:hidden}

/* R59 · flipping section — soft outer panel, phase-word mini row, roomier game card */
.intro .container{background:var(--paper-deep);border-radius:var(--r-lg);padding:clamp(28px,3.5vw,52px)}
.intro-game{max-width:520px}

/* R60 · keep the intro panel inset from the screen edges */
.section.intro{padding-inline:var(--pad)}

/* R4 · badge-overlay on light covers: white was invisible on paper-toned art
   R5 · clay read as an error state, switched to the gold family (brand, not warning) */
/* R7 · badge outline-only, the wash fill competed with the cover art */
.work-card[href*="portfolio-rebuild"] .badge-overlay{color:var(--gold-deep);background:transparent;border-color:var(--gold-deep);white-space:nowrap}

/* R61 · nudge the flipping word up 15px */
.phase-headline{margin-top:calc(clamp(20px,3.6vw,42px) - 15px)}

/* R62 · move the eyebrow down 10px */
.phase-eyebrow{margin-top:20px}

/* ============================================================
   ABOUT · R63 · LinkedIn icon beside the page title
   Small rounded LinkedIn mark after "Hi, I'm Ting!", sized in
   em so it scales with the clamped headline. Ink at rest,
   gold on hover, standard lift + focus ring.
   ============================================================ */
.title-social{display:inline-flex;align-items:center;justify-content:center;width:.5em;height:.5em;margin-left:.22em;vertical-align:.08em;border-radius:18%;background:var(--ink);transition:background .2s ease,transform .2s ease}
.title-social svg{width:58%;height:58%;fill:var(--paper)}
.title-social:hover{background:var(--gold-deep);transform:translateY(-3px)}
.title-social:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.title-social{transition:none}.title-social:hover{transform:none}}

/* ============================================================
   ABOUT · R64 · title row + gold body rule + portrait
   Title becomes a flex row: text, spark, LinkedIn icon, and a
   circular portrait, all bottom-aligned per the reference.
   Body copy gets a gold left rule aligned to the title's left
   edge. The right-hand illustration is removed from the HTML.
   ============================================================ */
h1.about-title{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.18em}
h1.about-title .title-spark{width:.36em;height:.36em;margin:0 0 .12em}
h1.about-title .title-social{width:.46em;height:.46em;margin:0 .04em .12em}
h1.about-title .title-portrait{width:1.1em;height:1.1em;border-radius:50%;object-fit:cover;margin:0 0 .12em;flex:none}
.about-wrap .body{border-left:4px solid var(--gold);padding-left:clamp(24px,3.5vw,48px)}

/* ============================================================
   ABOUT · R66 · wider measure + more room above Say Hello
   Illustration is gone, so the text column can breathe: the
   grid cap goes from 36rem to 44rem and the body measure from
   60ch to 70ch. Extra space above the Say Hello button.
   ============================================================ */
.about-wrap .body{max-width:70ch}
@media (min-width:768px){
  .about-wrap{grid-template-columns:minmax(0,44rem) auto}
}

/* ============================================================
   ABOUT · R67 · CV badge + uniform title-row spacing
   CV link reuses the .title-social chip (same size, radius,
   ink fill, gold hover) with mono "CV" in paper. Horizontal
   margins removed so the flex gap alone spaces spark, LinkedIn,
   CV, and portrait evenly.
   ============================================================ */
h1.about-title .title-social{margin:0 0 .12em}
h1.about-title .title-cv span{font-family:var(--f-mono);font-weight:700;font-size:.17em;letter-spacing:.02em;line-height:1;color:var(--paper)}

/* R68 · keep "(That's the ✦.)" on one line */
.about-wrap .body .gold-note{white-space:nowrap}

/* ============================================================
   ABOUT · R69 · title row icons 10% larger, roomier spacing
   LinkedIn + CV chips .46em -> .5em, portrait 1.1em -> 1.21em,
   CV text scaled to match. Extra left margin on the chips and
   portrait widens the gaps between LinkedIn, CV, and portrait.
   ============================================================ */
h1.about-title .title-social{width:.5em;height:.5em;margin:0 0 .12em .12em}
h1.about-title .title-cv span{font-size:.19em}
h1.about-title .title-portrait{width:1.21em;height:1.21em;margin:0 0 .12em .12em}

/* R70 · portrait another 10% larger (1.21em -> 1.33em) */
h1.about-title .title-portrait{width:1.33em;height:1.33em}

/* R6 · (rb) headers and body share one reading measure across every section,
   matching Spark's R36; scoped to body.pg-rebuild so event's #design-process is untouched */
.pg-rebuild :is(#the-opportunity,#progress,#toolbox,#how-we-worked,#design-process,#time-to-play,#the-living-site,#impact) :is(.cs-h,.dp-h,.cs-body){max-width:37rem}

/* R63 · client-side password gate (soft gate; not real security) — WIP-gate card layout */
.gate{position:fixed;inset:0;z-index:1000;background:var(--paper);display:grid;place-items:center;padding:var(--pad)}
.gate[hidden]{display:none}
.gate-card{background:var(--paper-card);border:1px solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:40px 34px;max-width:400px;width:100%;text-align:center}
.gate-kicker{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.gate-brand{font-size:1.45rem;margin-bottom:6px}
.gate-title{font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:var(--ink);margin-top:12px;line-height:1.3}
.gate-sub{color:var(--ink-muted);font-size:.95rem;margin-top:10px}
.gate-form{display:grid;gap:12px;margin-top:22px}
.gate-input{font:inherit;padding:12px 14px;border:1px solid var(--ink-line-2);border-radius:var(--r-pill);text-align:center;background:var(--paper);color:var(--ink);letter-spacing:.2em}
.gate-input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.gate-err{color:var(--clay);font-size:.9rem;font-style:italic;margin-top:10px}
.gate-form .btn{justify-content:center}
body.gated{overflow:hidden}

/* R8 · (rb) placeholder note on draft illustrations, removed as final images land
   R9 · restyled as a centered gold-wash pill above the image (grey text blended into captions) */
.ph-note{display:table;margin:0 auto 14px;font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-wash);padding:6px 16px;border-radius:var(--r-pill)}