/* Theme Name: ZeroY Starter */

/* ================================================================ base
   White and glass-light. Separation comes from hairlines and space,
   never from heavy fills. Black is used as a block, vermilion as the
   single accent. */
:root{font-family:var(--font-body);color:var(--color-ink);background:var(--color-background)}
div{min-width:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;background:var(--color-background)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:3px}
::selection{background:var(--color-accent);color:#fff}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.022em}

/* ================================================================ layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.section{padding:var(--space-6) 0}
.section+.section{border-top:1px solid var(--color-line)}
.section--tight{padding:var(--space-5) 0}
.section--plain{border-top:0;padding-top:var(--space-5)}
.section--dark{background:var(--color-dark);color:var(--color-dark-ink);border-top:0}
.section--dark+.section{border-top:0}
.section--dark .lede,.section--dark .muted{color:var(--color-dark-muted)}
.section--dark .rule{background:var(--color-dark-line)}
.stack>*+*{margin-top:var(--space-3)}
.grid{display:grid;gap:var(--space-3)}
.rule{height:1px;background:var(--color-line);border:0;margin:0}
@media(min-width:760px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* ================================================================ type */
.display{font-size:clamp(2.3rem,5.4vw,4.2rem);letter-spacing:-.035em;font-weight:800}
.h2{font-size:clamp(1.6rem,3vw,2.45rem);letter-spacing:-.028em}
.h3{font-size:1.2rem}
.eyebrow{font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;color:var(--color-label);font-weight:700;margin:0}
.section--dark .eyebrow{color:var(--color-label)}
.lede{font-size:1.14rem;color:var(--color-muted);max-width:62ch;margin:0;line-height:1.62}
.muted{color:var(--color-muted)}
.small{font-size:.9rem}
.mono{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.01em}
a.text-link{color:var(--color-accent);text-decoration:none;border-bottom:1px solid var(--color-accent-soft)}
a.text-link:hover{border-bottom-color:var(--color-accent)}

/* ================================================================ buttons */
.btn{display:inline-block;padding:14px 24px;background:var(--color-accent);color:#fff;border:1px solid var(--color-accent);border-radius:var(--radius-button);text-decoration:none;font-weight:600;font-size:.94rem;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.btn:hover{background:var(--color-accent-deep);border-color:var(--color-accent-deep);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--color-ink);border-color:var(--color-line-strong)}
.btn--ghost:hover{background:var(--color-surface);color:var(--color-accent);border-color:var(--color-accent);transform:translateY(-1px)}
.btn--dark{background:var(--color-dark);border-color:var(--color-dark);color:#fff}
.btn--dark:hover{background:#000;border-color:#000}
.section--dark .btn--ghost{color:var(--color-dark-ink);border-color:var(--color-dark-line)}
.section--dark .btn--ghost:hover{background:transparent;border-color:var(--color-accent-soft);color:var(--color-accent-soft)}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

/* ================================================================ header */
.site-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--color-line);background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:18px 28px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand__mark{font-size:1.16rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.brand__sub{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.nav{display:flex;flex-wrap:wrap;gap:24px;align-items:center;list-style:none;margin:0;padding:0}
.nav__link{text-decoration:none;font-size:.94rem;font-weight:600;color:var(--color-ink);padding:4px 0;border-bottom:2px solid transparent;transition:border-color .18s ease,color .18s ease}
.nav__link:hover,.nav__link[aria-current="page"]{border-bottom-color:var(--color-accent);color:var(--color-accent)}
.header-tools{display:flex;align-items:center;gap:12px}
.header-tools__cta{white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--color-dark);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-control) 0;text-decoration:none;font-weight:600}
.skip-link:focus{left:0}

/* ================================================================ glass scene
   Light vector illustrations of the fittings in use. Real photography can
   replace them inside components/media-slot.php. */
.glass-scene{margin:0;position:relative;border-radius:var(--radius-card);overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,var(--color-glass) 100%);border:1px solid var(--color-line)}
.glass-scene .scene{display:block;width:100%;height:100%}
.glass-scene{aspect-ratio:4/3}
.glass-scene--card{aspect-ratio:4/3}
.glass-scene--wide{aspect-ratio:21/9}
.glass-scene__caption{margin:0;padding:14px 20px;border-top:1px solid var(--color-line);background:var(--color-surface);font-size:.86rem;color:var(--color-muted)}
.section--dark .glass-scene{background:linear-gradient(180deg,#1d2126 0%,#181c20 100%);border-color:var(--color-dark-line)}

/* ================================================================ cards */
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:28px;box-shadow:var(--shadow-soft)}
.card__title{font-size:1.08rem;font-weight:700;margin-bottom:8px}
.card__body{color:var(--color-muted);font-size:.94rem;margin:0;line-height:1.6}
.card__num{font-family:var(--font-mono);font-size:.78rem;color:var(--color-accent);letter-spacing:.08em;display:block;margin-bottom:14px}
.section--dark .card{background:rgba(255,255,255,.045);border-color:var(--color-dark-line);box-shadow:none}

/* product card */
.product{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.product:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--color-line-strong)}
.product .glass-scene{border:0;border-bottom:1px solid var(--color-line);border-radius:0}
.product__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.product__name{font-size:1.12rem;margin:0}
.product__use{color:var(--color-muted);font-size:.93rem;margin:0;line-height:1.6}
.product__specs{margin:0;font-size:.87rem;color:var(--color-muted)}
.product__specs div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--color-line)}
.product__specs dt{color:var(--color-ink);font-weight:600}
.product__specs dd{margin:0;text-align:right}

/* feature blocks (dark) */
.feature{border-top:2px solid var(--color-accent);padding-top:20px}
.feature__num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--color-accent-soft)}
.feature__title{font-size:1.16rem;margin:10px 0 10px;color:var(--color-dark-ink)}
.feature__body{color:var(--color-dark-muted);font-size:.94rem;margin:0;line-height:1.62}
.section--dark .feature__body{color:var(--color-dark-muted)}

/* ================================================================ spec table */
.spec{border-top:1px solid var(--color-line);margin:0}
.spec__row{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 0;border-bottom:1px solid var(--color-line)}
.spec__key{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-muted);margin:0;font-weight:600}
.spec__val{margin:0;font-size:.99rem}
@media(min-width:760px){
  .spec__row{grid-template-columns:230px 1fr;gap:28px;align-items:baseline}
}
.section--dark .spec,.section--dark .spec__row{border-color:var(--color-dark-line)}

/* ================================================================ flow */
.flow{counter-reset:step;display:grid;gap:var(--space-3)}
@media(min-width:760px){.flow{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.flow--5{grid-template-columns:repeat(5,1fr)}}
.flow__step{border-top:1px solid var(--color-line);padding-top:16px}
.section--dark .flow__step{border-color:var(--color-dark-line)}
.flow__num{font-family:var(--font-mono);font-size:.76rem;color:var(--color-accent);letter-spacing:.1em}
.flow__title{font-size:1rem;font-weight:700;margin:8px 0 6px}
.flow__body{font-size:.88rem;color:var(--color-muted);margin:0;line-height:1.6}

/* ================================================================ tags + badges */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tag{font-size:.78rem;padding:5px 12px;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);color:var(--color-muted);background:var(--color-surface)}
.badge{font-size:.78rem;font-weight:700;letter-spacing:.1em;padding:16px 26px;min-width:132px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-line-strong);border-radius:var(--radius-control);text-transform:uppercase}
.certrow{display:grid;gap:12px;margin-top:var(--space-3)}

/* ================================================================ labelled slots (interim media) */
.media-slot--labeled{position:relative;overflow:hidden;border:1px solid var(--color-line);background:linear-gradient(180deg,#ffffff 0%,var(--color-glass) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;border-radius:var(--radius-card);text-align:center}
.media-slot--labeled svg{width:44px;height:44px;stroke:var(--color-muted);stroke-width:1.2;margin-bottom:12px;opacity:.8}
.media-slot__tag{display:inline-block;padding:5px 12px;background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);margin-bottom:10px}
.media-slot__caption{font-size:.86rem;color:var(--color-muted);max-width:34ch;margin:0;line-height:1.6}
.media-slot{width:100%;aspect-ratio:4/3;background:var(--color-glass);border:1px solid var(--color-line);border-radius:var(--radius-card);display:grid;place-items:center}
.media-slot svg{width:34px;height:34px;stroke:var(--color-placeholder-ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.media-slot--wide{aspect-ratio:21/9;max-height:420px}
.section--dark .media-slot--labeled{background:linear-gradient(180deg,#1f2329 0%,#1a1d21 100%);border-color:var(--color-dark-line)}
.section--dark .media-slot--labeled svg{stroke:var(--color-dark-muted)}
.section--dark .media-slot__tag{background:#282c33;border-color:var(--color-dark-line);color:var(--color-dark-ink)}
.section--dark .media-slot__caption{color:var(--color-dark-muted)}

/* ================================================================ hero */
.hero-grid{display:grid;gap:var(--space-4)}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.02fr .98fr;align-items:center;gap:var(--space-5)}
}
.hero-stats{margin-top:var(--space-5)}
.section--dark .tag{border-color:var(--color-dark-line);color:var(--color-dark-muted);background:transparent}

/* ================================================================ note + checklist */
.note{background:var(--color-accent-soft);border-left:3px solid var(--color-accent);padding:16px 20px;font-size:.92rem;border-radius:0 var(--radius-control) var(--radius-control) 0;line-height:1.6}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--color-line);font-size:.94rem}
.checklist li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:6px;border-left:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);transform:rotate(-45deg)}
.section--dark .checklist li{border-bottom-color:var(--color-dark-line)}
.section--dark .checklist li::before{border-color:var(--color-accent-soft)}

/* ================================================================ stats */
.stats{display:grid;gap:var(--space-3)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:1px solid var(--color-line);padding-top:16px}
.stat__num{font-size:1.95rem;font-weight:800;letter-spacing:-.03em;display:block}
.stat__label{font-size:.85rem;color:var(--color-muted)}
.section--dark .stat{border-color:var(--color-dark-line)}
.section--dark .stat__label{color:var(--color-dark-muted)}

/* ================================================================ CTA band */
.cta{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-4);background:var(--color-surface);box-shadow:var(--shadow-soft)}
.cta__title{font-size:clamp(1.45rem,2.5vw,2.1rem);margin:0 0 12px}

/* ================================================================ contact list */
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:13px 0;border-bottom:1px solid var(--color-line)}
.contact-list strong{display:block;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-muted);font-weight:700;margin-bottom:3px}
.contact-list a{color:var(--color-accent);text-decoration:none}
.contact-list a:hover{text-decoration:underline}

/* ================================================================ floating WhatsApp */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:10px;padding:14px;border-radius:var(--radius-pill);background:var(--color-dark);color:#fff;text-decoration:none;box-shadow:0 12px 28px -12px rgba(14,17,20,.5)}
.wa-float svg{width:22px;height:22px;fill:currentColor;display:block}
.wa-float span{display:none}
.wa-float:hover{background:var(--color-accent)}
@media(min-width:760px){
  .wa-float{padding:13px 20px}
  .wa-float span{display:inline;font-weight:600;font-size:.9rem}
}

/* ================================================================ footer */
.site-footer{background:var(--color-dark);color:var(--color-dark-ink);padding:var(--space-5) 0 var(--space-3)}
.site-footer a{text-decoration:none;color:var(--color-dark-ink)}
.site-footer a:hover{color:var(--color-accent-soft)}
.footer__grid{display:grid;gap:var(--space-4)}
@media(min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__title{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-dark-muted);margin:0 0 14px;font-weight:700}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.footer__legal{margin-top:var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--color-dark-line);font-size:.8rem;color:var(--color-dark-muted);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* ================================================================ page body copy */
.entry p{max-width:68ch}
.entry h2{margin:var(--space-4) 0 var(--space-2);font-size:clamp(1.4rem,2.4vw,2rem)}
.entry h3{margin:var(--space-3) 0 var(--space-2);font-size:1.15rem}
.page-head{padding:var(--space-5) 0 var(--space-4)}

/* ================================================================ contact form */
.contact-grid{display:grid;gap:var(--space-3)}
@media(min-width:960px){
  .contact-grid{grid-template-columns:1.35fr .95fr;gap:var(--space-4);align-items:start}
}
.form{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
@media(min-width:640px){
  .form{grid-template-columns:repeat(2,1fr)}
  .field--half{grid-column:span 1}
  .field:not(.field--half){grid-column:1 / -1}
}
.field{display:grid;gap:6px}
.field__label{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-muted);font-weight:700}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;font:inherit;font-size:.95rem;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-control);transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{resize:vertical;min-height:124px}
.field input::placeholder,.field textarea::placeholder{color:#b6bfc5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-muted) 50%),linear-gradient(135deg,var(--color-muted) 50%,transparent 50%);background-position:calc(100% - 21px) 23px,calc(100% - 15px) 23px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.field--wide{grid-column:1 / -1}
.field--check{display:flex;align-items:flex-start;gap:10px;grid-column:1 / -1}
.field--check input{width:auto;height:16px;flex:0 0 auto;margin:3px 0 0;padding:0;accent-color:var(--color-accent)}
.field--check .field__label{letter-spacing:0;text-transform:none;font-size:.9rem;font-weight:400;color:var(--color-ink);line-height:1.55}
.field__hint{font-size:.8rem;color:var(--color-muted)}
.field__req{color:var(--color-accent)}
.field__error{font-size:.82rem;color:var(--color-accent)}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--color-accent)}
.field--trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.form__actions .btn{cursor:pointer}

/* ================================================================ technical blueprint (about page) */
.blueprint{position:relative;height:400px;background:linear-gradient(180deg,#ffffff 0%,var(--color-glass) 100%);border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.bp-grid{position:absolute;inset:0;background-image:linear-gradient(#e2ecf0 1px,transparent 1px),linear-gradient(90deg,#e2ecf0 1px,transparent 1px);background-size:26px 26px;pointer-events:none;opacity:.75}
.bp-overlay{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bp-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.85);border:1px solid var(--color-line-strong);padding:6px 12px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--color-ink)}
.bp-visual{position:relative;z-index:2;margin:auto 0;display:flex;align-items:center;justify-content:center}
.bp-visual svg{max-width:330px;width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(14,17,20,.08))}
.bp-footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.73rem;color:var(--color-muted);border-top:1px solid var(--color-line);padding-top:14px;flex-wrap:wrap}

/* ================================================================ small screens */
@media(max-width:759px){
  .wrap{padding:0 20px}
  .site-header__inner{padding:14px 20px}
  .brand__sub{display:none}
  .nav{gap:16px}
  .nav__link{font-size:.89rem}
  .section{padding:var(--space-5) 0}
  .card,.product__body,.cta{padding:20px}
  .product__body{padding:20px}
  .blueprint{height:300px}
  .wa-float{right:14px;bottom:14px}
  .site-footer{padding-bottom:96px}
}

/* ================================================================ small shared helpers */
.meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.meta-row .card__num{margin-bottom:0}
.meta-row .mono{margin:0}
.media-row{display:flex;gap:14px;align-items:center}
.section--dark .note{background:rgba(201,31,45,.16);color:var(--color-dark-ink);border-left-color:var(--color-accent)}

.media-row p{margin:0}
.media-row .card__title{margin-bottom:4px}

/* ================================================================ pagination */
.pagination-wrap{margin-top:var(--space-3)}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border:1px solid var(--color-line-strong);border-radius:var(--radius-button);font-size:.9rem;font-weight:600;text-decoration:none;color:var(--color-ink);background:var(--color-surface)}
.navigation.pagination .page-numbers:hover{border-color:var(--color-accent);color:var(--color-accent)}
.navigation.pagination .page-numbers.current{background:var(--color-dark);border-color:var(--color-dark);color:#fff}
.navigation.pagination .page-numbers.dots{border:0;background:transparent;color:var(--color-muted)}

/* ================================================================ accessibility helper */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:var(--color-surface);border:1px solid var(--color-line-strong);box-shadow:var(--shadow-soft);clip-path:none;color:var(--color-ink);display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}

/* card titles read as ink; the accent appears on hover */
.card__title .text-link{color:var(--color-ink);border-bottom:1px solid transparent}
.card__title .text-link:hover{color:var(--color-accent);border-bottom-color:var(--color-accent-soft)}





/* ================================================================ header nav (menu row, panels, mobile drawer) */
.site-header__inner{position:relative}
.nav__item{position:static}
.nav__toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav__caret-label{display:inline-flex;align-items:center;padding:4px 2px;cursor:pointer}
.nav__caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;transition:transform .18s ease}
.nav__item--menu:hover .nav__caret,.nav__toggle:checked~.nav__caret-label .nav__caret{transform:rotate(180deg)}
.nav__toggle:focus-visible~.nav__caret-label .nav__caret{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}

/* panels ---------------------------------------------------------- */
/* The Products mega panel is a full-width sheet hung from the header bar. */
.nav__panel{position:absolute;top:100%;z-index:70;background:var(--color-surface);border:1px solid var(--color-line);border-top:0;box-shadow:var(--shadow-lift);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease .12s,transform .16s ease .12s,visibility .16s .12s}
/* keeps the pointer inside the hover target while it travels down to the panel */
.nav__panel::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
.nav__item--menu:hover>.nav__panel,
.nav__toggle:checked~.nav__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.nav__panel--wide{left:28px;right:28px;padding:24px 28px 20px;border-radius:0 0 var(--radius-card) var(--radius-card)}
/* The mega menu: a head strip, the six lines as cards that each carry their own
   illustration and title, then the scenario axis and the quick actions. */
.nav__mega{display:grid;gap:18px}
.nav__mega-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--color-line)}
.nav__mega-head .eyebrow{margin:0 0 4px}
.nav__mega-lede{margin:0;max-width:64ch;font-size:.88rem;color:var(--color-muted)}
.nav__group{display:grid;gap:8px}
.nav-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.nav-card__link{display:flex;align-items:center;gap:12px;height:100%;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--color-ink)}
.nav-card__link:hover,.nav-card__link:focus-visible{background:var(--color-accent-soft)}
.nav-card__link .glass-scene{flex:0 0 76px;margin:0;border-radius:8px}
.nav-card__text{display:grid;gap:2px;min-width:0}
.nav-card__name{font-weight:600;font-size:.94rem;line-height:1.25}
.nav-card__link:hover .nav-card__name{color:var(--color-accent)}
.nav-card__desc{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.8rem;line-height:1.35;color:var(--color-muted)}
.nav-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
/* A scenario count that leaves one chip alone on the last row gives it the whole
   row, so the group reads as a finished block rather than an uneven grid. */
.nav-chips>.nav-chip:last-child:nth-child(4n+1){grid-column:1/-1}
.nav-chip a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--color-line);border-radius:10px;text-decoration:none;color:var(--color-ink);background:var(--color-surface);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.nav-chip a:hover,.nav-chip a:focus-visible{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent);transform:translateY(-1px)}
.nav-chip .glass-scene{flex:0 0 68px;margin:0;border-radius:6px}
.nav-chip__text{display:grid;gap:2px;min-width:0}
.nav-chip__title{font-weight:600;font-size:.9rem;line-height:1.25;color:var(--color-ink)}
.nav-chip a:hover .nav-chip__title{color:var(--color-accent)}
.nav-chip__desc{font-size:.76rem;line-height:1.3;color:var(--color-muted);display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.glass-scene .scene-img{width:100%;height:100%;object-fit:cover;display:block}
.nav__mega-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-top:14px;border-top:1px solid var(--color-line)}
.nav__action{display:grid;gap:1px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--color-ink)}
.nav__action:hover,.nav__action:focus-visible{background:var(--color-accent-soft);color:var(--color-accent)}
.nav__action-label{font-weight:600;font-size:.88rem}
.nav__action-sub{font-size:.78rem;color:var(--color-muted)}
.glass-scene--nav{aspect-ratio:4/3;border-radius:8px}
/* A list panel hangs from its own item: its left edge follows the link, it
   drops a short distance, and a notch points back up at the item. */
.nav__item--menu:not(.nav__item--mega){position:relative}
.nav__panel--list{left:0;right:auto;top:calc(100% + 10px);width:min(360px,calc(100vw - 40px));padding:14px;border-top:1px solid var(--color-line);border-radius:var(--radius-card)}
/* A group of six pages (Resources) reads better as two columns. */
.nav__panel--cols{width:min(600px,calc(100vw - 40px))}
.nav__panel--cols .nav__panel-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
/* items near the right edge keep their panel inside the header */
.nav__item--end .nav__panel--list{left:auto;right:0}
.nav__panel--list::after{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:var(--color-surface);border-left:1px solid var(--color-line);border-top:1px solid var(--color-line);transform:rotate(45deg)}
.nav__item--end .nav__panel--list::after{left:auto;right:24px}
.nav__panel--list .nav__panel-inner{display:grid;grid-template-columns:1fr;gap:4px}
.nav__intro{display:grid;gap:10px;align-content:start;padding-right:24px;border-right:1px solid var(--color-line)}
.nav__intro .btn{padding:10px 16px;font-size:.88rem;justify-self:start}
.nav__panel-title{margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--color-line);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--color-muted)}
.nav__panel-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.nav__panel-list a{display:grid;gap:1px;padding:8px 10px;margin-left:-10px;border-radius:8px;text-decoration:none;color:var(--color-ink);font-weight:600;font-size:.93rem;line-height:1.3}
.nav__panel-list a:hover,.nav__panel-list a:focus-visible{background:var(--color-accent-soft);color:var(--color-accent)}
/* The one line under a page name, so a panel explains itself without a click. */
.nav__panel-list .sub{display:block;font-weight:400;font-size:.82rem;line-height:1.35;color:var(--color-muted);white-space:normal}

/* mobile drawer ---------------------------------------------------- */
.nav-drawer{display:none}
.nav-burger{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--color-line-strong);background:var(--color-surface);border-radius:var(--radius-pill);padding:9px 15px;font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;list-style:none}
.nav-burger::-webkit-details-marker{display:none}
.nav-burger__bars{position:relative;display:block;width:15px;height:2px;background:currentColor}
.nav-burger__bars::before,.nav-burger__bars::after{content:"";position:absolute;left:0;width:15px;height:2px;background:currentColor}
.nav-burger__bars::before{top:-5px}
.nav-burger__bars::after{top:5px}
.nav-drawer__body{display:none}

@media(max-width:1099px){
  .nav{display:none}
  /* the drawer carries its own search and CTA */
  .header-tools{display:none}
  .nav-drawer{display:block;margin-left:auto}
  .nav-drawer[open] .nav-burger{background:var(--color-dark);border-color:var(--color-dark);color:#fff}
  .nav-drawer__body{display:block;position:absolute;left:0;right:0;top:100%;z-index:80;background:var(--color-surface);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);box-shadow:var(--shadow-lift);padding:8px 20px 24px;max-height:calc(100vh - 72px);overflow:auto}
  .nav-drawer__body>details{border-bottom:1px solid var(--color-line)}
  .nav-drawer__body>details>summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:600;font-size:.98rem;cursor:pointer;list-style:none}
  .nav-drawer__body>details>summary::-webkit-details-marker{display:none}
  .nav-drawer__body>details>summary::after{content:"＋";color:var(--color-muted);font-weight:400}
  .nav-drawer__body>details[open]>summary::after{content:"－"}
  .nav-drawer__body ul{list-style:none;margin:0 0 14px;padding:0 0 0 12px;display:grid;gap:2px}
  .nav-drawer__body ul a{display:block;padding:8px 0;color:var(--color-muted);text-decoration:none;font-size:.93rem}
  /* Product lines keep their illustration in the drawer, at a smaller size. */
  .nav-drawer__lines a{display:flex;align-items:center;gap:10px;color:var(--color-ink);font-weight:600}
  .nav-drawer__lines .glass-scene{flex:0 0 48px;margin:0;border-radius:6px}
  .nav-drawer__flat{display:block;padding:14px 0;font-weight:600;color:var(--color-ink);text-decoration:none;border-bottom:1px solid var(--color-line)}
  .nav-drawer__cta{display:block;text-align:center;margin-top:16px}
}

/* four-column footer */
@media(min-width:760px){
  .footer__grid--4{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
@media(min-width:760px) and (max-width:1099px){
  .footer__grid--4{grid-template-columns:1fr 1fr;gap:32px}
}

/* group label inside the mobile drawer */
.nav-drawer__group{margin:14px 0 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);font-weight:700}

/* ================================================================ photo slots
   Real photography replaces the placehold.co placeholders; sizes are printed on
   each placeholder and listed in the page template docblock. */
.photo{display:block;width:100%;height:auto;border-radius:var(--radius-card);border:1px solid var(--color-line);background:var(--color-glass);object-fit:cover}
.photo--hero{aspect-ratio:4/3}
.photo--band{aspect-ratio:8/3}
.photo-band{margin:0}
.photo-band figcaption{margin-top:12px;font-size:.88rem;color:var(--color-muted);max-width:70ch;line-height:1.6}

/* ================================================================ legal / document pages */
.doc-meta{margin:0;font-size:.88rem;color:var(--color-muted)}
.doc-grid{display:grid;gap:var(--space-4)}
@media(min-width:960px){
  .doc-grid{grid-template-columns:250px 1fr;gap:var(--space-5);align-items:start}
}
.doc-nav{display:grid;gap:8px;align-content:start}
@media(min-width:960px){
  .doc-nav{position:sticky;top:104px}
}
.doc-nav__title{margin:0 0 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);font-weight:700}
.doc-nav a{font-size:.9rem;color:var(--color-muted);text-decoration:none}
.doc-nav a:hover{color:var(--color-accent)}
.doc-body h2{font-size:1.12rem;margin:0}
.doc-body p{max-width:74ch}

/* ================================================================ landing pages
   /lp/{slug}/ renders on a bare canvas: no site header, no site footer. */
.landing-body{background:var(--color-surface)}
.landing{min-height:100vh;padding:var(--space-6) var(--space-3);background:var(--color-surface)}
.landing__inner{max-width:760px;margin:0 auto}
.landing .entry{font-size:1.05rem}

/* ================================================================ framework chrome
   Shared pieces for the pages the theme renders itself (planning doc §4, §11). */

/* breadcrumbs (§11.4) --------------------------------------------- */
.crumbs{margin:0 0 var(--space-2)}
.crumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.82rem;color:var(--color-muted)}
.crumbs__item{display:inline-flex;align-items:center;gap:6px}
.crumbs__item + .crumbs__item::before{content:"/";color:var(--color-line-strong)}
.crumbs__list a{color:var(--color-muted);text-decoration:none}
.crumbs__list a:hover{color:var(--color-accent);text-decoration:underline}
.crumbs__list [aria-current="page"]{color:var(--color-ink);font-weight:600}

/* planning notice — build-time placeholder, removed at launch (§15) - */
.planning{border-left:4px solid var(--color-accent);padding:48px 36px;display:grid;gap:var(--space-2)}
.planning__status{background:var(--color-surface);font-weight:700}
.planning__body{font-size:1.05rem;line-height:1.75;max-width:68ch}
.planning__scope{padding-top:20px;border-top:1px solid var(--color-line)}
.planning__scope p{margin:0}
.planning__scope .spec__key{margin-bottom:8px}

/* entry list — archives, search results, fallback ------------------ */
.entry-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.entry-list__item{border-top:1px solid var(--color-line);padding-top:var(--space-3)}
.entry-list__entry{display:grid;gap:8px}
.entry-list__entry p,.entry-list__entry .card__title,.entry-list__entry .eyebrow{margin:0}

/* search form (§11.1) --------------------------------------------- */
.site-search{display:flex;align-items:stretch;margin:0;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);background:var(--color-surface);overflow:hidden}
.site-search__input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:9px 14px;font:inherit;font-size:.86rem;color:var(--color-ink)}
.site-search__input::placeholder{color:#b6bfc5}
.site-search__input:focus{outline:2px solid var(--color-focus);outline-offset:-2px}
.site-search__submit{border:0;background:var(--color-accent);color:#fff;font:inherit;font-size:.8rem;font-weight:700;padding:9px 16px;cursor:pointer;white-space:nowrap}
.site-search__submit:hover{background:var(--color-accent-deep)}
.header-tools .site-search{width:164px}
.site-search--page{max-width:520px;margin-top:var(--space-2);border-radius:var(--radius-control)}
.site-search--page .site-search__input{padding:13px 16px;font-size:.95rem}
.site-search--page .site-search__submit{padding:13px 22px;font-size:.9rem}
.site-search--drawer{margin:16px 0 0;border-radius:var(--radius-control)}
.site-search--drawer .site-search__input{padding:12px 14px}
.site-search--drawer .site-search__submit{padding:12px 18px}

/* pagination ------------------------------------------------------- */
.pagination-wrap .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination-wrap .page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--color-line-strong);border-radius:var(--radius-button);text-decoration:none;color:var(--color-ink);font-size:.88rem}
.pagination-wrap .page-numbers.current{background:var(--color-dark);border-color:var(--color-dark);color:#fff}
.pagination-wrap .page-numbers:hover{border-color:var(--color-accent);color:var(--color-accent)}
.pagination-wrap .page-numbers.current:hover{border-color:var(--color-ink);color:#fff}

/* checklist links inside the 404 and empty-state cards ------------- */
.card .checklist a{color:var(--color-ink);text-decoration:none;border-bottom:1px solid var(--color-line-strong)}
.card .checklist a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent-soft)}

/* tables inside page copy (§12) ------------------------------------ */
.entry table{width:100%;border-collapse:collapse;margin:var(--space-3) 0;font-size:.94rem;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-control);overflow:hidden}
.entry th{text-align:left;padding:13px 18px;border-bottom:1px solid var(--color-line-strong);background:var(--color-surface-soft);color:var(--color-muted);font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.entry td{padding:14px 18px;border-bottom:1px solid var(--color-line);vertical-align:top;font-variant-numeric:tabular-nums}
.entry tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .entry table{font-size:.9rem}
  .entry th,.entry td{padding:11px 12px}
}

/* shipment records — the case studies hub and one record ------------ */
.tag a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.tag a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent-soft)}
.product__specs+.tagrow,.spec+.tagrow{margin-top:var(--space-2)}

/* ================================================================ reference page (front page)
   The front page sets the pattern the rest of the site follows: the type scale
   and the numbers brought onto DESIGN §5, every photograph position labelled
   with the size the shooting list asks for, and the restrained motion set from
   DESIGN §9. */

/* type scale — DESIGN §5: display 44–56, h2 30–34, h3 20–22, body 15–16 */
body{font-size:16px}
.display{font-size:clamp(2.75rem,4.6vw,3.5rem)}
.h2{font-size:clamp(1.75rem,2.6vw,2.125rem)}
.h3{font-size:1.3rem}

/* an anchor never lands under the sticky header */
[id]{scroll-margin-top:104px}

/* white → glass grey → white → ink: the page rhythm of DESIGN §6 */
.section--glass{background:var(--color-glass)}

/* panel — a soft block that holds a table or a short brief */
.panel{background:var(--color-surface-soft);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-4)}
.panel .spec{border-top:0}
.panel .spec__row:last-child{border-bottom:0}

/* numbers are read in mono and align to the tabular grid (DESIGN §5) */
.stat__num{font-family:var(--font-mono);font-weight:700;font-size:1.72rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* a facts band carries as many facts as the record really has — two, three or
   four — so the columns fit the count instead of leaving gaps */
@media(min-width:560px){.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* ---------------------------------------------------------------- photo slot
   A labelled position for a photograph that has not been supplied yet: the
   placeholder states what to shoot and at what pixel size, and both the label
   and the slot disappear once the real picture is in the media library. */
.photo{margin:0}
.photo__img{display:block;width:100%;height:auto;aspect-ratio:var(--photo-ratio,4/3);object-fit:cover;background:var(--color-placeholder);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.photo__meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:10px;font-size:.82rem;line-height:1.5;color:var(--color-muted)}
.photo__meta .mono{font-size:.8rem;color:var(--color-ink);white-space:nowrap}
.photo__shoot{flex:1 1 16ch;min-width:0}
.photo--dark .photo__img{background:#1f2329;border-color:var(--color-dark-line)}
.photo--dark .photo__meta{color:var(--color-dark-muted)}
.photo--dark .photo__meta .mono{color:var(--color-dark-ink)}
.product .photo__img{border:0;border-bottom:1px solid var(--color-line);border-radius:0}
.product .photo__meta{padding:12px 24px 0}
/* a page-opening picture is capped, so a 4:3 photograph never stretches into a
   full-width banner on a detail page; the wide 16:5 bands stay full width */
.section--plain > .wrap > .photo--standard{max-width:840px;margin-left:auto;margin-right:auto}
.product__foot{margin-top:auto;padding-top:4px}

/* made in our workshops — DESIGN §8: vermilion-soft, four core lines only */
.made{display:inline-block;align-self:flex-start;margin:0;padding:5px 11px;border-radius:var(--radius-pill);background:var(--color-accent-soft);color:var(--color-accent-deep);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.made--note{display:block;padding:0;background:none;color:var(--color-muted);font-size:.86rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.6}

/* parameter tags — DESIGN §8: small, uppercase, numbers in mono */
.tag--spec{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink)}

/* the compact row of application scenarios */
.approw{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.approw__label{margin:0;font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--color-muted)}
.approw__list{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0;padding:0;list-style:none}

/* spec rows stacked, for the narrow column of a card */
.spec--tight .spec__row{grid-template-columns:1fr;gap:0;padding:9px 0}
.spec--tight .spec__key{font-size:.68rem}
.spec--tight .spec__val{font-size:.94rem}

/* a card that is itself a link */
.card--link{margin:0;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--color-line-strong)}

/* the four inspection stages, in the ink block */
@media(min-width:760px){.flow--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.flow--4{grid-template-columns:repeat(4,1fr)}}

/* ================================================================ motion (DESIGN §9)
   150–250 ms fades and a 16px rise, one pass, no rotation, bounce, glow or
   parallax. The hidden state exists only while html.gh-motion is set — added by
   assets/js/motion.js, which also reveals everything at once the moment it
   cannot run, so the page is never left blank without JavaScript. */
html.gh-motion [data-motion="reveal"]{opacity:0;translate:0 16px}
html.gh-motion [data-motion="reveal"].is-in{opacity:1;translate:none;transition:opacity .22s ease-out,translate .22s ease-out;transition-delay:calc(var(--i,0) * 60ms)}
@media(prefers-reduced-motion:reduce){
  html.gh-motion [data-motion="reveal"]{opacity:1;translate:none;transition:none}
}

/* ================================================================ blog & insights (/blog/)
   The written library: article cards on the same hairline rhythm as a product
   card, the newest note leading page one beside its photograph, parameter tags
   read from the model's own choices, and dates in mono (DESIGN §5 / §8). */
.post-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--color-line-strong)}
.post-card .photo{margin:0}
.post-card .photo__img{border:0;border-bottom:1px solid var(--color-line);border-radius:0}
.post-card .photo__meta{padding:12px 24px 0}
.post-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-card__title{margin:0;font-size:1.12rem;line-height:1.3}
.post-card__title .text-link{color:var(--color-ink);border-bottom:1px solid transparent}
.post-card__title .text-link:hover{color:var(--color-accent);border-bottom-color:var(--color-accent-soft)}
.post-card__excerpt{margin:0;color:var(--color-muted);font-size:.93rem;line-height:1.6}
.post-card__meta{margin:auto 0 0;padding-top:2px}
.post-card__meta span{white-space:nowrap}

/* The newest note leads page one: it takes the full width of the grid as soon as
   the grid has more than one column, and lays its photograph beside the words once
   there is room, so the top of the library reads as a lead note rather than as a
   slightly larger tile. Everything below it is the plain card. */
@media(min-width:760px){.post-card--lead{grid-column:1 / -1}}
@media(min-width:860px){
  .post-card--lead{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .post-card--lead .post-card__body{padding:32px 34px}
  .post-card--lead .post-card__title{font-size:clamp(1.3rem,2.1vw,1.6rem)}
  .post-card--lead .photo__img{aspect-ratio:3/2}
}

/* ================================================================ front page — the trade bands
   Who we supply, what a private-label order can change, the written notes and the
   questions that come before a first order. The bands borrow the page's existing
   grammar — a card is a card, a number is mono and vermilion — and add exactly one
   new column count, four across, once there is room for it. */

@media(min-width:640px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.grid--4{grid-template-columns:repeat(4,1fr)}}

/* a buyer type and an OEM option are the same card; the option carries the number
   and the audience card carries the page it leads to, so nothing else changes */
#buyers .card,.oem-card{display:flex;flex-direction:column}
#buyers .card .small{margin-top:auto;padding-top:4px}
#buyers .card__body,#oem .card__body{margin-bottom:0}

/* questions: the native details element, one hairline per question, vermilion mark
   — it opens without JavaScript and reads correctly in a search result */
.faq{border-top:1px solid var(--color-line)}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__q{position:relative;cursor:pointer;padding:18px 44px 18px 0;font-size:1.02rem;font-weight:700;line-height:1.45;list-style:none}
.faq__q::-webkit-details-marker{display:none}
/* the marker is a real element hidden from assistive technology rather than
   generated content, so a screen reader reads the question and nothing else */
.faq__mark{position:absolute;right:10px;top:14px;font-family:var(--font-mono);font-size:1.2rem;line-height:1.4;color:var(--color-accent)}
.faq__mark::before{content:"+"}
.faq__item[open] .faq__mark::before{content:"–"}
/* the question is a heading inside the summary, so the four questions enter the
   page outline as well as the disclosure */
.faq__h{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.faq__q:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-control)}
.faq__body{padding:0 44px 20px 0;color:var(--color-muted);font-size:.96rem;line-height:1.62}
.faq__body p{margin:0}
.faq__body p+p{margin-top:8px}
@media(max-width:560px){.faq__q{padding-right:32px}.faq__body{padding-right:0}}

/* ============================================================ front page — the
   reference structure (2026-09). The page follows lezenlighting.com band for band:
   a dark photographic opening, a strip of order terms, a counter row, the range,
   the scenarios, the buying risks, the OEM matrix, the workshop, the inspection
   stages, the documents, the nine ordering steps, the three places, the shipment
   records, the questions, the notes, one action strip and the form. The layout
   metrics are the reference's (medium ~90px sections, 4/3/2-column grids, tight
   radii inside the dark bands); the palette stays this site's own. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--color-dark);color:var(--color-dark-ink)}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg .photo{height:100%;border:0;border-radius:0}
.hero__bg .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.hero__bg .photo__meta{position:absolute;right:20px;bottom:14px;margin:0;max-width:280px;justify-content:flex-end;text-align:right}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(12,13,15,.95) 0%,rgba(12,13,15,.87) 42%,rgba(12,13,15,.5) 100%)}
.hero__inner{padding:var(--space-6) 0;max-width:960px}
@media(min-width:900px){.hero__inner{padding:var(--space-7) 0}}
.hero__title{margin:14px 0 0;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.03em;color:#fff}
.hero .lede{color:var(--color-dark-muted);margin-top:var(--space-3)}
.hero__strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin:var(--space-3) 0 0;font-size:.92rem}
.hero__strip-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-label)}
.hero__strip a{color:var(--color-dark-ink);text-decoration:none;border-bottom:1px solid var(--color-dark-line)}
.hero__strip a:hover{color:#fff;border-bottom-color:var(--color-accent-soft)}
.hero__dot{color:var(--color-dark-muted)}
.hero .btnrow{margin-top:var(--space-4)}
.hero__meta{margin:var(--space-3) 0 0;color:var(--color-dark-muted)}

.chipstrip{background:var(--color-dark);color:var(--color-dark-ink);border-top:1px solid var(--color-dark-line)}
.chipstrip__row{display:grid;gap:0}
@media(min-width:760px){.chipstrip__row{grid-template-columns:repeat(4,1fr)}}
.chipstrip__cell{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-top:1px solid var(--color-dark-line)}
@media(min-width:760px){.chipstrip__cell{border-top:0;border-left:1px solid var(--color-dark-line);padding:22px 24px}.chipstrip__cell:first-child{border-left:0;padding-left:0}}
.chipstrip__label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-label)}
.chipstrip__value{font-size:.94rem}

.counters{display:grid;gap:var(--space-4)}
@media(min-width:640px){.counters{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.counters{grid-template-columns:repeat(4,1fr)}}
.counter{border-top:2px solid var(--color-ink);padding-top:18px}
.counter__num{display:block;font-family:var(--font-mono);font-size:clamp(1.9rem,3vw,2.45rem);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counter__label{display:block;margin-top:10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-label)}
.counter__body{margin:10px 0 0;font-size:.9rem;line-height:1.58;color:var(--color-muted)}

/* The card that closes the scenario grid: inked, so the one cell that answers the
   visitor who cannot name the part reads as a different kind of card. */
.card--ink{background:var(--color-dark);border-color:var(--color-dark);color:var(--color-dark-ink);box-shadow:none}
.card--ink .card__title{color:#fff}
.card--ink .card__body{color:var(--color-dark-muted)}
.card--ink .eyebrow{color:var(--color-label)}
.card--ink .text-link{color:var(--color-accent-soft);border-bottom-color:rgba(255,255,255,.3)}

/* Picture beside the numbered process, as the reference's factory band. */
.split{display:grid;gap:var(--space-4)}
@media(min-width:960px){.split{grid-template-columns:1.05fr .95fr;gap:var(--space-5);align-items:start}}
.split__media,.split__pair{display:grid;gap:var(--space-2)}
@media(min-width:560px){.split__pair{grid-template-columns:1fr 1fr}}

/* Numbered list of processes: hairline rows, no boxes. */
.numlist{list-style:none;display:grid;gap:0;margin:0;padding:0}
@media(min-width:560px){.numlist{grid-template-columns:1fr 1fr}}
.numlist li{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--color-line)}
.numlist__num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--color-accent)}
.numlist__label{font-weight:600}
.section--dark .numlist li{border-top-color:var(--color-dark-line)}
.section--dark .numlist__num{color:var(--color-accent-soft)}
.section--dark .numlist__label{color:var(--color-dark-ink)}

/* The form band: the ask beside the form, form on the wider column. */
.quote-grid{display:grid;gap:var(--space-4)}
@media(min-width:900px){.quote-grid{grid-template-columns:1fr 1.08fr;gap:var(--space-5);align-items:start}}

/* The compact action strip before the form. */
.ctastrip{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.ctastrip__text{margin:0;max-width:64ch;font-size:1.05rem;line-height:1.6}
.ctastrip__text .muted{color:var(--color-dark-muted)}

.feature__foot{margin:14px 0 0}