/* ============================================================
   ST BARTS YACHT CHARTERS — CARIBBEAN NOIR DESIGN SYSTEM
   Midnight navy / Atlantic blue / turquoise / cyan / champagne
   ============================================================ */
:root{
  --midnight:#06121f;
  --atlantic:#0b2337;
  --atlantic-2:#0f2d46;
  --steel:#3d5a73;
  --turquoise:#2dd4c8;
  --cyan:#54d8ff;
  --champagne:#d9b98a;
  --champagne-2:#ecd9ae;
  --pearl:#f5f0e6;
  --pearl-2:#efe8d9;
  --ink:#101c28;
  --slate:#42566a;
  --line:rgba(84,216,255,.22);
  --line-soft:rgba(217,185,138,.28);
  --glass:rgba(11,35,55,.55);
  --glass-light:rgba(255,255,255,.72);
  --shadow-lg:0 30px 80px rgba(2,10,20,.55);
  --shadow-md:0 18px 48px rgba(2,10,20,.35);
  --radius:18px;
  --font-display:'Marcellus',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--pearl);
  background:var(--midnight);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--champagne-2)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.18;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin-bottom:1.05rem}
.container{width:min(1240px,92%);margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--turquoise);margin-bottom:1rem;font-weight:600;
}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--turquoise))}
.lead{font-size:1.13rem;color:#cfdde8}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--turquoise),transparent)}

/* ---------- light sections ---------- */
.section.light{background:linear-gradient(180deg,var(--pearl),var(--pearl-2));color:var(--ink)}
.section.light .lead{color:var(--slate)}
.section.light h1,.section.light h2,.section.light h3{color:var(--atlantic)}
.section.light .eyebrow{color:#0f8f86}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .4s ease, box-shadow .4s ease;
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  width:min(1360px,94%);margin:0 auto;padding:16px 0;
}
.site-header.scrolled{
  background:rgba(6,18,31,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:52px;width:auto}
.brand .name{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pearl)}
.brand .name small{display:block;font-family:var(--font-body);font-size:.58rem;letter-spacing:.42em;color:var(--turquoise);margin-top:2px}
.main-nav ul{list-style:none;display:flex;gap:.2rem;align-items:center}
.main-nav>ul>li{position:relative}
.main-nav a{
  display:block;padding:12px 13px;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:#d7e4ee;font-weight:600;white-space:nowrap;
}
.main-nav a:hover{color:var(--turquoise)}
.main-nav .has-menu>ul{
  position:absolute;top:100%;left:0;min-width:290px;
  background:rgba(8,24,40,.97);border:1px solid var(--line);border-radius:14px;
  padding:10px;display:none;box-shadow:var(--shadow-md);flex-direction:column;
}
.main-nav .has-menu:hover>ul,.main-nav .has-menu:focus-within>ul{display:flex}
.main-nav .has-menu>ul a{padding:9px 14px;font-size:.74rem;letter-spacing:.1em;text-transform:none;font-weight:500;border-radius:8px}
.main-nav .has-menu>ul a:hover{background:rgba(45,212,200,.08)}
.main-nav .nav-cta{
  margin-left:10px;padding:11px 20px;border-radius:999px;
  background:linear-gradient(120deg,var(--turquoise),var(--cyan));
  color:#04222b;font-weight:700;letter-spacing:.12em;
  box-shadow:0 8px 26px rgba(45,212,200,.32);
}
.main-nav .nav-cta:hover{color:#04222b;transform:translateY(-1px)}
.badge-offer{
  font-size:.56rem;background:linear-gradient(120deg,var(--champagne),var(--champagne-2));
  color:#3a2a10;padding:2px 8px;border-radius:999px;letter-spacing:.18em;vertical-align:2px;margin-left:6px;font-weight:700;
}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--pearl);margin:5px 0;transition:.3s}
@media (max-width:1080px){
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;inset:0;background:rgba(4,14,25,.98);backdrop-filter:blur(18px);
    padding:96px 6% 40px;overflow-y:auto;display:none;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a{padding:13px 8px;font-size:.95rem;border-bottom:1px solid rgba(84,216,255,.08)}
  .main-nav .has-menu>ul{position:static;display:none;box-shadow:none;border:none;border-left:1px solid var(--line);margin:2px 0 8px 14px;border-radius:0;min-width:0;background:transparent}
  .main-nav .has-menu.open>ul{display:flex}
  .main-nav .nav-cta{margin:14px 0 0;text-align:center}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- hero slider ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:980px;overflow:hidden;background:var(--midnight)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.slide.active{opacity:1;pointer-events:auto;z-index:2}
.slide .bg{
  position:absolute;inset:-40px;background-size:cover;background-position:center;
  filter:blur(34px) brightness(.42) saturate(1.15);transform:scale(1.08);
}
.slide .frame{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;
}
.slide .frame img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.5));
}
.slide .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,31,.55) 0%,rgba(6,18,31,.05) 34%,rgba(6,18,31,.12) 60%,rgba(6,18,31,.88) 100%)}
.hero-caption{
  position:absolute;z-index:5;left:0;right:0;bottom:clamp(96px,14vh,150px);
  display:flex;justify-content:center;pointer-events:none;
}
.caption-card{
  pointer-events:auto;max-width:720px;margin:0 5%;text-align:center;
  background:rgba(7,20,34,.58);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(84,216,255,.25);border-radius:22px;
  padding:clamp(22px,3.4vw,40px) clamp(22px,4vw,52px);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(26px);transition:opacity 1s ease .35s,transform 1s ease .35s;
}
.slide.active .caption-card{opacity:1;transform:translateY(0)}
.caption-card .kicker{font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne);margin-bottom:.9rem;font-weight:600}
.caption-card h1,.caption-card h2{color:#fff;margin-bottom:.8rem}
.caption-card p{color:#c9d9e5;margin-bottom:1.4rem}
.hero-nav{
  position:absolute;z-index:6;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(84,216,255,.4);
  background:rgba(7,20,34,.5);backdrop-filter:blur(8px);color:var(--pearl);
  font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.3s;
}
.hero-nav:hover{background:rgba(45,212,200,.18);border-color:var(--turquoise)}
.hero-nav.prev{left:clamp(12px,3vw,40px)}
.hero-nav.next{right:clamp(12px,3vw,40px)}
.hero-dots{position:absolute;z-index:6;bottom:34px;left:0;right:0;display:flex;justify-content:center;gap:10px}
.hero-dots button{
  width:34px;height:3px;border:none;border-radius:2px;background:rgba(245,240,230,.28);
  cursor:pointer;transition:.4s;padding:0;
}
.hero-dots button.active{background:linear-gradient(90deg,var(--turquoise),var(--cyan));width:52px}
@media (max-width:720px){
  .hero{min-height:560px;height:88svh}
  .hero-nav{display:none}
  .hero-caption{bottom:76px}
}

/* ---------- holographic compass ---------- */
.compass-wrap{position:absolute;z-index:6;top:clamp(86px,12vh,130px);right:clamp(18px,4vw,64px);width:clamp(120px,15vw,210px);pointer-events:none;opacity:.92;filter:drop-shadow(0 0 18px rgba(45,212,200,.35))}
.compass-wrap .spin-a{transform-origin:50% 50%;animation:spin 90s linear infinite}
.compass-wrap .spin-b{transform-origin:50% 50%;animation:spin-rev 64s linear infinite}
.compass-wrap .spin-c{transform-origin:50% 50%;animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
  .compass-wrap .spin-a,.compass-wrap .spin-b,.compass-wrap .spin-c{animation:none}
  .slide{transition:none}
  html{scroll-behavior:auto}
}
@media (max-width:720px){.compass-wrap{width:96px;top:80px;right:14px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;justify-content:center;
  padding:15px 32px;border-radius:999px;font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;transition:.3s;border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:linear-gradient(120deg,var(--turquoise),var(--cyan));color:#032330;box-shadow:0 12px 34px rgba(45,212,200,.3)}
.btn-primary:hover{color:#032330;transform:translateY(-2px);box-shadow:0 18px 44px rgba(45,212,200,.42)}
.btn-ghost{border-color:rgba(217,185,138,.55);color:var(--champagne-2);background:rgba(217,185,138,.06)}
.btn-ghost:hover{border-color:var(--champagne);background:rgba(217,185,138,.14);color:var(--champagne-2)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---------- cards ---------- */
.grid{display:grid;gap:28px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(165deg,rgba(15,45,70,.85),rgba(8,24,40,.92));
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);border-color:rgba(45,212,200,.5);box-shadow:0 26px 70px rgba(2,10,20,.6)}
.card .photo{padding:14px 14px 0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 100% at 50% 0%,rgba(84,216,255,.09),transparent 70%)}
.card .photo img{border-radius:12px;width:100%;height:auto}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card h3{color:#fff}
.card .meta{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--turquoise);font-weight:600}
.card p{color:#b9c9d6;font-size:.95rem;margin:0}
.card .card-link{margin-top:auto;padding-top:.9rem;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.card .card-link:hover{color:var(--champagne-2)}
.section.light .card{background:#fff;border-color:rgba(61,90,115,.16);box-shadow:0 16px 44px rgba(16,40,64,.12)}
.section.light .card h3{color:var(--atlantic)}
.section.light .card p{color:var(--slate)}
.section.light .card .photo{background:radial-gradient(120% 100% at 50% 0%,rgba(15,143,134,.07),transparent 70%)}
.card.featured{border-color:rgba(217,185,138,.55);box-shadow:0 0 0 1px rgba(217,185,138,.25),0 30px 90px rgba(2,10,20,.6)}
.flag{
  position:absolute;top:22px;left:22px;z-index:3;
  background:linear-gradient(120deg,var(--champagne),var(--champagne-2));color:#3a2a10;
  font-size:.62rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(217,185,138,.4);
}

/* ---------- spec chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chips li{
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:.78rem;letter-spacing:.08em;color:#cfe2ee;background:rgba(84,216,255,.05);
}
.chips.gold li{border-color:var(--line-soft);color:var(--champagne-2);background:rgba(217,185,138,.07)}
.section.light .chips li{border-color:rgba(61,90,115,.28);color:var(--atlantic);background:rgba(15,45,70,.05)}

/* ---------- price panels ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:26px 0}
@media (max-width:640px){.price-grid{grid-template-columns:1fr}}
.price-box{
  border-radius:var(--radius);padding:30px;text-align:center;
  background:linear-gradient(160deg,rgba(15,45,70,.9),rgba(8,24,40,.95));
  border:1px solid rgba(217,185,138,.4);box-shadow:var(--shadow-md);
}
.price-box .tag{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);font-weight:700}
.price-box .amount{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.4rem);color:#fff;margin:.4rem 0 .2rem;font-variant-numeric:tabular-nums}
.price-box .per{font-size:.85rem;color:#9fb6c6}
.fine-print{font-size:.82rem;color:#8fa5b5;max-width:760px;margin:18px auto 0}
.section.light .fine-print{color:var(--slate)}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr}}
.split .img-frame{
  border-radius:var(--radius);padding:16px;
  background:linear-gradient(160deg,rgba(15,45,70,.7),rgba(8,24,40,.85));
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.split .img-frame img{border-radius:12px}
.section.light .split .img-frame{background:#fff;border-color:rgba(61,90,115,.18)}

/* ---------- gallery ---------- */
.gallery{columns:3;column-gap:20px}
@media (max-width:1024px){.gallery{columns:2}}
@media (max-width:600px){.gallery{columns:1}}
.gallery figure{margin:0 0 20px;break-inside:avoid;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:rgba(15,45,70,.5);cursor:zoom-in}
.gallery img{width:100%;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{font-size:.78rem;color:#9fb6c6;padding:10px 14px;letter-spacing:.04em}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(3,10,18,.94);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:10px;box-shadow:var(--shadow-lg)}
.lightbox .close{position:absolute;top:22px;right:26px;background:none;border:1px solid var(--line);color:var(--pearl);border-radius:50%;width:46px;height:46px;font-size:1.2rem;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(7,20,34,.6);border:1px solid var(--line);color:var(--pearl);border-radius:50%;width:48px;height:48px;font-size:1.1rem;cursor:pointer}
.lightbox .lb-prev{left:20px}.lightbox .lb-next{right:20px}

/* ---------- FAQ ---------- */
.faq{max-width:880px;margin:0 auto}
.faq details{
  border:1px solid var(--line);border-radius:14px;margin-bottom:14px;
  background:rgba(11,35,55,.5);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;color:#e8f1f7;
  display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);color:var(--turquoise);font-size:1.4rem;flex:none;transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details .answer{padding:0 24px 22px;color:#b9c9d6;font-size:.96rem}
.section.light .faq details{background:#fff;border-color:rgba(61,90,115,.2)}
.section.light .faq summary{color:var(--atlantic)}
.section.light .faq details .answer{color:var(--slate)}

/* ---------- forms ---------- */
.form-shell{
  max-width:860px;margin:0 auto;border-radius:22px;padding:clamp(26px,4vw,50px);
  background:linear-gradient(165deg,rgba(15,45,70,.85),rgba(7,20,34,.95));
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--turquoise);margin-bottom:8px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(84,216,255,.25);
  background:rgba(6,18,31,.7);color:var(--pearl);font-family:var(--font-body);font-size:.98rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--turquoise);box-shadow:0 0 0 3px rgba(45,212,200,.15)}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:.8rem;color:#8fa5b5;margin-top:14px}

/* ---------- misc blocks ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
@media (max-width:820px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center;background:rgba(11,35,55,.5)}
.stat .num{font-family:var(--font-display);font-size:2.2rem;color:var(--turquoise)}
.stat .lbl{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:#9fb6c6;margin-top:6px;font-weight:600}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.note-band{
  border-left:3px solid var(--champagne);background:rgba(217,185,138,.08);
  border-radius:0 14px 14px 0;padding:18px 22px;color:#e4d6b8;font-size:.92rem;margin:22px 0;
}
.section.light .note-band{background:rgba(217,185,138,.18);color:#6b5628}
.toc{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.toc a{
  border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:#cfe2ee;font-weight:600;
}
.toc a:hover{border-color:var(--turquoise);color:var(--turquoise)}
.section.light .toc a{color:var(--atlantic);border-color:rgba(61,90,115,.3)}
.cta-band{
  position:relative;border-radius:26px;overflow:hidden;text-align:center;
  padding:clamp(48px,7vw,90px) clamp(22px,5vw,70px);
  background:
    radial-gradient(90% 140% at 50% -20%,rgba(45,212,200,.16),transparent 60%),
    linear-gradient(150deg,#0d2a43,#06121f);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.cta-band h2{color:#fff;margin-bottom:1rem}
.cta-band p{color:#b9c9d6;max-width:640px;margin:0 auto 1.8rem}

/* ---------- footer ---------- */
.site-footer{background:#040e19;border-top:1px solid var(--line);padding:70px 0 34px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:var(--champagne);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-body);font-weight:700}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#9fb6c6;font-size:.9rem}
.site-footer a:hover{color:var(--turquoise)}
.site-footer p{color:#71879a;font-size:.88rem}
.foot-brand img{height:46px;margin-bottom:14px}
.foot-bottom{border-top:1px solid rgba(84,216,255,.1);margin-top:46px;padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.socials{display:flex;gap:14px;margin-top:6px}
.socials a{color:#9fb6c6;font-size:.85rem;letter-spacing:.06em}
.socials a:hover{color:var(--turquoise)}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#7d93a6;padding:18px 0 0}
.crumbs a{color:#9fb6c6}
.crumbs a:hover{color:var(--turquoise)}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;padding:clamp(140px,20vh,210px) 0 clamp(56px,8vh,90px);overflow:hidden;background:var(--midnight)}
.page-hero .ph-bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(26px) brightness(.38) saturate(1.1);transform:scale(1.06)}
.page-hero .ph-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,31,.6),rgba(6,18,31,.35) 55%,var(--midnight))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:840px}
.page-hero .lead{max-width:720px}