/* GENERATED by tools/fw_common.py on every build: public/css/home.css, then public/work/featured.css.
   Edit those two files and rebuild (python3 build_featured_review.py); never edit this file. */
/* RareCo Creative · Home (working homepage).
   Loaded after /css/qw-lib.css, the same-origin bundle of the library's
   tokens.css, base.css and motion.css plus /fonts/fonts.css (Standards 15
   and 21; built by bq-cdn/tools/bundle.py). Unprefixed
   classes are this site's.

   Oct 5, 2026: the hero, review sample 37 (Diallo's pick): the locked sky
   loop, "a Creative Agency" in Instrument Serif with a red dash, headline A in
   Panchang with the deck's weight play, the horizontal lockup in red frosted
   glass at the bottom right, the scroll cue at the bottom left.
   Oct 7, 2026: the full page (Diallo: build it all out, dark grounds, sky
   blues set B, the sky stays a hero-only shot), with a slower, layered intro
   and the same motion language through every section, and the cursor.

   Round 2, Oct 7: why RareCo scrolls normally on a red and orange mesh, with
   a rotating frame; capabilities became a four-column grid; the cursor's dot
   grew. Sections: 1 hero · 2 why RareCo (statement lit word by word as it
   scrolls, pillars lit as they pass, rotating photographs) · 3 capabilities
   (a 4 x 2 grid that opens between the rows)
   · 4 selected work (inset cards that stack) · 5 the range (arched strip) ·
   7 inquiry · footer (uncovered from underneath) · the cursor.
   The phone gets a working layout; its own pass comes after the page. */

/* ---------------------------------------------------------------- palette
   RareCo palette, approved by Diallo Oct 3, 2026 (website/palette-tokens.md),
   plus the sky blues, set B, picked by Diallo Oct 7, 2026. */
:root {
  --color-bg: #0D0D0D;
  --color-surface: #161212;
  --color-surface-dark: #500D16;
  --color-line: #2A2424;
  --color-line-soft: rgba(255,255,255,.08);
  --color-ink: #F2F2F2;
  --color-ink-muted: #A8A29E;
  --color-ink-on-dark: #F2F2F2;
  --color-link: #E6A669;
  --color-link-hover: #ECCBAA;
  --color-primary: #B0332D;
  --color-primary-hover: #982B2E;
  --color-on-primary: #F2F2F2;
  --color-accent: #E27B30;
  --color-accent-hover: #E6A669;
  --color-on-accent: #0D0D0D;
  --color-band-light: #F2F2F2;
  --color-band-light-tint: #ECCBAA;
  --color-band-card: #FFFFFF;
  --color-band-stone: #D4B394;
  --color-band-ink: #0D0D0D;
  --color-band-ink-muted: #4A4040;
  --color-band-accent-ink: #982B2E;
  --color-form-tint: #D4B394;
  --color-form-ink: #0D0D0D;
  --color-form-focus: #C83F2C;
  --color-mesh-1: #B0332D;
  --color-mesh-2: #E06335;
  --color-wordmark: #A02021;
  --gradient-brand: linear-gradient(180deg, #B0332D 0%, #DF5429 55%, #E27B30 100%);
  /* sky blues, set B (Oct 7): grounds, panels, gradients and image grades; red and orange stay the accents */
  --color-sky-midnight: #04143A;
  --color-sky-deep: #071D4F;
  --color-sky-high: #0B2562;
  --color-sky-upper: #12327E;
  --color-band-sky: var(--color-sky-deep);
  --color-band-sky-ink: #F2F2F2;
  /* the sunset fill of the hero keywords, white above it so the colour can pour in */
  --sunset-pour: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 44%, #FDF0E3 56%, #F6D2AE 70%, #EEAA70 83%, #E27B30 95%);

  --font-heading: "Panchang", "Archivo", sans-serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --red-bright: #C83F2C;          /* the palette red that holds on the deep blue */
  /* Oct 17 (Diallo): content stops widening at 1600px (a 16-inch laptop's 1728px window less its gutters);
     backgrounds stay full width. The gutter grows to keep the content centred past that. */
  --maxw: 1600px;
  --x: max(clamp(20px, 4vw, 64px), calc((100vw - var(--maxw)) / 2));    /* page gutter */
  --sec: clamp(96px, 14vh, 176px);/* section padding */
  --nav-h: 66px;                  /* the sticky menu (round 7): 14px from the top + the 52px pill; scroll-to points sit below it */
  --arch: clamp(56px, 7vw, 132px);/* the arch corner, shared by the frames and the strip */
  --arch-s: clamp(32px, 3.6vw, 64px);
  /* motion: the library's curves (tokens.css), plus a wipe for image reveals */
  --ease-wipe: cubic-bezier(.77, 0, .175, 1);
  --ease-open: cubic-bezier(.76, 0, .24, 1);
}

html, body { background: var(--color-bg); color: var(--color-ink); }
body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #fff; color: #0D0D0D; font: 700 14px/1 var(--font-body); }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--x); }
main { position: relative; z-index: 1; background: var(--color-bg); }
[role="link"]:not([aria-disabled]) { cursor: pointer; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; }

/* ================================================================ 1 hero */
.hero { --top: calc(clamp(104px, 15vh, 168px) + 30px);
  --lk-h: clamp(168px, 27.6vh, 312px); --lk-ar: 4.1763; --lk-foot: .29;   /* Oct 19: the Model lettering (viewBox 1063.74 x 254.71; letters 42% of the R, centred) */
  --lk-w: min(calc(var(--lk-h) * var(--lk-ar)), calc(100cqw - 2 * var(--x)));
  --lk-mask: url("../media/rareco-lockup-white-v2.svg?v=20261019a");
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  height: 100vh; height: 100svh; background: #0B2257; }

/* the loop, its poster and the fallback still */
.hero__media, .hero__fallback, .hero__fallback img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media { z-index: 0; }
.hero__fallback, .hero__video { display: block; }
.hero.is-still .hero__video { display: none; }
/* Oct 18, round 2 (Diallo): navy while the loop loads, then the loop fades in. The still shows
   only when the loop can't run (is-still) or hasn't started in time or stalls (is-slow, set by
   home.js; the loop fades in over it if it recovers). Without JS the still is all there is. */
.hero__fallback { transition: opacity 1.2s var(--ease-reveal); }
.js .hero:not(.is-still):not(.is-slow) .hero__fallback { opacity: 0; }
.hero.is-video.is-playing:not(.is-still) .hero__fallback { visibility: hidden; transition: visibility 0s 1.7s; }
/* round 5 (Diallo, Oct 7): the loop fades in once it is actually playing, instead of cutting in */
.js .hero:not(.is-still) .hero__video { opacity: 0; transition: opacity 1.6s var(--ease-reveal); }   /* hidden from the first paint, not faded out once JS runs */
.hero.is-video.is-playing:not(.is-still) .hero__video { opacity: 1; }

.hero__shade { position: absolute; left: 0; right: 0; top: 0; height: 48%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgb(4 16 48 / .62) 0%, rgb(4 16 48 / .30) 52%, transparent 100%); }
.hero__grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* bar: lockup left, links centred, Contact on the right (round 7, Diallo: no menu icon; Work,
   Capabilities, About in the centre); each goes to its section */
.bar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(22px, 3.4vh, 34px) var(--x) 0; }
.bar__logo { display: block; height: clamp(24px, 2.4vw, 32px); width: auto; max-width: none; }
.bar__links { position: absolute; left: 50%; top: calc(clamp(22px, 3.4vh, 34px) + clamp(24px, 2.4vw, 32px) / 2); transform: translate(-50%, -50%);
  display: flex; gap: clamp(22px, 2.6vw, 44px); list-style: none; margin: 0; padding: 0; }
.bar__links span { position: relative; display: inline-block; padding: 6px 0; color: #F2F2F2; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .92; cursor: default; }
.bar__links span[role="link"] { cursor: pointer; }
.bar__links span[role="link"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease-emph); }
@media (hover: hover) { .bar__links span[role="link"]:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
.bar__cta { flex: none; margin-top: -5px; margin-bottom: -5px; }   /* centred on the logo line */

/* the intro block */
.hero__head { position: absolute; z-index: 5; left: var(--x); top: var(--top); max-width: min(1100px, 60%);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; }
.hero__label { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(12px, 1.6vh, 20px);
  font: italic 400 clamp(1.6328rem, 1.0391rem + 1.1281vw, 2.6719rem)/1 var(--font-serif); letter-spacing: -.005em; color: #fff; }   /* round 14: +25%, round 15: 5% back (Diallo) */
.hero__label::after { content: ""; display: block; width: clamp(36px, 4vw, 72px); height: 2px; background: var(--red-bright); }
.hero__title { margin: 0; color: #fff; font-family: var(--font-heading); font-weight: 300; text-transform: uppercase; text-wrap: initial;
  font-size: clamp(2.0781rem, 1.4844rem + 1.4844vw, 3.5625rem); line-height: 1.07;   /* round 14: +25% across every size; round 15: 5% back (Diallo) */   /* 4px up across the range (Diallo, Oct 5): 38px at 1440 */ letter-spacing: -.005em; text-shadow: 0 2px 26px rgb(4 16 48 / .32); }
/* each line sits in its own mask, so it can rise into place; the padding keeps the commas and the shadow unclipped */
.hero__ln { display: block; overflow: hidden; padding: .06em .2em .12em 0; margin: -.06em -.2em -.12em 0; }
.hero__lni { display: block; transform-origin: 0 100%; }
@media (min-width: 761px) { .hero__ln { white-space: nowrap; } }
/* Oct 17 (Diallo): two line sets. Wide screens keep four lines; phones get five
   (Where ideas, / experiences, / talent and / execution / come together.) sized so
   the longest line, "come together.", fills the width inside the gutters
   (13.51em in Panchang, measured live; 13.55 leaves a hair of room) */
.hero__set { display: block; }
.hero__set--tall { display: none; }
@media (max-width: 760px) {
  .hero__set--wide { display: none; }
  .hero__set--tall { display: block; }
  .hero__set--tall .hero__ln { white-space: nowrap; }
}
.hero__l { font-weight: 300; }
.hero__h { font-weight: 800; text-shadow: none; -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the sunset gradient (peach to the deck orange, top to bottom) sits in the lower half of a
     double-height fill, white above it; the intro slides the fill up, so the colour pours in */
  background-image: var(--sunset-pour); background-size: 100% 200%; background-position: 0 100%; }
.hero__comma { color: var(--color-accent); font-weight: 700; display: inline-block; }
.hero__stop { color: var(--red-bright); font-weight: 700; display: inline-block; }
.hero__lab { display: inline-block; }

/* the lockup in red frosted glass, bottom right, the foot of RARE Co on the foot of the screen.
   No z-index on .hero__mark, so its layers blur and blend with the sky itself. */
.hero__mark { position: absolute; right: var(--x); bottom: calc(var(--lk-w) / var(--lk-ar) * var(--lk-foot) * -1);
  width: var(--lk-w); aspect-ratio: 1063.74 / 254.71; pointer-events: none; margin: 0; }
.hero__mark > *, .hero__drop > i { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 5; }
.hero__glass, .hero__sheen, .hero__drop > i, .hero__shine {
  -webkit-mask: var(--lk-mask) 0 0 / 100% 100% no-repeat; mask: var(--lk-mask) 0 0 / 100% 100% no-repeat; }
.hero__drop { filter: blur(16px); transform: translate(0, 12px); opacity: .5; }
.hero__drop > i { background: #500D16; }
.hero__glass { background: linear-gradient(160deg, rgb(200 63 44 / .64) 0%, rgb(176 51 45 / .52) 55%, rgb(152 43 46 / .62) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(1.05); backdrop-filter: blur(14px) saturate(1.4) brightness(1.05); }
.hero__sheen { background: radial-gradient(120% 90% at 18% 0%, rgb(255 236 220 / .5), transparent 55%); mix-blend-mode: screen; }
.hero__rim { --o: max(2px, calc(var(--lk-w) * .0028));
  -webkit-mask-image: var(--lk-mask), var(--lk-mask); mask-image: var(--lk-mask), var(--lk-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-out; mask-composite: subtract; }
.hero__rim--lt { -webkit-mask-position: 0 0, var(--o) var(--o); mask-position: 0 0, var(--o) var(--o); background: rgb(255 226 210 / .95); }
.hero__rim--dk { -webkit-mask-position: 0 0, calc(var(--o) * -1) calc(var(--o) * -1); mask-position: 0 0, calc(var(--o) * -1) calc(var(--o) * -1); background: rgb(80 13 22 / .6); }
.hero__shine { z-index: 6; opacity: .8; mix-blend-mode: screen;   /* Oct 22 (Diallo): a little more visible (was .55 and .5) */
  background: linear-gradient(105deg, transparent 0%, transparent 28%, rgb(255 255 255 / .65) 50%, transparent 72%, transparent 100%) 0 0 / 300% 100% no-repeat;
  animation: hero-shine 10s cubic-bezier(.45, 0, .2, 1) 4.8s infinite; }
@keyframes hero-shine { 0% { background-position: 110% 0; } 30%, 100% { background-position: -10% 0; } }

/* the scroll cue, bottom left: a control that goes to the next section */
.cue { position: absolute; z-index: 5; left: var(--x); bottom: clamp(30px, 5.4vh, 60px); display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 10px 12px; margin: -10px -12px; border-radius: 10px; color: #F2F2F2; text-decoration: none; cursor: pointer;
  font: 700 12px/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgb(4 16 48 / .55), 0 0 18px rgb(4 16 48 / .5); transition: color var(--dur-fast, .22s) ease; }
.cue i { position: relative; display: block; width: 2px; height: 48px; border-radius: 2px; overflow: hidden;
  background: rgb(242 242 242 / .62); box-shadow: 0 0 0 1px rgb(4 16 48 / .18), 0 0 14px rgb(4 16 48 / .4); }
.cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 18px; border-radius: 2px;
  background: var(--red-bright); box-shadow: 0 0 10px rgb(200 63 44 / .85); animation: cue-run 2.4s var(--ease-cinema, cubic-bezier(.65,0,.35,1)) infinite; }
@keyframes cue-run { from { transform: translateY(-20px); } to { transform: translateY(52px); } }
@media (hover: hover) {
  .cue:hover { color: #fff; }
  .cue:hover i { background: rgb(255 255 255 / .9); }
  .cue:hover i::after { animation-duration: 1.2s; }
}

/* ---------------------------------------------------------------- the sticky menu
   Round 7 (Diallo, Oct 8; the style was left to Claude). A floating dark glass
   pill, centred, that slides down once the hero has mostly scrolled away and
   back up on the way into it. The R mark goes to the top; the three sections
   carry a sunset marker that glides to the one on screen (Contact lights when
   the close is on screen); a thin sunset line along the foot fills with the
   page's progress. home.js sets .is-on, --sx/--sw (the marker) and --p. */
.snav { position: fixed; z-index: 60; top: 14px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none;
  transform: translate3d(0, calc(-100% - 30px), 0); transition: transform .85s var(--ease-emph); }
.snav.is-on { transform: none; transition-duration: 1.05s; }
.snav__pill { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); height: 52px; padding: 0 5px 0 6px; pointer-events: auto;
  border-radius: 999px; background: rgb(16 11 15 / .8); border: 1px solid rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 20px 44px -20px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .07); }
.snav__mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .06); transition: background-color .4s, transform .7s var(--ease-emph); }
.snav__mark img { display: block; width: 26px; height: 26px; }
/* Oct 22 (Diallo): on hover the circle turns to the sunset and the R to white, both fading in, with the turn */
.snav__mark { position: relative; isolation: isolate; }
.snav__mark::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .5s var(--ease-state);
  background: linear-gradient(160deg, #B0332D 0%, #DF5429 50%, #E27B30 80%, #EEAA70 100%); }
.snav__mark img { transition: filter .5s var(--ease-state); }
@media (hover: hover) {
  .snav__mark:hover { transform: rotate(-8deg); }
  .snav__mark:hover::before { opacity: 1; }
  .snav__mark:hover img { filter: brightness(0) invert(1); }
}
.snav__links { position: relative; display: flex; gap: clamp(18px, 2vw, 30px); list-style: none; margin: 0; padding: 0 4px; }
.snav__links span { display: block; padding: 12px 1px; color: rgb(242 242 242 / .62); font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: color .4s var(--ease-state); }
.snav__links span.is-here { color: #fff; }
/* round 10 (Diallo): every menu link gets the bar's underline on hover
   Oct 22 (Diallo): the footer's Contact (role="button", it opens the form) gets it too */
.snav__links span, .foot__nav span[role] { position: relative; }
.snav__links span::after, .foot__nav span[role]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease-emph); }
.foot__nav span[role]::after { bottom: -7px; }
@media (hover: hover) { .snav__links span:hover::after, .foot__nav span[role]:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
@media (hover: hover) { .snav__links span:hover { color: #fff; } }
.snav__spot { position: absolute; left: 0; bottom: 11px; width: var(--sw, 20px); height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--red-bright)); transform: translate3d(var(--sx, 0px), 0, 0);
  transition: transform .75s var(--ease-emph), width .75s var(--ease-emph), opacity .4s; }
.snav__spot.is-on { opacity: 1; }
.snav__spot.is-fresh { transition: opacity .4s; }   /* first placement: no glide in from the left */
.snav__cta { flex: none; }
.snav__cta.is-here { box-shadow: 0 0 0 3px rgb(200 63 44 / .32); }
.snav__prog { position: absolute; left: 26px; right: 26px; bottom: -1px; height: 1.5px; border-radius: 2px; pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red-bright), var(--color-mesh-2) 60%, var(--color-accent)); transform: scaleX(var(--p, 0)); opacity: .85; }

/* nothing moves while the hero is off screen or the tab is hidden */
.hero:not(.is-run) .hero__shine, .hero:not(.is-run) .cue i::after { animation-play-state: paused; }

/* ---------------------------------------------------------------- the intro
   Oct 7, 2026 (Diallo): slower and layered, "more sexy and slower, but still
   clean and quick". Each beat now finishes before the next one starts, so the
   eye reads it as a sequence: the sky settles, the bar and the label arrive,
   the four lines rise one at a time in white, a held beat, then the sunset
   pours into the keywords one after another, each comma landing as its
   keyword fills, the red period last; the glass lockup rises in under it all
   and the first shine crosses it as the cue arrives. Ease-out curves only
   (library tokens), every visit, never blocking scroll or clicks.
   Timeline (ms from the hero coming into view):
     0     sky settles from 1.08 (3400, cinema)
     300   bar (1100)
     500   label rises (1100); 1100 its dash draws (900)
     800   headline lines, 220 apart (1300, emph): the last one lands at 2760
     2600  colour pours into the keywords, 170 apart (1500, cinema)
     3050  first comma lands, 3220 the second (600, emph); 4300 the period (700)
     1500  lockup rises off the edge (2200, emph); 1600 grid marks (1600)
     3900  scroll cue (900); 4800 first shine (then every 10s) */
.js .hero:not(.is-in) .bar, .js .hero:not(.is-in) .hero__lab, .js .hero:not(.is-in) .hero__lni, .js .hero:not(.is-in) .hero__mark > *,
.js .hero:not(.is-in) .cue, .js .hero:not(.is-in) .hero__comma, .js .hero:not(.is-in) .hero__stop { opacity: 0; }
.js .hero:not(.is-in) .hero__label::after { transform: scaleX(0); }
.js .hero:not(.is-in) .hero__h { background-position: 0 0; }
.hero.is-in .hero__media { animation: settle 3400ms var(--ease-cinema, cubic-bezier(.65,0,.35,1)) both; }
.hero.is-in .bar { animation: drop 1100ms var(--ease-reveal, cubic-bezier(.22,1,.36,1)) 300ms both; }
.hero.is-in .hero__lab { animation: lift 1100ms var(--ease-reveal, cubic-bezier(.22,1,.36,1)) 500ms both; }
.hero__label::after { transform-origin: 0 50%; }
.hero.is-in .hero__label::after { animation: draw 900ms var(--ease-reveal, cubic-bezier(.22,1,.36,1)) 1100ms both; }
.hero.is-in .hero__lni { animation: line 1300ms var(--ease-emph, cubic-bezier(.16,1,.3,1)) both; }
.hero.is-in .hero__ln:nth-child(1) .hero__lni { animation-delay: 800ms; }
.hero.is-in .hero__ln:nth-child(2) .hero__lni { animation-delay: 1020ms; }
.hero.is-in .hero__ln:nth-child(3) .hero__lni { animation-delay: 1240ms; }
.hero.is-in .hero__ln:nth-child(4) .hero__lni { animation-delay: 1460ms; }
.hero.is-in .hero__ln:nth-child(5) .hero__lni { animation-delay: 1680ms; }
.hero.is-in .hero__h { animation: pour 1500ms var(--ease-cinema, cubic-bezier(.65,0,.35,1)) 2600ms both; }
.hero.is-in .hero__ln:nth-child(2) .hero__h:first-child { animation-delay: 2770ms; }
.hero.is-in .hero__ln:nth-child(2) .hero__h:not(:first-child) { animation-delay: 2940ms; }
.hero.is-in .hero__ln:nth-child(3) .hero__h { animation-delay: 3110ms; }
.hero.is-in .hero__set--tall .hero__ln:nth-child(3) .hero__h { animation-delay: 2940ms; }
.hero.is-in .hero__set--tall .hero__ln:nth-child(4) .hero__h { animation-delay: 3110ms; }
.hero.is-in .hero__comma { animation: land 600ms var(--ease-emph, cubic-bezier(.16,1,.3,1)) 3050ms both; }
.hero.is-in .hero__ln:nth-child(2) .hero__comma { animation-delay: 3220ms; }
.hero.is-in .hero__stop { animation: land 700ms var(--ease-emph, cubic-bezier(.16,1,.3,1)) 4300ms both; }
.hero.is-in .hero__mark > * { animation: emerge 2200ms var(--ease-emph, cubic-bezier(.16,1,.3,1)) 1500ms both; }
.hero.is-in .hero__mark > .hero__drop { animation-name: emerge-drop; }
.hero.is-in .hero__mark > .hero__shine { animation: hero-shine 10s cubic-bezier(.45, 0, .2, 1) 4.8s infinite; }
.hero.is-in .cue { animation: fade 900ms var(--ease-reveal, cubic-bezier(.22,1,.36,1)) 3900ms both; }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-50% -10% -50% -10%); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes line { 0% { opacity: 0; transform: translateY(112%) rotate(2.5deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pour { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes land { from { opacity: 0; transform: translateY(.35em) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes emerge { from { opacity: 0; transform: translateY(32%); } to { opacity: 1; transform: none; } }
@keyframes emerge-drop { from { opacity: 0; transform: translate(0, calc(32% + 12px)); } to { opacity: .5; transform: translate(0, 12px); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-grid { from { opacity: 0; } to { opacity: .42; } }

/* ================================================================ shared parts */
/* the section label: Instrument Serif with the red dash, the hero's label again */
.label { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(20px, 3.2vh, 34px);
  font: italic 400 clamp(1.375rem, 1rem + .75vw, 2rem)/1 var(--font-serif); letter-spacing: -.005em; color: #fff; text-wrap: initial; }
.label::after { content: ""; display: block; flex: none; width: clamp(32px, 3.4vw, 60px); height: 2px; background: var(--red-bright); transform-origin: 0 50%; }
.label__t { display: inline-block; }
.js .label:not(.is-in) .label__t { opacity: 0; }
.js .label:not(.is-in)::after { transform: scaleX(0); }
.label.is-in .label__t { animation: lift 1100ms var(--ease-reveal) both; }
.label.is-in::after { animation: draw 900ms var(--ease-reveal) 450ms both; }

/* headings split into words, each word rising from its own mask (home.js adds .sw/.swi) */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .12em .14em 0; margin: -.04em -.12em -.14em 0; }
.swi { display: inline-block; transform-origin: 0 100%; }
.js [data-js="split"]:not(.is-in) .swi { transform: translateY(115%) rotate(3deg); opacity: 0; }
[data-js="split"].is-in .swi { animation: word 1300ms var(--ease-emph) var(--d, 0ms) both; }
@keyframes word { 0% { opacity: 0; transform: translateY(115%) rotate(3deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* buttons: an icon on every significant one; a fill rises from below on hover */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; height: 54px; padding: 0 9px 0 26px;
  border-radius: 999px; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; user-select: none; cursor: pointer;
  transition: color .5s var(--ease-state), border-color .5s var(--ease-state); }
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--red-bright);
  transform: translateY(102%); transition: transform .7s var(--ease-emph); }
.btn__ico { flex: none; width: 36px; height: 36px; padding: 10px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .7s var(--ease-emph), background-color .5s; }
/* Round 6 (Diallo, Oct 7): colour in the arrow's circle from the start; on hover a coloured
   fill rises and the label stays white (no dark text on the dark page) */
.btn--line { color: #fff; border: 1px solid rgb(255 255 255 / .32); }
.btn--line .btn__ico { background: var(--red-bright); color: #fff; }
.btn--light { color: #0D0D0D; background: #F2F2F2; }
.btn--light .btn__ico { background: var(--red-bright); color: #fff; }
.btn--solid { color: #fff; background: var(--red-bright); }
.btn--solid::before { background: var(--color-accent); }
.btn--solid .btn__ico { background: rgb(255 255 255 / .2); }
@media (hover: hover) {
  .btn:hover::before { transform: none; }
  .btn:hover { color: #fff; }
  .btn--line:hover, .btn--light:hover { border-color: var(--red-bright); }
  .btn:hover .btn__ico { transform: translateX(3px); background-color: rgb(255 255 255 / .22); }
  .btn:hover .btn__ico--down { transform: translateY(3px); }   /* Oct 18: See the Work points down the page */
  .btn:hover .btn__ico--msg { transform: translateY(-2px) rotate(-6deg); }   /* Oct 18: Contact buttons carry a message bubble */
}
/* the small button in the menus (round 7): Contact */
.btn--nav { height: 42px; gap: 12px; padding: 0 5px 0 18px; font-size: 11px; }
.btn--nav .btn__ico { width: 32px; height: 32px; padding: 9px; }

/* ================================================================ 2 why RareCo
   Oct 7 (round 2, Diallo): no held scroll here; the statement lights as it
   scrolls through, each pillar lights as it passes and stays lit, and the frame
   rotates photographs on its own. The brand's reds and oranges arrive in this
   section as a slow mesh (craft layer webgl-mesh-gradient; css-mesh-blobs where
   WebGL is missing or motion is reduced). The sky blues stay in the hero. */
.ov { position: relative; isolation: isolate; overflow: clip; background: #140809; }   /* clip, not hidden: hidden would make it a scroll box and stop the sticky frame */
.ov__mesh { position: absolute; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-reveal); }
.ov.has-gl .ov__mesh { opacity: 1; }
.ov__meshfb { position: absolute; inset: 0; z-index: -4; pointer-events: none; }
.ov.has-gl .ov__meshfb { display: none; }
.ov__meshfb i { position: absolute; display: block; border-radius: 50%; filter: blur(clamp(60px, 9vw, 140px)); }
.ov__meshfb i:nth-child(1) { width: 62vw; height: 62vw; right: -14vw; top: -6vw; background: var(--color-primary); opacity: .55; }
.ov__meshfb i:nth-child(2) { width: 42vw; height: 42vw; right: 16vw; bottom: -18vw; background: var(--color-mesh-2); opacity: .45; }
.ov__meshfb i:nth-child(3) { width: 70vw; height: 70vw; left: -24vw; top: -24vw; background: var(--color-surface-dark); opacity: .8; }
.ov__meshfb i:nth-child(4) { width: 24vw; height: 24vw; right: 4vw; bottom: 10vw; background: var(--color-accent); opacity: .35; }
.ov__grain { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .18; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ov::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--color-bg), transparent); }
.ov::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(13 13 13 / .6), transparent); }
/* Round 3 (Diallo, Oct 7): the frame holds at the centre of the screen while the
   section scrolls, then leaves with it. The side column runs the stage's full
   height (a little over a screen) so the frame has room to hold. */
.ov__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); gap: clamp(32px, 6vw, 120px); align-items: stretch;
  min-height: 125vh; padding: 0 var(--x); }
.ov__copy { align-self: center; padding-block: var(--sec); }
.ov__side { position: relative; padding-block: clamp(40px, 8vh, 96px); }
.ov__statement { margin: 0 0 clamp(24px, 4.5vh, 48px); max-width: 22em; color: #fff; font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.375rem, .2rem + 2.3vw, 3rem); line-height: 1.17;   /* Oct 19 (Diallo, Oct 18): smaller, to make room for the About lines below the pillars, so the section holds its height; was clamp(1.5rem, 1rem + 2vw, 3.5rem) */ letter-spacing: -.014em; text-wrap: pretty; text-shadow: 0 2px 30px rgb(20 8 9 / .35); }
.ov__statement em { font-style: normal; font-weight: 700; }
.ov__statement em .wd { -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  background-image: linear-gradient(180deg, #FFF6EC 0%, #FBE0C4 40%, #F2B680 90%); }
.wd { display: inline; transition: opacity .6s linear; }
.js .ov__statement .wd { opacity: .22; }
.ov__statement.is-lit .wd { opacity: 1; }
.ov__pillars { list-style: none; margin: 0; padding: clamp(18px, 3vh, 30px) 0; display: grid; gap: clamp(14px, 2.4vh, 26px); border-top: 1px solid rgb(255 255 255 / .18); border-bottom: 1px solid rgb(255 255 255 / .18); }   /* round 16: the same rule under Impact */
.pillar { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }   /* round 16: name centred on its line */
/* round 5 (Diallo): separators between the rows, in colour, unlike the white rules above and below the list */
.pillar + .pillar { padding-top: clamp(14px, 2.4vh, 26px); }
.pillar + .pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(.18); opacity: .5;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--red-bright) 45%, rgb(200 63 44 / 0) 100%); transition: transform 1.4s var(--ease-emph), opacity .8s; }
.pillar + .pillar::after { content: ""; position: absolute; left: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); }
.pillar.is-on::before { transform: none; opacity: 1; }
.pillar__name { margin: 0; font: 800 clamp(1.125rem, .7rem + 1.05vw, 1.875rem)/1.05 var(--font-heading); text-transform: uppercase; letter-spacing: -.005em;
  text-wrap: initial; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, rgb(255 255 255 / .26) 0%, rgb(255 255 255 / .26) 44%, #FFFFFF 56%, #FFF1E2 72%, #F7CFA4 95%);
  background-size: 100% 200%; background-position: 0 0; transition: background-position 1.4s var(--ease-cinema); }
.pillar__stop { color: var(--color-accent); opacity: .3; transition: opacity .8s; }
.pillar__line { margin: 0; color: rgb(242 242 242 / .4); font: 400 clamp(.875rem, .8rem + .25vw, 1.0625rem)/1.5 var(--font-body); transition: color 1.2s var(--ease-state); }
.pillar.is-on .pillar__name { background-position: 0 100%; }
.pillar.is-on .pillar__stop { opacity: 1; }
.pillar.is-on .pillar__line { color: rgb(242 242 242 / .9); }

.ov__stick { position: sticky; top: calc(50vh - min(40vh, 400px)); margin: 0 0 0 auto; width: min(100%, calc(min(68vh, 700px) * .8)); }
.ov__frame { margin: 0; }
/* round 15 (Diallo): arrows above the frame, top right */
.ov__nav { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 10px; }
.ov__arrow { display: grid; place-items: center; width: 28px; height: 28px;   /* round 16: 25% smaller */ border-radius: 50%; color: #fff; cursor: pointer;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .3); transition: background-color .4s, border-color .4s; }
.ov__arrow svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease-emph); }
@media (hover: hover) {
  .ov__arrow:hover { background-color: var(--red-bright); border-color: var(--red-bright); }
  .ov__arrow[data-dir="-1"]:hover svg { transform: translateX(-3px); }
  .ov__arrow[data-dir="1"]:hover svg { transform: translateX(3px); }
}
.ov__shots { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--arch) 6px var(--arch) 6px; background: var(--color-surface-dark);
  box-shadow: 0 40px 80px rgb(20 4 6 / .45); }
/* round 12 (Diallo: occasional flashes): only the photo on show and the one under it are
   painted at all (visibility), each on its own layer, decoded before it wipes in */
.ov__shots { isolation: isolate; transform: translateZ(0); }
.ov__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Oct 17 (Diallo: the old photo flashing through after a wipe): every stacked photo keeps its own
   layer for good, so the end of a wipe or zoom never re-rasterises it, and the frame under the stack
   carries the current photo (set by home.js) in case a layer is ever dropped for a frame */
.ov__shot, .capd__media img, .capd__media > video, .capd__slides { will-change: transform; }
.js .ov__shot { clip-path: inset(100% 0 0 0); visibility: hidden; }
.js .ov__shot.was-on, .js .ov__shot.is-on { visibility: visible; }
.js .ov__shot.was-on { z-index: 2; clip-path: inset(0); }
.js .ov__shot.is-on { z-index: 3; clip-path: inset(0); animation: shot-wipe 1.3s var(--ease-wipe) both, shot-zoom 2.4s var(--ease-emph) both; }
@keyframes shot-wipe { from { clip-path: var(--from, inset(100% 0 0 0)); } to { clip-path: inset(0); } }
@keyframes shot-zoom { from { transform: scale(1.16); } to { transform: none; } }

/* ================================================================ 3 capabilities
   Oct 7 (round 2, Diallo): four columns, two rows, full width; the detail
   opens between the rows in the opened card's colour (the card and the panel
   join); each card carries a tone from the palette, set across the grid as a
   sunset that runs red to orange on the top row and back on the bottom. */
/* Round 3 (Diallo, Oct 7): a deep blue mesh behind the grid (the sky blues, set
   B), moving slowly; each card wears its own palette colour at rest (the top
   trim, the border and the open circle), and hover adds its number colour and
   the wash from the bottom left corner. */
.caps { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec) 0 calc(var(--sec) * .8);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-sky-midnight) 18%, var(--color-sky-deep) 55%, var(--color-sky-midnight) 85%, var(--color-bg) 100%); }
.caps__mesh { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-reveal); }
.caps.has-gl .caps__mesh { opacity: 1; }
.caps::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.caps__head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); column-gap: clamp(32px, 6vw, 120px); align-items: end;
  margin-bottom: clamp(40px, 7vh, 80px); }
.caps__head .label { grid-column: 1 / -1; }
.caps__title { margin: 0; max-width: 20em; color: #fff; font: 300 clamp(1.625rem, .9rem + 1.8vw, 3rem)/1.14 var(--font-heading); letter-spacing: -.014em; text-wrap: balance; }
.caps__intro { margin: 0; max-width: 30em; color: rgb(242 242 242 / .66); font: 400 clamp(.9375rem, .85rem + .25vw, 1.0625rem)/1.65 var(--font-body); }
.caps__grid { --gap: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; }   /* round 17: six capabilities, 3 x 2 (2 x 3 below 900px) */
/* round 17: the space under each row is the cards' own margin, not a grid gap, so the closed
   panel (a zero-height row) adds nothing; the open panel takes the same space under itself */
.capc { margin-bottom: var(--gap); }
.capc { --pane: color-mix(in srgb, var(--tone) 30%, #26090C); position: relative; min-height: clamp(180px, calc(27.5vh - 20px), 260px); }   /* round 13: 20px less above the titles */
.capc__h { position: relative; margin: 0; height: 100%; font: inherit; }
.capc__btn { --pad: clamp(20px, 1.9vw, 30px); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  width: 100%; height: 100%; min-height: inherit; padding: var(--pad); border-radius: 16px; color: #fff; text-align: left;
  background: rgb(3 10 30 / .5); border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  transition: border-color .5s var(--ease-state), border-radius .5s var(--ease-open), background-color .5s, box-shadow .6s var(--ease-state); }
.capc__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .7s var(--ease-state);
  background: radial-gradient(130% 100% at 0% 100%, color-mix(in srgb, var(--tone) 50%, transparent), transparent 72%); }
.capc__btn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tone); transform-origin: 0 50%;
  transition: transform .9s var(--ease-emph), height .5s var(--ease-emph), box-shadow .6s; }
.js .capc:not(.is-revealed) .capc__btn::after { transform: scaleX(0); }
.capc.is-revealed .capc__btn::after { animation: draw 1.2s var(--ease-emph) calc(var(--reveal-delay, 0ms) + 300ms) both; }
/* the short line where the number was: muted at rest, the card's colour and longer on hover, white when open */
.capc__dash { position: absolute; top: calc(var(--pad) + 6px); left: var(--pad); width: 18px; height: 2px; border-radius: 2px; background: rgb(242 242 242 / .45);
  transition: width .7s var(--ease-emph), background-color .4s; }
.capc__icon { position: absolute; top: calc(var(--pad) - 9px); right: calc(var(--pad) - 9px); width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .8s var(--ease-emph), background-color .4s, border-color .4s; }
.capc__icon::before, .capc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
.capc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.capc__name { font: 700 clamp(1rem, .64rem + .78vw, 1.5rem)/1.08 var(--font-heading); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance;
  transition: transform .7s var(--ease-emph); }
.capc__line { color: rgb(242 242 242 / .56); font: 400 clamp(.9375rem, .885rem + .15vw, 1.0625rem)/1.5 var(--font-body); transition: color .5s; }   /* Oct 17 (Diallo): 2px up at every width, still two lines */
@media (hover: hover) {
  .capc__btn:hover { border-color: color-mix(in srgb, var(--tone) 85%, transparent); box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
  .capc__btn:hover::before { opacity: 1; }
  .capc__btn:hover::after { height: 4px; box-shadow: 0 0 18px var(--tone); }
  .capc__btn:hover .capc__dash { width: 42px; background-color: var(--tone); }
  .capc__btn:hover .capc__icon { transform: rotate(90deg); border-color: var(--tone); background-color: color-mix(in srgb, var(--tone) 32%, transparent); }
  .capc__btn:hover .capc__line { color: rgb(242 242 242 / .88); }
  .capc__btn:hover .capc__name { transform: translateY(-4px); }
}
/* the open card: filled in its tone, running down into the panel's colour */
.capc.is-active .capc__btn { border-color: transparent;
  background: linear-gradient(170deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 52%, #0D0D0D) 55%, var(--pane) 100%); }
.capc.is-active.is-up .capc__btn { background: linear-gradient(180deg, var(--pane) 0%, color-mix(in srgb, var(--tone) 62%, #0D0D0D) 55%, color-mix(in srgb, var(--tone) 40%, #0D0D0D) 100%); }   /* panel colour at the top where it joins, the tone deepening under the text */
.capc.is-active .capc__btn::before { opacity: 0; }
.capc.is-active .capc__btn::after { transform: none; background: rgb(255 255 255 / .55); }
.capc.is-active.is-up .capc__btn::after { top: auto; bottom: 0; }
.capc.is-active .capc__dash { width: 42px; background-color: #fff; }
.capc.is-active .capc__line { color: rgb(255 255 255 / .9); }
.capc.is-active .capc__icon { transform: rotate(135deg); background-color: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .45); }
/* the bridge across the gap between the card and the panel */
.capc.is-active .capc__h::after { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--gap) + 2px); background: var(--pane); }
.capc.is-active.is-down .capc__btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.capc.is-active.is-down .capc__h::after { top: calc(100% - 1px); }
.capc.is-active.is-up .capc__btn { border-top-left-radius: 0; border-top-right-radius: 0; }
.capc.is-active.is-up .capc__h::after { bottom: calc(100% - 1px); }

/* the one panel, between the rows */
.caps__panel { --ppane: #151112; --ptone: transparent; grid-column: 1 / -1; align-self: start; position: relative; display: grid; grid-template-rows: 0fr;
  margin-bottom: 0; border-radius: 16px; overflow: hidden; background-color: var(--ppane);
  transition: grid-template-rows .8s var(--ease-open), margin-bottom .8s var(--ease-open), background-color .6s var(--ease-state); }
.caps__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .6s;
  background: radial-gradient(70% 140% at var(--px, 10%) var(--py, 0%), color-mix(in srgb, var(--ptone) 40%, transparent), transparent 65%); }
.caps__panel.is-open { grid-template-rows: 1fr; margin-bottom: var(--gap); transition-duration: 1s; }
.caps__panel.tl0 { border-top-left-radius: 0; } .caps__panel.tr0 { border-top-right-radius: 0; }
.caps__panel.bl0 { border-bottom-left-radius: 0; } .caps__panel.br0 { border-bottom-right-radius: 0; }
.caps__pclip { position: relative; overflow: hidden; min-height: 0; }
.caps__pbody { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 72px); align-items: start;
  padding: clamp(24px, 3vw, 48px); padding-right: clamp(56px, 6vw, 96px); padding-bottom: calc(clamp(24px, 3vw, 48px) + 40px); }
.capd__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--arch-s) 6px var(--arch-s) 6px; background: rgb(0 0 0 / .25); }
.capd__media { position: relative; }
.capd__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capd__media img.is-new { animation: shot-wipe 1.2s var(--ease-wipe) .1s both, shot-zoom 2s var(--ease-emph) .1s both; }
/* Oct 17: a muted loop (Motion Graphics) and a rotation of photographs (Talent Integration) in the same frame */
.capd__media > video, .capd__slides { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.capd__media > video.is-new, .capd__slides.is-new { animation: shot-wipe 1.2s var(--ease-wipe) .1s both; }
.capd__slides { overflow: hidden; isolation: isolate; }
.capd__slides > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.capd__slides img, .capd__slides > video { z-index: 1; clip-path: inset(100% 0 0 0); visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.capd__slides img.was-on, .capd__slides img.is-on, .capd__slides > video.was-on, .capd__slides > video.is-on { visibility: visible; clip-path: inset(0); }
.capd__slides img.was-on, .capd__slides > video.was-on { z-index: 2; }
.capd__slides img.is-on, .capd__slides > video.is-on { z-index: 3; animation: shot-wipe 1.3s var(--ease-wipe) both, shot-zoom 2.4s var(--ease-emph) both; }
/* the backing photo under each stack (see the will-change note at .ov__shot); after every `background` shorthand above */
.ov__shots, .capd__media, .capd__slides { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }
.capd__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* Oct 19 (Diallo, Oct 18): the capability's items as tag pills, names only, where the Explore button was
   (phase one has no capability pages); each pill tinted with the panel's capability colour */
.capd__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 40em; }
.capd__pills li { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 60%), color-mix(in srgb, var(--ptone) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--ptone) 60%, rgb(255 255 255 / .35)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
  font: 500 12px/1.2 var(--font-body); letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 1366px) { .capd__text { gap: 16px; } .capd__pills { gap: 6px; } .capd__pills li { padding: 6px 11px; font-size: 11px; } }
@media (max-width: 760px) { .capd__pills { gap: 5px; } .capd__pills li { padding: 5px 9px; font-size: 10.5px; letter-spacing: .01em; } }
/* Oct 17 (Diallo): the About frame's arrows under a rotating photo, bottom left */
.capd__col { min-width: 0; position: relative; }
/* Oct 17 (Diallo): the arrows take no height; they sit 12px under the photo, inside the panel's
   bottom padding (the room the Prev / Next row already reserves), so this panel matches the others */
.capd__arrows { position: absolute; z-index: 3; left: 0; top: calc(100% + 12px); display: flex; justify-content: flex-start; gap: 6px; }
.capd__arrows[hidden] { display: none; }
.capd__name { margin: 0; color: #fff; font: 800 clamp(1.25rem, .9rem + 1vw, 2rem)/1.05 var(--font-heading); text-transform: uppercase; letter-spacing: -.01em; }
.capd__lead { margin: 0; max-width: 36em; color: rgb(242 242 242 / .9); font: 400 clamp(1rem, .9rem + .3vw, 1.1875rem)/1.62 var(--font-body); }
.capd__text.is-play > * { animation: rise-in 1s var(--ease-emph) backwards; }   /* backwards, so the button is free to follow the pointer after */
.capd__text.is-play > :nth-child(1) { animation-delay: .22s; }
.capd__text.is-play > :nth-child(2) { animation-delay: .32s; }
.capd__text.is-play > :nth-child(3) { animation-delay: .42s; }
.capd__text.is-out > * { opacity: 0; transform: translateY(-8px); transition: opacity .22s, transform .22s; }
/* the clip's height eases when the text changes length card to card */
.caps__pclip.is-sizing { transition: height .6s var(--ease-open); }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.caps__close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; color: #fff;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .7s var(--ease-emph), background-color .4s; }
.caps__close span::before, .caps__close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.caps__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) { .caps__close:hover { transform: rotate(90deg); background-color: rgb(255 255 255 / .22); } }
/* round 10 (Diallo): Prev and Next at the panel's bottom right, stepping through the capabilities */
.caps__pnav { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: flex; gap: 8px; opacity: 0; transition: opacity .5s var(--ease-state); }
.caps__panel.is-open .caps__pnav { opacity: 1; transition-delay: .35s; }
.caps__step { display: inline-flex; align-items: center; gap: 9px; height: 22px; padding: 0 29px;   /* round 11 and 12 (Diallo): shorter, wider */ border-radius: 999px; color: #fff; cursor: pointer;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .28); font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .4s, border-color .4s; }
.caps__step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease-emph); }
@media (hover: hover) {
  .caps__step:hover { border-color: color-mix(in srgb, var(--ptone) 85%, #fff); background-color: color-mix(in srgb, var(--ptone) 45%, transparent); }
  .caps__step--prev:hover svg { transform: translateX(-3px); }
  .caps__step--next:hover svg { transform: translateX(3px); }
}
.btn--glass { color: #fff; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass::before { background: var(--red-bright); }
.btn--glass .btn__ico { background: var(--color-accent); color: #fff; }
.caps__panel .btn--glass { border-color: color-mix(in srgb, var(--ptone) 70%, transparent); }
.caps__panel .btn--glass::before { background: var(--red-bright); }
.caps__panel .btn--glass .btn__ico { background: var(--ptone); color: #fff; }
@media (hover: hover) { .btn--glass:hover { border-color: var(--red-bright); } }
.caps__foot { display: flex; justify-content: center; margin-top: clamp(36px, 6vh, 64px); }   /* Oct 18: back, as See the Work (to the work) */


/* ================================================================ 4 selected work */
.work { position: relative; padding: calc(var(--sec) * .7) 0 calc(var(--sec) * .5); background: var(--color-bg); }
.work__head { margin-bottom: clamp(36px, 6vh, 72px); }
.work__title { margin: 0; color: #fff; font: 800 clamp(2.25rem, 1rem + 4.6vw, 6.25rem)/.92 var(--font-heading); text-transform: uppercase; letter-spacing: -.025em; text-wrap: initial; }
/* Oct 17 (Diallo): the Featured work cards run close to full width at every size (a slim margin each
   side), past the 1600px content cap that the heading and everything else keep */
.work__stack { padding-inline: clamp(12px, 1.6vw, 32px); }
/* round 7: the cards stack below the sticky menu */
.wcard { --top: calc(var(--nav-h) + 10px); position: sticky; top: calc(var(--top) + var(--i, 0) * 16px); height: min(calc(100vh - var(--nav-h) - 110px), 58vw, 900px); margin-bottom: 9vh; }
.wcard:nth-child(1) { --i: 0; } .wcard:nth-child(2) { --i: 1; } .wcard:nth-child(3) { --i: 2; }
.wcard:nth-child(4) { --i: 3; } .wcard:nth-child(5) { --i: 4; } .wcard:nth-child(6) { --i: 5; } .wcard:last-child { margin-bottom: 0; }
/* Round 7 (Diallo, Oct 8): smooth while scrolling. No clip-path on the card (a clipped,
   scaling sticky layer let the card under it show at the edges, and re-masked every
   frame); the card is opaque in its own colour from the start, the photograph is
   decoded before the card reveals (home.js), and nothing here uses backdrop-filter. */
.wcard__card { position: relative; isolation: isolate; height: 100%; overflow: hidden; border-radius: clamp(12px, 1.4vw, 22px); background: var(--c1, var(--color-sky-deep));
  transform: scale(var(--s, 1)); transform-origin: 50% 0; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wcard__media { position: absolute; left: 0; right: 0; top: -9%; bottom: -9%; transition: transform 1.6s var(--ease-emph), opacity 1.2s var(--ease-reveal); }
.wcard__media picture { display: block; width: 100%; height: 100%; }   /* Oct 20: a card may carry a phone crop (IBC) */
.wcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.js .wcard__media { opacity: 0; transform: scale(1.1); }
.js .wcard.is-in .wcard__media { opacity: 1; transform: none; transition: transform 2.2s var(--ease-emph), opacity 1.2s var(--ease-reveal); }
@media (hover: hover) { .js .wcard.is-in:hover .wcard__media { transform: scale(1.045); transition: transform 1.4s var(--ease-emph), opacity 1.2s var(--ease-reveal); } }
/* Round 8 (Diallo, Oct 8): the colour comes from the photo's bottom left corner, a soft mesh
   that carries the title and client there and clears to the photograph */
.wcard__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(74% 96% at 0% 100%, color-mix(in srgb, var(--c1) 96%, transparent) 0%, color-mix(in srgb, var(--c1) 82%, transparent) 26%, color-mix(in srgb, var(--c1) 34%, transparent) 50%, color-mix(in srgb, var(--c1) 0%, transparent) 76%),
    radial-gradient(46% 64% at 34% 106%, color-mix(in srgb, var(--c2) 84%, transparent) 0%, color-mix(in srgb, var(--c2) 36%, transparent) 46%, color-mix(in srgb, var(--c2) 0%, transparent) 74%),
    radial-gradient(38% 58% at -4% 54%, color-mix(in srgb, var(--c2) 62%, transparent) 0%, color-mix(in srgb, var(--c2) 0%, transparent) 74%),
    /* round 16: the same from the bottom right corner (its own colours, --c3 deep, --c4 lighter) behind the line */
    radial-gradient(58% 90% at 100% 100%, color-mix(in srgb, var(--c3, var(--c1)) 94%, transparent) 0%, color-mix(in srgb, var(--c3, var(--c1)) 78%, transparent) 26%, color-mix(in srgb, var(--c3, var(--c1)) 30%, transparent) 50%, color-mix(in srgb, var(--c3, var(--c1)) 0%, transparent) 76%),
    radial-gradient(40% 58% at 68% 106%, color-mix(in srgb, var(--c4, var(--c2)) 70%, transparent) 0%, color-mix(in srgb, var(--c4, var(--c2)) 28%, transparent) 46%, color-mix(in srgb, var(--c4, var(--c2)) 0%, transparent) 74%),
    radial-gradient(32% 52% at 104% 56%, color-mix(in srgb, var(--c4, var(--c2)) 50%, transparent) 0%, color-mix(in srgb, var(--c4, var(--c2)) 0%, transparent) 74%); }
/* a light shade under the line on the right and under the tags at the top */
.wcard__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgb(6 6 12 / .72) 0%, rgb(6 6 12 / .3) 22%, rgb(6 6 12 / 0) 42%),
    linear-gradient(180deg, rgb(6 6 12 / .34) 0%, rgb(6 6 12 / 0) 18%); }
.wcard__dim { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--color-sky-midnight); opacity: var(--dim, 0); }
/* the tags: one small row at the top right (round 10), each in its capability's colour as
   tinted glass (a translucent fill with a sheen and a light rim; no backdrop-filter, which
   flickered in the stack) with white text */
.wcard__top { position: absolute; z-index: 3; top: clamp(18px, 3vh, 30px); left: clamp(20px, 2.6vw, 44px); right: clamp(20px, 2.6vw, 44px); display: flex; justify-content: flex-end; }
.wcard__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.wcard__tags li { --t: #fff; flex: none; display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 60%), color-mix(in srgb, var(--t) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 40%, rgb(255 255 255 / .5)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 4px 14px -6px rgb(0 0 0 / .4);
  font: 500 10.5px/1 var(--font-body); letter-spacing: .03em; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
/* each tag in its capability's colour, the same tones as the cards in What we do */
.wcard__tags [data-cap="live"] { --t: var(--red-bright); }
.wcard__tags [data-cap="talent"] { --t: var(--color-accent); }
.wcard__tags [data-cap="ideation"] { --t: var(--color-accent-hover); }
.wcard__tags [data-cap="campaign"] { --t: var(--color-primary); }
.wcard__tags [data-cap="motion"] { --t: var(--color-mesh-2); }   /* round 17: Motion Graphics & Event Video */
.wcard__tags [data-cap="capvid"] { --t: var(--color-link-hover); }   /* round 17: Content Capture & Video */
/* title and client bottom left, the line bottom right (the round 6 layout and title size) */
.wcard__foot { container-type: inline-size; position: absolute; z-index: 3; left: clamp(20px, 2.4vw, 40px); right: clamp(20px, 2.4vw, 40px); bottom: clamp(24px, 4.4vh, 52px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 56px); align-items: end; }
/* Oct 19: the card lines now summarize the featured pages and run longer; between 1025 and 1700px the line
   column widens so every line holds three lines, as before (Diallo: each card holds its line count) */
@media (min-width: 1025px) and (max-width: 1700px) { .wcard__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wcard__title { margin: 0; color: #fff; font: 800 min(clamp(1.75rem, .8rem + 3.1vw, 4.5rem), 4.4cqi)/.98 var(--font-heading);   /* Oct 18: min() keeps INTERNATIONAL inside its column on tablets */ text-transform: uppercase; letter-spacing: -.018em; text-wrap: balance; }
.wcard__client { display: flex; align-items: center; gap: 12px; margin: clamp(10px, 1.4vh, 16px) 0 0; color: rgb(255 255 255 / .92);
  font: italic 400 clamp(calc(1.375rem + 4px), calc(.9rem + .85vw + 6px), calc(2rem + 6px))/1.1 var(--font-serif); letter-spacing: -.005em; }   /* round 12: +2px; Oct 18 (Diallo): +4px more */
.wcard__client::after { content: ""; display: block; width: clamp(24px, 2.4vw, 40px); height: 2px; background: var(--red-bright); }
/* round 10: the client, its dash, then View collaboration (to the case study) */
.wcard__by { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin-top: clamp(10px, 1.4vh, 16px); }
.wcard__by .wcard__client { margin: 0; }
.wcard__cta { height: 40px; text-decoration: none; }
.wcard__cta .btn__ico { width: 28px; height: 28px; padding: 7px; }
/* Oct 21 (Diallo, round 2): View collaboration answers in two steps. At rest it is the clear glass button;
   entering the card raises the red fill and nudges the arrow; pointing at the button itself raises the
   orange over the red and turns the arrow's circle red. Touch screens have no hover, so phones show it
   red at rest (Amir didn't read the card as a link). */
.wcard__cta { transition: color .5s var(--ease-state), border-color .5s var(--ease-state), box-shadow .6s var(--ease-state); }
.wcard__cta::before { background: var(--red-bright); }
.wcard__cta::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--color-accent); transform: translateY(102%); transition: transform .6s var(--ease-emph); }
@media (hover: hover) {
  .btn.wcard__cta:hover::before { transform: translateY(102%); }   /* the base .btn hover would raise it; the card decides */
  .wcard:hover .wcard__cta::before { transform: none; }
  .wcard:hover .wcard__cta { border-color: var(--red-bright); box-shadow: 0 6px 18px rgb(200 63 44 / .35); }
  .wcard:hover .wcard__cta .btn__ico { transform: translateX(3px); background-color: rgb(255 255 255 / .22); }
  .wcard .wcard__cta:hover { border-color: var(--color-accent); box-shadow: 0 8px 26px rgb(226 123 48 / .45); }
  .wcard .wcard__cta:hover::after { transform: none; }
  .wcard .wcard__cta:hover .btn__ico { transform: translateX(5px); background-color: var(--red-bright); }
}
@media (hover: none) {
  .wcard__cta { background: var(--red-bright); border-color: var(--red-bright); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 6px 18px rgb(200 63 44 / .35); }
  .wcard__cta .btn__ico { background: rgb(255 255 255 / .2); }
}
.wcard__line { margin: 0; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .38); color: rgb(242 242 242 / .88);
  font: 400 clamp(.9375rem, .85rem + .3vw, 1.125rem)/1.55 var(--font-body); }
.js .wcard__by, .js .wcard__line, .js .wcard__top { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease-reveal) .8s, transform 1.2s var(--ease-emph) .8s; }
.js .wcard.is-in .wcard__by, .js .wcard.is-in .wcard__line, .js .wcard.is-in .wcard__top { opacity: 1; transform: none; }

/* Oct 18 (Diallo): the View more projects button is gone (.work__foot removed); six features */

/* ================================================================ 5 the range
   Off Home since Oct 7 (Diallo); kept for the top of the capabilities page. */
.range { position: relative; overflow: hidden; padding: clamp(48px, 9vh, 112px) 0 clamp(64px, 11vh, 128px); background: var(--color-bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.range__track { display: flex; width: max-content; animation: range-loop 110s linear infinite; animation-play-state: paused; }
.range.is-run .range__track { animation-play-state: running; }
.range__set { display: flex; gap: 12px; padding-right: 12px; }
.arch { --w: clamp(132px, 11.5vw, 196px); flex: none; display: block; width: var(--w); height: calc(var(--w) * 2.5); overflow: hidden; background: var(--color-sky-deep); }
.arch--a { border-radius: 0 calc(var(--w) * .5) 0 calc(var(--w) * .5); }
.arch--b { border-radius: calc(var(--w) * .5) 0 calc(var(--w) * .5) 0; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.js .range:not(.is-in) .arch { opacity: 0; transform: translateY(50px); }
.js .range:not(.is-in) .arch img { transform: scale(1.3); }
.range.is-in .arch { animation: arch-in 1.4s var(--ease-emph) both; }
.range.is-in .arch img { animation: arch-img 2.2s var(--ease-emph) both; }
.range.is-in .range__set .arch:nth-child(n) { animation-delay: calc(var(--k, 0) * 70ms); }
.range.is-in .range__set .arch:nth-child(n) img { animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes arch-in { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes arch-img { from { transform: scale(1.3); } to { transform: none; } }
@keyframes range-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* the client logos, under the frame in About RareCo: a loop showing three at a
   time (round 7, Diallo, Oct 8: was four; bigger, more room, full white, a much
   smaller label so the logos lead), paused off screen, still under reduced
   motion. home.js sizes each logo by its shape (--lw: wide marks wider and
   lower, square marks taller) so they carry the same weight and the gaps read even. */
.ov__more { margin-top: clamp(24px, 4vh, 40px); }
/* Oct 19 (Diallo, Oct 18): the deck overview below the pillars, the site's only About copy in phase one */
.ov__about { margin: clamp(22px, 3.6vh, 36px) 0 0; max-width: none; color: rgb(242 242 242 / .9); font: 600 clamp(1rem, .9rem + .3vw, 1.1875rem)/1.55 var(--font-body); text-wrap: pretty; }   /* Oct 19 (Diallo, later): back in Archivo, one weight up (600, was 500); the Panchang try is out   /* Oct 19 (Diallo): a step up from the pillar lines, a heavier weight, the full width */
.brands { min-width: 0; margin-top: clamp(20px, 3.2vh, 32px); }
/* round 13 (Diallo): label 21px with its short red dash (the full-width line and the line
   under the logos tried in round 12 are off) */
.brands__label { gap: 12px; margin: 0 0 clamp(4px, 1vh, 10px); color: rgb(255 255 255 / .8);
  font: 600 13px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; }   /* round 14 (Diallo): out of the italic serif; the sans in caps, tracked */
.brands__label::after { width: 22px; height: 1.5px; }
.brands__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brands__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: brands-loop 26s linear infinite; animation-play-state: paused; }
.brands.is-run .brands__track { animation-play-state: running; }
.brands__track li { flex: none; width: var(--cell, 160px); height: 96px; display: flex; align-items: center; justify-content: center; }
@keyframes brands-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo { display: block; width: auto; height: auto; max-width: 80%; opacity: 1; }
.logo--pepsico { max-height: 46px; }
.logo--wf { max-height: 60px; }
.logo--walmart { max-height: 34px; }
.logo--allstate { max-height: 54px; }
.logo--snipes { max-height: 40px; }
.brands.is-sized img.logo { width: var(--lw); max-height: none; max-width: 80%; }
.logo--ph { max-width: none; padding: 9px 12px; border: 1px dashed rgb(255 255 255 / .45); border-radius: 6px; color: #fff; opacity: .6; font: italic 800 15px/1 var(--font-body); letter-spacing: .04em; }

/* ================================================================ 7 inquiry */
.inq { position: relative; isolation: isolate; overflow: hidden; padding: clamp(104px, 17vh, 190px) 0 clamp(96px, 16vh, 180px); background: var(--color-sky-midnight); }
.inq::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; z-index: -1; background: linear-gradient(180deg, var(--color-bg), transparent); }
/* the screen's signature layer: three palette blobs, blurred and drifting slowly (craft layer css-mesh-blobs) */
.inq__glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.inq__glow i { position: absolute; display: block; border-radius: 50%; filter: blur(clamp(60px, 8vw, 120px)); mix-blend-mode: screen; will-change: transform;
  animation: blob 26s var(--ease-cinema) infinite alternate; animation-play-state: paused; }
.inq.is-run .inq__glow i { animation-play-state: running; }
.inq__glow i:nth-child(1) { width: 52vw; height: 52vw; right: -12vw; bottom: -30vw; background: var(--color-primary); opacity: .42; }
.inq__glow i:nth-child(2) { width: 38vw; height: 38vw; right: 18vw; bottom: -24vw; background: var(--color-mesh-2); opacity: .3; animation-duration: 31s; animation-direction: alternate-reverse; }
.inq__glow i:nth-child(3) { width: 30vw; height: 30vw; left: -8vw; bottom: -18vw; background: var(--color-sky-upper); opacity: .55; animation-duration: 23s; }
@keyframes blob { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-4vw, -3vw, 0) scale(1.08); } to { transform: translate3d(3vw, -6vw, 0) scale(.94); } }
.inq__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.inq__title { margin: 0 0 clamp(40px, 7vh, 88px); color: #fff; font-family: var(--font-heading); font-weight: 300; text-transform: uppercase; text-wrap: initial;
  font-size: clamp(2.25rem, .8rem + 4.8vw, 6.5rem); line-height: 1; letter-spacing: -.022em; }
.inq__ln { display: block; overflow: hidden; padding: .05em .2em .12em 0; margin: -.05em -.2em -.12em 0; }
/* round 13 (Diallo): Experience 75px further left, together 75px to the right */
.inq__ln:nth-child(2) { padding-left: max(0px, calc(clamp(0px, 13vw, 250px) - 75px)); }
.inq__ln:nth-child(3) { padding-left: 75px; }
.inq__lni { display: block; transform-origin: 0 100%; }
.inq__h { font-weight: 800; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: var(--sunset-pour); background-size: 100% 200%; background-position: 0 100%; }
.inq__stop { color: var(--red-bright); font-weight: 700; display: inline-block; }
.js .inq:not(.is-in) .inq__lni { opacity: 0; }
.js .inq:not(.is-in) .inq__h { background-position: 0 0; }
.js .inq:not(.is-in) .inq__stop { opacity: 0; }
.inq.is-in .inq__lni { animation: line 1400ms var(--ease-emph) both; }
.inq.is-in .inq__ln:nth-child(2) .inq__lni { animation-delay: 200ms; }
.inq.is-in .inq__ln:nth-child(3) .inq__lni { animation-delay: 400ms; }
.inq.is-in .inq__h { animation: pour 1600ms var(--ease-cinema) 1500ms both; }
.inq.is-in .inq__stop { animation: land 700ms var(--ease-emph) 2600ms both; }
.inq__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.inq__body { margin: 0; max-width: 31em; color: rgb(242 242 242 / .8); font: 400 clamp(1rem, .9rem + .35vw, 1.25rem)/1.6 var(--font-body); }
.btn { will-change: transform; transition: transform .9s var(--ease-emph), color .5s var(--ease-state), border-color .5s var(--ease-state); }
.btn.is-pull { transition: transform .25s linear, color .5s var(--ease-state), border-color .5s var(--ease-state); }
.inq__cta { display: inline-block; flex: none; }

/* ================================================================ footer
   Sticky to the bottom under main, so the page lifts off it. */
.foot { position: sticky; bottom: 0; z-index: 0; overflow: hidden; background: var(--color-bg); color: rgb(242 242 242 / .7); }
.foot__in { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: clamp(36px, calc(9vh - 24px), 80px); padding-bottom: clamp(20px, calc(5vh - 16px), 40px); }   /* round 15: about 40px shorter */
.foot__home { display: block; flex: none; cursor: pointer; border-radius: 6px; }
.foot__logo { display: block; width: clamp(140px, 11.1vw, 186px);   /* Oct 19: +6% for the wider Model lockup, the R the same size */ height: auto; transition: opacity .4s; }   /* round 7: smaller (was 190 to 280px) */
/* Oct 22 (Diallo): the footer lockup grows slowly on hover and settles back just as slowly; a light crosses
   the R the moment the pointer arrives (round 2: the R only, since white letters can't get brighter, and
   quick). The layer covers the R (the first 24% of the lockup) with the lockup's own mask, scaled to match. */
.foot__home, .fw-foot__home { position: relative; display: inline-block; transition: transform 1.4s var(--ease-emph); }
.fw-foot__home img { display: block; }
.foot__home::after, .fw-foot__home::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24%; pointer-events: none;
  -webkit-mask: url("../media/rareco-lockup-mesh-v2.svg?v=20261019a") 0 0 / 416.7% 100% no-repeat; mask: url("../media/rareco-lockup-mesh-v2.svg?v=20261019a") 0 0 / 416.7% 100% no-repeat;
  background: linear-gradient(105deg, transparent 0%, transparent 38%, rgb(255 240 228 / .8) 50%, transparent 62%, transparent 100%) 0 0 / 250% 100% no-repeat;
  background-position: 100% 0; }
@media (hover: hover) {
  .foot__home:hover, .fw-foot__home:hover { transform: scale(1.06); }
  .foot__home:hover::after, .fw-foot__home:hover::after { background-position: 0% 0; transition: background-position .85s cubic-bezier(.2, .7, .3, 1); }
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); }
.foot__nav span { color: #fff; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; transition: color .3s; }
.foot__nav span[aria-disabled] { color: rgb(242 242 242 / .5); }

.foot__base { padding-block: 22px 28px; border-top: 1px solid rgb(255 255 255 / .1); color: rgb(242 242 242 / .55); font: 400 12.5px/1.4 var(--font-body); letter-spacing: .01em; }   /* round 7: sentence case, lighter */
/* the footer content settles as the page lifts off it (home.js writes --r, 0 to 1) */
.foot__in, .foot__base { transform: translateY(calc((1 - var(--r, 1)) * 70px)); opacity: calc(.25 + var(--r, 1) * .75); }

/* ================================================================ the cursor
   A red dot that follows the pointer and a ring that trails it (the ring's
   lag is the point). Round 2 (Diallo, Oct 7): the dot is 18px (was 8), the
   ring stays 38px; a white hairline keeps the red dot readable on any ground,
   and over the red mesh (data-cur="warm") the dot turns white. Over
   something clickable the ring grows to 58px; over the work and the
   capability cards it becomes a translucent 58px disc (round 4; 80 before) with a
   label: View, Open, Close. Fine pointers only (home.js adds .has-cur). */
.cur { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; display: none; }
.cur:popover-open { inset: 0 auto auto 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }   /* Oct 19: in the top layer, above the contact pop-up */
.has-cur .cur { display: block; }
.has-cur, .has-cur * { cursor: none !important; }
.cur__dot, .cur__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cur__dot::before { content: ""; position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--red-bright);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6), 0 2px 12px rgb(0 0 0 / .3); transition: transform .45s var(--ease-emph), opacity .3s, background-color .4s, box-shadow .4s; }
.cur.is-warm .cur__dot::before { background: #fff; box-shadow: 0 0 0 1.5px rgb(200 63 44 / .5), 0 2px 12px rgb(0 0 0 / .25); }
.cur__ring::before { content: ""; position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .45);
  transform: translate(-50%, -50%); transition: width .55s var(--ease-emph), height .55s var(--ease-emph), background-color .45s, border-color .45s, opacity .3s; }
.cur__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; white-space: nowrap; color: #fff;
  font: 600 9.5px/1.25 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-align: center; transition: opacity .3s, transform .55s var(--ease-emph); }
.cur.is-link .cur__ring::before { width: 58px; height: 58px; border-color: rgb(255 255 255 / .7); background-color: rgb(200 63 44 / .16); }
.cur.is-link .cur__dot::before { transform: scale(.55); }
.cur.is-label .cur__ring::before { width: var(--cw, 58px); height: var(--cw, 58px); border-color: rgb(255 255 255 / .35); background-color: rgb(200 63 44 / .55);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
.cur.is-warm.is-label .cur__ring::before { background-color: rgb(13 13 13 / .38); }
.cur.is-label .cur__label { opacity: 1; transform: translate(-50%, -50%); }
.cur.is-label .cur__dot::before { transform: scale(0); }
.cur.is-down .cur__ring::before { width: 30px; height: 30px; }
.cur.is-label.is-down .cur__ring::before { width: calc(var(--cw, 58px) - 8px); height: calc(var(--cw, 58px) - 8px); }
.cur.is-out .cur__ring::before, .cur.is-out .cur__dot::before, .cur.is-out .cur__label { opacity: 0; }

/* ================================================================ reduced motion: everything in place, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .hero .hero__media, .hero .bar, .hero .hero__lab, .hero .hero__lni, .hero .hero__comma, .hero .hero__stop, .hero .hero__mark > *, .hero .cue, .hero .hero__label::after
    { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero .hero__h { animation: none !important; background-position: 0 100% !important; }
  .hero .hero__mark > .hero__drop { opacity: .5 !important; transform: translate(0, 12px) !important; }
  .hero .hero__shine { display: none !important; }
  .cue i::after { animation: none !important; transform: translateY(15px); }
  .label .label__t, .label::after, .swi, .inq__lni, .inq__stop { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .inq__h { animation: none !important; background-position: 0 100% !important; }
  .ov__statement .wd { opacity: 1 !important; }
  .pillar__name { background-position: 0 100% !important; transition: none !important; }
  .pillar__line { color: rgb(242 242 242 / .9) !important; }
  .pillar__stop { opacity: 1 !important; }
  .ov__shot { animation: none !important; }
  .ov__shot.is-on { clip-path: none !important; z-index: 3; visibility: visible !important; }
  .caps__pbody .capd__media img, .caps__pbody .capd__media > *, .caps__pbody .capd__text > * { animation: none !important; }
  .caps__panel, .capc__btn, .capc__icon, .capc__name { transition: none !important; }
  .wcard__card, .wcard__media, .wcard__by, .wcard__line, .wcard__top { transform: none !important; opacity: 1 !important; transition: none !important; }
  .snav, .snav__spot { transition: none !important; }
  .range__track { animation: none !important; }
  .arch, .arch img { animation: none !important; opacity: 1 !important; transform: none !important; }
  .inq__glow i { animation: none !important; }
  .brands__track { animation: none !important; }
  .btn, .btn::before, .btn__ico { transition: none !important; }
}

/* the capability grid in two columns below 900px; the panel then opens under the clicked card's row */
@media (max-width: 1200px) { .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* Oct 17: two columns up to 1200px (was 900) so the larger card lines stay on two lines */

/* ================================================================ phone: a working layout; the phone gets its own pass after the page */
@media (max-width: 760px) {
  .hero { --top: 126px; --lk-h: 116px; }
  .bar__links { display: none; }
  .bar__logo { height: 22px; }
  .hero__head { right: var(--x); max-width: none; }
  .hero__label { font-size: clamp(1.6328rem, 1.1875rem + 1.425vw, 2.0781rem); }
  .hero__title { font-size: calc((100cqw - 2 * var(--x)) / 13.55); }   /* Oct 17: "come together." fills the width inside the gutters */
  .cue { display: none; }

  .ov__stage { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .ov__copy { padding-bottom: 32px; }
  .ov__side { padding-block: 0 var(--sec); }
  .ov__stick { position: relative; top: auto; width: 100%; }
  .ov__statement { font-size: clamp(1.125rem, .75rem + 2vw, 1.3125rem); margin-bottom: 22px; }   /* Oct 19: smaller with the About lines; was clamp(1.375rem, 1rem + 2vw, 1.75rem) */
  .ov__about { margin-top: 16px; font-size: 1rem; }
  .pillar { grid-template-columns: 1fr; gap: 6px; }
  .caps__head { grid-template-columns: 1fr; row-gap: 20px; }
  .capc { min-height: 148px; }
  .capc__line { display: none; }
  .caps__pbody { grid-template-columns: minmax(0, 1fr); padding-right: clamp(24px, 3vw, 48px); padding-top: 56px; }
  .caps__pbody .btn { max-width: 100%; white-space: normal; height: auto; min-height: 54px; padding-block: 9px; line-height: 1.3; }
  .capd__arrows { top: auto; left: 10px; bottom: 10px; }   /* phones: the text follows the photo, so the arrows sit on the photo's bottom left */
  .wcard { height: 74vh; }
  .wcard__foot { grid-template-columns: 1fr; gap: 14px; }
  .wcard__tags { flex-wrap: wrap; }   /* six tags do not fit one row on a phone */
  .bar__cta { margin: -5px 0; }
  .snav { top: 10px; }
  .snav__pill { gap: clamp(10px, calc(10px + (100vw - 320px) * .16), 22px); padding-right: 5px; }   /* Oct 20 (Diallo): more room between the R and About, and Work and Contact (was 10px); 21px at 390, still fits at 320 */
  .snav__links { gap: clamp(10px, calc(10px + (100vw - 320px) * .08), 16px); padding: 0; }   /* was 12px */
  .snav__links span { font-size: 10px; letter-spacing: .1em; }
  .snav__cta { gap: 0; padding: 0 5px; }
  .snav__cta .btn__t { display: none; }
  .inq__ln:nth-child(2), .inq__ln:nth-child(3) { padding-left: 0; }
  .inq__foot { flex-direction: column; align-items: flex-start; }
  .foot { position: relative; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}
/* Oct 18 (mobile check): fixes from the phone and tablet pass */
@media (max-width: 760px) {
  .wcard__title { font-size: min(1.75rem, 7.4cqi); }   /* one column: INTERNATIONAL fits the card at 320 to 430px */
  .wcard { height: min(74vh, calc(100svh - var(--top) - 5 * 16px - 8px)); }   /* the last card in the stack still ends above the screen's foot */
  .inq__title { font-size: min(clamp(2.25rem, .8rem + 4.8vw, 6.5rem), calc((100vw - 2 * var(--x)) / 10.2)); }   /* EXPERIENCE (about 9.8em) fits inside the gutters */
}
@media (min-width: 761px) and (max-width: 1200px) {
  .hero__head { max-width: calc(100% - 2 * var(--x)); }   /* tablets: the line "experiences, talent" was cut off at 60% of the width */
}
@media (max-aspect-ratio: 4/5) { .cue { display: none; } }
@media (max-width: 340px) { .wcard__tags { gap: 4px; } .wcard__tags li { padding: 4px 8px; font-size: 10px; } }   /* the smallest phones: the tags clear the titles */   /* tall screens play the portrait loop, whose RareCo lettering sits where the cue was */
@media (max-height: 520px) and (orientation: landscape) {
  /* phones on their side: shorter stack steps so each card can be taller, and no tags (they ran into the titles) */
  .wcard { top: calc(var(--top) + var(--i, 0) * 6px); height: calc(100svh - var(--top) - 5 * 6px - 10px); }
  .wcard__top { display: none; }
}
/* Oct 18 (mobile check): below 560px the capability cards go to one column. In two columns
   the long single words (INTEGRATION, EXPERIENCES, DEVELOPMENT) ran past the card's edge. */
@media (max-width: 560px) {
  .caps__grid { grid-template-columns: minmax(0, 1fr); }
  .capc { min-height: 112px; }
  .snav__links span { font-size: 11px; }
}
/* Oct 18 (mobile check): on touch screens the small controls get a 44px hit area without
   changing how they look (Apple's minimum touch target) */
@media (pointer: coarse) {
  .ov__arrow { position: relative; }
  .ov__arrow::before { content: ""; position: absolute; inset: -8px; }
  .snav__links span { padding-block: 17px; margin-block: -5px; }
  .snav__links span::after { bottom: 8px; }
  .foot__nav span[role] { display: inline-block; padding-block: 15px; margin-block: -15px; }
  .foot__nav span[role]::after { bottom: 8px; }
  .bar__links span { padding-block: 16px; margin-block: -10px; }
  .bar__links span[role="link"]::after { bottom: 10px; }
}

/* Oct 18 (Safari): every entrance holds on its first frame until the page is styled,
   its fonts are in and a frame is drawn (.qw-wait, set in the inline <head> script and
   cleared by the ready gate in motion.js or home.js), so nothing plays unseen and pops in */
/* ================================================================ contact pop-up
   Oct 19 (Diallo; copy in website/copy/06_contact-form.md). RareCo-branded on the library's
   form register (form-field.css in the bundle, the on-dark fields) with the site's own dialog
   shell: the deep sky ground with a warm glow, the white lockup, Panchang title, capability
   pills in the What we do colours. Full screen on phones. */
.cmodal { --cm-bg: var(--color-sky-deep); padding: 0; border: 0; margin: auto; width: min(1040px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px);
  color: #fff; background: transparent; overflow: visible; }
.cmodal::backdrop { background: rgb(4 8 24 / .74); }   /* Oct 19 (Diallo, pills felt slow): no blur on the backdrop; a full-screen blur under the top-layer cursor re-renders on every move and click */
.cmodal[open] { animation: cm-in .7s var(--ease-emph) both; }
.cmodal[open]::backdrop { animation: cm-fade .5s ease both; }
@keyframes cm-in { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
.cmodal__in { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); max-height: calc(100dvh - 48px); overflow: hidden;
  border-radius: 22px; border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 40px 120px -30px rgb(0 0 0 / .7);
  background: radial-gradient(90% 70% at 0% 100%, rgb(226 123 48 / .38), transparent 60%), radial-gradient(70% 60% at 100% 0%, rgb(200 63 44 / .22), transparent 65%),
    linear-gradient(160deg, var(--color-sky-high) 0%, var(--color-sky-deep) 45%, var(--color-sky-midnight) 100%); }
.cmodal__rail { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding: clamp(28px, 4vw, 52px);
  border-right: 1px solid rgb(255 255 255 / .1); }
.cmodal__mark { width: clamp(159px, 14.8vw, 212px); height: auto; margin-bottom: clamp(18px, 4vh, 48px); }
.cmodal__title { margin: 0; font: 800 clamp(1.75rem, 1.1rem + 2vw, 2.75rem)/1 var(--font-heading); text-transform: uppercase; letter-spacing: -.015em;
  -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #FFF6EC 0%, #FBE0C4 45%, #F2B680 100%); }
.cmodal__lead { margin: 0; max-width: 24em; color: rgb(242 242 242 / .82); font: 400 clamp(.9375rem, .88rem + .2vw, 1.0625rem)/1.6 var(--font-body); }
.cmodal__body { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 3.4vw, 48px); padding-top: clamp(56px, 6vw, 64px); }
.cmodal__close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .28); transition: transform .7s var(--ease-emph), background-color .4s; }
.cmodal__close span::before, .cmodal__close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.cmodal__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) { .cmodal__close:hover { transform: rotate(90deg); background-color: rgb(255 255 255 / .2); } }
.cmodal__close:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 3px; }
html.has-modal, html.has-modal body { overflow: hidden; }
/* fields: the library's on-dark register, tuned to the sky ground */
.cform .qw-field-row { gap: 16px; margin-bottom: 16px; }
.cform .qw-field { margin-bottom: 16px; }
.cform .qw-field-row > .qw-field { margin-bottom: 0; }
.cform .qw-field--on-dark .qw-field__label { display: block; margin-bottom: 7px; font: 600 12px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgb(242 242 242 / .86); }
.cform .qw-field__optional { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgb(242 242 242 / .55); }
.cform .qw-req { margin-left: 3px; color: var(--color-accent); }
.cform .qw-field--on-dark .qw-field__control { width: 100%; box-sizing: border-box; border-radius: 12px; font: 400 16px/1.4 var(--font-body); color: #fff;
  background: rgb(4 12 36 / .5); border: 1.5px solid rgb(255 255 255 / .2); padding: 13px 15px; transition: border-color .3s, box-shadow .3s, background-color .3s; }
.cform .qw-field--on-dark .qw-field__control:hover { border-color: rgb(255 255 255 / .34); }
.cform .qw-field--on-dark .qw-field__control:focus { outline: none; border-color: var(--color-accent); background-color: rgb(4 12 36 / .7); box-shadow: 0 0 0 3px rgb(226 123 48 / .25); }
.cform .qw-field__control--textarea { resize: vertical; min-height: calc(3 * 1.4em + 28px); }
.cform .qw-field__control.is-invalid { border-color: #FF8A6B !important; background-color: rgb(200 63 44 / .12) !important; box-shadow: 0 0 0 3px rgb(200 63 44 / .22) !important; }
.cform .qw-field__error { color: #FFB49E; font-size: 12px; margin-top: 6px; min-height: 0; }
.cform .qw-field__error:empty { display: none; }
.cform__summary { border-color: #FF8A6B; background: rgb(200 63 44 / .16); color: #FFE2D8; border-radius: 12px; }
.cform__summary a { color: #fff; }
.cform__legend { padding: 0; margin: 4px 0 12px; font: 600 12px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgb(242 242 242 / .86); }
.cform__interests { margin: 0 0 18px; }
/* the interests: checkbox pills in the capability colours, in capability order */
.cform__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cpill { --t: #fff; position: relative; display: inline-flex; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cpill input { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cpill span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 999px; color: #fff;
  border: 1.5px solid color-mix(in srgb, var(--t) 70%, rgb(255 255 255 / .2)); background: color-mix(in srgb, var(--t) 14%, transparent);
  font: 500 13px/1.2 var(--font-body); letter-spacing: .01em; transition: background-color .14s ease-out, border-color .14s ease-out; }
.cpill span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 0 transparent; transition: transform .16s ease-out, background-color .14s ease-out; }
@media (hover: hover) { .cpill:hover span { background: color-mix(in srgb, var(--t) 28%, transparent); } }
.cpill input:checked + span { background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 60%), color-mix(in srgb, var(--t) 82%, transparent); border-color: color-mix(in srgb, var(--t) 60%, #fff); }
.cpill input:checked + span::before { background: #fff; transform: scale(1.15); }
.cpill input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.cpill[data-cap="ideation"] { --t: var(--color-accent-hover); }
.cpill[data-cap="talent"] { --t: var(--color-accent); }
.cpill[data-cap="motion"] { --t: var(--color-mesh-2); }
.cpill[data-cap="live"] { --t: var(--red-bright); }
.cpill[data-cap="capvid"] { --t: var(--color-link-hover); }
.cpill[data-cap="campaign"] { --t: var(--color-primary); }
.cpill[data-cap="general"] { --t: #C9D3EE; }
.cpill[data-cap="other"] { --t: #E6DCD3; }   /* Oct 20 (Diallo): Other, after General Inquiry */
.cform__foot { margin-top: 6px; display: flex; align-items: center; gap: 16px; }
.cform__ts { margin: 2px 0 14px; }   /* Oct 20: the Turnstile check, shown only when Cloudflare asks for one */
.cform__ts:empty { display: none; }
.cform__send { cursor: pointer; border: 0; font-family: var(--font-body); }
.cform__send[disabled] { opacity: .7; cursor: progress; }
.cform__done { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; min-height: 100%; }
.cform__done[hidden] { display: none; }
.cform__done-t { margin: 0; max-width: 16em; font: 800 clamp(1.5rem, 1rem + 1.6vw, 2.25rem)/1.08 var(--font-heading); text-transform: uppercase; letter-spacing: -.01em; }
@media (max-width: 860px) {
  .cmodal { width: 100vw; height: 100dvh; max-height: none; margin: 0; }
  .cmodal__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .cmodal__rail { gap: 10px; padding: 22px var(--x, 20px) 18px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .cmodal__mark { width: 135px; margin-bottom: 10px; }
  .cmodal__body { padding: 22px var(--x, 20px) calc(28px + env(safe-area-inset-bottom)); }
  .cform .qw-field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .cform .qw-field-row > .qw-field { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cmodal[open], .cmodal[open]::backdrop { animation: none; } .cpill span, .cpill span::before { transition: none; } }

html.qw-wait *, html.qw-wait *::before, html.qw-wait *::after { animation-play-state: paused !important; }
/* Oct 19, 2026 (Diallo): Featured work on desktop is the six-card grid from the featured work index
   (7 + 5, 5 + 7, 6 + 6; the tags step out, as on the index); tablets and phones keep the stack, each
   card sliding over the one before. Every card links to its project (the whole card, plus View
   collaboration); with a mouse, the project's loop plays on hover (home.js). */
.wcard__link { position: absolute; inset: 0; z-index: 4; }
.wcard__foot { z-index: 5; pointer-events: none; }
.wcard__foot .wcard__cta { pointer-events: auto; }
.wcard__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vx, 50%) 50%; opacity: 0; transition: opacity .8s var(--ease-reveal); }
.wcard.is-playing .wcard__loop { opacity: 1; }
.wcard__media { view-transition-class: fwm; }
@media (min-width: 1025px) {
  .work__stack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); }
  .wcard, .wcard:last-child { position: relative; top: auto; height: clamp(420px, 44vw, 660px); margin: 0; }
  .wcard:nth-child(1), .wcard:nth-child(4) { grid-column: span 7; }
  .wcard:nth-child(2), .wcard:nth-child(3) { grid-column: span 5; }
  .wcard:nth-child(5), .wcard:nth-child(6) { grid-column: span 6; }
  .wcard__card { transform: none; will-change: auto; }
  .wcard__media { top: 0; bottom: 0; }
  .wcard__media img { transform: none !important; }
  .wcard__dim, .wcard__top { display: none; }
  .wcard__shade { background: linear-gradient(0deg, color-mix(in srgb, var(--c1) 88%, transparent) 0%, color-mix(in srgb, var(--c1) 58%, transparent) 30%, color-mix(in srgb, var(--c1) 0%, transparent) 62%); }
  .wcard__foot { left: clamp(18px, 2vw, 36px); right: clamp(18px, 2vw, 36px); bottom: clamp(20px, 3.4vh, 40px); grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
  .wcard__title { font-size: min(clamp(1.625rem, .9rem + 2.3vw, 3.5rem), calc(100cqi / (var(--tw, 10) * 1.12))); }
  .wcard__line { max-width: 34em; padding-top: 14px; }
  .js .wcard:nth-child(even).is-in .wcard__media { transition-delay: .12s; }
  .js .wcard:nth-child(even).is-in .wcard__by, .js .wcard:nth-child(even).is-in .wcard__line { transition-delay: .92s; }
  @media (hover: hover) { .js .wcard.is-in:hover .wcard__media { transform: scale(1.04); } }
}

/* Oct 19, 2026: page transitions. Home opts in to the cross-document view transition the featured
   pages use (work/featured.css), so moving between them crossfades instead of cutting. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* Oct 23 (Diallo, Safari): no dip to dark. The old page stays still and opaque underneath while the new one
   rises in over it (normal blending, not the default plus-lighter), so the carried picture never sits on black */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: 560ms cubic-bezier(.22, 1, .36, 1) both vt-in; mix-blend-mode: normal; }
::view-transition-group(*.fwm) { animation-duration: 820ms; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
::view-transition-image-pair(*.fwm) { overflow: hidden; border-radius: 16px; }
::view-transition-old(*.fwm), ::view-transition-new(*.fwm) { height: 100%; object-fit: cover; animation-duration: 820ms; }
@keyframes vt-in { from { opacity: 0; transform: translateY(20px); } }
canvas.is-dropped { display: none !important; }   /* js/leave.js drop(): Home's off-screen WebGL fields leave at the click */
/* the marker home.js reads to know this stylesheet has been applied (keep it last) */
:root { --site-css: 1; }

/* Oct 19 (Diallo): per-card framing for the still (--ox) and the hover loop (--vx); Future Forward shows the whole Maker's Studio sign, the IBC loop is left-justified */

/* ================================================================ Oct 20 (Diallo): the phone pass on Home
   (desktop is locked; everything here is phone or tablet only) */
/* the contact pop-up floats with room on every side, no longer full screen */
@media (max-width: 860px) {
  .cmodal { width: calc(100vw - 24px); height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; }
  .cmodal__in { height: 100%; border-radius: 18px; border: 1px solid rgb(255 255 255 / .14); }
}
@media (max-width: 760px) {
  /* eyebrows (About RareCo, What We Do, Featured Work and the rest) much larger */
  .label:not(.brands__label) { font-size: 1.875rem; gap: 16px; }
  .brands__label { font-size: 14px; }
  /* About, a step up from the eyebrow through the paragraph */
  .ov__statement { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 1.875rem); }   /* Oct 20 (Diallo): 4px up (was clamp(1.375rem, 1.1rem + 1.2vw, 1.625rem)) */
  .pillar__name { font-size: 1.375rem; }
  .ov__about { margin-top: 24px; font-size: 1.125rem; }
  /* the body text floor on phones: 17px */
  .pillar__line, .caps__intro, .capc__line, .wcard__line, .capd__lead, .inq__body { font-size: 1.0625rem; }
  /* About order: the statement and pillars, then the photographs and the logos, a rule, then the paragraph */
  .ov__stage { display: flex; flex-direction: column; min-height: 0; padding-block: var(--sec) calc(var(--sec) * .5); }   /* less empty space into What We Do */
  .ov__copy, .ov__side, .ov__stick { display: contents; }
  .ov__nav, .ov__frame, .brands { order: 1; }
  .ov__about, .ov__more { order: 2; }
  .ov__nav { margin-top: 32px; }
  .brands { padding-bottom: 22px; border-bottom: 1px solid rgb(255 255 255 / .18); }

  /* capability cards: the line under every title, and the hover look is the resting look */
  .capc { min-height: 0; }
  .capc__btn { gap: 10px; padding-top: calc(var(--pad) + 46px);
    border-color: color-mix(in srgb, var(--tone) 85%, transparent); box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
  .capc__btn::before { opacity: 1; }
  .capc__btn::after { height: 4px; box-shadow: 0 0 18px var(--tone); }
  .capc__dash { width: 42px; background-color: var(--tone); }
  .capc__icon { transform: rotate(90deg); border-color: var(--tone); background-color: color-mix(in srgb, var(--tone) 32%, transparent); }
  .capc__name { font: 800 clamp(1.25rem, .9rem + 1vw, 2rem)/1.05 var(--font-heading); letter-spacing: -.01em; }   /* the open panel's title size and weight */
  .capc__line { display: block; color: rgb(242 242 242 / .88); }
  .capc.is-active .capc__btn { box-shadow: none; }
  .capc.is-active .capc__btn::after { height: 3px; box-shadow: none; }
  /* the open panel: one close (the card's own), and the title stays on the card */
  .caps__close, .caps__panel .capd__name { display: none; }
  .caps__pbody { padding-top: clamp(24px, 3vw, 48px); }

  /* featured work: no capability tags, and a per-card phone framing (--ox-m) */
  .wcard__top { display: none; }
  .wcard__media img { object-position: var(--ox-m, var(--ox, 50%)) var(--oy, 50%); }
  /* Oct 20 (Diallo): the photo and video arrows go under the frame, centred, never on it */
  .capd__arrows { position: static; justify-content: center; margin-top: 12px; }
  /* Oct 20 (Diallo): the photo arrows a size up on phones, easier under a thumb (28px to 36px) */
  .ov__arrow { width: 36px; height: 36px; }
  .ov__arrow svg { width: 14px; height: 14px; }
  .ov__nav, .capd__arrows { gap: 10px; }
  /* Oct 20 (Diallo): phone crops for Creative Currency (the full height of the group photo: the
     Creative Currency screen, the Fellows, JD and Amir over the title) and The Big Homecoming (the two
     lights at the top, the logo higher, more of the band); each sits in its frame without the desktop nudges */
  .wcard[aria-labelledby="w2"] { --sy: 0px !important; --ox-m: 50% !important; }
  .wcard[aria-labelledby="w6"] { --oy: 0% !important; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .wcard { height: min(80vh, calc(100svh - var(--top) - 5 * 16px - 8px)); }   /* a little taller (was 74vh) */
}

/* ===== public/work/featured.css ===== */
/* RareCo Creative · featured work pages, v2 template (review, Oct 19, 2026)
   One template for the six pages (Diallo's notes on the layout options, Oct 19), on the Home tokens,
   type, buttons and menu (home.css loads first). Uniform core: .fh (panoramic hero), .fi (intro with
   the sticky project card and the overview in colour boxes), .fr / .fc (chapters on the route line),
   .fg (even collages), .fq (the drifting row of vertical films), .fp (previous, next, all work),
   .fx (the Featured work index). Each page composes its chapters from the pieces below it.
   Copy: rareco-creative/website/copy/case-studies/ (draft 3). Per page colours: --c1 to --c4, the
   project's Home card colours, set on the body. */

.fw { --fw-x: var(--x); --fw-gap: clamp(10px, 1.1vw, 18px); --fw-r: 16px;
  --g-warm: linear-gradient(135deg, #982B2E 0%, #B0332D 40%, #C83F2C 70%, #E06335 100%);
  --g-sky: linear-gradient(135deg, #12327E 0%, #0B2562 50%, #071D4F 100%);
  --g-gold: linear-gradient(150deg, #B07A3A 0%, #7a4e2c 45%, #2a1a0c 100%);
  --fc-pad: clamp(52px, 8vh, 100px);   /* Oct 20 (Diallo): tighter chapter breaks at every width (was clamp(64px, 10vh, 128px)) */
  --rx: max(14px, calc(var(--fw-x) - clamp(20px, 2.2vw, 36px)));   /* the route line, in the left gutter */
  background: var(--color-bg); }
.fw main { display: block; }
.fw-wrap { padding-inline: var(--fw-x); }
.fw img, .fw video { display: block; max-width: 100%; }
.fw figure, .fw blockquote { margin: 0; }

/* ---------- the menu on an inside page: always shown */
.fw .snav { transform: none; }
.fw .snav__links a { display: block; position: relative; padding: 12px 1px; color: rgb(242 242 242 / .62); font: 600 11px/1 var(--font-body); letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; transition: color .4s var(--ease-state); }
.fw .snav__links a.is-here { color: #fff; }
.fw .snav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--red-bright); transform: scaleX(0);
  transform-origin: 100% 50%; transition: transform .6s var(--ease-emph); }
.fw .snav__links a.is-here::after { transform: scaleX(1); }
@media (hover: hover) { .fw .snav__links a:hover { color: #fff; } .fw .snav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
.fw a.btn { text-decoration: none; }

/* ---------- the review chip (review chrome only) */
.fw-review { position: fixed; z-index: 70; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 999px;
  background: rgb(10 14 32 / .82); border: 1px solid rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: rgb(242 242 242 / .8); font: 500 11.5px/1.2 var(--font-body); letter-spacing: .02em; }
.fw-review a { color: #fff; text-decoration: none; font-weight: 600; }
.fw-review__nav { display: flex; gap: 4px; }
.fw-review__nav a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / .1); }
@media (max-width: 760px) { .fw-review > span:not(.fw-review__nav) { display: none; } }
@media (max-width: 760px) { .fw .snav__links a { letter-spacing: .1em; } }   /* Oct 20 (audit): the phone menu matches Home's and fits at 320px */

/* ---------- type */
.fw-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(10px, 1.4vh, 16px); color: var(--color-accent-hover);
  font: 400 italic clamp(1.125rem, .95rem + .5vw, 1.5rem)/1.1 var(--font-serif); }
.fw-kicker::after { content: ""; width: 34px; height: 1.5px; background: var(--red-bright); }
.fw-h { margin: 0; color: #fff; font: 800 clamp(1.5rem, 1rem + 1.7vw, 2.75rem)/1.02 var(--font-heading); text-transform: uppercase; letter-spacing: -.018em; text-wrap: balance; }
.fw-p { margin: clamp(12px, 1.8vh, 18px) 0 0; max-width: 40em; color: rgb(242 242 242 / .88); font: 400 clamp(1rem, .94rem + .28vw, 1.1875rem)/1.62 var(--font-body); text-wrap: pretty; }
.fw-p:first-child { margin-top: 0; }
.fw-p + .fw-p { margin-top: .8em; }
.fw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 42em; }
.fw-list li { position: relative; padding-left: 26px; color: rgb(242 242 242 / .88); font: 400 clamp(1rem, .94rem + .25vw, 1.125rem)/1.55 var(--font-body); }
.fw-list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 12px; height: 2px; background: var(--color-accent); }
.fw-list strong { color: #fff; }
.fw-cap { margin: 12px 0 0; color: rgb(242 242 242 / .66); font: 400 italic 1.0625rem/1.4 var(--font-serif); }
.fw-cap + .fg { margin-top: 10px; }
.fw-credit { margin: 12px 0 0; color: rgb(242 242 242 / .5); font: 400 12px/1.4 var(--font-body); }
.fw-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #fff; font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 10px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .06); transition: background-color .4s, border-color .4s; }
.fw-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) { .fw-link:hover { background: var(--red-bright); border-color: var(--red-bright); } }

/* ---------- media cells and placeholders */
.fw-m { position: relative; overflow: hidden; border-radius: var(--fw-r); background: color-mix(in srgb, var(--c1, #141018) 70%, #141018); }
.fw-m > img, .fw-m > video { width: 100%; height: 100%; object-fit: cover; }
.fw-m--169 { aspect-ratio: 16 / 9; } .fw-m--32 { aspect-ratio: 3 / 2; } .fw-m--45 { aspect-ratio: 4 / 5; } .fw-m--916 { aspect-ratio: 9 / 16; } .fw-m--11 { aspect-ratio: 1; }
.fw-ph { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: clamp(16px, 2vw, 28px); border-radius: var(--fw-r); overflow: hidden; min-height: 220px;
  color: #fff; isolation: isolate; }
.fw-ph[class*="fw-m--"], .fg .fw-ph, .fm .fw-ph { min-height: 0; }
.fw-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ph); }
.fw-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.fw-ph--warm { --ph: radial-gradient(120% 90% at 0% 100%, #E27B30, transparent 60%), linear-gradient(135deg, #982B2E, #C83F2C 55%, #E06335); }
.fw-ph--orange { --ph: linear-gradient(140deg, #E06335, #E27B30 50%, #E6A669); }
.fw-ph--blue { --ph: radial-gradient(90% 80% at 100% 0%, #12327E, transparent 70%), linear-gradient(160deg, #0B2562, #071D4F 60%, #04143A); }
.fw-ph--purple { --ph: linear-gradient(150deg, #12327E, #3B2A7A 55%, #6B2E6E); }
.fw-ph--gold { --ph: linear-gradient(160deg, #E6A669 0%, #B07A3A 30%, #0B2562 100%); }
.fw-ph--deep { --ph: linear-gradient(170deg, #12327E, #071D4F 50%, #04143A); }
.fw-ph__k { color: rgb(255 255 255 / .72); font: 600 10.5px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.fw-ph__n { max-width: 26em; font: 400 italic clamp(1.0625rem, .95rem + .4vw, 1.375rem)/1.25 var(--font-serif); overflow-wrap: break-word; }

/* ---------- capability pills (What RareCo brought), the What we do tones */
.fw-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fw-tags li { --t: #fff; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 60%), color-mix(in srgb, var(--t) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 40%, rgb(255 255 255 / .5)); font: 500 13px/1.2 var(--font-body); letter-spacing: .02em; }
.fw-tags [data-cap="live"] { --t: var(--red-bright); } .fw-tags [data-cap="talent"] { --t: var(--color-accent); } .fw-tags [data-cap="ideation"] { --t: var(--color-accent-hover); }
.fw-tags [data-cap="campaign"] { --t: var(--color-primary); } .fw-tags [data-cap="motion"] { --t: var(--color-mesh-2); } .fw-tags [data-cap="capvid"] { --t: var(--color-link-hover); }

/* ---------- colour boxes: the Big Homecoming idea blocks, used on every page */
.fbox { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--fw-r); padding: clamp(22px, 2.6vw, 44px); color: #fff; }
.fbox::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.fbox--warm { background: radial-gradient(90% 120% at 100% 100%, rgb(226 123 48 / .55), transparent 60%), var(--g-warm); }
.fbox--sky { background: radial-gradient(80% 100% at 100% 0%, rgb(58 90 160 / .5), transparent 60%), var(--g-sky); }
.fbox--gold { background: radial-gradient(80% 100% at 0% 0%, rgb(230 166 105 / .45), transparent 60%), var(--g-gold); }
.fbox .fw-kicker { color: rgb(255 246 236 / .9); } .fbox .fw-kicker::after { background: rgb(255 255 255 / .7); }
.fbox .fw-p { color: rgb(255 255 255 / .92); }
.fbox .fw-link { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .12); }

/* reveal: a wipe for media (the clip sits on the content, not the frame: IntersectionObserver treats a clipped target as unseen) */
.js .fw [data-wipe] > img, .js .fw [data-wipe] > video { clip-path: var(--wf, inset(0 0 100% 0)); }
.fw [data-wipe].is-in > img, .fw [data-wipe].is-in > video { clip-path: inset(0); transition: clip-path 1s var(--ease-wipe-in); }
/* Oct 23 (Diallo's Safari recording: panels sat dark while he scrolled): a cell wiping in as it scrolls into view
   starts moving at once. The house wipe (--ease-wipe, slow start and end) left a cell nearly dark for its first 400ms
   (4% open at 325ms); ease-out quart opens a third in 100ms and nine tenths by 450ms. Photo frames that wipe over a
   photo already showing keep the house wipe. */
.fw { --ease-wipe-in: cubic-bezier(.25, 1, .5, 1); }
/* Oct 24 (Diallo, Safari recording): Safari did not draw a film's clip-path wipe. The cell stayed on its ground for
   about a third of a second and the film then appeared all at once, a blink where Chrome shows a wipe. A film cell
   (.is-film, set by featured.js) is not clipped; a cover in the cell's own ground retreats instead, toward the side
   its wipe would have opened to (--wo, --ws), on the same curve and stagger. Transform on a plain layer, which
   every browser animates. */
.js .fw [data-wipe].is-film > video { clip-path: none !important; }
.js .fw [data-wipe].is-film::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: inherit; transform-origin: var(--wo, 50% 100%); }
.fw [data-wipe].is-film.is-in::after { transform: var(--ws, scaleY(0)); transition: transform 1s var(--ease-wipe-in) var(--wd, 0ms); }
/* the poster as a still over the film until the film's time moves (featured.js still(): Safari blanks a video while
   its source starts loading); it settles with the film (same scale and timing) so the two never part */
.fw [data-wipe] > .fw-pv { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: center / cover no-repeat; transition: opacity .35s ease; }
.fw [data-wipe].is-live > .fw-pv { opacity: 0; }

/* =====================================================================================
   HERO · panoramic, shorter than the screen so the page shows there is more. The loop sits on
   the project's colour (Standard 21: the first frame, then the loop; the still only if the loop
   fails). Title and client left, the line right, on the Home card's corner glow.
   ===================================================================================== */
.fh { position: relative; isolation: isolate; height: clamp(460px, 68vh, 780px); overflow: hidden; background: var(--c1, var(--color-sky-deep)); }
.fh__m { position: absolute; inset: 0; }
.fh__m > img, .fh__m > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fh__still { opacity: 0; }
.fh__m.is-still .fh__still { opacity: 1; } .fh__m.is-still video { opacity: 0; }
.fh__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(70% 110% at 0% 100%, color-mix(in srgb, var(--c1) 94%, transparent) 0%, color-mix(in srgb, var(--c1) 78%, transparent) 28%, color-mix(in srgb, var(--c1) 30%, transparent) 52%, transparent 78%),
    radial-gradient(44% 70% at 32% 108%, color-mix(in srgb, var(--c2) 80%, transparent) 0%, color-mix(in srgb, var(--c2) 32%, transparent) 46%, transparent 74%),
    radial-gradient(56% 100% at 100% 100%, color-mix(in srgb, var(--c3, var(--c1)) 92%, transparent) 0%, color-mix(in srgb, var(--c3, var(--c1)) 70%, transparent) 30%, color-mix(in srgb, var(--c3, var(--c1)) 24%, transparent) 54%, transparent 78%),
    radial-gradient(40% 64% at 70% 108%, color-mix(in srgb, var(--c4, var(--c2)) 64%, transparent) 0%, color-mix(in srgb, var(--c4, var(--c2)) 24%, transparent) 46%, transparent 74%); }
.fh__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--c1) 82%, transparent) 0%, color-mix(in srgb, var(--c1) 46%, transparent) 26%, color-mix(in srgb, var(--c1) 0%, transparent) 54%),
    linear-gradient(180deg, rgb(6 6 12 / .5) 0%, rgb(6 6 12 / 0) 22%); }
.fh__t { position: absolute; z-index: 3; left: var(--fw-x); right: var(--fw-x); bottom: clamp(28px, 6vh, 64px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 80px); align-items: end; }
.fh__head { container-type: inline-size; min-width: 0; }
.fh__title { margin: 0; color: #fff; font: 800 min(clamp(2.125rem, 1rem + 3.6vw, 5.25rem), calc(100cqi / (var(--tw, 10) * 1.12)))/.95 var(--font-heading);
  text-transform: uppercase; letter-spacing: -.022em; text-wrap: balance; }
.fh__client { display: flex; align-items: center; gap: 14px; margin: clamp(10px, 1.4vh, 16px) 0 0; color: rgb(255 255 255 / .94); font: 400 italic clamp(1.5rem, 1rem + 1.2vw, 2.375rem)/1.1 var(--font-serif); }
.fh__client::after { content: ""; width: clamp(24px, 2.4vw, 44px); height: 2px; background: var(--red-bright); }
.fh__line { margin: 0; min-width: 0; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .4); color: rgb(255 255 255 / .94);
  font: 400 clamp(1.0625rem, .95rem + .45vw, 1.4375rem)/1.5 var(--font-body); text-wrap: pretty; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
@media (max-width: 900px) {
  .fh { height: min(86svh, 760px); min-height: 540px; }
  .fh__t { grid-template-columns: 1fr; gap: 18px; }
  .fh__glow { background:
    radial-gradient(120% 70% at 0% 100%, color-mix(in srgb, var(--c1) 96%, transparent) 0%, color-mix(in srgb, var(--c1) 80%, transparent) 36%, transparent 80%),
    radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--c3, var(--c1)) 80%, transparent) 0%, transparent 76%); }
}

/* =====================================================================================
   INTRO · the project card on the left, sticky only through this section; the overview on the
   right: the lead in a warm box, the summary in a blue box, then a picture. Full width after it.
   ===================================================================================== */
.fi { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: var(--fw-gap) clamp(20px, 3vw, 56px); align-items: start; padding-block: clamp(48px, 7vh, 88px); }
.fi > * { min-width: 0; }
.fi__card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 2.4vw, 38px); border-radius: var(--fw-r); border: 1px solid rgb(255 255 255 / .12);
  background: radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--c2) 60%, transparent), transparent 64%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--c4) 45%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--c1) 85%, #161212), #110d0f); }
@media (min-width: 1025px) and (min-height: 700px) { .fi__card { position: sticky; top: calc(var(--nav-h) + 22px); } }
.fi__lbl { margin: 0; color: rgb(255 255 255 / .62); font: 600 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.fi__lbl--b { margin: clamp(22px, 3vh, 30px) 0 12px; }
.fi__client { margin: 10px 0 0; padding-bottom: clamp(16px, 2.4vh, 24px); border-bottom: 2px solid var(--red-bright); color: #fff;
  font: 400 italic clamp(2.25rem, 1.3rem + 2.2vw, 3.75rem)/1 var(--font-serif); letter-spacing: -.01em; overflow-wrap: break-word; }
.fi__meta { margin: 0; display: grid; }
.fi__meta > div { display: grid; gap: 6px; padding: 15px 0; border-bottom: 1px solid rgb(255 255 255 / .14); }
.fi__meta dt { color: var(--color-accent-hover); font: 600 11px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.fi__meta dd { margin: 0; color: rgb(242 242 242 / .92); font: 400 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.5 var(--font-body); }
.fi__copy { display: grid; gap: var(--fw-gap); }
.fi__lead, .fi__split, .fi__body { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--fw-r); padding: clamp(24px, 2.8vw, 48px); }
.fi__lead { background: radial-gradient(90% 140% at 100% 100%, rgb(226 123 48 / .6), transparent 62%), var(--g-warm); }
.fi__body { background: radial-gradient(70% 90% at 100% 0%, rgb(58 90 160 / .45), transparent 64%), var(--g-sky); }
.fi__k { margin: 0 0 12px; color: rgb(255 246 236 / .9); font: 400 italic clamp(1.125rem, .95rem + .5vw, 1.5rem)/1.1 var(--font-serif); }
.fi__h { margin: 0; color: #fff; font: 800 clamp(1.375rem, .95rem + 1.35vw, 2.375rem)/1.08 var(--font-heading); text-transform: uppercase; letter-spacing: -.012em; text-wrap: balance; }
.fi__body .fw-p { max-width: 46em; color: #fff; font-size: clamp(1.0625rem, .98rem + .36vw, 1.3125rem); line-height: 1.6; }
.fi__img { aspect-ratio: 16 / 9; }
.fi__beats { list-style: none; margin: clamp(18px, 2.6vh, 26px) 0 0; padding: clamp(14px, 2vh, 20px) 0 0; border-top: 1px solid rgb(255 255 255 / .28); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fi__beats li { color: rgb(255 255 255 / .82); font: 400 italic clamp(1.25rem, 1rem + .7vw, 1.75rem)/1.2 var(--font-serif); }
.fi__beats b { color: #F6D2AE; font-weight: 400; }
/* The Big Homecoming: the idea as its two colours, side by side */
.fi__split { padding: 0; display: grid; }
.fi__split .fi__k { position: absolute; z-index: 2; left: clamp(24px, 2.8vw, 48px); top: clamp(20px, 2.4vw, 36px); }
.fi__split .fi__h { display: grid; grid-template-columns: 1fr 1fr; }
.fi__split .fi__h > span { display: block; padding: clamp(64px, 7vw, 104px) clamp(24px, 2.8vw, 48px) clamp(24px, 2.8vw, 48px); font-size: clamp(1.5rem, .95rem + 1.7vw, 2.75rem); line-height: 1; }
.fi__split .fi__h > span:first-child { background: radial-gradient(90% 140% at 100% 100%, rgb(226 123 48 / .6), transparent 62%), var(--g-warm); }
.fi__split .fi__h > span:last-child { background: radial-gradient(70% 90% at 100% 0%, rgb(58 90 160 / .45), transparent 64%), var(--g-sky); }
.fi__split + .fi__body { background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 80%, #161212), #120e10); border: 1px solid rgb(255 255 255 / .12); }
@media (max-width: 1024px) { .fi { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fi__split .fi__h { grid-template-columns: 1fr; } .fi__split .fi__h > span:last-child { padding-top: clamp(24px, 6vw, 40px); } }

/* =====================================================================================
   CHAPTERS · full width, on a route line that draws as the page is read and lights a dot at
   each chapter (the 365 page's line, on every page). Kicker and heading left, the description
   right, then the media. A soft colour ground on some chapters.
   ===================================================================================== */
.fr { position: relative; }
.fr__line { position: absolute; z-index: 4; left: var(--rx); top: var(--fc-pad); bottom: var(--fc-pad); width: 2px; margin-left: -1px; background: rgb(255 255 255 / .12); pointer-events: none; }
.fr__line i { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); background: linear-gradient(180deg, var(--color-accent), var(--red-bright) 50%, var(--color-sky-upper)); }
.fc { position: relative; padding-block: var(--fc-pad); scroll-margin-top: 80px; }
.fc::before { content: ""; position: absolute; z-index: 5; left: var(--rx); top: calc(var(--fc-pad) + 6px); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: var(--color-bg); border: 2px solid rgb(255 255 255 / .38); transition: background-color .5s, border-color .5s, box-shadow .5s; }
.fc.is-on::before { background: var(--red-bright); border-color: #fff; box-shadow: 0 0 0 6px rgb(200 63 44 / .25); }
.fc + .fc { padding-top: calc(var(--fc-pad) * .5); }
.fc + .fc::before { top: calc(var(--fc-pad) * .5 + 6px); }
.fc--warm, .fc--sky, .fc--gold, .fc--warm + .fc, .fc--sky + .fc, .fc--gold + .fc { padding-top: var(--fc-pad); }
.fc--warm::before, .fc--sky::before, .fc--gold::before, .fc--warm + .fc::before, .fc--sky + .fc::before, .fc--gold + .fc::before { top: calc(var(--fc-pad) + 6px); }
.fc--warm { background: linear-gradient(180deg, rgb(13 13 13 / 0) 0%, rgb(152 43 46 / .3) 22%, rgb(200 63 44 / .16) 80%, rgb(13 13 13 / 0) 100%); }
.fc--sky { background: linear-gradient(180deg, rgb(13 13 13 / 0) 0%, rgb(11 37 98 / .62) 22%, rgb(7 29 79 / .55) 80%, rgb(13 13 13 / 0) 100%); }
.fc--gold { background: radial-gradient(60% 40% at 80% 18%, rgb(230 166 105 / .2), transparent 70%), linear-gradient(180deg, rgb(13 13 13 / 0) 0%, rgb(58 38 14 / .7) 22%, rgb(26 18 6 / .6) 80%, rgb(13 13 13 / 0) 100%); }
.fc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 80px); align-items: start; margin-bottom: clamp(24px, 4vh, 44px); }
.fc__head > * { min-width: 0; container-type: inline-size; }
.fc__head .fw-h { font-size: min(clamp(1.5rem, 1rem + 1.7vw, 2.75rem), 9cqi); }
.fc__head--solo { grid-template-columns: minmax(0, 1fr); }
.fc__part { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; color: rgb(255 255 255 / .64); font: 600 11px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 861px) {
  .fc__d { padding-top: clamp(28px, 3.6vh, 40px); }
  .fc__head > div:first-child:has(.fc__part) + .fc__d { padding-top: calc(clamp(28px, 3.6vh, 40px) + 25px); }
}
.fc__d .fw-p { margin: 0; }
.fc__d .fw-list { margin-top: 14px; }
.fc__d > .fw-link:last-child { margin-top: 18px; }
@media (max-width: 860px) { .fc__head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) { .fr__line, .fc::before { display: none; } }

/* ---------- the even collage (the Big Homecoming festival grid): 4 columns, even rows.
   a 2x2 · t 1x2 (tall) · w 2x1 (panoramic) · w3 3x1 · w4 full row · plain 1x1 */
.fg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 14.5vw, 270px); grid-auto-flow: dense; gap: var(--fw-gap); }
.fg + .fg, .fg + .fsub, .fsub + .fg, .fm + .fg, .fcols + .fg { margin-top: var(--fw-gap); }
.fg > * { min-width: 0; height: 100%; }
.fg .a { grid-column: span 2; grid-row: span 2; }
.fg .t { grid-row: span 2; }
.fg .w { grid-column: span 2; }
.fg .w3 { grid-column: span 3; }
.fg .w4 { grid-column: 1 / -1; }
.fg .fw-ph.w4 { min-height: 0; }
@media (max-width: 760px) {
  .fg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 38vw, 210px); }
  .fg .w3, .fg .w4 { grid-column: 1 / -1; }
}
.fsub { margin-top: clamp(36px, 6vh, 64px); margin-bottom: clamp(18px, 3vh, 28px); max-width: 44em; }
.fsub__h { margin: 0 0 10px; color: #fff; font: 700 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.3 var(--font-body); }

/* the compare (BAM): mockup and room, a handle wipes between them */
.fw-cmp { position: relative; overflow: hidden; border-radius: var(--fw-r); background: #111; user-select: none; touch-action: pan-y; }
.fw-cmp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fw-cmp__a { clip-path: inset(0 calc(100% - var(--c, 50%)) 0 0); }
.fw-cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--c, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.fw-cmp__knob { position: absolute; top: 50%; left: var(--c, 50%); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--red-bright); box-shadow: 0 8px 24px rgb(0 0 0 / .4); }
.fw-cmp__knob svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fw-cmp__tag { position: absolute; bottom: 14px; padding: 6px 11px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fw-cmp__tag--a { left: 14px; } .fw-cmp__tag--b { right: 14px; }
/* Oct 21 (Diallo): each label sits in a full-size layer clipped like its photo, so the wipe covers it */
.fw-cmp__lay { position: absolute; inset: 0; pointer-events: none; }
.fw-cmp__lay--a { clip-path: inset(0 calc(100% - var(--c, 50%)) 0 0); }
.fw-cmp__lay--b { clip-path: inset(0 0 0 var(--c, 50%)); }
.fw-cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- moments in a row (BAM signature moments): equal cards, the line under each */
.fm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-gap); }
.fm li { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; }
.fm .fw-m, .fm .fw-ph { aspect-ratio: 4 / 5; }
.fm p { margin: 0; padding-top: 12px; border-top: 2px solid var(--red-bright); color: #fff; font: 600 clamp(1rem, .92rem + .3vw, 1.1875rem)/1.4 var(--font-body); }
@media (max-width: 760px) { .fm { grid-template-columns: 1fr; } .fm .fw-m, .fm .fw-ph { aspect-ratio: 3 / 2; } }

/* ---------- stages (Creative Currency, the weekend): a 3 x 2 grid of cards, the quote as a colour box */
.fsts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-gap); }
.fst { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--fw-r); overflow: hidden; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
.fst .fw-m { aspect-ratio: 4 / 3; border-radius: 0; }
.fst__t { position: relative; padding: clamp(18px, 1.8vw, 28px); }
.fst__n { position: absolute; right: clamp(18px, 1.8vw, 28px); top: clamp(16px, 1.6vw, 24px); color: var(--color-accent); font: 700 12px/1 var(--font-body); letter-spacing: .2em; }
.fst h3 { margin: 0; padding-right: 40px; color: #fff; font: 800 clamp(1.125rem, .9rem + .7vw, 1.625rem)/1.05 var(--font-heading); text-transform: uppercase; }
.fst p { margin: 10px 0 0; color: rgb(242 242 242 / .86); font: 400 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.55 var(--font-body); }
.fst--q { display: flex; flex-direction: column; justify-content: center; border: 0; }
.fst--q p { margin: 0; color: #fff; font: 400 italic clamp(1.5rem, 1rem + 1.5vw, 2.5rem)/1.15 var(--font-serif); text-wrap: balance; }
.fst--q cite { display: block; margin-top: 18px; color: rgb(255 246 236 / .9); font: 600 12px/1 var(--font-body); font-style: normal; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 1024px) { .fsts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fsts { grid-template-columns: 1fr; } }
.fnext { display: grid; gap: 0; padding-block: clamp(36px, 6vw, 88px); container-type: inline-size; }
.fnext .fw-h { max-width: 18em; font-size: min(clamp(1.625rem, 1rem + 2.4vw, 3.5rem), 7cqi); }
.fnext__p { margin: clamp(16px, 2.4vh, 24px) 0 0; color: #F6D2AE; font: 400 italic clamp(1.25rem, 1rem + .8vw, 1.875rem)/1.3 var(--font-serif); }

/* ---------- the checklist (IBC coverage) */
.fchk { list-style: none; margin: 18px 0 0; padding: 0; display: grid; border-top: 1px solid rgb(255 255 255 / .16); }
.fchk li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / .16); color: rgb(242 242 242 / .9); font: 400 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.5 var(--font-body); }
.fchk li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--red-bright) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat; }

/* ---------- campus stops (365): three equal columns, media, name and line, media */
.fcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-gap); }
.fcol { display: grid; grid-template-rows: auto 1fr auto; gap: var(--fw-gap); min-width: 0; }
.fcol__t { padding: clamp(18px, 1.8vw, 26px); border-radius: var(--fw-r); background: color-mix(in srgb, var(--c2) 26%, #121014); border: 1px solid rgb(255 255 255 / .1); }
.fcol h3 { margin: 0; color: #fff; font: 800 clamp(1.125rem, .9rem + .7vw, 1.625rem)/1.05 var(--font-heading); text-transform: uppercase; }
.fcol p { margin: 10px 0 0; color: rgb(242 242 242 / .86); font: 400 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.55 var(--font-body); }
@media (max-width: 900px) { .fcols { grid-template-columns: 1fr; } .fcol { grid-template-rows: auto; } }

/* ---------- a text column and three vertical films (365 classics): four columns, so the films fit the screen */
.f4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fw-gap); align-items: start; }
.f4 > * { min-width: 0; }
.f4 > .fw-m, .f4 > .fw-ph { max-height: 78vh; }
.f4__t { align-self: center; container-type: inline-size; padding-right: clamp(0px, 1vw, 16px); }
.f4__t .fw-h { font-size: min(clamp(1.25rem, 1rem + .9vw, 2rem), 8.4cqi); }
@media (max-width: 900px) { .f4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f4__t { grid-column: 1 / -1; margin-bottom: 8px; } }
@media (max-width: 560px) { .f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f4 > .fw-ph { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }

/* ---------- the stat (365 Band of the Year): the number in a blue box, the check photo, the film */
.fg--stat { grid-auto-rows: clamp(150px, 15.5vw, 290px); }
.fstat { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; container-type: inline-size; }
.fstat .fw-h { font-size: min(clamp(1.5rem, 1rem + 1.6vw, 2.5rem), 8cqi); }
.fstat__n { display: block; margin-bottom: 6px; font-size: min(clamp(3rem, 1rem + 6vw, 7.5rem), 12.5cqi); line-height: .9; letter-spacing: -.035em;
  -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #FFF6EC 0%, #FBE0C4 40%, #F2B680 75%, #E27B30 100%); }
/* Oct 20 (Diallo: $100,000 missing on The Big Homecoming): the heading reveal wraps each word in a
   masked, moving span, and a gradient clipped to text on the parent does not paint into those layers,
   so the figure rendered transparent. The gradient now sits on the word itself. */
.fstat__n .swi { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #FFF6EC 0%, #FBE0C4 40%, #F2B680 75%, #E27B30 100%); }
.fstat .fw-p { margin-top: 14px; }
.fg--stat .fw-ph.w4 { height: clamp(150px, 15.5vw, 290px); }
@media (max-width: 760px) {
  .fg--stat { grid-auto-rows: auto; }
  .fstat { grid-column: 1 / -1; grid-row: auto; }
  .fg--stat > .t { grid-row: auto; height: auto; aspect-ratio: 9 / 16; }
  .fg--stat .fw-ph.w4 { height: 160px; }
}

/* ---------- a text box beside a picture (365 support) */
.fpair { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--fw-gap); }
.fpair > * { min-width: 0; container-type: inline-size; }
.fpair .fw-h { font-size: min(clamp(1.5rem, 1rem + 1.7vw, 2.75rem), 9cqi); }
@media (max-width: 860px) { .fpair { grid-template-columns: 1fr; } }

/* ---------- impact rows (The Big Homecoming, Part two): media and text, alternating sides */
.fimp { margin: 0 0 clamp(20px, 3vh, 32px); }
.frow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--fw-gap) clamp(20px, 3vw, 56px); align-items: center; }
.frow + *, * + .frow { margin-top: clamp(28px, 5vh, 56px); }
.frow--r { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.frow--r > :first-child { order: 2; }
.frow > * { min-width: 0; }
.frow__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-gap); max-height: 78vh; }
.frow__pair .fw-m { max-height: 78vh; aspect-ratio: auto; height: min(78vh, 46vw); }
.frow__t h3, .fon__t h3, .fvirt h3 { margin: 0; color: #fff; font: 800 clamp(1.25rem, .9rem + 1.1vw, 2rem)/1.05 var(--font-heading); text-transform: uppercase; }
.frow__t p, .fon__t p, .fvirt p { margin: 12px 0 0; max-width: 34em; color: rgb(242 242 242 / .88); font: 400 clamp(1rem, .94rem + .25vw, 1.125rem)/1.6 var(--font-body); }
.fon__t { max-width: 46em; margin-bottom: clamp(18px, 3vh, 28px); }
.fon__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-gap); }
.fon__c { display: grid; gap: 12px; align-content: start; min-width: 0; }
.fon__c figcaption { display: grid; justify-items: start; gap: 0; color: #fff; font: 600 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.45 var(--font-body); }
.fon__c figcaption .fw-link { margin-top: 12px; }
.fvirt { margin-top: clamp(28px, 5vh, 56px); padding-block: clamp(28px, 4vw, 56px); }
.fvirt p { color: #fff; }
.fbuilt { margin: clamp(22px, 3.4vh, 34px) 0 0; color: rgb(242 242 242 / .88); font: 400 clamp(1rem, .94rem + .25vw, 1.125rem)/1.55 var(--font-body); }
.fbuilt b { color: #fff; }
@media (max-width: 860px) {
  .frow, .frow--r { grid-template-columns: 1fr; } .frow--r > :first-child { order: 0; }
  .frow__pair .fw-m { height: auto; aspect-ratio: 9 / 16; }
}
@media (max-width: 640px) { .fon__g { grid-template-columns: 1fr; } .fon__c .fw-m { aspect-ratio: 3 / 2; } }

/* =====================================================================================
   THE DRIFTING ROW (fan festival films): four films on screen, arrows below to set the direction,
   a pause button between them, drag or swipe to scrub. It does not stop on hover.
   ===================================================================================== */
.fq { margin-inline: calc(-1 * var(--fw-x)); }
.fq__view { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fw-x), #000 calc(100% - var(--fw-x)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fw-x), #000 calc(100% - var(--fw-x)), transparent); }
.fq__view.is-drag { cursor: grabbing; }
.fq__track { display: flex; gap: var(--fw-gap); width: max-content; padding-inline: var(--fw-x); will-change: transform; }
.fq__dup { display: contents; }
.fq__track .fw-m, .fq__track .fw-ph { flex: none; width: min(calc((100vw - 2 * var(--fw-x) - 3 * var(--fw-gap)) / 4), 40vh); aspect-ratio: 9 / 16; min-height: 0; }
.fq__track img, .fq__track video { pointer-events: none; -webkit-user-drag: none; }
.fq__ctl { display: flex; justify-content: center; gap: 12px; margin-top: clamp(18px, 3vh, 28px); padding-inline: var(--fw-x); }
.fq__b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .32); background: rgb(255 255 255 / .08); color: #fff; cursor: pointer;
  transition: background-color .4s, border-color .4s, transform .4s var(--ease-emph); }
.fq__b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fq__b--p { background: var(--red-bright); border-color: var(--red-bright); }
.fq__b--p .i-play { display: none; fill: currentColor; stroke: none; }
.fq__b--p[aria-pressed="true"] .i-pause { display: none; } .fq__b--p[aria-pressed="true"] .i-play { display: block; }
@media (hover: hover) { .fq__b:hover { border-color: var(--red-bright); background: rgb(200 63 44 / .35); } .fq__b--p:hover { background: #d9503b; } }
.fq__b:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) { .fq__track .fw-m, .fq__track .fw-ph { width: calc((100vw - 2 * var(--fw-x) - var(--fw-gap)) / 2); } }

/* =====================================================================================
   PAGER · previous left, next right (no loop), View all featured work between them
   ===================================================================================== */
.fp { padding-block: clamp(56px, 9vh, 112px); border-top: 1px solid rgb(255 255 255 / .1); }
.fp__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--fw-gap) clamp(20px, 3vw, 56px); align-items: center; }
.fp__c { display: grid; grid-template-columns: clamp(96px, 11vw, 190px) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); align-items: center; padding: 12px; border-radius: calc(var(--fw-r) + 4px);
  color: inherit; text-decoration: none; background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 70%, #161212), #110d0f); border: 1px solid rgb(255 255 255 / .1); transition: border-color .4s, transform .6s var(--ease-emph); }
.fp__c--next { grid-template-columns: minmax(0, 1fr) clamp(96px, 11vw, 190px); text-align: right; }
.fp__c--next .fp__thumb { order: 2; }
.fp__c--none { visibility: hidden; }
@media (hover: hover) { a.fp__c:hover { border-color: var(--red-bright); } a.fp__c:hover .fp__thumb img { transform: scale(1.05); } }
.fp__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--fw-r); }
.fp__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-emph); }
.fp__txt { display: grid; gap: 8px; min-width: 0; container-type: inline-size; }
.fp__k { color: var(--color-accent-hover); font: 600 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.fp__t { color: #fff; font: 800 min(clamp(1rem, .8rem + .8vw, 1.625rem), calc(100cqi / (var(--tw, 10) * 1.1)))/1.02 var(--font-heading); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.fp__cl { color: rgb(255 255 255 / .86); font: 400 italic clamp(1.0625rem, .95rem + .35vw, 1.375rem)/1.1 var(--font-serif); }
.fp__all { justify-self: center; }
@media (max-width: 900px) {
  .fp__in { grid-template-columns: 1fr; }
  .fp__c--none { display: none; }
  .fp__all { order: 3; justify-self: start; }
}

/* ---------- footer */
.fw-foot { border-top: 1px solid rgb(255 255 255 / .1); padding-block: 40px 30px; }
.fw-foot__in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px 40px; }
.fw-foot__home img { width: 159px; height: auto; }
.fw-foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 28px; }
.fw-foot nav a { color: rgb(242 242 242 / .72); text-decoration: none; font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
/* Oct 22 (Diallo): the footer links get Home's hover, the red underline drawn left to right, and brighten to white */
.fw-foot nav a { position: relative; display: inline-block; transition: color .4s var(--ease-state); }
.fw-foot nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease-emph); }
@media (hover: hover) { .fw-foot nav a:hover { color: #fff; } .fw-foot nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .fw-foot nav a::after { transition: none; } }
/* Oct 22 audit (Diallo): touch screens get a 45px tap height on the footer links, as Home does */
@media (pointer: coarse) { .fw-foot nav a { padding-block: 17px; margin-block: -17px; } .fw-foot nav a::after { bottom: 10px; } }
.fw-foot__c { grid-column: 1 / -1; margin: 0; color: rgb(242 242 242 / .62); font: 400 12.5px/1 var(--font-body); }
@media (max-width: 760px) { .fw-foot__in { grid-template-columns: 1fr; } .fw-foot nav ul { justify-content: flex-start; flex-wrap: wrap; gap: 18px; } }

/* =====================================================================================
   FEATURED WORK INDEX · six cards on a staggered grid (7 + 5, 5 + 7, 6 + 6), each in its
   project's colours; the loop plays on hover where there is a mouse
   ===================================================================================== */
.fx { padding-top: clamp(112px, 16vh, 176px); padding-bottom: clamp(56px, 9vh, 112px); }
.fx__h { margin: 0 0 clamp(28px, 5vh, 56px); color: #fff; font: 800 clamp(2.5rem, 1rem + 6vw, 7rem)/.92 var(--font-heading); text-transform: uppercase; letter-spacing: -.025em; }
.fx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fw-gap); }
.fx__c { position: relative; isolation: isolate; overflow: hidden; display: block; min-width: 0; height: clamp(420px, 44vw, 660px); border-radius: clamp(12px, 1.4vw, 22px);
  background: var(--c1); color: inherit; text-decoration: none; }
.fx__c--1, .fx__c--4 { grid-column: span 7; } .fx__c--2, .fx__c--3 { grid-column: span 5; } .fx__c--5, .fx__c--6 { grid-column: span 6; }
.fx__m { position: absolute; inset: 0; }
.fx__m img, .fx__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-emph), opacity .8s var(--ease-reveal); }
.fx__m video { opacity: 0; }
.fx__c.is-playing .fx__m video { opacity: 1; }
@media (hover: hover) { .fx__c:hover .fx__m img, .fx__c:hover .fx__m video { transform: scale(1.04); } }
.fx__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--c1) 96%, transparent) 0%, color-mix(in srgb, var(--c1) 80%, transparent) 30%, color-mix(in srgb, var(--c1) 30%, transparent) 54%, transparent 78%),
    radial-gradient(50% 60% at 34% 106%, color-mix(in srgb, var(--c2) 84%, transparent) 0%, color-mix(in srgb, var(--c2) 30%, transparent) 46%, transparent 74%),
    radial-gradient(56% 80% at 100% 100%, color-mix(in srgb, var(--c3) 86%, transparent) 0%, color-mix(in srgb, var(--c3) 40%, transparent) 40%, transparent 74%),
    radial-gradient(40% 50% at 72% 106%, color-mix(in srgb, var(--c4) 60%, transparent) 0%, transparent 74%); }
.fx__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--c1) 90%, transparent) 0%, color-mix(in srgb, var(--c1) 62%, transparent) 30%, color-mix(in srgb, var(--c1) 0%, transparent) 62%); }
.fx__top { position: absolute; z-index: 3; top: clamp(16px, 2.4vh, 26px); left: clamp(18px, 2vw, 32px); right: clamp(18px, 2vw, 32px); display: flex; justify-content: flex-end; }
.fx__tags { justify-content: flex-end; gap: 6px; }
.fx__tags li { min-height: 0; padding: 6px 11px; font-size: 10.5px; white-space: nowrap; }
.fx__foot { position: absolute; z-index: 3; left: clamp(18px, 2vw, 36px); right: clamp(18px, 2vw, 36px); bottom: clamp(20px, 3.4vh, 40px); display: grid; gap: 14px; }
.fx__head { display: grid; gap: 10px; container-type: inline-size; }
.fx__title { color: #fff; font: 800 min(clamp(1.625rem, .9rem + 2.3vw, 3.5rem), calc(100cqi / (var(--tw, 10) * 1.12)))/.98 var(--font-heading); text-transform: uppercase; letter-spacing: -.018em; text-wrap: balance; }
.fx__client { display: flex; align-items: center; gap: 12px; color: rgb(255 255 255 / .94); font: 400 italic clamp(1.375rem, 1rem + .9vw, 2rem)/1.1 var(--font-serif); }
.fx__client::after { content: ""; width: clamp(24px, 2.4vw, 40px); height: 2px; background: var(--red-bright); }
.fx__line { max-width: 34em; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .38); color: rgb(242 242 242 / .9); font: 400 clamp(.9375rem, .88rem + .25vw, 1.125rem)/1.5 var(--font-body); }
.fx__cta { justify-self: start; height: 44px; }
.fx__cta .btn__ico { width: 30px; height: 30px; padding: 8px; }
@media (max-width: 1100px) { .fx__tags li:nth-child(n+4) { display: none; } }
@media (max-width: 900px) {
  .fx__c, .fx__c--1, .fx__c--2, .fx__c--3, .fx__c--4, .fx__c--5, .fx__c--6 { grid-column: 1 / -1; height: clamp(480px, 120vw, 640px); }
  .fx__tags li:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fw [data-wipe] > * { clip-path: none !important; }
  .fw [data-wipe].is-film::after { display: none; }
  .fr__line i { transform: none; }
}

/* =====================================================================================
   MOTION · the page loads, scrolls and enters in the house style (Oct 19, 2026)
   Load: the hero media settles from 1.08 on its brand colour, the glow comes up, the title's
   words rise from their masks (Home's word rise), then the client, its dash and the line.
   Scroll: the hero media drifts at a third of the scroll (featured.js, --py); kickers lift and
   draw their dash; headings rise word by word; blocks take the library's data-reveal, groups
   staggered; media cells wipe up in a stagger (--wd) and settle from 1.1. The route line draws.
   Page changes: a cross-document view transition (after NBA Region IX, 2026-05-31): the old page
   lifts away, the new one settles in, and a project's picture carries across (index card, hero,
   pager thumbnail share a name). Reduced motion: none of it.
   ===================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* the hero on load */
  .js .fh__m { animation: fh-in 2s var(--ease-emph) both; }
  html.vt-hero .fh__m { animation: none; }
  .fh__m > img, .fh__m > video { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
  .js .fh__glow, .js .fh__shade { animation: fade 1.6s var(--ease-reveal) .15s both; }
  .js .fh__client { animation: lift 1.1s var(--ease-reveal) .6s both; }
  .fh__client::after { transform-origin: 0 50%; }
  .js .fh__client::after { animation: draw .9s var(--ease-reveal) 1.05s both; }
  .js .fh__line { animation: fh-line 1.3s var(--ease-reveal) .8s both; }
  .fh__t { transform: translate3d(0, var(--ty, 0px), 0); }

  /* kickers: the text lifts, then its dash draws */
  .fw-kicker::after { transform-origin: 0 50%; }
  .js .fw-kicker:not(.is-in), .js .fi__k:not(.is-in), .js .fc__part:not(.is-in) { opacity: 0; }
  .fw-kicker.is-in, .fi__k.is-in, .fc__part.is-in { animation: lift 1.1s var(--ease-reveal) both; }
  .js .fw-kicker:not(.is-in)::after { transform: scaleX(0); }
  .fw-kicker.is-in::after { animation: draw .9s var(--ease-reveal) .45s both; }
  .fi__split .fi__h span:last-child .swi { animation-delay: calc(var(--d, 0ms) + 260ms); }

  /* media cells: wipe up in a stagger and settle */
  .js .fw [data-wipe] > img, .js .fw [data-wipe] > video, .js .fw [data-wipe] > .fw-pv { transform: scale(1.1); }
  .fw [data-wipe].is-in > img, .fw [data-wipe].is-in > video { transform: none;
    transition: clip-path 1s var(--ease-wipe-in) var(--wd, 0ms), transform 2.2s var(--ease-emph) var(--wd, 0ms); }
  .fw [data-wipe].is-in > .fw-pv { transform: none; transition: transform 2.2s var(--ease-emph) var(--wd, 0ms), opacity .35s ease; }

  /* the compare (BAM) and the drifting row rise in */
  .js .fw-cmp:not(.is-in) { opacity: 0; transform: translateY(22px); }
  .fw-cmp.is-in { transition: opacity 1.2s var(--ease-reveal) .15s, transform 1.4s var(--ease-reveal) .15s; }
  .js .fq__view:not(.is-in) .fq__track > * { opacity: 0; transform: translateY(40px); }
  .fq__view.is-in .fq__track > * { transition: opacity 1s var(--ease-reveal) var(--wd, 0ms), transform 1.4s var(--ease-emph) var(--wd, 0ms); }

  /* the index: cards settle into their frames as they reveal */
  .fx__c[data-reveal] .fx__m { transform: scale(1.12); }
  .fx__c.is-revealed .fx__m { animation: settle 2.4s var(--ease-emph) var(--reveal-delay, 0ms) both; }
  .js .fx__h:not(.is-in) .swi { opacity: 0; }

  /* the pager thumbnails settle too */
  .fp__c[data-reveal] .fp__thumb img { transform: scale(1.15); }
  .fp__c.is-revealed .fp__thumb img { transition: transform 2s var(--ease-emph) .2s; transform: none; }
  @media (hover: hover) { a.fp__c.is-revealed:hover .fp__thumb img { transform: scale(1.05); transition-duration: 1s; transition-delay: 0s; } }

  /* page transitions */
  @view-transition { navigation: auto; }
}
@keyframes fh-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes fh-line { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(-20% -10% -40% -10%); } }

/* the menu and the review chip hold still across a page change; the root lifts away and settles in */
.fw .snav { view-transition-name: fw-nav; }
.fw-review { view-transition-name: fw-chip; }
.fh__m, .fx__m, .fp__thumb { view-transition-class: fwm; }
/* Oct 23 (Diallo, Safari): no dip to dark. The old page stays still and opaque underneath while the new one
   rises in over it (normal blending, not the default plus-lighter), so the carried picture never sits on black */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: 560ms cubic-bezier(.22, 1, .36, 1) both fw-vt-in; mix-blend-mode: normal; }
::view-transition-group(*.fwm) { animation-duration: 820ms; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
::view-transition-image-pair(*.fwm) { overflow: hidden; border-radius: 16px; }
::view-transition-old(*.fwm), ::view-transition-new(*.fwm) { height: 100%; object-fit: cover; animation-duration: 820ms; }
@keyframes fw-vt-in { from { opacity: 0; transform: translateY(20px); } }


/* Oct 19 (Diallo, BAM notes) -------------------------------------------------------------
   Signature moments: one photo can span two columns (.fm__w), matched to the 4:5 card beside it;
   a full-width panoramic loop (.fpan, the center screen's 8:3); captions that belong to the media
   right above them (.fgc: a rule, a label, the line) with clear space before the next group; and
   the hologram's three uneven columns (.fh3: two photos and a vertical film, a caption under each group). */
.fm li:has(.fm__w) { grid-column: span 2; }
.fm .fm__w { aspect-ratio: 8 / 5; }
@supports (grid-template-rows: subgrid) {
  .fm { grid-template-rows: auto auto; }
  .fm li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; }
  .fm .fm__w { aspect-ratio: auto; height: 100%; }
}
.fpan { aspect-ratio: 8 / 3; margin: 0 0 var(--fw-gap); }
.fgc { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgb(242 242 242 / .2); }
.fgc__k { margin: 0 0 5px; color: var(--red-bright); font: 600 11.5px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fgc__t { margin: 0; max-width: 40em; color: rgb(242 242 242 / .84); font: 400 clamp(1rem, .95rem + .2vw, 1.125rem)/1.45 var(--font-body); }
.fgc + .fh3 { margin-top: clamp(48px, 7vh, 84px); }
.fh3 { display: grid; grid-template-columns: 1.35fr 1fr .8fr; grid-template-areas: "p1 p2 v" "c1 c1 c2"; column-gap: var(--fw-gap); }
.fh3__p1 { grid-area: p1; } .fh3__p2 { grid-area: p2; } .fh3__v { grid-area: v; aspect-ratio: 9 / 16; }
.fh3__p1, .fh3__p2 { height: 100%; min-height: 0; }
.fh3__c1 { grid-area: c1; } .fh3__c2 { grid-area: c2; }
@media (max-width: 760px) {
  .fm li:has(.fm__w) { grid-column: auto; }
  .fm .fm__w { aspect-ratio: 3 / 2; height: auto; }
  .fh3 { grid-template-columns: 1fr 1fr; grid-template-areas: "p1 p2" "c1 c1" "v v" "c2 c2"; }
  .fh3__p1, .fh3__p2 { aspect-ratio: 3 / 4; height: auto; }
  .fh3__c1 { margin-bottom: 40px; }
}

/* Oct 19 (Diallo, Creative Currency notes) ------------------------------------------------
   Two doors (.fdoors: one activation each, the picture over its label, partner and line), a 2.35:1
   panoramic loop, a two-stage row, and the long-form and social films side by side at one height
   (.fv2: a 16:9 beside a 9:16, so the vertical column is 81/256 of the wide one). */
.fdoors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-gap); }
.fdoor { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--fw-r); overflow: hidden; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
.fdoor .fw-m { aspect-ratio: 16 / 10; border-radius: 0; }
.fdoor__t { padding: clamp(18px, 2vw, 32px); }
.fdoor__k { margin: 0 0 8px; color: var(--red-bright); font: 600 11.5px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fdoor h3 { margin: 0; color: #fff; font: 800 clamp(1.125rem, .9rem + .8vw, 1.75rem)/1.08 var(--font-heading); text-transform: uppercase; }
.fdoor p:last-child { margin: 12px 0 0; max-width: 34em; color: rgb(242 242 242 / .86); font: 400 clamp(.9375rem, .9rem + .2vw, 1.125rem)/1.55 var(--font-body); }
.fpan--235 { aspect-ratio: 40 / 17; }
.fsts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsts--gap, .fg + .fsts { margin-top: var(--fw-gap); }
.fv2 { display: grid; grid-template-columns: 1fr .3164fr; grid-template-areas: "w v" "c1 c2"; column-gap: var(--fw-gap); }
.fv2__w { grid-area: w; aspect-ratio: 16 / 9; } .fv2__v { grid-area: v; aspect-ratio: 9 / 16; }
.fv2__c1 { grid-area: c1; } .fv2__c2 { grid-area: c2; }
.fv2 + .fsub { margin-top: clamp(36px, 6vh, 64px); }
@media (max-width: 760px) {
  .fdoors, .fsts--2 { grid-template-columns: 1fr; }
  .fpan--235 { aspect-ratio: 16 / 9; }
  .fv2 { grid-template-columns: 1fr; grid-template-areas: "w" "c1" "v" "c2"; }
  .fv2__c1 { margin-bottom: 36px; } .fv2__v { width: min(100%, 420px); }
}

/* Oct 19 (Diallo, Walmart notes) ------------------------------------------------------------
   A photo hero: top-aligned so the sign stays in view, with a slow zoom out on load (the scale
   property, so it stacks with the scroll drift). Film rows (.fvr): the film keeps a full 16:9 and
   the photos beside it fill the rest of the row at the same height (columns set per row in --cols,
   e.g. 16fr 6fr 6fr puts two 2:3 portraits beside it); .fvr--32 is a plain row of 3:2 photos shown
   whole, so nobody's head is cut. .fg--tall gives a collage taller rows. */
.fh__m--photo .fh__still { opacity: 1; object-position: 50% 0; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .fh__m--photo .fh__still { animation: fh-zoom 16s cubic-bezier(.16, .6, .24, 1) both; }
}
@keyframes fh-zoom { from { scale: 1.16; } to { scale: 1; } }
.fvr { display: grid; grid-template-columns: var(--cols); gap: var(--fw-gap); }
.fvr + .fvr, .fvr + .fg, .fg + .fvr { margin-top: var(--fw-gap); }
.fvr > * { min-width: 0; height: 100%; }
.fvr__v { aspect-ratio: 16 / 9; height: auto; }
.fvr--32 > * { aspect-ratio: 3 / 2; height: auto; }
.fg--tall { grid-auto-rows: clamp(150px, 19vw, 340px); }
@media (max-width: 760px) {
  .fvr { grid-template-columns: 1fr 1fr; }
  .fvr__v { grid-column: 1 / -1; }
  .fvr__v + :last-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .fvr--32 > :first-child:nth-last-child(2), .fvr--32 > :last-child:nth-child(2) { grid-column: 1 / -1; }
  .fh__m--photo .fh__still { object-position: 12% 0; transform-origin: 12% 0; }
  .fvr > :not(.fvr__v) { aspect-ratio: 3 / 4; height: auto; }
  .fvr.fvr--32 > * { aspect-ratio: 3 / 2; }
  .fg--tall { grid-auto-rows: clamp(120px, 38vw, 210px); }
}

/* Oct 19 (Diallo): the client's logo in the project card, in place of the name */
.fi__client--logo { line-height: 0; }
.fi__client--logo img { display: block; width: auto; max-width: 100%; }

/* Oct 19 (Diallo, 365 HBCU Impact Tour notes) ------------------------------------------------
   Tour stops: each school in its own colour on the black (the label, the name, a rule that draws
   under the film), the stop number as a small tag. Film rows with vertical films (.fvr__v9 keeps 9:16),
   a 2x2 photo gallery beside a film (.fq4), text on its own row (.ftxt) and the stat box at full width
   (.fwide: heading left, line right). */
.fstops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-gap); }
.fstop { display: grid; grid-template-rows: auto 1fr; gap: 0; min-width: 0; }
.fstop .fw-m { border-radius: var(--fw-r) var(--fw-r) 0 0; }
.fstop__t { position: relative; padding: clamp(18px, 1.8vw, 26px) 0 0; border-top: 3px solid var(--sc); }
.fstop__n { display: inline-block; margin: 0 0 12px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sc) 18%, transparent);
  color: var(--sc); font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.fstop h3 { margin: 0; color: var(--sc); font: 800 clamp(1.25rem, .95rem + .9vw, 1.875rem)/1.02 var(--font-heading); text-transform: uppercase; text-wrap: balance; }
.fstop__l { margin: 12px 0 0; max-width: 30em; color: rgb(242 242 242 / .88); font: 400 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.55 var(--font-body); }
.fstops + .fvr { margin-top: clamp(28px, 4vh, 44px); }
.fvr__v9 { aspect-ratio: 9 / 16; height: auto; }
.fvr--169 > * { aspect-ratio: 16 / 9; height: auto; }
.fq4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--fw-gap); min-height: 0; }
.fq4 > * { min-height: 0; height: 100%; }
.ftxt { max-width: 46em; margin-bottom: clamp(22px, 3.4vh, 36px); container-type: inline-size; }
.ftxt .fw-h { margin-top: 6px; }
.fwide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: end; margin-bottom: var(--fw-gap); }
.fwide .fw-h { font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); }
@media (max-width: 900px) {
  .fstops { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
  .fwide { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fvr__v9 { grid-column: auto; }
  .fvr > .fvr__v9 { aspect-ratio: 9 / 16; }
  .fvr__v9 + .fvr__v9 { grid-column: auto; }
  .fvr:has(> .fvr__v9) > :not(.fvr__v9) { grid-column: 1 / -1; aspect-ratio: 3 / 2; height: auto; }
  .fvr:has(> .fvr__v9) > .fq4 { aspect-ratio: auto; }
  .fq4 > * { aspect-ratio: 3 / 2; height: auto; }
  .fvr.fvr--169 > * { aspect-ratio: 16 / 9; }
  .fvr--169 { grid-template-columns: 1fr; }
  .fvr--32 > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .fvr > .fvr__v9:first-child:not(:has(+ .fvr__v9)) { grid-column: 1 / -1; justify-self: stretch; width: 100%; }   /* Oct 20 (Diallo): a lone vertical film runs the full width, tall (was 72%) */
}
.fwide > div:first-child { container-type: inline-size; min-width: 0; }
.fwide .fstat__n { font-size: min(clamp(3rem, 1rem + 6vw, 7.5rem), 12cqi); }

/* Oct 19 (Diallo, TBH notes) -----------------------------------------------------------------
   The idea's two colour halves style only the heading's own two spans (not the word spans the
   reveal adds inside them). Media stacked under a film keep the gap. The classics as four
   vertical films in one row, each with its place under it (.fv4). The campuses by name, each over
   its school's two colours (.fcamp). The all-year collage (.fbn): twelve photos on a twelve-column
   grid, every frame shaped to its photo so the people stay whole. The route line ends on a dot. */
.fw-m + .fg, .fw-m + .fvr, .fw-m + .fbn { margin-top: var(--fw-gap); }
.fv4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fw-gap); }
.fv4__c { min-width: 0; }
.fv4__c figcaption { margin-top: 14px; color: rgb(242 242 242 / .9); font: 700 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fcamp { list-style: none; margin: 0 0 clamp(26px, 4vh, 44px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px clamp(16px, 2vw, 32px); align-items: end; }
.fcamp li { padding-bottom: 12px; color: #fff; font: 800 clamp(1rem, .7rem + .9vw, 1.625rem)/1.05 var(--font-heading); text-transform: uppercase; text-wrap: balance;
  background: linear-gradient(90deg, var(--c1) 0 62%, var(--c2) 62% 100%) left bottom / 100% 4px no-repeat; }
.fbn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 14.2vw, 210px); gap: var(--fw-gap);
  grid-template-areas: "a a a a a a b b b c c c" "a a a a a a b b b d d d" "e e e g g g g g g h h h" "f f f g g g g g g h h h" "i i i i j j j j l l l l" "i i i i k k k k l l l l"; }
.fbn > * { min-width: 0; height: 100%; }
.fbn__a { grid-area: a; } .fbn__b { grid-area: b; } .fbn__c { grid-area: c; } .fbn__d { grid-area: d; } .fbn__e { grid-area: e; } .fbn__f { grid-area: f; }
.fbn__g { grid-area: g; } .fbn__h { grid-area: h; } .fbn__i { grid-area: i; } .fbn__j { grid-area: j; } .fbn__k { grid-area: k; } .fbn__l { grid-area: l; }
.ftxt--gap { margin-top: clamp(40px, 7vh, 72px); }
.ftxt h3 { margin: 0 0 10px; color: #fff; font: 800 clamp(1.25rem, .9rem + 1.1vw, 2rem)/1.05 var(--font-heading); text-transform: uppercase; }
.fr__line::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; box-sizing: border-box;
  background: var(--color-bg); border: 2px solid rgb(255 255 255 / .38); transition: background-color .5s, border-color .5s, box-shadow .5s; }
.fr__line.is-end::after { background: var(--color-sky-upper); border-color: #fff; box-shadow: 0 0 0 6px rgb(120 160 230 / .25); }
@media (max-width: 1100px) { .fcamp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fv4 { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .fcamp { grid-template-columns: 1fr; }   /* Oct 20 (Diallo): one school per row, stacked (was two columns) */
  .fbn { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(100px, 30vw, 170px);
    grid-template-areas: "a a" "a a" "b c" "b d" "e f" "g g" "g g" "h i" "h l" "j k"; }
}

/* Oct 19 (Diallo, BAM notes) -----------------------------------------------------------------
   The BAM Band frame rotates through the band photos (.frot: the house wipe from a random side, paused off screen,
   the first photo only under reduced motion). Opening the show in eight frames, compact: the two
   stadium wides at 8:3 (.fvr--83), then Beckham whole, four frames together and the four screens
   (.fop). The hologram row: the selfie photo wide enough to keep her phone, the second photo slim,
   the film unchanged. */
.frot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.frot > img:first-child { z-index: 1; }
.fh3__c1 .fgc__t { max-width: none; }
.fvr--83 > * { aspect-ratio: 8 / 3; height: auto; }
.fop > :first-child { aspect-ratio: 760 / 1056; height: auto; }
.fop > .fq4 { min-height: 0; }
.fh3 { grid-template-columns: 1.81fr 1.13fr 1fr; }
@media (max-width: 760px) {
  .fvr.fvr--83 { grid-template-columns: 1fr; }
  .fvr.fvr--83 > * { aspect-ratio: 8 / 3; }
  .fvr.fop { grid-template-columns: 1fr 1fr; }
  .fop .fq4 { display: contents; }
  .fvr.fop > :first-child { grid-column: 1; grid-row: span 2; aspect-ratio: auto; height: 100%; }
  .fvr.fop > *, .fop .fq4 > * { aspect-ratio: 3 / 2; height: auto; }
  .fvr.fop > :last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .fh3 { grid-template-columns: 1fr 1fr; grid-template-areas: "p1 p1" "p2 v" "c1 c1" "c2 c2"; }
  .fh3__p1 { aspect-ratio: 3 / 2; height: auto; }
  .fh3__p2 { aspect-ratio: auto; height: 100%; }
  .fh3__c1 { margin-bottom: 24px; }
}
.fop > :not(:first-child) > img, .fop .fq4 > * > img { position: absolute; inset: 0; }
@media (max-width: 760px) { .fop > :first-child > img { position: absolute; inset: 0; } }

/* Oct 19 (Diallo, Creative Currency round 3) -------------------------------------------------
   The two activations as two colour halves, type only (.fact: the TBH idea split, warm then sky);
   each activation's moments as text beats on a coloured rule (.fstops--beats: the 365 tour stops
   without pictures); the statement box with room around it (.fwide--gap). */
.fact { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--fw-r); overflow: hidden; }
.fact__h { padding: clamp(28px, 3.4vw, 56px) clamp(24px, 2.8vw, 48px) clamp(28px, 3vw, 48px); min-width: 0; }
.fact__h--warm { background: radial-gradient(90% 140% at 100% 100%, rgb(226 123 48 / .6), transparent 62%), var(--g-warm); }
.fact__h--sky { background: radial-gradient(70% 90% at 100% 0%, rgb(58 90 160 / .45), transparent 64%), var(--g-sky); }
.fact__k { margin: 0 0 clamp(36px, 5vw, 72px); color: rgb(255 255 255 / .8); font: 600 11.5px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.fact h3 { margin: 0; color: #fff; font: 800 clamp(1.375rem, .9rem + 1.5vw, 2.5rem)/1.02 var(--font-heading); text-transform: uppercase; text-wrap: balance; }
.fact h3 + p { margin: 16px 0 0; max-width: 30em; color: rgb(255 255 255 / .9); font: 400 clamp(1rem, .94rem + .25vw, 1.1875rem)/1.5 var(--font-body); }
.fstops--beats { margin: clamp(32px, 5vh, 56px) 0; }
.fstops--beats .fstop h3 { font-size: clamp(1.125rem, .9rem + .7vw, 1.5rem); }
.fstops--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fwide--gap { margin: 0 0 var(--fw-gap); }
@media (max-width: 900px) { .fstops--2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fact { grid-template-columns: 1fr; } .fact__k { margin-bottom: 20px; } }
@media (max-width: 760px) { .fvr > .fvr__v + :last-child:nth-child(2) { aspect-ratio: 3 / 2; } }
.fstops--2[style*="--cols"] { grid-template-columns: var(--cols); }
@media (max-width: 900px) { .fstops--2[style*="--cols"] { grid-template-columns: 1fr; } }

/* Oct 19 (Diallo, BAM round 4): the partnership lead on two lines; under the two stadium wides, two rows of one height
   (.fbr: columns follow each frame's shape, the row height comes from the wrapper's width) */
.fi__h > .fi__ln { display: block; }
.fbrs { container-type: inline-size; margin-top: var(--fw-gap); }
.fvr.fbr { height: calc((100cqi - 2 * var(--fw-gap)) / 5.61); }
.fvr.fbr--4 { height: calc((100cqi - 3 * var(--fw-gap)) / 5.61); }
.fbr + .fbr { margin-top: var(--fw-gap); }
.fbr > * > img { position: absolute; inset: 0; }
@media (max-width: 760px) {
  .fvr.fbr { height: auto; grid-template-columns: 1fr 1fr; }
  .fvr.fbr > * { aspect-ratio: 3 / 2; height: auto; }
  .fvr.fbr > .fbr__w { grid-column: 1 / -1; order: -1; aspect-ratio: 8 / 3; }
}

/* Oct 19 (Diallo): rotating photo spots with four photos or more get prev and next arrows, tucked under the photo
   in the space that is already there (absolutely placed, so nothing changes size) */
.frotw { position: relative; min-width: 0; height: 100%; }
.frotw > .frot { height: 100%; }
.frot__ctl { position: absolute; z-index: 3; right: 0; top: calc(100% + 8px); display: flex; gap: 8px; }
.frot__ctl .fq__b { width: 34px; height: 34px; }
.frot__ctl .fq__b svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .frotw { margin-bottom: 46px; } }
.fvr:has(.frotw) + .fstops--beats { margin-top: clamp(50px, 5.6vh, 60px); }

/* Oct 19 (Diallo, 365 notes): each tour stop's rule in the school's two official colours, the name in the colour that
   pops; a navy segment gets a thin light outline; more room between the columns' text */
.fstop--2c .fstop__t { border-top: 0; padding-right: clamp(14px, 2vw, 36px); }
.fstop--2c .fstop__t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c1) 0 62%, var(--c2) 62% 100%); }
.fstop--rk .fstop__t::before { box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
.fstop--2c .fstop__t { padding-top: calc(clamp(18px, 1.8vw, 26px) + 4px); }
.fcamp li.rk { background: none; position: relative; }
.fcamp li.rk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--c1) 0 62%, var(--c2) 62% 100%); box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
@media (max-width: 900px) { .fstop--2c .fstop__t { padding-right: 0; } }
.fpan.fpan--keep { aspect-ratio: 40 / 17; }
@media (max-width: 760px) { .fpan.fpan--keep { aspect-ratio: 40 / 17; } }

/* Oct 19 (Diallo): smaller arrows, closer together, everywhere; top right of the photo where asked (.frotw--tr) */
.frot__ctl { gap: 4px; top: calc(100% + 6px); }
.frot__ctl .fq__b { width: 26px; height: 26px; }
.frot__ctl .fq__b svg { width: 11px; height: 11px; }
.frotw--tr .frot__ctl { top: 10px; right: 10px; }
.frotw--tr .fq__b { background: rgb(0 0 0 / .42); border-color: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 760px) { .frotw { margin-bottom: 36px; } .frotw.frotw--tr { margin-bottom: 0; } }
/* the two activations: a faint photo of each, blended into its colour and faded toward the words */
.fact__h { position: relative; isolation: isolate; overflow: hidden; }
.fact__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .3; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(100deg, rgb(0 0 0 / .12) 18%, #000 88%); mask-image: linear-gradient(100deg, rgb(0 0 0 / .12) 18%, #000 88%); }
/* the guest experience caption on one line */
.fh3__c2 .fgc__t { white-space: nowrap; }
/* room above the Band of the Year box on TBH */
.fwide--gap.ftxt--gap { margin-top: clamp(40px, 7vh, 72px); }
/* the social numbers (Creative Currency) */
.fsoc { list-style: none; margin: clamp(28px, 4.4vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fw-gap) clamp(16px, 2.4vw, 40px); }
.fsoc li { display: grid; gap: 8px; padding-top: 14px; border-top: 3px solid var(--color-accent); min-width: 0; container-type: inline-size; }
.fsoc__n { color: #fff; font: 800 min(clamp(2rem, 1rem + 3vw, 4.25rem), 12cqi)/.95 var(--font-heading); letter-spacing: -.02em; }
.fsoc__l { color: rgb(242 242 242 / .8); font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 760px) { .fsoc { grid-template-columns: 1fr 1fr; row-gap: 24px; } }
.fh3__c2 { container-type: inline-size; }
.fh3__c2 .fgc__t { font-size: min(clamp(1rem, .95rem + .2vw, 1.125rem), 5.15cqi); }
@media (max-width: 760px) { .fh3__c2 .fgc__t { white-space: normal; font-size: 1rem; } }
/* the arrows stay above the photos as they wipe (each photo raises its own z-index inside the frame), and on the tour
   spot they sit outside the photo, above its top right corner */
.frot { isolation: isolate; }
.frot__ctl { z-index: 6; }
.frotw--tr .frot__ctl { top: auto; bottom: calc(100% + 8px); right: 0; }
.frotw--tr .fq__b { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .32); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 760px) { .frotw.frotw--tr { margin-bottom: 0; margin-top: 36px; } }
/* a caption under one photo of a collage: the IBC gala line under the Bottler of the Year photo (the grid's right half) */
.fcapr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--fw-gap); }
.fcapr > * { grid-column: 3 / -1; }
@media (max-width: 760px) { .fcapr > * { grid-column: 1 / -1; } }

/* Oct 20 (Diallo): the BAM intro film plays once and holds its last frame; Replay appears when it ends
   (and from the start under reduced motion, where nothing plays on its own) */
.frp { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / .5); background: rgb(0 0 0 / .45); color: #fff; cursor: pointer;
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease, background-color .3s; }
.frp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-ended > .frp { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: hover) { .frp:hover { background: var(--red-bright); border-color: var(--red-bright); } }
.frp:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* the four fan festival films' Replay buttons sit a little tighter on the narrow cards */
.fv4 .frp { right: 10px; bottom: 10px; padding: 7px 11px 7px 9px; font-size: 10px; }

/* Oct 20 (Diallo, phone pass): section spacing that keeps the page moving (was 130 to 210px of
   empty space between chapters at 390px), larger eyebrows to mark each chapter, the hologram
   selfie with room under it, and View All Featured Work centred at every width */
@media (max-width: 760px) {
  .fw { --fc-pad: 52px; }
  .fi { padding-bottom: 40px; }
  .fw-kicker, .fi__k { font-size: 1.5rem; }
  .fw-kicker { display: block; }
  .fw-kicker::after { display: inline-block; width: 40px; margin-left: 12px; vertical-align: middle; }   /* a two-line kicker keeps its dash after the last word */
  .fw .fh3__p1 { margin-bottom: var(--fw-gap); }   /* Oct 20: .fw figure { margin: 0 } outranked the plain class, so the gap never showed */
}
@media (max-width: 900px) { .fp__all { justify-self: center; } }

/* Oct 20 (Diallo), phones only, Creative Currency: the Activation One photo sits on the card's foot
   (drawn a little taller than the card, so the Fellows' faces rise above the title and a row of the backdrop logos shows); the Activation Two photo
   starts at its left edge (more of Jermaine Dupri clear of the words); the studio photos' arrows go
   back under the photo */
@media (max-width: 760px) {
  .fact__h--warm .fact__bg { top: auto; bottom: 0; height: 110%; object-position: 50% 100%; }   /* 110% (was 135%): a row of the backdrop's logos shows too */
  .fact__h--sky .fact__bg { object-position: 0% 50%; }
  .frotw--tr .frot__ctl { top: calc(100% + 6px); bottom: auto; }
  .frotw.frotw--tr { margin-top: 0; margin-bottom: 36px; }
  /* the slideshow arrows a size up on phones, easier under a thumb (26px to 36px), with the room under the photo to match */
  .frot__ctl { gap: 10px; top: calc(100% + 8px); }
  .frot__ctl .fq__b { width: 36px; height: 36px; }
  .frot__ctl .fq__b svg { width: 14px; height: 14px; }
  .frotw, .frotw.frotw--tr { margin-bottom: 46px; }
}

/* Oct 20 (Diallo): a details field with more than one kind of place: one line each, an orange dot before each */
.fi__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fi__list li { position: relative; padding-left: 16px; }
.fi__list li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-hover); }
/* Oct 21 (Diallo): a lead line above the dotted places (Creative Currency: Atlanta, Georgia, then its two venues) */
.fi__lead-line { display: block; margin-bottom: 4px; }

:root { --site-css: 1; }