/* ==========================================================================
   Sachdeva Group — Yard-address band + modern footer
   Scope     : all 13 pages (loaded after marine-pages.css)
   Namespace : .sgf-*  — this is the footer the whole site now uses. The
               legacy .footer-enhanced rules it replaced lived in
               css/footer.css, which was deleted once every page had moved
               off it.
   ========================================================================== */

:root {
    --sgf-ink: #071a2e;
    /* footer body background      */
    --sgf-card-1: #0a2036;
    /* yard card gradient — start  */
    --sgf-card-2: #103254;
    /* yard card gradient — middle */
    --sgf-card-3: #2a7fc9;
    /* yard card gradient — end    */
    --sgf-cyan: #22b3e6;
    --sgf-cyan-bright: #35c6f4;
    --sgf-cyan-deep: #1195cf;
    --sgf-cyan-tint: rgba(34, 179, 230, .13);
    --sgf-gold: #ffad18;
    --sgf-body: #a7bbcf;
    --sgf-body-dim: #8ba1b6;
    --sgf-line: rgba(255, 255, 255, .09);
    --sgf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   1. Yard address band
   ========================================================================== */

.sgf-yard {
    position: relative;
    background: #ffffff;
    padding: 100px 0 130px;
    z-index: 2;
}

.sgf-yard__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.sgf-yard__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    padding: 56px 58px;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(112deg, var(--sgf-card-1) 0%, var(--sgf-card-2) 40%, var(--sgf-card-3) 100%);
    box-shadow: 0 34px 74px -36px rgba(9, 32, 55, .78);
    /* The band carries data-mrn-tilt, and js/marine.js initTilt clears the
       inline transform on mouseleave. Without a transition here it would snap
       flat instead of settling; every other tilted family on the site already
       declares one. box-shadow rides along so the card gains a little depth
       as it turns. */
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease;
}

.sgf-yard__card:hover {
    box-shadow: 0 44px 92px -38px rgba(9, 32, 55, .86), 0 0 46px -12px rgba(53, 198, 244, .22);
}

/* decorative swell inside the card */
.sgf-yard__swell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.sgf-yard__swell path {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1.5;
}

.sgf-yard__glow {
    position: absolute;
    top: -60%;
    right: -6%;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 198, 244, .34) 0%, rgba(53, 198, 244, 0) 68%);
    z-index: -1;
    pointer-events: none;
}

.sgf-yard__text {
    min-width: 0;
}

.sgf-yard__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #ffffff;
}

.sgf-yard__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sgf-cyan-bright);
    animation: sgfPulse 2.4s var(--sgf-ease) infinite;
}

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

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

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

.sgf-yard__title {
    margin: 22px 0 13px;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.14;
    letter-spacing: .3px;
    color: #ffffff;
}

.sgf-yard__meta {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.sgf-yard__meta a {
    color: rgba(255, 255, 255, .84);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    transition: color .3s var(--sgf-ease), border-color .3s var(--sgf-ease);
}

.sgf-yard__meta a:hover,
.sgf-yard__meta a:focus {
    color: #ffffff;
    border-bottom-color: var(--sgf-cyan-bright);
    text-decoration: none;
}

.sgf-yard__sep {
    padding: 0 9px;
    color: rgba(255, 255, 255, .45);
}

.sgf-yard__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 19px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sgf-cyan-bright) 0%, var(--sgf-cyan-deep) 100%);
    color: #04263f;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 18px 36px -16px rgba(34, 179, 230, .95);
    transition: transform .2s var(--sgf-ease), box-shadow .2s var(--sgf-ease);
}

.sgf-yard__btn:hover,
.sgf-yard__btn:focus {
    color: #04263f;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 26px 46px -16px rgba(34, 179, 230, 1);
}

.sgf-yard__btn i {
    font-style: normal;
    transition: transform .24s var(--sgf-ease);
}

.sgf-yard__btn:hover i {
    transform: translateX(5px);
}

/* ==========================================================================
   2. Footer shell + wave
   ========================================================================== */

.sgf-footer {
    position: relative;
    background: var(--sgf-ink);
    color: var(--sgf-body);
    /* overflow removed — it was clipping .sgf-footer__wave's negative top
       and preventing the wave from overlapping the section above. */
}

.sgf-footer__wave {
    position: absolute;
    top: -20px;
    /* push up enough to overlap the section above and kill the gap */
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
}

.sgf-footer__wave svg {
    display: block;
    width: 100%;
    height: 122px;
    /* increased to compensate for the extra -30px top offset */
}

.sgf-footer__wave path {
    fill: #ffffff;
}

.sgf-footer__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    overflow: hidden;
    /* moved here from .sgf-footer to contain internal content */
}

.sgf-footer__grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1.25fr 1.35fr;
    gap: 54px;
    padding: 140px 0 62px;
}

/* ==========================================================================
   3. Brand column
   ========================================================================== */

/* Full-colour mark on the navy footer, with no plate behind it: stacked 1-px
   white drop-shadows trace the artwork's own edge so the navy wordmark and
   anchor separate from the background, and a cyan bloom lifts it off the ink.
   Capped by height — the file is 110x99, so anything larger would upscale. */
/* THE MARK NEEDS A LIGHT GROUND, NOT A HALO.
   images/logo.png is an orange wheel over a NAVY wordmark and a NAVY anchor,
   drawn for a light background — header-modern.css:100 says as much and puts
   it straight onto the white bar with no treatment at all. Here it was landing
   on #071a2e, so the wordmark and the anchor were navy-on-navy and simply not
   there. The four stacked white drop-shadows were an attempt to fake an
   outline back onto them, and what they actually produced was a white haze
   smeared around every edge with the mark still unreadable underneath.

   So the anchor becomes the ground the artwork was drawn for. No filter.
   (The logo renders 82x74 from a 110x99 file — it is scaling DOWN, so
   sharpness was never the problem here.) */

.sgf-col--brand>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #e9f2f9 100%);
    border: 1px solid rgba(53, 198, 244, .26);
    box-shadow:
        0 20px 38px -20px rgba(0, 0, 0, .62),
        0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1),
        box-shadow .45s cubic-bezier(.16, 1, .3, 1),
        border-color .45s cubic-bezier(.16, 1, .3, 1);
}

.sgf-col--brand>a:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 165, 0, .55);
    box-shadow:
        0 28px 46px -20px rgba(0, 0, 0, .72),
        0 0 0 3px rgba(53, 198, 244, .14),
        0 1px 0 rgba(255, 255, 255, .5) inset;
}

.sgf-logo {
    display: block;
    width: auto;
    max-width: none;
    max-height: 62px;
    height: auto;
    /* the plate owns the spacing now */
    margin-bottom: 0;
    filter: none;
}

.sgf-about {
    margin: 0 0 26px;
    max-width: 330px;
    font-size: 15px;
    line-height: 1.78;
    color: var(--sgf-body);
}

.sgf-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
}

.sgf-badge {
    padding: 6px 15px;
    border-radius: 999px;
    border: 1px solid rgba(34, 179, 230, .32);
    background: var(--sgf-cyan-tint);
    color: #cfe9f7;
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sgf-social {
    display: flex;
    gap: 10px;
}

.sgf-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--sgf-line);
    color: #cfe0ef;
    transition: background .2s var(--sgf-ease), color .2s var(--sgf-ease),
        border-color .2s var(--sgf-ease), transform .2s var(--sgf-ease);
}

.sgf-social a:hover,
.sgf-social a:focus {
    background: var(--sgf-cyan);
    border-color: var(--sgf-cyan);
    color: #04263f;
    transform: translateY(-4px);
}

.sgf-social svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* ==========================================================================
   4. Link columns
   ========================================================================== */

.sgf-col__title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 26px;
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #ffffff;
}

.sgf-tick {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 2px;
    background: var(--sgf-cyan);
    box-shadow: 0 0 0 4px rgba(34, 179, 230, .15);
}

.sgf-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Touch targets, at every width — SC 2.5.8's 24px floor is not a phone-only
   rule. At 15px/1.5 the anchor box is 22.5px tall and the 13px gap under it
   is dead space no pointer can use, so the gap moves INSIDE the anchor: the
   pitch between two links is unchanged (23+13=36 -> 33+4=37) and the hit
   area grows by half. It has to be padding on the element rather than a
   min-height because .sgf-links a is inline-FLEX, where vertical padding is
   in the line box — which is also why `li` gives back what `a` takes.

   The `.sgf-yard__meta` links are deliberately left alone: they sit inline
   in a sentence, which SC 2.5.8 exempts, and padding there would not enlarge
   the line box anyway. */
.sgf-links li {
    margin-bottom: 4px;
}

.sgf-links a {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sgf-body);
    text-decoration: none;
    transition: color .3s var(--sgf-ease), transform .3s var(--sgf-ease);
}

.sgf-links a:hover,
.sgf-links a:focus {
    color: #ffffff;
    text-decoration: none;
    transform: translateX(5px);
}

.sgf-chev {
    color: var(--sgf-cyan);
    font-size: 16px;
    line-height: 1.4;
    transition: color .3s var(--sgf-ease);
}

.sgf-links a:hover .sgf-chev {
    color: var(--sgf-cyan-bright);
}

/* ==========================================================================
   5. Get in touch column
   ========================================================================== */

.sgf-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sgf-contact li {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.sgf-contact__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sgf-cyan-tint);
    border: 1px solid rgba(34, 179, 230, .28);
    color: var(--sgf-cyan);
    transition: background .35s var(--sgf-ease), color .35s var(--sgf-ease);
}

.sgf-contact li:hover .sgf-contact__icon {
    background: var(--sgf-cyan);
    color: #04263f;
}

.sgf-contact__icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.sgf-contact__label {
    display: block;
    margin-bottom: 6px;
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffffff;
}

.sgf-contact__value {
    display: block;
    font-size: 15px;
    line-height: 1.62;
    color: var(--sgf-body);
    text-decoration: none;
    transition: color .3s var(--sgf-ease);
}

a.sgf-contact__value:hover,
a.sgf-contact__value:focus {
    color: var(--sgf-cyan-bright);
    text-decoration: none;
}

/* ==========================================================================
   6. Bottom bar
   ========================================================================== */

.sgf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 24px 0 30px;
    border-top: 1px solid var(--sgf-line);
    font-size: 14px;
    color: var(--sgf-body-dim);
}

/* css/style.css declares `p { font-size:16px; color:#4a4a4b; margin-bottom:15px }`.
   A directly matched declaration always beats an inherited one, so the bottom-bar
   paragraphs cannot inherit from .sgf-footer__bottom — restate them here. */
.sgf-footer__bottom p {
    margin: 0;
    font-size: 14px;
    color: var(--sgf-body-dim);
}

.sgf-footer__bottom a {
    color: #a7bbcf;
    text-decoration: none;
    transition: color .3s var(--sgf-ease);
}

.sgf-footer__bottom a:hover,
.sgf-footer__bottom a:focus {
    color: var(--sgf-cyan-bright);
    text-decoration: none;
}

/* ==========================================================================
   7. Back-to-top button (matches the new accent pair)
   ========================================================================== */

#toTopBtn {
    width: 46px;
    height: 46px;
    line-height: 42px;
    background: linear-gradient(135deg, var(--sgf-cyan-bright) 0%, var(--sgf-cyan-deep) 100%) !important;
    color: #ffffff !important;
    border: 2px solid var(--sgf-gold) !important;
    box-shadow: 0 14px 30px -12px rgba(34, 179, 230, .95) !important;
}

/* Show/hide, moved off jQuery.
   css/style.css:326 parks the button at `display: none`, and js/main.js used
   to bring it back with .fadeIn(200)/.fadeOut(200) — a main-thread animation
   queue kicked on every scroll event, writing inline display and opacity
   frame by frame. main.js now toggles .is-visible once per state change and
   the transition below carries it, on opacity and transform only, both of
   which the compositor can run without the main thread.

   `display` stays block throughout because it cannot be transitioned;
   visibility can, and it is what keeps the hidden button out of the tab
   order and off the hit-test. The transition on style.css:346 already lists
   opacity and transform, so this inherits the right timing. */
#toTopBtn {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: background-color .25s ease, opacity .25s ease,
                transform .25s ease, visibility 0s linear .25s;
}

#toTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: background-color .25s ease, opacity .25s ease,
                transform .25s ease, visibility 0s linear 0s;
}

#toTopBtn:hover {
    background: linear-gradient(135deg, var(--sgf-cyan-deep) 0%, var(--sgf-cyan-bright) 100%) !important;
}

/* ==========================================================================
   8. Keyboard focus ring
   css/style.css declares `a:focus, a:hover { outline: 0 }` for every anchor,
   so a colour swap is all that is left of the focus state — well under the 3:1
   change WCAG 2.4.11 asks for. Restore a real ring here (this file loads last).
   No border-radius is set: the outline already follows each element's own
   radius, so the pill CTA and the circular social buttons keep their shape.
   ========================================================================== */

.sgf-yard a:focus-visible,
.sgf-footer a:focus-visible,
#toTopBtn:focus-visible {
    outline: 2px solid var(--sgf-cyan-bright);
    outline-offset: 3px;
}

/* The CTA is itself cyan — a cyan ring would sit cyan-on-cyan. White clears
   4:1 against every stop of the card gradient the offset ring lands on. */
.sgf-yard__btn:focus-visible {
    outline-color: #ffffff;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* 4 columns no longer fit the 1240px container — pair them up two by two so
   the grid stays completely filled instead of leaving a hole on the last row. */
@media (max-width: 1200px) {
    .sgf-footer__grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 48px 54px;
        padding: 130px 0 58px;
    }
}

@media (max-width: 991px) {
    .sgf-yard {
        padding: 80px 0 110px;
    }

    .sgf-yard__card {
        padding: 44px 40px;
        gap: 32px;
    }

    .sgf-yard__title {
        font-size: 34px;
    }

    .sgf-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 44px;
        padding: 120px 0 54px;
    }

    .sgf-col--brand,
    .sgf-col--contact {
        grid-column: 1 / -1;
    }

    .sgf-about {
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .sgf-yard {
        padding: 60px 0 90px;
    }

    .sgf-yard__inner,
    .sgf-footer__inner {
        padding: 0 18px;
    }

    .sgf-yard__card {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 26px;
        gap: 28px;
        border-radius: 20px;
    }

    .sgf-yard__glow {
        top: -30%;
        right: -30%;
        width: 300px;
        height: 300px;
    }

    .sgf-yard__title {
        margin: 18px 0 11px;
        font-size: 27px;
    }

    .sgf-yard__meta {
        font-size: 14.5px;
    }

    .sgf-yard__sep {
        padding: 0 6px;
    }

    .sgf-yard__btn {
        width: 100%;
        justify-content: center;
        padding: 17px 28px;
    }

    .sgf-footer__wave svg {
        height: 82px;
        /* 52px base + 30px to compensate for top: -30px offset */
    }

    .sgf-footer__grid {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 84px 0 44px;
    }

    .sgf-col--brand,
    .sgf-col--contact {
        grid-column: auto;
    }

    .sgf-footer__bottom {
        justify-content: center;
        text-align: center;
        padding: 22px 0 28px;
    }
}

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

    .sgf-yard__dot {
        animation: none;
    }

    .sgf-yard__btn,
    .sgf-links a,
    .sgf-social a {
        transition: none;
    }
}


/* ==========================================================================
   FEEDBACK WIDGET — the floating launcher and its dialog
   ==========================================================================
   Built entirely by js/feedback.js. Nothing in any page's markup matches a
   selector below.

   WHY IT LIVES IN THIS FILE
   It started in css/page-fx.css, which is the inner-page override layer and
   is deliberately never loaded on index.html — so the home page got the
   script, built the widget, and painted it with no rules at all. This file is
   the one stylesheet that is loaded by all 13 pages AND already owns the
   other floating control on the site, #toTopBtn at line 540. A second
   floating control belongs beside the first.

   Nothing here may reference a --pfx-* token or a .mrnp-* class: both come
   from files index.html does not load. The widget depends only on the :root
   tokens index-theme.css defines, which every page has.

   The launcher takes the opposite half of the palette from #toTopBtn — a gold
   plate with ink line-work against that button's cyan disc — and stacks above
   it. Two identical discs would read as a pair of buttons doing one job.

   FRONT END ONLY. js/feedback.js sends nothing; read its header before this
   ships.
   ========================================================================== */

/* --- 6.10 feedback widget — launcher + dialog --------------------------
   Caller: js/feedback.js, which builds every element below. Nothing in any
   page's markup matches these selectors.

   The launcher is the second floating control on the page. #toTopBtn is a
   46px cyan disc with a gold ring at bottom:20 right:30 (footer-modern.css
   540), so this one takes the opposite half of the palette — a gold plate
   with ink line-work — and stacks above it. Two identical discs would read
   as a pair of buttons doing the same job.

   It is a labelled pill on desktop and collapses to the disc on touch, where
   a 150px pill parked over the content is in the way.

   WHY THE LABEL IS NO LONGER A HOVER REVEAL
   It used to sit at max-width:0 and open only on hover, so at rest the whole
   control was a 46px gold dot with a speech bubble in it — indistinguishable
   at a glance from the cyan back-to-top disc 32px below it, and on a phone,
   where there is no hover at all, it never said the word "feedback" once. A
   control nobody can identify without pointing at it is a control nobody
   clicks. The pill now reads FEEDBACK at rest and hover only lifts it.

   THE HALO
   ::before carries a spread-only box-shadow that expands and fades on a loop.
   It is deliberately drawn on a pseudo-element and not on the button: the
   button's own box-shadow is its depth, and hover rewrites that shadow, so
   an animation sharing the property would fight the transition. Spread rather
   than transform:scale because scaling a 150x48 pill stretches the ring into
   an ellipse, while spread grows evenly on all four sides and keeps the pill
   silhouette. It pauses on hover and while the dialog is open — by then it
   has done its job and is just noise.

   FRONT END ONLY. js/feedback.js sends nothing; read its header before this
   ships. */

.sgfb-launch {
    position: fixed;
    right: 30px;
    bottom: 78px;
    /* above #toTopBtn's 999 and below .mrnp-lb's 10000 */
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 48px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold-light, #ffc247) 0%, var(--gold, #ffad18) 100%);
    color: var(--ink, #071a2e);
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    /* Three layers, and each one is load-bearing. The 1px ink ring is what
       separates a white-bordered gold pill from the pale page sections it
       floats over — without it the border dissolves into #eef3f8 and the
       button loses its edge. Then the gold throw for depth, and a short
       neutral drop so the pill still reads against the navy footer, where a
       gold glow on gold-adjacent ink disappears. */
    box-shadow:
        0 0 0 1px rgba(7, 26, 46, .18),
        0 16px 34px -12px rgba(255, 173, 24, .95),
        0 6px 16px -8px rgba(4, 18, 31, .45);
    transition: transform .45s var(--e-out), box-shadow .45s var(--e-out),
        background .45s var(--e-out);
}

.sgfb-launch::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    animation: sgfb-halo 2.9s ease-out infinite;
}

@keyframes sgfb-halo {
    0%   { box-shadow: 0 0 0 0 rgba(255, 173, 24, .55); }
    70%  { box-shadow: 0 0 0 15px rgba(255, 173, 24, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 173, 24, 0); }
}

.sgfb-launch:hover::before,
.sgfb-launch:focus-visible::before,
.sgfb-launch[aria-expanded="true"]::before {
    animation: none;
}

.sgfb-launch__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.sgfb-launch__ico svg {
    width: 22px;
    height: 22px;
    transition: transform .5s var(--e-out);
}

.sgfb-launch__txt {
    padding: 0 20px 0 2px;
    white-space: nowrap;
}

.sgfb-launch:hover,
.sgfb-launch:focus-visible {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #fff 0%, var(--gold-light, #ffc247) 55%, var(--gold, #ffad18) 100%);
    box-shadow:
        0 0 0 1px rgba(7, 26, 46, .22),
        0 26px 48px -14px rgba(255, 173, 24, 1),
        0 8px 20px -8px rgba(4, 18, 31, .5);
}

.sgfb-launch:hover .sgfb-launch__ico svg {
    transform: rotate(-8deg) scale(1.08);
}

.sgfb-launch:focus-visible {
    outline: 2px solid var(--cyan-bright, #35c6f4);
    outline-offset: 3px;
}

/* PARKED OVER THE HERO.
   `.mrn-hero__rail` is `position:absolute; bottom:0` inside a hero whose
   min-height fills the viewport, so the stat panel IS the bottom band of the
   first screen — and any bottom-anchored floating control lands on top of it.
   Measured at 375x812 the launcher covered "Years of Operation"; on a laptop
   (1024x768, 1280x800, 1366x768) it covered "HKC Aligned".

   Padding the rail cannot fix this — it would leave a dead strip across the
   bottom of the hero — and neither can moving the button, because every
   bottom corner is rail. So the launcher does what #toTopBtn at line 577
   already does on this site: it stays off the first screen and fades in once
   the reader has left the hero behind. Same 250px threshold, so the two
   controls arrive together rather than one appearing under the other.

   Global, not scoped to a width. js/feedback.js sets the class on a phone as
   it always did, and above that width only when it measures the hero's own
   text and buttons into the launcher's band — so the rule is only ever live
   when the two really do meet, and a resize that pulls them apart clears it
   on the next frame. A tall desktop, where they never meet, never sees it. */
.sgfb-launch.is-parked {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .3s var(--sgf-ease), transform .3s var(--sgf-ease),
        visibility 0s linear .3s;
}

/* --- the dialog --------------------------------------------------------- */

.sgfb {
    position: fixed;
    inset: 0;
    /* The dynamic viewport where the engine knows the unit: the visible
       area between a phone's toolbars as they stand right now. Mobile Safari
       measures a fixed inset:0 box against the large viewport, which parks
       the bottom of the dialog behind its toolbar — css/cert-viewer.css
       records the same fault. With top, height and bottom all set, bottom is
       the one that yields; an engine without dvh drops the line and inset:0
       stands. */
    height: 100dvh;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--e-out), visibility .4s var(--e-out);
}

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

/* js/feedback.js swaps the form for the sent panel with el.hidden. The UA
   stylesheet's [hidden] { display: none } is the weakest rule there is, and
   .sgfb__form below sets `display: grid` — which beats it, so the filled-in
   form stayed on screen underneath the thank-you. Any author `display` on an
   element that is ever hidden has to be answered, so it is answered once,
   for the whole widget, rather than per element. */
.sgfb [hidden] {
    display: none !important;
}

.sgfb__scrim {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 28, .9);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.sgfb__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    /* 100% of the dialog's content box, never 100vh. On a phone 100vh is
       the LARGE viewport — the screen with its toolbars retracted — so while
       the address bar showed, a panel sized from it came out taller than the
       space it opened into and the flex centring cut both ends off, the Send
       bar at the bottom included. The dialog box above is the visible
       viewport, so this always fits: here it is 100vh less the 64px of
       padding, exactly what the old calc() gave a desktop. */
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 36px 42px 32px;
    background: linear-gradient(165deg, #0a2340 0%, #071a2e 60%, #04121f 100%);
    border: 1px solid rgba(53, 198, 244, .18);
    box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9);
    transform: translate3d(0, 26px, 0) scale(.97);
    transition: transform .55s var(--e-out);
    /* the panel scrolls itself; Lenis must not take the wheel inside it */
    overscroll-behavior: contain;
    /* Room for the sticky Send bar (.sgfb__actions, below). A browser only
       makes sure a focused control is inside the scrollport, and the bar
       covers the bottom of it — at 375x812 Mobile No. took focus at 717-770
       with the bar's top at 635 and the panel never moved, so the keyboard's
       Next key, or a failed submit, left the field being typed into out of
       sight. This is the bar's measured cover, 106px here and 156px in the
       small-screen block, plus 26px for the error line under a field. */
    scroll-padding-bottom: 132px;
}

.sgfb.is-open .sgfb__panel {
    transform: none;
}

/* the blueprint grid the dark sections carry, so the dialog reads as part of
   the same system rather than as a browser chrome box */
.sgfb__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(53, 198, 244, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 198, 244, .032) 1px, transparent 1px);
    background-size: 58px 58px;
}

.sgfb__glow {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 179, 230, .3), transparent 68%);
    pointer-events: none;
}

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

.sgfb__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(53, 198, 244, .26);
    border-radius: 3px;
    background: rgba(4, 18, 31, .6);
    color: var(--body-on-dark, #a7bbcf);
    cursor: pointer;
    transition: color .35s var(--e-out), border-color .35s var(--e-out),
        background .35s var(--e-out), transform .35s var(--e-out);
}

.sgfb__close svg {
    width: 17px;
    height: 17px;
}

.sgfb__close:hover {
    color: #fff;
    border-color: var(--cyan-bright, #35c6f4);
    background: rgba(53, 198, 244, .16);
    transform: rotate(90deg);
}

.sgfb__head {
    margin-bottom: 24px;
    padding-right: 44px;
}

.sgfb__head h3 {
    margin: 10px 0 8px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .2px;
    color: #fff;
}

.sgfb__head h3 em {
    font-style: normal;
    color: var(--cyan-bright, #35c6f4);
}

.sgfb__head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--body-on-dark, #a7bbcf);
}

/* --- the three types ----------------------------------------------------- */

.sgfb-types {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
}

.sgfb-types legend {
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    width: auto;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--cyan-bright, #35c6f4);
}

.sgfb-types__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sgfb-type {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

/* The input is the control — it keeps focus, keyboard and the checked state.
   It is taken out of the visual flow rather than hidden, because
   display:none / visibility:hidden drop an input out of the tab order and the
   three types become unreachable without a mouse. */
.sgfb-type input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.sgfb-type__box {
    position: relative;
    display: block;
    height: 100%;
    padding: 15px 12px 13px;
    text-align: center;
    background: rgba(4, 18, 31, .55);
    border: 1px solid rgba(53, 198, 244, .2);
    border-radius: 3px;
    transition: transform .4s var(--e-out), border-color .4s var(--e-out),
        background .4s var(--e-out), box-shadow .4s var(--e-out);
}

.sgfb-type__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border-radius: 3px;
    background: linear-gradient(150deg, rgba(53, 198, 244, .18), rgba(53, 198, 244, .04));
    border: 1px solid rgba(53, 198, 244, .26);
    color: var(--cyan-bright, #35c6f4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: background .4s var(--e-out), color .4s var(--e-out),
        border-color .4s var(--e-out), transform .4s var(--e-out),
        box-shadow .4s var(--e-out);
}

.sgfb-type__ico svg {
    width: 23px;
    height: 23px;
}

.sgfb-type__box b {
    display: block;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    color: #fff;
}

.sgfb-type__box i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(167, 187, 207, .8);
}

.sgfb-type__tick {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cyan-bright, #35c6f4);
    color: #041724;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .35s var(--e-out), transform .35s var(--e-out);
}

.sgfb-type__tick svg {
    width: 12px;
    height: 12px;
}

.sgfb-type:hover .sgfb-type__box {
    transform: translateY(-3px);
    border-color: rgba(53, 198, 244, .42);
    background: rgba(8, 32, 58, .8);
}

.sgfb-type input:checked+.sgfb-type__box {
    border-color: var(--cyan-bright, #35c6f4);
    background: linear-gradient(165deg, rgba(53, 198, 244, .18), rgba(53, 198, 244, .04));
    box-shadow: 0 0 0 1px rgba(53, 198, 244, .35) inset,
        var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.sgfb-type input:checked+.sgfb-type__box .sgfb-type__ico {
    background: linear-gradient(150deg, var(--cyan-bright, #35c6f4), var(--cyan-deep, #1195cf));
    border-color: transparent;
    color: #041724;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
        var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.sgfb-type input:checked+.sgfb-type__box .sgfb-type__tick {
    opacity: 1;
    transform: none;
}

/* the ring goes on the BOX — the input it belongs to is 1px and clipped, so
   its own focus ring would be invisible */
.sgfb-type input:focus-visible+.sgfb-type__box {
    outline: 2px solid var(--cyan-bright, #35c6f4);
    outline-offset: 3px;
}

/* --- fields -------------------------------------------------------------- */

/* Name and Designation are short and belong side by side; the number, the
   note and the actions run the full width. Pairing the two short fields is
   54px of height back, which is the difference between the send button
   sitting above the fold on a 900px laptop and below it. */
.sgfb__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
}

.sgfb-types,
.sgfb-field--wide,
.sgfb__actions {
    grid-column: 1 / -1;
}

/* THE FIELDS ARE SELF-CONTAINED, and that is the whole reason this component
   moved out of page-fx.css. They used to carry .mrnp-field as well and borrow
   the floating-label behaviour from marine-pages.css — which index.html does
   not load. On the home page the labels sat on top of the typed text and the
   inputs drew a browser default box. Every rule that behaviour needs is
   restated below, so the widget depends on nothing but the :root tokens in
   index-theme.css, which all 13 pages do load. */
.sgfb-field {
    position: relative;
    margin-bottom: 24px;
    min-width: 0;
}

.sgfb-field input,
.sgfb-field textarea {
    display: block;
    width: 100%;
    padding: 16px 4px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    color: #fff;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.5;
    outline: none;
    resize: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .4s var(--e-out);
}

.sgfb-field textarea {
    min-height: 82px;
}

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

.sgfb-field label {
    position: absolute;
    left: 4px;
    top: 16px;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: .6px;
    color: rgba(167, 187, 207, .78);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .35s var(--e-out), color .35s var(--e-out),
        letter-spacing .35s var(--e-out);
}

/* placeholder=" " — a single space — is what makes :not(:placeholder-shown)
   mean "this field has a value". js/feedback.js writes it on every input and
   textarea; without it the label never lifts. */
.sgfb-field input:focus+label,
.sgfb-field textarea:focus+label,
.sgfb-field input:not(:placeholder-shown)+label,
.sgfb-field textarea:not(:placeholder-shown)+label {
    transform: translateY(-18px) scale(.76);
    color: var(--cyan-bright, #35c6f4);
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.sgfb-field__line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan-bright, #35c6f4), var(--gold, #ffad18));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--e-out);
}

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

.sgfb-count {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 11px;
    letter-spacing: 1.4px;
    color: rgba(167, 187, 207, .55);
}

.sgfb-err {
    display: block;
    min-height: 0;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #ff9c8f;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}

.is-bad .sgfb-err {
    opacity: 1;
    transform: none;
}

.sgfb-field.is-bad input,
.sgfb-field.is-bad textarea {
    border-bottom-color: rgba(255, 122, 105, .75);
}

.sgfb-field.is-bad label {
    color: #ff9c8f;
}

.sgfb-types.is-bad .sgfb-type__box {
    border-color: rgba(255, 122, 105, .55);
}

/* The panel is the scrollport, so the actions row sticks to its floor. Below
   about 820px of viewport the form is taller than the panel and the send
   button is off the bottom — and a button you have to discover by scrolling
   inside a dialog is a button half the visitors never press. The negative
   margins take the bar full-bleed so its backdrop covers the panel's own
   42px of side padding, and the gradient tells the reader there is more
   form underneath it. */
.sgfb__actions {
    position: sticky;
    bottom: -32px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 10px -42px -32px;
    padding: 18px 42px 32px;
    background: linear-gradient(180deg,
            rgba(7, 26, 46, 0) 0%,
            rgba(7, 26, 46, .92) 22%,
            #06182a 46%);
}

/* The server said no. Sits above the actions, full width, and is the one
   place in the dialog that reports a failure the visitor cannot fix by
   correcting a field. */
.sgfb__alert {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 122, 105, .38);
    border-left: 3px solid #ff7a69;
    background: rgba(255, 122, 105, .1);
    font-size: 13.5px;
    line-height: 1.6;
    color: #ffb3a8;
}

.sgfb__send.is-sending {
    opacity: .72;
    cursor: progress;
}


/* --- the sent state ------------------------------------------------------ */

.sgfb__done {
    text-align: center;
    padding: 22px 0 8px;
}

.sgfb__done-mark {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--cyan-bright, #35c6f4), var(--cyan-deep, #1195cf));
    color: #041724;
    box-shadow: var(--glow-cyan, 0 22px 50px -26px rgba(34, 179, 230, .85));
}

.sgfb__done-mark svg {
    width: 34px;
    height: 34px;
}

.sgfb__done h4 {
    margin: 0 0 12px;
    font-family: var(--font-display, "Oswald", sans-serif);
    font-size: 26px;
    font-weight: 300;
    color: #fff;
}

.sgfb__done p {
    max-width: 420px;
    margin: 0 auto 26px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--body-on-dark, #a7bbcf);
}

/* The page behind the dialog must not scroll. overflow:hidden on <html> is
   what holds on iOS, where a body-only lock still lets the document rubber
   band; js/feedback.js also stops Lenis, which owns the wheel on this site
   and would keep driving the page underneath regardless of overflow.

   BODY STAYS VISIBLE, and that is what keeps the reader's place. It used to
   be locked too, and every open threw the page back to the top: css/style.css
   gives body height:100% and css/marine.css gives it overflow-x:hidden.
   While <html> is visible that overflow is passed up to the viewport and
   body clips nothing, but once <html> goes hidden it stops being passed up,
   body becomes a scroll box one screen tall, and the document collapses to
   that screen. Measured on about_us.html at 375x812: 3000px down when the
   dialog opened, 0 while it was up, still 0 after it closed — and on a
   phone that also re-parked the launcher, because the page was back on the
   hero. Left visible, body is exactly as it is when nothing is open, and
   <html> alone holds the lock with the offset intact. */
html.sgfb-locked {
    overflow: hidden;
}

html.sgfb-locked body {
    overflow: visible;
}


/* --- the widget on a small screen ------------------------------------ */

@media (max-width: 860px) {

    /* 20px round the panel, and its max-height:100% takes the rest. The
       panel used to claim 100vh - 40px while this box kept 32px top and
       bottom, so it ran 12px into the padding at each end. */
    .sgfb {
        padding: 20px;
    }

    /* the actions stack below 860px, so the bar is taller — 156px of cover
       plus the same 26px of error line */
    .sgfb__panel {
        padding: 34px 22px 28px;
        scroll-padding-bottom: 182px;
    }

    .sgfb__form {
        grid-template-columns: 1fr;
    }

    /* the bleed has to match the panel's padding, or the bar's backdrop stops
       short of the edge and a strip of form shows through beside it */
    .sgfb__actions {
        margin: 8px -22px -28px;
        padding: 16px 22px 28px;
        bottom: -28px;
    }

    .sgfb__actions .mrn-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .sgfb__head h3 {
        font-size: 25px;
    }

    /* three type cards across 375px is 108px each, and "Customers" alone is
       82px of that before its hint line — they stack, and the icon moves
       beside the label so a stacked card is a row rather than a third screen
       of vertical travel */
    .sgfb-types__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Icon left, label over hint on the right. A flat flex row puts the
       label and the hint side by side, and "Owners & buyers" is the one hint
       long enough to wrap there — which made the Customers card taller than
       the two above it. A 2x2 grid with the icon spanning both rows keeps
       all three the same height whatever the hint says. */
    .sgfb-type__box {
        display: grid;
        grid-template-columns: 40px 1fr;
        align-items: center;
        column-gap: 14px;
        text-align: left;
        padding: 12px 46px 12px 12px;
    }

    .sgfb-type__ico {
        grid-row: 1 / 3;
        margin: 0;
        width: 40px;
        height: 40px;
    }

    .sgfb-type__box b {
        grid-column: 2;
        align-self: end;
    }

    .sgfb-type__box i {
        grid-column: 2;
        align-self: start;
        margin-top: 2px;
    }

    .sgfb-type__tick {
        top: 50%;
        right: 12px;
        margin-top: -10px;
    }

    /* a 150px pill parked over the content is in the way on a phone, so the
       label goes and the control returns to a disc — but a bigger one than
       the 46px it used to be, and still wearing the halo, because on touch
       that ring is the only thing left doing the work the label does on
       desktop */
    .sgfb-launch {
        right: 20px;
        bottom: 74px;
        height: 54px;
    }

    .sgfb-launch__ico {
        width: 50px;
        height: 50px;
    }

    .sgfb-launch__ico svg {
        width: 25px;
        height: 25px;
    }

    /* clipped, not display:none — display:none would also strip the word
       from the button's accessible name and leave a screen reader on a
       phone announcing an unlabelled button */
    .sgfb-launch__txt {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}


/* --- the widget under prefers-reduced-motion ------------------------- */

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

    /* The dialog still FADES — an element that appears with no transition at
       all reads as a rendering glitch, and a cross-fade is not the vestibular
       case the preference is asking about. What goes is the travel: the panel
       no longer rises, the launcher no longer lifts, the close button no
       longer spins, and the type cards no longer move under the pointer. */
    .sgfb__panel,
    .sgfb.is-open .sgfb__panel {
        transform: none !important;
        transition: none !important;
    }

    .sgfb-launch,
    .sgfb-launch:hover,
    .sgfb-launch:focus-visible,
    .sgfb-launch__ico svg,
    .sgfb-launch:hover .sgfb-launch__ico svg,
    .sgfb__close,
    .sgfb__close:hover,
    .sgfb-type__box,
    .sgfb-type:hover .sgfb-type__box,
    .sgfb-type__ico,
    .sgfb-err {
        transform: none !important;
        transition: none !important;
    }

    /* the tick is the checked state, so it may not be transformed away —
       restate it as a plain show/hide */
    .sgfb-type__tick {
        transition: none !important;
        transform: none !important;
    }

    /* The halo stops looping, but it does NOT disappear. It is the launcher's
       emphasis, and on a phone it is the only emphasis there is — dropping it
       under this preference would quietly hand reduced-motion visitors the
       unfindable button the redesign set out to fix. Freeze it at the ring it
       starts from and let it hold there. */
    .sgfb-launch::before {
        animation: none !important;
        box-shadow: 0 0 0 4px rgba(255, 173, 24, .34) !important;
    }
}

/* ==========================================================================
   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) {
    .sgfb-field input,
    .sgfb-field textarea,
    .sgfb-field select {
        font-size: 16px;
    }
}