/* ==========================================================================
   Afford IT – Custom Styles  (v2 visual system, August 2026)
   --------------------------------------------------------------------------
   This file IS the site's design system. Every page — root, /suburbs, /blog,
   404 — links this one stylesheet, so the whole site restyles from here.
   The v1 look (stock Bootstrap + photo hero) is preserved in the backup zip
   D:\AffordIT-backup-20260803-1643.zip.

   Principles:
     - All accents derive from brand orange #ed4e00 on a WARM neutral scale
       (no cool greys — warmth is the differentiator vs corporate IT sites).
     - Headings use Sora (loaded via @import below, sitewide); body stays
       Inter, which every page already loads via <link>.
     - The hero is a photo (hero-2026.jpg — versioned filename because
       .htaccess caches images for 1 year) under a left-heavy scrim, with a
       gradient-only fallback (.hero-no-img). See docs/photo-shot-list.md.
     - Class contracts from v1 are unchanged: every selector that existed
       still exists and does the same job, restyled.
     - All motion is wrapped in prefers-reduced-motion: no-preference.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

/* ---------- Root Variables ---------- */
:root {
    /* Orange scale (lightest → darkest) */
    --afford-orange-lt:    #ff8c45;   /* light orange  */
    --afford-orange:       #ed4e00;   /* brand orange  */
    --afford-orange-dk:    #c43d00;   /* dark orange   */
    --afford-orange-xdk:   #9c3000;   /* deeper orange */
    --afford-orange-black: #1a0800;   /* near-black warm — replaces navy */

    /* Semantic aliases */
    --afford-primary:      #c43d00;   /* "primary" role (dark orange) */
    --afford-primary-dark: #9c3000;
    --afford-accent:       #ed4e00;   /* main accent */
    --afford-accent-dark:  #c43d00;
    --afford-accent-light: #ff8c45;

    /* Backgrounds */
    --afford-dark-bg:      #160b04;   /* hero / dark-section bg (warm near-black) */
    --afford-tint:         #fff5f0;   /* pale orange tint for accordions etc. */

    /* v2 tokens */
    --ink:        #221812;                       /* body text — warm near-black   */
    --ink-soft:   #6f6159;                       /* secondary text — warm grey    */
    --paper:      #fbf6f2;                       /* light section background      */
    --paper-deep: #f6efe9;                       /* light section gradient tail   */
    --line:       rgba(34, 24, 18, 0.09);        /* hairline borders on light     */
    --line-soft:  rgba(255, 255, 255, 0.10);     /* hairline borders on dark      */
    --font-display: 'Sora', 'Inter', system-ui, sans-serif;
    --radius-card: 1.25rem;
    --shadow-card:       0 1px 2px rgba(34, 24, 18, 0.05), 0 12px 32px -16px rgba(34, 24, 18, 0.18);
    --shadow-card-hover: 0 2px 4px rgba(34, 24, 18, 0.05), 0 24px 48px -16px rgba(237, 78, 0, 0.25);
    --shadow-btn:        0 10px 24px -10px rgba(237, 78, 0, 0.55);
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}

.display-4, .display-5, .display-6 { font-weight: 800; }

.lead { color: var(--ink-soft); }
.text-muted { color: var(--ink-soft) !important; }

/* Default links: brand, not Bootstrap blue */
a { color: var(--afford-orange-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--afford-orange); }

::selection { background: var(--afford-orange); color: #fff; }

/* Anchored sections land clear of the sticky navbar */
[id] { scroll-margin-top: 96px; }

/* ---------- Accessibility ---------- */
/* Skip link — visible only on keyboard focus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--afford-orange);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* Visible focus ring on all interactive elements (WCAG 2.1 AA – 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--afford-orange);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Dark sections need a light ring to stay visible against the near-black bg */
.bg-dark a:focus-visible,
.navbar-dark a:focus-visible,
.suburb-hero a:focus-visible,
.hero-section a:focus-visible,
footer a:focus-visible {
    outline-color: #ff8c45;
}

/* Extra spacing utility */
.py-6  { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.pt-6  { padding-top: 5.5rem !important; }
.pb-6  { padding-bottom: 5.5rem !important; }

@media (max-width: 575.98px) {
    .py-6 { padding-top: 4.25rem !important; padding-bottom: 4.25rem !important; }
}

/* ---------- Warm surface overrides (replace Bootstrap's cool greys) ------- */
.bg-light {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%) !important;
}

.bg-dark { background-color: var(--afford-dark-bg) !important; }

.rounded-4 { border-radius: var(--radius-card) !important; }

.shadow-sm {
    box-shadow: var(--shadow-card) !important;
}

/* ---------- Bootstrap Primary → Dark Orange ---------- */
.btn-primary,
.btn-primary:focus {
    background-color: var(--afford-primary) !important;
    border-color: var(--afford-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -12px rgba(156, 48, 0, 0.6);
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--afford-primary-dark) !important;
    border-color: var(--afford-primary-dark) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--afford-orange) !important;
    border-color: var(--afford-orange) !important;
}
.btn-outline-primary:hover {
    background-color: var(--afford-orange) !important;
    color: #fff !important;
}
.bg-primary    { background-color: var(--afford-primary) !important; }
.text-primary  { color: var(--afford-orange) !important; }
.border-primary { border-color: var(--afford-orange) !important; }

/* ---------- Bootstrap Warning → Brand Orange ---------- */
.btn-warning,
.btn-warning:focus {
    background: linear-gradient(135deg, #ff6a1f 0%, var(--afford-orange) 60%) !important;
    border-color: var(--afford-orange) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-btn);
}
.btn-warning:hover,
.btn-warning:active {
    background: linear-gradient(135deg, var(--afford-orange) 0%, var(--afford-orange-dk) 70%) !important;
    border-color: var(--afford-orange-dk) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px -10px rgba(237, 78, 0, 0.65);
}
.text-warning   { color: var(--afford-orange) !important; }
.bg-warning     { background-color: var(--afford-orange) !important; }
.border-warning { border-color: var(--afford-orange) !important; }

/* ---------- Buttons: pill geometry + weight ---------- */
.btn {
    border-radius: 50rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-lg { padding: 0.9rem 1.9rem; }

.btn-outline-light { border-width: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .btn:hover  { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
}

/* ---------- Navbar: translucent warm dark with blur ---------- */
.navbar.bg-dark {
    background-color: rgba(22, 11, 4, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
}

.navbar .nav-link { font-weight: 500; }

/* ---------- Hero Section (main page) ----------
   Photo hero (assets/images/hero-2026.jpg, 1672x941) under a warm scrim that is
   heaviest on the left, where the headline and CTAs sit, and lightest on the
   right so the photo reads. The scrim also keeps white text at AA contrast
   over the image's light living-room tones — do not weaken the left stops
   without re-checking the hero text. */
.hero-section {
    background:
        linear-gradient(100deg,
            rgba(18, 8, 2, 0.93) 0%,
            rgba(18, 8, 2, 0.83) 38%,
            rgba(18, 8, 2, 0.45) 68%,
            rgba(18, 8, 2, 0.25) 100%),
        url('../images/hero-2026.jpg') center / cover no-repeat;
    min-height: 85vh;
    position: relative;
    overflow: hidden;
}

/* On phones the text spans the full width, so the directional scrim would
   leave copy sitting on the photo's bright right side — flatten it. */
@media (max-width: 767.98px) {
    .hero-section {
        background:
            linear-gradient(180deg, rgba(18, 8, 2, 0.90) 0%, rgba(18, 8, 2, 0.82) 100%),
            url('../images/hero-2026.jpg') center / cover no-repeat;
    }
}

/* Fallback when the image is unavailable: the v2 gradient build */
.hero-section.hero-no-img {
    background:
        radial-gradient(1100px 520px at 88% 12%, rgba(237, 78, 0, 0.32), transparent 62%),
        radial-gradient(820px 480px at 105% 80%, rgba(255, 140, 69, 0.15), transparent 60%),
        radial-gradient(700px 420px at -10% 105%, rgba(196, 61, 0, 0.22), transparent 55%),
        linear-gradient(155deg, #1d0e03 0%, #150803 52%, #200e04 100%);
}

/* Sora runs wider than Inter; cap the hero H1 so it holds to three lines on
   desktop and the trust badges stay above a 900px fold. */
.hero-section h1 {
    font-size: clamp(2.35rem, 1.2rem + 2.9vw, 3.3rem);
}

.hero-section .hero-alt-contact { margin-bottom: 1rem !important; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    padding: 0.5rem 0.95rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hero contact card */
.hero-card {
    backdrop-filter: blur(8px);
}

/* On small phones the hero CTAs span the column — bigger tap targets, and the
   call button reads as the single obvious next step. */
@media (max-width: 575.98px) {
    .hero-cta-group .btn { width: 100%; }
}

/* Secondary contact line under the hero CTAs */
.hero-alt-contact       { color: rgba(255, 255, 255, 0.6); }
.hero-alt-contact a     { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.hero-alt-contact a:hover { color: #fff; text-decoration: underline; }

/* ---------- Live open/closed status pill ----------
   Green for open and grey for closed are functional signals rather than brand
   decoration, so they sit outside the orange palette deliberately. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1rem;
    border-radius: 50rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.status-pill.is-open .status-dot {
    background: #2fd06b;
    box-shadow: 0 0 0 4px rgba(47, 208, 107, 0.22);
}

.status-pill.is-closed .status-dot {
    background: rgba(255, 255, 255, 0.45);
}

.status-pill.is-closed {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* ---------- Suburb Hero (suburb + service + utility pages) ---------- */
.suburb-hero {
    background:
        radial-gradient(900px 420px at 92% 0%, rgba(237, 78, 0, 0.34), transparent 62%),
        radial-gradient(620px 380px at -5% 110%, rgba(196, 61, 0, 0.20), transparent 55%),
        linear-gradient(150deg, #1d0e03 0%, #150803 60%, #1f0d04 100%);
    min-height: 45vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.suburb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(800px 480px at 80% 20%, #000 25%, transparent 75%);
            mask-image: radial-gradient(800px 480px at 80% 20%, #000 25%, transparent 75%);
    pointer-events: none;
}

/* ---------- Service Cards ---------- */
.service-icon {
    width: 76px;
    height: 76px;
    background: linear-gradient(135deg, var(--afford-orange) 0%, var(--afford-primary) 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.9rem;
    box-shadow: 0 12px 28px -12px rgba(237, 78, 0, 0.55);
}

.service-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--line) !important;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(237, 78, 0, 0.35) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* ---------- Stat Cards ---------- */
.stat-card {
    border-radius: var(--radius-card) !important;
    /* Sheen sits above the per-card background-color (some set inline) */
    background-image: radial-gradient(120% 120% at 100% 0%,
        rgba(255, 255, 255, 0.16), transparent 55%) !important;
}

/* ---------- Why Afford IT icons ---------- */
.why-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--afford-orange-lt) 0%, var(--afford-orange) 80%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Symptom picker ---------- */
.symptom-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.symptom-card:hover,
.symptom-card:focus-visible {
    color: inherit;
    border-color: rgba(237, 78, 0, 0.45);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.symptom-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--afford-tint);
    color: var(--afford-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
    transition: background 0.18s, color 0.18s;
}

.symptom-card:hover .symptom-card__icon {
    background: linear-gradient(135deg, var(--afford-orange) 0%, var(--afford-primary) 100%);
    color: #fff;
}

.symptom-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.symptom-card__detail {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 0.9rem;
}

.symptom-card__cue {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--afford-orange);
}

.symptom-card__cue i {
    transition: transform 0.18s;
    display: inline-block;
}

.symptom-card:hover .symptom-card__cue i { transform: translateX(4px); }

/* ---------- Photo band (service pages) ----------
   Wide contextual photo capped to a banner height; object-position keeps
   faces (upper third of every shot) in frame at any crop. */
.photo-band {
    display: block;
    max-height: 400px;
    margin-bottom: 3rem;
}

.photo-band img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center 28%;
    display: block;
}

/* ---------- Suburb Links (footer / LGA pages) ---------- */
.suburb-link {
    color: var(--afford-primary);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.8;
    display: block;
    transition: color 0.15s;
}

.suburb-link:hover {
    color: var(--afford-orange);
    text-decoration: underline;
}

/* LGA pages – suburb grid cards */
.suburb-grid-link {
    display: block;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.suburb-grid-link:hover {
    background: var(--afford-orange);
    color: #fff;
    border-color: var(--afford-orange);
}

/* ---------- LGA Cards (index page) ---------- */
.lga-card {
    border-radius: 16px !important;
    border: 1px solid var(--line) !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
    color: inherit;
}

.lga-card:hover {
    transform: translateY(-4px);
    border-color: rgba(237, 78, 0, 0.35) !important;
    box-shadow: var(--shadow-card-hover) !important;
    color: inherit;
}

/* ---------- Social Icons ---------- */
.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-soft);
    color: #fff !important;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.social-icon-link:hover {
    background: var(--afford-orange);
    border-color: var(--afford-orange);
    color: #fff !important;
}

@media (prefers-reduced-motion: no-preference) {
    .social-icon-link:hover { transform: translateY(-2px); }
}

/* Navbar social icons — borderless, small */
.navbar-social a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1;
}

.navbar-social a:hover { color: var(--afford-orange); }

/* ---------- Footer ---------- */
footer.bg-dark {
    background: linear-gradient(180deg, #170b04 0%, #0f0602 100%) !important;
    position: relative;
}

/* Hairline brand accent along the footer's top edge */
footer.bg-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(237, 78, 0, 0.55) 50%, transparent 95%);
}

footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s;
}

footer a:hover {
    color: var(--afford-orange-lt);
}

/* ---------- Buttons (legacy alias) ---------- */
.btn-afford {
    background-color: var(--afford-orange);
    border-color: var(--afford-orange);
    color: #fff;
    font-weight: 600;
}

.btn-afford:hover {
    background-color: var(--afford-orange-dk);
    border-color: var(--afford-orange-dk);
    color: #fff;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-radius: 0.9rem;
    padding: 0.7rem 1rem;
    border-color: #e7ddd5;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--afford-orange);
    box-shadow: 0 0 0 0.25rem rgba(237, 78, 0, 0.15);
}

/* ---------- Breadcrumb on dark bg ---------- */
.breadcrumb-light .breadcrumb-item a                          { color: rgba(255,255,255,0.75); }
.breadcrumb-light .breadcrumb-item.active                     { color: rgba(255,255,255,0.95); }
.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }

/* ---------- Accordion ---------- */
.accordion-button {
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
.accordion-button:not(.collapsed) {
    color: var(--afford-orange-dk);
    background: var(--afford-tint);
}
.accordion-button:focus           { box-shadow: none; }
.accordion-button:not(.collapsed)::after {
    filter: hue-rotate(180deg) saturate(3); /* tint arrow orange */
}

/* ---------- Remove green — replace with orange shades ---------- */
/* Checklist icons in service cards */
.service-card .bi-check-circle-fill { color: var(--afford-orange-lt) !important; }
/* Checklist icons in suburb pages "why" section */
.bi-check-circle-fill               { color: var(--afford-orange-lt) !important; }

/* Success stat card → deeper orange */
.bg-success { background-color: var(--afford-orange-xdk) !important; }

/* ---------- Sticky mobile call bar ---------- */
.sticky-call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.sticky-call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 0.75rem;
    text-decoration: none;
    color: #fff;
    line-height: 1.2;
}

.sticky-call-bar__call {
    flex: 1 1 auto;
    background: linear-gradient(135deg, #ff6a1f 0%, var(--afford-orange) 70%);
    font-size: 1.05rem;
}

.sticky-call-bar__call:active { background: var(--afford-orange-dk); }

.sticky-call-bar__call i { font-size: 1.2rem; }

.sticky-call-bar__call small {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
}

.sticky-call-bar__book {
    flex: 0 0 auto;
    background: #1a0d05;
    font-size: 0.85rem;
    font-weight: 600;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 82px;
}

.sticky-call-bar__book i { font-size: 1.05rem; }

/* Keep the bar off the footer content it would otherwise cover */
@media (max-width: 991.98px) {
    body { padding-bottom: 4.75rem; }
}

/* ---------- Motion (opt-in only) ---------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    @keyframes afford-rise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }

    .hero-section .status-pill     { animation: afford-rise 0.55s 0.05s both; }
    .hero-section h1               { animation: afford-rise 0.55s 0.12s both; }
    .hero-section .lead            { animation: afford-rise 0.55s 0.20s both; }
    .hero-section .hero-cta-group  { animation: afford-rise 0.55s 0.28s both; }
    .suburb-hero h1                { animation: afford-rise 0.5s  0.05s both; }
    .suburb-hero .lead             { animation: afford-rise 0.5s  0.14s both; }

    @keyframes afford-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(47, 208, 107, 0.35); }
        70%  { box-shadow: 0 0 0 7px rgba(47, 208, 107, 0); }
        100% { box-shadow: 0 0 0 0 rgba(47, 208, 107, 0); }
    }

    .status-pill.is-open .status-dot { animation: afford-pulse 2.2s ease-out infinite; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 767.98px) {
    .hero-section  { min-height: auto; padding: 4rem 0; }
    .suburb-hero   { min-height: auto; padding: 3rem 0; }
    .display-4     { font-size: 2rem; }
}

/* On XS the g-5 horizontal gutter (3rem) exceeds the container's own padding
   (1.5rem), so the row's negative margins push past the viewport and the page
   scrolls sideways. Cap the horizontal gutter; vertical spacing is unaffected. */
@media (max-width: 575.98px) {
    .row.g-5,
    .row.gx-5 { --bs-gutter-x: 1.5rem; }
}