/* ============================================================
   Servisponse v2 overlay — loads AFTER styles.css.
   Adds: iOS Messages phone chrome, single-vertical sections,
   audit card, pricing anchor card. Overrides v1 phone/bubble look.
   ============================================================ */

/* ---------- Photography layers with scroll parallax ---------- */
/* Structure: section > .pxwrap (clips) > .pxbg (oversized image layer, JS translates it) */
.pxwrap{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.pxbg{
  position:absolute; left:0; right:0; top:-14%; bottom:-14%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.pxbg--hero{ background-image:url('hero-bg.jpg?v=7'); background-position:right center; }
.pxbg--flow{ background-image:url('cta-bg.jpg?v=7'); background-position:center 35%; }
.pxbg--band{ background-image:url('band-toolbag.jpg?v=7'); background-position:center 60%; }

/* Hero: photo + slow Ken Burns drift + text scrim */
.hero{ position:relative; background:#14161A; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(20,22,26,.96) 0%, rgba(20,22,26,.88) 42%, rgba(20,22,26,.45) 72%, rgba(20,22,26,.25) 100%),
             linear-gradient(to top, rgba(20,22,26,.9) 0%, rgba(20,22,26,0) 30%);
}
.hero > .container{ position:relative; z-index:2; }
@keyframes kenburns{ from{ scale:1; } to{ scale:1.07; } }
.pxbg--hero{ animation:kenburns 26s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){ .pxbg--hero{ animation:none; } }

/* Final CTA: dashboard-phone photo, phone visible right of the centered copy */
.final-cta{ position:relative; background:#14161A; }
.pxbg--flow{ background-position:68% 45%; }
.final-cta::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(95deg, rgba(20,22,26,.9) 0%, rgba(20,22,26,.82) 55%, rgba(20,22,26,.5) 100%);
}
.final-cta > .blueprint-grid{ display:none; }
.final-cta > .container{ position:relative; z-index:2; }

/* Full-width photo breather band, stronger parallax */
.image-band{
  position:relative; height:320px; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (max-width:768px){ .image-band{ height:200px; } }

/* ---------- Wordmark ---------- */
.wordmark__desc{
  display:inline-block; margin-left:10px; font-family:'Hanken Grotesk',sans-serif;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); vertical-align:middle;
}
@media (max-width:560px){ .wordmark__desc{ display:none; } }

/* ---------- Hero additions ---------- */
.hero__promise{ font-size:19px; line-height:1.55; margin:14px 0 10px; max-width:56ch; }
.hero__promise strong{ color:var(--text-primary); }
.integration-row{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--border);
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); text-align:center;
}

/* ---------- iOS Messages phone chrome ---------- */
/* Kill any inherited scale/grow so the phone reads as a phone from first paint */
.phone--ios, .phone--ios *{ animation-name:none; }
.phone--ios{
  transform:none !important;
  background:#000; border:3px solid #3a3d44; border-radius:44px;
  padding:12px 10px 16px; max-width:340px; margin-inline:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  display:flex; flex-direction:column; overflow:hidden;
}
.phone--ios .phone__notch{ display:none; }
.ios-statusbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 18px 2px; color:#fff; font-size:13px; font-weight:700;
  font-family:-apple-system,'Hanken Grotesk',sans-serif;
}
.ios-glyphs{ display:flex; align-items:center; gap:6px; }
.ios-signal{ display:flex; align-items:flex-end; gap:1.5px; height:11px; }
.ios-signal i{ width:3px; background:#fff; border-radius:1px; display:block; }
.ios-signal i:nth-child(1){ height:4px; } .ios-signal i:nth-child(2){ height:6px; }
.ios-signal i:nth-child(3){ height:8px; } .ios-signal i:nth-child(4){ height:11px; }
.ios-batt{
  width:22px; height:11px; border:1px solid rgba(255,255,255,.5); border-radius:3px;
  position:relative; display:inline-block;
}
.ios-batt::before{ content:''; position:absolute; inset:1.5px; right:5px; background:#fff; border-radius:1.5px; }
.ios-batt::after{ content:''; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:rgba(255,255,255,.5); border-radius:0 1px 1px 0; }
.ios-contact{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0 10px; border-bottom:1px solid #1c1c1e;
}
.ios-avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg,#9a9fa8,#7a8089); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px; font-family:-apple-system,'Hanken Grotesk',sans-serif;
}
.ios-contact__name{ color:#fff; font-size:11.5px; font-family:-apple-system,'Hanken Grotesk',sans-serif; }
.phone--ios .phone__screen{
  background:#000; border:none; border-radius:0; padding:10px 10px 6px;
  display:flex; flex-direction:column; flex:1; min-height:0;
}
.phone--ios .phone__status{
  align-self:center; background:#1c1c1e; color:#f2f2f7; border:none;
  font-size:11px; border-radius:12px; padding:5px 12px; margin-bottom:10px;
  font-family:-apple-system,'Hanken Grotesk',sans-serif;
}
.sms-divider{
  text-align:center; color:#8e8e93; font-size:10.5px; margin:2px 0 8px;
  font-family:-apple-system,'Hanken Grotesk',sans-serif;
}
.sms-divider strong{ font-weight:700; color:#8e8e93; }
/* Bubbles: incoming (business) gray-left, outgoing (customer) iOS-blue-right */
.phone--ios .bubble{
  font-family:-apple-system,'Hanken Grotesk',sans-serif; font-size:13.5px;
  line-height:1.35; max-width:82%; padding:8px 12px; border-radius:18px;
  border:none; box-shadow:none;
}
.phone--ios .bubble--system{
  align-self:flex-start; background:#26252a; color:#f2f2f7;
  border-bottom-left-radius:5px;
}
.phone--ios .bubble--lead{
  align-self:flex-end; background:#0a84ff; color:#fff;
  border-bottom-right-radius:5px;
}
.phone--ios .bubble--final{ box-shadow:none; }
.phone--ios .bubble__tag{ display:none; }
.phone--ios .bubble__check{ display:none; }
.phone--ios .bubble__time{ display:none; }
.phone--ios .bubble--typing{
  background:#26252a; align-self:flex-start; border-radius:18px;
  border-bottom-left-radius:5px;
}
.bubble__delivered{
  align-self:flex-end; color:#8e8e93; font-size:10px; margin-top:-4px;
  font-family:-apple-system,'Hanken Grotesk',sans-serif;
}

/* ---------- Demo phone: fixed phone-sized frame, thread scrolls inside ---------- */
.demo__phone-col .phone--ios{ height:660px; max-height:78vh; }
.demo__phone-col .phone__screen{ overflow:hidden; }
.demo__phone-col .phone__thread{
  overflow-y:auto; min-height:0; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.demo__phone-col .phone__thread::-webkit-scrollbar{ display:none; }

/* ---------- Who it's for ---------- */
.whofor__grid{
  display:grid; gap:40px; align-items:center;
}
@media (min-width:960px){ .whofor__grid{ grid-template-columns:1.15fr .85fr; } }
.whofor__body p{ margin-bottom:14px; }
.whofor__media{ border-radius:14px; overflow:hidden; border:1px solid var(--border); min-height:220px; background:var(--bg-card); }
.whofor__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.whofor__media.media-pending img{ display:none; }
.whofor__media.media-pending{
  display:flex; align-items:center; justify-content:center; position:relative;
}
.whofor__media.media-pending::after{
  content:'HVAC imagery — in production'; color:var(--text-muted);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Pricing anchor card ---------- */
.price-anchor-card{
  max-width:760px; margin:0 auto; background:var(--bg-card);
  border:1px solid var(--border); border-radius:14px; padding:28px 30px;
}
.price-anchor-card .offer-anchor{ margin:0 0 16px; text-align:left; }
.price-anchor-card .offer-micro{ margin:0; text-align:left; }

/* ---------- Audit card (subordinate secondary CTA) ---------- */
.audit-card{
  max-width:640px; margin:26px auto 0; padding:20px 24px;
  border:1px dashed var(--border); border-radius:12px;
  background:transparent;
}
.audit-card__kicker{
  font-size:11px; letter-spacing:.14em; color:var(--text-muted);
  margin-bottom:8px; font-weight:700;
}
.audit-card__body{ font-size:14.5px; color:var(--text-muted); margin-bottom:10px; }
.audit-card__body strong{ color:var(--text-primary); }
.audit-card__link{ font-size:14px; }

/* ---------- Micro-motion: card lifts ---------- */
.price-anchor-card, .audit-card, .demo-cta-card, .stat-block{
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.price-anchor-card:hover, .audit-card:hover, .demo-cta-card:hover{
  transform:translateY(-4px);
}
.stat-block:hover{ transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){
  .price-anchor-card, .audit-card, .demo-cta-card, .stat-block{ transition:none; }
  .price-anchor-card:hover, .audit-card:hover, .demo-cta-card:hover, .stat-block:hover{ transform:none; }
}

/* ---------- Form swap link ---------- */
.form-swap{ text-align:center; margin-top:14px; font-size:13.5px; }
.form-swap a{ color:var(--text-muted); text-decoration:underline; }
.form-swap a:hover{ color:var(--text-primary); }