/* theme.css — starter design system, customize colors/fonts per client brand */

:root {
  --color-bg: #f5f1eb;
  --color-bg-alt: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5a5a;
  --color-border: #7c715c;
  --color-primary: #1f3d2f;
  --color-primary-dark: #162a21;
  --color-accent: #8e6d2e;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3, h4 { line-height: 1.2; }

.btn {
  display: inline-block; padding: 0.85rem 1.6rem; font-size: 1rem; font-weight: 700;
  text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.btn-secondary { background: #c5985b; color: #fff; }
.btn-secondary:hover { background: #b08650; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(197,152,91,0.4); }
.btn-ghost { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #FBF5F0 !important; border-bottom: none;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 88px; }
.brand { display: flex; align-items: center; text-decoration: none; position: relative; z-index: 1001; margin-bottom: -50px; background: #FBF5F0; padding: 1.25rem 2rem; border-radius: 0 0 20px 20px; }
.brand img { display: block; height: auto; max-height: 150px; width: 100%; transition: all 0.3s; }
.main-nav { display: flex; gap: 1.75rem; }
.main-nav a { color: #1C3C2D; text-decoration: none; font-weight: 600; font-size: 0.95rem; position: relative; padding-bottom: 0.25rem; }
.main-nav a:hover { color: #c5985b; }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #c5985b; border-radius: 2px 2px 0 0; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle { display: none; background: none; border: none; color: #1C3C2D; cursor: pointer; padding: 4px; }

/* Mobile drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; }
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: #FBF5F0;
  z-index: 1200; padding: 1.5rem; overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,0.15);
}
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mobile-drawer-title { font-weight: 800; font-size: 1.1rem; color: #1C3C2D; }
.mobile-drawer-close { background: none; border: none; color: #1C3C2D; cursor: pointer; }
.mobile-drawer nav { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; }
.mobile-nav-link { display: block; padding: 0.85rem 0; color: #1C3C2D; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(28,60,45,0.1); }
.mobile-nav-ctas { display: flex; flex-direction: column; gap: 0.75rem; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; padding: 8rem 1.25rem 5rem; text-align: center; }
.hero-content { max-width: 1140px; margin: 0 auto; }
.hero h1 { font-size: 2.75rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; opacity: 0.95; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Hero with a background video — add class="hero-video-bg" to .hero, then inside it:
   <video class="hero-bg-video" autoplay muted loop playsinline poster="fallback.jpg">
     <source src="/media/{project}/{file}.mp4" type="video/mp4">
   </video>
   before .hero-content. The dark overlay (::after) keeps text legible over any footage;
   poster + the gradient background (still set via .hero above) cover the moment before the
   video loads and any browser/data-saver setting that blocks video entirely. */
.hero-video-bg { position: relative; overflow: hidden; }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-video-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 1; }
.hero-video-bg .hero-content { position: relative; z-index: 2; }

/* Sections */
.section { padding: 4rem 1.25rem; }
.section.bg-alt { background: var(--color-bg-alt); }
.section-title { text-align: center; font-size: 2.2rem; margin-bottom: 0.75rem; }
.section-subtitle { text-align: center; color: var(--color-text-muted); max-width: 620px; margin: 0 auto 2.5rem; font-size: 1.1rem; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.75rem; transition: all 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: var(--color-accent); }
.card h3 { margin-bottom: 0.6rem; font-size: 1.25rem; }
.card p { color: var(--color-text-muted); }

/* CTA band */
.cta-band { background: var(--color-accent); color: #fff; text-align: center; padding: 3.5rem 1.25rem; }
.cta-band h2 { font-size: 2rem; margin-bottom: 0.75rem; }
.cta-band p { margin-bottom: 1.5rem; opacity: 0.95; }

/* Footer */
.site-footer { background: var(--color-primary-dark); color: #fff; padding: 3rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-col h3 { margin-bottom: 0.85rem; }
.footer-col p, .footer-col a { display: block; color: rgba(255,255,255,0.8); text-decoration: none; margin-bottom: 0.5rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); font-size: 0.9rem; }

/* Responsive helpers */
.hide-below-md, .hide-below-sm { }
@media (max-width: 980px) {
  .hide-below-md { display: none !important; }
  .main-nav { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 600px) {
  .hide-below-sm { display: none !important; }
  .hero h1 { font-size: 2rem; }
  .section-title { font-size: 1.7rem; }
}

/* ==========================================================================
   Home Services template components — added 2026-08-05. Reuses the same
   --color-* / --font-sans custom properties above so the whole template stays
   themeable per client brand exactly like the rest of this file. Safe to
   leave in place even on projects that don't use the Services template —
   these classes just go unused if nothing references them.
   ========================================================================== */

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 700; color: var(--color-accent); margin-bottom: 0.6rem; }
.eyebrow-on-dark { color: #fff; opacity: 0.85; }
.card-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--color-text); }

/* Hero with a still-image background (sibling to .hero-video-bg above) — same overlay/z-index
   approach, but with a real <img data-placeholder="true"> so it's picked up by the "Placeholders
   to fill" scanner and carries real width/height like every other image on the site. */
.hero-image-bg { position: relative; overflow: hidden; }
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-image-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; text-align: left; }
.hero-image-bg .hero-content { max-width: none; }
.hero-image-bg .hero-actions { justify-content: flex-start; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 700; opacity: 0.85; margin-bottom: 0.5rem; }
.hero-ghost-on-image { border-color: #fff; color: #fff; }
.hero-ghost-on-image:hover { background: #fff; color: var(--color-primary-dark); }

/* Hero quick-quote card — replaces a trust-badge graphic with a real lead-capture form so a
   visitor never has to scroll to hand over contact info. */
.hero-quote-card { background: var(--color-bg); color: var(--color-text); border-radius: 14px; padding: 1.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.35); text-align: left; }
.hero-quote-card h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.hero-quote-card > p { color: var(--color-text-muted); margin-bottom: 1.25rem; font-size: 0.95rem; }
.trust-badge-row { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-primary); text-transform: uppercase; margin-bottom: 1rem; }
.quote-form { display: flex; flex-direction: column; gap: 0.9rem; }
/* Same specificity-vs-hidden trap already documented for .raw-editor/.mention-popup in the
   editor UI: a class-based display:flex rule ties with the UA stylesheet's hidden-attribute
   display:none rule on specificity, and ours loads later — so hiding a submitted form via the
   hidden attribute silently did nothing without this explicit override. */
.quote-form[hidden] { display: none; }
.quote-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.quote-field input, .quote-field select, .quote-field textarea { font: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; color: var(--color-text); }
.quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.btn-block { width: 100%; text-align: center; }
.quote-form-note { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; margin-top: 0.25rem; }
.quote-form-success h3 { margin-bottom: 0.4rem; }
.quote-form-success p { color: var(--color-text-muted); }

/* Service preview strip */
.service-strip-section { padding-top: 2rem; padding-bottom: 2rem; }
.service-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.service-strip-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; text-align: center; }
.service-strip-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.service-strip-card p { color: var(--color-text-muted); font-size: 0.9rem; }
.service-strip-card.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.service-strip-card.is-active p { color: rgba(255,255,255,0.85); }

/* About/stats split + split-callout + why-split share the same two-column layout */
.about-split-grid, .split-callout-grid, .why-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.stat-photo-wrap { position: relative; }
.stat-photo-wrap img { width: 100%; height: auto; border-radius: 14px; display: block; }
.stat-badge { position: absolute; bottom: -1.5rem; right: -1rem; background: var(--color-bg); border-radius: 50%; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 0.5rem; }
.stat-badge-num { font-size: 1.7rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.stat-badge-label { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.about-copy h2 { font-size: 2rem; margin-bottom: 1rem; }
.about-copy p { color: var(--color-text-muted); margin-bottom: 1rem; }
.about-stats-row { display: flex; gap: 2.5rem; margin: 1.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.about-stat-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--color-primary); }
.about-stat-label { font-size: 0.85rem; color: var(--color-text-muted); }

.split-callout-panel { background: var(--color-primary); color: #fff; border-radius: 14px; padding: 2rem; }
.split-callout-panel h2 { margin-bottom: 0.75rem; font-size: 1.5rem; }
.split-callout-panel p { opacity: 0.9; }
.split-callout-grid img { width: 100%; height: auto; border-radius: 14px; display: block; }

/* Service-area strip (block) — plain city-name pills in a horizontal scroller, deliberately not
   real municipal seal artwork (a trademark/usage-rights question on the reference site this
   template was inspired by) — see the Services Template build brief. */
.area-strip-section { text-align: center; }
.area-strip-heading { font-size: 1.9rem; margin-bottom: 1.75rem; }
.area-strip-highlight { color: var(--color-accent); }
.area-pill-row { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.25rem 0.1rem 1rem; scroll-snap-type: x proximity; }
.area-pill { flex: 0 0 auto; scroll-snap-align: start; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.6rem 1.25rem; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* CTA band with an image background (sibling to the plain solid .cta-band above) */
.cta-band-image { position: relative; overflow: hidden; padding: 5rem 1.25rem; }
.cta-band-bg { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; z-index: 0; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cta-band-image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 1; }
.cta-band-content { position: relative; z-index: 2; color: #fff; text-align: center; max-width: 620px; margin: 0 auto; }

/* Disable parallax on mobile to avoid performance issues */
@media (max-width: 768px) {
  .cta-band-bg { height: 100%; }
}

/* Services grid with an icon badge overlapping each photo */
.services-grid-section { text-align: center; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; margin-top: 2rem; text-align: left; }
.service-grid-card { position: relative; transition: all 0.3s ease; }
.service-grid-card:hover { transform: translateY(-6px); }
.service-grid-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; display: block; transition: all 0.3s ease; }
.service-grid-card:hover img { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.service-icon-badge { position: absolute; top: 148px; left: 1rem; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid var(--color-bg); transition: all 0.3s ease; }
.service-grid-card:hover .service-icon-badge { background: var(--color-accent); transform: scale(1.1); }
.service-grid-card h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.service-grid-card p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.3rem; }

/* Why choose us — icon strip + dark checklist split */
.why-strip { background: var(--color-primary-dark); color: #fff; padding: 2.5rem 1.25rem; }
.why-strip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; text-align: center; }
.why-strip-item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 140px; font-size: 0.85rem; font-weight: 600; }
.why-icon { width: 40px; height: 40px; }
.why-split { background: var(--color-text); color: #fff; padding: 4rem 1.25rem; }
.why-split-copy h2 { font-size: 2rem; margin: 0.5rem 0 1rem; }
.why-split-copy > p { opacity: 0.85; margin-bottom: 1.5rem; }
.why-checklist { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.75rem; }
.why-checklist li { display: flex; gap: 0.85rem; align-items: flex-start; }
.check-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.why-checklist p { opacity: 0.75; font-size: 0.9rem; margin-top: 0.2rem; }
.why-split-img { width: 100%; height: auto; border-radius: 14px; display: block; }

/* Testimonials (block) */
.testimonial-section { text-align: center; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem; text-align: left; }
.testimonial-card { background: var(--color-bg-alt); border-radius: 12px; padding: 1.75rem; transition: all 0.3s ease; border: 1px solid transparent; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-color: var(--color-accent); }
.testimonial-card p { color: var(--color-text-muted); font-style: italic; margin-bottom: 1rem; }
.testimonial-name { font-weight: 700; }

/* Before/after compare slider — a native <input type="range"> stretched over the whole image,
   invisible, driving a clip-path reveal. Keyboard-accessible for free; no drag/pointer-event JS
   needed. */
.compare-section { text-align: center; }
.compare-slider { position: relative; max-width: 900px; margin: 2rem auto 0; border-radius: 14px; overflow: hidden; }
.compare-slider img { width: 100%; height: auto; display: block; }
.compare-slider .compare-after { height: 100%; object-fit: cover; }
.compare-after-wrap { position: absolute; inset: 0; overflow: hidden; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; pointer-events: none; transform: translateX(-50%); box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.compare-handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text); font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.compare-label { position: absolute; top: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(0,0,0,0.55); color: #fff; padding: 0.35rem 0.75rem; border-radius: 999px; pointer-events: none; }
.compare-label-before { left: 1rem; }
.compare-label-after { right: 1rem; }

/* FAQ — native <details>/<summary> accordion, zero JS, keyboard-accessible by default */
.faq-grid { display: grid; grid-template-columns: 340px 1fr; gap: 3rem; }
.faq-advice-card { background: var(--color-primary); color: #fff; border-radius: 14px; padding: 1.75rem; margin-bottom: 1.5rem; }
.faq-advice-card .card-title { color: #fff; }
.faq-advice-card p { opacity: 0.9; margin-bottom: 0.75rem; }
.faq-phone a { color: #fff; font-weight: 700; }
.faq-form-card { background: var(--color-bg-alt); border-radius: 14px; padding: 1.75rem; }
.faq-form-card .card-title { margin-bottom: 1rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.faq-item { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--color-text-muted); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--color-border); }
.faq-item p { padding: 1rem 1.25rem; color: var(--color-text-muted); }

/* Portfolio grid */
.portfolio-section { text-align: center; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.portfolio-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; display: block; }

/* Newsletter band (block) */
.newsletter-band { background: linear-gradient(120deg, var(--color-primary-dark), var(--color-text)); color: #fff; padding: 2.5rem 1.25rem; }
.newsletter-band-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.newsletter-band-grid p { max-width: 420px; font-size: 1.05rem; }
.newsletter-form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.newsletter-form[hidden] { display: none; }
.newsletter-form input { font: inherit; padding: 0.75rem 1rem; border-radius: 999px; border: none; min-width: 220px; }

/* Hero slider — auto-rotating image slides with per-slide content overlay */
.hero-slider { position: relative; overflow: hidden; min-height: 600px; background: var(--color-primary-dark); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.15)); }
.hero-slide-content { position: relative; z-index: 2; color: #fff; padding: 14rem 0 5rem; max-width: 1050px; }
.hero-slide-content h1, .hero-slide-content h2 { font-size: 2.75rem; margin-bottom: 1rem; }
.hero-slide-content > p { font-size: 1.15rem; opacity: 0.95; margin-bottom: 1.5rem; }
.hero-slider-dots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.5rem; }
.hero-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; transition: background 0.3s; }
.hero-dot.is-active { background: #fff; }
.hero-dot:hover { background: rgba(255,255,255,0.8); }

/* Page-title banner — inner-page heading strip so visitors know where they are immediately */
.page-title-banner { background: var(--color-primary-dark); color: #fff; padding: 3rem 1.25rem 2.5rem; }
.page-title-inner { text-align: center; }
.page-title-banner h1 { font-size: 2.5rem; margin-bottom: 0; }
.page-title-breadcrumb { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.5rem; }
.page-title-breadcrumb a { color: inherit; text-decoration: underline; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-image-bg .hero-actions { justify-content: center; }
  .hero-quote-card { text-align: left; }
  .about-split-grid, .split-callout-grid, .why-split-grid, .faq-grid { grid-template-columns: 1fr; }
  .stat-badge { width: 100px; height: 100px; }
  .stat-badge-num { font-size: 1.3rem; }
  .hero-slider { min-height: 480px; }
  .hero-slide-content { padding: 10rem 0 4rem; }
  .hero-slide-content h1, .hero-slide-content h2 { font-size: 2rem; }
  .page-title-banner h1 { font-size: 1.8rem; }
}

@media (max-width: 600px) {
  .about-stats-row { flex-direction: column; gap: 1rem; }
}

/* Mobile responsive overrides for footer grid */
@media (max-width: 900px) {
  .site-footer [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  .site-footer [style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 600px) {
  .site-footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Scroll-triggered animations — add data-animate="fade-up" (or fade-in, slide-left,
   slide-right, zoom-in) to any element. A tiny IntersectionObserver script (auto-injected
   by the platform) adds .is-animated when the element scrolls into view. Use data-delay="N"
   (ms) on siblings for staggered reveals (e.g. cards appearing one by one). */
[data-animate] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
[data-animate="fade-up"] { transform: translateY(30px); }
[data-animate="slide-left"] { transform: translateX(-40px); }
[data-animate="slide-right"] { transform: translateX(40px); }
[data-animate="zoom-in"] { transform: scale(0.92); }
[data-animate].is-animated { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* Enhanced hover states for inline-styled buttons and links that look like buttons */
a[style*="background"]:hover,
button[style*="background"]:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Service cards with inline styles get hover effect */
[style*="background: #fff"][style*="border"][style*="border-radius: 12px"]:not(form):hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}

/* Flip cards — 3D card flip on hover, showing city name front / detailed content back */
.flip-card { perspective: 1000px; height: 200px; cursor: pointer; overflow: hidden; position: relative; }
.flip-card-inner { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  transition: transform 0.6s; 
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, 
.flip-card-back { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; 
  border-radius: 12px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.flip-card-front { 
  background: var(--color-bg); 
  border: 1px solid var(--color-border); 
  transform: rotateY(0deg); 
}
.flip-card-front h3 { 
  font-size: 1.2rem; 
  text-align: center; 
  color: var(--color-text); 
  margin: 0; 
}
.flip-card-back { 
  background: var(--color-primary); 
  color: #fff; 
  transform: rotateY(180deg); 
  text-align: center; 
}
.flip-card-back h3 { 
  font-size: 1.1rem; 
  margin-bottom: 0.75rem; 
}
.flip-card-back p { 
  font-size: 0.85rem; 
  opacity: 0.95; 
  line-height: 1.5; 
  margin: 0;
}