/* ============================================================
   AQUACAST INTERNATIONAL — style.css
   Designed & built by Designerfist
   Editorial-engineering system · concrete + water + precision
   Display: Archivo · Body: IBM Plex Sans · Utility: IBM Plex Mono
   ============================================================ */

:root{
  /* Surfaces */
  --paper:#EDF1F2;          /* default section background — cool concrete white */
  --paper-2:#E2E8EA;        /* alternating section background */
  --ink:#0C1A20;            /* dark/inverted sections */
  --ink-2:#0F232B;          /* dark surface card */

  /* Text */
  --text:#16262C;           /* primary text on paper */
  --text-soft:#45585F;      /* secondary text on paper */
  --steel:#6E828A;          /* muted labels on light (referenced inline) */
  --steel-light:#A6BAC0;    /* muted labels on dark (referenced inline) */
  --ink-on-dark:#EAF1F2;    /* primary text on dark */

  /* Brand */
  --accent:#15869A;         /* teal — links & primary on light (AA contrast) */
  --accent-bright:#19A0B8;  /* brighter teal — accents on dark */
  --accent-deep:#0E6678;    /* hover */

  /* Lines */
  --line:#D1D9DB;           /* hairline on light */
  --line-2:#C2CCCE;
  --line-dark:rgba(166,186,192,.16);

  /* Type */
  --f-display:"Archivo",system-ui,-apple-system,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Layout */
  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --radius:3px;             /* engineering-precise, near-square */
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--text);margin:0;line-height:1.08;letter-spacing:-.015em}
p{margin:0 0 1rem}
:focus-visible{outline:2.5px solid var(--accent-bright);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Type roles ---------- */
h1{font-size:clamp(2.35rem,5.2vw,4.05rem);font-weight:800}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(1.65rem,3.1vw,2.5rem);font-weight:700}
h3{font-size:1.16rem;font-weight:600;margin-bottom:.45rem}
h4{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-family:var(--f-mono)}

.lede{font-size:1.2rem;line-height:1.6;color:var(--text);font-weight:400}
.measure{max-width:46ch}
.measure p{color:var(--text-soft)}

/* Eyebrow — the editorial signature. data-index renders as a mono tag. */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1rem;
  display:flex;align-items:center;gap:.7em;
}
.eyebrow::before{
  content:attr(data-index);
  color:var(--steel);
  font-weight:500;
  border:1px solid var(--line-2);
  border-radius:2px;
  padding:.18em .5em;
  letter-spacing:.05em;
}
.eyebrow::after{content:"";flex:0 0 28px;height:1px;background:var(--line-2)}

/* Breadcrumbs */
.crumbs{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;color:var(--steel);text-transform:uppercase;margin:0 0 1.4rem}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--accent)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--accent);--fg:#fff;--bd:var(--accent);
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-mono);font-size:.82rem;font-weight:600;letter-spacing:.04em;
  padding:.85em 1.4em;border-radius:var(--radius);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  cursor:pointer;transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-transform:uppercase;
}
.btn:hover{transform:translateY(-2px)}
.btn__arrow{transition:transform .2s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--primary{--bg:var(--accent);--fg:#fff;--bd:var(--accent)}
.btn--primary:hover{--bg:var(--accent-deep);--bd:var(--accent-deep);color:#fff}

.btn--ghost{--bg:transparent;--fg:var(--ink-on-dark);--bd:rgba(166,186,192,.4)}
.btn--ghost:hover{--bg:rgba(255,255,255,.06);--fg:#fff;--bd:var(--accent-bright)}

.btn--outline{--bg:transparent;--fg:var(--accent);--bd:var(--accent)}
.btn--outline:hover{--bg:var(--accent);--fg:#fff}

/* ---------- Header / nav ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(237,241,242,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.6em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand__mark{flex:0 0 auto}
.brand__name{font-family:var(--f-display);font-weight:800;font-size:1.02rem;letter-spacing:.02em;line-height:1;display:flex;flex-direction:column}
.brand__sub{font-family:var(--f-mono);font-weight:500;font-size:.56rem;letter-spacing:.22em;color:var(--steel);margin-top:.25em}

.nav{display:flex;align-items:center;gap:.4rem}
.nav a{font-family:var(--f-mono);font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--text);padding:.5em .85em;border-radius:var(--radius);text-transform:uppercase}
.nav a:hover{color:var(--accent);background:rgba(21,134,154,.07)}
.nav a.is-active{color:var(--accent)}
.nav__cta{background:var(--accent);color:#fff!important;border:1.5px solid var(--accent)}
.nav__cta:hover{background:var(--accent-deep)!important;border-color:var(--accent-deep)}

.nav-toggle{display:none;width:42px;height:38px;border:1px solid var(--line-2);border-radius:var(--radius);background:transparent;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--text);transform:translate(-50%,-50%);transition:.2s ease}
.nav-toggle span::before{transform:translate(-50%,-7px)}
.nav-toggle span::after{transform:translate(-50%,5px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(56px,8vw,108px)}
.section--tight{padding-block:clamp(40px,5vw,68px)}
.section--paper2{background:var(--paper-2)}
.section--ink{background:var(--ink);color:var(--ink-on-dark)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--ink-on-dark)}
.section--ink p{color:var(--steel-light)}
.section--ink .eyebrow{color:var(--accent-bright)}
.section--ink .eyebrow::before{border-color:var(--line-dark);color:var(--steel-light)}
.section--ink .eyebrow::after{background:var(--line-dark)}
.section--ink .lede{color:var(--ink-on-dark)}

.head-block{max-width:62ch;margin-bottom:clamp(32px,4vw,52px)}
.head-block h2{margin-bottom:.5rem}

/* split — two-column responsive (text + figure) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split > .measure{max-width:48ch}

/* notch — engineering divider */
.notch{height:1px;background:var(--line);position:relative;margin-block:8px}
.notch::before{content:"";position:absolute;left:0;top:-3px;width:46px;height:7px;background:var(--accent);border-radius:2px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}

/* slow ambient water drift — makes the hero feel alive, not frozen */
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  animation:heroDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.06) translate(0,0)}
  to{transform:scale(1.15) translate(-2%,-1.5%)}
}

/* dark tint + soft teal glow for depth */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(125% 80% at 16% 32%, rgba(20,134,154,.30) 0%, transparent 56%),
    linear-gradient(180deg,rgba(8,18,23,.52) 0%,rgba(8,18,23,.70) 55%,rgba(8,18,23,.95) 100%)}

/* content column — left-aligned, matched to the rest of the page (fixes the centering) */
.hero__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-block:clamp(96px,15vw,184px) clamp(44px,7vw,84px);
}
.hero .eyebrow,
.hero h1,
.hero__lede,
.hero__actions{max-width:56ch}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero h1 em{color:var(--accent-bright)}
.hero__lede{font-size:1.22rem;line-height:1.6;color:#DCE7E9;margin-bottom:1.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* frosted-glass eyebrow chip */
.hero .eyebrow{color:var(--accent-bright)}
.hero .eyebrow::before{
  border-color:rgba(255,255,255,.30);color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero .eyebrow::after{background:rgba(255,255,255,.24)}

/* frosted-glass "ghost" button */
.hero .btn--ghost{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border-color:rgba(255,255,255,.30);
}
.hero .btn--ghost:hover{background:rgba(255,255,255,.16);border-color:var(--accent-bright)}

/* soft entrance — text rises in as the page loads */
.hero .eyebrow{animation:heroRise .7s .05s both cubic-bezier(.2,.7,.2,1)}
.hero h1{animation:heroRise .8s .15s both cubic-bezier(.2,.7,.2,1)}
.hero__lede{animation:heroRise .8s .27s both cubic-bezier(.2,.7,.2,1)}
.hero__actions{animation:heroRise .8s .39s both cubic-bezier(.2,.7,.2,1)}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---- glassmorphism spec strip ---- */
.specstrip{
  position:relative;z-index:1;
  background:rgba(12,26,32,.40);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  animation:heroRise .8s .5s both cubic-bezier(.2,.7,.2,1);
}
.specstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.spec{padding:22px 4px 22px 26px;position:relative}
.spec + .spec::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(255,255,255,.12)}
.spec__n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,2.4vw,2rem);color:#fff;line-height:1}
.spec__l{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;color:var(--steel-light);margin-top:.5em;line-height:1.4}

/* ---- W-block sketch masthead band ---- */
.mastband{line-height:0;position:relative;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.mastband img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover;object-position:center 60%}
.mastband__tag{position:absolute;left:var(--gut);bottom:12px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#06304a;background:rgba(255,255,255,.55);padding:4px 9px;border-radius:var(--radius)}
@media(max-width:640px){.mastband img{max-height:150px}}

/* ---------- Page head ---------- */
.phead{background:var(--ink);color:#fff;padding-block:clamp(64px,10vw,120px) clamp(40px,6vw,72px)}
.phead h1{color:#fff;max-width:18ch;margin-bottom:1rem}
.phead > .wrap > p{color:#C7D4D7;font-size:1.16rem;max-width:60ch}
.phead .crumbs,.phead .crumbs a{color:var(--steel-light)}

/* ---------- Cards (3 pillars) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.card{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px 26px 30px;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(25,160,184,.5)}
.card__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:1.3rem}
.card h3{color:#fff}
.card p{color:var(--steel-light);margin-bottom:0;font-size:.98rem}

/* ---------- Tiles (applications preview) ---------- */
.tilelist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tile{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;color:var(--text);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.section--ink .tile{background:var(--ink-2);border-color:var(--line-dark)}
.tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px -18px rgba(15,35,43,.5);color:var(--text)}
.tile__idx{font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--accent);display:block;margin-bottom:.9rem}
.tile h3{margin-bottom:.5rem}
.tile p{color:var(--text-soft);font-size:.95rem;margin-bottom:1rem}
.tile__go{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.section--ink .tile h3{color:#fff}
.section--ink .tile p{color:var(--steel-light)}

/* ---------- Frame (figure with image) ---------- */
.frame{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;background:
  repeating-linear-gradient(135deg,#dfe6e8 0 14px,#d6dee0 14px 28px)}
.frame figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;color:var(--steel);padding:12px 16px;background:var(--paper);border-top:1px solid var(--line)}
.frame--dark{border-color:var(--line-dark);background:#0a151a}
.frame--dark figcaption{color:var(--steel-light);background:#0a151a;border-top-color:var(--line-dark)}

/* ---------- Photo gallery (before / during / after) ---------- */
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px);margin-top:clamp(20px,3vw,30px)}
.photogrid .frame{margin:0}
@media(max-width:900px){.photogrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.photogrid{grid-template-columns:1fr}}

/* ---------- Video (product animations) ---------- */
/* Source clips are small (192px); centre them on a dark stage so they read as
   a deliberate media player rather than an upscaled, blurry stretch. */
.videogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.videoframe{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-dark);background:#0a151a}
.videostage{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, rgba(20,134,154,.16) 0%, transparent 60%), #0a151a;
  padding:clamp(22px,4vw,44px)}
.videoframe video{width:100%;max-width:360px;height:auto;display:block;border-radius:2px;
  background:#000;box-shadow:0 16px 44px -22px rgba(0,0,0,.85)}
.videoframe figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;color:var(--steel-light);padding:13px 16px;background:#0a151a;border-top:1px solid var(--line-dark)}
.videoframe figcaption b{color:var(--accent-bright);font-weight:600}

/* ---------- Featured film (full-width 16:9 YouTube embed) ---------- */
.filmframe{max-width:940px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-dark);background:#0a151a;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.filmframe iframe,.filmframe video{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}
.filmframe figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--steel-light);padding:13px 16px;background:#0a151a;border-top:1px solid var(--line-dark)}
.filmframe figcaption b{color:var(--accent-bright);font-weight:600}

/* ---------- Data rows & spec lists ---------- */
.datarow{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.section--ink .datarow{border-top-color:var(--line-dark)}
.datarow span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;color:var(--text-soft)}
.section--ink .datarow span{color:var(--steel-light)}
.datarow b{color:var(--accent);font-weight:600}

.speclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.speclist li{position:relative;padding:.85em 0 .85em 1.7em;border-bottom:1px solid var(--line);color:var(--text-soft);font-size:.97rem}
.speclist li::before{content:"";position:absolute;left:0;top:1.25em;width:8px;height:8px;background:var(--accent);border-radius:1px}

/* ---------- Downloads ---------- */
.downloads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dl{display:flex;flex-direction:column;gap:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;color:var(--text);transition:transform .18s ease,border-color .18s ease}
.section--paper2 .dl{background:#fff}
.dl:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--text)}
.dl__type{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.dl h3{margin:0}
.dl > span:last-child{font-family:var(--f-mono);font-size:.76rem;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-top:auto}

/* ---------- Quote ---------- */
.quote{margin:0;max-width:60ch}
.quote p{font-family:var(--f-display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;color:#fff;margin-bottom:1.2rem}
.quote p::before{content:"\201C";color:var(--accent-bright)}
.quote p::after{content:"\201D";color:var(--accent-bright)}
.quote cite{font-family:var(--f-mono);font-style:normal;font-size:.8rem;letter-spacing:.05em;color:var(--steel-light);text-transform:uppercase}

/* ---------- Contact ---------- */
.contactgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contactcard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;border-top:3px solid var(--accent)}
.role{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem}
.contactcard h3{margin-bottom:.25rem}
.contactcard .title{font-size:.92rem;color:var(--text-soft);margin-bottom:1rem}
.contactcard address{font-style:normal;font-size:.95rem;color:var(--text-soft);line-height:1.6;margin-bottom:1.1rem}
.links{display:flex;flex-direction:column;gap:.45rem}
.links a,.links span{font-family:var(--f-mono);font-size:.82rem;color:var(--text);letter-spacing:.01em}
.links a:hover{color:var(--accent)}
.links span span{color:var(--steel);margin-right:.4em;text-transform:uppercase;font-size:.72rem}

/* ---------- Footer ---------- */
.site-foot{background:#081318;color:var(--steel-light);padding-block:clamp(48px,6vw,72px) 32px;border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.foot-brand .brand__name{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:.04em;display:block;margin-bottom:.9rem}
.foot-brand p{font-size:.92rem;color:var(--steel-light);max-width:42ch;margin:0}
.site-foot h4{color:#fff;margin-bottom:1rem}
.site-foot a{display:block;color:var(--steel-light);font-size:.92rem;padding:.28em 0}
.site-foot a:hover{color:var(--accent-bright)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px}
.foot-base span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--steel)}

/* ---------- Reveal on scroll ---------- */
/* Visible by default. Only hidden once JS adds .anim — so content never gets stuck. */
.anim .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .75s cubic-bezier(.22,.7,.2,1), transform .75s cubic-bezier(.22,.7,.2,1);
  will-change:opacity,transform;
}
.anim .reveal--left{transform:translateX(-44px)}
.anim .reveal--right{transform:translateX(44px)}
.anim .reveal--scale{transform:scale(.93)}
.anim .reveal.is-in{opacity:1;transform:none}

/* Scroll-reactive header — tightens and lifts as you scroll */
.site-head{transition:box-shadow .3s ease, background .3s ease}
.site-head.is-scrolled{box-shadow:0 6px 30px -16px rgba(8,18,23,.45);background:rgba(237,241,242,.94)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gut) 18px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s ease}
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:.85em .4em;border-radius:0;border-bottom:1px solid var(--line)}
  .nav__cta{margin-top:10px;border-radius:var(--radius);text-align:center;justify-content:center;border-bottom:1.5px solid var(--accent)}
  .split{grid-template-columns:1fr}
  .cards,.downloads,.contactgrid{grid-template-columns:1fr}
  .tilelist{grid-template-columns:1fr}
  .videogrid{grid-template-columns:1fr}
  .specstrip .wrap{grid-template-columns:repeat(2,1fr);gap:1px}
  .spec{padding:18px 4px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:430px){
  body{font-size:16px}
  .specstrip .wrap{grid-template-columns:1fr 1fr}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .anim .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .btn:hover,.card:hover,.tile:hover,.dl:hover{transform:none}
  .hero__media img{animation:none;transform:scale(1.04)}
  .hero .eyebrow,.hero h1,.hero__lede,.hero__actions,.specstrip{animation:none;opacity:1;transform:none}
}

/* ---- Design-data table (whole table visible; scrolls on small screens) ---- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tableframe{width:100%;min-width:640px;margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 14px 40px rgba(22,38,44,.08)}
.tableframe img{display:block;width:100%;height:auto}
.tableframe figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;color:var(--steel);padding:12px 16px;background:var(--paper);border-top:1px solid var(--line)}

/* ---------- Print ---------- */
@media print{
  .site-head,.nav-toggle,.specstrip,.hero__media{display:none}
  body{background:#fff;color:#000}
}