/* ==========================================================================
   Smart Global Logistics — site styles
   Dark, card-based layout. Brand green from the logo (#85c226).
   ========================================================================== */

/* Outfit, self-hosted (latin subset, variable weight 300-600) and preloaded from each page */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #111312;
  --surface: #171a18;
  --card: #1e221f;
  --card-2: #252a26;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f1f3f0;
  --muted: #9ba39c;
  --dim: #6f776f;
  --accent: #85c226;
  --accent-hover: #97d23a;
  --accent-ink: #10190a;
  --teal: #1d4a4d;
  --gradient: linear-gradient(120deg, #1d4a4d 0%, #3f6f45 48%, #85c226 100%);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1240px;
  --gutter: 24px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --soft: #c3c9c2;
  --soft-2: #d5dad4;
  --hover: rgba(255, 255, 255, 0.05);
  --header-bg: rgba(17, 19, 18, 0.82);
  --glass: rgba(17, 19, 18, 0.72);
  --shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  --stat-back: #24301f;
  /* Motion tokens: decelerate on arrival, accelerate on exit, exits ~65% of enters */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 700ms;
}

/* Day theme: white background, set by the time-of-day script (06:00–17:59 local) */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f6f7f5;
  --card: #f2f4f1;
  --card-2: #e8ebe6;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --text: #0e100f;
  --muted: #5a615b;
  --dim: #858c86;
  --soft: #3a403b;
  --soft-2: #2a2f2b;
  --hover: rgba(0, 0, 0, 0.04);
  --header-bg: rgba(255, 255, 255, 0.85);
  --glass: rgba(255, 255, 255, 0.8);
  --shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
  --stat-back: #e6f2d2;
}
/* Image and gradient panels stay dark in the day theme so their white text reads */
:root[data-theme="light"] .hero-card,
:root[data-theme="light"] .page-hero-card,
:root[data-theme="light"] .cta-band,
:root[data-theme="light"] .gradient-card,
:root[data-theme="light"] .stat-accent .stat-face {
  --text: #f1f3f0;
  --muted: #c9cfc8;
  --soft-2: #e6eae5;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.24);
  color: var(--text);
}
/* Brand green is too light for text on white; use a deeper shade there */
:root[data-theme="light"] .link-arrow:hover,
:root[data-theme="light"] .side-nav a.is-active,
:root[data-theme="light"] .info-card a:hover,
:root[data-theme="light"] .footer-links a:hover,
:root[data-theme="light"] .footer-contact a:hover,
:root[data-theme="light"] .form-success strong,
:root[data-theme="light"] .subscribe-msg.is-success,
:root[data-theme="light"] .hero-meta .hero-flags span:hover,
:root[data-theme="light"] .main-nav > a.mobile-only { color: #4f7d0e; }
:root[data-theme="light"] .field label .error-label,
:root[data-theme="light"] .subscribe-msg.is-error { color: #c0392b; }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 999px; font-weight: 500;
}
.skip-link:focus { top: 16px; }

/* ---------- Small helpers ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(133, 194, 38, 0.18);
}

.mobile-only,
.main-nav > a.mobile-only { display: none; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 16px; font-weight: 500; line-height: 1;
  cursor: pointer;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-spring);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
/* Press feedback: quick squeeze in, springy release */
.btn:active { transform: scale(0.96); transition-duration: 80ms; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--text);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-base), background-color .4s;
}
/* Lifts off the page once content scrolls underneath (sg.js) */
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand img { height: 52px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav > a,
.nav-dropdown > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 400; color: var(--muted);
  background: none; border: 0; cursor: pointer;
  transition: color .2s, background .2s;
}
.main-nav > a:hover,
.nav-dropdown > button:hover,
.nav-dropdown:focus-within > button { color: var(--text); background: var(--hover); }
.main-nav > a.is-active,
.nav-dropdown.is-active > button { color: var(--text); }
.main-nav > a.is-active::after,
.nav-dropdown.is-active > button::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: 2px;
}
.nav-dropdown { position: relative; }
.nav-dropdown > button svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-dropdown:hover > button svg,
.nav-dropdown.is-open > button svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  width: 290px; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(0.98); transform-origin: 50% 0;
  /* Closing: short and accelerating */
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in), visibility var(--dur-fast);
}
.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  /* Opening: grows down from the trigger and settles */
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
}
.dropdown-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--muted);
}
.dropdown-menu a:hover,
.dropdown-menu a.is-active { background: var(--card-2); color: var(--text); }
.dropdown-menu .menu-icon {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: rgba(133, 194, 38, 0.12); color: var(--accent);
}
.dropdown-menu .menu-icon svg { width: 17px; height: 17px; }
.dropdown-menu .menu-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; border-radius: 0 0 10px 10px; }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone { font-size: 15px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.header-phone svg { width: 16px; height: 16px; color: var(--accent); }
.header-phone:hover { color: var(--text); }

/* Page-to-page: content crossfades (old out fast, new in slower) while the header stays put */
@view-transition { navigation: auto; }
:root:not(.theme-snapping) .site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-fade-out var(--dur-fast) var(--ease-in) both; }
::view-transition-new(root) { animation: vt-fade-in 320ms var(--ease-out) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* Theme switch animation: circular reveal (see sg.js) replaces the crossfade */
:root.theme-snapping::view-transition-old(root),
:root.theme-snapping::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-snapping,
.theme-snapping *,
.theme-snapping *::before,
.theme-snapping *::after { transition: none !important; }
/* Fallback fade for browsers without View Transitions */
.theme-fading *,
.theme-fading *::before,
.theme-fading *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .3s ease !important;
}

.theme-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex: none;
  width: 72px; height: 38px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card-2); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
/* Sliding knob sits under the active theme's icon: sun (left) by day, moon (right) by night */
.theme-toggle::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateX(34px);
  transition: transform .3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root[data-theme="light"] .theme-toggle::before { transform: translateX(0); }
.theme-toggle svg { position: relative; z-index: 1; width: 16px; height: 16px; color: var(--muted); transition: color .3s; }
.theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun { color: var(--accent-ink); }
:root[data-theme="light"] .theme-toggle .icon-moon { color: var(--muted); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: none; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; transition: transform .2s, background .2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Sections ---------- */

.section { padding: 112px 0; }
.section-tight { padding: 72px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.section-head h2 { font-size: clamp(32px, 4.2vw, 52px); max-width: 14em; margin-top: 16px; }
.section-head p { max-width: 30em; color: var(--muted); margin: 0; }

/* ---------- Home hero ---------- */

.hero { padding: 40px 0 0; }
.hero-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 0 4px 32px;
}
.hero-meta div:nth-child(2) { text-align: right; }
.hero-meta div:nth-child(3) { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.hero-meta span { display: block; font-size: 15px; color: var(--muted); }
.hero-meta strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-meta .hero-flags { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.hero-meta .hero-flags span { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.hero-meta .hero-flags img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--line-strong); }

.hero-card {
  position: relative; overflow: hidden;
  min-height: 640px; border-radius: 32px;
  display: flex; align-items: flex-end;
  background: var(--card);
  isolation: isolate;
}
.hero-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
/* Hero scene (home): a night container port over layered hills.
   One 24s loop (--loop): the feeder ship docks (0-10%), the gantry crane lifts three
   containers from the quay onto its deck (10-64%), the ship sails (70-86%) and fresh
   containers roll onto the quay (88-98%). Coordinates are SVG user units (viewBox 1600x700);
   the port is anchored bottom-right so the crane stays in view on narrow screens. */
.hero-scene { background: linear-gradient(180deg, #08110c 0%, #10261a 45%, #24451f 78%, #2f5a22 100%); }
.scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; --loop: 24s; --lift: cubic-bezier(0.45, 0, 0.25, 1); }
.scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-word { display: flex; justify-content: center; align-items: flex-start; padding-top: 6%; }
.scene-word span {
  font-size: clamp(90px, 17vw, 260px); font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(180deg, rgba(231, 246, 200, 0.16), rgba(133, 194, 38, 0.02));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scene-waves { animation: waves 3s linear infinite; }
@keyframes waves { to { transform: translateX(-80px); } }

/* Resting pose (also the reduced-motion frame): ship docked, crane parked high over the quay */
.port-trolley { transform: translateX(1458px); }
.port-cable { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0.1714); }
.port-spreader { transform: translate(1458px, 230px); }
.port-carry { opacity: 0; }

.port-ship { animation: port-ship var(--loop) infinite; }
.port-hull { animation: port-bob 5s ease-in-out infinite; }
.port-trolley { animation: port-trolley var(--loop) var(--lift) infinite; }
.port-cable { animation: port-cable var(--loop) var(--lift) infinite; }
.port-spreader { animation: port-spreader var(--loop) var(--lift) infinite; }
.port-carry-1 { animation: port-carry-1 var(--loop) step-end infinite; }
.port-carry-2 { animation: port-carry-2 var(--loop) step-end infinite; }
.port-carry-3 { animation: port-carry-3 var(--loop) step-end infinite; }
.port-load-1 { animation: port-load-1 var(--loop) step-end infinite; }
.port-load-2 { animation: port-load-2 var(--loop) step-end infinite; }
.port-load-3 { animation: port-load-3 var(--loop) step-end infinite; }
.port-quay-1 { animation: port-quay-1 var(--loop) var(--ease-out) infinite; }
.port-quay-2 { animation: port-quay-2 var(--loop) var(--ease-out) infinite; }
.port-quay-3 { animation: port-quay-3 var(--loop) var(--ease-out) infinite; }
.port-light { animation: port-blink 2s steps(1) infinite; }

/* Ship: glides in decelerating, waits while loaded, pulls away accelerating */
@keyframes port-ship {
  0% { transform: translateX(-1400px); animation-timing-function: var(--ease-out); }
  10%, 70% { transform: translateX(0); animation-timing-function: var(--ease-in); }
  86%, 100% { transform: translateX(-1400px); }
}
@keyframes port-bob { 50% { transform: translateY(2px); } }

/* Crane: per lift, run out over the quay, lower, raise, traverse over the ship, lower, raise.
   Quay slots x 1392 / 1458 / 1524 -> ship slots x 1232 / 1166 / 1100; high y 230, low y 520 */
@keyframes port-trolley {
  0%, 10% { transform: translateX(1458px); }
  13%, 19% { transform: translateX(1392px); }
  23%, 28% { transform: translateX(1232px); }
  31%, 37% { transform: translateX(1458px); }
  41%, 46% { transform: translateX(1166px); }
  49%, 55% { transform: translateX(1524px); }
  59%, 64% { transform: translateX(1100px); }
  68%, 100% { transform: translateX(1458px); }
}
@keyframes port-cable {
  0%, 13%, 19%, 23%, 28%, 31%, 37%, 41%, 46%, 49%, 55%, 59%, 64%, 100% { transform: scaleY(0.1714); }
  16%, 26%, 34%, 44%, 52%, 62% { transform: scaleY(1); }
}
@keyframes port-spreader {
  0%, 10% { transform: translate(1458px, 230px); }
  13% { transform: translate(1392px, 230px); }
  16% { transform: translate(1392px, 520px); }
  19% { transform: translate(1392px, 230px); }
  23% { transform: translate(1232px, 230px); }
  26% { transform: translate(1232px, 520px); }
  28% { transform: translate(1232px, 230px); }
  31% { transform: translate(1458px, 230px); }
  34% { transform: translate(1458px, 520px); }
  37% { transform: translate(1458px, 230px); }
  41% { transform: translate(1166px, 230px); }
  44% { transform: translate(1166px, 520px); }
  46% { transform: translate(1166px, 230px); }
  49% { transform: translate(1524px, 230px); }
  52% { transform: translate(1524px, 520px); }
  55% { transform: translate(1524px, 230px); }
  59% { transform: translate(1100px, 230px); }
  62% { transform: translate(1100px, 520px); }
  64% { transform: translate(1100px, 230px); }
  68%, 100% { transform: translate(1458px, 230px); }
}

/* Hand-offs: the container swaps between quay, spreader and deck at the lowest point */
@keyframes port-carry-1 { 0% { opacity: 0; } 16% { opacity: 1; } 26% { opacity: 0; } }
@keyframes port-carry-2 { 0% { opacity: 0; } 34% { opacity: 1; } 44% { opacity: 0; } }
@keyframes port-carry-3 { 0% { opacity: 0; } 52% { opacity: 1; } 62% { opacity: 0; } }
@keyframes port-load-1 { 0% { opacity: 0; } 26% { opacity: 1; } }
@keyframes port-load-2 { 0% { opacity: 0; } 44% { opacity: 1; } }
@keyframes port-load-3 { 0% { opacity: 0; } 62% { opacity: 1; } }
/* Restock: each container rolls in from the right, nearest-the-crane first, so they never overlap */
@keyframes port-quay-1 {
  0%, 15.99% { opacity: 1; transform: none; }
  16%, 88% { opacity: 0; transform: translateX(260px); }
  94%, 100% { opacity: 1; transform: none; }
}
@keyframes port-quay-2 {
  0%, 33.99% { opacity: 1; transform: none; }
  34%, 90% { opacity: 0; transform: translateX(260px); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes port-quay-3 {
  0%, 51.99% { opacity: 1; transform: none; }
  52%, 92% { opacity: 0; transform: translateX(260px); }
  98%, 100% { opacity: 1; transform: none; }
}
@keyframes port-blink { 0% { opacity: 1; } 60% { opacity: 0.2; } }

/* Paused while the hero is off screen (sg.js) */
.scene-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .scene-waves, .port-ship, .port-hull, .port-trolley, .port-cable, .port-spreader,
  .port-carry, .port-ship-box, .port-quay-box, .port-light { animation: none; }
}
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 14, 12, 0.92) 0%, rgba(10, 14, 12, 0.72) 42%, rgba(10, 14, 12, 0.12) 75%),
    linear-gradient(0deg, rgba(10, 14, 12, 0.85) 0%, rgba(10, 14, 12, 0) 45%);
}
.hero-content { padding: 56px; max-width: 760px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.02; margin: 20px 0 22px; }
.hero h1 .text-accent { display: block; }
.hero-lead { font-size: 19px; color: #c9cfc8; max-width: 34em; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-strip {
  display: grid; grid-template-columns: 1.2fr 1.6fr auto; align-items: center; gap: 32px;
  padding: 32px 4px 0;
}
.hero-strip h2 { font-size: 15px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; }
.hero-strip p { margin: 0; color: var(--muted); font-size: 15px; text-align: center; }
.hero-strip .chips { display: flex; gap: 8px; }
.chip-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--text);
}
.chip-icon svg { width: 20px; height: 20px; }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { perspective: 1000px; cursor: pointer; border-radius: var(--radius); }
.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stat-inner { display: grid; height: 100%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; }
.stat-face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 28px 30px;
}
.stat-back { transform: rotateY(180deg); display: flex; align-items: center; border-color: rgba(133, 194, 38, 0.4); background: linear-gradient(160deg, var(--stat-back), var(--card)); }
.stat-back p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--soft-2); }
.stat.is-flipped .stat-inner { transform: rotateY(180deg); }
@media (hover: hover) { .stat:hover .stat-inner { transform: rotateY(180deg); } }
.stat strong { display: block; font-size: clamp(40px, 4.4vw, 56px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.stat strong sup { font-size: 0.5em; color: var(--accent); top: -0.7em; margin-left: 2px; }
.stat span { display: block; color: var(--muted); margin-top: 14px; font-size: 15px; }
.stat.stat-accent .stat-face { background: var(--gradient); border-color: transparent; }
.stat.stat-accent span { color: rgba(255, 255, 255, 0.82); }
.stat.stat-accent strong sup { color: #fff; }

/* ---------- Bento / cards ---------- */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
}
.card h3 { font-size: 26px; margin-bottom: 12px; }
.card p { color: var(--muted); }

.service-card {
  display: flex; flex-direction: column;
  min-height: 460px; padding: 0;
  transition: border-color var(--dur-base), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.service-card:hover { border-color: rgba(133, 194, 38, 0.45); transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card:active { transform: translateY(-2px) scale(0.99); transition-duration: 80ms; }
.service-card .card-media { position: relative; height: 230px; overflow: hidden; }
.service-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.service-card:hover .card-media img { transform: scale(1.05); }
.service-card .card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--card) 0%, transparent 60%);
}
.service-card .card-index {
  position: absolute; top: 18px; left: 18px; z-index: 1;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; letter-spacing: 0.08em;
  background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
}
.service-card .card-body { display: flex; flex-direction: column; flex: 1; padding: 8px 30px 30px; }
.service-card .card-body p { flex: 1; font-size: 16px; }
.service-card .card-icon {
  width: 52px; height: 52px; border-radius: 16px; margin-top: -34px; margin-bottom: 18px; position: relative; z-index: 1;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  transition: transform 320ms var(--ease-spring);
}
.service-card .card-icon svg { width: 24px; height: 24px; }
.service-card:hover .card-icon { transform: translateY(-4px) rotate(-6deg); }
.service-card .link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.service-card:hover .link-arrow svg { transform: translateX(4px); }

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* About split on home */
.about-card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 44px; }
.about-card h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 18px 0 20px; }
.about-card p { font-size: 18px; color: var(--soft); }

.media-card { padding: 0; min-height: 420px; }
.media-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-card .media-label {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: var(--radius-sm);
  background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
}
.media-card .media-label strong { font-weight: 500; }
.media-card .media-label span { color: var(--muted); font-size: 14px; }

.feature-list { display: grid; gap: 4px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--soft-2);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 2px; }

.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.check-grid li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line); color: var(--soft-2); font-size: 16px; line-height: 1.45;
}
.check-grid svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }

.gradient-card { background: var(--gradient); border-color: transparent; }
.gradient-card p { color: rgba(255, 255, 255, 0.85); }

.big-quote { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }

.presence-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.presence-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--hover); border: 1px solid var(--line-strong); font-size: 15px;
}
.presence-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.presence-list li.is-hq { background: rgba(133, 194, 38, 0.12); border-color: rgba(133, 194, 38, 0.4); }
.flag-list li { padding: 8px 16px 8px 10px; }
.flag-list li::before { content: none; }
.flag-list img { width: 24px; height: 16px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line-strong); flex-shrink: 0; }

/* Country hover: flag waves, pill lifts */
@keyframes flag-wave {
  0%, 100% { transform: scale(1.2) rotate(0) skewY(0); }
  25% { transform: scale(1.2) rotate(-8deg) skewY(6deg); }
  75% { transform: scale(1.2) rotate(8deg) skewY(-6deg); }
}
.flag-list li, .hero-meta .hero-flags span { cursor: default; transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }
.flag-list li:hover { transform: translateY(-3px); background: rgba(133, 194, 38, 0.14); border-color: rgba(133, 194, 38, 0.5); }
.hero-meta .hero-flags span:hover { color: var(--accent); transform: translateY(-2px); }
.flag-list img, .hero-meta .hero-flags img { transition: transform 0.25s ease; }
/* One wave per hover, not a loop: decorative motion shouldn't run continuously */
.flag-list li:hover img, .hero-meta .hero-flags span:hover img { transform-origin: left center; animation: flag-wave 0.9s ease-in-out 1; }

.icon-badge {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(133, 194, 38, 0.12); color: var(--accent); margin-bottom: 24px;
}
.icon-badge svg { width: 24px; height: 24px; }

/* ---------- CTA band ---------- */

.cta-band {
  position: relative; overflow: hidden; border-radius: 32px;
  padding: 64px; background: var(--gradient);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.cta-band::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, 0.07); pointer-events: none;
}
.cta-band h2 { font-size: clamp(32px, 4vw, 52px); text-transform: uppercase; font-weight: 500; letter-spacing: -0.01em; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin: 16px 0 0; max-width: 30em; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.cta-contact {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: var(--radius-sm);
  background: rgba(10, 14, 12, 0.35); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background var(--dur-base), transform 320ms var(--ease-out);
}
.cta-contact:hover { background: rgba(10, 14, 12, 0.55); transform: translateX(4px); }
.cta-contact:active { transform: translateX(2px) scale(0.99); transition-duration: 80ms; }
.cta-contact svg { width: 22px; height: 22px; flex: none; }
.cta-contact span { display: block; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.cta-contact strong { display: block; font-weight: 500; font-size: 18px; overflow-wrap: anywhere; }

/* ---------- Inner page hero ---------- */

.page-hero { padding: 32px 0 0; }
.page-hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 440px; border-radius: 32px; background: var(--card);
  display: flex; align-items: flex-end;
}
.page-hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 14, 12, 0.9) 0%, rgba(10, 14, 12, 0.55) 55%, rgba(10, 14, 12, 0.15) 100%),
    linear-gradient(0deg, rgba(10, 14, 12, 0.7) 0%, rgba(10, 14, 12, 0) 50%);
}
.page-hero-card.no-image { background: var(--gradient); }
.page-hero-card.no-image::before { background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.12), transparent 45%); }
.page-hero-content { padding: 48px 56px; max-width: 820px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }
.page-hero h1 { font-size: clamp(38px, 5.4vw, 68px); text-transform: uppercase; font-weight: 500; letter-spacing: -0.01em; line-height: 1.04; }
.page-hero .lead { font-size: 19px; color: #c9cfc8; margin: 18px 0 0; max-width: 34em; }

/* ---------- Article + sidebar ---------- */

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.prose h2 { font-size: clamp(28px, 3vw, 38px); margin: 16px 0 24px; }
.prose h3 { font-size: 24px; margin: 48px 0 20px; }
.prose p { color: var(--soft); font-size: 18px; }
.prose .intro { font-size: 21px; color: var(--text); font-weight: 300; line-height: 1.55; }
.prose .callout {
  margin-top: 32px; padding: 28px 30px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.prose .callout p { margin: 0; color: var(--soft-2); }

.sidebar { position: sticky; top: 104px; display: grid; gap: 16px; }
.sidebar .card { padding: 24px; }
.sidebar h3 { font-size: 13px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.side-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; color: var(--soft-2); font-size: 16px;
  transition: background .2s, color .2s;
}
.side-nav a svg { width: 16px; height: 16px; opacity: 0.5; }
.side-nav a:hover { background: var(--card-2); color: var(--text); }
.side-nav a.is-active { background: rgba(133, 194, 38, 0.12); color: var(--accent); }
.side-nav a.is-active svg { opacity: 1; }
.side-contact h4 { font-size: 24px; margin-bottom: 8px; }
.side-contact p { font-size: 15px; }
.side-contact .btn { width: 100%; margin-top: 8px; }

/* ---------- Contact page ---------- */

.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.info-card { padding: 26px; }
.info-card .icon-badge { margin-bottom: 18px; width: 46px; height: 46px; border-radius: 14px; }
.info-card .icon-badge svg { width: 21px; height: 21px; }
.info-card h3 { font-size: 13px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.info-card p, .info-card a { color: var(--text); font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.info-card a:hover { color: var(--accent); }
.info-card .stack { display: grid; gap: 4px; }
.info-card.wide { grid-column: span 2; }

.map-card { padding: 0; height: 380px; grid-column: span 2; }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.35) contrast(1.05); }

.form-card { padding: 40px; }
.form-card h2 { font-size: 34px; margin: 14px 0 10px; }
.form-card > p { color: var(--muted); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-size: 14px; color: var(--muted); }
.field label .error-label { color: #ff8f7a; }
.field input,
.field textarea {
  width: 100%; padding: 14px 18px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line-strong);
  font-size: 16px; font-weight: 300; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(133, 194, 38, 0.15); }
.form-success {
  padding: 28px; border-radius: var(--radius-sm); background: rgba(133, 194, 38, 0.1); border: 1px solid rgba(133, 194, 38, 0.35);
}
.form-success strong { color: var(--accent); font-weight: 500; }

/* ---------- Footer ---------- */

.site-footer { margin-top: 112px; border-top: 1px solid var(--line); background: var(--surface); }
.footer-top { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr; gap: 40px; padding: 72px 0 56px; }
.footer-brand img { height: 64px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: var(--muted); font-size: 15px; max-width: 26em; }
.site-footer h3 { font-size: 13px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.footer-links { display: grid; gap: 10px; }
.footer-links a { color: var(--soft-2); font-size: 15px; }
.footer-links a:hover { color: var(--accent); }
.footer-contact { display: grid; gap: 14px; font-size: 15px; color: var(--soft-2); }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 3px; }
.footer-contact a:hover { color: var(--accent); }
.footer-contact strong { display: block; color: var(--text); font-weight: 500; }

.subscribe-form { display: flex; gap: 8px; margin-top: 16px; }
.subscribe-form input {
  flex: 1; min-width: 0; padding: 12px 18px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-strong); font-size: 15px;
}
.subscribe-form input:focus { outline: none; border-color: var(--accent); }
.subscribe-form .btn { min-height: 46px; padding: 10px 18px; }
.subscribe-msg { font-size: 14px; margin-top: 10px; }
.subscribe-msg.is-error { color: #ff8f7a; }
.subscribe-msg.is-success { color: var(--accent); }

.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px 0 32px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px;
}
.footer-bottom a:hover { color: var(--text); }

/* ---------- Reveal on scroll ---------- */

/* Hidden only when JS runs (the inline head script sets data-theme), so content still
   shows without JS. An animation rather than a transition, so it never overrides a
   card's own hover transitions; fill-mode "backwards" hands the element back when done.
   --stagger is set per element by sg.js so a row of cards cascades in. */
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
[data-theme] .reveal:not(.is-visible) { opacity: 0; }
.reveal.is-visible { animation: rise-in var(--dur-slow) var(--ease-out) var(--stagger, 0ms) backwards; }

/* Page load: the hero card settles in, then its copy cascades (eyebrow, title, lead, buttons).
   Above-the-fold content never starts fully transparent: the browser only counts it as painted
   (Largest Contentful Paint) once it is visible, so a fade from 0 would delay LCP by ~1s. */
@keyframes card-in { from { transform: scale(0.985); } to { transform: none; } }
@keyframes hero-rise { from { opacity: 0.35; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-theme] .hero-card,
[data-theme] .page-hero-card { animation: card-in 900ms var(--ease-out); }
[data-theme] .hero-content > *,
[data-theme] .page-hero-content > * { animation: hero-rise var(--dur-slow) var(--ease-out) backwards; }
[data-theme] .hero-content > :nth-child(2),
[data-theme] .page-hero-content > :nth-child(2) { animation-delay: 60ms; }
[data-theme] .hero-content > :nth-child(3),
[data-theme] .page-hero-content > :nth-child(3) { animation-delay: 120ms; }
[data-theme] .hero-content > :nth-child(4),
[data-theme] .page-hero-content > :nth-child(4) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  [data-theme] .reveal:not(.is-visible) { opacity: 1; }
  .reveal.is-visible,
  [data-theme] .hero-card, [data-theme] .page-hero-card,
  [data-theme] .hero-content > *, [data-theme] .page-hero-content > * { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }
  .main-nav {
    position: fixed; inset: 80px 0 auto 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 4px;
    max-height: calc(100vh - 80px); overflow-y: auto;
    padding: 16px var(--gutter) 28px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in), visibility var(--dur-fast);
  }
  .nav-open .main-nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform 320ms var(--ease-out), visibility 0s;
  }
  .main-nav > a, .nav-dropdown > button { width: 100%; justify-content: space-between; padding: 14px 16px; font-size: 18px; color: var(--text); }
  .main-nav > a.is-active::after, .nav-dropdown.is-active > button::after { display: none; }
  .nav-dropdown .dropdown-menu {
    position: static; width: auto; transform: none; box-shadow: none; border: 0; background: transparent;
    padding: 0 0 0 8px; display: none; opacity: 1; visibility: visible;
  }
  .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu, .nav-dropdown.is-open .dropdown-menu { transform: none; }
  .nav-dropdown.is-open .dropdown-menu { display: block; }
  .nav-dropdown:hover > button svg { transform: none; }
  .nav-dropdown.is-open > button svg { transform: rotate(180deg); }
  .main-nav > a.mobile-only { display: flex; color: var(--accent); }

  .section { padding: 80px 0; }
  .hero-card { min-height: 560px; }
  .hero-content { padding: 36px; }
  .hero-strip { grid-template-columns: 1fr; gap: 16px; }
  .hero-strip p { text-align: left; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .span-4, .span-5, .span-7, .span-8 { grid-column: span 6; }
  .cta-band { grid-template-columns: 1fr; padding: 44px; }
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer { margin-top: 80px; }
}

/* Tablet: keep the hero copy to the left so the port loading stays clear on the right */
@media (min-width: 681px) and (max-width: 960px) {
  .hero-scene .hero-content { max-width: 62%; }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; --radius: 20px; }
  body { font-size: 16px; }
  .header-inner { height: 68px; }
  .brand img { height: 42px; }
  /* Keep logo, phone number, theme switch and menu on one row */
  .header-inner { gap: 10px; }
  .header-cta { gap: 8px; }
  .header-phone { font-size: 14px; gap: 6px; white-space: nowrap; }
  .theme-toggle { width: 60px; height: 34px; padding: 0 7px; }
  .theme-toggle::before { width: 26px; height: 26px; transform: translateX(26px); }
  .theme-toggle svg { width: 14px; height: 14px; }
  .nav-toggle { width: 42px; height: 42px; }
  .main-nav { inset: 68px 0 auto 0; max-height: calc(100vh - 68px); }
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; }
  .hero { padding-top: 20px; }
  .hero-meta { gap: 16px; padding-bottom: 20px; }
  .hero-meta div:nth-child(3) { padding-top: 16px; }
  .hero-meta .hero-flags { gap: 6px 16px; }
  .hero-card, .page-hero-card, .cta-band { border-radius: 24px; }
  .hero-card { min-height: 600px; }
  .hero-card::before { background: linear-gradient(0deg, rgba(10, 14, 12, 0.95) 0%, rgba(10, 14, 12, 0.78) 55%, rgba(10, 14, 12, 0.6) 100%); }
  /* Home hero: leave a clear strip below the text so the port animation is visible */
  .hero-scene::before { background: linear-gradient(180deg, rgba(10, 14, 12, 0.8) 0%, rgba(10, 14, 12, 0.7) calc(100% - 330px), rgba(10, 14, 12, 0) calc(100% - 255px)); }
  .hero-scene .hero-content { padding-bottom: 280px; }
  /* Port: show the right half of the scene (ship, crane and quay) at full width along the bottom,
     instead of slicing to the card height, which pushed the ship off the left edge */
  .scene-port { inset: auto 0 0 auto; width: 200%; height: auto; aspect-ratio: 1600 / 700; }
  .page-hero-card::before { background: linear-gradient(0deg, rgba(10, 14, 12, 0.92) 0%, rgba(10, 14, 12, 0.6) 100%); }
  .hero-content { padding: 28px 24px; }
  .hero-lead { font-size: 17px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .stats { gap: 12px; }
  .stat-face { padding: 22px; }
  .bento { gap: 12px; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
  .card { padding: 26px; }
  .service-card, .media-card, .map-card { padding: 0; }
  .about-card { padding: 28px; }
  .service-card { min-height: 0; }
  .service-card .card-body { padding: 8px 24px 26px; }
  .media-card { min-height: 320px; }
  .check-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 32px 24px; }
  .page-hero-card { min-height: 380px; }
  .page-hero-content { padding: 28px 24px; }
  .page-hero .lead { font-size: 17px; }
  .prose p { font-size: 17px; }
  .prose .intro { font-size: 19px; }
  .sidebar { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr; }
  .info-card.wide, .map-card { grid-column: span 1; }
  .map-card { height: 320px; }
  .form-card { padding: 26px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 40px; }
}

/* Very narrow phones: drop the phone icon so the number still fits */
@media (max-width: 359px) {
  .header-phone { font-size: 13px; }
  .header-phone svg { display: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}