/* ============================================================
   page-home.css  —  Approved homepage styling.
   Loaded only on the homepage, linked last in <head> so its cascade
   order vs. the shared /assets/css/style.css is unchanged. Scoped to
   body.home-prototype (the homepage <body> class). Note: the page's
   element-level inline style="" attributes are a known remaining
   cleanup item and were intentionally left for a later pass.
   ============================================================ */

  /* Homepage-specific layout rules. Base, tokens, buttons, section-label,
     section-title, and accent-divider are defined in /assets/css/style.css. */

  /* ============================================================
     HOMEPAGE SYSTEM — light/premium restyle.
     Homepage-only layer over the shared /assets/css/style.css, which is
     intentionally left unchanged so every other page is unaffected.
     ============================================================ */
  body.home-prototype {
    --hp-base:var(--surface-cream); /* shared cream: Press, Reviews, and offer cards */
    --hp-header:#FCFCFA;       /* approved warm-white navigation surface */
    --hp-surface:#EAF6FB;      /* pale cyan surface */
    --hp-surface-mid:#DDEFF6;  /* slightly deeper cyan for occasional section depth */
    --hp-cyan:#D6EEF8;         /* logo cyan (matches --ice) */
    --hp-cyan-border:#BFE1EE;  /* cyan hairline */
    --hp-cyan-accent:#2E9BC0;  /* visible cyan accent for lines/icons */
    --hp-ink:#0F2340;          /* navy, now used as text */
    --hp-ink-soft:#3A5578;     /* muted navy text */
    --hp-book:#167A45;         /* dark emerald — online booking action */
    --hp-book-hover:#115F35;
  }

  /* --- Header: navy bar -> light navigation --- */
  /* Top bar (logo + announce) gets a faint cyan wash so it reads as its own
     band above the white navigation bar. */
  body.home-prototype .as-row1 {
    background: var(--hp-surface);
    border-bottom: 1px solid var(--hp-cyan-border);
  }
  body.home-prototype .as-navbar {
    background: var(--hp-header);
    border-bottom: 1px solid var(--hp-cyan-border);
    box-shadow: 0 1px 0 rgba(15,35,64,0.04), 0 8px 24px rgba(15,35,64,0.06);
  }
  body.home-prototype .as-nav-list > li > a {
    color: var(--hp-ink);
    text-transform: none;
    letter-spacing: 0.005em;
    font-weight: 600;
    font-size: 15px;
  }
  body.home-prototype .as-nav-list > li > a:hover { color: var(--hp-cyan-accent); }
  body.home-prototype .as-nav-list > li > a::after { background: var(--hp-cyan-accent); }
  /* Desktop dropdown panels -> white cards with cyan accent */
  body.home-prototype .as-dropdown {
    background: #fff;
    border-top: 2px solid var(--hp-cyan-accent);
    box-shadow: 0 12px 30px rgba(15,35,64,0.12);
  }
  body.home-prototype .as-dropdown li a {
    color: var(--hp-ink);
    border-bottom: 1px solid rgba(15,35,64,0.06);
  }
  body.home-prototype .as-dropdown li a:hover { background: var(--hp-surface); }

  /* Header phone/book colors now come from the global semantic system
     (data-cta="phone" -> orange, data-cta="book" -> green). The old homepage
     white-outline phone override was removed so the meaning colors govern. */

  /* Hamburger toggle stays orange on the light header — the shared
     rgba(255,255,255,.08) hover was built for the dark navy bar and turned
     it white-on-white here. */
  body.home-prototype .as-mobile-toggle:hover { background: var(--action-phone-hover); }
  body.home-prototype .as-mobile-toggle:hover i { color: #fff !important; }

  body.home-prototype .hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Mobile drawer (<=1024px) -> light to match */
  @media (max-width: 1024px) {
    body.home-prototype .as-nav { background: var(--hp-header); }
    body.home-prototype .as-nav-list { border-right-color: rgba(15,35,64,0.08); }
    body.home-prototype .as-nav-list > li > a { color: var(--hp-ink-soft); border-left-color: transparent; }
    body.home-prototype .as-nav-list > li > a:hover { color: var(--hp-ink); }
    body.home-prototype .as-nav-list > li.dropdown-open > a {
      background: var(--hp-surface); color: var(--hp-ink); border-left-color: var(--hp-cyan-accent);
    }
    body.home-prototype .as-dropdown { box-shadow: none; border-top: none; background: transparent; }
    body.home-prototype .as-dropdown li a { color: var(--hp-ink); border-bottom-color: rgba(15,35,64,0.06); }
    body.home-prototype .as-mobile-close { background: var(--hp-surface); color: var(--hp-ink); }
    body.home-prototype .section--hero { flex-direction: column !important; }
  }

  /* --- Hero: quiet editorial composition instead of a promotional panel --- */
  /* No column divider — the photo's diagonal crop is the boundary on its own.
     (Old skewed ::before line disabled; it never tracked the crop cleanly.) */
  body.home-prototype .section--hero::before { content: none; }
  body.home-prototype .section--hero .brand-eyebrow { color: var(--hp-ink-soft) !important; opacity: 1; }
  /* Override the shared `.section--hero h1 { color:#fff !important }` so the navy H1 is visible */
  body.home-prototype .section--hero .hero-h1,
  body.home-prototype .section--hero .hero-h1 a {
    color: var(--hp-ink) !important;
  }
  /* The writing stays on a light editorial hero. */
  body.home-prototype .section--hero {
    flex-direction: row-reverse !important;
    min-height: 0 !important;
    background: var(--hp-surface) !important;
  }
  body.home-prototype .section--hero > .hero-content {
    width: 50% !important;
    padding: clamp(48px, 7vw, 104px) clamp(32px, 6vw, 96px);
    box-sizing: border-box;
    background: var(--hp-surface);
    position: relative;
    z-index: 3;
  }
  /* Short-viewport hero: the padding above scales with WIDTH (7vw), so on a
     1280x720 laptop it sits near its 104px cap and pushes the Call/Book CTAs
     below the fold (measured: CTA bottom 739px vs a 716px fold). Trim the
     vertical padding only when the viewport is genuinely short. H1 sizing is
     deliberately untouched at every breakpoint.
     Scoped to min-width:1025px so this never reaches the tablet/mobile stack,
     which sets its own .hero-content padding in the max-width:1024px block. */
  @media (min-width: 1025px) and (max-height: 800px) {
    body.home-prototype .section--hero > .hero-content {
      padding-top: 44px;
      padding-bottom: 44px;
    }
  }

  /* --- Hero photo viewport: a four-image Ken Burns slideshow cropped on the
     restrained cyan architectural angle. One shared viewport; the slides are
     absolutely stacked inside it (see .hero-slide rules below). --- */
  body.home-prototype .section--hero > .hero-image.hero-photo {
    width: 50% !important;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    background: #d9e9ef;
    z-index: 1;
  }
  body.home-prototype .hero-photo picture,
  body.home-prototype .hero-slideshow { display: contents !important; }
  /* Each slide's <img> is the positioned layer. The -3% inset / 106% overscan
     is what lets the Ken Burns travel (≤2%) and scale (1.02→1.07) run without
     ever exposing a gap at the angled cyan seam. object-position is per-slide
     via --obj so the owner, van, technician and branding all stay framed. */
  body.home-prototype .hero-photo-img {
    position: absolute; inset: -3%; width: 106%; height: 106%;
    object-fit: cover; object-position: var(--obj, 66% 64%); display: block; max-width: none;
    transform: scale(1.02);
  }
  /* Crossfade layering. All slides stack; only .is-current is opaque. Deferred
     slides start invisible, so with no JS (no src set) only slide 0 shows. */
  body.home-prototype .hero-slide > .hero-photo-img { opacity: 0; transition: opacity 1.15s ease-in-out; }
  body.home-prototype .hero-slide.is-current > .hero-photo-img { opacity: 1; }
  /* Ken Burns — alternating zoom: slides 1 & 3 zoom IN, slides 2 & 4 zoom OUT.
     Direction (.kb-in / .kb-out) is assigned once by JS from the slide index;
     .kb-play is added when a slide first becomes current and is NEVER removed.
     With animation-fill-mode:both this guarantees a jerk-free motion:
       • before — the instant a slide enters it sits on the keyframe 'from'
         (backwards fill), so there is no jump into the movement;
       • during — ease-in-out ramps the scale gently, no sudden speed change;
       • after — it holds the 'to' state (forwards fill) and, because .kb-play
         is never cleared, keeps holding it all the way through its 1.15s
         crossfade-out, so a zoomed slide never snaps back while still visible.
     Each slide is present ~5.3s (1.15s fade-in + 3s opaque + 1.15s fade-out),
     so the 5.2s run keeps it gliding the whole time it's visible, on both the
     incoming and the outgoing side of every crossfade. */
  body.home-prototype .hero-slide.kb-play.kb-in  > .hero-photo-img { animation: hp-kb-in  5.2s ease-in-out both; }
  body.home-prototype .hero-slide.kb-play.kb-out > .hero-photo-img { animation: hp-kb-out 5.2s ease-in-out both; }
  @keyframes hp-kb-in {
    from { transform: scale(1.02) translate(0, 0); }
    to   { transform: scale(1.07) translate(-1.4%, -1%); }
  }
  @keyframes hp-kb-out {
    from { transform: scale(1.07) translate(1.4%, -1%); }
    to   { transform: scale(1.02) translate(0, 0); }
  }
  /* Pause freezes EVERY started slide (.kb-play), not just the current one —
     during a crossfade the outgoing slide is still visible and still moving,
     so it must freeze too. */
  body.home-prototype .hero-slideshow.is-paused .hero-slide.kb-play > .hero-photo-img {
    animation-play-state: paused;
  }
  /* A quiet cyan light wash integrates the image with the angled rule. */
  body.home-prototype .hero-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: linear-gradient(90deg, rgba(214,238,248,.16) 0%, rgba(234,246,251,.04) 7%, transparent 15%);
  }
  /* Reduced motion: no fade, no Ken Burns — slide 0 only, fully static. */
  @media (prefers-reduced-motion: reduce) {
    body.home-prototype .hero-photo-img { transform: scale(1.02) !important; animation: none !important; }
    body.home-prototype .hero-slide > .hero-photo-img { transition: none; }
  }
  body.home-prototype .section--hero .hero-subtext {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 20px;
    max-width: 500px;
  }
  body.home-prototype .section--hero .hero-context { font-size: 12px; }
  /* Booking green + Call orange now come from the global data-cta system;
     the homepage's URL-substring (a[href*="book.housecallpro.com"]) recolor
     was removed. Each button keeps its own native size. */

  /* --- Bright homepage surfaces ---
     Navy now has one job: readable type and the footer.  The proof, offer, and
     decision sections use white or pale cyan so the page feels lighter without
     making the action colors compete with one another. */
  body.home-prototype #what-happens-when-you-wait,
  body.home-prototype #reviews,
  body.home-prototype .section--cta {
    background: var(--hp-surface) !important;
    color: var(--hp-ink) !important;
  }
  body.home-prototype #reviews { background: var(--hp-base) !important; }

  /* "Our Difference" (#why-all-set) keeps the global navy section--dark treatment
     (navy bg, white titles, cyan icon chips, translucent cards) — no light
     override, so copy reads correctly on the dark background. */

  /* Offers should feel like clean, valuable choices—not dark promotional slabs. */
  body.home-prototype #pricing .coupon-grid > div {
    background: var(--hp-base) !important;   /* same warm cream as the In the News (#press) band */
    border-color: var(--hp-cyan-border) !important;
    border-top-color: var(--hp-cyan-accent) !important;
    box-shadow: 0 10px 26px rgba(15, 35, 64, 0.08);
  }
  body.home-prototype #pricing .coupon-grid h3 {
    color: var(--hp-ink) !important;
  }
  body.home-prototype #pricing .coupon-grid h3 span {
    color: var(--accent-text) !important;
  }
  body.home-prototype #pricing .coupon-grid p[style*="color:#8B9FBF"],
  body.home-prototype #pricing .coupon-grid p[style*="color:#C5D0E0"],
  body.home-prototype #pricing .coupon-grid span[style*="color:var(--border-light)"] {
    color: var(--hp-ink-soft) !important;
  }
  /* Educational and review sections stay bright so homeowners can read and compare. */
  body.home-prototype #what-happens-when-you-wait .section-title,
  body.home-prototype #reviews h2,
  body.home-prototype .section--cta h2 {
    color: var(--hp-ink) !important;
  }
  body.home-prototype #what-happens-when-you-wait p[style*="rgba(255,255,255"],
  body.home-prototype .section--cta p {
    color: var(--hp-ink-soft) !important;
  }
  body.home-prototype #what-happens-when-you-wait strong,
  body.home-prototype .section--cta strong { color: var(--hp-ink) !important; }
  body.home-prototype #reviews > .reviews-inner > div[style*="background:rgba(255,255,255,0.07)"],
  body.home-prototype #reviews .review-cards > div {
    background: var(--hp-surface) !important;
    border-color: var(--hp-cyan-border) !important;
    box-shadow: 0 6px 18px rgba(15, 35, 64, 0.05);
  }
  body.home-prototype #reviews .review-cards > div { background: #fff !important; }
  body.home-prototype #reviews span[style*="color:#fff"],
  body.home-prototype #reviews .review-cards span {
    color: var(--hp-ink) !important;
  }
  body.home-prototype #reviews p[style*="rgba(255,255,255"],
  body.home-prototype #reviews span[style*="rgba(255,255,255"] {
    color: var(--hp-ink-soft) !important;
  }
  body.home-prototype #reviews .review-cards p:first-child { color: var(--accent-text) !important; }
  /* Secondary buttons in the CTA band are governed by the global .btn-ghost /
     .btn-outline rules (white / navy outline); the old :not([href*=book…])
     URL-substring selector was removed. */

  /* Homepage hero H1 — outsized variant used only on the homepage */
  .hero-h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 56px;
    font-weight: 700; /* page only supplies Roboto through 700; avoid faux-bold */
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: var(--hp-ink);
    margin-bottom: 14px;
  }

  /* Homepage section-title variant (larger than global 34px) */
  .section-title { font-size: 44px; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; }

  /* A simple service index gives the hero structure without adding badge-like UI. */
  .hero-service-index {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    margin: 26px 0 0; padding: 18px 0 0;
    list-style: none;
    border-top: 1px solid var(--hp-cyan-border);
  }
  .hero-service-index li {
    display: inline-flex; align-items: center;
    padding: 0 18px;
    color: var(--hp-ink-soft);
    font-family: 'Roboto', sans-serif;
    font-size: 14px; font-weight: 700; line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .hero-service-index li:first-child { padding-left: 0; }
  .hero-service-index li + li { border-left: 1px solid var(--hp-cyan-border); }
  .hero-service-index li i { margin-right: 8px; font-size: 14px; color: var(--hp-cyan-accent); }
  .hero-service-index li:nth-child(2) i { color: var(--accent); }  /* heating = warm */
  @media (max-width: 640px) {
    .hero-service-index { gap: 10px 0; }
    .hero-service-index li { font-size: 12px; padding: 0 14px; }
    .hero-service-index li i { font-size: 12px; }
  }

  /* Homepage hero-content inner block */
  .hero-content {
    width: 60%;
    background: transparent;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    padding: 60px; gap: 0;
  }

  /* A simple service-area line keeps the start of the hero open and current. */
  .hero-context {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--hp-ink-soft);
    font-family: 'Roboto', sans-serif;
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3;
    margin: 0 0 14px;
  }
  .hero-context span { width: 32px; height: 1px; background: var(--hp-cyan-accent); }

  /* Homepage hero subtext */
  .hero-subtext {
    color: var(--hp-ink-soft);
    font-family: 'Roboto', sans-serif;
    font-size: 20px; font-weight: 500; line-height: 1.68;
    margin-bottom: 28px;
  }

  /* ===== RESPONSIVE =====
     All shared-component responsive rules (.two-col, .why-grid, .services-grid,
     .review-cards, .hero-content, .hero-image, .stat-boxes, .coupon-grid,
     .cta-buttons, .faq-card, .section--hero stacking) live in assets/css/style.css.
     The rules below are homepage-only: the oversized .section-title (44px)
     only exists on the homepage, so its mobile reduction lives here. */
  @media (max-width: 1024px) {
    .section-title { font-size: 36px; }
    body.home-prototype .hero-context span { display: none; }
  }
  @media (max-width: 767px)  { .section-title { font-size: 30px; } }

  /* Cost of Waiting section — mobile stack */
  @media (max-width: 767px) {
    #what-happens-when-you-wait .section-inner {
      flex-direction: column !important;
      gap: 24px !important;
    }
    #what-happens-when-you-wait .section-inner > div {
      width: 100% !important;
    }
    #what-happens-when-you-wait .section-inner > div:first-child {
      height: 260px;
    }
  }

  /* ============================================================
     Palette rhythm + refinement.
     Removes the cool #F2F5FB (--light-bg) gray that muddied the cyan
     bands, tighter section spacing, refined service-brand headings, and
     the sticky on-page nav. Homepage-scoped; shared style.css untouched.
     ============================================================ */

  /* Page base = warm white so white cards and cyan bands both read cleanly */
  body.home-prototype { background: var(--hp-base); }

  /* --- Section background rhythm ---
     Only three surfaces: white (#fff), warm cream (--hp-base), pale
     cyan (--hp-surface). The cool blue-gray is gone entirely, so no
     section ever sits gray-next-to-blue.
       hero(grad) · declaration white · [cyan nav] · intro white ·
       how-we-work CYAN · services white · press CREAM · why CYAN ·
       offers white · wait CYAN · brands white · reviews CREAM ·
       faq white · cta CYAN · footer navy                              */
  body.home-prototype .entity-zone,
  body.home-prototype [data-zone="zone-4-body-2"],
  body.home-prototype #services,
  body.home-prototype #pricing,
  body.home-prototype #brands,
  body.home-prototype #faq { background: #fff !important; }
  body.home-prototype #press { background: var(--hp-base) !important; }  /* warm cream */
  body.home-prototype #how-we-work,
  body.home-prototype .section--cta { background: var(--hp-surface-mid) !important; }
  /* #why-all-set, #what-happens-when-you-wait, .section--cta -> cyan (Phase 1)
     #reviews -> cream (Phase 1) */

  /* --- Entity declaration (zone-3) — reusable inner wrapper ---
     Replaces the old inline `text-align:center; max-width:980px`. Wider measure,
     tighter vertical rhythm than the 46px section default, navy text. */
  /* Specificity must clear the shared .section:not(--hero):not(.z4-split)
     padding rule (0,4,0) that otherwise forces the 46px section rhythm here. */
  body.home-prototype .section.entity-zone:not(.section--hero):not(.z4-split) {
    padding-top: clamp(18px, 2vw, 28px) !important;
    padding-bottom: clamp(18px, 2vw, 28px) !important;
  }
  body.home-prototype .entity-zone__inner {
    max-width: 1400px;
    margin-inline: auto;
    text-align: center;
  }
  body.home-prototype .entity-zone__inner .entity-decl {
    margin: 0;
    color: var(--dark-navy);
    font-size: clamp(17px, 1.15vw, 18px);
    line-height: 1.5;
  }
  /* Location links: darkish cyan (#23809F, ~4.5:1 on white) with a navy hover —
     matches the shared entity-link rule in style.css. */
  body.home-prototype .entity-zone__inner .entity-decl a {
    color: #23809F;
    font-weight: 600;
    text-decoration: none;
  }
  body.home-prototype .entity-zone__inner .entity-decl a:hover { color: var(--dark-navy); }
  body.home-prototype .entity-zone__inner .entity-decl a:focus-visible {
    outline: 3px solid var(--action-focus, #2E9BC0);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Frame each cyan band with a cyan hairline so the light surfaces stay
     crisp against their white/cream neighbours instead of blurring together. */
  body.home-prototype #how-we-work,
  body.home-prototype #what-happens-when-you-wait,
  body.home-prototype .section--cta {
    border-top: 1px solid var(--hp-cyan-border);
    border-bottom: 1px solid var(--hp-cyan-border);
  }

  /* --- Tighter section spacing --- (hero keeps its full-bleed layout) */
  body.home-prototype .section:not(.section--hero):not(.z4-split) {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
  @media (max-width: 767px) {
    body.home-prototype .section:not(.section--hero):not(.z4-split) {
      padding-top: 30px !important;
      padding-bottom: 30px !important;
    }
  }

  /* --- Refined, still service-strong headings ---
     Confident bold titles in sentence/title case (no shouty all-caps),
     tighter tracking, a slim accent rule, and a lighter eyebrow. */
  body.home-prototype .section-title {
    font-size: 34px !important;
    text-transform: none !important;
    font-weight: 800;
    letter-spacing: -0.01em !important;
    line-height: 1.16 !important;
    color: var(--hp-ink) !important;
  }
  /* "Our Difference" is the one navy section — its title must stay white,
     overriding the ink default above. */
  body.home-prototype #why-all-set .section-title { color: #fff !important; }
  @media (max-width: 1024px) { body.home-prototype .section-title { font-size: 29px !important; } }
  @media (max-width: 767px)  { body.home-prototype .section-title { font-size: 25px !important; } }

  /* Inline-styled uppercase H2s (offers/service-area, wait, reviews, CTA) -> match */
  body.home-prototype #pricing h2,
  body.home-prototype #what-happens-when-you-wait h2,
  body.home-prototype #reviews h2,
  body.home-prototype .section--cta h2 {
    text-transform: none !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.16 !important;
    font-size: 32px !important;
    color: var(--hp-ink) !important;
  }
  @media (max-width: 767px) {
    body.home-prototype #pricing h2,
    body.home-prototype #what-happens-when-you-wait h2,
    body.home-prototype #reviews h2,
    body.home-prototype .section--cta h2 { font-size: 25px !important; }
  }

  body.home-prototype .section-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
  }
  body.home-prototype .accent-divider {
    width: 44px !important;
    height: 2px !important;
    margin: 12px 0 20px !important;
  }

  /* --- Z4 body: full-bleed split — team image covers the left half,
     copy on the right (mirrors the hero composition). --- */
  body.home-prototype .z4-split {
    display: flex;
    align-items: stretch;
    padding: 0 !important;
    min-height: clamp(380px, 38vw, 460px);
    overflow: hidden;
  }
  body.home-prototype .z4-split-media {
    width: 50%;
    position: relative;
    overflow: hidden;
  }
  body.home-prototype .z4-split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;   /* keeps the team's faces in frame */
  }
  body.home-prototype .z4-split-copy {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 80px);
  }
  body.home-prototype .z4-split-copy p:not(.section-label) {
    margin-top: 12px;
    color: var(--hp-ink-soft);
    line-height: 1.7;
  }
  body.home-prototype .z4-intro-cta { margin-top: 22px; align-self: flex-start; }
  @media (max-width: 1024px) {
    body.home-prototype .z4-split { flex-direction: column; min-height: 0; }
    body.home-prototype .z4-split-copy { width: 100%; }
    /* Show the whole team photo (uncropped) when stacked on tablet + mobile */
    body.home-prototype .z4-split-media { width: 100%; height: auto; overflow: visible; }
    body.home-prototype .z4-split-media picture { display: block; width: 100%; }
    body.home-prototype .z4-split-media img {
      position: static;
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  /* --- Center headers on full-width sections. Card-level eyebrows and the
     2-column sections (Who We Are = .z4-split, Cost of Waiting = plain div)
     keep their headers left-justified. --- */
  body.home-prototype .services-header,
  body.home-prototype .why-header,
  body.home-prototype #press > .section-inner > .section-label,
  body.home-prototype #press > .section-inner > .section-title,
  body.home-prototype #brands > .section-inner > .section-label,
  body.home-prototype #brands > .section-inner > .section-title,
  body.home-prototype #faq > .section-inner > .section-label,
  body.home-prototype #faq > .section-inner > .section-title,
  body.home-prototype #pricing > .section-inner > .section-label,
  body.home-prototype #pricing > .section-inner > h2,
  body.home-prototype #reviews > .reviews-inner > .section-label,
  body.home-prototype #reviews > .reviews-inner > h2 {
    text-align: center;
  }
  /* Center the slim accent rule under those headers */
  body.home-prototype .services-header .accent-divider,
  body.home-prototype .why-header .accent-divider,
  body.home-prototype #press .accent-divider,
  body.home-prototype #brands .accent-divider,
  body.home-prototype #faq .accent-divider,
  body.home-prototype #pricing > .section-inner > .accent-divider,
  body.home-prototype #reviews > .reviews-inner > .accent-divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Constrain + center any header intro paragraph for readability */
  body.home-prototype .services-header p:not(.section-label),
  body.home-prototype .why-header p:not(.section-label),
  body.home-prototype #press > .section-inner > p:not(.section-label),
  body.home-prototype #brands > .section-inner > p:not(.section-label),
  body.home-prototype #pricing > .section-inner > p:not(.section-label) {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
  }

  /* Mobile hero: force the split to stack. (Phase 1's `row-reverse !important`
     sits earlier in source than its own `column` rule, so at <=1024 the tie
     broke toward row-reverse and the H1 clipped. This later rule wins.) */
  @media (max-width: 1024px) {
    body.home-prototype .section--hero { flex-direction: column !important; }
    body.home-prototype .section--hero > .hero-content {
      width: 100% !important;
      padding: 40px clamp(20px, 6vw, 40px) !important;
      align-items: center !important;   /* center content on mobile + tablet */
      text-align: center;
    }
    body.home-prototype .section--hero .hero-subtext { margin-left: auto; margin-right: auto; }
    /* Stacked photo holds a native 4:3 frame; drop the desktop divider.
       Same selector specificity as the desktop rule so width:100% wins;
       min-height:0 neutralizes the legacy shared `.hero-image{min-height:400px}`. */
    body.home-prototype .section--hero > .hero-image.hero-photo {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: 4 / 3;
      order: -1;                 /* image above the copy when stacked */
      clip-path: none;
    }
    body.home-prototype .section--hero::before { display: none; }
    /* Keep each slide's own framing on small screens. A slide may opt into a
       different small-screen focal point via --obj-small; otherwise it falls
       back to its --obj so the owner, van, technician and branding stay framed. */
    body.home-prototype .hero-photo-img { object-position: var(--obj-small, var(--obj, 63% 60%)) !important; }
    body.home-prototype .hero-photo::after { background: linear-gradient(180deg, rgba(214,238,248,.10), transparent 40%); }
    body.home-prototype .section--hero .hero-h1 { font-size: clamp(34px, 9vw, 48px); }
  }

  /* Tablet: retain the desktop split hero; mobile alone (<=767) stacks. */
  @media (min-width: 768px) and (max-width: 1024px) {
    body.home-prototype .section--hero {
      flex-direction: row-reverse !important;
      align-items: stretch;
    }

    body.home-prototype .section--hero > .hero-content {
      width: 50% !important;
      padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 44px) !important;
      align-items: flex-start !important;
      text-align: left;
    }

    body.home-prototype .section--hero > .hero-image.hero-photo {
      width: 50% !important;
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: auto;
      order: 0;
      clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Divider re-enable is inert here: the base rule sets `::before {content:none}`
       (seam removed per request), so no line renders — consistent with desktop. */
    body.home-prototype .section--hero::before {
      display: block;
      left: calc(50% - 1px);
    }

    body.home-prototype .hero-photo::after {
      background: linear-gradient(
        90deg,
        rgba(214, 238, 248, .16) 0%,
        rgba(234, 246, 251, .04) 7%,
        transparent 15%
      );
    }

    body.home-prototype .section--hero .hero-subtext {
      margin-left: 0;
      margin-right: 0;
    }
  }

  /* Touch targets >= 44px on the compact (hamburger) header — active at <=1024 */
  @media (max-width: 1024px) {
    body.home-prototype .as-btn-book,
    body.home-prototype .as-btn-phone {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }
    body.home-prototype .as-mobile-toggle {
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  /* Clean stacked hero CTAs on mobile */
  @media (max-width: 767px) {
    body.home-prototype .hero-buttons {
      flex-direction: column;
      align-items: stretch;
      flex-wrap: nowrap;
      width: 100%;
      max-width: 340px;
      margin-left: auto;
      margin-right: auto;
      gap: 10px;
    }
    body.home-prototype .hero-buttons .btn-primary,
    body.home-prototype .hero-buttons .btn-ghost {
      width: 100%;
      justify-content: center;
      min-height: 48px;
    }
  }

  /* Center all button groups on mobile. Homepage-scoped; lift to
     shared.css if this should apply site-wide. */
  @media (max-width: 767px) {
    body.home-prototype .hero-buttons,
    body.home-prototype .cta-buttons,
    body.home-prototype .card-body > div[style*="flex-wrap:wrap"],
    body.home-prototype #pricing div[style*="padding:10px 30px"],
    body.home-prototype #what-happens-when-you-wait div[style*="gap:12px; flex-wrap:wrap"] {
      justify-content: center !important;
    }
    body.home-prototype .z4-intro-cta { align-self: center; }
    /* Condense the stacked service-card image (shared CSS forces 320px) */
    body.home-prototype #services .service-card .card-image { min-height: 250px !important; }
  }

  /* Anchor targets clear the header + on-page nav when jumped to */
  body.home-prototype #how-we-work,
  body.home-prototype #services,
  body.home-prototype #why-all-set,
  body.home-prototype #pricing,
  body.home-prototype #what-happens-when-you-wait,
  body.home-prototype #service-areas,
  body.home-prototype #reviews,
  body.home-prototype #faq { scroll-margin-top: 122px; }

  /* ============================================================
     HOW WE WORK — Blueprint timeline theming (scrolly-timeline skill).
     Component CSS lives in /assets/timeline/timeline.css and is linked
     BEFORE this file, so everything here is a token override or a
     restraint tweak. Never edit the vendored component file.
     ============================================================ */
  body.home-prototype #how-we-work.ts-blueprint {
    /* Section chrome is already owned by the cyan-band rules above. */
    --ts-color-section-bg: transparent;

    /* Line + circles: thin cyan hairline inactive, logo cyan active. */
    --ts-color-track:              var(--hp-cyan-border);   /* #BFE1EE */
    --ts-color-fill:               var(--hp-cyan-accent);   /* #2E9BC0 */
    --ts-color-circle-active-bg:   var(--hp-cyan-accent);
    --ts-color-circle-active-glow: rgba(46,155,192,0.13);

    /* Typography: navy headings, muted-navy body, cyan eyebrow. */
    --ts-color-step-label: var(--hp-cyan-accent);
    --ts-color-step-title: var(--hp-ink);
    --ts-color-step-body:  var(--hp-ink-soft);
    --ts-font-heading: 'Roboto','Roboto Fallback',sans-serif;
    --ts-font-body:    'Roboto','Roboto Fallback',sans-serif;

    /* White, lightly bordered panels — no shadow, no fill. */
    --ts-color-card-bg:     #fff;
    --ts-color-card-border: var(--hp-cyan-border);
    --ts-card-radius: 10px;

    /* Restrained geometry: smaller circles, hairline rule, roomier columns. */
    --ts-circle-size:    40px;
    --ts-line-thickness: 2px;
    --ts-step-gap:       20px;
  }

  /* The section itself carries no side padding — the container below supplies
     the gutters, so the timeline lines up with the other homepage sections. */
  body.home-prototype #how-we-work.ts-blueprint { padding-left: 0; padding-right: 0; }

  /* Full-width within the shared homepage gutters (matches #services et al.)
     rather than the component's own 1200px cap. */
  body.home-prototype #how-we-work .ts-blueprint__container {
    width: 100%;
    max-width: var(--container-max);
    padding-inline: var(--section-pad-x);
  }

  /* Four-column line geometry. The vendored component hard-codes the N=5 case
     (left: 10% - 0.4g, width: 80% + 0.8g). For N columns the first circle
     centre sits at 100/(2N)% and the span is (N-1)/N — so N=4 gives
     left: 12.5% - 0.375g and width: 75% + 0.75g. Overridden here so
     assets/timeline/timeline.css stays untouched. */
  body.home-prototype #how-we-work .ts-blueprint__track::before,
  body.home-prototype #how-we-work .ts-blueprint__track::after {
    left: calc(12.5% - 0.375 * var(--ts-step-gap));
    width: calc(75% + 0.75 * var(--ts-step-gap));
  }

  /* --- Unpinned timeline: completed state as the baseline ---
     The component's default is a sticky scrolly: a 100vh pane that pins while
     the line scrubs. That pane is what produced the leftover top/bottom air —
     it centres a ~590px block in a full-viewport box, so ~100px above and
     below is structural, not padding, and can't be trimmed without stalling
     the pin. Dropping the pin is what the approved comp shows: the timeline at
     its natural height (~670px), in normal flow, with no scroll hijacking.

     This block paints the FINISHED timeline and is the baseline everyone gets:
     no-JS, reduced-motion, and anything below 1201px stop here. The one-shot
     entrance animation in the block further down layers on top of it, rewinding
     to the pre-animation state only once JS has confirmed it can play it.

     /assets/timeline/timeline.js stays unreferenced — it exists solely to scrub
     the fill against scroll position, which is exactly what we don't want. The
     reveal trigger is a small inline IntersectionObserver in index.html.
     Restore the original pin by deleting this block, deleting the entrance
     animation block below, and re-adding the timeline.js script tag. */
  body.home-prototype #how-we-work .ts-blueprint__outer { height: auto; }
  body.home-prototype #how-we-work .ts-blueprint__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  /* With no JS, nothing adds .is-reached — paint the completed state directly:
     every card visible, the rule filled end to end, every circle active. */
  body.home-prototype #how-we-work .ts-blueprint__card { opacity: 1; }
  body.home-prototype #how-we-work .ts-blueprint__track { --ts-progress: 1; }
  body.home-prototype #how-we-work .ts-blueprint__circle {
    background: var(--ts-color-circle-active-bg);
    box-shadow: 0 0 0 8px var(--ts-color-circle-active-glow);
  }

  /* --- One-shot entrance animation (desktop only) ---
     The state above is the COMPLETED timeline and stays the default, so no-JS
     visitors, reduced-motion visitors, and anything under 1201px get a finished
     section and never see a blank one. JS adds .is-armed to rewind to the
     pre-animation state, then .is-revealed to play it once.

     The fill is animated with transform: scaleX(), NOT by transitioning
     --ts-progress. Unregistered custom properties are not reliably interpolable
     across engines, so --ts-progress stays pinned at 1 (giving ::after its full
     computed width) and the reveal rides on a transform, which always animates.

     Circles and cards need no new machinery — timeline.css already ships
     transitions on .ts-blueprint__circle (background/box-shadow .35s) and
     .ts-blueprint__card (opacity .3s). These rules only add the delays.

     Gated below 768px because there the line is hidden and the stacked steps
     run taller than the viewport — one entry trigger would "reveal" steps still
     off-screen. Resizing below 768px also drops out of this block entirely,
     back to the completed state, so the armed state can't strand. */
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    body.home-prototype #how-we-work.is-armed .ts-blueprint__card { opacity: 0; }
    body.home-prototype #how-we-work.is-armed .ts-blueprint__circle {
      background: var(--ts-color-track);
      box-shadow: none;
    }
    body.home-prototype #how-we-work.is-armed .ts-blueprint__track::after {
      transform: scaleX(0);
      transform-origin: left center;
    }

    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__track::after {
      animation: hp-tl-fill 1000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__card { opacity: 1; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__circle {
      background: var(--ts-color-circle-active-bg);
      box-shadow: 0 0 0 8px var(--ts-color-circle-active-glow);
    }

    /* Stagger: each circle lights as the line reaches it, card follows ~100ms later.
       Circle timings track the 1000ms fill across four columns (0, 1/3, 2/3, 1). */
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(1) .ts-blueprint__circle { transition-delay: 0ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(1) .ts-blueprint__card   { transition-delay: 100ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(2) .ts-blueprint__circle { transition-delay: 330ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(2) .ts-blueprint__card   { transition-delay: 430ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(3) .ts-blueprint__circle { transition-delay: 670ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(3) .ts-blueprint__card   { transition-delay: 770ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(4) .ts-blueprint__circle { transition-delay: 1000ms; }
    body.home-prototype #how-we-work.is-armed.is-revealed .ts-blueprint__step:nth-child(4) .ts-blueprint__card   { transition-delay: 1100ms; }
  }
  @keyframes hp-tl-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Header sits closer to the track than the component default so the
     centred block reads as one unit inside the 100vh sticky frame. */
  body.home-prototype #how-we-work .ts-blueprint__header { margin-bottom: 26px; }
  body.home-prototype #how-we-work .ts-blueprint__header .section-title { margin-bottom: 12px; }

  /* Quieter step number: the circle is an index, not a display element. */
  body.home-prototype #how-we-work .ts-blueprint__circle { font-size: 17px; font-weight: 700; }

  /* Eyebrow: smaller and tighter than the component default. */
  body.home-prototype #how-we-work .ts-blueprint__step-label {
    font-size: 0.6875rem;
    letter-spacing: 1.4px;
    margin-bottom: 6px;
  }
  body.home-prototype #how-we-work .ts-blueprint__card h3 { font-size: 1.3125rem; line-height: 1.3; }
  body.home-prototype #how-we-work .ts-blueprint__card p  { font-size: 1.0938rem; line-height: 1.6; }
  body.home-prototype #how-we-work .ts-blueprint__card-body { padding: 33px 28px 30px; position: relative; z-index: 1; }

  /* Visual interest: a large ghosted step numeral in the card corner (blueprint
     motif) plus a cyan top rail and a quiet hover lift. All decorative — the
     entrance animation and layout are untouched. */
  body.home-prototype #how-we-work .ts-blueprint__card {
    position: relative;
    border-top: 3px solid var(--hp-cyan-accent);
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.3s;
  }
  body.home-prototype #how-we-work .ts-blueprint__card:hover {
    box-shadow: 0 12px 28px rgba(15, 35, 64, 0.10);
    transform: translateY(-3px);
  }
  body.home-prototype #how-we-work .ts-blueprint__card::after {
    position: absolute;
    top: 2px;
    right: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    color: rgba(46, 155, 192, 0.14);
    pointer-events: none;
    z-index: 0;
  }
  body.home-prototype #how-we-work .ts-blueprint__step:nth-child(1) .ts-blueprint__card::after { content: "01"; }
  body.home-prototype #how-we-work .ts-blueprint__step:nth-child(2) .ts-blueprint__card::after { content: "02"; }
  body.home-prototype #how-we-work .ts-blueprint__step:nth-child(3) .ts-blueprint__card::after { content: "03"; }
  body.home-prototype #how-we-work .ts-blueprint__step:nth-child(4) .ts-blueprint__card::after { content: "04"; }
  @media (prefers-reduced-motion: reduce) {
    body.home-prototype #how-we-work .ts-blueprint__card,
    body.home-prototype #how-we-work .ts-blueprint__card:hover { transform: none; transition: opacity 0.3s; box-shadow: none; }
  }

  /* Booking CTA under the timeline — the only green on this section. */
  body.home-prototype #how-we-work .hw-timeline-cta { text-align: center; margin-top: 26px; }


  /* --- Keep the timeline horizontal down to 768px ---
     The vendored component stacks everything below 1200px, which was right for
     five narrow columns but wastes the tablet range now that there are four.
     These rules re-assert the horizontal layout across 768–1200px; above
     1200px they simply restate what the component already does. */
  @media (min-width: 768px) {
    body.home-prototype #how-we-work .ts-blueprint__track {
      grid-template-columns: repeat(var(--ts-blueprint-cols, 4), 1fr);
    }
    body.home-prototype #how-we-work .ts-blueprint__track::before,
    body.home-prototype #how-we-work .ts-blueprint__track::after { display: block; }
    /* Undo the component's "Step N" pill treatment and restore a plain circle. */
    body.home-prototype #how-we-work .ts-blueprint__step { padding-top: 72px; }
    body.home-prototype #how-we-work .ts-blueprint__circle {
      left: 50%;
      transform: translateX(-50%);
      width: var(--ts-circle-size);
      min-width: 0;
      height: var(--ts-circle-size);
      padding: 0;
      border-radius: 50%;
      font-size: 17px;
      letter-spacing: normal;
      text-transform: none;
      gap: 0;
    }
    body.home-prototype #how-we-work .ts-blueprint__circle::before { content: none; }
    body.home-prototype #how-we-work .ts-blueprint__step-label { display: block; }
  }

  /* Tablet range: tighten the gutter-to-column ratio so four cards still breathe. */
  @media (min-width: 768px) and (max-width: 1100px) {
    body.home-prototype #how-we-work .ts-blueprint__track { --ts-step-gap: 14px; }
    body.home-prototype #how-we-work .ts-blueprint__card-body { padding: 14px 14px 16px; }
    body.home-prototype #how-we-work .ts-blueprint__card h3 { font-size: 1rem; }
    body.home-prototype #how-we-work .ts-blueprint__card p { font-size: 0.875rem; }
  }

  /* Below 768px the four columns genuinely stop working — stack them. */
  @media (max-width: 767px) {
    /* One column of full-width cards reads as a wall of short lines; cap the
       measure and centre the stack instead. */
    body.home-prototype #how-we-work .ts-blueprint__track {
      gap: 10px;
      max-width: 640px;
      margin: 0 auto;
    }
    /* The component keeps the circle absolutely positioned in the stacked
       fallback. Pull the "Step N" pill to the left edge so it sits over the
       left-aligned card copy instead of floating centred above it, and tighten
       the vertical rhythm the 72px default leaves behind. */
    body.home-prototype #how-we-work .ts-blueprint__step { padding-top: 42px; }
    body.home-prototype #how-we-work .ts-blueprint__circle {
      left: 0;
      transform: none;
      font-size: 13px;
      letter-spacing: 1px;
      padding: 0 14px;
      height: 28px;
      min-width: 0;
    }
    /* The pill already carries the number — drop the duplicate card eyebrow. */
    body.home-prototype #how-we-work .ts-blueprint__step-label { display: none; }
    body.home-prototype #how-we-work .hw-timeline-cta { margin-top: 26px; }
  }

  /* ============================================================
     SERVICE AREA MAP — click-to-load facade.
     The button reserves the embed's exact 400px height so the swap is
     CLS-free. Palette matches the pale-cyan surface used elsewhere.
     ============================================================ */
  body.home-prototype .hp-map {
    margin-top: 30px;
    border-radius: 12px;
    overflow: hidden;
  }
  body.home-prototype .hp-map iframe {
    display: block;
    width: 100%;
    border: 0;
  }
  body.home-prototype .hp-map__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 400px;
    padding: 24px;
    background: var(--hp-surface);
    border: 1px solid var(--hp-cyan-border);
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Roboto','Roboto Fallback',sans-serif;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  body.home-prototype .hp-map__cta:hover {
    background: var(--hp-cyan);
    border-color: var(--hp-cyan-accent);
  }
  body.home-prototype .hp-map__cta:focus-visible {
    outline: 2px solid var(--hp-cyan-accent);
    outline-offset: -4px;
  }
  body.home-prototype .hp-map__icon {
    font-size: 40px;
    line-height: 1;
    color: var(--hp-cyan-accent);
  }
  body.home-prototype .hp-map__label {
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-ink);
  }
  body.home-prototype .hp-map__note {
    font-size: 14px;
    color: var(--hp-ink-soft);
  }
  @media (prefers-reduced-motion: reduce) {
    body.home-prototype .hp-map__cta { transition: none; }
  }

/* ---------------------------------------------------------------- */
/* Service-area chip links — city badges that link to location pages.
   The anchor absorbs the chip's padding so the whole chip is the
   click target while inheriting the chip's text styling. */
body.home-prototype .hp-chip-link {
  display: block;
  margin: -6px -14px;
  padding: 6px 14px;
  color: var(--link-cyan, #1B6B87); /* AA on white, cream, and pale cyan */
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
body.home-prototype .hp-chip-link:hover {
  background: var(--hp-surface);
  color: var(--hp-ink);
}

/* Final light-surface contrast and link-affordance overrides. These selectors
   intentionally outrank legacy inline/dark-section styles on the redesigned
   bright homepage sections. */
body.home-prototype #pricing > .section-inner > .section-label > a,
body.home-prototype #what-happens-when-you-wait .section-label,
body.home-prototype #reviews > .reviews-inner > .section-label,
body.home-prototype #reviews .review-score {
  color: var(--accent-text) !important;
}
body.home-prototype #pricing > .section-inner > .section-label > a,
body.home-prototype .service-card .card-body > p > a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
body.home-prototype .service-card .card-body > p > a {
  color: var(--link-cyan) !important;
}

  /* Who We Are service links — same darkish-cyan/navy-hover treatment as the
     entity-paragraph location links. */
  body.home-prototype .z4-split-copy p a {
    color: var(--link-cyan, #1B6B87);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  body.home-prototype .z4-split-copy p a:hover { color: var(--dark-navy); }
  body.home-prototype .z4-split-copy p a:focus-visible { outline: 3px solid var(--action-focus, #2E9BC0); outline-offset: 2px; border-radius: 2px; }

/* ===== BRAND MARQUEE — AUTHORIZED RESELLER BADGES ===== */
.brand-marquee__item { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; }
.brand-marquee__item--authorized img { filter: none; opacity: 1; }
.brand-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  color: var(--accent, #EF6C21); background: rgba(239, 108, 33, 0.10); border: 1px solid var(--accent, #EF6C21);
}
@media (max-width: 768px) { .brand-badge { font-size: 9px; padding: 3px 8px; letter-spacing: 0.10em; } }