/* ==========================================================================
   SELF-HOSTED FONTS
   Aspekta is not published on any font CDN (it isn't on Google Fonts or
   Fontsource), so the previous jsDelivr link 404'd and the site silently fell
   back to a system font. It's now served from /css/fonts, taken from the
   official release (github.com/ivodolenc/aspekta, SIL Open Font Licence 1.1).
   Space Mono is self-hosted alongside it to remove a third-party dependency.
   font-display:swap shows text immediately in a fallback, then swaps in.
   ========================================================================== */
@font-face{ font-family:'Aspekta'; src:url('fonts/Aspekta-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Aspekta'; src:url('fonts/Aspekta-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Aspekta'; src:url('fonts/Aspekta-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Elms Sans'; src:url('fonts/ElmsSans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Elms Sans'; src:url('fonts/ElmsSans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Elms Sans'; src:url('fonts/ElmsSans-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Mono'; src:url('fonts/SpaceMono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Mono'; src:url('fonts/SpaceMono-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ==========================================================================
   HALOM — Home page
   ========================================================================== */

:root{
  --black:#1a1a1a;
  --near-black:#202020;
  --dark-btn:#1c1c1c;
  --dark-btn-2:#2c2c2c;
  --beige:#d6d0c3;
  --light:#f2f2f2;
  --mid-gray:#dedede;
  --footer:#4a4a4a;
  --footer-line:#5c5c5c;
  --text-dark:#1a1a1a;
  --text-gray:#6b6b6b;
  --sans: var(--font-primary, 'Aspekta'), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: var(--font-secondary, 'Space Mono'), ui-monospace, 'SFMono-Regular', 'DejaVu Sans Mono', 'Courier New', monospace;
  --pad: 64px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{font-family:var(--sans); color:var(--text-dark); background:#fff; width:100%; overflow-x:hidden;}
.wrap{padding-left:var(--pad); padding-right:var(--pad);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

::selection{ background:#1a1a1a; color:#fff; }

@keyframes shimmer{ to{ transform:translateX(100%); } }

/* ---------- Scroll-reveal ---------- */
/* .reveal blocks no longer fade as one lump — see MOTION SYSTEM at the end. */

.claims-grid .claim-col:nth-child(1){ transition-delay:.05s; }
.claims-grid .claim-col:nth-child(2){ transition-delay:.15s; }
.claims-grid .claim-col:nth-child(3){ transition-delay:.25s; }
.split-cols .split-col:nth-child(2){ transition-delay:.1s; }
.spec-grid .spec-item:nth-child(2){ transition-delay:.08s; }
.spec-grid .spec-item:nth-child(3){ transition-delay:.16s; }
.footer-cols .footer-col:nth-child(2){ transition-delay:.05s; }
.footer-cols .footer-col:nth-child(3){ transition-delay:.1s; }
.footer-cols .footer-col:nth-child(4){ transition-delay:.15s; }
.footer-cols .footer-col:nth-child(5){ transition-delay:.2s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .ph:hover::after{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ---------- Placeholder image block ----------
   Swap these for real photography before/after upload —
   see README.txt for exactly where each one goes. */
.ph{
  position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 10px);
  border:1px dashed rgba(0,0,0,0.28);
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#000; font-family:var(--mono); font-size:12px; letter-spacing:0.5px;
  transition:border-color .3s ease;
}
.ph::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform:translateX(-120%);
}

.ph:hover{ border-color:rgba(0,0,0,0.30); }
.ph.on-dark{
  border-color:rgba(255,255,255,0.28); color:#fff;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 10px);
}
.ph.on-dark::after{ background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); }
.ph.on-dark:hover{ border-color:rgba(255,255,255,0.55); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:500;
  white-space:nowrap; cursor:pointer; border:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background-color .28s ease, color .28s ease;
}
.btn .arrow{ display:inline-block; transition:transform .28s cubic-bezier(.2,.8,.2,1); }

.btn:hover .arrow{ transform:translate(2px,-2px); }
.btn:active{ transform:translateY(-1px) scale(.96); transition-duration:.12s; }
.btn:focus-visible{ outline:2px solid #1a1a1a; outline-offset:3px; }

.btn-light{ background:#fff; color:#1a1a1a; }
.btn-light:hover{ background:#fff; box-shadow:0 3px 12px rgba(0,0,0,0.10); }

.btn-dark{ background:var(--dark-btn); color:#fff; }
.btn-dark:hover{ background:#000; }

.btn-dark-2{ background:var(--dark-btn-2); color:#e8e8e8; }
.btn-dark-2:hover{ background:rgba(255,255,255,0.14); color:#fff; }

.btn-pill-outline{ background:#e7e2d5; color:#1a1a1a; }
.btn-pill-outline:hover{ background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

.nav-pill .btn:focus-visible{ outline-color:#fff; }

/* ---------- NAV ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad); position:relative; z-index:20;
}
.logo-pill{
  background:#fff; border-radius:999px; padding:12px 22px; font-size:20px; font-weight:700; letter-spacing:0.5px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; display:inline-block;
}
.logo-pill:hover{ box-shadow:0 3px 12px rgba(0,0,0,0.12); }
.nav-pill{
  display:flex; align-items:center; gap:28px;
  background:#f2f0ea; border-radius:999px; padding:10px 12px 10px 26px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.5px; text-transform:uppercase; color:#1a1a1a;
}
.nav-pill .btn{ padding:12px 22px; font-family:var(--mono); font-size:13px; letter-spacing:0.5px; text-transform:uppercase;}
.nav-link{ position:relative; padding-bottom:2px; transition:opacity .25s ease; cursor:pointer; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:#1a1a1a;
  transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }
.nav-link:hover{ opacity:.6; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:30px; height:30px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:#1a1a1a; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{ display:none; }

/* ---------- HERO ---------- */
.hero{
  background:linear-gradient(135deg,#e4e4e6 0%, #cfcfd2 45%, #f4f4f4 100%);
  padding-top:24px;
}
.hero-stage{ padding:40px var(--pad) 0; }
.hero-stage .ph{ height:380px; width:100%; }
.hero-copy{ padding:40px var(--pad) 64px; max-width:520px; }
.hero-copy h1{ font-size:30px; line-height:1.4; font-weight:400; color:#3a3a3a; margin-bottom:24px; }

/* ---------- CLAIMS (dark) ---------- */
.claims{ background:var(--near-black); color:#fff; padding:64px var(--pad) 56px; }
.claims .head{ max-width:640px; margin-bottom:56px; }
.claims h2{ font-size:38px; font-weight:400; margin-bottom:16px; }
.claims .head p{ color:#a9a9a9; font-size:15px; line-height:1.5; }
.claims-grid{ display:flex; gap:48px; }
.claim-col{ flex:1; padding:20px; margin:-20px; border-radius:16px; transition:background-color .35s ease, transform .35s ease; }
.claim-col:hover{ background:rgba(255,255,255,0.05); }
.claim-col .num{ font-family:var(--mono); font-size:13px; color:#8a8a8a; margin-bottom:24px; transition:color .3s ease; }
.claim-col:hover .num{ color:#fff; }

/* Material Symbols renders its name as a ligature. If the icon font is
   slow or blocked, the raw word ("battery_charging_full") would otherwise
   sprawl across the layout — clipping it to the icon box keeps that
   failure quiet instead of ugly. */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal;
  display:inline-block; width:26px; height:26px; overflow:hidden;
  white-space:nowrap; word-break:keep-all;
  direction:ltr; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.claim-col .icon-ph{ margin-bottom:24px; transition:transform .4s cubic-bezier(.2,.8,.2,1); line-height:1; }
.claim-col .icon-ph .material-symbols-outlined{
  font-size:26px; color:#e6e6e6; display:block;
  font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.claim-col:hover .icon-ph{ opacity:1; }
.claim-col h3{ font-size:20px; font-weight:500; margin-bottom:14px; line-height:1.3; }
.claim-col p{ font-size:14px; color:#a9a9a9; line-height:1.55; margin-bottom:24px; }

/* ---------- SPLIT: Different doors ---------- */
.split-head{ background:var(--light); padding:56px var(--pad) 40px; }
.split-head .kicker{ font-size:13px; color:#6b6b6b; margin-bottom:14px; }
.split-head h2{ font-size:34px; font-weight:400; max-width:420px; line-height:1.25; }
.split-cols{ display:flex; }
.split-col{ flex:1; background:var(--beige); padding:64px 48px 48px; transition:background-color .35s ease; }
.split-col:hover{ background:#dbd5c8; }
.split-col .ph{ height:220px; margin-bottom:56px; transition:transform .4s cubic-bezier(.2,.8,.2,1); }

.split-col h3{ font-size:22px; font-weight:500; margin-bottom:14px; }
.split-col p{ font-size:14px; color:#4a4740; line-height:1.55; max-width:340px; margin-bottom:28px; }

/* ---------- SPECIFIED ---------- */
.specified{ display:flex; }
.specified-left{ flex:1; background:var(--light); padding:64px var(--pad); }
.specified-right{ flex:1; background:var(--mid-gray); display:flex; align-items:center; justify-content:center; min-height:520px; }
.specified-right .ph{ width:100%; height:100%; min-height:520px; border:none; background:none; color:#8a8a8a; }
.specified .kicker{ font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#6b6b6b; margin-bottom:16px; }
.specified h2{ font-size:32px; font-weight:400; margin-bottom:20px; }
.specified p.lead{ font-size:14px; color:#4a4a4a; line-height:1.6; max-width:480px; margin-bottom:40px; }
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; row-gap:36px; margin-bottom:36px; max-width:520px; }
.spec-item{ transition:transform .3s ease; }

.spec-item .num{ font-family:var(--mono); font-size:12px; color:#8a8a8a; margin-bottom:10px; transition:color .3s ease; }
.spec-item:hover .num{ color:#1a1a1a; }
.spec-item h4{ font-size:17px; font-weight:500; margin-bottom:10px; }
.spec-item p{ font-size:13px; color:#6b6b6b; line-height:1.5; }

/* ---------- FAQ ---------- */
.faq{ background:var(--light); padding:56px var(--pad) 64px; }
.faq-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; gap:24px; flex-wrap:wrap; }
.faq-head h2{ font-size:34px; font-weight:400; }
.faq-row{
  border-bottom:1px solid #c9c9c9; padding:22px 24px; margin:0 -24px; cursor:pointer;
  border-radius:10px; transition:background-color .3s ease, border-color .3s ease;
}
.faq-row:hover{ background:rgba(0,0,0,0.035); }
.faq-row .q{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-row .q span.text{ font-size:17px; color:#1a1a1a; transition:opacity .25s ease; }
.faq-row:hover .q span.text{ opacity:.65; }
.faq-row .plus{
  font-family:var(--mono); font-size:18px; color:#1a1a1a; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s ease;
}
.faq-row:hover .plus{ background:#1a1a1a; color:#fff; }
.faq-row.open .plus{ transform:rotate(135deg); background:#1a1a1a; color:#fff; }
.faq-row .a{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, margin-top .4s ease;
}
.faq-row.open .a{ max-height:60px; opacity:1; margin-top:16px; }
.faq-row .a span{ font-family:var(--mono); font-size:12px; color:#8a8a8a; letter-spacing:0.5px; }

/* ---------- Interior page top (nav on light bg) ---------- */
.page-top{ background:var(--light); }
.page-top .nav{ padding-bottom:24px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-family:var(--mono); font-size:12px; letter-spacing:0.5px; text-transform:uppercase;
  color:#8a8a8a; margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color:#8a8a8a; transition:color .25s ease; }
.breadcrumb a:hover{ color:#1a1a1a; }
.breadcrumb span.cur{ color:#1a1a1a; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding-top:8px; }
.page-hero h1{ font-size:38px; font-weight:400; max-width:640px; line-height:1.2; margin-bottom:18px; }
.page-hero p.intro{ font-size:15px; color:#5a5a5a; line-height:1.6; max-width:560px; }

/* ---------- Nav dropdown (Solution) ---------- */
.nav-drop{ position:relative; }
.nav-drop > .nav-link{ display:inline-flex; align-items:center; gap:4px; }
.nav-drop .chev{ display:inline-block; transition:transform .25s ease; font-size:11px; }
.nav-drop.open .chev{ transform:rotate(180deg); }
.nav-drop-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  background:#fff; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,0.16);
  padding:10px; min-width:180px; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease; z-index:50;
}
.nav-drop-panel a{
  display:block; padding:10px 14px; border-radius:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:0.5px; text-transform:uppercase; color:#1a1a1a; transition:background-color .2s ease;
}
.nav-drop-panel a:hover{ background:var(--light); }
.nav-drop.open .nav-drop-panel{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* ---------- Product grid (category pages) ---------- */
.product-grid-wrap{ background:#fff; padding:16px var(--pad) 72px; }
.product-grid-head{ margin-bottom:40px; }
.product-grid-head .kicker{ font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#6b6b6b; margin-bottom:14px; }
.product-grid-head h2{ font-size:30px; font-weight:400; }
.product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.product-card{
  display:block; background:var(--light); border-radius:18px; padding:22px; transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ border-color:#c9c9c9; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.product-card .ph{ height:150px; border-radius:10px; margin-bottom:18px; }
.product-card .cat{ font-family:var(--mono); font-size:10px; letter-spacing:0.5px; text-transform:uppercase; color:#8a8a8a; margin-bottom:8px; }
.product-card h3{ font-size:17px; font-weight:500; margin-bottom:6px; }
.product-card p{ font-size:13px; color:#6b6b6b; line-height:1.45; margin-bottom:14px; }
.product-card .view{
  font-family:var(--mono); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:#1a1a1a;
  display:inline-flex; align-items:center; gap:6px;
}
.product-card .view .arrow{ transition:transform .25s ease; }
.product-card:hover .view .arrow{ transform:translate(3px,-3px); }

/* ---------- Product detail page ---------- */
.product-hero-stage{ padding:0 var(--pad) 0; }
.product-hero-stage .ph{ height:420px; }
.product-tagline{ font-size:18px; color:#5a5a5a; margin-top:-4px; }

.spec-panel{ background:var(--light); padding:48px var(--pad); }
.spec-panel h2{ font-size:13px; font-family:var(--mono); text-transform:uppercase; letter-spacing:1px; color:#6b6b6b; margin-bottom:28px; }
.spec-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.spec-list dt{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:#8a8a8a; margin-bottom:8px; }
.spec-list dd{ font-size:15px; color:#1a1a1a; line-height:1.4; }

.fits-note{ background:#fff; padding:40px var(--pad); border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; }
.fits-note p{ font-size:15px; color:#4a4a4a; line-height:1.6; max-width:640px; }
.fits-note a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Two-column page (contact / dealer) ---------- */
.page-split{ display:flex; }
.page-split-form{ flex:1.3; background:#fff; padding:56px var(--pad); }
.page-split-info{ flex:1; background:var(--mid-gray); padding:56px 48px; display:flex; flex-direction:column; justify-content:center; gap:28px; }
.page-split-info h3{ font-size:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:1px; color:#5a5a5a; margin-bottom:6px; }
.page-split-info .item{ margin-bottom:4px; }
.page-split-info .item .label{ font-size:12px; color:#7a7a7a; margin-bottom:4px; }
.page-split-info .item .val{ font-size:16px; color:#1a1a1a; }
.page-split-info .steps{ counter-reset:step; }
.page-split-info .steps li{ list-style:none; counter-increment:step; padding-left:34px; position:relative; margin-bottom:18px; font-size:14px; color:#3a3a3a; line-height:1.5; }
.page-split-info .steps li::before{
  content:counter(step); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%;
  background:#1a1a1a; color:#fff; font-family:var(--mono); font-size:11px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-bottom:28px; }
.form-grid .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.5px; color:#6b6b6b; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid #d6d6d6; border-radius:10px; padding:12px 14px; font-family:var(--sans);
  font-size:14px; color:#1a1a1a; background:#fff; transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:#1a1a1a; box-shadow:0 0 0 3px rgba(26,26,26,0.08);
}
.form-note{ font-size:12px; color:#8a8a8a; margin-top:14px; }
.form-success{ display:none; background:var(--light); border-radius:16px; padding:40px; text-align:center; }
.form-success h3{ font-size:22px; font-weight:500; margin-bottom:10px; }
.form-success p{ font-size:14px; color:#6b6b6b; }
.form-page.sent form{ display:none; }
.form-page.sent .form-success{ display:block; }

/* ---------- Unlock methods grid (technology page) ---------- */
.unlock-grid-wrap{ background:#fff; padding:16px var(--pad) 64px; }
.unlock-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:36px 28px; }
.unlock-item .num{ font-family:var(--mono); font-size:12px; color:#8a8a8a; margin-bottom:14px; }
.unlock-item h3{ font-size:16px; font-weight:500; margin-bottom:8px; }
.unlock-item p{ font-size:13px; color:#6b6b6b; line-height:1.5; }

/* ---------- Product hero band (photo + overlaid nav + title) ---------- */
.product-band{
  background:linear-gradient(135deg,#e4e4e6 0%, #cfcfd2 45%, #f4f4f4 100%);
  position:relative;
}
.product-band .nav{ padding-bottom:24px; }
.product-band .stage{ padding:0 var(--pad); position:relative; }
.product-band .stage .ph{ height:460px; }
.product-band .title-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:32px var(--pad) 64px;
}
.product-band h1{ font-size:52px; font-weight:400; color:#3a3a3a; }
.product-band .dealer-btn{ background:#1a1a1a; color:#fff; }
.product-band .dealer-btn:hover{ background:#000; }
.product-band .breadcrumb{ padding:20px var(--pad) 0; margin-bottom:0; }

/* ---------- Access Ways + Specification (dark) ---------- */
.access-spec{ background:var(--near-black); color:#fff; padding:64px var(--pad) 72px; }
.access-spec h2{ font-size:26px; font-weight:400; margin-bottom:32px; }
.access-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:36px 24px; margin-bottom:56px; }
.access-item{ text-align:center; }
.access-item .material-symbols-outlined{
  font-size:26px; color:#e6e6e6; display:block; margin:0 auto 14px; line-height:1;
  font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.access-item p{ font-size:13px; color:#c9c9c9; line-height:1.4; }
.spec-divider{ border:none; border-top:1px solid #333; margin-bottom:48px; }
.spec-cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px 48px; }
.spec-row{ display:grid; grid-template-columns:1fr 1.3fr; gap:16px; padding:14px 0; border-bottom:1px solid #2c2c2c; }
.spec-row dt{ font-size:14px; color:#9a9a9a; }
.spec-row dd{ font-size:14px; color:#f0f0f0; line-height:1.5; }

/* ---------- How to specify (mid-gray, numbered cards) ---------- */
.specify-band{ background:#4a4a4a; color:#fff; padding:56px var(--pad) 72px; }
.specify-band h2{ font-size:32px; font-weight:400; margin-bottom:48px; }
.specify-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.specify-card{ background:#e0e0e0; color:#1a1a1a; border-radius:4px; padding:24px 22px 40px; transition:transform .3s ease; }
.specify-card:hover{ border-color:#bdbdbd; }
.specify-card .badge{
  width:28px; height:28px; border-radius:50%; background:#1a1a1a; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-family:var(--mono); margin-bottom:22px;
}
.specify-card h3{ font-size:19px; font-weight:500; margin-bottom:8px; }
.specify-card p{ font-size:13px; color:#5a5a5a; }

/* ---------- Callout diagram ---------- */
.callout-wrap{ background:#fff; padding:64px var(--pad); }
.callout-grid{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:24px; }
.callout-col{ display:flex; flex-direction:column; gap:36px; }
.callout-col.right{ align-items:flex-start; }
.callout-item .lbl{ font-size:14px; color:#1a1a1a; line-height:1.35; }
.callout-center .ph{ height:420px; }

/* ---------- Feature spotlight (full-bleed dark) ---------- */
.spotlight{ background:var(--near-black); color:#fff; padding:64px var(--pad); border-top:1px solid #2c2c2c; }
.spotlight-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:center; }
.spotlight h2{ font-size:32px; font-weight:400; line-height:1.25; }
.spotlight .ph{ height:340px; }
.spotlight:nth-child(odd) .spotlight-grid{ direction:rtl; }
.spotlight:nth-child(odd) .spotlight-grid > *{ direction:ltr; }

/* ---------- FOOTER ---------- */
footer{ background:var(--footer); color:#dcdcdc; }
.footer-cols{ display:flex; justify-content:flex-end; gap:64px; padding:64px var(--pad) 56px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#9a9a9a; margin-bottom:18px; }
.footer-col a{ display:block; font-size:14px; color:#dcdcdc; margin-bottom:12px; width:fit-content; position:relative; transition:color .25s ease, transform .25s ease; }
.footer-col a:hover{ color:#fff; }
.footer-brand{ display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad) 40px; gap:24px; flex-wrap:wrap; }
.footer-brand .mark{ display:flex; align-items:center; gap:14px; transition:transform .3s ease; }

.footer-brand .sq{ width:52px; height:52px; background:#fff; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-radius .4s ease; flex-shrink:0; }

.footer-brand .word{ font-size:56px; font-weight:700; letter-spacing:1px; color:#fff; }
.footer-bottom{
  border-top:1px solid var(--footer-line);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px var(--pad); font-family:var(--mono); font-size:12px; letter-spacing:0.5px; text-transform:uppercase; color:#b7b7b7;
}
.footer-bottom .sep{ color:#787878; }
.footer-bottom .grow{ flex:1; }
.footer-bottom u{ text-decoration:underline; text-underline-offset:3px; transition:opacity .25s ease; }
.footer-bottom span:hover u{ opacity:.6; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  :root{ --pad: 32px; }
  .claims-grid{ flex-direction:column; gap:40px; }
  .split-cols{ flex-direction:column; }
  .specified{ flex-direction:column; }
  .specified-right{ min-height:320px; }
  .specified-right .ph{ min-height:320px; }
  .spec-grid{ grid-template-columns:1fr; max-width:100%; }
  .footer-cols{ justify-content:flex-start; }
  .claims h2{ font-size:32px; }
  .split-head h2{ font-size:28px; }
  .specified h2{ font-size:28px; }
  .faq-head h2{ font-size:28px; }
  .footer-brand .word{ font-size:42px; }
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .unlock-grid{ grid-template-columns:repeat(3, 1fr); }
  .spec-list{ grid-template-columns:1fr 1fr; }
  .page-split{ flex-direction:column; }
  .page-hero h1{ font-size:30px; }
  .access-grid{ grid-template-columns:repeat(3, 1fr); }
  .spec-cols{ grid-template-columns:1fr; gap:8px; }
  .specify-cards{ grid-template-columns:1fr; gap:16px; }
  .callout-grid{ grid-template-columns:1fr; text-align:center; }
  .callout-col{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:20px 32px; }
  .callout-col.right{ align-items:center; }
  .callout-item{ min-width:140px; }
  .spotlight-grid{ grid-template-columns:1fr; }
  .spotlight:nth-child(odd) .spotlight-grid{ direction:ltr; }
  .product-band h1{ font-size:38px; }
  .product-band .stage .ph{ height:320px; }
}

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

@media (max-width: 760px){
  :root{ --pad: 20px; }
  .nav{ padding:18px var(--pad); }
  .nav-toggle{ display:flex; }
  .nav-link{ display:none; }
  .nav-drop{ display:none; }
  .nav-pill{ gap:14px; padding:8px 8px 8px 20px; }
  .nav-pill .btn{ padding:10px 16px; font-size:12px; }
  .mobile-menu{
    display:block; max-height:0; overflow:hidden; opacity:0;
    background:#f2f0ea; margin:0 var(--pad); border-radius:16px;
    transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
    position:relative; z-index:15;
  }
  .mobile-menu.open{ max-height:280px; opacity:1; padding:8px 22px; margin-top:-8px; margin-bottom:16px; overflow-y:auto; }
  .mobile-menu a{
    display:block; padding:12px 0; font-family:var(--mono); text-transform:uppercase; font-size:13px;
    letter-spacing:0.5px; border-bottom:1px solid rgba(0,0,0,0.08); color:#1a1a1a;
  }
  .mobile-menu a:last-child{ border-bottom:none; }

  .hero-stage .ph{ height:220px; }
  .hero-copy h1{ font-size:22px; }
  .hero-copy{ max-width:100%; }

  .claims h2{ font-size:26px; }
  .claim-col{ margin:0; padding:0 0 8px; }
  .claim-col:hover{ transform:none; background:none; }

  .split-head h2{ font-size:24px; }
  .split-col{ padding:40px 24px; }

  .specified h2{ font-size:24px; }
  .specified-left{ padding:48px 20px; }
  .specified-right{ min-height:220px; }
  .specified-right .ph{ min-height:220px; }

  .faq-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .faq-head h2{ font-size:24px; }
  .faq-row{ padding:18px 16px; margin:0 -16px; }
  .faq-row .q span.text{ font-size:15px; }

  .footer-cols{ gap:32px 40px; padding-bottom:40px; }
  .footer-brand{ flex-direction:column; align-items:flex-start; }
  .footer-brand .word{ font-size:34px; }
  .footer-bottom{ justify-content:flex-start; }
  .footer-bottom .grow{ display:none; }
  .footer-bottom .sep{ display:none; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .product-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .product-grid-wrap{ padding:16px var(--pad) 48px; }
  .unlock-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .unlock-grid-wrap{ padding:16px var(--pad) 40px; }
  .spec-list{ grid-template-columns:1fr; gap:20px; }
  .spec-panel{ padding:36px var(--pad); }
  .product-hero-stage .ph{ height:220px; }
  .page-hero h1{ font-size:26px; }
  .form-grid{ grid-template-columns:1fr; }
  .page-split-form{ padding:40px var(--pad); }
  .page-split-info{ padding:40px var(--pad); }
  .nav-drop-panel{ left:auto; right:0; transform:translateY(-8px); }
  .nav-drop.open .nav-drop-panel{ transform:translateY(0); }
  .access-grid{ grid-template-columns:1fr 1fr; gap:28px 16px; }
  .access-spec{ padding:48px var(--pad) 56px; }
  .specify-band{ padding:40px var(--pad) 48px; }
  .specify-band h2{ font-size:26px; margin-bottom:28px; }
  .callout-wrap{ padding:40px var(--pad); }
  .callout-center .ph{ height:260px; }
  .spotlight{ padding:40px var(--pad); }
  .spotlight h2{ font-size:24px; }
  .spotlight .ph{ height:220px; }
  .product-band h1{ font-size:28px; }
  .product-band .title-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .product-band .stage .ph{ height:220px; }
}

/* ==========================================================================
   FULL-SCREEN SECTIONS
   Every major band fills the viewport, and the next one starts at the top of
   the screen as you scroll.

   Deliberate decisions here:
   - min-height, never a fixed height. A spec table or a nine-product grid is
     genuinely taller than one screen on some displays, and a fixed height
     would clip it. Tall sections simply grow past one screen instead.
   - 100svh so mobile browser chrome sliding in and out doesn't make the
     sections jump around.
   - Snap is "proximity", not "mandatory". Mandatory fights the user on any
     section taller than the screen and can trap keyboard scrolling.
   - Sections that are two-column layouts keep their row direction; only
     block sections get vertical centring.
   ========================================================================== */
html{ scroll-behavior:smooth; }

/* Block sections: fill the screen and centre their content vertically. */
.hero,
.product-band,
.page-hero,
.claims,
.screen-group,
.faq,
.product-grid-wrap,
.unlock-grid-wrap,
.access-spec,
.specify-band,
.callout-wrap,
.spotlight{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  scroll-snap-align:start;
}

/* Two-column sections: full height, columns stay side by side. */
.split-cols,
.specified,
.page-split{
  min-height:100vh;
  min-height:100svh;
  scroll-snap-align:start;
}

/* The grouped heading + columns read as ONE screen, so their children must
   not each claim a screen, and the group must FILL rather than centre —
   centring left a strip of bare page background above the heading. */
.screen-group{ justify-content:flex-start; background:var(--beige); }
.screen-group .split-head{ flex:0 0 auto; min-height:0; }
.screen-group .split-cols{ flex:1 1 auto; min-height:0; display:flex; align-items:stretch; }
.screen-group .split-col{ display:flex; flex-direction:column; justify-content:center; }

/* Vertical centring now provides the breathing room, so the original fixed
   padding would double up and push content past the bottom edge. */
.claims{ padding-top:40px; padding-bottom:40px; }
.faq{ padding-top:40px; padding-bottom:40px; }
.access-spec{ padding-top:40px; padding-bottom:40px; }
.specify-band{ padding-top:40px; padding-bottom:40px; }
.callout-wrap{ padding-top:40px; padding-bottom:40px; }
.spotlight{ padding-top:40px; padding-bottom:40px; }
.product-grid-wrap{ padding-top:40px; padding-bottom:40px; }
.unlock-grid-wrap{ padding-top:40px; padding-bottom:40px; }
.split-head{ padding:40px var(--pad) 28px; }

/* Buttons are flex items now, and flex items stretch by default — without
   this they'd run the full width of the section. */
.hero > .btn, .product-band > .btn, .page-hero > .btn, .claims > .btn,
.faq > .btn, .access-spec > .btn, .specify-band > .btn, .callout-wrap > .btn,
.spotlight > .btn, .product-grid-wrap > .btn, .unlock-grid-wrap > .btn,
.screen-group > .btn{ align-self:flex-start; }

@media (min-height:760px) and (min-width:861px){
  html{ scroll-snap-type:y proximity; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; scroll-behavior:auto; }
}

/* Phones: keep the full-screen feel for the statement bands, but let the
   content-heavy sections size themselves. Forcing a spec table or a product
   grid into one phone screen just makes the type too small to read. */
@media (max-width:860px){
  html{ scroll-snap-type:none; }
  .product-grid-wrap,
  .unlock-grid-wrap,
  .access-spec,
  .specify-band,
  .callout-wrap,
  .page-split,
  .specified,
  .split-cols,
  .screen-group,
  .faq{
    min-height:0;
    display:block;
  }
}

/* ==========================================================================
   TYPE + ALIGNMENT, SCALED FOR FULL-SCREEN SECTIONS
   With every band now filling the viewport, the original sizes left content
   floating in dead space. These scale with viewport width so a section looks
   composed at 1280px and at 1920px, and stay at the old sizes below 861px
   where the layout is no longer full-screen.
   ========================================================================== */
@media (min-width:861px){
  /* Section headings */
  .claims .head h2,
  .split-head h2,
  .faq-head h2,
  .specified-left h2,
  .page-hero h1,
  .product-grid-head h2,
  .access-head h2,
  .spec-head h2{
    font-size:clamp(32px, 2.8vw, 46px);
    line-height:1.18;
    letter-spacing:-0.4px;
  }
  /* Headings had a narrow max-width from the compact layout, which made them
     wrap early and sit lopsided against a lot of empty space. */
  .claims .head h2, .faq-head h2{ max-width:22ch; }
  .split-head h2{ max-width:24ch; }

  .claims .head{ margin-bottom:clamp(36px, 5vh, 68px); }
  .claims .head p,
  .page-hero .intro,
  .specified-left .lead{
    font-size:clamp(15px, 1.15vw, 18px);
    line-height:1.6;
    max-width:62ch;
  }

  /* Claim + split columns */
  .claim-col h3{ font-size:clamp(20px, 1.5vw, 25px); margin-bottom:16px; }
  .claim-col p{ font-size:clamp(14px, 1.05vw, 16px); line-height:1.6; margin-bottom:26px; }
  .claim-col .icon-ph{ margin-bottom:26px; }
  .split-col h3{ font-size:clamp(22px, 1.7vw, 28px); margin-bottom:16px; }
  .split-col p{ font-size:clamp(14px, 1.05vw, 16px); line-height:1.6; max-width:44ch; }

  /* Product / spec / access detail text */
  .spec-item h4{ font-size:clamp(16px, 1.15vw, 18px); }
  .spec-item p{ font-size:clamp(13px, 1vw, 15px); line-height:1.55; }
  .access-item p{ font-size:clamp(13px, 1vw, 15px); }
  .spec-row .k, .spec-row .v{ font-size:clamp(13px, 1vw, 15px); }
  .specify-card h4{ font-size:clamp(16px, 1.2vw, 19px); }
  .spotlight h3{ font-size:clamp(24px, 2.1vw, 34px); }

  /* FAQ gets more air now that it owns a whole screen */
  .faq-row .text{ font-size:clamp(15px, 1.15vw, 18px); }
  .faq-row{ padding-top:clamp(17px, 2.1vh, 25px); padding-bottom:clamp(17px, 2.1vh, 25px); }
  .faq-head{ margin-bottom:clamp(22px, 3.4vh, 42px); }

  /* Buttons scale slightly so they don't look lost in a full-screen band */
  .btn{ font-size:clamp(14px, 1.05vw, 15px); padding:13px 24px; }

  /* ---- Alignment: the columns hold different amounts of text, so their
     buttons used to sit at different heights. Pushing the button down with
     an auto margin puts them on one shared baseline. ---- */
  .claim-col{ display:flex; flex-direction:column; }
  .claim-col p{ flex:1 1 auto; }
  .claim-col .btn{ align-self:flex-start; margin-top:auto; }

  .specify-card{ display:flex; flex-direction:column; }
  .specify-card p{ flex:1 1 auto; }

  /* Inside the grouped split screen the columns are far taller than their
     text, so an auto margin would strand the button at the very bottom.
     Normal spacing is right there. */
  .screen-group .split-col p{ flex:0 0 auto; }
  .screen-group .split-col .btn{ margin-top:26px; align-self:flex-start; }
}

/* Long lines get uncomfortable on very wide screens */
@media (min-width:1700px){
  .claims .head p, .page-hero .intro, .specified-left .lead{ max-width:66ch; }
}

/* The two split columns centre independently, so a 2-line paragraph on one
   side and a 3-line one on the other pushed their images, headings and
   buttons out of line with each other. Anchoring the columns to a shared
   top and reserving a consistent paragraph height lines all three up. */
@media (min-width:861px){
  .screen-group .split-col{
    justify-content:flex-start;
    padding-top:clamp(36px, 6vh, 76px);
  }
  .screen-group .split-col p{ min-height:4.9em; }
}

/* ==========================================================================
   FOOTER AS A FULL SCREEN
   The footer becomes the last full-viewport band, consistent with every
   other section. Its three parts (link columns, brand row, legal bar) are
   spread down the screen rather than bunched at the top, and the legal bar
   stays pinned to the very bottom edge where it belongs.
   ========================================================================== */
footer{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  scroll-snap-align:start;
}
footer .footer-cols{
  flex:1 1 auto;
  /* flex-start, not center: the Products column has nine links and the
     others have two or three, so centring each one independently left the
     column headings sitting at five different heights. */
  align-items:flex-start;
  padding-top:clamp(64px, 11vh, 150px);
  padding-bottom:clamp(32px, 5vh, 64px);
}
footer .footer-brand{
  flex:0 0 auto;
  padding-bottom:clamp(28px, 4vh, 56px);
}
footer .footer-bottom{
  flex:0 0 auto;
  margin-top:auto;         /* pin the legal line to the bottom edge */
}

/* At full height the brand wordmark can afford to be larger. */
@media (min-width:861px){
  .footer-brand .word{ font-size:clamp(34px, 3.4vw, 54px); }
  .footer-brand .sq{ width:clamp(30px, 3vw, 46px); height:clamp(30px, 3vw, 46px); }
  .footer-col h5{ font-size:clamp(11px, 0.85vw, 13px); }
  .footer-col a{ font-size:clamp(13px, 1vw, 15px); }
  .footer-cols{ gap:clamp(40px, 4.5vw, 80px); }
}

/* Phones: a full screen of footer is mostly dead space on a small display,
   so it sizes to its content there as the other heavy sections do. */
@media (max-width:860px){
  footer{ min-height:0; display:block; }
  footer .footer-bottom{ margin-top:0; }
}

/* ==========================================================================
   HEADER ALIGNMENT, CONSISTENT ACROSS EVERY PAGE
   Two faults were making the header sit differently page to page:

   1. Horizontal — the inner pages wrapped the nav in "page-top wrap", and
      both .wrap and .nav apply var(--pad), so those pages were indented
      twice (128px) while Home and the product pages sat at 64px. The stray
      "wrap" class is now removed from the markup.

   2. Vertical — making .hero and .product-band full-screen flex columns
      meant the nav was being vertically centred along with everything else,
      so it floated down the page by a different amount depending on how
      tall that page's hero content was. The nav is now pinned to the top of
      those bands and taken out of the centring, with matching top padding
      so the centred content can never collide with it.
   ========================================================================== */
.hero,
.product-band{
  position:relative;
  padding-top:clamp(104px, 13vh, 148px);
}
.hero{ padding-top:clamp(104px, 13vh, 148px); }  /* replaces the old 24px */
.hero > .nav,
.product-band > .nav{
  position:absolute;
  top:0; left:0; right:0;
}

/* ==========================================================================
   LOGO
   The wordmark is now the real HALOM lockup, taken as vector from the
   product catalogue, so it stays crisp at any size. Two colour variants:
   dark for the light header pill, white for the dark footer.
   ========================================================================== */
.logo-pill{
  display:inline-flex;
  align-items:center;
  padding:12px 22px;          /* keeps the pill the same shape as before */
  line-height:0;
}
.logo-img{
  height:22px;
  width:auto;
  display:block;
}

.footer-brand .mark{ display:flex; align-items:center; }
.footer-logo-img{
  height:clamp(34px, 3.2vw, 52px);
  width:auto;
  display:block;
}

@media (max-width:860px){
  .logo-img{ height:19px; }
  .footer-logo-img{ height:32px; }
}
@media (max-width:420px){
  .logo-pill{ padding:10px 16px; }
  .logo-img{ height:17px; }
}

/* ==========================================================================
   HEADER: LOGO PILL AND MENU PILL AT ONE HEIGHT
   They were 46px and 59px, and because the nav centres its children the
   mismatch also put their tops at different heights (31px vs 24px). Both are
   now fixed to the same height and centre their own contents.
   ========================================================================== */
:root{ --pill-h:56px; }
.logo-pill,
.nav-pill{
  height:var(--pill-h);
  box-sizing:border-box;
}
.logo-pill{ display:inline-flex; align-items:center; padding:0 24px; }
.nav-pill{ display:flex; align-items:center; padding:0 8px 0 26px; }
.nav-pill .btn{ padding-top:0; padding-bottom:0; height:40px; display:inline-flex; align-items:center; }
@media (max-width:860px){ :root{ --pill-h:50px; } .nav-pill{ padding:0 6px 0 16px; } .nav-pill .btn{ height:36px; } }
@media (max-width:420px){ :root{ --pill-h:46px; } .logo-pill{ padding:0 16px; } }

/* ==========================================================================
   SECTIONS THAT MUST FIT EXACTLY ONE SCREEN AT ANY HEIGHT
   The hero, product hero and the "Different doors" band used fixed pixel
   heights for their image boxes (380 / 460 / 220px). Those don't shrink, so on
   a 1366x768 or 1280x720 laptop the text and buttons were pushed below the
   fold. Instead of guessing numbers, the image box now takes whatever height
   is left once the nav and text have been laid out — so the section fits
   any screen height and the text/buttons are always visible.
   ========================================================================== */
@media (min-width:861px) and (min-height:560px){

  /* ---- Home hero ---- */
  .hero{
    height:100svh;                     /* exactly one screen */
    min-height:0;
    justify-content:flex-start;
    padding-top:calc(var(--pill-h) + 48px);
  }
  .hero > .hero-stage{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
    padding-top:clamp(12px, 2.5vh, 36px);
  }
  .hero > .hero-stage > .ph{ flex:1 1 auto; height:auto; min-height:120px; }
  .hero > .hero-copy{
    flex:0 0 auto;
    padding-top:clamp(18px, 3vh, 40px);
    padding-bottom:clamp(22px, 4vh, 56px);
  }
  .hero-copy h1{ font-size:clamp(24px, 2.1vw, 32px); margin-bottom:clamp(14px,2vh,24px); }

  /* ---- Product hero ---- */
  .product-band{
    height:100svh;
    min-height:0;
    justify-content:flex-start;
    padding-top:calc(var(--pill-h) + 48px);
  }
  .product-band > .stage,
  .product-band > .product-hero-stage{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  .product-band .stage > .ph,
  .product-band .product-hero-stage > .ph{ flex:1 1 auto; height:auto; min-height:120px; }

  /* ---- "Different doors need a different lock" ---- */
  .screen-group{ height:100svh; min-height:0; }
  .screen-group .split-head{ padding-top:clamp(24px, 4vh, 48px); padding-bottom:clamp(14px, 2.2vh, 28px); }
  .screen-group .split-cols{ flex:1 1 auto; min-height:0; }
  .screen-group .split-col{
    justify-content:flex-start;
    padding:clamp(20px, 3.5vh, 52px) clamp(28px, 3vw, 48px) clamp(20px, 3.5vh, 44px);
    min-height:0;
  }
  .screen-group .split-col .ph{
    flex:1 1 auto; height:auto; min-height:90px;
    margin-bottom:clamp(16px, 3vh, 40px);
  }
  .screen-group .split-col p{ min-height:0; }
  .screen-group .split-col .btn{ margin-top:clamp(14px, 2.2vh, 26px); }

  /* ---- Dense product sections: tighten vertical rhythm on short screens ---- */
  .access-spec .access-grid{ gap:clamp(18px,3vh,36px) 24px; margin-bottom:clamp(24px,4vh,56px); }
  .product-card .ph{ height:clamp(84px, 13vh, 150px); }
}

/* ==========================================================================
   SECTION-BY-SECTION SCROLLING
   Scrolling moves one whole section at a time and the next section glides
   into place and locks there.

   How it's made reliable:
   - "mandatory" snapping, so the page always comes to rest aligned to a
     section, never halfway between two.
   - scroll-snap-stop:always, so one fast flick of a trackpad or wheel can't
     skip past several sections at once.
   - Only TOP-LEVEL sections are snap points. Nested blocks (the heading and
     columns inside the grouped "Different doors" screen) are explicitly
     excluded, otherwise the page would stop halfway through that screen.
   - On inner pages the nav lives in its own bar above the hero. The nav bar
     is the snap point and the hero is shortened by exactly the nav's height,
     so nav + hero together fill one screen and the nav is never hidden.
   - Every section was sized earlier to fit one screen at 1280x720 and up.
     Anything that ever does exceed a screen can still be scrolled through
     freely before snapping on — browsers allow that inside an oversized
     snap area — so no content can become unreachable.
   - Off on phones and short viewports, and for anyone who has asked their
     system for reduced motion.
   ========================================================================== */
:root{ --nav-h:calc(var(--pill-h) + 48px); }

@media (min-width:861px) and (min-height:560px){
  html{ scroll-snap-type:y mandatory; scroll-behavior:smooth; }

  /* Reset every earlier snap declaration so only the list below applies. */
  section, footer, .hero, .product-band, .screen-group,
  .split-cols, .specified, .page-split, .page-top, .page-hero{
    scroll-snap-align:none;
    scroll-snap-stop:normal;
  }

  /* Top-level snap points */
  .hero,
  .product-band,
  .page-top,
  body > .claims,
  body > .screen-group,
  body > .split-cols,
  body > .specified,
  body > .page-split,
  body > .faq,
  body > .product-grid-wrap,
  body > .unlock-grid-wrap,
  body > .access-spec,
  body > .specify-band,
  body > .callout-wrap,
  body > .spotlight,
  body > footer{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  /* Inner pages: nav bar + hero = exactly one screen. */
  .page-top{ margin:0; }
  .page-top + .page-hero{
    min-height:calc(100svh - var(--nav-h));
    margin-top:0;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none !important; scroll-behavior:auto !important; }
}
@media (max-width:860px), (max-height:559px){
  html{ scroll-snap-type:none; }
}

/* When the section controller is running it owns scrolling. CSS snapping and
   smooth-behaviour are switched off so they can't fight its animation (smooth
   behaviour would also re-smooth every frame the script sets). Without
   JavaScript, the CSS snapping above remains as the fallback. */
html.js-sections{ scroll-snap-type:none !important; scroll-behavior:auto !important; }

/* ==========================================================================
   FAQ ANSWERS: NO MORE TRUNCATION
   Open answers were capped at max-height:60px. That's fine on a desktop line
   length, but on a phone the same answer wraps to 4-6 lines and was being
   cut off mid-sentence (55 of 75 answers at 375px wide). Raising the cap to
   another fixed number would just move the problem, so this animates the row
   height from 0 to the answer's real height instead — correct for any answer
   length at any screen width. Browsers without support simply open it
   without the animation, still showing the full text.
   ========================================================================== */
.faq-row .a{
  display:grid;
  grid-template-rows:0fr;
  max-height:none;
  overflow:visible;
  opacity:0;
  margin-top:0;
  transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, margin-top .4s ease;
}
.faq-row .a > span{ overflow:hidden; min-height:0; }
.faq-row.open .a{
  grid-template-rows:1fr;
  max-height:none;
  opacity:1;
  margin-top:16px;
}

/* ==========================================================================
   861–1100px: KEEP MULTI-COLUMN LAYOUTS
   The original responsive rules stacked nine layouts into single columns
   below 1100px, while full-screen mode stays on down to 861px. So in that
   band a section was asked to fit one screen while holding two or three
   stacked columns — impossible, and it grew to 1300px+. That band includes
   a 1366x768 laptop at Windows' default 125% scaling (~1093px wide), which
   is very common. The layouts easily fit side by side there, so they now
   stay multi-column until the phone breakpoint, where stacking belongs.
   ========================================================================== */
@media (min-width:861px) and (max-width:1100px){
  .claims-grid{ flex-direction:row; gap:28px; }
  .split-cols{ flex-direction:row; }
  .specified{ flex-direction:row; }
  .page-split{ flex-direction:row; }
  .spec-grid{ grid-template-columns:1fr 1fr; }
  .spec-cols{ grid-template-columns:1fr 1fr; gap:24px 32px; }
  .specify-cards{ grid-template-columns:repeat(3, 1fr); gap:16px; }
  .callout-grid{ grid-template-columns:1fr 1.1fr 1fr; text-align:left; }
  .callout-col{ flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:24px; }
  .callout-col.right{ align-items:flex-end; }
  .spotlight-grid{ grid-template-columns:1fr 1.4fr; gap:32px; }
  .spotlight:nth-child(odd) .spotlight-grid{ direction:rtl; }
  .spotlight:nth-child(odd) .spotlight-grid > *{ direction:ltr; }
  .specified-right{ min-height:0; }
  .specified-right .ph{ min-height:0; }
}

/* ==========================================================================
   AUTHORITATIVE FULL-SCREEN LAYOUT  (supersedes earlier full-screen rules)

   Two kinds of section:

   FIT  — sections built around an image. Exactly one screen tall. The image
          is the flexible part: it grows or shrinks to take whatever height
          the text and buttons don't need, so the buttons can never be pushed
          off the bottom of the screen. (hero, product-band, specified,
          screen-group, spotlight)

   FLOW — text-heavy sections (spec tables, FAQ, product grids, forms). Text
          can't shrink the way an image can, so these are at least one screen
          and may run longer; the section-by-section scroller scrolls through
          a tall one before moving on.

   Full-screen mode needs the screen to be both wide enough for side-by-side
   layouts (861px+) and tall enough to hold a section (600px+). Below either,
   everything sizes to its content — which covers phones and very short
   laptop windows alike.
   ========================================================================== */
@media (min-width:861px) and (min-height:600px){

  /* ---------- FIT sections: exactly one screen ---------- */
  .hero,
  .product-band,
  .specified,
  .screen-group,
  .spotlight{
    height:100vh; height:100svh;
    min-height:0;
  }

  /* Home hero — nav pinned on top, image flexes, copy keeps its size */
  .hero{ display:flex; flex-direction:column; justify-content:flex-start;
         padding-top:calc(var(--pill-h) + 48px); }
  .hero > .hero-stage{ flex:1 1 auto; min-height:0; display:flex; }
  .hero > .hero-stage > .ph{ flex:1 1 auto; height:auto; min-height:90px; }
  .hero > .hero-copy{ flex:0 0 auto; padding-top:clamp(20px, 3.5vh, 44px);
                      padding-bottom:clamp(24px, 4.5vh, 56px); }

  /* Product hero band — same idea */
  .product-band{ display:flex; flex-direction:column; justify-content:flex-start;
                 padding-top:calc(var(--pill-h) + 48px); }
  .product-band > .breadcrumb{ flex:0 0 auto; }
  .product-band > .stage{ flex:1 1 auto; min-height:0; display:flex; }
  .product-band > .stage > .ph{ flex:1 1 auto; height:auto; min-height:90px; }
  .product-band > .title-row{ flex:0 0 auto; padding-top:clamp(16px, 3vh, 36px);
                              padding-bottom:clamp(20px, 4vh, 48px); }

  /* "Built to be specified" — text column centred, image column fills */
  .specified{ display:flex; flex-direction:row; align-items:stretch; }
  .specified-left{ display:flex; flex-direction:column; justify-content:center;
                   min-height:0; }
  .specified-right{ min-height:0; display:flex; }
  .specified-right .ph{ min-height:0; height:auto; flex:1 1 auto; }

  /* "Different doors" — heading on top, two columns share the rest */
  .screen-group{ display:flex; flex-direction:column; justify-content:flex-start; }
  .screen-group > .split-head{ flex:0 0 auto; min-height:0; }
  .screen-group > .split-cols{ flex:1 1 auto; min-height:0; display:flex;
                               flex-direction:row; align-items:stretch; }
  .screen-group .split-col{ display:flex; flex-direction:column; justify-content:flex-start;
                            min-height:0;
                            padding-top:clamp(20px, 3.5vh, 44px);
                            padding-bottom:clamp(20px, 3.5vh, 44px); }
  .screen-group .split-col > .ph{ flex:1 1 auto; height:auto; min-height:80px;
                                  margin-bottom:clamp(16px, 3vh, 36px); }
  .screen-group .split-col > h3,
  .screen-group .split-col > p,
  .screen-group .split-col > .btn{ flex:0 0 auto; }
  .screen-group .split-col > p{ min-height:0; margin-bottom:clamp(14px, 2.4vh, 26px); }
  .screen-group .split-col > .btn{ margin-top:0; align-self:flex-start; }

  /* Spotlight — the image scales with the height of the screen */
  .spotlight{ display:flex; flex-direction:column; justify-content:center; }
  .spotlight .ph{ height:clamp(200px, 58vh, 520px); }

  /* ---------- FLOW sections: at least one screen, may run longer ---------- */
  .claims, .faq, .access-spec, .specify-band, .callout-wrap,
  .product-grid-wrap, .unlock-grid-wrap, .page-split, .page-hero{
    min-height:100vh; min-height:100svh;
    height:auto;
  }
}

/* Phones and very short windows: no forced screen heights anywhere. */
@media (max-width:860px), (max-height:599px){
  .hero, .product-band, .specified, .screen-group, .spotlight,
  .claims, .faq, .access-spec, .specify-band, .callout-wrap,
  .product-grid-wrap, .unlock-grid-wrap, .page-split, .page-hero,
  .split-cols, footer{
    height:auto;
    min-height:0;
  }
}

/* The image absorbs leftover height, so a column whose paragraph wraps to an
   extra line would get a shorter image than its neighbour, throwing the two
   images and headings out of line. Reserving three lines of paragraph height
   in both columns keeps them level. */
@media (min-width:861px) and (min-height:600px){
  .screen-group .split-col > p{ min-height:4.9em; }
}

/* ==========================================================================
   ONE THRESHOLD FOR EVERYTHING: 861px wide AND 600px tall
   Snapping, the page-hero sizing and the JS controller previously switched on
   at 560px while the full-screen layout switched on at 600px, so between the
   two they disagreed about what a "screen" was. They now share one boundary.
   ========================================================================== */
@media (min-width:861px) and (min-height:600px){
  /* The nav strip + hero on inner pages together make exactly one screen. */
  .page-top + .page-hero{
    min-height:calc(100vh - var(--nav-h));
    min-height:calc(100svh - var(--nav-h));
  }
  /* No-JavaScript fallback only; the controller takes over when it runs. */
  html{ scroll-snap-type:y proximity; }
}
@media (max-width:860px), (max-height:599px){
  html{ scroll-snap-type:none !important; }
  .page-top + .page-hero{ min-height:0; }
}
/* When the controller is running it owns scrolling entirely. */
html.js-sections{ scroll-snap-type:none !important; scroll-behavior:auto !important; }

/* ==========================================================================
   MOTION SYSTEM
   Modelled on the motion language of premium product sites such as
   nobili.it: content is choreographed rather than faded in as one block.

   - Headings reveal LINE BY LINE: each line slides up from behind a mask.
   - Everything else in a block follows in sequence (kicker, text, buttons,
     cards), each a beat after the one before.
   - Image boxes wipe open upward, leading the text slightly.
   - Long, soft "expo-out" easing throughout — fast start, very gentle
     landing. This curve is most of what reads as "smooth".

   Only transform, opacity and clip-path are animated, so it runs on the GPU
   and stays fluid. Every hidden state is scoped under html.motion, which is
   set only once JavaScript is confirmed running — without JS, or with
   "reduced motion" on, all content is simply visible.
   ========================================================================== */
:root{
  --ease-out: cubic-bezier(.19, 1, .22, 1);     /* expo-out: fast start, soft landing */
  --t-line:  1.15s;
  --t-fade:  1s;
  --t-image: 1.5s;
}

/* ---- Heading lines ---- */
.l{ display:block; }
/* The mask is a clip-path rather than overflow:hidden. A clip-path can reach
   past the line box so descenders (g, y, p) and accents aren't cut off, and
   unlike padding/margin tricks it has no effect on layout at all — a split
   heading is exactly the same height as the unsplit original. */
html.motion .l{ clip-path:inset(-0.3em -0.2em -0.34em -0.2em); }
.l-inner{ display:block; }
html.motion .reveal:not(.in-view) .l-inner{ transform:translate3d(0,150%,0); }
html.motion .l-inner{
  transition:transform var(--t-line) var(--ease-out) var(--d,0ms);
  will-change:transform;
}
html.motion .reveal.in-view .l-inner{ transform:none; }

/* ---- Other items in a block: soft rise + fade, staggered ---- */
html.motion .reveal:not(.done) > :not(h1):not(h2):not(h3):not(.ph):not(.l){
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity var(--t-fade) var(--ease-out) var(--d,0ms),
             transform calc(var(--t-fade) + .15s) var(--ease-out) var(--d,0ms);
}
html.motion .reveal.in-view:not(.done) > :not(h1):not(h2):not(h3):not(.ph):not(.l){
  opacity:1; transform:none;
}

/* ---- Image slots: wipe open from the bottom ---- */
html.motion .ph:not(.ph-done){
  clip-path:inset(100% 0 0 0);
  transition:clip-path var(--t-image) var(--ease-out) var(--d,0ms);
}
html.motion .ph.ph-in:not(.ph-done){ clip-path:inset(0 0 0 0); }
/* Real photos, once added, also settle from a slight zoom inside the frame */
html.motion .ph img{
  transform:scale(1.12);
  transition:transform calc(var(--t-image) + .3s) var(--ease-out) var(--d,0ms);
}
html.motion .ph.ph-in img{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .l-inner, .ph, .ph img, .reveal > *{ transition:none !important; transform:none !important;
                                       clip-path:none !important; opacity:1 !important; }
}

/* ==========================================================================
   MOBILE FULL-SCREEN SECTIONS
   Phones get the same screen-by-screen experience as desktop. Same two kinds
   of section:

   FIT  — image-led sections (hero, product hero, spotlights) are exactly one
          screen; the image grows to fill whatever the text doesn't use.
   FLOW — everything else fills at least one screen, content centred, and a
          longer section (stacked cards, spec tables, the footer) simply runs
          on and is stepped through a screen at a time.

   Applies to portrait phones and tablets (860px wide or less, 500px tall or
   more). A phone turned sideways is too short to hold a screen of content,
   so it scrolls normally.
   ========================================================================== */
@media (max-width:860px) and (min-height:500px){

  /* ---------- FIT ---------- */
  .hero, .product-band, .spotlight{
    height:100vh; height:100svh; min-height:0;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .hero, .product-band{ position:relative; padding-top:calc(var(--pill-h) + 44px); }
  .hero > .nav, .product-band > .nav{ position:absolute; top:0; left:0; right:0; }

  .hero > .hero-stage{ flex:1 1 auto; min-height:0; display:flex; padding:0; }
  .hero > .hero-stage > .ph{ flex:1 1 auto; height:auto; min-height:120px; }
  .hero > .hero-copy{ flex:0 0 auto; padding-top:24px; padding-bottom:32px; }

  .product-band > .breadcrumb{ flex:0 0 auto; }
  .product-band > .stage{ flex:1 1 auto; min-height:0; display:flex; }
  .product-band > .stage > .ph{ flex:1 1 auto; height:auto; min-height:120px; }
  .product-band > .title-row{ flex:0 0 auto; padding-top:20px; padding-bottom:28px; }

  .spotlight{ justify-content:center; padding-top:48px; padding-bottom:48px; }
  .spotlight-grid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:24px; }
  .spotlight .ph{ flex:1 1 auto; height:auto; min-height:160px; }

  /* ---------- FLOW ---------- */
  .claims, .screen-group, .specified, .faq, .product-grid-wrap,
  .unlock-grid-wrap, .access-spec, .specify-band, .callout-wrap,
  .page-split, body > .split-cols, footer{
    min-height:100vh; min-height:100svh; height:auto;
    display:flex; flex-direction:column; justify-content:center;
  }
  /* children of these keep their normal stacked layout */
  .screen-group > .split-cols{ display:flex; flex-direction:column; }
  body > .split-cols{ flex-direction:column; }
  .specified{ flex-direction:column; }
  footer .footer-bottom{ margin-top:auto; }

  /* Inner pages: the nav strip + hero together make exactly one screen.
     --page-top-h is the strip's real measured height, set by the script. */
  .page-top + .page-hero{
    min-height:calc(100vh - var(--page-top-h, 88px));
    min-height:calc(100svh - var(--page-top-h, 88px));
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* Spotlight on phones: the image sits inside its own wrapper div, so the
   "grow to fill" has to be on that wrapper — setting it on the image alone
   did nothing and left ~580px of empty black under a small image box. The
   wrapper now takes all spare height and the image fills the wrapper, at
   full width. */
@media (max-width:860px) and (min-height:500px){
  /* :last-child is the image wrapper in all 15 spotlights (heading first,
     image second), so it works on older phone browsers that lack :has(). */
  /* The desktop grid centres its children, which on a phone made the image
     shrink to the width of its label text (235px on every screen size).
     Stretch instead, so the image spans the full content width. */
  .spotlight-grid{ align-items:stretch; }
  .spotlight-grid > div{ width:100%; }
  .spotlight-grid > div:last-child{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  .spotlight-grid > div:last-child > .ph{
    flex:1 1 auto; height:auto; width:100%; min-height:160px;
  }
}

/* Mobile spotlight: the image sits inside a wrapper, so the wrapper is what
   has to grow to fill the screen — growing the image alone did nothing. And
   the desktop grid's align-items:center, carried into this column layout,
   shrank the wrapper to the width of its label; stretch restores full width. */
@media (max-width:860px) and (min-height:500px){
  .spotlight-grid{ align-items:stretch; }
  .spotlight-grid > .reveal:last-child{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  .spotlight-grid > .reveal:last-child > .ph{ flex:1 1 auto; width:100%; height:auto; min-height:160px; }
}

/* NOTE: "Built to be specified" keeps a locked one-screen height, like the
   other image-led sections, because the brief is full-screen sections. Its
   text column is the tightest on the site, so it is what limits how far the
   admin panel's text-size control can go (tested safe to 1.10). Letting it
   grow instead was tried and rejected: it made the section 699px on a
   1366x657 laptop, i.e. no longer one screen. */

/* An uploaded photo fills its slot completely, cropping rather than
   stretching, so any aspect ratio still looks right. */
.ph > img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph.ph-filled{ border:none; background:none; }

/* ==========================================================================
   HERO PHOTOS ARE SHOWN WHOLE, NEVER CROPPED
   The hero is a very wide, short band. Filling it with a product photo meant
   scaling the photo up until only its middle was visible — on a lock shot
   that lands on the keypad, losing the product and the scene around it.
   These heroes now show the entire photo, sized to fit the band. Any spare
   space falls on the hero's own background, so it reads as a framed product
   shot rather than a crop. Every other image slot still fills its box.
   ========================================================================== */
.hero-stage .ph > img,
.product-band .stage .ph > img{
  object-fit:contain;
  object-position:center;
}
.hero-stage .ph.ph-filled,
.product-band .stage .ph.ph-filled{
  background:transparent;
  border:none;
}

/* ==========================================================================
   FULL-BLEED HERO  (home + product pages)
   The photo fills the entire hero section edge to edge, the header floats on
   top of it, and the headline sits over the image at the bottom left — rather
   than the photo sitting in a padded box with the text underneath it.
   ========================================================================== */
.hero,
.product-band{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;     /* copy sits at the bottom of the image */
}
.hero > .nav,
.product-band > .nav{ z-index:3; }

/* The image layer covers the whole section and sits behind everything. */
.hero > .hero-stage,
.product-band > .stage{
  position:absolute; inset:0; z-index:0;
  padding:0; margin:0; display:block;
}
.hero > .hero-stage > .ph,
.product-band > .stage > .ph{
  width:100%; height:100%; min-height:0;
  border-radius:0;
}
/* A real photo loses the placeholder's dashed outline; the empty state keeps
   it so an unfilled slot is still obvious in the admin preview. */
.hero > .hero-stage > .ph.ph-img,
.product-band > .stage > .ph.ph-img{ border:none; }

/* Text layer, over the image. */
.hero > .hero-copy,
.product-band > .title-row{ position:relative; z-index:2; }
.hero > .hero-copy{ padding:40px var(--pad) clamp(44px, 7vh, 86px); }
.product-band > .title-row{
  padding:0 var(--pad) clamp(40px, 6.5vh, 78px);
  align-items:flex-end;
}

/* The breadcrumb is not part of this layout in the design — the hero is just
   the photo, the header and the product name. */
.product-band > .breadcrumb{ display:none; }

/* A very soft lift behind the bottom-left text. Invisible on the pale product
   photography used here, but keeps the headline readable if a darker image is
   ever uploaded. */


/* ==========================================================================
   HERO: FULL-BLEED BACKGROUND IMAGE  (matches the approved Canva design)

   The photo fills the whole hero — edge to edge, behind the header — and the
   text sits on top of it at the bottom left, instead of the photo sitting in
   a padded box with the text underneath.

   Applies to the home hero and every product page hero. Stated last so it
   overrides the earlier desktop and mobile sizing rules.
   ========================================================================== */
.hero,
.product-band{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;     /* text sits at the bottom */
  padding-top:0;
}

/* The image layer: stretched behind everything. */
.hero > .hero-stage,
.product-band > .stage{
  position:absolute;
  inset:0;
  z-index:0;
  padding:0;
  margin:0;
  display:block;
}
.hero > .hero-stage > .ph,
.product-band > .stage > .ph{
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  border-radius:0;
}

/* Header floats over the photo. */
.hero > .nav,
.product-band > .nav{ position:absolute; top:0; left:0; right:0; z-index:3; }

/* Text overlays the photo. */
.hero > .hero-copy,
.product-band > .title-row{ position:relative; z-index:2; }
.hero > .hero-copy{ padding-bottom:clamp(40px, 7vh, 80px); }
.product-band > .title-row{ padding-bottom:clamp(32px, 6vh, 68px); }

/* The design shows no breadcrumb on the product hero. */
.product-band > .breadcrumb{ display:none; }

/* A barely-there lift behind the text. Invisible on the light studio shots
   in the design, but it stops the headline disappearing if a darker photo is
   ever uploaded. */


/* The hero is now a full-bleed background rather than a framed band, so its
   photo must fill the area and crop, not sit letterboxed inside it. This
   replaces the earlier "show the whole photo" rule for these two slots only;
   every other image slot is unaffected. */
.hero > .hero-stage .ph > img,
.product-band > .stage .ph > img{
  object-fit:cover;
  object-position:center;
}

/* Phones: the photo is cropped much tighter, so the product often lands
   directly behind the text. A stronger lift keeps the headline readable,
   and the product title stays left-aligned instead of drifting right when
   the title row runs out of width. */
@media (max-width:860px){
  
  .product-band > .title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
}

/* Slightly darker headline on phones, where the text can end up over the
   product itself rather than the clear part of the shot. */
@media (max-width:860px){
  .hero-copy h1, .product-band .title-row h1{ color:#242424; }
}

/* Legibility lift behind the hero text.
   This sits INSIDE the image layer rather than on the hero itself: as a child
   of the stage it reliably paints on top of the photo, whereas a scrim on the
   hero ended up underneath it. Invisible on the light studio shots in the
   design; it only matters if a darker photo is used. */
.hero > .hero-stage,
.product-band > .stage{ isolation:isolate; }
.hero > .hero-stage::after,
.product-band > .stage::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:46%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,0.55), rgba(255,255,255,0));
}
@media (max-width:860px){
  .hero > .hero-stage::after,
  .product-band > .stage::after{
    height:60%;
    background:linear-gradient(to top,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.88) 32%,
      rgba(255,255,255,0.58) 58%,
      rgba(255,255,255,0) 100%);
  }
}


/* A photo can never change the size of its box, whatever its dimensions.
   Taking it out of normal flow means an oversized or wrongly-shaped upload
   is cropped inside the frame instead of stretching it and pushing into the
   content around it. The box size comes from the design, not the file. */
.ph{ position:relative; overflow:hidden; }
.ph > img,
.ph > picture > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
}

/* The image panel in "Built to be specified" was collapsing to a 17px sliver,
   because it was told to size itself to its content while its only content
   (the photo) is positioned out of flow. Stretching it to the column's full
   height fixes both symptoms: the empty placeholder shows as a proper panel,
   and a photo fills the panel instead of expanding it.

   That expansion was the overlap bug: this column centres its contents, so an
   oversized photo grew the box and spilled out BOTH upwards into the section
   above and downwards into the FAQ below. */
.specified-right{ overflow:hidden; }
.specified-right > .ph{
  flex:1 1 auto;
  align-self:stretch;
  width:100%;
  height:auto;
  min-height:0;
}

/* Comfortable phone controls, without changing the section layouts. */
.mobile-menu-host{position:relative;}
.page-top.mobile-menu-host{z-index:30;}
@media(max-width:760px){
 .mobile-menu{
  position:absolute;top:var(--mobile-menu-top,88px);left:var(--pad);right:var(--pad);
  margin:0;z-index:20;visibility:hidden;pointer-events:none;
  box-shadow:0 12px 30px rgba(0,0,0,.08);overscroll-behavior:contain;
 }
 .mobile-menu.open{
  margin:0;max-height:min(280px,calc(100dvh - var(--mobile-menu-top,88px) - 16px));
  visibility:visible;pointer-events:auto;
 }
}
.hero-picture{display:block;width:100%;height:100%;}
.ph>.hero-picture>img{
 object-fit:var(--hero-desktop-fit,cover);
 object-position:var(--hero-desktop-position,50% 50%);
}
.hero-picture>img[hidden],.hero-image-empty[hidden]{display:none!important;}
.hero-image-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
@media(max-width:760px){
 .ph>.hero-picture>img{object-fit:var(--hero-mobile-fit,cover);object-position:var(--hero-mobile-position,50% 50%);}
}
.faq-row .q:focus-visible{ outline:2px solid currentColor; outline-offset:6px; border-radius:2px; }
@media (max-width:860px){
  .field input, .field select, .field textarea{ font-size:16px; min-height:48px; }
}
@media (max-width:760px){
  :root{ --pill-h:52px; }
  .nav-pill{ gap:6px; padding:0 6px; }
  .nav-toggle{ width:44px; height:44px; padding:8px; }
  .nav-pill .btn{ min-height:44px; }
  .mobile-menu a{ min-height:44px; display:flex; align-items:center; }
}
@media (min-width:761px) and (max-width:860px){
  .nav-pill .nav-link{ min-height:44px; display:inline-flex; align-items:center; }
  .nav-pill .btn{ min-height:44px; }
}

/* Each brochure module is one screen, using the existing section scroller.
   Overflow remains readable if the client adds unusually long copy/cards. */
.brochure-section{height:100vh;height:100dvh;min-height:0;padding:clamp(24px,5vh,72px) var(--pad);display:flex;flex-direction:column;justify-content:center;justify-content:safe center;overflow-y:auto;overflow-x:hidden;scroll-snap-align:start;scroll-snap-stop:always;}
.brochure-section.has-extra-content{overscroll-behavior-y:contain;}
.brochure-section>*{flex-shrink:0;}
.brochure-features{background:#f5f4ef;color:#20201e;}
.brochure-heading{max-width:760px;margin-bottom:clamp(20px,4vh,40px);}
.brochure-section h2{font-size:clamp(28px,3.5vw,48px);font-weight:400;line-height:1.16;letter-spacing:-1px;overflow-wrap:anywhere;}
.brochure-heading>p{font-size:16px;line-height:1.55;color:#696962;margin-top:14px;max-width:62ch;overflow-wrap:anywhere;}
.brochure-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vh,30px) 36px;}
.brochure-card{min-width:0;border-top:1px solid #d5d4ca;padding:clamp(12px,2.2vh,22px) 0 0;}
.brochure-icon{width:32px;height:32px;margin-bottom:clamp(10px,1.6vh,18px);color:inherit;}
.brochure-icon:empty{display:none;}
.brochure-icon svg{display:block;width:100%;height:100%;}
.brochure-card h3{font-size:clamp(17px,1.7vw,21px);line-height:1.25;font-weight:500;letter-spacing:-.3px;overflow-wrap:anywhere;margin-bottom:8px;}
.brochure-card p{font-size:15px;line-height:1.55;color:#696962;overflow-wrap:anywhere;}
.brochure-benefit{background:#111112;color:#fff;}
.brochure-benefit-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,5vw,80px);align-items:center;flex:1;min-height:0;}
.brochure-benefit .kicker,.brochure-security .kicker{color:#a8a89e;}
.brochure-benefit-copy>p{font-size:17px;line-height:1.65;color:#c1c1ba;margin-top:20px;max-width:46ch;overflow-wrap:anywhere;}
.brochure-figure{margin:0;min-width:0;min-height:0;height:100%;max-height:620px;display:flex;flex-direction:column;}
.brochure-figure>.ph{width:100%;height:auto;min-height:80px;flex:1;background:#e8e7e2;border:0;border-radius:4px;}
.brochure-figure figcaption{font-family:var(--mono);font-size:11px;line-height:1.6;color:#a8a89e;margin-top:14px;overflow-wrap:anywhere;}
.brochure-security{background:#1b1b1c;color:#f5f4ef;}
.brochure-security .brochure-heading>p,.brochure-security .brochure-card p{color:#bbbcb5;}
.brochure-security .brochure-card{border-color:#41413d;}
@media(max-width:1000px){.brochure-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.brochure-benefit-grid{gap:32px;}}
@media(min-width:761px) and (max-width:1000px) and (max-height:800px){
 .brochure-section{padding-top:24px;padding-bottom:24px;}
 .brochure-heading{margin-bottom:20px;}
 .brochure-card-grid{gap:16px 28px;}
 .brochure-card{padding-top:12px;}
 .brochure-icon{width:28px;height:28px;margin-bottom:10px;}
}
@media(max-width:760px){
 .brochure-section{padding:clamp(20px,4vh,40px) var(--pad);}
 .brochure-section .kicker{font-size:12px;}
 .brochure-section h2{font-size:clamp(24px,6.8vw,36px);letter-spacing:-.7px;}
 .brochure-heading{margin-bottom:clamp(16px,3vh,26px);}
 .brochure-heading>p{font-size:14px;line-height:1.45;margin-top:10px;}
 .brochure-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vh,24px) 18px;}
 .brochure-card{display:grid;grid-template-columns:24px minmax(0,1fr);align-content:start;align-items:center;gap:8px;padding-top:12px;}
 .brochure-icon{width:24px;height:24px;margin:0;}
 .brochure-card h3{font-size:clamp(14px,3.8vw,18px);line-height:1.25;margin:0;}
 .brochure-icon:empty+h3,.brochure-card p{grid-column:1/-1;}
 .brochure-card p{font-size:clamp(12.5px,3.4vw,15px);line-height:1.45;}
 .brochure-security .brochure-card:last-child:nth-child(odd){grid-column:1/-1;}
 .brochure-benefit-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:clamp(16px,3vh,28px);}
 .brochure-benefit-copy>p{font-size:15px;line-height:1.55;margin-top:14px;}
 .brochure-figure{max-height:none;}
 .brochure-figure figcaption{margin-top:10px;}
}
@media(max-height:650px) and (max-width:760px){
 .brochure-section{padding-top:18px;padding-bottom:18px;}
 .brochure-section h2{font-size:24px;}
 .brochure-heading{margin-bottom:16px;}
 .brochure-heading>p{font-size:13px;margin-top:8px;}
 .brochure-card-grid{gap:12px 16px;}
 .brochure-card{padding-top:10px;gap:6px;grid-template-columns:22px minmax(0,1fr);}
 .brochure-icon{width:22px;height:22px;}
 .brochure-card h3{font-size:14px;}
 .brochure-card p{font-size:12.5px;line-height:1.4;}
 .brochure-benefit-copy>p{font-size:14px;line-height:1.45;margin-top:12px;}
}
@media(max-height:500px) and (min-width:600px){
 .brochure-section{padding:18px var(--pad);}
 .brochure-section .kicker{font-size:11px;}
 .brochure-section h2{font-size:26px;}
 .brochure-heading{max-width:100%;margin-bottom:14px;}
 .brochure-heading>p{font-size:13px;line-height:1.4;margin-top:6px;}
 .brochure-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;}
 .brochure-card{display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;align-items:center;gap:6px;padding-top:10px;}
 .brochure-icon{width:22px;height:22px;margin:0;}
 .brochure-card h3{font-size:14px;line-height:1.25;margin:0;}
 .brochure-icon:empty+h3,.brochure-card p{grid-column:1/-1;}
 .brochure-card p{font-size:12.5px;line-height:1.4;}
 .brochure-security .brochure-card:last-child:nth-child(odd){grid-column:auto;}
 .brochure-benefit-grid{grid-template-columns:1fr 1.2fr;grid-template-rows:minmax(0,1fr);gap:24px;}
 .brochure-benefit-copy>p{font-size:14px;line-height:1.45;margin-top:12px;}
 .brochure-figure figcaption{font-size:10px;margin-top:8px;}
}

.product-card .ph.ph-filled{background:#e5e5e2}

@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/MaterialSymbolsOutlined.woff2') format('woff2')}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:300;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.form-feedback{padding:14px 18px;border:1px solid #a65238;background:#fff4ea;margin:0 0 20px;font-size:15px;line-height:1.5}