/* DB Media home page. Palette and type from clients/db-media/brand-profile.md. */

@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* The display face for the important words (his rule 2026-10-09: the website is not Poppins alone): the Fraunces italic
   of our introduction film, at the film's settings (soft, wonky, display size). OFL, licence beside the file. */
@font-face { font-family: "Fraunces Display"; src: url("assets/fonts/fraunces-italic-display.woff2") format("woff2"); font-weight: 500 900; font-style: italic; font-display: swap; }

:root {
  --cherry: #78102B;
  --cream: #F4F0E8;
  --ink: #0B1020;
  --periwinkle: #8D92E8;
  --slate: #65758B;

  --ink-soft: color-mix(in srgb, var(--ink) 76%, var(--cream));
  --hairline: color-mix(in srgb, var(--ink) 14%, var(--cream));
  --placeholder: color-mix(in srgb, var(--ink) 8%, var(--cream));
  --cherry-deep: color-mix(in srgb, var(--cherry) 82%, var(--ink));
  --cream-on-cherry: color-mix(in srgb, var(--cream) 82%, var(--cherry));

  --gutter: clamp(16px, 3.9vw, 56px);
  --maxw: 1680px;
  --header-h: 92px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* WORLD (2026-10-10; was YOURS), from website/tools/word_glyphs.py WORLD --track=-30 --stack 3 */
  --word-ar: 4.9391;
  --word-ar-stacked: 1.5935;

  color-scheme: light;
  accent-color: var(--cherry);
  scrollbar-color: color-mix(in srgb, var(--cherry) 70%, var(--cream)) var(--cream);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--cherry);
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
::selection { background: var(--cherry); color: var(--cream); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px 0 22px; border-radius: 3px; border: 0;
  font: 600 16px/1 "Poppins", sans-serif; letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-cherry { background: var(--cherry); color: var(--cream); }
.btn-cherry:hover { background: var(--cherry-deep); }
.btn-cream { background: var(--cream); color: var(--cherry); }
.btn-cream:hover { background: #fffdf8; }
.btn-cream:focus-visible { outline-color: var(--cream); }
.btn-small { min-height: 42px; padding: 0 18px 0 15px; font-size: 15px; gap: 9px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  padding: 10px 2px; transition: text-decoration-color 0.25s var(--ease-out);
}
.link-arrow:hover { text-decoration-color: var(--ink); }
.link-arrow svg { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover svg { transform: translateY(2px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  transition: box-shadow 0.3s var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--hairline); }
.bar {
  height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: block; border-radius: 6px; }
.brand img { height: 70px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav-links a { font-weight: 500; font-size: 15px; text-decoration: none; padding: 8px 0; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links .quiet { color: var(--ink-soft); }
.nav-links li { position: relative; }
.login-note {
  position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: var(--cream); border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.login-note.is-on { opacity: 1; transform: none; }
.login-note:empty { display: none; }

/* The header button only appears once the hero's own "Start a project" has scrolled away: one per screen. */
.header-cta { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.25s var(--ease-out); }
.js .header-cta { opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; }
.js .header-cta.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: inline; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn {
  display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin-right: -14px;
  border: 0; background: transparent; color: var(--ink); font: 600 15px/1 "Poppins", sans-serif; cursor: pointer; border-radius: 999px;
}

/* ---------- Hero ---------- */
.hero-track { position: relative; }
.stage {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
}
/* Phone fix (2026-10-10): the pinned stage fills the LARGE viewport (a phone's screen with its address bar hidden), so
   when the bar slides away mid-scroll no band of the next section shows under the picture. The words inside stay laid
   out in the SMALL viewport (bar showing), so nothing hides behind the bar and nothing jumps when it moves. On a
   computer the three units are the same. Browsers without lvh fall back to vh, which phones treat as the large one. */
.fly-on .hero-track { height: calc(100vh - var(--header-h) + 60vh); height: calc(100lvh - var(--header-h) + 60vh); }
.fly-on .stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100lvh - var(--header-h)); min-height: 0; }
.fly-on .hero-inner { height: calc(100svh - var(--header-h)); }

.hero-inner {
  position: relative; z-index: 1;
  height: 100%; min-height: inherit;
  max-width: var(--maxw); margin-inline: auto; padding: clamp(16px, 4vh, 48px) var(--gutter) clamp(24px, 6vh, 64px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 6vh, 64px);
}

.word { position: relative; width: 100%; aspect-ratio: var(--word-ar); transform-origin: 0 0; }
.glyph {
  position: absolute; overflow: hidden;
  /* the still poster is painted by the letter itself, so a letter is never empty while a frame loads */
  background: var(--poster, none) var(--pos, 50% 50%) / cover no-repeat,
              var(--lqip, none) var(--pos, 50% 50%) / cover no-repeat, var(--placeholder);
}
.par { position: absolute; inset: 0; transform: scale(1.05); will-change: transform; }
.g-W { left: 0.000%;  top: 1.521%; width: 28.619%; height: 97.510%; clip-path: url(#g-W); -webkit-clip-path: url(#g-W); --drift: 19s; --delay: -3s; }
.g-O { left: 29.432%; top: 0.000%; width: 20.246%; height: 100.000%; clip-path: url(#g-O); -webkit-clip-path: url(#g-O); }
.g-R { left: 51.302%; top: 1.521%; width: 16.130%; height: 97.510%; clip-path: url(#g-R); -webkit-clip-path: url(#g-R); --drift: 23s; --delay: -11s; }
.g-L { left: 68.972%; top: 1.521%; width: 11.621%; height: 97.510%; clip-path: url(#g-L); -webkit-clip-path: url(#g-L); --drift: 21s; --delay: -14s; }
.g-D { left: 81.882%; top: 1.521%; width: 18.118%; height: 97.510%; clip-path: url(#g-D); -webkit-clip-path: url(#g-D); --drift: 17s; --delay: -6s; }
.fly-ready .g-O { visibility: hidden; }

/* Cross-fade: the new picture fades in on top while the old one holds, so the letter never goes pale mid-change. */
.frame { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1.6s cubic-bezier(0.45, 0, 0.2, 1); }
.frame.is-on { opacity: 1; z-index: 2; }
.frame.is-leaving { opacity: 1; z-index: 1; transition: none; }
.media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  animation: drift var(--drift, 20s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: scale(1.08) translate3d(-1.6%, -1.1%, 0); }
  to   { transform: scale(1.17) translate3d(1.6%, 1.1%, 0); }
}
.is-paused .media, .is-paused .fly-img { animation-play-state: paused; }

.hero-copy {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 96px); align-items: end;
  will-change: opacity, transform;
}
.tagline {
  font-weight: 700; font-size: clamp(30px, 3.55vw, 58px); line-height: 1.04; letter-spacing: -0.028em;
  text-wrap: balance;
}
.tagline > span { display: block; }
.hero-side { display: grid; gap: 22px; justify-items: start; padding-bottom: 4px; }
.lede { color: var(--ink-soft); font-size: 17px; line-height: 1.5; max-width: 36ch; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }

/* The O, in its own layer for the fly-in */
.fly {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  clip-path: url(#fly-clip); -webkit-clip-path: url(#fly-clip);
  visibility: hidden;
}
.fly-ready .fly { visibility: visible; }
/* the O while flying (main.js: drawn on one canvas once the scroll starts, so a phone never shows it empty) */
.fly-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; }
/* Upgrade pass: once you are inside the O, the picture does not leave as a box. Its lower edge is taken by the water
   (an edge made from the ground's own folds, assets/ink-edge.png) and the water under it has taken the bag's colour.
   main.js sets --edge from the scroll: it starts in the last part of the fly and eats further in as the picture
   leaves. The mask is only on while it is needed. */
.stage.is-dissolving {
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--edge, 0px) + 2px) no-repeat,
                url("assets/ink-edge.png") center bottom / max(100%, 1100px) var(--edge, 0px) no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--edge, 0px) + 2px) no-repeat,
                url("assets/ink-edge.png") center bottom / max(100%, 1100px) var(--edge, 0px) no-repeat;
}
/* Phones (fix pass): the soft mask stretched 2.8 times let the dark foot of the picture hang over the water as grey
   smoke. Here a hard-edged copy of the same folds (assets/ink-edge-phone.png: the middle 420 px of the mask, cut at its
   middle contour, a 4 px feather) at the screen's own width, so the picture is either there or gone. */
@media (max-width: 760px) {
  .stage.is-dissolving {
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--edge, 0px) + 2px) no-repeat,
                  url("assets/ink-edge-phone.png") center bottom / 100% var(--edge, 0px) no-repeat;
            mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--edge, 0px) + 2px) no-repeat,
                  url("assets/ink-edge-phone.png") center bottom / 100% var(--edge, 0px) no-repeat;
  }
}
.fly-media { position: absolute; left: 0; top: 0; width: 2176px; height: 2896px; transform-origin: 0 0; will-change: transform; background: var(--placeholder) center / cover no-repeat; }
.fly-img { width: 100%; height: 100%; animation: drift 22s ease-in-out -8s infinite alternate; transform-origin: 50% 40%; will-change: transform; }

/* ---------- How it works: before / after ---------- */
.how { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 7vw, 104px); }
.how-grid {
  display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 620px);
  justify-content: center; gap: 40px clamp(40px, 4.5vw, 72px); align-items: center;
}
.how-copy { display: grid; gap: 22px; align-content: center; }
.how h2, .section-head h2 {
  font-weight: 700; font-size: clamp(34px, 4.3vw, 64px); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance;
}
.how-copy p { color: var(--ink-soft); font-size: 18px; max-width: 40ch; }
.how h2 span { display: block; }
.how-copy .hint { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 4px; max-width: 36ch; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-mouse { display: none; } .hint-touch { display: inline; } }

/* sized so the photo, its caption and the buttons all fit in one screen (fix pass: the upgrade's caption is two rows,
   the meter then the buttons, so the reserve under the photo is 200px, not the approved 150px; buttons on the meter's
   row would leave the meter under 40px at 1280) */
.ba-wrap { margin: 0; width: min(100%, calc((100svh - var(--header-h) - 200px) * 0.8)); }
.ba {
  position: relative; width: 100%; aspect-ratio: 1122 / 1402; border-radius: 6px; overflow: hidden;
  background: var(--placeholder);
  /* vertical swipes still scroll the page on a phone; a sideways stroke paints */
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the film is the source the brush paints from, never shown itself */
.ba-film { position: absolute; width: 2px; height: 2px; left: 0; top: 0; opacity: 0; pointer-events: none; }
.ba-caption {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}

/* the introduction film: its own vertical shape, as tall as the screen allows, beside the words */
.film {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--ink);
  aspect-ratio: 9 / 16; height: min(calc(100svh - var(--header-h) - 96px), 760px); cursor: pointer;
  box-shadow: 0 30px 60px -36px rgb(11 16 32 / 0.55);
}
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 10px; border: 0; padding: 0; background: none; color: var(--cream); cursor: pointer;
  font: 700 15px/1 "Poppins", sans-serif; letter-spacing: 0.02em;
}
.film-play[hidden] { display: none; }
.film-play-icon {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--cherry); box-shadow: 0 12px 32px -10px rgb(11 16 32 / 0.6);
  transition: transform 0.35s var(--ease-out);
}
.film-play-icon svg { width: 36px; height: 36px; fill: var(--cream); margin-left: 4px; }
.film-play-icon .i-big-replay { display: none; fill: none; color: var(--cream); }
.film-play.is-replay .i-big-replay { display: block; }
.film-play.is-replay .film-play-icon svg { margin-left: 0; }
/* at the end the film rests on its last frame (our mark); Replay waits above it, clear of the logo and handle */
.film-play.is-replay { top: 28px; transform: translateX(-50%); grid-auto-flow: column; align-items: center; gap: 12px; }
.film-play.is-replay .film-play-icon { width: 56px; height: 56px; }
.film-play.is-replay .film-play-icon svg { width: 24px; height: 24px; }
.film:hover .film-play-icon { transform: scale(1.06); }
.film-play-word { text-shadow: 0 1px 10px rgb(11 16 32 / 0.7); }
.film-play:focus-visible { outline: 3px solid var(--cream); outline-offset: 6px; border-radius: 12px; }
.film-bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 999px; background: rgb(11 16 32 / 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: default;
}
.film-bar[hidden] { display: none; }
.film-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 0; background: rgb(244 240 232 / 0.14); color: var(--cream); font: 600 13px/1 "Poppins", sans-serif; cursor: pointer;
}
.film-btn:hover { background: rgb(244 240 232 / 0.24); }
.film-btn .i-play, .film-btn .i-replay { display: none; }
.film-btn.is-paused .i-play { display: inline; }
.film-btn.is-paused .i-pause, .film-btn.is-ended .i-pause, .film-btn.is-ended .i-play { display: none; }
.film-btn.is-ended .i-replay { display: inline; }
.film-btn .i-mute { display: none; }
.film-btn[aria-pressed="false"] .i-mute { display: inline; }
.film-btn[aria-pressed="false"] .i-wave { display: none; }
.film-progress { flex: 1; height: 3px; margin: 0 10px 0 6px; border-radius: 3px; background: rgb(244 240 232 / 0.25); overflow: hidden; }
.film-progress span { display: block; height: 100%; width: 100%; background: var(--cream); transform-origin: left; transform: scaleX(0); }

/* ---------- Contact: "Send us yours." on cream, with the periwinkle bloom (look B) ---------- */
.contact { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); padding-block: clamp(48px, 5vw, 80px) clamp(72px, 8vw, 120px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 7vw, 120px); align-items: start; }
.contact h2 { font-size: clamp(46px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.03em; word-spacing: 0.04em; }
.contact h2 .t-soft { display: block; font-weight: 500; letter-spacing: -0.02em; }
.contact h2 .t-strong { display: block; font-weight: 800; color: var(--cherry); }
.contact-copy { display: grid; gap: 22px; }
.contact-copy p { color: var(--ink-soft); font-size: 18px; max-width: 34ch; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.field label .optional { font-weight: 500; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; font: 400 16px/1.45 "Poppins", sans-serif; color: var(--ink);
  background: rgb(255 253 248 / 0.92); border: 1.5px solid color-mix(in srgb, var(--ink) 18%, var(--cream)); border-radius: 10px; padding: 13px 16px;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink) 58%, var(--cream)); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; border-color: var(--cherry); }
.field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--cherry) 45%, var(--cream)); }
.field.has-error input, .field.has-error textarea { border-color: var(--cherry); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cherry) 18%, transparent); }
.error { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cherry); }
.error::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%2378102B' stroke-width='1.6'/%3E%3Cpath d='M8 4.4v4.4' stroke='%2378102B' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1.05' fill='%2378102B'/%3E%3C/svg%3E") center / contain no-repeat;
}
.error[hidden] { display: none; }
/* the "your note didn't send" line above Send (main.js): it can run to three lines, so the mark sits by the first */
.error[data-form-error] { align-items: flex-start; line-height: 1.5; }
.error[data-form-error]::before { margin-top: 0.2em; }
.error[data-form-error] a { overflow-wrap: anywhere; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin-top: 6px; }

.thanks { display: grid; gap: 14px; justify-items: start; padding-top: 8px; outline: none; color: var(--ink); }
.thanks h3 { font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.thanks p { color: var(--ink-soft); font-size: 18px; }
.thanks:not([hidden]) { animation: rise 0.7s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.link-btn {
  background: none; border: 0; padding: 8px 0; color: var(--cherry); cursor: pointer;
  font: 600 15px/1 "Poppins", sans-serif; text-decoration: underline; text-underline-offset: 0.25em;
}

/* ---------- Footer ---------- */
.site-footer { padding-block: 44px; }
.footer-row { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.footer-logo { height: 64px; width: auto; }
.fine { margin-left: auto; font-size: 13px; color: var(--ink-soft); }



/* =====================================================================================================
   Motion layer (rounds 6 and 7). Motion is GSAP (vendor/gsap), smooth scroll is Lenis (vendor/lenis), the one
   moving gradient is Paper Shaders (vendor/paper-shaders). Every state below reads correctly with no script.
   ===================================================================================================== */
:root {
  /* the play triangle from the logo (rounded corners, pointing right), used as a mask */
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 2.8 17.5 10 4.5 17.2Z' fill='%23000' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* the letters wait for their entrance (the inline script adds .intro; main.js removes it as the entrance starts) */
.intro .word .glyph, .intro .fly, .intro .tagline, .intro .hero-side { visibility: hidden; }

/* Type hierarchy (rule 7): the important words set apart by weight */
.tagline .t-soft { font-weight: 500; letter-spacing: -0.02em; }
.tagline .t-strong { font-weight: 800; }

/* ---------- What we do: the film and its chapters, one block ---------- */
.what { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.what-grid {
  --film-h: min(calc(100svh - var(--header-h) - 48px), 840px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  max-width: 1360px; gap: 48px clamp(40px, 5vw, 88px);
}
.what-copy { display: flex; flex-direction: column; gap: 18px; min-height: var(--film-h); }
.what-head h2 { font-weight: 800; font-size: clamp(40px, 5vw, 76px); line-height: 0.98; letter-spacing: -0.035em; }
.what-lede { margin-top: 14px; color: var(--ink-soft); font-size: 17px; line-height: 1.5; max-width: 62ch; }
.what-lede strong { color: var(--ink); font-weight: 700; }
.chapters { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; border-top: 1px solid var(--hairline); }
.chap {
  position: relative; display: grid; width: 100%; height: 100%; margin: 0; padding: 7px 0;
  grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb line time" "thumb what what";
  column-gap: 18px; row-gap: 2px; align-content: center; align-items: baseline;
  background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chap-thumb { grid-area: thumb; align-self: center; width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
  background: var(--placeholder); transition: transform 0.45s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.chap-line { grid-area: line; font-weight: 400; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.015em;
  transition: color 0.25s var(--ease-out); }
.chap-line strong { font-weight: 800; transition: color 0.25s var(--ease-out); }
.chap-what { grid-area: what; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.chap-time { grid-area: time; font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chap-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.chap-bar i { display: block; height: 100%; background: var(--cherry); transform-origin: left; transform: scaleX(0); }
.chap.is-on .chap-line strong { color: var(--cherry); }
.chap.is-on .chap-thumb { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--cherry); }
@media (hover: hover) { .chap:hover .chap-thumb { transform: scale(1.06); } .chap:hover .chap-line strong { color: var(--cherry); } }
.chap:focus-visible { outline-offset: 2px; }
.ai-note { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 14px; line-height: 1.5; max-width: 60ch; }
.ai-note svg { flex: none; margin-top: 4px; color: var(--cherry); }
.ai-note strong { font-weight: 700; }

.what-grid .film { height: var(--film-h); align-self: center; }
.film-full {
  position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(11 16 32 / 0.55); color: var(--cream); font: 600 13px/1 "Poppins", sans-serif;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.2s;
}
.film-full:hover { background: rgb(11 16 32 / 0.75); }
.film-full:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.film-full .i-exit { display: none; }
.film:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.film:fullscreen .film-video { object-fit: contain; }
.film:fullscreen .film-full .i-exit { display: inline; }
.film:fullscreen .film-full .i-enter { display: none; }
.film-play { transition: opacity 0.25s var(--ease-out); }
/* with the triangle cursor, the cursor itself is the film's play button while it is over the film */
.has-cursor .film:hover .film-play:not(:focus-visible) { opacity: 0; }

/* ---------- The ground (round 8): "ink in water" behind the whole page (his pick) ----------
   One fixed layer under everything. The still version (these soft washes of the ink's own colours) is what weak phones
   and the first paint show; the moving canvas (our shader, ground-shaders.js) fades in over it. main.js keeps it quiet
   behind the reading and lets it gather toward the close. */
.ground {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(58% 48% at 14% 86%, rgb(141 146 232 / 0.16), transparent 70%),
    radial-gradient(52% 44% at 88% 18%, rgb(231 180 174 / 0.26), transparent 70%),
    radial-gradient(40% 34% at 72% 92%, rgb(231 180 174 / 0.18), transparent 70%),
    var(--cream);
}
.ground-fx { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-out); }
/* a fine dither at the screen's own resolution (his note, "some lines"): the ink is drawn at a capped size and
   stretched on sharp screens, which can show its softest gradients as faint steps; this breaks them up */
.ground { isolation: isolate; }
.ground::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
}
.ground-fx.is-on { opacity: 1; }
.ground-fx canvas { display: block; width: 100%; height: 100%; }

/* ---------- Selected work (round 8): editorial spreads, scrolling down ----------
   On a wide screen the nine pieces are placed on one collage whose units are its own width (cqi), so the whole
   composition scales as one. Each piece carries its place: --x, --y, --w (in % of the collage width), the picture's
   own shape (--ar), and its title's anchor (--tx, --ty in % of the picture) and size (--fs). */
.work { padding-block: clamp(72px, 8vw, 128px) clamp(16px, 2vw, 32px); }
.work-head { display: grid; gap: 14px; margin-bottom: clamp(48px, 5.5vw, 88px); }
.work-head h2 { font-weight: 800; font-size: clamp(46px, 7vw, 120px); line-height: 0.95; letter-spacing: -0.04em; }
.work-head p { color: var(--ink-soft); font-size: 18px; }
.work-head p strong { color: var(--ink); font-weight: 700; }

.works { list-style: none; margin: 0; padding: 0; position: relative; container-type: inline-size; aspect-ratio: 100 / var(--H, 196); }
.piece { position: absolute; left: calc(var(--x) * 1cqi); top: calc(var(--y) * 1cqi); width: calc(var(--w) * 1cqi); }
.wf {
  position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: var(--ar);
  margin: 0; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: var(--placeholder); color: inherit; font: inherit; text-align: left; cursor: zoom-in;
  box-shadow: 0 40px 70px -48px rgb(11 16 32 / 0.55);
}
.wf:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.frame-in { position: absolute; inset: 0; overflow: hidden; }
.ph { position: absolute; left: 0; right: 0; top: -5%; bottom: -5%; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); -webkit-user-drag: none; user-select: none; }
@media (hover: hover) { .wf:hover .ph img { transform: scale(1.035); } }

/* the title: very large, in the display face, crossing the picture's edge. Two copies: the ink one on the ground,
   under the picture, and the cream one inside the frame, so the words turn cream exactly where they cross the photo. */
.pt {
  position: absolute; z-index: 0; left: calc(var(--tx) * 1%); top: calc(var(--ty) * 1%); margin: 0;
  font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 800; font-synthesis: none;
  font-size: calc(var(--fs) * 1cqi); line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap;
  color: var(--ink); pointer-events: none;
}
.t-r .pt { left: auto; right: calc((100 - var(--tx)) * 1%); text-align: right; }
/* Title modes. Split: the first line sits inside the foot of the picture, the rest runs on below it, so the edge falls
   between two lines and never slices through letters. Below: the whole title under the picture (brand names stay
   whole, in one colour). Side: the title crosses a side edge at --tx / --ty, over a calm, darker part of the photo. */
.t-split .pt { top: calc(100% - 1.12em); }
.t-split .pt-l + .pt-l { margin-top: 0.26em; }
.t-below .pt { top: calc(100% + 0.16em); }
/* soft shades inside the frame, only where a cream title sits, so it always reads */
.t-split .frame-in::after, .t-below .frame-in::after, .shade-tr .frame-in::after, .shade-tl .frame-in::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* a title drifts as you scroll and may pass over any edge of its picture: wherever it does, it is cream on a shade */
.t-split .frame-in::after, .t-below .frame-in::after { background: linear-gradient(to top, rgb(11 16 32 / 0.36), transparent 34%); }
.shade-tr .frame-in::after { background: radial-gradient(70% 55% at 100% 0%, rgb(11 16 32 / 0.42), transparent 72%); }
.shade-tl .frame-in::after { background: radial-gradient(70% 60% at 0% 0%, rgb(11 16 32 / 0.34), transparent 72%); }
.pt-on { z-index: 2; color: var(--on, var(--cream)); text-shadow: var(--on-shadow, 0 2px 26px rgb(11 16 32 / 0.3)); }
.pt-move, .pt-l { display: block; }
.pt-l { padding: 0 0.14em 0.16em 0.06em; margin: 0 -0.14em -0.16em -0.06em; }
.pt-w { display: inline-block; }

/* the small index and the technique, always on the ground beside the picture */
.pm {
  position: absolute; left: 0; top: calc(100% + 14px); display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; line-height: 1.3; white-space: nowrap;
}
.m-r .pm { left: auto; right: 0; }
.m-top .pm { top: auto; bottom: calc(100% + 12px); }
.pm-i { font-weight: 700; color: var(--cherry); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pm-t { font-weight: 500; color: var(--ink-soft); }

/* one simple column on phones and small tablets: same pieces, same reveals, sides alternating */
@media (max-width: 999px) {
  .works { aspect-ratio: auto; display: flex; flex-direction: column; gap: clamp(104px, 18vw, 150px); padding-top: 30px; }
  .piece { position: relative; left: auto; top: auto; width: min(80%, 540px); }
  .piece:nth-child(even) { align-self: flex-end; }
  .piece .pt-l + .pt-l { margin-top: 0.26em; }
  .piece .pt { left: 7%; right: auto; top: calc(100% - 1.12em); text-align: left; font-size: clamp(32px, 9.4cqi, 66px); }
  /* a soft shade at the foot of the picture, so the cream first line always reads */
  .frame-in::after { content: ""; position: absolute; inset: 55% 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgb(11 16 32 / 0.34), transparent); }
  .piece:nth-child(even) .pt { left: auto; right: 7%; text-align: right; }
  .works .piece.c-below .pt { top: calc(100% + 0.16em); }
  .works .piece.c-top-r .pt { top: 0.4em; left: auto; right: 6%; text-align: right; }
  .works .piece.c-top-r .frame-in::after { inset: 0; background: radial-gradient(80% 60% at 100% 0%, rgb(11 16 32 / 0.45), transparent 72%); }
  .works .piece.c-below .frame-in::after { display: none; }
  .works .piece.c-below { margin-bottom: 44px; } /* room for a title that sits wholly under its picture */
  .piece .pm { left: 0; right: auto; top: auto; bottom: calc(100% + 10px); }
  .piece:nth-child(even) .pm { left: auto; right: 0; }
}

/* small tablets (600 to 999 px): two columns, the right one set lower, so the section stays short */
@media (min-width: 600px) and (max-width: 999px) {
  .works { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; row-gap: clamp(150px, 20vw, 190px); padding-bottom: 24%; }
  .piece, .piece:nth-child(even) { width: 100%; align-self: start; }
  .piece:nth-child(even) { transform: translateY(44%); }
  .piece .pt { font-size: clamp(30px, 5.4cqi, 46px); }
}

/* ---------- Our social accounts, set in type (rule 1: no drawn icons) ---------- */
.soc { color: var(--ink); text-decoration: none; }
.soc-name { font-weight: 600; }
.soc-handle {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.3s var(--ease-out);
}
.soc:hover .soc-handle, .soc:focus-visible .soc-handle { text-decoration-color: currentColor; }
.social-line { color: var(--ink-soft); font-size: 17px; line-height: 1.4; }
.social-line .soc-name { color: var(--ink); }
.social-line .soc-handle { display: block; width: max-content; margin: 6px 0 0 -0.05em; font-size: 1.62em; line-height: 1.1; color: var(--cherry); }
.footer-social { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-social .soc-name { color: var(--ink-soft); font-weight: 500; margin-right: 0.3em; }
.footer-social .soc-handle { font-weight: 700; }
.nav-social { display: none; }

/* one picture, full screen */
.viewer {
  position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; align-items: center; gap: 14px; padding: 28px var(--gutter) 22px; background: var(--cream);
}
.viewer[hidden] { display: none; }
.viewer-frame { display: grid; place-items: center; min-height: 0; width: 100%; height: 100%; }
.viewer-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 124px); margin: 0; border-radius: 4px; object-fit: contain; }
.viewer-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 980px); }
.viewer-cap p { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; }
.viewer-close {
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); font: 600 15px/1 "Poppins", sans-serif; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.viewer-close:hover { background: var(--ink); color: var(--cream); }

/* ---------- Send us yours: the bloom (look B, cream blush) ---------- */
.flood {
  position: absolute; inset: 0; z-index: -1;
  /* the still version of look B: what reduced motion, weak phones and the first frame show */
  background:
    radial-gradient(42% 58% at 34% 30%, rgb(141 146 232 / 0.42), transparent 72%),
    radial-gradient(38% 52% at 78% 74%, rgb(231 180 174 / 0.55), transparent 72%),
    radial-gradient(30% 40% at 62% 92%, rgb(120 16 43 / 0.10), transparent 70%),
    radial-gradient(26% 36% at 88% 18%, rgb(141 146 232 / 0.28), transparent 70%);
}
/* The bloom is full strength behind the form (its fields are opaque) and soft behind the words, so the words always
   read on near-cream, whatever the moving colours do. */
.flood {
  --fade-y: linear-gradient(180deg, transparent 0%, #000 34%, #000 82%, transparent 100%);
  -webkit-mask-image: var(--fade-y), linear-gradient(90deg, rgb(0 0 0 / 0.38) 0%, rgb(0 0 0 / 0.5) 34%, #000 58%);
  mask-image: var(--fade-y), linear-gradient(90deg, rgb(0 0 0 / 0.38) 0%, rgb(0 0 0 / 0.5) 34%, #000 58%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 1024px) {
  .flood {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.42) 14%, rgb(0 0 0 / 0.5) 30%, #000 50%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.42) 14%, rgb(0 0 0 / 0.5) 30%, #000 50%, #000 88%, transparent 100%);
  }
}
.contact-copy { position: relative; }
.press { display: block; width: 46px; height: 46px; margin-bottom: 26px; background: var(--periwinkle);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat; transform-origin: 50% 100%; }
/* before the bloom (only once main.js has taken over): plain cream, the closing words not yet there */
.flood-armed .contact .flood { clip-path: circle(0px at var(--fx, 40px) var(--fy, 40px)); }
.flood-armed .contact-copy h2, .flood-armed .contact-copy > p, .flood-armed .helper, .flood-armed .contact-body { visibility: hidden; }
/* the footer's small print sits on a calm cream band, whatever the close's colour is doing behind it */
.site-footer { border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--cream) 90%, transparent); }

/* ---------- The cursor: our play triangle, with one personality ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor], .has-cursor .ba, .has-cursor .wf { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }
.cursor-blob { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; display: grid; place-items: center; transition: opacity 0.2s; }
/* Upgrade pass: no swelling disc. The triangle is always the cursor; over something you can act on, the word rides
   beside it on a small cherry flag; over the photo you paint, a ring shows the true size of the brush. */
.cursor-blob::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--brush-d, 60px); height: var(--brush-d, 60px);
  margin: calc(var(--brush-d, 60px) / -2) 0 0 calc(var(--brush-d, 60px) / -2); border-radius: 50%;
  border: 1.5px solid var(--cream); box-shadow: 0 0 0 1px rgb(11 16 32 / 0.28), inset 0 0 0 1px rgb(11 16 32 / 0.18);
  opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.35s var(--ease-out);
}
.cursor-tri { position: relative; width: 18px; height: 18px; background: var(--periwinkle);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
  transition: background-color 0.25s, width 0.35s var(--ease-out), height 0.35s var(--ease-out), opacity 0.2s; }
.cursor-label {
  position: absolute; left: calc(50% + 16px); top: calc(50% + 10px); padding: 5px 8px 6px; border-radius: 2px;
  background: var(--cherry); color: var(--cream); font: 600 13px/1 "Poppins", sans-serif; letter-spacing: 0.01em;
  opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity 0.18s, transform 0.3s var(--ease-out); white-space: nowrap;
}
.cursor.is-link .cursor-tri { background: var(--cherry); width: 24px; height: 24px; }
.cursor.is-label .cursor-tri { background: var(--cherry); width: 22px; height: 22px; }
.cursor.is-label .cursor-label { opacity: 1; transform: none; }
.cursor.is-play .cursor-tri { background: var(--cream); width: 34px; height: 34px; filter: drop-shadow(0 2px 8px rgb(11 16 32 / 0.45)); }
.cursor.is-play .cursor-label { left: calc(50% + 24px); top: calc(50% + 16px); }
.cursor.is-away .cursor-blob { opacity: 0; }
/* Over the photo you paint (2026-10-10, his note: "like a finger or a brush", not a circle): the cursor is the brush
   head itself, a flat brush lying across the way you move, its bristles showing, as wide as the mark it leaves. */
.cursor-brush {
  position: absolute; left: 50%; top: 50%; width: var(--brush-d, 60px); height: calc(var(--brush-d, 60px) * 0.34);
  margin: calc(var(--brush-d, 60px) * -0.17) 0 0 calc(var(--brush-d, 60px) / -2); border-radius: 50% / 50%;
  background: repeating-linear-gradient(90deg, rgb(250 246 238 / 0.9) 0 2px, rgb(250 246 238 / 0.35) 2px 5px);
  box-shadow: 0 0 0 1.5px rgb(250 246 238 / 0.95), 0 0 0 2.5px rgb(11 16 32 / 0.22), 0 3px 10px rgb(11 16 32 / 0.3);
  opacity: 0; transition: opacity 0.2s;
}
.cursor.is-paint .cursor-brush { opacity: 1; }
.cursor.is-paint .cursor-tri { opacity: 0; }
.cursor.is-paint .cursor-label { left: calc(50% + var(--brush-d, 60px) / 2 + 8px); top: -6px; }
.cursor.is-painting .cursor-label { opacity: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero-copy { grid-template-columns: 1fr; align-items: start; }
  .how-grid, .contact-grid { grid-template-columns: 1fr; }
  .how-grid { justify-content: stretch; }
  .ba-wrap { justify-self: center; width: min(100%, 560px); }
  .what-grid { --film-h: min(calc(100svh - var(--header-h) - 48px), 680px); gap: 40px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --header-h: 72px; }
  .brand img { height: 54px; }
  .menu-btn { display: inline-flex; }
  .nav { gap: 8px; }
  .nav-links {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); padding: 8px var(--gutter) 24px;
    box-shadow: 0 1px 0 var(--hairline), 0 24px 40px -24px rgb(11 16 32 / 0.25);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }
  .nav-links.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .nav-links a { display: block; font-size: 20px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-social { display: block; }
  .nav-links .nav-social a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .nav-social .soc-name { font-weight: 600; }
  .nav-social .soc-handle { font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 760; color: var(--cherry); font-size: 19px; text-decoration: none; }
  .nav-links a::after { display: none; }
  .login-note { position: static; display: inline-block; margin-top: 4px; }
  .header-cta { display: none; }
  /* phone order: heading and line, then the film, then its chapters */
  .what-grid { grid-template-columns: 1fr; justify-items: stretch; gap: 0; }
  .what-copy { display: contents; }
  .what-head { order: 1; }
  .what-grid .film { order: 2; height: auto; width: min(100%, 360px); justify-self: center; margin-top: 28px; }
  .chapters { order: 3; margin-top: 28px; grid-auto-rows: auto; }
  .ai-note { order: 4; margin-top: 22px; }
  .chap { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 0; }
  .chap-thumb { width: 52px; height: 52px; }
}

@media (max-width: 640px) {
  .word { aspect-ratio: var(--word-ar-stacked); }
  /* WOR over LD, each row centred (word_glyphs.py WORLD --track=-30 --stack 3) */
  .g-W { left: 0.000%;  top: 0.728%; width: 42.442%; height: 46.653%; }
  .g-O { left: 43.646%; top: 0.000%; width: 30.025%; height: 47.845%; }
  .g-R { left: 76.080%; top: 0.728%; width: 23.920%; height: 46.653%; }
  .g-L { left: 26.993%; top: 53.347%; width: 17.234%; height: 46.653%; }
  .g-D { left: 46.138%; top: 53.347%; width: 26.869%; height: 46.653%; }
  .hero-inner { justify-content: center; gap: 28px; padding-top: 12px; padding-bottom: 28px; }
  .tagline { font-size: clamp(28px, 8.2vw, 34px); }
  .lede { font-size: 16px; }
  .hero-side { gap: 18px; }
  .how-copy p, .what-lede, .contact-copy p, .work-head p { font-size: 16px; }
  .ba-caption { font-size: 13px; }
  .chap-line { font-size: 20px; }
  .chap-what { font-size: 14px; }
  .press { width: 38px; height: 38px; margin-bottom: 20px; }
  .form { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fine { margin-left: 0; }
  .viewer-cap { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion: everything still, every state readable ---------- */
/* Short phones (360x740 with the address bar showing): the hero's blocks sit a little closer, so the word clears the
   header instead of touching it (phone fix, 2026-10-10) */
@media (max-width: 640px) and (max-height: 700px) {
  .hero-inner { --hero-gap: 16px; gap: 16px; padding-top: 6px; padding-bottom: 14px; }
  .hero-copy { row-gap: 14px; }
  .hero-side { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .media, .fly-img { animation: none; transform: scale(1.06); }
  .frame, .btn, .nav-links, .nav-links a::after, .header-cta, .ba-act, .link-arrow svg, .login-note,
  .chap-thumb, .chap-line, .chap-line strong, .ph img, .ground-fx, .soc-handle { transition: none; }
  .thanks:not([hidden]) { animation: none; }
}

/* ---------- The display face on the important words (round 7c) ---------- */
.dsp {
  font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 800;
  letter-spacing: -0.01em; font-synthesis: none;
}
.tagline .dsp { font-weight: 800; font-size: 1.12em; line-height: 0.9; color: var(--cherry); letter-spacing: -0.015em; }
.how h2 .dsp, .what-head h2 .dsp, .work-head h2 .dsp { font-weight: 760; font-size: 1.08em; color: var(--cherry); }
.chap-line .dsp { font-weight: 760; font-size: 1.14em; line-height: 1; letter-spacing: -0.005em; transition: color 0.25s var(--ease-out); }
.chap.is-on .chap-line .dsp { color: var(--cherry); }
@media (hover: hover) { .chap:hover .chap-line .dsp { color: var(--cherry); } }
.contact h2 .t-strong.dsp { display: block; padding-left: 0.04em; font-weight: 860; font-size: 1.16em; line-height: 0.95; letter-spacing: -0.02em; }
@media (max-width: 640px) { .tagline .dsp { display: block; } }

/* =====================================================================================================
   UPGRADE PASS (2026-10-09, built beside the approved page). Type with a meaning, and one motion language.
   ===================================================================================================== */

/* Type with a meaning. Poppins says things as they are; the Fraunces italic of our film is the payoff, the word or line
   a thought lands on (as the film lands on "world." and "month."). It sets "like this.", "A different world.", the
   payoff word of each film chapter, the names of the six pieces of work and "yours." The two section
   labels keep their Fraunces word ("What we do", "Selected work") at the larger size, as on the approved page (fix pass:
   his rule "not Poppins alone", clients/db-media/brand-profile.md). */
.tagline { font-size: clamp(30px, 4.2vw, 76px); line-height: 1.02; }
.tagline .dsp { font-size: 1.16em; letter-spacing: -0.02em; }
.how-title { font-size: clamp(36px, 4.6vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.how-title .t-plain { display: block; font-weight: 800; }
.how-title .t-made { display: block; margin-top: 0.06em; }
.how h2.how-title .t-made .dsp {
  display: inline-block; font-weight: 820; font-size: 1.16em; line-height: 1; letter-spacing: -0.02em; color: var(--cherry);
  padding: 0 0.16em 0.12em 0.04em; margin: 0 -0.16em -0.12em -0.04em; /* room for the italic's overhang inside the paint mask */
}
.what-head h2 { font-size: clamp(42px, 5.4vw, 84px); letter-spacing: -0.04em; }
.work-head h2 { font-size: clamp(50px, 8.6vw, 152px); line-height: 0.9; letter-spacing: -0.045em; }
p, .lede, .chap-what { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-kerning: normal; }

/* The motion language, three verbs, each tied to what it shows:
   LAND  (crouch, stretch, squash, settle, from our film's triangle): the voice arriving. WORLD, the hero line, "yours."
   PAINT (a brush stroke): what we make of a product. "A different world." is painted on, like the photo beside it.
   PLAY-HEAD (a thin cherry line, the film's progress line): the page's structure. Section labels and the film's
         chapters are scrubbed in by it, and the work frames open from a thin line, as before. */
.motion [data-paint] .dsp {
  -webkit-mask: url("assets/paint-stroke.png") var(--paint-x, 100%) 0 / 300% 100% no-repeat;
          mask: url("assets/paint-stroke.png") var(--paint-x, 100%) 0 / 300% 100% no-repeat;
}
.motion [data-paint].is-painted .dsp { -webkit-mask: none; mask: none; }
[data-scrub] { position: relative; }
.scrub-line {
  position: absolute; left: 0; top: -0.04em; bottom: 0.02em; width: 2px; background: var(--cherry);
  pointer-events: none; transform-origin: 50% 100%; will-change: transform;
}
.motion [data-scrub]:not(.is-scrubbed) { clip-path: inset(-12% 100% -24% -4%); }

/* Our controls (upgrade pass): the generic kit (pills, glass, a swelling disc) gives way to our own. Buttons are crisp
   cherry rectangles carrying the play triangle from the logo: "Start a project" is pressing play. The triangle hops on
   the film's beat when you point at it and squashes when you press. */
.btn-cherry::before {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: -1px; background: currentColor;
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat; transform-origin: 50% 100%;
}
.btn-small.btn-cherry::before { width: 9px; height: 9px; }
@media (hover: hover) { .btn-cherry:hover::before { animation: tri-hop 0.5s linear; } }
.btn-cherry:active::before { transform: scale(1.25, 0.6); }
@keyframes tri-hop {
  0%   { transform: none; }
  22%  { transform: translateY(1px) scale(1.18, 0.74); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  52%  { transform: translateY(-5px) scale(0.88, 1.16); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  74%  { transform: translateY(0) scale(1.14, 0.84); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  100% { transform: none; }
}
:focus-visible { outline: 2px solid var(--cherry); outline-offset: 3px; border-radius: 3px; }
.btn-cherry:focus-visible { outline-offset: 4px; }

/* The header: opaque cream with its hairline (fix pass: nothing ghosts through it), no frosted glass. Past the
   opening it steps out of the way while you read down, and comes back the moment you scroll up (main.js). A small periwinkle triangle, the film's play-head, sits under the section
   you are in and hops to the next one as you move. */
.site-header { background: var(--cream); transition: box-shadow 0.3s var(--ease-out), transform 0.45s var(--ease-out); }
.site-header.is-tucked { transform: translateY(-100%); }
.site-header.is-tucked:focus-within { transform: none; }
.nav-head {
  position: absolute; left: 0; bottom: -9px; width: 9px; height: 9px; background: var(--periwinkle); pointer-events: none;
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
  transform: rotate(-90deg); opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.nav-head.is-on { opacity: 1; }
.nav-links a[aria-current="location"] { color: var(--ink); }
@media (min-width: 761px) { .nav-links { position: relative; } }
@media (max-width: 760px) { .nav-head { display: none; } }

/* The film player (upgrade pass): our own triangle is the play button (no cherry disc), its word on a small cherry
   flag like the cursor's; the controls are solid ink, not frosted glass; corners crisp, as the rest of the page. */
.film { border-radius: 4px; box-shadow: 0 34px 70px -40px rgb(11 16 32 / 0.6); }
.film-play { gap: 14px; }
.film-play-icon { width: 84px; height: 84px; border-radius: 0; background: none; box-shadow: none; position: relative; }
.film-play-icon::before {
  content: ""; position: absolute; inset: 0; left: 8px; background: var(--cream);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
  filter: drop-shadow(0 4px 14px rgb(11 16 32 / 0.55)); transition: transform 0.35s var(--ease-out);
  transform-origin: 50% 100%;
}
.film-play.is-replay .film-play-icon::before { display: none; }
.film-play.is-replay .film-play-icon { width: 40px; height: 40px; border-radius: 3px; background: var(--cherry); }
.film:hover .film-play-icon { transform: none; }
@media (hover: hover) { .film:hover .film-play-icon::before { animation: tri-hop 0.5s linear; } }
.film-play-word { padding: 7px 10px 8px; border-radius: 2px; background: var(--cherry); color: var(--cream); text-shadow: none; font-weight: 600; letter-spacing: 0.01em; }
/* fix pass: the triangle and its word wait in the blue water right of the bottle, never on the SEVE label */
.film-play:not(.is-replay) { left: auto; right: 4%; top: 45%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .film-play:not(.is-replay) { right: 3%; gap: 10px; }
  .film-play:not(.is-replay) .film-play-icon { width: 64px; height: 64px; }
  .film-play:not(.is-replay) .film-play-word { font-size: 13px; padding: 6px 8px 7px; }
}
.film-bar { border-radius: 4px; background: rgb(11 16 32 / 0.74); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 5px; }
.film-btn { border-radius: 3px; background: transparent; }
.film-btn:hover { background: rgb(244 240 232 / 0.16); }
.film-btn:focus-visible, .film-full:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
.film-full { border-radius: 3px; background: rgb(11 16 32 / 0.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
.film-progress { height: 2px; }

/* The paintbrush's caption (upgrade pass): the two labels are the ends of a scale, and the line between them fills
   in cherry as the photo is painted. The buttons are quiet text controls under it; each greys out when it has
   nothing to do (nothing painted yet, nothing left to paint). */
.ba-caption { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; margin-top: 16px; font-size: 14px; }
.ba-scale { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 14px; }
.ba-meter { position: relative; height: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); overflow: hidden; }
.ba-meter i { position: absolute; inset: 0; background: var(--cherry); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--ease-out); }
/* The two controls (2026-10-10, his note: the husband did not see them): real buttons, 44 px tall. "Paint it all" is
   the cherry one with our play triangle; "Reset" is outlined. Each greys out when it has nothing to do. */
.ba-btns { display: flex; flex-wrap: wrap; justify-self: start; gap: 10px; }
.ba-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px;
  border-radius: 3px; font: 600 15px/1 "Poppins", sans-serif; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s var(--ease-out);
}
.ba-act:active { transform: scale(0.98); }
.ba-act-all { border: 0; background: var(--cherry); color: var(--cream); padding-left: 15px; }
.ba-act-all::before { content: ""; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat; }
.ba-act-all:hover { background: var(--cherry-deep); }
.ba-act-reset { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.ba-act-reset:hover { background: var(--ink); color: var(--cream); }
.ba-act:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ba-act-all:focus-visible { outline-color: var(--cherry); }
.ba-act:disabled { opacity: 0.38; cursor: default; transform: none; }
.ba-act-all:disabled:hover { background: var(--cherry); }
.ba-act-reset:disabled:hover { background: transparent; color: var(--ink); }
@media (hover: hover) { .ba-act-all:not(:disabled):hover::before { animation: tri-hop 0.5s linear; } }
@media (max-width: 640px) { .ba-btns { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; } }

/* The paint cue on the photo: the real brush's cream stroke on its own canvas, the fingertip that paints it (a soft
   pad, lit from above), and "Paint here" in the same small ink type as the AI tag. Fades away at the first stroke. */
.ba-cue { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.ba-cue.is-on { opacity: 1; }
.ba-cue-paint { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-cue-tip {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 42% 34%, #fffdf8 0 22%, #f1e6d8 58%, #dcc9b4 100%);
  box-shadow: 0 6px 16px rgb(11 16 32 / 0.34), 0 1px 2px rgb(11 16 32 / 0.3), inset 0 -2px 4px rgb(120 80 50 / 0.25);
  will-change: transform, opacity;
}
.ba-cue-word {
  position: absolute; left: 6%; top: 75%; white-space: nowrap;
  padding: 8px 12px 9px; border-radius: 3px; background: rgb(11 16 32 / 0.72); color: var(--cream);
  font: 600 14px/1 "Poppins", sans-serif; letter-spacing: 0.01em;
}
.ba-finger {
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--d, 60px); height: var(--d, 60px);
  margin: calc(var(--d, 60px) / -2) 0 0 calc(var(--d, 60px) / -2); border-radius: 50%; pointer-events: none;
  border: 2px solid rgb(250 246 238 / 0.9); box-shadow: 0 0 0 1px rgb(11 16 32 / 0.25), 0 4px 14px rgb(11 16 32 / 0.25);
  opacity: 0; transition: opacity 0.2s;
}
.ba-finger.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ba-cue, .ba-finger { display: none; } .ba-act { transition: none; } }

/* The form (upgrade pass): editorial fields on the bloom. A warm paper fill and a single ink line under each answer,
   the line turning cherry and thicker where you are typing and the label taking the cherry with it. Errors keep their
   words and their sign, and tint the line. */
.form { gap: 26px 22px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transition: color 0.2s var(--ease-out); }
.field input, .field textarea {
  font-size: 17px; padding: 15px 14px 13px; border: 0; border-radius: 2px 2px 0 0;
  background: rgb(255 253 248 / 0.74); box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--ink) 45%, transparent);
  transition: box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.field input:hover, .field textarea:hover { background: rgb(255 253 248 / 0.9); }
.field input:focus, .field textarea:focus { outline: none; background: #fffdf8; box-shadow: inset 0 -2.5px 0 var(--cherry); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field:focus-within label { color: var(--cherry); }
.field.has-error input, .field.has-error textarea { box-shadow: inset 0 -2.5px 0 var(--cherry); background: color-mix(in srgb, var(--cherry) 6%, #fffdf8); }
.field textarea { min-height: 156px; }

/* The newsletter box (2026-10-10, opt-in, starts unticked): the same paper and ink line as the fields; ticked, it fills
   cherry and carries the logo's play triangle in cream (our sign, never a drawn check mark). The whole line is the
   target (44 px tall), and Space toggles it from the keyboard. */
.field-check { margin-top: -11px; margin-bottom: -11px; }
.field .check { display: inline-flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 0; cursor: pointer;
  font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.field-check:focus-within .check { color: var(--ink); }
.field .check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; border: 0;
  border-radius: 2px; cursor: pointer; background: rgb(255 253 248 / 0.74) center / 10px 10px no-repeat;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent);
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field .check input[type="checkbox"]:hover { background-color: rgb(255 253 248 / 0.95); box-shadow: inset 0 0 0 1.5px var(--cherry); }
.field .check input[type="checkbox"]:checked {
  background-color: var(--cherry); box-shadow: inset 0 0 0 1.5px var(--cherry);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 2.8 17.5 10 4.5 17.2Z' fill='%23F4F0E8' stroke='%23F4F0E8' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field .check input[type="checkbox"]:focus { outline: none; }
.field .check input[type="checkbox"]:focus-visible { outline: 2px solid var(--cherry); outline-offset: 3px; }

/* The thank-you: our triangle lands (crouch, stretch, squash, settle) instead of a drawn check mark. */
.thanks::before {
  content: ""; width: 40px; height: 40px; background: var(--periwinkle); transform-origin: 50% 100%;
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
}
.motion .thanks:not([hidden])::before { animation: tri-land 0.75s linear both; }
@keyframes tri-land {
  0%   { transform: translateY(-46px) scale(0.7, 1.3); opacity: 0; }
  30%  { transform: translateY(0) scale(1.3, 0.62); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  60%  { transform: translateY(-8px) scale(0.92, 1.1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  80%  { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: none; opacity: 1; }
}

/* The viewer: the piece's name in the film's face, the close a quiet text control. */
.viewer-cap .tile-title { font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.01em; }
.viewer-cap .tile-meta { font-size: 14px; color: var(--ink-soft); }
.viewer-close {
  border: 0; border-radius: 0; padding: 0 2px; background: none; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em; text-decoration-color: color-mix(in srgb, var(--cherry) 45%, transparent);
}
.viewer-close:hover { background: none; color: var(--cherry); text-decoration-color: var(--cherry); }
.viewer-frame img { border-radius: 2px; }

/* The footer is the page's last frame, the way our film ends: the mark, centred, and our handle under it, on a calm
   cream the water dissolves into. */
.site-footer { position: relative; border-top: 0; background: var(--cream); padding-block: clamp(44px, 5.4vw, 84px) 24px; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cream)); }
.footer-row { display: grid; justify-items: center; text-align: center; gap: 14px; }
.footer-logo { height: clamp(80px, 7vw, 108px); }
.footer-social { justify-content: center; font-size: 15px; }
.footer-social .soc { display: grid; justify-items: center; gap: 6px; }
.footer-social .soc-name { margin: 0; font-size: 13px; letter-spacing: 0.02em; }
.footer-social .soc-handle { font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 800; font-size: clamp(24px, 2.4vw, 36px); color: var(--cherry); }
.fine { margin: clamp(18px, 2.4vw, 32px) 0 0; max-width: 72ch; text-wrap: balance; }

/* The hero's bottom row is set on the word's own grid (upgrade pass): the line under it starts with the Y, and the
   studio line, the button and the link start exactly under the R's stem, so the copy belongs to the letters instead of
   sitting in a stock two-column row. */
@media (min-width: 1025px) {
  .hero-copy { grid-template-columns: minmax(0, 65.081%) minmax(0, 1fr); column-gap: 0; }
  .hero-side { padding-left: 0; }
  .lede { max-width: 34ch; }
}

/* "Send us yours." is the page's last word and its bookend (upgrade pass): set across the full width, as WORLD is at
   the top (main.js fits it to the measure once the fonts are in), with the note, Instagram and the form under it. */
@media (min-width: 1025px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "press press" "title title" "helper form"; row-gap: 0; }
  .contact-copy { display: contents; }
  .contact-copy .press { grid-area: press; }
  .contact-copy h2 { grid-area: title; margin-bottom: clamp(24px, 2.3vw, 40px); }
  .contact-copy .press { margin-bottom: 10px; }
  /* fix pass: tighter above and under the line, and a shorter message box, so Send is on screen when the line lands
     (1440x900 and 1280x800, at the Contact nav landing) */
  .contact { padding-top: clamp(36px, 2.8vw, 52px); padding-bottom: clamp(56px, 5.6vw, 88px); }
  .contact .field textarea { min-height: 128px; height: 128px; }
  .contact-body { grid-area: form; }
  .contact h2 { white-space: nowrap; font-size: var(--fit, clamp(60px, 8.6vw, 150px)); line-height: 0.92; }
  .contact h2 .t-soft, .contact h2 .t-strong { display: inline-block; }
  .contact h2 .t-strong.dsp { display: inline-block; font-size: 1.16em; padding-left: 0.02em; }
}

/* One corner for everything that holds a picture or a film (upgrade pass): crisp, 3 px. */
.ba { border-radius: 3px; }
.chap-thumb { border-radius: 3px; }
.chap.is-on .chap-thumb { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3.5px var(--cherry); }

/* the bookend on tablets and phones: two lines, larger than before (upgrade pass) */
@media (max-width: 1024px) { .contact h2 { font-size: clamp(54px, 11.5vw, 124px); line-height: 0.96; } }

/* the bloom, re-fitted to the taller close (upgrade pass): it gathers from a fifth of the way down, behind the full-
   width line, and stays strong across the width, since the words now sit on their own row above the form */
@media (min-width: 1025px) {
  .flood {
    --fade-y: linear-gradient(180deg, transparent 0%, #000 20%, #000 86%, transparent 100%);
    -webkit-mask-image: var(--fade-y), linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.8) 40%, #000 62%);
            mask-image: var(--fade-y), linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.8) 40%, #000 62%);
  }
}

/* ---------- The message helper (2026-10-09): "Not sure what to write? Tap a few answers." ----------
   Beside the form on a computer (the space under the note and Instagram), above it on tablets and phones, where its
   title line opens the questions (main.js), so the page only grows for those who want the help. The answers are our
   own controls, not a stock chip kit: crisp 3 px rectangles on the fields' warm paper, each carrying the play triangle
   from our buttons, faint until you point at it. Tapped, the answer turns into one of our cherry buttons and its
   triangle hops, the way "Start a project" presses play. No drawn icons, no ticks. */
.helper { display: grid; gap: 16px; }
.helper-title { font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.helper-tap { font-weight: 800; font-size: 1.16em; color: var(--cherry); letter-spacing: -0.005em; white-space: nowrap; }
.helper-qs { display: grid; gap: 16px; }
.helper-q { display: grid; gap: 8px; }
.contact-copy .helper-label { max-width: none; font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; color: var(--ink); }
.helper-hint { margin-left: 6px; font-weight: 500; color: var(--ink-soft); }
.picks { display: flex; flex-wrap: wrap; gap: 7px; }
.pick {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 16px;
  border: 0; border-radius: 3px; background: rgb(255 253 248 / 0.74); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent);
  font: 500 14px/1.25 "Poppins", sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.22s var(--ease-out), color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.2s var(--ease-out), padding 0.22s var(--ease-out);
}
/* the play triangle means "chosen" (review 2026-10-09: 15 faint marks read as list decoration): it appears only on a
   picked answer, which trades 7 px of its right padding to its left so the chip never changes width */
.pick::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: currentColor; opacity: 0;
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat; transform-origin: 50% 100%;
}
.pick-more { font-weight: 400; font-size: 12px; color: var(--ink-soft); transition: color 0.22s var(--ease-out); }
@media (hover: hover) {
  .pick:hover { background: #fffdf8; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cherry) 60%, transparent); }
}
.pick:active { transform: scale(0.98); }
.pick[aria-pressed="true"] { padding-left: 23px; padding-right: 9px; background: var(--cherry); color: var(--cream); box-shadow: none; }
.pick[aria-pressed="true"]::before { opacity: 1; }
.pick[aria-pressed="true"] .pick-more { color: var(--cream-on-cherry); }
@media (hover: hover) { .pick[aria-pressed="true"]:hover { background: var(--cherry-deep); } }
.pick.is-hop::before { animation: tri-hop 0.5s linear; }
/* where the helper says what it just wrote: shown on tablets and phones (the message box is further down), read out by
   screen readers everywhere */
.contact-copy .helper-status { max-width: none; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
/* an empty status stays in the page (so screen readers hear it when it fills) but takes no room */
.contact-copy .helper-status:empty { position: absolute; }
.helper-status q { quotes: "\201C" "\201D"; color: var(--ink); }
.helper-status.is-new { animation: rise 0.45s var(--ease-out) both; }
/* the message box while the helper writes into it: its line takes the cherry, as when you type */
.field.is-writing textarea { box-shadow: inset 0 -2.5px 0 var(--cherry); background: #fffdf8; }
.field.is-writing label { color: var(--cherry); }
/* tablets and phones: the title line is the button that opens the questions; the triangle turns down when open */
.helper-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 54px;
  padding: 10px 16px; border: 0; border-radius: 3px; background: rgb(255 253 248 / 0.74); color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
.helper-toggle::after {
  content: ""; flex: none; width: 11px; height: 11px; background: var(--cherry);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
  transition: transform 0.35s var(--ease-out);
}
.helper-toggle-words { min-width: 0; }
.helper-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
.helper-toggle[aria-expanded="true"] { background: #fffdf8; }
.helper-toggle:active { background: #fffdf8; }
.helper-qs.is-opening { animation: rise 0.45s var(--ease-out) both; }
@media (min-width: 1025px) {
  /* the two columns share the width evenly, a little closer, so the answers sit in fewer rows beside the form and
     the close grows as little as it can */
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  .contact-copy .helper { grid-area: helper; margin-top: 0; }
  .contact-copy .helper-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* review 2026-10-09: the 50/50 columns put "Your name" right under the tail of the "y" in "yours.": more room under
     the line. Paid back by a little less top padding and a shorter resting message box (it grows with the helper's
     words, main.js), so at 1440x900 the Contact nav landing still shows Send and the Instagram line under it.
     Instagram: a tighter row (a mouse needs no 44 px target), its glyph about 12 px under Send. */
  .contact-copy h2 { margin-bottom: clamp(52px, 3.9vw, 68px); }
  .contact { padding-top: clamp(28px, 2vw, 44px); }
  .form .form-foot { gap: 6px; }
  .form-foot .form-social .soc { min-height: 30px; }
  .contact .field textarea { min-height: 100px; height: 100px; }
  /* without JavaScript the helper stays hidden: the form starts at the left column instead of leaving it empty */
  .contact-grid:has(.helper[hidden]) .contact-body { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .contact-copy .helper { margin-top: 4px; max-width: 640px; gap: 14px; }
  .pick { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 640px) { .helper-title { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) {
  .pick, .pick::before, .pick-more, .helper-toggle, .helper-toggle::after { transition: none; }
  .pick.is-hop::before, .helper-status.is-new, .helper-qs.is-opening { animation: none; }
}

/* ---------- Instagram as its own outline glyph, see-through (his note 2026-10-09, his exception to rule 1) ----------
   In the footer the glyph stands where the word "Instagram" was, centred over the handle, in our ink at half
   strength so the water shows through. At the form it sits small beside the handle, quieter than Send. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.soc-glyph { display: block; flex: none; color: var(--ink); opacity: 0.5; transition: opacity 0.25s var(--ease-out); }
.soc:hover .soc-glyph, .soc:focus-visible .soc-glyph { opacity: 0.8; }
.footer-social .soc-glyph { width: clamp(26px, 2.5vw, 36px); height: auto; aspect-ratio: 1; }
/* his note: the small glyph sits UNDER Send (not beside it), on the fields' left line on a computer, centred under
   the full-width button on a phone */
.form-foot { flex-direction: column; align-items: flex-start; gap: 0; }
.form-social { margin: 0; font-size: 14px; }
.form-social .soc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-soft); }
.form-social .soc-glyph { width: 18px; height: 18px; }
.form-social .soc-handle { font-weight: 600; }
.form-social .soc:hover { color: var(--ink); }
@media (max-width: 640px) {
  .form-foot { align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .soc-glyph { transition: none; } }

/* ---------- Launch step 2 (2026-10-10): TikTok beside Instagram, and the privacy links ----------
   Instagram and TikTok share one handle, so their two see-through glyphs sit side by side and the handle shows once:
   over it in the footer (centred, as before), beside it at the form. Each glyph is its own link; the handle repeats
   the Instagram link for the mouse. Glyph size, strength and hover are the Instagram rules above, unchanged. */
.soc-set { display: inline-flex; align-items: center; gap: 8px; }
.soc-glyphs { display: inline-flex; align-items: center; }
.soc-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.footer-social .soc-set { display: grid; justify-items: center; gap: 6px; }
.footer-social .soc-glyphs { gap: clamp(10px, 1.1vw, 16px); }
.footer-social .soc-icon { place-items: center; }
.form-social .soc-set { gap: 8px; }
.form-social .soc-glyphs { gap: 4px; margin-left: -3px; }
.form-social .soc-icon { padding-inline: 3px; }
.form-social .soc-at { min-height: 0; }
.form-privacy { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.form-privacy a, .fine-link { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color 0.25s var(--ease-out); }
.form-privacy a:hover, .fine-link:hover { text-decoration-color: currentColor; }
.fine-link { margin-left: 0.5em; white-space: nowrap; }
@media (max-width: 640px) {
  .form-social .soc-icon { min-width: 44px; min-height: 44px; padding-inline: 0; }
  .form-social .soc-glyphs { gap: 0; margin-left: 0; }
  .footer-social .soc-icon { min-width: 44px; min-height: 44px; }
  .footer-social .soc-glyphs { gap: 0; }
  .form-privacy { text-align: center; }
}

/* ---------- Launch step 3 (2026-10-10) ----------
   AI labels (EU AI Act Art. 50: the label is there at first sight). Every work picture and film wears the same small
   tag in its top-left corner, the corner no title, face or product uses on any of them: our type, cream on the same
   solid ink as the film's controls, never a drawn icon. The hero's five letter pictures share one tag at the word's
   top-left. The tag never takes a click (painting, opening a picture and the film work exactly as before). */
.ai-tag {
  position: absolute; left: 10px; top: 10px; z-index: 3; pointer-events: none; user-select: none;
  padding: 6px 7px 5px; border-radius: 3px; background: rgb(11 16 32 / 0.66); color: var(--cream);
  font: 700 12px/1 "Poppins", sans-serif; letter-spacing: 0.08em;
}
.film .ai-tag { left: 12px; top: 12px; }                 /* level with the film's own Full screen control */
.frame-in .ai-tag { z-index: 3; }                         /* over the title's shade and the cream title copy */
/* the hero: just above the Y, on the page's ground. It sits in the column but takes no room (its height and the
   column's gap are paid back), so the word and the lines under it stay exactly where they were. It stays put while
   the O flies in, so it then sits on that picture. */
.hero-inner { --hero-gap: clamp(28px, 6vh, 64px); }
.ai-tag-hero {
  position: relative; left: auto; top: auto; align-self: flex-start; height: 23px; padding-block: 0;
  display: inline-flex; align-items: center; flex-shrink: 0; margin-bottom: calc(-23px - var(--hero-gap));
  transform: translateY(calc(-100% - clamp(8px, 1.2vh, 14px)));
}
/* phones: the word stacks (WOR / LD) and on short phones its top slides under the header, so the tag sits in the
   empty space left of the L instead, level with the top of the second line (53.3% down the stacked word) */
@media (max-width: 640px) {
  .hero-inner { --hero-gap: 28px; }
  .ai-tag-hero { transform: translateY(calc((100vw - 2 * var(--gutter)) / var(--word-ar-stacked) * 0.5335 + 6px)); }
}
.motion .ai-tag-hero { transition: opacity 0.6s var(--ease-out) 0.9s; }
.intro .ai-tag-hero { opacity: 0; transition: none; }
/* the full-screen viewer: the picture lands in a frame its own size, wearing the same tag */
.viewer-pic { position: relative; min-width: 0; max-width: 100%; }
.viewer-pic img { border-radius: 2px; }

/* His note (2026-10-10): the Instagram and TikTok glyphs take the colour of the handle beside them, at every width.
   Footer: cherry, like the handle under them. At the form: the handle's quiet ink, and the ink of its hover. */
.soc-glyph { color: currentColor; opacity: 1; }
.soc:hover .soc-glyph, .soc:focus-visible .soc-glyph { opacity: 1; }
.footer-social .soc-icon { color: var(--cherry); transition: color 0.25s var(--ease-out); }
.footer-social .soc-icon:hover, .footer-social .soc-icon:focus-visible { color: var(--cherry-deep); }
.form-social .soc-icon { color: var(--ink-soft); transition: color 0.25s var(--ease-out); }
.form-social .soc-icon:hover, .form-social .soc-icon:focus-visible { color: var(--ink); }

/* the form notice under Send is now a full sentence or five: one quiet paragraph, the width of the fields' column */
.form-privacy { max-width: 60ch; line-height: 1.5; }
.form-privacy a { overflow-wrap: anywhere; }
@media (max-width: 640px) { .form-privacy { text-align: left; } }

/* ---------- Batch 2 (2026-10-10): the six services, DB Media Studio, the FAQ, the footer links ----------
   Same language as the page: Poppins says it plainly, the key word is the film's Fraunces italic in cherry, parts sit
   on hairlines, the play triangle from the logo is the only mark. No pictures were added (rule 0). */

/* the six services under What we do: name and promise, each a link to its own page */
.svc-wrap { max-width: 1360px; margin-top: clamp(48px, 5vw, 80px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--hairline); }
.svc-grid li { border-bottom: 1px solid var(--hairline); }
.svc-link {
  position: relative; display: grid; align-content: start; gap: 8px; height: 100%; min-height: 44px;
  padding: clamp(20px, 2vw, 28px) 34px clamp(22px, 2.2vw, 30px) 0; text-decoration: none; color: var(--ink);
}
.svc-name { font-weight: 700; font-size: clamp(21px, 1.75vw, 27px); line-height: 1.15; letter-spacing: -0.02em; }
.svc-name .dsp { font-weight: 800; font-size: 1.1em; color: var(--cherry); }
.svc-line { color: var(--ink-soft); font-size: 15px; line-height: 1.5; max-width: 36ch; }
.svc-link .soon-tag {
  justify-self: start; margin-top: 4px; padding: 6px 9px 5px; border-radius: 3px; background: var(--ink); color: var(--cream);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
}
.svc-link::after {
  content: ""; position: absolute; right: 4px; top: clamp(27px, 2.5vw, 36px); width: 12px; height: 12px; background: var(--cherry);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
  transition: transform 0.35s var(--ease-out);
}
.svc-name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; transition: text-decoration-color 0.25s var(--ease-out); }
@media (hover: hover) {
  .svc-link:hover .svc-name { text-decoration-color: color-mix(in srgb, var(--cherry) 60%, transparent); }
  .svc-link:hover::after { transform: translateX(5px); }
}
.svc-link:focus-visible { outline-offset: 2px; }

/* DB Media Studio: the name and the line, how the work is made beside it, then the client's four steps */
.studio { padding-block: clamp(72px, 8vw, 128px) clamp(40px, 5vw, 72px); }
.studio-grid {
  max-width: 1360px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 4vw, 64px) clamp(40px, 6vw, 112px); align-items: end;
}
.studio-head h2, .faq h2 { position: relative; font-weight: 800; font-size: clamp(42px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.04em; }
.studio-head h2 .dsp, .faq h2 .dsp { font-weight: 760; font-size: 1.08em; color: var(--cherry); }
.studio-line { margin-top: clamp(18px, 2vw, 28px); max-width: 34ch; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.studio h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); }
.studio-make { padding-top: 18px; border-top: 1px solid var(--hairline); }
.studio-make p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 60ch; }
.studio-steps { grid-column: 1 / -1; }
.steps { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 2.4vw, 40px); }
.steps li { position: relative; padding-top: 18px; border-top: 1px solid var(--hairline); }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--cherry); transform-origin: left; }
.motion .steps:not(.is-drawn) li::after { transform: scaleX(0); }
.motion .steps li::after { transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.motion .steps li:nth-child(2)::after { transition-delay: 0.25s; }
.motion .steps li:nth-child(3)::after { transition-delay: 0.5s; }
.motion .steps li:nth-child(4)::after { transition-delay: 0.75s; }
.step-n {
  display: block; margin-bottom: 8px; font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 800;
  font-size: clamp(38px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.02em; color: var(--cherry); font-synthesis: none;
}
.steps p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.steps strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1.3; }

/* the FAQ: two columns of questions, each opening on its own; the mark is our triangle turning down */
.faq { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 6vw, 104px); }
.faq-wrap { max-width: 1360px; }
.faq-cols { margin-top: clamp(28px, 3.4vw, 52px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 72px); align-items: start; }
.faq-col { border-top: 1px solid var(--hairline); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0;
  cursor: pointer; list-style: none; border-radius: 3px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa-q { font-weight: 600; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); transition: color 0.25s var(--ease-out); }
.qa-mark {
  flex: none; width: 13px; height: 13px; background: var(--cherry);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
  transition: transform 0.35s var(--ease-out);
}
.qa[open] .qa-mark { transform: rotate(90deg); }
.qa[open] .qa-q { color: var(--cherry); }
@media (hover: hover) { .qa summary:hover .qa-q { color: var(--cherry); } }
.qa-a { padding: 0 32px 22px 0; }
.qa-a p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 60ch; }
.qa-a a { color: var(--ink); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--cherry) 45%, transparent); }
/* the answer slides open where the browser can animate to auto height; elsewhere it simply opens */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .qa::details-content { height: 0; overflow: clip; transition: height 0.4s var(--ease-out), content-visibility 0.4s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}

/* the footer: the six services and the FAQ, one quiet line under the handle */
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: 6px 0 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-block; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.footer-nav a:hover { text-decoration-color: var(--cherry); }
.footer-nav a[aria-current="page"] { color: var(--cherry); text-decoration-color: currentColor; }
/* the About line (working policy v0.1, section D: "wherever they are" moved here from the studio line), batch 3 */
.footer-about { margin: 4px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: balance; }

@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-grid { grid-template-columns: 1fr; align-items: start; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; }
  .faq-cols { grid-template-columns: 1fr; }
  .faq-col + .faq-col { border-top: 0; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .footer-nav ul { gap: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-mark, .svc-link::after, .svc-name { transition: none; }
  .qa::details-content { transition: none; }
}
/* tablets and phones: the client's steps come before the note on how the work is made */
@media (max-width: 1024px) { .studio-steps { order: 2; } .studio-make { order: 3; } }

/* ---------- Sending (2026-10-11, his note: the wait before "Thank you" felt long and blank) ----------
   An honest waiting state in our own language, main.js "Sending". The word changes; the button's triangle turns the
   logo's periwinkle and keeps pressing play on the beat (three beats a press); a play-head with a short tail travels
   the quiet line along the button's foot, over and over, so it never pretends to know how far along it is. When the
   email has really gone the line fills periwinkle and the word says "Sent"; then the form steps aside and the
   thank-you lands. Without motion: the words change and the line simply shows. */
.btn-send { position: relative; overflow: hidden; }
.btn-send[aria-disabled="true"] { cursor: progress; }
.btn-send[aria-disabled="true"]:hover { background: var(--cherry); }
.btn-send[aria-disabled="true"]:active { transform: none; }
.send-word { display: inline-block; }
.send-word.is-new { animation: send-word 0.26s var(--ease-out) both; }
@keyframes send-word { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.btn-send.is-sending::before, .btn-send.is-sent::before { background: var(--periwinkle); }
.btn-send.is-sending::before { animation: tri-hop 0.75s linear infinite; }
.send-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: rgb(244 240 232 / 0.2); opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
  transition: opacity 0.2s var(--ease-out), transform 0.4s var(--ease-out);
}
.send-line::after { content: ""; position: absolute; inset: 0; background: var(--periwinkle); transform: scaleX(0); transform-origin: 0 50%; }
.btn-send.is-sending .send-line, .btn-send.is-sent .send-line { opacity: 1; transform: none; }
.btn-send.is-sent .send-line::after { transform: none; transition: transform 0.16s var(--ease-out); }   /* batch 3: quicker hand-off (was 0.28s) */
.send-head { position: absolute; left: 0; bottom: 0; width: 10px; height: 12px; margin-left: -10px; opacity: 0; }
.send-head::before {
  content: ""; position: absolute; right: 0; bottom: 3px; width: 9px; height: 9px; background: var(--periwinkle);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
}
.send-head::after { content: ""; position: absolute; right: 4px; bottom: 0; width: 34px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--periwinkle)); }
.btn-send.is-sending .send-head { opacity: 1; animation: send-travel 1.5s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes send-travel {
  0%   { left: 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% + 10px); opacity: 0; }
}
.send-status { margin: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.send-status.is-slow { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  margin-top: 12px; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--ink-soft); animation: rise 0.5s var(--ease-out) both; }
.form { transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out); }   /* batch 3: was 0.26s */
.form.is-leaving { opacity: 0; transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) {
  .send-word.is-new, .btn-send.is-sending::before, .send-status.is-slow { animation: none; }
  .send-head { display: none; }
  .send-line, .btn-send.is-sent .send-line::after, .form { transition: none; }
}
/* The form on a computer: a six-column grid, every short field half the row. Batch 4 (Bella, 2026-10-11): Instagram
   and website share one optional box beside the phone, so the row of three optional boxes (and its "field-third"
   rules) is gone. Narrower screens keep two columns (tablets) or one (phones). */
@media (min-width: 1025px) {
  .form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .form > .field { grid-column: span 3; }
  .form > .field-wide, .form > .form-foot, .form > .error[data-form-error] { grid-column: 1 / -1; }
}