/* ══════════════════════════════════════════════════════════════
   AMIN ENTERPRISE  ·  AE
   Synthesis of the four directions, one idea taken from each:

     A · Heritage   → Playfair Display for display type, with the
                      accent word set in brass italic. Premium,
                      established — and rare in this sector.
     B · Blueprint  → a drafting grid drawn across the dark bands,
                      and technical labels in tracked caps.
     C · Bold       → condensed numerals at scale, plus exactly one
                      loud moment (the CTA band) so the restraint
                      elsewhere reads as a choice, not timidity.
     D · Corporate  → the calm light surface, generous whitespace,
                      and a deep FOREST as the dark — not navy,
                      not black, which is what makes it ours.

   Logo red carries every action, so the site and the mark agree.
   Class names unchanged; the templates keep working untouched.
══════════════════════════════════════════════════════════════ */

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

:root{
  /* ── Dark: deep forest, from direction D ── */
  --ink:#0F1D19;
  --ink-2:#162923;
  --ink-3:#223A32;

  /* ── Light: warm ivory, from A / C ── */
  --paper:#F4F1EA;
  --paper-2:#EBE7DC;
  --paper-3:#E0DACB;
  --white:#FCFAF5;

  /* ── Brass: the quiet accent, from A ── */
  --brass:#B08D46;
  --brass-2:#8E7038;
  --brass-050:#F3EBDA;

  /* ── Logo red: every action ── */
  --red:#C1121F;
  --red-700:#960D18;
  --red-050:#FAE9EA;

  --mid:#5F6B65;
  --mid-2:#8A948E;
  --line:#DCD6C7;
  --line-2:#C8C0AC;
  --line-dark:rgba(176,141,70,.22);

  --ff-display:'Playfair Display',Georgia,serif;
  --ff-body:'Jost','Segoe UI',sans-serif;
  --ff-num:'Barlow Condensed','Arial Narrow',sans-serif;

  --nav-h:82px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,4vw,54px);
  /* B · the drafting grid */
  --grid:linear-gradient(rgba(176,141,70,.07) 1px,transparent 1px),
         linear-gradient(90deg,rgba(176,141,70,.07) 1px,transparent 1px);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);background:var(--paper);color:var(--mid);
  font-size:16.5px;line-height:1.75;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::selection{background:var(--brass);color:var(--ink)}

.container{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--red);color:#fff;padding:14px 22px}
.skip:focus{left:0}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ══ TYPE ═════════════════════════════════════════════════ */
h1,h2,h3,h4,h5{font-family:var(--ff-display);color:var(--ink);font-weight:600;line-height:1.1;letter-spacing:-.015em}
.h-sec{font-size:clamp(29px,3.7vw,50px);line-height:1.06;font-weight:600;text-wrap:balance}
/* A · the accent word, brass italic */
.h-sec .thin{font-style:italic;font-weight:500;color:var(--brass)}
.h-sec .red{color:var(--red)}
.h-sec .blue{font-style:italic;color:var(--brass)}

/* Sentence-per-line headings. Each sentence gets its own line so a
   two-part statement never wraps mid-phrase on a phone, and the
   second sentence carries the accent colour. On the dark bands the
   accent switches to brass — logo red on deep forest is unreadable. */
.h-sec .ln{display:block}
.h-sec .ln + .ln{margin-top:.06em}
.sec-blue .h-sec .red,.scrolly .h-sec .red,
.sec-blue .h-sec .ln.red,.scrolly .h-sec .ln.red{color:var(--brass)}

/* B · technical label */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;font-family:var(--ff-body);
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-2);margin-bottom:20px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--brass);flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.on-blue{color:var(--brass)}

.lede{font-size:clamp(15.5px,1.4vw,18px);line-height:1.78;color:var(--mid);font-weight:300}
.head-center{max-width:790px;margin:0 0 clamp(34px,4.4vw,58px)}
.head-center .eyebrow.center{justify-content:flex-start}
.head-center .lede{margin-top:16px}
.rule{display:block;width:64px;height:1px;background:var(--brass);margin:22px 0 24px}
.prose p{margin-bottom:16px}
.prose p:last-of-type{margin-bottom:0}

/* ══ BUTTONS ══════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--ff-body);
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 28px;border:1px solid transparent;border-radius:0;text-decoration:none;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn .icon{font-size:14px;transition:transform .22s var(--ease)}
.btn:hover .icon{transform:translateX(4px)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-700);border-color:var(--red-700)}
.btn-outline{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn-ghost-white{background:transparent;border-color:rgba(244,241,234,.32);color:var(--paper)}
.btn-ghost-white:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ══ TOP BAR ══════════════════════════════════════════════ */
.topbar{background:var(--ink);color:rgba(244,241,234,.62);min-height:36px;display:flex;align-items:center;font-size:12px;padding:6px 0;font-weight:300}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:6px 24px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:6px 26px;flex-wrap:wrap;min-width:0}
.topbar a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;transition:color .2s}
.topbar a:hover{color:var(--brass)}
.topbar .icon{font-size:12px;color:var(--brass);flex:none}
.topbar-right{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.4);white-space:nowrap}

/* ══ HEADER ═══════════════════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:300;background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;transition:height .25s var(--ease)}
.site-header.stuck .header-inner{height:68px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.brand img{width:46px;height:46px;object-fit:contain;flex:none;transition:width .25s,height .25s}
.site-header.stuck .brand img{width:40px;height:40px}
.brand-rule{width:1px;height:32px;background:var(--line-2);flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand-name{font-family:var(--ff-display);font-size:22px;font-weight:600;letter-spacing:.01em;color:var(--ink);text-transform:uppercase}
.brand-sub{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid-2);font-weight:500;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:32px}
.nav a{position:relative;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--mid);padding:5px 0;transition:color .2s}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:13px}
.burger{display:none;place-items:center;width:46px;height:46px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-size:19px}

/* ══ HERO ═════════════════════════════════════════════════ */
.hero{background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-bg,.hero-slash,.hero-inner{display:none}

/* ── Hero lattice ──────────────────────────────────────────
   A full-bleed canvas behind the hero. The mask is what makes it
   usable as a background rather than a distraction: the lattice is
   erased where the headline sits and only reaches full strength out
   on the right, so nothing ever competes with the type. .no-viz is
   set by app.js when WebGL is unavailable. */
.hero-viz{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 22%,rgba(0,0,0,.45) 48%,#000 76%);
          mask-image:linear-gradient(100deg,transparent 0%,transparent 22%,rgba(0,0,0,.45) 48%,#000 76%);
}
.hero-viz canvas{display:block;width:100%!important;height:100%!important}
.hero.no-viz .hero-viz{display:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,20vw,270px);align-items:stretch;position:relative;z-index:1}
.hero-main{padding:clamp(48px,6.5vw,100px) clamp(28px,4vw,64px) clamp(44px,5.5vw,84px) 0;border-right:1px solid var(--line)}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:clamp(22px,3vw,38px);
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-2);
}
.hero-eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--red);position:relative;flex:none}
.hero-eyebrow .pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--red);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(3.4);opacity:0}100%{opacity:0}}

/* A · serif display, accent word in brass italic */
.hero h1{font-family:var(--ff-display);color:var(--ink);font-size:clamp(42px,7.4vw,102px);line-height:1.0;letter-spacing:-.025em;font-weight:600;margin-bottom:clamp(22px,2.8vw,34px)}
.hero h1 .thin{font-style:italic;font-weight:500;color:var(--brass)}
.hero h1 .red{color:var(--red)}
.hero p.hero-sub{font-size:16.5px;line-height:1.82;max-width:54ch;margin-bottom:clamp(26px,3vw,38px);color:var(--mid);font-weight:300}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* C · condensed numerals */
.hero-data{display:flex;flex-direction:column;justify-content:center}
.hero-data .stat{padding:clamp(16px,2.1vw,26px) 0 clamp(16px,2.1vw,26px) clamp(20px,2.4vw,32px);border-bottom:1px solid var(--line)}
.hero-data .stat:last-child{border-bottom:none}
.stat b{display:block;font-family:var(--ff-num);font-size:clamp(34px,3.6vw,50px);font-weight:600;color:var(--ink);line-height:.94;letter-spacing:.005em}
.stat span{display:block;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mid-2);margin-top:9px}
/* Standalone figure grid (About page). This used to be display:contents,
   which dissolved the box and left the figures stacked in a narrow
   column with the rest of the row empty. */
.stats-strip{display:contents}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.stats-grid .stat{padding:clamp(24px,3vw,38px) clamp(18px,2.2vw,30px) clamp(24px,3vw,38px) 0;border-right:1px solid var(--line)}
.stats-grid .stat:last-child{border-right:none}

/* ══ SPEC BAR ═════════════════════════════════════════════ */
.specbar{border-bottom:1px solid var(--line);background:var(--paper-2)}
.specbar dl{display:grid;grid-template-columns:repeat(5,1fr)}
.specbar dl > div{padding:15px 0 15px clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.specbar dl > div:first-child{border-left:none;padding-left:0}
.specbar dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid-2);font-weight:500}
.specbar dd{font-family:var(--ff-num);font-size:19px;font-weight:600;color:var(--ink);margin-top:3px;letter-spacing:.01em}

/* ══ TICKER ═══════════════════════════════════════════════ */
.ticker{background:var(--ink);overflow:hidden;white-space:nowrap;padding:12px 0;position:relative;background-image:var(--grid);background-size:38px 38px}
.ticker-spaced{margin-top:0}
.ticker-track{display:inline-flex;animation:slide 58s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:22px;padding:0 22px;font-family:var(--ff-num);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.ticker-track span::after{content:'';width:4px;height:4px;background:var(--brass);transform:rotate(45deg)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══ SECTIONS ═════════════════════════════════════════════ */
main{counter-reset:sec}
.section{padding:clamp(56px,7.2vw,110px) 0;position:relative;border-bottom:1px solid var(--line)}
.section .container{position:relative}
.section > .container::before{
  counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-family:var(--ff-num);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--line-2);
  position:absolute;top:-4px;left:calc(var(--gut) * -1 + 4px);
}
.section.tint{background:var(--paper-2)}
/* B · dark band carries the drafting grid */
.section.sec-blue{background:var(--ink);background-image:var(--grid);background-size:46px 46px;border-bottom-color:var(--ink-3)}
.section.sec-blue h2,.section.sec-blue h3{color:var(--paper)}
.section.sec-blue .lede{color:rgba(244,241,234,.6)}
.section.sec-blue > .container::before{color:var(--ink-3)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(30px,4.4vw,76px);align-items:center}
.split.wide-text{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.split.flip .fig{order:2}

.fig{position:relative;border:1px solid var(--line)}
.fig img{width:100%;height:clamp(270px,34vw,440px);object-fit:cover;filter:sepia(.14) saturate(.82) contrast(1.03);transition:filter .6s var(--ease)}
.fig:hover img{filter:none}
.fig .badge{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);padding:14px 20px}
.fig .badge b{display:block;font-family:var(--ff-num);font-size:24px;line-height:1;font-weight:600;color:var(--brass)}
.fig .badge span{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-top:5px;display:block}

.tick-list{list-style:none;margin:26px 0 0;display:grid;border-top:1px solid var(--line)}
.tick-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;font-size:15px;line-height:1.7;padding:14px 0;border-bottom:1px solid var(--line)}
.tick-list .icon{font-size:15px;color:var(--brass);margin-top:5px}
.tick-list b{color:var(--ink);font-weight:500}

/* ══ TILES — index ════════════════════════════════════════ */
.tiles{display:block;counter-reset:tile;border-top:1px solid var(--line-2)}
.tiles.cols-3{display:block}
.tile{
  position:relative;display:grid;grid-template-columns:auto minmax(0,3.2fr) minmax(0,5fr) auto;
  grid-template-rows:auto auto;gap:2px clamp(16px,2.6vw,40px);
  padding:clamp(20px,2.7vw,34px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background .28s var(--ease),padding-left .28s var(--ease);
}
.tile::before{content:counter(tile,decimal-leading-zero);counter-increment:tile;grid-column:1;grid-row:1/3;align-self:center;font-family:var(--ff-num);font-size:14px;font-weight:600;color:var(--line-2);transition:color .28s}
.tile:hover{background:var(--paper);padding-left:clamp(10px,1.6vw,22px)}
.tile:hover::before{color:var(--brass)}
.tile-ico{display:none}
.tile .count{grid-column:2;grid-row:1;align-self:end;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mid-2)}
.tile h3{grid-column:2;grid-row:2;align-self:start;font-size:clamp(19px,2.2vw,28px);letter-spacing:-.02em;margin:0}
.tile p{grid-column:3;grid-row:1/3;align-self:center;font-size:14.5px;line-height:1.7;margin:0}
.tile .go{grid-column:4;grid-row:1/3;align-self:center;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.tile .go .icon{font-size:14px;transition:transform .22s var(--ease)}
.tile:hover .go .icon{transform:translateX(5px)}

/* ══ WHY — on the dark grid ═══════════════════════════════ */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(34px,4vw,54px);counter-reset:why;border-top:1px solid var(--line-dark)}
.why-grid.cols-5{grid-template-columns:repeat(2,1fr)}
.why{background:transparent;padding:clamp(26px,3vw,40px) clamp(22px,2.8vw,44px) clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line-dark);display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 22px}
.why:nth-child(even){padding-left:clamp(22px,2.8vw,44px);padding-right:0;border-left:1px solid var(--line-dark)}
.why::before{content:counter(why,decimal-leading-zero);counter-increment:why;grid-column:1;grid-row:1/4;font-family:var(--ff-num);font-size:14px;font-weight:600;color:var(--brass);padding-top:4px}
.why .icon{display:none}
.why h3{grid-column:2;font-size:clamp(17px,1.9vw,23px);color:var(--paper);margin-bottom:10px;letter-spacing:-.015em}
.why p{grid-column:2;font-size:14.5px;line-height:1.74;color:rgba(244,241,234,.56);font-weight:300}

/* ══ PRODUCTS — datasheet rows ════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,44px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filter{background:transparent;border:none;border-right:1px solid var(--line);padding:13px 19px;cursor:pointer;font-family:var(--ff-body);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);transition:all .2s var(--ease)}
.filter em{font-style:normal;color:var(--line-2);margin-left:7px;font-family:var(--ff-num);font-size:12px}
.filter:hover{color:var(--ink);background:var(--paper-2)}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.filter[aria-pressed="true"] em{color:var(--brass)}

/* ── Product cards ────────────────────────────────────────
   Cards rather than flat rows. Each opens with a photo, then a
   dark forest header carrying the icon, name and grade, then the
   body runs description → specification → applications, with the
   request bar pinned to the bottom edge so every card in a row
   ends level however uneven the copy above it is.

   Two up from tablet width, one up on phones: at two columns a
   phone leaves each card ~150 px, which folds the spec table into
   an unreadable stack. The card padding is one variable so the
   request bar can bleed back out to the card edges. */
.products{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,26px);border-top:none;align-items:stretch;
}
.product{
  --pad:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);padding:0;position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
/* brass hairline that draws across the top edge on hover */
.product::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.product:hover{border-color:var(--line-2);box-shadow:0 20px 38px -24px rgba(15,29,25,.55);transform:translateY(-3px)}
.product:hover::before{transform:scaleX(1)}
.product.hide{display:none}

.product-media{position:relative;overflow:hidden;background:var(--ink-2)}
.product-media::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
  background:linear-gradient(to top,rgba(15,29,25,.5),transparent);
}
.product-photo{
  display:block;width:100%;height:clamp(158px,16vw,205px);object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter .55s var(--ease),transform .7s var(--ease);
}
.product:hover .product-photo{filter:none;transform:scale(1.045)}

.product-head{
  display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,16px);
  background:var(--ink);background-image:var(--grid);background-size:32px 32px;
  padding:var(--pad) var(--pad) clamp(16px,2vw,22px);
}
.product-head .icon{
  display:block;flex:none;width:44px;height:44px;padding:11px;color:var(--brass);
  border:1px solid var(--line-dark);background:rgba(176,141,70,.08);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.product:hover .product-head .icon{background:rgba(176,141,70,.16);border-color:rgba(176,141,70,.45)}
.product-head > div{min-width:0;flex:1}
.product-head h3{font-family:var(--ff-display);font-size:clamp(19px,1.85vw,23px);color:var(--paper);line-height:1.18;letter-spacing:-.015em}
.product-head .grade,.product-head .grade.on-dark{
  display:block;font-size:9px;font-weight:500;letter-spacing:.2em;line-height:1.5;
  text-transform:uppercase;color:var(--brass);margin-top:9px;overflow-wrap:anywhere;
}

.product-body{display:flex;flex-direction:column;flex:1;padding:var(--pad)}
.product-body .desc{font-size:13.8px;line-height:1.74;margin:0 0 20px}

/* Specification reads as an instrument panel set into the card,
   not as loose rows: tinted plate, hairline separators, condensed
   tabular figures hard right. */
.spec{
  background:var(--paper);border:1px solid var(--line);
  padding:0 clamp(13px,1.5vw,17px) 5px;margin:0 0 20px;
}
.spec::before{
  content:'Specification';display:block;font-size:8.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass-2);padding:12px 0 3px;
}
/* No column gap: the hairline has to run unbroken from the label
   through to the figure, so the separation is padding on the dt. */
.spec dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto)}
/* Cells stretch (never baseline-align) so both borders sit on the
   same y and the hairline reads as one rule across the row. */
.spec dt,.spec dd{padding:9px 0;border-top:1px solid var(--line);min-width:0;overflow-wrap:anywhere;display:flex;align-items:center}
.spec dt{font-size:12px;color:var(--mid);font-weight:300;line-height:1.45;padding-right:14px}
.spec dd{justify-content:flex-end;text-align:right;color:var(--ink);font-family:var(--ff-num);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}

.apps-label{display:block;font-size:8.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-2);margin:0 0 7px}
.product-body .apps{font-size:13.2px;line-height:1.7;margin:0 0 22px}

/* Full-bleed request bar — a proper 48 px-plus tap target on a
   phone rather than a line of small caps floating in the padding. */
.product-cta{
  margin:auto calc(var(--pad) * -1) calc(var(--pad) * -1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding:17px var(--pad);text-decoration:none;
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.product-cta:hover{background:var(--ink);color:var(--paper)}
.product-cta .icon{font-size:15px;transition:transform .22s var(--ease),color .25s var(--ease)}
.product-cta:hover .icon{transform:translateX(5px);color:var(--brass)}
.spec-note{margin-top:32px;padding:20px 24px;background:var(--brass-050);border-left:2px solid var(--brass);font-size:13.5px;line-height:1.72}
.empty-state{padding:48px 0;display:none}

/* ══ PHASES ═══════════════════════════════════════════════ */
.phases{display:grid;grid-template-columns:1fr;margin-top:clamp(34px,4vw,54px);border-top:1px solid var(--line-2)}
.phase{background:transparent;display:grid;grid-template-columns:auto minmax(0,.5fr) minmax(0,1fr);gap:4px clamp(18px,3vw,48px);padding:clamp(22px,2.9vw,36px) 0;border-bottom:1px solid var(--line)}
.phase .num{grid-column:1;grid-row:1/3;font-family:var(--ff-num);font-size:14px;font-weight:600;color:var(--brass);align-self:start;padding-top:4px}
.phase .step{display:none}
.phase h3{grid-column:2;font-size:clamp(20px,2.3vw,29px);letter-spacing:-.02em;align-self:start}
.phase p{grid-column:3;grid-row:1/3;font-size:14.5px;line-height:1.74;align-self:start}

/* ══ CHECKS ═══════════════════════════════════════════════ */
/* ── Registration cards (About page) ───────────────────────
   Icon LEFT of the copy, not stacked above it. Stacked, each cell was
   a narrow column of text with the rest of a 400 px cell empty beside
   it and a full-height rule drawn down the gap — three tall boxes of
   nothing. Setting the icon alongside lets the copy use the width it
   was given, and the cards end up the height of their content.

   Same auto/1fr grid, solid ink icon tile and uppercase micro-label as
   .info-card on the contact page, so this reads as the site's existing
   vocabulary rather than a badge strip bolted on. */
.reg-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line-2);
}
.reg-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.5vw,20px);align-items:start;
  padding:clamp(24px,2.6vw,32px) clamp(20px,2.6vw,36px) clamp(24px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
}
.reg-grid .reg-card:last-child{border-right:none;padding-right:0}
.reg-ico{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  background:var(--ink);color:var(--brass);
}
.reg-ico .icon{width:18px;height:18px}
.reg-body{min-width:0}
.reg-tag{
  display:block;font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mid-2);margin-bottom:6px;
}
/* Once a real registration number is entered it stops being a caption
   and becomes the fact worth reading — so it gets the figure face. */
.reg-tag.is-no{
  font-family:var(--ff-num);font-size:12.5px;letter-spacing:.08em;
  text-transform:none;color:var(--brass);font-weight:600;
}
.reg-card b{
  display:block;font-family:var(--ff-display);font-size:clamp(17px,1.5vw,19px);
  font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.2;
}
.reg-card .reg-note{
  display:block;margin-top:9px;font-size:13.5px;line-height:1.72;
  color:var(--mid);font-weight:300;
}
.reg-foot{
  margin-top:clamp(24px,2.6vw,34px);font-size:14.5px;line-height:1.8;
  color:var(--mid);font-weight:300;max-width:74ch;
}
.reg-foot a{color:var(--ink);border-bottom:1px solid var(--brass);text-decoration:none}
.reg-foot a:hover{color:var(--red)}

.checks{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line-2)}
.check{background:transparent;padding:26px clamp(18px,2.4vw,32px) 26px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.check:nth-child(3n){border-right:none;padding-right:0}
.check .icon{font-size:18px;color:var(--brass);margin-bottom:14px}
.check b{display:block;font-family:var(--ff-display);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:7px}
.check span{font-size:13.5px;line-height:1.7;display:block}

/* ══ SCROLL STAGE — markets, on the dark grid ═════════════ */
.scrolly{background:var(--ink)!important;background-image:var(--grid)!important;background-size:46px 46px;border-bottom-color:var(--ink-3)}
.scrolly .eyebrow{color:var(--brass)}
.scrolly h2,.scrolly .h-sec{color:var(--paper)}
.scrolly .h-sec .thin{color:var(--brass)}
.scrolly .lede{color:rgba(244,241,234,.58)}
.scrolly > .container::before{color:var(--ink-3)}

.scrolly-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(24px,4vw,72px);align-items:start;margin-top:clamp(26px,3.4vw,44px)}
.scrolly-steps{border-top:1px solid var(--line-dark)}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(14px,2.4vw,28px);
  padding:clamp(28px,5vw,56px) 0;border-bottom:1px solid var(--line-dark);
  min-height:52vh;align-content:center;opacity:.3;transition:opacity .45s var(--ease);
}
.step.is-active{opacity:1}
.step-idx{grid-column:1;grid-row:1/3;font-family:var(--ff-num);font-size:14px;font-weight:600;color:var(--ink-3);align-self:start;padding-top:9px;transition:color .35s var(--ease)}
.step.is-active .step-idx{color:var(--brass)}
.step b{grid-column:2;font-family:var(--ff-display);font-size:clamp(24px,3.2vw,42px);font-weight:600;color:var(--paper);letter-spacing:-.02em;line-height:1.08}
.step .step-body{grid-column:2;font-size:15px;line-height:1.74;color:rgba(244,241,234,.56);margin-top:12px;font-weight:300}
.step .icon{display:none}
.step::after{content:'';grid-column:1/-1;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);margin-top:20px}
.step.is-active::after{transform:scaleX(1)}

.scrolly-viz{position:relative;height:100%}
.viz-pin{position:sticky;top:calc(var(--nav-h) + 22px);border:1px solid var(--line-dark);background:rgba(22,41,35,.5);padding:10px 10px 0}
/* touch-action keeps a finger dragged across the map scrolling the
   page instead of the browser waiting to see whether the canvas wants
   the gesture — that wait is felt as the map "sticking" on a phone. */
.map-canvas{position:relative;height:min(62vh,520px);cursor:grab;touch-action:pan-y}
.map-canvas canvas{display:block;width:100%!important;height:100%!important}
.visual-caption{display:flex;align-items:center;gap:9px;padding:11px 2px;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,234,.42)}
.visual-caption i{width:16px;height:1px;background:var(--brass);display:block}
.scrolly.no-viz .scrolly-grid{grid-template-columns:1fr}
.scrolly.no-viz .scrolly-viz{display:none}
.scrolly.no-viz .step{min-height:0;opacity:1;padding:clamp(16px,2vw,24px) 0}
.scrolly.no-viz .step::after{display:none}

/* ══ QUOTE ════════════════════════════════════════════════ */
/* Two columns: the quote never filled the band, leaving half the row
   empty. The mark now occupies that half, rendered live. */
.quote-block{
  background:transparent;padding:clamp(28px,3.6vw,48px) 0 0;border-top:1px solid var(--brass);
  position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.quote-block::before{display:none}
.quote-text{min-width:0}
/* Was a live WebGL canvas. It rendered the mark in polished steel,
   which blew out to near-white under the key light and vanished
   against the paper background — an animation nobody could see. It is
   the logo artwork again, which is legible on every background and
   costs no GPU. Set it under Settings -> Images -> Pull-quote image. */
.quote-viz{height:clamp(200px,22vw,300px);min-width:0;margin:0;
  display:flex;align-items:center;justify-content:center}
.quote-viz img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
/* No WebGL: collapse to one column AND let the quote run wider, or
   the text stays capped at 24ch and the gap simply reappears. */
/* Kept: still applied when the pull-quote image is cleared in Settings,
   so the quote widens to fill the band instead of leaving a gap. */
.quote-block.no-mark{grid-template-columns:1fr}
.quote-block.no-mark .quote-viz{display:none}
.quote-block.no-mark blockquote{max-width:46ch}
.quote-block blockquote{font-family:var(--ff-display);font-size:clamp(21px,2.9vw,38px);line-height:1.3;color:var(--ink);font-weight:500;font-style:italic;letter-spacing:-.015em;max-width:24ch}
.quote-block cite{display:block;margin-top:24px;font-style:normal;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2)}
/* On the dark bands the quote must invert, or it is ink on ink and
   the reader sees an empty screen with only the attribution showing. */
.scrolly .quote-block,.sec-blue .quote-block{border-top-color:var(--brass)}
.scrolly .quote-block blockquote,.sec-blue .quote-block blockquote{color:var(--paper)}
.scrolly .quote-block cite,.sec-blue .quote-block cite{color:var(--brass)}

/* ══ WIDE PHOTO BAND ══════════════════════════════════════ */
.photo-band{position:relative;border-block:1px solid var(--line)}
.photo-band img{width:100%;height:clamp(230px,30vw,420px);object-fit:cover;filter:sepia(.12) saturate(.85) contrast(1.03)}
.photo-band figcaption{
  position:absolute;left:var(--gut);bottom:16px;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);padding:9px 14px;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
.photo-band figcaption i{width:14px;height:1px;background:var(--brass);display:block}

/* ══ CTA — C · the one loud moment ════════════════════════ */
.cta-band{background:var(--red);position:relative;overflow:hidden;padding:clamp(46px,5.8vw,84px) 0;border-bottom:none}
.cta-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta-inner h2{color:#fff;font-size:clamp(26px,3.6vw,48px);letter-spacing:-.02em}
.cta-inner h2 .red{color:rgba(255,255,255,.5);font-style:italic}
.cta-inner p{color:rgba(255,255,255,.82);margin-top:12px;max-width:52ch;font-size:15px;font-weight:300}
.cta-band .btn-red{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cta-band .btn-red:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ══ CONTACT ══════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(28px,4vw,64px);align-items:start}
.info-cards{display:grid;margin-top:26px;border-top:1px solid var(--line-2)}
.info-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;background:transparent;padding:18px 0;border-bottom:1px solid var(--line)}
.info-card .ico{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--ink);color:var(--brass)}
.info-card .ico .icon{font-size:15px}
.info-card b{display:block;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mid-2);margin-bottom:5px}
.info-card a,.info-card span{font-size:15px;color:var(--ink);text-decoration:none;line-height:1.55;overflow-wrap:anywhere}
.info-card a:hover{color:var(--red)}
.map-embed{margin-top:20px;border:1px solid var(--line);line-height:0}
.map-embed iframe{max-width:100%;display:block}

.form-shell{background:var(--white);border:1px solid var(--line-2);padding:clamp(22px,3vw,42px)}
.form-shell h2{font-size:25px;margin-bottom:7px}
.form-shell .form-intro{font-size:14.5px;margin-bottom:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mid-2)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{background:var(--paper);border:1px solid var(--line-2);border-radius:0;color:var(--ink);font-family:var(--ff-body);font-size:15px;padding:13px 14px;width:100%;max-width:100%;outline:none;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--line-2);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass)}
.field select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1D19' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:14px}
.field textarea{resize:vertical;min-height:120px}
.field .err{font-size:11.5px;color:var(--red);font-weight:500;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.field.invalid .err{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.form-foot{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.form-foot .btn{width:100%;padding:18px}
.form-note{font-size:12px;color:var(--mid-2);line-height:1.62}
.alert{padding:16px 20px;border:1px solid var(--line-2);margin-bottom:24px;font-size:14.5px;line-height:1.6}
.alert-ok{border-left:2px solid #3B7A4B;background:var(--paper-2);color:var(--ink)}
.alert-err{border-left:2px solid var(--red);background:var(--red-050);color:var(--red-700)}
.alert-warn{border-left:2px solid var(--brass);background:var(--brass-050);color:var(--ink)}

/* ══ INTERIOR HERO ════════════════════════════════════════ */
.page-hero{background:var(--ink);background-image:var(--grid);background-size:46px 46px;border-bottom:1px solid var(--ink-3);padding:clamp(46px,5.6vw,86px) 0 clamp(38px,4.8vw,66px);position:relative;overflow:hidden}
.page-hero .bg,.page-hero::after{display:none}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:var(--paper);font-size:clamp(33px,5.2vw,70px);letter-spacing:-.025em;line-height:1.02}
.page-hero h1 .red{font-style:italic;color:var(--brass)}
.page-hero .lede{color:rgba(244,241,234,.6);max-width:62ch;margin-top:20px}
.page-hero .eyebrow{color:var(--brass)}
.crumbs{display:flex;align-items:center;gap:9px;margin-bottom:22px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.4);flex-wrap:wrap}
.crumbs a{text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--paper)}
.crumbs span[aria-current]{color:var(--brass)}
.crumbs i{width:8px;height:1px;background:var(--ink-3);display:block}

/* ══ FOOTER ═══════════════════════════════════════════════ */
.site-footer{background:var(--ink);background-image:var(--grid);background-size:46px 46px;color:rgba(244,241,234,.52);padding:clamp(48px,6vw,84px) 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.footer-brand{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.footer-brand img{width:46px;height:46px;object-fit:contain;flex:none}
.footer-brand .brand-name{color:var(--paper);font-size:21px}
.footer-brand .brand-sub{color:rgba(244,241,234,.34)}
.footer-col p{font-size:14px;line-height:1.78;margin-bottom:11px;font-weight:300}
.footer-col a{display:block;font-size:14px;text-decoration:none;margin-bottom:10px;transition:color .2s;overflow-wrap:anywhere;font-weight:300}
.footer-col a:hover{color:var(--brass)}
.footer-col h5{font-family:var(--ff-body);font-size:9.5px;font-weight:500;color:var(--brass);text-transform:uppercase;letter-spacing:.24em;margin-bottom:20px}
.footer-col p.footer-owner,.footer-col p.footer-gst{font-size:12.5px;color:rgba(244,241,234,.4)}

/* ── Statutory registrations ───────────────────────────────
   Footer chips. Deliberately quiet — this is reassurance a buyer
   looks for, not a claim that needs shouting. */
.footer-reg{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.reg-chip{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:11.5px;letter-spacing:.04em;font-weight:500;
  color:rgba(244,241,234,.62);
  border:1px solid var(--line-dark);padding:5px 11px 5px 8px;
}
.reg-chip .icon{width:13px;height:13px;color:var(--brass);flex:none}
.footer-col p.footer-owner b{color:rgba(244,241,234,.72);font-weight:500}
.footer-bottom{border-top:1px solid var(--ink-3);padding:22px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer-bottom p{font-size:11.5px;letter-spacing:.06em;color:rgba(244,241,234,.36)}
.footer-bottom .credit a{text-decoration:none;color:rgba(244,241,234,.55);transition:color .2s}
.footer-bottom .credit a:hover{color:var(--brass)}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brass);z-index:400;transition:width .1s linear}

/* ══ MOTION ═══════════════════════════════════════════════ */
.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(105%);transition:transform .95s var(--ease)}
.is-ready .line > span{transform:translateY(0)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-anim="right"],.reveal[data-anim="scale"]{transform:translateY(20px)}
.reveal.in[data-anim="right"],.reveal.in[data-anim="scale"]{transform:none}
.stagger > *{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.1s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.22s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(n+6){transition-delay:.33s}
.rise{opacity:0;transform:translateY(16px);animation:rise .85s var(--ease) forwards}
.rise.d2{animation-delay:.15s}
.rise.d3{animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}
.wipe{position:relative;overflow:hidden}
.wipe::before{content:'';position:absolute;inset:0;background:var(--paper);z-index:2;transform-origin:right;transition:transform .95s var(--ease)}
.wipe.in::before{transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal,.stagger > *{opacity:1!important;transform:none!important}
  .line > span{transform:none!important}
  .rise{opacity:1!important;transform:none!important}
  .wipe::before{display:none}
}

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:1150px){
  .nav{gap:22px}.nav a{font-size:10.5px;letter-spacing:.14em}
  .checks{grid-template-columns:repeat(2,1fr)}
  .check:nth-child(3n){border-right:1px solid var(--line);padding-right:clamp(18px,2.4vw,32px)}
  .check:nth-child(2n){border-right:none;padding-right:0}
  .reg-grid{grid-template-columns:repeat(2,1fr)}
  .reg-grid .reg-card:nth-child(2n),.reg-grid .reg-card:last-child{border-right:none;padding-right:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:1000px){
  .topbar-right,.nav-cta{display:none}
  .hero-grid{grid-template-columns:1fr}
  /* Stacked, the text runs the full width, so there is no empty side
     to put the lattice in. Fade it top-to-bottom instead and pull it
     well back — it reads as texture behind the figures, not artwork
     the headline has to fight. */
  .hero-viz{
    opacity:.42;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 46%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 46%,#000 100%);
  }
  .hero-main{border-right:none;padding-right:0;padding-bottom:clamp(28px,4vw,44px)}
  .hero-data{flex-direction:row;flex-wrap:wrap;border-top:1px solid var(--line)}
  .hero-data .stat{flex:1 1 46%;padding:20px 0 20px 18px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
  .hero-data .stat:nth-child(2n+1){border-left:none;padding-left:0}
  .specbar dl{grid-template-columns:repeat(3,1fr)}
  .specbar dl > div:nth-child(3n+1){border-left:none;padding-left:0}
  .split,.split.wide-text,.contact-grid{grid-template-columns:1fr}
  .split.flip .fig{order:0}
  .section > .container::before{position:static;display:block;margin-bottom:14px}
  /* Tablet / phone: the two columns become two rows. The map row is
     ordered above the panel row and pinned there, so the region
     panels scroll underneath it and drive it exactly as they do on
     the desktop side-by-side layout. Header is still sticky down to
     880px, so the map parks below it. */
  .scrolly-grid{display:flex;flex-direction:column;gap:0}
  /* Promoted to its own compositor layer. A sticky row holding a live
     canvas otherwise repaints against the moving panels on every
     scroll tick, which is the judder this section had on phones. */
  .scrolly-viz{order:-1;position:sticky;top:68px;z-index:5;height:auto;background:var(--ink);padding:10px 0 4px;margin-bottom:4px;border-bottom:1px solid var(--line-dark);transform:translateZ(0);will-change:transform;contain:paint}
  .scrolly-steps{order:0;border-top:none}
  .viz-pin{position:static;padding:8px 8px 0}
  .map-canvas{height:min(36vh,290px)}
  .visual-caption{padding:9px 2px}
  .step{min-height:46vh}
}
@media (max-width:880px){
  .burger{display:grid}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--brass);box-shadow:0 16px 30px rgba(15,29,25,.13);padding:6px var(--gut) 18px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  .nav.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}
  .site-header{position:relative}
  /* header no longer sticks here, so the map row pins to the very top */
  .scrolly-viz{top:0}
  .why-grid,.why-grid.cols-5{grid-template-columns:1fr}
  .why,.why:nth-child(even){padding-left:0;padding-right:0;border-left:none}
  .tile{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:3px 18px}
  .tile::before{grid-row:1/5;align-self:start;padding-top:4px}
  .tile .count{grid-column:2;grid-row:1}.tile h3{grid-column:2;grid-row:2}
  .tile p{grid-column:2;grid-row:3;margin-top:7px}.tile .go{grid-column:2;grid-row:4;margin-top:14px}
  .phase{grid-template-columns:auto minmax(0,1fr);gap:3px 18px}
  .phase h3{grid-column:2;grid-row:1}.phase p{grid-column:2;grid-row:2;margin-top:8px}
  /* Tablet: still two up, but the copy and the spec figures come
     down a step so a ~330 px card does not wrap every spec row. */
  .product-head .icon{width:40px;height:40px;padding:10px}
  .product-body .desc{font-size:13.2px}
  .spec dt{font-size:11.5px}
  .spec dd{font-size:14.5px}
  .product-body .apps{font-size:12.8px}
  .quote-block{grid-template-columns:1fr;gap:26px}
  .quote-viz{height:clamp(180px,44vw,240px);order:-1}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid .stat:nth-child(2n){border-right:none}
}
@media (max-width:760px){
  .topbar .tb-addr{display:none}
  /* One card per row — two columns on a phone squeezes the spec
     table until every label and figure wraps. */
  .products{grid-template-columns:1fr}
  .product-photo{height:clamp(180px,42vw,240px)}
  .product-body .desc,.product-body .apps{font-size:14px}
  .spec dt{font-size:12.5px}
  .spec dd{font-size:16px}
  /* Single column here rather than at 600: an icon plus a 42 px tile
     plus copy in half of a 700 px screen leaves ~230 px of text, and
     "MSME / Udyam Registered" wraps to three lines in it. */
  .reg-grid{grid-template-columns:1fr}
  .reg-card{border-right:none;padding-right:0}
}
@media (max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .stats-grid .stat{border-right:none;padding-right:0}
  .checks{grid-template-columns:1fr}
  .check,.check:nth-child(3n),.check:nth-child(2n){border-right:none;padding-right:0}
  .form-grid{grid-template-columns:1fr}
  .specbar dl{grid-template-columns:repeat(2,1fr)}
  .specbar dl > div{border-left:1px solid var(--line);padding-left:16px}
  .specbar dl > div:nth-child(2n+1){border-left:none;padding-left:0}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .hero-actions .btn{flex:1 1 100%}
  .filters{overflow-x:auto;flex-wrap:nowrap}.filter{white-space:nowrap}
  /* Section headings scale with the viewport below 600 px so a
     full sentence still holds its own line instead of dropping a
     single orphaned word. */
  .h-sec{font-size:clamp(24px,7vw,31px);line-height:1.12}
  .h-sec .ln + .ln{margin-top:.14em}
}
@media (max-width:400px){
  .brand-sub{display:none}.brand img{width:38px;height:38px}
  .hero h1{font-size:38px}
  .hero-data .stat{flex:1 1 100%;border-left:none;padding-left:0}
}