/* NYC Bright Roofing, ad funnel. Ported from the Qube Cooling Systems funnel.
   One column, one decision per screen, no site nav on purpose.

   THE PALETTE IS THE LOGO'S: brown #4A2C1A (the roof and the wordmark), orange
   #FF7A1A (ROOFING and the sun), golden yellow #FFC629 (the top of the sun), on
   a warm white. Orange fails AA as small text on white, so orange is a signal
   colour (rules, ticks, icon strokes, the big button behind brown text) and
   orange text uses --accent-ink. Body and headings are brown family inks.
*/

@font-face{font-family:Inter;src:url(../fonts/inter-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/spacegrotesk-var.woff2) format('woff2');font-weight:300 700;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:#FFFBF4;         /* their --light #F7F5F1 */
  --paper-2:#FFF3DF;       /* their --light-2 #EDEBE6 */
  --paper-3:#EBDCC4;       /* their --border #E0DBD3 */
  --ink:#2B190E;           /* their --ink #181613, never #000 */
  --ink-2:#43301F;         /* their --ink-2 #3A3630 */
  --ink-3:#65503F;         /* their --ink-3 #6E6860 is 4.9:1 on paper; this is a shade darker so it also clears the sunken ground */
  --brand:#4A2C1A;        /* their --dark-2 #141820: buttons, dark sections, structure */
  --brand-deep:#2E1B10;   /* their --dark #0C0E15: the footer and the deepest band */
  --brand-line:#8A6A52;    /* rules on dark, non text */
  --brand-soft:#FFEFD2;    /* their --brand-bg #F8EFE1, the warm copper wash */
  --accent:#FF7A1A;        /* their --brand #C07A2F, copper, NEVER as text */
  --accent-ink:#A84500;    /* their --brand-dk #9A6020 pulled a shade darker, the ONLY copper permitted as text */
  --accent-soft:#FFE6C4;
  --sun:#FFC629;
  --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:Inter,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-family:'Space Grotesk',Inter,system-ui,sans-serif;font-weight:700;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 the word QUBE alone, aspect 4.37, so it is a WORDMARK and it is
   read by its cap height. "Cooling Systems" is set beside it in page type in
   the same weight family, because the line has no logo of its own and the ads
   say the name out loud; the small line underneath says whose company it is.
   The mark is sized so its cap height matches the type beside it. */
.fhdr__badge img{height:52px;width:auto}
@media (max-width:420px){.fhdr__badge img{height:44px}}
.fhdr__name{display:flex;flex-direction:column;line-height:1.05;padding-left:.7rem;
  border-left:1.5px solid var(--paper-3)}
.fhdr__name b{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.fhdr__name i{font-style:normal;font-weight:500;font-size:.68rem;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(--accent);--fg:var(--brand);
  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:hover,.btn:focus-visible{--fg:#FFFBF4}
.btn::after{content:'';position:absolute;inset:0;background:var(--brand);
  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(--sun);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(--ink-2);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(--accent);flex:0 0 auto}
.hero h1{font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.04;letter-spacing:-0.03em;
  font-weight:700;margin-bottom:1rem}
.hero h1 .hl{color:var(--brand);position:relative;white-space:nowrap;background:linear-gradient(transparent 62%,var(--sun) 62%,var(--sun) 92%,transparent 92%)}
.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(20% .01 78/.05),0 12px 34px oklch(20% .01 78/.08);
  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(64.1% .124 64/.22)}
.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;grid-template-columns:minmax(0,1fr)}
.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 / .9) 72%,oklch(13% .006 70 / 0) 100%);
  color:oklch(97% .004 75);padding:2.25rem .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}
/* A step can carry an icon instead of a number (the warranty section does).
   Without a size the svg is a block that fills its grid cell, which at phone
   width is the whole column: four 358px icons, caught in the 390px screenshot. */
.step .n svg{width:24px;height:24px;display:block}
.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(20% .01 78/.05),0 12px 34px oklch(20% .01 78/.08);
}
.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(20% .01 78/.08),0 1px 1px oklch(20% .01 78/.05);
}

/* ---------- 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;
}

/* ---------- the Meta lead form's booking page (2026-10-07) ----------
   /booking?src=leadform&lead_id=<id>: the homeowner's own details, prefilled
   from the form, sit above the calendar with a quiet "Change details". */
.bk__lead[hidden]{display:none}
.bk__lead{margin-bottom:1.5rem;padding:1rem 1.125rem;border:1.5px solid var(--paper-3);border-radius:5px;background:var(--paper)}
.bk__lead-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.bk__lead-sum{font-size:.9375rem;line-height:1.5;color:var(--ink);margin:0;overflow-wrap:anywhere}
.bk__lead-sum b{font-weight:750}
.bk__lead [data-lead-fields]{margin-top:1rem}
.linkbtn{background:none;border:0;padding:.5rem 0;min-height:44px;font:inherit;font-size:.875rem;font-weight:650;
  color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pv h2{font-size:1.125rem;margin:0 0 .35rem}
.pv__s{margin:0 0 1.4rem}
.pv__s p{line-height:1.6;max-width:62ch}
.pv__s a{color:var(--accent-ink);text-decoration:underline}

/* NYC Bright: the second radio group on the ownership slide. */
.q__h2{font-size:1.0625rem;margin:1.25rem 0 .6rem;color:var(--ink)}