/* Services — AI pricing-tier band (mobile).
   The tier band is a 3-column dividered grid built with inline styles. A shared
   rule (shared.css) already collapses grids inside sections to a single column
   at <=640px, but each tier keeps its inline border-right and asymmetric padding
   (first tier padding-left:0, the rest padding-left:40px) — leaving stray vertical
   rules on the right and staggered, misaligned left edges once stacked.
   Realign the stacked tiers here: drop the vertical rules for horizontal dividers
   and reset padding flush-left, mirroring the blog .recent band. !important is
   required to override the per-tier inline styles. */
@media (max-width: 640px){
  section .wrap-inner > .ai-tiers{gap:0 !important}
  .ai-tier{padding:32px 0 !important;border-right:none !important;border-top:1px solid #2A2A2E !important}
  .ai-tier:first-child{padding-top:8px !important;border-top:none !important}
  .ai-tier:last-child{padding-bottom:0 !important}
}

/* Services — "Three ways to work together." pricing bands (mobile).
   Same 3-column inline-styled band as the AI tiers. Each band keeps its inline
   border-right (stray vertical rules) and asymmetric padding (first band
   padding-left:0, the rest padding-left:32px) once the shared rule stacks them at
   <=640px. Bands already carry border-bottom, so those become the horizontal
   dividers; here we just drop the vertical rules, close the gap, and reset padding
   flush-left. !important is required to override the per-band inline styles. */
@media (max-width: 640px){
  section .wrap-inner > .price-bands{gap:0 !important}
  .price-band{padding:32px 0 !important;border-right:none !important}
  .price-band:first-child{padding-top:24px !important}
}

/* Services — "What clients ask before signing." FAQ grid (mobile).
   A 2-column grid: even items sit in the left column (padding-left:0, border-right),
   odd items in the right (padding-left:32px), and the last-row logic strips
   border-bottom from the final two items. Once the shared rule stacks it at
   <=640px this leaves staggered left edges, a stray vertical rule, and a missing
   divider between the last two items. Normalise to a single flush-left column with
   a divider under every item except the last. !important overrides the per-item
   inline styles; var(--hair) tracks the theme (light #E6E6E1 / dark #2A2A2E). */
@media (max-width: 640px){
  section .wrap-inner > .faq-grid{gap:0 !important}
  .faq-item{padding:28px 0 !important;border-right:none !important;border-bottom:1px solid var(--hair) !important}
  .faq-item:last-child{border-bottom:none !important;padding-bottom:0 !important}
}

/* ── Hero masthead: headline at full display size, lede beside it.
   The staged entrance animation itself is injected globally by reveal.ts. ── */
.page-hero{padding:64px 40px 80px}
.page-hero .wrap-inner{position:relative;z-index:1}
.page-hero .crumb{margin-bottom:32px}
.page-hero .hero-grid{position:relative;display:grid;grid-template-columns:1.7fr 1fr;gap:0 72px;align-items:end}
.page-hero .hero-grid > h1,
.page-hero .hero-grid > .lede{position:relative;z-index:1}
.page-hero .hero-grid > h1{grid-column:1}
.page-hero .hero-grid > .lede{grid-column:2;grid-row:1;margin:0 0 10px;max-width:420px;font-size:18px;line-height:1.55;color:var(--ink-2);border-top:1px solid var(--hair);padding-top:22px}
@media (max-width:1200px){.page-hero .hero-grid{grid-template-columns:1.35fr 1fr;gap:0 48px}}
@media (max-width:900px){
  .page-hero .hero-grid{grid-template-columns:1fr;gap:32px}
  .page-hero .hero-grid > .lede{grid-column:1;grid-row:auto;max-width:none}
}