@charset "utf-8";
/* ==========================================================================
   MARINE — Sachdeva Group ship-recycling yard experience layer
   Palette locked to the existing theme:
   navy #00008e · teal #017280 · gold #ffad18 / #ffcc29 · ink #050a2e
   Loaded AFTER style.css. All new work is namespaced with .mrn-
   ========================================================================== */

:root {
    --navy: #00008e;
    --navy-deep: #050a2e;
    --navy-ink: #03061c;
    --teal: #017280;
    --teal-light: #0a9fb0;
    --aqua: #b2ecff;
    --gold: #ffad18;
    --gold-light: #ffcc29;
    --gold-dark: #c8a43d;
    --white: #ffffff;
    --grey: #5d5c5c;
    --grey-soft: #f5f7fa;

    --grad-brand: linear-gradient(135deg, #00008e 0%, #017280 100%);
    --grad-brand-rev: linear-gradient(135deg, #017280 0%, #00008e 100%);
    --grad-gold: linear-gradient(135deg, #ffad18 0%, #ffcc29 100%);
    --grad-deep: linear-gradient(160deg, #03061c 0%, #00008e 55%, #017280 100%);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   0. Base / utilities
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    overflow-x: hidden;
}

.mrn-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

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

.mrn-dark {
    background: var(--grad-deep);
    color: rgba(255, 255, 255, 0.82);
}

.mrn-dark h2,
.mrn-dark h3,
.mrn-dark h4,
.mrn-dark h5 {
    color: #fff;
}

.mrn-light {
    background: var(--white);
}

.mrn-soft {
    background: linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
}

.mrn-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 3;
}

/* ---- Section heading kit ---- */
.mrn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 18px;
}

.mrn-eyebrow::before {
    content: "";
    width: 38px;
    height: 2px;
    background: var(--grad-gold);
    display: block;
    transform-origin: left;
    animation: mrnLineGrow 2.4s var(--ease-out) infinite;
}

.mrn-dark .mrn-eyebrow {
    color: var(--gold-light);
}

@keyframes mrnLineGrow {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }

    50% {
        transform: scaleX(0.35);
        opacity: 0.55;
    }
}

.mrn-title {
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    line-height: 1.08;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--navy);
    margin: 0 0 22px;
}

.mrn-dark .mrn-title {
    color: #fff;
}

.mrn-title em {
    font-style: normal;
    position: relative;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mrn-title .mrn-stroke {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.4px var(--gold);
    color: transparent;
}

.mrn-lead {
    font-size: 17px;
    line-height: 1.85;
    font-weight: 300;
    color: var(--grey);
    max-width: 760px;
}

.mrn-dark .mrn-lead {
    color: rgba(255, 255, 255, 0.75);
}

.mrn-center {
    text-align: center;
}

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

/* ---- Buttons ---- */
.mrn-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 38px;
    font-family: "Oswald", sans-serif;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), color .18s;
}

/* js/marine.js initMagnetic() adds this while the pointer is on a
   [data-mrn-magnetic] button: same list minus transform, so the magnet
   tracks the cursor 1:1 instead of chasing it through a tween. */
.mrn-btn.mrn-magnet-on {
    transition: box-shadow .2s var(--ease-out), color .18s;
}

.mrn-btn--gold {
    background: var(--grad-gold);
    color: var(--navy-deep);
    box-shadow: 0 12px 34px -12px rgba(255, 173, 24, .85);
}

.mrn-btn--ghost {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}

.mrn-btn--navy {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 142, .9);
}

.mrn-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-brand);
    /* the parent clips with overflow:hidden, but a transform-animated child
       gets its own compositing layer and Chrome clips that to the layer's
       RECTANGLE — so the fill's square top corners cleared the 60px pill ends
       on the way up. Rounding the fill itself means there are no square
       corners left to leak, whether or not the parent clip holds. */
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform .28s var(--ease-out);
}

.mrn-btn--navy::before {
    background: var(--grad-gold);
}

.mrn-btn--ghost::before {
    background: var(--grad-gold);
}

.mrn-btn:hover,
.mrn-btn:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-4px);
}

.mrn-btn--navy:hover,
.mrn-btn--ghost:hover {
    color: var(--navy-deep);
}

.mrn-btn:hover::before {
    transform: translateY(0);
}

.mrn-btn i,
.mrn-btn svg {
    transition: transform .24s var(--ease-out);
}

.mrn-btn:hover i,
.mrn-btn:hover svg {
    transform: translateX(5px);
}

/* ---- Scroll reveal engine ---- */
[data-mrn-reveal] {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: var(--mrn-delay, 0ms);
    will-change: transform, opacity;
}

[data-mrn-reveal="left"] {
    transform: translateX(-60px);
}

[data-mrn-reveal="right"] {
    transform: translateX(60px);
}

[data-mrn-reveal="zoom"] {
    transform: scale(.86);
}

[data-mrn-reveal="clip"] {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transform: none;
    transition: clip-path 1.2s var(--ease-out);
}

.mrn-in [data-mrn-reveal],
[data-mrn-reveal].mrn-in {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

/* Give a revealed button its own hover transition back. [data-mrn-reveal]
   above and .mrn-btn are both (0,1,0), and the reveal rule is the later of
   the two, so it won: a revealed button hovered on `transform 1.1s` plus the
   inline --mrn-delay initStagger() writes and never clears — a staggered one
   sat out its whole delay before the lift even started. .mrn-in is added once
   and never removed, so it is the safe place to hand the button back. */
.mrn-btn[data-mrn-reveal].mrn-in {
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), color .18s;
    transition-delay: 0s;
}

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-mrn-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/* ==========================================================================
   1. HERO — video yard, liquid overlay, kinetic type
   ========================================================================== */

.mrn-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy-ink);
}

.mrn-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mrn-hero__media video,
.mrn-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    animation: mrnKenBurns 26s ease-in-out infinite alternate;
}

@keyframes mrnKenBurns {
    0% {
        transform: scale(1.06) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.16) translate3d(-1.5%, -1.5%, 0);
    }
}

.mrn-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 15% 20%, rgba(0, 0, 142, .72) 0%, rgba(0, 0, 142, 0) 60%),
        radial-gradient(90% 80% at 90% 80%, rgba(1, 114, 128, .70) 0%, rgba(1, 114, 128, 0) 65%),
        linear-gradient(180deg, rgba(3, 6, 28, .82) 0%, rgba(3, 6, 28, .35) 40%, rgba(3, 6, 28, .92) 100%);
}

/* animated colour breathing on top of the scrim */
.mrn-hero__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(0, 0, 142, .55), rgba(1, 114, 128, .25), rgba(255, 173, 24, .12), rgba(0, 0, 142, .55));
    background-size: 400% 400%;
    animation: mrnGradientDrift 18s ease infinite;
    mix-blend-mode: screen;
    opacity: .7;
}

@keyframes mrnGradientDrift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* particle / plankton canvas
   width/height are explicit: <canvas> is a replaced element, so inset:0 alone
   leaves it at its 300x150 intrinsic size */
.mrn-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* light shafts through water */
.mrn-hero__rays {
    position: absolute;
    inset: -20% -10%;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(97deg, transparent 46%, rgba(178, 236, 255, .10) 49%, transparent 52%),
        linear-gradient(104deg, transparent 60%, rgba(255, 204, 41, .08) 63%, transparent 66%),
        linear-gradient(88deg, transparent 28%, rgba(178, 236, 255, .07) 31%, transparent 34%);
    animation: mrnRays 14s ease-in-out infinite alternate;
}

@keyframes mrnRays {
    0% {
        transform: translateX(-3%) skewX(-2deg);
        opacity: .6;
    }

    100% {
        transform: translateX(3%) skewX(2deg);
        opacity: 1;
    }
}

.mrn-hero__inner {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 170px 0 190px;
}

.mrn-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px 9px 12px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.mrn-hero__badge b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--navy-deep);
    font-size: 13px;
}

.mrn-hero__badge span {
    position: relative;
    padding-left: 16px;
}

.mrn-hero__badge span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .8);
    animation: mrnPulseDot 2.2s infinite;
}

@keyframes mrnPulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(74, 222, 128, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.mrn-hero__title {
    font-family: "Oswald", sans-serif;
    font-size: clamp(42px, 6.4vw, 92px);
    line-height: 1.02;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 26px;
    max-width: 15ch;
    letter-spacing: -0.5px;
}

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

.mrn-hero__title .mrn-word > span {
    display: inline-block;
    transform: translateY(105%) rotate(6deg);
    animation: mrnWordUp 1.15s var(--ease-out) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes mrnWordUp {
    to {
        transform: translateY(0) rotate(0);
    }
}

.mrn-hero__title .mrn-hl {
    position: relative;
    display: inline-block;
    background: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 45%, var(--aqua) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mrn-hero__title .mrn-hl::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    height: 6px;
    width: 100%;
    background: var(--grad-gold);
    border-radius: 6px;
    transform: scaleX(0);
    transform-origin: left;
    animation: mrnUnderline 1.3s var(--ease-out) 1.25s forwards;
    opacity: .55;
}

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

.mrn-hero__sub {
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.85;
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
    max-width: 60ch;
    margin: 0 0 40px;
    opacity: 0;
    animation: mrnFadeUp 1s var(--ease-out) 1.05s forwards;
}

@keyframes mrnFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

.mrn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    opacity: 0;
    animation: mrnFadeUp 1s var(--ease-out) 1.3s forwards;
}

/* floating hero stat rail */
.mrn-hero__rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: linear-gradient(90deg, rgba(0, 0, 142, .55), rgba(1, 114, 128, .45));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .14);
    opacity: 0;
    animation: mrnFadeUp 1s var(--ease-out) 1.55s forwards;
}

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

.mrn-hero__rail-item {
    padding: 26px 22px;
    text-align: center;
    position: relative;
    transition: background .4s;
}

.mrn-hero__rail-item + .mrn-hero__rail-item {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.mrn-hero__rail-item:hover {
    background: rgba(255, 173, 24, .12);
}

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

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

/* scroll cue */
.mrn-scrollcue {
    position: absolute;
    left: 50%;
    bottom: 132px;
    transform: translateX(-50%);
    z-index: 7;
    width: 26px;
    height: 44px;
    border-radius: 20px;
    border: 1.5px solid rgba(255, 255, 255, .5);
}

.mrn-scrollcue::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 4px;
    background: var(--gold-light);
    animation: mrnScrollDot 1.8s var(--ease-out) infinite;
}

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

    35% {
        opacity: 1;
    }

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

/* hero bottom wave separator */
.mrn-wavesep {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 4;
    line-height: 0;
    pointer-events: none;
}

.mrn-wavesep svg {
    width: 100%;
    height: 90px;
    display: block;
}

.mrn-wavesep--top {
    top: -1px;
    bottom: auto;
}

.mrn-wavesep--top svg {
    height: 70px;
}

/* ==========================================================================
   2. TICKER RIBBON
   ========================================================================== */

.mrn-ticker {
    background: var(--grad-brand);
    padding: 18px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mrn-ticker__track {
    display: flex;
    width: max-content;
    animation: mrnMarquee 32s linear infinite;
}

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

.mrn-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 0 26px;
    font-family: "Oswald", sans-serif;
    font-size: 19px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.mrn-ticker__item i {
    color: var(--gold-light);
    font-size: 9px;
}

.mrn-ticker__item b {
    color: var(--gold-light);
    font-weight: 600;
}

@keyframes mrnMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   3. ABOUT — tilt frame, floating badge, counters
   ========================================================================== */

.mrn-about__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: center;
}

.mrn-figure {
    position: relative;
    perspective: 1200px;
}

.mrn-figure__frame {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .35s var(--ease-out), box-shadow .5s;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 142, .55);
}

.mrn-figure__frame img {
    width: 100%;
    display: block;
    transition: transform 1.2s var(--ease-out);
}

.mrn-figure:hover .mrn-figure__frame img {
    transform: scale(1.07);
}

.mrn-figure__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(0, 0, 142, .35), transparent 55%, rgba(1, 114, 128, .38));
    opacity: .85;
}

/* glare sweep */
.mrn-figure__frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    z-index: 3;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    animation: mrnGlare 6s var(--ease-out) infinite;
}

@keyframes mrnGlare {

    0%,
    62% {
        left: -60%;
    }

    100% {
        left: 130%;
    }
}

.mrn-figure__badge {
    position: absolute;
    right: -22px;
    bottom: -26px;
    z-index: 5;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 26px 60px -18px rgba(0, 0, 142, .75);
    animation: mrnFloatY 6s ease-in-out infinite;
    border: 3px solid rgba(255, 173, 24, .55);
}

.mrn-figure__badge strong {
    font-size: 46px;
    line-height: 1;
    font-weight: 600;
    color: var(--gold-light);
}

.mrn-figure__badge span {
    font-size: 11px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    margin-top: 6px;
    max-width: 110px;
    line-height: 1.5;
}

@keyframes mrnFloatY {

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

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

.mrn-figure__ring {
    position: absolute;
    left: -46px;
    top: -46px;
    width: 150px;
    height: 150px;
    border: 2px dashed rgba(1, 114, 128, .35);
    border-radius: 50%;
    animation: mrnSpin 22s linear infinite;
}

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

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

.mrn-about__points li {
    position: relative;
    padding-left: 34px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--grey);
    transition: transform .35s var(--ease-out), color .35s;
}

.mrn-about__points li:hover {
    transform: translateX(6px);
    color: var(--navy);
}

.mrn-about__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-brand);
    box-shadow: 0 0 0 4px rgba(1, 114, 128, .12);
}

.mrn-about__points li::after {
    content: "";
    position: absolute;
    left: 7.5px;
    top: 9px;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--gold-light);
    border-bottom: 2px solid var(--gold-light);
    transform: rotate(-45deg);
}

/* ==========================================================================
   4. STATS COUNTERS
   ========================================================================== */

.mrn-stats {
    position: relative;
    background: var(--grad-deep);
    padding: 96px 0;
    overflow: hidden;
}

/* `background-attachment: fixed` was removed from this rule.

   Two reasons, either of which is enough. First, it is the classic
   scroll-jank source: a fixed-attachment background cannot be promoted to a
   compositor layer, so the whole band repaints on every scroll frame, and
   mobile Safari has never implemented it correctly anyway.

   Second, and decisive: this element carries data-sg-parallax="band"
   (index.html:349) and js/index-motion.js writes a transform into it on
   every frame. A transformed ancestor establishes a containing block, which
   silently redefines what `fixed` is fixed to — so the effect the property
   was asking for was not happening. The JS parallax is what actually moves
   this background, and it still does. */
.mrn-stats__bg {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: url("../images/ship-bg.webp");
    background-size: cover;
    background-position: center;
}

.mrn-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.mrn-stat {
    position: relative;
    padding: 42px 26px;
    border-radius: 20px;
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    transition: transform .5s var(--ease-out), border-color .4s, background .4s;
}

.mrn-stat::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--gold) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s;
}

.mrn-stat:hover {
    transform: translateY(-10px);
    background: rgba(255, 173, 24, .08);
    border-color: rgba(255, 173, 24, .38);
}

.mrn-stat:hover::before {
    opacity: 1;
    animation: mrnConic 2.6s linear infinite;
}

@property --a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes mrnConic {
    to {
        --a: 360deg;
    }
}

.mrn-stat__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-gold);
    color: var(--navy-deep);
    box-shadow: 0 14px 30px -12px rgba(255, 173, 24, .9);
    transition: transform .5s var(--ease-bounce);
}

.mrn-stat:hover .mrn-stat__icon {
    transform: rotate(-8deg) scale(1.1);
}

.mrn-stat__num {
    font-family: "Oswald", sans-serif;
    font-size: 56px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.mrn-stat__num i {
    font-style: normal;
    font-size: 30px;
    color: var(--gold-light);
}

.mrn-stat__label {
    margin-top: 12px;
    font-size: 12.5px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

/* ==========================================================================
   5. COMMITMENT CARDS
   ========================================================================== */

.mrn-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 56px;
}

.mrn-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--navy-deep);
    isolation: isolate;
    transition: transform .6s var(--ease-out), box-shadow .6s;
    box-shadow: 0 24px 50px -30px rgba(0, 0, 142, .6);
}

.mrn-card:hover {
    transform: translateY(-14px);
    box-shadow: 0 44px 70px -32px rgba(0, 0, 142, .8);
}

.mrn-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.mrn-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out), filter .6s;
    filter: saturate(.9);
}

.mrn-card:hover .mrn-card__img img {
    transform: scale(1.14) rotate(1.2deg);
    filter: saturate(1.15);
}

.mrn-card__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(3, 6, 28, .12) 0%, rgba(0, 0, 142, .72) 55%, rgba(3, 6, 28, .95) 100%);
    transition: opacity .5s;
}

.mrn-card:hover .mrn-card__veil {
    background: linear-gradient(180deg, rgba(1, 114, 128, .25) 0%, rgba(0, 0, 142, .82) 50%, rgba(3, 6, 28, .96) 100%);
}

.mrn-card__icon {
    position: absolute;
    top: 26px;
    left: 26px;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--gold-light);
    transition: background .45s, transform .55s var(--ease-bounce), color .45s;
}

.mrn-card:hover .mrn-card__icon {
    background: var(--grad-gold);
    color: var(--navy-deep);
    transform: translateY(-4px) rotate(-6deg);
}

.mrn-card__icon svg {
    width: 30px;
    height: 30px;
}

.mrn-card__body {
    position: relative;
    padding: 30px 30px 34px;
    color: #fff;
}

.mrn-card__body h4 {
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 12px;
    color: #fff;
}

.mrn-card__body p {
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .6s var(--ease-out), opacity .5s .1s;
}

.mrn-card:hover .mrn-card__body p {
    max-height: 160px;
    opacity: 1;
}

.mrn-card__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 12.5px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--gold-light);
    text-decoration: none;
}

.mrn-card__more::after {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--gold-light);
    transition: width .4s var(--ease-out);
}

.mrn-card:hover .mrn-card__more::after {
    width: 48px;
}

.mrn-card__link {
    position: absolute;
    inset: 0;
    z-index: 6;
}

/* ==========================================================================
   6. COMPANIES — split showcase
   ========================================================================== */

.mrn-units {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 56px;
}

.mrn-unit {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 54px 44px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: var(--grad-brand);
    isolation: isolate;
    transition: transform .6s var(--ease-out);
}

.mrn-unit:nth-child(2) {
    background: var(--grad-brand-rev);
}

.mrn-unit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: .28;
    transition: transform 1.4s var(--ease-out), opacity .6s;
}

.mrn-unit--a::before {
    background-image: url("../images/s3.webp");
}

.mrn-unit--b::before {
    background-image: url("../images/container.webp");
}

.mrn-unit:hover::before {
    transform: scale(1.12);
    opacity: .4;
}

.mrn-unit:hover {
    transform: translateY(-10px);
}

.mrn-unit__no {
    font-family: "Oswald", sans-serif;
    font-size: 88px;
    line-height: .8;
    font-weight: 600;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45);
    margin-bottom: 22px;
}

.mrn-unit h3 {
    font-size: 30px;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #fff;
}

.mrn-unit p {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 26px;
    max-width: 46ch;
}

.mrn-unit__meta {
    display: flex;
    gap: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.mrn-unit__meta div strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: var(--gold-light);
    font-weight: 600;
}

/* the "+" on an approximate count. Same superscript mark .mrn-stat__num and
   .mrnp-strip already carry, so "36+" reads the same way in a unit card as it
   does in the stats band above it. Inherits the figure's colour rather than
   forcing gold — #companies recolours these to cyan. */
.mrn-unit__meta div strong i {
    font-style: normal;
    font-weight: inherit;
    font-size: .58em;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: super;
}

.mrn-unit__meta div span {
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   7. PROCESS — animated yard flow
   ========================================================================== */

.mrn-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-top: 66px;
}

.mrn-flow::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, rgba(1, 114, 128, .15), rgba(255, 173, 24, .55), rgba(1, 114, 128, .15));
    background-size: 200% 100%;
    animation: mrnFlowLine 4s linear infinite;
}

@keyframes mrnFlowLine {
    to {
        background-position: -200% 0;
    }
}

.mrn-step {
    position: relative;
    text-align: center;
    padding: 0 12px;
}

.mrn-step__dot {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid rgba(1, 114, 128, .22);
    color: var(--navy);
    transition: transform .5s var(--ease-bounce), border-color .4s, background .4s, color .4s;
}

.mrn-step__dot svg {
    width: 36px;
    height: 36px;
}

.mrn-step__dot::after {
    content: attr(data-step);
    position: absolute;
    right: -4px;
    top: -4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--navy-deep);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px -8px rgba(255, 173, 24, .9);
}

.mrn-step:hover .mrn-step__dot {
    transform: translateY(-8px) scale(1.06);
    background: var(--grad-brand);
    color: #fff;
    border-color: rgba(255, 173, 24, .6);
}

.mrn-step h4 {
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 10px;
    color: var(--navy);
}

.mrn-step p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--grey);
    margin: 0;
}

/* ==========================================================================
   8. JOURNEY TIMELINE
   ========================================================================== */

.mrn-timeline {
    position: relative;
    margin-top: 60px;
    padding-left: 0;
    list-style: none;
}

.mrn-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, .16);
}

.mrn-timeline__progress {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    margin-left: -1px;
    height: 0;
    background: var(--grad-gold);
    box-shadow: 0 0 22px rgba(255, 173, 24, .8);
    transition: height .2s linear;
}

.mrn-tl {
    position: relative;
    width: 50%;
    padding: 0 54px 56px 0;
}

.mrn-tl:nth-of-type(even) {
    margin-left: 50%;
    padding: 0 0 56px 54px;
    text-align: left;
}

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

.mrn-tl__dot {
    position: absolute;
    top: 6px;
    right: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--navy-deep);
    border: 2px solid var(--gold);
    z-index: 3;
    transition: transform .5s var(--ease-bounce), box-shadow .5s;
}

.mrn-tl:nth-of-type(even) .mrn-tl__dot {
    right: auto;
    left: -9px;
}

.mrn-tl:hover .mrn-tl__dot {
    transform: scale(1.5);
    box-shadow: 0 0 0 8px rgba(255, 173, 24, .18);
}

.mrn-tl__year {
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    letter-spacing: 3px;
    padding: 5px 16px;
    border-radius: 40px;
    background: rgba(255, 173, 24, .14);
    border: 1px solid rgba(255, 173, 24, .38);
    color: var(--gold-light);
    margin-bottom: 14px;
}

.mrn-tl h4 {
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: #fff;
}

.mrn-tl p {
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

/* ==========================================================================
   9. CERTIFICATION MARQUEE
   ========================================================================== */

.mrn-certs {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* no gap here — the track is duplicated and translated -50%,
   so per-item margin keeps the loop seam invisible */
.mrn-certs__track {
    display: flex;
    width: max-content;
    animation: mrnMarquee 40s linear infinite;
}

.mrn-certs:hover .mrn-certs__track {
    animation-play-state: paused;
}

.mrn-cert {
    width: 190px;
    height: 132px;
    flex: 0 0 auto;
    margin-right: 26px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 142, .12);
    box-shadow: 0 16px 34px -24px rgba(0, 0, 142, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .45s, opacity .45s, transform .45s var(--ease-out);
}

.mrn-cert img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mrn-cert:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-8px) scale(1.04);
}

/* ==========================================================================
   10. GALLERY MOSAIC
   ========================================================================== */

.mrn-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 18px;
    margin-top: 56px;
}

.mrn-tile {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    display: block;
}

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

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

.mrn-tile:nth-child(6) {
    grid-row: span 2;
}

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

.mrn-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 142, .82));
    opacity: 0;
    transition: opacity .5s;
}

.mrn-tile__cap {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 3;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    transform: translateY(16px);
    opacity: 0;
    transition: transform .5s var(--ease-out), opacity .5s;
}

.mrn-tile:hover img {
    transform: scale(1.12);
}

.mrn-tile:hover::after,
.mrn-tile:hover .mrn-tile__cap {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   11. CTA
   ========================================================================== */

.mrn-cta {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background: var(--grad-brand);
    text-align: center;
}

.mrn-cta__bg {
    position: absolute;
    inset: 0;
    background: url("../images/ship-front.webp") center/cover no-repeat;
    opacity: .18;
    animation: mrnKenBurns 24s ease-in-out infinite alternate;
}

.mrn-cta__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

.mrn-cta__orb--1 {
    width: 420px;
    height: 420px;
    background: rgba(255, 173, 24, .45);
    left: -80px;
    top: -120px;
    animation: mrnOrb 16s ease-in-out infinite alternate;
}

.mrn-cta__orb--2 {
    width: 360px;
    height: 360px;
    background: rgba(178, 236, 255, .35);
    right: -60px;
    bottom: -100px;
    animation: mrnOrb 20s ease-in-out infinite alternate-reverse;
}

@keyframes mrnOrb {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(70px, 50px, 0) scale(1.22);
    }
}

.mrn-cta h2 {
    font-size: clamp(34px, 4.6vw, 62px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
}

.mrn-cta p {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, .84);
    max-width: 64ch;
    margin: 0 auto 38px;
    line-height: 1.8;
}

.mrn-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   12. Header behaviour + scroll progress + back-to-top
   ========================================================================== */

/* The bar is full width and scaled, rather than zero width and grown.

   js/marine.js used to write `style.width` on this element on every scrolled
   frame, which puts a fixed-position element through layout and paint sixty
   times a second for the whole length of every scroll, on twelve pages. It
   now writes transform: scaleX() instead — same picture, but a compositor
   property, so the main thread is not involved.

   transform-origin has to be left, or the bar would grow from its centre.
   The transition is on transform for the same reason it was on width: it
   smooths the gap between rAF ticks. */
.mrn-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 9999;
    background: var(--grad-gold);
    box-shadow: 0 0 14px rgba(255, 173, 24, .8);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
    transition: transform .1s linear;
}

.header {
    top: 0;
    background: linear-gradient(135deg, rgba(0, 0, 142, .94) 0%, rgba(1, 114, 128, .88) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);
    border-bottom: 1px solid rgba(255, 173, 24, .2);
    padding: 4px 0;
    transition: background .45s var(--ease-out), padding .45s var(--ease-out), box-shadow .45s;
}

/* keep the logo + nav row compact at all times, not just once scrolled */
.header .navbar-brand > img {
    max-width: 120px;
}

.header .menubar ul.nav {
    margin: 15px auto;
}

/* glass treatment layered on top of main.js' own .sticky_menu toggle */
.header.sticky_menu {
    background: linear-gradient(135deg, rgba(0, 0, 142, .97) 0%, rgba(1, 114, 128, .93) 100%) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px -20px rgba(0, 0, 0, .85) !important;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 173, 24, .28);
}

.header.sticky_menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .7;
}

/* ---- Nav pills: hover / active state + standout Contact button ---- */
#main-menu > li > a {
    border-radius: 999px;
    transition: background .3s var(--ease-out), color .3s, box-shadow .3s, transform .3s var(--ease-out);
}

#main-menu > li:not(:last-child) > a:hover,
#main-menu > li:not(:last-child) > a:focus,
#main-menu > li:not(:last-child).mrn-nav-active > a {
    background: rgba(255, 255, 255, .14);
    color: var(--gold-light);
}

#main-menu .dropdown-menu > li.mrn-nav-active > a {
    background-color: var(--gold-light);
    color: #fff;
    padding-left: 20px;
}

#main-menu > li:last-child > a {
    background: linear-gradient(135deg, var(--teal-light) 0%, var(--aqua) 140%);
    color: var(--navy-deep) !important;
    font-weight: 600;
    box-shadow: 0 10px 26px -12px rgba(10, 159, 176, .85);
}

#main-menu > li:last-child > a:hover,
#main-menu > li:last-child > a:focus {
    background: linear-gradient(135deg, var(--aqua) 0%, var(--teal-light) 140%);
    color: var(--navy-deep) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(10, 159, 176, .95);
}

#toTopBtn {
    background: var(--grad-gold) !important;
    color: var(--navy-deep) !important;
    border: none !important;
    box-shadow: 0 12px 30px -10px rgba(255, 173, 24, .9);
}

/* Hide the stray duplicate button that shipped in the old markup */
button.scroll-to-top {
    display: none !important;
}

/* ==========================================================================
   14. Footer particles
   The original markup animated 15 inline-styled divs with `floatParticle`,
   but that keyframe was never defined in any stylesheet — the dots sat still.
   Defined here, and driven from CSS so pages carry no inline particle markup.
   ========================================================================== */

@keyframes floatParticle {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translate3d(22px, -46px, 0) scale(1.35);
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate3d(-14px, -96px, 0) scale(1);
        opacity: 0;
    }
}

.footer-particles span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(200, 164, 61, .45);
    animation-name: floatParticle;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.footer-particles span:nth-child(1)  { width: 3px; height: 3px; left: 6%;  top: 78%; animation-duration: 16s; animation-delay: .4s; }
.footer-particles span:nth-child(2)  { width: 5px; height: 5px; left: 14%; top: 62%; animation-duration: 19s; animation-delay: 2.1s; }
.footer-particles span:nth-child(3)  { width: 2px; height: 2px; left: 22%; top: 88%; animation-duration: 14s; animation-delay: 1.2s; }
.footer-particles span:nth-child(4)  { width: 4px; height: 4px; left: 30%; top: 54%; animation-duration: 21s; animation-delay: 3.4s; }
.footer-particles span:nth-child(5)  { width: 3px; height: 3px; left: 38%; top: 82%; animation-duration: 17s; animation-delay: .9s; }
.footer-particles span:nth-child(6)  { width: 6px; height: 6px; left: 46%; top: 68%; animation-duration: 23s; animation-delay: 2.8s; }
.footer-particles span:nth-child(7)  { width: 2px; height: 2px; left: 54%; top: 46%; animation-duration: 15s; animation-delay: 1.7s; }
.footer-particles span:nth-child(8)  { width: 4px; height: 4px; left: 62%; top: 90%; animation-duration: 20s; animation-delay: 4.2s; }
.footer-particles span:nth-child(9)  { width: 3px; height: 3px; left: 70%; top: 58%; animation-duration: 18s; animation-delay: .2s; }
.footer-particles span:nth-child(10) { width: 5px; height: 5px; left: 78%; top: 74%; animation-duration: 22s; animation-delay: 3.1s; }
.footer-particles span:nth-child(11) { width: 2px; height: 2px; left: 86%; top: 50%; animation-duration: 16s; animation-delay: 1.5s; }
.footer-particles span:nth-child(12) { width: 4px; height: 4px; left: 93%; top: 84%; animation-duration: 19s; animation-delay: 2.4s; }

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .mrn-about__grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

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

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

    .mrn-flow {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 20px;
    }

    .mrn-flow::before {
        display: none;
    }

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

    .mrn-hero__rail-item:nth-child(3) {
        border-left: none;
    }

    .mrn-hero__rail-item:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
}

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

    .mrn-title {
        font-size: 38px;
    }

    .mrn-units {
        grid-template-columns: 1fr;
    }

    .mrn-cards {
        grid-template-columns: 1fr;
    }

    .mrn-card {
        min-height: 380px;
    }

    .mrn-card__body p {
        max-height: 200px;
        opacity: 1;
    }

    .mrn-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .mrn-timeline::before,
    .mrn-timeline__progress {
        left: 9px;
    }

    .mrn-tl,
    .mrn-tl:nth-of-type(even),
    .mrn-tl:nth-of-type(odd) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 44px 40px;
        text-align: left;
    }

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

    .mrn-figure__badge {
        width: 128px;
        height: 128px;
        right: 8px;
        bottom: -18px;
    }

    .mrn-figure__badge strong {
        font-size: 34px;
    }

    .mrn-hero__inner {
        padding: 150px 0 210px;
    }

    .mrn-scrollcue {
        display: none;
    }
}

@media (max-width: 560px) {
    .mrn-about__points {
        grid-template-columns: 1fr;
    }

    .mrn-stats__grid {
        grid-template-columns: 1fr;
    }

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

    .mrn-unit {
        padding: 40px 26px;
    }

    .mrn-mosaic {
        grid-template-columns: 1fr;
    }

    .mrn-tile:nth-child(1),
    .mrn-tile:nth-child(4) {
        grid-column: span 1;
    }
}