/* ===========================================================
   Comfort Crew Heating & Cooling — HIGH-CONTRAST BRUTALIST
   Light paper bg, ink-black blocks, ONE hot-signal accent.
   No shadows (except 1 hard offset on primary CTA), radius 0,
   heavy borders, oversized Archivo Black type, mono numerals.
   Native scroll (NO Lenis). Photos at 100% brightness.
   =========================================================== */

:root{
  --paper:    oklch(0.97 0.006 95);
  --paper-2:  oklch(0.94 0.008 95);
  --ink:      oklch(0.18 0.012 60);
  --muted:    oklch(0.45 0.012 60);
  --signal:   oklch(0.62 0.24 32);
  --signal-2: oklch(0.55 0.23 32);
  --on-ink:   oklch(0.985 0.01 95);
  --line: 3px;
  --maxw: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.4rem);
  --font-display: "Archivo Black", system-ui, sans-serif;
  --font-head: "Archivo", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,1.05vw,1.075rem);
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; filter:none}        /* photos at 100% */
a{color:inherit}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(3rem,8vw,6rem)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display); margin:0; line-height:0.96;
  letter-spacing:-0.01em; text-transform:uppercase}
h1{font-size:clamp(2.6rem,8.4vw,6.2rem)}
h2{font-size:clamp(2rem,5.2vw,3.6rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
p{margin:0 0 1rem}
.lead{font-family:var(--font-head); font-weight:600; font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.4}

.eyebrow{font-family:var(--font-mono); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal);
  display:inline-flex; align-items:center; gap:.6ch; margin:0 0 1rem}
.eyebrow::before{content:""; width:1.6em; height:var(--line); background:var(--signal); display:inline-block}
.mono{font-family:var(--font-mono)}
.mark{background:linear-gradient(transparent 62%, var(--signal) 62% 92%, transparent 92%);
  padding-inline:.05em}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.6ch; font-family:var(--font-head);
  font-weight:700; font-size:1.02rem; text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none; padding:.95em 1.5em; border:var(--line) solid var(--ink);
  background:var(--paper); color:var(--ink); cursor:pointer; border-radius:0;
  transition:transform .08s ease, background .15s ease, color .15s ease}
.btn-call{background:var(--signal); color:var(--on-ink); border-color:var(--ink);
  box-shadow:6px 6px 0 var(--ink)}
.btn-call:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); background:var(--signal-2)}
.btn-call:active{transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--on-ink)}
.btn-lg{font-size:1.12rem; padding:1.05em 1.7em}
.phone-ico{width:1.05em; height:1.05em; display:inline-block; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:var(--line) solid var(--ink); transition:background .2s ease,color .2s ease}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:68px; padding-block:.5rem}
.brand{display:inline-flex; align-items:center; gap:.6ch; text-decoration:none;
  font-family:var(--font-display); text-transform:uppercase; font-size:1.18rem; letter-spacing:-0.01em}
.brand-mark{width:1.5em; height:1.5em; flex:0 0 auto; background:var(--signal);
  border:var(--line) solid var(--ink); display:inline-block; position:relative}
.brand-mark::after{content:""; position:absolute; inset:3px; background:repeating-linear-gradient(
  90deg, var(--ink) 0 2px, transparent 2px 5px)}
.brand-thin{font-family:var(--font-head); font-weight:600}
.nav-links{display:flex; gap:.2rem; align-items:center}
.nav-links a{font-family:var(--font-mono); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  padding:.5em .8em; position:relative}
.nav-links a::after{content:""; position:absolute; left:.8em; right:.8em; bottom:.25em;
  height:var(--line); background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-call{padding:.6em 1em; font-size:.85rem; box-shadow:4px 4px 0 var(--ink)}
.nav-call:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink)}

/* scrolled = invert to ink bar */
.nav.scrolled{background:var(--ink); color:var(--on-ink)}
.nav.scrolled .brand,.nav.scrolled .nav-links a{color:var(--on-ink)}
.nav.scrolled{border-bottom-color:var(--signal)}
.nav.scrolled .brand-mark{border-color:var(--on-ink)}
.nav.scrolled .nav-call{background:var(--signal); color:var(--on-ink); border-color:var(--on-ink); box-shadow:4px 4px 0 var(--signal-2)}

.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{border-bottom:var(--line) solid var(--ink); position:relative; overflow:hidden}
.hero .wrap{padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.hero-tag{font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4ch 1ch; margin-bottom:1.3rem}
.hero-tag b{color:var(--ink)}
.hero h1{margin-bottom:1.2rem}
.hero h1 .num{color:var(--signal)}
.hero-sub{font-family:var(--font-head); font-weight:600; font-size:clamp(1.05rem,1.7vw,1.3rem);
  max-width:36ch; margin-bottom:1.8rem; color:var(--muted)}
.hero-sub b{color:var(--ink)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem 1.1rem; align-items:center}
.hero-resolve{font-family:var(--font-mono); font-size:.82rem; color:var(--muted); margin:0; max-width:24ch}
.hero-plate{border:var(--line) solid var(--ink); position:relative; aspect-ratio:4/3; overflow:hidden}
.hero-plate img{width:100%; height:100%; object-fit:cover}
.hero-plate .plate-tag{position:absolute; left:0; bottom:0; background:var(--ink); color:var(--on-ink);
  font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:.5em .9em; border-top:var(--line) solid var(--signal)}

/* ---------- generic framed photo ---------- */
.frame{border:var(--line) solid var(--ink); overflow:hidden; position:relative}
.frame img{width:100%; height:100%; object-fit:cover}
.frame .frame-tag{position:absolute; left:0; bottom:0; background:var(--ink); color:var(--on-ink);
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:.45em .85em; border-top:var(--line) solid var(--signal)}

/* ---------- block: ink section ---------- */
.ink-block{background:var(--ink); color:var(--on-ink); border-block:var(--line) solid var(--ink)}
.ink-block h2,.ink-block h3{color:var(--on-ink)}
.ink-block .eyebrow{color:var(--signal)}
.ink-block .muted{color:oklch(0.72 0.01 95)}

/* ---------- the gap / spine block ---------- */
.gap-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.gap-stat{font-family:var(--font-display); font-size:clamp(4rem,13vw,9rem); line-height:.85; color:var(--signal)}
.gap-stat small{display:block; font-family:var(--font-mono); font-size:.9rem; letter-spacing:.14em;
  color:var(--on-ink); margin-top:.6rem; text-transform:uppercase}
.gap-copy h2{margin-bottom:1rem}

/* ---------- services grid ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:var(--line) solid var(--ink)}
.svc-tile{padding:clamp(1.3rem,3vw,1.9rem); border-right:var(--line) solid var(--ink);
  border-bottom:var(--line) solid var(--ink); background:var(--paper);
  transition:background .15s ease, color .15s ease}
.svc-grid .svc-tile:nth-child(3n){border-right:0}
.svc-tile:hover{background:var(--ink); color:var(--on-ink)}
.svc-tile:hover h3,.svc-tile:hover .svc-no{color:var(--on-ink)}
.svc-no{font-family:var(--font-mono); font-size:.78rem; font-weight:600; color:var(--signal); letter-spacing:.1em}
.svc-tile h3{margin:.7rem 0 .6rem}
.svc-tile p{font-size:.94rem; color:var(--muted); margin:0}
.svc-tile:hover p{color:oklch(0.78 0.01 95)}

/* ---------- reputation ledger (signature) ---------- */
.ledger{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.ledger-num{font-family:var(--font-display); font-size:clamp(5rem,18vw,12rem); line-height:.8; color:var(--signal)}
.ledger-num small{display:block; font-family:var(--font-mono); font-size:.85rem; letter-spacing:.14em;
  color:var(--on-ink); text-transform:uppercase; margin-top:.8rem}
.tally{border:var(--line) solid var(--signal); border-collapse:collapse; width:100%; background:transparent}
.tally tr{border-bottom:var(--line) solid oklch(0.4 0.01 95)}
.tally tr:last-child{border-bottom:0}
.tally td{padding:.85em 1em; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.86rem}
.tally td:first-child{color:var(--on-ink); font-weight:600}
.tally td:last-child{text-align:right; color:var(--signal); font-weight:600}

/* ---------- review cards ---------- */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
.rev{border:var(--line) solid var(--ink); padding:1.5rem; background:var(--paper);
  display:flex; flex-direction:column}
.rev .stars{font-family:var(--font-mono); color:var(--signal); font-weight:600; letter-spacing:.15em; font-size:.95rem; margin-bottom:.9rem}
.rev blockquote{margin:0 0 1.1rem; font-size:1rem; line-height:1.55}
.rev .who{font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-top:auto; border-top:var(--line) solid var(--ink); padding-top:.8rem}
.rev .who b{color:var(--ink)}

/* big reviews wall */
.wall{columns:3; column-gap:1.3rem}
.wall .rev{break-inside:avoid; margin-bottom:1.3rem; display:block}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}
.crew{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:1.6rem}
.crew-card{border:var(--line) solid var(--ink); padding:1.1rem 1.2rem}
.crew-card .role{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; color:var(--signal); text-transform:uppercase}
.crew-card .nm{font-family:var(--font-display); text-transform:uppercase; font-size:1.3rem; margin-top:.3rem}
.crew-card p{font-size:.9rem; color:var(--muted); margin:.5rem 0 0}

/* ---------- service area / list ---------- */
.spec-table{width:100%; border-collapse:collapse; border:var(--line) solid var(--ink)}
.spec-table tr{border-bottom:var(--line) solid var(--ink)}
.spec-table tr:last-child{border-bottom:0}
.spec-table td{padding:1em 1.2em; vertical-align:top}
.spec-table td:first-child{font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem;
  width:38%; border-right:var(--line) solid var(--ink)}
.spec-table td:last-child{font-size:.96rem; color:var(--muted)}
.spec-table .sno{font-family:var(--font-mono); color:var(--signal); font-size:.8rem; display:block; margin-bottom:.3rem; letter-spacing:.1em}

/* ---------- CTA band ---------- */
.cta-band{background:var(--signal); color:var(--on-ink); border-block:var(--line) solid var(--ink); text-align:center}
.cta-band h2{color:var(--on-ink); margin-bottom:1.4rem}
.cta-band .btn-call{background:var(--ink); color:var(--on-ink); border-color:var(--on-ink); box-shadow:6px 6px 0 oklch(0.4 0.18 32)}
.cta-band .btn-call:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 oklch(0.4 0.18 32); background:oklch(0.12 0.01 60)}
.cta-band .small{font-family:var(--font-mono); font-size:.82rem; margin-top:1.1rem; color:oklch(0.99 0.02 95)}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}
.contact-card{border:var(--line) solid var(--ink); padding:clamp(1.4rem,3vw,2rem)}
.contact-card .big-phone{font-family:var(--font-display); font-size:clamp(1.8rem,4.5vw,2.8rem);
  text-transform:uppercase; text-decoration:none; display:inline-block; margin:.6rem 0 1.2rem; line-height:1}
.contact-card .big-phone:hover{color:var(--signal)}
.field{display:block; margin-bottom:1rem}
.field label{font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em;
  display:block; margin-bottom:.4rem; font-weight:600}
.field input,.field textarea{width:100%; border:var(--line) solid var(--ink); background:var(--paper);
  padding:.8em .9em; font-family:var(--font-body); font-size:1rem; border-radius:0}
.field input:focus,.field textarea:focus{outline:none; background:var(--paper-2); border-color:var(--signal)}
.form-note{display:none; font-family:var(--font-mono); font-size:.85rem; border:var(--line) solid var(--signal);
  padding:.9em 1em; margin-top:.4rem; background:var(--paper-2)}
.area-list{display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:1rem 0 0}
.area-list li{font-family:var(--font-mono); font-size:.82rem; border:var(--line) solid var(--ink);
  padding:.45em .8em; text-transform:uppercase; letter-spacing:.06em}

/* ---------- page header (sub-pages) ---------- */
.phead{border-bottom:var(--line) solid var(--ink); background:var(--paper-2)}
.phead .wrap{padding-block:clamp(2.5rem,6vw,4rem)}
.phead h1{font-size:clamp(2.4rem,7vw,5rem); margin-bottom:.8rem}
.phead p{max-width:50ch; color:var(--muted); font-family:var(--font-head); font-weight:600; font-size:1.1rem; margin:0}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:var(--on-ink); border-top:var(--line) solid var(--signal)}
.footer .wrap{padding-block:clamp(2.5rem,5vw,3.5rem)}
.foot-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; align-items:flex-start}
.foot-brand{font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem}
.foot-brand span{color:var(--signal)}
.foot-links{display:flex; flex-wrap:wrap; gap:1rem}
.foot-links a{font-family:var(--font-mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  text-decoration:none; color:oklch(0.78 0.01 95)}
.foot-links a:hover{color:var(--signal)}
.foot-phone{font-family:var(--font-display); font-size:1.6rem; text-transform:uppercase; text-decoration:none; color:var(--on-ink)}
.foot-phone:hover{color:var(--signal)}
.foot-meta{font-family:var(--font-mono); font-size:.74rem; color:oklch(0.6 0.01 95); letter-spacing:.05em;
  border-top:var(--line) solid oklch(0.35 0.01 95); margin-top:2rem; padding-top:1.4rem; line-height:1.7}

/* ---------- reveal anim ---------- */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.in{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  *{scroll-behavior:auto !important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid,.gap-grid,.ledger,.about-grid,.contact-grid{grid-template-columns:1fr}
  .hero-grid{gap:2rem}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid .svc-tile:nth-child(3n){border-right:var(--line) solid var(--ink)}
  .svc-grid .svc-tile:nth-child(2n){border-right:0}
  .rev-grid{grid-template-columns:1fr}
  .wall{columns:2}
  .crew{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--ink); border-bottom:var(--line) solid var(--signal); padding:.5rem var(--pad) 1rem; gap:0}
  .nav-links.open{display:flex}
  .nav-links a{color:var(--on-ink); padding:.85em .2em; border-bottom:1px solid oklch(0.35 0.01 95); width:100%}
  .nav-links a::after{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:46px; height:40px;
    border:var(--line) solid var(--ink); background:var(--paper); cursor:pointer; padding:0}
  .nav.scrolled .nav-toggle{background:var(--ink)}
  .nav-toggle span{width:20px; height:var(--line); background:var(--ink); position:relative; display:block}
  .nav.scrolled .nav-toggle span{background:var(--on-ink)}
  .nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:20px; height:var(--line); background:inherit}
  .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
  .nav-call{display:none}
  .svc-grid{grid-template-columns:1fr}
  .svc-grid .svc-tile{border-right:0 !important}
  .wall{columns:1}
  .foot-top{flex-direction:column}
  .spec-table td:first-child{width:42%}
}