/* ==========================================================================
   NAVARA OFFSHORE — Design system
   --------------------------------------------------------------------------
   Direction: nautical chart / depth sounding. The logo mark is an "N" with a
   plumb-drop, so the page is built on depth: tonal bands get deeper as you go,
   separated by a thin teal "waterline". Edges are near-square (2px) for an
   engineered feel rather than a soft product-card look. Borders and tonal
   fills do the work of separation; shadow is reserved for surfaces that
   genuinely float (sticky masthead, enquiry panel).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Depth ramp — surface to seabed.
     navy and mist are the approved brand values; abyss and hull are tonal
     extensions of navy, used only as backgrounds. */
  --abyss:   #061426;
  --navy:    #0B1F3A;  /* brand — Navara Deep Navy */
  --hull:    #14304F;
  --mist:    #E9EEF3;  /* brand — Marine Mist */
  --mist-dk: #D5DFE8;
  --white:   #FFFFFF;  /* brand — White */

  /* Accents. The brand specifies teal as an accent rather than a dominant
     colour, and at #1F8A8A it carries 4.15:1 on white — enough for rules and
     borders, not for small text or a filled button. So the brand value does
     the accent work and two deeper steps of the same hue carry text. */
  --teal:     #1F8A8A;  /* brand — Maritime Teal; rules, borders, keel-lines */
  --teal-ink: #176B6A;  /* teal as small text, and solid button fill */
  --teal-dk:  #145E5D;  /* pressed / hover */
  --beacon:   #35C4BE;  /* tint of the same hue — dark backgrounds only */

  /* Text */
  --ink:     #202A35;  /* brand — Deep Graphite */
  --slate:   #6B7785;  /* brand — Steel Grey; 4.56:1 on white */
  --slate-lt:#8A97A3;
  --on-dark:      #E4ECF3;
  --on-dark-soft: #A9BCCE;

  /* Type */
  --font-display: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --t-xs:  0.8125rem;   /* 13px */
  --t-sm:  0.9375rem;   /* 15px */
  --t-base:1.0625rem;   /* 17px */
  --t-md:  1.1875rem;   /* 19px */
  --t-lg:  1.3125rem;   /* 21px */

  /* Space — 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5.5rem;

  --shell: 1240px;
  --gutter: 1.5rem;
  --edge: 2px;          /* the house corner radius */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* Keyboard focus is always visible; mouse clicks stay clean. */
:focus-visible {
  outline: 3px solid var(--beacon);
  outline-offset: 3px;
}

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--beacon);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--edge);
}
.skip-link:focus { top: var(--s-3); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

.t-display {
  font-size: clamp(2.35rem, 5.2vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

.t-h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.t-h2 {
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  letter-spacing: -0.024em;
}

.t-h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }

.t-h4 {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* Body copy sits under 75 characters per line. */
.prose { max-width: 63ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose p { color: var(--slate); }

.lede {
  font-size: clamp(var(--t-md), 1.6vw, var(--t-lg));
  line-height: 1.55;
  color: var(--slate);
  max-width: 58ch;
}

.measure-wide { max-width: 72ch; }

/* The waterline label: a short teal rule with a sentence-case caption.
   Deliberately not a tracked-out all-caps eyebrow. */
.label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--teal-ink);
  margin-bottom: var(--s-4);
}
.label::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.label--center { justify-content: center; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.band { padding-block: var(--s-9); }
.band--tight { padding-block: var(--s-8); }
/* Brand Steel Grey is 4.56:1 on white but only 3.91:1 on Marine Mist, which
   fails AA for body copy. Rather than patch every rule, the token itself is
   re-scoped inside mist surfaces — descendants pick the darker value up
   automatically. Same treatment on the enquiry panel, which is mist-filled. */
.band--mist,
.form-panel { --slate: #55636F; }

.band--mist { background: var(--mist); }
.band--deep { background: var(--navy); color: var(--on-dark); }
.band--abyss { background: var(--abyss); color: var(--on-dark); }

/* Photo-backed band. Built the same way as .pagehead: the photograph lives in
   its own layer beneath a navy scrim, so text above it never depends on which
   part of the image happens to sit behind it. Measured against the brightest
   pixel in the source photo, the heading clears 10.9:1 and card copy 8.1:1. */
.band--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark);
}
.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Composed fallback, so a failed photograph still leaves a navy band. */
  background: linear-gradient(200deg, var(--hull), var(--navy) 60%, var(--abyss));
}
.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(0.45);
}
.band__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(6, 20, 38, 0.44), rgba(6, 20, 38, 0.58));
}

.band--deep .prose p,
.band--abyss .prose p,
.band--photo .prose p,
.band--deep .lede,
.band--abyss .lede,
.band--photo .lede { color: var(--on-dark-soft); }

.band--deep .label,
.band--abyss .label,
.band--photo .label { color: var(--beacon); }

/* Waterline: reserved for the shift into a dark band, which is the only
   tonal change significant enough to earn a rule. */
.band--deep,
.band--abyss,
.band--photo { border-top: 2px solid rgba(31, 138, 138, 0.55); }

.center { text-align: center; }
.center .lede,
.center .prose { margin-inline: auto; }

/* Headings invert automatically on dark bands — no per-element overrides. */
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep h4,
.band--abyss h1, .band--abyss h2, .band--abyss h3, .band--abyss h4,
.band--photo h1, .band--photo h2, .band--photo h3, .band--photo h4,
.hero h1, .hero h2, .pagehead h1 { color: var(--white); }

/* Spacing utilities */
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* A short statement set in the display face — used once per page at most. */
.pull {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--teal-ink);
}
.band--deep .pull, .band--abyss .pull, .band--photo .pull { color: var(--beacon); }

.lede--ink { color: var(--ink); }

.head { margin-bottom: var(--s-7); }
.head--center { text-align: center; }
.head--center .label { justify-content: center; }
.head--center .lede { margin-inline: auto; }

/* Split: asymmetric by default so it doesn't read as two equal boxes. */
.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
  .split--text-lead { grid-template-columns: 1.15fr 0.85fr; }
  .split--media-lead { grid-template-columns: 0.85fr 1.15fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* Auto grid — cards size themselves, so a five-item row never crushes to
   200px the way a fixed five-column grid does. */
.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 27vw, 19rem), 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(clamp(17rem, 30vw, 22rem), 1fr)); }

/* A four-item row would otherwise break to 3 + 1 at desktop width. */
@media (min-width: 1000px) {
  .grid--4up { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btns--center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 2px solid transparent;
  border-radius: var(--edge);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

.btn--solid { background: var(--teal-ink); color: var(--white); }
.btn--solid:hover { background: var(--teal-dk); }

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

.btn--line-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.btn--line-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn--block { width: 100%; }

/* Inline text link with a growing underline — no arrow glyph appended. */
.tlink {
  display: inline-block;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--teal-ink);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s var(--ease);
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   6. Top bar & masthead
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--abyss);
  color: var(--on-dark-soft);
  font-size: var(--t-xs);
  padding-block: 0.6rem;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
}
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.topbar a { color: inherit; transition: color 0.2s var(--ease); }
.topbar a:hover { color: var(--beacon); }
.topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar__item svg { width: 14px; height: 14px; flex: none; opacity: 0.8; }

/* Language switcher.
   Built on <details>/<summary> so it opens, closes and takes keyboard focus
   with no script at all; main.js only adds close-on-outside-click and Escape.
   The panel is light-on-white while the bar around it is dark, so the colour
   rules below are scoped with .topbar to outrank `.topbar a`. */
.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;          /* Firefox marker */
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn svg { width: 14px; height: 14px; flex: none; opacity: 0.8; }
.lang__now { font-weight: 500; letter-spacing: 0.01em; }
.lang__btn:hover,
.lang[open] > .lang__btn { color: var(--beacon); }
.lang__caret { transition: transform 0.2s var(--ease); }
.lang[open] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  z-index: 120;              /* above the sticky masthead, which sits at 100 */
  top: calc(100% + 0.65rem);
  right: 0;
  min-width: 12.5rem;
  padding-block: var(--s-2) var(--s-1);
  border: 1px solid var(--mist-dk);
  border-top: 2px solid var(--teal);
  border-radius: var(--edge);
  background: var(--white);
  box-shadow: 0 14px 34px rgba(6, 20, 38, 0.26);
}
.lang__note {
  margin: 0;
  padding: 0 var(--s-4) var(--s-2);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--slate);
}
.topbar .lang__opt {
  display: block;
  padding: 0.45rem var(--s-4);
  color: var(--ink);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.topbar .lang__opt:hover { background: var(--mist); color: var(--teal-ink); }
.topbar .lang__opt.is-current { color: var(--teal-ink); font-weight: 600; }
.lang__opt.is-current::after { content: " \2713"; }

/* Under ~520px the topbar wraps: the panel would run off the right edge, and
   the globe plus caret carry the meaning on their own, so the language name
   drops out rather than forcing another line. */
@media (max-width: 520px) {
  .lang__menu { right: auto; left: 0; }
  .lang__now { display: none; }
}

/* Browser-language offer bar.
   An offer, never an automatic redirect: redirecting on Accept-Language
   leaves the English pages uncrawled (Googlebot sends none) and hijacks
   readers who came for the original. Hidden until main.js finds a match. */
.langbar {
  background: var(--teal-ink);
  color: var(--white);
  font-size: var(--t-sm);
}
.langbar[hidden] { display: none; }
.langbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding-block: 0.7rem;
}
.langbar__msg { margin: 0; flex: 1 1 16rem; }
.langbar__go {
  flex: none;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--edge);
  color: var(--white);
  font-weight: 600;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.langbar__go:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); }
.langbar__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--edge);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.langbar__close:hover { background: rgba(255, 255, 255, 0.18); }
.langbar__close svg { width: 15px; height: 15px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--mist-dk);
  transition: box-shadow 0.25s var(--ease);
}
.masthead.is-stuck { box-shadow: 0 6px 24px rgba(11, 31, 58, 0.09); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 84px;
  transition: min-height 0.25s var(--ease);
}
.masthead.is-stuck .masthead__inner { min-height: 68px; }

/* Brand lockup — the approved Navara artwork, one image, no type substitution.
   The supplied logo is stacked (mark over NAVARA over OFFSHORE LIMITED); a
   horizontal re-flow of the same artwork is used here because in the stacked
   arrangement the descriptor line would land at roughly 3px in a header bar.
   Sized by height with width:auto so the intrinsic 800x224 ratio is kept, and
   the width/height attributes on the <img> reserve the box before it loads. */
.brand { display: inline-flex; align-items: center; }
.brand__lockup {
  height: 52px;
  width: auto;
  flex: none;
  transition: height 0.25s var(--ease);
}
.masthead.is-stuck .brand__lockup { height: 46px; }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__link {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  padding-block: var(--s-2);
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__link:hover { color: var(--teal-ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--teal-ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { display: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--mist-dk);
  border-radius: var(--edge);
  cursor: pointer;
}
.burger__bars { position: relative; width: 20px; height: 2px; background: var(--navy); display: block; }
.burger__bars::before,
.burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--navy);
  transition: transform 0.22s var(--ease), top 0.22s var(--ease);
}
.burger__bars::before { top: -6px; }
.burger__bars::after { top: 6px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-5);
    background: var(--white);
    border-bottom: 2px solid var(--teal);
    box-shadow: 0 18px 30px rgba(11, 31, 58, 0.12);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav__link {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--mist);
    font-size: var(--t-md);
  }
  .nav__link::after { display: none; }
  /* The enquiry CTA follows the links into the mobile menu instead of
     disappearing at narrow widths. */
  .nav__cta { display: block; margin-top: var(--s-5); }
  .masthead__cta { display: none; }
}

/* On a narrow phone the lockup and the burger have to share one line, so the
   logo steps down rather than crowding it. Height only — the ratio is fixed. */
@media (max-width: 420px) {
  .brand__lockup,
  .masthead.is-stuck .brand__lockup { height: 42px; }
  .footer__brand img { height: 48px; }
}

/* --------------------------------------------------------------------------
   7. Hero (home)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

/* Gradient is painted under the photograph, so a failed remote image leaves a
   composed navy field rather than a blank box. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(53, 196, 190, 0.22), transparent 60%),
    linear-gradient(196deg, #123258 0%, var(--navy) 45%, var(--abyss) 100%);
  background-color: var(--navy);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(0.4) contrast(1.06);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgba(6, 20, 38, 0.95) 0%, rgba(11, 31, 58, 0.78) 48%, rgba(11, 31, 58, 0.36) 100%);
}

.hero__inner {
  padding-block: clamp(5rem, 11vw, 8.5rem) clamp(4rem, 8vw, 6rem);
  max-width: 47rem;
}
.hero__title { color: var(--white); }
.hero .label { color: var(--beacon); }
.hero__lede {
  color: #C6D6E4;
  margin-top: var(--s-5);
  max-width: 44ch;
}
.hero .btns { margin-top: var(--s-6); }

/* Instrument strip — reads like a bridge console readout and carries the
   four things a prospective client actually wants to confirm. */
.strip {
  position: relative;
  background: rgba(6, 20, 38, 0.66);
  border-top: 2px solid var(--teal);
  backdrop-filter: blur(6px);
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.strip__cell {
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: var(--s-5);
}
.strip__cell:first-child { border-left: 0; padding-left: 0; }
.strip__k {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.015em;
}
.strip__v {
  font-size: var(--t-xs);
  color: var(--on-dark-soft);
  margin-top: 2px;
}
@media (max-width: 700px) {
  .strip__cell { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .strip__cell:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   8. Page head (interior pages)
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  border-bottom: 2px solid var(--teal);
}
.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(200deg, var(--hull), var(--navy) 60%, var(--abyss));
}
.pagehead__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(0.45);
}
.pagehead__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,20,38,.93), rgba(11,31,58,.7));
}
.pagehead__inner { padding-block: clamp(3.5rem, 8vw, 5.75rem); max-width: 44rem; }
.pagehead .label { color: var(--beacon); }
.pagehead h1 { color: var(--white); }
.pagehead .lede { color: #C6D6E4; margin-top: var(--s-4); }

/* Breadcrumb */
.crumbs {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--on-dark-soft);
  margin-bottom: var(--s-5);
}
.crumbs a:hover { color: var(--beacon); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); opacity: 0.5; }
.crumbs li { display: inline-flex; }

/* --------------------------------------------------------------------------
   9. Cards & content blocks
   -------------------------------------------------------------------------- */

/* Service card: a left keel-line that fills in on hover. No lift, no
   drop-shadow — the border and fill carry the state change. */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 4px);
  background: var(--white);
  border: 1px solid var(--mist-dk);
  border-radius: var(--edge);
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}
.svc::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--mist-dk);
  transition: background-color 0.22s var(--ease);
}
.svc:hover { border-color: #BFD0DD; }
.svc:hover::before { background: var(--teal); }
.svc h3, .svc h4 { color: var(--navy); }
.svc p {
  color: var(--slate);
  font-size: var(--t-sm);
  margin-top: var(--s-3);
}
.svc .checks { margin-top: var(--s-4); }
.svc .tlink { margin-top: var(--s-5); align-self: flex-start; }
/* Only stretch the paragraph when a link has to sit on the card's baseline —
   otherwise a checklist would be pushed away from the copy it belongs to. */
.svc:has(.tlink) > p:last-of-type { flex: 1 1 auto; }

.band--mist .svc { background: var(--white); }

/* On the photo band the cards go translucent so the vessel reads *through*
   the grid rather than only in the gaps between cards. 0.62 alpha over the
   scrimmed photograph keeps card copy at 8.1:1 in the worst case. */
.band--photo .svc {
  background: rgba(6, 20, 38, 0.62);
  border-color: rgba(169, 188, 206, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.band--photo .svc::before { background: rgba(169, 188, 206, 0.34); }
.band--photo .svc:hover {
  background: rgba(6, 20, 38, 0.74);
  border-color: rgba(53, 196, 190, 0.55);
}
.band--photo .svc:hover::before { background: var(--beacon); }
.band--photo .svc p { color: var(--on-dark-soft); }
.band--photo .svc .tlink { color: var(--beacon); }
.band--photo .svc h3 { color: var(--white); }

/* Sector item — flat, rule-led, no card chrome */
.sector {
  padding-top: var(--s-4);
  border-top: 2px solid var(--navy);
}
.sector h3, .sector h4 { color: var(--navy); }
.sector p { color: var(--slate); font-size: var(--t-sm); margin-top: var(--s-2); }

/* Panel — a light raised surface (used sparingly) */
.panel {
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--mist-dk);
  border-top: 3px solid var(--teal);
  border-radius: var(--edge);
}
.panel h3, .panel h4 { color: var(--navy); }
.panel--dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--beacon);
}
.panel--dark h3, .panel--dark h4 { color: var(--white); }

/* Checklist */
.checks { display: grid; gap: var(--s-3); }
.checks--two { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-3) var(--s-5); }
.checks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.36em;
  width: 9px; height: 9px;
  border: 2px solid var(--teal);
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.band--deep .checks li::before,
.band--abyss .checks li::before,
.panel--dark .checks li::before { border-color: var(--beacon); }
.band--deep .checks li,
.band--abyss .checks li { color: var(--on-dark); }

/* Sounding list — a depth-marked figure list. Genuinely ordinal content. */
.steps { display: grid; gap: var(--s-6); counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--s-5); border-top: 2px solid rgba(53, 196, 190, 0.35); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--beacon);
  margin-bottom: var(--s-3);
}
.step h3, .step h4 { color: var(--white); }
.step p { color: var(--on-dark-soft); font-size: var(--t-sm); margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   10. Figures (photography)
   -------------------------------------------------------------------------- */

.figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--edge);
  /* Composed fallback: if the remote photograph fails, this stays on screen. */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 28px),
    linear-gradient(200deg, var(--hull), var(--navy) 55%, var(--abyss));
  min-height: 15rem;
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.03);
}
.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--square { aspect-ratio: 1 / 1; }

/* Duotone wash pulls photography toward the brand navy. */
.figure--wash::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(11, 31, 58, 0.34), rgba(6, 20, 38, 0.62));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Rule accent in the corner, echoing the waterline */
.figure--keyline::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42%; height: 3px;
  background: var(--teal);
  z-index: 2;
}

.figure.is-empty img { display: none; }

/* --------------------------------------------------------------------------
   10b. Slider
   --------------------------------------------------------------------------
   A slider is just a .figure with more than one photograph in it, so it
   inherits the aspect ratio, the duotone wash and the teal keyline and sits
   in a layout exactly where a single figure would.

   Crossfade rather than a horizontal push: the house style keeps motion to a
   minimum, and a fade does not fight the tonal bands the way sliding does.

   No-JS state is deliberate — the first slide carries .is-current in the
   markup and the rest stay hidden, so the section degrades to one still
   photograph. Every control is built by main.js, which means a browser with
   scripting off never gets a dead button.
   -------------------------------------------------------------------------- */

/* .slider is always also a .figure, so the ratio, wash and keyline come
   from there; this only guarantees the positioning context. */
.slider { position: relative; }
.slider__track { position: absolute; inset: 0; }

/* Full-width variant: the section spans the page instead of sharing a row
   with a text column. The frame itself stays portrait and centres, because
   every source photograph is portrait — a landscape crop of these cuts the
   nozzle rim, the flange body, the valve handwheel and the technician's
   head. Capped so it reads as a deliberate centred plate. */
.slider--full {
  width: min(100%, 34rem);
  margin-inline: auto;
}

.slider__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
}
.slider__slide.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s var(--ease), visibility 0s linear 0s;
}

/* Caption sits above the photograph and the wash (z-index 1) but below the
   teal keyline (z-index 2) so the rule still reads across the corner. */
.slider__cap {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-7) var(--s-4) var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--white);
  background: linear-gradient(to top, rgba(6, 20, 38, 0.88), rgba(6, 20, 38, 0));
}

.slider__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--edge);
  background: rgba(11, 31, 58, 0.55);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.slider__nav:hover {
  background: var(--teal-ink);
  border-color: var(--teal-ink);
}
.slider__nav--prev { left: var(--s-3); }
.slider__nav--next { right: var(--s-3); }
.slider__nav svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

/* Depth-gauge ticks rather than bubbles — same language as the strip rules. */
.slider__dots {
  position: absolute;
  z-index: 3;
  top: var(--s-3); right: var(--s-3);
  display: flex;
  gap: 5px;
}
.slider__dot {
  display: grid;
  align-items: center;
  width: 22px; height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.slider__dot::after {
  content: "";
  display: block;
  width: 100%; height: 3px;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s var(--ease);
}
.slider__dot:hover::after { background: rgba(255, 255, 255, 0.85); }
.slider__dot[aria-selected="true"]::after { background: var(--beacon); }

@media (max-width: 600px) {
  .slider__nav { width: 2.125rem; height: 2.125rem; }
  .slider__cap { padding: var(--s-6) var(--s-3) var(--s-3); }
}

/* A carousel that moves on its own is a WCAG 2.2.2 problem for anyone who
   needs motion stilled, so JS never starts the timer in that case. Killing
   the crossfade here as well keeps the two in step. */
@media (prefers-reduced-motion: reduce) {
  .slider__slide { transition: none; }
}

/* --------------------------------------------------------------------------
   11. Contact & forms
   -------------------------------------------------------------------------- */

.contact-layout { display: grid; gap: var(--s-7); }
@media (min-width: 980px) { .contact-layout { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-8); } }

/* Order-independent: the first card carries the heavy rule, the rest a
   hairline. (:first-of-type would have matched the wrong sibling here.) */
.channel {
  padding: var(--s-5) 0;
  border-top: 2px solid var(--navy);
}
.channel + .channel { border-top: 1px solid var(--mist-dk); }
.channel h3, .channel h4 { color: var(--navy); }
.channel a {
  display: block;
  width: fit-content;
  margin-top: var(--s-2);
  font-weight: 600;
  color: var(--teal-ink);
  word-break: break-word;
}
.channel a:hover { color: var(--teal-dk); text-decoration: underline; }
.channel p { color: var(--slate); font-size: var(--t-sm); margin-top: var(--s-2); }

.form-panel {
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--white);
  border: 1px solid var(--mist-dk);
  border-top: 3px solid var(--teal);
  border-radius: var(--edge);
  box-shadow: 0 18px 42px rgba(11, 31, 58, 0.07);
}

.field { margin-bottom: var(--s-5); }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.field .req { color: var(--teal-ink); }

/* Honeypot: hidden from users but in the HTML for bots */
.hp {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.control {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid #C3D0DC;
  border-radius: var(--edge);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.control::placeholder { color: var(--slate-lt); }
.control:hover { border-color: #A8B9C7; }
.control:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 138, 138, 0.16);
}
textarea.control { resize: vertical; min-height: 7rem; }
select.control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7785' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

/* Invalid styling only after a submit attempt, so fields aren't red on load. */
.form-panel.was-submitted .control:invalid {
  border-color: #C2453B;
  box-shadow: 0 0 0 3px rgba(194, 69, 59, 0.12);
}

.consent { font-size: var(--t-xs); color: var(--slate); margin-bottom: var(--s-5); }

.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--edge);
  font-size: var(--t-sm);
  border-left: 3px solid var(--teal);
  background: var(--mist);
  color: var(--ink);
}
.form-status[hidden] { display: none; }
.form-status--error { border-left-color: #C2453B; background: #FBEDEC; }

/* Success panel — shown after a successful form submission */
.form-success {
  text-align: center;
  padding: var(--s-8) var(--s-6);
  background: var(--white);
  border: 1px solid var(--mist-dk);
  border-top: 3px solid var(--teal);
  border-radius: var(--edge);
  box-shadow: 0 18px 42px rgba(11, 31, 58, 0.07);
}
.form-success[hidden] { display: none; }
.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal-ink);
  stroke-width: 2.5;
}
.form-success h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: var(--s-3);
}
.form-success p {
  font-size: var(--t-base);
  color: var(--slate);
  max-width: 48ch;
  margin: 0 auto var(--s-6);
  line-height: 1.6;
}
.form-success .btn {
  min-width: 220px;
}

/* Mobile adjustments */
@media (max-width: 599px) {
  .form-success {
    padding: var(--s-6) var(--s-4);
  }
  .form-success__icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--s-4);
  }
  .form-success h3 {
    font-size: var(--t-lg);
  }
  .form-success p {
    font-size: var(--t-sm);
  }
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--abyss);
  color: var(--on-dark-soft);
  padding-block: var(--s-8) var(--s-5);
  border-top: 2px solid var(--teal);
}
.footer__top {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__top { grid-template-columns: 2fr 1fr 1.2fr 1fr; } }

.footer__brand { display: inline-flex; margin-bottom: var(--s-4); }
.footer__brand img { height: 56px; width: auto; }
.footer__tag { font-size: var(--t-sm); max-width: 34ch; }

.footer h3, .footer h4 {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--s-4);
  letter-spacing: 0;
}
.footer li + li { margin-top: 0.6rem; }
.footer li { font-size: var(--t-sm); }
.footer a { transition: color 0.2s var(--ease); word-break: break-word; }
.footer a:hover { color: var(--beacon); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  color: #7D91A4;
}

/* --------------------------------------------------------------------------
   13. Motion
   --------------------------------------------------------------------------
   One orchestrated moment only: the hero settles on load. Sections do not
   each fade-and-slide on scroll — that reads as boilerplate.
   -------------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__inner > * {
  animation: rise 0.7s var(--ease) both;
}
.hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.13s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.21s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.29s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .topbar, .masthead, .burger, .btns, .form-panel { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .band { padding-block: 1rem; }
  .band--deep, .band--abyss, .footer { background: #fff !important; color: #000 !important; }
  /* The footer lockup is white artwork; on a white sheet it would vanish.
     brightness(0) knocks it to solid black and leaves the alpha alone. */
  .footer__brand img { filter: brightness(0); }
}