/* Integrity Tree Removals, ad funnel.
   Same brand tokens as the main site (sampled from his logo), but a funnel is a
   different animal: one column, one decision per screen, nothing to wander off
   into. There is no site nav here on purpose. */

@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}

: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-soft:oklch(93.0% 0.024 132);
  --gold:oklch(75.7% 0.136 84.5);
  --gold-ink:oklch(52.0% 0.118 76);
  --gold-soft:oklch(88.0% 0.070 88);
  --danger:oklch(47% 0.17 27);

  --gutter:clamp(1.1rem,4.5vw,2.5rem);
  --ease-q:cubic-bezier(0.22,1,0.36,1);
  --ease-e:cubic-bezier(0.16,1,0.3,1);
  --t-fast:220ms; --t-mid:520ms;
}

*,*::before,*::after{box-sizing:border-box}
/* [hidden] is display:none at specificity 0,1,0, so any component rule that
   sets its own display (.btn is inline-flex) ties and wins on source order.
   Every hidden element in this build would silently stay visible. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{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}

body{
  background:var(--paper);color:var(--ink-2);
  font-family:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis-weight:none;
  overflow-x:hidden;
}
h1,h2,h3{color:var(--ink);font-weight:750;text-wrap:balance}
.wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:min(680px,100%);margin-inline:auto}

.mono{font-family:'Plex Mono',ui-monospace,Menlo,monospace;font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}

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

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- header: logo and a phone number, nothing else ---------- */
.fhdr{background:var(--paper);border-bottom:1px solid var(--paper-3);position:sticky;top:0;z-index:40}
.fhdr__in{display:flex;align-items:center;gap:1rem;min-height:68px}
.fhdr__logo img{width:clamp(140px,34vw,180px);height:auto}
.fhdr__tel{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;font-weight:700;color:var(--ink);white-space:nowrap;font-size:.9375rem}
.fhdr__tel svg{width:16px;height:16px;color:var(--green);flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--green);--fg:oklch(98% 0.008 100);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.0625rem 1.75rem;border:0;border-radius:3px;background:var(--bg);color:var(--fg);
  font-weight:700;font-size:1.0625rem;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;transition:transform var(--t-fast) var(--ease-q);
  min-height:56px;
}
.btn>*{position:relative;z-index:1}
.btn::after{content:'';position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform 360ms var(--ease-e)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]::after{transform:translateY(101%)}
.btn--wide{width:100%}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--paper-3);min-height:48px;
  padding:.75rem 1.25rem;font-size:.9375rem}
.btn--ghost::after{background:var(--paper-2)}
.btn--ghost:hover,.btn--ghost:focus-visible{--fg:var(--ink)}

/* ---------- benefit strip ----------
   The epoxy funnel runs a four up trust row above the headline. Same idea,
   built responsive rather than as duplicated mobile-only and desktop-only
   sections, which is what that build does and is its worst habit. */
.strip{background:var(--green-deep);color:oklch(93% .012 108)}
.strip__in{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;padding-block:.875rem}
@media (min-width:820px){.strip__in{grid-template-columns:repeat(4,1fr);text-align:center;justify-items:center}}
.strip span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;font-weight:600;line-height:1.25}
.strip svg{width:14px;height:14px;color:var(--gold);flex:0 0 auto}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2rem,5vh,3.5rem) clamp(1.5rem,4vh,2.5rem);text-align:center}
.hero__pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--green-soft);
  color:oklch(32% 0.06 132);padding:.5rem .9rem;border-radius:100px;
  font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;margin-bottom:1.25rem}
.hero__pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.hero h1{font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.04;letter-spacing:-0.03em;
  font-weight:800;margin-bottom:1rem}
.hero h1 .hl{color:var(--green);position:relative;white-space:nowrap}
.hero__sub{font-size:clamp(1.0625rem,2.4vw,1.25rem);color:var(--ink-2);max-width:52ch;
  margin:0 auto 1.75rem}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .75rem;margin-top:1.5rem}
.trust li{display:inline-flex;align-items:center;gap:.45rem;font-size:.875rem;
  color:var(--ink-2);font-weight:600}
.trust svg{width:15px;height:15px;color:var(--green);flex:0 0 auto}

/* ---------- the survey card. modelled on a GHL survey, not a typeform. ------
   One question per card, options as tappable tiles with an icon, an explicit
   Next button. No auto advance, because auto advance on a mis-tap is a lost
   lead and there is no way back from a wrong answer you did not see. */
.survey{
  background:var(--paper);border:1px solid var(--paper-3);border-radius:6px;
  box-shadow:0 1px 2px oklch(21% .02 135/.04),0 12px 34px oklch(21% .02 135/.07);
  overflow:hidden;
}
.survey__bar{height:5px;background:var(--paper-3);position:relative;overflow:hidden}
.survey__bar i{position:absolute;inset:0;background:var(--green);transform-origin:left;
  transform:scaleX(0);transition:transform 420ms var(--ease-q)}
.survey__top{display:flex;align-items:center;gap:1rem;padding:.9rem 1.25rem;
  border-bottom:1px solid var(--paper-3);background:var(--paper-2)}
.survey__step{font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.survey__back{margin-left:auto;background:none;border:0;cursor:pointer;padding:.35rem .5rem;
  display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-3);font-size:.875rem;font-weight:600}
.survey__back:hover{color:var(--ink)}
.survey__back[hidden]{display:none}
.survey__body{padding:clamp(1.25rem,4vw,2rem)}

.q{display:none}
.q[data-on="true"]{display:block;animation:qin 360ms var(--ease-q) both}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .q[data-on="true"]{animation:none}
  .survey__bar i{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.q__h{font-size:clamp(1.25rem,3.4vw,1.625rem);line-height:1.22;letter-spacing:-0.015em;
  margin-bottom:.4rem}
.q__hint{font-size:.9375rem;color:var(--ink-3);margin-bottom:1.25rem}

/* icon radio tiles */
.opts{display:grid;gap:.625rem;margin-bottom:1.25rem}
.opts--2{grid-template-columns:1fr}
@media (min-width:560px){.opts--2{grid-template-columns:1fr 1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{
  display:flex;align-items:center;gap:.875rem;width:100%;cursor:pointer;
  padding:.9375rem 1rem;border:1.5px solid var(--paper-3);border-radius:5px;
  background:var(--paper);transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
  font-weight:600;color:var(--ink);line-height:1.3;min-height:60px;
}
.opt label:hover{border-color:var(--green);background:var(--green-soft)}
.opt input:focus-visible+label{outline:2.5px solid var(--gold-ink);outline-offset:2px}
.opt input:checked+label{border-color:var(--green);background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green)}
.opt__ic{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:5px;
  background:var(--paper-2);color:var(--green);transition:background var(--t-fast),color var(--t-fast);
}
.opt input:checked+label .opt__ic{background:var(--green);color:oklch(97% .01 100)}
.opt__ic svg{width:22px;height:22px}
.opt__t{flex:1 1 auto;min-width:0}
.opt__t small{display:block;font-weight:500;font-size:.8125rem;color:var(--ink-3);margin-top:.1rem}
.opt input:checked+label .opt__t small{color:oklch(40% .04 130)}
.opt__tick{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--paper-3);
  display:grid;place-items:center;color:transparent;transition:all var(--t-fast)}
.opt input:checked+label .opt__tick{background:var(--green);border-color:var(--green);color:oklch(97% .01 100)}
.opt__tick svg{width:12px;height:12px}

/* text fields */
.f{display:grid;gap:.4rem;margin-bottom:1rem}
.f label{font-weight:650;font-size:.9375rem;color:var(--ink)}
.f input,.f textarea{width:100%;padding:.9375rem 1rem;background:var(--paper);
  border:1.5px solid var(--paper-3);border-radius:5px;color:var(--ink);min-height:54px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px oklch(42.8% .078 131/.15)}
.f input[aria-invalid=true],.f textarea[aria-invalid=true]{border-color:var(--danger)}
.err{font-size:.8125rem;color:var(--danger);font-weight:600}
.q__err{margin-bottom:.75rem}

.q__foot{display:flex;flex-direction:column;gap:.75rem}
.q__note{font-size:.8125rem;color:var(--ink-3);text-align:center}

/* out of area */
.oob{text-align:center;padding:clamp(1.5rem,5vw,2.5rem)}
.oob__ic{width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold-ink)}
.oob__ic svg{width:28px;height:28px}
.oob h2{font-size:1.5rem;margin-bottom:.75rem}
.oob p{max-width:44ch;margin:0 auto 1rem}

/* the inline booking stage that replaces the questions in the same card */
.bk-stage{animation:qin 360ms var(--ease-q) both}
@media (prefers-reduced-motion:reduce){.bk-stage{animation:none}}

/* ---------- booking ---------- */
.bk{display:grid;gap:1.5rem}
.bk__sum[hidden]{display:none}
.bk__sum{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.875rem 1rem;
  background:var(--green-soft);border-radius:5px;font-size:.9375rem;color:oklch(30% .05 132)}
.bk__sum b{font-weight:750}
.days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
.day{flex:0 0 auto;min-width:78px;padding:.75rem .5rem;border:1.5px solid var(--paper-3);
  border-radius:5px;background:var(--paper);cursor:pointer;text-align:center;
  transition:border-color var(--t-fast),background var(--t-fast)}
.day:hover:not([disabled]){border-color:var(--green)}
.day[aria-pressed=true]{border-color:var(--green);background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green)}
.day[disabled]{opacity:.4;cursor:not-allowed}
.day .dow{display:block;font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.day .dnum{display:block;font-size:1.25rem;font-weight:750;color:var(--ink);line-height:1.2}
.day .dmon{display:block;font-size:.72rem;color:var(--ink-3)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem}
.slot{padding:.875rem .5rem;border:1.5px solid var(--paper-3);border-radius:5px;background:var(--paper);
  cursor:pointer;font-weight:650;color:var(--ink);min-height:52px;
  transition:border-color var(--t-fast),background var(--t-fast)}
.slot:hover{border-color:var(--green)}
.slot[aria-pressed=true]{border-color:var(--green);background:var(--green);color:oklch(97% .01 100)}
.bk__empty{padding:1.25rem;text-align:center;color:var(--ink-3);background:var(--paper-2);border-radius:5px}
.bk__load{display:flex;align-items:center;gap:.6rem;color:var(--ink-3);font-size:.9375rem}
.spin{width:16px;height:16px;border:2px solid var(--paper-3);border-top-color:var(--green);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:1.6s}}

/* ---------- content sections ---------- */
.sec{padding-block:clamp(2.5rem,7vh,4.5rem)}
.sec--band{background:var(--paper-2)}
.sec--dark{background:var(--green-deep);color:oklch(89% .014 110)}
.sec--dark h2,.sec--dark h3{color:oklch(97% .01 100)}
.sec--dark p{color:oklch(87% .014 110)}
.sec h2{font-size:clamp(1.625rem,4.4vw,2.5rem);line-height:1.1;letter-spacing:-0.02em;
  margin-bottom:.75rem}
.sec__lead{font-size:1.125rem;max-width:56ch}
.center{text-align:center}
.center .sec__lead{margin-inline:auto}

.pair{display:grid;gap:.75rem;margin-top:1.75rem}
@media (min-width:620px){.pair{grid-template-columns:1fr 1fr;gap:1rem}}
.pair figure{margin:0;position:relative;background:var(--paper-2);border-radius:5px;overflow:hidden}
.pair img{width:100%;height:auto}
.pair figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:oklch(96% .012 100);
  padding:.5rem .75rem;font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.pair figcaption .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}

.steps{display:grid;gap:0;margin-top:1.5rem}
.step{display:grid;gap:.3rem 1.25rem;padding-block:1.25rem;border-top:1px solid var(--paper-3)}
.sec--dark .step{border-color:oklch(38% .035 135)}
.step:last-child{border-bottom:1px solid var(--paper-3)}
.sec--dark .step:last-child{border-color:oklch(38% .035 135)}
.step .n{font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;color:var(--gold-ink);font-weight:500}
.sec--dark .step .n{color:var(--gold)}
.step h3{font-size:1.0625rem;font-weight:700}
.step p{font-size:.9375rem}
@media (min-width:700px){.step{grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);align-items:baseline}}

.faq{display:grid;gap:1rem;margin-top:1.5rem;max-width:70ch}
.faq h3{font-size:1.0625rem;margin-bottom:.25rem}
.faq p{font-size:.9375rem}

.ftr{background:var(--green-deep);color:oklch(86% .014 110);padding-block:2rem;font-size:.875rem}
.ftr a{color:oklch(92% .014 105)}
.ftr__in{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-mid) var(--ease-q),transform var(--t-mid) var(--ease-q)}
.js .rv.is-in,.rv.is-in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============================================================
   SETTER TOOL. Staff facing, denser than the funnel on purpose:
   this gets used twenty times a day, so it optimises for speed of
   operation rather than for persuasion.
   ============================================================ */
.set__top{margin-bottom:1.25rem}

/* running summary so the setter can see the whole booking at a glance */
.sum{
  position:sticky;top:68px;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;
  background:var(--paper-2);border:1px solid var(--paper-3);border-radius:5px;
  padding:.65rem .85rem;margin-bottom:1.5rem;
  font-size:.875rem;font-weight:650;color:var(--ink);
}
.sum__b--empty{color:var(--ink-3);font-weight:500}
.sum__sep{color:var(--paper-3);font-weight:400}

.set{border-top:1px solid var(--paper-3);padding-block:1.4rem}
.set--last{border-bottom:1px solid var(--paper-3)}
.set__h{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.set__n{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  background:var(--green);color:oklch(97% .01 100);
  display:grid;place-items:center;
  font-family:'Plex Mono',monospace;font-size:.75rem;font-weight:500;
}
.set__h h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.set__b{display:flex;flex-direction:column;gap:.75rem}
.set__note{font-size:.8438rem;color:var(--ink-3)}

.results{display:grid;gap:.4rem}
.res{
  display:grid;gap:.1rem;text-align:left;width:100%;cursor:pointer;
  padding:.7rem .85rem;border:1.5px solid var(--paper-3);border-radius:5px;
  background:var(--paper);transition:border-color var(--t-fast),background var(--t-fast);
}
.res:hover,.res:focus-visible{border-color:var(--green);background:var(--green-soft)}
.res__n{font-weight:700;color:var(--ink);font-size:.9375rem}
.res__m{font-size:.8125rem;color:var(--ink-3)}

.chosen{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem .9rem;border-radius:5px;
  background:var(--green-soft);box-shadow:inset 0 0 0 1.5px var(--green);
}
.chosen__t{display:grid;gap:.1rem;min-width:0;flex:1 1 auto}
.chosen__t strong{color:var(--ink);font-size:.9375rem}
.chosen__t span{font-size:.8125rem;color:oklch(40% .04 130)}

.lnk{
  background:none;border:0;padding:.3rem 0;cursor:pointer;
  color:var(--green);font-weight:650;font-size:.875rem;text-align:left;
  text-decoration:underline;text-underline-offset:3px;
}
.lnk:hover{color:var(--ink)}
.lnk--block{align-self:flex-start}

.newc{display:grid;gap:.75rem;padding:.9rem;background:var(--paper-2);border-radius:5px}

.types{display:grid;gap:.6rem}
@media (min-width:560px){.types{grid-template-columns:1fr 1fr}}
.type{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;text-align:left;
  padding:.9rem 1rem;border:1.5px solid var(--paper-3);border-radius:5px;
  background:var(--paper);min-height:64px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.type:hover{border-color:var(--green);background:var(--green-soft)}
.type[aria-pressed=true]{border-color:var(--green);background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green)}
.type__ic{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:5px;
  background:var(--paper-2);color:var(--green);
}
.type[aria-pressed=true] .type__ic{background:var(--green);color:oklch(97% .01 100)}
.type__ic svg{width:20px;height:20px}
.type__t{font-weight:700;color:var(--ink);font-size:.9375rem;line-height:1.25}
.type__t small{display:block;font-weight:500;font-size:.8125rem;color:var(--ink-3);margin-top:.1rem}
.type[aria-pressed=true] .type__t small{color:oklch(40% .04 130)}

.done{
  border:1px solid var(--paper-3);border-radius:6px;background:var(--card,var(--paper));
  padding:clamp(1.5rem,5vw,2.25rem);text-align:center;
  display:flex;flex-direction:column;gap:1rem;align-items:center;
  box-shadow:0 1px 2px oklch(21% .02 135/.04),0 12px 34px oklch(21% .02 135/.07);
}
.done:focus{outline:none}
.done__ic{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green);
}
.done__ic svg{width:26px;height:26px}
.done h2{font-size:1.5rem}
.done__dl{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;
  text-align:left;margin:0;width:100%;max-width:24rem;
}
.done__dl dt{
  font-family:'Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.15rem;
}
.done__dl dd{margin:0;color:var(--ink);font-weight:650;font-size:.9375rem}
.done .btn{margin-top:.5rem}