:root {
  --navy:#102d4b; --deep:#07182a; --orange:#ff712d; --cyan:#7ce4dc;
  --paper:#f1dfb8; --ink:#f1dfb8; --line:#527285; --display:'Barlow Condensed',Impact,sans-serif; --body:'DM Sans',sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:var(--navy); color:var(--paper); font-family:var(--body); }
body:after { content:''; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.065; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--display); font-weight:900; }
a:focus-visible,button:focus-visible { outline:3px dashed var(--orange); outline-offset:7px; }
.port-alert { display:flex; justify-content:space-between; gap:15px; background:var(--orange); color:var(--deep); padding:8px 4%; font:700 11px var(--display); letter-spacing:1.6px; border-bottom:3px solid var(--deep); }
.header { display:flex; justify-content:space-between; align-items:center; padding:13px 4%; gap:24px; background:#11344a; border-bottom:2px solid #7ce4dc55; }
.brand { display:flex; align-items:center; gap:8px; font:900 27px/.95 var(--display); }
.brand>img { width:53px; height:53px; object-fit:contain; transform:rotate(-12deg); }
.brand small { display:block; font:600 9px var(--display); letter-spacing:1.4px; color:var(--cyan); margin-top:8px; }
nav { display:flex; gap:27px; font:700 14px var(--display); letter-spacing:.7px; }
nav a { padding:8px 0; }
nav a:hover,nav a.active { color:var(--cyan); text-decoration:underline; text-underline-offset:7px; text-decoration-style:wavy; }
.button { display:flex; align-items:center; gap:11px; min-height:51px; padding:10px 16px; background:var(--deep); color:var(--paper); border:2px solid var(--deep); font:800 18px var(--display); letter-spacing:.5px; box-shadow:3px 3px 0 #07182a; transition:transform .18s,box-shadow .18s; }
.button:hover { transform:translate(-2px,-3px) rotate(-1deg); box-shadow:6px 6px 0 #07182a; }
.button>img { width:28px; height:28px; object-fit:contain; }
.button>span:last-child { margin-left:auto; }
.primary,.header-buy { background:var(--orange); color:var(--deep); }
.header-buy { min-width:171px; transform:rotate(2deg); }
.x-icon { filter:invert(1); }
.hero { position:relative; height:970px; isolation:isolate; overflow:hidden; border-bottom:5px solid var(--deep); }
.harbor { position:absolute; inset:0; z-index:-2; background:linear-gradient(#0b2b4b33,#0b2b4b11 65%,#0b2843aa),url('assets/harbor-background.png') center 48%/cover; }
.harbor:after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 29px,#adeff00b 30px,transparent 32px); }
.hero-title { position:absolute; top:28px; left:3%; right:3%; text-align:center; }
.hero-title>p { display:inline-block; background:var(--deep); padding:7px 20px; color:var(--cyan); font:700 13px var(--display); letter-spacing:3px; transform:rotate(-1deg); }
h1 { font-size:clamp(90px,16.8vw,280px); line-height:.95; letter-spacing:-.015em; color:var(--orange); text-shadow:5px 5px 0 #091e34,-2px -2px 0 var(--paper); }
.ticket { position:absolute; z-index:4; width:300px; left:5.5%; top:315px; padding:25px 23px 17px; background:var(--paper); color:var(--deep); transform:rotate(-5deg); border:2px solid var(--deep); box-shadow:8px 9px 0 #06182999; }
.ticket:after { content:''; position:absolute; bottom:-9px; height:12px; left:-2px; right:-2px; background:linear-gradient(135deg,var(--paper) 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,var(--paper) 25%,transparent 25%) -6px 0/12px 12px; }
.ticket-pin { width:19px; height:19px; border:4px solid #f08b43; border-radius:50%; background:#a43713; position:absolute; left:48%; top:-9px; box-shadow:2px 3px 0 #0005; }
.eyebrow { font:700 11px var(--display); letter-spacing:1.8px; }
.ticket .eyebrow { font-size:9px; padding-bottom:12px; border-bottom:1px dashed #09233e66; }
.ticket h2 { font-size:37px; line-height:.98; margin:15px 0; }
.ticket>p:not(.eyebrow) { font-size:13px; line-height:1.6; }
.hero-actions { display:grid; gap:9px; margin:21px 0 18px; }
.hero-actions .button { font-size:16px; min-height:46px; padding:8px 11px; }
.contract-button { background:#e9cda1; color:var(--deep); font-size:13px!important; }
.hero-actions .button img { width:25px; height:25px; }
.ticket-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px dashed #09233e66; padding-top:12px; gap:10px; font:700 9px var(--display); letter-spacing:.8px; }
.barcode { width:60px; height:20px; background:repeating-linear-gradient(90deg,var(--deep) 0 2px,transparent 2px 4px,var(--deep) 4px 5px,transparent 5px 8px); }
.specimen { border:0; background:none; position:absolute; z-index:3; left:50%; bottom:35px; transform:translateX(-50%) rotate(3deg); height:730px; width:730px; padding:0; filter:drop-shadow(8px 12px 0 #06162a80); transition:transform .25s; }
.specimen:hover { transform:translateX(-50%) rotate(-2deg); }
.specimen>img { height:100%; width:100%; object-fit:contain; }
.speech { position:absolute; z-index:5; top:290px; left:63%; background:var(--cyan); color:var(--deep); border:3px solid var(--deep); padding:18px 20px; font:800 25px/1 var(--display); transform:rotate(7deg); box-shadow:4px 4px 0 var(--deep); max-width:270px; }
.speech:after { content:''; position:absolute; bottom:-19px; left:30px; border:10px solid transparent; border-top-color:var(--deep); border-left-color:var(--deep); }
.pants-stamp { position:absolute; z-index:4; top:435px; right:6%; background:var(--orange); color:var(--deep); width:152px; height:152px; border-radius:50%; border:3px solid var(--deep); outline:3px dashed var(--orange); outline-offset:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(13deg); box-shadow:5px 6px 0 #0a2446; }
.pants-stamp span { font:800 13px var(--display); letter-spacing:1.5px; }
.pants-stamp strong { font:900 67px/.9 var(--display); }
.warning-note { position:absolute; z-index:4; right:5%; top:670px; background:var(--cyan); border:3px solid var(--deep); padding:14px 22px; color:var(--deep); transform:rotate(7deg); box-shadow:6px 6px 0 var(--deep); }
.warning-note>span { font:800 13px var(--display); letter-spacing:2px; display:block; padding-bottom:8px; border-bottom:2px solid var(--deep); }
.warning-note strong { font:900 40px/.9 var(--display); display:block; margin:12px 0; }
.warning-note small { font-size:11px; font-weight:700; }
.specimen-label { position:absolute; bottom:33px; left:50%; transform:translateX(-50%) rotate(-3deg); z-index:5; font:700 12px var(--display); letter-spacing:1px; background:var(--paper); color:var(--deep); padding:6px 12px; white-space:nowrap; }
.hero-bottom { position:absolute; bottom:0; left:0; right:0; background:#07182adc; color:var(--cyan); display:flex; justify-content:space-between; padding:9px 4%; font:600 10px var(--display); letter-spacing:2px; }
.tape-wrap { padding:calc(2vw + 12px) 0; overflow:hidden; background:#09223c; }
.dock-strip { display:flex; justify-content:space-around; align-items:center; gap:25px; width:104%; margin-left:-2%; transform:rotate(-2deg); background:var(--orange); color:var(--deep); border-block:3px solid var(--deep); padding:16px 3%; font:900 30px var(--display); letter-spacing:1px; }
.dock-strip b { font-size:35px; }
.section { padding:75px 6%; }
.roadmap { background:linear-gradient(#123d62e8,#102d4bf5),url('assets/harbor-background.png') center/cover; border-bottom:5px solid var(--deep); }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:65px; }
.section-heading .eyebrow { color:var(--cyan); margin-bottom:15px; }
.section-heading h2 { font-size:clamp(65px,7.8vw,118px); line-height:.9; text-shadow:4px 4px 0 var(--deep); }
.section-heading h2 span { color:var(--orange); }
.hand-note { color:var(--cyan); transform:rotate(8deg); font:italic 26px/.95 Georgia,serif; margin-right:20px; }
.notice-board { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; padding:12px 0 32px; }
.board-line { position:absolute; left:0; right:0; top:0; height:5px; background:#9a7256; transform:rotate(1deg); box-shadow:0 4px 0 #06182b88; }
.route-stop { position:relative; color:var(--deep); background:var(--paper); padding:25px 25px 80px; border:2px solid var(--deep); box-shadow:8px 10px 0 #06182b99; transform:rotate(-3deg); }
.paper-two { transform:rotate(3deg) translateY(22px); background:var(--cyan); }
.paper-three { transform:rotate(-2deg); background:#ed8c4b; }
.paper-tape { position:absolute; width:90px; height:30px; background:#d9c9a19e; top:-17px; left:calc(50% - 45px); transform:rotate(-8deg); border-inline:2px dashed #f8e4b366; }
.route-top { display:flex; justify-content:space-between; gap:10px; font:700 10px var(--display); letter-spacing:1px; border-bottom:1px dashed #102d4b77; padding-bottom:15px; }
.route-number { font:900 100px/.95 var(--display); display:block; opacity:.22; margin:20px 0 4px; }
.route-stop h3 { font-size:38px; line-height:.95; margin-bottom:20px; }
.route-stop p { font-size:13px; line-height:1.8; }
.route-stop ul { list-style:none; padding:10px 0 0; font-size:12px; line-height:1.7; }
.route-stop li { display:flex; gap:8px; margin:9px 0; }
.route-stop li:before { content:'↳'; font-weight:700; }
.paper-stamp { position:absolute; bottom:25px; right:20px; font:800 20px var(--display); border:3px double currentColor; padding:5px 10px; transform:rotate(-9deg); color:#a03f26; }
.paper-two .paper-stamp { color:#125459; }
.paper-three .paper-stamp { color:#673221; }
.roadmap-note { font-size:11px; margin-top:40px; color:#a4c9d7; text-align:center; }
.market { background:var(--cyan); color:var(--deep); position:relative; }
.market .section-heading { margin-bottom:35px; position:relative; }
.market .eyebrow { color:#1b5461; }
.market .section-heading h2 { font-size:clamp(60px,6.8vw,100px); text-shadow:3px 3px 0 #fff5; }
.market .section-heading h2 span { color:#bb4521; }
.market-prawn { width:140px; position:absolute; right:230px; top:0; transform:rotate(24deg); }
.market-note { font:italic 23px/1.1 Georgia,serif; transform:rotate(-7deg); margin-right:15px; }
.terminal { background:var(--deep); border:4px solid var(--deep); box-shadow:10px 11px 0 #155567; color:var(--paper); }
.terminal-bar { display:flex; justify-content:space-between; align-items:center; gap:15px; border-bottom:2px solid #355367; padding:15px 20px; }
.terminal-title { display:flex; align-items:center; gap:12px; }
.terminal-title>img { width:28px; height:28px; }
.terminal-title strong { font:800 25px var(--display); }
.terminal-tag { color:var(--cyan); font:600 10px var(--display); letter-spacing:1px; margin-left:10px; }
.terminal-status { display:flex; align-items:center; gap:8px; font:700 11px var(--display); letter-spacing:1px; white-space:nowrap; }
.signal { width:7px; height:7px; background:var(--orange); border-radius:50%; display:inline-block; }
.chart-stage { height:500px; background:linear-gradient(#7ce4dc09 1px,transparent 1px),linear-gradient(90deg,#7ce4dc09 1px,transparent 1px); background-size:55px 55px; }
.chart-placeholder { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; }
.waiting-prawn { width:95px; height:95px; object-fit:contain; transform:rotate(-20deg); animation:float 3s ease-in-out infinite; margin-bottom:15px; }
.chart-placeholder .eyebrow { color:var(--cyan); font-size:10px; margin:10px 0 13px; }
.chart-placeholder h3 { font-size:44px; }
.chart-placeholder>p:not(.eyebrow) { font-size:13px; color:#9bb8c5; margin:12px 0 23px; }
.chart-placeholder .button { font-size:16px; }
.terminal-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:2px solid #355367; padding:15px 20px; font:600 10px var(--display); letter-spacing:1px; }
.terminal-bottom>span { color:#91adbd; }
.text-link { display:flex; align-items:center; gap:8px; color:var(--cyan); }
.text-link>img { width:20px; height:20px; }
iframe { width:100%; height:100%; border:0; }
[hidden] { display:none!important; }
.market-footnote { text-align:center; margin-top:30px; font:700 11px var(--display); letter-spacing:1.8px; }
footer { background:var(--deep); padding:35px 5% 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:25px; }
footer>p { font-size:11px; line-height:1.9; color:#a1bdc9; }
.back-top { font:700 13px var(--display); color:var(--orange); border:1px solid #42566c; padding:12px; transform:rotate(-3deg); }
.footer-bottom { width:100%; display:flex; justify-content:space-between; gap:15px; border-top:1px dashed #355367; padding-top:18px; font:600 10px var(--display); letter-spacing:1px; color:#6c94aa; }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px) rotate(-1deg); max-width:calc(100% - 36px); background:var(--paper); color:var(--deep); border:3px solid var(--deep); box-shadow:5px 5px 0 var(--orange); padding:16px 24px; font-size:13px; text-align:center; z-index:40; opacity:0; pointer-events:none; transition:.2s; }
.toast.visible { opacity:1; transform:translate(-50%,0) rotate(-1deg); }
.skip-link { position:fixed; top:-100px; left:20px; padding:15px; background:var(--orange); color:var(--deep); z-index:50; }
.skip-link:focus { top:10px; }
@keyframes float { 50% { transform:translateY(-10px) rotate(15deg); } }
@media(min-width:1700px) {
  .hero { height:1100px; }
  .hero-title { left:calc(50% - 850px); right:calc(50% - 850px); }
  h1 { font-size:280px; }
  .specimen { height:820px; width:820px; }
  .ticket { left:calc(50% - 690px); top:360px; width:340px; }
  .speech { left:calc(50% + 200px); top:350px; }
  .pants-stamp { right:calc(50% - 650px); top:530px; }
  .warning-note { right:calc(50% - 650px); top:760px; }
  .section { padding-inline:max(6%,calc((100vw - 1500px)/2)); }
}
@media(max-width:1050px) {
  .header { gap:15px; padding-inline:3%; }
  .brand { font-size:22px; }
  nav { gap:15px; font-size:12px; }
  .header-buy { min-width:145px; font-size:16px; }
  .ticket { left:4%; width:260px; padding:22px 18px 17px; top:290px; }
  .ticket h2 { font-size:32px; }
  .hero { height:930px; }
  .specimen { left:55%; width:660px; height:660px; }
  .speech { top:240px; left:auto; right:5%; max-width:210px; font-size:23px; }
  .pants-stamp { width:118px; height:118px; right:4%; top:400px; }
  .pants-stamp strong { font-size:51px; }
  .pants-stamp span { font-size:10px; }
  .warning-note { right:4%; top:620px; padding:12px 16px; }
  .warning-note strong { font-size:33px; }
  .dock-strip { font-size:23px; }
  .notice-board { gap:20px; }
  .route-stop { padding:22px 18px 80px; }
  .route-stop h3 { font-size:31px; }
  .route-top { font-size:9px; letter-spacing:.4px; }
  .market-prawn { width:100px; right:180px; top:10px; }
  .market-note { font-size:20px; }
}
@media(max-width:700px) {
  .port-alert { justify-content:center; font-size:10px; padding:7px 10px; }
  .port-alert>span:first-child,.port-alert>span:last-child { display:none; }
  .header { flex-wrap:wrap; padding:10px 5% 0; gap:10px; }
  .brand { font-size:23px; }
  .brand>img { width:42px; height:42px; }
  .brand small { font-size:7px; letter-spacing:1px; margin-top:6px; }
  .header-buy { min-width:122px; font-size:14px; padding:6px 8px; min-height:40px; gap:6px; }
  .header-buy>img { width:23px; height:23px; }
  nav { width:100%; order:3; justify-content:space-between; border-top:1px dashed #7ce4dc55; font-size:11px; gap:8px; padding:5px 0; }
  .hero { height:1330px; }
  .hero-title { top:23px; left:3%; right:3%; }
  .hero-title>p { font-size:8px; letter-spacing:1.1px; padding:6px 9px; }
  h1 { font-size:16.2vw; line-height:1.2; text-shadow:3px 3px 0 var(--deep),-1px -1px 0 var(--paper); }
  .harbor { background-size:auto 850px; background-position:50% top; background-repeat:no-repeat; background-color:var(--navy); }
  .specimen { top:150px; bottom:auto; left:46%; height:540px; width:540px; max-width:none; }
  .speech { top:124px; right:8%; max-width:200px; font-size:20px; padding:11px 12px; }
  .pants-stamp { top:350px; right:6%; width:91px; height:91px; outline-offset:3px; }
  .pants-stamp strong { font-size:40px; }
  .pants-stamp span { font-size:8px; letter-spacing:1px; }
  .warning-note { top:540px; right:8%; padding:10px 12px; transform:rotate(8deg); }
  .warning-note>span { font-size:10px; padding-bottom:6px; }
  .warning-note strong { font-size:26px; margin:8px 0; }
  .warning-note small { font-size:9px; }
  .specimen-label { top:686px; bottom:auto; font-size:10px; }
  .ticket { top:750px; width:80%; left:10%; padding:22px 21px 14px; transform:rotate(-4deg); }
  .ticket h2 { font-size:34px; }
  .ticket>p:not(.eyebrow) { font-size:12px; }
  .ticket .eyebrow { font-size:8px; letter-spacing:1px; }
  .hero-actions { margin:15px 0; gap:8px; }
  .hero-actions .button { min-height:43px; font-size:15px; }
  .hero-bottom { font-size:8px; letter-spacing:.8px; padding:10px 4%; }
  .hero-bottom>span:nth-child(2) { display:none; }
  .tape-wrap { padding:22px 0; }
  .dock-strip { font-size:17px; gap:12px; padding:12px 6%; }
  .dock-strip>*:nth-child(n+4) { display:none; }
  .section { padding:50px 7%; }
  .section-heading { display:block; margin-bottom:55px; }
  .section-heading .eyebrow { font-size:9px; letter-spacing:1px; }
  .section-heading h2 { font-size:64px; }
  .hand-note { font-size:20px; margin:20px 0 0; text-align:right; }
  .notice-board { grid-template-columns:1fr; gap:50px; padding-inline:5px; }
  .route-stop { padding:25px 25px 85px; }
  .paper-two { transform:rotate(3deg); }
  .route-number { font-size:90px; margin-top:15px; }
  .route-stop h3 { font-size:42px; }
  .route-stop p { font-size:13px; }
  .route-top { font-size:10px; }
  .route-stop ul { margin-bottom:5px; }
  .paper-stamp { bottom:23px; }
  .roadmap-note { font-size:10px; line-height:1.8; margin-top:20px; }
  .market .section-heading { margin-bottom:28px; }
  .market .section-heading h2 { font-size:14.6vw; }
  .market-note { font-size:18px; margin:23px 0 0; }
  .market-prawn { top:auto; bottom:-12px; right:5px; width:100px; }
  .terminal { box-shadow:6px 7px 0 #155567; }
  .terminal-bar { padding:12px; flex-wrap:wrap; gap:10px; }
  .terminal-title { gap:9px; }
  .terminal-title strong { font-size:23px; }
  .terminal-tag { display:none; }
  .terminal-status { font-size:9px; letter-spacing:.4px; }
  .terminal-title>img { width:23px; height:23px; }
  .chart-stage { height:450px; }
  .chart-placeholder { padding:20px 13px; }
  .chart-placeholder h3 { font-size:33px; line-height:1; }
  .chart-placeholder .eyebrow { font-size:9px; letter-spacing:1px; line-height:1.6; }
  .chart-placeholder>p:not(.eyebrow) { font-size:12px; line-height:1.7; }
  .chart-placeholder .button { font-size:15px; }
  .terminal-bottom { padding:12px; flex-wrap:wrap; font-size:9px; line-height:1.5; gap:10px; }
  .market-footnote { font-size:9px; line-height:1.6; letter-spacing:1px; }
  footer { padding:30px 7% 20px; gap:23px; }
  footer>p { font-size:10px; }
  .back-top { font-size:11px; }
  .footer-bottom { font-size:8px; flex-wrap:wrap; line-height:1.5; }
  .footer-bottom>span:nth-child(2) { display:none; }
}
@media(max-width:365px) { .header .brand { font-size:20px; }.brand>img { width:34px; height:34px; }.header-buy { min-width:112px; font-size:13px; }.ticket { width:84%; left:8%; }.route-stop { padding-inline:19px; }.route-stop h3 { font-size:36px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }

/* Keep hidden states authoritative after every responsive rule. */
[hidden] { display: none !important; }