:root{
  --navy:#0B2039; --navy-2:#0E2A49; --deep:#071628;
  --blue:#2F6FA8; --blue-soft:#89AACB; --gold:#B08D4F; --gold-soft:#CBAE78;
  --paper:#FCFCFB; --wash:#F3F4F1; --line:#DCDDD8; --line-2:#C6C8C1;
  --line-dark:#1D3752;
  --ink:#16202C; --body:#4C5967; --muted:#7C8894;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1140px; --gut:clamp(20px,5vw,60px);
  --ease:cubic-bezier(.3,.7,.4,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:#E8DCC2;color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#fff;
  padding:11px 18px;font-weight:600}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.narrow{max-width:64ch}

/* typography */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;
  letter-spacing:-.008em;color:var(--ink)}
h1{font-size:clamp(2.05rem,3.4vw,2.95rem);line-height:1.1}
h2{font-size:clamp(1.5rem,2.3vw,1.95rem)}
h3{font-size:1.12rem;line-height:1.3}
h4{font-size:.98rem}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}
.lede{font-size:1.06rem;line-height:1.6;color:var(--body);max-width:56ch}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.muted{color:var(--body)}
strong,b{font-weight:600}

/* header */
.hdr{position:sticky;top:0;z-index:120;background:var(--navy);
  border-bottom:1px solid var(--line-dark)}
.hdr .inner{display:flex;align-items:center;gap:26px;height:70px}
.hdr.solid{box-shadow:0 1px 0 rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img,.brand .logomark{width:34px;height:34px;flex:none}
.brand b{font-family:var(--serif);font-size:1rem;font-weight:600;color:#fff;line-height:1.15}
.brand span{display:block;font-family:var(--sans);font-size:.58rem;font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:var(--blue-soft);margin-top:1px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font-size:.845rem;color:#CBD6E1;padding:8px 12px;transition:color .18s;
  border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;border-bottom-color:var(--gold)}
.lang{display:flex;margin-left:14px;flex:none;font-size:.72rem;letter-spacing:.06em}
.lang a{color:#7E93A8;padding:4px 6px}
.lang a.on{color:#fff}
.lang a+a{border-left:1px solid var(--line-dark);margin-left:2px;padding-left:8px}
.cta-btn{margin-left:16px;color:#fff!important;font-size:.845rem;font-weight:500;
  padding:8px 0!important;border-bottom:1px solid var(--gold)!important;
  display:inline-flex;align-items:center;gap:7px;transition:border-color .2s}
.cta-btn:hover{border-bottom-color:#fff!important}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.55rem;cursor:pointer;
  margin-left:auto;padding:2px 6px;line-height:1}

/* hero */
.hero{background:var(--navy);color:#fff;padding:clamp(56px,7vw,92px) 0 0}
.hero .inner{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:end;padding-bottom:clamp(40px,5vw,62px)}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{color:#fff;font-size:clamp(2.2rem,4vw,3.3rem);max-width:15ch}
.hero h1 em{display:block;font-style:normal;font-weight:400;color:#93AECA;
  font-size:.62em;margin-top:.14em;letter-spacing:0}
.hero .lede{color:#B6C7D6;margin-top:22px;max-width:46ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero .side{border-top:1px solid var(--line-dark);padding-top:22px}
.hero .side dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:4px}
.hero .side dd{font-size:.88rem;color:#B6C7D6;margin-bottom:17px;line-height:1.5}
.hero .side dd:last-child{margin-bottom:0}

/* interior page header */
.phead{background:var(--navy);color:#fff;padding:clamp(38px,5vw,58px) 0 clamp(40px,5vw,56px)}
.phead h1{color:#fff;max-width:19ch}
.phead .lede{color:#B6C7D6;margin-top:16px;max-width:60ch}
.phead .eyebrow{color:var(--gold-soft)}
.crumb{font-size:.75rem;color:#8CA2B7;margin-bottom:22px}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumb span{opacity:.45;margin:0 7px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-size:.875rem;
  font-weight:500;border-radius:2px;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#9A7B42}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2)}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--navy);background:#fff}
.inline-link{display:inline-flex;align-items:center;gap:7px;font-size:.875rem;
  font-weight:500;color:var(--blue);border-bottom:1px solid var(--line-2);
  padding-bottom:2px;transition:border-color .2s,color .2s}
.inline-link:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* bands */
.band{padding:clamp(46px,6vw,80px) 0}
.band--wash{background:var(--wash);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.band--dark{background:var(--navy);color:#E3EAF1}
.band--dark h2,.band--dark h3,.band--dark h4{color:#fff}
.band--dark p,.band--dark .lede{color:#B6C7D6}
.band--dark .eyebrow{color:var(--gold-soft)}
.band--deep{background:var(--deep);color:#DDE5EC}
.band--deep h2,.band--deep h3{color:#fff}
.band--deep p,.band--deep .lede{color:#A9BCCC}
.band--deep .eyebrow{color:var(--gold-soft)}

/* section head: label sits in the left margin */
.shead{display:grid;grid-template-columns:176px minmax(0,1fr);gap:0 36px;
  border-top:1px solid var(--line-2);padding-top:18px;margin-bottom:clamp(28px,3.4vw,42px)}
.band--dark .shead,.band--deep .shead{border-top-color:#2A4767}
.shead .eyebrow{margin:0;padding-top:4px}
.shead h2{grid-column:2}
.shead .lede{grid-column:2;margin-top:12px}
@media(max-width:800px){.shead{grid-template-columns:1fr}
  .shead h2,.shead .lede{grid-column:1}.shead .eyebrow{margin-bottom:10px}}

/* index rows replace repeated card grids */
.index{border-top:1px solid var(--line-2)}
.band--dark .index,.band--deep .index{border-top-color:#2A4767}
.entry{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.35fr);
  gap:0 34px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.band--dark .entry,.band--deep .entry{border-bottom-color:#1D3752}
.entry .num{font-family:var(--serif);font-size:.95rem;color:var(--gold);padding-top:3px;
  font-variant-numeric:tabular-nums}
.entry .ttl{display:flex;align-items:flex-start;gap:11px}
.entry .ttl i{font-size:1.2rem;color:var(--gold);flex:none;margin-top:2px}
.entry p{font-size:.94rem;color:var(--body)}
.band--dark .entry p,.band--deep .entry p{color:#A9BCCC}
.entry .go{display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-size:.8rem;font-weight:500;color:var(--blue)}
a.entry{transition:background .22s}
a.entry:hover{background:rgba(0,0,0,.022)}
.band--dark a.entry:hover{background:rgba(255,255,255,.03)}
a.entry:hover .go i{transform:translateX(3px)}
a.entry .go i{transition:transform .2s var(--ease);font-size:.9rem}
@media(max-width:860px){.entry{grid-template-columns:32px minmax(0,1fr);gap:0 16px}
  .entry p{grid-column:2;margin-top:8px}}

/* two column prose */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
  gap:clamp(26px,4.5vw,62px);align-items:start}
.split h2{margin-bottom:14px}

/* figure strip */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-2)}
.fig{padding:20px 22px 20px 0;border-right:1px solid var(--line)}
.fig:last-child{border-right:0;padding-right:0}
.fig .n{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--navy);
  line-height:1;font-variant-numeric:tabular-nums}
.fig .c{font-size:.78rem;color:var(--body);margin-top:8px;line-height:1.4;max-width:22ch}
.band--dark .fig .n,.band--deep .fig .n{color:var(--gold-soft)}
.band--dark .fig{border-right-color:#1D3752}
@media(max-width:800px){.figs{grid-template-columns:1fr 1fr}
  .fig{border-bottom:1px solid var(--line);padding-right:18px}
  .fig:nth-child(2n){border-right:0}}

/* tick list */
.ticks{list-style:none;margin-top:22px}
.ticks li{position:relative;padding-left:24px;margin-bottom:11px;font-size:.93rem;
  color:var(--body)}
.ticks li i{position:absolute;left:0;top:.3em;color:var(--gold);font-size:.95rem}
.band--dark .ticks li,.band--deep .ticks li{color:#B6C7D6}

/* specification table */
.spec{width:100%;border-collapse:collapse}
.spec td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top;
  font-size:.94rem}
.spec tr:first-child td{border-top:1px solid var(--line-2)}
.spec td:first-child{width:190px;color:var(--muted);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding-top:16px;padding-right:24px}
.band--dark .spec td{border-color:#1D3752;color:#CBD6E1}
.band--dark .spec td:first-child{color:var(--blue-soft)}
@media(max-width:700px){.spec td{display:block;border:0;padding:2px 0}
  .spec td:first-child{width:auto;padding-top:14px}
  .spec tr{display:block;border-bottom:1px solid var(--line);padding-bottom:12px}
  .spec tr:first-child td{border-top:0}}

/* accordion */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 36px 17px 0;position:relative;
  font-family:var(--serif);font-size:1.05rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:absolute;right:2px;top:20px;color:var(--muted);font-size:1rem;
  transition:transform .22s var(--ease)}
.faq details[open] summary{color:var(--navy)}
.faq details[open] summary i{transform:rotate(45deg);color:var(--gold)}
.faq .ans{padding:0 60px 20px 0;font-size:.94rem;color:var(--body);max-width:70ch}

/* regions */
.regions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border-top:1px solid #2A4767}
.region{padding:20px 20px 20px 0;border-right:1px solid #1D3752}
.region:last-child{border-right:0}
.region h4{color:#fff;margin-bottom:6px;font-size:1rem}
.region p{font-size:.8rem;color:#95AABE;line-height:1.5}
@media(max-width:860px){.regions{grid-template-columns:1fr 1fr}
  .region{border-bottom:1px solid #1D3752}
  .region:nth-child(2n){border-right:0}}

/* statement */
.statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.5vw,62px);align-items:start;border-top:1px solid #2A4767;
  padding-top:24px}
.statement .eyebrow{grid-column:1/-1;margin-bottom:4px}
.statement blockquote{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.28;color:#fff;font-weight:400}
.statement .stbody p{color:#A9BCCC;font-size:.96rem}
.statement .sign{font-family:var(--serif);font-style:italic;color:var(--gold-soft);
  margin-top:18px;font-size:.95rem}
@media(max-width:800px){.statement{grid-template-columns:1fr}}

/* note */
.note{border-left:2px solid var(--gold);padding:4px 0 4px 22px;font-size:.92rem;
  color:var(--body);max-width:72ch}
.note b{color:var(--ink)}
.band--dark .note{color:#B6C7D6}
.band--dark .note b{color:#fff}

/* trade notes */
.post{display:grid;grid-template-columns:104px minmax(0,1fr);gap:28px;padding:26px 0;
  border-bottom:1px solid var(--line)}
.post:first-child{border-top:1px solid var(--line-2)}
.post .date{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding-top:5px}
.post h3{margin-bottom:8px;max-width:44ch}
.post p{font-size:.94rem;color:var(--body);max-width:74ch}
@media(max-width:700px){.post{grid-template-columns:1fr;gap:6px}}

/* call to action */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;
  border-top:1px solid #2A4767;padding-top:26px}
.cta h2{max-width:20ch}
.cta .lede{margin-top:12px}
.cta .acts{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:800px){.cta{grid-template-columns:1fr;align-items:start}}

/* legal */
.legal{display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:clamp(26px,4.5vw,58px);align-items:start}
.ltoc{position:sticky;top:96px}
.ltoc ul{list-style:none;border-top:1px solid var(--line-2);padding-top:14px}
.ltoc li{margin-bottom:9px}
.ltoc a{font-size:.83rem;color:var(--body)}
.ltoc a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.lbody{max-width:68ch}
.lblock{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.lblock:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lblock h2{font-size:1.2rem;margin-bottom:12px;scroll-margin-top:96px}
.lblock p{font-size:.96rem;color:var(--body)}
@media(max-width:860px){.legal{grid-template-columns:1fr}.ltoc{position:static}}

/* contact */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line-2)}
.tile{padding:24px 26px 22px 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column;transition:opacity .2s}
.tile:last-child{border-right:0}
.tile:hover{opacity:.72}
.tile i{font-size:1.35rem;color:var(--gold);margin-bottom:13px}
.tile h3{margin-bottom:6px}
.tile p{font-size:.9rem;color:var(--body);flex:1}
.tile .meta{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.845rem;
  font-weight:500;color:var(--blue);word-break:break-word}
.tile .meta i{font-size:.9rem;color:inherit;margin:0}
@media(max-width:800px){.tiles{grid-template-columns:1fr}
  .tile{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .tile:last-child{border-bottom:0}}

.hours{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--body)}
.hours b{color:var(--ink);font-weight:600}
.hours .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.hours .dot.open{background:#3F7D52}
.hours .dot.shut{background:#9A7B42}
.hours .clock{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
@media(max-width:700px){.hours .clock{margin-left:0}}

.rfqx{border-top:1px solid var(--line-2);padding-top:26px}
.stepdots{list-style:none;display:flex;flex-wrap:wrap;gap:0 26px;margin-bottom:30px;
  font-size:.8rem}
.stepdots li{display:flex;align-items:center;gap:8px;color:var(--muted);
  padding-bottom:9px;border-bottom:2px solid transparent}
.stepdots li span{font-variant-numeric:tabular-nums;font-weight:600;color:var(--line-2)}
.stepdots li.on{color:var(--ink);border-bottom-color:var(--navy)}
.stepdots li.on span{color:var(--navy)}
.stepdots li.done span{color:var(--gold)}

.rfqgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(26px,4vw,50px);align-items:start}
.pane{display:none;border:0;min-width:0}
.pane.on{display:block}
.pane legend{font-family:var(--serif);font-size:1.14rem;font-weight:600;padding:0;
  margin-bottom:5px}
.hint{font-size:.845rem;color:var(--muted);line-height:1.5}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:2px;
  border:1px solid var(--line-2);background:transparent;font-family:var(--sans);
  font-size:.875rem;color:var(--ink);cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.chip i{color:var(--gold);font-size:1.05rem}
.chip:hover{border-color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.on i{color:var(--gold-soft)}

.field{margin-bottom:17px}
.field label{display:block;font-size:.71rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:2px;font-family:var(--sans);
  font-size:.94rem;color:var(--ink);background:#fff;transition:border-color .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--navy)}
.field textarea{min-height:104px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sendrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.err{color:#9B3232;font-size:.85rem;margin-top:14px;display:none}
.err.on{display:block}
.navrow{display:flex;gap:10px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line)}
.navrow [data-step="1"]{margin-left:auto}

.rfqprev{background:var(--wash);border:1px solid var(--line);padding:20px 22px;
  position:sticky;top:96px}
.prevhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rfqprev h3{font-size:1rem}
.rfqprev .hint{margin-top:14px;font-size:.78rem}
.rfqprev pre{font-family:var(--sans);font-size:.83rem;line-height:1.7;color:var(--body);
  white-space:pre-wrap;word-break:break-word;margin:0;max-height:300px;overflow:auto}
.rfqprev pre.empty{color:var(--muted);font-style:italic}
.copybtn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  color:var(--blue);font-family:var(--sans);font-size:.77rem;cursor:pointer;
  border-bottom:1px solid var(--line-2);padding:0 0 2px;
  transition:color .2s,border-color .2s}
.copybtn:hover{color:var(--navy);border-bottom-color:var(--navy)}
.copybtn.done{color:#3F7D52;border-bottom-color:#3F7D52}
@media(max-width:900px){.rfqgrid{grid-template-columns:1fr}.rfqprev{position:static}
  .row2{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--deep);color:#8DA0B2;padding:54px 0 26px;font-size:.875rem}
.foot .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;
  gap:clamp(24px,3.5vw,46px);padding-bottom:34px}
.foot h4{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-soft);font-family:var(--sans);font-weight:600;margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin-bottom:8px}
.foot a:hover{color:#fff}
.foot .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot .fbrand img,.foot .fbrand .logomark{width:38px;height:38px;flex:none}
.foot .fbrand b{font-family:var(--serif);font-size:1rem;color:#fff;line-height:1.2}
.foot .contactline{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;
  font-size:.85rem}
.foot .contactline i{color:var(--gold);font-size:.95rem;margin-top:3px;flex:none}
.legalnav{padding-top:22px;border-top:1px solid var(--line-dark)}
.legalnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}
.legalnav li{margin:0}
.legalnav a{font-size:.8rem}
.foot .base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-top:18px;margin-top:18px;border-top:1px solid var(--line-dark);
  font-size:.76rem;color:#5F7488}
.wa{position:fixed;right:18px;bottom:18px;z-index:130;width:46px;height:46px;
  border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1.35rem;box-shadow:0 3px 14px rgba(7,22,40,.3);
  transition:background .2s}
.wa:hover{background:var(--gold)}

/* motion, restrained */
.rv{opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}
.rv.d3{transition-delay:.16s}.rv.d4{transition-delay:.2s}.rv.d5{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* responsive */
@media(max-width:980px){
  .hero .inner{grid-template-columns:1fr;gap:34px;align-items:start}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .burger{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(300px,82vw);background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;padding:82px 20px 26px;
    transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto;
    border-left:1px solid var(--line-dark)}
  .nav.open{transform:none}
  .nav a{padding:13px 2px;font-size:.95rem;border-bottom:1px solid var(--line-dark)}
  .nav a[aria-current]{border-bottom-color:var(--gold)}
  .cta-btn{margin:18px 0 0;padding:11px 0!important;justify-content:flex-start}
  .lang{margin:16px 0 0}
  .split,.rfqgrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .foot .cols{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .fig{border-right:0}
}

/* ══ utility strip above the masthead ══ */
.util{background:var(--deep);border-bottom:1px solid var(--line-dark);
  font-size:.755rem;color:#8DA0B2;letter-spacing:.01em}
.util .wrap{display:flex;align-items:center;gap:0 22px;height:36px}
.util span,.util a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.util i{color:var(--gold);font-size:.85rem}
.util a{transition:color .18s}
.util a:hover{color:#fff}
.util .lang{margin-left:auto;gap:0;border-left:1px solid var(--line-dark);
  padding-left:16px;height:36px;align-items:center}
.util .lang a{padding:0 8px;color:#6E8296;font-weight:500;letter-spacing:.07em}
.util .lang a.on{color:#fff}
.util .lang a+a{border-left:1px solid var(--line-dark)}
@media(max-width:1080px){.util .u-hrs{display:none}}
@media(max-width:820px){.util .u-loc{display:none}}
@media(max-width:560px){.util .wrap{gap:0 14px}.util a span{display:none}}

/* ══ masthead ══ */
.hdr .inner{height:66px}
.nav>a,.has-sub>a{font-size:.845rem;color:#CBD6E1;padding:0 13px;height:66px;
  display:inline-flex;align-items:center;gap:5px;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s}
.nav>a:hover,.has-sub>a:hover{color:#fff}
.nav>a[aria-current],.has-sub>a[aria-current]{color:#fff;border-bottom-color:var(--gold)}
.has-sub{position:relative}
.has-sub>a i{font-size:.8rem;opacity:.7;transition:transform .2s var(--ease)}
.has-sub:hover>a{color:#fff}
.has-sub:hover>a i{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:0;min-width:246px;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--gold);
  box-shadow:0 12px 28px -18px rgba(7,22,40,.5);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 18px;font-size:.855rem;color:var(--ink);
  border-left:2px solid transparent;transition:background .15s,border-color .15s}
.sub a:hover{background:var(--wash);border-left-color:var(--gold)}
.sub a.on{border-left-color:var(--navy);font-weight:600}
.hdr .cta-btn{margin-left:18px;padding:9px 16px!important;background:var(--gold);
  border-bottom:0!important;border-radius:2px;font-weight:600;
  transition:background .2s}
.hdr .cta-btn:hover{background:#9A7B42;border-bottom:0!important}

@media(max-width:860px){
  .nav{padding-top:72px}
  .nav>a,.has-sub>a{height:auto;padding:12px 2px;border-bottom:1px solid var(--line-dark)}
  .has-sub{position:static}
  .has-sub>a i{margin-left:auto}
  .sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;
    border:0;box-shadow:none;padding:0 0 8px;min-width:0}
  .sub a{color:#9DB0C4;padding:9px 0 9px 16px;border-left:1px solid var(--line-dark)}
  .sub a:hover{background:transparent;color:#fff}
  .hdr .cta-btn{margin:16px 0 0;justify-content:center}
}

/* denser rhythm */
.band{padding:clamp(40px,4.8vw,66px) 0}
.shead{margin-bottom:clamp(24px,2.8vw,34px)}
.entry{padding:20px 0}

/* ══ texture on the dark bands, so they are not flat fields ══ */
.phead,.hero,.band--dark{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 92px);
  background-position:center top}
.band--deep{background-image:
  repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 92px)}

/* ══ page header: two columns, panel on the right ══ */
.phead .inner{display:grid;grid-template-columns:minmax(0,1fr) 326px;
  gap:clamp(28px,4vw,64px);align-items:start}
.phead-main{padding-top:2px}
.phead h1{max-width:16ch}
.phead .lede{max-width:46ch}
.phead-panel{background:rgba(255,255,255,.045);border:1px solid #23405E;
  border-top:2px solid var(--gold);padding:22px 24px 24px}
.phead-panel h2{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-family:var(--sans);font-weight:600;color:var(--gold-soft);margin-bottom:14px}
.sibnav a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid #23405E;font-size:.9rem;color:#CBD6E1;
  transition:color .18s,padding .18s}
.sibnav a:last-child{border-bottom:0}
.sibnav a i{font-size:.9rem;color:#5C7B9E;transition:transform .2s var(--ease),color .18s}
.sibnav a:hover{color:#fff;padding-left:4px}
.sibnav a:hover i{color:var(--gold);transform:translateX(3px)}
.sibnav a.on{color:#fff;font-weight:600}
.sibnav a.on i{color:var(--gold)}
.minifacts{margin-bottom:18px}
.minifacts dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7E93A8;margin-bottom:3px}
.minifacts dd{font-size:.9rem;color:#CBD6E1;margin-bottom:13px;word-break:break-word}
.minifacts dd:last-child{margin-bottom:0}
.minifacts a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.phead-panel .btn{width:100%;justify-content:center}
@media(max-width:900px){.phead .inner{grid-template-columns:1fr}
  .phead-panel{max-width:420px}}

/* ══ section label mark ══ */
.shead .eyebrow{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  line-height:1.35}
.shead .eyebrow i{font-size:1.15rem;color:var(--gold);opacity:.9}
@media(max-width:800px){.shead .eyebrow{flex-direction:row;align-items:center;gap:8px}}

/* ══ mega menu panel ══ */
.sub{min-width:520px;padding:0;display:grid;grid-template-columns:212px 1fr}
.sub-intro{background:var(--wash);border-right:1px solid var(--line);padding:20px 18px}
.sub-intro i{font-size:1.4rem;color:var(--gold);display:block;margin-bottom:10px}
.sub-intro h3{font-size:1rem;margin-bottom:6px}
.sub-intro p{font-size:.79rem;color:var(--body);line-height:1.5}
.sub-links{padding:8px 0}
@media(max-width:860px){
  .sub{min-width:0;grid-template-columns:1fr;display:block}
  .sub-intro{display:none}
}

/* ══ quote band ══ */
.quote{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 26px;
  border-top:1px solid #2A4767;padding-top:26px}
.quote .mark{font-family:var(--serif);font-size:3.6rem;line-height:.8;
  color:var(--gold);opacity:.55}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);
  line-height:1.36;color:#fff;font-weight:400;max-width:34ch}
.quote .attr{margin-top:18px;font-size:.83rem;color:#93AECA;letter-spacing:.02em}
.quote .attr b{color:#fff;font-weight:600}
@media(max-width:700px){.quote{grid-template-columns:1fr;gap:10px}}

/* ══ standards strip ══ */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.badge{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 20px 0;
  border-right:1px solid var(--line)}
.badge:last-child{border-right:0}
.badge i{font-size:1.4rem;color:var(--gold);flex:none;margin-top:1px}
.badge b{display:block;font-family:var(--serif);font-size:.98rem;font-weight:600;
  margin-bottom:3px}
.badge span{font-size:.78rem;color:var(--body);line-height:1.45}
@media(max-width:860px){.badges{grid-template-columns:1fr 1fr}
  .badge{border-bottom:1px solid var(--line)}
  .badge:nth-child(2n){border-right:0}}
@media(max-width:520px){.badges{grid-template-columns:1fr}
  .badge{border-right:0;padding-right:0}}

/* split: heading and supporting list left, prose right */
.split{grid-template-columns:minmax(0,.92fr) minmax(0,1.4fr)}
.split .ticks{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.band--dark .split .ticks{border-top-color:#23405E}
.split .ticks li{font-size:.88rem;margin-bottom:10px}
.split .prose p{font-size:1rem;line-height:1.7}
.split .prose p:first-child::first-line{letter-spacing:.005em}
@media(max-width:860px){.split{grid-template-columns:1fr}
  .split .ticks{border-top:0;padding-top:0}}
.split .eyebrow,.statement .eyebrow{display:flex;align-items:center;gap:8px}
.split .eyebrow i,.statement .eyebrow i{font-size:1.05rem;color:var(--gold)}

/* ═══════════════════ CINEMATIC HERO ═══════════════════ */
.hero{position:relative;background:#071628;color:#fff;overflow:hidden;
  min-height:min(88vh,860px);display:flex;flex-direction:column;
  padding:0;background-image:none}

/* stage: five scene plates that cross fade */
.stage{position:absolute;inset:0;z-index:0}
.scene{position:absolute;inset:-4% -2%;opacity:0;
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1),transform 9s linear;
  transform:scale(1.045);background-size:cover;background-position:center}
.scene.on{opacity:1;transform:scale(1)}
.veil{position:absolute;inset:0;
  background:linear-gradient(100deg,#071628 0%,rgba(7,22,40,.93) 34%,
    rgba(7,22,40,.55) 56%,rgba(7,22,40,.30) 78%,rgba(7,22,40,.52) 100%)}

/* scene plates: authored artwork, swap background-image for a photograph */
.scene.s1{background-color:#0A2137;background-image:
  repeating-linear-gradient(90deg,rgba(198,174,120,.30) 0 1px,transparent 1px 11px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 11px),
  radial-gradient(78% 76% at 80% 26%,rgba(176,141,79,.30) 0%,transparent 62%),
  radial-gradient(130% 110% at 66% 34%,#173F63 0%,#08192B 74%)}
.scene.s2{background-color:#0A2137;background-image:
  repeating-radial-gradient(circle at 74% 48%,transparent 0 26px,
    rgba(198,174,120,.34) 26px 27px,transparent 27px 54px),
  radial-gradient(46% 46% at 74% 48%,rgba(140,190,235,.22) 0%,transparent 70%),
  radial-gradient(120% 100% at 72% 48%,#17466E 0%,#08192B 72%)}
.scene.s3{background-color:#0A2137;background-image:
  repeating-linear-gradient(0deg,rgba(255,255,255,.19) 0 1px,transparent 1px 14px),
  linear-gradient(72deg,transparent 44%,rgba(198,174,120,.34) 44.5%,
    rgba(198,174,120,.10) 46%,transparent 47%),
  radial-gradient(86% 78% at 82% 22%,rgba(176,141,79,.26) 0%,transparent 60%),
  radial-gradient(130% 110% at 74% 30%,#163C5E 0%,#08192B 74%)}
.scene.s4{background-color:#0A2137;background-image:
  repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 2px,transparent 2px 46px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 2px,transparent 2px 29px),
  linear-gradient(0deg,rgba(176,141,79,.26) 0 22%,transparent 34%),
  radial-gradient(120% 108% at 62% 78%,#164karat 0%,#08192B 74%),
  radial-gradient(120% 108% at 62% 78%,#164A72 0%,#08192B 74%)}
.scene.s5{background-color:#0A2137;background-image:
  repeating-linear-gradient(90deg,rgba(255,255,255,.17) 0 1px,transparent 1px 38px),
  repeating-radial-gradient(circle at 78% 50%,transparent 0 40px,
    rgba(255,255,255,.17) 40px 41px,transparent 41px 82px),
  radial-gradient(50% 50% at 78% 50%,rgba(176,141,79,.24) 0%,transparent 72%),
  radial-gradient(120% 104% at 78% 50%,#16456B 0%,#08192B 72%)}

.hero-in{position:relative;z-index:2;flex:1;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,72px);align-items:center;
  padding-top:clamp(58px,7vw,88px);padding-bottom:clamp(44px,5vw,66px)}

/* headline reveal, masked line by line */
.hero h1{color:#fff;font-size:clamp(2.2rem,4.1vw,3.4rem);max-width:14ch;line-height:1.08}
.hero h1 em{display:block;font-style:normal;font-weight:400;color:#9DB7D2;
  font-size:.63em;margin-top:.12em}
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);
  animation:lift .95s cubic-bezier(.22,.68,.28,1) forwards}
.hero h1 em.ln>span{animation-delay:.13s}
@keyframes lift{to{transform:none}}
.hero .eyebrow{color:var(--gold-soft)}
.hero .lede{color:#B9C9D8;margin-top:20px;max-width:42ch}

.servs{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin-top:24px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.servs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 22px}
.servs li{font-size:.735rem;letter-spacing:.07em;text-transform:uppercase;
  color:#C6D4E2;display:flex;align-items:center;gap:9px;line-height:1.3}
.servs li:before{content:"";width:5px;height:5px;background:var(--gold);flex:none;
  transform:rotate(45deg)}
.hero .acts{margin-top:30px}

/* scene captions and progress rail */
.hero-side{align-self:end;padding-bottom:6px}
.caps{position:relative;min-height:132px}
.cap{position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.cap.on{opacity:1;transform:none}
.cap .cn{font-family:var(--serif);font-size:.82rem;color:var(--gold);
  letter-spacing:.1em;display:block;margin-bottom:9px}
.cap h2{font-size:1.32rem;color:#fff;margin-bottom:7px}
.cap p{font-size:.9rem;color:#A9BDD0;line-height:1.55;max-width:34ch}
.rail{display:flex;gap:7px;margin-top:20px}
.tick{flex:1;height:2px;background:rgba(255,255,255,.2);border:0;padding:0;
  cursor:pointer;position:relative;overflow:hidden}
.tick:before{content:"";position:absolute;inset:-9px 0}
.tick .fill{position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left}
.tick.on .fill{animation:sweep 6s linear forwards}
.tick.done .fill{transform:scaleX(1)}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* fact strip pinned to the bottom of the hero */
.herofacts{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(7,22,40,.5)}
.herofacts .wrap{display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  padding-top:18px;padding-bottom:18px}
.herofacts dl{display:flex;gap:clamp(20px,4vw,56px);flex:1;margin:0}
.herofacts dt{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:3px}
.herofacts dd{font-size:.84rem;color:#B9C9D8;margin:0;line-height:1.45;max-width:30ch}
.scrollcue{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:#7E93A8;flex:none}
.scrollcue i{color:var(--gold);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(3px)}}

@media(max-width:1000px){
  .hero-in{grid-template-columns:1fr;align-items:start;gap:38px}
  .hero-side{align-self:start}
  .caps{min-height:118px}
  .herofacts dl{flex-wrap:wrap;gap:16px 30px}
  .scrollcue{display:none}
}
@media(max-width:600px){
  .hero{min-height:0}
  .hero .lede{max-width:none}
  .servs li{border-right:0;margin-right:12px;padding-right:0}
  .herofacts dd{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .scene{transition:none;transform:none}
  .ln>span{animation:none;transform:none}
  .tick.on .fill{animation:none;transform:scaleX(1)}
  .scrollcue i{animation:none}
}

/* ══ hero, revised: single line statement, no fact table ══ */
.hero-in{grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr);
  padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(56px,7vw,92px)}
.hero h1{max-width:none;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.06}
.hero .lede{font-size:clamp(1rem,1.35vw,1.16rem);max-width:44ch;margin-top:22px;
  color:#BCCBDA}
.hero .acts{margin-top:34px}
.herofacts,.servs{display:none}
.hero-side{align-self:end;padding-bottom:4px}

/* marquee strip, in place of the removed table */
.marquee{background:#0A2137;border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.marquee:before,.marquee:after{content:"";position:absolute;top:0;bottom:0;width:90px;
  z-index:2;pointer-events:none}
.marquee:before{left:0;background:linear-gradient(90deg,#0A2137,transparent)}
.marquee:after{right:0;background:linear-gradient(270deg,#0A2137,transparent)}
.track{display:flex;width:max-content;animation:slide 44s linear infinite}
.track span{display:inline-flex;align-items:center;gap:10px;padding:15px 0;
  margin-right:52px;font-size:.755rem;letter-spacing:.15em;text-transform:uppercase;
  color:#AFC2D4;white-space:nowrap}
.track span i{color:var(--gold);font-size:1.05rem}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee:hover .track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.track{animation:none}}

/* ══ page header, revised: no panel, statement on one line ══ */
.phead .inner{display:block}
.phead h1{max-width:none;font-size:clamp(1.9rem,3.5vw,3rem)}
.phead .lede{max-width:58ch;margin-top:18px}
.phead-panel{display:none}

/* ══ section headings, revised ══ */
.shead{display:block;border-top:1px solid var(--line-2);padding-top:20px;
  margin-bottom:clamp(26px,3vw,38px);max-width:none}
.band--dark .shead,.band--deep .shead{border-top-color:#2A4767}
.shead h2{grid-column:auto;font-size:clamp(1.65rem,2.7vw,2.35rem);max-width:22ch}
.shead .lede{grid-column:auto;margin-top:14px;max-width:60ch}
.tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--body);border:1px solid var(--line-2);border-radius:2px;padding:6px 12px 6px 10px}
.tag i{font-size:1rem;color:var(--gold)}
.band--dark .tag,.band--deep .tag{color:#B6C7D6;border-color:#2A4767}
.split .tag,.statement .tag{margin-bottom:16px}
.split .eyebrow,.statement .eyebrow{display:none}

/* footer brand column */
.foot .fbrand+.contactline{margin-top:2px}
.phead .tag{color:#C6D4E2;border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05)}
.phead .tag i{color:var(--gold-soft)}

/* ═══════ scale up: headings, icons, numerals ═══════ */

/* headings */
h1{font-size:clamp(2.35rem,3.9vw,3.4rem)}
h2{font-size:clamp(1.7rem,2.6vw,2.25rem)}
h3{font-size:1.28rem}
h4{font-size:1.08rem}
.hero h1{font-size:clamp(2.3rem,4.5vw,4rem)}
.phead h1{font-size:clamp(2.15rem,4vw,3.45rem)}
.shead h2{font-size:clamp(1.9rem,3.1vw,2.7rem);max-width:20ch}
.lblock h2{font-size:1.38rem}
.cap h2{font-size:1.5rem}
.statement blockquote{font-size:clamp(1.55rem,2.75vw,2.2rem)}
.quote blockquote{font-size:clamp(1.38rem,2.3vw,1.85rem)}
.faq summary{font-size:1.2rem;padding-right:44px}
.pane legend{font-size:1.3rem}
.rfqprev h3{font-size:1.12rem}
.region h4{font-size:1.12rem}
.foot .fbrand b{font-size:1.1rem}
.brand b{font-size:1.08rem}

/* icons */
.entry .ttl i{font-size:1.55rem;margin-top:1px}
.tile i{font-size:1.75rem}
.badge i{font-size:1.8rem}
.ticks li i{font-size:1.15rem;top:.24em}
.ticks li{padding-left:28px}
.tag i{font-size:1.2rem}
.util i{font-size:1rem}
.foot .contactline i{font-size:1.15rem;margin-top:2px}
.track span i{font-size:1.3rem}
.chip i{font-size:1.25rem}
.sub-intro i{font-size:1.8rem}
a.entry .go i,.tile .meta i{font-size:1.05rem}
.has-sub>a i{font-size:.92rem}
.wa{width:52px;height:52px;font-size:1.6rem}

/* numerals */
.entry{grid-template-columns:56px minmax(0,1fr) minmax(0,1.35fr)}
.entry .num{font-size:1.22rem;padding-top:1px}
.fig .n{font-size:clamp(1.85rem,2.6vw,2.15rem)}
.cap .cn{font-size:1rem;margin-bottom:11px}
.stepdots li span{font-size:.95rem}
.stepdots li{font-size:.86rem}
.quote{grid-template-columns:80px minmax(0,1fr)}
.quote .mark{font-size:4.6rem}
.post .date{font-size:.78rem}
@media(max-width:860px){
  .entry{grid-template-columns:42px minmax(0,1fr)}
  .quote{grid-template-columns:1fr}
}

/* hero: statement spans the full measure, supporting content below */
.hero-in{display:block;padding-top:clamp(60px,7.5vw,100px);
  padding-bottom:clamp(48px,6vw,80px)}
.hero h1{font-size:clamp(2.3rem,5vw,4.5rem);max-width:none;white-space:nowrap}
.hero-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,72px);align-items:end;margin-top:clamp(26px,3.4vw,44px)}
.hero .lede{margin-top:0;max-width:40ch;font-size:clamp(1.02rem,1.4vw,1.2rem)}
.hero .acts{margin-top:30px}
.hero-side{align-self:end;padding-bottom:2px}
@media(max-width:1080px){.hero h1{white-space:normal}}
@media(max-width:1000px){.hero-row{grid-template-columns:1fr;align-items:start;gap:36px}}
.hero-in{display:flex;flex-direction:column;justify-content:center}
.hero{min-height:min(80vh,780px)}
/* the enlarged masthead needs the drawer sooner */
@media(max-width:1000px){
  .burger{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;padding:82px 20px 26px;
    transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto;
    border-left:1px solid var(--line-dark);z-index:140}
  .nav.open{transform:none}
  .nav>a,.has-sub>a{height:auto;padding:13px 2px;font-size:.98rem;
    border-bottom:1px solid var(--line-dark)}
  .has-sub{position:static}
  .has-sub>a i{margin-left:auto}
  .sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;
    border:0;box-shadow:none;padding:0 0 8px;min-width:0;display:block}
  .sub-intro{display:none}
  .sub a{color:#9DB0C4;padding:10px 0 10px 16px;border-left:1px solid var(--line-dark)}
  .sub a:hover{background:transparent;color:#fff}
  .hdr .cta-btn{margin:18px 0 0;justify-content:center;padding:12px 16px!important}
}

/* ═══════ page headers: moving plate instead of a flat field ═══════ */
.phead{position:relative;overflow:hidden;background-image:none;
  padding:clamp(52px,6vw,84px) 0 clamp(52px,6vw,80px)}
.phead .stage{position:absolute;inset:0;z-index:0;display:block}
.phead .scene{opacity:1;animation:driftplate 26s ease-in-out infinite alternate}
.phead .veil{background:linear-gradient(96deg,#071628 0%,rgba(7,22,40,.92) 40%,
  rgba(7,22,40,.62) 68%,rgba(7,22,40,.42) 100%)}
.phead .inner{position:relative;z-index:2}
.phead h1{position:relative}
.phead h1:after{content:"";display:block;width:0;height:2px;background:var(--gold);
  margin-top:22px;animation:drawrule 1.1s .35s cubic-bezier(.22,.68,.28,1) forwards}
@keyframes driftplate{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes drawrule{to{width:92px}}
@media (prefers-reduced-motion:reduce){
  .phead .scene{animation:none}
  .phead h1:after{animation:none;width:92px}
}

/* ═══════ contact: the quotation sits in a real panel ═══════ */
.rfqx{background:#fff;border:1px solid var(--line);border-top:2px solid var(--navy);
  padding:clamp(26px,3.4vw,44px)}
.rfqgrid{align-items:stretch}
.rfqprev{align-self:stretch;background:var(--navy);border-color:var(--navy);
  display:flex;flex-direction:column;position:static}
.rfqprev h3,.rfqprev .prevhead{color:#fff}
.rfqprev .prevhead{border-bottom-color:#23405E}
.rfqprev pre{color:#C6D4E2;flex:1}
.rfqprev pre.empty{color:#7E93A8}
.rfqprev .hint{color:#7E93A8}
.copybtn{color:var(--gold-soft);border-bottom-color:#23405E}
.copybtn:hover{color:#fff;border-bottom-color:var(--gold)}
.navrow{border-top-color:var(--line)}
.tiles{border-bottom:1px solid var(--line)}
.tile{padding-left:22px;padding-right:22px}
.tile:first-child{padding-left:0}
@media(max-width:900px){.rfqprev{margin-top:22px}}

/* ═══════ more motion across the page flow ═══════ */
.shead{position:relative}
.shead:after{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;
  background:var(--gold);transition:width 1s .1s cubic-bezier(.22,.68,.28,1)}
.shead.in:after{width:78px}
.index .entry{transition:opacity .55s var(--ease),transform .55s var(--ease),
  background .22s}
.faq details{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.faq details.in{opacity:1;transform:none}
.spec tr{opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.spec tr.in{opacity:1;transform:none}
.fig{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.region,.badge,.tile{transition:opacity .5s var(--ease),transform .5s var(--ease),
  border-color .22s,background .22s}
@media (prefers-reduced-motion:reduce){
  .shead:after{transition:none;width:78px}
  .faq details,.spec tr{opacity:1;transform:none;transition:none}
}

/* ═══════ scale up again: headings and icons ═══════ */
h2{font-size:clamp(1.85rem,2.9vw,2.5rem)}
h3{font-size:1.4rem}
.shead h2{font-size:clamp(2.05rem,3.4vw,3rem);max-width:19ch}
.phead h1{font-size:clamp(2.3rem,4.3vw,3.75rem)}
.lblock h2{font-size:1.52rem}
.cap h2{font-size:1.62rem}
.faq summary{font-size:1.3rem}
.pane legend{font-size:1.42rem}
.region h4{font-size:1.2rem}
.badge b{font-size:1.1rem}
.tag{font-size:.755rem;padding:7px 14px 7px 11px}
.tag i{font-size:1.35rem}
.entry .ttl i{font-size:1.85rem}
.tile i{font-size:2.05rem}
.badge i{font-size:2.1rem}
.sub-intro i{font-size:2rem}
.ticks li i{font-size:1.3rem}
.ticks li{padding-left:32px}
.track span i{font-size:1.45rem}
.chip i{font-size:1.4rem}
.foot .contactline i{font-size:1.25rem}
.util i{font-size:1.08rem}
.entry{grid-template-columns:62px minmax(0,1fr) minmax(0,1.3fr)}
.entry .num{font-size:1.35rem}
.fig .n{font-size:clamp(2rem,2.9vw,2.45rem)}
.quote .mark{font-size:5.2rem}
.quote{grid-template-columns:88px minmax(0,1fr)}
@media(max-width:860px){
  .entry{grid-template-columns:46px minmax(0,1fr)}
  .quote{grid-template-columns:1fr}
}

/* masthead: six items plus the action need tighter spacing and an earlier drawer */
.nav>a,.has-sub>a{font-size:.83rem;padding:0 11px;white-space:nowrap}
.hdr .cta-btn{margin-left:14px;padding:9px 15px!important;white-space:nowrap}
.hdr .cta-btn i{font-size:1.05rem}
@media(max-width:1180px){
  .burger{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(330px,86vw);background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;padding:84px 22px 28px;
    transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto;
    border-left:1px solid var(--line-dark);z-index:140;white-space:normal}
  .nav.open{transform:none}
  .nav>a,.has-sub>a{height:auto;padding:13px 2px;font-size:1rem;white-space:normal;
    border-bottom:1px solid var(--line-dark)}
  .has-sub{position:static}
  .has-sub>a i{margin-left:auto}
  .sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;
    border:0;box-shadow:none;padding:0 0 8px;min-width:0;display:block}
  .sub-intro{display:none}
  .sub a{color:#9DB0C4;padding:10px 0 10px 16px;border-left:1px solid var(--line-dark)}
  .hdr .cta-btn{margin:18px 0 0;justify-content:center;padding:12px 16px!important}
}

/* ════════════ READABILITY PASS ════════════
   Lexend for headings, designed to reduce visual stress.
   Atkinson Hyperlegible for body, drawn by the Braille Institute so that
   characters commonly confused stay distinct. Looser leading, longer word
   spacing, softened contrast, capped measure, nothing justified. */
:root{
  --serif:"Lexend",system-ui,sans-serif;
  --sans:"Atkinson","Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  --paper:#FBFAF7; --wash:#F1F0EB; --line:#DEDBD3; --line-2:#C7C3B9;
  --ink:#1B2733; --body:#46525F; --muted:#74808C;
}
body{font-family:var(--sans);font-size:17.5px;line-height:1.78;
  letter-spacing:.008em;word-spacing:.03em;text-align:left;
  -webkit-font-smoothing:antialiased}
p{margin-bottom:1.15em;max-width:72ch}
h1,h2,h3,h4{font-family:var(--serif);letter-spacing:-.005em;line-height:1.22;
  font-weight:600;text-wrap:balance}
h1{line-height:1.14}
.lede{line-height:1.7;letter-spacing:.006em}
.entry p,.card p,.tile p,.badge span,.region p,.fig .c,.hint,.post p,.lblock p,
.faq .ans,.spec td,.ticks li{letter-spacing:.008em}
.faq .ans,.lblock p,.post p,.split .prose p{line-height:1.8}
.eyebrow,.tag,.util,.stepdots,.field label,.minifacts dt,.hero .side dt,
.foot h4,.legalnav,.crumb{letter-spacing:.11em}
.spec td:first-child,.field label,.foot h4{letter-spacing:.09em}
a:not(.btn):not(.brand):not(.entry):not(.tile):focus-visible{outline-offset:3px}

/* section labels: no box */
.tag{display:inline-flex;align-items:center;gap:10px;border:0;background:none;
  padding:0;margin-bottom:16px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;color:var(--gold)}
.tag i{font-size:1.4rem;color:var(--gold)}
.band--dark .tag,.band--deep .tag,.phead .tag{color:var(--gold-soft);
  background:none;border:0;padding:0}
.band--dark .tag i,.band--deep .tag i,.phead .tag i{color:var(--gold-soft)}

/* headings sit a little larger again now the face is a sans */
h2{font-size:clamp(1.75rem,2.7vw,2.3rem)}
h3{font-size:1.3rem;line-height:1.35}
.shead h2{font-size:clamp(1.95rem,3.2vw,2.75rem);max-width:20ch}
.hero h1{font-size:clamp(2rem,4.1vw,3.5rem);letter-spacing:-.015em}
.phead h1{font-size:clamp(2rem,3.9vw,3.35rem);letter-spacing:-.012em}
.faq summary{font-size:1.18rem;line-height:1.45}
.statement blockquote,.quote blockquote{font-weight:500;line-height:1.38}
.cap h2{font-size:1.45rem}
.pane legend{font-size:1.3rem}
.lblock h2{font-size:1.4rem}
.brand b,.foot .fbrand b{letter-spacing:-.01em}

/* ══ photographs in the hero, graded to one treatment ══ */
.scene.s1{background-image:url("hero/scene-1.jpg")}
.scene.s2{background-image:url("hero/scene-2.jpg")}
.scene.s3{background-image:url("hero/scene-3.jpg")}
.scene.s4{background-image:url("hero/scene-4.jpg")}
.scene.s5{background-image:url("hero/scene-5.jpg")}
.scene{background-color:#0B2039}
.phead .scene{background-image:url("hero/page.jpg")}
.veil{background:linear-gradient(98deg,rgba(7,22,40,.96) 0%,rgba(7,22,40,.9) 34%,
  rgba(7,22,40,.66) 58%,rgba(7,22,40,.5) 80%,rgba(7,22,40,.66) 100%)}
.phead .veil{background:linear-gradient(96deg,rgba(7,22,40,.96) 0%,rgba(7,22,40,.9) 42%,
  rgba(7,22,40,.74) 72%,rgba(7,22,40,.66) 100%)}

/* strap line under a page statement */
.strap{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);max-width:640px}
.strap span{font-family:var(--serif);font-size:clamp(.95rem,1.25vw,1.12rem);
  font-weight:500;color:#fff;letter-spacing:.01em;display:inline-flex;align-items:center}
.strap span+span:before{content:"";width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);margin:0 16px}

/* narrow screens: keep the utility bar inside the viewport */
body{overflow-x:clip}
@media(max-width:700px){
  .util .wrap{gap:0 14px;height:34px}
  .util,.util a{font-size:.7rem}
  .util .lang{padding-left:12px}
}
@media(max-width:560px){
  .util .u-mail{display:none}
  .util .wrap{gap:0 12px}
}
@media(max-width:400px){
  .util a[href^="tel"] span{display:none}
  .util .wrap{gap:0 10px}
}

/* ══ grouped mega menu for Trade and Solutions ══ */
.sub.wide{min-width:720px;grid-template-columns:236px 1fr}
.sub.wide .sub-links{display:grid;grid-template-columns:1fr 1fr;padding:0}
.sub.wide .subcol{padding:16px 20px 18px;border-right:1px solid var(--line)}
.sub.wide .subcol:last-child{border-right:0}
.subcol h4{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px 2px}
.subcol a{display:block;padding:8px 10px 8px 12px;font-size:.87rem;line-height:1.4;
  border-left:2px solid transparent;border-radius:2px;
  transition:background .15s,border-color .15s}
.subcol a:hover{background:var(--wash);border-left-color:var(--gold)}
.subcol a.on{border-left-color:var(--navy);font-weight:700}
@media(max-width:1180px){
  .sub.wide{min-width:0;grid-template-columns:1fr;display:block}
  .sub.wide .sub-links{display:block}
  .sub.wide .subcol{padding:0;border-right:0;margin-bottom:6px}
  .subcol h4{color:var(--gold-soft);margin:12px 0 6px 16px}
  .subcol a{color:#9DB0C4;border-left:1px solid var(--line-dark);border-radius:0;
    padding:9px 0 9px 16px}
  .subcol a:hover{background:transparent;color:#fff}
}
/* the wide menu anchors to the masthead so it cannot leave the viewport */
.hdr .inner{position:relative}
.wide-parent{position:static}
.sub.wide{left:auto;right:0;max-width:calc(100vw - 2*var(--gut))}
@media(max-width:1180px){.wide-parent{position:static}.sub.wide{max-width:none}}

/* ══ founder's message ══ */
.founder{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:clamp(28px,4.5vw,64px);align-items:start;border-top:1px solid #2A4767;padding-top:26px}
.fq{position:relative}
.fmark{font-family:var(--serif);font-size:4.4rem;line-height:.7;color:var(--gold);
  display:block;margin-bottom:6px}
.founder blockquote{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.42;color:#fff;font-weight:500}
.fsig{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;
  border-top:1px solid #2A4767}
.fseal img{width:52px;height:52px}
.fsig b{display:block;font-family:var(--serif);font-size:1.08rem;color:#fff;font-weight:600}
.fsig span{font-size:.85rem;color:var(--gold-soft)}
.founder .shead.nb{border-top:0;padding-top:0;margin-bottom:18px}
.fbody p{color:#B6C7D6}
@media(max-width:860px){.founder{grid-template-columns:1fr}}

/* ══ photo band ══ */
.figband{margin:0;position:relative}
.figband img{width:100%;height:clamp(210px,26vw,340px);object-fit:cover;display:block}
.figband figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  margin-top:14px;font-size:.88rem;color:var(--body);border-top:1px solid var(--line);
  padding-top:12px}
.figband figcaption span{font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);flex:none}
.band--dark .figband figcaption,.band--deep .figband figcaption{color:#A9BCCC;
  border-top-color:#2A4767}
/* hero children must fill the measure, not shrink and centre */
.hero-in{align-items:stretch}
.hero h1,.hero .lede,.hero-row,.hero-copy{margin-left:0;margin-right:0}
/* the landing statement is longer, so it sizes to the measure and may wrap */
.hero h1{font-size:clamp(1.9rem,3.35vw,3.45rem);white-space:normal;max-width:none}
.hero .strap{margin-top:24px;padding-top:18px}
.hero-row{margin-top:clamp(22px,2.6vw,34px)}
/* the hero wrap must match the width of every other section, not shrink to content */
.hero-in{width:100%;align-self:stretch}

/* ══════════════════════════════════════════════════════════════════════════
   v2.0 — hero category deck, logo sizing, and the mobile pass
   Appended last so it wins over the earlier layers.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Logo. The seal carries ring text, so 34px rendered it as noise. ──── */
.brand img,.brand .logomark{width:48px;height:48px}
.hdr .inner{height:76px}
.nav>a,.has-sub>a{height:76px}
.foot .fbrand img,.foot .fbrand .logomark{width:52px;height:52px}
.fseal img{width:60px;height:60px}

/* ── 2. Contact strip: WhatsApp is now its own item, not the phone icon ──── */
.util .u-wa i{color:#5BC17E}
.foot .contactline .ti-brand-whatsapp{color:#5BC17E}

/* ── 3. Hero category deck ──────────────────────────────────────────────── */
.catdeck{display:flex;flex-direction:column;gap:2px;
  border-top:1px solid rgba(255,255,255,.16)}
.cat{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;
  align-items:start;position:relative;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);
  padding:14px 2px 15px;color:inherit;cursor:pointer;font:inherit;
  transition:background .22s var(--ease)}
.cat:hover{background:rgba(255,255,255,.045)}
.catmark{display:block;width:44px;height:44px;color:var(--gold-soft);opacity:.55;
  transition:opacity .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
.catmark svg{width:100%;height:100%;display:block}
.cat.on .catmark{opacity:1;color:var(--gold);transform:translateY(-1px)}
.catbody{min-width:0}
.cat .cn{font-family:var(--serif);font-size:.7rem;letter-spacing:.14em;
  color:var(--gold-soft);opacity:.7;display:block;margin-bottom:3px;
  font-variant-numeric:tabular-nums}
.cat b{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:#fff;
  display:block;line-height:1.28;letter-spacing:-.005em}
.cat .cd{display:block;font-size:.86rem;line-height:1.55;color:#9DB2C6;
  margin-top:5px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .38s var(--ease),opacity .3s var(--ease),margin .38s var(--ease)}
.cat.on .cd{max-height:7em;opacity:1}
.cbar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
.cfill{display:block;height:100%;width:0;background:var(--gold)}
.cat.on .cfill{animation:catfill 6s linear forwards}
@keyframes catfill{from{width:0}to{width:100%}}
.cat:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── 4. THE BUG: .entry paragraphs collapsed into the 32px numeral column.
   .entry p was targeted directly, but the <p> sits inside a wrapper div, so
   the grid-column rule never applied and text wrapped one word per line on
   every phone. Target the wrapper. ─────────────────────────────────────── */
@media(max-width:860px){
  .entry{grid-template-columns:34px minmax(0,1fr);gap:0 14px}
  .entry .num{grid-column:1;grid-row:1}
  .entry .ttl{grid-column:2;grid-row:1}
  .entry>div:last-child{grid-column:2;grid-row:2;margin-top:8px;min-width:0}
  .entry p{grid-column:auto;margin-top:0}
}

/* ── 5. Utility bar: the phone number is the point of it on a phone ─────── */
@media(max-width:560px){
  .util .wrap{gap:0 16px;height:36px}
  .util a span{display:inline}
  .util .u-wa span{display:none}
  .util .u-mail{display:none}
}
@media(max-width:400px){
  .util a[href^="tel"] span{display:inline}
  .util{font-size:.7rem}
  .util .wrap{gap:0 12px}
}

/* ── 6. Masthead and drawer ─────────────────────────────────────────────── */
@media(max-width:1180px){
  .burger{display:block;padding:10px;margin-left:auto;min-width:44px;min-height:44px}
  .nav{padding:88px 20px 40px}
  .nav>a,.has-sub>a{min-height:52px;padding:14px 2px;align-items:center}
  /* sub-menus start collapsed so the drawer can be scanned in one screen */
  .has-sub>.sub{max-height:0;overflow:hidden;padding:0;
    transition:max-height .3s var(--ease)}
  .has-sub.expanded>.sub{max-height:760px;padding:0 0 10px}
  .has-sub.expanded>a i{transform:rotate(180deg)}
  .has-sub>a i{transition:transform .25s var(--ease)}
  .sub a,.subcol a{min-height:46px;display:flex;align-items:center}
  .hdr .cta-btn{margin:22px 0 0;justify-content:center;min-height:50px}
}

/* ── 7. Hero on small screens ───────────────────────────────────────────── */
@media(max-width:1000px){
  .hero{padding-top:clamp(34px,7vw,56px)}
  .hero-row{gap:30px}
}
@media(max-width:700px){
  .hero h1{font-size:clamp(1.95rem,8.4vw,2.6rem)}
  .strap{margin-top:16px;padding-top:14px;gap:6px 0}
  .strap span{font-size:.9rem}
  /* a wrapped line must not open with a floating separator */
  .strap span+span:before{margin:0 11px}
  .hero .acts{gap:10px}
  .hero .acts .btn{flex:1 1 auto;justify-content:center;min-height:50px}
  .cat{grid-template-columns:38px minmax(0,1fr);gap:0 13px;padding:13px 2px 14px}
  .catmark{width:38px;height:38px}
  .cat b{font-size:1rem}
  .cat .cd{font-size:.85rem}
}

/* ── 8. Touch targets and tap comfort ───────────────────────────────────── */
@media(max-width:860px){
  .faq summary{padding:16px 46px 16px 0;min-height:52px;font-size:1.06rem;
    line-height:1.4}
  .faq summary i{right:2px}
  .faq .ans{padding:0 4px 20px 0}
  .btn{min-height:50px;padding:13px 20px}
  .chip{min-height:50px}
  .tile{min-height:0}
  .legalnav a,.foot ul a{display:inline-block;padding:7px 0}
  .lang a{padding:6px 9px}
}

/* ── 9. Grids that were still two-up on narrow phones ───────────────────── */
@media(max-width:520px){
  .regions{grid-template-columns:1fr}
  .region{border-right:0;padding:16px 0}
  .figs{grid-template-columns:1fr}
  .fig{border-right:0;padding-right:0}
  .badges{grid-template-columns:1fr}
}

/* ── 10. Specification tables read as label/value pairs, not squashed cells ─ */
@media(max-width:700px){
  .spec{display:block}
  .spec tbody,.spec tr{display:block}
  .spec tr{border-bottom:1px solid var(--line);padding:14px 0}
  .spec tr:last-child{border-bottom:0}
  .spec td{display:block;border:0;padding:0}
  .spec td:first-child{font-size:.72rem;font-weight:700;letter-spacing:.11em;
    text-transform:uppercase;color:var(--muted);margin-bottom:5px}
}

/* ── 11. Forms: 16px minimum stops iOS zooming the page on focus ────────── */
@media(max-width:860px){
  .field input,.field select,.field textarea{font-size:16px;min-height:50px}
  .field textarea{min-height:120px}
  .row2{grid-template-columns:1fr;gap:0}
  .stepdots{flex-wrap:wrap;gap:8px 14px}
  .sendrow{flex-direction:column;align-items:stretch}
  .sendrow .btn{width:100%;justify-content:center}
  .navrow{gap:10px}
  .navrow .btn{flex:1 1 0;justify-content:center}
  .rfqprev{position:static;margin-top:24px}
}

/* ── 12. Media and the floating WhatsApp button ─────────────────────────── */
@media(max-width:700px){
  .figband img{height:clamp(190px,52vw,260px)}
  .figband figcaption{padding:14px 0 0;gap:4px 10px}
  .marquee .track span{font-size:.72rem}
  .quote .mark{font-size:3rem}
  .fmark{font-size:3.2rem}
}
.wa{width:56px;height:56px;bottom:20px;right:16px}
@media(max-width:860px){
  /* clear the last CTA so the button never sits on top of a link */
  .foot{padding-bottom:96px}
}

/* ── 13. Product gallery on the towel and linen page ────────────────────── */
.gallery{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,26px);align-items:start}
.gallery figure{margin:0}
.gallery img{width:100%;height:clamp(220px,26vw,330px);object-fit:cover;display:block}
.gallery figcaption{font-size:.82rem;line-height:1.5;color:#93A8BC;margin-top:10px}
.band--dark .gallery figcaption{color:#93A8BC}
@media(max-width:760px){
  .gallery{grid-template-columns:1fr}
  .gallery img{height:clamp(200px,58vw,280px)}
}

/* ── 14. Featured block used for a single highlighted product line ─────── */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,48px);align-items:center}
.featimg img{width:100%;height:clamp(230px,24vw,320px);object-fit:cover;display:block}
@media(max-width:860px){.feature{grid-template-columns:1fr}}

/* ── 15. Breadcrumb ────────────────────────────────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.74rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold-soft);
  margin-bottom:18px}
.crumb a{color:var(--gold-soft);opacity:.8}
.crumb a:hover{opacity:1;color:#fff}
.crumb i{font-size:.8rem;opacity:.5}
.crumb span{color:#fff;opacity:.75}

/* ── 16. Respect reduced motion in the new deck ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cat,.catmark,.cat .cd{transition:none}
  .cat.on .cfill{animation:none;width:100%}
  .cat .cd{max-height:none;opacity:1}
}

/* ── 17. Hero strap: four items cannot sit on one phone line, and a wrapped
   line must never open with a floating separator. Two columns, no diamonds. ─ */
@media(max-width:640px){
  .strap{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:none}
  .strap span+span:before,.strap span:before{display:none;content:none}
  .strap span{font-size:.92rem;line-height:1.3;padding-left:14px;position:relative}
  .strap span:after{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
    background:var(--gold);transform:rotate(45deg)}
}
@media(max-width:360px){
  .strap{grid-template-columns:1fr}
}

/* ── 18. The category deck is taller than the single rotating caption it
   replaced. With the row bottom-aligned that pushed the hero copy and its
   buttons below the fold on a 900px laptop. Top-align and tighten. ─────── */
@media(min-width:1000px){
  .hero-row{align-items:start}
  .hero-copy{padding-top:4px}
  .cat{padding:12px 2px 13px}
  .cat .cd{font-size:.84rem}
}
@media(min-width:1000px) and (max-height:940px){
  .hero{padding-top:clamp(30px,3.4vw,48px)}
  .catdeck{gap:0}
  .cat{padding:10px 2px 11px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — deck as navigation, and the product card
   ══════════════════════════════════════════════════════════════════════════ */

/* Each category now links to where it goes, so it needs link affordances. */
a.cat{text-decoration:none;color:inherit}
a.cat:hover b{color:var(--gold-soft)}
.cat .cgo{display:inline-block;width:0;overflow:hidden;vertical-align:middle}
a.cat.on .cd:after{content:" \2192";color:var(--gold);white-space:nowrap}

/* Featured product card, sitting above the category index on the trade page */
.prodcard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  margin-bottom:clamp(34px,4.5vw,60px);
  padding-bottom:clamp(30px,4vw,52px);border-bottom:1px solid var(--line)}
.prodcard-img{display:block;overflow:hidden}
.prodcard-img img{width:100%;height:clamp(220px,23vw,310px);object-fit:cover;
  display:block;transition:transform .6s var(--ease)}
.prodcard-img:hover img{transform:scale(1.035)}
.prodcard-body h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:10px 0 12px;
  letter-spacing:-.01em}
.prodcard-body p{max-width:52ch}
.prodcard-body .btn{margin-top:6px}
@media(max-width:860px){
  .prodcard{grid-template-columns:1fr;gap:20px}
  .prodcard-img img{height:clamp(200px,50vw,270px)}
  .prodcard-body .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.2 — product page: scale drawing, colour swatches
   Drawn rather than photographed. One usable photograph exists, and padding
   the page with crops of it would put the warehouse back on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.scalebox{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 0 2px}
.towelscale{display:block;width:100%;min-width:520px;height:auto}
.towelscale rect{fill:rgba(176,141,79,.10);stroke:var(--gold);stroke-width:1.4}
.towelscale .hem{stroke:var(--gold);stroke-width:1;opacity:.5}
.towelscale text{font-family:var(--sans);text-anchor:middle}
.towelscale .tl-n{font-size:13px;font-weight:700;fill:var(--ink);
  font-family:var(--serif)}
.towelscale .tl-d{font-size:12px;fill:var(--body)}
.towelscale .tl-g{font-size:11px;fill:var(--muted);letter-spacing:.04em}
.band--dark .towelscale .tl-n{fill:#fff}
.band--dark .towelscale .tl-d{fill:#B7C4D2}

.swatches{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.swatches li{font-size:.78rem;letter-spacing:.05em;color:var(--body);
  text-transform:uppercase}
.swatches .sw{display:block;width:100%;aspect-ratio:1/1;margin-bottom:9px;
  border:1px solid var(--line-2);border-radius:2px}
@media(max-width:860px){.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:420px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── v2.2b — product collage: one lead frame with two supporting tiles ───── */
.collage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:clamp(12px,1.5vw,20px);
  --cg-gap:clamp(12px,1.5vw,20px);--cg-lead:clamp(270px,31vw,430px)}
.collage figure{margin:0;position:relative;overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.collage figure:hover img{transform:scale(1.03)}
.cg-lead{grid-column:1;grid-row:1/3}
.cg-lead img{height:var(--cg-lead)}
.cg-a img,.cg-b img{height:calc((var(--cg-lead) - var(--cg-gap))/2)}
.collage figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 13px;font-size:.79rem;line-height:1.45;color:#F2F1EC;
  background:linear-gradient(to top,rgba(7,22,40,.88),rgba(7,22,40,0))}
.cg-a figcaption,.cg-b figcaption{font-size:.74rem;padding:22px 13px 11px}
@media(max-width:760px){
  .collage{grid-template-columns:1fr 1fr}
  .cg-lead{grid-column:1/3;grid-row:1}
  .cg-lead img{height:clamp(220px,52vw,300px)}
  .cg-a img,.cg-b img{height:clamp(130px,30vw,180px)}
  .collage figcaption{font-size:.72rem;padding:20px 11px 10px}
}

/* ── v2.2 collage: one wide lead frame with three details beside and below ── */
.collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.3vw,16px)}
.collage figure{margin:0;position:relative;overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.collage figure:hover img{transform:scale(1.04)}
.cg-lead{grid-column:1/3;grid-row:1}
.cg-a{grid-column:3;grid-row:1}
.cg-b{grid-column:1;grid-row:2}
.cg-c{grid-column:2/4;grid-row:2}
.cg-lead img{height:clamp(240px,30vw,410px)}
.cg-a img,.cg-b img,.cg-c img{height:clamp(150px,17vw,235px)}
.collage figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 12px;font-size:.76rem;line-height:1.4;color:#fff;
  background:linear-gradient(to top,rgba(7,22,40,.86),rgba(7,22,40,0));
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.collage figure:hover figcaption,.collage figure:focus-within figcaption{
  opacity:1;transform:none}
/* Captions must never depend on hover alone: touch devices cannot hover, and a
   narrow desktop window still reports hover:hover. Show them outright below
   the desktop breakpoint, and on any device without a hover pointer. */
@media(hover:none),(max-width:1000px){
  .collage figcaption{opacity:1;transform:none;font-size:.72rem;padding:22px 12px 10px}
}
@media(max-width:860px){
  .collage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-lead{grid-column:1/3;grid-row:1}
  .cg-a{grid-column:1;grid-row:2}.cg-b{grid-column:2;grid-row:2}
  .cg-c{grid-column:1/3;grid-row:3}
  .cg-lead img{height:clamp(200px,44vw,280px)}
  .cg-a img,.cg-b img{height:clamp(130px,30vw,180px)}
  .cg-c img{height:clamp(150px,34vw,200px)}
}

/* ── v2.4 — product lead without a photograph ──────────────────────────────
   The phone-photo crops were removed, so this is a text feature rather than
   an image card. Set apart by rule and inset, not by picture. */
.prodlead{border-left:3px solid var(--gold);padding:4px 0 4px clamp(18px,2.4vw,30px);
  margin-bottom:clamp(32px,4.4vw,58px);
  padding-bottom:clamp(28px,3.6vw,46px);border-bottom:1px solid var(--line)}
.prodlead h3{font-size:clamp(1.5rem,2.5vw,2.05rem);margin:10px 0 12px;
  letter-spacing:-.01em}
.prodlead p{max-width:62ch}
.prodlead .btn{margin-top:8px}
@media(max-width:860px){.prodlead .btn{width:100%;justify-content:center}}