:root{color-scheme:light;--ink:#082940;--cream:#eef5ef;--dive:0;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;background:#073449;color:var(--ink)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
button{border:0;background:none}
a{color:inherit;text-decoration:none}
.journey{height:470vh;height:470svh}
.scene{position:fixed;inset:0;overflow:hidden;isolation:isolate;transition:color .8s ease}
.seascape{position:absolute;inset:0;z-index:-2;background:#0f5164 url('assets/ocean-poster.jpg') center bottom/cover no-repeat}
.ocean-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(1.005)}
.water-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,32,49,calc(var(--dive)*.34)),transparent 73%),linear-gradient(0deg,rgba(0,20,35,.42),transparent 23%);pointer-events:none}
.announcement{height:30px;display:flex;justify-content:center;align-items:center;gap:12px;background:rgba(29,78,112,.23);color:rgba(247,251,255,.94);font-size:12px;letter-spacing:.025em;backdrop-filter:blur(3px)}
.announcement span{font-size:16px}
.header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4.1%;position:relative}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand svg{width:54px;height:26px}
.brand span{font-size:14px;font-weight:600;letter-spacing:.26em}
.navigation{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:34px;align-items:center}
.navigation button{padding:10px 0;font-size:14px;position:relative}
.navigation button::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.navigation button:hover::after{transform:scaleX(1)}
.explore-now{display:flex;align-items:center;gap:14px;border:1px solid currentColor;border-radius:99px;padding:9px 19px;font-size:14px;transition:background .2s}
.explore-now:hover{background:rgba(255,255,255,.18)}
.hero{position:absolute;left:6.25%;top:22%;max-width:640px}
.eyebrow{font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.3em;margin:0 0 20px}
h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(4.7rem,6.7vw,7.5rem);line-height:.85;letter-spacing:-.065em;margin:0 0 22px -5px}
.intro{font-size:clamp(16px,1.3vw,20px);line-height:1.4;letter-spacing:-.015em;opacity:.78;margin:0 0 23px}
.hero-actions{display:flex;align-items:center;gap:26px}
.primary-button{display:flex;gap:23px;align-items:center;background:#062b49;color:#f2f6f6;padding:13px 23px;font-size:14px;border-radius:50px;box-shadow:0 3px 12px #062b490a;transition:background .25s,transform .25s}
.primary-button:hover{background:#124661;transform:translateY(-2px)}
.primary-button span{font-size:19px;line-height:16px;transition:transform .25s}
.primary-button:hover span{transform:translateX(3px)}
.film-button{display:flex;align-items:center;gap:12px;font-size:14px;padding:0}
.play-icon{height:38px;width:38px;border:1px solid currentColor;display:grid;place-items:center;border-radius:50%;font-size:11px;padding-left:2px;transition:background .25s}
.film-button:hover .play-icon{background:#ffffff35}
.scene-footer{position:absolute;bottom:4.7%;left:3.2%;right:3.2%;display:flex;align-items:center;justify-content:space-between;color:#f3f8f6}
.motion-control{display:flex;align-items:center;gap:16px;padding:6px 0;font-size:12px;letter-spacing:.19em}
.motion-icon{display:grid;place-items:center;width:33px;height:33px;border:1px solid #ffffff8a;border-radius:50%;font-size:15px;letter-spacing:0}
.depth{position:absolute;left:50%;transform:translateX(-50%);text-align:center;font-size:10px;letter-spacing:.22em;opacity:.76}
.depth-track{width:110px;height:1px;background:#ffffff4a;margin:12px auto 0}
.depth-track span{display:block;height:1px;transform:scaleX(var(--dive));background:#fff;transform-origin:left}
.scroll-prompt{display:flex;align-items:center;gap:14px;padding:12px 0;font-size:11px;letter-spacing:.17em}
.scroll-arrow{font-size:19px;font-weight:400;transition:transform .35s}
.scroll-prompt:hover .scroll-arrow{transform:translateY(4px)}
body.submerged .scene{color:#eff7f2}
body.submerged .primary-button{background:#eef5ef;color:#093648}
body.submerged .primary-button:hover{background:#fff}
body.submerged .intro{opacity:.88}
body.submerged .hero{text-shadow:0 1px 20px #002a4530}
.media-notice{position:absolute;bottom:110px;left:6.25%;right:6.25%;font-size:14px;color:white}
.media-notice button{text-decoration:underline}
dialog{border:1px solid #ffffff30;max-height:calc(100svh - 48px);color:#eaf3ef;background:#092d3eea;box-shadow:0 20px 100px #00172455;backdrop-filter:blur(25px)}
dialog::backdrop{background:#001e328c;backdrop-filter:blur(8px)}
dialog[open]{animation:dialog-in .3s ease-out}
.reading-dialog{width:min(600px,calc(100% - 40px));padding:60px;border-radius:3px}
.close-dialog{position:absolute;top:15px;right:18px;width:40px;height:40px;font-size:30px;font-weight:300;line-height:1;border-radius:50%}
.close-dialog:hover{background:#ffffff16}
dialog h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,4vw,50px);line-height:1.04;font-weight:400;letter-spacing:-.045em;margin:20px 0 27px}
.reading-dialog p:not(.eyebrow){font-size:16px;line-height:1.7;color:#d0dee0}
.dialog-link{padding:0 0 8px;border-bottom:1px solid #eaf3ef80;margin-top:20px;font-size:14px;display:flex;gap:32px;align-items:center}
.journal-entry{border-top:1px solid #ffffff2a;padding-top:22px;margin-top:25px}
.journal-entry>span{font-size:12px;letter-spacing:.13em;color:#aec9cf}
.journal-entry h3{font-family:Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.025em;margin:12px 0 8px}
.film-dialog{padding:0;width:min(1000px,calc(100% - 40px));border-radius:4px}
.film-heading{display:flex;align-items:center;padding:18px 24px}
.film-heading h2{font-size:26px;margin:0}
.film-heading .close-dialog{top:13px}
.film-dialog video{display:block;width:100%;max-height:75svh;background:#052b3b}
.no-script{position:fixed;bottom:90px;left:6.25%;color:white;font-size:14px}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){.hero{top:24%}}
@media(max-width:760px){
  .announcement{height:27px;font-size:11px}
  .header{height:76px;padding:0 6%}
  .brand{gap:10px}.brand svg{width:39px}.brand span{font-size:12px}
  .navigation{position:fixed;left:6%;top:108px;transform:none;gap:25px}
  .navigation button{font-size:13px}
  .explore-now{font-size:12px;padding:8px 13px;gap:8px}
  .hero{top:26%;left:7%;right:6%;max-width:none}
  .eyebrow{font-size:10px;letter-spacing:.25em;margin-bottom:17px}
  h1{font-size:clamp(3.7rem,12.9vw,5.3rem);line-height:.9;margin:0 0 21px -3px;letter-spacing:-.06em}
  .intro{font-size:16px;line-height:1.5;margin-bottom:25px}
  .hero-actions{gap:18px}.primary-button{font-size:12px;padding:12px 17px;gap:13px}
  .film-button{font-size:12px;gap:9px}.play-icon{height:32px;width:32px;font-size:10px}
  .scene-footer{left:7%;right:7%;bottom:4%}.motion-control{font-size:10px;letter-spacing:.13em;gap:9px}
  .motion-icon{height:30px;width:30px}.scroll-prompt{font-size:9px;letter-spacing:.12em;gap:9px}
  .depth{bottom:62px;white-space:nowrap;font-size:9px;opacity:.72}.depth-track{margin-top:9px;width:75px}
  .reading-dialog{padding:45px 28px 35px}.reading-dialog .eyebrow{font-size:11px}
}
@media(max-width:370px){.hero-actions{gap:12px}.primary-button{padding:11px 13px}.film-button{gap:7px}.brand span{letter-spacing:.19em}.explore-now{gap:6px}.hero{left:6%}}
@media(max-height:540px) and (min-width:761px){.header{height:64px}.hero{top:26%}h1{font-size:54px;margin-bottom:12px}.eyebrow{margin-bottom:12px}.intro{font-size:14px;margin-bottom:14px}.scene-footer{bottom:3%}.primary-button{padding:10px 18px}}
@media(max-height:600px) and (max-width:760px){.navigation{top:83px}.hero{top:28%}h1{font-size:48px}.hero .eyebrow{display:none}.intro{margin-bottom:14px}.depth{display:none}.scene-footer{bottom:2%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}