/* IMTRADE's existing styles: primary #20517e, interaction accent #bcdef1. */
@font-face{font-family:Montserrat;src:url('assets/montserrat-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/montserrat-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/montserrat-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--brand:#20517e;--accent:#bcdef1;--white:#fff;--ink:#082c49;--look-x:0px;--look-y:0px;--art-x:0px;--art-y:0px;font-family:Montserrat,Arial,Helvetica,sans-serif;background:var(--ink);color:var(--white)}
*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{background:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--accent);color:var(--ink)}
.hero{isolation:isolate;position:relative;display:flex;flex-direction:column;width:100%;height:100svh;min-height:620px;overflow:hidden;padding:clamp(26px,3.2vh,44px) clamp(28px,5.1vw,98px) clamp(25px,4.3vh,48px)}
.scene,.scene-offset,.scene-camera,.scene-tone,.navigation-art,.water-light{position:absolute;inset:0;pointer-events:none}
.scene{z-index:-3;background:var(--brand);overflow:hidden;animation:scene-arrive 1.8s ease-out both}
.scene-offset{inset:-14px}
.scene-camera{transform-origin:74% 61%;animation:camera 36s cubic-bezier(.4,0,.6,1) infinite alternate;will-change:transform}
.scene-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:75% 50%;filter:saturate(.73)}
.scene-tone{background:linear-gradient(90deg,rgba(3,28,49,.8) 0%,rgba(5,37,62,.64) 27%,rgba(9,46,75,.24) 58%,rgba(12,52,82,.06) 100%),linear-gradient(0deg,rgba(2,25,44,.83) 0%,rgba(4,34,57,.12) 27%,rgba(15,57,87,.1) 75%,rgba(5,33,56,.34) 100%)}
.water-light{inset:38% 0 0 49%;background:radial-gradient(ellipse at 72% 55%,rgba(188,222,241,.13),transparent 48%);mix-blend-mode:screen;animation:light-breathe 14s ease-in-out infinite alternate}
.navigation-art{z-index:-1;animation:art-arrive 2.3s 1s both}
.chart{width:100%;height:100%;overflow:visible;stroke:var(--accent);stroke-width:.8;vector-effect:non-scaling-stroke}
.chart-structure{opacity:.17}.chart-structure path{vector-effect:non-scaling-stroke}.course-base{opacity:.18;stroke-dasharray:3 7}.course-draw{opacity:.45;stroke-width:1;stroke-dasharray:1;animation:course-reveal 4s 1.15s cubic-bezier(.2,.6,.2,1) both}.waypoint{opacity:.8}.waypoint-halo{opacity:.4;transform-box:fill-box;transform-origin:center;animation:waypoint-breathe 5s 2s ease-in-out infinite}.waypoint-core,.course-traveller{fill:var(--accent);stroke:none}.secondary{opacity:.55}.course-traveller{opacity:.8}
.masthead{flex:none;position:relative;z-index:1;display:flex;align-items:center;animation:content-arrive 1s .28s both}.brand{display:block;width:clamp(168px,14.1vw,255px);height:auto}
.hero-content{display:flex;align-items:center;flex:1;position:relative;padding-block:25px 34px}
.message{width:min(77vw,1270px);margin-top:0}
h1{margin:0;font-weight:700;font-size:clamp(78px,7.8vw,150px);letter-spacing:-.057em;line-height:1.01}
.title-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;white-space:nowrap}.title-line>span{display:block;animation:title-arrive 1.2s .55s cubic-bezier(.16,1,.3,1) both}.title-line:nth-child(2)>span{animation-delay:.7s}.title-stop{color:var(--accent)}
.intro{margin:26px 0 0;font-size:clamp(20px,1.6vw,30px);line-height:1.35;letter-spacing:-.015em;font-weight:400;animation:content-arrive 1s 1.02s both}
.site-status{display:flex;align-items:stretch;gap:24px;margin-top:clamp(28px,4vh,46px);animation:content-arrive 1s 1.22s both}.status-rule{width:3px;flex:none;background:var(--accent)}.status-title{margin:0;font-size:clamp(20px,1.55vw,28px);font-weight:700;line-height:1.25;letter-spacing:-.02em}.status-copy{margin:7px 0 0;color:rgba(255,255,255,.83);font-size:clamp(16px,1.23vw,22px);line-height:1.4}
.contact-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-width:224px;min-height:60px;padding:18px 27px;margin-top:30px;background:var(--accent);color:var(--ink);font-size:19px;font-weight:600;line-height:1.2;border:1px solid var(--accent);transition:background .25s,color .25s,box-shadow .3s;animation:content-arrive 1s 1.42s both}.contact-button svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;transition:transform .3s}.contact-button:hover{background:var(--white);border-color:var(--white);box-shadow:0 6px 32px rgba(188,222,241,.15)}.contact-button:hover svg{transform:translate(2px,-2px)}
.contact-bar{position:relative;flex:none;display:flex;justify-content:space-between;align-items:center;gap:24px;animation:content-arrive 1.1s 1.6s both}.contacts{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(25px,3vw,55px)}.contacts>.contact-item,.contact-location{display:inline-flex;align-items:center;gap:13px;min-height:44px;font-size:clamp(14px,.95vw,17px);line-height:1.25;white-space:nowrap}.contacts svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.35;flex:none}.contacts>.contact-item{transition:color .25s}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.contact-button:focus-visible{outline-color:var(--white)}
.hero[data-motion="paused"] *{animation-play-state:paused!important}
.hero[data-motion="reduced"] .course-traveller{display:none}
@keyframes scene-arrive{from{opacity:.2}to{opacity:1}}@keyframes content-arrive{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes title-arrive{from{opacity:.2;transform:translate3d(0,112%,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes art-arrive{from{opacity:0}to{opacity:1}}@keyframes course-reveal{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes camera{from{transform:scale(1.018)}to{transform:scale(1.065)}}@keyframes waypoint-breathe{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}@keyframes light-breathe{from{opacity:.3;transform:translate3d(0,0,0)}to{opacity:.7;transform:translate3d(-6px,3px,0)}}
@media (min-width:1200px) and (max-height:790px){.hero{min-height:570px;padding-top:24px;padding-bottom:24px}.brand{width:190px}.hero-content{padding-block:24px}h1{font-size:clamp(80px,7.15vw,125px)}.intro{margin-top:19px;font-size:22px}.site-status{margin-top:26px}.status-title{font-size:22px}.status-copy{font-size:17px}.contact-button{min-height:54px;margin-top:24px;padding-block:15px}.contacts>.contact-item,.contact-location{font-size:14px}}




@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene-offset,.navigation-art{transform:none!important}.course-traveller{display:none}.motion-toggle{display:none}}

/* Requested content refinement: clear status hierarchy and full street address. */
.scene-photo{object-position:20% 50%;filter:saturate(.96) contrast(1.03) brightness(1.03);transform:scale(1.07);transform-origin:64% 50%}
.scene-tone{background:linear-gradient(90deg,rgba(3,28,49,.74),rgba(5,37,62,.54) 27%,rgba(9,46,75,.16) 62%,rgba(12,52,82,.08)),linear-gradient(0deg,rgba(2,25,44,.84),transparent 38%),linear-gradient(180deg,rgba(32,81,126,.43),rgba(0,85,164,.48))}
.sky-mist{position:absolute;pointer-events:none;inset:0;overflow:hidden}
.fog-layer{position:absolute;display:block;left:-35%;width:170%;background:url('assets/sea-mist.webp') center/100% 100% no-repeat;filter:grayscale(1) blur(18px);mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 62%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 62%,transparent 100%);will-change:transform}
.fog-layer--far{top:-13%;height:70%;opacity:.38;}
.fog-layer--near{top:9%;height:66%;opacity:.24;}


.status-title{font-size:clamp(30px,2.4vw,44px);line-height:1.2}
.site-status{margin-top:36px}
.street-address{display:block;margin-top:5px;font-size:14px;font-weight:400;line-height:1.4;color:rgba(255,255,255,.9)}
.contact-location{align-items:flex-start}.contact-location>svg{margin-top:2px}
.status-copy{max-width:660px}
.contact-purpose,.contact-value{display:block}
.contact-purpose{font-size:12px;line-height:1.4;margin-bottom:5px;color:rgba(255,255,255,.83)}
.email-contact>svg{align-self:center}
@media (min-width:1200px) and (max-height:790px){.status-title{font-size:30px}.site-status{margin-top:30px}}




/* Pale marine atmosphere: photographic luminance, open light and broad sea haze. */
:root{color-scheme:light;background:#d5e8f3;color:var(--brand)}
body,.scene{background:#d5e8f3}
.scene-photo{filter:url(#marine-daylight)}
.scene-tone{background:linear-gradient(90deg,rgba(239,247,252,.59),rgba(225,240,249,.35) 42%,rgba(215,235,247,.06) 76%),linear-gradient(180deg,rgba(244,250,254,.32),transparent 53%,rgba(219,237,248,.24))}
.fog-layer{background:radial-gradient(ellipse at 22% 42%,rgba(248,252,255,.8),transparent 47%),radial-gradient(ellipse at 74% 53%,rgba(239,248,255,.68),transparent 42%),url('assets/sea-mist.webp') center/100% 100% no-repeat;filter:grayscale(1) blur(64px);mask-image:linear-gradient(180deg,transparent,#000 23%,#000 60%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 23%,#000 60%,transparent)}
.fog-layer--far{top:-19%;height:85%;opacity:.24}
.fog-layer--near{top:17%;height:72%;opacity:.13}
.water-light{opacity:.12;mix-blend-mode:normal}
.chart{stroke:var(--brand);opacity:.4}
.course-traveller,.waypoint-core{fill:var(--brand)}
.navigation-art{opacity:.38}
.title-stop{color:var(--brand);opacity:.55}
.status-rule{background:#8abbd7}
.status-copy{color:#365f7a}
.contacts{color:#173e5e}
.street-address,.contact-purpose{color:#244c6b}
.contact-button{background:var(--brand);color:white;border-color:var(--brand)}
.contact-button:hover{background:#153f62;border-color:#153f62;color:white}

a:focus-visible,.contact-button:focus-visible{outline-color:var(--brand)}


/* Visible route and gently travelling banks of sea fog. */
.scene-tone{background:linear-gradient(90deg,rgba(239,247,252,.45),rgba(225,240,249,.24) 42%,rgba(215,235,247,.03) 76%),linear-gradient(180deg,rgba(244,250,254,.23),transparent 53%,rgba(219,237,248,.18))}
.chart{opacity:.78;stroke-width:1.1}
.chart-structure{opacity:.28}
.course-draw{opacity:.75;stroke-width:1.35}
.course-base{opacity:.28}
.waypoint{opacity:.9}
.waypoint-halo{animation:marker-pulse 3.4s var(--pulse-delay,0s) ease-out infinite;transform-box:view-box;transform-origin:0 0}
@keyframes marker-pulse{0%{opacity:.65;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.8)}}
.fog-layer{filter:grayscale(1) blur(40px)}
.fog-layer--far{top:-8%;height:85%;opacity:.68;animation-duration:20s}
.fog-layer--near{top:24%;height:72%;opacity:.42;animation-duration:15s}




/* Discrete fog banks: preserve their texture and leave clear gaps between masses. */
.fog-layer{left:-20%;width:140%;background:url('assets/sea-mist.webp') center/100% 100% no-repeat;filter:grayscale(1) brightness(1.65) blur(9px);mask-image:none;-webkit-mask-image:none}
.fog-layer--far{top:-14%;height:90%;opacity:.7;}
.fog-layer--near{left:-10%;width:120%;top:30%;height:65%;opacity:.46;}




/* Restrained fog concentrated in the sky; open sea and bridge below. */
.fog-layer{filter:grayscale(1) brightness(1.45) blur(9px)}
.fog-layer--far{top:-25%;height:66%;opacity:.56}
.fog-layer--near{top:-6%;height:50%;opacity:.32}


/* Consistent contact baselines and crisp white secondary arcs. */
.status-rule{background:#fff}
.contacts{align-items:flex-start}
.contacts>.contact-item,.contacts .contact-location{align-items:flex-start;gap:13px}
.contacts svg,.contact-location>svg,.email-contact>svg{align-self:flex-start;margin-top:23px}
.contacts .contact-purpose{font-size:12px;line-height:17px;margin:0 0 5px}
.contacts .contact-value{font-size:clamp(14px,.95vw,17px);line-height:22px}
.contacts .street-address{margin-top:0;color:inherit;white-space:nowrap}
.corner-arcs{opacity:1;stroke:#fff;stroke-width:1px}
.corner-arc{stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke}


.chart{opacity:1}
.course-base,.course-draw,.waypoint,.course-traveller{stroke-opacity:.78}
.corner-arcs{stroke-opacity:1}

/* Quieter arcs, more breathing room for the CTA, and stronger contact hierarchy. */
.corner-arcs{opacity:.3}
.contact-button{margin-top:46px;transition:background .25s,color .25s,border-color .25s,box-shadow .3s}
.contact-button{background:#fff;border-color:#fff;color:var(--brand);box-shadow:0 0 20px rgba(255,255,255,.48),0 5px 30px rgba(255,255,255,.25)}
@media(hover:hover){.contact-button:hover{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}}
.contact-button:focus-visible{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.contacts{color:#153f63}
.contacts .contact-purpose{color:var(--brand);font-weight:600}
.contacts .contact-value{font-size:16px;font-weight:600;line-height:22px}
.contacts .street-address{font-size:15px;font-weight:600}
.contacts svg{stroke:#fff;stroke-width:1.65;filter:drop-shadow(0 0 4px rgba(255,255,255,.4))}

@media(min-width:1200px) and (max-height:790px){.contact-button{margin-top:40px}}


/* Responsive artboards: <360 fallback, 360, 480, 640, 960; desktop 1200+. */
@media (max-width:1199px){
  .hero{height:auto;min-height:100svh;padding:24px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .brand{width:160px}
  .hero-content{flex:1 0 auto;align-items:flex-start;padding:46px 0 78px}
  .message{width:100%;min-width:0}
  h1{font-size:11.5vw;line-height:1.07;letter-spacing:-.052em}
  .site-status{gap:13px;margin-top:27px}
  .site-status>div{min-width:0}
  .status-title{font-size:26px;line-height:1.2}
  .status-copy{font-size:14px;line-height:1.5;max-width:350px;margin-top:9px}
  .status-break{display:none}
  .contact-button{margin-top:38px;min-width:198px;min-height:54px;padding:15px 22px;font-size:17px}
  .scene-photo{object-position:57% 50%;transform:scale(1.04);transform-origin:60% 50%}
  .scene-camera{transform-origin:58% 55%}
  .scene-tone{background:linear-gradient(180deg,rgba(239,247,252,.5),rgba(228,242,250,.29) 44%,rgba(218,237,248,.09) 63%,rgba(231,244,251,.58)),linear-gradient(90deg,rgba(237,247,253,.16),transparent)}
  .navigation-art{inset:27% -63% 0 -31%}
  .water-light{inset:45% 0 0 30%}
  .fog-layer{left:-60%;width:220%;filter:grayscale(1) brightness(1.45) blur(7px)}
  .fog-layer--far{top:-16%;height:46%;opacity:.5}
  .fog-layer--near{left:-40%;width:190%;top:0;height:37%;opacity:.28}
  .contact-bar{display:block}
  .contacts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%}
  .contacts>.contact-item,.contacts .contact-location{display:flex;gap:11px;min-width:0;min-height:44px;margin:0;white-space:normal}
  .contacts>.contact-item>span,.contact-location>span{min-width:0}
  .contacts svg,.contact-location>svg,.email-contact>svg{display:block;width:20px;height:20px;margin-top:23px;align-self:flex-start}
  .contacts .contact-purpose{font-size:12px;line-height:17px}
  .contacts .contact-value{font-size:15px;line-height:22px;white-space:nowrap}
  .contacts .street-address{font-size:14px;white-space:normal;max-width:none}
}
/* 360–479: portrait phones. */
@media (min-width:360px) and (max-width:479px){
  .hero{padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
  .brand{width:166px}
  .hero-content{padding-top:52px;padding-bottom:90px}
  h1{font-size:11.8vw}
  .status-title{font-size:29px}
  .status-copy{font-size:15px}
  .contact-button{margin-top:42px}
}
/* 480–639: wide phones and small tablets. */
@media (min-width:480px) and (max-width:639px){
  .hero{padding:28px max(28px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))}
  .brand{width:180px}
  .hero-content{padding-top:62px;padding-bottom:100px}
  h1{font-size:11.8vw}
  .status-title{font-size:32px}
  .status-copy{font-size:16px;max-width:420px}
  .site-status{gap:18px;margin-top:32px}
  .contact-button{margin-top:42px}
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
  .contact-location,.contacts>.phone-contact{grid-column:1/-1}
  .contacts .email-contact{gap:8px}
  .contacts .email-contact .contact-value{font-size:14px}
  .contacts .email-contact svg{width:18px;height:18px;margin-top:24px}
  .scene-photo{object-position:56% 50%}
  .navigation-art{inset:24% -45% 0 -20%}
}
/* 640–959: tablets. */
@media (min-width:640px) and (max-width:959px){
  .hero{padding:30px max(36px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(36px,env(safe-area-inset-left))}
  .brand{width:190px}
  .hero-content{padding-top:78px;padding-bottom:120px}
  h1{font-size:10vw;line-height:1.04}
  .site-status{gap:22px;margin-top:34px}
  .status-title{font-size:34px}
  .status-copy{font-size:17px;max-width:540px}
  .contact-button{min-width:224px;min-height:60px;font-size:18px;margin-top:44px;padding:18px 27px}
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
  .contacts .contact-value{font-size:16px}
  .contacts .street-address{font-size:14px}
  .contacts svg{width:22px;height:22px;margin-top:22px}
  .scene-photo{object-position:47% 50%;transform:scale(1.05)}
  .navigation-art{inset:12% -25% 0 -12%}
  .fog-layer{left:-35%;width:170%;filter:grayscale(1) brightness(1.45) blur(8px)}
  .fog-layer--far{top:-23%;height:60%;opacity:.53}
  .fog-layer--near{left:-20%;width:150%;top:-5%;height:45%;opacity:.3}
}
/* 960–1199: compact landscape/tablet composition. */
@media (min-width:960px) and (max-width:1199px){
  .hero{padding:30px max(40px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(40px,env(safe-area-inset-left))}
  .brand{width:190px}
  .hero-content{align-items:center;padding:60px 0 80px}
  h1{font-size:8.5vw;line-height:1.03}
  .site-status{gap:22px;margin-top:32px}
  .status-title{font-size:34px}
  .status-copy{font-size:17px;max-width:570px}
  .status-break{display:initial}
  .contact-button{min-width:224px;min-height:60px;font-size:18px;margin-top:44px;padding:18px 27px}
  .contacts{grid-template-columns:1.3fr 1fr 1fr .9fr;gap:18px}
  .contacts>.contact-item,.contacts .contact-location{gap:9px}
  .contacts .contact-value,.contacts .street-address{font-size:14px}
  .contacts svg{width:19px;height:19px;margin-top:23px}
  .scene-photo{object-position:30% 50%;transform:scale(1.07)}
  .scene-tone{background:linear-gradient(90deg,rgba(239,247,252,.45),rgba(225,240,249,.24) 42%,rgba(215,235,247,.03) 76%),linear-gradient(180deg,rgba(244,250,254,.23),transparent 53%,rgba(219,237,248,.18))}
  .navigation-art{inset:0}
  .fog-layer{left:-20%;width:140%;filter:grayscale(1) brightness(1.45) blur(9px)}
  .fog-layer--far{top:-25%;height:66%;opacity:.56}
  .fog-layer--near{left:-10%;width:120%;top:-6%;height:50%;opacity:.32}
}
/* Short viewports scroll naturally; never crop the contact details. */
@media (max-height:580px) and (max-width:1199px){
  .hero-content{padding-top:32px;padding-bottom:56px}
}
@media (min-width:1200px) and (max-height:620px){
  .hero{height:auto;min-height:100svh}
}
@media (hover:none){
  .contact-button:hover{background:#fff;border-color:#fff;color:var(--brand);box-shadow:0 0 20px rgba(255,255,255,.48),0 5px 30px rgba(255,255,255,.25)}
}

/* Smartphone composition: independent corner arcs and a contained route. */
.mobile-corner-art{display:none}
@media (max-width:639px){
  .hero-content{align-items:center;padding-block:64px 56px}
  .navigation-art{inset:auto;left:-48%;top:32%;width:150%;height:auto;aspect-ratio:16/9}
  .navigation-art .corner-arcs{display:none}
  .mobile-corner-art{display:block;position:absolute;right:-88px;bottom:-94px;width:300px;height:300px;z-index:-1;pointer-events:none;stroke:#fff;stroke-width:1px;opacity:.3}
  .mobile-corner-art circle{vector-effect:non-scaling-stroke}
}
@media (max-width:639px) and (max-height:580px){
  .hero-content{padding-block:40px 44px}
}

/* Smartphone route sits in the free space below the button. */
@media(max-width:639px){
  .navigation-art{left:0;top:var(--mobile-route-top,65%);width:100%;height:var(--mobile-route-height,100px);aspect-ratio:auto}
  .mobile-corner-art{opacity:.48}
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding-top:18px;border-top:1px solid rgba(32,81,126,.2)}
  .contacts .contact-location,.contacts>.phone-contact{grid-column:1/-1}
  .contacts>.contact-item,.contacts .contact-location,.contacts .email-contact{display:grid;grid-template-columns:18px minmax(0,1fr);gap:5px 7px;align-items:center;min-height:44px}
  .contacts>.contact-item>span,.contacts .contact-location>span{display:contents}
  .contacts svg,.contact-location>svg,.email-contact>svg,.contacts .email-contact svg{display:block;grid-column:1;grid-row:1;align-self:center;width:16px;height:16px;margin:0}
  .contacts .contact-purpose{grid-column:2;grid-row:1;margin:0;line-height:18px}
  .contacts .contact-value{grid-column:1/-1;grid-row:2;font-size:15px;line-height:22px}
  .contacts .email-contact .contact-value{font-size:14px;letter-spacing:-.02em}
  .contacts .street-address{font-size:14px}
}

@media(max-width:639px) and (max-height:580px){
  .hero-content{padding-bottom:96px}
}

@media(max-width:639px){
  .course-base,.course-draw,.waypoint circle{vector-effect:non-scaling-stroke}
  .course-draw{stroke-width:1px}
  .waypoint circle{r:18px;stroke-width:.8px}
  .waypoint .waypoint-halo{r:46px}
  .waypoint .waypoint-core{r:6px}
  .course-traveller{r:12px}
}

/* Wider smartphone route, more open type rhythm, and visible corner arcs. */
@media(max-width:639px){
  .hero-content{padding-block:40px 100px}
  .site-status{margin-top:36px}
  .status-copy{margin-top:12px}
  .contact-button{margin-top:50px}
  .mobile-corner-art{right:-70px;bottom:-34px}
  .waypoint circle{r:3px}
  .waypoint .waypoint-halo{r:9px}
  .waypoint .waypoint-core{r:1.3px}
  .course-traveller{r:2px}
}
@media(max-width:639px) and (min-width:480px){.site-status{margin-top:40px}}
@media(max-width:639px) and (max-height:580px){.hero-content{padding-block:32px 116px}}

/* Tablet corner arcs are anchored to the canvas, not the route artwork. */
@media(min-width:640px) and (max-width:1199px){
  .navigation-art .corner-arcs{display:none}
  .mobile-corner-art{display:block;position:absolute;right:-100px;bottom:-70px;width:420px;height:420px;z-index:-1;pointer-events:none;stroke:#fff;stroke-width:1px;opacity:.3}
  .mobile-corner-art circle{vector-effect:non-scaling-stroke}
  .site-status{margin-top:44px}
  .status-copy{margin-top:12px}
  .contact-button{margin-top:54px}
}
@media(min-width:640px) and (max-width:959px){
  .hero-content{padding-block:46px 132px}
}
@media(min-width:960px) and (max-width:1199px){
  .hero-content{padding-block:40px 116px}
}
@media(min-width:640px) and (max-width:1199px) and (max-height:580px){
  .hero-content{padding-block:24px 70px}
}

@media(min-width:640px) and (max-width:1199px){
  h1,.site-status{position:relative;top:-16px}
}

@media(min-width:640px) and (max-width:1199px){
  .navigation-art .chart{transform:translateX(-20px) scaleX(1.06);transform-origin:69.7% 50%}
}

@media(min-width:640px) and (max-width:1199px){
  .navigation-art .chart{transform:translate(-20px,20px) scaleX(1.06)}
  .scene-photo{object-position:64% 50%}
}

/* Tablet spacing uses the open canvas instead of compressing the content. */
@media(min-width:640px) and (max-width:1199px){
  .site-status{margin-top:76px}
  .contact-button{margin-top:82px}
}
@media(min-width:640px) and (max-width:959px){.scene-photo{object-position:55.5% 50%}}
@media(min-width:960px) and (max-width:1199px){.scene-photo{object-position:47% 50%}}

@media(min-width:640px) and (max-width:1199px){
  .navigation-art .chart{transform:translate(-36px,48px) scaleX(1.06)}
}

/* Tablet contact panel separates the details from the photograph. */
@media(min-width:640px) and (max-width:1199px){
  .navigation-art .chart{transform:translate(-52px,68px) scaleX(1.06)}
  .contact-bar{padding:22px 24px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.62)}
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
  .contacts .contact-value{font-size:17px;line-height:24px}
  .contacts .street-address{font-size:15px}
  .contacts .contact-purpose{font-size:12px}
  .contacts svg,.contact-location>svg,.email-contact>svg{width:22px;height:22px;margin-top:23px}
}

/* Two identical tiles travel by exactly one tile: no turnaround or reset jump. */
.fog-layer{overflow:hidden;background:none;animation:none;will-change:auto}
.fog-track{position:absolute;inset:0 auto 0 0;display:block;width:200%;height:100%;background:url('assets/sea-mist-loop.svg') 0 0 / 50% 100% repeat-x;animation:fog-drift 32s -7s linear infinite;will-change:transform}
.fog-layer--near .fog-track{animation-duration:23s;animation-delay:-13s;animation-direction:reverse}
@keyframes fog-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Compact desktop / laptops: preserve headline size and open the vertical rhythm. */
@media(min-width:1200px) and (max-width:1439px){
  .site-status{margin-top:56px}
  .contact-button{margin-top:64px}
}
@media(min-width:1200px) and (max-width:1439px) and (max-height:790px){
  .site-status{margin-top:52px}
  .contact-button{margin-top:60px}
}
/* Main desktop: a slightly quieter headline. */
@media(min-width:1440px){h1{font-size:clamp(78px,7.35vw,141px)}}
@media(min-width:1440px) and (max-height:790px){h1{font-size:clamp(80px,6.75vw,118px)}}

/* Main desktop refinement. */
@media(min-width:1440px){
  h1{font-size:clamp(78px,7vw,134px)}
  .navigation-art .route-art{transform:translateY(-24px)}
}
@media(min-width:1440px) and (max-height:790px){h1{font-size:clamp(80px,6.45vw,112px)}}

/* Passing-point response and a restrained glow at the photographic sun. */
.waypoint circle{transition:stroke .28s ease,fill .28s ease,stroke-opacity .28s ease}
.waypoint.is-active circle{stroke:#fff;stroke-opacity:.68}
.waypoint.is-active .waypoint-core{fill:rgba(255,255,255,.72)}
.photo-light{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sun-glow{position:absolute;display:block;left:var(--sun-x,50%);top:var(--sun-y,36%);width:clamp(150px,17vw,320px);height:clamp(100px,11vw,210px);margin-left:calc(clamp(150px,17vw,320px) / -2);margin-top:calc(clamp(100px,11vw,210px) / -2);background:radial-gradient(ellipse,rgba(255,255,255,.8),rgba(239,248,255,.32) 27%,transparent 68%);mix-blend-mode:screen;filter:blur(3px);animation:sun-breathe 13s -4s ease-in-out infinite;will-change:opacity,transform}
.sun-glow::before{content:'';position:absolute;inset:27% -40%;background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 66%);transform:rotate(-12deg);filter:blur(7px)}
.sun-glow::after{content:'';position:absolute;inset:-22% 23% 15%;background:radial-gradient(ellipse at 50% 75%,rgba(255,255,255,.28),transparent 67%);transform:rotate(17deg);filter:blur(9px)}
@keyframes sun-breathe{0%,100%{opacity:.2;transform:scale(.94)}50%{opacity:.42;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.sun-glow{opacity:.24;transform:none}}


/* Only the actual contact values are links; labels and icons stay unchanged. */
.contacts a.contact-value{position:relative;isolation:isolate;width:fit-content;max-width:100%;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.55),0 1px 5px rgba(32,81,126,.32);transition:color .25s,text-shadow .25s}
@media(hover:hover){
  .contacts a.contact-value:hover{color:var(--brand);text-shadow:none}
}
.contacts a.contact-value:focus-visible{color:var(--brand);text-shadow:none}
@media(min-width:640px) and (max-width:1199px){
  .contacts a.contact-value::before{content:'';position:absolute;inset:-4px -7px;z-index:-1;border-radius:2px;background:rgba(32,81,126,.9);box-shadow:0 0 14px rgba(255,255,255,.28);opacity:1;transition:opacity .25s}
  .contacts a.contact-value:focus-visible::before{opacity:0}
}
@media(min-width:640px) and (max-width:1199px) and (hover:hover){.contacts a.contact-value:hover::before{opacity:0}}

/* Smartphone refinement: smaller identity/status and stronger continuous fog. */
@media(max-width:639px){
  .brand{width:108px}
  .status-title{font-size:19.89px}
  .fog-layer--far{opacity:.76}
  .fog-layer--near{opacity:.48}
}
@media(min-width:360px) and (max-width:479px){
  .brand{width:112.05px}
  .status-title{font-size:22.185px}
}
@media(min-width:480px) and (max-width:639px){
  .brand{width:121.5px}
  .status-title{font-size:24.48px}
}
/* Recover vertical space through spacing, without cropping or hiding content. */
@media(max-width:639px) and (max-height:760px) and (orientation:portrait){
  .hero-content{padding-block:24px 44px}
  .site-status{margin-top:28px}
  .contact-button{margin-top:38px}
}
@media(max-width:639px) and (max-height:660px) and (orientation:portrait){
  .hero{padding-top:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .hero-content{padding-block:4px 44px}
  .site-status{margin-top:24px}
  .contact-button{margin-top:30px}
  .contacts{row-gap:14px}
}

@media(max-width:639px){
  .status-copy{font-weight:600;color:#244c6b}
}

@media(max-width:359px) and (max-height:660px) and (orientation:portrait){
  .site-status{margin-top:18px}
  .contact-button{margin-top:24px}
  .contacts{padding-top:12px}
}

/* One link contains the icon and contact value; the label remains separate. */
.contacts>.contact-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 13px;align-content:start;align-items:start}
.contacts .contact-item>.contact-purpose{grid-column:2;grid-row:1}
.contacts .contact-link{display:grid;grid-template-columns:22px minmax(0,1fr);gap:13px;grid-column:1/-1;grid-row:2;align-items:center;min-width:0;width:fit-content;max-width:100%;color:#fff;transition:color .25s}
.contacts .contact-link svg{grid-column:1;grid-row:1;align-self:center;width:22px;height:22px;margin:0;stroke:currentColor;transition:filter .25s}
.contacts .contact-link .contact-value{grid-column:2;grid-row:1;color:inherit;text-shadow:0 0 10px rgba(255,255,255,.55),0 1px 5px rgba(32,81,126,.32);transition:text-shadow .25s}
.contacts .contact-link:focus-visible{color:var(--brand)}
.contacts .contact-link:focus-visible svg{filter:none}
.contacts .contact-link:focus-visible .contact-value{text-shadow:none}
@media(hover:hover){
 .contacts .contact-link:hover{color:var(--brand)}
 .contacts .contact-link:hover svg{filter:none}
 .contacts .contact-link:hover .contact-value{text-shadow:none}
}
@media(min-width:640px) and (max-width:1199px){
 .contacts .contact-link{position:relative;isolation:isolate}
 .contacts .contact-link::before{content:'';position:absolute;inset:-4px -7px;z-index:-1;border-radius:2px;background:rgba(32,81,126,.9);box-shadow:0 0 14px rgba(255,255,255,.28);opacity:1;transition:opacity .25s}
 .contacts .contact-link:focus-visible::before{opacity:0}
}
@media(min-width:640px) and (max-width:1199px) and (hover:hover){.contacts .contact-link:hover::before{opacity:0}}
@media(max-width:639px){
 .contacts>.contact-item{grid-template-columns:18px minmax(0,1fr);gap:5px 7px}
 .contacts .contact-link{grid-template-columns:18px minmax(0,1fr);gap:7px}
 .contacts .contact-link svg{width:16px;height:16px}
}

@media(max-width:639px){
 .contacts .contact-link{position:relative;display:block}
 .contacts .contact-link svg{position:absolute;left:0;top:-23px}
}

.contacts .contact-item>.contact-purpose{display:block}

/* Smartphone action closes the scene immediately before the contacts. */
.mobile-action{display:none}
@media(max-width:639px){
 .hero-content{padding-bottom:clamp(24px,8svh,70px)}
 .mobile-action{display:block;flex:none;position:relative;z-index:1;margin-bottom:26px}
 .mobile-action .contact-button{margin:0}
}
@media(max-width:639px) and (max-height:660px) and (orientation:portrait){
 .hero-content{padding-bottom:24px}
 .mobile-action{margin-bottom:20px}
}
/* Tablet CTA: a larger touch target with more room around its label. */
@media(min-width:640px) and (max-width:1199px){
 .contact-button{min-width:280px;min-height:72px;padding:22px 32px;font-size:20px;gap:60px}
 .contact-button svg{width:24px;height:24px}
}