/**
 * About page overlay CSS — item-277 / body.item-277
 * Loaded ONLY on the About page canvas article (Itemid 277).
 * Pixel-parity fixes vs .pen Page/About — Light (qazRy) / Dark (NWQLv) / Mobile (Afh3u).
 *
 * FIX CLASSES (per review 2026-06-20):
 *  D1 — ALL eyebrows: template.css global .voy-eyebrow overrides ACM sizes/spacing
 *  D2 — Masthead eyebrow: teal → rust #C2562F (template.css beats --terracotta class)
 *  D3 — CTA eyebrow: teal → white/0.7 (same global override)
 *  D4 — Feature/values cards: flat transparent → white r22 border card
 *  D5 — Team cards: flat → white r22 border card + clip
 *  D6 — Team photo: aspect-ratio:3/4 (too tall) → fixed height 240px
 *  D7 — Team role: muted grey → teal var(--voy-secondary)
 *  D8 — Stats value: 48px → 52px Playfair
 *  D9 — URL collision: footer alias item-330 alias=about fixed (PDO, see build-docs/)
 */

/* ──────────────────────────────────────────────────────────────────────────────
 * §1  MASTHEAD — eyebrow rust + correct size/spacing
 * .pen xe1ZZ: eyebrow #C2562F Geist Mono 13 ls2 / title Playfair 54/700 / sub Inter 18 muted
 * ──────────────────────────────────────────────────────────────────────────── */
body.item-277 .acm-page-masthead .voy-eyebrow,
body.item-277 .acm-page-masthead .acm-masthead-eyebrow {
  font-size: 13px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
}
body.item-277 .acm-page-masthead .acm-masthead-eyebrow--terracotta {
  color: var(--voy-primary, #C2562F) !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §2  BREADCRUMB — padding already correct; ensure no gap between breadcrumb and story
 * ──────────────────────────────────────────────────────────────────────────── */
/* No additional breadcrumb fixes needed — verified correct */

/* ──────────────────────────────────────────────────────────────────────────────
 * §3  STORY section — eyebrow teal (correct per .pen gSeZi vVWzF), size/ls fix
 * ──────────────────────────────────────────────────────────────────────────── */
body.item-277 .acm-story .voy-eyebrow,
body.item-277 .acm-story .acm-story-eyebrow {
  font-size: 13px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
  /* color stays teal — .pen vVWzF fill:#1F6F6B ✓ */
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §4  STATS band — value Playfair 52px (D8: ACM hardcodes 48px)
 * .pen b0yFfg stats: value 52/700 #FFF; label Inter 15 opacity:0.85 = rgba(255,255,255,0.85)
 * ──────────────────────────────────────────────────────────────────────────── */
body.item-277 .acm-statistics .acm-stat-value {
  font-size: 52px !important;
  line-height: 1 !important;
}
body.item-277 .acm-statistics .acm-stat-label {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §5  VALUES / FEATURES section (acm-features style-2)
 * .pen x5qRn: bg #F2EBE1 (elevated) ✓; eyebrow teal 13/2px; h2 38/700 ✓
 * Cards (wwueo): white #FFFFFF, cornerRadius 22, stroke #E5DCD0 1px, padding 26px (D4)
 * ──────────────────────────────────────────────────────────────────────────── */
body.item-277 .acm-features .voy-eyebrow,
body.item-277 .acm-features .acm-features-eyebrow {
  font-size: 13px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
  /* color stays teal — .pen Y5tA4f fill:#1F6F6B ✓ */
}

/* Feature value cards — .pen wwueo: white card r22 border #E5DCD0 pad 26px */
body.item-277 .acm-features .acm-feature {
  background: var(--voy-surface, #FFFFFF) !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  border-radius: var(--voy-r-lg, 22px) !important;
  padding: 26px !important;
}

/* Feature icon chip — .pen x04sqW: #F2EBE1 bg, r14, 48×48 — already correct via voy-icon-chip */

/* ──────────────────────────────────────────────────────────────────────────────
 * §6  TEAM section (acm-team style-1)
 * .pen ttyJF: bg #FAF6F0 ✓; eyebrow teal 13/2px; h2 38/700 ✓
 * Cards (NdykD): fill #FFFFFF, cornerRadius 22, stroke #E5DCD0 1px, clip:true (D5)
 * Photo: 240px height (D6: aspect-ratio:3/4 → 456px — too tall)
 * Role: teal #1F6F6B (D7: ACM uses text-dim muted)
 * ──────────────────────────────────────────────────────────────────────────── */
body.item-277 .acm-team .voy-eyebrow,
body.item-277 .acm-team .acm-team-eyebrow {
  font-size: 13px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
}

/* Team card — white card with border radius and border (D5) */
body.item-277 .acm-team .acm-team-card {
  background: var(--voy-surface, #FFFFFF) !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  border-radius: var(--voy-r-lg, 22px) !important;
  overflow: hidden !important;
  gap: 0 !important;  /* photo + info body, no gap between them */
}

/* Team photo — fixed 240px height, clip top of card (D6) */
body.item-277 .acm-team .acm-team-photo {
  height: 240px !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;  /* card itself clips the top corners */
  overflow: hidden !important;
}

/* Team info body — padding matches .pen NdykD DpyM0 padding:18 */
body.item-277 .acm-team .acm-team-info {
  padding: 18px !important;
}

/* Team role — teal per .pen a5ahN fill:#1F6F6B (D7) */
body.item-277 .acm-team .acm-team-role {
  color: var(--voy-secondary, #1F6F6B) !important;
  font-family: 'Geist Mono', 'Courier New', monospace !important;
  font-size: 12px !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §7  TESTIMONIAL (acm-testimonials style-2) — .pen a2MQOh
 * bg #FAF6F0 ✓; single centered quote Playfair 22 italic; stars gold #E0A458;
 * name Inter 14/600 #1A1512; role Inter 13 muted; avatar 44px circle
 * No card wrapper in .pen (just the quote block on page bg) — already correct
 * ──────────────────────────────────────────────────────────────────────────── */
/* Stars color — .pen AZrkx fill:#E0A458 gold ✓ (acm-testimonials style-2 uses var(--voy-accent)) */
/* No fixes needed for testimonial */

/* ──────────────────────────────────────────────────────────────────────────────
 * §8  CTA BAND (acm-cta style-2 voy-section--teal) — .pen PuRbc
 * bg teal #1F6F6B ✓; eyebrow rgba(255,255,255,0.7) Geist Mono 13/2px (D3);
 * title Playfair 44/700 #FFF ✓; sub Inter 17 rgba(255,255,255,0.85) ✓
 * primary btn: white #FFF, text #C2562F ✓; ghost btn: outline white (D11, D12)
 * ──────────────────────────────────────────────────────────────────────────── */
body.item-277 .acm-cta .voy-eyebrow,
body.item-277 .acm-cta .acm-cta2-eyebrow {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
}

/* D11 — Ghost button color: .btn class overrides color:#fff → near-white teal tint */
body.item-277 .acm-cta .acm-cta2-btn-ghost {
  color: #fff !important;
}

/* D12 — Ghost button border: .btn class sets border-color:transparent; restore white-outline */
body.item-277 .acm-cta .acm-cta2-btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §9  SPACING FIXES — section-level padding and head-to-cards gaps
 *
 * FIX-A: CTA band — shared scss sets .acm-cta.voy-section{padding-block:64px}
 *   (from SESSION 3 FIX-1 rhythm: stats/cta=64, everything else=88).
 *   But the About .pen (PuRbc / MtNGj) specifies padding:[80,48] = 80px top/bottom.
 *   Per-page override required.
 *
 * FIX-B: Team .voy-section__head margin-bottom — shared scss has `margin:0 auto 44px`.
 *   .pen j9ST6W Inner gap=32 means head→cards = 32px.
 *   Features already overrides to 32px (acm-features.style-2 .voy-section__head
 *   { margin: 0 auto 32px } in acm/features-intro/css/style.css).
 *   Team has no such override → 44px live. Fix here.
 *
 * FIX-C: Section head eyebrow→h2 gap — .pen ARvSf/OnxOO gap:12.
 *   Shared scss .voy-section__head is display:block with no gap, so eyebrow
 *   sits 1px above h2 (line-height rounding). Needs flex+gap:12 to match .pen.
 *   NOTE: This fix is per-page (body.item-277 scope). SHARED-SCSS-DELTA for
 *   orchestrator: `.voy-section__head { display:flex; flex-direction:column;
 *   align-items:center; gap:12px; }` (affects all pages, safe — values already
 *   override separately; team/testimonials/cta heads all benefit).
 * ──────────────────────────────────────────────────────────────────────────── */

/* FIX-A: CTA band → 80px (About .pen spec, not the shared 64px rhythm) */
body.item-277 .acm-cta.style-2 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* FIX-B: Team section head → 32px below head (not the shared 44px) */
body.item-277 .acm-team .voy-section__head {
  margin-bottom: 32px !important;
}

/* FIX-C: Section head eyebrow → h2 gap = 12px per .pen ARvSf/OnxOO */
body.item-277 .voy-section__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  /* margin-bottom already set per section; keep margin shorthand via !important below:
     Values .voy-section__head { margin: 0 auto 32px } wins on specificity because it's
     (0,3,0) but about.css loads later — keep margin-bottom per-section explicit. */
}
/* Ensure left-aligned story section head (if any) doesn't get centered */
body.item-277 .acm-story .voy-section__head {
  align-items: flex-start !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §9b DARK MODE — token-driven remaps for the above overrides
 * Most are already var-driven → auto-remap; explicit dark overrides below for
 * hard-coded values that won't flip automatically.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Stats band dark — bg #46A39D (.pen vwnaa) ✓ (via darkmode.css token) */
/* Feature cards dark — bg var(--voy-surface) → darkmode.css flips to #211B16;
   border var(--voy-border) → #352C24; both auto-remap ✓ */
/* Team cards dark — same token-driven; photo keeps height:240px ✓ */
/* Team role dark — var(--voy-secondary) → darkmode.css flips to #46A39D teal ✓ */

/* ──────────────────────────────────────────────────────────────────────────────
 * §10  MOBILE CTA band — .pen Afh3u DINeN: RUST #C2562F (not teal)
 * Override: switch teal→terracotta on mobile; single primary button only
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* ── MOBILE SIDE PADDING (per .pen frames padding:[*,20]) ─────────────────
     Canvas container is padding-inline:0 on canvas pages, so give each section
     20px side padding (matches Pricing/Landing) — text no longer touches edge. */
  body.item-277 .acm-page-masthead,
  body.item-277 .acm-story,
  body.item-277 .acm-features,
  body.item-277 .acm-team,
  body.item-277 .acm-statistics,
  body.item-277 .acm-testimonials,
  body.item-277 .acm-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── MOBILE SECTION PADDING (per .pen Afh3u frame) ──────────────────────── */

  /* Masthead — .pen s17fW padding:[40,20,28,20] → pt=40, pb=28
     ACM mobile rule (acm/page-masthead/css): 56px top 20px bottom */
  body.item-277 .acm-page-masthead.style-1 {
    padding-top: 40px !important;
    padding-bottom: 28px !important;
  }

  /* Story — .pen W6hpi padding:[8,20,40,20] → pt=8, pb=40
     ACM mobile rule (acm/story/css): 48px top 56px bottom */
  body.item-277 .acm-story.style-1 {
    padding-top: 8px !important;
    padding-bottom: 40px !important;
  }

  /* Values/Features — .pen E8LSX padding:[40,20] → 40px top/bottom
     Shared scss base is 80px, no mobile override in ACM */
  body.item-277 .acm-features.style-2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Team — .pen jpGsm padding:[40,20] — already 40px via FIX above ✅
     (acm/team mobile was 56px → fixed to 40px in the block above) */
  body.item-277 .acm-team.style-1 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Team grid — .pen jpGsm: single-column full-width vertical cards (photo-top +
     white info bar), NOT the 2-col grid that leaked from acm/team mobile default. */
  body.item-277 .acm-team .acm-team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats — .pen oJ4Pf padding:[40,20] → already 40px via FIX above ✅ */
  body.item-277 .acm-statistics.style-1 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Testimonial — .pen Z7uGC padding:[40,20] → pt=40, pb=40
     ACM style-2 desktop is 20px top / 80px bottom → both wrong on mobile */
  body.item-277 .acm-testimonials.style-2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* CTA — .pen DINeN padding:[48,20] → pt=48, pb=48
     Desktop FIX-A set 80px → mobile override to 48px */
  body.item-277 .acm-cta.style-2 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ── MOBILE CTA appearance ──────────────────────────────────────────────── */
  body.item-277 .acm-cta.style-2.voy-section--teal {
    background: var(--voy-primary, #C2562F) !important;
  }
  /* Ghost button hidden on mobile — .pen shows single CTA only */
  body.item-277 .acm-cta2-actions .acm-cta2-btn-ghost {
    display: none !important;
  }
  /* Primary button: white on terracotta */
  body.item-277 .acm-cta.style-2 .acm-cta2-btn-primary {
    background: #fff !important;
    color: var(--voy-primary, #C2562F) !important;
    border-color: transparent !important;
  }
  /* Mobile CTA eyebrow inherits rust bg → keep white/0.7 */
  body.item-277 .acm-cta .voy-eyebrow,
  body.item-277 .acm-cta .acm-cta2-eyebrow {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Mobile team — 2-col grid per .pen Afh3u (4 cards → 2×2) */
  /* ACM team already responsive @max 767.98 (2-col), no override needed */

  /* Mobile feature cards — keep card style on mobile */
  body.item-277 .acm-features .acm-feature {
    background: var(--voy-surface, #FFFFFF) !important;
    border: 1px solid var(--voy-border, #E5DCD0) !important;
    border-radius: var(--voy-r-lg, 22px) !important;
    padding: 26px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
 * §11  CANVAS CONTENT RE-CAP  [CANVAS-CONTENT-CAP-LOST] (orchestrator verify-the-verifier)
 * Root cause: template.css:19257 `body:has(.voy-canvas-page) .container{max-width:none;
 * padding:0}` strips the reading-width so ACM BANDS are edge-to-edge — but it ALSO uncaps
 * the CONTENT inside each block's .container, so left-aligned/grid blocks (Our Story 2-col,
 * Team grid, Principles) ram the viewport edge (heading clipped). The band BG lives on the
 * SECTION (.voy-section--*, parent of .container, still full-bleed), so re-capping .container
 * re-centers content WITHOUT shrinking the band. 1140 content cap (PAGE-MAP) = 1188 box + 24 pad.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body.item-277 .ja-acm > .container {
    max-width: 1188px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}