/* RareCo Creative · Home (working homepage).
   Loaded after the library's tokens.css, base.css and motion.css
   (cdn.brandquality.com, Standard 15) and /fonts/fonts.css. 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 */
  --x: clamp(20px, 4vw, 64px);    /* 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: 3.9468; --lk-foot: .2750;
  --lk-w: min(calc(var(--lk-h) * var(--lk-ar)), calc(100cqw - 2 * var(--x)));
  --lk-mask: url("../media/rareco-lockup-white.svg?v=20261005a");
  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; }
.hero.is-video:not(.is-still) .hero__fallback { opacity: 0; }
/* round 5 (Diallo, Oct 7): the loop fades in once it is actually playing, instead of cutting in */
.hero.is-video:not(.is-still) .hero__video { opacity: 0; transition: opacity 1.6s var(--ease-reveal); }
.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"); }
.hero__grid { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; opacity: .42; }
.hero__grid use { color: #fff; }

/* 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: 1005.29 / 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: .55; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 0%, transparent 28%, rgb(255 255 255 / .5) 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; }
@media (hover: hover) { .snav__mark:hover { background-color: rgb(255 255 255 / .14); transform: rotate(-8deg); } }
.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 */
.snav__links span, .foot__nav span[role="link"] { position: relative; }
.snav__links span::after, .foot__nav span[role="link"]::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="link"]::after { bottom: -7px; }
@media (hover: hover) { .snav__links span:hover::after, .foot__nav span[role="link"]: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__grid, .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 .hero__grid { animation: fade-grid 1600ms var(--ease-reveal, cubic-bezier(.22,1,.36,1)) 1600ms both; }
.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); }
}
/* 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(32px, 6vh, 64px); max-width: 22em; color: #fff; font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 2vw, 3.5rem); line-height: 1.17; 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; }
.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(.8125rem, .76rem + .15vw, .9375rem)/1.5 var(--font-body); transition: color .5s; }
@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 img { 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 { visibility: visible; clip-path: inset(0); }
.capd__slides img.was-on { z-index: 2; }
.capd__slides img.is-on { z-index: 3; animation: shot-wipe 1.3s var(--ease-wipe) both, shot-zoom 2.4s var(--ease-emph) both; }
.capd__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.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); }


/* ================================================================ 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; }
.work__stack { padding-inline: var(--x); }
/* 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 img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 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 { 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; }
.wcard__title { margin: 0; color: #fff; font: 800 clamp(1.75rem, .8rem + 3.1vw, 4.5rem)/.98 var(--font-heading); 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(1.375rem, calc(.9rem + .85vw + 2px), calc(2rem + 2px))/1.1 var(--font-serif); letter-spacing: -.005em; }   /* round 12: +2px */
.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; }
.wcard__cta .btn__ico { width: 28px; height: 28px; padding: 7px; }
.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; }

.work__foot { display: flex; justify-content: center; margin-top: clamp(40px, 7vh, 80px); }

/* ================================================================ 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); }
.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(132px, 10.5vw, 176px); height: auto; transition: opacity .4s; }   /* round 7: smaller (was 190 to 280px) */
@media (hover: hover) { .foot__home:hover .foot__logo { opacity: .78; } }
.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; }
.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 var(--font-body); letter-spacing: .14em; text-transform: uppercase; 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: 58px; height: 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: 50px; height: 50px; }
.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__grid { animation: none !important; opacity: .42 !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: 900px) { .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ 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; }
  .hero__grid { opacity: .3; }

  .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.375rem, 1rem + 2vw, 1.75rem); }
  .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; }
  .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: 10px; padding-right: 5px; }
  .snav__links { gap: 12px; padding: 0; }
  .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; }
}