/* ============================================================
   Marine sector — "bridge and chart".
   Navy horizon gradient, chart-contour linework, brass accent, a recurring waterline divider.
   Namespaced `.sct-mr-*`. Loaded only by /sectors/marine via its extraStyles.

   Contrast note (WCAG relative-luminance formula, computed not estimated):
   - Hero panel breadcrumbs sit on the flat `--mr-navy` → `--mr-sea` gradient (#0b2545 → #123a63,
     no photo). `.crumbs a` at rgba(232,240,248,.8) with `opacity: 1` measures 7.06:1 on mr-sea
     (the lighter, harder stop) and 8.83:1 on mr-navy. `[aria-current='page']` uses solid
     `--mr-foam` (#e8f0f8): 10.08:1 on mr-sea, 10.00:1 on mr-navy. Both stops checked because the
     gradient runs the full height of the panel and text can land anywhere in it.
   - The statement band's eyebrow (`--mr-brass` #c8a15a) sits on a gradient over
     marine-weather-deck.jpg. The photo's single brightest pixel (sampled across the full built
     JPEG) is rgb(231,238,244). Composited under the gradient's lighter (100%) stop at the
     original .93 alpha that pixel let the background reach rgb(32.9,70.6,109.1) — brass measures
     only 3.997:1 there, failing 4.5:1 (it passed only at the darker 0% stop, 5.308:1). Raising
     both stops to .99 alpha drops the same worst-case composite to rgb(20.1,59.8,100.5): brass now
     measures 4.68:1 at the former failing stop and 6.22:1 at the other — both clear 4.5:1, and the
     fix holds regardless of which pixel of the photo ends up behind the text.
   ============================================================ */

.sct-mr-hero,
.sct-mr-statement,
.sct-mr-conv,
.sct-mr-loads,
.sct-mr-intro,
.sct-mr-marks {
  --mr-navy: #0b2545;
  --mr-sea: #123a63;
  --mr-brass: #c8a15a;
  /* Darker bronze used wherever brass sits on a light background (white/pale cards, not the navy
     panels). True brass only measures ~2.4:1 on white — nowhere near the 4.5:1 text / 3:1 graphic
     minimum — so small text and meaningful icons/lines on light ground use this instead. */
  --mr-brass-ink: #8a6a35;
  --mr-foam: #e8f0f8;
  --mr-rule: rgba(232, 240, 248, .18);
}

/* ---------- hero ---------- */
.sct-mr-hero__panel {
  background: linear-gradient(180deg, var(--mr-navy) 0%, var(--mr-sea) 100%);
  color: var(--mr-foam); padding-block: 34px clamp(46px, 5vw, 74px);
}
/* Copy left, photograph right — the same split the Datacenters hero uses. The photograph sits
   inside the navy panel rather than below it, so the waterline stays the panel's closing edge. */
.sct-mr-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.sct-mr-hero__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }
/* `opacity: 1` matters here, not just the color: the base `.crumbs a { opacity: .65 }` in
   site.css is inherited unless reset, and it multiplies with whatever alpha this rule sets,
   silently halving the effective contrast. See the file header for the measured ratios. */
.sct-mr-hero__panel .crumbs a { color: rgba(232, 240, 248, .8); opacity: 1; }
.sct-mr-hero__panel .crumbs [aria-current='page'] { color: var(--mr-foam); border-bottom-color: rgba(232, 240, 248, .7); }
.sct-mr-hero__panel .crumbs__sep { color: rgba(232, 240, 248, .5); }
.sct-mr-hero__eyebrow { color: var(--mr-brass); }
.sct-mr-hero__title {
  font-size: clamp(36px, 5vw, 62px); line-height: 1.03; letter-spacing: -.035em;
  color: var(--mr-foam); margin: 14px 0 16px; max-width: 18ch;
}
.sct-mr-hero__intro { color: rgba(232, 240, 248, .84); }
.sct-mr-badge {
  display: inline-block; margin-top: 22px; padding: 7px 15px;
  border: 1px solid var(--mr-brass); border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mr-brass);
}
.sct-mr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* The waterline: the divider that recurs between every major band on this page. */
.sct-mr-waterline {
  height: 3px;
  background: linear-gradient(90deg, var(--mr-brass) 0%, rgba(200, 161, 90, .15) 55%, transparent 100%);
}

/* ---------- shared type ---------- */
.sct-mr-h {
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; line-height: 1.12;
  color: var(--mr-navy); margin: 12px 0 16px;
}

/* ---------- marks ---------- */
.sct-mr-marks__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; }
.sct-mr-marks__row li {
  display: flex; align-items: center; gap: 11px; padding: 20px 24px;
  border-left: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mr-navy);
}
.sct-mr-marks__row li:first-child { border-left: 0; }
/* Brass-ink, not brass: this icon sits on the section's white background. */
.sct-mr-marks__row svg { width: 19px; height: 19px; color: var(--mr-brass-ink); }

/* ---------- statement ---------- */
/* .93 alpha let the photo's brightest pixel push the gradient's lighter stop to 3.997:1 against
   the brass eyebrow — under 4.5:1 (see file header). Raised to .99: the same worst-case pixel now
   composites low enough that both stops clear 4.5:1, so the fix doesn't depend on where in the
   image the text happens to land. */
.sct-mr-statement {
  background:
    linear-gradient(180deg, rgba(11, 37, 69, .99) 0%, rgba(18, 58, 99, .99) 100%),
    url('/assets/images/marine-weather-deck.jpg') center/cover;
  color: var(--mr-foam);
}
.sct-mr-statement .sct-eyebrow { color: var(--mr-brass); }
.sct-mr-statement__h {
  font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.03em; line-height: 1.1;
  color: var(--mr-foam); max-width: 22ch; margin-bottom: 18px;
}
.sct-mr-statement__body {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7;
  color: rgba(232, 240, 248, .88); max-width: 62ch;
}
.sct-mr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sct-mr-chips li {
  padding: 8px 15px; border: 1px solid var(--mr-rule); border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--mr-foam);
}

/* ---------- conversion diagram ---------- */
.sct-mr-conv__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.sct-mr-diagram { width: 100%; height: auto; margin-top: 10px; }
.sct-mr-diagram rect { fill: #fff; stroke: var(--mr-sea); stroke-width: 1.5; }
.sct-mr-diagram text { font: 600 14px var(--font); fill: var(--mr-navy); }
/* Brass-ink, not brass: the diagram sits on the section's white background. */
.sct-mr-diagram path { stroke: var(--mr-brass-ink); stroke-width: 2; fill: none; }
.sct-mr-diagram marker path { fill: var(--mr-brass-ink); stroke: none; }
.sct-mr-conv__spec {
  display: inline-flex; align-items: baseline; gap: 12px; margin-top: 20px;
  padding: 12px 18px; border-radius: var(--radius-md); background: var(--ice);
}
.sct-mr-conv__spec span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-500);
}
.sct-mr-conv__spec strong { font-size: 20px; color: var(--mr-navy); }
.sct-mr-conv__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* ---------- onboard loads ---------- */
/* Flat panel fill, not the sitewide --band-light-low radial gradient: that gradient's inner stop
   (#acc5f2) is reachable inside this section and measures only 2.87:1 against --mr-brass-ink,
   failing both the 4.5:1 text and 3:1 graphic minimums for the counter numerals below. A flat
   colour makes the contrast a fixed, known value — --panel-fill checks at 4.85:1. */
.sct-mr-loads { background: var(--panel-fill); }
.sct-mr-loads__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
/* Vessel sections: stacked bands reading fore to aft, each divided by a waterline hairline. */
.sct-mr-loads__list { margin-top: 22px; border-top: 1px solid rgba(11, 37, 69, .16); }
.sct-mr-loads__list li {
  padding: 15px 0 15px 46px; position: relative;
  border-bottom: 1px solid rgba(11, 37, 69, .16);
  font-size: 16.5px; font-weight: 600; color: var(--mr-navy);
}
.sct-mr-loads__list li::before {
  counter-increment: mr-load; content: counter(mr-load, decimal-leading-zero);
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  /* Brass-ink, not brass: these numerals sit on the section's pale background. */
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mr-brass-ink);
}
.sct-mr-loads__list { counter-reset: mr-load; }
.sct-mr-loads__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* ---------- rail / reading / faq / related, in the marine key ---------- */
.sct-rail__heading, .sct-read__heading, .sct-faq__heading, .sct-rel__heading {
  font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.03em; color: #0b2545;
}
.sct-mr-conv, .sct-mr-intro { background: #fff; }
/* The systems rail carries the recurring chart-contour motif as a near-white wash over the
   generated depth-contour texture — present enough to read as "chart", faint enough that the
   navy heading/card content above keeps full contrast. */
.sct-rail--light {
  background:
    linear-gradient(0deg, rgba(247, 252, 255, .94), rgba(247, 252, 255, .94)),
    url('/assets/images/marine-chart-texture.jpg') center/cover;
}

@media (max-width: 860px) {
  .sct-mr-hero__grid, .sct-mr-conv__grid, .sct-mr-loads__grid { grid-template-columns: 1fr; }
  .sct-mr-marks__row li { border-left: 0; border-top: 1px solid var(--line); }
  .sct-mr-marks__row li:first-child { border-top: 0; }
}