/* ============================================================
   MITZ — foldable strength equipment
   Design language lifted from the PSD comp:
   warm off-white paper, light grotesque at macro scale,
   monospace for everything small, one orange accent, hard rules.
   ============================================================ */

:root{
  --paper:      #F2EFE9;
  --paper-deep: #E7E2D9;
  --ink:        #0B0B0B;
  --ink-70:     rgba(11,11,11,.70);
  --ink-45:     rgba(11,11,11,.45);
  --rule:       rgba(11,11,11,.16);
  --accent:     #F0521C;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --head-h: 4.5rem;
  --maxw: 96rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--head-h);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:clamp(.8125rem, .78rem + .16vw, .9375rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.75rem 1rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ── shared type ─────────────────────────────────────────── */

.kicker{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin:0 0 2.5rem;
}
.kicker::before{
  content:"";
  display:block;
  width:2rem; height:2px;
  background:var(--accent);
  margin-bottom:1rem;
}

.sec-head{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem, 1.2rem + 6vw, 6rem);
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 clamp(2.5rem,5vw,5rem);
}

/* ── header ──────────────────────────────────────────────── */

.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center; gap:2rem;
  padding:0 var(--pad);
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}

/* On a wide screen the hero photo puts black steel directly behind the nav,
   and dark links on dark metal are unreadable. This scrim restores contrast
   without boxing the header in; it fades out once the solid stuck bar takes
   over. z-index:-1 stays inside the header's own stacking context, so it
   covers the photo but never the links. */
.site-head::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:calc(var(--head-h) * 2);
  background:linear-gradient(to bottom,
    rgba(242,239,233,.96) 0%,
    rgba(242,239,233,.82) 40%,
    rgba(242,239,233,0) 100%);
  pointer-events:none;
  z-index:-1;
  transition:opacity .35s ease;
}
.site-head.is-stuck::before,
.site-head.is-open::before{ opacity:0; }
.site-head.is-stuck{
  background:rgba(242,239,233,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
}

.logo{
  font-family:var(--mono);
  font-style:italic;
  font-weight:500;
  font-size:1.375rem;
  letter-spacing:.02em;
  color:var(--accent);
  text-decoration:none;
  line-height:1;
}
.logo span{ color:var(--accent); }

.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.25rem);
}
.nav a{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-70);
  text-decoration:none;
  padding:.25rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.nav .nav-cta{ color:var(--accent); }

.lang{
  display:flex; align-items:center; gap:.4rem;
  font-size:.75rem; letter-spacing:.08em;
  color:var(--ink-45);
}
.lang button{
  background:none; border:0; padding:.25rem 0; cursor:pointer;
  color:var(--ink-45);
  letter-spacing:.08em;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.lang button:hover{ color:var(--ink); }
.lang button.is-on{ color:var(--ink); border-bottom-color:var(--accent); }

.burger{ display:none; }

/* ── hero ────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(var(--head-h) + 2rem) var(--pad) clamp(2rem,5vh,4rem);
  overflow:hidden;
}

.hero-img{ position:absolute; inset:0; z-index:0; }
.hero-img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:72% 50%;
}

.hero-type{
  position:relative; z-index:2;
  margin:0;
  align-self:center;
  display:flex; flex-direction:column;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.25rem, .5rem + 12.5vw, 12.5rem);
  line-height:.88;
  letter-spacing:-.045em;
  text-transform:uppercase;
  max-width:14ch;
}
.hero-type span{ display:block; }
.hero-type .l1{ margin-left:.10em; }
.hero-type .l2{ margin-left:.62em; }
.hero-type .l3{ margin-left:0; }

.hero-meta{
  position:relative; z-index:2;
  display:flex; gap:clamp(2rem,8vw,9rem);
  align-items:flex-start;
}
.meta-col{ max-width:22ch; }
.meta-col .rule{
  display:block; width:2rem; height:2px;
  background:var(--accent);
  margin-bottom:1.25rem;
}
.meta-col p{
  margin:0;
  font-size:.8125rem;
  line-height:1.75;
  color:var(--ink);
}

/* Looping 3D demo tucked into the hero, so the folding reads before scrolling. */
.hero-3d{
  position:absolute; z-index:3;
  right:var(--pad);
  bottom:clamp(2rem,5vh,4rem);
  width:clamp(12rem,17vw,15.5rem);
  margin:0;
  background:rgba(242,239,233,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--rule);
}
.hero-3d-stage{ width:100%; aspect-ratio:4/5; }
.hero-3d-stage canvas{ display:block; width:100%; height:100%; }
.hero-3d figcaption{
  border-top:1px solid var(--rule);
  padding:.75rem .875rem .875rem;
}
.hero-3d figcaption b{
  display:block;
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.375rem;
}
.hero-3d figcaption span{
  font-size:.6875rem; line-height:1.5; color:var(--ink-70);
}

/* ── stat strip ──────────────────────────────────────────── */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.stat{
  padding:clamp(1.75rem,4vw,3rem) var(--pad);
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:flex-start;
}
.stat:last-child{ border-right:0; }
.stat b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.25rem,1rem + 4vw, 4.5rem);
  line-height:.9;
  letter-spacing:-.04em;
}
.stat i{
  font-style:normal;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--accent);
  margin-top:.5rem;
}
.stat span{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45);
  margin-top:.75rem;
}

/* ── claim ───────────────────────────────────────────────── */

.claim{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,10rem) var(--pad);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);
}
.claim .kicker{ grid-column:1/-1; }
.claim-type{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem, .5rem + 9vw, 9.5rem);
  line-height:.9;
  letter-spacing:-.045em;
  margin:0;
}
.claim-body{
  max-width:44ch;
  justify-self:end;
  align-self:end;
}
.claim-body p{ margin:0 0 1.25rem; }
.claim-body p:last-child{ margin-bottom:0; }
@media (min-width:60rem){
  .claim{ grid-template-columns:1.25fr 1fr; align-items:end; }
}

/* ── real footage ────────────────────────────────────────── */

.reels{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,10vh,8rem);
}
.reels-head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3rem); }
.reels-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,1.2rem + 3vw,3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 1rem;
}
.reels-head p{ margin:0; color:var(--ink-70); }

.reel-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.reel{ display:flex; flex-direction:column; }
.reel video{
  display:block;
  width:100%;
  aspect-ratio:404/720;
  object-fit:cover;
  background:var(--paper-deep);
  border:1px solid var(--rule);
}
.reel{ position:relative; }

/* Visible whenever the clip is not playing — which on a phone in Low Power
   Mode is the moment it loads. Without it the poster frame reads as a broken
   image and nobody knows the tile is tappable. */
.reel-play{
  position:absolute;
  left:50%; top:calc(50% - 1.6rem);
  transform:translate(-50%,-50%);
  width:3.5rem; height:3.5rem;
  border:0; border-radius:50%;
  background:rgba(242,239,233,.92);
  box-shadow:0 2px 14px rgba(11,11,11,.22);
  cursor:pointer;
  display:grid; place-items:center;
  transition:opacity .25s ease, transform .25s ease;
}
.reel-play::before{
  content:"";
  width:0; height:0;
  margin-left:.22rem;
  border-left:.85rem solid var(--ink);
  border-top:.55rem solid transparent;
  border-bottom:.55rem solid transparent;
}
.reel-play:hover{ transform:translate(-50%,-50%) scale(1.06); }
.reel.is-playing .reel-play{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.85);
}
.reel video{ cursor:pointer; }

.reel-cap{ padding:1rem .125rem 0; }
.reel-cap b{
  display:block;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.5rem;
}
.reel-cap span{ font-size:.8125rem; line-height:1.6; color:var(--ink-70); }

/* ── 3D fold section ─────────────────────────────────────── */

.fold{
  position:relative;
  height:460vh;
  background:var(--paper-deep);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.fold-sticky{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
}
.fold-canvas{ position:absolute; inset:0; }
.fold-canvas canvas{ display:block; width:100%; height:100%; }

.fold-ui{
  position:absolute; inset:auto auto 0 0;
  width:min(30rem,100%);
  padding:var(--pad);
  pointer-events:none;
}
.fold-ui .kicker{ margin-bottom:1.5rem; }

.fold-steps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1rem;
}
.fold-steps li{
  opacity:.28;
  transition:opacity .4s ease;
  display:grid;
  grid-template-columns:8rem 1fr;
  gap:1rem;
  padding-top:.75rem;
  border-top:1px solid var(--rule);
}
.fold-steps li.is-on{ opacity:1; }
.fold-steps b{
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.fold-steps span{ font-size:.8125rem; line-height:1.65; }

/* Manual open/close per arm — the one part of the section that takes clicks. */
.fold-controls{
  display:flex; flex-wrap:wrap;
  gap:.75rem clamp(1rem,2.5vw,2.25rem);
  margin-top:2rem;
  pointer-events:auto;
}
.ctl-group{ display:flex; align-items:center; gap:.5rem; }
.ctl-group > span{
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45);
  margin-right:.25rem;
}
.ctl-btn{
  background:transparent;
  border:1px solid var(--rule);
  padding:.4rem .8rem;
  font-family:var(--mono);
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-70);
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.ctl-btn:hover{ border-color:var(--ink); color:var(--ink); }
.ctl-btn.is-on{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

.fold-hint{
  margin:1.5rem 0 0;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45);
}
.fold-fallback{ position:absolute; inset:auto var(--pad) 40% var(--pad); }

/* ── card grids ──────────────────────────────────────────── */

.grid-sec{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,10rem) var(--pad);
}
.grid-sec.alt{ background:transparent; }

.cards{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.cards li{
  background:var(--paper);
  padding:clamp(1.75rem,3vw,2.75rem);
  display:flex; flex-direction:column;
}
.cards .num{
  font-size:.6875rem; letter-spacing:.12em;
  color:var(--accent);
  margin-bottom:2.5rem;
}
.cards h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.375rem,1rem + 1.2vw,2rem);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0 0 1rem;
}
.cards p{ margin:0; color:var(--ink-70); max-width:38ch; }

@media (min-width:48rem){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:72rem){ .cards{ grid-template-columns:repeat(3,1fr); }
  .cards.two{ grid-template-columns:repeat(2,1fr); } }

/* ── specs ───────────────────────────────────────────────── */

.specs{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,10rem) var(--pad);
}
.spec-list{
  margin:0; padding:0;
  border-top:1px solid var(--rule);
}
.spec-list > div{
  display:grid;
  grid-template-columns:1fr;
  gap:.25rem;
  padding:1.125rem 0;
  border-bottom:1px solid var(--rule);
}
.spec-list dt{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45);
}
.spec-list dd{
  margin:0;
  font-family:var(--display);
  font-size:1.125rem;
  letter-spacing:-.01em;
}
.spec-list .tbd dd{ color:var(--ink-45); }
@media (min-width:48rem){
  .spec-list > div{ grid-template-columns:18rem 1fr; align-items:baseline; gap:2rem; }
}

/* ── order ───────────────────────────────────────────────── */

.order{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(5rem,14vh,11rem) var(--pad);
}
.order-inner{ max-width:var(--maxw); margin-inline:auto; }
.order .kicker{ color:rgba(242,239,233,.5); }
.order-type{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem,.5rem + 9vw,9.5rem);
  line-height:.9;
  letter-spacing:-.045em;
  margin:0 0 2.5rem;
}
.order-note{
  max-width:46ch;
  color:rgba(242,239,233,.72);
  margin:0 0 3rem;
}

.order-price{
  display:grid;
  gap:1px;
  background:rgba(242,239,233,.18);
  border:1px solid rgba(242,239,233,.18);
  margin:0 0 3rem;
  max-width:56rem;
}
@media (min-width:48rem){ .order-price{ grid-template-columns:repeat(2,1fr); } }
.price-cell{
  background:var(--ink);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column;
}
.price-label{
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.price-amount{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.25rem,1.5rem + 2.5vw,3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:1rem 0 .875rem;
}
.price-sub{
  font-size:.75rem; line-height:1.6;
  color:rgba(242,239,233,.62);
  max-width:34ch;
}

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.125rem 2.5rem;
  background:var(--accent);
  color:#fff;
  border:0;
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-2px); opacity:.92; }

/* ── moving out ──────────────────────────────────────────── */

.moving{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(5rem,12vh,9rem) var(--pad);
}
.moving-inner{ max-width:var(--maxw); margin-inline:auto; }
.moving .kicker{ color:rgba(242,239,233,.5); }
.moving .sec-head{ margin-bottom:clamp(2rem,4vw,3rem); }
.moving-body{
  max-width:60ch;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.moving-body p{
  margin:0 0 1.25rem;
  color:rgba(242,239,233,.72);
}
.moving-body p:last-child{ margin-bottom:0; }

.moving-parts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:rgba(242,239,233,.18);
  border:1px solid rgba(242,239,233,.18);
}
@media (min-width:52rem){ .moving-parts{ grid-template-columns:repeat(3,1fr); } }
.moving-parts li{
  background:var(--ink);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column;
}
.moving-parts .num{
  font-size:.625rem; letter-spacing:.12em;
  color:var(--accent);
  margin-bottom:2rem;
}
.moving-parts b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.125rem,1rem + .7vw,1.5rem);
  letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.moving-parts li > span:last-child{
  font-size:.8125rem; line-height:1.6;
  color:rgba(242,239,233,.62);
}

/* ── wall check ──────────────────────────────────────────── */

.wall{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,10rem) var(--pad);
}
.wall-intro{
  max-width:52ch;
  margin:-2rem 0 2.5rem;
  color:var(--ink-70);
}
.wall-picker{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-bottom:2rem;
}
.wall-btn{
  background:transparent;
  border:1px solid var(--rule);
  padding:.75rem 1.25rem;
  font-family:var(--mono);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-70);
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.wall-btn:hover{ border-color:var(--ink); color:var(--ink); }
.wall-btn.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.wall-result{
  border-left:3px solid var(--accent);
  padding:.25rem 0 .25rem 1.5rem;
  max-width:62ch;
}
.wall-result.is-no{ border-left-color:#B3261E; }
.wall-result.is-warn{ border-left-color:#B8860B; }
.wall-verdict{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  letter-spacing:-.02em;
  margin-bottom:.625rem;
}
.wall-detail{ margin:0; color:var(--ink-70); }

/* ── price anchors ───────────────────────────────────────── */

.price-anchor{
  list-style:none; margin:0 0 3rem; padding:0;
  display:grid; gap:0;
  max-width:56rem;
  border-top:1px solid rgba(242,239,233,.18);
}
.price-anchor li{
  display:grid;
  gap:.25rem 2rem;
  padding:1rem 0;
  border-bottom:1px solid rgba(242,239,233,.18);
}
.price-anchor b{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(242,239,233,.5);
  font-weight:400;
}
.price-anchor span{ color:rgba(242,239,233,.82); font-size:.8125rem; }
.price-anchor li:last-child b{ color:var(--accent); }
@media (min-width:48rem){
  .price-anchor li{ grid-template-columns:16rem 1fr; align-items:baseline; }
}

.price-vat{
  font-size:.75rem;
  color:var(--accent);
  margin-bottom:.875rem;
}

/* ── evidence band ───────────────────────────────────────── */

.evidence{
  background:var(--paper-deep);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(3.5rem,9vh,6.5rem) var(--pad);
}
.evidence-inner{ max-width:var(--maxw); margin-inline:auto; }
.evidence-head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3rem); }
.evidence-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,1.2rem + 3vw,3.25rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 1rem;
}
.evidence-head p{ margin:0; color:var(--ink-70); }

.evidence-list{
  list-style:none; margin:0 0 2rem; padding:0;
  display:grid; gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (min-width:52rem){ .evidence-list{ grid-template-columns:repeat(3,1fr); } }
.evidence-list li{
  background:var(--paper-deep);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.evidence-list b{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,1.5rem + 2vw,3rem);
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:1rem;
}
.evidence-list span{ font-size:.8125rem; line-height:1.65; color:var(--ink-70); }
.evidence-more a{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent;
}
.evidence-more a:hover{ border-bottom-color:var(--accent); }

/* ── study list (science page) ───────────────────────────── */

.study{
  border-top:1px solid var(--rule);
  padding:1.75rem 0;
}
.study h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.0625rem,1rem + .55vw,1.375rem);
  line-height:1.25;
  letter-spacing:-.015em;
  margin:0 0 .5rem;
}
.study h3 a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.study h3 a:hover{ border-bottom-color:var(--accent); }
.study-meta{
  font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-45);
  margin:0 0 1rem;
}
.study-facts{ margin:0; }
.study-facts > div{ display:grid; gap:.25rem 1.5rem; padding:.375rem 0; }
.study-facts dt{
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45);
}
.study-facts dd{ margin:0; font-size:.875rem; color:var(--ink-70); }
@media (min-width:44rem){ .study-facts > div{ grid-template-columns:10rem 1fr; } }

/* ── comparison tables ───────────────────────────────────── */

.cmp-wrap{ overflow-x:auto; margin:2rem 0; }
.cmp{
  width:100%;
  min-width:34rem;
  border-collapse:collapse;
  font-size:.8125rem;
}
.cmp th, .cmp td{
  text-align:left;
  vertical-align:top;
  padding:.875rem 1rem .875rem 0;
  border-bottom:1px solid var(--rule);
}
.cmp thead th{
  font-family:var(--mono);
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500;
  color:var(--accent);
  border-bottom:1px solid var(--ink);
}
.cmp tbody th{
  font-weight:400;
  color:var(--ink-45);
  font-size:.6875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  width:16rem;
}
.cmp td{ color:var(--ink-70); }
.cmp td:first-of-type{ color:var(--ink); }

.hub-list{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--rule); }
.hub-list li{ padding:1.25rem 0; border-bottom:1px solid var(--rule); }
.hub-list a{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.125rem,1rem + .7vw,1.5rem);
  letter-spacing:-.02em;
  text-decoration:none;
  margin-bottom:.5rem;
}
.hub-list a:hover{ color:var(--accent); }
.hub-list span{ font-size:.8125rem; color:var(--ink-70); }

/* ── trust strip ─────────────────────────────────────────── */

.trust{
  display:grid;
  border-bottom:1px solid var(--rule);
}
.trust-item{
  padding:clamp(1.75rem,4vw,2.75rem) var(--pad);
  border-right:1px solid var(--rule);
}
.trust-item:last-child{ border-right:0; }
.trust-item b{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:1.125rem;
  letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.trust-item span{ color:var(--ink-70); font-size:.8125rem; }
@media (min-width:48rem){ .trust{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:47.99rem){
  .trust-item{ border-right:0; border-bottom:1px solid var(--rule); }
  .trust-item:last-child{ border-bottom:0; }
}

/* ── notify band ─────────────────────────────────────────── */

.notify{
  background:var(--paper-deep);
  padding:clamp(3.5rem,8vh,6rem) var(--pad);
  border-bottom:1px solid var(--rule);
}
.notify-inner{ max-width:var(--maxw); margin-inline:auto; }
.notify-inner > b{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);
  letter-spacing:-.025em;
  margin-bottom:1.25rem;
}
.notify-inner > p{
  max-width:62ch;
  margin:0 0 2rem;
  color:var(--ink-70);
}
.notify-form{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:flex-end;
}
.notify-form input{
  font:inherit;
  color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  padding:.625rem 0;
  border-radius:0;
  min-width:min(22rem,100%);
  flex:1 1 16rem;
  transition:border-color .2s;
}
.notify-form input:focus{ outline:none; border-bottom-color:var(--accent); }
/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. */
.hp{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.skip-label{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── faq ─────────────────────────────────────────────────── */

.faq{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,10rem) var(--pad);
}
.faq-list{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0;
  position:relative;
  font-family:var(--display);
  font-size:clamp(1.0625rem,1rem + .5vw,1.5rem);
  letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  color:var(--accent);
  font-family:var(--mono);
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{
  margin:0 0 1.75rem;
  max-width:60ch;
  color:var(--ink-70);
}

/* ── contact ─────────────────────────────────────────────── */

.contact{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,10rem) var(--pad);
}
.form{
  display:grid;
  gap:1.75rem;
  max-width:44rem;
}
@media (min-width:48rem){
  .form{ grid-template-columns:repeat(2,1fr); }
  .field.wide{ grid-column:1/-1; }
  .form .btn{ justify-self:start; grid-column:1/-1; }
}
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45);
}
.field input,.field textarea{
  font:inherit;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:.625rem 0;
  border-radius:0;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.field textarea{ resize:vertical; }
.form-status{
  grid-column:1/-1;
  margin:0;
  font-size:.75rem;
  color:var(--accent);
  min-height:1.2em;
}

/* ── footer ──────────────────────────────────────────────── */

.site-foot{
  border-top:1px solid var(--rule);
  padding:clamp(3rem,7vw,5rem) var(--pad) clamp(2rem,4vw,3rem);
}
.foot-grid{
  max-width:var(--maxw);
  margin-inline:auto;
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:40rem){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }

.foot-brand .logo{ display:inline-block; margin-bottom:1.25rem; }
.foot-brand p{
  margin:0 0 1.25rem;
  max-width:34ch;
  font-size:.8125rem;
  line-height:1.7;
  color:var(--ink-70);
}
.foot-mail{
  font-size:.8125rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color .2s;
}
.foot-mail:hover{ border-bottom-color:var(--accent); }

.foot-col{ display:flex; flex-direction:column; align-items:flex-start; }
.foot-col h2{
  font-family:var(--mono);
  font-weight:400;
  font-size:.625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin:0 0 1.25rem;
}
.foot-col a{
  font-size:.8125rem;
  color:var(--ink-70);
  text-decoration:none;
  padding:.3125rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.foot-col a:hover{ color:var(--ink); border-bottom-color:var(--accent); }

.foot-bar{
  max-width:var(--maxw);
  margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  justify-content:space-between;
}
.foot-bar p{
  margin:0;
  font-size:.6875rem;
  color:var(--ink-45);
}

/* The generated sub-pages keep a single row of links; they inherit the bar. */
.legal-links{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; margin-bottom:1.5rem; }
.legal-links a{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-70); text-decoration:none;
}
.legal-links a:hover{ color:var(--accent); }

/* ── reveal ──────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}

/* ── mobile ──────────────────────────────────────────────── */

@media (max-width:60rem){
  :root{ --head-h:3.75rem; }

  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:2.5rem; height:2.5rem;
    margin-left:auto;
    background:none; border:0; cursor:pointer;
  }
  .burger span{ display:block; height:1px; width:1.5rem; background:var(--ink); transition:transform .25s; }
  .burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:1.25rem;
    padding:2rem var(--pad) 2.5rem;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    margin-left:0;
    transform:translateY(-120%);
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .site-head.is-open .nav{ transform:none; }
  .nav a{ font-size:1rem; }

  .lang{ order:3; margin-left:1rem; }

  /* Portrait crops hard: keep the equipment, not the empty wall, in frame. */
  .hero-img img{ object-position:92% 42%; }
  .hero-type{ max-width:none; }
  .hero-type .l2{ margin-left:.4em; }
  /* Sub-pages have no burger, so the off-canvas nav would be unreachable.
     The logo goes home and the footer carries the rest. */
  .doc-page .nav{ display:none; }

  .hero-meta{ flex-direction:column; gap:1.75rem; }

  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--rule); }

  .fold{ height:380vh; }
  .fold-ui{
    width:100%;
    padding-top:5rem;
    background:linear-gradient(to top, var(--paper-deep) 62%, rgba(231,226,217,0));
  }
  .fold-steps li{ grid-template-columns:1fr; gap:.25rem; border-top:0; padding-top:0; }
  /* One caption at a time — four stacked blocks do not fit a phone. */
  .fold-steps li:not(.is-on){ display:none; }
  .fold-steps b{ display:block; margin-bottom:.5rem; }

  .claim-body{ justify-self:start; }
}

/* No room for the inset on a phone — scene.js skips its WebGL context there too. */
@media (max-width:47.99rem){
  .hero-3d{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}