/* ============================================================
   DEPOPAS — homepage v2, the Collins pass (localhost draft, 2026-10-13)
   DEPOPAS-Design-System/DESIGN-SYSTEM.md is still the law: Bespoke Serif to say it, Inter to explain it, Helvena
   capitals to label it; no rounded corners, no shadows, no gradients, no icons; the only glyph is the arrow.
   Learned from wearecollins.com (never copied): the page itself changes colour as you scroll (the html background
   crossfades to a near-black field under the problem and back to white under the work); nothing has a border (cards
   are white on an off-white sheet, lists are plain lines, heads have no rule, no bullets); serif headlines sit at a
   calmer size and tracking; secondary text is a step greyer than the ink; the footer is a full-height field with the
   wordmark across the bottom, painted by the live site's palette clock, which also paints every Start button.
   ============================================================ */
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bespoke Serif";src:url("../fonts/BespokeSerif-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --night:#001014;            /* Kevin's near black (2026-10-13): the dark field, the ink, the wordmark */
  --ink:#001014;              /* text, buttons, the ink of the page */
  --body:#414C50;             /* paragraphs: a step greyer than the ink */
  --muted:#737D80;            /* captions and secondary labels */
  --fg:var(--ink);            /* the live text colour: flips to white while the page is dark */
  --page:#fff;--mount:#F4F5F2;--card:#fff;
  --mist:#E2F0E3;--marigold:#F7A400;
  --mist-70:rgba(226,240,227,.72);--mist-45:rgba(226,240,227,.45);--mist-12:rgba(226,240,227,.11);
  --hair:rgba(0,16,20,.1);
  --field:var(--mist);--ink-live:var(--ink);   /* the palette clock paints these two (home.js) */
  --pad:48px;--max:1280px;
  --serif:"Bespoke Serif",Georgia,serif;--text:"Inter",-apple-system,"Segoe UI",sans-serif;--label:"Helvena",-apple-system,"Helvetica Neue",sans-serif;
}
html[data-theme="dark"]{--page:var(--night);--fg:#fff;--body:rgba(255,255,255,.72);--muted:rgba(255,255,255,.5);--hair:rgba(255,255,255,.14)}   /* neutral white on the near black: the mist read as a cool blue-green here */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--page);color:var(--fg)}
html.is-smooth{scroll-behavior:smooth}   /* only after load: arriving at index.html#how must land there, not scroll there */
body{margin:0;background:transparent;color:inherit;font-family:var(--text);font-weight:450;-webkit-font-smoothing:antialiased;font-kerning:normal;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}ul,ol{list-style:none}a{color:inherit;text-decoration:none}img,video,iframe{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- type: the serif a size calmer, the sans a step greyer ---------- */
.label{font-family:var(--label);font-weight:600;font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{font-family:var(--label);font-weight:600;font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,5.6vw,80px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.5vw,52px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.1;letter-spacing:-.03em}
.lede{font-size:18px;line-height:1.45;letter-spacing:-.01em;color:var(--body);text-wrap:pretty}   /* one subtext size under every headline on the site; only the home hero line is larger (Kevin, 2026-10-14) */
.hero__sub{font-size:20px;line-height:1.4}
.body{font-size:16px;line-height:1.45;color:var(--body);text-wrap:pretty}
.small{font-size:13px;line-height:1.45;color:var(--muted)}

/* ---------- buttons: flat blocks with a caps label and the arrow; the live ones wear the palette clock ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px;background:var(--ink);color:#fff;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.btn:hover{opacity:.86}.btn .ar{font-family:var(--text);letter-spacing:0;font-size:14px;color:var(--marigold)}
.btn--live{background:var(--ink-live);color:var(--field);transition:opacity .2s}   /* the clock already fades the colors; a second transition would lag behind the art */
.btn--live .ar{color:inherit}
.btn--line{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor}.btn--line .ar{color:inherit}
.btn--paper{background:#fff;color:var(--night)}.btn--paper .ar{color:inherit}
.link{font-size:13px;font-weight:550;border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- nav: the wordmark at Collins' size, the page's own colour behind it ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--page);transition:transform .7s cubic-bezier(.16,.84,.24,1)}
.nav.is-away{transform:translateY(-100%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav__mark{display:block;color:inherit}
.nav__mark svg{display:block;height:17px;width:auto;overflow:visible;padding-right:1px}   /* the S was shaved by subpixel rounding at small sizes */
.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a.label:hover{opacity:.6}

/* ---------- hero: the ring of work behind the line ---------- */
.hero{position:relative;height:max(720px,84svh);overflow:hidden}
.ring{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 30%;pointer-events:none}
.ring__c{position:absolute;left:50%;top:57%;transform-style:preserve-3d}
.ring__card{position:absolute;left:0;top:0;width:var(--rc-w,300px);height:calc(var(--rc-w,300px) * 1.25);margin:calc(var(--rc-w,300px) * -.625) 0 0 calc(var(--rc-w,300px) * -.5);background:var(--mount);overflow:hidden;will-change:transform,opacity}
.ring__card img{width:100%;height:100%;object-fit:cover}
.ring--b{display:none}
.nw{white-space:nowrap}
.hero__text{position:absolute;left:0;right:0;top:60%;transform:translateY(-30%);text-align:center;z-index:2;padding:0 var(--pad)}
.hero__text .h1{max-width:18ch;margin:0 auto}
.hero__sub{max-width:540px;margin:26px auto 0}
.hero__cta{display:flex;gap:12px;justify-content:center;margin-top:30px}
.hero__note{margin-top:14px}

/* ---------- the problem: the page goes dark while it passes; nothing pins, the tags drift and get struck ---------- */
.problem{position:relative;padding:calc(8vh + 180px) var(--pad) 24vh;color:var(--fg)}   /* 80px lower so the hero is mostly gone when the page turns (Kevin, 2026-10-16) */
.problem__stage{position:relative;max-width:960px;height:min(62vh,580px);margin:0 auto;display:grid;place-items:center}
.problem__in{position:relative;text-align:center;max-width:720px;z-index:1}
.problem .h2{font-size:clamp(36px,4vw,60px);color:var(--fg)}   /* ink on white until the turn, never white on white */
.problem__sub{color:var(--body);max-width:480px;margin:22px auto 0}
.tag{position:absolute;display:inline-flex;align-items:center;height:46px;padding:0 18px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:color-mix(in srgb,var(--fg) 92%,transparent);font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;will-change:transform,opacity}
.tag i{position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:var(--marigold);transform-origin:0 50%;transform:scaleX(0)}
.tag b{font-weight:600}

/* ---------- section heads: eyebrow, a two-line headline, a short two-line lede; no rule ---------- */
.sec{padding:120px 0}
.head{max-width:760px}
.head .eyebrow{margin-bottom:20px}
.head .h2{max-width:15ch}
#how .head .h2{max-width:26ch}#pricing .head .h2{max-width:20ch}
.work .head{max-width:none}.work .head .h2{max-width:none;text-wrap:wrap}.work .head .lede{max-width:560px}   /* three lines, broken by hand (Kevin, 2026-10-14) */   /* the longer value line holds to two lines on a laptop */
.head .lede{margin-top:20px;max-width:460px;text-wrap:balance}

/* ---------- the work: a row of selects that glides one piece at a time ---------- */
.work{padding-bottom:100px}
.row{position:relative;height:540px;margin-top:56px;overflow:hidden}
.row{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.row.is-dragging{cursor:grabbing}   /* grab and throw it sideways; a vertical swipe still scrolls the page */
.row img{-webkit-user-drag:none;pointer-events:none}
.row__c{position:absolute;left:50%;top:0;height:100%}
.piece{position:absolute;top:50%;left:0;background:var(--mount);overflow:hidden;transform-origin:50% 50%;will-change:transform}
.piece img,.piece video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}   /* trims the hairline of white some exports carry at their edges */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin-top:48px}
.tab{position:relative;padding:18px 0 4px;text-align:left;display:flex;flex-direction:column;justify-content:flex-start}   /* a button centers its content; tabs of different lengths must share a top line */
.tab__t{display:block;font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--muted)}.tab.on .tab__t{color:var(--fg)}
.tab p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.45;max-width:260px}
.tab u{position:absolute;left:0;top:0;height:1.5px;width:0;background:currentColor;text-decoration:none}

/* ---------- how it works: copy left, a film on a mount right ---------- */
.steps{margin-top:24px}
.step{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(40px,6vw,120px);padding:56px 0}
.step__copy{position:sticky;top:120px;align-self:start}
.step__n{margin-bottom:18px}
.step__copy .body{margin-top:18px;max-width:340px}
.step__film{position:relative;background:var(--mount);aspect-ratio:1/1;overflow:hidden}
.step__film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- pricing: three plain cards (number up top, words at the bottom), add-ons as a quiet list, one button ---------- */
.pricing{background:var(--mount)}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:64px}   /* two offers on top, the ongoing partnership across both below (Kevin, 2026-10-15) */
.plan--wide{grid-column:1 / -1;display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}   /* price | what it is | how it works, one row (Kevin, 2026-10-15: the two-column list read oddly) */
.plan--wide .plan__lead{display:flex;flex-direction:column;padding-top:12px}.plan--wide .plan__lead .plan__go{margin-top:28px}
.plan--wide .price{min-height:0}.plan--wide .plan__body{padding-top:12px}.plan--wide .plan__body .plan__eb{margin-top:0}
.plan__list--two{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.plan{background:var(--card);padding:36px 32px 40px}
.price{display:flex;flex-direction:column;gap:10px}   /* the qualifier sits under the number; a fixed height keeps every card's title on one line across the row */
.price b{font-family:var(--serif);font-weight:400;font-size:clamp(56px,5vw,76px);line-height:1;letter-spacing:-.04em}
.price span{font-size:14px;color:var(--muted)}
.price__t{font-family:var(--serif);font-weight:400;font-size:clamp(32px,2.9vw,44px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin:0;text-wrap:balance}   /* the offer name is the headline now the prices are off (Kevin, 2026-10-16) */
.price__t+span{margin-top:-2px}
.plan__end .plan__what:first-child,.plan--wide .plan__lead .plan__what:first-child{margin-top:0}   /* the first line of copy sits level with the name's cap height */
.plan__eb{margin-top:28px}
.plan__list{list-style:none;margin:6px 0 0;padding:0}
.plan__list li{padding:11px 0;border-bottom:.5px solid var(--hair);font-size:15px;line-height:1.35;color:var(--ink)}
.plan__end{margin-top:36px}   /* between the 40 it was and the 70 that left the price floating (Kevin, 2026-10-16) */
.plan__t{font-family:var(--text);font-weight:500;font-size:16px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.plan__what{margin-top:10px;font-size:15px;line-height:1.45;color:var(--body);max-width:330px}
.plan__foot{margin-top:14px;font-size:13px;line-height:1.45;color:var(--muted)}
.plan__date{color:var(--ink)}   /* the live date reads in ink */
.small a{color:inherit;text-decoration:underline;text-underline-offset:2px}.small a.link{text-decoration:none}   /* .link draws its own line; one underline, not two (Kevin, 2026-10-16) */
.addons{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-top:88px;align-items:start}
.addons li{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:.5px solid var(--hair);font-size:15px;color:var(--ink)}
.addons li:first-child{padding-top:0}
.addons li span+span{color:var(--body)}
.pricing__go{display:flex;align-items:center;gap:28px;margin-top:72px;flex-wrap:wrap}

/* ---------- questions: answers open on a curve; the arrow turns ---------- */
.faq{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,8vw,140px)}
.faq__l .lede{margin-top:22px;max-width:420px}.faq__l .small{margin-top:28px}
.faq details{border-bottom:.5px solid var(--hair)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;font-size:16px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq__i{font-family:var(--text);font-weight:400;color:var(--muted);transition:transform .6s cubic-bezier(.16,.84,.24,1)}
.faq details.is-open .faq__i{transform:rotate(90deg)}
.faq__a{overflow:hidden;height:0;opacity:0;transition:height .6s cubic-bezier(.16,.84,.24,1),opacity .45s ease}
.faq details.is-open .faq__a{opacity:1}
.faq__a p{padding:0 40px 24px 0;font-size:15px;line-height:1.55;color:var(--body);max-width:620px}

/* ---------- footer: a full-height field on the palette clock, the ask up top, the wordmark across the bottom ---------- */
.foot{position:relative;min-height:100vh;color:var(--fg);display:grid;grid-template-rows:auto 1fr auto;padding-top:96px;overflow:hidden}
.foot > .wrap{width:100%}   /* grid items with auto margins shrink to fit; these must span */
.foot__top{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start}
.foot .h2{max-width:13ch}
.foot .lede{margin-top:22px;max-width:420px;color:inherit;opacity:.78}
.foot .btn{margin-top:32px}
.foot__links{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:12px}
.foot__links .label{opacity:.6;margin-bottom:16px}
.foot__links li{font-size:15px;line-height:1.75}
.foot__links a:hover{opacity:.7}
.foot__mark{align-self:end;padding:140px var(--pad) 0}
.foot__mark svg{display:block;width:100%;height:auto}
.foot__base{display:flex;justify-content:space-between;padding-top:22px;padding-bottom:26px}
.foot__base .label{opacity:.6}

/* ---------- entrances ---------- */
[data-in]{opacity:0;transform:translateY(24px)}
[data-in].is-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.16,.84,.24,1),transform 1.1s cubic-bezier(.16,.84,.24,1)}

@media (max-width:1100px){
  .plans{grid-template-columns:1fr}.plan--wide{grid-template-columns:1fr!important;gap:28px}.plan__list--two{grid-template-columns:1fr}.addons{grid-template-columns:1fr;gap:24px}
  .step{grid-template-columns:1fr}.step__copy{position:static}
  .faq{grid-template-columns:1fr}.foot__top{grid-template-columns:1fr}
  .tabs{grid-template-columns:1fr 1fr;gap:12px 40px;align-items:start}.tab p{max-width:none}
}
@media (max-width:700px){
  :root{--pad:20px}
  .nav__links a.label{display:none}.hero{height:760px}.hero__cta{flex-direction:column;align-items:center}
  .hero{height:auto;min-height:0;padding:0 0 64px}.ring{top:56px;height:236px;bottom:auto;perspective-origin:50% 50%}.ring__c{top:66%}.hero__text{position:relative;top:auto;transform:none;padding-top:300px}   /* phone: one ring, clear of the nav, white space around the line (Kevin, 2026-10-15) */
  .row{height:min(440px,52vh)}
  /* tabs: one column, each a title and a line, the running one lit */
  .tabs{grid-template-columns:1fr;gap:0;margin-top:40px}.tab{padding:22px 0 24px}.tab p{max-width:none;margin-top:8px}   /* phone: even rhythm, more air between items than inside one */
  /* the dark section: short padding so the line arrives with the dark; tags above and below the text, never on it */
  .problem{padding:calc(4vh + 80px) var(--pad) 12vh}.problem__stage{height:540px}.problem .h2{font-size:38px;color:var(--fg)}.problem__sub{color:var(--body)}   /* on a phone the line can arrive before the dark: ink on white, white once the page turns */
  .tag{height:32px;font-size:10px;padding:0 10px}
  .tag:nth-of-type(1){left:4%!important;top:12%!important}.tag:nth-of-type(2){right:4%!important;left:auto!important;top:22%!important}   /* closer to the line (Kevin, 2026-10-14) */
  .tag:nth-of-type(3){left:6%!important;top:78%!important}.tag:nth-of-type(4){right:3%!important;left:auto!important;top:86%!important}
  .tag:nth-of-type(5){left:50%!important;top:95%!important;bottom:auto!important;margin-left:-62px!important}
  .plan__end{margin-top:32px}.price{min-height:0}.plan{padding:32px 24px 36px}
  .foot__links{grid-template-columns:1fr 1fr;gap:24px}.foot__mark{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){[data-in]{opacity:1;transform:none}.tag{opacity:1}}

/* ============================================================
   About: the near-black page (Collins' Team page is the model): a question, one big 3:2 picture, an overview that
   fills in as you scroll, then the background, beliefs and writing. Same grammar: no borders, no bullets.
   ============================================================ */
.about-page .nav__links a[aria-current]{opacity:.55}
.ab-hero{padding:168px 0 40px}
.ab-hero .eyebrow{margin-bottom:22px}
.ab-art{margin-top:64px;aspect-ratio:3/2;background:var(--art-frame,var(--field))}
.ab-art canvas{display:block;width:100%;height:100%}
.ab-sec{padding:120px 0}
.ab-split{display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,6vw,100px);align-items:start}
.ab-split .eyebrow{padding-top:.6em}
.fill{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.7vw,40px);line-height:1.12;letter-spacing:-.025em;text-wrap:pretty}
.fill span{--p:0%;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(var(--fg),var(--fg)),linear-gradient(var(--fill-dim,rgba(255,255,255,.22)),var(--fill-dim,rgba(255,255,255,.22)));background-size:var(--p) 100%,100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
.ab-bg{color:var(--fg);opacity:.86;max-width:640px}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 28px;margin-top:88px}
.logos img{height:22px;width:auto;max-width:100%;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);opacity:.82}
.logos span{display:block;margin-top:14px;font-size:13px;line-height:1.4;color:var(--muted)}
/* the logos as a rail (about.js): inside the text column, looping, grab and throw; clipped at the column edges */
.logos.logos--rail{display:block;position:relative;height:92px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.logos--rail.is-dragging{cursor:grabbing}
.logos__i{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform}
.logos--rail img{display:block;height:22px;margin:6px 0 0;max-width:none}.logos--rail img[src$="unc.png"]{height:34px;margin:0 0 -6px}   /* UNC is a seal over small text, so it runs taller; every caption still lines up */
.logos__i img{-webkit-user-drag:none;pointer-events:none}
.beliefs{margin-top:72px;display:grid;gap:88px}
.belief{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,7vw,120px);align-items:start}
.belief .h3{max-width:19ch;text-wrap:balance}
.belief .body{font-size:17px;line-height:1.5}
.belief .body+.body{margin-top:16px}
.writing{margin-top:56px}
.writing--more{margin-top:0;height:0;overflow:hidden;opacity:0;transition:height .8s cubic-bezier(.16,.84,.24,1),opacity .5s ease}
.writing--more.is-open{opacity:1}
.writing a{display:grid;grid-template-columns:1fr 220px 24px;gap:24px;align-items:baseline;padding:26px 0;border-bottom:.5px solid var(--hair);transition:opacity .2s}
.writing a:hover{opacity:.65}
.writing b{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.03em}
.writing span{font-size:13px;color:var(--muted)}
.writing i{font-style:normal;color:var(--muted);text-align:right}
.writing__more{margin-top:32px;font-size:14px;transition:opacity .3s}
@media (max-width:1100px){.ab-split,.belief{grid-template-columns:1fr}.ab-split{gap:20px}.logos:not(.logos--rail){grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.ab-hero{padding:120px 0 20px}.ab-art{margin-top:40px}.ab-sec{padding:80px 0}.logos:not(.logos--rail){grid-template-columns:1fr 1fr}.writing a{grid-template-columns:1fr 20px}.writing span{grid-column:1;grid-row:2}.writing i{grid-row:1/3;grid-column:2}}

/* ---------- the close: once the footer's ask is on screen the whole page wears the palette clock's field (site.js) ---------- */
html[data-field="1"]{--page:var(--field);--fg:var(--ink-live);--body:color-mix(in srgb,var(--ink-live) 82%,transparent);--muted:color-mix(in srgb,var(--ink-live) 62%,transparent);--hair:color-mix(in srgb,var(--ink-live) 20%,transparent)}
/* ONE timing for every color on the page (Kevin, 2026-10-14: anything that changes color stays in step). Nothing
   carries its own color transition. The palette clock (site.js) fades the field, the ink, the buttons, the art and the
   text together, frame by frame. The only eased color change is the switch into or out of a color mode (the dark
   section, the footer's colors): site.js sets html.is-turning for that moment and everything eases on the same curve.
   The ease runs once, on the mode colors themselves (registered below so they can animate), and every element reads
   them as they move. Easing each element's own color instead made nested text lag: every level chased its parent
   for another 1.2 s, so the footer links (five levels deep) arrived last (Kevin, 2026-10-14). */
@property --page{syntax:"<color>";inherits:true;initial-value:#fff}
@property --fg{syntax:"<color>";inherits:true;initial-value:#001014}
@property --body{syntax:"<color>";inherits:true;initial-value:#414C50}
@property --muted{syntax:"<color>";inherits:true;initial-value:#737D80}
@property --hair{syntax:"<color>";inherits:true;initial-value:rgba(0,16,20,.1)}
html.is-turning{transition:--page 1.2s cubic-bezier(.45,0,.2,1),--fg 1.2s cubic-bezier(.45,0,.2,1),--body 1.2s cubic-bezier(.45,0,.2,1),--muted 1.2s cubic-bezier(.45,0,.2,1),--hair 1.2s cubic-bezier(.45,0,.2,1)!important}
html.is-turning *{transition:opacity .3s ease,transform .7s cubic-bezier(.16,.84,.24,1),height .6s cubic-bezier(.16,.84,.24,1)!important}
/* the buttons change color by mode rule, not by the mode colors, so they ease on their own, one level deep */
html.is-turning .btn{transition:color 1.2s cubic-bezier(.45,0,.2,1),background-color 1.2s cubic-bezier(.45,0,.2,1),box-shadow 1.2s cubic-bezier(.45,0,.2,1),opacity .3s ease!important}
html[data-field="1"] .btn--line{color:var(--ink-live)}
html[data-theme="dark"]:not([data-field="1"]) .btn--live{background:var(--live-lo);color:var(--live-hi)}

/* ============================================================
   The reader (writing/<slug>.html): a white page, the piece, and Close. No nav, no logo, no rules, no bullets.
   ============================================================ */
.read-page{background:#fff;color:var(--ink)}
.read-close{position:fixed;top:24px;right:24px;z-index:5;display:inline-flex;align-items:center;height:42px;padding:0 18px;background:var(--ink);color:#fff;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .2s}
.read-close:hover{opacity:.85}
.read{max-width:720px;margin:0 auto;padding:150px var(--pad) 180px}
.read .eyebrow{margin-bottom:24px}
.read__t{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,62px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.read__meta{margin-top:24px;font-size:13px;line-height:1.6;color:var(--muted)}
.read__meta a{border-bottom:1px solid currentColor}
.read__body{margin-top:72px;font-size:18px;line-height:1.65;color:var(--body)}
.read__body > * + *{margin-top:1.1em}
.read__body h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-top:2.2em}
.read__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,26px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin-top:1.9em}
.read__body strong{font-weight:600;color:var(--ink)}
.read__body a{color:var(--ink);border-bottom:1px solid var(--hair);transition:border-color .2s}.read__body a:hover{border-color:currentColor}
.read__body ul,.read__body ol{padding-left:1.4em}
.read__body li + li{margin-top:.5em}
.read__body ol{list-style:decimal}.read__body ol li::marker{color:var(--muted);font-size:.9em}
.read__body ul li{list-style:none}
.read__body blockquote{margin:2em 0;padding:0 0 0 1.4em;font-family:var(--serif);font-size:22px;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.read__body figure{margin:2.4em 0}.read__body img{width:100%;height:auto;background:var(--mount)}
.read__body figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
.read__body table{width:100%;border-collapse:collapse;font-size:15px}.read__body th,.read__body td{text-align:left;padding:12px 12px 12px 0;border-bottom:.5px solid var(--hair);vertical-align:top}.read__body th{font-weight:600;color:var(--ink)}
.read__body code{font-size:.9em;background:var(--mount);padding:.1em .35em}
@media (max-width:700px){.read{padding:110px var(--pad) 120px}.read__body{font-size:17px;margin-top:48px}.read-close{top:16px;right:16px}
  /* on a phone the text column runs under the locked Close: a band of page white fades the text out beneath it */
  .read-page::before{content:"";position:fixed;left:0;right:0;top:0;height:84px;background:linear-gradient(#fff 62%,rgba(255,255,255,0));z-index:4;pointer-events:none}}

/* ---------- moving between About and a piece: real pages with their own URLs, joined by a view transition after
   Collins' menu. Open: the piece drops from a thin strip at the top to the full screen while it settles from a hair
   smaller; About sinks back a touch. Close: the same, run backwards. Browsers without cross-document view
   transitions just change pages. ---------- */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.9s}
html:active-view-transition-type(open)::view-transition-old(root){animation:vt-sink .9s cubic-bezier(.5,.3,0,1) both}
html:active-view-transition-type(open)::view-transition-new(root){animation:vt-drop .9s cubic-bezier(.5,.3,0,1) both;transform-origin:50% 0}
html:active-view-transition-type(close)::view-transition-old(root){z-index:2;animation:vt-lift .7s cubic-bezier(.5,.3,0,1) both;transform-origin:50% 0}
html:active-view-transition-type(close)::view-transition-new(root){z-index:1;animation:vt-rise .7s cubic-bezier(.5,.3,0,1) both}
@keyframes vt-drop{from{clip-path:inset(0 max(var(--pad),calc((100vw - var(--max)) / 2)) 100%);transform:scale(.96)}to{clip-path:inset(0);transform:none}}
@keyframes vt-lift{from{clip-path:inset(0);transform:none}to{clip-path:inset(0 max(var(--pad),calc((100vw - var(--max)) / 2)) 100%);transform:scale(.96)}}
@keyframes vt-sink{from{transform:none;filter:none}to{transform:scale(.97);filter:brightness(.7)}}
@keyframes vt-rise{from{transform:scale(.97);filter:brightness(.7)}to{transform:none;filter:none}}
/* closing a case page (it opened as a sheet, studies/brands/sheet.css): the sheet drops back down, the page rises */
html:active-view-transition-type(unsheet)::view-transition-group(root){animation-duration:.7s}
html:active-view-transition-type(unsheet)::view-transition-image-pair(root){background:#001014}
html:active-view-transition-type(unsheet)::view-transition-old(root){z-index:2;animation:sheet-down .7s cubic-bezier(.5,.3,0,1) both}
html:active-view-transition-type(unsheet)::view-transition-new(root){z-index:1;animation:vt-rise .7s cubic-bezier(.5,.3,0,1) both}
@keyframes sheet-down{from{transform:none}to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- moving between the homepage and About (and any other page pair): the old page fades down to the near
   black, a short hold, then the new page fades up out of it, already at its anchor. No scrolling during it. ---------- */
html:active-view-transition-type(page)::view-transition-image-pair(root){background:#001014}
html:active-view-transition-type(page)::view-transition-group(root){animation-duration:1.25s}
html:active-view-transition-type(page)::view-transition-old(root){animation:vt-out .55s cubic-bezier(.55,0,.75,.2) both}
html:active-view-transition-type(page)::view-transition-new(root){animation:vt-in .75s cubic-bezier(.16,.84,.24,1) .5s both}
@keyframes vt-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}

/* ---------- pricing, the three doors (2026-10-14): a free teardown, the brand, the plan; each card carries its own button ---------- */
.plan{display:flex;flex-direction:column}
.plan__end{flex:1 0 auto}                     /* the copy takes the slack, so every card's button sits on the same line */
.plan__go{margin-top:32px;align-self:flex-start}

.step__try{margin-top:22px}

/* ---------- case sheet (site.js), measured from Collins: the page pushes back onto the near black while the sheet
   rises to 20px from the top. Opening runs on their fast-out curve; closing on ours. ---------- */
html.has-sheet{overflow:hidden;background:#001014}
html.has-sheet body{background:var(--page);transition:transform .6s cubic-bezier(.215,.61,.355,1),opacity .6s cubic-bezier(.215,.61,.355,1),filter .6s cubic-bezier(.215,.61,.355,1)}
html.sheet-open body{transform:translateY(10px) scale(.95);opacity:.4;filter:saturate(.4);transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .5s cubic-bezier(.215,.61,.355,1),filter .5s cubic-bezier(.215,.61,.355,1)}
.sheet{position:fixed;inset:0;z-index:100;pointer-events:none}
.sheet.is-open{pointer-events:auto}
.sheet__strip{position:absolute;left:0;right:0;top:0;height:20px;cursor:pointer}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;top:20px;background:#fff;overflow:hidden;transform:translateY(100vh);transition:transform .6s cubic-bezier(.5,0,.75,0)}
.sheet.is-open .sheet__panel{transform:none;transition:transform .9s cubic-bezier(.19,1,.22,1)}
.sheet__panel iframe{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .2s ease}
.sheet.is-loaded .sheet__panel iframe{opacity:1}
@media (prefers-reduced-motion:reduce){html.has-sheet body,.sheet__panel,.sheet__panel iframe{transition:none!important}}

/* the phone menu (site.js): hidden on wide screens; drops from the top like the writing pages, square, near black */
.nav__menu{display:none;background:none;border:0;padding:8px 0;color:inherit;cursor:pointer}
.menu{position:fixed;inset:0;z-index:60;background:#001014;color:#fff;display:flex;flex-direction:column;padding:0 var(--pad) 32px;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s cubic-bezier(.5,.3,0,1),visibility 0s .7s}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s cubic-bezier(.5,.3,0,1),visibility 0s}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:72px}
.menu__mark svg{display:block;height:17px;width:auto;color:#fff}.menu__mark use,.menu__mark path{fill:currentColor}
.menu__x{background:none;border:0;color:#fff;padding:10px 0;cursor:pointer;width:20px;height:22px;position:relative}
.menu__x i{position:absolute;left:0;top:50%;width:20px;height:2px;margin-top:-1px;background:currentColor;transform:rotate(45deg)}.menu__x i+i{transform:rotate(-45deg)}   /* an X drawn like the two-line menu icon */
.menu__links{display:flex;flex-direction:column;margin-top:auto}
.menu__a{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.15;letter-spacing:-.03em;color:#fff;padding:6px 0;
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.menu.is-open .menu__a{opacity:1;transform:none;transition:opacity .5s .35s,transform .7s .3s cubic-bezier(.16,.84,.24,1)}
.menu.is-open .menu__a:nth-child(2){transition-delay:.4s}.menu.is-open .menu__a:nth-child(3){transition-delay:.45s}.menu.is-open .menu__a:nth-child(4){transition-delay:.5s}
.menu__cta{margin-top:40px;align-self:flex-start}
html.menu-open{overflow:hidden}
.nav__menu i{display:block;width:20px;height:2px;background:currentColor}.nav__menu i+i{margin-top:6px}
@media (max-width:700px){
  .nav__menu{display:block;padding:10px 0}.nav__links{gap:20px}.nav__links>.btn{display:none}   /* phone nav after Collins: wordmark and two lines; the teardown button lives in the menu and on the page (Kevin, 2026-10-15) */
  .nav__in{height:56px}.nav__mark svg{height:15px}.menu__top{height:56px}
  .hero__cta{flex-direction:row;gap:8px}.hero__cta .btn{padding:0 13px;gap:8px;font-size:10.5px;letter-spacing:.12em}.wide{display:none}.hero__text .h1{font-size:42px;max-width:none}   /* the longer line, sized so the buttons stay on the first screen */   /* the two buttons side by side: "Free brand teardown" and "Book call" */
}   /* phone nav after Collins: wordmark and Menu only; the teardown button lives in the menu and on the page (Kevin, 2026-10-15) */

@media (max-width:700px){.hero__sub br{display:none}}   /* the hand break in the hero line is for desktop; phones wrap it naturally (Kevin, 2026-10-16) */
@media (max-width:1100px){.belief{gap:16px}}   /* stacked, the belief head sits right on its paragraph, as the homepage heads do (Kevin, 2026-10-16) */
@media (max-width:700px){.beliefs{gap:56px;margin-top:48px}}