/* ============================================================
   DARK SCALE — cinematic scroll site
   Palette: #0A0A0F void · #0057FF electric blue · #FFFFFF
   Base styles = desktop. ALL mobile overrides live exclusively
   in the @media (max-width: 768px) block at the end.
   ============================================================ */

/* ---------- fonts (Cairo variable, self-hosted) ---------- */
@font-face{
  font-family:'Cairo';
  src:url('/wp-content/uploads/ds-assets/assets/fonts/cairo-arabic.woff2') format('woff2');
  font-weight:200 1000;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Cairo';
  src:url('/wp-content/uploads/ds-assets/assets/fonts/cairo-latin.woff2') format('woff2');
  font-weight:200 1000;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  --void:#0A0A0F;
  --blue:#0057FF;
  --blue-soft:#7AA5FF;      /* small blue text — 7.7:1 on void */
  --blue-deep:#0B2C66;      /* dark blue surface */
  --blue-veil:6,18,47;
  --white:#FFFFFF;
  --ink:#E9EDF7;            /* body — ~16:1 on void */
  --muted:#A9B2C9;          /* secondary — ~9:1 on void */
  --struck:#8B93AB;         /* cut list — ~6.5:1 on void */
  --line:rgba(122,165,255,.16);
  --pad:clamp(24px,5vw,88px);
  --head-h:76px;
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.js{scroll-behavior:auto}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:'Cairo',system-ui,sans-serif;
  font-weight:400;
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;cursor:pointer}

::selection{background:var(--blue);color:var(--white)}

/* visually hidden, kept for SEO/screen readers */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- film grain ---------- */
body::after{
  content:"";
  position:fixed;inset:-60px;
  pointer-events:none;
  z-index:80;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-24px,14px)}
  40%{transform:translate(18px,-20px)}
  60%{transform:translate(-12px,-16px)}
  80%{transform:translate(22px,18px)}
}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset-block-start:0;inset-inline:0;
  z-index:90;
  height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  background:linear-gradient(to bottom,rgba(10,10,15,.86),rgba(10,10,15,0));
}
.brand-mark img{height:26px;width:auto}
.head-actions{display:flex;align-items:center;gap:14px}
.lang-toggle{
  background:none;border:1px solid var(--line);
  color:var(--blue-soft);
  font-weight:800;font-size:13px;letter-spacing:.08em;
  padding:7px 14px;border-radius:999px;
  transition:color .25s,border-color .25s;
}
.lang-toggle:hover{color:var(--white);border-color:var(--blue-soft)}
.head-cta{
  background:var(--blue-deep);
  border:1px solid rgba(122,165,255,.28);
  color:var(--white);font-weight:800;font-size:14px;
  padding:9px 20px;border-radius:999px;
  transition:background .25s,border-color .25s;
}
.head-cta:hover{background:var(--blue);border-color:var(--blue)}

/* ---------- shared type ---------- */
.kicker{
  font-size:13px;font-weight:800;color:var(--muted);
  text-transform:uppercase;
}
html[lang="en"] .kicker{letter-spacing:.22em}
.kicker-blue{color:var(--blue-soft)}
.sect-title{
  font-weight:900;
  font-size:clamp(34px,4.6vw,72px);
  line-height:1.18;
  color:var(--white);
}
.measure{max-width:760px;margin-inline:auto}

/* ---------- CTA buttons ---------- */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--blue);color:var(--white);
  font-size:20px;font-weight:800;
  padding:18px 38px;border-radius:999px;
  box-shadow:0 0 0 0 rgba(0,87,255,.45), 0 12px 48px rgba(0,87,255,.35);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s,color .3s;
}
.cta:hover{transform:translateY(-3px);background:var(--white);color:var(--void);box-shadow:0 18px 60px rgba(0,87,255,.5)}
.wa-glyph{width:24px;height:24px;flex:none}

/* floating WhatsApp */
.wa-float{
  position:fixed;
  inset-block-end:26px;inset-inline-end:26px;
  z-index:95;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--blue);color:var(--white);
  box-shadow:0 8px 34px rgba(0,87,255,.5);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

/* ---------- cinematic sections (scrub) ---------- */
.cine{position:relative}
.cine.hero{height:230vh}
.cine.problem{height:320vh}
.cine.proof-pin{height:210vh}
.cine-pin{
  position:sticky;inset-block-start:0;
  height:100vh;overflow:hidden;
}
.cine-poster,.cine-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.cine-canvas{opacity:0;transition:opacity .5s}
.seq-ready .cine-canvas{opacity:1}
.no-js .cine-canvas{display:none}
.cine-scrim{position:absolute;inset:0;pointer-events:none}
.scrim-hero{background:linear-gradient(to top,rgba(10,10,15,.92) 0%,rgba(10,10,15,.42) 38%,rgba(10,10,15,.18) 62%,rgba(10,10,15,.45) 100%)}
.scrim-leak{background:linear-gradient(to top,rgba(10,10,15,.9),rgba(10,10,15,.62) 50%,rgba(10,10,15,.5))}
.scrim-ascent{background:radial-gradient(ellipse at center,rgba(10,10,15,.28) 0%,rgba(10,10,15,.66) 100%)}

/* ---------- HERO ---------- */
.hero-copy{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-inline:var(--pad);
  padding-block-start:var(--head-h);
}
.hero-copy .kicker{margin-block-end:18px}
.hero-lead{
  font-size:clamp(19px,2vw,30px);
  font-weight:800;color:var(--ink);
  line-height:1.6;
}
.hero-metric{
  display:flex;align-items:baseline;gap:16px;
  margin-block:6px 16px;
  color:var(--blue);
  font-weight:900;
  text-shadow:0 0 42px rgba(0,87,255,.55);
}
.hero-metric .metric-num{font-size:clamp(58px,7.4vw,128px);line-height:1;letter-spacing:-.01em}
.hero-metric .metric-k{font-size:.72em}
.hero-metric .metric-plus{color:var(--blue-soft);font-size:.72em;margin-inline-start:.04em}
.hero-metric .metric-unit{font-size:clamp(17px,1.6vw,26px);font-weight:800;color:var(--blue-soft)}
.count{font-variant-numeric:tabular-nums}
.hero-sub{
  font-size:clamp(16px,1.5vw,22px);
  color:var(--muted);
  max-width:56ch;
  margin-block-end:34px;
}
.trust-line{
  margin-block-start:22px;
  font-size:13.5px;font-weight:600;color:var(--muted);
}
.scroll-hint{
  position:absolute;inset-block-end:26px;inset-inline:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--muted);font-size:12px;font-weight:700;
}
.scroll-hint i{
  width:1px;height:44px;
  background:linear-gradient(to bottom,var(--blue-soft),transparent);
  animation:hintDrop 1.9s ease-in-out infinite;
}
@keyframes hintDrop{
  0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- PROBLEM — ledger ---------- */
.problem-wrap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--pad);
  padding-block-start:var(--head-h);
  max-width:1240px;margin-inline:auto;
}
.problem-head{margin-block-end:clamp(16px,3vh,44px)}
.problem-head .kicker{margin-block-end:8px}
/* vh caps keep all four ledger rows inside the 100vh pin on short viewports */
.problem-head .sect-title{font-size:min(clamp(34px,4.6vw,72px),6.2vh)}
.ledger{
  display:flex;flex-direction:column;
}
.ledger-row{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:10px 40px;
  align-items:baseline;
  padding-block:clamp(10px,2.2vh,26px);
  border-block-start:1px solid var(--line);
  opacity:.13;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.ledger-row.on{opacity:1;transform:none}
.ledger-row:last-child{border-block-end:1px solid var(--line)}
.ledger-title{
  font-weight:900;
  font-size:min(clamp(22px,2.9vw,44px),4.4vh);
  line-height:1.3;
  color:var(--white);
}
.ledger-cost{
  font-size:min(clamp(14px,1.35vw,19px),2.3vh);
  font-weight:600;
  color:var(--blue-soft);
  text-align:end;
  line-height:1.7;
}

/* ---------- PROOF pin ---------- */
.proof-stat{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-inline:var(--pad);
}
.proof-stat .kicker{margin-block-end:8px}
.stat-huge{
  font-weight:900;
  font-size:clamp(84px,14vw,260px);
  line-height:1;
  color:var(--white);
  letter-spacing:-.015em;
  text-shadow:0 0 90px rgba(0,87,255,.5);
}
.stat-unit{
  font-size:clamp(18px,2vw,30px);
  font-weight:800;color:var(--blue-soft);
  margin-block-start:4px;
}
.stat-line{
  margin-block-start:22px;
  font-size:clamp(17px,1.8vw,26px);
  font-weight:800;color:var(--ink);
}
.stat-dot{color:var(--blue-soft);margin-inline:14px}

/* ---------- PROOF body ---------- */
.proof-body{
  position:relative;
  padding:clamp(48px,7vh,88px) var(--pad);
  background:
    radial-gradient(1000px 480px at 50% -8%,rgba(0,87,255,.14),transparent 70%),
    var(--void);
}
.proof-frame{
  font-size:clamp(20px,2.2vw,32px);
  font-weight:800;line-height:1.9;
  color:var(--white);
}
.readouts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  max-width:760px;
  margin:clamp(24px,3.5vh,40px) auto;
}
.readouts-quiet .readout{border-inline-start-width:1px;padding-inline-start:14px;gap:4px}
.readouts-quiet .readout-label{font-size:10px;color:var(--struck)}
.readouts-quiet .readout-val{font-size:15px;color:var(--muted)}
.readouts-quiet .readout-val::after{width:5px;height:5px;box-shadow:0 0 6px rgba(0,87,255,.6)}
.readout{
  border-inline-start:2px solid var(--blue);
  padding-inline-start:18px;
  display:flex;flex-direction:column;gap:6px;
}
.readout-label{
  font-size:12px;font-weight:800;color:var(--muted);
  text-transform:uppercase;
}
html[lang="en"] .readout-label{letter-spacing:.14em}
.readout-val{
  font-size:clamp(19px,1.7vw,26px);
  font-weight:900;color:var(--blue-soft);
  font-variant-numeric:tabular-nums;
  position:relative;
  padding-inline-end:16px;
}
.readout-val::after{
  content:"";
  position:absolute;inset-block-start:.5em;inset-inline-end:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 10px rgba(0,87,255,.9);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.proof-method{
  font-size:clamp(16px,1.5vw,21px);
  color:var(--ink);
  line-height:2;
}
.proof-meta{
  margin-block-start:22px;
  font-size:clamp(15px,1.4vw,19px);
  font-weight:800;
  color:var(--blue-soft);
}
.proof-shots{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-wrap:wrap;
  gap:26px clamp(20px,3vw,40px);
  max-width:1240px;
  margin:clamp(32px,5vh,52px) auto 0;
}
.shot{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.shot img{
  /* desktop: match by height, let width follow each image's own ratio */
  height:clamp(220px,32vh,420px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0D1120;
}
.shot figcaption{
  margin-block-start:12px;
  font-size:13px;font-weight:700;color:var(--muted);
}

/* ---------- SERVICES — weigh / cut tabs ---------- */
.services{
  padding:clamp(40px,6vh,72px) var(--pad);
  border-block-start:1px solid var(--line);
  max-width:1240px;margin-inline:auto;
}
.serv-tabs{
  display:inline-flex;gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(11,44,102,.16);
  margin-block-end:14px;
}
.serv-tab{
  min-height:44px;
  padding:9px 26px;
  border-radius:999px;
  border:none;
  background:none;
  color:var(--muted);
  font-weight:800;font-size:15px;
  transition:color .2s,background .2s,box-shadow .2s;
}
.serv-tab:hover{color:var(--white)}
.serv-tab.is-active{
  background:var(--blue-deep);
  color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(122,165,255,.35);
}
.serv-card{
  display:grid;
  max-width:820px;
  margin-inline-end:auto;
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(8px,1.5vh,18px) clamp(18px,2.5vw,32px);
  background:rgba(11,44,102,.14);
}
.serv-card>ul{
  grid-area:1/1;
  opacity:1;transform:none;
  transition:opacity .22s ease,transform .22s ease;
}
.serv-card>ul.is-off{
  opacity:0;
  transform:translateY(8px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;
}
.serv-card>ul>li:first-child{border-block-start:0}
.weigh-item,.cut-item{
  font-weight:800;
  font-size:clamp(19px,1.9vw,28px);
  line-height:1.55;
  padding-block:clamp(9px,1.4vh,14px);
  border-block-start:1px solid var(--line);
}
.weigh-item{color:var(--white)}
.weigh-item::after{
  content:"↗";
  color:var(--blue);
  font-size:.5em;
  margin-inline-start:.35em;
  vertical-align:.45em;
}
html[dir="rtl"] .weigh-item::after{content:"↖"}
.cut-item{
  color:var(--struck);
  text-decoration:line-through;
  text-decoration-color:var(--blue);
  text-decoration-thickness:.06em;
}
.services-closer{
  margin-block-start:clamp(22px,3vh,36px);
  font-size:clamp(19px,2vw,28px);
  font-weight:900;
  color:var(--blue-soft);
}

/* ---------- HOW ---------- */
.how{
  padding:clamp(48px,8vh,96px) var(--pad);
  border-block-start:1px solid var(--line);
  max-width:1240px;margin-inline:auto;
}
.how-beats{display:flex;flex-direction:column}
.how-beat{
  min-height:26vh;
  display:flex;flex-direction:column;justify-content:center;
  gap:14px;
}
.how-word{
  font-weight:900;
  font-size:clamp(52px,8.6vw,150px);
  line-height:1.15;
  color:var(--blue);
  text-shadow:0 0 60px rgba(0,87,255,.35);
}
.how-line{
  font-size:clamp(17px,1.8vw,25px);
  color:var(--ink);
  max-width:46ch;
  line-height:1.95;
}

/* ---------- WHO ---------- */
.who{
  padding:clamp(48px,8vh,96px) var(--pad);
  border-block-start:1px solid var(--line);
  max-width:1240px;margin-inline:auto;
}
.who .sect-title{margin-block:10px 32px}
.th-line{
  font-weight:900;
  font-size:clamp(24px,3.4vw,54px);
  line-height:1.5;
  color:var(--white);
  padding-block:clamp(12px,1.8vh,20px);
  border-block-start:1px solid var(--line);
}
.th-line:last-child{border-block-end:1px solid var(--line)}
.th-line b{color:var(--blue);font-weight:900}
.who-closer{
  margin-block-start:28px;
  font-size:clamp(17px,1.8vw,25px);
  font-weight:800;
  color:var(--muted);
}

/* ---------- FINALE ---------- */
.finale{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  text-align:center;
}
.finale-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  animation:glowBreathe 6.5s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.16)}
}
.finale-veil{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(var(--blue-veil),.42) 0%,rgba(var(--blue-veil),.78) 100%);
}
.finale-copy{
  position:relative;
  padding:56px var(--pad);
}
.finale-title{
  font-weight:900;
  font-size:clamp(32px,4.8vw,78px);
  line-height:1.5;
  color:var(--white);
  text-shadow:0 2px 40px rgba(6,18,47,.85);
  margin-block-end:48px;
}
.cta-finale{font-size:22px;padding:22px 52px}

/* ---------- FOOTER ---------- */
.site-foot{
  padding:56px var(--pad) 100px;
  border-block-start:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;
  font-size:14px;color:var(--muted);
}
.foot-brand img{height:38px;width:auto;opacity:.85}
.foot-dot{margin-inline:10px;color:var(--blue-soft)}
.foot-legal,.foot-contact{line-height:2.1}
.foot-contact a{color:var(--ink);font-weight:700;transition:color .25s}
.foot-contact a:hover{color:var(--blue-soft)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}

/* ============================================================
   REDUCED MOTION — collapse to static high-contrast layout
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .cine.hero,.cine.problem,.cine.proof-pin{height:auto}
  .cine-pin{position:relative;height:auto;min-height:100vh}
  .cine-canvas{display:none}
  .cine-poster{position:absolute}
  .ledger-row{opacity:1;transform:none}
  .rv{opacity:1;transform:none}
  .scroll-hint{display:none}
  body::after{animation:none}
}

/* ============================================================
   MOBILE ≤ 768px — same cinematic pin/scrub mechanism as desktop,
   scaled down (shorter scrub distances, smaller type). Canvas
   visibility is gated by the `cinematic` class main.js applies to
   <html> (added whenever `cinematic` is true), not a flat override —
   this way prefers-reduced-motion and any future no-JS/failure case
   still fall back to the static poster automatically.
   ============================================================ */
@media (max-width: 768px){
  :root{--pad:20px;--head-h:64px}
  body{font-size:15.5px}

  body::after{opacity:.04}

  .site-head{background:linear-gradient(to bottom,rgba(10,10,15,.94),rgba(10,10,15,0))}
  .brand-mark img{height:21px}
  .head-cta{font-size:12.5px;padding:8px 14px}
  .lang-toggle{font-size:12px;padding:6px 11px}

  /* scaled-down scrub distances (desktop: 230/320/210vh) */
  .cine.hero{height:150vh}
  .cine.problem{height:190vh}
  /* taller than the hero/problem ratio would suggest: this pin still has to carry
     100 ascent frames, and short mobile viewports leave little scroll-through
     distance per vh, so it needs more runway to avoid burning through frames. */
  .cine.proof-pin{height:190vh}
  /* canvas hidden by default (reduced-motion / pre-JS state); the
     `cinematic` class on <html> re-enables it, then the existing
     .seq-ready opacity fade (base rules above) takes over exactly
     as it does on desktop. */
  .cine-canvas{display:none}
  html.cinematic .cine-canvas{display:block}
  .cine-poster{
    max-width:none;
    animation:posterBreathe 7s ease-in-out infinite;
  }
  #hero .cine-poster{transform:scale(.8);transform-origin:center center}
  .finale{position:relative}
  .finale-bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    max-width:none;
    object-fit:cover;
  }
  @keyframes posterBreathe{
    0%,100%{filter:brightness(1)}
    50%{filter:brightness(1.14)}
  }

  /* HERO */
  .hero-copy{
    justify-content:center;
    padding-block-end:88px;
    padding-block-start:calc(var(--head-h) + 40px);
  }
  .hero-lead{font-size:17px}
  .hero-metric{gap:10px;margin-block:4px 10px}
  .hero-metric .metric-num{font-size:64px}
  .hero-metric .metric-unit{font-size:15px}
  .hero-sub{font-size:14.5px;margin-block-end:24px}
  .cta{font-size:17px;padding:15px 28px}
  .trust-line{font-size:12px;margin-block-start:16px}
  .scroll-hint{display:none}

  /* PROBLEM */
  .problem-wrap{
    justify-content:flex-start;
    padding-block:calc(var(--head-h) + 24px) 48px;
  }
  .ledger-row{
    grid-template-columns:1fr;
    gap:8px;
    padding-block:14px;
  }
  .ledger-cost{text-align:start;font-size:14px}
  .ledger-title{font-size:21px}

  /* PROOF */
  .proof-stat{
    padding-block:calc(var(--head-h) + 16px) 36px;
  }
  .stat-huge{font-size:clamp(72px,21vw,96px)}
  .stat-line{font-size:16px}
  .stat-dot{margin-inline:9px}

  .proof-body{padding-block:36px 40px}
  .proof-frame{font-size:18px}
  .readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:24px}
  .readouts-quiet .readout-val{font-size:14px;overflow-wrap:anywhere;padding-inline-end:12px}
  .proof-method{font-size:15px}
  /* mobile: stacked full-width instead of side-by-side — the ads-manager
     table has 10+ columns, and no partial-width split ever showed more
     than 2-3 of them legibly. Full viewport width is the only way to get
     every column on screen, at the cost of a taller section. */
  .proof-shots{flex-direction:column;align-items:stretch;gap:24px;margin-block-start:32px}
  .shot{width:100%}
  .shot img{height:auto;width:100%;max-width:100%}
  .shot figcaption{font-size:11px;margin-block-start:8px}

  /* editorial sections */
  .services{padding-block:36px}
  .serv-tabs{display:flex;width:100%;gap:4px;padding:4px;margin-block-end:12px}
  .serv-tab{flex:1;min-height:44px;font-size:13.5px;padding:8px 10px}
  .serv-card{max-width:none;padding:2px 14px;border-radius:12px}
  .weigh-item,.cut-item{font-size:16.5px;padding-block:9px}
  .services-closer{font-size:18px;margin-block-start:20px}
  .how{padding-block:40px}
  .how-beat{min-height:0;padding-block:16px;gap:8px}
  .how-word{font-size:clamp(44px,12vw,64px)}
  .how-line{font-size:15.5px}
  .who{padding-block:40px}
  .th-line{font-size:clamp(19px,5.4vw,28px);padding-block:10px}
  .who-closer{font-size:15.5px;margin-block-start:20px}

  /* FINALE */
  .finale{min-height:80svh}
  .finale-bg{animation-duration:5.5s}
  .finale-title{font-size:clamp(26px,7.2vw,36px);margin-block-end:34px}
  .cta-finale{font-size:17px;padding:16px 32px}

  .site-foot{padding-block:36px 84px;font-size:12.5px}

  .wa-float{
    inset-block-end:18px;inset-inline-end:18px;
    width:54px;height:54px;
  }
  .wa-float svg{width:27px;height:27px}
}