/* ==========================================================================
   Sunbury Trading Company Ltd — Design System
   Palette: navy (primary/trust) + teal (secondary/maritime) + sand-gold (accent/CTA)
   Type: semi-bold sans for headings, readable sans for body
   ========================================================================== */

:root {
  /* Color: primary (navy) */
  --color-navy-900: #0a1e33;
  --color-navy-800: #0e2a47;
  --color-navy-700: #14395e;
  --color-navy-600: #1c4a78;

  /* Color: secondary (teal / sea-green) */
  --color-teal-700: #0d5c56;
  --color-teal-600: #117a71;
  --color-teal-500: #16948a;
  --color-teal-100: #e3f3f1;

  /* Color: accent (warm gold / sand) */
  --color-gold-600: #b9862f;
  --color-gold-500: #d1a03f;
  --color-gold-400: #e0b654;
  --color-gold-100: #faf1dd;

  /* Neutrals */
  --color-white: #ffffff;
  --color-grey-50: #f6f8f9;
  --color-grey-100: #eef1f3;
  --color-grey-200: #dde3e7;
  --color-grey-400: #94a3ad;
  --color-grey-600: #5b6b74;
  --color-grey-800: #2a353c;
  --color-grey-900: #172024;

  /* Semantic tokens */
  --bg-page: var(--color-white);
  --bg-alt: var(--color-grey-50);
  --bg-navy: var(--color-navy-900);
  --text-body: var(--color-grey-800);
  --text-muted: var(--color-grey-600);
  --text-on-navy: #eef3f6;
  --text-on-navy-muted: #a9bccb;
  --border-subtle: var(--color-grey-200);

  --color-cta: var(--color-gold-500);
  --color-cta-hover: var(--color-gold-600);
  --color-cta-text: var(--color-navy-900);

  --color-link: var(--color-teal-600);
  --color-focus: var(--color-teal-500);

  /* Type */
  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(10, 30, 51, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 30, 51, 0.12);
  --shadow-lg: 0 16px 40px rgba(10, 30, 51, 0.18);

  --max-width: 1180px;
  --header-height: 76px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

figure {
  margin: 0;
}

a {
  color: var(--color-link);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem); }

p {
  margin: 0 0 var(--space-4);
  color: var(--text-body);
}

ul, ol {
  padding-left: 1.25rem;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  padding: var(--space-8) 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section--navy {
  background: var(--bg-navy);
  color: var(--text-on-navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--text-on-navy);
}

.section--navy p {
  color: var(--text-on-navy-muted);
}

.section-head {
  max-width: 700px;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  margin-bottom: var(--space-3);
}

.section--navy .eyebrow {
  color: var(--color-gold-400);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-cta);
  color: var(--color-cta-text);
  border-color: var(--color-cta);
}

.btn-primary:hover {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: var(--color-cta-text);
}

.btn-outline {
  background: transparent;
  color: var(--text-on-navy);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline:hover {
  border-color: var(--color-gold-400);
  color: var(--color-gold-400);
}

.btn-outline-navy {
  background: transparent;
  color: var(--color-navy-900);
  border-color: var(--color-navy-700);
}

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

.btn-block {
  width: 100%;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-whatsapp {
  background: #25d366;
  color: #06301c;
  border-color: #25d366;
}

.btn-whatsapp:hover {
  background: #1ebc59;
  border-color: #1ebc59;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header .container {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  transition: height 300ms ease;
}

/* Homepage only: header overlays the hero transparently, then solidifies on scroll. */
.has-hero .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.has-hero .site-header .wordmark,
.has-hero .site-header .main-nav a,
.has-hero .site-header .header-contact,
.has-hero .site-header .header-contact a {
  color: var(--color-white);
  transition: color 300ms ease;
}

.has-hero .site-header .main-nav a:hover,
.has-hero .site-header .main-nav a[aria-current="page"] {
  color: var(--color-white);
  border-bottom-color: var(--color-gold-400);
}

.has-hero .site-header .nav-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

.has-hero .site-header.is-scrolled {
  background: var(--color-white);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.has-hero .site-header.is-scrolled .container {
  height: calc(var(--header-height) * 0.87);
}

.has-hero .site-header.is-scrolled .wordmark,
.has-hero .site-header.is-scrolled .main-nav a,
.has-hero .site-header.is-scrolled .header-contact,
.has-hero .site-header.is-scrolled .header-contact a {
  color: var(--color-navy-800);
}

.has-hero .site-header.is-scrolled .wordmark {
  color: var(--color-navy-900);
}

.has-hero .site-header.is-scrolled .main-nav a:hover,
.has-hero .site-header.is-scrolled .main-nav a[aria-current="page"] {
  color: var(--color-navy-900);
  border-bottom-color: var(--color-gold-500);
}

.has-hero .site-header.is-scrolled .nav-toggle {
  background: var(--color-white);
  border-color: var(--border-subtle);
  color: inherit;
}

@media (max-width: 899px) {
  /* Mobile hero shows the static fallback image, not video — keep header readable over it either way. */
  .has-hero .site-header .main-nav {
    background: var(--color-white);
  }
  .has-hero .site-header .main-nav a {
    color: var(--color-navy-800);
  }
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--color-navy-900);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
}

.wordmark-logo {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.has-hero .site-header .wordmark-logo {
  height: 40px;
}

/* Mobile (nav collapses to the hamburger below 900px): "Sunbury Trading
   Company" at the desktop 1.3rem size ran well past the right edge of
   every common phone width, pushing the nav-toggle button off-screen
   entirely — the menu became unreachable, not just visually cramped.
   Scaled down in three steps rather than one compromise size, since a
   328px-wide iPhone SE and a 480px landscape phone have very different
   amounts of room to work with. Verified zero horizontal overflow at
   320-899px. Placed after every rule above it overrides — same
   specificity throughout, so source order decides the winner. */
@media (max-width: 479px) {
  .wordmark {
    font-size: 0.78rem;
    gap: var(--space-2);
  }
  .wordmark-logo {
    height: 34px;
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .wordmark {
    font-size: 0.92rem;
    gap: var(--space-2);
  }
  .wordmark-logo {
    height: 38px;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .wordmark {
    font-size: 1.1rem;
  }
}

/* Footer/dark-background placement: the logo's own navy tones lose contrast
   directly on the navy footer, so it sits on a small light badge instead. */
.footer-logo-badge {
  display: inline-flex;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.footer-logo-badge img {
  height: 48px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--color-navy-800);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--color-gold-500);
  color: var(--color-navy-900);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-contact {
  display: none;
}

/* 960px, not 900px where the nav itself switches to inline: right at 900px
   there's only room for the wordmark + full nav, not the phone/email too
   without either overflowing or shrinking this into illegibly small text.
   Phone and email are always in the footer regardless, plus the WhatsApp
   button and "Send an RFQ" CTA are both already persistent — this block
   is a convenience, not the only way to reach either. */
@media (min-width: 960px) {
  .header-contact {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    text-align: right;
    margin-right: var(--space-2);
  }
  .header-contact a {
    color: var(--color-navy-800);
    text-decoration: none;
    font-weight: 600;
  }
}

/* "Sunbury Trading Company" plus the full nav plus header-contact block
   is tight in this range specifically — full desktop width (1280px+) has
   room to spare, and below 900px the nav collapses to a hamburger, so the
   wordmark has the row to itself either way. Scale the wordmark down and
   tighten nav/contact spacing only where the squeeze actually happens,
   rather than compromising the roomier layout everywhere else. Placed
   after every rule it overrides — same specificity throughout, so source
   order is what decides the winner. */
@media (min-width: 900px) and (max-width: 1279px) {
  .site-header .container {
    padding: 0 var(--space-4);
  }
  .wordmark {
    font-size: 1.05rem;
  }
  .main-nav {
    gap: var(--space-3);
  }
  .main-nav ul {
    gap: var(--space-3);
  }
  .main-nav .btn {
    padding: 0.7rem 1.1rem;
    font-size: 0.88rem;
  }
  .header-contact {
    font-size: 0.68rem;
    margin-right: 0;
  }
  .header-actions {
    gap: var(--space-2);
  }
}

/* The very tightest end of that same range — 900px is exactly where the
   nav switches from a hamburger to fully inline, so this is the single
   worst-case width. A couple of extra points of margin close the last
   few pixels of overflow without needing another font-size cut. */
@media (min-width: 900px) and (max-width: 980px) {
  .header-contact {
    font-size: 0.62rem;
  }
  .main-nav ul {
    gap: var(--space-2);
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 899px) {
  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6) var(--space-5);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateX(0);
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .main-nav ul li {
    border-bottom: 1px solid var(--border-subtle);
  }
  .main-nav a {
    display: block;
    padding: var(--space-4) 0;
  }
  .main-nav .btn {
    margin-top: var(--space-5);
  }
}

/* ---------- Hero (full-bleed ambient background: video where safe, static image otherwise) ---------- */
.hero {
  background: var(--color-navy-900);
  color: var(--text-on-navy);
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-9);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-bg video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-bg video.is-playing {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 38, 0.62) 0%, rgba(10, 22, 38, 0.55) 35%, rgba(9, 18, 31, 0.82) 100%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

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

.hero-content h1 {
  color: var(--color-white);
  font-weight: 800;
  /* Belt-and-braces on top of the overlay above: a tight dark edge plus a
     soft wider glow keeps the heading readable regardless of what's behind
     it in the photo/video at any given moment. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.65);
}

.hero-content p {
  color: var(--text-on-navy-muted);
  font-size: 1.08rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero-credit {
  position: absolute;
  z-index: 2;
  right: var(--space-5);
  bottom: var(--space-4);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
}

.hero-credit a {
  color: inherit;
  text-decoration: none;
}

.hero-credit a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Placeholder image block ---------- */
.placeholder-img {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-grey-100);
  border: 1px dashed var(--color-grey-400);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  aspect-ratio: var(--ph-ratio, 4 / 3);
  width: 100%;
}

.placeholder-img span {
  max-width: 24ch;
}

/* ---------- Real photography (stock-illustrative or client-supplied) ---------- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  background: var(--color-grey-100);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Graceful state while an image path doesn't resolve to a real file yet
   (see _servicesImageNote in site-content.json) — a clean "pending" label
   instead of a broken-image glyph. Not shown once the real photo lands. */
.photo-frame-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--color-grey-100);
}

.photo-frame.is-broken img {
  display: none;
}

.photo-frame.is-broken .photo-frame-fallback {
  display: flex;
}

.photo-caption {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.photo-caption .credit {
  display: block;
  opacity: 0.8;
}

.photo-caption a {
  color: inherit;
}

.photo-frame img {
  transition: transform 400ms ease-out;
}

.photo-frame:hover img {
  transform: scale(1.05);
}

/* ---------- Trust stats bar ---------- */
.stats-bar {
  background: var(--color-teal-700);
  color: var(--color-white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
  padding: var(--space-6) 0;
}

@media (min-width: 760px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  font-weight: 700;
  color: var(--color-gold-400);
}

.stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Card grid ---------- */
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-teal-100);
  color: var(--color-teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.card-icon svg {
  width: 24px;
  height: 24px;
  transition: transform 200ms ease-out;
}

.card:hover .card-icon svg {
  transform: scale(1.08);
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  flex-grow: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-teal-600);
}

.card-link:hover {
  color: var(--color-navy-900);
}

/* ---------- Leadership avatar (abstract placeholder — never a real face) ---------- */
.avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy-800), var(--color-teal-700));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.avatar-circle svg {
  width: 32px;
  height: 32px;
}

.card .card-role {
  color: var(--color-teal-700);
  font-weight: 700;
  font-size: 0.85rem;
  flex-grow: 0;
  margin-bottom: var(--space-2);
}

/* ---------- History timeline ---------- */
.timeline {
  position: relative;
  margin-top: var(--space-6);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-teal-100);
  color: var(--color-teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.timeline-icon svg {
  width: 22px;
  height: 22px;
}

.timeline-content {
  padding-top: 0.35rem;
}

.timeline-year {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold-600);
  margin-bottom: var(--space-1);
}

.timeline-content h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
}

.timeline-content p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}

@media (min-width: 860px) {
  .timeline {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
  }

  .timeline::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 22px;
    height: 2px;
    background: var(--border-subtle);
    z-index: 0;
  }

  .timeline-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
  }

  .timeline-item::before {
    display: none;
  }

  .timeline-content {
    padding-top: var(--space-3);
  }
}

/* ---------- Ports teaser / list ---------- */
.port-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.port-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-navy-800);
}

.port-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-500);
}

.port-card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .port-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .port-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Testimonial ---------- */
.testimonial {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-badge {
  display: inline-block;
  background: var(--color-gold-100);
  color: var(--color-gold-600);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}

.testimonial blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.5vw + 1rem, 1.6rem);
  color: var(--color-navy-900);
  margin: 0 0 var(--space-4);
  font-style: italic;
}

.testimonial cite {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--color-navy-900), var(--color-teal-700));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}

.cta-band h2 {
  color: var(--color-white);
}

.cta-band p {
  color: var(--text-on-navy-muted);
  max-width: 55ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band .hero-actions {
  justify-content: center;
}

/* ---------- Why choose us ---------- */
.why-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border-left: 4px solid var(--color-gold-500);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.why-item-number {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-gold-500);
  font-weight: 700;
  flex-shrink: 0;
}

.why-item h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-1);
}

.why-item p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------- Service detail sections ---------- */
.service-detail {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.service-detail:last-child {
  border-bottom: none;
}

@media (min-width: 860px) {
  .service-detail {
    grid-template-columns: 1fr 1fr;
  }
  .service-detail.reverse .service-detail-media {
    order: 2;
  }
}

.service-detail-body .service-index {
  font-family: var(--font-heading);
  color: var(--color-gold-500);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid .field--full {
    grid-column: 1 / -1;
  }
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-navy-800);
  margin-bottom: var(--space-2);
}

.field .optional {
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
  color: var(--text-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input[type="file"] {
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-7);
}

.form-fieldset legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-navy-900);
  margin-bottom: var(--space-4);
  padding: 0;
}

.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.field-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--color-teal-600);
}

.field-checkbox label {
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text-body);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 3px rgba(22, 148, 138, 0.15);
  outline: none;
}

.field input:invalid[data-touched="true"],
.field textarea:invalid[data-touched="true"] {
  border-color: #c0392b;
}

.field-error {
  visibility: hidden;
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: var(--space-1);
  min-height: 1.2em;
}

.field.has-error .field-error {
  visibility: visible;
}

.field.has-error input,
.field.has-error textarea {
  border-color: #c0392b;
}

.form-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.form-success {
  display: none;
  background: var(--color-teal-100);
  border: 1px solid var(--color-teal-500);
  color: var(--color-teal-700);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  margin-top: var(--space-5);
  font-weight: 600;
}

.form-success.is-visible {
  display: block;
}

.form-error-banner {
  display: none;
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #942a20;
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  margin-top: var(--space-5);
  font-weight: 600;
}

.form-error-banner.is-visible {
  display: block;
}

.form-error-banner ul {
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
  font-weight: 400;
}

/* Honeypot: off-screen (not display:none/visibility:hidden, which some
   scripted clients skip filling), unreachable by keyboard, and hidden from
   assistive tech — a real visitor never knows it exists. See contact.html
   and initQuoteForm() in js/main.js. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Contact info blocks ---------- */
.contact-info-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-7);
}

@media (min-width: 700px) {
  .contact-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-info-card {
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}

.contact-info-card h3 {
  font-size: 1rem;
}

.contact-info-card a,
.contact-info-card address {
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-900);
  color: var(--text-on-navy-muted);
  padding: var(--space-8) 0 var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.footer-grid h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* The global `p { color: var(--text-body) }` rule (a dark, near-black
   grey meant for light backgrounds) otherwise wins over this element's
   inherited --text-on-navy-muted, since an explicit rule on the element
   itself always beats an inherited value — regardless of which selector
   is more specific. Without this, the footer blurb paragraph renders
   almost invisibly dark on the navy background. */
.footer-grid p {
  color: var(--text-on-navy-muted);
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-grid a {
  color: var(--text-on-navy-muted);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-grid a:hover {
  color: var(--color-gold-400);
}

.footer-wordmark {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: var(--space-3);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: 0.82rem;
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #25d366;
  color: #06301c;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  transition: transform 0.15s ease;
}

/* Ambient idle pulse — deliberately the one persistent idle animation on the site (see motion brief). */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: wa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.02);
  color: #06301c;
}

.whatsapp-float svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.whatsapp-float .wa-text {
  display: none;
}

@media (min-width: 640px) {
  .whatsapp-float .wa-text {
    display: inline;
  }
}

/* ---------- Tide-line section divider (signature motion element) ---------- */
.tide-line {
  position: relative;
  height: 56px;
  overflow: hidden;
  line-height: 0;
}

.tide-line--dark {
  background: var(--color-navy-900);
}

.tide-line--light {
  background: var(--bg-page);
}

.tide-line-svg {
  display: block;
  width: 200%;
  height: 100%;
  animation: tide-drift 28s linear infinite;
  will-change: transform;
}

.tide-line--dark .tide-line-svg {
  color: var(--color-teal-500);
  opacity: 0.45;
}

.tide-line--light .tide-line-svg {
  color: var(--color-teal-600);
  opacity: 0.3;
}

@keyframes tide-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Scroll-reveal system ----------
   Base state (no JS, or prefers-reduced-motion): content is fully visible —
   motion is a progressive enhancement layered on top, never a prerequisite
   for reading the page. js/motion.js adds .js-motion to <html> only when
   IntersectionObserver is supported and the user hasn't asked for reduced
   motion; only then do [data-reveal] elements start hidden and animate in
   once observed crossing into the viewport. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Service category items (Products & Services page) ---------- */
/* A 2-column CSS grid here would pair items row-by-row (item 1 with item 2,
   item 3 with item 4, ...) and stretch both cells in a row to match the
   taller one — so any time the two paired items have different line
   counts, the shorter one leaves a visible gap before the next row. A
   multi-column layout flows items down column 1 first, then column 2,
   with each column's height independent of the other — no row-pairing,
   no uneven gaps. */
.service-items {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}

@media (min-width: 640px) {
  .service-items {
    column-count: 2;
    column-gap: var(--space-5);
  }
}

.service-items li {
  position: relative;
  padding-left: var(--space-4);
  padding-bottom: var(--space-2);
  font-size: 0.92rem;
  color: var(--text-muted);
  break-inside: avoid;
}

.service-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold-500);
}

/* ---------- Pending / not-yet-confirmed badge ---------- */
.pending-badge {
  display: inline-block;
  background: var(--color-gold-100);
  color: var(--color-gold-600);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ---------- Credentials table ---------- */
.credentials-table {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.credentials-row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 600px) {
  .credentials-row {
    grid-template-columns: 240px 1fr;
  }
}

.credentials-row:last-child {
  border-bottom: none;
}

.credentials-row dt {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-alt);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-navy-800);
}

.credentials-row dd {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--text-body);
}

/* ---------- FAQ accordion ---------- */
.accordion {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--border-subtle);
}

.accordion-item {
  border-bottom: 1px solid var(--border-subtle);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy-900);
  cursor: pointer;
}

.accordion-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-teal-600);
  transition: transform 200ms ease-out;
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease-out;
}

.accordion-item.is-open .accordion-panel {
  max-height: var(--panel-height, 400px);
}

.accordion-panel-inner {
  padding: 0 var(--space-2) var(--space-5);
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- Legal page ---------- */
.legal-section {
  max-width: 780px;
  margin: 0 auto var(--space-8);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h3 {
  font-size: 1.1rem;
  margin-top: var(--space-5);
}

.legal-section h3:first-child {
  margin-top: 0;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

.breadcrumb-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb-bar a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb-bar a:hover {
  color: var(--color-teal-600);
}

.page-hero {
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: var(--space-7) 0;
}

.page-hero h1,
.page-hero h2,
.page-hero h3 {
  color: var(--color-white);
}

.page-hero p {
  color: var(--text-on-navy-muted);
  max-width: 60ch;
}

.page-hero .eyebrow {
  color: var(--color-gold-400);
}

/* ---------- Reduced motion: hard safety net ----------
   Belt-and-braces on top of js/motion.js not adding .js-motion in the first
   place when this is set — if it's ever added anyway (or a future edit adds
   a new animated class), this wins. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .tide-line-svg {
    animation: none !important;
  }

  .whatsapp-float::before {
    animation: none !important;
    display: none !important;
  }

  .hero-bg video {
    display: none !important;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}