:root { --navy:#041b2c; --deep:#02131f; --ink:#0a2233; --accent:#f32837; --offwhite:#f3f0e8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--offwhite); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.site-header { position:absolute; z-index:20; inset:0 0 auto; height:96px; padding:0 5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:#fff; border-bottom:1px solid #ffffff2e; }
.brand { display:flex; align-items:center; width:max-content; padding:6px 10px; border-radius:2px; background:#fffffff2; box-shadow:0 8px 26px #02131f33; }
.brand-logo { display:block; width:230px; height:62px; object-fit:contain; }
.site-header nav { display:flex; gap:38px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.site-header nav a { opacity:.78; }
.site-header nav a:hover { opacity:1; }
.contact-link { justify-self:end; padding-bottom:5px; border-bottom:1px solid var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.contact-link span { color:var(--accent); margin-left:8px; }

.hero { min-height:790px; height:100vh; display:grid; grid-template-columns:42% 58%; background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.hero-copy { position:relative; z-index:2; align-self:center; padding:118px 6vw 60px; }
.kicker,.section-label { font-size:11px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.kicker { color:#b6c1c8; display:flex; gap:12px; align-items:center; }
.kicker span { width:28px; height:2px; background:var(--accent); }
.hero h1 { font-size:clamp(70px,8.3vw,140px); line-height:.78; letter-spacing:-.065em; margin:62px 0 48px; white-space:nowrap; }
.hero h1 em,.closing h2 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.hero-lede { max-width:475px; font-size:clamp(17px,1.4vw,22px); line-height:1.55; color:#d7dee2; }
.scroll-cue { position:absolute; bottom:44px; left:6vw; display:flex; gap:13px; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:.15em; }
.scroll-cue span { display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff5c; border-radius:50%; color:var(--accent); }
.hero-visual { position:relative; min-width:0; overflow:hidden; background:#0b283b; }
.hero-visual:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--navy) 0%,#041b2c99 9%,transparent 38%),linear-gradient(0deg,#02131f8a,transparent 45%); }
.hero-visual img { width:100%; height:100%; object-fit:cover; object-position:54% center; filter:saturate(.78) contrast(1.05); }
.hero-grid,.scan-lines { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(#f3283726 1px,transparent 1px),linear-gradient(90deg,#f3283726 1px,transparent 1px); background-size:64px 64px; }
.image-credit { position:absolute; z-index:2; right:32px; bottom:26px; margin:0; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.hero-fact { position:absolute; z-index:3; top:22%; right:5%; border-left:2px solid var(--accent); padding:5px 0 5px 14px; display:grid; }
.hero-fact strong { font-size:30px; line-height:1; }
.hero-fact span { font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-top:5px; }

.intro { padding:130px 8vw 140px; display:grid; grid-template-columns:1.15fr .85fr; gap:9vw; }
.section-label { color:#50616d; margin:0 0 40px; }
.intro h2,.explorer h2,.impact h2,.closing h2 { font-size:clamp(44px,5.2vw,78px); line-height:.98; letter-spacing:-.05em; margin:0; }
.intro-copy { padding-top:55px; }
.intro-copy p { font-size:18px; line-height:1.65; margin:0 0 26px; }

.explorer { background:var(--deep); color:#fff; padding:120px 5vw 95px; overflow:hidden; }
.explorer-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; margin:0 auto 70px; max-width:1500px; }
.section-label.light { color:var(--accent); }
.explorer-heading > p { justify-self:end; color:#8fa2ae; max-width:310px; line-height:1.6; font-size:14px; }
.explorer-stage { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(360px,.65fr); min-height:650px; border:1px solid #ffffff1f; }
.vessel-canvas { position:relative; overflow:hidden; min-height:620px; background:#0b283b; }
.vessel-canvas:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#02131fb3,transparent 44%),linear-gradient(90deg,transparent 70%,#02131f66); }
.vessel-canvas > img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.65) brightness(.76) contrast(1.08); transform:scale(1.04); }
.scan-lines { z-index:1; opacity:.35; background-size:58px 58px; }
.view-label { position:absolute; z-index:4; left:22px; bottom:18px; color:#a8b5bd; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.view-label span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.hotspot { position:absolute; z-index:5; width:82px; height:82px; padding:0; border:0; background:transparent; cursor:pointer; color:#fff; }
.hotspot-stability { left:25%; top:31%; }
.hotspot-esd { left:50%; top:28%; }
.hotspot-fibre { left:70%; top:32%; }
.hotspot-ring,.hotspot-dot { position:absolute; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.hotspot-ring { width:64px; height:64px; border:1px solid #f32837a6; transition:transform .25s,background .25s; }
.hotspot-dot { width:12px; height:12px; background:var(--accent); box-shadow:0 0 0 5px #f3283733,0 0 24px var(--accent); }
.hotspot-label { position:absolute; top:4px; right:0; font-size:10px; color:var(--accent); font-weight:700; }
.hotspot:hover .hotspot-ring,.hotspot.is-active .hotspot-ring { transform:translate(-50%,-50%) scale(1.2); background:#f3283721; }
.hotspot.is-active .hotspot-ring:after { content:''; position:absolute; inset:8px; border:1px dashed var(--accent); border-radius:50%; animation:spin 12s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.system-panel { padding:44px 42px 36px; display:flex; flex-direction:column; background:#061a29; }
.panel-topline { display:flex; align-items:center; gap:15px; }
.panel-topline > span { display:grid; place-items:center; border:1px solid var(--accent); color:var(--accent); width:34px; height:34px; border-radius:50%; font-size:10px; }
.panel-topline p { margin:0; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9aabb5; }
.system-panel h3 { margin:44px 0 20px; font-size:clamp(28px,2.4vw,43px); line-height:1.05; letter-spacing:-.04em; }
.system-summary { font-size:14px; color:#9dafb9; line-height:1.6; margin:0; }
.system-stat { display:grid; margin:38px 0 26px; padding:26px 0; border-block:1px solid #ffffff1f; }
.system-stat strong { font-size:46px; color:var(--accent); line-height:1; letter-spacing:-.05em; }
.system-stat span { margin-top:8px; color:#879ba6; text-transform:uppercase; letter-spacing:.15em; font-size:9px; }
.system-panel ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
.system-panel li { font-size:11px; line-height:1.35; color:#cad4d9; display:flex; gap:8px; }
.system-panel li span { color:var(--accent); }
.system-tabs { display:flex; gap:8px; margin-top:auto; padding-top:30px; }
.system-tabs button { width:38px; height:38px; color:#708590; border:1px solid #ffffff26; background:transparent; cursor:pointer; }
.system-tabs button.is-active { border-color:var(--accent); background:var(--accent); color:var(--deep); }

.impact { padding:130px 8vw; display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; background:#e9e6de; }
.impact-copy > p:not(.section-label) { max-width:520px; font-size:17px; line-height:1.65; margin:38px 0; }
.impact-copy > a { font-size:11px; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:6px; }
.impact-copy > a span { color:var(--accent); margin-left:8px; }
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #bdc4c5; border-left:1px solid #bdc4c5; }
.metrics-grid div { min-height:210px; padding:34px; border-right:1px solid #bdc4c5; border-bottom:1px solid #bdc4c5; display:flex; flex-direction:column; justify-content:space-between; }
.metrics-grid strong { font-size:clamp(48px,5vw,76px); line-height:1; letter-spacing:-.06em; }
.metrics-grid span { font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:#586b76; }
.closing { min-height:650px; background:var(--navy); color:#fff; display:grid; place-items:center; align-content:center; text-align:center; padding:90px 20px; }
.closing > p { text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:#8296a2; margin:0 0 45px; }
.closing h2 { font-size:clamp(62px,8vw,118px); }
.closing a { margin-top:55px; display:inline-block; padding:18px 27px; background:var(--accent); color:var(--deep); text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:700; }
.closing a span { margin-left:12px; }
footer { min-height:78px; padding:0 5vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; background:var(--deep); color:#788d99; font-size:9px; text-transform:uppercase; letter-spacing:.13em; }
footer span:nth-child(2) { text-align:center; }
footer a { justify-self:end; color:#aab7be; }

@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { height:auto; min-height:950px; grid-template-columns:1fr; grid-template-rows:minmax(460px,55vh) 420px; }
  .hero-copy { grid-row:1; padding-top:145px; }
  .hero h1 { white-space:normal; font-size:clamp(64px,15vw,105px); margin:48px 0 32px; }
  .hero-visual { grid-row:2; }
  .scroll-cue { display:none; }
  .intro,.impact { grid-template-columns:1fr; gap:45px; padding:90px 7vw; }
  .intro-copy { padding:0; }
  .explorer { padding:90px 4vw 70px; }
  .explorer-heading { grid-template-columns:1fr; gap:25px; }
  .explorer-heading > p { justify-self:start; }
  .explorer-stage { grid-template-columns:1fr; }
  .vessel-canvas { min-height:470px; }
  .system-panel { min-height:560px; }
}

@media (max-width:560px) {
  .site-header { height:82px; padding:0 20px; }
  .brand { padding:4px 7px; }
  .brand-logo { width:150px; height:50px; }
  .contact-link { display:none; }
  .hero { min-height:830px; grid-template-rows:460px 370px; }
  .hero-copy { padding:112px 24px 30px; }
  .hero h1 { font-size:62px; }
  .hero-lede { font-size:15px; }
  .hero-fact { top:12%; }
  .intro h2,.explorer h2,.impact h2 { font-size:43px; }
  .explorer-heading { margin-bottom:45px; }
  .vessel-canvas { min-height:380px; }
  .hotspot { transform:scale(.82); }
  .system-panel { padding:36px 25px 30px; }
  .system-panel ul { grid-template-columns:1fr; }
  .metrics-grid div { min-height:155px; padding:22px 18px; }
  .metrics-grid strong { font-size:42px; }
  footer { grid-template-columns:1fr 1fr; padding:20px; gap:10px; }
  footer span:nth-child(2) { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hotspot.is-active .hotspot-ring:after { animation:none; }
}