/* =====================================================================
   YOLANI OLIVAS: Portfolio
   Editorial / refined system. Warm paper, near-black ink, one clay accent.
   Display serif (Fraunces) + neutral grotesque (Inter).
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Tokens ---------- */
:root {
  /* color: black & white with warm, Skims-like neutrals */
  --paper:      #FFFFFF;   /* white */
  --paper-2:    #F4F2EF;   /* soft greige panel */
  --ink:        #121212;   /* near-black */
  --ink-soft:   #565552;   /* muted grey body */
  --ink-faint:  #8C8A85;   /* captions / labels */
  --line:       #E4E1DB;   /* hairline */
  --accent:     #121212;   /* monochrome accent */
  --accent-2:   #333333;
  --cta:        #733CA8;   /* purple, ties to the Karma Guarantee accents */
  --night:      #121212;   /* dark section bg */
  --night-ink:  #FFFFFF;   /* text on dark */
  --night-soft: #A9A7A2;

  /* type: editorial display serif + neutral grotesque for text/UI */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;  /* display */
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid scale */
  /* One deliberate type scale. Strictly increasing, each step a clear role:
     --1 small/eyebrow/caption · 0 body · 1 lede · 2 H3/pullquote/metric
     · 3 H2 section titles · 4 H1 page/case titles · 5 display (hero only) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.7vw, 2.0rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.35vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.95rem + 2.1vw, 3.7rem);
  --step-5:  clamp(2.9rem, 2.1rem + 3.4vw, 5.0rem);

  /* layout */
  --pad:   clamp(1.25rem, 5vw, 6rem);
  --maxw:  1320px;
  --radius: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
/* No CSS smooth-scroll: Lenis (JS) owns smooth scrolling. The two conflict. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}
.serif { font-family: var(--serif); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 560; line-height: 1.08; letter-spacing: -0.01em; font-optical-sizing: auto; }
h1 em, h2 em, .hero__statement em, .pullquote em { font-style: italic; font-weight: 500; }
p { max-width: 62ch; }

/* selection */
::selection { background: var(--accent); color: var(--paper); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.eyebrow {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  mix-blend-mode: normal;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: 0.8rem;
}
.nav__brand { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.02em; font-weight: 400; }
.nav__brand b { font-weight: 500; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); }
.nav__links a { font-size: var(--step--1); letter-spacing: 0.02em; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: currentColor; transition: width .35s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__cta {
  border: 1px solid var(--ink); border-radius: 999px; padding: .5rem 1.1rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover { background: var(--cta); color: #fff; border-color: var(--cta); }
.nav__cta::after { display: none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(9rem, 20vh, 15rem); padding-bottom: clamp(3rem, 8vw, 7rem); position: relative; }
.hero__loc {
  display: flex; align-items: center; gap: .6rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__loc .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.hero__statement {
  font-family: var(--serif); font-weight: 540;
  font-size: var(--step-5); line-height: 1.06; letter-spacing: -0.015em;
  max-width: 17ch; font-optical-sizing: auto;
}
.hero__statement em { font-style: italic; font-weight: 480; color: var(--ink); }
.hero__meta {
  display: flex; flex-direction: column; gap: clamp(1.3rem, 3vw, 1.7rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem); align-items: stretch;
}
/* paragraphs fill the text column so their right edge lines up with the headline */
.hero__meta p { max-width: none; color: var(--ink-soft); font-size: var(--step-0); }
.hero__meta .label { color: var(--ink-faint); }

/* ---------- Highlighter (reusable, stays legible) ----------
   A marker swipe sits behind the lower band of the text, so dark text
   over it reads normally. Used for editorial emphasis + link hovers. */
.mark {
  background-image: linear-gradient(transparent 56%, color-mix(in srgb, var(--cta) 26%, transparent) 56%);
  background-repeat: no-repeat; background-size: 100% 100%;
  padding-inline: 0.04em; border-radius: 2px;
}
/* animated "sweep in" version for hover states */
.hl-sweep { position: relative; background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--cta) 30%, transparent) 62%);
  background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .34s var(--ease); }
.hl-sweep:hover { background-size: 100% 100%; }

/* apply the marker sweep to content links on hover (legible: only a low band tints) */
.case__link, .footer__links a, .footer__big a {
  background-image: linear-gradient(transparent 64%, color-mix(in srgb, var(--cta) 30%, transparent) 64%);
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .34s var(--ease), color .3s var(--ease);
}
.case__link:hover, .footer__links a:hover, .footer__big a:hover { background-size: 100% 100%; }
.case:hover .case__link { background-size: 100% 100%; }

/* hero fills the first screen; content is vertically centered and the scroll cue is pinned bottom-center */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; position: relative;
  padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: clamp(4.5rem, 9vh, 7rem); }
.hero__statement { max-width: 24ch; }
/* scroll cue, centered at the bottom of the hero viewport, always visible on load */
.hero__scroll { position: absolute; left: 50%; bottom: clamp(1.6rem, 4vh, 2.8rem); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none; transition: color .3s var(--ease); }
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); animation: heroBob 1.7s var(--ease) infinite; }
.hero__scroll:hover .hero__scroll-arrow { border-color: var(--ink); }
.hero__scroll-arrow svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes heroBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-arrow { animation: none; } }

/* line-reveal animation primitive.
   IMPORTANT: content is visible by default. Lines are only hidden + animated
   when JS has run (html.js), so the hero can never render blank. */
/* each mask gets extra room below for serif descenders (g, y, p),
   compensated with a negative margin so line spacing stays identical */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.reveal-line > span { display: block; }
html.js .reveal-line > span { transform: translateY(125%); animation: lineUp .95s var(--ease) forwards; }
html.js .reveal-line:nth-of-type(1) > span { animation-delay: .08s; }
html.js .reveal-line:nth-of-type(2) > span { animation-delay: .17s; }
html.js .reveal-line:nth-of-type(3) > span { animation-delay: .26s; }
html.js .reveal-line:nth-of-type(4) > span { animation-delay: .35s; }
html.js .reveal-line:nth-of-type(5) > span { animation-delay: .44s; }
@keyframes lineUp { to { transform: translateY(0); } }

/* ---------- Editorial strapline (replaces the old marquee) ---------- */
.strap { border-block: 1px solid var(--line); padding-block: 1.15rem; }
.strap__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem;
  justify-content: space-between;
}
.strap__row .lead { font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--ink); }
.strap__row .list { font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Work list ---------- */
.work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem,5vw,3.5rem); flex-wrap: wrap; }
.work__head h2 { font-size: var(--step-3); }

.case {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3.4rem);
  position: relative;
}
.case:last-of-type { border-bottom: 1px solid var(--line); }
.case__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.case__index { font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .1em; }
.case__client { margin: .3rem 0 1.15rem; letter-spacing: .12em; }
.case__title { font-size: var(--step-3); line-height: 1.07; letter-spacing: -0.012em; max-width: 17ch; }
.case a.case__title:hover { color: var(--accent); }
.case__desc { color: var(--ink-soft); margin: 1.1rem 0 1.6rem; max-width: 46ch; }
.case__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.tag { font-size: var(--step--1); letter-spacing: .04em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; }
.case__metric { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin-bottom: 1.5rem; }
.case__metric .num { font-family: var(--serif); font-weight: 560; font-size: var(--step-2); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.case__metric .cap { font-size: var(--step--1); color: var(--ink-faint); max-width: 42ch; letter-spacing: .01em; line-height: 1.45; }
.case__link { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }
.case__link .arw { transition: transform .35s var(--ease); }
.case:hover .case__link .arw, .case__link:hover .arw { transform: translateX(6px); }

/* visual frame (right column) */
.frame {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; position: relative;
  background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.frame--tall { aspect-ratio: 5/4; }
.frame > img { width: 100%; height: 100%; object-fit: cover; }

/* device / window preview: real screen peeking up from the gray panel */
.frame--device, .frame--win { align-items: flex-start; }
.frame--device { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.frame--device .phone { width: min(64%, 240px); border-radius: 38px; padding: 9px; box-shadow: 0 22px 46px -26px rgba(23,21,15,.4); }
.frame--device .phone__screen { border-radius: 30px; }
.frame--win { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 0; }
.frame--win .win { width: 100%; max-width: none; box-shadow: 0 22px 46px -28px rgba(23,21,15,.34); }
.frame--win .win__scroll { max-height: none; overflow: hidden; }

/* homepage project cards: category pills that pop out of the mockup on hover (index only).
   On desktop the pills are the tags and the bottom chip row is hidden, so nothing doubles.
   On mobile the pills are hidden and the bottom chip row shows instead. */
.case__stage { position: relative; overflow: visible; }
.case--flip .case__stage { order: 1; }
.case__stage .frame { transition: transform .55s var(--ease), box-shadow .55s var(--ease); transform-origin: 50% 40%; }
.ftag {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  padding: .4rem .8rem; border-radius: 100px;
  box-shadow: 0 12px 26px -14px rgba(23,21,15,.5);
  transform: translate(0,0) scale(1) rotate(var(--rot, 0deg));
  transition: opacity .45s var(--ease), transform .6s cubic-bezier(.2,.7,.2,1);
}
.ftag--accent { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* resting positions scattered around the mockup, plus the point each pill emerges from (--fx/--fy toward the phone) */
.ftag--a { top: -12px; left: -16px; --rot: -7deg; --fx: 42px; --fy: 40px; }
.ftag--b { top: 40%; left: -34px; --rot: 5deg; --fx: 56px; --fy: 8px; }
.ftag--c { top: -18px; right: -6px; --rot: 6deg; --fx: -40px; --fy: 40px; }
.ftag--d { bottom: 26px; right: -30px; --rot: -5deg; --fx: -54px; --fy: -10px; }
.case--flip .ftag--a { left: auto; right: -16px; --fx: -42px; }
.case--flip .ftag--b { left: auto; right: -34px; --fx: -56px; }
.case--flip .ftag--c { right: auto; left: -6px; --fx: 40px; }
.case--flip .ftag--d { right: auto; left: -30px; --fx: 54px; }
/* bottom chip row is redundant with the pills on desktop, so hide it on the pill cards */
.case--stage .case__tags { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ftag { opacity: 0; transform: translate(var(--fx,0), var(--fy,0)) scale(.35) rotate(0deg); }
  .case__stage:hover .frame { transform: translateY(-20px) scale(1.03); box-shadow: 0 50px 80px -42px rgba(23,21,15,.55); }
  .case__stage:hover .ftag { opacity: 1; transform: translate(0,0) scale(1) rotate(var(--rot, 0deg)); }
  .case__stage:hover .ftag--a { transition-delay: .04s; }
  .case__stage:hover .ftag--b { transition-delay: .1s; }
  .case__stage:hover .ftag--c { transition-delay: .16s; }
  .case__stage:hover .ftag--d { transition-delay: .22s; }
}
@media (max-width: 900px) {
  .case__stage { order: -1; }
  .case--flip .case__stage { order: -1; }
  .ftag { display: none; }
  .case--stage .case__tags { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .case__stage:hover .frame { transform: none; }
  .ftag, .case__stage .frame { transition: none; }
}

/* ---------- Mock UI (used as tasteful visuals until real screens dropped in) ---------- */
.mock {
  width: min(78%, 320px); background: #fff; border-radius: 22px; padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(23,21,15,.35); border: 1px solid var(--line);
  transform: rotate(-2deg);
}
.mock--flat { transform: none; width: 88%; border-radius: 16px; }
.mock__bar { height: 8px; width: 46px; background: var(--line); border-radius: 99px; margin: 2px auto 12px; }
.mock__group { margin-bottom: 12px; }
.mock__label { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.mock__tile { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 7px; background: #fff; }
.mock__logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #c9c6c0, #e8e5df); flex: none; }
.mock__lines { flex: 1; }
.mock__lines i { display: block; height: 6px; border-radius: 99px; background: var(--paper-2); }
.mock__lines i.short { width: 40%; margin-top: 5px; background: var(--line); }
.mock__cta { height: 22px; border-radius: 99px; background: var(--ink); width: 64px; }
.mock__chip { display: inline-block; font-size: 9px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); margin-right: 5px; color: var(--ink-soft); }
.mock__chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Big metric band ---------- */
.metrics { background: var(--night); color: var(--night-ink); }
.metrics .eyebrow { color: var(--night-soft); }
.metrics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; }
.metrics__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .metrics__grid--2 { grid-template-columns: 1fr; } }
.metric__num { font-family: var(--serif); font-weight: 560; font-size: var(--step-4); line-height: 1; letter-spacing: -0.012em; }
.metric__num .u { color: var(--accent); }
.metric__label { color: var(--night-soft); margin-top: .8rem; font-size: var(--step--1); letter-spacing: .04em; max-width: 24ch; }

/* ---------- About teaser ---------- */
.about-teaser__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-teaser h2 { font-size: var(--step-3); max-width: 16ch; }
.about-teaser p { color: var(--ink-soft); margin-top: 1.4rem; }
.portrait { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--paper-2); border: 1px solid var(--line); }
.portrait img { width:100%; height:100%; object-fit: cover; }

/* ---------- Contact / footer ---------- */
.footer { background: var(--night); color: var(--night-ink); padding-block: clamp(4rem, 9vw, 8rem); }
.footer .eyebrow { color: var(--night-soft); }
.footer__big { font-family: var(--serif); font-weight: 540; font-size: var(--step-3); line-height: 1.1; margin: 1.5rem 0 2.5rem; letter-spacing: -0.012em; }
.footer__big a { border-bottom: 1px solid color-mix(in srgb, var(--night-ink) 40%, transparent); transition: color .3s var(--ease), border-color .3s; }
.footer__big a:hover { color: var(--cta); border-color: var(--cta); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; border-top: 1px solid rgba(244,241,234,.15); padding-top: 2rem; color: var(--night-soft); font-size: var(--step--1); }
.footer__links { display: flex; gap: 1.6rem; }
.footer__links a { position: relative; }
.footer__links a:hover { color: var(--night-ink); }

/* =====================================================================
   CASE STUDY PAGE
   ===================================================================== */
.cs-hero { padding-top: clamp(9rem, 20vh, 14rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.cs-hero__client { color: var(--accent); }
.cs-hero h1 { font-size: var(--step-4); max-width: 20ch; margin: 1rem 0 2rem; }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.cs-meta .k { font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.cs-meta .v { font-size: var(--step-0); color: var(--ink); line-height: 1.4; }

.cs-cover { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-block: clamp(2rem,5vw,4rem); position: relative; }

/* TL;DR big metrics row */
.cs-tldr { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,4vw,3rem); }
.cs-tldr .metric__num { color: var(--ink); font-size: var(--step-2); line-height: 1.06; text-wrap: balance; }
.cs-tldr .metric__num .u { white-space: nowrap; }
.cs-tldr .metric__num .u { color: var(--accent); }
.cs-tldr .metric__label { color: var(--ink-faint); }

/* content blocks */
.cs-block { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(1.5rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.cs-block__head h2 { font-size: var(--step-3); position: sticky; top: 6rem; }
.cs-block__head .eyebrow { display:block; margin-bottom: .8rem; }
.cs-block__body > * + * { margin-top: 1.2rem; }
.cs-block__body p { color: var(--ink-soft); max-width: 66ch; }
.cs-block__body h3 { font-family: var(--sans); font-weight: 600; font-size: var(--step-0); letter-spacing: 0; color: var(--ink); margin-top: 2rem; }
.cs-block__body ul.bullets { display: grid; gap: .9rem; margin-top: 1rem; }
.cs-block__body ul.bullets li { color: var(--ink-soft); padding-left: 1.4rem; position: relative; max-width: 64ch; }
.cs-block__body ul.bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--accent); border-radius: 2px; }
.pullquote { font-family: var(--serif); font-size: var(--step-2); line-height: 1.15; color: var(--ink); max-width: 20ch; }

.cs-figure { margin-block: clamp(2rem,5vw,3.5rem); }
.cs-figure__frame { border-radius: var(--radius); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center; gap: 4%; padding: 4%; }
.cs-figure figcaption { margin-top: 1rem; font-size: var(--step--1); color: var(--ink-faint); text-wrap: pretty; text-align: center; max-width: 62ch; margin-inline: auto; }

/* editorial caption for large process artifacts: serif label + short note,
   left-aligned under a hairline instead of centered academic text */
.cs-figure:has(.artifact) figcaption {
  display: grid; grid-template-columns: minmax(140px, max-content) 1fr;
  gap: .3rem clamp(1.25rem, 3vw, 2.5rem); align-items: baseline;
  text-align: left; max-width: none; margin: 0; margin-top: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.cs-figure:has(.artifact) figcaption b {
  font-family: var(--serif); font-style: italic; font-weight: 560;
  font-size: var(--step-0); color: var(--ink); line-height: 1.35;
}
.cs-figure:has(.artifact) figcaption span {
  color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55;
  max-width: 60ch; text-wrap: pretty;
}
@media (max-width: 640px) {
  .cs-figure:has(.artifact) figcaption { grid-template-columns: 1fr; gap: .25rem; }
}
/* centered caption under a device/window, balanced lines + clear space before the next section */
.device-cap { text-align: center; color: var(--ink-faint); font-size: var(--step--1); line-height: 1.5; max-width: 46ch; margin: 1.25rem auto clamp(2.75rem, 6vw, 4.5rem); text-wrap: balance; }
.cs-figure__frame.dark { background: var(--night); }

/* result callout */
.result { background: var(--night); color: var(--night-ink); border-radius: var(--radius); padding: clamp(2rem,5vw,3.5rem); }
.result .eyebrow { color: var(--night-soft); }
.result h2 { font-size: var(--step-3); margin: 1rem 0; max-width: 22ch; }
.result p { color: var(--night-soft); }

/* next project */
/* next-project: no divider line, generous breathing room (echoes the contact section) */
.next { border-top: none; padding-top: clamp(3.5rem, 8vw, 7rem) !important; }
.next a { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.next a > div { display: flex; flex-direction: column; gap: 1.15rem; }
.next h2 { font-size: var(--step-3); transition: color .3s var(--ease); }
.next a:hover h2 { color: var(--accent); }

/* placeholder note badge (for swappable image slots) */
.slot-note {
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); background: color-mix(in srgb, var(--paper) 80%, transparent);
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; backdrop-filter: blur(4px);
}
.cs-figure__frame.dark .slot-note, .cs-cover .slot-note { color: var(--night-soft); background: rgba(23,21,15,.5); border-color: rgba(244,241,234,.2); }

/* ---------- Coming soon slot (AI case) ---------- */
.soon { border: 1px dashed var(--line); border-radius: var(--radius); padding: clamp(1.8rem,4vw,3rem); background: linear-gradient(180deg, var(--paper-2), var(--paper)); position: relative; }
.soon__badge { display:inline-block; font-size: var(--step--1); letter-spacing:.1em; text-transform: uppercase; color: var(--accent); border:1px solid var(--accent); border-radius:99px; padding:.35rem .9rem; margin-bottom: 1.2rem; }
.soon h3 { font-size: var(--step-2); max-width: 20ch; }
.soon p { color: var(--ink-soft); margin-top: 1rem; max-width: 54ch; }

/* ---------- Reveal on scroll ----------
   Hidden states are gated behind html.js so content is always visible
   when JS is slow, blocked, or fails. JS also force-reveals anything
   already in the viewport shortly after load (belt and suspenders). */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .case__grid { grid-template-columns: 1fr; }
  .frame { order: -1; aspect-ratio: 16/10; }
  .metrics__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-teaser__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 340px; }
  .cs-meta { grid-template-columns: repeat(2, 1fr); }
  .cs-tldr { grid-template-columns: 1fr; gap: 1.6rem; }
  .cs-block { grid-template-columns: 1fr; gap: 1.2rem; }
  .cs-block__head h2 { position: static; }
  .nav__cta { display: none; }
}
@media (max-width: 560px) {
  .nav__links { gap: 1.1rem; }
  .nav__brand { font-size: 1rem; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .marquee__track span { font-size: var(--step-1); }
  .hero__meta { gap: 1.5rem; }
  .mock { width: 90%; transform: none; }
}

/* =====================================================================
   DEVICE FRAME + shipped "Sort and Filter" screen recreation
   ===================================================================== */
.device-stage {
  display: flex; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.75rem, 5vw, 3.5rem) 1rem;
}
.phone {
  --ck: #1f8f3d;
  width: min(330px, 84%); aspect-ratio: 9 / 19;
  background: #0c0c0c; border-radius: 46px; padding: 11px;
  box-shadow: 0 50px 90px -48px rgba(0,0,0,.55); position: relative;
}
.phone__screen { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 36px; overflow: hidden; }
.phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36%; height: 26px; background: #0c0c0c; border-radius: 0 0 16px 16px; z-index: 6; }
.phone__scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: var(--sans); color: #17150f; }
.phone__scroll::-webkit-scrollbar { width: 0; }

/* status bar */
.fs-status { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px 8px; font-size: 14px; font-weight: 600; background: #e9e7e3; }
.fs-sig { display: flex; align-items: flex-end; gap: 7px; }
.fs-bars { display: flex; align-items: flex-end; gap: 2px; }
.fs-bars i { width: 3px; background: #111; border-radius: 1px; }
.fs-bars i:nth-child(1){ height: 4px; } .fs-bars i:nth-child(2){ height: 6px; }
.fs-bars i:nth-child(3){ height: 9px; } .fs-bars i:nth-child(4){ height: 11px; }
.fs-batt { width: 24px; height: 12px; border: 1.4px solid #111; border-radius: 3px; position: relative; }
.fs-batt::before { content: ""; position: absolute; inset: 1.6px; width: 72%; background: #111; border-radius: 1px; }
.fs-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 6px; background: #111; border-radius: 0 1px 1px 0; }

/* dimmed underlying header */
.fs-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 22px; background: #e9e7e3; }
.fs-head .ttl { font-weight: 700; font-size: 16px; }
.fs-head .fs-ic { font-size: 18px; color: #17150f; }

/* white takeover sheet */
.fs-sheet { background: #fff; border-radius: 20px 20px 0 0; margin-top: -12px; padding: 22px 22px 30px; position: relative; }
.fs-close { position: absolute; top: 18px; right: 20px; font-size: 17px; color: #17150f; }
.fs-title { font-weight: 700; font-size: 23px; letter-spacing: -0.01em; margin: 4px 0 20px; }
.fs-sec { font-weight: 700; font-size: 15.5px; margin: 0 0 12px; }
.fs-hr { height: 1px; background: #eae8e4; margin: 18px 0; }
.fs-radio { display: flex; align-items: center; gap: 13px; padding: 8px 0; font-size: 15.5px; color: #2a2824; }
.fs-dot { width: 21px; height: 21px; border-radius: 50%; border: 2px solid #bcb9b3; flex: none; display: grid; place-items: center; }
.fs-radio.on .fs-dot { border-color: var(--ck); }
.fs-radio.on .fs-dot::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ck); }
.fs-sub { font-size: 13px; color: #6c6a66; margin: -4px 0 12px; }
.fs-input { border: 1px solid #d7d4ce; border-radius: 10px; padding: 13px 15px; font-size: 15.5px; display: flex; gap: 9px; }
.fs-input .cur { color: #8a8782; }
.fs-slider { position: relative; height: 4px; background: #dcd9d3; border-radius: 99px; margin: 22px 8px 12px; }
.fs-slider .fill { position: absolute; height: 100%; background: var(--ck); border-radius: 99px; }
.fs-knob { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--ck); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); transform: translate(-50%,-50%); }
.fs-minmax { display: flex; justify-content: space-between; font-size: 13px; color: #6c6a66; }
.fs-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.fs-pill { border: 1px solid #d3d0ca; border-radius: 99px; padding: 9px 16px; font-size: 14px; color: #2a2824; background: #fff; }
.fs-pill.on { border-color: var(--ck); background: #edf6ee; color: #17150f; }
.fs-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 15px; }
.fs-row .lab { font-weight: 700; }
.fs-row .val { color: #3a3833; }
.fs-row .fs-chev { color: #3a3833; flex: none; }

/* =====================================================================
   MULTIFEED (Dynamic Grouped Marketplace) screen recreation
   ===================================================================== */
.mf { padding: 16px 15px 22px; font-family: var(--sans); color: #17150f; }
.mf-h1 { font-weight: 700; font-size: 20px; margin: 6px 0 12px; }
.mf-amt { font-size: 13px; color: #3a3833; margin-bottom: 4px; }
.mf-amt b { color: #17150f; }
.mf-1knob { position: relative; height: 4px; background: #dcd9d3; border-radius: 99px; margin: 16px 6px 8px; }
.mf-1knob .fill { position: absolute; left: 0; height: 100%; background: #1f8f3d; border-radius: 99px; }
.mf-1knob .k { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #1f8f3d; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); transform: translate(-50%,-50%); }
.mf-minmax { display: flex; justify-content: space-between; font-size: 12.5px; color: #6c6a66; }
.mf-label { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.mf-select { border: 1px solid #d7d4ce; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; }
.mf-sectitle { font-weight: 700; font-size: 17px; margin: 20px 0 4px; }
.mf-secsub { font-size: 12.5px; color: #6c6a66; margin-bottom: 10px; }
.mf-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #3a3833; margin: 4px 0; }
.mf-note .ic { color: #1f8f3d; }
.mf-link { color: #6a2fb5; font-weight: 600; font-size: 12.5px; margin: 6px 0 12px; display: inline-block; }
.mf-chips { display: flex; gap: 8px; margin: 10px 0; }
.mf-chip { border: 1px solid #d3d0ca; border-radius: 99px; padding: 7px 13px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.mf-sort { font-size: 12.5px; color: #3a3833; margin-bottom: 12px; }
.mf-sort b { color: #1f8f3d; }
.mf-card { border: 1px solid #e6e3de; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.mf-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.mf-brand { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.mf-stars { font-size: 11px; color: #f2a51c; text-align: right; }
.mf-stars small { color: #8a8782; margin-left: 4px; }
.mf-cols { display: flex; gap: 8px; margin-bottom: 12px; }
.mf-col { flex: 1; }
.mf-col .k { font-size: 10px; color: #8a8782; display: block; margin-bottom: 2px; }
.mf-col .v { font-weight: 700; font-size: 15px; }
.mf-r { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: #55534f; }
.mf-r b { color: #17150f; font-weight: 600; }
.mf-badge { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 9px 0 2px; color: #17150f; }
.mf-badge .ic { flex: none; }
.mf-badge .ic.g { color: #1f8f3d; }
.mf-badge .ic.y { color: #e0a500; }
.mf-badge .ic.r { color: #d64545; }
.mf-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.mf-see { color: #6a2fb5; font-weight: 700; font-size: 13.5px; }
.mf-take { background: #1f8f3d; color: #fff; border-radius: 10px; padding: 11px 20px; font-weight: 700; font-size: 14px; }
.mf-unlock { border: 1px solid #e6e3de; border-radius: 14px; padding: 16px; margin-top: 6px; }
.mf-unlock h4 { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.mf-unlock p { font-size: 12.5px; color: #3a3833; margin-bottom: 12px; }
.mf-outline { border: 1.5px solid #1f8f3d; color: #1f8f3d; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 13.5px; text-align: center; }
.mf-legal { font-size: 9px; color: #a09d97; line-height: 1.55; margin-top: 16px; }

/* real-screen galleries (before/after + explorations) */
.shots { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
@media (min-width: 620px) {
  .shots--2 { grid-template-columns: 1fr 1fr; }
  .shots--3 { grid-template-columns: repeat(3, 1fr); }
}
.shot { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.shot__img { aspect-ratio: 3 / 4; overflow: hidden; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.shot__cap { padding: .75rem .95rem; font-size: var(--step--1); color: var(--ink-faint); }
.shot__cap b { color: var(--ink); font-weight: 600; display: block; margin-bottom: .15rem; }
/* image inside a phone frame fills the screen (real screenshots carry their own status bar) */
.phone__scroll > img { width: 100%; display: block; }

/* before/after device comparison (shows full screen width inside a phone) */
.compare { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3.5vw, 2.75rem); }
.compare__cell { flex: 0 1 300px; max-width: 300px; }
.compare .phone { width: 100%; margin-inline: auto; }
.compare__cap { width: 100%; margin-top: 1rem; text-align: left; }
.compare__cap b { display: block; color: var(--ink); font-weight: 600; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; }
.compare__cap span { display: block; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
/* summary line under a before/after pair reads best centered */
.cs-figure:has(.compare) figcaption { text-align: center; max-width: 60ch; margin-inline: auto; }
.phone__screen > img { width: 100%; display: block; }

/* document / artifact window (for AI system screenshots) */
.win { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 34px 64px -40px rgba(23,21,15,.34); max-width: 780px; margin-inline: auto; }
.win__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.win__bar i { width: 11px; height: 11px; border-radius: 50%; background: #d3ccbb; display: block; }
.win__bar span { margin-left: 10px; font-size: var(--step--1); color: var(--ink-faint); }
.win__scroll { max-height: 540px; overflow-y: auto; }
.win__scroll img { width: 100%; display: block; }

/* sticky Apply footer for the interactive filter prototype */
.phone__scroll--cta { padding-bottom: 84px; }
.fs-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px 16px; background: #fff; border-top: 1px solid #eae8e4; box-shadow: 0 -8px 20px -14px rgba(0,0,0,.25); }
.fs-apply { width: 100%; background: #1f8f3d; color: #fff; border-radius: 12px; padding: 14px; font-weight: 700; font-size: 15px; font-family: var(--sans); cursor: pointer; transition: background .2s; }
.fs-apply:hover { background: #177a33; }
.fs-apply.applied { background: #146a2b; }

/* image-state clickable prototype (built from real exported frames) */
.proto__canvas { position: relative; width: 100%; }
.proto__canvas img { width: 100%; display: block; }
.hotspot { position: absolute; cursor: pointer; background: transparent; border: 0; padding: 0; border-radius: 6px; transition: background .15s; }
.hotspot:hover { background: rgba(31,143,61,.10); }
.hotspot:focus-visible { outline: 2px solid #1f8f3d; outline-offset: -2px; }
.proto__toast { position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 8px); background: #17150f; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 9px 16px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); white-space: nowrap; z-index: 6; }
.proto__toast.show { opacity: 1; transform: translate(-50%, 0); }

/* accordion-overlay prototype (independent sections over a dimmed marketplace) */
.p2 { position: relative; height: 100%; }
.p2__market { position: relative; height: 100%; overflow: hidden; }
.p2__market img { width: 100%; display: block; }
.hotspot--pulse { border-radius: 10px; box-shadow: 0 0 0 0 rgba(31,143,61,.5); animation: hotspotPulse 2.1s infinite; }
@keyframes hotspotPulse {
  0% { box-shadow: 0 0 0 0 rgba(31,143,61,.5); }
  70% { box-shadow: 0 0 0 12px rgba(31,143,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,143,61,0); }
}
.p2__overlay { position: absolute; inset: 0; display: none; }
.p2.is-open .p2__overlay { display: block; }
.p2__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); cursor: pointer; }
.p2__sheet { position: absolute; left: 0; right: 0; top: 7%; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -12px 34px rgba(0,0,0,.22); }
.p2__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.p2__title { font-family: var(--sans); font-weight: 700; font-size: 19px; color: #17150f; }
.p2__x { background: none; border: 0; font-size: 20px; line-height: 1; color: #17150f; cursor: pointer; }
.p2__scroll { flex: 1; overflow-y: auto; padding: 0 18px; }
.p2__footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 16px; border-top: 1px solid #eae8e4; background: #fff; }
.p2__reset { background: none; border: 0; color: #8a8782; font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; padding: 12px 4px; transition: color .2s; }
.p2.is-dirty .p2__reset { color: #1f8f3d; }
.p2__apply { background: #1f8f3d; color: #fff; border: 0; border-radius: 12px; padding: 14px 26px; font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; }
.p2__apply:hover { background: #177a33; }

.acc { border-bottom: 1px solid #eae8e4; }
.acc__h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 2px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 15px; color: #17150f; }
.acc__h b { font-weight: 700; }
.acc__chev { flex: none; color: #17150f; font-size: 12px; }
.acc.open > .acc__h { display: none; }
.acc__p { display: none; position: relative; padding-bottom: 6px; }
.acc.open > .acc__p { display: block; }
.acc__p img { width: 100%; display: block; }
.acc__collapse { position: absolute; top: 0; left: 0; right: 0; height: 54px; background: transparent; border: 0; cursor: pointer; }
.acc__collapse:hover { background: rgba(31,143,61,.06); }

/* live Figma prototype embed */
.figma-embed { max-width: 460px; margin-inline: auto; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper-2); aspect-ratio: 400 / 800; }
.figma-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* agentic system architecture diagram */
.arch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: 0 30px 60px -40px rgba(23,21,15,.28); }
.arch__layer { padding: clamp(1rem,3vw,1.4rem) clamp(1.1rem,3vw,1.6rem); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(150px, 0.5fr) 1fr; gap: clamp(1rem,3vw,2rem); align-items: start; }
.arch__label b { display: block; font-family: var(--sans); font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.arch__label span { font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
.arch__agents { display: flex; flex-wrap: wrap; gap: .5rem; align-content: start; }
.arch__agent { font-size: var(--step--1); border: 1px solid var(--line); border-radius: 99px; padding: .35rem .85rem; color: var(--ink-soft); background: var(--paper); }
.arch__brief { background: var(--night); color: var(--night-ink); padding: clamp(1.1rem,3vw,1.5rem) clamp(1.1rem,3vw,1.6rem); display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.arch__brief b { font-family: var(--sans); font-weight: 700; }
.arch__brief span { color: var(--night-soft); font-size: var(--step--1); }
@media (max-width: 600px) { .arch__layer { grid-template-columns: 1fr; gap: .7rem; } }

/* compact architecture mini for the homepage card */
.arch-mini { width: min(88%, 340px); background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 46px -28px rgba(23,21,15,.3); }
.arch-mini__row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 12px; color: #2a2824; }
.arch-mini__row b { font-weight: 700; flex: 1; }
.arch-mini__n { font-size: 10px; color: var(--ink-faint); }
.arch-mini__brief { background: var(--night); color: #fff; padding: 11px 13px; font-size: 12px; font-weight: 700; letter-spacing: .01em; }

/* light interactivity for device prototypes */
.fs-radio, .fs-pill, .fs-row, .fs-opt, .mf-chip { cursor: pointer; user-select: none; }
.fs-chev { transition: transform .25s var(--ease); display: inline-block; }
.fs-row.open .fs-chev { transform: rotate(180deg); }
.fs-panel { display: none; padding: 2px 2px 8px; }
.fs-row.open + .fs-panel { display: block; }
.fs-opt { display: flex; align-items: center; gap: 11px; font-size: 14.5px; padding: 7px 0; color: #2a2824; }
.fs-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #bcb9b3; flex: none; position: relative; }
.fs-opt.on .fs-check { background: #1f8f3d; border-color: #1f8f3d; }
.fs-opt.on .fs-check::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mf-chip.on { border-color: #1f8f3d; background: #edf6ee; color: #17150f; }
.fs-pill, .fs-radio { transition: background .15s, border-color .15s; }

/* on phones, let the hero headline flow and balance instead of forcing desktop line breaks */
@media (max-width: 600px) {
  .hero__statement { font-size: clamp(2.3rem, 8.5vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; max-width: none; }
  .hero__statement .reveal-line { display: inline; overflow: visible; }
  .hero__statement .reveal-line > span, html.js .hero__statement .reveal-line > span { display: inline; transform: none !important; animation: none; filter: none !important; }
}

/* =====================================================================
   EDITORIAL COMPONENTS (2026 redesign)
   ===================================================================== */

/* flipped case row: image left, text right, breaks the stamped rhythm */
.case--flip .case__grid { grid-template-columns: 1fr 1.05fr; }
.case--flip .case__text { order: 2; }
.case--flip .frame { order: 1; }
@media (max-width: 900px) {
  .case--flip .case__grid { grid-template-columns: 1fr; }
  .case--flip .case__text { order: 2; }
  .case--flip .frame { order: -1; }
}

/* compact "more work" cards */
.more { border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vw, 3rem); }
.more__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.more-card { border-top: 1px solid var(--ink); padding-top: 1.25rem; display: block; }
.more-card .eyebrow { display: block; margin-bottom: .7rem; }
.more-card h3 { font-size: var(--step-1); line-height: 1.15; max-width: 24ch; transition: color .3s var(--ease); }
.more-card:hover h3 { font-style: italic; }
.more-card p { color: var(--ink-soft); font-size: var(--step--1); margin-top: .8rem; max-width: 44ch; line-height: 1.55; }
.more-card .more-card__metric { font-family: var(--serif); font-style: italic; font-size: var(--step-0); margin-top: 1rem; color: var(--ink); }
.more-card .case__link { margin-top: 1.1rem; }
@media (max-width: 700px) { .more__grid { grid-template-columns: 1fr; } }

/* process artifacts: audits, wireframe architectures, exploration canvases */
.artifact { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.artifact img { width: 100%; display: block; }

/* the record: editorial ledger of verified numbers */
.ledger { border-top: 1px solid var(--ink); }
.ledger__row {
  display: grid; grid-template-columns: minmax(150px, .55fr) 1fr;
  gap: 1rem 2.5rem; align-items: baseline;
  padding-block: clamp(1.1rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.ledger__num { font-family: var(--serif); font-weight: 560; font-style: italic; font-size: var(--step-3); line-height: 1; letter-spacing: -0.01em; }
.ledger__what { color: var(--ink-soft); max-width: 56ch; }
@media (max-width: 640px) { .ledger__row { grid-template-columns: 1fr; gap: .35rem; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none; }
  .reveal-line > span { transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   HERO SKETCH: hand-drawn, self-drawing PLM preview (right column)
   ===================================================================== */
/* text then phone, sitting close together; spare space goes to the right margin */
.hero__inner {
  display: flex; align-items: center; gap: clamp(2.5rem, 5.5vw, 5.5rem); width: 100%;
}
.hero__col--text { flex: 0 1 auto; max-width: 640px; min-width: 0; }
.hero__col--art { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; }

.plm { width: clamp(266px, 29vw, 326px); user-select: none; }

/* desktop: pull the hero in a touch so the scroll cue clears the fold */
@media (min-width: 961px) {
  .hero { padding-top: clamp(6rem, 12vh, 8.5rem); padding-bottom: clamp(4rem, 8vh, 6rem); }
  .hero__statement { font-size: clamp(2.6rem, 1.9rem + 3vw, 4.4rem); }
}
.plm__stage { position: relative; }
.plm svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; }
.plm text { font-family: "Caveat", cursive; }
.plm .tap { cursor: pointer; }

/* self-drawing ink strokes: slower, so it reads like a live sketch */
.plm .ink { stroke-dasharray: 1; stroke-dashoffset: 1; }
.plm.draw .ink { animation: plmDraw .85s cubic-bezier(.6,0,.4,1) forwards; animation-delay: var(--d,0s); }
@keyframes plmDraw { to { stroke-dashoffset: 0; } }

/* handwritten labels fade + settle in after their strokes */
.plm .fade { opacity: 0; }
.plm.draw .fade { animation: plmFade .5s ease forwards; animation-delay: var(--d,0s); }
@keyframes plmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* purple "tappable" hint underlines draw in last */
.plm .hint { opacity: 0; }
.plm.draw .hint { animation: plmFade .5s ease forwards; animation-delay: var(--d,0s); }

/* quick fade when a control is tapped and offers recalc */
.plm .swap { transition: opacity .16s ease; }
.plm.swapping .swap { opacity: 0; }

.plm__cap { text-align: center; margin-top: .9rem; }
.plm__cap b { display: block; font-family: "Caveat", cursive; font-weight: 700; font-style: italic;
  font-size: 1.7rem; color: var(--ink); line-height: 1; }
.plm__cap span { font-family: var(--sans); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); }

/* fit on shorter desktop viewports so the hero never clips */
@media (min-width: 961px) and (max-height: 860px) {
  .plm { width: clamp(230px, 23vw, 284px); }
}

/* stack on tablet / mobile: text first, sketch below */
@media (max-width: 960px) {
  .hero { min-height: auto; padding-top: clamp(8rem, 18vh, 11rem); padding-bottom: clamp(3rem, 8vh, 5rem); }
  .hero__inner { flex-direction: column; align-items: stretch; gap: clamp(2rem, 7vw, 3.4rem); }
  .hero__col--text { max-width: none; }
  .hero__col--art { justify-content: center; margin-top: .25rem; }
  .plm { width: min(320px, 82vw); }
  .hero__scroll { display: none; }
}

/* keep the sketch fully drawn + on its default state without motion */
@media (prefers-reduced-motion: reduce) {
  .plm .ink { stroke-dashoffset: 0 !important; animation: none !important; }
  .plm .fade, .plm .hint { opacity: 1 !important; animation: none !important; }
}