/* ============================================================
   OBRS — Public landing page
   Loaded only by Home/Index via @section Head, so none of this
   weighs on the signed-in app.

   Photography note: every photographic layer sits ABOVE a brand
   gradient and BELOW a scrim.  A missing or slow image therefore
   degrades to a finished-looking brand-blue panel rather than to
   unreadable text on white — the page is shippable with no photos
   at all, and the photos are an upgrade.

   Colours follow Sierra Leone's flag (obrs.css :root): blue primary,
   green secondary, white surfaces, orange accent.  The page alternates
   white and deep-navy bands for contrast.  Everything below uses
   system fonts and CSS only; nothing is fetched from the internet.

   MOTION (2026-09-25) — landing page only, driven by js/landing.js:
   · load: the hero photo drifts in (slow zoom), the hero copy rises
     in sequence (.lp-load), the example record's UBI types itself;
   · scroll: [data-reveal] elements fade and rise into view, staggered
     inside [data-reveal-group]; counters count up; the trust photo
     parallaxes; a flag-coloured progress bar fills along the top.
   Every animated element ENDS on `transform: none` (or animates an
   element with no children), so no stacking context outlives the
   animation to trap a Bootstrap overlay (CLAUDE.md stacking rule).
   All of it is keyed on html.lp-js, which is only set when the
   visitor has NOT asked for reduced motion — and a fail-safe removes
   it if landing.js never runs, so content can never stay hidden.
   ============================================================ */

.landing {
    --lp-navy:      #081b2e;   /* dark bands: white 17.41:1 */
    --lp-navy-2:    #0b2440;   /* second dark band, a shade lighter so the two read apart: white 15.66:1 */
    --lp-ink:       #0a1f33;   /* headings on white: 16.71:1 */
    --lp-body:      #374151;   /* body on white: 10.31:1 */
    --lp-muted:     #4b5563;   /* small print on white: 7.56:1 */
    --lp-on-dark:   rgba(255,255,255,.78);   /* body on the bands: 10.87 / 9.97:1, 7.18:1 under the strongest glow */
    --lp-ease:      cubic-bezier(.2, .7, .2, 1);
}

/* ── Shared section rhythm ──────────────────────────────────── */
.landing section { scroll-margin-top: calc(var(--obrs-topbar-height) + 1rem); }

.landing-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    font-family:    var(--obrs-font-mono);
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--obrs-primary-dark);          /* 6.20:1 on primary-light */
    background:     var(--obrs-primary-light);
    border:         1px solid rgba(var(--obrs-primary-rgb), .25);
    border-radius:  6px;
    padding:        .32rem .72rem;
    margin-bottom:  1rem;
}
.landing-eyebrow::before {
    content:       "";
    width:         6px;
    height:        6px;
    border-radius: 1px;
    background:    var(--obrs-secondary);
}

.landing-h2 {
    color:          var(--lp-ink);
    font-weight:    800;
    letter-spacing: -.03em;
    line-height:    1.08;
    font-size:      clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    margin-bottom:  .8rem;
    text-wrap:      balance;
}

.landing-lead {
    color:     var(--lp-body);
    font-size: clamp(.98rem, .92rem + .25vw, 1.1rem);
    line-height: 1.6;
    max-width: 60ch;
}

/* Blue-to-green highlight for the one phrase that matters in a heading.  Falls back to plain
   brand blue (white on dark) where background-clip:text is unsupported, so it can never render
   as invisible text. */
.lp-grad { color: var(--obrs-primary); }
.landing-dark .lp-grad,
.landing-hero .lp-grad { color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lp-grad {
        background: linear-gradient(90deg, var(--obrs-primary) 0%, var(--obrs-secondary-text) 100%);
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
    }
    /* On dark: light blue to light green — #8fcdfa 10.18 / 9.16:1 and #86e8a6 11.69 / 10.52:1 on
       the two bands; over the hero with a pure-white photo worst case, 5.27:1 at the lowest (phone). */
    .landing-dark .lp-grad,
    .landing-hero .lp-grad {
        background-image: linear-gradient(90deg, #8fcdfa 0%, #86e8a6 100%);
        color: transparent;
    }
}

/* Light background for the optional "Popular services" section. */
.landing-tint {
    --lp-surface: #f3f7fb;
    background-color: #f3f7fb;
    background-image:
        linear-gradient(rgba(var(--obrs-primary-rgb), .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--obrs-primary-rgb), .05) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* ══ LIGHT-SECTION TEXTURE ═══════════════════════════════════
   Background detail for the white sections, so they carry as much
   depth as the navy bands between them:
   · the section itself: a dot grid that clears behind the content
     (a surface-coloured vignette over it) and soft brand glows in two
     corners;
   · ::before — concentric "signal" rings centred on a corner, slowly
     turning so the dashed rings and their nodes orbit;
   · ::after  — a small network of linked nodes in the opposite corner.
   The two shapes are SVG masks filled with the palette tokens, so they
   follow a palette change.  Content contrast is untouched: at their
   strongest the decorations tint white by under 4%, and the vignette
   keeps them out from behind the text.
   `isolation` makes each section a stacking context so the shapes sit
   behind the content at z-index -1; none of these sections holds a
   dropdown, modal or tooltip (checked, including the featured-services
   partial). */
.landing-texture {
    --lp-surface: #fff;
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    background-color: var(--lp-surface);
    background-image:
        radial-gradient(560px 340px at 0% 0%, rgba(var(--obrs-primary-rgb), .09), transparent 70%),
        radial-gradient(ellipse 58% 52% at 50% 45%, var(--lp-surface) 32%, transparent 100%),
        radial-gradient(rgba(var(--obrs-primary-rgb), .28) 1.1px, transparent 1.6px);
    background-image:   /* adds a flag-green glow where color-mix is supported */
        radial-gradient(560px 340px at 0% 0%, rgba(var(--obrs-primary-rgb), .09), transparent 70%),
        radial-gradient(600px 360px at 100% 100%, color-mix(in srgb, var(--obrs-secondary) 10%, transparent), transparent 70%),
        radial-gradient(ellipse 58% 52% at 50% 45%, var(--lp-surface) 32%, transparent 100%),
        radial-gradient(rgba(var(--obrs-primary-rgb), .28) 1.1px, transparent 1.6px);
    background-size: auto, auto, auto, 22px 22px;
}

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .landing-texture::before,
    .landing-texture::after {
        content:  "";
        position: absolute;
        z-index:  -1;
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
    }
    /* Rings: a full circle whose centre sits on the section's top-right corner. */
    .landing-texture::before {
        width:  1120px;
        height: 1120px;
        top:    -560px;
        right:  -560px;
        background: var(--obrs-primary);
        opacity: .3;
        -webkit-mask-image: var(--lp-rings);
                mask-image: var(--lp-rings);
    }
    /* Network: bottom-left. */
    .landing-texture::after {
        width:  420px;
        height: 300px;
        left:   -10px;
        bottom: -14px;
        background: var(--obrs-secondary-text);
        opacity: .32;
        -webkit-mask-image: var(--lp-network);
                mask-image: var(--lp-network);
    }
    /* Mirrored placement, so consecutive light sections don't repeat the same corners. */
    .landing-texture-alt::before { top: auto; right: auto; bottom: -560px; left: -560px; }
    .landing-texture-alt::after  { left: auto; bottom: auto; right: -10px; top: -14px; transform: scale(-1, -1); }

    @media (max-width: 767.98px) {
        .landing-texture::before { width: 720px; height: 720px; top: -360px; right: -360px; }
        .landing-texture-alt::before { top: auto; right: auto; bottom: -360px; left: -360px; }
        .landing-texture::after  { width: 280px; height: 200px; }
    }
}
.lp-js .landing-texture::before { animation: lp-orbit 140s linear infinite; }
@keyframes lp-orbit { to { transform: rotate(360deg); } }

.landing {
    --lp-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='600' cy='600' r='110'/%3E%3Ccircle cx='600' cy='600' r='190' stroke-opacity='.85'/%3E%3Ccircle cx='600' cy='600' r='270' stroke-opacity='.7' stroke-dasharray='6 10'/%3E%3Ccircle cx='600' cy='600' r='350' stroke-opacity='.55'/%3E%3Ccircle cx='600' cy='600' r='430' stroke-opacity='.4' stroke-dasharray='2 10'/%3E%3Ccircle cx='600' cy='600' r='510' stroke-opacity='.25'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='496.6' cy='562.4' r='5'/%3E%3Ccircle cx='465.6' cy='734.4' r='5'/%3E%3Ccircle cx='745.5' cy='477.9' r='4.5'/%3E%3Ccircle cx='341.8' cy='678.9' r='5.5'/%3E%3Ccircle cx='507.7' cy='346.3' r='4.5'/%3E%3Ccircle cx='399.2' cy='886.7' r='4.5'/%3E%3Ccircle cx='928.9' cy='719.7' r='4.5'/%3E%3Ccircle cx='278' cy='885' r='4'/%3E%3Ccircle cx='747' cy='195.8' r='4'/%3E%3Ccircle cx='425.6' cy='1079.2' r='4'/%3E%3C/g%3E%3Cg stroke-opacity='.6'%3E%3Ccircle cx='341.8' cy='678.9' r='12'/%3E%3Ccircle cx='399.2' cy='886.7' r='11'/%3E%3C/g%3E%3C/svg%3E");
    --lp-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath stroke-opacity='.7' d='M30 250L110 190L60 120M110 190L190 232L236 140L160 64L60 120M236 140L334 98M190 232L300 204L392 168L334 98L300 204M160 64L250 30L334 98'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='30' cy='250' r='4'/%3E%3Ccircle cx='110' cy='190' r='5'/%3E%3Ccircle cx='60' cy='120' r='4'/%3E%3Ccircle cx='190' cy='232' r='4'/%3E%3Ccircle cx='236' cy='140' r='5.5'/%3E%3Ccircle cx='160' cy='64' r='4'/%3E%3Ccircle cx='300' cy='204' r='4'/%3E%3Ccircle cx='334' cy='98' r='4.5'/%3E%3Ccircle cx='392' cy='168' r='5'/%3E%3Ccircle cx='250' cy='30' r='3.5'/%3E%3C/g%3E%3Cg stroke-opacity='.55'%3E%3Ccircle cx='110' cy='190' r='11'/%3E%3Ccircle cx='236' cy='140' r='13'/%3E%3Ccircle cx='392' cy='168' r='11'/%3E%3C/g%3E%3C/svg%3E");
}

/* ══ DARK BANDS ══════════════════════════════════════════════ */

/* Deep navy with two soft glows (flag blue top-left, flag green bottom-right) and a faint grid.
   The glows are background layers, not elements — nothing here creates a stacking context. */
.landing-dark {
    position: relative;
    /* The sideways reveal variants start 44px off-axis; between 992 and 1399px that is wider than
       the container's side margin, and the page could pan sideways until they arrived.  `clip`
       (not `hidden`) trims only the horizontal axis and creates no scroll container. */
    overflow-x: clip;
    color:    #fff;
    background-color: var(--lp-navy);
    background-image:
        radial-gradient(900px 420px at 8% 0%,   rgba(var(--obrs-primary-rgb),.42), transparent 62%),
        radial-gradient(760px 380px at 100% 100%, rgba(var(--obrs-secondary-rgb),.18), transparent 60%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: auto, auto, 36px 36px, 36px 36px;
}
.landing-dark-alt {
    background-color: var(--lp-navy-2);
    background-image:
        radial-gradient(860px 420px at 100% 0%, rgba(var(--obrs-primary-rgb),.36), transparent 62%),
        radial-gradient(700px 360px at 0% 100%, rgba(var(--obrs-secondary-rgb),.14), transparent 60%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
.landing-dark .landing-h2    { color: #fff; }
.landing-dark .landing-lead  { color: var(--lp-on-dark); }
.landing-dark .landing-eyebrow {
    color:        #d4e9fb;                               /* 11.59:1 on the navy */
    background:   rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}

/* ══ HERO ════════════════════════════════════════════════════ */

.landing-hero { position: relative; background: var(--lp-navy); overflow: hidden; }

.landing-hero-slide {
    position:    relative;
    display:     flex;
    align-items: center;
    min-height:  clamp(520px, 72vh, 700px);
}

/* The photograph on its own layer, so it can drift in on load without moving the copy.
   Photo · artwork · brand fallback; single values apply to every layer, so the photo slot can
   carry one url() or several (one per file extension). */
.landing-hero-media {
    position: absolute;
    inset:    0;
    background-image:
        var(--slide-photo, none),
        var(--slide-art, none),
        linear-gradient(135deg, var(--obrs-primary) 0%, var(--obrs-primary-dark) 100%);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}
@media (max-width: 575.98px) { .landing-hero-media { background-position: 60% center; } }

/* Readability scrim — deeper than before for contrast.  Directional: dark behind the copy on
   the left, clearing to the right so the coastline shows; a vertical floor keeps a bright sky
   from washing out the badge.  Navy-black (luminance .0067), measured against a pure-white
   photo worst case at the copy's positions. */
.landing-hero-scrim {
    position: absolute;
    inset:    0;
    background-image:
        linear-gradient(100deg, rgba(3,20,40,.92) 0%, rgba(3,20,40,.80) 40%, rgba(3,20,40,.46) 70%, rgba(3,20,40,.36) 100%),
        linear-gradient(180deg, rgba(3,20,40,.30) 0%, rgba(3,20,40,.10) 45%, rgba(3,20,40,.55) 100%);
}
@media (max-width: 991.98px) {
    /* Stacked layout: the copy spans the full width, so the scrim must too. */
    .landing-hero-scrim {
        background-image:
            linear-gradient(180deg, rgba(3,20,40,.62) 0%, rgba(3,20,40,.78) 45%, rgba(3,20,40,.92) 100%);
    }
}

/* A faint dot grid over the left of the photo, fading out before the picture's subject.  Pure
   decoration: an empty, pointer-safe layer.  `mask-image` creates a stacking context, which is
   harmless here — the element has no children, least of all a Bootstrap overlay. */
.landing-hero-grid {
    position: absolute;
    inset:    0;
    background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px);
    background-size:  22px 22px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
            mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
    pointer-events: none;
}
/* Above the photo layers.  Positioned + z-indexed only so paint order is explicit; nothing inside
   is a dropdown, modal or tooltip, so the stacking context this creates traps nothing. */
.landing-hero-slide > .container { position: relative; z-index: 1; }

.landing-hero-copy { max-width: 46rem; padding: 3.5rem 0 4.5rem; }

.landing-hero-flag {
    display:       inline-flex;
    align-items:   center;
    gap:           .55rem;
    font-family:   var(--obrs-font-mono);
    font-size:     .74rem;
    font-weight:   600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:         #eaf4ff;
    /* DARK translucent, not the more obvious light one.  A white wash lightens the very
       backdrop this small text needs contrast against. */
    background:    rgba(3,20,40,.55);
    border:        1px solid rgba(255,255,255,.26);
    border-radius: 6px;
    padding:       .38rem .8rem;
    margin-bottom: 1.2rem;
}

/* The "online" indicator: flag green, breathing by opacity only. */
.landing-live-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--obrs-secondary);
    box-shadow:    0 0 0 3px rgba(var(--obrs-secondary-rgb),.25);
    animation:     landing-live 2.4s ease-in-out infinite;
}
@keyframes landing-live {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.landing-hero h1 {
    color:          #fff;
    font-weight:    800;
    letter-spacing: -.035em;
    line-height:    1.04;
    font-size:      clamp(2.3rem, 1.4rem + 3.8vw, 4.1rem);
    margin-bottom:  1rem;
    text-wrap:      balance;
}

.landing-hero p.landing-hero-sub {
    color:       rgba(255,255,255,.92);
    font-size:   clamp(1rem, .95rem + .45vw, 1.2rem);
    line-height: 1.55;
    max-width:   36rem;
    margin-bottom: 1.75rem;
}

.landing-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 400px) {
    .landing-hero-actions { flex-direction: column; align-items: stretch; }
    .landing-hero-actions .btn { width: 100%; }
}

/* Three facts as a monospace readout, divided by hairlines. */
.landing-hero-stats {
    display:    grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:        0;
    margin:     2.25rem 0 0;
    max-width:  36rem;
    border-top: 1px solid rgba(255,255,255,.2);
}
.landing-hero-stats > div          { padding: .9rem 1rem 0 0; }
.landing-hero-stats > div + div    { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.2); }
.landing-hero-stats dt {
    font-family:    var(--obrs-font-mono);
    font-size:      1.35rem;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -.01em;
    margin-bottom:  .15rem;
    font-variant-numeric: tabular-nums;     /* a counting number doesn't jitter the layout */
}
.landing-hero-stats dd {
    font-size:   .8rem;
    line-height: 1.35;
    color:       rgba(255,255,255,.88);
    margin:      0;
}
@media (max-width: 575.98px) {
    .landing-hero-stats { grid-template-columns: 1fr; }
    .landing-hero-stats > div,
    .landing-hero-stats > div + div {
        padding: .65rem 0;
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }
}

/* ── The example record, on a phone ─────────────────────────────
   A CSS-only handset (no image to license or fetch) showing the OBRS app with the business record
   card on screen, and two notifications popping in beside it.  Everything inside is aria-hidden
   and described by the figure's caption.  The transforms and filters here make stacking contexts
   on the device and its parts — harmless: none of them holds a dropdown, modal or tooltip. */
.landing-device {
    position:     relative;
    width:        292px;
    margin:       2.5rem 1.5rem 4.75rem auto;  /* bottom clears the quick-access cards that overlap the hero */
}
@media (max-width: 1399.98px) { .landing-device { margin-right: .25rem; } }
/* Brand glow behind the handset. */
.landing-device::before {
    content:  "";
    position: absolute;
    inset:    8% -18% 4% -18%;
    background: radial-gradient(closest-side, rgba(var(--obrs-primary-rgb), .55), transparent 75%);
    filter:   blur(24px);
    pointer-events: none;
}
.landing-device-float { position: relative; }

.landing-phone {
    position:      relative;
    padding:       10px;
    border-radius: 46px;
    background:    linear-gradient(150deg, #3a4452 0%, #10161e 38%, #0a0f15 62%, #2b3440 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255,255,255,.16),     /* polished rim */
        inset 0 0 0 4px   #05080c,
        0 0 0 1px rgba(0,0,0,.55),
        0 44px 90px rgba(0,0,0,.55),
        0 18px 36px rgba(0,0,0,.35);
    transform:     perspective(1600px) rotateY(-9deg) rotateX(3deg);
    transition:    transform .7s var(--lp-ease);
}
.landing-device:hover .landing-phone { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }
/* Side buttons. */
.landing-phone::before,
.landing-phone::after {
    content:  "";
    position: absolute;
    width:    3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #1b222b, #3a4452);
}
.landing-phone::before { right: -3px; top: 150px; height: 70px; }                      /* power */
.landing-phone::after  { left:  -3px; top: 120px; height: 44px;
                         box-shadow: 0 60px 0 #2b3440; }                                 /* volume × 2 */

.landing-phone-screen {
    position:       relative;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    min-height:     560px;
    padding:        10px 14px 8px;
    border-radius:  37px;
    color:          #e8f1fb;
    background:
        radial-gradient(120% 55% at 0% 0%, rgba(var(--obrs-primary-rgb), .45), transparent 70%),
        linear-gradient(180deg, #0b2440 0%, var(--lp-navy) 55%, #051222 100%);
}

.landing-phone-status {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          26px;
    padding:         0 8px;
    font-size:       .72rem;
    font-weight:     700;
    color:           #fff;
}
.landing-phone-island {
    width:  86px; height: 24px;
    border-radius: 14px;
    background: #000;
    box-shadow: inset -18px 0 0 -9px #0d1a2a;                 /* the camera lens */
}
.landing-phone-signal { display: inline-flex; gap: 4px; font-size: .72rem; }

.landing-phone-appbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin:          14px 4px 12px;
}
.landing-phone-logo { height: 24px; width: auto; padding: 2px 3px; background: #fff; border-radius: 6px; }
.landing-phone-bell {
    position: relative;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    font-size: .85rem;
}
.landing-phone-bell::after {                                     /* unread badge */
    content: "";
    position: absolute;
    top: 6px; right: 7px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--obrs-accent);
    box-shadow: 0 0 0 2px var(--lp-navy);
}
.landing-phone-kicker { margin: 0 4px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #9fbcd8; }
.landing-phone-title  { margin: 2px 4px 12px; font-size: 1.1rem; font-weight: 800; color: #fff; }

.landing-phone-actions {
    display:  grid;
    grid-template-columns: 1fr 1fr;
    gap:      8px;
    margin-top: 10px;
}
.landing-phone-actions span {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         6px;
    padding:     9px 0;
    border-radius: 12px;
    font-size:   .74rem;
    font-weight: 700;
    color:       #fff;
    background:  rgba(255,255,255,.08);
    border:      1px solid rgba(255,255,255,.1);
}
.landing-phone-actions span:first-child { background: var(--obrs-primary); border-color: transparent; }

.landing-phone-tabs {
    display:         flex;
    justify-content: space-around;
    margin:          auto -14px 0;               /* auto top: pinned to the bottom of the screen */
    padding:         12px 0 6px;
    border-top:      1px solid rgba(255,255,255,.08);
    font-size:       1rem;
    color:           rgba(255,255,255,.45);
}
.landing-phone-tabs .is-active { color: #8fcdfa; }
.landing-phone-home {
    display: block;
    width: 110px; height: 4px;
    margin: 6px auto 0;
    border-radius: 3px;
    background: rgba(255,255,255,.55);
}

/* Notifications beside the phone.  White cards, dark text: #0a1f33 on white 16.71:1. */
.landing-device-chip {
    position:      absolute;
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    padding:       .6rem .85rem .6rem .6rem;
    border-radius: 14px;
    background:    #fff;
    box-shadow:    0 18px 40px rgba(0,0,0,.35);
    white-space:   nowrap;
    z-index:       1;
}
.landing-device-chip strong { display: block; font-size: .8rem; color: var(--lp-ink); line-height: 1.2; }
.landing-device-chip small  { display: block; font-size: .7rem; color: var(--lp-muted); }
.landing-device-chip-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: var(--obrs-primary);                 /* white icon 4.97:1 */
}
.landing-device-chip-icon.is-ok { background: var(--obrs-secondary-text); }   /* 5.02:1 */
/* Both sit in the gap left of the phone and overlap only its frame (the screen's content starts
   24px in), so neither hides anything on the screen.  Below 1200px that gap is too narrow to hold
   them without covering the headline, so they are left out. */
.landing-device-chip-a { top: 19%;    right: calc(100% - 16px); }
.landing-device-chip-b { bottom: 27%; right: calc(100% - 22px); }
@media (max-width: 1199.98px) { .landing-device-chip { display: none; } }

/* The example record card, now the app's content on the phone screen.  Glass on navy, a flag
   stripe across the top, monospace values. */
.landing-cert-card {
    position:      relative;
    overflow:      hidden;
    color:         #e8f1fb;
    background:    rgba(255,255,255,.06);
    border:        1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding:       1rem .95rem .9rem;
}
.landing-phone .landing-cert-head   { font-size: .68rem; padding-bottom: .6rem; }
.landing-phone .landing-cert-rows > div { padding: .45rem 0; }
.landing-phone .landing-cert-rows dt { font-size: .64rem; }
.landing-phone .landing-cert-rows dd { font-size: .78rem; }
.landing-phone .landing-cert-verify { margin-top: .75rem; padding: .6rem .65rem; font-size: .68rem; gap: .6rem; }
.landing-phone .landing-cert-verify i { font-size: 1.7rem; }
.landing-phone .landing-cert-verify strong { font-size: .76rem; }
.landing-cert-flag {
    position: absolute;
    inset:    0 0 auto 0;
    height:   4px;
    background: linear-gradient(90deg,
                    var(--obrs-secondary) 0 33.34%,
                    #fff 33.34% 66.67%,
                    var(--obrs-primary) 66.67% 100%);
}
/* A slow diagonal sheen sweeping across the card.  It animates only its own empty layer. */
.landing-cert-sheen {
    position: absolute;
    inset:    0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%);
    background-size: 250% 100%;
    background-position: 150% 0;
    pointer-events: none;
}
.lp-js .landing-cert-sheen { animation: lp-sheen 6s ease-in-out 1.6s infinite; }
@keyframes lp-sheen {
    0%       { background-position: 150% 0; }
    40%, 100% { background-position: -60% 0; }
}
.landing-cert-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    font-size:       .8rem;
    font-weight:     600;
    letter-spacing:  .04em;
    text-transform:  uppercase;
    color:           #b8d4ef;
    padding-bottom:  .8rem;
    margin-bottom:   .35rem;
    border-bottom:   1px dashed rgba(255,255,255,.18);
}
.landing-cert-example {
    font-family:   var(--obrs-font-mono);
    font-size:     .66rem;
    letter-spacing: .1em;
    color:         #1a1205;
    background:    var(--obrs-accent);                 /* 8.10:1 dark text on the orange */
    border-radius: 4px;
    padding:       .12rem .45rem;
}
.landing-cert-rows { margin: 0; }
.landing-cert-rows > div {
    display:     flex;
    justify-content: space-between;
    gap:         1rem;
    padding:     .55rem 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.landing-cert-rows dt {
    font-family: var(--obrs-font-mono);
    font-size:   .74rem;
    font-weight: 500;
    color:       #9fbcd8;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.landing-cert-rows dd {
    font-family: var(--obrs-font-mono);
    font-size:   .88rem;
    color:       #fff;
    margin:      0;
    text-align:  right;
    min-height:  1.3em;
}
/* Caret while the UBI types itself (landing.js). */
.landing-cert-rows dd.is-typing::after {
    content:     "";
    display:     inline-block;
    width:       .55ch;
    height:      1em;
    margin-left: 2px;
    vertical-align: -.12em;
    background:  #8fcdfa;
    animation:   lp-caret .8s steps(1) infinite;
}
@keyframes lp-caret { 50% { opacity: 0; } }
.landing-cert-ok { color: #7ee2a0; }
.landing-cert-verify {
    display:     flex;
    align-items: center;
    gap:         .85rem;
    margin-top:  1rem;
    padding:     .75rem .85rem;
    border-radius: var(--radius-md);
    background:  rgba(255,255,255,.06);
    border:      1px solid rgba(255,255,255,.10);
    font-size:   .78rem;
    line-height: 1.4;
    color:       #c9dcef;
}
.landing-cert-verify i      { font-size: 2.1rem; color: #fff; line-height: 1; }
.landing-cert-verify strong { color: #fff; font-size: .85rem; }

/* NOT scoped to .landing-hero.  These two classes are the page's on-dark button pair and the
   dark bands and closing CTA use them as well.  landing.css only loads on the landing page, so
   an unscoped class here cannot leak into the rest of the app. */
.btn-hero-primary {
    background:  #fff;
    color:       var(--lp-ink);
    border:      none;
    font-weight: 700;
    box-shadow:  0 8px 24px rgba(0,0,0,.30);
    transition:  background-color .2s var(--lp-ease), box-shadow .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.btn-hero-primary:hover,
.btn-hero-primary:focus-visible {
    background: #eef6fd;
    color:      var(--lp-ink);
    transform:  translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,.36);
}
/* The keyboard focus ring (CD-601).  Bootstrap draws .btn focus with box-shadow, which the
   lift shadow above replaces, so focus is drawn with an outline instead — white with a gap, as
   both hero buttons sit on dark bands. */
.btn-hero-primary:focus-visible,
.btn-hero-ghost:focus-visible {
    outline:        3px solid #fff;
    outline-offset: 3px;
}
.btn-hero-primary .bi-arrow-right { display: inline-block; transition: transform .2s var(--lp-ease); }
.btn-hero-primary:hover .bi-arrow-right { transform: translateX(4px); }

.btn-hero-ghost {
    background:  rgba(255,255,255,.08);
    color:       #fff;
    border:      1.5px solid rgba(255,255,255,.7);
    font-weight: 600;
}
.btn-hero-ghost:hover,
.btn-hero-ghost:focus-visible {
    background: #fff;
    color:      var(--lp-ink);
    border-color: #fff;
}

/* ══ QUICK ACCESS ════════════════════════════════════════════ */

/* Lifted over the hero's lower edge so the first action is visible without scrolling. */
.landing-quick { --lp-overlap: 3.25rem; margin-top: calc(-1 * var(--lp-overlap)); padding-bottom: 3rem; position: relative; z-index: 2; }
@media (max-width: 767.98px) { .landing-quick { --lp-overlap: 2rem; } }
/* Texture for the white strip under the cards: a dot grid fading out downwards, with a blue glow
   rising from the hero's edge.  Starts below the overlap so it never paints over the photo.  The
   section's z-index already makes it a stacking context (no overlays inside), so -1 sits behind
   the cards. */
.landing-quick::before {
    content:  "";
    position: absolute;
    inset:    var(--lp-overlap) 0 0 0;
    z-index:  -1;
    pointer-events: none;
    background-image:
        radial-gradient(70% 90% at 50% 0%, rgba(var(--obrs-primary-rgb), .10), transparent 70%),
        radial-gradient(rgba(var(--obrs-primary-rgb), .28) 1.1px, transparent 1.6px);
    background-size: auto, 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
}

.landing-quick-card {
    position:        relative;
    display:         block;
    height:          100%;
    background:      #fff;
    border:          1px solid rgba(8,27,46,.08);
    border-top:      3px solid var(--lp-accent, var(--obrs-primary));
    border-radius:   var(--radius-lg);
    padding:         1.4rem 1.25rem;
    text-decoration: none;
    box-shadow:      0 12px 32px rgba(8,27,46,.14);
    transition:      transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease);
}
.landing-quick-card:hover,
.landing-quick-card:focus-visible {
    transform:  translateY(-4px);
    box-shadow: 0 22px 48px rgba(8,27,46,.22);
}

.landing-quick-icon {
    width:  44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    font-size:  1.2rem;
    margin-bottom: .8rem;
    color: #fff;
    background: var(--lp-accent, var(--obrs-primary));
    transition: transform .25s var(--lp-ease);
}
.landing-quick-card:hover .landing-quick-icon { transform: scale(1.08) rotate(-4deg); }
/* Each action its own hue from the flag palette, all tokens (CD-616).  White icon on each tile:
   4.97, 5.02, 4.54 and 7.10:1 — the orange tile uses --obrs-accent-dark, since white on the bright
   accent is 2.59:1; the fourth is the dark brand blue (it was an off-palette maroon). */
.landing-quick .col-6:nth-of-type(1) .landing-quick-card { --lp-accent: var(--obrs-primary); }
.landing-quick .col-6:nth-of-type(2) .landing-quick-card { --lp-accent: var(--obrs-secondary-text); }
.landing-quick .col-6:nth-of-type(3) .landing-quick-card { --lp-accent: var(--obrs-accent-dark); }
.landing-quick .col-6:nth-of-type(4) .landing-quick-card { --lp-accent: var(--obrs-primary-dark); }
.landing-quick-card h3 { font-size: 1.02rem; font-weight: 800; color: var(--lp-ink); margin-bottom: .25rem; }
.landing-quick-card p  { font-size: .85rem; color: var(--lp-muted); margin-bottom: 0; line-height: 1.45; }

/* ══ STEPS (on the dark band) ════════════════════════════════ */

.landing-step {
    position:      relative;
    height:        100%;
    padding:       1.4rem 1.35rem 1.4rem 4.6rem;
    border-radius: var(--radius-lg);
    background:    rgba(255,255,255,.05);
    border:        1px solid rgba(255,255,255,.12);
    transition:    background-color .25s var(--lp-ease), border-color .25s var(--lp-ease), transform .25s var(--lp-ease);
}
.landing-step:hover {
    background:   rgba(255,255,255,.09);
    border-color: rgba(143,205,250,.45);
    transform:    translateY(-3px);
}
/* 01–04 in monospace on a blue tile: white on --obrs-primary is 4.97:1. */
.landing-step-num {
    position: absolute; left: 1.25rem; top: 1.35rem;
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-family: var(--obrs-font-mono);
    font-weight: 700; font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--obrs-primary), var(--obrs-primary-dark));
    box-shadow: 0 6px 18px rgba(var(--obrs-primary-rgb),.45);
}
.landing-step h3 { font-size: 1.04rem; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.landing-step p  { font-size: .88rem; color: var(--lp-on-dark); margin-bottom: 0; line-height: 1.55; }

/* ══ SERVICE GRID ════════════════════════════════════════════ */


.landing-service {
    position:      relative;
    overflow:      hidden;
    height:        100%;
    background:    #fff;
    border:        1px solid #dfe5ec;
    border-radius: var(--radius-lg);
    padding:       1.6rem;
    transition:    transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), border-color .25s var(--lp-ease);
}
/* A flag-gradient bar that draws itself across the top on hover. */
.landing-service::before {
    content:  "";
    position: absolute;
    inset:    0 0 auto 0;
    height:   3px;
    background: linear-gradient(90deg, var(--obrs-primary), var(--obrs-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--lp-ease);
}
.landing-service:hover {
    transform:    translateY(-4px);
    box-shadow:   0 20px 44px rgba(8,27,46,.14);
    border-color: transparent;
}
.landing-service:hover::before { transform: scaleX(1); }

/* Solid icon chips — white on blue 4.97:1, on green 5.02:1. */
.landing-service > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    font-size: 1.3rem;
    color: #fff;
    background: var(--obrs-primary);
    box-shadow: 0 8px 20px rgba(var(--obrs-primary-rgb),.28);
    transition: transform .25s var(--lp-ease);
}
.landing-services .col-lg-4:nth-child(even) .landing-service > i {
    background: var(--obrs-secondary-text);
    box-shadow: 0 8px 20px rgba(21,128,61,.28);
}
.landing-service:hover > i { transform: scale(1.08) rotate(-4deg); }
.landing-service h3 { font-size: 1.05rem; font-weight: 800; color: var(--lp-ink); margin: 1rem 0 .35rem; }
.landing-service p  { font-size: .88rem; color: var(--lp-muted); margin-bottom: 0; line-height: 1.55; }
/* Live catalogue tiles (2026-10-01): the area's real services under its description. */
.landing-service-count {
    display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; vertical-align: middle;
    /* Dark blue text: the brand blue on its own 10% tint is 4.34:1, under AA at this size (CD-616). */
    background: rgba(var(--obrs-primary-rgb), .1); color: var(--obrs-primary-dark);
}
.landing-service-list { list-style: none; padding: 0; margin: .75rem 0 0; font-size: .84rem; color: var(--lp-ink); }
.landing-service-list li { position: relative; padding-left: 1rem; margin-bottom: .25rem; line-height: 1.4; }
.landing-service-list li::before {
    content: ""; position: absolute; left: 0; top: .5em; width: .4rem; height: .4rem;
    border-radius: 50%; background: var(--obrs-secondary);
}
.landing-service-list .landing-service-more { color: var(--lp-muted); font-style: italic; }
.landing-service-list .landing-service-more::before { background: transparent; }

/* ══ TRUST (on the second dark band) ═════════════════════════ */

.landing-benefits li {
    display:     flex;
    gap:         .9rem;
    align-items: flex-start;
    margin-bottom: 1.05rem;
    color:       #fff;
}
.landing-benefits li:last-child { margin-bottom: 0; }
.landing-benefit-icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(143,205,250,.14);
    border: 1px solid rgba(143,205,250,.3);
    color: #8fcdfa;                                    /* 9.16:1 on this band's navy */
    font-size: 1.05rem;
}
.landing-benefit-text { font-size: .86rem; color: var(--lp-on-dark); }

/* ══ IMAGE PANELS (trust + closing CTA) ══════════════════════ */

.landing-panel {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;                     /* clips the photo to the rounded corners */
    min-height: 340px;
    box-shadow: 0 30px 70px rgba(0,0,0,.4);
    background-image:
        linear-gradient(150deg, rgba(3,20,40,.20) 0%, rgba(3,20,40,.45) 100%),
        var(--panel-photo, none),
        var(--panel-art, none),
        linear-gradient(135deg, var(--obrs-primary) 0%, var(--obrs-primary-dark) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* A photographic band with a flat-ish scrim: its two buttons sit on the right, so the scrim
   holds a legible floor across the whole width rather than clearing out (white controls on
   bright building detail once measured 2.4:1). */
.landing-cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, .5rem + 3vw, 3.5rem);
    box-shadow: 0 30px 70px rgba(8,27,46,.28);
    background-image:
        linear-gradient(100deg, rgba(3,20,40,.92) 0%, rgba(3,20,40,.82) 45%, rgba(3,20,40,.68) 100%),
        var(--panel-photo, none),
        var(--panel-art, none),
        var(--obrs-brand-gradient);   /* last-resort fallback if no photo resolves */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* The tricolour along the band's top edge. */
.landing-cta-band::before {
    content:  "";
    position: absolute;
    inset:    0 0 auto 0;
    height:   5px;
    background: linear-gradient(90deg,
                    var(--obrs-secondary) 0 33.34%,
                    #fff 33.34% 66.67%,
                    var(--obrs-primary) 66.67% 100%);
}
.landing-cta-band h2 {
    color: #fff; font-weight: 800; letter-spacing: -.03em;
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
    text-wrap: balance;
}
.landing-cta-band p { color: rgba(255,255,255,.9); max-width: 46ch; }

.landing-cta-eyebrow {
    margin: 1.5rem 0 .5rem;
    font-family: var(--obrs-font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78) !important;
}

.landing-cta-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
    max-width: 52ch;
}
.landing-cta-checklist li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;   /* fixed icon gutter so the text edges align */
    gap: .6rem;
    align-items: start;
    font-size: .875rem;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
}
.landing-cta-checklist i { margin-top: .1rem; color: #8fcdfa; }

/* Grid rather than flex: equal tracks make both buttons as wide as the widest. */
.landing-cta-actions { display: grid; gap: .6rem; }
@media (min-width: 992px) {
    .landing-cta-actions { max-width: 20rem; margin-left: auto; }
}

/* ══ NIB MANDATE STRIP ═══════════════════════════════════════ */

/* Brand gradient panel (the same token as the portal welcome banner): white is 4.97:1 at its
   lightest stop, 7.10:1 at its darkest. */
.landing-nib {
    position:   relative;
    overflow:   hidden;          /* required: the glow disc below is inset past the edges */
    background: var(--obrs-brand-gradient);
}
/* The soft white disc the portal welcome banner carries.  Kept bottom-right, over the panel's
   DARK end, where white text keeps its margin. */
.landing-nib > * { position: relative; z-index: 1; }
.landing-nib::after {
    content: "";
    position: absolute;
    inset: auto -60px -80px auto;
    width: 240px; height: 240px;
    background: rgba(255,255,255,.10);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.landing-nib h2 { color: #fff; }
.landing-nib p  { color: #fff !important; }
.landing-nib-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .95rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--lp-ink);
    font-size: .875rem; font-weight: 700;
    background: #fff;
    border: 1px solid #fff;
    transition: transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.landing-nib-link:hover {
    color: var(--obrs-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
/* Tiles share a row's height, so labels of one and two lines no longer leave uneven boxes. */
.landing-nib-link { height: 100%; }
/* On a phone: two even tiles per row with the icon above the label, no arrow, and the text block
   given room above the grid. */
@media (max-width: 575.98px) {
    .landing-nib .col-lg-4 { margin-bottom: .35rem; }
    .landing-nib-link {
        flex-direction: column; align-items: flex-start; justify-content: center;
        gap: .45rem; padding: .85rem .9rem; min-height: 5.2rem; line-height: 1.25;
    }
    .landing-nib-link > i:first-child { font-size: 1.3rem; color: var(--obrs-primary); }
    .landing-nib-link > .bi-arrow-right { display: none; }
}

/* ══ SCROLL PROGRESS ═════════════════════════════════════════ */

/* Fixed, 3px, pointer-safe, and below the modal backdrop (1080) so it can never sit over a
   dialog.  Hidden until landing.js drives it. */
.lp-progress {
    position:  fixed;
    inset:     0 0 auto 0;
    height:    3px;
    z-index:   1035;
    background: linear-gradient(90deg, var(--obrs-secondary), #fff 50%, var(--obrs-primary));
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
    display:   none;
}
.lp-js .lp-progress { display: block; }

/* ══ MOTION ══════════════════════════════════════════════════ */

/* Load: the hero photo drifts in from a slight zoom.  It animates an element with no children,
   so the lingering identity transform traps nothing. */
@keyframes lp-drift { from { transform: scale(1.12); } to { transform: scale(1); } }
.lp-js .landing-hero-media { animation: lp-drift 14s var(--lp-ease) both; }

/* Load: hero copy rises in sequence (--d set per element).  Ends on transform:none. */
@keyframes lp-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
.lp-js .lp-load { animation: lp-rise .9s var(--lp-ease) var(--d, 0s) both; }

/* The phone floats; its two notifications rise in, then drift out of step with it.  A later
   animation in the list wins while it runs, so the bob takes over once the rise has settled — both
   rest at translateY(0).  Nothing inside either element is an overlay component. */
@keyframes lp-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.lp-js .landing-device-float { animation: lp-bob 7s ease-in-out 1.6s infinite; }
.lp-js .landing-device-chip.lp-load {
    animation:
        lp-rise .8s var(--lp-ease) var(--d, 0s) both,
        lp-bob 6s ease-in-out calc(var(--d, 0s) + 1s) infinite;
}
.lp-js .landing-device-chip-b.lp-load { animation-duration: .8s, 8s; }

/* Scroll: [data-reveal] fades and rises into view; landing.js adds .is-revealed.  Transitions,
   not animations, so the resting state is exactly `transform: none`. */
.lp-js [data-reveal] {
    opacity:    0;
    transform:  translateY(34px);
    transition: opacity .8s var(--lp-ease), transform .8s var(--lp-ease);
    transition-delay: var(--reveal-delay, 0ms);
}
.lp-js [data-reveal="left"]  { transform: translateX(-44px); }
.lp-js [data-reveal="right"] { transform: translateX(44px); }
.lp-js [data-reveal="zoom"]  { transform: scale(.94); }
/* Once the columns stack, a sideways slide pushes the "right" element past the viewport edge and
   lets a phone pan sideways before it reveals.  Stacked, everything simply rises. */
@media (max-width: 991.98px) {
    .lp-js [data-reveal="left"],
    .lp-js [data-reveal="right"] { transform: translateY(34px); }
}
.lp-js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Reduced motion: html.lp-js is never set (see the Head script), so none of the above applies;
   these switch off the remaining ambient motion too. */
@media (prefers-reduced-motion: reduce) {
    .landing-live-dot,
    .landing-cert-sheen,
    .landing-cert-rows dd.is-typing::after,
    .landing-texture::before { animation: none; }
    .landing-phone { transition: none; }
    .landing-quick-card, .landing-service, .landing-step, .landing-nib-link,
    .btn-hero-primary, .landing-quick-icon, .landing-service > i { transition: none !important; }
    .landing-quick-card:hover, .landing-service:hover, .landing-step:hover,
    .landing-nib-link:hover, .btn-hero-primary:hover,
    .landing-quick-card:hover .landing-quick-icon,
    .landing-service:hover > i { transform: none !important; }
}