/* ==========================================================================
   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%);

    /* one sheen, reused by every hoverable plate */
    --pfx-sheen: linear-gradient(105deg,
            transparent 30%,
            rgba(53, 198, 244, .10) 45%,
            rgba(255, 255, 255, .45) 50%,
            rgba(53, 198, 244, .10) 55%,
            transparent 70%);
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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 {
    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 — retune it to cyan and
   make it the sheen sweep instead of a static tint */
.mrnp-icard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pfx-sheen);
    opacity: 0;
    transform: translateX(-64%);
    transition: opacity .5s var(--e-out), transform 1.05s var(--e-out);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.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;
    transform: translateX(64%);
}

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

/* keeps the translateZ lift — the card is a preserve-3d surface under
   data-mrnp-tilt and the icon should sit proud of it, as it does on index */
.mrnp-icard:hover .mrnp-icard__icon {
    transform: translateZ(48px) rotate(-5deg);
    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, .45);
}

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

.mrnp-lb {
    background: rgba(4, 18, 31, .96);
}

.mrnp-lb__img {
    border: 1px solid rgba(53, 198, 244, .3);
    border-radius: var(--pfx-radius);
    box-shadow: 0 50px 120px -40px #000;
}

.mrnp-lb__close,
.mrnp-lb__nav {
    border-radius: 2px;
    border: 1px solid rgba(53, 198, 244, .32);
    background: rgba(10, 35, 64, .8);
    color: #fff;
}

.mrnp-lb__close:hover,
.mrnp-lb__nav:hover {
    background: var(--cyan-deep, #1195cf);
    border-color: transparent;
}

.mrnp-lb__count {
    font-family: var(--font-display, "Oswald", sans-serif);
    letter-spacing: 3px;
    color: var(--cyan-bright, #35c6f4);
}

/* --- 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);
}

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

.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 sticky in-page nav -------------------------
   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, parked under
   the header, tracking the reader's position.

   `top` has to clear the site header, which main.js switches to
   position:fixed at scrollTop 80 — measured 59px tall in that state. */

/* .wrapper ships `overflow: hidden`, which makes it the scrollport for any
   sticky descendant — and it never scrolls, so the rail scrolled away with the
   page. `overflow-x: clip` clips identically without establishing a scroll
   container. js/page-fx.js adds .has-jump-rail only when a rail is present.

   The @supports guard is load-bearing, not decoration: without `clip` a
   browser would drop overflow-x and keep overflow-y:visible, and a pair where
   one axis is visible and the other is not computes the visible one to `auto`
   — i.e. the wrapper would sprout its own vertical scrollbar. Guarded, such a
   browser keeps `overflow: hidden` and merely does without a sticky rail. */
@supports (overflow-x: clip) {
    .wrapper.has-jump-rail {
        overflow-x: clip;
        overflow-y: visible;
    }
}

.pfx-jump {
    /* replaced at runtime with the measured .sticky_menu header height */
    --pfx-jump-top: 71px;
    position: sticky;
    top: var(--pfx-jump-top);
    z-index: 40;
    /* 998 is the sticky header (css/header-modern.css); stay under it */
    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);
}

/* ==========================================================================
   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;
    }

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

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

    /* the mobile bar is the slicknav strip, which stands taller than the
       desktop sticky header */
    .pfx-jump {
        --pfx-jump-top: 64px;
    }

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

@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%;
    }
}

/* ==========================================================================
   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;
    }

    .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 {
        transition: none !important;
        transform: none !important;
    }

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