/* ArticAir Engineering v3. Mobile first. Breakpoints: 640 (tablet), 1024 (desktop). No external requests.
   Direction: phunk.com techniques (centre-pill nav, glow panel, outlined numbers, pinned showcase) in a white and blue theme. */
:root {
  --navy: #082851;
  --blue: #2192D6;
  --blue-text: #0F5F94;
  --sky: #EAF4FC;
  --ink: #071A33;
  --soft: #44566E;
  --line: #D3E4F3;
  --on-navy-soft: #C3D6EA;
  --white: #fff;
  --navy-deep: #061F40;
  --g-tint: rgba(234,244,252,.72);
  --g-tint-hi: rgba(244,249,254,.86);
  --g-blur: 22px;
  --g-ink: #071A33;
  --g-dim: #27405F;
  --strong: #082851;
  --link: #0F5F94;
  --ring: #0F5F94;
  --card: rgba(255,255,255,.72);
  --card-hi: #fff;
  --tint: #EAF4FC;
  --line-hi: #9DC1E3;
  --err: #A3231B;
  --grad-text: linear-gradient(158deg, #0A4DD8 0%, #1580C6 100%);
  --grad-btn: linear-gradient(158deg, #082F8F 0%, #0A4DD8 100%);
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --max: 1200px;
  --max-wide: 1400px;
  --header-h: 64px;
  --bar-h: 56px;
  --sec-pad: 72px;
  --r: 16px;
  --out: cubic-bezier(.165, .84, .44, 1);
  --out3: cubic-bezier(.215, .61, .355, 1);
}
@media (min-width: 640px) { :root { --gutter: 28px; --header-h: 72px; --sec-pad: 96px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 96px; --sec-pad: 120px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 24px); }
@media (min-width: 640px) { html { scroll-padding-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}
@media (min-width: 640px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
address { font-style: normal; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
p { max-width: 62ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.on-navy :focus-visible, .cta-panel :focus-visible, .glow-panel :focus-visible { outline-color: #8FCBF2; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 12px 16px; min-height: 48px; background: var(--navy); color: var(--white); text-decoration: none; font-weight: 500; border-radius: 12px; }
.skip:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--max-wide); }
.section { padding-block: var(--sec-pad); position: relative; }
.section--tight { padding-block: clamp(32px, 6vw, 56px); }
.section--mist { background: var(--sky); }
.on-navy { background: var(--navy); color: var(--white); --strong: #fff; --link: #8FD0F7; --ink: #fff; --soft: #C3D6EA; --line: rgba(143,203,242,.28); --line-hi: rgba(143,203,242,.65); --card: #0B3367; --card-hi: #0E4079; --tint: rgba(255,255,255,.07); }
.on-navy p { color: var(--on-navy-soft); }
.section.on-navy { background: linear-gradient(90deg, rgba(33,146,214,0), #2192D6 50%, rgba(33,146,214,0)) top / 100% 2px no-repeat, var(--navy); }
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Gradient word and pill label */
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--link); padding-bottom: .06em; }
.on-navy .grad { background-image: linear-gradient(158deg, #B4E1FC 0%, #3DB4F2 100%); }
@media (forced-colors: active) { .grad { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 100px; color: var(--link); font-size: .9375rem; font-weight: 500; line-height: 1.2; }
.on-navy .pill { color: #CFE9FC; }
h2 { font-size: 2rem; text-wrap: balance; }
@media (min-width: 640px) { h2 { font-size: 2.5rem; } }
@media (min-width: 1024px) { h2 { font-size: 3.5rem; } }
h3 { font-size: 1.5rem; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--soft); max-width: 46ch; }
.on-navy .lede { color: var(--on-navy-soft); }
.section-head { display: grid; gap: 16px; justify-items: center; text-align: center; margin: 0 auto clamp(32px, 6vw, 56px); max-width: 22em; }
.section-head .lede { text-align: center; }
.section-head--left { justify-items: start; text-align: left; margin-inline: 0; }

/* Header: fixed centre pill (desktop), bar (below 1024) */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.header-inner { display: flex; align-items: center; gap: 8px; height: var(--header-h); max-width: none; margin-inline: auto; padding-inline: var(--gutter); position: relative; isolation: isolate; }
.logo-d { display: block; }
.logo-l { display: none; }
.site-header.on-dark .logo-d { display: none; }
.site-header.on-dark .logo-l { display: block; }
.logo { display: inline-flex; align-items: center; min-height: 48px; margin-right: auto; transition: opacity .3s var(--out3); }
.logo img { height: 44px; width: auto; }
.logo picture, .footer-logo picture { display: block; }
@media (min-width: 640px) { .logo img { height: 52px; } }
.header-actions { display: flex; align-items: center; gap: 8px; transition: opacity .3s var(--out3); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid transparent; border-radius: 50%; color: var(--g-ink); text-decoration: none; transition: background-color .2s var(--out3), box-shadow .2s var(--out3); }
.icon-btn:hover { background-color: rgba(255,255,255,.9); }
.icon-btn--wa { background: var(--grad-btn); border-color: transparent; color: var(--white); box-shadow: 0 8px 22px -8px rgba(10,77,216,.6); }
.icon-btn--wa:hover { background: var(--grad-btn); box-shadow: inset 0 0 0 40px rgba(255,255,255,.18); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 100px; color: var(--g-ink); font: 500 1rem/1 var(--font-body); cursor: pointer; transition: background-color .2s var(--out3), box-shadow .2s var(--out3); }
.menu-toggle:hover { background-color: rgba(255,255,255,.9); }
.js .menu-toggle { display: inline-flex; }
.menu-icon { display: block; width: 18px; height: 12px; background: linear-gradient(var(--navy), var(--navy)) top / 100% 2px no-repeat, linear-gradient(var(--navy), var(--navy)) bottom / 100% 2px no-repeat; }
.primary-nav { display: none; }
.primary-nav ul { display: flex; gap: 2px; padding: 0; margin: 0; list-style: none; }
.primary-nav a, .nav-drop > a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 100px; font: 400 1rem/1 var(--font-body); color: var(--g-ink); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .2s var(--out3), background-color .2s var(--out3); }
/* Hovered link stays full colour, siblings dim (colour, not opacity, to hold contrast) */
.primary-nav a[aria-current="page"], .nav-drop > a[aria-current="true"] { font-weight: 600; }
html:not(.js) .primary-nav a[aria-current="page"], html:not(.js) .nav-drop > a[aria-current="true"] { background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(33,146,214,.35); }
.primary-nav a:hover, .nav-drop > a:hover { background: rgba(255,255,255,.6); }
.nav-drop { position: relative; }
.nav-drop > a::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.drop-panel { position: absolute; left: 50%; top: calc(100% + 8px); min-width: 260px; transform: translateX(-50%); border: 1px solid transparent; border-radius: var(--r); padding: 8px; display: none; }
.nav-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nav-drop.is-open .drop-panel { display: block; }
.drop-panel ul { flex-direction: column; gap: 0; }
.drop-panel a { width: 100%; justify-content: flex-start; border-radius: 10px; }
.drop-panel li a { color: var(--g-ink) !important; }
.drop-panel a:hover { background: rgba(33,146,214,.14); }

/* Mobile and tablet white sheet menu */
.menu { position: fixed; inset: 8px; z-index: 80; display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 20px; overflow-y: auto; background: var(--white); color: var(--ink); border-radius: 24px; box-shadow: 0 24px 80px rgba(8,40,81,.35); pointer-events: auto; }
.menu[hidden] { display: none; }
@media (min-width: 640px) { .menu { inset: 12px 12px 12px auto; width: min(460px, calc(100vw - 24px)); } }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-top .logo img { height: 44px; }
.menu-close { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--sky); color: var(--strong); cursor: pointer; transition: background-color .2s var(--out3); }
.menu-close:hover { background: #D5E8F8; }
.menu-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.menu-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 4px; }
.menu-list a { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; min-height: 64px; padding: 8px 10px; border-radius: 16px; text-decoration: none; transition: background-color .2s var(--out3); }
.menu-list a:hover { background: var(--sky); }
.menu-list a[aria-current="page"] { background: var(--sky); }
.menu-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #E3EEF8; color: var(--link); }
.menu-ic svg { width: 24px; height: 24px; fill: currentColor; }
.menu-list b { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.2; align-self: end; }
.menu-list span.d { font-size: .9375rem; color: var(--soft); line-height: 1.3; align-self: start; }
.menu-cta { display: grid; gap: 10px; margin-top: auto; }
@media (min-width: 1024px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 24px; padding-bottom: 0; height: var(--header-h); align-items: start; border-bottom: 0; }

  .logo { justify-self: start; margin-right: 0; }
  .logo img { height: 56px; margin-top: -6px; }
  .primary-nav { display: block; margin-top: 0; padding: 4px; border-radius: 100px; }
  .header-actions { justify-self: end; gap: 10px; }
  .menu-toggle, .js .menu-toggle, .menu, .icon-btn--wa { display: none; }
  .icon-btn { width: 52px; height: 52px; }
  /* Condensed on scroll down: pill only */
  .site-header.is-condensed .logo, .site-header.is-condensed .header-actions { opacity: 0; visibility: hidden; transition: opacity .3s var(--out3), visibility 0s .3s; }
  .site-header .logo, .site-header .header-actions { visibility: visible; }
}

/* No JS (below desktop): the page header is static and the menu shows as plain links */
@media (max-width: 1023px) {
  html:not(.js) .site-header { position: static; }
  html:not(.js) .menu[hidden] { display: flex; position: static; inset: auto; width: auto; margin: 8px; box-shadow: none; border: 1px solid var(--line); }
  html:not(.js) .menu-close { display: none; }
}

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border: 1px solid transparent; border-radius: 100px; background: transparent; color: var(--strong); font: 500 1rem/1.1 var(--font-body); text-decoration: none; cursor: pointer; transition: box-shadow .2s var(--out3), background-color .2s var(--out3), color .2s var(--out3), border-color .2s var(--out3); }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn--wa { background: var(--grad-btn); color: var(--white); box-shadow: 0 10px 28px -10px rgba(10,77,216,.55); }
.btn--wa:hover { box-shadow: inset 0 0 0 60px rgba(255,255,255,.18), 0 10px 28px -10px rgba(10,77,216,.55); }
.btn--line { border-color: transparent; color: var(--strong); }
.btn--line:hover { background-color: rgba(255,255,255,.92); }
.btn.header-wa { display: none; min-height: 52px; padding: 0 22px; font-size: .9375rem; }
@media (min-width: 1024px) { .btn.header-wa { display: inline-flex; } }
.on-navy .btn--wa, .menu .btn--wa.on-dark { background: var(--white); color: #082851; box-shadow: none; }
.on-navy .btn--wa:hover { background: #DCEEFC; box-shadow: none; }
.on-navy .btn--line { color: var(--white); }
.on-navy .btn--line:hover { background-color: rgba(255,255,255,.2); }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--link); text-decoration: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; transition: color .2s var(--out3); }
.text-link:hover { color: var(--strong); }
.text-link--arrow { padding: 0 20px; border: 1px solid transparent; border-radius: 100px; text-decoration: none; }
.text-link--arrow::after { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .2s var(--out3); }
.text-link--arrow:hover::after { transform: translateX(4px) rotate(45deg); }
.on-navy .text-link { color: #A8DCFB; }
.on-navy .text-link--arrow { color: #fff; }
.on-navy .text-link:hover { color: var(--white); }
.cta-row { display: grid; gap: 8px; margin-top: 28px; justify-items: stretch; }
.cta-row .btn { width: 100%; }
.cta-row--c { justify-items: center; }
@media (min-width: 640px) { .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .cta-row .btn { width: auto; } .cta-row--c { justify-content: center; } }

/* Placeholders (Jeremiah designs) and photos */
.stock { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--sky); aspect-ratio: var(--ar, 16 / 9); }
.stock img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-thumb { position: relative; width: 128px; }
.photo { position: relative; overflow: hidden; border-radius: var(--r); background: var(--sky); aspect-ratio: var(--ar, 4 / 5); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }


/* Hero (home) */
.hero { position: relative; overflow: clip; padding-block: calc(var(--header-h) + 36px) 56px; text-align: center; }
.hero, .hero-sub { background: linear-gradient(180deg, var(--sky) 0, var(--white) 62%); }

.hero > .wrap { position: relative; z-index: 1; }
.hero-stack { display: grid; justify-items: center; gap: 20px; }
.hero-title { font-size: 2.5rem; line-height: 1.1; letter-spacing: -.035em; max-width: 13em; text-wrap: balance; font-weight: 500; }
.hero-stack .lede { max-width: 34em; }
.hero .cta-row { margin-top: 8px; }
@media (min-width: 640px) { .hero { padding-bottom: 72px; } .hero-title { font-size: 7.5vw; } }
@media (min-width: 1024px) { .hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 96px; } .hero-title { font-size: 4rem; max-width: 12.5em; } }

/* Home hero panel: a wall unit pouring cool air into the room; a room readout settles at 24 degrees and the
   panel shifts from warm grey to cool navy as it enters view (motion in motion.css; WebGL unit and airflow in js/scene3d.js).
   This file holds the finished, still state: what reduced motion, no JS and the fallback show. */
@property --t { syntax: '<integer>'; inherits: false; initial-value: 24; }
.glow-panel { position: relative; overflow: hidden; isolation: isolate; container-type: size; border-radius: 24px; margin-top: 40px; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #061F40 0%, #082851 55%, #0A3A78 100%); border: 1px solid rgba(143,203,242,.35); box-shadow: 0 30px 80px -30px rgba(8,40,81,.6); }
.glow-panel > span { position: absolute; inset: 0; pointer-events: none; }
.gp-glow { background: radial-gradient(55% 60% at 50% 100%, rgba(33,146,214,.5), rgba(33,146,214,0) 70%); }
.gp-warm { opacity: 0; background: radial-gradient(60% 55% at 50% 100%, rgba(150,128,108,.22), rgba(150,128,108,0) 70%), linear-gradient(180deg, #0C2036 0%, #122A44 55%, #1E3048 100%); }
.gp-grid { background-image: linear-gradient(rgba(168,220,251,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(168,220,251,.08) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(75% 85% at 50% 30%, #000 20%, transparent 80%); mask-image: radial-gradient(75% 85% at 50% 30%, #000 20%, transparent 80%); }
#hero-3d { position: absolute; inset: 0; z-index: 1; }
#hero-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ac { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; width: min(100cqw, 160cqh); aspect-ratio: 8 / 5; container-type: inline-size; }
.ac-unit, .ac-air { position: absolute; inset: 0; width: 100%; height: 100%; }
.ac-unit { filter: drop-shadow(0 10px 24px rgba(3,14,30,.45)); }
.ac-flow { position: absolute; inset: 0; }
.ac-air { transform-origin: 50% 31%; }
.ac-air + .ac-air { opacity: 0; }
.ac-dot { position: absolute; top: 31%; width: 4px; height: 4px; margin-left: -2px; opacity: 0; }
.ac-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #DDEFFC; }
.ac-louvre { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(1.5); }
.ac-temp { position: absolute; left: 18px; bottom: 16px; z-index: 2; display: grid; gap: 2px; color: #fff; line-height: 1; pointer-events: none; }
.ac-temp-l { font-size: .8125rem; color: var(--on-navy-soft); }
.ac-temp-v { display: flex; align-items: flex-start; gap: 2px; font-family: var(--font-display); font-weight: 500; letter-spacing: -.04em; }
.ac-temp-n { --t: 24; counter-reset: t var(--t); font-size: 2.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ac-temp-n::before { content: counter(t); }
.ac-temp-v span { font-size: 1rem; margin-top: .2em; color: var(--on-navy-soft); }
@media (min-width: 640px) { .glow-panel { aspect-ratio: 16 / 8; margin-top: 48px; } .ac-temp { left: 24px; bottom: 22px; } .ac-temp-n { font-size: 2.75rem; } }
@media (min-width: 1024px) { .glow-panel { aspect-ratio: auto; height: min(560px, 62vh); min-height: 460px; margin-top: 64px; } .ac-temp { left: 36px; bottom: 32px; gap: 4px; } .ac-temp-l { font-size: .875rem; } .ac-temp-n { font-size: 3.5rem; } .ac-temp-v span { font-size: 1.25rem; } }

/* Inner page hero: same style as home, no panel */
.hero-sub { position: relative; overflow: clip; padding-block: calc(var(--header-h) + 36px) 40px; text-align: center; }
.hero-sub .wrap { position: relative; z-index: 1; }
.hero-sub h1 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; max-width: 14em; }
.hero-sub .lede { max-width: 40em; }
.hero-sub .cta-row { margin-top: 8px; }
.hero-price { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-display); }
.hero-price strong { font-size: 2.5rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--strong); }
.hero-price span { color: var(--soft); }
.hero-media { max-width: 960px; margin: 24px auto 0; }
@media (min-width: 640px) { .hero-sub { padding-bottom: 56px; } .hero-sub h1 { font-size: 7.5vw; } }
@media (min-width: 1024px) { .hero-sub { padding-top: calc(var(--header-h) + 40px); padding-bottom: 72px; } .hero-sub h1 { font-size: 4rem; } }

/* Intro line */
.what { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 3.2vw, 2.25rem); line-height: 1.25; letter-spacing: -.025em; max-width: 30em; margin-inline: auto; text-align: center; text-wrap: pretty; }
.what + p { margin: 20px auto 0; text-align: center; }

/* Home service cards: outlined numbers, translucent, whole card is the link */
.hcards { display: grid; gap: 16px; counter-reset: card; }
.hcard { position: relative; display: grid; gap: 14px; align-content: start; padding: 14px 14px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background-color .2s var(--out3), border-color .2s var(--out3), transform .3s var(--out3); }
.hcard:hover { background: var(--card-hi); border-color: var(--line-hi); }
.hcard-img { position: relative; }
.hcard-img .stock { border-radius: 12px; }
.hcard-num { position: absolute; left: 14px; bottom: -8px; font-family: var(--font-display); font-weight: 500; font-size: 4rem; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px #fff; filter: drop-shadow(0 1px 3px rgba(8,40,81,.6)); text-shadow: none; pointer-events: none; }
.hcard-disc { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: #082851; opacity: 0; transform: scale(.85); transition: opacity .2s var(--out3), transform .2s var(--out3); box-shadow: 0 6px 18px rgba(8,40,81,.2); }
.hcard-disc::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg); }
.hcard:hover .hcard-disc, .hcard:focus-within .hcard-disc { opacity: 1; transform: none; }
@media (hover: none) { .hcard-disc { opacity: 1; transform: none; } }
.hcard-body { display: grid; gap: 6px; padding-inline: 8px; }
.hcard h3 { font-size: 1.75rem; }
.hcard h3 a { text-decoration: none; display: inline-block; min-height: 44px; padding-block: 6px; transition: color .2s var(--out3); }
.hcard h3 a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.hcard:hover h3 a, .hcard h3 a:focus-visible { color: var(--link); }
.hcard-desc { color: var(--soft); font-size: 1rem; }
.hcard-price { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.03em; color: var(--strong); }
.hcard-price small { font-size: .875rem; letter-spacing: 0; color: var(--soft); margin-left: 6px; font-weight: 500; }
.more-link { max-width: none; display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 40px); }
@media (min-width: 640px) { .hcards { grid-template-columns: repeat(3, 1fr); gap: 14px; } .hcard h3 { font-size: 1.5rem; } .hcard-num { font-size: 3.5rem; } }
@media (min-width: 1024px) { .hcards { gap: 24px; } .hcard { padding: 16px 16px 28px; } .hcard-num { font-size: 6rem; left: 16px; bottom: -14px; } .hcard h3 { font-size: 1.875rem; } }

/* Pinned showcase: sticky heading + image column, scrolling text, bottom mask. Stacked on phone. */
.showcase { background: var(--white); }
.show-grid { display: grid; gap: 28px; }
.show-head { display: grid; gap: 14px; justify-items: start; }
.show-head .lede { max-width: 32em; }
.show-stack { display: none; }
.show-list { display: grid; gap: 40px; }
.show-item { display: grid; gap: 16px; align-content: start; }
.show-inline { display: block; }
.show-item h3 { font-size: 2rem; }
.show-item h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.show-price { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.02em; color: var(--strong); font-weight: 500; }
.show-price small { font-size: .9375rem; color: var(--soft); margin-left: 4px; }
.show-item .ticks { margin-top: 4px; }
.show-mask { display: none; }
@media (min-width: 640px) {
  .show-grid { grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
  .show-pin { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 24px; }
  .show-head h2 { font-size: 2.25rem; }
  .show-stack { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--sky); }
  .show-img { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--out); }
  .show-img.is-active { opacity: 1; }
  .show-img .stock { height: 100%; aspect-ratio: auto; border-radius: 0; }
  .show-inline { display: none; }
  .show-list { gap: 0; padding-bottom: 0; }
  .show-item { min-height: 40vh; align-content: center; padding-block: 32px; border-top: 1px solid var(--line); }
  .show-item:first-child { border-top: 0; }
  .show-mask { display: none; position: sticky; bottom: 0; z-index: 3; height: 18vh; margin-top: -18vh; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .show-mask { display: block; }
  .show-list { padding-bottom: 8vh; }
  .show-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .show-head h2 { font-size: 3.5rem; }
  .show-stack { aspect-ratio: 4 / 3; max-height: 46vh; }
  .show-item { min-height: 70vh; }
}
/* Ensure the first image is visible without JS */
.show-img:first-child { }

/* Review card with edge fades, price facts */
.rev-wrap { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); padding: 6px 0; }
.rev-card { max-width: 860px; margin-inline: auto; padding: 28px 24px; border: 1px solid #BFD8EE; border-radius: var(--r); background: var(--white); display: grid; gap: 22px; box-shadow: 0 16px 40px -22px rgba(8,40,81,.25); }
.rev-card blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.875rem); line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }
.rev-card cite { font-style: normal; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.rev-card cite::before { content: attr(data-i); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-btn); color: #fff; font-weight: 600; flex: none; }
.rev-card cite span { display: block; font-weight: 400; color: var(--soft); }
@media (min-width: 640px) { .rev-card { padding: 40px; } }
.facts-strip { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.facts-strip li { display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--r); background: var(--tint); border: 1px solid var(--line); }
.facts-strip b { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; color: var(--strong); }
.facts-strip span { color: var(--soft); }
@media (min-width: 640px) { .facts-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .facts-strip { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } }

/* Technician band */
.band { display: grid; gap: 28px; padding: 16px; border-radius: 24px; background: var(--sky); border: 1px solid var(--line); align-items: center; }
.band .photo { max-width: 480px; }
.band .prose { padding: 8px 8px 16px; }
@media (min-width: 640px) { .band { grid-template-columns: 5fr 7fr; gap: 40px; padding: 20px; } .band .prose { padding: 8px 24px 8px 0; } }
@media (min-width: 1024px) { .band { padding: 28px; gap: 64px; } }

/* Tick lists */
.ticks { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 8px; border: solid var(--link); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.on-navy .ticks li::before { border-color: #A8DCFB; }

/* Numbered service rows (services page) */
.svc-rows { display: grid; gap: 14px; }
.svc-row { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); position: relative; transition: background-color .2s var(--out3), border-color .2s var(--out3); }
.svc-row:hover { background: var(--card-hi); border-color: var(--line-hi); }
.svc-n { position: absolute; left: 10px; top: 10px; display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 100px; background: var(--white); color: #082851; font-family: var(--font-display); font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; }
.svc-name { font-size: clamp(1.625rem, 5vw, 2.25rem); }
.svc-name a { display: inline-block; padding-block: 9px; text-decoration: none; transition: color .2s var(--out3); }
.svc-name a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.svc-price { font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; letter-spacing: -.04em; line-height: 1; color: var(--strong); }
.svc-price small { font-size: 1rem; letter-spacing: 0; color: var(--soft); margin-left: 6px; font-weight: 400; display: block; margin: 4px 0 0; }
.svc-desc { color: var(--soft); }
.svc-row .ticks { margin-top: 10px; }
.svc-row:hover .svc-name a { color: var(--link); }
.svc-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 24px; align-items: center; margin-top: 6px; }
.svc-thumb .stock { border-radius: 12px; }
@media (min-width: 640px) {
  .svc-row { grid-template-columns: 148px 1fr auto; column-gap: 24px; align-items: start; padding: 20px; }
  .svc-row > .svc-thumb { grid-column: 1; grid-row: 1 / span 2; width: 148px; }
  .svc-row > .svc-body { grid-column: 2; }
  .svc-row > .svc-price { grid-column: 3; grid-row: 1; text-align: right; }
}
@media (min-width: 1024px) {
  .svc-row { grid-template-columns: 180px 1.1fr 1.4fr auto; padding: 24px; column-gap: 40px; align-items: center; }
  .svc-row > .svc-thumb { width: 100%; grid-row: 1 / span 2; }
  .svc-row > .svc-body { display: contents; }
  .svc-row .svc-name { grid-column: 2; grid-row: 1; }
  .svc-row .svc-text { grid-column: 3; grid-row: 1; }
  .svc-row > .svc-price { grid-column: 4; font-size: 2.75rem; }
  .svc-row .svc-actions { grid-column: 2 / 4; grid-row: 2; }
}

/* Blocks */
.three { display: grid; gap: 14px; }
.three > * { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); display: grid; gap: 10px; align-content: start; }
.three h3 { font-size: 1.5rem; }
.three p { color: var(--soft); }
.step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-btn); color: var(--white); font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .three { grid-template-columns: repeat(3, 1fr); gap: 16px; } .three--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .three { gap: 20px; } .three--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: 32px; }
@media (min-width: 640px) { .split { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .split--top { align-items: start; } }
@media (min-width: 1024px) { .split { gap: 80px; } }
.split .photo { max-width: 480px; }
.prose { display: grid; gap: 18px; justify-items: start; }
.prose p { color: var(--ink); }

.quote { display: grid; gap: 24px; }
.quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3.6vw, 2.75rem); line-height: 1.15; letter-spacing: -.03em; text-wrap: pretty; max-width: 26em; }
.quote cite { font-style: normal; font-weight: 600; }
.quote cite span { display: block; font-weight: 400; color: var(--soft); }
.on-navy .quote cite span { color: var(--on-navy-soft); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: background-color .2s var(--out3), border-color .2s var(--out3); }
.faq details[open], .faq details:hover { background: var(--card-hi); border-color: var(--line-hi); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 14px 20px; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; letter-spacing: -.015em; list-style: none; border-radius: var(--r); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--strong); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s var(--out3); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 20px 22px; color: var(--soft); }
.faq-group { margin-top: 40px; }
@media (min-width: 640px) { .faq-group { display: grid; grid-template-columns: 1fr 2fr; gap: 24px 40px; align-items: start; } .faq-group h2 { margin: 18px 0 0; } .faq summary { font-size: 1.375rem; } }
.faq-group h2 { font-size: 1.75rem; margin-bottom: 14px; }

/* Price table */
.ptable { width: 100%; border-collapse: collapse; }
.ptable caption { text-align: left; }
.ptable th, .ptable td { text-align: left; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable thead th { border-bottom: 1px solid var(--strong); font-size: .9375rem; color: var(--soft); font-weight: 600; }
.ptable .num { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.04em; color: var(--strong); white-space: nowrap; font-weight: 500; }
.ptable a.name { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; text-decoration: none; transition: color .2s var(--out3); }
.ptable a.name:hover { color: var(--link); }
@media (max-width: 639px) {
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable tbody { display: grid; gap: 12px; }
  .ptable tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
  .ptable th, .ptable td { border: 0; padding: 0; }
  .ptable td.desc { grid-column: 1 / -1; color: var(--soft); order: 3; }
  .ptable td.act { grid-column: 1 / -1; order: 4; margin-top: 8px; }
}

/* Estimator and booking form */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 18px; box-shadow: 0 16px 40px -26px rgba(8,40,81,.3); }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field .lab { font-weight: 600; }
.field .hint { color: var(--soft); font-size: .9375rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--soft); border-radius: 12px; background: var(--white); color: var(--ink); font: 400 1rem/1.4 var(--font-body); }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid #0F5F94; outline-offset: 2px; border-color: var(--strong); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field-error { color: var(--err); font-weight: 600; font-size: .9375rem; }
.field-error[hidden] { display: none; }
.field-row { display: grid; gap: 18px; align-items: start; }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; }
.stepper button { min-height: 52px; border: 1.5px solid var(--soft); background: var(--sky); font: 600 1.5rem/1 var(--font-body); cursor: pointer; color: var(--strong); }
.stepper button:first-child { border-radius: 12px 0 0 12px; }
.stepper button:last-child { border-radius: 0 12px 12px 0; }
.stepper input { text-align: center; border-inline: 0; border-radius: 0; }
.estimate { padding: 16px 18px; background: var(--sky); border-radius: 12px; border-left: 4px solid var(--link); }
.estimate strong { display: block; font-family: var(--font-display); font-size: 2rem; letter-spacing: -.04em; color: var(--strong); font-weight: 500; line-height: 1.1; }
.form-alert { padding: 14px 16px; border: 2px solid var(--err); border-radius: 12px; color: var(--err); font-weight: 600; }
.form-alert[hidden], .fallback[hidden] { display: none; }
.form-status { font-weight: 600; color: var(--strong); }
.fallback { display: grid; gap: 12px; padding: 16px; border: 1.5px solid var(--strong); border-radius: 12px; background: var(--sky); }
.fallback textarea { width: 100%; min-height: 120px; padding: 10px; border: 1.5px solid var(--soft); border-radius: 10px; font: 400 1rem/1.4 var(--font-body); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .panel { padding: 32px; } }
.book-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .book-grid { grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; } .side-card { position: sticky; top: calc(var(--header-h) + 24px); } }
.side-card { background: var(--navy); color: var(--white); border-radius: 20px; padding: 28px; display: grid; gap: 16px; }
.side-card p { color: var(--on-navy-soft); }
.side-card .text-link { color: #A8DCFB; }
.side-card .text-link:hover { color: var(--white); }

/* Contact tiles */
.tiles { display: grid; gap: 14px; }
.tile { display: grid; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; min-height: 120px; align-content: center; transition: background-color .2s var(--out3), border-color .2s var(--out3); }
.tile strong { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.03em; }
.tile span { color: var(--soft); overflow-wrap: break-word; }
@media (min-width: 640px) and (max-width: 1100px) { .tile span { font-size: .875rem; } .tile { padding: 20px 16px; } }
@media (max-width: 400px) { .pill { font-size: .8125rem; letter-spacing: -.01em; padding: 0 12px; } }
.tile:hover { background: var(--card-hi); border-color: var(--line-hi); }
.tile--main { background: var(--grad-btn); border-color: transparent; color: var(--white); }
.tile--main span { color: #E6F2FB; }
.tile--main:hover { background: var(--grad-btn); box-shadow: inset 0 0 0 200px rgba(255,255,255,.12); border-color: transparent; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }

.facts { display: grid; gap: 10px; }
.facts div { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.facts dt { font-weight: 600; color: var(--soft); font-size: .9375rem; }
.facts dd { overflow-wrap: break-word; }
.facts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 600; }

.sibs { display: grid; gap: 12px; }
.sib { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 72px; padding: 14px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; transition: background-color .2s var(--out3), border-color .2s var(--out3); }
.sib b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; }
.sib span { font-family: var(--font-display); font-size: 1.25rem; color: var(--strong); }
.sib:hover { background: var(--card-hi); border-color: var(--line-hi); }
.sib:hover b { color: var(--link); }
@media (min-width: 640px) { .sibs { grid-template-columns: repeat(2, 1fr); } .sib { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; } }
@media (min-width: 1024px) { .sib { flex-direction: row; align-items: center; justify-content: space-between; } }

.reviews-grid { display: grid; gap: 20px; margin-top: 40px; }
.review-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); display: grid; gap: 14px; }
@media (min-width: 640px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .reviews-grid[data-count="3"], .reviews-grid[data-count="4"] { grid-template-columns: repeat(3, 1fr); } }

/* CTA panel (end of every page) */
.cta-section { position: relative; display: block; padding-block: clamp(48px, 8vw, 96px); }
.cta-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 64px 20px; text-align: center; background: linear-gradient(180deg, #061F40 0%, #082851 55%, #0A3A78 100%); border: 1px solid rgba(143,203,242,.35); }
.cta-panel > span { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.cta-panel h2 { font-size: 2rem; max-width: 14em; margin-inline: auto; text-wrap: balance; position: relative; }
.cta-panel .cta-row { margin-top: 28px; }
.cta-panel .cta-row--c { justify-items: center; }
@media (min-width: 640px) { .cta-panel { padding: 80px 40px; } .cta-panel h2 { font-size: 2.5rem; } }
@media (min-width: 1024px) { .cta-panel { padding: 104px 40px; } .cta-panel h2 { font-size: 3.5rem; } }

/* Footer (light, true logo transparency) */
.site-footer { background: var(--sky); color: var(--ink); padding-block: 56px 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 32px; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 64px; width: auto; }
.site-footer h2 { font-size: 1rem; letter-spacing: 0; font-weight: 600; color: var(--blue-text); margin-bottom: 8px; font-family: var(--font-body); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; transition: color .2s var(--out3); }
.site-footer a:hover { color: var(--blue-text); text-decoration: underline; text-underline-offset: .2em; }
.site-footer address { color: var(--soft); margin-top: 12px; }
.footer-base { max-width: none; margin-top: 40px; padding-top: 20px; border-top: 1px solid #C5DAEE; color: var(--soft); font-size: .9375rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; } }

/* Mobile bar */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 7fr 3fr; height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--navy); transform: translateY(101%); transition: transform .45s var(--out); }
.bottom-bar.is-shown { transform: none; }
.bottom-bar.is-away { transform: translateY(101%); }
.bottom-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--white); min-height: 48px; }
.bottom-bar a:first-child { background: var(--grad-btn); }
.bottom-bar a:last-child { border-left: 1px solid rgba(255,255,255,.3); }
.bottom-bar svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 640px) { .bottom-bar { display: none; } }

/* Cross-document page transition */
@view-transition { navigation: auto; }
/* no view-transition-name on the header: it would make the header a backdrop root and stop the glass blurring the page behind it */
.bottom-bar { view-transition-name: bottom-bar; }
main { view-transition-name: page; }
::view-transition-old(page) { animation: vt-out .18s ease both; }
::view-transition-new(page) { animation: vt-in .25s cubic-bezier(.165, .84, .44, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* CTA panel link on navy: white for contrast over the glow */
.cta-panel .text-link { color: #fff; }
.cta-panel .text-link:hover { color: #fff; opacity: .85; }

/* ===== Liquid glass v2 (2026-11-03) =====
   One functional layer: the header controls. Tiers (set by js/glass.js on <html>):
   - base (no JS) and .lg-css: CSS material. Light blur, saturation, white fill, Blender-rendered rim sprite, pointer sheen.
   - .lg-gl: same DOM, plus one WebGL canvas in the header that draws the refracting rim (edge lensing, dispersion,
     studio reflections from a Blender matcap). The centre stays real backdrop-filter, so text and links are untouched.
   Each glass control adapts: .is-dark (light ink, navy fill) over navy and dark photos; light otherwise.
   Content-layer items (eyebrow pill, arrow links) are plain; .btn--line keeps a CSS glass material. */
:root {
  --spring: cubic-bezier(.3, 1.35, .5, 1);
  --lg-fill: rgba(255,255,255,.16);
  --lg-fill-dark: rgba(6,31,64,.34);
  --lg-blur: 6px;
  --lg-sat: 120%;
  --lg-shadow: 0 1px 1px rgba(8,40,81,.08), 0 2px 6px -1px rgba(8,40,81,.1), 0 10px 28px -8px rgba(8,40,81,.24);
  --lg-shadow-dark: 0 1px 1px rgba(0,8,20,.3), 0 2px 6px -1px rgba(0,8,20,.3), 0 12px 32px -10px rgba(0,8,20,.55);
  /* CSS tier rim: bright top-left, faint bottom-right counter rim, soft edge darkening that sells the curvature */
  --lg-inner: inset 1px 1.5px 0 -.5px rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.4), inset -1px -1.5px 0 -.5px rgba(255,255,255,.45), inset 0 -6px 14px -10px rgba(8,40,81,.18);
  --lg-curve: radial-gradient(120% 150% at 50% 10%, rgba(8,40,81,0) 58%, rgba(8,40,81,.1) 100%);
  --lg-ink: #071A33;
  --lg-dim: #27405F;
  --lg-halo: 0 0 2px rgba(255,255,255,.9), 0 0 7px rgba(255,255,255,.8), 0 0 16px rgba(255,255,255,.55);
  --lg-halo-dark: 0 0 2px rgba(6,31,64,.85), 0 0 7px rgba(6,31,64,.75), 0 0 16px rgba(6,31,64,.5);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.053 5%, 0.179 10%, 0.337 15%, 0.5 20%, 0.65 25%, 0.777 30%, 0.878 35%, 0.952 40%, 1.002 45%, 1.033 50%, 1.049 55%, 1.054 60%, 1.052 65%, 1.046 70%, 1.037 75%, 1.028 80%, 1.02 85%, 1.013 90%, 1.007 95%, 1); }
}

/* Glass controls: which element is glass depends on width (read by glass.js through --lg-on) */
.lg { --lg-on: 0; }
@media (max-width: 1023px) { .lg--bar { --lg-on: 1; } }
@media (min-width: 1024px) { .lg--nav, .lg--btn, .lg--tint { --lg-on: 1; } }

.lg--bar, .lg--nav, .lg--btn {
  position: relative; isolation: isolate;
  color: var(--lg-ink);
  transition: background-color .35s var(--out3), box-shadow .35s var(--out3), color .35s var(--out3), transform .5s var(--spring);
}
@media (max-width: 1023px) {
  .lg--bar {
    background-color: var(--lg-fill); background-image: var(--lg-curve);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    box-shadow: var(--lg-inner), var(--lg-shadow);
  }
}
@media (min-width: 1024px) {
  .lg--nav, .lg--btn {
    background-color: var(--lg-fill); background-image: var(--lg-curve);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    box-shadow: var(--lg-inner), var(--lg-shadow);
  }
  /* Tinted glass: the one primary action. Navy-blue tint dense enough for white text over any backdrop. */
  .lg--tint {
    background: linear-gradient(158deg, rgba(8,47,143,.9) 0%, rgba(10,77,216,.86) 100%);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%); backdrop-filter: blur(var(--lg-blur)) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 28px -10px rgba(10,77,216,.6);
    isolation: isolate; transition: box-shadow .35s var(--out3), transform .5s var(--spring);
  }
  .lg--tint:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 60px rgba(255,255,255,.12), 0 12px 30px -10px rgba(10,77,216,.7); }
}
/* Dark adaptive: over navy panels and dark photos */
.lg.is-dark { color: #fff; }
@media (max-width: 1023px) { .lg--bar.is-dark { background-color: var(--lg-fill-dark); background-image: none; box-shadow: inset 1px 1.5px 0 -.5px rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.16), inset -1px -1.5px 0 -.5px rgba(255,255,255,.22), var(--lg-shadow-dark); } }
@media (min-width: 1024px) { .lg--nav.is-dark, .lg--btn.is-dark { background-color: var(--lg-fill-dark); background-image: none; box-shadow: inset 1px 1.5px 0 -.5px rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.16), inset -1px -1.5px 0 -.5px rgba(255,255,255,.22), var(--lg-shadow-dark); } }

/* Text legibility over any backdrop: ink adapts per item (set by glass.js from what is behind that label),
   with a soft halo hugging the glyphs in the opposite tone */
.lg--nav > ul > li > a, .lg--bar .menu-toggle, .lg--bar .icon-btn--call, .lg--btn { color: var(--lg-ink); text-shadow: var(--lg-halo); }
.lg--nav > ul > li > a.ink-dark, .lg--bar .menu-toggle.ink-dark, .lg--bar .icon-btn--call.ink-dark, .lg--btn.is-dark { color: #fff; text-shadow: var(--lg-halo-dark); }
.lg--btn svg, .lg--bar .icon-btn--call svg, .lg--bar .menu-icon { filter: drop-shadow(0 0 3px rgba(255,255,255,.7)); }
.lg--btn.is-dark svg, .lg--bar .icon-btn--call.ink-dark svg, .lg--bar .menu-toggle.ink-dark .menu-icon { filter: drop-shadow(0 0 3px rgba(6,31,64,.7)); }
.drop-panel a { text-shadow: none; }

/* Contrast: one whole-body layer per control (--veil, set by glass.js from what is behind the labels), never a
   plate behind a single label. White lifts dark content behind navy ink; navy dims bright content behind white ink.
   CSS tier: painted here over the backdrop blur. GL tier: the shader paints it (the CSS body is transparent there). */
.lg--bar .menu-toggle { position: relative; }
@media (max-width: 1023px) {
  .lg--bar { background-image: linear-gradient(rgba(255,255,255,var(--veil, 0)), rgba(255,255,255,var(--veil, 0))), var(--lg-curve); }
  .lg--bar.is-dark { background-image: linear-gradient(rgba(6,31,64,var(--veil, 0)), rgba(6,31,64,var(--veil, 0))); }
}
@media (min-width: 1024px) {
  .lg--nav, .lg--btn { background-image: linear-gradient(rgba(255,255,255,var(--veil, 0)), rgba(255,255,255,var(--veil, 0))), var(--lg-curve); }
  .lg--nav.is-dark, .lg--btn.is-dark { background-image: linear-gradient(rgba(6,31,64,var(--veil, 0)), rgba(6,31,64,var(--veil, 0))); }
  /* The bar is not glass on desktop. Its sheen pseudo (mix-blend-mode: plus-lighter) made Chromium isolate the bar
     as a backdrop root, so the nav blur only saw the transparent bar: no blur at all. Not drawn on desktop. */
  .site-header .lg--bar::before { content: none; }
}

/* Rim sprite (Blender render of a glossy capsule with the same bevel profile). 999px slices scale to a half height,
   so one image fits pills and circles. CSS tier only; the WebGL tier draws the rim in the shader. */
.lg--nav::after, .lg--btn::after, .lg--bar::after, .btn--line::after, .nav-lens::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  border-style: solid; border-width: 0; border-color: transparent;
  border-image: url(../img/glass/lg-capsule.webp) 64 fill / 999px stretch;
  opacity: 1;
}
@media (max-width: 1023px) { .lg--nav::after, .lg--btn::after { content: none; } }
@media (min-width: 1024px) { .lg--bar::after { content: none; } }
.lg--bar.is-dark::after, .lg--nav.is-dark::after, .lg--btn.is-dark::after { opacity: .7; }
.lg-gl .lg--nav::after, .lg-gl .lg--btn::after, .lg-gl .lg--bar::after { content: none; }

/* Pointer sheen: follows the pointer (fine pointers), blooms on press (all). Static highlight when motion is reduced. */
.lg--nav::before, .lg--btn::before, .lg--bar::before, .lg--tint::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.6), rgba(255,255,255,.18) calc(var(--sr, 40%) * .45), rgba(255,255,255,0) var(--sr, 40%));
  mix-blend-mode: plus-lighter; opacity: var(--sheen, 0); transition: opacity .3s var(--out3);
}
.lg--tint::before { background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.3), rgba(255,255,255,0) var(--sr, 50%)); }
.lg.is-dark::before { background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.34), rgba(255,255,255,.1) calc(var(--sr, 40%) * .45), rgba(255,255,255,0) var(--sr, 40%)); }
.lg:hover { --sheen: 1; }
.lg.is-pressed { --sheen: 1; --sr: 75%; }
.lg--nav > ul, .lg--bar > *, .lg--btn > *, .lg--tint > * { position: relative; z-index: 1; }

/* Desktop nav pill: sliding glass lozenge for the current or hovered item */
.nav-lens {
  position: absolute; left: 0; top: 4px; z-index: 1; height: 44px; width: var(--lw, 80px); border-radius: 22px; pointer-events: none;
  transform: translateX(var(--lx, 0px)) scale(var(--lsx, 1), var(--lsy, 1));
  background: rgba(255,255,255,.42);
  box-shadow: inset 1px 1.5px 0 -.5px #fff, inset 0 0 0 1px rgba(255,255,255,.55), inset -1px -1.5px 0 -.5px rgba(255,255,255,.6), inset 0 -4px 10px -6px rgba(8,40,81,.18), 0 1px 1px rgba(8,40,81,.1), 0 4px 12px -3px rgba(8,40,81,.28);
  opacity: 0;
  transition: transform .55s var(--spring), width .55s var(--spring), opacity .25s var(--out3), background-color .35s var(--out3);
}
.nav-lens.is-on { opacity: 1; }
.nav-lens.is-moving { --lsy: .86; --lsx: 1.15; }
.nav-lens.is-pressed { --lsy: .84; --lsx: 1.1; transition-duration: .16s, .55s, .25s, .35s; }
.nav-lens.is-dark { background: rgba(255,255,255,.26); box-shadow: inset 1px 1.5px 0 -.5px rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.3), inset -1px -1.5px 0 -.5px rgba(255,255,255,.3), 0 4px 12px -3px rgba(0,0,0,.45); }
.nav-lens.is-dark::after { opacity: .6; }
.lg--nav > ul { position: relative; z-index: 2; }
.js .lg--nav.has-lens a[aria-current="page"], .js .lg--nav.has-lens .nav-drop > a[aria-current="true"] { background: none; box-shadow: none; }
.primary-nav a:hover, .nav-drop > a:hover { background: none; }
html:not(.js) .primary-nav a:hover { background: rgba(255,255,255,.5); }

/* Press: gel squash with spring release */
.lg--btn:active, .lg--tint:active { transform: scale(.94); transition-duration: .12s; }
.lg--nav.is-pressed { transform: scale(.97, .94); transition-duration: .14s; }
.lg--bar .icon-btn:active, .lg--bar .menu-toggle:active { transform: scale(.92); }
.lg--bar .icon-btn, .lg--bar .menu-toggle { transition: transform .45s var(--spring), background-color .2s var(--out3), color .35s var(--out3); }

/* Mobile and tablet: one floating capsule (logo, call, WhatsApp, menu). Inner controls are not glass. */
@media (max-width: 1023px) {
  .site-header { padding: max(8px, env(safe-area-inset-top, 0px)) 10px 0; }
  .header-inner { height: 56px; padding: 0 6px 0 12px; border-radius: 28px; gap: 4px; max-width: 760px; }
  .logo { min-height: 44px; }
  .logo img { height: 40px; }
  .icon-btn { width: 44px; height: 44px; background: none; }
  .icon-btn:hover { background-color: rgba(255,255,255,.45); }
  .lg--bar.is-dark .icon-btn:not(.icon-btn--wa):hover, .lg--bar.is-dark .menu-toggle:hover { background-color: rgba(255,255,255,.14); }
  .icon-btn--wa { background: var(--grad-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px -2px rgba(10,77,216,.5); }
  .menu-toggle { min-height: 44px; padding: 0 14px 0 12px; background: none; color: inherit; }
  .menu-toggle:hover { background-color: rgba(255,255,255,.45); }
  .icon-btn--call { color: inherit; }
}
.menu-icon { background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat; }
.site-header.on-dark .logo-d { display: none; }
.site-header.on-dark .logo-l { display: block; }

/* Desktop glass buttons */
@media (min-width: 1024px) {
  .lg--btn { color: var(--lg-ink); }
  .lg--btn.is-dark { color: #fff; }
  .lg--btn:hover { background-color: rgba(255,255,255,.5); }
  .lg--btn.is-dark:hover { background-color: rgba(6,31,64,.3); }
  .primary-nav { padding: 4px; }
}

/* Glass sheets: services dropdown and mobile menu, same material, denser fill for long text */
/* The dropdown sits inside the nav, which is a backdrop root, so its own blur cannot see the page: near-opaque fill */
.drop-panel {
  background-color: rgba(246,250,255,.97);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px rgba(33,146,214,.12), 0 22px 50px -18px rgba(8,40,81,.4);
  color: var(--lg-ink); text-shadow: none;
}
.drop-panel a { color: var(--lg-ink); }
.menu {
  background: rgba(246,250,255,.86);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(33,146,214,.12), 0 28px 80px -20px rgba(8,40,81,.5);
  border-radius: 28px; transform-origin: calc(100% - 40px) 28px;
}
.menu:not([hidden]) { animation: lg-sheet-in .5s var(--spring) both; }
@keyframes lg-sheet-in { from { opacity: 0; transform: scale(.9) translateY(-6px); } }
.menu-list a:hover, .menu-list a[aria-current="page"] { background: rgba(255,255,255,.7); }
.menu-ic { background: rgba(33,146,214,.12); }
.menu-close { background: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(33,146,214,.15); }

/* Content layer: no glass (HIG). Eyebrow is a quiet tinted chip, arrow links are links. */
.pill { background: rgba(33,146,214,.09); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
.on-navy .pill { background: rgba(255,255,255,.1); }
.text-link--arrow { padding: 0 4px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.on-navy .text-link--arrow, .cta-panel .text-link--arrow { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Secondary button: CSS glass only (content layer, kept per brief) */
.btn--line {
  isolation: isolate; background-color: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(33,146,214,.18), 0 8px 22px -10px rgba(8,40,81,.3);
  transition: background-color .2s var(--out3), box-shadow .2s var(--out3), transform .45s var(--spring);
}
.btn--line > * { position: relative; z-index: 1; }
.btn--line:hover { background-color: rgba(255,255,255,.7); }
.btn--line:active { transform: scale(.96); transition-duration: .12s; }
.on-navy .btn--line { background-color: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 22px -10px rgba(0,0,0,.5); }
.on-navy .btn--line::after { opacity: .5; }
.on-navy .btn--line:hover { background-color: rgba(255,255,255,.18); }
.menu .btn--line { background-color: rgba(255,255,255,.7); }

/* Something to refract: a light mesh and blueprint lines behind the top of every hero, a navy band on home */
.hero::before, .hero-sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 460px; pointer-events: none;
  background:
    radial-gradient(14% 30% at 71% 2%, rgba(10,77,216,.3), rgba(10,77,216,0) 100%),
    radial-gradient(12% 26% at 26% 4%, rgba(33,146,214,.34), rgba(33,146,214,0) 100%),
    radial-gradient(34% 62% at 14% 0%, rgba(110,186,245,.5), rgba(110,186,245,0) 100%),
    radial-gradient(30% 56% at 86% 0%, rgba(10,77,216,.22), rgba(10,77,216,0) 100%),
    radial-gradient(26% 46% at 54% 0%, rgba(140,200,240,.3), rgba(140,200,240,0) 100%);
}
.hero::after, .hero-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 360px; pointer-events: none;
  /* blueprint grid plus two drafting arcs that cross under the nav, so the lens has lines to bend at rest */
  background-image: radial-gradient(circle 520px at 18% -380px, rgba(11,51,103,0) 518px, rgba(11,51,103,.26) 519px, rgba(11,51,103,.26) 520.5px, rgba(11,51,103,0) 521.5px),
    radial-gradient(circle 420px at 72% -330px, rgba(11,51,103,0) 418px, rgba(11,51,103,.22) 419px, rgba(11,51,103,.22) 420.5px, rgba(11,51,103,0) 421.5px),
    linear-gradient(rgba(11,51,103,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(11,51,103,.14) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; background-position: 0 0, 0 0, center -1px, center -1px; background-repeat: no-repeat, no-repeat, repeat, repeat;
  -webkit-mask-image: linear-gradient(#000 0, rgba(0,0,0,.5) 45%, transparent 100%); mask-image: linear-gradient(#000 0, rgba(0,0,0,.5) 45%, transparent 100%);
}
.band-what { background: linear-gradient(90deg, rgba(33,146,214,0), #2192D6 50%, rgba(33,146,214,0)) top / 100% 2px no-repeat, linear-gradient(rgba(168,220,251,.07) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(168,220,251,.07) 1px, transparent 1px) 0 0 / 48px 48px, radial-gradient(60% 120% at 50% 100%, rgba(33,146,214,.35), rgba(33,146,214,0) 70%), var(--navy); padding-block: clamp(56px, 9vw, 104px); }
.band-what .what { color: #fff; }

/* The WebGL rim canvas */
.lg-canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; display: block; }
.lg--bar > .lg-canvas { position: absolute; z-index: 0; }
/* GL tier: the canvas under the controls draws the whole body (fill .13 white / .22 navy, saturation 1.12, no
   brightness), so the CSS body is cleared: no fill, no backdrop-filter, only the layered outer shadow. */
.lg-gl { --lg-fill: rgba(255,255,255,.13); --lg-fill-dark: rgba(6,31,64,.22); --lg-blur: 3px; --lg-sat: 115%; }
@media (min-width: 1024px) {
  .lg-gl .lg--nav, .lg-gl .lg--btn, .lg-gl .lg--tint, .lg-gl .lg--nav.is-dark, .lg-gl .lg--btn.is-dark { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--lg-shadow); }
  .lg-gl .lg--nav.is-dark, .lg-gl .lg--btn.is-dark { box-shadow: var(--lg-shadow-dark); }
  .lg-gl .lg--tint { box-shadow: 0 1px 1px rgba(8,40,81,.1), 0 10px 28px -10px rgba(10,77,216,.6); }
  .lg-gl .lg--btn:hover { background-color: rgba(255,255,255,.18); }
  .lg-gl .lg--btn.is-dark:hover { background-color: rgba(255,255,255,.12); }
}
@media (max-width: 1023px) {
  .lg-gl .lg--bar, .lg-gl .lg--bar.is-dark { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--lg-shadow); }
  .lg-gl .lg--bar.is-dark { box-shadow: var(--lg-shadow-dark); }
  .lg-gl .lg--bar::before { z-index: 1; }
}
/* Focus ring: just outside the link, inside the pill padding, never under the rim; white over dark glass */
.lg--nav > ul > li > a:focus-visible { outline-offset: 0; }
.lg--nav > ul > li > a.ink-dark:focus-visible, .lg--bar .ink-dark:focus-visible, .lg--btn.is-dark:focus-visible, .site-header.on-dark .logo:focus-visible { outline-color: #fff; }
.lg--bar .icon-btn:focus-visible, .lg--bar .menu-toggle:focus-visible { outline-offset: -3px; }
/* No JS: no adaptation, so the header gets an opaque light band; logo and navy labels never sit on navy */
html:not(.js) .site-header { background: rgba(246,250,255,.96); box-shadow: 0 1px 0 rgba(8,40,81,.08), 0 8px 24px -16px rgba(8,40,81,.3); }
.logo { min-width: 44px; }
/* Logo halo in the tone opposite to the logo: follows the artwork alpha (never a box), holds contrast over mixed content */
.js .site-header .logo img { filter: drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 5px rgba(255,255,255,.55)); }
.js .site-header.on-dark .logo img { filter: drop-shadow(0 0 1px rgba(6,31,64,.8)) drop-shadow(0 0 5px rgba(6,31,64,.5)); }

/* Fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-fill: rgba(246,250,255,.94); --lg-fill-dark: rgba(8,40,81,.94); }
  .drop-panel, .menu { background-color: rgba(246,250,255,.98); }
  .btn--line { background-color: rgba(255,255,255,.9); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-fill: #F4F9FE; --lg-fill-dark: #0B3367; }
  .lg, .lg--tint, .drop-panel, .menu, .btn--line { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .lg--tint { background: var(--grad-btn); }
  .drop-panel, .menu { background-color: #F4F9FE; }
  .btn--line { background-color: #fff; }
  .on-navy .btn--line { background-color: #0E4079; }
  .lg-canvas { display: none; }
  .lg--nav a, .lg--bar .menu-toggle, .lg--bar .icon-btn--call, .lg--nav.is-dark a { text-shadow: none; }
}
@media (prefers-contrast: more) {
  :root { --lg-fill: #fff; --lg-fill-dark: #061F40; }
  .lg--nav, .lg--btn, .lg--bar { box-shadow: 0 0 0 2px currentColor !important; }
  .lg::before, .lg::after { content: none !important; }
  .lg-canvas { display: none; }
}
@media (forced-colors: active) {
  .lg, .lg--tint, .drop-panel, .menu, .btn--line { background: Canvas !important; color: CanvasText !important; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; text-shadow: none !important; }
  .drop-panel, .menu, .btn--line { border: 1px solid CanvasText; }
  .lg::before, .lg::after, .btn--line::after, .nav-lens, .lg-canvas, .hero::before, .hero::after, .hero-sub::before, .hero-sub::after { display: none !important; }
  .lg--nav a { text-shadow: none; }
  .lg--nav > ul > li > a::before, .lg--bar .icon-btn--call::before, .lg--bar .menu-toggle::before { display: none; }
}
@media (forced-colors: active) and (max-width: 1023px) { .lg--bar { border: 1px solid CanvasText; } }
@media (forced-colors: active) and (min-width: 1024px) { .lg--nav, .lg--btn, .lg--tint { border: 1px solid CanvasText; } }
@media (prefers-reduced-motion: reduce) {
  .nav-lens, .lg, .lg--tint, .btn--line, .lg--bar .icon-btn, .lg--bar .menu-toggle { transition: none !important; }
  .lg:active, .lg--tint:active, .btn--line:active, .lg.is-pressed, .lg--bar .icon-btn:active, .lg--bar .menu-toggle:active { transform: none !important; }
  .nav-lens.is-moving, .nav-lens.is-pressed { --lsx: 1; --lsy: 1; }
  .lg { --mx: 30% !important; --my: 0% !important; }
  .menu:not([hidden]) { animation: none; }
}

/* Fix: glass block must not override dropdown positioning */
.drop-panel { position: absolute; }

/* Form placeholder: grey, AA contrast on white inputs */
.field textarea::placeholder, .field input::placeholder { color: #5A6A7E; opacity: 1; }

/* ===== Installation page (2026-11-02) ===== */
/* Illustration in hero */
.ih { overflow: hidden; border: 1px solid var(--line-hi); border-radius: 24px; box-shadow: 0 24px 60px -34px rgba(8,40,81,.4); background: var(--sky); }
.ih svg { display: block; width: 100%; height: auto; }
.notice-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-btn); color: #fff; flex: none; }
.notice-ic svg { width: 24px; height: 24px; }
.i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* MS-BEGIN */
/* Free site survey banner v3, Concept C "Measured first" (2026-11-03, survey-brief.md, critic round 1 fixes).
   Light blueprint field, FREE drafted then inked (hairline ghost behind a solid navy fill), one photographic unit on a drawn wall,
   glass strip tucked under the unit, amber tag (the only amber). Archivo (SIL OFL) is self-hosted and used in this banner only.
   Motion only under html.js-motion (never with reduced motion). */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-banner.woff2") format("woff2"); font-weight: 600 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
.ms { --ms-navy: #082851; --ms-blue: #2192D6; --ms-deep: #0A4DD8; --ms-lab: #12659A; --ms-amber: #F5A524; --ms-ink: #071A33;
  --ms-disp: "Archivo", "Arial Black", "Segoe UI", system-ui, sans-serif; --ms-mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --ms-dim: rgba(33,146,214,.85); --ms-pad-x: 16px; --ms-pad-t: 18px;
  position: relative; isolation: isolate; overflow: hidden; margin-block: 8px 0; color: var(--ms-ink);
  border-block: 1px solid #D3E4F3;
  background:
    radial-gradient(ellipse 46% 110% at 88% 8%, #fff 0, rgba(255,255,255,.7) 38%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #EAF4FC 0, #E3EFFA 100%); }
/* blueprint grid: 24px minor, 96px major, fading out towards the edges */
.ms::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(33,146,214,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(33,146,214,.12) 1px, transparent 1px),
    linear-gradient(rgba(33,146,214,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(33,146,214,.055) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: 50% -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 45% 50%, #000 40%, rgba(0,0,0,.35) 100%); mask-image: radial-gradient(ellipse 75% 95% at 45% 50%, #000 40%, rgba(0,0,0,.35) 100%); }
/* film grain, field only */
.ms::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .16 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
.ms-in { --uw: min(44vw, 184px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "unit" "panel"; max-width: 1280px; margin-inline: auto; padding: var(--ms-pad-t) var(--ms-pad-x) 20px; }
.ms-site { display: contents; }

/* ---- dimension line kit: arrow + line + label + line + arrow ---- */
.ms-dl { display: flex; align-items: center; flex: 1 1 0; min-width: 0; color: var(--ms-dim); }
.ms-ln { display: block; flex: 1 1 auto; height: 1px; background: currentColor; transform-origin: 100% 50%; }
.ms-dl--end .ms-ln { transform-origin: 0 50%; }
.ms-ar { display: block; flex: none; width: 9px; height: 7px; background: currentColor; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.ms-dl--end .ms-ar { transform: scaleX(-1); }
.ms-lab { flex: none; padding-inline: 10px; font: 700 .8125rem/1 var(--ms-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-lab); white-space: nowrap; }

/* ---- FREE, dimensioned ---- */
.ms-h { --fs: calc((100vw - 2 * var(--ms-pad-x) - 26px) / 3.62); grid-area: h; position: relative; z-index: 2; display: grid; grid-template-columns: auto auto; grid-template-areas: ". dw" "dh free" ". kick"; justify-content: start; align-content: center; column-gap: 10px; row-gap: 8px; margin: 0; font-family: var(--ms-disp); color: var(--ms-navy); letter-spacing: 0; line-height: 1; }
.ms-dw { grid-area: dw; position: relative; display: flex; align-items: center; height: 16px; margin-inline: calc(var(--fs) * .068) calc(var(--fs) * .05); }
.ms-dw::before, .ms-dw::after { content: ""; position: absolute; top: 1px; bottom: -8px; width: 1px; background: rgba(33,146,214,.5); }
.ms-dw::before { left: 0; } .ms-dw::after { right: 0; }
.ms-dw .ms-lab { font-size: .875rem; }
/* height dimension: extension lines and the line itself overshoot the letters a little, like a drafted callout */
.ms-dh { grid-area: dh; position: relative; display: flex; flex-direction: column; align-items: center; width: 14px; margin-block: -6px; }
.ms-dh::before, .ms-dh::after { content: ""; position: absolute; left: 1px; right: -10px; height: 1px; background: rgba(33,146,214,.5); }
.ms-dh::before { top: 6px; } .ms-dh::after { bottom: 6px; }
.ms-dh .ms-dl { flex-direction: column; }
.ms-dh .ms-ln { width: 1px; height: auto; transform-origin: 50% 100%; }
.ms-dh .ms-dl--end .ms-ln { transform-origin: 50% 0; }
.ms-dh .ms-ar { width: 7px; height: 9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ms-dh .ms-dl--end .ms-ar { transform: scaleY(-1); }
.ms-dh .ms-lab { padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .08em; font-size: .875rem; }
/* solid navy to deep blue fill, a crisp 1.5px white top highlight (offset shadow peeking above each top edge), soft drop shadow */
.ms-free { grid-area: free; position: relative; display: block; margin-right: -.02em; font-family: var(--ms-disp); font-weight: 900; font-stretch: 125%; font-size: var(--fs); letter-spacing: .02em; line-height: .76; text-box: trim-both cap alphabetic;
  color: transparent; text-shadow: 0 -1.5px 0 rgba(255,255,255,.95), 0 10px 18px rgba(8,40,81,.10); }
.ms-free::before, .ms-free::after { content: attr(data-t); position: absolute; inset: 0; text-box: trim-both cap alphabetic; text-shadow: none; pointer-events: none; }
.ms-free::before { background: linear-gradient(180deg, #082851 0%, #0A3A9E 62%, #0A4DD8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* blueprint ghost: the same word as a hairline outline, offset down and right, behind the ink */
.ms-free::after { z-index: -1; translate: calc(var(--fs) * .05) calc(var(--fs) * .05); color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(33,146,214,.6); }
.ms-kick { grid-area: kick; display: block; padding-top: 6px; margin-left: calc(var(--fs) * .068); font-weight: 800; font-stretch: 112%; font-size: 1.125rem; line-height: 1.15; letter-spacing: 0; color: var(--ms-navy); }
.ms-k1, .ms-k2 { display: block; }

/* ---- unit on a drawn wall ---- */
.ms-unit { --ms-gap: 22px; --ax: .5; --ay: .84; --air-cut: -14%; grid-area: unit; position: relative; z-index: 4; justify-self: end; width: var(--uw); max-width: none; margin: 0 -4vw 0 0; }
.ms-unit::before { content: ""; position: absolute; z-index: 0; left: -30%; right: -25%; top: -45%; bottom: -55%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(207,231,248,0) 100%); pointer-events: none; }
.ms-img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(-10px -8px 16px rgba(8,40,81,.10)) drop-shadow(0 12px 14px rgba(8,40,81,.12)); }
.ms-wall { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ms-slab { position: absolute; top: calc(-1 * var(--ms-gap) - var(--ms-pad-t)); height: calc(var(--ms-pad-t) + 10px); left: -120%; right: -40vw; border-bottom: 1px solid rgba(8,40,81,.32);
  background: repeating-linear-gradient(135deg, rgba(8,40,81,.16) 0 1px, transparent 1px 7px); }
.ms-clr { position: absolute; left: 30%; top: calc(-1 * var(--ms-gap) + 8px); height: calc(var(--ms-gap) - 8px + 20%); display: flex; flex-direction: column; align-items: center; width: 9px; margin-left: -4px; }
.ms-clr .ms-dl { flex-direction: column; }
.ms-clr .ms-ln { width: 1px; height: auto; }
.ms-clr .ms-ar { width: 7px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ms-clr .ms-dl--end .ms-ar { transform: scaleY(-1); }
.ms-clr .ms-lab { position: absolute; right: 100%; top: 50%; translate: -2px -50%; padding: 0 6px 0 0; font-size: .75rem; letter-spacing: .1em; }
.ms-air { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; clip-path: inset(0 0 var(--air-cut, -40%) 0); }
.ms-haze { opacity: .5; }
/* amber luggage tag, the only warm element. Hangs from the underside of the unit. */
.ms-tag { --tw: 92px; position: absolute; z-index: 2; left: calc(var(--ax) * 100%); top: calc(var(--ay) * 100%); width: var(--tw); margin: 0 0 0 calc(var(--tw) / -2); padding-top: 22px; transform-origin: 50% 0; transform: rotate(3deg); filter: drop-shadow(-2px 3px 3px rgba(8,40,81,.22)); }
.ms-tag::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 1px; height: 33px; margin-left: -.5px; background: var(--ms-navy); }
.ms-tag::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 22px; width: 15px; height: 15px; margin: 4px 0 0 -7.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(8,40,81,.32), 0 1px 0 rgba(255,255,255,.55); }
.ms-tag-c { display: block; padding: 24px 5px 10px; background: linear-gradient(180deg, #F7B23D 0, var(--ms-amber) 60%, #EE9C17 100%); color: var(--ms-navy);
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  -webkit-mask-image: radial-gradient(circle at 50% 11.5px, transparent 0 4.5px, #000 5px); mask-image: radial-gradient(circle at 50% 11.5px, transparent 0 4.5px, #000 5px);
  font: 800 .8125rem/1.15 var(--ms-disp); font-stretch: 78%; letter-spacing: .005em; text-align: center; }

/* ---- glass panel ---- */
.ms-panel { grid-area: panel; position: relative; z-index: 3; margin-top: 18px; padding: 16px 16px 14px; border: 1px solid rgba(255,255,255,.85); border-radius: 18px;
  background: rgba(255,255,255,.64); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 20px 40px rgba(8,40,81,.12), inset 0 1px 0 rgba(255,255,255,.95); }
.ms-panel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #fff 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,0) 60%, rgba(33,146,214,.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ms-ph { margin: 0 0 12px; font: 800 1.25rem/1.15 var(--ms-disp); font-stretch: 112%; letter-spacing: 0; color: var(--ms-navy); }
.ms-pl { display: none; margin: 0 0 14px; font: 400 .9375rem/1.45 var(--font-body); color: var(--ms-ink); max-width: 40ch; text-wrap: pretty; }
.ms-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(158deg, #082851 0%, #0A4DD8 100%); color: #fff; font: 600 1rem/1.2 var(--font-body); text-decoration: none; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 12px 22px -12px rgba(10,77,216,.75), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .2s var(--out), box-shadow .2s var(--out); }
.ms-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .2s var(--out); pointer-events: none; }
.ms-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 26px -12px rgba(10,77,216,.8), inset 0 1px 0 rgba(255,255,255,.2); }
.ms-cta:hover::after { opacity: .14; }
.ms-cta:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.ms-cta svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.ms-fn { margin: 10px 0 0; font: 400 .8125rem/1.3 var(--font-body); color: #44566E; text-align: center; }

/* ---- phone: FREE across the full column, then the kicker with the unit tucked in beside it, then the panel ---- */
@media (max-width: 639px) {
  .ms-h { z-index: 3; }
  .ms-kick { max-width: 52%; font-size: 1.25rem; }
  .ms-unit { --ax: .6; z-index: 2; margin-top: -60px; }
  .ms-slab { top: -14px; height: 8px; left: 36%; right: -10vw; border-top: 1px solid rgba(8,40,81,.32); border-bottom: 0; }
  .ms-clr { display: none; }
  .ms-panel { z-index: 1; margin-top: 34px; }
}

/* ---- tablet and small desktop 640 to 1199: FREE and panel in one column, unit and tag in a right column; panel ends at the unit's left edge ---- */
@media (min-width: 640px) {
  .ms { --ms-pad-x: 28px; --ms-pad-t: 16px; }
  .ms-in { --uw: clamp(150px, 24vw, 250px); grid-template-columns: minmax(0, 1fr) var(--uw); grid-template-areas: "h unit" "panel panel"; column-gap: 20px; padding-bottom: 20px; }
  .ms-h { --fs: min(19vw, 180px, calc((100vw - 2 * var(--ms-pad-x) - var(--uw) - 20px - 40px) / 3.62)); z-index: 5; }
  .ms-kick { font-size: 1.25rem; }
  .ms-k1, .ms-k2 { display: inline; }
  .ms-unit { --ms-gap: 26px; --ax: .5; --ay: .84; --air-cut: -30%; width: 100%; margin: var(--ms-gap) 0 0; align-self: start; }
  .ms-clr { left: 14%; }
  .ms-clr .ms-lab { right: auto; left: 100%; translate: 2px -50%; padding: 0 0 0 6px; }
  .ms-slab { left: -12%; }
  .ms-panel { margin-top: 18px; padding: 16px calc(var(--uw) / 2 + 70px) 16px 18px; }
  /* longer string: the tag drops well inside the panel's top right corner, filling the reserved strip */
  .ms-tag { --tw: 108px; padding-top: 46px; }
  .ms-tag::before { height: 57px; }
  .ms-tag::after { top: 46px; }
  .ms-tag-c { padding: 26px 6px 12px; font-size: .9375rem; }
  .ms-ph { margin-bottom: 12px; }
}
@media (min-width: 768px) {
  .ms-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ph cta" "pl fn"; align-items: center; column-gap: 20px; row-gap: 6px; padding: 18px calc(var(--uw) / 2 + 74px) 18px 20px; }
  .ms-ph { grid-area: ph; margin: 0; align-self: center; }
  .ms-pl { grid-area: pl; display: block; margin: 0; font-size: .875rem; line-height: 1.4; align-self: start; }
  .ms-cta { grid-area: cta; align-self: center; }
  .ms-fn { grid-area: fn; margin: 0; align-self: start; }
}
@media (min-width: 1024px) {
  .ms { --ms-pad-x: 40px; --ms-pad-t: 20px; }
  .ms-kick { font-size: 1.375rem; }
  .ms-lab { font-size: .875rem; }
  .ms-dw .ms-lab, .ms-dh .ms-lab { font-size: .9375rem; }
}

/* ---- desktop 1200+: FREE dominates the left two thirds. The unit hangs top right on the wall,
   the glass strip tucks in under the end of FREE and under the unit, the tag hangs past the strip's right end ---- */
@media (min-width: 1200px) {
  .ms-in { display: block; max-width: 1360px; min-height: 324px; padding-bottom: 22px; }
  .ms-h { --fs: 220px; justify-content: start; }
  .ms-kick { font-size: 1.5rem; padding-top: 10px; }
  .ms-unit { --ms-gap: 28px; --ax: .86; --ay: .74; --air-cut: 0%; position: absolute; top: calc(var(--ms-pad-t) + var(--ms-gap)); right: var(--ms-pad-x); width: 268px; margin: 0; }
  .ms-clr { left: 52%; height: calc(var(--ms-gap) - 8px + 12%); }
  .ms-clr .ms-lab { right: 100%; left: auto; translate: -2px -50%; padding: 0 6px 0 0; }
  .ms-slab { left: -30%; }
  .ms-unit::before { bottom: -12%; left: -12%; }
  .ms-panel { position: absolute; z-index: 1; right: calc(var(--ms-pad-x) + 118px); bottom: 22px; display: grid; grid-template-columns: auto auto; grid-template-areas: "ph cta" "fn cta"; column-gap: 28px; row-gap: 4px; align-items: center; margin: 0; padding: 14px 16px 14px 22px; }
  .ms-ph { align-self: end; font-size: 1.3125rem; }
  .ms-pl { display: none; }
  .ms-fn { text-align: left; font-size: .8125rem; }
  .ms-cta { align-self: center; }
  .ms-tag { --tw: 92px; padding-top: 22px; }
  .ms-tag::before { height: 33px; }
  .ms-tag::after { top: 22px; }
  .ms-tag-c { padding: 24px 5px 10px; font-size: .8125rem; }
}

/* ---- motion: one sequence. FREE fades up (data-reveal), then the dimensions draw, then the tag swings once and rests ---- */
.js-motion .ms-h .ms-ln { transition: transform 700ms var(--out) 520ms; }
.js-motion .ms-h .ms-ar, .js-motion .ms-dw::before, .js-motion .ms-dw::after, .js-motion .ms-dh::before, .js-motion .ms-dh::after { transition: opacity 400ms var(--out) 950ms; }
.js-motion .ms-h:not(.is-in) .ms-dw .ms-ln { transform: scaleX(0); }
.js-motion .ms-h:not(.is-in) .ms-dh .ms-ln { transform: scaleY(0); }
.js-motion .ms-h:not(.is-in) :is(.ms-ar), .js-motion .ms-h:not(.is-in) :is(.ms-dw, .ms-dh)::before, .js-motion .ms-h:not(.is-in) :is(.ms-dw, .ms-dh)::after { opacity: 0; }
.js-motion .ms:has(.ms-h.is-in) .ms-tag { animation: ms-swing 1100ms cubic-bezier(.3, .7, .4, 1) 900ms 1 both; }
.js-motion .ms:has(.ms-h.is-in) .ms-air { animation: ms-drift 8s ease-in-out 1.2s infinite alternate both; }
@keyframes ms-swing { 0% { transform: rotate(-7deg); } 40% { transform: rotate(5deg); } 70% { transform: rotate(1.5deg); } 100% { transform: rotate(3deg); } }
@keyframes ms-drift { 0% { opacity: 1; } 100% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ms *, .ms *::before, .ms *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .ms-cta { border: 2px solid ButtonText; } .ms-free::before, .ms-free::after { display: none; } .ms-free { color: CanvasText; } }
/* MS-END */
/* Split only notice */
.notice { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 20px; background-color: var(--g-tint); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(170%); backdrop-filter: blur(var(--g-blur)) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(33,146,214,.28), 0 10px 28px -16px rgba(8,40,81,.3); }
.notice-ic { width: 52px; height: 52px; }
.notice h2 { font-size: 1.375rem; letter-spacing: -.02em; margin: 0 0 4px; }
.notice p { margin: 0; max-width: 52ch; }
@media (min-width: 640px) { .notice { padding: 24px 32px; gap: 24px; } .notice h2 { font-size: 1.75rem; } }
/* Process stepper: vertical on phone and tablet, horizontal on desktop */
.proc { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.pstep { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-bottom: 28px; }
.pstep:last-child { padding-bottom: 0; }
.pstep:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--blue), rgba(33,146,214,.25)); }
.ps-ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--navy); background-color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1px rgba(33,146,214,.35), 0 8px 20px -10px rgba(8,40,81,.35); }
.ps-ic svg { width: 26px; height: 26px; }
.ps-n { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 .75rem/1 var(--font-body); }
.pstep h3 { font-size: 1.1875rem; margin: 4px 0 4px; }
.pstep p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--soft); max-width: 46ch; }
.proc-cta { margin: 36px 0 0; text-align: center; max-width: none; }
@media (min-width: 1024px) {
  .proc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; max-width: none; }
  .pstep { display: block; padding: 0 4px; text-align: center; }
  .pstep:not(:last-child)::before { left: calc(50% + 36px); right: calc(-50% - 12px + 36px); top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--blue), rgba(33,146,214,.3)); }
  .ps-ic { margin: 0 auto 16px; }
  .pstep h3 { font-size: 1.0625rem; margin: 0 0 6px; }
  .pstep p { font-size: .875rem; margin-inline: auto; }
}
/* Materials: own drawn icons, 5 across on desktop, 2-up below */
.mat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mat { display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); min-width: 0; }
.mat:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2); }
.mat-ic { display: grid; place-items: center; height: 84px; border-radius: 12px; background: var(--sky); }
.mat-ic svg { width: 64px; height: 64px; overflow: visible; }
.mat h3 { font-size: 1.0625rem; margin: 4px 0 0; }
.mat dl { display: grid; gap: 6px; margin: 0; }
.mat dl div { display: grid; gap: 0; }
.mat dt { font-size: .75rem; color: var(--soft); line-height: 1.3; }
.mat dd { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.mat-cert { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.35; color: var(--link); max-width: none; }
.mat-note { margin: 24px auto 0; text-align: center; font-size: .875rem; color: var(--soft); max-width: none; }
@media (min-width: 640px) { .mat-grid { gap: 16px; } .mat { padding: 18px; } .mat:last-child:nth-child(odd) { width: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .mat-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } .mat:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; } }
.cu { fill: none; stroke: #B4602A; stroke-width: 3.2; stroke-linecap: round; }
.cu-end { fill: #E8A06A; stroke: #B4602A; stroke-width: 1.5; }
.tube { fill: none; stroke: #2192D6; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.rib { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.drop { fill: #2192D6; }
.foam { fill: #2B3A52; stroke: #071A33; stroke-width: 2; }
.foam-side { fill: #3A4B66; stroke: #071A33; stroke-width: 2; }
.foam-in { fill: #4B5C78; }
.sheath { fill: none; stroke: #082851; stroke-width: 8; stroke-linecap: round; }
.sheath-end { fill: #082851; }
.w1, .w2, .w3 { fill: none; stroke-width: 3; stroke-linecap: round; }
.w1 { stroke: #8B5A2B; } .w2 { stroke: #2192D6; } .w3 { stroke: #3E9B5F; }
.trunk { fill: #fff; stroke: #2192D6; stroke-width: 2.5; }
.trunk-l { fill: none; stroke: #2192D6; stroke-width: 2; }
.trunk-j { fill: none; stroke: #9DC1E3; stroke-width: 1.5; }
/* Nav: Aircon Installation is a top-level item; keep the glass pill uncrowded from 1024 */
@media (max-width: 1199px) { .nav-long { display: none; } }
@media (min-width: 1024px) and (max-width: 1199px) {
  .primary-nav a, .nav-drop > a { padding: 0 11px; font-size: .9375rem; }
  .header-actions { gap: 8px; }
  .btn.header-wa { padding: 0 16px; font-size: .875rem; }
  .icon-btn { width: 48px; height: 48px; }
}
.nav-long { margin-right: .28em; }
.hero-price { flex-wrap: wrap; justify-content: center; column-gap: 10px; row-gap: 4px; text-align: center; }
@media (max-width: 639px) { .hero-price { flex-direction: column; align-items: center; gap: 4px; } .hero-price strong { font-size: 2rem; } }
.mat-ic { height: 92px; } .mat-ic svg { width: 76px; height: 76px; }

/* Dropdown aligned to its trigger so it does not overhang the pill */
@media (min-width: 1024px) { .drop-panel { left: 0; transform: none; } }

/* ---- Batch 2026-11-02 ---- */
/* FAQ: one accordion pattern, balanced headings, no mid-word breaks */
.section-head h2, .faq-group h2 { text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
#pf-title { max-width: 20em; }
.section-head:has(#pf-title) { max-width: none; }
.faq { width: 100%; max-width: 52rem; margin-inline: auto; gap: 12px; }
.faq-group .faq { margin-inline: 0; max-width: none; }
.faq summary { min-height: 56px; padding: 12px 20px; line-height: 1.3; text-wrap: pretty; overflow-wrap: normal; hyphens: manual; }
.faq summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.faq .answer { padding: 0 20px 20px; max-width: 62ch; line-height: 1.6; }
@media (min-width: 640px) { .faq summary { font-size: 1.1875rem; min-height: 60px; } }

/* Materials: same 4:3 image slot for photos and drawn icons */
.mat-img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sky); }
.mat-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Survey banner fixes */
.sb-rib, .sb-badge span, .sb-cta, .sb-h { font-synthesis: weight; -webkit-font-smoothing: antialiased; }
@media (max-width: 639px) {
  .sb-in { padding-top: 56px; }
  .sb-badge { width: 64px; top: 6px; right: 10px; }
  .sb-badge span { font-size: .78125rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .sb-in { grid-template-columns: minmax(0, 1fr) auto; }
  .sb-cta { white-space: nowrap; font-size: 1rem; padding: 12px 20px; gap: 8px; }
}

/* Brands */
/* Grid, not flex: 6 chips (5 logos + "and more") always fill whole rows. 2 cols mobile (3x2), 3 cols tablet (3x2), 6 cols desktop (one row). */
.brands { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1100px; }
.brand { display: grid; place-items: center; min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); min-width: 0; }
.brand img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 32px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .85;
  transition: filter .2s, opacity .2s;
}

.brand:hover img, .brand:focus-within img {
  filter: none;
  opacity: 1;
}

.brand--txt span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -.01em;
  color: var(--strong);
}

@media (min-width: 640px) {
  .brands {
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .brands {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 1100px;
  }
  .brand {
    padding: 14px 10px;
  }
  .brand--txt span {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand img {
    transition: none;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .sb-free { margin-left: 20px; }
  .sb-in { grid-template-columns: minmax(0, 1.1fr) auto; }
}

.section-head { max-width: 40em; }
.section-head h2 { max-width: none; }

/* Survey banner: point labels stay readable over the bright rays (QA r12) */
.sb-pts li { font-weight: 800; font-size: 1rem; text-shadow: 0 1px 2px rgba(6,31,64,.85), 0 0 8px rgba(6,31,64,.7); }

/* Short notices stay on one line on desktop (no narrow measure when there is room) */
@media (min-width: 1024px) { .notice p { max-width: none; } }

/* Material cards: manufacturer cutouts (alpha) sit on the same soft sky slot as the icon cards */
.mat-img--cut { background: linear-gradient(180deg, #EAF4FC, #D8EAF8); box-shadow: inset 0 0 0 1px rgba(33,146,214,.12); }
.mat-img--cut img { object-fit: contain; padding: 2%; }

/* Reviews: cards, stars, source line, service filter (data from data/reviews.json) */
.rev-list { display: grid; gap: 16px; }
.rev-list--block { margin-top: 8px; }
.rev-card { align-content: start; }
.rev-card .stars { display: inline-flex; gap: 2px; }
.rev-card .stars svg { width: 20px; height: 20px; }
.rev-card .stars .on { fill: #C77700; }
.rev-card .stars .off { fill: #D3E4F3; }
.rev-card figcaption { display: grid; gap: 6px; }
.rev-card cite time { color: inherit; }
.rev-src { font-size: .875rem; color: var(--soft); }
.rev-src a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.rev-card--sm { padding: 22px 20px; gap: 14px; }
.rev-card--sm blockquote { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.55; letter-spacing: 0; max-width: 60ch; }
.rev-card--sm cite { font-size: .9375rem; }
.rev-card--sm cite::before { width: 40px; height: 40px; }
.rev-list[data-count="1"] .rev-card { width: 100%; }
.rev-agg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; max-width: none; color: var(--soft); }
.rev-agg strong { font-family: var(--font-display); font-size: 2rem; color: var(--strong); letter-spacing: -.02em; }
.rev-agg .stars { display: inline-flex; gap: 2px; } .rev-agg .stars svg { width: 20px; height: 20px; } .rev-agg .on { fill: #C77700; } .rev-agg .off { fill: #D3E4F3; }
.rev-filter { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.js .rev-filter { display: flex; }
.chip { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--card-hi); color: var(--ink); font: 500 .9375rem/1.2 var(--font-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--link); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.rev-empty { margin: 8px 0 0; color: var(--soft); max-width: none; }
.rev-card[hidden] { display: none; }
@media (min-width: 640px) {
  .rev-list[data-count]:not([data-count="1"]) { grid-template-columns: 1fr 1fr; }
  .rev-card--sm { padding: 26px 24px; }
}
@media (min-width: 1024px) {
  .rev-list--block[data-count="3"], .rev-list.rev-list--page[data-count]:not([data-count="1"]) { grid-template-columns: repeat(3, 1fr); }
}
.rev-more { display: grid; justify-items: center; gap: 14px; margin-top: 32px; text-align: center; }
.rev-more[hidden] { display: none; }
.rev-count { margin: 0; color: var(--soft); font-size: .9375rem; max-width: none; }
.rev-more .btn--more { min-height: 44px; padding: 10px 26px; border: 1px solid var(--line-hi); background: var(--card-hi); color: var(--ink); font-size: .9375rem; }
.rev-more .btn--more:hover { border-color: var(--link); }
.rev-more .btn--more[hidden] { display: none; }
.rev-card[tabindex="-1"]:focus { outline: 2px solid var(--link); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }
.rev-list--block[data-count="1"] { max-width: 720px; margin-inline: auto; }

/* Optional image slots (2026-11): a card, band or row with no photo closes up. Image files decide, see gen.js. */
.band--solo { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .svc-row--noimg { grid-template-columns: 1fr auto; }
  .svc-row--noimg > .svc-body { grid-column: 1; }
  .svc-row--noimg > .svc-price { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1024px) {
  .svc-row--noimg { grid-template-columns: 1.1fr 1.4fr auto; }
  .svc-row--noimg .svc-name { grid-column: 1; grid-row: 1; }
  .svc-row--noimg .svc-text { grid-column: 2; grid-row: 1; }
  .svc-row--noimg > .svc-price { grid-column: 3; grid-row: 1; }
  .svc-row--noimg .svc-actions { grid-column: 1 / 3; grid-row: 2; }
}

/* Footer (2026-11): email-signature block under the logo; social icons in Get in touch */
.site-footer .sig { display: grid; font-size: .9375rem; color: var(--soft); }
.site-footer .sig-row { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--soft); }
.site-footer .sig svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.site-footer .f-links li a { gap: 10px; }
.site-footer .f-links svg { width: 20px; height: 20px; flex: none; }

/* SEO and compliance pass (2026-11-04): footer copyright row with Privacy and Terms links. Taps stay 44px via .site-footer a. */
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.footer-base .f-copy { margin: 0; }
.f-legal ul { display: flex; flex-wrap: wrap; gap: 0 20px; }