/* Inside pages, design round one: Get to Know Us and What We Do.
   Loads after base.css and theme.css, so the homepage tokens, type and buttons carry over.
   Only the components the homepage doesn't have are styled here. */

/* ---------- page rhythm ---------- */
.page main > .beat {
  --bg: var(--g0);
}
.page main > .beat:nth-of-type(even) {
  --bg: var(--g1);
}
.page .s-links a[aria-current="page"] {
  color: var(--ink);
}
.page .s-links a[aria-current="page"]:not(:last-child)::after {
  transform: scaleX(1);
}

/* ---------- hero: headline over a quieter thread field ---------- */
.page-hero {
  padding-top: clamp(150px, 22vh, 220px);
  padding-bottom: clamp(80px, 12vh, 140px);
}
.page-hero .beat-in {
  gap: clamp(20px, 3vh, 32px);
}
.page-hero .lede {
  max-width: 50ch;
}

/* ---------- pinned scenes ---------- */
.pin {
  position: relative;
}
.pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  overflow: hidden;
  padding-top: 68px;
}
.pin-stage > .wrap {
  width: 100%;
}
.pin-bar {
  height: 2px;
  background: var(--line);
  position: relative;
  margin-top: 26px;
}
.pin-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent);
}

/* ---------- Get to Know Us: five cards turn from the old habit to what you get ---------- */
.flips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  perspective: 1600px;
  margin-top: clamp(8px, 2vh, 20px);
}
.flip {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 52vh;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.flip.on {
  transform: rotateY(180deg);
}
.flip > div {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: clamp(16px, 1.6vw, 24px);
  display: grid;
  align-content: space-between;
  border-radius: var(--radius);
}
.f-old {
  background: var(--g2);
  border: 1px solid var(--line);
}
.f-old .hd {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--accent) 70%, transparent);
  text-decoration-thickness: 3px;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 0.95;
}
.f-new {
  transform: rotateY(180deg);
  background: var(--accent);
  color: var(--on-accent);
}
.f-new .lbl {
  color: var(--on-accent);
  opacity: 0.7;
}
.f-new .hd {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 0.95;
}
.f-new .small {
  color: var(--on-accent);
  opacity: 0.85;
  font-size: 15px;
  line-height: 1.4;
}

/* ---------- the flat fee, as a slider ---------- */
.fee {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(24px, 3vw, 44px);
  background: var(--g2);
  border-radius: var(--radius);
}
.fee-ctl {
  display: grid;
  gap: 14px;
}
.fee-ctl .lbl b {
  color: var(--ink);
  font-weight: 400;
}
.fee-out {
  display: grid;
  gap: 18px;
}
.fee-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.fee-bar {
  height: 44px;
  background: var(--g1);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.fee-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 20%);
  border-radius: 999px;
  background: var(--g3);
  transition:
    width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
}
.fee-bar.hourly i {
  background: color-mix(in oklch, var(--ink) 28%, var(--g2));
}
.fee-bar.cinch i {
  background: var(--accent);
}
.fee-bar b {
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-top: 0.14em; /* Bebas sits high in its line box; this centres the caps */
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.06em;
  -webkit-text-stroke: 0.7px currentColor; /* Bebas has one weight; the stroke gives it bold */
  color: var(--on-accent);
  white-space: nowrap;
}
.fee-bar.hourly b {
  color: var(--ink);
}
.fee-say {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: var(--wdth-tight);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  min-height: 2em;
}
.fee input[type="range"],
.tl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.fee input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--accent) var(--fill, 0%),
    var(--line) var(--fill, 0%)
  );
}
.fee input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 22%, transparent);
}
.fee input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: var(--line);
}
.fee input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
}
.fee input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
.fee input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 8px;
}

/* ---------- facts that count up ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.fact {
  padding: clamp(24px, 3vw, 40px) 24px clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  align-content: start;
  cursor: default;
  outline: 0;
}
.fact:not(:nth-child(3n + 1)) {
  padding-left: clamp(20px, 2.4vw, 36px);
  border-left: 1px solid var(--line);
}
.fact .n {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: var(--wdth-tight);
  font-size: clamp(72px, 9vw, 150px);
  line-height: 0.8;
  color: var(--accent);
  font-variant-numeric: proportional-nums;
}
.fact .hd {
  color: var(--ink);
  font-size: 20px;
}
.fact .why {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--ink-2);
  transition:
    max-height 0.5s ease,
    opacity 0.4s ease;
}
.fact:hover .why,
.fact:focus-visible .why,
.fact.open .why {
  max-height: 120px;
  opacity: 1;
}

/* ---------- partner wall ---------- */
.logos {
  overflow: hidden;
  display: grid;
  gap: clamp(28px, 3.4vw, 48px);
  padding: 10px 0;
}
.logo-row {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5.6vw, 88px);
  width: max-content;
  will-change: transform;
}
/* white logos straight on the page, no boxes; --h (set per logo) balances wide and compact marks */
.logo {
  flex: none;
  display: grid;
  place-items: center;
  height: calc(var(--logo-h, 40px) * 1.3);
}
.logos { --logo-h: clamp(38px, 3.6vw, 52px); }
.logo img {
  display: block;
  height: calc(var(--logo-h, 40px) * var(--h, 1));
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.logo:hover img {
  opacity: 1;
  transform: scale(1.04);
}

/* ---------- What We Do: the problem picker ---------- */
.router {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.router-q {
  display: grid;
  gap: 10px;
  align-content: start;
}
.router-q button {
  text-align: left;
  background: var(--g2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 20px 22px;
  font: inherit;
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.router-q button:hover {
  color: var(--ink);
  transform: translateX(4px);
}
.router-q button.on {
  border-color: var(--accent);
  color: var(--ink);
  background: color-mix(in oklch, var(--accent) 12%, var(--g2));
}
.router-q button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.router-a {
  background: var(--g2);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 320px;
}
.router-a .hd {
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
}
.router-a .chip {
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  color: var(--accent-strong);
}
.router-a > * {
  animation: rise 0.5s var(--ease-out) both;
}
.router-a > *:nth-child(2) {
  animation-delay: 0.05s;
}
.router-a > *:nth-child(3) {
  animation-delay: 0.1s;
}
.router-a > *:nth-child(4) {
  animation-delay: 0.15s;
}
.router-a > *:nth-child(5) {
  animation-delay: 0.2s;
}

/* ---------- services, moving sideways ---------- */
.hz-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 26px;
  padding-top: 68px;
}
.hz-stage > .wrap {
  width: 100%;
}
.hz-track {
  display: flex;
  gap: clamp(16px, 1.6vw, 24px);
  will-change: transform;
  padding-left: max(
    var(--gutter),
    calc((100vw - var(--maxw)) / 2 + var(--gutter))
  );
}
.hz-panel {
  flex: none;
  width: min(80vw, 980px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--g2);
  border-radius: var(--radius);
  position: relative;
  transition:
    opacity 0.4s ease,
    box-shadow 0.4s ease;
}
.hz-panel .lbl {
  color: var(--ink-3);
}
.hz-panel .hd-xl {
  font-size: clamp(44px, 5vw, 84px);
}
.hz-panel .small {
  color: var(--ink-2);
  font-size: 17px;
}
.hz-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.hz-panel li {
  color: var(--ink-2);
  font-size: 16px;
  padding-left: 18px;
  position: relative;
}
.hz-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1.5px;
  background: var(--accent);
}
.hz-img {
  margin: 0;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  min-height: 320px;
  background: var(--g1);
}
.hz-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hz-panel.now .hz-img img {
  transform: scale(1);
}
.hz-img-empty {
  background: repeating-linear-gradient(
    135deg,
    var(--g1) 0 14px,
    color-mix(in oklch, var(--g1) 80%, var(--g2)) 14px 28px
  );
}
.hz-index {
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  flex-wrap: wrap;
}
.hz-index span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  transition: color 0.3s ease;
}
.hz-index span.on {
  color: var(--ink);
}
[data-hz].lit .hz-panel:not(.hit) {
  opacity: 0.45;
}
.hz-panel.hit {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.hz-panel.hit::after {
  content: "Your problem usually needs this";
  position: absolute;
  top: -13px;
  left: clamp(22px, 2.4vw, 34px);
  background: var(--accent);
  color: var(--on-accent);
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 5px 12px 3px;
  border-radius: 999px;
}
.hz-index span.hit {
  color: var(--accent);
}
.hz-index span.hit.on {
  color: var(--accent-strong);
}

/* ---------- AI: the render slides over the drawing ---------- */
.ba {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  user-select: none;
}
.ba figure {
  position: absolute;
  inset: 0;
  margin: 0;
}
.ba img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.ba-after {
  transform: translateX(var(--x, 62%));
  box-shadow: -18px 0 40px -12px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.ba figcaption {
  position: absolute;
  top: 14px;
  padding: 6px 12px 4px;
  border-radius: 999px;
  background: rgba(14, 17, 17, 0.82);
  color: var(--ink);
  font-size: 14px;
}
.ba-before figcaption {
  left: 14px;
}
.ba-after figcaption {
  left: 14px;
  background: var(--accent);
  color: var(--on-accent);
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--x, 62%);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.ba-handle::before,
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--on-accent);
  border-left: 2px solid var(--on-accent);
}
.ba-handle::before {
  left: 12px;
  transform: translateY(-50%) rotate(-45deg);
}
.ba-handle::after {
  right: 12px;
  transform: translateY(-50%) rotate(135deg);
}
.ba input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ai-points {
  display: grid;
  gap: 10px;
}
.ai-points .hd {
  font-size: 20px;
  padding-left: 20px;
  position: relative;
}
.ai-points .hd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- closing line ---------- */
.page main > .beat:last-child .hd-xl {
  max-width: 16ch;
}

@media (max-width: 880px) {
  .flips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flip {
    max-height: none;
  }
  .flips .flip:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
  }
  .pin[data-flips] {
    height: auto !important;
  }
  .pin[data-flips] .pin-stage {
    position: static;
    height: auto;
    padding: 72px 0;
  }
  .fee,
  .router {
    grid-template-columns: 1fr;
  }
  .fee-row {
    grid-template-columns: minmax(0, 1fr);   /* the label sits on its bar, so both bars get the full width (Sean, 2026-10-13) */
    gap: 8px;
  }
  .facts {
    grid-template-columns: 1fr 1fr;
  }
  .fact:not(:nth-child(3n + 1)) {
    padding-left: 0;
    border-left: 0;
  }
  .fact:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }
  [data-hz] {
    height: auto !important;
  }
  .hz-stage {
    position: static;
    height: auto;
    padding: 72px 0;
  }
  .hz-track {
    flex-direction: column;
    padding: 0 var(--gutter);
    transform: none !important;
  }
  .hz-panel {
    width: auto;
    grid-template-columns: 1fr;
  }
  .hz-img {
    min-height: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flip,
  .fee-bar i,
  .fact .why,
  .hz-img img,
  .router-a > * {
    transition: none !important;
    animation: none !important;
  }
}

/* both bars keep room for their label on small screens */
.fee-bar i { min-width: 118px; }
.page .rv span { white-space: nowrap; }

/* the two lines sit a little quieter behind the headline */
.threads.together { -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.5) 0%, #000 55%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 35%, #000 60%); }

/* What We Do hero: one line, writing what we make */
.page-hero[data-hero="line"] { min-height: 0; padding-bottom: 0; }
.page-hero[data-hero="line"] .wrap { position: relative; z-index: 1; }
.sl { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sl-svg { position: absolute; inset: 0; display: block; }
.sl-path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sl-tip { fill: var(--accent-strong); filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 70%, transparent)); transition: opacity 0.3s ease; }
@media (max-width: 880px) {
  .page-hero[data-hero="line"] { min-height: 0; padding-bottom: 0; }
  .sl-path { stroke-width: 2.4; }
}

/* ---------- What We Do: how we work, one line through four steps ---------- */
.proc { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); padding-top: 64px; margin-top: clamp(12px, 2vh, 24px); }
.proc-line { position: absolute; left: 0; top: 0; width: 100%; height: 48px; overflow: visible; pointer-events: none; }
.proc-line path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.proc-line .track { stroke: var(--line); stroke-width: 1.2; }
.proc-line circle { fill: var(--g1); stroke: var(--line); stroke-width: 1.5; transition: fill 0.4s ease, stroke 0.4s ease; }
.proc-line circle.on { fill: var(--accent); stroke: var(--accent); }
.proc-step { display: grid; gap: 12px; align-content: start; opacity: 0.32; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.proc-step.on { opacity: 1; transform: none; }
.proc-step .hd { font-size: clamp(24px, 2vw, 32px); line-height: 1; }
.proc-step .small { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
/* the note under the four steps (Sean, 2026-10-13): when you already know what you need made, skip to 04. An "oh, and", not a fifth step:
   a card slapped on under 04 at a tilt, and a brush arrow (the homepage's ink, #ink-rough) drawing up to it. pages-motion.js lands it on screen (.landed: the site already uses .in for the intake layout) */
.proc-note { position: relative; width: min(440px, 100%); margin: clamp(64px, 8vh, 96px) 0 0 auto; }
.proc-note-card { position: relative; background: var(--accent); color: var(--g0); padding: 22px 26px 24px; border-radius: 3px; transform: rotate(-2deg); box-shadow: 0 18px 44px rgb(0 0 0 / 0.38); }
.proc-oh { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 800; font-stretch: var(--wdth-tight); font-size: clamp(32px, 3.2vw, 44px); line-height: 0.95; letter-spacing: -0.01em; }
.proc-note-card p { margin: 0; font-size: 17px; line-height: 1.45; }
.proc-note-arrow { position: absolute; left: 56px; top: -110px; width: 150px; height: 118px; overflow: visible; filter: url(#ink-rough); }   /* its tip under 04's text */
.proc-note-arrow path { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.proc-note.ready .proc-note-card { opacity: 0; transform: rotate(-9deg) scale(0.86) translateY(18px); }
.proc-note.ready .proc-note-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.proc-note.ready.landed .proc-note-card { opacity: 1; transform: rotate(-2deg); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; }
.proc-note.ready.landed .pn-shaft { stroke-dashoffset: 0; transition: stroke-dashoffset 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }
.proc-note.ready.landed .pn-head { stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s ease-out 0.85s; }
@media (max-width: 880px) { .proc-note { width: calc(100% - 20px); margin-top: 104px; } .proc-note-arrow { left: 4px; top: -100px; width: 128px; height: 100px; } }

/* ---------- What We Do: where AI fits, one brief, eight routes, one chosen ---------- */
.ai-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.ai-head .lede { color: var(--ink-2); }
.ai-scene { position: relative; display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(20px, 3vh, 36px); }
.ai-scene figure { margin: 0; border-radius: calc(var(--radius) - 4px); overflow: hidden; background: #fff; }
.ai-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-brief { align-self: center; aspect-ratio: 4 / 3; position: relative; }
.ai-routes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 0.9vw, 14px); }
.ai-route { aspect-ratio: 4 / 3; opacity: 0; transform: scale(0.86); transform-origin: 50% 50%; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; }
.ai-route.shown { opacity: 1; transform: none; }
.ai-routes.picked .ai-route:not(.chosen) { opacity: 0.12; }
.ai-route.chosen { position: relative; z-index: 2; }
.ai-routes.picked .ai-route.chosen { position: absolute; top: 0; height: 100%; left: var(--cl, 0px); width: var(--cw, 50%); aspect-ratio: auto; }
.ai-routes.picked .ai-route.chosen { box-shadow: 0 0 0 3px var(--accent), 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.ai-cap { grid-column: 1 / -1; min-height: 1.4em; font-family: "Bebas Neue", sans-serif; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: 0.04em; color: var(--ink-2); position: relative; margin: 0; }
.ai-cap span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s ease; }
.ai-cap span.on { opacity: 1; transform: none; }
.ai-cap span[data-cap="2"] { color: var(--accent); }

@media (max-width: 880px) {
  .proc { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 32px; }
  .proc-line { width: 30px; height: 100%; }
  .ai-head, .ai-scene { grid-template-columns: 1fr; }
  .ai-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-ai] { height: auto !important; }
  [data-ai] .pin-stage { position: static; height: auto; padding: 72px 0; }
  .ai-cap { min-height: 3em; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-step, .ai-route, .ai-cap span { transition: none !important; }
}

/* ---------- services: blueprint line drawings, straight on the card ---------- */
.hz-bp { margin: 0; align-self: center; }
.bp { display: block; width: 100%; height: auto; overflow: visible; }
.bp-m { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-c { fill: none; stroke: var(--accent); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 4 4; }
.bp-d { fill: none; stroke: var(--ink-3); stroke-width: 0.8; }
.bp-g { fill: none; stroke: var(--accent); stroke-opacity: 0.07; stroke-width: 1; }
.bp-g2 { fill: none; stroke: var(--accent); stroke-opacity: 0.18; stroke-width: 0.8; stroke-dasharray: 2 4; }
.bp-t { font-family: "Bebas Neue", sans-serif; font-size: 11px; letter-spacing: 0.08em; fill: var(--ink-3); }
/* the drawing draws itself in when its panel arrives; the notes follow */
.motion .hz-panel .bp-m { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--i, 0) * 25ms); }
.motion .hz-panel.now .bp-m { stroke-dashoffset: 0; }
.motion .hz-panel .bp-c, .motion .hz-panel .bp-d, .motion .hz-panel .bp-t, .motion .hz-panel .bp-g2, .motion .hz-panel .bp-bg { opacity: 0; transition: opacity 0.7s ease 0.6s; }
.motion .hz-panel.now .bp-c, .motion .hz-panel.now .bp-d, .motion .hz-panel.now .bp-t, .motion .hz-panel.now .bp-g2, .motion .hz-panel.now .bp-bg { opacity: 1; }

/* ---------- where AI fits: where a project's hours go ---------- */
.ai-time { background: var(--g2); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 18px; align-self: center; position: relative; }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.t-toggle { display: inline-flex; background: var(--g1); border-radius: 999px; padding: 4px; }
.t-toggle button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none; color: var(--ink-2); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.t-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.t-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-rows { display: grid; gap: 12px; }
.t-row { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); gap: 14px; align-items: center; }
.t-name { font-size: 15px; color: var(--ink-2); }
.t-impact .t-name { color: var(--ink); }
.t-bar { height: 14px; border-radius: 999px; background: var(--g1); overflow: hidden; }
.t-bar i { display: block; height: 100%; width: var(--a); border-radius: 999px; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.t-busy .t-bar i { background: color-mix(in oklch, var(--ink) 30%, var(--g2)); }
.t-impact .t-bar i { background: var(--accent); }
.ai-time.with .t-bar i { width: var(--b); }
.t-row:nth-child(2) .t-bar i { transition-delay: 0.05s; } .t-row:nth-child(3) .t-bar i { transition-delay: 0.1s; }
.t-row:nth-child(4) .t-bar i { transition-delay: 0.15s; } .t-row:nth-child(5) .t-bar i { transition-delay: 0.2s; }
.t-row:nth-child(6) .t-bar i { transition-delay: 0.25s; } .t-row:nth-child(7) .t-bar i { transition-delay: 0.3s; }
.t-say { position: relative; min-height: 2.6em; margin: 0; font-family: var(--display); font-weight: 800; font-stretch: var(--wdth-tight); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.1; }
.t-say span { position: absolute; inset: 0 auto auto 0; opacity: 0; transition: opacity 0.4s ease; }
.t-say span.on { opacity: 1; }
.ai-time.with .t-say span[data-say="1"] { color: var(--accent); }
.t-note { position: absolute; right: clamp(22px, 2.6vw, 36px); bottom: 14px; font-family: "Bebas Neue", sans-serif; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-3); }
@media (max-width: 880px) { .t-row { grid-template-columns: 1fr; gap: 6px; } .t-say { min-height: 3.6em; } }
@media (prefers-reduced-motion: reduce) { .t-bar i, .t-say span { transition: none !important; } }

/* the hours chart matches the height of the text beside it, with more air between its parts */
#ai .split { align-items: stretch; }
.ai-time { align-self: stretch; grid-template-rows: auto 1fr auto; gap: clamp(22px, 2.4vw, 32px); padding: clamp(26px, 3vw, 44px); padding-bottom: clamp(40px, 4vw, 56px); }
.t-rows { align-content: space-between; gap: 16px; }
.t-row { gap: 18px; }
.t-bar { height: 16px; }
.t-row:nth-child(8) .t-bar i { transition-delay: 0.35s; }
/* the text sets the height; the chart fits itself to it */
#ai .split > .stack-m { align-content: start; }
@media (min-width: 881px) {
  .ai-time { contain: size; gap: clamp(16px, 1.8vw, 24px); padding-top: clamp(22px, 2.4vw, 32px); padding-bottom: clamp(34px, 3.4vw, 46px); }
  .t-rows { gap: 8px; }
  .t-say { min-height: 2.3em; }
}
@media (min-width: 881px) and (max-width: 1360px) {
  .ai-time { padding: 20px 24px 30px; gap: 12px; }
  .t-rows { gap: 4px; }
  .t-name { font-size: 14px; }
  .t-bar { height: 12px; }
  .t-say { font-size: 19px; min-height: 2.2em; }
  .t-toggle button { padding: 6px 12px; font-size: 13px; }
}
/* under 1180px the chart sits beneath the text at its natural height */
@media (max-width: 1180px) {
  #ai .split { grid-template-columns: 1fr; }
  .ai-time { contain: none; }
  .t-rows { gap: 12px; }
}

/* ---------- Work: the quote leads, then every partner, then the work ---------- */
.page-hero[data-hero="quote"] { padding-bottom: clamp(56px, 8vh, 96px); }
.wk-quote { margin: 0; font-size: clamp(38px, 4.7vw, 78px); line-height: 0.95; max-width: 19ch; }
.wk-quote .qs { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 56% / 0% 0.08em; transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease; }
.wk-quote .qs.on { background-size: 100% 0.08em; color: var(--ink-3); }
.wk-quote .qm { transition: color 0.6s ease; }
.wk-quote .qm.on { color: var(--accent); }

.wk-partners-head { justify-content: space-between; }
.pl-key { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
.pl-key i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); align-items: center; margin-top: clamp(8px, 1.5vh, 18px); }
.pl { position: relative; display: grid; place-items: center; height: clamp(54px, 5vw, 70px); text-decoration: none; }
.pl img { max-height: 70%; max-width: 78%; width: auto; height: auto; object-fit: contain; opacity: 0.55; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.pl.has-work img { opacity: 0.95; }
.pl-type { font-family: "Bebas Neue", sans-serif; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: 0.04em; color: var(--ink-2); text-align: center; line-height: 1; }
.pl-dot { position: absolute; right: 6%; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pl.has-work:hover img { transform: translateY(-3px); opacity: 1; }
.pl.has-work::after { content: "See the work \2193"; position: absolute; bottom: -16px; font-size: 12px; color: var(--accent); opacity: 0; transition: opacity 0.3s ease; white-space: nowrap; }
.pl.has-work:hover::after, .pl.has-work:focus-visible::after { opacity: 1; }
.pl:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

.wk-pills { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-top: clamp(4px, 1vh, 10px); }
.wk-pills::-webkit-scrollbar { display: none; }
.wk-pills.overflows { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.wk-pill { flex: none; white-space: nowrap; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px 8px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
.wk-pill:hover { color: var(--ink); border-color: color-mix(in oklch, var(--accent) 60%, transparent); }
.wk-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wk-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 1.8vw, 26px); margin-top: clamp(8px, 1.5vh, 18px); }
.wk-card { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.wk-card[hidden] { display: none; }
.wk-cover { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--g2); }
.wk-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wk-card:hover .wk-cover img { transform: scale(1.04); }
.wk-cover-empty { display: grid; place-items: center; }
.wk-cover-empty img.wk-cover-logo { width: 44%; height: auto; object-fit: contain; opacity: 0.85; }
.wk-cover-type { font-family: var(--display); font-weight: 800; font-stretch: var(--wdth-tight); font-size: clamp(28px, 2.6vw, 40px); color: var(--ink-2); text-align: center; padding: 0 12%; line-height: 1; }
.wk-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wk-name { font-family: var(--display); font-weight: 800; font-stretch: var(--wdth-tight); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: color 0.3s ease; }
.wk-card:hover .wk-name { color: var(--accent); }
.wk-cat { flex: none; color: var(--ink-3); }
.wk-card.enter { animation: rise 0.5s var(--ease-out) both; }
.wk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }

@media (max-width: 1100px) { .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 880px) {
  .wk-grid { grid-template-columns: 1fr 1fr; }
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .wk-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wk-quote .qs, .wk-quote .qm, .wk-cover img, .pl img { transition: none !important; } .wk-card.enter { animation: none; } }

/* ---------- Work, round two: full-width quote, the Services logo grid, a seamless work grid ---------- */
.page-hero[data-hero="quote"] { padding-bottom: clamp(48px, 7vh, 80px); }
.wk-quote { max-width: none; font-size: clamp(44px, 6.1vw, 108px); line-height: 0.92; }

/* every logo sits in the same 700x550 cell, so the grid is even by construction */
.partners { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1vw, 14px) clamp(8px, 1.4vw, 20px); align-items: stretch; }
.pl { height: auto; aspect-ratio: 700 / 550; display: block; }
.pl img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; opacity: 0.5; }
.pl.has-work img { opacity: 0.95; }
.pl-dot { right: 10%; top: 12%; }
.pl.has-work::after { bottom: 2%; left: 50%; transform: translateX(-50%); }

/* the work: tiles touch; each is its brand's mark, dimmed, until its video cover lands */
.wk-grid { gap: 0; }
.wk-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--g1); box-shadow: inset 0 0 0 0.5px var(--line); gap: 0; }
.wk-card:nth-child(even) { background: color-mix(in oklch, var(--g1) 55%, var(--g2)); }
.wk-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-mark { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); opacity: 0.22; transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.wk-mark-type { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 12%; text-align: center; font-family: var(--display); font-weight: 800; font-stretch: var(--wdth-tight); font-size: clamp(24px, 2.2vw, 34px); line-height: 1; color: var(--ink); opacity: 0.22; transition: opacity 0.4s ease; }
.wk-over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 60px clamp(16px, 1.6vw, 24px) clamp(14px, 1.4vw, 20px);
  background: linear-gradient(180deg, transparent, rgba(8, 10, 10, 0.82)); transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.wk-card::before { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 10, 0.45); opacity: 0; transition: opacity 0.4s ease; z-index: 1; }
.wk-over { z-index: 2; }
.wk-card:hover::before, .wk-card:focus-visible::before { opacity: 1; }
.wk-card:hover .wk-over, .wk-card:focus-visible .wk-over { transform: none; }
.wk-card:hover .wk-mark { opacity: 0.12; transform: translate(-50%, -54%); }
.wk-card:hover .wk-mark-type { opacity: 0.12; }
.wk-over .wk-name { color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); }
.wk-over .wk-cat { color: var(--accent); }
.wk-card:hover .wk-name { color: var(--ink); }
.wk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
@media (hover: none) { .wk-over { transform: none; } }   /* touch screens: the name shows without a hover */

@media (max-width: 1100px) { .partners { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 880px) { .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* every partner logo is full white; the dot alone marks the ones with work on the page (Sean) */
.pl img, .pl.has-work img { opacity: 1; }

/* Work hero: the monitor sits quieter behind the quote */
.threads.monitor { -webkit-mask-image: none; mask-image: none; }
.hr-read { position: absolute; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(18px, 3vh, 32px); z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-3); font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; transition: color 0.5s ease; pointer-events: none; }
.hr-num { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.hr-unit, .hr-heart { font-size: 14px; }
.hr-read.up { color: var(--accent); }
.hr-read.up .hr-heart { animation: hr-beat 0.38s ease-in-out infinite; }
@keyframes hr-beat { 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .hr-read.up .hr-heart { animation: none; } }
.page-hero[data-hero="quote"] { padding-bottom: clamp(150px, 20vh, 220px); }
/* the monitor sits above the hero's bottom fade, and the quote above the monitor */
.page-hero[data-hero="quote"]::after { display: none; }
.threads.monitor { z-index: 0; }
.page-hero[data-hero="quote"] .wrap { position: relative; z-index: 1; }
/* the eyebrow is gone and the quote rides up by its space (--lift); the hero and the monitor stay put */
.page-hero[data-hero="quote"] { --lift: calc(clamp(20px, 3vh, 32px) + 16px); padding-bottom: calc(clamp(150px, 20vh, 220px) + var(--lift)); }

/* ================= client pages (work detail): Wawa first, Option B tabs ================= */
.cs-top { padding-top: clamp(120px, 16vh, 170px); padding-bottom: clamp(36px, 5vh, 56px); }
.cs-top .textlink { color: var(--ink-3); text-decoration: none; font-size: 15px; }
.cs-top .textlink:hover { color: var(--accent); }
.cs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }   /* the meta column starts mid-page: at 1.2fr / 0.8fr its lede ran four tight lines (Sean, 2026-10-13) */
.cs-head .lede { color: var(--ink-2); max-width: 40ch; }
.cs-meta { display: grid; gap: 14px; }
.cs-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; color: var(--ink-2); }
.cs-index { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-index a { white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 6px; transition: color 0.3s ease, border-color 0.3s ease; }
.cs-index a:hover { color: var(--ink); border-color: var(--accent); }

.cs-body { padding-top: 0; }
/* the work on white: below the hero, a case study can sit on white, the way print and product shots were made to be seen.
   The tokens flip, so the tabs, pills, arrows and labels follow; the teal deepens to hold contrast on white.
   Scoped as tight as the page rhythm above, which sets every beat's --bg */
.page main > .beat.cs-body--light { --bg: #fff; --bg-2: oklch(0.965 0.002 210); --bg-3: oklch(0.93 0.003 210);
  --ink: oklch(0.2 0.006 210); --ink-2: oklch(0.36 0.008 210); --ink-3: oklch(0.5 0.01 210); --line: oklch(0.88 0.004 210);
  --accent: #78c3b3; --accent-strong: #5fb3a2; --on-accent: oklch(0.2 0.01 200); background: var(--bg); color: var(--ink); }   /* the house teal on white too (Sean, 2026-10-04: the darker #2a7d6d read as green); dark type on its pills */
.cs-body--light .bx-real { background: none; }
/* a body in the client's own colour: EthJets' purple (#3c014a, from its brand backgrounds), its teal for the accent */
.page main > .beat.cs-body--ethjets { --bg: #3c014a; --bg-2: #4a0a5a; --bg-3: #571466; --line: rgb(255 255 255 / 0.16);
  --ink-2: oklch(0.86 0.03 320); --ink-3: oklch(0.74 0.04 320); --accent: #3ec6ab; --accent-strong: #5fd3bc; --on-accent: #1d0626;
  background: var(--bg); color: var(--ink); }   /* the 3D pieces sit on the white too; their renderers draw clear, with their own floor shadow */
.cs-tabs { display: flex; gap: clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); position: sticky; top: 68px; z-index: 20; background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tabs button { flex: none; font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 18px 0 14px; cursor: pointer; text-align: left; display: grid; gap: 4px; color: var(--ink-3); transition: color 0.3s ease, border-color 0.3s ease; }
.cs-tabs button .lbl { color: inherit; }
.cs-tabs button .hd { font-size: clamp(22px, 2vw, 30px); color: inherit; }
.cs-tabs button:hover { color: var(--ink-2); }
.cs-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cs-tabs button[aria-selected="true"] .lbl { color: var(--accent); }
.cs-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cs-panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: clamp(36px, 5vh, 64px); padding-top: clamp(36px, 5vh, 56px); animation: rise 0.5s var(--ease-out) both; }   /* min-width 0: a wide piece can't stretch the column past the page */
.cs-panel[hidden] { display: none; }
.cs-panel > .stack-s { grid-template-columns: minmax(0, 1fr); gap: 16px; }

.cs-proj-head { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.cs-num { font-family: var(--display); font-weight: 800; font-stretch: var(--wdth-tight); font-size: clamp(56px, 6vw, 92px); line-height: 0.8; color: var(--accent); }
.cs-proj-head .hd-xl { font-size: clamp(40px, 4.6vw, 76px); }
.cs-proj-head .lede { color: var(--ink-2); }
.cs-made { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-made .chip { border: 1px solid color-mix(in oklch, var(--accent) 50%, transparent); color: var(--accent-strong); border-radius: 999px; padding: 5px 12px 4px; font-size: 13px; }
.cs-hero { margin: 0; border-radius: var(--radius); overflow: hidden; }
.cs-hero img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* modules */
.m-switch, .m-rail, .m-flip, .m-strip, .m-pair { min-width: 0; }
.m-switch { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; }
.m-switch-main { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: #ece8de; }
.m-switch-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-switch-list { display: grid; gap: 10px; align-content: start; }
.m-switch-list button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: #ece8de; opacity: 0.6; transition: opacity 0.3s ease, border-color 0.3s ease; }
.m-switch-list button:hover { opacity: 0.9; }
.m-switch-list button.on { border-color: var(--accent); opacity: 1; }
.m-switch-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-flip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); perspective: 1400px; }
.m-card { position: relative; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; border: 0; padding: 0; background: none; }
.m-card:hover, .m-card.flipped { transform: rotateY(180deg); }
.m-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.m-card img + img { transform: rotateY(180deg); }
.m-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.m-process { position: relative; aspect-ratio: 16 / 9; overflow: hidden; user-select: none; background: #fff; border-radius: var(--radius); }
.m-process img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.m-process .after { clip-path: inset(0 0 0 var(--x, 50%)); background: #fff; }
.m-process .line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: var(--accent); }
.m-process .tag { position: absolute; top: 14px; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; font-size: 14px; background: var(--g0); color: var(--ink); padding: 5px 10px 3px; border-radius: 999px; }
.m-process input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.m-rail-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.m-rail-track::-webkit-scrollbar { display: none; }
.m-rail-track.drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.m-rail-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.m-rail-track figure { flex: none; width: min(32vw, 420px); margin: 0; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: #fff; }
.m-rail-track img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; pointer-events: none; }
.m-rail-ctl { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.m-rail-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; font-size: 17px; transition: border-color 0.3s ease, background-color 0.3s ease; }
.m-rail-ctl button:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.m-rail-ctl button:disabled { opacity: 0.3; cursor: default; }
.m-rail-count { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; font-size: 16px; color: var(--ink-3); margin-left: 6px; min-width: 4ch; }
.m-rail-bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.m-rail-bar i { position: absolute; top: 0; bottom: 0; background: var(--accent); left: var(--a, 0); width: var(--w, 20%); }
.m-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.m-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.m-pair figure, .m-strip figure { margin: 0; display: grid; gap: 10px; }
.m-pair img, .m-strip img { width: 100%; display: block; border-radius: var(--radius); background: #fff; }
.m-pair figcaption, .m-strip figcaption { color: var(--ink-3); font-size: 14px; }

.cs-next { display: flex; justify-content: flex-end; align-items: end; gap: 20px; text-align: right; text-decoration: none; color: inherit; border-top: 1px solid var(--line); padding-top: 26px; }   /* next client sits right, where you'd go forward */
.cs-next .hd { transition: color 0.3s ease; }
.cs-next:hover .hd { color: var(--accent); }
.cs-next .small { color: var(--ink-3); }

@media (max-width: 880px) {
  .cs-head, .cs-proj-head { grid-template-columns: 1fr; }
  .cs-num { font-size: 56px; }
  .m-switch { grid-template-columns: 1fr; }
  .m-switch-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m-flip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-rail-track figure { width: 78vw; }
  .m-pair, .m-strip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .m-card, .cs-panel { transition: none !important; animation: none !important; } }

/* client header, round two: the logo leads on the left; the line and the services sit to its right */
.cs-head { align-items: center; }
.cs-logo { margin: 0; }
.cs-logo img { display: block; width: clamp(200px, 26vw, 380px); height: auto; }
.cs-meta { gap: 12px; }
.cs-meta .lede { margin: 0; max-width: 46ch; color: var(--ink); }
.cs-meta > div { margin-top: 6px; }
@media (max-width: 880px) { .cs-logo img { width: min(62vw, 260px); } }
/* the services line sits a step below the description so it does not compete */
.cs-meta > div > span:last-child { font-size: 15px; color: var(--ink-3); }

/* ================= Wawa kids meal boxes ================= */
.bx-block { gap: 18px; }
.bx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.bx-head .small { color: var(--ink-3); margin: 0; }
.bx-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.bx-pills::-webkit-scrollbar { display: none; }
.bx-pill { flex: none; white-space: nowrap; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 7px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
.bx-pill span { opacity: 0.55; margin-left: 4px; }
.bx-pill:hover { color: var(--ink); border-color: color-mix(in oklch, var(--accent) 60%, transparent); }
.bx-pill[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bx-pill[aria-pressed="true"] span { opacity: 0.7; }

.bx-show { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; background: radial-gradient(ellipse at 50% 85%, color-mix(in oklch, var(--accent) 12%, var(--g2)) 0%, var(--g1) 70%); border-radius: var(--radius); }
.bx-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in oklch, var(--g0) 60%, transparent); color: var(--ink); font-size: 20px; cursor: pointer; justify-self: center; transition: border-color 0.3s ease, background-color 0.3s ease; z-index: 2; }
.bx-arrow:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 18%, var(--g0)); }
.bx-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bx-stage { position: relative; height: clamp(360px, 42vw, 560px); perspective: 1600px; perspective-origin: 50% 35%; }
.box3d { position: absolute; left: 50%; top: 82%; width: 0; height: 0; transform-style: preserve-3d; --s: 0.82; --spin: 0deg; }
.bx-show .box3d { transform: scale(var(--s)) rotateX(-13deg) rotateY(calc(-36deg + var(--spin))); transition: transform 0.75s cubic-bezier(0.65, 0, 0.25, 1); }
.bx-face { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-image: var(--sheet); background-size: 1445px 570px; background-repeat: no-repeat;
  -webkit-mask-image: url(img/wawa/boxes/mask.png); mask-image: url(img/wawa/boxes/mask.png); -webkit-mask-size: 1445px 570px; mask-size: 1445px 570px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.box3d::after { content: ""; position: absolute; left: -240px; top: -40px; width: 480px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%); transform: rotateX(90deg); pointer-events: none; }
.bx-meta { display: flex; justify-content: space-between; gap: 12px; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; }
.bx-series { color: var(--accent); font-size: 20px; }
.bx-count { color: var(--ink-3); font-size: 16px; white-space: pre; }

.bx-turn { cursor: grab; border-radius: var(--radius); background: radial-gradient(ellipse at 50% 85%, color-mix(in oklch, var(--accent) 10%, var(--g2)) 0%, var(--g1) 70%); touch-action: pan-y; outline: none; }
.bx-turn.dragging { cursor: grabbing; }
.bx-turn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bx-turn .box3d { --s: 0.9; transform: rotateX(-12deg) rotateY(-32deg); scale: var(--s); }

/* games: a deck */
.gm-deck { display: grid; gap: 18px; justify-items: center; }
.gm-stack { position: relative; width: min(100%, 720px); aspect-ratio: 640 / 386; }
.gm-card { position: absolute; inset: 0; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
  transform: translate(calc(var(--d, 0) * 14px), calc(var(--d, 0) * -10px)) rotate(calc(var(--d, 0) * 2.2deg)) scale(calc(1 - var(--d, 0) * 0.03));
  opacity: calc(1 - var(--d, 0) * 0.18); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
.gm-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.65, 0, 0.25, 1); }
.gm-card.turned img { transform: rotate(180deg); }
.gm-ctl { display: flex; align-items: center; gap: 10px; }
.gm-ctl button:not(.gm-answers) { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; font-size: 17px; }
.gm-ctl button:not(.gm-answers):hover { border-color: var(--accent); }
.gm-count { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; color: var(--ink-3); min-width: 5ch; font-size: 16px; }
.gm-answers { font: inherit; font-size: 14px; font-weight: 500; border: 1px solid color-mix(in oklch, var(--accent) 60%, transparent); color: var(--accent-strong); background: none; border-radius: 999px; padding: 9px 16px 8px; cursor: pointer; }
.gm-answers[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* patterns: a wall of chips */
.pt-wall { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.pt-chip { aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--img) center / 180% auto; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-size 0.6s ease, box-shadow 0.3s ease; }
.pt-chip:hover, .pt-chip:focus-visible { transform: translateY(-6px) scale(1.12); background-size: 230% auto; box-shadow: 0 0 0 2px var(--accent), 0 18px 30px -14px rgba(0, 0, 0, 0.8); outline: none; }
@media (max-width: 880px) {
  .bx-show { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .bx-arrow { width: 40px; height: 40px; font-size: 16px; }
  .box3d { --s: 0.5; }
  .bx-turn .box3d { --s: 0.55; }
  .pt-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .bx-show .box3d, .gm-card, .gm-card img, .pt-chip { transition: none !important; } }
.bx-face.bx-gable { -webkit-mask-image: none; mask-image: none; clip-path: polygon(-1px 171px, 331px 171px, 165px -2px); transform-origin: 0 0; }
.bx-inside { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(180deg, #cfc3ad, #a8997f); }
.bx-in-tri { clip-path: polygon(0 170px, 330px 170px, 165px 0); background: linear-gradient(180deg, #e2d8c6, #c3b59c); }
.bx-in-floor { background: #8f8168; }
.bx-in-roof { background: linear-gradient(0deg, #b5a78e, #d9cdb8); }

/* Wawa kids meals: four box mockups in a line that slide together as you scroll */
.cs-body:has(.kl-line) { overflow-x: clip; }
.kl-line { position: relative; aspect-ratio: 1144 / 440; }
.kl-box { position: absolute; left: var(--x); bottom: var(--b); width: var(--w); max-width: none; height: auto; }

/* Wawa kids meals: the patterns, one square swatch each */
.sw-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px) clamp(8px, 1vw, 14px); }
.sw-grid figure { margin: 0; display: grid; gap: 8px; }
.sw-grid img { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: 2px; }
.sw-grid figcaption { font-family: "Bebas Neue", sans-serif; font-size: 14px; letter-spacing: 0.06em; color: var(--ink-3); }
@media (max-width: 880px) { .sw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Wawa kids meals: the big box (WebGL); the swatches above are its buttons */
.sw-grid button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.sw-grid button:hover { transform: translateY(-3px); }
.sw-grid button[aria-pressed="true"] { outline-color: var(--accent); }
.sw-grid button:focus-visible { outline-color: var(--ink); }
.bx-real { position: relative; height: clamp(374px, 46.3vw, 641px); cursor: grab; touch-action: pan-y; border-radius: var(--radius); outline: none;
  background: radial-gradient(ellipse 60% 55% at 50% 58%, color-mix(in oklch, var(--ink) 9%, var(--g1)) 0%, var(--g1) 75%); }
.bx-real canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.bx-real.ready canvas { opacity: 1; }
.bx-real.dragging { cursor: grabbing; }
.bx-real:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bx-real-hint { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.08em; font-size: 14px; color: var(--ink-3); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sw-grid button, .bx-real canvas { transition: none; } }

/* Wawa kids meals: the games, stepped through with arrows */
.gv { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px 18px; outline: none; }
.gv-frame { margin: 0; justify-self: center; width: min(100%, 980px); aspect-ratio: 1280 / 772; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85); }
.gv-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.22s ease; }
.gv-frame img.out { opacity: 0; }
.gv-arrow { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; justify-self: center; transition: border-color 0.3s ease, background-color 0.3s ease; }
.gv-arrow:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 18%, var(--g0)); }
.gv-arrow:focus-visible, .gv:focus-visible .gv-frame { outline: 2px solid var(--accent); outline-offset: 3px; }
.gv-meta { grid-column: 2; display: flex; justify-content: space-between; width: min(100%, 980px); justify-self: center; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; }
.gv-arrow svg { width: 22px; height: 22px; display: block; }
.gv-title { color: var(--accent); font-size: 18px; }
.gv-count { color: var(--ink-3); font-size: 16px; }
@media (max-width: 880px) {
  .gv { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px 8px; }
  .gv-arrow { width: 40px; height: 40px; }
  .gv-arrow svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gv-frame img { transition: none; } }

/* Wawa kids meals: the drawings */
.kd { margin: 0; }
.kd img { display: block; width: 100%; height: auto; }

/* Wawa kids meals: the trading cards, one at a time, front and back */
.tc { display: grid; gap: 18px; }
.tc-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tc-tabs::-webkit-scrollbar { display: none; }
.tc-tab { flex: none; font-family: "Bebas Neue", sans-serif; font-size: 19px; letter-spacing: 0.06em; color: var(--ink-3); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 0 8px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; }
.tc-tab:hover { color: var(--ink); }
.tc-tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tc-tab:focus-visible, .tc-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-pill { flex: none; white-space: nowrap; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 7px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
.tc-pill:hover { color: var(--ink); border-color: color-mix(in oklch, var(--accent) 60%, transparent); }
.tc-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tc-pill[hidden] { display: none; }
.tc-stage { display: flex; justify-content: center; gap: clamp(16px, 3vw, 40px); margin-top: clamp(10px, 2vw, 24px); }
.tc-side { margin: 0; width: min(44%, 340px); display: grid; gap: 10px; }
.tc-card { aspect-ratio: 625 / 875; border-radius: 4.8% / 3.43%; overflow: hidden; box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04); }   /* a real card's 1/8in corner */
.tc-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
.tc-card img.out { opacity: 0; }
.tc-side figcaption { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; font-size: 15px; color: var(--ink-3); text-align: center; }
@media (max-width: 880px) { .tc-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; } .tc-pills::-webkit-scrollbar { display: none; } }

/* Wawa kids meals: the sleeve, titled like the games */
.slv { display: grid; justify-items: center; gap: 12px; }
.slv-frame { margin: 0; width: min(100%, 640px); }
.slv-frame img { display: block; width: 100%; height: auto; }
.slv-meta { width: min(100%, 640px); font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) { .tc-card img, .tc-tab, .tc-pill { transition: none; } }

/* Wawa apparel: the tees on a white panel, one at a time (the games module's arrows and label) */
.tv { --tvw: min(100%, 980px, calc((100svh - 250px) * 1.25)); }   /* the panel, arrows and label fit one screen under the nav and tabs */
.tv .gv-meta { width: var(--tvw); }
.tv-frame { margin: 0; justify-self: center; width: var(--tvw); aspect-ratio: 5 / 4; display: grid; place-items: center; border-radius: 6px; background: #fff; overflow: hidden; }   /* true white, like the mockups these tees were cut from */
.tv-frame { position: relative; }
.tv-frame img { position: absolute; inset: 0; display: block; height: 100%; width: 100%; object-fit: contain; transition: opacity 0.34s ease; }   /* held to the box, never cropped: each tee is already centred at one size on its own white square */
.tv-frame img.under { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .tv-frame img { transition: none; } }   /* two layers in the same spot: the next tee dissolves in over the last, the viewer never empties */
@media (prefers-reduced-motion: reduce) { .tv-frame img { transition: none; } }
@media (max-width: 880px) {   /* phones: the tee takes the full width, the arrows sit under it */
  .tv { grid-template-columns: 1fr auto auto; --tvw: 100%; }
  .tv-frame { grid-column: 1 / -1; grid-row: 1; }
  .tv .gv-meta { grid-column: 1; grid-row: 2; align-self: center; }
  .tv [data-tv-prev] { grid-column: 2; grid-row: 2; }
  .tv [data-tv-next] { grid-column: 3; grid-row: 2; }
}

/* Wawa merchandise: the hoodies two by two, and the blankets side by side, on the page; both draw together as you scroll to them */
.hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 2vw, 28px) clamp(12px, 3vw, 44px); width: min(100%, 980px); margin: 0 auto; }
.hl img, .bk img { display: block; width: 100%; height: auto; }
.bk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 32px); padding: 0 clamp(18px, 8vw, 160px); }
/* the pins: the button pack and the enamel pin photo, side by side */
.pn { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(12px, 3vw, 44px); align-items: center; width: min(100%, 1060px); margin: 0 auto; }
.pn img { display: block; width: 100%; height: auto; }
.pn img + img { border-radius: 6px; }

/* Wawa mascots: the Phanatic bag, the kids meal box's stage, taller for a bag */
.bx-real.bg-real { height: clamp(460px, 56vw, 760px); }
.bx-real.bw-real { height: clamp(520px, 60vw, 780px); }
.bw-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 9vh, 110px); }   /* the box, then the badge under it */
.bdg { display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); touch-action: pan-y; }
.bdg-tilt { width: 100%; max-width: 520px; will-change: transform; }
.bdg-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55)); }
.bdg-sheen { mix-blend-mode: screen; }
@media (max-width: 860px) { .bdg { padding-top: 0; } .bdg-tilt { max-width: 420px; } }
.bg-meta { grid-column: auto; margin-top: -6px; }   /* the caption style is borrowed from the games grid, where it sits in column 2 */

/* Wawa mascots: the two specialty cups, turning together through three views */
.cp { display: grid; gap: clamp(8px, 1.5vw, 18px); outline: none; cursor: grab; touch-action: pan-y; user-select: none; }
.cp.dragging { cursor: grabbing; }
.cp-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 4vw, 64px); width: min(100%, 700px, calc((100svh - 330px) * 0.95 + 64px)); margin: 0 auto; }   /* both cups, names and arrows fit one screen */
.cp-cup { margin: 0; display: grid; justify-items: center; gap: 4px; }
.cp-views { position: relative; width: 100%; aspect-ratio: 760 / 1595; }
.cp-views img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; -webkit-user-drag: none; }
.cp-views img.on { opacity: 1; }
.cp-cup figcaption { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; font-size: 18px; }
.cp-ctl { display: flex; justify-content: center; align-items: center; gap: 18px; }
.cp-ctl .gv-arrow:disabled { opacity: 0.3; cursor: default; }
.cp-dots { display: flex; gap: 8px; }
.cp-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color 0.3s ease; }
.cp-dots i.on { background: var(--accent); }
.cp:focus-visible .cp-stage { outline: 2px solid var(--accent); outline-offset: 6px; }
.cp-photo { margin: 0; }
.cp-photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .cp-views img { transition: none; } }

/* Wawa 60th anniversary: the deck's tan is the hero behind the marks and the hoagie paper */
.sx-tan { --tan: #f2e1cb; background: var(--tan); border-radius: 6px; overflow: hidden; }
.sx-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 5vw, 80px); align-items: center; padding: clamp(28px, 6vw, 88px) clamp(24px, 8vw, 140px); }
.sx-logos img { display: block; width: 100%; height: auto; }
.sx-paper { position: relative; aspect-ratio: 16 / 8.6; }
.sx-sheet { position: absolute; right: -4%; top: 9%; width: 70%; height: auto; box-shadow: 0 18px 40px -22px rgba(80, 50, 20, 0.55); }
.sx-hoagie { position: absolute; left: 2%; top: 26%; width: 58%; height: auto; z-index: 1; }
.sx-meta { grid-column: auto; width: 100%; margin-top: -8px; }   /* flush with the panel above */
/* the pennants, strung */
.bn-wrap { display: grid; gap: clamp(8px, 2vw, 20px); }
.bn { position: relative; aspect-ratio: 1144 / 330; }
.bn-two { display: none; aspect-ratio: 350 / 200; }
.bn-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bn-line path { fill: none; stroke: color-mix(in oklch, var(--ink) 55%, transparent); vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.bn-p { position: absolute; left: var(--x); top: var(--y); width: 13.5%; translate: -50% 0; rotate: var(--r); transform-origin: 50% 0; }
.bn-p img { display: block; width: 100%; height: auto; transform-origin: 50% 0; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35)); }
.bn-two .bn-p { width: 27%; }
@media (max-width: 700px) { .bn-one { display: none; } .bn-two { display: block; } }
/* the signs: a landscape and a portrait per offer, switched by pills */
.sg { display: grid; gap: 16px; }
.sg-stage { display: grid; }
.sg-set { grid-area: 1 / 1; display: grid; grid-template-columns: 1.816fr 0.642fr;   /* the signs' own proportions, so both stand the same height */ gap: clamp(10px, 2vw, 24px); align-items: end; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.sg-set.on { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.sg-set img { display: block; width: 100%; height: auto; border-radius: 3px; }
.sg-set img + img { aspect-ratio: 963 / 1500; object-fit: cover; }
.sg-set img:first-child { aspect-ratio: 1500 / 826; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .sg-set { transition: none; } }

/* ---------- Cage Fury, brand identity ---------- */
/* switchers (the marks, the gloves): options on the left, one piece on the stage; cffc.js cuts the new one in on the brand's slant */
.cf-sw { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); align-items: center; }
.cf-ctl { display: grid; gap: 28px; align-content: center; }
.cf-ctl-title { margin: 0; font: 400 26px/1 "Bebas Neue", sans-serif; letter-spacing: 0.04em; color: var(--ink); }
.cf-set { display: grid; gap: 12px; }
.cf-set-opts { display: grid; gap: 8px; }
.cf-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 15px; cursor: pointer; text-align: left; transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.cf-opt:hover { border-color: color-mix(in oklch, var(--accent) 60%, var(--line)); color: var(--ink); }
.cf-opt[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: color-mix(in oklch, var(--accent) 12%, transparent); }
.cf-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cf-opt img { height: 26px; width: auto; display: block; }
.cf-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); flex: none; }
.cf-dot-gold { background: linear-gradient(135deg, #a8792c, #f0cf86 45%, #b98a3a 70%, #e3bd6c); }
.cf-stage { position: relative; width: 100%; justify-self: center; }
.cf-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transform: scale(0.985); transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.cf-layer.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cf-layer { transition: none; transform: none; } }
.cf-sw-marks .cf-layer { padding: 9% 10%; }
.cf-sw-gloves .cf-stage { max-width: min(560px, calc((100svh - 280px) * 0.875)); }   /* the gloves and their label fit one screen under the nav and tabs */
.cf-sw-marks .cf-stage { max-width: min(900px, calc((100svh - 280px) * 1.6)); }
/* the battle cry, its own beat: three words stacked on the italic's slant, centred in the column */
.cf-cry { --h: clamp(48px, 7.5vw, 124px); display: grid; justify-content: center; justify-items: start; padding: clamp(60px, 16vh, 180px) 0; overflow-x: clip; }
.cf-cry img { display: block; height: var(--h); width: auto; aspect-ratio: var(--ar); margin-left: calc((2 - var(--i)) * var(--h) * 0.24); }
.cf-cry img + img { margin-top: calc(var(--h) * 0.14); }
/* the cage: without motion it's the finished render; with it, the stage holds under the tabs while the scroll builds it */
.cf-build-art { position: relative; aspect-ratio: 2400 / 1450; width: min(100%, 1180px); margin: 0 auto; }
.cf-build-art > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-piece, .cf-lines { display: none; }
.cf-build.live { height: 300vh; }
.cf-build.live .cf-build-stage { position: sticky; top: 150px; height: calc(100svh - 160px); display: grid; align-content: center; gap: 14px; }
.cf-build.live .cf-build-art { width: min(100%, calc((100svh - 240px) * 1.655)); }
.cf-build.live .cf-piece { display: block; opacity: 0; }
.cf-build.live .cf-full { opacity: 0; }
.cf-build.live .cf-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #d2ad62; stroke-width: 1.25; stroke-linejoin: round; }
.cf-lines path { vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* the people */
.cf-crew { display: grid; grid-template-columns: 499fr 481fr; gap: clamp(24px, 6vw, 96px); width: min(100%, calc((100svh - 240px) * 0.77)); margin: 0 auto; }
.cf-crew img { display: block; width: 100%; height: auto; }
.cf-rg-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(8px, 2vw, 28px); width: min(100%, 1100px); margin: 0 auto; background: var(--bg); }   /* the backdrop the lighten blend sees (the tab panel is its own stacking context) */
.cf-rg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 1200px); }
@media (max-width: 760px) { .cf-rg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }
.cf-rg-fig { margin: 0; display: grid; gap: 10px; justify-items: center; }
.cf-rg-fig img, .cf-rg-fig video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; mix-blend-mode: lighten; }   /* the studio's black drops out against the page */
.cf-rg-fig video.alpha { mix-blend-mode: normal; }   /* already cut out: true blacks stay black */
.cf-rg-fig figcaption { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em; color: var(--ink-3); font-size: 16px; }
.cf-head { margin: 0 0 calc(16px - clamp(36px, 5vh, 64px)); font: 400 18px/1.1 "Bebas Neue", sans-serif; letter-spacing: 0.06em; }   /* pulls the module under it up to 16px; the panel gap stays above */
.cf-head, .cf-sw-gloves { margin-top: clamp(40px, 9vh, 110px); }   /* breathing room between the gloves, the polos and the ring girls */
.cf-build .cf-head { margin: 0 auto; width: min(100%, calc((100svh - 240px) * 1.655)); }
@media (max-width: 760px) {
  .cf-sw { grid-template-columns: minmax(0, 1fr); }
  .cf-ctl { order: 2; display: flex; flex-wrap: wrap; gap: 18px 24px; }
  .cf-ctl-title { flex-basis: 100%; }
  .cf-set-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .cf-opt { padding: 8px 12px; font-size: 14px; }
  .cf-build.live { height: 220vh; }
  .cf-build.live .cf-build-stage { top: 130px; height: calc(100svh - 140px); }
}

/* ---------- Cage Fury, broadcast: a monitor and the show's rundown ---------- */
.bc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.bc-monitor { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.bc-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-tally { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 10px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff;
  font: 400 13px/1 "Bebas Neue", sans-serif; letter-spacing: 0.1em; opacity: 0; transition: opacity 0.3s ease; }
.bc-tally i { width: 7px; height: 7px; border-radius: 50%; background: #e2383f; box-shadow: 0 0 8px #e2383f; }
.bc.playing .bc-tally { opacity: 1; }
.bc-rundown { display: grid; gap: 12px; }
.bc-list { list-style: none; margin: 0; padding: 0 6px 0 0; display: grid; gap: 18px; max-height: var(--bc-h, 520px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.bc-seg { display: grid; gap: 6px; }
.bc-seg ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bc-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-2); font: inherit; font-size: 15px; text-align: left; cursor: pointer; overflow: hidden; transition: background-color 0.2s ease, color 0.2s ease; }
.bc-item img { display: none; }
.bc-item:hover { background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--ink); }
.bc-item[aria-pressed="true"] { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--ink); }
.bc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bc-num { font: 400 14px/1 "Bebas Neue", sans-serif; letter-spacing: 0.06em; color: var(--ink-3); }
.bc-item[aria-pressed="true"] .bc-num { color: var(--accent); }
.bc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-dur { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bc-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; }
.bc-item[aria-pressed="true"] .bc-prog { opacity: 1; }
@media (max-width: 860px) {
  .bc { grid-template-columns: minmax(0, 1fr); }
  .bc-list { max-height: none; overflow: visible; padding: 0; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 14px; }
  .bc-seg ol { grid-auto-flow: column; grid-auto-columns: 150px; gap: 8px; }
  .bc-item { grid-template-columns: 1fr; gap: 6px; padding: 0 0 8px; background: none !important; }
  .bc-item img { display: block; width: 100%; height: auto; border-radius: 4px; outline: 2px solid transparent; outline-offset: -2px; }
  .bc-item[aria-pressed="true"] img { outline-color: var(--accent); }
  .bc-num, .bc-dur { display: none; }
  .bc-name { font-size: 13px; }
}

/* ---------- Cage Fury, event print ---------- */
.ep-poster { margin: 0 auto; width: min(100%, 620px, calc((100svh - 220px) * 0.6667)); }
.ep-poster img { display: block; width: 100%; height: auto; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
/* the program: --o runs 0 (closed, the cover centred) to 1 (open on the spread); a tap toggles it and --o transitions */
@property --o { syntax: "<number>"; inherits: true; initial-value: 0; }
.ep-book-wrap { display: grid; justify-items: center; gap: 14px; padding: 8px 0 12px; }
.ep-book { --o: 0; --pw: min(46vw, 440px, calc((100svh - 260px) * 0.6455)); display: grid; justify-content: center; perspective: 2600px; padding: 0; border: 0; background: none; cursor: pointer; transition: --o 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.ep-book[aria-pressed="true"] { --o: 1; }
.ep-book:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.ep-book-in { position: relative; display: block; width: calc(var(--pw) * 2); aspect-ratio: 2200 / 1704; transform: translateX(calc(var(--pw) * -0.5 * (1 - var(--o)))); transform-style: preserve-3d; }
.ep-page { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; display: block; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.ep-cover { display: block; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform: rotateY(calc(var(--o) * -180deg)); transform-style: preserve-3d; }
.ep-face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.ep-inside { transform: rotateY(180deg); }
.ep-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 12%); opacity: calc(1 - var(--o)); }   /* a touch of shade at the spine while it turns */
/* the roll-ups rise out of their stands */
.ep-rollups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3vw, 44px); width: min(100%, 1000px, calc((100svh - 260px) * 4 * 0.401 + 132px)); margin: 0 auto; align-items: end; }
.ep-stand { display: grid; justify-items: center; }
.ep-banner { width: 100%; aspect-ratio: 760 / 1894; overflow: hidden; }
.ep-banner img { display: block; width: 100%; height: 100%; }
.ep-base { display: block; width: 112%; height: 12px; border-radius: 3px; background: linear-gradient(#cfd3d6, #7d8286 55%, #4a4e52); box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.8); }
/* the business card: click to turn it; the pointer tilts it a little and moves the light across the foil */
.ep-card-wrap { display: grid; justify-items: center; gap: 14px; perspective: 1800px; padding: 12px 0; }
.ep-card { --flip: 0deg; --rx: 0deg; --ry: 0deg; --sx: -0.3; width: min(100%, 580px); aspect-ratio: 1400 / 800; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.ep-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.ep-card-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--flip) + var(--ry))); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.ep-card[aria-pressed="true"] { --flip: 180deg; }
.ep-card.tracking .ep-card-in { transition: transform 0.15s linear; }
.ep-face-card { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 50px -25px rgba(0, 0, 0, 0.95); }
.ep-face-card img { display: block; width: 100%; height: 100%; }
.ep-back { transform: rotateY(180deg); }
.ep-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent calc(var(--sx) * 140% - 22%), rgba(255, 238, 190, 0.55) calc(var(--sx) * 140%), transparent calc(var(--sx) * 140% + 22%));
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.ep-hint { font: 400 14px/1 "Bebas Neue", sans-serif; letter-spacing: 0.08em; color: var(--ink-3); }
@media (max-width: 760px) {
  .ep-rollups { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .ep-base { width: 104%; height: 9px; }
  .ep-book { --pw: 44vw; }
}
@media (prefers-reduced-motion: reduce) { .ep-card-in, .ep-book { transition: none; } }

/* ---------- Cage Fury, apparel: the tee chooser (reuses the switcher's layout and options) ---------- */
.tee-stage { aspect-ratio: 1 / 1; max-width: min(640px, calc(100svh - 240px)); border-radius: 6px; overflow: hidden; background: #2b2b2b; }
.tee-stage .cf-layer { transform: none; }
.tee-cfg .cf-set-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tee-cfg .cf-opt { padding: 8px 14px; }
.cf-opt[aria-disabled="true"] { opacity: 0.32; cursor: not-allowed; }
.cf-opt[aria-disabled="true"]:hover { border-color: var(--line); color: var(--ink-2); }
.tee-cfg { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
@media (max-width: 760px) { .tee-cfg { grid-template-columns: minmax(0, 1fr); } }
/* the cancer benefit collection: six designs, one toggle turns them all from tees to hoodies */
.bn-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(40px, 9vh, 110px) 0 calc(16px - clamp(36px, 5vh, 64px)); }
.bn-head .cf-head { margin: 0; }
.bn-toggle { display: flex; gap: 8px; }
.bn-toggle .cf-opt { padding: 7px 16px; }
.bn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 28px) clamp(12px, 3vw, 40px); }
.bn-fig { margin: 0; display: grid; gap: 4px; justify-items: center; }
.bn-stage { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.bn-stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bn-hoodie { opacity: 0; transform: scale(0.97); }
.bn-grid.hoodies .bn-tee { opacity: 0; transform: scale(0.97); }
.bn-grid.hoodies .bn-hoodie { opacity: 1; transform: none; }
.bn-fig figcaption { font: 400 16px/1 "Bebas Neue", sans-serif; letter-spacing: 0.06em; color: var(--ink-3); }
@media (max-width: 760px) { .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bn-stage img { transition: none; } }

/* ---------- Cage Fury, website: the comp scrolling inside a browser window ---------- */
.wb-browser { width: min(100%, 1080px); margin: 0 auto; border-radius: 10px; overflow: hidden; background: #0c0d0e; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.wb-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #1f2224; }
.wb-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3c4043; }
.wb-url { margin: 0 auto; transform: translateX(-26px); padding: 4px 40px; border-radius: 6px; background: #2b2f31; color: var(--ink-3); font-size: 12px; letter-spacing: 0.02em; }
.wb-view { position: relative; aspect-ratio: 16 / 10; overflow-y: auto; }   /* without motion the comp just scrolls inside the window */
.wb-view img { display: block; width: 100%; height: auto; }
.wb.live { height: 360vh; }
.wb.live .wb-stage { position: sticky; top: 150px; height: calc(100svh - 160px); display: grid; align-content: center; }
.wb.live .wb-browser { width: min(100%, 1080px, calc((100svh - 230px) * 1.6)); }
.wb.live .wb-view { overflow: hidden; }
.wb.live .wb-view img { will-change: transform; }
@media (max-width: 760px) { .wb.live { height: 260vh; } .wb.live .wb-stage { top: 130px; height: calc(100svh - 140px); } .wb-view { aspect-ratio: 3 / 4; } }

/* ---------- Thrux (thrux.html, thrux.js): the mark scan, the path to the mark, colour, splash ---------- */
.tx-logo svg { display: block; width: clamp(200px, 26vw, 380px); height: auto; }   /* the same size as the other client logos (.cs-logo img) */
@media (max-width: 880px) { .tx-logo svg { width: min(62vw, 260px); } }
.tx-mark-stage { display: grid; justify-items: center; align-content: center; gap: clamp(24px, 4vh, 44px); padding: clamp(32px, 7vh, 80px) 0; }
.tx-mark-art { position: relative; width: clamp(150px, 17vw, 240px); aspect-ratio: 66 / 96; }
.tx-mark-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tx-scan { display: none; }
.tx-word { width: clamp(210px, 25vw, 340px); height: auto; display: block; }
.tx-mark.live { height: 240vh; --s: 0; --so: 0; --w: 0; }
.tx-mark.live .tx-mark-stage { position: sticky; top: 150px; height: calc(100svh - 160px); padding: 0; }
.tx-mark.live .tx-color { clip-path: inset(calc((1 - var(--s)) * 100%) 0 0 0); }   /* the colour rises from the base as the scan passes */
.tx-mark.live .tx-scan { display: block; position: absolute; left: -35%; right: -35%; height: 2px; top: calc((1 - var(--s)) * 100%); opacity: var(--so);
  background: linear-gradient(90deg, transparent, #02d1c1 30%, #b9fff8 50%, #02d1c1 70%, transparent); box-shadow: 0 0 22px 5px rgba(2, 209, 193, 0.45); pointer-events: none; }
.tx-mark.live .tx-word { clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0); opacity: calc(0.2 + var(--w) * 0.8); }

.tx-path { margin-top: clamp(40px, 9vh, 110px); }
.tx-path.live { height: 380vh; }
.tx-path.live .tx-path-stage { position: sticky; top: 150px; height: calc(100svh - 160px); }
.tx-path .cf-set-opts { counter-reset: none; }
.tx-step .lbl { color: var(--ink-3); margin-right: 2px; }
.tx-step[aria-pressed="true"] .lbl { color: var(--accent); }
.tx-card { max-width: min(980px, calc((100svh - 230px) * 1.33)); border-radius: var(--radius); overflow: hidden; background: #fff; }
.tx-round { margin: 0; }
.tx-round img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.tx-final svg { position: absolute; left: 18%; top: 30%; width: 64%; height: 40%; }
.tx-frame { background: url(img/thrux/guides.webp) 0 0 / 100% 700% no-repeat; }
.tx-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.tx-cells i { background: rgba(22, 25, 26, 0); transition: background-color 0.5s ease; }
.tx-round.on .tx-cells i:not(.lit) { background: rgba(22, 25, 26, 0.62); transition-delay: 0.45s; }   /* the grid shows, then everything but the idea that went on dims */
.tx-cells i.lit { box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.5s ease; }
.tx-round.on .tx-cells i.lit { box-shadow: inset 0 0 0 2px var(--accent); transition-delay: 0.45s; }

.tx-pal { display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 72px); }
.tx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tx-chip { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: 12px; }
.tx-chip i { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tx-chip span { font-size: 15px; color: var(--ink); }
.tx-chip code, .cf-opt code { font: 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); }
.tx-dot { width: 18px; height: 18px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.tx-sw-greys, .tx-sw-splash { margin-top: clamp(28px, 5vh, 56px); }
.tx-sw-greys .cf-stage, .tx-sw-splash .cf-stage { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.tx-sw-splash { margin-top: clamp(40px, 9vh, 110px); }
@media (max-width: 860px) {
  .tx-path.live { height: auto; }
  .tx-path.live .tx-path-stage { position: static; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .tx-cells i, .tx-cells i.lit { transition: none; } }

/* Thrux, UX and strategy: the brief, the user flow scan, the lifecycle, the anatomy of the workspace, the rounds slider */
.tx-brief { display: grid; gap: 18px; max-width: 980px; margin-top: clamp(16px, 3vh, 32px); }
.tx-brief-line { color: var(--ink); max-width: 24ch; }
.tx-brief-sub { color: var(--ink-2); max-width: 58ch; margin: 0; }

.tx-flow-view { overflow-x: auto; border-radius: var(--radius); }
.tx-flow-track { position: relative; height: clamp(360px, 62vh, 700px); aspect-ratio: 2741 / 1030; }
.tx-flow-track svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tx-flow-ghost { opacity: 0.1; }
.tx-vscan { display: none; }
.tx-flow.live { height: 420vh; --h: 0; }
.tx-flow.live .tx-flow-stage { position: sticky; top: 150px; height: calc(100svh - 160px); display: grid; align-content: center; }
.tx-flow.live .tx-flow-view { overflow: hidden; }
.tx-flow.live .tx-flow-track { height: min(700px, calc(100svh - 240px)); will-change: transform; }
.tx-flow.live .tx-flow-main { clip-path: inset(0 calc((1 - var(--h)) * 100%) 0 0); }
.tx-flow.live .tx-vscan { display: block; position: absolute; top: -4%; bottom: -4%; width: 2px; left: calc(var(--h) * 100%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #02d1c1 20%, #b9fff8 50%, #02d1c1 80%, transparent); box-shadow: 0 0 22px 5px rgba(2, 209, 193, 0.4);
  opacity: calc(1 - max(0, var(--h) - 0.97) * 33); }

.tx-steps-block { margin-top: clamp(40px, 9vh, 110px); }
.tx-notes { display: grid; }
.tx-note { grid-area: 1 / 1; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; opacity: 0; transition: opacity 0.3s ease; max-width: 34ch; }
.tx-note.on { opacity: 1; }
.tx-life { background: #fff url(img/thrux/lifecycle.webp) 0 0 / 100% 400% no-repeat; }
.tx-steps-block .tx-card { max-width: min(1000px, calc((100svh - 230px) * 1.96)); }

.tx-anat { margin-top: clamp(40px, 9vh, 110px); }
.tx-screen { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.tx-screen img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tx-hole { position: absolute; border-radius: 4px; box-shadow: 0 0 0 2px #02d1c1, 0 0 0 9999px rgba(12, 14, 15, 0.62); pointer-events: none;
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

.tx-rounds { display: grid; gap: 18px; justify-items: center; }
.tx-rframe { width: min(100%, 1080px, calc((100svh - 300px) * 1.78)); background: url(img/thrux/rounds.webp) 0 0 / 100% 700% no-repeat; }
.tx-slider { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; width: min(100%, 640px); }
.tx-slider input { width: 100%; accent-color: #02d1c1; }
.tx-ticks { grid-column: 2; display: flex; justify-content: space-between; font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); padding: 0 2px; }
@media (max-width: 860px) {
  .tx-steps-block.live { height: auto; }
  .tx-steps-block.live .tx-path-stage { position: static; height: auto; }
  .tx-flow.live { height: 300vh; }
  .tx-flow.live .tx-flow-stage { top: 130px; height: calc(100svh - 140px); }
  .tx-flow.live .tx-flow-track { height: min(420px, calc(100svh - 220px)); }
}
@media (prefers-reduced-motion: reduce) { .tx-hole, .tx-note { transition: none; } }

/* Thrux, App UI: the live app. The window keeps the production screen's measure (1920 x 1080: a 49px menubar, 113px rail,
   26px status bar); 1cqw is 1/100 of the window's width, so 1px of the design is 0.05208cqw */
.tx-app { width: min(calc(100vw - 32px), 1640px); margin-inline: calc(50% - min(50vw - 16px, 820px)); margin-top: clamp(24px, 5vh, 56px); display: grid; gap: 14px; }
.tx-app-scroll { overflow-x: auto; border-radius: 10px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85); }
.tx-app-win { container-type: inline-size; min-width: 860px; aspect-ratio: 1920 / 1080; display: grid; grid-template-columns: 113fr 1807fr; grid-template-rows: 49fr 49fr 956fr 26fr;   /* menubar, toolbox (part of each screen), canvas, status */
  background: #393939; color: #f2f2f2; font-family: "Barlow", system-ui, sans-serif; overflow: hidden; user-select: none; }
.tx-app-top { grid-column: 2; grid-row: 1; display: flex; align-items: center; background: #9f9f9f; font-size: 0.62cqw; }
.tx-app-logo { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; background: #1e0e2c; }   /* spans the menubar and toolbox rows, as in the app */
.tx-app-logo svg { height: 3.3cqw; width: auto; display: block; }   /* sized off the window: a % height here has no box to resolve against */
.tx-app-menu, .tx-app-proj { display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.2cqw; }
.tx-app-menu b, .tx-app-proj b { font-weight: 600; color: #fbfbfb; }
.tx-app-menu i { width: 1px; height: 1.2cqw; background: #bdbdbd; }
.tx-app-proj { margin-left: auto; }
.tx-app-proj em { font-style: normal; font-weight: 600; background: #c9c9c9; color: #3a3a3a; padding: 0.35cqw 1.1cqw; border-radius: 3px; }
.tx-app-proj u { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #e2e2e2; }
.tx-app-rail { grid-column: 1; grid-row: 3; background: #717171; display: flex; flex-direction: column; align-items: center; padding-top: 0.6cqw; gap: 0.15cqw; }
.tx-app-rail hr { width: 3.4cqw; border: 0; border-top: 1px solid #8d8d8d; margin: 0.3cqw 0; }
.tx-rail-btn { position: relative; width: 5.2cqw; min-height: 4.4cqw; display: grid; justify-items: center; align-content: center; gap: 0.25cqw; padding: 0.55cqw 0.25cqw 0.65cqw; border: 0; border-radius: 0.45cqw; background: none; color: #f2f2f2;
  font: 500 0.58cqw/1.2 "Barlow", system-ui, sans-serif; text-align: center; cursor: pointer; transition: background-color 0.2s ease; }
.tx-rail-btn i { width: 3.333cqw; height: 2.917cqw; background: url(img/thrux/app/rail.png) 0 0 / 100% 900% no-repeat; }
.tx-rail-btn:hover { background: rgba(255, 255, 255, 0.08); }
.tx-rail-btn[aria-pressed="true"] { background: #60327a; }
.tx-rail-btn:disabled { opacity: 0.45; cursor: default; background: none; }
.tx-rail-btn:focus-visible, .tx-node:focus-visible, .tx-rbtn:focus-visible { outline: 2px solid #02d1c1; outline-offset: 2px; }
.tx-app-ws { grid-column: 2; grid-row: 2 / 4; position: relative; overflow: hidden; }
.tx-mod { position: absolute; inset: 0; visibility: hidden; }
.tx-mod.on { visibility: visible; }
.tx-mod[data-n]:not([data-n="1"]) { cursor: pointer; }
.tx-fr { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.22s ease; }
.tx-fr.on { opacity: 1; }
.tx-app-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 1cqw; background: #393939; border-top: 1px solid #2c2c2c; font-size: 0.62cqw; color: #e2e2e2; }
.tx-ready::before { content: "\2713"; color: #60f958; font-weight: 700; margin-right: 0.5cqw; }
.tx-count { position: absolute; top: 0.2cqw; right: 0.25cqw; min-width: 0.95cqw; height: 0.95cqw; padding: 0 0.2cqw; border-radius: 0.5cqw; background: #02d1c1; color: #10302d;
  font: 700 0.55cqw/0.95cqw "Barlow", system-ui, sans-serif; }
.tx-dots { position: absolute; left: 50%; bottom: 1.4cqw; translate: -50% 0; display: flex; align-items: center; gap: 0.55cqw; padding: 0.45cqw 0.7cqw;
  border-radius: 99px; background: rgba(20, 20, 20, 0.82); box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.45); cursor: default; }
.tx-dot { width: 0.62cqw; height: 0.62cqw; padding: 0; border: 0; border-radius: 50%; background: #8a8a8a; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.tx-dot.on { background: #02d1c1; transform: scale(1.3); }
.tx-dprev, .tx-dnext { border: 0; background: none; color: #f2f2f2; font: 600 1.15cqw/1 "Barlow", system-ui, sans-serif; padding: 0 0.25cqw; cursor: pointer; }
.tx-dot:focus-visible, .tx-dprev:focus-visible, .tx-dnext:focus-visible { outline: 2px solid #02d1c1; outline-offset: 2px; }
.tx-hinting .tx-node::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid #02d1c1; animation: tx-ping 1.8s ease-out infinite; pointer-events: none; }
@keyframes tx-ping { 0% { transform: scale(0.6); opacity: 0.85; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tx-hinting .tx-node::after { animation: none; opacity: 0.6; } }
.tx-where { text-align: center; }
.tx-app-hint { position: static; translate: none; text-align: center; }

/* the one-line's equipment and its radial menu */
.tx-node { position: absolute; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; border: 0; background: none; cursor: pointer; }
.tx-node:hover { box-shadow: 0 0 0 1px rgba(158, 89, 247, 0.55); }
.tx-radial { --r: 4.15cqw; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.tx-radial.on { opacity: 1; transform: none; pointer-events: auto; }
.tx-ring { position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); border: 2px solid #9e59f7; border-radius: 50%; pointer-events: none; }
.tx-rbtn { position: absolute; left: 0; top: 0; width: 1.6cqw; height: 1.6cqw; margin: -0.8cqw 0 0 -0.8cqw; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid #9e59f7; background: #393939; color: #f2f2f2; cursor: pointer;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); transition: background-color 0.15s ease; }
.tx-rbtn svg { width: 55%; height: 55%; }
.tx-rbtn span { position: absolute; top: 118%; font: 600 0.55cqw/1 "Barlow", system-ui, sans-serif; color: #f2f2f2; white-space: nowrap; }
.tx-rbtn:hover, .tx-rbtn.hit { background: #9e59f7; }
@media (prefers-reduced-motion: reduce) { .tx-fr, .tx-radial { transition: none; } }

/* ---------- Stan Lee Genesis ---------- */
/* the deck: the card leans toward the pointer (slg.js); its foil is a rainbow that slides with the lean, its glare follows the pointer */
.sl-deck { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sl-card-wrap { perspective: 1200px; display: grid; justify-items: center; }
.sl-card { --mx: 50%; --my: 50%; --f: 0.5; position: relative; display: block; width: min(100%, calc((100svh - 280px) * 0.845)); aspect-ratio: 676 / 800; padding: 0; border: 0; background: none;
  cursor: pointer; transform-style: preserve-3d; will-change: transform; }
.sl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 16px; }
/* the flip: two faces back to back, the card turns on a click; the lean toward the pointer sits on the card around it */
.sl-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1); }
.sl-card[aria-pressed="true"] .sl-flip { transform: rotateY(180deg); }
.sl-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #0b0a1d; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sl-back { transform: rotateY(180deg); }
.sl-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-flip-hint { justify-self: center; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .sl-flip { transition-duration: 0.01s; } }
.sl-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.35s ease; }
.sl-v.on { opacity: 1; }
.sl-foil, .sl-glare { position: absolute; inset: 0; pointer-events: none; }
.sl-foil { background: linear-gradient(115deg, transparent 22%, rgba(255, 90, 210, 0.55) 34%, rgba(90, 200, 255, 0.55) 44%, rgba(120, 255, 170, 0.5) 54%, rgba(255, 225, 100, 0.5) 64%, transparent 78%);
  background-size: 260% 260%; background-position: calc(var(--f) * 100%) 50%; mix-blend-mode: color-dodge; opacity: 0.16; }
.sl-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.32), transparent 48%); mix-blend-mode: overlay; }
.sl-ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-content: center; }
.sl-now { display: grid; gap: 6px; }
.sl-name { margin: 0; font: 400 clamp(36px, 4vw, 56px)/0.95 "Bebas Neue", sans-serif; letter-spacing: 0.02em; color: var(--ink); }
.sl-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-way { padding: 8px 18px; }
.sl-chaps { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chap { padding: 7px 14px; font-size: 14px; }
.sl-picks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 580px; }
.sl-pick[hidden] { display: none; }
.sl-pick { padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; opacity: 0.55; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.sl-pick img { display: block; width: 100%; height: auto; }
.sl-pick:hover { opacity: 0.9; transform: translateY(-3px); }
.sl-pick[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
@media (max-width: 860px) {
  .sl-deck { grid-template-columns: minmax(0, 1fr); }
  .sl-card { width: min(100%, 380px); }
  .sl-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
}
/* the full deck: without motion (and on phones) a row to swipe; with it, the pile holds on screen and fans into an arc */
.sl-fan-ring { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; contain: inline-size; }   /* the row scrolls; its twenty cards mustn't widen the page */
.sl-fc { margin: 0; flex: none; width: 140px; }
.sl-fc img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.95); }
.sl-fan.live { height: 240vh; }
.sl-fan.live .sl-fan-stage { position: sticky; top: 150px; height: calc(100svh - 160px); overflow: hidden; }
.sl-fan.live .sl-fan-ring { --w: clamp(90px, 9.5vw, 150px); position: relative; display: block; height: 100%; overflow: visible; padding: 0; }
.sl-fan.live .sl-fc { position: absolute; left: 50%; top: max(24px, calc(46% - var(--w) * 1.18 * 1.1)); width: var(--w); margin-left: calc(var(--w) / -2); transform-origin: 50% 400%;
  transition: translate 0.25s cubic-bezier(0.22, 1, 0.36, 1); z-index: var(--i); }
.sl-fan.live .sl-fc:hover { translate: 0 -14px; z-index: 50; }
/* the splash, from its own layers; the Book of Arcana's pieces sit where the site put them */
.sl-sp-stage { position: relative; aspect-ratio: 16 / 9; width: min(100%, 1180px); margin: 0 auto; overflow: hidden; border-radius: 10px; background: #07050d; isolation: isolate; }
.sl-sp-bg { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; display: block; }
.sl-sp-logo, .sl-sp-book, .sl-sp-arcana, .sl-sp-cta { position: absolute; left: 50%; margin: 0; }
.sl-sp-logo { top: 5%; width: 14%; height: auto; transform: translateX(-50%); }
.sl-sp-book { top: 45%; width: 45%; height: auto; transform: translateX(-50%); }
.sl-sp-arcana { top: 23%; width: 28%; transform: translateX(-50%); }
.sl-sp-arcana img { display: block; width: 100%; height: auto; animation: sl-float 6s ease-in-out infinite; }
@keyframes sl-float { 50% { transform: translateY(-3.5%); } }
.sl-sp-cta { bottom: 7%; transform: translateX(-50%); padding: 0.7em 1.4em; background: #474dc7; color: #fff; font: 400 clamp(12px, 1.4vw, 18px)/1 "Bebas Neue", sans-serif; letter-spacing: 0.1em; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(40, 40, 160, 0.9); }
@media (prefers-reduced-motion: reduce) { .sl-sp-arcana img { animation: none; } }
/* the chapter books: tap one and its chains and lock go up in dust and smoke (slg.js), and its cover glow comes back up */
.sl-ch { display: grid; gap: 14px; justify-items: center; padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px); border-radius: 10px; background: #1a1411 url(img/slg/site/chapter-bg.webp) center / cover; }
.sl-ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px clamp(8px, 3vw, 40px); width: min(100%, 600px, calc((100svh - 330px) * 0.8)); }   /* the art carries its own shadow room, so the gaps stay tight */
.sl-bk { position: relative; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 480 / 640; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.sl-bk > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sl-bk .sl-bk-num { inset: auto; left: 37.8%; top: 38%; width: 23%; height: auto; }   /* the cover is 69% of the art, centred; the number sits as the site had it */
.sl-bk:hover { transform: translateY(-4px); }
.sl-bk:hover .sl-bk-chains { animation: sl-rattle 0.4s ease; }
.sl-bk:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sl-bk-open { position: absolute; left: 14.8%; width: 69%; top: 71.5%; text-align: center; font: 400 clamp(11px, 1.3vw, 15px)/1 "Bebas Neue", sans-serif; letter-spacing: 0.08em; color: #f1e6d2; text-decoration: underline; text-underline-offset: 3px; opacity: 0; transition: opacity 0.4s ease 0.5s; }
.sl-bk[aria-pressed="true"] { cursor: default; }
.sl-bk[aria-pressed="true"]:hover { transform: none; }
.sl-bk[aria-pressed="true"] .sl-bk-chains { opacity: 0; transition: opacity 0.5s ease; }
.sl-bk.poofed .sl-bk-chains { transition: none; }   /* the canvas has taken the chains over; they go up in dust there */
.sl-bk-poof { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; pointer-events: none; z-index: 2; }
.sl-bk[aria-pressed="true"] .sl-bk-shade { opacity: 0; transition: opacity 0.7s ease 0.3s; }
.sl-bk[aria-pressed="true"] .sl-bk-book { animation: sl-glow 1.4s ease 0.3s; }
.sl-bk[aria-pressed="true"] .sl-bk-open { opacity: 1; }
.sl-bk.relock .sl-bk-chains { animation: sl-relock 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sl-rattle { 25% { transform: rotate(-1.5deg); } 60% { transform: rotate(1.2deg); } }
@keyframes sl-glow { 30% { filter: brightness(1.35) saturate(1.2); } }
@keyframes sl-relock { from { transform: translateY(-10%); opacity: 0; } }
.sl-ch-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.sl-ch-count { color: var(--ink-2); }
.sl-ch-reset { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .sl-bk:hover .sl-bk-chains, .sl-bk.relock .sl-bk-chains, .sl-bk[aria-pressed="true"] .sl-bk-book { animation: none; }
}

/* ---------- Done by Hand ---------- */
.dh-logo { font: 400 clamp(64px, 8vw, 116px)/0.9 "Bebas Neue", sans-serif; letter-spacing: 0.01em; color: var(--ink); }
.cs-body:has(.dh-pile) { overflow-x: clip; }   /* the prints slide off past the edge of the page */
/* the pile: flipped through by hand (dbh.js); the prints sit square in a box on the left, what's on top is described on the right */
.dh-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dh-desk { --s: min(calc(100svh - 280px), 56vw, 720px); position: relative; height: calc(var(--s) + 40px); cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.dh-print { position: absolute; left: 50%; top: 50%; margin: 0; width: calc(var(--s) * min(1, var(--ar))); aspect-ratio: var(--ar); translate: -50% -50%; transform: rotate(var(--r));
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.65s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.65s ease, visibility 0s; }
.dh-print img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; -webkit-user-drag: none; }
.dh-print.off { transform: translate(-160%, -12%) rotate(calc(var(--r) - 16deg)); opacity: 0; visibility: hidden; transition: transform 0.65s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.4s ease 0.25s, visibility 0s 0.65s; }
.dh-print.deep { visibility: hidden; }
.dh-print.quiet { transition: none; }
.dh-meta { display: grid; gap: 28px; align-content: center; }
.dh-now { display: grid; gap: 16px; }
.dh-count { font: 400 20px/1 "Bebas Neue", sans-serif; letter-spacing: 0.06em; color: var(--ink-3); }
.dh-count b { font-weight: 400; font-size: 72px; color: var(--accent); margin-right: 6px; }
.dh-cap { margin: 0; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; color: var(--ink); text-wrap: balance; min-height: 2.4em; }
.dh-nav { display: flex; gap: 10px; }
.dh-arrow { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; }
.dh-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dh-arrow:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); }
.dh-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dh-arrow:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 860px) {
  .dh-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dh-desk { --s: min(calc(100vw - 72px), 520px); }
  .dh-meta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
  .dh-count b { font-size: 52px; }
  .dh-cap { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .dh-print, .dh-print.off { transition: none; } }
/* the wall: all of them at once */
.dh-wall { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.dh-tile { padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; border-radius: 2px; opacity: 0.72; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dh-tile:hover { opacity: 1; transform: translateY(-3px); }
.dh-tile.on { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.dh-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
@media (max-width: 760px) { .dh-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dh-tile { transition: none; } }

/* ---------- Basic Apps ---------- */
@font-face { font-family: "DM Serif Display"; src: url(fonts/dm-serif-display-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(fonts/dm-serif-display-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
.ba-logo svg { display: block; width: clamp(200px, 26vw, 380px); height: auto; color: #fff; }   /* the same size as the other client logos */
@media (max-width: 880px) { .ba-logo svg { width: min(62vw, 260px); } }
.ba-seg { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; gap: 2px; }
.ba-seg-pill { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; background: var(--accent); pointer-events: none; will-change: transform, width; }
.ba-seg-b { position: relative; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 15px; cursor: pointer; transition: background-color 0.25s ease, color 0.3s ease 0.08s; }
.ba-seg-b:hover { color: var(--ink); }
.ba-seg-b[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ba-seg.has-pill .ba-seg-b[aria-pressed="true"] { background: none; }   /* the sliding pill carries the fill */
.ba-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the logo and its apps: Basic and an app's name, centred on the style guide's slate; the row re-centres as the name changes */
.ba-lock { --u: clamp(54px, 9vw, 120px); display: grid; gap: clamp(48px, 7vw, 88px); justify-items: center; padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 60px); border-radius: 10px; background: #272b38; container-type: inline-size; }   /* on the style guide's slate */
.ba-lock-row { display: flex; align-items: flex-start; justify-content: center; gap: calc(var(--u) * 34 / 110); font-size: min(var(--u), calc(100cqw / 9.6)); color: #fff; transition: gap 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ba-lock-row.solo { gap: 0; }   /* the parent logo alone, centred */
.ba-bw { display: block; height: 1em; width: auto; flex: none; }
.ba-names { position: relative; display: block; height: 1em; width: calc(var(--nw) * 1em); transition: width 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ba-nm { position: absolute; left: 0; top: 0; height: 1em; width: auto; visibility: hidden; }
.ba-nm.on { visibility: visible; animation: ba-write 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes ba-write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -1% -10% 0); } }
/* the apps with marks of their own (Sean, 2026-10-15): Bins, Ink, Drift and Deck don't carry the Basic name, so their own mark takes the
   stage alone; the lockup row and the marks share one cell, at the lockup's size */
.ba-lock-stage { display: grid; place-items: center; max-width: 100%; min-height: 1.4em; font-size: min(var(--u), calc(100cqw / 9.6)); }
.ba-lock-stage > * { grid-area: 1 / 1; }
.ba-lock-row { transition: gap 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s ease; }
.ba-lock.own .ba-lock-row { opacity: 0; visibility: hidden; transition: gap 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0.2s; }
.ba-marks { display: grid; place-items: center; max-width: 100%; }
.ba-om { grid-area: 1 / 1; display: block; width: auto; max-width: 100%; color: #fff; visibility: hidden; }
.ba-om.on { visibility: visible; animation: ba-write 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.ba-om--bins { height: 1.3em; }
.ba-om--ink { height: 1.25em; }
.ba-om--drift { height: 1.05em; }
.ba-om--deck { height: 0.8em; }
.ba-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ba-chips .cf-opt { padding: 8px 16px; }
.ba-lock .cf-opt:not([aria-pressed="true"]) { border-color: rgba(255, 255, 255, 0.16); }   /* the outline reads on the slate */
/* the icon family: colour, or the website's white knockouts */
.ba-fam { display: grid; gap: 28px; justify-items: center; }
.ba-fam-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 32px); width: 100%; }
.ba-ic { margin: 0; display: grid; gap: 12px; justify-items: center; }
.ba-ic-art { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.ba-ic-art img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s ease calc(var(--i) * 60ms), transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) calc(var(--i) * 60ms); }
.ba-ic-art .c { border-radius: 22.4%; box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.8); }
.ba-ic-art .k { opacity: 0; transform: scale(0.9); }
.ba-fam.ko .c { opacity: 0; transform: scale(0.9); }
.ba-fam.ko .k { opacity: 1; transform: none; }
.ba-ic figcaption { font-size: 14px; color: var(--ink-3); }
@media (max-width: 760px) { .ba-fam-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the alternate icons: one big icon, the app's own swatches beside it */
.ba-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ba-alt-stage { display: grid; justify-self: center; width: min(100%, 340px); aspect-ratio: 1; }
.ba-alt-i { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 22.4%; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.9); opacity: 0; transform: scale(0.94); transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1); }
.ba-alt-i.on { opacity: 1; transform: none; }
.ba-alt-ctl { display: grid; gap: 22px; justify-items: start; }
.ba-sws { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); gap: 16px 14px; }
.ba-sws[hidden] { display: none; }
.ba-sw { display: grid; gap: 8px; justify-items: center; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; }
.ba-sw img { width: 64px; height: 64px; border-radius: 22.4%; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s ease, transform 0.2s ease; }
.ba-sw:hover img { transform: translateY(-2px); }
.ba-sw[aria-pressed="true"] { color: var(--ink); }
.ba-sw[aria-pressed="true"] img { outline-color: var(--accent); }
.ba-sw:focus-visible img { outline-color: var(--accent); }
.ba-note { margin: 0; font-size: 14px; color: var(--ink-3); }
@media (max-width: 760px) { .ba-alt { grid-template-columns: minmax(0, 1fr); } .ba-alt-ctl { justify-items: center; } .ba-alt-stage { width: min(70%, 280px); } }
/* the colours: the homepage film's title cards, picked by each app's knockout */
.ba-cards { display: grid; gap: 18px; }
.ba-card-stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 7; border-radius: 10px; overflow: hidden; background: #0e1112; }
.ba-card { position: absolute; inset: 0; display: grid; align-content: center; padding: 0 8cqw; background: var(--bg); color: var(--ink); clip-path: inset(100% 0 0 0); }
.ba-card.prev { clip-path: inset(0); z-index: 1; }   /* the card being covered stays whole under the new one */
.ba-card.on { clip-path: inset(0); z-index: 2; transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1); }   /* the new field sweeps up over it */
.ba-card p { margin: 0; font: 400 9.2cqw/1.02 "DM Serif Display", Georgia, serif; letter-spacing: -0.02em; }
.ba-card .ln { display: block; white-space: nowrap; }
.ba-card em { color: var(--em); }
.ba-card .w { display: inline-block; }
.ba-card.on .w { animation: ba-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d) + 0.3s) both; }
@keyframes ba-rise { from { opacity: 0; transform: translateY(0.14em) scale(1.12); } }
.ba-picks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 20px); }
.ba-pick { position: relative; padding: 14%; border: 0; border-radius: 22%; background: transparent; cursor: pointer; transition: background-color 0.35s ease, transform 0.2s ease; }
.ba-pick img { display: block; width: 100%; height: auto; opacity: 0.5; transition: opacity 0.25s ease; }
.ba-pick:hover img { opacity: 0.85; }
.ba-pick[aria-pressed="true"] img { opacity: 1; }
.ba-pick[aria-pressed="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2%; height: 4px; border-radius: 2px; background: var(--bg); }
.ba-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the homepage film in a browser window */
.ba-film .wb-browser { width: min(100%, 1180px); }
.ba-film-view { position: relative; aspect-ratio: 2880 / 1692; background: #0b0d14; }
.ba-film-view video { display: block; width: 100%; height: 100%; }
.ba-pp { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(10, 12, 18, 0.6); color: #fff; cursor: pointer; }
.ba-pp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ba-pp .pl { display: none; fill: currentColor; stroke: none; }
.ba-pp[aria-pressed="true"] .pz { display: none; }
.ba-pp[aria-pressed="true"] .pl { display: block; }
.ba-pp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ba-nm.on, .ba-card.on .w { animation: none; }
  .ba-names, .ba-lock-row { transition: none; }
  .ba-ic-art img, .ba-alt-i, .ba-card.on { transition: none; }
}
/* Basic Apps, iOS: app icons, one phone standing on the page, the app's key screens (basic-ios.js) */
/* the phone sits dead centre; the icons hug its left and the screen list its right, so the set reads as one unit */
.ba-show { --sh: min(860px, max(560px, calc(100svh - 190px))); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ba-apps { display: grid; gap: 18px; justify-items: center; align-content: start; justify-self: end; padding-top: 12px; }
.ba-app { display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; }
.ba-app img { width: 60px; height: 60px; border-radius: 22.4%; opacity: 0.55; outline: 2px solid transparent; outline-offset: 3px; transition: opacity 0.2s ease, outline-color 0.2s ease, transform 0.2s ease; }
.ba-app:hover img { opacity: 0.9; transform: translateY(-2px); }
.ba-app[aria-pressed="true"] { color: var(--ink); }
.ba-app[aria-pressed="true"] img { opacity: 1; outline-color: var(--accent); }
.ba-app:focus-visible img { outline-color: var(--accent); opacity: 1; }
.ba-stage { display: grid; justify-items: center; gap: 28px; }
.ba-stand { position: relative; height: calc(var(--sh) - 70px); aspect-ratio: 1022 / 2082; }
/* the phone: the frame, the screenshot in its glass with the frame's own corner radius, and the island over both */
.ba-phone { position: relative; z-index: 1; height: 100%;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55)) drop-shadow(0 18px 24px rgb(0 0 0 / 0.45)) drop-shadow(0 46px 56px rgb(0 0 0 / 0.35)); }
.ba-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-glass { position: absolute; left: 5.088%; top: 2.209%; width: 89.824%; height: 95.581%; border-radius: 13.725% / 6.332%; overflow: hidden; background: #000; isolation: isolate; }
.ba-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba-island { position: absolute; left: 50%; top: 3.41%; width: 28.1%; height: 4.05%; translate: -50% 0; border-radius: 999px; background: #000; }
/* where it stands: a tight contact shadow under its bottom edge */
.ba-floor { position: absolute; z-index: 0; left: 4%; right: 4%; bottom: -12px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.45) 55%, transparent); filter: blur(4px); }
.ba-step { display: flex; align-items: center; gap: 18px; }
.ba-step button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.ba-step button:hover { border-color: var(--accent); color: var(--ink); }
.ba-step button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ba-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-count { min-width: 64px; text-align: center; font-size: 14px; letter-spacing: 0.08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ba-side { display: grid; align-content: start; justify-self: start; width: min(100%, 300px); position: sticky; top: 150px; }
.ba-set[hidden] { display: none; }
.ba-set { display: grid; gap: 14px; }
.ba-det-t { margin: 0; font: 400 clamp(28px, 2.8vw, 40px)/1.05 "Bebas Neue", sans-serif; letter-spacing: 0.02em; color: var(--ink); }
.ba-shots { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ba-sh-b { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; width: 100%; padding: 8px 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 16px; line-height: 1.3; text-align: left; cursor: pointer; transition: color 0.2s ease; }
.ba-sh-n { font-size: 12px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.ba-sh-b:hover { color: var(--ink); }
.ba-sh-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ba-sh[data-on="true"] .ba-sh-b { color: var(--ink); }
.ba-sh[data-on="true"] .ba-sh-n { color: var(--accent); }
.ba-sh-more { display: none; gap: 14px; padding: 0 0 12px 30px; }
.ba-sh[data-on="true"] .ba-sh-more { display: grid; animation: rise 0.4s var(--ease-out) both; }
.ba-looks { justify-self: start; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }   /* each look its own pill; the teal fill slides between them */
.ba-looks .ba-seg-b { padding: 7px 14px; border: 1px solid var(--line); font-size: 14px; transition: border-color 0.25s ease, color 0.3s ease 0.08s; }
.ba-looks .ba-seg-b:hover { border-color: var(--ink-3); }
.ba-looks .ba-seg-b[aria-pressed="true"] { border-color: var(--accent); }
@media (max-width: 960px) {
  .ba-show { grid-template-columns: minmax(0, 1fr); }
  .ba-apps { display: flex; flex-wrap: wrap; justify-content: center; justify-self: stretch; gap: 12px; padding: 0; }
  .ba-app { font-size: 12px; }
  .ba-app img { width: 44px; height: 44px; }
  .ba-stand { height: calc(min(640px, 78svh) - 70px); }
  .ba-side { position: static; justify-self: stretch; width: auto; }
  .ba-sh[data-on="false"] { display: none; }   /* on a phone the arrows step through; only the current screen's line shows */
}
@media (prefers-reduced-motion: reduce) { .ba-sh[data-on="true"] .ba-sh-more { animation: none; } }
/* Basic Apps, Mac: a window centred in place of the phone, the arrows under it, then one centred row with the app picker
   and the screen names; a screen's look pills open in a reserved line below, so nothing jumps */
.ba-show--mac { --wh: clamp(340px, calc(100svh - 440px), 620px); grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 26px; }
.ba-show--mac .ba-stage { gap: 22px; width: 100%; }
.ba-show--mac .ba-stand { height: auto; width: min(100%, calc(var(--wh) * 1.34)); aspect-ratio: 1400 / 1045; }
.ba-show--mac .ba-phone { filter: none; }
.ba-show--mac .ba-glass { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; overflow: visible; background: none; isolation: auto; }
.ba-show--mac .ba-shot { object-fit: contain; object-position: center; will-change: opacity, transform; }   /* its own layer, so the shadow isn't redrawn every frame */
.ba-show--mac .ba-shot { filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.45)) drop-shadow(0 26px 40px rgb(0 0 0 / 0.5)); }
.ba-bar { display: grid; justify-items: center; gap: 14px; width: 100%; }
.ba-show--mac .ba-apps { display: flex; gap: 28px; justify-self: center; padding: 0; }
.ba-show--mac .ba-app { grid-auto-flow: column; align-items: center; gap: 10px; font-size: 15px; }
.ba-show--mac .ba-app img { width: 40px; height: 40px; }
.ba-show--mac .ba-side { position: relative; top: auto; justify-self: center; width: auto; max-width: 100%; padding-bottom: 54px; }
.ba-show--mac .ba-det-t { display: none; }
.ba-show--mac .ba-shots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 24px; }
.ba-show--mac .ba-sh-b { grid-template-columns: auto auto; gap: 8px; width: auto; padding: 6px 0; }
.ba-show--mac .ba-sh-more { position: absolute; left: 0; right: 0; bottom: 0; justify-items: center; padding: 0; }
.ba-show--mac .ba-looks { justify-self: center; }
.ba-show--mac .ba-app { position: relative; }
.ba-show--mac .ba-app span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* icons only; the name stays for screen readers */
/* Basic Apps, Website: the heroes (each app's hero a panel; the open one shows it whole, the rest blur to its colour),
   the demos (a loop recorded from the live site, the looks pills to pick), and the modules (one at a time on the arrows) */
.wb-acc { --h: clamp(260px, 36vw, 480px); display: flex; gap: 6px; height: var(--h); }
.wb-pan { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0a0e17; cursor: pointer;
  transition: flex-grow 0.7s var(--ease-out), flex-basis 0.7s var(--ease-out); }
.wb-pan[aria-expanded="true"] { flex: 0 0 calc(var(--h) * 1.6); cursor: default; }
.wb-pan > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: blur(14px) saturate(1.25); scale: 1.25; transition: filter 0.6s var(--ease-out), scale 0.6s var(--ease-out); }   /* shut, a page is its colour; open, it sharpens into the page */
.wb-pan[aria-expanded="true"] > img:first-child { filter: none; scale: 1; }
.wb-pan:not([aria-expanded="true"]):hover > img:first-child { filter: blur(14px) saturate(1.25) brightness(1.2); }
.wb-pan-ic { position: absolute; left: 50%; bottom: 14px; width: 28px; height: 28px; translate: -50% 0; border-radius: 22.4%; box-shadow: 0 2px 8px rgb(0 0 0 / 0.45); transition: opacity 0.3s ease; }
.wb-pan[aria-expanded="true"] .wb-pan-ic { opacity: 0; }
.wb-pan:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wb-demo { display: grid; justify-items: center; gap: 22px; }
.wb-demo-stage { width: 100%; aspect-ratio: 19 / 10; }   /* every loop is cut to the same 1.9:1 frame, as wide as the content column, so it never changes size */
.wb-demo-stage video { display: block; width: 100%; height: 100%; border-radius: 14px; cursor: pointer;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.wb-demo .ba-looks { justify-self: center; justify-content: center; }
.wb-mods { display: grid; justify-items: center; gap: 22px; }
.wb-mods-stage { position: relative; width: 100%; aspect-ratio: 19 / 10; }
.wb-mod { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; opacity: 0; transition: opacity 0.35s ease;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.wb-mod.on { opacity: 1; }
@media (max-width: 760px) {
  .wb-acc { flex-direction: column; height: auto; }
  .wb-pan { flex: 0 0 44px; }
  .wb-pan[aria-expanded="true"] { flex: 0 0 auto; aspect-ratio: 16 / 10; }
  .wb-pan-ic { bottom: 8px; width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .wb-pan, .wb-pan > img, .wb-mod { transition: none; } }

/* ---------- Firstrust (firstrust.js) ---------- */
.ft-logo svg { display: block; width: clamp(220px, 28vw, 400px); height: auto; }
@media (max-width: 880px) { .ft-logo svg { width: min(66vw, 280px); } }

/* the cards: one at a time, leaning to the pointer, a light over its face (masked to the card) */
.ft-cards { display: grid; justify-items: center; gap: 22px; }
.ft-cards .ba-looks { justify-self: center; justify-content: center; }
.ft-cards-stage { position: relative; width: 100%; aspect-ratio: 2.2 / 1; perspective: 1400px; }   /* no box: the cards sit right on the white body, where the renders' shadows ground them */
.ft-card { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.ft-card.on { opacity: 1; pointer-events: auto; }
.ft-card-in { position: relative; width: 66%; transform-style: preserve-3d; will-change: transform; }
.ft-card-in img { display: block; width: 100%; height: auto; }
.ft-sheen { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: soft-light; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 42%);
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.ft-cards-stage.lit .ft-card.on .ft-sheen { opacity: 1; }
.ft-cards--still .ft-card-in { width: 49.5%; }   /* EthJets: the passes play their own shimmer loops, so they hold still, a quarter smaller */
.ft-cards--still .ft-sheen { display: none; }

/* a set: a frame as wide as the column; a piece floats in it, or a mockup shot on white fills it white */
.ft-set { display: grid; justify-items: center; gap: 22px; outline: none; }
.ft-set .ba-looks { justify-self: center; justify-content: center; }
.ft-frame { position: relative; width: 100%; }
.ft-item { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; }   /* flex, so a piece's max-height resolves against the frame and never spills past it */
.ft-item.on { opacity: 1; }
.ft-item img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; }
.ft-item--float { padding: 5%; }
.ft-item--photo { padding: 2% 4%; }
.ft-item--photo img { border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.ft-item--paper { background: #fff; border-radius: 14px; overflow: hidden; }
.ft-item--grey { padding: 1% 0; }
.ft-set--small .ft-item img { max-width: 75%; max-height: 75%; }   /* a quarter smaller in the same frame */   /* a card render, straight on the white, its own shadow under it */
.ft-item--paper img { width: 100%; height: 100%; object-fit: contain; }

/* whole pages, scrolled through a frame with no browser around it */
.ft-pages .wb-stage { display: grid; justify-items: center; gap: 22px; }
.ft-view { position: relative; width: min(100%, 1180px); aspect-ratio: 16 / 10; border-radius: 12px; overflow-y: auto; background: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.ft-page { display: none; width: 100%; height: auto; }
.ft-page.on { display: block; }
.ft-pages .ba-looks { justify-self: center; justify-content: center; }
.wb.live.ft-pages .ft-view { width: min(100%, 1180px, calc((100svh - 290px) * 1.6)); overflow: hidden; }
.wb.live.ft-pages .ft-page { display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.35s ease; will-change: transform; }
.wb.live.ft-pages .ft-page.on { opacity: 1; }

/* the icon sheet */
.ft-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); margin: 0; padding: clamp(14px, 2.4vw, 30px); list-style: none;
  background: #fff; border-radius: 14px; }
.ft-icons li { display: grid; justify-items: center; gap: 4px; padding: 6px 4px 14px; }
.ft-icons img { display: block; width: 100%; max-width: 120px; height: auto; }
.ft-icons span { color: #5b5f62; font-size: 13px; line-height: 1.3; text-align: center; }

/* the video wall: two canvases, 16th Street and Market Street, flat or folded at the corner */
.ft-wall { --split: 38.7%; display: grid; justify-items: center; gap: 22px; }
.ft-wall-stage { width: 100%; }
.ft-wall-stage video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ft-wall-fold { display: flex; width: 100%; aspect-ratio: 5184 / 768; perspective: 1100px; perspective-origin: var(--split) 50%; cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.ft-face { display: block; height: 100%; background: #b3122e; outline: 1px solid transparent; backface-visibility: hidden; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.ft-face--l { width: var(--split); transform-origin: 100% 50%; }
.ft-face--r { width: calc(100% - var(--split)); transform-origin: 0 50%; }
.ft-wall.corner .ft-wall-fold { transform: translateX(5%) scale(1.08); }
.ft-wall.corner .ft-face--l { transform: rotateY(-48deg); }
.ft-wall.corner .ft-face--r { transform: rotateY(30deg); }
.ft-wall-streets { display: flex; margin-top: 12px; color: var(--ink-3); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ft-wall-streets span { flex: 0 0 var(--split); text-align: center; }
.ft-wall-streets span + span { flex: 1 1 auto; border-left: 1px dashed var(--line); }
.ft-wall-ctl { display: grid; justify-items: center; gap: 12px; }
.ft-wall-ctl .ba-looks { justify-content: center; }

.ft-wide, .ft-film { margin: 0; }
.ft-film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.ft-wide img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.cs-body--light .ft-view, .cs-body--light .ft-wide img, .cs-body--light .ft-film video, .cs-body--light .ft-item--photo img {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.06), 0 22px 40px -14px rgb(0 0 0 / 0.22); }
.ft-set--cut .ft-item { transition: none; }   /* cards change in place, no fade */
.ft-set--framed .ft-frame { border-radius: 12px; overflow: hidden;   /* the same frame and shadow as the pages above it */
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.06), 0 22px 40px -14px rgb(0 0 0 / 0.22); }
.ft-campaign { display: grid; gap: clamp(28px, 4vh, 48px); }
.ft-item--app { padding: 5%; background: #261337; border-radius: 14px; }   /* app components on the app's own purple: they're translucent panels made for it */
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); align-items: center; }
.ft-grid figure { margin: 0; display: grid; place-items: center; aspect-ratio: 1; }
.ft-grid img { display: block; max-width: 86%; max-height: 86%; width: auto; height: auto; }
@media (max-width: 760px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* EthJets: the pieces laid out as the live page has them, each building in as its row arrives (firstrust.js, data-build) */
.ej-row { display: grid; gap: clamp(16px, 2.6vw, 40px); align-items: center; }
.ej-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ej-row figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.ej-row figure > img { display: block; width: 100%; height: auto; }
.ej-one { display: block; }   /* a single piece across the column (the panel lays its children out as a grid) */
.ej-full { display: block; width: 100%; height: auto; }
.ej-row--parts { grid-template-columns: 0.95fr 0.9fr 0.95fr; align-items: start; }
.ej-row--parts img { display: block; width: 100%; height: auto; }
.ej-seat { position: relative; width: 100%; aspect-ratio: 1270 / 655; }   /* laid out after the live page: the phones and the cabin big in the middle, the alerts coming off either side */
.ej-seat img { position: absolute; display: block; height: auto; }
.ej-seat-base { left: 23%; top: 6%; width: 54%; }
.ej-seat-alert { left: 58%; top: 14%; width: 30%; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.45)); }
.ej-seat-set { left: 9%; top: 66%; width: 16%; }
.ej-reels video { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; background: #1d6fc4; }
.bi-ready:not(.in) .bi { opacity: 0; transform: translateY(36px); }
.bi-ready .bi { transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.bi-ready:not(.in) .ej-seat-alert { transform: translateY(-40px); }
.bi-ready:not(.in) .ej-seat-set { transform: scale(0.6); }
.ej-seat .ej-seat-alert, .ej-seat .ej-seat-set { --i: 4; }
@media (max-width: 760px) { .ej-row--3, .ej-row--parts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bi-ready .bi { transition: none; } .bi-ready:not(.in) .bi { opacity: 1; transform: none; } }
.ft-cut { margin: 0; }
.ft-cut img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .ft-item, .ft-sheen, .ft-face, .ft-wall-fold, .wb.live.ft-pages .ft-page { transition: none; } }

/* ---------- Carlisle Architectural Metals ---------- */
.cam-panels img { box-shadow: none; border-radius: 0; }   /* the panels sit straight on the page, at their true relative sizes */
/* the trifold: three panels on one sheet; the right folds in first, then the left over it, so closed shows the cover (firstrust.js) */
/* a roll fold, so the panels aren't thirds (Sean, 2026-10-14): of the 14 in sheet, cover 4.705 | back 4.715 | flap 4.58 */
.tri-stage { position: relative; width: min(100%, calc(70vh * 14 / 8.5)); aspect-ratio: 14 / 8.5; margin: 0 auto; perspective: 2600px; }
.tri-sheet { position: absolute; left: 33.607%; top: 0; width: 33.679%; height: 100%; transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.tri-p { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.tri-l { left: auto; right: 100%; width: 99.788%; transform-origin: 100% 50%; transform: rotateY(180deg) translateZ(-2px); transition-delay: 0.45s; }
.tri-r { left: 100%; right: auto; width: 97.137%; transform-origin: 0 50%; transform: rotateY(-180deg) translateZ(-1px); }
.tri.is-open .tri-l { transform: none; transition-delay: 0s; }
.tri.is-open .tri-r { transform: none; transition-delay: 0.45s; }
.tri.is-back .tri-sheet { transform: rotateY(180deg); transition-delay: 0.3s; }
.tri-f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tri-f img { display: block; width: 100%; height: 100%; }
.tri-f--b { transform: rotateY(180deg); }
.tri-f::after { content: ""; position: absolute; inset: 0; pointer-events: none; }   /* soft creases at the folds, open */
.tri-f--in-left::after { background: linear-gradient(270deg, rgb(0 0 0 / 0.1), transparent 3%); }
.tri-f--in-middle::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.07), transparent 2.5%, transparent 97.5%, rgb(0 0 0 / 0.07)); }
.tri-f--in-right::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.1), transparent 3%); }
/* one soft shadow under the sheet, on a flat layer before it (each face used to carry its own, which fell across the next panel as a hard
   band); it widens with the sheet open and narrows as the sheet turns over (firstrust.js adds .turning) */
.tri-sh { position: absolute; top: 3%; bottom: -3%; left: 34.6%; right: 33.7%; border-radius: 6px; background: rgb(0 0 0 / 0.5); filter: blur(18px);
  transition: left 0.9s cubic-bezier(0.65, 0, 0.35, 1), right 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.tri.is-open .tri-sh { left: 1.5%; right: 1.5%; }
.tri.turning .tri-sh { animation: tri-turn 0.9s cubic-bezier(0.75, 0, 0.95, 0.25); }
@keyframes tri-turn { 50% { left: 49.9%; right: 49%; animation-timing-function: cubic-bezier(0.05, 0.75, 0.25, 1); } }
.tri .ba-seg { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .tri-sheet, .tri-p, .tri-sh { transition: none; } .tri.turning .tri-sh { animation: none; } }
.bx-real.cam-real { height: clamp(440px, 54vw, 760px); background: radial-gradient(ellipse at 50% 70%, #26292d 0%, #101113 70%); }

/* ---------- Pretty Bird ---------- */
.pb-logo svg { display: block; width: clamp(150px, 16vw, 230px); height: auto; }   /* a round mark: sized by eye against the wide wordmarks on the other pages */
.pb-logo svg path { fill: #fff; }
/* the mark in its colours: a swatch recolours the two words, PRETTY and then BIRD a beat behind */
.pb-mark { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.pb-mark-art svg { display: block; width: min(100%, 520px); height: auto; margin: 0 auto; }
.pb-mark .p { fill: var(--p); transition: fill 0.45s ease; }
.pb-mark .b { fill: var(--b); transition: fill 0.45s ease 0.08s; }
.pb-sws { display: grid; grid-template-columns: repeat(2, 56px); gap: 14px; }
.pb-sw { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--p) 0 50%, var(--b) 50% 100%); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pb-sw:hover { transform: scale(1.06); }
.pb-sw[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1d1d1f; }
.pb-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
  .pb-mark { grid-template-columns: 1fr; }
  .pb-sws { grid-template-columns: repeat(8, 1fr); gap: 8px; }
  .pb-sw { width: 100%; height: auto; aspect-ratio: 1; }
}
/* the crowler and the menu: their pills sit under them */
.bx-real.pb-real { height: clamp(460px, 52vw, 720px); }
.pb-crowler .ba-seg, .pb-flip .ba-seg { margin-top: 20px; }
/* the menu, turned over on its long edge */
.pb-flip-stage { width: min(100%, calc(74vh * 1200 / 2031)); aspect-ratio: 1200 / 2031; margin: 0 auto; perspective: 2600px; }
.pb-sheet { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.pb-flip.is-back .pb-sheet { transform: rotateY(180deg); }
.pb-face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 24px 48px rgb(0 0 0 / 0.16); }
.pb-face--b { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .pb-mark .p, .pb-mark .b, .pb-sheet { transition: none; } }
.pb-crowler, .pb-flip { display: grid; }
.pb-crowler .ba-seg, .pb-flip .ba-seg { justify-self: center; }
.pb-bag { max-width: 960px; margin-inline: auto; }
/* Pretty Bird, round two: the sheets straight on the page; the can beside its label laid flat; the promo's frame drawn here, crisp */
.pb-flat { margin: 0; }
.pb-flat img { display: block; width: 100%; height: auto; }
.pb-crowler-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(16px, 3vw, 48px); align-items: center; }
.pb-crowler-row .bx-real.pb-real { height: clamp(420px, 44vw, 640px); }
.pb-label { display: grid; }
.pb-label img { grid-area: 1 / 1; display: block; width: 100%; height: auto; visibility: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 14px 32px rgb(0 0 0 / 0.1); }
.pb-label img.on { visibility: visible; }
@media (max-width: 760px) { .pb-crowler-row { grid-template-columns: 1fr; } }
.pb-framed { margin: 0; }
.pb-framed img { display: block; width: 100%; height: auto; border: 2px solid #111; }

/* ---------- CertainTeed ---------- */
.ct-logo-big { margin: 0; padding: clamp(32px, 6vw, 96px) 0; }
.ct-logo-big img { display: block; width: min(100%, 880px); height: auto; margin: 0 auto; }
.ct-logo-mid img { width: min(100%, 640px); height: auto; }
.ct-flat img { box-shadow: none; border-radius: 0; }
/* the badge chooser: the badge, then a row each for category, tier and version */
.ct-badges { display: grid; gap: 14px; justify-items: center; }
.ct-badge-stage { display: grid; width: min(100%, 440px); aspect-ratio: 1; margin-bottom: 12px; }
.ct-badge-stage img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.ct-row { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
.ct-row .ba-seg-b[aria-disabled="true"] { opacity: 0.32; cursor: not-allowed; }
/* rows of pieces standing on the page */
.ct-awards, .ct-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: end; }
.ct-awards figure, .ct-line figure { margin: 0; }
.ct-awards img, .ct-line img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .ct-awards, .ct-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the app: the walkthrough in a phone beside the screens */
.ct-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.ct-phone { padding: 10px; background: #111; border-radius: 44px; box-shadow: 0 24px 48px rgb(0 0 0 / 0.2); }
.ct-phone video { display: block; width: 100%; aspect-ratio: 886 / 1920; border-radius: 34px; background: #000; object-fit: cover; }
.ct-app-shots { margin: 0; }
@media (max-width: 760px) { .ct-app { grid-template-columns: 1fr; } .ct-phone { width: min(70%, 300px); margin: 0 auto; } }

/* the page-turner: a brochure, two pages wide; each sheet turns on the spine. Closed it sits centred on its cover, and on its
   back cover once every page has turned. A soft shadow lies under each half that has a page on it; the pages themselves
   carry only a hairline and a little spine shading, so nothing bands as they turn (firstrust.js) */
.fb { display: grid; justify-items: center; gap: 22px; }
.fb-stage { position: relative; width: min(100%, calc(74vh * 2 * var(--pw) / var(--ph))); aspect-ratio: calc(2 * var(--pw)) / var(--ph); perspective: 3200px; }
.fb-sh { position: absolute; top: 0; bottom: 0; width: 50%; transform: translateZ(-1px); pointer-events: none; opacity: 0; transition: opacity 0.2s;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 6px 12px -4px rgb(0 0 0 / 0.1), 0 26px 44px -18px rgb(0 0 0 / 0.24); }   /* no fill: only the shadow, outside the page */
.fb-sh-l { left: 0; } .fb-sh-r { left: 50%; }
.fb.has-l .fb-sh-l, .fb.has-r .fb-sh-r { opacity: 1; transition: opacity 0.25s 0.6s; }   /* a half's shadow comes in once its page has landed, and goes at once */
.fb-book { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); cursor: pointer; outline: none; }
.fb-book:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.fb-sheet { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.fb-sheet.turned { transform: rotateY(-180deg); }
.fb-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; }
.fb-face img { display: block; width: 100%; height: 100%; }
.fb-b { transform: rotateY(180deg); }
.fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05); }
.fb-f::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.07), rgb(0 0 0 / 0) 7%); }   /* a right-hand page: the spine at its left */
.fb-b::after { background: linear-gradient(270deg, rgb(0 0 0 / 0.07), rgb(0 0 0 / 0) 7%); }
.fb .ba-step { justify-self: center; }
/* the foil: a glint and fine glitter over the cover's metallic ink only, the light following the pointer */
.fb-foil { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
  background:
    linear-gradient(115deg, transparent calc(var(--gx, 30%) - 22%), rgb(255 236 214 / 0.55) var(--gx, 30%), transparent calc(var(--gx, 30%) + 22%)),
    url(img/ct/books/manual/glitter.png) 0 0 / 180px 180px;
  mix-blend-mode: screen; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .fb-book, .fb-sheet, .fb-sh { transition: none !important; } }

/* CertainTeed, round two */
.cs-body--light .ct-flat img { box-shadow: none; border-radius: 0; }   /* straight on the white: no frame, no shadow */
.ct-flat { margin: 0; }
.ct-flat img { display: block; width: min(100%, 820px); height: auto; margin: 0 auto; }   /* the icon set, centred at a size that suits it */
.ct-badges-solar { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 5vw, 72px); }   /* centred, not stretched to the taller badge */
.ct-badges-solar img { width: min(42%, 260px); height: auto; }
/* the logo, built in: the mark lands, the letters rise one after another, Saint-Gobain sets in beneath */
.ct-logo-build { display: block; padding: clamp(48px, 9vw, 140px) 0; }
.lb-stage { position: relative; width: min(100%, 900px); margin: 0 auto; }
.lb-stage img { position: absolute; display: block; height: auto; }
.ct-logo-build.ready .lb-mark { opacity: 0; transform: scale(0.35) rotate(-90deg); }
.ct-logo-build.ready .lb-l { opacity: 0; transform: translateY(45%); }
.ct-logo-build.ready .lb-sg { opacity: 0; transform: translateY(60%); }
.ct-logo-build.in .lb-mark { opacity: 1; transform: none; transition: transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease; }
.ct-logo-build.in .lb-l { opacity: 1; transform: none; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(0.28s + (var(--i) - 1) * 0.06s), opacity 0.35s ease calc(0.28s + (var(--i) - 1) * 0.06s); }
.ct-logo-build.in .lb-sg { opacity: 1; transform: none; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.95s, opacity 0.5s ease 0.95s; }

/* ThermaThin 7, the logo built in (tt7_logo; firstrust.js [data-logo-build]): THERMA rises letter by letter, THIN draws in from the left
   in its thinner line, the 7 lands in its box (no overshoot), POLYISO INSULATION sets beneath */
.tt-logo-build { display: block; padding: clamp(40px, 8vw, 120px) 0; }
.tt-logo-build .lb-stage { width: min(100%, 1000px); }
.tt-logo-build.ready .lb-l { opacity: 0; transform: translateY(45%); }
.tt-logo-build.ready .lb-thin { opacity: 0; clip-path: inset(0 100% 0 0); }
.tt-logo-build.ready .lb-seven { opacity: 0; transform: scale(0.6); }
.tt-logo-build.ready .lb-sub { opacity: 0; transform: translateY(60%); }
.tt-logo-build.in .lb-l { opacity: 1; transform: none; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.06s), opacity 0.35s ease calc(var(--i) * 0.06s); }
.tt-logo-build.in .lb-thin { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.36s + var(--i) * 0.08s), opacity 0.15s linear calc(0.36s + var(--i) * 0.08s); }
.tt-logo-build.in .lb-seven { opacity: 1; transform: none; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s, opacity 0.3s ease 0.9s; }
.tt-logo-build.in .lb-sub { opacity: 1; transform: none; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.15s, opacity 0.5s ease 1.15s; }

/* Henry. The header logo is a square-ish lockup, so it runs narrower than the wordmarks. The residential breakout (hen_break; henry.js):
   each tab of henry.com's Residential Systems page with its films playing in place over the capture, placed in % of the page so they
   ride its scroll; the wrapper is the page firstrust.js moves */
.cs-logo--henry img { width: clamp(150px, 18vw, 260px); }
.hb-page { position: relative; }
.hb-page > img { display: block; width: 100%; height: auto; }
.hb-v { position: absolute; display: block; object-fit: cover; background: #0b3a7a; }
.hb-page > .hb-over { position: absolute; display: block; pointer-events: none; }
.carl-ads.hen-reels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .carl-ads.hen-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a set's piece can be a film: it sits in the frame as an image does */
.ft-item video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; }
.ft-item--photo video { border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
/* the special awards: the CFFC 100 badge's light, prismatic */
.prism { touch-action: pan-y; margin: 0; }
.prism-tilt { will-change: transform; }
.prism svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.22)); }
.prism-sheen { mix-blend-mode: screen; }
/* the line, to scale: one baseline, each piece at its true height against the tallest */
.ct-scale { --rh: clamp(260px, 36vw, 520px); display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3.4vw, 54px); padding-top: 24px; }
.ct-scale figure { --p: calc(var(--rh) * var(--h)); margin: 0; height: var(--p); }   /* --p: the product's own height */
.ct-scale img { display: block; width: auto; max-width: none; height: calc(var(--p) * var(--ih)); mix-blend-mode: multiply;
  margin: calc(var(--p) * var(--mt)) calc(var(--p) * var(--mr)) calc(var(--p) * var(--mb)) calc(var(--p) * var(--ml)); }   /* the shadow runs past the box */
/* the pails: smaller, and standing on the frame's floor so a shorter pail sits lower, not higher */
.ct-pails .ft-frame { width: min(100%, 460px); margin: 0 auto; }
.ct-pails .ft-item { align-items: flex-end; padding: 0; }
.ct-group img { display: block; width: min(100%, 1000px); height: auto; margin: 0 auto; }
.ct-group { margin: 0; }
/* insulpure: the bag big, the roll in proportion */
.ct-bags .ft-item--float { padding: 1% 0; }
.ct-roll img { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; }
/* a 3D piece */
.bx-real.ct-real { height: clamp(460px, 50vw, 700px); }
.ct-3d { display: grid; }
.ct-3d .ba-seg { justify-self: center; margin-top: 18px; }
.ct-3d > .bx-real-hint { position: static; translate: none; justify-self: center; margin-top: 10px; }

/* Misc: the catch-all, one client to a tab. Each tab opens on who the client is: the mark, the field, a line */
.mi-intro { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding-bottom: clamp(20px, 3vh, 36px); border-bottom: 1px solid var(--line); }
.mi-mark { display: flex; align-items: center; justify-content: center; }   /* the mark centred in its column, not tucked to one side */
.mi-mark img { display: block; width: clamp(220px, 24vw, 340px); height: auto; max-width: 100%; }
.mi-mark img[src*="hubbub/"] { width: auto; height: clamp(150px, 15vw, 210px); }   /* Hubbub's stacked wordmark, sized by its height */
.mi-meta { display: grid; gap: 12px; justify-items: start; }
.mi-meta .lede { margin: 0; max-width: 46ch; }
.mi-zenith { display: inline-flex; align-items: center; gap: 18px; color: var(--ink); }
.mi-zenith svg { width: clamp(44px, 4vw, 60px); height: auto; }
.mi-zenith span { font: 600 clamp(20px, 2vw, 28px)/1 "Archivo", sans-serif; letter-spacing: 0.24em; }
.mi-zenith b { font-weight: 400; margin-left: 0.5em; padding-left: 0.5em; border-left: 1px solid currentColor; color: var(--ink-3); }
.mi-films video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Carlisle (carlisle.html): the tab intro (the Misc intro, with the product's mark above), the board renders, the square posts,
   the site's frame and the ads */
.mi-intro--solo { grid-template-columns: minmax(0, 1fr); }
.mi-intro--stack { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(18px, 2.4vw, 28px); }
.mi-intro--stack .mi-mark { justify-content: flex-start; }
.mi-mark img[src*="tt7/logo"] { width: min(100%, 560px); height: auto; }
.carl-renders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.carl-renders figure { margin: 0; }
.carl-renders img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
.carl-square .ft-frame { max-width: 640px; margin-inline: auto; }
/* the site sits on its own navy: a white frame bled a light fringe round the dark pages and flashed while they loaded (Sean: banding) */
.carl-site .ft-view { background: #15212c; box-shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.carl-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.carl-ads video { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; background: #000; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
/* Carlisle, the Commercial Cutaway (carl-cut.js): the Henry building model as a Photoshop-style layers panel beside the render. The stage
   color is baked into every layer (img/carlisle/_src/cut/make_cut.py STAGE), so a layer is an exact patch over the one below; keep them equal */
.cut { display: grid; gap: 14px; }
.cut-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cut-build { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 15px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.cut-build svg { width: 13px; height: 13px; fill: var(--accent); transition: fill 0.25s ease; }
.cut-build:hover { background: var(--accent); color: var(--on-accent); }
.cut-build:hover svg { fill: var(--on-accent); }
.cut-build .i-skip, .cut-build.is-playing .i-play { display: none; }
.cut-bar > .cut-build:only-child { margin-left: auto; }   /* one view, no switch: the button keeps its place over the panel */
.cut-build.is-playing .i-skip { display: block; }
.cut-build:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cut-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.cut-stages { min-width: 0; }
.cut-stage { position: relative; overflow: hidden; border-radius: 14px; background: #262b2f; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.6); -webkit-tap-highlight-color: transparent; }
.cut-stage[hidden], .cut-panel[hidden] { display: none; }
.cut-img { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cut-base { inset: 0; width: 100%; }
.cut-l { transition: opacity 0.35s ease; }
.cut-l.off { opacity: 0; }
.cut-l.no-tr { transition: none; }
.cut-scrim { position: absolute; inset: 0; z-index: 50; background: rgb(15 18 21 / 0.64); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.cut-stage.is-focus .cut-scrim { opacity: 1; }
.cut-l.is-focus { z-index: 60; filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.85)) drop-shadow(0 0 14px color-mix(in oklch, var(--accent) 75%, transparent)); }
.cut-tag { --dx: 0px; position: absolute; z-index: 70; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.cut-tag.on { opacity: 1; }
.cut-tag > span { display: block; }
.cut-tag::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 28%, transparent); }
.cut-tag::after { content: ""; position: absolute; left: 0; bottom: 8px; width: 1px; height: 18px; background: var(--accent); }
.cut-tag-box { position: absolute; left: var(--dx); bottom: 26px; transform: translateX(-50%); display: grid; gap: 3px; padding: 9px 14px 10px; border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent); border-radius: 10px; background: rgb(17 21 24 / 0.93); white-space: nowrap; box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.7); }
.cut-tag.below::after { bottom: auto; top: 8px; }
.cut-tag.below .cut-tag-box { bottom: auto; top: 26px; }
.cut-tag .lbl { font-size: 11px; color: var(--accent); }
.cut-tag-p { font-size: 15px; color: var(--ink); }
.cut-tag-p:empty { display: none; }
.cut-panel { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklch, var(--g2) 50%, transparent); }
.cut-panel-in { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cut-list { list-style: none; margin: 0; padding: 4px 0 6px; }
.cut-row, .cut-grp { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 7px 12px 7px 8px; }
.cut-row { border-top: 1px solid color-mix(in oklch, var(--line) 60%, transparent); cursor: default; transition: background-color 0.2s ease, opacity 0.25s ease; }
.cut-row:hover, .cut-row.is-focus { background: color-mix(in oklch, var(--accent) 11%, transparent); }
.cut-grp { padding-top: 14px; padding-bottom: 5px; }
.cut-grp .lbl { padding-left: 2px; font-size: 12px; color: var(--accent); }
.cut-txt { display: grid; gap: 1px; min-width: 0; }
.cut-row[data-g] .cut-txt, .cut-vars { padding-left: 16px; }
.cut-sys { font-size: 12px; letter-spacing: 0.03em; color: var(--ink-3); }
.cut-prod { font-size: 15px; line-height: 1.25; color: var(--ink); }
.cut-row--master { border-top: 0; }
.cut-row--master .cut-prod { font-weight: 600; }
.cut-row--base { border-top: 1px solid var(--line); margin-top: 6px; }
.cut-row--base .cut-prod { color: var(--ink-2); }
.cut-lock { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink-3); }
.cut-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cut-vars { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cut-v { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; line-height: 1.25; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; }
.cut-v:hover { border-color: var(--ink-3); color: var(--ink); }
.cut-v[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--ink); }
.cut-v:focus-visible, .cut-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cut-eye { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-2); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.cut-eye:hover { background: rgb(255 255 255 / 0.06); color: var(--ink); }
.cut-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cut-eye .i-off, .cut-eye[aria-pressed="false"] .i-on { display: none; }
.cut-eye[aria-pressed="false"] .i-off { display: block; color: var(--ink-3); }
.cut-row.is-off .cut-txt, .cut-grp.is-off .lbl { opacity: 0.5; }
.cut-list.is-closed .cut-row[data-g], .cut-list.is-closed .cut-grp { opacity: 0.4; }
.cut-hint { margin: 0; font-size: 14px; color: var(--ink-3); }
@media (max-width: 960px) {
  .cut-main { grid-template-columns: minmax(0, 1fr); }
  .cut-panel-in { position: static; }
}
/* Zenith, the pages: the site itself in the frame, drawn at 1440 by 900 and scaled to fit (firstrust.js, data-mi-site) */
.mi-site .ft-view { overflow: hidden; background: #071a2b; }
.mi-site iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; }
.mi-site.live iframe { pointer-events: none; }
.mi-phones { display: flex; justify-content: center; gap: clamp(18px, 3vw, 44px); }
.mi-phones figure { margin: 0; width: min(28%, 280px); }
.mi-phones img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.45); }
.mi-icons img { width: min(100%, 640px); height: auto; margin: 0 auto; display: block; }
.mi-plug img { width: min(100%, 460px); height: auto; margin: 0 auto; display: block; }
@media (max-width: 760px) { .mi-intro { grid-template-columns: 1fr; } .mi-phones { gap: 10px; } .mi-phones figure { width: 32%; } .mi-phones img { border-radius: 16px; } }

/* ---------- Henry, round two (Sean, 2026-10-13) ---------- */
/* the UltraTouch social wall: rows of four, each its own player so only the rows on screen run */
.hen-wall { display: grid; gap: clamp(12px, 2vw, 28px); }

/* the FastFoam gate fold, staged like the round-one deck: a light studio sweep; the sheet box is the open sheet (17 by 11); the piece is its
   centre panel (8.125 of the sheet's 17 in); the gates (4.625 and 4.25) hinge on its edges and fold in over it, the cover opening first and closing last. Shut on the front they
   meet edge to edge, as the truck across them is drawn (Sean, 2026-10-14): the narrow gate sits 0.75 in further out to do it, and slides
   in or out while the sheet is edge-on when it turns over, so the inside and the back keep the printed panels.
   Shut, the piece lies turned on the table; open, it faces you with the gates standing 22 degrees toward you; the back is straight on */
.gate { display: grid; gap: 18px; justify-items: center; }
.gate-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; perspective: 2400px; cursor: pointer; outline: none;
  background: radial-gradient(120% 95% at 50% 42%, #f1f1f0 0%, #e2e2e1 55%, #cfcfce 100%); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px rgb(0 0 0 / 0.4), 0 26px 44px rgb(0 0 0 / 0.45); }
.gate-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gate-sheet { position: absolute; left: 12%; width: 76%; top: 50%; aspect-ratio: 17 / 11; transform: translateY(-50%); transform-style: preserve-3d; }
.gate-rot { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotate(14deg) scale(0.94); transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1); }
.gate[data-state="inside"] .gate-rot, .gate[data-state="back"] .gate-rot { transform: none; }
.gate-piece { position: absolute; top: 0; bottom: 0; left: 27.206%; width: 47.794%; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1); }
.gate[data-flip] .gate-piece { transform: rotateY(180deg); }
.gate-p { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.gate-c { left: 0; width: 100%; }
.gate-l { right: 100%; width: 56.923%; transform-origin: 100% 50%; transform: translateZ(2px) rotateY(180deg); transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1) 0.12s; }
.gate-r { left: 100%; width: 52.308%; transform-origin: 0 50%; transform: translateZ(1px) rotateY(-180deg); transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1); }
.gate[data-open] .gate-l { transform: translateZ(2px) rotateY(22deg); transition-delay: 0s; }
.gate[data-open] .gate-r { transform: translateZ(1px) rotateY(-22deg); transition-delay: 0.12s; }
.gate-f, .gate-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gate-b { transform: rotateY(180deg); }
.gate-f img, .gate-b img { display: block; width: 100%; height: 100%; }
.gate-f::after, .gate-b::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.gate-c .gate-f::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.12), transparent 5%, transparent 95%, rgb(0 0 0 / 0.12)); }   /* the creases, open */
.gate-l .gate-f::after { background: linear-gradient(270deg, rgb(0 0 0 / 0.1), transparent 10%), linear-gradient(90deg, rgb(255 255 255 / 0.06), transparent 40%); }
.gate-r .gate-f::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.14), transparent 10%); }
.gate-l .gate-b::after { background: linear-gradient(270deg, rgb(0 0 0 / 0.18), transparent 2.5%); }   /* where the gates meet, shut */
.gate-r .gate-b::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.18), transparent 2.5%); }
.gate[data-state="front"] .gate-r { transform: translateX(17.647%) translateZ(1px) rotateY(-180deg); }   /* shut on the front: out 0.75 of its 4.25 in */
.gate.turning .gate-r { transition: transform 0.15s ease 0.35s; }   /* turning over, it slides while the sheet is edge-on */
.gate-sh { position: absolute; top: 5%; bottom: -2.5%; left: 28.7%; right: 26.5%; border-radius: 8px; background: rgb(0 0 0 / 0.3); filter: blur(16px);   /* a soft shadow
  under the paper, never a card's edge, so it can lag the swinging gates */
  transition: left 0.95s cubic-bezier(0.65, 0, 0.35, 1), right 0.95s cubic-bezier(0.65, 0, 0.35, 1); }
.gate[data-open] .gate-sh { left: 4%; right: 4%; }
.gate[data-state="front"] .gate-sh { right: 22.1%; }   /* shut on the front the piece is 0.75 in wider */
/* the shadow lives on its own flat copy of the sheet, painted before the paper, so the turning piece never swings behind it; while the piece
   turns over (henry.js adds .turning) the shadow narrows to the edge and back, as the sheet's own width does */
.gate-shade, .gate-shade .gate-rot { transform-style: flat; }
.gate.turning .gate-shade .gate-sh { animation: gate-turn 0.85s cubic-bezier(0.75, 0, 0.95, 0.25); }
@keyframes gate-turn {   /* the ends are wherever the shadow sits */
  50% { left: 50.1%; right: 47.9%; animation-timing-function: cubic-bezier(0.05, 0.75, 0.25, 1); }
}
@media (prefers-reduced-motion: reduce) { .gate-rot, .gate-piece, .gate-l, .gate-r, .gate-sh { transition: none; } .gate.turning .gate-shade .gate-sh { animation: none; } }

/* the cutaway by area: an area fades shut once its products are off */
.cut-a { transition: opacity 0.35s ease; }
.cut-a.off { opacity: 0; }
.cut-a.no-tr { transition: none; }
/* the residential house on white (the dark stage hid it), its controls under the stage in a column per group */
.cut--light .cut-stage { background: #fff; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
.cut--light .cut-scrim { background: rgb(255 255 255 / 0.66); }
.cut--light .cut-l.is-focus { filter: drop-shadow(0 0 1px rgb(20 40 60 / 0.5)) drop-shadow(0 0 16px color-mix(in oklch, var(--accent) 70%, transparent)); }
.cut--below .cut-main { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.cut--below .cut-panel { border: 0; background: none; }
.cut--below .cut-panel-in { position: static; overflow: visible; }
.cut--below .cut-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px clamp(14px, 2.2vw, 30px); padding: 0; }
.cut-col { min-width: 0; }
.cut-col-in { list-style: none; margin: 0; padding: 0; }
.cut--below .cut-grp { padding: 0 8px 8px 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cut--below .cut-row { border-top: 0; border-radius: 10px; padding: 7px 8px 7px 4px; }
.cut--below .cut-row[data-g] .cut-txt, .cut--below .cut-vars { padding-left: 0; }
.cut-bar > .cut-row--master { display: inline-grid; grid-template-columns: 30px auto; padding: 3px 16px 3px 6px; border: 1px solid var(--line); border-radius: 999px; }
.cut-bar > .cut-row--master:hover { background: none; }
@media (max-width: 880px) { .cut--below .cut-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cut--below .cut-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Let's Talk (Sean picked wireframe A, 2026-10-13): the four questions beside the brief they write ---------- */
.lt-hero { padding-top: clamp(150px, 22vh, 220px); padding-bottom: clamp(80px, 12vh, 140px); }   /* .page-hero's spacing, no thread field */
.lt-hero .beat-in { gap: clamp(20px, 3vh, 32px); }
.lt-hero .lede { max-width: 50ch; }
.lt-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(8px, 2vh, 20px); }
.lt-pair .brief { align-content: start; }
.brief-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.brief-head .lbl { color: var(--accent); }
.brief-head .small { color: var(--ink-3); }
.lt-pair .b-val { color: var(--ink); transition: color 0.3s var(--ease-out); }
.lt-pair .b-val.empty { color: var(--ink-3); }
.direct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.direct-lines { display: grid; gap: 10px; justify-items: start; }
.direct-lines .hd { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; transition: color 0.3s var(--ease-out); }
.direct-lines .hd:hover, .direct-lines .hd:focus-visible { color: var(--accent); }
.direct-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; font-size: 15px; }
.direct-meta a { color: var(--ink-2); text-decoration: none; transition: color 0.3s var(--ease-out); }
.direct-meta a:hover, .direct-meta a:focus-visible { color: var(--accent); }
@media (max-width: 880px) { .lt-pair, .direct { grid-template-columns: minmax(0, 1fr); } .direct { align-items: start; } }

/* ---------- case studies: Previous beside Next (Sean, 2026-10-13: go backward as well as forward) ---------- */
.cs-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--line); padding-top: 26px; }
.cs-pn .cs-next { border-top: 0; padding-top: 0; }
.cs-prev { display: flex; justify-content: flex-start; align-items: end; text-align: left; text-decoration: none; color: inherit; }
.cs-prev .hd { transition: color 0.3s ease; }
.cs-prev:hover .hd { color: var(--accent); }
@media (max-width: 720px) { .cs-pn { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- 404 (Sean, 2026-10-13): a giant 4, the snap as the 0, a 4; copy option C ---------- */
.nf { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.nf-code { font-size: clamp(150px, 36vw, 340px); line-height: 0.82; color: var(--ink); white-space: nowrap; margin: 0 0 clamp(6px, 2vh, 20px) -0.04em; }
.nf-code .nf-4 { display: inline-block; }
.nf-code .mark { display: inline-block; height: 0.9em; width: auto; vertical-align: baseline; margin: 0 0.03em 0 0.05em; color: var(--accent); overflow: visible; }
.nf-anim:not(.nf-live) .nf .wrap { opacity: 0; }   /* the inside pages' handoff: nf.js adds nf-live once its timeline holds the pieces; the head adds it after 3s regardless */
.page main > .beat.nf .hd-xl { max-width: none; }   /* the closing-line cap (16ch) is for a page's last section; here the hero is the only one */

/* ---------- Get to Know Us: the 12 categories the facts count (Sean, 2026-10-13). One run of names, each closed by the teal period ---------- */
.cats-h { margin: 0; }
.cats { list-style: none; margin: 0; padding: 0; }
.cats li { display: inline; white-space: nowrap; }

/* ---------- phones only (Sean, 2026-10-13): the services and the partner logos scroll sideways, the next one peeking in ---------- */
@media (max-width: 880px) {
  .hz-track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .hz-track::-webkit-scrollbar { display: none; }
  .hz-panel { flex: 0 0 86%; scroll-snap-align: start; }
  .partners { grid-template-columns: none; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: 29%; overflow-x: auto;
    scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .partners::-webkit-scrollbar { display: none; }
  .pl { scroll-snap-align: start; }
}