/* ==========================================================================
   Components. Every value comes from tokens.css; no raw colors or sizes here.
   Naming: .component, .component--variant, .component__part. See DESIGN-SYSTEM.md.
   ========================================================================== */
@import url("tokens.css");
@import url("shell.css");

/* ---- Base ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-base);letter-spacing:var(--tracking-snug);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{color:var(--color-text-secondary);text-wrap:pretty}
h1,h2,h3,h4{line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);text-wrap:balance}
h1{font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-h2);letter-spacing:var(--tracking-display);margin-bottom:var(--space-6)}
h3{font-size:var(--text-title);margin-bottom:var(--space-3)}
h4,.h4{font-size:var(--text-h4);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3)}
.h1{font-size:var(--text-h1);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
b,strong{font-weight:var(--weight-semibold)}
section{padding:calc(var(--section-y) * .8) 0}   /* same rhythm as prisma.html */

/* ---- Layout ----------------------------------------------------------- */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,112px);align-items:center}
.split-divided{display:grid;grid-template-columns:1fr var(--border-width) 1fr;gap:clamp(32px,5vw,72px)}
.divider{background:var(--color-border)}
.page-top{padding-top:calc(var(--nav-h) + var(--space-20))}

/* ---- Text ------------------------------------------------------------- */
.lead{font-size:var(--text-lead);line-height:1.5;letter-spacing:var(--tracking-snug);max-width:var(--measure)}
.text-muted{color:var(--color-text-muted)}
.text-accent{color:var(--color-accent-text)}
em.text-accent{font-style:normal}
.text-center{text-align:center;margin-left:auto;margin-right:auto}
.quote{font-size:var(--text-title);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);max-width:30ch;margin:0 auto;text-align:center;text-wrap:balance;color:var(--color-text)}
.quote--left{text-align:left;margin-left:0;max-width:34ch}
.list{padding-left:var(--space-5);display:grid;gap:var(--space-2)}
.list li{color:var(--color-text-secondary)}
.list li::marker{color:var(--color-text-subtle)}

/* Section header: eyebrow, title and intro aligned on one column */
.section-head{max-width:var(--container-text);margin-bottom:var(--space-12)}
.section-head.text-center{margin-left:auto;margin-right:auto}
.section-head h2{margin-bottom:var(--space-4)}

/* ---- Spacing utilities (token scale only) ----------------------------- */
.mb-1{margin-bottom:var(--space-1)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}
.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mb-10{margin-bottom:var(--space-10)}
.mt-8{margin-top:var(--space-8)}.mt-10{margin-top:var(--space-10)}.mt-12{margin-top:var(--space-12)}.mt-16{margin-top:var(--space-16)}
.gap-6{gap:var(--space-6)}
.items-center{align-items:center}
.justify-center{justify-content:center}
.w-full{width:100%}

/* ---- Card ------------------------------------------------------------- */
.card{background:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,36px);box-shadow:var(--shadow-card)}
.card h3{font-size:var(--text-h4);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug)}
.card p{color:var(--color-text-muted)}
.card--accent{background:var(--gradient-accent);border-color:var(--white-a13)}
.card--accent p,.card--accent li,.card--accent li::marker{color:var(--color-on-accent)}
.card--deep{background:var(--gradient-accent-deep);border-color:var(--color-border)}
.card--deep p{color:var(--color-text-secondary)}
.card--inverse{background:var(--color-surface-inverse);color:var(--color-text-inverse);border:0;box-shadow:none;padding:clamp(24px,4vw,56px)}
.card--inverse p{color:var(--color-text-inverse-secondary)}

/* ---- Project card: the image is the hero, text sits quietly below ----- */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16) var(--space-6)}
.project-card{display:flex;flex-direction:column;gap:var(--space-6);transition:transform var(--duration-press) var(--ease-out)}
.project-card:active{transform:scale(.98)}
.project-card__media{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);transform:translateZ(0)}
.project-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--duration-exit) var(--ease-out)}   /* back to rest: fast */
.project-card--wide{grid-column:1/-1}
.project-card--wide .project-card__media img{aspect-ratio:1200/630}
.project-card__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6)}
.project-card__title{font-size:var(--text-title);margin:0 0 var(--space-2);display:inline-flex;align-items:center;gap:var(--space-3)}
.project-card__title .btn__icon{color:var(--color-text-subtle);font-weight:var(--weight-regular);transition:transform var(--duration-base) var(--ease-out),color var(--duration-base)}
.project-card:hover .project-card__title .btn__icon{color:var(--color-accent-text)}
@media (hover:hover) and (pointer:fine){
  .project-card:hover .project-card__media img{transform:scale(1.035);transition-duration:var(--duration-media)}   /* zoom in: slow */
  .project-card:hover .project-card__title .btn__icon{transform:translateX(4px)}
}
.project-card__desc{color:var(--color-text-muted);max-width:46ch}
.project-card__tag{flex:none;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-muted);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);margin-top:var(--space-2);white-space:nowrap}

/* ---- Media ------------------------------------------------------------ */
.media{border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface)}
.shape-arch{border-radius:368px var(--space-4) var(--radius-md) 368px;aspect-ratio:1/1;object-fit:cover;width:100%}
.shape-leaf{border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 240px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);background:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-subtle);padding:var(--space-6)}
.scroll-x>img{max-width:none;width:100%;min-width:900px}
.diagram-dark>img{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.95);border-radius:var(--radius-sm)}   /* white diagrams adopt the dark theme, blues stay blue */
.embed{aspect-ratio:16/9;background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;border:var(--border-width) solid var(--color-border-subtle)}
.embed iframe{width:100%;height:100%;border:0}
.collage{columns:3 260px;column-gap:var(--space-4)}
.collage img{width:100%;margin-bottom:var(--space-4);border-radius:var(--radius-sm);break-inside:avoid}
/* Carousel: scroll-snap track + prev/next, one screen per step */
.carousel__track{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:var(--space-2) 0;border-radius:var(--radius-md)}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{flex:0 0 clamp(220px,22vw,280px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.carousel__slide img{width:100%;border-radius:var(--radius-md);border:var(--border-width) solid var(--color-border-subtle)}   /* original wireframe colors */
.carousel__slide figcaption{font-size:var(--text-sm);color:var(--color-text-muted)}
.carousel__controls{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);margin-top:var(--space-5)}
.carousel__count{margin:0;min-width:48px;text-align:center;font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.carousel__btn[disabled]{opacity:.35;cursor:default}
.concept-cards .card h3{font-size:var(--text-h4)}
.concept-cards .list li{font-size:var(--text-ui)}
.collage--strip{columns:4 200px}
.src{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-subtle)}
.pain{margin-top:var(--space-8);padding-top:var(--space-6);border-top:var(--border-width) solid var(--color-border)}
.pain__title{margin:0 0 var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-subtle)}
.pain__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-10)}
.pain__list li{position:relative;padding-left:var(--space-5);color:var(--color-text-secondary)}
.pain__list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;border-radius:2px;background:var(--color-accent-text)}
.fan{display:flex;justify-content:center;align-items:flex-end;padding:var(--space-5) 0 var(--space-10)}
.fan img{width:24%;max-width:260px;filter:drop-shadow(var(--shadow-float))}
.fan img:nth-child(1){transform:rotate(-8deg) translateY(30px);margin-right:-3%}
.fan img:nth-child(2){transform:rotate(-3deg);margin-right:-3%;z-index:1}
.fan img:nth-child(3){transform:rotate(3deg);margin-right:-3%;z-index:1}
.fan img:nth-child(4){transform:rotate(8deg) translateY(30px)}

/* ---- Heroes ----------------------------------------------------------- */
.hero,.case-hero{isolation:isolate;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero{min-height:min(100svh,1000px);padding-bottom:clamp(64px,12vh,128px)}
.case-hero{min-height:min(92svh,860px);padding-bottom:clamp(56px,10vh,112px)}
.hero video,.case-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after,.case-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient-hero-fade)}
.case-hero::after{background:var(--gradient-case-fade)}
.case-hero--blur>img{filter:blur(6px) brightness(.7);transform:scale(1.05)}
.hero__hi{font-size:var(--text-title);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.hero h1{max-width:13ch;margin-bottom:var(--space-8)}
.hero .lead{margin-bottom:var(--space-10);max-width:52ch}
.hero .icon-btn{position:absolute;right:var(--gutter);bottom:var(--space-6);z-index:var(--z-raised)}
.case-hero h1{margin-bottom:0}
.case-hero .lead{margin-top:var(--space-6);max-width:44ch}

/* Case hero without a photo: type over the accent glow (growth case) */
.case-hero--type{min-height:min(80svh,760px);background:var(--color-bg)}
.case-hero--type::after{background:var(--gradient-glow);inset:auto -20% -40% -20%;height:90%;filter:blur(40px);opacity:.8}
/* Draft marker: only while a case is being written */
.pending{margin:var(--space-4) 0 0;padding:var(--space-4) var(--space-5);border:var(--border-width) dashed var(--color-accent-text);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-accent-text)}

/* ---- Customer journey (HIA): read in seconds, details on demand -------- */
.journey-chart{margin:0;padding:var(--space-6) var(--space-6) var(--space-8);background:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-lg)}
.journey-chart__legend{display:flex;justify-content:space-between;margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--color-text-subtle)}
.journey-chart__legend span:first-child{color:var(--color-text-secondary);font-weight:var(--weight-medium)}
.journey-chart svg{display:block;width:100%;height:auto;overflow:visible}
.journey-chart__guide{stroke:var(--color-border);stroke-width:1;stroke-dasharray:4 6}
.journey-chart__line{fill:none;stroke:var(--color-accent-text);stroke-width:3;stroke-linecap:round}
.journey-chart__dot{fill:var(--color-accent);stroke:var(--color-surface-raised);stroke-width:4}
.journey-chart__num{fill:var(--color-on-accent);font-size:14px;font-weight:600;text-anchor:middle;font-family:var(--font-sans)}
/* One column per stage, aligned under its point on the curve */
.journey-strip{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-5)}
.journey-strip li{display:flex;flex-direction:column;gap:var(--space-2);padding:0 var(--space-2);text-align:center;align-items:center}
.journey-strip h3{margin:0;font-size:var(--text-ui);line-height:var(--leading-snug)}
.journey-strip p{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-muted)}
.journey-strip__num,.journey-strip .journey__mood{display:none}
.journey__mood{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.journey__meter{display:inline-flex;align-items:flex-end;gap:2px}
.journey__meter i{display:block;width:5px;border-radius:2px;background:var(--color-border-strong)}
.journey__meter i:nth-child(1){height:7px}.journey__meter i:nth-child(2){height:11px}.journey__meter i:nth-child(3){height:15px}
.journey__mood[data-mood="low"] i:nth-child(1),.journey__mood[data-mood="mixed"] i:nth-child(-n+2),.journey__mood[data-mood="high"] i{background:var(--color-accent-text)}
/* Full detail, collapsed by default */
.journey-details{margin-top:var(--space-4);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-lg)}
.journey-details summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 var(--space-6);cursor:pointer;list-style:none;font-weight:var(--weight-medium);color:var(--color-text-secondary);transition:color var(--duration-hover)}
.journey-details summary::-webkit-details-marker{display:none}
.journey-details summary:hover{color:var(--color-text)}
.journey-details__icon{font-size:22px;line-height:1;color:var(--color-accent-text);transition:transform var(--duration-exit) var(--ease-out)}
.journey-details[open] .journey-details__icon{transform:rotate(45deg)}
.journey-details summary:focus-visible{border-radius:var(--radius-lg)}
.journey{list-style:none;margin:0 var(--space-6) var(--space-2);border-top:var(--border-width) solid var(--color-border)}
.journey__stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:var(--space-5) var(--space-10);padding:var(--space-6) 0;border-bottom:var(--border-width) solid var(--color-border)}
.journey__stage:last-child{border-bottom:0}
.journey__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.journey__head h3{font-size:var(--text-h4);margin:0}
.journey__num{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-round);background:var(--color-accent);color:var(--color-on-accent);font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.journey__label{margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-subtle)}
.journey__stage ul{padding-left:1.1em;display:grid;gap:var(--space-2);font-size:var(--text-ui);line-height:1.5;color:var(--color-text-secondary)}
.journey__stage li::marker{color:var(--color-text-subtle)}
.journey__pain li::marker{color:var(--color-accent-text)}

/* ---- Information architecture (HIA): real text, sharp at any size ---- */
.ia{display:flex;flex-direction:column;gap:var(--space-5)}
.ia__label{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-subtle)}
.ia-node{display:inline-flex;align-items:center;min-height:36px;padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);border:var(--border-width) solid var(--color-accent-text);background:var(--color-surface-inverse);color:var(--color-text-inverse);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.25}
.ia-node--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.ia-node--home{box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 25%,transparent)}
.ia-flow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) 0;margin:0 0 var(--space-4);padding:0}
.ia-flow>li{display:flex;align-items:center;gap:var(--space-2)}
.ia-flow>li+li::before{content:"";width:28px;height:2px;margin-right:var(--space-2);background:var(--color-accent-text);-webkit-mask:linear-gradient(90deg,#000 70%,transparent 70%) 0 0/8px 2px;mask:linear-gradient(90deg,#000 70%,transparent 70%) 0 0/8px 2px}
.ia-flow__stack{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);position:relative}
.ia-flow__pair{display:flex;gap:var(--space-2)}
.ia-flow__note{position:absolute;top:100%;left:0;margin-top:var(--space-1);white-space:nowrap;font-size:var(--text-xs);color:var(--color-text-muted)}
.ia-flow{padding-bottom:var(--space-5)}
.ia-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-5);margin:0;padding:var(--space-5) 0 0;border-top:var(--border-width) solid var(--color-border)}
.ia-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.ia-list,.ia-sub{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:0;padding:0 0 0 var(--space-4);border-left:2px solid var(--color-accent-text)}
.ia-list>li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.ia-sub{margin-left:var(--space-3);border-left-style:dashed}
.ia-sub .ia-node{background:transparent;color:var(--color-text-secondary);font-weight:var(--weight-medium)}

/* ---- Stat ------------------------------------------------------------- */
.stat b{display:block;font-size:var(--text-h1);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;color:var(--color-accent);line-height:1;margin:var(--space-3) 0}
.stat small{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted)}
.card .stat b{color:var(--color-accent-text)}
.card--inverse .stat small{font-weight:var(--weight-semibold);color:var(--color-text-inverse)}
.stat--divided{border-top:var(--border-width) solid var(--color-border);padding-top:var(--space-5)}
.stat--divided b{color:var(--color-accent-text)}

/* ---- Persona ---------------------------------------------------------- */
.persona{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-subtle);box-shadow:var(--shadow-card)}
.persona__body{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column}
.persona__name{color:var(--color-text);font-size:var(--text-title);margin:0}
.persona__role{color:var(--color-text-muted);font-weight:var(--weight-medium);font-size:var(--text-sm);margin-top:var(--space-2)}
.persona__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.persona__heading{color:var(--color-text-subtle);font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);margin:var(--space-8) 0 var(--space-3)}
.persona__box{list-style:none;display:grid;gap:var(--space-3);background:var(--color-accent);color:var(--color-on-accent);border-radius:var(--radius-md);padding:var(--space-6);font-size:var(--text-sm);line-height:var(--leading-snug)}
.persona__box li{position:relative;padding-left:var(--space-4)}
.persona__box li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:var(--radius-round);background:currentColor;opacity:.7}
.persona__box--muted{background:transparent;border:var(--border-width) solid var(--color-border-strong);color:var(--color-text-secondary)}
.persona__tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.persona__tags li{border:var(--border-width) solid var(--color-border-strong);color:var(--color-text-secondary);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.persona__photo{width:100%;height:0;min-height:100%;object-fit:cover;object-position:50% 20%}

.persona__photo--cutout{height:auto;min-height:0;align-self:end;object-fit:contain;object-position:50% 100%;max-height:640px;margin:var(--space-8) auto 0;padding:0 var(--space-4);-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}

/* Device frame: a real screen in a drawn phone, sharp at any size */
.device-stage{position:relative;isolation:isolate;display:grid;place-items:center;padding:var(--space-8) 0}
.device-stage::before{content:"";position:absolute;inset:10% 5%;z-index:-1;border-radius:var(--radius-round);background:var(--gradient-glow);filter:blur(30px);opacity:.8}
.device{width:min(300px,70%);border:10px solid var(--neutral-200);border-radius:46px;overflow:hidden;background:var(--neutral-200);box-shadow:0 1px 0 var(--color-highlight) inset,var(--shadow-float)}
.device img{width:100%;border-radius:36px}

/* ---- Blueprint -------------------------------------------------------- */
.step{border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle)}
.step img{aspect-ratio:1/1;object-fit:cover;width:100%}
.step figcaption{color:var(--color-text-secondary);font-weight:var(--weight-medium);font-size:var(--text-sm);padding:var(--space-3) var(--space-4);text-align:center}
.lane{border-left:2px solid var(--color-accent-text);padding-left:var(--space-5)}
.lane h3{color:var(--color-text);font-size:var(--text-h4)}
.lane p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.7}

/* ---- About ------------------------------------------------------------ */
.band{background:var(--gradient-band)}
.about-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-8) clamp(40px,6vw,96px);align-items:start}
.about-intro .h1{max-width:13ch}
.about-intro__text{padding-top:var(--space-10)}   /* aligns the lead with the title, under the eyebrow */
.about-intro__text p{max-width:var(--measure)}
.timeline{list-style:none;border-top:var(--border-width) solid var(--color-border)}
.timeline li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-2) var(--space-8);align-items:baseline;padding:var(--space-8) 0;border-bottom:var(--border-width) solid var(--color-border)}
.timeline__role{font-size:var(--text-title);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);margin:0}
.timeline__org{color:var(--color-text-muted);margin:0}
.timeline__date{color:var(--color-text-subtle);font-size:var(--text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.timeline__date time{white-space:nowrap}
.timeline__desc{grid-column:1/-1;margin:var(--space-3) 0 0;max-width:var(--measure);color:var(--color-text-muted)}
.timeline__link{color:var(--color-accent-text);white-space:nowrap}
.timeline__link:hover{text-decoration:underline;text-underline-offset:3px}
.skills{display:grid;gap:var(--space-10)}
.skills__group{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-4) var(--space-8);align-items:start;padding-top:var(--space-8);border-top:var(--border-width) solid var(--color-border)}
.skills__title{font-size:var(--text-h4);margin:var(--space-2) 0 0}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none}
.chip{border:var(--border-width) solid var(--color-border);background:var(--color-surface-raised);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);font-size:var(--text-ui);font-weight:var(--weight-medium);color:var(--color-text-secondary)}

/* ---- Motion: content settles in once, never on repeat ----------------- */

/* ---- Product ownership: proof in numbers, how I work, one lesson -------- */
.ownership__stats{gap:var(--space-8);margin-bottom:var(--space-12)}
.ownership__stats .stat p{max-width:30ch;color:var(--color-text-muted)}
.ownership__story{margin-top:var(--space-4);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-2) var(--space-12);align-items:start;padding:clamp(28px,4vw,56px)}
.ownership__story .eyebrow{grid-column:1/-1;margin-bottom:var(--space-2)}
.ownership__story h3{font-size:var(--text-title);margin:0}
.ownership__story p:last-child{margin:0;font-size:var(--text-lead);line-height:1.5;color:var(--color-text-secondary)}

/* ---- Hero headline: words come into focus one by one (JS adds .words) -- */
.words .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.18em);animation:word-in 1.1s var(--ease-out) forwards;animation-delay:calc(var(--i) * 90ms + 120ms)}
.hero.is-splitting .lead,.hero.is-splitting .btns{opacity:0;animation:fade-up 700ms var(--ease-out) forwards;animation-delay:450ms}
.hero.is-splitting .btns{animation-delay:510ms}
.hero.is-splitting .hero__hi{opacity:0;animation:fade-in 600ms ease forwards}   /* part of the headline gesture: opacity only */
.words .w-tail{color:var(--color-text)}  /* punctuation keeps the heading color */
@keyframes word-in{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Process: a line that fills as you read down the four phases ------ */
.process__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,7vw,112px);align-items:start}
.process__head{position:sticky;top:calc(var(--nav-h) + var(--space-12));margin-bottom:0}
.process__steps{position:relative;list-style:none;display:grid;gap:var(--space-16);padding:var(--space-2) 0}
.process__steps::before,.process__fill{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;border-radius:var(--radius-pill);background:var(--color-border)}
.process__fill{background:linear-gradient(180deg,var(--color-accent-text),var(--color-accent));transform-origin:top;transform:scaleY(var(--progress,1))}
.process__step{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-6);align-items:start}
.process__num{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-round);background:var(--color-surface-raised);border:var(--border-width) solid var(--color-border);color:var(--color-text-muted);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;transition:background var(--duration-base),border-color var(--duration-base),color var(--duration-base)}
.process__step h3{font-size:var(--text-title);margin:var(--space-2) 0 var(--space-3);color:var(--color-text-muted);transition:color var(--duration-base)}
.process__step p{color:var(--color-text-muted);max-width:46ch}
.process__step.is-active .process__num{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.process__step.is-active h3{color:var(--color-text)}
.process__step.is-active p{color:var(--color-text-secondary)}

/* ---- Responsive (md 900, sm 600) -------------------------------------- */
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-divided,.persona{grid-template-columns:1fr}
  .persona__photo{order:-1;height:auto;min-height:0;aspect-ratio:4/3}
  .persona__photo--cutout{aspect-ratio:auto;max-height:380px;margin-top:var(--space-6)}
  .divider{display:none}
  .projects{grid-template-columns:1fr;gap:var(--space-12)}
  .timeline li{grid-template-columns:1fr auto}
  .timeline__org{grid-column:1}
  .timeline__date{grid-column:2;grid-row:1}
  .skills__group{grid-template-columns:1fr}
  .process__grid{grid-template-columns:1fr}
  .about-intro{grid-template-columns:1fr}
  .about-intro__text{padding-top:0}
  .process__head{position:static;margin-bottom:var(--space-4)}
  .ownership__story{grid-template-columns:1fr}
  .journey__stage{grid-template-columns:1fr}
  .journey-chart svg{display:none}   /* stages become a list with a feeling meter each */
  .journey-strip{grid-template-columns:1fr;gap:0;margin-top:0}
  .ia-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-strip li{display:grid;grid-template-columns:32px 1fr;column-gap:var(--space-3);row-gap:var(--space-1);text-align:left;align-items:center;padding:var(--space-4) 0;border-top:var(--border-width) solid var(--color-border)}
  .journey-strip li:first-child{border-top:0}
  .journey-strip__num{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-round);background:var(--color-accent);color:var(--color-on-accent);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
  .journey-strip .journey__mood,.journey-strip p{display:flex;grid-column:2}
  .journey-chart__legend span:last-child{display:none}
  .journey{margin:0 var(--space-4) var(--space-2)}
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4,.persona__grid{grid-template-columns:1fr}
  .collage{columns:2;column-gap:var(--space-3)}
  .collage img{margin-bottom:var(--space-3)}
  .fan img{width:30%}
  .fan img:nth-child(4){display:none}
  .pain__list{grid-template-columns:1fr}
  .ia-grid{grid-template-columns:1fr}
  .ia-flow{flex-direction:column;align-items:flex-start}
  .ia-flow>li+li::before{display:none}
  .ia-flow{padding-bottom:0}
  .ia-flow__note{position:static;white-space:normal}
  .carousel__slide{flex-basis:78%}
  .project-card__meta{flex-direction:column;gap:var(--space-3)}
  .project-card__tag{order:-1;margin-top:0}
  .timeline li{grid-template-columns:1fr;gap:var(--space-1)}
  .timeline__org,.timeline__date{grid-column:1;grid-row:auto}
  .timeline__date{order:-1}
  .hero h1{max-width:none}
  .case-hero::after{background:linear-gradient(180deg,var(--black-a60) 0%,var(--black-a60) 30%,var(--neutral-0) 62%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .project-card:active,.project-card:hover .project-card__media img,.project-card:hover .project-card__title .btn__icon{transform:none}
  .process__fill{transform:none}
}

/* Before / after comparison table (case studies) */
.compare{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.compare th,.compare td{text-align:left;padding:var(--space-4) var(--space-4) var(--space-4) 0;border-bottom:var(--border-width) solid var(--color-border);vertical-align:top}
.compare thead th{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-muted)}
.compare tbody th{font-weight:var(--weight-semibold);color:var(--color-text)}
.compare td{color:var(--color-text-secondary)}
.compare td:last-child{color:var(--color-accent-text);font-weight:var(--weight-semibold)}
@media (max-width:640px){.compare th,.compare td{padding-right:var(--space-3);font-size:var(--text-sm)}}

/* Case-study image framing: one ratio per row, one treatment per image type */
.frame{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover}
.plate{background:var(--color-surface-inverse);padding:clamp(16px,2.4vw,32px);object-fit:contain}   /* drawings, diagrams on white */
.stage{background:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-subtle);object-fit:contain}  /* transparent renders */
.stage--pad{padding:clamp(16px,2.4vw,32px)}

/* Paywall screens: bare screen captures inside one shared device frame */
.paywall-shot{display:grid;gap:var(--space-4);justify-items:center;align-content:start;margin:0}
.paywall-device{position:relative;width:min(272px,100%);padding:9px;border-radius:48px;background:#050506;
  box-shadow:0 0 0 2px #2a2b30,0 0 0 3.5px #8e9099,0 0 0 5px #3a3b42,0 0 0 6px #1a1a1e,0 40px 80px -30px rgb(0 0 0/.8),var(--shadow-float)}
/* side buttons: action + volume on the left, power on the right */
.paywall-device::before,.paywall-device::after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#55565e,#2a2b30)}
.paywall-device::before{left:-9px;top:19%;height:5%;box-shadow:0 calc(var(--h,560px)*.085) 0 #45464d,0 calc(var(--h,560px)*.165) 0 #45464d}
.paywall-device::after{right:-9px;top:27%;height:12%}
.paywall-device img{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:39px;background:var(--screen,#000)}
/* partial captures with no status bar: room at the top for the Dynamic Island */
.paywall-device--fit img{object-fit:contain;object-position:top;padding-top:13%;background:var(--screen)}
.paywall-device__island{position:absolute;top:calc(9px + 2.6%);left:50%;width:30%;height:4.2%;transform:translateX(-50%);border-radius:999px;background:#000}
.paywall-shot figcaption{font-size:var(--text-sm);color:var(--color-text-muted);text-align:center}
.paywall-compare{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,4vw,56px);max-width:680px;margin-inline:auto;padding-block:var(--space-6)}
.paywall-compare::before{content:"";position:absolute;inset:15% 10%;z-index:-1;border-radius:var(--radius-round);background:var(--gradient-glow);filter:blur(40px);opacity:.7}
.measure{max-width:var(--measure)}
.more-work{margin-top:var(--space-12);padding-top:var(--space-6);border-top:var(--border-width) solid var(--color-border-subtle);color:var(--color-text-muted)}
.more-work a{color:var(--color-text);font-weight:var(--weight-semibold);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--color-border-strong)}
.more-work a:hover{color:var(--color-accent-text)}
.ownership__link{margin-top:var(--space-8)}
picture{display:contents}  /* AVIF wrappers must not change the layout of the <img> they hold */
.about-intro__cv{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin-top:var(--space-8)}
.about-intro__cv-alt{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:underline;text-underline-offset:.2em;min-height:44px;display:inline-flex;align-items:center}
.about-intro__cv-alt:hover{color:var(--color-text)}