/* ===========================================================================
   NuStyle Aluminium Windows & Doors - Papatoetoe, Auckland
   ---------------------------------------------------------------------------
   Cloned from brightstarelectricalnz.co.nz (2026-10-07) and re-themed to the
   client's own brand: the 2025 brochures put a WHITE "NuStyle" wordmark on a
   deep NAVY ground, so the header, footer and dark bands are that navy and the
   logo sits on them as if part of them (it is white only and can never sit on
   white). The accent is the teal of the entrance door in the client's own
   Dannemora photographs. The references Richard gave (vantage.co.nz,
   nzwindows.co.nz) are white, photographic and sparing with colour; so is this.

   Every ratio below is MEASURED (WCAG relative-luminance formula), and the
   numbers decide which token carries text:

       white    on #0B2540 navy      = 15.6:1   header nav, navy bands, footer
       #152233  on white             = 15.9:1   body copy
       #0E7A93  teal-ink on white    =  4.9:1   accent TEXT and links on white
       #5FD6EE  teal-light on navy   =  9.1:1   accent text and icons on navy
       #0B2540  navy on #35C3E2 teal =  7.4:1   the BUTTON - navy ink on a teal fill
       white    on #35C3E2 teal      =  2.1:1   NEVER text. Never white on the teal.
       #4A5869  muted on white       =  7.3:1   secondary copy

   The teal is an ACCENT and a FILL under navy ink. It never carries white
   text, and the fleet float bar is re-themed the same way (navy icons on
   teal, not the component's white default).
   =========================================================================== */

:root {
  --ink:          #0B2540;   /* brand navy: header, footer, dark sections, headings */
  --ink-2:        #10325A;   /* the slightly lighter navy: utility bar, form panel */
  --text:         #152233;   /* body copy */
  --brand:        #35C3E2;   /* teal fill - buttons, icons, rules. Never carries white */
  --brand-dk:     #1FB0D1;   /* hover on a teal surface */
  --brand-txt:    #0E7A93;   /* teal for TEXT on white - 4.9:1 */
  --brand-lt:     #5FD6EE;   /* teal for text and icons on navy - 9.1:1 */
  --muted:        #4A5869;   /* secondary copy on white - 7.3:1 */
  --line:         #D9E0E8;
  --band:         #F2F5F8;   /* light cool band */
  --white:        #ffffff;
  --shadow:       0 10px 34px rgba(11,37,64,.10);
  --shadow-lg:    0 22px 60px rgba(11,37,64,.22);

  --wrap:         1200px;
  --pad:          clamp(20px, 4vw, 34px);
  --sec-y:        clamp(56px, 7.2vw, 96px);
  --radius:       4px;

  --hdr-h:        84px;
  --hdr-h-stuck:  66px;
  --util-h:       38px;

  /* Float bar (fleet component) - overridable from /dash via /api/config. Navy on teal, the same
     pairing as the primary button; white on this teal is 2.1:1. */
  --fb-bg:        var(--brand);
  --fb-icon:      #0B2540;
  --fb-hover-bg:  var(--ink);
  --fb-hover-icon:#ffffff;
}

/* --------------------------------------------------------------- fonts
   Self-hosted, latin subset only. Montserrat 800 for display - the heavy
   geometric sans the wordmark and the client's brochures use - and the Inter
   variable face for everything else. Two files, about 67 kB. */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-800-latin.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  color: var(--text);
  background: var(--white);
  font-feature-settings: "cv05" 1, "cv11" 1;
  /* NOT overflow-x: hidden - that hides a real horizontal overflow rather than fixing it. */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--brand-txt); }
h1, h2, h3, h4 {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--brand-txt); outline-offset: 3px; }
.hdr :focus-visible, .util :focus-visible, .sec--dark :focus-visible, .ftr :focus-visible { outline-color: var(--brand-lt); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- buttons
   Components must beat prose: `.prose a` is (0,1,1) and `.btn` is (0,1,0), so
   body-link rules below are scoped with :not(.btn):not(.tlink). */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 26px;
  background: var(--brand); color: var(--ink);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 2px solid var(--brand); border-radius: var(--radius);
  cursor: pointer; transition: background .16s, color .16s, border-color .16s, transform .16s;
}
/* The arrow glyph, drawn as a CSS mask so a colour change is one rule. The arrow is a hole in the
   disc (fill-rule evenodd) - a mask uses the alpha channel only. */
.btn::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/></svg>") center/contain no-repeat;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.btn:hover::before { background: var(--brand-lt); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ghost:hover::before { background: var(--brand-lt); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light::before { background: var(--brand-txt); }
.btn--light:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn--light:hover::before { background: var(--ink); }
.btn--full { width: 100%; justify-content: center; }
.btn--sm { padding: 11px 18px; font-size: 13px; }

.tlink {
  color: var(--brand-txt); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(14,122,147,.35);
}
.tlink:hover { border-bottom-color: var(--brand-txt); }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-txt); margin-bottom: 12px;
}

/* --------------------------------------------------------------- utility bar */
.util { background: var(--ink-2); color: #fff; }
.util__in {
  min-height: var(--util-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
}
.util__tag { color: rgba(255,255,255,.9); }
.util__phone { color: #fff; text-decoration: none; white-space: nowrap; }
.util__phone:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .util__tag { display: none; }
  .util__in { justify-content: center; }
}

/* --------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--ink); border-bottom: 0;
  transition: box-shadow .2s;
}
.hdr[data-stuck] { box-shadow: 0 4px 22px rgba(11,37,64,.32); }
.hdr__in {
  min-height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  transition: min-height .2s;
}
.hdr[data-stuck] .hdr__in { min-height: var(--hdr-h-stuck); }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: #fff; flex: 0 0 auto; }
/* The client's wordmark (760x220), height-driven. */
.brand__logo { height: 42px; width: auto; transition: height .2s; }
.hdr[data-stuck] .brand__logo { height: 34px; }
@media (max-width: 560px) { .brand__logo { height: 34px; } }

/* nowrap on purpose: with wrap, the last item drops to a second row and the header grows. The
   burger takes over at 1180px, which is where six items plus the CTA stop fitting. */
.nav { display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; margin-left: auto; }
.nav > a, .nav__dropbtn {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav > a:hover, .nav__dropbtn:hover,
.nav > a[aria-current="page"], .nav__drop[data-current] .nav__dropbtn { color: var(--brand-lt); }

.nav__drop { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 268px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand);
  box-shadow: var(--shadow); padding: 8px; border-radius: var(--radius);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s;
}
.nav__drop:hover .nav__panel,
.nav__drop:focus-within .nav__panel,
.nav__drop[data-open] .nav__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* The bridge across the gap between the button and the panel - a hover journey must not drop. */
.nav__drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav__panel a {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  text-transform: none; letter-spacing: 0;
  color: var(--ink); text-decoration: none; padding: 9px 13px; border-radius: 3px;
}
.nav__panel a:hover, .nav__panel a[aria-current="page"] { background: var(--band); color: var(--brand-txt); }
.nav__panel-hub { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 12px !important; font-weight: 700 !important; }

.hdr__cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hdr__quote {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--brand); color: var(--ink); text-decoration: none;
  padding: 12px 20px; border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .16s;
}
.hdr__quote svg { color: var(--ink); }
.hdr__quote:hover { background: #fff; }

.burger { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; height: 2.5px; background: #fff; margin: 4px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu. Collapsed in CSS from the FIRST paint; a no-JS visitor gets the full list from the
   <noscript><style> in layout.html's head. Collapsing it only under a class site.js adds painted
   the menu open and then closed it, moving the whole page: CLS 0.717 on the fleet, 2026-10-06. */
.nav-m { display: none; border-top: 1px solid rgba(255,255,255,.18); padding: 10px var(--pad) 22px; background: #fff; max-height: calc(100vh - var(--hdr-h-stuck)); overflow-y: auto; }
.nav-m a {
  display: block; padding: 11px 2px; text-decoration: none; color: var(--ink);
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.nav-m__label {
  margin: 18px 0 2px; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-txt);
}
.nav-m__cta {
  margin-top: 14px; text-align: center; background: var(--brand); color: var(--ink) !important;
  border-radius: var(--radius); border-bottom: 0 !important; text-transform: uppercase;
  letter-spacing: .05em; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 800;
}
.nav-m__cta--alt { background: var(--ink); color: #fff !important; }

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav-m[data-open] { display: block; }
}
@media (max-width: 560px) {
  .hdr__quote span { display: none; }
  .hdr__quote { padding: 12px 14px; }
}

/* --------------------------------------------------------------- hero
   Photo, navy gradient in the lower half, copy bottom-left. The gradient does
   not cover the whole photograph - the photograph is the point. */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
/* 🔴 The <picture> wrapper must fill the box too. The <img> is `height: 100%` OF ITS PARENT, and
   that parent is the <picture>, whose own height was auto - so the photo rendered at its natural
   aspect ratio (1440 wide = 810 tall) and ignored the section. Wherever a section was taller it
   left a navy gap (the phone hero), and wherever it was shorter the photo spilled over the next
   section (the FAQ background on /new-builds/ hid the heading below it; Richard's screenshot,
   2026-10-07). Give the wrapper the full height and the img's percentage resolves correctly. */
.hero__bg picture, .faq-sec__bg picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,37,64,.94) 12%, rgba(11,37,64,.72) 42%, rgba(11,37,64,.18) 78%, rgba(11,37,64,.05) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  min-height: clamp(460px, 68vh, 720px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(60px, 12vh, 130px); padding-bottom: clamp(38px, 6vh, 66px);
  color: #fff;
}
.hero--sm .hero__in { min-height: clamp(340px, 46vh, 480px); }
/* No photograph: a navy band with a faint grid, as the brochure covers have. */
.hero--plain { background: var(--ink); }
.hero--plain::after {
  background: linear-gradient(0deg, rgba(11,37,64,.3), rgba(11,37,64,0)),
    repeating-linear-gradient(60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
}
.hero--plain .hero__in { min-height: clamp(300px, 36vh, 400px); padding-top: clamp(40px, 6vh, 70px); }
.hero__copy { max-width: 780px; }
.hero .eyebrow { color: var(--brand-lt); }
.hero h1 { color: #fff; margin-bottom: .38em; }
/* Display type scales to the CONTENT. build.mjs measures each H1 and stamps the bucket. */
h1[data-len="short"] { font-size: clamp(34px, 5.6vw, 62px); }
h1[data-len="long"]  { font-size: clamp(30px, 4.7vw, 52px); }
h1[data-len="xlong"] { font-size: clamp(27px, 3.9vw, 44px); }
.hero__lede { font-size: clamp(16.5px, 1.5vw, 18.5px); color: rgba(255,255,255,.93); max-width: 700px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero__cta .btn--ghost::before { background: var(--brand-lt); }
.hero__cta .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero__cta .btn--ghost:hover::before { background: var(--ink); }
.hero .eyebrow, .hero h1, .hero__lede { text-shadow: 0 1px 2px rgba(11,37,64,.55), 0 2px 18px rgba(11,37,64,.45); }
.hero--plain .eyebrow, .hero--plain h1, .hero--plain .hero__lede { text-shadow: none; }

/* Breadcrumb inside the hero: a quiet line above the eyebrow. */
.crumbs { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: rgba(255,255,255,.78); }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: '/'; color: rgba(255,255,255,.45); }
.crumbs a { color: rgba(255,255,255,.88); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------- home hero */
.hero--home .hero__in { min-height: clamp(520px, 78vh, 820px); }
.hero--home::after {
  background: linear-gradient(0deg, rgba(11,37,64,.92) 10%, rgba(11,37,64,.62) 36%, rgba(11,37,64,.12) 66%, rgba(11,37,64,0) 100%);
}
.hero--home .hero__bg img { object-position: 50% 50%; }
@media (max-width: 700px) {
  .hero--home::after {
    background: linear-gradient(0deg, rgba(11,37,64,.94) 12%, rgba(11,37,64,.72) 48%, rgba(11,37,64,.30) 80%, rgba(11,37,64,.08) 100%);
  }
}
/* The home hero's drone loop. site.js starts it after the page has loaded; the photograph beneath
   is what paints first, what a crawler sees and what stays if the loop never starts. It fades in
   only once it is actually PLAYING, so a slow connection shows the still until the frames are
   there and never a black box. Paint order: photo, video, the navy gradient (.hero::after), copy. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.hero__video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* --------------------------------------------------------------- trust strip */
.trust { background: var(--ink-2); color: #fff; }
.trust__in {
  display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2.4vw, 34px);
  justify-content: center; padding: 20px 0;
}
.trust__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(11.5px, 1.05vw, 12.5px); letter-spacing: .05em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
@media (max-width: 720px) { .trust__item { white-space: normal; } }
.trust__item svg { color: var(--brand-lt); flex: 0 0 auto; }

/* --------------------------------------------------------------- sections */
.sec { padding: var(--sec-y) 0; }
.sec--white { background: #fff; }
.sec--band { background: var(--band); }
.sec--dark { background: var(--ink); color: rgba(255,255,255,.92); }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark .eyebrow { color: var(--brand-lt); }
.sec--dark a:not(.btn):not(.tlink) { color: var(--brand-lt); }
.sec--dark .tlink { color: #fff; border-bottom-color: var(--brand-lt); }

.sec__head { max-width: 800px; margin-bottom: clamp(30px, 4vw, 46px); }
.sec__head--c { margin-left: auto; margin-right: auto; text-align: center; }
.sec h2 { font-size: clamp(28px, 3.4vw, 44px); }
.sec__head p { font-size: 17.5px; color: var(--muted); margin-bottom: 0; }
.sec__head p + p { margin-top: 1em; }
.sec--dark .sec__head p { color: rgba(255,255,255,.86); }
.sec__after { margin-top: 26px; }
.sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; flex-wrap: wrap; }
.sec__head--row > div { max-width: 760px; }

/* --------------------------------------------------------------- prose */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 33px); margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(19px, 1.8vw, 23px); margin-top: 1.5em; }
.prose > p:first-of-type { font-size: 18.5px; }
.prose a:not(.btn):not(.tlink) { color: var(--brand-txt); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):not(.tlink):hover { color: var(--ink); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 32px; margin-bottom: .6em; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand);
}
.prose ul li::after {
  content: ''; position: absolute; left: 5px; top: .68em;
  width: 10px; height: 6px; border-left: 2.4px solid var(--ink); border-bottom: 2.4px solid var(--ink);
  transform: rotate(-45deg);
}
.prose ol { padding-left: 1.3em; }
.prose ol li::marker { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--brand-txt); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 0 0 1.2em; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; color: var(--ink); }

/* Two-column: prose left, media right. */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.split--flip .split__media { order: -1; }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
/* The copy column on a product page is tall and the media column one photograph; sticky keeps
   the photograph in view. Desktop only. */
@media (min-width: 901px) {
  .split__media { position: sticky; top: calc(var(--hdr-h) + 22px); }
  .split--port { grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media--port img { max-height: 70vh; width: auto; margin: 0 auto; }
}

/* --------------------------------------------------------------- cards
   Photo, bold heading, copy. The whole tile is the link, so the markup is <a>
   with <span> children. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: clamp(24px, 3vw, 38px); }
/* Four cards sit four across on a wide screen rather than three and an orphan. */
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.2vw, 28px); } }
.card { display: block; text-decoration: none; color: inherit; }
.card__img { display: block; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__img img { transform: scale(1.045); }
.card__body { display: block; padding-top: 17px; }
.card h3 { font-size: 20px; margin-bottom: .42em; }
.card__p { display: block; font-size: 15.5px; line-height: 1.62; color: var(--muted); }
.card__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-txt);
}
.card__more::after {
  content: ''; width: 15px; height: 9px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M0 5h15L11 1l1.4-1.4L19 6l-6.6 6.4L11 11l4-4H0z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M0 5h15L11 1l1.4-1.4L19 6l-6.6 6.4L11 11l4-4H0z' fill='black'/></svg>") center/contain no-repeat;
  transition: transform .2s;
}
.card:hover .card__more::after { transform: translateX(4px); }
.sec--dark .card h3 { color: #fff; }
.sec--dark .card__p { color: rgba(255,255,255,.82); }
.sec--dark .card__more { color: var(--brand-lt); }

/* --------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.stat__n { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(34px, 4vw, 54px); line-height: 1; color: var(--brand-lt); letter-spacing: -.02em; }
.stat__l { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.86); }

/* --------------------------------------------------------------- tick list */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px 36px; }
.ticks li { position: relative; padding-left: 44px; margin: 0; font-size: 16.5px; }
.ticks li strong { font-weight: 700; color: var(--ink); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .16em;
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand);
}
.ticks li::after {
  content: ''; position: absolute; left: 8px; top: .58em;
  width: 12px; height: 7px; border-left: 2.6px solid var(--ink); border-bottom: 2.6px solid var(--ink);
  transform: rotate(-45deg);
}
.sec--dark .ticks li { color: rgba(255,255,255,.94); }
.sec--dark .ticks li strong { color: #fff; }

/* --------------------------------------------------------------- numbered steps */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 26px; }
.steps li { counter-increment: s; position: relative; padding-left: 66px; margin: 0; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px;
  color: var(--brand-txt); line-height: 1;
}
.steps h3 { font-size: 19px; margin-bottom: .28em; }
.steps p { font-size: 15.5px; margin-bottom: 0; }

/* --------------------------------------------------------------- feature panels (icon + text) */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.feat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 28px; }
.feat svg { color: var(--brand-txt); margin-bottom: 14px; }
.feat h3 { font-size: 19px; }
.feat p { font-size: 15.5px; margin-bottom: 0; color: var(--muted); }
/* Opaque, not a white at 6% alpha: a translucent panel measures as white-on-white in a contrast
   sweep that does not composite, and reads no better to a person. #16365C is the navy lifted. */
.sec--dark .feat { background: #16365C; border-color: rgba(255,255,255,.14); }
.sec--dark .feat svg { color: var(--brand-lt); }
.sec--dark .feat p { color: rgba(255,255,255,.82); }

/* --------------------------------------------------------------- colour swatches */
/* 104px minimum: three swatches across a phone (49 colours is 25 rows at two-up), nine across the wrap. */
.swatches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 14px; }
.swatch { margin: 0; }
.swatch__chip { display: block; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid rgba(11,37,64,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.swatch__name { display: block; margin-top: 8px; font-size: 13px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.swatch--hot .swatch__name::after { content: ' Popular'; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-txt); font-weight: 700; display: block; }
.samples { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.samples li { margin: 0; }
.samples img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.samples figcaption, .samples span { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------- hardware range (/hardware/)
   The OMEGA Edge3 grid the client asked for on 2026-10-13: OMEGA's product cards, in our colours -
   the render sitting on white, the name on a navy bar with the series label in the light teal.
   .hw--photo is the same card for a photograph, which fills its box instead of sitting on white.
   Four across at the wrap width (minmax 250 + the gap leaves no room for five), two on a tablet,
   one on a phone. */
.hw { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.hw li { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hw__img { display: block; padding: 8%; background: #fff; }
.hw__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
/* Nine cards since 2026-10-20 (the Yale and Doric locks joined, the door stop left): three by three
   from a tablet up, so the ninth does not sit alone on a third row of four. */
@media (min-width: 700px) { .hw--3col { grid-template-columns: repeat(3, 1fr); } }
.hw--photo .hw__img { padding: 0; }
.hw--photo .hw__img img { object-fit: cover; }
.hw__body { display: block; flex: 1; padding: 14px 16px 16px; background: var(--ink); }
.hw__series { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-lt); margin-bottom: 5px; }
.hw__name { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.25; color: #fff; }
.hw__p { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.84); }
.hw__credit { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.hw__credit a { color: var(--brand-txt); }

/* --------------------------------------------------------------- gallery
   CSS columns so portrait and landscape photographs sit together without
   cropping. Thumbnails are <button>s so the lightbox is keyboard reachable. */
/* 160px column minimum gives a phone two columns (multicol counts the gap: (350+14)/(160+14) = 2) (38 photographs one-up is 16,000px of scrolling),
   the count caps a wide screen at three. */
.gal { columns: 3 160px; column-gap: 14px; }
.gal__btn { padding: 0; border: 0; background: var(--ink); cursor: zoom-in; border-radius: var(--radius); overflow: hidden; display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; }
.gal__btn img { width: 100%; transition: transform .45s, opacity .2s; }
.gal__btn:hover img { transform: scale(1.04); opacity: .9; }

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(6,16,28,.95); display: none; align-items: center; justify-content: center; padding: 5vh 6vw; }
.lb[data-open] { display: flex; }
.lb__img { max-width: 100%; max-height: 84vh; width: auto; object-fit: contain; border-radius: var(--radius); }
.lb__cap { position: absolute; left: 0; right: 0; bottom: 2.6vh; text-align: center; color: rgba(255,255,255,.9); font-size: 14.5px; padding: 0 8vw; margin: 0; }
.lb__btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; line-height: 1; }
.lb__btn:hover { background: var(--brand); color: var(--ink); }
.lb__close { top: 3vh; right: 3vw; font-size: 34px; }
.lb__prev { left: 2vw; top: 50%; margin-top: -26px; }
.lb__next { right: 2vw; top: 50%; margin-top: -26px; }
body[data-lb] { overflow: hidden; }
body[data-lb] .hdr, body[data-lb] .util, body[data-lb] .floatbar { visibility: hidden; }

/* --------------------------------------------------------------- FAQ */
.faq-sec { position: relative; background: var(--ink); overflow: hidden; }
.faq-sec__bg { position: absolute; inset: 0; }
.faq-sec__bg img { width: 100%; height: 100%; object-fit: cover; }
.faq-sec > .wrap { position: relative; z-index: 2; }
.faq-panel {
  background: rgba(255,255,255,.97); border-radius: var(--radius);
  padding: clamp(26px, 4vw, 52px); max-width: 920px; margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.faq-panel h2 { text-align: center; color: var(--ink); }
.faq-panel > p { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
.faq details { border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer;
  background: var(--ink); color: #fff;
  padding: 15px 52px 15px 20px; position: relative;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px;
  border-radius: var(--radius);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 19px; top: 50%; margin-top: -8px;
  width: 16px; height: 16px; background: var(--brand-lt);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v18h-2z M3 11h18v2H3z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v18h-2z M3 11h18v2H3z' fill='black'/></svg>") center/contain no-repeat;
  transition: transform .2s;
}
.faq details[open] summary { background: var(--ink-2); border-radius: var(--radius) var(--radius) 0 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 18px 20px 20px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); font-size: 16px; }
.faq__a p:last-child { margin-bottom: 0; }
/* The resources page: FAQs on a plain white section, no photo behind. */
.faq--plain { max-width: 920px; }

/* --------------------------------------------------------------- callout */
.callout { background: var(--ink); color: #fff; border-radius: var(--radius); padding: clamp(26px, 3.6vw, 44px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.callout h2, .callout h3 { color: #fff; margin-top: 0; }
.callout p { color: rgba(255,255,255,.88); margin-bottom: 0; }
.callout .btn { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.callout .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* --------------------------------------------------------------- reviews (Trustindex)
   The slot is empty in the markup; site.js moves the rendered widget in. :empty collapses it, so
   the section reads correctly with the widget never arriving (crawlers, no-JS, a dead CDN). */
.reviews { text-align: center; }
.reviews__note { max-width: 680px; margin: 0 auto 30px; color: var(--muted); }
.reviews__slot { margin: 0 auto; }
.reviews__slot:empty { display: none; }
.reviews__slot .ti-widget { margin: 0 auto !important; }
.reviews__cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 34px; }
/* Trustindex is staged off-canvas at the top of <main> and moved into the slot by site.js.
   Off-canvas rather than display:none - the widget measures itself as it initialises, and a
   display:none parent gives it a zero-width viewport, so the slider renders with every card
   collapsed. 🔴 A FIXED negative offset, not left: -100vw: the stage must keep a real width, and
   at -100vw on a 375px phone its right edge lands at +805px - 805px of horizontal overflow on
   every page, which the ancestor site's QA sweep caught. At -1400px the right edge is at -220px
   on any viewport, and overflow to the LEFT never extends the scrollable area in LTR. */
.ti-stage { position: absolute; left: -1400px; top: 0; width: 1180px; height: 1px; overflow: hidden; }
.callout .btn:hover::before { background: var(--brand-txt); }
@media (max-width: 760px) { .callout { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- partners */
.partners { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px clamp(28px, 5vw, 64px); padding: 26px 0; }
.partners__lab { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.partners__logo { display: inline-flex; align-items: center; text-decoration: none; }
.partners__logo img { height: 44px; width: auto; }
.partners__logo--wanz img { height: 64px; }
.partners__logo--text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -.01em; }

/* --------------------------------------------------------------- enquiry */
.enq { background: #fff; padding: var(--sec-y) 0; border-top: 1px solid var(--line); }
.enq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
.enq h2 { font-size: clamp(27px, 3.2vw, 40px); }
.enq__copy > p { color: var(--muted); }
.enq__big {
  display: inline-flex; align-items: center; gap: 13px; margin: 8px 0 22px;
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: clamp(23px, 2.6vw, 31px); color: var(--ink); text-decoration: none;
}
.enq__big svg { color: var(--brand-txt); }
.enq__big:hover { color: var(--brand-txt); }
.enq__facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.enq__facts li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 15.5px; color: var(--text); }
.enq__facts svg { color: var(--brand-txt); flex: 0 0 auto; margin-top: 4px; }
.enq__facts a { color: var(--brand-txt); }
.enq__note { font-size: 15px; color: var(--muted); margin: 0; }
.enq__note a { color: var(--brand-txt); }

/* Navy form panel on a white section. Every text element states its own colour at two or more
   classes - a widget relying on `color: inherit` renders white on white the moment a parent row
   sets a colour. */
.form { background: var(--ink-2); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 38px); }
.form .form__row { margin-bottom: 15px; }
.form .form__row label {
  display: block; margin-bottom: 6px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; color: #ffffff;
}
.form .form__row input,
.form .form__row select,
.form .form__row textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  color: #0f1113; -webkit-text-fill-color: #0f1113;
  background: #ffffff; border: 1px solid #ffffff; border-radius: 3px;
}
.form .form__row select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M6 8 0 0h12z' fill='%230f1113'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; }
.form .form__row textarea { resize: vertical; min-height: 118px; }
.form .form__row input::placeholder,
.form .form__row textarea::placeholder { color: #6b7178; -webkit-text-fill-color: #6b7178; }
.form .form__row input:focus, .form .form__row select:focus, .form .form__row textarea:focus { outline: 3px solid var(--brand); outline-offset: 1px; }
.form .btn { background: var(--brand); border-color: var(--brand); color: #0B2540; margin-top: 8px; }
.form .btn::before { background: #0B2540; }
.form .btn:hover { background: #ffffff; border-color: #ffffff; color: #0B2540; }
.form .btn:hover::before { background: var(--brand-txt); }
.form .err { display: block; color: #ffc4c4; font-size: 13.5px; margin-top: 5px; }
.form .form__msg { margin: 14px 0 0; font-size: 15px; color: #ffffff; }
.form .form__msg.err { color: #ffc4c4; }
.form .form__legal { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.72); }
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) { .enq__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- footer */
.ftr { background: var(--ink); color: rgba(255,255,255,.86); font-size: 15px; }
.ftr__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: clamp(28px, 4vw, 54px); padding-top: clamp(42px, 5vw, 66px); padding-bottom: 30px; }
.ftr__h {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px;
  color: #fff; margin: 0 0 16px;
}
.ftr a { color: rgba(255,255,255,.86); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__contact { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ftr__contact li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.ftr__contact svg { color: var(--brand-lt); flex: 0 0 auto; margin-top: 4px; }
.ftr__links { display: flex; flex-direction: column; }
.ftr__links a { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14.5px; }
.ftr__logo { height: 44px; width: auto; margin-bottom: 18px; }
.ftr__about p { color: rgba(255,255,255,.8); font-size: 14.5px; max-width: 460px; }
.ftr__social { display: flex; gap: 12px; margin: 16px 0 0; }
.ftr__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; }
.ftr__social a:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.ftr__areas-row { padding-bottom: 34px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 28px; }
.ftr__areas-row .ftr__h { font-size: 15px; margin-bottom: 8px; }
.ftr__areas { margin: 0; color: rgba(255,255,255,.8); font-size: 14.5px; }
.ftr__btm-wrap { background: #071a2e; }
.ftr__btm { padding: 17px 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.72); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
/* The whole phrase is the link, not just the brand name. Underline on hover only. */
.ftr__credit { color: rgba(255,255,255,.72) !important; text-decoration: none; }
.ftr__credit:hover { color: #fff !important; text-decoration: underline; }
@media (max-width: 980px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- float bar (fleet component) */
.floatbar { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.floatbar__list { display: flex; flex-direction: column; gap: 10px; }
.floatbar__btn {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--fb-bg); color: var(--fb-icon);
  display: grid; place-items: center; border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(11,37,64,.28);
  transition: transform .18s, background .18s, color .18s, opacity .18s;
}
.floatbar__btn:hover { background: var(--fb-hover-bg); color: var(--fb-hover-icon); }
.cnc-js .floatbar:not([data-open]) .floatbar__list { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.cnc-js .floatbar .floatbar__list { transition: opacity .2s, transform .2s, visibility .2s; }
.floatbar__btn:hover { transform: scale(1.08); }
.floatbar__toggle:hover { transform: scale(1.08); }

.fb-pop { position: fixed; inset: 0; z-index: 190; background: rgba(6,16,28,.6); display: none; align-items: center; justify-content: center; padding: 24px; }
.fb-pop[data-open] { display: flex; }
.fb-pop__card { background: #fff; border-radius: var(--radius); padding: 34px 40px; text-align: center; position: relative; max-width: 380px; }
.fb-pop__card p { color: var(--muted); font-size: 15px; }
.fb-pop__num { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 29px; color: var(--ink); text-decoration: none; margin: 6px 0 10px; }
.fb-pop__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }

/* --------------------------------------------------------------- reveal
   threshold: 0 with rootMargin only, scoped to .cnc-js so no-JS visitors and crawlers see all. */
.cnc-js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.cnc-js [data-reveal].is-in { opacity: 1; transform: none; }
.cnc-js [data-reveal][data-delay="1"] { transition-delay: .09s; }
.cnc-js [data-reveal][data-delay="2"] { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .cnc-js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- misc */
.lead { font-size: 19px; }
.center { text-align: center; }
.mt0 { margin-top: 0; }
.stack > * + * { margin-top: clamp(28px, 3.4vw, 46px); }
.note { font-size: 14.5px; color: var(--muted); }
.anchor-target { scroll-margin-top: calc(var(--hdr-h) + 20px); }

/* --------------------------------------------------------------- 3D visualiser (/visualiser/)
   site/assets/js/visualiser.js draws into the canvas and builds the controls in .viz__panel.
   Two columns on a wide screen with the model pinned beside the controls; on a phone the model
   sticks under the header while the controls scroll beneath it, so a change is always seen.
   The canvas is touch-action: none (one finger turns the model), so on a phone it is kept to about
   half the screen: the page scrolls from the controls below it. */
.viz-sec { padding-top: clamp(28px, 4vw, 52px); }
.viz { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.viz__stage { position: sticky; top: calc(var(--hdr-h-stuck) + 14px); background: #fff; z-index: 5; }
.viz__canvas { display: block; width: 100%; height: clamp(340px, 62vh, 640px); border-radius: var(--radius); background: #DCE8F1; touch-action: none; cursor: grab; outline-offset: 3px; }
.viz__canvas:active { cursor: grabbing; }
.viz__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.viz__bar button, .viz__opt {
  font: 600 14px/1.2 'Inter', sans-serif; color: var(--ink); background: #fff; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 10px 13px; min-height: 42px;
  transition: background .15s, border-color .15s, color .15s;
}
.viz__bar button:hover, .viz__opt:hover { border-color: var(--ink); }
.viz__bar button[aria-pressed="true"], .viz__opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.viz__bar button:focus-visible, .viz__opt:focus-visible, .viz__sw:focus-visible { outline: 3px solid var(--brand-txt); outline-offset: 2px; }
.viz__hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.viz__summary { margin: 4px 0 0; padding: 12px 14px; background: var(--band); border-left: 4px solid var(--brand); border-radius: var(--radius); font-size: 15px; color: var(--text); }
.viz__send { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 14px; }
.viz__fallback { padding: 18px; background: var(--band); border-radius: var(--radius); }
.viz[data-viz-off] .viz__canvas, .viz[data-viz-off] .viz__bar, .viz[data-viz-off] .viz__hint, .viz[data-viz-off] .viz__summary, .viz[data-viz-off] .viz__send { display: none; }
.viz:not([data-viz-on]) .viz__bar, .viz:not([data-viz-on]) .viz__send { visibility: hidden; }
.viz__group { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.viz__group legend { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: var(--ink); padding: 0; margin-bottom: 10px; }
.viz__sub { margin: 12px 0 7px; font: 700 11.5px/1.3 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-txt); }
.viz__sub:first-of-type { margin-top: 0; }
.viz__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.viz__opts--seg { margin-bottom: 12px; }
.viz__range { display: grid; grid-template-columns: 62px 1fr 78px; gap: 10px; align-items: center; margin-top: 10px; font-size: 15px; }
.viz__range label { font-weight: 600; color: var(--ink); }
.viz__range input { width: 100%; accent-color: var(--brand-txt); min-height: 32px; }
.viz__range output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.viz__picked { margin: 0 0 9px; font-size: 15px; font-weight: 600; color: var(--ink); }
.viz__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 7px; }
.viz__sw { aspect-ratio: 1; min-height: 38px; border-radius: 50%; border: 1.5px solid rgba(11,37,64,.22); cursor: pointer; padding: 0; background-size: cover; background-position: center; }
.viz__sw--wall, .viz__sw--wood { border-radius: var(--radius); }
.viz__sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--ink); }
.viz__woodwrap { margin-top: 16px; }
.viz [hidden] { display: none !important; }
@media (max-width: 900px) {
  .viz { grid-template-columns: 1fr; gap: 16px; }
  .viz__stage { top: var(--hdr-h-stuck); margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 10px; box-shadow: 0 10px 14px -12px rgba(11,37,64,.35); }
  .viz__canvas { height: clamp(230px, 40vh, 400px); }
  .viz__bar { gap: 6px; flex-wrap: nowrap; margin-top: 8px; }
  .viz__bar button { padding: 8px 4px; min-height: 40px; font-size: 12.5px; flex: 1 1 auto; white-space: nowrap; }
  .viz__hint { display: none; }
}

/* --------------------------------------------------------------- blog (Advice & Guides) */
.card__date { display: block; font: 700 11.5px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-txt); margin-bottom: 8px; }
.post { max-width: 800px; margin: 0 auto; }
.post__meta { font-size: 14.5px; color: var(--muted); margin: 0 0 1.6em; padding-bottom: 1.1em; border-bottom: 1px solid var(--line); }
.post .prose { max-width: none; }
.post__fig { margin: 2em 0; }
.post__fig img { width: 100%; height: auto; border-radius: var(--radius); }
.post__fig figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.nav-m__viz { color: var(--brand-txt) !important; }
/* visualiser: the per-product hardware choices under the handle colour */
.viz__hw .viz__sub { margin-top: 4px; }
.viz__hw .viz__opts--seg:last-child { margin-bottom: 0; }
/* visualiser: glass rows, and the obscure-glass buttons that carry their own sample */
.viz__glass .viz__sub { margin-top: 4px; }
.viz__opt--tex { background-size: cover; background-position: center; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff; font-weight: 700; }
.viz__opt--tex[aria-pressed="true"] { color: var(--ink); background-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--ink); }
/* 🔴 The closed contact bar's hidden list still takes up layout space, so the fixed .floatbar box
   is a tall invisible column up the right edge - and it swallowed taps on whatever sat under it
   (caught 2026-10-09 when a visualiser button on a phone could not be clicked). The box itself
   takes no pointer events; only its visible children do. */
.floatbar { pointer-events: none; }
.floatbar > * { pointer-events: auto; }