/* ============================================================================
   Las Vegas Express Auto Glass — "NIGHT GLASS"

   DIRECTION   Night Glass
   OBJECT      a windshield after dark: near-black violet glass, white
               instrument type, one plum light. The white sections are the same
               glass seen in daylight.
   TONE        direct · modern · reassuring
   SIGNATURE   every dark band is glass — it opens with a 2px plum seam at its
               top edge, and the single accent is reserved for actions,
               numerals and the one coloured line of the headline. Nothing else
               in the page is coloured.

   Built to match a client-supplied reference comp. Structure, section shapes,
   card treatment, radii and shadow weight follow that comp; its layout values
   were read off the file's pixels rather than eyeballed.

   THE ACCENT IS NOT THE COMP'S BLUE. The client asked for the purple from the
   van livery in their own hero photograph, so --plum is SAMPLED from that
   shoot: the branded purple clusters at hue ~300-313, #723c66 / #602a66 /
   #6c3c6c across the eleven service photographs and the wide hero crop. The
   dark ground moved off the comp's navy to a violet-black so the accent sits
   in its own temperature instead of fighting a cool blue ground.

   Typefaces are NOT the comp's either — the page is set in the FUNNEL
   superfamily: Funnel Display for every heading, numeral and label, Funnel Sans
   for body, UI and buttons. One superfamily with two optical roles beats two
   neutral sans families, which is what the first pass (Schibsted Grotesk + Plus
   Jakarta Sans) actually was: at a glance they read as one face at different
   sizes, so the pairing did no work. Neither Funnel face is used by any other
   site on this account (the client tracks typeface reuse), and the system was
   chosen by rendering five candidates with this page's real H1, H2, cards and
   numerals and comparing screenshots — not from memory.
   ========================================================================= */

:root{
  /* the glass */
  --coal:#161320; --coal-2:#0f0d16; --coal-3:#241d2e; --coal-4:#2e2639;
  /* the light */
  --plum:#6d2f70; --plum-vv:#a24bb8; --plum-dp:#4f1f55; --plum-br:#c98fd8; --plum-tint:#f4eaf7;
  /* small accent text sitting on PHOTOGRAPHY needs a lighter step: --plum-br
     is 3.17:1 against the brightest pixel the hero text can cover, which is
     fine for a 31px headline and fails for a 13px label. */
  --plum-lt:#e3c2ec;
  /* daylight - the same glass seen by day. 2026-10-10: crisper than the first
     pass (a near-neutral pearl instead of lavender, deeper ink) so the light
     bands hold real contrast against the dark ones. An all-dark trial was
     rejected the same day: no light/dark rhythm, "whole site looks dark".
     --acc / --acc-2 are the accent AS TEXT on a light ground; on a dark one the
     .on-dark rules switch to --plum-br / --plum-lt. */
  --white:#fff; --panel:#f6f4f8; --panel-2:#ece8f0;
  --ink:#110e16; --ink-2:#2f2a37; --gray:#57505f;
  --line:#ebe7ef; --line-2:#dcd6e2;
  --acc:var(--plum); --acc-2:var(--plum-dp);
  --glass:linear-gradient(165deg,rgba(255,255,255,.97),rgba(255,255,255,.78));
  --glass-bd:rgba(17,14,22,.075);
  --glass-hi:inset 0 1px 0 #fff,0 1px 2px rgba(17,14,22,.04),0 22px 44px -30px rgba(79,31,85,.32);
  --r-xl:26px;
  --line-dk:rgba(255,255,255,.13); --line-dk2:rgba(255,255,255,.22);

  --ease:cubic-bezier(.16,1,.3,1);          /* ONE curve: fast attack, long settle */
  --spring:cubic-bezier(.34,1.56,.64,1);    /* small accents only, never layout */
  /* timing tokens — durations are part of the system, not per-rule guesses */
  --t-feedback:.2s; --t-gesture:.45s; --t-entrance:.95s; --t-drawn:1.5s;
  --wrap:1240px; --gut:clamp(18px,4.4vw,52px); --sec:clamp(80px,10.5vh,138px);
  --bar:74px; --r:12px; --r-sm:8px; --r-lg:18px;
  --sh:0 1px 2px rgba(21,17,28,.05), 0 6px 18px -10px rgba(21,17,28,.18);
  --sh-2:0 2px 6px rgba(21,17,28,.07), 0 24px 44px -22px rgba(21,17,28,.3);

  /* one superfamily, two optical roles — see the note in inc/header.php */
  /* 2026-10-21: GENERAL SANS (Indian Type Foundry, via Fontshare - ITF Free Font License,
     self-hosted in /assets/fonts) for every heading, title, label and numeral; the client picked
     it from a rendered specimen of seven faces after rejecting Funnel Display and Lexend Giga.
     Its hyphen measures 0.36em, under the 0.40em "reads as a dash" line, so no hyphen face. */
  --f-disp:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-hero:var(--f-disp);
  --f-sans:'Funnel Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* tracking scale: display type wants negative, body wants none, small
     furniture wants generous positive. Tokens so the ladder cannot drift. */
  --tr-xl:-.034em; --tr-lg:-.028em; --tr-md:-.018em; --tr-sm:0; --tr-label:.17em;
}

/* General Sans, self-hosted (see --f-disp) */
@font-face{font-family:'General Sans';src:url(/assets/fonts/general-sans-200.woff2) format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/general-sans-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/general-sans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/general-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/general-sans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/general-sans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f-sans);font-size:16px;line-height:1.64;
  font-optical-sizing:auto;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden}
/* figures inside running text must not jitter or shrink */
.tnum,.foot__tel,.card__n,.steps__n,.faq__n,.qp__q{font-variant-numeric:tabular-nums}
img,svg,iframe{max-width:100%}
img{height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;margin:0;
  letter-spacing:var(--tr-md);line-height:1.14;text-wrap:balance;
  font-optical-sizing:auto}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
/* every in-page anchor lands UNDER a sticky bar unless it says otherwise */
section[id],.qcard{scroll-margin-top:calc(var(--bar) + 14px)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--plum);
  color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}

/* ===================================================== type ladder ======== */
.h2{font-size:clamp(29px,3.8vw,47px);line-height:1.04;letter-spacing:var(--tr-lg);
  font-weight:700}
.h2 em{font-style:normal;color:var(--acc)}          /* the name, in the light */
.h2--sm{font-size:clamp(22px,2.4vw,29px)}
.h3{font-size:clamp(18px,1.5vw,21.5px);line-height:1.22;letter-spacing:var(--tr-md);
  font-weight:600}
.eyebrow{display:block;font-family:var(--f-disp);font-size:11.8px;font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--acc);
  margin-bottom:15px;line-height:1.4}
.lede{font-size:clamp(16.4px,1.2vw,18.2px);line-height:1.6;color:var(--gray);
  max-width:56ch;text-wrap:pretty;letter-spacing:var(--tr-sm)}
.copy{font-size:16px;line-height:1.68;color:var(--gray);max-width:62ch;text-wrap:pretty}
.copy + .copy{margin-top:14px}
.copy a{color:var(--acc);font-weight:600;text-underline-offset:3px}

/* on the glass */
.on-dark{color:#fff}
.on-dark .eyebrow{color:var(--plum-br)}
.on-dark .h2 em{color:var(--plum-br)}
.on-dark .lede,.on-dark .copy{color:rgba(255,255,255,.84)}
.on-dark .copy a{color:var(--plum-br)}

/* ===================================================== reveals =========== */
/* Quick and early. site.js fires a reveal as its top reaches the fold, and
   on this curve the fade is past half within ~0.1s: content arrives as it
   enters rather than after it has been sitting empty on screen. The rise
   settles a little slower than the fade so it still reads as a settle, not a
   pop. (Was .9s / 26px, fired late - read as "blank, then it comes".) */
.js .ro{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .7s var(--ease)}
.js .ro.in{opacity:1;transform:none}
.js .ro.d1{transition-delay:.05s} .js .ro.d2{transition-delay:.1s}
.js .ro.d3{transition-delay:.15s} .js .ro.d4{transition-delay:.2s}

/* ===================================================== buttons =========== */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--plum);color:#fff;font-family:var(--f-sans);font-weight:600;
  font-size:15px;line-height:1;letter-spacing:-.004em;
  padding:15px 24px;border-radius:var(--r-sm);
  text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(21,17,28,.12), 0 10px 22px -12px rgba(162,75,184,.75);
  transition:background .2s var(--ease),transform .4s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  box-shadow:0 2px 4px rgba(21,17,28,.14), 0 16px 28px -14px rgba(162,75,184,.8);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .4s var(--ease)}
.btn--lg{padding:17px 28px;font-size:16px}
.btn--ghost{background:transparent;color:#fff;box-shadow:none;
  border:1.5px solid var(--line-dk2)}
.btn--dark{background:var(--coal);box-shadow:none}
@media (hover:hover){
  .btn:hover{background:var(--plum-dp);transform:translateY(-2px)}
  .btn:hover::after{opacity:1}
  .btn:hover svg{transform:translateX(4px)}
  .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
  .btn--dark:hover{background:var(--coal-3)}
}

.btn:focus-visible{background:var(--plum-dp);transform:translateY(-2px)}
.btn:focus-visible::after{opacity:1}
.btn:focus-visible svg{transform:translateX(4px)}

/* text link with an arrow */
.lk{display:inline-flex;align-items:center;gap:7px;color:var(--acc);
  font-weight:600;font-size:14.5px;text-decoration:none;line-height:1.3;
  letter-spacing:-.006em}
.lk svg{width:16px;height:16px;flex:none;transition:transform .4s var(--ease)}
.on-dark .lk{color:var(--plum-br)}
@media (hover:hover){ .lk:hover{text-decoration:underline;text-underline-offset:3px}
  .lk:hover svg{transform:translateX(4px)} }
.lk:focus-visible{text-decoration:underline;text-underline-offset:3px}
.lk:focus-visible svg{transform:translateX(4px)}

/* ===================================================== cards ============= */
.card{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;box-shadow:var(--sh);
  transition:transform .45s var(--ease),border-color .25s var(--ease)}
/* the lift shadow lives on a pseudo-element and fades — animating box-shadow
   itself repaints on every frame (design-method 5.6) */
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
.card__ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;background:var(--panel-2)}
.card__ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.js .card.ro .card__n{opacity:0;transform:translateY(-6px) scale(.9);
  transition:opacity var(--t-gesture) var(--ease) .18s,
             transform var(--t-gesture) var(--spring) .18s}
.js .card.ro.in .card__n{opacity:1;transform:none}
.card__n{position:absolute;left:12px;top:12px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:29px;height:29px;padding:0 8px;border-radius:7px;
  background:var(--plum);color:#fff;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.card__ph::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,12,21,0) 44%,rgba(16,12,21,.42) 100%);
  opacity:0;transition:opacity .45s var(--ease)}
.card__bd{display:flex;flex-direction:column;gap:9px;padding:22px 22px 24px;flex:1}
.card__t{font-size:19px;line-height:1.24}
.card__d{font-size:14.7px;line-height:1.6;color:var(--gray);flex:1;text-wrap:pretty}
.card__cta{margin-top:3px}

/* The lead plate: entry 01 at double width with the full-size crop. Keeps an
   eleven-item grid from reading as eleven identical tiles. */
.card--feat{grid-column:span 2}
.card--feat .card__ph{aspect-ratio:16/9}
.card--feat .card__bd{padding:26px 28px 28px}
.card--feat .card__t{font-size:clamp(21px,1.9vw,26px)}
.card--feat .card__d{font-size:15.4px;max-width:54ch}
/* the card sharing row 1 with the lead plate is much shorter than it; let its
   photograph take the slack instead of leaving a hole under the body copy */
.card--feat + .card .card__ph{aspect-ratio:auto;flex:1 1 auto;min-height:210px}
@media (max-width:1000px){ .card--feat{grid-column:span 2}
  .card--feat + .card .card__ph{aspect-ratio:4/3;flex:none} }
@media (max-width:640px){ .card--feat{grid-column:span 1}
  .card--feat .card__ph{aspect-ratio:4/3} }
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:var(--plum-tint)}
  .card:hover::after{opacity:1}
  .card:hover .card__ph img{transform:scale(1.05)}
  .card:hover .card__ph::after{opacity:1}
  .card:hover .card__cta{text-decoration:underline;text-underline-offset:3px}
  .card:hover .card__cta svg{transform:translateX(4px)}
}
/* ---- GAP: focus parity. Every hover gesture needs a keyboard equivalent, and
   it must sit OUTSIDE @media(hover:hover) — keyboards exist on touch devices. */
.card:focus-visible{transform:translateY(-4px);border-color:var(--plum-tint)}
.card:focus-visible::after{opacity:1}
.card:focus-visible .card__ph img{transform:scale(1.05)}
.card:focus-visible .card__cta svg{transform:translateX(4px)}

/* ===================================================== feature list ====== */
.feat{display:grid;gap:22px 30px}
.feat__i{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.feat__ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:9px;background:var(--plum-tint);color:var(--acc)}
.feat__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.feat__t{display:block;font-family:var(--f-disp);font-weight:600;font-size:16.2px;
  letter-spacing:var(--tr-md);line-height:1.3;margin-bottom:4px}
.feat__d{display:block;font-size:14.5px;line-height:1.58;color:var(--gray);text-wrap:pretty}
.on-dark .feat__ic{background:rgba(201,143,216,.15);color:var(--plum-br)}
.on-dark .feat__d{color:rgba(255,255,255,.76)}

/* ===================================================== the glass band ==== */
.dark{position:relative;background:var(--coal);color:#fff}
.dark::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--plum-vv) 0%,var(--plum-br) 42%,transparent 88%)}
/* material on the one flat inverted band — felt, not seen */
.dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.017) 0 1px,transparent 1px 12px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E") 0 0/180px 180px}
.dark > .wrap{position:relative;z-index:1}

/* ===================================================== masthead ========== */
.bar{position:sticky;top:0;z-index:70;background:var(--coal);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s var(--ease)}
.bar.stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.9);background:rgba(22,19,32,.97)}
/* no backdrop-filter: at 96% opacity the blur was invisible, and re-blurring
   whatever scrolls under the bar costs a pass on every scroll frame */
/* reading progress — the only continuously-updated element on the page, and it
   is transform-only so it costs nothing in the scroll loop */
.bar__pg{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--plum-vv),var(--plum-br))}
.bar__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);min-height:var(--bar)}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none}
.brand__mk{width:34px;height:34px;flex:none}
.brand__tx{display:block;font-family:var(--f-disp);font-weight:700;font-size:17px;
  letter-spacing:var(--tr-lg);line-height:1.02}
.brand__sub{display:block;font-family:var(--f-disp);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--plum-br);line-height:1.6}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__item{position:relative}
.nav__lk{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.88);
  font-size:14.6px;font-weight:600;text-decoration:none;padding:10px 13px;border-radius:var(--r-sm);
  transition:color .2s var(--ease),background .2s var(--ease)}
.nav__cv{width:10px;height:10px;transition:transform .3s var(--ease)}
[data-open="1"] .nav__cv{transform:rotate(180deg)}
.nav__lk[aria-current="page"]{color:var(--plum-br)}
@media (hover:hover){ .nav__lk:hover{color:#fff;background:rgba(255,255,255,.07)} }
.nav__lk:focus-visible{color:#fff;background:rgba(255,255,255,.07)}

.menu{position:absolute;top:calc(100% + 9px);left:0;z-index:80;
  min-width:288px;opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
[data-open="1"] .menu{opacity:1;visibility:visible;transform:none}
.menu__in{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 60px -28px rgba(18,14,24,.55);padding:14px;overflow:auto}
.menu__hd{display:block;font-family:var(--f-disp);font-size:10.6px;font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gray);
  padding:4px 10px 11px}
.menu__gr{display:grid;gap:1px}
.menu--2 .menu__gr{grid-template-columns:1fr 1fr;gap:1px 8px;min-width:470px}
.menu__lk{display:block;padding:9px 10px;border-radius:7px;font-size:14.2px;
  font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease)}
.menu__lk[aria-current="page"]{color:var(--acc);font-weight:700;background:var(--plum-tint)}
@media (hover:hover){ .menu__lk:hover{background:var(--panel);color:var(--ink)} }
.menu__lk:focus-visible{background:var(--panel);color:var(--ink)}

.bar__cta{margin-left:4px;flex:none}
.burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;color:#fff;
  border:1px solid var(--line-dk);margin-left:auto}
.burger span,.burger span::before,.burger span::after{display:block;width:17px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px} .burger span::after{top:6px}
[aria-expanded="true"].burger span{background:transparent}
[aria-expanded="true"].burger span::before{transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"].burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile panel */
.panel{position:fixed;left:0;right:0;top:var(--bar);bottom:0;z-index:69;
  background:var(--coal);overflow-y:auto;padding:8px var(--gut) 34px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.panel.on{opacity:1;visibility:visible;transform:none}
.acc{border-bottom:1px solid var(--line-dk)}
.acc__bt{display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:16px 2px;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:17px}
.acc__bt .nav__cv{width:12px;height:12px;color:var(--plum-br)}
.acc__bt[aria-expanded="true"] .nav__cv{transform:rotate(180deg)}
.acc__bd{display:none;padding:2px 0 14px}
.acc__bd.on{display:grid;gap:1px}
.acc__bd a{display:block;padding:10px 12px;border-radius:7px;font-size:14.6px;
  color:rgba(255,255,255,.8);text-decoration:none;background:rgba(255,255,255,.04)}
.acc__bd a[aria-current="page"]{color:var(--plum-br);font-weight:700}
.panel__lk{display:block;padding:16px 2px;border-bottom:1px solid var(--line-dk);
  font-family:var(--f-disp);font-weight:700;font-size:17px;color:#fff;text-decoration:none}
.panel__cta{display:grid;gap:10px;margin-top:22px}
.panel__cta .btn{justify-content:center}

/* call button, phone screens */
.fab{position:fixed;right:16px;bottom:16px;z-index:68;display:none;
  align-items:center;gap:8px;background:var(--plum);color:#fff;
  font-weight:700;font-size:14.5px;padding:13px 18px;border-radius:999px;
  text-decoration:none;box-shadow:0 12px 30px -12px rgba(0,0,0,.7)}
.fab svg{width:16px;height:16px}
.fab.hide{display:none!important}

@media (max-width:1080px){
  .nav{display:none}
  .bar__cta{margin-left:auto}
  .burger{display:inline-flex}
}
@media (max-width:620px){
  .bar__cta{display:none}
  .fab{display:inline-flex}
  .brand__tx{font-size:15px}
}

/* ===================================================== colophon ========== */
.foot{background:var(--coal-2);color:rgba(255,255,255,.72);
  padding:clamp(48px,6vw,72px) 0 26px;font-size:14.4px}
.foot__top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:clamp(26px,3.4vw,52px);padding-bottom:36px;border-bottom:1px solid var(--line-dk)}
.foot .brand{margin-bottom:16px}
.foot__tel{display:inline-flex;align-items:center;gap:9px;color:#fff;
  font-family:var(--f-disp);font-weight:700;font-size:22px;letter-spacing:var(--tr-lg);
  text-decoration:none;margin-bottom:8px}
.foot__tel svg{width:17px;height:17px;color:var(--plum-br)}
.foot__ln{display:block;font-size:14px;color:rgba(255,255,255,.66)}
.foot__hd{display:block;font-family:var(--f-disp);font-size:10.8px;font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:#fff;margin-bottom:15px}
.foot__ls{display:grid;gap:9px}
.foot__ls a{font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;
  transition:color .2s var(--ease)}
.foot__bot{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  padding-top:22px;font-size:13.4px;color:rgba(255,255,255,.58)}
.foot__set{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
.foot__set a{color:rgba(255,255,255,.72);text-decoration:none}
@media (hover:hover){ .foot__ls a:hover,.foot__set a:hover{color:var(--plum-br)} }
@media (max-width:900px){ .foot__top{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot__top{grid-template-columns:1fr} .foot__set{margin-left:0} }

/* a source list rendered inside long-form copy (FAQ answers, legal pages) */
.ilist{display:grid;gap:11px;margin-top:12px}
.ilist__i{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:15px;line-height:1.62;color:var(--gray)}
.ilist__n{font-size:12px;font-weight:700;color:var(--acc);padding-top:3px;
  font-variant-numeric:tabular-nums}
.ilist__t{color:var(--ink);font-weight:700}

/* ===================================================== material ========== */
/* Phase 6. Film grain over the whole page: soft-light so it reads on BOTH the
   violet-black bands and the white ones, at an opacity low enough not to move
   any computed contrast. pointer-events:none, and above the fixed chrome so the
   whole page shares one surface. */
/* Film grain lives ON the dark bands, as a plain background that scrolls with
   them. It used to be a position:fixed, full-viewport layer in
   mix-blend-mode:soft-light above everything - which made the browser re-blend
   the whole screen on every scroll frame and every animation frame, on every
   page. Measured (4x CPU): 68% of scroll frames over 33ms with it, 42% without.
   The grain was "felt, not seen"; on white it was invisible anyway. */

::selection{background:var(--plum);color:#fff}
::-moz-selection{background:var(--plum);color:#fff}

/* the scrollbar is part of the page on a dark-chromed site */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:var(--panel)}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
    border:3px solid var(--panel)}
  ::-webkit-scrollbar-thumb:hover{background:var(--plum)}
}
html{scrollbar-color:var(--line-2) var(--panel)}

/* ===================================================== a11y ============== */
:focus-visible{outline:2.5px solid var(--plum);outline-offset:3px;border-radius:3px}
.dark :focus-visible,.bar :focus-visible,.panel :focus-visible,.foot :focus-visible{
  outline-color:var(--plum-br)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .ro{opacity:1;transform:none}
}