/* ============================================
   BRIGHT SPARKS OF YORK — Site Styles
   Brand: Teal #1E7A6E + Black + Warm neutrals
   Fonts: Inter Tight (body) + Source Serif 4 (headings)
   ============================================ */

:root {
    --teal: #1E7A6E;        /* was #2A9D8F — darkened to pass WCAG AA 4.5:1 contrast */
    --teal-dark: #155B52;   /* was #1E7A6E — adjusted to maintain hover/active depth */
    --teal-light: #E8F5F2;
    --teal-bright: #00E5CC;
    --warm-bg: #FDFAF6;
    --cream: #FDFAF6;
    --charcoal: #0D0D0D;
    --text-dark: #0D0D0D;   /* alias of charcoal; six classes + .cta-dark-box reference it. Was undefined → .cta-dark-box rendered transparent (white text on near-white bg, 1.04:1, WCAG 1.4.3 fail). */
    --accent: #1E7A6E;      /* alias of teal; .btn-accent / .blog-card-footer / .alt-callout / .series-nav a / what-i-found inline CTAs reference it. Was undefined → those rendered unstyled. White-on-accent = 5.17:1 (AA pass); teal-text-on-white footer = 5.17:1 (AA pass). */
    --text-main: #2C2C2C;
    --text-light: #5A5A5A;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 20px;
    --whatsapp: #25D366;
    --review-stars: #B45309;
    --font-display: 'Source Serif 4', Georgia, serif;
    --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 100%; /* 16px base — never go below this */ }
body { font-family: var(--font-body); color: var(--text-main); background: var(--warm-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-size: 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
/* Body text links get underline for distinguishability (colour alone is not enough for colour-blind users) */
/* Only targets links inside article and main content — excludes nav, footer, buttons, tags, and image links */
article a:not(.btn):not(.nav-cta):not(.series-link):not(.series-read-link),
main > section p a:not(.btn):not(.nav-cta),
main > div p a:not(.btn):not(.nav-cta),
.enquiry-section a:not(.btn):not(.nav-cta) { text-decoration: underline; text-decoration-color: rgba(30,122,110,0.3); text-underline-offset: 3px; }
article a:not(.btn):hover,
main > section p a:not(.btn):hover { text-decoration-color: var(--teal); }
/* Explicitly no underline on nav, footer, image-wrapping, and utility links */
nav a, footer a, .nav-logo, .footer-inner a, .footer-links a, .area-pill, .area-tag, .tag, .link-service, .link-unstyled, .link-unstyled-alt, .link-grid-item { text-decoration: none !important; }

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--charcoal); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; }
h4 { font-size: 1.05rem; font-weight: 600; }

.section-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--teal); font-weight: 600; margin-bottom: 0.5rem; }
h1.section-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; }
.intro { font-size: 1.05rem; color: var(--text-light); max-width: 600px; margin: 0 auto 2rem; }

/* ---- NAVIGATION ---- */
header { position: relative; }
nav.nav-primary { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(253,250,246,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 0.8rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 52px; width: auto; object-fit: contain; filter: invert(38%) sepia(16%) saturate(1800%) hue-rotate(130deg) brightness(92%) contrast(88%); }
footer img { width: auto; object-fit: contain; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
/* Fix: nav links need padding to meet 44px touch target height */
.nav-links a { color: var(--text-main); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; padding: 0.65rem 0; display: inline-flex; align-items: center; min-height: 44px; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-cta { background: var(--teal); color: #fff !important; padding: 0.5rem 1.2rem !important; border-radius: 8px; font-weight: 600; transition: background 0.2s; min-height: 44px; }
.nav-cta:hover { background: var(--teal-dark); color: #fff !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--charcoal); margin: 5px 0; transition: 0.3s; }
@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--warm-bg); flex-direction: column; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); gap: 0.8rem; }
    .nav-links.open { display: flex; }
}

/* ---- COOKIE CONSENT BANNER ---- */
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: var(--charcoal); color: rgba(255,255,255,0.9); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; }
#cookie-banner p { margin: 0; flex: 1; min-width: 200px; }
#cookie-banner a { color: var(--teal-bright); }
.cookie-buttons { display: flex; gap: 0.75rem; flex-shrink: 0; }
#cookie-accept { background: var(--teal); color: #fff; border: none; padding: 0.6rem 1.4rem; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.875rem; min-height: 44px; }
#cookie-accept:hover { background: var(--teal-dark); }
#cookie-decline { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); padding: 0.6rem 1.4rem; border-radius: 8px; font-weight: 500; cursor: pointer; font-size: 0.875rem; min-height: 44px; }
#cookie-decline:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
@media (max-width: 600px) { #cookie-banner { padding-bottom: 80px; } }

/* ---- BUTTONS ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 2rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; transition: all 0.2s; cursor: pointer; border: none; text-align: center; min-height: 44px; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { border: 2px solid var(--teal); color: var(--teal); background: transparent; }
.btn-outline:hover { background: var(--teal); color: #fff; }
.btn-secondary { background: transparent; border: 2px solid var(--teal); color: var(--teal); }
.btn-secondary:hover { background: var(--teal); color: #fff; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; padding: 0.85rem 2rem; font-size: 0.95rem; }
.btn-whatsapp:hover { background: #1da851; color: #fff; }

/* ---- ACCESSIBILITY ---- */
.a11y-toggle { background: none; border: 2px solid var(--teal); color: var(--teal); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; padding: 0; }
.a11y-toggle:hover { background: var(--teal); color: #fff; }
.a11y-panel { position: fixed; top: 70px; right: 20px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); padding: 1.2rem; width: 260px; z-index: 10000; display: none; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.a11y-panel.active { display: block; opacity: 1; transform: translateY(0); pointer-events: all; }
.a11y-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid #eee; }
.a11y-panel-header strong { font-size: 0.95rem; color: var(--charcoal); }
.a11y-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #999; line-height: 1; }
.a11y-option { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.a11y-option span { font-size: 0.85rem; color: var(--charcoal); }
.a11y-controls { display: flex; gap: 0.3rem; }
.a11y-btn { background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.8rem; cursor: pointer; font-weight: 600; transition: all 0.15s; color: var(--charcoal); }
.a11y-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.a11y-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }
/* ---- HIGH CONTRAST MODE (WCAG AAA) — patches/high-contrast-fix.css ---- */
/* Universal flatten: every element to black bg + white text, so descendants
   with their own bg (cream sections, white cards, WhatsApp button) cannot
   keep it. Overrides below restore amber links + amber buttons + readable
   inputs. Brand teal is intentionally absent in this mode. */
body.high-contrast.high-contrast,
body.high-contrast.high-contrast * {
    background-color: #000 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.high-contrast.high-contrast a,
body.high-contrast.high-contrast a * {
    color: #FFD400 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
body.high-contrast.high-contrast .btn,
body.high-contrast.high-contrast .nav-cta,
body.high-contrast.high-contrast button,
body.high-contrast.high-contrast input[type="submit"] {
    background: #FFD400 !important;
    color: #000000 !important;
    border: 2px solid #FFFFFF !important;
}
body.high-contrast.high-contrast .btn *,
body.high-contrast.high-contrast .nav-cta *,
body.high-contrast.high-contrast button *,
body.high-contrast.high-contrast input[type="submit"] * {
    background: #FFD400 !important;
    color: #000000 !important;
}
body.high-contrast.high-contrast .btn:focus-visible,
body.high-contrast.high-contrast .nav-cta:focus-visible,
body.high-contrast.high-contrast button:focus-visible,
body.high-contrast.high-contrast input[type="submit"]:focus-visible {
    outline: 3px solid #FFD400 !important;
    outline-offset: 3px !important;
}
body.high-contrast.high-contrast input,
body.high-contrast.high-contrast textarea,
body.high-contrast.high-contrast select {
    background: #000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}
body.high-contrast.high-contrast input::placeholder,
body.high-contrast.high-contrast textarea::placeholder {
    color: #CCCCCC !important;
    opacity: 1 !important;
}
body.high-contrast.high-contrast img,
body.high-contrast.high-contrast svg {
    filter: brightness(0.85) contrast(1.1) !important;
}
body.high-contrast.high-contrast .decorative,
body.high-contrast.high-contrast [aria-hidden="true"]:not(.btn-icon):not(.nav-cta *):not(.btn *) {
    display: none !important;
}
body.dyslexia-font, body.dyslexia-font * { font-family: 'Comic Sans MS', 'OpenDyslexic', cursive, sans-serif !important; letter-spacing: 0.05em; word-spacing: 0.1em; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--teal); color: #fff; padding: 0.5rem 1rem; z-index: 9999; font-weight: 600; border-radius: 0 0 8px 0; transition: top 0.2s; }
.skip-link:focus { top: 0; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .nav-cta:focus-visible, .card:focus-visible, .area-card:focus-visible, .faq-question:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .fade-in { opacity: 1; transform: none; }
    .review-track { animation: none !important; }
}
@media (prefers-contrast: high) {
    :root { --border: rgba(0,0,0,0.3); --text-light: #333; }
    .tag { border: 1px solid var(--teal-dark); }
    .card { border: 1px solid var(--border); }
    a { text-decoration: underline !important; }
}

/* ---- TOUCH TARGET MINIMUMS (WCAG 2.5.8 — 24px minimum, 44px recommended) ---- */
.footer-links a { display: inline-block; padding: 0.4rem 0.2rem; min-height: 44px; line-height: 2; }
.area-pill, .area-tag, .tag { min-height: 44px; display: inline-flex; align-items: center; padding: 0.5rem 0.8rem; }

/* ---- 200% ZOOM SUPPORT ---- */
@media (min-resolution: 192dpi), (min-width: 1px) {
    /* Ensure content doesn't overflow or require horizontal scroll at 200% zoom */
    body { overflow-wrap: break-word; word-wrap: break-word; }
    /* Only flex content images — never override explicit logo/icon heights */
    article img, .hero img, .card img, .blog-card img { height: auto; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ---- SELECTION CONTRAST ---- */
::selection { background: var(--teal); color: #fff; }
::-moz-selection { background: var(--teal); color: #fff; }

/* ---- PAGE TOP SPACER ---- */
main { padding-top: 60px; }

/* ---- VAN BANNER — full image with scroll ---- */
.van-banner-wrap {
    width: 100%;
    overflow: hidden;
    background: var(--charcoal);
    position: relative;
}
.van-banner-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    will-change: transform;
    transform: translateY(0);
}
@media (max-width: 768px) {
    .van-banner-wrap img {
        transform: none !important;
    }
}

/* ---- HERO SECTION ---- */
.hero { padding: 3rem 1.5rem 2.5rem; }
.hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero-headline { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; font-family: var(--font-display); color: var(--charcoal); line-height: 1.2; }
.hero-headline span { color: var(--teal); }
.hero-tagline { font-size: 1.15rem; color: var(--text-light); margin: 1.5rem 0 0; line-height: 1.7; }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-image img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
@media (max-width: 768px) {
    .hero { padding: 2rem 1.5rem; }
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-image { order: -1; }
    .hero-image img { max-height: 300px; object-fit: cover; }
}

/* ---- CREDENTIAL STRIP ---- */
.credential-strip { background: var(--charcoal); color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 2rem; padding: 1rem 1.5rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; }
.credential-strip span { white-space: nowrap; color: rgba(255,255,255,0.9); }
@media (max-width: 600px) { .credential-strip { gap: 0.4rem 1rem; font-size: 0.78rem; padding: 0.8rem 1rem; } }

/* ---- SECTION UTILITIES ---- */
.section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.section-narrow { max-width: 800px; }
.section-wide { max-width: 1200px; }
.section-teal { background: var(--teal-light); }
.section-dark { background: var(--charcoal); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .section-label { color: var(--teal-bright); }
.section-dark .intro { color: rgba(255,255,255,0.7); }
.text-center { text-align: center; }

/* ---- CARDS ---- */
.card { background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card-link { text-decoration: none; color: inherit; }
.card-desc { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; margin-top: 0.5rem; }

/* ---- TAGS & PILLS ---- */
.tag { display: inline-block; background: var(--teal-light); color: var(--teal-dark); padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 500; margin: 0.2rem; }
.area-pill { background: var(--teal-light); color: var(--teal-dark); padding: 0.4rem 1rem; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 500; transition: background 0.2s, color 0.2s; text-decoration: none; display: inline-block; min-height: 36px; display: inline-flex; align-items: center; }
.area-pill:hover { background: var(--teal); color: #fff; }
.area-pill-primary { background: var(--teal); color: #fff; }
.area-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.area-tag { background: var(--teal); color: #fff; padding: 0.4rem 1rem; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 500; }

/* ---- VILLAGE PROOF PHOTOS ---- */
.village-proof-fig { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }
.village-proof-fig img { width: 100%; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); display: block; }

/* ---- FOOTER ACCREDITATIONS (extracted from inline styles) ---- */
.footer-accreditations { display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 0.8rem; opacity: 0.85; }
.footer-accred-img { height: 44px; width: auto; }

/* ---- THANK YOU PAGE ---- */
.thank-you-section { padding: 8rem 1.5rem 6rem; text-align: center; max-width: 600px; margin: 0 auto; }
.thank-you-tick { font-size: 3rem; margin-bottom: 1rem; }
.thank-you-lede { color: var(--text-light); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; }
.thank-you-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.thank-you-next { background: var(--teal-light); border-radius: var(--radius); padding: 1.5rem; }
.thank-you-next-head { font-weight: 600; margin-bottom: 0.5rem; }

/* ---- RECENT JOBS ---- */
.recent-jobs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1000px; margin-left: auto; margin-right: auto; }
.recent-job-card { background: #fff; border-radius: 10px; padding: 1.1rem 1.1rem 1rem; border-left: 3px solid var(--teal); text-decoration: none; color: var(--charcoal); display: flex; flex-direction: column; gap: 0.25rem; transition: box-shadow 0.18s, transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.recent-job-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-2px); }
.recent-job-type { font-size: 0.95rem; font-weight: 600; color: var(--charcoal); line-height: 1.35; }
.recent-job-area { font-size: 0.82rem; color: var(--text-light); }
.recent-job-area-name { color: var(--teal-dark); font-weight: 500; }
@media (max-width: 900px) { .recent-jobs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .recent-jobs-grid { grid-template-columns: 1fr; } }

/* ---- IMAGE UTILITIES ---- */
.img-rounded { border-radius: var(--radius); }
.img-circle { border-radius: 50%; width: 160px; height: 160px; object-fit: cover; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.photo-grid img { border-radius: var(--radius); height: 250px; object-fit: cover; width: 100%; }

/* ---- TRUST BAR ---- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; text-align: center; margin-top: 2rem; }
.trust-item { padding: 1rem; }
.trust-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.trust-item h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.trust-item p { font-size: 0.85rem; color: var(--text-light); }

/* ---- REVIEWS ---- */
.review-track { display: flex; gap: 1.5rem; animation: scrollReviews 30s linear infinite; width: max-content; }
.review-card { background: #fff; border-radius: var(--radius); padding: 1.8rem; min-width: 320px; max-width: 380px; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.review-stars { color: #B45309;  /* was #F5A623 — darkened to pass WCAG AA 4.5:1 on white */ font-size: 1rem; margin-bottom: 0.8rem; }
.review-card p { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; font-style: italic; }
.review-carousel { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.review-carousel:hover .review-track { animation-play-state: paused; }
@keyframes scrollReviews { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--border); padding: 1.2rem 0; }
.faq-question { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--charcoal); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 0.5rem 0; }
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--teal); flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .faq-question::after { content: '\2212'; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; color: var(--text-light); line-height: 1.7; font-size: 0.95rem; }
.faq-item.open .faq-answer { max-height: 500px; padding-top: 0.8rem; }

/* ---- CONTACT & SOCIAL ---- */
.contact-methods { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2rem 0; }
.contact-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.4rem; background: #fff; border-radius: 8px; font-weight: 500; box-shadow: var(--shadow-sm); transition: all 0.2s; }
.contact-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-link svg { width: 20px; height: 20px; }
.whatsapp-link { background: var(--whatsapp); color: #fff; }
.whatsapp-link:hover { background: #1da851; color: #fff; }
.social-links { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.social-link { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-light); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.social-link:hover { background: var(--teal); }
.social-link:hover svg { stroke: #fff; fill: #fff; }
.social-link svg { width: 18px; height: 18px; }

/* ---- FOOTER ---- */
footer { background: var(--charcoal); color: rgba(255,255,255,0.6); padding: 2rem 1.5rem 1.5rem; text-align: center; font-size: 0.85rem; }
footer a { color: var(--teal-bright); }
footer .footer-inner { max-width: 800px; margin: 0 auto; }
footer .footer-links { margin: 0.5rem 0; }
footer .footer-links a { margin: 0 0.8rem; }
footer .mt-1 { margin-top: 0.5rem; }

/* ---- TWO COLUMN LAYOUT ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.two-col.reverse > :first-child { order: 2; }
.two-col.reverse > :last-child { order: 1; }
@media (max-width: 768px) {
    .two-col { grid-template-columns: 1fr; }
    .two-col.reverse > :first-child { order: 0; }
    .two-col.reverse > :last-child { order: 0; }
}

/* ---- FADE IN ANIMATION ---- */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } .review-card { min-width: 280px; } .section { padding: 3rem 1.2rem; } }

/* ---- MOBILE STICKY BAR ---- */
.mobile-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 0.5rem; gap: 0.5rem; }
.mobile-sticky-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.2s; min-height: 44px; }
.mobile-sticky-call { background: var(--teal); color: #fff; }
.mobile-sticky-call:hover { background: var(--teal-dark); color: #fff; }
.mobile-sticky-wa { background: var(--whatsapp); color: #fff; }
.mobile-sticky-wa:hover { background: #1da851; color: #fff; }
@media (max-width: 768px) {
    .mobile-sticky-bar { display: flex; }
    body { padding-bottom: 70px; }
    .trust-item p { display: none; }
    .faq-question { font-size: 0.95rem; padding: 0.8rem 0; }
}
@media (max-width: 480px) {
    /* .hero-buttons column-stack rule deleted — .hero-cta-desktop hides the
       hero CTA pair on mobile so the 480px stack is unreachable. */
    .tag { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; }
}

/* ---- HERO CTAs (viewport split) ----
   The canonical hero CTA pair uses `class="hero-buttons hero-cta-desktop"`.
   Layout comes from .hero-buttons (display: flex / gap / margin-top, line
   ~241). .hero-cta-desktop is a viewport gate: hidden on mobile because the
   .mobile-sticky-bar above carries Call + WhatsApp permanently, so
   duplicating in the hero would be dead weight. Placed AFTER .hero-buttons
   in source order so the cascade beats .hero-buttons { display: flex } at
   equal specificity. display: none removes from both visual and a11y trees,
   the correct pair-swap pattern when the other CTA is genuinely the live one
   at that viewport (per Vince's media-query feasibility note, no aria-hidden
   — that mismatch IS the a11y bug pattern to avoid). */
@media (max-width: 768px) {
    .hero-cta-desktop { display: none; }
}

.container { margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---- UTILITY CLASSES (replacing inline styles) ---- */

/* Colours */
.text-light { color: var(--text-light); }
.text-white { color: #fff; }
.text-teal { color: var(--teal); }
.text-teal-dark { color: var(--teal-dark); }

/* Layout containers */
.container-800 { max-width: 800px; margin: 0 auto; }
.container-600 { max-width: 600px; margin: 0 auto; }
.container-1100 { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.container-800-center { max-width: 800px; margin: 0 auto; text-align: center; }

/* Spacing */
.mt-05 { margin-top: 0.5rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }
.mb-2 { margin-bottom: 2rem; }
.my-05 { margin: 0.5rem 0; }
.pb-2 { padding-bottom: 2rem; }

/* Text + spacing combos */
.text-light-mb { color: var(--text-light); margin-bottom: 1.5rem; }
.text-light-mb-1 { color: var(--text-light); margin-bottom: 1rem; }
.text-light-prose { color: var(--text-light); line-height: 1.8; margin-bottom: 1.25rem; }
.text-light-sm { color: var(--text-light); font-size: 0.9rem; margin: 0; }
.section-white { padding: 3rem 0; background: #fff; }
.container-800-center { max-width: 800px; margin: 0 auto; text-align: center; }
.info-card { background: var(--cream); border-radius: 10px; padding: 1.25rem; border-left: 4px solid var(--teal); }

/* Flex patterns */
.flex-center-wrap { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.flex-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }

/* Section backgrounds */
.section-teal-cta { background: var(--teal); padding: 4rem 1.5rem; text-align: center; color: #fff; }
.section-teal-light { background: var(--teal-light); padding: 3rem 1.5rem; }
.section-white { padding: 3rem 0; background: #fff; }

/* Link styles */
.link-unstyled { text-decoration: none; color: inherit; }
.link-service { display: block; padding: 0.75rem 1rem; background: #fff; border-radius: 8px; border-left: 3px solid var(--teal); text-decoration: none; color: var(--charcoal); font-size: 0.88rem; font-weight: 600; }

/* Button variants (inline overrides) */
.btn-white-teal { background: #fff; color: var(--teal); }
.btn-outline-white { border: 2px solid #fff; color: #fff; }

/* CTA subtitle */
.cta-subtitle { opacity: 0.9; margin: 1rem 0 2rem; }

/* Charcoal section detail */
.charcoal-detail { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1.25rem; }

/* Footer */
.footer-menfulness { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.85rem; }
.footer-logo { height: 36px; width: auto; margin: 0 auto; display: block; }
.footer-sub { margin-top: 0.5rem; font-size: 0.85rem; }
.menfulness-icon { height: 24px; width: auto; opacity: 0.8; }
.footer-legal { font-size: 0.78rem; opacity: 0.75; }
.footer-legal a { color: rgba(255,255,255,0.85); }

/* Native enquiry form (used on contact.html and the homepage quick-quote) */
.enquiry-form { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2rem; text-align: left; color: var(--charcoal); }
.enquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 520px) { .enquiry-form .form-row { grid-template-columns: 1fr; } }
.enquiry-form .form-group { margin-bottom: 1rem; }
.enquiry-form .form-group label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--charcoal); margin-bottom: 0.4rem; }
.enquiry-form .form-group label .required { color: #d32f2f; margin-left: 0.2rem; }
.enquiry-form .form-group input, .enquiry-form .form-group select, .enquiry-form .form-group textarea { width: 100%; padding: 0.8rem 1rem; border: 2px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.95rem; color: var(--charcoal); transition: border-color 0.18s; background: #fff; box-sizing: border-box; }
.enquiry-form .form-group textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.enquiry-form .form-group input:focus, .enquiry-form .form-group select:focus, .enquiry-form .form-group textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(45,212,191,0.12); }
.enquiry-form .form-group input.error, .enquiry-form .form-group textarea.error { border-color: #d32f2f; }
.enquiry-form .form-error { color: #d32f2f; font-size: 0.8rem; margin-top: 0.3rem; display: none; }
.enquiry-form .form-submit { margin-top: 1.5rem; text-align: center; }
.enquiry-form .form-submit .btn { min-width: 200px; font-size: 1rem; padding: 0.9rem 2rem; }
.enquiry-form .form-status { text-align: center; margin-top: 1rem; padding: 1rem; border-radius: 8px; display: none; }
.enquiry-form .form-status.success { background: #d1fae5; color: #065f46; display: block; }
.enquiry-form .form-status.error { background: #fff3f3; color: #d32f2f; display: block; }

/* Pricing rows */
.pricing-row { display: flex; justify-content: space-between; padding: 1rem; background: var(--teal-light); border-radius: var(--radius); }

/* Hero image */
.hero-cover { width: 100%; border-radius: var(--radius); height: 400px; object-fit: cover; }

/* Additional utilities — batch 2 */
.text-teal-dark-bold { color: var(--teal-dark); font-weight: 600; }
.text-teal-bright { color: var(--teal-bright); }
.text-light-mb-05 { color: var(--text-light); margin-bottom: 0.5rem; }
.text-light-mb-075 { color: var(--text-light); margin-bottom: 0.75rem; }
.text-light-sm-mb2 { color: var(--text-light); font-size: 0.9rem; margin-bottom: 2rem; }
.text-light-sm-mt { color: var(--text-light); margin-top: 1rem; font-size: 0.9rem; }
.text-light-sm-0 { color: var(--text-light); font-size: 0.9rem; }
.text-light-lh { color: var(--text-light); line-height: 1.8; }
.mt-15 { margin-top: 1.5rem; }
.m-0-05 { margin: 0 0 0.5rem; }
.opacity-85 { opacity: 0.85; }
.opacity-75-sm { opacity: 0.75; margin: 0.4rem 0 0; font-size: 0.9rem; }
.container-700 { max-width: 700px; margin: 0 auto; }
.container-700-padded { max-width: 700px; margin: 2rem auto; padding: 0 1.5rem; }
.max-w-800 { max-width: 800px; }
.grid-gap-1 { display: grid; gap: 1rem; max-width: 600px; }
.grid-gap-075 { display: grid; gap: 0.75rem; }
.flex-wrap-gap { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.flex-gap-mt { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.flex-tags-compact { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.info-card-lg { background: var(--cream); border-radius: 12px; padding: 1.5rem; border-left: 4px solid var(--teal); }
.section-charcoal { background: var(--charcoal); padding: 3rem 1.5rem; color: #fff; }
.section-warm { padding: 3rem 1.5rem; background: var(--warm-bg); }
.hero-auto { min-height: auto; padding-bottom: 2rem; }
.img-80 { height: 80px; }
.link-teal-bold { color: var(--teal-dark); font-weight: 600; display: inline-block; margin-top: 0.75rem; }
.highlight-box { background: var(--teal-light); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.flex-contact { display: flex; gap: 1.5rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
.link-unstyled-alt { color: inherit; text-decoration: none; }

/* Batch 3 utilities */
.text-light-desc { color: var(--text-light); margin: 0.3rem 0 0; font-size: 0.9rem; }
.text-light-desc-sm { color: var(--text-light); margin: 0.4rem 0 0; font-size: 0.9rem; }
.text-light-desc-xs { color: var(--text-light); margin: 0.25rem 0 0; font-size: 0.9rem; }
.text-light-desc-2xs { color: var(--text-light); margin: 0.2rem 0 0; font-size: 0.85rem; }
.text-light-mt-05 { color: var(--text-light); margin-top: 0.5rem; }
.text-light-sm-mb125 { color: var(--text-light); font-size: 0.9rem; margin-bottom: 1.25rem; }
.text-white-mb-05 { color: #fff; margin-bottom: 0.5rem; }
.text-teal-bright-bold { color: var(--teal-bright); font-weight: 700; font-size: 1.1rem; }
.heading-lg { font-size: 1.05rem; margin-bottom: 0.3rem; }
.heading-md { font-size: 1.05rem; margin-bottom: 0.5rem; }
.heading-sm { font-size: 1rem; margin-bottom: 0.5rem; }
.m-0 { margin: 0; }
.m-0-04 { margin: 0 0 0.4rem; }
.opacity-85-mb { opacity: 0.85; margin-bottom: 1.5rem; }
.opacity-80-mb { opacity: 0.8; margin-bottom: 1.5rem; }
.prose { line-height: 1.8; color: var(--text-main); }
.prose ul, .prose ol { padding-left: 1.5rem; margin: 0.75rem 0 1.25rem; }
.prose ul li, .prose ol li { margin: 0.3rem 0; padding-left: 0.25rem; }
.prose ul { list-style: disc outside; }
.prose ol { list-style: decimal outside; }
.max-w-720 { max-width: 720px; }
.related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.article-body { padding-top: 100px; padding-bottom: 3rem; }
.section-teal-cta-alt { padding: 4rem 1.5rem; background: var(--teal); text-align: center; color: #fff; }
.section-teal-light-lg { background: var(--teal-light); padding: 4rem 1.5rem; }
.teal-light-box { background: var(--teal-light); padding: 1.5rem; border-radius: var(--radius); }
.cream-box { background: var(--cream); padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
.service-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.link-grid-item { text-decoration: none; color: inherit; text-align: center; padding: 0.75rem; }
.bold-0 { margin: 0; font-weight: 600; }
.text-lg-0 { margin: 0; font-size: 1.1rem; }

/* Batch 4 utilities */
.text-light-mb-2 { color: var(--text-light); margin-bottom: 2rem; }
.text-light-mt-15 { color: var(--text-light); margin-top: 1.5rem; }
.section-charcoal-lg { background: var(--charcoal); padding: 4rem 1.5rem; color: #fff; }
.series-cta { background: var(--charcoal); color: #fff; padding: 2rem; border-radius: 12px; margin-top: 3rem; text-align: center; }
.info-card-white { background: #fff; border-radius: 12px; padding: 1.5rem; border-left: 4px solid var(--teal); }
.stat-card { background: #fff; border-radius: 10px; padding: 1rem; text-align: center; }
.pricing-heading { font-family: var(--font-display); font-size: 1.8rem; color: var(--teal); font-weight: 700; }
.pricing-heading-scoped { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--teal-dark); background: var(--teal-light); padding: 0.45rem 0.85rem; border-radius: var(--radius-pill); white-space: nowrap; letter-spacing: 0.01em; }
.flex-baseline { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.blog-img { width: 100%; border-radius: 8px; margin: 2rem 0; }
.footer-logo-compact { height: 50px; width: auto; margin: 0 auto 1rem; display: block; }
.img-80-compact { height: 80px; }
.fw-600 { font-weight: 600; margin: 0; }
.opacity-85-prose { opacity: 0.85; line-height: 1.8; margin-bottom: 1.25rem; }
.opacity-85-lh { opacity: 0.85; line-height: 1.8; }
.opacity-85-lh-mb { opacity: 0.85; line-height: 1.8; margin-bottom: 1.5rem; }

/* Batch 6 utilities */
.pricing-card-cream { background: var(--cream); border-radius: 12px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; }
.pricing-card-dark { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1.1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.info-card-white-mb { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; border-left: 4px solid var(--teal); }
.info-card-white-sm { background: #fff; border-radius: 10px; padding: 1.25rem; border-left: 4px solid var(--teal); }
.pt-0 { padding-top: 0; }
.text-charcoal-mb { font-size: 1rem; color: var(--charcoal); margin-bottom: 0.5rem; }
.text-light-xs { font-size: 0.85rem; color: var(--text-light); }
.d-none { display: none; }
.text-italic-mb { color: var(--text-main); font-style: italic; margin-bottom: 0.5rem; }
.avatar-lg-compact { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.img-rounded-full { width: 100%; height: auto; border-radius: 8px; }
.section-cream { padding: 3rem 0; background: var(--cream); }
.text-center-pad { text-align: center; padding: 2rem; }

/* Batch 7 — final long tail */
.opacity-70 { opacity: 0.7; }
.opacity-70-xs { opacity: 0.7; margin: 0.2rem 0 0; font-size: 0.85rem; }
.opacity-75-sm-0 { opacity: 0.75; font-size: 0.9rem; margin: 0; }
.container-1100-np { max-width: 1100px; margin: 0 auto; }
.series-nav { margin-top: 3rem; padding: 1.5rem; background: var(--cream); border-radius: var(--radius); }
.text-white-sm-mb { font-size: 1rem; color: #fff; margin-bottom: 0.4rem; }
.price-value { font-size: 1.2rem; font-weight: 700; color: var(--teal-bright); margin: 0; }
.text-sm-mb { font-size: 0.95rem; margin-bottom: 0.4rem; }
.text-sm-opacity { font-size: 0.85rem; opacity: 0.7; margin: 0 0 0.25rem; }
.series-label-sm { font-size: 0.85rem; font-weight: 600; color: var(--text-light); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Batch 8 — deep long tail */
.text-light-xs-center { font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem; text-align: center; }
.text-light-088-0 { color: var(--text-light); font-size: 0.88rem; margin: 0; }
.text-light-095-0 { color: var(--text-light); margin: 0; font-size: 0.95rem; }
.text-light-desc-095 { color: var(--text-light); margin: 0.3rem 0 0; font-size: 0.95rem; }
.text-light-lh-mb2 { color: var(--text-light); line-height: 1.8; margin-bottom: 2rem; }
.text-light-xs-mb05 { color: var(--text-light); font-size: 0.85rem; margin-bottom: 0.5rem; }
.text-dark { color: var(--text-dark); }
.grid-1 { display: grid; gap: 1rem; }
.grid-075-mt { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.grid-auto-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.flex-between-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.flex-between-start { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.flex-gap-2-compact { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.flex-contact-compact { display: flex; gap: 1.5rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
.charcoal-price-card { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.charcoal-stat { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 1rem; text-align: center; }
.charcoal-box-lg { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 1.2rem; }
.white-stat { background: #fff; border-radius: 10px; padding: 1.1rem; text-align: center; }
.bg-warm { background: var(--warm-bg); }
.heading-11 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.prose-lg { line-height: 1.8; font-size: 1.05rem; }
.mb-075 { margin-bottom: 0.75rem; }
.mb-04 { margin-bottom: 0.4rem; }
.m-2-0 { margin: 2rem 0; }
.m-0-opacity { margin: 0; opacity: 0.9; }
.opacity-85-mb1 { opacity: 0.85; margin-bottom: 1rem; }
.opacity-85-mb05 { opacity: 0.85; margin-bottom: 0.5rem; }
.opacity-90-desc { opacity: 0.9; margin: 0.3rem 0 0; font-size: 0.9rem; }
.opacity-75-desc { opacity: 0.75; margin: 0.3rem 0 0; font-size: 0.9rem; }
.max-w-900 { max-width: 900px; }
.img-80-auto { height: 80px; width: auto; }
.pb-1 { padding-bottom: 1rem; }
.pb-05 { padding-bottom: 0.5rem; }
.article-body-flush { padding-top: 100px; padding-bottom: 0; }
.section-cream-padded { padding: 2rem 1.5rem 3rem; background: var(--cream); }
.m-0-text-light { margin: 0; color: var(--text-light); }
.text-sm-light-0 { margin: 0; font-size: 0.9rem; color: var(--text-light); }
.callout-teal { border-left: 3px solid var(--teal); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--teal-light); border-radius: 0 8px 8px 0; }
.warning-card { background: #fff; border-radius: 10px; padding: 1.1rem; border-left: 4px solid #f57c00; }
.btn-teal-white { background: var(--teal); color: #fff; }
.review-footer { font-style: italic; font-size: 0.85rem; color: var(--teal-dark); margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.btn-accent { background: var(--accent); color: #fff; }

/* Batch 9 — final sweep */
.blog-card-link { text-decoration: none; background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.blog-card-body-pad { padding: 1.25rem; flex: 1; }
.blog-card-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.opacity-85-0 { opacity: 0.85; margin: 0; }
.opacity-85-mt15 { opacity: 0.85; margin-top: 1.5rem; }
.opacity-90-white { opacity: 0.9; color: #fff; margin: 1rem 0 2rem; }
.opacity-75-088 { opacity: 0.75; margin: 0.5rem 0 0; font-size: 0.88rem; }
.opacity-75-lh-0 { opacity: 0.75; line-height: 1.8; font-size: 0.9rem; margin: 0; }
.container-800-padded-c { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }

/* Batch 10 — final 3-4 occurrence patterns */
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-light); }
.text-dark-bold-mb1 { font-weight: 600; color: var(--text-dark); margin: 0 0 1rem; font-size: 0.9rem; }
.text-dark-bold-mb05 { font-weight: 600; color: var(--text-dark); margin: 0 0 0.5rem; }
.text-light-08 { font-size: 0.8rem; color: var(--text-light); }
.text-light-075 { font-size: 0.75rem; font-weight: 600; color: var(--text-light); letter-spacing: 0.05em; }
.text-light-0875 { color: var(--text-light); font-size: 0.875rem; margin: 0; }
.text-white-075 { color: rgba(255,255,255,0.75); margin: 0 0 1.5rem; font-size: 0.9rem; }
.text-white-mb05 { color: #fff; margin: 0 0 0.5rem; }
.text-teal-bold-nowrap { color: var(--teal); font-weight: 700; white-space: nowrap; }
.cta-dark-box { background: var(--text-dark); border-radius: var(--radius); padding: 2rem; text-align: center; margin-top: 2rem; }
.alt-header { background: var(--bg-alt); padding: 1rem; display: flex; align-items: center; justify-content: space-between; }
.alt-callout { background: var(--bg-alt); border-left: 4px solid var(--accent); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.5rem; }
.step-number { background: var(--teal); color: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.cream-price-row { background: var(--cream); border-radius: 10px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.white-price-row { background: #fff; border-radius: 10px; padding: 1.1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.blog-thumb { width: 100%; height: 180px; object-fit: cover; }
.img-block { width: 100%; border-radius: 8px; display: block; }
.max-w-640 { max-width: 640px; }
.container-800-pad { padding: 2rem; max-width: 800px; margin: 0 auto; }
.max-w-800-center { max-width: 800px; text-align: center; }
.bold-08 { margin: 0 0 0.8rem; font-weight: 600; }
.img-70 { height: 70px; width: auto; }
.review-meta { font-weight: 600; margin-top: 0.75rem; font-size: 0.9rem; }
.price-lg { font-size: 1.5rem; font-weight: 700; color: var(--teal-bright); }
.quote-white { font-size: 1.25rem; font-style: italic; color: #fff; margin-bottom: 1rem; }
.text-xs-center { font-size: 0.8rem; color: var(--text-light); margin-top: 0.5rem; text-align: center; }
.text-07-dm { font-size: 0.7rem; font-family: var(--font-body); color: var(--text-light); }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.text-light-sm-mb125c { color: var(--text-light); font-size: 0.9rem; margin-bottom: 1.25rem; }
.text-light-sm-mt1 { color: var(--text-light); font-size: 0.9rem; margin-top: 1rem; }
.text-light-mt15-sm { color: var(--text-light); margin-top: 1.5rem; font-size: 0.9rem; }
.text-teal-dark-500 { color: var(--teal-dark); font-weight: 500; font-size: 0.9rem; }
.text-teal-bright-11 { color: var(--teal-bright); font-size: 1.1rem; }
.badge-red { background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; }
.highlight-box-lg { background: var(--teal-light); border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 1.5rem; }
.section-teal-sm { background: var(--teal); padding: 1.5rem; text-align: center; }
.cream-card-lg { background: var(--cream); border-radius: 12px; padding: 2rem; margin-bottom: 1rem; }
.cream-stat { background: var(--cream); border-radius: 10px; padding: 1rem; text-align: center; }
.section-dark { background: var(--bg-dark); padding: 3rem 1.5rem; }
.charcoal-box { background: rgba(255,255,255,0.08); border-radius: var(--radius); padding: 1.5rem; }
.white-card-mb { background: #fff; border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; }
.white-card-lg { background: #fff; border-radius: 12px; padding: 1.5rem; }
.opacity-80-sm { opacity: 0.8; font-size: 0.9rem; }
.opacity-80-095 { opacity: 0.8; font-size: 0.95rem; }

/* ---- BLOG ENGINE — search, filter, show more, related posts ---- */

/* Search box */
.blog-search-wrap { max-width: 480px; margin: 1.5rem auto 0; }
.blog-search-field { position: relative; display: flex; align-items: center; }
.blog-search-icon { position: absolute; left: 1rem; color: var(--text-light); pointer-events: none; flex-shrink: 0; }
.blog-search { width: 100%; padding: 0.75rem 2.5rem 0.75rem 2.8rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; font-family: var(--font-body); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; min-height: 44px; }
.blog-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,122,110,0.15); }
.blog-search-clear { position: absolute; right: 0.75rem; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-light); padding: 0.25rem 0.5rem; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.blog-search-clear:hover { color: var(--charcoal); }

/* Filter pills */
.blog-filter-bar { max-width: 1100px; margin: 0 auto; padding: 0.4rem 1.5rem 0.65rem; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.blog-filter-bar::-webkit-scrollbar { display: none; }
.blog-filter-pill { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.15); padding: 0.32rem 0.85rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: var(--font-body); min-height: 32px; }
.blog-filter-pill:hover { background: rgba(255,255,255,0.2); color: #fff; }
.blog-filter-pill.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Active section link in blog nav */
.blog-nav-inner a.blog-nav-active { color: #fff; border-bottom-color: var(--teal); }

/* Show more */
.blog-show-more-wrap { text-align: center; margin-top: 1.5rem; }
.blog-show-more { cursor: pointer; }

/* Hidden cards (show more) */
.blog-card-hidden { display: none !important; }

/* No results */
.blog-no-results { text-align: center; padding: 3rem 1.5rem; color: var(--text-light); font-size: 0.95rem; display: none; }
.blog-clear-all { background: none; border: none; color: var(--teal); cursor: pointer; font-weight: 600; text-decoration: underline; font-size: inherit; font-family: inherit; padding: 0; }
.blog-clear-all:hover { color: var(--teal-dark); }

/* Clickable tags */
.blog-tag[data-clickable] { cursor: pointer; transition: background 0.15s, color 0.15s; }
.blog-tag[data-clickable]:hover { background: var(--teal); color: #fff; }

/* Related posts (individual blog pages) */
.related-posts-auto { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.related-posts-auto h3 { font-size: 1.1rem; margin-bottom: 1.25rem; }
.related-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.related-post-card { text-decoration: none; color: inherit; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.related-post-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.related-post-card img { width: 100%; height: 120px; object-fit: cover; }
.related-post-body { padding: 0.85rem; }
.related-post-body .blog-tag { font-size: 0.68rem; margin-bottom: 0.3rem; margin-right: 0.25rem; }
.related-post-title { font-size: 0.85rem; font-weight: 600; color: var(--charcoal); margin: 0.4rem 0 0; line-height: 1.4; }
@media (max-width: 600px) { .related-posts-grid { grid-template-columns: 1fr; } }

/* Final utility classes */
.text-charcoal { color: var(--charcoal); }
.text-warning { color: #f57c00; }
.text-danger { color: #d32f2f; }
.d-block { display: block; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.badge-amber { background: #fef3c7; color: #92400e; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.8rem; white-space: nowrap; }
.badge-green { background: #d1fae5; color: #065f46; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.8rem; white-space: nowrap; }
.warning-box { background: #fff3f3; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #e74c3c; margin: 1.5rem 0; }
.amber-card { background: #FEF3C7; border-radius: 10px; padding: 1.25rem; border-left: 4px solid #D97706; }
.dashed-cta { background: var(--bg-alt); border-radius: var(--radius); padding: 2rem; text-align: center; margin-bottom: 1.5rem; border: 2px dashed var(--border); }
.teal-callout-lg { background: var(--teal-light); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: 1.5rem; margin: 2rem 0; }

/* Final sweep */
.p-2 { padding: 2rem; }
.text-info { color: #1976d2; }
.text-error { color: #c0392b; font-weight: 600; margin: 0 0 0.5rem; }
.grid-auto-250-mt { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.grid-auto-240-mt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.article-body-cream { padding-top: 100px; padding-bottom: 3rem; background: var(--cream); }
.container-800-hero { padding: 80px 1.5rem 0; max-width: 800px; margin: 0 auto; }
.container-800-deep { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.btn-lg { font-size: 1.1rem; padding: 1rem 2.5rem; }

/* Batch 5 utilities */
.text-dark-bold-mb { font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; }
.link-teal-sm { color: var(--teal); text-decoration: none; font-size: 0.9rem; }
.link-teal-dark { color: var(--teal-dark); text-decoration: none; }
.link-teal-dark-bold { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.mb-05-mt-1 { margin-bottom: 0.5rem; margin-top: 1rem; }
.text-light-sm-desc { color: var(--text-light); font-size: 0.88rem; margin: 0.4rem 0 0; }
.text-white-bold-sm { color: #fff; font-weight: 600; font-size: 0.95rem; }
.text-light-italic { color: var(--text-light); font-style: italic; }
.text-light-095 { color: var(--text-light); font-size: 0.95rem; }
.text-light-mt-075 { color: var(--text-light); margin-top: 0.75rem; font-size: 0.9rem; }
.text-light-sm-mb-05 { color: var(--text-light); margin-bottom: 0.5rem; }
.mt-1-sm { margin-top: 1rem; font-size: 0.9rem; }
.input-field { padding: 0.75rem 1rem; border: 1px solid var(--border); }
.avatar-lg { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.text-xs { font-size: 0.65rem; font-family: var(--font-body); color: var(--text-light); }
.flex-gap-2 { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.flex-wrap-mb15 { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.charcoal-detail-sm { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1.1rem; }
.white-card-sm { background: #fff; border-radius: 10px; padding: 1.1rem; }
.section-center { padding: 3rem 1.5rem; text-align: center; }
.section-teal-light-padded { padding: 2rem 1.5rem 3rem; background: var(--teal-light); }
.container-800-padded { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.bold-075 { margin: 0 0 0.75rem; font-weight: 600; }
.teal-bold-0 { font-weight: 700; color: var(--teal); margin: 0; }
.text-xs-label { font-size: 0.8rem; color: var(--text-light); margin: 0 0 0.2rem; }
.text-095-0 { color: var(--text-light); font-size: 0.95rem; line-height: 1.7; margin: 0; }
.flex-min-200 { flex: 1; min-width: 200px; }
.blog-header-img { width: 100%; border-radius: 8px; margin-bottom: 2rem; }
.section-warm-alt { padding: 3rem 0; background: var(--warm-bg); }
.text-0-095 { margin: 0; font-size: 0.95rem; }
.pad-section { padding: 2rem 1.5rem 3rem; }

/* ============================================
   BLOG REWRITE UTILITIES (Apr 2026)
   Added for the max-SEO/LLM blog rewrite pass.
   TL;DR boxes, TOC, comparison tables, HowTo
   step lists, citations, author cards, meta row.
   ============================================ */

/* Meta row: author, updated date, read time */
.meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; color: var(--text-light); font-size: 0.9rem; margin-bottom: 1.5rem; }
.meta-row > * { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta-row .meta-sep { color: var(--border); }
.meta-row .niceic-chip { background: var(--teal-light); color: var(--teal-dark); font-weight: 600; font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px; }

/* TL;DR / Key takeaways */
.tldr { background: var(--teal-light); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; }
.tldr-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--teal-dark); margin-bottom: 0.6rem; }
.tldr ul { margin: 0; padding-left: 1.2rem; }
.tldr li { margin: 0.35rem 0; line-height: 1.55; }

/* Table of contents */
.toc { background: var(--warm-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 1.5rem 0 2rem; }
.toc-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--charcoal); margin-bottom: 0.6rem; }
.toc ol { margin: 0; padding-left: 1.5rem; columns: 1; column-gap: 2rem; }
@media (min-width: 768px) { .toc ol { columns: 2; } }
.toc li { margin: 0.2rem 0; break-inside: avoid; }
.toc a { color: var(--teal-dark); }

/* Comparison tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
table.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
table.compare caption { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--teal-dark); padding-bottom: 0.5rem; caption-side: top; }
table.compare th, table.compare td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.compare thead th { background: var(--teal-light); color: var(--teal-dark); font-weight: 700; border-bottom: 2px solid var(--teal); }
table.compare tbody tr:nth-child(even) td { background: rgba(232, 245, 242, 0.35); }
table.compare tbody tr:last-child td { border-bottom: none; }

/* HowTo numbered steps */
ol.howto { list-style: none; counter-reset: howto; padding: 0; margin: 1.5rem 0; }
ol.howto > li { counter-increment: howto; position: relative; padding: 0.4rem 0 1rem 3.2rem; min-height: 2.4rem; }
ol.howto > li::before { content: counter(howto); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; line-height: 1; }
ol.howto .howto-title { display: block; font-weight: 700; color: var(--charcoal); margin-bottom: 0.2rem; }

/* Timeline (vertical ordered list with teal dots) */
ol.timeline { list-style: none; padding: 0 0 0 1.5rem; margin: 1.5rem 0; border-left: 2px solid var(--teal-light); }
ol.timeline > li { position: relative; padding: 0 0 1.1rem 1.2rem; }
ol.timeline > li::before { content: ""; position: absolute; left: -1.95rem; top: 0.4rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--warm-bg); }
ol.timeline .tl-date { display: block; font-weight: 700; color: var(--teal-dark); font-size: 0.88rem; letter-spacing: 0.3px; }

/* Citation list + inline ref links */
.ref-link { color: var(--teal-dark); font-weight: 600; font-size: 0.72em; text-decoration: none; padding: 0 0.1rem; }
.ref-link:hover { text-decoration: underline; }
ol.citations { list-style: decimal; padding-left: 1.6rem; margin: 1.5rem 0; font-size: 0.88rem; color: var(--text-light); }
ol.citations li { margin: 0.4rem 0; padding-left: 0.3rem; line-height: 1.55; }
ol.citations a { word-break: break-word; }

/* Author bio card */
.author-card { display: flex; gap: 1.2rem; align-items: flex-start; background: var(--warm-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; margin: 2rem 0; }
.author-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-card .author-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.15rem; color: var(--charcoal); }
.author-card .author-role { font-size: 0.88rem; color: var(--text-light); margin-bottom: 0.5rem; }
.author-card .author-creds { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.author-card .author-creds span { background: var(--teal-light); color: var(--teal-dark); font-size: 0.72rem; font-weight: 600; padding: 0.18rem 0.55rem; border-radius: 999px; }
.author-card p { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 520px) { .author-card { flex-direction: column; } .author-card img { width: 64px; height: 64px; } }

/* FAQ accordion (native details/summary) */
details.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0; margin: 0.6rem 0; }
details.faq-item[open] { box-shadow: var(--shadow-sm); }
details.faq-item > summary { list-style: none; cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 600; color: var(--charcoal); position: relative; padding-right: 2.4rem; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--teal); line-height: 1; font-weight: 400; }
details.faq-item[open] > summary::after { content: "\2212"; }
details.faq-item > div { padding: 0 1.1rem 1rem; line-height: 1.7; }

/* SVG diagram wrapper */
.diagram { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { font-size: 0.85rem; color: var(--text-light); text-align: center; margin-top: 0.6rem; }
.flex-center-075 { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.75rem 0 1.5rem; }
/* ---- INLINE-STYLE EXTRACTIONS (auto-generated) ---- */
.tag-list-inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.85rem; color: var(--text-light); }
.article-img-mb { width: 100%; border-radius: 8px; margin-bottom: 2rem; }
.article-img-my { width: 100%; border-radius: 8px; margin: 2rem 0; }
.section-divider { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
.hero-img-cover { width: 100%; border-radius: 12px; object-fit: cover; height: 350px; }
.blog-card-img-180 { width: 100%; height: 180px; object-fit: cover; }
.mt-25 { margin-top: 2.5rem; }
.article-img-caption { font-size: 0.85rem; color: var(--text-light); text-align: center; margin-bottom: 1.5rem; }
.article-img-mb-sm { width: 100%; border-radius: 8px; margin-bottom: 1rem; }