/* mriaudio.com — the site's shared styles (tokens, type, buttons, header and Products panel, phone sheet, closing, footer).
   Taken verbatim from the approved homepage (home.html, 19 Oct 2026), which took its tokens and fonts from the quote page
   (growth/quote-flow/quote-page/mri-quote/assets/css/quote.css). Every page of the local prototype links this file; page-only
   styles stay in the page. Changing a rule here changes every page. */
/* Images carry width/height attributes for the layout-shift fix (19 Oct); the attributes keep the aspect ratio only — the height
   follows the CSS width. Zero specificity so any rule that sets a height still wins. */
:where(img[width][height]) { height: auto; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-VF.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --p400:#D0FFFB; --p500:#81D8D0; --p600:#52B7AE; --p700:#3F8E87; --p800:#2E645F; --p900:#194541;
  --black:#0D1819; --n20:#F8F8F8; --n50:#F2F2F2; --n100:#D9D9D9; --n200:#BFBFBF; --n400:#8C8C8C; --n500:#6B6B6B; --n600:#595959;
  --sans:"Mona Sans", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --bg:#06121c; --pad: clamp(16px, 3vw, 44px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { font: 400 16px/1.5 var(--sans); font-variation-settings: "opsz" 20; color: var(--black); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
a[href^="tel:"] { white-space: nowrap; }
[hidden] { display: none !important; }
.label { font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; }

/* Buttons, quote-page style: small radius, mono capitals, arrow */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 3px; border: 1px solid transparent;
       font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn svg { width: 13px; height: 13px; flex: none; }
.btn--primary { background: var(--p500); color: var(--p900); }
.btn--primary:hover { background: var(--p400); }
.btn--outline { border-color: currentColor; color: var(--p800); background: transparent; }
.btn--outline:hover { background: rgba(129,216,208,.12); }
.btn--ghost { color: inherit; padding: 0 4px; height: 40px; opacity: .85; }
.btn--ghost:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.btn--dark { background: var(--black); color: var(--p500); }
.btn--white { background: #fff; color: var(--black); }
.on-dark .btn--outline { color: var(--p500); }

/* Header — the agreed menu (Simon 2026-10-19): Products ▾ · Shop · Support · About us, then Get your quote; the cart only once it has items; no phone number (Simon 2026-10-19).
   Systems holds the two systems under their product names (Simon 2026-10-19); headphones and everything bought on its own are in the Shop.
   Only Systems opens (a click, or the pointer resting on it for half a second); the panel sits under the bar and leaves the page visible.
   Phones: logo, quote button, cart (when filled) and the menu button; the menu is a full-height sheet with Systems already expanded.
   Sized to the quote page's header (Simon 2026-10-16): desktop mark 45x56 + 30.5px wordmark in a 90px bar; phones a 56px bar */
:root { --hdr-h: 90px; }
@media (max-width: 900px) { :root { --hdr-h: 56px; } }
.hdr { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; height: var(--hdr-h); padding: 0 var(--pad); background: #fff; border-bottom: 1px solid var(--n100); }
.logo { display: flex; align-items: center; gap: 4px; text-decoration: none; color: #000; }
.logo img { height: 56px; width: auto; }
.logo span { font: 500 30.545px/1 var(--sans); letter-spacing: -1.5273px; font-variation-settings: "opsz" 20; } .logo b { font-weight: 700; }
.hdr nav { display: flex; gap: 32px; margin-left: auto; font-size: 16px; align-self: stretch; }
.hdr nav > a, .hdr nav > button { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; color: var(--n600); text-decoration: none; cursor: pointer; }
.hdr nav > a:hover, .hdr nav > button:hover, .hdr nav > .on { color: var(--black); }
.hdr nav > .on { border-bottom-color: var(--p500); }
.hdr nav button svg { width: 10px; height: 10px; transition: transform .2s; } .hdr nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr .tel { font: 400 14px/1 var(--mono); color: var(--n600); text-decoration: none; }
.hdr .cart { position: relative; display: grid; place-items: center; width: 28px; height: 28px; color: var(--black); }
.hdr .cart[data-count="0"] { display: none; }   /* outside the shop the cart shows only once something is in it; on shop pages it is always there (Simon 2026-10-19) */
.hdr .cart svg { width: 24px; height: 24px; }
.hdr .cart i { position: absolute; top: -4px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--p500); color: var(--p900); font: 500 10px/16px var(--mono); font-style: normal; text-align: center; }
.hdr .cart i:empty { display: none; }
.burger { display: none; }
/* The Products panel (Simon 2026-10-19): one panel, two groups named by how you get them — Systems (quote or demo) as two
   cards with copy, and Shop (buy online) as a list — so the quote button and the shop never need explaining. Proof under the cards. */
.panel { position: absolute; left: 0; right: 0; top: 100%; display: none; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 22px var(--pad) 26px; background: #fff; border-bottom: 1px solid var(--n100); box-shadow: 0 24px 50px rgba(13,24,25,.12); }
.panel.open { display: grid; }
.panel .label { color: var(--p800); display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; white-space: nowrap; }
.panel .label span { font: 400 12px/1 var(--mono); letter-spacing: .5px; text-transform: none; color: var(--n500); }
.panel .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel .tile { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; padding: 18px 20px 16px 16px; border-radius: 4px; background: var(--n20); text-decoration: none; color: var(--black); transition: background .15s; }
.panel .tile:hover { background: var(--n50); }
.panel .tile .pic { height: 180px; display: grid; place-items: center; align-self: center; }
.panel .tile .pic img { width: auto; height: auto; max-width: 100%; max-height: 180px; object-fit: contain; transition: transform .25s; }
.panel .tile:hover .pic img { transform: scale(1.03); }
.panel .tile h4 { font: 500 18px/1.2 var(--sans); letter-spacing: -.01em; margin-bottom: 8px; }
.panel .tile p { font-size: 13.5px; color: var(--n600); line-height: 1.45; max-width: 34ch; }
.panel .tile ul { list-style: none; margin: 10px 0 12px; display: grid; gap: 5px; }
.panel .tile li { font-size: 13px; color: var(--black); padding-left: 18px; position: relative; }
.panel .tile li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 5px; border-left: 1.6px solid var(--p600); border-bottom: 1.6px solid var(--p600); transform: rotate(-45deg); }
.panel .tile .go { font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--p800); }
.panel .tile .go::after { content: " →"; }
.panel .under { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--n50); }
.panel .proof { display: flex; gap: 32px; }
.panel .proof b { display: block; font: 300 24px/1 var(--sans); letter-spacing: -.03em; color: var(--black); }
.panel .proof span { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
.panel .acts { display: flex; gap: 22px; font-size: 14.5px; }
.panel .acts a, .panel .shop a { color: var(--black); text-decoration: none; }
.panel .acts a::after, .panel .shop a.all::after { content: " →"; color: var(--p800); }
.panel .acts a:hover, .panel .shop a:hover { color: var(--p800); }
.panel .shop { border-left: 1px solid var(--n100); padding-left: 28px; }
.panel .shop ul { list-style: none; display: grid; gap: 2px; }
.panel .shop li a { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--n50); font-size: 15px; }
.panel .shop .thumb { flex: none; width: 56px; height: 56px; border-radius: 4px; background: var(--n20); display: grid; place-items: center; overflow: hidden; }
.panel .shop .thumb img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.panel .shop li a:hover .thumb { background: var(--n50); }
.panel .shop a.all { display: inline-block; margin-top: 12px; font-size: 14.5px; }
@media (max-width: 1240px) { .panel { grid-template-columns: 1fr; } .panel .shop { border-left: 0; border-top: 1px solid var(--n100); padding: 16px 0 0; } .panel .shop ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } .panel .tile { grid-template-columns: 160px 1fr; } .panel .tile .pic, .panel .tile .pic img { max-height: 140px; height: 140px; } }
/* The phone sheet (Simon 2026-10-19, "make it pop"): the two systems as cards with their pictures, the three pages with a line
   under each saying what's inside, the proof figures, then the two buttons. */
.sheet { position: fixed; z-index: 29; left: 0; width: 100%; top: var(--hdr-h); bottom: 0; display: none; flex-direction: column; background: #fff; color: var(--black); overflow: auto; }
.sheet.open { display: flex; }
.sheet .label { font: 500 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--p800); padding: 18px var(--pad) 10px; }
.scard { display: grid; grid-template-columns: 96px minmax(0, 1fr) 14px; gap: 16px; align-items: center; margin: 0 var(--pad) 8px; padding: 12px 14px 12px 12px; background: var(--n20); border-radius: 4px; text-decoration: none; color: var(--black); }
.scard img { width: 96px; height: 76px; object-fit: contain; }
.scard b { display: block; font: 500 18px/1.2 var(--sans); letter-spacing: -.01em; }
.scard small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--n600); margin-top: 3px; }
.scard i, .sheet__nav i { font-style: normal; color: var(--n400); font-size: 20px; line-height: 1; }
.sheet .label span { font: 400 11px/1 var(--mono); letter-spacing: .3px; text-transform: none; color: var(--n500); }
.sheet__nav { list-style: none; margin-top: 10px; border-top: 1px solid var(--n50); }
.sheet__nav a { display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 12px; padding: 17px var(--pad); border-bottom: 1px solid var(--n50); text-decoration: none; color: var(--black); }
.sheet__nav b { display: block; font: 500 18px/1.2 var(--sans); letter-spacing: -.01em; }
.sheet__nav small { display: block; font-size: 12.5px; color: var(--n500); margin-top: 2px; }
.sheet__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px var(--pad) 0; }
.sheet__proof b { display: block; font: 300 clamp(18px, 5.6vw, 22px)/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.sheet__proof span { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
.sheet .foot { margin-top: auto; padding: 18px var(--pad) 24px; display: grid; gap: 10px; }
.sheet .foot .btn { height: 50px; }
body.menu-open { overflow: hidden; }
@media (max-width: 900px) {
  .hdr { gap: 14px; }
  .hdr nav, .hdr .tel, .panel { display: none !important; }
  .hdr .btn { order: 1; margin-left: auto; height: 36px; padding: 0 12px; }
  .hdr .cart { order: 2; }
  body.menu-open .hdr .btn { display: none; }   /* while the sheet is open its foot carries the buttons; the bar keeps logo and close (Simon 2026-10-19) */
  .burger { order: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; }
  body.menu-open .burger { margin-left: auto; }
  .burger svg { width: 24px; height: 24px; }
  .burger .x { display: none; } .burger[aria-expanded="true"] .x { display: block; } .burger[aria-expanded="true"] .lines { display: none; }
  .logo span { font-size: 22px; letter-spacing: -1.1px; } .logo img { height: 34px; }
}
@media (max-width: 400px) {   /* narrow phones: the bar still fits logo, quote button, cart and menu */
  .hdr { gap: 10px; }
  .logo span { font-size: 18px; letter-spacing: -.9px; } .logo img { height: 30px; }
  .hdr .btn { font-size: 11px; letter-spacing: .6px; padding: 0 10px; height: 34px; }
}

/* ---- Closing + footer ---- */
.closing { background: var(--black); color: #fff; padding: 56px var(--pad); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.closing h2 span { color: var(--n400); }
.closing .ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) { .closing .ctas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .closing .ctas .btn--primary { grid-column: 1 / -1; } .closing .ctas .btn { padding: 0 8px; } }
.closing .small { font: 400 12px/1 var(--mono); color: var(--n400); letter-spacing: .5px; width: 100%; margin-top: 10px; grid-column: 1 / -1; line-height: 1.6; }
/* Footer: the quote page's (Simon 2026-10-19: "use that from now on"); breakpoint 1024 as there. The first link columns (15 px, above the line,
   under the headline) were taken out the same day ("looked way better before"). The map comes back quietly (the plan, 19 Oct): below the
   line, in the legal line's small mono capitals, so the headline and the arc keep the stage. */
.site-footer { background: var(--black); color: var(--n200); padding: 24px var(--pad) 40px; margin-top: -1px; }   /* -1: no seam under the closing */
.site-footer__top { position: relative; border-bottom: .5px solid var(--p800); }
.site-footer__headline { font: 300 24px/1.2 var(--sans); letter-spacing: -.24px; max-width: min(374px, 100%); color: var(--n200); }
.site-footer__headline strong { font-weight: 700; }
.site-footer__arc { display: block; height: 126px; overflow: hidden; margin: 0 0 0 auto; width: 215px; }
.site-footer__arc img { width: 215.5px; height: auto; display: block; }
.site-footer__arc .desk { display: none; }
/* Phones (Simon 2026-10-19): phone and support top left, beside the arc; copyright bottom left; the legal links bottom right */
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
@media (max-width: 400px) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } .site-footer__arc { justify-self: end; } }   /* narrow phones: the arc drops under the contact block instead of pushing past the edge (2026-10-19) */
.site-footer__headline { grid-column: 1 / -1; }
.site-footer__contact { align-self: end; display: flex; flex-direction: column; gap: 12px; padding: 24px 0 16px; font: 400 12px/1.4 var(--mono); letter-spacing: 1px; text-transform: uppercase; font-feature-settings: "ss03" 1; }
.site-footer__contact a { color: var(--n200); text-decoration: none; font-size: 13px; }
.site-footer__contact a:hover { color: var(--p500); }
.site-footer__contact a[href^="mailto:"], .site-footer__map a[href^="mailto:"] { text-transform: none; }
.site-footer__contact span { color: var(--n400); margin-top: 4px; }
.site-footer__arc { margin-top: 24px; }
/* The map: four groups in two columns on phones; on desktop five across, the fifth (Talk to us) carrying what the phone keeps by the arc */
.site-footer__map { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; padding: 26px 0 30px; font: 400 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; font-feature-settings: "ss03" 1; }
.site-footer__map > div { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.site-footer__map b { font-weight: 500; color: var(--n200); margin-bottom: 2px; }
.site-footer__map a, .site-footer__map span { color: var(--n400); text-decoration: none; line-height: 1.35; }
.site-footer__map a:hover { color: var(--p500); }
.site-footer__map .talk { display: none; }
.social { display: flex; gap: 14px; margin-top: 4px; }
.social a { display: grid; place-items: center; width: 22px; height: 22px; color: var(--n400); }
.social a:hover { color: var(--p500); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-top: 18px; border-top: .5px solid rgba(255,255,255,.1);
  font: 400 12px/12px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--n400); font-feature-settings: "ss03" 1; }
.site-footer__bottom a { color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: var(--p500); }
.site-footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.site-footer__copy { white-space: nowrap; }
@media (max-width: 400px) { .site-footer__bottom { gap: 12px; letter-spacing: .6px; } }   /* 360 px phones: the copyright on one line beside the four legal links */
@media (min-width: 1024px) {
  .site-footer { padding: 96px var(--pad) 85px; }
  .site-footer__top::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; border-radius: 3.3px; background: var(--p800); }
  .site-footer__top { min-height: 153px; }
  .site-footer__headline { max-width: min(930px, calc(100% - 380px)); font-size: 52px; line-height: 1.3; letter-spacing: -.52px; }
  .site-footer__headline strong { font-weight: 600; }
  .site-footer__arc { position: absolute; right: 12px; bottom: 0; width: 340px; height: 199px; margin: 0; }
  .site-footer__arc img { width: 340.8px; }
  .site-footer__arc .desk { display: block; } .site-footer__arc .mob { display: none; }
  .site-footer__top { display: block; }
  .site-footer__contact { display: none; }
  .site-footer__map { grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 24px 32px; padding: 40px 0 48px; }
  .site-footer__map .talk { display: flex; }
  .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; white-space: nowrap; }
  .site-footer__legal { flex-direction: row; gap: 32px; }
}

/* ==== Components shared by the pages (moved from the homepage, 19 Oct 2026) ==== */
/* ---- Films (the quote page's [03]); no quote button on the video (Simon 2026-10-19) ---- */
.films { position: relative; background: var(--black); color: #fff; overflow: hidden; }
.films__media { position: relative; width: 100%; height: 74vh; height: 74svh; min-height: 460px; }   /* most of a laptop screen, with the sections either side peeking in (Simon 2026-10-16) */
.films__media img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.films__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,24,25,.85) 0%, rgba(13,24,25,.15) 55%, rgba(13,24,25,.35) 100%); pointer-events: none; }
.films__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.films__play { position: absolute; z-index: 2; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--p500); display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.films__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.films__play img { width: 44px; height: 44px; margin-left: 6px; }
.films__list { position: absolute; z-index: 4; top: 26px; right: var(--pad); display: flex; gap: 12px; }
.films__list button { background: none; border: 0; color: #fff; cursor: pointer; text-align: left; opacity: .65; }
.films__list button[aria-pressed=true] { opacity: 1; }
.films__list img { width: 128px; height: 72px; object-fit: cover; border: 1px solid rgba(255,255,255,.4); margin-bottom: 6px; }
.films__list span { font: 500 10px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.films__copy { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.films__copy h2 { font: 300 clamp(28px, 2.9vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; margin-bottom: 0; }
.films__copy h2 span { color: var(--n200); }
.films__copy p { max-width: 420px; color: var(--n100); font-size: 15px; }
.films.playing .films__copy, .films.playing .films__play { display: none; }   /* the tiles stay, to switch films (as on the quote page) */
@media (max-width: 900px) {
  .films__media { height: 78svh; }
  .films__media img.poster { object-position: 62% 50%; }
  .films__list { left: 18px; right: auto; }
  .films__list img { width: 104px; height: 58px; }
  .films__copy { flex-direction: column; align-items: flex-start; gap: 14px; bottom: 26px; }
  .films__play { width: 84px; height: 84px; top: 34%; }
}

/* ---- Testimonials: facility testimonials, then Google reviews, stacked; Google shows only on its own cards (Simon 2026-10-16) ---- */
.says { padding: 44px 0 40px; background: #fff; }
.says__head { padding: 0 var(--pad); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
.says__head .label { color: var(--p800); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.says__head .label::before { content: ""; width: 7px; height: 7px; background: var(--p500); }
.rating { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--n600); margin-bottom: 10px; text-decoration: none; }
.rating:hover { color: var(--black); }
.stars { color: #F5B301; letter-spacing: 2px; font-size: 17px; }
.says h2, .stats h2, .closing h2 { font: 300 clamp(28px, 2.9vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; }
.says h2 span, .stats h2 span, .closing h2 span { color: var(--n400); }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 40px; height: 40px; border: 1px solid var(--n200); background: #fff; border-radius: 3px; cursor: pointer; font-size: 18px; color: var(--black); }
.track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad) 8px; scrollbar-width: none; }   /* scroll-padding: snapping had pulled the first card flush to the screen edge */
.track::-webkit-scrollbar { display: none; }
.track + .track { margin-top: 12px; }
/* Phones: one swipe row, facility testimonials then Google reviews, all cards the same size (Simon 2026-10-19: two rows left big gaps under short cards) */
@media (max-width: 900px) { .arrows { display: none; } .says .tcard, .says .gcard { flex-basis: 86vw; } #google:empty { display: none; } }
.tcard { flex: 0 0 min(600px, 86vw); scroll-snap-align: start; background: var(--n20); border: 1px solid var(--n50); border-radius: 4px; padding: 20px 22px 16px; display: flex; flex-direction: column; }
.tcard .who-logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--n100); display: grid; place-items: center; overflow: hidden; margin-bottom: 12px; font: 500 13px/1 var(--mono); color: var(--p800); }
.tcard .who-logo img { width: 100%; height: 100%; object-fit: contain; }
.tcard .who-logo img.wide { width: 86%; height: auto; }
.tcard q { quotes: "“" "”"; font: 400 18px/1.28 var(--sans); letter-spacing: -.01em; margin-bottom: 10px; display: block; }
.tcard .body { font-size: 13px; color: var(--n600); line-height: 1.5; margin-bottom: 14px; }
.tcard .who { margin-top: auto; border-top: 1px solid var(--n100); padding-top: 10px; font-size: 13px; font-weight: 600; }
.tcard .who span { display: block; font: 400 11px/1.6 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--n500); font-weight: 400; }
.g { width: 18px; height: 18px; flex: none; }
.gcard { flex: 0 0 min(460px, 82vw); scroll-snap-align: start; border: 1px solid var(--n100); border-radius: 4px; padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; background: #fff; }
.gcard .top { display: flex; align-items: center; gap: 10px; }
.gcard .av { width: 34px; height: 34px; border-radius: 50%; background: var(--p700); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.gcard .nm { font-weight: 600; font-size: 14px; line-height: 1.2; }
.gcard .nm span { display: block; font-weight: 400; color: var(--n500); font-size: 12px; }
.gcard .g { margin-left: auto; }
.gcard p { font-size: 13px; color: var(--n600); line-height: 1.5; }

/* ---- Proof: the quote page's scrolling strip (logo, logo, figure; greyscale logos), in this page's styling ---- */
.stats { background: var(--n20); padding: 52px 0 40px; border-top: 1px solid var(--n50); }
.stats h2 { padding: 0 var(--pad); }
.strip { margin-top: 18px; overflow: hidden; position: relative; }   /* no boxes: no rules above, below or between (Simon 2026-10-16) */
.strip { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.strip ul { display: flex; align-items: center; width: max-content; list-style: none; animation: strip 190s linear infinite; }
.strip li { flex: none; display: flex; align-items: center; justify-content: center; height: 104px; padding: 0 44px; }
.strip img { height: calc(var(--h) * .8); width: auto; filter: grayscale(1); }
.strip .fig { flex-direction: column; align-items: flex-start; gap: 10px; }
.strip .fig b { font: 300 40px/1 var(--sans); letter-spacing: -.03em; font-weight: 300; }
.strip .fig span { font: 500 11px/1.4 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--n500); white-space: nowrap; }
@keyframes strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip ul { animation: none; } }
@media (max-width: 900px) { .strip li { height: 96px; padding: 0 26px; } .strip img { height: calc(var(--h) * .6); } .strip .fig b { font-size: 34px; } .strip ul { animation-duration: 150s; } }

/* ==== Page components (19 Oct 2026): the product page and everything after it. One section rhythm: 72 px top and bottom on desktop,
   44 px on phones; headings in the homepage's voice (light, the first phrase grey); a section has a heading or a label, never both. ==== */
.sec { padding: 72px var(--pad); }
.sec--tint { background: var(--n20); border-top: 1px solid var(--n50); border-bottom: 1px solid var(--n50); }
.sec--dark { background: var(--black); color: #fff; }
.sec h2, .h2 { font: 300 clamp(28px, 2.9vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; }
.sec h2 span, .h2 span { color: var(--n400); }
.sec--dark h2 span { color: var(--n400); }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.sec__head p { max-width: 46ch; color: var(--n600); font-size: 16px; }
.sec--dark .sec__head p { color: var(--n200); }
.more { font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--p800); text-decoration: none; white-space: nowrap; }
.more::after { content: " →"; }
.more:hover { color: var(--p800); text-decoration: underline; text-underline-offset: 4px; }
.sec--dark .more { color: var(--p500); }
.ticks { list-style: none; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.35; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%2352B7AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
/* two plain white sections in a row share one gap, not two */
.sec:not(.sec--tint):not(.sec--dark) + .sec:not(.sec--tint):not(.sec--dark) { padding-top: 8px; }
@media (max-width: 900px) { .sec { padding: 44px var(--pad); } .sec__head { margin-bottom: 24px; } }

/* Product hero: the name, one line, the two buttons and the offer; the system on the homepage's light panel beside it. */
.phero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center; padding: 56px var(--pad) 64px; background: #fff; }
.phero h1 { font: 300 clamp(40px, 4.6vw, 76px)/1.02 var(--sans); letter-spacing: -.03em; margin-bottom: 20px; }
.phero h1 span { display: block; color: var(--n400); }
.phero .lede { font-size: 20px; line-height: 1.4; color: var(--n600); max-width: 30ch; margin-bottom: 30px; letter-spacing: -.01em; }
.phero .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.phero .ctas .btn { height: 48px; padding: 0 24px; }
.offer { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font: 400 12px/1.3 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n600); }
.offer li { display: flex; align-items: center; gap: 8px; }
.offer li::before { content: ""; width: 6px; height: 6px; background: var(--p500); }
.phero__pic { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; background: linear-gradient(#F4F6F7, #E6EAEC); display: grid; place-items: center; overflow: hidden; }
.phero__pic img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(13,24,25,.16)); }
.phero__pic .label { position: absolute; left: 18px; bottom: 16px; color: var(--n500); font-size: 11px; }
@media (max-width: 900px) {
  .phero { grid-template-columns: 1fr; gap: 26px; padding: 28px var(--pad) 40px; }
  .phero__pic { order: -1; aspect-ratio: 4 / 3.1; }
  .phero h1 { margin-bottom: 14px; }
  .phero .lede { font-size: 17px; margin-bottom: 22px; }
  .phero .ctas { display: grid; grid-template-columns: 1fr; }
  .offer { margin-top: 20px; gap: 8px 16px; font-size: 11px; }
}

/* Who it's for: the three people a director weighs a system for, as on the homepage (heading left, three columns of ticks). */
.who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3vw; align-items: end; }
.who h2 span, .who h2 b { display: block; font-weight: inherit; }
.who__cols { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4vw; }
.who__cols > li { border-left: 1px solid var(--p500); padding-left: 16px; }
.who__cols .label { display: block; color: var(--p800); font-size: 11px; margin-bottom: 10px; }
@media (max-width: 1100px) { .who { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 700px) { .who__cols { grid-template-columns: 1fr; gap: 22px; } }

/* How it works: the path from the control room to the patient, three zones joined by a line a pulse travels along. */
.flow__zones { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.zone { position: relative; padding: 0 28px; }
.zone + .zone { border-left: 1px dashed var(--n100); }
.zone:first-child { padding-left: 0; } .zone:last-child { padding-right: 0; }
.zone .label { display: block; color: var(--p800); margin-bottom: 18px; }
.zone__pics { height: 210px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-bottom: 22px; }
.zone__pics img { height: auto; max-height: 100%; min-width: 0; object-fit: contain; mix-blend-mode: multiply; }
.zone p { font-size: 16px; line-height: 1.45; color: var(--n600); max-width: 38ch; }
.zone p b { color: var(--black); font-weight: 500; }
.flow__line { position: relative; height: 2px; margin: 0 0 26px; background: var(--n100); overflow: hidden; border-radius: 1px; }
.flow__line i { position: absolute; top: 0; left: 0; width: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--p500), transparent); animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
@media (prefers-reduced-motion: reduce) { .flow__line i { animation: none; left: 40%; } }
@media (max-width: 900px) {
  .flow__zones { grid-template-columns: 1fr; }
  .zone, .zone:first-child, .zone:last-child { padding: 0 0 28px 22px; border-left: 2px solid var(--n100); }
  .zone + .zone { border-left: 2px solid var(--n100); }
  .zone::before { content: ""; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--p500); }
  .zone:last-child { border-left-color: transparent; padding-bottom: 0; }
  .zone__pics { height: 150px; justify-content: flex-start; margin-bottom: 16px; }
  .flow__line { display: none; }
}

/* What's in the box: a bento grid of the parts, the heart of the system large; each card a link to the part in the shop. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; }
.part { position: relative; display: flex; flex-direction: column; padding: 16px 18px; border-radius: 4px; background: var(--n20); text-decoration: none; color: var(--black); overflow: hidden; transition: background .15s; }
.part:hover { background: var(--n50); }
.part .pic { position: relative; flex: 1; min-height: 0; }
.part .pic img { position: absolute; inset: 0; margin: auto; width: 86%; height: 92%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
.part:hover .pic img { transform: translateY(-3px); }
.part b { font: 500 16px/1.25 var(--sans); letter-spacing: -.01em; margin-top: 10px; }
.part small { font: 400 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-top: 3px; }
.part--hero { grid-column: span 2; grid-row: span 2; padding: 24px 26px; }
.part--hero b { font-size: 24px; margin-top: 14px; }
.part--hero p { font-size: 15px; color: var(--n600); margin-top: 6px; max-width: 44ch; }
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(3, 1fr); } .part--hero { grid-column: span 3; grid-row: span 2; } }
@media (max-width: 700px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; gap: 10px; } .part--hero { grid-column: span 2; } .part { padding: 12px 14px; } .part b { font-size: 15px; } }

/* Add-ons: small pictures with names, as in the menu's Shop column. */
.addons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--n50); }
.addons > .label { grid-column: 1 / -1; color: var(--p800); }
.addon { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; color: var(--black); }
.addon .thumb { width: 64px; height: 64px; border-radius: 4px; background: var(--n20); display: grid; place-items: center; overflow: hidden; }
.addon .thumb img { max-width: 52px; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.addon b { display: block; font: 500 15px/1.25 var(--sans); }
.addon span { display: block; font-size: 13px; line-height: 1.35; color: var(--n600); margin-top: 2px; }
.addon:hover b { color: var(--p800); }
@media (max-width: 1100px) { .addons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .addons { grid-template-columns: 1fr; } }

/* Questions: an accordion beside the heading. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3vw; align-items: start; }
.faq__head { position: sticky; top: calc(var(--hdr-h) + 24px); }
.faq__head p { margin-top: 16px; color: var(--n600); max-width: 34ch; }
.faq__head p a { color: var(--p800); }
.faq details { border-bottom: 1px solid var(--n100); }
.faq details:first-of-type { border-top: 1px solid var(--n100); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; font: 400 19px/1.3 var(--sans); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--p700), var(--p700)) center / 14px 1.5px no-repeat, linear-gradient(var(--p700), var(--p700)) center / 1.5px 14px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--n600); max-width: 64ch; font-size: 16px; line-height: 1.55; }
.faq details p a { color: var(--p800); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 20px; } .faq__head { position: static; } .faq summary { font-size: 17px; padding: 16px 0; } }

/* The closing on product pages: the offer line under the buttons. */
.closing .offer { color: var(--n200); width: 100%; margin-top: 0; }

/* Product hero, video version (MRItv): the TV belongs on the dark stage (homepage, Simon 2026-10-16), so the hero is the film of content
   playing inside the bore (growth/brand 2026-10-13 hero-bore-v3), the words over its darker left side. */
.phero--video { position: relative; display: flex; align-items: flex-end; min-height: min(80vh, 780px); padding: 0 var(--pad) 64px; background: var(--black); color: #fff; overflow: hidden; }
.phero--video .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.phero--video::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,18,28,.92) 0%, rgba(6,18,28,.7) 34%, rgba(6,18,28,0) 62%), linear-gradient(0deg, rgba(6,18,28,.6) 0%, rgba(6,18,28,0) 40%); }
.phero--video > div { position: relative; z-index: 2; max-width: 620px; }
.phero--video h1 span { color: var(--n200); }
.phero--video .lede { color: var(--n100); }
.phero--video .offer { color: var(--n200); }
.phero--video .btn--outline { color: var(--p500); }
@media (max-width: 900px) {
  .phero--video { min-height: calc(100svh - var(--hdr-h)); padding-bottom: 32px; }
  /* phones: the film fills the top, so the bore and its screen stay in view; the words sit under it on the dark */
  .phero--video .bg { height: 60%; bottom: auto; object-position: 50% 50%; }
  .phero--video::before { background: linear-gradient(0deg, var(--black) 0%, var(--black) 40%, rgba(13,24,25,0) 56%); }
}

/* Evidence: one sentence, its source, and the way to the write-up. */
.evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3vw; align-items: start; }
.evidence blockquote { font: 300 clamp(26px, 2.6vw, 42px)/1.15 var(--sans); letter-spacing: -.02em; }
.evidence cite { display: block; margin-top: 18px; font: 400 12px/1.5 var(--mono); letter-spacing: .8px; text-transform: uppercase; font-style: normal; color: var(--n400); }
.evidence .more { display: inline-block; margin-top: 22px; }
@media (max-width: 900px) { .evidence { grid-template-columns: 1fr; gap: 16px; } }

/* Compare: products side by side, each a card with its picture, price, part number, add to cart and a short spec list.
   Phones: a swipe row with dots, as the homepage's products. */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--n50); border-radius: 4px; background: #fff; overflow: hidden; }
.pcard .pic { aspect-ratio: 5 / 4; background: linear-gradient(#F4F6F7, #E9EDEF); display: grid; place-items: center; position: relative; }
.pcard .pic img { position: absolute; inset: 0; margin: auto; width: 78%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
.pcard:hover .pic img { transform: translateY(-3px); }
.pcard .body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; flex: 1; }
.pcard h3 { font: 400 26px/1.1 var(--sans); letter-spacing: -.02em; }
.pcard .for { color: var(--n600); font-size: 15px; min-height: 2.9em; }   /* two lines everywhere, so the prices line up */
.pcard .price { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 12px; }
.pcard .price b { font: 300 32px/1 var(--sans); letter-spacing: -.03em; }
.pcard .price small { font: 400 11px/1 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); }
.pcard .buy { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.pcard .buy .btn { height: 44px; }
.pcard dl { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--n50); }
.pcard dt, .pcard dd { padding: 10px 0; border-bottom: 1px solid var(--n50); font-size: 14px; }
.pcard dt { font: 400 11px/1.9 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); padding-right: 16px; }
.pcard dd { margin: 0; color: var(--black); }
.pcard--pick { border-color: var(--p500); }
.pcard .tag { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 5px 8px; border-radius: 3px; background: var(--p500); color: var(--p900); font: 500 10px/1 var(--mono); letter-spacing: .8px; text-transform: uppercase; }
.swipe-dots { display: none; justify-content: center; gap: 8px; margin-top: 18px; }
.swipe-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--n100); transition: background .2s, width .2s; }
.swipe-dots i.on { background: var(--p600); width: 18px; border-radius: 3px; }
@media (max-width: 900px) {
  .compare { display: grid; grid-auto-flow: column; grid-auto-columns: 84vw; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
             margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .compare::-webkit-scrollbar { display: none; }
  .compare > * { scroll-snap-align: start; }
  .swipe-dots { display: flex; }
}

/* Promo: one picture and one idea, linking on (e.g. "Best with the Premium Sound System"). */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; border-radius: 4px; overflow: hidden; background: var(--n20); text-decoration: none; color: var(--black); }
.promo .pic { height: 100%; min-height: 300px; background: linear-gradient(#F4F6F7, #E6EAEC); display: grid; place-items: center; position: relative; }
.promo .pic img { position: absolute; inset: 0; margin: auto; width: 82%; height: 84%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(13,24,25,.14)); }
.promo .txt { padding: 40px 44px; }
.promo .txt h2 { margin-bottom: 14px; }
.promo .txt p { color: var(--n600); margin-bottom: 22px; max-width: 42ch; }
.promo--dark { background: var(--black); color: #fff; }
.promo--dark .txt p { color: var(--n200); }
@media (max-width: 900px) { .promo { grid-template-columns: 1fr; } .promo .pic { min-height: 220px; } .promo .txt { padding: 26px 22px 30px; } }

/* Toast: "Added to cart", bottom centre, for a moment. */
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 6px;
  background: var(--black); color: #fff; font-size: 15px; box-shadow: 0 16px 40px rgba(13,24,25,.3); transition: transform .3s; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); }
.toast a { color: var(--p500); font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }

/* ==== Shop (19 Oct 2026) ==== */
/* Local navigation: a slim row under the bar on Shop and Support pages (the plan's rule 10), the current page underlined; scrolls sideways on phones. */
.localnav { display: flex; gap: 28px; padding: 0 var(--pad); border-bottom: 1px solid var(--n50); background: #fff; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.localnav::-webkit-scrollbar { display: none; }
.localnav a { display: flex; align-items: center; height: 48px; font-size: 14.5px; color: var(--n600); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.localnav a:hover { color: var(--black); }
.localnav a.on { color: var(--black); border-bottom-color: var(--p500); }
.localnav .end { margin-left: auto; }
@media (max-width: 900px) { .localnav { gap: 22px; } .localnav a { height: 44px; font-size: 14px; } .localnav .end { margin-left: 0; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); margin-bottom: 18px; }
.crumbs a { color: var(--n600); text-decoration: none; } .crumbs a:hover { color: var(--p800); }
.crumbs span::before { content: "/"; margin-right: 8px; color: var(--n200); }

/* Shop front: the title, one line and the search, which takes part numbers (what people type into site search today). */
.shophero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: end; padding: 48px var(--pad) 40px; }
.shophero h1 { font: 300 clamp(40px, 4.6vw, 72px)/1 var(--sans); letter-spacing: -.03em; margin-bottom: 14px; }
.shophero p { color: var(--n600); font-size: 18px; max-width: 40ch; }
.search { position: relative; }
.search input { width: 100%; height: 60px; padding: 0 56px 0 52px; border: 1px solid var(--n100); border-radius: 4px; background: var(--n20); font: 400 18px/1 var(--sans); color: var(--black); appearance: none; }
.search input::placeholder { color: var(--n400); }
.search input:focus { outline: none; border-color: var(--p600); background: #fff; box-shadow: 0 0 0 3px rgba(129,216,208,.35); }
.search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--n500); pointer-events: none; }
.search .clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; font-size: 22px; color: var(--n500); cursor: pointer; display: none; }
.search.has-q .clear { display: block; }
.search + .hint { margin-top: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: .5px; color: var(--n500); }
.search + .hint a { color: var(--p800); }
@media (max-width: 900px) { .shophero { grid-template-columns: 1fr; gap: 22px; padding: 28px var(--pad) 28px; } .shophero p { font-size: 16px; } .search input { height: 54px; font-size: 16px; } }

/* Category tiles: a picture and a name, as in the menu. */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cat { display: flex; flex-direction: column; text-decoration: none; color: var(--black); }
.cat .pic { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; background: linear-gradient(#F4F6F7, #E6EAEC); overflow: hidden; }
.cat .pic img { position: absolute; inset: 0; margin: auto; width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(13,24,25,.14)); transition: transform .25s; }
.cat:hover .pic img { transform: translateY(-4px) scale(1.02); }
.cat b { font: 400 19px/1.2 var(--sans); letter-spacing: -.01em; margin-top: 12px; }
.cat small { font: 400 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-top: 3px; }
.cat--dark .pic { background: var(--black); }
@media (max-width: 1100px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cats { grid-template-columns: 1fr 1fr; gap: 12px; } .cat b { font-size: 16px; } }

/* Filter chips (the quote page's chips, a size up) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chips button { padding: 9px 14px; border: 1px solid var(--n100); border-radius: 4px; background: #fff; font: 400 14px/1 var(--sans); color: var(--n600); cursor: pointer; }
.chips button:hover { border-color: var(--p600); color: var(--black); }
.chips button[aria-pressed="true"] { background: var(--p500); border-color: var(--p500); color: var(--p900); }
.chips .n { font: 400 11px/1 var(--mono); color: inherit; opacity: .7; margin-left: 6px; }
@media (max-width: 900px) { .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)) 18px; padding: 0 var(--pad); scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips button { flex: none; } }

/* Product cards in a grid: picture, name, part number, price, add */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
.shopcard { display: flex; flex-direction: column; min-width: 0; }
.shopcard .pic { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; background: var(--n20); overflow: hidden; }
.shopcard .pic img { position: absolute; inset: 0; margin: auto; width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
.shopcard:hover .pic img { transform: translateY(-3px); }
.shopcard .pic .fit { position: absolute; left: 10px; top: 10px; padding: 4px 7px; border-radius: 3px; background: #fff; font: 500 10px/1 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n600); }
.shopcard .nm { margin-top: 12px; font: 400 15.5px/1.3 var(--sans); color: var(--black); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.shopcard .nm:hover { color: var(--p800); }
.shopcard small { font: 400 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
.shopcard .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.shopcard .row b { font: 400 18px/1 var(--sans); letter-spacing: -.01em; }
.shopcard .row s { font-size: 13px; color: var(--n400); margin-left: 6px; }
.shopcard .add { height: 36px; padding: 0 14px; border: 1px solid var(--p800); border-radius: 3px; background: #fff; color: var(--p800); font: 500 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.shopcard .add:hover { background: var(--p500); border-color: var(--p500); color: var(--p900); }
.shopcard mark { background: var(--p400); color: inherit; }
.empty { grid-column: 1 / -1; padding: 40px 0; color: var(--n600); font-size: 17px; }
.empty a { color: var(--p800); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; } .shopcard .row { flex-direction: column; align-items: stretch; } .shopcard .add { width: 100%; } }

/* A quiet help line at the foot of shop pages */
.helpline { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; justify-content: space-between; padding: 26px var(--pad); border-top: 1px solid var(--n50); background: var(--n20); font-size: 15px; color: var(--n600); }
.helpline b { color: var(--black); font-weight: 500; }
.helpline a { color: var(--p800); }
.helpline .links { display: flex; flex-wrap: wrap; gap: 24px; }
/* Search suggestions: the top matches under the box, each with its add button, so a reorder is type → add */
.search { display: block; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--n100); border-radius: 4px; box-shadow: 0 20px 44px rgba(13,24,25,.14); overflow: hidden; display: none; }
.suggest.open { display: block; }
.suggest a.row, .suggest .row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--n50); text-decoration: none; color: var(--black); }
.suggest .th { width: 48px; height: 48px; border-radius: 3px; background: var(--n20); display: grid; place-items: center; overflow: hidden; }
.suggest .th img { max-width: 40px; max-height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.suggest .nm { font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .nm small { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); }
.suggest .pr { font-size: 15px; }
.suggest mark { background: var(--p400); color: inherit; }
.suggest .add { height: 32px; padding: 0 12px; border: 1px solid var(--p800); border-radius: 3px; background: #fff; color: var(--p800); font: 500 10.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.suggest .add:hover { background: var(--p500); border-color: var(--p500); }
.suggest .all { display: block; padding: 12px 14px; font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--p800); text-decoration: none; background: var(--n20); }
.suggest .none { padding: 14px; color: var(--n600); font-size: 14.5px; }
@media (max-width: 600px) { .suggest .row { grid-template-columns: 40px minmax(0, 1fr) auto; } .suggest .pr { display: none; } }
.sec--tint .shopcard .pic { background: #fff; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suggest .nm { text-decoration: none; }
.suggest .nm:hover { color: var(--p800); }
.toast { max-width: calc(100vw - 24px); }
.toast span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Chooser: one product, its pack sizes as a segmented control, price and price per pair, quantity, one-time or repeat delivery, add.
   (The reorder page; repeat delivery is the plan's "subscriptions offered" — not on the live shop yet.) */
.choosers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chooser { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--n50); border-radius: 4px; background: #fff; overflow: hidden; }
.chooser .pic { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(#F4F6F7, #E9EDEF); }
.chooser .pic img { position: absolute; inset: 0; margin: auto; width: 70%; height: 82%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(13,24,25,.14)); transition: opacity .2s; }
.chooser .pic .for { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 4px; background: rgba(255,255,255,.85); font-size: 13px; color: var(--n600); }
.chooser .pic .for img { position: static; width: 36px; height: 36px; filter: none; mix-blend-mode: multiply; }
.chooser .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.chooser h3 { font: 400 26px/1.1 var(--sans); letter-spacing: -.02em; }
.chooser .sub { color: var(--n600); font-size: 15px; margin-top: -8px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--n100); border-radius: 4px; overflow: hidden; }
.seg button { padding: 10px 4px; border: 0; border-left: 1px solid var(--n100); background: #fff; font: 400 14px/1.2 var(--sans); color: var(--n600); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button small { display: block; font: 400 10px/1.3 var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--n500); }
.seg button[aria-pressed="true"] { background: var(--p500); color: var(--p900); }
.seg button[aria-pressed="true"] small { color: var(--p900); }
.chooser .price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chooser .price b { font: 300 36px/1 var(--sans); letter-spacing: -.03em; }
.chooser .price s { color: var(--n400); }
.chooser .price span { font: 400 12px/1 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); }
.chooser .price .save { color: var(--p800); }
.often { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; color: var(--n600); }
.often label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.often input { accent-color: var(--p700); width: 16px; height: 16px; }
.often .note { flex-basis: 100%; font: 400 11px/1.4 var(--mono); letter-spacing: .4px; color: var(--n500); }
.chooser .buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.stepper { display: flex; align-items: center; border: 1px solid var(--n100); border-radius: 4px; height: 48px; }
.stepper button { width: 40px; height: 100%; border: 0; background: none; font: 400 20px/1 var(--sans); color: var(--p800); cursor: pointer; }
.stepper input { width: 40px; height: 100%; border: 0; text-align: center; font: 400 16px/1 var(--sans); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.chooser .buy .btn { height: 48px; }
@media (max-width: 900px) { .choosers { grid-template-columns: 1fr; } .chooser .body { padding: 18px 18px 20px; } .seg button { font-size: 13px; } }

/* Product detail: the gallery left, the buying column right (sticky on desktop), details and related products below. */
.pd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; padding: 28px var(--pad) 64px; }
.gallery .main { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; background: linear-gradient(#F4F6F7, #E6EAEC); overflow: hidden; }
.gallery .main img { position: absolute; inset: 0; margin: auto; width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.gallery .thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pd > * { min-width: 0; }
.gallery .thumbs button { width: 84px; height: 84px; padding: 0; border: 1px solid var(--n50); border-radius: 4px; background: var(--n20); cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.gallery .thumbs button[aria-pressed="true"] { border-color: var(--p600); box-shadow: 0 0 0 1px var(--p600); }
.gallery .thumbs img { max-width: 70px; max-height: 70px; object-fit: contain; mix-blend-mode: multiply; }
.buybox { position: sticky; top: calc(var(--hdr-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
.buybox h1 { font: 300 clamp(30px, 2.9vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; }
.buybox .sku { font: 400 12px/1 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); }
.buybox .price { display: flex; align-items: baseline; gap: 12px; }
.buybox .price b { font: 300 40px/1 var(--sans); letter-spacing: -.03em; }
.buybox .price s { color: var(--n400); }
.buybox .lede { color: var(--n600); font-size: 16px; line-height: 1.55; }
.buybox .fitchip { align-self: flex-start; padding: 6px 10px; border-radius: 3px; background: var(--n20); border: 1px solid var(--n50); font: 500 11px/1 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n600); }
.buybox .buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.buybox .buy .btn { height: 48px; }
.buybox .assure { list-style: none; display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--n50); font-size: 14.5px; color: var(--n600); }
.buybox .assure li { display: flex; gap: 10px; align-items: baseline; }
.buybox .assure li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--p500); transform: translateY(-2px); }
.buybox .assure a { color: var(--p800); }
.buybox .system { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 4px; background: var(--n20); text-decoration: none; color: var(--black); }
.buybox .system img { width: 72px; height: 56px; object-fit: contain; }
.buybox .system b { display: block; font-weight: 500; }
.buybox .system span { font-size: 13.5px; color: var(--n600); }
.details { max-width: 820px; }
.details ul { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.details li { position: relative; padding-left: 22px; color: var(--n600); }
.details li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--p500); }
.details p { color: var(--n600); margin-top: 8px; }
@media (max-width: 900px) { .pd { grid-template-columns: 1fr; gap: 24px; padding: 18px var(--pad) 40px; } .buybox { position: static; } .gallery .thumbs button { width: 64px; height: 64px; } }

/* Cart and checkout in our styles: lines on the left, the summary on the right (sticky on desktop). */
.cartpage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: start; padding: 32px var(--pad) 72px; }
.cartpage h1 { font: 300 clamp(36px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -.03em; margin-bottom: 26px; }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 28px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--n50); }
.line:first-of-type { border-top: 1px solid var(--n50); }
.line .th { width: 96px; height: 96px; border-radius: 4px; background: var(--n20); display: grid; place-items: center; overflow: hidden; }
.line .th img { max-width: 80px; max-height: 80px; object-fit: contain; mix-blend-mode: multiply; }
.line .nm a { color: var(--black); text-decoration: none; font-size: 16px; } .line .nm a:hover { color: var(--p800); }
.line .nm small { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
.line .stepper { height: 40px; }
.line .stepper button { width: 34px; } .line .stepper input { width: 36px; }
.line .tot { font-size: 17px; min-width: 96px; text-align: right; }
.line .rm { width: 28px; height: 28px; border: 0; background: none; color: var(--n400); font-size: 20px; cursor: pointer; }
.line .rm:hover { color: var(--black); }
.summary { position: sticky; top: calc(var(--hdr-h) + 24px); padding: 24px; border-radius: 4px; background: var(--n20); border: 1px solid var(--n50); display: flex; flex-direction: column; gap: 12px; }
.summary h2 { font: 400 22px/1.2 var(--sans); letter-spacing: -.01em; margin-bottom: 6px; }
.summary .row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--n600); }
.summary .row b { color: var(--black); font-weight: 400; }
.summary .total { padding-top: 12px; border-top: 1px solid var(--n100); font-size: 18px; color: var(--black); }
.summary .total b { font: 400 24px/1 var(--sans); letter-spacing: -.02em; }
.summary .btn { height: 50px; margin-top: 6px; }
.summary .note { font-size: 13.5px; color: var(--n600); line-height: 1.45; }
.summary .note a { color: var(--p800); }
.cart-empty { padding: 40px 0; }
.cart-empty p { font-size: 18px; color: var(--n600); margin-bottom: 20px; }
.form { display: flex; flex-direction: column; gap: 34px; }
.form fieldset { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.form legend { grid-column: 1 / -1; font: 400 22px/1.2 var(--sans); letter-spacing: -.01em; margin-bottom: 14px; padding: 0; }
.form legend span { font: 400 12px/1 var(--mono); letter-spacing: 1px; color: var(--p800); margin-right: 10px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field .label { color: var(--n600); font-size: 11px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--n200); border-radius: 0; background: transparent; font: 400 16px/1.5 var(--sans); color: var(--black); appearance: none; }
.field textarea { min-height: 110px; resize: vertical; border: 1px solid var(--n100); border-radius: 4px; padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--p700); box-shadow: 0 1px 0 var(--p700); }
.field select { background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23595959' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat right 4px center / 12px; padding-right: 24px; }
.opt { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--n100); border-radius: 4px; cursor: pointer; grid-column: 1 / -1; }
.opt input { accent-color: var(--p700); width: 16px; height: 16px; }
.opt:has(input:checked) { border-color: var(--p600); background: rgba(208,255,251,.35); }
.opt small { display: block; color: var(--n600); font-size: 13.5px; }
.card-el { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0; border: 1px solid var(--n100); border-radius: 4px; overflow: hidden; }
.card-el input { border: 0; border-left: 1px solid var(--n100); padding: 14px 12px; font: 400 16px/1 var(--sans); }
.card-el input:first-child { border-left: 0; }
.card-el input:focus { outline: none; background: rgba(208,255,251,.3); }
.secure { grid-column: 1 / -1; font: 400 12px/1.4 var(--mono); letter-spacing: .4px; color: var(--n500); }
@media (max-width: 900px) {
  .cartpage { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 20px var(--pad) 44px; }
  .summary { position: static; }
  .line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "th nm rm" "th st tot"; gap: 8px 14px; }
  .line .rm { justify-self: end; }
  .line .th { grid-area: th; width: 72px; height: 72px; } .line .th img { max-width: 60px; max-height: 60px; }
  .line .nm { grid-area: nm; } .line .stepper { grid-area: st; justify-self: start; } .line .tot { grid-area: tot; min-width: 0; } .line .rm { grid-area: rm; }
  .form fieldset { grid-template-columns: 1fr; }
  .card-el { grid-template-columns: 1fr 1fr; } .card-el input:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--n100); } .card-el input:nth-child(2) { border-left: 0; }
}

/* ==== Support (19 Oct 2026) ==== */
/* Help centre: starts from the product (the plan): three pictures; choosing one shows its guides, films and fixes. */
.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.picker button { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid var(--n50); border-radius: 4px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--black); transition: border-color .15s, background .15s; }
.picker button:hover { border-color: var(--n100); }
.picker button[aria-selected="true"] { border-color: var(--p500); background: rgba(208,255,251,.35); box-shadow: inset 0 0 0 1px var(--p500); }
.picker .th { height: 92px; border-radius: 3px; background: linear-gradient(#F4F6F7, #E6EAEC); position: relative; }
.picker .th img { position: absolute; inset: 0; margin: auto; width: 86%; height: 86%; object-fit: contain; }
.picker b { display: block; font: 400 19px/1.2 var(--sans); letter-spacing: -.01em; }
.picker small { display: block; font-size: 13.5px; color: var(--n600); margin-top: 3px; }
@media (max-width: 900px) { .picker { grid-template-columns: 1fr; gap: 8px; } .picker button { grid-template-columns: 84px minmax(0, 1fr); } .picker .th { height: 64px; } }
.vids.helpfilms { margin-top: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* the help centre: the picker chooses the films (20 Oct) */
.topic-h { font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--p800); margin-bottom: 14px; }
.linklist { list-style: none; border-top: 1px solid var(--n50); }
.linklist a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--n50); color: var(--black); text-decoration: none; font-size: 16.5px; }
.linklist a::after { content: "→"; color: var(--p800); }
.linklist a:hover { color: var(--p800); }
.linklist a small { display: block; font-size: 13.5px; color: var(--n600); margin-top: 2px; }
@media (max-width: 1100px) { .vids.helpfilms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vids.helpfilms { grid-template-columns: 1fr; } }
/* Video cards: a poster that becomes the film in place */
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--black); border: 0; padding: 0; cursor: pointer; }
.vid img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.vid:hover img { opacity: 1; }
.vid .pl { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; color: #fff; font: 500 11px/1.2 var(--mono); letter-spacing: .8px; text-transform: uppercase; text-align: left; }
.vid .pl i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--p500); display: grid; place-items: center; }
.vid .pl i::after { content: ""; border-left: 11px solid var(--p900); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,24,25,.75), rgba(13,24,25,0) 55%); pointer-events: none; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
@media (max-width: 700px) { .vids { grid-template-columns: 1fr; } }
/* Topic cards */
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.topic { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 4px; background: #fff; border: 1px solid var(--n50); text-decoration: none; color: var(--black); transition: border-color .15s; }
.topic:hover { border-color: var(--p500); }
.topic b { font: 400 21px/1.2 var(--sans); letter-spacing: -.01em; }
.topic span { color: var(--n600); font-size: 15px; }
.topic .more { margin-top: auto; padding-top: 10px; }
@media (max-width: 900px) { .topics { grid-template-columns: 1fr; } }
/* Talk to us: the three ways in, large */
.talk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3vw; align-items: start; }
.talk__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.way { padding: 22px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.way:hover { border-color: var(--p500); }
.way .label { color: var(--p500); font-size: 11px; }
.way b { font: 300 24px/1.15 var(--sans); letter-spacing: -.02em; }
.way span { color: var(--n200); font-size: 14.5px; }
@media (max-width: 900px) { .talk { grid-template-columns: 1fr; gap: 22px; } .talk__ways { grid-template-columns: 1fr; } }

/* Reading: help articles and blog posts share one measure and type scale */
.reader { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding: 40px var(--pad) 72px; }
.toc { position: sticky; top: calc(var(--hdr-h) + 24px); display: flex; flex-direction: column; gap: 2px; }
.toc .label { color: var(--p800); margin-bottom: 10px; }
.toc a { padding: 8px 0 8px 12px; border-left: 2px solid var(--n50); color: var(--n600); text-decoration: none; font-size: 14.5px; }
.toc a:hover { color: var(--black); }
.toc a.on { border-left-color: var(--p500); color: var(--black); }
.prose { max-width: 720px; font-size: 17.5px; line-height: 1.65; color: #26302f; }
.prose h1 { font: 300 clamp(34px, 3.6vw, 56px)/1.05 var(--sans); letter-spacing: -.03em; color: var(--black); margin-bottom: 18px; }
.prose .lede { font-size: 20px; line-height: 1.5; color: var(--n600); margin-bottom: 28px; }
.prose h2 { font: 400 26px/1.2 var(--sans); letter-spacing: -.015em; color: var(--black); margin: 44px 0 12px; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.prose h3 { font: 500 18px/1.3 var(--sans); color: var(--black); margin: 28px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose a { color: var(--p800); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--p500); }
.prose ol { counter-reset: s; gap: 14px; }
.prose ol li { counter-increment: s; position: relative; padding-left: 46px; }
.prose ol li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .05em; font: 500 13px/1.6 var(--mono); color: var(--p800); }
.prose ol li b { color: var(--black); font-weight: 500; }
.prose .note { padding: 16px 18px; border-left: 3px solid var(--p600); background: rgba(208,255,251,.35); font-size: 16px; margin: 0 0 18px; }
.prose figure { margin: 26px 0; } .prose figure img { width: 100%; border-radius: 4px; } .prose figcaption { font: 400 12px/1.5 var(--mono); color: var(--n500); margin-top: 8px; }
.prose blockquote { margin: 26px 0; padding-left: 20px; border-left: 2px solid var(--p500); font: 300 24px/1.35 var(--sans); letter-spacing: -.01em; color: var(--black); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--n50); vertical-align: top; }
.prose th { font: 500 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); }
@media (max-width: 900px) { .reader { grid-template-columns: 1fr; gap: 20px; padding: 24px var(--pad) 44px; } .localnav ~ .reader .toc { display: none; } .toc { position: static; flex-direction: row; overflow-x: auto; gap: 0; scrollbar-width: none; } .toc .label { display: none; } .toc a { flex: none; border-left: 0; border-bottom: 2px solid var(--n50); padding: 8px 12px; white-space: nowrap; } .toc a.on { border-bottom-color: var(--p500); } .prose { font-size: 16.5px; } }

/* ==== Company pages: About us and its section (19 Oct 2026) ==== */
.chero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: end; padding: 48px var(--pad) 36px; }
.chero h1 { font: 300 clamp(44px, 5.4vw, 88px)/.98 var(--sans); letter-spacing: -.035em; }
.chero h1 span { color: var(--n400); }
.chero p { font-size: 19px; line-height: 1.5; color: var(--n600); max-width: 46ch; }
@media (max-width: 900px) { .chero { grid-template-columns: 1fr; gap: 16px; padding: 28px var(--pad) 24px; } .chero p { font-size: 17px; } }
.widepic { padding: 0 var(--pad); }
.widepic img { width: 100%; aspect-ratio: 2000 / 1000; object-fit: cover; object-position: 50% 30%; border-radius: 4px; }
@media (max-width: 900px) { .widepic img { aspect-ratio: 4 / 3; object-position: 40% 40%; } }
/* Big figures in a row */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.figs div { border-left: 1px solid var(--p500); padding-left: 16px; }
.figs b { display: block; font: 300 clamp(36px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -.03em; }
.figs span { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--n500); margin-top: 8px; }
.sec--dark .figs span { color: var(--n200); }
@media (max-width: 900px) { .figs { grid-template-columns: 1fr 1fr; gap: 26px 16px; } }
/* Story: words beside a picture */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw; align-items: center; }
.story blockquote { font: 300 clamp(28px, 3vw, 48px)/1.1 var(--sans); letter-spacing: -.025em; }
.story p { color: var(--n600); font-size: 17px; line-height: 1.6; margin-top: 18px; max-width: 54ch; }
.sec--dark .story p { color: var(--n200); }
.story img { width: 100%; border-radius: 4px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: 24px; } }
/* The team: portraits, name, role */
.team { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; }
.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: var(--n20); }
.person b { display: block; font: 400 17px/1.25 var(--sans); margin-top: 12px; letter-spacing: -.01em; }
.person span { display: block; font: 400 11px/1.45 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
@media (max-width: 1100px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .team { grid-template-columns: 1fr 1fr; gap: 22px 12px; } }
/* Values: a word and a line each */
.valuesrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.valuesrow div { padding: 20px; border-radius: 4px; background: #fff; border: 1px solid var(--n50); }
.valuesrow b { display: block; font: 400 22px/1.15 var(--sans); letter-spacing: -.015em; margin-bottom: 8px; }
.valuesrow span { color: var(--n600); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 1100px) { .valuesrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .valuesrow { grid-template-columns: 1fr; } }
/* Section cards: the company pages as pictures with names */
.secnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.secnav a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 20px; border-radius: 4px; overflow: hidden; color: #fff; text-decoration: none; background: var(--black); }
.secnav a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .25s, transform .4s; }
.secnav a:hover img { opacity: .7; transform: scale(1.03); }
.secnav a b, .secnav a span { position: relative; }
.secnav a b { font: 400 24px/1.1 var(--sans); letter-spacing: -.02em; }
.secnav a span { font-size: 14px; color: var(--n100); margin-top: 6px; }
.secnav a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,24,25,.92) 0%, rgba(13,24,25,.55) 45%, rgba(13,24,25,.1) 100%); }
.secnav a > * { z-index: 1; }
@media (max-width: 900px) { .secnav { grid-template-columns: 1fr; } .secnav a { min-height: 160px; } }
/* A wall of names (customers), set in two weights so it reads as a list, not a logo soup */
.names { columns: 4 220px; column-gap: 32px; list-style: none; }
.names li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--n50); font-size: 15.5px; color: var(--black); }
.names li span { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); }
/* Partner cards */
.partners2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.partners2 > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px; border-radius: 4px; background: #fff; border: 1px solid var(--n50); }
.partners2 img { max-width: 140px; max-height: 60px; object-fit: contain; }
.partners2 b { display: block; font: 400 22px/1.2 var(--sans); letter-spacing: -.01em; }
.partners2 span { color: var(--n600); font-size: 15px; }
@media (max-width: 900px) { .partners2 { grid-template-columns: 1fr; } .partners2 > div { grid-template-columns: 1fr; gap: 14px; } }
/* Documents: a quiet list of downloads */
.docs { list-style: none; border-top: 1px solid var(--n50); }
.docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--n50); }
.docs b { font-weight: 400; font-size: 16.5px; }
.docs small { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); margin-top: 3px; }

/* ==== Blog (19 Oct 2026) ==== */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 18px; }
.post { display: flex; flex-direction: column; text-decoration: none; color: var(--black); }
.post .pic { aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: var(--black); }
.post .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post:hover .pic img { transform: scale(1.03); }
.post .label { color: var(--p800); font-size: 11px; margin-top: 14px; }
.post b { font: 400 21px/1.22 var(--sans); letter-spacing: -.015em; margin-top: 8px; }
.post:hover b { color: var(--p800); }
.post p { color: var(--n600); font-size: 15px; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post small { font: 400 11px/1.4 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); margin-top: 10px; }
.post--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.post--lead .pic { aspect-ratio: 16 / 9; }
.post--lead b { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.post--lead p { font-size: 17px; -webkit-line-clamp: 4; }
@media (max-width: 1000px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .posts { grid-template-columns: 1fr; gap: 30px; } .post--lead { grid-template-columns: 1fr; gap: 0; } }
/* Article: the post's picture full width under its title, then the reader */
.arthead { padding: 40px var(--pad) 0; max-width: calc(980px + 2 * var(--pad)); }
.arthead .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 12px/1.4 var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--n500); margin-bottom: 16px; }
.arthead .meta a { color: var(--p800); text-decoration: none; }
.arthead h1 { font: 300 clamp(34px, 4vw, 64px)/1.04 var(--sans); letter-spacing: -.03em; }
.artpic { padding: 28px var(--pad) 0; }
.artpic img { width: 100%; max-height: 560px; object-fit: cover; border-radius: 4px; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose iframe { max-width: 100%; }

/* About us opens with the team (Simon 2026-10-19): the words and four figures on the left, the team on the right in a box cropped to
   the group (no logo, no empty teal around them). The background is set the way the RSNA banner sets its scene
   (growth/events/outputs/2026-10-05-explorer-banner): a seamless teal studio sweep lit to near white on the floor, the people grounded
   by their own contact shadows (make_team.py). A white sign behind the heads, a wall with a floor line, a corner logo and a full-width
   box were tried first and dropped the same day. */
.teamintro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 36px var(--pad) 64px; }
.teamintro h1 { font: 300 clamp(44px, 5vw, 84px)/.98 var(--sans); letter-spacing: -.035em; }
.teamintro h1 span { color: var(--n400); }
.teamintro p { font-size: 18px; line-height: 1.5; color: var(--n600); max-width: 42ch; margin-top: 20px; }
.teamintro .figs { grid-template-columns: 1fr 1fr; gap: 26px 20px; margin-top: 36px; }
.teamintro .figs b { font-size: clamp(30px, 2.6vw, 42px); }
.teamhero { position: relative; aspect-ratio: 1.67 / 1; border-radius: 4px; overflow: hidden; isolation: isolate;
  background: radial-gradient(85% 110% at 52% 100%, #FFFFFF 0%, #F1FCFB 14%, #C9F2EE 32%, #9CE6E0 52%, #86DAD2 68%, #6CC8BF 86%, #5CBEB5 100%); }
.teamhero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.teamhero .people { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; }   /* the picture is the group plus 5% shadow room each side */
@media (max-width: 1000px) { .teamintro { grid-template-columns: 1fr; gap: 26px; padding: 24px var(--pad) 44px; } .teamintro p { font-size: 17px; } .teamintro .figs { grid-template-columns: repeat(4, 1fr); margin-top: 26px; } }
@media (max-width: 600px) { .teamintro .figs { grid-template-columns: 1fr 1fr; } }

/* Then and now: Spencer in the early days (the live site's own photo, about-mriaudio.jpg) beside Spencer today (a still from his film) */
.thennow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.thennow figure { margin: 0; }
.thennow img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.thennow figcaption, .stills figcaption { font: 500 11px/1.4 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--n500); margin-top: 10px; }
/* Stills from the CEO film: designed, built and shipped in Carlsbad */
.stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stills figure { margin: 0; }
.stills img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media (max-width: 900px) { .stills { grid-template-columns: 1fr; gap: 22px; } .stills img { aspect-ratio: 16 / 9; } }

/* ==== Customer stories (19 Oct 2026, Simon: "WAY more compelling") ==== */
/* The opening: the headline and figures over a mosaic of real installs from the Installation Index */
.cshero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 36px var(--pad) 56px; }
.cshero h1 { font: 300 clamp(44px, 5vw, 84px)/.98 var(--sans); letter-spacing: -.035em; }
.cshero h1 span { color: var(--n400); }
.cshero p { font-size: 18px; line-height: 1.5; color: var(--n600); max-width: 40ch; margin-top: 20px; }
.cshero .figs { grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-top: 34px; }
.cshero .figs b { font-size: clamp(30px, 2.6vw, 42px); }
.mosaic { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1.45 / 1; }
.mosaic figure { position: relative; margin: 0; border-radius: 4px; overflow: hidden; }
.mosaic figure:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic figcaption, .install figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; padding: 6px 9px; border-radius: 3px; background: rgba(13,24,25,.72); color: #fff;
  font: 500 10.5px/1.35 var(--mono); letter-spacing: .8px; text-transform: uppercase; width: fit-content; max-width: calc(100% - 20px); backdrop-filter: blur(6px); }
@media (max-width: 1000px) { .cshero { grid-template-columns: 1fr; gap: 26px; padding: 24px var(--pad) 40px; } .cshero .figs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .cshero .figs { grid-template-columns: 1fr 1fr; } .mosaic { aspect-ratio: 1 / 1.05; } }

/* The lead story: a big picture, the facts large beside it */
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border-radius: 4px; overflow: hidden; background: var(--black); color: #fff; }
.lead img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.lead .txt { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 18px; }
.lead .label { color: var(--p500); }
.lead h2 { font: 300 clamp(30px, 3vw, 48px)/1.06 var(--sans); letter-spacing: -.025em; }
.lead h2 span { color: var(--n400); }
.lead p { color: var(--n200); font-size: 16.5px; line-height: 1.55; }
.lead .figs { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: auto; }
.lead .figs div { border-left-color: var(--p500); }
.lead .figs span { color: var(--n200); }
@media (max-width: 900px) { .lead { grid-template-columns: 1fr; } .lead img { min-height: 0; aspect-ratio: 16 / 10; } .lead .txt { padding: 26px 22px 28px; } }

/* Installs: photos from Sami's install folders, each with where and what */
.installs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 12px; }
.install { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: var(--n50); }
.install img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.install:hover img { transform: scale(1.03); }
.install--tall { grid-row: span 2; }
.install--wide { grid-column: span 2; }
.install figcaption b { display: block; font: 500 13px/1.25 var(--sans); letter-spacing: 0; text-transform: none; margin-bottom: 2px; }
@media (max-width: 1000px) { .installs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } }
@media (max-width: 600px) { .installs { grid-auto-rows: 180px; gap: 8px; } .install figcaption { font-size: 9.5px; } .install figcaption b { font-size: 12px; } }

/* The map: every installation since January 2025, one dot each */
.mapwrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; }
.usmap { width: 100%; height: auto; display: block; }
.usmap .land { fill: #E7EDEE; stroke: #fff; stroke-width: 1; }
.usmap .dot { fill: var(--p600); stroke: #fff; stroke-width: 1; opacity: .9; }
.usmap .dot.big { fill: var(--p800); }
.usmap .halo { fill: var(--p500); opacity: .22; }
.usmap text { font: 500 11px/1 var(--mono); letter-spacing: .6px; fill: var(--n600); text-transform: uppercase; }
.installist { list-style: none; max-height: 560px; overflow: auto; border-top: 1px solid var(--n100); scrollbar-width: thin; }
.installist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--n50); }
.installist b { font-weight: 400; font-size: 15px; }
.installist span { font: 400 11px/1.4 var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--n500); }
.installist time { font: 400 11px/1.4 var(--mono); letter-spacing: .5px; color: var(--n500); text-align: right; }
.installist li.hl b { color: var(--p800); font-weight: 500; }
.maptip { position: absolute; pointer-events: none; padding: 6px 9px; border-radius: 3px; background: var(--black); color: #fff; font: 500 12px/1.3 var(--sans); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.maptip small { display: block; font: 400 10.5px/1.4 var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--n200); }
@media (max-width: 1000px) { .mapwrap { grid-template-columns: 1fr; gap: 24px; } .installist { max-height: 380px; } }
/* The map in two layers (Simon 2026-10-19: "frame it as installations in 2026… signal that we're very active"): this year's
   installs bright, each with a slow ring at its own moment; every other customer faint underneath. No counts. */
.usmap .dot.old { fill: var(--p500); opacity: .38; stroke: none; }
.usmap .dot.new { fill: var(--p700); stroke: #fff; stroke-width: 1.2; opacity: 1; }
.usmap .ring { fill: none; stroke: var(--p600); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 3.6s ease-out infinite; opacity: 0; }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .usmap .ring { animation: none; } }
.maplegend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font: 500 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n600); }
.maplegend span { display: inline-flex; align-items: center; gap: 8px; }
.maplegend i { width: 10px; height: 10px; border-radius: 50%; background: var(--p700); box-shadow: 0 0 0 3px rgba(82,183,174,.3); }
.maplegend i.old { background: var(--p500); opacity: .5; box-shadow: none; }

/* LinkedIn on the team (Simon 2026-10-19: a very active LinkedIn from this week): each person's name links to their profile */
.person .in { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: -2px; border-radius: 3px; color: #0A66C2; }
.person .in svg { width: 16px; height: 16px; fill: currentColor; }
.person a.pic { display: block; border-radius: 4px; overflow: hidden; }
.person a.pic img { transition: transform .4s; }
.person a.pic:hover img { transform: scale(1.03); }
/* Follow along: the company on LinkedIn and YouTube, a picture and a name each */
.follow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.follow a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 24px; border-radius: 4px; overflow: hidden; color: #fff; text-decoration: none; background: var(--black); }
.follow a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.follow a:hover img { transform: scale(1.03); }
.follow a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,24,25,.9) 0%, rgba(13,24,25,.35) 50%, rgba(13,24,25,0) 100%); }
.follow a > * { position: relative; z-index: 1; }
.follow .logo-badge { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.follow .logo-badge svg { width: 26px; height: 26px; fill: #fff; }
.follow b { font: 300 clamp(26px, 2.4vw, 38px)/1.1 var(--sans); letter-spacing: -.02em; margin-top: 10px; }
.follow .go { margin-top: 14px; font: 500 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--p500); }
.follow .go::after { content: " →"; }
@media (max-width: 700px) { .follow { grid-template-columns: 1fr; } .follow a { min-height: 220px; } }
/* Contact us: the local navigation's last item as a secondary button (Simon 2026-10-19) */
.localnav a.btn { height: 34px; align-self: center; margin-bottom: 0; border-bottom: .615px solid var(--p800); padding: 0 16px; color: var(--p800); }
.localnav a.btn:hover { background: rgba(129,216,208,.12); }
/* the LinkedIn card on the team picture's own teal sweep (Simon 2026-10-19: "the background is super dark, it should be that teal"); dark words on it */
.follow a.follow--team { color: var(--black); background: radial-gradient(85% 110% at 66% 100%, #FFFFFF 0%, #F1FCFB 14%, #C9F2EE 32%, #9CE6E0 52%, #86DAD2 68%, #6CC8BF 86%, #5CBEB5 100%); }
.follow a.follow--team .logo-badge svg { fill: #0A66C2; }
.follow a.follow--team .go { color: var(--p900); }
.follow a.follow--team img { left: auto; right: -2%; top: auto; bottom: 0; width: 70%; height: 94%; object-fit: contain; object-position: 100% 100%; }
.follow a.follow--team::after { display: none; }
@media (max-width: 700px) { .follow a.follow--team img { width: 82%; right: -8%; } }
.follow .go { color: #fff; }
.follow a.follow--team .go { color: var(--p900); }
/* Contact us in the bar, the secondary action beside Get your quote (Simon 2026-10-19); on phones it lives in the menu sheet */
.hdr .hdr-contact { color: var(--p800); }
@media (min-width: 901px) { .hdr .hdr-contact + .btn { margin-left: -16px; } }   /* desktop only: the two buttons sit together (on phones it pushed Get your quote over the logo) */
@media (max-width: 900px) { .hdr .hdr-contact { display: none; } }
/* The YouTube card's words on a frosted dark panel (class .frost: .panel is the header's Products menu), so they read over the film still (Simon 2026-10-19) */
.follow .frost { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; padding: 16px 20px 18px; border-radius: 4px;
  background: rgba(13,24,25,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.follow .frost b { margin-top: 8px; }
.follow .frost .go { margin-top: 10px; }

/* ==== Touch targets (20 Oct 2026, the end-to-end test): on touch screens every small control gets an invisible 44 px hit area, drawn as a
   pseudo-element around it, so nothing visible changes (the bar's sizes, the small mono links and the add buttons are Simon's). ==== */
@media (pointer: coarse) {
  .btn, .more, .burger, .hdr .cart, .shopcard .add, .suggest .add, .chips button, .stepper button, .line .rm, .person .in, .social a, .seg button,
  .site-footer__contact a, .arthead .meta a, .docs .more, .gallery .thumbs button, .films__list button, .arrows button, .helpline a, .assure a, .faq__head p a,
  .hint, .sheet__nav a, .scard, .localnav a, .topic, .way, .linklist a, .picker button, .toc a, .cmplz-link, .woocommerce-form a, .woocommerce-form .show-password-input, .mri-signin-note a { position: relative; }
  .btn::before, .burger::before, .hdr .cart::before, .shopcard .add::before, .suggest .add::before, .chips button::before, .stepper button::before, .line .rm::before,
  .person .in::before, .social a::before, .seg button::before, .site-footer__contact a::before, .arthead .meta a::before, .gallery .thumbs button::before,
  .arrows button::before, .helpline a::before, .assure a::before, .faq__head p a::before, .cmplz-link::before, .woocommerce-form a::before, .woocommerce-form .show-password-input::before, .mri-signin-note a::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: -4px; right: -4px; }
  .more::before, .docs .more::before, .arthead .meta a::before { top: -16px; bottom: -16px; left: -6px; right: -6px; }
  .site-footer__contact a::before, .assure a::before, .faq__head p a::before, .helpline a::before, .cmplz-link::before, .woocommerce-form a::before, .mri-signin-note a::before { top: -13px; bottom: -13px; }
  .woocommerce-form .show-password-input::before { top: -20px; bottom: -20px; left: -20px; right: -20px; }
  .person .in::before, .social a::before { top: -13px; bottom: -13px; left: -13px; right: -13px; }
  .hdr .cart::before { top: -8px; bottom: -8px; left: -8px; right: -8px; }
  .burger::before { top: -6px; bottom: -6px; left: -6px; right: -6px; }
  .line .rm::before { top: -8px; bottom: -8px; left: -8px; right: -8px; }
  .often label, .opt { min-height: 44px; }
  .often input, .opt input { width: 20px; height: 20px; }
}

/* ==== Contrast (20 Oct 2026, Lighthouse on the prototype): small text passes 4.5:1 on every background it sits on ==== */
.chips .n { opacity: 1; }
.shopcard .row s, .chooser .price s, .buybox .price s, .pcard .price s { color: var(--n600); }
.promo--dark .more, .lead .more, .follow .more, .sec--dark .more, .closing .more { color: var(--p500); }
.prose ol li::before { color: var(--p800); }
.grid:empty { min-height: 40vh; }   /* the shop grid fills in from the catalogue: hold its place so the page doesn't jump */
@media (max-width: 420px) { .closing .ctas { grid-template-columns: 1fr; } }   /* narrow phones: three closing buttons stack (a long third label widened the page at 360, 20 Oct 2026) */

/* ==== The consent banner (Complianz) in the site's colours, so its links and buttons pass 4.5:1 (Lighthouse on staging, 20 Oct 2026) ==== */
.cmplz-cookiebanner .cmplz-links a.cmplz-link, .cmplz-cookiebanner a.cmplz-link { color: var(--p800) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--p900) !important; border-color: var(--p900) !important; color: #fff !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { color: var(--black) !important; border-color: var(--n200) !important; background: #fff !important; }

/* The careers application (Gravity Forms form 12) in the site's fields: mono labels, quiet borders, the progress bar in the brand, the site's buttons */
.gfwrap .gform_wrapper { max-width: 880px; }
.gfwrap .gform_wrapper .gform_heading, .gfwrap .gform_wrapper .gform_required_legend, .gfwrap .gf_progressbar_percentage span { display: none; }
.gfwrap .gform_wrapper .gf_progressbar_wrapper { margin: 0 0 28px; }
.gfwrap .gform_wrapper .gf_progressbar_title { font: 500 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-bottom: 8px; }
.gfwrap .gform_wrapper .gf_progressbar { background: var(--n50); border-radius: 2px; height: 4px; padding: 0; box-shadow: none; }
.gfwrap .gform_wrapper .gf_progressbar_percentage { background: var(--p500); height: 4px; border-radius: 2px; }
.gfwrap .gform_wrapper .gsection { border: 0; padding: 0; margin: 28px 0 4px; }
.gfwrap .gform_wrapper .gsection_title { font: 400 22px/1.2 var(--sans); letter-spacing: -.01em; color: var(--black); margin: 0 0 8px; }
.gfwrap .gform_wrapper .gfield_label, .gfwrap .gform_wrapper legend.gfield_label { font: 500 11px/1.4 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--n500); margin-bottom: 6px; }
.gfwrap .gform_wrapper .ginput_complex label, .gfwrap .gform_wrapper .gfield_description, .gfwrap .gform_wrapper .ginput_container_fileupload .gform_fileupload_rules { font: 400 12.5px/1.4 var(--sans); color: var(--n500); margin-top: 4px; }
.gfwrap .gform_wrapper input[type="text"], .gfwrap .gform_wrapper input[type="email"], .gfwrap .gform_wrapper input[type="tel"], .gfwrap .gform_wrapper input[type="number"], .gfwrap .gform_wrapper input[type="url"], .gfwrap .gform_wrapper select, .gfwrap .gform_wrapper textarea {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--n200); border-radius: 0; background: transparent; font: 400 16px/1.5 var(--sans); color: var(--black); appearance: none; -webkit-appearance: none; box-shadow: none; min-height: 44px; }
.gfwrap .gform_wrapper textarea { min-height: 110px; resize: vertical; border: 1px solid var(--n100); border-radius: 4px; padding: 10px 12px; }
.gfwrap .gform_wrapper input:focus, .gfwrap .gform_wrapper select:focus, .gfwrap .gform_wrapper textarea:focus { outline: none; border-color: var(--p700); box-shadow: 0 1px 0 var(--p700); }
.gfwrap .gform_wrapper select { background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23595959' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat right 4px center / 12px; padding-right: 24px; }
.gfwrap .gform_wrapper .gfield { margin-bottom: 18px; }
.gfwrap .gform_wrapper .ginput_complex { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.gfwrap .gform_wrapper .ginput_complex > span, .gfwrap .gform_wrapper .ginput_complex .ginput_full { display: block; }
.gfwrap .gform_wrapper .ginput_complex .ginput_full { grid-column: 1 / -1; }
.gfwrap .gform_wrapper .gfield_radio, .gfwrap .gform_wrapper .gfield_checkbox { display: grid; gap: 8px; }
.gfwrap .gform_wrapper .gfield_radio label, .gfwrap .gform_wrapper .gfield_checkbox label { font: 400 15px/1.4 var(--sans); color: var(--black); margin: 0 0 0 8px; }
.gfwrap .gform_wrapper input[type="file"] { font: 400 14px/1.4 var(--sans); color: var(--n600); }
.gfwrap .gform_wrapper .gform_footer, .gfwrap .gform_wrapper .gform_page_footer { display: flex; gap: 12px; margin: 24px 0 0; padding: 0; border: 0; }
.gfwrap .gform_wrapper .gform_button, .gfwrap .gform_wrapper .gform_next_button, .gfwrap .gform_wrapper .gform_previous_button {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 3px; border: 1px solid transparent; cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; background: var(--p500); color: var(--p900); }
.gfwrap .gform_wrapper .gform_button:hover, .gfwrap .gform_wrapper .gform_next_button:hover { background: var(--p400); }
.gfwrap .gform_wrapper .gform_previous_button { background: transparent; border-color: currentColor; color: var(--p800); }
.gfwrap .gform_wrapper .validation_message, .gfwrap .gform_wrapper .gform_validation_errors { font: 400 13px/1.4 var(--sans); color: #B3261E; background: transparent; border: 0; padding: 4px 0 0; box-shadow: none; }
.gfwrap .gform_wrapper .gform_confirmation_message { font: 400 18px/1.4 var(--sans); color: var(--black); }
@media (max-width: 640px) { .gfwrap .gform_wrapper .ginput_complex { grid-template-columns: 1fr; } }

/* The cookie settings page (Complianz's policy document): its lists in the article style, its data-request form in the site's fields */
.prose ul li, .prose ol li { list-style: none; }
.prose #cmplz-datarequest-form { display: grid; gap: 12px; margin: 16px 0 24px; max-width: 520px; }
.prose #cmplz-datarequest-form label { font: 400 14px/1.4 var(--sans); color: var(--n600); display: flex; align-items: center; gap: 10px; }
.prose #cmplz-datarequest-form input[type="text"], .prose #cmplz-datarequest-form input[type="email"] { width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--n200); border-radius: 0; background: transparent; font: 400 16px/1.5 var(--sans); color: var(--black); appearance: none; }
.prose #cmplz-datarequest-form input[type="text"]:focus, .prose #cmplz-datarequest-form input[type="email"]:focus { outline: none; border-color: var(--p700); box-shadow: 0 1px 0 var(--p700); }
.prose #cmplz-datarequest-form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--p700); flex: none; }
.prose #cmplz-datarequest-form input[type="submit"], .prose #cmplz-datarequest-form input[type="button"], .prose #cmplz-datarequest-form button { width: auto; justify-self: start; display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 3px; border: 0; cursor: pointer; font: 500 12px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; background: var(--p500); color: var(--p900); }