/* ============================================================
   THE FIRM — homepage design-system rollout
   Applies the homepage system to /the-firm/ (template
   page-the-firm, body.page-template-page-the-firm):

     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 (--lt-* palette): light
        grounds + #08222E ink below the hero; the HERO stays dark
        and untouched (same hands-off rule as the homepage hero).
        Dark cards that sit on light bands are kept dark but
        retoned to the standard #08222E.
     3. TYPE     — homepage unified section-heading scale
        (Inter, clamp(2.5rem,4vw,3.75rem)/700/1.1/-0.02em),
        the one eyebrow spec (0.8rem/700/0.14em caps, ink), and
        the 1.25rem/1.7 section-intro size.

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

/* ── Palette (mirrors ac-homepage-light.css, except --lt-page:
      the firm page ground is pure white per 2026-07-08 request) ── */
body.page-template-page-the-firm {
  --lt-page:      #FFFFFF;
  --lt-surface:   #FFFFFF;
  --lt-tint:      #E9F3F7;
  --lt-ink:       #08222E;
  --lt-border:    rgba(9, 32, 42, 0.10);
  --lt-border-brand: rgba(7, 169, 209, 0.22);
  --lt-attn:        #E5484D;
  --lt-attn-strong: #C62B30;

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

/* HANDS OFF THE HERO — it stays dark exactly like the homepage hero.
   This one rule only cancels the page-wide ink colour above so the
   hero's colourless text keeps the white it inherits. */
body.page-template-page-the-firm .ac-firm-hero { color: #FFFFFF !important; }

/* ============================================================
   1a. 9rem SIDE GUTTERS on every band (hero included, horizontal
       only — matches body.ac-homepage .ac-hero)
   ============================================================ */
body.page-template-page-the-firm :is(
  .ac-firm-hero,
  .ac-root-causes,
  .ac-approach,
  .ac-values,
  .ac-structure,
  .ac-founders,
  .ac-culture-section,
  .ac-roles,
  .ac-insights-posts,
  .ac-cta-wrapper-bg,
  .ac-footer
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
@media (max-width: 960px) {
  body.page-template-page-the-firm :is(
    .ac-firm-hero, .ac-root-causes, .ac-approach, .ac-values,
    .ac-structure, .ac-founders, .ac-culture-section, .ac-roles,
    .ac-insights-posts, .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (max-width: 600px) {
  body.page-template-page-the-firm :is(
    .ac-firm-hero, .ac-root-causes, .ac-approach, .ac-values,
    .ac-structure, .ac-founders, .ac-culture-section, .ac-roles,
    .ac-insights-posts, .ac-cta-wrapper-bg, .ac-footer
  ) {
    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).
       .ac-firm-team is now a bare WRAPPER around .ac-founders
       (intro/structure removed) — it gets NO padding of its own;
       the founders band carries the full section rhythm.
   ============================================================ */
body.page-template-page-the-firm :is(
  .ac-root-causes,
  .ac-approach,
  .ac-values,
  .ac-structure,
  .ac-founders,
  .ac-culture-section,
  .ac-roles,
  .ac-insights-posts,
  .ac-cta-wrapper-bg
) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.page-template-page-the-firm .ac-firm-team {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 960px) {
  body.page-template-page-the-firm :is(
    .ac-root-causes, .ac-approach, .ac-values, .ac-structure,
    .ac-founders, .ac-culture-section, .ac-roles, .ac-insights-posts, .ac-cta-wrapper-bg
  ) {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 600px) {
  body.page-template-page-the-firm :is(
    .ac-root-causes, .ac-approach, .ac-values, .ac-structure,
    .ac-founders, .ac-culture-section, .ac-roles, .ac-insights-posts, .ac-cta-wrapper-bg
  ) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* ============================================================
   1c. CONTENT INNERS → 1680px, own side padding removed (the
       band's 9rem gutter takes over). Founders inner joined the
       1680px measure when the cards went panel-less/full-width.
   ============================================================ */
body.page-template-page-the-firm :is(
  .ac-root-causes__inner,
  .ac-approach__inner,
  .ac-values__inner,
  .ac-structure__inner,
  .ac-founders__inner,
  .ac-culture-section__inner,
  .ac-roles__inner,
  .ac-insights-posts__inner
) {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   2. TYPE — homepage scales
   ============================================================ */

/* Unified section headings (homepage spec: Inter,
   clamp(2.5rem,4vw,3.75rem), 700, 1.1, -0.02em) */
body.page-template-page-the-firm :is(
  .ac-root-causes__headline,
  .ac-approach__headline,
  .ac-values__headline,
  .ac-firm-team__title,
  .ac-founders__headline,
  .ac-roles__headline,
  .ac-insights-posts__title
) {
  font-size: clamp(2.5rem, 4vw, 3.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--lt-ink) !important;
  text-wrap: balance;
}
@media (max-width: 768px) {
  body.page-template-page-the-firm :is(
    .ac-root-causes__headline, .ac-approach__headline, .ac-values__headline,
    .ac-firm-team__title, .ac-founders__headline, .ac-roles__headline,
    .ac-insights-posts__title
  ) {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
  }
}

/* Eyebrow / kicker labels — ONE homepage spec (the .racetrack-badge
   reference): Inter 0.8rem / 700 / 0.14em / caps / ink, PLAIN text —
   no pill, no border, no padding (matches body.ac-homepage
   .racetrack-badge in ac-homepage.unmin.css). 1.25rem below to the
   heading, same as the homepage badge margin.
   Hero eyebrows excluded (hero is dark). */
body.page-template-page-the-firm :is(.ac-section-label, .ac-badge, .ac-insights-posts__label):not(.ac-firm-hero *) {
  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;
}

/* Section intros / subtexts — homepage standard 1.25rem / 1.7.
   Colour: grey #5A6B75 (2026-07-09 request — match the Open Roles
   subtext "We're always looking for curious, driven people…"). */
body.page-template-page-the-firm :is(
  .ac-values__intro,
  .ac-approach__subtext,
  .ac-firm-team__body,
  .ac-founders__subtext,
  .ac-roles__subtext,
  .ac-structure__tagline
) {
  font-size: 24px !important;
  line-height: 1.7 !important;
  color: #5A6B75 !important;
}

/* Header STACK spacing — homepage rhythm: eyebrow →(1.25rem, carried
   by the eyebrow rule above)→ heading →(20px, matches the homepage
   headline→description gap)→ description; header block →(4rem)→
   section content (homepage .ac-what-we-do__header margin-bottom). */
body.page-template-page-the-firm :is(
  .ac-root-causes__header,
  .ac-approach__header,
  .ac-values__header,
  .ac-founders__header,
  .ac-roles__header
) {
  margin-bottom: 4rem !important;
}
@media (max-width: 768px) {
  body.page-template-page-the-firm :is(
    .ac-root-causes__header, .ac-approach__header, .ac-values__header,
    .ac-founders__header, .ac-roles__header
  ) {
    margin-bottom: 2.5rem !important;
  }
}
body.page-template-page-the-firm :is(
  .ac-root-causes__headline,
  .ac-approach__headline,
  .ac-values__headline,
  .ac-founders__headline,
  .ac-roles__headline
) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.page-template-page-the-firm :is(
  .ac-root-causes__sub,
  .ac-approach__subtext,
  .ac-values__intro,
  .ac-founders__subtext,
  .ac-roles__subtext
) {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
/* ============================================================
   3. COLOUR — light theme below the hero
   ============================================================ */

/* ── Root causes (already white) — ink the remaining legacy text ── */
body.page-template-page-the-firm .ac-root-causes { background: #FFFFFF !important; }
body.page-template-page-the-firm :is(
  .ac-root-causes__headline,
  .ac-root-causes__col-heading,
  .ac-root-causes__card-text
) { color: var(--lt-ink) !important; }

/* ── Approach (#040f1a dark band → white) ── */
body.page-template-page-the-firm .ac-approach {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
/* .ac-approach__subtext deliberately absent — it keeps the grey
   #5A6B75 from the section-intro rule above (2026-07-09 request). */
body.page-template-page-the-firm :is(
  .ac-approach__headline,
  .ac-approach__quote-text,
  .ac-step__label,
  .ac-step__body
) { color: var(--lt-ink) !important; }
/* the step connector line was a white-alpha gradient — flip to ink */
body.page-template-page-the-firm .ac-step__line {
  background: linear-gradient(180deg, rgba(8, 34, 46, 0.28), rgba(8, 34, 46, 0.05)) !important;
}
/* .ac-approach__quote-accent keeps its teal gradient text */

/* ── Values (white band) — light cards ── */
body.page-template-page-the-firm .ac-values { background: #FFFFFF !important; }
/* .ac-values__intro keeps the grey #5A6B75 from the section-intro rule
   above (2026-07-09 request) — headline only here. */
body.page-template-page-the-firm .ac-values__headline { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-value-card { background: #E9F3F7 !important; }

/* ── Team wrapper band (dark → page ground) ── */
body.page-template-page-the-firm .ac-firm-team { background: var(--lt-page) !important; }
body.page-template-page-the-firm .ac-firm-team__title { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-firm-team__body { color: var(--lt-ink) !important; }

/* (Our Structure section removed from firm-team.php 2026-07-08 —
   its .ac-structure rules dropped with it; inert mentions in the
   shared :is() spacing lists left in place) */

/* ── Founders (white band, panel-less cards) ── */
body.page-template-page-the-firm .ac-founders__headline { color: var(--lt-ink) !important; }
/* cards are panel-less: full-bleed photo + name/role straight on the white
   page — no background, border, or shadow (see firm-team.php styles) */
body.page-template-page-the-firm .ac-founders__card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Culture (already white) — ink the legacy #1a1a2e / grey text ── */
body.page-template-page-the-firm .ac-culture-section { background: #FFFFFF !important; }
body.page-template-page-the-firm .ac-culture-section .ac-firm-culture__quote,
body.page-template-page-the-firm .ac-culture-section .ac-firm-culture__body p { color: var(--lt-ink) !important; }

/* ── Insights (#08222E band → white, homepage card treatment) ── */
body.page-template-page-the-firm .ac-insights-posts { background: #FFFFFF !important; }
body.page-template-page-the-firm .ac-insights-posts__title { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-post-card {
  background: var(--lt-surface) !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 20px rgba(12, 40, 55, 0.06) !important;
}
body.page-template-page-the-firm .ac-post-card:hover {
  border-color: var(--lt-border-brand) !important;
  box-shadow: 0 10px 32px rgba(7, 169, 209, 0.14) !important;
}
body.page-template-page-the-firm :is(
  .ac-post-card__title,
  .ac-post-card__excerpt,
  .ac-post-card__date,
  .ac-post-card__read-time
) { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-post-card__footer { border-top-color: var(--lt-border) !important; }
body.page-template-page-the-firm .ac-post-card__category {
  color: var(--lt-ink) !important;
  border-color: var(--lt-border) !important;
}

/* ── CTA (dark panel → soft cyan brand panel, homepage treatment) ── */
body.page-template-page-the-firm .ac-cta {
  background: linear-gradient(180deg, #EAF6FA 0%, #DCEFF4 45%, #CDE7EF 100%) !important;
}
body.page-template-page-the-firm :is(.ac-cta__title, .ac-cta__heading, .ac-cta__subtitle, .ac-cta__reassurance, .ac-cta-note) {
  color: var(--lt-ink) !important;
}
body.page-template-page-the-firm .ac-cta .ac-btn--outline {
  color: var(--lt-ink) !important;
  border-color: var(--lt-border-brand) !important;
}
body.page-template-page-the-firm .ac-cta .ac-btn--outline:hover {
  color: var(--ac-primary) !important;
  border-color: var(--ac-primary) !important;
}
/* Coral conversion moment — same as the homepage final CTA */
body.page-template-page-the-firm .ac-cta .ac-btn--cta-white {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6B5E 0%, var(--lt-attn) 100%) !important;
  border-color: transparent !important;
}
body.page-template-page-the-firm .ac-cta .ac-btn--cta-white:hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--lt-attn) 0%, var(--lt-attn-strong) 100%) !important;
  box-shadow: 0 10px 30px rgba(229, 72, 77, 0.35) !important;
  border-color: transparent !important;
}

/* ── Footer — homepage light footer treatment ── */
body.page-template-page-the-firm .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body.page-template-page-the-firm :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-footer a { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-footer a:hover { color: var(--ac-primary) !important; }
body.page-template-page-the-firm .ac-footer a.ac-footer__email-link,
body.page-template-page-the-firm .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body.page-template-page-the-firm .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-the-firm .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body.page-template-page-the-firm .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body.page-template-page-the-firm .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body.page-template-page-the-firm .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   4. SECTION DIVIDERS — the homepage's inset hairline between
      bands (transparent for the first/last 9rem, matching the
      gutters). Top-level bands only; the section straight after
      the hero is omitted, exactly like the homepage.
   ============================================================ */
body.page-template-page-the-firm { --ac-divider-inset: 9rem; }
@media (max-width: 960px) { body.page-template-page-the-firm { --ac-divider-inset: 2rem; } }
@media (max-width: 600px) { body.page-template-page-the-firm { --ac-divider-inset: 1.5rem; } }

body.page-template-page-the-firm :is(
  .ac-approach,
  .ac-values,
  .ac-firm-team,
  .ac-lead-form,
  .ac-roles,
  .ac-insights-posts,
  .ac-cta-wrapper-bg
) {
  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;
}

/* ============================================================
   4. SECTION HEADERS → LEFT ALIGNED (eyebrow, heading,
      subheading) across every band on the page. Two moves:
      (a) flip text-align on the header containers/headlines,
      (b) zero the margin-left on elements centred via
          max-width + margin auto so they hug the left gutter.
   ============================================================ */
body.page-template-page-the-firm :is(
  .ac-what-we-do__header,
  .ac-root-causes__header,
  .ac-root-causes__headline,
  .ac-approach__header,
  .ac-values__header,
  .ac-firm-team__intro,
  .ac-structure__header,
  .ac-structure__tagline,
  .ac-roles__header,
  .ac-founders__header,
  .ac-insights-posts__header,
  .ac-firm-cta
) {
  text-align: left !important;
}
/* (.ac-firm-culture__headline / __body dropped from the left-align
   lists 2026-07-09 — the culture quote is CENTRED per user request;
   its centring + size live in ac-firm.css and must not be beaten.) */
body.page-template-page-the-firm :is(
  .ac-root-causes__headline,
  .ac-root-causes__sub,
  .ac-approach__headline,
  .ac-approach__subtext,
  .ac-values__intro,
  .ac-firm-team__title,
  .ac-structure__tagline,
  .ac-roles__headline,
  .ac-roles__subtext,
  .ac-cta__title,
  .ac-cta__subtitle
) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ── Open Roles joins the system (2026-07-09): sits flat on the white
      page — kill the pattern's cyan radial glow — and the subtext's
      580px-era measure cap goes so it can run the wide header. ── */
body.page-template-page-the-firm .ac-roles { background: transparent !important; }
body.page-template-page-the-firm .ac-roles::after { display: none !important; }
body.page-template-page-the-firm .ac-roles__subtext { max-width: none !important; }

/* Approach subheading was capped at 580px for the old centred layout —
   uncapped so the sentence runs on a single line on desktop (it only
   wraps when the viewport genuinely can't fit it). */
body.page-template-page-the-firm .ac-approach__subtext {
  max-width: none !important;
}

/* Approach steps — larger type; titles carry the row. Badge circle and
   the 196px body measure scale up with it. */
body.page-template-page-the-firm .ac-step__label {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
body.page-template-page-the-firm .ac-step__num {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
}
body.page-template-page-the-firm .ac-step__body {
  font-size: 20px !important;
  line-height: 1.6 !important;
  max-width: 300px !important;
}

/* Approach wave — true edge-to-edge. Under body{zoom:0.80} the real
   viewport is 125vw in CSS units (old 120vw stopped short). On top of
   that, the SVG artwork's line ENDPOINTS fan out across the first ~9%
   and last ~2% of the drawing, so at exactly-viewport width the lines
   visibly stop inside the edges. scaleX(1.3) pushes those endpoint
   zones off-screen; overflow-x:clip on the band stops the overhang
   from creating horizontal scroll. */
body.page-template-page-the-firm .ac-approach {
  overflow-x: clip !important;
}
body.page-template-page-the-firm .ac-approach__wave {
  width: 125vw !important;
  transform: translateX(-50%) scaleX(1.3) !important;
}

/* More air between the step title badge and its body text; the short
   connector line stretches to keep bridging the gap. */
body.page-template-page-the-firm .ac-step__badge {
  margin-bottom: 40px !important;
}
body.page-template-page-the-firm .ac-step__badge::after {
  bottom: -40px !important;
  height: 40px !important;
}

/* ── Band-gap tuning (2026-07-09 request) ──
   Team grid → culture quote: tightened (was 7rem + 7rem).
   The quote → gallery gap inside the culture band is widened
   separately via .ac-firm-culture__headline in ac-firm.css. */
body.page-template-page-the-firm .ac-founders {
  padding-bottom: 3rem !important;
}
body.page-template-page-the-firm .ac-culture-section {
  padding-top: 3rem !important;
}
@media (max-width: 960px) {
  body.page-template-page-the-firm .ac-founders { padding-bottom: 2rem !important; }
  body.page-template-page-the-firm .ac-culture-section { padding-top: 2rem !important; }
}