/* HomeIsSecure, human redesign 2026-10-14: the parts every INNER page shares ("Workwear and the four seasons",
   ART-DIRECTION.md section 5). Loaded after home.css and before the four page files (pages-trades, pages-guides,
   pages-company, pages-articles), so the home page never sees a change from here: every rule is scoped to inner-page
   classes (in-*, the old shared class names of the inner markup) or to body classes other than .h-home.
   Contents: 1 rhythm and heads  2 breadcrumb  3 season tags  4 checklist  5 ledger questions  6 the work-order tag
   7 article cards (PostCard)  8 contents lists (kraft tag strip)  9 phones. */

/* ---------------------------------------------------------------- 1 rhythm and heads
   White sections pad 56 px top and bottom (112 px between two of them); a kraft or charcoal board keeps 56 px of
   margin and pads 88 px inside; two boards in a row stand 20 px apart, like boards on a workbench. */
:where(body:not(.h-home)) main { overflow-x: clip; }
:where(body:not(.h-home)) main > section { position: relative; }
.in-sec { padding: 56px 0; }
:where(body:not(.h-home)) main > .panel { margin-block: 56px; padding: 88px 0; }
:where(body:not(.h-home)) main > .panel:has(+ .panel) { margin-bottom: 0; }
:where(body:not(.h-home)) main > .panel + .panel { margin-top: 20px; }
:where(body:not(.h-home)) main > .panel:last-child { margin-bottom: 0; }
/* the first paragraph under a page title */
:where(body:not(.h-home)) .lede { max-width: 56ch; margin: 0; font-size: var(--t-lede); line-height: 1.5; text-wrap: pretty; }
:where(body:not(.h-home)) main h1 { font-weight: 900; letter-spacing: -0.03em; }
:where(body:not(.h-home)) main h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.06; }
/* a section head: the h2 in columns 1-6, the intro in 8-12, both from the top (the h2 is read first) */
.in-head2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-bottom: 48px; }
.in-head2 > h2 { grid-column: 1 / span 6; margin: 0; }
.in-head2 > .lead, .in-head2 > p { grid-column: 8 / -1; max-width: 46ch; margin: 0; }
.in-head2 > .lead + .go, .in-head2 > p + .go { grid-column: 8 / -1; margin-top: 8px; }
.in-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.in-acts .h-btn { margin-bottom: 4px; }

/* ---------------------------------------------------------------- 2 breadcrumb: Schibsted 600, tan underlines */
:where(body:not(.h-home)) .h-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 32px;
  color: var(--muted);
  font: 600 15px / 1.4 var(--f-sans);
  letter-spacing: 0;
  text-transform: none;
}
:where(body:not(.h-home)) .h-crumbs a, :where(body:not(.h-home)) .h-crumbs a:visited { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
:where(body:not(.h-home)) .h-crumbs a:hover { text-decoration-color: var(--charcoal); }
:where(body:not(.h-home)) .h-crumbs i { color: var(--line); font-style: normal; }
:where(body:not(.h-home)) .h-crumbs [aria-current] { color: var(--muted); }

/* ---------------------------------------------------------------- 3 the four seasons as stamped tags
   busy: charcoal tag with a filled square; quiet: the outline and the words in the muted line colour */
.in-seasons { gap: 8px; }
.in-seasons .tag { gap: 8px; padding: 4px 9px 3px 9px; font-size: var(--t-tag); }
.in-seasons .tag .sq { width: 10px; height: 10px; }
.in-seasons .is-quiet .tag { color: var(--muted); }
.in-seasons .is-quiet .sq { border-color: currentColor; }

/* ---------------------------------------------------------------- 4 checklist: 24 px tan check squares, Schibsted
   800 titles, 1 px kraft hairlines between the items (the home's "How we work" list) */
.in-checks { margin: 0; padding: 0; list-style: none; }
.in-checks > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 18px; max-width: none; margin: 0; padding: 20px 0; }
.in-checks > li + li { border-top: 1px solid var(--line-soft); }
.in-checks > li:last-child { padding-bottom: 0; }
.in-checks .ck { margin-top: 2px; }
.in-checks h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; }
.in-checks p { max-width: 56ch; margin: 0; font-size: 17px; line-height: 1.55; }

/* ---------------------------------------------------------------- 5 ledger questions with the home's tag column
   (home.css section 7; review 2026-10-14): a fixed 120 px cell holding the row's number as a stamped Michroma tag
   (Q.01 ...) | the question (Schibsted 700, 20 px) | the square +/-; 1 px charcoal 20 % rules; the answer opens inside
   the row, under the question. Phones: the tag above the question. */
.ledger.in-ledger .fq-q { grid-template-columns: 120px minmax(0, 1fr) 34px; gap: 24px; min-height: 76px; padding: 18px 0; font-size: 20px; }
.ledger.in-ledger .fq-tag { min-height: 26px; padding: 4px 8px 3px 9px; font-size: 12px; letter-spacing: 0.12em; }
.ledger.in-ledger .fq.open .fq-tag { border-color: var(--charcoal); background: var(--charcoal); color: var(--white); -webkit-mask-image: var(--stamp-soft); mask-image: var(--stamp-soft); }
.ledger.in-ledger .fq-a { padding: 0 58px 26px 144px; }
.ledger.in-ledger .fq-a p { max-width: 66ch; }
.ledger.in-ledger .fq > h4 { margin: 0; font-size: inherit; line-height: inherit; }

/* ---------------------------------------------------------------- 6 the work-order tag: phone and email lines on a
   white dog-ear card, Michroma labels (the contact lines of the trade, pricing and FAQ pages) */
.in-wo { display: grid; gap: 4px; max-width: 360px; padding: 18px 22px 20px; }
.in-wo .wo-line, .in-wo .wo-line:visited { display: grid; gap: 2px; min-height: 44px; padding: 8px 0; color: var(--charcoal); text-decoration: none; }
.in-wo .wo-line + .wo-line { border-top: 1px dashed rgba(36, 34, 31, 0.3); padding-top: 12px; }
.in-wo small { color: var(--muted); font: 400 11px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.in-wo b { font: 800 20px / 1.25 var(--f-sans); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.in-wo .wo-line:hover b { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- 7 article cards (PostCard): dog-ear tag cards,
   photo inset 10 px, the topic as a stamped tag over the date, the title, the excerpt, "Read the article" */
.h-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 10px 0;
  border-top: 0;
}
.h-card.dog { border: 1px solid var(--line-soft); }
.h-card .hc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--card-r); background: var(--kraft); }
.h-card .hc-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform-origin: 50% 0; border-radius: 0; transition: transform 0.25s ease; }
.h-card:hover .hc-img img { transform: scale(1.03); }
/* photos pass 2026-10-14 (owner rule: no head cut). The article photos come from the admin, so the crop above is
   weighted to the top for future articles, and (devices pass 2026-10-15) the hover zoom grows from the top edge, so
   a head near the top stays whole; photos that need another crop get their own rule, by file name.
   39191044 (an older couple): the man's head reaches the photo's right edge, so the crop keeps that edge, and
   (devices pass 2026-10-15) the hover zoom grows from that edge, so his head is not pushed out of the card. */
.h-card .hc-img img[src*="pexels-photo-39191044."] { object-position: 100% 50%; transform-origin: 100% 50%; }
.h-card .hc-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 18px 12px 22px; }
/* the topic tag on its own line and the date under it, always (client review 2026-10-14: a long tag pushed the date to
   a second line on some cards only, so the titles in a row started at different heights); as on the job tickets */
.h-card .hc-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 14px; color: var(--muted); font: 400 15px / 1.3 var(--f-sans); letter-spacing: 0; text-transform: none; }
.h-card .hc-meta > * + *::before { content: none; }
.h-card .hc-meta .hc-cat { min-height: 24px; padding: 3px 8px 2px 9px; color: var(--charcoal); font-size: 11px; }
.h-card h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.16; letter-spacing: -0.02em; }
.h-card h3 a, .h-card h3 a:visited { color: var(--charcoal); text-decoration: none; }
.h-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.h-card:hover h3 a { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.h-card h3 a:focus-visible { outline: none; }
.h-card:has(h3 a:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.h-card .hc-ex { max-width: none; margin: 0 0 18px; font-size: 17px; line-height: 1.5; }
.h-card .hc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--charcoal); font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.h-card .hc-more::after { content: none; }
.h-card .hc-more .pi { width: 16px; height: 16px; }
/* a row of cards (the guides' related articles, an article's "More from the notebook") */
.in-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin: 0; padding: 0; list-style: none; }
.in-cards > li, .in-cards > div { max-width: none; margin: 0; }
.in-cards > div[class*="col-"] { width: auto; padding: 0; }

/* ---------------------------------------------------------------- 8 contents lists: the stamped tag strip
   (.h-toc[data-spy-nav] on desktop, the folding details.toc-m on phones and tablets). Used by the guides, the articles
   and the admin's legal HTML (class names kept). Cross-site check 2026-10-14: the label + "1 of N" counter + progress
   bar + marked list was the same box three JDA sites used, so HomeIsSecure sets its planned tag strip instead: a kraft
   strip whose label is a stamped tag; every section is a row led by a stamped numeral tag, the rows parted by
   perforation rules like a strip of tear-off tags; the current section's tag is stamped solid tan (the brand's fill for
   tags) and its title set in bold. There is no counter and no bar: [data-spy-count] and .toc-bar stay in the markup
   for main.js (it still writes to them) and are simply not shown. The numerals are the guides' and the legal pages'
   own .n figures; the articles' list has none, so a CSS counter draws them there (generated, not page text). */
:where(body:not(.h-home)) .h-toc { padding: 20px 20px 14px; border-radius: var(--card-r); background: var(--kraft); background-image: var(--grain); font-size: 15px; line-height: 1.35; }
:where(body:not(.h-home)) .h-toc .toc-top { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-bottom: 8px; }
:where(body:not(.h-home)) .h-toc .toc-top b,
:where(body:not(.h-home)) .toc-m .tm-l {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px 4px 10px;
  border: 1.5px solid var(--charcoal);
  border-radius: 2px;
  color: var(--charcoal);
  font: 400 11px / 1.1 var(--f-tag);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-mask: var(--stamp) 0 0 / 150px 150px;
  mask: var(--stamp) 0 0 / 150px 150px;
}
:where(body:not(.h-home)) .h-toc [data-spy-count], :where(body:not(.h-home)) .h-toc .toc-bar { display: none; }
:where(body:not(.h-home)) .h-toc ol { padding-top: 4px; }
:where(body:not(.h-home)) .h-toc ol li + li, :where(body:not(.h-home)) .toc-m ol li + li { border-top: 1px dashed rgba(36, 34, 31, 0.3); }
:where(body:not(.h-home)) .h-toc ol a, :where(body:not(.h-home)) .h-toc ol a:visited,
:where(body:not(.h-home)) .toc-m ol a, :where(body:not(.h-home)) .toc-m ol a:visited {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-left: 0;
  color: var(--charcoal);
  text-decoration: none;
}
/* the numeral tag: the list's own figure (.n) or, on the articles' list (.dots), a counter */
:where(body:not(.h-home)) .h-toc ol .n, :where(body:not(.h-home)) .toc-m ol .n,
:where(body:not(.h-home)) .h-toc ol.dots a::before, :where(body:not(.h-home)) .toc-m ol.dots a::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 22px;
  margin-top: -1px;
  border: 1.5px solid var(--charcoal);
  border-radius: 2px;
  color: var(--charcoal);
  font: 400 10px / 1 var(--f-tag);
  letter-spacing: 0.04em;
  font-variant-numeric: normal;
  -webkit-mask: var(--stamp) 0 0 / 150px 150px;
  mask: var(--stamp) 0 0 / 150px 150px;
}
:where(body:not(.h-home)) .h-toc ol.dots a, :where(body:not(.h-home)) .toc-m ol.dots a { grid-template-columns: 34px minmax(0, 1fr); }
:where(body:not(.h-home)) .h-toc ol.dots a::before, :where(body:not(.h-home)) .toc-m ol.dots a::before { content: counter(toc); }
:where(body:not(.h-home)) .h-toc ol a:hover .t, :where(body:not(.h-home)) .toc-m ol a:hover .t { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(body:not(.h-home)) .h-toc ol a:hover .n, :where(body:not(.h-home)) .h-toc ol.dots a:hover::before { background: rgba(194, 150, 90, 0.35); }
:where(body:not(.h-home)) .h-toc ol a.active { border-left: 0; font-weight: 700; }
:where(body:not(.h-home)) .h-toc ol a.active .n, :where(body:not(.h-home)) .h-toc ol.dots a.active::before {
  background: var(--tan);
  color: var(--charcoal);
  -webkit-mask-image: var(--stamp-soft);
  mask-image: var(--stamp-soft);
}
/* the sticky strip never runs past the foot of the screen (it sticks 112 px down; with the guides' extra links and
   the plans box it is up to 790 px tall, more than a 1366 x 768 laptop shows): the strip is capped at the screen
   height and only its list gives way, scrolling inside the strip on short screens (main.js keeps the current section
   in view and fades the cut edge, .toc-fade), so the links and the plans box under it stay in reach */
:where(body:not(.h-home)) .side-stick > .h-toc { display: flex; flex-direction: column; max-height: calc(100vh - var(--hdr) - 48px); }
:where(body:not(.h-home)) .side-stick > .h-toc > * { flex: none; }
:where(body:not(.h-home)) .side-stick > .h-toc > ol { flex: 0 1 auto; min-height: 124px; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(36, 34, 31, 0.35) transparent; }
/* a scrolling list clips what pokes out of it: 6 px of room on every side (taken back by negative margins, so nothing
   moves) keeps the 3 px focus ring and its 3 px offset whole around every row */
:where(body:not(.h-home)) .side-stick > .h-toc > ol { margin: -2px -6px -6px; padding: 6px 6px 6px; }
:where(body:not(.h-home)) .h-toc .toc-more { margin-top: 10px; border-top: 1.5px solid var(--charcoal); }
:where(body:not(.h-home)) .h-toc .toc-more a, :where(body:not(.h-home)) .h-toc .toc-more a:visited { min-height: 40px; color: var(--charcoal); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
:where(body:not(.h-home)) .h-toc .toc-pro { margin: 16px -20px -14px; padding: 18px 20px 20px; border-top: 0; border-radius: 0 0 var(--card-r) var(--card-r); background: var(--charcoal); color: var(--white); }
:where(body:not(.h-home)) .h-toc .toc-pro b { color: var(--white); font-size: 17px; }
:where(body:not(.h-home)) .h-toc .toc-pro p { margin: 4px 0 6px; color: var(--on-dark-muted); font-size: 15px; }
:where(body:not(.h-home)) .h-toc .toc-pro .go, :where(body:not(.h-home)) .h-toc .toc-pro .bp-go, :where(body:not(.h-home)) .h-toc .toc-pro a { color: var(--white); text-decoration-color: var(--tan); }
:where(body:not(.h-home)) .h-toc .toc-pro :focus-visible { outline-color: var(--sky); }
:where(body:not(.h-home)) .toc-m { margin: 0 0 32px; border: 0; border-radius: var(--card-r); background: var(--kraft); background-image: var(--grain); }
:where(body:not(.h-home)) .toc-m summary { min-height: 56px; padding: 8px 18px; }
:where(body:not(.h-home)) .toc-m .tm-n { color: var(--muted); font-size: 15px; }
:where(body:not(.h-home)) .toc-m .tm-cv { width: 26px; height: 26px; border: 1.5px solid var(--charcoal); border-radius: 3px; }
:where(body:not(.h-home)) .toc-m .tm-cv::before, :where(body:not(.h-home)) .toc-m .tm-cv::after { background: var(--charcoal); }
:where(body:not(.h-home)) .toc-m .tm-cv::before { left: 6px; right: 6px; top: 11px; height: 2px; }
:where(body:not(.h-home)) .toc-m .tm-cv::after { top: 6px; bottom: 6px; left: 11px; width: 2px; }
:where(body:not(.h-home)) .toc-m ol { padding: 4px 18px 12px; border-top: 1.5px solid var(--charcoal); }
:where(body:not(.h-home)) .toc-m ol a, :where(body:not(.h-home)) .toc-m ol a:visited { min-height: 44px; padding: 11px 0; }
:where(body:not(.h-home)) .toc-m .tm-more a, :where(body:not(.h-home)) .toc-m .tm-more a:visited { display: inline-flex; align-items: center; min-height: 44px; color: var(--charcoal); font-weight: 700; text-decoration-color: var(--tan); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- 9 tablets and phones */
@media (max-width: 991.98px) {
  .in-head2 { grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin-bottom: 36px; }
  .in-head2 > h2, .in-head2 > .lead, .in-head2 > p, .in-head2 > .lead + .go, .in-head2 > p + .go { grid-column: 1; }
  .in-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .in-sec { padding: 40px 0; }
  :where(body:not(.h-home)) main > .panel { margin-block: 40px; padding: 56px 0; }
  :where(body:not(.h-home)) main > .panel + .panel { margin-top: 12px; }
  :where(body:not(.h-home)) .lede { font-size: 18px; }
  :where(body:not(.h-home)) .h-crumbs { margin-bottom: 24px; }
  .in-head2 { margin-bottom: 28px; }
  .in-cards { grid-template-columns: minmax(0, 1fr); }
  .ledger.in-ledger .fq-q { grid-template-areas: "tag pm" "q pm"; grid-template-columns: minmax(0, 1fr) 34px; gap: 10px 16px; min-height: 64px; font-size: 18px; }
  .ledger.in-ledger .fq-tag { grid-area: tag; justify-self: start; min-height: 24px; padding: 3px 7px 2px 8px; font-size: 11px; }
  .ledger.in-ledger .fq-t { grid-area: q; }
  .ledger.in-ledger .fq-pm { grid-area: pm; }
  .ledger.in-ledger .fq-a { padding: 0 0 22px; }
  .in-checks h3 { font-size: 19px; }
  .in-acts { gap: 12px 24px; }
}
/* devices pass 2026-10-14: at 320-374 px the folding contents bar ("IN THIS GUIDE", "7 sections", the + box) was
   10 px wider than the bar, so the + box stuck out of it */
@media (max-width: 374.98px) {
  :where(body:not(.h-home)) .toc-m summary { gap: 8px; padding-inline: 12px; }
  :where(body:not(.h-home)) .toc-m .tm-l { padding-inline: 7px 6px; letter-spacing: 0.06em; }
  /* the count may take two lines ("7 / sections") so the + box always stays inside the bar */
  :where(body:not(.h-home)) .toc-m .tm-n { min-width: 0; font-size: 14px; line-height: 1.2; text-align: right; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .h-card .hc-img img { transition: none; }
  .h-card:hover .hc-img img { transform: none; }
}
/* devices pass 2026-10-14: on phones a long topic tag on a card ("GROWING YOUR BUSINESS") ran past the card's edge;
   it keeps inside the card and wraps if it must */
@media (max-width: 389.98px) {
  .h-card .hc-meta .hc-cat { max-width: 100%; letter-spacing: 0.06em; white-space: normal; }
}