/* ==========================================================================
   WEB VISION INTERNATIONAL — "SEVEN STROKES"
   A pure monochrome system. Only #000 and #fff exist. Depth comes from
   inversion, hatching and halftone — never from colour.
   Every angle in this file is the angle of the logo: 56 across, 84 down.
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */
:root{
  --black:#000; --white:#fff;

  /* polarity — flipped per section, everything downstream follows */
  --ink:var(--black); --paper:var(--white);

  /* the logo's stroke angle, reused for every rule, hatch and cut */
  --a-chev:56.3deg;

  --f-d:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-mega:clamp(3.1rem,min(12.6vw,16.5vh),12rem);
  --t-xl:clamp(2.4rem,6vw,5.4rem);
  --t-l:clamp(1.9rem,4.4vw,3.6rem);
  --t-m:clamp(1.3rem,2.3vw,1.85rem);
  --t-b:clamp(1rem,1.12vw,1.14rem);
  --t-s:.875rem;
  --t-lab:.6875rem;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:36px;--s7:56px;
  --s8:80px;--s9:120px;--s10:168px;--s11:220px;

  --gut:clamp(20px,5vw,72px);
  --max:1520px;

  --e:cubic-bezier(.19,1,.22,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --d1:200ms; --d2:460ms; --d3:900ms; --d4:1400ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--f-d);font-size:var(--t-b);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
img,svg{display:block;max-width:100%}
::selection{background:var(--white);color:var(--black)}
.sec--dark ::selection{background:var(--white);color:var(--black)}

/* the whole site is monochrome, so polarity inverts with one filter */
html.flip{filter:invert(1)}
html.flip img[data-keep]{filter:invert(1)}

:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;padding:14px 20px;background:var(--white);color:var(--black);font-family:var(--f-m);font-size:var(--t-lab);letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:var(--s4);top:var(--s4)}

/* --- 2. polarity shells --------------------------------------------------- */
.sec{position:relative;background:var(--paper);color:var(--ink);isolation:isolate}
.sec--dark{--ink:var(--white);--paper:var(--black)}
.sec--light{--ink:var(--black);--paper:var(--white)}
.wrap{position:relative;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.pad{padding-block:clamp(88px,13vw,var(--s11))}
.pad-s{padding-block:clamp(56px,8vw,var(--s9))}

/* faint structural grid — the page shows its own construction lines */
.rules{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.rules i{position:absolute;top:0;bottom:0;width:1px;background:var(--ink)}

/* --- 3. type ------------------------------------------------------------- */
.lab{display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--f-m);font-size:var(--t-lab);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;line-height:1;
  color:color-mix(in srgb,var(--ink) 58%,var(--paper))}
.lab--ink{color:var(--ink)}
.lab b{font-weight:500;color:var(--ink)}

.mega{font-size:var(--t-mega);line-height:.82;letter-spacing:-.052em;font-weight:700;text-transform:uppercase}
.h2{font-size:var(--t-xl);line-height:.9;letter-spacing:-.042em;font-weight:700;text-transform:uppercase}
.h3{font-size:var(--t-l);line-height:.96;letter-spacing:-.035em;font-weight:700}
.h4{font-size:var(--t-m);line-height:1.12;letter-spacing:-.025em;font-weight:600}
.lede{font-size:clamp(1.06rem,1.55vw,1.42rem);line-height:1.52;letter-spacing:-.012em;
  color:color-mix(in srgb,var(--ink) 74%,var(--paper));max-width:56ch}
.body{color:color-mix(in srgb,var(--ink) 68%,var(--paper));max-width:62ch}
.mono{font-family:var(--f-m);font-size:var(--t-s);letter-spacing:-.01em}

/* outline type — the second voice of a black-and-white system */
.hollow{color:transparent;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
@supports not (-webkit-text-stroke:1px black){.hollow{color:var(--ink)}}

/* --- 4. the chevron ------------------------------------------------------ */
.chev{display:block;width:1em;height:.75em;overflow:visible;fill:none;
  stroke:currentColor;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.mark{display:block;width:100%;height:auto;color:inherit}

/* hatching, ruled at the logo's angle — this is the system's only "grey" */
.hatch{background-image:repeating-linear-gradient(calc(-1*var(--a-chev)),
  var(--ink) 0 1px,transparent 1px 8px)}

/* --- 5. cursor ----------------------------------------------------------- */
.cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;
  width:26px;height:20px;margin:-10px 0 0 -13px;opacity:0;
  color:var(--white);mix-blend-mode:difference;
  transition:opacity var(--d2) var(--e),transform var(--d2) var(--e)}
.cur svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:16;
  stroke-linecap:round;stroke-linejoin:round}
html.fine .cur{opacity:1}
html.fine.hot .cur{transform:scale(1.9)}
html.fine,html.fine a,html.fine button{cursor:none}

/* --- 6. boot ------------------------------------------------------------- */
.boot{position:fixed;inset:0;z-index:250;background:var(--black);color:var(--white);
  display:grid;place-items:center;transition:clip-path 1s var(--e-io);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.boot__m{width:min(46vw,420px)}
.boot__m path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.05s var(--e-io) forwards}
.boot__m path:nth-child(2){animation-delay:.13s}
.boot__m path:nth-child(3){animation-delay:.24s}
@keyframes draw{to{stroke-dashoffset:0}}
html.booted .boot{clip-path:polygon(0 0,100% 0,100% 0,0 0);pointer-events:none}

/* --- 7. nav -------------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto;z-index:150;
  --nav-ink:var(--white);--nav-paper:var(--black);color:var(--nav-ink);
  transition:color var(--d2) var(--e),background-color var(--d2) var(--e)}
.nav.on-light{--nav-ink:var(--black);--nav-paper:var(--white)}
/* solid, not frosted: a blurred backdrop smears grey into a palette that has none */
.nav.stuck.on-dark{background:var(--black)}
.nav.stuck.on-light{background:var(--white)}
.nav.stuck::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.22}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:clamp(16px,2vw,26px)}
.nav__brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav__brand .mark{width:66px}
.nav__name{font-family:var(--f-m);font-size:var(--t-lab);letter-spacing:.2em;
  text-transform:uppercase;line-height:1.35;max-width:9ch}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav__links a{position:relative;font-family:var(--f-m);font-size:var(--t-lab);
  letter-spacing:.2em;text-transform:uppercase;padding-block:6px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d2) var(--e)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:var(--s3)}
.lang{font-family:var(--f-m);font-size:var(--t-lab);font-weight:500;letter-spacing:.18em;
  line-height:1;padding:10px 12px;border:1px solid currentColor;
  transition:background-color var(--d1) var(--e),color var(--d1) var(--e)}
.lang:hover{background:var(--nav-ink);color:var(--nav-paper)}
.flipbtn{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;
  border-radius:50%;overflow:hidden;position:relative}
.flipbtn::before{content:"";position:absolute;inset:0;background:currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transform:rotate(calc(90deg - var(--a-chev)));transform-origin:50% 50%;
  clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.flipbtn:hover{transform:rotate(180deg);transition:transform var(--d2) var(--e)}
.navtoggle{display:none}

/* --- 8. hero ------------------------------------------------------------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--s9) + 8px) var(--s7)}
#field{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.9}
.hero__in{position:relative;z-index:2}
.hero__top{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding-bottom:var(--s6);margin-bottom:var(--s7);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 26%,transparent)}
.hero h1{margin-bottom:var(--s6)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(102%);
  transition:transform var(--d4) var(--e)}
html.booted .hero h1 .ln>span{transform:none}
html.booted .hero h1 .ln:nth-child(2)>span{transition-delay:.09s}
html.booted .hero h1 .ln:nth-child(3)>span{transition-delay:.18s}
.hero__foot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s7);align-items:end}
.hero__cta{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.scroll{position:absolute;left:var(--gut);bottom:var(--s5);z-index:2;
  display:flex;align-items:center;gap:var(--s3);color:var(--ink)}
.scroll .chev{width:16px;animation:bob 2.4s var(--e) infinite}
@keyframes bob{0%,100%{transform:translateY(-3px);opacity:.4}50%{transform:translateY(3px);opacity:1}}

/* --- 9. buttons ---------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--s3);
  padding:17px 30px;border:1px solid var(--ink);overflow:hidden;isolation:isolate;
  font-family:var(--f-m);font-size:var(--t-lab);letter-spacing:.2em;text-transform:uppercase;
  transition:color var(--d2) var(--e)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path var(--d2) var(--e-io)}
.btn:hover{color:var(--paper)}
.btn:hover::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.btn .chev{width:13px;transform:rotate(-90deg);transition:transform var(--d2) var(--e)}
.btn:hover .chev{transform:rotate(-90deg) translateY(-4px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid::before{background:var(--paper)}
.btn--solid:hover{color:var(--ink)}
.btn--bare{border-color:transparent;padding-inline:0}
.btn--bare::before{display:none}
.btn--bare span{position:relative}
.btn--bare span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform-origin:100% 50%;transition:transform var(--d2) var(--e)}
.btn--bare:hover span::after{transform:scaleX(0)}

/* --- 10. marquee --------------------------------------------------------- */
.mq{border-block:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  padding-block:var(--s5);overflow:hidden;white-space:nowrap;display:flex}
.mq__t{display:flex;align-items:center;gap:var(--s7);padding-right:var(--s7);
  animation:slide 34s linear infinite;flex:0 0 auto}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.mq__t span{font-size:clamp(1.5rem,3.1vw,2.7rem);font-weight:700;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1}
.mq__t .chev{width:clamp(16px,2vw,26px);flex:0 0 auto}

/* --- 11. stats ----------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:color-mix(in srgb,var(--ink) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.stat{background:var(--paper);padding:var(--s6) var(--s5) var(--s7);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:auto 0 0 0;height:100%;opacity:0;
  background-image:repeating-linear-gradient(calc(-1*var(--a-chev)),var(--ink) 0 1px,transparent 1px 9px);
  transition:opacity var(--d2) var(--e);pointer-events:none}
.stat:hover::after{opacity:.1}
.stat__n{font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:700;line-height:.9;
  letter-spacing:-.05em;display:flex;align-items:baseline;gap:2px}
.stat__l{margin-top:var(--s4);font-family:var(--f-m);font-size:var(--t-lab);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 55%,var(--paper))}

/* --- 12. section heads --------------------------------------------------- */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--s7);align-items:end;margin-bottom:clamp(48px,7vw,var(--s8))}
.head__k{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}
.head__k .chev{width:15px;flex:0 0 auto}
.head__k .line{flex:1;height:1px;background:color-mix(in srgb,var(--ink) 26%,transparent)}

/* --- 13. disciplines ----------------------------------------------------- */
.disc{border-top:1px solid color-mix(in srgb,var(--ink) 24%,transparent)}
.disc__r{position:relative;display:grid;
  grid-template-columns:clamp(58px,7vw,110px) minmax(0,1.05fr) minmax(0,1.15fr) auto;
  gap:var(--s5);align-items:start;padding-block:clamp(30px,4.2vw,var(--s7));
  border-bottom:1px solid color-mix(in srgb,var(--ink) 24%,transparent);
  isolation:isolate;transition:padding-inline var(--d2) var(--e)}
.disc__r::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path var(--d3) var(--e-io)}
.disc__r:hover{padding-inline:clamp(14px,2vw,32px)}
.disc__r:hover::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.disc__r:hover *{color:var(--paper)}
.disc__n{font-family:var(--f-m);font-size:var(--t-lab);letter-spacing:.2em;padding-top:.6em;
  color:color-mix(in srgb,var(--ink) 50%,var(--paper))}
.disc__t{font-size:clamp(1.55rem,3.3vw,2.7rem);font-weight:700;line-height:.98;
  letter-spacing:-.035em;text-transform:uppercase}
.disc__d{color:color-mix(in srgb,var(--ink) 66%,var(--paper));max-width:48ch;font-size:var(--t-b)}
.disc__g{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.disc__g b{font-family:var(--f-m);font-weight:500;font-size:var(--t-lab);letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border:1px solid currentColor;opacity:.62}
.disc__x{align-self:center}
.disc__x .chev{width:18px;transform:rotate(-90deg);transition:transform var(--d2) var(--e)}
.disc__r:hover .disc__x .chev{transform:rotate(-90deg) translateY(-8px)}

/* --- 14. products (the hard cut) ----------------------------------------- */
.prod{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(560px,78vh,860px)}
.prod__p{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(34px,5vw,var(--s8));overflow:hidden;isolation:isolate}
.prod__p--a{--ink:var(--white);--paper:var(--black);background:var(--black);color:var(--white)}
.prod__p--b{--ink:var(--black);--paper:var(--white);background:var(--white);color:var(--black)}
.prod__bg{position:absolute;inset:0;z-index:-1;opacity:.13;
  background-image:repeating-linear-gradient(calc(-1*var(--a-chev)),var(--ink) 0 1px,transparent 1px 10px);
  transform:translateY(0);transition:opacity var(--d3) var(--e)}
.prod__p:hover .prod__bg{opacity:.26}
.prod__k{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s5);border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.prod__body{margin-top:auto;padding-top:var(--s8)}
.prod__t{font-size:clamp(2rem,4.4vw,3.9rem);font-weight:700;line-height:.92;
  letter-spacing:-.045em;text-transform:uppercase;margin-bottom:var(--s5)}
.prod__l{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s6) 0 var(--s6)}
/* project status — a live marker; the only thing on the page that blinks */
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-m);font-weight:500;
  font-size:var(--t-lab);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.status i{width:7px;height:7px;flex:0 0 auto;background:currentColor;border-radius:50%;
  animation:blip 2.4s var(--e) infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.22;transform:scale(.62)}}
@media (prefers-reduced-motion:reduce){.status i{animation:none}}
.prod__k{flex-wrap:wrap}
.prod__l b{font-family:var(--f-m);font-weight:500;font-size:var(--t-lab);letter-spacing:.16em;
  text-transform:uppercase;padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--ink) 34%,transparent)}
.prod__glyph{position:absolute;right:-6%;top:6%;width:44%;opacity:.14;z-index:-1;
  transition:transform var(--d4) var(--e),opacity var(--d3) var(--e)}
.prod__p:hover .prod__glyph{transform:translate(-6%,4%) rotate(-8deg);opacity:.2}

/* --- 15. process --------------------------------------------------------- */
.proc{position:relative}
.proc__line{position:absolute;left:0;right:0;top:clamp(58px,7vw,96px);height:2px;z-index:0;
  background:color-mix(in srgb,var(--ink) 22%,transparent)}
.proc__line i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);
  transition:width 1.2s var(--e)}
.proc__g{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.proc__s{padding-right:var(--s5);display:flex;flex-direction:column;align-items:flex-start}
.proc__d{height:clamp(30px,3.2vw,44px);width:auto;margin-bottom:var(--s5);color:var(--ink);
  transition:transform var(--d3) var(--e)}
.proc__s:hover .proc__d{transform:translateY(-6px)}
.proc__k{font-family:var(--f-m);font-size:var(--t-lab);letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 52%,var(--paper));margin-bottom:var(--s3)}
.proc__t{font-size:var(--t-m);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:var(--s3)}
.proc__x{color:color-mix(in srgb,var(--ink) 66%,var(--paper));font-size:var(--t-s);line-height:1.6}

/* --- 16. manifesto ------------------------------------------------------- */
.mani{font-size:clamp(1.55rem,3.7vw,3.1rem);line-height:1.12;letter-spacing:-.035em;
  font-weight:500;max-width:22ch}
.mani em{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--ink)}
@supports not (-webkit-text-stroke:1px black){.mani em{color:var(--ink)}}

/* --- 17. contact --------------------------------------------------------- */
.cta{position:relative;overflow:hidden}
.cta__big{font-size:clamp(3.1rem,12.6vw,12rem);line-height:.82;letter-spacing:-.055em;font-weight:700;
  text-transform:uppercase;margin-bottom:var(--s7)}
.cta__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s7);
  align-items:start;padding-top:var(--s6);
  border-top:1px solid color-mix(in srgb,var(--ink) 26%,transparent)}
.cta__list{display:grid;gap:var(--s5)}
.cta__item{display:grid;gap:4px}
.cta__item a{font-size:var(--t-m);font-weight:600;letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:10px;width:fit-content}
.cta__item a .chev{width:13px;transform:rotate(-90deg);transition:transform var(--d2) var(--e)}
.cta__item a:hover .chev{transform:rotate(-90deg) translateY(-5px)}

/* --- 18. footer ---------------------------------------------------------- */
.foot{border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.foot__in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.7fr));
  gap:var(--s7);padding-block:var(--s8) var(--s6)}
.foot__m{width:min(220px,56vw);margin-bottom:var(--s5)}
.foot h4{font-family:var(--f-m);font-size:var(--t-lab);letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 52%,var(--paper));margin-bottom:var(--s4);font-weight:500}
.foot li+li{margin-top:10px}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__bar{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding-block:var(--s5) var(--s6);
  border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}

/* --- 19. reveal ---------------------------------------------------------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity var(--d3) var(--e),transform var(--d3) var(--e)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
.cut{clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path 1.1s var(--e-io)}
.cut--up{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.cut.in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* --- 20. responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .hero__foot,.head,.cta__g{grid-template-columns:1fr;gap:var(--s6)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .prod{grid-template-columns:1fr}
  .proc__g{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s5)}
  .proc__line{display:none}
  .foot__in{grid-template-columns:1fr 1fr}
  .disc__r{grid-template-columns:clamp(34px,5vw,48px) minmax(0,1fr);gap:var(--s4)}
  .disc__c{grid-column:2}
  .disc__d{max-width:none}
  .disc__x{display:none}
}
@media (max-width:760px){
  .nav__links{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;
    gap:var(--s5);background:var(--black);color:var(--white);
    clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .7s var(--e-io)}
  .nav__links a{font-size:clamp(1.3rem,6vw,1.9rem);letter-spacing:.12em}
  html.menu .nav__links{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:10}
  html.menu .nav{color:var(--white)}
  html.menu body{overflow:hidden}
  /* absolute bars, so the two strokes actually cross into an X */
  .navtoggle{display:block;width:38px;height:38px;position:relative;z-index:20}
  .navtoggle i{position:absolute;left:8px;width:22px;height:1.5px;background:currentColor;
    transition:transform var(--d2) var(--e)}
  .navtoggle i:first-child{top:16px}
  .navtoggle i:last-child{top:22px}
  html.menu .navtoggle i:first-child{transform:translateY(3px) rotate(45deg)}
  html.menu .navtoggle i:last-child{transform:translateY(-3px) rotate(-45deg)}
  .nav__name{display:none}
  .flipbtn{display:none}
  html.menu .lang{color:var(--white)}
  html.menu .lang:hover{background:var(--white);color:var(--black)}
  .foot__in{grid-template-columns:1fr;gap:var(--s6)}
  .stats{grid-template-columns:1fr}
  .stat{padding:var(--s5)}
  .proc__g{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .scroll{display:none}
}

/* --- 21. motion & print -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .cut{clip-path:none}
  .hero h1 .ln>span{transform:none}
}
@media print{
  .nav,.cur,.boot,#field,.scroll,.mq{display:none}
  body{background:#fff;color:#000}
  .sec--dark{--ink:#000;--paper:#fff;background:#fff;color:#000}
}