/* ==========================================================================
   Ceilma Vulkan — design tokens
   ========================================================================== */
:root{
  --cream:#f3f1ec;
  --cream-soft:#eae7df;
  --paper:#fbfaf7;
  --ink:#17160f;
  --ink-soft:#4a4940;
  --ink-faint:#6d6b60;
  --accent:#0f9b96;
  --accent-dark:#0a6b67;
  --accent-soft:#cdeeec;
  --accent-deep:#06403e;   /* dark sections */
  --accent-tint:#eafaf8;   /* faint wash */
  /* Turquoise deep enough to carry 10.5px white type at 4.8:1. The brand
     accent itself only reaches 3.4:1 behind white that small. */
  --accent-badge:#0a807b;
  --steel:#6b7280;
  --steel-line:#c7cbd1;
  --rust:#b85c3d;
  --rust-soft:#f1ddd2;
  --line:rgba(23,22,15,.12);
  --line-soft:rgba(23,22,15,.07);
  --shadow-sm:0 8px 24px rgba(23,22,15,.08);
  --shadow-lg:0 24px 70px rgba(23,22,15,.16);
  --radius:18px;
  --radius-sm:10px;
  --ease-signature:cubic-bezier(.17,.84,.44,1);
  --container:1180px;
  --header-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',-apple-system,Segoe UI,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Golos Text','Inter',sans-serif;
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
.mono{font-family:'JetBrains Mono',monospace}

.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:16px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent-dark);display:inline-block}
.section{padding:76px 0}
.section--tight{padding:56px 0}
.section-head{max-width:640px;margin-bottom:38px}
.section-head--wide{max-width:820px}
.section-head h2{font-size:clamp(27px,3.2vw,38px)}
.section-head p{color:var(--ink-soft);font-size:16px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .35s var(--ease-signature),background .3s var(--ease-signature),
             color .3s var(--ease-signature),border-color .3s var(--ease-signature),
             box-shadow .35s var(--ease-signature);
  white-space:nowrap;
}
/* One pass of light across the face on hover — not a loop, so a page full of
   buttons stays calm. */
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.3) 48%,transparent 74%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease-signature);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,107,103,.2)}
.btn:active{transform:translateY(0) scale(.975);box-shadow:none}
.btn svg{transition:transform .35s var(--ease-signature)}
.btn:hover svg{transform:translateX(3px)}
/* The plain text link is not a filled control; it keeps out of all this. */
.btn--text{overflow:visible}
.btn--text::after{display:none}
.btn--text:hover,.btn--text:focus-visible{transform:none;box-shadow:none}
.btn--primary{background:var(--accent-dark);color:#fff}
.btn--primary:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent-dark);background:var(--accent-dark);color:#fff}
.btn--accent{background:var(--accent-dark);color:#fff}
.btn--accent:hover{background:#065e5a}
.btn--sm{padding:10px 18px;font-size:13px}
.btn svg{width:15px;height:15px;flex:none}

/* ==========================================================================
   Blueprint background (sitewide, fixed, low opacity)
   ========================================================================== */
.blueprint-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.05;
  background-image:url('assets/icons/blueprint.svg');
  background-size:1100px;background-repeat:repeat;
  mix-blend-mode:multiply;
}
/* Only the flowing content needs lifting above the blueprint layer. The old
   blanket `body > *` rule out-specified .site-header's position:fixed, so the
   header sat in the flow — pushed down by the preloader — instead of pinning
   to the top, and every fixed overlay was demoted the same way. */
main, footer{position:relative;z-index:1}

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:999;background:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:opacity .7s var(--ease-signature),visibility .7s var(--ease-signature);
}
/* The overlay covers the whole viewport at z-index 999, so it must stop
   intercepting clicks the moment it is dismissed — not whenever the fade
   happens to finish. A transition can stall (a backgrounded tab freezes
   them), and a stalled fade would leave the page unclickable. */
.preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader__mark{width:54px;height:54px;animation:spin 1.4s linear infinite}
.preloader__mark svg{width:100%;height:100%}
.preloader__word{color:var(--cream);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.25em;text-transform:uppercase;opacity:.7}
@keyframes spin{to{transform:rotate(120deg)}}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  padding:15px 0;
  background:transparent;
  transition:padding .4s var(--ease-signature);
}
/* The frosted plate is a pseudo-element rather than the header itself.
   backdrop-filter on the header would make it the containing block for every
   position:fixed descendant, and the mobile menu inside it is exactly that —
   it would then measure the 56px header instead of the viewport, leaving the
   menu items floating over the page and never opening full-screen. */
.site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:transparent;
  transition:background .4s var(--ease-signature),backdrop-filter .4s var(--ease-signature),box-shadow .4s var(--ease-signature);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-header.scrolled{
  padding:9px 0;
}
.site-header.scrolled::before{
  background:rgba(251,250,247,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-family:'Golos Text',sans-serif}

/* ---- Animated mark ------------------------------------------------------
   The diffuser seen from below, with air rippling out along the ceiling. It
   is the only moving thing in the header, so it stays slow and quiet; hover
   picks the pace up, and reduced-motion settles it to a single still ring. */
.brand__mark{width:26px;height:26px;flex:none;display:block}
.brand__mark svg{width:100%;height:100%;overflow:visible;display:block}
.brand__flange{fill:none;stroke:var(--ink);stroke-width:1.5}
.brand__cover{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.55}
.brand__hub{fill:var(--accent-dark)}
.brand__ripple{
  fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:brandRipple 3.4s cubic-bezier(.33,0,.2,1) infinite;
}
.brand__ripple:nth-of-type(2){animation-delay:1.13s}
.brand__ripple:nth-of-type(3){animation-delay:2.26s}
@keyframes brandRipple{
  0%{transform:scale(.62);opacity:0}
  22%{opacity:.9}
  100%{transform:scale(2.05);opacity:0}
}
.brand:hover .brand__ripple{animation-duration:1.9s}
.brand:hover .brand__hub{fill:var(--accent)}
.brand--footer{display:inline-flex;align-items:center;gap:10px}
.brand--footer .brand__flange,.brand--footer .brand__cover{stroke:#fff}
.brand--footer .brand__hub{fill:#7fe3dd}
.brand--footer .brand__ripple{stroke:#7fe3dd}
@media (prefers-reduced-motion:reduce){
  .brand__ripple{animation:none;opacity:.5;transform:scale(1.4)}
  .brand__ripple:nth-of-type(2),.brand__ripple:nth-of-type(3){display:none}
}

.brand__word{font-size:19px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
/* The product name reads as a badge rather than a grey caption — it is the
   thing being sold, and it was disappearing next to the company name. */
.brand__sub{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--accent-badge) 0%,var(--accent-dark) 100%);
  padding:3.5px 8px 3px;border-radius:6px;line-height:1;
  box-shadow:0 1px 0 rgba(6,64,62,.18);
}
.brand:hover .brand__sub{background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent-deep) 100%)}

.nav{display:flex;align-items:center;gap:30px}
.nav-item{
  font-size:14px;color:var(--ink-soft);opacity:.85;
  transition:opacity .3s var(--ease-signature),color .4s var(--ease-signature);
  position:relative;padding:4px 0;
}
.nav-item::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-signature);
}
.nav-item[data-active="true"]{opacity:1;color:var(--ink)}
.nav-item[data-active="true"]::after{transform:scaleX(1)}

.header-actions{display:flex;align-items:center;gap:14px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--ink);position:relative;
  transition:border-color .3s var(--ease-signature),color .4s var(--ease-signature),background .3s var(--ease-signature);
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--cream-soft);border-color:var(--ink-faint)}
.cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--accent-dark);color:#fff;
  font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  font-family:'JetBrains Mono',monospace;
}
.cart-count[data-empty="true"]{display:none}
.nav-toggle{display:none}

@media (max-width:900px){
  .nav{
    position:fixed;inset:0;top:0;background:var(--ink);flex-direction:column;
    justify-content:center;gap:34px;transform:translateY(-100%);
    /* Hidden, not merely moved: a menu parked off-screen with visibility
       intact still takes keyboard focus and is still read out loud. The
       visibility flips only after the slide finishes, so the animation
       stays visible on the way out. */
    visibility:hidden;
    transition:transform .5s var(--ease-signature),visibility 0s .5s;z-index:55;
  }
  .nav.is-open{
    transform:translateY(0);visibility:visible;
    transition:transform .5s var(--ease-signature),visibility 0s;
  }
  .nav-item{color:var(--cream);font-size:26px;opacity:1}
  .nav-item[data-active="true"]{color:#fff}
  .nav-toggle{
    display:flex;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    align-items:center;justify-content:center;background:none;color:var(--ink);z-index:70;
  }
  /* While the full-screen dark menu is open the toggle sits on dark. */
  body.nav-open .nav-toggle{color:var(--cream);border-color:rgba(243,241,236,.4)}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  min-height:100vh;display:flex;align-items:center;
  /* The scroll hint is pinned 32px off the bottom and stands ~40px tall,
     so the content needs a clear band beneath it or the last stat lands
     on top of it once the copy grows. */
  padding:calc(var(--header-h) + 34px) 0 104px;
  background:#fff;
  color:var(--ink);position:relative;overflow:hidden;
}
/* Product is the subject: it sits in the right column, not behind the text. */
.hero__bg{
  position:absolute;top:50%;right:-6%;width:62%;max-width:880px;z-index:0;
  transform:translateY(-50%);pointer-events:none;
  perspective:1200px;perspective-origin:50% 45%;
}
/* An ambient ring rather than a disc: the photograph is keyed with
   mix-blend-mode:multiply, so anything solid behind it would tint the white
   body of the diffuser itself. The ring keeps the colour off the product. */
/* The tilt is driven from script.js: --tx/--ty run -1..1 with the pointer, so
   moving across the hero reads as walking around the diffuser. */
.hero__bg img{
  width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply;
  transform:rotateX(calc(var(--ty,0) * -6deg)) rotateY(calc(var(--tx,0) * 8deg))
            translateZ(0) scale(1.015);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .55s var(--ease-signature);
}
.hero .container{position:relative;z-index:2}
/* One text column; the product owns the right half of the section, so the
   grid must not place anything there. */
.hero__grid{display:block;max-width:52%}
.hero__eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-dark);display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.hero__eyebrow::before{content:'';width:22px;height:1px;background:var(--accent-dark)}
.hero h1{font-size:clamp(36px,4.8vw,60px);color:var(--ink);max-width:14ch}
.line-mask{overflow:hidden;display:block}
/* The series name sits under the statement, quieter than it. */
.line-mask--series .line-mask__inner{font-size:.62em;color:var(--accent-dark);letter-spacing:.01em}

.line-mask__inner{display:block;transform:translateY(112%);transition:transform 1s var(--ease-signature)}
.line-mask.in-view .line-mask__inner{transform:translateY(0)}
.hero p.lead{color:var(--ink-soft);font-size:16.5px;max-width:46ch;margin:18px 0 26px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.hero__stat{padding:0}

.hero__stat b{display:block;font-family:'Golos Text',sans-serif;font-size:26px;color:var(--accent-dark);font-weight:600}
.hero__stat span{font-size:12.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.hero + .section{background:#fff}
.hero__scroll{
  position:absolute;left:32px;bottom:32px;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-faint);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
}
.hero__scroll svg{width:14px;height:20px;animation:bob 1.8s var(--ease-signature) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Hero product: a slow float, as if suspended — replaces the crop-pan that
   only made sense when this was a full-bleed background photo. */
/* The float moved onto the container so the image element is free to carry
   the pointer tilt without the two transforms fighting each other. */
.hero__bg--kenburns{animation:heroFloat 9s ease-in-out infinite alternate}
@keyframes heroFloat{
  from{transform:translateY(-51.4%)}
  to{transform:translateY(-48.2%)}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg--kenburns{animation:none}
  .hero__bg img{transition:none;transform:none}
}

/* USP strip under hero CTA */
.usp-strip{list-style:none;display:flex;flex-wrap:wrap;gap:9px 20px;margin:22px 0 0;padding:0}
.usp-strip li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace}
.usp-strip svg{width:16px;height:16px;color:var(--accent);flex:none}
@media (max-width:900px){.usp-strip{gap:10px 18px}}

@media (max-width:900px){
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 28px)}
  .hero__grid{max-width:100%}
  .hero__stats{gap:28px}
  .hero__scroll{display:none}
  /* Product moves from a side column to a block above the copy. */
  .hero{flex-direction:column;justify-content:flex-start;padding-bottom:64px}
  /* Height-capped, not width-capped: what matters on a phone is how much of
     the first screen is left for the headline and the buy button. */
  .hero__bg{
    position:relative;top:auto;right:auto;transform:none;
    width:auto;max-width:none;margin:0 auto 4px;
    height:29vh;max-height:250px;
  }
  .hero__bg img{height:100%;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
  .hero__bg--kenburns{animation:none}
  .hero h1{font-size:clamp(30px,8.2vw,40px)}
  .hero p.lead{font-size:15px;margin:14px 0 20px}
  .hero__stats{margin-top:20px;padding-top:16px;gap:24px}
}

/* ==========================================================================
   Marquee strip (countries served)
   ========================================================================== */
.marquee{background:var(--accent-deep);color:#eafaf8;overflow:hidden;padding:14px 0}
.marquee__track{display:flex;gap:48px;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.marquee__track span{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#c8c6ba;display:flex;align-items:center;gap:12px}
.marquee__track span::after{content:'●';font-size:6px;color:var(--accent);margin-left:36px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Product lines
   ========================================================================== */
.lines-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.line-card{
  display:flex;flex-direction:column;
  border-radius:var(--radius);overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-signature),box-shadow .5s var(--ease-signature);
}
.line-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.line-card__stage{
  position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.line-card__stage img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-signature);
}
/* A product shot keyed on white is shown whole; a room photograph fills the
   frame. Marking it in the markup beats guessing from the file name. */
.line-card__stage--product img{object-fit:contain;padding:6% 6% 4%}
.line-card:hover .line-card__stage img{transform:scale(1.04)}
.line-card__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.line-card__tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;display:block;
}
.line-card__body h3{font-size:24px;color:var(--ink);margin-bottom:8px}
.line-card__body p{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px}
.line-card__link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent-dark);margin-top:auto}
.line-card__link svg{width:14px;height:14px;transition:transform .4s var(--ease-signature)}
.line-card:hover .line-card__link svg{transform:translateX(5px)}
.line-card__drawing{position:absolute;inset:0;background:var(--paper)}
.line-card__drawing svg{width:100%;height:100%;transition:transform 1.1s var(--ease-signature)}
.line-card:hover .line-card__drawing svg{transform:scale(1.045)}
@media (max-width:820px){.lines-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Build — product showcase beside its spec lines
   ========================================================================== */
.compare-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center}
.build-shot{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;
}
.build-shot img{width:88%;height:auto;transition:transform 1.1s var(--ease-signature)}
.build-shot:hover img{transform:scale(1.04)}
.build-shot__tag{
  position:absolute;left:20px;bottom:20px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.compare-copy{display:flex;flex-direction:column;gap:22px}
.spec-line{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.spec-line:last-child{border-bottom:1px solid var(--line)}
.spec-line svg{width:20px;height:20px;flex:none;color:var(--accent)}
.spec-line b{display:block;font-size:15.5px;margin-bottom:3px}
.spec-line span{color:var(--ink-soft);font-size:14.5px}

@media (max-width:900px){.compare-wrap{grid-template-columns:1fr;gap:36px}}

/* ==========================================================================
   How it works — sticky image swap (Ponder pattern) + damper toggle
   ========================================================================== */
.sticky-feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.sticky-feature__media{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;height:calc(100vh - var(--header-h) - 90px);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.sticky-feature__media-item{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s var(--ease-signature);}
.sticky-feature__media-item img,.sticky-feature__media-item video{width:100%;height:100%;object-fit:contain;padding:24px}
.sticky-feature__media-item.is-active{opacity:1;pointer-events:auto}
[data-lightbox]{cursor:zoom-in}
.sticky-feature__media-tag{position:absolute;left:22px;bottom:22px;z-index:3;color:var(--cream);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(23,22,15,.78);padding:8px 14px;border-radius:999px}
.feature-steps{display:flex;flex-direction:column;gap:0}
.feature-step{padding:38px 0;border-top:1px solid var(--line)}
.feature-step:last-child{border-bottom:1px solid var(--line)}
.feature-step__num{font-family:'JetBrains Mono',monospace;color:var(--accent);font-size:13px;margin-bottom:14px;display:block}
.feature-step h3{font-size:21px;margin-bottom:10px}
.feature-step p{color:var(--ink-soft);font-size:15.5px;max-width:44ch}
.feature-step[data-active="true"] h3{color:var(--accent-dark)}
.feature-step[data-active="true"]{border-top-color:var(--accent)}

@media (max-width:900px){
  .sticky-feature{grid-template-columns:1fr;gap:28px}
  .sticky-feature__media{position:relative;top:0;height:340px}
}

/* ==========================================================================
   Coandă effect animated diagram
   ========================================================================== */
.coanda{background:var(--accent-deep);color:var(--cream);border-radius:var(--radius);padding:44px;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;overflow:hidden}

/* The linear airflow block is light: its visualisation is a bright photograph,
   which would read as a lit panel dropped into the dark Coandă block. */
.airflow{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;overflow:hidden;
}
.airflow__viz{margin:0;border-radius:14px;overflow:hidden;background:#fff}
.airflow__viz img{display:block;width:100%;height:auto;
  transition:transform 1.2s var(--ease-signature)}
.airflow:hover .airflow__viz img{transform:scale(1.035)}
.airflow__copy h2{font-size:32px;margin-bottom:14px}
.airflow__copy p{color:var(--ink-soft)}
@media (max-width:860px){
  .airflow{grid-template-columns:1fr;padding:20px;gap:22px}
  .airflow__viz{order:1}
  .airflow__copy{order:2}
  .airflow__copy h2{font-size:25px}
}
.coanda__copy .eyebrow{color:#cfd9df}
.coanda__copy .eyebrow::before{background:#cfd9df}
.coanda__copy h2{color:#fff;font-size:32px}
.coanda__copy p{color:#c8c6ba}
.coanda__viz{position:relative}
.coanda__viz svg{width:100%;height:auto}
.coanda__canvas{
  width:100%;height:auto;aspect-ratio:920/520;display:block;
  border-radius:var(--radius-sm);background:#1c1c16;
}
@media (max-width:900px){
  .coanda{grid-template-columns:1fr;padding:34px 22px}
  /* Squarer on phones so the ceiling jet and the drop-off both stay readable. */
  .coanda__canvas{aspect-ratio:920/620}
}

/* ==========================================================================
   Specifications & drawings
   ========================================================================== */
.spec-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.spec-tab{
  padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:all .3s var(--ease-signature);
}
.spec-tab[aria-pressed="true"]{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.spec-panel{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.spec-drawing svg{width:100%;height:auto}
.spec-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.spec-facts li{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:14px}
.spec-facts li:last-child{border-bottom:1px solid var(--line)}
.spec-facts b{color:var(--ink-soft);font-weight:500}
.spec-facts span{font-family:'JetBrains Mono',monospace;color:var(--ink)}
.spec-facts li[data-spec-fact]{display:none}
.spec-facts li[data-spec-fact].is-shown{display:flex}
@media (max-width:820px){.spec-panel{grid-template-columns:1fr;padding:26px}}

/* ==========================================================================
   Shop / product cards
   ========================================================================== */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card{
  background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .5s var(--ease-signature),box-shadow .5s var(--ease-signature);
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.product-card__media{aspect-ratio:1/1;overflow:hidden;background:#fff;position:relative;
  display:flex;align-items:center;justify-content:center}
/* Sizing the image to its own aspect instead of the square tile means the
   rounded corners land on the photograph itself. A portrait shot used to
   letterbox and show four sharp corners inside a rounded card. */
.product-card__media img{width:auto;height:100%;max-width:100%;object-fit:contain;
  border-radius:14px;transition:transform 1.1s var(--ease-signature)}
.product-card:hover .product-card__media img{transform:scale(1.06)}
.product-card__media--drawing{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:12px}
.product-card__media--drawing svg{width:100%;height:100%;transition:transform 1.1s var(--ease-signature)}
.product-card:hover .product-card__media--drawing svg{transform:scale(1.045)}
.product-card__badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--accent-dark);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;padding:6px 10px;border-radius:999px}
.product-card__body{padding:22px;display:flex;flex-direction:column;gap:4px;flex:1}
.product-card__name{font-family:'Golos Text',sans-serif;font-weight:600;font-size:17.5px}
.product-card__meta{font-size:13px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;margin-bottom:14px}
.product-card__price{font-size:17px;font-weight:600;color:var(--accent-dark);margin-top:auto;margin-bottom:14px}
.product-card__price small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.product-card__add{
  width:100%;padding:12px;border-radius:999px;border:1px solid var(--accent-dark);color:var(--accent-dark);background:transparent;
  font-size:13.5px;font-weight:600;transition:background .3s var(--ease-signature),color .3s var(--ease-signature);
}
.product-card__add:hover{background:var(--accent-dark);color:#fff}
.product-card__add[data-added="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:1080px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shop-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Why grid
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.why-card{background:var(--paper);padding:26px 22px}
.why-card svg{width:26px;height:26px;color:var(--accent);margin-bottom:16px}
.why-card h3{font-size:17px;margin-bottom:8px}
.why-card p{font-size:14px;color:var(--ink-soft);margin:0}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}



/* Alternating sections take the brand tint rather than another cream: the page
   had five shades of warm grey and nothing to break the run. */
.section--tint{background:var(--accent-tint)}
.section--tint .section-head h2{color:var(--accent-deep)}
.hero__stat b{color:var(--accent-dark)}
.marquee{background:var(--accent-deep);color:#eafaf8}
.usp-strip li svg{color:var(--accent)}
.why-card__icon{background:var(--accent-tint);color:var(--accent-dark)}
.faq-item__q:hover{color:var(--accent-dark)}
.spec-tab[aria-pressed="true"]{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.detail-gallery--sequence figcaption .mono{color:var(--accent)}
.product-card__badge{background:linear-gradient(135deg,var(--accent-badge) 0%,var(--accent-dark) 100%)}


/* Reassurance where the buying happens, not buried in the FAQ. */
.trust-strip{
  list-style:none;margin:26px 0 0;padding:22px 24px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.trust-strip li{display:flex;flex-direction:column;gap:3px}
.trust-strip svg{width:22px;height:22px;color:var(--accent-dark);margin-bottom:5px}
.trust-strip b{font-size:14px;font-weight:600}
.trust-strip span{font-size:12px;color:var(--ink-faint);line-height:1.45}
@media (max-width:900px){.trust-strip{grid-template-columns:repeat(2,1fr);gap:18px;padding:18px}}
@media (max-width:460px){.trust-strip{grid-template-columns:1fr}}


/* ---- Everything else that gets clicked --------------------------------- */
.icon-btn{transition:transform .3s var(--ease-signature),background .25s var(--ease-signature),
          border-color .25s var(--ease-signature),color .25s var(--ease-signature)}
.icon-btn:hover{transform:translateY(-1px) scale(1.06)}
.icon-btn:active{transform:scale(.93)}

.product-card__add{transition:background .25s var(--ease-signature),color .25s var(--ease-signature),
                   border-color .25s var(--ease-signature),transform .3s var(--ease-signature)}
.product-card--pick:hover .product-card__add{transform:translateY(-2px)}

.spec-tab{transition:background .25s var(--ease-signature),border-color .25s var(--ease-signature),
          color .25s var(--ease-signature),transform .25s var(--ease-signature)}
.spec-tab:hover{transform:translateY(-1px)}
.spec-tab:active{transform:translateY(0) scale(.97)}

.qty button:active{transform:scale(.88)}
.cart-line__remove{transition:color .2s var(--ease-signature),opacity .2s var(--ease-signature)}
.cart-line__remove:hover{opacity:.7}

.faq-item__q svg{transition:transform .35s var(--ease-signature)}
.faq-item.is-open .faq-item__q svg{transform:rotate(135deg)}

/* The basket pops when something lands in it — the one bit of feedback a
   shop genuinely needs. */
@keyframes fabPop{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
.cart-fab.is-bumped{animation:fabPop .5s var(--ease-signature)}
.cart-fab{transition:transform .3s var(--ease-signature),box-shadow .3s var(--ease-signature)}
.cart-fab:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  .btn::after{display:none}
  .btn:hover,.btn:focus-visible,.icon-btn:hover,.spec-tab:hover,.cart-fab:hover{transform:none}
  .btn:hover svg{transform:none}
  .cart-fab.is-bumped{animation:none}
}


/* The `hidden` attribute only carries UA-level `display:none`, which any author
   rule with `display:flex` silently outranks. Everything toggled with `hidden`
   in this file also sets a display, so without this the checkout form never
   closed and the payment panel showed before any order had been placed. */
[hidden]{display:none !important}

/* ---- Payment panel ------------------------------------------------------
   Reads like a payment slip: the reference and the account are the two things
   the customer has to carry to their bank, so both are mono and selectable. */
.order-done{
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  background:var(--accent-tint);padding:20px 18px;display:flex;flex-direction:column;gap:12px;
}
.order-done__head{display:flex;align-items:center;gap:10px}
.order-done__tick{
  width:26px;height:26px;border-radius:50%;background:var(--accent-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.order-done__tick svg{width:15px;height:15px}
.order-done__head h4{font-size:15.5px;margin:0;color:var(--accent-deep)}
.order-done__lead{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0}
.order-done__pay{margin:0;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--accent-soft);border-radius:10px;background:#fff;overflow:hidden}
.order-done__pay > div{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px 12px;border-bottom:1px solid var(--accent-tint);
}
.order-done__pay > div:last-child{border-bottom:none}
.order-done__pay dt{font-size:11.5px;color:var(--ink-faint);flex:none}
.order-done__pay dd{margin:0;font-size:13.5px;text-align:right;color:var(--ink)}
.order-done__pay dd b{font-size:14.5px;color:var(--accent-deep)}
.order-done__pay .mono{user-select:all}
.order-done__iban{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.order-done__copy{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--accent);background:#fff;color:var(--accent-dark);
  transition:background .2s var(--ease-signature),color .2s var(--ease-signature);
}
.order-done__copy:hover{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.order-done__note{font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin:0}
@media (max-width:400px){
  .order-done__pay > div{flex-direction:column;align-items:flex-start;gap:2px}
  .order-done__pay dd{text-align:left}
  .order-done__iban{justify-content:flex-start}
}

/* ==========================================================================
   Checkout — delivery and payment, inside the cart drawer
   ========================================================================== */
.checkout{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.checkout__group{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 14px 16px;margin:0;display:flex;flex-direction:column;gap:10px;
}
.checkout__group legend{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-dark);padding:0 6px;
}
.checkout label{display:flex;flex-direction:column;gap:5px;font-size:13px}
.checkout label > span{color:var(--ink-soft);font-size:12px}
.checkout input[type="text"],.checkout input[type="email"],.checkout input[type="tel"],
.checkout select,.checkout textarea{
  font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;
  transition:border-color .2s var(--ease-signature),box-shadow .2s var(--ease-signature);
}
.checkout input:focus,.checkout select:focus,.checkout textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);
}
.checkout input:user-invalid{border-color:#b4462f}
.checkout textarea{resize:vertical;min-height:56px}
.checkout__row--split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checkout__company{display:flex;flex-direction:column;gap:10px}

/* radios read as choices, not as form furniture */
.checkout__radio{flex-direction:row !important;align-items:center;gap:9px;cursor:pointer;font-size:13.5px}
.checkout__radio input{accent-color:var(--accent-dark);width:17px;height:17px;flex:none}
.checkout__radio--block{
  align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  transition:border-color .2s var(--ease-signature),background .2s var(--ease-signature);
}
.checkout__radio--block:hover{border-color:var(--accent-soft);background:var(--accent-tint)}
.checkout__radio--block:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.checkout__radio--block span{display:flex;flex-direction:column;gap:2px}
.checkout__radio--block b{font-size:13.5px;font-weight:600}
.checkout__radio--block small{color:var(--ink-faint);font-size:11.5px;line-height:1.45}
.checkout__hint{color:var(--ink-faint);font-size:11.5px;line-height:1.5}
.checkout__consent{flex-direction:row !important;align-items:flex-start;gap:9px;font-size:12px;
  color:var(--ink-soft);cursor:pointer}
.checkout__consent input{accent-color:var(--accent-dark);width:16px;height:16px;flex:none;margin-top:1px}
.btn--text{
  background:none;border:none;color:var(--ink-faint);font-size:12.5px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px;
}
.btn--text:hover{color:var(--accent-dark)}
@media (max-width:420px){.checkout__row--split{grid-template-columns:1fr}}

/* ==========================================================================
   Detail gallery — broken grid + hotspots
   ========================================================================== */
.detail-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.detail-gallery figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);background:#fff}
.detail-gallery img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease-signature)}
.detail-gallery figure:hover img{transform:scale(1.05)}
.detail-gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(0deg,rgba(23,22,15,.75),transparent);color:#fff;font-size:12.5px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.03em;opacity:0;transition:opacity .4s var(--ease-signature);
}
.detail-gallery figure:hover figcaption{opacity:1}
/* Broken grid across 9 tiles: two wide, a band of three, two wide, two wide.
   Every tile is explicitly placed so none falls back to a narrow span. */
.detail-gallery figure:nth-child(1){grid-column:span 3;grid-row:span 2}
.detail-gallery figure:nth-child(2){grid-column:span 3}
.detail-gallery figure:nth-child(3){grid-column:span 3}
.detail-gallery figure:nth-child(4){grid-column:span 2;margin-top:24px}
.detail-gallery figure:nth-child(5){grid-column:span 2;margin-top:24px}
.detail-gallery figure:nth-child(6){grid-column:span 2;margin-top:24px}
.detail-gallery figure:nth-child(7){grid-column:span 3}
.detail-gallery figure:nth-child(8){grid-column:span 3}
.detail-gallery figure:nth-child(9){grid-column:span 6;aspect-ratio:21/9}
@media (max-width:900px){
  .detail-gallery{grid-template-columns:repeat(2,1fr)}
  .detail-gallery figure{grid-column:span 1 !important;margin-top:0 !important;grid-row:auto !important}
}

/* Hotspot diagram */
.hotspot-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.hotspot-wrap img{width:100%}
.hotspot-wrap__tag{position:absolute;right:16px;bottom:16px;z-index:3;background:rgba(23,22,15,.6);color:var(--cream);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.hotspot{
  position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(23,22,15,.85);
  color:#fff;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
  font-size:12px;transform:translate(-50%,-50%);cursor:pointer;border:2px solid var(--cream);
  transition:background .3s var(--ease-signature);
}
.hotspot::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(23,22,15,.35);
  animation:pulse 2.4s var(--ease-signature) infinite;
}
.hotspot:hover,.hotspot.is-open{background:var(--accent)}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.hotspot-tip{
  position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
  width:220px;background:var(--ink);color:var(--cream);padding:14px 16px;border-radius:12px;
  font-size:13px;line-height:1.4;opacity:0;pointer-events:none;transition:all .3s var(--ease-signature);
  box-shadow:var(--shadow-lg);z-index:5;
}
.hotspot-tip b{display:block;margin-bottom:4px;font-family:'Golos Text',sans-serif;font-size:14px}
.hotspot.is-open .hotspot-tip{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
@media (max-width:640px){.hotspot-tip{width:170px;font-size:12px}}

/* ==========================================================================
   Dealers / B2B
   ========================================================================== */
.dealers{background:var(--accent-deep);color:var(--cream);border-radius:var(--radius);padding:48px 44px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.dealers .eyebrow{color:#cfd9df}
.dealers .eyebrow::before{background:#cfd9df}
.dealers h2{color:#fff;font-size:34px}
.dealers p{color:#c8c6ba;font-size:16px}
.dealers__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(243,241,236,.14)}
.dealers__stat{padding:26px;background:var(--ink)}
.dealers__stat b{display:block;font-family:'Golos Text',sans-serif;font-size:32px;color:#fff}
.dealers__stat span{font-size:12px;color:#a8a698;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.dealers__actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
@media (max-width:900px){.dealers{grid-template-columns:1fr;padding:40px 28px}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:820px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 0;background:none;border:none;text-align:left;font-size:16px;font-weight:600;color:var(--ink);
  font-family:'Golos Text',sans-serif;
}
.faq-item__q svg{width:18px;height:18px;flex:none;transition:transform .4s var(--ease-signature);color:var(--accent)}
.faq-item[data-open="true"] .faq-item__q svg{transform:rotate(135deg)}
.faq-item[data-open="true"] .faq-item__q{color:var(--accent-dark)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-signature)}
.faq-item__a p{color:var(--ink-soft);padding-bottom:24px;max-width:60ch;font-size:15px}

/* ==========================================================================
   Contact / footer
   ========================================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-card{background:var(--paper);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}
.contact-card__icon{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-dark)}
.contact-card__icon svg{width:20px;height:20px}
.contact-card h3{font-size:19px}
.contact-card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:4px}
.contact-card a.value{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink);display:inline-block;margin-top:2px}
.contact-card a.value:hover{color:var(--accent-dark)}

footer{background:var(--accent-deep);color:#9dc4c1;padding:46px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(243,241,236,.12)}
.footer-brand .brand__word{color:#fff}
.footer-brand .brand__sub{background:var(--accent-badge);box-shadow:none}
.footer-brand p{font-size:14px;color:#a8a698;margin-top:14px;max-width:32ch}
.footer-col h4{color:#e6e4da;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:16px}
.footer-col a,.footer-col span{display:block;font-size:14px;color:#a8a698;margin-bottom:10px}
.footer-col a:hover{color:#fff}
.footer-legal{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#b9b7ab}  /* 3.8:1 was below AA on the dark footer */
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.contact{grid-template-columns:1fr}}

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.overlay{position:fixed;inset:0;background:rgba(23,22,15,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-signature);backdrop-filter:blur(2px)}
.overlay.is-open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--cream);z-index:90;
  display:flex;flex-direction:column;transform:translateX(100%);
  /* Same reason as the mobile menu: off-screen is not hidden as far as the
     keyboard and screen readers are concerned. */
  visibility:hidden;
  transition:transform .5s var(--ease-signature),visibility 0s .5s;
  box-shadow:-20px 0 60px rgba(0,0,0,.2);
}
.cart-drawer.is-open{
  transform:translateX(0);visibility:visible;
  transition:transform .5s var(--ease-signature),visibility 0s;
}
body.cart-open{overflow:hidden}
.cart-drawer__head{display:flex;justify-content:space-between;align-items:center;padding:26px 28px;border-bottom:1px solid var(--line)}
.cart-drawer__head h3{font-size:19px;margin:0}
.cart-drawer__items{
  flex:1 1 auto;min-height:150px;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 28px;
}
/* With the checkout form open the list gives way, but never disappears —
   the customer needs to see what they are paying for while they type. */
.cart-drawer.is-checkout .cart-drawer__items{min-height:96px;max-height:26vh}
.cart-line{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.cart-line img{width:64px;height:64px;object-fit:cover;border-radius:10px;background:#fff}
.cart-line__body{flex:1;display:flex;flex-direction:column;gap:4px}
.cart-line__body b{font-size:14.5px}
.cart-line__body span{font-size:12.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace}
.cart-line__row{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.qty{display:flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:999px;background:#fff;padding:2px}
.qty button{
  width:30px;height:30px;border-radius:50%;border:none;background:transparent;
  font-size:17px;line-height:1;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease-signature),color .2s var(--ease-signature);
}
.qty button:hover{background:var(--accent-tint);color:var(--accent-dark)}
.qty .mono{min-width:22px;text-align:center;font-size:14px;font-weight:600}
/* 4.01:1 on the drawer background was under AA; --rust stays as the brand
   tint elsewhere, this one link gets a darker shade. */
.cart-line__remove{font-size:12.5px;color:#a34e31;text-decoration:underline;background:none;border:none;padding:8px 2px}
.cart-empty{padding:60px 0;text-align:center;color:var(--ink-faint)}
.cart-drawer__foot{
  padding:24px 28px 30px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
  flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;
}
.cart-drawer__total{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.cart-drawer__total small{font-weight:400;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;font-size:11.5px;display:block;margin-top:2px}
.cart-drawer__note{font-size:12px;color:var(--ink-faint)}

/* ==========================================================================
   Sticky buy bar
   ========================================================================== */
.buy-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -12px 30px rgba(23,22,15,.08);
  transform:translateY(110%);transition:transform .5s var(--ease-signature);
}
.buy-bar.is-visible{transform:translateY(0)}
.buy-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 32px}
.buy-bar__id{display:flex;align-items:center;gap:12px}
.buy-bar__id img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.buy-bar__id b{display:block;font-size:14px;font-family:'Golos Text',sans-serif}
.buy-bar__id span{font-size:12px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace}
.buy-bar__actions{display:flex;gap:10px}
@media (max-width:640px){.buy-bar__id span{display:none};.buy-bar__inner{padding:12px 20px}}

/* ==========================================================================
   Lightbox — zoom + swipe viewer
   ========================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:110;background:rgba(15,14,10,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease-signature),visibility .4s var(--ease-signature);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{width:min(1100px,88vw);height:min(78vh,900px);overflow:hidden;position:relative;cursor:zoom-in;touch-action:none}
.lightbox__stage.is-zoomed{cursor:grab}
.lightbox__stage.is-dragging{cursor:grabbing}
.lightbox__stage img{
  width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;
  transform:translate(var(--lb-x,0),var(--lb-y,0)) scale(var(--lb-scale,1));
  transition:transform .35s var(--ease-signature);
  will-change:transform;
}
.lightbox__stage.is-dragging img{transition:none}
.lightbox__close,.lightbox__nav{
  position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(243,241,236,.1);
  border:1px solid rgba(243,241,236,.25);color:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease-signature);z-index:2;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(243,241,236,.2)}
.lightbox__close svg,.lightbox__nav svg{width:18px;height:18px}
.lightbox__close{top:28px;right:28px}
.lightbox__nav--prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox__hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#a8a698;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){
  .lightbox__stage{width:94vw;height:70vh}
  .lightbox__nav{width:40px;height:40px}
  .lightbox__close{top:16px;right:16px}
  .lightbox__hint{display:none}
}

/* ==========================================================================
   Scroll reveal utility
   ========================================================================== */


/* ---- Scroll ruler (design-references pattern 10) -----------------------
   A measurement scale rather than a bar: ticks brighten and lengthen around
   the reader's position. Wide viewports only — on a phone it would sit on
   top of the content. */
.scroll-ruler{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:7px;pointer-events:none;
}
@media (min-width:1100px){.scroll-ruler{display:flex}}
.scroll-ruler i{
  display:block;height:1px;width:9px;margin-left:auto;background:var(--ink-faint);
  opacity:.28;transform-origin:100% 50%;
  transition:width .3s var(--ease-signature),opacity .3s var(--ease-signature),
             background .3s var(--ease-signature);
}
.scroll-ruler i[data-near="1"]{width:20px;opacity:.85;background:var(--accent)}
.scroll-ruler i[data-near="2"]{width:15px;opacity:.55;background:var(--accent)}
.scroll-ruler i[data-major="true"]{width:14px;opacity:.45}
.scroll-ruler i[data-major="true"][data-near="1"]{width:26px;opacity:1}
@media (min-width:1100px){.scroll-progress{opacity:0}}

/* ---- Catalogue dropdown (design-references pattern 1) ------------------ */
.nav-catalog{position:relative;display:flex;align-items:center}
.catalog-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-8px);
  width:340px;padding:10px;border-radius:14px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease-signature),transform .28s var(--ease-signature),
             visibility .28s var(--ease-signature);
}
/* a hover bridge, so the pointer can cross the gap without the panel closing */
.nav-catalog::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px}
.nav-catalog:hover .catalog-panel,
.nav-catalog:focus-within .catalog-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.catalog-item{
  display:flex;align-items:center;gap:12px;padding:9px;border-radius:10px;
  transition:background .22s var(--ease-signature);
}
.catalog-item:hover{background:var(--accent-tint)}
.catalog-item img{
  width:56px;height:44px;object-fit:cover;border-radius:8px;background:#fff;flex:none;
}
.catalog-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.catalog-item b{font-size:14px;color:var(--ink);font-weight:600}
.catalog-item small{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-faint);
  letter-spacing:.04em;
}
@media (max-width:900px){.catalog-panel{display:none}}
@media (prefers-reduced-motion:reduce){
  .scroll-ruler i{transition:none}
  .catalog-panel{transition:none}
}



/* ==========================================================================
   Motion
   ========================================================================== */

/* A hairline that fills as the page scrolls. */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;z-index:120;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-dark) 100%);
  pointer-events:none;
}

/* The drawings arrive the way they were made: strokes first, then the
   dimensions and notes that annotate them. */
.drawing svg .is-drawn{
  stroke-dashoffset:var(--dash,0);
  transition:stroke-dashoffset 1.5s var(--ease-signature);
}
.drawing.is-drawing svg .is-drawn{stroke-dashoffset:0}
.drawing svg .is-faded{opacity:0;transition:opacity .6s var(--ease-signature)}
.drawing.is-drawing svg .is-faded{opacity:1}

/* Tiles land one after another rather than in a slab. */
.reveal-stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-signature),transform .7s var(--ease-signature);
}
.reveal-stagger.in-view > *{
  opacity:1;transform:translateY(0);
  transition-delay:calc(var(--i,0) * 85ms);
}

/* Photographs drift a little slower than the page they sit on. */
.parallax{will-change:transform}
.parallax > img{transition:none}

/* The rule before an eyebrow draws itself as the section arrives. Scoped to
   revealed containers only: an eyebrow with no reveal ancestor would
   otherwise keep a zero-width rule for good. */
.reveal .eyebrow::before{width:0;transition:width .7s var(--ease-signature) .15s}
.reveal.in-view .eyebrow::before{width:22px}

@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .drawing svg .is-drawn{transition:none;stroke-dashoffset:0}
  .drawing svg .is-faded{transition:none;opacity:1}
  .reveal-stagger > *{opacity:1;transform:none;transition:none}
  .parallax{transform:none !important}
  .reveal .eyebrow::before{width:22px;transition:none}
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-signature),transform .8s var(--ease-signature)}
.reveal.in-view{opacity:1;transform:translateY(0)}

@media (max-width:640px){
  .section{padding:80px 0}
  .container{padding:0 20px}
  .why-grid{border-radius:var(--radius-sm)}
}

/* ==========================================================================
   Size picker — one Vulkan, three sizes behind a click
   ========================================================================== */
.shop-grid--two{grid-template-columns:repeat(2,1fr);max-width:840px}
.product-card--pick{
  border:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--paper);
}
.product-card__hint{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;text-align:center;
  background:linear-gradient(0deg,rgba(23,22,15,.72),transparent);
  color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transition:opacity .4s var(--ease-signature);
}
.product-card--pick:hover .product-card__hint,
.product-card--pick:focus-visible .product-card__hint{opacity:1}
.product-card--pick .product-card__add{
  display:block;text-align:center;padding:12px;border-radius:999px;
  border:1px solid var(--ink);
}
.product-card--pick:hover .product-card__add{background:var(--ink);color:var(--cream)}

.picker{
  position:fixed;inset:0;z-index:120;background:rgba(23,22,15,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease-signature),visibility .35s var(--ease-signature);
}
.picker.is-open{opacity:1;visibility:visible}
.picker__panel{
  position:relative;width:min(620px,100%);max-height:90vh;overflow-y:auto;
  background:var(--paper);border-radius:var(--radius);padding:34px;
  box-shadow:var(--shadow-lg);transform:translateY(14px);
  transition:transform .35s var(--ease-signature);
}
.picker.is-open .picker__panel{transform:translateY(0)}
.picker__close{position:absolute;top:18px;right:18px}
.picker__head{display:flex;gap:20px;align-items:flex-start;margin-bottom:26px;padding-right:44px}
.picker__head img{width:112px;height:112px;object-fit:contain;background:#fff;border-radius:var(--radius-sm);flex:none}
.picker__head h3{font-size:22px;margin:0 0 6px}
.picker__head p{color:var(--ink-soft);font-size:14px;margin:0}
.picker__list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:0}
.picker__list li{
  display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;
  padding:18px 0;border-top:1px solid var(--line);
}
.picker__list li:last-child{border-bottom:1px solid var(--line)}
.picker__id b{display:block;font-family:'Golos Text',sans-serif;font-size:16.5px}
.picker__id span{font-size:12.5px;color:var(--ink-faint)}
.picker__use{grid-column:1;font-size:13px;color:var(--ink-soft)}
.picker__list .btn{grid-column:2;grid-row:1 / span 2}
.picker__ask{font-size:13.5px;color:var(--accent-dark);text-decoration:underline}
@media (max-width:820px){
  .shop-grid--two{grid-template-columns:1fr}
  .picker__panel{padding:24px}
  .picker__head{flex-direction:column;gap:14px;padding-right:36px}
  .picker__head img{width:88px;height:88px}
}

/* ==========================================================================
   Assembly gallery — a numbered sequence, so it reads as an even grid
   rather than the staggered layout used for a free-form set. Captions stay
   visible: in a sequence the step label is content, not a hover flourish.
   ========================================================================== */
.detail-gallery--sequence{grid-template-columns:repeat(3,1fr);gap:22px}
.detail-gallery--sequence figure{
  grid-column:span 1 !important;grid-row:auto !important;margin-top:0 !important;
  display:flex;flex-direction:column;background:#fff;
}
.detail-gallery--sequence figure img{aspect-ratio:1/1;height:auto;width:100%}
.detail-gallery--sequence figcaption{
  position:static;opacity:1;background:none;color:var(--ink);
  display:flex;align-items:baseline;gap:10px;
  padding:14px 16px 16px;font-family:'Golos Text',sans-serif;font-size:14.5px;
  border-top:1px solid var(--line-soft);
}
.detail-gallery--sequence figcaption .mono{
  color:var(--accent-dark);font-size:11.5px;letter-spacing:.08em;flex:none;
}
@media (max-width:900px){
  .detail-gallery--sequence{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .detail-gallery--sequence{grid-template-columns:1fr}
}

/* price + note inside the length picker */
.picker__list li{grid-template-columns:1fr auto auto;gap:6px 14px}
.picker__price{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--accent-dark);font-weight:600;white-space:nowrap}
.picker__list .btn{grid-column:3;grid-row:1 / span 2}
.picker__note{font-size:12.5px;color:var(--ink-faint);margin:0 0 14px}
@media (max-width:560px){
  .picker__list li{grid-template-columns:1fr auto}
  .picker__price{grid-column:2;grid-row:1}
  .picker__list .btn{grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:6px}
}

/* group headings inside the assembly section */
.gallery-label{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;
  margin:0 0 16px;display:flex;align-items:center;gap:12px;
}
.gallery-label::after{content:'';flex:1;height:1px;background:var(--line)}
.gallery-label + .detail-gallery{margin-bottom:38px}
.detail-gallery--four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .detail-gallery--four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .detail-gallery--four{grid-template-columns:1fr}
}

/* trade pricing request */
.trade-form{margin-top:24px;display:flex;flex-direction:column;gap:12px;max-width:520px}
.trade-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade-form label{display:flex;flex-direction:column;gap:5px}
.trade-form span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#a8a698}
.trade-form input{
  background:rgba(243,241,236,.07);border:1px solid rgba(243,241,236,.2);border-radius:10px;
  padding:11px 13px;color:var(--cream);font:inherit;font-size:14px;
}
.trade-form input::placeholder{color:rgba(243,241,236,.35)}
.trade-form input:focus{outline:2px solid var(--accent-soft);outline-offset:1px;border-color:transparent}
.trade-form input:invalid:not(:placeholder-shown){border-color:var(--rust)}
.trade-form .btn{align-self:flex-start;margin-top:4px}
.trade-form__note{font-size:11.5px;color:#8f8d82;margin:0}
@media (max-width:560px){.trade-form__row{grid-template-columns:1fr}}

/* ==========================================================================
   Turquoise accents — the colour carries the brand, so it appears on the
   section eyebrows, the active nav, the sequence numerals and the tinted
   panels rather than only on buttons.
   ========================================================================== */
.eyebrow{color:var(--accent-dark)}
.eyebrow::before{background:var(--accent)}
.nav-item[data-active="true"]{color:var(--accent-dark)}
.nav-item[data-active="true"]::after{background:var(--accent)}
.icon-btn:hover{background:var(--accent-tint);border-color:var(--accent)}
/* the product name is a filled badge now, so it carries its own colour */
.hero__eyebrow{color:var(--accent-dark)}
.hero__eyebrow::before{background:var(--accent)}
.usp-strip svg{color:var(--accent)}
.spec-line svg{color:var(--accent)}
.feature-step__num{color:var(--accent-dark)}
.gallery-label::after{background:linear-gradient(90deg,var(--accent),transparent)}
.build-shot__tag{color:var(--accent-dark)}
.sticky-feature__media-tag{background:rgba(10,107,103,.82)}
.hotspot{background:var(--accent-dark)}
.hotspot:hover,.hotspot.is-open{background:var(--accent-deep)}
.hotspot-tip{background:var(--accent-deep)}
.contact-card__icon{background:var(--accent-soft);color:var(--accent-deep)}
.contact-card a.value:hover{color:var(--accent-dark)}
.dealers__stat b{color:#7fe3dd}
.dealers .eyebrow, .coanda .eyebrow{color:#7fe3dd}
.dealers .eyebrow::before, .coanda .eyebrow::before{background:#7fe3dd}
.footer-col a:hover{color:#7fe3dd}
.marquee__track span::after{color:#7fe3dd}
.why-card{border-top:2px solid transparent;transition:border-color .35s var(--ease-signature)}
.why-card:hover{border-top-color:var(--accent)}
.section-head h2 em{font-style:normal;color:var(--accent-dark)}
.picker__ask{color:var(--accent-dark)}
.trade-form input:focus{outline-color:var(--accent)}
.faq-item__q svg{color:var(--accent)}

/* ==========================================================================
   Technical drawing
   ========================================================================== */
.drawing{margin:0}
.drawing svg{width:100%;height:auto;display:block}
.drawing figcaption{
  margin-top:14px;font-size:12.5px;color:var(--ink-faint);line-height:1.5;
  border-top:1px solid var(--line-soft);padding-top:10px;
}
/* dimension lines and air arrows draw themselves in when the block appears */
.spec-block .drawing svg [stroke-dasharray]{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .spec-block.in-view .drawing svg path[marker-end]{
    animation:airflow 2.4s linear infinite;
  }
}
@keyframes airflow{to{stroke-dashoffset:-40}}

/* ==========================================================================
   Exploded assembly — the four parts separate and close as the block is
   scrolled through, which is the clearest way to show what is inside.
   ========================================================================== */
.explode{
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  background:#fff;border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow-sm);
}
.explode__stage{position:relative;height:440px;overflow:visible}
.explode__part{
  position:absolute;left:50%;top:50%;margin:0;
  /* the body is the largest part in reality, so it is drawn larger here */
  width:calc(34% * var(--size,1));
  /* Face-on discs stacked straight down just overlap into a muddle, so the
     parts cascade diagonally — every rim stays visible while the order still
     reads as the assembly axis. */
  transform:translate(-50%,-50%)
            translate(var(--offset-x,0px), var(--offset-y,0px))
            scale(var(--scale,1));
  transition:transform .18s linear;
  will-change:transform;
}
.explode__part img{
  width:100%;height:auto;
  filter:drop-shadow(0 18px 26px rgba(23,22,15,.16));
}
.explode__part figcaption{
  /* A fixed offset from the part's centre, not from its width: the body is
     half again as wide as the rest, and a width-relative offset pushed its
     label out while burying the neighbouring one under the image. */
  /* Labels sit to the LEFT of the parts: the copy column is on the right,
     and right-hand labels were running straight into that text. */
  position:absolute;right:calc(50% + 132px);top:50%;transform:translateY(-50%);
  text-align:right;max-width:170px;
  display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  font-family:'Golos Text',sans-serif;font-size:13.5px;color:var(--ink);
  opacity:var(--label,0);transition:opacity .3s var(--ease-signature);
}
.explode__part figcaption .mono{color:var(--accent-dark);font-size:11px;letter-spacing:.08em}
.explode__copy{position:relative;z-index:3;background:#fff}
.explode__copy h3{font-size:24px;margin-bottom:10px}
.explode__copy p{color:var(--ink-soft);font-size:15px}
.explode__meter{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:22px}
.explode__meter span{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
@media (max-width:900px){
  .explode{grid-template-columns:1fr;padding:26px;gap:26px}
  .explode__stage{height:330px}
  .explode__part{width:40%}
  .explode__part figcaption{right:calc(50% + 105px);max-width:130px}
}
@media (prefers-reduced-motion:reduce){
  .explode__part{transition:none}
}

/* installed-in-ceiling strip */
.installed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.installed-grid figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000;aspect-ratio:3/4}
.installed-grid img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .8s var(--ease-signature)}
.installed-grid figure:hover img{transform:scale(1.05)}
@media (max-width:900px){.installed-grid{grid-template-columns:repeat(2,1fr)}}

/* interior visualisations — labelled, so they are never mistaken for
   photographs of finished installations */
.interior-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.interior-grid figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.interior-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;cursor:zoom-in;transition:transform .9s var(--ease-signature)}
.interior-grid figure:hover img{transform:scale(1.04)}
.interior-grid figcaption{
  position:absolute;right:12px;bottom:12px;
  background:rgba(23,22,15,.6);color:#eafaf8;backdrop-filter:blur(4px);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
}
@media (max-width:760px){.interior-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Floating cart — the basket stays reachable wherever the reader is on the
   page, which the header icon alone cannot do on a long page.
   ========================================================================== */
.cart-fab{
  position:fixed;right:24px;bottom:88px;z-index:70;
  width:56px;height:56px;border-radius:50%;border:none;
  background:var(--accent-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(6,64,62,.34);
  transform:scale(0);opacity:0;
  transition:transform .38s var(--ease-signature),opacity .28s var(--ease-signature),background .3s var(--ease-signature);
}
.cart-fab[data-empty="false"]{transform:scale(1);opacity:1}
.cart-fab:hover{background:var(--accent-deep)}
.cart-fab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cart-fab svg{width:22px;height:22px}
.cart-fab__count{
  position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 5px;
  border-radius:999px;background:#fff;color:var(--accent-deep);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(6,64,62,.25);
}
.cart-drawer__foot .btn--ghost{border-color:var(--line)}
@media (max-width:640px){
  .cart-fab{right:16px;bottom:80px;width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .cart-fab{transition:opacity .2s linear}
}

/* language switcher */
.lang-switch{display:flex;align-items:center;gap:2px;margin-right:4px}
.lang-switch__item{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  padding:6px 8px;border-radius:8px;color:var(--ink-faint);
  transition:color .25s var(--ease-signature),background .25s var(--ease-signature);
}
.lang-switch__item:hover{color:var(--ink);background:var(--cream-soft)}
.lang-switch__item[aria-current="true"]{color:#fff;background:var(--accent-dark)}
@media (max-width:900px){
  .lang-switch{margin-right:2px}
  .lang-switch__item{padding:6px 6px;font-size:10.5px}
}

/* ---- Touch targets and small type --------------------------------------
   Anything tappable clears 24px (WCAG 2.5.8); the type people read on a phone
   clears 11.5px. */
.footer-col a{padding:3px 0;min-height:24px;display:flex;align-items:center}
.contact-card .value{min-height:26px;display:inline-flex;align-items:center}
.lang-switch__item{min-height:26px;display:inline-flex;align-items:center}
.checkout__group legend{font-size:11.5px}
.order-done__copy{font-size:11.5px;min-height:26px}
@media (max-width:640px){
  .lang-switch__item{font-size:12px;padding:7px 9px;min-height:34px}
  .footer-col a{min-height:34px}
  .contact-card .value{min-height:32px}
  .order-done__copy{min-height:32px;padding:6px 12px}
}

/* ==========================================================================
   Separate pages (2026-09-11): product pages, legal pages, per-size prices
   ========================================================================== */
/* Product-page heading: the product name, then what it is in plain words.
   The second line carries the search phrase, so it is real text, just quieter. */
.hero--product h1{max-width:18ch}
.line-mask--sub .line-mask__inner{font-size:.5em;line-height:1.2;font-weight:600;color:var(--ink-soft);padding-top:.2em;letter-spacing:0}
.hero__crumb{color:inherit;text-decoration:none;border-bottom:1px solid rgba(10,107,103,.35);transition:border-color .2s}
.hero__crumb:hover,.hero__crumb:focus-visible{border-bottom-color:currentColor}

/* A product page shows one card in the shop, not two side by side. */
.shop-grid--one{grid-template-columns:minmax(0,420px)}

/* Per-size price in the size picker, with the ex-VAT figure fitters quote. */
.picker__price small{display:block;margin-top:3px;font-size:11px;font-weight:400;color:var(--ink-faint);text-align:right;letter-spacing:.02em}

.checkout__legal{margin:-2px 0 4px;font-size:12px;color:var(--ink-faint)}
.checkout__legal a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}

/* Legal pages: a single readable column under the fixed header. */
.legal{padding-top:132px;background:#fff}
.legal__body{max-width:760px}
.legal__body h1{font-size:clamp(30px,4vw,44px);line-height:1.1;margin:14px 0 8px;color:var(--ink)}
.legal__updated{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--ink-faint);margin:0 0 30px}
.legal__body h2{font-size:19px;line-height:1.3;margin:34px 0 10px;color:var(--ink)}
.legal__body p,.legal__body li{font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.legal__body ul{padding-left:20px;margin:0 0 12px}
.legal__body li{margin-bottom:6px}
.legal__body a{color:var(--accent-dark);text-underline-offset:2px}
.legal__links{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
@media (max-width:640px){.legal{padding-top:104px}}

/* Vulkan Linear has no cut-out on white: its hero shot is a dark studio
   photograph. Blended into the page like the round Vulkan it became a huge
   dark slab over the headline, so here it sits as a framed picture in the
   right column, clear of the copy. */
.hero--photo .hero__bg{right:6%;width:34%;max-width:430px}
.hero--photo .hero__bg img{
  display:block;aspect-ratio:3/4;object-fit:cover;mix-blend-mode:normal;
  border-radius:22px 22px 22px 6px;box-shadow:0 34px 64px -30px rgba(23,22,15,.5);
}
@media (max-width:900px){
  .hero--photo .hero__bg{right:auto;width:auto;max-width:none}
  .hero--photo .hero__bg img{width:auto;border-radius:16px 16px 16px 5px}
}
.legal__body a[href^="https://wa.me"],.legal__body a[href^="mailto:"]{white-space:nowrap}