@charset "utf-8";
/* ==========================================================================
   MARINE PAGES — inner-page design system for the Sachdeva Group site
   Depends on css/marine.css for the palette + reveal engine.
   Namespace: .mrnp-*   ·   Load order: style.css → marine.css → marine-pages.css
   Sector: heavy-industrial B2B maritime (ship recycling). Tone: engineered,
   compliant, precise — depth and motion, never decoration for its own sake.
   ========================================================================== */

/* ==========================================================================
   1. PAGE HERO — layered 3D depth banner
   ========================================================================== */

.mrnp-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy-ink);
    perspective: 1400px;
}

.mrnp-hero__bg {
    position: absolute;
    inset: -8% -4%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    will-change: transform;
    animation: mrnKenBurns 30s ease-in-out infinite alternate;
}

.mrnp-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(110% 100% at 10% 15%, rgba(0, 0, 142, .82) 0%, rgba(0, 0, 142, 0) 62%),
        radial-gradient(90% 90% at 92% 88%, rgba(1, 114, 128, .74) 0%, rgba(1, 114, 128, 0) 66%),
        linear-gradient(180deg, rgba(3, 6, 28, .90) 0%, rgba(3, 6, 28, .42) 45%, rgba(3, 6, 28, .88) 100%);
}

/* faint engineered grid — reads as blueprint, suits the sector */
.mrnp-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(178, 236, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(178, 236, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    animation: mrnpGridDrift 24s linear infinite;
}

@keyframes mrnpGridDrift {
    to {
        background-position: 64px 64px, 64px 64px;
    }
}

/* floating depth shapes */
.mrnp-hero__orb {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.mrnp-hero__orb--a {
    width: 340px;
    height: 340px;
    background: rgba(255, 173, 24, .30);
    left: -90px;
    top: -70px;
    animation: mrnOrb 18s ease-in-out infinite alternate;
}

.mrnp-hero__orb--b {
    width: 300px;
    height: 300px;
    background: rgba(1, 114, 128, .45);
    right: -70px;
    bottom: -80px;
    animation: mrnOrb 22s ease-in-out infinite alternate-reverse;
}

.mrnp-hero__inner {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 190px 0 120px;
    transform-style: preserve-3d;
}

.mrnp-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 12px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    opacity: 0;
    animation: mrnFadeUp .9s var(--ease-out) .2s forwards;
}

.mrnp-crumb a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    transition: color .3s;
}

.mrnp-crumb a:hover {
    color: var(--gold-light);
    text-decoration: none;
}

.mrnp-crumb span.sep {
    color: var(--gold);
    font-size: 10px;
}

.mrnp-crumb strong {
    color: var(--gold-light);
    font-weight: 500;
}

.mrnp-hero__title {
    font-family: "Oswald", sans-serif;
    font-size: clamp(38px, 5.4vw, 76px);
    line-height: 1.05;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
    max-width: 18ch;
}

.mrnp-hero__title .mrn-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.mrnp-hero__title .mrn-word > span {
    display: inline-block;
    transform: translateY(105%);
    animation: mrnWordUp 1.05s var(--ease-out) forwards;
    animation-delay: var(--d, .25s);
}

.mrnp-hero__title em {
    font-style: normal;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mrnp-hero__sub {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.85;
    font-weight: 300;
    color: rgba(255, 255, 255, .78);
    max-width: 62ch;
    margin: 0;
    opacity: 0;
    animation: mrnFadeUp 1s var(--ease-out) .75s forwards;
}

.mrnp-hero__rule {
    width: 96px;
    height: 3px;
    margin: 26px 0 0;
    background: var(--grad-gold);
    border-radius: 3px;
    transform-origin: left;
    transform: scaleX(0);
    animation: mrnUnderline 1s var(--ease-out) .95s forwards;
}

/* wave foot on the hero */
.mrnp-hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 4;
    line-height: 0;
    pointer-events: none;
}

.mrnp-hero__wave svg {
    width: 100%;
    height: 80px;
    display: block;
}

/* ==========================================================================
   2. PAGE SHELL + PROSE
   ========================================================================== */

.mrnp-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

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

.mrnp-prose {
    font-size: 16px;
    line-height: 1.95;
    font-weight: 300;
    color: var(--grey);
}

.mrnp-prose > p {
    margin: 0 0 20px;
}

.mrnp-prose > p:first-of-type {
    font-size: 18.5px;
    line-height: 1.85;
    color: var(--navy);
    font-weight: 400;
}

.mrnp-prose h3,
.mrnp-prose h4 {
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 34px 0 14px;
}

.mrn-dark .mrnp-prose,
.mrnp-section.mrn-dark .mrnp-prose {
    color: rgba(255, 255, 255, .76);
}

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

/* drop-cap flourish for the lead block */
.mrnp-prose--lead > p:first-of-type::first-letter {
    float: left;
    font-family: "Oswald", sans-serif;
    font-size: 62px;
    line-height: .82;
    font-weight: 600;
    padding: 6px 14px 0 0;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   3. 3D TILT CARD GRID (icon cards)
   ========================================================================== */

.mrnp-grid {
    display: grid;
    gap: 26px;
    margin-top: 46px;
}

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

.mrnp-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.mrnp-icard {
    position: relative;
    padding: 38px 30px 34px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .09);
    box-shadow: 0 22px 48px -34px rgba(0, 0, 142, .55);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
    will-change: transform;
}

.mrnp-icard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity .45s;
}

.mrnp-icard::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
}

.mrnp-icard:hover {
    box-shadow: 0 42px 70px -34px rgba(0, 0, 142, .75);
    border-color: rgba(255, 173, 24, .4);
}

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

.mrnp-icard:hover::after {
    transform: scaleX(1);
}

/* children lift off the card face in real 3D */
.mrnp-icard > * {
    position: relative;
    z-index: 2;
    transition: transform .45s var(--ease-out), color .4s;
}

.mrnp-icard:hover > * {
    transform: translateZ(34px);
}

.mrnp-icard__icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(0, 0, 142, .10), rgba(1, 114, 128, .14));
    color: var(--navy);
    transition: background .45s, color .45s, transform .55s var(--ease-bounce);
}

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

.mrnp-icard:hover .mrnp-icard__icon {
    background: var(--grad-gold);
    color: var(--navy-deep);
    transform: translateZ(52px) rotate(-7deg) scale(1.06);
}

.mrnp-icard h4 {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 12px;
    color: var(--navy);
}

.mrnp-icard p {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--grey);
    margin: 0;
}

.mrnp-icard:hover h4,
.mrnp-icard:hover p {
    color: #fff;
}

.mrnp-icard:hover p {
    color: rgba(255, 255, 255, .82);
}

/* ghost index numeral */
.mrnp-icard__no {
    position: absolute;
    right: 18px;
    bottom: 6px;
    z-index: 1;
    font-family: "Oswald", sans-serif;
    font-size: 78px;
    font-weight: 600;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.2px rgba(0, 0, 142, .10);
    transition: -webkit-text-stroke-color .45s;
    pointer-events: none;
}

.mrnp-icard:hover .mrnp-icard__no {
    -webkit-text-stroke-color: rgba(255, 173, 24, .45);
}

/* ==========================================================================
   4. 3D FLIP CARD
   ========================================================================== */

.mrnp-flip {
    perspective: 1400px;
    min-height: 300px;
}

.mrnp-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    transform-style: preserve-3d;
    transition: transform .9s var(--ease-out);
}

.mrnp-flip:hover .mrnp-flip__inner,
.mrnp-flip.is-flipped .mrnp-flip__inner {
    transform: rotateY(180deg);
}

.mrnp-flip__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.mrnp-flip__face--front {
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .1);
    box-shadow: 0 22px 48px -34px rgba(0, 0, 142, .55);
}

.mrnp-flip__face--back {
    transform: rotateY(180deg);
    background: var(--grad-brand);
    color: #fff;
}

.mrnp-flip__face--back h4 {
    color: #fff;
}

.mrnp-flip__face--back p {
    color: rgba(255, 255, 255, .84);
}

/* ==========================================================================
   5. IMAGE / TEXT SPLIT
   ========================================================================== */

.mrnp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 62px;
    align-items: center;
}

.mrnp-split--wide-left {
    grid-template-columns: 1.15fr 1fr;
}

.mrnp-split--wide-right {
    grid-template-columns: 1fr 1.15fr;
}

.mrnp-split__media {
    position: relative;
    perspective: 1200px;
}

.mrnp-split__frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .4s var(--ease-out);
    box-shadow: 0 40px 80px -44px rgba(0, 0, 142, .6);
}

.mrnp-split__frame img {
    width: 100%;
    display: block;
    transition: transform 1.3s var(--ease-out);
}

.mrnp-split__media:hover .mrnp-split__frame img {
    transform: scale(1.07);
}

.mrnp-split__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(0, 0, 142, .28), transparent 55%, rgba(1, 114, 128, .32));
}

.mrnp-split__tag {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 4;
    padding: 12px 22px;
    border-radius: 40px;
    background: rgba(3, 6, 28, .62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 12px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

/* stacked accent plate behind the frame */
.mrnp-split__media::before {
    content: "";
    position: absolute;
    left: -20px;
    top: -20px;
    right: 34px;
    bottom: 34px;
    border-radius: 24px;
    border: 2px solid rgba(255, 173, 24, .35);
    z-index: -1;
    animation: mrnFloatY 8s ease-in-out infinite;
}

/* ==========================================================================
   6. FEATURE LIST (checkmark rows)
   ========================================================================== */

.mrnp-checks {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 14px;
}

.mrnp-checks--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 26px;
}

.mrnp-checks li {
    position: relative;
    padding: 14px 18px 14px 54px;
    border-radius: 12px;
    background: rgba(0, 0, 142, .035);
    border-left: 3px solid rgba(1, 114, 128, .3);
    font-size: 15px;
    line-height: 1.65;
    color: var(--grey);
    transition: transform .4s var(--ease-out), background .4s, border-color .4s, color .4s;
}

.mrnp-checks li:hover {
    transform: translateX(8px);
    background: rgba(255, 173, 24, .10);
    border-left-color: var(--gold);
    color: var(--navy);
}

.mrnp-checks li::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--grad-brand);
}

.mrnp-checks li::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 7px;
    height: 4px;
    margin-top: -3px;
    border-left: 2px solid var(--gold-light);
    border-bottom: 2px solid var(--gold-light);
    transform: rotate(-45deg);
}

.mrn-dark .mrnp-checks li {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .78);
    border-left-color: rgba(255, 173, 24, .35);
}

.mrn-dark .mrnp-checks li:hover {
    color: #fff;
    background: rgba(255, 173, 24, .12);
}

/* ==========================================================================
   7. ACCORDION
   ========================================================================== */

.mrnp-acc {
    margin-top: 40px;
    display: grid;
    gap: 14px;
}

.mrnp-acc__item {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .1);
    transition: box-shadow .4s, border-color .4s;
}

.mrnp-acc__item.is-open {
    box-shadow: 0 26px 54px -34px rgba(0, 0, 142, .6);
    border-color: rgba(255, 173, 24, .45);
}

.mrnp-acc__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 26px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--navy);
    transition: color .3s, background .3s;
}

.mrnp-acc__head:hover {
    background: rgba(0, 0, 142, .03);
}

.mrnp-acc__item.is-open .mrnp-acc__head {
    color: var(--teal);
}

.mrnp-acc__sign {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 0, 142, .1), rgba(1, 114, 128, .14));
    color: var(--navy);
    transition: transform .5s var(--ease-out), background .4s, color .4s;
}

.mrnp-acc__item.is-open .mrnp-acc__sign {
    transform: rotate(135deg);
    background: var(--grad-gold);
    color: var(--navy-deep);
}

.mrnp-acc__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s var(--ease-out);
}

.mrnp-acc__panel-inner {
    padding: 0 26px 26px;
    font-size: 15px;
    line-height: 1.85;
    font-weight: 300;
    color: var(--grey);
}

/* ==========================================================================
   8. GALLERY + LIGHTBOX
   ========================================================================== */

.mrnp-gal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 46px;
}

.mrnp-gal__item {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: var(--navy-deep);
    transform-style: preserve-3d;
    transition: transform .5s var(--ease-out), box-shadow .5s;
}

.mrnp-gal__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out), filter .5s;
}

.mrnp-gal__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 142, 0) 40%, rgba(0, 0, 142, .85));
    opacity: 0;
    transition: opacity .45s;
}

.mrnp-gal__item:hover {
    transform: translateY(-8px);
    box-shadow: 0 36px 64px -34px rgba(0, 0, 142, .8);
}

.mrnp-gal__item:hover img {
    transform: scale(1.1);
}

.mrnp-gal__item:hover::after {
    opacity: 1;
}

.mrnp-gal__zoom {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-gold);
    color: var(--navy-deep);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .45s, transform .55s var(--ease-bounce);
}

.mrnp-gal__item:hover .mrnp-gal__zoom {
    opacity: 1;
    transform: scale(1);
}

.mrnp-gal__cap {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    z-index: 3;
    color: #fff;
    font-size: 12.5px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s, transform .5s var(--ease-out);
}

.mrnp-gal__item:hover .mrnp-gal__cap {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   LIGHTBOX / IMAGE VIEWER
   --------------------------------------------------------------------------
   Was: a bare <img> floated on a scrim, with the round nav buttons pinned to
   the VIEWPORT edges. At 1280px the image measured 1177px wide, so the arrows
   sat half off-screen on top of the photo, the counter collided with its
   bottom edge, and the caption the trigger already carries was never shown.

   Now: a framed viewer. A plate holds a title bar (caption + counter + tools),
   a letterboxed stage and a thumbnail rail. js/marine-pages.js measures the
   image and sets the frame width + stage height, so the chrome lines up with
   the picture's own edges instead of the window's. One viewer serves both the
   16:9 yard photos and the portrait A4 certificate scans.
   ========================================================================== */

.mrnp-lb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .38s var(--ease-out), visibility .38s;
}

.mrnp-lb.is-open {
    opacity: 1;
    visibility: visible;
}

/* Own layer so the blur composites against the PAGE. Blurring on .mrnp-lb
   itself asks the compositor to filter the backdrop of the same element that
   paints the frame sitting on top of it. */
.mrnp-lb__scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 18, 31, .93);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* ---- frame ------------------------------------------------------------- */

.mrnp-lb__frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1240px;
    max-height: 100%;
    background: var(--pfx-plate-dark, linear-gradient(165deg, #0a2340 0%, #071a2e 60%, #04121f 100%));
    border: 1px solid rgba(53, 198, 244, .28);
    border-radius: var(--pfx-radius, 3px);
    box-shadow: 0 50px 120px -40px #000;
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity .5s var(--ease-out), transform .55s var(--ease-out);
}

.mrnp-lb.is-open .mrnp-lb__frame {
    opacity: 1;
    transform: none;
}

/* the engineering-drawing corner ticks the rest of the page uses */
.mrnp-lb__frame::before,
.mrnp-lb__frame::after {
    content: "";
    position: absolute;
    width: var(--pfx-tick, 14px);
    height: var(--pfx-tick, 14px);
    border: 2px solid var(--cyan-bright, #35c6f4);
    pointer-events: none;
}

.mrnp-lb__frame::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.mrnp-lb__frame::after {
    right: -1px;
    bottom: -1px;
    border-top: 0;
    border-left: 0;
}

/* ---- title bar --------------------------------------------------------- */

.mrnp-lb__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 11px 11px 18px;
    background: rgba(4, 18, 31, .55);
    border-bottom: 1px solid rgba(53, 198, 244, .18);
}

.mrnp-lb__meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.mrnp-lb__idx {
    flex: 0 0 auto;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold, #ffad18);
}

.mrnp-lb__title {
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mrnp-lb__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mrnp-lb__count {
    margin-right: 4px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12px;
    letter-spacing: 2.5px;
    white-space: nowrap;
    color: var(--cyan-bright, #35c6f4);
}

.mrnp-lb__btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 198, 244, .3);
    border-radius: var(--pfx-radius, 3px);
    background: rgba(10, 35, 64, .8);
    color: #fff;
    cursor: pointer;
    transition: background .28s, border-color .28s, color .28s;
}

.mrnp-lb__btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

.mrnp-lb__btn:hover,
.mrnp-lb__btn:focus-visible {
    outline: none;
    background: var(--cyan-deep, #1195cf);
    border-color: transparent;
}

.mrnp-lb__btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(53, 198, 244, .55);
}

/* ---- stage ------------------------------------------------------------- */

.mrnp-lb__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(53, 198, 244, .05) 0%, transparent 55%),
        #04121f;
}

/* The picture scrolls when zoomed, and the prev/next buttons must not scroll
   with it — so the scroll port is its own layer and the buttons stay pinned
   to the stage above it. */
.mrnp-lb__canvas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mrnp-lb__img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: opacity .35s var(--ease-out);
}

.mrnp-lb__frame:not(.is-loading) .mrnp-lb__img {
    opacity: 1;
}

/* Zoom. The A4 certificate scans letterbox down to ~350px wide on a laptop,
   which is legible as a picture and not as a document. */
.mrnp-lb__canvas.is-zoomable .mrnp-lb__img {
    cursor: zoom-in;
}

.mrnp-lb__canvas.is-zoomed {
    /* Block, not flex. A flex item centred by justify-content/margin:auto
       overflows EQUALLY in both directions, and there is no scrolling into
       the leading overflow — half a zoomed picture is unreachable. In block
       flow the auto margins collapse to 0 once the image is wider than the
       port, so it starts at the left edge and every pixel can be scrolled to. */
    display: block;
    overflow: auto;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(53, 198, 244, .4) rgba(255, 255, 255, .05);
}

.mrnp-lb__canvas.is-zoomed .mrnp-lb__img {
    max-width: none;
    max-height: none;
    cursor: inherit;
}

.mrnp-lb__canvas.is-panning {
    cursor: grabbing;
}

.mrnp-lb__canvas::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.mrnp-lb__canvas::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
}

.mrnp-lb__canvas::-webkit-scrollbar-thumb {
    background: rgba(53, 198, 244, .4);
}

.mrnp-lb__spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 2px solid rgba(53, 198, 244, .22);
    border-top-color: var(--cyan-bright, #35c6f4);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.mrnp-lb__frame.is-loading .mrnp-lb__spin {
    opacity: 1;
    animation: mrnpLbSpin .8s linear infinite;
}

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

/* ---- prev / next ------------------------------------------------------- */

.mrnp-lb__nav {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 198, 244, .32);
    border-radius: var(--pfx-radius, 3px);
    background: rgba(4, 18, 31, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    opacity: .82;
    transition: opacity .3s, background .3s, border-color .3s;
}

.mrnp-lb__nav svg {
    display: block;
    width: 20px;
    height: 20px;
}

.mrnp-lb__nav:hover,
.mrnp-lb__nav:focus-visible {
    outline: none;
    opacity: 1;
    background: var(--cyan-deep, #1195cf);
    border-color: transparent;
}

.mrnp-lb__nav:focus-visible {
    box-shadow: 0 0 0 2px rgba(53, 198, 244, .55);
}

.mrnp-lb__nav--prev {
    left: 14px;
}

.mrnp-lb__nav--next {
    right: 14px;
}

/* ---- thumbnail rail ---------------------------------------------------- */

.mrnp-lb__foot {
    flex: 0 0 auto;
    padding: 10px 12px;
    background: rgba(4, 18, 31, .55);
    border-top: 1px solid rgba(53, 198, 244, .18);
}

.mrnp-lb__rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(53, 198, 244, .4) transparent;
}

.mrnp-lb__rail::-webkit-scrollbar {
    height: 6px;
}

.mrnp-lb__rail::-webkit-scrollbar-thumb {
    background: rgba(53, 198, 244, .4);
}

.mrnp-lb__thumb {
    flex: 0 0 auto;
    width: 78px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(53, 198, 244, .2);
    border-radius: 2px;
    background: #04121f;
    opacity: .5;
    cursor: pointer;
    transition: opacity .3s, border-color .3s;
}

.mrnp-lb__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mrnp-lb__thumb:hover {
    opacity: .85;
}

.mrnp-lb__thumb:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(53, 198, 244, .55);
}

.mrnp-lb__thumb.is-active {
    opacity: 1;
    border-color: var(--gold, #ffad18);
}

/* a single-image set has nothing to navigate between */
.mrnp-lb--single .mrnp-lb__foot,
.mrnp-lb--single .mrnp-lb__nav,
.mrnp-lb--single .mrnp-lb__count {
    display: none;
}

/* ==========================================================================
   9. NEWS / ARTICLE CARDS
   ========================================================================== */

.mrnp-news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 46px;
}

.mrnp-post {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .09);
    box-shadow: 0 22px 48px -34px rgba(0, 0, 142, .5);
    display: flex;
    flex-direction: column;
    transition: transform .5s var(--ease-out), box-shadow .5s;
}

.mrnp-post:hover {
    transform: translateY(-10px);
    box-shadow: 0 44px 72px -34px rgba(0, 0, 142, .72);
}

.mrnp-post__pic {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.mrnp-post__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}

.mrnp-post:hover .mrnp-post__pic img {
    transform: scale(1.09);
}

.mrnp-post__date {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
    padding: 8px 16px;
    border-radius: 30px;
    background: var(--grad-gold);
    color: var(--navy-deep);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.mrnp-post__body {
    padding: 26px 26px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mrnp-post__body h4 {
    font-size: 19px;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--navy);
    transition: color .35s;
}

.mrnp-post:hover .mrnp-post__body h4 {
    color: var(--teal);
}

.mrnp-post__body p {
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--grey);
    margin: 0 0 18px;
    flex: 1;
}

/* Only the LAST paragraph pushes the link to the foot of the card. An article
   with two paragraphs was giving both of them flex:1, which split the spare
   height between them and left a gap in the middle of the text. */
.mrnp-post__body p:not(:last-of-type) {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

/* --- "Read more" ---------------------------------------------------------
   NOT .mrn-btn--ghost. That variant is white-on-dark with a translucent
   border — correct in a hero, and invisible here, where the card face is
   white. This is the light-ground equivalent: a rule that draws itself in on
   hover, the same gesture as the rest of the page.
   ------------------------------------------------------------------------ */

.mrnp-post__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 3px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--navy);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: color .35s, background-size .45s var(--ease-out, ease);
}

.mrnp-post__more svg {
    width: 16px;
    height: 16px;
    transition: transform .35s var(--ease-out, ease);
}

.mrnp-post:hover .mrnp-post__more,
.mrnp-post__more:hover,
.mrnp-post__more:focus-visible {
    color: var(--teal);
    background-size: 100% 1px;
}

.mrnp-post__more:hover svg,
.mrnp-post__more:focus-visible svg {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .mrnp-post__more,
    .mrnp-post__more svg {
        transition: none;
    }
}

/* ==========================================================================
   10. TESTIMONIALS
   ========================================================================== */

.mrnp-quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 46px;
}

.mrnp-quote {
    position: relative;
    padding: 44px 34px 34px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .09);
    box-shadow: 0 22px 48px -34px rgba(0, 0, 142, .5);
    transition: transform .5s var(--ease-out), box-shadow .5s;
}

.mrnp-quote:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 68px -34px rgba(0, 0, 142, .7);
}

.mrnp-quote::before {
    content: "\201C";
    position: absolute;
    left: 26px;
    top: 2px;
    font-family: Georgia, serif;
    font-size: 92px;
    line-height: 1;
    color: rgba(255, 173, 24, .3);
}

.mrnp-quote p {
    position: relative;
    font-size: 15.5px;
    line-height: 1.9;
    font-weight: 300;
    color: var(--grey);
    font-style: italic;
    margin: 0 0 22px;
}

.mrnp-quote__by {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 142, .08);
}

.mrnp-quote__av {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--grad-brand);
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    font-weight: 600;
}

.mrnp-quote__by strong {
    display: block;
    font-size: 15px;
    color: var(--navy);
    font-weight: 500;
}

.mrnp-quote__by span {
    font-size: 12.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--teal);
}

/* ==========================================================================
   11. CERTIFICATE GRID
   ========================================================================== */

.mrnp-certs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 46px;
}

.mrnp-certcard {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .1);
    box-shadow: 0 20px 44px -32px rgba(0, 0, 142, .55);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .5s var(--ease-out), box-shadow .5s, border-color .4s;
}

.mrnp-certcard img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 1s var(--ease-out);
}

.mrnp-certcard:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 173, 24, .5);
    box-shadow: 0 40px 66px -30px rgba(0, 0, 142, .7);
}

.mrnp-certcard:hover img {
    transform: scale(1.05);
}

.mrnp-certcard__bar {
    padding: 16px 18px;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--navy);
    background: linear-gradient(135deg, rgba(0, 0, 142, .05), rgba(1, 114, 128, .07));
    transition: background .4s, color .4s;
}

.mrnp-certcard:hover .mrnp-certcard__bar {
    background: var(--grad-brand);
    color: #fff;
}

/* ==========================================================================
   12. CONTACT — form + info cards + map
   ========================================================================== */

.mrnp-contact {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 46px;
    align-items: start;
}

.mrnp-infocard {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 26px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .09);
    box-shadow: 0 20px 44px -34px rgba(0, 0, 142, .5);
    margin-bottom: 18px;
    transition: transform .45s var(--ease-out), box-shadow .45s, border-color .4s;
}

.mrnp-infocard:hover {
    transform: translateX(8px);
    border-color: rgba(255, 173, 24, .45);
    box-shadow: 0 34px 60px -34px rgba(0, 0, 142, .7);
}

.mrnp-infocard__icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-brand);
    color: var(--gold-light);
    transition: transform .5s var(--ease-bounce);
}

.mrnp-infocard:hover .mrnp-infocard__icon {
    transform: rotate(-8deg) scale(1.08);
}

.mrnp-infocard__icon svg {
    width: 24px;
    height: 24px;
}

.mrnp-infocard strong {
    display: block;
    font-size: 12px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 6px;
    font-weight: 500;
}

.mrnp-infocard p,
.mrnp-infocard a {
    font-size: 15px;
    line-height: 1.7;
    color: var(--grey);
    margin: 0;
    text-decoration: none;
    transition: color .3s;
}

.mrnp-infocard a:hover {
    color: var(--navy);
    text-decoration: none;
}

/* form */
.mrnp-form {
    position: relative;
    padding: 44px 40px;
    border-radius: 24px;
    background: var(--grad-deep);
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 142, .8);
}

.mrnp-form::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 173, 24, .25);
    filter: blur(70px);
    right: -80px;
    top: -80px;
    animation: mrnOrb 18s ease-in-out infinite alternate;
}

.mrnp-form > * {
    position: relative;
    z-index: 2;
}

.mrnp-form h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 26px;
    margin: 0 0 8px;
}

.mrnp-form > p {
    color: rgba(255, 255, 255, .7);
    font-size: 14.5px;
    line-height: 1.8;
    margin: 0 0 30px;
}

.mrnp-field {
    position: relative;
    margin-bottom: 26px;
}

.mrnp-field input,
.mrnp-field textarea {
    width: 100%;
    padding: 16px 4px 12px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 15.5px;
    font-weight: 300;
    outline: none;
    transition: border-color .4s;
    resize: none;
}

.mrnp-field textarea {
    min-height: 110px;
}

.mrnp-field label {
    position: absolute;
    left: 4px;
    top: 16px;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .35s var(--ease-out), color .35s;
}

.mrnp-field input:focus + label,
.mrnp-field textarea:focus + label,
.mrnp-field input:not(:placeholder-shown) + label,
.mrnp-field textarea:not(:placeholder-shown) + label {
    transform: translateY(-18px) scale(.76);
    color: var(--gold-light);
}

.mrnp-field__line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
}

.mrnp-field input:focus ~ .mrnp-field__line,
.mrnp-field textarea:focus ~ .mrnp-field__line {
    transform: scaleX(1);
}

/* Country-code select.

   Bootstrap's .form-control claims this control and drops a white box into
   the dark form, 25px tall against 51px siblings. There is no .mrnp- select
   rule anywhere, so it was never restated after the form went dark. Match the
   inputs exactly: transparent, underlined, Oswald, and draw our own chevron
   because `appearance:none` takes the native one away with the box. */
.mrnp-field select,
.mrnp-form select.form-control {
    width: 100%;
    height: auto;
    padding: 16px 34px 12px 4px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.4;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .4s;
}

.mrnp-field--select {
    position: relative;
}

/* chevron rides on the wrapper, so the select itself stays a bare control */
.mrnp-field--select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -8px;
    border-right: 1.5px solid rgba(255, 255, 255, .55);
    border-bottom: 1.5px solid rgba(255, 255, 255, .55);
    transform: rotate(45deg);
    pointer-events: none;
    transition: border-color .35s, transform .35s var(--ease-out);
}

.mrnp-field--select:hover::after,
.mrnp-field--select:focus-within::after {
    border-color: var(--gold-light);
}

/* same gold underline sweep the text fields get on focus */
.mrnp-field select:focus ~ .mrnp-field__line {
    transform: scaleX(1);
}

/* the native option list paints from the OS palette on Windows; name ours */
.mrnp-field select option {
    background: #03061c;
    color: #fff;
}

/* map */
.mrnp-map {
    position: relative;
    margin-top: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 34px 70px -40px rgba(0, 0, 142, .7);
    filter: grayscale(.35) contrast(1.05);
    transition: filter .5s;
}

.mrnp-map:hover {
    filter: none;
}

.mrnp-map iframe {
    display: block;
    width: 100%;
    height: 440px;
    border: 0;
}

/* ==========================================================================
   13. STAT STRIP (reusable on inner pages)
   ========================================================================== */

.mrnp-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 46px;
    padding: 34px;
    border-radius: 22px;
    background: var(--grad-brand);
    box-shadow: 0 34px 70px -40px rgba(0, 0, 142, .8);
}

.mrnp-strip div {
    text-align: center;
    padding: 8px;
    border-right: 1px solid rgba(255, 255, 255, .16);
}

.mrnp-strip div:last-child {
    border-right: none;
}

.mrnp-strip strong {
    display: block;
    font-family: "Oswald", sans-serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 600;
    color: var(--gold-light);
}

.mrnp-strip span {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .76);
}

/* ==========================================================================
   14. STICKY PAGE NAV (long pages)
   ========================================================================== */

.mrnp-pagenav {
    position: sticky;
    top: 110px;
    padding: 26px 24px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .1);
    box-shadow: 0 22px 48px -34px rgba(0, 0, 142, .5);
}

.mrnp-pagenav h5 {
    font-size: 12px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--teal);
    margin: 0 0 16px;
}

.mrnp-pagenav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mrnp-pagenav li + li {
    margin-top: 4px;
}

.mrnp-pagenav a {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--grey);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all .35s var(--ease-out);
}

.mrnp-pagenav a:hover,
.mrnp-pagenav a.is-active {
    background: rgba(0, 0, 142, .05);
    border-left-color: var(--gold);
    color: var(--navy);
    text-decoration: none;
    transform: translateX(4px);
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1100px) {

    .mrnp-grid--4,
    .mrnp-certs {
        grid-template-columns: repeat(3, 1fr);
    }

    .mrnp-news,
    .mrnp-gal {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrnp-contact {
        grid-template-columns: 1fr;
    }

    .mrnp-split {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .mrnp-split--wide-left,
    .mrnp-split--wide-right {
        grid-template-columns: 1fr;
    }

    .mrnp-pagenav {
        position: static;
    }
}

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

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

    .mrnp-hero__inner {
        padding: 160px 0 90px;
    }

    .mrnp-grid--2,
    .mrnp-grid--3,
    .mrnp-grid--4,
    .mrnp-certs,
    .mrnp-quotes,
    .mrnp-news {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrnp-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 12px;
    }

    .mrnp-strip div:nth-child(2n) {
        border-right: none;
    }

    .mrnp-checks--2 {
        grid-template-columns: 1fr;
    }

    .mrnp-split__media::before {
        display: none;
    }

    /* The viewer drops its frame below 860px: at that width a plate sized to
       the image leaves margins too thin to read as a frame, so it goes
       full-bleed and the stage takes whatever the bar and rail leave.
       !important beats the width initLightbox() writes inline — the script
       also clears it, this is the belt to that pair of braces. */
    .mrnp-lb {
        padding: 0;
    }

    .mrnp-lb__frame {
        width: 100% !important;
        max-width: none;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .mrnp-lb__frame::before,
    .mrnp-lb__frame::after {
        display: none;
    }

    .mrnp-lb__stage {
        /* basis 0 rather than the height layout() writes on desktop: the
           canvas inside is absolutely positioned and contributes no height,
           so the stage has to be grown into the space instead of measured */
        height: auto !important;
        flex: 1 1 0%;
    }

    .mrnp-lb__bar {
        padding: 10px 10px 10px 14px;
    }

    .mrnp-lb__title {
        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .mrnp-lb__nav {
        width: 38px;
        height: 38px;
        margin-top: -19px;
    }

    .mrnp-lb__nav--prev {
        left: 8px;
    }

    .mrnp-lb__nav--next {
        right: 8px;
    }

    .mrnp-lb__thumb {
        width: 62px;
        height: 42px;
    }
}

@media (max-width: 620px) {

    .mrnp-grid--2,
    .mrnp-grid--3,
    .mrnp-grid--4,
    .mrnp-certs,
    .mrnp-quotes,
    .mrnp-news,
    .mrnp-gal {
        grid-template-columns: 1fr;
    }

    .mrnp-strip {
        grid-template-columns: 1fr;
    }

    .mrnp-strip div {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
        padding-bottom: 18px;
    }

    .mrnp-strip div:last-child {
        border-bottom: none;
    }

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

    .mrnp-prose--lead > p:first-of-type::first-letter {
        font-size: 48px;
    }
}

/* 3D effects are motion — honour the user's preference */
@media (prefers-reduced-motion: reduce) {

    .mrnp-icard,
    .mrnp-icard > *,
    .mrnp-flip__inner,
    .mrnp-split__frame,
    .mrnp-certcard,
    .mrnp-lb__frame {
        transform: none !important;
    }

    .mrnp-lb__frame.is-loading .mrnp-lb__spin {
        animation: none;
    }
}

/* ==========================================================================
   MOBILE FORM FIELDS -- 16px, or iOS zooms the page
   ==========================================================================
   Safari on iOS zooms the viewport whenever a focused form control renders
   below 16px, and these fields computed to 15.5px. Tapping any of them pushed
   the layout sideways and left the user pinched in, with no way back except a
   manual zoom-out -- the classic "the form jumps when I tap it" bug.

   16px only below the tablet breakpoint: the desktop type scale is unchanged,
   and half a pixel is not a visible difference on a phone anyway.
   ========================================================================== */

@media (max-width: 767px) {
    .mrnp-field input,
    .mrnp-field textarea,
    .mrnp-field select,
    /* matches the specificity of `.mrnp-form select.form-control` above (0,2,1),
       which the plain `.mrnp-field select` selector loses to */
    .mrnp-form select.form-control {
        font-size: 16px;
    }
}