/* By The Owl — fresh site (BTO-0008). One stylesheet, no framework, no vendor CSS.
   The specification is fresh-site/docs/DESIGN_SPEC.md. Order: fonts · tokens · base · layout · type ·
   actions · header and menu · section heads · films · lists · panels · forms · footer · page openings ·
   page compositions · the brand layer (colour fields, stickers, ticker, the home panels) · motion.

   THE LANGUAGE IS THE LIVE SITE'S OWN (bytheowl.com, read 2026-10-14; founder, same day: "give me a
   final product with color, textures, and everything"). That instruction replaces the all-white,
   monochrome ruling of 2026-10-10 for this build.
     - COLOUR IS NOT WRITTEN HERE. fresh-site/DESIGN.md holds every colour, type, spacing and radius token;
       build.mjs writes the :root below from it (slate navy pass, 2026-10-24). Edit DESIGN.md, run the build.
     - two faces: Inter Tight for everything, Instrument Serif italic for the one phrase in focus.
     - texture: one grain over every page, drawn here as an SVG filter. No texture file is shipped.
   House rules that stay: everything starts on the container's left edge · a film in a row, a wall
   or a rail is shown at the shape of its picture · no tile under 132px. */

/* ---------- fonts: Superside's two faces, self-hosted ----------
   Inter Tight (variable, 100-900) for everything; Instrument Serif italic for the one phrase in focus.
   Both SIL OFL 1.1, from Google Fonts, downloaded on Ash's approval of 2026-10-14; the licences ship in
   assets/fonts/. Latin and Latin Extended only. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterTight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterTight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* the upright cut, for the comparison's column heads only (Superside sets them upright). Not preloaded:
   nothing on a first screen uses it. Same source, same licence, downloaded 2026-10-14. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-Regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ----------
   Written by build.mjs from the ```tokens block of fresh-site/DESIGN.md. Do not add a colour here: add it there. */
:root {
  --pine: #121D2A;
  --pine-2: #243142;
  --pine-deep: #0F1721;
  --pine-3: #1F2F41;
  --leaf: #38495D;
  --leaf-3: #6B7E96;
  --leaf-1: #B8C4D3;
  --spark: #D8FF85;
  --spark-2: #C4E878;
  --mint: var(--spark);
  --teal: #304A69;
  --sand: #D4E5FA;
  --sand-2: #BED8F7;
  --cloud: #F4F7FB;
  --cloud-2: #E7F2FE;
  --cloud-3: #E3EAF3;
  --surface: #FCFDFF;
  --ground: var(--cloud);
  --cream: var(--cloud);
  --navy: var(--pine);
  --night: var(--pine-deep);
  --amber: var(--spark);
  --amber-deep: var(--leaf);
  --ink: #121D2A;
  --text: #25313F;
  --muted: #525D6A;
  --context: #6B7E96;
  --accent-text: var(--leaf);
  --on-ink: #F4F7FB;
  --on-ink-muted: rgba(244, 247, 251, 0.74);
  --on-ink-context: rgba(244, 247, 251, 0.5);
  --on-ink-line: rgba(244, 247, 251, 0.16);
  --line: rgba(18, 29, 42, 0.14);
  --btn-hover: #263648;
  --shadow-menu: 0 16px 40px rgba(18, 29, 42, 0.14);
  --body-on-navy: #B8C4D3;
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--font);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display-xl: clamp(2.75rem, 1.6rem + 4.1vw, 5rem);
  --fs-display-l: clamp(2.5rem, 1.45rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2.125rem, 1.2rem + 3vw, 3.75rem);
  --fs-h3: clamp(1.625rem, 1.1rem + 1.7vw, 3rem);
  --fs-h4: 1.25rem;
  --fs-statement: 1.375rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --lh-body: 1.6;
  --fs-name: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;
  --margin: 20px;
  --gutter: 16px;
  --sec: 72px;
  --head-gap: 28px;
  --content-gap: 32px;
  --row-gap: 40px;
  --open-top: 32px;
  --hdr: 64px;
  --max: 1224px;
  --sx-b: 80px;
  --sx-m: 64px;
  --sx-c: 48px;
  --sx-s: 44px;
  --r: 10px;
  --r-sm: 8px;
  --r-tag: 12px;
  --r-pill: 999px;
  --rp-radius: 16px;
  --bto-radius-m: 12px;
  --bto-radius-l: 20px;
}
@media (min-width: 48rem) { :root { --margin: 32px; --sec: 96px; --open-top: 48px; } }
@media (min-width: 64rem) { :root { --margin: 40px; --sec: 120px; --head-gap: 40px; --content-gap: 56px; --open-top: 56px;
  --fs-h4: 1.375rem; --fs-statement: 1.75rem; --fs-lead: 1.25rem; --fs-body: 1.125rem; --lh-body: 1.556; } }
@media (min-width: 80rem) { :root { --margin: 64px; --gutter: 24px; --sec: 144px; --open-top: 64px; --row-gap: 48px; } }

/* colour fields: a section re-points the same tokens, so every part inside it follows */
.theme-navy, .theme-ink {
  --ink: var(--cloud); --text: rgba(244, 247, 251, 0.86); --muted: rgba(244, 247, 251, 0.7); --context: rgba(244, 247, 251, 0.5);
  --line: rgba(244, 247, 251, 0.16); --surface: rgba(244, 247, 251, 0.06); --accent-text: var(--spark); --on-ink: var(--pine); --btn-hover: #FFFFFF;
  color: var(--text);
}
.theme-navy { background: var(--navy); }
.theme-ink { background: var(--night); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 24px); }
body { margin: 0; padding-top: var(--hdr); background: var(--ground); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
/* grain: one fine noise over the whole page, films included, so the site has the tooth of print.
   Drawn by an SVG filter in a data URL: no file, no request. It takes no clicks. */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (forced-colors: active), print { body::after { display: none; } }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--spark); color: var(--pine); }
.skip { position: fixed; left: var(--margin); top: -80px; z-index: 100; padding: 12px 16px; background: var(--amber); color: var(--pine); border-radius: 999px; font-size: var(--fs-small); font-weight: 700; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
/* the dash in Home's headline: closed up in the text, as the founder locked it, with a hair of air on both sides */
.dash { margin-inline: 0.06em; }

/* ---------- layout ---------- */
.wrap { width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; }
.band { margin-top: var(--sec); }
/* a field: a section that changes the ground from edge to edge (navy, ink or amber) */
.band--field { padding-block: var(--sec); }
.band--field + .band--field, .ticker + .band--field, .hero + .ticker { margin-top: 0; }
.band--flush { margin-top: 0; }
.theme-amber { --ink: var(--pine); --text: var(--text); --muted: var(--muted); --line: rgba(18, 29, 42, 0.18); --accent-text: var(--leaf); background: var(--cloud-3); color: var(--text); }
.sub { margin-top: var(--content-gap); }
main { display: block; padding-bottom: var(--sec); }
.page--home main { margin-top: calc(-1 * var(--hdr)); }  /* the home film runs up under the header */
main:has(> .band--field:last-child) { padding-bottom: 0; }  /* a field that ends the page meets the footer */

/* ---------- type ---------- */
/* Superside's two voices: a tight sans for every heading, and a serif italic for the one phrase in
   focus ("Your creative team's *creative team*"). Normal case throughout. */
.display, .h1, .h2, .h3 { color: var(--ink); text-wrap: balance; }
.display, .h1 { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -0.035em; }
.display { font-size: var(--fs-display-xl); line-height: 1.1; }
.h1 { font-size: var(--fs-display-l); line-height: 1.11; }
.h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.03em; font-weight: 400; }
.h3 { font-size: var(--fs-h3); line-height: 1.17; letter-spacing: -0.03em; font-weight: 400; }
.h4 { font-size: var(--fs-h4); line-height: 1.26; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); text-wrap: balance; }
/* the phrase in focus: serif italic, same colour, no box. Used once per heading, on the payoff. */
.focus em, .hl, .serif, .display em, .h1 em, .h2 em, .h3 em, .poster em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; font-size: calc(1em + 4px); line-height: 1; }
.hl { display: inline; padding: 0; background: none; color: inherit; border: 0; border-radius: 0; transform: none; white-space: normal; }
.display .hl, .h1 .hl { padding: 0; border: 0; }
.statement { font-size: var(--fs-statement); line-height: 1.3; letter-spacing: -0.02em; font-weight: 450; color: var(--ink); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.005em; color: var(--text); text-wrap: pretty; }
/* Superside's label: tiny, spaced capitals over a heading */
.eyebrow { font-size: 0.875rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-text); }
@media (min-width: 64rem) { .eyebrow { font-size: 1rem; } }
.small { font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.prose > * + * { margin-top: 1em; }
.prose p { text-wrap: pretty; max-width: 60ch; }

/* ---------- actions ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px;
  font-size: 0.9375rem; line-height: 1.33; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.btn { font-weight: 600; letter-spacing: -0.01em; }
/* amber is the one primary action; ink is the quieter second */
.btn--amber { background: var(--pine); color: var(--cloud); }
.theme-navy .btn--amber, .theme-ink .btn--amber, .hero .btn--amber, .hdr .btn--amber, .enquiry .btn--amber, .drawer .btn--amber { background: var(--spark); color: var(--pine); }
.btn--amber:hover { background: var(--btn-hover); }
.theme-navy .btn--amber:hover, .theme-ink .btn--amber:hover, .hero .btn--amber:hover, .hdr .btn--amber:hover, .enquiry .btn--amber:hover { background: var(--spark-2); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--btn-hover); }
.btn--line { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.btn--line:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn .ic, .link .ic { transition: transform 150ms var(--ease); }
.btn:hover .ic, .link:hover .ic { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.link { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; white-space: nowrap; }
.inline-link, .prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inline-link:hover, .prose a:hover { text-decoration-thickness: 2px; }
.round { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); transition: background-color 150ms var(--ease), opacity 150ms; }
.round:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.round:disabled { opacity: 0.4; cursor: default; }
.chip { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--context); font-size: var(--fs-small); font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.chip:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chip[aria-pressed="true"] { background: var(--spark); box-shadow: none; color: var(--pine); }
@media (max-width: 47.99rem) { .actions--stack { display: grid; justify-items: start; } .actions--stack .btn { width: 100%; } }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--pine); color: var(--cloud); border-bottom: 1px solid rgba(244, 247, 251, 0.08);
  --ink: var(--cloud); --muted: rgba(244, 247, 251, 0.62); }
.hdr__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; height: var(--hdr); }
/* THE LOCKUP (Ash, 2026-10-28: lockup A, components.mjs lockup): one outlined drawing, 315 x 44, ink currentColor. 32px tall in the 64px
   header (229px wide; the header gives it four columns from 1024), 28px in the footer. It fits beside the burger at 375, so nothing hides. */
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.hdr .brand { grid-column: 1 / span 4; justify-self: start; }
.brand__logo { display: block; height: 32px; width: auto; aspect-ratio: 315 / 44; }
.nav { grid-column: 5 / span 5; }
.nav > ul { display: flex; align-items: center; gap: 32px; }
.nav > ul > li { display: flex; align-items: center; gap: 4px; }
.nav > ul > li > a { font-size: 0.875rem; line-height: 1.33; font-weight: 500; color: var(--ink); padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color 150ms var(--ease); }
.nav > ul > li > a:hover, .nav > ul > li > a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__more { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: -12px; border-radius: 50%; color: var(--ink); }
.nav__more:hover { background: rgba(244, 247, 251, 0.12); }
.nav__more .ic { width: 12px; height: 12px; transition: transform 180ms var(--ease); }
.nav__more[aria-expanded="true"] .ic { transform: rotate(180deg); }
html:not(.js) .nav__more { display: none; }
.hdr__cta { grid-column: 10 / -1; justify-self: end; height: 40px; padding: 0 20px; font-size: 0.875rem; }
.hdr__burger { display: none; grid-column: 10 / -1; justify-self: end; position: relative; width: 44px; height: 44px; margin-right: -11px; border-radius: 50%; }
.hdr__burger span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform 240ms var(--ease), top 240ms var(--ease); }
.hdr__burger span:nth-child(1) { top: 18px; }
.hdr__burger span:nth-child(2) { top: 25px; }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* THE SERVICES MENU, as Superside's (measured on superside.com 2026-10-14): a full-width light panel straight
   under the header, the page behind it dimmed; three columns, each under a label in the serif on its own
   colour (lime, pine, a deep teal); a row per service, name 16/24 at 500 and its line 14/20 on the left, a
   24px line icon on the right, hairlines between rows. It opens when the pointer rests on Services and
   closes when it leaves (site.js 1); a click, the keyboard and Esc work as before. */
.mega { position: fixed; inset: var(--hdr) 0 0 0; z-index: 49; display: flex; flex-direction: column; --ink: var(--pine); --muted: var(--muted); color: var(--text); }
.mega__panel { flex: none; background: var(--cloud); border-bottom: 1px solid var(--line); padding-block: 40px 48px; box-shadow: 0 24px 48px rgba(18, 29, 42, 0.12); animation: mega-in 220ms var(--ease); }
.mega__shade { flex: 1; background: rgba(18, 29, 42, 0.36); animation: mega-fade 220ms linear; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mega-fade { from { opacity: 0; } to { opacity: 1; } }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }   /* the page's gutter: three equal columns on the header's grid (2026-10-28) */
.mega__pill { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 8px; margin-bottom: 20px; font-family: var(--serif); font-style: normal; font-size: 1.375rem; line-height: 1; letter-spacing: -0.005em; }
.mega__pill--brands { background: var(--spark); color: var(--pine); }
.mega__pill--stories { background: var(--pine); color: var(--mint); }
.mega__pill--post { background: var(--teal); color: var(--cloud); }
.mega__list > li + li { border-top: 1px solid var(--line); }
.mega__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 12px 0; color: var(--ink); transition: color 150ms var(--ease); }   /* the icon on the title's row, every item (2026-10-28) */
.mega__text { display: grid; gap: 2px; min-width: 0; }
.mega__name { font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.mega__desc { min-height: calc(2 * 1.43em); font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }   /* every line holds two lines' room, so every row is one height whether its line wraps or not (2026-10-28) */
.mega__ic { flex: none; width: 24px; height: 24px; color: var(--leaf-3); transition: color 150ms var(--ease), transform 150ms var(--ease); }
.mega__item:hover .mega__name, .mega__item:focus-visible .mega__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* the page you are on: the nav's own dot after its name, not an underline at rest (2026-10-28: the underline read as a stray text link) */
.mega__item[aria-current="page"] .mega__name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.mega__item:hover .mega__ic, .mega__item:focus-visible .mega__ic { color: var(--ink); transform: translateX(2px); }
.mega__help { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 32px; padding: 16px 24px; border-radius: var(--r); background: var(--cloud-2); }   /* its own row at the panel's foot, a quiet card across the three columns (2026-10-28) */
.mega__links { display: flex; gap: 32px; }
.mega__help > p:first-child { font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.mega__help .link { font-size: 0.9375rem; }
/* the open state on the bar: a dot before Services, as Superside marks it */
.hdr.is-menu-open [data-menu-item] > a::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .mega__panel, .mega__shade { animation: none; } }

/* phone and tablet: one full-screen sheet */
.drawer { position: fixed; inset: var(--hdr) 0 0 0; z-index: 48; background: var(--ground); overflow-y: auto; overscroll-behavior: contain; --ink: var(--pine); --muted: var(--muted); }
.drawer:focus { outline: none; }
.drawer__in { display: flex; flex-direction: column; min-height: 100%; padding-block: 24px 28px; }
.drawer a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.drawer__main { display: grid; gap: 16px; }
.drawer__main > li > a, .drawer__services > summary { display: flex; align-items: center; justify-content: space-between; font-size: 2rem; line-height: 1.15; letter-spacing: -0.04em; font-weight: 450; color: var(--ink); cursor: pointer; list-style: none; }
.drawer__services > summary::-webkit-details-marker { display: none; }
.drawer__services > summary .ic { width: 20px; height: 20px; }
.drawer__services[open] > summary .ic { transform: rotate(180deg); }
.drawer__group { margin-top: 20px; }
.drawer__group .eyebrow { margin-bottom: 4px; }
.drawer__group a { display: grid; gap: 2px; padding-block: 12px; border-top: 1px solid var(--line); }
.drawer__group a > span:first-child { color: var(--ink); font-weight: 500; font-size: 1.0625rem; line-height: 1.41; }
/* a service row is marked as the menu above marks it: the dot after its name, no underline across its two lines (2026-10-28) */
.drawer .drawer__group a[aria-current="page"] { text-decoration: none; }
.drawer__group a[aria-current="page"] > span:first-child::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.drawer__desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.43; }
.drawer__all { margin-top: 16px; }
.drawer__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 16px; }
.drawer__foot .btn { width: 100%; }
.drawer__direct { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--fs-small); line-height: 1.43; }
.drawer__direct a { text-decoration: underline; text-underline-offset: 4px; }
html.is-drawer-open { overflow: hidden; }
@media (max-width: 63.99rem) { .nav, .hdr__cta, .mega { display: none !important; } .hdr__burger { display: block; } .hdr .brand { grid-column: 1 / span 8; } }
@media (min-width: 64rem) { .drawer { display: none !important; } }

/* ---------- section head: the cut line, a label row, the heading ---------- */
.head { margin-bottom: var(--content-gap); }
.head__eyebrow { margin-bottom: 18px; }
.head--center { text-align: center; }
.head--center .head__main { display: block; }
.head--center .head__main > .h2, .head--center .head__main > .h3 { margin-inline: auto; max-width: 22ch; }
.head--center .head__main > .lead { margin: 20px auto 0; max-width: 46ch; }
.head__label { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 44px; margin-bottom: 8px; }
.head__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.head__main + .head__label, .head--row { display: flex; }
.head--row { align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.head--row .head__main { flex: 1 1 60%; }
.head--row .head__label { margin: 0; flex: none; }
.head__main > .h2, .head__main > .h3 { grid-column: 1 / span 8; }
.head__main > .lead { grid-column: 9 / -1; }
/* aside: the heading in columns 1-5, its list in 7-12. statement: 1-7 and 8-12. */
.aside__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--content-gap); align-items: start; }
.aside__head { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; align-content: start; }
.aside__head > .eyebrow { margin-bottom: -6px; }
.aside__body { grid-column: 7 / -1; }
.aside--say .aside__head { grid-column: 1 / span 7; }
.aside--say .aside__body { grid-column: 8 / -1; }
.aside--say .aside__body > * + * { margin-top: 1em; }
@media (max-width: 63.99rem) {
  .head__main > .h2, .head__main > .h3, .head__main > .lead, .aside__head, .aside__body, .aside--say .aside__head, .aside--say .aside__body { grid-column: 1 / -1; }
}

/* ---------- films: always the shape the film was shot ---------- */
.film { display: block; min-width: 0; --ar: 1.7778; }
.film--wide { --ar: 1.7778; } .film--square { --ar: 1; } .film--portrait { --ar: 0.8; } .film--tall { --ar: 0.5625; } .film--scope { --ar: 2.388; }
.film__frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--line); aspect-ratio: var(--ar); }
.film__name { letter-spacing: -0.01em; }
/* --ox / --oy: where the picture sits in a file that carries black bars (components.mjs `picture`) */
.film__frame img, .film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); }
.film__frame video { opacity: 0; transition: opacity 200ms linear; }
.film.is-playing .film__frame video { opacity: 1; }
.film__cap { display: grid; margin-top: 12px; }
/* a caption is never cut short: it wraps */
.film__name { font-size: var(--fs-name); line-height: 1.47; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.film__kind { font-size: var(--fs-micro); line-height: 1.38; color: var(--muted); overflow-wrap: anywhere; }

/* a row: films of different shapes side by side at ONE height, filling the measure exactly.
   Each tile takes width in proportion to its own ratio, so nothing is cropped. */
.row { display: flex; gap: var(--gutter); align-items: flex-start; }
.row > .film, .row > .plate-fig { flex: var(--ar) 1 0%; }
.rows { display: grid; gap: var(--row-gap); }
/* below 768: a wide film stands alone; the others sit two to a line at one height, and an odd one
   left over runs the full width. No tile is ever narrower than 132px. */
@media (max-width: 47.99rem) {
  .row { flex-wrap: wrap; row-gap: 32px; }
  .row > .film--wide, .row > .film--scope, .row > .plate-fig--wide { flex: 0 0 100%; order: -1; }
  .row > .film--tall, .row > .film--portrait, .row > .film--square, .row > .plate-fig { flex: var(--ar) 1 0%; min-width: 34%; }
}
/* 768 to 1023: no tile under 132px. A row of a wide film and three upright ones breaks after the wide one. */
.row > .film { min-width: 132px; }
@media (max-width: 63.99rem) { .row--b { flex-wrap: wrap; row-gap: var(--gutter); } .row--b > .film--wide, .row--b > .film--scope { flex: 0 0 100%; } }

/* a wall: many films. The script sets each row to one height that fills the measure with no crop
   (site.js "walls"). Without the script the rows wrap at one height and stretch a little. */
.wall { --wall-h: clamp(150px, 26vw, 400px); display: flex; flex-wrap: wrap; gap: var(--row-gap) var(--gutter); align-items: flex-start; }
.wall > .film { flex: var(--ar) 1 calc(var(--wall-h) * var(--ar)); max-width: calc(var(--wall-h) * var(--ar) * 1.5); }
.wall > .film .film__frame { aspect-ratio: auto; height: var(--wall-h); }
.wall::after { content: ""; flex: 100 1 0; }
.wall.is-laid > .film { flex: 0 0 auto; width: calc(var(--h) * var(--ar)); max-width: none; }
.wall.is-laid > .film .film__frame { height: var(--h); }
.wall.is-laid::after { display: none; }
.wall--small { --wall-h: clamp(130px, 17vw, 260px); }
.wall--large { --wall-h: clamp(190px, 31vw, 440px); }
@media (max-width: 47.99rem) { .wall, .wall--small, .wall--large { --wall-h: 234px; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .wall { --wall-h: 260px; } .wall--small { --wall-h: 236px; } .wall--large { --wall-h: 280px; } }
@media (min-width: 64rem) and (max-width: 79.99rem) { .wall { --wall-h: 300px; } .wall--small { --wall-h: 260px; } .wall--large { --wall-h: 320px; } }
/* a sheet: films with no captions, one line under the whole group */
.wall--sheet { row-gap: var(--gutter); }
.wall__foot { margin-top: var(--row-gap); }
.wall__foot:has([data-work-more][hidden]) { display: none; }
.wall__empty { display: none; padding-block: 48px; color: var(--muted); }
.is-empty .wall__empty { display: block; }
.wall__end, .note { margin-top: 24px; font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }

/* a rail: a row longer than the page, scrolled sideways. It starts on the container's left edge and
   runs off the right edge of the window. */
.rail { --rail-h: clamp(250px, 28vw, 512px); }
.rail--wide { --rail-h: clamp(169px, 23.5vw, 338px); }
.rail__track { display: flex; gap: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-inline: max(var(--margin), calc((100vw - var(--max)) / 2)); scroll-padding-inline: max(var(--margin), calc((100vw - var(--max)) / 2)); padding-block: 6px; margin-block: -6px; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > .film { flex: none; width: calc(var(--rail-h) * var(--ar)); scroll-snap-align: start; }
.rail__nav { display: flex; align-items: center; gap: 8px; }
.rail__nav .link { margin-right: 12px; }
.is-static-rail .rail__nav, html:not(.js) .rail__nav { visibility: hidden; }

/* a plate: a picture is owed here. Same shape and place as the picture, so nothing moves when it arrives. */
.plate-fig { display: block; min-width: 0; --ar: 1.7778; }
.plate-fig--square { --ar: 1; } .plate-fig--portrait { --ar: 0.8; } .plate-fig--tall { --ar: 0.5625; }
.plate { display: grid; place-items: center; aspect-ratio: var(--ar); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--line); }
.plate .owl { width: 50px; height: auto; }

/* the site film toggle: one pause for every film on the page */
.films-toggle { position: fixed; z-index: 40; right: max(16px, calc((100vw - var(--max)) / 2 - 76px)); bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cloud); box-shadow: inset 0 0 0 1.5px rgba(18, 29, 42, 0.5); color: var(--pine); }
.films-toggle .ic--play { display: none; }
.films-toggle[aria-pressed="true"] .ic--play { display: block; }
.films-toggle[aria-pressed="true"] .ic--pause { display: none; }
/* below 1280 there is no margin to stand in, so it sits in the header bar: left of the menu button, or left of the header's own button */
@media (max-width: 79.99rem) { .films-toggle { z-index: 51; top: 10px; bottom: auto; right: calc(var(--margin) + 52px); width: 44px; height: 44px; background: none; box-shadow: inset 0 0 0 1px rgba(244, 247, 251, 0.45); color: var(--cloud); } }
/* Ash, 2026-10-30 (iPhone): "the header pause button is visually large next to the logo". The tap target stays 44px; the ring drawn is
   28px at the menu icon's 1.5px line, and the icon inside it 12px */
@media (max-width: 79.99rem) { .films-toggle { box-shadow: none; } .films-toggle::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(244, 247, 251, 0.6); pointer-events: none; }
  .films-toggle svg { width: 12px; height: 12px; } }
@media (min-width: 64rem) and (max-width: 79.99rem) { .films-toggle { right: calc(var(--margin) + 160px); } }
html.is-drawer-open .films-toggle { display: none; }

/* ---------- lists ---------- */
/* index rows: the services as rows of type */
.index > li { border-top: 1px solid var(--line); }
.index > li:last-child { border-bottom: 1px solid var(--line); }
.index__row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: var(--gutter); align-items: center; padding-block: 24px; color: var(--ink); }
.index__text { display: grid; gap: 8px; }
.index__desc { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.index__row > .ic { width: 24px; height: 24px; transition: transform 150ms var(--ease); }
.index__row:hover > .ic { transform: translateX(4px); }
@media (min-width: 64rem) { .index__row { padding-block: 28px; } }
.index__group { margin: 40px 0 12px; }
.index__group:first-child { margin-top: 0; }
/* home: name and line on one row */
@media (min-width: 64rem) {
  .index--inline .index__row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) 24px; }
  .index--inline .index__text { display: contents; }
}
/* compact: the other services on a service page, two columns of rows */
.index--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.index--compact > li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.index--compact .index__row { padding-block: 20px; }
.index--compact .index__text { gap: 4px; }
.index--compact .index__desc { font-size: var(--fs-small); line-height: 1.43; }
@media (max-width: 47.99rem) { .index--compact { grid-template-columns: 1fr; } .index--compact > li:nth-last-child(2) { border-bottom: 0; } }

/* format rows: what is made under a service */
.formats > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 12px; padding-block: 28px; border-top: 1px solid var(--line); align-items: start; }
.formats > li:last-child { border-bottom: 1px solid var(--line); }
.formats .h3 { grid-column: 1 / span 4; }
.formats__body { grid-column: 5 / span 6; display: grid; gap: 12px; }
.formats__when { font-size: 1rem; line-height: 1.5; color: var(--muted); }
.formats__when b { font-weight: 500; color: var(--ink); }
.ticks { display: grid; gap: 6px; font-size: var(--fs-small); line-height: 1.43; color: var(--text); }
.ticks li { position: relative; padding-left: 20px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--ink); }
@media (max-width: 63.99rem) { .formats .h3, .formats__body { grid-column: 1 / -1; } .formats > li { padding-block: 24px; } }

/* points: a strong line and the sentence under it (promises, notes, who is on it) */
.points > li { display: grid; gap: 10px; padding-block: 28px; border-top: 1px solid var(--line); }
.points > li:last-child { border-bottom: 1px solid var(--line); }
.points > li > p { max-width: 52ch; }

/* steps: rings on a rail. Static. */
.steps { display: grid; gap: 40px; }
.steps__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 24px; }
.steps__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--spark); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--pine); position: relative; z-index: 1; }
.steps__item:not(:last-child)::before { content: ""; position: absolute; left: 23.5px; top: 48px; bottom: -40px; width: 1px; background: var(--line); }
.steps__text { padding-top: 10px; display: grid; gap: 8px; }
.steps__text p { max-width: 52ch; }
/* one fact to a row: the label in a narrow track, the fact beside it */
.steps__facts { display: grid; gap: 10px; margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.steps__facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.steps__facts dt { font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.steps__facts dd { font-size: 1rem; line-height: 1.5; color: var(--ink); }
/* a long list: two columns, read down the first and then down the second */
@media (min-width: 64rem) {
  .steps--two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: var(--gutter); }
  .steps--two .steps__item--end::before { display: none; }
}
.steps + .link { margin-top: var(--content-gap); }
@media (max-width: 63.99rem) { .steps__item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; } .steps__n { width: 40px; height: 40px; } .steps__item:not(:last-child)::before { left: 19.5px; top: 40px; } .steps__text { padding-top: 6px; } }

/* questions: native details. Plus becomes minus. No animation. */
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding-block: 16px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ic { flex: none; width: 20px; height: 20px; color: var(--ink); }
.faq__item summary:hover .h4 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--amber); }
.faq__item[open] summary .ic .v { display: none; }
.faq__a { padding-bottom: 28px; max-width: 60ch; }

/* answers that stay open: white plates */
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.answers__item { display: grid; gap: 12px; align-content: start; padding: 32px; border-radius: 10px; background: var(--cloud-2); border: 0; }
.answers dd { max-width: 52ch; }
@media (max-width: 47.99rem) { .answers { grid-template-columns: 1fr; } .answers__item { padding: 24px; } }

/* ---------- the enquiry panel: the only black rectangle on a page ---------- */
.enquiry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; padding: 32px 24px; border-radius: 10px; background: var(--pine); color: var(--cloud);
  --on-ink: var(--cloud); --on-ink-muted: rgba(244, 247, 251, 0.72); --on-ink-line: rgba(244, 247, 251, 0.18); }
.enquiry__lead { grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.enquiry .eyebrow { color: var(--amber); }
.enquiry .h2 { color: var(--on-ink); }
.enquiry__side { grid-column: 9 / -1; align-self: end; display: grid; gap: 24px; justify-items: start; }
.enquiry__side > p { color: var(--on-ink-muted); font-size: 1rem; line-height: 1.5; }
.enquiry__direct { display: flex; flex-wrap: wrap; gap: 8px 24px; width: 100%; padding-top: 20px; border-top: 1px solid var(--on-ink-line); font-size: var(--fs-name); line-height: 1.47; font-weight: 500; }
.enquiry__direct a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.enquiry :focus-visible { outline-color: #FFFFFF; }
@media (min-width: 48rem) { .enquiry { padding: 48px; } }
@media (min-width: 64rem) { .enquiry { padding: 64px; min-height: 400px; } }
@media (max-width: 63.99rem) { .enquiry__lead, .enquiry__side { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) { .enquiry__side .btn { width: 100%; } }
/* HOME: the astronaut on the lake behind the words (Ash's handoff, 2026-10-14). The picture keeps its middle for the
   boat and its dark sides for the words; a shade on each side keeps the words clear where they cross it. Where the
   words stack (under 1024) the whole picture is shaded evenly. */
.enquiry--art { position: relative; isolation: isolate; overflow: hidden; background: var(--pine-deep); }
.enquiry__art { position: absolute; inset: 0; z-index: -2; }
.enquiry__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.enquiry--art::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 23, 33, 0.6), rgba(15, 23, 33, 0.12) 42%, rgba(15, 23, 33, 0.12) 62%, rgba(15, 23, 33, 0.6)); }
@media (max-width: 63.99rem) { .enquiry--art::before { background: rgba(15, 23, 33, 0.58); } }

/* ---------- forms ---------- */
.form-plate { padding: 24px; border-radius: var(--r); background: var(--cloud-2); border: 0; }
@media (min-width: 64rem) { .form-plate { padding: 40px; } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gutter); }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); line-height: 1.43; font-weight: 500; color: var(--ink); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; height: 52px; padding: 0 16px; border: 0; box-shadow: inset 0 0 0 1px var(--context); border-radius: var(--r); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.5; appearance: none; -webkit-appearance: none; }
.field textarea { height: auto; min-height: 144px; padding: 14px 16px; resize: vertical; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23030303' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r); }
.field__error { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.43; font-weight: 500; color: var(--ink); }
.field__error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.form__note, .form__status { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.form__status { color: var(--ink); display: grid; gap: 8px; }
.form__status:focus { outline: none; }
.form__status [data-sent] { font-weight: 500; }
@media (max-width: 47.99rem) { .form { grid-template-columns: 1fr; } .form__foot .btn { width: 100%; } }
.lines > li { display: grid; gap: 4px; padding-block: 20px; border-top: 1px solid var(--line); }
.lines > li:last-child { border-bottom: 1px solid var(--line); }
.lines__key { font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.lines a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- footer: compact, on ink (CD launch polish spec 2026-10-28 §1; Services keeps all six names, Ash the same day) ----------
   Desktop: the brand block in columns 1-4; Pages 5-6, Services 7-9, Contact 10-11, Legal 12. Tablet: the brand block across, the four
   columns three wide each. Phone: two up (Pages + Contact, then Services across, then Legal). */
.ftr { padding-top: 56px; overflow: clip; }
.ftr__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; }
.ftr__brand { grid-column: 1 / span 4; display: grid; align-content: start; justify-items: start; }
.ftr .brand__logo { height: 28px; }
.ftr__line { margin-top: 16px; max-width: 30ch; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.ftr__note { margin-top: 4px; max-width: 30ch; font-size: 0.8125rem; line-height: 1.38; color: var(--muted); }
.ftr__col { grid-column: span 2; }
.ftr__col--wide { grid-column: span 3; }
.ftr__col--legal { grid-column: span 1; }
.ftr__col .eyebrow { margin-bottom: 10px; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.15em; color: var(--spark); }
.ftr__col ul { display: grid; row-gap: 8px; }
.ftr__col li { font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.ftr__col a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ftr__base { margin-top: 40px; padding-block: 16px 20px; border-top: 1px solid var(--line); font-size: var(--fs-micro); line-height: 1.38; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
@media (max-width: 63.99rem) { .ftr__brand { grid-column: 1 / -1; margin-bottom: 32px; } .ftr__col, .ftr__col--wide, .ftr__col--legal { grid-column: span 3; } }
@media (max-width: 47.99rem) {
  .ftr { padding-top: 48px; }
  .ftr__in { row-gap: 28px; }
  .ftr__brand { margin-bottom: 4px; }
  .ftr__col, .ftr__col--legal { grid-column: span 6; }
  .ftr__col--wide { grid-column: 1 / -1; grid-row: 3; }
  .ftr__base { margin-top: 32px; }
}

/* ---------- page openings ---------- */
.open { padding-top: var(--open-top); }
.crumb { margin-bottom: 24px; }
.crumb ol { display: flex; gap: 8px; font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.crumb li { flex: none; }
.crumb li + li { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb li + li::before { content: "/"; margin-right: 8px; color: var(--context); }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.open__title { max-width: 16ch; }
.open--home .open__title { max-width: none; }
.open__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: start; margin-top: 32px; }
.open__foot .lead { grid-column: 1 / span 5; }
.open__foot .actions { grid-column: 8 / -1; justify-content: flex-end; }
.open__films { margin-top: var(--content-gap); }
/* below 768 an opening shows its first film only: a lone second film would leave half the row empty */
@media (max-width: 47.99rem) { .open__films .row > .film + .film { display: none; } }
/* a wide film beside its words, a tall film beside its words, or words only */
.open__split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; margin-top: 40px; align-items: stretch; }
.open__split .open__film { grid-column: 1 / span 8; }
.open__split .open__words { grid-column: 9 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.open--right .open__film { grid-column: 5 / -1; order: 2; }
.open--right .open__words { grid-column: 1 / span 4; order: 1; }
/* from 1280 a wide opening film takes seven columns: no film is shown wider than three-quarters of its pixels */
@media (min-width: 80rem) {
  .open__split .open__film { grid-column: 1 / span 7; }
  .open__split .open__words { grid-column: 8 / -1; }
  .open--right .open__film { grid-column: 6 / -1; }
  .open--right .open__words { grid-column: 1 / span 5; }
}
/* upright: the words in columns 1-5 with the title at the top, as on every page, and the buttons on
   the films' bottom edge; two upright films in columns 7-12 */
.open--upright .open__split { margin-top: 0; }
.open--upright .open__words { grid-column: 1 / span 5; order: 1; justify-content: space-between; gap: 32px; }
.open--upright .open__film { grid-column: 7 / -1; order: 2; }
.open--upright .facts { max-width: 496px; }
.open__words > div:not(.actions) { display: grid; gap: 24px; justify-items: start; }
.open__plain { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: start; }
@media (min-width: 80rem) { .open__plain { align-items: end; } }
.open__plain .open__title { grid-column: 1 / span 8; max-width: none; }
.open__plain .open__side { grid-column: 9 / -1; display: grid; gap: 24px; justify-items: start; }
.open--statement .open__title { max-width: 24ch; font-size: var(--fs-h2); line-height: 1.07; letter-spacing: -0.03em; }
.open--statement .lead { margin-top: 32px; max-width: 56ch; }
.facts { width: 100%; font-size: var(--fs-small); line-height: 1.43; color: var(--ink); font-weight: 500; }
.facts li { padding-block: 10px; border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 63.99rem) {
  .open__foot .lead, .open__foot .actions, .open__split .open__film, .open__split .open__words, .open--right .open__film, .open--right .open__words,
  .open--upright .open__words, .open--upright .open__film, .open__plain .open__title, .open__plain .open__side { grid-column: 1 / -1; order: 0; }
  .open__foot .actions { justify-content: flex-start; }
  .open--upright .open__film { max-width: 560px; }
}

/* ---------- page compositions ---------- */
/* the founder */
/* until the portrait exists its plate is small and never leads: three columns beside the words,
   and after the words on a phone */
.person { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.person__picture { grid-column: 1 / span 3; }
.person__text { grid-column: 5 / -1; display: grid; gap: 24px; justify-items: start; }
.person__line { color: var(--ink); font-weight: 500; }
@media (max-width: 63.99rem) { .person__picture { grid-column: 1 / span 4; max-width: 224px; } .person__text { grid-column: 5 / -1; } }
@media (max-width: 47.99rem) { .person__picture { grid-column: 1 / -1; grid-row: 2; max-width: 160px; } .person__text { grid-column: 1 / -1; grid-row: 1; } }

/* services: the index and its stage */
.stage-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.stage-grid__rows { grid-column: 1 / span 7; }
.stage { grid-column: 8 / -1; position: sticky; top: calc(var(--hdr) + 24px); display: grid; place-items: start; }
.stage__item { grid-area: 1 / 1; width: 100%; display: grid; justify-items: start; opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s 200ms; }
.stage__item.is-on { opacity: 1; visibility: visible; transition: opacity 200ms linear; }
.stage__item .film, .stage__item .plate-fig { width: 100%; }
.stage__item .film--tall { width: 56.25%; }
.stage__item .film--portrait { width: 80%; }
.stage__item .film__cap { margin-top: 12px; }
@media (max-width: 63.99rem) {
  .stage-grid__rows { grid-column: 1 / -1; }
  .stage { display: none; }
}
/* the service list: large names, quiet until the pointer or focus lands on one */
.index--stage .index__row .h3 { font-weight: 450; letter-spacing: -0.045em; font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.06; color: var(--context); transition: color 200ms var(--ease); }
.index--stage .index__row:hover .h3, .index--stage .index__row:focus-visible .h3 { color: var(--ink); }
@media (hover: none) { .index--stage .index__row .h3 { color: var(--ink); } }
/* the list starts sooner under a words-only opening, so the stage film is on the first screen */
.page--services .open + .band { margin-top: calc(var(--sec) / 2); }
.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; }
.nudge .statement { max-width: 30ch; }

/* work: the filter */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.filter__service { min-height: 24px; margin-top: 16px; font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.filter-wrap { margin-bottom: var(--content-gap); }
@media (max-width: 47.99rem) { .filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); padding-block: 4px; scrollbar-width: none; } .filter::-webkit-scrollbar { display: none; } }

/* two named jobs, side by side */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--row-gap) var(--gutter); }
.pair__item { display: grid; gap: 8px; align-content: start; }
.pair__item .film { margin-bottom: 12px; }
.pair__item p { max-width: 44ch; }
@media (max-width: 47.99rem) { .pair { grid-template-columns: 1fr; } }

/* about: the journey */
.journey > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 8px; padding-block: 28px; border-top: 1px solid var(--line); align-items: start; }
.journey > li:last-child { border-bottom: 1px solid var(--line); }
.journey__year { grid-column: 1 / span 3; font-size: var(--fs-h3); line-height: 1.19; letter-spacing: -0.02em; color: var(--context); font-variant-numeric: tabular-nums; }
.journey__text { grid-column: 4 / span 7; display: grid; gap: 12px; }
@media (max-width: 47.99rem) { .journey__year, .journey__text { grid-column: 1 / -1; } }

.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: var(--content-gap); }

/* contact: contact cards + form card (Ash, 2026-10-28, a contact page as a LAYOUT reference; src/pages/_contactpanel.mjs). One section on
   the page's grid edge: the eyebrow, the H1, one line and the stacked contact cards (columns 1-5), the form in a card (7-12). Below 1024 they
   stack, the cards first, on the page's 20px margin. Cards and the form card: --surface on the cloud ground, a hairline (--line), the site
   radius (--r). Every link is at least 44px tall. Field outlines stay var(--context) (1.4.11, c566592). The gap to the Instagram panel is
   that panel's own top padding (--sv-pad). */
.cx { padding-top: 32px; padding-bottom: 0; }
.cx__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-items: start; }
.cx__eyebrow { margin-bottom: 16px; }
.cx__title { font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); line-height: 1.08; color: var(--ink); }   /* compact, the reference's scale: 36px on phones, 48px from ~1150 up (Ash, 2026-10-28: "not zoomed in too much") */
.cx__line { margin-top: 12px; max-width: 34ch; font-size: 1.125rem; line-height: 1.5; color: var(--text); }
.cx__cards { display: grid; gap: 10px; margin-top: 28px; }
.cx__card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cx__tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--cloud-2); color: var(--ink); }
.cx__item { display: grid; gap: 0; min-width: 0; }
.cx__key { font-size: 0.75rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cx__pair { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
.cx__val { font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
span.cx__val { display: inline-flex; align-items: center; min-height: 44px; }
a.cx__val, .cx__also { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--context); }
a.cx__val:hover, .cx__also:hover { text-decoration-color: currentColor; }
.cx__also { font-size: 0.9375rem; line-height: 1.47; font-weight: 500; color: var(--ink); }
.cx__card .cx__key + .cx__pair { margin-top: -6px; margin-bottom: -6px; }
.cx__formcard { padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); }
.cx__lead { max-width: 52ch; margin-bottom: 24px; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.cx__formcard .form { gap: 16px var(--gutter); }
.cx__formcard .field input, .cx__formcard .field select { height: 48px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--context); background-color: #FFFFFF; } /* 1.4.11: --line was 1.3:1 */
.cx__formcard .field textarea { min-height: 140px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--context); background-color: #FFFFFF; }
.cx__formcard .field input:focus-visible, .cx__formcard .field textarea:focus-visible, .cx__formcard .field select:focus-visible, .cx__formcard .field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.cx__formcard .form__note { padding-top: 0; border-top: 0; }
.cx__formcard .form__foot { justify-content: flex-end; margin-top: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.cx__formcard .form__foot .btn { min-height: 48px; }
.cx__formcard .field label { font-size: 0.875rem; }
@media (min-width: 48rem) {
  .cx { padding-top: 48px; }
  .cx__formcard { padding: 32px; }
}
@media (min-width: 64rem) {
  .cx { padding-top: 64px; }
  .cx__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .cx__side { grid-column: 1 / span 5; }
  .cx__formcard { grid-column: 7 / -1; padding: 36px 40px; }
}
.page--contact main { padding-bottom: 0; }

/* privacy and terms (Ash, 2026-10-28; src/pages/legal.mjs): one reading column on the page's grid edge */
.legal__col { max-width: 44rem; }
.legal__title { margin-bottom: 12px; }
.legal__date { margin-bottom: 40px; font-size: var(--fs-small); line-height: 1.43; color: var(--muted); }
.legal__h2 { margin-top: 48px; margin-bottom: 12px; font-size: var(--fs-h4); line-height: 1.26; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }
.legal p { margin-top: 12px; color: var(--text); text-wrap: pretty; }
.legal__list { margin-top: 12px; padding-left: 1.25em; list-style: disc; display: grid; gap: 8px; color: var(--text); }
.legal strong { font-weight: 600; color: var(--ink); }  /* the Instagram panel ends the page: its own bottom padding (--sv-pad) is the gap to the plain footer */

/* ---------- the old site's panels (localhost:1111), in Superside's colours ----------
   The three engines are copied byte for byte into src/assets/panels/ and are not edited. They are
   re-skinned the way the old site re-skinned them (its bto-home-sections.css §5): by re-pointing their
   own tokens on their own mount elements, which wins over the :root they declare by inheritance. */
:root {
  /* the shared tokens the engines read from the old site's theme, given this site's values */
  --font-family-1: var(--font); --font-family-2: var(--font);
  --primary: var(--pine); --secondary: var(--cloud); --on-dark: var(--cloud); --text-color: var(--text);
  --accent-color-2: var(--pine); --accent-color-3: var(--cloud); --accent-color-6: var(--cloud-3);
  --bto-content-gap: clamp(28px, 3.4vw, 56px); --bto-dur-ui: 300ms; --bto-dur-media: 450ms; --bto-ease: cubic-bezier(.65, 0, .34, 1);
  --bto-gutter: clamp(20px, 4vw, 44px); --bto-radius-l: 20px; --bto-radius-m: 12px; --bto-section-space: clamp(72px, 8vw, 132px);
  --type-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); --type-heading: 37px; --type-heading-sm: 25px; --type-statement: 22px; --type-body: 16px; --type-body-lg: 20px;
  --type-small: 14px; --type-micro: 13px; --type-lh-display: 1.06; --type-lh-statement: 1.4; --type-lh-body: 1.5; --type-lh-small: 1.43; --type-track-display: -0.03em;
}
/* the reel wall: on the pine field, lime on the first action, the phrase in serif italic */
[data-reels-panel] {
  --rp-bg: var(--pine); --rp-ink: var(--cloud); --rp-dim: rgba(244, 247, 251, 0.76); --rp-line: rgba(244, 247, 251, 0.14); --rp-plate: rgba(244, 247, 251, 0.06);
  --rp-cta-fill: #D8FF85; --rp-cta-label: var(--pine); --rp-font: var(--font); --rp-radius: 16px;
  --rp-title-weight: 450; --rp-title-track: -0.03em;
  --rp-gutter: max(var(--margin), calc((100vw - var(--max)) / 2));
  --rp-handoff: 0;   /* as on the old site: nothing dark follows it, so it unpins instead of closing on one tile */
}
[data-reels-panel] .btorp__title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
/* the card stack: on the light ground, the cards rising into the deck as on the old site */
[data-scroll-stack] {
  --stack-bg: var(--cloud); --stack-ink: var(--pine); --stack-ink-dim: rgba(18, 29, 42, 0.7); --stack-hairline: rgba(18, 29, 42, 0.14);
  --stack-cta-bg: var(--pine); --stack-cta-ink: var(--cloud); --stack-frame-near: var(--pine); --stack-frame-far: #B5CFEF;
  --stack-font: var(--font); --stack-font-display: var(--font); --stack-font-accent: var(--serif);
  --stack-rise: 1;
}
[data-scroll-stack] .wstack__h { text-transform: none; font-weight: 450; letter-spacing: -0.03em; }
[data-scroll-stack] .wstack__h em { font-style: italic; font-weight: 400; letter-spacing: 0; }
[data-scroll-stack] .wstack__title { text-transform: none; letter-spacing: -0.03em; font-weight: 500; }
[data-scroll-stack] .wstack__card { color: #FFFFFF; }
[data-scroll-stack] .wstack__tag { background: #D8FF85; color: var(--pine); }
[data-scroll-stack] .wstack__cta { text-transform: none; letter-spacing: -0.01em; }
/* "WHAT WE MAKE", the deck on the left and its words on the right (founder, 2026-10-14; home.mjs prints the
   deck, the engine adopts it, site.js 6f changes the words as each card lands). The frame is 4px (it was
   8-12px: "way too thick"); a card title steps down to fit a deck half the width. From 992 wide and 600
   tall, where the engine stacks; below that the engine's own plain list, each card with its line under it. */
[data-scroll-stack] { --card-frame: 4px; --card-radius: 16px; --stack-title-size: clamp(22px, 2.2vw, 34px); }
.wstack__side, .wstack__desc { display: none; }
[data-scroll-stack] .wstack__eyebrow { font-family: var(--font); font-size: var(--fs-small); line-height: 1.43; letter-spacing: 0; color: var(--muted); max-width: 30ch; text-align: center; }
.wstack:not(.is-stacked) .wstack__desc { display: block; width: min(var(--card-max-w), 100%); margin: -6px auto 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.wstack:not(.is-stacked) .wstack__deck { gap: 12px; }
/* Ash, 2026-10-30 (iPhone at 390): a card ran past the right gutter while its left sat on it. The list's one column may never grow to a
   card's content: the column, the deck and each card are held to the gutter box in every engine (Chrome measured them inside already) */
.wstack:not(.is-stacked) .wstack__deck { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.wstack:not(.is-stacked) .wstack__card, .wstack:not(.is-stacked) .wstack__desc { min-width: 0; max-width: 100%; box-sizing: border-box; }
.wstack:not(.is-stacked) .wstack__card + .wstack__desc + .wstack__card { margin-top: 20px; }
/* on a phone the case study sits under its card (the panel beside the deck is a desktop thing): the line, the account, the facts */
.wstack__desc-body { margin-top: 8px; color: var(--text); }
.wstack__desc .wstack__facts { margin-top: 14px; }
@media (min-width: 62rem) and (min-height: 37.5rem) {
  .wstack.is-stacked .wstack__pin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; align-content: center;
    width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; padding: var(--hdr) 0 0; }
  .wstack.is-stacked .wstack__eyebrow, .wstack.is-stacked .wstack__h, .wstack.is-stacked .wstack__cta, .wstack.is-stacked .wstack__desc { display: none; }
  .wstack.is-stacked .wstack__deck { grid-column: 1; grid-row: 1; width: min(100%, calc((100vh - var(--hdr) - 230px) * 16 / 9)); margin-inline: 0; }
  .wstack.is-stacked .wstack__side { display: grid; grid-column: 2; grid-row: 1; align-self: center; gap: 28px; }
}
/* the side: Superside's block. A label over a rule with the count, the service's name with its phrase in the
   serif, its line, two buttons. A new card's words come up from below as you scroll down, and down from
   above as you scroll back; the old ones leave the other way. */
.wstack__side-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wstack__side-label { margin: 0; }
.wstack__count { font-size: var(--fs-small); line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.wstack__notes { display: grid; --from: 28px; --to: -28px; }
.wstack__notes[data-dir="up"] { --from: -28px; --to: 28px; }
.wstack__note { grid-area: 1 / 1; display: grid; gap: 22px; align-content: start; justify-items: start; opacity: 0; visibility: hidden; transform: translate3d(0, var(--from), 0);
  transition: opacity 260ms var(--ease), transform 420ms var(--ease), visibility 0s 420ms; }
.wstack__note.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--ease) 80ms, transform 520ms var(--ease) 40ms; }
.wstack__note.is-off { transform: translate3d(0, var(--to), 0); }
.wstack__note-title { font-size: clamp(2rem, 1.2rem + 2.1vw, 3.25rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 400; color: var(--ink); text-wrap: balance; }
.wstack__note-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(1em + 4px); line-height: 1; letter-spacing: -0.005em; }
.wstack__note-line { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 34ch; text-wrap: pretty; }
/* the case study under the line: the account of the job, then its facts on record, label beside value, between hairlines */
.wstack__note-body { margin-top: -6px; font-size: 1rem; line-height: 1.5; color: var(--text); max-width: 46ch; text-wrap: pretty; }
.wstack__facts { display: grid; grid-template-columns: max-content 1fr; width: 100%; max-width: 480px; border-top: 1px solid var(--line); }
.wstack__facts > div { display: contents; }
.wstack__facts dt, .wstack__facts dd { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.4; }
.wstack__facts dt { padding-right: 24px; color: var(--muted); }
.wstack__facts dd { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .wstack__note, .wstack__note.is-on, .wstack__note.is-off { transform: none; transition: none; } }
/* SELECTED WORK (Ash's Home handoff, 2026-10-14): each card's film fills it; the last two cards hold three upright
   clips side by side, each whole at 9:16, centred in the wide card. Only the card in front plays (site.js 6f). */
.wstack__media .wstack__film { position: absolute; inset: 0; }
.wstack__media .film__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: #000; }
.wstack__trio { position: absolute; inset: 0; display: flex; justify-content: center; gap: 6px; }
.wstack__trio .wstack__film { position: relative; inset: auto; flex: none; height: 100%; aspect-ratio: 9 / 16; }
/* the film row: aligned to this site's container; captions on the film, as on the old site */
.cap-gallery { --gal-edge: max(var(--margin), calc((100% - var(--max)) / 2)); --gal-h: clamp(190px, 21vw, 300px); --accent-mark: var(--ink); padding-block: 0; }
.cap-gallery.band--field { padding-block: var(--sec); }
.cap-gallery .cap-gallery__top { padding-inline: 0; margin-bottom: var(--content-gap); }
.cap-gallery__head { display: grid; gap: 14px; justify-items: start; }
.cap-gallery__head .head__eyebrow { margin-bottom: 4px; }
.cap-gallery__btn { background: var(--ink); color: var(--on-ink); }
.cap-gallery__btn .ic { width: 16px; height: 16px; }
.cap-gallery__tile .cap-gallery__poster, .cap-gallery__tile .cap-gallery__vid { object-position: var(--ox, 50%) var(--oy, 50%); }
.cap-gallery__tile { border-radius: 10px; }
html.is-films-paused .cap-gallery__vid { opacity: 0 !important; }
/* the chip orbit: Superside's warm light, white chips, pine ink, lime on the icon accent */
/* BACK ON THE LIGHT GROUND with a pine phone (founder, 2026-10-14, after seeing it on pine: "the colors are
   looking very off. The phone needs to be green ... keep the comparison panel and the phone panel white").
   The comparison above shares its ground, so the two read as one; the engine's own 120px of page ground
   above it is taken away, and the founder band below follows with no gap. */
[data-zenda-orbit] {
  --zo-ground: var(--cloud-2); --zo-chip: #FFFFFF; --zo-chip-ghost: rgba(255, 255, 255, 0.6); --zo-ink: var(--pine); --zo-ink-sub: var(--text);
  --zo-ic-ink: var(--pine); --zo-ic-tone: #D8FF85; --zo-ic-paper: #FFFFFF; --zo-screen: var(--cloud-3); --zo-device-bezel: var(--pine);
  --zo-font: var(--font);
}
main > .zo[data-zenda-orbit] { margin-top: 0; }
/* SMALLER ON A DESKTOP (founder, 2026-10-14: "way too big for an 80% to 100% screen size"). Every size in
   the engine is a multiple of one unit taken from the chip label (u = label / 1.75), so setting the label
   to 17px instead of 25px scales the chips, the phone, the spacing and the motion together, by about a
   third. The heading and its line step down with it. Phones keep the engine's own sizes. */
@media (min-width: 62rem) {
  [data-zenda-orbit] { --zo-label: 17px; --zo-title-size: clamp(2rem, 1.2rem + 1.5vw, 2.75rem); --zo-sub-size: 1.125rem; }
}
.cmp + .panel--orbit { margin-top: 0; }
.panel--orbit + .band--field { margin-top: 0; }
/* the phone hangs below the chips and the section cuts it at its foot; on one continuous pine that cut
   would float, so the last 160px of the section fade into the ground and the phone sinks into it */
.zo[data-zenda-orbit]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(231, 242, 254, 0), var(--cloud-2) 85%); }

/* ---------- the brand layer: the panels that carry colour, texture and movement ---------- */

/* HOME, THE FILM. The page opens on a film from edge to edge, with the name of the job over it.
   This is the one place a film is cropped to fit the window: it is the room, not a tile. */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 940px); display: grid; align-items: end; background: var(--night); color: var(--cream); overflow: clip; }
.hero__film { position: absolute; inset: 0; z-index: -1; }
.hero__film .film, .hero__film .film__frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* the shade runs down into solid pine at the foot, the ground of the logo strip under it: no seam between them */
.hero__film::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(18, 29, 42) 0%, rgba(18, 29, 42, 0.8) 36%, rgba(18, 29, 42, 0.55) 66%, rgba(18, 29, 42, 0.34) 100%); } /* a11y mobile audit 1: the 66% stop held the eyebrow at 2.1:1 on its worst frame */
.hero__in { display: grid; gap: 22px; padding-block: 160px 48px; }
.hero .eyebrow { color: var(--amber); }
.hero__title { color: var(--cream); max-width: none; }
.hero__title .hl { margin-top: 0.08em; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-top: 6px; }
.hero__foot .lead { color: rgba(244, 247, 251, 0.92); max-width: 36ch; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px currentColor; color: var(--cloud); }
.btn--ghost:hover { background: rgba(244, 247, 251, 0.14); }
.btn .ic--play { width: 14px; height: 14px; }
@media (max-width: 47.99rem) { .hero__in { padding-block: 132px 32px; } .hero .actions { width: 100%; } .hero .actions .btn { flex: 1 1 auto; } }

/* THE TICKER: two lines of the brand's own words, running opposite ways. It stops under the pointer,
   with the films' pause control, and for anyone who asks for less motion. */
.ticker { display: grid; gap: 8px; padding-block: 16px; background: var(--night); color: var(--cream); overflow: clip; border-block: 1px solid rgba(244, 247, 251, 0.14); }
.ticker__row { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker__row--back { animation-direction: reverse; }
.ticker__set { display: flex; flex: none; align-items: center; gap: 0.6em; padding-right: 0.6em; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1; white-space: nowrap; }
.ticker__set span { color: rgba(244, 247, 251, 0.44); }
.ticker__set b { font-weight: 400; color: var(--cream); }
.ticker__set i { flex: none; width: 0.5em; height: 0.5em; border: 0.09em solid rgba(244, 247, 251, 0.6); border-radius: 50%; }
@keyframes tick { to { transform: translate3d(-50%, 0, 0); } }
.ticker:hover .ticker__row, .ticker:focus-within .ticker__row, html.is-films-paused .ticker__row { animation-play-state: paused; }

/* THE REEL WALL (the old site's panel): the words hold still on the left while three columns of
   films pass on the right, the middle one against the other two. */
.reel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: start; }
.reel__words { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + 40px); display: grid; gap: 24px; justify-items: start; padding-bottom: 24px; }
.reel__cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.reel__col { display: grid; gap: var(--gutter); transform: translate3d(0, calc(var(--shift, 0) * 1px), 0); }
.reel__col:nth-child(2) { padding-top: 88px; }
.reel__col .film__cap { margin-top: 8px; }
@media (max-width: 63.99rem) { .reel__words { grid-column: 1 / -1; position: static; padding-bottom: 0; } .reel__cols { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) { .reel__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reel__col:nth-child(3) { display: none; } .reel__col:nth-child(2) { padding-top: 48px; } }

/* THE STACK (the old site's "What we shoot"): one card to a service. Each card holds under the
   header while the next one slides over it. Plain position: sticky; no script moves anything. */
.stack { display: grid; gap: 28px; }
.stack__card { position: sticky; top: calc(var(--hdr) + 8px + var(--i, 0) * 12px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: stretch;
  min-height: min(66vh, 560px); padding: 32px; border-radius: 10px; }
.stack__card.theme-paper { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink), 0 -18px 40px rgba(18, 29, 42, 0.14); }
.stack__words { grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.stack__top { display: grid; gap: 16px; justify-items: start; }
.stack__group { font-size: var(--fs-small); line-height: 1.43; font-weight: 700; color: var(--muted); }
.stack__name { font-weight: 450; letter-spacing: -0.045em; font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4rem); line-height: 1.02; color: var(--ink); text-wrap: balance; }
.stack__name a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 24px; }   /* the whole card is the link, above its film */
.stack__name a:focus-visible { outline: none; }
.stack__name a:focus-visible::after { outline: 3px solid var(--amber); outline-offset: 3px; }
.stack__line { font-size: var(--fs-lead); line-height: 1.45; color: var(--text); max-width: 30ch; }
.stack__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.stack__go .ic { transition: transform 150ms var(--ease); }
.stack__card:hover .stack__go .ic { transform: translateX(6px); }
.stack__film { grid-column: 8 / -1; align-self: center; display: grid; justify-items: end; }
.stack__film .film { width: 100%; }
.stack__film .film--tall { width: min(100%, calc(min(58vh, 500px) * 0.5625)); }
.stack__film .film--square, .stack__film .film--portrait { width: min(100%, 380px); }
.stack__none { align-self: center; justify-self: end; grid-column: 8 / -1; max-width: 22ch; font-size: var(--fs-lead); line-height: 1.45; text-align: right; color: var(--muted); }
@media (max-width: 63.99rem) { .stack__words, .stack__film, .stack__none { grid-column: 1 / -1; } .stack__film { justify-items: start; } .stack__none { text-align: left; justify-self: start; } .stack__card { padding: 24px; min-height: 0; } .stack__film .film--tall { width: min(60%, 240px); } }
/* a card taller than the window would be covered before it was read: on a phone, and on a short window, the cards simply
   follow one another. They stay positioned, so each one still holds its own link. */
@media (max-width: 47.99rem), (max-height: 640px) { .stack__card { position: relative; top: auto; } }
/* a card that holds keyboard focus comes to the front, so a covered card is never focused unseen */
.stack__card:focus-within { z-index: 5; }

/* A TAPED PHOTOGRAPH: a real print, set a little off the level, held by one strip of tape */
.taped { position: relative; display: block; padding: 0; background: none; border-radius: 10px; overflow: hidden; }
.taped img { display: block; width: 100%; height: auto; border-radius: 1px; }
.taped::before { display: none; content: ""; position: absolute; left: 50%; top: -14px; width: 112px; height: 30px; transform: translateX(-50%) rotate(-4deg); background: rgba(255, 191, 101, 0.86); box-shadow: 0 1px 3px rgba(18, 29, 42, 0.18);
  clip-path: polygon(0 12%, 4% 0, 9% 10%, 14% 0, 20% 9%, 100% 0, 100% 100%, 96% 90%, 91% 100%, 86% 91%, 80% 100%, 0 100%); }
.taped figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(18, 29, 42, 0.72); font-size: var(--fs-micro); line-height: 1.38; font-weight: 500; color: var(--cloud); }
.taped--right { transform: none; }

/* the founder: the print beside the words */
.person { align-items: center; }
.person__picture { grid-column: 1 / span 4; padding: 12px 8px 0 12px; }
.person__text { grid-column: 6 / -1; }
@media (max-width: 63.99rem) { .person__picture { grid-column: 1 / span 5; max-width: none; } .person__text { grid-column: 7 / -1; } }
@media (max-width: 47.99rem) { .person__picture { grid-column: 1 / -1; grid-row: auto; max-width: 280px; } .person__text { grid-column: 1 / -1; grid-row: auto; } }
/* the founder's words without his picture (Home, Ash 2026-10-28): one centred statement over the middle eight columns */
.person--solo .person__text { grid-column: 3 / span 8; justify-items: center; text-align: center; }
@media (max-width: 63.99rem) { .person--solo .person__text { grid-column: 2 / span 10; } }
@media (max-width: 47.99rem) { .person--solo .person__text { grid-column: 1 / -1; } }

/* THE SHOWREEL: opens in place, with sound, when the visitor asks for it */
.showreel { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 14px; background: #000; color: var(--cream); overflow: hidden; }
.showreel::backdrop { background: rgba(18, 29, 42, 0.88); }
.showreel video { display: block; width: 100%; height: auto; max-height: calc(100vh - 32px); background: #000; }
.showreel__close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--amber); color: var(--pine); font-size: 1.5rem; line-height: 1; font-weight: 700; }

/* a sentence set as a poster: the tall capitals at heading size */
.poster { font-weight: 450; letter-spacing: -0.045em; font-size: clamp(2.5rem, 1.45rem + 3.6vw, 4.5rem); line-height: 1.04; color: var(--ink); text-wrap: balance; }
/* promises, three across on a field */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gutter); margin-top: var(--content-gap); }
.trio > li { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: 10px; background: var(--surface); }
.trio p { max-width: 38ch; }
@media (max-width: 63.99rem) { .trio { grid-template-columns: 1fr; } }

/* film strips of stills: real frames, set like contact prints */
.prints { display: flex; flex-wrap: wrap; gap: 28px 24px; align-items: flex-start; }
.prints .taped { flex: 1 1 200px; max-width: 300px; }
.prints .taped:nth-child(2n) { transform: rotate(1.6deg); margin-top: 28px; }
.prints .taped:nth-child(3n) { transform: rotate(-0.8deg); }

/* an opening that is a field: the colour runs up under the header */
.open--field { margin-top: calc(-1 * var(--hdr)); padding-top: calc(var(--hdr) + var(--open-top)); padding-bottom: var(--sec); }
.open--field + .band { margin-top: var(--sec); }
/* page openings in the brand's voice */
.open__title { max-width: 14ch; }
.open--row .open__title, .open__plain .open__title { max-width: none; }
.open--statement .open__title { font-family: var(--font); text-transform: none; font-weight: 700; letter-spacing: -0.04em; max-width: 22ch; }
.crumb { font-weight: 700; }
.facts { font-weight: 700; }

/* ---------- three of Superside's home sections (components.mjs: logoStrip, compare, system) ----------
   Measured on superside.com on 2026-10-14 at 375, 1440 and 1680; the numbers in each comment are theirs. */

/* THE LOGO STRIP. The line: 20/26 on a phone, 24/28 from 768, regular, centred, at most 568px wide.
   Space: 64 above and 44 below on a phone, 80/56 from 768, 128/88 from 1024; 48px from the line to the
   logos (80 from 1024). Rows 32px apart (48 from 768). Logos 48px apart on a phone, 80 from 768, 96 from
   1024, drawn at 80%, 90% and 100%. The row fades out over its outer fifth on each side and runs to the
   window's edges until 1024, inside the container after. */
/* on the pine field (founder, 2026-10-14): the opening above fades into the same pine and the reel wall below
   is pine, so the three read as one. Less space above and below than Superside's 128/88, for the same reason. */
.logos { padding-block: 28px; --z: 0.8; background: var(--pine); }
.logos.theme-navy { background: var(--pine); }
.logos--light { background: var(--cloud); }
.logos--one { padding-block: 36px; }   /* one row is shorter than Home's two: more air keeps the strip in the same 160-200 band */
.logos__in { display: grid; gap: 20px; }
/* the label: small, in spaced capitals, centred; the marks and the label share the secondary ink (--muted re-points inside a navy field) */
.logos__title { margin-inline: auto; text-align: center; font-size: 0.75rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.logos__rows { display: grid; gap: 16px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margin));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos__rows::-webkit-scrollbar { display: none; }
.logos.is-moving .logos__rows { overflow: hidden; }
.logos__row { display: flex; min-width: 0; }
.logos__row + .logos__row { display: none; }
.logos__track { display: flex; flex: none; align-items: center; margin-inline: auto; }
.logos.is-moving .logos__track { margin-inline: 0; will-change: transform; }
.logos__item { flex: none; display: flex; align-items: center; min-height: 40px; padding-inline: 28px; }
.logos__mark { display: block; width: calc(var(--w) * var(--z)); height: calc(var(--h) * var(--z)); background: var(--muted);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (forced-colors: active) { .logos__mark { background: CanvasText; } }
/* a logo with no transparency (Home's live strip: REVE, Kai Room, Palm Bliss) is shown as the picture it is */
.logos__mark--pic { background: none; -webkit-mask-image: none; mask-image: none; }
.logos__mark--pic img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
/* Home only: navy ground the strip's old height gave back. The compact strip pulled the reel wall up into the first screen's load window, which made it start its clips at once (check-seo R7: 2925 KB of film in 5 s against 2500); this restores where it starts. */
.logos-rest { display: block; height: 96px; background: var(--pine); }
@media (min-width: 64rem) { .logos-rest { height: 140px; } }
/* a short set (fewer than eight marks, components.mjs STILL_BELOW; the logo audit's F1, 2026-10-27) is one still, centred row: no drift,
   no copies, no fades, and it wraps to a second line before it would scroll */
.logos--still .logos__rows { overflow: visible; margin-inline: 0; -webkit-mask-image: none; mask-image: none; }
.logos--still .logos__track { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; margin-inline: auto; }
/* Reduced motion (and no script): the row stands still, starts at the left and scrolls sideways */
@media (prefers-reduced-motion: reduce) { .logos__track { margin-inline: 0; } .logos__rows { overflow-x: auto; } }
@media (min-width: 48rem) {
  .logos { padding-block: 32px; --z: 0.9; }
  .logos--one { padding-block: 40px; }
  .logos__row + .logos__row { display: flex; }
  .logos__item { padding-inline: 36px; }
}
@media (min-width: 64rem) { .logos { --z: 1; padding-block: 24px; } .logos--one { padding-block: 40px; } .logos__in { gap: 24px; } .logos__rows { margin-inline: 0; } .logos__item { padding-inline: 40px; } }

/* THE COMPARISON, on the pine field. The label in the field's ink, not lime, as on Superside. Heading
   at most 700px, 48px to the table (80 from 1024). From 1024: the label row 92px tall, each row 32px
   above and below its content, the name column 447px with an 80px tile and a 40px glyph 40px from
   the words, names 24/28 at 500, lines 16/24 at 65%, points in upright Instrument Serif 24/28 at least
   144px wide, ticks 32px, rules at 10% of the ink, the first row lime with 10px corners standing 32px
   proud of the table. Below 1024: 12px rows, 12px words (16 from 768), 20px ticks, no tiles or lines,
   the names held at the left while the points scroll. */
/* A THIN STRIP (founder, 2026-10-14: the table was "way, way too big"; he wants it about three to four
   times the 144px gap between two sections). Superside's table, compacted: 56px above and below, a
   one-line heading, rows 14px above and below with a 48px tile, names 20/24, lines 14/20. */
.cmp { --cmp-bleed: 12px; padding-block: 40px; background: var(--cloud-2); }
.sys.band--field + .cmp { margin-top: 0; }
/* Ash, 2026-10-30: How a project runs now comes before Selected work; the section after the deck is pulled up over the pin's empty
   foot by site.js 6f, so it paints above the pin (position) */
.panel--stack + * { position: relative; }
/* Ash, 2026-10-30 (alignment sweep at 390): the owl wall's motion button sat 16px from the edge, inside the 20px gutter */
@media (max-width: 47.99rem) { button.owl-motion { right: 20px; } }
.sys.band--field + .panel--stack { margin-top: 0; }
.cmp__head { display: grid; justify-items: center; gap: 8px; max-width: none; margin: 0 auto 28px; text-align: center; }
.cmp__head .eyebrow { color: var(--ink); font-size: 0.75rem; letter-spacing: 0.15em; }
.cmp__head .h2 { max-width: none; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1.2; }
/* positioned, so the words kept for screen readers (.sr, absolutely placed) are clipped with the table
   instead of widening a phone's page */
.cmp__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--margin)); padding: var(--cmp-bleed) var(--margin); }
.cmp__scroll::-webkit-scrollbar { display: none; }
.cmp__scroll:focus-visible { outline-offset: -2px; }
.cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--ink); }
.cmp__table th, .cmp__table td { padding: 12px; text-align: center; vertical-align: middle; font-weight: 400; }
.cmp__table thead th { min-width: 96px; font-size: 0.75rem; line-height: 1.53; color: var(--ink); text-wrap: balance; }
.cmp__table tbody th { width: 128px; min-width: 128px; padding-left: 0; text-align: left; }
.cmp__corner, .cmp__table tbody th { position: sticky; left: 0; z-index: 2; background: var(--cloud-2); }
.cmp__table tbody tr:not(:last-child):not(.cmp__row--primary) > * { border-bottom: 1px solid rgba(18, 29, 42, 0.1); }
.cmp__who { display: flex; align-items: center; gap: 40px; }
.cmp__tile { display: none; flex: none; place-items: center; width: 80px; height: 80px; border-radius: 10px; background: rgba(18, 29, 42, 0.07); color: var(--ink); }
.cmp__glyph { width: 40px; height: 40px; }
.cmp__words { display: grid; gap: 12px; }
.cmp__name { font-size: 0.75rem; line-height: 1.53; color: var(--ink); }
.cmp__desc { display: none; max-width: 324px; font-size: 1rem; line-height: 1.5; opacity: 0.65; color: var(--ink); text-wrap: pretty; }
.cmp__mark { width: 20px; height: 20px; margin-inline: auto; }
/* the first row: lime, its corners rounded, standing proud of the table on both sides */
.cmp__table .cmp__row--primary > * { position: relative; background: var(--spark); color: var(--pine); }
.cmp__table .cmp__row--primary > th { position: sticky; z-index: 3; }
.cmp__row--primary > th::before, .cmp__row--primary > td:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--cmp-bleed); background: var(--spark); }
.cmp__row--primary > th::before { right: 100%; border-radius: 10px 0 0 10px; }
.cmp__row--primary > td:last-child::after { left: 100%; border-radius: 0 10px 10px 0; }
.cmp__row--primary .cmp__name, .cmp__row--primary .cmp__desc { color: var(--pine); }
.cmp__row--primary .cmp__name { font-weight: 650; letter-spacing: -0.045em; }
.cmp__row--primary .cmp__tile { background: var(--pine); color: var(--spark); }
.cmp__row--primary .cmp__tile .owl { width: 44px; height: auto; }
@media (min-width: 48rem) {
  .cmp__table thead th, .cmp__name { font-size: 1rem; line-height: 1.5; }
  .cmp__table tbody th { width: 224px; min-width: 224px; }
}
@media (min-width: 64rem) {
  .cmp { --cmp-bleed: 24px; }
  .cmp { padding-block: 48px; }
  .cmp__head { gap: 8px; margin-bottom: 24px; }
  .cmp__head .eyebrow { font-size: 0.875rem; }
  .cmp__scroll { margin-inline: calc(-1 * var(--cmp-bleed)); padding-inline: var(--cmp-bleed); }
  .cmp__table th, .cmp__table td { padding: 12px; }
  .cmp__table thead th { min-width: 120px; padding-block: 10px; font-family: var(--serif); font-style: normal; font-size: 1.25rem; line-height: 1.2; letter-spacing: 0; }
  .cmp__table tbody th { width: 520px; min-width: 520px; padding-left: 0; }
  .cmp__who { gap: 20px; }
  .cmp__tile { display: grid; width: 48px; height: 48px; border-radius: 8px; }
  .cmp__glyph { width: 26px; height: 26px; }
  .cmp__row--primary .cmp__tile .owl { width: 30px; }
  .cmp__words { gap: 4px; }
  .cmp__name { font-size: 1.25rem; line-height: 1.2; font-weight: 500; letter-spacing: 0.1px; }
  .cmp__row--primary .cmp__name { font-size: 1.375rem; line-height: 1.1; }
  .cmp__desc { display: block; max-width: 440px; font-size: 0.875rem; line-height: 1.43; }
  .cmp__mark { width: 24px; height: 24px; }
}

/* THE FIVE-BOX GRID (Ash's Home handoff, 2026-10-14; components.mjs system()). The head as the four-card grid
   had it: the heading in columns 1-7 with the label over it; the line and the buttons in 9-12, level with the
   heading's first line; 32px to the grid. Two rows, each 23% of the window's height, 210-240px, so the grid stays
   under half of a 1680 x 960 screen (founder, 2026-10-14: "make it shorter"). Boxes 16px apart with 10px corners:
   the tall one in columns 1-4 across both rows, the wide one in 5-9 and the narrow one in 10-12 above (three
   columns, the width of Superside's narrow cards, so its words fit at their size), two of four columns below.
   SUPERSIDE'S VIDEO-PRODUCTION CARDS, measured on superside.com/video-production on 2026-10-14 (founder: "make
   sure this aesthetic of the text stays across all the bento's"): the film or picture fills the box; 16px inside;
   the name at the top left, 24/28 regular (20/26 on a phone); the line 8px under the name, or at the foot in a wide
   box, regular, at 16/24 (Superside sets 18/26 on cards 440px tall; on rows of 210-330px that size spilled four
   service-page cards, so every bento takes 16/24); both in cloud. The type is the service bento's (service.css
   .svb__t, .svb__b), so every bento on the site reads alike. Superside's pictures are made with dark room for the words;
   ours are films and stills, so a soft shade sits behind the words where they are. */
.sys { margin-top: calc(var(--sec) * 0.75); }
/* on the brand's pine (founder, 2026-10-14) */
.sys.band--field { padding-block: 64px 72px; }
.sys__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: start; margin-bottom: 32px; }
.sys__head .h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.17; }
.sys__title { grid-column: 1 / span 7; }
.sys__side { grid-column: 9 / -1; display: grid; gap: 20px; justify-items: start; padding-top: 44px; }
.sys__side .lead { max-width: 600px; font-size: 1rem; line-height: 1.5; }
.sys__grid { --sys-row: clamp(210px, 23vh, 240px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--sys-row)); gap: 16px; }
.sys__box { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 16px; border-radius: var(--r); background: var(--pine-3); color: var(--cloud); }
.sys__box--tall { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.sys__box--wide { grid-column: 5 / span 5; grid-row: 1; }
.sys__box--square { grid-column: 10 / -1; grid-row: 1; }
.sys__box--left { grid-column: 5 / span 4; grid-row: 2; }
.sys__box--right { grid-column: 9 / -1; grid-row: 2; }
.sys__box .film__frame, .sys__pic { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; background: none; }
.sys__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* WHERE THE WORDS GO, AND THE TYPE (founder, 2026-10-14: "analyze the pictures properly and keep the placement of
   the text according to the photos ... You can also make the text a little smaller"). Superside keeps words off
   faces by drawing each picture with an empty, dark corner for them (the Creative Director's teardown of every
   Superside bento: no shade on 190 of 190 cards, the name top-left on 188). Ours are films and stills made for other
   frames, so each box's words go where ITS picture is empty (`place` in data/superside.mjs, from Apple Vision's faces
   and people in every sampled frame), with a shade only where the words sit. Type one step under Superside's for
   boxes half its height: names 20/24 at weight 500 (Superside's, on the <strong> inside its card names), lines 15/22
   at full cloud (Superside's 80% would give back the contrast the shade buys); 18/22 and 14/20 on a phone.
   The shades, the column widths and the two object-positions below belong to TODAY'S pictures: a new picture made
   with empty space for its words (generation brief, that teardown's section 5) can drop them. */
.sys__t { max-width: 380px; font-size: 1.125rem; line-height: 1.375rem; font-weight: 500; letter-spacing: 0.1px; color: inherit; text-wrap: balance; }
.sys__b { max-width: 380px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: inherit; text-wrap: pretty; }
@media (min-width: 48rem) { .sys__t { font-size: 1.25rem; line-height: 1.5rem; } .sys__b { font-size: 0.9375rem; line-height: 1.375rem; } }
.sys__box.is-split .sys__b { margin-top: auto; }
.sys__box.is-foot { justify-content: flex-end; }
.sys__box::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 23, 33, 0.82), rgba(15, 23, 33, 0.62) 42%, rgba(15, 23, 33, 0.18) 72%, rgba(15, 23, 33, 0) 88%); }
/* tall, the Surf Excel film: its faces live in the top half, so the words sit at the foot and the shade rises from the
   foot only. The film is held 30% from its top: measured over every half-second frame at six widths, that leaves a
   face under the words in 2-3 of 53 frames and a head at the edge in 0-2 (10% left 4 under the words at 1680; the
   centre cut heads in up to 16). The cost: the top of the film's burnt-in logo is cropped. */
/* the words keep to the left 64%: people bending into the right of the frame at the foot (0:08, 0:24) stay clear */
.sys__box--tall .sys__t, .sys__box--tall .sys__b { max-width: min(300px, 64%); }
.sys__box--tall .film__frame img, .sys__box--tall .film__frame video { object-position: 50% 30%; }
.sys__box--tall::before { background: linear-gradient(to bottom, rgba(15, 23, 33, 0) 50%, rgba(15, 23, 33, 0.55) 74%, rgba(15, 23, 33, 0.88)); }
/* wide, the NBC film: faces in the middle band, so the name at the top left and the line at the foot, kept narrow */
.sys__box--wide .sys__b { max-width: 300px; }
.sys__box--wide::before { background: linear-gradient(to bottom, rgba(15, 23, 33, 0.76), rgba(15, 23, 33, 0) 34%, rgba(15, 23, 33, 0) 46%, rgba(15, 23, 33, 0.6) 72%, rgba(15, 23, 33, 0.88)); }
/* narrow, HEAT: three phone screens fill it edge to edge; the picture is held at its top so the clean red band sits
   under the name, and it is shaded deep (interim: the picture should be rebuilt with the phones in its lower half) */
.sys__box--square .sys__pic img { object-position: 50% 0%; }
.sys__box--square .sys__b { max-width: 250px; }
.sys__box--square::before { background: linear-gradient(to bottom, rgba(15, 23, 33, 0.86), rgba(15, 23, 33, 0.74) 55%, rgba(15, 23, 33, 0.4)); }
/* left and right, the editor and the woman: each subject fills the right of its picture, so the name sits top left, the
   line at the foot left in a narrow column, and the shade comes from the left only, leaving the subject clean */
.sys__box--left .sys__b { max-width: 210px; }
.sys__box--right .sys__b { max-width: 180px; }
.sys__box--left::before, .sys__box--right::before { background: linear-gradient(to right, rgba(15, 23, 33, 0.72), rgba(15, 23, 33, 0.45) 38%, rgba(15, 23, 33, 0) 62%); }
@media (max-width: 47.99rem) { .sys__box--wide::before { background: linear-gradient(to bottom, rgba(15, 23, 33, 0.84), rgba(15, 23, 33, 0) 36%, rgba(15, 23, 33, 0) 46%, rgba(15, 23, 33, 0.6) 70%, rgba(15, 23, 33, 0.88)); } }
@media (min-width: 103.125rem) { .sys__box { padding: 20px; } }
@media (max-width: 63.99rem) { .sys__title, .sys__side { grid-column: 1 / -1; padding-top: 0; } }
/* 768-1279: two columns: the tall box beside the wide and the narrow ones, the last two under them */
@media (max-width: 79.99rem) {
  .sys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(220px, 28vw, 300px); }
  .sys__box--tall { grid-column: 1; grid-row: 1 / span 2; }
  .sys__box--wide { grid-column: 2; grid-row: 1; }
  .sys__box--square { grid-column: 2; grid-row: 2; }
  .sys__box--left { grid-column: 1; grid-row: 3; }
  .sys__box--right { grid-column: 2; grid-row: 3; }
}
/* a phone: one column, each box at its picture's own shape (a 16:9 box at 335px wide holds a name and three lines;
   a minimum height here would widen the box through its ratio and push the page sideways) */
@media (max-width: 47.99rem) {
  .sys__head { margin-bottom: 40px; }
  .sys__side .actions { width: 100%; display: grid; }
  .sys__side .btn { width: 100%; }
  .sys__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .sys__box--tall, .sys__box--wide, .sys__box--square, .sys__box--left, .sys__box--right { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; }
  .sys__box--tall { aspect-ratio: 4 / 5; }
  .sys__box--square { aspect-ratio: 1; }
}

/* ---------- motion: 150, 200, 240ms and nothing longer; and off when the visitor asks ---------- */
/* one page hands over to the next with a short cross-fade, where the browser can */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  .ticker__row { animation: none; }
  .reel__col { transform: none; }
  .taped, .hl { transform: none; }
  .btn:hover .ic, .link:hover .ic, .index__row:hover > .ic { transform: none; }
}
@media (forced-colors: active) { .focus em, .hl { background: Highlight; color: HighlightText; } .plate { color: GrayText; } }

/* ---------- the Why Us page (src/pages/about.mjs, route about.html) ----------
   SUPERSIDE'S "OUR CREATIVE TALENT" PAGE, section by section (Ash, 2026-10-15; the Creative Director's Why Us rebuild spec in
   the vault, measured live at 1680, 1440, 1024 and 375). Every size here is the reference's unless a comment says why not.
   Its card cap of 60% of a 1680 x 960 screen is lifted for this page only (Ash, 2026-10-15): tools/check-why-us.mjs holds its
   sizes to the reference instead. The sections open and close on Services' scale (--sx-*, the Services section below):
   208 / 128 / 96 / 88 from 1280, 112 / 80 / 64 / 56 from 768, 80 / 64 / 48 / 44 on a phone (spec section 14). Every rule is
   written `.page--about main:has(> .svh) > …` where it sets a section's padding, so it outranks the template's rhythm. */

/* THE RHYTHM (spec section 14): band m/m · proof b/m · brands b/m · where m/m · promise m/b · range b/s · reason c/b ·
   start 48/s (40 below 1280) · person m/s · closing card m/m · judge b/b */
.page--about main:has(> .svh) > .wy-band { padding-block: var(--sx-m); }
.page--about main:has(> .svh) > .wy-proof { padding-block: var(--sx-b) var(--sx-m); }
.page--about main:has(> .svh) > .wy-brands { padding-block: var(--sx-b) var(--sx-m); }
.page--about main:has(> .svh) > .wy-where { padding-block: var(--sx-m); }
.page--about main:has(> .svh) > .wy-promise { padding-block: var(--sx-m) var(--sx-b); }
.page--about main:has(> .svh) > .wy-range { padding-block: var(--sx-b) var(--sx-s); }
.page--about main:has(> .svh) > .wy-reason { padding-block: var(--sx-c) var(--sx-b); }
.page--about main:has(> .svh) > .wy-start { padding-block: 40px var(--sx-s); }
.page--about main:has(> .svh) > .wy-person { padding-block: var(--sx-m) var(--sx-s); }
.page--about main:has(> .svh) > .wy-judge { padding-block: var(--sx-b); }
@media (min-width: 80rem) { .page--about main:has(> .svh) > .wy-start { padding-top: 48px; } }

/* SUPERSIDE'S SMALLER HEAD STEP, on the proof bento, the brands row and where we work (spec section 14): 48/56 at 1440 with the
   italic at 52/56; 60/72 from 1650; 40/52 at 1024; 28/36 on a phone (36/44 between, by the template's own step) */
.wy-small .h2 { font-size: 1.75rem; line-height: 1.2857; }
@media (min-width: 48rem) { .wy-small .h2 { font-size: 2.25rem; line-height: 1.2222; } }
@media (min-width: 64rem) { .wy-small .h2 { font-size: 2.5rem; line-height: 1.3; } }
@media (min-width: 80rem) { .wy-small .h2 { font-size: 3rem; line-height: 1.1667; } }
@media (min-width: 103.125rem) { .wy-small .h2 { font-size: 3.75rem; line-height: 1.2; } }

/* THE BY THE OWL BAND, moved from Services (Ash, 2026-10-15; the Creative Director's spec, section 21). Its own look, kept:
   the Services block's classes as they are (.sx-sand, its label over a rule, the H2 and the large line, the items with their
   tiles), and only this layout added. No portrait (it stays in the person bento), so the band uses the container. From 1280:
   the label across all twelve columns; under it the H2 and the definition in the left seven, the two items stacked in the
   right five (40 apart), their tops level with the H2's. 768-1279: one column, then the two items side by side (Services'
   own rule). A phone: everything stacked. */
.wy-band__in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.wy-band__words { display: grid; justify-items: start; }
@media (min-width: 80rem) {
  .wy-band__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .wy-band .sx-sand__label { grid-column: 1 / -1; }
  .wy-band__words { grid-column: 1 / span 7; }
  .wy-band .sx-sand__items { grid-column: 8 / -1; grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 0; }
}

/* S1 · THE PROOF BENTO (Superside's "That's us" set; spec sections 5 and 20.1). Two columns of 516 at 1440 (520 from 1650), 24
   apart, the second 80px lower; in it Ash's two figures, each a 384px card beside an 80px tile, and two credit cards in the
   shape of Superside's quote cards. 1024-1279: columns (container - 8) / 2, 8 apart, tiles 48. 768-1023: the same columns, no
   tiles. A phone: one column, 98%, Donatekart, 67%, E1 London (the DOM's order; from 768 the second column is reversed so E1
   London sits on top, where Superside's blue card sits). */
.wy-proof { background: var(--cloud); }
.wy-bento { display: flex; flex-direction: column; gap: 8px; }
.wy-bento__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wy-pair { display: flex; gap: 8px; }
.wy-tile { display: none; }
@media (min-width: 48rem) {
  .wy-bento { flex-direction: row; align-items: flex-start; }
  .wy-bento__col { flex: 1 1 0; }
  .wy-bento__col--b { flex-direction: column-reverse; justify-content: flex-end; padding-top: 80px; }
}
@media (min-width: 64rem) {
  .wy-tile { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r); }
  .wy-tile .glyph { width: 24px; height: 24px; }
  .wy-tile.is-lime { background: var(--spark-2); color: var(--pine); }
  .wy-tile.is-pine { background: var(--pine); color: var(--spark); }
  .wy-pair { align-items: flex-end; }          /* the first figure's tile meets its card's foot */
  .wy-pair--r { align-items: flex-start; }     /* the second's meets its top */
}
@media (min-width: 80rem) {
  .wy-bento { width: 1056px; max-width: 100%; margin-inline: auto; gap: 24px; }
  .wy-bento__col { gap: 24px; }
  .wy-pair { gap: 24px; justify-content: flex-end; }
  .wy-pair--r { justify-content: flex-start; }
  .wy-tile { width: 80px; height: 80px; }
  .wy-tile .glyph { width: 40px; height: 40px; }
}
@media (min-width: 103.125rem) { .wy-bento { width: 1064px; } }

/* a figure card: Superside's stat card, on cloud-3, the figure in Instrument Serif (60/60 on a phone, 80/80 at 1024, 96/96
   at 1440, 126/126 from 1650 so the card keeps Superside's 384 x 272 there), its caption (16/24; 18/26 at most 320px from
   1280) and, 8px under it, the line that says the figure is Ash's (14/21.6, pine at 72%) */
.wy-fig { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding: 16px; border-radius: var(--r); background: var(--cloud-3); color: var(--pine); }
.wy-fig__n { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 3.75rem; line-height: 1; letter-spacing: 0; font-variant-numeric: lining-nums; color: var(--pine); }
.wy-fig__c { font-size: 1rem; line-height: 24px; color: var(--pine); text-wrap: pretty; }
.wy-fig__a { margin-top: 8px; font-size: 0.875rem; line-height: 21.6px; color: rgba(18, 29, 42, 0.72); }
@media (min-width: 64rem) { .wy-fig { padding: 24px; } .wy-fig__n { font-size: 5rem; } .wy-fig__c { max-width: 320px; } }
@media (min-width: 80rem) { .wy-fig { flex: 0 0 384px; padding: 32px; } .wy-fig__n { font-size: 6rem; } .wy-fig__c { font-size: 1.125rem; line-height: 26px; } }
@media (min-width: 103.125rem) { .wy-fig__n { font-size: 7.875rem; } }

/* THE ROLL (Superside's counters, measured: each digit a column of 0-9 rolled into place in about a second as the figure
   enters view, a decaying ease, no overshoot). The figure itself is text in a .sr span; the columns are drawn by the
   stylesheet, so they add no digit to the page's text. Each column is as wide as its own final digit, and rests on it by
   default: with no script, or for a visitor who asks for less motion, the figure is simply there. site.js 6h sets a figure
   that starts below the window to 0 (.is-waiting) and lets it roll when it comes into view, 40ms a digit. */
.wy-roll { display: inline-flex; align-items: flex-start; vertical-align: top; }
.wy-roll__d { position: relative; display: inline-block; height: 1em; clip-path: inset(-0.075em -0.6em); }
.wy-roll__d::after { content: attr(data-d); visibility: hidden; }
.wy-roll__d::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; position: absolute; left: 50%; top: 0; text-align: center;
  transform: translate(-50%, calc(var(--d) * -1em)); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 40ms); }
.wy-roll__u::after { content: attr(data-u); }
.is-waiting .wy-roll__d::before { transform: translate(-50%, 0); transition: none; }
@media (prefers-reduced-motion: reduce) { .wy-roll__d::before { transition: none !important; } }

/* a credit card: Superside's quote card holding a credit, not a quote (Ash, 2026-10-15): the client's line (24/28, 40 inside),
   then the foot: a still from their own film, 200 x 200, flush to the card's bottom-left corner; 32px right of it the tag
   (18/26 at 600) and the client's mark 32px under it, in the card's ink. The name is the card's h3, first in the markup so a
   screen reader meets it first; from 1280 the mark carries it (the h3 is then read, not shown), below 1280 it shows as text
   and the mark goes. Below 1280: the line 16/24 at 16 inside, the still 96 x 96. No quotation marks, no person. */
.wy-credit { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto 1fr;
  grid-template-areas: "line line" "inset ." "inset tag" "inset name" "inset mark" "inset ."; column-gap: 16px; border-radius: var(--r); overflow: hidden; }
.wy-credit.is-pine { background: var(--pine); color: var(--spark); }
.wy-credit.is-leaf { background: var(--leaf); color: var(--mint); }
.wy-credit__line { grid-area: line; padding: 16px; font-size: 1rem; line-height: 24px; text-wrap: pretty; }
.wy-credit__inset { grid-area: inset; display: block; width: 96px; height: 96px; object-fit: cover; object-position: 50% 50%; }
.wy-credit__tag { grid-area: tag; font-size: 1rem; line-height: 1.5; font-weight: 600; }
.wy-credit__name { grid-area: name; font-size: 1rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: inherit; }
.wy-credit__mark { grid-area: mark; display: none; }
@media (min-width: 80rem) {
  .wy-credit { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; }
  .wy-credit__line { padding: 40px; font-size: 1.5rem; line-height: 28px; }
  .wy-credit__inset { width: 200px; height: 200px; }
  .wy-credit__tag { font-size: 1.125rem; line-height: 26px; }
  .wy-credit__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wy-credit__mark { display: block; width: var(--w); height: var(--h); margin-top: 32px; background: currentColor;
    -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
}
@media (forced-colors: active) { .wy-credit__mark { background: CanvasText; } }

/* S2 · THE BRANDS ROW (Superside's "talent recruited from top brands"; Ash, 2026-10-15: "show the big brands that we have worked
   with"): the eleven, each its live logo drawn in cloud on a pine-2 tile, its name (20/24 at 500) and the work (16/24 at 50%),
   in a row the window's width that slides left at Superside's measured 124px a second. Tiles 200 at 1440 (pitch 224), 300 from
   1650 (pitch 396), 150 below 1280 (pitch 166). The list is printed twice in one track and the track moves by half its width,
   so the loop has no seam; the second copy is hidden from screen readers. It stops on hover, while anything in it has focus,
   and with the films' pause control (html.is-films-paused); for a visitor who asks for less motion it stands still and
   scrolls sideways instead, from the container's left edge. Every logo is drawn at one area, Home's strip's own rule. */
.wy-brands .sv__head { margin-bottom: 40px; }
.wy-brands .sv__lead { color: rgba(244, 247, 251, 0.8); }
@media (min-width: 48rem) { .wy-brands .sv__head { margin-bottom: 64px; } }
@media (min-width: 64rem) { .wy-brands .sv__head { margin-bottom: 80px; } }
.wy-brands__row { --tile: 150px; --pn: 166; --s: 0.75; overflow: hidden; }
@media (min-width: 80rem) { .wy-brands__row { --tile: 200px; --pn: 224; --s: 1; } }
@media (min-width: 103.125rem) { .wy-brands__row { --tile: 300px; --pn: 396; --s: 1.5; } }
.wy-brands__row:focus-visible { outline-offset: -2px; }
.wy-brands__track { display: flex; width: max-content; animation: wy-brands calc(var(--n) * var(--pn) / 124 * 1s) linear infinite; }
.wy-brands__row:hover .wy-brands__track, .wy-brands__row:focus-within .wy-brands__track, html.is-films-paused .wy-brands__track { animation-play-state: paused; }
@keyframes wy-brands { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.wy-brands__set { display: flex; align-items: flex-start; }
.wy-brand { flex: none; width: var(--tile); margin-right: calc(var(--pn) * 1px - var(--tile)); }
.wy-brand__tile { display: grid; place-items: center; width: var(--tile); aspect-ratio: 1; border-radius: var(--r); background: var(--pine-2); }
.wy-brand__mark { display: block; width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); background: var(--cloud);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.wy-brand__name { margin-top: 16px; font-size: 1.25rem; line-height: 24px; font-weight: 500; color: var(--cloud); }
.wy-brand__title { margin-top: 4px; font-size: 1rem; line-height: 24px; color: rgba(244, 247, 251, 0.5); }
@media (min-width: 80rem) { .wy-brand__name { margin-top: 24px; } }
@media (forced-colors: active) { .wy-brand__mark { background: CanvasText; } }
@media (prefers-reduced-motion: reduce) {
  .wy-brands__track { animation: none !important; }
  .wy-brands__set[aria-hidden="true"] { display: none; }
  .wy-brands__row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--margin), (100% - var(--max)) / 2);
    padding-inline: max(var(--margin), (100% - var(--max)) / 2); }
  .wy-brand { scroll-snap-align: start; }
  .wy-brand:last-child { margin-right: 0; }
}

/* S3 · WHERE WE WORK (Superside's "our global team" card; spec section 7). With no photograph (now): one leaf card, the words on
   the left and the three pills on the right, as before. Either way the pills are Superside's glass: cloud at 10% over a 16px
   blur, 16 inside, a 64px tile with a 1px ring and a 32px glyph, the label 24/28 from 1280 (18/26 below), 8 apart. They fade
   in as the card arrives (300ms each, 200ms apart, from 250ms; site.js 6h), and stand at once for less motion. WITH A
   PHOTOGRAPH (Ash's pick; WHY_US.where.photo): the card is Superside's: the photograph across the whole card, 1224 x 731 at
   1440 (it grows if the words need it), the words and the pills in its left seven columns over a shade from the left; at
   1024-1279 the photograph inset at the top (880 x 400) and the words and pills under it; on a phone 303 x 200. */
.wy-where__card { display: grid; gap: 32px; padding: 32px 20px; border-radius: var(--r); background: var(--leaf); }
.wy-where__head { display: grid; gap: 16px; justify-items: start; }
.wy-where__head .h2 { max-width: 18ch; }
.wy-where__words { display: grid; gap: 24px; align-content: start; }
.wy-where__body { display: grid; gap: 16px; max-width: 62ch; font-size: 1rem; line-height: 1.5; color: var(--text); }
.wy-where__body p { text-wrap: pretty; }
.wy-where__photo { display: none; }
.wy-pills { display: grid; gap: 8px; align-content: center; }
.wy-pill { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r); background: rgba(244, 247, 251, 0.1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 1.125rem; line-height: 26px; color: var(--ink); }
.wy-pill__ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(244, 247, 251, 0.22); }
.wy-pill__ic .glyph { width: 32px; height: 32px; }
.wy-pills[data-arrive] .wy-pill { transition: opacity 300ms linear; }
.wy-pills[data-arrive] .wy-pill:nth-child(1) { transition-delay: 250ms; }
.wy-pills[data-arrive] .wy-pill:nth-child(2) { transition-delay: 450ms; }
.wy-pills[data-arrive] .wy-pill:nth-child(3) { transition-delay: 650ms; }
.wy-pills.is-waiting .wy-pill { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .wy-pills[data-arrive] .wy-pill { transition: none !important; } }
@media (min-width: 64rem) {
  .wy-where__card { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 48px; }
  .wy-where__words { grid-column: 1 / span 7; }
  .wy-where__body { font-size: 1.125rem; line-height: 1.444; }
  .wy-pills { grid-column: 9 / -1; }
}
@media (min-width: 80rem) { .wy-pill { font-size: 1.5rem; line-height: 28px; } }
/* the photograph's states */
.wy-where__card.is-pictured { padding: 16px; }
.is-pictured .wy-where__photo { display: block; width: 100%; height: auto; aspect-ratio: 303 / 200; object-fit: cover; border-radius: 8px; }
@media (min-width: 64rem) {
  .wy-where__card.is-pictured { padding: 32px; }
  .is-pictured .wy-where__photo { grid-column: 1 / -1; aspect-ratio: 880 / 400; }
  .is-pictured .wy-pills { grid-column: 1 / span 7; }
}
@media (min-width: 80rem) {
  .wy-where__card.is-pictured { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1224 / 731; align-content: start; padding: 48px; }
  /* grid-column back to auto: a grid child placed by line takes its grid area as its containing block, which stops at the
     card's padding; placed auto, it takes the padding box and fills the card edge to edge */
  .is-pictured .wy-where__photo { position: absolute; inset: 0; z-index: -2; grid-column: auto; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .wy-where__card.is-pictured::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(18, 29, 42, 0.72) 0%, rgba(18, 29, 42, 0) 60%); }
}

/* S4 · THE PROMISES (Superside's timeline; spec section 8): each step's label in small capitals over its name, the names at 600
   on this page (Superside's are visibly bold; the service pages share the timeline and keep theirs), the button under the
   heading as Superside sets "Book a demo". No figures under the button (Ash did not take "10-bit" or "2"). */
.wy-year { margin-bottom: -4px; font-size: 0.75rem; line-height: 1.533; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-text); }
@media (min-width: 64rem) { .wy-year { font-size: 0.875rem; line-height: 1.543; } }
.wy-promise .svt__head .actions { margin-top: 16px; }
.wy-promise .svt__t { font-weight: 600; }

/* S5 · THE RANGE (Superside's "across every discipline" split; spec section 9; Ash, 2026-10-15: the showreel replaces the three
   films): his words on the left, the site's showreel on the right, 16:9 with 10px corners, 580 x 326 at 1440. Pressed, its
   button opens the showreel's own player; nothing plays with sound by itself. Stacked below 1280, as Superside stacks at
   1024: the words, then the showreel the container's width. The button is centred across the poster and held in its lower
   part: the poster's face and its burnt-in name fill the middle (tools/check-why-us.mjs reads the face with Vision). */
.wy-range .svi__in { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 80rem) { .wy-range .svi__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } }
.wy-reel { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; }
.wy-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wy-reel .btn { position: absolute; left: 50%; top: 77%; transform: translate(-50%, -50%); }
.wy-reel .btn:hover { transform: translate(-50%, -50%); }

/* S6 · THE REASON (Superside's "fully managed" split, its picture a square dark card of its team; spec sections 10 and 20.5): the
   crew by role, the owl at the centre. A pine square, 580 at 1440, 33 inside, a 3 x 3 grid 27 apart of pine-2 tiles, each a
   32px lime glyph over the role (14/20, cloud); every size scales with the card. The card comes before the words at every
   width; below 1024 it is at most 560 wide, centred. */
.wy-crewcard { container-type: inline-size; display: block; width: 100%; max-width: 560px; margin-inline: auto; order: -1; }
@media (min-width: 64rem) { .wy-crewcard { max-width: none; } }
.wy-crewgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(27cqw / 5.8); padding: calc(33cqw / 5.8); border-radius: var(--r); background: var(--pine); }
.wy-crewgrid__cell { display: grid; place-content: center; justify-items: center; gap: calc(8cqw / 5.8); aspect-ratio: 1; min-width: 0; padding: 4px; border-radius: 6px; background: var(--pine-2); text-align: center; }
.wy-crewgrid__g { display: block; color: var(--spark); }
.wy-crewgrid__g .glyph { width: calc(32cqw / 5.8); height: calc(32cqw / 5.8); }
.wy-crewgrid__t { font-size: max(0.75rem, calc(14cqw / 5.8)); line-height: 1.43; color: var(--cloud); text-wrap: balance; }
.wy-crewgrid__owl { color: var(--spark); }
.wy-crewgrid__owl .owl { width: calc(64cqw / 5.8); height: auto; }
.wy-split__close { color: var(--ink); font-weight: 500; }

/* S8 · THE PERSON YOU BRIEF (Superside's five-card profile; spec section 12): three columns of 397 at 1440, two rows of at least
   444, 16 apart, 16 inside; all five cards dark. His portrait across both rows with his words at its foot, over a shade that
   starts 120px above the name (his face is at the photograph's top: the reverse of Superside's, whose words sit in its
   sky); what to come to him for, with his three facts as tiles; his line; his three facets; who is on a job.
   1024-1279: two columns, the portrait across two rows of at least 380 (464 x 776). Below 1024: one column, and the portrait
   is Superside's split card: the photograph at its own 3:4 (at most 520 tall), his words on a pine band under it. */
.wy-pb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wy-pb__card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r); overflow: hidden; color: var(--cloud); }
.wy-pb__photo { margin: 0; padding: 0; gap: 0; background: var(--pine); }
.wy-pb__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: 520px; object-fit: cover; object-position: 60% 25%; }
.wy-pb__id { display: grid; gap: 8px; padding: 16px; background: var(--pine); }
.wy-pb__name { font-family: var(--serif); font-size: 2.25rem; line-height: 1.1111; }
.wy-pb__role { font-size: 1.125rem; line-height: 1.444; font-weight: 700; }
.wy-pb__bio { font-size: 1.125rem; line-height: 1.444; }
.wy-pb__eb { font-size: 0.875rem; line-height: 1.543; letter-spacing: 0.15em; text-transform: uppercase; color: var(--spark); }
.wy-pb__h { font-size: 1.5rem; line-height: 1.1667; font-weight: 400; letter-spacing: 0.1px; color: var(--cloud); text-wrap: pretty; }
.wy-pb__go { background: var(--pine); }
.wy-pb__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; }
.wy-pb__facts li { display: grid; align-content: space-between; gap: 8px; min-height: 120px; padding: 12px; border-radius: 8px; background: var(--pine-2); }
.wy-pb__fc { font-size: 0.8125rem; line-height: 1.3846; color: rgba(244, 247, 251, 0.8); }
.wy-pb__fn { font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: var(--spark); font-variant-numeric: lining-nums; }
.wy-pb__one { background: var(--leaf); }
.wy-pb__line { margin-top: auto; font-size: 1.75rem; line-height: 1.1429; color: var(--spark); text-wrap: pretty; }
.wy-pb__facets { gap: 14px; background: var(--pine-2); }
.wy-pb__crew { background: var(--pine-deep); }
.wy-pb__lab { font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.15em; text-transform: uppercase; color: var(--spark); }
.wy-pb__facets p:not(.wy-pb__lab), .wy-pb__list p:not(.wy-pb__lab), .wy-pb__lead { font-size: 0.9375rem; line-height: 1.4667; color: rgba(244, 247, 251, 0.86); text-wrap: pretty; }
.wy-pb__list { display: grid; gap: 14px; }
@media (min-width: 64rem) {
  .wy-pb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(380px, auto); }
  .wy-pb__eb { font-size: 1rem; line-height: 1.5; }
  .wy-pb__photo { grid-row: span 2; justify-content: flex-end; }
  .wy-pb__photo img { position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; object-position: 80% 50%; }
  .wy-pb__id { position: relative; padding: 120px 16px 16px; background: linear-gradient(to top, rgba(18, 29, 42, 0.92) 0%, rgba(18, 29, 42, 0.86) 62%, rgba(18, 29, 42, 0) 100%); }
}
@media (min-width: 80rem) { .wy-pb { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(444px, auto); } }

/* ---------- the Services page (src/pages/services.mjs, route services.html) ----------
   SUPERSIDE'S "AI EXCELLENCE" PAGE, section for section (founder, 2026-10-14: "I gave you the reference link for the
   service page, but you did not follow"). Measured live on 2026-10-14 in headless Chrome at 1680, 1440, 1024, 768
   and 375 (tools/reference/). Every size here is theirs unless a comment says why not. Their container is 1216 at
   1440 (ours 1224). Their sections open and close on one scale: 208 / 128 / 96 / 88px from 1280, 112 / 80 / 64 / 56
   from 768, 80 / 64 / 48 / 44 on a phone. */
/* the same scale on Why Us (the Creative Director's Why Us rebuild spec, section 14: superside.com/our-creative-talent opens and
   closes its sections on these values at every width measured) */
.page--services, .page--about { --sx-b: 80px; --sx-m: 64px; --sx-c: 48px; --sx-s: 44px; }
@media (min-width: 48rem) { .page--services, .page--about { --sx-b: 112px; --sx-m: 80px; --sx-c: 64px; --sx-s: 56px; } }
@media (min-width: 80rem) { .page--services, .page--about { --sx-b: 208px; --sx-m: 128px; --sx-c: 96px; --sx-s: 88px; } }

/* ---------- SERVICES ON SUPERSIDE.COM/ENTERPRISE (2026-10-19), stage 1: the opening, the brand cards, the logo strip ----------
   The Creative Director's measured spec (vault creative_director_services_enterprise_spec.md §1, measured live at 1440 and 375;
   other widths INFERRED) with Ash's V1 to V4. Enterprise's grounds (V1): these three on cloud. */
/* 0 · THE OPENING, as superside.com's home hero (stage 6; Ash's V10 supersedes V2; the Creative Director's spec §10): full-bleed
   pine; at least 753 tall from 1280 with the words centred in it. The words in a 600 column at the container's left, today's
   sizes: the H1 36/44 on a phone, 48/56 from 768, 56/64 from 1024 and 60/72 from 1280, in the site's mint, its serif accent as
   the site draws every one (4px larger); the lead 18/26 at 80% in cloud; the buttons as the site draws them on pine (the spark
   one, the line link in cloud). The crumb in cloud at 60%. */
.sx-open { position: relative; overflow: hidden; background: var(--pine); color: var(--cloud); padding-block: var(--sx-m) 40px; }
.sx-open__in { position: relative; z-index: 1; pointer-events: none; }   /* the container spans the wall's side: the pointer must reach the wall (it pauses on hover) */
.sx-open__words { pointer-events: auto; }
.sx-open__words { display: grid; justify-items: start; max-width: 600px; }
.sx-open__h { margin-top: 16px; font-size: 2.25rem; line-height: 1.2222; font-weight: 500; letter-spacing: 0.1px; color: var(--mint); text-wrap: balance; }
.sx-open__h2 { margin-top: 12px; font-size: 2rem; line-height: 1.2; font-weight: 500; letter-spacing: 0.1px; color: var(--mint); text-wrap: balance; }
.sx-open__lead { max-width: 600px; margin-top: 24px; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 251, 0.8); text-wrap: pretty; }
.sx-open__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
@media (max-width: 47.99rem) { .sx-open__actions { width: 100%; } .sx-open__actions .btn { width: 100%; } }
@media (min-width: 48rem) { .sx-open__h2 { font-size: 2.5rem; line-height: 1.15; } .sx-open__h { font-size: 3rem; line-height: 1.1667; } .sx-open__lead { font-size: 1.125rem; line-height: 1.444; } }
@media (min-width: 64rem) { .sx-open__h2 { font-size: 3rem; line-height: 1.1667; } .sx-open__h { font-size: 3.5rem; line-height: 1.1429; } }
@media (min-width: 80rem) {
  .sx-open { display: grid; align-items: center; min-height: 753px; padding-block: 64px; }
  .sx-open__h { font-size: 3.75rem; line-height: 1.2; }
}

/* THE NEW OPENER (Ash, 2026-10-24). From 768 his picture fills the section behind the words (the owl on the right, the clear sky on
   the left, the picture held to the right and a little below its top); on a phone the words come first and the picture follows
   under them at its own shape, cropped to the owl. Dark ink on the pale sky; no scrim unless a pair measured under 4.5:1. */
.sx-hero { position: relative; isolation: isolate; background: #E9EEF4; color: var(--ink); }
.sx-hero__in { position: relative; z-index: 1; padding-block: var(--sx-m) 32px; }
.sx-hero__words { display: grid; justify-items: start; max-width: 600px; }
.sx-hero__h { margin-top: 0; font-size: 2.25rem; line-height: 1.2222; font-weight: 500; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.sx-hero__lead { max-width: 600px; margin-top: 24px; font-size: 1rem; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.sx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.sx-hero__pic { display: block; }
.sx-hero__pic img { display: block; width: 100%; height: auto; aspect-ratio: 750 / 684; object-fit: cover; object-position: 50% 50%; }
/* no breadcrumb above the heading since 2026-10-27 (Ash): on a phone the heading is 24px under the header, as the service openings are */
@media (max-width: 47.99rem) { .sx-hero { display: flex; flex-direction: column; } .sx-hero__in { padding-top: 24px; } .sx-hero__pic { order: 2; } .sx-hero__actions { width: 100%; } .sx-hero__actions .btn { width: 100%; } }
@media (min-width: 48rem) {
  .sx-hero { min-height: clamp(520px, 46vw, 700px); display: grid; align-items: center; }
  .sx-hero__pic { position: absolute; inset: 0; z-index: -1; }
  .sx-hero__pic img { height: 100%; aspect-ratio: auto; object-position: 100% 22%; }
  .sx-hero__in { padding-block: 64px; }
  .sx-hero__h { font-size: 3rem; line-height: 1.1667; }
  .sx-hero__lead { font-size: 1.125rem; line-height: 1.444; }
}
@media (min-width: 64rem) { .sx-hero__h { font-size: 3.5rem; line-height: 1.1429; } }
@media (min-width: 80rem) { .sx-hero__h { font-size: 3.75rem; line-height: 1.2; } }

/* the wall: from 1280 three columns on the right, 576 wide at 1440 (the reference's: 80 past the container's right edge, 32 from
   the screen's), the stage's full height, 16 between columns and tiles, radius 10; narrower where the words' column (600) needs
   104 clear (480 at 1280). The columns run at 25 px/s, the outer two down and the middle one up, started at 0, -108 and -216 so no
   edges line up, under a vertical fade over the top and foot 25%. Below 1280 it is two rows under the words, 24 clear, tiles 140 x
   200 with a pitch of 156, one row left and one right, full-bleed, with a side fade from 768 (20% at each edge) and none below.
   A tile is a poster, as a background, over a clip the site's loader plays (one per column or row). Held on hover and under the
   films' pause; still with less motion. */
.sx-wall { --wallw: min(576px, calc(100vw - 32px - ((100vw - min(var(--max), 100vw - 2 * var(--margin))) / 2 + 600px + 104px))); pointer-events: auto; }
.sx-wall__cols { display: none; }
.sx-wall__rows { display: grid; gap: 16px; margin-top: 24px; }
.sx-wall__row { overflow: hidden; height: 200px; }
.sx-wall__col { overflow: hidden; min-width: 0; }
.sx-wall__track { display: flex; width: max-content; animation: sx-wall-x var(--dur) linear infinite; }
.sx-wall__row[style*="right"] .sx-wall__track { animation-name: sx-wall-x-r; }
.sx-wall__row .sx-tile { flex: none; width: 140px; height: 200px; margin-right: 16px; }
@keyframes sx-wall-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--set)), 0, 0); } }
@keyframes sx-wall-x-r { from { transform: translate3d(calc(-1 * var(--set)), 0, 0); } to { transform: translate3d(0, 0, 0); } }
.sx-wall:hover .sx-wall__track, html.is-films-paused .sx-wall__track { animation-play-state: paused; }
@media (min-width: 48rem) { .sx-wall__rows { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } }
@media (min-width: 80rem) {
  .sx-wall { position: absolute; top: 0; bottom: 0; right: 32px; width: var(--wallw);
    -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
  .sx-wall__rows { display: none; }
  .sx-wall__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 100%; }
  .sx-wall__col { height: 100%; }
  .sx-wall__track { display: block; width: auto; margin-top: var(--o); animation-name: sx-wall-y; }
  .sx-wall__col[style*="up"] .sx-wall__track { animation-name: sx-wall-y-up; }
  .sx-wall__col .sx-tile { width: 100%; margin-bottom: 16px; }
  .sx-wall__col .sx-tile.is-wide { height: 200px; }
  .sx-wall__col .sx-tile.is-up { height: 266.7px; }
}
@keyframes sx-wall-y { from { transform: translate3d(0, calc(-1 * var(--set)), 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes sx-wall-y-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-1 * var(--set)), 0); } }
@media (prefers-reduced-motion: reduce) { .sx-wall__track { animation: none !important; } }   /* the columns stand at their start offsets; the films show their posters (the loader, with less motion) */
.sx-tile { position: relative; border-radius: var(--r); overflow: hidden; }
.sx-tile .film__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: var(--pine-2); }
.sx-tile .film__still { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; }
.sx-tile .film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a letterboxed file, scaled to the picture inside its bars (the opening's method, svh__film) */
.sx-tile.is-boxed { --hx: 0.5; --hy: 0.5; }   /* where the crop sits in the tile, as fractions (0 = its left or top edge at the tile's, 1 = right or foot); 0.5 is centred; set on the tile so a tile's own --hx (WALL_HOLD) wins and the children inherit it (Codex, call 4) */
.sx-tile.is-boxed .film__frame { container-type: size; }
.sx-tile.is-boxed .film__still, .sx-tile.is-boxed .film__frame video { inset: auto; max-width: none; object-fit: fill; background-size: 100% 100%;
  --vw: max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch)));
  width: var(--vw); height: calc(var(--vw) / var(--fa));
  left: calc((100cqw - var(--cw) * var(--vw)) * var(--hx) - var(--cx) * var(--vw)); top: calc((100cqh - var(--ch) * var(--vw) / var(--fa)) * var(--hy) - var(--cy) * var(--vw) / var(--fa)); }
/* a wall film whose burnt-in caption is wider than the tile's window: the whole picture stands in the tile, on the tile's ground (a caption is wholly in or wholly out, never cut) */
.sx-tile.is-contain .film__still { background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
.sx-tile.is-contain .film__frame video { object-fit: contain; }

/* A WALL OF LINKS (Documentary's intro, Ash 2026-10-26: "make sure it is clickable"; service-template.mjs svcFilmWall). The Services
   wall above, with each tile a link to the film's full version: the whole tile is the target, a round play mark shows on hover and on
   focus (always, a little smaller, where there is no hover), and the wall holds still while a tile has the keyboard's focus, as it
   does under the pointer. site.js 6i opens the film in the player below. */
.sx-tile__go { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: var(--r); color: var(--pine); cursor: pointer; }
.sx-tile__go .ic { width: 48px; height: 48px; padding: 15px 14px 15px 16px; border-radius: 50%; background: var(--spark); opacity: 0; transform: scale(0.85); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.sx-tile__go:hover .ic, .sx-tile__go:focus-visible .ic { opacity: 1; transform: none; }
.sx-tile__go:focus-visible { outline: 3px solid var(--spark); outline-offset: -3px; }
.sx-wall:focus-within .sx-wall__track { animation-play-state: paused; }
@media (hover: none) { .sx-tile__go .ic { width: 36px; height: 36px; padding: 11px 10px 11px 12px; opacity: 0.92; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sx-tile__go .ic { transition: none; } }
/* the words beside the wall: the intro's large line, then its passage, in the section's paragraph style */
.svi-wall__line { color: var(--cloud); }
.svi-wall .sx-open__lead + .sx-open__lead { margin-top: 16px; }
/* the player: the showreel's dialog (.showreel), as wide as the screen allows at the film's own shape (--ar, set as it opens) */
.ytp { width: min(1200px, calc(100vw - 32px), calc((100vh - 32px) * var(--ar, 1.7778))); }
.ytp__stage { position: relative; aspect-ratio: var(--ar, 1.7778); background: #000; }
.ytp__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* a film that opens its full version (site.js 6i marks it): the hand shows it can be pressed; the ring keeps its own grab */
[data-yt-host]:not(.svx [data-yt-host]) { cursor: pointer; }

/* the brand cards: enterprise's client cards. 464 wide from 1024 (enterprise's 464.5), 240 below; 16 apart; every other card
   80 lower from 1024 (enterprise's 1440 stagger; none on its phone). Padding 32 (16 below 1024); the name in the serif, 48/56
   (24/28 below 1024); the line in one chip 16 under it: 12/18.4, a 1px border in the text's colour, 2 / 8
   inside, fully round, the text at 80%. Grounds in turn: pine, sand, leaf, cloud-3; cloud ink on the dark two, pine on the
   light two. The row: 32 above the cards and 128 below (8 of them breathing room for the tilt), sliding left to right at 100 px
   a second; on hover a card tilts 1 degree in 0.7 s (enterprise's, without its picture's zoom). */
.sx-brands { padding-block: 24px var(--sx-m); background: var(--cloud); }
.sx-brands__row { --card: 240px; --pn: 256; --drop: 0px; overflow: hidden; padding-block: 8px; }
@media (min-width: 64rem) { .sx-brands__row { --card: 464px; --pn: 480; --drop: 80px; } }
.sx-brands__row:focus-visible { outline-offset: -2px; }
.sx-brands__track { display: flex; width: max-content; animation: sx-brands calc(var(--n) * var(--pn) / 100 * 1s) linear infinite; }
.sx-brands__row:hover .sx-brands__track, .sx-brands__row:focus-within .sx-brands__track, html.is-films-paused .sx-brands__track { animation-play-state: paused; }
@keyframes sx-brands { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.sx-brands__set { display: flex; align-items: flex-start; padding-bottom: var(--drop); }
/* V8 (Ash, 2026-10-19): enterprise's tall card, at the Creative Director's sizes (spec §9.2): 464 x 576 from 1024 (12 under
   enterprise's 588, inside Ash's 60% of a 1680 x 960 screen), 240 x 372 below, no stagger below 1024. The film on top, cover,
   filling what the panel leaves (415.6 over a one-line name at 1440, 359.6 over the two-line one); the name and the chip on the
   card's ground under it, never on the film. A brand with no film on the site keeps the flat card at that height, its words at
   the foot. Hover: the 1 degree tilt, and the film zooms 3.5% (enterprise's). */
.sx-brands__row { --ch: 372px; }
@media (min-width: 64rem) { .sx-brands__row { --ch: 576px; } }
.sx-brand { flex: none; display: flex; flex-direction: column; align-items: stretch; width: var(--card); height: var(--ch); margin-right: calc(var(--pn) * 1px - var(--card)); overflow: hidden;
  border-radius: var(--r); transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1); }
.sx-brand__panel { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; }
.sx-brand:not(.has-film) .sx-brand__panel { margin-top: auto; }
/* a brand with no film on the site keeps the FLAT card (Ash's V8; the spec's 1.2): 216 tall from 1024 (a 32 panel over the
   two-line name, the longest), 140 below; same row, same pitch, same ground rotation and stagger as the tall ones */
.sx-brands__row { --fh: 140px; }
@media (min-width: 64rem) { .sx-brands__row { --fh: 216px; } }
.sx-brand:not(.has-film) { height: var(--fh); }
.sx-brand__film { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sx-brand__film .film, .sx-brand__film .film__frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.sx-brand__film .film__still { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1); }
.sx-brand:hover .sx-brand__film .film__still { transform: scale(1.035); }
.sx-brand__film .film__frame img, .sx-brand__film .film__frame video { transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1), opacity 200ms linear; }
.sx-brand:hover .sx-brand__film .film__frame img, .sx-brand:hover .sx-brand__film .film__frame video { transform: scale(1.035); }
.sx-brand:nth-child(even) { transform: translateY(var(--drop)); }
.sx-brand:hover { transform: rotate(1deg); }
.sx-brand:nth-child(even):hover { transform: translateY(var(--drop)) rotate(1deg); }
.sx-brand.is-pine { background: var(--pine); color: var(--cloud); }
.sx-brand.is-sand { background: var(--sand); color: var(--pine); }
.sx-brand.is-leaf { background: var(--leaf); color: var(--cloud); }
.sx-brand.is-cloud3 { background: var(--cloud-3); color: var(--pine); }
.sx-brand__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1667; font-weight: 400; text-wrap: balance; }
.sx-brand__chip { margin-top: 16px; padding: 2px 8px; border: 1px solid; border-radius: 999px; font-size: 0.75rem; line-height: 18.4px; }
.sx-brand.is-pine .sx-brand__chip, .sx-brand.is-leaf .sx-brand__chip { color: rgba(244, 247, 251, 0.8); border-color: var(--cloud); }
.sx-brand.is-sand .sx-brand__chip, .sx-brand.is-cloud3 .sx-brand__chip { color: rgba(18, 29, 42, 0.8); border-color: var(--pine); }
@media (min-width: 64rem) { .sx-brand__panel { padding: 32px; } .sx-brand__name { font-size: 3rem; line-height: 1.1667; } }
@media (prefers-reduced-motion: reduce) {
  .sx-brands__track { animation: none !important; }
  .sx-brands__set[aria-hidden="true"], .sx-brands__set .sx-brand:nth-child(n + 12) { display: none; }
  .sx-brands__row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--margin), (100% - var(--max)) / 2); }
  .sx-brands__set { padding-inline: max(var(--margin), (100% - var(--max)) / 2); }
  .sx-brand { scroll-snap-align: start; transition: none; }
}

/* the logo strip: enterprise's logo grid. The eleven marks in rows of six and five (three a row on a phone), centred, each in a
   201-wide cell (114 on a phone), the rows 89 apart (enterprise's 1440 pitch; 48 on a phone); 128 below (64 on a phone). Drawn
   by mask in the ink at Home's strip's one area (Home sets its marks at 0.8 of it; 0.7 on a phone). */
/* 1 · THE SAND BLOCK. 1440: the words in the left half of the container (608, 48px clear on their right), 48px above
   and below them; the picture from the middle of the container to the window's right edge, top to bottom of the
   block, cover. The label over a 1px rule, 12px under it, 32px to the heading (48/56; 28/36 on a phone), 32px to the
   large line (28/36; 22/28), 56px to the items: two columns of 248, 64 apart (one column on a phone), each a 48px
   tile and its paragraph (18/26 at 60%; 16/24). On a phone the picture follows the words, edge to edge. */
.sx-sand { background: var(--sand); color: var(--pine); --ink: var(--pine); --text: var(--text); }
.sx-sand__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.sx-sand__words { display: grid; justify-items: start; align-content: center; padding: 48px var(--margin); }
.sx-sand__label { width: 100%; padding-bottom: 12px; margin-bottom: 32px; border-bottom: 1px solid var(--pine); font-size: 0.875rem; line-height: 1.543; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); }
.sx-sand .h2 { font-size: 1.75rem; line-height: 1.2857; letter-spacing: 0.1px; }
.sx-sand__lead { margin-top: 32px; font-size: 1.375rem; line-height: 1.2727; letter-spacing: 0.1px; color: var(--ink); text-wrap: pretty; }
.sx-sand__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; }
.sx-sand__items li { display: grid; gap: 24px; justify-items: start; }
.sx-sand__items p { font-size: 1rem; line-height: 1.5; color: rgba(18, 29, 42, 0.72); text-wrap: pretty; }
.sx-sand__tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: rgba(18, 29, 42, 0.07); color: var(--pine); }
.sx-sand__tile .glyph { width: 24px; height: 24px; }
.sx-sand__photo { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.sx-sand__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sx-sand__photo figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(18, 29, 42, 0.72); font-size: var(--fs-micro); line-height: 1.38; font-weight: 500; color: var(--cloud); }
@media (min-width: 48rem) { .sx-sand__items { grid-template-columns: repeat(2, minmax(0, 248px)); column-gap: 64px; row-gap: 80px; } }
@media (min-width: 64rem) {
  .sx-sand__in { grid-template-columns: max(var(--margin), (100% - var(--max)) / 2) minmax(0, calc(min(var(--max), 100% - 2 * var(--margin)) / 2)) minmax(0, 1fr); }
  .sx-sand__words { grid-column: 2; padding: 48px 48px 48px 0; }
  .sx-sand__label { font-size: 1rem; line-height: 1.5; }
  .sx-sand .h2 { font-size: 3rem; line-height: 1.1667; }
  .sx-sand__lead { font-size: 1.75rem; line-height: 1.2857; }
  .sx-sand__items p { font-size: 1.125rem; line-height: 1.444; }
  .sx-sand__photo { grid-column: 3; aspect-ratio: auto; min-height: 100%; }
}

/* 2 · THE BENTO (Superside's B24). Head: the label 16px over the heading (8 on a phone), the button level with the
   heading's foot on the right from 1280; 80px to the cards (48 below 1280). Cards: 16px apart, 16px inside, 10px
   corners, the film or picture edge to edge (cover). From 1280: 12 columns, a card 4 wide, rows of 444 at 1216
   scaled with the container (447 at our 1224), a tall card two rows. 768-1279: two columns of cards 440 tall
   (Superside goes to one full-width column here; our upright films would show a quarter of their height in a
   960 x 440 card). A phone: one column, cards 440 tall. Type: the name 28/36 at 500 on a <strong> (22/28 below
   1024), the line 8px under it at 18/26 (16/24 below 1280) at 80% of the cloud ink, both in a column of at most
   380px. Superside puts no shade on a picture; its pictures are drawn with an empty place for the words. Ours are
   films shot for other frames, so a shade sits behind each block of words only, from the card's edge to 56px past
   the words (the Creative Director's R11: the shade is right, but only where the words are). Its depth (82%, 72% at
   the last line) keeps every line at 4.5:1 or better on the worst tenth of its pixels (tools/check-services.mjs;
   at 78/66% the Dixon card's cleanroom whites took one line to exactly 4.5 at 768). */
.sx-bento { padding-block: var(--sx-b) var(--sx-c); background: var(--cloud); }
.sx-bento__head { display: grid; gap: 24px; margin-bottom: 48px; }
.sx-bento__title { display: grid; gap: 8px; justify-items: start; }
.sx-bento__side .btn { width: 100%; }
@media (min-width: 48rem) { .sx-bento__title { gap: 16px; } .sx-bento__side .btn { width: auto; } }
@media (min-width: 80rem) {
  .sx-bento__head { grid-template-columns: minmax(0, 720px) 408px; justify-content: space-between; align-items: end; margin-bottom: 80px; }
}
.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 48rem) { .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) {
  .sx-bento__body { container-type: inline-size; }
  .sx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 32px) / 3 * 444 / 395); }
}
.sx-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; height: 440px; padding: 16px; border-radius: var(--r); background: var(--pine-3); color: var(--cloud); --hold: var(--hold-m, 50% 50%); }
@media (min-width: 48rem) { .sx-card { --hold: var(--hold-t, 50% 50%); } }
@media (min-width: 80rem) { .sx-card { grid-column: span 4; height: auto; --hold: var(--hold-d, 50% 50%); } .sx-card.is-tall { grid-row: span 2; } }
.sx-card > .film { position: absolute; inset: 0; z-index: -2; }
.sx-card .film__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: var(--pine-3); }
.sx-card .film__frame img, .sx-card .film__frame video { object-position: var(--hold); }
/* a letterboxed file is scaled until the picture inside its bars covers the card (the opening's method) */
.sx-card.is-boxed .film__frame { container-type: size; }
.sx-card.is-boxed .film__frame img, .sx-card.is-boxed .film__frame video { inset: auto; max-width: none; object-fit: fill;
  --vw: max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch)));
  width: var(--vw); height: calc(var(--vw) / var(--fa));
  left: calc(50cqw - (var(--cx) + var(--cw) / 2) * var(--vw)); top: calc(50cqh - (var(--cy) + var(--ch) / 2) * var(--vw) / var(--fa)); }
/* the words: a block at the top, a block at the foot, or both; each carries its own shade to the card's edges */
.sx-card__top, .sx-card__end { display: grid; gap: 8px; justify-items: start; margin-inline: -16px; padding-inline: 16px; }
.sx-card__top { margin-top: -16px; padding-block: 16px 56px; background: linear-gradient(to bottom, rgba(15, 23, 33, 0.82), rgba(15, 23, 33, 0.72) calc(100% - 56px), rgba(15, 23, 33, 0)); }
.sx-card__end { margin-top: auto; margin-bottom: -16px; padding-block: 56px 16px; background: linear-gradient(to top, rgba(15, 23, 33, 0.82), rgba(15, 23, 33, 0.72) calc(100% - 56px), rgba(15, 23, 33, 0)); }
.sx-card__t { max-width: 380px; font-size: 1.375rem; line-height: 28px; font-weight: 500; letter-spacing: 0.1px; color: inherit; text-wrap: balance; }
.sx-card__t strong { font-weight: 500; }
.sx-card__a { color: inherit; text-decoration: none; }
.sx-card__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sx-card__a:focus-visible { outline: none; }
.sx-card:has(.sx-card__a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.sx-card__b { max-width: 380px; font-size: 1rem; line-height: 24px; color: rgba(244, 247, 251, 0.8); text-wrap: pretty; }
/* Superside's hover: a black wash from 0 to 5% */
.sx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.05); opacity: 0; transition: opacity 150ms var(--ease); pointer-events: none; }
.sx-card:hover::after { opacity: 1; }
.sx-card:hover .sx-card__a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* no film on record (automation): Superside's flat card, a sage ground with pine words, no shade */
.sx-card.is-flat { background: var(--cloud-3); color: var(--pine); }
.sx-card.is-flat .sx-card__top, .sx-card.is-flat .sx-card__end { background: none; }
.sx-card.is-flat .sx-card__b { color: rgba(18, 29, 42, 0.8); }
/* Superside's split card (R5): the picture above, the words on the card's own ground below, never on the picture */
.sx-card.is-band { padding: 0; }
.sx-card.is-band > .film { position: relative; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 0; }
.sx-card.is-band .sx-card__end { margin: 0; padding: 16px; background: none; }
@media (min-width: 64rem) { .sx-card__t { font-size: 1.75rem; line-height: 36px; } }
@media (min-width: 80rem) { .sx-card__b { font-size: 1.125rem; line-height: 26px; } }
/* V7 (Ash, 2026-10-19: "keep the same bento but readable and less word"; the Creative Director's spec §9.1): the bento's shape,
   placements, shades and grounds as built; each tile prints its title, its first sentence and its link at rest, and its "What
   you get" lines as chips: 12/18.4, 2 / 8 inside, a 1px border in the ink, 8 apart, round (radius 12, so a chip that wraps to
   two lines stays a soft box). The link 16/24 at 500 with its arrow, 16 under the words, above the card's own link layer. From
   1024 on a device that hovers, the chips rise into the words on hover and on focus within, in 0.7 s, between the sentence
   and the link; the tile keeps its size, so the block grows over the film toward the film's side, its shade with it. Below
   1024, or with no hover, the chips stand at rest and every tile is the split card: the film on top 220 tall, the words on
   the tile's own ground under it. */
.sx-card__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 380px; }
.sx-card__chips li { padding: 2px 8px; border: 1px solid currentColor; border-radius: 12px; font-size: 0.75rem; line-height: 18.4px; }
.sx-card__go { position: relative; z-index: 2; margin-top: 8px; }
.sx-card__go .text-link, .sx-card__go a { font-size: 1rem; line-height: 24px; font-weight: 500; color: inherit; }
@media (hover: hover) and (min-width: 64rem) {
  .sx-card__chips { max-height: 0; margin-top: -8px; opacity: 0; overflow: hidden;
    transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
  .sx-card:hover .sx-card__chips, .sx-card:focus-within .sx-card__chips { max-height: 160px; margin-top: 0; opacity: 1; }
  .sx-card.is-band .sx-card__end { background: rgba(31, 47, 65, 0.96); }
}
@media (hover: hover) and (min-width: 64rem) and (prefers-reduced-motion: reduce) { .sx-card__chips { transition: none; } }
@media (max-width: 63.99rem) { .sx-grid { align-items: start; } }   /* each tile its own height: a stretched tile would grow its film */
@media (max-width: 63.99rem), (hover: none) {
  .sx-card { height: auto; padding: 0; }
  .sx-card > .film, .sx-card.is-band > .film { position: relative; inset: auto; z-index: auto; flex: none; height: 220px; }
  .sx-card__top, .sx-card__end { margin: 0; padding: 16px; background: none; }
  .sx-card.is-split .sx-card__top { padding-bottom: 0; }
  .sx-card.is-split .sx-card__end { margin-top: 0; }
  .sx-card.is-flat .sx-card__top { padding-block: 16px; }
}
@media (hover: none) and (min-width: 80rem) { .sx-card > .film { flex: 1 1 auto; height: auto; min-height: 0; } }

/* UNDER THE BENTO · THE SERVICES IN DETAIL: Superside's question rows (as in section 14) on the bento's cloud: the
   name 20/26 at 500 (16/24 on a phone) with a 24px plus, 32px above and below it (16 on a phone), a hairline at 15%
   of the ink; six rows in each of two columns 48px apart from 1024. Open, the service's paragraphs at 18/26 (16/24),
   What you get, and its link. */
/* PANEL 8 (Ash, 2026-10-24: "convert them into two panels"): the services in detail as its own section, on mist (cloud-3) so it
   reads as a second panel after panel 7's cloud; same section padding and head gap as panel 7; its label is the "All services"
   string the page already prints (menu.allLabel). */
.sx-dl { padding-block: var(--sx-b) var(--sx-c); background: var(--cloud-3); color: var(--pine); }
.sx-dl__head { display: grid; gap: 8px; justify-items: start; margin-bottom: 40px; }
@media (min-width: 48rem) { .sx-dl__head { gap: 16px; margin-bottom: 48px; } }
@media (min-width: 80rem) { .sx-dl__head { margin-bottom: 80px; } }
.sx-dl__in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .sx-dl__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.sx-dt { border-bottom: 1px solid rgba(18, 29, 42, 0.15); scroll-margin-top: calc(var(--hdr) + 16px); }
.sx-dt summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; cursor: pointer; list-style: none; }
.sx-dt summary::-webkit-details-marker { display: none; }
.sx-dt__h { font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: 0; color: var(--ink); scroll-margin-top: calc(var(--hdr) + 16px); }
.sx-dt summary:hover .sx-dt__h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.sx-dt__plus { flex: none; width: 24px; height: 24px; color: var(--ink); }
.sx-dt[open] .sx-dt__plus .v { display: none; }
.sx-dt__body { display: grid; gap: 12px; justify-items: start; max-width: 72ch; padding-bottom: 24px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.sx-dt__body p { text-wrap: pretty; }
.sx-dt__get { display: grid; gap: 8px; margin-top: 4px; }
.sx-dt__label { font-size: 0.75rem; line-height: 1.533; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }
.sx-dt__get ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-dt__get li { padding: 5px 12px; border-radius: 999px; background: rgba(18, 29, 42, 0.07); font-size: 0.8125rem; line-height: 1.38; color: var(--ink); }
.sx-dt__go { max-width: 100%; }
.sx-dt__go .link { white-space: normal; align-items: baseline; }
.sx-dt__go .link .ic { flex: none; align-self: center; }
@media (min-width: 48rem) {
  .sx-dt summary { padding-block: 32px; }
  .sx-dt__h { font-size: 1.25rem; line-height: 1.3; }
  .sx-dt__body { gap: 16px; padding-bottom: 32px; font-size: 1.125rem; line-height: 1.444; }
}

/* 3 · WHERE WE SHOOT, as enterprise's "Creative demand is rising" (Services on enterprise, stage 2; the spec's 2.1; V1: cloud).
   88 above and below. From 1024 two columns of 580 at 1440, 64 apart: the H2 (60/72) and the paragraph (18/26) on the left; on
   the right, where enterprise has its 576 square picture, the places set large in the serif italic, pine, a 1px pine hairline
   at 15% between rows, 16 above and below it, the first row level with the H2's top. The spec set them one a line at 64/72 for
   four places; the paragraph names nine, which ran 950 tall, so they stand two a row at 40/48 from 1280 (32/40 at 1024, 24/28
   on a phone), about 400 tall: under the 576 the picture took. Stacked on a phone, 32 under the paragraph. */
.page--services .sx-where { padding-block: var(--sx-s); background: var(--cloud); color: var(--pine); }
.sx-where__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; align-items: start; }
.sx-where__words { display: grid; gap: 24px; justify-items: start; }
.sx-where__words p { max-width: 580px; font-size: 1rem; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.sx-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.sx-places li { padding-block: 16px; font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.1667; letter-spacing: -0.005em; color: var(--pine); text-wrap: balance; }
.sx-places li:nth-child(n + 3) { border-top: 1px solid rgba(18, 29, 42, 0.15); }
.sx-places li:nth-child(-n + 2) { padding-top: 0; }
@media (min-width: 64rem) {
  .sx-where__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .sx-where__words { gap: 32px; }
  .sx-where__words p { font-size: 1.125rem; line-height: 1.444; }
  .sx-places { column-gap: 32px; }
  .sx-places li { font-size: 2rem; line-height: 1.25; }
}
@media (min-width: 80rem) { .sx-places li { font-size: 2.5rem; line-height: 1.2; } }

/* THE TWO CREDITS, as enterprise's testimonial wall (stage 2; the spec's 2.3; V1: cloud). The Why Us credit cards as they are
   (site.css "Why Us", .wy-credit*), side by side, 16 apart, centred, one height (E1 London's stretched to Donatekart's); 128
   above and below. Stacked on a phone, 8 apart. On hover a card lifts 4px in 0.3 s (enterprise's). */
.sx-credits { padding-block: var(--sx-m); background: var(--cloud); }
.sx-credits__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sx-credits .wy-credit { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sx-credits .wy-credit:hover { transform: translateY(-4px); }
@media (min-width: 64rem) { .sx-credits__grid { grid-template-columns: repeat(2, minmax(0, 516px)); justify-content: center; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .sx-credits .wy-credit { transition: none; } .sx-credits .wy-credit:hover { transform: none; } }

/* 5 · HIS FOUR STEPS */
/* since stage 3 of the enterprise rebuild (2026-10-19; the spec's 3.1; V1): on pine, as enterprise's "Creative experts or AI
   power? Both". The template's timeline as built (56 rings joined by a 2px line at 15%, filling as you scroll; steps 80 apart
   from 1024; the words held still beside them); here the ring's number in the serif (24/32), the step names 24/28 at 500, the
   line under the heading 18/26 at 80%, "Send the idea" 32 under it. 208 above, 88 below: the ring's stage follows, also pine,
   so the gap is the only edge (the spec's 3.2). */
.page--services .sx-steps { padding-block: 40px; }
@media (min-width: 48rem) { .page--services .sx-steps { padding-block: 56px; } }
@media (min-width: 75rem) { .page--services .sx-steps { padding-block: 64px; } }
.sx-steps .sv__label { width: 100%; padding-bottom: 12px; border-bottom: 1px solid rgba(244, 247, 251, 0.5); }
.sx-steps .svt__lead { max-width: 560px; color: rgba(244, 247, 251, 0.8); }
.sx-steps .svt__head .actions { margin-top: 16px; }
.sx-steps .svt__ring { color: var(--cloud); font-family: var(--serif); font-size: 1.25rem; line-height: 1.3333; }
.sx-steps .svt__t { font-weight: 500; }
/* each step: what you get, decide and need, under a hairline */
.sx-facts { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(244, 247, 251, 0.14); font-size: 1rem; line-height: 1.5; }
.sx-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.sx-facts dt { font-size: 0.75rem; line-height: 1.9; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spark); }
.sx-facts dd { margin: 0; color: var(--text); }
/* Services only (Ash, 2026-10-24): each step's three rows sit behind a tap, at every width: a native <details>, closed; its summary is
   the step's own title (the H3), then the three rows; the step's line stays under it. No new word. */
.sx-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.sx-more summary::-webkit-details-marker { display: none; }
.sx-more summary .svt__t { margin: 0; }
.sx-more .sx-dt__plus { flex: none; width: 20px; height: 20px; color: var(--cloud); }
.sx-more[open] .sx-dt__plus .v { display: none; }
.sx-more .sx-facts { margin-top: 0; margin-bottom: 8px; }

/* 9 · SHOT OR GENERATED, as Superside's "Your AI, your rules" (superside.com/ai-excellence; its cards measured live on 2026-10-15
   at 375, 1024, 1440 and 1680; Ash, same day: "fix this as well"): the head in the middle and a paragraph under the heading
   (18/26 at 80%, at most 600px, 32px under it; 16/24 and 16px on a phone); 80px to three cards (48 below 1024) 24px apart (16
   on a phone), 10px corners, on Superside's three grounds. A card: the title in Instrument Serif, upright, 32/36 (26/28 below
   1024); its description line 12px under it, in full ink, 18/26 (16/24); then its rows, each its words at 80% of the ink with a
   16px tick at the right, a hairline at 20% of the ink under every row but the last. Superside's cards stand 655px tall on a
   1680 x 960 screen; this site holds every card grid under 60% of that screen (576px; Ash, 2026-10-14, "not too big on the
   screen"; tools/check.mjs), so ours are tighter: 32 inside (Superside 40; 24 on a phone), 32 from the description to the rows
   (40), 12 above and under each hairline (16), the tick 24px from the words (Superside's 64 would wrap every row of a 392px
   card). The credit row carries its meta in small capitals over its line. */
.page--services .sx-ai { padding-block: var(--sx-b) var(--sx-m); }
.sx-ai__head { display: grid; gap: 8px; justify-items: center; margin-bottom: 48px; text-align: center; }
.sx-ai__head .h2 { max-width: 840px; }
.sx-ai__p { max-width: 600px; margin-top: 8px; font-size: 1rem; line-height: 24px; color: rgba(244, 247, 251, 0.8); text-wrap: pretty; }
.sx-ai__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sx-ai__card { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--r); color: var(--pine); }
.sx-ai__card.is-cloud { background: var(--cloud-2); }
.sx-ai__card.is-lime { background: var(--spark); }
.sx-ai__card.is-sand { background: var(--sand-2); }
.sx-ai__top { display: grid; gap: 12px; }
.sx-ai__t { font-family: var(--serif); font-style: normal; font-size: 1.625rem; line-height: 28px; font-weight: 400; letter-spacing: 0.1px; color: inherit; }
.sx-ai__lead { font-size: 1rem; line-height: 24px; color: var(--pine); text-wrap: pretty; }
.sx-ai__rows { display: grid; gap: 12px; }
.sx-ai__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(18, 29, 42, 0.2);
  font-size: 0.875rem; line-height: 20px; color: rgba(18, 29, 42, 0.8); }
.sx-ai__row:last-child { padding-bottom: 0; border-bottom: 0; }
.sx-ai__rt { min-width: 0; text-wrap: pretty; }
.sx-ai__tick { flex: none; width: 16px; height: 16px; }
.sx-ai__meta { display: block; margin-bottom: 4px; font-size: 0.75rem; line-height: 1.533; letter-spacing: 0.15em; text-transform: uppercase; }
@media (min-width: 48rem) { .sx-ai__head { gap: 16px; } .sx-ai__p { margin-top: 16px; } .sx-ai__row { font-size: 1rem; line-height: 24px; } }
@media (min-width: 64rem) {
  .sx-ai__head { margin-bottom: 80px; }
  .sx-ai__p { font-size: 1.125rem; line-height: 26px; }
  .sx-ai__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sx-ai__card { gap: 32px; padding: 32px; }
  .sx-ai__t { font-size: 2rem; line-height: 36px; }
  .sx-ai__lead { font-size: 1.125rem; line-height: 26px; }
}
@media (min-width: 80rem) { .sx-ai__row { font-size: 1.125rem; line-height: 26px; } }

/* 11 · THE CLOSING CARD (the template's svc): Superside opens it 208px under the section's top and closes 96 under it */

/* 13 · "JUDGE THAT", as Superside's "why" cards: the heading in the middle at its H4 size (32/40; 24/28 on a phone),
   80px to three cards 16px apart; each Superside card is a picture over a coloured band (leaf with mint words, cloud,
   lime) holding its name at 32/40, 40px inside. Ours have no picture: the band and the name, the whole card a link. */
.page--services .sx-why { padding-block: var(--sx-c) var(--sx-m); }
.sx-why__head { display: grid; justify-items: center; margin-bottom: 48px; text-align: center; }
.sx-why__head .h2 { max-width: 640px; font-size: 1.5rem; line-height: 1.1667; }
.sx-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sx-why__grid > li { display: grid; }
.sx-why__card { display: grid; grid-template-rows: 1fr auto; gap: 24px; min-height: 160px; padding: 24px; border-radius: var(--r); color: var(--pine); transition: filter 150ms var(--ease); }
.sx-why__grid > li:nth-child(1) .sx-why__card { background: var(--leaf); color: var(--mint); }
.sx-why__grid > li:nth-child(2) .sx-why__card { background: var(--cloud-2); }
.sx-why__grid > li:nth-child(3) .sx-why__card { background: var(--spark); }
.sx-why__card:hover { filter: brightness(0.96); }
.sx-why__card:focus-visible { outline-color: #FFFFFF; }
.sx-why__t { font-size: 1.375rem; line-height: 1.2727; font-weight: 400; letter-spacing: 0.1px; }
.sx-why__card > .ic { justify-self: end; width: 20px; height: 20px; transition: transform 150ms var(--ease); }
.sx-why__card:hover > .ic { transform: translateX(4px); }
@media (min-width: 64rem) {
  .sx-why__head { margin-bottom: 80px; }
  .sx-why__head .h2 { font-size: 2rem; line-height: 1.25; }
  .sx-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-why__card { min-height: 200px; padding: 40px; }
  .sx-why__t { font-size: 2rem; line-height: 1.25; }
}

/* 14 · THE QUESTIONS, as enterprise's FAQ (stage 5; the spec's 5.2; V1: cloud): 208 above and below; the head on the left, the
   H2 60/72 from 1280 (48/56 at 1024, 28/36 on a phone); the questions 80 under it in two columns of 588, 48 apart, from 1024;
   each row 20/26 at 500 in pine, 32 above and below it, a 1px pine hairline at 15% (the template's rows, as built). */
.page--services .sx-faq { padding-block: var(--sx-b); background: var(--cloud); }
.sx-faq .sv__head .h2 { font-size: 1.75rem; line-height: 1.2857; }
@media (min-width: 64rem) {
  .sx-faq .sv__head { margin-bottom: 80px; }
  .sx-faq .sv__head .h2 { font-size: 3rem; line-height: 1.1667; }
  .sx-faq .svq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
}
@media (min-width: 80rem) { .sx-faq .sv__head .h2 { font-size: 3.75rem; line-height: 1.2; } }

/* 11 · THE ENQUIRY, as enterprise's closing CTA (stage 5; the spec's 5.3; V1: pine; V5: the page ends on it): two cards 24
   apart on pine, 168 above and 208 below from 1280. Left: the film at its own shape on a pine-2 card, contained, centred, 40
   in. Right: the enquiry's own words on a spark card, 40 in, pine ink, the button pine and full width. Stacked on a phone, the
   film first, 16 apart. Its height is set by the words (no eleven-line list here): under 60% of a 1680 x 960 screen. */
.page--services .svc--split { padding-block: var(--sx-m) var(--sx-b); }
@media (min-width: 80rem) { .page--services .svc--split { padding-top: 168px; } }
.svc__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.svc--split .svc__film { display: grid; place-items: center; padding: 24px; border-radius: var(--r); background: var(--pine-2); }
.svc--split .svc__film > .film { width: min(100%, calc(312px * var(--ar))); }
.svc--split .svc__card { display: block; min-height: 0; padding: 24px; background: var(--spark); color: var(--pine);
  --ink: var(--pine); --text: rgba(18, 29, 42, 0.8); --muted: rgba(18, 29, 42, 0.7); }
.svc--split .svc__words .eyebrow { color: var(--pine); }
.svc--split .svc__lead { color: rgba(18, 29, 42, 0.8); }
.svc--split .svc__words .actions, .svc--split .svc__words .btn { width: 100%; }
.svc--split .svc__words .btn { justify-content: center; background: var(--pine); color: var(--cloud); }
.svc--split .svc__words .btn:hover { background: var(--pine-2); }
.svc--split .svc__direct { border-top-color: rgba(18, 29, 42, 0.2); color: var(--pine); }
.svc--split .svc__card :focus-visible { outline-color: var(--pine); }
@media (min-width: 64rem) {
  .svc__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  .svc--split .svc__film, .svc--split .svc__card { padding: 40px; }
  .svc--split .svc__film > .film { width: min(100%, calc(363px * var(--ar))); }
}
/* ---------- THE TWELVE AS A LIST AND ONE CHANGING PANEL (Services on enterprise, stage 7; Ash's V11, final word B; the Creative
   Director's spec §11b; src/pages/_svcpanel.mjs). The bento's tiles and placements are retired with it; no string leaves the site.
   Below 1280, or without the script, an accordion on cloud: the twelve names as rows (16/24 at 500 in pine, 16 above and below,
   a 1px pine hairline at 15%, a 16 plus that turns to a minus when open), one open, service 1 open on load; the open row shows its
   film (a wide one at full width, an upright one at its own shape, 236 x 420, centred on pine-2, none for automation), then the
   sentence 16/24 at 80% 12 under, the chips 16 under, the link 16 under, 24 to the next rule (the title is the row's, so it
   does not print twice). From 1280 the script makes it vertical tabs: the list 400 wide beside a 560 tall panel (776 at 1440,
   704 at 1280), 48 apart. ---------- */
.sx-pns { padding-block: var(--sx-b) var(--sx-c); background: var(--cloud); color: var(--pine); }
.sx-pns__head { display: grid; gap: 8px; justify-items: start; margin-bottom: 40px; }
@media (min-width: 48rem) { .sx-pns__head { gap: 16px; margin-bottom: 48px; } }
.sx-pns__stage { display: none; }
.sx-pn { border-bottom: 1px solid rgba(18, 29, 42, 0.15); }
.sx-pn__h { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
.sx-pn__btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; text-align: left; font: inherit; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--pine); background: none; border: 0; cursor: pointer; }
.sx-pn__btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.sx-pn__btn .ic { display: none; width: 20px; height: 20px; flex: none; }
.sx-pn__plus { flex: none; }
/* without the script every panel is open and the buttons are headings that do nothing: no plus, no pointer */
.sx-pns:not(.is-js) .sx-pn__plus { display: none; }
.sx-pns:not(.is-js) .sx-pn__btn { cursor: default; }
.sx-pn.is-open .sx-pn__plus .v { display: none; }
.sx-pn__title { display: none; }
.sx-pn__panel { color: var(--pine); }
.sx-pn__panel:not([hidden]) { display: grid; animation: sx-pn-open 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sx-pn-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.sx-pn__inner { display: grid; gap: 12px; min-height: 0; overflow: hidden; padding-bottom: 24px; }
.sx-pn__film { display: block; }
.sx-pn__film .film { width: 100%; }
.sx-pn__panel.is-up .sx-pn__film { display: grid; justify-items: center; padding: 0; border-radius: var(--r); background: var(--pine-2); }
.sx-pn__panel.is-up .sx-pn__film .film { width: 236px; }
.sx-pn__panel.is-flat .sx-pn__inner { padding-top: 4px; }
.sx-pn__line { font-size: 1rem; line-height: 1.5; color: rgba(18, 29, 42, 0.8); text-wrap: pretty; }
.sx-pn__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sx-pn__chips li { padding: 2px 8px; border: 1px solid currentColor; border-radius: 12px; font-size: 0.75rem; line-height: 18.4px; }
.sx-pn__go { margin-top: 4px; font-size: 1rem; line-height: 1.5; font-weight: 500; }
.sx-pn__go .link { color: var(--pine); }
/* a letterboxed file is scaled until the picture inside its bars covers its frame (the opening's method) */
.sx-pn__panel.is-boxed .film__frame { container-type: size; }
.sx-pn__panel.is-boxed .film__frame img, .sx-pn__panel.is-boxed .film__frame video { inset: auto; max-width: none; object-fit: fill;
  --vw: max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch)));
  width: var(--vw); height: calc(var(--vw) / var(--fa));
  left: calc((100cqw - var(--vw) * var(--cw)) * var(--hx, 0.5) - var(--cx) * var(--vw)); top: calc((100cqh - var(--vw) * var(--ch) / var(--fa)) * var(--hy, 0.5) - var(--cy) * var(--vw) / var(--fa)); }
@media (min-width: 64rem) { .sx-pn__line { font-size: 1.125rem; line-height: 1.444; } }
@media (min-width: 80rem) { .sx-pns { padding-bottom: var(--sx-c); } .sx-pns__head { margin-bottom: 80px; } }
@media (prefers-reduced-motion: reduce) { .sx-pn__panel:not([hidden]) { animation: none; } }

/* from 1280, with the script: vertical tabs. The list 400 wide, rows 47 (11 + 24 + 11 + the rule), the chosen row weight 600 in full
   pine with a 4px spark bar at its left edge and the arrow at its right, the others at 64% (5.0:1 on cloud). The panel 560 tall,
   10px corners, under the 576 of Ash's 60% line; it takes its film's shape. */
.sx-pns__body.is-tabs { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 48px; align-items: start; }
.is-tabs .sx-pns__stage { display: block; }
.is-tabs .sx-pn:last-child { border-bottom: 0; }
.is-tabs .sx-pn__btn { padding: 11px 0 11px 16px; color: rgba(18, 29, 42, 0.64); transition: color 0.15s var(--ease); }
.is-tabs .sx-pn__btn:hover { color: var(--pine); }
.is-tabs .sx-pn__btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--spark); opacity: 0; }
.is-tabs .sx-pn.is-open .sx-pn__btn { color: var(--pine); font-weight: 600; }
.is-tabs .sx-pn.is-open .sx-pn__btn::before { opacity: 1; }
.is-tabs .sx-pn.is-open .sx-pn__btn .ic { display: block; }
.is-tabs .sx-pn__plus { display: none; }
.is-tabs .sx-pn__panel { position: relative; height: 560px; overflow: hidden; border-radius: var(--r); color: var(--cloud); background: var(--pine-3); }
.is-tabs .sx-pn__panel:not([hidden]) { display: block; animation: sx-pn-fade 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sx-pn-fade { from { opacity: 0; } to { opacity: 1; } }
.is-tabs .sx-pn__inner { display: block; position: absolute; inset: 0; overflow: visible; padding: 0; }
.is-tabs .sx-pn__title { display: block; font-size: 1.75rem; line-height: 36px; font-weight: 500; letter-spacing: 0.1px; text-wrap: balance; }
.is-tabs .sx-pn__line { margin-top: 8px; font-size: 1.125rem; line-height: 26px; color: rgba(244, 247, 251, 0.8); }
.is-tabs .sx-pn__chips { margin-top: 16px; }
.is-tabs .sx-pn__go { margin-top: 16px; }
.is-tabs .sx-pn__go .link { color: inherit; }
/* a wide film fills the panel; the words at the foot over the pine shade (82%, 72% at its edge, then 0 over 56px), inset 32 */
.is-tabs .is-wide .sx-pn__film { position: absolute; inset: 0; }
.is-tabs .sx-pn__film .film, .is-tabs .sx-pn__film .film__frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.is-tabs .is-wide .film__frame img, .is-tabs .is-wide .film__frame video { object-position: var(--hold, 50% 50%); }
.is-tabs .is-wide .sx-pn__words { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 32px 32px; background: linear-gradient(to top, rgba(15, 23, 33, 0.82), rgba(15, 23, 33, 0.72) calc(100% - 56px), rgba(15, 23, 33, 0)); }
/* an upright film stands uncropped, 315 x 560, against the panel's right edge; the words on the panel's own ground, pine-2 */
.is-tabs .is-up { background: var(--pine-2); }
.is-tabs .is-up .sx-pn__inner { display: grid; grid-template-columns: minmax(0, 1fr) 315px; }
.is-tabs .is-up .sx-pn__film { order: 2; width: 315px; height: 560px; padding: 0; border-radius: 0; background: none; display: block; }
.is-tabs .is-up .sx-pn__film .film { width: 315px; height: 560px; }
.is-tabs .is-up .sx-pn__words { padding: 32px; }
/* no film (automation): the words across the panel on cloud-3 in pine ink */
.is-tabs .is-flat { background: var(--cloud-3); color: var(--pine); }
.is-tabs .is-flat .sx-pn__inner { padding: 0; }
.is-tabs .is-flat .sx-pn__words { max-width: 664px; padding: 32px; }
.is-tabs .is-flat .sx-pn__line { color: rgba(18, 29, 42, 0.8); }

/* ---------- THE CLOSING, in two sections (Ash, 2026-10-24; service-template.mjs svcCta) ----------
   1 · THE CTA PANEL, on the page ground: the words (about 5 of 12) beside the film at a generous size (about 7 of 12) in a 10px panel.
   2 · THE BANNER, as superside.com's: the page's banner picture inside a 16px card, a soft dark gradient on the words' side only,
       the words, one lime button. No film, no contact row. A page with no banner picture: the navy ground. */
.svc { padding-block: var(--sec) 0; background: var(--cloud); }
.svcp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.svcp__words { color: var(--text); }
.svc .svc__lead { color: var(--text); }
.svc .svc__direct { border-top-color: var(--line); color: var(--ink); }
.svcp__film { display: grid; place-items: center; padding: 20px; border-radius: var(--r); background: var(--pine-2); }
.svcp__film > .film { width: min(100%, calc(520px * var(--ar))); }
.svn { padding-block: var(--sec); background: var(--cloud); }
.svn__card { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 360px; padding: 40px 24px; border-radius: 16px; background: var(--pine); }
.svn__art { position: absolute; inset: 0; z-index: -2; }
.svn__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.svn__card.has-art::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 23, 33, 0.82), rgba(15, 23, 33, 0.55) 100%); }
.svn__words { display: grid; gap: 16px; justify-items: start; max-width: 560px; }
.svn__words .svc__lead { color: rgba(244, 247, 251, 0.9); }
.svn__card :focus-visible { outline-color: #FFFFFF; }
@media (max-width: 47.99rem) { .svcp__words .actions, .svcp__words .btn, .svn__words .actions, .svn__words .btn { width: 100%; } }
@media (min-width: 48rem) { .svn__card { min-height: 420px; padding: 56px 48px; } .svcp__film { padding: 32px; } }
@media (min-width: 64rem) {
  .svcp__grid.has-film { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .svcp__grid.has-film .svcp__words { grid-column: 1 / span 5; }
  .svcp__grid.has-film .svcp__film { grid-column: 6 / span 7; }
  .svcp__film { padding: 40px; }
  .svn__card { min-height: 480px; padding: 64px; }
  .svn__card.has-art::before { background: linear-gradient(90deg, rgba(15, 23, 33, 0.86) 0%, rgba(15, 23, 33, 0.6) 40%, rgba(15, 23, 33, 0) 72%); }
}
@media (min-width: 80rem) { .svcp__film > .film { width: min(100%, calc(560px * var(--ar))); } }

/* ---------- MOBILE PASS (2026-10-28): the Creative Director's mobile QA, the a11y mobile audit and the Growth Lead's mobile perf audit ----------
   a11y 2: every Selected Work card gets a foot scrim under its title (the trio cards measured 2.2:1 on their worst frames) */
[data-scroll-stack] .wstack__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, rgba(18, 29, 42, 0.78), rgba(18, 29, 42, 0)); }
[data-scroll-stack] .wstack__title { text-shadow: 0 1px 12px rgba(18, 29, 42, 0.6); }
/* a11y 7: the footer's note on the picture footer (4.0:1 on its worst pixels) */
.ftr--pic .ftr__note { color: rgba(244, 247, 251, 0.82); }
/* a11y 5 and CD 10: 44px targets. The logo links everywhere; the rest below 1024 (touch), where the rows can take the height */
.hdr .brand, .ftr__brand .brand { min-height: 44px; }
.wstack__cta { min-height: 44px; }
@media (max-width: 63.99rem) {
  .ftr__col ul { row-gap: 0; }
  .ftr__col a { display: inline-flex; align-items: center; min-height: 44px; }
  .link { min-height: 44px; }
  .chip { height: 44px; }
  a.cx__val, a.cx__also { display: inline-flex; align-items: center; min-height: 44px; }
  .drawer__main > li > a, .drawer__services > summary { min-block-size: 44px; }
  .drawer__direct a { display: inline-flex; align-items: center; min-height: 44px; }
  .drawer__all .link { padding-block: 10px; }
}
/* a11y 1: on a phone the hero's words sit on the film's middle; a soft shadow under them for the frames the scrim does not cover */
@media (max-width: 47.99rem) { .hero .eyebrow, .hero__title { text-shadow: 0 1px 14px rgba(18, 29, 42, 0.55); } }
/* Ash, 2026-10-30: the phone plays the whole showreel again, burnt-in titles included, and a phone's hero is often only 660-700px tall
   (100svh under Safari's bars), which lifts the eyebrow to 60% of the box. The shade's middle stop is a little deeper on phones: the
   eyebrow's worst frame over the whole loop, worst pixel, measured 3.72:1 at 375x667 with 0.55 and 5.13:1 with 0.66 (H1 5.76:1) */
@media (max-width: 47.99rem) { .hero__film::after { background: linear-gradient(to top, rgb(18, 29, 42) 0%, rgba(18, 29, 42, 0.8) 36%, rgba(18, 29, 42, 0.66) 66%, rgba(18, 29, 42, 0.34) 100%); } }
/* CD 5: below the logo strip a phone keeps 24px of the old spacer, not 96 (the reel wall's clip start is checked by check-seo R7) */
@media (max-width: 47.99rem) { .logos-rest { height: 24px; } }
/* CD 8: an upright film alone on a phone row stands in the middle, not flush left with half the row empty */
.wall.is-laid > .film.is-lone { margin-inline: auto; }
.film__cap { text-wrap: balance; }

/* THE CLOSING PARTS (Ash, 2026-10-24; rebuilt 2026-10-28 to the Creative Director's launch polish spec §1-2): the "Get in touch" banner
   and the footer on the Why Us picture. Appended to site.css by build.mjs, so it loads on every page. Tokens only (DESIGN.md); the only
   literals are alphas of the token colours via color-mix. */

/* ---------- the banner: one card on a navy band, the same on every page ----------
   2026-10-28, later (Ash: "not aligned, no background, and our font"; "all the banners"; "place the home screen hero video on all the
   banners"). The band is the navy ground; the card is the page container's width (.wrap, so its edges are the header's logo and button
   edges), a 1px hairline, the site's card radius (--r), equal padding on all sides of a centred column. The film is the Home showreel,
   sharp (no filter). THE SCRIM IS MEASURED, NOT GUESSED: the brightest pixels of the showreel under the words are white (p99 luminance
   0.98 over 71 frames at 2 fps), and cloud text on white under pine-deep needs 0.64 for 5.0:1 (lime eyebrow 4.8:1). So 0.64 holds only
   under the column of words (from 50% - 380px to 50% + 380px; the words are at most 720 wide) and the film's sides ease to 0.15. Below 48rem the words span the card, so
   the 0.64 spans it too. The lead takes full cloud here (the .lead's 86% would need 0.67).
   Re-measured 2026-10-28 over the banner's own loop (banner-loop, the showreel's clean shots; middle 60% of the frame at 4 fps):
   p99 luminance 0.78, p99.9 0.96, max 1.00; under the 0.64: cloud 5.8:1 at p99, 5.0:1 on the brightest pixel, lime 5.5 and 4.8.
   The phone loop is darker (p99 0.62). So the scrim stays as it was. */
.cb.svc { padding-block: max(48px, calc(var(--sec) * 2 / 3)); background: var(--navy); }
main:has(> .cb):not(:has(> .cb ~ section)) { padding-bottom: 0; }   /* the band runs straight into the footer: no cloud between */
.cb__card { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; text-align: center;
  padding: 48px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--pine-deep); }
.cb__bg { position: absolute; inset: 0; z-index: -2; }
.cb__bg .film, .cb__bg .film__frame { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; display: block; background: none; }
.cb__bg .film__frame img, .cb__bg .film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; }
.cb__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--pine-deep) 64%, transparent); }
.cb__in { display: grid; row-gap: 16px; justify-items: center; width: 100%; max-width: 720px; }
.cb__h { max-width: 18ch; margin: 0; color: var(--ink); }
.cb__h em { display: block; }                 /* line 1 Inter Tight, line 2 the serif phrase, on every width */
.cb__lead { max-width: 52ch; margin: 0; color: var(--ink); }
.cb__actions { display: grid; gap: 12px; width: 100%; margin-top: 8px; }
.cb__actions .btn { width: 100%; }
.cb__direct { display: grid; gap: 8px; justify-items: center; margin: 0; font-size: 0.9375rem; line-height: 1.47; font-weight: 500; color: var(--cloud); }
.cb__direct a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.cb__card :focus-visible, .ftr--pic :focus-visible { outline-color: #FFFFFF; }
@media (min-width: 48rem) {
  .cb__card { padding: 64px 32px; }
  .cb__card::before { background: linear-gradient(90deg, color-mix(in srgb, var(--pine-deep) 15%, transparent) 0%,
    color-mix(in srgb, var(--pine-deep) 64%, transparent) calc(50% - 380px), color-mix(in srgb, var(--pine-deep) 64%, transparent) calc(50% + 380px),
    color-mix(in srgb, var(--pine-deep) 15%, transparent) 100%); }
  .cb__in { row-gap: 20px; }
  .cb__actions { display: flex; justify-content: center; gap: 12px; width: auto; }
  .cb__actions .btn { width: auto; }
  .cb__direct { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
}
@media (min-width: 64rem) { .cb__card { padding: 72px 48px; } }   /* 72: the card stays under 60% of a 960 screen (check.mjs, 1680 x 960) */
@media (prefers-reduced-motion: reduce) { .cb__bg video { display: none; } }

/* ---------- the footer on the picture ---------- */
.ftr--pic { position: relative; isolation: isolate; background: var(--pine-deep); }
.ftr__pic { position: absolute; inset: 0; z-index: -2; display: block; }
.ftr__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ftr--pic::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pine-deep) 62%, transparent) 0%, color-mix(in srgb, var(--pine-deep) 76%, transparent) 55%, color-mix(in srgb, var(--pine-deep) 92%, transparent) 100%); }

/* a11y mobile audit 5 (2026-10-28): 44px targets on touch widths; on a desktop the card keeps its height (check.mjs caps it at 60% of 960) */
@media (max-width: 63.99rem) { .cb__direct a { display: inline-flex; align-items: center; min-height: 44px; } }