/* ============================================================
   KANATA HVAC — shared design system
   Bold & energetic · sturdy grotesk · orange(heat)+blue(cool)
   ============================================================ */

/* ---- Fonts: defaults set here, overridable by Tweaks panel ---- */
:root{
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  /* Brand palette (oklch) */
  --orange:       oklch(0.70 0.166 52);
  --orange-cta:   oklch(0.635 0.185 46);
  --orange-deep:  oklch(0.55 0.16 42);
  --orange-tint:  oklch(0.955 0.03 60);
  --orange-tint2: oklch(0.92 0.055 58);

  --blue:         oklch(0.52 0.13 250);
  --blue-deep:    oklch(0.34 0.095 252);
  --blue-tint:    oklch(0.955 0.018 250);
  --blue-tint2:   oklch(0.90 0.035 248);

  --ink:    oklch(0.22 0.018 255);
  --ink-2:  oklch(0.44 0.022 255);
  --ink-3:  oklch(0.58 0.018 255);

  --bg:      oklch(0.995 0.003 80);
  --surface: oklch(0.975 0.006 75);
  --line:    oklch(0.90 0.008 255);
  --line-2:  oklch(0.94 0.006 255);

  --dark:    oklch(0.185 0.022 256);
  --dark-2:  oklch(0.24 0.026 256);

  --radius:   18px;
  --radius-sm:12px;
  --radius-lg:26px;

  --shadow-sm: 0 2px 8px oklch(0.2 0.02 255 / 0.06);
  --shadow:    0 14px 38px oklch(0.2 0.04 255 / 0.10);
  --shadow-lg: 0 28px 70px oklch(0.2 0.05 255 / 0.16);

  --wrap: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,18px); line-height:1.62;
  font-weight:420;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-head); font-weight:800;
  line-height:1.02; letter-spacing:-0.02em; margin:0;
  color:var(--ink); text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,6vw,4.6rem); }
h2{ font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-0.025em; }
h3{ font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-0.015em; }
p{ margin:0 0 1em; text-wrap:pretty; color:var(--ink-2); }
.lead{ font-size:clamp(1.12rem,1.6vw,1.4rem); color:var(--ink-2); font-weight:430; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(64px,9vw,120px); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.6rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-head); font-weight:700;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-deep);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--orange); border-radius:2px; }
.eyebrow--blue{ color:var(--blue); }
.eyebrow--blue::before{ background:var(--blue); }
.eyebrow--light{ color:var(--orange); }

.section-head{ max-width:720px; }
.section-head.center{ margin-inline:auto; }
.section-head p{ margin-top:.85rem; }

/* ---------- buttons ---------- */
.btn{
  --bh:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  height:var(--bh); padding-inline:1.55rem;
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; letter-spacing:-0.01em;
  border-radius:13px; border:2px solid transparent; cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:20px; height:20px; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--orange-cta); color:#fff; box-shadow:0 10px 24px oklch(0.63 0.185 46 / .34); }
.btn-primary:hover{ background:var(--orange-deep); transform:translateY(-2px); box-shadow:0 16px 32px oklch(0.6 0.18 46 / .42); }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:0 10px 24px oklch(0.52 0.13 250 / .3); }
.btn-blue:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 16px 32px oklch(0.4 0.12 250 / .4); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ghost-light{ background:oklch(1 0 0 / .1); color:#fff; border-color:oklch(1 0 0 / .28); backdrop-filter:blur(4px); }
.btn-ghost-light:hover{ background:oklch(1 0 0 / .18); transform:translateY(-2px); }
.btn-sm{ --bh:46px; font-size:.95rem; padding-inline:1.15rem; }
.btn-lg{ --bh:60px; font-size:1.12rem; padding-inline:2rem; }
.btn-block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- top utility bar ---------- */
.topbar{
  background:#1a2c48; color:oklch(0.86 0.01 255);
  font-size:.86rem; font-weight:450;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px; }
.topbar a{ color:#fff; }
.topbar .tb-left{ display:flex; align-items:center; gap:.5em; color:oklch(0.82 0.01 255); }
.topbar .tb-right{ display:flex; align-items:center; gap:1.4rem; }
.topbar .tb-right span{ display:inline-flex; align-items:center; gap:.45em; }
.topbar .tb-phone{ font-family:var(--font-head); font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.topbar .tb-phone:hover{ color:var(--orange); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 3px oklch(0.7 0.166 52 / .25); }

/* ---------- header / nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, #0f1726, #0c1220);
  border-bottom:1px solid transparent; transition:box-shadow .25s, border-color .25s, background .25s;
}
.nav.scrolled{ border-color:oklch(1 0 0 / .14); box-shadow:0 8px 28px oklch(0.2 0.05 255 / .35); }
.nav .wrap{ display:flex; align-items:center; gap:1.5rem; min-height:78px; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand img.brand-logo{ height:50px; width:auto; max-width:min(64vw,300px); object-fit:contain; }
.nav-links{ display:flex; align-items:center; gap:.35rem; }
.nav-links a{
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  color:oklch(1 0 0 / .82); padding:.5rem .85rem; border-radius:9px; transition:color .15s, background .15s;
}
.nav-links a:hover{ color:#fff; background:oklch(1 0 0 / .14); }
.nav-links a.active{ color:#fff; background:oklch(1 0 0 / .16); }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-phone{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:#fff;
  padding:.4rem .2rem; white-space:nowrap;
}
.nav-phone svg{ width:18px; height:18px; color:var(--orange); }
.nav-phone:hover{ color:var(--orange); }
.hamburger{
  display:none; width:46px; height:46px; border:1px solid oklch(1 0 0 / .3); background:oklch(1 0 0 / .12);
  border-radius:11px; cursor:pointer; align-items:center; justify-content:center; color:#fff;
}
.hamburger svg{ width:24px; height:24px; }

/* mobile menu panel */
.mobile-menu{
  display:none; position:fixed; inset:0 0 0 auto; width:min(340px,86vw); z-index:80;
  background:var(--bg); box-shadow:var(--shadow-lg); padding:24px;
  transform:translateX(100%); transition:transform .3s var(--ease);
  flex-direction:column; gap:.4rem;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-scrim{ display:none; position:fixed; inset:0; background:oklch(0.2 0.02 255 / .45); z-index:70; opacity:0; transition:opacity .3s; }
.mobile-scrim.open{ opacity:1; }
.mobile-menu .mm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.mobile-menu a.mm-link{ font-family:var(--font-head); font-weight:700; font-size:1.3rem; padding:.7rem 0; border-bottom:1px solid var(--line-2); color:var(--ink); }
.mobile-menu .mm-cta{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.mm-close{ width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.mm-close svg{ width:22px;height:22px; }

/* ---------- placeholders (images to be supplied) ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:
    repeating-linear-gradient(135deg, oklch(0.93 0.02 250) 0 14px, oklch(0.96 0.012 250) 14px 28px);
  display:flex; align-items:center; justify-content:center; min-height:120px; isolation:isolate;
}
.ph--warm{
  background:
    repeating-linear-gradient(135deg, oklch(0.93 0.04 60) 0 14px, oklch(0.965 0.022 60) 14px 28px);
}
.ph__label{
  font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:.74rem; letter-spacing:.04em;
  color:oklch(0.4 0.03 255); background:oklch(1 0 0 / .72); padding:.4em .7em; border-radius:7px;
  text-align:center; max-width:80%; backdrop-filter:blur(2px);
}
.ph__label b{ color:var(--orange-deep); font-weight:700; }

/* ---------- chips / pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em .95em; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-size:.92rem; font-weight:520; color:var(--ink-2);
}
.chip svg{ width:16px; height:16px; color:var(--blue); }

/* ---------- service-area chips (shared) ---------- */
.area-chip{
  display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.15em; border-radius:13px;
  background:#fff; border:1px solid var(--line); font-family:var(--font-head); font-weight:600; font-size:1.02rem; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), border-color .18s;
}
.area-chip:hover{ transform:translateY(-3px); border-color:var(--blue); }
.area-chip svg{ width:18px; height:18px; color:var(--orange-deep); }
.area-chip--home{ background:var(--blue); color:#fff; border-color:var(--blue); }
.area-chip--home svg{ color:#fff; }

/* ---------- closing CTA band (shared) ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--dark); color:#fff; padding-block:clamp(52px,7vw,84px); }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 100% 0%, oklch(0.63 0.185 46 / .55), transparent 60%),
    radial-gradient(700px 460px at 0% 100%, oklch(0.42 0.13 250 / .6), transparent 60%);
}
.cta-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,4vw,56px); flex-wrap:wrap; }
.cta-copy{ max-width:620px; }
.cta-copy h2{ color:#fff; }
.cta-copy p{ color:oklch(0.86 0.01 255); margin:.7rem 0 0; font-size:1.12rem; }
.cta-actions{ display:flex; gap:.85rem; flex-wrap:wrap; }
@media (max-width:560px){ .cta-actions{ width:100%; } .cta-actions .btn{ flex:1; } }

/* ---------- footer ---------- */
.footer{ background:var(--dark); color:oklch(0.82 0.012 255); padding-block:clamp(56px,7vw,84px) 28px; }
.footer a{ color:oklch(0.82 0.012 255); transition:color .15s; }
.footer a:hover{ color:#fff; }
.footer h4{ color:#fff; font-size:1.02rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); }
.footer .f-brand img{ height:78px; margin-bottom:1.1rem; }
.footer .f-brand p{ color:oklch(0.74 0.012 255); font-size:.95rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.96rem; }
.footer .f-contact li{ display:flex; gap:.65em; align-items:flex-start; }
.footer .f-contact svg{ width:18px; height:18px; color:var(--orange); flex:none; margin-top:.18em; }
.footer-bottom{ margin-top:clamp(40px,5vw,60px); padding-top:24px; border-top:1px solid oklch(1 0 0 / .12);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.86rem; color:oklch(0.66 0.012 255); }

/* ---------- generic card ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .topbar .tb-left{ display:none; }
}
@media (max-width: 860px){
  .nav-links, .nav-phone.desktop-phone, .nav-cta .btn{ display:none; }
  .hamburger{ display:inline-flex; }
  .nav .wrap{ min-height:68px; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .topbar .tb-right span.tb-hours{ display:none; }
  .btn{ --bh:52px; }
}