/* Kerf Handyman: Kerf's workshop spec sheet, recast for a handyman. Graphite, brushed-aluminium greys
   and one cut-orange accent. Space Grotesk headings, JetBrains Mono references and labels, Instrument
   Sans body. Defaults are Chan's "Kerf draft 69" (Kerf's own style, unchanged).
   Every colour is a :root token named in pack.json, so the editor's swatches change the whole page. */
:root{
  --graphite:#15171A;--panel:#1F2226;--line-d:#3A3F45;--foot:#0E0F11;
  --alu:#C5CAD0;--paper:#F1F2F3;--white:#FFFFFF;--grey:#E4E6E8;--rule:#C9CDD2;
  --ink:#15171A;--muted:#4F555C;--soft:#D5D9DD;--foot-ink:#C7CBD0;--foot-dim:#A3A8AE;
  --orange:#FF6B2C;--orange-d:#B5400F;--ok:#1F7A4A;--no:#A3271F;
  --head:"Space Grotesk",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--body:"Instrument Sans",system-ui,sans-serif;
  --pad:clamp(1rem,4vw,3rem);--max:76rem;
}
body.kf{font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--paper)}
a{text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mono-o{color:var(--orange)}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(1.8rem,4vw,2.8rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
.ico{width:1.2em;height:1.2em}
.small{font-size:.9rem;color:var(--muted)}

/* bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.7rem var(--pad);background:var(--graphite);color:var(--white);border-bottom:1px solid var(--line-d)}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;color:inherit;margin-right:auto}
.logo-cut{width:22px;height:22px;background:linear-gradient(135deg,var(--alu) 0 46%,transparent 46% 54%,var(--alu) 54%);border-radius:2px}
.logo-sub{display:none;font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--alu);border-left:1px solid var(--line-d);padding-left:.6rem}
.bar-nav{display:none}
.bar-nav ul{display:flex;gap:1.4rem}
.bar-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--alu);text-decoration:none;font-size:.95rem}
.bar-nav a:hover{color:var(--white)}
.bar-call{display:none;align-items:center;gap:.4rem;min-height:44px;color:var(--white);text-decoration:none;font-family:var(--mono);font-size:.85rem}
.bar-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;background:var(--orange);color:var(--ink);font-weight:700;text-decoration:none;border-radius:2px}
@media (min-width:62rem){.bar-nav,.bar-call{display:flex}.logo-sub{display:inline}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.3rem;background:var(--orange);color:var(--ink);font-weight:700;text-decoration:none;border-radius:2px;border:0}
.btn:hover{background:color-mix(in srgb,var(--orange) 82%,var(--white))}
.btn-lg{min-height:56px;padding:0 1.6rem;font-size:1.08rem}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid var(--alu)}
.btn-ghost:hover{background:color-mix(in srgb,var(--white) 8%,transparent)}

/* hero: full screen, the clip behind, the job sheet docked */
.hero{position:relative;min-height:100svh;display:grid;align-content:end;gap:1.5rem;padding:6rem var(--pad) 2rem;color:var(--white);background:var(--graphite);overflow:hidden}
.hero-dim{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--graphite) 35%,transparent) 0%,color-mix(in srgb,var(--graphite) 55%,transparent) 45%,color-mix(in srgb,var(--graphite) 92%,transparent) 100%);z-index:1}
.hero-in,.hero-card{position:relative;z-index:2}
.hero-in{max-width:44rem}
.hero-h{font-size:clamp(2.6rem,8vw,5.6rem);margin:.6rem 0 1rem}
.hero-lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--grey);max-width:36rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero-card{background:color-mix(in srgb,var(--graphite) 82%,transparent);border:1px solid var(--line-d);border-top:3px solid var(--orange);padding:1rem 1.1rem;max-width:26rem;backdrop-filter:blur(6px)}
.hero-card .mono{color:var(--alu)}
.hero-card dl{margin:.6rem 0 0;display:grid;gap:.1rem}
.hero-card dl div{display:grid;grid-template-columns:5.5rem 1fr;gap:.6rem;padding:.35rem 0;border-bottom:1px dashed var(--line-d)}
.hero-card dt{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--orange)}
.hero-card dd{margin:0;font-size:.95rem}
.hero .vid-toggle{border-radius:2px;right:var(--pad);left:auto;top:4.6rem;bottom:auto}
@media (min-width:62rem){.hero{grid-template-columns:1fr auto;align-items:end;padding-bottom:3.5rem}.hero .vid-toggle{top:auto;bottom:1rem;right:1rem}}
.hero-in>.mono:first-child{padding-right:3.5rem}
/* service pages: the same full-screen clip, under the header and the next-free-days strip */
.hero-job{min-height:calc(100svh - 7.5rem);padding-top:4.5rem}
.hero-job .hero-h{font-size:clamp(2.3rem,7vw,4.8rem)}
.hero-job .vid-toggle{top:1rem}
@media (min-width:62rem){.hero-job{min-height:calc(100svh - 6.5rem)}.hero-job .vid-toggle{top:auto}}
/* phones: the clip gets a clear window at the top; the words and the job sheet sit below it, on graphite */
@media (max-width:61.99rem){
  .hero-job{padding-top:38svh}
  .hero-job .hero-media,.hero-job .hero-dim{bottom:auto;height:72svh}
  .hero-job .hero-dim{background:linear-gradient(180deg,color-mix(in srgb,var(--graphite) 10%,transparent) 0%,color-mix(in srgb,var(--graphite) 20%,transparent) 40%,color-mix(in srgb,var(--graphite) 80%,transparent) 70%,var(--graphite) 100%)}
}

/* sections */
.sec{padding:clamp(3rem,7vw,5.5rem) var(--pad)}
.sec>*{max-width:var(--max);margin-inline:auto}
.sec-head{margin-bottom:2rem}
.sec-head h2{margin:.4rem 0 .7rem}
.sec-head p:not(.mono){max-width:40rem;color:var(--muted)}
.sec-dark{background:var(--graphite);color:var(--white)}
.sec-dark .sec-head p:not(.mono){color:var(--soft)}
.sec-grey{background:var(--grey)}
.sec a{color:inherit}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);background:var(--white)}
.tbl{width:100%;border-collapse:collapse;font-size:.98rem}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.85rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,var(--white))}
.tbl thead th{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--paper) 50%,var(--white))}
.tbl tbody th{font-family:var(--head);font-weight:700}
.tbl-list td.mono{white-space:nowrap;color:var(--orange-d);font-size:.8rem}
.tbl-list th a{text-decoration:none;display:inline-block;padding:.2rem 0;min-height:24px}
.tbl-list th a:hover{text-decoration:underline}
.tbl .go a{display:inline-grid;place-items:center;width:44px;height:44px;background:var(--graphite);color:var(--white);border-radius:2px}
.tbl-list tr:hover{background:color-mix(in srgb,var(--paper) 30%,var(--white))}
@media (max-width:40rem){
  .tbl-list thead{display:none}
  .tbl-list tr{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .8rem;padding:.9rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,var(--white))}
  .tbl-list th,.tbl-list td{padding:0;border:0}
  .tbl-list td:nth-child(3){grid-column:1/3}
  .tbl-list .go{grid-column:3;grid-row:1/3;align-self:center}
}

@media (max-width:40rem){
  .tbl-mesh thead{display:none}
  .tbl-mesh,.tbl-mesh tbody,.tbl-mesh tr,.tbl-mesh th,.tbl-mesh td{display:block}
  .tbl-mesh tr{padding:.9rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,var(--white))}
  .tbl-mesh th,.tbl-mesh td{padding:.1rem 0;border:0}
  .tbl-mesh tbody th{font-size:1.1rem;margin-bottom:.3rem}
  .tbl-mesh td::before{content:attr(data-label) ": ";font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
}

/* process */
.steps{display:grid;gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.steps li{background:var(--panel);padding:1.4rem}
.steps .mono{color:var(--orange)}
.steps h3{margin:.5rem 0 .4rem;font-size:1.25rem}
.steps p{color:var(--soft)}
@media (min-width:48rem){.steps{grid-template-columns:repeat(4,1fr)}}

/* price factors */
.factors{display:grid;gap:.6rem}
.factors li{display:grid;gap:.2rem;padding:1rem 1.1rem;background:var(--white);border-left:4px solid var(--orange-d)}
.factors strong{font-family:var(--head)}
.factors span{color:var(--muted)}
@media (min-width:48rem){.factors{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}}

/* what we won't touch: a dark list with orange crosses */
.limits{display:grid;gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.limits li{display:flex;gap:.8rem;align-items:flex-start;background:var(--panel);padding:1.1rem 1.2rem}
.limits .ico{flex:none;color:var(--orange);width:1.4em;height:1.4em;margin-top:.05rem}
.limits strong{display:block;font-family:var(--head);font-size:1.1rem;margin-bottom:.2rem}
.limits span{color:var(--soft)}
@media (min-width:48rem){.limits{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}

/* areas */
.area-list{display:grid;gap:.6rem}
.area-list a{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center;padding:1.1rem 1.2rem;background:var(--white);border:1px solid var(--rule);text-decoration:none}
.area-list a:hover{border-color:var(--ink)}
.area-list strong{font-family:var(--head);font-size:1.25rem}
.area-list span{grid-column:1;color:var(--muted);font-size:.92rem}
.area-list .ico{grid-column:2;grid-row:1/3}

/* faq */
.faqs{border-top:1px solid var(--rule)}
.faqs details{border-bottom:1px solid var(--rule)}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;min-height:44px;font-family:var(--head);font-weight:700;font-size:1.08rem}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";font-family:var(--mono);color:var(--orange-d);font-size:1.2rem}
.faqs details[open] summary::after{content:"−"}
.faqs details p{padding:0 0 1.1rem;max-width:44rem;color:color-mix(in srgb,var(--ink) 85%,var(--muted))}

/* inner pages: plate + sheet */
.plate{position:relative;display:grid;background:var(--graphite);color:var(--white)}
.plate-img{position:relative;aspect-ratio:16/7;overflow:hidden;max-height:46vh}
.plate-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);opacity:.7}
.plate-in{padding:1.6rem var(--pad) 2rem;max-width:var(--max);width:100%;margin-inline:auto}
.plate-in h1{font-size:clamp(2.1rem,6vw,3.8rem);margin:.5rem 0 .8rem}
.plate-lede{color:var(--soft);max-width:44rem;font-size:1.12rem}
.plate-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
@media (min-width:62rem){.plate-img{aspect-ratio:auto;height:34vh}}
.sheet{max-width:var(--max);margin:0 auto;padding:clamp(2rem,5vw,4rem) var(--pad)}
.sheet-row{display:grid;gap:1rem;padding:2rem 0;border-top:2px solid var(--ink)}
.sheet-row h2{font-size:clamp(1.35rem,3vw,1.75rem)}
.sheet-row h2 .mono{display:block;color:var(--orange-d);margin-bottom:.3rem}
.sheet-row p+p{margin-top:.9rem}
.sheet-row p{max-width:46rem}
.sheet-row a{color:var(--ink)}
@media (min-width:56rem){.sheet-row{grid-template-columns:18rem 1fr;gap:2.5rem}}
.sheet-steps{display:grid;gap:.9rem;counter-reset:s}
.sheet-steps li{display:grid;grid-template-columns:3rem 1fr;gap:.8rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.sheet-steps .mono{color:var(--orange-d);padding-top:.2rem}
.sheet-steps h3{margin-bottom:.2rem}
.scope{display:grid;gap:1.5rem}
@media (min-width:40rem){.scope{grid-template-columns:1fr 1fr}}
.scope h3{margin-bottom:.6rem}
.scope ul,.ticks,.crosses{display:grid;gap:.55rem}
.scope li,.ticks li,.crosses li{display:flex;gap:.6rem;align-items:flex-start}
.scope .ico,.ticks .ico,.crosses .ico{flex:none}
.in .ico,.ticks .ico{color:var(--ok);margin-top:.15rem}
.out .ico,.crosses .ico{color:var(--no);margin-top:.15rem}
.sheet-rel ul{display:grid;gap:.5rem}
.sheet-rel a{display:flex;gap:.8rem;align-items:baseline;padding:.75rem 1rem;background:var(--white);border:1px solid var(--rule);text-decoration:none;font-weight:600;min-height:44px}
.sheet-rel a .mono{color:var(--orange-d)}
.sheet-rel a:hover{border-color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.tags li{font-family:var(--mono);font-size:.8rem;padding:.35rem .6rem;background:var(--white);border:1px solid var(--rule)}
.big{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,4vw,1.9rem);color:var(--ink);word-break:break-word}

/* quote form: the job sheet */
.order{padding:clamp(3rem,7vw,5rem) var(--pad);background:var(--graphite);color:var(--white)}
.order>*{max-width:52rem;margin-inline:auto}
.order-head h2{margin:.4rem 0 .7rem}
.order-head .mono{color:var(--orange)}
.order-head p:not(.mono){color:var(--soft);max-width:40rem}
.qf{margin-top:2rem;background:var(--white);color:var(--ink);padding:clamp(1rem,3vw,2rem);border-top:4px solid var(--orange)}
.qf-sec{border:0;margin:0 0 1.6rem;padding:0}
.qf-sec>legend{display:flex;gap:.6rem;align-items:center;font-family:var(--head);font-weight:700;font-size:1.2rem;margin-bottom:.9rem;padding:0}
.qf-sec>legend span{font-family:var(--mono);font-size:.75rem;background:var(--graphite);color:var(--orange);padding:.25rem .45rem}
.qf-grid{display:grid;gap:1rem}
@media (min-width:40rem){.qf-grid{grid-template-columns:1fr 1fr}.qf-wide{grid-column:1/-1}}
.qf-label{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.35rem;color:var(--ink)}
.qf-hint-in{text-transform:none;letter-spacing:0;color:var(--muted)}
.qf-input{min-height:48px;padding:.65rem .8rem;border:1.5px solid color-mix(in srgb,var(--muted) 70%,var(--white));border-radius:2px;background:var(--white)}
.qf-input:focus{border-color:var(--ink)}
.qf-textarea{min-height:7rem;resize:vertical}
.qf-file{padding:.6rem}
.qf-hint{font-size:.88rem;color:var(--muted);margin-top:.4rem}
.qf-choice-row{display:flex;flex-wrap:wrap;gap:.5rem}
.qf-choice span{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1.5px solid color-mix(in srgb,var(--muted) 70%,var(--white));border-radius:2px;cursor:pointer;font-weight:600}
.qf-choice input:checked+span{background:var(--graphite);color:var(--white);border-color:var(--graphite)}
.qf-choice input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.sched{--schedule-accent:var(--graphite);--schedule-on-accent:var(--orange);--schedule-background:var(--paper);--schedule-text:var(--ink);--schedule-muted:var(--muted);--schedule-border:color-mix(in srgb,var(--muted) 70%,var(--white));--schedule-font:var(--body);--schedule-radius:2px;--schedule-message:var(--white)}
.qf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.qf-submit{display:inline-flex;align-items:center;gap:.5rem;min-height:52px;padding:0 1.5rem;background:var(--orange);color:var(--ink);border:0;border-radius:2px;font-weight:700;font-size:1.05rem;cursor:pointer}
.qf-submit:disabled{cursor:not-allowed;opacity:.85}
.qf-note{color:var(--muted);font-size:.92rem}
.qf-status{margin-top:1rem;padding:.9rem 1rem;background:var(--paper);border-left:4px solid var(--orange-d);font-weight:600}
.qf-status:empty{display:none}

/* footer */
.foot{background:var(--foot);color:var(--foot-ink);padding:3rem var(--pad) 2rem}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;gap:2rem}
.foot .logo{color:var(--white);margin-bottom:.8rem}
.foot p{font-size:.95rem}
.foot .mono{color:var(--orange);margin-bottom:.6rem}
.foot ul{display:grid;gap:.15rem}
.foot a{color:var(--foot-ink);text-decoration:none;display:inline-block;padding:.25rem 0}
.foot a:hover{color:var(--white);text-decoration:underline}
.foot-note{max-width:var(--max);margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--line-d);font-size:.85rem;color:var(--foot-dim)}
@media (min-width:48rem){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ---- availability banner (docs/AVAILABILITY-BANNER.md): one hairline spec line */
.avb{background:var(--panel);color:var(--white);border-bottom:1px solid var(--line-d);font-family:var(--mono)}
html:not(.js) .avb{display:none}
.avb-in{max-width:var(--max);margin-inline:auto;padding:.5rem var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem}
.avb-h{margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--alu)}
.avb-days{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.avb-chip{min-height:34px;padding:0 .65rem;border:1px solid color-mix(in srgb,var(--alu) 55%,var(--panel));border-radius:2px;background:transparent;color:var(--white);font:500 .78rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.avb-chip:hover{border-color:var(--orange);color:var(--orange)}
.avb-chip:focus-visible,.avb-cb:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.avb-skel{width:4.4rem;height:34px;border:1px dashed var(--line-d)}
.avb-meta{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--foot-dim)}
.avb-meta b{font-weight:500;color:var(--orange)}
.avb-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:avb-pulse 2.2s ease-out infinite}
@keyframes avb-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 55%,transparent)}to{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.avb-dot{animation:none}}
.avb-cb{display:inline-flex;align-items:center;min-height:34px;margin-left:auto;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white);text-underline-offset:3px}
.avb.is-loading .avb-meta,.avb.is-loading .avb-cb{visibility:hidden}
.hero>.avb{position:absolute;top:0;left:0;right:0;z-index:3;background:color-mix(in srgb,var(--graphite) 74%,transparent);backdrop-filter:blur(6px)}
.hero>.avb .avb-in{max-width:none}
.kf-home .hero{padding-top:8rem}
.kf-home .hero .vid-toggle{top:6rem}
@media (min-width:900px){.kf-home .hero{padding-top:7rem}.kf-home .hero .vid-toggle{top:4.2rem}}
@media (max-width:599px){.avb-h,.avb-meta{letter-spacing:.02em}.avb-h{order:1}.avb-meta{order:2;margin-left:auto}.avb-days{order:3;flex-basis:100%}.avb-cb{display:none}}