:root {
  --ink: #071b29;
  --ink-2: #0b2637;
  --ink-3: #113347;
  --paper: #f0f0e9;
  --paper-dark: #e4e5dc;
  --mist: #afc3c2;
  --aqua: #a5eed1;
  --sky: #6bd3ff;
  --sand: #eeb26d;
  --line-dark: rgba(233, 246, 240, 0.18);
  --line-light: rgba(7, 27, 41, 0.17);
  --max: 1400px;
  --sans: "Manrope", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.skip-link:focus { z-index: 10; top: 1rem; left: 1rem; padding: .7rem 1rem; color: var(--ink); background: var(--aqua); }

.page-shell { overflow: hidden; }
.section, .site-header, .site-footer, .response-route, .contact-inner { padding-left: max(1.5rem, calc((100vw - var(--max)) / 2 + 3.5rem)); padding-right: max(1.5rem, calc((100vw - var(--max)) / 2 + 3.5rem)); }
.section { padding-top: clamp(5rem, 11vw, 10rem); padding-bottom: clamp(5rem, 10vw, 9rem); }

.site-header {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 2.1rem;
  padding-bottom: 2.1rem;
  color: var(--paper);
  background: linear-gradient(180deg, #082d40 0%, #082d40 64%, rgba(8, 45, 64, .86) 82%, rgba(8, 45, 64, 0) 100%);
  border-bottom: 0;
}
.brand-logo { display: inline-flex; align-items: center; gap: .72rem; line-height: 1; }
.brand-mark-shell { display: block; width: clamp(4.5rem, 5.8vw, 6.15rem); aspect-ratio: 870 / 444; filter: drop-shadow(0 .32rem .6rem rgba(3, 19, 29, .34)) drop-shadow(0 0 .42rem rgba(101, 223, 202, .14)); }
.brand-mark { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name { display: inline-flex; align-items: baseline; gap: .38rem; color: var(--paper); font-family: var(--sans); font-size: clamp(.72rem, 1.05vw, .9rem); font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.brand-name strong { font: inherit; }.brand-name span { color: var(--aqua); font-size: .78em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.7rem); }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 2rem); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .025em; }
.nav-group { position: relative; display: flex; align-items: center; padding: .9rem 0; }
.nav-primary { color: #d9e6e2; transition: color .2s ease; }
.nav-primary::after { display: inline-block; width: .33rem; height: .33rem; margin: 0 0 .13rem .42rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; transform: rotate(45deg); transition: transform .2s ease; }
.nav-group:hover .nav-primary, .nav-group:focus-within .nav-primary { color: var(--aqua); }.nav-group:hover .nav-primary::after, .nav-group:focus-within .nav-primary::after { transform: translateY(.12rem) rotate(225deg); }
.nav-dropdown { position: absolute; top: calc(100% - .18rem); left: -.9rem; z-index: 8; display: grid; min-width: 15.5rem; gap: .08rem; padding: .65rem; border: 1px solid rgba(165,238,209,.18); border-radius: .95rem; background: rgba(8, 42, 57, .97); box-shadow: 0 1.1rem 2.8rem rgba(1,18,28,.25); opacity: 0; pointer-events: none; transform: translateY(-.4rem); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; visibility: hidden; }
.nav-dropdown a { padding: .58rem .65rem; border-radius: .55rem; color: #c8d8d3; font-size: .68rem; line-height: 1.35; transition: color .18s ease, background .18s ease; }.nav-dropdown a:hover, .nav-dropdown a:focus-visible { color: var(--ink); background: var(--aqua); outline: none; }
.nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-contact { padding: .72rem 1rem; border: 1px solid rgba(165, 238, 209, .5); color: var(--aqua); transition: background .2s ease, color .2s ease; }
.nav-contact:hover { color: var(--ink); background: var(--aqua); }
.language-switch { display: inline-flex; align-items: center; gap: .38rem; color: #8daaa7; font-size: .65rem; font-weight: 800; letter-spacing: .07em; }.language-switch::before { color: rgba(211,238,228,.38); content: "/"; order: 1; }.language-switch a { color: inherit; transition: color .18s ease; }.language-switch a:first-child { order: 0; }.language-switch a:last-child { order: 2; }.language-switch a:hover, .language-switch a:focus-visible, .language-switch .is-current { color: var(--aqua); outline: none; }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: max(680px, min(100svh, 940px)); padding-top: 9rem; align-items: center; }
.hero::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(7, 27, 41, .95) 0%, rgba(7, 27, 41, .8) 24%, rgba(7, 27, 41, .22) 44%, rgba(7, 27, 41, 0) 56%), linear-gradient(0deg, var(--ink) 0%, rgba(7, 27, 41, 0) 16%); }
.hero-copy { position: relative; z-index: 2; max-width: min(40rem, 44vw); padding: 4rem 0 3rem; }
.eyebrow, .section-label { margin: 0; color: var(--mist); font-family: var(--sans); font-size: .67rem; font-weight: 700; letter-spacing: .035em; }
.eyebrow { display: flex; align-items: center; gap: .65rem; }
.eyebrow > span, .hero-identity > span { position: relative; display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 3px rgba(165,238,209,.16); }
.eyebrow > span::after, .hero-identity > span::after { position: absolute; inset: -1px; border: 1px solid var(--aqua); border-radius: 50%; content: ""; opacity: 0; animation: identity-ping 2.8s ease-out infinite; }
@keyframes identity-ping { 0% { opacity: .9; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(3.4); } }
.hero-identity { display: flex; align-items: center; gap: .72rem; margin: 0; color: #d9f5e6; font-size: clamp(.82rem, 1.15vw, 1rem); font-weight: 700; letter-spacing: .045em; }.hero-disciplines { margin: .8rem 0 0 2.92rem; color: #9fc2b7; font-size: .68rem; font-weight: 700; letter-spacing: .025em; line-height: 1.5; }
.hero h1, h2 { margin: 1.25rem 0 0; font-size: clamp(3.55rem, 7.2vw, 7rem); line-height: .96; letter-spacing: -.07em; font-weight: 600; }
h1 em, h2 em { color: var(--aqua); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.085em; }
.hero-intro { max-width: 34rem; margin: 2rem 0 0; color: #c3d0cc; font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 1.8rem; margin-top: 2.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem 1.15rem; border: 1px solid transparent; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--aqua); }
.button-primary:hover { background: #d7ffe9; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--paper); font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .015em; border-bottom: 1px solid rgba(240,240,233,.4); padding-bottom: .25rem; }
.text-link span { font-size: 1rem; color: var(--aqua); }
.hero-proofline { margin: 1.2rem 0 0; color: #a6c7bc; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .025em; }

.hero-bathy { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 53%); mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 53%); }
.hero-bathy::before { position: absolute; inset: 8% 0 4% 38%; content: ""; border-radius: 50%; background: radial-gradient(ellipse at 55% 52%, rgba(39, 140, 157, .26), rgba(8, 44, 60, .1) 45%, rgba(7, 27, 41, 0) 72%); filter: blur(10px); }
.hero-bathy::after { position: absolute; inset: 22% 6% 14% 46%; content: ""; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(54, 202, 219, .14), transparent 64%); filter: blur(24px); }
.hero-bathy.is-visible::after { animation: bathy-panel-breathe 4.6s ease-in-out .6s infinite alternate; }
.hero-survey-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@keyframes bathy-panel-breathe { from { opacity: .62; transform: scale(.96); } to { opacity: 1; transform: scale(1.045); } }

.response-route { padding-top: clamp(3rem, 6vw, 5.4rem); padding-bottom: clamp(3rem, 6vw, 5.4rem); color: #102d38; background: #c7d8d1; }
.route-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 1.2rem 3rem; align-items: start; }.route-heading p { margin: .5rem 0 0; color: #3e6c6e; font-family: var(--sans); font-size: .76rem; font-weight: 700; line-height: 1.55; letter-spacing: .01em; }.route-heading strong { display: block; max-width: 48rem; color: #0c2e3b; font-size: clamp(2rem, 3.6vw, 4rem); line-height: 1.02; letter-spacing: -.06em; }.route-heading strong span { color: #1d756e; font-family: Georgia, serif; font-weight: 400; }.route-heading small { grid-column: 2; max-width: 38rem; margin-top: -.5rem; color: #3e5e63; font-size: .9rem; line-height: 1.65; }
.route-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin: 3.25rem 0 0; padding: 0; list-style: none; background: transparent; }.route-steps li { min-height: 12.2rem; padding: 1.15rem; border: 1px solid rgba(7, 48, 57, .12); border-radius: 1.05rem; background: rgba(246, 248, 241, .78); box-shadow: 0 .8rem 1.8rem rgba(27, 73, 73, .08); opacity: .18; transform: translateY(1rem) scale(.98); }.route-steps span { color: #27817a; font-family: var(--sans); font-size: .7rem; font-weight: 800; }.route-steps strong { display: block; margin-top: 2.8rem; color: #102e3a; font-size: 1.05rem; letter-spacing: -.04em; }.route-steps small { display: block; margin-top: .7rem; color: #4a6669; font-size: .75rem; line-height: 1.6; }.reveal-route.is-visible .route-steps li { animation: route-step-in .48s cubic-bezier(.22,.61,.36,1) forwards; }.reveal-route.is-visible .route-steps li:nth-child(1) { animation-delay: .04s; }.reveal-route.is-visible .route-steps li:nth-child(2) { animation-delay: .16s; }.reveal-route.is-visible .route-steps li:nth-child(3) { animation-delay: .28s; }.reveal-route.is-visible .route-steps li:nth-child(4) { animation-delay: .4s; }.reveal-route.is-visible .route-steps li:nth-child(5) { animation-delay: .52s; }
@keyframes route-step-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.about { color: var(--ink); background: var(--paper); }
.section-label { display: flex; align-items: center; gap: .9rem; color: #527070; }
.section-label span { color: #09807a; }
.about-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: clamp(3rem, 12vw, 12rem); margin-top: 2.9rem; }
.about :is(h1, h2) { color: var(--ink); font-size: clamp(3rem, 5.6vw, 6.3rem); }
.about :is(h1, h2) em, .services :is(h1, h2) em, .experience h2 em { color: #2d817a; }
.about-copy { max-width: 43rem; }
.about-copy p { margin: 0 0 1.2rem; font-size: .98rem; line-height: 1.8; color: #36505a; }
.about-copy .lead { color: #102c3d; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.5; letter-spacing: -.035em; }
.about-copy .director-note { margin-top: 1.65rem; padding: 1rem 1.1rem; border-left: 2px solid #27817a; border-radius: 0 .85rem .85rem 0; background: rgba(180,205,194,.35); color: #2c4c55; font-size: .84rem; line-height: 1.65; }.director-note strong { color: #0e3a48; }
.about-copy .operating-note { margin: 1.65rem 0 0; color: #51716f; font-family: var(--sans); font-size: .72rem; font-weight: 700; line-height: 1.7; letter-spacing: .025em; }
.operating-note span { color: #087770; }
.principles { scroll-margin-top: 7rem;  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.2rem; padding-top: 1.3rem; border-top: 1px solid var(--line-light); }
.principles > div { display: flex; flex-direction: column; gap: .5rem; }.principles span { color: #44847d; font-family: var(--sans); font-size: .72rem; font-weight: 800; }.principles strong { font-size: .8rem; }.principles small { color: #617276; font-size: .72rem; line-height: 1.5; }

.spatial-model { position: relative; overflow: hidden; color: var(--paper); background: #0a3a49; }.spatial-model::before { position: absolute; inset: 0; content: ""; opacity: .14; background-image: linear-gradient(rgba(193,231,214,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(193,231,214,.08) 1px, transparent 1px); background-size: 92px 92px; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); pointer-events: none; }.spatial-model > * { position: relative; z-index: 1; }.spatial-model .section-label { color: #a8cabc; }.spatial-model .section-label span { color: #d6f1da; }
.spatial-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(2rem, 5vw, 5rem); margin-top: 2.8rem; align-items: stretch; }.spatial-copy { max-width: 31rem; padding-top: clamp(1rem, 5vw, 5rem); }.spatial-copy h2 { margin: 0; color: var(--paper); font-size: clamp(3rem, 5vw, 5.7rem); }.spatial-copy h2 em { color: #b9ebd2; }.spatial-copy > p { color: #bad0c7; font-size: .92rem; line-height: 1.8; }.spatial-copy .lead { margin-top: 2rem; color: #e3efe9; font-size: clamp(1.12rem, 1.5vw, 1.35rem); line-height: 1.55; letter-spacing: -.03em; }.spatial-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 2.7rem; padding-top: 1.2rem; border-top: 1px solid rgba(193,231,214,.28); }.spatial-layers > div { display: flex; flex-direction: column; gap: .5rem; min-height: 7rem; padding: .9rem; border: 1px solid rgba(193,231,214,.18); border-radius: 1rem; background: rgba(7, 46, 59, .22); }.spatial-layers span { color: #b9ebd2; font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .015em; }.spatial-layers strong { color: #d4e2dc; font-size: .74rem; line-height: 1.5; }
.globe-panel { position: relative; min-height: 34rem; overflow: visible; transition: transform .55s cubic-bezier(.22,.61,.36,1); }.globe-panel::after { display: none; }.globe-panel canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: drop-shadow(0 1.7rem 2.5rem rgba(1,22,31,.34)); transition: transform .55s cubic-bezier(.22,.61,.36,1); }.globe-panel:hover { transform: translateY(-.25rem); }.globe-panel:hover canvas { transform: scale(1.028); }
.tide-panel { grid-column: 1 / -1; overflow: hidden; padding: 1.55rem 1.7rem; border: 1px solid rgba(193,231,214,.2); border-radius: 1.35rem; background: linear-gradient(110deg, rgba(8, 52, 66, .98), rgba(13, 73, 82, .88)); box-shadow: 0 1.3rem 3.2rem rgba(1, 22, 31, .16); transition: transform .35s ease, box-shadow .35s ease; }.tide-panel:hover { box-shadow: 0 1.8rem 3.8rem rgba(1,22,31,.23); transform: translateY(-.2rem); }.tide-panel svg { display: block; width: 100%; margin: 0; }.tide-grid { stroke: #b7d7ca; stroke-opacity: .12; stroke-width: 1; }.tide-datum { stroke: #eeb26d; stroke-opacity: .43; stroke-width: 1; stroke-dasharray: 4 6; }.tide-curve { stroke: #b9ebd2; stroke-width: 2.7; stroke-linecap: round; stroke-dasharray: 980; stroke-dashoffset: 980; filter: drop-shadow(0 .2rem .35rem rgba(40, 224, 177, .16)); }.tide-glint { fill: none; stroke: #f5dda7; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 28 1180; stroke-dashoffset: 1180; opacity: 0; }.tide-panel.is-visible .tide-curve { animation: tide-draw 1.65s cubic-bezier(.22,.61,.36,1) .15s forwards; }.tide-panel.is-visible .tide-glint { animation: tide-glide 6.4s linear 1.75s infinite; }.tide-panel:hover .tide-glint { animation-duration: 3.8s; }
@keyframes tide-draw { to { stroke-dashoffset: 0; } }
@keyframes tide-glide { 0% { opacity: 0; stroke-dashoffset: 1180; } 8% { opacity: .82; } 82% { opacity: .82; } 100% { opacity: 0; stroke-dashoffset: -85; } }

.services { background: #d6ded8; color: var(--ink); }
.services-intro { display: grid; grid-template-columns: 1fr .65fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }
.services :is(h1, h2), .experience h2 { color: var(--ink); font-size: clamp(2.9rem, 5vw, 5.7rem); }
.services-intro p { max-width: 22rem; margin: 0 0 .6rem; color: #456069; font-size: .95rem; line-height: 1.7; }
.services-summary { min-width: 0; }
.services-summary p { max-width: none; }
.service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 4rem; }
.service-family { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; margin: 2rem 0 .25rem; color: #365b60; font-size: .82rem; font-weight: 700; line-height: 1.5; }
.service-family:first-child { margin-top: 0; }
.service-family span { flex: none; color: #267b73; font-size: .7rem; letter-spacing: .08em; }
.service-card { position: relative; display: flex; overflow: hidden; flex-direction: column; min-height: 25rem; padding: 1.45rem; border: 1px solid rgba(7,27,41,.16); border-radius: 1.35rem; outline: 0; background: rgba(247,249,243,.46); box-shadow: 0 .8rem 1.8rem rgba(44,76,72,.08); transition: transform .34s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease, box-shadow .34s ease; }
.service-card > :not(.service-visual):not(.card-link) { position: relative; z-index: 1; }
.service-card:hover, .service-card:focus, .service-card:target { z-index: 2; color: var(--paper); background: var(--ink-2); box-shadow: 0 1.5rem 2.8rem rgba(16, 48, 57, .25); transform: translateY(-.35rem) scale(1.018); }.service-card:hover p, .service-card:hover li, .service-card:focus p, .service-card:focus li, .service-card:target p, .service-card:target li { color: #c1d2cc; }.service-card:hover .service-number, .service-card:focus .service-number, .service-card:target .service-number { color: var(--aqua); }.service-card:hover li::before, .service-card:focus li::before, .service-card:target li::before { color: var(--aqua); }.service-card:focus { outline: 2px solid var(--aqua); outline-offset: -3px; }.service-card:target { scroll-margin-top: 2rem; }
.service-card-wide { grid-column: span 3; min-height: 18.5rem; }.service-card-wide .service-visual { top: auto; bottom: 1.1rem; width: 43%; height: 64%; }
.service-number { margin: 0; color: #4f6c6d; font-family: var(--sans); font-size: .72rem; font-weight: 800; }
.service-card h3 { max-width: 72%; margin: 4.5rem 0 1.2rem; font-size: clamp(1.35rem, 1.7vw, 1.8rem); line-height: 1.07; letter-spacing: -.06em; font-weight: 600; }
.service-card > p:not(.service-number) { margin: 0; color: #38545b; font-size: .82rem; line-height: 1.7; }
.service-card ul { margin: auto 0 0; padding: 1.1rem 0 0; border-top: 1px solid currentColor; list-style: none; }.service-card li { position: relative; margin-top: .45rem; padding-left: .75rem; color: #456169; font-family: var(--sans); font-size: .67rem; font-weight: 600; line-height: 1.35; }.service-card li::before { position: absolute; left: 0; content: "·"; color: #157d78; }
.service-visual { position: absolute; z-index: 0; top: 1rem; right: 1rem; bottom: auto; left: auto; width: 48%; height: 34%; padding: 0; pointer-events: none; opacity: .13; transform: scale(.92); transform-origin: top right; transition: opacity .28s ease, transform .45s cubic-bezier(.22,.61,.36,1); }.service-visual svg { display: block; width: 100%; height: 100%; overflow: visible; }.service-card:hover .service-visual, .service-card:focus .service-visual { opacity: .47; transform: scale(1.08); }
.service-visual text { display: none; }.visual-grid { stroke: #92d9c1; stroke-width: .7; stroke-opacity: .28; }.visual-contour { stroke: #a5eed1; stroke-width: 1.2; stroke-opacity: .6; }.visual-line { stroke: #6bd3ff; stroke-width: 2.2; stroke-linecap: round; }.visual-fixes { fill: #a5eed1; stroke: #0b2637; stroke-width: 2; }.visual-water { stroke: #6bd3ff; stroke-width: 1.2; stroke-opacity: .72; }.visual-pulse { stroke: #a5eed1; stroke-width: 1.2; stroke-dasharray: 5 6; stroke-linecap: round; }.visual-seabed { stroke: #eeb26d; stroke-width: 1.75; }.visual-layer { stroke: #9ec7bc; stroke-width: .9; stroke-opacity: .7; stroke-dasharray: 3 4; }.visual-target { fill: rgba(238,178,109,.18); stroke: #eeb26d; stroke-width: 1.7; }.visual-mooring { stroke: #a5eed1; stroke-width: 1.3; stroke-dasharray: 4 4; }.visual-buoy { fill: #eeb26d; stroke: #f0f0e9; stroke-width: 1.4; }.visual-data-link { stroke: #a5eed1; stroke-width: 1.1; stroke-dasharray: 3 4; stroke-linecap: round; }.visual-instrument { fill: #6bd3ff; stroke: #bff4d8; stroke-width: 1.3; }.visual-anchor { fill: #a5eed1; stroke: #0b2637; stroke-width: 2; }.visual-current { stroke: #6bd3ff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.visual-vessel, .visual-sonar { stroke: #a5eed1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.visual-pipeline { stroke: #eeb26d; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 6 5; }.visual-kp { fill: #a5eed1; stroke: #0b2637; stroke-width: 2; opacity: 0; }.visual-system-core { fill: rgba(165,238,209,.16); stroke: #a5eed1; stroke-width: 1.4; }.visual-system-ring { stroke: #6bd3ff; stroke-width: .85; stroke-opacity: .65; stroke-dasharray: 4 5; }.visual-system-link { stroke: #a5eed1; stroke-width: 1.1; }.visual-system-node { fill: #eeb26d; stroke: #f0f0e9; stroke-width: 1.2; }.visual-isobath { stroke: #a5eed1; stroke-width: 1.45; }.iso-two { stroke: #6bd3ff; }.iso-three { stroke: #eeb26d; }.visual-workflow { stroke: #6bd3ff; stroke-width: 1.3; stroke-dasharray: 6 7; }.visual-workflow-node { fill: #0b2637; stroke: #a5eed1; stroke-width: 1.5; }
.service-card:hover .hydro-line, .service-card:focus .hydro-line { stroke-dasharray: 520; stroke-dashoffset: 520; animation: visual-draw 1.05s ease forwards; }.service-card:hover .visual-pulse, .service-card:focus .visual-pulse { stroke-dasharray: 250; stroke-dashoffset: 250; animation: visual-draw .8s ease forwards; }.service-card:hover .pulse-two, .service-card:focus .pulse-two { animation-delay: .12s; }.service-card:hover .pulse-three, .service-card:focus .pulse-three { animation-delay: .24s; }.service-card:hover .visual-current, .service-card:focus .visual-current, .service-card:hover .visual-mooring, .service-card:focus .visual-mooring, .service-card:hover .visual-buoy, .service-card:focus .visual-buoy { animation: visual-settle .75s ease forwards; }.service-card:hover .visual-data-link, .service-card:focus .visual-data-link { stroke-dasharray: 120; stroke-dashoffset: 120; animation: visual-draw .65s ease .3s forwards; }.service-card:hover .link-two, .service-card:focus .link-two { animation-delay: .45s; }.service-card:hover .visual-pipeline, .service-card:focus .visual-pipeline, .service-card:hover .visual-workflow, .service-card:focus .visual-workflow { stroke-dasharray: 560; stroke-dashoffset: 560; animation: visual-draw 1.05s ease forwards; }.service-card:hover .visual-kp, .service-card:focus .visual-kp { animation: visual-fade-up .4s ease .68s forwards; }.service-card:hover .visual-isobath, .service-card:focus .visual-isobath { stroke-dasharray: 560; stroke-dashoffset: 560; animation: visual-draw 1.2s ease forwards; }.service-card:hover .iso-two, .service-card:focus .iso-two { animation-delay: .14s; }.service-card:hover .iso-three, .service-card:focus .iso-three { animation-delay: .28s; }
@keyframes visual-draw { to { stroke-dashoffset: 0; } } @keyframes visual-settle { 50% { opacity: .42; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } } @keyframes visual-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.experience { color: var(--paper); background: var(--ink); }
.experience .section-label { color: var(--mist); }.experience .section-label span { color: var(--aqua); }
.experience-header { display: grid; grid-template-columns: .48fr 1.52fr; gap: 3rem; align-items: start; }.experience-header h2 { margin-top: 0; color: var(--paper); }.experience-header h2 em { color: var(--aqua); }.experience-header > div > p { max-width: 37rem; margin: 1.8rem 0 0; color: #aebeb9; font-size: .96rem; line-height: 1.8; }
.experience-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 1px; margin-top: 4.5rem; background: rgba(169, 237, 210, .28); }
.experience-card { display: flex; flex-direction: column; min-height: 29rem; padding: 1.55rem; background: var(--ink-2); transition: background .25s ease, transform .3s ease; scroll-margin-top: 2rem; }.experience-card:hover, .experience-card:target { background: #123a48; transform: translateY(-.25rem); }.experience-card-large { min-height: 29rem; background: #0e3140; }
.experience-tag { color: var(--aqua); font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .025em; }.experience-card > div:nth-child(2) { margin: auto 0 0; }.experience-card h3 { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.7rem); line-height: 1.02; letter-spacing: -.065em; }.experience-card p { max-width: 27rem; margin: 1.2rem 0 0; color: #b9c9c4; font-size: .82rem; line-height: 1.75; }.experience-detail { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }.experience-detail span, .experience-detail a { padding: .4rem .55rem; border: 1px solid rgba(165, 238, 209, .4); border-radius: .5rem; color: #d8f5e4; font-family: var(--sans); font-size: .66rem; font-weight: 700; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }.experience-detail a:hover, .experience-detail a:focus-visible { border-color: var(--aqua); color: var(--ink); background: var(--aqua); outline: none; transform: translateY(-1px); }.experience-note { max-width: 50rem; margin: 1.5rem 0 0; color: #a8c0b9; font-family: var(--sans); font-size: .72rem; font-weight: 600; line-height: 1.7; }

.technology { color: var(--paper); background: #0c2f3d; }.technology .section-label { color: #a7c0ba; }.technology-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }.technology-intro h2 { margin: 0; color: var(--paper); font-size: clamp(2.9rem, 5vw, 5.7rem); }.technology-intro h2 em { color: var(--aqua); }.technology-intro > p { max-width: 28rem; margin: 0 0 .55rem; color: #b8ccc5; font-size: .98rem; line-height: 1.75; }.technology-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 4rem; }.technology-card { min-height: 24rem; padding: 1.45rem; border: 1px solid rgba(165,238,209,.18); border-radius: 1.35rem; background: #103a49; box-shadow: 0 .8rem 1.8rem rgba(0,18,27,.13); scroll-margin-top: 2rem; transition: transform .35s cubic-bezier(.22,.61,.36,1), background .25s ease, border-color .25s ease, box-shadow .35s ease; }.technology-card:hover { background: #154655; transform: translateY(-.2rem); }.technology-card:target, .technology-card.is-active { z-index: 2; border-color: var(--sand); background: #165161; box-shadow: 0 1.7rem 3.3rem rgba(0,18,27,.33); transform: translateY(-.5rem) scale(1.025); }.technology-card:target { grid-column: span 2; }.technology-number { margin: 0; color: var(--aqua); font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .02em; }.technology-card h3 { margin: 4.1rem 0 1.1rem; color: var(--paper); font-size: clamp(1.45rem, 2vw, 2.15rem); line-height: 1.02; letter-spacing: -.06em; transition: font-size .28s ease; }.technology-card:target h3, .technology-card.is-active h3 { font-size: clamp(1.7rem, 2.5vw, 2.65rem); }.technology-plain { margin: 0; color: #c1d1cb; font-size: .85rem; line-height: 1.7; transition: font-size .28s ease; }.technology-card:target .technology-plain, .technology-card.is-active .technology-plain { font-size: .98rem; }.technology-plain strong { display: block; margin-bottom: .45rem; color: #e5f4ec; font-weight: 600; }.technology-card details { margin-top: 1.65rem; padding-top: .85rem; border-top: 1px solid rgba(165,238,209,.35); }.technology-card summary { cursor: pointer; color: var(--sky); font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .01em; }.technology-card details p { margin: .8rem 0 0; color: #c3d3ce; font-size: .82rem; line-height: 1.7; }

.delivery-model { color: var(--ink); background: #b9c9c1; }.delivery-model .section-label { color: #42646b; }.delivery-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }.delivery-heading h2 { margin: 0; color: var(--ink); font-size: clamp(2.9rem, 5vw, 5.7rem); }.delivery-heading h2 em { color: #167b73; }.delivery-heading p { max-width: 23rem; margin: 0 0 .7rem; color: #38545b; font-size: .95rem; line-height: 1.7; }.delivery-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 4rem 0 0; padding: 0; list-style: none; }.delivery-steps li { min-height: 15rem; padding: 1.35rem; border: 1px solid rgba(7,27,41,.13); border-radius: 1.15rem; background: #dbe2dc; box-shadow: 0 .8rem 1.7rem rgba(35,73,70,.08); }.delivery-steps strong { display: block; margin-top: 3.4rem; font-size: 1.2rem; letter-spacing: -.04em; }.delivery-steps p { margin: .65rem 0 0; color: #466168; font-size: .77rem; line-height: 1.65; }

.scope-examples { color: var(--ink); background: var(--paper); }.scope-examples .section-label { color: #527070; }.scope-examples .section-label span { color: #087770; }.scope-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }.scope-intro h2 { margin: 0; color: var(--ink); font-size: clamp(2.9rem, 5vw, 5.7rem); line-height: .98; }.scope-intro h2 em { color: #2d817a; }.scope-intro p { max-width: 28rem; margin: 0 0 .55rem; color: #456069; font-size: .95rem; line-height: 1.75; }.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 4rem; }.scope-card { display: flex; flex-direction: column; min-height: 23rem; padding: 1.45rem; border: 1px solid rgba(7,27,41,.14); border-radius: 1.25rem; background: rgba(255,255,255,.48); box-shadow: 0 .8rem 1.8rem rgba(42,73,68,.07); transition: color .25s ease, background .25s ease, transform .3s ease, box-shadow .3s ease; }.scope-card:hover { color: var(--paper); background: var(--ink-2); box-shadow: 0 1.4rem 2.7rem rgba(11,38,55,.23); transform: translateY(-.3rem); }.scope-number { margin: 0; color: #4f6c6d; font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .025em; }.scope-card:hover .scope-number { color: var(--aqua); }.scope-card h3 { margin: 4.2rem 0 1.1rem; font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.06; letter-spacing: -.06em; }.scope-card > p:not(.scope-number) { margin: 0; color: #38545b; font-size: .82rem; line-height: 1.7; }.scope-card:hover > p:not(.scope-number), .scope-card:hover li { color: #b5c7c0; }.scope-card ul { margin: auto 0 0; padding: 1.1rem 0 0; border-top: 1px solid currentColor; list-style: none; }.scope-card li { position: relative; margin-top: .45rem; padding-left: .75rem; color: #456169; font-family: var(--sans); font-size: .67rem; font-weight: 600; line-height: 1.4; }.scope-card li::before { position: absolute; left: 0; content: "·"; color: #157d78; }.scope-card:hover li::before { color: var(--aqua); }

.contact { position: relative; color: var(--ink); background: var(--sand); }.contact::before { position: absolute; inset: 0; content: ""; opacity: .25; background-image: radial-gradient(#0c3540 1px, transparent 1px); background-size: 13px 13px; pointer-events: none; }.contact-inner { position: relative; z-index: 1; padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 10vw, 9rem); }.contact .section-label { color: #314e53; }.contact .section-label span { color: #0d776f; }.contact :is(h1, h2) { max-width: 58rem; color: var(--ink); font-size: clamp(3.2rem, 6.5vw, 7.1rem); }.contact :is(h1, h2) em { color: #0c746e; }.contact-copy { max-width: 38rem; margin: 2rem 0 3.5rem; font-size: 1.04rem; line-height: 1.7; color: #2a4e54; }.contact-form { max-width: 58rem; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }.contact-form label { display: block; margin-bottom: 1.5rem; }.contact-form label > span { display: block; margin-bottom: .6rem; font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .025em; }.contact-form input, .contact-form textarea { width: 100%; padding: .85rem 0; border: 0; border-bottom: 1px solid rgba(7,27,41,.6); outline: none; background: transparent; color: var(--ink); font-size: 1rem; transition: border-color .2s ease; }.contact-form textarea { min-height: 7rem; resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { border-color: #08716a; }.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: .5rem; }.form-footer p { max-width: 24rem; margin: 0; color: #476165; font-family: var(--sans); font-size: .72rem; font-weight: 600; line-height: 1.6; }.button-light { color: var(--paper); background: var(--ink); }.button-light:hover { background: #164257; }.form-message { margin: 1rem 0 0; min-height: 1.3rem; color: #075b56; font-family: var(--sans); font-size: .74rem; font-weight: 700; }
.form-footer p a { color: var(--ink); font-weight: 700; border-bottom: 1px solid currentColor; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 1.5rem; min-height: 7.5rem; background: var(--ink); color: #afc2bd; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .02em; }.footer-wordmark { color: var(--paper); font-family: var(--sans); font-size: .95rem; font-weight: 700; letter-spacing: .16em; white-space: nowrap; }.footer-wordmark span { color: var(--aqua); font-weight: 600; }.site-footer p { margin: 0; }.site-footer p:last-child { text-align: right; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 820px) {
  .section, .site-header, .site-footer, .response-route, .contact-inner { padding-left: 1.4rem; padding-right: 1.4rem; }
  .site-header { padding-top: 1.4rem; padding-bottom: 1.4rem; }.brand-logo { gap: .55rem; }.brand-mark-shell { width: 4.25rem; }.brand-name { font-size: .7rem; }.header-actions { gap: .6rem; }.language-switch { position: relative; z-index: 6; font-size: .62rem; }.menu-toggle { position: relative; z-index: 6; display: grid; width: 40px; height: 40px; padding: 10px 8px; border: 1px solid rgba(165,238,209,.55); background: transparent; cursor: pointer; }.menu-toggle span:not(.visually-hidden) { display: block; width: 100%; height: 1px; background: var(--aqua); transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-5px) rotate(-45deg); }.site-nav { position: absolute; top: 0; right: 0; left: 0; display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 6.2rem 1.4rem 2rem; background: #082d40; opacity: 0; transform: translateY(-10px); transition: visibility .2s ease, opacity .2s ease, transform .2s ease; }.site-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }.nav-group { display: block; width: 100%; padding: 0; }.nav-primary { display: block; color: #e2eee8; font-size: .86rem; }.nav-dropdown { position: static; display: grid; min-width: 0; gap: .05rem; margin: .5rem 0 0 .2rem; padding: 0 0 0 .7rem; border: 0; border-left: 1px solid rgba(165,238,209,.28); border-radius: 0; background: transparent; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; visibility: visible; }.nav-dropdown a { padding: .33rem .1rem; color: #9fc0b5; font-size: .67rem; }.nav-dropdown a:hover, .nav-dropdown a:focus-visible { color: var(--aqua); background: transparent; }.site-header .nav-contact { border-color: rgba(165,238,209,.5); color: var(--aqua); }.nav-contact { margin-top: .3rem; font-size: .76rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 7.5rem; gap: 0; }.hero-copy { max-width: none; padding-bottom: 2.5rem; }.hero-identity { font-size: .78rem; }.hero-disciplines { margin-left: 0; }.hero h1 { font-size: clamp(3.2rem, 14vw, 5rem); }.hero::before { background: linear-gradient(0deg, var(--ink) 0%, rgba(7, 27, 41, 0) 10%); }.hero-bathy { position: relative; inset: auto; height: clamp(340px, 92vw, 460px); margin: 0 -1.4rem; -webkit-mask-image: none; mask-image: none; }.hero-bathy::before { inset: 0; }.hero-bathy::after { inset: 10% 0; }
  .route-heading { grid-template-columns: 1fr; gap: 1.2rem; }.route-heading p { margin: 0; }.route-heading small { grid-column: auto; margin-top: 0; }.route-steps { grid-template-columns: 1fr; margin-top: 2.3rem; }.route-steps li { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: .8rem; min-height: auto; padding: 1.1rem; }.route-steps strong { margin-top: 0; }.route-steps small { grid-column: 2; margin-top: .45rem; }
  .about-grid, .spatial-grid, .services-intro, .experience-header, .technology-intro { grid-template-columns: 1fr; gap: 2rem; }.about :is(h1, h2), .spatial-copy h2, .services :is(h1, h2), .experience h2, .technology-intro h2, .delivery-heading h2, .contact :is(h1, h2) { font-size: clamp(2.8rem, 12vw, 4.5rem); }.principles { grid-template-columns: 1fr; gap: 1.4rem; }.principles > div { padding-bottom: 1rem; border-bottom: 1px solid var(--line-light); }.principles > div:last-child { border-bottom: 0; }.spatial-copy { padding-top: 0; }.spatial-layers { grid-template-columns: 1fr; gap: 1rem; }.globe-panel { min-height: 25rem; }.tide-panel { grid-column: auto; padding: 1.1rem; border-radius: 1.1rem; }
  .service-list, .experience-grid, .technology-grid, .delivery-steps, .scope-grid { grid-template-columns: 1fr; }.service-card, .service-card-wide { grid-column: auto; min-height: 21rem; }.service-card h3 { margin-top: 3.5rem; }.service-card-wide .service-visual { top: auto; right: 1rem; bottom: 1rem; left: auto; width: 70%; height: 46%; }.experience-card, .experience-card-large { min-height: 22rem; }.technology-card, .technology-card:target { grid-column: auto; min-height: auto; }.technology-card h3 { margin-top: 2.75rem; }.delivery-heading, .scope-intro { grid-template-columns: 1fr; gap: 2rem; }.delivery-steps li { min-height: 12rem; }.delivery-steps strong { margin-top: 2.2rem; }.scope-card { min-height: 20rem; }.scope-card h3 { margin-top: 3.5rem; }.form-row { grid-template-columns: 1fr; gap: 0; }.form-footer { align-items: flex-start; flex-direction: column; }.site-footer { grid-template-columns: 1fr; padding-top: 2rem; padding-bottom: 2rem; }.site-footer p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.tide-curve { stroke-dashoffset: 0; }.tide-glint { opacity: 0; }.hero-survey-canvas, .tide-curve, .tide-glint, .route-steps li, .service-visual *, .service-card, .technology-card, .globe-panel, .globe-panel canvas, .tide-panel { animation: none !important; transition: none !important; }.route-steps li, .reveal { opacity: 1; transform: none; transition: none; }
}

/* Delivery chain: interactive stages and stage detail */
.response-route { position: relative; }
.route-steps { position: relative; gap: .9rem; }
.route-steps::before { position: absolute; z-index: 0; top: 50%; right: 4%; left: 4%; height: 2px; content: ""; background: linear-gradient(90deg, rgba(39, 129, 122, .6) var(--route-progress, 10%), rgba(39, 129, 122, .14) var(--route-progress, 10%)); }
.route-steps li { position: relative; z-index: 1; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; opacity: 1; transform: none; animation: none !important; }
.route-step { position: relative; display: flex; overflow: hidden; flex-direction: column; width: 100%; min-height: 13.5rem; padding: 1.35rem 1.25rem 1.5rem; border: 1px solid rgba(7, 48, 57, .14); border-radius: 1.15rem; color: #102e3a; background: rgba(246, 248, 241, .86); box-shadow: 0 .8rem 1.8rem rgba(27, 73, 73, .08); font: inherit; text-align: left; cursor: pointer; transition: transform .35s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease, box-shadow .35s ease, border-color .3s ease; }
.route-step span { color: #27817a; font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; transition: color .3s ease; }
.route-step strong { display: block; margin-top: auto; padding-top: 2rem; color: inherit; font-size: clamp(1.25rem, 1.6vw, 1.55rem); letter-spacing: -.045em; }
.route-step small { display: block; margin-top: .65rem; color: #3f5f63; font-size: .93rem; line-height: 1.55; transition: color .3s ease; }
.route-step::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ""; background: var(--aqua); transform: scaleX(0); transform-origin: left; }
.route-step:hover, .route-step:focus-visible, .route-step.is-active { z-index: 2; border-color: rgba(165, 238, 209, .4); color: var(--paper); background: var(--ink-2); box-shadow: 0 1.4rem 2.8rem rgba(11, 38, 55, .28); outline: none; transform: translateY(-.45rem) scale(1.03); }
.route-step:hover span, .route-step:focus-visible span, .route-step.is-active span { color: var(--aqua); }
.route-step:hover small, .route-step:focus-visible small, .route-step.is-active small { color: #c1d2cc; }
.route-steps.is-cycling .route-step.is-active::after { animation: route-progress 6.5s linear forwards; }
@keyframes route-progress { to { transform: scaleX(1); } }
.route-panel { position: relative; margin-top: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden; border-radius: 1.4rem; color: var(--paper); background: linear-gradient(120deg, #0b2637, #0e3445 60%, #113c4a); box-shadow: 0 1.6rem 3.6rem rgba(11, 38, 55, .22); }
.route-panel::before { position: absolute; inset: 0; content: ""; opacity: .1; background-image: linear-gradient(rgba(193,231,214,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(193,231,214,.18) 1px, transparent 1px); background-size: 46px 46px; pointer-events: none; }
.route-detail { position: relative; display: none; }
.route-detail.is-active { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: center; }
.route-detail-head p { margin: 0; color: var(--aqua); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.route-detail-head h3 { margin: .7rem 0 0; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.05em; }
.route-detail-head > span { display: block; margin-top: .9rem; color: #c1d2cc; font-size: .95rem; line-height: 1.6; }
.route-detail-head a { display: inline-flex; margin-top: 1.3rem; padding-bottom: .2rem; border-bottom: 1px solid rgba(165,238,209,.6); color: var(--aqua); font-size: .8rem; font-weight: 700; }
.route-flow { position: relative; display: grid; grid-template-columns: repeat(var(--nodes, 5), minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.route-flow li { position: relative; padding: 1rem .9rem 1.05rem; border: 1px solid rgba(165, 238, 209, .22); border-radius: .95rem; background: rgba(7, 27, 41, .55); opacity: 0; transform: translateY(.8rem); }
.route-flow li::before { position: absolute; top: 50%; left: -.7rem; width: .7rem; height: 1px; content: ""; background: rgba(165, 238, 209, .55); }
.route-flow li:first-child::before { display: none; }
.route-flow li strong { display: block; color: #e8f6ee; font-size: .92rem; letter-spacing: -.02em; }
.route-flow li small { display: block; margin-top: .45rem; color: #a9c2ba; font-size: .78rem; line-height: 1.5; }
.route-flow li i { display: block; width: .55rem; height: .55rem; margin-bottom: .7rem; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 .3rem rgba(165, 238, 209, .14); }
.route-detail.is-active .route-flow li { animation: route-node-in .5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes route-node-in { to { opacity: 1; transform: none; } }
.route-note { max-width: 46rem; margin: 1.2rem 0 0; color: #3e5e63; font-size: .86rem; line-height: 1.65; }

/* About: director-led network */
.about-network { margin-top: 2.6rem; }
.about-network svg { display: block; width: 100%; max-width: 30rem; height: auto; overflow: visible; }
.network-link { fill: none; stroke: #2d817a; stroke-width: 1.2; stroke-opacity: .55; stroke-dasharray: 260; stroke-dashoffset: 260; }
.network-link.is-core { stroke: #0e3a48; stroke-opacity: .8; stroke-width: 1.6; }
.about-network.is-visible .network-link { animation: network-draw 1.4s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes network-draw { to { stroke-dashoffset: 0; } }
.network-scope { fill: rgba(238, 178, 109, .25); stroke: #c9822f; stroke-width: 1.6; }
.network-scope-pulse { fill: rgba(238, 178, 109, .07); stroke: #c9822f; stroke-width: 1.2; opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
/* the scope wave travels out to the last specialist: the network covers the scope */
.about-network.is-visible .network-scope-pulse { animation: network-cover 3.6s linear 1.2s infinite; }
@keyframes network-cover { 0% { opacity: .85; transform: scale(1); } 78% { opacity: .55; } 100% { opacity: 0; transform: scale(9.8); } }
.network-director { fill: #0e3a48; stroke: #f0f0e9; stroke-width: 2; }
.network-specialist { fill: #f0f0e9; stroke: #2d817a; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.about-network.is-visible .network-specialist { animation: network-node 4.8s ease-in-out infinite, network-hit 3.6s linear infinite; animation-delay: calc(.6s + var(--i, 0) * 120ms), calc(1.2s + var(--reach, 0s)); }
@keyframes network-hit { 0% { fill: #eeb26d; stroke: #c9822f; } 20% { fill: #f0f0e9; stroke: #2d817a; } 100% { fill: #f0f0e9; stroke: #2d817a; } }
@keyframes network-node { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(1); } 75% { opacity: .55; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
.network-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .8rem 0 0; padding: 0; color: #51716f; font-size: .74rem; font-weight: 700; list-style: none; }
.network-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.network-legend li::before { width: .7rem; height: .7rem; border-radius: 50%; content: ""; }
.network-legend .legend-director::before { background: #0e3a48; }
.network-legend .legend-specialist::before { border: 1.5px solid #2d817a; background: #f0f0e9; }
.network-legend .legend-scope::before { border: 1.5px solid #c9822f; background: rgba(238,178,109,.3); }
.principles.is-four { grid-template-columns: repeat(4, 1fr); }

/* Services: visuals always alive, stronger on hover */
.service-visual { width: 56%; height: 40%; opacity: .92; transform: none; filter: brightness(.48) saturate(1.7) contrast(1.15); transition: opacity .28s ease, filter .3s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.service-card:hover .service-visual, .service-card:focus .service-visual, .service-card:target .service-visual { opacity: 1; filter: none; transform: scale(1.06); }
.service-card:not(.service-card-wide) .service-visual { top: 2.2rem; width: 62%; height: 6.6rem; }
.service-card:not(.service-card-wide) h3 { margin-top: 8.2rem; }
.service-card.is-visible .hydro-line { stroke-dasharray: 520; animation: visual-loop-draw 5.5s ease-in-out infinite; }
.service-card.is-visible .visual-pulse { stroke-dasharray: 250; animation: visual-loop-draw 3.2s ease-in-out infinite; }
.service-card.is-visible .pulse-two { animation-delay: .35s; }
.service-card.is-visible .pulse-three { animation-delay: .7s; }
.service-card.is-visible .visual-target { animation: visual-blink 3.2s ease-in-out infinite; }
.service-card.is-visible .visual-buoy, .service-card.is-visible .visual-data-link { animation: visual-bob 2.8s ease-in-out infinite; }
.service-card.is-visible .visual-current { animation: visual-drift 3.6s ease-in-out infinite; }
.service-card.is-visible .visual-vessel, .service-card.is-visible .visual-sonar { animation: visual-sail 7s ease-in-out infinite; }
.service-card.is-visible .visual-pipeline, .service-card.is-visible .visual-workflow { animation: visual-flow 2.4s linear infinite; }
.service-card.is-visible .visual-kp { animation: visual-blink 3s ease-in-out infinite; }
.service-card.is-visible .visual-system-ring { transform-box: fill-box; transform-origin: center; animation: visual-spin 18s linear infinite; }
.service-card.is-visible .ring-two { animation-direction: reverse; animation-duration: 26s; }
.service-card.is-visible .visual-system-node { animation: visual-blink 2.6s ease-in-out infinite; }
.service-card.is-visible .node-two { animation-delay: .65s; }
.service-card.is-visible .node-three { animation-delay: 1.3s; }
.service-card.is-visible .node-four { animation-delay: 1.95s; }
.service-card.is-visible .visual-isobath { stroke-dasharray: 560; animation: visual-loop-draw 6s ease-in-out infinite; }
.service-card.is-visible .iso-two { animation-delay: .5s; }
.service-card.is-visible .iso-three { animation-delay: 1s; }
.service-card.is-visible .visual-workflow-node { animation: visual-blink 3s ease-in-out infinite; }
@keyframes visual-loop-draw { 0% { stroke-dashoffset: 560; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -560; } }
@keyframes visual-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes visual-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes visual-drift { 0%, 100% { transform: translateX(0); opacity: .6; } 50% { transform: translateX(8px); opacity: 1; } }
@keyframes visual-sail { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(16px); } }
@keyframes visual-flow { to { stroke-dashoffset: -22; } }
@keyframes visual-spin { to { transform: rotate(360deg); } }
.services-for { margin: 1.2rem 0 0; color: #456069; font-size: .82rem; font-weight: 700; letter-spacing: .01em; }

/* Deliverables */
.deliverables { margin-top: 4.5rem; padding-top: 2.6rem; border-top: 1px solid var(--line-light); }
.deliverables-head { display: grid; grid-template-columns: 1fr .9fr; gap: 2rem; align-items: end; }
.deliverables-head h3 { margin: 0; color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.06em; }
.deliverables-head h3 em { color: #2d817a; font-family: Georgia, serif; font-weight: 400; }
.deliverables-head p { max-width: 26rem; margin: 0; color: #456069; font-size: .92rem; line-height: 1.65; }
.deliverable-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.deliverable-grid li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .9rem; align-items: start; padding: 1.15rem; border: 1px solid rgba(7,27,41,.13); border-radius: 1.1rem; background: rgba(247,249,243,.6); transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; }
.deliverable-grid li:hover { color: var(--paper); background: var(--ink-2); box-shadow: 0 1.2rem 2.4rem rgba(16,48,57,.22); transform: translateY(-.3rem); }
.deliverable-grid svg { width: 3.2rem; height: 3.2rem; padding: .55rem; border-radius: .8rem; background: #0b2637; overflow: visible; }
.deliverable-grid strong { display: block; font-size: 1rem; letter-spacing: -.03em; }
.deliverable-grid small { display: block; margin-top: .35rem; color: #4a6669; font-size: .82rem; line-height: 1.55; }
.deliverable-grid li:hover small { color: #c1d2cc; }
.home-deliverables { color: var(--ink); background: var(--paper-dark); padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.home-deliverables .deliverables { margin-top: 1.8rem; padding-top: 0; border-top: 0; }
.home-deliverables .deliverables-head h2 { margin: 0; color: var(--ink); font-size: clamp(2.3rem, 4vw, 4.4rem); }
.home-deliverables .deliverables-head h2 em { color: #2d817a; }
.page-home main > section[id] { scroll-margin-top: 5rem; }
.icon-line { fill: none; stroke: var(--aqua); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-accent { fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-linecap: round; }
.icon-fill { fill: var(--sand); }

/* Sectors */
.sectors { color: var(--paper); background: #0a3a49; }
.sectors .section-label { color: #a8cabc; }
.sectors-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }
.sectors-intro h2 { margin: 0; color: var(--paper); font-size: clamp(2.9rem, 5vw, 5.4rem); }
.sectors-intro h2 em { color: var(--aqua); }
.sectors-intro p { max-width: 26rem; margin: 0 0 .5rem; color: #bad0c7; font-size: .95rem; line-height: 1.7; }
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 3.4rem; }
.sector-card { position: relative; display: flex; flex-direction: column; min-height: 17rem; padding: 1.45rem; overflow: hidden; border: 1px solid rgba(165,238,209,.2); border-radius: 1.3rem; background: rgba(7, 39, 52, .55); scroll-margin-top: 6rem; transition: transform .35s cubic-bezier(.22,.61,.36,1), background .3s ease, border-color .3s ease, box-shadow .35s ease; }
.sector-card::before { position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; border: 1px solid rgba(165,238,209,.18); border-radius: 50%; content: ""; box-shadow: 0 0 0 1.6rem rgba(165,238,209,.04), 0 0 0 3.2rem rgba(165,238,209,.03); transition: transform .6s ease; }
.sector-card:hover, .sector-card:focus-within, .sector-card:target { border-color: rgba(238,178,109,.55); background: #0e4656; box-shadow: 0 1.6rem 3rem rgba(1,22,31,.3); transform: translateY(-.35rem); }
.sector-card:hover::before, .sector-card:target::before { transform: scale(1.25); }
.sector-card p:first-of-type { margin: 0; color: var(--sand); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sector-card h3 { margin: 2.6rem 0 .8rem; font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.08; letter-spacing: -.05em; }
.sector-card > p:not(:first-of-type) { margin: 0; color: #bfd2cb; font-size: .86rem; line-height: 1.65; }
.sector-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.3rem; }
.sector-links a { padding: .38rem .6rem; border: 1px solid rgba(165,238,209,.4); border-radius: .55rem; color: #d8f5e4; font-size: .7rem; font-weight: 700; transition: background .2s ease, color .2s ease; }
.sector-links a:hover, .sector-links a:focus-visible { color: var(--ink); background: var(--aqua); outline: none; }

/* Site drawer (sitemap ribbon) */
.menu-toggle { position: relative; z-index: 12; display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(165,238,209,.55); border-radius: .35rem; background: rgba(7, 27, 41, .35); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.menu-toggle span:not(.visually-hidden):not(.sonar-ring) { display: block; width: 20px; height: 1.5px; background: var(--aqua); transition: transform .25s ease; }
.menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--aqua); background: rgba(165,238,209,.12); outline: none; }
.menu-toggle span.sonar-ring { position: absolute; inset: -1px; width: auto; height: auto; background: none; border: 1px solid var(--aqua); border-radius: .35rem; opacity: 0; pointer-events: none; }
.menu-toggle.is-pinging .sonar-ring { animation: sonar-ring 1s ease-out forwards; }
.menu-toggle.is-pinging .sonar-ring + .sonar-ring { animation-delay: .18s; }
body.is-scrolled .menu-toggle { position: fixed; z-index: 22; top: 1rem; right: clamp(1rem, 2.4vw, 2rem); background: rgba(7, 27, 41, .86); box-shadow: 0 .6rem 1.4rem rgba(1, 12, 20, .28); backdrop-filter: blur(6px); animation: toggle-float-in .35s cubic-bezier(.22,.61,.36,1); }
@keyframes toggle-float-in { from { opacity: 0; transform: translateY(-.6rem); } }
@keyframes sonar-ring { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); border-radius: 50%; } }
.drawer-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(3, 14, 22, .55); opacity: 0; pointer-events: none; transition: opacity .3s ease; backdrop-filter: blur(2px); }
.site-drawer { position: fixed; z-index: 21; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(20rem, 86vw); padding: 1.15rem 1.4rem 1.4rem; overflow-y: auto; color: var(--paper); background: linear-gradient(180deg, #082d40, #071b29 70%); border-right: 1px solid rgba(165,238,209,.18); box-shadow: 1.4rem 0 3rem rgba(1, 12, 20, .4); transform: translateX(-104%); transition: transform .45s cubic-bezier(.22,.61,.36,1), visibility .45s; visibility: hidden; }
.site-drawer { scrollbar-width: thin; scrollbar-color: rgba(165,238,209,.28) transparent; }
.site-drawer::-webkit-scrollbar { width: 6px; }
.site-drawer::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(165,238,209,.28); }
.site-drawer::-webkit-scrollbar-track { background: transparent; }
body.drawer-open { overflow: hidden; }
body.drawer-open .site-drawer { transform: none; visibility: visible; }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(165,238,209,.16); }
.drawer-top p { margin: 0; color: var(--aqua); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-close { width: 36px; height: 36px; border: 1px solid rgba(165,238,209,.4); border-radius: .35rem; color: var(--aqua); background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.drawer-close:hover, .drawer-close:focus-visible { border-color: var(--aqua); outline: none; }
.drawer-group { padding: .85rem 0 .3rem; border-bottom: 1px solid rgba(165,238,209,.1); }
.drawer-group h2 { margin: 0 0 .35rem; color: #8fb3a8; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-group a { display: flex; align-items: center; gap: .7rem; padding: .3rem .2rem; color: #e2eee8; font-size: .84rem; font-weight: 600; letter-spacing: -.01em; opacity: 0; transform: translateX(-.6rem); transition: color .2s ease; }
.drawer-group a::before { width: .4rem; height: .4rem; flex: none; border: 1px solid var(--aqua); border-radius: 50%; content: ""; transition: background .2s ease; }
.drawer-group a:hover, .drawer-group a:focus-visible { color: var(--aqua); outline: none; }
.drawer-group a:hover::before, .drawer-group a:focus-visible::before { background: var(--aqua); }
body.drawer-open .drawer-group a { animation: drawer-link-in .4s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(.12s + var(--i, 0) * 28ms); }
@keyframes drawer-link-in { to { opacity: 1; transform: none; } }
.drawer-contact { margin-top: auto; padding-top: 1.6rem; color: #a9c2ba; font-size: .8rem; line-height: 1.7; }
.drawer-contact a { color: var(--aqua); font-weight: 700; }

/* Footer */
.site-footer { grid-template-columns: auto 1fr auto; }
.site-footer p.footer-legal { line-height: 1.7; text-align: right; }
.footer-legal a { color: var(--aqua); }

/* --- globe v11: real coastlines, isobaths, mobilisation arcs --- */
.globe-panel:hover, .globe-panel:hover canvas { transform: none; }
.globe-panel canvas.globe-overlay { z-index: 1; filter: none; cursor: grab; touch-action: pan-y; }
.globe-panel canvas.globe-overlay.is-dragging { cursor: grabbing; }
.globe-legend { position: absolute; z-index: 2; left: 0; bottom: .2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; color: #d3e7df; font-size: .68rem; font-weight: 700; letter-spacing: .07em; list-style: none; text-transform: uppercase; pointer-events: none; }
.globe-legend li { display: flex; align-items: center; gap: .55rem; }
.globe-legend li::before { width: .55rem; height: .55rem; flex: none; border: 1.5px solid var(--aqua); border-radius: 50%; content: ""; }
.globe-legend li { --cat: 165, 238, 209; transition: opacity .2s ease; }
.globe-legend li[data-cat="oilgas"] { --cat: 238, 178, 109; }
.globe-legend li[data-cat="wind"] { --cat: 107, 211, 255; }
.globe-legend li[data-cat="cables"] { --cat: 195, 166, 255; }
.globe-legend li[data-cat="uxo"] { --cat: 255, 138, 122; }
.globe-legend li::before { border-color: rgb(var(--cat)); background: rgb(var(--cat)); }
.globe-legend button { pointer-events: auto; padding: 0; border: 0; color: inherit; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.globe-legend button:hover, .globe-legend button:focus-visible, .globe-legend li.is-on button { color: rgb(var(--cat)); }
.globe-legend.is-filtered li:not(.is-on) { opacity: .45; }
.globe-legend li.is-on::before { box-shadow: 0 0 0 4px rgba(var(--cat), .22); }
.globe-tip em { display: block; margin-top: .15rem; font-size: .64rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.globe-hint { position: absolute; z-index: 2; right: 0; bottom: .2rem; margin: 0; color: #9fc2b7; font-size: .68rem; font-weight: 600; letter-spacing: .04em; pointer-events: none; transition: opacity .5s ease; }
.globe-panel.is-explored .globe-hint { opacity: 0; }
@media (hover: none) { .globe-hint { display: none; } }
/* --- about: field experience band with the globe --- */
.about-field { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(3.5rem, 8vw, 6rem); padding: clamp(1.6rem, 4vw, 3.2rem); overflow: hidden; border-radius: 1.6rem; color: var(--paper); background: radial-gradient(120% 140% at 78% 45%, #0f4a5a 0%, #0a3a49 42%, #072a39 100%); box-shadow: 0 1.8rem 3.6rem rgba(1, 22, 31, .22); }
.about-field::before { position: absolute; inset: 0; content: ""; opacity: .12; background-image: linear-gradient(rgba(193,231,214,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(193,231,214,.1) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; }
.about-field > * { position: relative; }
.about-field-label { margin: 0; color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-field h3 { margin: .9rem 0 1.1rem; color: var(--paper); font-size: clamp(2rem, 3.4vw, 3.3rem); font-weight: 600; line-height: 1.02; letter-spacing: -.055em; }
.about-field h3 em { color: #b9ebd2; font-family: Georgia, serif; font-weight: 400; letter-spacing: -.07em; }
.about-field-copy > p { margin: 0; color: #bad0c7; font-size: .92rem; line-height: 1.75; }
.field-facts { display: grid; gap: 1.15rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(193,231,214,.22); }
.field-fact strong { display: block; color: #e3efe9; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.field-fact.is-certified strong::before { display: inline-block; width: .95rem; height: .95rem; margin-right: .45rem; vertical-align: -.14rem; content: ""; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eeb26d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5 13.5 3.5v4c0 3.4-2.3 5.9-5.5 7-3.2-1.1-5.5-3.6-5.5-7v-4z'/%3E%3Cpath d='m5.4 8 1.8 1.8 3.4-3.6'/%3E%3C/svg%3E"); }
.field-fact small { display: block; margin-top: .3rem; color: #9fc2b7; font-size: .78rem; }
.field-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.field-chips li { padding: .32rem .62rem; border: 1px solid rgba(165,238,209,.32); border-radius: 999px; color: #dcebe5; font-size: .72rem; font-weight: 600; line-height: 1.2; background: rgba(165,238,209,.06); }
.field-fact.is-certified .field-chips li { border-color: rgba(238,178,109,.4); background: rgba(238,178,109,.07); }
.about-field .globe-panel { min-height: 36rem; }
.globe-panel canvas.globe-overlay.is-pointing { cursor: pointer; }
.globe-tip { position: absolute; z-index: 3; top: 0; left: 0; max-width: 17rem; padding: .7rem .85rem; border: 1px solid rgba(165,238,209,.35); border-radius: .8rem; color: var(--paper); background: rgba(5, 24, 34, .92); box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .3); pointer-events: none; backdrop-filter: blur(6px); }
.globe-tip[hidden] { display: none; }
.globe-tip strong { display: block; color: var(--aqua); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.globe-tip ul { margin: .4rem 0 0; padding-left: 1rem; }
.globe-tip li { margin-top: .2rem; color: #d6e6e0; font-size: .76rem; line-height: 1.4; }
.globe-zoom { position: absolute; z-index: 3; top: .4rem; right: 0; display: grid; gap: .35rem; }
.globe-zoom button { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(165,238,209,.45); border-radius: .4rem; color: var(--aqua); font: 600 1.1rem/1 var(--sans); background: rgba(7,27,41,.6); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.globe-zoom button:hover, .globe-zoom button:focus-visible { border-color: var(--aqua); background: rgba(165,238,209,.14); outline: none; }

/* --- spatial: three data layers on the same survey control --- */
.layer-stack { position: relative; display: flex; align-items: center; justify-content: center; min-height: 30rem; }
.layer-stack svg { display: block; width: 100%; max-width: 46rem; height: auto; overflow: visible; }
.stack-side { fill: rgba(5, 30, 42, .92); stroke: rgba(165,238,209,.22); stroke-width: 1; }
.stack-side.is-right { fill: rgba(9, 46, 60, .92); }
.stack-plate { fill: rgba(12, 62, 78, .9); stroke: rgba(165,238,209,.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.layer-2 .stack-plate { fill: #134e66; }
.layer-3 .stack-plate { fill: rgba(12, 62, 78, .55); }
.stack-grid { stroke: rgba(165,238,209,.25); stroke-width: .8; vector-effect: non-scaling-stroke; }
.stack-datum { stroke: rgba(238,178,109,.55); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.stack-control circle { fill: rgba(238,178,109,.25); stroke: var(--sand); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.stack-control path { stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stack-control.is-faint { opacity: .55; }
.bathy-mid { fill: #2b8790; }
.bathy-shallow { fill: #5fb5a7; }
.bathy-coast { fill: #c9a472; }
.stack-swath-lines { stroke: rgba(240,240,233,.22); stroke-width: .7; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.stack-swath rect { fill: rgba(165,238,209,.16); }
.stack-swath path { stroke: var(--aqua); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.iso-line { stroke: rgba(165,238,209,.75); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.decision-channel { fill: rgba(238,178,109,.14); stroke: var(--sand); stroke-width: 1.2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.decision-route { stroke: var(--sky); stroke-width: 1.8; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.decision-kp circle { fill: var(--ink); stroke: var(--sky); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.stack-plumb { stroke: rgba(238,178,109,.6); stroke-width: 1; stroke-dasharray: 3 4; }
.stack-tick { stroke: rgba(240,240,233,.5); stroke-width: 1; }
.stack-label { fill: #d3e7df; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.layer-stack.is-visible .layer-3 { animation: stack-top 9s cubic-bezier(.45,0,.25,1) infinite; }
.layer-stack.is-visible .layer-1 { animation: stack-bottom 9s cubic-bezier(.45,0,.25,1) infinite; }
.layer-stack.is-visible .stack-plumb { animation: stack-plumb 9s ease-in-out infinite; }
.layer-stack.is-visible .stack-swath { animation: stack-swath 6s linear infinite; }
@keyframes stack-top { 0%, 12%, 100% { transform: translateY(-28px); } 42%, 82% { transform: translateY(0); } }
@keyframes stack-bottom { 0%, 12%, 100% { transform: translateY(28px); } 42%, 82% { transform: translateY(0); } }
@keyframes stack-plumb { 0%, 25%, 100% { opacity: .25; } 45%, 80% { opacity: 1; } }
@keyframes stack-swath { from { transform: translateX(14px); } to { transform: translateX(286px); } }
/* --- hero scene navigation, like a survey 3D viewer --- */
.hero-survey-canvas { pointer-events: auto; touch-action: pan-y; }
.hero-survey-canvas.is-explorable { cursor: grab; }
.hero-survey-canvas.is-dragging { cursor: grabbing; }
.hero-explore { position: absolute; z-index: 3; top: 7.6rem; right: clamp(1.2rem, 3vw, 3rem); display: flex; align-items: center; gap: .6rem; color: #d9efe6; pointer-events: none; opacity: 0; animation: hero-explore-in .9s ease 9s forwards; }
.hero-explore-hint { padding: .35rem .7rem; border-radius: 99px; background: rgba(4, 20, 30, .45); font-size: .72rem; letter-spacing: .02em; color: rgba(217, 239, 230, .78); transition: opacity .6s ease; }
.hero-explore.is-used .hero-explore-hint { opacity: 0; }
.hero-explore-layer { display: none; padding: .35rem .7rem; border: 1px solid rgba(165,238,209,.3); border-radius: 99px; background: rgba(4, 20, 30, .55); color: #a5eed1; font-size: .72rem; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hero-explore.is-dtm .hero-explore-layer { display: block; }
.hero-explore.is-dtm .hero-explore-hint { display: none; }
.hero-explore-tools { display: flex; overflow: hidden; border: 1px solid rgba(165,238,209,.2); border-radius: .6rem; background: rgba(4, 20, 30, .55); backdrop-filter: blur(8px); pointer-events: auto; }
.hero-explore-tools button { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-left: 1px solid rgba(165,238,209,.14); color: inherit; background: transparent; cursor: pointer; }
.hero-explore-tools button:first-child { border-left: 0; }
.hero-explore-tools button:hover, .hero-explore-tools button:focus-visible { color: #071b29; background: #a5eed1; outline: none; }
.hero-explore-tools svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-explore-north { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(165,238,209,.2); border-radius: 50%; background: rgba(4, 20, 30, .55); }
.hero-explore-north i { position: relative; display: block; font-style: normal; font-size: .62rem; font-weight: 700; line-height: 1; transform-origin: 50% 50%; }
.hero-explore-north i::before { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; margin-left: -3px; content: ""; border: 3px solid transparent; border-bottom: 5px solid #eeb26d; }
@keyframes hero-explore-in { to { opacity: 1; } }
@media (max-width: 820px) { .hero-explore { top: auto; right: auto; bottom: .8rem; left: .8rem; animation-delay: 1s; } .hero-explore-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-explore { opacity: 1; animation: none; } }
/* --- acquisition readout synced to the hero scene --- */
.survey-readout { position: absolute; z-index: 2; right: clamp(1.2rem, 3vw, 3rem); bottom: calc(max(0px, 100% - 100svh) + clamp(1.2rem, 3vh, 2.2rem)); min-width: 19rem; padding: .55rem .8rem .65rem; border: 1px solid rgba(165,238,209,.2); border-radius: .7rem; color: #d9efe6; background: rgba(4, 20, 30, .5); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .22); font-variant-numeric: tabular-nums; pointer-events: none; backdrop-filter: blur(8px); opacity: 0; transform: translateY(.9rem); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.survey-readout.is-shown { opacity: 1; transform: none; }
.readout-status { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(165,238,209,.14); color: var(--aqua); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.readout-status i { flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sand); }
.survey-readout.is-logging .readout-status i { background: #ff5a4f; animation: readout-rec 1.6s ease-out infinite; }
.readout-status em { margin-left: auto; color: #8fb3a8; font-style: normal; font-weight: 600; letter-spacing: .03em; text-transform: none; white-space: nowrap; }
.survey-readout dl { display: grid; grid-template-columns: repeat(6, auto); gap: 0 1.1rem; margin: 0; }
.survey-readout dt { color: #8fb3a8; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.survey-readout dd { min-width: 4.6ch; margin: .12rem 0 0; color: var(--paper); font-size: .82rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
@keyframes readout-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 79, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 90, 79, 0); } }

/* --- KP chainage on section labels: the page reads like a survey line --- */
.kp { display: inline-flex; align-items: center; gap: .55rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.kp::after { width: 1.1rem; height: .55rem; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; opacity: .55; transform: translateY(-.1rem); }
.route-heading p .kp { margin-right: .7rem; color: #09807a; }
/* --- live scenes on the service cards (hover on desktop, centred card on touch screens) --- */
.service-card.is-live { z-index: 2; color: var(--paper); background: var(--ink-2); box-shadow: 0 1.5rem 2.8rem rgba(16, 48, 57, .25); }
.service-card.is-live p, .service-card.is-live li { color: #c1d2cc; }
.service-card.is-live .service-number, .service-card.is-live li::before { color: var(--aqua); }
.service-card > canvas.service-scene { position: absolute; z-index: 0; top: 0; left: 0; display: block; width: 100%; height: 9.6rem; opacity: 0; pointer-events: none; transition: opacity .5s ease; -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 100%); mask-image: linear-gradient(180deg, #000 64%, transparent 100%); }
.service-card.is-live > canvas.service-scene { opacity: 1; }
.service-card.has-scene:hover .service-visual, .service-card.has-scene.is-live .service-visual { opacity: 0; transform: none; }
.service-card-wide > canvas.service-scene { top: 0; right: 0; left: auto; width: 60%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.service-card-wide.has-scene h3, .service-card-wide.has-scene > p:not(.service-number), .service-card-wide.has-scene ul { max-width: 42%; }
@media (max-width: 820px) {
  .globe-hint { display: none; }
  .service-card-wide > canvas.service-scene { top: 0; right: 0; left: 0; width: 100%; height: 10.5rem; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .service-card-wide.has-scene h3, .service-card-wide.has-scene > p:not(.service-number), .service-card-wide.has-scene ul { max-width: none; }
  .service-card-wide.has-scene h3 { margin-top: 9.6rem; }
  .survey-readout { position: relative; right: auto; bottom: auto; min-width: 0; margin: .6rem 0 0; }
  .survey-readout dl { grid-template-columns: repeat(3, auto); gap: .45rem 1rem; }
  .readout-status em { display: none; }
  .about-field { grid-template-columns: 1fr; padding: 1.4rem; }
  .about-field .globe-panel { min-height: 25rem; }
  .layer-stack { min-height: auto; }
  .stack-label { font-size: 15px; }
  .route-panel { scroll-margin-top: 4.4rem; }
  .service-card:not(.service-card-wide) .service-visual { top: 2.2rem; width: 66%; height: 6rem; }
  .service-card:not(.service-card-wide) h3 { margin-top: 7.4rem; }
  .site-nav { display: none !important; }
  .route-steps::before { top: 0; bottom: 0; left: 1.6rem; right: auto; width: 2px; height: auto; background: rgba(39,129,122,.25); }
  .route-steps li { display: block; }
  .route-step { min-height: 0; padding: 1.05rem 1.1rem; }
  .route-step strong { padding-top: .5rem; }
  .route-step:hover, .route-step:focus-visible, .route-step.is-active { transform: none; }
  .route-detail.is-active { grid-template-columns: 1fr; }
  .route-flow { grid-template-columns: 1fr; }
  .route-flow li::before { top: -.7rem; left: 1.2rem; width: 1px; height: .7rem; }
  .principles.is-four { grid-template-columns: 1fr 1fr; }
  .deliverables-head, .sectors-intro { grid-template-columns: 1fr; gap: 1.2rem; }
  .deliverable-grid, .sector-grid { grid-template-columns: 1fr; }
  .sectors-intro h2 { font-size: clamp(2.8rem, 12vw, 4.5rem); }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer p.footer-legal { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .about-network .network-scope-pulse { animation: none !important; }
  .service-card > canvas.service-scene { transition: none; }
  .survey-readout { transition: none; transform: none; }
  .survey-readout .readout-status i { animation: none !important; }
  .eyebrow > span::after, .hero-identity > span::after { animation: none !important; }
  .layer-stack .stack-layer, .layer-stack .stack-plumb, .layer-stack .stack-swath { animation: none !important; }
  .route-flow li, .drawer-group a, .network-specialist { opacity: 1; transform: none; animation: none !important; }
  .network-link { stroke-dashoffset: 0; animation: none !important; }
  .service-card .service-visual * { animation: none !important; }
  .route-steps.is-cycling .route-step.is-active::after, .menu-toggle .sonar-ring, body.is-scrolled .menu-toggle { animation: none !important; }
}

/* Multi-page site (v12): inner pages, service pages, West Africa, contact tabs, brief */
button, input, textarea, select { font: inherit; }
body:not(.page-home) .site-header { background: #082d40; }
body:not(.page-home) main { padding-top: var(--header-h, 7.4rem); }
.card-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.card-link:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.card-more { position: relative; z-index: 1; margin: 0; padding-top: 1rem; color: #2d817a; font-size: .72rem; font-weight: 800; letter-spacing: .02em; transition: color .2s ease, transform .25s ease; }
.service-card:hover .card-more, .service-card.is-live .card-more, .service-card:focus-within .card-more { color: var(--aqua); transform: translateX(.3rem); }

.page-hero { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; min-height: min(46rem, 86svh); padding: clamp(3rem, 6vw, 5.5rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 3.5rem)); background: radial-gradient(ellipse at 78% 46%, rgba(39, 140, 157, .2), rgba(7, 27, 41, 0) 58%), var(--ink); }
.page-hero-copy { max-width: 38rem; }
.page-hero .section-label a { color: var(--aqua); border-bottom: 1px solid rgba(165, 238, 209, .4); }
.page-hero h1 { margin: 1.2rem 0 0; font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 600; line-height: .98; letter-spacing: -.065em; }
.page-lead { margin: 1.6rem 0 0; color: #c3d0cc; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.72; }
.page-points { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.page-points li { padding: .45rem .8rem; border: 1px solid rgba(165, 238, 209, .3); border-radius: 999px; color: #d9f5e6; font-size: .72rem; font-weight: 700; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 2.2rem; }
.page-scene { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 11; min-height: 22rem; border: 1px solid rgba(165, 238, 209, .14); border-radius: 1.4rem; background: radial-gradient(ellipse at 50% 40%, #12404f, #0b2637 70%); box-shadow: 0 2rem 4rem rgba(1, 12, 20, .35); }
.page-scene > canvas.service-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.page-scene.is-live > canvas.service-scene { opacity: 1; }
.page-visual.service-visual { position: relative; top: auto; right: auto; width: 100%; height: auto; aspect-ratio: 16 / 11; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(165, 238, 209, .14); border-radius: 1.4rem; background: radial-gradient(ellipse at 50% 40%, #12404f, #0b2637 70%); opacity: 1; filter: none; transform: none; }

.page-detail .technology-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.2rem; }
.page-scope { display: grid; grid-template-columns: .45fr 1.55fr; gap: 2rem; align-items: start; margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid rgba(165, 238, 209, .2); }
.page-scope-label { margin: 0; color: #a7c0ba; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.page-scope .scope-card { min-height: 0; color: var(--paper); background: rgba(240, 240, 233, .05); border-color: rgba(165, 238, 209, .18); box-shadow: none; }
.page-scope .scope-number { color: var(--aqua); }
.page-receive { color: var(--ink); background: var(--paper); }
.page-receive .deliverables { margin-top: 0; padding-top: 0; border-top: 0; }
.page-receive .deliverables-head h2 { margin: 0; color: var(--ink); font-size: clamp(2.2rem, 4vw, 3.8rem); }
.page-next { background: #0a3a49; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.page-next .section-label { color: #a8cabc; }
.service-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.service-links a { display: flex; flex-direction: column; gap: .55rem; height: 100%; min-height: 7rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(165, 238, 209, .2); border-radius: 1.1rem; background: rgba(7, 39, 52, .55); transition: background .25s ease, color .25s ease, transform .3s ease; }
.service-links span { color: var(--aqua); font-size: .66rem; font-weight: 800; letter-spacing: .03em; transition: color .25s ease; }
.service-links strong { font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.service-links a:hover, .service-links a:focus-visible { color: var(--ink); background: var(--aqua); outline: none; transform: translateY(-.2rem); }
.service-links a:hover span, .service-links a:focus-visible span { color: #0c746e; }

.contact-band .contact-copy { margin-bottom: 2.4rem; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.contact-link { color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .015em; border-bottom: 1px solid rgba(7, 27, 41, .4); padding-bottom: .25rem; }
.contact-link:hover { color: #0c746e; border-color: #0c746e; }

/* About: scope first, then the directors, then the specialists */
.network-legend.is-flow li:not(:last-child)::after { margin-left: .55rem; color: #c9822f; content: "\2192"; }
.about-network.is-visible .network-director { animation: network-director-hit 3.6s linear 1.45s infinite; }
@keyframes network-director-hit { 0% { stroke: #eeb26d; } 18%, 100% { stroke: #f0f0e9; } }

.west-africa { color: var(--ink); background: var(--paper-dark); }
.west-africa-intro { display: grid; grid-template-columns: 1fr .85fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }
.west-africa-intro h2 { margin: 0; color: var(--ink); font-size: clamp(2.6rem, 4.6vw, 5rem); }
.west-africa-intro h2 em { color: #2d817a; }
.west-africa-intro p { margin: 0 0 .5rem; color: #36505a; font-size: .98rem; line-height: 1.75; }
.base-card { position: relative; display: grid; grid-template-columns: minmax(12rem, .75fr) 1.25fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; overflow: hidden; margin-top: 3.4rem; padding: clamp(1.5rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 2.8rem) calc(clamp(1.5rem, 3vw, 2.8rem) + 6px); border: 1px solid rgba(7, 27, 41, .13); border-radius: 1.4rem; background: #f7f8f2; box-shadow: 0 1rem 2.4rem rgba(44, 76, 72, .08); }
.base-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; content: ""; background: linear-gradient(180deg, #ce1126 0 33.4%, #fcd116 33.4% 66.7%, #009460 66.7%); }
.base-logo { justify-self: center; width: 100%; max-width: 20rem; height: auto; }
.base-card.is-senegal::before { background: linear-gradient(180deg, #00853f 0 33.4%, #fdef42 33.4% 66.7%, #e31b23 66.7%); }
.base-card + .base-card { margin-top: 1.2rem; }
.base-place, .vessel-place { margin: 0; color: #2d817a; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.base-copy h3, .vessel-copy h3 { margin: .7rem 0 .9rem; color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; }
.base-copy p, .vessel-copy p { margin: 0 0 1rem; color: #36505a; font-size: .95rem; line-height: 1.7; }
.base-copy .text-link { margin-top: .4rem; color: var(--ink); border-bottom-color: rgba(7, 27, 41, .35); }
.vessels-label { margin: 3.2rem 0 0; color: #527070; font-size: .7rem; font-weight: 800; letter-spacing: .035em; }
.vessel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1.1rem; }
.vessel-card { overflow: hidden; border: 1px solid rgba(7, 27, 41, .13); border-radius: 1.4rem; background: #f7f8f2; transition: transform .35s ease, box-shadow .35s ease; }
.vessel-card:hover { box-shadow: 0 1.4rem 2.8rem rgba(16, 48, 57, .16); transform: translateY(-.25rem); }
.vessel-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vessel-copy { padding: 1.3rem 1.4rem 1.5rem; }

/* Contact page: two tabs and the brief questionnaire */
.contact-page .contact-inner { padding-top: clamp(4rem, 8vw, 7rem); }
.contact-tabs { display: inline-flex; gap: .3rem; margin: 0 0 2.2rem; padding: .3rem; border: 1px solid rgba(7, 27, 41, .25); border-radius: 999px; background: rgba(247, 249, 243, .5); }
.contact-tabs button { padding: .7rem 1.15rem; border: 0; border-radius: 999px; background: transparent; color: #2a4e54; font-size: .74rem; font-weight: 800; cursor: pointer; transition: background .2s ease, color .2s ease; }
.contact-tabs [aria-selected="true"] { color: var(--paper); background: var(--ink); }
.contact-tabs button:focus-visible { outline: 2px solid #0c746e; outline-offset: 2px; }
.contact-panel[hidden], .brief-form [hidden] { display: none !important; }
.brief-form { position: relative; max-width: 60rem; }
.brief-progress { margin: 0 0 1rem; color: #476165; font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.brief-step { min-width: 0; margin: 0; padding: 0; border: 0; animation: brief-in .35s cubic-bezier(.22,.61,.36,1); }
@keyframes brief-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.brief-step legend { margin-bottom: 1.3rem; padding: 0; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.045em; }
.brief-hint { max-width: 36rem; margin: -.4rem 0 1.3rem; color: #2a4e54; font-size: .95rem; line-height: 1.6; }
.brief-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
.brief-choices.is-compact { grid-template-columns: repeat(4, 1fr); }
.brief-choice { position: relative; display: block; cursor: pointer; }
.brief-choice input { position: absolute; opacity: 0; pointer-events: none; }
.brief-choice span { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .95rem 1rem; border: 1px solid rgba(7, 27, 41, .22); border-radius: .95rem; background: rgba(247, 249, 243, .55); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.brief-choice strong { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.brief-choice small { color: #476165; font-size: .74rem; line-height: 1.45; }
.brief-choice:hover span { border-color: var(--ink); transform: translateY(-2px); }
.brief-choice input:checked + span { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.brief-choice input:checked + span small { color: #b8ccc5; }
.brief-choice input:focus-visible + span { outline: 2px solid #0c746e; outline-offset: 2px; }
.brief-field { display: block; margin-bottom: 1.4rem; }
.brief-field > span { display: block; margin-bottom: .6rem; font-size: .72rem; font-weight: 800; letter-spacing: .025em; }
.brief-field input, .brief-field textarea, .brief-field select { width: 100%; padding: .85rem 0; border: 0; border-bottom: 1px solid rgba(7, 27, 41, .6); outline: none; background: transparent; color: var(--ink); font-size: 1rem; }
.brief-field select { width: auto; min-width: 8rem; cursor: pointer; }
.brief-field.is-small { max-width: 12rem; }
.brief-field input:focus, .brief-field textarea:focus, .brief-field select:focus { border-color: #08716a; }
.brief-nav { display: flex; align-items: center; gap: 1.4rem; margin-top: .6rem; }
.brief-back { padding: 0 0 .25rem; border: 0; border-bottom: 1px solid rgba(7, 27, 41, .4); background: none; color: var(--ink); font-size: .74rem; font-weight: 800; cursor: pointer; }

@media (max-width: 820px) {
  .page-hero, .west-africa-intro, .base-card, .vessel-grid, .page-scope { grid-template-columns: 1fr; }
  .page-hero { min-height: 0; }
  .page-scene { min-height: 16rem; }
  .service-links { grid-template-columns: 1fr; }
  .base-logo { justify-self: start; max-width: 14rem; }
  .brief-choices, .brief-choices.is-compact { grid-template-columns: 1fr 1fr; }
  .contact-tabs { display: flex; }
  .contact-tabs button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .about-network .network-director, .brief-step { animation: none !important; }
}

/* Service pages: a feature band with its own live scene (sampling on the metocean page) */
.page-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; color: var(--paper); background: #0a3a49; }
.page-feature .section-label { color: #a8cabc; }
.page-feature h2 { margin: 1.2rem 0 1.4rem; color: var(--paper); font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.page-feature h2 em { color: var(--aqua); }
.page-feature-copy > p:not(.section-label) { max-width: 34rem; margin: 0 0 1rem; color: #bad0c7; font-size: .98rem; line-height: 1.75; }
@media (max-width: 820px) { .page-feature { grid-template-columns: 1fr; } }

/* Contact forms: honeypot kept out of sight, Turnstile only shows when it needs a click */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-turnstile { margin: 0 0 1rem; }
.form-turnstile:empty { margin: 0; }
.contact-form button[disabled], .brief-nav button[disabled] { opacity: .55; cursor: wait; }

/* Header on scroll: hidden going down, back as a slim bar (logo, menu, contact) going up */
body.is-scrolled .site-header { position: fixed; top: calc(-1 * var(--header-h, 7.4rem) - 1rem); padding-top: .65rem; padding-bottom: .65rem; background: rgba(8, 45, 64, .97); box-shadow: 0 .6rem 1.6rem rgba(1, 12, 20, .25); transition: top .35s cubic-bezier(.22,.61,.36,1); }
body.is-scrolled.is-scrolling-up .site-header { top: 0; }
body.is-scrolled .brand-mark-shell { width: clamp(3.2rem, 4vw, 4rem); }
body.is-scrolled.is-scrolling-up .menu-toggle { box-shadow: none; }
body.drawer-open .site-header { transition: none; }
@media (prefers-reduced-motion: reduce) { body.is-scrolled .site-header { transition: none; } }

/* Service pages: what the team has done in the field, before the technical sheets */
.page-cases { color: var(--ink); background: var(--paper); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.case-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .7rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.case-list li { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(7, 27, 41, .13); border-left: 3px solid #2d817a; border-radius: .2rem 1rem 1rem .2rem; background: rgba(247, 249, 243, .7); }
.case-list strong { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.case-list small { color: #456069; font-size: .85rem; line-height: 1.55; }
.client-side-intro { display: grid; grid-template-columns: 1fr .9fr; gap: 3rem; align-items: end; margin-top: 2.2rem; }
.client-side-intro h2 { margin: 0; color: var(--ink); font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.client-side-intro h2 em { color: #2d817a; }
.client-side-intro p { max-width: 32rem; margin: 0 0 .5rem; color: #36505a; font-size: .98rem; line-height: 1.75; }
@media (max-width: 820px) { .client-side-intro { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Coastal evidence: the same schematic coast, from acquisition to follow-up. */
.coastal-evidence { color: var(--paper); background: #0a2534; scroll-margin-top: 5rem; }
.coastal-evidence .section-label { color: var(--aqua); }
.coastal-evidence h2 { margin: 1.2rem 0 1.5rem; font-size: clamp(2.5rem, 4.8vw, 5rem); }
.coastal-evidence h2 em { color: var(--aqua); }
.coastal-evidence-intro { max-width: 48rem; margin: 0; color: #c2d5cf; font-size: 1rem; line-height: 1.8; }
.coastal-motion-toggle { margin: 1.3rem 0 0; padding: .6rem .85rem; border: 1px solid rgba(165,238,209,.4); border-radius: .5rem; color: var(--aqua); background: transparent; font: 600 .75rem var(--sans); cursor: pointer; }
.coastal-motion-toggle:hover, .coastal-motion-toggle:focus-visible { color: var(--ink); background: var(--aqua); outline: 2px solid var(--aqua); outline-offset: 3px; }
.coastal-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); margin-top: 2.5rem; }
.coastal-evidence-card { min-width: 0; overflow: hidden; border: 1px solid rgba(165,238,209,.2); border-radius: 1rem; background: #102f3e; }
.coastal-scene { position: relative; width: 100%; aspect-ratio: 40 / 31; overflow: hidden; background: #0a2534 center / 100% 100% no-repeat; border-bottom: 1px solid rgba(165,238,209,.15); }
.coastal-scene > canvas.service-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.coastal-evidence-card h3 { margin: 1.4rem 1.4rem .8rem; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.25; letter-spacing: -.035em; }
.coastal-evidence-card > p { margin: 0 1.4rem 1.6rem; color: #c2d5cf; font-size: .85rem; line-height: 1.75; }
.coastal-evidence-note { max-width: 60rem; margin: 1.5rem 0 0; color: #a0bcb7; font-size: .75rem; line-height: 1.7; }
@media (max-width: 1000px) { .coastal-evidence-grid { grid-template-columns: 1fr; } .coastal-evidence-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .coastal-scene { grid-row: span 2; border-bottom: 0; border-right: 1px solid rgba(165,238,209,.15); } .coastal-evidence-card h3 { align-self: end; margin-top: 1.5rem; } }
@media (max-width: 600px) { .coastal-evidence-card { display: block; } .coastal-scene { border-right: 0; border-bottom: 1px solid rgba(165,238,209,.15); } }
@media (prefers-reduced-motion: reduce) { .coastal-motion-toggle { display: none; } }

/* Service pages: two ways to work with us (we run it / we check it for you) */
.ways { color: var(--ink); background: var(--paper-dark); }
.ways h2 { max-width: 40rem; margin: 1.2rem 0 0; color: var(--ink); font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.ways h2 em { color: #2d817a; }
.ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 2.6rem; }
.ways-card { padding: clamp(1.3rem, 2.4vw, 2rem); border: 1px solid rgba(7, 27, 41, .13); border-radius: 1.3rem; background: #f7f8f2; }
.ways-card.is-check { color: var(--paper); border-color: transparent; background: var(--ink-2); }
.ways-tag { margin: 0; color: #2d817a; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.ways-card.is-check .ways-tag { color: var(--aqua); }
.ways-card h3 { margin: .8rem 0 1.1rem; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; }
.ways-card ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.ways-card li { position: relative; padding-left: 1.3rem; color: #36505a; font-size: .95rem; line-height: 1.6; }
.ways-card.is-check li { color: #c1d1cb; }
.ways-card li::before { position: absolute; top: .62em; left: 0; width: .5rem; height: .5rem; border-radius: 50%; background: #2d817a; content: ""; }
.ways-card.is-check li::before { background: var(--sand); }
.ways-boundary { max-width: 46rem; margin: 1.6rem 0 0; padding: 1rem 1.2rem; border-left: 3px solid var(--sand); color: #2c4c55; font-size: .95rem; line-height: 1.65; background: rgba(238, 178, 109, .14); }
@media (max-width: 820px) { .ways-grid { grid-template-columns: 1fr; } }

/* Service pages: one real field photo with its story */
.page-photo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; color: var(--paper); background: var(--ink-2); }
.page-photo-figure { margin: 0; overflow: hidden; border-radius: 1.3rem; box-shadow: 0 1.6rem 3.2rem rgba(1, 12, 20, .35); }
.page-photo-figure img { display: block; width: 100%; height: auto; max-height: 78svh; object-fit: cover; }
.page-photo .section-label { color: #a8cabc; }
.page-photo h2 { margin: 1.2rem 0 1.3rem; color: var(--paper); font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.page-photo h2 em { color: var(--aqua); }
.page-photo-copy > p:not(.section-label) { max-width: 34rem; color: #bad0c7; font-size: 1rem; line-height: 1.75; }
@media (max-width: 820px) { .page-photo { grid-template-columns: 1fr; } .page-photo-figure img { max-height: 60svh; } }

/* About: real photos from the team's time offshore, no place or vessel named */
.at-sea { color: var(--paper); background: var(--ink); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.at-sea .section-label { color: #a8cabc; }
.at-sea-lead { margin: 1rem 0 0; color: #bad0c7; font-size: 1rem; }
.at-sea-grid { display: grid; grid-template-columns: 1.78fr 1fr; gap: .9rem; margin-top: 1.8rem; align-items: stretch; }
.at-sea-grid figure { position: relative; overflow: hidden; margin: 0; border-radius: 1.2rem; }
.at-sea-grid img { display: block; width: 100%; height: 100%; max-height: 34rem; object-fit: cover; }
.at-sea-grid figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .45rem .75rem; border-radius: 999px; color: var(--paper); background: rgba(4, 20, 30, .7); font-size: .72rem; font-weight: 700; }
@media (max-width: 820px) { .at-sea-grid { grid-template-columns: 1fr; } }

/* Team page: the two directors, then the network */
.team-intro { color: var(--ink); background: var(--paper); padding-bottom: clamp(2rem, 4vw, 3rem); }
.team-intro :is(h1, h2) { margin: 1.2rem 0 0; color: var(--ink); font-size: clamp(3rem, 5.6vw, 6rem); }
.team-intro :is(h1, h2) em { color: #2d817a; }
.team-lead { max-width: 36rem; margin: 1.6rem 0 0; color: #36505a; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.team-founders { color: var(--ink); background: var(--paper); padding-top: 0; }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.founder-card { display: grid; grid-template-columns: 9rem 1fr; gap: 1.6rem; padding: clamp(1.4rem, 2.6vw, 2.2rem); border: 1px solid rgba(7, 27, 41, .13); border-radius: 1.4rem; background: #f7f8f2; }
.portrait { display: grid; place-items: center; width: 9rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1d5a6a, var(--ink-2)); box-shadow: inset 0 0 0 3px rgba(165, 238, 209, .35); }
.portrait span { color: var(--aqua); font-size: 2.2rem; font-weight: 700; letter-spacing: -.04em; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder-role { margin: 0; color: #2d817a; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.founder-copy h3 { margin: .5rem 0 1rem; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: -.05em; }
.founder-copy > p:not(.founder-role):not(.founder-school) { margin: 0 0 .9rem; color: #36505a; font-size: .95rem; line-height: 1.7; }
.founder-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; }
.founder-tags li { padding: .35rem .7rem; border: 1px solid rgba(7, 27, 41, .2); border-radius: 999px; font-size: .72rem; font-weight: 700; }
.founder-school { margin: 0; color: #617276; font-size: .78rem; line-height: 1.5; }
.team-network { color: var(--paper); background: var(--ink-2); }
.team-network .section-label { color: #a8cabc; }
.team-network h2 { margin: 1.2rem 0 1.3rem; color: var(--paper); font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.team-network h2 em { color: var(--aqua); }
.team-network-copy > p { max-width: 38rem; margin: 0 0 1.6rem; color: #bad0c7; font-size: 1rem; line-height: 1.75; }
@media (max-width: 1100px) { .founder-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .founder-card { grid-template-columns: 1fr; } .portrait { width: 7rem; } }

/* Metocean page: example deliverables (current rose, tide series, current field) */
.metocean-outputs { color: var(--paper); background: var(--ink-2); }
.metocean-outputs .section-label { color: #a8cabc; }
.metocean-outputs h2 { margin: 1.2rem 0 0; color: var(--paper); font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.metocean-outputs h2 em { color: var(--aqua); }
.output-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: 2.4rem; }
.output-card { padding: 1.1rem 1.1rem 1.3rem; border: 1px solid rgba(165, 238, 209, .16); border-radius: 1.2rem; background: #0e3442; }
.output-figure { display: grid; place-items: center; min-height: 12rem; padding: .4rem; border-radius: .8rem; background: #071b29; }
.output-figure svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.output-card h3 { margin: 1rem 0 .5rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -.03em; }
.output-card p { margin: 0; color: #bad0c7; font-size: .9rem; line-height: 1.6; }
.output-note { margin: 1.2rem 0 0; color: #8faaa3; font-size: .78rem; }
@media (max-width: 1000px) { .output-grid { grid-template-columns: 1fr; } }
/* small live scenes in the top right corner of the "In practice" and example cards */
.has-inset { display: flow-root; }
.card-inset { position: relative; float: right; overflow: hidden; width: min(48%, 19rem); aspect-ratio: 16 / 10; margin: 0 0 1rem 1.2rem; border: 1px solid rgba(165, 238, 209, .16); border-radius: .9rem; background: radial-gradient(ellipse at 50% 40%, #12404f, #0b2637 70%); box-shadow: 0 .8rem 1.6rem rgba(0, 18, 27, .22); transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .25s ease; }
.card-inset > canvas.service-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.has-inset.is-live .card-inset { border-color: rgba(238, 178, 109, .55); box-shadow: 0 1.2rem 2.4rem rgba(0, 18, 27, .32); transform: scale(1.03); }
.technology-card.has-inset h3 { margin-top: 1.4rem; }
@media (max-width: 720px) {
  .card-inset { float: none; width: 100%; margin: 0 0 1rem; }
  .technology-card.has-inset h3 { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-inset { transition: none; }
  .has-inset.is-live .card-inset { transform: none; }
}
/* with a mouse the live scene comes forward so its labels can be read: the inset grows out of its corner, a sector card lifts */
@media (hover: hover) and (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .has-inset:not(.sector-card).is-zoomed { position: relative; z-index: 6; }
  .has-inset:not(.sector-card).is-zoomed .card-inset { z-index: 6; transform: scale(1.75); transform-origin: 100% 0; box-shadow: 0 2.2rem 4.4rem rgba(0, 18, 27, .5); }
  .sector-card.has-inset.is-live { z-index: 6; transform: scale(1.07); }
}
/* the sector cards carry their scene as a band across the top */
.sector-card .card-inset { float: none; width: calc(100% + 2.9rem); aspect-ratio: 2 / 1; margin: -1.45rem -1.45rem 1.1rem; border: 0; border-bottom: 1px solid rgba(165, 238, 209, .16); border-radius: 0; box-shadow: none; }
.sector-card.has-inset.is-live .card-inset { transform: none; box-shadow: none; }
.sector-card.has-inset::before { display: none; }
.sector-card.has-inset { display: flex; }
/* scenes revealed on hover: a quiet sonar ping marks the place until then */
.card-inset.is-hover-only canvas.service-scene { opacity: 0; transition: opacity .5s ease; }
.has-inset.is-live .card-inset.is-hover-only canvas.service-scene { opacity: 1; }
.card-inset.is-hover-only::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 50% 50%, rgba(165, 238, 209, .5) 0 2px, transparent 3px), repeating-radial-gradient(circle at 50% 50%, transparent 0 13px, rgba(165, 238, 209, .14) 13px 14px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%); transition: opacity .4s ease; pointer-events: none; }
.has-inset.is-live .card-inset.is-hover-only::after { opacity: 0; }

/* the last sector card spans the row: its scene on the left, the text beside it */
.sector-card.is-wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: stretch; }
.sector-card.is-wide .card-inset { flex: 0 0 36%; width: auto; aspect-ratio: auto; min-height: 12.5rem; margin: -1.45rem 1.6rem -1.45rem -1.45rem; border-bottom: 0; border-right: 1px solid rgba(165, 238, 209, .16); }
.sector-copy { display: flex; flex: 1; flex-direction: column; }
.sector-card.is-wide h3 { margin-top: 1.2rem; }
.sector-copy > p:not(:first-of-type) { margin: 0; color: #bfd2cb; font-size: .86rem; line-height: 1.65; }
@media (max-width: 720px) {
  .sector-card.is-wide { flex-direction: column; }
  .sector-card.is-wide .card-inset { flex: none; width: calc(100% + 2.9rem); aspect-ratio: 2 / 1; min-height: 0; margin: -1.45rem -1.45rem 1.1rem; border-right: 0; border-bottom: 1px solid rgba(165, 238, 209, .16); }
}

/* the home page opens on its scene alone; then the line of disciplines, the title, the paragraph typed out,
   the buttons and the proof line typed out. Everything shows after 16 s whatever happens */
.hero-sequence .hero-copy > * { opacity: 0; transform: translateY(.5rem); transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1); animation: hero-safety 0s 24s forwards; }
.hero-sequence .hero-copy > h1 { transform: translateY(1rem); filter: blur(6px); transition: opacity 2.4s ease, transform 2.6s cubic-bezier(.22, .61, .36, 1), filter 2.2s ease; }
.hero-sequence .hero-copy > .is-shown { opacity: 1; transform: none; filter: none; }
.hero-sequence .typed-char { opacity: 0; animation: hero-safety 0s 24s forwards; }
.hero-sequence .typed-char.is-typed { opacity: 1; }
@keyframes hero-safety { to { opacity: 1; transform: none; filter: none; } }

/* three ways: run it, work with the client's team, check it; the middle card a shade warmer in the same teal */
.ways-card.is-team { border-color: rgba(45, 129, 122, .28); background: linear-gradient(rgba(45, 129, 122, .07), rgba(45, 129, 122, .07)), #f7f8f2; }
@media (min-width: 1000px) { .ways-grid.is-three { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 999px) { .ways-grid.is-three { grid-template-columns: 1fr; } }

/* card insets keep the image clear: the scene's words sit in a band under it, and grow with it on hover */
.card-inset.has-caption { aspect-ratio: auto; }
.card-inset.has-caption > .inset-view { position: relative; aspect-ratio: 16 / 10; }
.card-inset.has-caption > .inset-view > canvas.service-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.inset-caption { min-height: 3.1em; margin: 0; padding: .45rem .7rem .5rem; color: #c7d7d1; background: rgba(4, 20, 30, .86); font-size: .68rem; line-height: 1.4; }
.inset-caption strong { display: block; color: var(--aqua); font-size: .62rem; font-weight: 800; letter-spacing: .04em; }
.inset-caption span { display: block; }
.card-inset.is-hover-only .inset-caption { opacity: 0; transition: opacity .4s ease; }
.has-inset.is-live .card-inset.is-hover-only .inset-caption { opacity: 1; }

.ways-intro { max-width: 46rem; margin: 1.4rem 0 0; color: #36505a; font-size: 1rem; line-height: 1.7; }

/* the At sea band as a small gallery of even tiles, under the field experience: more mission photos are added as figures */
.at-sea-grid.is-gallery { grid-template-columns: repeat(3, 1fr); }
.at-sea-grid.is-gallery figure { aspect-ratio: 4 / 3; }
.at-sea-grid.is-gallery img { height: 100%; max-height: none; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.at-sea-grid.is-gallery figure:hover img { transform: scale(1.04); }
.at-sea-grid.is-gallery img[src*="aft-deck"] { object-position: 50% 62%; }
.at-sea-grid.is-gallery img[src*="rainbow"] { object-position: 50% 50%; }
/* both feet of the rainbow sit near the edges: a lighter zoom keeps them in the frame */
.at-sea-grid.is-gallery figure:hover img[src*="rainbow"] { transform: scale(1.012); }
@media (max-width: 820px) { .at-sea-grid.is-gallery { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }
@media (prefers-reduced-motion: reduce) { .at-sea-grid.is-gallery figure:hover img { transform: none; } }

/* the delivery chain as a survey line: paper and graticule, each stage a KP tick on the line, spaced
   unevenly like a real line, and a chart scale under it; the tabs and their detail panel stay as they are */
.response-route.is-survey-line { color: var(--ink); background-color: var(--paper); background-image: linear-gradient(rgba(7, 27, 41, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 27, 41, .07) 1px, transparent 1px); background-size: 120px 120px; background-position: -1px -1px; }
.is-survey-line .route-heading strong { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.03em; }
.is-survey-line .route-heading strong span { font-style: italic; color: #113347; }
.is-survey-line .route-steps { grid-template-columns: 1.1fr .8fr 1.2fr 1fr 1.3fr; gap: 0; margin-top: 3.6rem; }
.is-survey-line .route-steps::before { top: 0; right: 0; left: 0; height: 2px; background: var(--ink); }
.is-survey-line .route-step { min-height: 0; padding: 1.5rem 1.4rem 1rem 0; border: 0; border-radius: 0; overflow: visible; color: var(--ink); background: none; box-shadow: none; transform: none !important; }
.is-survey-line .route-step::before { position: absolute; top: -7px; left: 0; width: 2px; height: 16px; content: ""; background: var(--ink); transition: background .25s ease, height .25s ease, top .25s ease, width .25s ease; }
.is-survey-line .route-step .step-kp { display: block; margin-bottom: .5rem; color: #4c6470; font: 500 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; transition: color .25s ease; }
.is-survey-line .route-step span { display: none; }
.is-survey-line .route-step strong { margin-top: 0; padding-top: 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.55rem); letter-spacing: -.02em; }
.is-survey-line .route-step small { color: #4c6470; }
.is-survey-line .route-step:hover, .is-survey-line .route-step:focus-visible, .is-survey-line .route-step.is-active { color: var(--ink); background: none; box-shadow: none; }
.is-survey-line .route-step:hover small, .is-survey-line .route-step:focus-visible small, .is-survey-line .route-step.is-active small { color: #2e4a55; }
.is-survey-line .route-step:hover::before, .is-survey-line .route-step:focus-visible::before, .is-survey-line .route-step.is-active::before { top: -10px; width: 4px; height: 22px; background: var(--sand); }
.is-survey-line .route-step.is-active strong { color: #113347; }
.is-survey-line .route-step.is-active .step-kp { color: #b5641f; }
.is-survey-line .route-step::after { right: 1.4rem; height: 2px; background: var(--sand); }
.is-survey-line .route-panel { border-radius: 0; }
.is-survey-line .route-note { color: #4c6470; }
@media (max-width: 820px) {
  .is-survey-line .route-steps { grid-template-columns: 1fr; margin-top: 2.4rem; }
  .is-survey-line .route-steps::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
  .is-survey-line .route-step { padding: .2rem 0 1.4rem 1.3rem; }
  .is-survey-line .route-step::before { top: .3rem; left: -7px; width: 16px; height: 2px; }
  .is-survey-line .route-step:hover::before, .is-survey-line .route-step:focus-visible::before, .is-survey-line .route-step.is-active::before { top: .2rem; left: -10px; width: 22px; height: 4px; }
  .is-survey-line .route-step::after { left: 1.3rem; }
}

/* West Africa: an old chart of Guinea behind the section, blurred, fading out towards the vessels.
   The chart is drawn by tools/old_chart.py from the real coastline; one per country we work in. */
.west-africa { position: relative; isolation: isolate; overflow: hidden; }
.west-africa::before { position: absolute; top: 0; right: 0; left: 0; z-index: -1; aspect-ratio: 1800 / 1129; content: ""; pointer-events: none; background: url("/assets/charts/guinea.jpg") center / cover no-repeat; opacity: .36; filter: blur(1.4px) saturate(.85); -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%); }
@media (max-width: 820px) { .west-africa::before { aspect-ratio: auto; height: 46rem; background-position: 36% 0; } }


/* Standards & Reference Frameworks: a register on chart paper, each standard with its mark (its acronym), what it governs, and the services it applies to */
.standards-sheet { color: var(--ink); background-color: var(--paper); background-image: linear-gradient(rgba(7, 27, 41, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 27, 41, .065) 1px, transparent 1px); background-size: 120px 120px; background-position: -1px -1px; }
.standards-sheet h1 { margin: 1.6rem 0 0; color: var(--ink); font-family: Georgia, serif; font-size: clamp(2.9rem, 5.6vw, 5.8rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.standards-sheet h1 em { color: #113347; font-style: italic; }
.std-lead { max-width: 46rem; margin: 1.8rem 0 0; color: #36505a; font-size: 1.06rem; line-height: 1.75; }
.std-register { margin: 3.4rem 0 0; padding: 0; border-top: 2px solid var(--ink); list-style: none; counter-reset: std; }
.std-row { position: relative; display: grid; grid-template-columns: 12rem minmax(12rem, 16rem) 1fr; gap: 1rem 2.6rem; align-items: center; padding: 1.7rem 0 1.7rem 2.4rem; border-bottom: 1px solid rgba(7, 27, 41, .16); counter-increment: std; transition: background .25s ease; scroll-margin-top: 7rem; }
.std-row::before { position: absolute; top: 1.95rem; left: 0; content: counter(std, decimal-leading-zero); color: #8a9b9f; font: 500 .7rem/1 ui-monospace, Menlo, Consolas, monospace; }
.std-row:hover, .std-row:target { background: rgba(238, 178, 109, .1); }
.std-mark { display: flex; align-items: center; height: 4.6rem; }
.std-mark img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.std-mark span { color: var(--ink); font-family: Georgia, serif; font-size: 2.1rem; font-weight: 700; letter-spacing: .06em; }
.std-code { margin: 0; color: #b5641f; font: 500 .78rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.std-head h2 { margin: .45rem 0 0; color: var(--ink); font-family: Georgia, serif; font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.std-body p { max-width: 40rem; margin: 0; color: #36505a; font-size: .95rem; line-height: 1.7; }
.std-body .std-applies { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .8rem; font: 500 .7rem/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }
.std-applies span { color: #8a9b9f; text-transform: uppercase; }
.std-applies a { color: var(--ink); border-bottom: 1px solid rgba(7, 27, 41, .35); transition: color .2s ease, border-color .2s ease; }
.std-applies a:hover { color: #b5641f; border-color: currentColor; }
.std-note { max-width: 46rem; margin: 2.2rem 0 0; color: #36505a; font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; line-height: 1.7; }
@media (max-width: 900px) {
  .std-row { grid-template-columns: 1fr; gap: .7rem; padding-left: 2rem; }
  .std-mark { height: 3.4rem; }
  .std-mark span { font-size: 1.6rem; }
}

/* Keep descriptions legible on the light services-index page. */
.page-services .sector-card { color: var(--paper); background: #0c2f3d; }
.page-services .sector-card:hover, .page-services .sector-card:focus-within, .page-services .sector-card:target { background: #0e4656; }

/* Write to us: the required mark, and the preferred way to be contacted as three small choices */
.contact-form label > span b, .form-required-note b { color: #0c746e; font-weight: 800; }
.form-required-note { margin: 0 0 1.2rem; color: #476165; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.contact-pref { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.5rem; padding: 0; border: 0; }
.contact-pref legend { float: left; width: 100%; margin-bottom: .6rem; padding: 0; font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .025em; }
.contact-pref label { display: inline-flex; margin: 0; cursor: pointer; }
.contact-pref input { position: absolute; opacity: 0; pointer-events: none; }
.contact-pref span { padding: .5rem .95rem; border: 1px solid rgba(7, 27, 41, .45); border-radius: 999px; color: var(--ink); font-family: var(--sans); font-size: .76rem; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.contact-pref input:checked + span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.contact-pref input:focus-visible + span { outline: 2px solid #0c746e; outline-offset: 2px; }
.contact-form.needs-phone [name="phone"] { border-bottom-color: #0c746e; }

/* the contact page as a chart: the canvas behind the content, the dotted pattern lighter so the grid reads */
.contact-page .contact-chart { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.contact-page .contact-cursor { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.contact-page::before { opacity: .12; }

#how-we-work { scroll-margin-top: 7rem; }

/* local partnerships: the home band, the About section, the status of each local entity, the contact option */
.local-band { position: relative; overflow: hidden; color: var(--paper); background: var(--ink-2); }
.local-band::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(193, 231, 214, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(193, 231, 214, .05) 1px, transparent 1px); background-size: 3rem 3rem; }
.local-band > * { position: relative; }
.local-band .section-label { color: #8fb3ad; }.local-band .section-label span { color: var(--aqua); }
.local-band-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: 2.6rem; }
.local-band h2 { margin: 0 0 1.6rem; color: var(--paper); font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.local-band-copy p { max-width: 36rem; margin: 0 0 1rem; color: #c1d1cb; font-size: .98rem; line-height: 1.75; }
.local-band .contact-actions { margin-top: 2rem; }
.local-band .contact-link { color: var(--paper); border-bottom-color: rgba(240, 240, 233, .4); }
.local-band .contact-link:hover { color: var(--aqua); border-color: var(--aqua); }
.local-status { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.local-status li { display: grid; gap: 1rem; align-content: start; padding: 1.3rem 1.2rem 1.2rem; border: 1px solid rgba(7, 27, 41, .13); border-radius: 1.1rem; background: #f7f8f2; }
.local-status img { display: block; width: 100%; height: auto; }
.local-status span { color: #36505a; font-size: .88rem; line-height: 1.55; }
.local-status b { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; color: #2d817a; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.local-status b::before { width: .55rem; height: .55rem; border-radius: 50%; content: ""; background: currentColor; }
.local-status .is-opening b { color: #1b6f93; }
.local-status .is-opening b::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.local-status .is-study { border-style: dashed; background: transparent; }
.local-status .is-study b { color: #95601f; }
.local-status .is-study b::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.local-status .is-study img { opacity: .45; filter: saturate(.4); }
.local-band .local-status li { border-color: var(--line-dark); background: rgba(255, 255, 255, .035); }
.local-band .local-status span { color: #c1d1cb; }
.local-band .local-status b { color: var(--aqua); }
.local-band .local-status .is-opening b { color: var(--sky); }
.local-band .local-status .is-study { background: transparent; }
.local-band .local-status .is-study b { color: var(--sand); }
.local-band .local-status .is-study img { opacity: .4; }
.local-model { color: var(--ink); background: var(--paper); }
.local-model-intro { display: grid; grid-template-columns: 1fr .85fr; gap: 3rem; align-items: end; margin-top: 2.75rem; }
.local-model-intro h2 { margin: 0; color: var(--ink); font-size: clamp(2.6rem, 4.6vw, 5rem); }
.local-model-intro h2 em { color: #2d817a; }
.local-model-intro p { margin: 0 0 .9rem; color: #36505a; font-size: .98rem; line-height: 1.75; }
.local-label { margin: 3.4rem 0 0; color: #527070; font-size: .7rem; font-weight: 800; letter-spacing: .035em; }
.local-benefits { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-top: 1.1rem; }
.local-benefit { padding: 1.3rem 1.2rem 1.4rem; border: 1px solid rgba(7, 27, 41, .13); border-radius: 1.2rem; background: #f7f8f2; }
.local-benefit h3 { margin: .75rem 0 .7rem; color: var(--ink); font-size: 1.08rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.local-benefit p:not(.ways-tag) { margin: 0; color: #36505a; font-size: .9rem; line-height: 1.6; }
.local-path { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1.6rem 3rem; margin-top: 1.4rem; padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: 1.4rem; color: var(--paper); background: var(--ink-2); }
.local-path-head h3 { margin: 0 0 .8rem; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; }
.local-path-head p { margin: 0; color: #c1d1cb; font-size: .95rem; line-height: 1.65; }
.local-conditions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: condition; }
.local-conditions li { padding-top: .9rem; border-top: 1px solid rgba(165, 238, 209, .35); color: #c1d1cb; font-size: .9rem; line-height: 1.55; counter-increment: condition; }
.local-conditions b { display: block; margin-bottom: .35rem; color: var(--paper); font-size: .95rem; font-weight: 700; }
.local-conditions b::before { margin-right: .5rem; color: var(--aqua); content: "0" counter(condition); font-size: .7rem; font-weight: 800; }
.local-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin: .6rem 0 0; padding: 0; list-style: none; }
.local-steps li { position: relative; padding: 1.4rem 1rem 0 0; color: #c1d1cb; font-size: .82rem; font-weight: 700; line-height: 1.4; }
.local-steps li::before { position: absolute; top: 0; left: 0; right: 0; height: 1px; content: ""; background: repeating-linear-gradient(90deg, rgba(165, 238, 209, .55) 0 6px, transparent 6px 11px); }
.local-steps li::after { position: absolute; top: -.32rem; left: 0; width: .65rem; height: .65rem; border-radius: 50%; content: ""; background: var(--ink-2); box-shadow: inset 0 0 0 2px var(--aqua); }
.local-steps li:last-child { color: var(--aqua); }
.local-steps li:last-child::before { background: none; }
.local-steps li:last-child::after { background: var(--aqua); }
.local-where { margin: 3.4rem 0 1.1rem; color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; }
.local-status.is-wide { grid-template-columns: repeat(4, 1fr); }
.local-actions { margin-top: 2.2rem; }
#local-partnerships, #partnership { scroll-margin-top: 7rem; }
.contact-topic { margin-bottom: 1.6rem; }
.contact-pref legend b { color: #0c746e; font-weight: 800; }
.partner-fields { margin: 0 0 1.6rem; padding: 1.3rem 1.3rem .2rem; border-left: 3px solid #0c746e; border-radius: 0 .9rem .9rem 0; background: rgba(240, 240, 233, .55); }
.partner-intro { margin: 0 0 1.3rem; color: #2c4c55; font-size: .9rem; line-height: 1.6; }
.partner-fields .contact-pref { margin-bottom: 1.3rem; }
.partner-fields .contact-pref span { font-size: .72rem; }
@media (max-width: 1180px) { .local-benefits { grid-template-columns: repeat(3, 1fr); } .local-status.is-wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  .local-band-grid, .local-model-intro, .local-path { grid-template-columns: 1fr; }
  .local-benefits { grid-template-columns: 1fr 1fr; }
  .local-conditions { grid-template-columns: 1fr; }
  .local-steps { grid-template-columns: 1fr; gap: 1rem; margin-left: .3rem; }
  .local-steps li { padding: 0 0 0 1.5rem; }
  .local-steps li::before { top: .55rem; bottom: -1.5rem; left: .3rem; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, rgba(165, 238, 209, .55) 0 6px, transparent 6px 11px); }
  .local-steps li::after { top: .3rem; }
}
@media (max-width: 560px) { .local-benefits, .local-status.is-wide { grid-template-columns: 1fr; } .local-status li { padding: 1rem .9rem .95rem; } }

/* "At sea" as a survey contact sheet (app.js): prints on chart paper, a number and a KP / position under
   each, a light tilt that settles on hover; a click opens the print full size */
.at-sea-grid.is-sheet { grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem; margin-top: 1.8rem; padding: clamp(1.4rem, 3vw, 2.6rem); border: 1px solid rgba(7, 27, 41, .25); border-radius: .4rem; background-color: var(--paper); background-image: linear-gradient(rgba(7, 27, 41, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 27, 41, .07) 1px, transparent 1px); background-size: 64px 64px; box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .35); }
.at-sea-grid.is-sheet figure { overflow: visible; aspect-ratio: auto; border-radius: 0; cursor: zoom-in; transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.at-sea-grid.is-sheet figure:nth-child(3n + 1) { --tilt: -.8deg; }
.at-sea-grid.is-sheet figure:nth-child(3n + 2) { --tilt: .5deg; }
.at-sea-grid.is-sheet figure:nth-child(3n) { --tilt: -.3deg; }
.at-sea-grid.is-sheet figure:hover, .at-sea-grid.is-sheet figure:focus-visible { transform: rotate(0) translateY(-.25rem); outline: none; }
.at-sea-grid.is-sheet img { aspect-ratio: 4 / 3; height: auto; padding: .45rem; background: #fbfbf6; box-shadow: 0 .7rem 1.4rem rgba(7, 27, 41, .22); border: 1px solid rgba(7, 27, 41, .12); transform: none !important; }
.at-sea-grid.is-sheet figure:focus-visible img { outline: 2px solid var(--sand); outline-offset: 3px; }
.at-sea-grid.is-sheet .sheet-label { position: static; display: flex; gap: .7rem; align-items: baseline; margin: 0; padding: .5rem .55rem .55rem; border-radius: 0; color: #36505a; background: #fbfbf6; box-shadow: 0 .7rem 1.4rem rgba(7, 27, 41, .12); border: 1px solid rgba(7, 27, 41, .12); border-top: 0; font: 500 .66rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.at-sea-grid.is-sheet .sheet-label b { color: #b5641f; font-weight: 700; }
.at-sea-grid.is-sheet .sheet-label i { font-style: normal; color: #6b7f84; }
.sheet-viewer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(4, 16, 24, .92); }
.sheet-viewer[hidden] { display: none; }
.sheet-viewer figure { max-width: min(78rem, 100%); margin: 0; }
.sheet-viewer img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); margin: 0 auto; padding: .6rem; background: #fbfbf6; }
.sheet-viewer figcaption { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin-top: .9rem; color: #c9d9d3; font: 500 .74rem/1.5 ui-monospace, Menlo, Consolas, monospace; }
.sheet-viewer figcaption b { color: var(--sand); }
.sheet-viewer figcaption em { flex-basis: 100%; color: var(--paper); font: italic 400 .95rem/1.5 Georgia, serif; }
.sheet-viewer button { position: absolute; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(165, 238, 209, .4); border-radius: 50%; color: var(--aqua); background: rgba(7, 27, 41, .7); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet-viewer button:hover, .sheet-viewer button:focus-visible { color: var(--ink); background: var(--aqua); outline: none; }
.sheet-viewer .sheet-close { top: 1rem; right: 1rem; }
.sheet-viewer .sheet-prev { left: 1rem; top: 50%; }
.sheet-viewer .sheet-next { right: 1rem; top: 50%; }
.sheet-open, .sheet-open body { overflow: hidden; }
@media (max-width: 820px) { .at-sea-grid.is-sheet { grid-template-columns: repeat(2, 1fr); gap: 1.4rem .9rem; } .at-sea-grid.is-sheet .sheet-label i { display: none; } }
@media (prefers-reduced-motion: reduce) { .at-sea-grid.is-sheet figure { transition: none; } }

/* a real screen from the field under the example scope */
.page-scope .scope-shot { grid-column: 2; margin: 0; }
.page-scope .scope-shot img { display: block; width: 100%; height: auto; border: 1px solid rgba(165, 238, 209, .18); border-radius: .8rem; }
.page-scope .scope-shot figcaption { margin-top: .8rem; color: #a7c0ba; font-size: .86rem; line-height: 1.6; }
.page-scope .scope-shot figcaption strong { color: var(--paper); }
@media (max-width: 820px) { .page-scope .scope-shot { grid-column: auto; } }
/* the contact sheet kept compact: small prints, two rows on a wide screen */
.at-sea-grid.is-sheet { grid-template-columns: repeat(5, 1fr); gap: 1rem .9rem; padding: clamp(.9rem, 2vw, 1.4rem); }
.at-sea-grid.is-sheet img { padding: .3rem; box-shadow: 0 .4rem .9rem rgba(7, 27, 41, .2); }
@media (max-width: 1000px) { .at-sea-grid.is-sheet { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .at-sea-grid.is-sheet { grid-template-columns: repeat(3, 1fr); gap: .6rem .5rem; } }

/* "At sea" as a horizontal wheel (app.js): a curved strip of photos, the middle one forward and larger */
.at-sea-grid.is-flow { --card: clamp(10.5rem, 21vw, 16rem); position: relative; display: block; overflow: hidden; height: calc(var(--card) * .75 * 1.25 + 2.6rem); margin-top: 1.4rem; padding: 0; border: 0; background: none; box-shadow: none; perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; }
.at-sea-grid.is-flow:active { cursor: grabbing; }
.at-sea-grid.is-flow .flow-track { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
.at-sea-grid.is-flow figure { position: absolute; top: 0; left: 0; width: var(--card); aspect-ratio: 4 / 3; margin: calc(var(--card) * -.375) 0 0 calc(var(--card) * -.5); overflow: hidden; border-radius: .7rem; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .4); cursor: zoom-in; }
.at-sea-grid.is-flow figure:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.at-sea-grid.is-flow img { width: 100%; height: 100%; max-height: none; padding: 0; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transform: none !important; }

/* the nearshore strip follows the offshore one in the same dark band */
.at-sea.is-nearshore { padding-top: 0; }