/* HomeIsSecure, human redesign 2026-10-13: the home page. Markup: src/components/content/HomeContent.tsx and
   JobTickets.tsx (the closing panel, section 8, is in frame.css). ART-DIRECTION.md section 4; every section has its
   own composition: 0 hero row  1 crew lineup  2 seasons  3 the route  4 how we work  5 manual shelf  6 hang-tag plans
   7 ledger rows  9 job-ticket fan. Desktop compositions from 1200 px; each one is restacked for phones.
   Type (review 2026-10-13): four text sizes, each with a job: 15 meta, dates, captions, card lines; 17 card and list
   body; 18 body; 20 (weight 400) every section intro (.lead). Michroma stamped tags 12 px on desktop and 11 px on
   phones (11 px also inside dense cards, where 12 px does not fit: the ticket meta, whose category names come from
   the admin, the season card's trade grid, where HANDYMAN overflows its 143 px cell, and the closing panel's crew
   tags in frame.css); never under 11 px.
   All loaded on every page: rules use home-only class names. Two legacy rules at the end stay for the season dial
   drawing of the inner pages (.wheel, .wheel .wc). */

.h-home main { overflow-x: clip; }

/* ---------------------------------------------------------------- 0 hero: three photos in a staggered row, the h1
   crossing them on flat white label blocks (re-set after the cross-site check: nothing touches, no frames) */
.hs-hero { padding: 32px 0 0; }
/* the photos and the h1 stand in front of the plate */
.hs-hero > .wrap { position: relative; z-index: 1; }
.hh-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: start;
}
.hh-row > figure { margin: 0; }
.hh-row > .hh-b { grid-column: 1 / 5; grid-row: 1; height: 520px; }
.hh-row > .hh-a { grid-column: 5 / 10; grid-row: 1; height: 440px; margin-top: 80px; }
/* the shingles stand on the plate too, their foot level with the other two (2026-10-14: 360 px tall, they floated
   above the plate while the contractor and the house stood on it, and the right of the hero felt unanchored) */
.hh-row > .hh-c { grid-column: 10 / 13; grid-row: 1; height: 496px; margin-top: 24px; }
/* the band crosses the lower part of the row and its second line breaks out below it: higher, it would hide the
   contractor's face (B) or the two houses (A); the photos' subjects stay readable above it */
.hh-h1 {
  --col: calc((100% + var(--gut)) / 12);   /* one column step of the row */
  position: absolute;
  z-index: 2;
  top: 376px;
  left: 0;
  right: 0;
  margin: 0;
  /* line 2 starts at column 3, line 1 one column further left (column 2) */
  padding-left: calc(2 * var(--col));
  text-indent: calc(-1 * (100% + var(--gut)) / 10);   /* % of the content box (row - 2 columns): one column */
  color: var(--charcoal);
  /* 76 px from 1320 px (the full 1240 px row), down to 68 px at 1200 px, so the first line's label keeps clear of the
     shingles beside it while the row narrows (at 76 px it would end 1 px from them at 1200 px) */
  font-size: clamp(68px, calc(68px + (100vw - 1200px) / 15), var(--t-h1));
  font-weight: 900;
  line-height: 1.17;
  letter-spacing: -0.025em;
  text-wrap: nowrap;
}
/* one flat white label per line, no fold, no shadow: the padding and the background repeat on every line */
.hh-lbl { padding: 6px 18px 7px; background: var(--white); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* the hero's kick-plate: a charcoal inset plate rising 80 px behind the feet of the photos (2026-10-14: at 110 px the
   contractor's dark desk ran into the charcoal); its copy starts under the h1's second line, which crosses onto it */
.hh-plate { margin-top: -80px; }
.hh-under {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: start;
  padding-top: 164px;
  padding-bottom: 48px;
}
.hh-lede { grid-column: 1 / span 6; max-width: 52ch; margin: 0; color: var(--kraft); font-size: var(--t-lede); line-height: 1.5; }
/* the button and the link stand level with the lede's first line; the starting price is a quiet line under them */
.hh-acts { grid-column: 8 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.hh-from { flex-basis: 100%; max-width: none; margin: -4px 0 0; }
/* 32 px tall on the plate, so the trade tags stay in the first screen; 44 px below 1200 px (touch) */
.hh-acts .hh-from a, .hh-acts .hh-from a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--kraft);
  font: 600 16px / 1.3 var(--f-sans);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.hh-acts .hh-from a:hover { color: var(--white); text-decoration-color: var(--white); }
.hh-tags { grid-column: 1 / -1; margin-top: 22px; }
.hh-tags .pi { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- 1 six trades: the crew lineup */
.hs-trades { padding: 128px 0 128px; }
.ht-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin-bottom: 44px; }
.ht-head h2 { grid-column: 1 / span 7; margin: 0 0 18px; font-size: var(--t-h2); }
.ht-head .lead { grid-column: 1 / span 7; max-width: 54ch; margin: 0; }
.br-ph { display: none; }
.sq { display: block; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--charcoal); }
.sq.on { background: var(--charcoal); }
.sq-row { display: flex; gap: 4px; }
/* six equal portraits joined edge to edge by 1 px white seams; square outer corners */
.lineup { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; }
.lineup > li { display: flex; min-width: 0; max-width: none; margin: 0; }
.lu, .lu:visited { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; background: var(--tan); color: var(--charcoal); text-decoration: none; }
/* the photo window (shown first; the strip comes first in the markup so the name is read first) */
.lu-ph { position: relative; order: -1; display: block; aspect-ratio: 3 / 5; overflow: hidden; background: var(--kraft); }
/* each portrait's crop: the face point stays put while the photo is scaled around it (--z), then moved (--tx, --ty) */
.lu-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--z, 1));
  transition: transform 0.6s ease;
}
.lu:hover .lu-img, .lu:focus-visible .lu-img { transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--z, 1) * 1.045)); }
.lu-strip { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 14px 16px 16px; background: var(--tan); }
.lu-strip .tag { min-height: 26px; padding: 4px 8px 3px 9px; font-size: var(--t-tag); }
.lu-strip .tag .pi { width: 13px; height: 13px; }
.lu-name { min-height: 2.24em; margin: 10px 0 12px; font: 800 20px / 1.12 var(--f-sans); letter-spacing: -0.02em; }
/* the busy seasons at the foot of every strip: the four squares (spring to winter) and the same in words */
.lu-busy { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: auto; }
.lu-bw { font-size: 15px; font-weight: 600; line-height: 1.25; }
.lu-line-s { display: none; }
/* hover: the trade's line and "Explore" rise over the foot of the photo, joined to the strip */
.lu-more {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px 10px;
  background: var(--tan);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.lu:hover .lu-more, .lu:focus-visible .lu-more { transform: translateY(0); }
.lu-line { font-size: 17px; line-height: 1.38; }
.lu-go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--charcoal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lu-go .pi { width: 16px; height: 16px; }
.lu:hover .lu-name, .lu:focus-visible .lu-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* focus: a charcoal and white ring drawn above the photo and the strip */
.lu::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lu:focus-visible { outline: none; }
.lu:focus-visible::after { box-shadow: inset 0 0 0 3px var(--charcoal), inset 0 0 0 6px var(--white); }
/* the key to the squares, right under the row it explains */
.ht-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-top: 16px; }
.ht-key-l { margin: 0; font-size: 15px; font-weight: 700; }
.ht-key .tag-row { gap: 6px; }
.ht-key .tag { gap: 7px; padding: 4px 8px 3px 9px; font-size: var(--t-tag); }
.ht-key .tag .sq { width: 10px; height: 10px; }

/* ---------------------------------------------------------------- 2 seasons: dial and tabs, the photo swaps */
.hs-seasons { padding: 96px 0; }
.ss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.ss-side { grid-column: 1 / span 5; padding: 8px 40px 0 0; }
.ss-side h2 { margin: 0 0 18px; font-size: var(--t-h2); }
.ss-side .lead { max-width: 40ch; margin: 0 0 32px; }
/* the dial: a selector knob (four ring quadrants, a charcoal knob with a tan pointer at the season shown) with its
   stamped label plate under it */
.ss-dial { display: flex; flex-direction: column; align-items: center; width: 300px; margin: 0 0 28px; }
.ss-dial .wheel { display: block; width: 300px; height: 300px; overflow: visible; }
.ss-dial .wheel .wq path { fill: var(--charcoal); stroke: var(--kraft); stroke-width: 3; transition: fill 0.2s ease; }
/* the season names: 8.6 units of the 200-unit dial = 12.9 px at 300 px, 11.2 px at the 260 px of tablets and phones */
.ss-dial .wheel .wq text { fill: var(--kraft); font: 400 8.6px var(--f-tag); letter-spacing: 0.02em; pointer-events: none; }
.ss-dial .wheel .wq:hover path { fill: #3b3833; }
.ss-dial .wheel .wq.on path { fill: var(--tan); }
.ss-dial .wheel .wq.on text { fill: var(--charcoal); }
.ss-dial .wheel .wc { fill: var(--charcoal); stroke: none; }
.ss-dial .wheel .wp { display: none; stroke: var(--tan); stroke-width: 5; stroke-linecap: round; }
.ss-dial .wheel .wq.on .wp { display: inline; }
.ss-dial .wheel .wcap { fill: var(--kraft); }
.ss-dial-c { gap: 0.6em; margin: 16px 0 0; }
.ss-dial-c b, .ss-dial-c span { font-weight: 400; }
/* the four tabs: large stamped tags, two by two, the season's name and its months */
.hs-seasons .st-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; border: 0; }
.hs-seasons .st-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  margin: 0;
  padding: 0 14px 0 16px;
  border: 1.5px solid var(--charcoal);
  border-radius: 3px;
  background: transparent;
  color: var(--charcoal);
  font: 400 13px / 1 var(--f-tag);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.hs-seasons .st-m { color: var(--muted); font-size: var(--t-tag); letter-spacing: 0.06em; white-space: nowrap; }
/* the name and the months share one line only where the tab is 227 px wide (from 1366 px; "SUMMER JUN–AUG" needs
   223 px at 12 px); narrower, the months go under the name, as on tablets and phones */
@media (max-width: 1365.98px) {
  .hs-seasons .st-b { flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; min-height: 64px; padding: 10px 14px 10px 16px; }
}
.hs-seasons .st-b:hover { background: rgba(255, 255, 255, 0.6); text-decoration: none; }
.hs-seasons .st-b.on, .hs-seasons .st-b[aria-selected="true"] { border-color: var(--charcoal); background: var(--charcoal); color: var(--kraft); font-weight: 400; }
.hs-seasons .st-b.on .st-m, .hs-seasons .st-b[aria-selected="true"] .st-m { color: var(--on-dark-muted); }
/* the stage keeps the height of its tallest season, so switching seasons never moves the page: the panels share one
   grid cell, and the hidden ones keep their space without being shown (visibility removes them from reading too) */
.ss-stage { grid-column: 6 / -1; display: grid; }
.ss-stage > .stp { grid-area: 1 / 1; }
.ss-stage > .stp[hidden] { display: block !important; visibility: hidden; }
.stp { position: relative; }
.stp-ph { aspect-ratio: 3 / 2; margin: 0; }
/* the card overlaps the photo's foot only as far as the houses allow (they stand in the upper and middle bands) */
.stp-card { position: relative; z-index: 1; width: min(620px, 88%); margin: -118px 0 0 -40px; padding: 28px 30px 28px; }
.stp-line { max-width: 24ch; margin: 0 0 20px; font: 800 24px / 1.15 var(--f-sans); letter-spacing: -0.02em; }
/* the right column is a little wider, so two trade tags ("HANDYMAN" the longest) share a row at 11 px */
.stp-cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; }
.stp-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -0.005em; }
.ck-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ck-list li { display: flex; align-items: flex-start; gap: 10px; max-width: none; margin: 0; font-size: 17px; line-height: 1.4; }
.ck-list .ck { margin-top: 2px; }
/* the season's jobs are numbered in Michroma like lines on a to-do sheet, set on the first line's baseline (check
   boxes stay only in the plan tags and the closing panel: brand-uniqueness check 2026-10-14) */
.ck-list li:has(> .ck-n) { align-items: baseline; }
.ck-list .ck-n { flex: none; min-width: 26px; color: var(--charcoal); font: 400 12px / 1 var(--f-tag); letter-spacing: 0.04em; }
/* the busy trades as a two-column grid of equal tags (11 px: two tags share a 266 px column) */
.stp-trades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stp-trades .tag { gap: 6px; width: 100%; min-height: 26px; padding: 4px 7px 3px 8px; font-size: 11px; letter-spacing: 0.1em; }
.stp-trades .tag .pi { width: 13px; height: 13px; }
.stp-next { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.stp-next h3 { margin-bottom: 8px; }
.stp-next ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stp-next li { max-width: none; margin: 0; text-wrap: balance; }
.stp-next a { font-size: 15px; font-weight: 600; text-decoration-thickness: 2px; }
/* in-between widths (16 Oct): at 1200-1319 px the season card is narrower than its 620 px (88 % of the stage), so the
   trade tags are 128-142 px wide, and "HANDYMAN" (144 px with its icon at 0.1em) ran through the tag's right border
   (+8 px at 1200 px). In that range the trades column takes a little more of the card and the tags take the phones'
   tighter spacing (as below 390 px), so the longest name keeps its padding */
@media (min-width: 1200px) and (max-width: 1319.98px) {
  .stp-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .stp-trades .tag { gap: 5px; padding-inline: 6px 5px; letter-spacing: 0.04em; }
}

/* ---------------------------------------------------------------- 3 from a map to a full route */
.hs-route { padding: 128px 0 72px; }
/* a stacked head like the lineup's (h2, then the lede and the link, columns 1-6): the guides and the questions keep
   the split head, so four sections no longer open the same way */
.rt-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin-bottom: 40px; }
.rt-head h2 { grid-column: 1 / span 6; margin: 0 0 18px; font-size: var(--t-h2); }
.rt-head .lead { grid-column: 1 / span 6; max-width: 54ch; margin: 0; }
.rt-head .go { grid-column: 1 / span 6; justify-self: start; margin-top: 10px; }
.rt-map { position: relative; aspect-ratio: 16 / 7.6; }
.rt-photo { position: absolute; inset: 0; margin: 0; }
.rt-photo::after { content: ""; position: absolute; inset: 0; background: rgba(36, 34, 31, 0.22); }
.rt-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--photo-r); pointer-events: none; }
.rt-line path { fill: none; vector-effect: non-scaling-stroke; }
/* a solid sky-blue chalk line on a soft dark edge (cross-site check 2026-10-13: no dashes; a dashed route through
   numbered stops is MyHomeZilla's tools map) */
.rt-line .rt-under { stroke: rgba(36, 34, 31, 0.5); stroke-width: 8.5; stroke-linecap: round; }
.rt-line .rt-chalk { stroke: var(--sky); stroke-width: 3.5; stroke-linecap: round; }
.rt-stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rt-stop { position: absolute; left: var(--x); top: var(--y); max-width: none; margin: 0; }
.rt-mk {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--charcoal);
  border-radius: 4px;
  background: var(--tan);
  color: var(--charcoal);
  font: 400 18px / 1 var(--f-tag);
  transform: translate(-50%, -50%);
}
.rt-card { position: absolute; left: -24px; width: 252px; padding: 18px 20px 20px; }
.rt-below .rt-card { top: 36px; }
.rt-above .rt-card { bottom: 36px; }
.rt-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.15; }
.rt-card p { margin: 0; font-size: 17px; line-height: 1.45; }

/* ---------------------------------------------------------------- 4 how we work: "work order over the porch"
   (re-set 2026-10-14 after the brand-uniqueness check: the porch photo left with the h2 and a checklist right was the
   old HomeIsSecure's and the live SecureYrHome's layout; a full-width photo strip under the heading and three equal
   01/02/03 columns had been rejected before). The heading row is a title block: the h2, and beside it, behind a
   charcoal rule, the dark "Not a contractor" stamp over its sentence; the intro under them. Under it the porch photo
   in columns 6-12 and, laid over its left edge, the three commitments as one kraft work-order sheet (the brand's
   dog-ear card, paper grain): a stacked list with hanging Michroma numerals 01-03 and charcoal hairlines between the
   items. The photo takes the sheet's height plus the sheet's offsets, so the sheet always sits inside the photo's
   height and the photo shows above and below it */
.hs-how { padding: 72px 0 128px; }
.wk-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: last baseline;
  column-gap: 28px;
  row-gap: 18px;
  margin-bottom: 40px;
}
.wk-head h2 { margin: 0; font-size: var(--t-h2); }
.wk-not { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: none; margin: 0; padding: 2px 0 2px 28px; border-left: 1.5px solid var(--charcoal); }
.wk-not .tag { font-size: var(--t-tag); }
.wk-say { color: var(--charcoal); font: 700 18px / 1.3 var(--f-sans); letter-spacing: -0.005em; }
.wk-head .lead { grid-column: 1 / -1; max-width: 46ch; margin: 0; }
.wk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.wk-photo { grid-column: 6 / -1; grid-row: 1; min-height: 560px; margin: 0; }
/* the porch photo is dark and cool at its source: a light warm lift (the brief's warm grade) */
.wk-photo img { position: absolute; inset: 0; filter: brightness(1.12) saturate(1.06) sepia(0.06); }
/* the sheet: columns 1-6 and 40 px further, over the photo's left edge (the man and his mug stay clear of it) */
.hs-how .wk-sheet {
  --f: 28px;
  z-index: 1;
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: start;
  margin: 48px -40px 48px 0;
  padding: 4px 40px 8px;
  list-style: none;
  background-image: var(--grain);
}
.wk-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; max-width: none; margin: 0; padding: 24px 0; }
.wk-item + .wk-item { margin-top: 0; border-top: 1px solid var(--ink-20); }
.wk-n { grid-row: 1 / span 2; color: var(--charcoal); font: 400 30px / 1 var(--f-tag); letter-spacing: -0.02em; }
.wk-item h3 { grid-column: 2; margin: 0 0 8px; font-size: var(--t-h3); }
.wk-item p { grid-column: 2; max-width: none; margin: 0; font-size: 17px; line-height: 1.55; }
/* 1200-1279 px: the sheet reaches 40 px further over the photo, so its lines keep the 1280 px measure and the photo
   does not grow taller than at 1280 (at 1200 px it measured 784 px) */
@media (min-width: 1200px) and (max-width: 1279.98px) { .hs-how .wk-sheet { margin-right: -80px; } }

/* ---------------------------------------------------------------- 5 home care guides: the manual shelf */
.hs-guides { padding: 92px 0 76px; }
/* top-aligned like the questions' head (fresh-eyes review 2026-10-14) */
.gs-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-bottom: 60px; }
.gs-head h2 { grid-column: 1 / span 6; margin: 0; color: var(--white); font-size: var(--t-h2); }
.gs-intro { grid-column: 8 / -1; }
.gs-intro .lead { margin: 0 0 8px; color: var(--on-dark-muted); }
.shelf { --cols: 182px repeat(7, 140px); }
/* devices pass 2026-10-14: the eight booklets need 1,232 px; from 1200 to 1365 px the column is narrower, and the last
   booklet ran past the panel's edge, where it was cut off. There the booklets share the width in the same proportions */
@media (min-width: 1200px) and (max-width: 1365.98px) { .shelf { --cols: minmax(0, 182fr) repeat(7, minmax(0, 140fr)); } }
.books, .shelf-labels { display: grid; grid-template-columns: var(--cols); justify-content: space-between; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.books { align-items: end; }
.bk { height: var(--bh); max-width: none; margin: 0; }
.bk a, .bk a:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 8px 12px 12px;
  border-radius: 3px 6px 6px 3px;
  background: var(--kraft) var(--grain);
  box-shadow: inset 5px 0 0 rgba(36, 34, 31, 0.14), inset -1px 0 0 rgba(36, 34, 31, 0.1);
  color: var(--charcoal);
  text-decoration: none;
  transition: transform 0.22s ease;
}
.bk a:hover, .bk a:focus-visible { transform: translateY(-12px); }
/* the shelf stands on a charcoal panel, whose links turn white on hover (brand.css .on-dark a:hover): the booklets'
   kraft covers keep their charcoal print */
.hs-guides .bk a:hover, .hs-guides .bk a:focus-visible, .hs-guides .bk a:active { color: var(--charcoal); }
.bk a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.bk-win { display: block; flex: none; height: 55%; overflow: hidden; border-radius: 3px; }
.bk-lead .bk-win { height: 50%; }
.bk-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-code { margin: 10px 0 4px; color: var(--muted); font: 400 var(--t-tag) / 1 var(--f-tag); letter-spacing: var(--track-tag); }
.bk-t { font: 800 16px / 1.15 var(--f-sans); letter-spacing: -0.015em; }
.bk a:hover .bk-t { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.bk-lead .bk-t { font-size: 20px; }
.bk-line { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.bk-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bk-go .pi { width: 14px; height: 14px; }
.plank { display: block; height: 7px; margin-top: -1px; border-radius: 2px; background: var(--tan); box-shadow: 0 12px 18px -10px rgba(0, 0, 0, 0.7); }
.shelf-labels { margin-top: 16px; }
.shelf-labels li {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(230, 215, 188, 0.4);
  color: var(--kraft);
  font: 600 15px / 1.25 var(--f-sans);
}
.shelf-labels li::before, .shelf-labels li::after { content: ""; position: absolute; top: -5px; width: 1px; height: 9px; background: rgba(230, 215, 188, 0.6); }
.shelf-labels li::before { left: 0; }
.shelf-labels li::after { right: 0; }
.shelf-labels .sl-3 { grid-column: span 3; }

/* ---------------------------------------------------------------- 6 plans: three hang-tags on a rail, Basic and
   Premium kraft; Standard hangs lowest, a white tag outlined in charcoal with a tan eyelet and the stamped
   "Recommended" (never a dark middle plan) */
.hs-plans { padding: 128px 0 120px; }
/* the head is centred over the symmetrical rail (the route and the guides open with a split head) */
.pl-head { margin-bottom: 52px; text-align: center; }
.pl-head h2 { max-width: 20ch; margin: 0 auto; font-size: var(--t-h2); }
.pl-head .lead { max-width: 58ch; margin: 16px auto 0; text-wrap: balance; }
.pl-rail { position: relative; display: block; height: 5px; border-radius: 3px; background: var(--charcoal); }
.pl-rail::before, .pl-rail::after { content: ""; position: absolute; top: -9px; width: 10px; height: 23px; border-radius: 2px; background: var(--charcoal); }
.pl-rail::before { left: 0; }
.pl-rail::after { right: 0; }
.pl-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-items: start; margin: 0; padding: 0 28px; list-style: none; }
.ht { position: relative; max-width: none; margin: 0; padding-top: var(--len); }
.ht.p1 { --len: 34px; }
.ht.p2 { --len: 92px; }
.ht.p3 { --len: 56px; }
.ht-string { position: absolute; z-index: 2; top: 0; left: 50%; width: 1.5px; height: calc(var(--len) + 30px); margin-left: -0.75px; background: var(--charcoal); }
.ht-card {
  position: relative;
  padding: 54px 32px 32px;
  border-radius: 10px;
  background: var(--kraft) var(--grain);
  color: var(--charcoal);
  clip-path: polygon(38px 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 100%, 0 38px);
}
.ht-hole { position: absolute; top: 22px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(36, 34, 31, 0.16), inset 0 1px 2px rgba(36, 34, 31, 0.4); }
/* the recommended tag: a white face outlined 2 px in charcoal (review 2026-10-14: as a kraft tag with a thin outline
   it looked like the other two from a distance). The card is charcoal and the white face 2 px inside it follows the cut
   corners, which a border would not; its hole is reinforced with a tan eyelet */
.ht.is-rec .ht-card { isolation: isolate; background: var(--charcoal); }
.ht.is-rec .ht-card::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 8px;
  background: var(--white);
  clip-path: polygon(36.8px 0, calc(100% - 36.8px) 0, 100% 36.8px, 100% 100%, 0 100%, 0 36.8px);
}
.ht.is-rec .ht-hole { box-shadow: 0 0 0 5px var(--tan), 0 0 0 6.5px rgba(36, 34, 31, 0.35), inset 0 1px 2px rgba(36, 34, 31, 0.4); }
.ht-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ht-card h3.tag { margin: 0; font-size: var(--t-tag); }
/* the "Recommended" stamp stays 12 px on phones too */
.ht-rec { margin: 0; font-size: 12px; }
.ht-suits { margin: 14px 0 0; color: var(--muted); font-size: 15px; font-weight: 700; text-align: center; }
.ht-price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 16px 0 0; }
.ht-price b { font: 400 52px / 1 var(--f-tag); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ht-price s { color: var(--muted); font: 400 17px / 1 var(--f-tag); text-decoration-thickness: 2px; }
/* in-between widths (16 Oct): "$799" with "$1499" is 295 px at 52 px and ran up to 17 px past the tag's text column at
   1200-1300 px (and at 992-1030 px at 42 px, 375-395 px at 46 px). The tag is a size container and the price takes its
   size from the tag's text column (100cqi): never larger than the size set for the width, smaller only where the line
   would not fit (from 1320 px 52 px as before). Phones below 375 px keep 36 px with the old price free to wrap */
.ht-card { container-type: inline-size; }
.ht-price b { font-size: min(52px, (100cqi - 100px) / 3.86); }
.ht-per { margin: 8px 0 18px; color: var(--muted); font-size: 15px; text-align: center; }
.ht-about { max-width: 34ch; margin: 0 auto 24px; font-size: 17px; line-height: 1.5; text-align: center; }
.ht-card .h-btn { display: flex; width: 100%; }
/* phones fold each feature list behind "What's included (n)" (see the phone rules); from 768 px, and on a page
   without scripts, the toggle is hidden and every list is shown */
.ht-more { display: none; }
@media (min-width: 768px) { .ht-fold.collapse:not(.show) { display: block; } }
html:not(.js) .ht-fold.collapse:not(.show) { display: block; }
.ht-feats { display: grid; gap: 11px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1.5px dashed rgba(36, 34, 31, 0.35); list-style: none; }
.ht-feats li { display: flex; align-items: flex-start; gap: 11px; max-width: none; margin: 0; font-size: 17px; line-height: 1.4; }
.ht-feats .ck { margin-top: 2px; }
.pl-more { max-width: none; margin: 40px 0 0; text-align: center; }

/* ---------------------------------------------------------------- 7 questions: heading above, full-width ledger rows,
   on white (2026-10-14: as a kraft board it sat 20 px above the kraft closing panel and the two merged into one long
   beige block, which took the closing Join Us's emphasis). The plans end with 120 px, so 16 px here gives about the
   route-to-how gap */
.hs-faq { padding: 16px 0 120px; }
/* both columns start at the top (fresh-eyes review 2026-10-14: bottom-aligned, the h2 sat about 120 px below the
   intro's first line and read second) */
.fq-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-bottom: 44px; }
.fq-head h2 { grid-column: 1 / span 6; margin: 0; font-size: var(--t-h2); }
.fq-intro { grid-column: 8 / -1; }
.fq-intro .lead { max-width: 36ch; margin: 0 0 14px; }
.fq-contact { display: flex; flex-wrap: wrap; gap: 4px 28px; max-width: none; margin: 0 0 4px; }
/* phone and email: the label is part of each link (44 px tall), the value underlines on hover */
.fq-c, .fq-c:visited { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--charcoal); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.fq-cl { color: var(--muted); font: 400 var(--t-tag) / 1.2 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.fq-v { overflow-wrap: anywhere; }
.fq-c:hover { color: var(--charcoal); text-decoration: none; }
.fq-c:hover .fq-v { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ledger { border-top: 2px solid var(--charcoal); }
.ledger .fq { border-bottom: 1px solid var(--ink-20); }
.ledger .fq-q {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  padding: 20px 0;
  font: 700 20px / 1.3 var(--f-sans);
  letter-spacing: -0.01em;
}
.ledger .fq-q:hover > span { text-decoration: none; }
.ledger .fq-q:hover .fq-t { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ledger .fq-tag { justify-self: start; min-height: 26px; padding: 4px 8px 3px 9px; font-size: var(--t-tag); }
.ledger .fq-q > .fq-pm { position: relative; width: 34px; height: 34px; margin: 0; border: 1.5px solid var(--charcoal); border-radius: 3px; transition: background-color 0.18s ease; }
.ledger .fq-q > .fq-pm::before, .ledger .fq-q > .fq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--charcoal); transform: translate(-50%, -50%); transition: transform 0.18s ease; }
.ledger .fq-q > .fq-pm::before { right: auto; width: 13px; height: 2px; }
.ledger .fq-q > .fq-pm::after { bottom: auto; width: 2px; height: 13px; }
.ledger .fq.open .fq-pm, .ledger .fq-q[aria-expanded="true"] > .fq-pm { background: var(--charcoal); }
.ledger .fq.open .fq-pm::before, .ledger .fq-q[aria-expanded="true"] > .fq-pm::before { background: var(--kraft); }
.ledger .fq.open .fq-pm::after, .ledger .fq-q[aria-expanded="true"] > .fq-pm::after { transform: translate(-50%, -50%) scaleY(0); }
.ledger .fq-a { max-width: none; padding: 0 58px 28px 196px; }
.ledger .fq-a p { max-width: 64ch; margin: 0; font-size: 17px; line-height: 1.6; }

/* ---------------------------------------------------------------- 8 the closing panel (frame.css): the page's last
   kraft board before the notes, on its own after the white questions section, so the panel rhythm reads kraft seasons,
   charcoal guides, kraft closing panel, kraft footer, with white sections between them */

/* ---------------------------------------------------------------- 9 notes from the job site: the ticket fan */
.hs-notes { padding: 128px 0 112px; }
.nt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.nt-side { grid-column: 1 / span 4; padding: 30px 20px 0 0; }
.nt-side h2 { margin: 0 0 16px; font-size: var(--t-h2); }
.nt-side .lead { margin: 0 0 18px; }
/* the fan is a size container, so each ticket's offset and the width of its always-visible strip (--step) are measured
   against the fan itself. Each ticket keeps its own height; hover or focus lifts a ticket without changing the order
   (a ticket brought to the front would slice the words of the one under it). The two covered tickets have kraft
   fronts, so the edges of the stack read. */
.fan { --w: 360px; --step: calc((100cqw - var(--w)) / 2); --down: 30px; grid-column: 5 / -1; display: grid; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.tk { grid-area: 1 / 1; align-self: start; display: flex; width: var(--w); max-width: none; margin: 0; transition: transform 0.2s ease; }
.tk-1 { z-index: 1; margin-bottom: calc(2 * var(--down)); }
.tk-2 { z-index: 2; margin-left: var(--step); margin-top: var(--down); margin-bottom: var(--down); }
.tk-3 { z-index: 3; margin-left: calc(2 * var(--step)); margin-top: calc(2 * var(--down)); }
.tk:hover, .tk:focus-within { transform: translateY(-8px); }
.tk-card { position: relative; display: flex; flex-direction: column; flex: 1; }
.tk-1 .tk-card, .tk-2 .tk-card { background: var(--kraft); }
.tk-img { display: block; height: 196px; margin: 10px 10px 0; overflow: hidden; border-radius: 6px; }
/* the article photos come from the admin: a crop weighted to the top (photos pass 2026-10-14), so the head of a person
   in a future article's photo is not cut off by the wide ticket frame */
.tk-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.tk-body { display: flex; flex-direction: column; flex: 1; max-width: calc(var(--step) - 4px); padding: 16px 18px 22px; }
.tk-3 .tk-body { max-width: none; }
.tk-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.tk-meta .tag { min-height: 24px; padding: 3px 7px 2px 8px; font-size: 11px; }
/* in-between widths (16 Oct): at 1200-1270 px the covered tickets' strips are 149-172 px wide, narrower than a long
   topic tag ("SEASONAL CARE" 173 px, "HOME SYSTEMS" 168 px), which ran under the next ticket. The tag may wrap inside
   its strip, between words (the topics come from the admin) */
.tk-meta .tag { max-width: 100%; white-space: normal; }
.tk-body h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.18; }
.tk-body h3 a { color: var(--charcoal); text-decoration: none; }
.tk-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tk-card:hover h3 a { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tk-body h3 a:focus-visible { outline: none; }
.tk-card:has(h3 a:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: -3px; }
.tk-ex { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.tk-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.tk-more .pi { width: 16px; height: 16px; }

/* ================================================================= tablets and phones */
@media (max-width: 1199.98px) {
  /* hero: the photos side by side (4:5, 8 px apart; the shingles from 760 px up), the h1 on white under them */
  .hs-hero { padding-top: 24px; }
  .hh-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
  .hh-row > .hh-b, .hh-row > .hh-a, .hh-row > .hh-c { grid-row: 1; grid-column: auto; height: auto; margin: 0; aspect-ratio: 4 / 5; }
  .hh-h1 { position: static; grid-column: 1 / -1; grid-row: 2; margin-top: 36px; padding: 0; text-indent: 0; font-size: clamp(44px, 6.4vw, 68px); line-height: 1.02; text-wrap: balance; }
  .hh-lbl { padding: 0; background: none; }
  .br-d { display: none; }
  /* no plate below 1200 px: the lede, the button, the link and the tags sit on white under the h1 (the plate's
     charcoal and on-dark colours are undone here) */
  .hh-plate { margin-top: 0; background: none; color: var(--charcoal); }
  .hh-plate .hh-lede { color: var(--charcoal); }
  .hh-plate .go, .hh-plate .go:visited, .hh-plate .go:hover { color: var(--charcoal); }
  .hh-plate .go:hover { text-decoration-color: var(--charcoal); }
  .hh-acts .hh-from a, .hh-acts .hh-from a:visited, .hh-acts .hh-from a:hover { min-height: 44px; color: var(--charcoal); }
  .hh-acts .hh-from a:hover { text-decoration-color: var(--charcoal); }
  .hh-plate a.tag, .hh-plate a.tag:visited { color: var(--charcoal); }
  .hh-plate a.tag:hover { background: var(--charcoal); color: var(--white); }
  .hh-plate .h-btn { --plate-c: var(--charcoal); }
  .hh-plate :focus-visible, .hh-plate .h-btn:focus-visible { outline-color: var(--charcoal); }
  .hh-under { grid-template-columns: minmax(0, 1fr); padding-top: 22px; padding-bottom: 0; }
  .hh-lede, .hh-acts, .hh-tags { grid-column: 1; }
  .hh-lede { max-width: 56ch; }
  .hh-acts { margin-top: 28px; }
  .hh-tags { margin-top: 28px; }
  .hs-trades { padding-top: 104px; }
  /* lineup: three by two */
  .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lu-ph { aspect-ratio: 4 / 5; }
  /* photos pass 2026-10-14 (owner rule: no head cut): in the wider 4:5 window HVAC's crop moves to 53 %, so the cap
     stays whole and the out-of-focus colleague at the photo's right edge stays out (the 3:5 crop is FACE in
     HomeContent.tsx). Devices pass 2026-10-15: the hover zoom (x1.045) grows from the window's right edge here, so the
     cap's brim, 1 px from that edge, stays in the window while the photo zooms */
  .lineup .lu-img[src*="pexels-photo-7681031."] { object-position: 53% 37.5% !important; transform-origin: 100% 37.5% !important; }
  .ht-head h2, .ht-head .lead { grid-column: 1 / -1; }
  /* seasons */
  .ss-side { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: center; padding: 0; }
  .ss-side h2, .ss-side .lead { grid-column: 1 / -1; }
  .ss-dial { width: 260px; margin: 0; }
  .ss-dial .wheel { width: 260px; height: 260px; }
  /* the tabs stack the season's name over its months (the rule under the tabs, from 1366 px down) */
  .ss-stage { grid-column: 1 / -1; margin-top: 40px; }
  .stp-card { margin: -120px 0 0 24px; width: min(620px, calc(100% - 48px)); }
  /* route */
  .rt-head h2, .rt-head .lead, .rt-head .go { grid-column: 1 / -1; }
  .rt-map { aspect-ratio: auto; }
  .rt-photo { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .rt-line { display: none; }
  .rt-stops { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; }
  .rt-stop { position: relative; left: auto; top: auto; display: flex; align-items: flex-start; gap: 16px; }
  .rt-mk { position: relative; flex: none; transform: none; }
  .rt-card { position: relative; left: auto; top: auto !important; bottom: auto !important; width: auto; flex: 1; }
  /* how we work, stacked: the photo (16:9) set in from the left and the sheet over its bottom edge, short of the right
     edge, so the two still overlap on a diagonal, photo up and right, sheet down and left */
  .wk { grid-template-columns: minmax(0, 1fr); }
  .wk-photo { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 16 / 9; margin-left: 16%; }
  .hs-how .wk-sheet { grid-column: 1; grid-row: 2; margin: -96px 16% 0 0; }
  /* shelf scrolls */
  .gs-head h2 { grid-column: 1 / -1; margin-bottom: 18px; }
  .gs-intro { grid-column: 1 / -1; }
  .shelf-scroll { margin: 0 calc(-1 * (var(--pad) - var(--inset))); padding: 16px calc(var(--pad) - var(--inset)) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(var(--pad) - var(--inset)); scrollbar-width: thin; }
  .shelf { width: max-content; --cols: 200px repeat(7, 160px); }
  .books, .shelf-labels { justify-content: start; column-gap: 16px; }
  .bk { scroll-snap-align: start; }
  /* plans */
  .pl-tags { gap: 20px; padding: 0 12px; }
  .ht-card { padding: 52px 22px 26px; }
  .ht-price b { font-size: 42px; font-size: min(42px, (100cqi - 100px) / 3.86); }
  /* questions */
  .fq-head h2 { grid-column: 1 / span 6; }
  .fq-intro { grid-column: 7 / -1; }
  /* notes */
  .nt-side { grid-column: 1 / -1; padding: 0 0 36px; }
  .fan { grid-column: 1 / -1; --w: 340px; }
}

@media (max-width: 991.98px) {
  .pl-head h2, .pl-head .lead { grid-column: 1 / -1; }
  .pl-head .lead { margin-top: 16px; }
  .fq-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .fq-head h2, .fq-intro { grid-column: 1; }
  .pl-rack { max-width: 520px; margin: 0 auto; }
  .pl-tags { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  .ht.p1, .ht.p2, .ht.p3 { --len: 30px; }
  .fan { --w: 100%; display: grid; gap: 18px; }
  .tk { grid-area: auto; width: auto; margin: 0 !important; }
  .tk:hover, .tk:focus-within { transform: none; }
  .tk-1 .tk-card, .tk-2 .tk-card { background: var(--white); }
  .tk-body { max-width: none; }
}

/* touch screens and phones: no hover, so the trade's line shows in the strip */
@media (hover: none), (max-width: 767.98px) {
  .lu-more { display: none; }
  .lu-line-s { display: block; margin: -4px 0 12px; font-size: 15px; line-height: 1.35; }
}

@media (max-width: 767.98px) {
  .hs-hero { margin-top: 0; padding: 16px 0 0; }
  .hh-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hh-c { display: none; }
  /* the h1 crosses the foot of the photo pair on flat white labels, one per line, as it crosses the row on desktop
     (brand-uniqueness check 2026-10-14: on phones the four new homes all opened photo first, then a plain h1); the
     labels' side padding hangs left of the text column, so the words keep the lede's left edge.
     Final QA 2026-10-14: each line's label is painted after the line above it, and at line-height 1.1 with 3 px top
     padding the next label began 2.4 px under the baseline, covering 6.6 px of the 9 px tail of "y" ("your" read
     "vour"). At 1.23 with no top padding the next label begins 11 px under the baseline (2 px clear of the tail); the
     first label keeps 12 px of white above the capitals, its side padding, and the -50 px margin keeps its top edge
     where it was, crossing the contractor's foot by 50 px */
  .hh-h1 { position: relative; inset: auto; z-index: 2; margin: -50px 0 0 -12px; font-size: var(--t-h1); line-height: 1.23; }
  .hh-lbl { padding: 0 12px 5px; background: var(--white); }
  /* a staggered pair, as the row is staggered on desktop: the house (6:5) ends above the h1, so the first label crosses
     the contractor's foot and runs on under the house (with both at 4:5 the label stopped a few px short of the house's
     right edge, and the sliver left there depended on the phone's width) */
  .hh-row > .hh-a { aspect-ratio: 6 / 5; }
  .hh-lede { font-size: 17px; }
  .hh-acts { gap: 12px 24px; }
  /* the six trades as a 2-column grid of equal tags, each a 44 px tap target */
  .hh-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hh-tags a.tag { width: 100%; min-height: 44px; padding-block: 10px; }
  .hs-trades { padding: 80px 0 80px; }
  .br-ph { display: inline; }
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .lu-strip { padding: 12px 12px 14px; }
  .lu-name { min-height: 2.24em; margin: 8px 0 10px; font-size: 17px; }
  .lu-strip .tag { gap: 5px; min-height: 24px; padding: 3px 6px 2px 7px; letter-spacing: 0.1em; }
  .ht-key { justify-content: flex-start; margin-top: 18px; }
  .ht-key-l { flex-basis: 100%; }
  .ht-key .tag-row { display: grid; grid-template-columns: repeat(2, max-content); }
  .hs-seasons { padding: 64px 0 56px; }
  .ss-side { grid-template-columns: minmax(0, 1fr); }
  .ss-dial { width: 260px; margin: 0 0 24px; }
  .hs-seasons .st-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hs-seasons .st-b { width: 100%; min-height: 60px; padding: 10px 12px 10px 14px; }
  .ss-stage { margin-top: 32px; }
  .stp-card { width: auto; margin: -36px 8px 0; padding: 22px 18px 20px; }
  .stp-line { font-size: 21px; }
  .stp-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hs-route { padding: 80px 0 48px; }
  .rt-photo { aspect-ratio: 16 / 10; }
  .rt-stops { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; padding-left: 0; }
  .rt-stop { padding-bottom: 22px; }
  .rt-stop::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 0; border-left: 3px solid var(--sky); }
  .rt-stop:last-child::before { display: none; }
  .rt-mk { width: 44px; height: 44px; font-size: 16px; }
  /* how we work: the heading row stacks (h2, the ruled stamp and sentence, the intro), then the photo (4:3) and the
     sheet over its bottom edge, 8 px in from each side; each numeral stands before its title, the text under both */
  .hs-how { padding: 48px 0 80px; }
  .wk-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin-bottom: 28px; }
  .wk-not { padding-left: 16px; }
  .wk-photo { margin-left: 0; aspect-ratio: 4 / 3; }
  .hs-how .wk-sheet { --f: 22px; margin: -40px 8px 0; padding: 0 20px 4px; }
  .wk-item { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; padding: 20px 0 22px; }
  .wk-n { grid-row: auto; font-size: 20px; }
  .wk-item h3 { margin: 0; }
  .wk-item p { grid-column: 1 / -1; margin-top: 10px; }
  .hs-guides { padding: 64px 0 52px; }
  .gs-head { margin-bottom: 36px; }
  .shelf { --cols: 214px repeat(7, 196px); }
  .bk { height: calc(var(--bh) * 1.25); }
  .bk-lead { height: calc(var(--bh) * 1.12); }
  .bk-lead .bk-win { height: 54%; }
  .bk-t { font-size: 18px; }
  .hs-plans { padding: 80px 0 72px; }
  .ht-price b { font-size: 46px; font-size: min(46px, (100cqi - 100px) / 3.86); }
  /* each feature list folds behind "What's included (n)", Standard's open (Bootstrap collapse, .js pages only): the
     three tags with all their features took about 2,700 px of the phone page. The dashed rule moves to the toggle */
  .js .ht-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 56px;
    margin: 24px 0 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1.5px dashed rgba(36, 34, 31, 0.35);
    border-radius: 0;
    background: none;
    color: var(--charcoal);
    font: 700 17px / 1.3 var(--f-sans);
    text-align: left;
    cursor: pointer;
  }
  .js .ht-more:hover > span { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
  .ht-pm { position: relative; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--charcoal); border-radius: 3px; transition: background-color 0.18s ease; }
  .ht-pm::before, .ht-pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--charcoal); transform: translate(-50%, -50%); transition: transform 0.18s ease; }
  .ht-pm::before { width: 12px; height: 2px; }
  .ht-pm::after { width: 2px; height: 12px; }
  .ht-more[aria-expanded="true"] .ht-pm { background: var(--charcoal); }
  .ht-more[aria-expanded="true"] .ht-pm::before { background: var(--kraft); }
  .ht-more[aria-expanded="true"] .ht-pm::after { transform: translate(-50%, -50%) scaleY(0); }
  .js .ht-feats { margin-top: 0; padding-top: 12px; border-top: 0; }
  .hs-faq { padding: 24px 0 72px; }
  .fq-head { margin-bottom: 28px; }
  .fq-contact { flex-direction: column; gap: 0; }
  .ledger .fq-q { grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "tag pm" "q pm"; gap: 10px 16px; padding: 18px 0; font-size: 18px; }
  .ledger .fq-tag { grid-area: tag; }
  .ledger .fq-t { grid-area: q; }
  .ledger .fq-pm { grid-area: pm; }
  .ledger .fq-a { padding: 0 0 22px; }
  .hs-notes { padding: 80px 0 72px; }
  .tk-img { height: 180px; }
  /* tap targets: the trade tags and the "Read next" links in the season card, 44 px like the hero's tags */
  .stp-trades { gap: 8px; }
  .stp-trades a.tag { min-height: 44px; padding-block: 10px; }
  .stp-next ul { gap: 0; }
  .stp-next a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; }
}
/* devices pass 2026-10-14: phones narrower than 390 px. The trade names in Michroma ("HANDYMAN", "PLUMBING") ran past
   their tags and the plan prices past the hang-tags (the menu bar: frame.css section 2) */
@media (max-width: 389.98px) {
  /* the season card's trade tags: tighter tracking (at 375 px "HANDYMAN" touched its border) */
  .stp-trades .tag { gap: 5px; padding-inline: 6px 5px; letter-spacing: 0.04em; }
}
@media (max-width: 374.98px) {
  /* hero: the six trade tags, two by two (at 320 px "HANDYMAN" was cut off) */
  .hh-tags a.tag { gap: 4px; padding-inline: 6px 5px; font-size: 11px; letter-spacing: 0.02em; }
  /* the lineup's trade tags stay inside their strips */
  .lu-strip .tag { letter-spacing: 0.03em; }
  /* season card: one trade tag per row */
  .stp-trades { grid-template-columns: minmax(0, 1fr); }
  /* plan tags: the price and the old price inside the tag (at 46 px "$249" and "$499" ran past both edges) */
  .ht-card { padding-inline: 16px; }
  .ht-price { flex-wrap: wrap; column-gap: 8px; }
  .ht-price b { font-size: 36px; }
}
@media (max-width: 359.98px) {
  /* the lineup's trade tags without their icons (at 320 px "PLUMBING" and "HANDYMAN" ran past the strip) */
  .lu-strip .tag .pi { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lu-img, .lu-more, .bk a, .tk, .ss-dial .wheel .wq path, .ht-pm, .ht-pm::before, .ht-pm::after { transition: none; }
  .lu:hover .lu-img { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--z, 1)); }
}

/* ---------------------------------------------------------------- legacy: the first build's season dial drawing
   (src/components/drawings/SeasonDial.tsx, svg.wheel.dw; not placed on any page at present) took these two rules;
   kept as they were. The home dial is styled above under .ss-dial. */
.wheel { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel .wc { fill: var(--kraft); stroke: var(--charcoal); stroke-width: 2; }