/* Light site. Two primary colours, red and ice blue, used for fills, marks and highlights. Text is black or white. */
:root {
  --black: #0a0a0a;
  --char: #111418;        /* dark panels, slightly cool */
  --white: #ffffff;
  --bg: #ffffff;
  --red: #e30b22;
  --red-deep: #b8081b;
  --ice: #b6e0f6;
  --ice-soft: #ebf6fc;    /* light panels */
  --ice-hero: #dcf0fa;    /* the hero and the navbar */
  --ice-line: #9fd3ef;
  --muted: #45484c;       /* secondary text: still reads as black, ~9:1 on white */
  --muted-dark: rgba(255,255,255,.78);
  --line: rgba(10,10,10,.12);
  --display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --lane: clamp(64px, 15.75vw, 230px);  /* the channel on the right of each section that the route zigzags down */
  --route-w: clamp(26px, 6.25vw, 90px); /* the route: 90px on desktop, 26px on a phone */
  --gut: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; scrollbar-gutter: stable; overflow-anchor: none; }   /* main.js keeps a tapped package card in place itself */
html.is-loading { overflow: hidden; }
body { margin: 0; overflow-anchor: none; background: var(--bg); color: var(--black); font: 400 16.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: normal; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: .98; word-spacing: .06em; }
h2 { font-size: clamp(40px, 6vw, 88px); }
h3 { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
/* Highlight: an ice-blue marker band behind black text; red behind white text on dark panels. */
h1 em, h2 em, .hl { background: linear-gradient(transparent 60%, var(--ice) 60%, var(--ice) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; }
.dark h2 em, .dark .hl { background-image: linear-gradient(transparent 60%, var(--red) 60%, var(--red) 90%, transparent 90%); }
::selection { background: var(--ice); color: var(--black); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--red); color: var(--white); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
section { padding: clamp(90px, 12vw, 160px) 0; }
.sec-head { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(40px, 6vw, 80px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 12px 0 0 var(--ice); margin-right: 12px; }
.lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); max-width: 56ch; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Buttons: on hover they grow and take a different colour (a fill wipes up from below). */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: 500 15px/1.2 var(--sans); text-decoration: none; border: 1px solid transparent; background: transparent; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s, transform .45s var(--ease), box-shadow .45s var(--ease); white-space: nowrap; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .45s var(--ease); }
.btn:hover { transform: scale(1.07); box-shadow: 0 14px 30px -14px rgba(10,10,10,.35); }
.btn:hover::before { transform: none; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red::before { background: var(--ice); }
.btn-red:hover { color: var(--black); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark::before { background: var(--red); }
.btn-ghost { border-color: rgba(10,10,10,.3); color: var(--black); }
.btn-ghost::before { background: var(--ice); }
.btn-ghost:hover { border-color: var(--ice); }
.dark .btn-ghost { border-color: rgba(255,255,255,.4); color: var(--white); }
.dark .btn-ghost:hover { color: var(--black); }

/* Top bar: liquid-glass capsule */
/* Hidden over the hero. When you start scrolling it opens out from a small pill in the centre, its contents rise in
   one after another, and a red-to-ice line sweeps along its foot. (main.js sets html.bar-on.) */
.bar { position: fixed; inset: 14px 0 auto; z-index: 60; padding: 0 var(--gut); pointer-events: none; }
.bar-in { position: relative; transition: clip-path 1s var(--ease), opacity .45s var(--ease), transform 1s var(--ease), filter .8s var(--ease); }
.bar-in > * { transition: opacity .6s var(--ease), transform .8s var(--ease); }
.bar-in > :nth-child(1) { transition-delay: .32s; } .bar-in > :nth-child(2) { transition-delay: .42s; } .bar-in > :nth-child(3) { transition-delay: .52s; }
.bar-links a { transition: color .25s, background .25s, opacity .5s var(--ease), transform .7s var(--ease); }
.bar-links a:nth-child(1) { transition-delay: 0s, 0s, .4s, .4s; } .bar-links a:nth-child(2) { transition-delay: 0s, 0s, .46s, .46s; }
.bar-links a:nth-child(3) { transition-delay: 0s, 0s, .52s, .52s; } .bar-links a:nth-child(4) { transition-delay: 0s, 0s, .58s, .58s; }
.bar-in::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--red) 25%, var(--ice) 75%, transparent); transform: scaleX(0); transition: transform 1.2s .25s var(--ease), opacity .6s; pointer-events: none; }
html.bar-on .bar-in::after { transform: scaleX(1); }
html:not(.bar-on) .bar:not(:focus-within) .bar-in { clip-path: inset(0 calc(50% - 28px) 0 calc(50% - 28px) round 999px); opacity: 0; transform: translateY(-28px) scale(.94); filter: blur(6px); pointer-events: none; transition-duration: .6s, .35s, .6s, .4s; }
html:not(.bar-on) .bar:not(:focus-within) .bar-in > *, html:not(.bar-on) .bar:not(:focus-within) .bar-links a { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.bar-in { pointer-events: auto; max-width: 1360px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 20px; border-radius: 999px; background: linear-gradient(180deg, rgba(190,225,246,.94), rgba(166,211,239,.92)); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(110,175,218,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 40px -14px rgba(20,60,90,.3); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--red); }
.brand-h { width: 22px; height: 28px; }
.brand-name { display: grid; font: 600 17px/1 var(--display); letter-spacing: .04em; color: var(--black); text-transform: uppercase; }
.brand-name small { font: 500 9.5px/1.4 var(--sans); letter-spacing: .32em; color: #23272b; margin-top: 3px; }
.bar-links { display: flex; gap: 4px; }
.bar-links a { padding: 10px 14px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--black); border-radius: 999px; }
.bar-links a:hover { color: var(--black); background: rgba(255,255,255,.75); }
.bar-cta { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(10,10,10,.35); background: transparent; cursor: pointer; place-content: center; gap: 5px; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--black); }
@media (max-width: 900px) {
  .bar-links, .bar-cta .btn { display: none; }
  .menu-btn { display: grid; }
}

/* Full-screen menu */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 26px var(--gut) 32px; border: 0; background: var(--red); color: var(--white); display: none; flex-direction: column; justify-content: space-between; }
.menu[open] { display: flex; animation: menuIn .6s var(--ease); }
.menu::backdrop { background: transparent; }
.menu .brand-name, .menu .brand-name small { color: var(--white); }
.menu .btn-ghost { border-color: rgba(255,255,255,.5); color: var(--white); }
.menu .btn-ghost:hover { color: var(--black); }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-links a { display: flex; align-items: baseline; gap: 18px; font: 500 clamp(56px, 13vw, 150px)/.95 var(--display); letter-spacing: -.03em; text-decoration: none; transition: transform .4s var(--ease), color .3s; }
.menu-links a:hover { transform: translateX(14px); color: var(--black); }
.menu-links small { font: 500 13px var(--sans); letter-spacing: .1em; opacity: .7; }
.menu[open] .menu-links li { animation: rise .7s var(--ease) both; }
.menu[open] .menu-links li:nth-child(2) { animation-delay: .06s; }
.menu[open] .menu-links li:nth-child(3) { animation-delay: .12s; }
.menu[open] .menu-links li:nth-child(4) { animation-delay: .18s; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
@keyframes menuIn { from { clip-path: circle(0 at calc(100% - 40px) 40px); } to { clip-path: circle(150% at calc(100% - 40px) 40px); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Bracket cursor (concepts/iris/cursor): four corner ticks, no dot, no ring. They frame links and buttons and turn
   red; over cards they become a label pill. White over dark panels. Touch gets a bracket snap on tap instead. */
@media (hover: hover) and (pointer: fine) { html.cur-on, html.cur-on * { cursor: none !important; } }
.cur { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: var(--w, 20px); height: var(--h, 20px); transform: translate3d(var(--x, -100px), var(--y, -100px), 0); opacity: 0; --c: var(--black); transition: width .32s var(--ease), height .32s var(--ease), opacity .2s; }
.cur.show { opacity: 1; }
.cur.dark { --c: var(--white); }
.cur.hot { --c: var(--red); }
.cur.hot.dark { --c: var(--ice); }
.cur i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--c); transition: border-color .2s, transform .2s, opacity .2s; }
.cur i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.cur i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.cur i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.cur i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.cur.down { --c: var(--red); }
.cur.down i:nth-child(1) { transform: translate(2px, 2px); } .cur.down i:nth-child(2) { transform: translate(-2px, 2px); }
.cur.down i:nth-child(3) { transform: translate(2px, -2px); } .cur.down i:nth-child(4) { transform: translate(-2px, -2px); }
/* Over small text: a caret. */
.cur::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--red); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .25s var(--ease); }
.cur.dark::before { background: var(--ice); }
.cur.text::before { opacity: 1; transform: none; }
.cur.text i { opacity: 0; }
.cur b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; background: var(--red); color: var(--white); font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ease); }
.cur.label i { opacity: 0; }
.cur.label b { opacity: 1; transform: none; }
.tap { position: fixed; z-index: 300; pointer-events: none; animation: tap .5s var(--ease) forwards; }
.tap i { position: absolute; width: 9px; height: 9px; border: 0 solid var(--red); }
.tap i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .tap i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.tap i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .tap i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
@keyframes tap { 0% { opacity: 0; inset: var(--o); } 25% { opacity: 1; } 70% { opacity: 1; inset: var(--i); } 100% { opacity: 0; inset: var(--i); } }

/* Hero: the studio's name, large, along the bottom; the tagline, intro and buttons above it on the left; the 3D H
   top right, on ice blue. No navbar here: it arrives when you start scrolling. */
/* The hero is not positioned, so its ice background paints under the route like every section's; its text is
   positioned so it stays above. The H (absolute) is placed against main, which starts where the hero does. */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: clamp(28px, 5vh, 56px); padding: clamp(56px, 10vh, 110px) var(--gut) clamp(40px, 6vh, 72px); overflow: hidden; background:
  radial-gradient(45% 55% at 74% 30%, rgba(182,224,246,.95), transparent 64%),
  radial-gradient(40% 50% at 92% 8%, rgba(227,11,34,.06), transparent 70%),
  radial-gradient(60% 50% at 20% 100%, rgba(255,255,255,.55), transparent 70%),
  linear-gradient(180deg, #e6f4fb, var(--ice-hero)); }
.hero-copy, .hero-word { position: relative; }
.hero em { background-image: linear-gradient(transparent 60%, var(--white) 60%, var(--white) 90%, transparent 90%); }
.hero-mark { position: absolute; right: calc(var(--lane) * .77); top: clamp(48px, 9vh, 100px); height: 40vh; height: 40svh; aspect-ratio: 820 / 1040; color: var(--red); pointer-events: none; }
.gl-live .hero-mark { visibility: hidden; }
main { position: relative; }            /* no stacking context: the marquee band can rise above the logo layer */
.foot { position: relative; z-index: 1; }

/* Layers, bottom to top: section backgrounds, the route (first in main, positioned), content (positioned, later),
   route-top (over the process sheets and the contact), the 3D logo (45), bands (the marquee, 50), the bar (60). */
.route { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.route path { fill: none; stroke-width: var(--route-px, 36px); stroke-linecap: round; stroke-linejoin: round; }
.route-ahead { stroke: var(--ice); }  /* the way ahead */
.route-done { stroke: var(--red); }   /* travelled */
.route-cap { fill: var(--red); }
.route-top { z-index: 2; }            /* clipped by route.js to the sections that would otherwise cover the route */
.route-marker { position: fixed; left: 0; top: 0; z-index: 45; width: auto; aspect-ratio: 820 / 1040; color: var(--red); pointer-events: none; will-change: transform; }
.gl-live .route-marker, html:not(.js) .route-marker { display: none; }
.logo-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
main > section > .wrap, .marquee-track { position: relative; }
.marquee { position: relative; z-index: 50; }

/* Channel: content keeps clear of the route's strip on the side the section names (all right, for now). */
[data-lane="l"] { --lane-l: var(--lane); }
[data-lane="r"] { --lane-r: var(--lane); }
main > section > .wrap {
  padding-left: max(var(--gut), calc(var(--lane-l, 0px) + 16px - max(0px, (100vw - var(--wrap)) / 2)));
  padding-right: max(var(--gut), calc(var(--lane-r, 0px) + 16px - max(0px, (100vw - var(--wrap)) / 2))); }
.hero-copy { display: grid; gap: 22px; align-content: start; justify-items: start; max-width: min(620px, 52%); }
.hero-tag { font: 500 clamp(28px, 3.4vw, 54px)/1.02 var(--display); letter-spacing: -.025em; }
.hero-lede { font-size: 18px; color: var(--muted); max-width: 44ch; }
/* The name: sized so "Hypernova" fills the width left of the route's channel. */
.hero-word { font-size: clamp(42px, min(calc((100vw - var(--lane) - var(--gut) - 24px) / 5.2), calc(42vh - 160px)), 240px);
  font-size: clamp(42px, min(calc((100vw - var(--lane) - var(--gut) - 24px) / 5.2), calc(42svh - 160px)), 240px); line-height: .84; letter-spacing: -.045em; word-spacing: 0; }
.hero-word .line { padding-bottom: .1em; }
/* The tagline is the h1 (it names the work and the place); the big name is a styled p. Keep both looking as before. */
.hero-word { font-family: var(--display); font-weight: 500; }
.hero-word em { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; }
.hero-tag { word-spacing: normal; }
.hero-tag em { padding: 0; }
.hero, .process .sheet { padding-left: max(var(--gut), calc(var(--lane-l, 0px) + 16px)); padding-right: max(var(--gut), calc(var(--lane-r, 0px) + 16px)); }
@media (max-width: 900px) {
  .hero { grid-template-rows: auto auto; align-content: end; padding-top: calc(36px + 22svh + 20px); gap: 26px; }
  .hero-word { order: -1; font-size: clamp(42px, calc((100vw - var(--lane) - var(--gut) - 24px) / 5.2), 240px); }
  .hero-copy { max-width: none; }
  .hero-mark { right: var(--gut); top: 36px; height: 22vh; height: 22svh; }
  .hero { background: radial-gradient(70% 40% at 82% 18%, rgba(182,224,246,.95), transparent 70%), linear-gradient(180deg, #e6f4fb, var(--ice-hero)); }
}

/* Masked line reveal (from the chapter-sheets component) */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.line:nth-child(2) > span { transition-delay: .08s; }
.line:nth-child(3) > span { transition-delay: .16s; }
.is-in .line > span, html:not(.js) .line > span { transform: none; }

/* Marquee: a band. The route and the travelling logo pass under it. */
.marquee { overflow: hidden; background: var(--black); color: var(--white); padding: 20px 0; }
.marquee-track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font: 500 clamp(30px, 3.8vw, 56px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.marquee svg { width: 26px; height: 34px; flex: none; color: var(--red); }
.marquee svg:nth-of-type(even) { color: var(--ice); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Services: numbered list */
.services { background: transparent; }
.svc-list { border-top: 1px solid var(--line); background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.svc { border-bottom: 1px solid var(--line); }
.svc summary { position: relative; list-style: none; cursor: pointer; display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, .9fr) 48px; gap: 24px; align-items: center; padding: clamp(24px, 3.2vw, 40px) 18px; isolation: isolate; transition: color .35s; }
.svc summary::-webkit-details-marker { display: none; }
.svc summary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ice-soft); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); }
.svc summary:hover::before, .svc[open] summary::before { transform: scaleY(1); }
.svc-n { font: 500 14px var(--sans); letter-spacing: .1em; color: var(--muted); }
.svc-t { font: 500 clamp(30px, 3.6vw, 54px)/1 var(--display); letter-spacing: -.03em; transition: transform .55s var(--ease); }
@media (hover: hover) { .svc summary:hover .svc-t { transform: translateX(12px); } }
.svc-p { font-size: 15.5px; color: var(--muted); max-width: 44ch; transition: color .35s; }
.svc-x { position: relative; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; opacity: .55; transition: transform .5s var(--ease), background .3s, opacity .3s; }
.svc-x::before, .svc-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.svc-x::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.svc summary:hover .svc-x { opacity: 1; }
.svc[open] .svc-x { background: var(--red); border-color: var(--red); color: var(--white); opacity: 1; transform: rotate(180deg); }
.svc[open] .svc-x::after { transform: translate(-50%, -50%) rotate(0deg); }
.svc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; padding: 6px 18px 36px 112px; background: var(--ice-soft); }
.svc-body .ticks { gap: 10px; max-width: 62ch; }
.svc[open] .svc-body { animation: rise .6s var(--ease); }
.ticks { display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 2px; background: var(--red); }
@media (max-width: 860px) {
  .svc summary { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "n x" "t x" "p p"; gap: 6px 16px; padding: 24px 8px; }
  .svc-n { grid-area: n; font-size: 12px; }
  .svc-t { grid-area: t; font-size: clamp(26px, 7.2vw, 40px); line-height: 1.04; }
  .svc-p { grid-area: p; margin-top: 6px; max-width: none; }
  .svc-x { grid-area: x; align-self: center; width: 40px; height: 40px; }
  .svc-body { grid-template-columns: 1fr; justify-items: start; gap: 20px; padding: 4px 8px 28px; }
}

/* Kinds of website: the space is split in two. Left, three short cards; right, the chosen card's full details.
   Hovering a card enlarges it and dims the others, and its details slide in on the right. */
.tiers { background: transparent; padding-bottom: clamp(60px, 8vw, 110px); }
.tier-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.tier-list { display: grid; gap: 12px; align-content: start; }
.tier { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "budget arrow" "name arrow" "short arrow"; gap: 6px 16px; align-items: center; width: 100%; padding: 22px 24px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--bg); color: var(--black); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 40px -30px rgba(0,0,0,.2); transform-origin: left center; transition: transform .5s var(--ease), opacity .4s, border-color .3s, background .35s, color .35s, box-shadow .5s var(--ease); }
.tier .budget { grid-area: budget; }
.tier-name { grid-area: name; font: 500 clamp(22px, 2vw, 28px)/1.05 var(--display); letter-spacing: -.02em; }
.tier-short { grid-area: short; font-size: 15px; color: var(--muted); }
.tier-arrow { grid-area: arrow; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; opacity: .35; transition: opacity .3s, transform .4s var(--ease), background .3s, border-color .3s; }
.tier-arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-65%, -50%) rotate(45deg); }
@media (hover: hover) { .tier-list:hover .tier:not(:hover) { opacity: .45; } }
.tier.is-active { background: var(--black); color: var(--white); border-color: var(--black); transform: scale(1.035); box-shadow: 0 30px 60px -32px rgba(10,10,10,.5); z-index: 1; }
.tier.is-active .tier-short { color: var(--muted-dark); }
.tier.is-active .tier-arrow { opacity: 1; background: var(--red); border-color: var(--red); transform: translateX(4px); }
.tier.is-active .meter i.off { background: rgba(182,224,246,.3); }
.tier:hover:not(.is-active) { border-color: var(--red); }
.tier-panel { display: grid; border-radius: 26px; background: var(--ice-soft); border: 1.5px solid var(--ice); padding: clamp(24px, 3vw, 40px); }
.tier-detail { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; }
.tier-detail[hidden] { display: flex; visibility: hidden; }   /* all three share one cell, so the panel keeps the tallest one's height */
.tier-detail.is-active { animation: detailIn .55s var(--ease); }
@keyframes detailIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.tier-detail { gap: 20px; }
.tier-detail h3 { font: 500 clamp(28px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.025em; padding-bottom: 18px; border-bottom: 1px solid var(--ice-line); }
.tier-detail .ticks { gap: 11px; font-size: 15.5px; }
.tier-act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.budget { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.meter { display: inline-flex; gap: 4px; }
.meter i { width: 20px; height: 7px; border-radius: 4px; background: var(--red); }
.meter i.off { background: var(--ice); }
.tier-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 32px); border-radius: 26px; background: var(--black); color: var(--white); }
.tier-cta p { max-width: 58ch; font-size: 17px; color: var(--muted-dark); }
.tier-cta b { display: block; font: 500 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.01em; margin-bottom: 6px; color: var(--white); }
@media (max-width: 960px) {
  .tier-split { display: flex; flex-direction: column; gap: 10px; }
  .tier-list, .tier-panel { display: contents; }
  .tier:nth-child(1) { order: 1; } .tier-detail:nth-child(1) { order: 2; }
  .tier:nth-child(2) { order: 3; } .tier-detail:nth-child(2) { order: 4; }
  .tier:nth-child(3) { order: 5; } .tier-detail:nth-child(3) { order: 6; }
  .tier { padding: 20px; }
  .tier.is-active { transform: none; border-radius: 22px 22px 10px 10px; }
  .tier-detail { gap: 12px; margin-top: -6px; padding: 22px 20px 24px; border-radius: 10px 10px 22px 22px; background: var(--ice-soft); border: 1.5px solid var(--ice); }
  .tier-detail[hidden] { display: none; }
  .tier-detail > h3 { display: none; }   /* already on the card above */
  .tier-act .btn { flex: 1 1 auto; justify-content: center; }
}

/* Work: the copy on the left, the homepage preview on the right (scales up as it scrolls in) */
.work { background: transparent; padding-top: clamp(50px, 7vw, 100px); padding-bottom: clamp(70px, 9vw, 120px); }
.work-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "head shot" "grid shot"; gap: 36px clamp(32px, 5vw, 72px); align-items: start; }
.work-split .sec-head { grid-area: head; margin-bottom: 0; }
.work-split .sec-head h2 { font-size: clamp(38px, 4.4vw, 64px); }
.work-shot { grid-area: shot; align-self: center; }
@media (max-width: 860px) { .work-split { grid-template-columns: 1fr; grid-template-areas: "head" "shot" "grid"; } }
.work-shot { display: block; border-radius: 22px; overflow: hidden; text-decoration: none; background: #222; box-shadow: 0 50px 100px -50px rgba(0,0,0,.35); }
.work-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #262626; font-size: 12.5px; color: rgba(255,255,255,.7); }
.work-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.work-bar i:first-child { background: var(--red); }
.work-bar i:nth-child(2) { background: var(--ice); }
.work-bar b { font-weight: 400; margin-left: 10px; }
.work-shot img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.work-shot:hover img { transform: scale(1.03); }
@supports (animation-timeline: view()) {
  .work-shot { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes grow { from { transform: scale(.82) translateY(40px); border-radius: 44px; } to { transform: none; border-radius: 22px; } }
}
.work-grid { grid-area: grid; display: grid; gap: 24px; }
.work-grid h3 { font: 500 22px/1.1 var(--display); margin-bottom: 10px; }
.work-grid p { color: var(--muted); }

/* Process: chapter sheets slide over each other (component 04). Everything sits in the top of the sheet, so the
   next sheet, which slides up from the bottom, never covers the small text before it has been read. */
.process { padding: 0; background: var(--bg); }
.sheet { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; padding: 104px var(--gut) clamp(36px, 6vh, 64px); border-radius: 34px 34px 0 0; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.sheet header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.sheet h2 { margin: clamp(28px, 7vh, 80px) 0 clamp(28px, 5vh, 56px); font-size: clamp(48px, 9vw, 156px); line-height: .9; letter-spacing: -.045em; }
.sheet footer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; max-width: 980px; }
.sheet footer div { border-top: 2px solid currentColor; padding-top: 16px; }
.sheet footer b { display: block; font: 500 clamp(19px, 1.6vw, 24px)/1.15 var(--display); letter-spacing: -.01em; margin-bottom: 8px; }
.sheet footer p { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; }
.s1 { background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
.s2 { background: var(--char); color: var(--white); }
.s3 { background: var(--ice-soft); color: var(--black); }
.sheet h2 .line:last-child > span > span { background: linear-gradient(transparent 60%, var(--ice) 60%, var(--ice) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s2 h2 .line:last-child > span > span { background-image: linear-gradient(transparent 60%, var(--red) 60%, var(--red) 90%, transparent 90%); }
.s3 h2 .line:last-child > span > span { background-image: linear-gradient(transparent 60%, var(--ice-line) 60%, var(--ice-line) 90%, transparent 90%); }
@media (max-width: 640px) {
  .process::after { content: ""; display: block; height: 22vh; }   /* room for the last card to settle on the stack */
  .sheet { top: calc(84px + var(--i, 0) * 14px); height: auto; padding-top: 32px; padding-bottom: 38px; border-radius: 28px; }
  .s1 { box-shadow: 0 0 0 1px var(--line); }
  .s2 { --i: 1; } .s3 { --i: 2; }
  .sheet h2 { margin: 22px 0 24px; font-size: clamp(34px, 10vw, 50px); }
  .sheet footer { grid-template-columns: 1fr; gap: 16px; }
  .sheet footer p { font-size: 16px; }
}

/* About: the heading beside the text, then the two of us side by side */
.about { background: var(--ice-soft); }
.about-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 96px); align-items: end; }
.about-copy { display: grid; gap: 22px; }
.about-text { display: grid; gap: 16px; font-size: 17px; color: var(--muted); max-width: 56ch; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.people li { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; background: var(--white); border: 1px solid var(--ice); }
.face { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--black); color: var(--white); box-shadow: inset 0 0 0 3px var(--red); font: 500 19px var(--display); letter-spacing: .02em; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.people b { display: block; font: 500 19px/1.2 var(--display); }
.people small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.about .fine { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 860px) { .about-top, .people { grid-template-columns: 1fr; } .people li { padding: 16px 18px; gap: 16px; } .face { width: 52px; height: 52px; font-size: 17px; } }

/* Questions, just before contact */
.faq-sec { padding-top: clamp(80px, 10vw, 130px); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.faq details { border-top: 1px solid var(--line); }
.faq details:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 500; font-size: 17px; text-decoration: underline transparent 2px; text-underline-offset: 5px; transition: text-decoration-color .25s; }
.faq summary:hover { text-decoration-color: var(--red); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 56ch; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } .faq details:nth-last-child(2) { border-bottom: 0; } }

/* Contact: dark ending with neon flight streaks (concepts/iris/neon), driven by scroll */
.contact { position: relative; overflow: hidden; background: var(--black); color: var(--white); isolation: isolate; }
.neon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.contact-in { display: grid; gap: 26px; }
.contact .eyebrow { color: var(--muted-dark); }
.contact h2 { font-size: clamp(46px, 7.6vw, 124px); max-width: 13ch; letter-spacing: -.04em; }
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.channels a { display: grid; gap: 10px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: rgba(17,20,24,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); color: var(--white); text-decoration: none; transition: transform .4s var(--ease), border-color .3s, background .3s; }
.channels a:hover { transform: translateY(-4px) scale(1.02); border-color: var(--ice); }
.channels small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.channels span { font: 500 clamp(19px, 2vw, 30px)/1.1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (max-width: 760px) { .channels { grid-template-columns: 1fr; } .channels span { font-size: 16.5px; } }

/* Footer with cropped wordmark (component 09) */
.foot { background: var(--bg); color: var(--muted); padding-top: 40px; overflow: hidden; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 14px; }
.foot nav { display: flex; gap: 22px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline transparent 1.5px; text-underline-offset: 4px; transition: text-decoration-color .25s; }
.foot nav a:hover { text-decoration-color: var(--red); color: var(--black); }
.foot-word { font: 600 15.8vw/.8 var(--display); letter-spacing: -.05em; text-align: center; margin: 30px 0 -2.9vw; white-space: nowrap; background: linear-gradient(180deg, var(--black) 30%, #4a6f85); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Loader: black space, wireframe H, hypernova (loader.js). Fades out on its own if the script never runs. */
.loader { display: none; }
.has-loader .loader { display: block; position: fixed; inset: 0; z-index: 500; background: #000; cursor: pointer; transition: opacity 1.1s var(--ease), visibility 0s 1.1s; animation: loaderSafe .6s 14s forwards; }
.loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-word { position: absolute; left: 0; right: 0; display: grid; justify-items: center; gap: 8px; text-align: center; margin-top: 18px; font: 600 13px/1 var(--display); letter-spacing: .6em; text-indent: .6em; color: var(--ice); opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s var(--ease); }
.loader-word small { font: 500 9.5px/1 var(--sans); letter-spacing: .7em; text-indent: .7em; color: rgba(182,224,246,.6); }
.loader-word.on { opacity: 1; transform: none; }
.loader-pct { position: absolute; left: 0; right: 0; bottom: clamp(24px, 5vh, 48px); text-align: center; font: 500 11px/1 var(--sans); letter-spacing: .4em; text-indent: .4em; color: rgba(182,224,246,.55); font-variant-numeric: tabular-nums; transition: opacity .4s; }
.loader-pct.off { opacity: 0; }
@keyframes loaderSafe { to { opacity: 0; visibility: hidden; } }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .line > span { opacity: 1; transform: none; }
  .sheet { position: relative; height: auto; min-height: 80vh; }
  .route-marker { display: none; }
}