@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400&display=swap');


  /* ── page-level, stated once ──────────────────────────────────────── */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --dark: #202022;
    --dark-2: #1A1A1C;
    --cream: #F7F5F2;
    --text-muted: #9A9AA0;
    --gold: #E8A849;
    --teal: #17B8A6;
    --fin: 0.35s;
    /* Summary treatment. 8pt = 10.67px. Weight sits at 200 rather than 100
       because at this size a 100 hairline drops below a pixel on most
       displays and breaks up regardless of contrast;
    change it here. */
    --summary-size: 8pt;
    --summary-weight: 200;
    --plate: 0.6s;
    /* cross-fade between image plates */
    --open: 0.5s;
    /* row open / close */
    --dial: 46px;
    /* the circle, and half the copy indent */
    --rail: 22px;
    /* dial to title */;
    --tint: var(--teal);
    /* the layover;
    swap for a truer green */
    /* A cast, not a duotone. The first pass ran grayscale(1) plus 0.62
       and flattened the reel into a green sheet;
    this wash is the whole
       treatment now. Calibrated against the footage as a flat overlay:
       0.08 barely registers, 0.20 starts taking the frame over, 0.15
       casts every shot while the Galore pink and the Vogue magenta still
       read as themselves. */
    --tint-strength: 0.15;
    --grain: 0.05;
    --band: 21 / 9;
    /* the band ratio on desktop */
    /* One cycle: a still mark, then the parts fan out at different rates
       and re-converge. Measured off the reference at roughly 1.2s held
       out of a 4.2s loop. */
    --turn: 4.2s;
    --hold: 30%;
    --ease: cubic-bezier(0.72, 0, 0.28, 1);
    --gold-hover: #d4963e;
    --white: #FFFFFF;
    --green-cta: #193F32;
    /* accent: interactive state only */
    --fin: 0.35s;
  }

  html, body {
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--dark);
    color: var(--cream);
  }
  body { overflow-x: hidden; }

  img, video { max-width: 100%; }


@keyframes s-work-t1 { 0%, 30% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes s-work-t2 { 0%, 30% { transform: rotate(0deg); }   100% { transform: rotate(-360deg); } }
@keyframes s-work-t3 { 0%, 30% { transform: rotate(0deg); }   100% { transform: rotate(450deg); } }
@keyframes s-work-t4 { 0%, 30% { transform: rotate(0deg); }   100% { transform: rotate(-630deg); } }


  /* ══ s-hero ══════════════════════════════════════════════ */
#s-hero a:focus-visible, #s-hero button:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
  }
/* ── Stage ────────────────────────────────────────────────── */
#s-hero .stage {
    min-height: 100vh;
    padding: 40px 48px 56px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 32px;
    max-width: 1600px;
    margin: 0 auto;
  }
#s-hero .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
#s-hero .stage h1 {
    font-weight: 300;
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
#s-hero .split {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }
/* ── Quads (left) ─────────────────────────────────────────── */
#s-hero .quads {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
  }
/* the reactive one spans the top row */
#s-hero .quad-main {
    grid-column: 1 / -1;
    background: var(--dark-2);
    border: 1px solid rgba(247,245,242,0.08);
    border-radius: 10px;
    padding: 24px;
    aspect-ratio: 3 / 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
/* Artwork layer. Sits behind the copy with a scrim, so the type stays
     legible whatever the image is. Only tiles carrying data-img get it. */
#s-hero .quad-main, #s-hero .quad-note { position: relative; overflow: hidden; }
#s-hero .quad-main::before, #s-hero .quad-note::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--img, none);
    background-size: cover;
    background-position: center;
    /* held back so the copy over it carries: less contrast, slightly
       desaturated, and darkened toward the page ground */
    filter: contrast(0.82) saturate(0.88) brightness(0.86);
    background-color: #14141600;
    opacity: 0;
    transition: opacity 0.28s ease;
  }
#s-hero .quad-main.has-img::before, #s-hero .quad-note.has-img::before { opacity: 1; }
/* scrim only appears with the artwork */
#s-hero .quad-main::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,20,22,0.52) 0%, rgba(20,20,22,0.26) 45%, rgba(20,20,22,0.84) 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
  }
#s-hero .quad-main.has-img::after { opacity: 1; }
#s-hero .quad-main > *, #s-hero .quad-note > * { position: relative; z-index: 1; }
/* copy sits over artwork: pop accent plus a shadow to hold it */
#s-hero .quad-main.has-img .quad-outlet {
    color: var(--teal);
    text-shadow: 0 1px 14px rgba(0,0,0,0.75);
    /* pill behind it, so the label reads over pale artwork too */
    background: rgba(20,20,22,0.55);
    padding: 5px 10px;
    border-radius: 999px;
    align-self: flex-start;
    display: inline-block;
  }
#s-hero .quad-main.has-img .quad-headline { display: none; }
#s-hero .quad-main.has-img .quad-meta {
    color: var(--cream);
    font-weight: 600;
    letter-spacing: 0.3px;
    border-top-color: rgba(247,245,242,0.35);
    text-shadow: 0 1px 14px rgba(0,0,0,0.75);
  }
#s-hero .quad-main.has-img .quad-meta span:last-child { color: var(--teal); }
#s-hero .quad-outlet {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    transition: color var(--fin);
  }
#s-hero .quad-headline {
    font-size: 19px;
    line-height: 1.35;
    margin: 14px 0 auto;
    max-width: 26ch;
  }
#s-hero .quad-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(247,245,242,0.1);
  }
#s-hero .quad-main.swapping .quad-outlet, #s-hero .quad-main.swapping .quad-headline, #s-hero .quad-main.swapping .quad-meta { opacity: 0; }
#s-hero .quad-outlet, #s-hero .quad-headline, #s-hero .quad-meta {
    transition: opacity 0.18s ease;
  }
#s-hero .quad-note {
    background: #6B6259;
    border-radius: 10px;
    padding: 20px;
    aspect-ratio: 1 / 1;
    /* the ratio is the contract: min-height 0 stops any child from
       pushing the box out of square, which is what broke it in v13 */
    min-height: 0;
    display: flex;
    align-items: flex-end;
    font-size: 15px;
    line-height: 1.35;
    color: var(--cream);
  }
/* Portrait state. Sources are pre-squared at build time, so cover is a
     straight fit with no crop; it is left in only to guard a bad drop-in. */
#s-hero .quad-note::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,20,22,0) 44%, rgba(20,20,22,0.30) 68%, rgba(20,20,22,0.82) 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
  }
#s-hero .quad-note.has-img::after { opacity: 1; }
/* The shared hold-back (contrast .82 / brightness .86) was tuned in v9
     for the top quad, where teal copy sits on top of the artwork. Nothing
     sits on the note tile except a caption the scrim already carries, so
     the portrait only needs a light knock to stay in the palette. Muting
     it as hard as the top quad made faces look washed. */
#s-hero .quad-note::before { filter: contrast(0.96) saturate(0.98) brightness(0.97); }
#s-hero .quad-note-txt { transition: opacity 0.18s ease; }
#s-hero .quad-note.has-img .quad-note-txt { opacity: 0; }
/* caption names the person in the portrait, so the tile carries
     information rather than being decoration */
#s-hero .quad-note-cap {
    position: absolute;
    left: 16px; right: 16px; bottom: 14px;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cream);
    text-shadow: 0 1px 12px rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity 0.28s ease;
  }
#s-hero .quad-note.has-img .quad-note-cap { opacity: 1; }
/* Lower right: the story behind the selected outlet. Kept as a link so
     it can point at the piece once URLs exist. */
#s-hero .quad-cta {
    /* Dark ground and gold for every tile now, not just the paraphrased
       ones. The teal fill and the near-black type it needed are gone. */
    background: var(--dark-2);
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    min-height: 0;              /* same lock as the note tile */
    padding: 15px 15px 13px;
    /* three bands: label, line, action. The middle one takes the slack,
       which is what lets the type auto-fit instead of clamping. */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 7px;
    color: var(--gold);
    text-decoration: none;
    overflow: hidden;
    transition: filter var(--fin);
  }
#s-hero .quad-cta:hover { filter: brightness(1.14); }
#s-hero .quad-cta .k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
    transition: opacity 0.18s ease;
  }
#s-hero .quad-cta .t {
    align-self: center;
    font-size: var(--summary-size);
    line-height: 1.5;
    font-weight: var(--summary-weight);
    letter-spacing: 0.012em;
    font-style: normal;
    overflow: hidden;
    transition: opacity 0.18s ease;
  }
/* The three paraphrased lines still carry the In brief label so they are
     not passed off as the outlet's wording; they no longer need their own
     colour, because every tile now uses what used to be their treatment. */
/* A quote still gets its marks so it is not read as the outlet's own
     headline, but nothing on this tile leans any more. */
#s-hero .quad-cta.is-quote .t::before { content: '\201C'; }
#s-hero .quad-cta.is-quote .t::after { content: '\201D'; }
/* last resort only: fitLine bottoms out before this is reached */
#s-hero .quad-cta .t.clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines, 8);
  }
#s-hero .quad-cta .f {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(232,168,73,0.28);
  }
#s-hero .quad-cta .go {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.85;
    transition: opacity 0.18s ease;
  }
#s-hero .quad-cta .a { display: block; transition: transform var(--fin); }
#s-hero .quad-cta:hover .a { transform: translateX(3px); }
#s-hero .quad-cta svg { width: 17px; height: 17px; display: block; }
#s-hero .quad-main.swapping ~ .quad-note .t, #s-hero .swapping-t .t { opacity: 0; }
/* ── Coverage wall (right) ────────────────────────────────── */
#s-hero .wall {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 22px;
  }
#s-hero .logo {
    appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 20px 10px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    min-height: 92px;
    transition: background var(--fin);
  }
#s-hero .logo:hover { background: rgba(247,245,242,0.04); }
/* text stand-in until real assets land */
#s-hero .logo-txt {
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    color: var(--cream);
    transition: color var(--fin);
  }
/* Supplied assets are white silhouettes with transparency, used as a
     CSS mask so a single file gives both the white and the teal state.
     No second coloured export needed, and no filter maths to tune. */
#s-hero .logo-mark {
    display: block;
    width: 100%;
    height: 34px;
    background: var(--cream);
    -webkit-mask: var(--m) no-repeat center / contain;
    mask: var(--m) no-repeat center / contain;
    opacity: 0.92;
    transition: background var(--fin), opacity var(--fin);
  }
#s-hero .logo:hover .logo-mark, #s-hero .logo:focus-visible .logo-mark, #s-hero .logo.on .logo-mark { background: var(--teal); opacity: 1; }
/* legacy filter path, kept for any plain-colour file dropped in later */
#s-hero .logo-img {
    max-width: 100%;
    max-height: 40px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: filter var(--fin), opacity var(--fin);
  }
#s-hero .logo:hover .logo-txt, #s-hero .logo:focus-visible .logo-txt, #s-hero .logo.on .logo-txt { color: var(--teal); }
#s-hero .logo:hover .logo-img, #s-hero .logo:focus-visible .logo-img, #s-hero .logo.on .logo-img {
    opacity: 1;
    /* white -> teal */
    filter: brightness(0) saturate(100%) invert(62%) sepia(74%)
            saturate(438%) hue-rotate(122deg) brightness(92%) contrast(88%);
  }
#s-hero .logo.on { background: rgba(23,184,166,0.08); }
@media (max-width: 1180px) {#s-hero .split { grid-template-columns: 320px minmax(0,1fr); gap: 36px; }
#s-hero .wall { grid-template-columns: repeat(4, 1fr); }
/* the square is fixed, so the only way to buy the line more room at
       these widths is to give back padding */
#s-hero .quad-cta { padding: 12px 12px 11px; gap: 5px; }
#s-hero .quad-cta .f { padding-top: 7px; }
#s-hero .quad-note-cap { left: 12px; right: 12px; bottom: 11px; font-size: 10px; letter-spacing: 1.4px; }}
@media (max-width: 900px) {#s-hero .stage { padding: 32px 24px 48px; }
#s-hero .split { grid-template-columns: 1fr; gap: 32px; align-items: start; }
#s-hero .quads { order: 2; }
#s-hero .wall { order: 1; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }}
@media (prefers-reduced-motion: reduce) {#s-hero * { transition: none !important; }}

  /* ══ s-services ══════════════════════════════════════════════ */
#s-services .sec {
    max-width: 1600px;
    margin: 0 auto;
    /* top gutter pulled in from 96 so this sits closer to the wall above */
    padding: 56px 48px 104px;
  }
#s-services .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
#s-services .sec h2 {
    font-weight: 300;
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 15ch;
    margin-bottom: 64px;
  }
/* Plate left, rows right. Aker runs the plate at roughly 29% of the
     stage; 460px against a 1600 max lands in the same place. */
#s-services .split {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
/* ── the plate ───────────────────────────────────────────────────── */
#s-services .plate {
    /* sticky, not relative: it still establishes the containing block the
       absolutely positioned .frame layers need, and it holds the plate in
       view while the rows are worked through */
    position: sticky;
    top: 48px;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-2);
  }
#s-services .frame {
    position: absolute;
    inset: 0;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    /* the same light hold-back the hero portraits use, so the plate sits
       in the palette without looking washed */
    filter: contrast(0.96) saturate(0.98) brightness(0.97);
    opacity: 0;
    transform: scale(1.03);
    transition: opacity var(--plate) ease, transform 1.1s ease;
  }
#s-services .frame.is-on { opacity: 1; transform: scale(1); }
/* a floor of shadow so the rounded corner reads against the dark */
#s-services .plate::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(247,245,242,0.07);
    border-radius: inherit;
  }
/* ── the rows ────────────────────────────────────────────────────── */
#s-services .list { border-top: 1px solid rgba(247,245,242,0.10); }
#s-services .item { border-bottom: 1px solid rgba(247,245,242,0.10); }
#s-services .row-h { font-weight: inherit; font-size: inherit; }
#s-services .row {
    appearance: none;
    background: none;
    border: 0;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    display: grid;
    grid-template-columns: var(--dial) minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--rail);
    padding: 26px 0;
    text-align: left;
  }
#s-services .row:focus-visible { outline: none; }
#s-services .row:focus-visible .dial {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-color: var(--gold);
  }
#s-services .dial {
    width: var(--dial);
    height: var(--dial);
    border-radius: 50%;
    border: 1px solid rgba(232,168,73,0.42);
    display: grid;
    place-items: center;
    color: var(--gold);
    transition: border-color var(--fin), background var(--fin);
  }
#s-services .dial svg { width: 20px; height: 20px; display: block; }
/* the plus becomes a minus by collapsing the upright, which is cheaper
     and steadier than swapping two icons */
#s-services .dial .v {
    transform-origin: 12px 12px;
    transition: transform var(--open) cubic-bezier(0.4, 0, 0.2, 1);
  }
#s-services .item.is-open .dial .v { transform: scaleY(0); }
#s-services .item.is-open .dial { border-color: var(--gold); background: rgba(232,168,73,0.10); }
#s-services .row:hover .dial { border-color: var(--gold); }
#s-services .num {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding-top: 2px;
  }
#s-services .title {
    font-size: clamp(19px, 2vw, 30px);
    font-weight: 300;
    letter-spacing: -0.015em;
    line-height: 1.15;
    transition: color var(--fin);
  }
#s-services .item:not(.is-open) .title { color: rgba(247,245,242,0.82); }
#s-services .row:hover .title { color: var(--cream); }
/* 0fr to 1fr animates a height the browser measures itself, so the copy
     can be any length without JS reading scrollHeight */
#s-services .pane {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--open) cubic-bezier(0.4, 0, 0.2, 1);
  }
#s-services .item.is-open .pane { grid-template-rows: 1fr; }
#s-services .pane-in {
    overflow: hidden;
    /* the copy lags the height slightly, so the reveal reads as one move
       rather than text appearing in a box that is still growing */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.34s ease, transform 0.34s ease;
  }
#s-services .item.is-open .pane-in {
    opacity: 1;
    transform: none;
    transition-delay: 0.14s;
  }
#s-services .body {
    font-size: 15px;
    line-height: 1.62;
    color: var(--text-muted);
    max-width: 46ch;
    margin-left: calc(var(--dial) + var(--rail));   /* lines up under the title */
    padding-bottom: 20px;
  }
#s-services .tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: calc(var(--dial) + var(--rail));
    padding-bottom: 30px;
  }
#s-services .tags li {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid rgba(247,245,242,0.14);
    border-radius: 100px;
    padding: 6px 12px;
  }
@media (max-width: 1180px) {#s-services .split { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; }}
@media (max-width: 900px) {#s-services .sec { padding: 40px 24px 72px; --dial: 40px; --rail: 16px; }
#s-services .split { grid-template-columns: 1fr; gap: 36px; }
/* relative, never static: static would remove the containing block and
       the .frame layers would position against the page instead */
#s-services .plate { position: relative; top: auto; max-width: 420px; }
#s-services .sec h2 { margin-bottom: 40px; }
#s-services .row { grid-template-columns: var(--dial) minmax(0, 1fr); gap: 0 16px; padding: 22px 0; }
#s-services .dial svg { width: 17px; height: 17px; }}
@media (prefers-reduced-motion: reduce) {#s-services * { transition: none !important; }
#s-services .frame { transform: none; }}

  /* ══ s-work ══════════════════════════════════════════════ */
#s-work .sec {
    max-width: 1600px;
    margin: 0 auto;
    padding: 96px 24px 104px;
  }
#s-work .sec h2 {
    font-weight: 300;
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    padding: 0 24px;
    margin-bottom: 34px;
  }
/* ── the band ────────────────────────────────────────────────────── */
#s-work .band {
    position: relative;
    aspect-ratio: var(--band);
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-2);
    isolation: isolate;       /* keeps the blend off everything behind it */
  }
#s-work .band video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* The footage keeps its own colour. The first pass ran grayscale(1)
       here, which is what made the band look like a green sheet; pulling
       saturation back a little is enough for one tint to land evenly
       across a montage without flattening every shot into a single hue.
       Saturation is pulled harder than the tint alone needs, because this
       is a montage of clips shot on different cameras under different
       light: bringing them toward a common chroma is what stops the band
       reading as a reel of unrelated footage. Contrast carries the punch
       that the lost saturation would otherwise have taken with it. */
    filter: saturate(0.55) contrast(1.30) brightness(0.86);
  }
/* the layover. 'color' blend keeps the footage's luminance and takes
     only the hue, so at this strength it reads as a cast over the reel
     rather than a green sheet laid on top of it. */
#s-work .tint {
    position: absolute;
    inset: 0;
    background: var(--tint);
    /* Normal, not a 'color' blend. Colour blending only shifts hue, so on
       a montage it vanishes on the saturated shots and shows on the
       neutral ones, and the treatment reads as inconsistent. A flat wash
       lays the same amount of green on every frame. */
    opacity: var(--tint-strength);
    pointer-events: none;
    mix-blend-mode: normal;
  }
/* Only two jobs left here: a soft edge so the band sits on the page,
     and a small pool of shade under the mark. The old version darkened
     the whole frame to carry the mark; the mark now carries itself with
     its own shadow, so the footage keeps its light. */
#s-work .tint-deep {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at center,
        rgba(6,26,23,0.34) 0%,
        rgba(6,26,23,0.10) 26%,
        rgba(6,26,23,0) 42%),
      radial-gradient(ellipse at center,
        rgba(6,26,23,0) 55%,
        rgba(6,26,23,0.30) 100%);
    pointer-events: none;
  }
/* the reference band carries a fine grain; without it a light tint over
     compressed footage shows its banding */
#s-work .grain-tex {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
#s-work .grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(247,245,242,0.08);
    border-radius: inherit;
  }
/* ── the mark ────────────────────────────────────────────────────── */
#s-work .mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(170px, 26%, 400px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #F7F5F2;
    /* the footage underneath is busy and moving, so the mark needs its own
       separation rather than relying on the tint to hold it */
    filter: drop-shadow(0 0 14px rgba(0,0,0,0.55));
  }
#s-work .mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Every part shares one duration and one easing, so they leave and
     arrive together. What separates them is how far each travels. Each
     figure turns a whole number of its own symmetry, so the mark lands
     back on itself exactly rather than nearly. */
#s-work .mark g[class^="t"] {
    /* transform-box stays at the SVG default of view-box: with fill-box
       the origin would be read against each shape's own bounding box and
       every figure would orbit its own centre instead of the mark's */
    transform-origin: 100px 100px;
    animation-duration: var(--turn);
    animation-timing-function: var(--ease);
    animation-iteration-count: infinite;
  }
#s-work .mark g { transform-origin: 100px 100px; }
#s-work .t1 { animation-name: s-work-t1; }
#s-work .t2 { animation-name: s-work-t2; }
#s-work .t3 { animation-name: s-work-t3; }
#s-work .t4 { animation-name: s-work-t4; }
/* the hold is the first 30 per cent of every one of them */
@media (max-width: 900px) {#s-work .sec { padding: 64px 12px 72px; }
#s-work .sec h2 { padding: 0 12px; margin-bottom: 24px; }
#s-work { --band: 4 / 3; }
/* 21:9 crops a talking head to a chin */}
@media (max-width: 560px) {#s-work { --band: 1 / 1; }}
/* Rotation stops and the reel does not start itself. The script reads
     the same query, so the poster stays up rather than a frozen frame. */
@media (prefers-reduced-motion: reduce) {#s-work .mark g { animation: none !important; }}

  /* ══ s-footer ══════════════════════════════════════════════ */
#s-footer .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
  }
/* ── CTA band ─────────────────────────────────────────────── */
#s-footer .cta-band {
    padding: 140px 48px;
    text-align: center;
    border-top: 1px solid rgba(232,168,73,0.08);
  }
#s-footer .cta-band h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 16px;
  }
#s-footer .cta-band p {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.6;
  }
#s-footer .cta-btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--gold);
    padding: 16px 52px;
    text-decoration: none;
    transition: background var(--fin), transform 0.2s;
  }
#s-footer .cta-btn:hover { background: var(--gold-hover); transform: translateY(-2px); }
#s-footer .cta-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
  }
#s-footer .cta-reply {
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
  }
/* ── Footer ───────────────────────────────────────────────── */
#s-footer .footer {
    padding: 60px 48px;
    border-top: 1px solid rgba(232,168,73,0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
  }
#s-footer .footer-wordmark {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 16px;
  }
#s-footer .footer-addr {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }
#s-footer .footer-addr a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--fin);
  }
#s-footer .footer-addr a:hover, #s-footer .footer-addr a:focus-visible { color: var(--teal); }
#s-footer .footer-links { display: flex; gap: 56px; }
#s-footer .footer-col h4 {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
  }
#s-footer .footer-col a {
    display: block; font-size: 13px; color: var(--text-muted);
    text-decoration: none; margin-bottom: 10px;
    transition: color var(--fin);
  }
#s-footer .footer-col a:hover, #s-footer .footer-col a:focus-visible { color: var(--cream); }
#s-footer .footer-copy {
    width: 100%; padding-top: 36px;
    border-top: 1px solid rgba(154,154,160,0.1);
    font-size: 12px; color: rgba(154,154,160,0.78);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
#s-footer .footer-copy a {
    color: rgba(154,154,160,0.78);
    text-decoration: none;
    transition: color var(--fin);
  }
#s-footer .footer-copy a:hover, #s-footer .footer-copy a:focus-visible { color: var(--cream); }
#s-footer a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 700px) {#s-footer .cta-band { padding: 100px 24px; }
#s-footer .footer { padding: 48px 24px; }
#s-footer .footer-links { gap: 36px; }}
@media (max-width: 560px) {#s-footer .footer-links { flex-direction: column; gap: 28px; }}
@media (prefers-reduced-motion: reduce) {#s-footer * { animation: none !important; transition-duration: 0.01ms !important; }
#s-footer .cta-btn:hover { transform: none; }}

  /* Page-level alignment. The three content sections were built alone and
     chose their own gutters: hero and services sit at 48, the work band
     was cut to 24 so it could run wider on its own page. Side by side the
     band overhung the two above it by 24px a side, which reads as a
     mistake rather than a choice, so it is brought into line here rather
     than in the section, which keeps its own value standalone. */
  /* Hairlines above the two sections that follow the wall, matching the
     weight of the rules the CTA and footer already carry. Cream rather
     than the footer's gold, because these separate content from content
     rather than marking the close of the page. */
  #s-services, #s-work { border-top: 1px solid rgba(247,245,242,0.10); }

  #s-work .sec { padding-left: 48px; padding-right: 48px; }
  @media (max-width: 900px) {
    #s-work .sec { padding-left: 24px; padding-right: 24px; }
  }

  /* ══ s-amp ══════════════════════════════════════════════ */
#s-amp .amp {
    background: var(--dark);
    border-top: 1px solid rgba(247,245,242,.10);
    color: var(--cream);
    padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1.5rem, 5vw, 4.5rem);
  }
#s-amp .amp-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
  }
#s-amp .amp-copy { max-width: 34rem; }
#s-amp .amp-lede {
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.72;
    font-weight: 400;
    color: var(--cream);
    margin: 0 0 clamp(2.25rem, 4vw, 3rem);
    text-wrap: pretty;
  }
#s-amp .amp-lede em {
    font-style: normal;
    font-weight: 300;
    color: var(--text-muted);
  }
#s-amp .amp-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.1rem;
  }
#s-amp .amp-headline {
    font-family: 'Archivo Black', 'Arial Black', sans-serif;
    font-weight: 400;
    font-size: clamp(2.15rem, 3.9vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--cream);
    margin: 0;
  }
#s-amp .amp-headline span { display: block; }
#s-amp .amp-figure { margin: 0; }
#s-amp .amp-figure img { display: block; width: 100%; height: auto; }
#s-amp .amp-caption {
    margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
    padding-top: 1.1rem;
    border-top: 1px solid rgba(247,245,242,.10);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(247,245,242,.42);
    text-align: center;
  }
#s-amp [data-rise] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
#s-amp [data-rise].is-in { opacity: 1; transform: none; }
#s-amp .amp-figure[data-rise] { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  #s-amp [data-rise] { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  #s-amp .amp-inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
  #s-amp .amp-copy { max-width: none; order: 2; }
  #s-amp .amp-figure { order: 1; }
  #s-amp .amp-caption { text-align: left; }
}
@media (max-width: 520px) {
  #s-amp .amp-headline span { display: inline; }
  #s-amp .amp-caption { letter-spacing: .14em; }
}

  /* ══ s-labels ══════════════════════════════════════════════ */
#s-labels .labels {
    background: var(--dark);
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
    border-top: 1px solid rgba(247,245,242,.08);
  }
#s-labels .labels-inner { max-width: 1240px; margin: 0 auto; }
#s-labels .labels-eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(247,245,242,.42);
    text-align: center;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  }
#s-labels .labels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
    justify-items: center;
  }
#s-labels .lbl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
  }
#s-labels .lbl-mark {
    display: block;
    width: 100%;
    background: var(--cream);
    -webkit-mask: var(--m) no-repeat center / contain;
    mask: var(--m) no-repeat center / contain;
    opacity: .62;
    transition: opacity var(--fin);
  }
#s-labels .lbl:hover .lbl-mark { opacity: 1; }
#s-labels .lbl-txt {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    color: rgba(247,245,242,.5);
    transition: color var(--fin);
  }
#s-labels .lbl:hover .lbl-txt { color: var(--cream); }
@media (max-width: 520px) {
  #s-labels .labels-grid { grid-template-columns: repeat(2, 1fr); }
}