/* ==========================================================================
   SACHDEVA GROUP — index.html industrial theme layer
   ==========================================================================
   Scope   : index.html only. Loaded LAST, after css/marine.css, so it wins
             on source order at equal specificity.
   Method  : css/marine.css keeps every legacy colour inside its :root block
             (lines 9-26), so redefining those tokens here rethemes the whole
             marine layer at once instead of rule by rule. Section-level rules
             below only handle what tokens cannot express: rhythm, depth,
             material and motion.
   Palette : ink #071a2e / panel #0a2340 / cyan #22b3e6-#35c6f4 — the same
             system as the header (.sgh-*) and footer (.sgf-*).
             Amber #ffad18 survives as the SECONDARY accent only: it is the
             colour of the wheel in the logo and reads as a safety/hazard
             signal, which is right for a yard. Cyan leads, amber punctuates.
   ========================================================================== */

/* ==========================================================================
   1. Token overrides — rethemes every .mrn-* rule in marine.css
   ========================================================================== */

:root {
    /* — structural ink — */
    --navy: #0d2947;
    /* was #00008e */
    --navy-deep: #071a2e;
    /* was #050a2e — header/footer ink */
    --navy-ink: #04121f;
    /* was #03061c */

    /* — accent: cyan replaces teal — */
    --teal: #1195cf;
    /* was #017280 */
    --teal-light: #22b3e6;
    /* was #0a9fb0 */
    --aqua: #35c6f4;
    /* was #b2ecff */

    /* — amber kept, slightly deepened so it sits on navy — */
    --gold: #ffad18;
    --gold-light: #ffc247;
    --gold-dark: #d98b00;

    /* — neutrals — */
    /* --grey paints .mrn-lead, the About checklist and the Process step copy on
       white. The footer's #a7bbcf is tuned for #071a2e and would read 1.9:1
       here; #4a6076 holds ~7:1 and keeps the navy cast. */
    --grey: #4a6076;
    --grey-soft: #eef3f8;

    /* — gradients — */
    --grad-brand: linear-gradient(135deg, #0a2036 0%, #103254 45%, #2a7fc9 100%);
    --grad-brand-rev: linear-gradient(135deg, #2a7fc9 0%, #103254 55%, #0a2036 100%);
    --grad-gold: linear-gradient(135deg, #ffad18 0%, #ffc247 100%);
    --grad-deep: linear-gradient(160deg, #04121f 0%, #0a2340 52%, #123a63 100%);

    /* — new tokens this layer introduces — */
    --ink: #071a2e;
    --panel: #0a2340;
    --cyan: #22b3e6;
    --cyan-bright: #35c6f4;
    --cyan-deep: #1195cf;
    --cyan-tint: rgba(34, 179, 230, .12);
    --hairline: rgba(255, 255, 255, .09);
    --hairline-dark: rgba(7, 26, 46, .10);
    --body-on-dark: #a7bbcf;
    --body-on-light: #4a6076;
    --heading-on-light: #071a2e;
    --font-display: "Oswald", sans-serif;
    --font-body: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
    --e-out: cubic-bezier(.16, 1, .3, 1);
    --e-bounce: cubic-bezier(.34, 1.56, .64, 1);

    /* depth ramp — one shadow language for the whole page */
    --lift-1: 0 10px 28px -18px rgba(4, 18, 31, .55);
    --lift-2: 0 22px 48px -26px rgba(4, 18, 31, .65);
    --lift-3: 0 34px 70px -30px rgba(4, 18, 31, .78);
    --glow-cyan: 0 22px 50px -26px rgba(34, 179, 230, .85);
}

/* ==========================================================================
   2. Section rhythm and ground
   Three grounds only — light, soft, dark — so the page reads as bands of
   material rather than a stack of unrelated blocks.
   ========================================================================== */

.mrn-section {
    padding: 118px 0;
    position: relative;
}

.mrn-section--tight {
    padding: 78px 0;
}

.mrn-light {
    background: #ffffff;
    color: var(--body-on-light);
}

.mrn-soft {
    background: linear-gradient(180deg, #f4f8fc 0%, #eaf1f8 100%);
    color: var(--body-on-light);
}

.mrn-dark {
    background: var(--ink);
    color: var(--body-on-dark);
}

/* engineering-drawing grid, barely there — the industrial cue that costs
   nothing and instantly stops a section reading as a generic SaaS block */
.mrn-soft::before,
.mrn-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-line, rgba(7, 26, 46, .05)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line, rgba(7, 26, 46, .05)) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
    z-index: 0;
}

.mrn-dark {
    --grid-line: rgba(53, 198, 244, .07);
}

.mrn-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 420px at 12% 0%, rgba(34, 179, 230, .16), transparent 68%),
        radial-gradient(620px 380px at 92% 100%, rgba(17, 149, 207, .14), transparent 70%);
    z-index: 0;
}

.mrn-section > .mrn-container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   3. Type — measured, industrial, consistently aligned
   ========================================================================== */

.mrn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--cyan-deep);
    background: none;
    padding: 0;
    border: 0;
}

.mrn-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), rgba(34, 179, 230, 0));
    flex: 0 0 auto;
}

.mrn-dark .mrn-eyebrow,
.mrn-cta .mrn-eyebrow {
    color: var(--cyan-bright);
}

.mrn-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.1;
    letter-spacing: .2px;
    color: var(--heading-on-light);
    margin: 0 0 20px;
}

.mrn-dark .mrn-title,
.mrn-cta h2 {
    color: #ffffff;
}

/* marine.css:141 clips a gradient to these words with
   -webkit-text-fill-color: transparent, so `color` here is inert — the only
   way to recolour them is to re-declare the gradient. The inherited amber
   measured 1.9:1 on white, which fails even the large-text threshold. */
.mrn-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--cyan-deep) 0%, var(--navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mrn-dark .mrn-title em,
.mrn-cta h2 em {
    background: linear-gradient(135deg, var(--cyan-bright) 0%, #8fdcf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mrn-lead {
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.78;
    color: var(--body-on-light);
    margin: 0;
}

.mrn-dark .mrn-lead {
    color: var(--body-on-dark);
}

/* centred section heads get a real measure instead of running full width */
.mrn-center {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 66px;
}

.mrn-center .mrn-eyebrow::before {
    display: none;
}

.mrn-center .mrn-lead {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   4. Buttons — one shape language
   ========================================================================== */

.mrn-btn {
    font-family: var(--font-display);
    font-size: 13.5px;
    letter-spacing: 2.4px;
    padding: 17px 36px;
}

.mrn-btn--gold {
    background: var(--grad-gold);
    color: #2a1a00;
    box-shadow: 0 18px 34px -18px rgba(255, 173, 24, .95);
}

.mrn-btn--gold:hover {
    box-shadow: 0 24px 44px -18px rgba(255, 173, 24, 1);
}

.mrn-btn--navy {
    background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--cyan-deep) 100%);
    color: #04263f;
    box-shadow: var(--glow-cyan);
}

.mrn-btn--navy:hover {
    color: #04263f;
    box-shadow: 0 28px 56px -26px rgba(34, 179, 230, 1);
}

.mrn-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .28);
    color: #ffffff;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mrn-btn--ghost:hover {
    border-color: var(--cyan-bright);
    color: var(--cyan-bright);
    background: rgba(34, 179, 230, .10);
}

/* ==========================================================================
   5. Depth vocabulary
   marine.js already ships `data-mrn-tilt` (real rotateX/rotateY on pointer,
   disabled under prefers-reduced-motion) and `data-mrn-parallax`. It writes
   an inline transform on the tilted node, so a tilted element must NEVER take
   its hover lift from `transform` — the lift comes from shadow, ring and
   inner translateZ instead.
   ========================================================================== */

.d3-stage {
    perspective: 1100px;
}

.d3-card {
    transform-style: preserve-3d;
    transition: box-shadow .5s var(--e-out), border-color .5s var(--e-out);
    will-change: transform;
}

.d3-card > * {
    transform: translateZ(0);
}

.d3-pop {
    transform: translateZ(38px);
}

.d3-pop-sm {
    transform: translateZ(18px);
}

/* cyan edge that sweeps across a panel on hover */
.edge-sweep {
    position: relative;
    isolation: isolate;
}

.edge-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, transparent 20%, var(--cyan-bright) 50%, transparent 80%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s var(--e-out), background-position 1s var(--e-out);
    pointer-events: none;
    z-index: 3;
}

.edge-sweep:hover::after {
    opacity: 1;
    background-position: -30% 0;
}

/* hazard tape — a yard signal, used sparingly as a 4px rule */
.hazard-rule {
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(135deg, var(--gold) 0 10px, #1a1205 10px 20px);
    opacity: .85;
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .edge-sweep::after,
    .d3-card,
    .d3-pop,
    .d3-pop-sm {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   7. Responsive rhythm
   ========================================================================== */

@media (max-width: 991px) {
    .mrn-section {
        padding: 84px 0;
    }

    .mrn-section--tight {
        padding: 60px 0;
    }

    .mrn-center {
        margin-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .mrn-section {
        padding: 64px 0;
    }

    .mrn-center {
        margin-bottom: 38px;
    }

    .mrn-btn {
        padding: 15px 28px;
        font-size: 12.5px;
    }
}


/* ==========================================================================
   SECTION — HERO  (.mrn-hero, index.html 173-240)
   ==========================================================================
   Answers marine.css 312-704. That range keeps eight rgba() literals of the
   OLD palette that no token can reach, so every affected property is
   re-declared here in full:
     marine.css 354-356  .mrn-hero__scrim        background  (old navy/teal/ink)
     marine.css 364      .mrn-hero__scrim::after background  (old navy/teal + amber)
     marine.css 404-406  .mrn-hero__rays         background  (old aqua + old gold)
     marine.css 590      .mrn-hero__rail         background  (old navy/teal)
   Intent: the fold reads as the front door of a working yard — footage pushed
   into a navy duotone, a scrim heavy enough that the type always clears it,
   a survey grid over the sky, and the stat rail rebuilt as an instrument
   panel fused to the bottom edge. Cyan leads throughout; the single amber
   moment in the fold is the gold primary CTA.
   ========================================================================== */

.mrn-hero {
    /* the header is in normal flow above the hero (it only goes fixed once
       .sticky_menu lands), so a flat 100vh pushed the stat rail below the
       fold on every laptop. Rebase on the viewport minus the bar. */
    --sg-head: 104px;
    --sg-rail-h: 116px;

    position: relative;
    isolation: isolate;
    min-height: calc(100vh - var(--sg-head));
    min-height: max(620px, calc(100svh - var(--sg-head)));
    background: var(--navy-ink);
}

/* --------------------------------------------------------------------------
   1. Footage — navy duotone, overscanned so it can carry parallax
   -------------------------------------------------------------------------- */

.mrn-hero__media {
    inset: -12% 0;
    overflow: hidden;
    z-index: 0;
}

.mrn-hero__media video,
.mrn-hero__media img {
    /* desaturate + darken so the footage sits inside the palette instead of
       fighting it, and so the sky in the poster frame stops blowing out */
    filter: saturate(.60) contrast(1.08) brightness(.76);
}

/* hue-only wash: keeps the luminance of the plate, steel and sea but drags
   every colour in the frame toward the panel navy */
.mrn-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(158deg, var(--panel) 0%, var(--ink) 100%);
    mix-blend-mode: color;
    opacity: .58;
}

@supports not (mix-blend-mode: color) {
    .mrn-hero__media::after {
        opacity: .20;
    }
}

/* --------------------------------------------------------------------------
   2. Scrim — re-declared off the new palette (answers marine.css 354-356)
   The copy column is left-aligned, so the scrim ramps hardest on the left.
   Worst case (pure white video frame) the copy sits on ~#2f3a46: white body
   text clears 11:1, the #c2d5e6 sub clears 7.6:1.
   -------------------------------------------------------------------------- */

.mrn-hero__scrim {
    background:
        linear-gradient(90deg, rgba(4, 18, 31, .88) 0%, rgba(4, 18, 31, .70) 30%, rgba(4, 18, 31, .30) 64%, rgba(4, 18, 31, .06) 100%),
        radial-gradient(120% 95% at 10% 12%, rgba(10, 35, 64, .80) 0%, rgba(10, 35, 64, 0) 62%),
        radial-gradient(88% 82% at 94% 88%, rgba(17, 149, 207, .32) 0%, rgba(17, 149, 207, 0) 66%),
        linear-gradient(180deg, rgba(4, 18, 31, .84) 0%, rgba(4, 18, 31, .30) 30%, rgba(4, 18, 31, .46) 62%, rgba(4, 18, 31, .94) 100%);
}

/* answers marine.css 364. The old drift used mix-blend-mode:screen, which
   LIGHTENED the frame under the headline — the one place contrast had to
   hold. Normal blend, cyan not amber, and masked off the copy column. */
.mrn-hero__scrim::after {
    background: linear-gradient(115deg, rgba(10, 35, 64, .58) 0%, rgba(17, 149, 207, .22) 34%, rgba(34, 179, 230, .16) 62%, rgba(10, 35, 64, .58) 100%);
    background-size: 300% 300%;
    mix-blend-mode: normal;
    opacity: .55;
    animation-duration: 26s;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 56%);
}

/* --------------------------------------------------------------------------
   3. Light shafts — answers marine.css 404-406 (old aqua #b2ecff, old gold)
   -------------------------------------------------------------------------- */

.mrn-hero__rays {
    background:
        linear-gradient(97deg, transparent 45%, rgba(53, 198, 244, .12) 49%, transparent 53%),
        linear-gradient(104deg, transparent 59%, rgba(34, 179, 230, .08) 63%, transparent 67%),
        linear-gradient(88deg, transparent 27%, rgba(159, 232, 255, .06) 31%, transparent 35%);
    opacity: .9;
    animation-duration: 20s;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

/* --------------------------------------------------------------------------
   4. Survey grid + bottom fusion — the engineering-drawing cue
   -------------------------------------------------------------------------- */

/* plotted grid, confined by mask to the open sky top-right so it never
   crosses the headline */
.mrn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(53, 198, 244, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(53, 198, 244, .07) 1px, transparent 1px);
    background-size: 92px 92px;
    -webkit-mask-image: radial-gradient(118% 96% at 97% 10%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 76%);
    mask-image: radial-gradient(118% 96% at 97% 10%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 76%);
}

/* grounds the instrument rail into the frame instead of letting it float */
.mrn-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: calc(var(--sg-rail-h) + 220px);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 18, 31, 0) 0%, rgba(4, 18, 31, .42) 46%, rgba(4, 18, 31, .84) 100%);
}

/* --------------------------------------------------------------------------
   5. Copy block — tighter vertical rhythm
   -------------------------------------------------------------------------- */

.mrn-hero__inner {
    z-index: 5;
    padding: clamp(72px, 9vh, 118px) 0 calc(var(--sg-rail-h) + clamp(48px, 7vh, 92px));
    perspective: 1200px;
}

/* --- spec plate (was a rounded pill with a stray Tailwind-green dot) --- */
.mrn-hero__badge {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(7, 26, 46, .60);
    border: 1px solid var(--hairline);
    box-shadow: var(--lift-1), inset 0 1px 0 rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 3.2px;
    margin-bottom: 26px;
    opacity: 0;
    animation: sgHeroFadeUp .8s var(--e-out) .08s forwards;
}

.mrn-hero__badge b {
    width: 40px;
    height: 40px;
    border-radius: 0;
    border-right: 1px solid var(--hairline);
    background: linear-gradient(150deg, var(--cyan-bright) 0%, var(--cyan-deep) 100%);
    color: #04263f;
    font-size: 15px;
}

.mrn-hero__badge span {
    padding: 0 20px 0 34px;
    color: #dcebf7;
}

/* live-status dot: cyan, not the off-palette #4ade80 marine.css shipped */
.mrn-hero__badge span::before {
    left: 20px;
    background: var(--cyan-bright);
    box-shadow: 0 0 0 0 rgba(53, 198, 244, .75);
    animation: sgHeroPulse 2.6s ease-out infinite;
}

@keyframes sgHeroPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(53, 198, 244, .7);
    }

    70% {
        box-shadow: 0 0 0 11px rgba(53, 198, 244, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(53, 198, 244, 0);
    }
}

/* --- kinetic title --- */
.mrn-hero__title {
    font-size: clamp(38px, 5.6vw, 78px);
    line-height: 1.04;
    letter-spacing: -.8px;
    max-width: 16ch;
    margin: 0 0 20px;
    text-shadow: 0 18px 46px rgba(4, 18, 31, .6);
}

/* the clip box was flush to the glyph box, shaving the side bearing of the
   last letter in each word */
.mrn-hero__title .mrn-word {
    padding-right: .05em;
    margin-right: -.05em;
}

/* weightier, slower, and without the 6deg wobble — a plate being craned into
   position, not a bouncy reveal. New keyframe name so marine.css keeps its own. */
.mrn-hero__title .mrn-word > span {
    transform: translateY(112%);
    animation-name: sgHeroWordUp;
    animation-duration: .86s;
    animation-timing-function: var(--e-out);
}

@keyframes sgHeroWordUp {
    from {
        transform: translateY(112%);
    }

    to {
        transform: translateY(0);
    }
}

/* cyan leads: the old highlight ran gold -> old-aqua, which was both a second
   amber moment in the fold and the lowest-contrast type on the page */
.mrn-hero__title .mrn-hl {
    background: linear-gradient(96deg, var(--cyan-bright) 0%, #a3eaff 52%, var(--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* the gold bar sat ON TOP of the gradient-clipped glyphs (it paints after the
   text) and was clipped by .mrn-word's overflow. Replaced with a measured
   rule under the whole headline. */
.mrn-hero__title .mrn-hl::after {
    display: none;
}

.mrn-hero__title::after {
    content: "";
    display: block;
    width: 132px;
    height: 3px;
    margin-top: 28px;
    background: linear-gradient(90deg, var(--cyan-bright) 0%, rgba(53, 198, 244, 0) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    animation: sgHeroRule .9s var(--e-out) .92s forwards;
}

@keyframes sgHeroRule {
    to {
        transform: scaleX(1);
    }
}

.mrn-hero__sub {
    font-family: var(--font-body);
    font-size: clamp(14.5px, 1.15vw, 17px);
    line-height: 1.8;
    font-weight: 400;
    color: #c2d5e6;
    max-width: 56ch;
    margin: 0 0 36px;
    text-shadow: 0 2px 18px rgba(4, 18, 31, .7);
    animation-name: sgHeroFadeUp;
    animation-duration: .8s;
    animation-timing-function: var(--e-out);
    animation-delay: 1s;
}

.mrn-hero__actions {
    gap: 14px;
    animation-name: sgHeroFadeUp;
    animation-duration: .8s;
    animation-timing-function: var(--e-out);
    animation-delay: 1.18s;
}

@keyframes sgHeroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   6. Buttons — gold stays the one amber moment, ghost turns cyan
   Scoped to BOTH hero components. index.html's fold is .mrn-hero; the inner
   page banner is .mrnp-hero, and about_us.html puts the same two buttons in
   it. Without the second selector those fell back to the plain .mrn-btn--gold
   / --ghost at lines 255 and 276, which are a different colour and a different
   height — the fold and the About banner did not match.
   about_us.html is the only inner page with buttons in its banner today; any
   that gains them inherits the same treatment.
   -------------------------------------------------------------------------- */

/* the foundation gives --ghost a 1px border and --gold none, so the two
   buttons in the fold were 2px different in height. Equalise with a
   transparent border. */
.mrn-hero .mrn-btn,
.mrnp-hero .mrn-btn {
    border: 1px solid transparent;
    padding: 16px 34px;
    font-size: 13px;
    letter-spacing: 2.6px;
}

/* marine.css 215-227 slides --grad-brand (navy) up over the gold button on
   hover, which threw away the fold's only amber. Keep it amber, brighten it. */
.mrn-hero .mrn-btn--gold,
.mrnp-hero .mrn-btn--gold {
    color: #2a1a00;
    border-color: rgba(255, 194, 71, .55);
    box-shadow: 0 18px 40px -18px rgba(255, 173, 24, .95);
}

.mrn-hero .mrn-btn--gold::before,
.mrnp-hero .mrn-btn--gold::before {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
}

.mrn-hero .mrn-btn--gold:hover,
.mrnp-hero .mrn-btn--gold:hover,
.mrn-hero .mrn-btn--gold:focus,
.mrnp-hero .mrn-btn--gold:focus {
    color: #2a1a00;
    border-color: rgba(255, 194, 71, .9);
    box-shadow: 0 26px 54px -20px rgba(255, 173, 24, 1);
}

.mrn-hero .mrn-btn--ghost,
.mrnp-hero .mrn-btn--ghost {
    color: #dff4ff;
    border-color: rgba(53, 198, 244, .5);
    background: rgba(34, 179, 230, .07);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* marine.css 229 fills the ghost button with gold on hover — cyan instead */
.mrn-hero .mrn-btn--ghost::before,
.mrnp-hero .mrn-btn--ghost::before {
    background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--cyan-deep) 100%);
}

.mrn-hero .mrn-btn--ghost:hover,
.mrnp-hero .mrn-btn--ghost:hover,
.mrn-hero .mrn-btn--ghost:focus,
.mrnp-hero .mrn-btn--ghost:focus {
    color: #04263f;
    border-color: var(--cyan-bright);
    background: rgba(34, 179, 230, .07);
    box-shadow: 0 22px 46px -24px rgba(34, 179, 230, .9);
}

/* css/style.css kills outlines globally (a:focus{outline:0}); marine.css 233
   also hands a -4px lift to plain :focus, so a mouse click left the button
   parked mid-air with no ring. Ring for keyboards, nothing for mice. */
.mrn-hero .mrn-btn:focus-visible,
.mrnp-hero .mrn-btn:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
}

.mrn-hero .mrn-btn:focus:not(:focus-visible):not(:hover),
.mrnp-hero .mrn-btn:focus:not(:focus-visible):not(:hover) {
    transform: none;
}

/* --------------------------------------------------------------------------
   7. Stat rail — instrument panel (answers marine.css 590)
   -------------------------------------------------------------------------- */

.mrn-hero__rail {
    z-index: 6;
    background: linear-gradient(180deg, rgba(4, 18, 31, .58) 0%, rgba(4, 18, 31, .90) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -30px 60px -46px rgba(4, 18, 31, .95);
    animation-name: sgHeroFadeUp;
    animation-duration: .9s;
    animation-timing-function: var(--e-out);
    animation-delay: 1.35s;
}

/* cyan datum line along the panel edge */
.mrn-hero__rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(53, 198, 244, 0) 0%, rgba(53, 198, 244, .62) 20%, rgba(53, 198, 244, .18) 58%, rgba(53, 198, 244, 0) 100%);
}

.mrn-hero__rail-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--sg-rail-h);
    padding: 0 24px;
    text-align: left;
    transition: background .5s var(--e-out);
}

/* first cell lines its tick and numeral up with the headline above it */
.mrn-hero__rail-item:first-child {
    padding-left: 0;
}

.mrn-hero__rail-item:last-child {
    padding-right: 0;
}

/* gauge tick on the panel edge, fills the cell width on hover */
.mrn-hero__rail-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--cyan-bright);
    transform: scaleX(.16);
    transform-origin: left center;
    transition: transform .6s var(--e-out);
    pointer-events: none;
}

.mrn-hero__rail-item:first-child::before {
    left: 0;
}

.mrn-hero__rail-item:last-child::before {
    right: 0;
}

.mrn-hero__rail-item:hover::before {
    transform: scaleX(1);
}

/* dashed hairline dividers — drawing-sheet, not table-border */
.mrn-hero__rail-item + .mrn-hero__rail-item {
    border-left: 0;
}

.mrn-hero__rail-item + .mrn-hero__rail-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 1px;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 5px, rgba(255, 255, 255, 0) 5px 10px);
}

/* four gold numerals were four amber moments; the fold gets one, and it is
   the CTA. Numbers read as data: white, tabular, Oswald, unit in cyan. */
.mrn-hero__rail-item strong {
    font-family: var(--font-display);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .5px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    transition: color .4s var(--e-out);
}

/* marine.css 604 sets `.mrn-hero__rail-item span { display:block }`, which also
   catches the <span data-count> INSIDE <strong> — so the "+" and "%" were
   being pushed onto a line of their own under every figure. Put the numeral
   and its unit back on one baseline. */
.mrn-hero__rail-item strong > span,
.mrn-hero__rail-item strong > i {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.mrn-hero__rail-item strong > span {
    color: inherit;
}

.mrn-hero__rail-item strong > i {
    margin-left: 1px;
    font-style: normal;
    color: var(--cyan-bright);
}

/* label — direct child only, so it never reaches back into <strong> */
.mrn-hero__rail-item > span {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #9fb6cc;
}

/* answers the amber wash at marine.css 588 — cyan, plus the tick filling */
.mrn-hero__rail-item:hover {
    background: rgba(34, 179, 230, .10);
}

.mrn-hero__rail-item:hover strong {
    color: var(--cyan-bright);
}

/* --------------------------------------------------------------------------
   8. Scroll cue — a plumb line, parked clear of the rail
   -------------------------------------------------------------------------- */

.mrn-hero .mrn-scrollcue {
    bottom: calc(var(--sg-rail-h) + 30px);
    width: 1px;
    height: 56px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(53, 198, 244, 0) 0%, rgba(53, 198, 244, .5) 32%, rgba(53, 198, 244, 0) 100%);
}

.mrn-hero .mrn-scrollcue::after {
    left: 50%;
    top: 0;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--cyan-bright);
    box-shadow: 0 0 12px rgba(53, 198, 244, .95);
    animation: sgHeroCue 2.4s var(--e-out) infinite;
}

@keyframes sgHeroCue {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    28% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

/* <=1200px — layout unchanged (4-up rail, left-aligned copy). Only the
   instrument panel gets shorter and the cells tighter, and marine.css's own
   1100px switch to a 2-up rail is held off until 991px so the rail and the
   scroll cue change together. */
@media (max-width: 1200px) {
    .mrn-hero {
        --sg-rail-h: 106px;
    }

    .mrn-hero__rail-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* marine.css 1913 draws a row rule on items 3-4 from its own 1100px
       breakpoint; with the rail still 4-up here that rule has nothing to
       separate, so it is withdrawn until the grid actually folds at 991px */
    .mrn-hero__rail-item:nth-child(n+3) {
        border-top: 0;
    }

    .mrn-hero__rail-item {
        padding: 0 18px;
    }

    .mrn-hero__rail-item::before {
        left: 18px;
        right: 18px;
    }

    .mrn-hero__rail-item > span {
        letter-spacing: 2.2px;
    }

    .mrn-hero__title {
        max-width: 18ch;
    }
}

/* <=991px — the rail folds to 2x2 (so its reserved height doubles), the
   dashed divider moves to a horizontal rule between the two rows, and the
   scroll cue is dropped because there is no longer room between the copy and
   the panel. Copy stays left-aligned; the scrim's horizontal ramp is
   flattened so the type still clears the frame at narrow widths. */
@media (max-width: 991px) {
    .mrn-hero {
        --sg-head: 78px;
        --sg-rail-h: 100px;
        min-height: calc(100vh - var(--sg-head));
        min-height: max(580px, calc(100svh - var(--sg-head)));
    }

    .mrn-hero__scrim {
        background:
            linear-gradient(90deg, rgba(4, 18, 31, .84) 0%, rgba(4, 18, 31, .66) 46%, rgba(4, 18, 31, .34) 100%),
            radial-gradient(120% 95% at 10% 12%, rgba(10, 35, 64, .78) 0%, rgba(10, 35, 64, 0) 66%),
            linear-gradient(180deg, rgba(4, 18, 31, .82) 0%, rgba(4, 18, 31, .36) 32%, rgba(4, 18, 31, .52) 60%, rgba(4, 18, 31, .96) 100%);
    }

    .mrn-hero__inner {
        padding: clamp(56px, 7vh, 88px) 0 calc((var(--sg-rail-h) * 2) + clamp(40px, 6vh, 64px));
    }

    .mrn-hero__rail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrn-hero__rail-item {
        padding: 0 20px;
    }

    .mrn-hero__rail-item:nth-child(odd) {
        padding-left: 0;
    }

    .mrn-hero__rail-item:nth-child(even) {
        padding-right: 0;
    }

    /* item 3 opens row 2, so it loses its vertical dashed divider */
    .mrn-hero__rail-item:nth-child(3)::after {
        display: none;
    }

    .mrn-hero__rail-item:nth-child(odd)::before {
        left: 0;
    }

    .mrn-hero__rail-item:nth-child(even)::before {
        right: 0;
    }

    /* answers marine.css 1913, which draws this rule in plain white */
    .mrn-hero__rail-item:nth-child(n+3) {
        border-top: 1px solid var(--hairline);
    }

    .mrn-hero .mrn-scrollcue {
        display: none;
    }

    .mrn-hero::before {
        background-size: 72px 72px;
    }
}

/* <=767px — copy stays a single left-aligned column, the two CTAs go
   full-bleed and stack, the rail keeps its 2x2 grid but shrinks to an 88px
   row, the survey grid and light shafts are pulled back so a small screen is
   not paying for effects it cannot show, and the media overscan is reduced. */
@media (max-width: 767px) {
    .mrn-hero {
        --sg-head: 76px;
        --sg-rail-h: 88px;
    }

    .mrn-hero__media {
        inset: -8% 0;
    }

    .mrn-hero__inner {
        padding: 54px 0 calc((var(--sg-rail-h) * 2) + 42px);
    }

    .mrn-hero::before {
        background-size: 56px 56px;
        opacity: .7;
    }

    .mrn-hero__rays {
        opacity: .5;
    }

    .mrn-hero__badge {
        font-size: 10px;
        letter-spacing: 2.4px;
        margin-bottom: 20px;
    }

    .mrn-hero__badge b {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .mrn-hero__badge span {
        padding: 0 14px 0 28px;
    }

    .mrn-hero__badge span::before {
        left: 14px;
    }

    .mrn-hero__title {
        font-size: clamp(31px, 8.6vw, 44px);
        line-height: 1.08;
        letter-spacing: -.4px;
        max-width: 100%;
    }

    .mrn-hero__title::after {
        width: 96px;
        margin-top: 20px;
    }

    .mrn-hero__sub {
        font-size: 14.5px;
        line-height: 1.72;
        margin-bottom: 28px;
    }

    .mrn-hero__actions {
        gap: 10px;
    }

    .mrn-hero__actions .mrn-btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: 15px 20px;
    }

    .mrn-hero__rail-item {
        padding: 0 14px;
    }

    .mrn-hero__rail-item strong {
        font-size: 26px;
    }

    .mrn-hero__rail-item > span {
        margin-top: 7px;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .mrn-hero__rail-item + .mrn-hero__rail-item::after {
        top: 18px;
        bottom: 18px;
    }
}

/* --------------------------------------------------------------------------
   10. Reduced motion
   marine.css 294-309 already zeroes durations with !important, but the hero's
   badge / sub / actions / rail all start at opacity:0, so they are only
   visible because an animation lands on them. Kill the animations and set the
   resting state explicitly instead of relying on that.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .mrn-hero__media video,
    .mrn-hero__media img,
    .mrn-hero__rays,
    .mrn-hero__scrim::after,
    .mrn-hero__badge span::before,
    .mrn-hero .mrn-scrollcue::after {
        animation: none;
        transform: none;
    }

    .mrn-hero__title .mrn-word > span {
        animation: none;
        transform: none;
    }

    .mrn-hero__title::after {
        animation: none;
        transform: scaleX(1);
    }

    .mrn-hero__badge,
    .mrn-hero__sub,
    .mrn-hero__actions,
    .mrn-hero__rail {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .mrn-hero .mrn-scrollcue::after {
        opacity: .9;
    }

    .mrn-hero__rail-item,
    .mrn-hero__rail-item::before,
    .mrn-hero__rail-item strong,
    .mrn-hero .mrn-btn {
        transition: none;
    }
}

/* ==========================================================================
   TICKER — status ribbon between hero and about
   ==========================================================================
   Root      : .mrn-ticker  (index.html 243-251)
   Replaces  : css/marine.css 705-760 (.mrn-ticker, __track, __item, i, b)
   Intent    : a status strip off a piece of yard equipment — flat ink ground,
               a measuring-rule tick scale along the bottom edge, Oswald
               uppercase set small and wide, cyan tick separators, hairline
               top and bottom, and ground-coloured edge fades so items enter
               and leave the strip instead of being guillotined at the
               viewport edge. Punctuation between two loud sections, so it
               deliberately spends NO amber: cyan is the only accent, and the
               amber budget stays with #about / .mrn-stats.
   Palette   : marine.css 705-760 carries no legacy rgba() literals — it runs
               on var(--grad-brand) and var(--gold-light), both of which do
               retheme. The defect there is choice of token, not hardcoding.
   ========================================================================== */

.mrn-ticker {
    /* fade width and strip height as local knobs, scoped to this root */
    --tick-fade: 96px;
    --tick-h: 54px;

    position: relative;
    isolation: isolate;
    display: block;
    padding: 0;
    overflow: hidden;

    /* flat ink ground + engineering rule: a minor tick every 28px and a
       major tick every 140px, both anchored to the bottom edge */
    background:
        linear-gradient(90deg, rgba(53, 198, 244, .30) 0 1px, transparent 1px) 0 100% / 140px 11px repeat-x,
        linear-gradient(90deg, rgba(53, 198, 244, .15) 0 1px, transparent 1px) 0 100% / 28px 6px repeat-x,
        linear-gradient(180deg, rgba(34, 179, 230, .08) 0%, rgba(34, 179, 230, 0) 65%),
        var(--ink);

    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 rgba(53, 198, 244, .14);
}

/* edge fades — painted in the ground colour, over the track (z 1) but under
   nothing else, so the ink ground and both hairlines stay intact at the ends */
.mrn-ticker::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 26, 46, 1) 0, rgba(7, 26, 46, .55) calc(var(--tick-fade) * .45), rgba(7, 26, 46, 0) var(--tick-fade)),
        linear-gradient(270deg, rgba(7, 26, 46, 1) 0, rgba(7, 26, 46, .55) calc(var(--tick-fade) * .45), rgba(7, 26, 46, 0) var(--tick-fade));
}

/* ---- track ---------------------------------------------------------------
   marine.css 717 already supplies `animation: mrnMarquee 32s linear infinite`
   and js/marine.js initMarquees() duplicates the innerHTML, so translateX(-50%)
   loops seamlessly. Only the tempo and the vertical metric change here.
--------------------------------------------------------------------------- */
.mrn-ticker__track {
    position: relative;
    z-index: 1;
    align-items: center;
    height: var(--tick-h);
    animation-duration: 46s;
    animation-timing-function: linear;
    will-change: transform;
}

.mrn-ticker:hover .mrn-ticker__track,
.mrn-ticker:focus-within .mrn-ticker__track {
    animation-play-state: paused;
}

/* ---- items ---------------------------------------------------------------
   marine.css shipped padding:0 26px + gap:22px, which puts 22px between a
   label and its separator but 52px between that separator and the next label.
   Left-padding only, with gap == padding, makes the rhythm even.
--------------------------------------------------------------------------- */
.mrn-ticker__item {
    gap: 30px;
    padding: 0 0 0 30px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--body-on-dark);
    /* #a7bbcf on #071a2e = 8.9:1 */
}

.mrn-ticker__item b {
    font-weight: 600;
    color: rgba(255, 255, 255, .96);
    /* 17:1 on ink */
}

/* the fa-circle dot becomes a measured cyan tick — the strip's one accent */
.mrn-ticker__item i {
    display: block;
    flex: 0 0 auto;
    width: 2px;
    height: 14px;
    font-size: 0;
    line-height: 0;
    border-radius: 1px;
    transform: skewX(-14deg);
    background: linear-gradient(180deg,
            rgba(34, 179, 230, 0) 0%,
            var(--cyan-bright) 26%,
            var(--cyan-bright) 74%,
            rgba(34, 179, 230, 0) 100%);
}

/* kill the FontAwesome glyph (css/font-awesome.min.css .fa-circle:before,
   specificity 0,1,1 — this selector is 0,1,2, so it wins on specificity alone) */
.mrn-ticker__item i::before {
    content: none;
}

/* ---- keyboard ------------------------------------------------------------
   css/style.css zeroes outlines on `a` only, so a plain ring works here.
   The strip becomes a focusable scroll region under reduced motion (below),
   and focusing it also pauses the loop via :focus-within above.
--------------------------------------------------------------------------- */
.mrn-ticker:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: -3px;
}

/* ==========================================================================
   TICKER — responsive
   1200px : fades and item rhythm tighten; type drops a notch. Still one line.
    991px : strip shortens to 48px, type to 12px/2.2px, ticks thin out, and
            the loop speeds up to 40s — the track is physically shorter at
            this type size, so the same duration would read as sluggish.
    767px : strip 44px, type 11.5px/1.8px, fade 44px so at least two items
            are legible at 360px wide, major tick scale drops to 100px, 34s.
   The layout never changes structure — it is a single line at every width;
   only the metric and the tempo scale.
   ========================================================================== */

@media (max-width: 1200px) {
    .mrn-ticker {
        --tick-fade: 72px;
    }

    .mrn-ticker__item {
        gap: 26px;
        padding-left: 26px;
        font-size: 12.5px;
        letter-spacing: 2.4px;
    }
}

@media (max-width: 991px) {
    .mrn-ticker {
        --tick-fade: 60px;
        --tick-h: 48px;
        background:
            linear-gradient(90deg, rgba(53, 198, 244, .26) 0 1px, transparent 1px) 0 100% / 120px 9px repeat-x,
            linear-gradient(90deg, rgba(53, 198, 244, .13) 0 1px, transparent 1px) 0 100% / 24px 5px repeat-x,
            linear-gradient(180deg, rgba(34, 179, 230, .08) 0%, rgba(34, 179, 230, 0) 65%),
            var(--ink);
    }

    .mrn-ticker__track {
        animation-duration: 40s;
    }

    .mrn-ticker__item {
        gap: 22px;
        padding-left: 22px;
        font-size: 12px;
        letter-spacing: 2.2px;
    }

    .mrn-ticker__item i {
        height: 12px;
    }
}

@media (max-width: 767px) {
    .mrn-ticker {
        --tick-fade: 44px;
        --tick-h: 44px;
        background:
            linear-gradient(90deg, rgba(53, 198, 244, .26) 0 1px, transparent 1px) 0 100% / 100px 8px repeat-x,
            linear-gradient(90deg, rgba(53, 198, 244, .12) 0 1px, transparent 1px) 0 100% / 22px 4px repeat-x,
            linear-gradient(180deg, rgba(34, 179, 230, .08) 0%, rgba(34, 179, 230, 0) 65%),
            var(--ink);
    }

    .mrn-ticker__track {
        animation-duration: 34s;
    }

    .mrn-ticker__item {
        gap: 18px;
        padding-left: 18px;
        font-size: 11.5px;
        letter-spacing: 1.8px;
    }

    .mrn-ticker__item i {
        height: 11px;
    }
}

/* ==========================================================================
   TICKER — reduced motion
   Continuous horizontal drift is the classic vestibular trigger and
   marine.css 717 runs it unconditionally. Stopping it alone would strand the
   items past the viewport edge with `overflow:hidden`, so the strip becomes a
   keyboard-reachable horizontal scroll region instead, and the edge fades are
   dropped because they would scroll away from the ends and obscure text.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mrn-ticker {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(53, 198, 244, .45) rgba(7, 26, 46, 0);
    }

    .mrn-ticker::after {
        display: none;
    }

    .mrn-ticker__track,
    .mrn-ticker:hover .mrn-ticker__track,
    .mrn-ticker:focus-within .mrn-ticker__track {
        animation: none;
        transform: none;
        will-change: auto;
    }
}

/* ==========================================================================
   SECTION: ABOUT  (#about)  — "the plate and the spec sheet"
   --------------------------------------------------------------------------
   Rebuilds index.html lines 254-312 on the new palette. Answers the old
   marine.css hardcoded literals that tokens cannot reach:
     marine.css:782  rgba(0,0,142,.55)   .mrn-figure__frame  box-shadow
     marine.css:799  rgba(0,0,142,.35) / rgba(1,114,128,.38)
                                         .mrn-figure__frame::after background
     marine.css:844  rgba(0,0,142,.75)   .mrn-figure__badge  box-shadow
     marine.css:883  rgba(1,114,128,.35) .mrn-figure__ring   border
     marine.css:926  rgba(1,114,128,.12) .mrn-about__points li::before shadow
   Also fixes marine.css:857 `.mrn-figure__badge span` leaking 11px/2.6px
   letter-spacing onto the `<span data-count="42">` inside `<strong>`, which
   is why the 42 currently renders at label size instead of headline size.
   Depends on markup patches A-C (image swap + registration marks + caption
   strip, spec-plate badge, spec-sheet header).
   ========================================================================== */

#about {
    /* section-scoped tokens only — no :root additions */
    --ab-mark: rgba(53, 198, 244, .58);
    --ab-rule: rgba(7, 26, 46, .11);
    --ab-ring: rgba(34, 179, 230, .34);
    overflow-x: clip;
    /* the dial ring and the spec plate hang past the container edge */
}

/* --- ground: a barely-there engineering grid weighted to the plate side --- */
#about::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(7, 26, 46, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(7, 26, 46, .05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 62% 80% at 22% 50%, #000 6%, transparent 74%);
    mask-image: radial-gradient(ellipse 62% 80% at 22% 50%, #000 6%, transparent 74%);
}

#about::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(700px 470px at 17% 60%, rgba(34, 179, 230, .07), transparent 70%);
}

/* ==========================================================================
   1. Grid
   ========================================================================== */

#about .mrn-about__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}

#about .mrn-figure {
    perspective: 1200px;
}

/* ==========================================================================
   2. The plate — squared industrial frame, cyan hairline ring, duotone scrim
   `data-mrn-tilt="9"` writes an INLINE transform on .mrn-figure__frame, so
   the frame takes its hover lift from shadow and ring only — never transform.
   ========================================================================== */

#about .mrn-figure__frame {
    /* a fixed plate ratio, not a stretch — 5:4 keeps ~70% of the panorama's
       width in frame, where filling the text column's height would crop it
       down to a portrait sliver */
    aspect-ratio: 5 / 4;
    min-height: 300px;
    border-radius: 4px;
    background: var(--navy-ink);
    /* answers marine.css:782 rgba(0,0,142,.55) */
    box-shadow:
        0 38px 78px -42px rgba(4, 18, 31, .74),
        inset 0 0 0 1px var(--ab-ring);
    transition:
        transform .45s var(--e-out),
        box-shadow .6s var(--e-out);
}

#about .mrn-figure:hover .mrn-figure__frame {
    box-shadow:
        0 54px 98px -40px rgba(4, 18, 31, .88),
        0 24px 54px -28px rgba(34, 179, 230, .52),
        inset 0 0 0 1px rgba(53, 198, 244, .66);
}

#about .mrn-figure__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
    /* navy duotone: desaturate the plate, then tint it back with the palette */
    filter: grayscale(.44) saturate(.86) contrast(1.06) brightness(.96);
    transform: scale(1.02);
    transition:
        filter .9s var(--e-out),
        transform 1.4s var(--e-out);
}

#about .mrn-figure:hover .mrn-figure__frame img {
    filter: grayscale(.10) saturate(1.02) contrast(1.04) brightness(1.02);
    transform: scale(1.055);
}

/* duotone + scrim — answers marine.css:799 old navy/teal literals */
#about .mrn-figure__frame::after {
    z-index: 2;
    opacity: 1;
    background:
        linear-gradient(180deg, rgba(4, 18, 31, .74) 0%, rgba(4, 18, 31, .26) 20%, rgba(4, 18, 31, 0) 44%, rgba(4, 18, 31, .26) 100%),
        linear-gradient(152deg, rgba(7, 26, 46, .44) 0%, rgba(7, 26, 46, .08) 46%, rgba(17, 149, 207, .30) 100%);
    transition: opacity .6s var(--e-out);
}

#about .mrn-figure:hover .mrn-figure__frame::after {
    opacity: .84;
}

/* glare sweep — kept, but slowed and narrowed so it reads as light on steel */
#about .mrn-figure__frame::before {
    left: -70%;
    width: 38%;
    background: linear-gradient(100deg,
            transparent,
            rgba(255, 255, 255, .20) 46%,
            rgba(53, 198, 244, .16) 62%,
            transparent);
    animation: abPlateGlare 11s var(--e-out) infinite;
}

@keyframes abPlateGlare {

    0%,
    74% {
        left: -70%;
    }

    100% {
        left: 132%;
    }
}

/* --- corner registration marks (markup patch A: span.ab-reg) --- */
#about .ab-reg {
    position: absolute;
    inset: 58px 16px 16px;
    z-index: 4;
    pointer-events: none;
    opacity: .66;
    transition: opacity .55s var(--e-out);
    background-repeat: no-repeat;
    /* three corners only — on a real drawing sheet the fourth is where the
       title block sits, and here that is exactly where the spec plate lands */
    background-image:
        linear-gradient(var(--ab-mark), var(--ab-mark)),
        linear-gradient(var(--ab-mark), var(--ab-mark)),
        linear-gradient(var(--ab-mark), var(--ab-mark)),
        linear-gradient(var(--ab-mark), var(--ab-mark)),
        linear-gradient(var(--ab-mark), var(--ab-mark)),
        linear-gradient(var(--ab-mark), var(--ab-mark));
    background-size:
        20px 1px, 1px 20px,
        20px 1px, 1px 20px,
        20px 1px, 1px 20px;
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom;
}

#about .mrn-figure:hover .ab-reg {
    opacity: 1;
}

/* --- caption strip (markup patch A: div.ab-cap) --- */
#about .ab-cap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(53, 198, 244, .34);
    background: linear-gradient(180deg, rgba(4, 18, 31, .95) 0%, rgba(4, 18, 31, .80) 100%);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    backdrop-filter: blur(7px) saturate(1.1);
}

#about .ab-cap__id {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid rgba(53, 198, 244, .46);
    border-radius: 2px;
    background: rgba(34, 179, 230, .16);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--cyan-bright);
}

#about .ab-cap__txt {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.45;
    letter-spacing: .25px;
    /* 6.4:1 on the strip — clears 4.5:1 over any part of the photograph */
    color: var(--body-on-dark);
}

/* ==========================================================================
   3. Dial ring — technical, not decorative. Reuses marine.css @keyframes
      mrnSpin at a much slower rate. Answers marine.css:883 old teal border.
   ========================================================================== */

#about .mrn-figure__ring {
    left: -30px;
    top: -30px;
    width: 172px;
    height: 172px;
    border: 1px dashed rgba(53, 198, 244, .42);
    opacity: .9;
    animation: mrnSpin 38s linear infinite;
}

#about .mrn-figure__ring::after {
    content: "";
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    border: 1px solid rgba(34, 179, 230, .20);
}

/* ==========================================================================
   4. Spec plate — replaces the circular badge (markup patch B)
   ========================================================================== */

#about .mrn-figure__badge {
    right: -20px;
    bottom: -26px;
    width: auto;
    height: auto;
    min-width: 202px;
    padding: 21px 26px 18px;
    border-radius: 3px;
    border: 1px solid rgba(53, 198, 244, .30);
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    overflow: hidden;
    background: linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 62%, var(--navy-ink) 100%);
    /* answers marine.css:844 rgba(0,0,142,.75) */
    box-shadow:
        0 30px 64px -30px rgba(4, 18, 31, .92),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: abPlateFloat 9s ease-in-out infinite;
}

/* the section's single amber moment — hazard tape as the plate's top edge */
#about .mrn-figure__badge::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    opacity: .92;
    background: repeating-linear-gradient(135deg,
            var(--gold) 0 9px,
            rgba(7, 26, 46, .92) 9px 18px);
}

#about .mrn-figure__badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 54px;
    font-weight: 600;
    line-height: .92;
    letter-spacing: -.5px;
    color: #ffffff;
}

/* undo marine.css:857 `.mrn-figure__badge span` bleeding onto the counter */
#about .mrn-figure__badge strong span {
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: none;
    line-height: inherit;
    margin-top: 0;
    max-width: none;
}

#about .ab-plate__label {
    margin-top: 9px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: none;
    color: var(--cyan-bright);
}

#about .ab-plate__meta {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--hairline);
    align-self: stretch;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: none;
    line-height: 1.45;
    max-width: none;
    color: var(--body-on-dark);
}

@keyframes abPlateFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* ==========================================================================
   5. Spec sheet — six measured rows with cyan ticks, not marketing bullets
   ========================================================================== */

#about .ab-spec__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 36px 0 0;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(34, 179, 230, .34);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan-deep);
}

#about .ab-spec__ref {
    flex: 0 0 auto;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(7, 26, 46, .58);
}

#about .mrn-about__points {
    margin: 0 0 38px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

#about .mrn-about__points li {
    --ab-tick-x: 0px;
    padding: 13px 22px 13px calc(34px + var(--ab-tick-x));
    border-bottom: 1px solid var(--ab-rule);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .1px;
    color: var(--body-on-light);
    transform: none;
    transition:
        color .45s var(--e-out),
        background-color .45s var(--e-out);
}

#about .mrn-about__points li:nth-child(odd) {
    border-right: 1px solid var(--ab-rule);
}

#about .mrn-about__points li:nth-child(even) {
    --ab-tick-x: 22px;
}

/* answers marine.css:926 rgba(1,114,128,.12) — circle dot becomes a chip */
#about .mrn-about__points li::before {
    left: var(--ab-tick-x);
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: rgba(34, 179, 230, .10);
    border: 1px solid rgba(34, 179, 230, .42);
    box-shadow: none;
    opacity: 0;
    transform: scale(.6);
    transform-origin: 50% 50%;
    transition:
        transform .6s var(--e-out) var(--mrn-delay, 0ms),
        opacity .5s var(--e-out) var(--mrn-delay, 0ms),
        background-color .4s var(--e-out),
        border-color .4s var(--e-out);
}

#about .mrn-about__points li::after {
    left: calc(var(--ab-tick-x) + 6px);
    top: 21px;
    width: 8px;
    height: 4px;
    border-left: 1.6px solid var(--cyan-deep);
    border-bottom: 1.6px solid var(--cyan-deep);
    opacity: 0;
    transform: rotate(-45deg) scale(.5);
    transition:
        transform .55s var(--e-out) calc(var(--mrn-delay, 0ms) + 90ms),
        opacity .45s var(--e-out) calc(var(--mrn-delay, 0ms) + 90ms),
        border-color .35s var(--e-out);
}

/* `data-mrn-stagger="120"` on the <ul> writes --mrn-delay onto each <li>, but
   the <li>s carry no data-mrn-reveal so the delay was inert. Driving the tick
   off the <ul>'s own .mrn-in class puts it back to work — and only the tick
   animates, so the row text is legible even if the observer never fires. */
#about .mrn-about__points.mrn-in li::before {
    opacity: 1;
    transform: scale(1);
}

#about .mrn-about__points.mrn-in li::after {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
}

#about .mrn-about__points li:hover {
    color: var(--heading-on-light);
    background: linear-gradient(90deg, rgba(34, 179, 230, .09), rgba(34, 179, 230, 0) 82%);
}

#about .mrn-about__points li:hover::before {
    background: rgba(34, 179, 230, .22);
    border-color: var(--cyan);
}

/* ==========================================================================
   6. CTA focus — css/style.css:94 kills outlines globally (a:focus{outline:0})
   ========================================================================== */

#about .mrn-btn:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

/* 1200 — two columns held, gutters and plate tighten. This also overrides
   marine.css's @media (max-width:1100px) single-column collapse, which fired
   ~100px too early and left a half-empty row. */
@media (max-width: 1200px) {
    #about .mrn-about__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 46px;
    }

    #about .mrn-figure__frame {
        aspect-ratio: 4 / 3;
    }

    #about .mrn-figure__ring {
        left: -22px;
        top: -22px;
        width: 138px;
        height: 138px;
    }

    #about .mrn-figure__badge {
        right: -12px;
        bottom: -20px;
        min-width: 176px;
        padding: 17px 20px 15px;
    }

    #about .mrn-figure__badge strong {
        font-size: 44px;
    }

    #about .mrn-about__points li {
        padding-right: 16px;
        font-size: 13.5px;
    }
}

/* 991 — single column: plate on top at a fixed 16:10, capped and centred so
   it never becomes a letterbox; spec sheet stays two-up. */
@media (max-width: 991px) {
    #about .mrn-about__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
        align-items: start;
    }

    #about .mrn-figure {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    #about .mrn-figure__frame {
        aspect-ratio: 16 / 10;
    }

    #about::before,
    #about::after {
        -webkit-mask-image: none;
        mask-image: none;
        opacity: .55;
    }

    #about .ab-spec__head {
        margin-top: 30px;
    }
}

/* 767 — the spec sheet drops to one column, the data plate leaves the
   photograph and sits under it as a full-width title block, and the dial ring
   is retired so nothing hangs past a phone viewport. */
@media (max-width: 767px) {
    #about .mrn-figure__frame {
        aspect-ratio: 16 / 11;
        min-height: 220px;
        border-radius: 3px;
    }

    #about .mrn-figure__ring {
        display: none;
    }

    #about .ab-cap {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 11px 14px;
    }

    #about .ab-cap__id {
        padding: 4px 8px;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    #about .ab-cap__txt {
        font-size: 11.5px;
        line-height: 1.4;
    }

    #about .ab-reg {
        inset: 68px 10px 10px;
        background-size:
            14px 1px, 1px 14px,
            14px 1px, 1px 14px,
            14px 1px, 1px 14px;
    }

    #about .mrn-figure__badge {
        /* `relative`, never `static` — .mrn-figure carries `perspective`, which
           makes it the containing block, so a static plate would fling its
           ::before hazard rule up to the top of the photograph */
        position: relative;
        right: auto;
        bottom: auto;
        min-width: 0;
        width: 100%;
        margin-top: 14px;
        padding: 18px 20px 16px;
        animation: none;
    }

    #about .mrn-figure__badge strong {
        font-size: 42px;
    }

    #about .mrn-about__points {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 32px;
    }

    #about .mrn-about__points li,
    #about .mrn-about__points li:nth-child(even) {
        --ab-tick-x: 0px;
        padding-right: 0;
    }

    #about .mrn-about__points li:nth-child(odd) {
        border-right: 0;
    }

    #about .ab-spec__head {
        font-size: 10.5px;
        letter-spacing: 2.4px;
    }
}

/* 520 — the caption wraps to two lines here and swallows the top pair of
   registration marks, so the whole set is retired rather than left partial */
@media (max-width: 520px) {
    #about .ab-reg {
        display: none;
    }
}

/* ==========================================================================
   8. Reduced motion
   marine.css:292 already caps transition-duration globally with !important;
   these rules kill the loops and land every staggered state, so nothing in
   this section depends on animation to become visible.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #about .mrn-figure__frame::before {
        display: none;
    }

    #about .mrn-figure__ring,
    #about .mrn-figure__badge {
        animation: none;
    }

    #about .mrn-figure__frame,
    #about .mrn-figure__frame img,
    #about .mrn-figure__frame::after,
    #about .ab-reg,
    #about .mrn-about__points li,
    #about .mrn-about__points li::before,
    #about .mrn-about__points li::after {
        transition: none;
    }

    #about .mrn-figure__frame img {
        transform: none;
    }

    #about .mrn-figure:hover .mrn-figure__frame img {
        transform: none;
    }

    #about .mrn-about__points li::before {
        opacity: 1;
        transform: scale(1);
    }

    #about .mrn-about__points li::after {
        opacity: 1;
        transform: rotate(-45deg);
    }
}


/* ==========================================================================
   SECTION: STATS — the instrument panel band
   --------------------------------------------------------------------------
   Root      : .mrn-stats                              (index.html 315-367)
   Answers   : css/marine.css 942-1062, 1888, 1994
   Palette   : lines 942-1062 of marine.css carry NO old-navy / old-teal rgba()
               literals — the debt in this block is AMBER debt. marine.css
               paints the icon tile (--grad-gold + a gold glow, 1017-1026),
               the hover ground rgba(255,173,24,.08) and hover border
               rgba(255,173,24,.38) (993-997), the rotating conic ring
               (--gold, 975-987) and the unit marks (--gold-light, 1044-1048)
               ALL in amber: five amber moments in one band. Cyan leads here.
               Exactly one amber moment survives — the 68x3 tick on the
               plate's top-left edge, read as a panel power indicator.
   Idea      : four floating glass cards become ONE machined plate split by
               1px hairlines. The dividers ARE the grid gaps, so they stay
               exactly 1px and perfectly aligned at every breakpoint with no
               nth-child bookkeeping. Yard photography sits behind the plate
               as a parallax layer under a navy duotone, never behind copy.
   ========================================================================== */

/* --- the band: recessed, so #about above and #companies below sit on it --- */
.mrn-stats {
    position: relative;
    isolation: isolate;
    padding: 104px 0 108px;
    background: var(--grad-deep);
    overflow: hidden;
    border-top: 1px solid rgba(53, 198, 244, .16);
    border-bottom: 1px solid rgba(53, 198, 244, .16);
    box-shadow:
        inset 0 26px 46px -28px rgba(4, 18, 31, .95),
        inset 0 -26px 46px -28px rgba(4, 18, 31, .95);
}

/* --- yard photograph, duotoned down into the palette ---------------------
   marine.css:952-960 used ship-bg.webp at background-attachment: fixed.
   iOS ignores `fixed`, and inside an `overflow: hidden` band it forces a
   full-band repaint on every scroll frame. Replaced with a real overscanned
   parallax layer driven by data-mrn-parallax (JS-guarded for reduced motion).
   images/gallery/6.jpg is the aerial of the whole plot — plate stacks, cranes,
   machinery rows — which is exactly the right ground for a data band. */
.mrn-stats .mrn-stats__bg {
    position: absolute;
    inset: -20% 0;
    z-index: 0;
    opacity: .42;
    background-image: url("../images/gallery/6.jpg");
    background-size: cover;
    background-position: 50% 44%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    filter: grayscale(.62) contrast(1.06) brightness(.5);
    pointer-events: none;
    will-change: transform;
}

/* duotone + scrim: guarantees the ground under the plate never lifts toward
   mid-grey, and ties the photo to the header/footer cyan */
.mrn-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 8% -12%, rgba(34, 179, 230, .20), transparent 66%),
        radial-gradient(760px 460px at 96% 110%, rgba(17, 149, 207, .18), transparent 70%),
        linear-gradient(180deg, rgba(4, 18, 31, .80) 0%, rgba(7, 26, 46, .44) 46%, rgba(4, 18, 31, .86) 100%);
}

/* engineering-drawing grid — .mrn-stats is not .mrn-section, so the
   foundation's grid overlay never reached this band */
.mrn-stats::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(53, 198, 244, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(53, 198, 244, .07) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 22%, transparent 100%);
    mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 22%, transparent 100%);
}

/* --- the plate ----------------------------------------------------------- */
.mrn-stats .mrn-stats__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(53, 198, 244, .20);
    border: 1px solid rgba(53, 198, 244, .16);
    border-radius: 0;
    counter-reset: sgStatIdx;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 34px 64px -38px rgba(4, 18, 31, .95);
}

/* the grid is only the trigger the sheen and the stagger hang off — the
   motion belongs to the cells, so nothing double-shifts */
.mrn-stats .mrn-stats__grid[data-mrn-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

/* THE one amber moment: panel power tick on the plate's top-left edge */
.mrn-stats .mrn-stats__grid::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    width: 68px;
    height: 3px;
    background: var(--gold);
    box-shadow: 0 0 16px rgba(255, 173, 24, .55);
    z-index: 4;
    pointer-events: none;
}

/* the sheen — one slow pass of light across the whole band on reveal.
   Absolutely positioned so it is NOT laid out as a fifth grid item; the
   -60vw bleed is clipped by .mrn-stats { overflow: hidden }. */
.mrn-stats .mrn-stats__grid::after {
    content: "";
    position: absolute;
    top: -220px;
    bottom: -220px;
    left: -60vw;
    right: -60vw;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(104deg,
            transparent 40%,
            rgba(53, 198, 244, .13) 47%,
            rgba(255, 255, 255, .15) 50%,
            rgba(53, 198, 244, .13) 53%,
            transparent 60%);
}

.mrn-stats .mrn-stats__grid.mrn-in::after {
    animation: sgStatsSheen 1500ms var(--e-out) 460ms 1 both;
}

@keyframes sgStatsSheen {
    0% {
        opacity: 0;
        transform: translate3d(-22%, 0, 0);
    }

    18% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d(22%, 0, 0);
    }
}

/* --- cells: hairline-divided, left-aligned, spec-sheet ------------------- */
.mrn-stats .mrn-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 44px 30px 40px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background-color: rgba(6, 22, 38, .90);
    /* marine.css:970 blurred a near-opaque panel — pure GPU cost, no effect */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* base hover transition, so the cells still feel right if the
       data-mrn-reveal markup patch below is not applied */
    transition:
        background-color .45s var(--e-out),
        box-shadow .45s var(--e-out),
        border-color .45s var(--e-out);
}

/* reveal: per-property delays, so the stagger never lags hover feedback */
.mrn-stats .mrn-stat[data-mrn-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .8s var(--e-out) var(--mrn-delay, 0ms),
        transform .9s var(--e-out) var(--mrn-delay, 0ms),
        background-color .45s var(--e-out) 0ms,
        box-shadow .45s var(--e-out) 0ms,
        border-color .45s var(--e-out) 0ms;
}

.mrn-stats .mrn-stat[data-mrn-reveal].mrn-in,
.mrn-stats .mrn-in .mrn-stat[data-mrn-reveal] {
    opacity: 1;
    transform: none;
}

/* marine.css:993-997 lifted each card 10px and washed it amber on hover.
   The plate is one solid part: cells light up, they do not pop out of it. */
.mrn-stats .mrn-stat:hover,
.mrn-stats .mrn-stat:focus-within {
    transform: none;
    background-color: rgba(12, 38, 65, .94);
    border-color: transparent;
    box-shadow:
        inset 0 0 0 1px rgba(53, 198, 244, .18),
        inset 0 -44px 62px -46px rgba(53, 198, 244, .9);
}

/* ::before was marine.css:975-987 — a gold conic ring on an infinite loop.
   Re-declared end to end as a cyan leading edge that wipes in once. */
.mrn-stats .mrn-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    padding: 0;
    border-radius: 0;
    background: linear-gradient(90deg, var(--cyan-bright), rgba(53, 198, 244, 0));
    -webkit-mask: none;
    mask: none;
    -webkit-mask-composite: add;
    mask-composite: add;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .55s var(--e-out), opacity .35s var(--e-out);
    animation: none;
    z-index: 2;
    pointer-events: none;
}

.mrn-stats .mrn-stat:hover::before,
.mrn-stats .mrn-stat:focus-within::before {
    opacity: 1;
    transform: scaleX(1);
    animation: none;
}

/* spec-sheet index, pure CSS counter — no markup needed */
.mrn-stats .mrn-stat::after {
    counter-increment: sgStatIdx;
    content: counter(sgStatIdx, decimal-leading-zero);
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.8px;
    color: rgba(53, 198, 244, .40);
    transition: color .4s var(--e-out);
    pointer-events: none;
}

.mrn-stats .mrn-stat:hover::after {
    color: rgba(53, 198, 244, .85);
}

/* --- icons demoted to quiet line marks ---------------------------------- */
.mrn-stats .mrn-stat__icon {
    width: auto;
    height: 26px;
    margin: 0 0 26px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: none;
    box-shadow: none;
    color: rgba(167, 187, 207, .52);
    transition: color .45s var(--e-out);
}

/* CSS beats the SVG width / height / stroke-width presentation attributes */
.mrn-stats .mrn-stat__icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.3;
}

.mrn-stats .mrn-stat:hover .mrn-stat__icon {
    /* marine.css:1029-1031 rotated and scaled the tile — an instrument mark
       does not wobble; it just comes alive */
    transform: none;
    color: var(--cyan-bright);
}

/* --- numerals treated as data ------------------------------------------- */
.mrn-stats .mrn-stat__num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: .92;
    letter-spacing: -1.2px;
    color: #ffffff;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    /* the count-up must not reflow the cell while it runs */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-shadow: 0 12px 30px rgba(4, 18, 31, .8);
}

/* cyan unit marks — was var(--gold-light) at marine.css:1046 */
.mrn-stats .mrn-stat__num i {
    font-style: normal;
    font-family: var(--font-display);
    font-size: .40em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--cyan-bright);
    align-self: flex-start;
    margin-top: .22em;
}

/* --- labels sit under a measured rule ------------------------------------ */
.mrn-stats .mrn-stat__label {
    width: 100%;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    /* 8.0:1 on the cell ground; marine.css:1053 used rgba(255,255,255,.74) */
    color: var(--body-on-dark);
    transition: border-color .45s var(--e-out), color .45s var(--e-out);
}

.mrn-stats .mrn-stat:hover .mrn-stat__label {
    border-top-color: rgba(53, 198, 244, .45);
    color: #e8f3fb;
}

/* --- focus (css/style.css kills outlines with a:focus{outline:0}) --------- */
.mrn-stats a:focus-visible,
.mrn-stats [tabindex]:focus-visible,
.mrn-stats .mrn-stat:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 3px;
}

/* ==========================================================================
   STATS — responsive
   1200 : still one row of four; padding, numeral and tracking step down.
          This deliberately overrides marine.css:1888, which collapsed to two
          columns at 1100px — at the tighter type a four-up row holds to 992.
    991 : 2 x 2 plate. The 1px gaps form a clean cross, no nth-child needed.
    767 : still 2 x 2 (four numerals read better two-up than stacked), copy
          centred, the 01-04 index hidden, photo pulled back.
    479 : single column. This overrides marine.css:1994, which collapsed at
          560px — two-up still reads fine at 480-560.
   ========================================================================== */

@media (max-width: 1200px) {
    .mrn-stats {
        padding: 88px 0 92px;
    }

    .mrn-stats .mrn-stats__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .mrn-stats .mrn-stat {
        padding: 36px 22px 34px;
    }

    .mrn-stats .mrn-stat__icon {
        margin-bottom: 20px;
    }

    .mrn-stats .mrn-stat__num {
        font-size: clamp(38px, 4.4vw, 52px);
        letter-spacing: -.8px;
    }

    .mrn-stats .mrn-stat__label {
        font-size: 11px;
        letter-spacing: 2.2px;
        margin-top: 16px;
    }

    .mrn-stats .mrn-stat::after {
        top: 16px;
        right: 16px;
    }
}

@media (max-width: 991px) {
    .mrn-stats {
        padding: 76px 0 80px;
    }

    .mrn-stats .mrn-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrn-stats .mrn-stat {
        padding: 34px 26px 32px;
    }

    .mrn-stats .mrn-stat__num {
        font-size: clamp(40px, 7vw, 54px);
    }

    .mrn-stats .mrn-stats__bg {
        inset: -14% 0;
        opacity: .34;
    }
}

@media (max-width: 767px) {
    .mrn-stats {
        padding: 60px 0 64px;
    }

    .mrn-stats .mrn-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrn-stats .mrn-stat {
        padding: 28px 18px 26px;
        align-items: center;
        text-align: center;
    }

    .mrn-stats .mrn-stat__icon {
        height: 22px;
        margin: 0 auto 16px;
        justify-content: center;
    }

    .mrn-stats .mrn-stat__icon svg {
        width: 22px;
        height: 22px;
    }

    .mrn-stats .mrn-stat__num {
        font-size: clamp(32px, 9.2vw, 44px);
        letter-spacing: -.6px;
        justify-content: center;
    }

    .mrn-stats .mrn-stat__label {
        font-size: 10.5px;
        letter-spacing: 1.9px;
        margin-top: 16px;
        padding-top: 11px;
    }

    /* the 01-04 index is a desktop spec-sheet cue; two-up it only crowds */
    .mrn-stats .mrn-stat::after {
        display: none;
    }

    .mrn-stats .mrn-stats__grid::before {
        left: 16px;
        width: 52px;
    }

    .mrn-stats .mrn-stats__bg {
        opacity: .26;
    }
}

@media (max-width: 479px) {
    .mrn-stats .mrn-stats__grid {
        grid-template-columns: 1fr;
    }

    .mrn-stats .mrn-stat {
        padding: 26px 22px 24px;
    }
}

/* ==========================================================================
   STATS — reduced motion
   marine.css:294-304 already flattens transitions and forces [data-mrn-reveal]
   visible; this only removes what this block adds on top.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .mrn-stats .mrn-stat[data-mrn-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mrn-stats .mrn-stats__grid.mrn-in::after {
        animation: none;
        opacity: 0;
    }

    .mrn-stats .mrn-stat,
    .mrn-stats .mrn-stat::before,
    .mrn-stats .mrn-stat::after,
    .mrn-stats .mrn-stat__icon,
    .mrn-stats .mrn-stat__label {
        transition: none;
    }

    /* data-mrn-parallax is already JS-guarded at js/marine.js:243 */
    .mrn-stats .mrn-stats__bg {
        will-change: auto;
    }
}


/* ==========================================================================
   COMPANIES — #companies · the two operating units as spec plates
   ==========================================================================
   Scope   : every selector sits under #companies. Nothing here touches the
             shared primitives (.mrn-title / .mrn-eyebrow / .mrn-lead /
             .mrn-section / .mrn-center) or the .mrn-btn look — the single
             .mrn-btn rule below adds the missing :focus-visible ring that
             css/style.css:92 (`a:focus{outline:0}`) removes, plus a stacking
             fix, and changes no paint of the button itself.

   Idea    : each unit stops being a gradient tile and becomes a photographed
             plot under a navy scrim — a real aerial of the yard (gallery/3
             for unit 01, gallery/6 for unit 02), the plate number engraved
             into the top-right corner, and the counts dropped into a bleed
             spec footer with a hairline gutter between them. Cyan carries
             every accent; the one amber moment in the section stays the
             existing gold CTA on each card.

   3D      : .mrn-units is the perspective stage, .mrn-unit is the tilted
             card (data-mrn-tilt="6"), .mrn-unit__body rides 18px forward on
             the Z axis. marine.js writes an INLINE transform on the tilted
             node, so the card takes NO transform-based hover lift — the lift
             is shadow + border + cyan edge sweep only. Two properties that
             would silently flatten preserve-3d are unset here on purpose:
             overflow:hidden (marine.css:1226) and isolation:isolate
             (marine.css:1234 and the .edge-sweep utility).

   Palette : no old-palette rgba() literals exist inside marine.css
             1213-1318, so the debt in this range is structural rather than
             chromatic — it arrives through the tokens --grad-brand /
             --grad-brand-rev, which the foundation has already retinted but
             which still hand the pair two MIRRORED gradients. Both cards are
             re-based on one deep navy here so they read as a matched set.
   ========================================================================== */

#companies {
    /* one source of truth for the card gutter — the spec footer bleeds to the
       card edge with calc() negatives, so padding and bleed can never desync */
    --unit-pad-x: 44px;
    --unit-pad-y: 52px;
    --unit-radius: 6px;
    --unit-hair: rgba(255, 255, 255, .15);
    --unit-copy: rgba(255, 255, 255, .84);
    /* 7.2:1 on the scrim */
    --unit-label: rgba(255, 255, 255, .88);
    /* 7.6:1 on the scrim */
}

/* ---- grid -------------------------------------------------------------- */

#companies .mrn-units {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    /* .mrn-center already carries a 66px tail (index-theme.css:232); the
       extra 56px from marine.css:1220 double-spaced the section head */
    margin-top: 0;
    /* mirrors .d3-stage so the cards keep their depth even if the class is
       ever dropped from the markup */
    perspective: 1100px;
}

/* ---- the card ---------------------------------------------------------- */

#companies .mrn-unit {
    position: relative;
    z-index: 1;
    /* creates the local stacking context WITHOUT isolation:isolate — the
       isolate on marine.css:1234 and on .edge-sweep is a grouping property
       and would force transform-style back to flat */
    isolation: auto;
    /* same reason: overflow must stay visible for preserve-3d. The photo,
       the scrim and the edge sweep all clip themselves with
       border-radius:inherit, so nothing escapes the corner */
    overflow: visible;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 430px;
    padding: var(--unit-pad-y) var(--unit-pad-x);
    border: 1px solid var(--hairline);
    border-radius: var(--unit-radius);
    /* fallback ground only — the ::before photo sits opaque on top of it */
    background: linear-gradient(160deg, var(--panel) 0%, var(--navy-ink) 100%);
    color: var(--unit-copy);
    box-shadow: var(--lift-2);
    /* answers marine.css:1235 (transform .6s) and marine.css:1266
       (translateY(-10px) on hover): a tilted node must never animate its own
       transform, or the inline matrix from marine.js fights the transition */
    transform: none;
    transition: box-shadow .55s var(--e-out), border-color .55s var(--e-out);
}

/* kills the mirrored gradient of marine.css:1238 — the two plots are the
   same operation and should not read as two different brands */
#companies .mrn-unit:nth-child(2) {
    background: linear-gradient(160deg, var(--panel) 0%, var(--navy-ink) 100%);
}

/* ---- photography + scrim, one layer stack ------------------------------ */

/* Everything lives on ::before so ::after stays free for the .edge-sweep
   border wipe. Layer order top-to-bottom:
     1  readability scrim   .80 -> .97 navy — the contrast floor
     2  duotone wash        blended `color`, pulls the photo into the palette
     3  the photograph
   The scrim scales with the photo on hover, but it is a vertical ramp about
   the centre, so a 1.055 scale can only push the DARKER end into view. The
   worst case (a blown-white pixel under the .80 top stop) still composites
   to #394858 — 7.2:1 against --unit-copy and 4.7:1 against the cyan
   numerals, so body text can never fall below AA whatever the photo does. */
#companies .mrn-unit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-repeat: no-repeat;
    background-position: center 42%;
    background-size: cover;
    background-blend-mode: normal, color, normal;
    opacity: 1;
    transform: scale(1);
    transform-origin: 50% 46%;
    transition: transform 1.15s var(--e-out);
}

#companies .mrn-unit--a::before {
    background-image:
        linear-gradient(180deg, rgba(7, 26, 46, .80) 0%, rgba(7, 26, 46, .88) 46%, rgba(4, 18, 31, .97) 100%),
        linear-gradient(118deg, rgba(13, 41, 71, .74) 0%, rgba(7, 26, 46, .30) 52%, rgba(17, 149, 207, .34) 100%),
        url("../images/gallery/3.jpg");
}

#companies .mrn-unit--b::before {
    background-image:
        linear-gradient(180deg, rgba(7, 26, 46, .80) 0%, rgba(7, 26, 46, .88) 46%, rgba(4, 18, 31, .97) 100%),
        linear-gradient(242deg, rgba(13, 41, 71, .74) 0%, rgba(7, 26, 46, .30) 52%, rgba(17, 149, 207, .34) 100%),
        url("../images/gallery/6.jpg");
}

/* slow, weighted drift — 1.055 not the 1.12 of marine.css:1262, and the
   opacity lift of marine.css:1263 is dropped so the scrim never thins */
#companies .mrn-unit:hover::before,
#companies .mrn-unit:focus-within::before {
    transform: scale(1.055);
    opacity: 1;
}

/* ---- hover / focus lift: shadow and edge only, never transform --------- */

#companies .mrn-unit:hover,
#companies .mrn-unit:focus-within {
    transform: none;
    border-color: rgba(53, 198, 244, .45);
    box-shadow: var(--lift-3), var(--glow-cyan), inset 0 0 0 1px rgba(53, 198, 244, .16);
}

/* ---- content plane, 18px forward --------------------------------------- */

#companies .mrn-unit__body {
    position: relative;
    z-index: 2;
    transform: translateZ(18px);
}

/* ---- 01 / 02 as an engraved plate number ------------------------------- */

/* .mrn-unit__body is transformed, so it is the containing block here: the
   numeral pins to the card's content box and can never breach the corner
   radius even with overflow visible. */
#companies .mrn-unit__no {
    position: absolute;
    top: -8px;
    right: -4px;
    z-index: 0;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(78px, 8.4vw, 132px);
    line-height: .74;
    letter-spacing: -3px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(53, 198, 244, .34);
    /* the chisel: a hard dark offset under a hollow glyph reads as stamped
       steel rather than as a watermark */
    text-shadow: 0 2px 0 rgba(4, 18, 31, .55);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: -webkit-text-stroke-color .55s var(--e-out), opacity .55s var(--e-out);
}

#companies .mrn-unit:hover .mrn-unit__no,
#companies .mrn-unit:focus-within .mrn-unit__no {
    -webkit-text-stroke-color: rgba(53, 198, 244, .70);
}

/* ---- headline, measured rule, copy ------------------------------------- */

#companies .mrn-unit h3 {
    position: relative;
    z-index: 1;
    /* keeps the title clear of the numeral zone */
    padding-right: 96px;
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.2;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #ffffff;
}

/* the one measured cue: a drafting rule that extends on hover */
#companies .mrn-unit h3::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin-top: 18px;
    background: linear-gradient(90deg, var(--cyan-bright) 0%, rgba(53, 198, 244, 0) 100%);
    transition: width .6s var(--e-out);
}

#companies .mrn-unit:hover h3::after,
#companies .mrn-unit:focus-within h3::after {
    width: 108px;
}

#companies .mrn-unit p {
    position: relative;
    z-index: 1;
    margin: 0 0 30px;
    max-width: 44ch;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.82;
    color: var(--unit-copy);
}

/* ---- the CTA ----------------------------------------------------------- */

#companies .mrn-unit .mrn-btn {
    position: relative;
    z-index: 2;
}

/* css/style.css:92 sets a:focus{outline:0} for the whole site, so every
   focusable thing in this section has to re-state its own ring */
#companies .mrn-unit .mrn-btn:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(53, 198, 244, .22);
}

/* ---- spec footer ------------------------------------------------------- */

#companies .mrn-unit__meta {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    /* bleeds out of the card padding to sit flush on the bottom edge */
    margin: 0 calc(var(--unit-pad-x) * -1) calc(var(--unit-pad-y) * -1);
    padding: 20px var(--unit-pad-x) 22px;
    border-top: 1px solid var(--unit-hair);
    border-radius: 0 0 var(--unit-radius) var(--unit-radius);
    background: linear-gradient(180deg, rgba(4, 18, 31, .34) 0%, rgba(4, 18, 31, .68) 100%);
    transition: border-color .55s var(--e-out);
}

#companies .mrn-unit:hover .mrn-unit__meta,
#companies .mrn-unit:focus-within .mrn-unit__meta {
    border-top-color: rgba(53, 198, 244, .40);
}

#companies .mrn-unit__meta > div {
    padding-right: 18px;
}

/* the hairline gutter that makes it read as a spec sheet, not a flex row */
#companies .mrn-unit__meta > div + div {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--unit-hair);
}

#companies .mrn-unit__meta strong {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 2.2vw, 31px);
    line-height: 1;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    /* was --gold-light (marine.css:1307) — that made four amber accents in a
       section that already spends its one amber moment on the gold CTA */
    color: var(--cyan-bright);
}

/* marine.css:1311 (`.mrn-unit__meta div span`) also matches the <span
   data-count> INSIDE <strong>, so the animated figure was rendering at 11px
   uppercase with 2.4px tracking instead of as a number. Reset it. */
#companies .mrn-unit__meta strong span {
    display: inline;
    font: inherit;
    font-variant-numeric: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
}

#companies .mrn-unit__meta > div > span {
    display: block;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    /* was rgba(255,255,255,.7) — 3.8:1 at 11px, under AA */
    color: var(--unit-label);
}

/* ---- reveal ------------------------------------------------------------
   data-mrn-stagger="160" on .mrn-units was already writing --mrn-delay onto
   the two articles, but nothing consumed it because the articles carried no
   data-mrn-reveal — the stagger was dead. The articles now reveal on OPACITY
   ONLY: marine.css:262 would otherwise put a 1.1s transition on `transform`,
   and marine.js drives the tilt by writing an inline transform, so every
   pointer move would have arrived 1.1 seconds late. The movement comes from
   the inner planes instead, which are not tilted.
   ------------------------------------------------------------------------ */

#companies .mrn-unit[data-mrn-reveal] {
    transform: none;
    /* will-change:opacity (marine.css:264) is a grouping value and would
       flatten preserve-3d for good; transform is safe */
    will-change: transform;
    transition:
        opacity .9s var(--e-out) var(--mrn-delay, 0ms),
        box-shadow .55s var(--e-out),
        border-color .55s var(--e-out);
}

#companies .mrn-unit__body[data-mrn-reveal] {
    /* beats .d3-pop-sm so the pop survives the reveal */
    transform: translate3d(0, 34px, 18px);
    transition: opacity .85s var(--e-out) var(--mrn-delay, 0ms),
        transform 1s var(--e-out) var(--mrn-delay, 0ms);
}

#companies .mrn-unit__meta[data-mrn-reveal] {
    transform: translate3d(0, 24px, 0);
    transition: opacity .85s var(--e-out) var(--mrn-delay, 0ms),
        transform 1s var(--e-out) var(--mrn-delay, 0ms);
}

#companies .mrn-in .mrn-unit__body[data-mrn-reveal],
#companies .mrn-unit__body[data-mrn-reveal].mrn-in {
    transform: translate3d(0, 0, 18px);
}

#companies .mrn-in .mrn-unit__meta[data-mrn-reveal],
#companies .mrn-unit__meta[data-mrn-reveal].mrn-in {
    transform: none;
}

/* ==========================================================================
   COMPANIES — responsive
   1200  two columns kept, gutter and plate number step down
    991  single column; the card goes full-bleed wide, the numeral grows back
         because there is room for it and the copy measure opens to 58ch
    767  compact gutter, numeral drops to 76px, spec footer tightens
   ========================================================================== */

@media (max-width: 1200px) {
    #companies {
        --unit-pad-x: 34px;
        --unit-pad-y: 42px;
    }

    #companies .mrn-units {
        gap: 22px;
    }

    #companies .mrn-unit {
        min-height: 400px;
        gap: 26px;
    }

    #companies .mrn-unit__no {
        font-size: 96px;
    }

    #companies .mrn-unit h3 {
        padding-right: 82px;
        font-size: 25px;
    }
}

@media (max-width: 991px) {
    #companies {
        --unit-pad-x: 38px;
        --unit-pad-y: 44px;
    }

    /* beats marine.css:1927, which only collapsed at 860px and left the pair
       squeezed into ~330px columns through the whole tablet range */
    #companies .mrn-units {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        perspective: 1500px;
    }

    #companies .mrn-unit {
        min-height: 360px;
    }

    #companies .mrn-unit__no {
        font-size: 116px;
    }

    #companies .mrn-unit h3 {
        padding-right: 132px;
        font-size: 26px;
    }

    #companies .mrn-unit p {
        max-width: 58ch;
    }
}

@media (max-width: 767px) {
    #companies {
        --unit-pad-x: 24px;
        --unit-pad-y: 32px;
    }

    #companies .mrn-units {
        gap: 16px;
        perspective: none;
    }

    #companies .mrn-unit {
        min-height: 0;
        gap: 24px;
    }

    #companies .mrn-unit__no {
        top: -6px;
        right: 0;
        font-size: 76px;
        letter-spacing: -2px;
    }

    #companies .mrn-unit h3 {
        padding-right: 70px;
        margin-bottom: 14px;
        font-size: 21px;
    }

    #companies .mrn-unit h3::after {
        margin-top: 14px;
        width: 44px;
    }

    #companies .mrn-unit p {
        margin-bottom: 24px;
        font-size: 14.5px;
        line-height: 1.75;
    }

    #companies .mrn-unit__meta {
        padding: 16px var(--unit-pad-x) 18px;
    }

    #companies .mrn-unit__meta > div {
        padding-right: 12px;
    }

    #companies .mrn-unit__meta > div + div {
        padding-left: 16px;
    }

    #companies .mrn-unit__meta strong {
        font-size: 24px;
    }

    #companies .mrn-unit__meta > div > span {
        font-size: 9.5px;
        letter-spacing: 1.6px;
    }
}

/* ==========================================================================
   COMPANIES — reduced motion
   marine.js already skips tilt and reveal; this stills everything CSS owns.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #companies .mrn-unit,
    #companies .mrn-unit[data-mrn-reveal],
    #companies .mrn-unit::before,
    #companies .mrn-unit__no,
    #companies .mrn-unit h3::after,
    #companies .mrn-unit__body[data-mrn-reveal],
    #companies .mrn-unit__meta,
    #companies .mrn-unit__meta[data-mrn-reveal] {
        transition: none;
    }

    #companies .mrn-unit::before,
    #companies .mrn-unit:hover::before,
    #companies .mrn-unit:focus-within::before {
        transform: none;
    }

    #companies .mrn-unit__body[data-mrn-reveal] {
        transform: translateZ(18px);
    }

    #companies .mrn-unit__meta[data-mrn-reveal] {
        transform: none;
    }

    #companies .mrn-unit:hover h3::after,
    #companies .mrn-unit:focus-within h3::after {
        width: 54px;
    }
}

/* ==========================================================================
   9. PROCESS — #process
   --------------------------------------------------------------------------
   The four-step yard flow, drawn as a process diagram from an engineering
   document rather than a row of feature cards.

   Structure of the drawing:
     .mrn-flow::before        faint dashed DATUM line, full width, sits under
                              everything (re-declares marine.css:1337, which
                              painted old teal rgba(1,114,128) and ran a 4s
                              infinite background-position loop).
     .mrn-step::before        dashed TRACK segment between two tiles.
     .mrn-step::after         cyan FILL segment; scaleX 0 -> 1 keyed off
                              .mrn-flow.mrn-in, delayed by --mrn-delay, which
                              marine.js already writes from data-mrn-stagger.
                              So the line advances step by step as the section
                              reveals. The last segment fades to amber: the one
                              amber moment in this section.
     .mrn-step__dot           dark machined tile, cyan icon, translateZ(20px).
     .mrn-step__dot::after    the step number as an anodised machined plate,
                              translateZ(34px), hung onto the white ground.

   Depth: .mrn-flow is the .d3-stage (perspective widened to 1600px because the
   row is ~1190px across and 1100px shears the outer tiles). Each .mrn-step is
   a .d3-card carrying data-mrn-tilt="5". marine.js writes an INLINE transform
   on the tilted node, so nothing here ever sets `transform` on .mrn-step, and
   the elements whose `transform` is locked by an entry keyframe take their
   hover lift from the independent `translate` property instead.
   ========================================================================== */

#process {
    --prc-tile: 88px;
    --prc-gap: 26px;
    --prc-track: rgba(7, 26, 46, .17);
    --prc-datum: rgba(7, 26, 46, .085);
}

/* --- the drawing sheet ---------------------------------------------------- */

#process .mrn-flow {
    grid-template-columns: repeat(4, 1fr);
    /* subgrid aligns tile / heading / copy across all four steps, so a
       two-line heading in one step cannot shunt its paragraph out of line.
       Falls back to independent auto rows where subgrid is unsupported. */
    grid-template-rows: auto auto auto;
    column-gap: var(--prc-gap);
    row-gap: 0;
    gap: normal;
    column-gap: var(--prc-gap);
    margin-top: 64px;
    perspective: 1600px;
    perspective-origin: 50% 26%;
}

/* DATUM — re-declares marine.css:1337 (old teal + amber gradient) and
   marine.css:1344 (animation: mrnFlowLine 4s linear infinite). */
#process .mrn-flow::before {
    top: calc(var(--prc-tile) / 2 - 1px);
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg,
            var(--prc-datum) 0 6px,
            transparent 6px 15px);
    background-size: auto;
    animation: none;
    opacity: 1;
    z-index: 0;
    transition: opacity .4s var(--e-out);
}

/* --- one step ------------------------------------------------------------- */

#process .mrn-step {
    position: relative;
    z-index: 2;
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    text-align: center;
    padding: 0 10px;
    transform-style: preserve-3d;
    /* damped, so the pointer tilt reads as weight rather than twitch.
       NEVER a transform declaration — data-mrn-tilt owns that inline. */
    transition: transform .32s var(--e-out);
}

#process .mrn-step:focus-visible {
    outline: 2px solid var(--cyan-deep);
    outline-offset: 12px;
    border-radius: 12px;
}

/* --- connector segments --------------------------------------------------- */
/* Endpoints are derived, not guessed: the segment's right end sits 12px clear
   of this tile's left edge, and it is exactly one centre-to-centre pitch long
   minus one tile and two 12px clearances — so it stops 12px clear of the
   previous tile too, and never crosses either. */

#process .mrn-step::before,
#process .mrn-step::after {
    content: "";
    position: absolute;
    top: calc(var(--prc-tile) / 2 - 1px);
    right: calc(50% + var(--prc-tile) / 2 + 12px);
    width: calc(100% + var(--prc-gap) - var(--prc-tile) - 24px);
    height: 2px;
    border-radius: 1px;
    z-index: 1;
    pointer-events: none;
}

#process .mrn-step::before {
    background: repeating-linear-gradient(90deg,
            var(--prc-track) 0 7px,
            transparent 7px 15px);
    transition: opacity .4s var(--e-out);
}

#process .mrn-step::after {
    background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-bright));
    box-shadow: 0 0 16px -3px rgba(34, 179, 230, .65);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .9s var(--e-out), opacity .4s var(--e-out);
}

#process .mrn-flow.mrn-in .mrn-step::after {
    transform: scaleX(1);
    /* delays map to the transition-property order above: transform, opacity.
       Opacity stays instant so the hover dim is not held up by the stagger. */
    transition-delay: var(--mrn-delay, 0ms), 0s;
}

#process .mrn-step:first-child::before,
#process .mrn-step:first-child::after {
    display: none;
}

/* the single amber moment: the flow terminating in recovered steel */
#process .mrn-step:last-child::after {
    background: linear-gradient(90deg, var(--cyan-bright) 52%, var(--gold) 100%);
    box-shadow: 0 0 16px -3px rgba(255, 173, 24, .5);
}

/* hovering one step dims the connector either side of it */
#process .mrn-flow:hover .mrn-step::before,
#process .mrn-flow:hover .mrn-step::after,
#process .mrn-flow:focus-within .mrn-step::before,
#process .mrn-flow:focus-within .mrn-step::after {
    opacity: .2;
}

#process .mrn-flow:hover::before,
#process .mrn-flow:focus-within::before {
    opacity: .55;
}

/* --- the machined tile ---------------------------------------------------- */
/* re-declares marine.css:1354-1368: white circle, old-teal border
   rgba(1,114,128,.22), and a --ease-bounce transform transition. */

#process .mrn-step__dot {
    width: var(--prc-tile);
    height: var(--prc-tile);
    margin: 0 auto 26px;
    border-radius: 16px;
    border: 1px solid rgba(53, 198, 244, .26);
    color: var(--cyan-bright);
    background:
        radial-gradient(118% 118% at 12% 6%, rgba(53, 198, 244, .20), transparent 58%),
        linear-gradient(158deg, var(--navy) 0%, var(--panel) 52%, var(--ink) 100%);
    box-shadow:
        var(--lift-1),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 -1px 0 rgba(4, 18, 31, .55);
    opacity: 0;
    transform: translate3d(0, 26px, 20px);
    translate: 0 0;
    z-index: 2;
    transition:
        box-shadow .5s var(--e-out),
        border-color .45s var(--e-out),
        background .5s var(--e-out),
        translate .5s var(--e-out);
}

#process .mrn-flow.mrn-in .mrn-step__dot {
    animation: prcTileIn .85s var(--e-out) both;
    animation-delay: var(--mrn-delay, 0ms);
}

@keyframes prcTileIn {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 20px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 20px);
    }
}

#process .mrn-step__dot svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.5;
    transform: translateZ(0);
    filter: drop-shadow(0 6px 14px rgba(34, 179, 230, .45));
    transition: transform .5s var(--e-out), color .4s var(--e-out);
}

/* --- the step number as a machined plate ---------------------------------- */
/* re-declares marine.css:1375-1392: gold circle + rgba(255,173,24,.9) shadow */

#process .mrn-step__dot::after {
    content: attr(data-step);
    position: absolute;
    top: -12px;
    left: -12px;
    right: auto;
    width: 36px;
    height: 27px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .6px;
    color: var(--navy-ink);
    /* knurl over anodised cyan — milled hardware, not a badge */
    background:
        repeating-linear-gradient(90deg, rgba(4, 18, 31, .10) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, var(--cyan-bright) 0%, var(--cyan-deep) 100%);
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -2px 4px -2px rgba(4, 18, 31, .55),
        0 10px 20px -12px rgba(4, 18, 31, .85);
    opacity: 0;
    transform: translateZ(34px) scale(.6);
    translate: 0 0;
    transition: box-shadow .45s var(--e-out), translate .45s var(--e-out);
}

#process .mrn-flow.mrn-in .mrn-step__dot::after {
    animation: prcPlateIn .6s var(--e-out) both;
    animation-delay: calc(var(--mrn-delay, 0ms) + 190ms);
}

@keyframes prcPlateIn {
    from {
        opacity: 0;
        transform: translateZ(34px) scale(.6);
    }

    to {
        opacity: 1;
        transform: translateZ(34px) scale(1);
    }
}

/* --- copy ----------------------------------------------------------------- */

#process .mrn-step h4 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--heading-on-light);
    margin: 0 0 11px;
    opacity: 0;
    transition: color .35s var(--e-out);
}

/* the measured rule above each heading */
#process .mrn-step h4::before {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin: 0 auto 14px;
    background: linear-gradient(90deg, var(--cyan-deep), rgba(34, 179, 230, 0));
    transition: width .45s var(--e-out), background .45s var(--e-out);
}

#process .mrn-step p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.8;
    color: var(--body-on-light);
    /* #4a6076 on #ffffff = 7.0:1 */
    max-width: 27ch;
    margin: 0 auto;
    opacity: 0;
}

#process .mrn-flow.mrn-in .mrn-step h4 {
    animation: prcTextIn .7s var(--e-out) both;
    animation-delay: calc(var(--mrn-delay, 0ms) + 140ms);
}

#process .mrn-flow.mrn-in .mrn-step p {
    animation: prcTextIn .7s var(--e-out) both;
    animation-delay: calc(var(--mrn-delay, 0ms) + 220ms);
}

@keyframes prcTextIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- the raise ------------------------------------------------------------ */
/* `translate` (not `transform`) carries the lift, because the entry keyframes
   own `transform` on these nodes and animation-fill-mode would otherwise
   freeze them. :focus-within is mirrored so a control dropped in here later
   is never hover-only. */

#process .mrn-step:hover .mrn-step__dot,
#process .mrn-step:focus-within .mrn-step__dot {
    translate: 0 -9px;
    border-color: rgba(53, 198, 244, .62);
    background:
        radial-gradient(118% 118% at 12% 6%, rgba(53, 198, 244, .34), transparent 62%),
        linear-gradient(158deg, var(--navy) 0%, var(--panel) 46%, var(--ink) 100%);
    box-shadow:
        var(--lift-2),
        var(--glow-cyan),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -1px 0 rgba(4, 18, 31, .6);
}

#process .mrn-step:hover .mrn-step__dot svg,
#process .mrn-step:focus-within .mrn-step__dot svg {
    transform: translateZ(24px) scale(1.05);
}

#process .mrn-step:hover .mrn-step__dot::after,
#process .mrn-step:focus-within .mrn-step__dot::after {
    translate: -2px -3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 -2px 4px -2px rgba(4, 18, 31, .55),
        0 14px 26px -12px rgba(4, 18, 31, .9),
        0 0 0 4px rgba(34, 179, 230, .16);
}

#process .mrn-step:hover h4,
#process .mrn-step:focus-within h4 {
    color: var(--cyan-deep);
}

#process .mrn-step:hover h4::before,
#process .mrn-step:focus-within h4::before {
    width: 46px;
    background: linear-gradient(90deg, var(--cyan-bright), var(--cyan-deep));
}

/* ==========================================================================
   PROCESS — responsive
   1200: same four-across diagram, metrics tightened; connector geometry
         follows --prc-tile / --prc-gap automatically.
    991: the diagram turns vertical. One column, each step becomes a
         dot-left row, and the connector becomes a single continuous rail
         down the left at the tile centre-line.
    767: same vertical rail, smaller hardware and type.
   ========================================================================== */

@media (max-width: 1200px) {
    #process {
        --prc-tile: 76px;
        --prc-gap: 18px;
    }

    #process .mrn-flow {
        margin-top: 54px;
    }

    #process .mrn-step {
        padding: 0 6px;
    }

    #process .mrn-step__dot {
        border-radius: 14px;
        margin-bottom: 22px;
    }

    #process .mrn-step__dot svg {
        width: 30px;
        height: 30px;
    }

    #process .mrn-step__dot::after {
        width: 32px;
        height: 24px;
        top: -10px;
        left: -10px;
        font-size: 13px;
    }

    #process .mrn-step h4 {
        font-size: 16.5px;
        letter-spacing: 1.1px;
    }

    #process .mrn-step h4::before {
        margin-bottom: 12px;
    }

    #process .mrn-step p {
        font-size: 13.5px;
        line-height: 1.75;
        max-width: 30ch;
    }
}

@media (max-width: 991px) {
    #process {
        --prc-tile: 72px;
    }

    #process .mrn-flow {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 34px;
        column-gap: 0;
        margin: 44px auto 0;
        max-width: 620px;
        perspective: 900px;
        perspective-origin: 50% 50%;
    }

    #process .mrn-step {
        grid-row: auto;
        grid-template-rows: none;
        grid-template-columns: var(--prc-tile) 1fr;
        column-gap: 22px;
        align-items: start;
        text-align: left;
        padding: 0;
    }

    /* per-step segments give way to one continuous rail */
    #process .mrn-step::before,
    #process .mrn-step::after {
        display: none;
    }

    #process .mrn-flow::before {
        left: calc(var(--prc-tile) / 2 - 1px);
        right: auto;
        top: calc(var(--prc-tile) / 2);
        bottom: 26px;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg,
                var(--prc-track) 0 7px,
                transparent 7px 15px);
    }

    #process .mrn-flow::after {
        content: "";
        position: absolute;
        left: calc(var(--prc-tile) / 2 - 1px);
        top: calc(var(--prc-tile) / 2);
        bottom: 26px;
        width: 2px;
        border-radius: 1px;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg,
                var(--cyan-deep) 0%,
                var(--cyan-bright) 74%,
                var(--gold) 100%);
        box-shadow: 0 0 16px -3px rgba(34, 179, 230, .6);
        transform: scaleY(0);
        transform-origin: 50% 0;
        transition: transform 1.3s var(--e-out) .18s, opacity .4s var(--e-out);
    }

    #process .mrn-flow.mrn-in::after {
        transform: scaleY(1);
    }

    #process .mrn-flow:hover::after,
    #process .mrn-flow:focus-within::after {
        opacity: .24;
    }

    #process .mrn-step__dot {
        grid-row: 1 / span 2;
        grid-column: 1;
        margin: 0;
    }

    #process .mrn-step h4 {
        grid-column: 2;
        margin: 0 0 8px;
    }

    #process .mrn-step h4::before {
        margin: 0 0 10px;
    }

    #process .mrn-step p {
        grid-column: 2;
        max-width: 48ch;
        margin: 0;
    }
}

@media (max-width: 767px) {
    #process {
        --prc-tile: 58px;
    }

    #process .mrn-flow {
        row-gap: 28px;
        margin-top: 36px;
        perspective: 700px;
    }

    #process .mrn-flow::before,
    #process .mrn-flow::after {
        bottom: 18px;
    }

    #process .mrn-step {
        column-gap: 16px;
    }

    #process .mrn-step__dot {
        border-radius: 12px;
    }

    #process .mrn-step__dot svg {
        width: 26px;
        height: 26px;
    }

    #process .mrn-step__dot::after {
        width: 28px;
        height: 21px;
        top: -9px;
        left: -9px;
        border-radius: 3px;
        font-size: 11.5px;
    }

    #process .mrn-step h4 {
        font-size: 15.5px;
        letter-spacing: 1px;
    }

    #process .mrn-step h4::before {
        width: 22px;
        margin-bottom: 8px;
    }

    #process .mrn-step p {
        font-size: 13.5px;
        line-height: 1.72;
    }
}

/* ==========================================================================
   PROCESS — reduced motion
   Everything resolves to its finished state: tiles and plates present, the
   connector drawn full length, no entry animation, no pointer damping.
   (marine.js already skips data-mrn-tilt entirely under this preference.)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #process .mrn-step,
    #process .mrn-step::before,
    #process .mrn-step::after,
    #process .mrn-step__dot,
    #process .mrn-step__dot::after,
    #process .mrn-step__dot svg,
    #process .mrn-step h4,
    #process .mrn-step h4::before,
    #process .mrn-step p,
    #process .mrn-flow::before,
    #process .mrn-flow::after,
    #process .mrn-flow.mrn-in .mrn-step__dot,
    #process .mrn-flow.mrn-in .mrn-step__dot::after,
    #process .mrn-flow.mrn-in .mrn-step h4,
    #process .mrn-flow.mrn-in .mrn-step p {
        animation: none;
        transition: none;
    }

    #process .mrn-step__dot,
    #process .mrn-step__dot::after,
    #process .mrn-step h4,
    #process .mrn-step p,
    #process .mrn-step::after,
    #process .mrn-flow::after {
        opacity: 1;
        transform: none;
        translate: none;
    }
}

/* ==========================================================================
   JOURNEY — #journey  (index.html section id="journey"; supersedes marine.css
   8. JOURNEY TIMELINE, lines 1416-1515)
   ==========================================================================
   Dark band, five stations on a measured spine. The spine is a dashed
   engineering rule; the scroll-linked #mrnTimelineProgress overwrites it in
   solid cyan, so "already travelled" reads as a material difference, not a
   colour tweak. Dots are machined rings that light when their entry enters
   the viewport (reusing the .mrn-in class marine.js already sets — no new JS).
   Years are the data: Oswald display figures with a spec-sheet index (CSS
   counter, zero markup). Both columns read left-aligned inside a hairline
   panel and are tied back to the spine by a 1px arm, so the alternation is
   carried by position, not by ragged-left body copy.
   Amber budget for this section: the final "Looking Forward" dot only.
   Palette debt: grepped marine.css 1416-1515 for rgba(0,0,142 /
   rgba(1,114,128 / rgba(10,159,176 / rgba(178,236,255 — zero hits. This range
   is clean; its literals were all amber and white, which is the problem the
   rules below solve rather than a retheme leak.
   ========================================================================== */

#journey {
    /* geometry, one source of truth so dot / arm / panel never drift */
    --tl-arm: 56px;
    /* spine -> panel edge */
    --tl-pad: 30px;
    /* panel inner padding */
    --tl-gap: 56px;
    /* vertical gap between stations */
    --tl-dot: 20px;
    --tl-dot-top: 30px;
    --tl-rail: 3px;
    --tl-lead: calc(var(--tl-dot-top) + var(--tl-dot) / 2);
    /* first dot centre */
    overflow: hidden;
    /* contains the parallax plate */
}

/* --------------------------------------------------------------------------
   1. Atmospheric plate — a real yard photograph, duotoned into the palette
   Decorative only (aria-hidden). Masked away from the spine and panels, and
   every panel carries its own >=88% navy ground, so no text sits on the photo.
   -------------------------------------------------------------------------- */

#journey .mrn-journey__plate {
    position: absolute;
    top: -140px;
    bottom: -140px;
    right: 0;
    left: auto;
    width: min(62%, 860px);
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(17, 149, 207, .9) 0%, rgba(7, 26, 46, .95) 100%),
        url("../images/gallery/6.jpg");
    background-blend-mode: color, normal;
    background-size: cover, cover;
    background-position: center, center 42%;
    background-repeat: no-repeat;
    filter: contrast(1.06) brightness(.6) saturate(.85);
    opacity: .52;
    -webkit-mask-image: radial-gradient(118% 78% at 100% 46%, #000 12%, rgba(0, 0, 0, .55) 46%, transparent 80%);
    mask-image: radial-gradient(118% 78% at 100% 46%, #000 12%, rgba(0, 0, 0, .55) 46%, transparent 80%);
}

/* --------------------------------------------------------------------------
   2. The spine
   -------------------------------------------------------------------------- */

#journey .mrn-timeline {
    position: relative;
    margin-top: 4px;
    padding-left: 0;
    list-style: none;
    counter-reset: tl;
}

/* unpassed track: a dashed measure, not a solid bar */
#journey .mrn-timeline::before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--tl-rail);
    margin-left: calc(var(--tl-rail) / -2);
    background-color: transparent;
    background-image: repeating-linear-gradient(180deg,
            rgba(255, 255, 255, .20) 0 7px,
            rgba(255, 255, 255, 0) 7px 15px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--tl-lead), #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--tl-lead), #000 calc(100% - 40px), transparent 100%);
}

/* passed track: solid cyan, lit */
#journey .mrn-timeline__progress {
    left: 50%;
    top: 0;
    width: var(--tl-rail);
    margin-left: calc(var(--tl-rail) / -2);
    border-radius: 0 0 2px 2px;
    background: linear-gradient(180deg, var(--cyan-deep) 0%, var(--cyan) 45%, var(--cyan-bright) 100%);
    box-shadow:
        0 0 14px rgba(34, 179, 230, .70),
        0 0 40px rgba(34, 179, 230, .32);
    transition: height .18s linear;
    will-change: height;
    /* deliberately NO z-index: [data-mrn-reveal] puts will-change:transform on
       every .mrn-tl, which makes each one a stacking context. Leaving the
       progress line at z-index:auto keeps DOM order — dashed track, then the
       cyan line, then the dots on top of it. Any positive z-index here and the
       line would be painted straight through the machined rings. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--tl-lead));
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--tl-lead));
}

/* --------------------------------------------------------------------------
   3. Stations — panel, arm, alternation
   -------------------------------------------------------------------------- */

#journey .mrn-tl {
    position: relative;
    width: 50%;
    counter-increment: tl;
    text-align: left;
    /* odd column: panel on the left, arm reaching right to the spine */
    padding:
        26px
        calc(var(--tl-arm) + var(--tl-pad))
        calc(var(--tl-gap) + var(--tl-pad))
        var(--tl-pad);
}

#journey .mrn-tl:nth-of-type(odd) {
    text-align: left;
}

#journey .mrn-tl:nth-of-type(even) {
    margin-left: 50%;
    text-align: left;
    padding:
        26px
        var(--tl-pad)
        calc(var(--tl-gap) + var(--tl-pad))
        calc(var(--tl-arm) + var(--tl-pad));
}

#journey .mrn-tl:last-of-type {
    padding-bottom: var(--tl-pad);
}

/* -- panel ground. Drawn as a pseudo so the <li> itself never takes a
      transform: marine.js writes translateX on [data-mrn-reveal] and the two
      would fight. Hover lift comes from shadow + border instead. -- */
#journey .mrn-tl::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: var(--tl-gap);
    left: 0;
    right: var(--tl-arm);
    border-radius: 3px;
    border: 1px solid var(--hairline);
    background:
        linear-gradient(152deg, rgba(13, 41, 71, .94) 0%, rgba(7, 26, 46, .88) 100%);
    box-shadow: var(--lift-1);
    transition:
        border-color .55s var(--e-out),
        box-shadow .55s var(--e-out),
        background-color .55s var(--e-out);
}

#journey .mrn-tl:nth-of-type(even)::before {
    left: var(--tl-arm);
    right: 0;
}

#journey .mrn-tl:last-of-type::before {
    bottom: 0;
}

/* -- the arm: 1px tie from the spine into the panel, at dot height -- */
#journey .mrn-tl::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--tl-lead);
    right: 0;
    left: auto;
    width: var(--tl-arm);
    height: 1px;
    background: linear-gradient(90deg, rgba(34, 179, 230, .10), rgba(34, 179, 230, .30));
    transition: background .6s var(--e-out);
}

#journey .mrn-tl:nth-of-type(even)::after {
    right: auto;
    left: 0;
    background: linear-gradient(270deg, rgba(34, 179, 230, .10), rgba(34, 179, 230, .30));
}

#journey .mrn-tl.mrn-in::after {
    background: linear-gradient(90deg, rgba(34, 179, 230, .05), rgba(53, 198, 244, .62));
}

#journey .mrn-tl:nth-of-type(even).mrn-in::after {
    background: linear-gradient(270deg, rgba(34, 179, 230, .05), rgba(53, 198, 244, .62));
}

/* text sits above panel + arm */
#journey .mrn-tl__year,
#journey .mrn-tl h4,
#journey .mrn-tl p {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Machined dot — lights once the spine has reached it
   .mrn-in is set by marine.js's IntersectionObserver at roughly the same
   scroll position the progress line arrives, so no extra JS is needed.
   -------------------------------------------------------------------------- */

#journey .mrn-tl__dot {
    top: var(--tl-dot-top);
    right: calc(var(--tl-dot) / -2);
    left: auto;
    width: var(--tl-dot);
    height: var(--tl-dot);
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid rgba(255, 255, 255, .22);
    box-shadow: 0 0 0 4px rgba(7, 26, 46, .9);
    z-index: 3;
    transition:
        transform .55s var(--e-out),
        border-color .55s var(--e-out),
        box-shadow .55s var(--e-out);
}

#journey .mrn-tl:nth-of-type(even) .mrn-tl__dot {
    right: auto;
    left: calc(var(--tl-dot) / -2);
}

/* core */
#journey .mrn-tl__dot::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--cyan-bright);
    opacity: 0;
    transform: scale(.2);
    transition:
        opacity .4s linear .16s,
        transform .6s var(--e-out) .16s,
        background-color .4s var(--e-out);
}

/* machined outer ring */
#journey .mrn-tl__dot::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .13);
    opacity: 0;
    transition:
        opacity .6s var(--e-out) .24s,
        border-color .5s var(--e-out);
}

#journey .mrn-tl.mrn-in .mrn-tl__dot {
    border-color: var(--cyan-bright);
    box-shadow:
        0 0 0 4px rgba(7, 26, 46, .9),
        0 0 0 9px rgba(34, 179, 230, .10),
        0 0 22px rgba(34, 179, 230, .55);
}

#journey .mrn-tl.mrn-in .mrn-tl__dot::before {
    opacity: 1;
    transform: scale(1);
}

#journey .mrn-tl.mrn-in .mrn-tl__dot::after {
    opacity: 1;
    border-color: rgba(34, 179, 230, .32);
}

/* the one amber moment: the last station is the goal marker */
#journey .mrn-tl:last-of-type .mrn-tl__dot::before {
    background: var(--gold);
}

#journey .mrn-tl:last-of-type.mrn-in .mrn-tl__dot {
    border-color: var(--gold);
    box-shadow:
        0 0 0 4px rgba(7, 26, 46, .9),
        0 0 0 9px rgba(255, 173, 24, .10),
        0 0 22px rgba(255, 173, 24, .48);
}

#journey .mrn-tl:last-of-type.mrn-in .mrn-tl__dot::after {
    border-color: rgba(255, 173, 24, .34);
}

/* --------------------------------------------------------------------------
   5. Typography — the year is the data
   -------------------------------------------------------------------------- */

#journey .mrn-tl__year {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: 1.02;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cyan-bright);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    /* unwind the amber pill from marine.css:1487 */
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 13px;
}

/* spec-sheet station index — pure CSS counter, no markup */
#journey .mrn-tl__year::before {
    content: "0" counter(tl);
    margin-right: 13px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 2.6px;
    color: rgba(167, 187, 207, .78);
}

#journey .mrn-tl__year::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 13px;
    background: linear-gradient(90deg, rgba(34, 179, 230, .55) 0%, rgba(34, 179, 230, .08) 58%, transparent 100%);
}

#journey .mrn-tl:last-of-type .mrn-tl__year::after {
    background: linear-gradient(90deg, rgba(255, 173, 24, .5) 0%, rgba(255, 173, 24, .07) 58%, transparent 100%);
}

#journey .mrn-tl h4 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 11px;
}

#journey .mrn-tl p {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.82;
    color: var(--body-on-dark);
    max-width: 52ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   6. Hover / focus — depth from shadow and ring, never from a transform on
   the <li> (see note at .mrn-tl::before)
   -------------------------------------------------------------------------- */

#journey .mrn-tl:hover::before,
#journey .mrn-tl:focus-within::before,
#journey .mrn-tl:focus-visible::before {
    border-color: rgba(34, 179, 230, .45);
    background:
        linear-gradient(152deg, rgba(18, 55, 92, .96) 0%, rgba(8, 30, 52, .92) 100%);
    box-shadow:
        var(--lift-3),
        0 0 0 1px rgba(34, 179, 230, .16),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

#journey .mrn-tl:hover .mrn-tl__dot {
    transform: scale(1.14);
}

#journey .mrn-tl:hover .mrn-tl__dot::after {
    border-color: rgba(53, 198, 244, .68);
    animation: mrnTlRing 16s linear infinite;
}

#journey .mrn-tl:last-of-type:hover .mrn-tl__dot::after {
    border-color: rgba(255, 194, 71, .66);
}

@keyframes mrnTlRing {
    to {
        transform: rotate(360deg);
    }
}

/* css/style.css:91 sets a:focus{outline:0} globally — restore a real ring for
   anything focusable that lives inside a station. */
#journey .mrn-tl:focus-visible,
#journey .mrn-tl a:focus-visible,
#journey .mrn-tl button:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. Responsive
   1200px : arm/padding/gap tighten, alternation kept — the ~480px measure
            inside each panel would otherwise drop below ~40 characters.
    991px : alternation collapses to ONE left rail. Spine moves to the dot's
            radius, every station goes full width, panel and arm are forced
            to the even-column geometry so odd rows stop mirroring.
    767px : dot and spine shrink, panel padding drops to 20px, year steps down
            to a 22-26px range so "Looking Forward" stays on one line.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    #journey {
        --tl-arm: 44px;
        --tl-pad: 26px;
        --tl-gap: 48px;
    }

    #journey .mrn-tl__year {
        font-size: clamp(24px, 2.6vw, 30px);
    }

    #journey .mrn-journey__plate {
        width: min(70%, 720px);
        opacity: .44;
    }
}

@media (max-width: 991px) {
    #journey {
        --tl-arm: 42px;
        --tl-pad: 24px;
        --tl-gap: 42px;
        --tl-dot-top: 26px;
    }

    #journey .mrn-timeline::before,
    #journey .mrn-timeline__progress {
        left: calc(var(--tl-dot) / 2);
    }

    #journey .mrn-tl,
    #journey .mrn-tl:nth-of-type(odd),
    #journey .mrn-tl:nth-of-type(even) {
        width: 100%;
        margin-left: 0;
        text-align: left;
        padding:
            22px
            var(--tl-pad)
            calc(var(--tl-gap) + var(--tl-pad))
            calc(var(--tl-arm) + var(--tl-pad));
    }

    #journey .mrn-tl:last-of-type {
        padding-bottom: var(--tl-pad);
    }

    #journey .mrn-tl::before,
    #journey .mrn-tl:nth-of-type(even)::before {
        left: var(--tl-arm);
        right: 0;
    }

    #journey .mrn-tl::after,
    #journey .mrn-tl:nth-of-type(even)::after {
        left: 0;
        right: auto;
        background: linear-gradient(270deg, rgba(34, 179, 230, .10), rgba(34, 179, 230, .30));
    }

    #journey .mrn-tl.mrn-in::after,
    #journey .mrn-tl:nth-of-type(even).mrn-in::after {
        background: linear-gradient(270deg, rgba(34, 179, 230, .05), rgba(53, 198, 244, .62));
    }

    #journey .mrn-tl__dot,
    #journey .mrn-tl:nth-of-type(even) .mrn-tl__dot {
        left: 0;
        right: auto;
    }

    #journey .mrn-journey__plate {
        top: -100px;
        bottom: -100px;
        width: 100%;
        opacity: .3;
        -webkit-mask-image: radial-gradient(120% 68% at 82% 34%, #000 8%, rgba(0, 0, 0, .5) 44%, transparent 82%);
        mask-image: radial-gradient(120% 68% at 82% 34%, #000 8%, rgba(0, 0, 0, .5) 44%, transparent 82%);
    }
}

@media (max-width: 767px) {
    #journey {
        --tl-arm: 34px;
        --tl-pad: 20px;
        --tl-gap: 34px;
        --tl-dot: 16px;
        --tl-dot-top: 22px;
        --tl-rail: 2px;
    }

    #journey .mrn-timeline::before,
    #journey .mrn-timeline__progress {
        left: calc(var(--tl-dot) / 2);
    }

    #journey .mrn-tl,
    #journey .mrn-tl:nth-of-type(odd),
    #journey .mrn-tl:nth-of-type(even) {
        padding:
            20px
            var(--tl-pad)
            calc(var(--tl-gap) + var(--tl-pad))
            calc(var(--tl-arm) + var(--tl-pad));
    }

    #journey .mrn-tl__year {
        font-size: clamp(22px, 6.6vw, 26px);
        letter-spacing: 1px;
        margin-bottom: 11px;
    }

    #journey .mrn-tl__year::before {
        font-size: 11.5px;
        margin-right: 10px;
        letter-spacing: 2.2px;
    }

    #journey .mrn-tl__year::after {
        margin-top: 11px;
    }

    #journey .mrn-tl h4 {
        font-size: 17px;
        letter-spacing: 1.3px;
    }

    #journey .mrn-tl p {
        font-size: 14px;
        line-height: 1.78;
    }

    #journey .mrn-journey__plate {
        opacity: .22;
    }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   marine.css:296 already forces transition-duration:.001ms !important, so
   only the named animation and the parallax layer need answering here.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #journey .mrn-tl:hover .mrn-tl__dot::after {
        animation: none;
    }

    #journey .mrn-tl__dot,
    #journey .mrn-tl__dot::before,
    #journey .mrn-tl__dot::after,
    #journey .mrn-tl::before,
    #journey .mrn-tl::after,
    #journey .mrn-timeline__progress {
        transition: none;
    }

    #journey .mrn-tl__dot::before,
    #journey .mrn-tl__dot::after {
        opacity: 1;
        transform: none;
    }

    #journey .mrn-tl:hover .mrn-tl__dot {
        transform: none;
    }

    #journey .mrn-journey__plate {
        transform: none;
    }
}

/* ==========================================================================
   SECTION: COMMITMENT  (#commitment)  — "three disciplines, three steel plates"
   ==========================================================================
   Rebuilds index.html 567-644 on the new palette. Answers the legacy rgba()
   literals in css/marine.css 1063-1212 that no token can reach:
     marine.css:1084  rgba(0,0,142,.6)                    .mrn-card box-shadow
     marine.css:1089  rgba(0,0,142,.8)                    .mrn-card:hover shadow
     marine.css:1117  rgba(3,6,28,.12) / rgba(0,0,142,.72)
                      / rgba(3,6,28,.95)                  .mrn-card__veil bg
     marine.css:1121  rgba(1,114,128,.25) / rgba(0,0,142,.82)
                      / rgba(3,6,28,.96)                  veil :hover bg
   Also answers, in the same range:
     marine.css:1076  overflow:hidden  — forces transform-style to `flat`, so
                      every translateZ inside the card was being dropped
     marine.css:1082  `transform` in the transition list — fights the INLINE
                      transform data-mrn-tilt writes on this same node
     marine.css:1088  transform:translateY(-14px) as the hover lift — same
     marine.css:1107  scale(1.14) rotate(1.2deg) on the photo
     marine.css:1123-1145  glass pill icon, amber, rotating on hover
     marine.css:1166-1180  body copy collapsed to max-height:0 until :hover
     marine.css:1191-1204  amber "Read More" and its amber bar
     marine.css:1892 / 1931-1939  a 1100/860 grid cadence out of step with the
                      page's 1200/991/767 system
   Intent: each discipline becomes a plate — a tall photograph pushed into a
   navy duotone with a plotted survey grid over it, a machined cyan plate
   carrying the icon straddling the image/body seam, an Oswald title on a solid
   ink panel where contrast is deterministic, and a measured footer rule with a
   cyan arrow that extends on hover. Cyan leads; the section spends its single
   amber moment on hazard tape under the Health & Safety plate.
   ========================================================================== */

#commitment {
    /* section-scoped knobs only — no :root additions */
    --cm-img-h: 288px;
    --cm-pad: 30px;
    --cm-radius: 4px;
    --cm-body: #b6cadd;
    /* #b6cadd on the panel top #0a2340 = 9.0:1, on the panel bottom
       #071a2e = 10.6:1 — both clear 4.5:1 with a wide margin, and the panel
       is opaque so the ratio does not depend on the photograph above it */
    --cm-ring: rgba(34, 179, 230, .20);
    --cm-ring-hot: rgba(53, 198, 244, .60);
    --cm-panel-top: #0a2340;
    --cm-panel-bot: #071a2e;
}

/* --- ground: the engineering grid .mrn-light does not get from the
       foundation (only .mrn-soft and .mrn-dark carry one), weighted under the
       card row so the white band stops reading as empty paper --- */
#commitment::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(7, 26, 46, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(7, 26, 46, .055) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(ellipse 82% 64% at 50% 66%, #000 8%, transparent 78%);
    mask-image: radial-gradient(ellipse 82% 64% at 50% 66%, #000 8%, transparent 78%);
}

#commitment::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(900px 420px at 50% 86%, rgba(34, 179, 230, .07), transparent 72%);
}

/* ==========================================================================
   1. The row
   ========================================================================== */

#commitment .mrn-cards {
    counter-reset: cmCard;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    /* the foundation already gives .mrn-center a 66px bottom margin; marine's
       own 56px margin-top on top of that opened a 122px hole */
    margin-top: 0;
    /* markup patch A adds .d3-stage, which supplies exactly this. Declared
       here too so the tilt still has a perspective if that patch is dropped. */
    perspective: 1100px;
}

/* ==========================================================================
   2. The plate
   `data-mrn-tilt="5"` writes an INLINE transform on <article>, so this node
   must never take its hover lift from transform, and `transform` must stay out
   of its transition list. Lift = shadow + ring. Clipping moves off the card
   (overflow:hidden would force transform-style to `flat` and kill the Z pop)
   and onto .mrn-card__img, which is the only thing that needs clipping.
   ========================================================================== */

#commitment .mrn-card {
    counter-increment: cmCard;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    /* answers marine.css:1076 */
    overflow: visible;
    border-radius: var(--cm-radius);
    background: linear-gradient(180deg, var(--cm-panel-top) 0%, var(--cm-panel-bot) 100%);
    transform-style: preserve-3d;
    /* answers marine.css:1084 rgba(0,0,142,.6) */
    box-shadow: 0 26px 54px -34px rgba(4, 18, 31, .72);
    /* answers marine.css:1082 — transform deliberately absent */
    transition: box-shadow .55s var(--e-out);
    will-change: transform;
}

#commitment .mrn-card:hover,
#commitment .mrn-card:focus-within {
    /* answers marine.css:1088-1090 */
    transform: none;
    box-shadow:
        0 44px 84px -34px rgba(4, 18, 31, .86),
        0 20px 46px -30px rgba(34, 179, 230, .52);
}

/* --- hairline ring, painted over image and panel alike so the plate has one
       continuous edge instead of two materials meeting --- */
#commitment .mrn-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border: 1px solid var(--cm-ring);
    border-radius: var(--cm-radius);
    transition: border-color .55s var(--e-out), box-shadow .55s var(--e-out);
}

#commitment .mrn-card:hover::after {
    border-color: var(--cm-ring-hot);
}

/* --- spec index: 01 / 02 / 03, from a CSS counter, no markup cost --- */
#commitment .mrn-card::before {
    content: counter(cmCard, decimal-leading-zero);
    position: absolute;
    top: 15px;
    right: 16px;
    z-index: 4;
    padding-left: 9px;
    border-left: 2px solid var(--cyan-bright);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2.4px;
    color: rgba(223, 244, 255, .88);
    text-shadow: 0 2px 10px rgba(4, 18, 31, .95);
    pointer-events: none;
}

/* ==========================================================================
   3. Footage — a real image box, not a background the copy floats over
   ========================================================================== */

#commitment .mrn-card__img {
    /* answers marine.css:1092-1096 (position:absolute; inset:0; z-index:-2) */
    position: relative;
    inset: auto;
    z-index: 1;
    flex: 0 0 auto;
    height: var(--cm-img-h);
    overflow: hidden;
    border-radius: var(--cm-radius) var(--cm-radius) 0 0;
    background: var(--navy-ink);
}

#commitment .mrn-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* navy duotone base: strip most of the colour and drop the exposure, then
       let the veil put the palette's hue back on top */
    filter: grayscale(.46) saturate(.82) contrast(1.09) brightness(.84);
    transform: scale(1.015);
    transition: transform 1.5s var(--e-out), filter .8s var(--e-out);
}

/* answers marine.css:1106-1109 — a 1.2deg rotate on a photo inside a squared
   frame exposes the corners and reads playful. Straight, slow push-in. */
#commitment .mrn-card:hover .mrn-card__img img {
    transform: scale(1.075);
    filter: grayscale(.12) saturate(1) contrast(1.05) brightness(.96);
}

/* crops tuned per photograph (see markup patches E-G) */
#commitment .mrn-card:nth-of-type(1) .mrn-card__img img {
    object-position: 50% 44%;
}

#commitment .mrn-card:nth-of-type(2) .mrn-card__img img {
    object-position: 50% 46%;
}

#commitment .mrn-card:nth-of-type(3) .mrn-card__img img {
    object-position: 50% 58%;
}

/* plotted survey grid over the footage — the drawing-sheet cue */
#commitment .mrn-card__img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(53, 198, 244, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(53, 198, 244, .08) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(202deg, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 78%);
    mask-image: linear-gradient(202deg, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 78%);
}

/* ==========================================================================
   4. Veil — answers marine.css:1117 and marine.css:1121 in full
   The veil is repositioned to cover the image box only (it was inset:0 over a
   card whose photo was the whole background); the body panel below it is
   opaque, so body copy contrast no longer depends on the photograph.
   `#commitment .mrn-card__veil` is (1,1,0) and marine's hover rule is (0,3,0),
   so this background wins in both states — the hover change is opacity only.
   ========================================================================== */

#commitment .mrn-card__veil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 3;
    width: auto;
    height: var(--cm-img-h);
    pointer-events: none;
    border-radius: var(--cm-radius) var(--cm-radius) 0 0;
    background:
        linear-gradient(180deg, rgba(4, 18, 31, .62) 0%, rgba(4, 18, 31, .16) 34%, rgba(7, 26, 46, .52) 76%, rgba(7, 26, 46, .96) 100%),
        linear-gradient(148deg, rgba(10, 35, 64, .58) 0%, rgba(10, 35, 64, .10) 44%, rgba(17, 149, 207, .36) 100%);
    transition: opacity .55s var(--e-out);
}

#commitment .mrn-card:hover .mrn-card__veil {
    opacity: .86;
}

/* --- the section's ONE amber moment: hazard tape along the bottom edge of the
       Health & Safety plate, the single card where a yard safety signal is
       literally the subject. Same recipe as the foundation's .hazard-rule,
       placed without a markup change. --- */
#commitment .mrn-card:nth-of-type(2) .mrn-card__veil::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    height: 4px;
    background: repeating-linear-gradient(135deg, var(--gold) 0 10px, #1a1205 10px 20px);
    opacity: .9;
}

/* ==========================================================================
   5. Icon — a machined cyan plate straddling the image/body seam
   Answers marine.css:1123-1145 (frosted white pill, amber glyph, rotating fill)
   ========================================================================== */

#commitment .mrn-card__icon {
    position: absolute;
    top: calc(var(--cm-img-h) - 34px);
    right: auto;
    bottom: auto;
    left: var(--cm-pad);
    z-index: 4;
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 3px;
    /* two bolt heads and a rolled-cyan face */
    background:
        radial-gradient(circle at 10px 10px, rgba(4, 38, 63, .40) 0 1.7px, rgba(4, 38, 63, 0) 2.4px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(4, 38, 63, .40) 0 1.7px, rgba(4, 38, 63, 0) 2.4px),
        linear-gradient(152deg, var(--cyan-bright) 0%, var(--cyan) 46%, var(--cyan-deep) 100%);
    color: #04263f;
    /* backdrop-filter forces transform-style to `flat`; the plate is opaque
       anyway, so it goes — otherwise the Z pop below would be dropped */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
        0 16px 30px -14px rgba(4, 18, 31, .9),
        0 0 0 1px rgba(4, 38, 63, .28),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -2px 0 rgba(4, 38, 63, .22);
    transition: box-shadow .5s var(--e-out), transform .55s var(--e-out);
}

#commitment .mrn-card__icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

/* the plate lifts out of the card in Z rather than rotating. It stays at
   translateZ(0) at rest on purpose: the perspective origin sits at the centre
   of the row, so a resting Z offset would shear the outer cards' plates
   sideways and read as misalignment. During hover the card is tilting under
   the pointer, so the same offset reads as depth. */
#commitment .mrn-card:hover .mrn-card__icon {
    background:
        radial-gradient(circle at 10px 10px, rgba(4, 38, 63, .40) 0 1.7px, rgba(4, 38, 63, 0) 2.4px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(4, 38, 63, .40) 0 1.7px, rgba(4, 38, 63, 0) 2.4px),
        linear-gradient(152deg, #5ad4ff 0%, var(--cyan-bright) 48%, var(--cyan) 100%);
    color: #03202f;
    transform: translateZ(24px);
    box-shadow:
        0 28px 48px -16px rgba(4, 18, 31, .95),
        0 0 0 1px rgba(4, 38, 63, .34),
        0 0 0 6px rgba(34, 179, 230, .16),
        inset 0 1px 0 rgba(255, 255, 255, .66),
        inset 0 -2px 0 rgba(4, 38, 63, .24);
}

/* ==========================================================================
   6. Panel — opaque ink, spec-sheet type
   ========================================================================== */

#commitment .mrn-card__body {
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 50px var(--cm-pad) 26px;
    border-radius: 0 0 var(--cm-radius) var(--cm-radius);
    color: #ffffff;
}

#commitment .mrn-card__body h4 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ffffff;
    /* white on #0a2340 = 15.6:1 */
}

/* answers marine.css:1166-1180. The description was max-height:0/opacity:0
   until :hover, and marine.css:1939 only un-collapsed it below 860px — so on
   every touch device, and on every screen between 861px and 1100px, the card
   rendered a title and a "Read More" with a blank gap between them. Card copy
   is content, not a hover reward. */
#commitment .mrn-card__body p {
    margin: 0 0 24px;
    max-height: none;
    overflow: visible;
    opacity: 1;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--cm-body);
    transition: none;
}

/* ==========================================================================
   7. Footer rule + cyan arrow
   `.mrn-card__more` is a <span>, so the arrow is built from its two pseudos.
   `order` puts both AFTER the anonymous flex item that wraps the label (which
   keeps the initial order:0), so the reading order is  label · shaft · head,
   and `margin-left:auto` on the shaft parks the arrow on the right end of the
   rule. Answers marine.css:1191-1204, which drew an amber 26px bar.
   ========================================================================== */

#commitment .mrn-card__more {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    /* margin-top:auto pins the rule to the bottom of the panel, so the arrow
       lines up across all three cards regardless of copy length */
    margin: auto 0 0;
    padding-top: 18px;
    /* measured rule: a 34px cyan lead-in, then a hairline to the right edge */
    background-image: linear-gradient(90deg, var(--cyan) 0 34px, rgba(255, 255, 255, .13) 34px 100%);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 1px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--cyan-bright);
    /* #35c6f4 on #071a2e = 9.0:1 */
    transition: color .4s var(--e-out);
}

#commitment .mrn-card:hover .mrn-card__more,
#commitment .mrn-card:focus-within .mrn-card__more {
    color: #8fe3ff;
}

/* shaft */
#commitment .mrn-card__more::before {
    content: "";
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    width: 26px;
    height: 1.5px;
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(53, 198, 244, .25), var(--cyan-bright));
    transition: width .5s var(--e-out);
}

/* head — answers marine.css:1194-1200 (26px amber bar) and marine.css:1202-1204
   (its 48px hover width); this selector is (1,1,2) and both of those are
   (0,1,2)/(0,3,2), so it wins on the ID alone */
#commitment .mrn-card__more::after {
    content: "";
    order: 3;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: -5px;
    border-radius: 0;
    background: none;
    border-top: 1.5px solid var(--cyan-bright);
    border-right: 1.5px solid var(--cyan-bright);
    transform: rotate(45deg);
    transition: border-color .4s var(--e-out);
}

#commitment .mrn-card:hover .mrn-card__more::before,
#commitment .mrn-card:focus-within .mrn-card__more::before {
    width: 46px;
}

#commitment .mrn-card:hover .mrn-card__more::after,
#commitment .mrn-card:focus-within .mrn-card__more::after {
    border-top-color: #8fe3ff;
    border-right-color: #8fe3ff;
}

/* ==========================================================================
   8. The link and its focus ring
   The whole card is an inset:0 anchor with no content, and css/style.css:91-93
   `a:focus, a:hover { outline: 0 }` (0,1,0) removes its ring outright — three
   links on this page had no keyboard indication at all. This selector is
   (1,1,1), so it answers that without !important. The card no longer clips
   (overflow:visible above), so an outline offset OUTSIDE the card is fully
   painted, and the card's own ring brightens with it so the indicator plainly
   belongs to the card rather than to an invisible overlay.
   ========================================================================== */

#commitment .mrn-card__link {
    z-index: 6;
    border-radius: var(--cm-radius);
}

#commitment .mrn-card__link:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
}

#commitment .mrn-card:focus-within::after {
    border-color: var(--cm-ring-hot);
    box-shadow: inset 0 0 0 3px rgba(34, 179, 230, .16);
}

/* ==========================================================================
   9. Staggered entrance
   js/marine.js initStagger() writes --mrn-delay onto every child of
   [data-mrn-stagger], but the cards carry no [data-mrn-reveal] of their own,
   so nothing consumed it — the `data-mrn-stagger="150"` in the markup was
   inert. It is consumed here with an OPACITY-ONLY animation: a transform
   keyframe would collide with the inline transform data-mrn-tilt writes on the
   same node, and any grouping property left applied (clip-path, filter) would
   permanently flatten the card's preserve-3d.
   ========================================================================== */

#commitment .mrn-cards.mrn-in .mrn-card {
    animation: cmPlateIn .8s var(--e-out) var(--mrn-delay, 0ms) both;
}

@keyframes cmPlateIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   10. Responsive
   >1200px : 3-up row, 288px image, plate straddling the bottom image edge.
    1200px : still 3-up — three disciplines are one statement and folding them
             to 2+1 orphans the third. Image drops to 248px, gutters to 20px,
             padding and type step down, plate to 60px. This also HOLDS the
             3-up against marine.css:1892, which folds to 2-up at 1100px.
     991px : one card per row, turned on its side — image becomes a 38% left
             column, the veil and its hazard rule rotate to match, the plate
             straddles the vertical seam, and the copy takes the remaining
             62%. This beats an orphaned 2-up and beats a 900px-wide card with
             a 250px-tall letterbox photo. Overrides marine.css:1931-1937.
     767px : back to stacked (a 38% column is too narrow to read at 400px):
             image 228px on top, plate back on the horizontal seam, hazard rule
             back to the bottom edge, panel padding 22px, type down a notch.
   Body copy is visible at every width — it never depends on hover.
   ========================================================================== */

@media (max-width: 1200px) {
    #commitment {
        --cm-img-h: 248px;
        --cm-pad: 24px;
    }

    /* holds the 3-up against marine.css:1892 */
    #commitment .mrn-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    #commitment .mrn-card__icon {
        top: calc(var(--cm-img-h) - 30px);
        width: 60px;
        height: 60px;
    }

    #commitment .mrn-card__icon svg {
        width: 28px;
        height: 28px;
    }

    #commitment .mrn-card__body {
        padding-top: 44px;
    }

    #commitment .mrn-card__body h4 {
        font-size: 19px;
        letter-spacing: 1.1px;
    }

    #commitment .mrn-card__body p {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) {
    #commitment {
        --cm-pad: 26px;
    }

    /* overrides marine.css:1892 (2-up) and marine.css:1931 (1-up at 860) */
    #commitment .mrn-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    #commitment .mrn-card {
        flex-direction: row;
        align-items: stretch;
        /* answers marine.css:1935 min-height:380px, which would leave a tall
           empty panel under a short row card */
        min-height: 0;
    }

    #commitment .mrn-card__img {
        flex: 0 0 38%;
        width: 38%;
        height: auto;
        min-height: 236px;
        border-radius: var(--cm-radius) 0 0 var(--cm-radius);
    }

    #commitment .mrn-card__veil {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: 38%;
        height: auto;
        border-radius: var(--cm-radius) 0 0 var(--cm-radius);
        background:
            linear-gradient(90deg, rgba(4, 18, 31, .46) 0%, rgba(7, 26, 46, .22) 46%, rgba(7, 26, 46, .92) 100%),
            linear-gradient(160deg, rgba(10, 35, 64, .48) 0%, rgba(10, 35, 64, .08) 46%, rgba(17, 149, 207, .34) 100%);
    }

    /* hazard tape follows the seam */
    #commitment .mrn-card:nth-of-type(2) .mrn-card__veil::after {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 4px;
        height: auto;
    }

    /* plate straddles the vertical seam at 38% of the card width */
    #commitment .mrn-card__icon {
        top: auto;
        bottom: 22px;
        left: calc(38% - 30px);
        width: 60px;
        height: 60px;
    }

    #commitment .mrn-card__body {
        /* 52px clears the plate, which reaches 38% + 30px */
        padding: 26px var(--cm-pad) 22px 52px;
    }

    #commitment .mrn-card__body p {
        margin-bottom: 18px;
    }

    #commitment .mrn-card::before {
        top: 13px;
        right: 14px;
    }
}

@media (max-width: 767px) {
    #commitment {
        --cm-img-h: 228px;
        --cm-pad: 22px;
    }

    #commitment .mrn-cards {
        gap: 16px;
    }

    #commitment .mrn-card {
        flex-direction: column;
    }

    #commitment .mrn-card__img {
        flex: 0 0 auto;
        width: auto;
        height: var(--cm-img-h);
        min-height: 0;
        border-radius: var(--cm-radius) var(--cm-radius) 0 0;
    }

    #commitment .mrn-card__img::after {
        background-size: 38px 38px;
    }

    #commitment .mrn-card__veil {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: var(--cm-img-h);
        border-radius: var(--cm-radius) var(--cm-radius) 0 0;
        background:
            linear-gradient(180deg, rgba(4, 18, 31, .60) 0%, rgba(4, 18, 31, .16) 34%, rgba(7, 26, 46, .54) 76%, rgba(7, 26, 46, .96) 100%),
            linear-gradient(148deg, rgba(10, 35, 64, .56) 0%, rgba(10, 35, 64, .10) 44%, rgba(17, 149, 207, .34) 100%);
    }

    #commitment .mrn-card:nth-of-type(2) .mrn-card__veil::after {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 4px;
    }

    #commitment .mrn-card__icon {
        top: calc(var(--cm-img-h) - 28px);
        bottom: auto;
        left: var(--cm-pad);
        width: 54px;
        height: 54px;
    }

    #commitment .mrn-card__icon svg {
        width: 25px;
        height: 25px;
    }

    #commitment .mrn-card__body {
        padding: 40px var(--cm-pad) 22px;
    }

    #commitment .mrn-card__body h4 {
        font-size: 18px;
        letter-spacing: 1px;
    }

    #commitment .mrn-card__body p {
        font-size: 13.8px;
        line-height: 1.78;
        margin-bottom: 18px;
    }

    #commitment .mrn-card__more {
        padding-top: 16px;
        font-size: 11px;
        letter-spacing: 2.2px;
    }

    #commitment .mrn-card::before {
        top: 12px;
        right: 12px;
        font-size: 11px;
        letter-spacing: 2px;
    }
}

/* ==========================================================================
   11. Reduced motion
   js/marine.js initTilt() already returns early under prefers-reduced-motion,
   so no inline transform is ever written and marine.css:294-302 flattens every
   duration. What is left to handle is the hover geometry: the Z pop, the photo
   push-in and the arrow growth would still SNAP into place. They are pinned to
   their resting values instead. The arrowhead's rotate(45deg) is static
   geometry, not motion, so it deliberately survives.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #commitment .mrn-cards.mrn-in .mrn-card {
        animation: none;
        opacity: 1;
    }

    #commitment .mrn-card,
    #commitment .mrn-card::after,
    #commitment .mrn-card__img img,
    #commitment .mrn-card__veil,
    #commitment .mrn-card__icon,
    #commitment .mrn-card__more,
    #commitment .mrn-card__more::before,
    #commitment .mrn-card__more::after {
        transition: none;
    }

    #commitment .mrn-card {
        transform-style: flat;
        will-change: auto;
    }

    #commitment .mrn-card:hover .mrn-card__icon,
    #commitment .mrn-card:focus-within .mrn-card__icon {
        transform: none;
    }

    #commitment .mrn-card:hover .mrn-card__img img {
        transform: scale(1.015);
    }

    #commitment .mrn-card:hover .mrn-card__veil {
        opacity: 1;
    }

    #commitment .mrn-card:hover .mrn-card__more::before,
    #commitment .mrn-card:focus-within .mrn-card__more::before {
        width: 26px;
    }
}

/* ==========================================================================
   SECTION: CREDENTIALS  (#credentials) — "the document shelf"
   ==========================================================================
   Markup    : index.html 646-670 (.mrn-certs > .mrn-certs__track > .mrn-cert)
   Replaces  : css/marine.css 1516-1569 (section 9, CERTIFICATION MARQUEE)

   Legacy rgba() literals inside that range, re-declared below because no
   token reaches them:
     marine.css:1547  .mrn-cert  border      rgba(0, 0, 142, .12)  -> var(--hairline-dark)
     marine.css:1548  .mrn-cert  box-shadow  rgba(0, 0, 142, .7)   -> --navy-ink alpha ramp
   Also answered, from the shared button block, but scoped to this section only
   so the primitive stays untouched:
     marine.css:212   .mrn-btn--navy box-shadow rgba(0,0,142,.9) — already
                      re-declared by the foundation (index-theme.css 265-269)
     marine.css:226   .mrn-btn--navy::before background: var(--grad-gold) —
                      the cyan CTA currently fills AMBER on hover, a hue flip
                      and a second accent. Re-declared to a navy fill here.

   Intent    : nine A4 certificate scans are the trust asset of this business
               and were being cover-cropped into 190x132 LANDSCAPE letterbox
               tiles — you saw a horizontal band out of the middle of each
               document, roughly 22% of the page. They are rebuilt as portrait
               document plates: white paper, hairline mount, the scan sitting
               on it at its true 1:1.414 ratio with a real margin, laid out on
               a lit shelf with hairline datum rules. Hover lifts and nudges
               the plate, the scan pops forward in real perspective and returns
               to full colour, and a cyan edge wipes around the frame.
   Accent    : cyan only. This band is quiet punctuation between the dark
               #commitment section and the dark #yard gallery, so it spends
               ZERO of the amber budget — including on the CTA, whose gold
               hover fill is withdrawn above.
   ========================================================================== */

#credentials {
    /* section-scoped knobs only — no :root additions */
    --cert-w: 200px;
    --cert-h: 250px;
    --cert-gap: 32px;
    --cert-pad: 15px;
    --cert-fade: 130px;
    --cert-ratio: 1240 / 1754;
    /* every scan in images/cert/ is A4 portrait */
}

/* --------------------------------------------------------------------------
   1. Vertical rhythm
   The heading block and the CTA block are both `.mrn-container.mrn-center`,
   which the foundation gives `margin: 0 auto 66px`. On the trailing block that
   66px stacks on top of the section's own 78px bottom padding — 144px of dead
   air under the button, the largest single alignment error in the section.
   Scoped to #credentials so the shared primitive is left alone.
   -------------------------------------------------------------------------- */

#credentials > .mrn-center:first-child {
    margin-bottom: 44px;
}

#credentials > .mrn-center:last-child {
    margin-top: 46px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. The shelf
   marine.css already masks the band's edges (1523-1524) and that mask is the
   right mechanism here — it is alpha-only, so the fade works over the
   `.mrn-soft` gradient without a hardcoded ground colour to keep in sync. It
   is kept and only re-cut so the fade width can scale with the breakpoint.
   The shelf plane, the two hairline datum rules and the cyan datum line fade
   with the tiles, so the whole band dissolves at the viewport edge as one
   object instead of being guillotined.
   -------------------------------------------------------------------------- */

#credentials .mrn-certs {
    padding: 34px 0 42px;
    /* layer 1: a cyan datum line along the top of the shelf.
       layer 2: the lit plane the documents are laid out on. */
    background:
        linear-gradient(90deg,
            rgba(53, 198, 244, 0) 0%,
            rgba(53, 198, 244, .55) 18%,
            rgba(53, 198, 244, .55) 82%,
            rgba(53, 198, 244, 0) 100%) 0 0 / 100% 1px no-repeat,
        linear-gradient(180deg,
            rgba(255, 255, 255, .90) 0%,
            rgba(255, 255, 255, .46) 62%,
            rgba(7, 26, 46, .035) 100%);
    border-top: 1px solid var(--hairline-dark);
    border-bottom: 1px solid var(--hairline-dark);
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0,
            #000 var(--cert-fade),
            #000 calc(100% - var(--cert-fade)),
            transparent 100%);
    mask-image: linear-gradient(90deg,
            transparent 0,
            #000 var(--cert-fade),
            #000 calc(100% - var(--cert-fade)),
            transparent 100%);
}

/* --------------------------------------------------------------------------
   3. Track
   js/marine.js initMarquees() does `track.innerHTML += track.innerHTML`, so
   the loop is seamless only while translateX(-50%) equals exactly one set of
   nine tiles. That means the gap MUST stay per-item `margin-right` (marine.css
   1546) and nothing here may key off :nth-child — nine is odd, so the clone
   set arrives with flipped parity and any odd/even rule would visibly break at
   the seam. Only the tempo changes: 40s -> 56s, ~37px/s, a shelf being walked
   past rather than a logo carousel.
   -------------------------------------------------------------------------- */

#credentials .mrn-certs__track {
    align-items: flex-start;
    animation-duration: 56s;
    animation-timing-function: linear;
    will-change: transform;
}

#credentials .mrn-certs:hover .mrn-certs__track,
#credentials .mrn-certs:focus-within .mrn-certs__track {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   4. The document plate
   marine.css put `filter: grayscale(1); opacity: .72` on the TILE, which
   greyed the white paper as well as the scan and dropped the whole plate to
   72% over a light ground. The desaturation moves to the <img>; the paper
   stays paper. `filter: none` is also load-bearing — a filter on the tile
   would flatten the 3D context its own `perspective` sets up for the scan.
   -------------------------------------------------------------------------- */

#credentials .mrn-cert {
    position: relative;
    box-sizing: border-box;
    /* explicit: the mount padding must come out of the plate, not add to it */
    width: var(--cert-w);
    height: var(--cert-h);
    margin-right: var(--cert-gap);
    padding: var(--cert-pad);
    border-radius: 3px;
    /* squared plate, not a 16px consumer pill */
    background:
        linear-gradient(180deg, rgba(7, 26, 46, 0) 64%, rgba(7, 26, 46, .05) 100%),
        #ffffff;
    /* answers marine.css:1547 rgba(0, 0, 142, .12) */
    border: 1px solid var(--hairline-dark);
    /* answers marine.css:1548 rgba(0, 0, 142, .7) — a two-stop contact +
       ambient ramp reads as a plate resting on the shelf, not a floating card */
    box-shadow:
        0 2px 4px -2px rgba(4, 18, 31, .16),
        0 14px 30px -20px rgba(4, 18, 31, .52);
    filter: none;
    opacity: 1;
    perspective: 700px;
    transition:
        transform .55s var(--e-out),
        box-shadow .55s var(--e-out),
        border-color .55s var(--e-out);
}

/* cyan edge wiping around the frame — the same gradient-border technique the
   foundation ships as `.edge-sweep` (index-theme.css 322-349), inlined here so
   nine tiles do not each need a class in the markup. `inset: 0` resolves to the
   padding box, which is the whole area inside the border. */
#credentials .mrn-cert::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 18%, var(--cyan-bright) 50%, transparent 82%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s var(--e-out), background-position 1s var(--e-out);
}

/* --------------------------------------------------------------------------
   5. The scan
   marine.css:1558-1561 sized the <img> 100% x 100% with object-fit: cover into
   a landscape box, cropping ~78% of the height off every A4 document. Height
   drives the box now and the width follows the true ratio, so nothing is cut —
   the paper simply sits on the plate with a real margin.
   -------------------------------------------------------------------------- */

#credentials .mrn-cert img {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: var(--cert-ratio);
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 1px;
    background: #ffffff;
    /* the scan is white paper on a white plate — it needs its own edge */
    box-shadow:
        0 0 0 1px var(--hairline-dark),
        0 8px 16px -12px rgba(4, 18, 31, .55);
    /* muted at rest so the shelf reads as one material, full colour on hover */
    filter: grayscale(.62) contrast(1.03) brightness(1.01);
    transition:
        transform .55s var(--e-out),
        filter .55s var(--e-out),
        box-shadow .55s var(--e-out);
}

/* --------------------------------------------------------------------------
   6. Hover — plate lifts and is nudged, scan comes forward in real depth
   No data-mrn-tilt on these nodes, so a CSS transform on the tile is safe.
   The nudge is a single fixed direction: see the :nth-child note in 3 above.
   translateZ on the scan is genuine perspective (700px -> ~2.3% growth), which
   the 15px mount absorbs without touching the plate edge.
   -------------------------------------------------------------------------- */

#credentials .mrn-cert:hover {
    transform: translateY(-12px) rotate(-1.1deg);
    border-color: rgba(53, 198, 244, .70);
    box-shadow:
        0 3px 6px -2px rgba(4, 18, 31, .18),
        0 30px 56px -26px rgba(4, 18, 31, .55),
        0 18px 42px -26px rgba(34, 179, 230, .85);
    filter: none;
    opacity: 1;
}

#credentials .mrn-cert:hover::after {
    opacity: 1;
    background-position: -30% 0;
}

#credentials .mrn-cert:hover img {
    transform: translateZ(16px);
    filter: none;
    box-shadow:
        0 0 0 1px rgba(53, 198, 244, .45),
        0 16px 30px -16px rgba(4, 18, 31, .55);
}

/* --------------------------------------------------------------------------
   7. CTA
   marine.css:226 fills .mrn-btn--navy with --grad-gold on hover, so this
   section's cyan button flipped to amber under the pointer — a hue flip and a
   second accent in a band that is meant to spend none. Scoped to #credentials
   so the primitive keeps its own behaviour everywhere else.
   -------------------------------------------------------------------------- */

#credentials .mrn-btn--navy::before {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

/* answers index-theme.css:271-274, which sets #04263f for the amber fill */
#credentials .mrn-btn--navy:hover,
#credentials .mrn-btn--navy:focus {
    color: #ffffff;
    /* 14.9:1 on #0d2947 */
}

/* css/style.css:93 kills outlines globally (a:focus { outline: 0 }), and
   marine.css:232-236 hands a -4px lift to plain :focus, so a mouse click left
   the button parked mid-air with no ring. Ring for keyboards, nothing for mice. */
#credentials .mrn-btn:focus-visible {
    outline: 2px solid var(--navy-deep);
    outline-offset: 3px;
}

#credentials .mrn-btn:focus:not(:focus-visible):not(:hover) {
    transform: none;
}

/* the band becomes a keyboard-reachable scroll region under reduced motion
   (section 10), and focusing it also pauses the loop via :focus-within above */
#credentials .mrn-certs:focus-visible {
    outline: 2px solid var(--cyan-deep);
    outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   8. Touch / no-hover pointers
   Everything above was hover-gated, so on a phone the certificates would stay
   permanently greyed at 62% — the trust asset, muted, forever. On a coarse
   pointer they simply present finished.
   -------------------------------------------------------------------------- */

@media (hover: none) {

    #credentials .mrn-cert img {
        filter: none;
    }

    #credentials .mrn-cert:hover {
        transform: none;
    }

    #credentials .mrn-cert:hover img {
        transform: none;
    }
}

/* ==========================================================================
   9. CREDENTIALS — responsive
   The band is a single-row marquee at every width; it never changes structure,
   only its metric, its fade and its tempo.
     1200px : plate 184x230, gap 28, fade 100. Heading and CTA rhythm unchanged.
              One duplicated set is 1908px, still wider than the viewport, so
              the loop never shows a seam gap.
      991px : plate 168x210, gap 24, fade 72, mount 13. Heading gap 34px, CTA
              gap 36px, band padding 28/34 — the section's own padding has
              already dropped to 60px at this width (foundation 378-389).
      767px : plate 144x182, gap 18, fade 40 so at least two plates are fully
              legible at 360px wide. Band padding 22/28, tempo 42s because the
              track is physically much shorter here and 56s would crawl.
              The CTA goes full-bleed and centred.
   ========================================================================== */

@media (max-width: 1200px) {
    #credentials {
        --cert-w: 184px;
        --cert-h: 230px;
        --cert-gap: 28px;
        --cert-fade: 100px;
    }
}

@media (max-width: 991px) {
    #credentials {
        --cert-w: 168px;
        --cert-h: 210px;
        --cert-gap: 24px;
        --cert-pad: 13px;
        --cert-fade: 72px;
    }

    #credentials > .mrn-center:first-child {
        margin-bottom: 34px;
    }

    #credentials > .mrn-center:last-child {
        margin-top: 36px;
    }

    #credentials .mrn-certs {
        padding: 28px 0 34px;
    }

    #credentials .mrn-certs__track {
        animation-duration: 48s;
    }
}

@media (max-width: 767px) {
    #credentials {
        --cert-w: 144px;
        --cert-h: 182px;
        --cert-gap: 18px;
        --cert-pad: 10px;
        --cert-fade: 40px;
    }

    #credentials > .mrn-center:first-child {
        margin-bottom: 26px;
    }

    #credentials > .mrn-center:last-child {
        margin-top: 30px;
    }

    #credentials .mrn-certs {
        padding: 22px 0 28px;
    }

    #credentials .mrn-certs__track {
        animation-duration: 42s;
    }

    #credentials .mrn-cert {
        border-radius: 2px;
    }

    #credentials .mrn-btn {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   10. CREDENTIALS — reduced motion
   marine.css:294-301 collapses every animation to .001ms with !important,
   which parks the track at translateX(-50%) rather than stopping it — visually
   identical here because the content is duplicated, but it leaves nine of the
   eighteen plates permanently outside an `overflow: hidden` box with no way to
   reach them. The band becomes a horizontal scroll region instead, matching
   the treatment the ticker already uses, and the edge mask is dropped because
   it would fade whichever plate the user has just scrolled to.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #credentials .mrn-certs {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(17, 149, 207, .5) rgba(7, 26, 46, .06);
        -webkit-mask-image: none;
        mask-image: none;
    }

    #credentials .mrn-certs__track,
    #credentials .mrn-certs:hover .mrn-certs__track,
    #credentials .mrn-certs:focus-within .mrn-certs__track {
        animation: none;
        transform: none;
        will-change: auto;
    }

    #credentials .mrn-cert,
    #credentials .mrn-cert::after,
    #credentials .mrn-cert img {
        transition: none;
    }

    /* keep the colour, ring and shadow response — drop only the movement */
    #credentials .mrn-cert:hover {
        transform: none;
    }

    #credentials .mrn-cert:hover img {
        transform: none;
    }
}


/* ==========================================================================
   SECTION: YARD GALLERY  (#yard)  — "the survey sheet"

   Root      : #yard                                   (index.html 673-710)
   Replaces  : css/marine.css 1570-1640 (.mrn-mosaic, .mrn-tile, __cap) and
               its responsive rules at 1944-1947 and 2006-2013.
   Depends on: markup patches A-G (hazard rule, per-tile reveal + aria-label,
               tile 1 src swap off images/gallery/1.jpg).

   PALETTE DEBT ANSWERED
   marine.css:1612 `.mrn-tile::after` painted the caption scrim with
   rgba(0, 0, 142, .82) — the OLD navy. No token reaches inside that rgba(),
   so the whole hover scrim is re-declared here on --ink / --navy-deep.
   (marine.css:1547-1548 also carry old-navy literals, but those sit in
   `.mrn-cert` — section 9, not this one.)

   LAYOUT FIX
   The old 4-column grid placed spans by nth-child and left holes: with
   tile 1 at 2x2, tile 4 at 2x1 and tile 6 at 1x2, rows 3 and 4 finished
   with five empty cells and a ragged bottom edge. Every tile is now placed
   explicitly, so the mosaic is a filled rectangle at every breakpoint:

       [  5  5  1  2 ]      5 = the wide yard photograph, the hero cell
       [  5  5  3  3 ]      1 = images/ship_recycling.jpg, the smallest file,
       [  4  4  6  6 ]          so it gets the smallest cell

   The strongest photograph (gallery/5.jpg, several vessels beached at the
   cutting zone) is promoted to the 2x2 hero cell by grid placement, not by
   reordering the DOM.

   INTENT
   A survey sheet, not a lightbox wall: photos graded into the palette at
   rest (cyan-cast duotone via filter), lifting to full colour under the
   pointer; a cyan corner bracket drawing itself in like a crop mark; the
   caption riding a scrim that slides up behind it; the zoom clipped inside
   the tile. One amber moment only — the hazard rule above the grid.
   ========================================================================== */

#yard {
    --tile-gap: 18px;
    /* row heights track the COLUMN width, not raw vw: the container caps at
       1240px, so a plain vw formula would keep growing the rows after the
       columns had stopped and slowly squash every crop. col ~= .25vw - 25px,
       so row-a ~= col / 1.8 and row-b ~= (2 col + gap) / 2.9. */
    --row-a: clamp(132px, calc(13.9vw - 14px), 166px);
    --row-b: clamp(150px, calc(17.8vw - 18px), 212px);
    --tile-radius: 3px;
    --bracket: 24px;
}

/* the one amber moment in this band — a 96px strip of hazard tape between
   the header copy and the grid. .hazard-rule is the shared utility from the
   foundation; only width and rhythm are set here. */
#yard .mrn-mosaic__rule {
    width: 96px;
    margin: -18px auto 38px;
}

/* ==========================================================================
   1. The grid — explicit placement, filled rectangle, consistent gutters
   ========================================================================== */

#yard .mrn-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: var(--row-a) var(--row-a) var(--row-b);
    gap: var(--tile-gap);
    /* beats marine.css:1578 — .mrn-center already owns 66px of bottom rhythm,
       so the old 56px margin-top stacked to a 122px gap */
    margin-top: 0;
    max-width: 100%;
}

#yard .mrn-tile:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
}

#yard .mrn-tile:nth-child(2) {
    grid-column: 4;
    grid-row: 1;
}

#yard .mrn-tile:nth-child(3) {
    grid-column: 3 / span 2;
    grid-row: 2;
}

#yard .mrn-tile:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 3;
}

#yard .mrn-tile:nth-child(5) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

#yard .mrn-tile:nth-child(6) {
    grid-column: 3 / span 2;
    grid-row: 3;
}

/* ==========================================================================
   2. The tile — a steel plate, not a rounded card
   The lift is shadow + ring only. No transform on the tile itself: these are
   [data-mrn-reveal] targets, and a hover transform would fight the reveal
   transition mid-flight.
   ========================================================================== */

#yard .mrn-tile {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--tile-radius);
    background: var(--panel);
    box-shadow:
        var(--lift-1),
        inset 0 0 0 1px var(--hairline),
        inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: box-shadow .55s var(--e-out);
}

#yard .mrn-tile:hover,
#yard .mrn-tile:focus-visible {
    box-shadow:
        var(--lift-3),
        var(--glow-cyan),
        inset 0 0 0 1px rgba(53, 198, 244, .55),
        inset 0 1px 0 rgba(53, 198, 244, .30);
}

/* css/style.css:92 kills link outlines globally (a:focus{outline:0}); this is
   scoped higher, so no !important is needed */
#yard .mrn-tile:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 3px;
}

/* ==========================================================================
   3. The photograph — absolutely positioned so the row height, never the
   intrinsic image size, decides the tile height. Nothing can push the grid
   wider than its column.
   ========================================================================== */

#yard .mrn-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    object-fit: cover;
    object-position: center 54%;
    z-index: 1;
    /* cyan-cast duotone at rest so the photography sits inside the palette;
       the function list is identical in the hover state so it interpolates */
    filter: saturate(.62) sepia(.18) hue-rotate(168deg) contrast(1.06) brightness(.90);
    transform: scale(1.01);
    transition: transform .9s var(--e-out), filter .6s var(--e-out);
}

#yard .mrn-tile:hover img,
#yard .mrn-tile:focus-visible img {
    filter: saturate(1) sepia(0) hue-rotate(0deg) contrast(1.04) brightness(1);
    transform: scale(1.07);
}

/* the aerials read better with the horizon high in the frame */
#yard .mrn-tile:nth-child(1) img,
#yard .mrn-tile:nth-child(6) img {
    object-position: center 46%;
}

/* ==========================================================================
   4. Scrim — permanent, so the caption clears 4.5:1 with or without hover
   Answers marine.css 1608-1615, which used rgba(0, 0, 142, .82) and only
   appeared on hover, leaving captions invisible on touch.
   Worst case (a blown-white sky under the caption) the caption band sits at
   ~.93 alpha of #04121f: white on ~#0f1c28, comfortably past 4.5:1.
   ========================================================================== */

#yard .mrn-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transform: none;
    background-image:
        linear-gradient(180deg, rgba(7, 26, 46, 0) 0%, rgba(4, 18, 31, .58) 44%, rgba(4, 18, 31, .93) 100%),
        linear-gradient(180deg, rgba(7, 26, 46, .28) 0%, rgba(7, 26, 46, .05) 100%);
    background-repeat: no-repeat;
    background-size: 100% 58%, 100% 100%;
    background-position: 0 100%, 0 0;
    transition: opacity .5s var(--e-out);
}

/* ==========================================================================
   5. Corner brackets — crop marks that draw themselves in, top-left and
   bottom-right, from four background bars. No extra elements.
   ========================================================================== */

#yard .mrn-tile::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background-image:
        linear-gradient(var(--cyan-bright) 0 0),
        linear-gradient(var(--cyan-bright) 0 0),
        linear-gradient(var(--cyan-bright) 0 0),
        linear-gradient(var(--cyan-bright) 0 0);
    background-repeat: no-repeat;
    background-position: left top, left top, right bottom, right bottom;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    transition: opacity .4s var(--e-out), background-size .6s var(--e-out);
}

#yard .mrn-tile:hover::before,
#yard .mrn-tile:focus-visible::before {
    opacity: 1;
    background-size:
        var(--bracket) 2px, 2px var(--bracket),
        var(--bracket) 2px, 2px var(--bracket);
}

/* the hero cell carries a longer bracket — hierarchy, not decoration */
#yard .mrn-tile:nth-child(5) {
    --bracket: 34px;
}

/* ==========================================================================
   6. Caption — always legible, rises on hover, with a cyan measure rule
   Answers marine.css 1617-1638 (caption started at opacity 0 / +16px and was
   reachable only by pointer).
   ========================================================================== */

#yard .mrn-tile__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    padding: 0 20px 18px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(11.5px, .95vw, 13px);
    line-height: 1.25;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 14px rgba(4, 18, 31, .8);
    opacity: 1;
    transform: translateY(0);
    transition: transform .55s var(--e-out);
}

#yard .mrn-tile:hover .mrn-tile__cap,
#yard .mrn-tile:focus-visible .mrn-tile__cap {
    transform: translateY(-10px);
}

/* the scrim that slides up: parked below the tile edge (and clipped by the
   tile's overflow) until the pointer arrives */
#yard .mrn-tile__cap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 18, 31, 0) 0%, rgba(7, 26, 46, .48) 52%, rgba(4, 18, 31, .74) 100%);
    opacity: 0;
    transform: translateY(102%);
    transition: transform .7s var(--e-out), opacity .5s var(--e-out);
}

#yard .mrn-tile:hover .mrn-tile__cap::before,
#yard .mrn-tile:focus-visible .mrn-tile__cap::before {
    opacity: 1;
    transform: translateY(0);
}

/* measure rule under the label */
#yard .mrn-tile__cap::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--cyan-bright), rgba(53, 198, 244, 0));
    transition: width .55s var(--e-out);
}

#yard .mrn-tile:hover .mrn-tile__cap::after,
#yard .mrn-tile:focus-visible .mrn-tile__cap::after {
    width: 54px;
}

/* ==========================================================================
   7. Responsive — measured, not guessed: every number below was read off the
   rendered grid, not estimated.
   1200 : same 4x3 rectangle, gutter 18 -> 14, caption letter-spacing eases.
          Rows keep the calc() so the hero holds ~1.76 all the way down.
    991 : 2 columns x 5 rows — hero full width (2x2), then two 2-up pairs,
          then a closing full-width panorama. Still a filled rectangle.
          At 991 that is hero 928x512 (1.81), pairs 456x248 (1.84).
    767 : still 2 columns; gutter 12, caption 11.5px, brackets 18px.
          Hero 719x396 (1.82), pairs 354x192 (1.84).
    600 : one column at last — two columns below this put the yard behind
          250px crops. Row tracks give way to per-tile aspect-ratio
          (hero 4:3, the rest 16:9 — the native ratio of the gallery files,
          so a phone gets the uncropped frame), with min-height as the guard
          for engines without aspect-ratio.
   ========================================================================== */

@media (max-width: 1200px) {
    #yard {
        --tile-gap: 14px;
        --bracket: 20px;
    }

    #yard .mrn-tile__cap {
        padding: 0 16px 15px;
        letter-spacing: 1.9px;
    }
}

@media (max-width: 991px) {
    #yard {
        --tile-gap: 16px;
        --row-a: clamp(148px, 25vw, 260px);
        --row-b: clamp(180px, 31vw, 312px);
        --bracket: 22px;
    }

    /* beats marine.css:1944-1946, which switched to 2 columns but kept the
       nth-child spans that produced the holes */
    #yard .mrn-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, var(--row-a)) var(--row-b);
    }

    #yard .mrn-tile:nth-child(5) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    #yard .mrn-tile:nth-child(1) {
        grid-column: 1;
        grid-row: 3;
    }

    #yard .mrn-tile:nth-child(2) {
        grid-column: 2;
        grid-row: 3;
    }

    #yard .mrn-tile:nth-child(3) {
        grid-column: 1;
        grid-row: 4;
    }

    #yard .mrn-tile:nth-child(4) {
        grid-column: 2;
        grid-row: 4;
    }

    #yard .mrn-tile:nth-child(6) {
        grid-column: 1 / span 2;
        grid-row: 5;
    }

    #yard .mrn-mosaic__rule {
        margin: -10px auto 30px;
    }
}

@media (max-width: 767px) {
    #yard {
        --tile-gap: 12px;
        --row-a: clamp(126px, 25vw, 200px);
        --row-b: clamp(150px, 31vw, 240px);
        --bracket: 18px;
    }

    #yard .mrn-tile::before {
        inset: 9px;
    }

    #yard .mrn-tile__cap {
        padding: 0 15px 14px;
        font-size: 11.5px;
        letter-spacing: 1.7px;
    }

    #yard .mrn-mosaic__rule {
        width: 76px;
        margin: -6px auto 26px;
    }
}

/* below 600px two columns would put the yard behind 250px-wide crops, so the
   mosaic finally becomes a single stack. Row tracks are dropped for per-tile
   aspect-ratio, so nothing depends on viewport-derived heights.
   Beats marine.css:2006-2013, which collapsed at 560px but left tile 1 and
   tile 6 spanning two 160px rows. */
@media (max-width: 600px) {
    #yard .mrn-mosaic {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: auto;
    }

    #yard .mrn-mosaic .mrn-tile {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
        min-height: 170px;
    }

    #yard .mrn-mosaic .mrn-tile:nth-child(5) {
        aspect-ratio: 4 / 3;
        min-height: 220px;
        --bracket: 24px;
    }
}

/* ==========================================================================
   8. Reduced motion
   marine.css:295-300 already forces every transition-duration to .001ms with
   !important, so nothing here needs to answer it — these rules exist so the
   *end states* are still reachable without travel: brackets and measure rule
   sit at full length, the photograph never zooms, the scrim cross-fades
   instead of sliding.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #yard .mrn-tile,
    #yard .mrn-tile img,
    #yard .mrn-tile::before,
    #yard .mrn-tile::after,
    #yard .mrn-tile__cap,
    #yard .mrn-tile__cap::before,
    #yard .mrn-tile__cap::after {
        transition: none;
    }

    #yard .mrn-tile img,
    #yard .mrn-tile:hover img,
    #yard .mrn-tile:focus-visible img {
        transform: none;
    }

    #yard .mrn-tile__cap,
    #yard .mrn-tile:hover .mrn-tile__cap,
    #yard .mrn-tile:focus-visible .mrn-tile__cap {
        transform: none;
    }

    #yard .mrn-tile__cap::before,
    #yard .mrn-tile:hover .mrn-tile__cap::before,
    #yard .mrn-tile:focus-visible .mrn-tile__cap::before {
        transform: none;
    }

    #yard .mrn-tile::before {
        opacity: 0;
        background-size:
            var(--bracket) 2px, 2px var(--bracket),
            var(--bracket) 2px, 2px var(--bracket);
    }

    #yard .mrn-tile__cap::after {
        width: 54px;
    }
}

/* ==========================================================================
   SECTION: CTA  (.mrn-cta, index.html 713-732) — "the closing plate"
   ==========================================================================
   Answers css/marine.css 1645-1720. That range holds ONE legacy rgba() literal
   that no token can reach, plus several choices that fight the new system:
     marine.css:1681  .mrn-cta__orb--2  background  rgba(178,236,255,.35)
                      -> old aqua. Re-declared in cyan below.
   Re-declared as well, because the token retheme alone leaves them wrong:
     marine.css:1650  .mrn-cta          background: var(--grad-brand)
                      -> now ends on #2a7fc9, a bright blue corner 100px above
                         the white .sgf-yard band. Replaced with ink.
     marine.css:1656  .mrn-cta__bg      images/ship-front.webp @ opacity .18
                      -> generic stock bow, effectively invisible. Replaced
                         with the wide yard photograph, duotoned to palette.
     marine.css:1673  .mrn-cta__orb--1  rgba(255,173,24,.45)
                      -> a 420px amber blob. The section spends its single
                         amber moment on the Contact CTA and nowhere else.
     marine.css:1658  .mrn-cta__bg      animation: mrnKenBurns
     marine.css:1675 / 1684  both orbs  animation: mrnOrb
                      -> both killed. CSS animations sit in the Animation
                         origin and beat inline styles, so mrnOrb and
                         mrnKenBurns would win over the transform
                         js/marine.js initParallax() writes. They must be off
                         for data-mrn-parallax to do anything at all.
     marine.css:205   .mrn-btn--ghost   inset white ring
     marine.css:231   .mrn-btn--ghost::before  var(--grad-gold)
                      -> hovering the phone number produced a SECOND full gold
                         button. Re-declared cyan.
   Intent: #yard above is .mrn-dark ink, and .sgf-yard below is a white band
   carrying one navy card. So the CTA stops being a second floating panel and
   becomes the GROUND the closing movement ends on — ink at its top edge,
   continuous with #yard; the yard itself opening up through the middle under
   a heavy scrim; then closing to solid --navy-ink finished with a 2px cyan
   datum that reads as a cut line against the white band. The only object left
   in the movement is the .sgf-yard card below. Depth is real: three planes at
   three parallax speeds plus a receding ground-plane grid, no floating card.
   Depends on markup patches A-C (parallax hooks + section eyebrow).
   ========================================================================== */

.mrn-cta {
    /* section-scoped knobs only — no :root additions */
    --cta-scrim: 4, 18, 31;
    /* --navy-ink as an rgb triplet, so the scrim ramp stays one value */
    --cta-orb-1: rgba(34, 179, 230, .52);
    --cta-orb-2: rgba(17, 149, 207, .46);
    --cta-grid: rgba(53, 198, 244, .15);

    position: relative;
    isolation: isolate;
    padding: 128px 0 136px;
    /* answers marine.css:1650 — --grad-brand ends on #2a7fc9 */
    background: var(--navy-ink);
    /* the header goes fixed via .sticky_menu, so #contact landed underneath it */
    scroll-margin-top: 92px;
}

/* --------------------------------------------------------------------------
   1. Plane A — the photograph (slowest parallax, data-mrn-parallax="0.08")
   Overscanned so the layer carries +/-70px of scroll offset without ever
   showing an edge inside .mrn-cta's overflow:hidden.
   -------------------------------------------------------------------------- */

.mrn-cta__bg {
    inset: -16% 0;
    z-index: 0;
    /* answers marine.css:1656 — the strongest photograph on the site: the wide
       yard, several vessels beached, cutting zone, plate deck, cranes.
       58% vertical bias keeps the plate deck in frame instead of the sky. */
    background-image: url("../images/gallery/5.jpg");
    background-position: 50% 58%;
    background-size: cover;
    background-repeat: no-repeat;
    /* answers marine.css:1657 — .18 made the frame invisible. The scrim below
       does the darkening now, so the yard actually reads as a photograph. */
    opacity: 1;
    /* answers marine.css:1658 — Ken Burns off; see banner note */
    animation: none;
    /* keeps the duotone blend below contained to this layer */
    isolation: isolate;
    will-change: transform;
}

/* hue-only wash: keeps the luminance of steel, plate and sand but drags every
   colour in the frame toward the panel navy, so the photo sits inside the
   palette instead of fighting it — same technique as the hero. */
.mrn-cta__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(158deg, var(--panel) 0%, var(--ink) 100%);
    mix-blend-mode: color;
    opacity: .74;
}

@supports not (mix-blend-mode: color) {
    .mrn-cta__bg::before {
        mix-blend-mode: normal;
        opacity: .24;
    }
}

/* --------------------------------------------------------------------------
   2. Planes B and C — the two orbs, re-pitched as slow cyan light pools
   Positioned mid-height and OUTSIDE the centred copy column, beneath the
   scrim, so they add atmosphere without ever lifting the ground the type sits
   on. Parallax speeds .16 and .10 give real z-separation against the photo's
   .08 — the depth comes from differential travel, not from a blur radius.
   -------------------------------------------------------------------------- */

.mrn-cta__orb {
    z-index: 1;
    /* a 420px box behind a 70px gaussian was the most expensive paint on the
       page; a radial-gradient gives a softer falloff for nothing */
    filter: none;
    border-radius: 50%;
    /* answers marine.css:1675 and 1684 — mrnOrb off; see banner note */
    animation: none;
    will-change: transform;
}

/* answers marine.css:1673 rgba(255,173,24,.45) — the amber blob */
.mrn-cta__orb--1 {
    width: 46vw;
    max-width: 620px;
    height: 620px;
    left: -16%;
    top: 18%;
    bottom: auto;
    opacity: .55;
    background: radial-gradient(ellipse at 50% 50%, var(--cta-orb-1) 0%, rgba(34, 179, 230, .16) 42%, rgba(34, 179, 230, 0) 72%);
}

/* answers marine.css:1681 rgba(178, 236, 255, .35) — old aqua */
.mrn-cta__orb--2 {
    width: 40vw;
    max-width: 540px;
    height: 540px;
    right: -13%;
    top: 40%;
    bottom: auto;
    opacity: .50;
    background: radial-gradient(ellipse at 50% 50%, var(--cta-orb-2) 0%, rgba(17, 149, 207, .14) 44%, rgba(17, 149, 207, 0) 74%);
}

/* --------------------------------------------------------------------------
   3. Plane D — receding ground plane
   The one literal 3D object in the section: a survey grid tipped 62deg on a
   720px perspective with its origin on the bottom edge, so it recedes to a
   horizon behind the buttons and reads as the plot the yard stands on. Static
   geometry — the depth is in the projection, not in movement, so it needs no
   reduced-motion guard.
   -------------------------------------------------------------------------- */

.mrn-cta::after {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: 0;
    height: 62%;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--cta-grid) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(53, 198, 244, .11) 1px, transparent 1px);
    background-size: 84px 84px;
    transform: perspective(720px) rotateX(62deg);
    transform-origin: 50% 100%;
    opacity: .42;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 34%, #000 78%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 34%, #000 78%);
}

/* --------------------------------------------------------------------------
   4. Scrim — the whole edge story in a single layer
   Top stop matches #yard's ink so the two dark sections fuse; the centre band
   is the lightest so the photograph reads; a centred radial damps the copy
   column specifically; the bottom stop is solid --navy-ink and carries the 2px
   cyan datum that cuts against the white .sgf-yard band.
   Contrast, worst case (a pure-white photo frame directly behind the copy):
   .78 scrim then the .40 centre damp lands the ground on ~#284a4a, L .038.
   The #cfe1f0 body copy clears 8.9:1; the white heading clears 12.6:1.
   -------------------------------------------------------------------------- */

.mrn-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        /* 1. the cut line — first layer, so it paints on top, pinned bottom */
        linear-gradient(90deg, rgba(53, 198, 244, 0) 0%, rgba(53, 198, 244, .55) 26%, rgba(53, 198, 244, .30) 62%, rgba(53, 198, 244, 0) 100%) 0 100% / 100% 2px no-repeat,
        /* 2. damp the centred copy column */
        radial-gradient(78% 60% at 50% 50%, rgba(var(--cta-scrim), .40) 0%, rgba(var(--cta-scrim), .16) 58%, rgba(var(--cta-scrim), 0) 78%),
        /* 3. corner vignette */
        radial-gradient(128% 108% at 50% 50%, rgba(var(--cta-scrim), 0) 42%, rgba(var(--cta-scrim), .58) 100%),
        /* 4. fuse to #yard at the top, close to solid ink at the bottom */
        linear-gradient(180deg,
            rgba(7, 26, 46, .97) 0%,
            rgba(var(--cta-scrim), .86) 12%,
            rgba(var(--cta-scrim), .78) 42%,
            rgba(var(--cta-scrim), .84) 72%,
            rgba(var(--cta-scrim), .98) 93%,
            rgba(var(--cta-scrim), 1) 100%);
}

/* marine.css:81 gives .mrn-container z-index:3, which now ties with the scrim
   — lift the copy clear of every atmosphere layer. */
.mrn-cta > .mrn-container {
    z-index: 5;
}

/* --------------------------------------------------------------------------
   5. Copy — spec-sheet centre column
   -------------------------------------------------------------------------- */

/* markup patch C adds the label this was the only section on the page without.
   index-theme.css:177 already colours it cyan; it needs only its leading dash
   mirrored so it reads as centred rather than nudged left. */
.mrn-cta .mrn-eyebrow {
    justify-content: center;
    margin-bottom: 20px;
}

.mrn-cta .mrn-eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    flex: 0 0 auto;
    background: linear-gradient(270deg, var(--cyan-bright), rgba(34, 179, 230, 0));
}

.mrn-cta h2 {
    letter-spacing: .5px;
    margin: 0 auto 22px;
    text-shadow: 0 16px 40px rgba(4, 18, 31, .72);
}

.mrn-cta p {
    /* marine.css:1707 sets weight 300 — the thinnest type on the site sitting
       on the busiest ground. 400, and a steel tint rather than dimmed white. */
    font-family: var(--font-body);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.78;
    color: #cfe1f0;
    max-width: 58ch;
    margin: 0 auto 32px;
    text-shadow: 0 2px 16px rgba(4, 18, 31, .75);
}

/* measured datum between the copy and the buttons — the section's rhythm cue,
   and cyan, so the amber budget stays with the Contact button */
.mrn-cta p::after {
    content: "";
    display: block;
    width: 78px;
    height: 2px;
    margin: 34px auto 0;
    background: linear-gradient(90deg, rgba(53, 198, 244, 0), var(--cyan-bright) 50%, rgba(53, 198, 244, 0));
}

/* --------------------------------------------------------------------------
   6. Actions — one amber moment, one cyan ghost
   -------------------------------------------------------------------------- */

.mrn-cta__actions {
    gap: 14px;
    align-items: stretch;
}

/* marine.css gives --ghost its ring as an inset box-shadow and --gold no
   border at all, so the two buttons stood 3px apart in height. A real 1px
   border on both equalises them. */
.mrn-cta .mrn-btn {
    border: 1px solid transparent;
    padding: 17px 34px;
    font-size: 13px;
    letter-spacing: 2.6px;
}

/* the extruded amber plate: top bevel, dark bottom edge, key glow and a
   separate contact shadow — depth from real layering, not drop-shadow soup */
.mrn-cta .mrn-btn--gold {
    background: linear-gradient(178deg, var(--gold-light) 0%, var(--gold) 54%, var(--gold-dark) 100%);
    color: #2a1a00;
    border-color: rgba(255, 194, 71, .62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -2px 0 rgba(122, 74, 0, .40),
        0 16px 34px -16px rgba(255, 173, 24, .90),
        0 34px 58px -32px rgba(4, 18, 31, .95);
    /* data-mrn-magnetic writes an inline transform on every mousemove, and
       marine.css:195 transitions transform at .45s — which turned pointer
       tracking into a rubber band. Short enough to track, long enough to damp. */
    transition:
        transform .22s var(--e-out),
        box-shadow .5s var(--e-out),
        border-color .4s var(--e-out),
        color .3s var(--e-out);
}

/* marine.css:225-227 slides --grad-brand up over the gold button on hover,
   throwing away the section's only amber. Keep it amber, brighten it. */
.mrn-cta .mrn-btn--gold::before {
    background: linear-gradient(178deg, #ffd06b 0%, var(--gold-light) 100%);
}

.mrn-cta .mrn-btn--gold:hover,
.mrn-cta .mrn-btn--gold:focus {
    color: #2a1a00;
    border-color: rgba(255, 194, 71, .95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .70),
        inset 0 -2px 0 rgba(122, 74, 0, .34),
        0 22px 46px -16px rgba(255, 173, 24, 1),
        0 44px 72px -34px rgba(4, 18, 31, 1);
}

/* answers marine.css:205 (white inset ring) and marine.css:231 (gold fill) */
.mrn-cta .mrn-btn--ghost {
    background: rgba(34, 179, 230, .08);
    color: #dff4ff;
    border-color: rgba(53, 198, 244, .48);
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mrn-cta .mrn-btn--ghost::before {
    background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--cyan-deep) 100%);
}

.mrn-cta .mrn-btn--ghost:hover,
.mrn-cta .mrn-btn--ghost:focus {
    color: #04263f;
    border-color: var(--cyan-bright);
    background: rgba(34, 179, 230, .08);
    box-shadow: 0 20px 44px -24px rgba(34, 179, 230, .90);
}

.mrn-cta .mrn-btn i {
    transition: transform .45s var(--e-out);
}

.mrn-cta .mrn-btn--gold:hover i {
    transform: translateX(4px);
}

/* css/style.css kills outlines globally with a:focus{outline:0}, and
   marine.css:233 also hands the -4px lift to plain :focus, so a mouse click
   left the button parked mid-air with no ring. Ring for keyboards, nothing
   for mice. */
.mrn-cta a:focus-visible,
.mrn-cta .mrn-btn:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
}

.mrn-cta .mrn-btn:focus:not(:focus-visible):not(:hover) {
    transform: none;
}

/* ==========================================================================
   7. Responsive
   The layout is a single centred column at EVERY width — nothing reflows, so
   the breakpoints change metric, atmosphere budget and, at 767px, the button
   axis.
     1200px : padding 112/120; orb footprint and grid cells tighten; copy to
              56ch. One centred column, buttons still side by side.
      991px : padding 92/100. The column now spans most of the viewport, so the
              centre damp widens to 94% and the orbs drop to .38/.34 to stay
              off the type. Ground plane shortens to 52%. Buttons stay side by
              side — they measure ~460px against a ~700px column.
      767px : padding 70/78. The heading re-clamps to 26-34px so
              "HAVE A VESSEL REACHING" fits a 360px screen, the two buttons go
              full-bleed and STACK, the receding ground plane is dropped
              outright (pure noise at that size), photo overscan drops to 10%
              because parallax offsets shrink with the viewport, and the orbs
              go to .26/.24 so a full-width column never sits on lit ground.
   ========================================================================== */

@media (max-width: 1200px) {
    .mrn-cta {
        padding: 112px 0 120px;
    }

    .mrn-cta::after {
        height: 58%;
        background-size: 76px 76px;
    }

    .mrn-cta__orb--1 {
        max-width: 520px;
        height: 520px;
    }

    .mrn-cta__orb--2 {
        max-width: 460px;
        height: 460px;
    }

    .mrn-cta p {
        max-width: 56ch;
    }
}

@media (max-width: 991px) {
    .mrn-cta {
        padding: 92px 0 100px;
        scroll-margin-top: 78px;
    }

    .mrn-cta__bg {
        inset: -13% 0;
    }

    .mrn-cta::before {
        background:
            linear-gradient(90deg, rgba(53, 198, 244, 0) 0%, rgba(53, 198, 244, .50) 26%, rgba(53, 198, 244, .26) 62%, rgba(53, 198, 244, 0) 100%) 0 100% / 100% 2px no-repeat,
            radial-gradient(94% 62% at 50% 50%, rgba(var(--cta-scrim), .44) 0%, rgba(var(--cta-scrim), .18) 62%, rgba(var(--cta-scrim), 0) 82%),
            radial-gradient(132% 112% at 50% 50%, rgba(var(--cta-scrim), 0) 44%, rgba(var(--cta-scrim), .54) 100%),
            linear-gradient(180deg,
                rgba(7, 26, 46, .97) 0%,
                rgba(var(--cta-scrim), .86) 12%,
                rgba(var(--cta-scrim), .80) 44%,
                rgba(var(--cta-scrim), .86) 74%,
                rgba(var(--cta-scrim), .99) 94%,
                rgba(var(--cta-scrim), 1) 100%);
    }

    .mrn-cta::after {
        height: 52%;
        background-size: 68px 68px;
        opacity: .34;
    }

    .mrn-cta__orb--1 {
        width: 62vw;
        max-width: 420px;
        height: 420px;
        left: -22%;
        top: 20%;
        opacity: .38;
    }

    .mrn-cta__orb--2 {
        width: 56vw;
        max-width: 380px;
        height: 380px;
        right: -20%;
        top: 46%;
        opacity: .34;
    }

    .mrn-cta h2 {
        margin-bottom: 18px;
    }

    .mrn-cta p {
        font-size: 16px;
        max-width: 54ch;
        margin-bottom: 28px;
    }

    .mrn-cta p::after {
        margin-top: 28px;
    }
}

@media (max-width: 767px) {
    .mrn-cta {
        padding: 70px 0 78px;
        scroll-margin-top: 74px;
    }

    .mrn-cta__bg {
        inset: -10% 0;
        background-position: 52% 60%;
    }

    /* the receding ground plane is dropped outright below 767px */
    .mrn-cta::after {
        display: none;
    }

    .mrn-cta__orb--1 {
        width: 88vw;
        max-width: 300px;
        height: 300px;
        left: -32%;
        top: 12%;
        opacity: .26;
    }

    .mrn-cta__orb--2 {
        width: 82vw;
        max-width: 280px;
        height: 280px;
        right: -30%;
        top: 58%;
        opacity: .24;
    }

    .mrn-cta .mrn-eyebrow {
        margin-bottom: 15px;
    }

    .mrn-cta h2 {
        font-size: clamp(26px, 7.6vw, 34px);
        line-height: 1.14;
        letter-spacing: .2px;
        margin-bottom: 16px;
    }

    .mrn-cta p {
        font-size: 15px;
        line-height: 1.72;
        max-width: 100%;
        margin-bottom: 26px;
    }

    .mrn-cta p::after {
        width: 58px;
        margin-top: 24px;
    }

    .mrn-cta__actions {
        gap: 10px;
    }

    .mrn-cta__actions .mrn-btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: 15px 20px;
        letter-spacing: 2.2px;
    }
}

/* ==========================================================================
   8. Reduced motion
   js/marine.js initParallax() bails under prefers-reduced-motion and never
   writes its inline transform, so every layer here has to be correct at rest
   — it is, because all three planes are placed with inset/top/left, never with
   a transform. What is left to stop is the hover travel and the pointer
   magnetic follow on the amber button: initMagnetic() also bails, but
   marine.css:236 still hands every .mrn-btn a -4px hover hop.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .mrn-cta__bg,
    .mrn-cta__orb {
        animation: none;
        transform: none;
        will-change: auto;
    }

    .mrn-cta .mrn-btn,
    .mrn-cta .mrn-btn i,
    .mrn-cta .mrn-btn::before {
        transition: none;
    }

    .mrn-cta .mrn-btn:hover,
    .mrn-cta .mrn-btn:focus,
    .mrn-cta .mrn-btn--gold:hover i {
        transform: none;
    }
}

/* ==========================================================================
   9. SG MOTION — armed states for js/index-motion.js
   ==========================================================================
   NO-JS CONTRACT
   Every rule here is gated on `html.sg-motion`, a class only JavaScript ever
   sets — the arming shim in <head>, re-asserted by js/index-motion.js. Script
   off, blocked, 404'd or throwing => none of these selectors match and the
   page is simply visible. The shim also pulls the class after 4s if the
   engine never stamps data-sg-ready on <html>.

   WHY !important HERE
   This stylesheet is 6700 lines of `#section .block element` rules, several of
   which set opacity and transition on the very elements an entrance targets —
   e.g. index-theme.css:3493 `#process .mrn-step h4 { opacity:0; transition:
   color .35s }` at specificity (1,2,1). An armed state at (0,2,1) loses that
   fight, and losing it on `opacity` means the element never becomes visible.
   So the armed and revealed states are !important. They are tightly contained:
   they only ever match an element carrying an author-added data-sg-* attribute,
   and js/index-motion.js REMOVES that attribute the moment the entrance ends —
   after which the element is back under its own stylesheet rules with nothing
   of ours left on it except .sg-shown (see 9.4).

   OWNERSHIP BOUNDARY
   There is deliberately no CSS exemption list for js/marine.js. The engine is
   the single source of truth: at boot it strips data-sg-in / data-sg-split /
   data-sg-delay off any element carrying data-mrn-reveal, data-mrn-tilt,
   data-mrn-magnetic or data-mrn-parallax, so these selectors stop matching it
   entirely. Two lists that could drift out of step would be worse than one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1  Scroll behaviour
   marine.css:37 sets html{scroll-behavior:smooth}, which fights any JS engine
   driving window.scrollTo — the browser starts its own smooth animation on
   every single write. Neutralise it whenever an engine is live: .sg-scroll-auto
   for ours, .lenis for the instance js/main.js already boots on this page.
   -------------------------------------------------------------------------- */
html.sg-scroll-auto,
html.lenis {
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {

    html,
    html.sg-motion {
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   9.2  Entrances — armed initial state
   Direction is carried as data (--sg-from) rather than as four competing
   transform declarations, so the arming rule stays a single block and the
   cascade between "up/left/right/zoom" and "revealed" can never invert.

   No will-change: the armed state is already a translate3d, which promotes the
   element on its own, and permanently hinting every entrance on the page would
   cost more memory than the entrance is worth.
   -------------------------------------------------------------------------- */
html.sg-motion [data-sg-in] {
    opacity: 0 !important;
    transform: var(--sg-from, translate3d(0, 44px, 0)) !important;
    transition-property: opacity, transform !important;
    transition-duration: .9s, 1.1s !important;
    transition-timing-function: var(--e-out), var(--e-out) !important;
    transition-delay: var(--sg-d, 0ms) !important;
}

html.sg-motion [data-sg-in="left"] {
    --sg-from: translate3d(-56px, 0, 0);
}

html.sg-motion [data-sg-in="right"] {
    --sg-from: translate3d(56px, 0, 0);
}

html.sg-motion [data-sg-in="zoom"] {
    --sg-from: scale(.94);
}

/* one-shot reveal — (0,3,1) beats both the armed rule and the direction rules */
html.sg-motion [data-sg-in].sg-in {
    --sg-from: none;
    opacity: 1 !important;
}

/* stagger steps — the reference's fade-in-*-1 / -2 / -3 suffixes */
html.sg-motion [data-sg-delay="1"] {
    --sg-d: 110ms;
}

html.sg-motion [data-sg-delay="2"] {
    --sg-d: 220ms;
}

html.sg-motion [data-sg-delay="3"] {
    --sg-d: 330ms;
}

html.sg-motion [data-sg-delay="4"] {
    --sg-d: 440ms;
}

html.sg-motion [data-sg-delay="5"] {
    --sg-d: 550ms;
}

html.sg-motion [data-sg-delay="6"] {
    --sg-d: 660ms;
}

/* --------------------------------------------------------------------------
   9.3  Heading split — per-line stagger with no line wrappers
   The engine wraps each word in .sg-w and stamps its VISUAL line index into
   --sg-l, so nested <em>/<b>/<span class="mrn-hl"> inside a heading survive
   untouched — there is no line element to restructure them into. .sg-split is
   added once the words exist, which is what lifts the box out of the holding
   state that stops a flash of un-split text.
   -------------------------------------------------------------------------- */
html.sg-motion .sg-w {
    display: inline-block;
    max-width: 100%;
}

html.sg-motion [data-sg-split]:not(.sg-split) {
    opacity: 0 !important;
}

html.sg-motion [data-sg-split] .sg-w {
    opacity: 0 !important;
    transform: translate3d(0, .58em, 0) !important;
    transition-property: opacity, transform !important;
    transition-duration: .82s, .95s !important;
    transition-timing-function: var(--e-out), var(--e-out) !important;
    transition-delay: calc(var(--sg-l, 0) * 90ms + var(--sg-d, 0ms)) !important;
}

html.sg-motion [data-sg-split].sg-in .sg-w {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   9.3b  CHARACTER SPLIT — data-sg-split="chars"
   The recipe measured off the reference build: each letter is its own
   inline-block, arriving from 17px below with a 3deg tilt and a 6px blur, on
   a 30ms step. Blur is what separates this from an ordinary stagger — the
   letters resolve INTO focus rather than just sliding, which is why it reads
   as type being set rather than as a list animating.

       opacity   .55s      transform  .65s      filter  .55s
       ease      cubic-bezier(.22, 1, .36, 1)
       delay     --d, written per character by js/index-motion.js

   will-change is deliberately absent: a 40-letter heading would promote 40
   layers, and the blur already forces its own raster pass.
   -------------------------------------------------------------------------- */

html.sg-motion [data-sg-split] .sg-ch,
html.sg-anim [data-sg-split] .sg-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(17px) rotate(3deg);
    filter: blur(6px);
    transition:
        opacity .55s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
        transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
        filter .55s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}

/* .sg-in / .sg-shown come from js/index-motion.js on the inner pages;
   .in / .settled come from js/motion.js on index.html */
html.sg-motion [data-sg-split].sg-in .sg-ch,
html.sg-motion [data-sg-split].sg-shown .sg-ch,
html.sg-anim [data-sg-split].in .sg-ch,
html.sg-anim [data-sg-split].settled .sg-ch {
    opacity: 1;
    transform: none;
    filter: none;
}

/* a split word is only a box for its letters — it must not animate as well,
   or the letter delays ride on top of the word's own transition */
html.sg-motion [data-sg-split] .sg-w:has(.sg-ch),
html.sg-anim [data-sg-split] .sg-w:has(.sg-ch) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* CALM TIER — the letters still arrive one by one, because that sequence is
   the point. Only the travel, the tilt and the blur come off. */
html.sg-calm.sg-motion [data-sg-split] .sg-ch,
html.sg-calm.sg-anim [data-sg-split] .sg-ch {
    transform: none !important;
    filter: none !important;
    transition: opacity .4s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) !important;
}

html.sg-calm.sg-motion [data-sg-split].sg-in .sg-ch,
html.sg-calm.sg-motion [data-sg-split].sg-shown .sg-ch,
html.sg-calm.sg-anim [data-sg-split].in .sg-ch,
html.sg-calm.sg-anim [data-sg-split].settled .sg-ch {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {

    /* belt to the brace above: if the engine never runs, nothing may be left
       blurred or invisible */
    html:not(.sg-calm) [data-sg-split] .sg-ch {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   9.4  Terminal state
   Added by the engine when an entrance finishes, at the same moment the
   data-sg-* attributes come off. It pins opacity ONLY — never transform — so
   an element can never fall back into a stylesheet `opacity:0` it was relying
   on someone else to lift (index-theme.css:3502 is exactly that shape), while
   :hover transforms, marine.js tilt and marine.js magnetic stay free.
   -------------------------------------------------------------------------- */
html.sg-motion .sg-shown {
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   9.5  Reduced motion — nothing moves, nothing stays hidden
   The engine also reveals every element outright on this path and never splits
   a heading, so these rules are the belt to that pair of braces.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html.sg-motion [data-sg-in],
    html.sg-motion [data-sg-split],
    html.sg-motion [data-sg-split]:not(.sg-split),
    html.sg-motion [data-sg-split] .sg-w,
    html.sg-motion .sg-w {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   9.9  CALM TIER — reduced motion is not the same as no motion
   ==========================================================================
   The block directly above pins every entrance to its finished state, and
   js/index-motion.js used to settle all of them at load whenever the user
   asked for reduced motion. Between them the site arrived fully revealed on
   any machine with the preference set — and on Windows that preference is
   switched by "Show animations in Windows" and by the "Adjust for best
   performance" profile, which plenty of laptops have off for reasons that
   have nothing to do with motion sensitivity. Measured on about_us.html with
   the real preference: 0 ScrollTriggers, 0 tilts, 45 of 45 elements already
   shown before the first scroll. A completely static page.

   What the preference asks us to drop is VESTIBULAR motion — travel,
   parallax, zoom, spin. A short opacity fade is none of those, and is the
   accepted way to keep a page alive for these users. So the entrance runs on
   scroll and only opacity moves.

   Specificity is deliberate: .sg-calm.sg-motion is (0,3,1), which beats both
   the rule above and marine.css:294's `*{transition-duration:.001ms}`
   regardless of where the files land in the cascade.

   Parallax and scroll-coupled drift stay off entirely — js/scroll-drift.js
   still returns at its own guard, because that IS the vestibular case.
   ========================================================================== */

/* `.sg-armed` — NOT the bare attribute. js/page-fx.js stamps data-sg-in onto
   elements of its own, and anything added after the engine's collect() pass
   has no observer behind it; hiding those with CSS strands them at opacity 0
   permanently. The engine marks what it has actually claimed. */
html.sg-calm.sg-motion [data-sg-in].sg-armed {
    opacity: 0 !important;
    transform: none !important;
    clip-path: none !important;
    transition-property: opacity !important;
    transition-duration: .5s !important;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
    transition-delay: var(--sg-d, 0ms) !important;
    animation: none !important;
}

html.sg-calm.sg-motion [data-sg-in].sg-in {
    opacity: 1 !important;
    transform: none !important;
}

/* the words never split under calm, so the box fades as one */
html.sg-calm.sg-motion [data-sg-split] .sg-w,
html.sg-calm.sg-motion .sg-w {
    opacity: 1 !important;
    transform: none !important;
}


/* ==========================================================================
   10. PARALLAX — the reference's "view images while scrolling"
   ==========================================================================
   Owner   : js/index-motion.js, module `SG PARALLAX`, which rides
             SGMotion.track(). Nothing here animates on its own — every rule
             below is geometry. The only property JS ever writes is
             `transform: translate3d(0, Ypx, 0)` on .sg-plx-box (and on the two
             band layers), plus a will-change it clears on exit.

   Pattern : the measured reference structure, three layers deep —
               clip box      overflow:hidden, already on the page
               .sg-plx-box     OVERSCANNED, absolute — this is what moves
               .sg-plx-img     inset:0, object-fit:cover

   OVERSCAN CONTRACT (the whole safety argument):
       O = --sg-over            the layer is O taller than its clip box
       T = O * 0.80             travel; hard-coded as RATIO in the JS
       layer top    = -O/2 + y
       layer bottom =  H + O/2 + y           (H = clip box height, any value)
       y sweeps [-T/2 .. +T/2] = [-0.4·O .. +0.4·O]
       no top gap     needs  y <=  O/2   ->   0.4·O <= 0.5·O   TRUE
       no bottom gap  needs  y >= -O/2   ->  -0.4·O >= -0.5·O  TRUE
     A 10% guard at each edge, independent of H, of the viewport and of the
     scroll position. Rest (y = 0) is the CENTRE of travel, so a layer that
     never receives a single frame still cannot gap.

   Arming  : html.sg-plx is set by the JS only when the browser supports custom
             properties + translate3d AND prefers-reduced-motion is not set.
             .sg-plx-box does not exist at all until the JS builds it, so with
             JS off every photograph on this page renders exactly as it does
             today. Nothing here can hide anything.

   Takeover: .mrn-stats__bg and .mrn-cta__bg move from js/marine.js's
             data-mrn-parallax to this module (markup patches A + B).
             .mrn-hero__media, .mrn-journey__plate and both .mrn-cta__orb
             layers stay with marine.js and are untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1  The primitives
   -------------------------------------------------------------------------- */

.sg-plx-box {
    position: absolute;
    left: 0;
    right: 0;
    /* the overscan. `height` stays auto so the box is sized by top+bottom and
       never depends on a percentage height resolving against an auto parent */
    top: calc(var(--sg-over, 96px) / -2);
    bottom: calc(var(--sg-over, 96px) / -2);
    height: auto;
    z-index: 0;
    /* deliberately NO overflow here — the clip box above always owns
       overflow:hidden, and clipping twice would crop the photo's hover
       push-in against the wrong rectangle */
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.sg-plx-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* css/bootstrap.min.css puts max-width:100% on img — harmless here, but
       explicit so the overscanned layer can never be squeezed back */
    max-width: none;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   10.2  Per-group overscan knobs — ONE number per group, read once per measure
   pass by the JS (getComputedStyle on --sg-over) and multiplied by 0.80 for
   the travel. Tuned against the real box heights so nothing ever travels more
   than about a quarter of its own height:
       #about frame   ~457px    O 96  -> travel 77, guard 9.6px  (measured 10.0)
       #companies     min 430   O 88  -> travel 70, guard 8.8px  (measured  9.1)
       #commitment    288 img   O 72  -> travel 58, guard 7.2px  (measured  7.4)
       #yard tiles    166-212   O 40  -> travel 32, guard 4.0px  (measured  4.1)
       stats / cta    full band O 200 -> travel 160, guard 20px  (measured 19.3)
   "measured" = worst remaining overhang across a 140-position scroll sweep at
   1440x900 and 767x639. Every value stayed NEGATIVE-gap, i.e. overhanging.
   These are plain custom properties: inert without JS, no cascade risk.
   -------------------------------------------------------------------------- */

#about .mrn-figure__frame {
    --sg-over: 96px;
}

#companies .mrn-unit {
    --sg-over: 88px;
}

#commitment .mrn-card__img {
    --sg-over: 72px;
}

#yard .mrn-mosaic {
    --sg-over: 40px;
}

/* --------------------------------------------------------------------------
   10.3  COMPANIES — the two cards were CSS background-images on
   .mrn-unit::before, which cannot be parallaxed: a pseudo-element takes no
   inline style, and its `transform` is already spoken for by the 1.15s hover
   push-in. So the photograph is PROMOTED to a real <img> layer (markup patches
   C and D) and the ::before keeps only the scrim.

   The old stack was one element, three background layers:
       1  linear-gradient(180deg, navy .80 -> .97)      blend normal
       2  linear-gradient(118deg / 242deg, ...)         blend COLOR
       3  url(gallery/3.jpg | gallery/6.jpg)            blend normal
   Layer 2's `color` blend can only reach a backdrop inside the same element,
   so with the photo moved out it is re-expressed as .sg-plx-clip::after with
   mix-blend-mode:color over the <img> — the same composite, and the same
   technique .mrn-cta__bg::before already uses on this page.
   -------------------------------------------------------------------------- */

#companies .mrn-unit .sg-plx-clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* index-theme.css:2760 keeps #companies .mrn-unit at overflow:visible for
       preserve-3d, so unlike every other target on this page THIS element is
       the clip box and has to do its own clipping */
    overflow: hidden;
    border-radius: inherit;
    /* contains the mix-blend-mode below to the photograph */
    isolation: isolate;
    pointer-events: none;
}

#companies .mrn-unit .sg-plx-clip img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* answers `background-position: center 42%` of the old ::before stack */
    object-position: 50% 42%;
    /* the hover push-in moves here from ::before — same 1.055, same 1.15s
       curve. The <img> carries the scale, .sg-plx-box carries the parallax
       translate, so the two never share a transform. */
    transform: scale(1);
    transform-origin: 50% 46%;
    transition: transform 1.15s var(--e-out);
}

#companies .mrn-unit:hover .sg-plx-clip img,
#companies .mrn-unit:focus-within .sg-plx-clip img {
    transform: scale(1.055);
}

/* the `color` blend layer, lifted out of the background stack */
#companies .mrn-unit .sg-plx-clip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: color;
}

#companies .mrn-unit--a .sg-plx-clip::after {
    background-image: linear-gradient(118deg, rgba(13, 41, 71, .74) 0%, rgba(7, 26, 46, .30) 52%, rgba(17, 149, 207, .34) 100%);
}

#companies .mrn-unit--b .sg-plx-clip::after {
    background-image: linear-gradient(242deg, rgba(13, 41, 71, .74) 0%, rgba(7, 26, 46, .30) 52%, rgba(17, 149, 207, .34) 100%);
}

@supports not (mix-blend-mode: color) {
    #companies .mrn-unit .sg-plx-clip::after {
        mix-blend-mode: normal;
        opacity: .5;
    }
}

/* ---- the ::before is now the scrim only, and sits ABOVE the photo -------
   Same specificity as index-theme.css:2796 / 2815 / 2822 / 2833, later in the
   file, so these win on source order. .mrn-unit__body and .mrn-unit__meta are
   both z-index 2, so both still clear the scrim. */

#companies .mrn-unit::before {
    z-index: 1;
    background-blend-mode: normal;
    /* answers index-theme.css:2811-2812 — a scrim of pure gradient has nothing
       to zoom, and a transform here would only cost a compositor layer */
    transform: none;
    transition: opacity .55s var(--e-out);
}

#companies .mrn-unit--a::before,
#companies .mrn-unit--b::before {
    background-image: linear-gradient(180deg, rgba(7, 26, 46, .80) 0%, rgba(7, 26, 46, .88) 46%, rgba(4, 18, 31, .97) 100%);
}

#companies .mrn-unit:hover::before,
#companies .mrn-unit:focus-within::before {
    transform: none;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   10.4  THE TWO FULL-BLEED BANDS — .mrn-stats__bg and .mrn-cta__bg
   TAKEOVER, not reuse: markup patches A and B swap data-mrn-parallax="0.08"
   for data-sg-parallax="band" on these two nodes only. js/marine.js caches its
   [data-mrn-parallax] node list in a closure at boot (marine.js:236), so
   removing the attribute is the only way to stop it writing a second inline
   transform to the same element every scroll frame.
   .mrn-hero__media, .mrn-journey__plate and both .mrn-cta__orb layers keep
   data-mrn-parallax and stay entirely with marine.js — the orbs in particular
   must keep their .16 / .10 speeds, because the CTA's depth is built out of
   the DIFFERENCE between their travel and the photograph's.

   Geometry changes too: `inset: -20% 0` / `-16% 0` made the overscan a
   fraction of band height, which on a short mobile CTA (~400px) left only 40px
   of headroom per edge for a layer marine.js could push +/-120px. Both bands
   move to the same px contract as every other layer, so the guard is provable
   at any height.
   -------------------------------------------------------------------------- */

html.sg-plx .mrn-stats .mrn-stats__bg,
html.sg-plx .mrn-cta .mrn-cta__bg {
    --sg-over: 200px;
    /* == top/bottom: -100px; left/right: 0 — beats the -20% / -16% / -14% /
       -13% / -10% declarations above, in and out of media queries, on
       specificity (0,3,1) rather than on source order */
    inset: calc(var(--sg-over) / -2) 0;
    backface-visibility: hidden;
    /* answers index-theme.css:2208 and :6194 — a permanent will-change on two
       full-bleed filtered layers pins two compositor textures for the life of
       the page. The JS sets it on entry into travel and clears it on exit. */
    will-change: auto;
}

/* --------------------------------------------------------------------------
   10.5  Responsive — smaller boxes, proportionally smaller travel
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

    #about .mrn-figure__frame {
        --sg-over: 76px;
    }

    #companies .mrn-unit {
        --sg-over: 72px;
    }

    #commitment .mrn-card__img {
        --sg-over: 64px;
    }

    /* index-theme.css:6005 grows the mosaic rows to clamp(148px, 25vw, 260px)
       here, so the tiles can afford more travel than at desktop */
    #yard .mrn-mosaic {
        --sg-over: 52px;
    }

    html.sg-plx .mrn-stats .mrn-stats__bg,
    html.sg-plx .mrn-cta .mrn-cta__bg {
        --sg-over: 164px;
    }
}

@media (max-width: 767px) {

    #about .mrn-figure__frame {
        --sg-over: 60px;
    }

    #companies .mrn-unit {
        --sg-over: 56px;
    }

    #commitment .mrn-card__img {
        --sg-over: 52px;
    }

    #yard .mrn-mosaic {
        --sg-over: 40px;
    }

    html.sg-plx .mrn-stats .mrn-stats__bg,
    html.sg-plx .mrn-cta .mrn-cta__bg {
        --sg-over: 120px;
    }
}

/* --------------------------------------------------------------------------
   10.6  Reduced motion
   The JS never arms at all when the query matches at load — it builds no
   wrapper, sets no class, writes no transform, and every photograph renders
   exactly as it does today. These rules exist for the other case: the user
   flips the OS setting while the page is open. The JS strips html.sg-plx and
   clears its inline transforms; this collapses the overscan so any layer it
   already built lands flush inside its box — verified at 0.0px top and bottom
   delta on a mosaic tile, and inside the 1px borders on .mrn-stats.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sg-plx-box {
        top: 0;
        bottom: 0;
        transform: none !important;
        will-change: auto !important;
    }

    html.sg-plx .mrn-stats .mrn-stats__bg,
    html.sg-plx .mrn-cta .mrn-cta__bg {
        inset: 0;
        transform: none !important;
        will-change: auto !important;
    }

    #companies .mrn-unit .sg-plx-clip img {
        transition: none;
    }

    #companies .mrn-unit:hover .sg-plx-clip img,
    #companies .mrn-unit:focus-within .sg-plx-clip img {
        transform: none;
    }
}


/* ==========================================================================
   ABOUT PAGE — about_us.html
   ==========================================================================
   Builds on the same primitives as the homepage (.mrn-section grounds, the
   .mrn-title / .mrn-eyebrow / .mrn-lead type scale, the .d3-* depth
   vocabulary and .edge-sweep). Only blocks that existed nowhere else are
   defined here: the profile split, the heritage timeline, the compliance row
   and the photo-backed company cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Profile split — real yard photograph against the group story
   -------------------------------------------------------------------------- */

.abt-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 62px;
    align-items: center;
    margin-bottom: 70px;
}

.abt-split__media {
    position: relative;
    perspective: 1100px;
}

.abt-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--lift-3);
    border: 1px solid rgba(7, 26, 46, .10);
}

.abt-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* navy duotone so the photograph sits inside the palette */
.abt-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(10, 35, 64, .34) 0%, rgba(7, 26, 46, .05) 45%, rgba(34, 179, 230, .18) 100%);
}

.abt-frame__cap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--cyan-deep);
}

.abt-frame__cap::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--cyan);
}

.abt-split__body .mrn-title {
    margin-bottom: 22px;
}

.abt-split__body .mrn-btn {
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   2. Heritage timeline — the dates already in the group own copy
   -------------------------------------------------------------------------- */

.abt-time {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.abt-time__item {
    position: relative;
    padding: 34px 26px 30px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(10, 35, 64, .92) 0%, rgba(7, 26, 46, .92) 100%);
    border: 1px solid var(--hairline);
    transition: border-color .5s var(--e-out), box-shadow .5s var(--e-out), transform .5s var(--e-out);
}

/* the rule that ties the four plates into one run */
.abt-time__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    right: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), rgba(34, 179, 230, .12));
    border-radius: 2px;
}

.abt-time__item:hover {
    transform: translateY(-6px);
    border-color: rgba(34, 179, 230, .38);
    box-shadow: var(--glow-cyan);
}

.abt-time__year {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan-bright);
}

.abt-time__item h4 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.abt-time__item p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--body-on-dark);
}

/* --------------------------------------------------------------------------
   3. Compliance row — the conventions named in the profile copy
   -------------------------------------------------------------------------- */

.abt-comply {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.abt-comply li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(7, 26, 46, .10);
    box-shadow: var(--lift-1);
    transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), border-color .45s var(--e-out);
}

.abt-comply li:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 179, 230, .45);
    box-shadow: var(--lift-2);
}

.abt-comply__k {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--cyan-deep);
}

.abt-comply__v {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--body-on-light);
}

/* --------------------------------------------------------------------------
   4. Company cards — photo-backed, matching the homepage treatment
   -------------------------------------------------------------------------- */

.abt-units {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.abt-unit {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #0a2340 0%, #071a2e 100%);
    border: 1px solid var(--hairline);
    box-shadow: var(--lift-2);
    /* the card carries data-mrn-tilt, and marine.js writes an inline transform
       on this same node — so the hover lift must NOT be a transform */
    transition: box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}

.abt-unit:hover {
    border-color: rgba(34, 179, 230, .4);
    box-shadow: var(--glow-cyan);
}

.abt-unit__media {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.abt-unit__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 1.1s var(--e-out);
}

.abt-unit:hover .abt-unit__media img {
    transform: scale(1.1);
}

.abt-unit__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 26, 46, .32) 0%, rgba(7, 26, 46, .78) 68%, #0a2340 100%);
}

.abt-unit__body {
    position: relative;
    padding: 0 32px 26px;
    margin-top: -46px;
    z-index: 2;
}

.abt-unit__no {
    font-family: var(--font-display);
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .10);
    margin-bottom: 6px;
}

.abt-unit__body h3 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
}

.abt-unit__body p {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--body-on-dark);
}

.abt-unit__body .mrn-btn {
    margin-top: 10px;
}

.abt-unit__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
    border-top: 1px solid var(--hairline);
}

.abt-unit__meta > div {
    padding: 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.abt-unit__meta > div:first-child {
    border-right: 1px solid var(--hairline);
}

.abt-unit__meta strong {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--cyan-bright);
}

.abt-unit__meta span {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--body-on-dark);
}

.abt-cred-cta {
    margin: 46px auto 0;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .abt-time {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-comply {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .abt-split {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 54px;
    }

    .abt-units {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .abt-unit__media {
        height: 190px;
    }
}

@media (max-width: 767px) {
    .abt-time {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .abt-comply {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .abt-unit__body {
        padding: 0 22px 22px;
    }

    .abt-unit__meta > div {
        padding: 16px 22px;
    }

    .abt-unit__no {
        font-size: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .abt-time__item,
    .abt-comply li,
    .abt-unit,
    .abt-unit__media img {
        transition: none;
    }

    .abt-time__item:hover,
    .abt-comply li:hover {
        transform: none;
    }
}


/* ==========================================================================
   SG REVEAL — variants for js/sg-reveal.js
   ==========================================================================
   Ported from the Kalash Decor engine so index.html behaves the same way:
   every marked element starts hidden, then arrives on its own delay when the
   batch it belongs to enters the viewport.

   The armed (hidden) state is gated on html.sg-anim, a class the script adds
   itself — so if the script never loads, nothing is ever invisible.
   ========================================================================== */

.sg-anim [data-anim] {
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}

.sg-anim [data-anim="fade"] {
    opacity: 0;
    transition: opacity 1.1s var(--e-out) var(--d, 0s);
}

.sg-anim [data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(44px);
}

.sg-anim [data-anim="fade-left"] {
    opacity: 0;
    transform: translateX(-44px);
}

.sg-anim [data-anim="fade-right"] {
    opacity: 0;
    transform: translateX(44px);
}

.sg-anim [data-anim="zoom"] {
    opacity: 0;
    transform: scale(.92);
}

.sg-anim [data-anim="pop"] {
    opacity: 0;
    transform: scale(.55) rotate(-5deg);
}

.sg-anim [data-anim="card"] {
    opacity: 0;
    transform: translateY(48px) rotate(var(--rot, 0deg));
}

.sg-anim [data-anim="fade-up"],
.sg-anim [data-anim="fade-left"],
.sg-anim [data-anim="fade-right"],
.sg-anim [data-anim="zoom"],
.sg-anim [data-anim="card"] {
    transition:
        opacity 1s var(--e-out) var(--d, 0s),
        transform 1.1s var(--e-out) var(--d, 0s);
}

.sg-anim [data-anim="pop"] {
    transition:
        opacity .7s var(--e-out) var(--d, 0s),
        transform .9s var(--e-bounce) var(--d, 0s);
}

.sg-anim [data-anim].in {
    opacity: 1;
    transform: none;
}

/* once a reveal has finished its stagger delay is zeroed, so hover
   transitions on the same element feel instant instead of inheriting it */
.sg-anim [data-anim].settled {
    --d: 0s !important;
    will-change: auto;
}

/* CALM TIER for the [data-anim] vocabulary — the index-page twin of section
   9.9 above. js/motion.js used to resolve every reveal instantly under
   reduced motion, which left index.html as static as about_us.html was.
   The reveal still runs on scroll; only the travel is removed, so fade-up,
   fade-left, zoom, pop and card all collapse to the same plain fade. */
html.sg-calm.sg-anim [data-anim] {
    transform: none !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) !important;
}

html.sg-calm.sg-anim [data-anim].in,
html.sg-calm.sg-anim [data-anim].settled {
    opacity: 1 !important;
    transform: none !important;
}

/* image curtain — the clip opens while the photograph settles out of a zoom */
.sg-anim [data-anim="clip-up"],
.sg-anim [data-anim="clip-right"] {
    transition: clip-path 1.35s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
    will-change: clip-path;
}

.sg-anim [data-anim="clip-up"] {
    clip-path: inset(0 0 100% 0);
}

.sg-anim [data-anim="clip-right"] {
    clip-path: inset(0 100% 0 0);
}

.sg-anim [data-anim="clip-up"].in,
.sg-anim [data-anim="clip-right"].in {
    clip-path: inset(0 0 0 0);
}

.sg-anim [data-anim="clip-up"] img,
.sg-anim [data-anim="clip-right"] img {
    transform: scale(1.22);
    transition: transform 1.7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}

.sg-anim [data-anim="clip-up"].in img,
.sg-anim [data-anim="clip-right"].in img {
    transform: scale(1);
}

/* ?motion=reduced — opacity only, no travel */
.sg-anim-reduced [data-anim] {
    transform: none !important;
    clip-path: none !important;
    transition: opacity .5s linear var(--d, 0s) !important;
}

.sg-anim-reduced [data-anim] img {
    transform: none !important;
}


/* --------------------------------------------------------------------------
   Restore real durations for the reveal choreography.

   css/marine.css:294-309 collapses EVERY transition on the page to .001ms
   under @media (prefers-reduced-motion: reduce), with !important. On a machine
   where that OS setting is on, the one-by-one choreography still fires and the
   stagger delays are still honoured — but each element snaps instead of
   easing, which loses the whole effect.

   The Kalash engine this is ported from ignores the OS setting on purpose and
   runs the full choreography on every visit; ?motion=reduced is its opt-out.
   These rules restore that behaviour for the reveal properties ONLY — every
   other transition on the page still respects the OS preference.

   To honour the OS setting instead, delete this block and the matching note
   in js/sg-reveal.js.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sg-anim [data-anim="fade"] {
        transition: opacity 1.1s var(--e-out) var(--d, 0s) !important;
    }

    .sg-anim [data-anim="fade-up"],
    .sg-anim [data-anim="fade-left"],
    .sg-anim [data-anim="fade-right"],
    .sg-anim [data-anim="zoom"],
    .sg-anim [data-anim="card"] {
        /* !important belongs once, at the end of the whole declaration —
           repeating it per layer makes the declaration invalid and it is
           dropped, which is exactly what happened on the first attempt. */
        transition:
            opacity 1s var(--e-out) var(--d, 0s),
            transform 1.1s var(--e-out) var(--d, 0s) !important;
    }

    .sg-anim [data-anim="pop"] {
        transition:
            opacity .7s var(--e-out) var(--d, 0s),
            transform .9s var(--e-bounce) var(--d, 0s) !important;
    }

    .sg-anim [data-anim="clip-up"],
    .sg-anim [data-anim="clip-right"] {
        transition: clip-path 1.35s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) !important;
    }

    .sg-anim [data-anim="clip-up"] img,
    .sg-anim [data-anim="clip-right"] img {
        transition: transform 1.7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) !important;
    }

    /* the explicit opt-out stays instant */
    .sg-anim-reduced [data-anim] {
        transition: opacity .5s linear var(--d, 0s) !important;
    }
}