/* Integrity Tree Removals
   Built from DESIGN.md. Every value here traces to that file.
   Palette sampled from the client's own logo, not chosen. */

/* ---------- fonts ---------- */
@font-face{font-family:Archivo;src:url(../fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --paper:oklch(97.2% 0.008 92);
  --paper-2:oklch(94.6% 0.011 92);
  --paper-3:oklch(91.0% 0.014 92);
  --ink:oklch(21.0% 0.020 135);
  --ink-2:oklch(33.0% 0.026 133);
  --ink-3:oklch(47.5% 0.021 124);
  --green:oklch(42.8% 0.078 131);
  --green-deep:oklch(26.5% 0.055 136);
  --green-line:oklch(60.0% 0.045 128);
  --gold:oklch(75.7% 0.136 84.5);
  --gold-ink:oklch(52.0% 0.118 76);
  --gold-soft:oklch(88.0% 0.070 88);

  --step-xl:clamp(3.25rem,9vw,8rem);
  --step-l:clamp(2.15rem,5.2vw,4.25rem);
  --step-m:clamp(1.6rem,3vw,2.5rem);
  --step-s:1.3125rem;
  --step-b:1.0625rem;
  --step-xs:0.9375rem;
  --step-mono:0.78rem;

  --gutter:clamp(1.25rem,5vw,5.5rem);
  --max:1440px;
  --prose:68ch;
  --pad-a:clamp(5rem,11vh,9rem);
  --pad-b:clamp(7rem,16vh,13rem);

  --ease-q:cubic-bezier(0.22,1,0.36,1);
  --ease-e:cubic-bezier(0.16,1,0.3,1);
  --t-fast:240ms; --t-mid:620ms; --t-slow:1100ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:where(a){color:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper); color:var(--ink-2);
  font-family:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-b); line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- primitives ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--prose)}
.sec{padding-block:var(--pad-a)}
.sec--tall{padding-block:var(--pad-b)}
.sec--dark{background:var(--green-deep);color:oklch(92% 0.012 110)}
.sec--band{background:var(--paper-2)}

h1,h2,h3,h4{color:var(--ink);text-wrap:balance;font-weight:750}
.d-xl{font-size:var(--step-xl);font-weight:800;letter-spacing:-0.035em;line-height:0.92}
.d-l{font-size:var(--step-l);font-weight:750;letter-spacing:-0.025em;line-height:1.02}
.d-m{font-size:var(--step-m);font-weight:700;letter-spacing:-0.015em;line-height:1.1}
.lead{font-size:var(--step-s);line-height:1.5;color:var(--ink-2)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:oklch(97% 0.010 100)}
.sec--dark .lead,.sec--dark p{color:oklch(87% 0.014 110)}

/* the record voice */
.mono{
  font-family:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--step-mono); letter-spacing:0.09em; text-transform:uppercase;
  font-weight:500; color:var(--ink-3); line-height:1.4;
}
.sec--dark .mono{color:oklch(80% 0.030 115)}
.mono--gold{color:var(--gold-ink)}
.sec--dark .mono--gold{color:var(--gold)}

/* field label: a mono tag with a gold tick that draws in */
.tag{display:flex;align-items:center;gap:.75rem}
.tag::before{
  content:'';height:1px;width:2.25rem;background:var(--gold);
  transform:scaleX(1);transform-origin:left;
  transition:transform var(--t-mid) var(--ease-q);
}
.js .tag::before{transform:scaleX(0)}
.js .is-in .tag::before,.js .tag.is-in::before{transform:scaleX(1)}

/* ---------- buttons: green on paper, paper on green. never gold. ---------- */
.btn{
  --bg:var(--green); --fg:oklch(98% 0.008 100);
  display:inline-flex;align-items:center;gap:.65rem;
  padding:1.0625rem 1.75rem;border:0;border-radius:2px;
  background:var(--bg);color:var(--fg);
  font-weight:650;font-size:var(--step-b);letter-spacing:-0.005em;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform var(--t-fast) var(--ease-q);
}
.btn>*{position:relative;z-index:1}
.btn::after{
  content:'';position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform 380ms var(--ease-e);z-index:0;
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{--fg:var(--paper)}
.sec--dark .btn--ghost{--fg:oklch(96% 0.010 100);box-shadow:inset 0 0 0 1.5px oklch(70% 0.030 120)}
.sec--dark .btn--ghost::after{background:oklch(96% 0.010 100)}
.sec--dark .btn--ghost:hover,.sec--dark .btn--ghost:focus-visible{--fg:var(--green-deep)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--gold-ink);outline-offset:3px;border-radius:2px;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:oklch(97.2% 0.008 92 / 0.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--paper-3);
}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto}
.hdr__logo img{width:clamp(148px,17vw,196px);height:auto}
.nav{display:none;margin-left:auto;align-items:center;gap:clamp(1rem,2.2vw,2.25rem)}
.nav a{
  text-decoration:none;font-size:var(--step-xs);font-weight:600;color:var(--ink-2);
  padding-block:.4rem;position:relative;
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform 300ms var(--ease-q);
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current=page]{color:var(--ink)}
.hdr__cta{display:none}
.hdr__tel{
  display:none;align-items:center;gap:.5rem;text-decoration:none;font-weight:650;
  font-size:var(--step-xs);color:var(--ink);white-space:nowrap;
}
.burger{
  margin-left:auto;display:grid;place-items:center;width:46px;height:46px;
  background:none;border:1.5px solid var(--paper-3);border-radius:2px;cursor:pointer;
}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform 300ms var(--ease-q),opacity 200ms}
.burger span+span{margin-top:5px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:76px 0 0;z-index:55;background:var(--paper);
  padding:2rem var(--gutter) 3rem;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity 260ms var(--ease-q),transform 320ms var(--ease-q),visibility 0s 320ms;
}
.drawer[data-open=true]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.drawer a{display:block;text-decoration:none;font-size:1.5rem;font-weight:700;color:var(--ink);
  padding-block:.85rem;border-bottom:1px solid var(--paper-3);letter-spacing:-0.02em}
.drawer .btn{margin-top:1.75rem;width:100%;justify-content:center}

/* burger must vanish exactly when the nav appears. The media query sits AFTER
   .burger so equal specificity resolves in its favour. That ordering was a real
   defect in the Frosty build. */
@media (min-width:1060px){
  .burger,.drawer{display:none}
  .nav,.hdr__cta,.hdr__tel{display:flex}
  .hdr__tel{margin-left:.5rem;padding-left:1.5rem;border-left:1px solid var(--paper-3)}
}

/* ---------- hero: type left, tall field photograph right ---------- */
.hero{padding-block:clamp(3rem,7vh,6rem) clamp(4rem,9vh,7rem);position:relative;overflow:hidden}
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:end}
.hero__kicker{margin-bottom:1.5rem}
.hero h1{margin-bottom:1.5rem}
.hero__lead{max-width:44ch;margin-bottom:2.25rem}
.hero__acts{display:flex;flex-wrap:wrap;gap:.875rem;margin-bottom:2.5rem}
.hero__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1.25rem 1.75rem;padding-top:1.75rem;border-top:1px solid var(--paper-3);
}
.fact dt{margin-bottom:.3rem}
.fact dd{margin:0;font-size:var(--step-xs);color:var(--ink-2);font-weight:600;line-height:1.35}

.shot{position:relative;background:var(--paper-2)}
.shot img{width:100%;height:auto}
.shot__note{
  position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.6rem;
  background:var(--ink);color:oklch(96% 0.012 100);
  padding:.6rem .9rem;
}
.shot__note .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;flex:0 0 auto}
.shot__note span{font-family:'Plex Mono',monospace;font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase}

@media (min-width:900px){
  .hero__grid{grid-template-columns:1.15fr 0.85fr}
  .hero__facts{grid-template-columns:repeat(3,1fr)}
}

/* ---------- numbered editorial rows (services). deliberately unequal. ---------- */
.rows{display:grid;gap:clamp(3.5rem,7vh,6rem)}
.row{display:grid;gap:1.75rem;align-items:start}
.row__idx{
  font-family:'Plex Mono',monospace;font-size:0.8rem;letter-spacing:.12em;
  color:var(--gold-ink);font-weight:500;
}
.row h3{margin-bottom:.75rem}
.row p{max-width:56ch}
.row__more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-weight:650;font-size:var(--step-xs);color:var(--green);text-decoration:none;
}
.row__more svg{transition:transform 300ms var(--ease-q)}
.row__more:hover svg,.row__more:focus-visible svg{transform:translateX(4px)}
.row__media{position:relative}
.row__media img{width:100%;height:auto}

@media (min-width:860px){
  .row{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,0.72fr);gap:2.5rem;align-items:center}
  .row--wide{grid-template-columns:5.5rem minmax(0,1fr)}
  .row--flip .row__media{order:-1}
  .row:nth-child(even){grid-template-columns:5.5rem minmax(0,0.72fr) minmax(0,1fr)}
}

/* ---------- the two hour record: an honest pair, not a slider ----------
   His before and after were shot from different vantage points at different
   zooms, so a wipe comparison read as two unrelated photos. Presented as two
   dated field records instead, which is what they actually are. */
.record{display:grid;gap:2.5rem}
@media (min-width:980px){.record{grid-template-columns:0.78fr 1.22fr;gap:clamp(3rem,5vw,5rem);align-items:center}}

.pair{display:grid;gap:1rem;position:relative}
@media (min-width:620px){.pair{grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.75rem)}}
.pair figure{margin:0}
.pair__gap{
  display:none;position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gold);
  transform:translateX(-50%) scaleY(0);transform-origin:top;
  transition:transform var(--t-slow) var(--ease-e);
}
@media (min-width:620px){.pair__gap{display:block}}
.is-in .pair__gap{transform:translateX(-50%) scaleY(1)}
.pair__gap span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--paper);padding:.45rem .55rem;
  font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink);white-space:nowrap;
}
.sec--dark .pair__gap span{background:var(--green-deep);color:var(--gold)}

.record__list{display:grid;gap:1.25rem;margin-top:2rem}
.record__list li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline}
.record__list .k{font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink);white-space:nowrap}
.sec--dark .record__list .k{color:var(--gold)}

/* ---------- process: a numbered vertical record ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;gap:.4rem 1.5rem;
  padding-block:1.75rem;border-top:1px solid var(--paper-3);
}
.sec--dark .step{border-color:oklch(38% 0.035 135)}
.step:last-child{border-bottom:1px solid var(--paper-3)}
.sec--dark .step:last-child{border-color:oklch(38% 0.035 135)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:'Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;
  color:var(--gold-ink);font-weight:500;
}
.sec--dark .step::before{color:var(--gold)}
.step h3{font-size:1.1875rem;font-weight:700}
.step p{max-width:60ch;font-size:var(--step-xs)}
@media (min-width:760px){.step{grid-template-columns:4rem minmax(0,18rem) minmax(0,1fr);align-items:baseline}}

/* ---------- coverage ---------- */
.cover{display:grid;gap:2.5rem}
@media (min-width:900px){.cover{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem)}}
.towns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.town{
  font-family:'Plex Mono',monospace;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.5rem .8rem;background:var(--paper-2);color:var(--ink-2);
}
.sec--dark .town{background:oklch(33% 0.045 136);color:oklch(90% 0.014 110)}
.town--star{background:var(--gold-soft);color:oklch(34% 0.09 74)}

/* ---------- form ---------- */
.form{display:grid;gap:1.125rem}
.f-row{display:grid;gap:1.125rem}
@media (min-width:620px){.f-row--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.45rem}
.field>label{font-size:var(--step-xs);font-weight:650;color:var(--ink)}
.sec--dark .field>label{color:oklch(94% 0.012 100)}
.field .hint{font-size:.8125rem;color:var(--ink-3);font-weight:400}
.sec--dark .field .hint{color:oklch(78% 0.024 115)}
.field input,.field select,.field textarea{
  width:100%;padding:.9375rem 1rem;background:var(--paper);
  border:1.5px solid var(--paper-3);border-radius:2px;color:var(--ink);
  transition:border-color 200ms var(--ease-q),box-shadow 200ms var(--ease-q);
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px oklch(42.8% 0.078 131 / .16);
}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{
  border-color:oklch(52% 0.17 27);
}
.err{font-size:.8125rem;color:oklch(47% 0.17 27);font-weight:600;min-height:0}
.sec--dark .err{color:oklch(78% 0.14 27)}
.form__note{font-size:.8125rem;color:var(--ink-3);max-width:56ch}
.sec--dark .form__note{color:oklch(78% 0.024 115)}
.form .btn{justify-content:center;margin-top:.25rem}
.form__state{display:none;padding:1.5rem;background:var(--paper-2);border:1px solid var(--paper-3)}
.form__state[data-on=true]{display:block}
.form__state h3{margin-bottom:.5rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.ftr{background:var(--green-deep);color:oklch(88% 0.014 110);padding-block:clamp(3.5rem,7vh,5.5rem) 2rem}
.ftr__grid{display:grid;gap:2.5rem}
@media (min-width:820px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{color:oklch(96% 0.010 100);font-size:.9375rem;font-weight:700;margin-bottom:1rem}
/* .ftr is not .sec--dark, so .mono kept the light theme ink colour here and
   failed contrast on every page. */
.ftr .mono{color:oklch(86% 0.020 112)}
.ftr .mono a{color:oklch(93% 0.014 105)}
.ftr a{color:oklch(88% 0.014 110);text-decoration:none}
.ftr a:hover,.ftr a:focus-visible{color:oklch(97% 0.010 100);text-decoration:underline;text-underline-offset:3px}
.ftr ul{display:grid;gap:.6rem;font-size:var(--step-xs)}
.ftr__logo{width:190px;margin-bottom:1.25rem}
.ftr__legal{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid oklch(38% 0.035 135);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-size:.8125rem;color:oklch(76% 0.020 115);
}

/* ---------- motion ----------
   Every hidden state is gated behind .js, which an inline script in <head> adds.
   If the script never runs, nothing is hidden and the page reads normally. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--t-mid) var(--ease-q),transform var(--t-mid) var(--ease-q)}
.js .rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:60ms}
.rv[data-d="2"]{transition-delay:120ms}
.rv[data-d="3"]{transition-delay:180ms}
.rv[data-d="4"]{transition-delay:240ms}
.rv[data-d="5"]{transition-delay:300ms}
.rv[data-d="6"]{transition-delay:360ms}
.rv[data-d="7"]{transition-delay:420ms}
.rv[data-d="8"]{transition-delay:480ms}

/* line mask reveal. the wrapper is taller than the line box so descenders
   are never clipped, which a bare overflow:hidden does. */
.lines{display:block}
.lines .ln{display:block;overflow:hidden;padding-bottom:0.14em;margin-bottom:-0.14em}
.js .lines .ln>span{display:block;transform:translateY(105%);transition:transform var(--t-slow) var(--ease-e)}
.js .lines.is-in .ln>span{transform:none}
.lines .ln:nth-child(2)>span{transition-delay:80ms}
.lines .ln:nth-child(3)>span{transition-delay:160ms}
.lines .ln:nth-child(4)>span{transition-delay:240ms}

.zoom{overflow:hidden}
.js .zoom img{transform:scale(1.06);transition:transform var(--t-slow) var(--ease-e)}
.js .zoom.is-in img{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important}
  .rv{opacity:1;transform:none}
  .lines .ln>span{transform:none}
  .zoom img{transform:none}
  .tag::before{transform:scaleX(1)}
}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem}
.skip:focus{left:var(--gutter)}