/* Even Air Heating and Cooling, design mockup
   Register: plant / instrument plain. One family, three weights, seven sizes.
   Type ladder, decided before markup:
     s1 49.6px / 700  the rail top degree and the closing phone number
     s2 33.6px / 700  h1
     s3 24px   / 700  h2
     s4 18.4px / 600  h3, lede at 400, prices at 600
     s5 17px   / 400  body
     s6 14px   / 400  tables, captions, notes
     s7 12px   / 700  eyebrows and rail marks, uppercase, tracked
   Colour: paper, panel, ink, mute, ember. Ember is the phone and the two
   design-temperature marks and nothing else.
   Value: lightest at the top under the July glare, stepping down through two
   paper tones, single darkest point at the 32-to-5 cold snap, back to paper
   for the shop and the number. */

@font-face{
  font-family:Geologica;
  src:url(font/geologica.woff2) format('woff2-variations');
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#F5F2EC;
  --panel:#E6E1D5;
  --ink:#17150F;
  --mute:#5C564A;
  --ember:#A93409;

  --s1:clamp(2.2rem,4.2vw,3.1rem);
  --s2:clamp(1.6rem,3.4vw,2.1rem);
  --s3:clamp(1.28rem,2.4vw,1.5rem);
  --s4:1.15rem;
  --s5:1.0625rem;
  --s6:.875rem;
  --s7:.75rem;

  --rail:150px;
  --gut:clamp(1.5rem,3.2vw,3rem);
  --measure:36rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Geologica,"Segoe UI",system-ui,sans-serif;
  font-size:var(--s5);
  font-weight:400;
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img{display:block;width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1.1rem}
h1,h2,h3{margin:0;line-height:1.13;letter-spacing:-.018em;font-weight:700}
h1{font-size:var(--s2)}
h2{font-size:var(--s3)}
h3{font-size:var(--s4);font-weight:600;letter-spacing:-.008em;line-height:1.3}

.wrap{width:min(1120px,92vw);margin-inline:auto}

.eyebrow{
  font-size:var(--s7);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin:0 0 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
}
.degchip{
  background:var(--ink);color:var(--paper);padding:.28rem .55rem;letter-spacing:.09em;
}
.note{font-size:var(--s6);color:var(--mute);max-width:var(--measure)}

/* ---------- mockup banner ---------- */
.banner{background:var(--ink);color:var(--paper);padding:.6rem 0;font-size:var(--s6)}
.banner .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem}
.banner p{margin:0;line-height:1.45}
.banner__tag{
  font-size:var(--s7);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--paper);padding:.16rem .45rem;white-space:nowrap;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.8rem 1.1rem;z-index:60;font-weight:600;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.head{border-bottom:1px solid var(--mute)}
.head__in{display:flex;align-items:center;gap:1.4rem;padding:1rem 0;flex-wrap:wrap}
.mark{text-decoration:none;margin-right:auto;display:block}
.mark__name{display:block;font-size:var(--s4);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.mark__trade{
  display:block;font-size:var(--s7);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin-top:.22rem;
}
.scale ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.scale a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 .55rem;
  font-size:var(--s6);font-weight:600;text-decoration:none;color:var(--mute);
  border-bottom:2px solid transparent;
}
.scale a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.call{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.35rem 1.05rem;background:var(--ember);color:#fff;
  font-size:var(--s4);font-weight:700;letter-spacing:-.01em;text-decoration:none;
  white-space:nowrap;
}
.call:hover{background:var(--ink)}
.call--lg{font-size:var(--s3);padding:.7rem 1.5rem;min-height:56px}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.banner :focus-visible,
.last :focus-visible,
.foot :focus-visible,
.dock :focus-visible,
.band--cold :focus-visible{outline-color:var(--paper)}

/* ---------- the opener: the top of the scale ---------- */
.open{padding:clamp(1.5rem,2.8vw,2.1rem) 0 clamp(1.4rem,2.6vw,1.9rem)}
.open__in{display:grid;grid-template-columns:var(--rail) 1fr;gap:var(--gut)}
.open__rail{
  padding-right:1rem;text-align:right;
  display:flex;flex-direction:column;gap:.9rem;white-space:nowrap;
}
.open,.band{position:relative}
.open::before,.band::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(50% - min(560px,46vw) + var(--rail));
  border-left:1px solid var(--mute);
}
.band--cold::before{border-left-color:var(--paper)}
#t6::before{border-left-style:dashed}
.deg{font-size:var(--s7);font-weight:700;letter-spacing:.1em;color:var(--mute)}
.deg--top{
  font-size:var(--s1);font-weight:700;letter-spacing:-.035em;color:var(--ink);
  line-height:.86;margin-bottom:.35rem;
}
.open__body{max-width:46rem}
.open h1{margin-bottom:1rem}
.lede{font-size:var(--s4);font-weight:400;line-height:1.55;max-width:var(--measure)}
.open__act{margin:1.4rem 0 0}
.open__facts{
  margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--mute);
  display:flex;flex-wrap:wrap;gap:1.1rem 2.6rem;
}
.open__facts div{margin:0}
.open__facts dt{
  font-size:var(--s7);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
}
.open__facts dd{margin:.25rem 0 0;font-size:var(--s6);font-weight:600}

/* ---------- the bands ---------- */
.band{padding:clamp(2.75rem,6vw,5rem) 0}
.band--alt{background:var(--panel);border-block:1px solid var(--mute)}
.band--cold{background:var(--ink);color:var(--paper)}
.band__in{display:grid;grid-template-columns:var(--rail) 1fr;gap:var(--gut)}
.band__body{max-width:46rem}
.band__body p,.band__body h2,.band__body h3{max-width:var(--measure)}
.band__body h2{margin-bottom:1.1rem}
.band__body h3{margin:2.4rem 0 .8rem}

.rail{position:relative;padding-right:1rem;text-align:right}
.tick{
  position:absolute;right:1rem;font-size:var(--s7);font-weight:700;
  letter-spacing:.1em;color:var(--mute);
}
.band--cold .eyebrow{color:var(--paper)}
.band--cold .degchip{background:var(--paper);color:var(--ink)}
.band--cold .tick{color:var(--paper)}
.band--cold .tick--ring{color:var(--paper)}
.tick:nth-of-type(1){top:.15rem}
.tick:nth-of-type(2){top:58%}
.tick i{position:absolute;right:-1rem;top:.55em;width:13px;height:1px;background:var(--mute)}
.band--cold .tick i{background:var(--paper)}
.tick--ring{color:var(--ink);font-size:var(--s6);letter-spacing:.04em}
.tick--ring i{background:var(--ember);width:24px;right:-1.5rem}
.tick--ring::after{
  content:"";position:absolute;right:-1.28rem;top:.55em;
  width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--ember);
}

/* ---------- photographs ---------- */
.shot{margin:2.2rem 0}
.shot img{background:var(--panel)}
.shot--wide img{aspect-ratio:16/9;object-fit:cover}
.shot--nat{max-width:31rem}
.shot--tall{max-width:26rem}
.shot--tall img{aspect-ratio:3/4;object-fit:cover}
.shot figcaption{
  margin-top:.7rem;font-size:var(--s6);color:var(--mute);max-width:var(--measure);
}
.band--cold .shot figcaption{color:var(--paper)}
.shot--bleed{margin:0 0 clamp(2rem,4vw,3.25rem);width:100vw;margin-left:calc(50% - 50vw)}
.shot--bleed img{aspect-ratio:16/9;object-fit:cover;object-position:50% 46%;max-height:620px}
.shot--bleed figcaption{width:min(1120px,92vw);max-width:none;margin-inline:auto}

/* ---------- rate lists ---------- */
.rates{width:100%;border-collapse:collapse;margin:2.2rem 0 1.2rem;text-align:left}
.rates caption{
  font-size:var(--s7);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-align:left;padding-bottom:.7rem;
}
.band--cold .rates caption{color:var(--paper)}
.rates th{
  font-weight:600;font-size:var(--s5);padding:.85rem 1.2rem .85rem 0;
  border-top:1px solid var(--mute);vertical-align:top;
}
.rates th span{
  display:block;font-weight:400;font-size:var(--s6);color:var(--mute);margin-top:.15rem;
}
.band--cold .rates th span{color:var(--paper)}
.band--cold .rates th,.band--cold .rates td{border-top-color:var(--paper)}
.rates td{
  font-size:var(--s4);font-weight:600;white-space:nowrap;text-align:right;
  padding:.85rem 0;border-top:1px solid var(--mute);vertical-align:top;
}
.rates tbody tr:last-child th,.rates tbody tr:last-child td{border-bottom:1px solid var(--mute)}
.band--cold .rates tbody tr:last-child th,.band--cold .rates tbody tr:last-child td{border-bottom-color:var(--paper)}
.fork tbody tr:last-child th,.fork tbody tr:last-child td{border-bottom:1px solid var(--mute)}

.fork{width:100%;border-collapse:collapse;margin:1.6rem 0 1.2rem;text-align:left;font-size:var(--s6)}
.fork caption{
  font-size:var(--s7);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-align:left;padding-bottom:.7rem;
}
.fork thead th{
  font-size:var(--s7);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding:0 1.1rem .55rem 0;border-bottom:1px solid var(--mute);
}
.fork tbody th{
  font-weight:700;font-size:var(--s6);white-space:nowrap;
  padding:.85rem 1.1rem .85rem 0;border-top:1px solid var(--mute);vertical-align:top;
}
.fork td{padding:.85rem 1.1rem .85rem 0;border-top:1px solid var(--mute);vertical-align:top}
.fork td:last-child{padding-right:0}
.fork tbody tr:last-child th,.fork tbody tr:last-child td{font-weight:700}

/* ---------- the order, and what to have ready ---------- */
.order{list-style:none;margin:1.6rem 0 1.4rem;padding:0;max-width:var(--measure);counter-reset:none}
.order li{
  padding:.9rem 0;border-top:1px solid var(--mute);font-size:var(--s5);
}
.order li:last-child{border-bottom:1px solid var(--mute)}
.order span{
  display:block;font-size:var(--s7);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.2rem;
}
.ready{margin:1.2rem 0 1.6rem;max-width:var(--measure)}
.ready div{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1.2rem;
  padding:.8rem 0;border-top:1px solid var(--mute);
}
.ready dt{
  font-size:var(--s7);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding-top:.28rem;
}
.ready dd{margin:0;font-size:var(--s6)}

/* ---------- the shop ---------- */
.shop{padding:0 0 clamp(2.75rem,6vw,5rem);border-top:1px solid var(--mute)}
.shop__grid{
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;
}
.shop__grid h2{margin-bottom:1.1rem}
.shop__grid p{max-width:var(--measure)}
.shop__where h3{margin-bottom:.9rem}
.where div{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding:.7rem 0;border-top:1px solid var(--mute);
}
.where dt{
  font-size:var(--s7);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding-top:.28rem;
}
.where dd{margin:0;font-size:var(--s6);font-weight:600}
.where a{text-decoration:underline;text-underline-offset:3px}
.towns{
  margin:clamp(2rem,4vw,3rem) 0 0;padding-top:1.3rem;border-top:1px solid var(--mute);
  font-size:var(--s6);color:var(--mute);max-width:62rem;
}
.towns b{color:var(--ink)}

/* ---------- the last thing on the page ---------- */
.last{background:var(--ink);color:var(--paper);padding:clamp(2.5rem,5.5vw,4rem) 0}
.last .eyebrow{color:var(--paper);margin-bottom:.7rem}
.last__num{margin:0}
.last__num a{
  font-size:var(--s1);font-weight:700;letter-spacing:-.035em;line-height:1;
  text-decoration:none;display:inline-block;
}
.last__num a:hover{text-decoration:underline;text-underline-offset:6px}
.last__sub{margin:1.1rem 0 0;font-size:var(--s6)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:0 0 2.4rem;font-size:var(--s6)}
.foot .wrap{border-top:1px solid var(--paper);padding-top:1.6rem}
.foot__line{margin:0 0 .9rem}
.foot__line a{text-decoration:underline;text-underline-offset:3px}
.foot__legal{margin:0;max-width:62rem;line-height:1.55}

/* ---------- the phone, kept in reach on a phone ---------- */
.dock{display:none}

@media (max-width:1000px){
  :root{--rail:118px}
  .scale{display:none}
}

@media (max-width:860px){
  .open__in,.band__in{grid-template-columns:1fr;gap:0}
  .rail{display:none}
  .open::before,.band::before{display:none}
  .open__rail{
    display:block;padding:0 0 .3rem;text-align:left;
    border-bottom:1px solid var(--mute);margin-bottom:1.1rem;
  }
  .shop__grid{grid-template-columns:1fr}
  .shot--tall,.shot--nat{max-width:none}
  .shot--bleed img{aspect-ratio:16/9}
}

@media (max-width:760px){
  .fork thead{position:absolute;left:-9999px}
  .fork,.fork caption,.fork tbody,.fork tr,.fork th,.fork td{display:block;width:100%}
  .fork caption{padding-bottom:.4rem}
  .fork tr{border-top:1px solid var(--mute);padding:.9rem 0}
  .fork tbody th,.fork td{border-top:0;padding:0 0 .35rem}
  .fork tbody th{font-size:var(--s5)}
  .rates th{padding-right:.8rem}
  .ready div,.where div{grid-template-columns:1fr;gap:.15rem}
  .ready dt,.where dt{padding-top:0}
}

@media (max-width:700px){
  body{padding-bottom:68px}
  .dock{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--ink);padding:.6rem 0;
  }
  .dock .wrap{display:flex}
  .dock .call{flex:1;justify-content:center}
  .head__in{padding:.75rem 0}
  .head .call{display:none}
  .last__num a{font-size:clamp(2.2rem,11vw,3rem)}
}

/* ---------- motion, as polish only ---------- */
.js [data-lift]{opacity:0;transform:translateY(14px)}
.js [data-lift].is-in{
  opacity:1;transform:none;
  transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .js [data-lift]{opacity:1;transform:none;transition:none}
}