/* NuShake section kit (pilot 2026-11-13; plan + measurements: seo/brands/nushake/redesign-2026-11-13/README.md).
   Loaded after style-v2.css, only on pages whose <main> carries .k-page. Tokens are style-v2.css :root.
   Three surfaces, three jobs:
     ink     = act or prove  (hero slab, quote panel, service tiles, closing band)
     yellow  = ONE solid band per page, black type (owner 2026-11-13; lifts the 5% gold cap for this band only)
     paper   = reading: black nameplate heading, then prose on the open page; rules and boxes only around data */
.k-page{--k-measure:66ch;--k-gap:clamp(44px,5vw,72px)}

/* ---------- HERO: full-bleed ink slab + job photo to the screen edge ---------- */
.k-crumb{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.k-hero{background:var(--ink);color:var(--tx-inv);display:grid;grid-template-columns:1fr}
.k-hero-slab-in{padding:clamp(28px,5vw,64px) var(--wrap-pad)}
.k-hero-label{font-family:var(--font-body);font-weight:800;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tx-inv-2);margin:0 0 var(--sp-4)}
.k-hero h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,4.7vw,4.3rem);line-height:.92;letter-spacing:0;color:var(--tx-inv);margin:0;text-wrap:balance}
.k-hero h1 em{font-style:normal;color:inherit}
.k-hero .cert-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.k-hero .btn-secondary{background:transparent;color:var(--tx-inv);border-color:var(--tx-inv)}
.k-hero-photo{margin:0;position:relative;min-height:240px}
.k-hero-photo img{display:block;width:100%;height:100%;min-height:240px;max-height:46vh;object-fit:cover}
.k-hero-photo figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--tx-inv);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);letter-spacing:.02em;line-height:1.1;padding:8px 14px;border-top:4px solid var(--gold-action);max-width:90%}
@media(min-width:1000px){
  .k-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:min(68vh,640px)}
  .k-hero-slab{display:flex;align-items:center;justify-content:flex-end}
  .k-hero-slab-in{width:100%;max-width:calc(var(--wrap-max) * .525);padding-right:clamp(32px,4vw,64px)}
  .k-hero-photo img{position:absolute;inset:0;max-height:none}
}

/* ---------- THE YELLOW BAND: four facts, black on yellow, like a tool's nameplate ---------- */
.k-yband{background:var(--gold-action);color:var(--ink);border-bottom:var(--rule-4)}
.k-yband-in{list-style:none;margin:0 auto;padding:0 var(--wrap-pad);max-width:var(--wrap-max);display:grid;grid-template-columns:1fr 1fr}
.k-yband-in > li{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.05;letter-spacing:.01em;padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;color:var(--ink)}
.k-yband-in > li strong{font-weight:900}
.k-yband-in > li:nth-child(even){padding-left:var(--sp-4);border-left:2px solid var(--ink)}
.k-yband-in > li:nth-child(n+3){border-top:2px solid var(--ink)}
@media(min-width:900px){
  .k-yband-in{grid-template-columns:repeat(4,1fr)}
  .k-yband-in > li{font-size:clamp(1.15rem,1.6vw,1.45rem);padding:var(--sp-5) var(--sp-5) var(--sp-5) 0}
  .k-yband-in > li + li{padding-left:var(--sp-5);border-left:2px solid var(--ink)}
  .k-yband-in > li:nth-child(n+3){border-top:none}
}

/* ---------- BODY GRID: act left (under the headline slab), read right. One grid, so the panel follows the lead on
   phones. The panel is on the LEFT because Roofle's OC-sponsored tab and its pop-up card float on the right edge
   (measured live 2026-11-13: tab x>=1318 of 1440, card 390px wide); a right-hand panel sat under both. ---------- */
.k-body{max-width:var(--wrap-max);margin:0 auto;padding:clamp(28px,4vw,48px) var(--wrap-pad) var(--k-gap)}
@media(min-width:1100px){
  .k-body{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:clamp(40px,5vw,72px);align-items:start}
  .k-body > *{grid-column:2}
  .k-body > .k-rail{grid-column:1;grid-row:1 / span 12}
}
.k-lead > p{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;color:var(--ink);max-width:var(--k-measure)}
.k-lead > p + p{margin-top:var(--sp-4)}
.k-lead > .k-facts,.k-lead > .k-note{font-size:1rem;line-height:1.6;color:var(--tx-2)}
.k-lead > .k-leak{background:var(--ink);color:var(--tx-inv);font-size:1rem;line-height:1.5;padding:var(--sp-4);border-left:8px solid var(--gold-action)}
.k-lead > .k-leak a{color:var(--gold-action);font-weight:800}

/* Quote panel: the site's dark form with its heading inside. */
.k-rail{margin-top:var(--sp-6)}
.k-rail .form-dark{border-top:8px solid var(--gold-action)}
.k-rail-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.9rem;line-height:1;letter-spacing:.01em;color:var(--tx-inv);margin:0 0 var(--sp-3)}
@media(min-width:1100px){
  .k-rail{margin-top:0}
  .k-rail .form-dark{padding:var(--sp-5)}
  .k-rail .ff{margin-bottom:10px}
  .k-rail .ff-row{gap:10px;margin-bottom:0}
  .k-rail .ff :is(input,select,textarea){width:100%;max-width:none;padding-block:9px}
}
/* Pinned panel (service pages): compact so the Send button stays in view, and pinned only where it fits. */
@media(min-width:1100px){
  .k-body--pin > .k-rail .k-rail-h{font-size:1.65rem}
  .k-body--pin > .k-rail .form-sub{font-size:var(--fs-small);margin:var(--sp-3) 0 0}
  .k-body--pin > .k-rail .ff :is(input,select,textarea){padding-block:7px}
  .k-body--pin > .k-rail textarea{min-height:0;height:3.4em}
  .k-body--pin > .k-rail .form-submit{margin-top:6px}
  .k-body--pin > .k-rail .form-note{margin-top:8px}
  .k-body--pin > .k-rail .form-tel{margin-top:4px}
}
@media(min-width:1100px) and (min-height:650px){.k-body--pin > .k-rail{position:sticky;top:84px}}   /* measured: the Send button ends 627px down; shorter windows get the panel in normal flow */
/* The form's two optional fields fold, so the pinned panel fits a laptop window. */
.k-rail .k-fold--form{margin:0 0 var(--sp-3)}
.k-rail .k-fold--form > summary{background:transparent;color:var(--tx-inv);border:1px solid var(--tx-inv-3);min-height:44px;width:100%;justify-content:space-between}
.k-rail .k-fold--form[open] > summary{margin-bottom:var(--sp-3)}

/* ---------- SECTIONS in the reading column ---------- */
.k-sec{margin-top:var(--k-gap)}
.k-sec > .plate,.k-band .plate{display:block;border:none;border-bottom:var(--rule-4);background:none;padding:0;margin:0 0 var(--sp-5)}
.k-sec > .plate > h2,.k-band .plate > h2{display:inline-block;background:var(--ink);color:var(--tx-inv);font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:.01em;padding:12px 18px 10px;margin:0;max-width:100%;text-wrap:balance}
.k-sec > p{font-size:1.06rem;line-height:1.65;color:#1c1c1c;max-width:var(--k-measure)}
.k-sec > p + p,.k-sec > ul + p,.k-sec > p + ul,.k-sec > .cert-row + p,.k-sec > p + .cert-row{margin-top:var(--sp-4)}
.k-sec a{text-decoration:underline;text-underline-offset:.15em}
.k-open{font-size:1.06rem;line-height:1.65;color:#1c1c1c;max-width:var(--k-measure);margin:0 0 var(--sp-5)}
.k-open > p + p{margin-top:var(--sp-3)}

/* Checklist: a real list, square ink markers. */
.k-check{list-style:none;margin:0;padding:0;max-width:var(--k-measure)}
.k-check > li{position:relative;padding:10px 0 10px 28px;font-size:1.06rem;line-height:1.5;color:#1c1c1c;border-top:1px solid var(--line)}
.k-check > li:last-child{border-bottom:1px solid var(--line)}
.k-check > li::before{content:"";position:absolute;left:2px;top:18px;width:10px;height:10px;background:var(--ink)}

/* Steps: a true sequence, so it is numbered. */
.k-steps{list-style:none;margin:0;padding:0;counter-reset:k;max-width:var(--k-measure)}
.k-steps > li{counter-increment:k;position:relative;padding:var(--sp-4) 0 var(--sp-4) 64px;border-top:1px solid var(--line);font-size:1.02rem;line-height:1.6;color:var(--tx-2)}
.k-steps > li:last-child{border-bottom:1px solid var(--line)}
.k-steps > li::before{content:counter(k);position:absolute;left:0;top:var(--sp-4);font-family:var(--font-display);font-weight:900;font-size:2.3rem;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.k-steps > li > strong:first-child{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:2px}

/* Spec list: named terms (warranties). The one ruled box in the column. */
.k-spec{list-style:none;margin:0;padding:0;border:var(--rule-2);max-width:var(--k-measure)}
.k-spec > li{padding:var(--sp-4);font-size:1rem;line-height:1.55;color:var(--tx-2)}
.k-spec > li + li{border-top:1px solid var(--line)}
.k-spec > li > strong:first-child{display:block;color:var(--ink);font-size:1.06rem}

/* Reviews in the column: quotes on the page with the gold mark, no boxes. */
.k-quotes{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:700px){.k-quotes{grid-template-columns:1fr 1fr}.k-quotes > .rv-card:first-child{grid-column:1 / -1}}
.k-quotes > .rv-card{border:none;border-left:var(--rule-gold-4);padding:2px 0 2px var(--sp-4);background:none;display:block}
.k-quotes .rv-quote{font-size:1rem;line-height:1.6;color:#1c1c1c;margin:var(--sp-2) 0 var(--sp-3)}
.k-quotes > .rv-card:first-child .rv-quote{font-size:1.2rem;line-height:1.5;color:var(--ink);max-width:var(--k-measure)}
.k-quotes .rv-attr{font-size:var(--fs-small);color:var(--tx-3)}
.k-more{margin-top:var(--sp-5)}

/* FAQ and related guides in the column. */
.k-sec > .faq-list{max-width:var(--k-measure);display:block}
.k-sec > .faq-list > .faq-item{width:auto}
.k-related > ul{list-style:none;margin:0;padding:0;columns:2 260px;column-gap:var(--sp-6);max-width:var(--k-measure)}
.k-related > ul > li{break-inside:avoid;padding:8px 0;border-top:1px solid var(--line);font-size:1rem}

/* Photo band: full width, on the off-white. */
.k-band{background:var(--paper);border-top:var(--rule-2);padding:var(--k-gap) 0}
.k-photos{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media(min-width:800px){.k-photos{grid-template-columns:1fr 1fr}}
.k-photos > .photo-frame > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ---------- FOLD: one control for "the rest" ---------- */
.k-fold{margin-top:var(--sp-4)}
.k-fold > summary{cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 var(--sp-4);border:var(--rule-2);font-weight:800;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em;list-style:none;background:var(--white);color:var(--ink)}
.k-fold > summary::-webkit-details-marker{display:none}
.k-fold > summary::after{content:"+";font-family:var(--font-display);font-weight:900;font-size:1.4rem;line-height:1}
.k-fold[open] > summary::after{content:"−"}
.k-fold[open] > summary{margin-bottom:var(--sp-4)}
.k-fold > summary:focus-visible{outline:var(--focus-ring);box-shadow:var(--focus-halo)}

/* ---------- HOME ---------- */
.k-intro{background:var(--white)}
@media(min-width:1060px){.k-home .sec-score .review-grid{grid-template-columns:repeat(3,1fr)}}

/* Service tiles: ink tiles, six shown, the rest fold. No numbers: a list of services is not a sequence. */
.k-tiles{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media(min-width:640px){.k-tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.k-tiles{grid-template-columns:repeat(3,1fr)}}
.k-tiles > .led{display:flex;flex-direction:column;background:var(--ink);color:var(--tx-inv);border:none;border-top:8px solid var(--ink);padding:var(--sp-5);min-height:0}
.k-tiles > .led--signature{border-top-color:var(--gold-action)}
.k-tiles > .led > .led-num{display:none}
.k-tiles > .led > h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.7rem;line-height:1;color:var(--tx-inv);margin:0 0 var(--sp-2)}
.k-tiles > .led > p{font-size:.95rem;line-height:1.5;color:var(--tx-inv-2);margin:0 0 var(--sp-4);flex:1 1 auto}
.k-tiles > .led > p a{color:var(--tx-inv)}
.k-tiles > .led > a{color:var(--gold-action);font-weight:800;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em;text-decoration:underline;text-underline-offset:.2em;align-self:flex-start}
.k-tiles > .led > .led-badge{align-self:flex-start;background:var(--gold-action);color:var(--ink);margin:0 0 var(--sp-3);position:static}
.k-tiles--more > .led{background:var(--white);color:var(--ink);border:var(--rule-2)}
.k-tiles--more > .led > h3{color:var(--ink);font-size:1.35rem}
.k-tiles--more > .led > p{color:var(--tx-2)}
.k-tiles--more > .led > p a,.k-tiles--more > .led > a{color:var(--ink)}

/* Credentials under the owner: license + certifications + the four logos in one row. */
.k-creds .cred{display:grid;grid-template-columns:1fr;gap:0;border:var(--rule-2)}
.k-creds .cred-cell{padding:var(--sp-5)}
.k-creds .cred-cell + .cred-cell{border-top:var(--rule-2)}
@media(min-width:800px){
  .k-creds .cred{grid-template-columns:1fr 2fr}
  .k-creds .cred-cell + .cred-cell{border-top:none;border-left:var(--rule-2)}
}
.k-creds .cert-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);align-items:center;margin-top:var(--sp-5)}
.k-creds .cert-cell{padding:var(--sp-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:72px}
.k-creds .cert-cell img{height:auto;max-height:72px;width:100%;object-fit:contain}

/* Service areas: regions as rows, cities as inline links. */
.k-areas .rv-grid{display:block;border-top:var(--rule-2)}
.k-areas .area-group{display:grid;grid-template-columns:1fr;gap:6px;padding:var(--sp-3) 0;border:none;border-bottom:1px solid var(--line);background:none}
@media(min-width:800px){.k-areas .area-group{grid-template-columns:220px 1fr;gap:var(--sp-5)}}
.k-areas .area-group > h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.25rem;line-height:1.1;margin:0;padding:0;background:none;color:var(--ink);border:none;display:block}
.k-areas .area-group .area-count{display:none}
.k-areas .area-group > ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;border:none}
.k-areas .area-group > ul > li{border:none;padding:0;margin:0;background:none}
.k-areas .area-group > ul > li > a{display:inline;padding:0;border:none;background:none;font-size:.95rem;line-height:1.7;text-decoration:underline;text-underline-offset:.15em;color:var(--ink);min-height:0}

/* FAQ on home: a plain list (4 shown, the rest fold), then the note and the two actions. */
.k-faq .faq-list{display:block;max-width:none;border-top:var(--rule-2)}
.k-faq .faq-list .faq-item{width:auto}
.k-faq .k-fold > summary{margin-top:var(--sp-4)}
.k-faq-side{margin-top:var(--sp-6);max-width:var(--k-measure)}
.k-faq-side > p{font-size:1.02rem;line-height:1.6;color:#1c1c1c}
.k-faq-side > .cta-btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0}

/* Guides: a compact two-column list. */
.k-guides .rv-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule-2)}
@media(min-width:800px){.k-guides .rv-grid{grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}}
.k-guides .rv-grid > a.card{border:none;border-bottom:1px solid var(--line);padding:var(--sp-3) 0;background:none;display:block}
.k-guides .rv-grid > a.card > h3{font-family:var(--font-body);font-weight:800;text-transform:none;font-size:1.05rem;line-height:1.3;margin:0 0 2px;letter-spacing:0}
.k-guides .rv-grid > a.card > p{font-size:.92rem;line-height:1.5;color:var(--tx-2);margin:0}