/* 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;
}

*, *::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; }
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-xmas, .nav .nav-nye { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 16px; letter-spacing: 0; }
.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-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; }

/* Glass: blur and lift what is behind, a lit top edge, a faint bottom edge, a soft drop.
   The highlight follows the pointer (assets/js/shine.js). */
/* 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));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  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);
}
@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.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); 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);
  -webkit-backdrop-filter: blur(4px) saturate(170%) brightness(1.2); backdrop-filter: blur(4px) saturate(170%) brightness(1.2);
  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); }


/* 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; }
.hero-fallback::before { content: ""; position: absolute; inset: -40px; background: url(/media/atlas/atlas.webp) center / cover; filter: blur(14px) brightness(0.32); }
/* 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)); }
.has-glass .hero-fallback { display: none; }

.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; }

/* Services: five glass rows. */
.service-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.service { display: grid; gap: 10px 36px; padding: clamp(22px, 2.6vw, 34px); border-radius: 30px; }
@media (min-width: 900px) { .service { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; } }
.service-name { font-size: clamp(28px, 3vw, 42px); }
.service-line { color: var(--soft); max-width: 44ch; }
.service-meta { display: grid; gap: 2px; color: var(--faint); font-size: 14px; }
.service .pill { justify-self: start; }
.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-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; }

/* Reviews: real messages on glass, over a blurred wall of the work so the glass has something to bend. */
.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.webp) center / cover; filter: blur(34px) saturate(150%) brightness(0.42); opacity: 0.85;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.review-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.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; }
.review-cta { align-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)); }
.review-cta .review-quote::before, .review-cta .review-quote::after { content: none; }
.review-cta .pill { justify-self: start; }

/* 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-kicker { font: 600 14px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: #ff6b6b; }
.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));
  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));
  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));
  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. */
.service-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* 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); } }
@media (max-width: 899px) { .service-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; } }

/* 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: the reviews become a sideways reel, like the series. */
@media (max-width: 639px) {
  .review-list { grid-auto-flow: column; grid-template-columns: none; 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); }
  .review-list { grid-auto-columns: 82%; }
  .review-list::-webkit-scrollbar { display: none; }
  .review-list > li { scroll-snap-align: start; }
  .review { min-height: 210px; }
}

/* 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; } }
.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-kicker { font: 600 12px/1.2 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.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-christmas .door-kicker { 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-kicker { 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));
  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-gold { background: linear-gradient(180deg, rgba(255, 220, 150, 0.16), rgba(170, 120, 30, 0.06));
  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)); 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)); 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-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="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 ───────────────────────────────────────────────────────────────────── */
/* Services: the same column widths on every row, so names, lines, prices and details line up down the list. */
@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 0.95fr); }
  .service-actions { grid-column: 1; }
}
/* 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%; } }

/* The closing card never sits alone in a row: when it would, it becomes a full-width strip, line and button side by side. */
@media (min-width: 1000px) {
  .review-list > .review-cta:nth-child(3n + 1):last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; min-height: 0; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .review-list > .review-cta:nth-child(2n + 1):last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; min-height: 0; }
}

/* 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; }
}
/* What I make: three glass cards across instead of six full-width rows; the buttons line up along the bottom. */
@media (min-width: 1100px) {
  .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .service { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .service-name { font-size: clamp(28px, 2.4vw, 38px); }
  .service-actions { margin-top: auto; padding-top: 6px; }
}
/* 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; }
.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)); }
}

.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)); }
.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)); }
.theme-christmas .film-sound { background: linear-gradient(180deg, rgba(220, 240, 255, 0.2), rgba(150, 195, 255, 0.08)); }
.theme-newyear .film-sound { background: linear-gradient(180deg, rgba(255, 220, 150, 0.22), rgba(170, 120, 30, 0.1)); }
.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-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-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-kicker { font: 600 13px/1.2 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.theme-christmas .room-kicker { color: #bfe6ff; }
.theme-newyear .room-kicker { 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-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; }
.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 12px/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; 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 14px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; 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); } }