/* ============================================================
   Livoplast — SITE 5 "Atelier"
   Refinement of Site 4: same concept, tuned execution.
   · Stat band — the approved figures as large numerals
   · The problem's key sentence pulled out typographically
   · The lens drifts on its own until the visitor takes over
   · The replacement sequence plays itself once, then hands
     the slider to the visitor
   (original Site 4 header follows)
   ============================================================ */
/* ============================================================
   Livoplast — SITE 4 "Inspect"
   The page as an inspection instrument. Same minimalist / Swiss /
   product-led language as sites 1–3, evolved:
   · An X-RAY LENS you move across the photograph — the pipe is
     revealed inside the sleeve, under the heading "Look closely."
   · Section seams cut at the pipe's own diagonal.
   · A scroll "riser" — a thin red→blue line filling as you read.
   · Spec-sheet detailing: numbered points, giant-numeral range cards.
   Static, self-contained. Fonts self-hosted.
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plexmono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexmono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ink:#121215; --grey:#6B6B70; --hair:#E3E3E7; --paper:#F4F4F6; --black:#09090A;
  --blue:#1E5FA9; --red:#D0342C;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:1200px;
  --seam:2.0vw;               /* the diagonal every section seam is cut at */
}
*{box-sizing:border-box}
/* overflow-x MUST NOT be `hidden` here. Per spec, when one axis is not
   `visible` the other computes to `auto`, which turns html/body into scroll
   containers — and that silently kills every `position:sticky` descendant
   (the header, and .prod-media). `clip` gives the same protection against
   horizontal scroll without creating a scroll container. */
html,body{margin:0;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--sans);color:var(--ink);background:#fff;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;letter-spacing:-.011em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:26px;padding-right:26px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid rgba(30,95,169,.7);outline-offset:3px;border-radius:6px}
/* Land anchor jumps flush under the sticky header (56px bar + 1px border).
   No "breathing room" here: sections butt together, so any extra offset can
   only reveal the previous section. */
section{scroll-margin-top:57px}
/* The angled sections overlap their neighbour by 1vw (negative margin, so the
   diagonal cut leaves no gap). Where that happens the neighbour's box reaches
   into this section, so offset by that much less and the overlap tucks behind
   the header instead of showing beneath it. */
.s.black.seam,
.s.black.seam + .s,
.band + .s{scroll-margin-top:calc(57px - 1vw)}
::selection{background:var(--blue);color:#fff}

/* ---------- the riser: scroll progress as a red→blue line ---------- */
.riser{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:90;pointer-events:none;background:rgba(0,0,0,.05)}
.riser i{display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--red),var(--blue))}
html:not(.js) .riser{display:none}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.07)}
.bar{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand img{height:26px;width:auto}   /* brand/logo4 lockup — droplets + wordmark */
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;color:var(--ink);font-size:12.5px;opacity:.82}
nav a:hover{opacity:1}
.lang{font-family:var(--mono);font-size:11.5px;color:var(--ink);opacity:.65;text-decoration:none}
.menu-links{display:flex;align-items:center;gap:26px}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;align-items:center;
  justify-content:center;cursor:pointer;color:var(--ink)}

/* ---------- type ---------- */
h1{font-size:clamp(2.8rem,7.6vw,5.9rem);line-height:1;letter-spacing:-.042em;font-weight:700;
  margin:0;text-wrap:balance}
h2{font-size:clamp(1.95rem,4.2vw,3.2rem);line-height:1.06;letter-spacing:-.03em;font-weight:700;
  margin:0 0 20px;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);margin:0 0 18px}
.lead{font-size:clamp(1.1rem,1.6vw,1.28rem);color:var(--grey);line-height:1.5;margin:0;max-width:34em}
.body{font-size:1.0625rem;color:var(--grey);line-height:1.62;margin:20px 0 0;max-width:44em}
.center{text-align:center}
.pq{font-weight:700;letter-spacing:-.028em;line-height:1.18;color:#fff;
  font-size:clamp(1.5rem,3.2vw,2.5rem);max-width:24ch;margin:26px auto;text-wrap:balance}
.center .lead,.center .body{margin-left:auto;margin-right:auto}
.gapword{font-style:normal;color:var(--red);border:2px dashed rgba(208,52,44,.55);
  border-radius:10px;padding:0 .18em;font-weight:700}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:500;font-size:16px;padding:13px 25px;border-radius:980px;
  transition:.18s;border:0;cursor:pointer;font-family:var(--sans)}
.pill:hover{background:#000;transform:scale(1.02)}
.pill:disabled{opacity:.55;transform:none}
.tlink{color:var(--blue);text-decoration:none;font-size:16px;display:inline-flex;align-items:center;gap:5px}
.tlink:hover{text-decoration:underline}
.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:28px}
@media (prefers-reduced-motion:reduce){.pill:hover{transform:none}}

/* ---------- sections, ghost numerals, angled seams ---------- */
/* `clip`, not `hidden`: both contain the oversized ghost numeral, but `hidden`
   makes this a scroll container and disables the sticky .prod-media inside. */
.s{padding:112px 0;position:relative;overflow:clip}
.s.paper{background:var(--paper)}
.s.black{background:var(--black);color:#fff}
.s.black h2{color:#fff}
.s.black .lead,.s.black .body{color:rgba(255,255,255,.7)}
.s.black .eyebrow{color:rgba(255,255,255,.5)}
.s .wrap{position:relative;z-index:1}
.s[data-num]::after{
  content:attr(data-num) / "";
  position:absolute;top:26px;right:-24px;z-index:0;pointer-events:none;
  font-weight:800;font-size:clamp(11rem,26vw,22rem);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(18,18,21,.08);
}
.s.black[data-num]::after{-webkit-text-stroke:1.5px rgba(255,255,255,.10)}
/* seams: black sections are cut at the pipe's diagonal (rising to the right) */
.s.black.seam{
  clip-path:polygon(0 var(--seam),100% 0,100% calc(100% - var(--seam)),0 100%);
  padding-top:calc(112px + var(--seam));padding-bottom:calc(112px + var(--seam));
  margin-top:calc(var(--seam) * -0.5);margin-bottom:calc(var(--seam) * -0.5);
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px)}
html.js .reveal{transition:opacity .85s cubic-bezier(.22,.7,.3,1),transform .85s cubic-bezier(.22,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- photo animation frames ---------- */
.pull{position:relative;margin:0 auto}
.pull img{width:100%}
.pull .frame-out{position:absolute;inset:0}
html:not(.js) .pull .frame-out{position:static}
html:not(.js) .pull .frame-in{display:none}
@media (prefers-reduced-motion:reduce){
  html.js .pull .frame-out{position:static;clip-path:none!important}
  html.js .pull .frame-in{display:none}
}

/* ---------- hero ---------- */
.hero{padding:64px 0 0;overflow:hidden}
.hero h1{position:relative;z-index:2}
.hero-low{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;
  align-items:end;margin-top:30px;position:relative;z-index:2}
.hero-low .side{justify-self:end;text-align:right}
.specs{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px;
  color:var(--grey);display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.hero-fig{position:relative;z-index:1;max-width:1060px;margin:-3vw 0 0 auto;
  will-change:transform;transition:transform .35s ease}
.hero-fig .pull{margin:0}

/* ---------- stat band: the approved figures, large ---------- */
.statband{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:38px 0;background:#fff}
.statband .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stat{text-align:center}
.stat .v{font-family:var(--mono);font-weight:600;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1.25rem,2.4vw,1.9rem);display:block;white-space:nowrap}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);display:block;margin-top:8px}
@media (max-width:760px){
  .statband .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
}

/* ---------- 03 product: editorial, numbered spec points ---------- */
.prod-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.prod-grid>*{min-width:0}
.prod-media{position:sticky;top:96px}
.prod-media img{border-radius:18px}
.points{list-style:none;margin:40px 0 0;padding:0;counter-reset:pt}
.points li{padding:18px 0 18px 52px;border-top:1px solid var(--hair);font-size:1.0625rem;
  position:relative;counter-increment:pt}
.points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.1em}

/* ---------- 04 THE LENS ---------- */
.lens-stage{position:relative;margin:52px auto 0;max-width:1040px;border-radius:18px;
  overflow:hidden;background:#fff;cursor:crosshair;touch-action:pan-y}
@media (hover:hover) and (pointer:fine){.lens-stage{touch-action:none}}
.lens-stage img{width:100%;display:block}
.lens-stage .xray{position:absolute;inset:0;clip-path:circle(0px at 50% 50%)}
.lens-ring{position:absolute;z-index:3;width:0;height:0;pointer-events:none;
  border-radius:50%;border:2.5px dashed rgba(208,52,44,.85);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4000px rgba(255,255,255,0)}
html:not(.js) .lens-stage .xray{position:static;clip-path:none}
html:not(.js) .lens-ring{display:none}
@media (prefers-reduced-motion:reduce){
  html.js .lens-stage .xray{position:static;clip-path:none!important}
  html.js .lens-ring{display:none}
}
.lens-hint{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);text-align:center;margin:18px 0 0;display:flex;align-items:center;gap:12px;justify-content:center}
.lens-hint::before,.lens-hint::after{content:"";flex:1;max-width:70px;height:1px;background:var(--hair)}
html:not(.js) .lens-hint{display:none}
.legend{list-style:none;margin:56px auto 0;padding:0;max-width:1040px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;text-align:left}
.legend .num{font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.18em;display:block;margin-bottom:10px}
.legend .lbl{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-bottom:9px;color:var(--ink)}
.legend .gap-emph .lbl{color:var(--red)}
.legend p{margin:0;color:var(--grey);font-size:15px;line-height:1.6}

/* ---------- 05 replacement: drag (with milestone dots) ---------- */
.seq-wrap{max-width:980px;margin:0 auto}
.seq-wrap .pull{margin-top:44px}
.drag{margin:34px auto 0;max-width:640px}
.drag-hint{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);text-align:center;margin:0 0 14px;display:flex;align-items:center;gap:12px;justify-content:center}
.drag-hint::before,.drag-hint::after{content:"";flex:1;max-width:70px;height:1px;background:var(--hair)}
.drag-track{position:relative}
.drag-track::before,.drag-track::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  border-radius:50%;background:#fff;border:2px solid var(--grey);transform:translateY(-50%);z-index:1;pointer-events:none}
.drag-track::before{left:25%}
.drag-track::after{left:60%}
.pull-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;
  cursor:ew-resize;display:block;position:relative;z-index:2}
.pull-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--red),var(--blue))}
.pull-range::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--blue))}
.pull-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M4 1 1 5l3 4M12 1l3 4-3 4' fill='none' stroke='%23121215' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
  border:1px solid var(--hair);box-shadow:0 3px 10px rgba(0,0,0,.18);margin-top:-15px}
.pull-range::-moz-range-thumb{width:34px;height:34px;border-radius:50%;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M4 1 1 5l3 4M12 1l3 4-3 4' fill='none' stroke='%23121215' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
  border:1px solid var(--hair);box-shadow:0 3px 10px rgba(0,0,0,.18)}
html:not(.js) .drag{display:none}
.seq-caps{margin:30px auto 0;max-width:760px;text-align:center}
.seq-cap .lbl{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
.seq-cap p{margin:0;font-size:1.1rem;color:var(--ink)}
.seq-cap{margin-bottom:22px}
html.js .seq-caps{position:relative;min-height:96px}
html.js .seq-cap{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;margin:0}
html.js .seq-cap.on{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){
  html.js .seq-caps{min-height:0}
  html.js .seq-cap{position:static;opacity:1;visibility:visible;margin-bottom:22px}
}

/* ---------- band (angled) ---------- */
.band{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;background:#000;
  clip-path:polygon(0 var(--seam),100% 0,100% calc(100% - var(--seam)),0 100%);
  margin:calc(var(--seam) * -0.5) 0;padding:var(--seam) 0}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3))}
.band .inner{position:relative;width:100%;padding:84px 0;text-align:center}
.band blockquote{margin:0 auto;max-width:20ch;color:#fff;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1}
.band .attrib{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin:20px 0 0}

/* ---------- 06 applications: pills + giant-numeral range cards ---------- */
.uses{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.uses li{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:980px;
  padding:12px 20px;font-weight:500;font-size:15px}
.uses svg{width:22px;height:22px}
.range{margin:64px 0 0}
.range h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);margin:0 0 18px}
.range-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rcard{background:#fff;border-radius:18px;padding:28px 26px 24px;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.rcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.07)}
@media (prefers-reduced-motion:reduce){.rcard{transition:none}.rcard:hover{transform:none;box-shadow:none}}
.rcard dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin:0 0 6px}
.rcard dd{margin:0 0 18px}
.rcard dd:last-child{margin-bottom:0}
.rcard .dim{font-family:var(--mono);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:-.02em;color:var(--ink)}
.rcard .slv{font-family:var(--mono);font-size:1.05rem;color:var(--ink)}
.rcard .col{font-family:var(--mono);font-size:14px;color:var(--ink);display:flex;align-items:center;gap:9px}
.dotpair{display:inline-flex;gap:5px}
.dotpair i{width:7px;height:7px;border-radius:50%;display:block}
.dotpair .h{background:var(--red)} .dotpair .c{background:var(--blue)}
.range-note{font-family:var(--mono);font-size:12.5px;color:var(--grey);margin:18px 0 0}

/* ---------- 07 questions ---------- */
.qa{max-width:760px;margin:44px 0 0}
.qa details{border-bottom:1px solid var(--hair)}
.qa details:first-of-type{border-top:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:21px 2px;font-weight:500;font-size:1.0625rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--blue);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 2px 22px;color:var(--grey);margin:0;max-width:62ch}

/* ---------- 08 quality ---------- */
.qgrid{list-style:none;margin:56px 0 0;padding:0;max-width:1000px;counter-reset:qc;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px}
.qgrid li{padding:24px 0 24px 52px;border-top:1px solid rgba(255,255,255,.15);position:relative;counter-increment:qc}
.qgrid li::before{content:counter(qc,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45);letter-spacing:.1em}
.qgrid .lbl{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;display:block;margin-bottom:9px}
.qgrid p{margin:0;color:rgba(255,255,255,.7);font-size:15.5px;line-height:1.6}
.iso{margin:52px 0 0}
.iso .badge{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:#fff;
  border:1px solid rgba(255,255,255,.35);border-radius:980px;padding:11px 22px}
.iso p{margin:14px 0 0;color:rgba(255,255,255,.7);font-size:15.5px}

/* ---------- contact ---------- */
.form{max-width:600px;margin:48px auto 0;text-align:left}
.field{margin-bottom:17px}
label{display:block;font-size:13.5px;color:var(--grey);margin-bottom:7px}
input,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);border:0;
  border-radius:12px;background:var(--paper);padding:15px 17px}
input:focus-visible,textarea:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(30,95,169,.5)}
textarea{min-height:140px;resize:vertical}
/* Honeypot. Positioned off-screen rather than display:none — bots increasingly
   skip display:none fields. aria-hidden + tabindex=-1 keep it away from screen
   readers and the keyboard. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .pill{width:100%;justify-content:center;margin-top:6px}
.form-status{font-weight:500;margin:16px 0 0;text-align:center}
.form-status.ok{color:#1B7A3C} .form-status.err{color:var(--red)}
.email-line{margin:24px 0 0;text-align:center;font-size:15px;color:var(--grey)}
.email-line a{color:var(--blue);text-decoration:none}

/* ---------- footer ---------- */
footer{background:var(--black);color:rgba(255,255,255,.65);padding:64px 0 0;overflow:hidden;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--blue))}
.foot{display:flex;flex-wrap:wrap;gap:22px 40px;justify-content:space-between;align-items:center;font-size:12.5px}
footer nav ul{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
footer nav a{font-size:12.5px;color:rgba(255,255,255,.65);text-decoration:none}
footer nav a:hover{color:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:20px;
  font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.45)}
.giant{margin:34px 0 -1.5vw;font-weight:800;letter-spacing:.02em;line-height:.78;
  font-size:clamp(4rem,12.8vw,11.5rem);text-align:center;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.22);user-select:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .prod-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .prod-media{position:static}
  .legend{grid-template-columns:minmax(0,1fr);gap:28px;max-width:560px}
  .qgrid{grid-template-columns:minmax(0,1fr);gap:0}
  .range-cards{grid-template-columns:minmax(0,1fr)}
  .hero-low{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero-low .side{justify-self:start;text-align:left}
  .specs{align-items:flex-start}
  .hero-fig{margin-top:8px}
}
@media (max-width:760px){
  .s{padding:80px 0}
  .s.black.seam{padding-top:calc(80px + var(--seam));padding-bottom:calc(80px + var(--seam))}
  .hero{padding-top:44px}
  .s[data-num]::after{font-size:9rem;right:-12px;top:14px}
  .menu-btn{display:inline-flex} .lang{display:none}
  .menu-links nav{display:none;position:absolute;top:56px;left:0;right:0;background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px);border-bottom:1px solid var(--hair);padding:8px 26px 16px}
  .menu-links.open nav{display:block}
  .menu-links nav ul{flex-direction:column;gap:0}
  .menu-links nav a{display:block;padding:13px 0;font-size:15px;border-bottom:1px solid var(--hair)}
  .band{min-height:340px}
  .riser{width:2px}
}