/* Willamette Landscaping & Tree Services, 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 PALETTE IS THE CLIENT'S OWN ANSWER, not a reading of a logo file. His
   onboarding form names four colours: dark forest green as the main colour,
   black or near black for background and contrast, white for the logo and
   primary text, and yellow or gold as the secondary accent on service labels.
   The marks themselves are one colour artwork, so the green is painted INTO
   them by the image pipeline rather than sampled out of them. Structure is
   green, near black and paper; gold points.

   GOLD DISCIPLINE, carried over from the RSK build where the trap was orange.
   --accent cannot carry text at its lightness. It is permitted for rules,
   ticks, dots, underline marks and icon strokes. Where gold must read AS TEXT,
   use --accent-ink and nowhere else. Buttons are paper on green or paper on
   ink, never gold, 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 toward the green at very low chroma, and the paper is
   warm. 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.8% 0.005 95);         /* near white, warm */
  --paper-2:oklch(94.6% 0.007 95);
  --paper-3:oklch(89.5% 0.009 95);
  --ink:oklch(18.0% 0.012 155);          /* near black, tinted green, never #000 */
  --ink-2:oklch(30.5% 0.012 155);
  --ink-3:oklch(43.0% 0.012 155);
  --brand:oklch(38.0% 0.075 152);        /* forest green: buttons, structure */
  --brand-deep:oklch(23.0% 0.045 152);   /* the footer and the deepest band */
  --brand-line:oklch(70.0% 0.07 152);    /* rules on dark, non text */
  --brand-soft:oklch(94.0% 0.025 150);
  --accent:oklch(81.0% 0.15 88);         /* gold, NEVER as text */
  --accent-ink:oklch(51.0% 0.12 78);     /* the ONLY gold permitted as text */
  --accent-soft:oklch(93.5% 0.07 92);
  --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:72px}
.fhdr__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
/* The mark is the three line slab wordmark, aspect 2.913, a LOCKUP not a badge.
   It sets the company name in its own type, so nothing repeats it beside the
   artwork. Sized by height: three lines of slab caps need more than the RSK
   wordmark's 36px to stay legible, and the header bar grows to hold it. */
.fhdr__badge img{height:44px;width:auto}
@media (max-width:420px){.fhdr__badge img{height:38px}}
.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.005 95);
  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 95)}
.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:var(--brand);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% .03 152/.04),0 12px 34px oklch(21% .03 152/.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% .005 95)}
.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% .012 155)}
.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% .005 95)}
.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(38% .075 152/.18)}
.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% .012 155)}
.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% .005 95)}
.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% .006 95)}
.sec--dark h2,.sec--dark h3{color:oklch(97% .005 95)}
.sec--dark p{color:oklch(87% .006 95)}
.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 95);
  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% .012 155 / .95) 0%,oklch(13% .012 155 / .84) 55%,oklch(13% .012 155 / 0) 100%);
  color:oklch(97% .005 95);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% .012 155)}
.step:last-child{border-bottom:1px solid var(--paper-3)}
.sec--dark .step:last-child{border-color:oklch(38% .012 155)}
.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 95);padding-block:2rem;font-size:.875rem}
.ftr a{color:oklch(93% .005 95)}
.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:72px;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% .005 95);
  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% .012 155)}

.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% .005 95)}
.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% .012 155)}

.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% .03 152/.04),0 12px 34px oklch(21% .03 152/.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% .03 152/.08),0 1px 1px oklch(21% .03 152/.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% .012 155);margin-top:.15rem}
.cb__tel{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--brand);color:oklch(97% .005 95);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;
}