@font-face {
    font-family: 'ABC Repro';
    font-style: normal; font-weight: 400; font-display: block;
    src: url(/home-redesign/assets/fonts/4f6ccdc5d134.woff2) format('woff2');
  }
  @font-face {
    font-family: 'ABC Repro';
    font-style: normal; font-weight: 500; font-display: block;
    src: url(/home-redesign/assets/fonts/7b727983de34.woff2) format('woff2');
  }
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal; font-weight: 400; font-display: block;
    src: url(/home-redesign/assets/fonts/85361ade3d64.woff2) format('woff2');
  }

  :root {
    --graphite:      #2A2823;
    --graphite-deep: #1A1917;
    --graphite-void: #0E0D0C;
    --cloud:         #FCFCFC;
    --orange:        #FF5005;
    --mute:          #8C867B;
    --mute-dim:      #5A554D;
    --hair:          rgba(252, 252, 252, 0.12);
    --hair-soft:     rgba(252, 252, 252, 0.055);

    --sans: 'ABC Repro', 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--graphite-void);
    color: var(--cloud);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------------- Viewport frame ----------------
     .frame is the page's scroll container, not the window. Every size in the
     design is expressed in container query units against it, which is what
     lets the whole page respond to its own box rather than to the viewport. */
  html, body { height: 100%; overflow: hidden; background: var(--graphite-deep); }
  /* Next mounts the app in #__next; without a height on it the rig below has
     nothing to be 100% of. The selector matches nothing outside Next, so the
     same stylesheet still serves the page standalone. */
  #__next { height: 100%; }

  /* Nothing half-built is ever on screen: the page sits under this until the
     fonts and the first assets are in, and the intro starts as it lifts. */
  .boot {
    position: fixed;
    inset: 0;
    /* over everything, including anything that manages to paint early */
    z-index: 9999;
    display: grid;
    place-items: center;
    align-content: center;
    gap: clamp(26px, 4vh, 46px);
    background: var(--graphite-deep);
    transition: opacity .55s ease;
  }
  .boot.gone { opacity: 0; pointer-events: none; }
  .boot[hidden] { display: none; }
  .bootmark {
    width: clamp(26px, 3.4vh, 38px);
    height: auto;
    color: var(--orange);
    animation: bootPulse 2.4s ease-in-out infinite;
  }
  @keyframes bootPulse { 0%, 100% { opacity: .9 } 50% { opacity: .25 } }
  @media (prefers-reduced-motion: reduce) { .bootmark { animation: none; } }
  .rig { height: 100%; background: var(--graphite-deep); }
  .frame {
    position: relative;
    width: 100%;
    /* dvh tracks the mobile toolbar; the percentage is the fallback, and the
       ground behind now matches either way, so a mismatch is never a band */
    height: 100%;
    height: 100dvh;
    overflow: hidden auto;
    background: var(--graphite-deep);
    container-type: size;
    scrollbar-width: thin;
    scrollbar-color: rgba(252,252,252,.16) transparent;
  }

  .fieldholder { position: sticky; top: 0; height: 0; z-index: 0; }
  canvas.field {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100cqh;
    display: block;
  }
  .heroband { position: relative; height: 100cqh; }

  /* ---------------- Hero, three bands filling the height ---------------- */
  .hero {
    position: absolute;
    inset: 0;
    display: grid;
    /* the nav is fixed, so it no longer occupies row 1 — reserve it */
    grid-template-rows: clamp(26px, 3.4cqh, 46px) 1fr auto;
    padding: 3.2cqh 3.2cqi;
  }
  .hero .stagearea { grid-row: 2; }
  .hero .foot { grid-row: 3; }

  /* nav */
  /* The bar hides on the way down and comes back on the way up; the backdrop
     is driven by how far down you are rather than by a threshold. */
  .frame > .nav::before {
    content: '';
    position: absolute;
    inset: -20% 0 -80% 0;
    background: linear-gradient(to bottom, rgba(26, 25, 23, .72), rgba(26, 25, 23, 0));
    /* never exactly zero: a backdrop-filter layer is only set up once the
       element is painted, and going 0 -> 1 made the blur land a beat after the
       bar itself. Keeping it barely alive keeps the layer warm. */
    opacity: max(0.004, var(--navbg, 0));
    will-change: opacity;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent);
    mask-image: linear-gradient(to bottom, #000 42%, transparent);
    transition: opacity .55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: -1;
  }
  .navhide > .nav { transform: translateY(-120%); opacity: 0; }
  /* Two sections break to paper. White chrome vanishes on them, so the bar
     inverts while it is over one. */
  .navink > .nav { --flashback: #1F1D19; }
  .navink > .nav ul,
  .navink > .nav .menu { color: rgba(35, 32, 25, 0.68); }
  .navink > .nav a:hover,
  .navink > .nav a:focus-visible,
  .navink > .nav .menu:hover { color: #1F1D19; }
  .navink > .nav ul a:hover i,
  .navink > .nav ul a:focus-visible i { animation-name: swooshFlash; }
  .navink > .nav::before {
    background: linear-gradient(to bottom, rgba(247, 243, 236, 0.8), rgba(247, 243, 236, 0));
  }
  /* never slide the bar away while its own menu is open */
  .frame.menuopen > .nav { transform: none; opacity: 1; }
  /* nothing moves behind an open menu */
  .frame.menuopen { overflow: hidden; }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: clamp(9px, 1.5cqi, 12px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .frame > .nav {
    position: sticky;
    top: 0;
    z-index: 12;
    padding: 3.2cqh 3.2cqi;
    margin-bottom: calc(-1 * (3.2cqh * 2 + clamp(20px, 2.9cqh, 30px)));
    transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .45s ease;
  }
  .nav ul {
    display: flex;
    gap: clamp(16px, 2.6cqi, 38px);
    list-style: none;
    margin: 0;
    padding: 0;
    color: rgba(252, 252, 252, 0.74);
  }
  .nav a {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    padding-bottom: 3px;
    transition: color .22s ease;
  }
  /* a hairline draws under the label; the text lifts to full white */
  .nav ul a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    /* a band of orange rides along the rule in step with the letters */
    background-image: linear-gradient(90deg,
      currentColor 0 38%, var(--orange) 46% 54%, currentColor 62% 100%);
    background-size: 300% 100%;
    background-position: 0% 0;
    opacity: .55;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .34s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav a:hover, .nav a:focus-visible { color: var(--cloud); outline: none; }
  .nav a i { font-style: normal; }
  .nav a:hover i, .nav a:focus-visible i {
    animation: navFlash .58s ease both;
    animation-delay: calc(var(--i, 0) * 42ms);
  }
  @keyframes navFlash {
    0%   { color: var(--cloud); }
    34%  { color: var(--orange); }
    100% { color: var(--cloud); }
  }
  .nav ul a:hover::after, .nav ul a:focus-visible::after {
    transform: scaleX(1);
    animation: navRule .8s ease .04s both;
  }
  @keyframes navRule {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav ul a:hover::after { animation: none; }
  }

  .hamb {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    color: var(--mute);
    cursor: pointer;
    transition: color .25s ease;
  }
  .hamb i {
    display: block;
    width: 18px;
    height: 1.4px;
    background: currentColor;
    transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hamb:hover, .hamb:focus-visible { color: var(--cloud); }
  .hamb:focus-visible { outline: 1px solid var(--orange); outline-offset: 2px; }
  /* the two rules meet in the middle and cross */
  .hamb[aria-expanded="true"] i:nth-child(1),
  .hamb.x i:nth-child(1) { transform: translateY(3.2px) rotate(45deg); }
  .hamb[aria-expanded="true"] i:nth-child(2),
  .hamb.x i:nth-child(2) { transform: translateY(-3.2px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .hamb i { transition: none; } }

  .nav .menu {
    display: none;
    margin-right: -11px;
  }
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: rgba(252, 252, 252, 0.74);
    cursor: pointer;
  }
  .nav .menu:hover, .nav .menu:focus-visible { color: var(--cloud); }
  .kite { width: clamp(20px, 2.9cqh, 30px); height: auto; display: block; }
  .nav .home { display: block; line-height: 0; }
  /* a small lift and a bloom — enough to read as a control, not a firework */
  .nav .home .kite {
    transition: transform .42s cubic-bezier(0.34, 1.56, 0.64, 1), filter .35s ease;
  }
  .nav .home:hover .kite, .nav .home:focus-visible .kite {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 14px rgba(255, 80, 5, 0.28));
  }
  .nav .home:active .kite { transform: translateY(-1px) scale(0.95); }
  .nav .home:focus-visible { outline: 1px solid var(--orange); outline-offset: 6px; }
  @media (prefers-reduced-motion: reduce) { .nav .home:hover .kite { transform: none; } }

  /* ---------------- Mobile menu ---------------- */
  /* the plate steps aside rather than being covered, so the field stays alive behind the menu */
  .foot { transition: opacity .28s ease; }
  .hero.menuopen .foot { opacity: 0; pointer-events: none; }

  /* a sticky child of the scroller, not of the hero: the button is reachable
     at any scroll position, so the sheet has to be too */
  .frame > .sheet {
    position: sticky;
    top: 0;
    left: auto; right: auto; bottom: auto;
    height: 100cqh;
    margin-bottom: -100cqh;
    z-index: 30;
  }
  .sheethead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: clamp(16px, 2.4cqh, 28px);
  }
  .sheethead .mark { display: block; line-height: 0; color: var(--orange); }
  .sheethead .kite { width: clamp(22px, 3.2cqh, 32px); }
  .sheethead .mark:focus-visible { outline: 1px solid var(--orange); outline-offset: 5px; }
  .sheet .x { margin-right: -11px; }
  .sheet {
    position: absolute;
    inset: 0;
    z-index: 5;
    /* it now opens over cards and photographs, not only over the field, so
       it needs to carry its own ground */
    /* frosted rather than opaque: the field and the page stay faintly
       readable behind it, which is what makes it feel like a layer */
    background: rgba(20, 19, 17, 0.72);
    -webkit-backdrop-filter: blur(26px) saturate(1.3);
    backdrop-filter: blur(26px) saturate(1.3);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    /* the same padding as the bar, so the mark does not jump when it opens */
    padding: 3.2cqh 3.2cqi;
    opacity: 0;
    transition: opacity .34s ease;
  }
  .sheet[hidden] { display: none; }
  .sheet.open { opacity: 1; }
  .sheethead .kite { width: clamp(20px, 2.9cqh, 30px); }

  /* Everything inside arrives in order and leaves the same way, a little
     quicker on the way out. */
  .sheet .sheethead,
  .sheet .lead,
  .sheet li,
  .sheet .base {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .1s linear, transform .1s linear;
  }
  .sheet.open .sheethead,
  .sheet.open .lead,
  .sheet.open li,
  .sheet.open .base {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .68s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sheet.open .sheethead { transition-delay: .02s; }
  .sheet.open .lead      { transition-delay: .09s; }
  .sheet.open li:nth-child(1) { transition-delay: .15s; }
  .sheet.open li:nth-child(2) { transition-delay: .21s; }
  .sheet.open li:nth-child(3) { transition-delay: .27s; }
  .sheet.open li:nth-child(4) { transition-delay: .33s; }
  .sheet.open .base { transition-delay: .40s; }

  .sheet.closing .sheethead,
  .sheet.closing .lead,
  .sheet.closing li,
  .sheet.closing .base {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .28s cubic-bezier(0.7, 0, 0.84, 0);
  }
  .sheet.closing .base { transition-delay: 0s; }
  .sheet.closing li:nth-child(4) { transition-delay: .03s; }
  .sheet.closing li:nth-child(3) { transition-delay: .06s; }
  .sheet.closing li:nth-child(2) { transition-delay: .09s; }
  .sheet.closing li:nth-child(1) { transition-delay: .12s; }
  .sheet.closing .lead { transition-delay: .15s; }
  .sheet.closing .sheethead { transition-delay: .18s; }
  @media (prefers-reduced-motion: reduce) {
    .sheet .sheethead, .sheet .lead, .sheet li, .sheet .base {
      opacity: 1; transform: none; transition: none;
    }
  }

  .sheet .lead {
    font-family: var(--mono);
    font-size: clamp(9px, 1.45cqi, 11px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute-dim);
    padding-top: clamp(30px, 5cqh, 52px);
  }
  .sheet ol {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: center;
  }
  .sheet li { border-top: 1px solid var(--hair); }
  .sheet li:last-child { border-bottom: 1px solid var(--hair); }
  .sheet li a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 2.6cqh 0;
    color: var(--cloud);
    text-decoration: none;
    font-size: min(9.4cqi, 5.4cqh);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1;
  }
  .sheet li a .n {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--mute-dim);
    font-weight: 400;
    flex: none;
    transition: color .2s;
  }
  .sheet li a:hover .n, .sheet li a:focus-visible .n { color: var(--orange); }
  .sheet li a:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }

  .sheet .base {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--hair);
    padding-top: 2.2cqh;
    font-family: var(--mono);
    font-size: clamp(9px, 1.4cqi, 11px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .sheet .base b { color: var(--cloud); font-weight: 400; }

  /* middle band stays empty on purpose: it is where the kite draws */
  .stagearea { position: relative; }

  /* bottom band */
  .foot { display: grid; gap: 3.2cqh; }
  .plate { display: grid; gap: 2.2cqh; }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: clamp(9px, 1.45cqi, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .led {
    width: 7px; height: 7px;
    background: var(--orange);
    border-radius: 50%;
    flex: none;
    animation: pulse 2.6s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .22 } }

  h1.head {
    margin: 0;
    font-weight: 500;
    font-size: min(7.1cqi, 9.6cqh);
    line-height: 0.99;
    letter-spacing: -0.028em;
    max-width: 15ch;
  }
  /* "lift" — the one word that carries colour, so it has to earn it */
  .lift {
    color: var(--cloud);
    transition: color 1.4s ease;
    cursor: default;
  }
  .lift.hot { color: var(--orange); transition: none; }
  .lift i { font-style: normal; }
  .lift:not(.hot):hover i { animation: letterFlash .62s ease both; }
  .lift:not(.hot):hover i:nth-child(2) { animation-delay: .075s; }
  .lift:not(.hot):hover i:nth-child(3) { animation-delay: .15s; }
  .lift:not(.hot):hover i:nth-child(4) { animation-delay: .225s; }
  @keyframes letterFlash {
    0%   { color: var(--cloud); }
    32%  { color: var(--orange); }
    100% { color: var(--cloud); }
  }
  /* the same swoosh, but it settles back to the colour of whatever it is
     riding on — ink on paper, grey on the logo wall */
  @keyframes swooshFlash {
    0%   { color: var(--flashback, var(--cloud)); }
    32%  { color: var(--orange); }
    100% { color: var(--flashback, var(--cloud)); }
  }
  .sw { display: inline-flex; }
  .sw i { font-style: normal; }

  .meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--hair);
    /* the rule spans the full frame; the content keeps its margin */
    margin-left: -3.2cqi;
    margin-right: -3.2cqi;
    padding-left: 3.2cqi;
    padding-right: 3.2cqi;
    padding-top: 2.2cqh;
    font-family: var(--mono);
    font-size: clamp(9px, 1.35cqi, 11.5px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute-dim);
  }
  .clocks {
    display: flex;
    gap: clamp(12px, 2cqi, 30px);
    font-variant-numeric: tabular-nums;
    color: var(--mute);
  }
  .clocks b { color: var(--cloud); font-weight: 400; }
  .clocks b i { font-style: normal; }
  /* the seconds are not shown, so the colon carries the fact that this is
     a live clock and not a screenshot */
  .clocks b .cl, .ftclock .cl { animation: tickColon 1.05s steps(1, end) infinite; }
  @keyframes tickColon {
    0%, 58%   { opacity: 1; }
    59%, 100% { opacity: 0.34; }
  }
  @media (prefers-reduced-motion: reduce) {
    .clocks b .cl, .ftclock .cl { animation: none; }
  }

  .go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cloud);
    text-decoration: none;
  }
  /* one control, not two: the arrow points down because the link scrolls */
  .go svg { color: var(--orange); transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1); }
  .go:hover .sw i, .go:focus-visible .sw i,
  .more:hover .sw i, .more:focus-visible .sw i {
    animation: swooshFlash .62s ease both;
    animation-delay: calc(var(--i, 0) * 46ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .go:hover .sw i, .more:hover .sw i { animation: none; }
  }
  .go:hover svg, .go:focus-visible svg { transform: translateY(4px); }
  .go:focus-visible { outline: 1px solid var(--orange); outline-offset: 5px; }

  /* container breakpoints — the hero responds to its own frame, not the window */
  @container (max-width: 700px) {
    /* Phone sizing pass. The mono UI type was sitting at 9px and the two
       scroll CTAs were the smallest text on the page. It is the floor that
       moves here, not the ceiling. */
    .go, .more, .onward { font-size: 12.5px; letter-spacing: 0.13em; }
    .go, .more { padding: 10px 0; }
    .onward { padding: 12px 0; }
    .eyebrow { font-size: 11px; }
    .clocks { font-size: 11.5px; }
    .svc .sub { font-size: 11px; }
    .svc .idx, .rail .count, .who, .voice-mark { font-size: 11px; }
    .ftcol a, .ftcol h4, .ftcol .row, .ftlaw, .btag { font-size: 11px; }
    .fcol h4, .ftmid .soda { font-size: 11px; }
    .slot .l1 { font-size: 15px; }
    .slot .l2 { font-size: 10.5px; }
    .sheet .lead, .sheet .base { font-size: 11.5px; }
    /* a real target under a thumb */
    .icons a { width: 26px; padding: 9px; margin: -9px; box-sizing: content-box; }
    .rail button { width: 44px; height: 44px; }

    .hero { padding: 2.6cqh 5cqi; }
    .nav ul { display: none; }
    .nav .menu { display: flex; }
    h1.head { font-size: min(9.6cqi, 6.2cqh); max-width: none; }
    .foot { gap: 2.4cqh; }
    .meta { flex-direction: column; align-items: stretch; gap: 1.8cqh; }
    .clocks { justify-content: space-between; }
    .metarow { display: flex; justify-content: flex-end; }
  }
  @container (max-width: 430px) {
    h1.head { font-size: min(8.6cqi, 5.6cqh); }
    .eyebrow .long { display: none; }
  }

  /* ---------------- Intro choreography ---------------- */
  .anim-mask { display: block; overflow: hidden; }
  /* the mask clipped descenders — the g in "digital" lost its tail.
     Give the box room below and take it back with a negative margin. */
  h1.head .anim-mask { padding-bottom: .22em; margin-bottom: -.22em; }
  .playing .anim-mask > span {
    display: block;
    animation: maskUp 1.05s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  /* 103% cleared the line box but not the descender padding added below it,
     which left a sliver of the next line showing through mid-animation. */
  @keyframes maskUp { from { transform: translateY(135%) } to { transform: none } }

  .playing .anim-fade { animation: fade .7s ease backwards; }
  @keyframes fade { from { opacity: 0 } to { opacity: 1 } }

  /* each rule grows the way it points: verticals downward, the horizontal
     left to right, so the frame reads as being drawn rather than fading up */

  /* the kite draws first; the words arrive while it is still lit */
  .t1 { animation-delay: .12s !important }
  .t2 { animation-delay: .30s !important }
  .t3 { animation-delay: 1.55s !important }
  .t4 { animation-delay: 1.75s !important }
  .t5 { animation-delay: 1.95s !important }
  .t6 { animation-delay: 2.45s !important }

  /* ================= Selected work — contact sheet =================
     Ref: Julia Krantz — 1px structural seams, edge-to-edge tiles, no rounding.
     Aerolab: graphite ground, Repro for names, Mono for notation, orange kept
     for interaction only. */

  .work {
    position: relative;
    z-index: 1;
    /* the hero needs room to finish before this starts */
    padding: clamp(120px, 20cqh, 300px) 3.2cqi clamp(72px, 9cqi, 150px);
  }

  .workhead { padding-top: 6px; }
  .workhead h2 {
    margin: 0;
    font-weight: 500;
    font-size: clamp(30px, 5cqi, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--mute);
  }
  .workhead h2 b { font-weight: 500; color: var(--cloud); }

  /* ---- the sheet ---- */
  .sheet-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
    margin-top: clamp(26px, 3.2cqi, 52px);
  }
  .sheet-grid .card { background: var(--graphite-deep); }
  /* featured across the full sheet, then two per row */
  .sheet-grid .card:nth-child(1) { grid-column: span 6; }
  .sheet-grid .card:nth-child(1) .media { aspect-ratio: 21 / 9; }
  .sheet-grid .card:nth-child(n+2) { grid-column: span 3; }
  .sheet-grid .card:nth-child(n+2) .media { aspect-ratio: 16 / 10; }

  .card { display: block; text-decoration: none; color: inherit; position: relative; }
  .card .media { position: relative; overflow: hidden; background: #201D1A; }
  .card .media img,
  .card .media video {
    position: absolute;
    left: 0;
    top: -6%;
    width: 100%;
    height: 112%;              /* headroom for the parallax drift */
    object-fit: cover;
    display: block;
    transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1));
    will-change: transform;
  }
  .card .media video { opacity: 0; transition: opacity .45s ease; z-index: 1; }
  .card.playing .media video { opacity: 1; }
  .card:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }

  /* at rest the sheet is a contact sheet: dimmed and desaturated.
     hover returns the picture — the colour coming back is the signal. */
  .card .media img,
  .card .media video { filter: grayscale(0.55) brightness(0.62); transition: filter .55s ease; }
  .card:hover .media img,
  .card:hover .media video,
  .card:focus-visible .media img,
  .card:focus-visible .media video { filter: none; }

  .cardmeta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    display: flex;
    align-items: baseline;
    gap: 11px;
    font-family: var(--sans);
    text-transform: none;
    letter-spacing: normal;
    padding: clamp(46px, 5cqi, 76px) clamp(14px, 1.8cqi, 26px) clamp(14px, 1.8cqi, 26px);
    background: linear-gradient(to top,
      rgba(14, 13, 12, 0.95) 0%,
      rgba(14, 13, 12, 0.78) 42%,
      rgba(14, 13, 12, 0) 100%);
  }
  /* the index is an oversize outline, cropped by the tile's own top edge */
  .card .idx {
    display: none;
    position: absolute;
    z-index: 5;
    left: clamp(-20px, -2.7cqi, -54px);
    bottom: clamp(-22px, -3cqi, -56px);
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(80px, 11cqi, 200px);
    line-height: 0.78;
    letter-spacing: -0.05em;
    color: rgba(252, 252, 252, 0.045);
    -webkit-text-stroke: 1px rgba(252, 252, 252, 0.22);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: color .3s ease, -webkit-text-stroke-color .3s ease;
  }
  .card:hover .idx {
    color: rgba(255, 80, 5, 0.10);
    -webkit-text-stroke-color: rgba(255, 80, 5, 0.55);
  }
  .cardmeta .name {
    display: block;
    color: var(--cloud);
    /* the only thing carrying the card now, so it gets the room */
    font-size: clamp(17px, 1.95cqi, 25px);
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.15;
  }
  .cardmeta .desc {
    display: block;
    color: var(--mute);
    font-size: clamp(12.5px, 1.28cqi, 15px);
    transition: color .22s ease;
  }
  .card:hover .desc { color: rgba(252, 252, 252, 0.78); }
  .feature-name .name { font-size: clamp(17px, 2.1cqi, 27px); }
  .feature-name .desc { font-size: clamp(13px, 1.45cqi, 16px); }

  /* cards enter out of focus rather than appearing */
  .card .media img { transition: filter .55s ease, opacity .9s ease, transform .2s linear; }
  .card:not(.seen) .media img,
  .card:not(.seen) .media video { opacity: 0; --ps: 1.06; filter: blur(18px) grayscale(0.55) brightness(0.62); }
  .card:not(.seen) .media img { transition: filter .9s cubic-bezier(0.16, 1, 0.3, 1), opacity .9s ease, transform .9s cubic-bezier(0.16, 1, 0.3, 1); }
  .card:not(.seen) .cardmeta { opacity: 0; transform: translateY(10px); }
  .card .cardmeta { transition: opacity .7s ease .12s, transform .7s cubic-bezier(0.16, 1, 0.3, 1) .12s; }

  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: clamp(36px, 4.4cqi, 74px);
    font-family: var(--mono);
    font-size: clamp(9px, 1.3cqi, 11.5px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cloud);
    text-decoration: none;
  }
  .more svg { color: var(--orange); transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1); }
  .more:hover svg { transform: translateX(5px); }

  @container (max-width: 700px) {
    .work { padding-left: 5cqi; padding-right: 5cqi; padding-top: clamp(90px, 14cqh, 200px); }
    .sheet-grid .card { grid-column: span 6 !important; }
    .sheet-grid .card .media { aspect-ratio: 7 / 6 !important; }
    /* the numeral hangs off the corner; at this width it was hanging into
       the card below instead of off the edge of its own */
    .card .idx { left: -6px; bottom: -4px; font-size: clamp(54px, 19cqi, 96px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .card .media img, .card .media video, .card .cardmeta { transition: none !important; }
    .card:not(.seen) .media img,
    .card:not(.seen) .media video { opacity: 1; --ps: 1; filter: grayscale(0.55) brightness(0.62); }
    .card:not(.seen) .cardmeta { opacity: 1; transform: none; }
    .card .media img, .card .media video { transform: none !important; }
  }

  /* ================= Statement — the wall =================
     The one place the dark breaks. A sunlit wall with blind shadows raking
     across it and the barrilete's own shadow cast among them. The quotes are
     pinned while you scroll through them; the light warms from dawn to day.
     Ref: Daylight Computer — soft blown-out paper, no hard edges, warm sun. */
  .statement {
    position: relative;
    z-index: 1;
    --paper: #F7F3EC;
    --ink: #1F1D19;
    --ink-soft: #6B655B;
    --rule: rgba(35, 32, 25, 0.14);
    background: var(--paper);
    color: var(--ink);
  }

  .stmt-track { height: 300cqh; position: relative; }
  .stmt-sticky {
    position: sticky;
    top: 0;
    height: 100cqh;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  #wall {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
  }

  .quotes {
    position: relative;
    z-index: 2;
    width: min(88%, 46cqi);
    display: grid;
    place-items: center;
    text-align: center;
  }
  .q {
    grid-area: 1 / 1;
    margin: 0;
    font-weight: 500;
    font-size: clamp(21px, 2.9cqi, 44px);
    line-height: 1.18;
    letter-spacing: -0.022em;
    color: var(--ink);
    text-wrap: pretty;
  }
  /* the quote comes in a line at a time rather than all at once — the same
     scroll distance, just read in the order you would read it */
  .q .w {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(14px);
    will-change: opacity, filter, transform;
  }

  /* a quiet progress mark, so you know there are three of them */
  .qdots {
    position: absolute;
    left: 50%;
    bottom: clamp(26px, 4cqh, 60px);
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    z-index: 2;
  }
  .qdots i {
    width: 5px; height: 5px;
    background: var(--ink);
    opacity: 0.16;
    transform: rotate(45deg);
    transition: opacity .4s ease, background .4s ease;
  }
  .qdots i.on { opacity: 1; background: var(--orange); }

  /* ---- stats ---- */
  .stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    margin: 0;
  }
  /* the rules reach both edges; the copy keeps the page's margin */
  .stat:nth-child(3n+1) { padding-left: 3.2cqi; }
  .stat:nth-child(3n) { padding-right: 3.2cqi; }
  .stat {
    padding: clamp(20px, 2.6cqi, 44px) clamp(12px, 1.6cqi, 26px) clamp(20px, 2.6cqi, 44px) 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.6cqi, 10px);
  }
  .stat .fig {
    font-weight: 500;
    font-size: clamp(40px, 7cqi, 126px);
    line-height: 0.86;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px var(--ink);
    transition: color 1.1s ease .3s;
  }
  .stats.seen .stat .fig { color: var(--ink); transition-delay: calc(0.18s + var(--n, 0) * 0.085s); }
  /* the label and the note follow the number they belong to */
  .stat .lab, .stat .cap, .certrow {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .6s ease, transform .75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .stats.seen .stat .lab {
    opacity: 1; transform: none;
    transition-delay: calc(0.34s + var(--n, 0) * 0.085s);
  }
  .stats.seen .stat .cap {
    opacity: 1; transform: none;
    transition-delay: calc(0.44s + var(--n, 0) * 0.085s);
  }
  .stats.seen .certrow { opacity: 1; transform: none; transition-delay: 0.78s; }
  @media (prefers-reduced-motion: reduce) {
    .stat .lab, .stat .cap, .certrow { opacity: 1; transform: none; transition: none; }
  }
  .stat .fig em { font-style: normal; color: var(--orange); -webkit-text-stroke: 0; }
  .stat .fig i { font-style: normal; }
  .stat .fig.flash:hover i {
    animation: figFlash .62s ease both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  @keyframes figFlash {
    0%   { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
    32%  { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
    100% { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
  }
  .stat .lab {
    font-family: var(--mono);
    font-size: clamp(9px, 1.15cqi, 11.5px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .stat .cap {
    font-size: clamp(12px, 1.25cqi, 14.5px);
    line-height: 1.4;
    color: var(--ink-soft);
    max-width: 28ch;
    margin-top: clamp(4px, 0.5cqi, 8px);
  }

  /* the certification cell carries the real B Corp mark from the repo */
  /* the two marks together, centred: they already say "certified" */
  /* aligned with the figures beside it rather than floating mid-cell */
  .certcell { justify-content: flex-start; }
  .certcell .certrow { margin-top: clamp(-6px, -0.6cqi, -2px); }
  .certrow {
    /* one height for both marks, so they sit as a pair */
    --certh: clamp(70px, 8.4cqi, 128px);
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6cqi, 44px);
    flex-wrap: nowrap;
  }
  .bcorp {
    /* matched to the height of the figures in the neighbouring cells */
    height: var(--certh);
    width: auto;
    color: var(--ink);
    display: block;
    flex: none;
  }
  /* the certification lockup, matched to the section's own black */
  /* the official lockup is a white plate — so this is one, rather than
     fighting the marks' own white backgrounds with blend modes */
  /* marks stacked, notation beside them: a taller lockup, matched to the
     figures in the neighbouring cells */
  /* the membership line sits under both marks, not inside either of them */
  .certcell .certrow { align-items: stretch; }
  .soda {
    margin-top: clamp(9px, 1.1cqi, 16px);
    font-family: var(--mono);
    font-size: clamp(8px, 0.92cqi, 11px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .soda b { font-weight: 400; color: var(--orange); }
  .isobadge {
    height: var(--certh);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.55cqi, 9px);
    border: 1px solid var(--ink);
    border-radius: 6px;
    padding: clamp(6px, 0.75cqi, 12px) clamp(9px, 1.1cqi, 17px);
    align-self: center;
    flex: none;
  }
  .isomarks {
    display: flex;
    align-items: center;
    gap: clamp(9px, 1.15cqi, 18px);
    flex: 1;
    min-height: 0;
  }
  .isomarks .sep { width: 1px; align-self: stretch; background: rgba(35, 32, 25, 0.22); }
  .isomark {
    height: clamp(20px, 2.4cqi, 37px);
    width: auto;
    display: block;
    object-fit: contain;
    flex: none;
  }
  .isomark.iram { width: clamp(20px, 2.4cqi, 37px); color: var(--ink); }
  .isomark.iram .ring { fill: none; stroke: var(--paper); stroke-width: 4.4; }
  .isomark.iram text { fill: var(--paper); }
  .isomark.iram text {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: 0.4px;
    /* recoloured to the section's ink with the white plate knocked out to
       alpha, so there is no blend mode to fail against a stacking context */
  }
  .isotext {
    display: grid;
    gap: 1px;
    justify-items: center;
    text-align: center;
    width: 100%;
    border-top: 1px solid rgba(35, 32, 25, 0.22);
    padding-top: clamp(4px, 0.5cqi, 8px);
    font-family: var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.16;
  }
  .isotext b { font-weight: 400; font-size: clamp(6.6px, 0.78cqi, 9.4px); color: #16140F; }
  .isotext i { font-style: normal; font-size: clamp(6px, 0.7cqi, 8.4px); color: #55504A; }

  @container (max-width: 900px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3n+1), .stat:nth-child(3n) { padding-left: 0; padding-right: clamp(12px, 1.6cqi, 26px); }
    .stat:nth-child(2n+1) { padding-left: 3.2cqi; }
    .stat:nth-child(2n) { padding-right: 3.2cqi; }
  }
  @container (max-width: 700px) {
    /* two columns on phone: six stacked cells was far too long */
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2n+1) { padding-left: 5cqi; }
    .stat:nth-child(2n) { padding-right: 5cqi; }
    .stat .fig { font-size: clamp(34px, 9cqi, 62px); }
    .certrow { --certh: clamp(44px, 12.5cqi, 62px); }
    .soda { font-size: clamp(7.5px, 2.4cqi, 9.5px); letter-spacing: 0.1em; }
    .stat .cap { display: none; }
    .quotes { width: 88%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .q { transition: none; }
  }



  /* ================= Footer =================
     A's structure with B's board folded into it: the flow field over the
     opening line, the three studios on split-flaps, and the wordmark held
     back until you have scrolled the whole way down. */
  /* named for the site, not for "the bottom": .foot is the hero's own
     bottom plate and painting this over it turned the headline into a box */
  .sitefoot {
    position: relative;
    z-index: 1;
    background: var(--graphite-void);
    color: var(--cloud);
    overflow: hidden;
  }

  /* ---- the opening block, on the same field as the hero ---- */
  .ftop {
    position: relative;
    z-index: 2;
    background: var(--graphite-void);
    padding: clamp(90px, 15cqi, 260px) 3.2cqi clamp(70px, 11cqi, 190px);
  }
  .ftfield {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(120% 100% at 30% 40%, #000 20%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 30% 40%, #000 20%, transparent 78%);
  }
  .ftopin { position: relative; z-index: 1; }
  .ftlede {
    margin: 0;
    font-weight: 500;
    font-size: clamp(32px, 6.6cqi, 104px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--cloud);
    max-width: none;
    text-wrap: balance;
    overflow-wrap: break-word;
    cursor: default;
    opacity: 0;
    filter: blur(14px);
    transform: translateY(16px);
    transition: opacity .9s ease, filter 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ftlede.seen { opacity: 1; filter: none; transform: none; }
  .ftlede i { font-style: normal; }
  .ftlede:hover i {
    animation: swooshFlash .62s ease both;
    animation-delay: calc(var(--i, 0) * 26ms);
  }
  .ftmail {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: clamp(20px, 2.8cqi, 46px);
    font-size: clamp(14px, 1.6cqi, 22px);
    letter-spacing: -0.012em;
    color: var(--mute);
    text-decoration: none;
    transition: color .3s ease;
  }
  .ftmail:hover { color: var(--cloud); }
  .ftmail svg { color: var(--orange); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
  .ftmail:hover svg { transform: translate(4px, -4px); }
  .ftmail:focus-visible { outline: 1px solid var(--orange); outline-offset: 5px; }

  /* ---- the board ---- */
  .board {
    position: relative;
    z-index: 2;
    background: var(--graphite-void);
    padding: 0 3.2cqi clamp(26px, 3.4cqi, 56px);
  }
  .btag {
    display: grid;
    grid-template-columns: 1.1fr 0.62fr 0.72fr;
    gap: clamp(10px, 1.6cqi, 30px);
    font-family: var(--mono);
    font-size: clamp(8px, 0.88cqi, 10.5px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute-dim);
    padding-bottom: clamp(8px, 1cqi, 15px);
  }
  .brow {
    display: grid;
    grid-template-columns: 1.1fr 0.62fr 0.72fr;
    align-items: center;
    gap: clamp(10px, 1.6cqi, 30px);
    padding: clamp(9px, 1.1cqi, 17px) 0;
    border-top: 1px solid var(--hair);
    text-decoration: none;
  }
  .brow:last-child { border-bottom: 1px solid var(--hair); }
  .lane { display: flex; align-items: center; gap: clamp(2px, 0.32cqi, 5px); }
  .flap {
    display: grid;
    place-items: center;
    width: clamp(11px, 1.45cqi, 22px);
    height: clamp(18px, 2.3cqi, 34px);
    background: #1B1913;
    border: 1px solid rgba(252, 252, 252, 0.13);
    border-radius: 1.5px;
    color: var(--cloud);
    font-family: var(--mono);
    font-size: clamp(9px, 1.25cqi, 17px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    position: relative;
    overflow: hidden;
  }
  /* the seam across the middle of a real flap */
  .flap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.55);
  }
  .flap.spin { color: var(--mute-dim); }
  .flap.hit { color: var(--orange); }
  .lane.st .flap { background: #100E09; }

  a.brow:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }

  /* ---- the standing footer: menu, the address, the badges ---- */
  .ftmid {
    position: relative;
    z-index: 2;
    background: var(--graphite-void);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(30px, 4cqi, 70px);
    padding: clamp(40px, 5cqi, 86px) 3.2cqi clamp(46px, 6cqi, 100px);
  }
  .fcol { display: grid; gap: clamp(18px, 2.2cqi, 34px); align-content: start; }
  .fcol h4 {
    margin: 0;
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(9px, 1.02cqi, 11.5px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute-dim);
  }
  .fcol .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(18px, 2.4cqi, 40px); }
  .fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, 1cqi, 15px); }
  .fcol li a {
    font-size: clamp(15px, 1.6cqi, 23px);
    letter-spacing: -0.015em;
    color: var(--cloud);
    text-decoration: none;
    width: fit-content;
    display: block;
    transition: color .25s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fcol li a:hover { color: var(--orange); transform: translateX(3px); }
  .fcol li a:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }
  .mailbig {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1cqi, 14px);
    font-size: clamp(15px, 1.7cqi, 25px);
    letter-spacing: -0.018em;
    color: var(--cloud);
    text-decoration: none;
    width: fit-content;
  }
  .mailbig svg { color: var(--orange); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
  .mailbig:hover svg { transform: translate(4px, -4px); }
  .mailbig:focus-visible { outline: 1px solid var(--orange); outline-offset: 5px; }
  .icons { display: flex; gap: clamp(14px, 1.8cqi, 26px); align-items: center; }
  .icons a {
    color: var(--cloud);
    display: block;
    width: clamp(19px, 2cqi, 27px);
    transition: color .25s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .icons svg { width: 100%; height: auto; display: block; }
  .icons a:hover { color: var(--orange); transform: translateY(-2px); }
  .icons a:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }
  .bcorpwrap { display: block; }
  .bcorpwrap svg {
    height: clamp(52px, 6cqi, 92px);
    width: auto;
    display: block;
    color: var(--cloud);
  }
  .ftmid .soda { text-decoration: none; }
  .ftmid a.soda:hover b { text-decoration: underline; }
  .ftmid a.soda:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }
  .ftmid .soda {
    margin-top: 0;
    font-family: var(--mono);
    font-size: clamp(8.5px, 0.95cqi, 11px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .ftmid .soda b { font-weight: 400; color: var(--orange); }

  /* ---- link columns ---- */
  .ftcols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4cqi, 40px);
    border-top: 1px solid var(--hair);
    padding: clamp(24px, 3cqi, 50px) 3.2cqi clamp(28px, 3.6cqi, 60px);
    font-family: var(--mono);
    font-size: clamp(9.5px, 1.05cqi, 11.5px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .ftcol { display: grid; gap: 9px; align-content: start; }
  .ftcol h4 { margin: 0 0 4px; font-weight: 400; color: var(--mute-dim); letter-spacing: 0.16em; }
  .ftcol a { color: var(--mute); text-decoration: none; transition: color .25s ease; width: fit-content; }
  .ftcol a:hover { color: var(--cloud); }
  .ftcol a:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }
  .ftcol span { color: var(--mute); }

  /* ---- the wordmark, held below the sill ---- */
  .horizon {
    position: relative;
    z-index: 0;
    /* the runway is measured in scroll now, not in this band, so the band
       only has to hold the mark and a little air over it */
    height: clamp(200px, 27cqi, 410px);
    overflow: hidden;
  }
  .horizon .mark {
    position: absolute;
    left: 3.2cqi;
    right: 3.2cqi;
    bottom: clamp(12px, 1.7cqi, 30px);
    display: block;
    width: calc(100% - 6.4cqi);
    height: auto;
    /* the ascenders reach the top of the viewBox; the swoosh lifts a letter
       a few units and an svg root clips by default */
    overflow: visible;
    /* printed, not lit; the per-letter fill is set in JS from here down */
    color: rgba(252, 252, 252, 0.05);
    transform: translateY(76%);
    will-change: transform;
  }
    .ftlaw {
    position: relative;
    z-index: 2;
    background: var(--graphite-void);
    display: flex;
    flex-wrap: wrap;
    gap: 8px clamp(14px, 2cqi, 34px);
    padding: clamp(12px, 1.4cqi, 22px) 3.2cqi clamp(14px, 1.6cqi, 26px);
    border-top: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: clamp(8.5px, 0.92cqi, 10.5px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute-dim);
  }
  .ftlaw .push { margin-left: auto; }

  @container (max-width: 900px) {
    .ftcols { grid-template-columns: repeat(2, 1fr); }
    .ftmid { grid-template-columns: 1fr 1fr; }
  }
  @container (max-width: 700px) {
    .ftop, .board, .ftcols, .ftlaw, .ftmid { padding-left: 5cqi; padding-right: 5cqi; }
    .ftmid { grid-template-columns: 1fr; gap: clamp(28px, 6cqi, 48px); }
    .ftlede { max-width: none; }
    .horizon .mark { left: 5cqi; right: 5cqi; width: calc(100% - 10cqi); }
    .horizon { height: clamp(110px, 30cqi, 200px); }
    .btag { display: none; }
    /* one value per row: the city with its clock, the invitation with its
       status. Three lanes stacked was a wall of flaps. */
    /* the rules run to both edges; the flaps keep the page margin */
    .board { padding-left: 0; padding-right: 0; }
    .brow {
      grid-template-columns: auto 1fr;
      gap: clamp(10px, 3cqi, 18px);
      align-items: center;
      padding-left: 5cqi;
      padding-right: 5cqi;
    }
    .brow .lane.tm, .brow .lane.st { justify-content: flex-end; }
    .brow.city .lane.st { display: none; }
    .brow.invite .lane.tm { display: none; }
    .flap {
      width: clamp(12px, 3.2cqi, 19px);
      height: clamp(19px, 5.2cqi, 30px);
      font-size: clamp(10px, 2.7cqi, 15px);
    }
    .ftlaw .push { margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ftlede { opacity: 1; filter: none; transform: none; transition: none; }
    .ftlede:hover i { animation: none; }
  }

  /* ================= Services — three treatments ================= */
  .services {
    position: relative;
    z-index: 1;
    padding: clamp(80px, 11cqi, 190px) 0 clamp(70px, 9cqi, 150px);
  }
  .svchead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 0 3.2cqi clamp(26px, 3.4cqi, 56px);
  }
  .svchead h2 {
    margin: 0;
    font-weight: 500;
    font-size: clamp(28px, 4.6cqi, 66px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--mute);
  }
  .svchead h2 b { font-weight: 500; color: var(--cloud); }
  .svchead .note {
    font-family: var(--mono);
    font-size: clamp(9px, 1.2cqi, 11px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute-dim);
    white-space: nowrap;
  }

  .svc { display: block; text-decoration: none; color: inherit; }
  .svc .nm {
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--cloud);
    transition: color .3s ease;
  }
  .svc .sub {
    font-family: var(--mono);
    font-size: clamp(9.5px, 1.15cqi, 12px);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mute);
    transition: color .3s ease;
  }
  .svc .idx {
    font-family: var(--mono);
    font-size: clamp(9px, 1.05cqi, 11px);
    letter-spacing: 0.12em;
    color: var(--mute-dim);
    transition: color .3s ease;
  }
  .svc:hover .idx { color: var(--orange); }
  .svc:hover .sub { color: rgba(252, 252, 252, 0.82); }
  .svc:focus-visible { outline: 1px solid var(--orange); outline-offset: -2px; }

  /* ---- B · Reveal: the sub-items open on hover ---- */
  [data-svc="b"] .svclist .svc {
    /* one grid for the row: the number holds column one, and the name and its
       line share column two, so the subtitle starts where the name starts */
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(12px, 1.8cqi, 32px);
    align-items: baseline;
    padding: clamp(20px, 2.8cqi, 46px) 3.2cqi;
    border-top: 1px solid var(--hair);
    position: relative;
    /* the row is the window: whatever the effect draws is clipped by the
       rules above and below it, and nothing bleeds into its neighbours */
    overflow: hidden;
    isolation: isolate;
  }
  .svc canvas.rowfx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
  }
  .svc.fxon canvas.rowfx { opacity: 1; }
  /* display: contents leaves .top without a box, so the stacking goes on the
     pieces themselves */
  [data-svc="b"] .svc .idx,
  [data-svc="b"] .svc .nm,
  [data-svc="b"] .svc .subwrap { position: relative; z-index: 2; }
  @media (prefers-reduced-motion: reduce) { .svc canvas.rowfx { display: none; } }
  [data-svc="b"] .svclist .svc:last-child { border-bottom: 1px solid var(--hair); }
  [data-svc="b"] .svc .top { display: contents; }
  [data-svc="b"] .svc .idx { grid-column: 1; }
  [data-svc="b"] .svc .nm { grid-column: 2; }
  [data-svc="b"] .svc .nm { font-size: clamp(26px, 4.6cqi, 76px); line-height: 1; }
  [data-svc="b"] .svc .subwrap {
    grid-column: 2;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-svc="b"] .svc:hover .subwrap,
  [data-svc="b"] .svc:focus-visible .subwrap { grid-template-rows: 1fr; }
  [data-svc="b"] .svc .subinner { overflow: hidden; }
  [data-svc="b"] .svc .sub {
    display: block;
    padding-top: clamp(10px, 1.4cqi, 20px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .45s ease .06s, transform .45s cubic-bezier(0.16, 1, 0.3, 1) .06s;
  }
  [data-svc="b"] .svc:hover .sub,
  [data-svc="b"] .svc:focus-visible .sub { opacity: 1; transform: none; }
  [data-svc="b"] .svc .nm { color: var(--mute); }
  [data-svc="b"] .svc:hover .nm, [data-svc="b"] .svc:focus-visible .nm { color: var(--cloud); }

  @container (max-width: 700px) {
    .svchead { padding-left: 5cqi; padding-right: 5cqi; flex-direction: column; gap: 10px; }
    [data-svc="b"] .svclist .svc { padding-left: 5cqi; padding-right: 5cqi; }
    [data-svc="b"] .svc .subwrap { grid-template-rows: 1fr; }
    [data-svc="b"] .svc .sub { opacity: 1; transform: none; }
    [data-svc="b"] .svc .nm { color: var(--cloud); }
  }

  /* ================= Logo wall — three treatments =================
     Rows that never stop. Everything below is built on one marquee engine:
     positions are driven per frame in JS so a hover can ease the belt to a
     stop instead of snapping it, which is the whole point. */
  .logowall {
    position: relative;
    z-index: 1;
    padding: clamp(80px, 11cqi, 190px) 0 clamp(70px, 9cqi, 150px);
    overflow: hidden;
  }
  .wallhead { padding: 0 3.2cqi clamp(30px, 4cqi, 64px); }
  .wallhead h2 {
    margin: 0;
    font-weight: 500;
    /* sized to hold on one line at every width */
    font-size: clamp(22px, 3.4cqi, 58px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--mute);
    white-space: nowrap;
  }
  .wallhead h2 span { display: inline-block; }
  .wallhead h2 .p1 { color: var(--cloud); }
  .wallhead h2 .p2 {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(8px);
    transition: opacity .9s ease 1.15s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s,
                filter 1s ease 1.15s;
  }
  .wallhead.seen h2 .p2 { opacity: 1; transform: none; filter: none; }

  .belts { display: grid; gap: clamp(10px, 1.3cqi, 22px); }
  .mq {
    position: relative;
    overflow: hidden;
    /* the belt fades out at both edges instead of being cut */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .mqtrack {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
  }
  .lg {
    flex: none;
    display: grid;
    place-items: center;
    position: relative;
    cursor: default;
  }
  .lg img {
    max-width: 100%;
    width: auto;
    display: block;
    filter: grayscale(1) invert(1);
    opacity: 0.44;
    transition: opacity .35s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* --k and the nudge come from measuring each mark's own ink; the artwork
     arrives with wildly different amounts of padding baked into its canvas */
  .lg img { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--k, 1)); }
  .lg:hover img { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(calc(var(--k, 1) * 1.06)); }
  /* the name surfaces under the mark on hover */
  .lg .tag {
    position: absolute;
    left: 50%;
    bottom: clamp(2px, 0.5cqi, 8px);
    transform: translate(-50%, 6px);
    font-family: var(--mono);
    font-size: clamp(8px, 0.85cqi, 10px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .3s ease, transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lg:hover .tag { opacity: 1; transform: translate(-50%, 0); }

  /* ---- A · Cells: each mark in its own bordered slot ---- */
  [data-lw="a"] .lg {
    height: clamp(100px, 11cqi, 178px);
    padding: 0 clamp(24px, 3cqi, 58px);
  }
  /* every mark gets the same box and fits inside it: the marks arrive at
     wildly different intrinsic sizes, so height alone leaves the wordmarks
     twice the size of the roundels */
  [data-lw="a"] .lg img {
    width: clamp(95px, 11.5cqi, 180px);
    height: clamp(29px, 3.7cqi, 60px);
    max-width: none;
    max-height: none;
    object-fit: contain;
  }

  /* ---- the invitation, riding inside the belt ---- */
  .slot {
    flex: none;
    display: grid;
    place-items: center;
    text-decoration: none;
    position: relative;
  }
  .slot {
    height: clamp(86px, 9.4cqi, 150px);
    padding: 0 clamp(22px, 2.8cqi, 52px);
  }
  .slot .inner {
    border: 1px dashed rgba(252, 252, 252, 0.17);
    padding: clamp(11px, 1.3cqi, 20px) clamp(16px, 2cqi, 30px);
  }
  .slot .inner { display: grid; gap: 4px; place-items: center; transition: border-color .35s ease; }
  .slot .l1 {
    font-size: clamp(12px, 1.35cqi, 16px);
    /* it sits at the same weight as the marks it rides between */
    color: rgba(252, 252, 252, 0.46);
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color .35s ease;
  }
  .slot:hover .l1 { color: var(--cloud); }
  .slot .l2 {
    font-family: var(--mono);
    font-size: clamp(8.5px, 0.95cqi, 11px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(252, 252, 252, 0.34);
    --flashback: rgba(252, 252, 252, 0.34);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }
  .slot .l2 .w { display: inline-block; white-space: nowrap; }
  .slot .l2 i { font-style: normal; display: inline; }
  .slot .l2 svg { transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), color .3s ease; }
  .slot:hover .l2 svg { transform: translateX(4px); color: var(--orange); }
  .slot:hover .inner { border-color: rgba(252, 252, 252, 0.38); }
  .slot:hover .l2 i, .slot:focus-visible .l2 i {
    animation: swooshFlash .62s ease both;
    animation-delay: calc(var(--i, 0) * 46ms);
  }
  @media (prefers-reduced-motion: reduce) { .slot:hover .l2 i { animation: none; } }
  .slot:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }

  @container (max-width: 700px) {
    .wallhead { padding-left: 5cqi; padding-right: 5cqi; }
    [data-lw="a"] .lg { width: clamp(120px, 40cqi, 190px); height: clamp(64px, 20cqi, 96px); }
  }

  /* ================= Testimonials — three treatments =================
     One voice at a time, always moving. */
  .voices {
    position: relative;
    z-index: 1;
    padding: clamp(70px, 9cqi, 160px) 0 clamp(80px, 10cqi, 170px);
    overflow: hidden;
    /* the second place the page breaks to paper, so the words carry weight */
    background: #F7F3EC;
    --v-ink: #1F1D19;
    --v-soft: #6B655B;
    --v-rule: rgba(35, 32, 25, 0.16);
  }
  .voices q, .voices .who b { color: var(--v-ink); }
  .voices .who span { color: var(--v-soft); }
  .voices .rail .bar { background: var(--v-rule); }
  .voices .rail .count { color: var(--v-soft); }
  .voices .rail button { border-color: var(--v-rule); color: var(--v-soft); }
  .voices .rail button:hover { color: var(--v-ink); border-color: rgba(35,32,25,.4); }
  /* beats .stage q, which sets the dark-ground colour */
  .voices .stage q, .voices .stage .who b { color: var(--v-ink); }
  .voices .stage .who span { color: var(--v-soft); }

  /* ---- A · Stage: one quote, auto-advancing, with a progress rail ---- */
  .stage {
    position: relative;
    display: none;
    padding: 0 3.2cqi;
  }
  [data-tm="a"] .stage { display: grid; }
  /* every slide occupies the same cell, so the block is as tall as the
     longest quote and nothing is ever clipped */
  .stage .slide {
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: clamp(18px, 2.4cqi, 40px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
  }
  .stage .slide.on { opacity: 1; pointer-events: auto; }
  /* the words carry the entrance, a line at a time; the delays are set in
     JS once we know where the text actually wrapped */
  .stage q .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    filter: blur(9px);
    transition: opacity .6s ease, transform .85s cubic-bezier(0.16, 1, 0.3, 1), filter .85s ease;
  }
  .stage .slide.on q .w { opacity: 1; transform: none; filter: none; }
  .stage .who {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .55s ease, transform .7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .stage .slide.on .who { opacity: 1; transform: none; }
  /* leaving is one move, not a staircase */
  .stage .slide:not(.on) q .w,
  .stage .slide:not(.on) .who { transition-delay: 0s !important; }
  .stage q {
    display: block;
    quotes: none;
    color: var(--v-ink);
    font-weight: 500;
    /* wider measure and a slightly smaller size: the long ones were running
       off the bottom of a fixed box */
    font-size: clamp(17px, 2.15cqi, 33px);
    line-height: 1.26;
    letter-spacing: -0.02em;
    color: var(--cloud);
    max-width: min(100%, 62cqi);
    margin-inline: auto;
    text-wrap: pretty;
  }
  .stage .who { max-width: min(100%, 62cqi); text-align: left; }
  /* every mention of the studio's own name can be swooshed */
  .voices { --flashback: var(--v-ink); }
  .stage q .w.swq { cursor: default; }
  .stage q .w.swq i { font-style: normal; }
  .stage q .w.swq:hover i,
  .stage q .w.swq.lit i {
    animation: swooshFlash .62s ease both;
    animation-delay: calc(var(--i, 0) * 46ms);
  }
  /* it stays pointable afterwards; the class only drives the first run */
  .stage q .w.swq.lit { animation: none; }
  @media (prefers-reduced-motion: reduce) { .stage q .w.swq:hover i { animation: none; } }
  .rail {
    display: none;
    align-items: center;
    gap: 12px;
    /* pulled in off the edges: it was reading as a page rule, not a control */
    width: min(100%, 62cqi);
    margin-inline: auto;
    padding: clamp(24px, 3cqi, 46px) 0 0;
  }
  [data-tm="a"] .rail { display: flex; }
  .rail .bar {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--hair);
    overflow: hidden;
  }
  .rail .bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: var(--orange);
    display: block;
  }
  .rail .count {
    font-family: var(--mono);
    font-size: clamp(9px, 1.05cqi, 11px);
    letter-spacing: 0.14em;
    color: var(--mute-dim);
    font-variant-numeric: tabular-nums;
  }
  .rail button {
    appearance: none;
    background: transparent;
    border: 1px solid var(--hair);
    color: var(--mute);
    width: 30px; height: 30px;
    display: grid; place-items: center;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .rail button:hover { color: var(--cloud); border-color: rgba(252,252,252,.32); }
  .rail button:active { transform: scale(0.94); }
  .rail button:focus-visible { outline: 1px solid var(--orange); outline-offset: 2px; }

  /* ---- shared attribution ---- */
  .who {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    font-family: var(--mono);
    font-size: clamp(9px, 1.05cqi, 11px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .who img {
    grid-row: span 2;
    width: clamp(52px, 5.9cqi, 86px);
    height: clamp(52px, 5.9cqi, 86px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    filter: grayscale(1);
    transition: filter .4s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .slide.on .who img, .qcard:hover .who img { filter: none; }
  .who b { font-weight: 400; color: var(--cloud); align-self: end; }
  .who span {
    color: var(--mute-dim);
    align-self: start;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: clamp(9.5px, 1.05cqi, 11.5px);
  }
  .voice-mark {
    font-family: var(--mono);
    font-size: clamp(9px, 1.05cqi, 11px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange);
  }

  @container (max-width: 700px) {
    /* 62cqi is a measure for a wide frame; on a phone it was holding the
       quote to 240 of the 390 available. The margin does the limiting here. */
    .stage { padding-left: 4.5cqi; padding-right: 4.5cqi; }
    .stage q, .stage .who { max-width: none; }
    .rail { width: 100%; padding-left: 4.5cqi; padding-right: 4.5cqi; }
    .stage .slide { inset: 0 5cqi; }
    .column .vrow { padding-left: 5cqi; padding-right: 5cqi; }
    .qcard { width: 78cqi; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stage .slide { transition: opacity .3s ease; transform: none; filter: none; }
    .stage .slide:not(.on) { visibility: hidden; }
  }

  /* ================= Mid-scroll CTA =================
     The field from the hero, at the hero's own speed, with a cursor halo that
     drags an inertia trail behind it. The line resolves out of blur on scroll;
     "Let's talk" borrows the exact treatment the word "lift" gets upstairs. */
  .cta {
    position: relative;
    z-index: 1;
    /* the field stops at the copy; the quiet band below it is what makes this
       read as its own section rather than as a lead-in to the next one */
    --ctafoot: clamp(64px, 8cqi, 130px);
    padding: clamp(90px, 13cqi, 220px) 3.2cqi calc(clamp(70px, 10cqi, 170px) + var(--ctafoot));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .cta canvas.ctafield {
    /* A canvas is a replaced element: constraining it with inset alone leaves
       it at its attribute size, and the JS writes that size from the measured
       box — a loop. It gets the full box, and a mask keeps the field out of
       the quiet band at the bottom. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ctafoot)), transparent calc(100% - var(--ctafoot)));
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ctafoot)), transparent calc(100% - var(--ctafoot)));
    pointer-events: none;
    z-index: 0;
  }
  .cta .inner { position: relative; z-index: 2; }

  .ctaline {
    margin: 0;
    font-weight: 500;
    font-size: clamp(26px, 4.4cqi, 64px);
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: var(--mute);
    text-wrap: balance;
    opacity: 0;
    filter: blur(16px);
    transform: translateY(12px);
    transition: opacity 1.5s ease, filter 1.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ctaline.seen { opacity: 1; filter: none; transform: none; }

  .talk {
    color: var(--cloud);
    text-decoration: none;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    transition: color 1.4s ease;
  }
  .talk.hot { color: var(--orange); transition: none; }
  .talk i { font-style: normal; }
  .talk::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.04em;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .talk:hover::after, .talk:focus-visible::after { transform: scaleX(1); }
  .talk:focus-visible { outline: none; }
  .onward {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: clamp(30px, 4.4cqi, 74px);
    font-family: var(--mono);
    font-size: clamp(9px, 1.2cqi, 11px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute-dim);
    text-decoration: none;
    opacity: 0;
    transition: opacity 1.2s ease .5s, color .3s ease;
  }
  .ctaline.seen ~ .onward { opacity: 1; }
  .onward:hover { color: var(--mute); }
  .onward svg { animation: nudge 2.6s ease-in-out infinite; }
  .onward svg { transform: translateY(-2px); }
  @keyframes nudge {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
  }
  @media (prefers-reduced-motion: reduce) { .onward svg { animation: none; } }
  /* same letter-by-letter flash as "lift", once it has settled to white */
  .flash:not(.hot):hover i,
  .flash:not(.hot):focus-visible i {
    animation: letterFlash .62s ease both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }

  @container (max-width: 700px) {
    .cta { padding-left: 5cqi; padding-right: 5cqi; }
    .talk::after { height: 1.5px; bottom: -0.09em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ctaline { opacity: 1; filter: none; transform: none; transition: none; }
    .flash:not(.hot):hover i { animation: none; }
  }


  @media (prefers-reduced-motion: reduce) {
    .playing * { animation: none !important; }
  }