/* V4 HVAC. Spacing uses the V3 scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
   New tokens, scoped to the quote story: --cold #D5E6F4 frost blue, --warm #F6E0B8 amber. */

.v4-hvac .section{padding-block:96px;margin-block:0}
.v4-hvac .v3-hero-grid{align-items:start}
.v4-hvac .hero-visual{perspective:900px}
.v4-hvac .hero-copy h1{max-width:16ch}
.v4-hvac .hero-pain{max-width:42ch}
.v4-hvac .hero-foot{max-width:46ch;text-align:left}
.v4-hvac .support-line,.v4-hvac .beat-caption,.v4-hvac .hero-pain,.v4-hvac .scene-question,.v4-hvac .service-blueprint .reasoning-path p,.v4-hvac .hero-flow-check,.v4-hvac [data-flow-action],.v4-hvac .route-question,.v4-hvac .final-invite .support-line,.v4-hvac .result-panel p{text-wrap:balance}
/* .nb only stops a wrap. V3 styles some bare spans (path lines, stamps), so reset everything. */
.v4-hvac :is(main,footer) span.nb{all:unset!important;white-space:nowrap!important}
.v4-hvac :is(main,footer) span.nb.is-loose{white-space:normal!important}
.v4-hvac [data-emphasis]{text-wrap:balance}
.v4-hvac .calculator-entry :is(p,li,dt,dd,h3){text-wrap:pretty}
.v4-hvac .masthead,.v4-hvac .nav{flex-wrap:wrap;row-gap:0}
.v4-hvac .nav{justify-content:flex-end}
.v4-hvac .nav a{white-space:nowrap;min-height:44px}

/* Restored scene: pins are real controls. The picture and pins tilt together. */
.v4-hvac .blueprint-tilt{position:relative;transform-style:preserve-3d}
.v4-hvac .scene-pins{pointer-events:none}
.v4-hvac .scene-pins span{position:static;transform:none;padding:0;display:inline}
.v4-hvac .scene-pins span:after{content:none}
.v4-hvac .scene-pins .pin{
  pointer-events:auto;
  position:absolute;
  transform:translate(-50%,-50%);
  min-width:44px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--paper);
  border-radius:4px;
  background:var(--ink);
  color:var(--paper);
  font:600 14px/1.2 var(--body);
  text-align:center;
  white-space:nowrap;
}
.v4-hvac .scene-pins .pin:nth-child(1){left:20%;top:28%}
.v4-hvac .scene-pins .pin:nth-child(2){left:46%;top:10%}
.v4-hvac .scene-pins .pin:nth-child(3){left:78%;top:40%}
.v4-hvac .scene-pins .pin[aria-expanded="true"]{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.v4-hvac .scene-pins .pin-num{display:none}
.v4-hvac .pin-callouts{position:absolute;inset:0;pointer-events:none}
.v4-hvac .pin-callout{
  pointer-events:auto;
  position:absolute;
  width:min(240px,46%);
  padding:16px;
  background:var(--paper);
  color:var(--ink);
  border-radius:2px;
  box-shadow:0 2px 3px #4727320a,0 12px 24px #4727320a;
}
.v4-hvac .pin-callout::before{
  content:"";
  position:absolute;
  top:-6px;
  left:var(--tail,24px);
  width:12px;
  height:12px;
  background:inherit;
  transform:rotate(45deg);
}
.v4-hvac .pin-callout[hidden]{display:none}
.v4-hvac #callout-0{left:8%;top:46%;--tail:56px}
.v4-hvac #callout-1{left:22%;top:28%;--tail:50%}
.v4-hvac #callout-2{right:2%;left:auto;top:56%;--tail:40%}
.v4-hvac .callout-kicker{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--muted)}
.v4-hvac .callout-kicker:first-child{margin-top:0}
.v4-hvac .pin-callout p,.v4-hvac .pin-static p{margin:4px 0 0;font-size:16px;line-height:1.4}
.v4-hvac .pin-static{display:none;list-style:none;margin:24px 0 0;padding:16px;gap:16px;background:var(--paper);color:var(--ink);border-radius:2px}
.v4-hvac .pin-static h3{font:600 16px/1.3 var(--body);letter-spacing:0}
.v4-hvac .pin-static li{padding-top:16px;border-top:1px solid #fafbfc35}
.v4-hvac .pin-static li:first-child{padding-top:0;border-top:0}

/* Quote story, merged into How it works. Paper card, not a colour slab. */
.quote-story{margin-top:32px}
.quote-story-card{
  --cold:#D5E6F4;
  --warm:#F6E0B8;
  display:grid;
  gap:24px;
  padding:24px;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:2px;
  box-shadow:0 2px 3px #4727320a,0 12px 24px #4727320a;
}
.fiction-flag{margin:0;font-size:14px;font-weight:600;line-height:1.3}
.quote-kicker{margin:12px 0 0;font-size:14px;font-weight:600}
.quote-subject{margin:8px 0 0;font-family:var(--display);font-size:clamp(28px,3vw,36px);line-height:1.1;letter-spacing:-.03em}
.quote-log{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.quote-log li{min-height:48px;padding:12px 0 12px 16px;border-left:2px solid var(--rule);font-size:17px;line-height:1.4}
.js .quote-log li{visibility:hidden;opacity:0}
.js .quote-log li.is-on{visibility:visible;opacity:1;border-left-color:var(--ink)}
.quote-caveat{margin-top:16px;font-size:16px;max-width:46ch}
.quote-story-card{grid-template-areas:"copy" "meter" "steps"}
.quote-main{grid-area:copy}
.quote-steps{grid-area:steps}
.quote-meter{
  grid-area:meter;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:100%;
  padding:24px;
  border-radius:2px;
  background:var(--cold);
  color:var(--ink);
}
.quote-story[data-step="1"] .quote-meter{background:color-mix(in srgb, var(--cold) 45%, white)}
.quote-story[data-step="2"] .quote-meter{background:color-mix(in srgb, var(--warm) 55%, white)}
.quote-story[data-step="3"] .quote-meter{background:var(--warm)}
.sample-tag{align-self:flex-start;margin:0;padding:4px 12px;border:1px solid var(--ink);border-radius:4px;font-size:14px;font-weight:700}
.thermo{position:relative;width:min(320px,100%);margin-inline:auto}
.thermo svg{display:block;width:100%;height:auto}
.thermo-arc{stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--warmth)) * 100)}
.quote-story[data-step="0"] .thermo-arc{opacity:0}
.quote-story:not([data-step="0"]) .thermo-arc{opacity:1}
.thermo-needle{transform-origin:80px 84px;transform:rotate(calc(-80deg + var(--warmth) * 160deg))}
.thermo-read{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;padding:0 12px;background:var(--paper);border-radius:4px;text-align:center;font-size:32px;line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums}
.quote-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.quote-track span{height:6px;border-radius:2px;background:color-mix(in srgb, var(--ink) 22%, transparent)}
.quote-story[data-step="0"] .quote-track span:nth-child(-n+1),
.quote-story[data-step="1"] .quote-track span:nth-child(-n+2),
.quote-story[data-step="2"] .quote-track span:nth-child(-n+3),
.quote-story[data-step="3"] .quote-track span{background:var(--ink)}
.hvac-slip{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--paper);border-radius:2px}
.slip-marks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:auto;min-height:44px}
.slip-mark{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600}
.slip-mark[hidden]{display:none}
.mark-icon{width:28px;height:28px;flex:0 0 auto}
.step-summary{display:none;margin:0;padding:0;list-style:none;gap:8px}
.step-summary li{min-height:32px;font-size:16px;font-weight:600}
.quote-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:0}
.quote-steps button{grid-column:span 2}
.quote-steps button:nth-child(4),.quote-steps button:nth-child(5){grid-column:span 3}
.quote-steps button{
  min-height:44px;
  padding:10px 12px;
  white-space:nowrap;
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  font-weight:600;
}
.quote-steps button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.how-section h2,.outputs-section h2,.company-block h2,.final-invite h2{margin:0}
.how-section .ai-line{max-width:62ch;margin-top:48px;font-size:20px;line-height:1.45}
.story-grid{margin-top:48px}
.beat + .beat{margin-top:32px}
.beat h3{margin:0}
.beat button{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  min-height:44px;
  padding:12px 0;
  font:700 24px/1.2 var(--display);
  letter-spacing:-.02em;
  color:var(--ink);
}
.beat-caption{margin-top:12px;max-width:52ch;font-size:18px;line-height:1.45}
.beat-panel{
  margin-top:16px;
  padding:24px;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:2px;
}
.beat-panel h4{margin-top:12px;font-size:22px;line-height:1.2}
.morning-list,.check-list,.job-lines{list-style:none;padding:0;margin:16px 0 0}
.morning-list li,.job-lines li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-height:44px;
  padding:12px 0;
  border-top:1px solid var(--rule);
  font-size:17px;
}
.check-list li{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:12px 0;
  border-top:1px solid var(--rule);
  font-size:17px;
  font-weight:600;
}
.job-phone{margin-top:16px;max-width:280px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--white)}
.job-phone header{padding:16px;background:var(--ink);color:var(--paper);font-weight:600}
.job-phone ul{margin:0;padding:4px 16px 8px}
.job-phone p{margin:0;padding:0 16px 16px;font-size:16px}
.morning-list li.is-highlight{background:var(--mist);box-shadow:inset 3px 0 0 var(--ink);padding-inline:12px}
.row-state,.book-state{font-weight:600}
.route-question{margin-top:16px;font-size:22px;font-weight:600;line-height:1.3;max-width:28ch}
.route-to,.route-state,.route-note,.book-state,.book-caveat{margin-top:12px}
.route-note,.book-caveat,.quote-caveat{font-size:16px}
.thread{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.bubble{padding:16px;max-width:42ch}
.bubble.customer{background:var(--mist)}
.bubble.reply{border:1px solid var(--rule)}
.bubble-role{font-size:14px;font-weight:600}
.bubble p+p{margin-top:8px}
.reply-slot{display:grid}
.reply-slot>*{grid-area:1/1;align-self:start}
.typing{display:none;align-items:center;gap:6px;min-height:44px;margin:0;font-size:16px;font-weight:600}
.typing .dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.check-list svg{flex:0 0 auto}
.money{margin:16px 0 0;display:grid;gap:12px}
.money div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding-top:12px;border-top:1px solid var(--rule)}
.money dt{font-size:15px;color:var(--muted)}
.money dd{margin:0;font-family:var(--display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.outputs-section .scope-status{margin-top:24px;max-width:62ch;font-size:18px}
/* What we do: heading on top, pillars in a grid. No empty column under the h2. */
.v4-hvac .outputs-section{display:block}
.v4-hvac .outputs-section .output-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px 48px;margin-top:48px}
.v4-hvac .outputs-section .output-row,.v4-hvac .outputs-section .output-row:first-child{padding:24px 0 0;border-top:1px solid var(--rule)}
.v4-hvac .outputs-section .output-row h3{margin-top:16px;font-size:24px;line-height:1.2;max-width:none}
.v4-hvac .outputs-section .output-row p{margin-top:12px;font-size:18px;max-width:42ch}
.v4-hvac .outputs-section .scope-status{grid-column:1/-1;margin-top:0;padding-top:24px;max-width:none}
.not-found h1{max-width:16ch;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.04em}
.not-found p{margin-top:24px;font-size:20px}
.not-found .not-found-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:32px}
.not-found .text-action{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pillar-icon{display:block;width:40px;height:40px;color:var(--ink)}
/* Walkthrough: W1 stays one h2; its second sentence is a smaller line. */
.v4-hvac #walkthrough h2 .walk-sub{display:block;margin-top:16px;font-size:.5em;line-height:1.2;letter-spacing:-.02em}
.v4-hvac .email-alt{margin-top:16px;font-size:16px}
.v4-hvac .email-alt a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.company-copy{max-width:62ch;margin-top:24px;font-size:18px}
.company-copy p+p{margin-top:16px}
.v4-hvac .v4-calc-slot .calculator-entry{margin-top:0;padding-top:0;border-top:0;width:100%}
.v4-hvac .result-panel .amount{display:block;margin-top:24px}
.v4-hvac .result-panel .period{display:block;margin-top:12px;padding-top:12px;border-top:1px solid #fafbfc40}
.v4-hvac .result-panel .result-check{margin-top:24px}
.final-invite .support-line{margin-top:16px}
.scroll-emphasis .word{color:var(--ink)}
.scroll-emphasis .word,.js .scroll-emphasis .word{color:var(--ink);font-weight:400;text-decoration:none}
.scroll-emphasis .word.accent{font-weight:700}

@media (min-width:1024px){
  .quote-story-card{
    grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
    grid-template-areas:"copy meter" "steps meter";
    grid-template-rows:1fr auto;
    gap:32px;
    padding:32px;
    align-items:stretch;
  }
  .quote-steps{align-self:end}
  .quote-steps{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
  .quote-steps button,.quote-steps button:nth-child(4),.quote-steps button:nth-child(5){grid-column:auto}
  .quote-meter{height:100%}
  .js .story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);gap:48px;align-items:start}
  .js .device-frame{
    position:sticky;
    top:32px;
    background:var(--white);
    border:1px solid var(--rule);
    border-radius:2px;
    box-shadow:0 2px 3px #4727320a,0 12px 24px #4727320a;
  }
  .js .device-frame .beat-panel{margin:0;border:0;background:transparent;box-shadow:none}
  .js .beat .beat-panel{display:none}
  .js .beat{padding-inline:16px;border-radius:2px}
  .js .beat.is-current{background:var(--mist);box-shadow:inset 3px 0 0 var(--ink)}
  .js .beat:not(.is-current) button,.js .beat:not(.is-current) .beat-caption{color:var(--muted)}
  .story-progress{height:4px;margin:0 24px;background:var(--rule);border-radius:2px}
  .story-progress span{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(.2);transform-origin:left center}
}
.device-frame[hidden]{display:none}

@media (max-width:1023px){
  .beat + .beat{margin-top:48px;padding-top:48px;border-top:1px solid var(--rule)}
  .device-frame{display:none}
}
@media (max-width:800px){
  .v4-hvac .section{padding-block:64px}
  .quote-story-card,.beat-panel,.js .device-frame .beat-panel{padding:24px}
}
@media (max-width:600px){
  /* Lets "identical opportunities." share the last line. */
  .v4-hvac .sample-section h2[data-emphasis]{font-size:min(38px,calc((100vw - 48px) / 10.6))}
  /* Keeps "enquiry walkthrough." on one line; the smaller W1 line follows. */
  .v4-hvac #walkthrough h2{font-size:min(36px,calc((100vw - 48px) / 10.4))}
  .v4-hvac #walkthrough h2 .walk-sub{font-size:22px}
  .quote-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-steps button,.quote-steps button:nth-child(4){grid-column:auto}
  .quote-steps button:nth-child(5){grid-column:1/-1}
  .v4-hvac .service-blueprint .reasoning-path{grid-template-columns:1fr;gap:16px}
  .v4-hvac .service-blueprint .reasoning-path span{display:block}
  .v4-hvac .scene-pins .pin-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
  .v4-hvac .scene-pins .pin-num{display:grid;place-items:center;width:100%;font-size:16px}
  .v4-hvac .scene-pins .pin{width:44px;height:44px;padding:0;max-width:none}
  .v4-hvac .pin-callouts{display:none}
  .v4-hvac .pin-static{display:grid}
  .money div{grid-template-columns:1fr}
}
@media (max-width:480px){
  .v4-hvac .v3-hero .actions{align-items:stretch}
  .v4-hvac .v3-hero .actions .button,.v4-hvac .v3-hero .actions .text-action{width:100%}
  .v4-hvac .v3-hero .actions .text-action{display:inline-flex;justify-content:flex-start}
  .v4-hvac .hero-foot{text-align:left}
}
html:not(.js) .pin-static{display:grid}
html:not(.js) .pin-callouts{display:none}
html:not(.js) .quote-log li{visibility:visible;opacity:1}
html:not(.js) .step-summary{display:grid}
html:not(.js) .quote-steps{display:none}
html:not(.js) .quote-meter{--warmth:1;background:var(--warm)}
html:not(.js) .quote-track span{background:var(--ink)}
html:not(.js) .slip-mark{display:none}
html:not(.js) .slip-booked{display:flex}

@media (hover:hover) and (pointer:fine){
  .v4-hvac .blueprint-tilt{transition:transform 180ms ease-out}
  .v4-hvac .beat button:hover{color:var(--ink)}
  .v4-hvac .quote-steps button:hover{border-color:var(--ink)}
}
@media (prefers-reduced-motion:no-preference){
  .js .quote-log li.is-on,.quote-meter,.thermo-arc,.thermo-needle{transition:opacity 400ms ease,background 400ms ease,stroke-dashoffset 400ms ease,transform 400ms ease}
  .js .beat-panel.is-live .typing{display:flex;animation:typing-life 1.1s linear 1 both}
  .js .bubble.reply{visibility:hidden;opacity:0}
  .js .beat-panel.is-seen .bubble.reply{visibility:visible;opacity:1}
  .js .beat-panel.is-live .bubble.reply{animation:reply-in .35s ease 1.1s both}
  .js .beat-panel.is-live .check-list li{animation:tick-in .25s ease forwards}
  .js .beat-panel.is-live .check-list li:nth-child(1){animation-delay:.15s}
  .js .beat-panel.is-live .check-list li:nth-child(2){animation-delay:.45s}
  .js .beat-panel.is-live .check-list li:nth-child(3){animation-delay:.75s}
}
.story-progress span{transition:transform 400ms ease}
@keyframes typing-life{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes reply-in{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}
@keyframes tick-in{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .v4-hvac .blueprint-tilt,.v4-hvac .quote-story-card,.v4-hvac .beat{transform:none}
  .v4-hvac .pin-callouts{display:none}
  .v4-hvac .pin-static{display:grid}
  .js .quote-log li,.bubble.reply{visibility:visible;opacity:1;animation:none}
  .typing{display:none}
}