:root{
  --abyss:#04121A; --deep:#08202D; --panel:#0C2A39; --panel-2:#103544;
  --ink:#EDF6F8; --ink-2:#C2D8E0; --muted:#87A6B3; --rule:#18404F;
  --cyan:#3FC5D9; --cyan-dim:#1D7F90; --cyan-ink:#04171C;
  --sand:#EFE7D8; --sand-2:#E3D7C2; --sand-ink:#1E2A22; --sand-muted:#5E6A62; --sand-rule:#D3C6AE;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--abyss);color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-variation-settings:"wdth" 100;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:700;font-variation-settings:"wdth" 118;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,78px);line-height:1.03}
h2{font-size:clamp(28px,3.9vw,48px);line-height:1.08}
h3{font-size:clamp(19px,2vw,23px);line-height:1.22;font-variation-settings:"wdth" 108}
.eyebrow{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  font-weight:600;margin:0 0 20px;font-variation-settings:"wdth" 100;
}
.lede{font-size:clamp(17px,1.85vw,20.5px);color:var(--ink-2);max-width:62ch;margin:22px 0 0}
p{margin:18px 0 0}
.sm{font-size:14.5px;color:var(--muted)}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:40;background:rgba(4,18,26,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(24,64,79,.7);
}
.nav-in{display:flex;align-items:center;gap:28px;max-width:var(--maxw);margin:0 auto;padding:14px 26px}
.nav-in img{height:26px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:13.5px;color:var(--ink-2)}
.nav-links a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav-links a:hover{color:var(--cyan);border-color:var(--cyan)}
@media (max-width:860px){.nav-links{display:none}}
.nav-cta{
  font-size:13px;font-weight:600;text-decoration:none;padding:9px 17px;border-radius:2px;
  background:var(--cyan);color:var(--cyan-ink);white-space:nowrap;
}
@media (max-width:860px){.nav-cta{margin-left:auto}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(80vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero-text{margin-left:auto;max-width:min(620px,54%)}
@media (max-width:880px){.hero-text{margin-left:0;max-width:100%}}
.hero-in{position:relative;z-index:2;width:100%;padding:120px 0 62px}
.hero h1{max-width:17ch;text-shadow:0 2px 40px rgba(2,10,15,.55)}
.hero-panel{margin-top:26px;padding:24px 26px 26px;background:rgba(4,18,26,.72);border-left:2px solid var(--cyan)}
.hero-panel .lede{margin:0;text-shadow:none}
.hero-panel .btns{margin-top:24px}
.hero .eyebrow{text-shadow:0 1px 16px rgba(2,10,15,.8)}
@media (max-width:560px){.btns{gap:10px}.btns .btn{flex:1 1 100%;text-align:center}}
.hero .lede{max-width:56ch;color:#DCEBF0;text-shadow:0 1px 22px rgba(2,10,15,.6)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-block;font-size:14.5px;font-weight:600;text-decoration:none;padding:14px 26px;
  border-radius:2px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
.btn.solid{background:var(--cyan);color:var(--cyan-ink)}
.btn.solid:hover{background:#5AD6E8}
.btn.ghost{border-color:rgba(226,240,244,.42);color:var(--ink)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.dark{background:var(--sand-ink);color:var(--sand)}
.btn.dark:hover{background:#2E4036}

/* ---------- stat strip ---------- */
.stats{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--deep)}
.stats-in{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--maxw);margin:0 auto}
@media (max-width:760px){.stats-in{grid-template-columns:1fr}}
@media (max-width:760px){.stat{border-right:0;border-bottom:1px solid var(--rule)}}
.stat{padding:28px 26px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
@media (max-width:760px){.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.stat b{display:block;font-size:clamp(26px,3.2vw,38px);font-weight:700;font-variation-settings:"wdth" 115;
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat span{display:block;margin-top:9px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ---------- sections ---------- */
section{padding:clamp(64px,8vw,110px) 0}
.band-sand{background:var(--sand);color:var(--sand-ink)}
.band-sand .eyebrow{color:#9A6B2F}
.band-sand .lede,.band-sand p{color:#3C4A41}
.band-sand .sm{color:var(--sand-muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px);align-items:center}
.split.narrow{grid-template-columns:1.05fr .95fr}
@media (max-width:880px){.split,.split.narrow{grid-template-columns:1fr;gap:34px}}
.shot{border-radius:3px;overflow:hidden;border:1px solid var(--rule);background:var(--deep)}
.band-sand .shot{border-color:var(--sand-rule)}
.shot img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:12.5px;color:var(--muted);margin-top:11px}
.band-sand figcaption{color:var(--sand-muted)}

/* ---------- venue list ---------- */
.venues{margin-top:44px;border-top:1px solid var(--rule)}
.venue{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
@media (max-width:700px){.venue{grid-template-columns:1fr;gap:5px}}
.venue b{font-weight:600;font-variation-settings:"wdth" 106}
.venue span{color:var(--muted);font-size:15.5px}

/* ---------- model table ---------- */
.model{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sand-rule);
  border:1px solid var(--sand-rule);border-radius:3px;margin-top:40px;overflow:hidden}
@media (max-width:700px){.model{grid-template-columns:1fr}}
.model>div{background:var(--sand);padding:26px 28px}
.model h3{margin-bottom:16px}
.model ul{margin:0;padding:0;list-style:none}
.model li{padding:9px 0 9px 24px;position:relative;font-size:15.5px;border-bottom:1px solid rgba(211,198,174,.55)}
.model li:last-child{border-bottom:0}
.model li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;border-radius:1px;background:#9A6B2F}
.model .them li::before{background:#A9B3AB}

/* ---------- numbered steps ---------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.steps li{counter-increment:s;position:relative;padding-left:52px}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.steps li::after{content:"";position:absolute;left:6px;top:26px;bottom:-26px;width:1px;background:var(--rule)}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:6px}
.steps p{margin-top:0;font-size:15.5px;color:var(--ink-2)}
@media (max-width:560px){.steps li{padding-left:40px}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:26px 26px 28px}
.card h3{margin-bottom:12px}
.card p{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
.card .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:600}

/* ---------- validation row ---------- */
.valid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:3px;margin-top:40px;overflow:hidden}
@media (max-width:820px){.valid{grid-template-columns:1fr}}
.valid>div{background:var(--deep);padding:24px 26px}
.valid b{display:block;font-size:15.5px;font-weight:600;margin-bottom:7px}
.valid p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin-top:40px}
.people.two-up { grid-template-columns: repeat(2, 1fr); }
@media (max-width:900px){.people{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.people{grid-template-columns:1fr}}
.person{display:flex;gap:16px;align-items:flex-start}
.person img{width:118px;height:118px;border-radius:3px;flex:none;object-fit:cover;border:1px solid var(--rule)}
@media (max-width:560px){.person img{width:96px;height:96px}}
.person b{display:block;font-size:16px;font-weight:600;font-variation-settings:"wdth" 106}
.person em{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);margin:4px 0 7px;font-weight:600}
.person span{font-size:13.5px;color:var(--muted);line-height:1.5;display:block}
.subhead{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:56px 0 0;padding-bottom:12px;border-bottom:1px solid var(--rule)}

/* ---------- closing ---------- */
.closing{position:relative;min-height:min(64vh,560px);display:flex;align-items:center;overflow:hidden;padding:0}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* closing overlay removed: the photograph shows as-is */
.closing .wrap{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:60px}
.closing h2{max-width:15ch}

/* ---------- contact split ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:30px}
.path h3{margin-bottom:10px}
.path p{font-size:15.5px;color:var(--ink-2)}

footer{border-top:1px solid var(--rule);background:var(--deep);padding:46px 0 54px}
.foot{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between}
.foot img{height:30px;width:auto}
.foot .sm{max-width:44ch;margin:14px 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:var(--ink-2)}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--cyan)}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--muted)}
a.inline{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(63,197,217,.4)}
a.inline:hover{border-color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* ---------- category definition block ---------- */
.define{
  margin:34px 0 44px;padding:26px 30px;background:var(--panel);
  border:1px solid var(--rule);border-left:3px solid var(--cyan);border-radius:3px;
}
.define p{margin:0;color:var(--ink-2);max-width:74ch}
.define p+p{margin-top:14px}
.define b{color:var(--ink);font-weight:600}

/* ---------- product comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:3px;margin-top:44px;overflow:hidden}
@media (max-width:820px){.compare{grid-template-columns:1fr}}
.compare>div{background:var(--panel);padding:30px}
.ptag{font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px;display:inline-block;padding:5px 10px;border-radius:2px}
.ptag.surface{color:#0B2E38;background:#6FD3C7}
.ptag.dive{color:#04171C;background:var(--cyan)}
.compare h3{margin-bottom:20px}
.compare dl{margin:0;display:grid;grid-template-columns:auto;gap:0}
.compare dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding-top:14px;border-top:1px solid var(--rule)}
.compare dd{margin:5px 0 0;font-size:15.5px;color:var(--ink-2);padding-bottom:14px}
.eyebrow.ps{color:#6FD3C7}
.eyebrow.pd{color:var(--cyan)}

/* ---------- headline safety figures ---------- */
.bigstat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:3px;margin-top:40px;overflow:hidden}
@media (max-width:760px){.bigstat{grid-template-columns:1fr}}
.bigstat>div{background:var(--panel);padding:28px 30px}
.bigstat b{display:block;font-size:clamp(34px,5vw,54px);font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variation-settings:"wdth" 115;color:var(--muted)}
.bigstat span{display:block;margin-top:12px;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.bigstat .answer{background:var(--accent-soft)}
.bigstat .answer b{color:var(--cyan)}
.bigstat .answer span{color:var(--ink-2)}

/* ---------- section sub-heads with a rule ---------- */
.rule-head{
  margin:60px 0 24px;padding-bottom:12px;border-bottom:1px solid var(--rule);
  font-size:clamp(17px,2vw,21px);font-variation-settings:"wdth" 110;
}
.steps.layers{margin-top:8px}
.steps.layers li{padding-left:58px}
.steps.layers li::before{font-size:15px}

/* ---------- card grid variants ---------- */
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.one{grid-template-columns:1fr;gap:16px;margin-top:0}
@media (max-width:900px){
  .cards,.cards.two,.cards.three{grid-template-columns:1fr}
}

/* ---------- bridge link under the numbers ---------- */
.bridge{
  display:flex;align-items:center;justify-content:center;gap:12px;
  max-width:var(--maxw);margin:0 auto;padding:20px 26px;
  border-top:1px solid var(--rule);text-decoration:none;
  font-size:15px;font-weight:500;color:var(--accent);
  transition:color .15s,background .15s;
}
.bridge:hover{color:var(--ink);background:var(--panel)}
.bridge i{
  width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);flex:none;
}

/* ================= PALETTE: REEF DAYLIGHT ================= */
:root[data-palette="daylight"]{
  --abyss:#F2F6F7; --deep:#FFFFFF; --panel:#FFFFFF; --panel-2:#EDF4F5;
  --ink:#0B2531; --ink-2:#3B5762; --muted:#6E8893;
  --rule:#D9E5E8; --cyan:#0C8798; --cyan-dim:#0A6E7C; --cyan-ink:#FFFFFF;
  --accent:#0C8798; --accent-soft:#DFF1F3; --accent-ink:#FFFFFF;
  --sand:#12333E; --sand-2:#0E2A33; --sand-ink:#EDF5F6; --sand-muted:#9DB7BF; --sand-rule:#244A56;
  --stage:#0B2531;
}
:root[data-palette="daylight"] .band-sand .eyebrow{color:#6FD3C7}
:root[data-palette="daylight"] .band-sand .lede,
:root[data-palette="daylight"] .band-sand p{color:#C9DDE2}
:root[data-palette="daylight"] .model li::before{background:#6FD3C7}
:root[data-palette="daylight"] .model .them li::before{background:#5B7C86}
:root[data-palette="daylight"] .model li{border-bottom-color:rgba(36,74,86,.7)}
:root[data-palette="daylight"] .btn.dark{background:#0C8798;color:#fff}
:root[data-palette="daylight"] .ptag.surface{color:#083038;background:#7FD8CB}
:root[data-palette="daylight"] .bigstat b{color:var(--muted)}
:root[data-palette="daylight"] nav{background:rgba(242,246,247,.9);border-bottom-color:var(--rule)}
:root[data-palette="daylight"] .nav-in img,
:root[data-palette="daylight"] .foot img{filter:invert(1) brightness(.25)}

/* ================= PALETTE: GOLDEN HOUR ================= */
:root[data-palette="goldenhour"]{
  --abyss:#08202B; --deep:#0C2C39; --panel:#123645; --panel-2:#17414F;
  --ink:#F4F9FA; --ink-2:#CBDDE2; --muted:#8FAEB8;
  --rule:#1E4A5A; --cyan:#F2A45C; --cyan-dim:#C07C38; --cyan-ink:#2A1705;
  --accent:#F2A45C; --accent-soft:#3A2A18; --accent-ink:#2A1705;
  --sand:#F3ECE0; --sand-2:#E6DBC8; --sand-ink:#20302B; --sand-muted:#5E6A62; --sand-rule:#D6C9B2;
  --stage:#04141C;
}
:root[data-palette="goldenhour"] .band-sand .eyebrow{color:#B06B22}
:root[data-palette="goldenhour"] .ptag.surface{color:#08202B;background:#7FD3C4}
:root[data-palette="goldenhour"] .model li::before{background:#B06B22}

/* daylight: hero and closing sit on photographs, so their type stays light */
:root[data-palette="daylight"] .hero h1{color:#FFFFFF}
:root[data-palette="daylight"] .hero .lede{color:#EAF3F5}
:root[data-palette="daylight"] .hero .eyebrow{color:#7FE3EF}
:root[data-palette="daylight"] .hero::after{
  background:
    linear-gradient(268deg,rgba(4,18,26,.88) 0%,rgba(4,18,26,.64) 36%,rgba(4,18,26,.18) 66%,rgba(4,18,26,0) 100%),
    linear-gradient(184deg,rgba(4,18,26,.34) 0%,rgba(4,18,26,.06) 34%,rgba(4,18,26,.56) 76%,var(--abyss) 100%);
}
:root[data-palette="daylight"] .closing h2{color:#FFFFFF}

/* ---------- figure row inside the sand band ---------- */
.figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sand-rule);
  border:1px solid var(--sand-rule);border-radius:3px;margin:26px 0 24px;overflow:hidden}
@media (max-width:700px){.figrow{grid-template-columns:1fr}}
.figrow>div{background:var(--sand);padding:18px 20px}
.figrow b{display:block;font-size:clamp(23px,2.8vw,32px);font-weight:700;line-height:1;
  letter-spacing:-.02em;font-variation-settings:"wdth" 112;color:var(--sand-ink);
  font-variant-numeric:tabular-nums}
.figrow span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sand-muted)}
.figrow .hi{background:#E4D8BF}
.figrow .hi b{color:#8A5416}

/* phone screenshots sit centred at a readable width rather than filling the column */
.shot.phone{max-width:330px;margin:0 auto;background:var(--panel)}
.shot.phone img{width:100%;height:auto}

/* ---------- three-up photo row ---------- */
.photorow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.photorow figure{margin:0}
.photorow .shot img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:820px){.photorow{grid-template-columns:1fr}}