/* ============================================================
   20 HOURS FREE offer page — homepage design-system rollout
   Applies the homepage system to /20-hours-free/ (template
   page-20-hours-free); every rule is scoped
   body.page-template-page-20-hours-free:

     1. SPACING  — 9rem side gutters on every band (→3rem ≤960,
        →1.25rem ≤600), the shared 7rem/5rem/3.5rem vertical
        rhythm, 1680px content inners (gutter moves to the band).
     2. COLOUR   — homepage light theme below the hero: white
        grounds + #08222E ink. The HERO keeps the dark treatment
        (same hands-off rule as the homepage hero) and now carries
        the Offers photograph behind a #08222E scrim. The page
        converts on the SHARED homepage 3-step lead form, which
        brings its own dark panel; footer goes to the homepage
        light treatment.
     3. TYPE     — homepage unified section-heading scale, the one
        plain-caps eyebrow spec, 24px/1.7 #5A6B75 intros, and the
        homepage header-stack rhythm. (The section styles inside
        the loc-20-hours-free pattern already carry these values —
        the rules here cover the shared patterns/partials the
        pattern doesn't own.)

   Loads AFTER ac-interior-system (same 101-priority block) so it
   wins its 7rem gutters; body-scoped selectors + !important beat
   the pattern's in-body <style> blocks and inline style attrs.
   Fully reversible: delete this file + its wp_enqueue_style().
   Modelled on ac-capp-system.css. Applied 2026-07-23.
   ============================================================ */

/* ── Palette (mirrors ac-homepage-light.css; white band grounds
      like the homepage sections) + legacy-var retone ── */
body.page-template-page-20-hours-free {
  --lt-page:      #FFFFFF;
  --lt-surface:   #FFFFFF;
  --lt-tint:      #E9F3F7;
  --lt-ink:       #08222E;
  --lt-grey:      #5A6B75;
  --lt-border:    rgba(9, 32, 42, 0.10);
  --lt-border-brand: rgba(7, 169, 209, 0.22);
  --lt-attn:        #E5484D;
  --lt-attn-strong: #C62B30;

  --ac-text-dark: #08222E;

  background-color: var(--lt-page) !important;
  color: var(--lt-ink) !important;
  overflow-x: clip;
}

/* HANDS OFF THE HERO — it stays dark exactly like the homepage hero.
   This only cancels the page-wide ink colour so the hero's colourless
   text keeps the white it inherits.

   PHOTO BACKGROUND: the hero carries the Offers photograph behind a
   #08222E scrim (the site dark tone) instead of the base .ac-hero
   cyan grid. Two background layers, painted top-to-bottom:
     1. the scrim gradient — heaviest on the LEFT, where the
        left-aligned hero copy sits, easing to 0.62 on the right so
        the photo's holographic dashboard stays visible;
     2. the photo itself, cover-cropped from centre.
   The url() is relative to THIS file (assets/css/), so it resolves
   through the theme on staging and production alike — no hardcoded
   uploads domain. !important beats the base .ac-hero grid-line
   background-image + its 40px background-size. */
body.page-template-page-20-hours-free .ac-loc-hero {
  color: #FFFFFF;
  background-color: #08222E !important;
  background-image:
    linear-gradient(90deg,
      rgba(8, 34, 46, 0.94) 0%,
      rgba(8, 34, 46, 0.88) 45%,
      rgba(8, 34, 46, 0.62) 100%),
    url("../offer-hero-bg.webp") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* Narrow viewports crop the photo hard and the copy runs full-width
   over it — flatten the gradient to an even, heavier scrim so every
   line keeps its contrast. */
@media (max-width: 960px) {
  body.page-template-page-20-hours-free .ac-loc-hero {
    background-image:
      linear-gradient(rgba(8, 34, 46, 0.84), rgba(8, 34, 46, 0.84)),
      url("../offer-hero-bg.webp") !important;
  }
}

/* ============================================================
   1a. 9rem SIDE GUTTERS on every band (hero included, horizontal
       only — matches body.ac-homepage .ac-hero)
   ============================================================ */
body.page-template-page-20-hours-free :is(
  .ac-loc-hero,
  .ac-offer-logos,
  .ac-offer-results,
  .ac-offer-how,
  .ac-offer-services,
  .ac-offer-safe,
  .ac-offer-faq,
  .ac-offer-scarcity,
  .ac-testimonials,
  .ac-founders,
  .ac-footer
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
@media (max-width: 960px) {
  body.page-template-page-20-hours-free :is(
    .ac-loc-hero, .ac-offer-logos, .ac-offer-results, .ac-offer-how, .ac-offer-services,
    .ac-offer-safe, .ac-offer-faq, .ac-offer-scarcity, .ac-footer, .ac-testimonials, .ac-founders
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (max-width: 600px) {
  body.page-template-page-20-hours-free :is(
    .ac-loc-hero, .ac-offer-logos, .ac-offer-results, .ac-offer-how, .ac-offer-services,
    .ac-offer-safe, .ac-offer-faq, .ac-offer-scarcity, .ac-footer, .ac-testimonials, .ac-founders
  ) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ============================================================
   1b. VERTICAL RHYTHM — 7rem / 5rem / 3.5rem, margins zeroed
       (same values as the homepage band rhythm). Hero excluded —
       it is a full-viewport band like the homepage hero.
   ============================================================ */
body.page-template-page-20-hours-free :is(
  .ac-offer-logos,
  .ac-offer-results,
  .ac-offer-how,
  .ac-offer-services,
  .ac-offer-safe,
  .ac-offer-scarcity,
  .ac-offer-faq,
  .ac-testimonials
) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 960px) {
  body.page-template-page-20-hours-free :is(
    .ac-offer-logos, .ac-offer-results, .ac-offer-how, .ac-offer-services,
    .ac-offer-safe, .ac-offer-scarcity, .ac-offer-faq, .ac-testimonials
  ) {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 600px) {
  body.page-template-page-20-hours-free :is(
    .ac-offer-logos, .ac-offer-results, .ac-offer-how, .ac-offer-services,
    .ac-offer-safe, .ac-offer-scarcity, .ac-offer-faq, .ac-testimonials
  ) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* ============================================================
   1c. CONTENT INNERS → 1680px (the WP constrained groups cap
       their direct children at contentSize 1200/1400)
   ============================================================ */
body.page-template-page-20-hours-free :is(
  .ac-loc-hero,
  .ac-offer-logos,
  .ac-offer-results,
  .ac-offer-how,
  .ac-offer-services,
  .ac-offer-safe,
  .ac-offer-faq
) > * {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
body.page-template-page-20-hours-free :is(
  .ac-offer-scarcity__inner
) {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Team band: ac-interior-system puts 7rem gutters on BOTH the .ac-firm-team
   wrapper group and the .ac-founders section inside it, which stacks with
   the section's own padding. Zero the wrapper so the band carries exactly
   the 9rem gutters .ac-founders gets from list §1a above. (Sydney dodges
   this because its body carries .ac-homepage, which interior-system skips.) */
body.page-template-page-20-hours-free .ac-firm-team {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Testimonials (shared pattern): only the inner is capped at 1680 — the
   background curve SVG stays full-bleed, same as ac-capp-system.css. */
body.page-template-page-20-hours-free .ac-testimonials__inner {
  padding-left: 0;
  padding-right: 0;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   2. TYPE — homepage eyebrow spec on the light bands. Base
      .racetrack-badge is 20px/600 white (dark-theme); restate the
      homepage light reference (Client Impact): Inter 0.8rem / 700 /
      0.14em / caps, PLAIN text, page ink. The ROI band's .ac-badge
      pill sits on the dark panel and keeps its own styling.
   ============================================================ */
body.page-template-page-20-hours-free .racetrack-badge {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--lt-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: inline-block !important;
}

/* ============================================================
   3. COLOUR — light theme below the hero
   ============================================================ */

/* ── FAQ — open item's chevron turns coral (homepage rule 5) ── */
body.page-template-page-20-hours-free .ac-capp-faq__trigger[aria-expanded="true"] .ac-capp-faq__icon {
  stroke: var(--lt-attn) !important;
}

/* ── Footer — homepage light footer treatment ── */
body.page-template-page-20-hours-free .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body.page-template-page-20-hours-free :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer a { color: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer a:hover { color: var(--ac-primary) !important; }
body.page-template-page-20-hours-free .ac-footer a.ac-footer__email-link,
body.page-template-page-20-hours-free .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer a.ac-pill-cta.ac-footer__map-pill {
  color: var(--lt-ink) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.18);
}
body.page-template-page-20-hours-free .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body.page-template-page-20-hours-free .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body.page-template-page-20-hours-free .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body.page-template-page-20-hours-free .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   4. HERO LAYOUT — homepage recipe: full-viewport band
      (calc(100vh/0.80) for the site-wide body{zoom:0.80}, capped
      1125px) with the copy vertically centred, and the trusted-by
      carousel pinned at the hero's bottom edge on the same 9rem
      gutters. Below 961px the hero keeps its natural stacked flow
      (and its base top padding that clears the fixed nav), like
      the homepage's own mobile fallback.
   ============================================================ */
@media (min-width: 961px) {
  body.page-template-page-20-hours-free .ac-loc-hero {
    height: calc(100vh / 0.80) !important;
    min-height: calc(100vh / 0.80) !important;
    max-height: min(calc(100vh / 0.80), 1125px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  /* Nudge the copy below the fixed nav pill */
  body.page-template-page-20-hours-free .ac-loc-hero .ac-hero__center-content {
    margin-top: 2rem;
  }
  /* Trust carousel pinned at the hero's BOTTOM edge, on the same
     9rem gutters — the homepage `.ac-hero > .ac-trust-carousel`
     treatment. Absolute children ignore the hero's padding, so the
     gutters are restated as insets. */
  body.page-template-page-20-hours-free .ac-loc-hero .ac-trust-carousel {
    position: absolute !important;
    left: 9rem !important;
    right: 9rem !important;
    bottom: 2.5rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 2;
  }
}
/* The carousel's edge fades (::before/::after) paint solid var(--ac-bg),
   which shows as dark patches — replace with a transparency mask, same
   fix as the homepage/firm/capability heroes. */
body.page-template-page-20-hours-free .ac-loc-hero .ac-trust-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
body.page-template-page-20-hours-free .ac-loc-hero .ac-trust-carousel::before,
body.page-template-page-20-hours-free .ac-loc-hero .ac-trust-carousel::after {
  display: none !important;
}

/* ── Hero address badge: same slot as the homepage (far right of the CTA
      row), but the homepage's right-gutter OVERHANG must be cancelled.
      ac-homepage.unmin.css pulls the badge out past the column with
      `margin-right: min(0px, calc(1448px - 125vw))` — a figure calibrated
      for the homepage hero's ~1160px column. This page's hero column is
      1680px wide (see §1a), so that same −552px pull at 1600px lands the
      badge outside the hero, where `overflow:hidden` clips it away.
      margin-left:auto is kept, so the badge still pins to the right edge
      of the 1680px column — visually the homepage position, no overhang.
      The ≤900px rules in ac-homepage.unmin.css still reset margin-left to
      centre it in the stacked CTA column; this only touches the right. ── */
body.page-template-page-20-hours-free .ac-hero__ctas .ac-hero__address-badge {
  margin-right: 0 !important;
}

/* ============================================================
   5. SECTION DIVIDERS — the homepage's inset hairline between
      white-on-white band boundaries (transparent for the first/
      last 9rem, matching the gutters). The band straight after
      hero itself has none. Applied to EVERY band after the hero,
      which is what the homepage does (verified: same 9rem inset and
      the same rgba(9,32,42,0.22) hairline on every band incl. the
      lead form).
   ============================================================ */
body.page-template-page-20-hours-free { --ac-divider-inset: 9rem; }
@media (max-width: 960px) { body.page-template-page-20-hours-free { --ac-divider-inset: 2rem; } }
@media (max-width: 600px) { body.page-template-page-20-hours-free { --ac-divider-inset: 1.5rem; } }

/* The scarcity pull-quote band is deliberately divider-free on both
   sides — .ac-offer-scarcity (its top edge) and .ac-lead-form (the edge
   after it) are left out of this list. */
body.page-template-page-20-hours-free :is(
  .ac-offer-results,
  .ac-offer-services,
  .ac-offer-how,
  .ac-offer-safe,
  .ac-testimonials,
  .ac-offer-faq
) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) calc(100% - var(--ac-divider-inset)),
    transparent calc(100% - var(--ac-divider-inset))
  ) 1;
}

/* ============================================================
   6. MOTION — scroll-triggered fades stay disabled (performance
      landing page), and reduced-motion is honoured page-wide.
   ============================================================ */
body.page-template-page-20-hours-free .ac-fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-page-20-hours-free *,
  body.page-template-page-20-hours-free *::before,
  body.page-template-page-20-hours-free *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}