/* ================================================================ TOKENS
     Grounded in the real AirPrime brand: fire + ice mark, navy wordmark.
     Base navy · ice-blue primary accent (cooling) · fire secondary (heating). */
  :root{
    --bg:#F4F7FA; --surface:#FFFFFF; --tint:#E7EEF7;
    --ink:#1B3067;            /* brand navy (marketing #1B3067) — text + dark structure */
    --muted:#55677E;
    --line:rgba(27,48,103,.12); --line-2:rgba(27,48,103,.22);
    --ice:#005C97; --ice-deep:#00456F; --ice-bright:#2E90CE; --ice-soft:#E1EBF5;  /* cooling (primary #005C97) */
    --steel:#85A8D0; --neutral:#DBDBDB;                                           /* brand soft-blue + neutral grey */
    --fire:#DD4E1C; --fire-soft:#FBE7DD; --fire-ink:#BC3F16;                       /* heating (from logo); fire-ink = AA-safe fire for small text on light bg */
    /* the brand's own fire↔ice ramp — used thin, as a temperature scale (not decoration) */
    --spectrum:linear-gradient(90deg,#00456F,#2E90CE 32%,#8FD3EF 45%,#F3B84E 58%,#F16039 80%,#E02535);
    --fire-grad:linear-gradient(90deg,#F79A2F,#EE5A2A 55%,#E02535);
    --mark-img:url(../images/logo/airprime-mark-40.png);
    /* contact/footer band palette — remapped per theme below so the band follows light/dark */
    --night:#E7EEF7; --night-ink:#1B3067; --night-muted:#55677E; --night-line:rgba(27,48,103,.12);
    --ok:#1E7A46; --err:#C0402A;
    --shadow:0 1px 2px rgba(27,48,103,.05), 0 18px 44px rgba(27,48,103,.12);
    --shadow-sm:0 1px 2px rgba(27,48,103,.06), 0 8px 20px rgba(27,48,103,.08);
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
    --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
    --fs-label:.74rem; --fs-body:1.06rem; --fs-lead:1.22rem;
    --fs-h3:1.24rem; --fs-h2:clamp(1.9rem,3.4vw,2.9rem); --fs-hero:clamp(2.3rem,4.5vw,3.85rem);
    --wrap:1160px; --gut:clamp(20px,5vw,56px); --stack:clamp(56px,7.5vw,96px);
    /* vertical rhythm — one scale for the whole site so spacing reads as a system:
       fl-1 label->heading · fl-2 heading->body · fl-3 sub-block/in-column list ·
       fl-4 section head->grid. Section bands use --stack. */
    --fl-1:.75rem; --fl-2:1.125rem; --fl-3:1.5rem; --fl-4:2rem;
    --r:6px; --r-sm:3px;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0B1730; --surface:#13234A; --tint:#0F1E3E; --ink:#EAF2F8; --muted:#9DB2C6;
      --line:rgba(234,242,248,.12); --line-2:rgba(234,242,248,.22);
      --ice:#57B3EC; --ice-deep:#3E9AD8; --ice-bright:#6CC3F2; --ice-soft:#12314F;
      --steel:#85A8D0; --neutral:#33456A; --night:#0E1C3C; --night-ink:#EAF2F8; --night-muted:#93AEC4; --night-line:rgba(234,242,248,.15);
      --fire:#F7743F; --fire-soft:#3A2116; --fire-ink:#F7743F;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
      --shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.45); }
  }
  :root[data-theme="light"]{ --bg:#F4F7FA;--surface:#FFFFFF;--tint:#E7EEF7;--ink:#1B3067;--muted:#55677E;
    --line:rgba(27,48,103,.12);--line-2:rgba(27,48,103,.22);--ice:#005C97;--ice-deep:#00456F;--ice-bright:#2E90CE;--ice-soft:#E1EBF5;--steel:#85A8D0;--neutral:#DBDBDB;--fire:#DD4E1C;--fire-soft:#FBE7DD;--fire-ink:#BC3F16;--night:#E7EEF7;--night-ink:#1B3067;--night-muted:#55677E;--night-line:rgba(27,48,103,.12);
    --shadow:0 1px 2px rgba(27,48,103,.05),0 18px 44px rgba(27,48,103,.12);--shadow-sm:0 1px 2px rgba(27,48,103,.06),0 8px 20px rgba(27,48,103,.08); }
  :root[data-theme="dark"]{ --bg:#0B1730;--surface:#13234A;--tint:#0F1E3E;--ink:#EAF2F8;--muted:#9DB2C6;
    --line:rgba(234,242,248,.12);--line-2:rgba(234,242,248,.22);--ice:#57B3EC;--ice-deep:#3E9AD8;--ice-bright:#6CC3F2;--ice-soft:#12314F;--steel:#85A8D0;--neutral:#33456A;--fire:#F7743F;--fire-soft:#3A2116;--fire-ink:#F7743F;--night:#0E1C3C;--night-ink:#EAF2F8;--night-muted:#93AEC4;--night-line:rgba(234,242,248,.15);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.5);--shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.45); }

  /* ==================================================================== BASE */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  /* overflow-x:clip (not hidden) contains stray horizontal overflow WITHOUT making
     <body> a scroll container, which would otherwise break the sticky header. */
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);
    line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
  h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
  /* Display headlines in Bebas Neue (condensed caps); body/UI stays Inter. */
  h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:1.02}
  p{margin:0} a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
  .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
  .section{padding-block:var(--stack)}
  :focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:3px}
  .label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:var(--fs-label);color:var(--ice);font-weight:500}
  .lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.5;letter-spacing:-.01em}

  .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.98rem;font-weight:600;
    padding:.82em 1.4em;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;
    transition:transform .15s ease,background .18s ease,box-shadow .18s ease;letter-spacing:-.01em}
  .btn-primary{background:var(--ink);color:#fff}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
  :root[data-theme="dark"] .btn-primary,.btn-primary{}
  @media (prefers-color-scheme:dark){.btn-primary{background:var(--ice);color:#04203a}}
  :root[data-theme="dark"] .btn-primary{background:var(--ice);color:#04203a}
  :root[data-theme="light"] .btn-primary{background:var(--ink);color:#fff}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
  .btn-ghost:hover{border-color:var(--ice);color:var(--ice)}
  .textlink{font-weight:600;color:var(--ice);display:inline-flex;align-items:center;gap:.4em;letter-spacing:-.01em}
  .textlink::after{content:"→";transition:transform .15s ease} .textlink:hover::after{transform:translateX(3px)}
  .fine{font-family:var(--mono);font-size:.72rem;color:var(--muted)}

  /* image frame — system hairline mounts every photo into the card language so
     none reads as loose. Adornment is balanced by role: feature shots (one per
     section) get the fire<->ice spectrum bar (thermal-ramp motif, .proc-rail);
     repeated photos (gallery, team) get quieter blueprint corner brackets so the
     accent never stacks up and turns noisy. */
  .shot{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--tint);position:relative;border:1px solid var(--line)}
  .shot:not(.tm-ph)::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--spectrum);z-index:2;pointer-events:none}
  .shot img{width:100%;height:100%;object-fit:cover}
  .shot img,.mq img{cursor:zoom-in}
  /* full-size photo viewer — tap any content photo (built in main.js) */
  .lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,32px);background:rgba(6,14,30,.9);backdrop-filter:blur(4px)}
  .lb.open{display:flex}
  .lb img{max-width:min(1200px,96vw);max-height:92vh;width:auto;height:auto;border-radius:var(--r);box-shadow:0 24px 70px rgba(0,0,0,.55);cursor:zoom-out}
  .lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;line-height:1;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-sm);cursor:pointer}
  @media (prefers-reduced-motion:no-preference){.lb.open{animation:lbin .18s ease}}
  @keyframes lbin{from{opacity:0}to{opacity:1}}
  .shot .cap{position:absolute;left:12px;bottom:12px;color:#fff;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-sm);background:rgba(6,35,60,.72);backdrop-filter:blur(6px)}

  /* =================================================================== BANNER */
  .banner{background:var(--tint);color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-align:center;padding:8px 16px;border-bottom:1px solid var(--line)}
  .banner b{color:var(--ice);font-weight:600}

  /* =================================================================== HEADER */
  /* WP wraps the header template part in <header class="wp-block-template-part">,
     which is only as tall as the bar. position:sticky is confined to its parent's
     box, so the sticky must live on that wrapper (not the inner .site) to persist
     down the whole page. The inner .site keeps the visual treatment and rides along. */
  header.wp-block-template-part,header.site{position:sticky;top:0;z-index:50}
  header.site{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;gap:24px;height:74px}
  .brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:inherit}
  .brand img{height:38px;width:auto}
  .brand .nm{font-weight:700;font-size:1.16rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
  .brand .sb{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}
  nav.main{display:flex;align-items:center;gap:28px}
  nav.main a{font-size:.95rem;color:var(--muted);letter-spacing:-.01em} nav.main a:hover{color:var(--ink)}
  .h-phone{font-family:var(--mono);font-size:.82rem;color:var(--ink)}
  .btn-sm{padding:.6em 1.05em;font-size:.9rem;white-space:nowrap}
  @media (max-width:940px){nav.main,.h-phone{display:none}}
  @media (max-width:430px){.brand .sb{display:none}.bar{gap:14px}}

  /* ===================================================================== HERO */
  .hero{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(56px,8vw,96px)}
  .hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,68px);align-items:start}
  .hero .grid > *{min-width:0}
  @media (max-width:980px){.hero .grid{grid-template-columns:1fr;gap:40px}}
  .hero h1{font-size:var(--fs-hero);margin:20px 0 0}
  .hero h1 .em{color:var(--ice)}
  .hero .lead{margin-top:22px;max-width:36ch}
  .hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
  .hero .trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
  .hero .trust span{font-family:var(--mono);font-size:.72rem;color:var(--muted)} .hero .trust b{color:var(--ice);font-weight:600}
  .hero .shot{aspect-ratio:4/5}
  @media (max-width:980px){.hero .shot{aspect-ratio:16/11}}

  /* =================================================================== PROBLEM */
  .problem{background:var(--tint);border-block:1px solid var(--line)}
  .problem .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
  @media (max-width:840px){.problem .grid{grid-template-columns:1fr;gap:32px}}
  .problem h2{font-size:var(--fs-h2);margin-top:var(--fl-1)} .problem h2 .em{color:var(--fire)}
  .problem .p{color:var(--muted);margin-top:var(--fl-2);max-width:46ch}
  .faults{display:flex;flex-direction:column}
  .faults .row{display:grid;grid-template-columns:8.5em 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line-2)}
  .faults .row:first-child{border-top:0}
  .faults .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--fire);padding-top:3px}
  .faults b{font-weight:600} .faults span{color:var(--muted);display:block;font-size:.95rem;margin-top:2px}
  @media (max-width:560px){.faults .row{grid-template-columns:1fr;gap:6px}}

  /* =============================================================== HOW WE SIZE */
  .how .grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,80px);align-items:center}
  .how .grid > *{min-width:0}
  @media (max-width:900px){.how .grid{grid-template-columns:1fr;gap:40px}}
  .figure{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .figure .fhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
  .figure .fhead h3{font-size:1.02rem;letter-spacing:-.02em}
  .figure .fhead .t{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .loadmap{padding:18px 20px}
  .lm-row{display:grid;grid-template-columns:9.5em 1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
  .lm-row:last-child{border-bottom:0}
  .lm-room{font-size:.92rem;letter-spacing:-.01em}
  .lm-track{height:8px;background:var(--ice-soft);border-radius:6px;overflow:hidden}
  .lm-fill{height:100%;background:var(--ice-bright);border-radius:6px;transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  .lm-val{font-family:var(--mono);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .lm-val b{color:var(--ink);font-weight:600}
  @media (max-width:560px){.lm-row{grid-template-columns:1fr auto;gap:14px}.lm-track{display:none}}
  .figure .ffoot{display:flex;justify-content:space-between;gap:12px;padding:13px 20px;background:var(--tint);border-top:1px solid var(--line);flex-wrap:wrap}
  .figure .ffoot .m{font-family:var(--mono);font-size:.7rem;color:var(--muted)} .figure .ffoot .m b{color:var(--ink)}
  .notes{display:flex;flex-direction:column;margin-top:var(--fl-3)}
  .note{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
  .note:first-child{border-top:0}
  .note .n{font-family:var(--mono);font-size:.78rem;color:var(--ice);padding-top:3px}
  .note h3{font-size:1.12rem;margin-bottom:5px} .note p{color:var(--muted);font-size:.98rem}

  /* =================================================================== SERVICES */
  .svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
  .grid-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--fl-4)}
  @media (max-width:880px){.grid-svc{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:540px){.grid-svc{grid-template-columns:1fr}}
  .svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column;gap:10px;min-height:186px;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  .svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
  .svc .top{display:flex;justify-content:space-between;align-items:center}
  .svc .idx{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
  .svc .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-sm);border:1px solid transparent}
  .tag.cool{color:var(--ice);background:var(--ice-soft)} .tag.heat{color:var(--fire-ink);background:var(--fire-soft)}
  .tag.both{color:var(--ice);border-color:var(--line-2);background:transparent}
  .svc h3{font-size:var(--fs-h3);letter-spacing:-.02em} .svc p{color:var(--muted);font-size:.96rem;line-height:1.5}

  /* =================================================================== WORK (gallery) */
  .work{background:var(--tint);border-block:1px solid var(--line)}
  .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:var(--fl-4)}
  /* auto-scrolling marquee of recent installs (slow, smooth, pauses on hover) */
  .marquee{overflow:hidden;position:relative;
    -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
            mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .marquee-track{display:flex;width:max-content;animation:mq 80s linear infinite;will-change:transform}
  .marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
  @keyframes mq{to{transform:translateX(-50%)}}
  .mq{flex:0 0 auto;width:clamp(236px,26vw,336px);margin-right:16px;position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--tint);border:1px solid var(--line)}
  .mq img{display:block;width:100%;height:238px;object-fit:cover}
  /* blueprint corner brackets — quiet fire<->ice crop marks for repeated photos
     (gallery + team). Ice on the top-left, fire on the bottom-right. */
  .mq::before,.mq::after,.tm-ph::before,.tm-ph::after{content:"";position:absolute;width:15px;height:15px;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(6,35,60,.35))}
  .mq::before,.tm-ph::before{top:9px;left:9px;border-top:2px solid var(--ice);border-left:2px solid var(--ice)}
  .mq::after,.tm-ph::after{bottom:9px;right:9px;border-bottom:2px solid var(--fire);border-right:2px solid var(--fire)}
  .mq figcaption{position:absolute;left:10px;bottom:10px;color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(6,35,60,.72);backdrop-filter:blur(6px);padding:5px 10px;border-radius:var(--r-sm)}
  @media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto} .marquee-track{animation:none}}

  /* =================================================================== FIT */
  .fit .grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5vw,64px);align-items:center}
  @media (max-width:860px){.fit .grid{grid-template-columns:1fr;gap:36px}}
  .fit .shot{aspect-ratio:4/5}
  .fit h2 .em{color:var(--ice)}
  /* same two-column concern-list grammar as .faults (mono key + claim + sub),
     but keyed ice — fit = the cool/solution side of the fire<->ice duality. */
  .obj{display:flex;flex-direction:column;margin-top:var(--fl-3)}
  .obj .row{display:grid;grid-template-columns:8.5em 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line-2)}
  .obj .row:first-child{border-top:0}
  .obj .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ice);padding-top:3px}
  .obj b{font-weight:600} .obj p{color:var(--muted);display:block;font-size:.95rem;margin-top:2px}
  @media (max-width:560px){.obj .row{grid-template-columns:1fr;gap:6px}}

  /* =================================================================== PROCESS
     A thermal rail (cold→hot = assess→handover) threads the four steps.       */
  .proc-rail{position:relative;height:3px;border-radius:3px;background:var(--spectrum);opacity:.9;margin-top:var(--fl-4)}
  .proc-rail .pt{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);transform:translate(-50%,-50%)}
  @media (max-width:760px){.proc-rail{display:none}}
  .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:var(--fl-3)}
  @media (max-width:760px){.proc{grid-template-columns:repeat(2,1fr);gap:30px 22px;margin-top:36px}}
  .step{padding-right:14px}
  .step .n{font-family:var(--mono);font-size:.78rem;color:var(--ice);font-variant-numeric:tabular-nums;letter-spacing:.04em}
  .step h3{font-size:1.1rem;margin:9px 0 8px} .step p{color:var(--muted);font-size:.93rem;line-height:1.5}

  /* =================================================================== COVERAGE */
  .cov .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,56px);align-items:center}
  @media (max-width:820px){.cov .grid{grid-template-columns:1fr;gap:32px}}
  .cov h2{font-size:var(--fs-h2);margin-top:var(--fl-1)}
  .cities{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--fl-3)}
  .cities span{font-size:.88rem;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 14px;letter-spacing:-.01em}
  .cities span.hq{border-color:var(--ice);color:var(--ice);font-weight:600}
  .cov .shot{aspect-ratio:3/2}

  /* =================================================================== CONTACT */
  .contact{background:var(--night);color:var(--night-ink)}
  .contact .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,72px);align-items:start}
  @media (max-width:860px){.contact .grid{grid-template-columns:1fr;gap:40px}}
  .contact .label{color:var(--ice)}
  .contact h2{font-size:var(--fs-h2);margin-top:var(--fl-1);color:var(--night-ink)}
  .contact .intro{color:var(--night-muted);margin-top:var(--fl-2);max-width:38ch}
  .cinfo{margin-top:30px;display:flex;flex-direction:column;gap:16px}
  .cinfo a,.cinfo .v{font-family:var(--mono);font-size:.85rem;color:var(--night-ink)}
  .cinfo .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night-muted);display:block;margin-bottom:4px}
  form{background:var(--surface);color:var(--ink);border-radius:var(--r);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  @media (max-width:560px){.frow{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field.full{margin-top:16px}
  .field label{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:-.01em} .field label .opt{color:var(--muted);font-weight:400}
  .field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.72em .85em;width:100%;min-width:0;transition:border-color .15s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px var(--ice-soft)}
  .field textarea{resize:vertical;min-height:92px}
  .field .err{font-size:.76rem;color:var(--err);display:none}
  .field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--err)} .field[data-invalid="true"] .err{display:block}
  .form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
  /* fire CTA — fixed orange so it pops on both card colors and beats the
     theme .btn-primary rules (which would otherwise use the flipped --ink). */
  .contact form .btn-primary.on-form{background:#DD4E1C;color:#fff}
  .contact form .btn-primary.on-form:hover{background:#C6420F}
  .form-note{font-size:.82rem;color:var(--muted);margin-top:14px}
  .form-success{display:none} .form-success h3{font-size:1.3rem} .form-success p{color:var(--muted);margin-top:8px}
  form[data-sent="true"] .form-body{display:none} form[data-sent="true"] .form-success{display:block}
  .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
  /* the quote form runs INVERTED to the page theme — dark card on light theme,
     light card on dark theme. Flip the palette tokens locally on the form; every
     .field / label / note rule inherits them, so nothing else needs touching. */
  .contact form,:root[data-theme="light"] .contact form{
    --surface:#13234A;--bg:#0B1730;--ink:#EAF2F8;--muted:#9DB2C6;
    --line:rgba(234,242,248,.12);--line-2:rgba(234,242,248,.22);--ice-soft:#12314F;--err:#F1806A}
  @media (prefers-color-scheme:dark){
    .contact form{--surface:#FFFFFF;--bg:#F4F7FA;--ink:#1B3067;--muted:#55677E;
      --line:rgba(27,48,103,.12);--line-2:rgba(27,48,103,.22);--ice-soft:#E1EBF5;--err:#C0402A}
  }
  :root[data-theme="dark"] .contact form{
    --surface:#FFFFFF;--bg:#F4F7FA;--ink:#1B3067;--muted:#55677E;
    --line:rgba(27,48,103,.12);--line-2:rgba(27,48,103,.22);--ice-soft:#E1EBF5;--err:#C0402A}

  /* =================================================================== FOOTER */
  footer.site{background:var(--night);color:var(--night-muted);padding-block:52px 30px;border-top:1px solid var(--night-line)}
  .foot-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
  .foot-brand{max-width:32ch}
  .foot-brand img{height:64px;width:auto;margin-bottom:14px}
  .foot-brand p{color:var(--night-muted);font-size:.92rem;line-height:1.55}
  .foot-cols{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:34px;flex:1;min-width:min(100%,420px)}
  @media (max-width:560px){.foot-cols{grid-template-columns:1fr 1fr}}
  footer.site .fh{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted);margin-bottom:16px}
  footer.site a{color:var(--night-ink)} footer.site a:hover{color:var(--ice)}
  .foot-links{display:flex;flex-direction:column;gap:11px;font-size:.93rem}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--night-line);font-family:var(--mono);font-size:.68rem;color:var(--night-muted)}

  /* ============================================================ FIRE/ICE PERSONALITY
     Deliberate, contained thermal moments — bold in one place, quiet elsewhere. */
  .spectrum-tick{height:3px;width:132px;border-radius:3px;background:var(--spectrum);margin-bottom:22px}
  .spectrum-rule{border:0;height:3px;margin:0;background:var(--spectrum);opacity:.85}

  /* problem section runs warm; precision/how runs cool — meaningful thermal tint */
  .problem{background:linear-gradient(180deg,var(--fire-soft),var(--tint) 60%)}
  @media (prefers-color-scheme:dark){.problem{background:linear-gradient(180deg,#241410,var(--tint) 62%)}}
  :root[data-theme="dark"] .problem{background:linear-gradient(180deg,#241410,var(--tint) 62%)}
  :root[data-theme="light"] .problem{background:linear-gradient(180deg,var(--fire-soft),var(--tint) 60%)}
  /* how-we-size + working-with-us run cool (precision / the fitted solution) — the
     same wash idea as the warm problem band, but ice and lighter so it never clutters. */
  .how,.fit{background:linear-gradient(180deg,var(--ice-soft),var(--bg) 58%)}
  @media (prefers-color-scheme:dark){.how,.fit{background:linear-gradient(180deg,#0F2438,var(--bg) 60%)}}
  :root[data-theme="dark"] .how,:root[data-theme="dark"] .fit{background:linear-gradient(180deg,#0F2438,var(--bg) 60%)}
  :root[data-theme="light"] .how,:root[data-theme="light"] .fit{background:linear-gradient(180deg,var(--ice-soft),var(--bg) 58%)}

  /* ---- diverging heating↔cooling load chart (the signature) ---- */
  .dv-legend{display:flex;gap:18px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .dv-legend .lg{display:inline-flex;align-items:center;gap:7px}
  .dv-legend .sw{width:16px;height:8px;border-radius:3px}
  .dv-legend .sw.cool{background:var(--ice-bright)} .dv-legend .sw.heat{background:var(--fire-grad)}
  .dv{padding:8px 20px 6px}
  .dv-col{display:grid;grid-template-columns:8.4em minmax(0,1fr) minmax(0,1fr);align-items:center;padding:6px 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .dv-col .c{text-align:right;padding-right:10px} .dv-col .h{text-align:left;padding-left:10px}
  .dv-row{display:grid;grid-template-columns:8.4em minmax(0,1fr) minmax(0,1fr);align-items:center;padding:9px 0;border-top:1px solid var(--line)}
  .dv-room{font-family:var(--sans);font-size:.9rem;letter-spacing:-.01em;color:var(--ink)}
  .dv-cool{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding-right:11px;border-right:2px solid var(--ink)}
  .dv-heat{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding-left:11px}
  .dv-bar{height:10px;border-radius:5px;transform-origin:var(--o,left);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .dv-bar.cool{background:var(--ice-bright);transform-origin:right} .dv-bar.heat{background:var(--fire-grad)}
  .dv-n{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .dv-n b{color:var(--ink);font-weight:600}
  @media (prefers-reduced-motion:no-preference){.dv-bar{transform:scaleX(0)} .dv-bar.in{transform:scaleX(1)}}
  /* mobile: drop the axis header, stack the room label above the diverging bars,
     and keep the BTU numbers (the actual data) instead of hiding them. */
  @media (max-width:560px){
    .dv-col{display:none}
    .dv-row{grid-template-columns:1fr 1fr;grid-template-areas:"room room" "cool heat";gap:5px 10px;padding:10px 0}
    .dv-room{grid-area:room;font-size:.85rem}
    .dv-cool{grid-area:cool} .dv-heat{grid-area:heat}
    .dv-n{font-size:.66rem}
  }

  /* ---- proof: testimonials + credentials (conversion / trust) ---- */
  .proof{background:var(--tint);border-block:1px solid var(--line)}
  .tst{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--fl-4)}
  @media (max-width:820px){.tst{grid-template-columns:1fr}}
  .tst .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-sm)}
  .tst .ex{align-self:flex-start;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fire-ink);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:3px 9px}
  .tst .q{font-size:1.04rem;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
  .tst .who{margin-top:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .creds{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:var(--fl-4);padding-top:28px;border-top:1px solid var(--line-2)}
  .creds .c{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink)}
  .creds .c .tk{color:var(--ice);font-weight:700}
  .creds .note{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-left:auto}
  @media (max-width:640px){.creds .note{margin-left:0}}
  /* brands strip */
  .brands{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2)}
  .brands-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
  .brands-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
  .brands-list li{font-family:var(--display);font-size:1.14rem;letter-spacing:.05em;color:var(--muted);opacity:.85;white-space:nowrap;transition:color .2s,opacity .2s}
  .brands-list li:hover{color:var(--ink);opacity:1}
  @media (max-width:640px){.brands-list{gap:8px 18px}.brands-list li{font-size:1rem}}

  /* featured project case studies */
  .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--fl-4)}
  @media (max-width:1080px){.case-grid{grid-template-columns:1fr 1fr}.case-grid .case-card:last-child{grid-column:1/-1}}
  @media (max-width:880px){.case-grid{grid-template-columns:1fr}.case-grid .case-card:last-child{grid-column:auto}}
  .case-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
  .case-card .shot{border-radius:0;border:0;box-shadow:none}
  .case-card .shot img{aspect-ratio:16/10}
  .case-body{padding:24px 22px 26px;display:flex;flex-direction:column;gap:12px}
  .case-body h3{font-size:1.22rem;letter-spacing:-.02em}
  .case-sub{color:var(--muted);font-size:.98rem;line-height:1.55}
  .case-specs{list-style:none;margin:4px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
  .case-specs li{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;color:var(--muted)}
  .case-specs li b{color:var(--ice);font-weight:700;margin-right:4px}
  @media (max-width:430px){.case-specs{grid-template-columns:1fr}}

  /* faint brand mark as texture on the dark contact band */
  .contact{position:relative;overflow:hidden;isolation:isolate}
  .contact::before{content:"";position:absolute;z-index:0;right:20px;top:56px;width:340px;height:420px;pointer-events:none;
    background:var(--mark-img) no-repeat center/contain;opacity:.06}
  .contact .wrap{position:relative;z-index:1}

  /* ==================================================================== MOTION */
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none}
    .lm-fill{transform:scaleX(0)} .lm-fill.in{transform:scaleX(1)}
  }
  @media (prefers-reduced-motion:reduce){.lm-fill{transform:none!important}}

/* =========================================================== THEME ADDITIONS
   Brand marks as CSS backgrounds (template parts can't run PHP for URLs). */
.brand .mk{width:38px;height:46px;flex:none;background:url(../images/logo/airprime-mark-40.png) no-repeat center/contain}
.foot-logo{display:block;width:152px;height:60px;background:url(../images/logo/airprime-logo-full-web.png) no-repeat left center/contain;margin-bottom:14px}

/* Contact: an icon per method (phone / email / address / Instagram) */
.cinfo{gap:15px}
.cinfo .row{display:flex;align-items:center;gap:12px}
.cinfo .ic{width:20px;height:20px;flex:none;color:var(--ice-bright)}
.cinfo .row a,.cinfo .row .v{font-family:var(--mono);font-size:.85rem;color:var(--night-ink);text-decoration:none;letter-spacing:.02em}
.cinfo .row a:hover{color:#fff}
.foot-ig{display:inline-flex;align-items:center;gap:8px}
.foot-ig .ic{width:17px;height:17px;flex:none}

/* Footer contact: icon per item (matches the contact section) */
.foot-contact a,.foot-contact span{display:inline-flex;align-items:center;gap:9px}
.foot-contact .ic{width:16px;height:16px;flex:none;color:var(--ice-bright)}

/* Quote form: honeypot (off-screen) + inline error */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{color:var(--err);font-size:.85rem;font-weight:600;margin:0;flex-basis:100%}

/* ================================================================ NAVIGATION
   Multi-page nav: real page links, a Services dropdown (hover/focus on desktop,
   tap-toggle on touch), and an off-canvas drawer on mobile. */
.nav-toggle{display:none;width:42px;height:42px;flex:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;padding:0}
.nav-toggle:hover{border-color:var(--ice)}
.nt-bars,.nt-bars::before,.nt-bars::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nt-bars{position:relative}
.nt-bars::before,.nt-bars::after{content:"";position:absolute;left:0}
.nt-bars::before{top:-6px} .nt-bars::after{top:6px}
#site-header.nav-open .nt-bars{background:transparent}
#site-header.nav-open .nt-bars::before{transform:translateY(6px) rotate(45deg)}
#site-header.nav-open .nt-bars::after{transform:translateY(-6px) rotate(-45deg)}

.sub-toggle{font:inherit;font-size:.95rem;color:var(--muted);letter-spacing:-.01em;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.sub-toggle:hover{color:var(--ink)}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s ease}
.sub-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-1px)}
nav.main a.is-current{color:var(--ink);font-weight:600}
.has-sub{position:relative}
.submenu{position:absolute;top:calc(100% + 12px);left:-14px;min-width:250px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.submenu a{font-size:.92rem;color:var(--muted);padding:9px 12px;border-radius:var(--r-sm);letter-spacing:-.01em}
.submenu a:hover{color:var(--ink);background:var(--tint)}
.submenu a:first-child{color:var(--ink);font-weight:600}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.sub-toggle[aria-expanded="true"]+.submenu{opacity:1;visibility:visible;transform:none}
.h-phone.in-drawer{display:none}
.drawer-cta{display:none}

/* Light/dark slide switch. A pill track with a sun (left) and moon (right) and a
   knob that slides to the active side. Lives in the bar, so it stays visible on
   mobile (outside the hamburger). aria-checked=true means dark. */
.theme-switch{flex:none;display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer}
.ts-track{position:relative;width:52px;height:28px;border-radius:100px;background:var(--tint);border:1px solid var(--line-2);
  transition:background .2s ease,border-color .2s ease}
.ts-track svg{position:absolute;top:50%;transform:translateY(-50%);width:13px;height:13px}
.ts-sun{left:7px;color:var(--fire)} .ts-moon{right:7px;color:var(--ice-bright);opacity:.6}
.ts-knob{position:absolute;top:50%;left:3px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;
  background:var(--ink);box-shadow:0 1px 3px rgba(8,42,71,.35);transition:left .22s cubic-bezier(.4,.1,.3,1)}
.theme-switch:hover .ts-track{border-color:var(--ice)}
.theme-switch[aria-checked="true"] .ts-track{background:var(--ice-soft);border-color:var(--ice)}
.theme-switch[aria-checked="true"] .ts-moon{opacity:1}
.theme-switch[aria-checked="true"] .ts-sun{opacity:.55}
.theme-switch[aria-checked="true"] .ts-knob{left:calc(100% - 23px)}

@media (max-width:940px){
  .bar-cta{display:none}
  .drawer-cta{display:inline-flex;justify-content:center;width:100%;margin:4px 0 10px}
  .nav-toggle{display:inline-flex}
  .h-phone.desk{display:none}
  nav.main{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:6px var(--gut) 18px}
  #site-header.nav-open nav.main{display:flex}
  nav.main>a:not(.drawer-cta),.sub-toggle{padding:13px 2px;border-top:1px solid var(--line);font-size:1rem;width:100%;text-align:left;color:var(--ink)}
  .sub-toggle{justify-content:space-between}
  .has-sub{position:static}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;
    padding:2px 0 6px 14px;min-width:0;display:none}
  .sub-toggle[aria-expanded="true"]+.submenu{display:flex}
  .submenu a{padding:9px 6px}
  .h-phone.in-drawer{display:block;padding:14px 2px;border-top:1px solid var(--line);font-size:.95rem}
}

/* ================================================================ INTERNAL PAGES
   Shared page-hero + service/hub/about/contact/thank-you components. Reuses the
   home tokens (fire/ice + navy, hairlines, soft radius) so pages read as one set. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--ice)} .crumb a:hover{color:var(--ice-bright)}
.crumb span[aria-current]{color:var(--muted)}
.crumb span[aria-hidden]{opacity:.5}

/* WP adds a 24px block-gap above <main> and between its child sections. Each
   section manages its own padding, so that extra gap only shows as slivers of
   page background around full-bleed bands (the navy strip above the hero, light
   strips flanking the dark contact band). Zero it so bands meet cleanly. */
.wp-site-blocks > *,
.wp-site-blocks > main > *{margin-block-start:0}
.page-hero{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,64px)}
.page-hero h1{font-size:clamp(2rem,4vw,3.15rem)}
.page-hero .lead{margin-top:var(--fl-2)}
.page-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.page-hero .trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.page-hero .trust span{font-family:var(--mono);font-size:.72rem;color:var(--muted)} .page-hero .trust b{color:var(--ice);font-weight:600}
.page-hero.split .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px);align-items:center}
.page-hero.split .grid>*{min-width:0}
.page-hero.split .shot{aspect-ratio:4/5}
@media (max-width:900px){.page-hero.split .grid{grid-template-columns:1fr;gap:34px}.page-hero.split .shot{aspect-ratio:16/11}}
.lead-link{color:var(--ice);font-weight:600}

/* service overview: prose + a small context aside */
.svc-overview .ov-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:clamp(30px,5vw,60px);align-items:start}
@media (max-width:820px){.svc-overview .ov-grid{grid-template-columns:1fr;gap:28px}}
.ov-body p{color:var(--muted);margin-top:var(--fl-2);max-width:64ch}
.ov-aside{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.ov-aside .tag{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-sm)}
.ov-aside .ov-note{color:var(--muted);font-size:.95rem;margin-top:14px}

/* what we deliver: numbered cards */
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--fl-4)}
@media (max-width:860px){.inc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.inc-grid{grid-template-columns:1fr}}
.inc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.inc-n{font-family:var(--mono);font-size:.72rem;color:var(--ice);letter-spacing:.04em}
.inc h3{font-size:1.1rem;letter-spacing:-.02em} .inc p{color:var(--muted);font-size:.95rem;line-height:1.5}

/* how we approach it: three thermal columns */
.notes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:var(--fl-4)}
@media (max-width:760px){.notes-3{grid-template-columns:1fr;gap:0}}
.notes-3 .note{grid-template-columns:1fr;gap:0;padding:20px 0 0;border-top:2px solid var(--ink)}
@media (max-width:760px){.notes-3 .note{border-top:1px solid var(--line);padding:18px 0}.notes-3 .note:first-child{border-top:0}}
.notes-3 .note .n{padding-top:0;margin-bottom:9px;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem}

/* related services */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--fl-4)}
@media (max-width:860px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.rel-grid{grid-template-columns:1fr}}
.rel{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;transition:transform .15s ease,border-color .15s ease}
.rel:hover{transform:translateY(-2px);border-color:var(--ice)}
.rel-t{font-weight:600;letter-spacing:-.01em} .rel-p{color:var(--muted);font-size:.9rem;line-height:1.45}

/* services hub: cards become links */
a.svc{text-decoration:none;color:inherit}
.svc .svc-more{margin-top:auto;font-weight:600;color:var(--ice);font-size:.9rem;display:inline-flex;align-items:center;gap:.4em}
.svc .svc-more::after{content:"→";transition:transform .15s ease}
a.svc:hover .svc-more::after{transform:translateX(3px)}

/* about: story column + values + team */
.problem .story p{color:var(--muted);margin-top:16px} .problem .story p:first-child{margin-top:0}
.vals-sec .svc-head{margin-bottom:0}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--fl-4)}
@media (max-width:900px){.vals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.vals{grid-template-columns:1fr}}
.val{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;border-top:2px solid var(--ice)}
.val h3{font-size:1.06rem;letter-spacing:-.02em} .val p{color:var(--muted);font-size:.94rem;line-height:1.5;margin-top:8px}

.team-sec{border-block:1px solid var(--line)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--fl-4)}
@media (max-width:760px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.team{grid-template-columns:1fr}}
.tm{margin:0}
.tm-ph{aspect-ratio:4/5}
.tm figcaption{margin-top:14px;display:flex;flex-direction:column;gap:3px}
.tm-role{font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tm-name{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.team-note{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:22px}
/* named team members */
.team-named .tm-role{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fire);font-weight:600;order:1}
.team-named .tm-name{font-family:inherit;font-size:1.12rem;letter-spacing:-.02em;text-transform:none;color:var(--ink);font-weight:700;order:2}
.team-named .tm-bio{font-size:.9rem;line-height:1.55;color:var(--muted);order:3;margin-top:4px}

/* thank-you */
.ty{text-align:center;padding-block:clamp(72px,12vw,150px)}
.ty-inner{max-width:52ch;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:0}
.ty .label{margin-top:4px}
.ty h1{font-size:clamp(2rem,4vw,3rem);margin-top:var(--fl-1)}
.ty .lead{margin-top:18px}
.ty .actions{margin-top:30px}

/* ========================================================= THERMAL TEMPERAMENT
   Each internal page leans into the brand's heat<->cool duality instead of
   reading uniformly cool. body.temp-* (set in functions.php from page data)
   remaps a single --accent + a hero wash; the front page is untouched.
     heat     -> fire   (Mini-Split & Heat Pump, Smart Controls, Contact)
     cool     -> ice    (Ductwork & Lineset, Indoor Air Quality)
     spectrum -> fire<->ice ramp (Installation, Repair, About, Services)      */
:root{ --accent:var(--ice); --accent-soft:var(--ice-soft); --accent-tick:linear-gradient(90deg,var(--ice-deep),var(--ice-bright)); }
body.temp-heat{ --accent:var(--fire-ink); --accent-soft:var(--fire-soft); --accent-tick:var(--fire-grad); }
body.temp-cool{ --accent:var(--ice); --accent-soft:var(--ice-soft); --accent-tick:linear-gradient(90deg,var(--ice-deep),var(--ice-bright)); }
body.temp-spectrum{ --accent:var(--ice); --accent-soft:var(--ice-soft); --accent-tick:var(--spectrum); }

/* Accent-colored text + marks on internal pages (home has no temp-* class). */
body[class*="temp-"] .label,
body[class*="temp-"] .crumb a,
body[class*="temp-"] .textlink,
body[class*="temp-"] .lead-link,
body[class*="temp-"] .inc-n,
body[class*="temp-"] .note .n,
body[class*="temp-"] .step .n,
body[class*="temp-"] .svc-more{ color:var(--accent); }
body[class*="temp-"] .page-hero .trust b{ color:var(--accent); }
body[class*="temp-"] .cities span.hq{ border-color:var(--accent); color:var(--accent); }
body[class*="temp-"] .spectrum-tick{ background:var(--accent-tick); }
body[class*="temp-"] .notes-3 .note{ border-top-color:var(--accent); }
body[class*="temp-"] .val{ border-top-color:var(--accent); }
body[class*="temp-"] .rel:hover,
body[class*="temp-"] a.svc:hover{ border-color:var(--accent); }
body[class*="temp-"] .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* Thermal wash across the top of the page hero: warm for heat, cool for ice,
   a quiet neutral for spectrum (which carries its duality via the tick/rules).
   Tokens are dark-mode aware, so the glow reads in both themes. */
body.temp-heat .page-hero{ background:linear-gradient(180deg,var(--fire-soft),transparent 62%); }
body.temp-cool .page-hero{ background:linear-gradient(180deg,var(--ice-soft),transparent 62%); }
body.temp-spectrum .page-hero{ background:linear-gradient(180deg,var(--tint),transparent 60%); }

/* On heat pages the dark contact band's eyebrow runs warm to match. */
body.temp-heat .contact .label{ color:var(--fire-ink); }

/* ==================================================================== BLOG
   Index (home/archive/search) + single post. Core blocks (Query Loop,
   post-*), so the admin writes and manages everything from the panel. Content
   blocks are styled by their .wp-block-* class (identical in the editor canvas,
   which loads this file via add_editor_style) so editing + preview are WYSIWYG.
   Blog pages carry body.temp-spectrum, so --accent resolves to ice above. */

/* ---- shared header band (index/archive/search) ---- */
.blog-head{background:var(--tint);border-bottom:1px solid var(--line);padding-block:clamp(40px,5vw,64px)}
.blog-head h1{font-size:clamp(2rem,4vw,3.1rem);margin-top:6px;max-width:20ch}
.blog-head .lead{margin-top:var(--fl-2);max-width:54ch}
.blog-head .wp-block-term-description{margin-top:var(--fl-2);max-width:54ch;color:var(--muted)}

/* ---- index grid of post cards (mirrors the .svc card language) ---- */
.blog-body{padding-block:var(--stack)}
.blog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
@media (max-width:980px){.blog-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.blog-cards{grid-template-columns:1fr}}
.blog-card-excerpt{margin:8px 20px 0;color:var(--muted);font-size:.95rem;line-height:1.5}
.blog-card-excerpt p{margin:0}
.blog-cards > li{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.blog-cards > li:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
/* aspect-ratio + overflow:hidden on the figure itself, so the hover zoom is
   clipped to the frame and the thermal bar reads as the frame's fixed bottom
   edge (the photo scales behind it, never past it into the text). */
.blog-card-img{margin:0;position:relative;background:var(--tint);aspect-ratio:3/2;overflow:hidden}
.blog-card-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent-tick);z-index:2}
.blog-card-img a{display:block;width:100%;height:100%}
.blog-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.blog-cards > li:hover .blog-card-img img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.blog-cards > li:hover .blog-card-img img{transform:none}}
.blog-card-cat{margin:16px 20px 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.blog-card-cat a{color:var(--accent)}
.blog-card-title{margin:9px 20px 0;font-family:var(--sans);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;line-height:1.28}
.blog-card-title a{color:inherit} .blog-card-title a:hover{color:var(--accent)}
.blog-cards .wp-block-post-excerpt{margin:8px 20px 0;color:var(--muted);font-size:.95rem;line-height:1.5}
.blog-cards .wp-block-post-excerpt p{margin:0}
.blog-cards .wp-block-post-excerpt__more-text{display:none}
.blog-card-date{margin:auto 20px 18px;padding-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted)}

/* ---- pagination ---- */
.blog-pag{margin-top:var(--stack);padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.82rem;flex-wrap:wrap;gap:12px}
.blog-pag .page-numbers{color:var(--muted);padding:2px 4px} .blog-pag a.page-numbers:hover{color:var(--accent)}
.blog-pag .page-numbers.current{color:var(--ink);font-weight:600}
.blog-pag .wp-block-query-pagination-previous,.blog-pag .wp-block-query-pagination-next{color:var(--accent);font-weight:600}

/* ---- single: hero + featured image ---- */
.blog-single-head{background:var(--tint);border-bottom:1px solid var(--line);padding-block:clamp(40px,5vw,60px)}
.blog-single-head-in{max-width:46rem}
.blog-single-title{margin-top:14px;max-width:20ch}
.blog-meta{margin-top:16px;gap:6px 16px;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.blog-meta .wp-block-post-date{color:var(--muted)}
.blog-meta-cat a{color:var(--accent)}
.blog-single-media{padding-top:clamp(26px,4vw,40px)}
.blog-single-media:not(:has(img)){display:none}
.blog-single-img{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);position:relative}
.blog-single-img::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent-tick);z-index:2}
.blog-single-img img{width:100%;object-fit:cover}

/* ---- prose (front-end reading rhythm + measure; block visuals below are
        class-scoped so they also render in the editor) ---- */
.blog-single-body{padding-top:clamp(34px,4vw,52px)}
.prose{padding-inline:var(--gut)}
.prose > *{margin-top:1.4em} .prose > *:first-child{margin-top:0}
.prose p,.prose li{line-height:1.72}
.prose h2{margin-top:1.9em} .prose h3{margin-top:1.6em} .prose h4{margin-top:1.4em}
.prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.3em} .prose li{margin-top:.5em}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{color:var(--ink);font-weight:700}

/* ---- content block visuals (class-scoped -> editor parity) ---- */
.wp-block-quote{border-left:3px solid var(--accent);margin:0;padding:2px 0 2px 20px;font-size:1.12rem;line-height:1.6;color:var(--ink)}
.wp-block-quote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-style:normal}
.wp-block-pullquote{border-block:2px solid var(--accent);padding:26px 0;text-align:center}
.wp-block-pullquote blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.01em;line-height:1.15}
.wp-block-image img{border-radius:var(--r);border:1px solid var(--line)}
.wp-block-code,.wp-block-preformatted{font-family:var(--mono);font-size:.9rem;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;overflow:auto}
.wp-block-separator{border:0;border-top:1px solid var(--line-2);max-width:100%;opacity:1}
.wp-block-table{font-size:.95rem}
.wp-block-table td,.wp-block-table th{border:1px solid var(--line);padding:9px 12px}
.wp-block-table th{background:var(--tint);text-align:left;font-weight:600}
.wp-block-button__link{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:.72em 1.3em;font-weight:600;font-size:.96rem;letter-spacing:-.01em}
@media (prefers-color-scheme:dark){.wp-block-button__link{background:var(--ice);color:#04203a}}
:root[data-theme="dark"] .wp-block-button__link{background:var(--ice);color:#04203a}
:root[data-theme="light"] .wp-block-button__link{background:var(--ink);color:#fff}

/* ============================================================== PATTERN KIT
   Reusable, brand-styled building blocks for the inserter (patterns/block-*.php).
   Core blocks -> editable field-by-field in the Site Editor. Layout comes from
   core grid/columns; these rules add the brand visuals using the site tokens so
   assembled sections read as one system. --accent defaults to --ice site-wide,
   so the kit works on pages with no temp-* class too. */

/* core buttons -> the .btn language (fill handled in the BLOG block above) */
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--accent);color:var(--accent)}

/* image dropped into a .shot frame (core image block) */
.shot .wp-block-image,.shot figure{margin:0;height:100%}
.shot .wp-block-image img{width:100%;height:100%;object-fit:cover}

/* feature / step cards */
.ap-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;border-top:2px solid var(--accent);height:100%}
.ap-card .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.06em}
.ap-card h3{font-size:1.12rem;letter-spacing:-.02em;margin-top:6px}
.ap-card p{color:var(--muted);font-size:.96rem;line-height:1.55;margin-top:8px}

/* CTA band — deliberately always-dark navy (mirrors the inverted quote-form
   trick) so it pops on a light page; hairline keeps it separated on a dark page. */
.ap-cta{background:#13234A;color:#EAF2F8;border:1px solid rgba(234,242,248,.12);border-radius:var(--r);padding:clamp(38px,6vw,72px);text-align:center}
.ap-cta .label{color:var(--ice-bright)}
.ap-cta h2{color:#EAF2F8}
.ap-cta p{color:#9DB2C6;margin-top:var(--fl-2);max-width:54ch;margin-inline:auto}
.ap-cta .wp-block-buttons{justify-content:center;margin-top:26px}
.ap-cta .wp-block-button__link{background:var(--ice);color:#04203a}
.ap-cta .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:#EAF2F8;border-color:rgba(234,242,248,.35)}

/* stats (placeholder numbers -> mark EXAMPLE until the client confirms) */
.ap-stat{border-top:2px solid var(--accent);padding-top:16px}
.ap-stat .num{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;letter-spacing:.01em;color:var(--ink)}
.ap-stat .cap{color:var(--muted);font-size:.94rem;margin-top:8px}

/* testimonial / pull quote */
.ap-quote{border-left:3px solid var(--accent);padding-left:22px;max-width:62ch}
.ap-quote p{font-size:1.24rem;line-height:1.5;color:var(--ink)}
.ap-quote cite{display:block;margin-top:14px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-style:normal}

/* FAQ (core/details accordion) */
.ap-faq{max-width:72ch}
.ap-faq .wp-block-details{border-top:1px solid var(--line);padding:15px 0}
.ap-faq summary{cursor:pointer;font-weight:600;letter-spacing:-.01em;list-style:none}
.ap-faq summary::-webkit-details-marker{display:none}
.ap-faq summary::after{content:"+";float:right;color:var(--accent);font-family:var(--mono)}
.ap-faq .wp-block-details[open] summary::after{content:"\2013"}
.ap-faq .wp-block-details p{color:var(--muted);margin-top:10px}

/* trust strip */
.ap-trust{display:flex;flex-wrap:wrap;gap:10px 26px;padding:16px 0;border-block:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
.ap-trust b{color:var(--accent);font-weight:600}

/* prose duo */
.ap-duo p{color:var(--muted)} .ap-duo p + p{margin-top:1em}

/* ================================================= FAQ accordion (service pages)
   Native <details>; brand hairlines + accent +/- marker (temp-aware --accent). */
.svc-faq .faq{border-top:1px solid var(--line);max-width:760px;margin-top:var(--fl-4)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:var(--fl-3) 0;font-weight:600;letter-spacing:-.01em;color:var(--ink);font-size:1.06rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-ico{position:relative;flex:0 0 14px;width:14px;height:14px}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--accent)}
.faq-ico::before{top:6px;left:0;width:14px;height:2px}
.faq-ico::after{top:0;left:6px;width:2px;height:14px;transition:transform .2s ease}
.faq-item[open] .faq-ico::after{transform:scaleY(0)}
@media (prefers-reduced-motion:reduce){.faq-ico::after{transition:none}}
.faq-a{padding:0 0 var(--fl-3);color:var(--muted);max-width:64ch}
.faq-a p{line-height:1.6}

/* ============================================================= STYLEGUIDE (/styleguide)
   Internal design-system reference. Scoped .sg-* so it never leaks into pages. */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.sg-swatch{display:flex;flex-direction:column;gap:4px}
.sg-chip{height:64px;border-radius:var(--r);border:1px solid var(--line-2)}
.sg-name{font-weight:600;font-size:.95rem;color:var(--ink)}
.sg-type > * + *{margin-top:var(--fl-2)}
/* type specimens: look like the headings without emitting extra h1/h2 in the outline */
.sg-h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4vw,3.05rem);letter-spacing:.01em;line-height:1.02;color:var(--ink)}
.sg-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,2.9vw,2.3rem);letter-spacing:.02em;line-height:1.05;color:var(--ink)}
.sg-h3{font-weight:600;font-size:1.34rem;letter-spacing:-.01em;color:var(--ink)}
.sg-h4{font-weight:600;font-size:1.1rem;letter-spacing:-.01em;color:var(--ink)}
.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.sg-prose{max-width:720px;color:var(--muted)}
.sg-prose ul{margin:0 0 var(--fl-3);padding-left:1.1em}
.sg-prose li{margin:.3em 0}
.sg-prose blockquote{margin:0 0 var(--fl-3);padding-left:1rem;border-left:3px solid var(--accent)}
.sg-prose blockquote p{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.8rem);line-height:1.2;color:var(--ink)}
.sg-prose blockquote cite{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.72rem;font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.sg-prose table{width:100%;border-collapse:collapse}
.sg-prose th,.sg-prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.sg-prose th{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.sg-form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:640px}
.sg-form .field{display:flex;flex-direction:column;gap:6px}
.sg-form label{font-size:.85rem;font-weight:600;color:var(--ink)}
.sg-form input,.sg-form select{padding:.7em .85em;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit}
.sg-form input:focus,.sg-form select:focus{outline:2px solid var(--ice);outline-offset:1px;border-color:transparent}
@media (max-width:560px){.sg-form{grid-template-columns:1fr}}