/* ==========================================================================
   Talk2Me, hand-written stylesheet (no build step required)
   Served statically from /public/css/app.css. Source mirror lives at
   resources/css/app.css. Edit one and copy to the other.
   ========================================================================== */

:root {
    /* Brand palette derived from the Talk2Me logo (see docs/brand.md). Orange leads;
       purple/magenta/red are accents from the mosaic mark. */
    --brand:        #f4791f;   /* bright orange: fills, accents, gradient end */
    --brand-dark:   #c25410;   /* mid orange: borders, hover */
    --brand-darker: #a8420c;   /* burnt orange: buttons, links, text on light (AA) */
    --magenta:      #d6006e;   /* accent */
    --purple:       #6e2b8b;   /* accent */
    --red:          #e23119;   /* accent */
    --ink:          #221e1c;   /* warm charcoal: headings */
    --body:         #4b4541;   /* warm body text */
    --muted:        #8a827c;   /* muted text (logo strapline grey) */
    --line:         #efe8e2;   /* warm hairline */
    --bg:           #ffffff;
    --bg-alt:       #faf5f1;   /* warm off-white */
    --bg-dark:      #1d1a19;   /* warm near-black: footer, CTA */
    --success-bg:   #e7f6ec;
    --success-ink:  #1b6b37;
    --error-bg:     #fcebec;
    --error-ink:    #b3261e;
    --radius:       14px;
    --maxw:         1120px;
    --shadow:       0 2px 4px rgba(34,30,28,.04), 0 10px 30px rgba(34,30,28,.07);
    --brand-gradient: linear-gradient(135deg, #6e2b8b 0%, #d6006e 50%, #f4791f 100%);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
            sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--body);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-darker); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #7d310a; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; }
p { color: var(--body); }
ul, ol { padding-left: 1.2em; }

/* ---- Layout helpers ----------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 800px; }
.section { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem); }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: 2.75rem; }
.section-head h2 { letter-spacing: -.02em; }
.section-head p { font-size: 1.1rem; color: var(--muted); margin-top: .6rem; }
.center { text-align: center; margin-top: 1.5rem; }
.muted { color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700;
           color: var(--brand-darker); margin-bottom: .85rem; }
.lead { font-size: 1.2rem; color: var(--body); max-width: 640px; }
.subhead { margin-top: 3rem; margin-bottom: 1.25rem; }

/* ---- Accessibility ------------------------------------------------------ */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 8px; top: -48px; z-index: 200; background: var(--brand-dark);
    color: #fff; padding: 10px 16px; border-radius: 8px; transition: top .15s;
}
.skip-link:focus { top: 8px; color: #fff; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-block; background: var(--brand-gradient); color: #fff; font-weight: 600;
    padding: .8rem 1.6rem; border-radius: 999px; text-decoration: none; border: none;
    cursor: pointer; font-size: 1rem; line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0,0,0,.18); box-shadow: 0 6px 18px rgba(168,66,12,.22);
    transition: filter .15s, transform .08s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.07); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168,66,12,.3); }
.btn:active { transform: translateY(0); }
.btn-outline { background: transparent; color: var(--brand-darker); border: 2px solid var(--brand-darker);
    text-shadow: none; box-shadow: none; }
.btn-outline:hover { background: var(--brand-darker); color: #fff; filter: none; }
.btn-sm { padding: .5rem 1.15rem; font-size: .9rem; }

/* ---- Header / nav ------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95);
    backdrop-filter: saturate(150%) blur(6px); border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }
.site-header .container { max-width: 1280px; }
.brand img { width: 150px; height: auto; }
.main-nav > ul { list-style: none; display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; white-space: nowrap; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--brand-dark); }
.nav-cta .btn { color: #fff; }
.nav-cta .btn-outline { color: var(--brand-darker); }
.nav-toggle, .nav-toggle-label { display: none; }

/* Dropdowns */
.nav-top { background: none; border: none; font: inherit; font-weight: 600; font-size: .98rem;
    color: var(--ink); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.nav-top:hover, .nav-top.active { color: var(--brand-dark); }
.caret { font-size: .7em; }
.has-dropdown { position: relative; }
.dropdown { list-style: none; margin: 0; padding: .4rem; position: absolute; top: 100%; left: 0;
    min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow); display: none; z-index: 120; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: .55rem .7rem; border-radius: 7px; font-weight: 500; font-size: .95rem; }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--bg-alt); color: var(--brand-dark); }
/* Mega menu (multi-column dropdown) */
.dropdown.mega { gap: 1.25rem; min-width: 440px; padding: 1rem 1.1rem; left: 0; }
.has-dropdown:hover .dropdown.mega, .has-dropdown:focus-within .dropdown.mega { display: flex; }
.mega-col { min-width: 168px; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-heading { margin: 0 0 .35rem; padding: 0 .7rem; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

@media (max-width: 1100px) {
    .nav-toggle-label {
        display: flex; flex-direction: column; gap: 5px; width: 44px; height: 44px;
        align-items: center; justify-content: center; cursor: pointer;
    }
    .nav-toggle-label span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
    .main-nav {
        position: absolute; left: 0; right: 0; top: 100%; background: #fff;
        border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .25s ease;
    }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 20px 1rem; }
    .main-nav li { border-top: 1px solid var(--line); }
    .main-nav a { display: block; padding: .85rem .25rem; }
    /* Dropdowns expand inline within the collapsed menu */
    .has-dropdown { width: 100%; }
    .nav-top { display: block; width: 100%; text-align: left; padding: .85rem .25rem; }
    .caret { display: none; }
    .dropdown { position: static; display: block; box-shadow: none; border: none;
        min-width: 0; padding: 0 0 .5rem 1rem; }
    .dropdown a { padding: .6rem .25rem; }
    .dropdown.mega { display: block; gap: 0; min-width: 0; padding: 0 0 .5rem 1rem; }
    .has-dropdown:hover .dropdown.mega, .has-dropdown:focus-within .dropdown.mega { display: block; }
    .mega-col { min-width: 0; }
    .mega-heading { padding: .7rem .25rem .1rem; }
    .nav-cta { margin-top: .75rem; border-top: none !important; }
    .nav-cta a { display: inline-block; }
    .nav-toggle:checked ~ .main-nav { max-height: calc(100vh - 72px); overflow-y: auto; }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    /* Refined dark hero: deep charcoal base with soft brand-coloured glows. */
    background:
        radial-gradient(70% 90% at 88% -10%, rgba(214,0,110,.34), transparent 55%),
        radial-gradient(60% 80% at 5% 115%, rgba(244,121,31,.26), transparent 55%),
        radial-gradient(40% 60% at 60% 40%, rgba(110,43,139,.22), transparent 60%),
        #15121b;
    color: #fff; padding-block: clamp(4rem, 2.4rem + 8vw, 8.5rem);
}
.hero h1 { color: #fff; letter-spacing: -.025em; }
.hero .eyebrow { color: #ffb267; }
.hero-copy { max-width: 740px; }
.hero .lead { color: rgba(255,255,255,.82); margin-top: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero .btn { box-shadow: 0 10px 28px rgba(168,66,12,.45); }
.hero .btn-outline { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }
.hero .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---- Page hero (interior pages) ---------------------------------------- */
.page-hero {
    position: relative;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(244,121,31,.10), transparent 60%),
        var(--bg-alt);
    padding-block: clamp(2.8rem, 1.8rem + 4vw, 5rem);
    border-bottom: 1px solid var(--line);
}
.page-hero h1 { letter-spacing: -.02em; }

/* ---- Feature grid ------------------------------------------------------- */
.feature-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feature h3 { margin-bottom: .5rem; }
.feature h3::before { content: ""; display: block; width: 38px; height: 4px; background: var(--brand);
                      border-radius: 4px; margin-bottom: .9rem; }

/* ---- Cards -------------------------------------------------------------- */
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
    display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.75rem; text-decoration: none; box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(34,30,28,.13); border-color: rgba(244,121,31,.45); }
.card h3, .card h4 { color: var(--ink); margin-bottom: .6rem; }
.card p { color: var(--body); }
.card.plain { box-shadow: none; }
.card-link { display: inline-block; margin-top: 1rem; color: var(--brand-darker); font-weight: 700; }
.price-inline { font-weight: 700; color: var(--ink); font-size: 1.15rem; margin-top: .5rem; }

/* ---- Lists -------------------------------------------------------------- */
.tick-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.tick-list.two-col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 2rem; }
.tick-list li { position: relative; padding-left: 1.8rem; }
.tick-list li::before {
    content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 6px;
    border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
}
.rate-list, .hours-list, .plain-list { list-style: none; padding: 0; }
.rate-list li, .hours-list li { display: flex; justify-content: space-between; gap: 1rem;
                                padding: .4rem 0; border-bottom: 1px solid var(--line); }
.plain-list li { padding: .2rem 0; }

/* ---- Plan comparison table ---------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.plan-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
.plan-table th, .plan-table td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.plan-table thead th { background: var(--bg-dark); color: #fff; font-size: .95rem; }
.plan-table tbody th[scope="row"] { text-align: left; color: var(--ink); background: var(--bg-alt); font-weight: 600; }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: none; }
.plan-table tbody tr:last-child td { font-weight: 700; color: var(--ink); }

/* ---- Price cards (broadband) ------------------------------------------- */
.price-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.price-card {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.8rem 1.6rem; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.price-card.featured { border-color: var(--brand); border-width: 2px; }
.price-card .badge {
    position: absolute; top: -12px; right: 16px; background: var(--brand); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .7rem; border-radius: 999px;
}
.price-card h3 { font-size: 1.1rem; }
.price-card .price { margin: .6rem 0 1.1rem; }
.price-card .amount { font-size: 2.4rem; font-weight: 800; color: var(--ink); }
.price-card .per { color: var(--muted); font-weight: 600; }
.price-card .tick-list { margin-bottom: 1.5rem; font-size: .95rem; }
.price-card .btn { margin-top: auto; text-align: center; }
.price-card .price-exc { font-size: .82rem; color: var(--muted); margin-top: -.55rem; margin-bottom: .85rem; }
/* Pin the network line + button to the bottom so all cards line up. */
.price-card .tick-list { margin-bottom: 1.25rem; }
.network-tag { font-size: .82rem; color: var(--muted); margin: auto 0 .85rem; padding-top: .85rem;
    border-top: 1px solid var(--line); }
.network-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand); margin-right: .45rem; vertical-align: 1px; }
.network-tag + .btn { margin-top: 0; }
.price-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.nearby-links { color: var(--muted); font-size: .95rem; margin-top: 1.5rem; }
.price .price-poa { font-size: 1.45rem; font-weight: 700; color: var(--ink); }
@media (max-width: 620px) { .price-grid.two { grid-template-columns: 1fr; } }

/* Group pricing callout */
.group-offer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
    margin-top: 2.5rem; padding: 1.75rem 2rem; border-radius: var(--radius);
    background: var(--bg-alt); border: 1px solid var(--line); border-left: 4px solid var(--brand);
}
.group-offer h3 { color: var(--ink); margin-bottom: .35rem; }
.group-offer p { color: var(--body); max-width: 60ch; }
.group-offer .btn { flex: none; }

/* ---- FAQ (native details) ---------------------------------------------- */
.faq-list { display: grid; gap: .75rem; max-width: 820px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq-item summary {
    cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--ink); list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-dark); line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-answer { padding: 0 1.3rem 1.2rem; }

/* ---- Notes / fine print ------------------------------------------------- */
.note { color: var(--muted); font-size: .95rem; margin-top: 1.25rem; }
.fine-print { color: var(--muted); font-size: .9rem; display: grid; gap: .6rem; }
.fine-print li { padding-left: .3rem; }

/* ---- Legal page --------------------------------------------------------- */
.legal .legal-group { margin-top: 3rem; margin-bottom: 1.25rem; font-size: .9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--brand-darker);
    padding-bottom: .6rem; border-bottom: 2px solid var(--brand); }
.legal .legal-group:first-child { margin-top: 0; }
.legal h3 { margin-top: 1.9rem; margin-bottom: .55rem; font-size: 1.12rem; color: var(--ink); }
.legal p { margin-bottom: .8rem; }
.legal-list { margin: 0 0 1rem 1.2rem; display: grid; gap: .4rem; list-style: disc; }
ol.legal-list { list-style: decimal; }
.legal-list li { padding-left: .2rem; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--brand-gradient); color: #fff; position: relative; }
.cta-band h2 { color: #fff; letter-spacing: -.02em; }
.cta-band p { color: rgba(255,255,255,.92); margin-top: .5rem; }
.cta-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cta-band .btn { background: #fff; color: var(--brand-darker); border-color: #fff;
    text-shadow: none; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.cta-band .btn:hover { background: #fbeee4; color: #7d310a; filter: none; }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn-outline:hover { background: #fff; color: var(--brand-darker); }

/* ---- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; gap: 3rem; grid-template-columns: 1fr 1.3fr; align-items: start; }
.contact-details h3 { margin-top: 1.5rem; margin-bottom: .4rem; font-size: 1rem; color: var(--brand-dark); }
.contact-details h2 { margin-bottom: .5rem; }
address { font-style: normal; color: var(--body); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.field .req { color: var(--error-ink); }
.field input, .field textarea, .field select {
    width: 100%; padding: .7rem .85rem; border: 1px solid #cbd5df; border-radius: 8px;
    font: inherit; color: var(--ink); background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); outline: none;
    box-shadow: 0 0 0 3px rgba(244,121,31,.2); }
.field [aria-invalid="true"] { border-color: var(--error-ink); }
.field-error { color: var(--error-ink); font-size: .88rem; margin-top: .3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.order-h { font-size: 1.2rem; margin: 2.2rem 0 1.1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.order-h:first-of-type { margin-top: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.3rem; font-weight: 500; }
.alert-success { background: var(--success-bg); color: var(--success-ink); }
.alert-error { background: var(--error-bg); color: var(--error-ink); }

@media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: #161311; color: rgba(255,255,255,.72); padding-top: 3.5rem; margin-top: 0;
    border-top: 3px solid transparent; border-image: var(--brand-gradient) 1; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; padding-bottom: 2.5rem; }
.footer-brand { color: #fff; font-size: 1.4rem; }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-areas { color: rgba(255,255,255,.6); font-size: .95rem; margin-top: .5rem; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.3rem; display: flex;
    flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .88rem; color: rgba(255,255,255,.6);
}
.footer-bottom p { color: inherit; }

@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col:first-child { grid-column: 1 / -1; }
}

/* ---- Broadband availability checker ------------------------------------ */
.checker-box { max-width: 720px; margin-inline: auto; }
.center-head { text-align: center; margin-inline: auto; }
.checker-field { position: relative; margin-top: 1.5rem; }
.checker-field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.checker-field input {
    width: 100%; padding: .9rem 1rem; font: inherit; color: var(--ink);
    border: 2px solid #cbd5df; border-radius: 10px; background: #fff;
}
.checker-field input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(10,127,209,.18); }
.addr-results {
    list-style: none; margin: .25rem 0 0; padding: .25rem; position: absolute; z-index: 30;
    left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow); max-height: 280px; overflow-y: auto;
}
.addr-option { padding: .6rem .75rem; border-radius: 7px; cursor: pointer; }
.addr-option:hover, .addr-option.active { background: var(--bg-alt); }
.checker-status { margin-top: 1rem; color: var(--muted); min-height: 1.2em; }
.checker-status.loading { display: flex; align-items: center; gap: .55rem; }
.checker-status.loading::before {
    content: ""; width: 16px; height: 16px; flex: none;
    border: 2px solid rgba(168,66,12,.25); border-top-color: var(--brand-darker);
    border-radius: 50%; animation: t2m-spin .6s linear infinite;
}
/* Address autocomplete loading + empty states */
.spinner {
    display: inline-block; width: 16px; height: 16px; flex: none;
    border: 2px solid rgba(168,66,12,.25); border-top-color: var(--brand-darker);
    border-radius: 50%; animation: t2m-spin .6s linear infinite; vertical-align: -3px;
}
.addr-loading, .addr-empty { padding: .7rem .85rem; color: var(--muted); display: flex; align-items: center; gap: .55rem; }
@keyframes t2m-spin { to { transform: rotate(360deg); } }
.checker-results { margin-top: 1.5rem; }
.avail-badge { font-weight: 700; padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; }
.avail-badge.yes { background: var(--success-bg); color: var(--success-ink); }
.avail-badge.dsl { background: #fff4e1; color: #8a5a00; }
.avail-h { margin-bottom: 1.25rem; }
.checker-msg { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; }
.checker-msg.error { background: var(--error-bg); color: var(--error-ink); border-color: transparent; }

/* ---- Residential / Business segment toggle ----------------------------- */
.segment-switch-wrap { text-align: center; padding-top: 2.5rem; }
.segment-toggle { display: inline-flex; border: 2px solid var(--brand-dark); border-radius: 999px; overflow: hidden; }
.seg-btn { padding: .55rem 1.5rem; background: #fff; border: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--brand-dark); transition: background .15s, color .15s; }
.seg-btn:hover { background: var(--bg-alt); }
.seg-btn.active { background: var(--brand-dark); color: #fff; }
.bb-scope[data-seg-view="business"] .seg-residential { display: none; }
.bb-scope[data-seg-view="residential"] .seg-business { display: none; }
.checker-seg { margin: 0 auto 1.5rem; }

/* Homepage hero checker, floating card overlapping the hero */
.checker-hero { background: var(--bg-alt); padding-top: 0; }
.checker-hero .checker-box {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(16,34,46,.14); padding: 2rem; margin-top: -3.5rem; position: relative; z-index: 5;
}
@media (max-width: 600px) { .checker-hero .checker-box { padding: 1.4rem; margin-top: -2rem; } }

/* ---- 404 / error page --------------------------------------------------- */
.error-hero {
    position: relative; color: #fff; display: flex; align-items: center; min-height: 62vh;
    background-color: var(--brand-darker); /* fallback if the image is missing */
    background-image:
        linear-gradient(100deg, rgba(168,66,12,.92) 0%, rgba(168,66,12,.62) 45%, rgba(244,121,31,.45) 100%),
        url('../assets/img/404-bg.jpg');
    background-size: cover; background-position: right center; background-blend-mode: multiply;
}
.error-inner { padding-block: clamp(3rem, 2rem + 6vw, 6rem); max-width: 720px; }
.error-404 { font-weight: 800; line-height: .85; letter-spacing: -.03em; color: #fff;
    font-size: clamp(5rem, 3rem + 16vw, 13rem); }
.error-sub { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fff;
    margin-top: .25rem; font-size: clamp(1.3rem, 1rem + 2vw, 2.3rem); }
.error-text { color: rgba(255,255,255,.9); margin-top: 1rem; max-width: 44ch; }
.error-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.error-hero .btn { background: #fff; color: var(--brand-darker); border: none; text-shadow: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.error-hero .btn:hover { background: #fbeee4; color: #7d310a; filter: none; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 2px solid rgba(255,255,255,.6);
    text-shadow: none; box-shadow: none; }
.btn-ghost:hover { background: #fff; color: var(--ink); filter: none; border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

/* ======================================================================== */
/*  Blog & Knowledge Base                                                    */
/* ======================================================================== */

/* ---- Blog cards --------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
             border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
             transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(34,30,28,.13); border-color: rgba(244,121,31,.45); }
.post-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.post-card-title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a:hover { color: var(--brand-darker); }
.post-card-body p { color: var(--body); margin: 0; }
.post-meta { color: var(--muted); font-size: .85rem; margin: 0; }
.read-more { display: inline-block; margin-top: .4rem; color: var(--brand-darker); font-weight: 700; text-decoration: none; }
.read-more:hover { text-decoration: underline; }
.post-hero-img { width: 100%; border-radius: var(--radius); margin-bottom: 1.75rem; box-shadow: var(--shadow); }
.back-link { margin-top: 2rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.tag { background: var(--bg-alt); border: 1px solid var(--line); color: var(--body);
       font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; }

/* ---- Long-form prose (blog posts & KB articles) ------------------------- */
.prose { color: var(--body); font-size: 1.05rem; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose h2 { color: var(--ink); font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.prose h3 { color: var(--ink); font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.prose h4 { color: var(--ink); font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.prose p { margin: 0 0 1.1rem; }
.prose a { color: var(--brand-darker); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.1rem 1.25rem; display: grid; gap: .4rem; }
.prose li { padding-left: .2rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.25rem 0; }
.prose blockquote { margin: 1.5rem 0; padding: .6rem 1.25rem; border-left: 3px solid var(--brand);
                    background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); }
.prose code { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px;
              padding: .1rem .4rem; font-size: .92em; }
.prose pre { background: var(--bg-dark); color: #f5efe9; padding: 1.1rem 1.25rem;
             border-radius: var(--radius); overflow-x: auto; margin: 0 0 1.25rem; }
.prose pre code { background: none; border: none; padding: 0; color: inherit; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prose th { background: var(--bg-alt); color: var(--ink); }

/* ---- Knowledge base ----------------------------------------------------- */
.kb-search { margin-top: 1.5rem; max-width: 560px; }
.kb-search input { width: 100%; padding: .9rem 1.1rem; font-size: 1rem; border: 1px solid var(--line);
                   border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.kb-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(244,121,31,.2); }
.kb-categories { display: grid; gap: 2.5rem; }
.kb-category > h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.kb-category > h2 a { color: var(--ink); text-decoration: none; }
.kb-category > h2 a:hover { color: var(--brand-darker); }
.kb-category-desc { margin: 0 0 1rem; }
.kb-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.kb-item > a { display: block; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line);
               border-radius: var(--radius); text-decoration: none;
               transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.kb-item > a:hover { border-color: rgba(244,121,31,.45); box-shadow: var(--shadow); transform: translateY(-2px); }
.kb-item-title { display: block; color: var(--ink); font-weight: 700; }
.kb-item-excerpt { display: block; color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.kb-no-results { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
                 padding: 1rem 1.25rem; color: var(--body); margin-bottom: 1.5rem; }

/* ---- Breadcrumb / clickable eyebrow ------------------------------------- */
.crumb { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* ---- Footer resources --------------------------------------------------- */
.footer-resources { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: 1.25rem; }

/* ======================================================================== */
/*  AI / Integrations / Quote                                                */
/* ======================================================================== */
.feature-card .feat-hook { color: var(--brand-darker); font-weight: 700; margin-top: .6rem; }
.feature-card h3 { color: var(--ink); }

.logo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.logo-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px;
             padding: .5rem 1.1rem; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); }

/* Switch & Save quote form reuses .field / .field-row / .order-h from the order form. */
.quote-intro { margin-bottom: 2rem; }
.file-hint { color: var(--muted); font-size: .85rem; margin-top: .35rem; }

/* Header click-to-call */
.nav-phone { font-weight: 700; color: var(--brand-darker); text-decoration: none; white-space: nowrap; }
.nav-phone:hover { text-decoration: underline; }
@media (max-width: 900px) { .nav-call { margin-top: .5rem; } }

/* Trust strip */
.trust-strip { background: var(--bg-dark); color: #f3ece6; padding: 1rem 0; }
.trust-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
               justify-content: center; gap: .6rem 2rem; text-align: center; font-weight: 600; font-size: .95rem; }
.trust-items li { position: relative; }
.trust-items a { color: #fff; text-decoration: underline; }

/* ======================================================================== */
/*  Page media (screenshots, badges, banners)                                */
/* ======================================================================== */
.partner-badge { display: block; width: 96px; height: 96px; }
.hero-badge { margin-top: 1.25rem; }
figure.shot { margin: 0; }
figure.shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line);
                  border-radius: var(--radius); box-shadow: var(--shadow); }
figure.shot figcaption { color: var(--muted); font-size: .85rem; margin-top: .6rem; text-align: center; }
.media-row { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1fr; align-items: center; }
.media-row .tick-list { margin: 0; }
@media (max-width: 820px) { .media-row { grid-template-columns: 1fr; } }
.banner-img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }