@charset "utf-8";

/* =====================================================================
   BSK MEDIA — home.css (loaded after studio.css)
   ---------------------------------------------------------------------
     1  hero: track, stage, the cove
     2  the tablet and the site on its glass
     3  the screens: drafting paper, shop
     4  props: drafting tools, folders, cursor, lens, voxels, box,
        card, tags, dashboard cards
     5  the words: headline, captions, pills
     6  statement
     7  websites
     8  combo
     9  also under the same roof
    10  reduced motion
    11  small screens

   The hero is one pinned scene in six chapters — the site, plan, design,
   build, sell, grow — driven by scroll position in home.js. Everything
   in the scene is sized in cqw: a percentage of the tablet's width.
   ===================================================================== */


/* ------------------------------------------------------------- 1 hero */

/* Without JS or with reduced motion the track is one screen tall. home.js
   adds .is-motion to <html> and the track grows to give six chapters room. */
.hero__track { position: relative; height: 100vh; height: 100svh; }
.is-motion .hero__track { height: 1000vh; }

.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* the cove: lit in the middle, falling off to night at the corners, with a
   floor that catches a little of the lamp */
.cyc {
  position: absolute; inset: 0;
  background: radial-gradient(115% 85% at 50% 40%, var(--cyc) 0%, #111317 42%, var(--night) 78%);
}
.cyc__glow {
  position: absolute; left: 50%; top: 40%;
  width: min(120vw, 1300px); aspect-ratio: 1.35;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(245, 169, 74, 0.22), rgba(245, 169, 74, 0.07) 45%, transparent 72%);
  opacity: var(--glow, 0.9);
  will-change: opacity, transform;
}
.cyc__floor {
  position: absolute; left: 50%; bottom: -18vh;
  width: 150vw; height: 52vh;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(237, 235, 230, 0.07), rgba(245, 169, 74, 0.03) 55%, transparent);
}

/* the scene box is exactly the tablet; everything is placed relative to it */
.scene {
  --tw: min(50vw, 74vh, 720px);
  position: absolute; left: 50%; top: 43%;
  width: var(--tw); aspect-ratio: 4 / 3;
  margin-left: calc(var(--tw) / -2);
  margin-top: calc(var(--tw) * -0.375);
  perspective: 1700px;
  perspective-origin: 50% 45%;
  container-type: inline-size;
}
.js .scene { opacity: 0; translate: 0 48px; }
.is-ready .scene {
  opacity: 1; translate: 0 0;
  transition: opacity 1.2s var(--ease), translate 1.4s var(--ease);
}

.rig {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-10deg);
  will-change: transform;
}
/* will-change: transform only. will-change: opacity is a grouping property
   and would flatten the box, the voxels and the blocks to a single plane. */
.rig > * { position: absolute; will-change: transform; backface-visibility: hidden; }
.rig > .is-off { visibility: hidden; }

/* a prop is centred on the tablet; home.js moves it from there */
.pc {
  left: calc(50% - var(--pw) / 2); top: calc(50% - var(--ph) / 2);
  width: var(--pw); height: var(--ph);
}
.pc > svg { display: block; width: 100%; height: 100%; overflow: visible; }

.scene__shadow {
  position: absolute; left: 6%; right: 6%; top: 96%;
  height: 20%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
  opacity: var(--shadow, 1);
}


/* ------------------------------------------ 2 the tablet and the site */

.tab {
  inset: 0;
  border-radius: 4.4cqw;
  background: linear-gradient(150deg, #2c2f35 0%, #16181c 40%, #0d0e11 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4cqw 10cqw -2cqw rgba(0, 0, 0, 0.85),
    0 0 18cqw rgba(245, 169, 74, 0.1);
}
.tab__glass {
  position: absolute; inset: 4.5% 3.4%;
  border-radius: 2cqw;
  background: linear-gradient(180deg, #f5f4f1, #eceae5);
  overflow: hidden;
}
/* where each component sits, shown while they are off the glass */
.tab__glass i {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1px dashed rgba(21, 23, 26, 0.22);
  border-radius: 1cqw;
  opacity: var(--lift, 0);
}
.tab__glass i:first-child { border-radius: 0; border-width: 0 0 1px; }
.tab__glass .drop {
  display: grid; place-items: center;
  border: 1.5px dashed #c08a3e; background: rgba(245, 169, 74, 0.08);
  font: normal 500 1.4cqw/1 var(--body); color: #9a6a28;
}

/* the site on the glass. Positions are percentages of the tablet: the
   glass sits 3.4% in from the sides and 4.5% from top and bottom. */
.ui { color: #15171a; font-family: var(--body); line-height: 1.25; }

.ui--nav, .ui--head, .ui--cta, .ui--img, .ui--tile {
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, calc(var(--k, 0) * 0.7));
}

.ui--nav {
  left: 3.4%; top: 4.5%; width: 93.2%; height: 7.3%;
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 0 2.6cqw;
  background: #fbfaf8;
  border-radius: 2cqw 2cqw 1.2cqw 1.2cqw;
  font-size: 1.35cqw; color: #4a4d52;
  --f1: #d9d5cd; --f2: #c6c1b8;
}
.ui--nav b {
  margin-right: auto;
  font: 700 1.7cqw/1 var(--display); font-stretch: 130%;
  color: #2f4a3f; letter-spacing: 0.02em;
}
.ui--nav em {
  font-style: normal; color: #fff; background: #2f4a3f;
  padding: 0.55cqw 1.3cqw; border-radius: 99px;
}

.ui--head {
  left: 7.1%; top: 18.2%; width: 39.1%; height: 33.7%;
  display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw;
  padding: 0 1cqw;
  background: #f5f4f1;
  border-radius: 1.2cqw;
  --f1: #d6d2ca; --f2: #c3beb5;
}
.ui--head small { font-size: 1.2cqw; color: #2f4a3f; font-weight: 500; }
.ui--head strong {
  font: 400 3.9cqw/1.02 var(--display); font-stretch: 112%;
  letter-spacing: -0.03em; color: #15171a;
}
.ui--head span { font-size: 1.3cqw; color: #5a5d62; line-height: 1.45; }

.ui--cta {
  left: 7.1%; top: 56.4%; width: 22.4%; height: 6.8%;
  display: grid; place-items: center;
  border-radius: 99px;
  background: #2f4a3f; color: #fff;
  font-size: 1.4cqw; font-weight: 500;
  --f1: #1d3028; --f2: #243a31;
}

.ui--img {
  left: 51.9%; top: 16.3%; width: 41%; height: 50%;
  border-radius: 1.4cqw; overflow: hidden;
  background: #c9a36a;
}
.ui--img img { width: 100%; height: 100%; object-fit: cover; }

.ui--tile {
  top: 71.9%; width: 27%; height: 18.2%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5cqw;
  padding: 1.6cqw;
  border-radius: 1.4cqw;
  background: #fbfaf8;
  border: 1px solid rgba(21, 23, 26, 0.08);
  --f1: #d9d5cd; --f2: #c6c1b8;
}
.ui--tile b { font-size: 1.6cqw; font-weight: 600; }
.ui--tile span { font-size: 1.2cqw; color: #6a6d72; }
[data-l="t1"] { left: 7.1%; }
[data-l="t2"] { left: 36.5%; }
[data-l="t3"] { left: 65.9%; }

/* In the build chapter the components gain thickness and become blocks
   that slot together. --slab is published by home.js, 0 to 1. */
.slab { transform-style: preserve-3d; }
.slab::before, .slab::after {
  content: ""; position: absolute; pointer-events: none;
  opacity: var(--slab, 0);
}
/* the faces scale rather than resize, so growing them never costs a layout */
.slab::before {                       /* the face nearest the viewer's feet */
  left: 0; right: 0; bottom: 0; height: 3.2cqw;
  transform-origin: bottom; transform: rotateX(90deg) scaleY(var(--slab, 0));
  background: var(--f1);
}
.slab::after {                        /* the right-hand face */
  top: 0; bottom: 0; right: 0; width: 3.2cqw;
  transform-origin: right; transform: rotateY(-90deg) scaleX(var(--slab, 0));
  background: var(--f2);
}


/* ------------------------------------------------------- 3 the screens */

/* both sit exactly over the glass */
.scr {
  left: 3.4%; top: 4.5%; width: 93.2%; height: 91%;
  border-radius: 2cqw; overflow: hidden;
}

/* drafting paper, and a wireframe that draws itself on it */
.scr--plan {
  background-color: #f2f0ea;
  background-image:
    linear-gradient(rgba(58, 82, 120, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 82, 120, 0.09) 1px, transparent 1px);
  background-size: 2.33cqw 2.33cqw;
}
.scr--plan svg { display: block; width: 100%; height: 100%; }
.sk {
  fill: none; stroke: #34373d; stroke-width: 0.34;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--sk, 0) - var(--a, 0)) / var(--l, 0.2), 1));
}
.sk--dim { stroke: #c0802e; stroke-width: 0.26; }
.sk-note {
  font: 500 2.1px var(--body); fill: #b8792a;
  opacity: clamp(0, (var(--sk, 0) - 0.82) * 6, 1);
}

/* an online shop, selling the watch Brody shot */
.scr--shop {
  display: grid; grid-template-rows: 11% 1fr;
  background: #f7f6f3; color: #15171a;
}
.shop__nav {
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 0 2.6cqw; border-bottom: 1px solid rgba(21, 23, 26, 0.08);
  font-size: 1.3cqw; color: #5a5d62;
}
.shop__nav b {
  margin-right: auto;
  font: 600 1.7cqw/1 var(--display); font-stretch: 125%; color: #15171a;
}
.shop__body { display: grid; grid-template-columns: 46% 1fr; min-height: 0; }
.shop__pic { background: #07080a; overflow: hidden; }
.shop__pic img { width: 100%; height: 100%; object-fit: cover; }
.shop__info {
  display: flex; flex-direction: column; justify-content: center; gap: 1.3cqw;
  padding: 0 4cqw;
}
.shop__info small { font-size: 1.2cqw; color: #7a7d82; }
.shop__info strong {
  font: 400 3.4cqw/1.05 var(--display); font-stretch: 112%; letter-spacing: -0.03em;
}
.shop__price { font-size: 2.4cqw; font-weight: 500; }
.shop__sw { display: flex; gap: 0.9cqw; }
.shop__sw i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.shop__sw i:first-child { box-shadow: 0 0 0 0.35cqw #f7f6f3, 0 0 0 0.6cqw #15171a; }
.shop__buy {
  display: grid; place-items: center; height: 5.6cqw; margin-top: 0.8cqw;
  border-radius: 99px; background: #15171a; color: #fff;
  font-size: 1.4cqw; font-weight: 500;
}
.shop__note { font-size: 1.15cqw; color: #7a7d82; }


/* -------------------------------------------------------------- 4 props */

/* drafting tools: flat objects lying on the board, so a soft shadow is
   the only depth they need. The shadow sits on the artwork inside each
   prop, never on the prop itself: a filter on an element that moves in 3D
   makes it a flattened group, and the GPU can drop the whole frame. */
.pencil { --pw: 48cqw; --ph: 3.2cqw; }
.mpencil { --pw: 46cqw; --ph: 2.8cqw; }
.ruler { --pw: 74cqw; --ph: 6.6cqw; }
.pencil > svg, .mpencil > svg, .ruler > svg, .tag > svg, .cursor > svg, .lens > span {
  filter: drop-shadow(0 1.2cqw 1.2cqw rgba(0, 0, 0, 0.45));
}

/* design folders */
.folder { --pw: 28cqw; --ph: 19cqw; }
.folder > * { position: absolute; }
.folder__tab {
  left: 0; top: -2.5cqw; height: 2.7cqw; padding: 0 1.5cqw;
  border-radius: 1cqw 1cqw 0 0; background: var(--fc);
  font: 500 1.3cqw/2.7cqw var(--body); color: rgba(255, 255, 255, 0.86);
}
.folder__back { inset: 0; border-radius: 0 1.4cqw 1.4cqw 1.4cqw; background: var(--fc); }
.folder__paper {
  left: 44%; right: 7%; top: -1.2cqw; height: 58%;
  border-radius: 0.5cqw; background: #eeede8;
  background-image: repeating-linear-gradient(transparent 0 1.5cqw, rgba(21, 23, 26, 0.12) 1.5cqw calc(1.5cqw + 1px));
  background-position: 0 2cqw;
}
.folder__front {
  left: 0; right: 0; bottom: 0; height: 82%;
  border-radius: 1.4cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc), #fff 9%), var(--fc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2.4cqw 4cqw -1cqw rgba(0, 0, 0, 0.6);
}

/* a collaborator's cursor, carrying the photograph */
.cursor { --pw: 4cqw; --ph: 4cqw; }
.cursor__tag {
  position: absolute; left: 72%; top: 88%;
  padding: 0.35cqw 1cqw; border-radius: 0.4cqw 1cqw 1cqw 1cqw;
  background: var(--sodium); color: #15171a;
  font: 500 1.3cqw/1.2 var(--body); white-space: nowrap;
}

/* the magnifier, reading the button's spacing */
.lens { --pw: 20cqw; --ph: 20cqw; }
.lens__glass {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: #f3f2ef;
  box-shadow: 0 0 0 1.1cqw #25282e, 0 0 0 1.45cqw rgba(255, 255, 255, 0.14);
}
.lens__glass::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(60% 50% at 30% 22%, rgba(255, 255, 255, 0.5), transparent 60%);
}
.lens__cta {
  position: absolute; left: 12%; top: 38%;
  width: 150%; height: 26%;
  display: flex; align-items: center; padding-left: 12%;
  border-radius: 99px; background: #2f4a3f; color: #fff;
  font: 500 3.2cqw/1 var(--body);
}
.lens__guide { position: absolute; inset: 0; width: 100%; height: 100%; }
.lens__guide path { fill: none; stroke: #d98a2b; stroke-width: 0.6; stroke-dasharray: 1.4 1; }
.lens__guide text { font: 600 3.4px var(--body); fill: #c0761f; }
.lens__handle {
  position: absolute; left: 78%; top: 78%;
  width: 4cqw; height: 13cqw;
  transform-origin: 50% 0; transform: rotate(-45deg);
  border-radius: 0.6cqw 0.6cqw 1.6cqw 1.6cqw;
  background: linear-gradient(90deg, #121417, #30343a 45%, #121417);
}
.lens__handle::before {
  content: ""; position: absolute; left: -0.3cqw; right: -0.3cqw; top: 0; height: 2cqw;
  border-radius: 0.5cqw; background: linear-gradient(90deg, #7d8289, #c9ccd1, #7d8289);
}

/* 3D pixels: each voxel is a front face and two side faces. Opacity lives
   on the faces, never on the voxel, because opacity on a 3D parent flattens
   it. */
.vx { transform-style: preserve-3d; }
.vx i, .vx::before, .vx::after { position: absolute; opacity: var(--o, 0); }
.vx i { inset: 0; background: var(--c); box-shadow: inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.12); }
.vx::before {
  content: ""; left: 0; right: 0; bottom: 0; height: 4cqw;
  transform-origin: bottom; transform: rotateX(90deg) scaleY(var(--vdk, 1));
  background: color-mix(in srgb, var(--c), #000 36%);
}
.vx::after {
  content: ""; top: 0; bottom: 0; right: 0; width: 4cqw;
  transform-origin: right; transform: rotateY(-90deg) scaleX(var(--vdk, 1));
  background: color-mix(in srgb, var(--c), #000 20%);
}

/* the shipping box: six faces, kraft board, tape and a label */
.box3d { --pw: 20cqw; --ph: 15cqw; --bd: 16cqw; transform-style: preserve-3d; }
.box3d i { position: absolute; opacity: var(--o, 1); backface-visibility: visible; }
.bx-f, .bx-b { inset: 0; background: #c79962; }
.bx-f { transform: translateZ(calc(var(--bd) / 2)); }
.bx-b { transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); background: #a47744; }
.bx-r, .bx-l { top: 0; bottom: 0; left: calc(50% - var(--bd) / 2); width: var(--bd); background: #a87b46; }
.bx-r { transform: rotateY(90deg) translateZ(calc(var(--pw) / 2)); }
.bx-l { transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); background: #b88a53; }
.bx-t, .bx-u { left: 0; right: 0; top: calc(50% - var(--bd) / 2); height: var(--bd); background: #dbb07a; }
.bx-t { transform: rotateX(90deg) translateZ(calc(var(--ph) / 2)); }
.bx-u { transform: rotateX(-90deg) translateZ(calc(var(--ph) / 2)); background: #8f6538; }
.bx-t::after, .bx-f::before {
  content: ""; position: absolute; left: 43%; width: 14%;
  background: rgba(236, 219, 186, 0.6);
}
.bx-t::after { top: 0; bottom: 0; }
.bx-f::before { top: 0; height: 32%; }
.bx-f::after {
  content: ""; position: absolute; right: 9%; bottom: 12%; width: 38%; height: 34%;
  border-radius: 0.4cqw;
  background:
    repeating-linear-gradient(90deg, #26282c 0 0.25cqw, transparent 0.25cqw 0.55cqw) 1.2cqw 55% / 60% 30% no-repeat,
    linear-gradient(#26282c, #26282c) 1.2cqw 22% / 50% 0.35cqw no-repeat,
    #f4f2ec;
}

/* a blank, sleek payment card */
.paycard {
  --pw: 32cqw; --ph: 20.2cqw;
  border-radius: 1.6cqw; overflow: hidden;
  background: linear-gradient(135deg, #3d4149 0%, #1c1e23 48%, #0e0f12 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.85);
}
.paycard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.1) 48%, transparent 60%);
}
.paycard__chip {
  position: absolute; left: 9%; top: 36%; width: 15%; height: 23%;
  border-radius: 0.7cqw;
  background:
    linear-gradient(90deg, transparent 32%, rgba(90, 64, 24, 0.35) 32% 34%, transparent 34% 66%, rgba(90, 64, 24, 0.35) 66% 68%, transparent 68%),
    linear-gradient(transparent 46%, rgba(90, 64, 24, 0.35) 46% 54%, transparent 54%),
    linear-gradient(135deg, #efd6a3, #b08a4f);
}
.paycard svg { position: absolute; left: 28%; top: 38%; width: 7%; height: auto; }
.paycard svg path { fill: none; stroke: rgba(237, 235, 230, 0.55); stroke-width: 1.6; stroke-linecap: round; }

/* product tags */
.tag { --pw: 18cqw; --ph: 10.2cqw; }

/* the dark chrome cards */
.ui--card {
  padding: 1.8cqw;
  border-radius: 1.8cqw;
  background: linear-gradient(160deg, #23262c, var(--surface));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.8);
}
.ui__cap { font-size: 1.25cqw; color: var(--ink-2); }

.ui--type { --pw: 24cqw; --ph: 17cqw; display: grid; gap: 1.2cqw; align-content: start; }
.ui__aa { font: 300 7cqw/0.9 var(--display); font-stretch: 125%; letter-spacing: -0.03em; }
.ui__sw { display: flex; gap: 0.8cqw; }
.ui__sw i { width: 3cqw; height: 3cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

.ui--score {
  --pw: 17cqw; --ph: 18cqw;
  display: grid; justify-items: center; align-content: center; gap: 0.8cqw;
  grid-template-areas: "ring" "cap";
}
.ui--score svg { grid-area: ring; width: 70%; transform: rotate(-90deg); }
.ui--score circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 2.6; }
.ui--score circle.on {
  stroke: #7fd09a; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: var(--ring, 1);
}
.ui--score b { grid-area: ring; align-self: center; font: 400 3.4cqw/1 var(--display); color: #7fd09a; }
.ui--score .ui__cap { grid-area: cap; }

.ui--toast {
  --pw: 31cqw; --ph: 7.6cqw;
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.2cqw; row-gap: 0.3cqw;
  align-content: center; align-items: center;
}
.ui__dot {
  grid-row: span 2; width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
  background: var(--sodium);
  box-shadow: 0 0 0 0.8cqw rgba(245, 169, 74, 0.18);
}
.ui__dot--ok { background: #7fd09a; box-shadow: 0 0 0 0.8cqw rgba(127, 208, 154, 0.18); }
.ui--toast b { font-size: 1.6cqw; font-weight: 500; }
.ui--toast span { font-size: 1.3cqw; color: var(--ink-2); }

/* analytics: visitors by day */
.bars { --pw: 30cqw; --ph: 23cqw; display: flex; flex-direction: column; }
.bars__head { display: flex; justify-content: space-between; font-size: 1.3cqw; color: var(--ink-2); }
.bars__n {
  margin-top: 0.8cqw;
  font: 300 4.4cqw/1 var(--display); font-stretch: 118%; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.bars__g { flex: 1; display: flex; align-items: flex-end; gap: 1cqw; margin-top: 1.6cqw; }
.bars__g i {
  flex: 1; height: var(--h);
  transform-origin: bottom; transform: scaleY(var(--grow, 1));
  border-radius: 0.5cqw 0.5cqw 0.2cqw 0.2cqw;
  background: rgba(237, 235, 230, 0.2);
}
.bars__g i.hi { background: var(--sodium); }
.bars__x { display: flex; gap: 1cqw; margin-top: 0.8cqw; font-size: 1.1cqw; color: var(--ink-3); }
.bars__x span { flex: 1; text-align: center; }

/* the search chart */
.chart {
  left: 17%; top: 15%; width: 66%; height: 70%;
  display: flex; flex-direction: column;
  padding: 2.6cqw;
}
.chart__head {
  display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  font-size: 1.5cqw; color: var(--ink-2);
}
.chart__pos { padding: 0.5cqw 1.2cqw; border-radius: 99px; border: 1px solid var(--hair-2); }
.chart__pos b { color: var(--ink); font-weight: 500; }
.chart__n {
  margin-top: 1cqw;
  font: 300 6.4cqw/1 var(--display); font-stretch: 118%;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.chart__svg { flex: 1; width: 100%; margin-top: 1.6cqw; overflow: visible; }
.chart__grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__line {
  fill: none; stroke: var(--sodium); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0);
}
.chart__x { display: flex; justify-content: space-between; margin-top: 1cqw; font-size: 1.2cqw; color: var(--ink-3); }


/* ---------------------------------------------------------- 5 the words */

.hero__copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: 0 var(--gutter) clamp(24px, 5.5vh, 56px);
  pointer-events: none;
}
.hero__copy a, .hero__copy li { pointer-events: auto; }
.hero__stage::after {
  content: ""; position: absolute; inset: auto 0 0; height: 34%;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.85), transparent);
  pointer-events: none;
}

.hero__left { max-width: min(48rem, 58vw); }
.hero__title {
  font-family: var(--display); font-stretch: 118%; font-weight: 300; letter-spacing: -0.02em;
  font-size: min(var(--f-hero), 0.4rem + 6.4vh); line-height: 1.02;
}
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln > span { display: inline-block; }
.hero__left .btn { margin-top: 26px; }

.hero__right { width: min(25rem, 36vw); }

/* one caption per chapter, stacked in one cell so the column never
   changes height as they swap */
.caps { display: grid; }
.caps p {
  grid-area: 1 / 1;
  font-size: 1rem; color: var(--ink-2); line-height: 1.5;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.caps p.is-on { opacity: 1; }
.caps b { color: var(--ink); font-weight: 500; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pills li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.4em 0.9em; border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: 0.8rem; color: var(--ink-3);
  transition: color 0.4s, border-color 0.4s;
}
.pills li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sodium); opacity: 0; transition: opacity 0.4s;
}
.pills li.is-on { color: var(--ink); border-color: var(--hair-2); }
.pills li.is-on::before { opacity: 1; }
.pills li.is-done { color: var(--ink-2); }
.pills .pills__more { padding: 0; border: 0; }
.pills .pills__more::before { display: none; }
.pills__more a {
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 0 0.9em; border-radius: 999px;
  border: 1px dashed var(--hair-2);
  color: var(--ink-2); text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}
.pills__more a:hover { color: var(--ink); border-color: var(--ink-2); }

/* a hairline under the pills that fills as the scene plays */
.hero__prog {
  height: 1px; margin-top: 14px; background: var(--hair);
  overflow: hidden;
}
.hero__prog i {
  display: block; height: 100%; background: var(--sodium);
  transform-origin: left; transform: scaleX(var(--prog, 0));
}

/* one orchestrated entrance, and only one */
.js .ln > span { translate: 0 110%; }
.js .hero__left .btn, .js .hero__right { opacity: 0; }
.is-ready .ln > span { translate: 0 0; transition: translate var(--t-in) var(--ease); }
.is-ready .ln + .ln > span { transition-delay: 90ms; }
.is-ready .hero__left .btn, .is-ready .hero__right {
  opacity: 1; transition: opacity 1s var(--ease) 350ms;
}


/* ---------------------------------------------------------- 6 statement */

.say__t, .web__t, .stages__tabs button, .stage__t,
.combo__t, .also__t, .row__t {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.say { padding-block: var(--sec); text-align: center; }
.say__t {
  max-width: 15em; margin-inline: auto;
  font-size: var(--f-say); line-height: 1.04;
  text-wrap: balance;
}
.say__d {
  max-width: 36em; margin: 32px auto 0;
  color: var(--ink-2); font-size: var(--f-lede); line-height: 1.55;
  text-wrap: pretty;
}


/* ----------------------------------------------------------- 7 websites */

.web { padding-bottom: var(--sec); }
.web__head {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 32px 64px; align-items: end;
  padding-bottom: 48px; border-bottom: 1px solid var(--hair);
}
.web__t { font-size: var(--f-h2); line-height: 1.05; max-width: 13em; text-wrap: balance; }
.web__price p { color: var(--ink-2); max-width: 28em; }
.web__price b { color: var(--ink); font-weight: 500; }
.web__price .ulink { margin-top: 14px; }

.stages {
  display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2fr);
  gap: 48px 64px; margin-top: 56px;
}
.stages__tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.stages__tabs button {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 14px;
  padding: 6px 0;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.1;
  color: var(--ink-3);
  transition: color 0.3s;
}
.stages__tabs button span {
  font: 400 0.8rem/1 var(--body); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.stages__tabs button:hover { color: var(--ink-2); }
.stages__tabs button[aria-selected="true"] { color: var(--ink); }
.stages__tabs button[aria-selected="true"] span { color: var(--sodium); }

.stage { animation: stage-in 0.5s var(--ease); }
@keyframes stage-in { from { opacity: 0; transform: translateY(10px); } }
.stage__t { font-size: var(--f-h3); line-height: 1.15; }
.stage__d { margin-top: 14px; max-width: 34em; color: var(--ink-2); font-size: var(--f-lede); line-height: 1.55; }
.stage__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px; margin-top: 36px;
}
.stage__list li { display: grid; gap: 6px; padding: 20px 0 24px; border-top: 1px solid var(--hair); }
.stage__list b { font-weight: 500; }
.stage__list span { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }


/* -------------------------------------------------------------- 8 combo */

.combo { padding-bottom: var(--sec); }
.combo__frame {
  position: relative;
  border-radius: clamp(12px, 1.6vw, 22px); overflow: hidden;
  background: var(--cyc);
  aspect-ratio: 16 / 9;
}
.combo__frame img { width: 100%; height: 100%; object-fit: cover; }
.combo__frame figcaption {
  position: absolute; left: 16px; bottom: 14px;
  padding: 0.3em 0.8em; border-radius: 999px;
  background: rgba(8, 9, 11, 0.7); color: var(--ink-2); font-size: 0.8rem;
}
.combo__copy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 64px; margin-top: 40px;
}
.combo__t { font-size: var(--f-h3); line-height: 1.15; max-width: 16em; }
.combo__copy p { color: var(--ink-2); max-width: 34em; }


/* --------------------------------------------------------------- 9 also */

.also { padding-bottom: var(--sec); }
.also__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 40px; padding-bottom: 28px;
}
.also__t { font-size: var(--f-h2); line-height: 1.05; }
.also__head p { color: var(--ink-2); }

.row { border-top: 1px solid var(--hair); }
.row:last-child { border-bottom: 1px solid var(--hair); }
.row__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 9rem clamp(140px, 16vw, 220px);
  grid-template-areas: "t d p img";
  align-items: center; gap: 16px 40px;
  padding: 28px 0;
  text-decoration: none;
}
.row__t {
  grid-area: t;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1;
  transition: transform 0.5s var(--ease);
}
.row__d { grid-area: d; color: var(--ink-2); max-width: 32em; }
.row__p { grid-area: p; font-size: var(--f-sm); color: var(--ink); justify-self: end; }
.row__img {
  grid-area: img;
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: var(--cyc);
}
.row__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.7s var(--ease), filter 0.5s;
}
.row__link:hover .row__t { transform: translateX(10px); }
.row__link:hover .row__img img { transform: scale(1.05); filter: saturate(1); }


/* ----------------------------------------------------- 10 reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .scene, .js .ln > span, .js .hero__left .btn, .js .hero__right {
    opacity: 1; translate: none;
  }
  .hero__prog { display: none; }
}


/* ------------------------------------------------------- 11 small screens */

@media (max-width: 1024px) {
  .hero__copy { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__left { max-width: none; }
  .hero__right { width: min(100%, 32rem); }
  .caps p { font-size: 0.95rem; }
  .stages { grid-template-columns: 1fr; gap: 32px; }
  .stages__tabs {
    flex-direction: row; flex-wrap: wrap; gap: 4px 22px;
    border-bottom: 1px solid var(--hair); padding-bottom: 12px;
  }
  .stages__tabs button { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem); gap: 8px; }
  .row__link {
    grid-template-columns: minmax(0, 1fr) clamp(96px, 26vw, 180px);
    grid-template-areas: "t img" "d img" "p img";
    gap: 10px 20px;
  }
  .row__p { justify-self: start; color: var(--ink-2); }
}

@media (max-width: 760px) {
  .scene { --tw: min(84vw, 60vh); top: 34%; }
  .is-motion .hero__track { height: 820vh; }
  .hero__stage::after { height: 55%; background: linear-gradient(to top, rgba(8, 9, 11, 0.96) 40%, transparent); }
  .hero__left .btn { margin-top: 18px; }
  .web__head, .combo__copy { grid-template-columns: 1fr; }
  .stage__list { grid-template-columns: 1fr; }
  .row__link { grid-template-areas: "t img" "d d" "p p"; align-items: start; }
  .row__img { aspect-ratio: 1; }
  .say, .say__t, .say__d { text-align: left; }
  .say__t, .say__d { margin-inline: 0; }
}