/* THE SERVICE TEMPLATE (src/service-template.mjs): Superside's video-production and social-media-creative
   pages, rebuilt for By The Owl's service pages on the founder's word of 2026-10-14. Every number in a
   comment below is Superside's, read from superside.com's computed styles in headless Chrome at 375, 768,
   1440 and 1680 (docs/DESIGN_SPEC.md, "The service template").
   Loaded only by a page that names "service" in its panels, BEFORE site.css: a rule here that changes a
   site rule is written one step more specific. Tokens, type faces and the film tile are site.css's own.
   Breakpoints are the site's: 48rem (768), 64rem (1024), 80rem (1280), 103.125rem (1650, Superside's
   widest step). Order: page rhythm · section heads · svh opening · svi intro · svb bento · svp pine grid ·
   svt timeline · svc closing card · svr other services · svq questions · motion. */

/* ---------- page rhythm ----------
   Superside spaces these sections with their own padding, not margins: 96 above and below a light
   section (48 on a phone, 64 at 768), 128 for the ones that introduce a set and for the pine fields
   (80 on a phone, 96 at 768). The film rows (components.mjs gallery) and the logo strip are the site's
   own parts and keep their look; only their spacing follows the template. */
:root { --sv-pad: 48px; --sv-pad-2: 80px; }
@media (min-width: 48rem) { :root { --sv-pad: 64px; --sv-pad-2: 96px; } }
@media (min-width: 64rem) { :root { --sv-pad: 96px; --sv-pad-2: 128px; } }
main:has(> .svh) { padding-bottom: 0; }
main:has(> .svh) > .band { margin-top: 0; padding-block: var(--sv-pad); }
main:has(> .svh) > .band--field { padding-block: var(--sv-pad-2); }
.sv { padding-block: var(--sv-pad); }
.sv--field { padding-block: var(--sv-pad-2); }
.svb { padding-top: var(--sv-pad-2); }
/* after a light section the closing card needs no more than the light rhythm above it */
/* two pine fields in a row read as one run: the second starts sooner (Superside: about 216px between the
   last line of one dark section and the first of the next) */
main:has(> .svh) > :is(.sv--field, .band--field) + :is(.sv--field, .band--field) { padding-top: calc(var(--sv-pad-2) * 0.7); }
/* Superside sets its headings at +0.1px, not the site's tighter -0.03em */
main:has(> .svh) .h2, main:has(> .svh) .h3 { letter-spacing: 0.1px; }

/* the old site's film row (bto-cap-gallery.css) colours its line with --text-color, the site's dark ink: on a
   pine row that line was all but invisible. Re-pointed on the row's own mount, as the site re-skins the engines. */
.cap-gallery.theme-navy { --text-color: rgba(244, 247, 251, 0.86); }

/* ---------- section heads ----------
   The label: 12/18.4 with 0.15em tracking on a phone, 14/21.6 from 768, in the field's own ink (not
   lime). 8px to the heading on a phone, 16 from 768; the line 16 under the heading (32 from 768), at
   most 600px; 48px to what follows (80 from 1024). Centred heads hold the heading to 840px. */
.sv__head { display: grid; gap: 8px; justify-items: start; margin-bottom: 48px; }
.sv__head--center { justify-items: center; text-align: center; }
.sv__head .h2 { max-width: 840px; }
.sv__label { font-size: 0.75rem; line-height: 1.533; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); }
.sv__lead { margin-top: 8px; max-width: 600px; font-size: 1rem; line-height: 1.5; color: var(--text); text-wrap: pretty; }
@media (min-width: 48rem) { .sv__head { gap: 16px; } .sv__label { font-size: 0.875rem; line-height: 1.543; } .sv__lead { margin-top: 16px; font-size: 1.125rem; line-height: 1.444; } }
@media (min-width: 64rem) { .sv__head { margin-bottom: 80px; } }

/* ---------- svh: the opening ----------
   Superside, 1440 x 900: 767px tall, the label 88px under the header (16/24, 2.4px tracking, uppercase),
   16px to the heading (60/72 at 400, 850px wide; 72/72 from 1650; 48/56 at 768; 32/40 on a phone), 32 to
   the line (18/26, 600px; 16/24 and 480px below 1024), 32 to the button. A phone runs the full window with the words at the foot.
   SINCE 2026-10-27 (Ash, "remove these in all web pages") THERE IS NO BREADCRUMB AND NO CHIP ROW: the heading is the first line, 32px under
   the header (24 on a phone, as Digital's was cut on 2026-10-25), and the opening ends 48 / 64 / 80px under the buttons. The page's header is solid pine,
   so the opening runs up under it as Home's does. */
.svh { position: relative; isolation: isolate; display: grid; align-content: end; min-height: min(100svh, 860px); margin-top: calc(-1 * var(--hdr)); padding-top: calc(var(--hdr) + 24px); padding-bottom: 48px; background: var(--pine); color: var(--text); overflow: clip; }
.svh__film { position: absolute; inset: 0; z-index: -1; }
.svh__film .film, .svh__film .film__frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: var(--pine); }
/* the picture covers the opening and its bars, if a file has any, fall outside it: --fa is the file's shape,
   --cw/--ch/--cx/--cy the picture's rectangle in it, as fractions. Worked out against the frame's own size. */
.svh__film .film__frame { container-type: size; }
.svh__film .film__frame img, .svh__film .film__frame video { inset: auto; max-width: none; object-fit: fill;
  width: max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch)));
  height: calc(max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch))) / var(--fa));
  left: calc(50cqw - max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch))) * (var(--cx) + var(--cw) / 2));
  top: calc(50cqh - max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch))) / var(--fa) * (var(--cy) + var(--ch) / 2)); }
/* EDGE (svcHero `edge`, the Brand opening, 2026-10-27): from 1360 the film is centred as above, its subject (--edge to --edge-end of its width)
   in the right third, clear of the heading; 1280 to 1359, the subject's right end 24px in from the window's edge; under 1280 the subject is set
   just past the window's right edge */
@media (min-width: 80rem) and (max-width: 84.99rem) {
  .svh__film--edge .film__frame img, .svh__film--edge .film__frame video {
    left: calc(100cqw - 24px - max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch))) * var(--edge-end)); }
}
@media (max-width: 79.99rem) {
  .svh__film--edge .film__frame img, .svh__film--edge .film__frame video {
    left: calc(100cqw - max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch))) * var(--edge)); }
}
/* the shade: the words' side darkened for reading, and the foot run into solid pine, the logo strip's own
   ground under it, so the opening and the strip read as one (as Home's opening does since 2026-10-14) */
.svh__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.86) 40%, rgba(18, 29, 42, 0.3) 72%, rgba(18, 29, 42, 0.3) 100%); }
@media (min-width: 64rem) {
  .svh__film::after { background: linear-gradient(to top, rgb(18, 29, 42) 0%, rgba(18, 29, 42, 0.5) 24%, rgba(18, 29, 42, 0) 50%),
    linear-gradient(90deg, rgba(18, 29, 42, 0.84) 0%, rgba(18, 29, 42, 0.6) 38%, rgba(18, 29, 42, 0.14) 66%, rgba(18, 29, 42, 0) 100%); }
}
.svh__in { display: grid; justify-items: start; }
/* a plain label where a page opens on one (Why Us) */
.svh__label { font-size: 0.875rem; line-height: 1.543; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); }
.svh__title { max-width: 850px; margin-top: 0; font-size: 2rem; line-height: 1.25; font-weight: 400; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.svh__lead { max-width: 480px; margin-top: 16px; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 251, 0.92); text-wrap: pretty; }
.svh__actions { margin-top: 16px; }
@media (max-width: 47.99rem) { .svh__actions { width: 100%; } .svh__actions .btn { width: 100%; } }
@media (min-width: 48rem) { .svh { min-height: 0; padding-top: calc(var(--hdr) + 32px); padding-bottom: 64px; } .svh__title { font-size: 3rem; line-height: 1.1667; } }
@media (min-width: 64rem) {
  .svh { padding-top: calc(var(--hdr) + 32px); padding-bottom: 80px; }
  .svh__label { font-size: 1rem; line-height: 1.5; }
  .svh__title { font-size: 3.75rem; line-height: 1.2; }
  .svh__lead { max-width: 600px; margin-top: 32px; font-size: 1.125rem; line-height: 1.444; }
  .svh__actions { margin-top: 32px; }
}
@media (min-width: 103.125rem) { .svh__title { font-size: 4.5rem; line-height: 1; } }
/* a label on the opening's film, where the page owes one (an AI film is always called AI): a small pill under
   the header, at the container's right edge, as a film tile's own caption would say it */
.svh__tag { position: absolute; z-index: 1; top: calc(var(--hdr) + 16px); right: max(var(--margin), calc((100% - var(--max)) / 2)); padding: 6px 12px; border-radius: 999px;
  background: rgba(18, 29, 42, 0.72); color: var(--cloud); font-size: 0.8125rem; line-height: 1.38; font-weight: 500; }
/* THE STILL OPENING (Wedding, Q30, opt-in: a page whose opening passes `still`): a picture edge to edge behind the words, under the same
   shade as a film's (.svh__film::after). The page's markup sets --hold (the object-position that keeps the subject clear of the words) and
   --hold-phone, for the phone's own crop of the picture (below 768 the opening is taller than wide). */
.svh__film--still picture, .svh__film--still img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.svh__film--still img { object-fit: cover; object-position: var(--hold, 50% 50%); }
@media (max-width: 47.99rem) { .svh__film--still img { object-position: var(--hold-phone, var(--hold, 50% 50%)); } }
/* an opening with no film (a page with none on file): the pine ground alone, the words at Superside's sizes */
.svh--plain { min-height: 0; padding-bottom: var(--sv-pad); }

/* THE REELS OPENING (Digital Content, Ash via Neel, Q15, 2026-10-25): five upright films in one row under the opening's words, one wide banner
   (five 9:16 films 8px apart are 2.8 : 1). The words keep their sizes and stand above the row: the heading to the left and the line and
   buttons to its right from 1024, stacked below. The row fills the container; 10px corners. Below 1024 it scrolls sideways, snapping to a
   reel, with 3.5 reels showing from 768 and 2.5 on a phone, so the next one peeks. */
/* the top: no breadcrumb sits above the heading here, so the heading itself starts close under the bar (Ash, 2026-10-25, "fix the gap
   as well"): 24px on a phone, 32px from 768 (was 40 and 64) */
.svh--reels { min-height: 0; align-content: start; grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--hdr) + 24px); }
.svh--reels .svh__in { min-width: 0; }
.svh--reels .svh__title { max-width: none; margin-top: 0; }   /* no breadcrumb above it (Digital, Ash 2026-10-25): the heading is the first line */
.svh__reels-wrap { margin-top: 32px; }
.svh__reels { display: flex; gap: 8px; border-radius: 10px; }
.svh__reel { flex: 1 1 0; min-width: 0; }
.svh__reel .film { width: 100%; }
.svh__reel .film__frame { border-radius: 10px; }
@media (max-width: 63.99rem) {
  .svh .svh__reels-wrap { width: 100%; margin-inline: 0; }   /* beats .wrap (site.css loads after this sheet) */
  .svh__reels { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--margin); scroll-padding-inline: var(--margin); }
  .svh__reels::-webkit-scrollbar { display: none; }
  .svh__reel { flex: 0 0 calc((100vw - var(--margin) - 16px) / 2.5); scroll-snap-align: start; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) { .svh--reels { padding-top: calc(var(--hdr) + 32px); } .svh__reel { flex-basis: calc((100vw - var(--margin) - 24px) / 3.5); } }
@media (min-width: 64rem) {
  .svh--reels { padding-top: calc(var(--hdr) + 32px); }
  .svh--reels .svh__in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "title lead" "title actions"; column-gap: 64px; align-items: start; }
  .svh--reels .svh__title { grid-area: title; }
  .svh--reels .svh__lead { grid-area: lead; align-self: end; margin-top: 16px; max-width: none; }
  .svh--reels .svh__actions { grid-area: actions; margin-top: 24px; }
  .svh__reels-wrap { margin-top: 40px; }
}


/* ---------- svi: the intro ----------
   Two columns of 576 at 1440, 64px apart, the film centred on the words. The label (16/24 from 1024, 14
   below) sits on a 1px rule 12px under it, across its column. 32px between label, heading, line and passage
   (24 on a phone). The line 28/36 (22/28 on a phone), the passage 18/26 (16/24). */
.svi__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-items: center; }
.svi__words { display: grid; gap: 24px; justify-items: start; }
.svi__label { justify-self: stretch; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 0.875rem; line-height: 1.543; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); }
.svi__lead { font-size: 1.375rem; line-height: 1.2727; letter-spacing: 0.1px; color: var(--ink); text-wrap: pretty; }
.svi__body { display: grid; gap: 16px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.svi__body p { text-wrap: pretty; }
/* a heading over 72 characters (service-template.mjs LONG) is set at Superside's H3, 48/56 */
main:has(> .svh) :is(.svi, .svs) .h3 { font-size: 1.75rem; line-height: 1.2857; font-weight: 400; }
@media (min-width: 48rem) { main:has(> .svh) :is(.svi, .svs) .h3 { font-size: 2.25rem; line-height: 1.2222; } }
@media (min-width: 64rem) { main:has(> .svh) :is(.svi, .svs) .h3 { font-size: 3rem; line-height: 1.1667; } }
/* the film keeps its shape: no wider than its column, no taller than 576px or 60% of the window */
.svi__film { display: grid; justify-items: center; }
.svi__film > .film { width: min(100%, calc(min(480px, 70vh) * var(--ar))); }
@media (min-width: 64rem) {
  .svi__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .svi__in--words { grid-template-columns: minmax(0, 1fr); }
  .svi__in--words .svi__words { max-width: 640px; }   /* words only: on the container's left edge, as Superside's intro, not centred */
  .svi__words { gap: 32px; }
  .svi__label { font-size: 1rem; line-height: 1.5; }
  .svi__lead { font-size: 1.75rem; line-height: 1.2857; }
  .svi__body { font-size: 1.125rem; line-height: 1.444; }
  .svi__film > .film { width: min(100%, calc(min(576px, 60vh) * var(--ar))); }
}

/* ---------- svb: the bento ----------
   Superside: four columns, two rows of 440 at 1440, 16px apart; A and F two columns wide; 10px corners,
   16px inside (32 from 1650; 24 here, as Home's cards). Rows held to 30% of the window (288 to 330px), as Home's
   cards (288, not Home's 280: an upright film in a wide card is then never narrower than 132px). A phone stacks
   the cards; 768 to 1279 sets two columns, the wide cards across both.
   THE TYPE IS SUPERSIDE'S, as re-measured on superside.com/video-production on 2026-10-14, and the same in every
   bento on the site, Home's five boxes included (founder: "make sure this aesthetic of the text stays across all
   the bento's"): titles 24/28 at weight 500 (20/26 on a phone), measured on the <strong> that carries Superside's
   card name, not on the h6 around it, which reads 400 (500 on 175 of the 190 cards the Creative Director's teardown
   read); lines regular at 16/24 (Superside's 18/26 is set on 440px rows; on these it spilled four cards). */
.svb__grid { --svb-row: clamp(288px, 30vh, 330px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.svb__card { --svb-pad: 16px; position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 220px; padding: var(--svb-pad); border-radius: var(--r); overflow: hidden; }
.svb__card.is-pine { background: var(--pine); color: var(--cloud); }
.svb__card.is-leaf { background: var(--leaf); color: var(--cloud); }
.svb__card.is-lime { background: #D8FF85; color: var(--pine); }
.svb__card.is-pale { background: var(--cloud-3); color: var(--pine); }
/* the words: the title at the top; the line and its "Right when" at the foot, as Superside sets a wide card */
.svb__words { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.svb__card.has-film .svb__words { flex: 0 0 auto; justify-content: flex-start; }
.svb__t { font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.1px; color: inherit; text-wrap: balance; }
.svb__more { display: grid; gap: 8px; }
.svb__b { max-width: 380px; font-size: 1rem; line-height: 1.5; color: inherit; text-wrap: pretty; }
@media (min-width: 48rem) { .svb__t { font-size: 1.5rem; line-height: 1.1667; } }
.svb__points { display: grid; gap: 4px; font-size: 0.875rem; line-height: 1.43; }
.svb__points li { position: relative; padding-left: 18px; }
.svb__points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: currentColor; }
.svb__when { max-width: 380px; font-size: 0.875rem; line-height: 1.43; color: inherit; opacity: 0.8; text-wrap: pretty; }
.svb__when b { font-weight: 600; }
/* a card's film: at its own shape, never cropped. In the flow (phone, and narrow cards below 1280) it is the
   card's width, an upright one about half of it. */
.svb__media { display: flex; align-items: flex-end; min-width: 0; }
.svb__media > .film { width: 100%; }
.svb__media > .film:is(.film--tall, .film--portrait, .film--square) { width: min(56%, 240px); }
.svb__card :focus-visible { outline-color: currentColor; }
/* A FULL-BLEED CARD (Ash, 2026-10-24: "use the whole card for the video"; the Photos card the same with a photograph): the picture fills
   the card edge to edge under a black gradient, and the card's own words stand on the gradient, in the card's own places (the title at
   the top, the line and its "Right when" at the foot). `--hold` is the object-position that keeps the subject clear of the words. The
   gradient is black, never a tint of the card's ground, so the words separate from the picture on any frame: a wide card also darkens
   from the words' side (the left), a narrow card from its foot. */
.svb__card.is-bleed { isolation: isolate; color: var(--cloud); background: var(--pine-deep); }
.svb__bg { position: absolute; inset: 0; z-index: -2; }
.svb__bg .film, .svb__bg .film__frame, .svb__bg .svb__photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; display: block; }
.svb__bg .film__frame img, .svb__bg .film__frame video, .svb__bg .svb__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hold, 50% 50%); }
.svb__card.is-bleed::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0.5) 58%, rgba(0, 0, 0, 0.88) 100%); }
.svb__card.is-bleed.is-wide::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.5) 46%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%); }
.svb__card.is-bleed .svb__t, .svb__card.is-bleed .svb__b, .svb__card.is-bleed .svb__points, .svb__card.is-bleed .svb__when { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: reduce) { .svb__bg video { display: none; } }
/* opt-in (a card passed `holdPhone` / `phoneTall`: Wedding, Q30): the picture's own place on a phone, and a card tall enough to show it between the words */
@media (max-width: 47.99rem) {
  .svb__bg .svb__photo img { object-position: var(--hold-phone, var(--hold, 50% 50%)); }
  .svb__card.is-bleed--tall { min-height: 400px; }
}
@media (min-width: 48rem) {
  .svb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svb__card.is-wide { grid-column: 1 / -1; min-height: var(--svb-row); }
  /* a wide card with a film: the words, and beside them a column cut to the film's own shape at the card's
     inside height (--far, the film's shape), never more than 58% of the card. The film fills that column. */
  .svb__card.is-wide.has-film { display: grid; grid-template-columns: minmax(200px, 1fr) min(58%, calc((var(--svb-row) - 2 * var(--svb-pad)) * var(--far)));
    column-gap: 16px; height: var(--svb-row); }
  .svb__card.is-wide.has-film .svb__words { justify-content: space-between; }
  .svb__card.is-wide .svb__media { justify-content: flex-end; }
  .svb__card.is-wide .svb__media > .film { width: 100%; }
}
@media (min-width: 80rem) {
  /* four columns; a wide card takes two, and the rows fill in order (service-template.mjs bentoWide) */
  .svb__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--svb-row); }
  .svb__card { min-height: 0; }
  .svb__card.is-wide { grid-column: span 2; }
  .svb__card.is-wide.has-film { height: auto; }
  /* a narrow card's film fills what its words leave under them, at its own shape (container units) */
  .svb__card.has-film:not(.is-wide) .svb__media { flex: 1 1 0; min-height: 0; container-type: size; }
  .svb__card.has-film:not(.is-wide) .svb__media > .film { width: min(100cqw, 100cqh * var(--ar)); }
}
@media (min-width: 103.125rem) { .svb__card { --svb-pad: 24px; } }
/* a letterboxed film in a full-bleed card: its picture covers the card, never its bars (service-template.mjs cropVars) */
.svb__bg.is-cropped { container-type: size; overflow: hidden; }
.svb__bg.is-cropped .film { inset: auto; left: 50%; top: 50%; width: max(100cqw, 100cqh * var(--pa)); height: max(100cqh, 100cqw / var(--pa)); transform: translate(-50%, -50%); }
.svb__bg.is-cropped .film__frame { overflow: hidden; }
.svb__bg.is-cropped .film__frame img, .svb__bg.is-cropped .film__frame video { inset: auto; left: calc(-100% * var(--vx)); top: calc(-100% * var(--vy)); width: calc(100% * var(--vw)); height: calc(100% * var(--vh)); object-fit: fill; }

/* THE "BRAND" BENTO, SEVEN CARDS (Brand films & music videos only, opt-in .svb__grid--brand; Creative Director 2026-10-26, vault
   whiteboard creative_director_brand_music_page.md; replaces the six-card block of 2026-10-25, Q26). Brand films (a) and Music videos (b),
   the page's two names, side by side as the two largest cards; the five formats under them: c TV commercials, d Product & demonstration,
   e Launch & campaign, f Campaign cutdowns, g Digital & social ads. Every film is a clean re-cut (own-films.json br-card-*), so no card
   holds its picture away from text.
   1280 up, from the section's width W (100cqw): row one two cards of (W - 16)/2 at 2:1; row two five cards of (W - 64)/5 at 3:4,
   taller only if their words need it. At 1440 (W 1224): 604 x 302 twice over five 232 x 309; 627px.
   768 to 1279: Brand films | Music videos, TV | Product (3:2 of a half), Launch across at 21:9, Cutdowns | Digital square.
   Phone: one column in order; the headliners and the two upright cards square, the other three 4:3 or taller for their words. */
.svb:has(.svb__grid--brand) > .wrap { container-type: inline-size; }
.svb__grid--brand > .svb__card.is-bleed { min-height: 0; aspect-ratio: auto; }
@media (max-width: 47.99rem) {
  .svb__grid--brand > .svb__card:is(.svb__card--a, .svb__card--b, .svb__card--f, .svb__card--g) { min-height: 100cqw; }
  .svb__grid--brand > .svb__card:is(.svb__card--c, .svb__card--d, .svb__card--e) { min-height: 75cqw; }
}
@media (min-width: 48rem) {
  .svb__grid--brand > .svb__card.svb__card--a { grid-area: a; } .svb__grid--brand > .svb__card.svb__card--b { grid-area: b; }
  .svb__grid--brand > .svb__card.svb__card--c { grid-area: c; } .svb__grid--brand > .svb__card.svb__card--d { grid-area: d; }
  .svb__grid--brand > .svb__card.svb__card--e { grid-area: e; } .svb__grid--brand > .svb__card.svb__card--f { grid-area: f; }
  .svb__grid--brand > .svb__card.svb__card--g { grid-area: g; }
}
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .svb__grid--brand { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-areas: "a b" "c d" "e e" "f g"; }
  .svb__grid--brand > .svb__card:is(.svb__card--a, .svb__card--b, .svb__card--c, .svb__card--d) { min-height: calc((100cqw - 16px) / 3); }
  .svb__grid--brand > .svb__card.svb__card--e { min-height: calc(100cqw * 9 / 21); }
  .svb__grid--brand > .svb__card:is(.svb__card--f, .svb__card--g) { min-height: calc((100cqw - 16px) / 2); }
}
@media (min-width: 80rem) {
  .svb__grid--brand { column-gap: 16px; row-gap: 16px; grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: calc((100cqw - 16px) / 4) minmax(calc((100cqw - 64px) * 4 / 15), auto);
    grid-template-areas: "a a a a a b b b b b" "c c d d e e f f g g"; }
}
/* the scrims, pinned in px (a % stop is a different scrim on every card height; the old narrow scrim measured 2.06:1 behind the
   Launch title at 1440). Format cards: the title band (up to three lines, 16 + 84px) never under black 0.5, the line's foot never
   under 0.62. Headliners: lighter from the left than the old 0.78, which is what made the old Brand films card read black. */
.svb__grid--brand > .svb__card.is-bleed:not(.is-wide)::before { background:
  linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.5) 104px, rgba(0, 0, 0, 0) 176px),
  linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0, rgba(0, 0, 0, 0.62) 150px, rgba(0, 0, 0, 0) 236px); }
.svb__grid--brand > .svb__card.is-bleed.is-wide::before { background:
  linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0) 80%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0) 112px),
  linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0, rgba(0, 0, 0, 0.55) 118px, rgba(0, 0, 0, 0) 196px); }

/* THE "FORMATS" BENTO (Digital Content only, opt-in: .svb__grid--formats; Ash 2026-10-25: "the reel box needs to be vertical and the
   long format has to be horizontal ... fix the mis shapes", then each box's shape; round 2: Motion posters and Explainer videos
   bigger, Long-form a bit smaller). The cards are the Events bento's full-bleed cards (.is-bleed: film edge to edge, the black
   gradient, the words in their places); only the shapes differ. Reels (a) 9:16, Feed posts (b) 3:4, Explainer videos (c) 16:9,
   Event content (d) 3:5 (Ash's "9:16 or close": exact 9:16 puts the grid 4px over the site's 66%-of-the-screen limit), Long-form
   (e) 16:9, Motion posters (f) 4:5; each film cropped to its box (object-fit: cover). No other bento reads these rules.
   Phone: one column in the page's order, each card at its own shape.
   768 to 1279: rows of two at one height: Reels | Feed posts (3:7 | 4:7), Long-form | Explainer videos (half and half),
   Event content | Motion posters (3:7 | 4:7).
   1280 up: Reels down the left; beside it Long-form | Explainer videos over Feed posts | Event content | Motion posters. Every
   size is computed from the section's width W (100cqw) so each box is its shape exactly and every edge meets: the two rows do not
   share column lines, so the columns are the cards' edges and the 16px gaps are tracks of their own (column-gap 0):
     Reels 29.5691W - 6.07 · gap · Feed 24.5689W - 14.63 · gap · 10.6465W - 14.34 · gap · 9.0086W - 13.36 · gap · the rest (Motion)
     rows 19.8087W - 7.29 (the two 16:9 cards) · 32.7586W - 19.50 (the upright row)   [W in cqw]
   At 1440 (W 1224): Reels 356 x 633, Long-form and Explainer 418 x 235, Feed 286 x 381, Event 229 x 381, Motion 305 x 381. */
.svb__grid--formats > .svb__card { min-height: 0; }
.svb__grid--formats > .svb__card--a { aspect-ratio: 9 / 16; }
.svb__grid--formats > .svb__card--b { aspect-ratio: 3 / 4; }
.svb__grid--formats > .svb__card--c, .svb__grid--formats > .svb__card--e { aspect-ratio: 16 / 9; }
.svb__grid--formats > .svb__card--d { aspect-ratio: 3 / 5; }
.svb__grid--formats > .svb__card--f { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) {
  .svb__grid--formats { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .svb__grid--formats > .svb__card { flex: none; }
  .svb__grid--formats > .svb__card--a { order: 1; width: calc((100% - 16px) * 3 / 7); }
  .svb__grid--formats > .svb__card--b { order: 2; width: calc((100% - 16px) * 4 / 7 - 0.5px); }
  .svb__grid--formats > .svb__card--e { order: 3; width: calc((100% - 16px) / 2); }
  .svb__grid--formats > .svb__card--c { order: 4; width: calc((100% - 16px) / 2 - 0.5px); }
  .svb__grid--formats > .svb__card--d { order: 5; width: calc((100% - 16px) * 3 / 7); }
  .svb__grid--formats > .svb__card--f { order: 6; width: calc((100% - 16px) * 4 / 7 - 0.5px); }
}
@media (min-width: 80rem) {
  .svb:has(.svb__grid--formats) > .wrap { container-type: inline-size; }
  .svb__grid--formats { display: grid; column-gap: 0; row-gap: 16px;
    grid-template-columns: calc(29.5691cqw - 6.07px) 16px calc(24.5689cqw - 14.63px) 16px calc(10.6465cqw - 14.34px) 16px calc(9.0086cqw - 13.36px) 16px minmax(0, 1fr);
    grid-template-rows: calc(19.8087cqw - 7.29px) calc(32.7586cqw - 19.5px); }
  .svb__grid--formats > .svb__card { aspect-ratio: auto; width: auto; align-self: stretch; }
  .svb__grid--formats > .svb__card.svb__card--a { grid-column: 1 / 2; grid-row: 1 / 3; }
  .svb__grid--formats > .svb__card.svb__card--e { grid-column: 3 / 6; grid-row: 1; }
  .svb__grid--formats > .svb__card.svb__card--c { grid-column: 7 / 10; grid-row: 1; }
  .svb__grid--formats > .svb__card.svb__card--b { grid-column: 3 / 4; grid-row: 2; }
  .svb__grid--formats > .svb__card.svb__card--d { grid-column: 5 / 8; grid-row: 2; }
  .svb__grid--formats > .svb__card.svb__card--f { grid-column: 9 / 10; grid-row: 2; }
}

/* THE "CORPORATE" BENTO (Corporate films only, opt-in: .svb__grid--corporate; Ash 2026-10-25, Q24): five cards, the Events bento's
   full-bleed cards, each film filling its card (object-fit: cover). Leadership and interview (a) and the merged Company film card
   (b) are the top row at 16:9; Exhibition (d) and Podcasts (e) close to 16:9 and Event and conference (c, words) the bottom row,
   whose height is held to what the words need (270px at the least). At 1440: 604 x 340 twice over 466 x 270, 466 x 270, 260 x 270;
   626px. 768 to 1279: Leadership across, then Company | Exhibition, Podcasts | Event and conference. Phone: one column, each film
   card 16:9 or taller where its words need it. No other bento reads these rules. */
/* a film card is 16:9 of the column at the least, taller when its words need it (the card hides its overflow, so aspect-ratio's
   own minimum does not apply: the height is a min-height on the section's width instead) */
.svb:has(.svb__grid--corporate) > .wrap { container-type: inline-size; }
.svb__grid--corporate > .svb__card.is-bleed { min-height: 56.25cqw; }
@media (min-width: 48rem) {
  .svb__grid--corporate > .svb__card { min-height: 0; }
  .svb__grid--corporate > .svb__card.is-bleed { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (min-width: 48rem) {
  .svb__grid--corporate { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-areas: "a a" "b d" "e c"; }
  .svb__grid--corporate > .svb__card.svb__card--a { grid-area: a; } .svb__grid--corporate > .svb__card.svb__card--b { grid-area: b; }
  .svb__grid--corporate > .svb__card.svb__card--c { grid-area: c; } .svb__grid--corporate > .svb__card.svb__card--d { grid-area: d; }
  .svb__grid--corporate > .svb__card.svb__card--e { grid-area: e; }
  .svb__grid--corporate > .svb__card { align-self: stretch; }
}
@media (min-width: 80rem) {
  .svb__grid--corporate { grid-template-columns: repeat(18, minmax(0, 1fr)); column-gap: 16px;
    grid-template-rows: calc(28.125cqw - 4.5px) max(270px, 21.24cqw);
    grid-template-areas: "a a a a a a a a a b b b b b b b b b" "d d d d d d d e e e e e e e c c c c"; }
  .svb__grid--corporate > .svb__card.is-bleed { aspect-ratio: auto; }
}

/* THE "DOCUMENTARY" BENTO (Documentary & NGO films only, opt-in: .svb__grid--documentary; Q27, 2026-10-25, Neel's placement plan): six
   cards, the Events bento's full-bleed cards, each film filling its card (object-fit: cover). Four films, two words cards:
     1280 up, two rows, every size from the section's width W (100cqw):
       top: Impact and NGO film (a, an upright film) a quarter less 12px · Cultural and heritage (d, wide film) 16:9, half the row
            less 8px · Fundraising and appeal films (f, upright) the rest (4:5 loops in boxes a little wider: 294 x 340 at 1440);
       foot, max(270px, 21.24cqw) tall, Corporate's words row: CSR films (b, square film) 26cqw · Brand documentary (c) and Record
            and archive (e), words, half the rest each.
       At 1440 (W 1224): 294 x 340, 604 x 340, 294 x 340; 318 x 270, 437 x 270 twice; 626px, Corporate's height.
     768 to 1279: Impact | Fundraising, Heritage across, CSR | Brand documentary, Record and archive across.
     Phone: one column in the page's order, each film card its film's shape (taller where its words need it).
   No other bento reads these rules. */
.svb:has(.svb__grid--documentary) > .wrap { container-type: inline-size; }
.svb__grid--documentary > .svb__card.svb__card--d { min-height: 56.25cqw; }
.svb__grid--documentary > .svb__card.svb__card--b { min-height: 100cqw; }
.svb__grid--documentary > .svb__card.svb__card--a, .svb__grid--documentary > .svb__card.svb__card--f { min-height: 125cqw; }
@media (min-width: 48rem) {
  .svb__grid--documentary { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-areas: "a f" "d d" "b c" "e e"; }
  .svb__grid--documentary > .svb__card.svb__card--a { grid-area: a; min-height: calc(62.5cqw - 10px); } .svb__grid--documentary > .svb__card.svb__card--b { grid-area: b; min-height: calc(50cqw - 8px); }
  .svb__grid--documentary > .svb__card.svb__card--c { grid-area: c; min-height: 0; } .svb__grid--documentary > .svb__card.svb__card--d { grid-area: d; min-height: 56.25cqw; }
  .svb__grid--documentary > .svb__card.svb__card--e { grid-area: e; min-height: 0; } .svb__grid--documentary > .svb__card.svb__card--f { grid-area: f; min-height: calc(62.5cqw - 10px); }
  .svb__grid--documentary > .svb__card { align-self: stretch; }
}
@media (min-width: 80rem) {
  .svb__grid--documentary { display: flex; flex-wrap: wrap; gap: 16px; }
  .svb__grid--documentary > .svb__card.svb__card--a, .svb__grid--documentary > .svb__card.svb__card--d, .svb__grid--documentary > .svb__card.svb__card--f { height: calc(28.125cqw - 4.5px); min-height: 0; }
  .svb__grid--documentary > .svb__card.svb__card--b, .svb__grid--documentary > .svb__card.svb__card--c, .svb__grid--documentary > .svb__card.svb__card--e { height: max(270px, 21.24cqw); min-height: 0; }
  .svb__grid--documentary > .svb__card.svb__card--a { order: 1; flex: 0 0 calc(25cqw - 12px); }
  .svb__grid--documentary > .svb__card.svb__card--d { order: 2; flex: 0 0 calc(50cqw - 8px); }
  .svb__grid--documentary > .svb__card.svb__card--f { order: 3; flex: 1 1 calc(25cqw - 13px); }   /* 1px under its share: the row is full, and rounding never wraps it */
  .svb__grid--documentary > .svb__card.svb__card--b { order: 4; flex: 0 0 26cqw; }
  .svb__grid--documentary > .svb__card.svb__card--c { order: 5; flex: 1 1 calc(37cqw - 16px); }
  .svb__grid--documentary > .svb__card.svb__card--e { order: 6; flex: 1 1 calc(37cqw - 17px); }
}

/* THE "POST" BENTO (Post-production & AI video only, opt-in: .svb__grid--post; Q28, 2026-10-25, Neel's placement plan): six cards, the
   Events bento's full-bleed cards, every one filled by its film (object-fit: cover; the Paapi reel's letterbox is cropped off by the
   template's cropVars). Two wide films, three upright, one square picture:
     1280 up, two rows of 25cqw - 1px (305 at 1440), every size from the section's width W (100cqw):
       top: Editing (a, wide) 56cqw - 32px · Colour grading (b, upright) 22cqw · Cutdowns and versions (d, upright) the rest;
       foot: AI motion posters (f, upright) 22cqw · Motion and animation (c, square) as wide as the row is tall · AI videos (e, wide)
            the rest.
       At 1440 (W 1224): 653 x 305, 269 x 305 twice; 269 x 305, 305 x 305, 618 x 305; 626px, Corporate's height.
     768 to 1279: Editing across, Colour grading | Cutdowns, AI videos across, Motion | AI motion posters.
     Phone: one column in the page's order, the wide films 16:9, the upright ones 4:5, the square one 1:1.
   No other bento reads these rules. */
.svb:has(.svb__grid--post) > .wrap { container-type: inline-size; }
.svb__grid--post > .svb__card.svb__card--a, .svb__grid--post > .svb__card.svb__card--e { min-height: 56.25cqw; }
.svb__grid--post > .svb__card.svb__card--c { min-height: 100cqw; }
.svb__grid--post > .svb__card.svb__card--b, .svb__grid--post > .svb__card.svb__card--d, .svb__grid--post > .svb__card.svb__card--f { min-height: 125cqw; }
@media (min-width: 48rem) {
  .svb__grid--post { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-areas: "a a" "b d" "e e" "c f"; }
  .svb__grid--post > .svb__card.svb__card--a { grid-area: a; min-height: 56.25cqw; } .svb__grid--post > .svb__card.svb__card--e { grid-area: e; min-height: 56.25cqw; }
  .svb__grid--post > .svb__card.svb__card--b { grid-area: b; min-height: calc(62.5cqw - 10px); } .svb__grid--post > .svb__card.svb__card--d { grid-area: d; min-height: calc(62.5cqw - 10px); }
  .svb__grid--post > .svb__card.svb__card--c { grid-area: c; min-height: calc(50cqw - 8px); } .svb__grid--post > .svb__card.svb__card--f { grid-area: f; min-height: calc(62.5cqw - 10px); }
  .svb__grid--post > .svb__card { align-self: stretch; }
}
@media (min-width: 80rem) {
  .svb__grid--post { display: flex; flex-wrap: wrap; gap: 16px; }
  .svb__grid--post > .svb__card.svb__card--a, .svb__grid--post > .svb__card.svb__card--b, .svb__grid--post > .svb__card.svb__card--c,
  .svb__grid--post > .svb__card.svb__card--d, .svb__grid--post > .svb__card.svb__card--e, .svb__grid--post > .svb__card.svb__card--f { height: calc(25cqw - 1px); min-height: 0; }
  .svb__grid--post > .svb__card.svb__card--a { order: 1; flex: 0 0 calc(56cqw - 32px); }
  .svb__grid--post > .svb__card.svb__card--b { order: 2; flex: 0 0 22cqw; }
  .svb__grid--post > .svb__card.svb__card--d { order: 3; flex: 1 1 calc(22cqw - 1px); }   /* 1px under its share: the row is full, and rounding never wraps it */
  .svb__grid--post > .svb__card.svb__card--f { order: 4; flex: 0 0 22cqw; }
  .svb__grid--post > .svb__card.svb__card--c { order: 5; flex: 0 0 calc(25cqw - 1px); }
  .svb__grid--post > .svb__card.svb__card--e { order: 6; flex: 1 1 calc(53cqw - 32px); }
}

/* ---------- svp: "What you receive", one ruled strip ----------
   The Creative Director's spec of 2026-10-15 (the vault's creative_director_strip_depth_receive_spec.md, section 2),
   after the founder: "what you receive is way too big ... I want what you receive in one single strip". It was
   Superside's three-column grid of 80px tiles and 28/36 titles: four items stranded one on a second row.
     A RULED BAND, NOT CARDS: a 1px rule above and below at 16% of the ink, a 1px rule at 12% centred in each gap
     between cells for the row's full height (a rule between rows where a count takes two), no grounds.
     ONE ROW from 1024 for three or four items, five and six from 1280 (two rows of three below that); from 768,
     one row up to three, four as two by two; a phone, a ruled list (one item a row: the ring below is already the
     page's one sideways thing).
     THE TILE BESIDE THE TITLE where the cell is 240px or wider (its first line centred on the tile), above it
     where narrower. The cell's width is the grid's own (a container query: cell = (grid - (cols - 1) x gap) /
     cols), so a window with a scrollbar decides right too. A phone always has the tile at the left.
     ONE SHARED LINE: every title and every line in a row start together (each cell a subgrid over the row's two
     or three tracks), so a two-line title pushes every line down at once. Without subgrid the cells simply stand
     unaligned.
     SIZES BY COUNT (the generator writes svp--n<count>; three to six), in px:
                 cells at 1440   tile (glyph)   title        line
       1280 up   n3 376          44 (22)        22/28 500    18/26 at 64%
                 n4 270          40 (20)        20/26        16/24
                 n5 219 · n6 177 36 (18)        18/24        15/22
       1024      n3 288          44 (22)        22/28        18/26
                 n4 206 · n5, n6 288 (two rows)   36 (18)   18/24   15/22
       768, 375  36 (18), 18/24, 15/22
       gaps 48 from 1280 (32 for five and six) · 40 at 1024-1279 · 32 at 768-1023 · cell padding 28 / 24 / 20
     The section's rhythm: 96 above and 64 below from 1024 (was 128 and 128), 80 / 56 at 768, 64 / 48 on a phone;
     the head 48 above the strip from 1024 (was 80), 40 at 768, 32 on a phone. The head itself is the template's. */
.svp { padding-block: 64px 48px; }
.svp .sv__head { margin-bottom: 32px; }
.svp__grid {
  --cols: 1; --gap: 0px; --tile: 36px; --tfs: 1.125rem; --tlh: 1.5rem; --bfs: 0.9375rem; --blh: 1.375rem;
  container: svp / inline-size;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0;
  border-top: 1px solid rgba(244, 247, 251, 0.16); border-bottom: 1px solid rgba(244, 247, 251, 0.16);
}
/* a phone: the tile at the left of its title and line, the title's first line centred on the tile; a rule between items */
.svp__item { position: relative; display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "tile b"; gap: 4px 14px; align-content: start; padding-block: 20px; }
.svp__item + .svp__item { border-top: 1px solid rgba(244, 247, 251, 0.12); }
.svp__tile { grid-area: tile; display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: 8px; background: rgba(244, 247, 251, 0.08); color: var(--ink); }
.svp__tile .glyph { width: calc(var(--tile) / 2); height: calc(var(--tile) / 2); }
.svp__t { grid-area: t; padding-top: calc((var(--tile) - var(--tlh)) / 2); font-size: var(--tfs); line-height: var(--tlh); font-weight: 500; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.svp__b { grid-area: b; font-size: var(--bfs); line-height: var(--blh); color: rgba(244, 247, 251, 0.64); text-wrap: pretty; }
@media (min-width: 48rem) {
  .svp { padding-block: 80px 56px; }
  .svp .sv__head { margin-bottom: 40px; }
  .svp__grid { --cols: 3; --gap: 32px; }
  .svp--n4 .svp__grid { --cols: 2; }
  /* the tile above the title (a cell under 240px): three tracks of the row, shared by every cell in it */
  .svp__item { grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tile" "t" "b"; row-gap: 12px; padding-block: 24px; }
  .svp__item + .svp__item { border-top: 0; }
  .svp__t { padding-top: 0; }
  /* the rule between two cells, centred in their gap, the row's full height */
  .svp__item:not(:first-child)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: rgba(244, 247, 251, 0.12); }
}
/* where a count takes two rows, the second row's first cell starts its row (no rule at its left) and draws the rule
   between the rows across the whole grid */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .svp--n4 .svp__item:nth-child(3)::before, :is(.svp--n5, .svp--n6) .svp__item:nth-child(4)::before { content: none; }
  .svp--n4 .svp__item:nth-child(3)::after, :is(.svp--n5, .svp--n6) .svp__item:nth-child(4)::after { content: ""; position: absolute; top: 0; left: 0; width: calc(100% * var(--cols) + var(--gap) * (var(--cols) - 1)); height: 1px; background: rgba(244, 247, 251, 0.12); }
}
@media (min-width: 64rem) {
  .svp { padding-block: 96px 64px; }
  .svp .sv__head { margin-bottom: 48px; }
  .svp__grid { --gap: 40px; }
  .svp--n4 .svp__grid { --cols: 4; }
  .svp__item { padding-block: 28px; }
  .svp--n3 .svp__grid { --tile: 44px; --tfs: 1.375rem; --tlh: 1.75rem; --bfs: 1.125rem; --blh: 1.625rem; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  :is(.svp--n5, .svp--n6) .svp__item:nth-child(4)::before { content: none; }
  :is(.svp--n5, .svp--n6) .svp__item:nth-child(4)::after { content: ""; position: absolute; top: 0; left: 0; width: calc(100% * var(--cols) + var(--gap) * (var(--cols) - 1)); height: 1px; background: rgba(244, 247, 251, 0.12); }
}
@media (min-width: 80rem) {
  .svp__grid { --gap: 48px; }
  :is(.svp--n5, .svp--n6) .svp__grid { --gap: 32px; }
  .svp--n5 .svp__grid { --cols: 5; }
  .svp--n6 .svp__grid { --cols: 6; }
  .svp--n4 .svp__grid { --tile: 40px; --tfs: 1.25rem; --tlh: 1.625rem; --bfs: 1rem; --blh: 1.5rem; }
}
/* THE TILE BESIDE THE TITLE where the cell is 240px or wider: the grid's width at which (grid - (cols - 1) x gap) /
   cols reaches 240, for each count's columns and gap. Two tracks of the row: the tile and title, then the line. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  @container svp (min-width: 784px) { :is(.svp--n3, .svp--n5, .svp--n6) .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } :is(.svp--n3, .svp--n5, .svp--n6) .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
  @container svp (min-width: 512px) { .svp--n4 .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } .svp--n4 .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  @container svp (min-width: 800px) { :is(.svp--n3, .svp--n5, .svp--n6) .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } :is(.svp--n3, .svp--n5, .svp--n6) .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
  @container svp (min-width: 1080px) { .svp--n4 .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } .svp--n4 .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
}
@media (min-width: 80rem) {
  @container svp (min-width: 816px) { .svp--n3 .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } .svp--n3 .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
  @container svp (min-width: 1104px) { .svp--n4 .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } .svp--n4 .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
  /* five and six: 1,328 and 1,600px, wider than the 1,224px container, so their tiles stay above */
  @container svp (min-width: 1328px) { .svp--n5 .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } .svp--n5 .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
  @container svp (min-width: 1600px) { .svp--n6 .svp__item { grid-row: span 2; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "tile t" "b b"; column-gap: 14px; row-gap: 10px; } .svp--n6 .svp__t { padding-top: calc((var(--tile) - var(--tlh)) / 2); } }
}

/* ---------- svs: a statement ----------
   The heading in the left half and its passage in the right (from 1024; stacked below), the passage at the
   intro's sizes. Where Superside's "how we use AI" card stands, and for a page's one long claim. */
.svs__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; align-items: start; }
.svs__head { display: grid; gap: 16px; justify-items: start; }
.svs__body { display: grid; gap: 16px; max-width: 62ch; font-size: 1rem; line-height: 1.5; color: var(--text); }
.svs__body p { text-wrap: pretty; }
/* THE SPLIT INTRO (Ash, 2026-10-24: "the text to video ratio is off, the panel seems weird"; the service pages only: .svi--split from
   svcIntro): the label and its rule across the top; then a 12-column split, the words in six and the film in six (seven when the film is wide,
   .svi--wide), 64px apart, both starting at the heading's top. The heading is the site's H2 step (48/56 at 1440, 32/38 on a phone), the line
   22/32, the passage 17/28 in at most 60 characters. The film is as tall as the words (to 640px, and never more than the window less 220px),
   centred in its column, 10px corners. Section padding 96 above and below (64 on a phone). On a phone: label, heading and line, the film, the passage. */
.svi--split { padding-block: 64px; }
.svi--split .svi__in { align-items: start; row-gap: 24px; }
.svi--split .svi__label { grid-column: 1 / -1; }
.svi--split .svi__head { display: grid; gap: 16px; justify-items: start; }
main:has(> .svh) .svi--split :is(.h2, .h3) { font-size: 2rem; line-height: 2.375rem; }
.svi--split .svi__lead { font-size: 1.25rem; line-height: 1.75rem; max-width: 60ch; }
.svi--split .svi__body { gap: 16px; font-size: 1.0625rem; line-height: 1.75rem; max-width: 60ch; }
.svi--split .svi__film { --svi-h: min(640px, calc(100svh - 220px)); }
.svi--split .svi__film > .film { width: min(100%, calc(min(480px, 62svh) * var(--ar))); border-radius: 10px; }
@media (min-width: 64rem) {
  .svi--split { padding-block: 96px; }
  .svi--split .svi__in { column-gap: 64px; row-gap: 32px; grid-template-areas: "label label" "head film" "body film"; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
  .svi--split.svi--wide .svi__in { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); }   /* a wide film takes the larger share, and stands level with the middle of the words */
  .svi--split.svi--wide .svi__film { align-self: center; }
  main:has(> .svh) .svi--split.svi--wide :is(.h2, .h3) { font-size: 2.75rem; line-height: 3.25rem; }
  .svi--split .svi__label { grid-area: label; }
  .svi--split .svi__head { grid-area: head; gap: 24px; }
  .svi--split .svi__body { grid-area: body; align-self: start; }
  .svi--split .svi__film { grid-area: film; justify-items: center; align-self: start; }
  main:has(> .svh) .svi--split :is(.h2, .h3) { font-size: 3rem; line-height: 3.5rem; }
  .svi--split .svi__lead { font-size: 1.375rem; line-height: 2rem; }
  .svi--split .svi__film > .film { width: min(100%, calc(var(--svi-h) * var(--ar))); }
}

.svs__body .svi__lead { margin-bottom: 8px; }
@media (min-width: 64rem) {
  .svs__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .svs__head { grid-column: 1 / span 6; }
  .svs__body { grid-column: 7 / -1; padding-top: 37px; font-size: 1.125rem; line-height: 1.444; }
}

/* ---------- svf: where it runs (the platform panel, service-template.mjs svcPlatform) ----------
   Superside's "Platform proficiency" pattern, on navy, directly above the slider (Ash, 2026-10-25): the label (the section head's own, small
   and spaced, centred), a centred two-line heading at the H2 size with its serif phrase, then three cards in a row (one column on a phone).
   A card: a 56px tile in navy-2 with a 24px lime stroke glyph, 20px to the title (20/26 at 768, 24/28 from 1024, 500), 8px to the line
   (16/24, 74% ink). 72px above and below on a phone, 96 from 768. The heading holds to 1100px so a line of 60-odd characters sets in two lines. */
.sv.svf { padding-bottom: 72px; }
/* the ring stage carries its own air above its first card (about 290px at 1440), so the panel gives none of its own beneath the cards */
.sv.svf:has(+ .svx) { padding-bottom: 0; }
.svf .sv__head { margin-bottom: 40px; }
.svf .sv__head .h2 { max-width: 1100px; margin-inline: auto; }
.svf__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.svf__card { display: grid; justify-items: start; align-content: start; }
.svf__tile { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 14px; background: var(--pine-2); color: var(--spark); }
.svf__tile .glyph { width: 24px; height: 24px; }
.svf__t { font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.svf__b { margin-top: 8px; max-width: 36ch; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 251, 0.74); text-wrap: pretty; }
@media (min-width: 48rem) {
  .sv.svf { padding-bottom: 96px; }
  .svf .sv__head { margin-bottom: 56px; }
  .svf__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 64rem) {
  .svf .sv__head { margin-bottom: 64px; }
  .svf__cards { gap: 48px; }
  .svf__t { font-size: 1.5rem; line-height: 1.1667; }
}

/* ---------- svt: the timeline ----------
   Superside: the heading (60/72) and its line (18/26, 32 under it) in the left half, held 112px from the
   top while the steps pass in the right half. A step: a 56px ring (a 2px line at 15% of the ink, lime once
   reached), its number in the upright serif at 24/32, 32px to the name (24/28 at 400) and its line (18/26
   at 60%, 8 under the name); steps 80px apart. On a phone the ring stands at the left edge, 12px to the
   words (20/26 and 16/24), steps 48px apart. The rail between rings is 2px at 15%; the lime fill runs down it
   to the middle of the window (site.js does not do this; src/assets/service.js does). */
/* ONE SCREEN (Ash, 2026-10-24: "How a project runs" must fit one screen: at most 820px at 1440x900, 760px at 375x812; on top of the
   Creative Director's compact spec, creative_director_how_it_runs_compact.md). The steps are a ROW, not a column.
   From 1200: the heading above (the line beside it), the steps in one row of equal columns, each a 44px ring on a horizontal rail
   (2px at 15%, lime as the page scrolls; service.js), then its name and its line (16/24, 74% ink); section padding 64. The old pin
   is dropped: a section shorter than the window has nothing to hold still against.
   Below 1200: the same steps as a swipe row (scroll-snap, one and a peek showing, 32px rings); the rail fills lime as you swipe.
   Type floors unchanged: body 16, contrast 9.1:1 on the pine. */
.sv.svt { padding-block: 40px; }
.svt__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
.svt__head { display: grid; gap: 8px; justify-items: start; }
.svt__lead { max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.svt__steps { --svt-gap: 16px; display: flex; gap: var(--svt-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--margin) * -1); padding: 0 var(--margin) 4px; scroll-padding-inline: var(--margin); scrollbar-width: none; }
.svt__steps::-webkit-scrollbar { display: none; }
.svt__step { position: relative; flex: 0 0 min(86%, 360px); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-items: start; align-content: start; }
.svt__step:not(:last-child)::before, .svt__step:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 15px; height: 2px; width: calc(100% - 32px + var(--svt-gap)); }
.svt__step:not(:last-child)::before { background: rgba(244, 247, 251, 0.15); }
.svt__step:not(:last-child)::after { background: #D8FF85; transform-origin: left; transform: scaleX(var(--f, 0)); }
.svt__ring { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pine);
  box-shadow: inset 0 0 0 2px rgba(244, 247, 251, 0.15); font-family: var(--serif); font-style: normal; font-size: 1.25rem; line-height: 1.333; color: var(--ink); font-variant-numeric: lining-nums; transition: box-shadow 200ms linear; }
.svt__step.is-on .svt__ring { box-shadow: inset 0 0 0 2px #D8FF85; }
.svt__text { display: grid; gap: 2px; }
.svt__t { font-size: 1.125rem; line-height: 1.3333; font-weight: 400; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.svt__b { max-width: 64ch; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 251, 0.74); text-wrap: pretty; }
@media (min-width: 48rem) { .sv.svt { padding-block: 56px; } .svt__steps { --svt-gap: 24px; } .svt__step { flex-basis: min(46%, 360px); } }
@media (min-width: 75rem) {
  .sv.svt { padding-block: 64px; }
  .svt__in { row-gap: 40px; }
  .svt__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); align-items: end; }
  .svt__head > .sv__label { grid-column: 1 / -1; }
  .svt__head > :is(.h2) { grid-column: 1; grid-row: 2 / span 2; }
  .svt__head > .svt__lead { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.0625rem; line-height: 1.444; }
  .svt__head > .actions { grid-column: 2; grid-row: 3; }
  .svt__steps { --svt-gap: 32px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .svt__step { flex: none; row-gap: 16px; }
  .svt__step:not(:last-child)::before, .svt__step:not(:last-child)::after { left: 44px; top: 21px; width: calc(100% - 44px + var(--svt-gap)); }
  .svt__ring { width: 44px; height: 44px; }
  .svt__t { font-size: 1.375rem; line-height: 1.2727; }
}

/* ---------- svt--v: HOW IT RUNS, a vertical timeline, its own panel (Ash, 2026-10-25: "its own panel directly after the slider, the steps stacked
   vertically ... compact type"; the seven service pages, svcTimeline) ----------
   The steps one under another, each a 40px ring with its number in the serif, the step's name (20/28) and its line (16/24 at 74% ink) beside it, 32px
   apart; a 2px rail at 15% of the ink runs down through the rings and fills lime as the page scrolls (service.js, the vertical branch). The words column is at
   most 720px. From 1024 the heading holds the left four columns (and stays in view while the steps pass) and the steps take the right eight; below that the
   heading is over the list. A phone gets the same list. The Services page's and About's rows keep the row version above (they do not carry .svt--v). */
.sv.svt.svt--v { padding-block: 56px; border-top: 1px solid var(--on-ink-line); }
.svt--v .svt__in { row-gap: 32px; }
.svt--v .svt__steps { --svt-gap: 32px; display: grid; grid-auto-flow: row; grid-auto-columns: auto; gap: var(--svt-gap); overflow: visible; margin: 0; padding: 0; max-width: 720px; scroll-snap-type: none; }
.svt--v .svt__step { flex: none; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; scroll-snap-align: none; }
.svt--v .svt__step:not(:last-child)::before, .svt--v .svt__step:not(:last-child)::after { left: 19px; top: 40px; width: 2px; height: calc(100% - 40px + var(--svt-gap)); }
.svt--v .svt__step:not(:last-child)::after { transform-origin: top; transform: scaleY(var(--f, 0)); }
.svt--v .svt__ring { width: 40px; height: 40px; font-size: 1.25rem; }
.svt--v .svt__text { gap: 4px; padding-top: 6px; }
.svt--v .svt__t { font-size: 1.25rem; line-height: 1.4; }
.svt--v .svt__b { max-width: 60ch; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 251, 0.74); }
@media (min-width: 64rem) {
  .sv.svt.svt--v { padding-block: 80px; }
  .svt--v .svt__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; }
  .svt--v .svt__head { grid-column: 1 / span 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; position: sticky; top: calc(var(--hdr, 72px) + 32px); }
  .svt--v .svt__head > .sv__label { grid-column: 1; }
  .svt--v .svt__head > .h2 { grid-column: 1; grid-row: auto; }
  .svt--v .svt__head > .svt__lead { grid-column: 1; grid-row: auto; margin: 0; font-size: 1rem; line-height: 1.5; }
  .svt--v .svt__steps { grid-column: 5 / -1; --svt-gap: 36px; }
  .svt--v .svt__step { column-gap: 20px; }
  .svt--v .svt__ring { width: 44px; height: 44px; }
  .svt--v .svt__step:not(:last-child)::before, .svt--v .svt__step:not(:last-child)::after { left: 21px; top: 44px; height: calc(100% - 44px + var(--svt-gap)); }
  .svt--v .svt__step { grid-template-columns: 44px minmax(0, 1fr); }
  .svt--v .svt__text { padding-top: 8px; }
}

/* ---------- THE ONE NAVY BLOCK (Ash, 2026-10-25: the platform panel, the slider and How it runs "as ONE continuous navy block ... the current ones
   have a lot of gaps") ----------
   The three share one ground and no seam (no hairline between them). The spaces are tight and set here, not by each section's own rhythm:
     - the platform panel: 72px above (56 on a phone), nothing below;
     - panel to stage: 48px (32 on a phone) from the cards to the highest film. The stage's own air above its films (the band's top, the swing and the
       room the floor needs) is read by the ring engine (bto-ring-strip.js topOfFilms(), --svx-air) and cancelled by pulling the stage up under the panel
       by that air less 48px. The panel stands above the canvas (z-index), so nothing of the canvas shows over its words, and the canvas is the same navy.
       The films keep their size: only the empty air above them goes;
     - stage to How it runs: 48px (32 on a phone) from the info block to the heading, and no hairline;
     - How it runs: 72px below (56 on a phone). It keeps its vertical timeline, the heading on the left. */
.sv.svf { padding-top: 56px; position: relative; z-index: 2; }
.svf + .svx.is-gl { margin-top: calc(-1 * max(0px, var(--svx-air, 0px) - 32px)); }
.svx + .sv.svt.svt--v { border-top: 0; padding-top: 32px; }
/* the floor's feather (the stage's last rows, --svx-stage-foot) counts as the space below the info block: the canvas, which reaches to the section's
   foot, is let lie over the heading's padding by as much as it is deep, so the distance to the heading is the larger of the two, never their sum */
.svx.is-gl:has(+ .svt--v) { margin-bottom: calc(-1 * min(var(--svx-stage-foot, 0px), 32px)); }
.sv.svt.svt--v { padding-bottom: 56px; }
@media (min-width: 48rem) {
  .sv.svf { padding-top: 72px; }
  .svf + .svx.is-gl { margin-top: calc(-1 * max(0px, var(--svx-air, 0px) - 48px)); }
  .svx + .sv.svt.svt--v { padding-top: 48px; }
  .svx.is-gl:has(+ .svt--v) { margin-bottom: calc(-1 * min(var(--svx-stage-foot, 0px), 48px)); }
  .sv.svt.svt--v { padding-bottom: 72px; }
}
@media (min-width: 64rem) {
  .svx + .sv.svt.svt--v { padding-top: 48px; }
  .sv.svt.svt--v { padding-bottom: 72px; }
}

/* ---------- svc: the closing card ----------
   Superside: 1216 x 408 at 1440, 128px under the section's top, 10px corners (7.5 measured; the site's
   10 here), 48px inside; a 48/56 heading at most 512px wide (28/36 on a phone), 16 to an 18/26 line (16/24),
   24 to the button. Their photograph fills the card; here a film stands in its other half at its own shape,
   no taller than the card's inside. */
.svc__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 16px 16px; border-radius: var(--r); background: var(--pine); overflow: hidden; }
.svc__words { display: grid; gap: 16px; justify-items: start; align-content: center; }
.svc__words .eyebrow { margin-bottom: -4px; }
.svc__h { max-width: 512px; font-size: 1.75rem; line-height: 1.2857; font-weight: 400; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.svc__lead { max-width: 512px; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 251, 0.86); text-wrap: pretty; }
.svc__words .actions { margin-top: 8px; }
.svc__direct { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; border-top: 1px solid rgba(244, 247, 251, 0.18); font-size: 0.9375rem; line-height: 1.47; font-weight: 500; color: var(--ink); }
.svc__direct a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.svc__card :focus-visible { outline-color: #FFFFFF; }
.svc__film { display: grid; justify-items: center; align-items: center; }
.svc__film > .film { width: min(100%, calc(360px * var(--ar))); }
@media (max-width: 47.99rem) { .svc__words .actions, .svc__words .btn { width: 100%; } }
/* Ash's picture for the page, in place of the solid pine (2026-10-19; src/data/banner-pictures.mjs): it covers the whole
   card under its rounded corners; the words and the film stay where they were, on top. */
.svc__card.has-art { position: relative; isolation: isolate; --shade: 0.65; }
.svc__art { position: absolute; inset: 0; z-index: -2; }
.svc__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* A shade on the words' side only, never over the film: drawn by the words' own box out to the card's edges, at the card's
   pine, fading out in the gap before the film. Stacked, it runs from the card's top to just under the words. Its strength is
   the lightest that keeps every line at 4.5:1 (the heading 3:1) over the brightest tenth of the pixels under it, on all six
   pictures, measured 2026-10-19 in steps of 0.05: 0.65 stacked (768, 600, 375), 0.55 side by side (1024, 1280, 1440). */
.has-art .svc__words { position: relative; }
.has-art .svc__words::before { content: ""; position: absolute; inset: -32px -16px -16px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 29, 42, var(--shade)) 0%, rgba(18, 29, 42, var(--shade)) calc(100% - 16px), rgba(18, 29, 42, 0) 100%); }
@media (min-width: 64rem) {
  .svc__card.has-art { --shade: 0.55; }
  .has-art .svc__words::before { inset: -48px -24px -48px -48px;
    background: linear-gradient(90deg, rgba(18, 29, 42, var(--shade)) 0%, rgba(18, 29, 42, var(--shade)) calc(100% - 24px), rgba(18, 29, 42, 0) 100%); }
}
@media (min-width: 64rem) {
  .svc__card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; min-height: 408px; padding: 48px; }
  .svc__h { font-size: 3rem; line-height: 1.1667; }
  .svc__lead { font-size: 1.125rem; line-height: 1.444; }
  .svc__words .actions { margin-top: 8px; }
  .svc__film { justify-items: end; }
  .svc__film > .film { width: min(100%, calc(312px * var(--ar))); }
}

/* ---------- svr: the other services, where Superside lists articles ----------
   Superside: the label centred, a 28/36 heading (22/28 on a phone), 80px to three cards 16px apart. A card:
   the meta line 12/18 (here the menu's group label), the title 20/28 at 500, the line 16/24 at 50% (here
   the menu's line, at the site's muted ink). Their cards lead with a picture; By The Owl's have none, so each
   is a pale card, the whole card a link. */
.svr__h { font-size: 1.375rem; line-height: 1.2727; font-weight: 400; letter-spacing: 0.1px; color: var(--ink); text-wrap: balance; }
.svr__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.svr__grid > li { display: grid; }
.svr__card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; min-height: 196px; padding: 24px; border-radius: var(--r); background: var(--cloud-2); color: var(--pine); transition: background-color 150ms var(--ease); }
.svr__card:hover { background: var(--cloud-3); }
.svr__meta { font-size: 0.75rem; line-height: 1.533; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.svr__t { font-size: 1.25rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.1px; text-wrap: balance; }
.svr__b { font-size: 1rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.svr__card > .ic { justify-self: end; width: 20px; height: 20px; transition: transform 150ms var(--ease); }
.svr__card:hover > .ic { transform: translateX(4px); }
.svr__all { margin-top: 32px; text-align: center; }
@media (min-width: 48rem) { .svr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .svr__h { font-size: 1.75rem; line-height: 1.2857; } .svr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- svq: the questions ----------
   Superside: the label, the heading (60/72, at most 600px), 80px to the list (48 on a phone). Each question
   20/26 at 500 (16/24 on a phone) with a 24px plus at the right, 32px above and below it (16 on a phone), a
   hairline at 15% of the ink under it. The answer 18/26 (16/24), 32px under it before the line. Superside runs
   the answer the container's full width; here it stops at 72 characters, so it can be read. */
.svq .sv__head .h2 { max-width: 600px; }
.svq--center .sv__head .h2 { max-width: 840px; }
.svq__item { border-bottom: 1px solid rgba(18, 29, 42, 0.15); }
.svq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; cursor: pointer; list-style: none; }
.svq__item summary::-webkit-details-marker { display: none; }
.svq__q { font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--ink); }
.svq__plus { flex: none; width: 24px; height: 24px; color: var(--ink); }
.svq__item[open] .svq__plus .v { display: none; }
.svq__item summary:hover .svq__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.svq__a { max-width: 72ch; padding-bottom: 24px; font-size: 1rem; line-height: 1.5; color: var(--text); }
@media (min-width: 48rem) {
  .svq__item summary { padding-block: 32px; }
  .svq__q { font-size: 1.25rem; line-height: 1.3; }
  .svq__a { padding-bottom: 32px; font-size: 1.125rem; line-height: 1.444; }
}

/* ---------- motion: off when the visitor asks ---------- */
@media (prefers-reduced-motion: reduce) { .svt__ring { transition: none; } .svr__card:hover > .ic { transform: none; } }
@media (forced-colors: active) { .svh__film::after { display: none; } .svt__step.is-on .svt__ring { box-shadow: inset 0 0 0 2px Highlight; } }

/* ---------- THE FROSTED CARD (Ash, 2026-10-26: a bento card "becomes a frosted glass where it is transparent and showing everything
   which is behind and the information comes up above the transparent frosted glass ... I just want a title in the middle"; type pass the
   same day, Creative Director, after "the glass text looks too basic": the Services page's "Films we produce" band at card scale, the
   vault's clients/bytheowl/whiteboard/2026-10-13__fresh-site/creative_director_frosted_card_type.md) ----------
   Every full-bleed bento card on the service pages (.is-bleed). At rest the film plays under a soft dim and only the title shows,
   centred, with its phrase in focus in Instrument Serif italic (data: the card's `focus`). Open (hover on a fine pointer, keyboard
   focus, or a tap: service.js 3, .is-open), a pane of frosted glass fades over the film and the card becomes the band in small: the
   card's number as a lime eyebrow (01 / 07, counted, never typed), the title in lime, a short lime rule, the line in cloud at 86%,
   and its "Right when" led by a tracked lime label. Centred throughout, so the title never jumps between its two states. Each card
   sizes its type by its OWN width and height (the words are a size container), not the page's: narrow cards (under 240px of words),
   middle, wide (400px and up), and short (240px of height or less). Contrast is measured on rendered pixels behind the hidden words,
   three frames a card: titles 24px and up (3:1), everything smaller 4.5:1, at 1440, 1024 and 375. */
.svb__more-in { display: grid; gap: 8px; min-height: 0; }
.svb__card.is-bleed { --glass-ease: cubic-bezier(0.2, 0.8, 0.2, 1); }
.svb__card.is-bleed:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }
.svb__card.is-bleed .svb__words { position: absolute; inset: 0; z-index: 1; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 20px 20px clamp(20px, calc(46px + (340px - 100%) * 0.33), 46px); text-align: center; }
.svb__card.is-bleed .svb__top { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--glass-ease); }
.svb__card.is-bleed .svb__top-in { overflow: hidden; min-height: 0; }
.svb__card.is-bleed .svb__n { margin: 0 0 8px; font-size: 0.6875rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--spark);
  opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 300ms var(--glass-ease); }
.svb__card.is-bleed .svb__t { max-width: 16ch; font-size: 1.5rem; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; color: var(--cloud);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 0, 0, 0.5); transition: color 320ms ease, text-shadow 320ms ease; }
.svb__t em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.16em; line-height: 1; letter-spacing: 0; }
.svb__card.is-bleed .svb__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--glass-ease); }
.svb__card.is-bleed .svb__more-in { overflow: hidden; }
.svb__card.is-bleed .svb__more-in::before { content: ""; width: 28px; height: 1px; margin: 10px auto 2px; background: rgba(216, 255, 133, 0.6); transform: scaleX(0); transition: transform 300ms var(--glass-ease); }
.svb__card.is-bleed :is(.svb__b, .svb__when, .svb__points) { max-width: 34ch; margin-inline: auto; text-shadow: none; opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 300ms var(--glass-ease); }
.svb__card.is-bleed .svb__b { font-size: 0.84375rem; line-height: 1.4; color: rgba(244, 247, 251, 0.86); }
.svb__card.is-bleed .svb__when { font-size: 0.78125rem; line-height: 1.4; color: rgba(244, 247, 251, 0.76); }
.svb__card.is-bleed .svb__when b { margin-right: 0.15em; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--spark); }
@container (min-width: 240px) {
  .svb__card.is-bleed .svb__n { margin-bottom: 10px; }
  .svb__card.is-bleed .svb__more-in::before { margin-block: 12px 4px; }
  .svb__card.is-bleed .svb__t { font-size: 1.625rem; }
  .svb__card.is-bleed .svb__b { font-size: 0.9375rem; line-height: 1.5; }
  .svb__card.is-bleed .svb__when { font-size: 0.8125rem; line-height: 1.45; }
}
@container (min-width: 400px) {
  .svb__card.is-bleed .svb__t { max-width: 18ch; font-size: 2rem; line-height: 1.1; }
  .svb__card.is-bleed .svb__b { font-size: 1rem; }
  .svb__card.is-bleed .svb__when { font-size: 0.875rem; }
}
@container (max-height: 240px) {
  .svb__card.is-bleed .svb__t { max-width: none; font-size: 1.5rem; line-height: 1.1; }
  .svb__card.is-bleed :is(.svb__b, .svb__when, .svb__points) { max-width: 46ch; }
  .svb__card.is-bleed .svb__b { font-size: 0.875rem; line-height: 1.45; }
  .svb__card.is-bleed .svb__when { font-size: 0.78125rem; }
  .svb__card.is-bleed .svb__n { margin-bottom: 6px; }
  .svb__card.is-bleed .svb__more-in::before { margin-block: 8px 2px; }
}
@media (max-width: 47.99rem) {
  .svb__card.is-bleed:has(.svb__more)::after { content: ""; display: block; flex: none; height: calc(16rem - 2 * var(--svb-pad)); }
}
.svb__grid > .svb__card.is-bleed:is(.is-bleed)::before { opacity: 1; transition: opacity 420ms ease;
  background: radial-gradient(ellipse 80% 62% at 50% 48%, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.26) 72%, rgba(0, 0, 0, 0.16)); }
.svb__glass { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: inherit; transition: opacity 260ms ease;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0) 66%), rgba(15, 23, 33, 0.34);
  -webkit-backdrop-filter: blur(20px) saturate(1.4) brightness(0.62); backdrop-filter: blur(20px) saturate(1.4) brightness(0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.svb__plus { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: transform 420ms var(--glass-ease), background 200ms ease; }
.svb__plus::before, .svb__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
.svb__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* open */
.svb__card.is-bleed:is(:focus-visible, .is-open) .svb__glass { opacity: 1; transition-duration: 380ms; }
.svb__grid > .svb__card.is-bleed:is(:focus-visible, .is-open)::before { opacity: 0.3; }
.svb__card.is-bleed:is(:focus-visible, .is-open) :is(.svb__top, .svb__more) { grid-template-rows: 1fr; transition-duration: 460ms; }
.svb__card.is-bleed:is(:focus-visible, .is-open) .svb__t { color: var(--spark); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2); }
.svb__card.is-bleed:is(:focus-visible, .is-open) .svb__n { opacity: 1; transform: none; transition: opacity 320ms ease 80ms, transform 460ms var(--glass-ease) 80ms; }
.svb__card.is-bleed:is(:focus-visible, .is-open) .svb__more-in::before { transform: none; transition: transform 460ms var(--glass-ease) 140ms; }
.svb__card.is-bleed:is(:focus-visible, .is-open) .svb__b { opacity: 1; transform: none; transition: opacity 360ms ease 160ms, transform 460ms var(--glass-ease) 160ms; }
.svb__card.is-bleed:is(:focus-visible, .is-open) :is(.svb__when, .svb__points) { opacity: 1; transform: none; transition: opacity 360ms ease 230ms, transform 460ms var(--glass-ease) 230ms; }
.svb__card.is-bleed:is(:focus-visible, .is-open) .svb__plus { transform: rotate(45deg); background: rgba(255, 255, 255, 0.26); }
@media (hover: hover) {
  .svb__card.is-bleed:hover .svb__glass { opacity: 1; transition-duration: 380ms; }
  .svb__grid > .svb__card.is-bleed:is(.is-bleed):hover::before { opacity: 0.3; }
  .svb__card.is-bleed:hover :is(.svb__top, .svb__more) { grid-template-rows: 1fr; transition-duration: 460ms; }
  .svb__card.is-bleed:hover .svb__t { color: var(--spark); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2); }
  .svb__card.is-bleed:hover .svb__n { opacity: 1; transform: none; transition: opacity 320ms ease 80ms, transform 460ms var(--glass-ease) 80ms; }
  .svb__card.is-bleed:hover .svb__more-in::before { transform: none; transition: transform 460ms var(--glass-ease) 140ms; }
  .svb__card.is-bleed:hover .svb__b { opacity: 1; transform: none; transition: opacity 360ms ease 160ms, transform 460ms var(--glass-ease) 160ms; }
  .svb__card.is-bleed:hover :is(.svb__when, .svb__points) { opacity: 1; transform: none; transition: opacity 360ms ease 230ms, transform 460ms var(--glass-ease) 230ms; }
  .svb__card.is-bleed:hover .svb__plus { transform: rotate(45deg); background: rgba(255, 255, 255, 0.26); }
}
@media (prefers-reduced-motion: reduce) {
  .svb__card.is-bleed :is(.svb__top, .svb__more, .svb__glass, .svb__plus, .svb__t, .svb__n, .svb__b, .svb__when, .svb__points), .svb__card.is-bleed .svb__more-in::before, .svb__grid > .svb__card.is-bleed::before { transition-duration: 0s !important; transition-delay: 0s !important; }
  .svb__card.is-bleed :is(.svb__n, .svb__b, .svb__when, .svb__points) { transform: none; }
}
/* the point lists on the glass (Events' Multi-camera coverage carries two; the type spec styled them but no tested page had one):
   centred like the lines around them, a short lime dash before each, and a wider measure on a card that has a list so the lines take
   fewer rows (measured: the open card fills its 288px at 1024-1440 exactly, where it overflowed by 8px). */
.svb__card.is-bleed:has(.svb__points) :is(.svb__b, .svb__when, .svb__points) { max-width: 46ch; }
.svb__card.is-bleed .svb__points { justify-items: center; font-size: 0.8125rem; line-height: 1.4; color: rgba(244, 247, 251, 0.82); }
.svb__card.is-bleed .svb__points li { padding-left: 0; }
.svb__card.is-bleed .svb__points li::before { position: static; display: inline-block; vertical-align: middle; width: 8px; margin-right: 8px; background: var(--spark); }
/* ON A PHONE AN OPEN CARD GROWS (measured 2026-10-26 at 375 and 320: fourteen cards' open words were taller than the card's shape, so
   they ran under the close mark or off the card). A tapped card keeps its closed height as a floor (service.js 3 sets it), lets go of its
   shape, and takes its words back into its own flow, so it grows to fit them and the cards under it move down; closing gives the shape
   back. Tablets and desktops are unchanged: there every open card fits its shape (114 checks at 768-1440). */
@media (max-width: 47.99rem) {
  .svb__card.is-bleed.is-open { aspect-ratio: auto; height: auto; }
  .svb__card.is-bleed.is-open::after { display: none; }
  .svb__card.is-bleed.is-open .svb__words { position: relative; inset: auto; flex: 1 1 auto; container-type: inline-size; } /* inline-size: a size container cannot grow with its words */
}
/* Documentary's Record and archive card (e) was a words card when its tablet row was set to its words' height; it has carried a film
   since Q27, and with the words now floating over the film (the frosted card) it had no height of its own at 768-1279 (32px measured
   at 1024). It takes the 21:9 band across that the Brand page's wide card takes there. */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .svb__grid--documentary > .svb__card.svb__card--e { min-height: calc(100cqw * 9 / 21); }
}

/* ---------- MOBILE PASS (2026-10-28, the Creative Director's mobile QA) ----------
   2: the Brand opening's EDGE rule set its subject just past the right edge, so a phone and a 768 tablet saw only the empty left of
   the film under the shade. Below 1024 the hero is short and the heading sits under the film, so the subject is centred instead. */
@media (max-width: 63.99rem) {
  .svh__film--edge .film__frame img, .svh__film--edge .film__frame video {
    left: calc(50cqw - max(calc(100cqw / var(--cw)), calc(100cqh * var(--fa) / var(--ch))) * (var(--edge) + var(--edge-end)) / 2); }
}
/* 6: the service pages' 0.1px heading tracking broke the Get in touch heading to three lines ("Ask who / will be there / on the day.") */
main:has(> .svh) .cb__h { letter-spacing: -0.03em; }
/* 3: Services' "How a project runs" on a phone: the sideways step scroller read as cut-off text; the vertical list the service pages use */
@media (max-width: 47.99rem) {
  .sx-steps .svt__steps { --svt-gap: 32px; display: grid; grid-auto-flow: row; gap: var(--svt-gap); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .sx-steps .svt__step { flex: none; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; scroll-snap-align: none; }
  .sx-steps .svt__step:not(:last-child)::before, .sx-steps .svt__step:not(:last-child)::after { left: 15px; top: 32px; width: 2px; height: calc(100% - 32px + var(--svt-gap)); }
  .sx-steps .svt__step:not(:last-child)::after { transform-origin: top; transform: scaleY(var(--f, 0)); }
  .sx-steps .svt__text { gap: 4px; padding-top: 2px; }  /* the rings keep the row's 32 (check-services: Services' phone spec) */
}