/* RSK Tree Service, ad funnel.
   A funnel is a different animal to a site: one column, one decision per screen,
   nothing to wander off into. There is no site nav here on purpose.

   THE BRAND IS BLACK AND WHITE, and that is the client's own answer, not a
   reading of a logo file. The mark is a flat black slab wordmark on white with
   no second colour anywhere in it, so there is nothing to sample the way a funnel
   with a coloured crest can. Structure is therefore ink and paper and nothing
   else.

   WHERE THE ORANGE COMES FROM. A page that is only black and white has nothing
   to point with, and every CTA on it reads the same weight as a rule. The one
   accent is safety orange, and it is taken from the trade rather than invented:
   it is the colour of the saws, the chippers and the high visibility gear in
   every photograph on the page. It never competes with the brand because the
   brand has no colour to compete with.

   ORANGE DISCIPLINE, carried over from the parent build because the trap is the
   same. --accent cannot carry text at its lightness. It is permitted for rules,
   ticks, dots, underline marks and icon strokes. Where orange must read AS TEXT,
   use --accent-ink and nowhere else. Buttons are ink on paper or paper on ink,
   never orange, so the accent stays a signal rather than becoming furniture.

   EVERY PAIR IS MEASURED, not eyeballed: python3 tools/contrast.py converts each
   oklch token to sRGB and computes the WCAG ratio. oklch lightness does not
   predict contrast, so a palette that looks balanced can still fail.

   NEUTRALS ARE TINTED, hue 70 at very low chroma. A pure grey next to wood,
   sawdust and orange reads blue and slightly dead. Nothing here is #000 or #fff.
*/

@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.6% 0.004 75);         /* near white, barely warm */
  --paper-2:oklch(94.4% 0.005 75);
  --paper-3:oklch(89.5% 0.006 75);
  --ink:oklch(17.5% 0.006 70);           /* never #000 */
  --ink-2:oklch(30.5% 0.007 70);
  --ink-3:oklch(43.0% 0.007 70);
  --brand:oklch(21.5% 0.007 70);         /* buttons, dark sections, structure */
  --brand-deep:oklch(13.0% 0.006 70);    /* the footer and the deepest band */
  --brand-line:oklch(55.0% 0.008 70);    /* rules on dark, non text */
  --brand-soft:oklch(93.8% 0.006 70);
  --accent:oklch(70.5% 0.175 55);        /* safety orange, NEVER as text */
  --accent-ink:oklch(50.0% 0.145 45);    /* the ONLY orange permitted as text */
  --accent-soft:oklch(90.5% 0.065 65);
  --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(--accent-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__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
/* The mark is a wordmark, aspect 1.870, so it is a LOCKUP and not a badge. It
   already sets the company name in its own type, so nothing repeats it beside
   the artwork. Sized by height, because a lockup is read by its cap height and
   the header bar is 68px; width follows the aspect. */
.fhdr__badge img{height:36px;width:auto}
@media (max-width:420px){.fhdr__badge img{height:30px}}
.fhdr__name{display:flex;flex-direction:column;line-height:1.05}
.fhdr__name b{font-weight:750;font-size:.9375rem;letter-spacing:-.015em;color:var(--ink)}
.fhdr__name i{font-style:normal;font-weight:500;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
@media (max-width:380px){.fhdr__name i{display:none}}
.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(--brand);flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--brand);--fg:oklch(98% 0.004 75);
  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(--brand-deep);color:oklch(93% .005 75)}
.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(--accent-ink);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(--brand-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(--brand);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(--brand);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(--brand);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(--brand);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(--brand);background:var(--brand-soft)}
.opt input:focus-visible+label{outline:2.5px solid var(--accent-ink);outline-offset:2px}
.opt input:checked+label{border-color:var(--brand);background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand)}
.opt__ic{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:5px;
  background:var(--paper-2);color:var(--brand);transition:background var(--t-fast),color var(--t-fast);
}
.opt input:checked+label .opt__ic{background:var(--brand);color:oklch(97% .004 75)}
.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(43% .007 70)}
.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(--brand);border-color:var(--brand);color:oklch(97% .004 75)}
.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(--brand);
  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(--accent-soft);color:var(--accent-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(--brand-soft);border-radius:5px;font-size:.9375rem;color:oklch(30% .007 70)}
.bk__sum b{font-weight:750}
/* Which clock the slot grid is on. The grid is rendered in the VISITOR's
   timezone by design, so this says so, and says it louder when the visitor's
   clock and the job's clock disagree. */
.bk__tz{
  display:block;margin:0 0 1rem;padding:.6rem .75rem;
  border-left:2px solid var(--paper-3);background:var(--paper-2);
  font-size:.8125rem;line-height:1.45;color:var(--ink-3);
}
.bk__tz--warn{border-left-color:var(--accent);color:var(--ink-2);font-weight:600}

.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(--brand)}
.day[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand)}
.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(--brand)}
.slot[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:oklch(97% .004 75)}
.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(--brand);
  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(--brand-deep);color:oklch(89% .005 75)}
.sec--dark h2,.sec--dark h3{color:oklch(97% .004 75)}
.sec--dark p{color:oklch(87% .005 75)}
.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% .005 75);
  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(--accent);flex:0 0 auto}

/* The caption scrim was strengthened from .92/.74 to .95/.84 on the strength of
   a pixel measurement that turned out to be measuring the WRONG REGION: it
   sampled the whole caption box, including the transparent band above the scrim
   where the photograph shows through, and reported 4.61:1. Measured over the
   glyph band, where the ratio actually lives, the original scrim was already
   around 8.5:1. The stronger value is kept because it costs nothing and the
   brightest of the three photographs is a white clapboard house, but the record
   should say the change was not fixing a real deficiency.

   A three up rail of photographs at ONE shape. The shape is cut in the image
   pipeline, not here: an aspect-ratio plus object-fit on the element crops from
   the centre, and a centre crop is what took a climber's head off on a sibling
   build. Every source in this rail is rendered 4:5 with its own focus point, so
   the grid only has to lay them out. */
.shots{display:grid;gap:.75rem;margin-top:1.75rem;grid-template-columns:1fr}
@media (min-width:560px){.shots{grid-template-columns:1fr 1fr;gap:1rem}}
@media (min-width:860px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots figure{margin:0;position:relative;background:var(--paper-3);border-radius:5px;overflow:hidden}
.shots img{width:100%;height:auto;display:block}
.shots figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,oklch(13% .006 70 / .95) 0%,oklch(13% .006 70 / .84) 55%,oklch(13% .006 70 / 0) 100%);
  color:oklch(97% .004 75);padding:1.5rem .85rem .7rem;
  font-family:'Plex Mono',ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:500}

/* A single photograph run to the full width of the viewport, used once as the
   break between the survey and the rest of the page. It is full width because
   its SECTION carries no .wrap, not because of a negative margin trick: every
   variant of `margin-inline: calc(50% - 50vw)` measures against 100vw, which
   includes the scrollbar, and that is a horizontal overflow on every desktop
   browser that shows one. */
.bleedwrap{padding:0;margin:0}
.bleed{margin:0;overflow:hidden;line-height:0}
.bleed img{width:100%;height:auto;display:block}

/* One review, quoted verbatim, on its own. It is the whole proof section, so it
   is set at reading size rather than as a caption. */
.quote{margin:1.75rem 0 0;padding:1.5rem clamp(1.1rem,4vw,2rem);
  background:var(--paper);border-radius:6px;border:1px solid var(--paper-3)}
.quote blockquote{margin:0;font-size:1.0625rem;line-height:1.62;color:var(--ink-2)}
.quote blockquote p+p{margin-top:.75rem}
.quote figcaption{margin-top:1rem;display:flex;align-items:center;gap:.6rem;
  font-family:'Plex Mono',ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.quote figcaption .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.stars{display:inline-flex;gap:.12rem;color:var(--accent-ink)}
.stars svg{width:15px;height:15px}

/* The town list under "where we work". A plain list reads as filler; set as
   chips it reads as coverage, which is what it is. */
.towns{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.25rem 0 0;padding:0;list-style:none}
.towns li{font-size:.8125rem;font-weight:600;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--paper-3);border-radius:100px;padding:.3rem .7rem}

/* Two columns where a band carries a photograph beside its copy. */
.split{display:grid;gap:1.5rem;align-items:center}
@media (min-width:820px){.split{grid-template-columns:1fr 1fr;gap:2.5rem}}
.split figure{margin:0;border-radius:5px;overflow:hidden;background:var(--paper-3)}
.split img{width:100%;height:auto;display:block}

.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% .007 75)}
.step:last-child{border-bottom:1px solid var(--paper-3)}
.sec--dark .step:last-child{border-color:oklch(38% .007 75)}
.step .n{font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;color:var(--accent-ink);font-weight:500}
.sec--dark .step .n{color:var(--accent)}
.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(--brand-deep);color:oklch(84% .006 75);padding-block:2rem;font-size:.875rem}
.ftr a{color:oklch(93% .006 75)}
.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(--brand);color:oklch(97% .004 75);
  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(--brand);background:var(--brand-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(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand);
}
.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(43% .007 70)}

.lnk{
  background:none;border:0;padding:.3rem 0;cursor:pointer;
  color:var(--brand);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(--brand);background:var(--brand-soft)}
.type[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand)}
.type__ic{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:5px;
  background:var(--paper-2);color:var(--brand);
}
.type[aria-pressed=true] .type__ic{background:var(--brand);color:oklch(97% .004 75)}
.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(43% .007 70)}

.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(--brand-soft);color:var(--brand);
}
.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}


/* ---------- setter tabs ---------- */
.tabs{
  display:flex;gap:.25rem;padding:.25rem;margin-bottom:1.25rem;
  background:var(--paper-2);border:1px solid var(--paper-3);border-radius:6px;
}
.tab{
  flex:1 1 0;padding:.7rem .8rem;border:0;border-radius:4px;background:transparent;
  cursor:pointer;font-weight:650;font-size:.9375rem;color:var(--ink-3);
  transition:background var(--t-fast),color var(--t-fast);min-height:44px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{
  background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px oklch(21% .02 135/.08),0 1px 1px oklch(21% .02 135/.04);
}

/* ---------- client brief ---------- */
.cb{display:flex;flex-direction:column;gap:1.1rem}

.cb__hd{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;
  padding:1rem 1.15rem;background:var(--brand-soft);border-radius:6px;
}
.cb__hd h2{font-size:1.125rem;font-weight:750;letter-spacing:-.015em}
.cb__hd p{font-size:.875rem;color:oklch(38% .007 70);margin-top:.15rem}
.cb__tel{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--brand);color:oklch(97% .004 75);padding:.6rem .9rem;border-radius:5px;
  font-weight:700;font-size:.9375rem;white-space:nowrap;
}
.cb__tel svg{width:15px;height:15px}

.cb__rules{display:grid;gap:.6rem}
@media (min-width:720px){.cb__rules{grid-template-columns:repeat(3,1fr)}}
.cbr{
  padding:.8rem .9rem;border-radius:6px;background:var(--paper);
  box-shadow:inset 0 0 0 1.5px oklch(55% .16 28 / .3);
}
.cbr__t{
  display:block;font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:500;color:oklch(47% .17 27);margin-bottom:.3rem;
}
.cbr p{font-size:.8125rem;color:var(--ink-2);line-height:1.45}

.cb__grid{display:grid;gap:.85rem}
@media (min-width:820px){
  .cb__grid{grid-template-columns:1fr 1fr}
  .cbs--wide{grid-column:1 / -1}
}
.cbs{
  padding:1rem 1.15rem;background:var(--paper);border:1px solid var(--paper-3);border-radius:6px;
}
.cbs h3{
  font-family:'Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--ink-3);margin-bottom:.7rem;
}
.cbs__note{
  font-size:.8125rem;color:var(--ink-3);line-height:1.5;margin-top:.75rem;
  padding-top:.7rem;border-top:1px solid var(--paper-3);
}
.cbs__note b{color:var(--ink-2)}

/* label plus value, stays readable at any width */
.kvl{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.kvl li{display:grid;gap:.05rem .9rem;font-size:.875rem;line-height:1.5}
@media (min-width:480px){.kvl li{grid-template-columns:6.5rem 1fr}}
.kvl b{
  font-family:'Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding-top:.25rem;
}
.kvl span{color:var(--ink-2)}
.kvl--no span{color:var(--ink)}
.kvl--no b{color:oklch(47% .17 27)}

/* tick and cross list */
.tl{display:grid;gap:.42rem;margin:0;padding:0;list-style:none}
.tl li{
  position:relative;padding-left:1.5rem;font-size:.875rem;color:var(--ink-2);line-height:1.5;
}
.tl li b{color:var(--ink)}
.tl li::before{
  position:absolute;left:0;top:.05em;width:1rem;text-align:center;
  font-weight:700;font-size:.875rem;
}
.tl .yes::before{content:'\2713';color:var(--brand)}
.tl .no::before{content:'\00d7';color:oklch(47% .17 27);font-size:1.05rem;line-height:1.15}
.tl .warn::before{content:'!';color:oklch(50% .145 45)}
.tl .no,.tl .warn{color:var(--ink)}

/* question and answer */
.qa{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
@media (min-width:620px){.qa li{display:grid;grid-template-columns:15rem 1fr;gap:.15rem 1rem}}
.qa li{font-size:.875rem;line-height:1.5}
.qa b{color:var(--ink);font-weight:700}
.qa span{color:var(--ink-2)}
.qa em{font-style:normal;font-weight:700;color:oklch(47% .17 27)}

/* his own words */
.qt{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}
.qt li{
  font-size:.875rem;color:var(--ink-2);line-height:1.5;
  padding-left:.85rem;box-shadow:inset 2px 0 0 var(--accent);
}
.qt li b{color:var(--ink)}


/* The setter can be anywhere in the world, so the grid says out loud which
   clock it is on. Times on this page are the customer's, never the device's. */
.set__tz{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.9rem;padding:.5rem .7rem;
  border-left:2px solid var(--accent);
  background:var(--paper-2);
  font-family:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.45;
}