/* ============================================================
   RP Signage — main stylesheet
   ============================================================ */
/* Palette sampled from the RP Signage shop-front banner: vivid green
   lettering on near-black, with white type.
   --brand is the exact banner green (#43A52E). It only reaches 3.15:1
   against white, so it is used on dark backgrounds and for accents;
   interactive elements that carry white text use --primary (5.37:1, WCAG AA). */
:root {
    --brand: #43a52e;          /* exact green from the banner */
    --brand-glow: #5fc93f;     /* lighter green for glows/hovers on dark */
    --primary: #2c7a1e;        /* AA-safe green for buttons & links */
    --primary-dark: #215916;
    --accent: #43a52e;
    --accent-dark: #2c7a1e;
    --dark: #101512;           /* near-black, as on the banner */
    --darker: #080b09;
    --text: #23282b;
    --muted: #6b7280;
    --bg: #ffffff;
    --bg-alt: #f2f7f1;         /* faint green tint */
    --border: #e0e8de;
    --whatsapp: #25d366;
    --radius: 10px;
    --shadow: 0 4px 18px rgba(16, 40, 16, 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
}

img { max-width: 100%; height: auto; }

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

h1, h2, h3 { line-height: 1.25; color: var(--dark); }

a { color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* --primary, not --brand: white text on the vivid banner green is only
   3.15:1, below the WCAG AA minimum. --primary keeps the brand hue at 5.37:1. */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: #fff; }
/* On the dark hero/page-hero a dark-green outline would be invisible
   against the near-black background — invert it there. */
.hero .btn-outline,
.page-hero .btn-outline { border-color: #fff; color: #fff; }
.hero .btn-outline:hover,
.page-hero .btn-outline:hover { background: #fff; color: var(--primary); }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: #eaf5e7; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #1eb857; }
.btn-block { width: 100%; }

/* ---------- Top bar ---------- */
.top-bar {
    background: var(--darker);
    color: #c6d4c2;
    font-size: 0.85rem;
    padding: 0.4rem 0;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.top-bar a { color: #fff; text-decoration: none; margin-left: 1.25rem; }
.top-bar a:hover { color: var(--accent); }

/* ---------- Header / nav ---------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    gap: 1rem;
}
.logo {
    display: block;
    line-height: 0;
    flex-shrink: 0;
}
/* Stacked logo (RP / SIGNAGE / SIGN BOARDS) — height-constrained so the
   header stays compact regardless of the source image's pixel dimensions. */
.logo img {
    height: 66px;
    width: auto;
    max-width: 100%;
    display: block;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--dark);
}

.main-nav { display: flex; align-items: center; gap: 1.4rem; }
.main-nav > a, .dropdown-toggle {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0;
}
.main-nav > a:hover, .dropdown-toggle:hover { color: var(--primary); }
.nav-cta { color: #fff !important; }

.dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.5rem 0;
    z-index: 200;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
    display: block;
    padding: 0.55rem 1.2rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}
.dropdown-menu a:hover { background: var(--bg-alt); color: var(--primary); }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--darker) 0%, #13301a 55%, #1d4d22 100%);
    color: #fff;
    padding: 4rem 0;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.hero h1 {
    color: #fff;
    font-size: 2.3rem;
    margin-bottom: 1rem;
}
.hero-sub { font-size: 1.08rem; color: #d6e6d2; margin-bottom: 1.5rem; }
.hero-sub strong { color: #fff; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hero-points { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; color: #b8dcaf; font-size: 0.95rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
    background: linear-gradient(135deg, var(--darker) 0%, #14331b 60%, #1f5424 100%);
    color: #fff;
    padding: 2.8rem 0;
}
.page-hero h1 { color: #fff; font-size: 1.9rem; margin-bottom: 0.5rem; }
.page-hero p { color: #d6e6d2; }
.breadcrumbs { font-size: 0.85rem; margin-bottom: 0.8rem; color: #a9c9a2; }
.breadcrumbs a { color: #cfe8c8; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; }

/* ---------- Sections ---------- */
.section { padding: 3.5rem 0; }
.section-alt { background: var(--bg-alt); }
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: 0.6rem; }
.section-sub { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 2.2rem; }
.section h2 { margin-bottom: 1rem; }
.section h3 { margin: 1.4rem 0 0.7rem; }
.section p { margin-bottom: 1rem; }
.center-text { text-align: center; }
.center-text .btn { margin: 0.3rem; }

.two-col {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* ---------- Cards ---------- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr));
    gap: 1.5rem;
}
.card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(16,50,20,0.16); }
.card-body { padding: 1.1rem 1.2rem 1.3rem; }
.card-body h3, .card-title { font-size: 1.12rem; margin-bottom: 0.5rem; color: var(--dark); }
.card-body p { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.7rem; }
.card-link { color: var(--accent-dark); font-weight: 600; font-size: 0.92rem; }

/* ---------- Real project media ---------- */
.media {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-alt);
    line-height: 0;
}
.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Consistent crops so mixed portrait/landscape phone photos line up neatly */
.media.card-media { height: 200px; border-radius: var(--radius) var(--radius) 0 0; }
.media.side-media { height: 260px; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
/* Match the banner's own aspect ratio so nothing is cropped — the board
   carries the phone number and address, which must stay readable. */
.media.hero-media {
    height: auto;
    aspect-ratio: 1662 / 946;
    box-shadow: 0 12px 34px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.10);
}
.gallery-grid .media { height: 240px; box-shadow: var(--shadow); }

.gallery-grid .media img,
.card .media img { transition: transform 0.4s ease; }
.gallery-grid .media:hover img,
.card:hover .media img { transform: scale(1.05); }

/* ---------- Video showcase ---------- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
}
.media-video {
    line-height: 1.5;
    background: #000;
    box-shadow: var(--shadow);
}
.media-video video {
    width: 100%;
    max-height: 420px;
    display: block;
    background: #000;
}
.media-video figcaption {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    color: #cfd6e0;
    background: var(--dark);
}

/* ---------- Image placeholders (swap for real photos later) ---------- */
.img-placeholder {
    background: repeating-linear-gradient(45deg, #e8efe6, #e8efe6 12px, #f4f8f3 12px, #f4f8f3 24px);
    border: 2px dashed #b9c4d6;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #5c6b7d;
    font-size: 0.85rem;
    min-height: 200px;
    padding: 1rem;
}
.img-placeholder span { max-width: 90%; }
/* These modifiers MUST stay scoped to .img-placeholder. Written as bare
   .hero-media / .card-media selectors they also hit real <figure class="media">
   elements — and min-height:320px combined with the hero's aspect-ratio forced
   an intrinsic width of 562px, overflowing the viewport by ~190px on a phone. */
.img-placeholder.hero-media { min-height: 320px; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: #d6e6d2; }
.img-placeholder.card-media { min-height: 160px; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.img-placeholder.side-media { min-height: 230px; margin-bottom: 1.2rem; }
.img-placeholder.map-placeholder { min-height: 260px; margin-top: 1.2rem; }

/* Belt and braces: a grid/flex item's automatic minimum size can otherwise
   keep an aspect-ratio box from shrinking to its track. */
.media { min-width: 0; max-width: 100%; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

/* ---------- Lists ---------- */
.check-list { list-style: none; }
.check-list li {
    padding-left: 1.7rem;
    position: relative;
    margin-bottom: 0.7rem;
}
.check-list li::before {
    content: "✔";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-weight: 700;
}
.two-col-list { columns: 2; column-gap: 3rem; }
.two-col-list li { break-inside: avoid; }

.city-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.city-tags li {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 0.35rem 1rem;
    font-size: 0.88rem;
    color: var(--primary);
    font-weight: 500;
}

/* ---------- Steps (About page) ---------- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1.5rem;
}
.step {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.step-num {
    display: inline-flex;
    width: 2.2rem; height: 2.2rem;
    align-items: center; justify-content: center;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 0.8rem;
}
.step h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.step p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq-section { max-width: 800px; margin: 0 auto 2rem; }
.faq-section h2 { text-align: center; margin-bottom: 1.5rem; }
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.8rem;
    background: #fff;
    overflow: hidden;
}
.faq-item summary {
    padding: 1rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--dark);
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 700;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 1.2rem 1.1rem; color: var(--muted); margin: 0; }

.related-links { text-align: center; color: var(--muted); margin-top: 1.5rem; }

/* ---------- Contact page ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
    align-items: start;
}
.contact-list { list-style: none; margin: 1rem 0; }
.contact-list li { margin-bottom: 0.7rem; }
.contact-note { color: var(--muted); font-size: 0.92rem; }

.contact-form-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.8rem;
}
.contact-form label {
    display: block;
    font-weight: 600;
    margin: 1rem 0 0.35rem;
    font-size: 0.93rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #c9d2e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #fbfcfe;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}
.contact-form button { margin-top: 1.4rem; }
.hp-field { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }

/* Per-field validation messages. The span is always in the DOM and always
   referenced by aria-describedby, so a screen reader announces the message the
   moment it is filled in — inserting the element on demand would not be
   announced reliably. Empty spans collapse to nothing. */
/* Inputs carry no bottom margin — the gap between rows comes from the next
   label's margin-top — so the message only needs to clear the field above it.
   An empty span collapses to nothing and the row spacing is unchanged. */
.field-error {
    display: block;
    color: #b3261e;
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0.4rem 0 0;
}
.field-error:empty { margin: 0; }

.contact-form .is-invalid {
    border-color: #d9534f;
    background: #fffafa;
}
.contact-form .is-invalid:focus {
    outline-color: #d9534f;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.15);
}

.alert { padding: 0.9rem 1.1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.95rem; }
.alert-success { background: #e6f7ec; color: #14653a; border: 1px solid #b7e4c7; }
.alert-error { background: #fdecec; color: #8f1d1d; border: 1px solid #f5c2c2; }

/* ---------- Credentials & capacity spec list ---------- */
.spec-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
    max-width: 62rem;
    margin: 0 auto;
}
.spec-list li {
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 0.2rem;
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    font-size: 0.97rem;
}
.spec-k {
    flex: none;
    min-width: 9.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--primary);
}
.spec-foot { margin-top: 1.4rem; color: var(--muted); font-size: 0.93rem; }

/* ---------- Price box ---------- */
.price-box {
    max-width: 800px;
    margin: 0 auto 2rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    text-align: center;
}
.price-box h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.price-figure { font-size: 1.05rem; color: var(--muted); margin-bottom: 0.5rem; }
.price-figure strong {
    font-size: 2rem;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.price-note {
    font-size: 0.9rem;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 auto 1.1rem;
}

@media (max-width: 600px) {
    .spec-list li { flex-direction: column; gap: 0.15rem; }
    .spec-k { min-width: 0; }
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1.5rem;
}
.testimonial {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.testimonial .stars { color: var(--accent); letter-spacing: 0.12em; font-size: 1rem; }
.testimonial blockquote {
    margin: 0;
    font-size: 0.97rem;
    color: var(--text);
    flex: 1;
}
.testimonial blockquote::before { content: "“"; }
.testimonial blockquote::after  { content: "”"; }
.testimonial figcaption {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-top: 1px solid var(--border);
    padding-top: 0.7rem;
}
.testimonial figcaption strong { color: var(--dark); font-size: 0.92rem; }

/* ---------- CTA strip ---------- */
.cta-strip {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: #fff;
    text-align: center;
    padding: 3rem 0;
}
.cta-strip h2 { color: #fff; font-size: 1.7rem; margin-bottom: 0.4rem; }
.cta-strip p { color: #dcf2d5; margin-bottom: 1.4rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #a9b8a5; font-size: 0.93rem; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 1.1fr;
    gap: 2.2rem;
    padding: 3rem 1.25rem;
}
.site-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.9rem; }
/* Logo artwork has an opaque white background, so it sits on a white badge
   here rather than showing a hard white rectangle against the dark footer. */
.footer-logo {
    display: inline-block;
    background: #fff;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    line-height: 0;
}
.footer-logo img { height: 52px; width: auto; display: block; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: #a9b8a5; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer address { font-style: normal; line-height: 1.9; }
.footer-cities { font-size: 0.85rem; margin-top: 0.8rem; }
.footer-bottom {
    border-top: 1px solid #243023;
    padding: 1.1rem 0;
    text-align: center;
    font-size: 0.85rem;
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
    position: fixed;
    bottom: 1.4rem;
    right: 1.4rem;
    width: 3.4rem;
    height: 3.4rem;
    background: var(--whatsapp);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 300;
    transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ============================================================
   ANIMATION
   All motion is opt-in via prefers-reduced-motion and applied by JS
   (the .reveal class is added at runtime), so content stays fully
   visible if JS fails or motion is disabled.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    /* Scroll reveal — elements rise and fade in as they enter view.
       Gated on html.has-reveal, which JS adds only after it has successfully
       set up the observer. If JS is absent or errors out, the class is never
       added (or is removed) and nothing is ever hidden. */
    .has-reveal .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }
    .has-reveal .reveal.is-visible {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    /* Hero entrance on page load */
    .hero-text > *,
    .hero .media {
        animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    .hero-text > h1        { animation-delay: 0.05s; }
    .hero-text > .hero-sub { animation-delay: 0.15s; }
    .hero-actions          { animation-delay: 0.25s; }
    .hero-points           { animation-delay: 0.35s; }
    .hero .media           { animation-delay: 0.2s; }

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

    /* Buttons lift slightly on hover */
    .btn {
        transition: background 0.2s, color 0.2s, border-color 0.2s,
                    transform 0.18s ease, box-shadow 0.18s ease;
    }
    .btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
    .btn:active { transform: translateY(0); box-shadow: none; }

    /* Cards lift (already had transform) + inner image zoom is defined above */
    .step {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .step:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(16,50,20,0.16); }

    /* Nav links get an underline that grows from the left */
    .main-nav > a:not(.nav-cta),
    .dropdown-toggle { position: relative; }
    .main-nav > a:not(.nav-cta)::after,
    .dropdown-toggle::after {
        content: "";
        position: absolute;
        left: 0; bottom: 0;
        height: 2px; width: 0;
        background: var(--accent);
        transition: width 0.25s ease;
    }
    .main-nav > a:not(.nav-cta):hover::after,
    .dropdown:hover .dropdown-toggle::after { width: 100%; }

    /* FAQ answer slides open */
    .faq-item summary::after { transition: transform 0.25s ease; }
    .faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }

    /* WhatsApp button: gentle attention pulse, then settles */
    .whatsapp-float { animation: wa-pulse 2.6s ease-out 3; }
    @keyframes wa-pulse {
        0%, 70%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
        35%           { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 12px rgba(37,211,102,0); }
        0%            { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.5); }
    }

    /* Header compresses subtly once the page is scrolled */
    .site-header { transition: box-shadow 0.25s ease, padding 0.25s ease; }
    .site-header.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.12); }
    .site-header.scrolled .logo img { height: 54px; transition: height 0.25s ease; }
}

/* Dropdown fades in rather than snapping — DESKTOP ONLY.
   On touch screens there is no :hover, so an opacity-based reveal would
   leave the submenu permanently invisible. Mobile uses a tap toggle instead. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .dropdown-menu {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within .dropdown-menu { opacity: 1; transform: none; }
}

/* Failsafes: content must never stay hidden. */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
}
/* If JS never marked the document ready for reveals, show everything. */
html:not(.has-reveal) .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Guides / articles ---------- */
/* Prose column: ~70 characters is the comfortable reading measure, and the
   container's 1140px would be far too wide for continuous text. */
.guide-body { max-width: 760px; }
.guide-body h2 { margin-top: 2.4rem; font-size: 1.45rem; }
.guide-body h3 { margin-top: 1.8rem; font-size: 1.12rem; }
.guide-body h2:first-child, .guide-body h3:first-child { margin-top: 0; }
.guide-body .check-list { margin-bottom: 1.4rem; }
.guide-body ol.check-list { counter-reset: guide-step; }
.guide-body ol.check-list li::before { content: none; }
.guide-body ol.check-list li {
    counter-increment: guide-step;
    padding-left: 2.1rem;
}
.guide-body ol.check-list li::after {
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.lede {
    font-size: 1.12rem;
    color: #414a45;
    border-left: 3px solid var(--primary);
    padding-left: 1.1rem;
    margin-bottom: 2rem;
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    font-size: 0.86rem;
    color: #b8dcaf;
    margin-top: 0.7rem;
}
/* Deliberately NOT inline-flex: a flex container drops the whitespace between
   "Published" and the <time> element, running the two words together. */
.guide-meta span + span::before {
    content: "•";
    margin-right: 1.1rem;
    color: rgba(255,255,255,0.35);
}

/* On narrow screens the meta line wraps, which can strand a separator at the
   start of a row. Drop the bullets and let the flex gap do the separating. */
@media (max-width: 520px) {
    .guide-meta { gap: 0.15rem 0.9rem; }
    .guide-meta span + span::before { content: none; }
}

.guide-lead { padding: 2rem 0 0; }
.media.guide-hero {
    aspect-ratio: 16 / 7;
    height: auto;
    box-shadow: var(--shadow);
}

.guide-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary-dark);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    margin-bottom: 0.6rem;
}
.guide-card .card-title { font-size: 1.05rem; }
.guide-card .card-link em {
    font-style: normal;
    color: var(--muted);
    font-weight: 500;
}
.guide-card .card-link em::before { content: " · "; }

/* ---------- Callout ---------- */
.callout {
    background: #fbf7e8;
    border: 1px solid #ecdfae;
    border-left: 4px solid #c79a1a;
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin: 1.8rem 0;
}
.callout p { margin: 0; font-size: 0.95rem; color: #5a4b1c; }

/* ---------- Tables ---------- */
/* Wrapper scrolls independently so a wide table never makes the page
   scroll sideways on a phone. */
.table-wrap {
    overflow-x: auto;
    margin: 1.6rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.rate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    min-width: 32rem;
}
.rate-table caption {
    text-align: left;
    padding: 0.9rem 1.1rem 0.4rem;
    font-weight: 700;
    color: var(--dark);
}
.rate-table th, .rate-table td {
    padding: 0.72rem 1.1rem;
    text-align: left;
    border-top: 1px solid var(--border);
}
.rate-table thead th {
    background: var(--bg-alt);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.rate-table tbody th { font-weight: 600; color: var(--dark); }
.rate-table td { font-variant-numeric: tabular-nums; }
.rate-table tbody tr:hover { background: #fafcf9; }

/* ---------- Map embed ---------- */
.map-embed {
    margin-top: 1.2rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    line-height: 0;
}
.map-embed iframe {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
}
.map-link {
    display: inline-block;
    margin-top: 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.footer-h3-spaced { margin-top: 1.6rem; }

/* ---------- Contact page extras ---------- */
.landmark-list { list-style: none; margin: 0.6rem 0 1.2rem; }
.landmark-list li {
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.94rem;
}
.landmark-list li:last-child { border-bottom: 0; }
.landmark-list strong { color: var(--dark); }

.quote-prep {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
}
.quote-prep h3 { margin-top: 0; }

/* ---------- Error & confirmation pages ---------- */
.error-hero, .thanks-hero { text-align: center; padding: 3.4rem 0 3rem; }
.error-hero h1, .thanks-hero h1 { font-size: 2rem; }
.error-hero p, .thanks-hero p { max-width: 620px; margin: 0 auto; }

/* Decorative, and marked aria-hidden in the markup: the status is already
   in the heading, so a screen reader gains nothing from hearing "404". */
.error-code {
    font-size: clamp(3.4rem, 13vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 2px var(--brand);
    text-shadow: 0 0 26px rgba(67, 165, 46, 0.35);
    margin-bottom: 0.5rem;
}

.thanks-tick {
    width: 62px;
    height: 62px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 2rem;
    line-height: 62px;
    box-shadow: 0 0 0 8px rgba(67, 165, 46, 0.18);
}

/* Plain list for onward navigation. The tick markers of .check-list assert
   something about each item, which makes no sense on a list of links. */
.link-list { list-style: none; }
.link-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { text-decoration: none; }
.link-list a:hover { text-decoration: underline; }

.error-intro, .thanks-note {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.error-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.error-ref { color: var(--muted); font-size: 0.9rem; }
.error-ref code {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.1rem 0.4rem;
    font-size: 0.92em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero-grid, .two-col, .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .two-col-list { columns: 1; }
    .hero h1 { font-size: 1.8rem; }
}

@media (max-width: 760px) {
    .nav-toggle { display: block; }
    .logo img { height: 48px; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 20px rgba(0,0,0,0.08);
        padding: 0.5rem 0;
    }
    /* 12 nav items can exceed a short phone screen — keep the menu scrollable
       so the last links stay reachable. */
    .main-nav.open {
        display: flex;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .top-bar { font-size: 0.78rem; }
    .top-bar a { margin-left: 0.9rem; }
    .main-nav > a, .dropdown-toggle { padding: 0.8rem 1.4rem; display: block; }
    .nav-cta { margin: 0.6rem 1.4rem; text-align: center; }
    /* Submenu collapses by default and expands on tap, so Contact and the
       CTA stay reachable without scrolling past 8 service links. */
    .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        transform: none;
        border: none;
        border-left: 3px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        margin: 0 0 0.4rem 1.4rem;
        padding: 0;
        min-width: 0;
    }
    .dropdown.open .dropdown-menu { display: block; }
    .dropdown-toggle .caret { transition: transform 0.2s ease; display: inline-block; }
    .dropdown.open .dropdown-toggle .caret { transform: rotate(180deg); }
    .top-bar .container { justify-content: center; text-align: center; }
    .footer-grid { grid-template-columns: 1fr; }
}