/* Site typefaces are self hosted under the SIL Open Font License (see OFL-*.txt).
   Bricolage and Instrument are variable; Metal Mania is a regular display face for Halloween. */
@font-face { font-family: "Metal Mania"; src: url(/assets/fonts/metal-mania-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-latin.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --ink: #09090a; --ink-2: #111113; --paper: #f4f2ee;
  --soft: rgba(244, 242, 238, 0.84); --faint: rgba(244, 242, 238, 0.66); --hair: rgba(255, 255, 255, 0.12);
  --display: "Bricolage Grotesque", "Instrument Sans", Arial, sans-serif;
  --ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 24px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 60px;
  --rec: #ff3b30;
  /* Under glass that does not blur: dark enough for white type over a flyer. */
  --smoke: rgba(14, 14, 16, 0.74);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--paper); font: 400 16px/1.55 var(--ui);
  background: radial-gradient(120% 70% at 50% 0%, #151517, var(--ink) 62%) fixed, var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-bottom: calc(var(--bar-h) + 28px + env(safe-area-inset-bottom, 0px));
}
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3, p { margin: 0; }
.display { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-variation-settings: "opsz" 96; letter-spacing: -0.025em; line-height: 0.92; text-wrap: balance; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lede { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--soft); }
.section { position: relative; display: grid; gap: clamp(24px, 3vw, 40px); padding: clamp(80px, 8.5vw, 124px) var(--gutter) 0; }
.section-title { font-size: clamp(54px, 9.5vw, 160px); }

/* Scroll reveals (assets/js/reveal.js): only when JS runs, so nothing hides without it. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity 400ms linear; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* Phones: sections sit a little closer so the page reads as one story, not a long scroll. */
@media (max-width: 639px) { .section { padding-top: 68px; } }
/* Jumping to a section from the nav keeps its title clear of the floating header. */
.section[id] { scroll-margin-top: 76px; }
/* Phones: no grey flash on tap (every control has its own pressed state), no double-tap wait on
   controls, and a long press on a control doesn't select its label. Body text stays selectable. */
html { -webkit-tap-highlight-color: transparent; scrollbar-color: rgba(255, 255, 255, 0.3) var(--ink); }
::selection { background: var(--paper); color: var(--ink); }
input, textarea { caret-color: var(--paper); }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
button, summary, .pill, .chip, .icon-btn, .chip-check span { -webkit-user-select: none; user-select: none; }
/* Moving between pages: a screen-sized dark veil fades away above the content and under the floating header.
   Never fade the whole page (main or body) instead: iPhone Safari turns the entire page into one giant
   graphics layer for it and, on long pages like /work/, crashes ("A problem repeatedly occurred").
   Reduced motion: no veil. */
body::before { content: ""; position: fixed; inset: 0; z-index: 35; background: var(--ink); pointer-events: none; opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { body::before { animation: page-veil 460ms cubic-bezier(0.23, 1, 0.32, 1) backwards; } }
@keyframes page-veil { from { opacity: 1; visibility: visible; } }
/* Opening the homepage at a section: out of sight until glide.js has placed it (arrive.js shows it anyway
   after 1.2 s). Hidden, not faded: no whole-page animation. */
.is-arriving-at body { visibility: hidden; }
/* While arriving, the section being opened shows at once rather than rising in. */
.is-arriving-at [data-reveal] { transition: none !important; }


/* Header: a floating glass pill. */
.site-header {
  position: fixed; z-index: 40; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 24px; width: min(1180px, calc(100% - 24px)); padding: 7px 7px 7px 18px; border-radius: 999px;
}
/* The logos are inline SVG (src/templates/logo.js): height sets the size, width follows the arrangement. */
.logo { display: block; width: auto; overflow: visible; color: var(--paper); }
.brand .logo { height: 34px; }
.brand { flex: none; position: relative; }
/* The home link's reach is a full finger tall (44px) on phones, kept inside the header's 5px gaps. */
.brand::after { content: ""; position: absolute; inset: -5px -4px; }
.brand [data-logo], .footer-mark [data-logo] { display: none; }
.brand.has-logo-morph [data-logo], .footer-mark.has-logo-morph [data-logo] { display: block; }
.has-logo-morph .logo-fallback { display: none; }
.logo-fallback { display: block; }
.brand .logo-fallback .logo { width: 88px; height: 34px; object-fit: contain; }
@media (max-width: 759px) { .brand .logo-fallback .logo { width: 26px; } }
.nav { display: flex; gap: 26px; font: 500 15px/1 var(--ui); }
.nav a { padding: 10px 0; color: var(--soft); transition: color 160ms var(--ease); }
.nav a[aria-current="page"] { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--paper); } }
/* Halloween: faint glowing red text, breathing slowly with the odd flicker. No border. */
.nav .nav-hw { font-family: "Metal Mania", Impact, var(--ui); font-weight: 400; font-size: 17px; letter-spacing: 0.01em; color: #ff6e76; text-shadow: 0 0 8px rgba(255, 40, 55, 0.55), 0 0 20px rgba(220, 20, 40, 0.3); animation: hw-glow 4.8s ease-in-out infinite; }
.nav .nav-hw[aria-current="page"] { color: #ff7a82; }
@media (hover: hover) and (pointer: fine) { .nav .nav-hw:hover { color: #ff7a82; } }
@keyframes hw-glow {
  0%, 100% { opacity: 0.92; text-shadow: 0 0 6px rgba(255, 40, 55, 0.45), 0 0 16px rgba(220, 20, 40, 0.22); }
  45% { opacity: 1; text-shadow: 0 0 10px rgba(255, 50, 65, 0.8), 0 0 28px rgba(230, 25, 45, 0.45); }
  47% { opacity: 0.55; } 48% { opacity: 1; } 49% { opacity: 0.7; } 50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .nav .nav-hw { animation: none; } }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 860px) {
  .site-header { gap: 10px; padding-left: 14px; }
  .nav { gap: 0; font-size: 14px; }
  .nav a:not(.nav-season) { display: none; }
  .header-actions .ig { display: none; }
}
@media (max-width: 360px) {
  .site-header { gap: 5px; padding-left: 8px; }
  .header-actions .pill.solid { min-height: 44px; padding-inline: 12px; font-size: 13px; }
}

/* Now showing: a glass pill pinned to the bottom, like a player. */
.now-bar {
  position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 14px; width: min(640px, calc(100% - 24px)); height: var(--bar-h); padding: 0 8px 0 20px;
  border-radius: 999px; font-size: 13px; transform: translate(-50%, 0);
}
.now-tc { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.now-tc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec); vertical-align: 1px; animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: 0.3; } }
.now-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--paper); }
.now-bar.is-halloween [data-now-title] { font-family: "Metal Mania", var(--ui); font-size: 16px; font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.02em; color: #ff6972; text-shadow: 0 0 8px rgba(255, 40, 55, 0.6), 0 0 20px rgba(220, 20, 40, 0.32); }
.now-label { color: var(--faint); }
.now-bar { transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.now-bar.is-tucked { opacity: 0; pointer-events: none; transform: translate(-50%, 130%); }
/* Phones: just the running timecode and WhatsApp, a small pill instead of a full-width bar. */
@media (max-width: 520px) {
  .now-label, .now-title { display: none; }
  .now-bar { width: auto; gap: 12px; padding-left: 16px; }
}

/* Footer: the wordmark, one line in Neku's voice, contact pills. */
.site-footer { margin-top: clamp(80px, 9vw, 132px); padding: 0 var(--gutter) 40px; }
.footer-inner { display: grid; gap: 28px; justify-items: start; padding-top: 48px; border-top: 1px solid var(--hair); }
.footer-mark .logo { height: clamp(84px, 8vw, 112px); }
.footer-mark .logo-fallback .logo { width: calc(clamp(84px, 8vw, 112px) * 2.53); object-fit: contain; }
@media (max-width: 639px) { .footer-mark .logo { height: 132px; } }
@media (max-width: 639px) { .footer-mark .logo-fallback .logo { width: 100px; } }
.footer-line { font-size: clamp(34px, 5vw, 72px); }
.contacts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 20px 8px 8px; border-radius: 999px; }
.contact-icon { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.contact-icon svg { width: 20px; height: 20px; }
.contact-text { display: grid; gap: 2px; line-height: 1.2; }
.contact-text small { font-size: 12px; color: var(--faint); }
.contact-text span { font-size: 15px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .contact:hover { background-color: rgba(255, 255, 255, 0.08); } }
.footer-fine { display: flex; justify-content: space-between; width: 100%; color: var(--faint); font-size: 13px; }

/* Phone menu: a glass button that drops a glass panel under the header. Wider screens keep the full nav.
   The header's own blur hides the page from a nested blur, so the panel carries a near-solid tint. */
.menu { display: none; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > .menu-btn { background-color: rgba(255, 255, 255, 0.16); }
.menu-panel.glass { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: grid; gap: 2px; padding: 12px 12px 16px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(30, 30, 33, 0.94), rgba(14, 14, 16, 0.93)); }
.menu[open] .menu-panel { animation: menu-in 280ms var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.menu-link { padding: 10px 14px; border-radius: 18px; font-size: clamp(30px, 9vw, 40px); }
.menu-link[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }
@media (hover: hover) and (pointer: fine) { .menu-link:hover { background: rgba(255, 255, 255, 0.08); } }
.menu-contacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 14px 4px 0; border-top: 1px solid var(--hair); }
.menu-contacts svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .menu { display: block; }
  .header-actions .wa { display: none; }
}
@media (prefers-reduced-motion: reduce) { .menu[open] .menu-panel { animation: none; } }

/* Footer: the service pages, for people and for search. Each link is a full finger tall (40px). */
.footer-services { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 14px; }
.footer-services a { display: inline-block; padding-block: 9px; color: var(--soft); }
@media (hover: hover) and (pointer: fine) { .footer-services a:hover { color: var(--paper); } }

/* The winter links: frost for Christmas, gold for New Year, each breathing like the Halloween one. */
.nav .nav-tg, .nav .nav-xmas, .nav .nav-nye { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 16px; letter-spacing: 0; }
.nav .nav-tg { color: #ffd9b0; text-shadow: 0 0 8px rgba(255, 150, 60, 0.7), 0 0 20px rgba(255, 110, 30, 0.35); animation: ember-glow 4.4s ease-in-out infinite; }
@keyframes ember-glow { 50% { color: #fff0de; text-shadow: 0 0 12px rgba(255, 170, 90, 0.95), 0 0 30px rgba(255, 120, 40, 0.5); } }
.nav .nav-xmas { color: #eaf7ff; text-shadow: 0 0 8px rgba(150, 210, 255, 0.75), 0 0 20px rgba(110, 170, 255, 0.35); animation: frost-glow 5s ease-in-out infinite; }
.nav .nav-nye { color: #ffd98a; text-shadow: 0 0 8px rgba(255, 200, 90, 0.7), 0 0 22px rgba(255, 170, 40, 0.35); animation: gold-glow 3.6s ease-in-out infinite; }
@keyframes frost-glow { 50% { text-shadow: 0 0 12px rgba(170, 225, 255, 0.95), 0 0 30px rgba(120, 180, 255, 0.5); } }
@keyframes gold-glow { 50% { color: #fff1cf; text-shadow: 0 0 12px rgba(255, 215, 120, 0.95), 0 0 30px rgba(255, 180, 60, 0.5); } }
@media (prefers-reduced-motion: reduce) { .nav .nav-tg, .nav .nav-xmas, .nav .nav-nye { animation: none; } }
.footer-rooms { margin-top: -28px; }
.footer-more { margin-top: -28px; }
.footer-motion { padding: 9px 0; border: 0; background: none; color: var(--soft); font: inherit; font-size: 14px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .footer-motion:hover { color: var(--paper); } }
/* Pause motion: every CSS loop freezes where it is. */
.is-still *, .is-still *::before, .is-still *::after { animation-play-state: paused !important; }

/* The footer mark assembles itself when the page ends: the frame wipes on, then the letters rise into it,
   left half first (the finale of the Fountain demo). Only the live SVG moves; the still picture never does. */
.js .footer-mark[data-reveal] { opacity: 1; transform: none; }
.js .footer-mark[data-reveal] [data-frame] { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease); }
.js .footer-mark[data-reveal] [data-half] path { opacity: 0; transform: translateY(34%); transform-box: fill-box;
  transition: opacity 500ms var(--ease), transform 800ms var(--ease); transition-delay: calc(300ms + var(--h, 0ms) + var(--n, 0) * 60ms); }
.footer-mark [data-half="R"] { --h: 240ms; }
.footer-mark [data-half] path:nth-child(2) { --n: 1; } .footer-mark [data-half] path:nth-child(3) { --n: 2; }
.footer-mark [data-half] path:nth-child(4) { --n: 3; } .footer-mark [data-half] path:nth-child(n + 5) { --n: 4; }
.js .footer-mark[data-reveal].is-in [data-frame] { clip-path: inset(0); }
.js .footer-mark[data-reveal].is-in [data-half] path { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .footer-mark[data-reveal] [data-frame], .js .footer-mark[data-reveal] [data-half] path { clip-path: none; opacity: 1; transform: none; transition: none; }
}

/* Glass: a lit top edge, a faint bottom edge, a soft drop. The highlight follows the pointer
   (assets/js/shine.js). Live blur only where the page moves underneath: the header and its menu, the now
   bar, the viewer and the quote sheet. Everything else sits on smoked ink (--smoke), because the phone
   homepage had 351 live blurs (Nov 1 UI pass; many live blurs exhausted iPhone memory before). */
/* Zero-weight positioning: anything that places itself (fixed header, bar, labels) wins. */
:where(.glass) { position: relative; }
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)), var(--smoke);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.42),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.34);
}
/* Light on glass: where the pointer is, the edge catches it faintly and the pane warms a touch.
   Blended, never a spotlight; only while hovered, and not on the big form or viewer panels. */
.glass::before, .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease); }
.glass::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.06), transparent 70%); }
.glass::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.5), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.site-header.glass, .menu-panel.glass, .now-bar.glass, .qv.glass, .sheet.glass {
  --smoke: transparent;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
@media (hover: hover) and (pointer: fine) { .glass:hover::before, .glass:hover::after { opacity: 1; } }
.brief.glass::before, .brief.glass::after, .qv.glass::before, .qv.glass::after { display: none; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font: 600 15px/1 var(--ui); white-space: nowrap; cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
}
.pill:active { transform: scale(0.96); }
.pill.solid { background: var(--paper); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.3); }
.pill.glass { color: var(--paper); }
.pill.small { min-height: 38px; padding: 0 16px; font-size: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .pill.solid:hover { transform: translateY(-1px); }
  .pill.glass:hover, .icon-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
}

/* Chips for filters, toggles and form choices. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 500 14px/1 var(--ui); cursor: pointer; transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { background: rgba(255, 255, 255, 0.08); color: var(--paper); } }

/* Cards: rounded, lit from behind by their own flyer, labelled in glass. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(14px, 1.8vw, 26px); align-items: start; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Wide pieces (screen visuals, mockups, press kits) span two columns at 8:7, the height of a flyer beside them. */
.card[data-shape="wide"] { grid-column: span 2; }
/* Staggered rhythm: alternate flyers sit lower, like a wall hung by hand. Wide pieces keep the line. */
@media (min-width: 760px) {
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(3n + 2), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(3n + 2) { margin-top: 14%; }
}
@media (min-width: 1180px) {
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(3n + 2), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(3n + 2) { margin-top: 0; }
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(4n + 2), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(4n + 2) { margin-top: 16%; }
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(4n + 4), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(4n + 4) { margin-top: 7%; }
}
.card { position: relative; isolation: isolate; border-radius: var(--radius); transition: transform 260ms var(--ease); }
.card[hidden] { display: none; }
.card-glow { position: absolute; inset: 6% 5% -3%; z-index: -1; width: 90%; height: 97%; object-fit: cover; border-radius: var(--radius); filter: blur(38px) saturate(170%); opacity: 0.42; transition: opacity 300ms var(--ease); pointer-events: none; }
.card-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.card-media img, .card-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.card[data-shape="wide"] .card-media { aspect-ratio: 8 / 7; }
.card[data-fit="contain"] .card-media img, .card[data-fit="contain"] .card-clip { object-fit: contain; }
/* A set (series editions, brand boards): how many pieces sit behind the card. */
.card-count { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 999px;
  background: rgba(9, 9, 10, 0.82); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); font: 700 13px/1 var(--ui); color: var(--paper); }
.card-count::before { content: ""; width: 11px; height: 11px; margin-right: 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px currentColor, 3px -3px 0 -1px rgba(9, 9, 10, 0.9), 3px -3px 0 0.5px currentColor; display: inline-block; vertical-align: -1px; }
.card-clip { opacity: 0; transition: opacity 280ms var(--ease), transform 500ms var(--ease); }
.card.is-playing .card-clip { opacity: 1; }
.card-label { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; pointer-events: none; }
.card-title { font: 700 15px/1.2 var(--ui); }
.card-type { font-size: 12px; color: var(--soft); }
.card-ig { justify-self: start; margin-top: 3px; margin-bottom: -3px; padding-block: 3px; font-size: 12px; font-weight: 600; pointer-events: auto; }
@media (max-width: 520px) { .card-label { left: 6px; right: 6px; bottom: 6px; padding: 9px 11px; border-radius: 14px; } .card-title { font-size: 13px; } .card-type { font-size: 11px; } }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-8px); }
  .card:hover .card-glow { opacity: 0.85; }
  .card:hover .card-media img, .card:hover .card-clip { transform: scale(1.04); }
  .card-ig:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Filters: one glass pill of chips. On narrow screens it stays one row and scrolls sideways. */
.filters { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-self: start; max-width: 100%; padding: 5px; border-radius: 28px; }
@media (max-width: 900px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }
}

/* Quick view: a glass panel over the dimmed page. Fixed and centred on the screen: author styles beat the
   browser's own dialog rules, so the glass recipe's position must not decide where a modal sits. */
.qv { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(1100px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 30px; color: var(--paper); background: rgba(20, 20, 22, 0.72); overflow: auto; }
.qv::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qv[open] { animation: qv-in 220ms var(--ease); }
@keyframes qv-in { from { opacity: 0; transform: scale(0.97); } }
.qv-inner { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 1fr); gap: 28px; padding: 16px; }
.qv-media { overflow: hidden; border-radius: 20px; background: #000; }
.qv-media video, .qv-media img { width: auto; height: min(80dvh, 900px); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.qv-side { display: grid; align-content: end; gap: 16px; padding: 56px 8px 8px 0; }
.qv-title { font-size: clamp(36px, 4.4vw, 64px); }
.qv-type { color: var(--soft); }
/* Brand boards: shown whole at their own shape, with thumbnails to switch. */
.qv-media img.is-board { aspect-ratio: auto; width: auto; height: auto; max-height: min(78dvh, 820px); max-width: min(820px, 62vw); }
.qv-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-thumb { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; opacity: 0.55; box-shadow: inset 0 0 0 1px var(--hair); transition: opacity 160ms var(--ease), box-shadow 160ms var(--ease); }
.qv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qv-thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--paper); }
@media (hover: hover) and (pointer: fine) { .qv-thumb:hover { opacity: 0.9; } }
.qv-toggle { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; }
.qv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qv-media video.is-wide, .qv-media img.is-wide { aspect-ratio: 16 / 9; width: min(860px, 62vw); height: auto; max-height: 78dvh; }
.qv-close { position: absolute; z-index: 3; top: 14px; right: 14px; border: 0; cursor: pointer; background: rgba(9, 9, 10, 0.78); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4); }
.qv-close svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .qv-inner { grid-template-columns: 1fr; gap: 16px; padding: 10px; }
  .qv-media video, .qv-media img { width: 100%; height: auto; max-height: 68dvh; }
  .qv-media img.is-board { max-width: 100%; max-height: 60dvh; margin: 0 auto; }
  .qv-media video.is-wide, .qv-media img.is-wide { width: 100%; }
  .qv-close { top: 16px; right: 16px; }
  .qv-side { padding: 0 6px 8px; align-content: start; }
}

/* Liquid glass selection (assets/js/segments.js): the lens flows under the chosen option. Without JS
   the pressed chip keeps its own solid fill instead. */
.lens {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; opacity: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(255, 255, 255, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  /* No live blur at rest: every flyer card has a switch. The lens bends the light only while held
     (is-dragging below), when there is one on screen. */
  transition: opacity 200ms var(--ease);
}
[data-segments] > .chip { position: relative; z-index: 1; }
/* Dragging the lens (assets/js/segments.js): the chosen option can be held and dragged without scrolling
   the bar; the lens brightens into a drop and the option beneath it lights up. */
[data-segments] > .chip[aria-pressed="true"], [data-segments] > .chip[aria-selected="true"] { touch-action: none; }
[data-segments] { -webkit-user-select: none; user-select: none; }
[data-segments].is-dragging { cursor: grabbing; }
[data-segments].is-dragging .lens { transition: none; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 10px 24px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(2px) saturate(190%) brightness(1.3); backdrop-filter: blur(2px) saturate(190%) brightness(1.3); }
.js [data-segments].is-dragging .chip[aria-pressed="true"]:not(.is-under), .js [data-segments].is-dragging .chip[aria-selected="true"]:not(.is-under) { color: var(--soft); font-weight: 500; }
[data-segments] .chip.is-under { color: var(--paper); }
.js [data-segments] .chip[aria-pressed="true"], .js [data-segments] .chip[aria-selected="true"] { background: transparent; color: var(--paper); font-weight: 600; }

/* Still | Motion switch on flyers with motion, at the top of the card. */
.card-mode { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
.card-mode .chip { min-height: 32px; padding: 0 12px; font-size: 12px; }
@media (max-width: 520px) { .card-mode { top: 6px; left: 6px; } .card-mode .chip { min-height: 30px; padding: 0 10px; font-size: 11px; } }
/* Pressed: the card and round buttons answer the finger as it lands, not when it lifts. */
.card-media, .icon-btn { transition: transform 140ms var(--ease), background-color 180ms var(--ease); }
.card-media:active { transform: scale(0.98); }
.icon-btn:active { transform: scale(0.94); }
.menu-link:active { background: rgba(255, 255, 255, 0.1); }

/* Phones: card captions read at 12px, and the small controls on cards get a finger-sized touch area
   without growing on screen. */
@media (max-width: 520px) {
  .card-type { font-size: 12px; }
  .card-mode .chip { font-size: 12px; }
}
.card-mode .chip, .card-ig { position: relative; }
.card-mode .chip::after { content: ""; position: absolute; inset: -7px -3px; }
.card-ig::after { content: ""; position: absolute; inset: -12px -8px; }
/* Small pills get a comfortable height where the pointer is a finger. */
@media (pointer: coarse), (max-width: 640px) { .pill.small { min-height: 44px; } }

/* ── Visibility pass, whole site ────────────────────────────────────────────────────────────────── */
/* Secondary text is lighter site-wide (tokens.css); these carry facts people act on, so they read brighter still. */
.form-fine { font-size: 14px; color: var(--soft); }
.contact-text small { font-size: 13px; color: var(--soft); }


/* The quote sheet (assets/js/quick-sheet.js): the quick quote over any page. From the right on wide screens,
   from the bottom on phones. Only its transform moves; the page behind is dimmed, never animated. */
.sheet.glass { --smoke: rgba(12, 12, 14, 0.62); }
.sheet {
  position: fixed; inset: 0 0 0 auto; width: min(540px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 32px 0 0 32px; color: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(104%); transition: transform 520ms var(--ease);
}
.sheet.is-in { transform: none; }
.sheet.is-dragging { transition: none; }
.sheet::backdrop { background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 420ms var(--ease); }
.sheet.is-in::backdrop { opacity: 1; }
.sheet::before, .sheet::after { display: none; }
.sheet .quick { max-width: none; margin: 0; padding: clamp(64px, 9vh, 92px) clamp(22px, 3vw, 36px) calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: none; box-shadow: none; }
.sheet .quick-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet-close { position: absolute; top: 18px; right: 18px; z-index: 2; border: 0; background: rgba(255, 255, 255, 0.1); color: var(--paper); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .sheet-close:hover { background: rgba(255, 255, 255, 0.18); } }
.sheet-grab { display: none; }
html.sheet-open { overflow: hidden; }
@media (max-width: 640px) {
  .sheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px)); border-radius: 30px 30px 0 0; transform: translateY(104%); }
  .sheet-grab { position: sticky; top: 0; z-index: 1; display: grid; place-items: center; height: 30px; margin-bottom: -30px; touch-action: none; cursor: grab; }
  .sheet-grab span { width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.36); }
  .sheet .quick { padding-top: 40px; }
  .sheet .quick-title, .sheet .quick-lede { touch-action: none; }
  .sheet-close { top: 14px; right: 14px; }
}
@media (max-width: 360px) { .sheet .quick-tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet::backdrop { transition: none; } }

/* Hero: Neku's logo as liquid glass over a wall of his flyers (assets/js/glass). */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ink, #09090a); }
.hero-glass { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Without WebGL2: the same idea, still. The flyers dim and soft, sharp only inside the logo. */
.hero-fallback { position: absolute; inset: 0; overflow: hidden; }
/* Already blurred and darkened at build time (atlas-soft.webp): no live filter on the first paint. */
.hero-fallback::before { content: ""; position: absolute; inset: -40px; background: url(/media/atlas/atlas-soft.webp) center / cover; }
/* The white framed logo; no CSS masking (masks with this SVG render inverted in some cases). */
.hero-fallback-mark { position: absolute; left: 50%; top: 39%; width: min(80vw, 1000px); height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.18)); }
/* The still logo hands over to the glass with a fade, never a cut: on phones the glass arrives late. */
.hero-fallback { transition: opacity 700ms var(--ease), visibility 0s; }
.has-glass .hero-fallback { opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s 700ms; }

.hero::after { content: ""; position: absolute; inset: auto 0 -1px; height: 62%; background: linear-gradient(to bottom, rgba(9, 9, 10, 0), rgba(9, 9, 10, 0.55) 40%, rgba(9, 9, 10, 0.9) 72%, var(--ink, #09090a)); pointer-events: none; }
.hero-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: calc(104px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; max-width: 780px; }
.hero-title { font-size: clamp(44px, 6vw, 96px); }
.hero-title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.hero-title .word > span { display: inline-block; }
.hero-sub { margin: 0; max-width: 44ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 700px), (max-aspect-ratio: 10 / 11) {
  .hero-fallback-mark { top: 36%; width: min(62vw, 400px); }
  .hero-copy { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
}

/* Opening. The headline never waits: it rises at once while the glass forms behind it, so the first paint
   has words on it. Only the header and the Now showing bar hold until the glass is ready (assets/js/intro.js). */
.is-opening .site-header { opacity: 0; transform: translate(-50%, -24px); }
.is-opening .now-bar { opacity: 0; transform: translate(-50%, 24px); }
.js .site-header { transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: var(--d, 0ms); }
.js .hero-copy [data-intro] { animation: rise-in 800ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + 60ms); }
.js .hero-title .word > span { animation: word-up 900ms var(--ease) both; animation-delay: 80ms; }
.hero-title .word:nth-child(2) > span { animation-delay: 140ms; }
.hero-title .word:nth-child(3) > span { animation-delay: 200ms; }
.hero-title .word:nth-child(4) > span { animation-delay: 260ms; }
.hero-title .word:nth-child(5) > span { animation-delay: 320ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes word-up { from { transform: translateY(105%); } }
@media (prefers-reduced-motion: reduce) { .js .site-header { transition: none; } .js .hero-copy [data-intro], .js .hero-title .word > span { animation: none; } }

/* Ticker: the promises, big and slow, filled and outlined in turn. */
.ticker { overflow: hidden; padding: clamp(18px, 3vw, 36px) 0; border-block: 1px solid var(--hair); }
.ticker-track { display: flex; width: max-content; gap: 0.6em; font-size: clamp(40px, 7vw, 112px); animation: ticker 48s linear infinite; }
.ticker-track span { white-space: nowrap; }
.ticker-track span::after { content: "·"; margin-left: 0.6em; color: var(--faint); -webkit-text-stroke: 0; }
.ticker-track .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 242, 238, 0.7); }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; }
.work-section .pill.glass { justify-self: start; }

/* Weekly worlds: a sideways reel of one series, edition under each. */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 320px); gap: clamp(14px, 1.8vw, 24px); overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 20px var(--gutter) 28px; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.strip::-webkit-scrollbar { display: none; }
.strip > li { scroll-snap-align: start; }
.edition { margin-top: 12px; color: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums; }

/* What I make (home.js services): an index of the jobs. A hairline between rows, the whole row opens the
   job's page, the quote button sits above that link. Phones carry a small piece of the work in each row. */
.service-index { display: grid; gap: clamp(28px, 4vw, 72px); }
.service-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.service { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb main main" "thumb cost quote";
  gap: 10px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hair); transition: opacity 320ms var(--ease); }
.service-thumb { grid-area: thumb; align-self: start; width: 64px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #000; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
.service-main { grid-area: main; display: grid; gap: 6px; min-width: 0; }
.service-name { margin: 0; font-size: clamp(26px, 3.6vw, 60px); line-height: 0.98; }
.service-link { color: inherit; text-decoration: none; }
.service-link::after { content: ""; position: absolute; inset: 0; }
.service-quote, .service-also a { position: relative; z-index: 1; }
.service-arrow { display: inline-block; opacity: 0; transform: translateX(-14px); transition: opacity 260ms var(--ease), transform 420ms var(--ease); }
.service-line { margin: 0; color: var(--soft); max-width: 46ch; }
.service-also { margin: 0; }
.service-cost { grid-area: cost; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.service-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; color: var(--faint); font-size: 14px; }
.service-quote { grid-area: quote; justify-self: end; }
.service-stage { display: none; }
/* Phones: price and time on one line under the job (a price condition stays under them); the formats wait
   for the job's own page. */
@media (max-width: 899px) {
  .service { gap: 8px 14px; padding: 16px 0; }
  .service-cost { gap: 0 10px; }
  .service-meta span:first-child { display: none; }
  .service-note { flex-basis: 100%; }
}
@media (hover: hover) and (pointer: fine) {
  .service:hover .service-arrow, .service:focus-within .service-arrow { opacity: 1; transform: none; }
  .service-list:has(.service:hover) .service:not(:hover) { opacity: 0.4; }
}
@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 1fr) minmax(170px, auto) auto; grid-template-areas: "main cost quote"; gap: 10px clamp(20px, 3vw, 48px); padding: 26px 0; }
  .service-thumb { display: none; }
  .service-cost { display: grid; gap: 4px; justify-items: end; text-align: right; }
  .service-meta { display: grid; gap: 2px; justify-items: end; }
}
/* Wide screens with a pointer: the work for the row under it stands beside the list, tilted in from below. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .service-index { grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 360px); align-items: start; }
  .service-stage { position: sticky; top: calc(50svh - min(26vw, 340px)); display: grid; }
  .service-shot { grid-area: 1 / 1; margin: 0; overflow: hidden; border-radius: 24px; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
    opacity: 0; transform: translateY(22px) scale(0.95) rotate(-2deg); transition: opacity 360ms var(--ease), transform 640ms var(--ease); }
  .service-shot.is-wide { align-self: center; }
  .service-shot img, .service-shot video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
  .service-shot.is-wide img, .service-shot.is-wide video { aspect-ratio: 8 / 7; }
  .service-index:not(:has(.service:is(:hover, :focus-within))) .service-shot:first-child { opacity: 1; transform: none; }

  .service-index:has(.service:nth-child(1):is(:hover, :focus-within)) .service-shot:nth-child(1) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(2):is(:hover, :focus-within)) .service-shot:nth-child(2) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(3):is(:hover, :focus-within)) .service-shot:nth-child(3) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(4):is(:hover, :focus-within)) .service-shot:nth-child(4) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(5):is(:hover, :focus-within)) .service-shot:nth-child(5) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(6):is(:hover, :focus-within)) .service-shot:nth-child(6) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(7):is(:hover, :focus-within)) .service-shot:nth-child(7) { opacity: 1; transform: none; }
  .service-index:has(.service:nth-child(8):is(:hover, :focus-within)) .service-shot:nth-child(8) { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .service, .service-arrow, .service-shot { transition: none; } }
.rush { color: var(--soft); font-size: 16px; }

/* Studio: Neku's framed mark with light passing over it. Stacked beside the text, wide when the page narrows. */
.studio-short { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .studio-short { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); } }
.studio-mark { display: grid; justify-items: center; }
.studio-mark .logo { height: clamp(120px, 30vw, 230px); max-width: 100%; filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.14)); }
@media (min-width: 900px) { .studio-mark .logo { height: min(340px, 46svh); } }
.studio-copy { display: grid; gap: 24px; }
.studio-reel { display: grid; justify-items: center; }
.studio-reel .room-film-frame { width: min(100%, 360px); }
.studio-film { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; border-radius: 26px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); cursor: pointer; }
@media (min-width: 900px) { .studio-reel .room-film-frame { width: min(100%, 380px, calc(72svh * 9 / 16)); } }
.studio-line { font-size: clamp(28px, 3.4vw, 52px); font-weight: 700; line-height: 1.05; }

/* Case studies, lit by their own covers: three cards side by side on wide screens, a reel on phones (below). */
.case-list { display: grid; gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.case-row { position: relative; isolation: isolate; display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(14px, 2vw, 24px); border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); }
.case-glow { position: absolute; inset: -20%; z-index: -1; width: 140%; height: 140%; object-fit: cover; filter: blur(70px) saturate(160%) brightness(0.55); opacity: 0.7; pointer-events: none; }
.case-media { display: block; }
.case-frame { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 9 / 16; max-height: 78svh; margin: 0 auto; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.case-frame.is-wide { aspect-ratio: 16 / 9; max-height: none; }
.case-frame video, .case-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .case-frame { width: 100%; aspect-ratio: 4 / 5; } .case-frame.is-wide { aspect-ratio: 16 / 9; } }
.case-copy { display: grid; gap: 16px; justify-items: start; padding: clamp(4px, 1vw, 16px); }
.case-no { font: 600 14px/1 var(--ui); color: var(--faint); font-variant-numeric: tabular-nums; }
.case-title { font-size: clamp(44px, 6vw, 96px); }
.case-kind { color: var(--soft); font-size: 15px; }
.case-lede { max-width: 40ch; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; }
.case-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; padding: 0; list-style: none; }
.case-facts li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); color: var(--soft); font-size: 14px; }
.case-facts .display { font-size: 22px; color: var(--paper); letter-spacing: -0.01em; }

/* What clients say (home.js reviews): the messages as a chat. Incoming bubbles on the left with who sent
   them and when, the studio's own bubble on the right. Behind them the wall of the work, blurred once at build
   time (atlas-soft.webp), never live. */
.reviews { isolation: isolate; overflow: hidden; padding-bottom: clamp(40px, 6vw, 80px); }
.reviews-wall { position: absolute; inset: 12% 0 0; z-index: -1; background: url(/media/atlas/atlas-soft.webp) center / cover; opacity: 0.9;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.chat { margin: 0; padding: 0; list-style: none; columns: 3 300px; column-gap: clamp(18px, 3vw, 48px); }
.chat-group { display: grid; justify-items: start; gap: 5px; margin: 0 0 clamp(18px, 2.4vw, 30px); break-inside: avoid; }
.bubble-who { margin: 0 0 2px 14px; color: var(--faint); font-size: 13px; font-weight: 600; }
.bubbles { display: grid; justify-items: start; gap: 4px; margin: 0; }
.bubble { max-width: min(100%, 30ch); margin: 0; padding: 10px 14px 9px; border-radius: 6px 20px 20px 20px; background: #1d1d20; color: var(--paper);
  font: 500 clamp(17px, 1.5vw, 21px)/1.32 var(--ui); overflow-wrap: anywhere; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 8px 22px rgba(0, 0, 0, 0.3); }
.bubble-when { float: right; margin: 9px 0 -3px 14px; color: var(--faint); font: 500 11.5px/1 var(--ui); }
.chat-group.is-mine { justify-items: end; }
.is-mine .bubble { border-radius: 20px 6px 20px 20px; background: var(--paper); color: var(--ink); font-weight: 600; }
.is-mine .pill { margin-top: 6px; }
/* They arrive like messages: up from the corner they were sent from, one after another. */
.js .chat-group[data-reveal] { transform: translateY(16px) scale(0.94); transform-origin: 0 100%; transition: opacity 420ms var(--ease), transform 640ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .chat-group.is-mine[data-reveal] { transform-origin: 100% 100%; }
.js .chat-group[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .chat-group[data-reveal] { transform: none; transition: opacity 400ms linear; } }
.review { display: grid; align-content: space-between; gap: 28px; min-height: 230px; margin: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: 30px; }
.review blockquote { margin: 0; }
.review-quote { font-size: clamp(28px, 2.8vw, 42px); line-height: 1; }
.review-quote::before { content: "“"; } .review-quote::after { content: "”"; }
.review-who { display: grid; gap: 4px; color: var(--soft); font-size: 14px; }
.review-who span { color: var(--soft); font-size: 14px; }
.service-proof { max-width: 560px; min-height: 0; margin: clamp(22px, 3vw, 36px) 0 0; }

/* Every week: glass tabs over one reel per series. Without JS all reels show. */
.weekly-series .series-tabs { max-width: 100%; }
@media (min-width: 901px) { .series-tabs .chip { padding: 0 12px; font-size: 13.5px; } }
.js .series-panel:not(.is-active) { display: none; }
.series-panel { display: grid; gap: 8px; }
.series-panel + .series-panel { margin-top: 40px; }
.js .series-panel + .series-panel { margin-top: 0; }
.series-meta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 32px; }
.series-name { flex-basis: 100%; font-size: clamp(34px, 4.4vw, 64px); }
.series-night { color: var(--soft); font-size: 14px; font-weight: 600; }
.series-lede { flex: 1; min-width: min(100%, 320px); max-width: 60ch; color: var(--soft); }
.js .series-panel.is-active { animation: panel-in 420ms var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }

/* Rundowns: bigger cards so the dates read. */
.rundowns { grid-template-columns: minmax(0, 1fr); }
.strip-wide { grid-auto-columns: clamp(250px, 28vw, 380px); }
.rundowns .pill { justify-self: start; }

/* Halloween: this year's film behind fog and a red glow, bats in the air, one door. */
.halloween-teaser { isolation: isolate; }
.hw-stage { position: relative; display: grid; place-items: center; min-height: min(86svh, 820px); padding: clamp(28px, 5vw, 72px) var(--gutter); overflow: hidden; border-radius: 34px; background: #050304;
  box-shadow: inset 0 0 0 0.5px rgba(255, 60, 60, 0.25), 0 30px 90px rgba(120, 0, 10, 0.35); }
.hw-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; filter: saturate(1.1) contrast(1.1); }
.hw-fog { position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(40% 30% at 20% 80%, rgba(180, 180, 190, 0.18), transparent 70%), radial-gradient(45% 35% at 80% 75%, rgba(170, 170, 180, 0.14), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, transparent 30%, rgba(90, 0, 8, 0.55) 80%), linear-gradient(transparent 40%, rgba(5, 3, 4, 0.9));
  animation: fog 18s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translate3d(4%, -2%, 0) scale(1.06); } }
.hw-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center; }
.hw-title { font-size: clamp(76px, 14vw, 230px); color: #f4ece8; animation: flicker 5.5s steps(1, end) infinite;
  text-shadow: 0 0 18px rgba(255, 40, 40, 0.6), 0 0 70px rgba(200, 0, 20, 0.45); }
.hw-stage .hw-title, .hw-page-copy .hw-title, #hw-grid-title { font-family: "Metal Mania", Impact, var(--display); font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.01em; line-height: 1; }
@media (max-width: 520px) { .hw-stage .hw-title { font-size: clamp(64px, 18vw, 72px); } }
@keyframes flicker {
  0%, 18%, 22%, 51%, 53%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(255, 40, 40, 0.6), 0 0 70px rgba(200, 0, 20, 0.45); }
  19%, 21%, 52% { opacity: 0.55; text-shadow: none; }
}
.hw-lede { max-width: 42ch; color: rgba(244, 236, 232, 0.8); font-size: clamp(16px, 1.5vw, 19px); }
.pill.hw-enter, .theme-halloween .hw-page-copy .pill.solid { background: #e1242f; color: #fff; box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.4), 0 10px 40px rgba(225, 36, 47, 0.45); }
@media (hover: hover) and (pointer: fine) { .pill.hw-enter:hover, .theme-halloween .hw-page-copy .pill.solid:hover { background: #f03440; } }

/* Halloween glass: the site's liquid glass, tinted with a faint red glow. */
.glass-red { background: linear-gradient(180deg, rgba(255, 70, 80, 0.14), rgba(120, 0, 12, 0.08)), var(--smoke);
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 -1px 1px rgba(255, 80, 90, 0.12), inset 0 0 0 0.5px rgba(255, 90, 100, 0.32),
    0 0 32px rgba(225, 30, 45, 0.16), 0 12px 32px rgba(0, 0, 0, 0.34); }
.hw-copy.glass-red, .hw-page-copy.glass-red { padding: clamp(26px, 3.5vw, 44px) clamp(24px, 4vw, 56px); border-radius: 34px; }
@media (max-width: 360px) { .hw-copy.glass-red { padding-inline: 12px; } .hw-stage .hw-title { font-size: 54px; } }
.pill.glass-red { color: #fff; animation: red-breathe 4s ease-in-out infinite; }
@keyframes red-breathe { 50% { box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.55), inset 0 0 0 0.5px rgba(255, 110, 120, 0.45), 0 0 44px rgba(235, 35, 50, 0.3), 0 12px 32px rgba(0, 0, 0, 0.34); } }
@media (hover: hover) and (pointer: fine) { .pill.glass-red:hover { background-color: rgba(255, 60, 70, 0.18); } }

/* Red glass wherever Halloween is: the filter pill while Halloween is chosen (white again for anything
   else), and the labels and switches on every Halloween piece. */
.filters[data-active="halloween"] { background: linear-gradient(180deg, rgba(255, 70, 80, 0.14), rgba(120, 0, 12, 0.08)), var(--smoke);
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 0 0 0.5px rgba(255, 90, 100, 0.32), 0 0 32px rgba(225, 30, 45, 0.18), 0 12px 32px rgba(0, 0, 0, 0.34); }
.filters[data-active="halloween"] .lens { background: linear-gradient(180deg, rgba(255, 90, 100, 0.5), rgba(200, 20, 35, 0.25));
  box-shadow: inset 0 1px 0.5px rgba(255, 210, 215, 0.85), inset 0 0 0 0.5px rgba(255, 120, 130, 0.5), 0 0 18px rgba(235, 35, 50, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35); }
.filters, .filters .lens { transition: background 400ms var(--ease), box-shadow 400ms var(--ease), opacity 200ms var(--ease); }
.card.is-halloween .card-label, .card.is-halloween .card-mode { background: linear-gradient(180deg, rgba(255, 70, 80, 0.16), rgba(120, 0, 12, 0.1)), var(--smoke);
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 0 0 0.5px rgba(255, 90, 100, 0.35), 0 0 22px rgba(225, 30, 45, 0.2), 0 12px 32px rgba(0, 0, 0, 0.34); }
.card.is-halloween .card-mode .lens { background: linear-gradient(180deg, rgba(255, 90, 100, 0.5), rgba(200, 20, 35, 0.25)); }
/* The chosen display face follows Halloween artwork into filters, card titles and quick view. */
.filters .chip[data-filter="halloween"], .card.is-halloween .card-title, .qv.is-halloween .qv-title {
  font-family: "Metal Mania", var(--ui); font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.02em;
  color: #ff6972; text-shadow: 0 0 8px rgba(255, 40, 55, 0.6), 0 0 20px rgba(220, 20, 40, 0.32);
}
.filters .chip[data-filter="halloween"] { font-size: 17px; }
.js .filters[data-segments] .chip[data-filter="halloween"][aria-pressed="true"],
.js .filters[data-segments].is-dragging .chip[data-filter="halloween"][aria-pressed="true"]:not(.is-under) { font-weight: 400; color: #ff8990; }
@media (hover: hover) and (pointer: fine) { .filters .chip[data-filter="halloween"]:hover { font-weight: 400; color: #ff8990; } }
.card.is-halloween .card-title { font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.qv.is-halloween .qv-title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; overflow-wrap: anywhere; }
#hw-grid-title, .hw-stage .hw-title, .hw-page-copy .hw-title { color: #ffb1b4; text-shadow: 0 0 12px rgba(255, 40, 55, 0.52), 0 0 35px rgba(220, 20, 40, 0.26); }
@media (max-width: 520px) { .card.is-halloween .card-title { font-size: 15px; } }

/* Bats flying across (assets/js/flock.js): most behind the content, a few faint ones in front. */
.bat-flock { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hw-stage .bat-flock.is-back { z-index: 1; }
.hw-stage .bat-flock.is-front { z-index: 3; opacity: 0.4; }
.bat-flock.is-page { position: fixed; }
.bat-flock.is-page.is-back { z-index: 0; }
.bat-flock.is-page.is-front { z-index: 45; opacity: 0.35; }
.theme-halloween main, .theme-halloween .site-footer { position: relative; z-index: 1; }

/* The bat swarm: a real film of bats, cut out on the graphics card, flying over the page (assets/js/bats.js). */
.bat-film { position: fixed; inset: 0; z-index: 202; width: 100vw; height: 100vh; pointer-events: none; }
.bat-film-multiply { object-fit: cover; mix-blend-mode: multiply; background: #fff; }
.bat-veil { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; background: #000; }
@media (prefers-reduced-motion: reduce) { .hw-title, .hw-fog, .pill.glass-red { animation: none; } }

/* The Halloween room's backdrop: the haunted forest and castle, looping behind everything, dimmed. */
.hw-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #050304 url(/assets/halloween/forest.webp) center / cover; }
.hw-backdrop-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(4, 2, 3, 0.45), rgba(4, 2, 3, 0.55) 60%, rgba(4, 2, 3, 0.8)); }

/* Floating red glass: the Halloween panels drift gently, lifted off the scene. */
.hw-copy.glass-red, .hw-page-copy.glass-red { animation: glass-float 7s ease-in-out infinite;
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 0 0 0.5px rgba(255, 90, 100, 0.32), 0 0 36px rgba(225, 30, 45, 0.18), 0 28px 60px rgba(0, 0, 0, 0.55); }
@keyframes glass-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-10px) rotate(-0.35deg); } 65% { transform: translateY(-4px) rotate(0.3deg); } }
@media (prefers-reduced-motion: reduce) { .hw-copy.glass-red, .hw-page-copy.glass-red { animation: none; } }

/* Service rows: start a project, or see examples on the service's own page. */
/* A service's extra page (Latin night flyers under event flyers): a quiet text link, a full finger tall. */
.service-also { font-size: 14.5px; }
.service-also a { display: inline-block; padding-block: 11px; color: var(--soft); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .service-also a:hover { color: var(--paper); } }

/* A case study's result: one line, where the job landed. */
.case-result { max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; color: var(--paper); }
.case-result span { display: inline-block; margin-right: 8px; padding: 5px 10px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 11px/1.1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; }

/* Phones: each case is compact, the piece moving beside its title, the story under both. */
@media (max-width: 899px) {
  .case-row { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); grid-template-rows: auto auto 1fr; gap: 14px 16px; align-items: start; padding: 12px; }
  .case-row .case-copy { display: contents; }
  .case-row .case-media { grid-column: 1; grid-row: 1 / span 3; }
  .case-row .case-frame, .case-row .case-frame.is-wide { aspect-ratio: 9 / 16; max-height: none; }
  .case-row .case-no { grid-column: 2; grid-row: 1; padding-top: 6px; }
  .case-row .case-title { grid-column: 2; grid-row: 2; font-size: clamp(30px, 8.6vw, 46px); }
  .case-row .case-kind { grid-column: 2; grid-row: 3; }
  .case-row .case-lede, .case-row .case-facts, .case-row .case-result, .case-row .pill { grid-column: 1 / -1; }
  .case-row .case-lede { font-size: 17px; }
  .case-row .case-facts { margin: 0; gap: 6px; }
  .case-row .case-facts li { padding: 8px 12px; font-size: 13px; }
  .case-row .case-facts .display { font-size: 18px; }
  .case-row .pill { justify-self: start; }
}


/* Phones: Now showing keeps its first eight under All, See the work right under them (the rest stay in their filters). */
@media (max-width: 639px) {
  .filters:not([data-active]) + .grid > [data-phone-more], .filters[data-active="all"] + .grid > [data-phone-more] { display: none; }
}
.service-cost { display: grid; gap: 2px; }
.service-price { font: 700 20px/1.2 var(--ui); color: var(--paper); }
.service-note { color: var(--faint); font-size: 13px; }

/* Halloween spot, lighter: the 2026 film shows through; on wide screens the glass sits to the left of it. */
.hw-fog { opacity: 0.55; }
@media (min-width: 900px) {
  .hw-stage { place-items: center start; padding-left: clamp(36px, 5vw, 80px); }
  .hw-copy.glass-red { max-width: 540px; }
}
.hw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hw-deadline { color: #ffd0d3; font: 600 14px/1.3 var(--ui); letter-spacing: 0.01em; }

/* Christmas and New Year: two doors, frost and gold. One door alone takes the whole width. */
.holiday-doors { display: grid; gap: 14px; }
@media (min-width: 900px) { .holiday-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .holiday-doors:has(> .door[hidden]) { grid-template-columns: 1fr; } }
/* With Thanksgiving open there are three doors: three across on wide screens, Thanksgiving on its own row above the two on tablets. */
@media (min-width: 1180px) { .holiday-doors:has(> .door-thanksgiving:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .holiday-doors:has(> .door-thanksgiving:not([hidden])) .door-title { font-size: clamp(44px, 4.1vw, 64px); } }
@media (min-width: 900px) and (max-width: 1179px) { .holiday-doors:has(> .door-thanksgiving:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .holiday-doors > .door-thanksgiving { grid-column: 1 / -1; } }
.door { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(78svh, 700px); padding: clamp(16px, 2.6vw, 30px); border-radius: 34px; overflow: hidden; background: #05070c; color: var(--paper); }
@media (max-width: 899px) { .door { min-height: 480px; } }
.door-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.door-shade { position: absolute; inset: 0; z-index: -1; }
.door-christmas .door-shade { background: radial-gradient(90% 60% at 50% 0%, rgba(120, 180, 255, 0.22), transparent 70%), linear-gradient(transparent 25%, rgba(3, 8, 18, 0.9)); box-shadow: inset 0 0 0 0.5px rgba(170, 215, 255, 0.3); border-radius: inherit; }
.door-newyear .door-shade { background: radial-gradient(90% 60% at 50% 0%, rgba(255, 190, 80, 0.22), transparent 70%), linear-gradient(transparent 25%, rgba(12, 8, 2, 0.9)); box-shadow: inset 0 0 0 0.5px rgba(255, 210, 130, 0.3); border-radius: inherit; }
.door-copy { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; max-width: 470px; padding: clamp(20px, 2.8vw, 30px); border-radius: 28px; }
.door-deadline { font: 600 14px/1.3 var(--ui); }
.door-title { font-size: clamp(46px, 6.4vw, 92px); }
.door-line { max-width: 38ch; color: var(--soft); }
.door-go { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .door .door-copy { transition: transform 300ms var(--ease); } .door:hover .door-copy { transform: translateY(-4px); } }
.door-thanksgiving .door-shade { background: radial-gradient(90% 60% at 50% 0%, rgba(255, 140, 50, 0.24), transparent 70%), linear-gradient(transparent 25%, rgba(18, 8, 2, 0.9)); box-shadow: inset 0 0 0 0.5px rgba(255, 180, 110, 0.3); border-radius: inherit; }
.door-thanksgiving .door-deadline, .theme-thanksgiving .room-deadline { color: #ffc98a; }
.door-thanksgiving .door-title, .theme-thanksgiving .room-title { color: #fff1e2; text-shadow: 0 0 18px rgba(255, 150, 60, 0.5), 0 0 60px rgba(255, 110, 30, 0.28); }
.door-christmas .door-deadline { color: #bfe6ff; }
.door-christmas .door-title, .theme-christmas .room-title { color: #f2fbff; text-shadow: 0 0 18px rgba(160, 215, 255, 0.55), 0 0 60px rgba(110, 170, 255, 0.3); }
.door-newyear .door-deadline { color: #ffd98a; }
.door-newyear .door-title, .theme-newyear .room-title { background: linear-gradient(180deg, #fff6dc 10%, #f3c567 55%, #b8862b 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255, 190, 80, 0.35)); }

/* Frost and gold glass: the site's liquid glass, tinted for each room. */
.glass-frost { background: linear-gradient(180deg, rgba(220, 240, 255, 0.16), rgba(150, 195, 255, 0.05)), var(--smoke);
  box-shadow: inset 0 1px 0.5px rgba(235, 248, 255, 0.6), inset 0 0 0 0.5px rgba(170, 215, 255, 0.35), 0 0 34px rgba(120, 180, 255, 0.16), 0 14px 34px rgba(0, 0, 0, 0.38); }
.glass-amber { background: linear-gradient(180deg, rgba(255, 200, 150, 0.16), rgba(200, 90, 20, 0.06)), var(--smoke);
  box-shadow: inset 0 1px 0.5px rgba(255, 230, 205, 0.6), inset 0 0 0 0.5px rgba(255, 175, 110, 0.35), 0 0 34px rgba(255, 140, 50, 0.16), 0 14px 34px rgba(0, 0, 0, 0.38); }
.glass-gold { background: linear-gradient(180deg, rgba(255, 220, 150, 0.16), rgba(170, 120, 30, 0.06)), var(--smoke);
  box-shadow: inset 0 1px 0.5px rgba(255, 238, 200, 0.6), inset 0 0 0 0.5px rgba(255, 205, 120, 0.35), 0 0 34px rgba(255, 180, 60, 0.16), 0 14px 34px rgba(0, 0, 0, 0.38); }

/* Snow and fireworks layers (assets/js/snow.js, fireworks.js). */
.snow-layer, .fireworks-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.door .snow-layer.is-back, .door .fireworks-layer { z-index: 1; }
.door .snow-layer.is-front { z-index: 3; }
.snow-layer.is-page, .fireworks-layer.is-page { position: fixed; }
.snow-layer.is-page.is-back, .fireworks-layer.is-page { z-index: 0; }
.snow-layer.is-page.is-front { z-index: 45; }

/* Christmas lights on a sagging wire, twinkling out of step. */
.xmas-lights { position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: 40px; color: rgba(25, 40, 30, 0.95); pointer-events: none; }
.xmas-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xmas-lights i { --c: #ff4b4b; position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1px); width: 9px; height: 14px; margin-left: -4.5px; border-radius: 50% 50% 46% 46%; background: var(--c);
  box-shadow: 0 0 8px 1px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent); animation: bulb 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s); }
.xmas-lights i::before { content: ""; position: absolute; top: -4px; left: 2px; width: 5px; height: 5px; border-radius: 1px; background: #1c2a20; }
.xmas-lights i:nth-child(4n + 3) { --c: #3ee08f; }
.xmas-lights i:nth-child(4n + 4) { --c: #ffd166; }
.xmas-lights i:nth-child(4n + 5) { --c: #5ab8ff; }
@keyframes bulb { 50% { opacity: 0.4; filter: brightness(0.7); } }

/* The Times Square ball dropping down its pole to the coming year. */
.ball-drop { position: absolute; top: 22px; right: clamp(16px, 5%, 52px); z-index: 1; width: 86px; height: 58%; container-type: size; pointer-events: none; }
.ball-pole { position: absolute; top: 20px; bottom: 44px; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: linear-gradient(#e6e9f0, #6b7280); opacity: 0.75; }
.ball { position: absolute; top: 0; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, transparent 9%), repeating-conic-gradient(from 10deg, rgba(255, 255, 255, 0.95) 0 9deg, rgba(170, 195, 255, 0.8) 9deg 18deg, rgba(255, 215, 140, 0.9) 18deg 27deg);
  box-shadow: 0 0 16px 4px rgba(255, 230, 170, 0.75), 0 0 56px 14px rgba(255, 200, 90, 0.35); animation: ball-drop 10s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes ball-drop { 0%, 8% { transform: translateY(0) rotate(0deg); } 62%, 100% { transform: translateY(calc(100cqh - 88px)) rotate(200deg); } }
.ball-year { position: absolute; bottom: 0; left: 50%; font: 800 26px/1 var(--display); letter-spacing: -0.02em; color: #ffd98a; text-shadow: 0 0 14px rgba(255, 200, 90, 0.8); transform: translateX(-50%) scale(0.8); opacity: 0; animation: year-flash 10s ease-out infinite; }
@keyframes year-flash { 0%, 60% { opacity: 0; transform: translateX(-50%) scale(0.8); } 66%, 92% { opacity: 1; transform: translateX(-50%) scale(1.08); } 100% { opacity: 0; } }
@media (max-width: 899px) { .ball-drop { width: 66px; height: 46%; } .ball { width: 36px; height: 36px; margin-left: -18px; } .ball-year { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .xmas-lights i, .ball, .ball-year { animation: none; } .ball { transform: translateY(calc(100cqh - 88px)); } .ball-year { opacity: 1; } }

/* Seasonal pieces and filters wear their room: frost for Christmas, gold for New Year. */
.card.is-christmas .card-label, .card.is-christmas .card-mode { background: linear-gradient(180deg, rgba(210, 235, 255, 0.18), rgba(120, 170, 255, 0.07)), var(--smoke); box-shadow: inset 0 1px 0.5px rgba(230, 245, 255, 0.5), inset 0 0 0 0.5px rgba(170, 215, 255, 0.35), 0 12px 32px rgba(0, 0, 0, 0.34); }
.card.is-newyear .card-label, .card.is-newyear .card-mode { background: linear-gradient(180deg, rgba(255, 215, 140, 0.18), rgba(170, 120, 30, 0.08)), var(--smoke); box-shadow: inset 0 1px 0.5px rgba(255, 238, 200, 0.5), inset 0 0 0 0.5px rgba(255, 205, 120, 0.35), 0 12px 32px rgba(0, 0, 0, 0.34); }
.card.is-thanksgiving .card-label, .card.is-thanksgiving .card-mode { background: linear-gradient(180deg, rgba(255, 200, 150, 0.18), rgba(200, 90, 20, 0.08)), var(--smoke); box-shadow: inset 0 1px 0.5px rgba(255, 230, 205, 0.5), inset 0 0 0 0.5px rgba(255, 175, 110, 0.35), 0 12px 32px rgba(0, 0, 0, 0.34); }
.card.is-thanksgiving .card-title, .filters .chip[data-filter="thanksgiving"] { color: #ffd2a6; text-shadow: 0 0 8px rgba(255, 150, 60, 0.5); }
.card.is-christmas .card-title, .filters .chip[data-filter="christmas"] { color: #e8f6ff; text-shadow: 0 0 8px rgba(150, 210, 255, 0.55); }
.card.is-newyear .card-title, .filters .chip[data-filter="newyear"] { color: #ffd98a; text-shadow: 0 0 8px rgba(255, 200, 90, 0.5); }
.js .filters[data-segments] .chip[data-filter="thanksgiving"][aria-pressed="true"], .js .filters[data-segments] .chip[data-filter="christmas"][aria-pressed="true"], .js .filters[data-segments] .chip[data-filter="newyear"][aria-pressed="true"] { color: var(--ink); text-shadow: none; }

/* Halloween spot on wide screens: the glass on the left, this year's film upright in its own frame on
   the right (a phone-shaped film stretched across the whole box only ever showed a dark middle strip),
   and the title sized to stay inside its glass. Phones keep the film full-bleed behind the glass. */
@media (min-width: 900px) {
  .hw-stage { grid-template-columns: minmax(0, 1fr) auto; place-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 4vw, 56px);
    background: radial-gradient(55% 75% at 76% 50%, rgba(160, 0, 18, 0.38), transparent 72%), radial-gradient(60% 60% at 20% 50%, rgba(90, 0, 10, 0.3), transparent 70%), #050304; }
  .hw-stage .hw-film { position: relative; inset: auto; z-index: 2; grid-column: 2; grid-row: 1; width: auto; height: min(68svh, 620px); aspect-ratio: 9 / 16; opacity: 1; object-fit: cover; border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.28), 0 0 60px rgba(200, 20, 35, 0.35), 0 30px 80px rgba(0, 0, 0, 0.6); }
  .hw-stage .hw-copy.glass-red { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: 640px; }
  .hw-stage .hw-title { font-size: clamp(58px, 7vw, 104px); }
  .hw-fog { opacity: 0.4; }
}
@media (min-width: 900px) {
  /* The title takes about 85% of its glass at any width, never more. */
  .hw-stage .hw-copy.glass-red { container-type: inline-size; }
  .hw-stage .hw-title { font-size: min(124px, 20.5cqi); }
}

/* ── Site-wide usability pass ───────────────────────────────────────────────────────────────────── */
/* The result tag reads at 12px. */
.case-result span { font-size: 12px; }
/* What I make: the formats, and the turnaround in full brightness. */
.service-meta { color: var(--soft); font-size: 14.5px; }
.service-meta span:last-child { color: var(--paper); font-weight: 600; }
.service-note { color: var(--soft); font-size: 14px; }

/* Start card: the end of the homepage and the way into the brief. The promise on the left; the four facts
   people ask before committing and the two ways to start on the right, in full view. */
.start-card { display: grid; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: 32px; }
@media (min-width: 900px) { .start-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.start-card-head, .start-card-side { display: grid; gap: 16px; align-content: start; }
.start-card .lede { max-width: 40ch; }
.start-facts { display: grid; margin: 0; }
.start-facts > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); }
.start-facts > div:first-child { padding-top: 0; border-top: 0; }
.start-facts dt { color: var(--paper); font-size: 15px; font-weight: 700; }
.start-facts dd { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.45; }
.start-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
@media (max-width: 559px) {
  .start-actions .pill { flex: 1 1 100%; justify-content: center; }
  .start-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Called from "Start a project" in the header: the card's glass glows once as the glide lands (glide.js). */
.start-card.is-called { animation: card-call 1.3s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes card-call {
  0% { box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.42), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 12px 32px rgba(0, 0, 0, 0.34), 0 0 0 0 rgba(255, 255, 255, 0.55); }
  100% { box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.42), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 12px 32px rgba(0, 0, 0, 0.34), 0 0 0 22px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .start-card.is-called { animation: none; } }

/* Case studies, edited down: on wide screens three cards side by side (the piece on top, the story under
   it) instead of three screen-high rows; on phones and tablets a sideways reel with the next case peeking. */
@media (min-width: 900px) {
  .case-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .case-row { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 18px; }
  .case-row .case-frame, .case-row .case-frame.is-wide { width: 100%; aspect-ratio: 4 / 5; max-height: none; }
  .case-row .case-copy { gap: 12px; padding: 4px 6px 8px; }
  .case-row .case-title { font-size: clamp(34px, 3.1vw, 50px); }
  .case-row .case-lede { font-size: 17px; }
  .case-row .case-facts { gap: 6px; }
  .case-row .case-facts li { padding: 8px 12px; font-size: 13px; }
  .case-row .case-facts .display { font-size: 18px; }
  .case-row .case-result { font-size: 16px; }
}
@media (max-width: 899px) {
  .case-list { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter); }
  .case-list::-webkit-scrollbar { display: none; }
  .case-list > li { scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 899px) { .case-list { grid-auto-columns: 60%; } }


/* Wide screens, edited down. Now showing keeps its first ten under All: three full rows. */
@media (min-width: 640px) {
  .filters:not([data-active]) + .grid > [data-desk-more], .filters[data-active="all"] + .grid > [data-desk-more] { display: none; }
}
/* The edition reels a touch smaller on wide screens, so a whole reel sits in one screen. */
@media (min-width: 1180px) { .strip { grid-auto-columns: clamp(220px, 18.5vw, 276px); } }

/* Oct 16: three real messages right under the first screen. Plain type, no glass: nothing heavy for phones. */
.proof { padding: clamp(28px, 4vw, 48px) var(--gutter) 0; }
.proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); max-width: 1320px; margin: 0 auto; padding: 0; list-style: none; }
.proof-item { display: grid; align-content: start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--hair); }
.proof-item blockquote { margin: 0; }
.proof-quote { margin: 0; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; }
.proof-quote::before { content: "“"; } .proof-quote::after { content: "”"; }
.proof-who { margin: 0; color: var(--soft); font-size: 14px; }
@media (max-width: 759px) {
  .proof-list { grid-template-columns: 1fr; gap: 18px; }
  .proof-item:nth-child(n+3) { display: none; }
}

/* The seasonal deadline on the first screen: a quiet red line that links straight to the booking. */
.hero-season-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #ffd0d3; font: 600 15px/1.3 var(--ui); text-decoration: underline; text-decoration-color: rgba(255, 208, 211, 0.4); text-underline-offset: 4px; }
.hero-season-link::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px rgba(255, 59, 48, 0.7); }
.hero-season-link:has(> [hidden]) { display: none; }
.hero-season-link.is-thanksgiving { color: #ffd9a8; } .hero-season-link.is-thanksgiving::before { background: #ff9a3c; box-shadow: 0 0 10px rgba(255, 154, 60, 0.7); }
.hero-season-link.is-christmas { color: #d6ecff; } .hero-season-link.is-christmas::before { background: #8fd0ff; box-shadow: 0 0 10px rgba(143, 208, 255, 0.7); }
.hero-season-link.is-newyear { color: #ffe3a3; } .hero-season-link.is-newyear::before { background: #ffcc55; box-shadow: 0 0 10px rgba(255, 204, 85, 0.7); }
.hw-price { margin: 0; color: var(--paper); font: 600 15px/1.35 var(--ui); }

/* Below 900px the Halloween copy sits on the playing film: a solid red gradient instead of a live blur,
   which would be recomputed for every video frame on a phone (Oct 16 audit). Desktop keeps the glass. */
@media (max-width: 899px) {
  .hw-stage .hw-copy.glass-red { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(30, 4, 8, 0.62), rgba(10, 2, 4, 0.78)); }
}

/* The studio statement fills in word by word as it crosses the screen (home.js fillWords). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .studio-line[data-fill] { view-timeline: --studio-fill block; }
    .fill-word { animation: word-fill linear both; animation-timeline: --studio-fill; animation-range: cover var(--a) cover var(--b); }
  }
}
@keyframes word-fill { from { color: rgba(244, 242, 238, 0.2); } to { color: var(--paper); } }

.work-index { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); padding-top: clamp(120px, 14vw, 200px); }
.work-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.view-toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; }
/* Wall: every piece at once, tight and rounded, no labels. */
.grid[data-layout="wall"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 760px) { .grid[data-layout="wall"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid[data-layout="wall"] { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.grid[data-layout="wall"] .card, .grid[data-layout="wall"] .card-media { border-radius: 14px; }
.grid[data-layout="wall"] .card-label, .grid[data-layout="wall"] .card-glow { display: none; }
.missing { min-height: 70svh; align-content: center; }
.grid[data-layout="wall"] .card-mode, .grid[data-layout="wall"] .card-count { display: none; }

/* Case study pages. */
.case-hero { grid-template-columns: 1fr; align-items: end; padding-top: clamp(110px, 12vw, 170px); }
@media (min-width: 900px) { .case-hero { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); } }
.case-hero-media { overflow: hidden; border-radius: 28px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.case-hero-media video, .case-hero-media img { width: 100%; height: auto; max-height: 82svh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.case-hero-media.is-wide video, .case-hero-media.is-wide img { aspect-ratio: 16 / 9; }
.case-hero-copy { display: grid; gap: 18px; justify-items: start; }
.case-hero-copy .section-title { font-size: clamp(56px, 8.4vw, 150px); }
.chapters { display: grid; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chapters li { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--hair); }
.chapter-no { font: 600 14px/1 var(--ui); color: var(--faint); }
.chapter-title { font-size: clamp(32px, 3.4vw, 52px); }
.chapter-text { color: var(--soft); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 42ch; }
.case-quote .review { max-width: 820px; min-height: 0; }
.case-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .case-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .case-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.wall-tile { padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 9 / 16; transition: transform 220ms var(--ease); }
.wall-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .wall-tile:hover { transform: translateY(-4px); } }
.case-next-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; border-top: 1px solid var(--hair); }
/* The end of All work: a way into every service page. Plain text links like the footer: this page already
   carries hundreds of frosted elements on a phone, so no more blur here. */
.work-services { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hair); }

/* Halloween room. The lights come up on arrival. */
body.theme-halloween { background: radial-gradient(120% 70% at 50% 0%, #2a0508, var(--ink) 62%) fixed, var(--ink); }
body.theme-halloween::after { content: ""; position: fixed; inset: 0; z-index: 198; background: #000; pointer-events: none; animation: lights-up 1.1s ease-out 0.15s forwards; }
@keyframes lights-up { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { body.theme-halloween::after { display: none; } }
/* Coming through the door the room stays dark until the bat film takes over; the bats then reveal it. */
body.theme-halloween.is-arriving::after { animation: none; opacity: 1; visibility: visible; }
body.theme-halloween.has-arrived::after { display: none; }
.hw-page-hero { position: relative; isolation: isolate; grid-template-columns: 1fr; align-items: center; padding-top: clamp(120px, 13vw, 180px); padding-bottom: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .hw-page-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); } }
.hw-page-copy .hw-title { font-size: clamp(64px, 9vw, 150px); }
.hw-page-copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; }
@media (max-width: 360px) {
  .hw-page-hero { grid-template-columns: minmax(0, 1fr); }
  .hw-page-copy { min-width: 0; }
  .hw-page-copy.glass-red { padding-inline: 20px; }
  .hw-page-copy .hw-title { font-size: 52px; }
}
.hw-page-film, .room-film { position: relative; z-index: 2; display: grid; gap: 10px; margin: 0; }
.hw-page-film video, .room-film video { width: 100%; max-height: 80svh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: 26px; box-shadow: 0 18px 48px rgba(150, 0, 15, 0.3), inset 0 0 0 0.5px rgba(255, 80, 80, 0.3); }
.hw-film-cap { color: var(--soft); font-size: 14px; }
.hw-film-cap a { text-decoration: underline; text-underline-offset: 3px; }
/* The castle fades away through the older flyers, leaving the footer in near darkness. */
.hw-grid-section { isolation: isolate; }
.hw-grid-section::before { content: ""; position: absolute; inset: 0 0 -200px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 3, 4, 0) 0px, rgba(5, 3, 4, 0.42) 320px, rgba(5, 3, 4, 0.66) 32%, rgba(5, 3, 4, 0.88) 65%, rgba(5, 3, 4, 0.98) 100%); }
.hw-grid-section > * { position: relative; z-index: 1; }
/* Give the lone final portrait the same scale as its peers, centered on its own row. */
.hw-grid-section .grid > .card:last-child { grid-column: 1 / -1; justify-self: center; width: min(340px, calc((100% - clamp(14px, 1.8vw, 26px)) / 2)); }
@media (min-width: 760px) { .hw-grid-section .grid > .card:last-child { width: min(340px, calc((100% - 2 * clamp(14px, 1.8vw, 26px)) / 3)); } }
@media (min-width: 1180px) { .hw-grid-section .grid > .card:last-child { width: min(340px, calc((100% - 3 * clamp(14px, 1.8vw, 26px)) / 4)); } }
.theme-halloween .site-footer { isolation: isolate; }
.theme-halloween .site-footer::before { content: ""; position: absolute; inset: -1px 0 -200px; z-index: 0; pointer-events: none; background: #050304; }
.theme-halloween .site-footer > * { position: relative; z-index: 1; }

/* /work/#series-… : one series at a time. */
.series-note { color: var(--soft); }
.series-note strong { color: var(--paper); }
.series-note a { margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* Service pages: what it is, the facts, the work, what you get, the usual questions. */
.service-hero { padding-top: clamp(120px, 14vw, 200px); justify-items: start; }
.service-hero .section-title { font-size: clamp(60px, 10vw, 170px); }
.service-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.service-facts li { display: grid; gap: 3px; padding: 12px 18px; border-radius: 20px; font-weight: 600; font-size: 15px; }
.service-facts small { font-weight: 500; font-size: 12px; color: var(--faint); }
.service-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.includes li { padding: 20px 22px; border-radius: 24px; font-size: 17px; line-height: 1.4; }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq-item { border-radius: 24px; }
.faq-item > summary { position: relative; padding: 20px 60px 20px 22px; list-style: none; cursor: pointer; font: 600 18px/1.35 var(--ui); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; position: absolute; top: 50%; right: 24px; font-size: 26px; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform 220ms var(--ease); }
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > p { max-width: 62ch; padding: 0 22px 22px; color: var(--soft); }
.service-note, .service-terms { max-width: 60ch; color: var(--soft); font-size: 15px; }
.service-terms { color: var(--faint); font-size: 14px; }
/* Websites: the three builds side by side, the middle one lit. */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tier { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); border-radius: 30px; }
.tier:nth-child(2) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)), var(--smoke); }
.tier-name { font-size: clamp(34px, 3.4vw, 48px); }
.tier-price { font: 700 22px/1.1 var(--ui); }
.tier-line { color: var(--soft); }
.tier .pill { justify-self: start; margin-top: 6px; }
.tier-addon { color: var(--soft); }

/* Room films: the site's own glass sound button over the picture. */
.room-film-frame { position: relative; }
.room-film video { cursor: pointer; }
.film-sound { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.theme-halloween .film-sound { background: linear-gradient(180deg, rgba(255, 70, 80, 0.2), rgba(120, 0, 12, 0.12)), var(--smoke); }
.theme-thanksgiving .film-sound { background: linear-gradient(180deg, rgba(255, 200, 150, 0.22), rgba(200, 90, 20, 0.1)), var(--smoke); }
.theme-christmas .film-sound { background: linear-gradient(180deg, rgba(220, 240, 255, 0.2), rgba(150, 195, 255, 0.08)), var(--smoke); }
.theme-newyear .film-sound { background: linear-gradient(180deg, rgba(255, 220, 150, 0.22), rgba(170, 120, 30, 0.1)), var(--smoke); }
.theme-christmas .room-film video { box-shadow: 0 18px 48px rgba(40, 90, 170, 0.3), inset 0 0 0 0.5px rgba(170, 215, 255, 0.3); }
.theme-newyear .room-film video { box-shadow: 0 18px 48px rgba(170, 120, 20, 0.3), inset 0 0 0 0.5px rgba(255, 210, 130, 0.3); }

/* The Christmas and New Year rooms, built like the Halloween one. */
body.theme-thanksgiving { background: radial-gradient(120% 70% at 50% 0%, #2e1406, var(--ink) 62%) fixed, var(--ink); }
body.theme-christmas { background: radial-gradient(120% 70% at 50% 0%, #0d2440, var(--ink) 64%) fixed, var(--ink); }
body.theme-newyear { background: radial-gradient(120% 70% at 50% 0%, #2b2006, var(--ink) 62%) fixed, var(--ink); }
.theme-thanksgiving main, .theme-thanksgiving .site-footer, .theme-christmas main, .theme-christmas .site-footer, .theme-newyear main, .theme-newyear .site-footer { position: relative; z-index: 1; }
.room-hero { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); align-items: center; padding-top: clamp(140px, 14vw, 200px); padding-bottom: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .room-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); } }
.room-hero > .xmas-lights { top: 84px; left: var(--gutter); right: var(--gutter); }
.room-hero > .ball-drop { top: 110px; height: 52%; }
.room-copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; padding: clamp(26px, 3.5vw, 44px) clamp(24px, 4vw, 56px); border-radius: 34px; }
.room-deadline { font: 600 15px/1.3 var(--ui); }
.theme-christmas .room-deadline { color: #bfe6ff; }
.theme-newyear .room-deadline { color: #ffd98a; }
.room-title { font-size: clamp(60px, 9vw, 150px); }
@media (max-width: 360px) { .room-copy { padding-inline: 20px; } .room-title { font-size: 50px; } }
.theme-thanksgiving .room-copy .pill.solid { background: #ffe2c2; box-shadow: 0 0 0 1px rgba(255, 190, 130, 0.5), 0 10px 40px rgba(255, 130, 40, 0.35); }
.theme-christmas .room-copy .pill.solid { background: #eaf7ff; box-shadow: 0 0 0 1px rgba(170, 215, 255, 0.5), 0 10px 40px rgba(120, 180, 255, 0.35); }
.theme-newyear .room-copy .pill.solid { background: linear-gradient(180deg, #ffe7a8, #f3c567); box-shadow: 0 0 0 1px rgba(255, 215, 140, 0.5), 0 10px 40px rgba(255, 180, 60, 0.35); }
/* A room's last-year wall: cards centred, so a short last row sits in the middle. */
.room-grid .grid { display: flex; flex-wrap: wrap; justify-content: center; }
.room-grid .grid > .card { width: calc((100% - var(--g)) / 2); --g: clamp(14px, 1.8vw, 26px); }
.room-grid .grid > .card[data-shape="wide"] { width: 100%; }
@media (min-width: 760px) { .room-grid .grid > .card { width: calc((100% - 2 * var(--g)) / 3); } .room-grid .grid > .card[data-shape="wide"] { width: calc((100% - 2 * var(--g)) / 3 * 2 + var(--g)); } }
@media (min-width: 1180px) { .room-grid .grid > .card { width: calc((100% - 3 * var(--g)) / 4); } .room-grid .grid > .card[data-shape="wide"] { width: calc((100% - 3 * var(--g)) / 4 * 2 + var(--g)); } }
.room-grid .grid > .card:not([data-shape]) { margin-top: 0 !important; }
/* The New Year room: the ball drop gets its own lane between the words and the film. */
@media (min-width: 900px) {
  .room-newyear { grid-template-columns: minmax(0, 1.05fr) 96px minmax(0, 0.85fr); gap: clamp(20px, 3vw, 44px); }
  .room-newyear > .ball-drop { position: relative; top: auto; right: auto; grid-column: 2; grid-row: 1; justify-self: center; height: min(560px, 62svh); }
  .room-newyear > .room-copy { grid-column: 1; grid-row: 1; }
  .room-newyear > .room-film { grid-column: 3; grid-row: 1; }
}
@media (max-width: 899px) {
  .room-newyear > .ball-drop { position: relative; top: auto; right: auto; order: 1; justify-self: center; height: 210px; }
  .room-newyear > .room-film { order: 2; }
}
/* The Instagram link under a room film: a finger-sized touch area. */
.hw-film-cap a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
/* Service pages: the fact labels (Starting at, Turnaround…) and the terms line in clear view. */
.service-facts small { font-size: 13px; color: var(--soft); }
.service-terms { color: var(--soft); font-size: 15px; }

/* Websites page: what every site ships with, in plain words (Oct 16). */
.security-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.security-list li { display: grid; gap: 8px; padding: 22px; border-radius: 24px; }
.security-name { margin: 0; font: 600 18px/1.3 var(--ui); }
.security-list p { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.45; }

/* Privacy and terms: a readable column, nothing else. */
.legal-page { max-width: 760px; }
.legal-head { display: grid; gap: 12px; margin-bottom: 28px; }
.legal-part { padding: 22px 0; border-top: 1px solid var(--hair); }
.legal-title { margin: 0 0 10px; font: 600 20px/1.3 var(--ui); }
.legal-part p, .legal-contact { max-width: 62ch; margin: 0 0 10px; color: var(--soft); font-size: 17px; line-height: 1.55; }
.legal-contact a, .legal-part a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* A case cover's sound button sits on the looping clip, like the room films. */
.case-hero-media .room-film-frame video { cursor: pointer; }
/* Long next-step buttons (a case name, a service) wrap on small phones instead of pushing the page sideways. */
.case-next-row .pill { max-width: 100%; white-space: normal; text-align: center; }

/* The brief: Neku's promise above, the form in a glass panel. */
.brief-wrap { display: grid; gap: 18px; max-width: 880px; }
/* The quick quote: one question per screen, big tiles, the price on each. */
.quick { display: grid; gap: 16px; max-width: 760px; margin-top: 8px; padding: clamp(20px, 3vw, 34px); border-radius: 32px; }
.quick-title { margin: 0; font-size: clamp(34px, 4.4vw, 56px); }
.quick-lede { margin: 0; color: var(--soft); }
.quick-step { display: grid; gap: 14px; }
.quick-q { margin: 6px 0 0; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--ui); }
.quick-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
@media (max-width: 600px) { .quick-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-tile { min-height: 64px; padding: 12px 14px; } .quick-tile span { font-size: 15px; } }
.quick-tile { display: grid; gap: 4px; min-height: 72px; padding: 14px 16px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.06); color: var(--paper); text-align: left; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: box-shadow 200ms var(--ease), background-color 200ms var(--ease); }
.quick-tile span { font: 700 17px/1.2 var(--ui); }
.quick-tile small { color: var(--soft); font-size: 14px; }
.quick-tile[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px var(--paper); }
@media (hover: hover) and (pointer: fine) { .quick-tile:hover { background: rgba(255, 255, 255, 0.1); } }
.quick-input { width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.06); color: var(--paper); font: 500 17px/1 var(--ui); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color-scheme: dark; }
.quick-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--paper); }
.quick-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #ff8a8a; }
.quick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-message { margin: 0; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); font: 500 15px/1.55 var(--ui); white-space: pre-wrap; }
.quick-fine { margin: 0; color: var(--soft); font-size: 14px; }
.quick-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.quick-progress { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.quick-progress span { display: block; width: 25%; height: 100%; background: var(--paper); transition: width 320ms var(--ease); }
.quick-back, .quick-more { padding: 8px 0; border: 0; background: none; color: var(--soft); font: 600 15px/1 var(--ui); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.quick-back:hover, .quick-more:hover { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .quick-progress span, .quick-tile { transition: none; } }
.terms { color: var(--faint); font-size: 14px; }
.brief { display: grid; gap: 22px; margin-top: 12px; padding: clamp(20px, 3vw, 36px); border-radius: 32px; }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend, .field-label { padding: 0; font-size: 14px; font-weight: 500; color: var(--soft); }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 16px;
  font: 400 16px/1.4 var(--ui); color: var(--paper); background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px var(--paper); }
.field input[type="date"] { color-scheme: dark; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip-check span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.chip-check input:checked + span { background: var(--paper); color: var(--ink); box-shadow: none; }
.chip-check input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.err { font-size: 14px; color: var(--paper); }
.err::before { content: "✕ "; color: var(--rec); }
.brief > .pill[type="submit"] { justify-self: start; }
.brief-preview pre { margin: 8px 0 0; padding: 18px; border-radius: 18px; white-space: pre-wrap; font: 400 15px/1.6 var(--ui); background: rgba(0, 0, 0, 0.35); }
.brief-send { display: flex; flex-wrap: wrap; gap: 10px; }
.sent { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); }
.form-fine { color: var(--soft); font-size: 14px; }
.start-page { padding-top: clamp(120px, 14vw, 200px); }
.start-page .contacts { margin-top: 12px; }

/* 404 */
.missing { min-height: 80svh; align-content: center; justify-items: center; }
.missing-card { display: grid; gap: 20px; justify-items: start; max-width: 760px; padding: clamp(28px, 5vw, 56px); border-radius: 36px; }
.missing-card .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Brief builder: the price under each job, the questions for the picked jobs, the running estimate. */
.chip-check span:has(small) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 18px; line-height: 1.15; }
.chip-check span small { font-size: 12px; font-weight: 500; color: var(--faint); }
.chip-check input:checked + span small { color: rgba(9, 9, 10, 0.64); }
.brief-note { color: var(--soft); font-size: 15px; }
.brief-note a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.brief-group { display: grid; gap: 16px; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.brief-group > legend.brief-group-title { float: left; width: 100%; margin-bottom: 2px; font: 700 14px/1.1 var(--ui); color: var(--paper); }
.brief-group > legend.brief-group-title + * { clear: both; }
.brief-estimate { display: grid; gap: 6px; padding: 18px 22px; border-radius: 24px; }
.estimate-amount { font-size: clamp(34px, 5vw, 54px); }
@media (prefers-reduced-motion: no-preference) { .brief-estimate:not([hidden]), .brief-group:not([hidden]) { animation: brief-in 320ms var(--ease); } }
@keyframes brief-in { from { opacity: 0; transform: translateY(6px); } }
.brief-upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.legend-fine { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--faint); }

/* Before the form: the way out for people who would rather just talk. */
.brief-talk { color: var(--soft); font-size: 16px; }
.brief-talk a { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── The brief, laid out the way people read forms ──────────────────────────────────────────────
   One column of questions, labels above fields, four numbered steps. "Your brief" follows along:
   a panel beside the form on wide screens, a bar pinned to the bottom on phones and tablets. */
.brief-wrap { max-width: 1180px; }
.brief-talk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.brief-talk .pill { text-decoration: none; }
.brief-talk span { color: var(--faint); font-size: 14px; }
.brief { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.brief-main { display: grid; gap: 34px; min-width: 0; }
.brief-intro { max-width: 60ch; color: var(--soft); font-size: 16px; line-height: 1.5; }
.brief-step { display: grid; gap: 18px; padding-top: 30px; border-top: 1px solid var(--hair); }
.brief-intro + .brief-step { padding-top: 0; border-top: 0; }
.step-title { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 clamp(21px, 2vw, 25px)/1.2 var(--display); letter-spacing: -0.01em; color: var(--paper); }
.step-no { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 700 15px/1 var(--ui); }
.brief-step > .field > legend:has(.step-title) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.field label, .field legend { font-size: 15px; font-weight: 600; color: rgba(244, 242, 238, 0.9); }
.req { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--soft); font: 600 11px/1.2 var(--ui); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 2px; }
.brief-step > .field > legend .req { margin-left: 0; }

/* Step 1: the jobs as tiles, name and starting price, a tick when picked. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chip-check.tile > span { position: relative; display: grid; align-content: center; justify-items: start; gap: 4px; width: 100%; min-height: 78px; padding: 14px 44px 14px 16px; border-radius: 20px; line-height: 1.2; }
.tile-name { font-size: 16px; font-weight: 600; }
.chip-check.tile > span small { font-size: 13px; }
.chip-check.tile > span::after { content: ""; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); font: 700 13px/1 var(--ui); }
.chip-check.tile input:checked + span::after { content: "✓"; background: var(--ink); color: var(--paper); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .chip-check > span:hover { background-color: rgba(255, 255, 255, 0.12); } .chip-check input:checked + span:hover { background-color: var(--paper); } }

/* Step 4's attachment note, where it can't be missed. */
.brief-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: var(--soft); font-size: 15px; }
.brief-callout svg { flex: none; margin-top: 1px; color: var(--paper); }
.brief-callout strong { color: var(--paper); }

/* The main button and the send buttons: big enough to be the obvious next move. */
.brief-main > .brief-go { justify-self: start; min-height: 56px; padding: 0 32px; font-size: 16px; }
.brief-send .pill { min-height: 54px; padding: 0 26px; font-size: 16px; }
.brief-preview { display: grid; gap: 12px; }
.brief-preview pre { margin: 0; font-size: 15px; }

/* "Your brief": the picked jobs, how soon, the starting estimate, the button, what happens next. */
.brief-summary { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 26px; }
.summary-label { font: 700 15px/1.1 var(--ui); color: var(--faint); }
.summary-jobs { font: 700 18px/1.3 var(--ui); color: var(--paper); }
.summary-speed { color: var(--paper); font-size: 15px; font-weight: 600; }
.brief-summary .brief-estimate { padding: 0; background: none; box-shadow: none; }
.brief-summary .estimate-amount { font-size: clamp(36px, 3.4vw, 48px); }
.summary-go { width: 100%; min-height: 54px; font-size: 16px; }
.summary-send { display: grid; gap: 8px; }
.summary-send[hidden] { display: none; }
.summary-send .pill { width: 100%; min-height: 50px; }
.summary-next { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hair); }
.summary-next ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--soft); font-size: 15px; }

/* Wide screens: the questions on the left, "Your brief" beside them, staying in view. */
@media (min-width: 1024px) {
  .brief { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; column-gap: clamp(24px, 3vw, 44px); }
  .brief-summary { position: sticky; top: 96px; }
}
/* Phones and tablets: "Your brief" becomes a slim bar pinned to the bottom: the estimate and the button. */
@media (max-width: 1023px) {
  .brief-main > .brief-go { display: none; }
  .brief-summary { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 10px 10px 18px; border-radius: 24px;
    background: linear-gradient(180deg, rgba(34, 34, 37, 0.94), rgba(18, 18, 20, 0.94)); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 14px 40px rgba(0, 0, 0, 0.55); }
  .brief-summary .summary-label, .brief-summary .summary-speed, .brief-summary .summary-next, .brief-summary .brief-estimate .field-label, .brief-summary .brief-estimate .form-fine { display: none; }
  .brief-summary .summary-jobs { grid-column: 1; font-size: 14px; font-weight: 600; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brief-summary .brief-estimate { grid-column: 1; grid-row: 2; }
  .brief-summary .estimate-amount { font-size: 26px; }
  .brief-summary:has(.brief-estimate:not([hidden])) .summary-jobs { font-size: 12px; font-weight: 500; color: var(--faint); }
  .summary-go, .summary-send { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .summary-go { min-height: 50px; padding: 0 20px; font-size: 15px; }
  .summary-send .pill { width: auto; min-height: 48px; padding: 0 18px; font-size: 15px; }
  .summary-send .summary-email { display: none; }
}
@media (max-width: 639px) {
  .brief { padding: 18px 14px; }
  .brief-send { display: grid; }
  .brief-send .pill { width: 100%; }
  .brief-talk span { flex-basis: 100%; }
}
/* The job name inside a tile is plain text, not a pill of its own. */
.chip-check.tile .tile-name { display: block; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; line-height: 1.2; }
.req { font-size: 12px; }

/* Step 3: how soon and the budget as big tiles like step 1, a filled dot on the one picked. */
.sub-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 2px; padding: 0; font: 700 17px/1.3 var(--ui); color: var(--paper); }
.sub-note { margin-top: -6px; color: var(--soft); font-size: 15px; }
.opt { display: inline-block; padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: var(--soft); font: 600 12px/1.2 var(--ui); letter-spacing: 0.04em; text-transform: uppercase; }
.tiles.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .tiles.tiles-speed, .tiles.tiles-2 { grid-template-columns: minmax(0, 1fr); } }
.chip-check.tile-radio > span { min-height: 68px; }
.chip-check.tile-radio > span::after { content: ""; }
.chip-check.tile-radio input:checked + span::after { content: ""; background: radial-gradient(circle, var(--ink) 0 5px, transparent 5.5px); box-shadow: inset 0 0 0 2px var(--ink); }
.brief-hint { display: flex; align-items: flex-start; gap: 10px; color: var(--soft); font-size: 15px; line-height: 1.45; }
.brief-hint svg { flex: none; margin-top: 1px; color: var(--paper); }
/* Tile text always starts at the left edge, however short it is. */
.chip-check.tile > span { justify-content: start; text-align: left; }
.brief-step .sub-legend { margin-top: 4px; }

/* ── What the client must not miss ───────────────────────────────────────────────────────────────── */
/* The turnaround on the speed tiles reads as clearly as the choice itself. */
.tiles-speed .chip-check.tile > span small { font-size: 14px; color: rgba(244, 242, 238, 0.82); }
.tiles-speed .chip-check.tile input:checked + span small { color: rgba(9, 9, 10, 0.78); }
/* A notice: bright text in a box with a white edge, so it reads as something to know, not small print. */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); color: var(--paper); font-size: 15.5px; line-height: 1.45; transition: box-shadow 200ms var(--ease), background-color 200ms var(--ease); }
.notice svg { flex: none; margin-top: 1px; }
/* Picking Express makes its conditions light up. */
.brief-step:has(input[name="speed"][value="express"]:checked) .notice-express { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px var(--paper), 0 0 24px rgba(255, 255, 255, 0.12); }
/* Budget: the Optional tag and note in clear view. */
.opt { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); font-size: 12.5px; }
.sub-note { color: rgba(244, 242, 238, 0.86); }
/* Before you send: the terms in plain words, and the tick that confirms them. */
.brief-terms { display: grid; gap: 14px; margin: 0; padding: 20px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.terms-title { float: left; width: 100%; margin-bottom: 4px; padding: 0; font: 700 clamp(19px, 1.8vw, 22px)/1.25 var(--display); color: var(--paper); }
.terms-title + * { clear: both; }
.terms-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.terms-list li { position: relative; padding-left: 26px; color: var(--paper); font-size: 16px; line-height: 1.45; }
.terms-list li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
.terms-agree { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); cursor: pointer; font: 600 16px/1.35 var(--ui); color: var(--paper); }
.terms-agree input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--paper); cursor: pointer; }
.terms-agree:has(input:checked) { background: var(--paper); color: var(--ink); }
.terms-agree:has(input:checked) input { accent-color: var(--ink); }
.terms-agree:has(input[aria-invalid]) { box-shadow: inset 0 0 0 2px var(--rec); }
/* Sub-headings inside a step read the same whether they are a legend or a line of text. */
.field legend.sub-legend, .brief-step .sub-legend { font: 700 17px/1.3 var(--ui); color: var(--paper); margin-bottom: 4px; }
.sub-note { margin-top: 0; font-size: 15px; }
/* Brief: the tile prices, "Your brief" label and the payment line read clearly on the lighter glass. */
.chip-check span small, .chip-check.tile > span small { color: var(--soft); }
.chip-check input:checked + span small { color: rgba(9, 9, 10, 0.72); }
.summary-label { color: var(--soft); }
.brief-summary .brief-estimate .form-fine { color: var(--soft); font-size: 14px; }
@media (max-width: 1023px) { .brief-summary:has(.brief-estimate:not([hidden])) .summary-jobs { font-size: 13px; color: var(--soft); } }