@charset "UTF-8";
/* AC INSTALLATION — page layer (W16). Planning + system design + process; cooling lean.
   Re-composes the W7 ai-* rules in site.css. Signature moments: planning rail, system diagram, installation timeline. */

/* Hero: calm warm field, copy left, framed photo right, full-width planning rail */
.svc-ai .ai-hero { background: linear-gradient(180deg, #EEF3FC 0%, var(--p-warm) 100%); padding: 56px 0 72px; }
.svc-ai .ai-hero-grid { grid-template-columns: .95fr 1.05fr; gap: 64px; }
.svc-ai .ai-hero h1 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.8rem); font-weight: 850; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
.svc-ai .ai-hero h1 .accent { margin-top: 10px; font-size: .56em; font-weight: 700; letter-spacing: -0.02em; color: var(--cobalt); }
.svc-ai .ai-hero .lede { color: var(--p-text); line-height: 1.62; }
.svc-ai .ai-still { background: #fff; border-left-color: var(--sky); }
.svc-ai .ai-still svg { color: var(--cobalt); }
.svc-ai .cta-note { color: var(--p-sub); }
.svc-ai .ai-photo .ph { border-radius: 22px; aspect-ratio: 5 / 4; box-shadow: 0 30px 60px rgba(23,33,58,.16); }
.ai-rail { margin-top: 56px; display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 24px 40px; padding: 26px 34px; background: var(--ink); border-radius: 18px; color: #fff; }
.ai-rail-lead { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.ai-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
.ai-rail li { counter-increment: r; display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; }
.ai-rail li::before { content: counter(r, decimal-leading-zero); font-size: .9rem; color: var(--sky); }
.ai-rail li::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(111,160,238,.7), rgba(111,160,238,0)); }
.ai-rail li:last-child::after { background: linear-gradient(90deg, rgba(228,103,127,.8), rgba(228,103,127,0)); }

/* Situations */
.svc-ai .ai-sit { background: #fff; padding: 104px 0; }
.svc-ai .sit-grid { border-top-color: var(--ink); }
.svc-ai .sit h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.015em; }
.svc-ai .sit p { font-size: 1.02rem; line-height: 1.64; }

/* SIGNATURE: system diagram staged on a cool field */
.svc-ai .ai-sys { background: linear-gradient(180deg, #E4EDFB 0%, #EEF3FC 100%); padding: 104px 0; }
.svc-ai .ai-sys-grid { grid-template-columns: 1.55fr .75fr; gap: 56px; }
.svc-ai .ai-sys figure { border-radius: 20px; padding: 18px; box-shadow: 0 24px 50px rgba(23,33,58,.14); }
.svc-ai .dg-cap { font-size: clamp(1.8rem, 1.3rem + 1.3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.08; }
.svc-ai .ai-sys .dg-legend li { font-size: 1.02rem; }

/* Choosing */
.svc-ai .ai-choose { background: #fff; padding: 104px 0; }
.svc-ai .size-feature { border-radius: 20px; padding: 44px 42px; }
.svc-ai .size-feature h3 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }
.svc-ai .size-feature .chips li { background: rgba(111,160,238,.14); }
.svc-ai .choose-side > div { border-bottom-color: #E6E0D5; }
.svc-ai .choose-side h3 { font-size: 1.32rem; font-weight: 800; }
.svc-ai .choose-side h3 svg { color: var(--cobalt); }

/* Before installation: photo bleeds off the RIGHT edge */
.svc-ai .aib { position: relative; background: var(--p-warm); padding: 0; min-height: 660px; display: flex; align-items: center; }
.aib-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; }
.aib-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.aib-grid { position: relative; width: 100%; }
.aib-copy { width: 46%; padding: 88px 0 88px 0; }
.svc-ai .before-list li { border-top-color: var(--p-warm-line); }
.svc-ai .before-list svg { color: var(--cobalt); }
.svc-ai .before-list strong { font-size: 1.2rem; font-weight: 800; }

/* SIGNATURE: dark installation timeline */
.svc-ai .ai-process { padding: 136px 0 112px; }
.aip-flow { top: 24px; opacity: .85; }
.svc-ai .ai-process h2 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); letter-spacing: -0.035em; }
.svc-ai .timeline h3 { font-size: 1.2rem; }
.svc-ai .timeline li.verify::before { background: var(--cobalt); border-color: var(--sky); }

/* California requirements: editorial, homeowner-useful, not a compliance wall */
.svc-ai .ai-ca { background: #fff; padding: 104px 0; }
.svc-ai .ca-card { border: 0; border-radius: 0; grid-template-columns: .8fr 1.2fr; gap: 0 64px; overflow: visible; }
.svc-ai .ca-intro { background: none; padding: 0; }
.svc-ai .ca-intro h2 { font-size: clamp(2rem, 1.35rem + 1.9vw, 3rem); letter-spacing: -0.03em; }
.svc-ai .ca-intro p:last-child { color: var(--p-sub); font-size: 1.1rem; }
.svc-ai .ca-items { border-top: 2px solid var(--ink); counter-reset: ca; }
.svc-ai .ca-items li { counter-increment: ca; border-left: 0; border-bottom: 1px solid #E6E0D5 !important; padding: 26px 24px 26px 0; }
.svc-ai .ca-items li:nth-child(n+3) { border-bottom: 0 !important; }
.svc-ai .ca-items svg { display: none; }
.svc-ai .ca-items li::before { content: counter(ca, decimal-leading-zero); display: block; margin-bottom: 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--cobalt); }
.svc-ai .ca-items h3 { font-size: 1.2rem; font-weight: 800; }
.svc-ai .ca-foot { grid-column: 1 / -1; margin-top: 28px; border-radius: 14px; }

/* Cost */
.svc-ai .ai-cost { background: var(--p-warm); padding: 104px 0; }
.svc-ai .cost-cloud { gap: 0 40px; border-top: 2px solid var(--ink); }
.svc-ai .cost-cloud li, .svc-ai .cost-cloud li:nth-child(3n+1) { background: none; border: 0; border-bottom: 1px solid var(--p-warm-line); border-radius: 0; padding: 20px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; }
.svc-ai .ai-cost-grid > div > p:last-child { color: var(--p-sub); font-size: 1.08rem; }

/* Preparation */
.svc-ai .ai-prep { background: #fff; padding: 104px 0; }
.svc-ai .ai-prep .tick-list li { border-top-color: #E6E0D5; }
.svc-ai .ai-prep .tick-list svg { color: var(--cobalt); }
.svc-ai .ai-prep .cta-card { background: var(--p-warm); box-shadow: none; border-radius: 18px; }

/* FAQ */
.svc-ai .faq-single { background: var(--p-warm); padding: 104px 0; }
.svc-ai .faq-single h2 { font-size: clamp(2rem, 1.35rem + 1.9vw, 3rem); }
.svc-ai .faq-list { border-top: 2px solid var(--ink); }
.svc-ai .faq-list details { border-bottom-color: var(--p-warm-line); }
.svc-ai .faq-list summary::after { color: var(--cobalt); }
.svc-ai .faq-list h3 { font-size: 1.25rem; font-weight: 800; }

/* Closing: cool, calm */
.svc-ai .closing--light { background: linear-gradient(180deg, #E4EDFB 0%, #F4F7FD 100%); padding: 96px 0 104px; }
.svc-ai .closing--light .btn-call { box-shadow: none; }

@media (max-width: 1100px) { .ai-rail { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
  .svc-ai .ai-hero-grid { grid-template-columns: 1fr; }
  .svc-ai .ai-photo .ph { aspect-ratio: 16 / 10; }
  .svc-ai .aib { display: block; min-height: 0; }
  .aib-photo { position: relative; width: 100%; aspect-ratio: 16 / 9; }
  .aib-copy { width: 100%; padding: 56px 0 72px; }
  .svc-ai .ca-card { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .svc-ai .ai-hero { padding: 28px 0 48px; }
  .svc-ai .ai-hero h1 { font-size: 2.2rem; }
  .ai-rail { margin-top: 36px; padding: 22px 20px; }
  .ai-rail ol { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .ai-rail li { font-size: 1.1rem; }
  .svc-ai .ai-sit, .svc-ai .ai-sys, .svc-ai .ai-choose, .svc-ai .ai-ca, .svc-ai .ai-cost, .svc-ai .ai-prep, .svc-ai .faq-single { padding: 64px 0; }
  .svc-ai .ai-sys figure { padding: 10px; }
  .svc-ai .size-feature { padding: 30px 22px; }
  .aib-photo { aspect-ratio: 4 / 3; }
  .aib-copy { padding: 44px 0 56px; }
  .svc-ai .ai-process { padding: 96px 0 64px; }
  .svc-ai .ca-items li { padding-right: 0; border-bottom: 1px solid #E6E0D5 !important; }
  .svc-ai .closing--light { padding: 64px 0 72px; }
}
@media (max-width: 720px) { .svc-ai .ai-hero-grid { gap: 22px; } .svc-ai .ai-photo { order: -1; } .svc-ai .ai-photo .ph { aspect-ratio: 16 / 9; } .svc-ai .ai-hero .crumbs { display: none; } }

/* ==========================================================================
   W16-R — AC Installation middle third
   California: heading row + four requirements across the full grid + footnote band.
   Cost: heading row + 4 x 2 factor list. FAQ: moved from a centred 940px column
   (x=273, off the site grid) onto the standard heading-column + list axis.
   ========================================================================== */
.svc-ai .ca-card { grid-template-columns: 1fr; gap: 0; }
.svc-ai .ca-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; align-items: end; margin-bottom: 40px; }
.svc-ai .ca-intro h2 { grid-column: 1; margin: 0; }
.svc-ai .ca-intro > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
.svc-ai .ca-items { grid-template-columns: repeat(4, 1fr); gap: 0 36px; }
.svc-ai .ca-items li, .svc-ai .ca-items li:nth-child(n+3) { border-bottom: 0 !important; padding: 28px 0 8px; }
.svc-ai .ca-foot { margin-top: 36px; }

.svc-ai .ai-cost-grid { grid-template-columns: 1fr; gap: 36px; }
.svc-ai .ai-cost-grid > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; align-items: end; }
.svc-ai .ai-cost-grid > div:first-child h2 { grid-column: 1; margin: 0; }
.svc-ai .ai-cost-grid > div:first-child > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
.svc-ai .cost-cloud { grid-template-columns: repeat(4, 1fr); gap: 0 36px; }

.svc-ai .faq-single .wrap { max-width: var(--wrap); display: grid; grid-template-columns: 340px 1fr; gap: 28px 72px; align-items: start; }
.svc-ai .faq-single h2 { margin: 0; }
.svc-ai .faq-single .faq-list { max-width: none; }

@media (max-width: 1024px) {
  .svc-ai .ca-intro, .svc-ai .ai-cost-grid > div:first-child, .svc-ai .faq-single .wrap { grid-template-columns: 1fr; }
  .svc-ai .ca-intro > p:last-child, .svc-ai .ai-cost-grid > div:first-child > p:last-child { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .svc-ai .ca-items, .svc-ai .cost-cloud { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .svc-ai .ca-items, .svc-ai .cost-cloud { grid-template-columns: 1fr; }
  .svc-ai .ca-items li { border-bottom: 1px solid #E6E0D5 !important; padding-bottom: 24px; }
}