/* SDI Steels — site layer over the Industry design system, re-pointed to the
   company brochure's palette: cream paper, charcoal/navy panels, orange
   labels, the lime logo disc. Link base.css first, then this file. */
:root{
  --paper:#f4f1e9;--paper-2:#fbfaf7;--ink:#1e252b;--navy:#0b2440;
  --orange:#d2691e;--orange-dk:#a6511409;--lime:#98c659;--lime-dk:#5b8a3a;
  --color-bg:var(--paper);--color-surface:#e7e5df;--color-text:#1e252b;
  --color-accent:#d2691e;--color-accent-2:#98c659;
  --color-divider:color-mix(in srgb,#1e252b 18%,transparent);
  --color-accent-100:#fbeee4;--color-accent-200:#f4d6c0;--color-accent-300:#e9b48d;
  --color-accent-400:#dd8f5c;--color-accent-500:#d2691e;--color-accent-600:#b0561a;
  --color-accent-700:#8e4514;--color-accent-800:#63300e;--color-accent-900:#3f1f09;
  --color-accent-2-100:#f1f8e8;--color-accent-2-200:#dcedc4;--color-accent-2-300:#c2df9b;
  --color-accent-2-400:#adcf7c;--color-accent-2-500:#98c659;--color-accent-2-600:#78a343;
  --color-accent-2-700:#5b8a3a;--color-accent-2-800:#3e5f27;--color-accent-2-900:#293f1a;
  --leading:24px;--half:12px;--edge:clamp(20px,5vw,64px);--measure:64ch;
  --ink-70:color-mix(in srgb,var(--ink) 70%,transparent);--ink-78:color-mix(in srgb,var(--ink) 78%,transparent)
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);text-wrap:pretty}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-800)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* the brochure's orange is a large-text value on cream — system rules that
   paint small TEXT with the base accent take the deep step */
.btn-ghost,.tag-outline,.card-kicker{color:var(--color-accent-700)}
.tag-outline{border-color:var(--color-accent-600)}
.btn-ghost:hover{color:var(--color-accent-800);background:var(--color-accent-100)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--edge)}
.skip{position:absolute;left:-9999px;top:0;background:var(--color-accent-600);color:#fff;padding:8px 14px;z-index:20}
.skip:focus{left:8px;top:8px}

/* — masthead — */
.topbar{background:#14191d;color:color-mix(in srgb,#fff 82%,transparent);font-size:13px;line-height:var(--leading)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:4px var(--leading);align-items:center;padding-block:6px}
.topbar a{color:inherit;text-decoration:none}
.topbar a:hover{color:var(--lime)}
.topbar .sep{margin-left:auto;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--lime)}
/* the brochure only ever sets the lockup on charcoal — the nav bar matches it
   so the lime wordmark keeps its exact brand colour */
.nav{background:var(--ink);border-bottom:1px solid color-mix(in srgb,#fff 14%,transparent);padding-inline:max(var(--edge),calc((100% - 1180px)/2 + var(--edge)))}
.nav a{white-space:nowrap;text-decoration:none;color:color-mix(in srgb,#fff 88%,transparent);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.nav a:hover{color:var(--lime)}
.nav a[aria-current=page]{color:var(--lime);font-weight:600}
.nav .btn-primary{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.nav .btn-primary:hover{background:var(--color-accent-700);border-color:var(--color-accent-700)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto;padding-block:6px}
/* The SD1 Disc, drawn in live text so it stays sharp at any size and costs
   nothing. Every number below comes from the canonical spec in
   tools/logo/build-sd1.py, converted from radius to diameter:
     monogram 0.345d · ring 0.047d · rule 0.40d long, 0.0375d thick,
     centred 0.2473d up from the bottom edge and rising 5.27deg.
   Change them here and they must change there too, or the site and the
   brochure drift apart again. */
.brand .disc,.foot-lockup .disc{--d:42px;--ring:2px;position:relative;width:var(--d);height:var(--d);border-radius:50%;background:var(--lime);border:var(--ring) solid #d9a441;color:var(--navy);display:block;text-align:center;line-height:calc(var(--d) * 0.720);font-family:var(--font-heading);font-weight:700;font-size:calc(var(--d) * 0.345);letter-spacing:0;flex:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* The gold numeral is real markup (<em>), not a ::after. As a pseudo-element it
   painted at large sizes and silently vanished at small ones, and could not be
   measured to debug. A real element centres predictably and is inspectable. */
/* Bronze, not gold: gold on the lime field measures 1.13:1 and the numeral
   vanishes at nav size. Bronze is 3.51:1 and is already in the palette. */
.brand .disc em,.foot-lockup .disc em{display:inline;font-style:normal;color:var(--color-accent-700);font-size:1.06em}
.brand .disc::before,.foot-lockup .disc::before{content:"";position:absolute;left:50%;bottom:calc(var(--d) * 0.2285);width:calc(var(--d) * 0.40);height:max(1.2px, calc(var(--d) * 0.0375));background:var(--navy);border-radius:2px;transform:translateX(-50%) rotate(-5.27deg);transform-origin:50% 50%}
.brand .name,.foot-grid .foot-lockup p.foot-brand{display:block;font-family:var(--font-heading);font-weight:700;font-size:20px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--lime);transition:color .18s ease}
.brand .sub{display:block;font-family:var(--font-body);font-weight:500;font-size:9px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:color-mix(in srgb,#fff 62%,transparent);margin-top:4px}

/* — the brochure's orange flag label — */
.flag{display:inline-flex;align-items:center;gap:8px;background:var(--color-accent-600);color:#fff;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 16px 5px 12px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.flag::before{content:"●";font-size:7px;line-height:1}
.kicker{display:block;font-size:12px;line-height:var(--half);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);margin:0 0 var(--leading)}

/* — display type: the brochure's bold condensed caps — */
.display,h1,h2.sec-title,h3.sub-title,.pull{font-family:var(--font-heading);font-weight:700}
.display{font-size:clamp(40px,5.4vw,72px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;margin:0}
.display .line{display:block}
.display em{font-style:normal;color:var(--orange)}
p.lede{font-size:17px;line-height:calc(var(--leading) + 4px);max-width:var(--measure);margin:var(--leading) 0 0}
p.rule-quote{border-left:3px solid var(--orange);padding-left:14px;font-style:italic;font-size:17px;margin:var(--leading) 0 0}
h2.sec-title{font-size:clamp(26px,3vw,40px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0 0 var(--half)}
h3.sub-title{font-size:20px;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;margin:0}
p.sec-lede{font-size:16px;line-height:var(--leading);max-width:var(--measure);color:var(--ink-78);margin:0 0 calc(1.5*var(--leading))}
.section{padding-block:calc(2.5*var(--leading))}
.section-dark{background:var(--ink);color:color-mix(in srgb,#fff 86%,transparent)}
.section-dark h2.sec-title,.section-dark .display{color:#fff}
.section-dark p.sec-lede,.section-dark p{color:color-mix(in srgb,#fff 78%,transparent)}
.section-dark .card{border-color:color-mix(in srgb,#fff 20%,transparent)}
.section-dark .num-title{color:#fff}
.section-dark .kicker,.hero .kicker{color:var(--color-accent-300)}
.hero{background:var(--ink);color:#fff;padding-block:calc(3*var(--leading)) calc(2.5*var(--leading))}
.hero p.lede{color:color-mix(in srgb,#fff 80%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(1.5*var(--leading));list-style:none;padding:0}
.chips a{background:var(--paper);color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;padding:6px 12px;display:block}
.chips a:hover{background:var(--lime);color:var(--navy)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--leading)}
.row .btn{text-decoration:none}
.btn-primary{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.btn-primary:hover{background:var(--color-accent-700);border-color:var(--color-accent-700);color:#fff}
/* the system's secondary button is drawn for light ground; on charcoal it would
   paint ink-on-ink, so dark contexts get an outlined-in-white variant */
.hero .btn-secondary,.section-dark .btn-secondary,.panel-dark .btn-secondary{background:transparent;color:#fff;border-color:color-mix(in srgb,#fff 45%,transparent)}
.hero .btn-secondary:hover,.section-dark .btn-secondary:hover,.panel-dark .btn-secondary:hover{background:color-mix(in srgb,#fff 12%,transparent);color:#fff;border-color:#fff}
.hero .btn-ghost,.section-dark .btn-ghost{color:#fff}
.hero .btn-ghost:hover,.section-dark .btn-ghost:hover{background:color-mix(in srgb,#fff 12%,transparent);color:#fff}

/* — numbered strength blocks — */
.cells{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.cells-2{--cols:2}
.cells-4{--cols:4}
.num-block{border-top:2px solid var(--orange);padding-top:var(--half)}
.num-block .n{font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--color-accent-700)}
.section-dark .num-block .n{color:var(--color-accent-300)}
.num-title{font-family:var(--font-heading);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;margin:4px 0 0}
.num-block p{font-size:15px;line-height:var(--leading);margin:8px 0 0;color:var(--ink-78)}
.section-dark .num-block p{color:color-mix(in srgb,#fff 76%,transparent)}

/* — product records, in the brochure's navy-bar grammar — */
.product{background:var(--paper-2);border:1px solid var(--color-divider);margin-bottom:calc(1.5*var(--leading))}
.product-head{background:var(--navy);color:#fff;display:flex;align-items:baseline;gap:var(--half) var(--leading);flex-wrap:wrap;padding:var(--half) var(--leading)}
.product-head h2{font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin:0;color:#fff}
.product-head .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-300);font-weight:600}
.product-head .tags{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.product-head .tag{background:transparent;border:1px solid color-mix(in srgb,#fff 40%,transparent);color:#fff;font-size:10px}
.product .desc{font-size:15px;line-height:var(--leading);margin:0;padding:var(--leading) var(--leading) 0;max-width:80ch;color:var(--ink-78)}
.specs{margin:var(--leading) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--color-divider)}
.specs>div{display:grid;grid-template-columns:minmax(96px,34%) 1fr;border-bottom:1px solid var(--color-divider)}
.specs dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);padding:8px var(--half);border-right:1px solid var(--color-divider);margin:0}
.specs dd{margin:0;font-size:14px;line-height:var(--leading);padding:8px var(--half)}
.spec-wide{grid-column:1/-1}
p.spec-note{font-size:13px;line-height:var(--leading);font-style:italic;color:var(--ink-70);margin:var(--leading) 0 0}

/* — drawn rows — */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-divider)}
.rows li{border-bottom:1px solid var(--color-divider);padding:var(--half) 0;font-size:15px;line-height:var(--leading);color:var(--ink-78)}
.rows strong{font-family:var(--font-heading);font-weight:700;font-size:18px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);display:block}
.section-dark .rows{border-color:color-mix(in srgb,#fff 22%,transparent)}
.section-dark .rows li{border-color:color-mix(in srgb,#fff 22%,transparent);color:color-mix(in srgb,#fff 76%,transparent)}
.section-dark .rows strong{color:#fff}
.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px)}
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--leading) clamp(24px,5vw,72px);align-items:start}
.split p{font-size:16px;line-height:var(--leading);color:var(--ink-78);margin:0 0 var(--leading);max-width:60ch}
.panel{background:var(--paper-2);border:1px solid var(--color-divider);padding:var(--leading)}
.panel-dark{background:var(--navy);color:#fff;border:0;padding:calc(1.5*var(--leading))}
.panel-dark .pull{color:#fff}
p.pull{font-size:clamp(20px,2.2vw,27px);line-height:1.25;letter-spacing:.005em;margin:0;max-width:32ch}
p.arrowline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);font-weight:600;margin:0 0 var(--leading)}
.field label{display:block}
.form-grid{display:grid;gap:var(--half)}
p.form-note{font-size:13px;line-height:var(--leading);color:var(--ink-70);margin:var(--half) 0 0}
address{font-style:normal;font-size:16px;line-height:var(--leading)}
.pairs{margin:var(--leading) 0 0;display:grid;grid-template-columns:max-content 1fr;gap:var(--half) var(--leading);font-size:15px;line-height:var(--leading)}
.pairs dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700)}
.pairs dd{margin:0;font-weight:500}

/* — footer — */
.site-footer{background:var(--ink);color:color-mix(in srgb,#fff 80%,transparent);padding-block:calc(2*var(--leading))}
.site-footer a{color:color-mix(in srgb,#fff 80%,transparent);text-decoration:none}
.site-footer a:hover{color:var(--lime)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--leading)}
.foot-grid h2{font-size:11px;font-family:var(--font-body);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-accent-300);margin:0 0 var(--half)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;line-height:var(--leading)}
p.foot-brand{font-family:var(--font-heading);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.01em;color:var(--lime);margin:0 0 4px}
.foot-grid p{font-size:14px;line-height:var(--leading);margin:0}
p.legal{font-size:13px;line-height:var(--leading);color:color-mix(in srgb,#fff 58%,transparent);margin:calc(1.5*var(--leading)) 0 0;border-top:1px solid color-mix(in srgb,#fff 16%,transparent);padding-top:var(--leading)}


@media (max-width:980px){.cells,.cells-2,.cells-4{--cols:2}.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.cells,.cells-2,.cells-4{--cols:1}.cells{gap:calc(var(--leading) + 8px)}.split,.two-col{grid-template-columns:1fr}.topbar .sep{display:none}.specs>div{grid-template-columns:minmax(88px,38%) 1fr}}

/* Cascade guards — container rules (.foot-grid p, .split p, .section-dark p) are all
   (0,1,1); these role rules must OUT-SPECIFY them, not tie, so they carry the
   container in the selector and sit last in the file. Order-independent. */
.foot-grid p.foot-brand{font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;color:var(--lime);margin:0 0 var(--leading)}
.split p.form-note,.panel p.form-note,.panel-dark p.form-note{font-size:13px;line-height:var(--leading);color:var(--ink-70);margin:var(--half) 0 0;max-width:none}
.split p.spec-note,.section-dark p.spec-note{font-size:13px;line-height:var(--leading);font-style:italic;color:var(--ink-70);margin:var(--leading) 0 0;max-width:none}
.section-dark p.spec-note{color:color-mix(in srgb,#fff 72%,transparent)}
.split p.arrowline{font-size:13px;line-height:var(--leading);color:var(--color-accent-700);max-width:none;margin:0 0 var(--leading)}
.split p.pull,.panel-dark p.pull{font-size:clamp(20px,2.2vw,27px);line-height:1.25;max-width:32ch;margin:0}

/* — photography (brochure product shots) — */
.product{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.product-head{grid-column:1/-1}
.product .specs{grid-column:1/-1}
figure.product-figure{margin:var(--leading);padding:0;align-self:start;
  background:#fff;border:1px solid var(--color-divider);overflow:hidden}
figure.product-figure img{display:block;width:100%;height:auto;background:#fff;border:0}
.product p.desc{padding:var(--leading) var(--leading) var(--leading) 0;max-width:60ch}
.band{background:#fff;border-block:1px solid var(--color-divider)}
.band img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
figure.shot{margin:0;background:#fff;border:1px solid var(--color-divider)}
figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);border-top:1px solid var(--color-divider);padding:8px var(--half)}
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--half);list-style:none;padding:0;margin:calc(1.5*var(--leading)) 0 0}
.thumbs a{display:block;text-decoration:none;background:#fff;border:1px solid var(--color-divider)}
.thumbs a:hover{border-color:var(--color-accent-600)}
/* the shots are white-background cutouts, so contain shows the whole frame —
   cover would trim ~5.5% off each side and clip the top-right logo badge */
.thumbs img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:contain;background:#fff}
.thumbs span{display:block;font-family:var(--font-heading);font-weight:700;font-size:14px;line-height:1.15;text-transform:uppercase;color:var(--ink);padding:8px 10px}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,48px);background:#fff;border:1px solid var(--color-divider);padding:var(--leading);margin:var(--leading) 0 0}
.badges img{display:block;height:64px;width:auto}
@media (max-width:900px){.thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.product{grid-template-columns:1fr}.product p.desc{padding:0 var(--leading) var(--leading)}figure.product-figure{padding:var(--leading) var(--leading) 0}.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.badges img{height:48px}}

figure.map{margin:0;background:transparent}
figure.map img{display:block;width:100%;max-width:420px;height:auto;margin-inline:auto}
figure.map figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-accent-300);text-align:center;margin-top:var(--half)}

/* footer lockup — same mark as the nav, on the footer's charcoal ground */
.foot-lockup{display:flex;align-items:center;gap:11px;margin:0 0 var(--leading);text-decoration:none;color:inherit;width:max-content;max-width:100%}
.foot-grid .foot-lockup p.foot-brand{margin:0}
/* hover — the mark lifts a little, the gold ring warms, and a soft lime halo
   picks up the field colour. The same treatment serves the nav and the footer,
   so the logo behaves identically wherever it appears. */
.brand:hover .disc,.foot-lockup:hover .disc{transform:translateY(-1px) scale(1.04);border-color:#f0c368;box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 32%,transparent)}
.brand:hover .name,.foot-lockup:hover p.foot-brand{color:color-mix(in srgb,var(--lime) 72%,#fff)}
.brand:active .disc,.foot-lockup:active .disc{transform:translateY(0) scale(1.01)}
.brand:focus-visible,.foot-lockup:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:5px}
.brand:focus-visible .disc,.foot-lockup:focus-visible .disc{box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 32%,transparent)}
@media (prefers-reduced-motion:reduce){
  .brand .disc,.foot-lockup .disc{transition:none}
  .brand:hover .disc,.foot-lockup:hover .disc,.brand:active .disc,.foot-lockup:active .disc{transform:none}
}

/* — mobile navigation —
   the nav is a flex row; on small screens it wraps and the links collapse
   behind a toggle instead of being hidden outright (which left phones with no
   navigation at all). No wrapper element needed, so all 15 pages keep the same
   flat markup. */
.nav{flex-wrap:wrap;row-gap:0}
.nav-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:transparent;border:1px solid color-mix(in srgb,#fff 32%,transparent);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.nav-toggle .bars{display:grid;gap:3px;width:16px}
.nav-toggle .bars i{display:block;height:2px;background:currentColor}
.nav-toggle[aria-expanded=true]{border-color:var(--lime);color:var(--lime)}
@media (max-width:900px){
  .nav{padding-block:8px}
  .nav-toggle{display:inline-flex}
  .nav a:not(.brand):not(.btn){display:none}
  .nav .btn-primary{min-height:44px;padding-inline:14px}
  .nav.open a:not(.brand){display:flex;align-items:center;flex-basis:100%;min-height:48px;border-top:1px solid color-mix(in srgb,#fff 14%,transparent);font-size:16px;letter-spacing:.06em}
  /* out-specifies the rule above (0,2,1 vs 0,2,1 would only tie) */
  .nav.open a.btn.btn-primary{flex-basis:100%;justify-content:center;margin-top:10px;border-top:0}
  .brand{margin-right:auto}
  .brand .disc,.foot-lockup .disc{--d:38px}
  .brand .name,.foot-grid .foot-lockup p.foot-brand{font-size:18px}
}
/* — small-screen typography and spacing — */
@media (max-width:560px){
  :root{--edge:18px;--measure:100%}
  .topbar .wrap{gap:2px 14px;padding-block:8px}
  .brand .disc,.foot-lockup .disc{--d:34px;--ring:1.5px}
  .brand .name,.foot-grid .foot-lockup p.foot-brand{font-size:15px;letter-spacing:0}
  .nav .btn-primary{font-size:12px;padding-inline:10px;letter-spacing:.02em}
  .nav-toggle{padding-inline:10px;font-size:12px}
  .topbar span:first-child{flex-basis:100%}
  .topbar a{display:inline-flex;align-items:center;min-height:32px}
  .hero{padding-block:calc(2*var(--leading)) calc(1.5*var(--leading))}
  .display{font-size:clamp(32px,9vw,44px);line-height:1.02}
  p.lede{font-size:16px}
  .section{padding-block:calc(1.75*var(--leading))}
  h2.sec-title{font-size:clamp(24px,7vw,30px)}
  .chips a,.row .btn{min-height:44px;display:inline-flex;align-items:center}
  .row{gap:8px}
  .row .btn{flex:1 1 100%;justify-content:center}
  .specs>div{grid-template-columns:1fr;border-bottom:0}
  .specs dt{border-right:0;border-bottom:1px solid var(--color-divider);padding-bottom:4px}
  .specs dd{border-bottom:1px solid var(--color-divider);padding-top:4px}
  .product-head{gap:4px 10px}
  .product-head h2{font-size:19px}
  .product-head .tags{display:none}
  .badges{gap:20px;justify-content:center}
  .thumbs{gap:8px}
  figure.map img{max-width:100%}
  .pairs{grid-template-columns:1fr;gap:2px}
  .pairs dt{margin-top:10px}
  .input{min-height:44px}
  .foot-grid{grid-template-columns:1fr;gap:calc(1.25*var(--leading))}
  .site-footer ul a{display:inline-flex;align-items:center;min-height:36px}
}

/* — hero video background —
   Swap the <video> src for a self-hosted file before launch (videos/gi-wire-manufacturing.mp4):
   a third-party URL can expire, and a same-origin file is faster and cacheable. */
.hero{position:relative;isolation:isolate}
.hero>.wrap{position:relative;z-index:2}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink) center/cover no-repeat}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:.42;filter:saturate(.78) contrast(1.06)}
/* scrim: keeps the headline at AA contrast over any frame of the footage */
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,25,29,.93) 0%,rgba(20,25,29,.80) 46%,rgba(20,25,29,.55) 100%)}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}
@media (max-width:560px){.hero-media video{opacity:.32}.hero-media::after{background:rgba(20,25,29,.86)}}

/* ══════════════════════════════════════════════════════════════════════════
   SITE LAYER — CONVERSION & NAVIGATION COMPONENTS
   Added on top of the brochure layer above. Everything here obeys the same
   grammar: square corners, condensed caps, orange for action, lime on
   charcoal, and no dependency on JavaScript for the content to be readable.
   ══════════════════════════════════════════════════════════════════════ */

/* — sticky masthead —
   The topbar scrolls away; the nav pins so "Get a Quote" and the phone number
   are reachable from any depth of a 10-product spec page. */
.site-head{position:sticky;top:0;z-index:60}
.site-head .nav{transition:padding-block .18s ease,box-shadow .18s ease}
.site-head.stuck .nav{box-shadow:0 6px 22px rgba(0,0,0,.34)}
/* The stuck bar tightens its padding but keeps the mark at full size. It used
   to shrink the disc to 34px, which meant that whenever the footer was on
   screen — i.e. whenever the page was scrolled — the nav mark and the footer
   mark were different sizes side by side. One size per breakpoint, always. */
@media (min-width:901px){.site-head.stuck .nav{padding-block:4px}
}
@media (prefers-reduced-motion:reduce){.site-head .nav{transition:none}}
/* Anchors must clear whatever is pinned above them. --head-h and --anchor-off
   are measured by site.js (the masthead compacts, and the filter bar wraps at
   narrow widths, so neither height is a constant worth hard-coding). The
   fallbacks below are what a no-JS visitor gets, and are close enough. */
:target{scroll-margin-top:var(--anchor-off,96px)}
.product,section[id]{scroll-margin-top:var(--anchor-off,96px)}

/* — figures band: the counted proof row — */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:1px solid var(--color-divider);background:var(--paper-2);margin:0}
.stats>div{padding:var(--leading);border-right:1px solid var(--color-divider)}
.stats>div:last-child{border-right:0}
.stats .fig{display:block;font-family:var(--font-heading);font-weight:700;
  font-size:clamp(34px,4.4vw,54px);line-height:1;letter-spacing:.005em;color:var(--color-accent-600)}
.stats .lab{display:block;font-size:12px;line-height:var(--half);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--ink-70);margin-top:10px}
.section-dark .stats{background:transparent;border-color:color-mix(in srgb,#fff 20%,transparent)}
.section-dark .stats>div{border-color:color-mix(in srgb,#fff 20%,transparent)}
.section-dark .stats .fig{color:var(--lime)}
.section-dark .stats .lab{color:color-mix(in srgb,#fff 74%,transparent)}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}
  .stats>div:nth-child(2n){border-right:0}
  .stats>div:nth-child(-n+2){border-bottom:1px solid var(--color-divider)}
  .section-dark .stats>div:nth-child(-n+2){border-bottom-color:color-mix(in srgb,#fff 20%,transparent)}}

/* — product filter (products.html) —
   Progressive: without JavaScript every product is already in the page and
   visible, and this bar is hidden. site.js reveals it. */
.filterbar{display:none;gap:var(--half);flex-wrap:wrap;align-items:center;
  background:var(--paper-2);border:1px solid var(--color-divider);padding:var(--half) var(--leading);
  position:sticky;top:var(--head-h,64px);z-index:40}
.filterbar.on{display:flex}
.filterbar label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700)}
.filterbar .input{max-width:280px;min-height:38px}
.filter-tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.filter-tags button{font-family:var(--font-heading);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 13px;min-height:38px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--color-divider)}
.filter-tags button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.filter-tags button[aria-pressed=true]{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.filter-count{font-size:13px;color:var(--ink-70);flex-basis:100%}
.product[hidden]{display:none}
.filter-empty{border:1px dashed var(--color-divider);padding:calc(1.5*var(--leading));text-align:center;color:var(--ink-70)}
@media (max-width:900px){.filterbar{position:static}.filterbar .input{max-width:none;flex:1 1 100%}
  .filter-tags{margin-left:0}}

/* — FAQ: plain <details>, so the answers are in the DOM for crawlers — */
.faq{border-top:1px solid var(--color-divider);margin:0}
.faq details{border-bottom:1px solid var(--color-divider)}
.faq summary{display:flex;align-items:flex-start;gap:var(--half);cursor:pointer;list-style:none;
  padding:var(--leading) 0;font-family:var(--font-heading);font-weight:700;font-size:19px;
  line-height:1.2;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:24px;line-height:1;color:var(--color-accent-600);flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--color-accent-700)}
.faq summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.faq .ans{font-size:15px;line-height:var(--leading);color:var(--ink-78);margin:0 0 var(--leading);max-width:72ch;padding-right:32px}
.section-dark .faq,.section-dark .faq details{border-color:color-mix(in srgb,#fff 20%,transparent)}
.section-dark .faq summary{color:#fff}
.section-dark .faq .ans{color:color-mix(in srgb,#fff 78%,transparent)}

/* — enquiry form: status, honeypot, richer field grid — */
.form-grid .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--half)}
@media (max-width:560px){.form-grid .two{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:14px;line-height:var(--leading);margin:var(--half) 0 0;padding:10px var(--half);
  border-left:3px solid var(--color-accent-600);background:var(--color-accent-100);color:var(--color-accent-900)}
.form-status[data-state=err]{border-left-color:#b3261e;background:#fdecea;color:#5f1512}
.form-status[data-state=ok]{border-left-color:var(--lime-dk);background:var(--color-accent-2-100);color:var(--color-accent-2-900)}
.form-status[hidden]{display:none}
.btn[aria-busy=true]{opacity:.6;pointer-events:none}
/* the alternative channels under a form */
.altline{display:flex;flex-wrap:wrap;gap:8px;margin:var(--half) 0 0}
.altline .btn{flex:1 1 auto;justify-content:center;min-height:44px}
.btn-wa{background:#128c7e;border-color:#128c7e;color:#fff}
.btn-wa:hover{background:#0d6d62;border-color:#0d6d62;color:#fff}

/* — persistent contact affordances —
   Phone bar on small screens (where a tap dials), floating WhatsApp above. */
.actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);border-top:1px solid color-mix(in srgb,#fff 18%,transparent)}
.actionbar a{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;
  min-height:54px;text-decoration:none;color:#fff;font-family:var(--font-heading);font-weight:700;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  border-right:1px solid color-mix(in srgb,#fff 18%,transparent)}
.actionbar a:last-child{border-right:0}
.actionbar a.wa{background:#128c7e}
.actionbar a.quote{background:var(--color-accent-600)}
.actionbar svg{width:17px;height:17px;flex:none;fill:currentColor}
@media (max-width:900px){.actionbar{display:flex}body{padding-bottom:54px}}
@media print{.actionbar{display:none}body{padding-bottom:0}}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:65;width:54px;height:54px;
  display:grid;place-items:center;border-radius:50%;background:#128c7e;color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.3);text-decoration:none}
.wa-float:hover{background:#0d6d62;color:#fff}
.wa-float svg{width:28px;height:28px;fill:currentColor}
@media (max-width:900px){.wa-float{display:none}}

.totop{position:fixed;right:20px;bottom:86px;z-index:64;width:44px;height:44px;
  display:grid;place-items:center;background:var(--ink);color:#fff;border:1px solid color-mix(in srgb,#fff 26%,transparent);
  text-decoration:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.totop.on{opacity:1;visibility:visible}
.totop:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.totop svg{width:18px;height:18px;fill:currentColor}
@media (max-width:900px){.totop{right:14px;bottom:68px}}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* — scroll reveal — off unless site.js turns it on, so no-JS sees everything — */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
/* a section still below the fold when Print is pressed must not print blank */
@media print{.js .reveal{opacity:1!important;transform:none!important}}

/* — card polish — */
.thumbs a{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.thumbs a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.num-block{transition:border-color .16s ease}
.num-block:hover{border-top-color:var(--lime)}
@media (prefers-reduced-motion:reduce){.thumbs a,.num-block{transition:none}.thumbs a:hover{transform:none}}

/* — a spec sheet is something buyers print — */
@media print{
  .topbar,.site-head,.wa-float,.totop,.filterbar,.site-footer .foot-grid,.hero-media,.row,.altline,form{display:none!important}
  .hero{background:none;color:#000;padding-block:0}
  .hero .display,.hero h1,.hero p{color:#000}
  .section-dark{background:none;color:#000}
  .section-dark h2.sec-title,.section-dark p,.section-dark .num-title{color:#000}
  body{background:#fff}
  .product{break-inside:avoid;border:1px solid #999}
  .product-head{background:#fff;color:#000;border-bottom:1px solid #999}
  .product-head h2{color:#000}
  a[href]::after{content:""}
}

/* — reference tables (the SWG chart) — */
.tablewrap{overflow-x:auto;border:1px solid var(--color-divider);background:var(--paper-2)}
.tablewrap .table{min-width:320px}
.tablewrap .table th,.tablewrap .table td{padding:10px var(--leading)}
.tablewrap .table td{font-variant-numeric:tabular-nums}
.section-dark .tablewrap{background:transparent;border-color:color-mix(in srgb,#fff 20%,transparent)}
.section-dark .table th{color:var(--color-accent-300);border-bottom-color:color-mix(in srgb,#fff 24%,transparent)}
.section-dark .table td{border-bottom-color:color-mix(in srgb,#fff 12%,transparent)}
.section-dark .table tbody tr:hover{background:color-mix(in srgb,#fff 6%,transparent)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* — contact hero: the trade map —
   A dot-matrix world (images/world-map-dots.svg, generated on an equirectangular
   grid) with the Raipur hub ringed in orange and the export markets in lime.
   Sized by height and anchored right, so the map occupies the space the
   headline does not: type on the left over flat charcoal, the world on the
   right. Purely decorative — the markets it marks are named in text on
   distribution.html — so the layer is aria-hidden. */
.hero-map .hero-media{
  background-image:url(images/world-map-dots.svg?v=2);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% auto}
/* Left-weighted scrim: the headline sits over the Americas at near-full
   charcoal, and the map is left legible from the Atlantic eastward — which is
   where the hub and every export market are. */
.hero-map .hero-media::after{
  background:linear-gradient(90deg,rgba(20,25,29,.95) 0%,rgba(20,25,29,.88) 28%,rgba(20,25,29,.50) 55%,rgba(20,25,29,.28) 100%)}
/* the hero needs room for the map to read as a map */
/* min-height only — see the cover-synchronisation block at the end of this
   file. Never make .hero a flex/grid container: .wrap carries margin:0 auto,
   which as a cross-axis auto margin shrink-wraps and centres the text. */
.hero-map{min-height:420px}
/* On a narrow screen the type stacks across the full width, so a left-to-right
   scrim no longer protects it. The map drops below the copy and the scrim runs
   top-to-bottom instead. */
@media (max-width:900px){
  .hero-map .hero-media{background-position:center bottom -8%;background-size:150% auto}
  .hero-map .hero-media::after{background:linear-gradient(180deg,rgba(20,25,29,.94) 0%,rgba(20,25,29,.86) 46%,rgba(20,25,29,.58) 100%)}
}
@media (max-width:560px){
  .hero-map .hero-media{background-size:190% auto;background-position:center bottom -4%}
  .hero-map .hero-media::after{background:linear-gradient(180deg,rgba(20,25,29,.94) 0%,rgba(20,25,29,.86) 52%,rgba(20,25,29,.56) 100%)}
}
@media print{.hero-map .hero-media{display:none}}

/* — photographic heroes (about, products) —
   The scrim is heavier than the homepage's because there is no video layer
   damping the photograph underneath it, and both of these shots are bright. */
.hero-photo .hero-media{background-size:cover;background-repeat:no-repeat}
.hero-photo .hero-media::after{
  background:linear-gradient(90deg,rgba(20,25,29,.95) 0%,rgba(20,25,29,.87) 40%,rgba(20,25,29,.64) 72%,rgba(20,25,29,.54) 100%)}
.hero-photo{min-height:400px}
/* about — the coil stockyard, framed left of the homepage's crop so the two
   pages do not read as the same picture twice */
.hero-stock .hero-media{background-image:url(images/steel-wire-coils.jpg?v=2);background-position:16% 64%}
/* products — welded mesh, cropped from inside the roll stack */
.hero-mesh .hero-media{background-image:url(images/products-hero.jpg?v=2);background-position:center 42%}
/* narrow screens: type runs full width, so the scrim has to run down, not across */
@media (max-width:900px){
  .hero-photo .hero-media::after{
    background:linear-gradient(180deg,rgba(20,25,29,.93) 0%,rgba(20,25,29,.86) 50%,rgba(20,25,29,.74) 100%)}
}


/* ══════════════════════════════════════════════════════════════════════════
   COVER SYNCHRONISATION
   Every page opens with the same cover: one floor height, one top padding, and
   the type starting on the same left gutter as the body content beneath it.
   Pages differ only by how much they have to say inside that frame.
   ══════════════════════════════════════════════════════════════════════ */
.hero{min-height:480px}
/* .wrap sets the gutter for the whole site; the cover must not introduce its
   own. Anything that would re-anchor the text — centring, auto margins on the
   inner column, a text-align inherited from a parent — is neutralised here. */
.hero>.wrap{width:100%;max-width:1180px;margin-inline:auto;text-align:left}
.hero .flag,.hero .display,.hero h1,.hero p.lede,.hero p.rule-quote,
.hero .chips,.hero .row,.hero nav[aria-label=Breadcrumb]{text-align:left}
.hero .chips,.hero .row{justify-content:flex-start}
/* one rhythm down the cover, whatever the page puts in it */
.hero .display{margin-top:20px}
.hero p.lede,.hero p.rule-quote{margin-top:var(--leading)}
@media (max-width:900px){.hero{min-height:400px}}
@media (max-width:560px){.hero{min-height:340px}}

/* ══════════════════════════════════════════════════════════════════════════
   ROW LISTS — hover and full-row targets
   .rows is used two ways: as a list of links (the product range, related
   products) and as plain reference copy (the export documents, the buyers we
   work with). Only the linked rows get the hover, hence :has() — a highlight on
   a row that does not go anywhere is a broken promise.
   ══════════════════════════════════════════════════════════════════════ */

/* The anchor only wraps the title, so the description was dead space. This
   stretches it over the whole row: the row becomes the click target, and the
   position:relative sits on every li (not behind :has) so the overlay can never
   escape its row in a browser that lacks :has support. */
.rows li{position:relative}
.rows li>a::after{content:"";position:absolute;inset:0}

.rows li:has(>a){transition:background-color .16s ease,padding-inline-start .16s ease}
.rows li:has(>a) strong{transition:color .16s ease}
/* the orange rule the brochure already uses on .num-block and .rule-quote,
   wiped in from the top rather than simply appearing */
.rows li:has(>a)::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--orange);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .18s ease}
.rows li:has(>a):hover,
.rows li:has(>a):focus-within{
  background:color-mix(in srgb,var(--orange) 7%,transparent);
  padding-inline-start:14px}
.rows li:has(>a):hover::before,
.rows li:has(>a):focus-within::before{transform:scaleY(1)}
.rows li:has(>a):hover strong,
.rows li:has(>a):focus-within strong{color:var(--color-accent-700)}
/* keyboard: the ring belongs on the row now that the row is the target */
.rows li:has(>a):focus-within{outline:2px solid var(--orange);outline-offset:-2px}
.rows li>a:focus-visible{outline:none}

/* on charcoal the orange wash disappears — lift with white and the lime */
.section-dark .rows li:has(>a):hover,
.section-dark .rows li:has(>a):focus-within{background:color-mix(in srgb,#fff 8%,transparent)}
.section-dark .rows li:has(>a):hover strong,
.section-dark .rows li:has(>a):focus-within strong{color:var(--lime)}
.section-dark .rows li:has(>a)::before{background:var(--lime)}

@media (prefers-reduced-motion:reduce){
  .rows li:has(>a),.rows li:has(>a) strong,.rows li:has(>a)::before{transition:none}
}
@media print{.rows li:has(>a)::before{display:none}}

/* — enquiry form: the domestic / export switch — */
.form-grid fieldset.seg-field{border:0;padding:0;margin:0;min-width:0}
.form-grid fieldset.seg-field legend{
  display:block;padding:0;font-size:12px;margin-bottom:5px;
  color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.form-grid .seg{width:100%}
/* three trades side by side: the trade on top, where it applies underneath, so
   the control stays legible in a column this narrow without truncating */
.form-grid .seg-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* display is restated because `.field label{display:block}` (0,1,1) out-specifies
   the system's `.seg-opt{display:inline-flex}` (0,1,0) — without it the two
   lines run together as "DOMESTICINDIA". */
.form-grid .seg-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-height:48px;padding:7px 6px;text-align:center;line-height:1.15}
.form-grid .seg-opt .t,.form-grid .seg-opt .s{display:block}
.form-grid .seg-opt .t{font-family:var(--font-heading);font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase}
.form-grid .seg-opt .s{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.62}
.form-grid .seg-opt:has(input:checked){background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.form-grid .seg-opt:has(input:checked) .s{opacity:.85}
.form-grid [data-when][hidden]{display:none}
@media (max-width:400px){
  .form-grid .seg-opt .t{font-size:12px;letter-spacing:.02em}
  .form-grid .seg-opt .s{font-size:9px;letter-spacing:.04em}
}

/* — contact: the enquiry form is the taller and more important of the two
     columns, so it gets the room; the address block reads fine narrower — */
.split#quote{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
@media (max-width:720px){.split#quote{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   HOW THE PAGE CLOSES
   Sections and the footer were both --ink, so a dark section running into the
   footer read as one undifferentiated block. Two changes fix it:

     sections   #1e252b  --ink       the reading surface
     footer     #14191d              a step deeper, and the same tone as the
                                     topbar, so the page is bookended, with a
                                     3px orange rule as the hard stop

   The closing band on contact.html is the brochure's paper, not a third dark
   tone. Navy was tried and pulled: it appears nowhere else at this scale — only
   in small panels — so a full-width navy block read as a foreign colour against
   a site built from cream, charcoal and orange. Paper between two dark blocks
   separates them far more decisively than another shade of dark ever could.
   ══════════════════════════════════════════════════════════════════════ */
.foot-cta{background:var(--paper-2);color:var(--ink);
  border-top:1px solid var(--color-divider);
  padding-block:calc(1.75*var(--leading))}
/* One left-aligned column. The earlier two-column split pushed the buttons to
   the far right and left a void across the middle at wide viewports. */
.foot-cta .wrap{display:block}
.foot-cta .kicker{color:var(--color-accent-700);margin:0 0 var(--half)}
.foot-cta h2{font-family:var(--font-heading);font-weight:700;
  font-size:clamp(23px,2.5vw,32px);line-height:1.06;letter-spacing:.005em;
  text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.foot-cta p{font-size:15px;line-height:var(--leading);margin:0;max-width:58ch;
  color:var(--ink-78)}
.foot-cta .row{margin:0;flex-wrap:wrap}
/* the three facts a visitor wants once the form is filled in: when we reply,
   how to reach us faster, and where else to write */
.foot-cta .cta-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--leading) clamp(20px,3vw,44px);margin:calc(1.25*var(--leading)) 0 0;
  border-top:1px solid var(--color-divider);padding-top:var(--leading)}
.foot-cta .cta-pairs dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-700);margin:0 0 5px}
.foot-cta .cta-pairs dd{margin:0;font-size:15px;line-height:var(--leading);color:var(--ink)}
.foot-cta .cta-pairs a{color:var(--color-accent-700)}
.foot-cta .cta-pairs a:hover{color:var(--color-accent-800)}
@media (max-width:720px){.foot-cta .cta-pairs{grid-template-columns:1fr;gap:var(--half)}
  .foot-cta .cta-pairs>div+div{border-top:1px solid var(--color-divider);padding-top:var(--half)}}
@media (max-width:820px){
  .foot-cta .wrap{grid-template-columns:1fr}
  .foot-cta .row .btn{flex:1 1 auto;justify-content:center;min-height:44px}
}
@media print{.foot-cta{display:none}}

.site-footer{background:#14191d;border-top:3px solid var(--color-accent-600)}


/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT IMAGE ZOOM
   The shots are white-ground cutouts, so a zoom has to be clipped by the frame
   or the coil simply grows over its neighbours. Both frames therefore clip
   (overflow:hidden) and only the <img> inside is scaled.

   On the thumbnails the image and its caption are siblings inside one <a>, so
   the image carries a .ph wrapper — clipping the <a> instead would let the
   zoomed coil run over the title.
   ══════════════════════════════════════════════════════════════════════ */
figure.product-figure img,
.thumbs .ph img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
figure.product-figure:hover img,
.product:hover figure.product-figure img{transform:scale(1.11)}

.thumbs .ph{display:block;overflow:hidden;background:#fff}
.thumbs a:hover .ph img,
.thumbs a:focus-visible .ph img{transform:scale(1.11)}

/* a zoom is enough movement on its own — drop the card lift so the two are not
   fighting each other */
.thumbs a:hover{transform:none}

@media (prefers-reduced-motion:reduce){
  figure.product-figure img,.thumbs .ph img{transition:none}
  figure.product-figure:hover img,.product:hover figure.product-figure img,
  .thumbs a:hover .ph img,.thumbs a:focus-visible .ph img{transform:none}
}
@media print{figure.product-figure img,.thumbs .ph img{transform:none!important}}