/* ==========================================================================
   SACHDEVA GROUP — PAGE FX
   Industrial theme + motion layer for every inner page
   ==========================================================================
   Scope   : all pages EXCEPT index.html. Loaded LAST, after
             marine.css -> marine-pages.css -> footer-modern.css ->
             header-modern.css -> index-theme.css, so it wins on source order.

   Why it exists
     css/index-theme.css rethemes the :root tokens and every `.mrn-*` rule, so
     index.html reads as one industrial system: squared geometry, hairline
     rings, cyan lead / amber punctuation, depth from layered shadow rather
     than from a soft blur.
     The inner pages are built from `.mrnp-*` components, which index-theme.css
     never touches (0 `.mrnp-` selectors in 6780 lines). Those components still
     carry marine-pages.css's ORIGINAL palette baked into literal rgba() —
     rgba(0,0,142,…) is the retired #00008e navy — plus 20px radii, which read
     consumer-app, not yard. Measured on health_safety.html:
         .mrnp-icard  box-shadow rgba(0,0,142,.55)  border rgba(0,0,142,.09)
                      border-radius 20px
     So an inner page inherits the new tokens for type and ground but keeps the
     old look for every card, frame, quote and field. This file closes that gap
     and then adds the motion vocabulary index.html has and the inner pages do
     not.

   Method
     1. Re-express the `.mrnp-*` components in the index material language.
        Overrides only — marine-pages.css keeps owning layout, so a component
        that gains a new modifier there still works here.
     2. Add the `.pfx-*` components the inner pages needed and did not have.
     3. Extend the entrance vocabulary index-theme.css section 9 already
        defines, by adding `--sg-from` values. `[data-sg-in].sg-in` resets that
        one custom property, so a new direction is a one-line addition and can
        never invert the revealed state.

   Palette   : inherited. --ink #071a2e / --panel #0a2340 / --cyan #22b3e6 /
               --gold #ffad18. No new colours are introduced.
   Geometry  : 3px. Cards are plates, not pills. Corners are marked with
               cyan brackets that draw on hover — the engineering-drawing cue.
   Motion    : --e-out cubic-bezier(.16,1,.3,1) throughout. Weighty, no bounce.
   Budget    : every entrance transition here is <= 1.05s, because
               js/index-motion.js settle() strips the arming attributes at
               DUR 1150ms + delay and anything longer would be cut mid-flight.
   ========================================================================== */

/* ==========================================================================
   1. LOCAL TOKENS
   ========================================================================== */

:root {
    /* the bracket/tick language */
    --pfx-tick: 14px;
    --pfx-radius: 3px;
    --pfx-radius-lg: 4px;

    /* rings, tuned against #ffffff and #f4f8fc respectively */
    --pfx-ring: 1px solid rgba(7, 26, 46, .10);
    --pfx-ring-strong: 1px solid rgba(7, 26, 46, .16);
    --pfx-ring-dark: 1px solid rgba(53, 198, 244, .18);

    --pfx-plate: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    --pfx-plate-dark: linear-gradient(165deg, #0a2340 0%, #071a2e 60%, #04121f 100%);

    /* WAS a sheen: a 105deg band with rgba(255,255,255,.45) at its centre,
       swept across the plate on hover by translating ::before from -64% to
       +64% over 1.05s. Removed — at 45% white on a near-black plate it read as
       a bar of glare crossing the card rather than as light on it, and on a
       tall card it wiped the heading and the body copy on the way past.

       What replaces it is light with a SOURCE instead of a streak: a soft
       cyan pool anchored to the corner the pictogram sits in, which fades up
       and does not travel. The movement on hover is now only the card's own
       8px lift; the cursor-tracked ring in css/card-fx.css already supplies
       the pointer-following half, and the two were fighting each other. */
    --pfx-hover-wash: radial-gradient(120% 108% at 14% 0%,
            rgba(34, 179, 230, .15) 0%,
            rgba(34, 179, 230, .05) 42%,
            rgba(34, 179, 230, 0) 72%);

    --pfx-hover-wash-dark: radial-gradient(120% 108% at 14% 0%,
            rgba(53, 198, 244, .22) 0%,
            rgba(53, 198, 244, .07) 44%,
            rgba(53, 198, 244, 0) 74%);
}

/* ==========================================================================
   2. SECTION RHYTHM — parity with .mrn-section on index
   marine-pages.css ships 100px; index-theme.css ships 118px for .mrn-section.
   Two numbers on one site is one too many.
   ========================================================================== */

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

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

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

/* .mrn-soft / .mrn-dark already paint the blueprint grid and the corner
   bloom from index-theme.css section 2 — those class names are shared, so an
   .mrnp-section picks them up untouched. What is missing is the seam between
   two bands: on index the grounds meet under a wave, here they butt.

   The seam is drawn with an inset box-shadow, NOT a ::before. index-theme.css
   section 2 puts the blueprint grid on `.mrn-soft::before` / `.mrn-dark::before`
   and an `.mrnp-section.mrn-dark` matches both selectors — one pseudo element
   cannot hold two backgrounds, and the later, more specific rule would win and
   silently delete the grid from every section on the page. Measured: the grid
   disappeared from all but the first section before this was changed. */
.mrnp-section + .mrnp-section {
    box-shadow: inset 0 1px 0 rgba(7, 26, 46, .10);
}

.mrnp-section + .mrnp-section.mrn-dark,
.mrnp-section.mrn-dark + .mrnp-section {
    box-shadow: inset 0 1px 0 rgba(53, 198, 244, .22);
}

/* ==========================================================================
   3. PAGE HERO — from flat banner to instrument panel
   ========================================================================== */

.mrnp-hero {
    min-height: 640px;
    background: var(--ink);
    overflow: hidden;
    isolation: isolate;
}

/* The photograph is duotoned into the palette instead of merely darkened, so
   a stock-warm yard photo cannot fight the cyan. Same treatment as the index
   hero footage.

   `animation: none` is load-bearing. marine-pages.css:32 runs a 30s Ken Burns
   on this element, and a CSS animation on `transform` beats an inline style —
   so a scroll parallax writing transform here would be silently discarded
   every frame while still costing the work. One transform owner only, and
   scroll parallax is the better of the two. With JS off, the static
   `scale(1.06)` below is what renders, exactly as before.
   The layer is already overscanned by marine-pages.css:26 (`inset:-8% -4%`),
   which is where js/page-fx.js gets its travel budget from. */
.mrnp-hero__bg {
    filter: saturate(.42) contrast(1.08) brightness(.62);
    transform: scale(1.06);
    animation: none;
}

.mrnp-hero__scrim {
    background:
        linear-gradient(180deg, rgba(4, 18, 31, .58) 0%, rgba(4, 18, 31, .30) 38%, rgba(4, 18, 31, .93) 100%),
        linear-gradient(90deg, rgba(7, 26, 46, .94) 0%, rgba(7, 26, 46, .58) 46%, rgba(7, 26, 46, .18) 100%);
}

/* survey grid — tighter and cooler than marine-pages' default */
.mrnp-hero__grid {
    background-image:
        linear-gradient(to right, rgba(53, 198, 244, .085) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(53, 198, 244, .085) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(ellipse 92% 80% at 22% 46%, #000 8%, transparent 76%);
    mask-image: radial-gradient(ellipse 92% 80% at 22% 46%, #000 8%, transparent 76%);
    opacity: .9;
}

.mrnp-hero__orb--a {
    background: radial-gradient(circle, rgba(34, 179, 230, .40), transparent 66%);
}

.mrnp-hero__orb--b {
    background: radial-gradient(circle, rgba(255, 173, 24, .22), transparent 68%);
}

/* light shafts — the one purely atmospheric layer, cheap and static */
.mrnp-hero::after {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 150%;
    pointer-events: none;
    background:
        linear-gradient(101deg, transparent 34%, rgba(53, 198, 244, .09) 36%, transparent 39%),
        linear-gradient(101deg, transparent 52%, rgba(255, 255, 255, .055) 54%, transparent 58%),
        linear-gradient(101deg, transparent 68%, rgba(53, 198, 244, .06) 70%, transparent 74%);
    z-index: 1;
}

.mrnp-hero__inner {
    padding-top: 190px;
    padding-bottom: 132px;
    z-index: 4;
}

/* --- breadcrumb becomes a machined chip ------------------------------- */
.mrnp-crumb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 13px;
    border: 1px solid rgba(53, 198, 244, .26);
    border-radius: 2px;
    background: rgba(7, 26, 46, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11.5px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.mrnp-crumb::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan-bright, #35c6f4);
    box-shadow: 0 0 0 3px rgba(53, 198, 244, .22);
    flex: none;
}

.mrnp-crumb a {
    color: rgba(214, 231, 245, .8);
    transition: color .3s var(--e-out);
}

.mrnp-crumb a:hover {
    color: var(--cyan-bright, #35c6f4);
}

.mrnp-crumb span.sep {
    color: rgba(167, 187, 207, .45);
}

.mrnp-crumb strong {
    color: #fff;
    font-weight: 500;
}

/* --- title ------------------------------------------------------------- */
.mrnp-hero__title {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-weight: 500;
    letter-spacing: -.4px;
    line-height: 1.03;
    margin: 22px 0 0;
    text-shadow: 0 26px 60px rgba(4, 18, 31, .5);
}

.mrnp-hero__sub {
    color: #c5d8e8;
    max-width: 640px;
    font-size: 17.5px;
    line-height: 1.72;
    margin-top: 20px;
}

/* The rule keeps marine-pages.css's own scaleX entrance animation — that
   element is the one thing in the hero already choreographed correctly.
   Only the material changes: squared, wider, cyan leading into amber. */
.mrnp-hero__rule {
    width: 148px;
    height: 3px;
    margin-top: 30px;
    border-radius: 0;
    background: linear-gradient(90deg, var(--cyan-bright, #35c6f4), var(--gold, #ffad18));
}

/* --- scroll cue --------------------------------------------------------- */
/* Anchored to the right margin, not centred. The hero copy is left-aligned
   inside a 640px measure, and a centred cue lands inside that column — at
   1280px it overlapped the sub-heading's box by 9px. Dropping it at the right
   margin clears the copy at every width above the 860px cut-off, and a plumb
   line hung off the margin is the more industrial read anyway. */
.pfx-cue {
    position: absolute;
    right: 6%;
    bottom: 92px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.pfx-cue span {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 9.5px;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: rgba(167, 187, 207, .72);
}

.pfx-cue i {
    display: block;
    width: 1px;
    height: 54px;
    background: linear-gradient(180deg, rgba(53, 198, 244, .05), rgba(53, 198, 244, .85));
    position: relative;
    overflow: hidden;
}

.pfx-cue i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 16px;
    background: var(--gold, #ffad18);
    animation: pfxPlumb 2.4s var(--e-out) infinite;
}

@keyframes pfxPlumb {
    0% {
        top: -18px;
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        top: 56px;
        opacity: 0;
    }
}

/* wave: keep it, but let the section behind it show through the same way
   index does — the wave is a seam, not a decoration */
.mrnp-hero__wave {
    height: 74px;
}

/* --- .crd-hero — the audit-desk grade ------------------------------------
   The grade above is built for a daylight yard photograph: saturate(.42) and
   brightness(.62) duotone a warm, bright, outdoor frame down into the cyan
   chrome. images/about/credentials-banner-audit-desk.webp is an audit desk
   shot from above, at night, lit by one lamp. It arrives already dark and
   already in the palette, so the shared grade is subtraction from a frame
   that has nothing left to give: at .62 the documents stop being legible as
   documents and the picture reads as a black rectangle with an orange smear.

   This block is keyed to the photograph, not to the page. Every value below
   is measured against that one frame — the crop against where the desk sits,
   the wash against where the lamp and the window fall, ::before against the
   lamp's own throw. So it belongs on any page carrying that image and on no
   page carrying another, which is why it is opt-in on a class rather than
   stated on .mrnp-hero.

   One page opts in: our_credentials.html. health_safety.html,
   environment_management.html and waste_management.html carried this frame
   briefly after 6addfa9 deleted about-head-bg3.jpg out from under them; they
   now take daylight yard frames from images/gallery through the shared grade
   above, with no hook. css/about-fx.css section 5 does the same job for the
   About banner; it has a page stylesheet to live in, and this does not.

   transform is untouched: js/page-fx.js heroScrub() writes it inline for the
   parallax and marine-pages.css:26 supplies the overscan it travels inside.

   The phone step for this block lives in section 8 with every other width
   breakpoint in this file.
   -------------------------------------------------------------------------- */

.crd-hero .mrnp-hero__bg {
    /* Barely touched. Contrast does the work the exposure cut used to do, so
       the paperwork stays readable as paperwork. */
    filter: saturate(1.02) contrast(1.1) brightness(.96);

    /* The subject is the desk, and the desk is the lower half of a 3:2 frame
       dropped into a 2.3:1 strip. Centred, `cover` keeps the empty ceiling and
       cuts the documents; biased down it keeps the lit papers, the drawing and
       the helmet, and spends the crop on the dark upper wall instead. */
    background-position: 50% 64%;
}

/* The picture's own bright spots — the window and the lamp — sit top-left,
   which is exactly where the crumb, the H1 and the ISO line go. So the wash
   is heaviest there and lifts across to the right, where the helmet and the
   lit drawing are worth seeing. The vertical pass keeps its usual duties:
   dark under the sticky header, dark at the foot for the wave seam. */
.crd-hero .mrnp-hero__scrim {
    background:
        linear-gradient(96deg,
            rgba(4, 18, 31, .93) 0%,
            rgba(5, 22, 37, .84) 30%,
            rgba(5, 22, 37, .46) 58%,
            rgba(5, 22, 37, .16) 80%,
            rgba(5, 22, 37, .06) 100%),
        linear-gradient(180deg,
            rgba(4, 18, 31, .74) 0%,
            rgba(4, 18, 31, .14) 32%,
            rgba(4, 18, 31, .30) 66%,
            rgba(4, 18, 31, .94) 100%),
        radial-gradient(118% 104% at 46% 44%,
            transparent 40%,
            rgba(2, 11, 20, .44) 100%);
}

/* The lamp already throws warm light across the desk; this carries it past
   the crop rather than letting it stop at the frame edge. Screened, so it
   only ever adds. .mrnp-hero isolates, so the blend stays inside the banner. */
.crd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(34% 30% at 78% 58%, rgba(255, 166, 46, .20), transparent 70%),
        radial-gradient(26% 24% at 24% 30%, rgba(120, 214, 235, .12), transparent 72%);
}

/* Same call as the About banner: three straight diagonals drawn over a frame
   that already contains a light source read as a smear on the lens, not as
   light. Turned down, not removed — the sky-equivalent here is the dark wall,
   and it goes flat without them. */
.crd-hero::after {
    opacity: .34;
}

.crd-hero .mrnp-hero__orb--b {
    right: 14%;
    bottom: 24%;
    background: radial-gradient(circle, rgba(255, 171, 46, .24), transparent 68%);
}


/* ==========================================================================
   4. GEOMETRY RESET — plates, not pills
   One block, so the squared language cannot drift between components.
   ========================================================================== */
.mrnp-icard,
.mrnp-flip__face,
.mrnp-split__frame,
.mrnp-split__tag,
.mrnp-checks li,
.mrnp-acc,
.mrnp-acc__item,
.mrnp-gal__item,
.mrnp-post,
.mrnp-post__pic,
.mrnp-quote,
.mrnp-certcard,
.mrnp-infocard,
.mrnp-form,
.mrnp-map,
.mrnp-strip,
.mrnp-pagenav,
.pfx-note,
.pfx-step,
.pfx-stamp,
.pfx-figure,
.pfx-hop__link {
    border-radius: var(--pfx-radius);
}

/* the corner bracket. Drawn with two gradients on a pseudo element so it
   costs no extra DOM, and animated by width/height so it "draws". */
.mrnp-icard,
.mrnp-quote,
.mrnp-infocard,
.pfx-step,
.pfx-note {
    position: relative;
}
.mrnp-icard::after,
.mrnp-infocard::after,
.pfx-step::after,
.pfx-note::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: var(--pfx-tick);
    height: var(--pfx-tick);
    border-top: 2px solid var(--cyan, #22b3e6);
    border-left: 2px solid var(--cyan, #22b3e6);
    opacity: 0;
    transition: opacity .34s var(--e-out), width .46s var(--e-out), height .46s var(--e-out);
    pointer-events: none;
    /* marine-pages.css:24 already uses ::after on .mrnp-icard — a full-width
       3px gold bar held at scaleX(0). Every one of its declarations has to be
       unwound here or the bracket inherits a zero-width transform and never
       renders. `transform: none` is the one that actually breaks it. */
    background: none;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    inset: -1px auto auto -1px;
    transform: none;
    filter: none;
}
.mrnp-icard:hover::after,
.mrnp-infocard:hover::after,
.pfx-step:hover::after,
.pfx-note:hover::after {
    opacity: 1;
    width: 30px;
    height: 30px;
}

/* ==========================================================================
   5. COMPONENT RETHEME
   ========================================================================== */

/* --- 5.1 prose ---------------------------------------------------------- */

.mrnp-prose > p {
    font-size: 16.5px;
    line-height: 1.86;
    color: var(--body-on-light, #4a6076);
}

.mrn-dark .mrnp-prose > p,
.mrnp-section.mrn-dark .mrnp-prose > p {
    color: var(--body-on-dark, #a7bbcf);
}

.mrnp-prose--lead > p:first-of-type {
    font-size: 19px;
    line-height: 1.74;
    color: var(--heading-on-light, #071a2e);
}

.mrn-dark .mrnp-prose--lead > p:first-of-type {
    color: #e6f1fa;
}

/* the drop cap becomes a set numeral plate rather than a soft gradient blob */
.mrnp-prose--lead > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-weight: 300;
    font-size: 68px;
    line-height: .84;
    margin: 6px 16px 0 0;
    padding: 10px 14px 8px;
    color: var(--cyan-deep, #1195cf);
    background: linear-gradient(180deg, rgba(34, 179, 230, .10), rgba(34, 179, 230, 0));
    border-left: 3px solid var(--cyan, #22b3e6);
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

.mrn-dark .mrnp-prose--lead > p:first-of-type::first-letter {
    color: var(--cyan-bright, #35c6f4);
    background: linear-gradient(180deg, rgba(53, 198, 244, .14), rgba(53, 198, 244, 0));
}

.mrnp-prose h3,
.mrnp-prose h4 {
    font-family: var(--font-display, "Oswald", sans-serif);
    color: var(--heading-on-light, #071a2e);
    letter-spacing: .2px;
}

.mrn-dark .mrnp-prose h3,
.mrn-dark .mrnp-prose h4 {
    color: #fff;
}

/* --- 5.2 icon cards ----------------------------------------------------- */

.mrnp-icard {
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    padding: 38px 30px 34px;
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out),
        border-color .5s var(--e-out), background .5s var(--e-out);
    overflow: hidden;
}

/* marine-pages.css paints a gradient wash in ::before — retuned to a cyan
   pool that fades up in place. `transform: none` is load-bearing: without it
   the element keeps marine-pages.css's own translate and starts off-card. */
.mrnp-icard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pfx-hover-wash);
    opacity: 0;
    transform: none;
    transition: opacity .42s var(--e-out);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.mrn-dark .mrnp-icard::before {
    background: var(--pfx-hover-wash-dark);
}

.mrnp-icard:hover {
    transform: translateY(-8px);
    border-color: rgba(34, 179, 230, .40);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78)),
        0 0 0 1px rgba(34, 179, 230, .16) inset;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
}

.mrnp-icard:hover::before {
    opacity: 1;
}

.mrnp-icard > * {
    position: relative;
    z-index: 1;
}

.mrnp-icard__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 2px;
    background: linear-gradient(150deg, rgba(34, 179, 230, .16), rgba(34, 179, 230, .04));
    border: 1px solid rgba(34, 179, 230, .28);
    color: var(--cyan-deep, #1195cf);
    margin-bottom: 24px;
    transition: transform .5s var(--e-out), background .5s var(--e-out),
        border-color .5s var(--e-out), color .5s var(--e-out);
}

.mrnp-icard__icon svg,
.mrnp-icard__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* The translateZ is kept for the pages where the card is genuinely a
   preserve-3d surface. The rotate(-5deg) is not: `overflow: hidden` on
   .mrnp-icard flattens the 3D context, so the Z never renders and the rotation
   was the only part that did — a 42px plate sitting visibly crooked next to
   dead-straight type, which read as a rendering fault rather than a flourish.
   The fill and the glow carry the state on their own. */
.mrnp-icard:hover .mrnp-icard__icon {
    transform: translateZ(48px);
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.mrnp-icard h4 {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: .2px;
    color: var(--heading-on-light, #071a2e);
    margin: 0 0 12px;
}

.mrnp-icard p {
    font-size: 15px;
    line-height: 1.74;
    color: var(--body-on-light, #4a6076);
    margin: 0;
}

.mrnp-icard:hover h4 {
    color: var(--cyan-deep, #1195cf);
}

.mrnp-icard:hover p {
    color: var(--body-on-light, #4a6076);
}

/* The index number is data, so it is set like data: thin, large, quiet.
   marine-pages.css:118 draws it as an outline — transparent fill plus a
   -webkit-text-stroke. Both have to be unwound before `color` means anything
   again in WebKit, and `bottom` has to be released or the box stretches
   between the old bottom:6px and the new top:24px. */
.mrnp-icard__no {
    position: absolute;
    top: 24px;
    right: 24px;
    bottom: auto;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-weight: 200;
    font-size: 40px;
    line-height: 1;
    color: rgba(7, 26, 46, .11);
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    letter-spacing: -1px;
    transition: color .5s var(--e-out), transform .5s var(--e-out);
    z-index: 1;
}

.mrnp-icard:hover .mrnp-icard__no {
    color: rgba(255, 173, 24, .62);
    -webkit-text-fill-color: currentColor;
    transform: translateY(-2px);
}

/* on a dark ground the plate inverts */
.mrn-dark .mrnp-icard {
    background: var(--pfx-plate-dark);
    border: var(--pfx-ring-dark);
    box-shadow: 0 26px 56px -34px rgba(0, 0, 0, .8);
}

.mrn-dark .mrnp-icard:hover {
    background: linear-gradient(165deg, #0d2b4e 0%, #08203a 60%, #051829 100%);
    border-color: rgba(53, 198, 244, .5);
    /* .mrnp-icard:hover above sets a light-ground shadow that is invisible on
       a near-black plate, and the sweep used to be the only thing that said
       "this one". A contact shadow plus a cyan spill is what says it now. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 34px 68px -34px rgba(0, 0, 0, .9),
        0 20px 46px -30px rgba(34, 179, 230, .65);
}

.mrn-dark .mrnp-icard h4 {
    color: #fff;
}

.mrn-dark .mrnp-icard:hover h4 {
    color: var(--cyan-bright, #35c6f4);
}

.mrn-dark .mrnp-icard p,
.mrn-dark .mrnp-icard:hover p {
    color: var(--body-on-dark, #a7bbcf);
}

.mrn-dark .mrnp-icard__no {
    color: rgba(255, 255, 255, .10);
}

.mrn-dark .mrnp-icard__icon {
    background: linear-gradient(150deg, rgba(53, 198, 244, .18), rgba(53, 198, 244, .04));
    border-color: rgba(53, 198, 244, .32);
    color: var(--cyan-bright, #35c6f4);
}

/* --- 5.3 image / text split --------------------------------------------- */

.mrnp-split__frame {
    border: 1px solid rgba(7, 26, 46, .14);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
    overflow: hidden;
    position: relative;
    background: var(--ink, #071a2e);
}

/* duotone at rest, true colour on hover — same behaviour as the index plates,
   so a photograph never breaks the palette while it is just sitting there */
.mrnp-split__frame img {
    filter: saturate(.62) contrast(1.05);
    transition: filter .8s var(--e-out), transform 1.1s var(--e-out);
}

.mrnp-split__media:hover .mrnp-split__frame img {
    filter: saturate(1) contrast(1);
    transform: scale(1.045);
}

/* marine-pages.css used ::after for the colour scrim; ::after is now the
   bezel, so the scrim moves to ::before, which that file leaves free */
.mrnp-split__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(7, 26, 46, .34) 0%, transparent 46%, rgba(17, 149, 207, .30) 100%);
    opacity: 1;
    transition: opacity .7s var(--e-out);
}

.mrnp-split__media:hover .mrnp-split__frame::before {
    opacity: .35;
}

/* cyan hairline ring, inset — reads as a machined bezel */
.mrnp-split__frame::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(53, 198, 244, .30);
    pointer-events: none;
    opacity: .8;
    transition: inset .6s var(--e-out), opacity .6s var(--e-out);
    background: none;
    z-index: 2;
}

.mrnp-split__media:hover .mrnp-split__frame::after {
    inset: 16px;
    opacity: 1;
}

.mrnp-split__tag {
    background: var(--ink, #071a2e);
    border: 1px solid rgba(53, 198, 244, .34);
    color: #fff;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    padding: 13px 22px;
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
}

.mrnp-split__tag::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--gold, #ffad18);
    margin-right: 9px;
    vertical-align: 1px;
}

/* the offset plate behind the photo — squared, cyan, not a soft blob */
.mrnp-split__media::before {
    background: none;
    border: 2px solid rgba(34, 179, 230, .40);
    border-radius: 0;
    opacity: 1;
}

/* --- 5.4 check lists ---------------------------------------------------- */

.mrnp-checks li {
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    padding: 18px 22px 18px 56px;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--body-on-light, #4a6076);
    transition: transform .42s var(--e-out), border-color .42s var(--e-out),
        box-shadow .42s var(--e-out), background .42s var(--e-out);
}

.mrnp-checks li::before {
    left: 18px;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    box-shadow: 0 6px 16px -8px rgba(34, 179, 230, .9);
}

.mrnp-checks li:hover {
    transform: translateX(6px);
    border-color: rgba(34, 179, 230, .40);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    background: linear-gradient(90deg, rgba(34, 179, 230, .07), #ffffff 42%);
}

.mrn-dark .mrnp-checks li {
    background: rgba(255, 255, 255, .04);
    border: var(--pfx-ring-dark);
    color: var(--body-on-dark, #a7bbcf);
}

.mrn-dark .mrnp-checks li:hover {
    background: rgba(53, 198, 244, .10);
    border-color: rgba(53, 198, 244, .40);
}

/* --- 5.5 accordion ------------------------------------------------------ */

/* One stack, not a column of floating pills. `gap: 0` and dropping the item
   border are both required: marine-pages.css:637 sets `gap: 14px` and gives
   every item its own 1px ring, which reads as a list of separate objects. */
.mrnp-acc {
    gap: 0;
    border: var(--pfx-ring);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
}

.mrnp-acc__item {
    border: 0;
    border-radius: 0;
    position: relative;
    box-shadow: none;
}

.mrnp-acc__item + .mrnp-acc__item {
    border-top: 1px solid rgba(7, 26, 46, .09);
}

.mrnp-acc__item.is-open {
    box-shadow: none;
}

.mrnp-acc__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cyan, #22b3e6);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .5s var(--e-out);
}

.mrnp-acc__item.is-open::before {
    transform: scaleY(1);
}

.mrnp-acc__head {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .3px;
    color: var(--heading-on-light, #071a2e);
    padding: 24px 66px 24px 28px;
    background: transparent;
    transition: background .38s var(--e-out), color .38s var(--e-out), padding-left .38s var(--e-out);
}

.mrnp-acc__head:hover {
    background: rgba(34, 179, 230, .05);
    color: var(--cyan-deep, #1195cf);
    padding-left: 34px;
}

.mrnp-acc__item.is-open .mrnp-acc__head {
    background: linear-gradient(90deg, rgba(34, 179, 230, .10), transparent 60%);
    color: var(--cyan-deep, #1195cf);
}

.mrnp-acc__sign {
    right: 24px;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid rgba(34, 179, 230, .34);
    background: rgba(34, 179, 230, .07);
    color: var(--cyan-deep, #1195cf);
    font-weight: 300;
    transition: transform .45s var(--e-out), background .45s var(--e-out), color .45s var(--e-out);
}

.mrnp-acc__item.is-open .mrnp-acc__sign {
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    border-color: transparent;
    color: #fff;
}

.mrnp-acc__panel-inner {
    padding: 4px 30px 28px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--body-on-light, #4a6076);
}

/* --- 5.6 gallery -------------------------------------------------------- */

.mrnp-gal__item {
    border: 1px solid rgba(7, 26, 46, .12);
    background: var(--ink, #071a2e);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    transition: transform .55s var(--e-out), box-shadow .55s var(--e-out), border-color .55s var(--e-out);
}

.mrnp-gal__item img {
    filter: saturate(.6) contrast(1.06) brightness(.94);
    transition: filter .7s var(--e-out), transform 1s var(--e-out);
}

.mrnp-gal__item:hover {
    transform: translateY(-7px);
    border-color: rgba(34, 179, 230, .5);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
}

.mrnp-gal__item:hover img {
    filter: saturate(1) contrast(1) brightness(1);
    transform: scale(1.07);
}

.mrnp-gal__item::after {
    background: linear-gradient(180deg, rgba(4, 18, 31, 0) 30%, rgba(4, 18, 31, .88) 100%);
}

.mrnp-gal__zoom {
    border-radius: 2px;
    background: rgba(7, 26, 46, .72);
    border: 1px solid rgba(53, 198, 244, .45);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.mrnp-gal__cap {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
}

/* The lightbox is the one .mrnp-* component that already ships in the
   industrial language: marine-pages.css section 8 was rebuilt around the
   framed viewer and reads the same --cyan / --gold / --pfx-* tokens this
   file works in, so re-skinning it here would only fight that. What stood
   here were overrides for .mrnp-lb__img and .mrnp-lb__close, and the frame,
   the title bar and the thumbnail rail have taken over both jobs. */

/* --- 5.7 news / articles ------------------------------------------------ */

.mrnp-post {
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    overflow: hidden;
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}

.mrnp-post:hover {
    transform: translateY(-8px);
    border-color: rgba(34, 179, 230, .4);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
}

.mrnp-post__pic {
    border-radius: 0;
    background: var(--ink, #071a2e);
}

.mrnp-post__pic img {
    filter: saturate(.62) contrast(1.05);
    transition: filter .7s var(--e-out), transform 1s var(--e-out);
}

.mrnp-post:hover .mrnp-post__pic img {
    filter: none;
    transform: scale(1.06);
}

.mrnp-post__date {
    border-radius: 2px;
    background: var(--ink, #071a2e);
    border: 1px solid rgba(53, 198, 244, .34);
    color: #fff;
    font-family: var(--font-display, "Oswald", sans-serif);
    letter-spacing: 1.6px;
}

.mrnp-post__body h4 {
    font-family: var(--font-display, "Oswald", sans-serif);
    color: var(--heading-on-light, #071a2e);
}

.mrnp-post:hover .mrnp-post__body h4 {
    color: var(--cyan-deep, #1195cf);
}

/* --- 5.8 testimonials --------------------------------------------------- */

.mrnp-quote {
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    padding: 44px 34px 32px;
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}

/* Georgia's quote mark stays — it is the one serif on the page and it reads
   as a mark rather than as a character. Colour only. */
.mrnp-quote::before {
    color: rgba(34, 179, 230, .22);
}

.mrnp-quote:hover {
    transform: translateY(-7px);
    border-color: rgba(34, 179, 230, .4);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
}

.mrnp-quote p {
    font-size: 16px;
    line-height: 1.82;
    color: var(--body-on-light, #4a6076);
}

.mrnp-quote__av {
    border-radius: 2px;
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    color: #fff;
    font-family: var(--font-display, "Oswald", sans-serif);
    letter-spacing: 1px;
}

.mrnp-quote__by strong {
    font-family: var(--font-display, "Oswald", sans-serif);
    color: var(--heading-on-light, #071a2e);
}

.mrnp-quote__by span {
    color: var(--cyan-deep, #1195cf);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.mrn-dark .mrnp-quote {
    background: var(--pfx-plate-dark);
    border: var(--pfx-ring-dark);
}

.mrn-dark .mrnp-quote p {
    color: var(--body-on-dark, #a7bbcf);
}

.mrn-dark .mrnp-quote__by strong {
    color: #fff;
}

/* --- 5.9 certificates --------------------------------------------------- */

.mrnp-certcard {
    background: #fff;
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    overflow: hidden;
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}

.mrnp-certcard:hover {
    transform: translateY(-8px);
    border-color: rgba(34, 179, 230, .45);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
}

.mrnp-certcard img {
    filter: saturate(.9);
    transition: filter .6s var(--e-out), transform .8s var(--e-out);
}

.mrnp-certcard:hover img {
    filter: none;
    transform: scale(1.03);
}

.mrnp-certcard__bar {
    background: var(--ink, #071a2e);
    color: #fff;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-top: 2px solid var(--cyan, #22b3e6);
}

.mrnp-certcard:hover .mrnp-certcard__bar {
    background: linear-gradient(90deg, var(--cyan-deep, #1195cf), var(--ink, #071a2e));
}

/* --- 5.10 contact ------------------------------------------------------- */

.mrnp-infocard {
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    padding: 28px 28px 26px;
    transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), border-color .45s var(--e-out);
}

.mrnp-infocard:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 179, 230, .42);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
}

.mrnp-infocard__icon {
    border-radius: 2px;
    background: linear-gradient(150deg, rgba(34, 179, 230, .16), rgba(34, 179, 230, .04));
    border: 1px solid rgba(34, 179, 230, .28);
    color: var(--cyan-deep, #1195cf);
    transition: background .45s var(--e-out), color .45s var(--e-out),
        border-color .45s var(--e-out), transform .45s var(--e-out);
}

.mrnp-infocard:hover .mrnp-infocard__icon {
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px) rotate(-6deg);
}

.mrnp-infocard strong {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--cyan-deep, #1195cf);
}

.mrnp-infocard p,
.mrnp-infocard a {
    color: var(--heading-on-light, #071a2e);
    font-size: 15.5px;
    line-height: 1.68;
}

.mrnp-infocard a:hover {
    color: var(--cyan-deep, #1195cf);
}

/* On a dark ground the plate inverts, exactly as .mrnp-icard does in 5.2.
   Without this, news.html #enquiries renders three bright white cards on the
   deep navy band — the one place on the site where a dark section's cards do
   not invert with their ground. */
.mrn-dark .mrnp-infocard {
    background: var(--pfx-plate-dark);
    border: var(--pfx-ring-dark);
    box-shadow: 0 26px 56px -34px rgba(0, 0, 0, .8);
}

.mrn-dark .mrnp-infocard:hover {
    background: linear-gradient(165deg, #0d2b4e 0%, #08203a 60%, #051829 100%);
    border-color: rgba(53, 198, 244, .45);
}

.mrn-dark .mrnp-infocard strong {
    color: var(--cyan-bright, #35c6f4);
}

.mrn-dark .mrnp-infocard p,
.mrn-dark .mrnp-infocard a {
    color: var(--body-on-dark, #a7bbcf);
}

.mrn-dark .mrnp-infocard a:hover {
    color: var(--cyan-bright, #35c6f4);
}

.mrn-dark .mrnp-infocard__icon {
    background: linear-gradient(150deg, rgba(53, 198, 244, .18), rgba(53, 198, 244, .04));
    border-color: rgba(53, 198, 244, .32);
    color: var(--cyan-bright, #35c6f4);
}

.mrn-dark .mrnp-infocard:hover .mrnp-infocard__icon {
    background: linear-gradient(150deg, var(--cyan-bright, #35c6f4), var(--cyan-deep, #1195cf));
    color: #041724;
}

/* --- the infocard as a 3D surface ---------------------------------------
   Caller: news.html #enquiries, where each card carries data-mrnp-tilt.
   js/marine-pages.js writes `perspective(1000px) rotateY() rotateX()
   translateY(-6px)` inline on mousemove; preserve-3d is what turns that into
   a real surface, and the icon then rides out of it on Z the way the icard's
   does in 5.2. Scoped to [data-mrnp-tilt] so the stacked contact column on
   contact_us.html — which has no tilt and no perspective — is untouched: a
   translateZ with no perspective ancestor renders as nothing at all. */
.mrnp-infocard[data-mrnp-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}

.mrnp-infocard[data-mrnp-tilt] > div:last-child {
    transition: transform .45s var(--e-out);
}

.mrnp-infocard[data-mrnp-tilt]:hover .mrnp-infocard__icon {
    transform: translateZ(44px) rotate(-6deg);
    box-shadow: var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.mrnp-infocard[data-mrnp-tilt]:hover > div:last-child {
    transform: translateZ(18px);
}

.mrnp-form {
    background: var(--pfx-plate-dark);
    border: var(--pfx-ring-dark);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
    padding: 44px 38px 40px;
    overflow: hidden;
}

/* Blueprint grid inside the form panel — ties it to the dark sections.
   marine-pages.css:1213 uses this pseudo element for a 300x300 blurred amber
   orb, so the explicit width/height/border-radius/filter/animation and the
   background COLOUR all have to be unwound; `inset: 0` alone would leave a
   300px square pinned to the corner. */
.mrnp-form::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    filter: none;
    animation: none;
    background-color: transparent;
    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: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 10%, transparent 82%);
    mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 10%, transparent 82%);
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

.mrnp-form h3 {
    font-family: var(--font-display, "Oswald", sans-serif);
    color: #fff;
    letter-spacing: .4px;
}

.mrnp-form > p {
    color: var(--body-on-dark, #a7bbcf);
}

/* The underline field stays. Its floating label is positioned in px against
   that exact geometry (marine-pages.css:1270-1288) and boxing the input would
   put the label back inside the box. Colour and weight only. */
.mrnp-field input,
.mrnp-field textarea {
    border-bottom-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.mrnp-field input:focus,
.mrnp-field textarea:focus {
    border-bottom-color: rgba(53, 198, 244, .5);
}

.mrnp-field label {
    color: rgba(167, 187, 207, .78);
    letter-spacing: .6px;
}

.mrnp-field input:focus + label,
.mrnp-field textarea:focus + label,
.mrnp-field input:not(:placeholder-shown) + label,
.mrnp-field textarea:not(:placeholder-shown) + label {
    color: var(--cyan-bright, #35c6f4);
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.mrnp-field__line {
    background: linear-gradient(90deg, var(--cyan-bright, #35c6f4), var(--gold, #ffad18));
}

/* The grade already lives on the container (marine-pages.css:1314) and lifts
   on hover — deepened here, not duplicated onto the iframe, because two
   stacked filters would double the desaturation. */
.mrnp-map {
    border: var(--pfx-ring);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
    overflow: hidden;
    position: relative;
    filter: grayscale(.55) saturate(.85) contrast(1.05);
    transition: filter .6s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}

.mrnp-map:hover {
    filter: none;
    border-color: rgba(34, 179, 230, .42);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
}

/* --- 5.11 stat strip ---------------------------------------------------- */

.mrnp-strip {
    background: var(--pfx-plate-dark);
    border: var(--pfx-ring-dark);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
    overflow: hidden;
    position: relative;
}

.mrnp-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(520px 260px at 8% 0%, rgba(34, 179, 230, .16), transparent 68%),
        radial-gradient(420px 220px at 96% 100%, rgba(255, 173, 24, .10), transparent 70%);
}

.mrnp-strip div {
    border-right: 1px solid rgba(53, 198, 244, .16);
    position: relative;
    z-index: 1;
}

.mrnp-strip strong {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-weight: 200;
    color: #fff;
    letter-spacing: -.5px;
}

.mrnp-strip strong i,
.mrnp-strip strong em {
    font-style: normal;
    color: var(--gold, #ffad18);
    font-size: .58em;
    vertical-align: super;
}

/* THE LABEL IS A DIRECT CHILD, and the selector has to say so.
   The animated figures use the pattern the design system specifies —
   `<strong><span data-count="1983">0</span></strong>` — so a bare
   `.mrnp-strip span` catches the COUNTER as well as the label and renders the
   number at 11px in muted grey while its plain-text neighbours sit at 42px in
   cyan. Visible on about_us, jjsb and sspsb: every strip figure that counts
   was the one figure you could not read. */
.mrnp-strip > div > span {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(167, 187, 207, .86);
}

/* and the counter takes the numeral's type, not the label's. `display` and
   `margin-top` matter as much as the type here: the label rule in
   marine-pages.css blocks the counter and pushes it down 8px, which drops the
   animated figure out of line with its plain-text neighbours in the strip. */
.mrnp-strip strong span {
    display: inline;
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

/* --- 5.12 sticky page nav ----------------------------------------------- */

.mrnp-pagenav {
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    padding: 24px 22px;
}

.mrnp-pagenav h5 {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--cyan-deep, #1195cf);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(7, 26, 46, .1);
}

.mrnp-pagenav a {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 14px;
    letter-spacing: .6px;
    color: var(--body-on-light, #4a6076);
    padding-left: 16px;
    position: relative;
    transition: color .34s var(--e-out), padding-left .34s var(--e-out);
}

.mrnp-pagenav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 1px;
    background: currentColor;
    opacity: .5;
    transition: width .34s var(--e-out);
}

.mrnp-pagenav a:hover,
.mrnp-pagenav a.is-active {
    color: var(--cyan-deep, #1195cf);
    padding-left: 24px;
}

.mrnp-pagenav a:hover::before,
.mrnp-pagenav a.is-active::before {
    width: 16px;
    opacity: 1;
}

/* --- 5.13 flip card ----------------------------------------------------- */

.mrnp-flip__face {
    border: var(--pfx-ring);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
}

.mrnp-flip__face--front {
    background: var(--pfx-plate);
}

.mrnp-flip__face--back {
    background: var(--pfx-plate-dark);
    border: var(--pfx-ring-dark);
}

.mrnp-flip__face h4 {
    font-family: var(--font-display, "Oswald", sans-serif);
    letter-spacing: .3px;
}

.mrnp-flip__face--back h4 {
    color: var(--cyan-bright, #35c6f4);
}

.mrnp-flip__face--back p {
    color: var(--body-on-dark, #a7bbcf);
}

/* ==========================================================================
   6. NEW COMPONENTS — .pfx-*
   Each one exists because an inner page had content with no home for it.
   Nothing here is speculative: every block below is used by a real page, and
   a component that stopped being used should be deleted rather than kept
   "in case". Current callers are named on each block.
   ========================================================================== */

/* --- 6.1 note / status panel -------------------------------------------
   Caller: news.html #latest. The page has no articles yet, and the honest
   empty state was set as body prose complete with a drop cap, which reads as
   an article rather than as a notice. This marks it as a status message. */

.pfx-note {
    background: linear-gradient(150deg, rgba(34, 179, 230, .07), rgba(34, 179, 230, .01));
    border: 1px solid rgba(34, 179, 230, .26);
    border-left: 3px solid var(--cyan, #22b3e6);
    padding: 30px 32px;
    max-width: 720px;
}

.pfx-note h4 {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 19px;
    letter-spacing: .3px;
    color: var(--heading-on-light, #071a2e);
    margin: 0 0 10px;
}

.pfx-note p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--body-on-light, #4a6076);
}

.pfx-note p + p {
    margin-top: 16px;
}

.mrn-dark .pfx-note {
    background: linear-gradient(150deg, rgba(53, 198, 244, .10), rgba(53, 198, 244, .02));
    border-color: rgba(53, 198, 244, .3);
}

.mrn-dark .pfx-note h4 {
    color: #fff;
}

.mrn-dark .pfx-note p {
    color: var(--body-on-dark, #a7bbcf);
}

/* --- 6.1a live status plate — .pfx-note--live ---------------------------
   Caller: news.html #latest.

   The note above says the newsroom is empty. Set as flat prose that reads as
   a paragraph somebody forgot to finish; the modifier makes it read as an
   instrument reading instead — a status flag with a live LED, corner brackets
   that draw on hover (the engineering-drawing cue the icards already use),
   and a preserve-3d surface so the data-mrnp-tilt on the plate has something
   to tilt and the flag can stand proud of it on translateZ.

   The brackets are on the RIGHT corners only. .pfx-note carries a 3px cyan
   left border and a second cyan mark 1px away from it reads as a rendering
   fault, not as a bracket. */

.pfx-note--live {
    position: relative;
    padding-top: 26px;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out),
        border-top-color .5s var(--e-out), border-right-color .5s var(--e-out),
        border-bottom-color .5s var(--e-out);
}

/* border-COLOR would take the 3px cyan left rule with it */
.pfx-note--live:hover {
    border-top-color: rgba(34, 179, 230, .45);
    border-right-color: rgba(34, 179, 230, .45);
    border-bottom-color: rgba(34, 179, 230, .45);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
}

/* They sit OUTSIDE the plate edge, not on it. Flush with the border they read
   as a thicker corner of the border itself — measured against the .45 cyan the
   hover state puts on that border, a 2px mark on top of it is barely a mark.
   Standing them off by 7px makes them the drawing's registration corners,
   which is the cue being borrowed. */
.pfx-note--live::before,
.pfx-note--live::after {
    content: "";
    position: absolute;
    right: -7px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cyan, #22b3e6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s var(--e-out), transform .55s var(--e-out);
}

.pfx-note--live::before {
    top: -7px;
    border-left: 0;
    border-bottom: 0;
    transform: translate3d(-10px, 10px, 0);
}

.pfx-note--live::after {
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    transform: translate3d(-10px, -10px, 0);
}

.pfx-note--live:hover::before,
.pfx-note--live:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.pfx-note__flag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border: 1px solid rgba(34, 179, 230, .3);
    border-radius: var(--pfx-radius, 3px);
    background: rgba(255, 255, 255, .8);
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--cyan-deep, #1195cf);
    transition: transform .5s var(--e-out), border-color .5s var(--e-out),
        box-shadow .5s var(--e-out);
}

.pfx-note--live:hover .pfx-note__flag {
    transform: translateZ(40px);
    border-color: rgba(34, 179, 230, .58);
    box-shadow: var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.pfx-note__flag i {
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan, #22b3e6);
    animation: pfxLed 2.8s ease-out infinite;
}

/* the LED is the one thing on the page that repeats forever, so it is a ring
   expanding out of the dot rather than the dot itself pulsing — nothing moves
   in the layout and the eye can rest on it */
@keyframes pfxLed {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 179, 230, .55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 179, 230, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 179, 230, 0);
    }
}

.mrn-dark .pfx-note__flag {
    background: rgba(4, 18, 31, .5);
    border-color: rgba(53, 198, 244, .34);
    color: var(--cyan-bright, #35c6f4);
}

/* --- 6.2 numbered process spine ---------------------------------------
   Caller: waste_management.html #procedure. Nine chain-of-custody steps that
   were set as a 3-up card grid, which throws away the one thing that matters
   about them — that they are a sequence. The spine fills as the reader
   descends, driven by --pfx-p from js/page-fx.js. */

.pfx-steps {
    position: relative;
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 48px auto 0;
    max-width: 900px;
    counter-reset: pfxstep;
}

/* the spine. --pfx-p is written by js/page-fx.js as the section scrolls, so
   the line fills as the reader descends — the same device as the index
   journey timeline. */
.pfx-steps::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: rgba(7, 26, 46, .12);
}

.pfx-steps::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg, var(--cyan, #22b3e6), var(--gold, #ffad18));
    transform: scaleY(var(--pfx-p, 0));
    transform-origin: top center;
    transition: transform .12s linear;
}

.mrn-dark .pfx-steps::before {
    background: rgba(255, 255, 255, .12);
}

.pfx-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    align-items: start;
    padding: 22px 26px 22px 0;
    background: transparent;
    border: 0;
    transition: transform .45s var(--e-out);
}

.pfx-step:hover {
    transform: translateX(6px);
}

.pfx-step__no {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 2px;
    background: var(--pfx-plate);
    border: 1px solid rgba(34, 179, 230, .32);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    font-family: var(--font-display, "Oswald", sans-serif);
    font-weight: 300;
    font-size: 20px;
    color: var(--cyan-deep, #1195cf);
    position: relative;
    z-index: 1;
    transition: background .45s var(--e-out), color .45s var(--e-out),
        border-color .45s var(--e-out), box-shadow .45s var(--e-out);
}

.pfx-step:hover .pfx-step__no {
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.mrn-dark .pfx-step__no {
    background: var(--pfx-plate-dark);
    border-color: rgba(53, 198, 244, .34);
    color: var(--cyan-bright, #35c6f4);
}

.pfx-step__body {
    padding-top: 4px;
}

.pfx-step__body h4 {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .2px;
    color: var(--heading-on-light, #071a2e);
    margin: 0 0 8px;
}

/* the step's own pictogram, carried over from the card layout it replaced */
.pfx-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 2px;
    border: 1px solid rgba(34, 179, 230, .28);
    background: rgba(34, 179, 230, .08);
    color: var(--cyan-deep, #1195cf);
    transition: background .45s var(--e-out), color .45s var(--e-out), border-color .45s var(--e-out);
}

.pfx-step__icon svg,
.pfx-step__icon img {
    width: 19px;
    height: 19px;
    display: block;
}

.mrn-dark .pfx-step__icon {
    border-color: rgba(53, 198, 244, .3);
    background: rgba(53, 198, 244, .09);
    color: var(--cyan-bright, #35c6f4);
}

.pfx-step:hover .pfx-step__icon {
    background: rgba(34, 179, 230, .2);
    border-color: rgba(34, 179, 230, .55);
}

.pfx-step__body p {
    margin: 0;
    font-size: 16px;
    line-height: 1.78;
    color: var(--body-on-light, #4a6076);
}

.mrn-dark .pfx-step__body h4 {
    color: #fff;
}

.mrn-dark .pfx-step__body p {
    color: var(--body-on-dark, #a7bbcf);
}

/* --- 6.3 marquee ------------------------------------------------------
   Caller: our_credentials.html #certificates, carrying the four ISO standards
   already named in that page's own hero line. */
/* The track must carry data-mrn-marquee: js/marine.js doubles its innerHTML
   at boot, which is what makes the -50% keyframe below loop seamlessly. Half
   the content means half the translate. */

.pfx-marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(53, 198, 244, .2);
    border-bottom: 1px solid rgba(53, 198, 244, .2);
    background: rgba(7, 26, 46, .04);
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.mrn-dark .pfx-marquee {
    background: rgba(255, 255, 255, .03);
}

.pfx-marquee__track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: pfxMarquee 34s linear infinite;
}

.pfx-marquee:hover .pfx-marquee__track {
    animation-play-state: paused;
}

.pfx-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 34px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 14px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--heading-on-light, #071a2e);
    white-space: nowrap;
}

.mrn-dark .pfx-marquee__item {
    color: #e6f1fa;
}

.pfx-marquee__item::after {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--cyan, #22b3e6);
    transform: rotate(45deg);
    flex: none;
}

@keyframes pfxMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* --- 6.4 banner extras — index chrome inside a page hero ----------------
   Caller: about_us.html.

   That page keeps the shared `.mrnp-hero` banner — still photograph, survey
   grid, orbs — but borrows two pieces from index's hero: `.mrn-hero__badge`
   and `.mrn-hero__actions`. Both are class-scoped in index-theme.css, so they
   compose inside `.mrnp-hero` with only the spacing stated here. */

.mrnp-hero .mrn-hero__badge {
    margin-bottom: 22px;
}

/* Both the crumb and the badge are inline-flex, so they set on ONE line as a
   chip row — which is the intent, and is what about_us.html has always done.
   What they did not have is a gap: the only thing between them was the 4px
   word-space of the newline in the markup, so at any crumb length the two
   chips read as having collided rather than as a pair.

   The gap goes on the TRAILING edge of the crumb, not the leading edge of the
   badge. They are inline boxes and they wrap — at 375px the news crumb is
   294px and the badge drops to its own line — and a leading margin then
   indents that line by 14px against every other element in the banner. A
   trailing one is simply the end of the previous line and disappears.
   Scoped to the adjacency, so a crumb with no badge after it is untouched. */
.mrnp-crumb:has(+ .mrn-hero__badge) {
    margin-right: 14px;
}

.mrnp-hero .mrn-hero__actions {
    margin-top: 34px;
}

/* --- 6.5 seam wave -----------------------------------------------------
   Caller: about_us.html, between the section rail and the first section.

   On every other inner page the wave lives inside .mrnp-hero and seams the
   banner straight into the content. about_us.html has the sticky rail in
   between, and a white curve sitting on top of a dark bar reads as a mistake,
   so the wave is lifted out and given its own ink ground. Order on that page
   is banner -> rail -> wave -> first section, and the curve does what it does
   everywhere else: takes dark into white. */

.pfx-wave {
    position: relative;
    z-index: 1;
    line-height: 0;
    background: var(--ink, #071a2e);
    pointer-events: none;
}

.pfx-wave svg {
    display: block;
    width: 100%;
    height: 74px;
}

/* --- 6.6 section rail — the in-page nav under the hero -----------------
   Caller: about_us.html.

   The About material used to be split across three nav entries (Group
   Profile / Vision & Mission / Testimonials) even though about_us.html
   already contained all of it. The dropdown is now a single link and this
   rail is what replaced it: the page's own table of contents, sitting
   between the hero and the first section.

   It is deliberately NOT sticky, and that is the whole design of this
   block. Parked under the header it put two menu bars on screen at once
   with a white band between them — js/main.js switches .header to
   position:fixed at scrollTop 80, and the height read to place the rail was
   taken while that bar's fadeInDown was still running, so the rail pinned
   itself at the transient 103px instead of the settled 71px. The rail now
   scrolls away with the page: you get it once, on the way past, and from
   there down only the site header follows the reader. js/page-fx.js
   railSpy() dissolves it across the last stretch of that travel so it
   leaves as a deliberate exit rather than sliding under a 97%-opaque bar.

   No overflow override on .wrapper any more either. It carried
   `overflow-x: clip` purely to stop `overflow: hidden` acting as this
   rail's sticky scrollport; with nothing sticky left on the page the
   wrapper keeps the plain `overflow: hidden` css/style.css gives it. */
.pfx-jump {
    position: relative;
    /* railSpy() drives opacity on the way out; the transition only has to
       cover the frame gaps in the scroll loop, not animate the exit. */
    transition: opacity .18s linear;
    background: rgba(7, 26, 46, .95);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border-bottom: 1px solid rgba(53, 198, 244, .22);
    box-shadow: 0 18px 40px -30px rgba(4, 18, 31, .9);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pfx-jump::-webkit-scrollbar {
    display: none;
}

.pfx-jump__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: max-content;
    min-width: 100%;
    padding: 0 clamp(16px, 4vw, 40px);
}

.pfx-jump a {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 20px 22px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(167, 187, 207, .82);
    text-decoration: none;
    transition: color .34s var(--e-out), background .34s var(--e-out);
}

.pfx-jump a::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan-bright, #35c6f4), var(--gold, #ffad18));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .42s var(--e-out);
}

.pfx-jump a:hover,
.pfx-jump a:focus {
    color: #fff;
    background: rgba(53, 198, 244, .08);
    text-decoration: none;
}

.pfx-jump a.is-active {
    color: var(--cyan-bright, #35c6f4);
}

.pfx-jump a.is-active::after,
.pfx-jump a:hover::after {
    transform: scaleX(1);
}

/* --- 6.7 data table — the ships-recycled lists --------------------------
   sspsb.html and jjsb.html each carry a bare <table> holding the fleet
   record. It is styled by css/style.css:579-609, which paints it with the
   RETIRED #00008e -> #017280 gradient and white text — the one palette
   index-theme.css exists to replace. Legible, but it lands as a saturated
   navy block in the middle of a light section and reads as a different site.

   Restyled here as an instrument readout: the plate is the wrapper, the rows
   are hairlines, the figures are tabular. No markup change — the selectors
   match the existing .table-responsive > table exactly as authored. */
.mrnp-section .table-responsive {
    position: relative;
    margin-top: 46px;
    border: var(--pfx-ring);
    border-radius: var(--pfx-radius);
    background: var(--pfx-plate);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mrn-dark .mrnp-section .table-responsive,
.mrnp-section.mrn-dark .table-responsive {
    border: var(--pfx-ring-dark);
    background: var(--pfx-plate-dark);
}

.mrnp-section table {
    width: 100%;
    min-width: 620px;
    margin: 0;
    border-collapse: collapse;
    /* unwind css/style.css:580-585 */
    background: none;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.mrnp-section thead th {
    position: relative;
    padding: 18px 20px;
    text-align: left;
    background: var(--ink, #071a2e);
    color: #fff;
    border: 0;
    border-bottom: 2px solid var(--cyan, #22b3e6);
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mrnp-section thead th + th {
    box-shadow: inset 1px 0 0 rgba(53, 198, 244, .22);
}

.mrnp-section tbody td {
    padding: 15px 20px;
    border: 0;
    border-bottom: 1px solid rgba(7, 26, 46, .09);
    color: var(--body-on-light, #4a6076);
    font-size: 14.5px;
    line-height: 1.5;
    text-align: left;
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum" 1;
    font-feature-settings: "tnum" 1;
    transition: color .3s var(--e-out);
}

/* the SR number is an index, not data — set it back */
.mrnp-section tbody td:first-child {
    width: 74px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-weight: 300;
    color: var(--cyan-deep, #1195cf);
    letter-spacing: .6px;
}

/* the vessel name is the thing the reader is scanning for */
.mrnp-section tbody td:nth-child(2) {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 15.5px;
    letter-spacing: .3px;
    color: var(--heading-on-light, #071a2e);
}

/* css/style.css:607 zebra-stripes with a white tint that is invisible on a
   light plate — re-expressed against the actual ground */
.mrnp-section tbody tr:nth-child(even) {
    background-color: rgba(7, 26, 46, .028);
}

.mrnp-section tbody tr {
    transition: background-color .3s var(--e-out);
}

.mrnp-section tbody tr:hover {
    background-color: rgba(34, 179, 230, .10);
}

.mrnp-section tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--cyan, #22b3e6);
}

.mrnp-section tbody tr:last-child td {
    border-bottom: 0;
}

/* dark ground */
.mrnp-section.mrn-dark tbody td,
.mrn-dark .mrnp-section tbody td {
    color: var(--body-on-dark, #a7bbcf);
    border-bottom-color: rgba(255, 255, 255, .08);
}

.mrnp-section.mrn-dark tbody td:nth-child(2) {
    color: #fff;
}

.mrnp-section.mrn-dark tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, .035);
}

.mrnp-section.mrn-dark tbody tr:hover {
    background-color: rgba(53, 198, 244, .12);
}

/* --- 6.8 fact file — the media briefing spec sheet ----------------------
   Caller: news.html #briefing.

   A newsroom page has to answer what a journalist asks before it can answer
   anything else: who the group is, which companies operate, where the yard
   is, what it holds. Every value in these rows already appears somewhere on
   this site — this is a spec sheet drawn from the existing record, not new
   editorial, and it is the one thing a page with no articles can honestly
   offer the press.

   Set as engineering rows: label left, value right, a cyan tick that grows
   into a gold one on hover, and the row itself lifting toward the reader on
   Z rather than merely up on Y. The perspective lives on the LIST, not on
   each row: one shared vanishing point means the rows tilt as a stack rather
   than each one having its own private camera. */

/* --- 6.8 the fact file — a bed of plates, not a stack of rules ----------
   WAS seven full-bleed bars split 230px label / 1fr value. At container
   width that put "1983" alone against ~900px of empty plate, and seven
   identical bars in a column gave the eye no place to land: every fact
   looked exactly as important as every other one.

   It is now a six-column bed, and each fact takes the width its own answer
   needs — 2 for the one-liners, 3 for the addresses, 4 for the two that
   carry a list, 6 for the media line that closes the section. Same seven
   facts, same order, four rows instead of seven. The label moves above the
   value with a pictogram beside it, which is the .mrnp-icard idiom this
   page already uses everywhere else. */

.pfx-facts {
    margin: 46px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    perspective: 1500px;
}

.pfx-fact {
    position: relative;
    grid-column: span 3;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 26px 28px 28px;
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    border-radius: var(--pfx-radius);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    /* NOT overflow:hidden — card-fx.css:183 records that .mrnp-icard's own
       clip is what killed its declared depth set. The wash below is inset:0
       on the same box, so there is nothing to clip anyway. */
    transform-style: preserve-3d;
    transition: transform .5s var(--e-out), box-shadow .5s var(--e-out),
        border-color .5s var(--e-out), background .5s var(--e-out);
}

.pfx-fact--sm {
    grid-column: span 2;
}

.pfx-fact--lg {
    grid-column: span 4;
}

.pfx-fact--full {
    grid-column: span 6;
}

/* the tick, promoted from a centred 18px mark to a rail that runs down the
   ring beside the pictogram and doubles on hover. Origin is the top edge so
   it grows into the card rather than out of both ends. */
.pfx-fact::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 26px;
    z-index: 1;
    width: 3px;
    height: 34px;
    background: var(--cyan, #22b3e6);
    transform-origin: 50% 0;
    transform: scaleY(1);
    transition: transform .55s var(--e-out), background .55s var(--e-out);
}

/* the same cyan pool .mrnp-icard fades up, anchored to the pictogram corner */
.pfx-fact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--pfx-hover-wash);
    opacity: 0;
    transition: opacity .42s var(--e-out);
    pointer-events: none;
}

/* js/marine-pages.js initTilt3d overwrites `transform` inline and !important
   while the pointer is inside, so this lift is what shows on a keyboard
   focus or a coarse pointer, where the tilt never runs. */
.pfx-fact:hover,
.pfx-fact:focus-within {
    transform: translate3d(0, -6px, 34px);
    border-color: rgba(34, 179, 230, .40);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
    background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
    z-index: 2;
}

.pfx-fact:hover::before,
.pfx-fact:focus-within::before {
    transform: scaleY(2.15);
    background: var(--gold, #ffad18);
}

.pfx-fact:hover::after,
.pfx-fact:focus-within::after {
    opacity: 1;
}

/* --- the label row: pictogram + caption --------------------------------- */

.pfx-fact dt {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .5s var(--e-out);
}

.pfx-fact:hover dt,
.pfx-fact:focus-within dt {
    transform: translateZ(22px);
}

.pfx-fact__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 2px;
    background: linear-gradient(150deg, rgba(34, 179, 230, .16), rgba(34, 179, 230, .04));
    border: 1px solid rgba(34, 179, 230, .28);
    color: var(--cyan-deep, #1195cf);
    transition: transform .5s var(--e-out), background .5s var(--e-out),
        border-color .5s var(--e-out), color .5s var(--e-out),
        box-shadow .5s var(--e-out);
}

.pfx-fact__ico svg {
    width: 21px;
    height: 21px;
    display: block;
}

.pfx-fact:hover .pfx-fact__ico,
.pfx-fact:focus-within .pfx-fact__ico {
    transform: translateZ(30px);
    background: linear-gradient(150deg, var(--cyan, #22b3e6), var(--cyan-deep, #1195cf));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.pfx-fact__label {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--cyan-deep, #1195cf);
}

/* --- the value ---------------------------------------------------------- */

.pfx-fact dd {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--heading-on-light, #071a2e);
    transition: transform .5s var(--e-out);
}

.pfx-fact:hover dd,
.pfx-fact:focus-within dd {
    transform: translateZ(12px);
}

/* a pair of links reading as one line, with a middot holding them apart.
   Only the link lists get this — the certifications value is chips, which
   want ordinary inline flow so they wrap as a block of tags. */
.pfx-fact__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* the closing row is six columns wide for two short links, which stacked
   under the label leaves most of the plate empty. It splits instead —
   label held left, the contact details run out to the right edge — so the
   width is doing something and the row reads as the signature line it is. */
.pfx-fact--full {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 40px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.pfx-fact--full .pfx-fact__links {
    justify-content: flex-end;
    font-size: 17px;
}

.pfx-fact dd a {
    color: var(--heading-on-light, #071a2e);
    border-bottom: 1px solid rgba(34, 179, 230, .34);
    transition: color .35s var(--e-out), border-color .35s var(--e-out);
}

.pfx-fact dd a:hover,
.pfx-fact dd a:focus-visible {
    color: var(--cyan-deep, #1195cf);
    border-color: var(--cyan, #22b3e6);
}

.pfx-fact__sep {
    color: rgba(7, 26, 46, .28);
    padding: 0 11px;
}

.pfx-fact__chip {
    display: inline-block;
    margin: 4px 8px 4px 0;
    padding: 6px 13px;
    border: 1px solid rgba(34, 179, 230, .28);
    border-radius: var(--pfx-radius, 3px);
    background: rgba(34, 179, 230, .06);
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    letter-spacing: 1.7px;
    color: var(--cyan-deep, #1195cf);
    transition: transform .45s var(--e-out), background .45s var(--e-out),
        border-color .45s var(--e-out);
}

.pfx-fact:hover .pfx-fact__chip,
.pfx-fact:focus-within .pfx-fact__chip {
    transform: translateZ(16px);
    border-color: rgba(34, 179, 230, .5);
    background: rgba(34, 179, 230, .12);
}

/* --- 6.9 the card as a link — .pfx-icard--link + .pfx-go ----------------
   Caller: news.html #resources.

   Those three cards are navigation, not copy, so the whole plate is the hit
   area: an <a> carrying .mrnp-icard. marine-pages.css wrote that component
   for an <article>, so `display` and `text-decoration` have to be unwound —
   an inline <a> would collapse the padding and drop the ::before sheen.
   .pfx-go is the affordance that says the plate is a link, and it rides out
   on Z under the tilt like the icon above it. */

.pfx-icard--link,
.pfx-icard--link:hover,
.pfx-icard--link:focus {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* the plate is the hit area, so the plate is what takes the focus ring */
.pfx-icard--link:focus-visible {
    outline: 2px solid var(--cyan, #22b3e6);
    outline-offset: 3px;
}

/* the plate is a column flex box, so the affordance is pushed to the floor
   of the card with `auto` — three cards whose paragraphs run to two, three
   and two lines otherwise put their "view" line at three different heights,
   and a row of cards that agree on nothing reads as a mistake */
.pfx-go {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 24px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--cyan-deep, #1195cf);
    transition: transform .5s var(--e-out), color .5s var(--e-out);
}

.pfx-go .sg-ico {
    transition: transform .5s var(--e-out);
}

.pfx-icard--link:hover .pfx-go {
    transform: translateZ(28px);
}

.pfx-icard--link:hover .pfx-go .sg-ico {
    transform: translateX(6px);
}

.mrn-dark .pfx-go {
    color: var(--cyan-bright, #35c6f4);
}

/* --- 6.10 unit profile — the opening block of a company page -------------
   Caller: sspsb.html #profile.

   WHAT IT REPLACES
   The section was `.mrnp-split--wide-left` holding a `.mrn-figure` on the
   left and, on the right, an eyebrow, one sentence of lead and the boxed
   `.mrnp-pagenav`; a full-width `.mrnp-strip` carried the four figures
   underneath. Three things were wrong with that, and none of them are copy:

     1. HEIGHT. images/s3.webp is 1000x1000 — square, so it renders as tall as
        its column is wide (585px at 1440). The column beside it held roughly
        380px of content, so a third of the section was white space with a
        table of contents floating in it.
     2. GROUND. `.mrnp-strip` paints `--grad-brand`, and #yard-details
        directly below it is `.mrn-dark`. Two dark bands separated only by the
        light section's own bottom padding read as one band with a seam
        through it — the rhythm rule in DESIGN-SYSTEM.md, inverted.
     3. MATERIAL. `.mrn-figure` belongs to index-theme.css, and that file
        scopes every rule for it to `#about`. On an inner page it therefore
        renders from marine.css untouched: 26px radius, a shadow in the
        retired #00008e navy, a dashed teal circle spinning at 22s and a 168px
        round badge floating on a 6s loop. Beside components this file has
        already squared to 3px plates, it read as a different site.

   WHAT IT DOES INSTEAD
   One balanced two-column block. The media half reuses `.mrnp-split__media` /
   `.mrnp-split__frame` — rethemed in 5.3 already, with the machined bezel,
   the duotone-at-rest grade and the offset cyan plate — so the photograph
   needs no new material of its own, only the stamp that replaces the round
   badge. The four figures move out of the strip and into the copy column as a
   2x2 of plates, and that is what closes the height gap: the column carries
   its own weight instead of being padded out, and the section now ends on
   white, so the step down into #yard-details is a single clean edge.

   No new copy. Every figure, label and destination below was already in the
   section — the strip's four cells and the pagenav's links. */

.pfx-unit {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 64px;
    align-items: center;
}

/* min-width:0, or a long unbroken label in the figures grid pushes the column
   past its track and takes the photograph with it */
.pfx-unit__body {
    min-width: 0;
}

/* the gradient phrase is the second half of the heading, so it is where the
   line wants to break — "RECYCLING AT ALANG SINCE / 1983" splits the year off
   its own preposition. Holding the em together moves the break in front of
   it instead, which is the reading the highlight was drawn for. */
.pfx-unit .mrn-title em {
    white-space: nowrap;
}

/* --- the lead ------------------------------------------------------------
   NOT `.mrnp-prose--lead`, and no drop cap at all — both because of the one
   letter this paragraph happens to start with.

   5.1 sets that modifier's cap as a plate: 68px numeral, 10/14px padding, a
   3px cyan rule down its left edge. That is right at the head of a page of
   running prose and wrong here, where the whole block is three lines — the
   plate stands nearly as tall as the paragraph, so it reads as a separate
   element and the sentence appears to begin at "n 1994".

   Dropping the box does not fix it. The sentence is "In 1994…", and a
   capital I in Oswald is a bare vertical stroke: at 62px, floated, beside
   this paragraph's own 3px rule, the cap renders as a second rule and the
   reader still loses the letter. A drop cap needs a letter with a shape.
   So the lead takes the size and the rule and nothing else. */

.pfx-unit__lead > p {
    margin: 0;
    padding-left: 26px;
    border-left: 3px solid var(--cyan, #22b3e6);
    font-size: 19px;
    line-height: 1.72;
    color: var(--heading-on-light, #071a2e);
}

/* --- the stamp — what the round badge becomes ---------------------------
   Squared, anchored to the frame's bottom corner and overhanging it, so the
   figure keeps the depth the floating circle was reaching for without the 6s
   vertical loop. It sits inside `.mrnp-split__media`, which carries the
   perspective, so data-mrn-tilt carries it with the photograph. */

.pfx-stamp {
    position: absolute;
    right: -18px;
    bottom: -24px;
    z-index: 5;
    min-width: 176px;
    padding: 20px 26px 18px;
    background: var(--pfx-plate-dark);
    border: 1px solid rgba(53, 198, 244, .26);
    border-top: 2px solid var(--gold, #ffad18);
    box-shadow: var(--lift-3, 0 34px 70px -30px rgba(4, 18, 31, .78));
}

.pfx-stamp > strong {
    display: block;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 46px;
    font-weight: 600;
    line-height: .9;
    color: var(--gold-light, #ffc247);
}

/* `>`, not a descendant selector. The figure is `<strong><span
   data-count="32">` — js/marine.js counts the inner span — so a bare
   `.pfx-stamp span` claims the counter as well as the label and sets 46px of
   numeral at 11px with 2.6px of tracking. marine.css:857 has this exact bug
   on `.mrn-figure__badge span`, and index-theme.css:1794 exists to undo it. */
.pfx-stamp > span {
    display: block;
    margin-top: 9px;
    max-width: 124px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.6px;
    line-height: 1.5;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

/* --- the figures — the strip's four cells, re-set as plates -------------
   Two colours had to change on the way out of the strip, both for contrast on
   a light ground:

     GOLD, the strip's numeral colour, measures 1.9:1 on white and fails even
     the large-text threshold. The figure takes the heading ink instead.

     CYAN, which is what 6.8 gives `.pfx-fact dt` and would be the consistent
     choice for the label, measures 3.41:1 as --cyan-deep on white. That
     clears 3:1 for large text and these labels are 11px, so it does not clear
     anything that applies to them. The label takes --body-on-light (6.5:1)
     and the cyan stays where it is legible: the tick, and the ruled edge of
     the lead above. No new colour is introduced either way.
     (`.pfx-fact dt` on news.html has the same shortfall and is unchanged
     here — that is a separate pass, not a thing to fix from this section.) */

.pfx-figures {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.pfx-figure {
    position: relative;
    padding: 20px 22px 18px 24px;
    background: var(--pfx-plate);
    border: var(--pfx-ring);
    box-shadow: var(--lift-1, 0 10px 28px -18px rgba(4, 18, 31, .55));
    transition: transform .45s var(--e-out), border-color .45s var(--e-out),
        box-shadow .45s var(--e-out), background .45s var(--e-out);
}

/* the tick, as on .pfx-fact — cyan at rest, gold and twice the length on
   hover, so the cell being read is the one that is marked */
.pfx-figure::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 3px;
    height: 20px;
    background: var(--cyan, #22b3e6);
    transform-origin: top;
    transition: transform .45s var(--e-out), background .45s var(--e-out);
}

.pfx-figure:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 179, 230, .40);
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
    background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
}

.pfx-figure:hover::before {
    transform: scaleY(1.9);
    background: var(--gold, #ffad18);
}

.pfx-figure > strong {
    display: block;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .4px;
    color: var(--heading-on-light, #071a2e);
}

.pfx-figure > span {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.9px;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--body-on-light, #4a6076);
}

/* --- the hops — what the boxed page nav becomes -------------------------
   `.mrnp-pagenav` listed three destinations and the first of them was
   #profile, the section the card itself sat in. The two that go anywhere are
   here, as plates rather than as a sidebar: the sticky card was 24px of
   chrome around three 14px links, and it was competing with the lead for the
   top of the column. Scrollspy goes with it — js/marine-pages.js
   initPageNav() returns on a missing `.mrnp-pagenav`, and a two-item list on
   a three-section page has nothing worth spying on. */

.pfx-hop {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.pfx-hop__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: var(--pfx-plate);
    border: var(--pfx-ring-strong);
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--heading-on-light, #071a2e);
    text-decoration: none;
    transition: background .45s var(--e-out), border-color .45s var(--e-out),
        color .45s var(--e-out), box-shadow .45s var(--e-out),
        transform .45s var(--e-out);
}

.pfx-hop__no {
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--cyan-deep, #1195cf);
    transition: color .45s var(--e-out);
}

.pfx-hop__link .sg-ico {
    transition: transform .45s var(--e-out);
}

.pfx-hop__link:hover,
.pfx-hop__link:focus {
    transform: translateY(-3px);
    background: var(--pfx-plate-dark);
    border-color: rgba(53, 198, 244, .38);
    color: #ffffff;
    text-decoration: none;
    box-shadow: var(--lift-2, 0 22px 48px -26px rgba(4, 18, 31, .65));
}

.pfx-hop__link:hover .pfx-hop__no,
.pfx-hop__link:focus .pfx-hop__no {
    color: var(--gold, #ffad18);
}

.pfx-hop__link:hover .sg-ico {
    transform: translateX(6px);
}

.pfx-hop__link:focus-visible {
    outline: 2px solid var(--cyan, #22b3e6);
    outline-offset: 3px;
}


/* ==========================================================================
   7. MOTION — extensions to the index-theme.css section 9 entrance vocabulary
   Adding a direction is one --sg-from line, because `[data-sg-in].sg-in`
   resets exactly that property and nothing else.
   ========================================================================== */

html.sg-motion [data-sg-in="rise"] {
    --sg-from: translate3d(0, 78px, 0);
}

html.sg-motion [data-sg-in="tilt"] {
    --sg-from: perspective(1000px) rotateX(10deg) translate3d(0, 52px, 0);
}

html.sg-motion [data-sg-in="sink"] {
    --sg-from: translate3d(0, -38px, 0);
}

/* clip needs a property the base rule does not transition, so it declares its
   own pair. (0,4,1) on the revealed rule keeps it above the (0,3,1) base. */
html.sg-motion [data-sg-in="clip"] {
    --sg-from: translate3d(0, 34px, 0);
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transition-property: opacity, transform, clip-path !important;
    transition-duration: .8s, 1s, 1s !important;
}

html.sg-motion [data-sg-in="clip"].sg-in {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

/* wider grids than index needed — 7..10 continue the same 110ms step */
html.sg-motion [data-sg-delay="7"] {
    --sg-d: 770ms;
}

html.sg-motion [data-sg-delay="8"] {
    --sg-d: 880ms;
}

html.sg-motion [data-sg-delay="9"] {
    --sg-d: 990ms;
}

html.sg-motion [data-sg-delay="10"] {
    --sg-d: 1100ms;
}

/* --- 7.1 what is deliberately NOT here ------------------------------- */
/* Magnetic buttons, counters and marquee duplication are js/marine.js's, via
   data-mrn-magnetic, data-count and data-mrn-marquee — all three already ship
   on every page. Re-implementing any of them would mean two engines writing
   the same style property. Use the marine attributes in the markup. */

/* --- 7.2 counters -------------------------------------------------------- */
/* tabular figures so a counting number does not jitter its own width */
[data-count],
.mrnp-strip strong {
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum" 1;
    font-feature-settings: "tnum" 1;
}

/* --- 7.3 section-scoped scroll progress --------------------------------- */
/* Any element with data-pfx-progress gets --pfx-p from 0..1 across its own
   travel through the viewport. Used by .pfx-steps and .mrnp-hero__rule. */

[data-pfx-progress] {
    --pfx-p: 0;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    .mrnp-section {
        padding: 96px 0;
    }

    /* a 2-of-6 plate is ~300px here and the addresses beside it are already
       running to four lines — the bed drops to a plain 3+3, and the two wide
       facts each take a row of their own */
    .pfx-fact--sm,
    .pfx-fact--lg {
        grid-column: span 3;
    }

    .mrnp-hero__inner {
        padding-top: 168px;
        padding-bottom: 118px;
    }

    /* still side by side — the photograph is square, so the two columns lose
       height together and the block stays balanced. Only the gutter gives. */
    .pfx-unit {
        gap: 44px;
    }
}

@media (max-width: 860px) {
    .mrnp-section {
        padding: 76px 0;
    }

    .mrnp-section--tight {
        padding: 58px 0;
    }

    .mrnp-hero {
        min-height: 520px;
    }

    .mrnp-hero__inner {
        padding-top: 146px;
        padding-bottom: 104px;
    }

    .pfx-cue {
        display: none;
    }

    /* One column from here down. The photograph is capped rather than let
       run full-bleed: at 812px of container a square image is 812px tall and
       the reader scrolls past a wall of it before reaching a word. */
    .pfx-unit {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .pfx-unit__media {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }


    .pfx-jump a {
        padding: 16px 15px;
        font-size: 11px;
        letter-spacing: 1.8px;
    }

    .pfx-jump a::after {
        left: 15px;
        right: 15px;
    }

    /* the rail is wider than the viewport here (measured 801px in 375px), so
       fade the trailing edge — otherwise a chip is simply cut off and nothing
       says the bar scrolls */
    .pfx-jump {
        -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    }

    .pfx-wave svg {
        height: 52px;
    }

    .pfx-step {
        grid-template-columns: 46px 1fr;
        gap: 16px;
        padding-right: 0;
    }

    .pfx-step__no {
        width: 46px;
        height: 46px;
        font-size: 17px;
    }

    .pfx-steps::before,
    .pfx-steps::after {
        left: 22px;
    }

    .mrnp-form {
        padding: 34px 24px 30px;
    }

    .mrnp-icard {
        padding: 32px 24px 28px;
    }

    /* two plates across is ~330px each and the addresses stop fitting, so the
       bed becomes one column. The spans have to be reset rather than left to
       collapse: `span 3` against a single-column template opens three
       implicit columns and drops each fact into a third of the row. */
    .pfx-facts {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pfx-fact,
    .pfx-fact--sm,
    .pfx-fact--lg,
    .pfx-fact--full {
        grid-column: 1 / -1;
    }

    .pfx-fact {
        gap: 13px;
        padding: 22px 22px 24px;
    }

    /* the media row's label/details split needs the full width it had; at one
       column it goes back to stacking like every other fact */
    .pfx-fact--full {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 13px;
    }

    .pfx-fact--full .pfx-fact__links {
        justify-content: flex-start;
        font-size: 15.5px;
    }

    /* one plate is now too narrow to hold either pair on a single line, and a
       wrapped middot lands at the head of the second line reading as a bullet.
       The pairs stack and the separator goes. */
    .pfx-fact__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .pfx-fact__links .pfx-fact__sep {
        display: none;
    }

    .pfx-fact::before {
        top: 22px;
    }

    .pfx-fact dd {
        font-size: 15.5px;
    }

    /* 4 counters across 375px is 80px a cell — the figures collide with their
       own labels — but stacking all four, which marine-pages.css:1524 does
       below 620px, makes the plate 500px tall for four numbers. Two up is the
       readable middle.

       Holding that column count means owning the rules that go with it. That
       620px block also swaps every cell's border-right for a border-bottom,
       and page-fx.css loads later, so the 2-up grid landed here while the
       1-up borders landed there: measured at 375px, three cells drew a
       horizontal rule under themselves and the column divider was gone. A
       2x2 grid takes a crosshair — right border down the left column, bottom
       border across the top row, nothing on the outer edges. */
    .mrnp-strip {
        grid-template-columns: repeat(2, 1fr);
        padding: 26px 18px;
        gap: 22px 12px;
    }

    .mrnp-strip div {
        border-right: none;
        border-bottom: none;
        padding-bottom: 0;
    }

    .mrnp-strip div:nth-child(odd) {
        border-right: 1px solid rgba(53, 198, 244, .16);
    }

    .mrnp-strip div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(53, 198, 244, .16);
        padding-bottom: 20px;
    }

    .pfx-note--live {
        padding-left: 24px;
        padding-right: 24px;
    }


    /* --- .crd-hero (section 3) ----------------------------------------- */

    /* One column of copy across the full width, so the left-heavy wash has to
       even out or the ISO line ends up over the lit paperwork. The crop turns
       from wide to tall at the same time, which keeps only the middle of the
       desk. */
    .crd-hero .mrnp-hero__bg {
        background-position: 52% 62%;
    }

    .crd-hero .mrnp-hero__scrim {
        background:
            linear-gradient(180deg,
                rgba(4, 18, 31, .80) 0%,
                rgba(4, 18, 31, .40) 30%,
                rgba(4, 18, 31, .58) 62%,
                rgba(4, 18, 31, .94) 100%),
            linear-gradient(96deg,
                rgba(5, 22, 37, .46) 0%,
                rgba(5, 22, 37, .22) 100%);
    }

    /* sized against a frame showing three times this much width */
    .crd-hero::before {
        opacity: .66;
    }
}

@media (max-width: 620px) {
    .mrnp-hero__inner {
        padding-top: 132px;
        padding-bottom: 88px;
    }

    .mrnp-hero__sub {
        font-size: 15.5px;
    }

    .mrnp-prose--lead > p:first-of-type::first-letter {
        font-size: 52px;
        padding: 8px 11px 6px;
        margin-right: 12px;
    }

    .pfx-marquee__item {
        padding: 0 20px;
        font-size: 12px;
        letter-spacing: 1.8px;
    }

    .mrnp-section + .mrnp-section::before {
        width: 94%;
    }

    /* "Business Started Under This Name" is 32 characters; two columns of a
       327px content box give each label 150px, which sets it as five lines
       and leaves the four cells at four different heights */
    .pfx-figures {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pfx-stamp {
        right: 0;
        bottom: -18px;
        min-width: 0;
        padding: 16px 20px 15px;
    }

    .pfx-stamp > strong {
        font-size: 36px;
    }

    .pfx-stamp > span {
        margin-top: 7px;
        letter-spacing: 2.2px;
    }

    .pfx-unit__lead > p {
        font-size: 17.5px;
        padding-left: 20px;
    }

    /* both destinations on their own row, full width — at 12px/2.2px
       "List of Ships Recycled" is 232px and will not sit beside anything */
    .pfx-hop__link {
        width: 100%;
        justify-content: flex-start;
    }

    .pfx-hop__link .sg-ico {
        margin-left: auto;
    }
}

/* ==========================================================================
   9. REDUCED MOTION
   Nothing that only decorates may move. Everything that carries meaning
   (the spine fill, the progress rule) jumps straight to its end state.
   ========================================================================== */

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

    .pfx-cue i::after,
    .pfx-marquee__track {
        animation: none !important;
    }

    /* the banner's copy must still arrive — the badge animation carries a
       `forwards` fill from opacity 0, so killing it outright would leave the
       badge invisible */
    .mrnp-hero .mrn-hero__badge {
        opacity: 1 !important;
        animation: none !important;
    }

    /* the rail still has to disappear on the way out — railSpy() cuts its
       opacity outright under reduced motion, so the transition that would
       smooth that step is what goes, not the step itself */
    .pfx-jump {
        transition: none !important;
    }

    .pfx-jump a::after {
        transition: none !important;
    }

    .pfx-marquee__track {
        transform: none !important;
    }

    .mrnp-hero__rule::after,
    .pfx-steps::after {
        transform: none !important;
        transition: none !important;
    }

    .mrnp-icard,
    .mrnp-icard::before,
    .mrnp-post,
    .mrnp-quote,
    .mrnp-certcard,
    .mrnp-infocard,
    .mrnp-gal__item,
    .mrnp-checks li,
    .pfx-step,
    .pfx-fact,
    .pfx-fact dt,
    .pfx-fact dd,
    .pfx-fact__ico,
    .pfx-fact__chip,
    .pfx-go,
    .pfx-go .sg-ico,
    .pfx-note--live,
    .pfx-note__flag,
    .pfx-figure,
    .pfx-figure::before,
    .pfx-hop__link,
    .pfx-hop__link .sg-ico {
        transition: none !important;
        transform: none !important;
    }

    /* the tick now rests at its own height and is only scaled on hover, so
       the blanket `transform: none` costs it nothing — it just stops growing */
    .pfx-fact::before {
        transform: none !important;
        transition: none !important;
    }

    /* the wash is opacity, which is not motion, so it still arrives — only
       the fade is dropped */
    .pfx-fact::after {
        transition: none !important;
    }

    /* the brackets are drawn by opacity, which is not motion, but they arrive
       from a transform — hand them their resting offset back */
    .pfx-note--live::before {
        transform: translate3d(-10px, 10px, 0) !important;
        transition: none !important;
    }

    .pfx-note--live::after {
        transform: translate3d(-10px, -10px, 0) !important;
        transition: none !important;
    }

    /* the one thing on this page that repeats forever */
    .pfx-note__flag i {
        animation: none !important;
        box-shadow: 0 0 0 3px rgba(34, 179, 230, .28) !important;
    }


    .mrnp-hero__bg {
        transform: scale(1.06) !important;
    }
}