/* ==========================================================================
   Anchoright Ltd — design system
   Display: Archivo (variable width) · Body: Public Sans · Spec: IBM Plex Mono
   ========================================================================== */

:root{
  /* hull */
  --ink:      #061320;
  --ink-2:    #0A1E31;
  --ink-3:    #12314B;
  --navy:     #0B2A6B;
  --blue:     #1447E6;
  --blue-lt:  #4FC3E8;

  /* signal */
  --red:      #D81E2C;
  --red-dk:   #A5131F;
  --amber:    #FFB703;

  /* paper */
  --cream:    #F7F4ED;
  --cream-2:  #EFEADF;
  --sand:     #E2DACA;
  --steel:    #6E869C;
  --slate:    #3A4F63;
  --white:    #fff;

  --line:     rgba(6,19,32,.12);
  --line-lt:  rgba(255,255,255,.14);

  /* marker spectrum */
  --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(6,19,32,.06), 0 2px 8px rgba(6,19,32,.06);
  --shadow-m: 0 2px 4px rgba(6,19,32,.05), 0 12px 30px rgba(6,19,32,.10);
  --shadow-l: 0 4px 8px rgba(6,19,32,.06), 0 28px 60px rgba(6,19,32,.16);

  --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-xl: 28px;
  --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(--cream);
  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" 112,"wght" 800;
  line-height:1.02;
  letter-spacing:-.018em;
  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:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--red); flex:none;
}
.eyebrow.on-dark{ color:var(--amber); }
.eyebrow.on-dark::before{ background:var(--amber); }

.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" 108,"wght" 700; }

.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" 105,"wght" 700;
  font-size:16px; letter-spacing:.005em;
  padding:16px 26px; border-radius:var(--r-s); border:2px 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(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

.btn-primary{ background:var(--red); color:#fff; box-shadow:0 4px 0 var(--red-dk),0 12px 26px rgba(216,30,44,.28); }
.btn-primary:hover{ background:#E82836; box-shadow:0 6px 0 var(--red-dk),0 18px 34px rgba(216,30,44,.34); }

.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 4px 0 #061c4a,0 12px 26px rgba(11,42,107,.26); }
.btn-navy:hover{ background:#0E3488; }

.btn-ghost{ border-color:rgba(6,19,32,.24); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(6,19,32,.04); }

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

.btn-sm{ padding:11px 18px; font-size:14.5px; }
.btn-block{ width:100%; }

.link-arrow{
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 105,"wght" 700;
  text-decoration:none; color:var(--red); 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:7px; 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(--amber); }
.topbar a{ color:#fff; text-decoration:none; font-weight:600; display:flex; align-items:center; gap:7px; }
.topbar a:hover{ color:var(--amber); }
@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(247,244,237,.92);
  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(6,19,32,.10); }
.site-head .wrap{ display:flex; align-items:center; gap:28px; min-height:78px; }

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

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:15.5px;
  padding:10px 14px; border-radius:var(--r-s); position:relative;
  transition:background .16s, color .16s;
}
.nav a:hover{ background:rgba(6,19,32,.05); }
.nav a.is-active{ color:var(--red); }

.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" 108,"wght" 700; font-size:16px; }
.head-phone:hover .num{ color:var(--red); }

.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; }

@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .head-cta .btn{ display:none; }
}
@media (max-width:560px){
  .head-phone{ display:none; }
  .site-head .wrap{ min-height:66px; }
  .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" 108,"wght" 700; 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 78% 6%, rgba(20,71,230,.30) 0%, transparent 55%),
    radial-gradient(90% 80% at 8% 90%, rgba(11,42,107,.55) 0%, transparent 60%),
    linear-gradient(170deg,#0A1E31 0%,#061320 62%);
}
/* 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,.05) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 68px);
  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(--amber); position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.03em; height:.11em;
  background:var(--red); 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" 112,"wght" 800;
  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" 110,"wght" 800; 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:-14px; right:-10px; width:118px; height:118px; border-radius:50%;
  background:var(--amber); color:var(--ink); display:grid; place-content:center; text-align:center;
  box-shadow:var(--shadow-l); transform:rotate(9deg); padding:10px;
}
.hero-award b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 100,"wght" 800; font-size:13px; line-height:1.12; }
.hero-award i{ font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:4px; }

@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(--cream-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(--cream-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(--cream); 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" 800; 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(--navy); background:#fff; transform:translateY(-2px); }
.size-btn.is-on{ border-color:var(--red); background:var(--red); color:#fff; box-shadow:0 8px 18px rgba(216,30,44,.3); }
.size-btn.is-on i{ color:rgba(255,255,255,.8); }
.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(--red); font-weight:700; }

/* result pane */
.finder-right{ padding:44px; background:var(--cream); 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:#DFF5E5; color:#0F6B3A; }
.tag-custom{ background:#FFF0D6; color:#8A5A00; }
.tag-enquiry{ background:#E4EBFF; color:var(--navy); }

.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" 112,"wght" 800; 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(--m5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063' 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" 108,"wght" 700; 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(--amber); 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(255,183,3,.11); color:#fff; font-weight:600; border-bottom-color:rgba(255,183,3,.22); }
table.compare tbody tr:last-child td.us{ border-radius:0 0 12px 12px; }
.tick{ color:var(--m5); font-weight:700; }
.cross{ color:#FF7A7A; }

/* ==========================================================================
   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(--cream-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(--red); }
.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" 110,"wght" 800; 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(--cream-2); display:grid; place-content:center;
  transition:background .18s, color .18s, transform .18s; flex:none;
}
.pcard:hover .pcard-go{ background:var(--red); 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" 118,"wght" 800;
  font-size:78px; line-height:1; color:rgba(6,19,32,.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(--amber); }
.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(--amber); 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:#12314B;
  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:#9A968C; text-transform:uppercase; }

.unit-toggle{ display:inline-flex; background:var(--cream-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" 700; 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(--red); margin-top:2px; }

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

/* ==========================================================================
   SUPERYACHT BAND
   ========================================================================== */
.sy{ background:linear-gradient(160deg,#0B2A6B 0%,#061320 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(20,71,230,.30),transparent 68%); 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(6,19,32,.55); padding:22px 18px; }
.sy-stats b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 116,"wght" 800; font-size:clamp(1.8rem,3.6vw,2.5rem); line-height:1; color:var(--amber); }
.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" 106,"wght" 700; }
.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" 106,"wght" 700; 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" 114,"wght" 800; 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(--amber); }
.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:#0F6B3A; 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(--cream-2); display:grid; place-content:center; flex:none; color:var(--navy);
}
.dark .cred-list .ico{ background:rgba(255,255,255,.09); color:var(--amber); }
.cred-list .ico svg{ width:21px; height:21px; }
.cred-list b{ display:block; font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 106,"wght" 700; 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" 106,"wght" 700;
  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='%23D81E2C' 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(--red); }
.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(--red); 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(--amber); }
.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" 106,"wght" 700; font-size:17px; line-height:1.35; display:block; }
.contact-lines a:hover{ color:var(--amber); }
.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(--cream); color:var(--ink);
  transition:border-color .16s, box-shadow .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(11,42,107,.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:#04101B; 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" 106,"wght" 700; 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;
  background:rgba(6,19,32,.97); backdrop-filter:blur(10px);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:9px;
  border-top:1px solid var(--line-lt);
}
.mobile-bar .btn{ flex:1; padding:13px 10px; font-size:14.5px; }
@media (max-width:760px){ .mobile-bar{ display:flex; } body{ padding-bottom:74px; } }

/* ==========================================================================
   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(--amber); }

.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(--red); }
.dark .badge svg{ color:var(--amber); }

/* ==========================================================================
   SUPERYACHT PAGE
   ========================================================================== */
.sy-hero::before{
  background:
    radial-gradient(110% 80% at 82% 10%, rgba(20,71,230,.34) 0%, transparent 58%),
    radial-gradient(80% 70% at 4% 88%, rgba(216,30,44,.20) 0%, transparent 62%),
    linear-gradient(165deg,#0B2A6B 0%,#061320 66%);
}

/* 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" 116,"wght" 800;
  font-size:clamp(2rem,3.6vw,2.7rem); line-height:1; color:var(--red); 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" 106,"wght" 700; 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(--cream-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(--navy); 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" 106,"wght" 800; 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(--red);
  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(--red); }
.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(--cream-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(--cream-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(--red); }

.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" 108,"wght" 800; 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" 106,"wght" 700; 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" 700;
}
.cfg-lbl em{ font-style:normal; color:var(--red); 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(--red); 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" 700; 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(--navy); transform:translateY(-2px); }
.chip.is-on{ border-color:var(--red); background:var(--red); color:#fff; }
.chip.is-on i{ color:rgba(255,255,255,.8); }
.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(--navy); color:var(--ink); }
.preset.is-on{ border-style:solid; border-color:var(--navy); background:var(--navy); 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(--red); border:3px solid #fff; box-shadow:0 2px 8px rgba(216,30,44,.4); cursor:pointer;
}
.len-row input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--red);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(216,30,44,.4); cursor:pointer;
}
.len-out{
  font-family:Archivo,Arial,sans-serif; font-variation-settings:"wdth" 108,"wght" 800;
  font-size:17px; min-width:126px; text-align:right; flex:none;
}

.cfg-callout{
  margin-top:14px; background:var(--cream-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:#E7F6EC; border-left-color:#0F6B3A; }
.cfg-callout.ok b{ color:#0F6B3A; }
.cfg-callout.warn{ background:#FFF4DE; border-left-color:#B57900; }
.cfg-callout.warn b{ color:#8A5A00; }
.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(--red); }

.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" 106,"wght" 700; font-size:15.5px; }
.opt span{ display:block; font-size:12.5px; color:var(--steel); margin-top:3px; }
.opt span strong{ color:var(--red); }
.opt:hover{ border-color:var(--navy); }
.opt.is-on{ border-color:var(--red); background:#FFF6F6; }
.opt-flag{
  position:absolute; top:-9px; right:10px; background:var(--amber); 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" 114,"wght" 800; 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:#7BE0A0; }

.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" 106,"wght" 700; 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='%23D81E2C' 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(--m5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063' 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(--amber); 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; } }