/* ==========================================================================
   style.css — all styling for the public website (index.html, and the base
   for 404.html / privacy.html). MSL — Middle East Shipping Line.

   HOW TO FIND THINGS
   Sections below follow the order of the homepage. Search for
   "---------- <name>" to jump to one:
     :root variables ...... brand colours, fonts, spacing (edit colours here)
     Header / Nav ......... top bar + mobile menu
     Hero ................. big photo, headline, animated route line
     Stats strip ......... the four numbers under the hero
     About (split) ........ photo + text
     Mission / Vision ..... dark section with two cards
     Services ............. four service cards
     Regional Network ..... animated route map (Sokhna hub, 5 routes)
     Process .............. "How It Works" steps, blue line + sailing ship
     Offices .............. map of northern Egypt + linked office list
     Contact .............. form + contact details
     Scroll toggle ........ round up/down button
     Floating CTA ......... gold "Request a Quote" pill
     Port Conditions ...... live weather "harbour board"
     Voyage route ......... winding route + ship in the left margin
     Footer ............... logo, copyright, email/LinkedIn icons
     Large screens ........ wider page + slightly larger text on 27"+ monitors
     Touch targets ........ bigger invisible tap areas (menu, cookie OK, email)
     Responsive ........... tablet/phone adjustments
     Motion / accessibility blocks at the end (reduced-motion, pausing
     off-screen animations, etc.)

   CONVENTIONS
   - Colours always come from the variables in :root (e.g. var(--navy)),
     so a brand colour can be changed in one place.
   - --teal-deep is the exact light blue sampled from the MSL logo; the
     client chose it deliberately (see the note next to it).
   - Animations respect "prefers-reduced-motion": visitors who turn off
     motion in their device settings get a still, fully visible page.
   - No inline styles anywhere: the server's security policy forbids them,
     so all styling lives in this file.
   - After editing, bump the ?v= number where index.html links this file.
   ========================================================================== */

:root {
  /* The site is designed in light colours only: "only" asks browsers not to
     auto-darken it (Chrome's dark mode respects this; the <meta
     name="color-scheme"> in each page says the same thing earlier). */
  color-scheme: only light;
  --navy: #0a1f33;
  --navy-deep: #071626;
  --navy-light: #123152;
  --gold: #c9a227;
  --gold-light: #e3c76b;
  --gold-deep: #8a6a15; /* darker variant for gold text on light backgrounds — meets WCAG AA contrast */
  --cream: #f7f5f0;
  --white: #ffffff;
  --text: #1c1c1c;
  --text-light: #5c6570;
  --border: #e4e1d8;
  --shadow: 0 20px 60px rgba(10, 31, 51, 0.12);
  --radius: 2px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --mint-bg: #e8f0ec;      /* pale sage/mint section background, alternates with white */
  --teal-deep: #32a0dc;    /* logo light-blue for italic accent words, used consistently on both light and dark backgrounds */

  /* Directional easing (motion-design skill: entrances decelerate, exits
     accelerate — a single symmetric curve makes appear/disappear motion
     feel mechanical). Corporate personality: understated, no overshoot. */
  --ease-entrance: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* When a link jumps to a section, stop this far below the top so the
     fixed header doesn't cover the section's heading. */
  scroll-padding-top: 84px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--navy-deep);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 12px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Darker gold by default (used on light backgrounds) for AA text contrast;
     sections on dark backgrounds override this to --gold-light below. */
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 16px;
}

/* Italic serif accent word within a headline, echoing the roman/italic
   headline mix used on high-end logistics sites. */
.accent-italic,
.accent-italic--dark {
  font-style: italic;
  font-family: 'Playfair Display', serif;
  color: var(--teal-deep);
}

/* Alternate select light sections onto a pale mint background instead of
   flat white, for visual rhythm down the page. */
.mint-alt {
  background: var(--mint-bg) !important;
}
.mint-alt .eyebrow {
  color: var(--teal-deep);
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 20px;
}

.section-lead {
  color: var(--text-light);
  font-size: 1.05rem;
  max-width: 640px;
  margin-bottom: 40px;
}
.section-lead--spaced { margin-bottom: 22px; }

section { padding: 110px 0; }
section.tight { padding: 80px 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 36px;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  /* Directional easing: settling into hover is a touch slower/gentler
     (decelerate) than leaving it (accelerate) — motion-design skill,
     "Interactive feedback" + directional easing rules. */
  transition: background 0.14s var(--ease-exit), color 0.14s var(--ease-exit),
    transform 0.14s var(--ease-exit), border-color 0.14s var(--ease-exit);
}
.btn:hover {
  transition: background 0.18s var(--ease-entrance), color 0.18s var(--ease-entrance),
    transform 0.18s var(--ease-entrance), border-color 0.18s var(--ease-entrance);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }

.btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
  background: transparent;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn-navy {
  background: var(--navy);
  color: var(--white);
}
.btn-navy:hover { background: var(--navy-light); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  padding: 26px 0;
  transition: all var(--transition);
}

.site-header.scrolled {
  background: rgba(10, 31, 51, 0.96);
  padding: 16px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  /* No backdrop-filter blur: at 96% opacity it was barely visible but
     forced a blur of the page behind the header on every scroll frame. */
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: height var(--transition);
}
.site-header.scrolled .logo img { height: 34px; }

.nav-links {
  display: flex;
  gap: 36px;
}

.nav-links a {
  color: rgba(255,255,255,0.88);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.18s var(--ease-exit);
}
.nav-links a:hover::after { width: 100%; transition: width 0.25s var(--ease-entrance); }

.nav-links a.active { color: var(--white); }
.nav-links a.active::after { width: 100%; background: var(--gold-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--white);
  display: block;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}

/* Wraps .hero-bg so GSAP can parallax-scroll this layer (translateY, tied
   to scroll position) independently of the Ken Burns zoom animation
   already running on .hero-bg itself — both animate `transform`, so they
   have to live on separate elements or they'd fight for the same
   property. Oversized (-8%/116%) so the parallax travel never reveals an
   empty edge. */
.hero-parallax {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: -8%; left: 0; right: 0;
  height: 116%;
  background: url('../images/hero-ship.jpg') 85% 40% / cover no-repeat;
  /* 85% (not centre): the photo is wider than this box, so part of each side
     is cut off — leaning right keeps the sun in view while the whole ship
     still fits (owner's choice, 7 Oct 2026). */
  background-position: 85% 40%;
  background-size: cover;
  background-repeat: no-repeat;
  animation: heroSail 78s infinite;
  will-change: transform;
}
/* Desktop/tablet image, gated the same way as the mobile swap below so the
   two are mutually exclusive — an unconditional background-image here would
   still get fetched by the browser on a phone even though the mobile rule
   overrides it for rendering, since both url()s are visible to the CSSOM
   regardless of which one wins the cascade. */
@media (min-width: 641px) {
  .hero-bg {
    background-image: image-set(url('../images/hero-ship.avif') type('image/avif'), url('../images/hero-ship.webp') type('image/webp'), url('../images/hero-ship.jpg') type('image/jpeg'));
  }
}
/* Big screens (>=1500 px wide) and sharp ones (MacBook, Windows laptops at
   150% scaling) get a 3200-wide copy: the box is taller than the screen and
   slowly zooms in, so the 1920 file would be stretched 1.3-2x there. The
   3200 copy was made from an AI-upscaled master (see DEVELOPER-GUIDE §8).
   Keep these conditions in step with the hero <link rel="preload"> tags in
   index.html, or the browser downloads two hero photos. */
@media (min-width: 1500px), (min-width: 641px) and (min-resolution: 1.5dppx) {
  .hero-bg {
    background-image: image-set(url('../images/hero-ship-large.avif') type('image/avif'), url('../images/hero-ship-large.webp') type('image/webp'), url('../images/hero-ship-large.jpg') type('image/jpeg'));
  }
}

/* The ship in the hero photo heads right, toward the viewer, so the photo
   drifts that way (right and a little down) while it zooms in slightly:
   it reads as the ship sailing forward. 26 s forward, then a slower 52 s
   drift back so the return is hardly noticeable; it ends where it starts,
   so the loop has no jump (owner's choice, 11 Oct 2026). Scale stays at
   1.10 or more so the sideways travel never shows an empty edge. */
@keyframes heroSail {
  0% { transform: scale(1.10) translate(-2.2%, -1.2%); animation-timing-function: ease-in-out; }
  33.333% { transform: scale(1.14) translate(2.2%, 1%); animation-timing-function: ease-in-out; }
  100% { transform: scale(1.10) translate(-2.2%, -1.2%); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,22,38,0.75) 0%, rgba(7,22,38,0.55) 45%, rgba(7,22,38,0.92) 100%);
}

.hero-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.4;
  pointer-events: none;
}
.hero-route-path {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.5;
  stroke-dasharray: 9 9;
  animation: routeDash 46s linear infinite;
}
.hero-route-dot {
  fill: var(--gold-light);
  offset-path: path('M -50 430 C 220 370, 360 500, 560 410 S 860 280, 1010 330 S 1260 430, 1320 380');
  animation: routeDot 12s linear infinite;
  filter: drop-shadow(0 0 4px rgba(227, 199, 107, 0.9));
}
@keyframes routeDash {
  to { stroke-dashoffset: -1200; }
}
@keyframes routeDot {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero-route-path, .hero-route-dot { animation: none; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

/* First-impression entrance: the eyebrow, headline, paragraph and buttons
   cascade in on load (motion-design skill: "lead with the hero," a
   standard-weight staggered reveal) instead of appearing instantly. */
.hero-content .eyebrow,
.hero-content h1,
.hero-content p,
.hero-content .hero-actions {
  opacity: 0;
  animation: heroReveal 0.8s var(--ease-entrance) forwards;
}
.hero-content .eyebrow { animation-delay: 0.1s; }
.hero-content h1 { animation-delay: 0.22s; }
.hero-content p { animation-delay: 0.38s; }
.hero-content .hero-actions { animation-delay: 0.54s; }

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content p,
  .hero-content .hero-actions {
    animation: none;
    opacity: 1;
  }
}

.hero-content .eyebrow { color: var(--gold-light); }

.hero-content h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  margin-bottom: 22px;
}

.hero-content p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Thin animated line near the bottom of the hero, hinting there is more
   below (the word "Scroll" was removed on the owner's request, 11 Oct 2026). */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.4);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: translateX(-50%) scaleY(0); transform-origin: top; }
  50% { transform: translateX(-50%) scaleY(1); transform-origin: top; }
  51% { transform: translateX(-50%) scaleY(1); transform-origin: bottom; }
  100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
}

/* ---------- Stats strip ---------- */
.stats {
  background: var(--navy);
  color: var(--white);
  padding: 46px 0;
}
.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.stat-label {
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ---------- About (split) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.split-img {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split-img img { height: 480px; object-fit: cover; width: 100%; }

.split-img::before {
  content: '';
  position: absolute;
  top: -18px; left: -18px;
  width: 100px; height: 100px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
  z-index: 1;
}

.about-bg { background: var(--cream); }

/* ---------- Mission / Vision cards on banner ---------- */
.banner-section {
  position: relative;
  color: var(--white);
  background: linear-gradient(180deg, rgba(7,22,38,0.88), rgba(7,22,38,0.88)), url('../images/port-aerial.jpg') center / cover fixed;
  background-image:
    linear-gradient(180deg, rgba(7,22,38,0.88), rgba(7,22,38,0.88)),
    image-set(url('../images/port-aerial.avif') type('image/avif'), url('../images/port-aerial.webp') type('image/webp'), url('../images/port-aerial.jpg') type('image/jpeg'));
  background-position: center;
  background-size: cover;
  /* Was background-attachment: fixed — that made the browser repaint this
     whole photo on every scroll step (a common cause of scroll stutter),
     and iPhones ignore it anyway. Scrolls normally now. */
}
.banner-section .section-lead { color: rgba(255,255,255,0.75); }
.banner-section .eyebrow { color: var(--gold-light); }
.banner-section .section-title { color: var(--white); }

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 30px;
}

.mv-card {
  background: rgba(7, 22, 38, 0.55);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 42px;
  border-radius: var(--radius);
  /* No backdrop-filter: blurring the photo behind these cards had to be
     recomputed on every scroll frame, for a barely-visible effect over an
     88%-dark overlay. */
}
.mv-card h3 {
  color: var(--gold-light);
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.mv-card p { color: rgba(255,255,255,0.82); }

/* ---------- Services ---------- */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 8px;
}

.activity-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  overflow: hidden;
  transition: background var(--transition);
}
.activity-card:hover { background: var(--cream); }
.activity-card-img {
  height: 200px;
  overflow: hidden;
}
.activity-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s var(--ease-exit);
}
.activity-card:hover .activity-card-img img {
  transform: scale(1.06);
  transition: transform 0.4s var(--ease-entrance);
}
.activity-card-body { padding: 28px 32px 32px; }
.activity-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 12px;
}
.activity-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}
.activity-card-list {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 6px 0 0;
  padding-left: 18px;
}
.activity-card-list li { margin-bottom: 4px; }

/* ---------- Specialist services (container ends) + port coverage ---------- */
/* Each specialist service is drawn as the end of a shipping container:
   corrugated steel (repeating gradient), two door bars with handles and a
   stencilled label; the text sits on a white panel. Owner's pick, 11 Oct
   2026 (design B for the services, design A's navy strip for the ports). */
.svc-more { margin: 40px 0 8px; }
.svc-more-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.svc-more-head h3 { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--navy); margin: 0; }
.svc-more-head span { color: var(--text-light); font-size: 0.95rem; }
.yard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.box {
  --steel: var(--navy-light);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 46px 16px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 7px, rgba(0,0,0,0.12) 7px 9px, transparent 9px 16px),
    var(--steel);
  border: 2px solid rgba(0,0,0,0.25);
  outline: 3px solid var(--steel);
  outline-offset: -9px;
  transition: transform 0.3s var(--ease-exit), box-shadow 0.3s var(--ease-exit);
}
.box--blue { --steel: #1d6f9e; }
.box--gold { --steel: var(--gold-deep); }
.box:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10, 31, 51, 0.22);
  transition: transform 0.3s var(--ease-entrance), box-shadow 0.3s var(--ease-entrance);
}
.box-code { position: absolute; top: 16px; left: 18px; font: 600 0.72rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.14em; color: rgba(255,255,255,0.9); }
.box-doors { position: absolute; inset: 40px 18px 14px auto; width: 26px; display: flex; gap: 8px; pointer-events: none; }
.box-doors i { flex: 1; border-left: 2px solid rgba(255,255,255,0.35); position: relative; }
.box-doors i::before { content: ''; position: absolute; left: -5px; top: 10px; width: 8px; height: 4px; background: rgba(255,255,255,0.35); }
.box-doors i::after { content: ''; position: absolute; left: -4px; top: 42%; width: 6px; height: 26px; border-radius: 3px; background: rgba(255,255,255,0.45); }
.box-panel { position: relative; isolation: isolate; overflow: hidden; background: var(--white); padding: 20px 22px; margin-right: 36px; flex: 1; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
/* Faded MSL arrow mark in the panel's bottom-right corner (owner's pick). */
.box-panel::before { content: ''; position: absolute; z-index: -1; right: -26px; bottom: -34px; width: 200px; height: 200px; background: url('../images/favicon-512.png') center / contain no-repeat; opacity: 0.09; pointer-events: none; }
.box-panel h4 { font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--navy); margin: 0 0 10px; }
.box-panel p { color: var(--text-light); font-size: 0.93rem; line-height: 1.6; margin: 0; }
.svc-ports { margin-top: 24px; background: var(--navy); color: var(--white); padding: 28px 32px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; border-top: 3px solid var(--gold); }
.svc-ports-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(227,199,107,0.14); color: var(--gold-light); display: grid; place-items: center; grid-row: span 2; }
.svc-ports-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-ports h4 { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--gold-light); margin: 0; }
.svc-ports p { margin: 0; color: rgba(255,255,255,0.82); font-size: 0.95rem; line-height: 1.6; }
/* "Ask about this service" (all seven service cards) */
.svc-ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--navy); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.svc-ask::after { content: '\2192'; transition: transform 0.2s; }
.svc-ask:hover::after, .svc-ask:focus-visible::after { transform: translateX(3px); }
.svc-ask:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.activity-card-body .svc-ask { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .box, .box:hover { transition: none; transform: none; }
  .svc-ask::after { transition: none; }
}
@media (max-width: 1100px) {
  .yard { grid-template-columns: 1fr 1fr; }
  .box:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .svc-more { margin-top: 26px; }
  .svc-more-head { flex-direction: column; gap: 4px; }
  .yard { grid-template-columns: 1fr; gap: 14px; }
  .box:last-child { grid-column: auto; }
  .box { padding: 40px 12px 12px; }
  .box-panel { margin-right: 30px; padding: 16px; }
  .box-panel::before { width: 160px; height: 160px; right: -20px; bottom: -28px; }
  .svc-ports { padding: 22px 20px; grid-template-columns: 1fr; }
  .svc-ports-ic { grid-row: auto; }
}

/* ---------- Regional Network: animated shipping-lane map ---------- */
.network-map {
  position: relative;
  overflow: hidden;
  /* Faint navigation-chart grid over the navy gradient (was a plain
     gradient) — chosen from three background options previewed
     2026-09-11, approved 2026-09-12. */
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, #123353 100%);
  border-radius: var(--radius);
  padding: 64px 40px 84px;
  margin-bottom: 40px;
  isolation: isolate;
}
.network-map--services { margin-top: 56px; }
.network-map::before {
  /* faint drifting star/current texture for depth */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.18), transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,0.14), transparent),
    radial-gradient(2px 2px at 55% 35%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1.5px 1.5px at 75% 60%, rgba(255,255,255,0.16), transparent),
    radial-gradient(2px 2px at 90% 25%, rgba(255,255,255,0.12), transparent);
  opacity: 0.6;
  pointer-events: none;
}
/* Large, barely-there compass-rose watermark centered behind the
   hub-and-spoke — purely decorative, so hidden from assistive tech and
   never intercepts clicks. */
.network-map-compass {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  opacity: 0.1;
  pointer-events: none;
}
.network-map-compass svg { width: 62%; max-width: 520px; height: auto; }
.network-map-head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.network-map-head .eyebrow { color: var(--gold-light); }
.network-map-head h3 { color: var(--white); }
.network-map-head p { color: rgba(255,255,255,0.72); }

.network-hub {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 480px;
}
.network-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Two versions of the route map share the same markup pattern: a wide
   horizontal fan for desktop/tablet, and a vertical fan for phones (see the
   max-width: 900px block below). Only one is shown at a time. */
.network-svg--mobile { display: none; }
.network-branch-path {
  fill: none;
  stroke: rgba(227, 199, 107, 0.35);
  stroke-width: 2;
  stroke-dasharray: 6 10;
  animation: laneDash 30s linear infinite;
}
@keyframes laneDash { to { stroke-dashoffset: -800; } }

/* Small "signal" dots travel independently along each branch, from the
   Sokhna hub out to its destination and back — one per route, since each
   route sails independently rather than as a single chained lane. Motion
   uses offset-path alone (no additional transform on the same element),
   which avoids a bounding-box collapse bug seen when offset-path was
   previously combined with a transform on the ship icon. */
.network-signal {
  fill: var(--gold-light);
  filter: drop-shadow(0 0 4px rgba(227, 199, 107, 0.8));
  offset-rotate: 0deg;
  animation: signalTravel 6s ease-in-out infinite;
}
.network-signal--1 { offset-path: path('M 70 300 C 500 300 750 60 1130 60'); animation-delay: 0s; }
.network-signal--2 { offset-path: path('M 70 300 C 500 300 750 180 1130 180'); animation-delay: 0.4s; }
.network-signal--3 { offset-path: path('M 70 300 C 500 300 750 300 1130 300'); animation-delay: 0.8s; }
.network-signal--4 { offset-path: path('M 70 300 C 500 300 750 420 1130 420'); animation-delay: 1.2s; }
.network-signal--5 { offset-path: path('M 70 300 C 500 300 750 540 1130 540'); animation-delay: 1.6s; }
/* Mobile signal dots travel the vertical-fan branch paths (see the
   .network-svg--mobile paths above); same animation, different geometry. */
.network-signal-m--1 { offset-path: path('M 500 90 C 500 250 300 250 220 340'); animation-delay: 0s; }
.network-signal-m--2 { offset-path: path('M 500 90 C 500 250 700 250 780 340'); animation-delay: 0.4s; }
.network-signal-m--3 { offset-path: path('M 500 90 C 500 400 260 480 220 580'); animation-delay: 0.8s; }
.network-signal-m--4 { offset-path: path('M 500 90 C 500 400 740 480 780 580'); animation-delay: 1.2s; }
.network-signal-m--5 { offset-path: path('M 500 90 C 500 500 500 650 500 820'); animation-delay: 1.6s; }
@keyframes signalTravel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  50% { offset-distance: 100%; }
  92% { opacity: 1; }
  100% { offset-distance: 0%; opacity: 0; }
}

.network-node {
  position: absolute;
  /* Fixed width (rather than the default shrink-to-fit auto width) —
     without this, an absolutely-positioned box with only `left` set gets
     auto-sized to whatever space remains between that point and the
     container's right edge, which shrinks a lot for the fanned-out nodes
     near left:94% on narrower desktop/laptop widths and forces their
     labels to wrap into cramped, overlapping two-line text. */
  width: 132px;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
/* Node positions on the hub-and-spoke map and staggered entrance delays —
   kept as plain CSS rules (rather than inline style attributes) so they
   still work under the site's strict Content-Security-Policy, which
   intentionally has no 'unsafe-inline' for styles. Sokhna sits as the hub
   on the left; the five destinations fan out vertically on the right, each
   reached by its own independent branch route. */
.network-node--0 { left: 5.8%;  top: 50%; animation-delay: 0s; }
.network-node--1 { left: 94.2%; top: 10%; animation-delay: 0.1s; }
.network-node--2 { left: 94.2%; top: 30%; animation-delay: 0.2s; }
.network-node--3 { left: 94.2%; top: 50%; animation-delay: 0.3s; }
.network-node--4 { left: 94.2%; top: 70%; animation-delay: 0.4s; }
.network-node--5 { left: 94.2%; top: 90%; animation-delay: 0.5s; }
.network-node-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 31, 51, 0.55);
  border: 1.5px solid rgba(227, 199, 107, 0.5);
  color: var(--gold-light);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.network-node-icon svg { width: 20px; height: 20px; }
.network-node:hover .network-node-icon {
  transform: scale(1.14);
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 0 0 6px rgba(227, 199, 107, 0.18);
}
.network-node-label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
}
.network-node--origin .network-node-icon {
  width: 58px;
  height: 58px;
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 0 rgba(227, 199, 107, 0.5);
  animation: beacon 2.6s ease-out infinite;
}
.network-node--origin .network-node-icon svg { width: 26px; height: 26px; }
.network-node--origin .network-node-label {
  color: var(--gold-light);
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
@keyframes beacon {
  0% { box-shadow: 0 0 0 0 rgba(227, 199, 107, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(227, 199, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 199, 107, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .network-branch-path, .network-signal, .network-node, .network-node--origin .network-node-icon {
    animation: none;
  }
}

@media (max-width: 900px) {
  .network-map { padding: 56px 16px 48px; }
  /* Swap to the vertical fan: hub on top, routes branching downward. Node
     positions below match the .network-svg--mobile path endpoints exactly
     (both are percentages of the same .network-hub box), so the pins stay
     seated on the ends of their branch lines at any phone width. Height
     bumped from 620 -> 760: everything here (nodes and the SVG paths
     beneath them) is positioned in percentages of this one box, so making
     the box taller just spreads the whole diagram out with more breathing
     room between rows — nothing else needs to move to match. */
  .network-svg--desktop { display: none; }
  .network-svg--mobile { display: block; }
  .network-hub { height: 760px; }
  .network-node { width: 116px; }
  .network-node--0 { left: 50%; top: 9%;  animation-delay: 0s; }
  .network-node--1 { left: 22%; top: 34%; animation-delay: 0.1s; }
  .network-node--2 { left: 78%; top: 34%; animation-delay: 0.2s; }
  .network-node--3 { left: 22%; top: 58%; animation-delay: 0.3s; }
  .network-node--4 { left: 78%; top: 58%; animation-delay: 0.4s; }
  .network-node--5 { left: 50%; top: 82%; animation-delay: 0.5s; }
}

.ebiz-banner {
  background: var(--navy);
  color: var(--white);
  padding: 28px 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-left: 4px solid var(--gold);
}
.ebiz-banner strong { color: var(--gold-light); letter-spacing: 0.05em; }

/* ---------- Process ("How It Works") ---------- */
/* Hybrid layout: customs-stamp style badges for all 4 steps, with a ship
   that stays docked (gentle bob) through steps 2→3 and only sails 3→4 —
   the animation itself lives in main.js (positionFinalLeg/buildTimeline).
   The 4-column layout is intentionally never allowed to stack vertically,
   on any device — .process-scroll scrolls sideways on narrow screens
   instead, so the ship track/animation keeps working everywhere. */
.process-section { padding: 120px 0; overflow: hidden; }

.process-scroll { position: relative; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }

/* Below the width where all 4 steps fit at once, .process-steps' own
   min-width forces this row into a horizontal scroller instead of wrapping
   (deliberately — the ship-sailing animation between steps 3-4 tracks a
   horizontal line, so the row can't stack vertically without losing that).
   Nothing here signalled "there's more to the right", so it read as broken
   rather than scrollable — a static hint line plus an edge fade fix that. */
.process-swipe-hint { display: none; }
@media (max-width: 720px) {
  .process-swipe-hint {
    display: block;
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
  }
  /* "More this way" fade on the right edge. Done with a mask on the
     scrolling box itself: a positioned overlay inside a scrolling box
     scrolls along with the content, so the old overlay drifted into the
     middle of the steps as you swiped. main.js adds .at-end once the last
     step is in view, which removes the fade. */
  .process-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .process-scroll.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: clamp(16px, 3vw, 32px);
  margin-top: 64px;
  min-width: 640px;
  position: relative;
}

.process-badge {
  width: clamp(56px, 12vw, 84px);
  height: clamp(56px, 12vw, 84px);
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px double var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--navy);
  position: relative;
  background: var(--white);
  z-index: 2;
}
.process-badge::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--navy);
  border-radius: 50%;
}
/* "Lit" state — switched on by main.js as the progress line (1→3) and then
   the ship (3→4) reach each step. Logo-blue fill (user's pick, 2026-09-25) keeps the stamp's navy rings,
   so it reads as an inked stamp rather than a solid dark dot. */
.process-badge {
  transition: background-color 0.45s var(--ease-entrance), color 0.45s var(--ease-entrance), box-shadow 0.45s var(--ease-entrance);
}
.process-badge.is-active {
  background: var(--teal-deep);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(50, 160, 220, 0.35);
}
.process-step { text-align: center; position: relative; }
.process-step h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.process-step p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; }

/* Spans from the CENTER of step 3's badge to the center of step 4's badge
   — positioned by JS (positionFinalLeg() in main.js) against the actual
   rendered badges, since fixed percentages can't account for the grid's
   gap or the clamp()-sized badges. Fallback values are approximate only. */
.final-leg-track {
  position: absolute;
  top: 40px;
  left: 62.5%;
  width: 25%;
  height: 2px;
  /* No z-index: it comes FIRST in the DOM (see index.html) and relies on
     plain paint order to sit behind the step cards. A positive z-index
     here would out-rank the cards regardless of DOM order, once the
     scroll-reveal transform on .process-step creates its own stacking
     context and traps .process-badge's z-index inside it. */
}
/* Connecting line from badge 1 to badge 3 (positioned by positionTracks()
   in main.js). Faint navy base; the logo-blue fill grows with scroll. Like the
   final leg, no z-index — it's early in the DOM so it paints behind. */
.progress-track {
  position: absolute;
  top: 40px;
  left: 12.5%;
  width: 50%;
  height: 2px;
  background: rgba(10, 31, 51, 0.15);
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--teal-deep);
}
.final-leg-path {
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 2px dashed rgba(201, 162, 39, 0.75);
}
.final-leg-ship {
  position: absolute;
  top: -13px;
  left: 0;
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 3px rgba(10,31,51,0.35));
}
.final-leg-track .wake-dot {
  position: absolute;
  top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(50, 160, 220, 0.85);
  box-shadow: 0 0 4px rgba(50, 160, 220, 0.6);
  opacity: 0;
  z-index: 3;
}

/* Paused by main.js while the section is off-screen (see "Pause decorative
   CSS loops"); animations freeze in place and resume where they were. */
.anim-offscreen,
.anim-offscreen * { animation-play-state: paused !important; }

/* ---------- Offices ---------- */
/* ---------- Offices: map of northern Egypt + linked office list ----------
   The map is an inline SVG drawn from real coordinates (simple projection:
   x = (longitude - 24.5) * 40, y = (31.9 - latitude) * 40), cropped to the
   north. Pins and list items share data-office ids; main.js "Offices map"
   highlights the same office in both on hover, focus or tap. */
.offices-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.offices-map { background: var(--navy); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.offices-map svg { width: 100%; height: auto; display: block; }
.om-sea { fill: #0e2c48; }
.om-grid line { stroke: rgba(255, 255, 255, 0.05); stroke-width: 0.5; }
.om-land { fill: #21507a; stroke: rgba(227, 199, 107, 0.35); stroke-width: 0.7; stroke-linejoin: round; }
.om-neigh { fill: #14324f; stroke: rgba(255, 255, 255, 0.08); stroke-width: 0.5; }
.om-nile { fill: none; stroke: #4fa8d8; stroke-width: 1.3; stroke-linecap: round; opacity: 0.8; }
.om-canal { fill: none; stroke: #6cc4ef; stroke-width: 1.8; stroke-dasharray: 3 2.2; animation: omFlow 2.4s linear infinite; }
@keyframes omFlow { to { stroke-dashoffset: -10.4; } }
.om-net { fill: none; stroke: var(--gold-light); stroke-width: 1; stroke-dasharray: 2.5 2.5; opacity: 0.75; }
.om-water { fill: #6f9bbd; font: italic 6.2px 'Inter', sans-serif; letter-spacing: 0.12em; }
.om-region { fill: rgba(255, 255, 255, 0.28); font: 600 6px 'Inter', sans-serif; letter-spacing: 0.25em; }
.om-canal-label { fill: #8fd3f5; font: 600 5.4px 'Inter', sans-serif; }
.om-compass path { fill: var(--gold-light); }
.om-compass text { fill: var(--gold-light); font: 700 6px 'Inter', sans-serif; }
.om-scale line { stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.8; }
.om-scale text { fill: rgba(255, 255, 255, 0.6); font: 5px 'Inter', sans-serif; }
.om-pin { cursor: pointer; outline: none; }
.om-pin:focus-visible .om-dot { stroke: #fff; stroke-width: 2; }
.om-dot { fill: var(--gold); stroke: var(--navy-deep); stroke-width: 1.4; transition: r 0.2s; }
.om-halo { fill: var(--gold); opacity: 0; transition: opacity 0.25s, r 0.25s; }
.om-pin text { fill: #fff; font: 700 7.2px 'Inter', sans-serif; paint-order: stroke; stroke: var(--navy); stroke-width: 2.6px; }
.om-pin.is-hq .om-dot { fill: var(--gold-light); stroke: #fff; }
.om-pulse { fill: none; stroke: var(--gold-light); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: omPulse 2.2s ease-out infinite; }
@keyframes omPulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.om-pin.is-active .om-halo { opacity: 0.35; r: 10; }
.om-pin.is-active .om-dot { r: 5.4; }

.office-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.office-item { display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; padding: 16px 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s var(--ease-exit), box-shadow 0.2s var(--ease-exit); }
.office-item.is-active { border-color: var(--gold); box-shadow: 0 10px 30px rgba(10, 31, 51, 0.1); transition: border-color 0.25s var(--ease-entrance), box-shadow 0.25s var(--ease-entrance); }
.office-num { grid-row: span 3; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.office-item h3 { color: var(--navy); font-size: 1.08rem; margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.office-badge { background: var(--gold); color: var(--navy-deep); font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.office-item p { color: var(--text-light); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.office-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 2px; }
.office-tel { color: var(--navy-light); font-weight: 600; font-size: 0.95rem; }
.office-dir { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-deep); font-weight: 600; font-size: 0.85rem; }
.office-dir:hover { text-decoration: underline; }
.office-dir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.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; }
@media (max-width: 1000px) { .offices-layout { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { .offices-map { padding: 8px; } .office-item { padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .om-canal, .om-pulse { animation: none; } .om-pulse { display: none; } }

/* ---------- Contact ---------- */
.contact-section { background: var(--navy-deep); color: var(--white); }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
}
.contact-section .eyebrow { color: var(--gold-light); }
.contact-section .section-title { color: var(--white); }
.contact-section .section-lead { color: rgba(255,255,255,0.7); }

.contact-info-item {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.contact-info-item:last-child { border: none; }
.contact-info-item span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.contact-info-item a, .contact-info-item p { color: rgba(255,255,255,0.85); }

.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.label-hint { text-transform: none; letter-spacing: normal; color: rgba(255,255,255,0.4); }

input, textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--transition), background var(--transition);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.4);
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.35); }

textarea { resize: vertical; min-height: 130px; }

/* honeypot field — hidden from real users, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 18px;
  font-size: 0.9rem;
  padding: 14px 16px;
  border-radius: var(--radius);
  display: none;
}
.form-status.show { display: block; }
.form-status.success { background: rgba(201, 162, 39, 0.15); border: 1px solid var(--gold); color: var(--gold-light); }
.form-status.error { background: rgba(200, 60, 60, 0.15); border: 1px solid #c85050; color: #e88; }

/* Text only screen readers hear (e.g. the success message, which is shown
   visually by the .form-sent panel instead). */
.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;
}

/* "Request sent" confirmation — takes the form's place after a successful
   send, same size, so the page doesn't jump. Animated by main.js. */
.contact-form-wrap { position: relative; }
.form-sent {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.form-sent[hidden] { display: none; }
.form-sent-art { width: 240px; height: 120px; overflow: visible; }
.form-sent-ring { fill: none; stroke: var(--gold); stroke-width: 3; }
.form-sent-tick { fill: none; stroke: var(--gold-light); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.form-sent-wave { fill: none; stroke: rgba(50, 160, 220, 0.55); stroke-width: 2; stroke-linecap: round; }
.form-sent-ship { fill: var(--teal-deep); opacity: 0; }
.form-sent-title { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--white); margin: 14px 0 4px; outline: none; }
.form-sent-sub { color: rgba(255, 255, 255, 0.7); margin: 0 0 22px; }
.form-sent-again {
  font: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-light); background: transparent;
  border: 1px solid rgba(227, 199, 107, 0.5); border-radius: var(--radius);
  padding: 10px 18px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.form-sent-again:hover { background: rgba(227, 199, 107, 0.1); border-color: var(--gold-light); }
.form-sent-again:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.field-error {
  color: #e88;
  font-size: 0.8rem;
  margin-top: 6px;
  display: none;
}

/* Marks exactly which field needs fixing, not just a message somewhere on
   the page — the border/tint moves with the invalid input itself. */
.form-group.invalid input,
.form-group.invalid textarea {
  border-color: #e88;
  background: rgba(200, 60, 60, 0.08);
}
.form-group.invalid input:focus,
.form-group.invalid textarea:focus {
  border-color: #e88;
  box-shadow: 0 0 0 3px rgba(200, 60, 60, 0.35);
}
.form-group.invalid label { color: #e88; }
.field-error.show { display: block; }

/* ---------- Scroll to top/bottom toggle ---------- */
.scroll-toggle {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s var(--ease-exit), transform 0.2s var(--ease-exit), background var(--transition), visibility 0.2s;
  z-index: 500;
  box-shadow: var(--shadow);
}
.scroll-toggle.show {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.3s var(--ease-entrance), transform 0.3s var(--ease-entrance), background var(--transition), visibility 0s;
}
.scroll-toggle:hover { background: var(--navy-light); }
.scroll-toggle svg { width: 20px; height: 20px; transition: transform var(--transition); }
.scroll-toggle.at-bottom svg { transform: rotate(180deg); }


/* ---------- Floating "Request a Quote" CTA ---------- */
.floating-cta {
  position: fixed;
  left: 28px;
  bottom: 28px;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  text-decoration: none;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s var(--ease-exit), transform 0.2s var(--ease-exit), background var(--transition), visibility 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Hidden by default (desktop shows the text label only); the breakpoint
   below swaps to icon-only so the button covers far less content on a
   narrow screen. The link's aria-label keeps "Request a Quote" as its
   accessible name either way. */
.floating-cta-icon { display: none; width: 20px; height: 20px; flex-shrink: 0; }
.floating-cta.show {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.3s var(--ease-entrance), transform 0.3s var(--ease-entrance), background var(--transition), visibility 0s;
}
.floating-cta:hover { background: var(--gold-light); transform: translateY(-2px); }
@media (max-width: 640px) {
  .floating-cta {
    left: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
  }
  .floating-cta-text { display: none; }
  .floating-cta-icon { display: block; }

  /* The hero photo is a wide landscape shot; on a tall narrow phone,
     `background-size: cover` would crop most of the width away. So phones
     get their own upright file (hero-ship-mobile, 1080x1674) that is already
     cut around the front half of the ship — shown centred, it reads as
     "a ship" rather than a wall of boxes.
     Desktop/tablet (anything above 640px wide) is untouched — none of this
     block applies there. */
  .hero { height: 82vh; min-height: 480px; }
  .hero-scroll { display: none; }
  .hero-bg {
    background-position: center center;
    background-image: image-set(url('../images/hero-ship-mobile.avif') type('image/avif'), url('../images/hero-ship-mobile.webp') type('image/webp'), url('../images/hero-ship-mobile.jpg') type('image/jpeg'));
  }
}

/* ---------- Port Conditions: harbour board (live, from /api/conditions) ----------
   A navy "bridge display" with one row per port: wind (compass + knots),
   Beaufort force with a scale bar, sky, air temperature, pressure and a
   status light. Rows become compact blocks on phones. */
.conditions-section { background: var(--white); }
.conditions-panel {
  margin-top: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.18);
}
.cond-cols {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.5fr 1.1fr 0.6fr 0.8fr 0.9fr;
  gap: 16px;
  align-items: center;
}
.cond-head {
  padding: 14px 28px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(227, 199, 107, 0.25);
}
.cond-head span:last-child { text-align: right; }
/* Reserve roughly the board's final height while it loads, so the page
   below doesn't jump down when the rows arrive (that shift also made menu
   links land short of sections further down). Heights measured per layout. */
.conditions-grid { min-height: 600px; } /* 6 ports x row height */
@media (max-width: 1000px) { .conditions-grid { min-height: 1128px; } }
@media (max-width: 640px) { .conditions-grid { min-height: 1334px; } }
.conditions-msg { margin: 0; padding: 44px 28px; text-align: center; color: rgba(255, 255, 255, 0.7); }
/* Placeholder rows shown until live data arrives (replaced by main.js).
   Each <i> is a grey bar with a soft light sweeping across it. */
.cond-skel { min-height: 100px; } /* = real row heights, measured */
.cond-skel i { display: block; height: 12px; width: 60%; border-radius: 3px; background: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; }
.cond-skel i.w70 { width: 70%; height: 16px; }
.cond-skel i.big { height: 22px; }
.cond-skel i.w45 { width: 45%; }
.cond-skel i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-100%);
  animation: condShimmer 1.4s ease-in-out infinite;
}
@keyframes condShimmer { to { transform: translateX(100%); } }
@media (max-width: 1000px) { .cond-skel { min-height: 188px; } }
@media (max-width: 640px) { .cond-skel { min-height: 224px; } }
@media (prefers-reduced-motion: reduce) { .cond-skel i::after { animation: none; } }
.cond-row {
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background-color 0.25s var(--ease-exit);
}
.cond-row:last-child { border-bottom: 0; }
.cond-row:hover { background: rgba(255, 255, 255, 0.035); transition-timing-function: var(--ease-entrance); }
.cond-port { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--white); margin: 0; }
.cond-wind { display: flex; align-items: center; gap: 12px; }
.cond-compass { width: 46px; height: 46px; flex: none; }
.cond-kn { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cond-kn small { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); margin-left: 3px; }
.cond-dir { display: block; margin-top: 4px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.cond-force b { font-size: 0.95rem; font-weight: 600; }
.cond-force span { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.bft { display: flex; gap: 3px; margin-top: 8px; max-width: 150px; }
.bft i { flex: 1; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.bft i.on { background: var(--teal-deep); }
.bft i.on.warn { background: var(--gold); }
.bft i.on.alert { background: #e0655f; }
.cond-sky { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.cond-sky svg { width: 26px; height: 26px; flex: none; color: var(--gold-light); }
.cond-val { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cond-sub { display: block; margin-top: 3px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }
.cond-sub--low { color: #f3c66b; }
.cond-val small { font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.cond-status { justify-self: end; }
.port-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.port-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 8px currentColor; }
.port-status--good { color: #6fdc9c; background: rgba(63, 207, 127, 0.12); }
.port-status--moderate { color: #f3c66b; background: rgba(243, 198, 107, 0.12); }
.port-status--rough { color: #ff8f86; background: rgba(224, 101, 95, 0.14); }
.cond-label { display: none; }
.conditions-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  margin: 0; padding: 13px 28px;
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.65);
  background: var(--navy-deep);
  border-top: 1px solid rgba(227, 199, 107, 0.2);
}
.conditions-foot a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1000px) {
  .cond-head { display: none; }
  .cond-row.cond-cols {
    grid-template-columns: 1fr 1.3fr 1.3fr auto;
    grid-template-areas:
      "port wind force status"
      "port sky air press";
    gap: 12px 16px;
    padding: 20px 24px;
  }
  .cond-row .cond-port { grid-area: port; align-self: center; }
  .cond-row .cond-status { grid-area: status; }
  .cond-row .cond-wind { grid-area: wind; }
  .cond-row .cond-force { grid-area: force; }
  .cond-row .cond-sky { grid-area: sky; }
  .cond-row .cond-air { grid-area: air; }
  .cond-row .cond-press { grid-area: press; justify-self: end; text-align: right; }
  .cond-label { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin-top: 3px; }
}
@media (max-width: 640px) {
  .cond-row .cond-press { justify-self: start; text-align: left; }
  .cond-row.cond-cols {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "port port status"
      "wind wind force"
      "sky air press";
    gap: 14px 12px;
    padding: 20px 22px;
  }
  .cond-row .cond-port { grid-area: port; }
  .cond-row .cond-status { grid-area: status; }
  .cond-row .cond-wind { grid-area: wind; }
  .cond-row .cond-force { grid-area: force; }
  .cond-row .cond-sky { grid-area: sky; }
  .cond-row .cond-air { grid-area: air; }
  .cond-row .cond-press { grid-area: press; }
  .cond-label { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin-top: 3px; }
}
@media (max-width: 480px) {
  .cond-row.cond-cols { padding: 18px 18px; gap: 12px 10px; }
  .cond-compass { width: 38px; height: 38px; }
  .cond-wind { gap: 8px; }
  .cond-kn { font-size: 1.3rem; }
  .cond-force b { font-size: 0.85rem; }
  .cond-force span, .cond-dir { font-size: 0.72rem; }
  .cond-sky { font-size: 0.85rem; gap: 6px; }
  .cond-sky svg { width: 22px; height: 22px; }
  .cond-val { font-size: 0.92rem; }
}

/* ---------- Voyage route: the page as a voyage (built by main.js) ----------
   A winding dashed route runs down the left margin beside the page, with a
   port-of-call circle beside each section heading. A small ship sails along
   it as the visitor scrolls, leaving a blue trail behind; ports light up as
   it reaches them. Only on screens wide enough to have a free margin. */
.voyage { display: none; }
@media (min-width: 1320px) {
  .voyage { display: block; position: absolute; top: 0; left: 0; z-index: 5; overflow: visible; pointer-events: none; }
}
.voyage-route { fill: none; stroke: rgba(201, 162, 39, 0.6); stroke-width: 2; stroke-dasharray: 5 7; }
.voyage-trail { fill: none; stroke: var(--teal-deep); stroke-width: 2.5; stroke-linecap: round; }
.voyage-port { pointer-events: auto; cursor: pointer; }
.voyage-port circle { fill: var(--white); stroke: #b7c6bf; stroke-width: 2; transition: fill 0.4s, stroke 0.4s; }
.voyage-port.is-reached circle { fill: var(--teal-deep); stroke: var(--navy); }
.voyage-port:focus { outline: none; }
.voyage-port:focus-visible circle { stroke: var(--teal-deep); stroke-width: 3; }
.voyage-port text {
  font: 600 11px Inter, Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--white);
  opacity: 0;
  transition: opacity 0.2s;
}
.voyage-port rect { fill: var(--navy); opacity: 0; transition: opacity 0.2s; }
.voyage-port:hover text, .voyage-port:hover rect,
.voyage-port:focus-visible text, .voyage-port:focus-visible rect { opacity: 1; }
.voyage-ship path, .voyage-ship rect { transition: fill 0.3s; }
.voyage-ship .hull { fill: var(--navy); }
.voyage-ship.on-dark .hull { fill: var(--white); }
.voyage-ship { filter: drop-shadow(0 2px 3px rgba(10, 31, 51, 0.35)); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.55);
  /* Extra bottom room so the fixed scroll-to-top button (bottom-right) never
     sits beside or over the footer's email/LinkedIn icons. */
  padding: 40px 0 96px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
}
.footer-inner a { color: var(--gold-light); }
/* Privacy Policy + email + phone (the Privacy page was only linked from the
   cookie notice, which disappears after "OK"). */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-inner .footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; padding: 8px 0; }
.footer-inner .footer-links a:hover,
.footer-inner .footer-links a:focus-visible { color: var(--gold-light); text-decoration: underline; }
/* Computers/tablets: logo | copyright with the links under it | icons, so
   the icons stay on the same row (one flex row had no room for all four). */
@media (min-width: 901px) {
  .footer-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo copy social" "logo links social";
    column-gap: 48px;
    row-gap: 2px;
  }
  .footer-inner .footer-logo { grid-area: logo; }
  .footer-inner > span { grid-area: copy; align-self: end; }
  .footer-inner .footer-links { grid-area: links; align-self: start; }
  .footer-inner .footer-social { grid-area: social; }
}
.footer-logo { display: block; line-height: 0; }
.footer-logo img { height: 46px; width: auto; }

/* Email + LinkedIn as icon buttons. Gold ring on the navy footer keeps them
   clearly visible; on hover they fill gold with navy icons. */
.footer-social {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-light);
  color: var(--gold-light);
  background: rgba(255,255,255,0.06);
  transition: background-color 0.25s var(--ease-exit), color 0.25s var(--ease-exit), transform 0.25s var(--ease-exit);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--gold-light);
  color: var(--navy-deep);
  transform: translateY(-2px);
  transition-timing-function: var(--ease-entrance);
}
.footer-social a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.footer-social svg { width: 24px; height: 24px; }
/* A touch smaller on phones so they don't dominate the stacked footer,
   while staying above the 44px minimum comfortable tap size. */
@media (max-width: 640px) {
  .footer-social a { width: 46px; height: 46px; }
  .footer-social svg { width: 22px; height: 22px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .activity-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .split, .contact-grid, .mv-grid { grid-template-columns: 1fr; gap: 36px; }
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  /* Stacked: no row gap, each field's own margin-bottom spaces it (a gap
     here doubled the space between Company and Phone). */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .activity-grid { grid-template-columns: 1fr; }
  section { padding: 70px 0; }
  .split-img img { height: 320px; }
  .scroll-toggle { right: 18px; bottom: 18px; width: 42px; height: 42px; }
}

@media (max-width: 900px) {
  /* Always laid out (not display:none) so it can be animated — hidden via
     opacity/transform instead, matching the pattern already used by
     .scroll-toggle/.floating-cta elsewhere on the site. */
  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--navy-deep);
    flex-direction: column;
    padding: 20px 32px;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease-exit), transform 0.2s var(--ease-exit), visibility 0.2s;
    pointer-events: none;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s var(--ease-entrance), transform 0.3s var(--ease-entrance), visibility 0s;
    pointer-events: auto;
  }
  /* Micro-cascade stagger on the link items themselves (motion-design
     skill: 20-40ms delay, <200ms total budget for a list of this size). */
  .nav-links a {
    transition: opacity 0.25s var(--ease-exit), transform 0.25s var(--ease-exit);
    opacity: 0;
    transform: translateY(-6px);
  }
  .nav-links.open a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s var(--ease-entrance), transform 0.3s var(--ease-entrance);
  }
  .nav-links.open a:nth-child(1) { transition-delay: 0.02s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.05s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.08s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.11s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.14s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.17s; }

  @media (prefers-reduced-motion: reduce) {
    .nav-links, .nav-links a, .nav-links.open, .nav-links.open a {
      transition: none;
    }
  }
}

/* ============================================
   Hover polish — extra micro-interactions on
   the stat bar, mission/vision cards, service
   cards. All transform/opacity
   only, so they don't fight the GSAP scroll
   reveals; all disabled under reduced-motion.
   ============================================ */
.stats .container > div {
  transition: transform 0.25s var(--ease-exit);
}
.stats .container > div:hover {
  transform: translateY(-4px);
  transition: transform 0.3s var(--ease-entrance);
}
.stats .container > div:hover .stat-num {
  color: var(--gold);
  transition: color 0.3s var(--ease-entrance);
}

.mv-card {
  transition: background 0.25s var(--ease-exit), border-color 0.25s var(--ease-exit), transform 0.25s var(--ease-exit);
}
.mv-card:hover {
  background: rgba(18, 49, 82, 0.6);
  border-color: rgba(227, 199, 107, 0.5);
  transform: translateY(-4px);
  transition: background 0.3s var(--ease-entrance), border-color 0.3s var(--ease-entrance), transform 0.3s var(--ease-entrance);
}

.activity-card {
  transition: background var(--transition), transform 0.25s var(--ease-exit), box-shadow 0.25s var(--ease-exit);
}
.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(10, 31, 51, 0.12);
  transition: background 0.3s var(--ease-entrance), transform 0.3s var(--ease-entrance), box-shadow 0.3s var(--ease-entrance);
}
.activity-card h3 { transition: color 0.25s var(--ease-exit); }
.activity-card:hover h3 { color: var(--teal-deep); transition: color 0.3s var(--ease-entrance); }

@media (prefers-reduced-motion: reduce) {
  .stats .container > div,
  .stats .container > div:hover,
  .mv-card, .mv-card:hover,
  .activity-card, .activity-card:hover, .activity-card h3, .activity-card:hover h3 {
    transform: none;
    transition: none;
  }
}

/* ============================================
   Cookie / privacy notice — deliberately small:
   a slim single-line bar, dismissed for good on
   "OK". Sits above the floating CTA.
   ============================================ */
.cookie-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1400;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(7, 22, 38, 0.35);
  font-size: 0.82rem;
  line-height: 1.4;
  animation: cookieRise 0.35s var(--ease-entrance);
}
/* `display: flex` above otherwise outranks the browser's built-in `[hidden]`
   rule, so setting el.hidden = true (what the OK button does) had no visible
   effect — the banner never actually went away. */
.cookie-notice[hidden] { display: none; }
@keyframes cookieRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-notice p { margin: 0; flex: 1; }
.cookie-notice a {
  color: var(--gold-light);
  text-decoration: underline;
  white-space: nowrap;
}
.cookie-notice button {
  flex-shrink: 0;
  font: 600 0.78rem/1 'Inter', sans-serif;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--gold);
  color: var(--navy-deep);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cookie-notice button:hover { background: var(--gold-light); }

@media (max-width: 480px) {
  .cookie-notice { font-size: 0.78rem; padding: 10px 12px; gap: 10px; }
  .cookie-notice button { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-notice { animation: none; }
}

/* ---------- Large screens ----------
   27" and bigger monitors (1440p/4K at 100%): the page used to stay a
   1180px column with 16px text in the middle of a very wide screen. All
   font sizes are in rem, so raising the root size scales text, buttons and
   spacing together; the content column also gets wider. Widths below are in
   rem so they grow with the text. Phones, tablets and normal laptops
   (under 1700px wide) are unchanged. */
@media (min-width: 1700px) {
  html { font-size: 17px; }
  .container { max-width: 1360px; }
  .hero-content { max-width: 46rem; }
  .hero-content p { max-width: 34rem; }
  .section-lead { max-width: 40rem; }
}
@media (min-width: 2200px) {
  html { font-size: 18.5px; }
  .container { max-width: 1560px; }
}

/* ---------- Touch targets ----------
   Bigger tap areas without changing how anything looks: an invisible
   ::after extends each control to at least ~44px (the comfortable finger
   size). Same technique as the office phone/directions links in mobile.css. */
.nav-toggle { position: relative; }
.nav-toggle::after { content: ''; position: absolute; inset: -8px -3px; }   /* 38×28 → 44×44 */
#cookieOk { position: relative; }
#cookieOk::after { content: ''; position: absolute; inset: -8px -2px; }     /* ~46×28 → 50×44 */
/* Contact email + office phone/directions links: mobile.css already does
   this up to 640px wide; this covers tablets and touch laptops. */
@media (min-width: 641px) {
  .contact-info-item a, .office-links a { position: relative; }
  .contact-info-item a::after { content: ''; position: absolute; inset: -12px 0; }  /* 20 → 44 tall */
  .office-links a::after { content: ''; position: absolute; inset: -12px -4px; }
}
/* Very small phones (≤360px, e.g. Galaxy Fold folded, iPhone SE 1st gen):
   the cookie notice takes less of the screen until OK is tapped. */
@media (max-width: 360px) {
  .cookie-notice { gap: 10px; padding: 8px 10px; font-size: 0.74rem; left: 8px; right: 8px; }
}