/* Diver Doug's Scuba Odyssey — theme drawn from the three logo files
   Colors sampled from the artwork: navy, gold, aqua/cyan, brass, dive-flag red. */

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/playfair-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/playfair-display-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Lobster Two";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/lobster-two-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --abyss:#000F23;
  --navy:#001B37;
  --navy-2:#022143;
  --teal-deep:#1F606C;
  --ocean:#0AA6C7;
  --aqua:#2ADFF4;
  --aqua-soft:#5CEEF6;
  --gold:#F4C32C;
  --gold-deep:#DFB746;
  --gold-light:#FCD863;
  --brass:#987848;
  --foam:#FDFCF9;
  --muted:#B7D2E2;
  --flag:#F21304;

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-script:"Lobster Two","Brush Script MT","Segoe Script",cursive;
  --font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --radius:20px;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--abyss);color:var(--foam);
  font:400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aqua-soft)}
a:hover{color:var(--gold-light)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--navy);padding:.6rem 1rem;border-radius:8px;font-weight:700;z-index:100}
.skip:focus{left:8px}

/* ---------- dive flag motif ---------- */
.flag{display:inline-block;width:28px;height:19px;border-radius:2px;flex:none;
  background:linear-gradient(to top right,transparent 41%,#fff 41% 59%,transparent 59%),var(--flag);
  box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,15,35,.84);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(244,195,44,.28);
}
.bar{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{white-space:nowrap;
  color:var(--foam);text-decoration:none;font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--gold-light);border-color:var(--gold)}
.nav .btn{border-bottom:0;padding:.65rem 1.25rem;font-size:.78rem}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid var(--gold);color:var(--gold);
  border-radius:10px;padding:.45rem .7rem;font:700 .8rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.8rem;border-radius:999px;border:0;cursor:pointer;
  font:800 .92rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:transform .15s,box-shadow .15s,background .2s,color .2s;
}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:var(--navy);box-shadow:0 5px 0 var(--brass),0 14px 28px rgba(0,0,0,.4);
}
.btn-gold:hover{color:var(--navy);transform:translateY(2px);box-shadow:0 3px 0 var(--brass),0 8px 20px rgba(0,0,0,.4)}
.btn-ghost{border:2px solid var(--aqua);color:var(--aqua-soft);background:rgba(42,223,244,.06)}
.btn-ghost:hover{background:var(--aqua);color:var(--navy)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:48px 20px 128px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(42,223,244,.30),transparent 70%),
    linear-gradient(180deg,#023463 0%,var(--navy-2) 38%,var(--navy) 100%);
}
.rays{position:absolute;inset:-20% -10% 0;pointer-events:none;
  background:repeating-conic-gradient(from 196deg at 50% -8%,rgba(92,238,246,.10) 0 3deg,transparent 3deg 11deg);
  -webkit-mask-image:linear-gradient(#000,transparent 72%);mask-image:linear-gradient(#000,transparent 72%);
  transform-origin:50% 0;animation:sway 16s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubble{
  position:absolute;bottom:-60px;border-radius:50%;
  border:1.5px solid rgba(92,238,246,.55);
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 62%);
  opacity:0;animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:.85}
  100%{transform:translate3d(var(--drift,20px),-115vh,0);opacity:0}
}
.hero-inner{position:relative;max-width:900px;margin:0 auto}
.hero h1{margin:0}
.hero-logo{
  width:min(780px,94vw);margin:0 auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55)) drop-shadow(0 0 64px rgba(42,223,244,.28));
  animation:bob 7s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lede{
  max-width:640px;margin:22px auto 30px;color:var(--foam);
  font-size:clamp(1.08rem,2.2vw,1.3rem);line-height:1.55;
}
.lede strong{color:var(--gold-light)}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;display:block}

/* ---------- sections ---------- */
.section{position:relative;padding:96px 20px}
.wrap{max-width:var(--maxw);margin:0 auto}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold);
  font:800 .82rem var(--font-body);letter-spacing:.26em;text-transform:uppercase;margin:0 0 14px}
.center .eyebrow{justify-content:center}
h2{
  margin:0 0 16px;font:900 clamp(2rem,4.6vw,3.35rem)/1.08 var(--font-display);
  text-transform:uppercase;letter-spacing:.01em;color:var(--foam);
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
h2 .script{font:700 1.18em/1 var(--font-script);text-transform:none;color:var(--gold);letter-spacing:0;
  font-style:italic;display:inline-block;transform:rotate(-2deg);padding:0 .08em}
.intro{max-width:660px;color:var(--muted);font-size:1.15rem;margin:0 0 48px}
.center{text-align:center}.center .intro{margin-left:auto;margin-right:auto}

#experiences{background:linear-gradient(180deg,var(--navy) 0%,var(--abyss) 100%)}
#start{background:var(--abyss)}
#odyssey{background:linear-gradient(180deg,var(--abyss) 0%,#00122B 100%);overflow:hidden}
#private-guide{background:linear-gradient(180deg,#00122B 0%,var(--navy) 100%)}
#doug{background:linear-gradient(180deg,var(--navy) 0%,#00122B 100%)}
#contact{background:linear-gradient(180deg,#00122B 0%,var(--navy-2) 100%)}

/* porthole icons — brass ring like the logo's frame */
.porthole{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 0 22px;
  background:radial-gradient(circle at 34% 28%,var(--aqua-soft),var(--ocean) 48%,var(--navy-2) 100%);
  box-shadow:0 0 0 4px var(--gold-deep),0 0 0 8px var(--brass),inset 0 -8px 16px rgba(0,0,0,.35),0 14px 28px rgba(0,0,0,.5);
  color:var(--foam);
}
.porthole svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  position:relative;padding:34px 30px 32px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(2,33,67,.92),rgba(0,27,55,.92));
  border:1px solid rgba(244,195,44,.34);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 22px 46px rgba(0,0,0,.45),0 0 40px rgba(42,223,244,.16)}
.card h3{margin:0 0 10px;font:800 1.45rem/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.03em;color:var(--gold-light)}
.card p{margin:0;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:960px;margin:0 auto}
.svc{display:flex;flex-direction:column}
.svc .tag{margin:0 0 10px;color:var(--aqua-soft);font:800 .78rem var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.svc .ticks{margin:18px 0 0}
.svc .price{margin:auto 0 0;padding-top:24px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.svc .price strong{font:900 2.3rem/1 var(--font-display);color:var(--gold-light)}
.svc .price span{color:var(--muted);font-size:.9rem}
.svc .prices{margin-top:auto;padding-top:24px;display:grid;gap:10px}
.svc .prices .price{margin:0;padding:0}
#start .cta-row{margin-top:44px}

/* odyssey — a descent, each day a little deeper */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;align-items:start}
.step{
  position:relative;padding:34px 28px 30px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,166,199,.16),rgba(2,33,67,.9) 60%);
  border:1px solid rgba(42,223,244,.38);box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.step:nth-child(2){margin-top:44px;background:linear-gradient(180deg,rgba(10,166,199,.11),rgba(1,24,50,.94) 60%)}
.step:nth-child(3){margin-top:88px;background:linear-gradient(180deg,rgba(10,166,199,.06),rgba(0,15,35,.96) 60%)}
.step .day{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.step .day small{font:800 .78rem var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--aqua-soft)}
.step .num{font:700 4.2rem/1 var(--font-script);font-style:italic;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4)}
.step h3{margin:0 0 8px;font:800 1.3rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.step p{margin:0;color:var(--muted)}
.depth-note{margin:56px auto 0;max-width:720px;text-align:center;color:var(--muted);font-size:1.05rem}
.depth-note strong{color:var(--gold-light)}

.horizon{margin-top:72px;padding:28px 30px;border-radius:var(--radius);
  border:1px dashed rgba(244,195,44,.5);display:flex;gap:18px 28px;align-items:center;flex-wrap:wrap;justify-content:center}
.horizon h3{flex:0 0 100%;text-align:center;margin:0;font:800 1rem var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.chip{padding:.5rem 1.1rem;border-radius:999px;background:rgba(42,223,244,.1);border:1px solid rgba(42,223,244,.45);
  color:var(--aqua-soft);font-weight:700;letter-spacing:.04em}

/* chapter details */
.step .where{margin:0 0 10px;color:var(--aqua-soft);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.step .price{margin:20px 0 0;display:flex;align-items:baseline;gap:10px}
.step .price strong{font:900 2.3rem/1 var(--font-display);color:var(--gold-light)}
.step .price span{color:var(--muted);font-size:.9rem}
.bundle{max-width:780px;margin:64px auto 0;padding:26px 34px;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(244,195,44,.18),rgba(10,166,199,.14));border:2px solid var(--gold);
  box-shadow:0 0 0 6px rgba(152,120,72,.25),0 20px 44px rgba(0,0,0,.4)}
.bundle p{margin:0}
.bundle-label{font:800 .85rem var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--aqua-soft)}
.bundle-price strong{font:900 clamp(2.4rem,5vw,3.4rem)/1.05 var(--font-display);color:var(--gold-light)}
.bundle-price span{color:var(--muted)}
.bundle .bundle-note{margin-top:8px;color:var(--foam);font-weight:600;font-size:.95rem}
.save{padding:.55rem 1.2rem;border-radius:999px;background:#D10F02;color:#fff;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;
  transform:rotate(-3deg);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:920px;margin:36px auto 0;padding:0}
.facts li{padding:.5rem 1.05rem .5rem .9rem;border-radius:999px;background:rgba(42,223,244,.08);border:1px solid rgba(42,223,244,.4);color:var(--foam);font-weight:600;font-size:.95rem}
.facts li::before{content:"\2713";color:var(--gold);font-weight:800;margin-right:.55rem}
.facts li a{color:var(--aqua-soft);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.facts li a:hover{color:var(--gold-light)}
.facts + .cta-row{margin-top:36px}

/* private guide */
.pg{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:stretch}
.pg-card{padding:34px 32px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(2,33,67,.92),rgba(0,27,55,.92));
  border:1px solid rgba(244,195,44,.34);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.pg-card h3{margin:0 0 14px;font:800 1.25rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.04em;color:var(--gold-light)}
.pg-card h3:not(:first-child){margin-top:30px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:32px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--aqua-soft),var(--ocean));box-shadow:0 0 0 2px var(--gold-deep)}
.ticks strong{color:var(--foam)}
.pg-rates{background:linear-gradient(180deg,rgba(10,166,199,.18),rgba(0,27,55,.94) 70%);border-color:var(--gold)}
.rate{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px dashed rgba(244,195,44,.35)}
.rate strong{flex:none;min-width:100px;font:900 2.7rem/1 var(--font-display);color:var(--gold-light)}
.rate span{color:var(--foam)}
.rate small{display:block;margin-top:3px;color:var(--muted);font-size:.88rem}
.pg-rates .note{margin:18px 0 0;color:var(--muted);font-size:.95rem}

/* meet doug */
.doug{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:56px;align-items:center}
.portrait{
  width:min(320px,80vw);aspect-ratio:1;border-radius:50%;margin:0 auto;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 34% 28%,#0b7f9b,var(--navy-2) 70%);
  box-shadow:0 0 0 6px var(--gold-deep),0 0 0 12px var(--brass),0 24px 50px rgba(0,0,0,.55);
  color:var(--muted);padding:30px;font-weight:600
}
.portrait .flag{width:54px;height:37px;margin:0 auto 12px}
.portrait.has-photo{padding:0;overflow:hidden;display:block}
.portrait.has-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.doug p{color:var(--muted);margin:0 0 16px}
.doug p.lead{color:var(--foam);font-size:1.2rem}
.doug blockquote{margin:26px 0 22px;padding:2px 0 2px 20px;border-left:3px solid var(--gold-deep)}
.doug blockquote p{font:italic 700 1.4rem/1.35 var(--font-script);color:var(--gold-light);margin:0 0 8px}
.doug blockquote cite{font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.creds .cred{margin:0}
.cred{display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;padding:.55rem 1.1rem;border-radius:999px;
  background:rgba(244,195,44,.12);border:1px solid rgba(244,195,44,.55);color:var(--gold-light);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}

/* contact */
.contact-card .porthole{width:68px;height:68px;margin-bottom:18px}
.contact-card .porthole svg{width:32px;height:32px;stroke-width:1.7}
.contact-link{margin:0 0 10px!important;font:800 1.3rem/1.25 var(--font-body)}
.contact-link a{color:var(--gold-light);text-decoration:none;border-bottom:2px solid rgba(244,195,44,.45);overflow-wrap:anywhere}
.contact-link a:hover{color:var(--aqua-soft);border-color:var(--aqua)}
.reserve-note{margin:40px 0 0;text-align:center;color:var(--muted)}

/* partners */
#crew{background:#00122B}
#crew h3.tier{margin:44px 0 20px;text-align:center;color:var(--gold);font:800 .9rem var(--font-body);letter-spacing:.22em;text-transform:uppercase}
#crew .center + h3.tier{margin-top:8px}
.p-row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.p-row.two .pc{flex:0 1 calc((100% - 22px)/2)}
.p-row.shops .pc{flex:0 1 calc((100% - 44px)/3)}
.pc{display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:center}
.pc .plate{background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:26px 24px;min-height:150px}
.pc.big .plate{min-height:190px}
.pc .plink{display:inline-block;line-height:0;text-decoration:none}
.pc .plink img{display:block;height:auto;max-width:100%}
.pc .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:0 0 auto}
.pc .plate{flex:1 1 auto}
.pc .body p{text-wrap:balance}
.p-row.two .pc .body{min-height:162px}
.p-row.shops .pc .body{min-height:168px}
.pc h4{margin:0 0 6px;font:800 1.08rem/1.2 var(--font-display);color:var(--gold-light);text-transform:uppercase;letter-spacing:.03em}
.pc .body p{margin:0;color:var(--muted);font-size:.95rem}
.pc .visit{margin-top:auto;padding-top:14px;color:var(--aqua-soft);font:800 .8rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.pc .visit:hover{color:var(--gold-light)}
.pc .plate p.cap{margin:28px 0 0;color:#3b4a5c;font:600 .86rem/1.4 var(--font-body);text-align:center}
.pc .plate p.tm{margin:8px 0 0;color:#5a6878;font:400 .72rem/1.4 var(--font-body);text-align:center}
.l-naui{width:300px}.l-dan{width:280px}
.l-fgcs,.l-steves,.l-quest{width:104px}.l-fus{width:96px}.l-west{width:200px}
.l-scubapro,.l-shearwater,.l-submersion{width:230px}.l-aqualung{width:220px}.l-henderson{width:190px}.l-sealife{width:170px}
.tm-note{max-width:640px;margin:34px auto 0;text-align:center;color:var(--muted);font:400 .78rem/1.55 var(--font-body);opacity:.85}
@media (max-width:900px){
  .p-row.two .pc{flex-basis:100%}
  .p-row.shops .pc{flex-basis:calc((100% - 22px)/2)}
}
@media (max-width:560px){
  .l-naui{width:min(300px,80vw)}.l-dan{width:min(280px,78vw)}
  .p-row.shops .pc{flex-basis:100%}
}

/* footer */
.site-footer{background:var(--abyss);border-top:3px solid var(--gold-deep);padding:56px 20px 40px;text-align:center;
  box-shadow:inset 0 3px 0 var(--brass)}
.site-footer img{width:128px;margin:0 auto 18px}
.foot-nav{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin:0 0 20px}
.foot-nav a{color:var(--foam);text-decoration:none;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.foot-nav a:hover{color:var(--gold-light)}
.fine{color:var(--muted);font-size:.9rem;margin:0}

/* lining figures for prices (declared late so the font shorthand above can't reset it) */
.step .price strong,.svc .price strong,.bundle-price strong,.rate strong{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"kern" 1}

/* reveal on scroll (only when JS is on) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.12s}.js .reveal.d2{transition-delay:.24s}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid-3,.grid-2,.steps,.pg{grid-template-columns:1fr}
  .step:nth-child(2),.step:nth-child(3){margin-top:0}
  .doug{grid-template-columns:1fr;gap:36px;text-align:center}
  .doug blockquote{border-left:0;border-top:3px solid var(--gold-deep);padding:18px 0 0}
  .section{padding:72px 20px}
}
@media (max-width:1120px){
  .menu-btn{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(0,15,35,.97);border-bottom:1px solid rgba(244,195,44,.3);padding:10px 20px 20px;margin:0}
  .nav a{padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .btn{margin-top:14px;border:0}
  .nav-open .nav{display:flex}
}
@media (max-width:820px){
  .brand img{height:40px}
  .hero{padding:32px 16px 92px}
  .wave{height:70px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rays,.hero-logo,.bubble{animation:none}
  .bubble{display:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .card,.btn{transition:none}
}