:root{
  /* hull — midnight teal-navy, the superyacht-builder register */
  --ink:      #00141F;
  --ink-2:    #002334;
  --ink-3:    #0A3348;
  --deep:     #002334;
  --abyss:    #000D15;

  /* metal — warm copper and champagne, used sparingly */
  --bronze:    #C48356;
  --bronze-lt: #DCA87F;
  --bronze-dk: #9A6540;
  --bronze-ink:#8A5632;   /* copper for TEXT on paper — AA at small sizes */
  --champagne: #D9C29B;

  /* paper */
  --bone:     #F4F1EA;
  --bone-2:   #E9E5DB;
  --sand:     #D6CFC0;
  --steel:    #586870;
  --slate:    #3A4A52;
  --white:    #fff;

  /* muted semantics — no traffic-light saturation */
  --sage:     #2F5C43;
  --sage-bg:  #E7EDE7;
  --sage-lt:  #9DBFA8;
  --clay:     #7A5530;
  --clay-bg:  #F3EADC;
  --rust:     #C08A8A;

  --line:     rgba(0,20,31,.13);
  --line-lt:  rgba(255,255,255,.16);

  /* marker spectrum — the real product colours, unchanged */
  --m1:#E01B24; --m2:#FFD100; --m3:#4FC3E8; --m4:#FFFFFF; --m5:#5BD07A;
  --m6:#FF6FB5; --m7:#FF7A1A; --m8:#0B34A8; --m9:#F0E6C8; --m10:#146B45;
  --m11:#C7118E; --m12:#8A4B1E; --m13:#6B2FA8; --m14:#5C3A21; --m15:#6E7B2E;

  --shadow-s: 0 1px 2px rgba(0,20,31,.05), 0 2px 8px rgba(0,20,31,.05);
  --shadow-m: 0 2px 4px rgba(0,20,31,.04), 0 12px 30px rgba(0,20,31,.09);
  --shadow-l: 0 4px 8px rgba(0,20,31,.05), 0 28px 60px rgba(0,20,31,.14);

  --r-s: 3px; --r-m: 8px; --r-l: 14px; --r-xl: 20px;
  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  overflow-x:clip;
  background:var(--bone);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.display{
  font-family:Archivo,"Arial Narrow",Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600;
  line-height:1.08;
  letter-spacing:-.004em;
  margin:0;
  text-wrap:balance;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap-n{ max-width:960px; }

section{ position:relative; }

/* ---- shared type helpers -------------------------------------------- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronze-ink); margin:0 0 20px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--bronze); flex:none;
}
.eyebrow.on-dark{ color:var(--champagne); }
.eyebrow.on-dark::before{ background:var(--champagne); }

.h-xl{ font-size:clamp(2.6rem,6.4vw,4.6rem); }
.h-l { font-size:clamp(2rem,4.4vw,3.2rem); }
.h-m { font-size:clamp(1.5rem,2.6vw,2.1rem); }
.h-s { font-size:clamp(1.15rem,1.8vw,1.35rem); font-variation-settings:"wdth" 104,"wght" 600; }

.lede{ font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.6; color:var(--slate); max-width:62ch; }
.on-dark .lede,.dark .lede{ color:rgba(255,255,255,.76); }

.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; letter-spacing:.06em; }

/* ---- buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:13.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:18px 30px; border-radius:var(--r-s); border:1px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

.btn-primary{ background:var(--bronze); color:var(--ink); box-shadow:0 10px 26px rgba(196,131,86,.24); }
.btn-primary:hover{ background:var(--bronze-lt); box-shadow:0 14px 34px rgba(196,131,86,.32); }

.btn-navy{ background:var(--deep); color:#fff; box-shadow:0 10px 26px rgba(0,35,52,.22); }
.btn-navy:hover{ background:#0A3348; }

.btn-ghost{ border-color:rgba(0,20,31,.30); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(0,20,31,.04); }

.btn-ghost-light{ border-color:rgba(255,255,255,.42); color:#fff; background:transparent; }
.btn-ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.btn-sm{ padding:12px 20px; font-size:11.5px; }
.btn-block{ width:100%; }

.link-arrow{
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  text-decoration:none; color:var(--bronze-ink); display:inline-flex; align-items:center; gap:8px;
  border-bottom:2px solid transparent; transition:border-color .18s, gap .18s;
}
.link-arrow:hover{ border-color:currentColor; gap:12px; }

/* ---- colour ribbon (the 15 marker colours) --------------------------- */
.ribbon{ display:flex; height:4px; width:100%; }
.ribbon span{ flex:1; }
.ribbon span:nth-child(1){background:var(--m1)} .ribbon span:nth-child(2){background:var(--m2)}
.ribbon span:nth-child(3){background:var(--m3)} .ribbon span:nth-child(4){background:var(--m4)}
.ribbon span:nth-child(5){background:var(--m5)} .ribbon span:nth-child(6){background:var(--m6)}
.ribbon span:nth-child(7){background:var(--m7)} .ribbon span:nth-child(8){background:var(--m8)}
.ribbon span:nth-child(9){background:var(--m9)} .ribbon span:nth-child(10){background:var(--m10)}
.ribbon span:nth-child(11){background:var(--m11)} .ribbon span:nth-child(12){background:var(--m12)}
.ribbon span:nth-child(13){background:var(--m13)} .ribbon span:nth-child(14){background:var(--m14)}
.ribbon span:nth-child(15){background:var(--m15)}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{
  background:var(--ink); color:rgba(255,255,255,.82);
  font-size:13px; letter-spacing:.01em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:40px; }
.topbar ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.topbar li{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.topbar svg{ width:15px; height:15px; flex:none; color:var(--champagne); }
.topbar a{ color:#fff; text-decoration:none; font-weight:600; display:flex; align-items:center; gap:7px; }
.topbar a:hover{ color:var(--champagne); }
@media (max-width:1080px){ .topbar li:nth-child(n+3){ display:none; } }
@media (max-width:640px){ .topbar li:nth-child(n+2){ display:none; } .topbar{ font-size:12px; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(244,241,234,.90);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s;
}
.site-head.scrolled{ box-shadow:0 6px 24px rgba(0,20,31,.10); }
.site-head .wrap{ display:flex; align-items:center; gap:18px; min-height:78px; }

.brand{ display:flex; align-items:center; flex:none; text-decoration:none; }
.brand img{ height:42px; width:auto; }

/* the menu sits in the middle of the bar, not tucked behind a burger */
.nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; }

.head-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.head-phone{
  display:flex; flex-direction:column; line-height:1.15; text-decoration:none; color:var(--ink);
}
.head-phone .lbl{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }
.head-phone .num{ font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:16px; }
.head-phone:hover .num{ color:var(--bronze-ink); }

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r-s); cursor:pointer; padding:0; align-items:center; justify-content:center;
  margin-left:auto;
}
.burger span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

/* Progressive collapse — give up the trimmings before the menu itself.
   Phone block goes first, then the CTA button, and only under 800px do we
   fall back to the burger. The menu stays reachable on every laptop width. */
@media (max-width:940px){
  .head-phone{ display:none; }
  .nav-top{ padding:10px 10px; font-size:14px; }
  .site-head .wrap{ gap:12px; }
}
@media (max-width:820px){
  .head-cta .btn{ display:none; }
}
@media (max-width:720px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .site-head .wrap{ min-height:66px; gap:18px; }
  .brand img{ height:34px; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:80; background:var(--ink);
  transform:translateX(100%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column; padding:24px; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.drawer-close{ background:none; border:1px solid var(--line-lt); color:#fff; width:44px; height:44px; border-radius:var(--r-s); font-size:22px; cursor:pointer; line-height:1; }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  color:#fff; text-decoration:none; padding:16px 0; border-bottom:1px solid var(--line-lt);
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:22px;
}
.drawer .btn{ margin-top:24px; }
.drawer-foot{ margin-top:auto; padding-top:28px; color:rgba(255,255,255,.6); font-size:14px; }
.drawer-foot a{ color:#fff; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 80% 4%, rgba(196,131,86,.13) 0%, transparent 52%),
    radial-gradient(90% 80% at 6% 92%, rgba(0,45,66,.65) 0%, transparent 62%),
    linear-gradient(168deg,#002B3F 0%,#00141F 64%);
}
/* depth-sounding contour lines */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.30; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 84px);
  mask-image:radial-gradient(75% 70% at 50% 40%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%,#000 0%,transparent 100%);
}

.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:64px; align-items:center;
  padding:76px 0 88px;
}
.hero h1{ font-size:clamp(2.5rem,5.6vw,4.35rem); margin:0 0 22px; }
.hero h1 em{
  font-style:normal; color:var(--champagne); position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.03em; height:.11em;
  background:var(--bronze); border-radius:2px; opacity:.9;
}
.hero p.lede{ color:rgba(255,255,255,.78); margin:0 0 32px; max-width:52ch; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; }

.hero-proof{
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line-lt); padding-top:24px;
}
.hero-proof div{ padding-right:26px; margin-right:26px; border-right:1px solid var(--line-lt); }
.hero-proof div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hero-proof strong{
  display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:22px; line-height:1.1; color:#fff;
}
.hero-proof span{ font-size:12.5px; color:rgba(255,255,255,.6); letter-spacing:.02em; }

/* hero product visual */
.hero-vis{ position:relative; }
.hero-vis .shot{
  border-radius:var(--r-l); overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12); transform:rotate(-1.4deg);
}
.hero-vis .shot img{ width:100%; }

.spec-chip{
  position:absolute; background:rgba(255,255,255,.97); color:var(--ink);
  border-radius:10px; padding:11px 15px; box-shadow:var(--shadow-l);
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.spec-chip .k{
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:17px; line-height:1;
}
.spec-chip .v{ font-size:11.5px; color:var(--steel); font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.spec-chip.a{ top:-18px; left:-22px; }
.spec-chip.b{ bottom:34px; left:-30px; }
.spec-chip.c{ bottom:-16px; right:16px; }
.spec-chip .dot{ width:10px; height:10px; border-radius:50%; background:var(--m5); flex:none; }

.hero-award{
  position:absolute; top:-16px; right:-12px; width:124px; height:124px; border-radius:50%;
  background:rgba(0,20,31,.82); backdrop-filter:blur(6px);
  border:1px solid var(--champagne); color:var(--champagne);
  display:grid; place-content:center; text-align:center; padding:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.hero-award b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 100,"wght" 600; font-size:13px; line-height:1.12; }
.hero-award i{ font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-top:6px; color:rgba(217,194,155,.65); }

@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; padding:56px 0 68px; }
  .hero-vis{ max-width:520px; margin-inline:auto; width:100%; }
  .hero-award{ width:96px; height:96px; right:0; }
  .spec-chip.a{ left:-8px; } .spec-chip.b{ left:-12px; } .spec-chip.c{ right:0; }
}
@media (max-width:560px){
  .hero-proof div{ padding-right:16px; margin-right:16px; }
  .hero-proof strong{ font-size:18px; }
  .spec-chip.b{ display:none; }
  .hero-btns .btn{ width:100%; }
}

/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */
.sec{ padding:88px 0; }
.sec-tight{ padding:64px 0; }
.dark{ background:var(--ink); color:#fff; }
.dark h1,.dark h2,.dark h3{ color:#fff; }
.paper{ background:var(--bone-2); }

.sec-head{ max-width:800px; margin-bottom:52px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head h2{ margin-bottom:18px; }

@media (max-width:640px){ .sec{ padding:64px 0; } .sec-head{ margin-bottom:38px; } }

/* ==========================================================================
   CHAIN SIZE FINDER
   ========================================================================== */
.finder{ background:var(--bone-2); border-block:1px solid var(--line); }
.finder-card{
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-l);
  overflow:hidden; border:1px solid var(--line);
}
.finder-grid{ display:grid; grid-template-columns:1fr 1fr; }

.finder-left{ padding:44px; border-right:1px solid var(--line); }
.finder-step{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); margin-bottom:10px;
}
.finder-left h3{ font-size:clamp(1.5rem,2.4vw,1.95rem); margin-bottom:8px; }
.finder-left > p{ color:var(--slate); font-size:15.5px; margin:0 0 26px; }

.size-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.size-btn{
  appearance:none; border:2px solid var(--line); background:var(--bone); color:var(--ink);
  border-radius:10px; padding:14px 4px 12px; cursor:pointer; text-align:center;
  font-family:Archivo,Arial,sans-serif; transition:all .16s var(--ease);
}
.size-btn b{ display:block; font-variation-settings:"wdth" 100,"wght" 600; font-size:19px; line-height:1; }
.size-btn i{ display:block; font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--steel); margin-top:5px; letter-spacing:.03em; }
.size-btn:hover{ border-color:var(--deep); background:#fff; transform:translateY(-2px); }
.size-btn.is-on{ border-color:var(--bronze); background:var(--bronze); color:var(--ink); box-shadow:0 8px 20px rgba(196,131,86,.28); }
.size-btn.is-on i{ color:rgba(0,20,31,.65); }
.size-btn.wide{ grid-column:span 2; }
.size-btn.wide b{ font-size:15px; padding-top:3px; }

.finder-help{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; gap:16px; align-items:flex-start;
}
.finder-help svg{ flex:none; width:64px; height:auto; }
.finder-help p{ margin:0; font-size:14px; color:var(--slate); line-height:1.55; }
.finder-help a{ color:var(--bronze-ink); font-weight:700; }

/* result pane */
.finder-right{ padding:44px; background:var(--bone); display:flex; flex-direction:column; }
.result-empty{ margin:auto; text-align:center; color:var(--steel); max-width:280px; }
.result-empty svg{ width:54px; height:54px; margin:0 auto 16px; opacity:.35; }
.result-empty p{ font-size:15px; margin:0; }

.result[hidden]{ display:none; }
.result-tag{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px; margin-bottom:16px; font-weight:600;
}
.tag-stock{ background:var(--sage-bg); color:var(--sage); }
.tag-custom{ background:var(--clay-bg); color:var(--clay); }
.tag-enquiry{ background:#E4EAEE; color:var(--deep); }

.result h4{ font-size:clamp(1.45rem,2.4vw,1.9rem); margin-bottom:6px; }
.result .sub{ color:var(--slate); font-size:15px; margin:0 0 20px; }
.result-price{
  display:flex; align-items:baseline; gap:9px; margin-bottom:20px;
  padding-bottom:20px; border-bottom:1px dashed var(--line);
}
.result-price .amt{ font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:38px; line-height:1; }
.result-price .from{ font-family:"IBM Plex Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--steel); }
.result ul{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
.result li{ position:relative; padding-left:28px; font-size:15px; line-height:1.5; }
.result li::before{
  content:""; position:absolute; left:0; top:6px; width:17px; height:17px; border-radius:50%;
  background:var(--sage-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300141F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.result .btn{ margin-top:auto; }
.result-note{ font-size:12.5px; color:var(--steel); margin:12px 0 0; text-align:center; }

@media (max-width:900px){
  .finder-grid{ grid-template-columns:1fr; }
  .finder-left{ border-right:0; border-bottom:1px solid var(--line); padding:32px 26px; }
  .finder-right{ padding:32px 26px; }
  .size-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:420px){ .size-grid{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.compare-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-24px; padding-inline:24px; }
table.compare{ width:100%; min-width:720px; border-collapse:separate; border-spacing:0; }
table.compare th,table.compare td{ padding:17px 18px; text-align:left; vertical-align:middle; }
table.compare thead th{
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:15px;
  color:rgba(255,255,255,.62); border-bottom:1px solid var(--line-lt); white-space:nowrap;
}
table.compare thead th.us{
  color:var(--ink); background:var(--champagne); border-radius:12px 12px 0 0; position:relative;
}
table.compare tbody td{ border-bottom:1px solid rgba(255,255,255,.09); font-size:15px; color:rgba(255,255,255,.8); }
table.compare tbody th{
  border-bottom:1px solid rgba(255,255,255,.09); font-size:14.5px; color:#fff;
  font-family:"Public Sans",sans-serif; font-weight:600; white-space:nowrap;
}
table.compare td.us{ background:rgba(217,194,155,.11); color:#fff; font-weight:600; border-bottom-color:rgba(217,194,155,.22); }
table.compare tbody tr:last-child td.us{ border-radius:0 0 12px 12px; }
.tick{ color:var(--sage-lt); font-weight:600; }
.cross{ color:var(--rust); }

/* ==========================================================================
   PRODUCT RANGE CARDS
   ========================================================================== */
.range-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-s);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  text-decoration:none; color:inherit;
}
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:transparent; }
.pcard-img{ aspect-ratio:4/3; overflow:hidden; background:var(--bone-2); position:relative; }
.pcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.pcard:hover .pcard-img img{ transform:scale(1.045); }
.pcard-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:5px 9px; border-radius:100px; font-weight:600;
}
.pcard-badge.hot{ background:var(--bronze); color:var(--ink); }
.pcard-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.pcard h3{ font-size:1.22rem; margin-bottom:6px; }
.pcard .rng{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.06em; color:var(--steel); text-transform:uppercase; margin-bottom:12px; }
.pcard p{ font-size:14.6px; color:var(--slate); margin:0 0 18px; line-height:1.55; }
.pcard-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line); }
.pcard-price b{ font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:21px; }
.pcard-price span{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }
.pcard-go{
  width:38px; height:38px; border-radius:50%; background:var(--bone-2); display:grid; place-content:center;
  transition:background .18s, color .18s, transform .18s; flex:none;
}
.pcard:hover .pcard-go{ background:var(--bronze); color:#fff; transform:translateX(3px); }
.pcard-go svg{ width:17px; height:17px; }

@media (max-width:1080px){ .range-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .range-grid{ grid-template-columns:1fr; } }

/* colour swatch row inside cards */
.swatches{ display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap; }
.swatches i{ width:15px; height:15px; border-radius:3px; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:44px; }
.step{ position:relative; padding-top:30px; }
.step::before{
  content:attr(data-n); position:absolute; top:-14px; left:-6px;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:78px; line-height:1; color:rgba(0,20,31,.07); z-index:0;
}
.dark .step::before{ color:rgba(255,255,255,.10); }
.step h3{ font-size:1.22rem; margin-bottom:9px; position:relative; }
.step p{ font-size:15px; color:var(--slate); margin:0; position:relative; }
.dark .step p{ color:rgba(255,255,255,.72); }

.how-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.how-media{ border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-m); border:1px solid var(--line); }
.dark .how-media{ border-color:var(--line-lt); }

@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:18px; } .how-split{ grid-template-columns:1fr; gap:32px; } }

/* ==========================================================================
   FOUR SAVES
   ========================================================================== */
.saves{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line-lt); border-radius:var(--r-l); overflow:hidden; }
.save{ padding:34px 28px; border-right:1px solid var(--line-lt); }
.save:last-child{ border-right:0; }
.save-icon{ width:44px; height:44px; margin-bottom:20px; color:var(--champagne); }
.save-icon svg{ width:100%; height:100%; }
.save h3{ font-size:1.18rem; margin-bottom:9px; }
.save p{ font-size:14.6px; color:rgba(255,255,255,.72); margin:0 0 16px; line-height:1.55; }
.save .stat{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--champagne); border-top:1px solid var(--line-lt); padding-top:14px; display:block;
}
@media (max-width:980px){ .saves{ grid-template-columns:1fr 1fr; } .save:nth-child(2n){ border-right:0; } .save:nth-child(-n+2){ border-bottom:1px solid var(--line-lt); } }
@media (max-width:560px){ .saves{ grid-template-columns:1fr; } .save{ border-right:0; border-bottom:1px solid var(--line-lt); } .save:last-child{ border-bottom:0; } }

/* ==========================================================================
   GUIDE PLATE COMPONENT
   ========================================================================== */
.plate-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }

.plate-stage{ display:flex; justify-content:center; }
.gplate{
  width:100%; max-width:280px; background:linear-gradient(180deg,#fff,#F0EFEC);
  border-radius:18px; padding:14px 13px 18px;
  box-shadow:0 2px 0 #C9C6BE, var(--shadow-l);
  border:1px solid #DAD7CF;
}
.gplate-head{ display:flex; justify-content:center; padding:4px 0 12px; border-bottom:1px solid #E4E1D9; margin-bottom:12px; }
.gplate-head img{ height:22px; width:auto; }
.gplate-rows{ display:grid; gap:6px; }
.grow{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.gnum,.gcol{
  height:34px; border-radius:5px; display:grid; place-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 2px rgba(0,0,0,.13);
}
.gnum{
  background:#FBFAF8; color:#002334;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 92,"wght" 800; font-size:19px;
  border:1px solid #E4E1D9;
}
.gcol{ background:var(--c,#ddd); border:1px solid rgba(0,0,0,.12); }
.gcol.empty{ background:#F1EFEA; }
.gplate-foot{ text-align:center; margin-top:12px; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em; color:#6E6B63; text-transform:uppercase; }

.unit-toggle{ display:inline-flex; background:var(--bone-2); border-radius:100px; padding:4px; margin-bottom:22px; border:1px solid var(--line); }
.unit-toggle button{
  border:0; background:none; padding:8px 20px; border-radius:100px; cursor:pointer;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:14px; color:var(--slate);
  transition:all .18s;
}
.unit-toggle button.is-on{ background:var(--ink); color:#fff; }

.plate-feats{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:14px; }
.plate-feats li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; }
.plate-feats svg{ width:20px; height:20px; flex:none; color:var(--bronze-ink); margin-top:2px; }
.dark .plate-feats svg{ color:var(--champagne); }

@media (max-width:900px){ .plate-split{ grid-template-columns:1fr; gap:38px; } }

/* ==========================================================================
   SUPERYACHT BAND
   ========================================================================== */
.sy{ background:linear-gradient(160deg,#002334 0%,#00141F 70%); color:#fff; position:relative; overflow:hidden; }
.sy::after{
  content:""; position:absolute; right:-8%; top:-20%; width:60%; padding-bottom:60%;
  border-radius:50%; background:radial-gradient(circle,rgba(196,131,86,.12),transparent 66%); pointer-events:none;
}
.sy-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1; }
.sy-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-lt); border-radius:var(--r-m); overflow:hidden; margin:30px 0 32px; }
.sy-stats div{ background:rgba(0,20,31,.55); padding:22px 18px; }
.sy-stats b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:clamp(1.8rem,3.6vw,2.5rem); line-height:1; color:var(--champagne); }
.sy-stats span{ font-size:12.5px; color:rgba(255,255,255,.66); display:block; margin-top:8px; line-height:1.35; }

.quote{
  background:rgba(255,255,255,.06); border:1px solid var(--line-lt); border-radius:var(--r-m);
  padding:26px 26px 22px; margin-bottom:16px; position:relative;
}
.quote p{ margin:0 0 16px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.9); }
.quote footer{ display:flex; align-items:center; gap:11px; font-size:13.5px; color:rgba(255,255,255,.6); }
.quote footer b{ color:#fff; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; }
.quote::before{
  content:"\201C"; position:absolute; top:6px; right:18px; font-family:Georgia,serif; font-size:72px;
  color:rgba(255,255,255,.11); line-height:1;
}
@media (max-width:900px){ .sy-grid{ grid-template-columns:1fr; gap:38px; } }

/* ==========================================================================
   BOAT MARQUEE
   ========================================================================== */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track{ display:flex; gap:18px; width:max-content; animation:slide 48s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } .marquee{ overflow-x:auto; } }
.boat{ width:276px; flex:none; }
.boat img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-m); border:1px solid var(--line-lt); }
.boat b{ display:block; margin-top:11px; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:15px; }
.boat span{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:rgba(255,255,255,.5); letter-spacing:.05em; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rev-head{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:44px; }
.rev-score{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:22px 30px;
  text-align:center; box-shadow:var(--shadow-s); flex:none;
}
.rev-score b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:46px; line-height:1; }
.rev-score .stars{ margin:8px 0 6px; }
.rev-score span{ font-size:12.5px; color:var(--steel); font-family:"IBM Plex Mono",monospace; letter-spacing:.05em; }
.stars{ display:inline-flex; gap:2px; color:var(--champagne); }
.stars svg{ width:16px; height:16px; }

.rev-grid{ columns:3; column-gap:22px; }
.rev{
  break-inside:avoid; background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  padding:22px 22px 20px; margin-bottom:22px; box-shadow:var(--shadow-s);
}
.rev .stars{ margin-bottom:12px; }
.rev p{ margin:0 0 16px; font-size:15px; line-height:1.58; }
.rev footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--steel); border-top:1px solid var(--line); padding-top:13px; }
.rev footer b{ color:var(--ink); font-weight:600; }
.verified{ display:inline-flex; align-items:center; gap:5px; color:var(--sage); font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.verified svg{ width:13px; height:13px; }
@media (max-width:980px){ .rev-grid{ columns:2; } }
@media (max-width:620px){ .rev-grid{ columns:1; } }

/* ==========================================================================
   CREDIBILITY STRIP
   ========================================================================== */
.cred-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.cred-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:18px; }
.cred-list li{ display:flex; gap:15px; align-items:flex-start; }
.cred-list .ico{
  width:42px; height:42px; border-radius:10px; background:var(--bone-2); display:grid; place-content:center; flex:none; color:var(--deep);
}
.dark .cred-list .ico{ background:rgba(255,255,255,.09); color:var(--champagne); }
.cred-list .ico svg{ width:21px; height:21px; }
.cred-list b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:16px; margin-bottom:2px; }
.cred-list p{ margin:0; font-size:14.5px; color:var(--slate); line-height:1.5; }
.dark .cred-list p{ color:rgba(255,255,255,.7); }
.cred-img{ border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l); }
@media (max-width:860px){ .cred-grid{ grid-template-columns:1fr; gap:34px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:840px; margin-inline:auto; }
.faq details{
  border-bottom:1px solid var(--line); background:transparent;
}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(1.02rem,1.6vw,1.15rem); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48356' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .24s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq summary:hover{ color:var(--bronze-ink); }
.faq .ans{ padding:0 44px 24px 0; color:var(--slate); font-size:15.5px; line-height:1.62; }
.faq .ans p{ margin:0 0 12px; } .faq .ans p:last-child{ margin:0; }
.faq .ans a{ color:var(--bronze-ink); font-weight:600; }

/* ==========================================================================
   CONTACT / FINAL CTA
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-lines{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:20px; }
.contact-lines li{ display:flex; gap:15px; align-items:flex-start; }
.contact-lines .ico{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.09); display:grid; place-content:center; flex:none; color:var(--champagne); }
.contact-lines .ico svg{ width:19px; height:19px; }
.contact-lines .lbl{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); display:block; }
.contact-lines a,.contact-lines .val{ color:#fff; text-decoration:none; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:17px; line-height:1.35; display:block; }
.contact-lines a:hover{ color:var(--champagne); }
.contact-lines small{ display:block; color:rgba(255,255,255,.55); font-size:13px; font-family:"Public Sans",sans-serif; font-weight:400; margin-top:3px; }

.form-card{ background:#fff; border-radius:var(--r-l); padding:34px; box-shadow:var(--shadow-l); color:var(--ink); }
.form-card h3{ font-size:1.4rem; margin-bottom:6px; }
.form-card > p{ font-size:14.5px; color:var(--slate); margin:0 0 24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:15.5px; background:var(--bone); color:var(--ink);
  transition:border-color .16s, box-shadow .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--deep); box-shadow:0 0 0 3px rgba(0,35,52,.12); background:#fff;
}
.field textarea{ min-height:110px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:12.5px; color:var(--steel); margin:14px 0 0; text-align:center; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:38px; } .field-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{ background:#000D15; color:rgba(255,255,255,.62); font-size:14.5px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; padding:64px 0 48px; }
.foot-brand img{ height:40px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.95; }
.foot-brand p{ margin:0 0 20px; line-height:1.6; max-width:34ch; }
.foot-col h4{ font-size:13px; font-variation-settings:"wdth" 104,"wght" 600; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-family:"IBM Plex Mono",monospace; font-weight:600; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot-col a{ color:rgba(255,255,255,.62); text-decoration:none; }
.foot-col a:hover{ color:#fff; }
.foot-legal{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0 30px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.42); }
.foot-legal .mono{ font-size:11.5px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; padding:48px 0 34px; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   STICKY MOBILE BAR
   ========================================================================== */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,20,31,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:7px 10px calc(7px + env(safe-area-inset-bottom)); gap:8px;
  border-top:1px solid var(--line-lt);
}
/* One line, always. The label wrapped at the old size and doubled the bar height. */
.mobile-bar .btn{
  flex:1; min-width:0; max-width:420px; padding:12px 10px; font-size:11.5px; letter-spacing:.09em;
  white-space:nowrap; box-shadow:none;
}
.mobile-bar .btn-primary:hover{ box-shadow:none; }
/* the call button is an icon, it doesn't need half the bar */
.mobile-bar .btn-ghost-light{ flex:none; width:48px; padding:12px 0; gap:0; }
.mobile-bar .btn-ghost-light svg{ width:17px; height:17px; }

@media (max-width:720px){
  .mobile-bar{ display:flex; }
  /* app.js measures the bar and overwrites this — the literal is the no-JS fallback */
  body{ padding-bottom:var(--mobile-bar-h, 60px); }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ==========================================================================
   MISC
   ========================================================================== */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:#fff; padding:12px 18px; border-radius:6px; }

.disclaimer{
  background:var(--ink-3); color:rgba(255,255,255,.85); font-size:12.5px; text-align:center;
  padding:10px 24px; line-height:1.5;
}
.disclaimer b{ color:var(--champagne); }

.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); border-radius:100px; padding:7px 13px; color:var(--slate);
}
.dark .badge{ border-color:var(--line-lt); color:rgba(255,255,255,.72); }
.badge svg{ width:14px; height:14px; color:var(--bronze-ink); }
.dark .badge svg{ color:var(--champagne); }

/* ==========================================================================
   SUPERYACHT PAGE
   ========================================================================== */
.sy-hero::before{
  background:
    radial-gradient(110% 80% at 84% 8%, rgba(196,131,86,.15) 0%, transparent 55%),
    radial-gradient(80% 70% at 2% 90%, rgba(0,45,66,.60) 0%, transparent 62%),
    linear-gradient(165deg,#002B3F 0%,#00141F 68%);
}

/* the cost of painting */
.cost-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; }
.cost{ background:#fff; padding:32px 26px; }
.cost-n{
  display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(2rem,3.6vw,2.7rem); line-height:1; color:var(--bronze); margin-bottom:14px;
}
.cost-n i{
  display:block; font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-top:8px;
  font-variation-settings:normal;
}
.cost p{ margin:0; font-size:14.6px; color:var(--slate); line-height:1.55; }
@media (max-width:980px){ .cost-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .cost-grid{ grid-template-columns:1fr; } }

/* crew testimonials */
.crew-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.crew{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:32px; box-shadow:var(--shadow-s);
}
.crew .stars{ margin-bottom:16px; }
.crew p{ margin:0 0 22px; font-size:16.5px; line-height:1.62; }
.crew footer{ display:flex; flex-direction:column; border-top:1px solid var(--line); padding-top:16px; }
.crew footer b{ font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:16px; }
.crew footer span{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.06em; color:var(--steel); text-transform:uppercase; margin-top:3px; }
@media (max-width:820px){ .crew-grid{ grid-template-columns:1fr; } }

/* what's included */
.inc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.inc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--shadow-s); display:flex; flex-direction:column;
}
.inc-img{ aspect-ratio:16/10; overflow:hidden; background:var(--bone-2); }
.inc-img img{ width:100%; height:100%; object-fit:cover; }
.inc-body{ padding:26px 26px 30px; flex:1; }
.inc-n{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  color:#fff; background:var(--deep); padding:4px 9px; border-radius:4px; margin-bottom:14px;
}
.inc h3{ font-size:1.2rem; margin-bottom:10px; }
.inc p{ margin:0 0 14px; font-size:15px; color:var(--slate); line-height:1.58; }
@media (max-width:960px){ .inc-grid{ grid-template-columns:1fr; } .inc{ flex-direction:row; } .inc-img{ width:38%; flex:none; aspect-ratio:auto; } }
@media (max-width:620px){ .inc{ flex-direction:column; } .inc-img{ width:100%; aspect-ratio:16/10; } }

/* process */
ol.process{
  list-style:none; margin:0 0 40px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
ol.process li{ position:relative; padding-top:8px; }
ol.process li::after{
  content:""; position:absolute; top:26px; left:56px; right:-24px; height:2px;
  background:repeating-linear-gradient(90deg,var(--sand) 0 7px,transparent 7px 14px);
}
ol.process li:last-child::after{ display:none; }
.p-n{
  display:grid; place-content:center; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; font-family:Archivo,Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600; font-size:20px; margin-bottom:18px; position:relative; z-index:1;
}
ol.process h3{ font-size:1.12rem; margin-bottom:9px; }
ol.process p{ margin:0; font-size:14.8px; color:var(--slate); line-height:1.58; }
@media (max-width:960px){
  ol.process{ grid-template-columns:1fr 1fr; }
  ol.process li:nth-child(2)::after{ display:none; }
}
@media (max-width:560px){
  ol.process{ grid-template-columns:1fr; gap:20px; }
  ol.process li::after{ display:none; }
  .p-n{ margin-bottom:12px; }
}

.seq-note{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--bronze);
  border-radius:var(--r-m); padding:26px 28px; max-width:840px;
}

/* ==========================================================================
   PRODUCT PAGE / CONFIGURATOR
   ========================================================================== */
.pdp-wrap{ padding:26px 0 76px; }

.crumbs{
  display:flex; gap:9px; align-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel);
  margin-bottom:28px; flex-wrap:wrap;
}
.crumbs a{ color:var(--steel); text-decoration:none; }
.crumbs a:hover{ color:var(--bronze-ink); }
.crumbs [aria-current]{ color:var(--ink); }

.pdp{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:start; }

/* ---- gallery ---- */
.gallery{ position:sticky; top:110px; }
.gal-main{
  position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--bone-2);
  border:1px solid var(--line); box-shadow:var(--shadow-m); aspect-ratio:1;
}
.gal-main img{ width:100%; height:100%; object-fit:cover; }
.gal-flag{
  position:absolute; top:14px; left:14px; z-index:2; background:var(--ink); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px; font-weight:600;
}
.gal-thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-top:12px; }
.thumb{
  padding:0; border:2px solid var(--line); background:var(--bone-2); border-radius:9px;
  overflow:hidden; cursor:pointer; aspect-ratio:1; transition:border-color .16s, transform .16s;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb:hover{ transform:translateY(-2px); }
.thumb.is-on{ border-color:var(--bronze); }

.gal-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-top:18px;
}
.gal-strip div{ background:#fff; padding:14px 10px; text-align:center; }
.gal-strip b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:17px; line-height:1.1; }
.gal-strip span{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }

/* ---- configurator ---- */
.cfg-rating{ display:flex; align-items:center; gap:10px; margin:14px 0 16px; font-size:14px; color:var(--slate); }

.cfg-step{ padding:22px 0; border-top:1px solid var(--line); }
.cfg-lbl{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:16px;
}
.cfg-lbl .n{
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; flex:none;
  display:grid; place-content:center; font-size:12px; font-variation-settings:"wdth" 100,"wght" 600;
}
.cfg-lbl em{ font-style:normal; color:var(--bronze-ink); margin-left:auto; font-size:14.5px; }
.cfg-hint{ font-size:13.5px; color:var(--steel); margin:12px 0 0; }
.cfg-hint a{ color:var(--bronze-ink); font-weight:600; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  appearance:none; border:2px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
  border-radius:8px; padding:11px 15px; font-family:Archivo,Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600; font-size:15px; transition:all .16s var(--ease);
}
.chip i{ font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--steel); margin-left:4px; }
.chip:hover{ border-color:var(--deep); transform:translateY(-2px); }
.chip.is-on{ border-color:var(--bronze); background:var(--bronze); color:var(--ink); }
.chip.is-on i{ color:rgba(0,20,31,.6); }
.chip-row.tight .chip{ min-width:46px; padding:11px 8px; text-align:center; }

.preset-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.preset-lbl{ font-size:13px; color:var(--steel); }
.preset{
  appearance:none; border:1.5px dashed var(--line); background:transparent; cursor:pointer;
  border-radius:100px; padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--slate);
  transition:all .16s;
}
.preset i{ font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--steel); margin-left:5px; }
.preset:hover:not(:disabled){ border-color:var(--deep); color:var(--ink); }
.preset.is-on{ border-style:solid; border-color:var(--deep); background:var(--deep); color:#fff; }
.preset.is-on i{ color:rgba(255,255,255,.7); }
.preset:disabled{ opacity:.35; cursor:not-allowed; }

.swatches.lg{ margin:16px 0 0; gap:6px; }
.swatches.lg i{ width:26px; height:26px; border-radius:5px; }

/* chain length slider */
.len-row{ display:flex; align-items:center; gap:16px; }
.len-row input[type=range]{
  flex:1; appearance:none; -webkit-appearance:none; height:6px; border-radius:100px;
  background:var(--sand); outline:none; margin:0;
}
.len-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--bronze); border:3px solid #fff; box-shadow:0 2px 8px rgba(196,131,86,.4); cursor:pointer;
}
.len-row input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--bronze);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(196,131,86,.4); cursor:pointer;
}
.len-out{
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:17px; min-width:126px; text-align:right; flex:none;
}

.cfg-callout{
  margin-top:14px; background:var(--bone-2); border-left:3px solid var(--steel);
  border-radius:0 8px 8px 0; padding:13px 16px; font-size:14px; line-height:1.6; color:var(--slate);
}
.cfg-callout b{ color:var(--ink); }
.cfg-callout.ok{ background:var(--sage-bg); border-left-color:var(--sage); }
.cfg-callout.ok b{ color:var(--sage); }
.cfg-callout.warn{ background:var(--clay-bg); border-left-color:var(--bronze-dk); }
.cfg-callout.warn b{ color:var(--clay); }
.cfg-callout .mini{
  appearance:none; border:0; background:var(--ink); color:#fff; cursor:pointer;
  border-radius:100px; padding:5px 12px; font-size:12.5px; font-weight:600;
  font-family:inherit; margin-left:4px; white-space:nowrap;
}
.cfg-callout .mini:hover{ background:var(--bronze); }

.opt-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{
  appearance:none; position:relative; text-align:left; cursor:pointer;
  border:2px solid var(--line); background:#fff; border-radius:10px; padding:14px 16px;
  transition:all .16s var(--ease);
}
.opt b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:15.5px; }
.opt span{ display:block; font-size:12.5px; color:var(--steel); margin-top:3px; }
.opt span strong{ color:var(--bronze-ink); }
.opt:hover{ border-color:var(--deep); }
.opt.is-on{ border-color:var(--bronze); background:#FAF4EE; }
.opt-flag{
  position:absolute; top:-9px; right:10px; background:var(--champagne); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px; font-style:normal; font-weight:600;
}

/* buy block */
.cfg-buy{
  margin-top:26px; padding:24px; background:var(--ink); border-radius:var(--r-l); color:#fff;
}
.cfg-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.cfg-price .amt{ font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:42px; line-height:1; }
.cfg-price .was{ font-size:19px; color:rgba(255,255,255,.45); text-decoration:line-through; }
.cfg-price .vat{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-left:auto; }
.cfg-ship{ margin:12px 0 0; font-size:12.5px; text-align:center; color:rgba(255,255,255,.6); }
.cfg-ship.ok{ color:#A8CBB5; }

.cfg-box{ margin-top:22px; border:1px solid var(--line); border-radius:var(--r-m); background:#fff; }
.cfg-box summary{
  list-style:none; cursor:pointer; padding:16px 20px; position:relative;
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:15.5px;
}
.cfg-box summary::-webkit-details-marker{ display:none; }
.cfg-box summary::after{
  content:""; position:absolute; right:20px; top:50%; width:12px; height:12px; margin-top:-6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48356' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .24s var(--ease);
}
.cfg-box[open] summary::after{ transform:rotate(135deg); }
.box-list{ list-style:none; margin:0; padding:0 20px 20px; display:grid; gap:10px; }
.box-list li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:var(--slate); }
.box-list li::before{
  content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--sage-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300141F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

@media (max-width:980px){
  .pdp{ grid-template-columns:1fr; gap:38px; }
  .gallery{ position:static; }
}
@media (max-width:560px){
  .opt-row{ grid-template-columns:1fr; }
  .len-out{ min-width:104px; font-size:15px; }
  .cfg-price .vat{ margin-left:0; width:100%; }
  .gal-strip{ grid-template-columns:repeat(2,1fr); }
}

/* ---- specification table ---- */
.spec-grid{ border:1px solid var(--line-lt); border-radius:var(--r-l); overflow:hidden; }
.spec-row{ display:grid; grid-template-columns:230px 1fr; gap:24px; padding:18px 26px; border-bottom:1px solid rgba(255,255,255,.09); }
.spec-row:last-child{ border-bottom:0; }
.spec-k{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--champagne); padding-top:3px; }
.spec-v{ font-size:15px; color:rgba(255,255,255,.8); line-height:1.55; }
@media (max-width:720px){ .spec-row{ grid-template-columns:1fr; gap:8px; } }

/* ==========================================================================
   MEGA MENU — mirrors the live site's four groups
   ========================================================================== */
/* Panels are positioned against the whole nav, not each trigger — a 520px
   panel hung off a middle trigger runs off the left edge on narrow laptops. */
.nav{ position:relative; }
.nav-item{ position:static; }

.nav-top{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px;
  padding:10px 12px; border-radius:var(--r-s); background:none; border:0; cursor:pointer;
  font-family:inherit; transition:background .16s, color .16s;
}
.nav-top:hover{ background:rgba(0,20,31,.05); }
.nav-top svg{ width:11px; height:11px; transition:transform .22s var(--ease); opacity:.55; }
.nav-item.open > .nav-top{ color:var(--bronze-ink); }

/* which section of the site you are currently in */
.nav-item.is-current > .nav-top{ color:var(--bronze-ink); }
.nav-item.is-current > .nav-top::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--bronze); border-radius:2px;
}
.nav-top{ position:relative; }
.nav-item.open > .nav-top svg{ transform:rotate(180deg); opacity:1; }

.mega{
  position:absolute; right:0; transform:translateY(6px);
  top:100%; z-index:70; min-width:280px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-l); padding:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-item.open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }

/* wide two-column variants sit against the container, not the trigger */
.mega.wide{ min-width:520px; left:50%; right:auto; transform:translateX(-50%) translateY(6px); }
.nav-item.open .mega.wide{ transform:translateX(-50%) translateY(0); }
.mega.wide .mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; }

.mega a{
  display:block;
  padding:10px 12px; border-radius:6px; text-decoration:none; color:var(--ink);
  font-size:14.5px; font-weight:500; line-height:1.35;
  transition:background .14s, color .14s;
}
.mega a:hover{ background:var(--bone-2); color:var(--bronze-ink); }
.mega a small{
  display:block; font-weight:400; font-size:12.5px; color:var(--steel); margin-top:2px; line-height:1.4;
}
.mega a:hover small{ color:var(--slate); }
.mega .mega-head{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); padding:10px 12px 6px; grid-column:1/-1;
}
.mega .mega-sep{ height:1px; background:var(--line); margin:8px 4px; grid-column:1/-1; }
.mega .mega-cta{
  grid-column:1/-1; margin:6px 4px 2px; background:var(--ink); color:#fff;
  border-radius:6px; justify-content:center; font-family:Archivo,Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600; text-transform:uppercase;
  letter-spacing:.1em; font-size:11.5px; padding:13px;
}
.mega .mega-cta:hover{ background:var(--bronze); color:var(--ink); }

/* the narrow Company panel is the last item, so it hangs off the nav's right edge */

/* ---- drawer accordion (mobile) ---- */
.drawer .d-group{ border-bottom:1px solid var(--line-lt); }
.drawer .d-top{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; cursor:pointer; color:#fff; text-align:left;
  padding:16px 0; font-family:Archivo,Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600; font-size:19px;
}
.drawer .d-top svg{ width:14px; height:14px; flex:none; transition:transform .22s var(--ease); opacity:.6; }
.drawer .d-group.open .d-top svg{ transform:rotate(180deg); opacity:1; }
.drawer .d-panel{ display:none; padding:0 0 14px; }
.drawer .d-group.open .d-panel{ display:block; }
.drawer .d-panel a{
  display:block; padding:11px 0 11px 16px; border-bottom:0; font-size:15.5px;
  font-family:"Public Sans",sans-serif; font-weight:400;
  color:rgba(255,255,255,.74); border-left:1px solid var(--line-lt); margin-left:2px;
}
.drawer .d-panel a:hover{ color:var(--champagne); }
.drawer .d-solo{
  display:block; padding:16px 0; border-bottom:1px solid var(--line-lt); color:#fff;
  text-decoration:none; font-family:Archivo,Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600; font-size:19px;
}

/* ==========================================================================
   GUIDES / CONTENT PAGES
   ========================================================================== */
.page-head{ background:var(--ink); color:#fff; padding:56px 0 60px; position:relative; overflow:hidden; }
.page-head::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 120% at 88% 0%, rgba(196,131,86,.14) 0%, transparent 55%),
             linear-gradient(168deg,#002B3F 0%,#00141F 70%);
}
.page-head .wrap{ position:relative; z-index:1; }
.page-head h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); margin-bottom:16px; max-width:20ch; }
.page-head .lede{ color:rgba(255,255,255,.78); }

/* sticky in-page sub-nav */
.subnav{
  position:sticky; top:78px; z-index:50; background:var(--bone-2);
  border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.subnav-inner{ display:flex; gap:2px; min-width:max-content; padding:0 24px; margin-inline:auto; max-width:var(--wrap); }
.subnav a{
  display:block; padding:15px 14px; text-decoration:none; white-space:nowrap;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); border-bottom:2px solid transparent; transition:color .16s, border-color .16s;
}
.subnav a:hover{ color:var(--bronze-ink); }
.subnav a.is-active{ color:var(--bronze-ink); border-bottom-color:var(--bronze); }
@media (max-width:1200px){ .subnav{ top:66px; } }
@media (max-width:560px){ .subnav-inner{ padding-inline:16px; } .subnav a{ padding:13px 10px; font-size:11px; } }

/* prose blocks */
.prose{ max-width:74ch; }
.prose > h3{ font-size:clamp(1.25rem,2vw,1.5rem); margin:34px 0 12px; }
.prose > h4{ font-size:1.08rem; margin:26px 0 10px; }
.prose p{ margin:0 0 16px; font-size:16.5px; line-height:1.68; color:var(--slate); }
.prose p strong{ color:var(--ink); }
.prose ul,.prose ol{ margin:0 0 20px; padding-left:0; list-style:none; }
.prose ul li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:16px; line-height:1.6; color:var(--slate); }
.prose ul li::before{
  content:""; position:absolute; left:2px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--bronze);
}
.prose ol{ counter-reset:n; }
.prose ol li{
  position:relative; padding-left:38px; margin-bottom:12px; font-size:16px; line-height:1.6; color:var(--slate);
  counter-increment:n;
}
.prose ol li::before{
  content:counter(n,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--bronze-ink); font-weight:600;
}
.prose a{ color:var(--bronze-ink); font-weight:600; }

.guide-sec{ padding:74px 0; border-bottom:1px solid var(--line); scroll-margin-top:140px; }
.guide-sec:last-of-type{ border-bottom:0; }
.guide-sec.tint{ background:var(--bone-2); }
.guide-num{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); display:block; margin-bottom:12px;
}
.guide-split{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; }
@media (max-width:980px){ .guide-split{ grid-template-columns:1fr; gap:34px; } }

/* pull-out aside */
.aside-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:26px;
  box-shadow:var(--shadow-s); position:sticky; top:150px;
}
.tint .aside-card{ background:var(--bone); }
.aside-card h4{ font-size:1.1rem; margin-bottom:12px; }
.aside-card p{ font-size:14.5px; color:var(--slate); line-height:1.6; margin:0 0 18px; }
.aside-card .btn{ width:100%; }
@media (max-width:980px){ .aside-card{ position:static; } }

/* data table */
.dtable-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-m); background:#fff; }
table.dtable{ width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; }
table.dtable th,table.dtable td{ padding:13px 16px; text-align:right; border-bottom:1px solid var(--line); }
table.dtable th:first-child,table.dtable td:first-child{ text-align:left; }
table.dtable thead th{
  background:var(--ink); color:#fff; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; white-space:nowrap;
  border-bottom:0;
}
table.dtable tbody th{ font-weight:600; color:var(--ink); white-space:nowrap; }
table.dtable tbody tr:nth-child(even){ background:var(--bone); }
table.dtable tbody tr:last-child th,table.dtable tbody tr:last-child td{ border-bottom:0; }
table.dtable td{ font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--slate); }

/* checklist */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:c;
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--line); }
.checklist li{
  background:#fff; padding:18px 22px 18px 60px; position:relative; counter-increment:c;
  font-size:15.5px; line-height:1.55; color:var(--slate);
}
.tint .checklist li{ background:var(--bone); }
.checklist li::before{
  content:counter(c); position:absolute; left:22px; top:18px;
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-content:center; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
}
.checklist li strong{ color:var(--ink); }

/* scope diagram callouts */
.scope-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 26px; }
.scope{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:20px; }
.tint .scope{ background:var(--bone); }
.scope b{
  display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:26px; color:var(--bronze-ink); line-height:1; margin-bottom:8px;
}
.scope span{ font-size:13.5px; color:var(--slate); line-height:1.5; display:block; }
@media (max-width:700px){ .scope-grid{ grid-template-columns:1fr; gap:10px; } }

/* colour sequence strip */
.seq-strip{ display:grid; gap:8px; margin:6px 0 24px; }
.seq-row{ display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; }
.seq-row .pos{
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--slate);
  text-align:right; letter-spacing:.04em;
}
.seq-row .bar{
  height:34px; border-radius:4px; display:flex; align-items:center; padding-left:14px;
  font-size:13px; font-weight:600; color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}

/* mnemonic */
.mnemonic{
  background:var(--ink); color:#fff; border-radius:var(--r-l); padding:28px 30px; margin:6px 0 26px;
}
.mnemonic p{ margin:0 0 6px; color:rgba(255,255,255,.72); font-size:14.5px; }
.mnemonic b{
  display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--champagne); letter-spacing:.01em;
}

/* milestones timeline */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--line); }
.timeline li{ position:relative; padding:0 0 28px 36px; }
.timeline li::before{
  content:""; position:absolute; left:2px; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--bone); border:2px solid var(--bronze);
}
.timeline li.major::before{ background:var(--bronze); }
.timeline .t-date{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze-ink); display:block; margin-bottom:4px;
}
.timeline .t-body{ font-size:15.5px; color:var(--slate); line-height:1.55; }
.timeline .t-body strong{ color:var(--ink); }

/* distributor grid */
.dist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.dist{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px;
}
.tint .dist{ background:var(--bone); }
.dist b{
  display:flex; align-items:center; gap:8px; font-family:Archivo,Arial,sans-serif;
  font-variation-settings:"wdth" 104,"wght" 600; font-size:15px; margin-bottom:6px;
}
.dist .flag{ font-size:15px; line-height:1; }
.dist span{ font-size:13px; color:var(--slate); line-height:1.5; display:block; }
.dist a{ color:var(--bronze-ink); text-decoration:none; font-weight:600; word-break:break-word; }
.dist a:hover{ text-decoration:underline; }
@media (max-width:1000px){ .dist-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dist-grid{ grid-template-columns:1fr; } }

/* job posting */
.job{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--shadow-s);
}
.tint .job{ background:var(--bone); }
.job-head{ padding:28px 30px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.job-head h3{ font-size:1.5rem; margin:0; }
.job-body{ padding:28px 30px; }
.job-cols{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.job-cols h4{ font-size:1.02rem; margin:0 0 12px; }
@media (max-width:760px){ .job-cols{ grid-template-columns:1fr; gap:22px; } }
.pkg{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-top:8px; }
.pkg div{ background:#fff; padding:16px 18px; }
.tint .pkg div{ background:var(--bone); }
.pkg b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 104,"wght" 600; font-size:15px; margin-bottom:6px; }
.pkg span{ font-size:13.5px; color:var(--slate); line-height:1.55; display:block; }

/* colour library */
.colour-lib{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.swatch-card{ text-align:center; }
.swatch-card .sw{
  height:74px; border-radius:var(--r-m); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); margin-bottom:9px;
}
.swatch-card b{ display:block; font-size:13.5px; font-weight:600; }
.swatch-card span{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--steel); letter-spacing:.05em; }
@media (max-width:900px){ .colour-lib{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .colour-lib{ grid-template-columns:repeat(2,1fr); } }

/* legal */
.legal-block{ max-width:78ch; }
.legal-block h3{ font-size:1.3rem; margin:36px 0 12px; }
.legal-block h4{ font-size:1.02rem; margin:24px 0 8px; }
.legal-block p,.legal-block li{ font-size:15.5px; line-height:1.68; color:var(--slate); }
.legal-note{
  background:var(--bone-2); border-left:3px solid var(--bronze); border-radius:0 8px 8px 0;
  padding:20px 24px; margin:22px 0;
}
.legal-note p:last-child{ margin-bottom:0; }