/* =============================================================
   BLUESTONE — MAINTENANCE & EMERGENCY (page styles)
   (Design preserved — only safety fixes for responsiveness/overflow)
   ============================================================= */
:root {
    --bg: #090f1a;
    --bg-2: #0c1526;
    --panel: #0f1b30;
    --panel-2: #112037;
    --line: #1e2d4b;
    --text: #e7eef9;
    --muted: #a7bad4;
    --accent: #26b1ff;
    --accent-2: #ffb020;
    --good: #2ecc71;
    --warn: #ffd166;
    --bad: #ff5c5c;
    --hero-img: url('../img/maintanence/roof_leak.webp');
    --accent-whatsapp: #25d366;
    --grid-gap: 2rem;

    /* namespaced tokens used by the form */
    --bsmx-bg: #0b1422;
    --bsmx-p0: #0f2030;
    --bsmx-p1: #0b1a2b;
    --bsmx-ln: rgba(255, 255, 255, .08);
    --bsmx-ln2: rgba(255, 255, 255, .14);
    --bsmx-tx: #e8f1fb;
    --bsmx-mu: #9fb2c6;
    --bsmx-ac: #1bb8ff;
    --bsmx-ac2: #1796df;
    --bsmx-ok: #7CF6D3;
    --bsmx-dg: #FF9A3D;
    --bsmx-rd: 14px;
    --bsmx-sh: 0 18px 40px rgba(0, 0, 0, .35);
}

/* ---------- Global safety to prevent sideways scroll (no html/body hack) */
.maint {
    overflow-x: clip;
}

/* blocks horizontal scroll on the page area */
img,
svg,
canvas,
video {
    max-width: 100%;
    height: auto;
}

/* media safety */

/* Container */
.maint {
    color: var(--text);
}

.maint a {
    color: var(--accent);
    text-decoration: none
}

/* Buttons */
.maint .btn {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--accent), #1796df);
    color: #031320;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.maint .btn.whatsappbtn {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--accent-whatsapp), #25d366);
    color: #031320;
    font-weight: 700;
    
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}



.maint .btn:hover {
    transform: translateY(-1px)
}

.maint .btn:active {
    transform: translateY(0)
}

.maint .btn.outline {
    background: transparent;
    color: var(--text);
    border-color: var(--line)
}

.maint .btn.ghost {
    background: transparent;
    color: var(--accent);
    border-color: transparent
}

/* Container (scoped) */
.maint .maint-container {
    width: min(1200px, 92vw);
    margin-inline: auto;
    margin-top: 23px;
}

/* HERO */
.maint .hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(4, 10, 20, .4), rgba(4, 10, 20, .2)), center/cover no-repeat var(--hero-img);
    min-height: clamp(420px, 60vh, 720px);
    padding: clamp(2.2rem, 4vw + 1rem, 5rem) 0 2rem;
    overflow: hidden;
    /* ensures glow/orb never causes bleed */
}

.hero-container {
    width: min(1200px, 92vw);
    margin-inline: auto;
    margin-top: 50px;
}

.maint .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 10, 20, .6), rgba(4, 10, 20, .35)),
        center/cover no-repeat var(--hero-img, url('/img/maintenance/hero.jpg'));
    z-index: 0;
}

.maint .orb {
    position: absolute;
    inset: auto -10% auto auto;
    top: -40px;
    width: 560px;
    height: 560px;
    pointer-events: none;
    filter: blur(40px) saturate(1.2);
    opacity: .35;
    background: radial-gradient(closest-side, rgba(38, 177, 255, .7), rgba(38, 177, 255, 0) 70%),
        radial-gradient(closest-side, rgba(255, 176, 32, .35), rgba(255, 176, 32, 0) 65%);
    mix-blend-mode: screen;
}

.maint .badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #133258, #0b2142);
    border: 1px solid var(--line);
    color: #cfe8ff;
    font-size: .9rem;
    letter-spacing: .4px;
    position: relative;
    z-index: 1
}

.maint .badge .dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 0 6px rgba(255, 176, 32, .1)
}

.maint h1 {
    font-size: clamp(1.6rem, 3.8vw, 3rem);
    line-height: 1.15;
    margin: .9rem 0 .6rem;
    letter-spacing: .2px;
    position: relative;
    z-index: 1
}

.maint .lead {
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    max-width: 62ch;
    position: relative;
    z-index: 1
}

.maint .cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 1.2rem 0;
    position: relative;
    z-index: 1
}

.maint .quick {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .6rem;
    position: relative;
    z-index: 1
}

.maint .quick li {
    list-style: none;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(8, 20, 38, .6);
    color: #c9d6ea;
    font-size: .95rem
}

/* Sections */
.maint section {
    padding: clamp(1.8rem, 4vw, 3rem) 0;
    position: relative
}

.maint .section-title {
    font-size: clamp(1.2rem, 2.1vw, 1.6rem);
    margin: 0 0 1rem
}

.maint .section-sub {
    color: var(--muted);
    margin-top: .2rem
}

/* Grids */
.maint .grid {
    display: grid;
    gap: 2rem
}

.maint .grid.cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.maint .grid.cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width:720px) {
    .maint .grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .maint .grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cards */
.maint .card {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    position: relative;
    overflow: hidden
}

.maint .chip {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #0b1f3a;
    border: 1px solid var(--line);
    font-size: .85rem;
    color: #bcd6f8
}

.maint .chip .dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%
}

.empty_space {
    height: 45px;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.empty_space_2 {
    height: 70px;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

@media (max-width:719px) {
    .empty_space {
        height: 0;
    }

    .empty_space_2 {
        height: 0;
    }
}

.em_img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: .6rem;
    
}

.maint .em_chip {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #0b1f3a;
    border: 1px solid var(--line);
    font-size: .85rem;
    color: #bcd6f8;
    margin-top: .6rem;
}

.maint .em_chip .dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%
}

/* Triage */
.maint .triage .card ul {
    padding-left: 1rem;
    margin: .4rem 0
}

.maint .triage .card li {
    margin: .25rem 0
}

.maint .triage .cta-mini {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .7rem
}

.maint .triage .cta-mini .btn {
    padding: .55rem .8rem;
    font-weight: 700;
}

/* Services list */
.maint .svc .item {
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #0b1830;
    display: flex;
    gap: .9rem;
    align-items: flex-start
}

.maint .svc svg {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.maint .svc h4 {
    margin: .2rem 0 .1rem;
    font-size: 1.05rem
}

.maint .svc p {
    margin: .1rem 0;
    color: var(--muted)
}

/* Services collage */
.maint .svc-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .6rem;
    margin-top: .8rem
}

.maint .svc-gallery figure {
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0b1830
}

.maint .svc-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

@media (max-width:719px) {
    .maint .svc-gallery {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* Pricing */
.maint .price-card {
    text-align: center;
    padding: 1rem 1.2rem
}

.maint .price {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    color: #fff
}

.maint .price small {
    color: var(--muted);
    font-weight: 600
}

.maint .note {
    color: var(--muted);
    font-size: .95rem
}

/* Process */
.maint .process {
    counter-reset: step;
    display: grid;
    gap: .8rem
}

.maint .process .step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: .8rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--line);
    background: #0b1830;
    border-radius: 14px
}

.maint .process .step::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--accent), #0ea7ff);
    color: #001225;
    font-weight: 900
}

.icon--lg {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
}

/* Safety */
.maint .safety {
    border-left: 4px solid var(--accent-2);
    background: linear-gradient(180deg, #221a03, #0d0a03);
    border: 1px solid #3a2a07;
    border-left-color: var(--accent-2);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.maint .safety h4 {
    margin: .2rem 0 .5rem
}

.maint .safety ul {
    margin: .4rem 0 .6rem;
    padding-left: 1.1rem
}

.maint .safety li {
    margin: .25rem 0
}

/* Proof */
.maint .proof .badges {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap
}

.maint .badge-txt {
    border: 1px dashed var(--line);
    background: #0b1730;
    color: #cfe1ff;
    padding: .45rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .3px
}

/* B2B */
.maint .b2b .list {
    display: grid;
    gap: .6rem
}

.maint .b2b {
    display: flex;
    gap: .6rem;
    align-items: flex-start
}

.maint .b2b .tick {
    margin-top: .25rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f2920;
    color: #56f0a5;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid #204235
}

/* Cases */
.maint .cases .case {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0b1830;
    display: grid;
    gap: .5rem
}

.maint .cases .meta {
    color: var(--muted);
    font-size: .95rem
}

.maint .case img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line)
}

/* FAQ */
.maint .faq .item {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #0b1830
}

.maint .faq button {
    width: 100%;
    text-align: left;
    padding: 1rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.maint .faq .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
    padding: 0 1rem
}

.maint .faq .item.open .content {
    max-height: 400px;
    padding: 0 1rem 1rem
}

.maint .faq .chev {
    transition: transform .28s ease
}

.maint .faq .item.open .chev {
    transform: rotate(180deg)
}

/* Form (legacy page-wide styles) */
.maint form {
    display: grid;
    gap: .8rem
}

/* (left intact to preserve your layout elsewhere) */
.maint label {
    font-weight: 700;
    font-size: .95rem
}

.maint input,
.maint select,
.maint textarea {
    width: 100%;
    padding: .8rem .9rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #0a1425;
    color: #e8f1ff;
    outline: none
}

.maint input::placeholder,
.maint textarea::placeholder {
    color: #7892b5
}

.maint textarea {
    min-height: 110px;
    resize: vertical
}

.maint .help {
    color: var(--muted);
    font-size: .9rem
}

.maint .files {
    font-size: .95rem;
    color: #cfe1ff
}

/* Sticky SOS Bar (kept visible + never wider than viewport) */
.maint .sos {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    z-index: 50;
    display: flex;
    gap: .6rem;
    background: rgba(6, 12, 22, .8);
    backdrop-filter: saturate(1.2) blur(8px);
    border: 1px solid var(--line);
    padding: .6rem .9rem;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    max-width: calc(100vw - 16px);
    /* prevents any horizontal bleed on tiny screens */
}

.maint .sos.show {
    opacity: 1;
    pointer-events: auto
}

/* Reveal */
.maint .reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease
}

.maint .reveal.shown {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    .maint .reveal {
        opacity: 1;
        transform: none
    }
}

/* Utilities */
.maint .muted {
    color: var(--muted)
}

.maint .pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #0c1b33;
    color: #cfe1ff
}

.maint .mt-1 {
    margin-top: .5rem
}

.maint .mt-2 {
    margin-top: 1rem
}

.maint .mt-3 {
    margin-top: 1.5rem
}

/* =========================
   NEW FORM — HARD NAMESPACE
   ========================= */

#bsmx-wrap,
#bsmx-wrap * {
    box-sizing: border-box;
}

section#bsmx-wrap {
    max-width: min(1100px, 92vw);
    margin: clamp(18px, 4.5vw, 48px) auto;
    padding: clamp(14px, 3.5vw, 28px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    border: 1px solid var(--bsmx-ln);
    border-radius: calc(var(--bsmx-rd) + 6px);
    box-shadow: var(--bsmx-sh), 0 0 0 1px rgba(27, 184, 255, .08) inset;
    overflow-x: clip;
    /* guard just for this card on mobile */
}

/* Force form layout not to inherit grid from .maint form */
#bsmx-wrap form {
    display: block;
    margin: 0;
}

.bsmx-hd {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: clamp(16px, 3vw, 28px);
}

.bsmx-hd h1 {
    font-size: clamp(20px, 3.2vw, 30px);
    margin: 0;
    letter-spacing: .2px;
}

.bsmx-hd p {
    margin: .25rem 0 0;
    color: var(--bsmx-mu);
    font-size: clamp(13px, 1.7vw, 15px);
}

.bsmx-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width:720px) {
    .bsmx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

.bsmx-f {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bsmx-f label {
    font-weight: 600;
    font-size: clamp(13px, 1.7vw, 14px);
}

.bsmx-hint {
    color: var(--bsmx-mu);
    font-size: 12.5px;
}

#bsmx-wrap input[type="text"],
#bsmx-wrap input[type="tel"],
#bsmx-wrap input[type="email"],
#bsmx-wrap input[type="date"],
#bsmx-wrap input[type="time"],
#bsmx-wrap select,
#bsmx-wrap textarea {
    width: 100%;
    background: var(--bsmx-p1);
    border: 1px solid var(--bsmx-ln);
    color: var(--bsmx-tx);
    padding: 12px 14px;
    border-radius: var(--bsmx-rd);
    outline: none;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    min-height: 44px;
}

#bsmx-wrap textarea {
    min-height: 120px;
    resize: vertical;
}

#bsmx-wrap input:focus,
#bsmx-wrap select:focus,
#bsmx-wrap textarea:focus {
    border-color: var(--bsmx-ln2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 0 0 6px rgba(27, 184, 255, .35);
}

.bsmx-row {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
}

.bsmx-full {
    grid-column: 1 / -1;
}

/* Pretty select */
.bsmx-select {
    position: relative;
}

.bsmx-select::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6e7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 12px 12px;
    pointer-events: none;
    opacity: .9;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4));
    transition: transform .15s ease, opacity .15s ease;
}

.bsmx-select:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
}

.bsmx-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    cursor: pointer;
    padding-right: 44px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .05)) padding-box, var(--bsmx-p1);
    border: 1px solid var(--bsmx-ln);
    border-radius: var(--bsmx-rd);
    color: var(--bsmx-tx);
    min-height: 44px;
}

.bsmx-select select:hover {
    border-color: var(--bsmx-ln2);
}

.bsmx-select select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.bsmx-select select option {
    background: var(--bsmx-p1);
    color: var(--bsmx-tx);
}

/* Radios/checkboxes */
.bsmx-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bsmx-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--bsmx-ln);
    border-radius: 999px;
    cursor: pointer;
    background: var(--bsmx-p1);
    color: var(--bsmx-tx);
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.bsmx-chip input {
    appearance: none;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    display: inline-block;
    position: relative;
}

.bsmx-chip input:checked {
    border-color: transparent;
    background: radial-gradient(circle at 50% 50%, var(--bsmx-ac) 55%, rgba(27, 184, 255, .4) 55% 100%);
}

/* File input */
.bsmx-file {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px dashed var(--bsmx-ln2);
    border-radius: var(--bsmx-rd);
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
}

.bsmx-file input[type="file"] {
    width: 1px;
    height: 1px;
    position: absolute;
    left: -9999px;
}

.bsmx-btnsm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--bsmx-ac), var(--bsmx-ac2));
    color: #031320;
    font-weight: 700;
    border: 1px solid transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(27, 184, 255, .25) inset;
}

/* Actions */
.bsmx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}

.bsmx-submit {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--bsmx-ac), var(--bsmx-ac2));
    color: #031320;
    font-weight: 800;
    letter-spacing: .2px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(27, 184, 255, .25) inset,
        0 0 22px rgba(27, 184, 255, .55), 0 0 60px rgba(27, 184, 255, .35);
    transition: transform .12s ease, box-shadow .12s ease;
}

.bsmx-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(27, 184, 255, .3) inset,
        0 0 28px rgba(27, 184, 255, .75), 0 0 80px rgba(27, 184, 255, .45);
}

/* Tiny screens */
@media (max-width:420px) {
    .bsmx-row {
        grid-template-columns: 1fr;
    }

    .bsmx-hd {
        flex-direction: column;
        gap: 8px;
    }

    section#bsmx-wrap {
        overflow: clip;
    }

    /* tighten on very narrow screens */
}


/* 1) Guardrails: stop horizontal scroll without killing sticky/fixed */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    /* use clip instead of hidden to avoid layout oddities */
}

/* 2) Usual offenders */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Grids/rows shouldn’t push wider than their container */
.grid,
.row {
    min-width: 0;
    overflow-x: clip;
}

/* Prevent 100vw overshoot on mobile URL bars/scrollbars */
.full-viewport,
.hero,
.offcanvas {
    width: 100dvw;
    /* not 100vw */
    max-width: 100%;
}

/* Flex/grid children are allowed to shrink so they don’t force overflow */
.flex>*,
.grid>* {
    min-width: 0;
}

/* Long URLs/words won’t force the layout wide */
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* If you have an off-canvas nav, keep it off-screen without widening the page */
.offcanvas {
    position: fixed;
    inset: 0 0 0 auto;
    transform: translateX(100%);
    /* hidden state */
    will-change: transform;
    pointer-events: none;
    /* prevent clicks when hidden */
}

.offcanvas.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

/* Keep floating CTA visible above everything */
#sos {
    position: fixed;
    /* use fixed so ancestors’ overflow won’t affect it */
    
    z-index: 9999;
}