/* =====================================================================
   Armaan Khosla  |  site.css

   THEMING
   Every colour is a token. :root is dark (the original). The
   [data-theme="light"] block is the whole light mode, so the rest of this
   file never needs to know which theme is running.

   Two light values are deliberate inversions, not flips:
   testimonial cards rest darker than the page and open into a warm
   off-white with a hairline ring, so the open card still reads as an
   object sitting on the page rather than a hole in it.

   MOTION
   --ease      Apple's standard curve.
   --ease-out  iOS sheet curve. Fast start, long soft landing. Anything
               that changes size or position.
   ===================================================================== */
:root{
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.32,.72,0,1);
  --dur:.72s;

  --w-rest:clamp(92px,8.5vw,132px);
  --w-open:clamp(330px,30vw,470px);
  --tileH:clamp(400px,60vh,640px);
  --gap:12px;

  --trap-a:polygon(0% 0%,100% 9%,100% 91%,0% 100%);
  --trap-b:polygon(0% 9%,100% 0%,100% 100%,0% 91%);
  --rect:polygon(0% 0%,100% 0%,100% 100%,0% 100%);

  /* the only colour on the page, and only keyboard users ever see it */
  --focus:#2997ff;

  /* ---------------- dark (default) ---------------- */
  --bg:#000;
  --ink:#fff; --ink-soft:#f5f5f7; --muted:#a1a1a6; --faint:#6e6e73;
  --line:rgba(255,255,255,.16);
  --rule-hover:rgba(255,255,255,.6);

  --icon-hover-bg:rgba(255,255,255,.1);
  --magnet-bg:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  --magnet-border:rgba(255,255,255,.24);
  --magnet-shadow:0 12px 30px -16px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.2);
  --magnet-origin-op:.38;

  --tile-bg:#0d0d0d;
  --tile-op:.5; --tile-dim-op:.22;
  --tile-shadow:0 2px 10px rgba(0,0,0,.5);
  --tile-active-shadow:0 44px 100px -32px rgba(255,255,255,.2),0 28px 62px -28px rgba(0,0,0,.84);
  --img-rest:grayscale(1) contrast(1.02) brightness(.96);
  --img-open:grayscale(0) contrast(1.05) saturate(1.06);
  --veil:rgba(0,0,0,.3);

  --cta-bg:rgba(255,255,255,.18); --cta-bg-hov:rgba(255,255,255,.26);
  --cta-border:rgba(255,255,255,.34); --cta-ink:#fff;
  --cta-shadow:0 12px 28px -12px rgba(0,0,0,.62);

  --chip-bg:rgba(255,255,255,.09); --chip-border:rgba(255,255,255,.16);

  /* resting tiles render at --tile-op, so these composite to roughly half this
     lightness on screen. They look too light here and right on the page. */
  --q-rest:radial-gradient(120% 78% at 16% 0%,rgba(255,255,255,.14),transparent 62%),
           linear-gradient(158deg,#8e8e9c 0%,#5f5f6c 46%,#3c3c46 100%);
  --q-rest-mark:#fff; --q-rest-mark-op:.82;
  --q-open:radial-gradient(circle at top left,rgba(255,255,255,.55),transparent 45%),
           linear-gradient(180deg,#fff,#f3f3f5);
  --q-open-text:rgba(0,0,0,.8);
  --q-open-strong:#000;
  --q-open-role:rgba(0,0,0,.5);
  --q-open-rule:rgba(0,0,0,.1);
  --q-open-mark:#000; --q-open-mark-op:.12;
  --q-open-shadow:0 44px 100px -32px rgba(255,255,255,.2),0 30px 80px rgba(0,0,0,.28),
                  0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.75);

  /* carousel controls, Apple's dark control material */
  --pill-bg:rgba(66,66,69,.72);
  --pill-bg-hov:rgba(82,82,86,.8);
  --pill-ink:rgba(255,255,255,.86);
  --dot:rgba(255,255,255,.4);
  --dot-hov:rgba(255,255,255,.62);
  --dot-fill:#f5f5f7;
}

/* ---------------- light ---------------- */
html[data-theme="light"]{
  --bg:#fff;
  --ink:#000; --ink-soft:#1d1d1f; --muted:#6e6e73; --faint:#a1a1a6;
  --line:rgba(0,0,0,.14);
  --rule-hover:rgba(0,0,0,.45);

  --icon-hover-bg:rgba(0,0,0,.055);
  --magnet-bg:linear-gradient(135deg,rgba(0,0,0,.075),rgba(0,0,0,.035));
  --magnet-border:rgba(0,0,0,.09);
  --magnet-shadow:0 8px 22px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.85);
  --magnet-origin-op:.5;

  --tile-bg:#ebe9e5;
  --tile-op:.62; --tile-dim-op:.28;
  --tile-shadow:0 2px 10px rgba(0,0,0,.08);
  --tile-active-shadow:0 46px 96px -46px rgba(0,0,0,.55),0 14px 32px -20px rgba(0,0,0,.24);
  --img-rest:grayscale(1) contrast(1.04) brightness(1.03);
  --img-open:grayscale(0) contrast(1.03) saturate(1.04);
  --veil:rgba(0,0,0,.26);

  --cta-bg:rgba(255,255,255,.9); --cta-bg-hov:#fff;
  --cta-border:rgba(0,0,0,.06); --cta-ink:#1d1d1f;
  --cta-shadow:0 14px 32px -16px rgba(0,0,0,.55);

  --chip-bg:#f5f5f7; --chip-border:rgba(0,0,0,.08);

  --q-rest:radial-gradient(120% 78% at 16% 0%,rgba(255,255,255,.55),transparent 62%),
           linear-gradient(158deg,#e9e6e1 0%,#dcd8d1 46%,#cbc6bc 100%);
  --q-rest-mark:#000; --q-rest-mark-op:.55;
  --q-open:radial-gradient(circle at top left,rgba(255,255,255,.85),transparent 48%),
           linear-gradient(180deg,#f5f4f1,#e9e7e2);
  --q-open-mark-op:.12;
  --q-open-shadow:0 48px 100px -44px rgba(0,0,0,.5),0 16px 36px -22px rgba(0,0,0,.22),
                  0 0 0 1px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);

  --pill-bg:rgba(232,232,237,.72);
  --pill-bg-hov:rgba(222,222,227,.86);
  --pill-ink:rgba(0,0,0,.72);
  --dot:rgba(0,0,0,.26);
  --dot-hov:rgba(0,0,0,.46);
  --dot-fill:#1d1d1f;
}

/* Theme swap. With View Transitions the browser crossfades two snapshots, so
   every element changes together. Without them it is a hard cut, because a
   dozen elements on different curves racing each other looks like a bug. */
html.theme-swap *,html.theme-swap *::before,html.theme-swap *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--ease)}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
@supports (height:100dvh){html,body{height:100dvh}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
::selection{background:var(--ink);color:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
svg{display:block}

:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:12px;z-index:999;padding:10px 16px;border-radius:999px;
  background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;text-decoration:none;
  transform:translateY(-160%);transition:transform .3s var(--ease-out)}
.skip:focus-visible{transform:none}
.ns-note{padding:28px;color:var(--muted);text-align:center;line-height:1.5}
.ns-note strong{color:var(--ink)}

/* ---------------- navigation ---------------- */
.nav{position:relative;z-index:240;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,48px);flex:0 0 auto;padding:clamp(12px,1.7vh,18px) clamp(22px,4vw,52px)}
.brand,.nav>nav{position:relative;z-index:1}
.brand{line-height:1.05}
.brand .name{position:relative;display:inline-grid;align-items:center;justify-items:start;
  text-decoration:none;border-radius:6px;
  font-size:clamp(21px,2.1vw,29px);font-weight:600;letter-spacing:-.022em;line-height:1.05;color:var(--ink)}
.brand .name>.name-en,.brand .name>.name-flip{grid-area:1/1}
.brand .name-en{transition:opacity .4s var(--ease),transform .55s var(--ease-out),filter .4s var(--ease)}
.brand .name-flip{display:inline-flex;align-items:center;white-space:nowrap;
  opacity:0;transform:translateY(.16em);filter:blur(4px);
  transition:opacity .45s var(--ease),transform .6s var(--ease-out),filter .45s var(--ease)}
.brand .name-hi{font-family:"Noto Sans Devanagari",var(--sans);font-size:.74em;line-height:1.1;letter-spacing:0}
.brand .name-gloss{position:relative;margin-left:9px;padding-left:14px;
  font-weight:400;font-size:12.5px;letter-spacing:0;color:var(--muted)}
.brand .name-gloss::before{content:"\00B7";position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-weight:700;font-size:1.5em;line-height:0;color:var(--faint)}
.brand .name-gloss em{font-style:normal;color:var(--ink);font-weight:600}
@media (hover:hover){
  .brand .name:hover .name-en{opacity:0;transform:translateY(-.14em);filter:blur(4px);transition-delay:.3s}
  .brand .name:hover .name-flip{opacity:1;transform:none;filter:blur(0);transition-delay:.3s}
}
.brand .name:focus-visible .name-en{opacity:0;transform:translateY(-.14em);filter:blur(4px)}
.brand .name:focus-visible .name-flip{opacity:1;transform:none;filter:blur(0)}
.brand .name:focus-visible{outline-offset:6px}
.brand .sub{margin-top:6px;font-size:clamp(10px,1vw,12px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand .sub a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
@media (hover:hover){.brand .sub a:hover{border-bottom-color:var(--rule-hover)}}
@media (max-width:560px){.brand .name-gloss{display:none}}

.nav-list{position:relative;list-style:none;display:flex;align-items:center;gap:clamp(2px,.65vw,8px);padding:4px}
.nav-list li{position:relative;z-index:1}
.nav-item{display:inline-block;padding:11px 14px;border-radius:999px;color:var(--muted);text-decoration:none;
  font-size:clamp(10.5px,1.02vw,12.5px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;white-space:nowrap;transition:color .3s var(--ease)}
.nav-item.is-hot,.nav-item.is-active{color:var(--ink)}
.nav-item:focus-visible{border-radius:999px}
.nav-social{display:flex;align-items:center;gap:4px;margin-left:4px}
.nav-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--muted);
  text-decoration:none;transition:color .3s var(--ease),background-color .3s var(--ease),transform .5s var(--ease-out)}
.nav-icon svg{width:20px;height:20px;fill:currentColor}
.nav-icon.is-hot{color:var(--ink);background:var(--icon-hover-bg)}
.nav-icon:active{transform:scale(.92);transition-duration:.12s}

.theme-toggle svg{grid-area:1/1;transition:opacity .3s var(--ease),transform .6s var(--ease-out)}
.theme-toggle .ico-moon{opacity:0;transform:rotate(-60deg) scale(.5)}
html[data-theme="light"] .theme-toggle .ico-sun{opacity:0;transform:rotate(60deg) scale(.5)}
html[data-theme="light"] .theme-toggle .ico-moon{opacity:1;transform:none}

.nav-magnet{position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;
  background:var(--magnet-bg);border:1px solid var(--magnet-border);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:var(--magnet-shadow);opacity:0;pointer-events:none;z-index:0;
  transition:transform .55s var(--ease-out),width .55s var(--ease-out),height .55s var(--ease-out),opacity .35s var(--ease)}
.nav-magnet.at-origin{opacity:var(--magnet-origin-op)}
.nav-magnet.no-anim{transition:none}

/* ---------------- main ---------------- */
main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(4px,.8vh,12px) clamp(22px,5vw,90px) clamp(14px,2.4vh,28px)}
.reel-wrap{flex:0 1 auto;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;
  perspective:1600px;perspective-origin:50% 44%}
.strip{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--gap);
  max-width:100%;padding:4px 0 8px;transform-style:preserve-3d}
.strip:focus-visible{outline:none}

/* the page fades up once, on load, instead of popping in */
.strip,.base{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}
.base{transition-delay:.12s}
body.ready .strip,body.ready .base{opacity:1;transform:none}

/* --w and --hs are written per tile by sizeTiles(); CSS values are the fallback */
.tile{position:relative;flex:0 0 auto;overflow:hidden;background:var(--tile-bg);
  width:var(--w,var(--w-rest));height:calc(var(--tileH) * var(--hs,1));
  transform:translateY(var(--y,0)) translateZ(var(--z,0px)) rotateY(var(--curve,0deg));
  transform-style:preserve-3d;will-change:transform;
  -webkit-clip-path:var(--clip);clip-path:var(--clip);
  opacity:var(--tile-op);box-shadow:var(--tile-shadow);
  transition:width var(--dur) var(--ease-out),height var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),opacity .5s var(--ease),
    -webkit-clip-path var(--dur) var(--ease-out),clip-path var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);filter:var(--img-rest);transform:scale(var(--zoom,1.14));
  transition:filter var(--dur) var(--ease),transform 1s var(--ease-out),object-position var(--dur) var(--ease-out)}
.tile.no-img img{display:none}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--veil) 100%);pointer-events:none}

.tile.active{transform:translateY(0) translateZ(var(--z,24px)) rotateY(0deg);
  -webkit-clip-path:var(--rect);clip-path:var(--rect);
  box-shadow:var(--tile-active-shadow);opacity:1;z-index:4}
.tile.active img{object-position:var(--pos-open,var(--pos,50% 50%));filter:var(--img-open);transform:scale(1)}
.strip.engaged .tile:not(.active){opacity:var(--tile-dim-op)}
@media (hover:hover){.strip.engaged .tile:not(.active):hover{opacity:calc(var(--tile-dim-op) + .12)}}
.tile:focus-visible{outline-offset:6px}

/* optional link pill, only on tiles with a `link` in content.js */
.tile-cta{position:absolute;left:50%;bottom:24px;z-index:3;
  transform:translateX(-50%) translateY(10px) scale(.96);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:11px 18px 11px 20px;border-radius:999px;
  background:var(--cta-bg);border:1px solid var(--cta-border);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  color:var(--cta-ink);font-weight:500;font-size:14px;letter-spacing:-.01em;
  box-shadow:var(--cta-shadow);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .6s var(--ease-out),background-color .3s var(--ease)}
.tile-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease-out)}
.tile.active .tile-cta{opacity:1;transform:translateX(-50%) translateY(0) scale(1);transition-delay:.18s}
@media (hover:hover){
  .tile.active:hover .tile-cta{background:var(--cta-bg-hov)}
  .tile.active:hover .tile-cta svg{transform:translateX(2px)}
}

/* ---------------- testimonial cards ----------------
   The open paper is a ::before overlay that fades in, because CSS can't
   interpolate between two gradients. Opacity can, so the crossfade is real. */
.tile.is-quote{background:var(--q-rest)}
.qcard{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:clamp(30px,2.9vw,44px) clamp(28px,2.7vw,42px)}
.qcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:var(--q-open);transition:opacity var(--dur) var(--ease)}
.tile.is-quote.active .qcard::before{opacity:1}
.tile.is-quote.active{box-shadow:var(--q-open-shadow)}

/* At rest the mark IS the card, centred and scaled to fit the sliver. Open, it
   slides to the corner at full size. -36% rather than -50% because a quote
   glyph's ink sits high in its em box. */
.qbg{position:absolute;top:50%;left:50%;z-index:1;pointer-events:none;
  transform:translate(-50%,-36%) scale(.46);
  font-weight:700;font-size:clamp(132px,14vw,186px);line-height:1;
  color:var(--q-rest-mark);opacity:var(--q-rest-mark-op);
  transition:color .45s var(--ease),opacity .45s var(--ease),
    top var(--dur) var(--ease-out),left var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.tile.is-quote.active .qbg{top:clamp(-10px,-.6vw,-2px);left:clamp(10px,1.7vw,26px);
  transform:none;color:var(--q-open-mark);opacity:var(--q-open-mark-op)}

.qfull{position:relative;z-index:2;width:100%;max-width:430px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;transform:translateY(10px);filter:blur(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease)}
.tile.is-quote.active .qfull{opacity:1;transform:none;filter:none;
  transition:opacity .5s var(--ease) .22s,transform .7s var(--ease-out) .22s,filter .5s var(--ease) .22s}
/* 1.3vw tracks --w-open (30vw), so the type holds a constant share of the card */
.qtext{font-weight:450;font-size:clamp(15px,1.3vw,20px);line-height:1.62;letter-spacing:-.011em;
  color:var(--q-open-text);text-wrap:pretty;hyphens:manual}
.qtext strong{display:block;margin:.6em 0;font-size:1.45em;line-height:1.16;letter-spacing:-.028em;
  font-weight:650;color:var(--q-open-strong);text-wrap:balance}
.qattr{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:5px;
  margin-top:clamp(22px,2.2vw,30px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--q-open-rule)}
.qname{font-weight:600;color:var(--q-open-strong);font-size:clamp(13.5px,1.4vw,16px);letter-spacing:-.014em}
.qrole{font-weight:500;color:var(--q-open-role);font-size:clamp(10.5px,1vw,12px);text-transform:uppercase;letter-spacing:.14em}

/* ---------------- caption ---------------- */
.base{flex:0 0 auto;width:min(92vw,var(--caption-w,680px));text-align:center;margin-top:clamp(8px,1.4vh,18px)}
/* fixed height, so the controls below never jump when a caption changes length */
.stage{position:relative;height:clamp(112px,13vh,124px)}
.cap-inner{will-change:transform}
.cap-title{font-weight:600;font-size:clamp(21px,2.3vw,30px);line-height:1.14;letter-spacing:-.024em;
  color:var(--ink);text-wrap:balance;min-height:1.14em;
  transition:opacity .28s var(--ease),transform .5s var(--ease-out),filter .28s var(--ease)}
.cap-title strong{font-weight:700}
.cap.swap .cap-title{opacity:0;transform:translateY(6px);filter:blur(5px);transition-duration:.16s}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:14px auto 0;width:100%}
.chip{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;
  background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--ink-soft);
  font-weight:500;font-size:13.5px;letter-spacing:-.006em;white-space:nowrap;line-height:1.1;
  opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .4s var(--ease),transform .6s var(--ease-out)}
.chips.in .chip{opacity:1;transform:none}
.cap.swap .chip{opacity:0;transition-duration:.14s;transition-delay:0s!important}

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  .nav{align-items:flex-start;padding-inline:clamp(18px,5vw,30px)}
  .nav-list{flex-wrap:wrap;justify-content:flex-end;gap:2px}
  .nav-item{font-size:10.5px;letter-spacing:.1em;padding:10px 12px}
  .nav-icon{width:38px;height:38px}
  .nav{gap:8px}
  .nav-social{margin-left:0;gap:0}
  .brand{min-width:0}
  .brand .sub{font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
  .nav-icon svg{width:19px;height:19px}
}
@media (max-width:900px){
  body{overflow:auto}
  main{justify-content:flex-start;padding-top:6px}
  main{padding-inline:0}
  .reel-wrap{justify-content:flex-start;flex:0 0 auto}
  /* mobile scrolls sideways, so sizeTiles() steps aside and these win */
  .strip{max-width:none;width:100vw;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;
    padding:26px clamp(18px,6vw,30px) 30px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip.gliding{scroll-snap-type:none}
  .tile{scroll-snap-align:center;--w-rest:clamp(96px,28vw,132px);--w-open:min(80vw,410px);--tileH:clamp(400px,56vh,560px);
    width:var(--w-rest);height:var(--tileH)}
  .tile.active{width:var(--w-open)}
  .base{margin-top:clamp(6px,1.4vh,14px)}
  .stage{height:132px}
  .cap-title{font-size:22px}
}
@media (max-height:760px) and (min-width:901px){
  :root{--tileH:clamp(360px,54vh,460px)}
  .qcard{padding:clamp(20px,2vw,30px) clamp(24px,2.4vw,36px)}
  .qtext{font-size:clamp(13.5px,1.08vw,16px);line-height:1.54}
  .qtext strong{margin:.5em 0;font-size:1.4em}
  .qattr{margin-top:clamp(14px,1.5vw,20px);padding-top:clamp(12px,1.3vw,17px)}
  .qbg{font-size:clamp(114px,11.5vw,158px)}
  .tile.is-quote.active .qbg{top:-4px;left:clamp(10px,1.5vw,22px)}
  .stage{height:104px}
  .cap-title{font-size:clamp(19px,2vw,25px)}
  .chips{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;transition-delay:0ms!important;
    animation-duration:.001ms!important;scroll-behavior:auto!important}
  .strip,.base{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav-magnet,.tile-cta{-webkit-backdrop-filter:none;backdrop-filter:none}
}