/* Northstar Cooling */
:root{
  --ink:#07182B; --night:#0B2A47; --polar:#F5F9FB; --ice:#D6ECF7; --blue:#1FA8DC; --blue-ink:#0A6E99; --frost:#4D6579; --line:#D3E1EA; --white:#fff;
  --head:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --hero-bg:#FBE0CC;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:var(--body);color:var(--ink);background:var(--polar);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--head);line-height:1.08;letter-spacing:-.02em;font-weight:700}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.narrow{max-width:760px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(245,249,251,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(7,24,43,.07)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.mark{width:2.6rem;height:2.6rem;flex:none;color:var(--ink)}
.footer-brand .mark{color:var(--white)}
.logo-word{font-family:var(--head);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.logo-word em{font-style:normal;font-weight:500;color:var(--blue-ink)}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{text-decoration:none;font-size:.95rem;font-weight:500;color:var(--frost)}
.nav-links a:hover{color:var(--ink)}
.nav-links .nav-cta{color:var(--white)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-family:var(--body);font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;padding:.62rem 1.25rem;font-size:.95rem;transition:background .2s,transform .2s,border-color .2s}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--night)}
.btn-ghost{border-color:rgba(7,24,43,.25);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:.9rem 1.6rem;font-size:1rem}
.nav-toggle{display:none;background:none;border:0;width:2.6rem;height:2.6rem;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink)}

/* hero: warms and cools with the dial */
.hero{background:var(--hero-bg);padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,8vw,6.5rem);transition:background .35s linear}
.hero-grid{display:grid;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.7rem,6.4vw,5rem);max-width:12ch}
.lead{font-size:1.2rem;color:var(--night);max-width:30rem;margin:1.4rem 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.dial-card{background:rgba(255,255,255,.62);border:1px solid rgba(7,24,43,.1);border-radius:28px;padding:2rem 1.75rem 1.6rem;text-align:center;max-width:26rem;width:100%;justify-self:center;backdrop-filter:blur(6px)}
.dial-ring{position:relative;width:min(15rem,70vw);margin:0 auto}
.dial-ring svg{width:100%;height:auto}
.ring-track{fill:none;stroke:rgba(7,24,43,.12);stroke-width:12}
.ring-fill{fill:none;stroke:var(--dial,#FF8A4C);stroke-width:12;stroke-linecap:round;stroke-dasharray:603.2;stroke-dashoffset:150;transition:stroke-dashoffset .25s ease,stroke .25s linear}
.dial-read{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;line-height:1}
.dial-read output{font-size:5.2rem;letter-spacing:-.05em}
.dial-read .deg{font-size:1.6rem;font-weight:600;align-self:flex-start;margin-top:3.1rem;margin-left:.15rem;color:var(--frost)}
.dial-msg{font-family:var(--head);font-weight:600;font-size:1.15rem;margin:1.1rem 0 1rem;min-height:1.6em}
.dial-hint{font-size:.85rem;color:var(--frost);margin-top:.8rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;background:linear-gradient(90deg,#4CC2F0,#F2D7B8 55%,#FF8A4C);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 2px 8px rgba(7,24,43,.35);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:4px solid #fff;cursor:grab}
@media(min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}

/* sections */
.section{padding:clamp(4rem,8vw,7rem) 0}
.section h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:18ch}
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-photo{overflow:hidden;border-radius:24px}
.about-photo img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;transform:scale(1.75);transform-origin:100% 30%}
.about-text h2{margin-bottom:1.3rem}
.about-text p{color:var(--frost);font-size:1.08rem;max-width:34rem}
.about-text p+p{margin-top:1rem}
@media(min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:5rem}}

.services{background:var(--white)}
.services-grid{display:grid;gap:2.5rem}
.services-head p{color:var(--frost);margin:1.2rem 0 1.5rem;max-width:26rem}
.text-link{font-weight:600;color:var(--blue-ink);text-decoration:underline;text-underline-offset:4px}
.svc-list{list-style:none}
.svc{display:grid;grid-template-columns:2.2rem 1fr;gap:1.2rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc svg{color:var(--blue-ink);margin-top:.15rem}
.svc h3{font-size:1.35rem;margin-bottom:.35rem}
.svc p{color:var(--frost);max-width:36rem}
@media(min-width:900px){.services-grid{grid-template-columns:.8fr 1.2fr;gap:5rem}.services-head{position:sticky;top:7rem;align-self:start}}

.how{background:var(--ice)}
.steps{list-style:none;display:grid;gap:2rem;margin-top:3rem;position:relative}
.steps li{position:relative;padding-top:4.2rem}
.step-n{position:absolute;top:0;left:0;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.2rem}
.steps h3{font-size:1.4rem;margin-bottom:.4rem}
.steps p{color:var(--night);max-width:20rem}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr);gap:3rem}.steps li:not(:last-child)::after{content:"";position:absolute;top:1.5rem;left:4rem;right:-1.5rem;height:2px;background:rgba(7,24,43,.2)}}

.contact{background:var(--ink);color:var(--white)}
.contact-grid{display:grid;gap:3rem;align-items:start}
.contact h2{color:var(--white)}
.contact-copy p{color:#B9CDDB;margin:1.2rem 0 1.6rem;max-width:26rem}
.big-mail{font-family:var(--head);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--white);text-decoration-color:var(--blue);text-underline-offset:6px;word-break:break-all}
.contact-form{background:var(--polar);color:var(--ink);border-radius:24px;padding:2rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.field input,.field textarea{width:100%;font:inherit;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(31,168,220,.25)}
.contact-form .btn-primary{width:100%;margin-top:.4rem}
.form-msg{margin-top:.9rem;font-size:.92rem}
.form-msg.ok{color:#0F6B3D}.form-msg.err{color:#B3261E}
@media(min-width:900px){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:5rem}}

/* footer */
.site-footer{background:#04101D;color:#9DB4C4;padding:3rem 0 1.5rem}
.footer-inner{display:grid;gap:1.8rem}
.footer-brand{display:flex;gap:.9rem;align-items:center}
.footer-brand strong{font-family:var(--head);color:var(--white);font-size:1.1rem}
.footer-brand p{font-size:.9rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.footer-links a,.footer-mail{color:#C9DAE6;text-decoration:none;font-size:.95rem}
.footer-links a:hover,.footer-mail:hover{color:var(--white)}
.footer-bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}
@media(min-width:800px){.footer-inner{grid-template-columns:1.2fr 1fr auto;align-items:center}}

/* legal */
.legal{padding:clamp(3rem,6vw,5rem) 0}
.legal h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:.5rem}
.legal .updated{color:var(--frost);margin-bottom:2rem}
.legal h2{font-size:1.3rem;margin:2rem 0 .5rem}
.legal p,.legal li{color:var(--night);margin-bottom:.8rem}
.legal ul{padding-left:1.3rem}
.legal a{color:var(--blue-ink)}

/* mobile nav */
@media(max-width:799px){
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:4.5rem;left:0;right:0;background:var(--polar);flex-direction:column;align-items:flex-start;padding:1.2rem 1.25rem 1.6rem;gap:1.1rem;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-links .nav-cta{align-self:stretch}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.logo-img{height:3.3rem;width:auto;display:block}
.logo-img.on-dark{filter:brightness(0) invert(1);height:3.2rem}
.footer-brand{display:grid;gap:.7rem;align-items:start}

.consent{display:flex;gap:.65rem;align-items:flex-start;margin:0 0 1.2rem;font-size:.9rem;line-height:1.45}
.consent input{flex:none;width:1.1rem;height:1.1rem;margin-top:.2rem;accent-color:#07182B}
.consent label{font-weight:400;cursor:pointer}