/* ==========================================================================
   S.K. Marine International — light-dominant build
   Implements DESIGN_SYSTEM.md. No framework, no reset library.

   GROUND RHYTHM
   Light carries the page; navy is reserved for punctuation.
     Hero .............. dark (photograph + scrim)
     Trust ............. Mist
     About ............. Ice
     Products .......... Mist
     Services .......... Ice
     Cinematic band .... dark, slim
     How we work ....... Mist
     Port network ...... Ice
     Why ............... Mist
     CTA ............... dark
     Contact ........... Ice
     Footer ............ dark
   ========================================================================== */


/* ==========================================================================
   01 — RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* <picture> defaults to height:auto, so a child img's `height:100%` resolves
   against an auto-height parent and falls back to the intrinsic ratio — the
   image then overflows its container and object-position does nothing.
   Any picture used as a full-bleed wrapper must fill its container. */
.hero__media picture,
.about__media picture,
.cat__media picture,
.band__media picture,
.cta__media picture { display: block; width: 100%; height: 100%; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.section--dark :focus-visible,
.hero :focus-visible { outline-color: var(--focus-ring-dark); }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--navy-ocean); color: var(--white); }

.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;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--orange);
  color: var(--action-ink);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   02 — TYPOGRAPHY
   ========================================================================== */

.display, .h1, .h2, .h3, .h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: var(--measure-display);
}

.h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); color: var(--text-primary); }
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
}
.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/* Eyebrow — Teal fails on light (2.90:1), so the marine accent here is
   --teal-deep at 5.72:1. A span/p, never a heading tag. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-marine);
  margin: 0 0 var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: var(--measure-lead);
}

.prose { max-width: var(--measure-prose); color: var(--text-muted); }
.prose p + p { margin-top: var(--space-4); }
.prose strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

.section-head { margin-bottom: var(--section-gap); }
.section-head .lead { margin-top: var(--space-5); }
.section-head--wide .lead { max-width: 62ch; }

/* Dark-ground overrides, used only by the punctuation sections */
.section--dark, .hero { color: var(--text-on-dark); }
.section--dark .h2, .section--dark .h3 { color: var(--text-on-dark); }
.section--dark .eyebrow, .hero .eyebrow { color: var(--text-on-dark-accent); }
.section--dark .lead, .hero .lead { color: rgba(247, 250, 252, 0.82); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
}


/* ==========================================================================
   03 — LAYOUT & CONTAINERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--text   { max-width: var(--container-text); }
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--section-py); }
.section--lg { padding-block: var(--section-py-lg); }
.section--sm { padding-block: var(--section-py-sm); }

.section--page { background: var(--surface-page); }
.section--alt  { background: var(--surface-alt); }
.section--dark { background: var(--surface-dark); }

.grid { display: grid; gap: var(--grid-gap); }


/* ==========================================================================
   04 — BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  min-height: 52px;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* PRIMARY — charcoal on orange = 5.75:1.
   White on orange is 2.84:1 and FAILS AA. See DESIGN_SYSTEM.md §0. */
.btn--primary {
  background: var(--action-bg);
  color: var(--action-ink);
  box-shadow: 0 1px 2px rgba(6, 25, 35, 0.16);
}
.btn--primary:hover {
  background: var(--orange-hover);   /* lighten — darkening would break AA */
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}
.btn--primary:active { transform: translateY(0); }

/* Secondary on LIGHT grounds — Ocean Blue, 8.26:1 */
.btn--secondary {
  background: var(--white);
  color: var(--text-accent);
  border-color: var(--border-light-strong);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  border-color: var(--navy-ocean);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Secondary on DARK grounds — hero, CTA */
.btn--on-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--border-dark-strong);
}
.btn--on-dark:hover {
  border-color: var(--aqua);
  background: rgba(54, 209, 196, 0.10);
  transform: translateY(-2px);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  transition: gap var(--dur-fast) var(--ease-out);
}
.section--dark .btn-text { color: var(--text-on-dark-accent); }
.btn-text:hover { gap: var(--space-3); }

.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow,
.btn-text:hover .btn__arrow { transform: translateX(4px); }

.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }


/* ==========================================================================
   05 — HEADER & NAVIGATION
   Transparent over the hero photograph, light solid bar once scrolled.
   ========================================================================== */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid rgba(247, 250, 252, 0.14);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--border-light);
  box-shadow: 0 2px 16px rgba(6, 25, 35, 0.08);
}
@supports (backdrop-filter: blur(12px)) {
  .header.is-scrolled {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.header__utility {
  display: none;
  border-bottom: 1px solid rgba(247, 250, 252, 0.12);
  font-size: var(--fs-caption);
  color: rgba(247, 250, 252, 0.80);
}
.header__utility-in {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  height: 38px;
}
.header__utility a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding-inline: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.header__utility a:hover { color: var(--aqua); }
.header.is-scrolled .header__utility { display: none; }

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 92px;
  transition: height var(--dur-base) var(--ease-out);
}
.header.is-scrolled .header__bar { height: 78px; }

/* --- Logo (DESIGN_SYSTEM.md §1.7, Option A) ---
   The client logo is preserved EXACTLY — never recoloured or redrawn.
   Over the hero it sits on a white clear-space plate so its royal blue and
   orange stay separated from the navy scrim. Once the header turns light
   the plate simply merges into the bar. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}
.logo__plate {
  display: grid;
  place-items: center;
  padding: 7px 10px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(6, 25, 35, 0.22);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
}
.header.is-scrolled .logo__plate { box-shadow: none; padding: 4px 6px; }
.logo:hover .logo__plate { transform: translateY(-1px); }
.logo__plate img {
  height: 63px;
  width: auto;
  transition: height var(--dur-base) var(--ease-out);
}
.header.is-scrolled .logo__plate img { height: 57px; }

/* Wordmark beside the mark — the client's own "S.K. MARINE INTERNATIONAL /
   SHIP CHANDLERS" artwork, used as an image (assets/images/sk-marine-wordmark.png)
   rather than recreated in a web font, per client request. */
.logo__wordmark { display: none; min-width: 0; }
.logo__wordmark img {
  display: block;
  height: clamp(1.125rem, 2.1vw, 2.125rem);        /* 18 -> 34px */
  width: auto;
  max-width: 100%;
  transition: height var(--dur-base) var(--ease-out);
}
.header.is-scrolled .logo__wordmark img { height: clamp(1rem, 1.7vw, 1.6875rem); }

/* Reused (unrelated to the brand wordmark) as the mobile menu panel's
   small-caps "Menu" label. */
.logo__tag {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aqua);
  white-space: nowrap;
}

/* --- Desktop nav --- */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-6); }
.nav__link {
  position: relative;
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: rgba(247, 250, 252, 0.88);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--white); }
.header.is-scrolled .nav__link { color: var(--text-muted); }
.header.is-scrolled .nav__link:hover,
.header.is-scrolled .nav__link[aria-current="page"] { color: var(--text-primary); }

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.header.is-scrolled .nav__link::after { background: var(--navy-ocean); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.header__cta { display: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid rgba(247, 250, 252, 0.30);
  border-radius: var(--radius-btn);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--aqua); background: rgba(54, 209, 196, 0.12); }
.header.is-scrolled .icon-btn {
  border-color: var(--border-light-strong);
  color: var(--text-accent);
}
.header.is-scrolled .icon-btn:hover {
  border-color: var(--navy-ocean);
  background: rgba(11, 82, 105, 0.06);
}

/* --- Mobile menu — light panel --- */
.menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-left: 1px solid var(--border-light);
  box-shadow: -12px 0 40px rgba(6, 25, 35, 0.14);
  color: var(--text-primary);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}
.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-light);
}
.menu__head .logo__tag { color: var(--text-marine); }
.menu .icon-btn { border-color: var(--border-light-strong); color: var(--text-accent); }
.menu .icon-btn:hover { border-color: var(--navy-ocean); background: rgba(11, 82, 105, 0.06); }
.menu__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.menu__list { display: flex; flex-direction: column; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: var(--space-3) 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}
.menu__link:hover { color: var(--text-accent); padding-left: var(--space-2); }
.menu__index {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.menu__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--border-light);
  background: var(--surface-page);
  display: grid;
  gap: var(--space-4);
}
.menu__contact { display: grid; gap: var(--space-3); }
.menu__contact a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.menu__contact a:hover { color: var(--text-accent); }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: rgba(6, 25, 35, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}


/* ==========================================================================
   06 — 01 CINEMATIC HERO (stays dark — text sits over a photograph)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Full viewport height. `svh` is the small-viewport unit — it measures the
     screen with the mobile browser chrome VISIBLE, so the hero never ends up
     taller than what the user can actually see. That is the problem that made
     plain 100vh unreliable on mobile; `vh` is kept only as a fallback for
     browsers without svh support. */
  min-height: 100vh;
  min-height: 100svh;
  /* The fixed header overlays the top 92px, so an equal top/bottom padding
     would sit the content low. Adding the header height to the top padding
     makes the visible gaps above and below the text genuinely equal at every
     viewport height. */
  /* Top and bottom padding are tuned separately.
     TOP only has to clear the 92px fixed header, so it can shrink freely on
     short screens — which is what lets the hero still fit the viewport exactly
     on a 768px-tall laptop.
     BOTTOM has a hard floor of 100px because the slider controls sit there
     (~56px tall + ~40px inset); below that the fact rail collides with them. */
  padding-top: calc(92px + clamp(0.5rem, 4vh, 4rem));
  padding-bottom: clamp(6.25rem, 8vh, 8rem);
  overflow: hidden;
  background: var(--navy-deep);
}

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

/* --- Slider: the client's own vessel photographs, crossfaded --- */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease-in-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(1.08) contrast(1.06) brightness(1.02);
}
/* Slow drift on the visible slide only — one transform, GPU-composited */
.hero__slide.is-active img {
  transform: scale(1.05);
  animation: heroDrift 9s var(--ease-in-out) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

/* Scrim — lighter than the dark build, still enough for AA text */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* vertical: only enough to seat the header and the bottom rail */
    linear-gradient(180deg,
      rgba(6, 25, 35, 0.46) 0%,
      rgba(6, 25, 35, 0.10) 32%,
      rgba(6, 25, 35, 0.10) 52%,
      rgba(6, 25, 35, 0.58) 84%,
      rgba(6, 25, 35, 0.82) 100%),
    /* horizontal: carries the text legibility, and clears the right side
       so the vessel is seen rather than veiled */
    linear-gradient(96deg,
      rgba(6, 25, 35, 0.93) 0%,
      rgba(6, 25, 35, 0.86) 28%,
      rgba(6, 25, 35, 0.64) 46%,
      rgba(6, 25, 35, 0.24) 63%,
      rgba(6, 25, 35, 0.02) 80%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__content { max-width: 72ch; }
.hero__certs { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-9); }
.hero__cert-badge {
  display: grid;
  place-items: center;
  width: clamp(112px, 11.2vw, 140px);
  padding: 14px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(6, 25, 35, 0.45);
}
.hero__cert-badge img { display: block; width: 100%; height: auto; }
.hero .display {
  max-width: 19ch;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  margin-bottom: var(--space-5);
  color: var(--white);
}
.hero .display em { font-style: normal; color: var(--aqua); }
.hero__lead {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(247, 250, 252, 0.92);
  max-width: 46ch;
  margin-bottom: var(--space-7);
}
.hero .btn-group { margin-bottom: var(--space-6); }

.hero__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(54, 209, 196, 0.30);
}
.hero__rail-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: rgba(247, 250, 252, 0.80);
}
.hero__rail-item b {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--white);
  letter-spacing: -0.02em;
}

/* --- Slider controls ---
   DESIGN_SYSTEM.md §15.4 prohibits an auto-advancing carousel with no way to
   stop it. The slideshow is therefore fully operable: previous/next, direct
   slide selection, and an explicit pause that persists. Auto-advance is also
   suppressed entirely under prefers-reduced-motion. */
.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.75rem, 5vh, 3.25rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(6, 25, 35, 0.52);
  border: 1px solid rgba(247, 250, 252, 0.20);
  border-radius: var(--radius-full);
}
@supports (backdrop-filter: blur(8px)) {
  .hero__controls { background: rgba(6, 25, 35, 0.36); backdrop-filter: blur(10px); }
}

.hero__btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.hero__btn:hover { background: rgba(247, 250, 252, 0.16); }
.hero__btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

.hero__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}
.hero__dot {
  width: 26px; height: 26px;      /* ≥24px target; the visible bar is inside */
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.hero__dot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 3px;
  border-radius: var(--radius-full);
  background: rgba(247, 250, 252, 0.42);
  transition: background-color var(--dur-fast) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}
.hero__dot:hover::after { background: rgba(247, 250, 252, 0.72); }
.hero__dot.is-active::after { background: var(--aqua); width: 26px; }
.hero__dot:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: var(--radius-full); }


/* ==========================================================================
   07 — 02 TRUST STRIP (light)
   ========================================================================== */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.trust__item {
  background: var(--white);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trust__value {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-accent);
}
.trust__value span { color: var(--text-marine); }
.trust__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--text-muted);
}


/* ==========================================================================
   08 — 03 ABOUT (light)
   ========================================================================== */

.about__grid { display: grid; gap: var(--grid-gap-lg); align-items: center; }

.about__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}
.about__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
  transition: transform var(--dur-slower) var(--ease-out);
}
.about__media:hover img { transform: scale(1.04); }
.about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(6, 25, 35, 0.00) 42%,
    rgba(6, 25, 35, 0.52) 100%);
  pointer-events: none;
}

.about__marker {
  position: absolute;
  left: var(--space-5); bottom: var(--space-5);
  z-index: 2;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
@supports (backdrop-filter: blur(8px)) {
  .about__marker { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); }
}
.about__marker b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-accent);
  line-height: 1;
}
.about__marker span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-marine);
}

/* Differentiator pull-quote — the cross-port capability */
.about__pull {
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--teal-deep);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.about__pull p {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}


/* ==========================================================================
   09 — 04 VESSEL SUPPLY CATEGORIES (editorial; images keep their own scrim)
   ========================================================================== */

.cats { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }

.cat {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy-deep);
  min-height: 320px;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

.cat__media { display: block; position: absolute; inset: 0; z-index: -2; }
.cat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02) brightness(1.04);
  transition: transform var(--dur-slower) var(--ease-out);
}
.cat:hover .cat__media img { transform: scale(1.06); }

/* Focal points — default centre crop missed the subject on these two */
.cat--a .cat__media img { object-position: center 88%; }
.cat--d .cat__media img { object-position: center 52%; }
.cat--b .cat__media img { object-position: 34% center; }   /* cabin stores */

.cat__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* The foot of the card carries the title and description. A bright frame
     (the cabin-stores linen shot) drove the description to 3.51:1, so the
     bottom stop is strengthened — the upper stops stay light to keep the
     photograph visible. */
  background: linear-gradient(180deg,
    rgba(6, 25, 35, 0.24) 0%,
    rgba(6, 25, 35, 0.44) 38%,
    rgba(6, 25, 35, 0.82) 72%,
    rgba(6, 25, 35, 0.95) 100%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.cat:hover .cat__media::after { opacity: 0.92; }

.cat__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 320px;
  padding: var(--space-6);
  color: var(--white);
}
.cat__body > span:nth-child(2) { margin-top: auto; }
/* The card head sits on the lightest part of the scrim, so against a bright
   image region a bare label measures as little as 1.12:1 however heavy the
   text-shadow. A solid chip guarantees the ratio whatever is behind it. */
.cat__index {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 10px;
  background: rgba(6, 25, 35, 0.82);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  color: var(--aqua);
}
.cat__title {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}
.cat__desc {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(247, 250, 252, 0.88);
  max-width: 46ch;
}
.cat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(247, 250, 252, 0.24);
}
.cat__cue {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(247, 250, 252, 0.36);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.cat:hover .cat__cue {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-deep);
}
.cat__tag { font-size: var(--fs-caption); color: rgba(247, 250, 252, 0.74); }

.cats__note {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-small);
}


/* ==========================================================================
   09b — TABBED PRODUCT DETAIL
   Original build. The old site's gallery was assembled from third-party brand
   product shots (lubricant, paint, bearing and grocery brands); reproducing
   those would imply distributor relationships the client has not confirmed.
   This presents the same catalogue depth using our own visual language.
   ========================================================================== */

.prod { margin-top: var(--space-10); }

.prod__head { margin-bottom: var(--space-6); }
.prod__head .h3 { color: var(--text-primary); }

/* --- Tab bar --- */
.prod__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-7);
}
.prod__tab {
  flex: 1 1 auto;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: 0;
  border-radius: var(--radius-btn);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.prod__tab:hover { background: var(--surface-alt); color: var(--text-primary); }
.prod__tab.is-active {
  background: var(--navy-ocean);     /* white on Ocean = 8.66:1 */
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.prod__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Panel: category photograph + product grid --- */
.prod__panel {
  display: grid;
  gap: var(--grid-gap-lg);
  align-items: stretch;      /* photo matches the grid height, no dead space */
}
.prod__panel[hidden] { display: none; }

.prod__media {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow-md);
}
/* Give the picture a DEFINITE box. With only `height:100%` the image falls
   back to its intrinsic ratio and dictates the whole panel height (806px for
   a portrait source) — the same trap as the hero <picture>. */
.prod__media picture {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
}
.prod__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
}
/* Push the provisions crop down to the crates — third-party packaging is
   legible at the top of that frame. */
#panel-prov .prod__media img { object-position: center 88%; }
#panel-engine .prod__media img { object-position: center 55%; }
.prod__cap {
  padding: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(247, 250, 252, 0.90);
  background: linear-gradient(180deg, rgba(11, 82, 105, 0.30), rgba(6, 25, 35, 0.96));
}

.prod__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;      /* cards keep their own height; only the photo stretches */
  gap: var(--space-3);
}
.prod__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 68px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.prod__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-light-strong);
}
.prod__ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(10, 111, 108, 0.10);
  color: var(--teal-deep);            /* 5.72:1 on light — Teal would fail */
}
.prod__item:hover .prod__ico { background: rgba(11, 82, 105, 0.12); color: var(--text-accent); }
.prod__svg { width: 1.375rem; height: 1.375rem; }
.prod__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--text-primary);
}

.prod__note {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.prod__note a {
  color: var(--text-accent);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 560px) {
  .prod__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .prod__panel { grid-template-columns: 0.72fr 1.28fr; }
  .prod__grid  { grid-template-columns: repeat(2, 1fr); }
  .prod__tab   { flex: 0 1 auto; }
}


/* ==========================================================================
   10 — 05 SERVICES (light, white cards)
   ========================================================================== */

.svc { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }

.svc__item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.svc__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-light-strong);
}
.svc__icon {
  width: 44px; height: 44px;
  color: var(--text-marine);
  margin-bottom: var(--space-1);
}
.svc__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.svc__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc__list li {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--surface-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
}

/* Ship repair is the highest-value service and is entirely absent from the
   current site (PROJECT_RESEARCH.md §3). One deep-marine card in a light
   grid is the strongest emphasis available without adding a new colour. */
.svc__item--feature {
  background: var(--grad-marine);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.svc__item--feature .svc__icon  { color: var(--aqua); }
.svc__item--feature .svc__title { color: var(--white); }
.svc__item--feature .svc__list li {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.svc__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  order: -1;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--aqua);
  border-radius: var(--radius-xs);
}


/* ==========================================================================
   11 — CINEMATIC BAND (the one slim dark strip that keeps the rhythm)
   ========================================================================== */

.band {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.92) contrast(1.04) brightness(0.90);
}
.band__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(6, 25, 35, 0.92) 0%,
    rgba(6, 25, 35, 0.64) 54%,
    rgba(6, 25, 35, 0.26) 100%);
}
.band__inner { position: relative; z-index: 1; width: 100%; }
.band__quote {
  max-width: 30ch;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
  color: var(--white);
}
.band__meta {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--aqua);
}


/* ==========================================================================
   12 — 06 HOW WE WORK (light)
   ========================================================================== */

.steps { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }

.step {
  position: relative;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step__num {
  position: absolute;
  top: -0.18em; right: 0.06em;
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--navy-ocean);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}
.step__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--text-marine);
  margin-bottom: var(--space-3);
}
.step__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.step__desc { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }

/* Step 03 is where the branch network actually earns its keep */
.step--accent { border-color: var(--teal-deep); box-shadow: var(--shadow-md); }
.step--accent .step__title { color: var(--text-accent); }
.step--accent .step__num { color: var(--teal-deep); opacity: 0.13; }


/* ==========================================================================
   13 — 07 INDIA PORT NETWORK (light schematic)
   ========================================================================== */

.network__grid { display: grid; gap: var(--grid-gap-lg); align-items: center; }

/* Schematic — real coordinates, honestly labelled, not a drawn coastline */
.netmap {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5.6;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 62% 34%, rgba(10, 111, 108, 0.09), transparent 58%),
    var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.netmap__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 82, 105, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 82, 105, 0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 78%);
}
.netmap svg { position: relative; width: 100%; height: 100%; }

/* Teal fails on light even as a graphic (2.90:1 < 3:1), so routes and
   markers use Ocean Blue / Deep Teal instead. */
.route {
  fill: none;
  stroke: var(--navy-ocean);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.34;
}
.route--flow {
  stroke: var(--teal-deep);
  stroke-width: 2.5;
  opacity: 1;
  stroke-dasharray: 26 320;
  animation: routeFlow 4.2s linear infinite;
}
@keyframes routeFlow { to { stroke-dashoffset: -346; } }

.port__halo {
  fill: var(--teal-deep);
  opacity: 0.22;
  transform-origin: center;
  transform-box: fill-box;
  animation: portPulse 3.2s var(--ease-in-out) infinite;
}
@keyframes portPulse {
  0%, 100% { transform: scale(1);   opacity: 0.24; }
  50%      { transform: scale(1.9); opacity: 0.02; }
}
.port__dot { fill: var(--teal-deep); }
.port__dot--hq { fill: var(--orange); }
.port__halo--hq { fill: var(--orange); }
.port__label {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  fill: var(--charcoal);
  letter-spacing: -0.01em;
}
.port__coord {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--slate-deep);
  letter-spacing: 0.02em;
}
.netmap__caption {
  position: absolute;
  left: var(--space-5); bottom: var(--space-4);
  right: var(--space-5);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.branches { display: grid; gap: var(--space-3); }
.branch {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.branch:hover {
  border-color: var(--border-light-strong);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}
.branch__pin {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(10, 111, 108, 0.10);
  color: var(--teal-deep);
}
.branch--hq .branch__pin { background: rgba(255, 107, 53, 0.14); color: #B3400E; }
.branch__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}
/* Orange text fails on light (2.71:1); this darkened orange passes. */
.chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: rgba(255, 107, 53, 0.16);
  color: #B3400E;
  line-height: 1.6;
}
.chip--teal { background: rgba(10, 111, 108, 0.12); color: var(--teal-deep); }
.branch__meta {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.55;
}

.network__note {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--border-light-strong);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.network__note b { color: var(--text-primary); font-weight: var(--fw-semibold); }


/* ==========================================================================
   14 — 08 WHY S.K. MARINE (light)
   ========================================================================== */

.why {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.why__item {
  background: var(--white);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background-color var(--dur-base) var(--ease-out);
}
.why__item:hover { background: var(--surface-page); }
.why__icon { width: 40px; height: 40px; color: var(--text-accent); }
.why__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.why__desc { font-size: var(--fs-small); line-height: 1.62; color: var(--text-muted); }


/* ==========================================================================
   14b — 08b CERTIFICATIONS (light)
   ========================================================================== */

.certs__head { text-align: center; margin-bottom: var(--space-7); }
.certs__head .h2 { margin-top: var(--space-2); }

.certs { position: relative; display: flex; align-items: center; gap: var(--space-3); }

.certs__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--space-2) var(--space-1) var(--space-4);
  margin: 0 auto;
}
.certs__track::-webkit-scrollbar { display: none; }

.cert-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(300px, 32vw, 460px);
  display: block;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cert-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-light-strong);
  box-shadow: var(--shadow-md);
}
.cert-card img { display: block; width: 100%; height: auto; }

.certs__nav {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.certs__nav:hover { color: var(--teal-deep); border-color: var(--border-light-strong); box-shadow: var(--shadow-md); }
.certs__nav:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }


/* ==========================================================================
   15 — 09 CTA BAND (dark — the conversion moment earns the contrast)
   ========================================================================== */

.cta { position: relative; overflow: hidden; background: var(--navy-ocean); }
.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.90) contrast(1.03) brightness(0.82);
}
.cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 82, 105, 0.86) 0%, rgba(6, 25, 35, 0.84) 100%);
}
.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta__inner .h2 { max-width: 26ch; margin-bottom: var(--space-5); color: var(--white); }
.cta__inner .lead {
  max-width: 58ch;
  color: rgba(247, 250, 252, 0.88);
  margin-bottom: var(--space-8);
}
.cta__assure {
  margin-top: var(--space-7);
  font-size: var(--fs-small);
  color: rgba(247, 250, 252, 0.74);
}
.cta__assure a { color: var(--aqua); font-weight: var(--fw-semibold); }
.cta__assure a:hover { text-decoration: underline; }


/* ==========================================================================
   16 — 10 CONTACT (light)
   ========================================================================== */

.contact__grid { display: grid; gap: var(--grid-gap-lg); }
.contact__cards { display: grid; gap: var(--space-4); }

.ccard {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.ccard:hover { border-color: var(--border-light-strong); box-shadow: var(--shadow-md); }
.ccard__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(10, 111, 108, 0.10);
  color: var(--teal-deep);
}
.ccard__label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.ccard__value {
  display: block;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-primary);
}
.ccard__value a {
  display: inline-block;
  min-height: 26px;
  line-height: 26px;
  color: var(--text-accent);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out);
}
.ccard__value a:hover { color: var(--teal-deep); text-decoration: underline; }
.ccard__value--stack { display: grid; gap: var(--space-1); }

.contact__aside {
  padding: var(--space-7);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  box-shadow: var(--shadow-sm);
}
.contact__aside .h3 { margin-bottom: var(--space-4); color: var(--text-primary); }
.contact__aside p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}
.contact__aside .btn-group { margin-bottom: var(--space-6); }
.contact__hours {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.6;
}


/* ==========================================================================
   17 — 11 FOOTER (dark — anchors the page)
   ========================================================================== */

.footer {
  background: var(--navy-deep);
  color: var(--text-on-dark);
  padding-top: var(--section-py);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-9);
}
.footer__brand { max-width: 34ch; }
.footer__brand .logo { margin-bottom: var(--space-5); }
.footer__brand .logo__plate { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); padding: 7px 10px; }
.footer__brand .logo__plate img { height: 81px; }
.footer__desc {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
}
.footer__title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: var(--space-5);
}
.footer__links { display: grid; gap: var(--space-3); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 26px;
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--aqua); transform: translateX(3px); }
.footer__contact { display: grid; gap: var(--space-4); }
.footer__contact-item { font-size: var(--fs-small); line-height: 1.6; }
.footer__contact-item span {
  display: block;
  font-size: var(--fs-caption);
  color: var(--slate-light);
  margin-bottom: 2px;
}
.footer__contact-item a {
  display: inline-block;
  min-height: 28px;
  line-height: 28px;
  color: var(--ice);
}
.footer__contact-item a:hover { color: var(--aqua); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-caption);
  color: var(--slate-light);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer__legal a { display: inline-block; min-height: 26px; line-height: 26px; }
.footer__legal a:hover { color: var(--aqua); }


/* ==========================================================================
   18 — MOBILE STICKY ACTION BAR (light)
   ========================================================================== */

.actionbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -2px 18px rgba(6, 25, 35, 0.10);
  padding-bottom: env(safe-area-inset-bottom);
}
@supports (backdrop-filter: blur(12px)) {
  .actionbar { background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(14px); }
}
.actionbar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: var(--space-2);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--text-accent);
  border-right: 1px solid var(--border-light);
}
.actionbar__btn:last-child { border-right: 0; }
.actionbar__btn--alt { color: var(--teal-deep); }
.actionbar__btn--quote {
  background: var(--orange);
  color: var(--action-ink);   /* charcoal — verified 5.75:1 */
}


/* ==========================================================================
   19 — ICONS & MOTION
   ========================================================================== */

.icon {
  width: 1.5rem; height: 1.5rem;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 100%; height: 100%; }

/* Reveal classes are scoped to .js, which script.js adds — without JS
   nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 60ms; }
.js .reveal[data-delay="2"] { transition-delay: 120ms; }
.js .reveal[data-delay="3"] { transition-delay: 180ms; }
.js .reveal[data-delay="4"] { transition-delay: 240ms; }
.js .reveal[data-delay="5"] { transition-delay: 300ms; }

.js .reveal-media { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-slower) var(--ease-out); }
.js .reveal-media.is-visible { clip-path: inset(0 0 0 0); }


/* ==========================================================================
   20 — RESPONSIVE
   ========================================================================== */

@media (min-width: 480px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .logo__wordmark { display: block; }
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .actionbar { display: none; }

  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .cats { grid-template-columns: repeat(12, 1fr); }
  .cat--a { grid-column: span 7; min-height: 400px; }
  .cat--b { grid-column: span 5; min-height: 400px; }
  .cat--c { grid-column: span 5; min-height: 400px; }
  .cat--d { grid-column: span 7; min-height: 400px; }
  .cat__body { min-height: 400px; padding: var(--space-7); }

  .svc { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: repeat(2, 1fr); }
  .contact__cards { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .band__quote { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); }
}

@media (min-width: 1024px) {
  html { scroll-padding-top: 126px; }
  .header__utility { display: block; }
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .header__menu-btn { display: none; }
  .header__call-btn { display: none; }

  /* The utility bar (38px) only shows at this breakpoint, so the fixed
     header is taller here than the base 92px the hero's padding-top
     assumes — without this the hero content starts flush under the
     header instead of clearing it. */
  .hero { padding-top: calc(130px + clamp(0.5rem, 4vh, 4rem)); }

  .about__grid { grid-template-columns: 1fr 1.05fr; }
  .svc { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .why { grid-template-columns: repeat(3, 1fr); }
  .network__grid { grid-template-columns: 1.1fr 1fr; }
  .contact__grid { grid-template-columns: 1.5fr 1fr; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1280px) {
  .cat--a, .cat--b, .cat--c, .cat--d { min-height: 460px; }
  .cat__body { min-height: 460px; }
}

@media (max-width: 767px) {
  body { padding-bottom: 60px; }
  /* The hero is 100svh, so its foot sits UNDER the 60px sticky action bar.
     The controls must clear that bar, and the fact rail must clear the
     controls — otherwise both end up hidden behind it. */
  .hero { padding-bottom: 10rem; }
  .hero__controls {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(60px + var(--space-4));
  }
  .hero__rail { gap: var(--space-3) var(--space-5); }
  .contact__aside { padding: var(--space-6); }
  .band { min-height: 280px; }
}


/* ==========================================================================
   21 — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-media { clip-path: none; }
  .hero__slide.is-active img { animation: none; transform: none; }
  .hero__slide { transition-duration: 0.01ms !important; }
}