/* HomeIsSecure, human redesign 2026-10-13: the frame of every page. Markup: src/components/SiteHeader.tsx, menus.tsx,
   CtaPanel.tsx, CtaBand.tsx, SiteFooter.tsx. ART-DIRECTION.md sections 3 (header H9), 4.8 (closing panel C9), 4.10
   (footer Ft6). Contents: 1 header bar and the logo block  2 menu  3 mega panels  4 phone sheet (#hDrawer)
   5 closing panel  6 footer  7 inner-page fit (read bar, offsets)  8 forced colours (Windows High Contrast). */

/* ---------------------------------------------------------------- 1 header bar and the logo block */
.h-hdr {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}
.hb {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--hdr);
  padding-right: var(--pad);
  transition: height 0.2s ease;
}
@media (min-width: 1200px) {
  .h-hdr.stuck .hb { height: 68px; }
  .h-hdr.stuck { box-shadow: 0 10px 24px -18px rgba(36, 34, 31, 0.45); }
}
/* the charcoal block, flush against the viewport edge; its top-right corner is folded over in tan */
.h-brand, .h-brand:visited {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 36px 0 28px; /* 0 44px 0 32px until the logo of 17 Oct (see below) */
  background: var(--charcoal);
  text-decoration: none;
}
.h-brand::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(to bottom left, var(--white) 50%, var(--tan) 50%);
}
/* the logo (17 Oct): the "service tag" mark (the plans' hang-tag with a four-pane window, one pane lit in tan) beside
   the name, sized by height. .lg-full = logo.svg in one line (46 px: the name's cap height is 24 px, as the old
   wordmark's), .lg-compact = logo-compact.svg, "Home / IsSecure" in two lines, for phones below 576 px. The same two
   images and rules serve the phone sheet's logo block (#hDrawer).
   Sizes per width: the block may not take more of the bar than the old one where the bar was tight (measured 1200-1600
   px in 4 px steps: the space left between the menu and the phone link is the same as before at 1360-1439 px,
   6 px less at 1200-1279, 34 px less at 1280-1359 and 51 px less from 1440 px, where it was largest):
   >= 1440 px 46 px tall (block 363 px; was 312), 40 px in the stuck 68 px bar; 1280-1439 px 40 px (block 312);
   1200-1279 px 36 px (block 284; was 278); 768-1199 px 36 px; 576-767 px 32 px; phones .lg-compact 40 / 36 / 32 px. */
.h-brand img { display: block; width: auto; }
.h-brand .lg-full { height: 46px; transition: height 0.2s ease; }
.h-brand .lg-compact { display: none; height: 40px; }
@media (min-width: 1440px) { .h-hdr.stuck .h-brand .lg-full { height: 40px; } }
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .h-brand { padding: 0 28px 0 24px; }
  .h-brand .lg-full { height: 40px; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .h-brand { padding: 0 28px 0 22px; }
  .h-brand .lg-full { height: 36px; }
}
.h-brand:focus-visible { outline: 3px solid var(--sky); outline-offset: -7px; border-radius: 0; }

/* ---------------------------------------------------------------- 2 menu (>= 1200 px) and actions */
.h-nav { display: none; }
@media (min-width: 1200px) {
  .h-nav { display: flex; align-items: stretch; margin-left: 22px; }
  .h-nav > ul { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
  .h-nav > ul > li { display: flex; max-width: none; margin: 0; }
}
.n-a, .n-a:visited {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  color: var(--charcoal);
  font: 600 16px / 1 var(--f-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}
/* the current page: a 4 px tan bar under the label, on the bar's lower edge; hover grows the same bar */
.n-a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 4px;
  background: var(--tan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.n-a:hover { color: var(--charcoal); text-decoration: none; }
.n-a:hover::after, .h-nav li.is-on > .n-a::after, .h-nav .has-dd.open > .n-a::after { transform: scaleX(1); }
.h-nav li.is-on > .n-a { font-weight: 700; }
.n-a:focus-visible { outline-offset: -6px; }
.n-car { width: 12px; height: 12px; margin-top: 1px; transition: transform 0.2s ease; }
.h-nav .has-dd.open > .n-a .n-car { transform: rotate(180deg); }

.h-acts { display: flex; align-items: center; gap: 22px; margin-left: auto; padding-left: 16px; }
.h-tel, .h-tel:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--charcoal);
  font: 700 16px / 1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.h-tel .pi { width: 20px; height: 20px; }
.h-tel:hover { color: var(--charcoal); text-decoration: none; }
.h-tel:hover span { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.h-acts .h-hjoin { margin-bottom: 4px; }
.h-burger {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 2px 0 8px;
  border: 0;
  background: none;
  color: var(--charcoal);
  font: 400 12px / 1 var(--f-tag);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  cursor: pointer;
}
.hm-i { display: grid; gap: 6px; }
.hm-i i { display: block; width: 24px; height: 2.5px; background: currentColor; transition: transform 0.2s ease; }
.hm-i i + i { width: 16px; justify-self: end; }
.h-burger:hover .hm-i i + i { transform: scaleX(1.5); transform-origin: right; }

@media (min-width: 1200px) and (max-width: 1359.98px) {
  .h-tel span { display: none; }
  .h-tel { width: 44px; justify-content: center; }
  .n-a { padding: 0 10px; }
  .n-a::after { left: 10px; right: 10px; }
  /* the logo block's padding and logo size at 1200-1439 px: section 1 (17 Oct) */
}
@media (max-width: 1199.98px) {
  .h-brand { padding: 0 38px 0 20px; }
  .h-brand .lg-full { height: 36px; }
  .h-burger { display: inline-flex; }
  .h-acts { gap: 18px; }
  .h-acts .h-hjoin { min-height: 44px; padding: 0 18px; font-size: 15px; }
}
@media (max-width: 767.98px) {
  .hb { padding-right: 12px; }
  .h-brand .lg-full { height: 32px; }
  .h-tel span { display: none; }
  .h-tel { width: 44px; justify-content: center; }
  .h-acts { gap: 8px; }
}
/* Phones (< 576 px). Owner rule (2026-10-15): "Join Us" stays as it was, and before the redesign it showed in the
   phone header on every page, so the bar keeps it at every width from 320 px: a compact kick-plate button, a slimmer
   logo block step by step, and below 480 px the "Menu" button sets its label under its bars (beside them, the bar ran
   past the screen's edge). The phone link and the menu button keep their 40-44 px tap targets. */
@media (max-width: 575.98px) {
  .h-brand { padding: 0 28px 0 16px; }
  .h-brand .lg-full { display: none; }
  .h-brand .lg-compact { display: block; height: 40px; }
  .h-acts { gap: 8px; padding-left: 8px; }
  .h-acts .h-hjoin { min-height: 40px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 479.98px) {
  .hb { padding-right: 10px; }
  .h-brand { padding: 0 22px 0 14px; }
  .h-acts { gap: 6px; }
  .h-tel { width: 40px; }
  .h-burger { flex-direction: column; justify-content: center; gap: 6px; min-width: 44px; padding: 0 2px; font-size: 11px; letter-spacing: 0.04em; }
  .h-burger .hm-i { order: -1; }
}
@media (max-width: 389.98px) {
  .hb { padding-right: 8px; }
  .h-brand { padding: 0 20px 0 12px; }
  .h-brand .lg-compact { height: 36px; }
  .h-acts { gap: 4px; padding-left: 6px; }
  .h-acts .h-hjoin { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 359.98px) {
  .h-brand { padding: 0 16px 0 10px; }
  .h-brand .lg-compact { height: 32px; } /* block 136 px, as narrow as the old one (138) */
  .h-acts { gap: 3px; padding-left: 4px; }
  .h-acts .h-hjoin { padding: 0 10px; font-size: 13px; }
}

/* ---------------------------------------------------------------- 3 mega panels: kraft boards hung under the bar
   main.js opens them (li.has-dd.open: hover with a grace period, focus, Esc, first tap on touch) and switches the
   groups (li.has-sub.open shows its .fly beside the list). */
.h-nav .mega { display: none; }
@media (min-width: 1200px) {
  .h-nav .mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    display: block;
    width: calc(100% - 2 * var(--inset));
    max-width: 1400px;
    border-radius: 0 0 20px 20px;
    background: var(--kraft) var(--grain);
    box-shadow: 0 30px 50px -30px rgba(36, 34, 31, 0.55);
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }
  .h-nav .has-dd.open > .mega { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity 0.16s ease, transform 0.16s ease; }
}
.mega-in { position: relative; max-width: 1280px; margin: 0 auto; padding: 30px 20px 34px; }
.mega .mg-cap {
  margin: 0 0 14px;
  color: var(--muted);
  font: 400 11px / 1.2 var(--f-tag);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
}
.mega a, .mega a:visited { color: var(--charcoal); text-decoration: none; }
.mega small { display: block; }
/* Trades: six rows (portrait, name, line, busy seasons) and a photo panel */
.mega-in.tr { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.tm { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 -12px; padding: 12px; border-radius: 10px; transition: background-color 0.15s ease; }
.tm:hover { background: rgba(255, 255, 255, 0.6); }
.tm-ph { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 6px; }
.tm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-t b { display: flex; align-items: center; gap: 8px; font: 800 17px / 1.2 var(--f-sans); letter-spacing: -0.015em; }
.tm-t b .pi { width: 18px; height: 18px; }
.tm:hover .tm-t b { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tm-t small { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.tm-busy { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tm-busy .tag { min-height: 22px; padding: 3px 7px 2px 8px; border-width: 1px; font-size: 11px; }
.mg-key { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.mg-promo { position: relative; display: block; min-height: 300px; overflow: hidden; border-radius: 16px; }
.mg-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mg-promo:hover img { transform: scale(1.04); }
.mg-promo .mp-txt {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--white);
}
.mp-txt b { font: 800 20px / 1.2 var(--f-sans); letter-spacing: -0.015em; }
.mp-txt small { color: var(--on-dark-muted); font-size: 15px; line-height: 1.4; }
.mp-go { margin-top: 6px; font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
/* Home Care and Articles: the groups on the left, the open group's links beside them */
.mega-in.gd, .mega-in.ar { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; gap: 40px; min-height: 340px; }
.mega-in.ar { grid-template-columns: 340px minmax(0, 1fr); }
.mg-side { grid-column: 1; }
.fly-stage { grid-column: 2; }
.mega-in.gd .mg-promo { grid-column: 3; }
.sub-list { margin: 0; padding: 0; list-style: none; }
.sub-list > li { max-width: none; margin: 0; }
.sub-a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -14px; padding: 12px 14px; border-radius: 8px; transition: background-color 0.15s ease; }
.sub-a b { display: block; font: 800 17px / 1.2 var(--f-sans); letter-spacing: -0.015em; }
.sub-a small { margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.sub-a .go-ic { width: 18px; height: 18px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.has-sub.open > .sub-a { background: var(--white); }
.has-sub.open > .sub-a .go-ic { opacity: 1; transform: none; }
.mega .fly { position: absolute; top: 30px; left: calc(20px + 320px + 40px); right: calc(20px + 300px + 40px); display: none; }
.mega-in.ar .fly { left: calc(20px + 340px + 40px); right: 20px; }
.has-dd .has-sub.open > .fly { display: block; }
.fly-list, .fly-posts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fly-list li, .fly-posts li { max-width: none; margin: 0; }
.fly-list a { display: block; padding: 14px 18px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); transition: background-color 0.15s ease; }
.fly-list a:hover { background: var(--white); }
.fly-list b { display: block; font: 800 18px / 1.2 var(--f-sans); letter-spacing: -0.015em; }
.fly-list small { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.fly-list a:hover b, .fly-posts a:hover span { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.mega-in.ar .fly-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fly-posts a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 8px 8px 18px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); }
.fly-posts time, .fly-posts a > span:last-child { margin-inline: 10px; }
.fp-img { display: block; height: 150px; margin-bottom: 6px; overflow: hidden; border-radius: 6px; }
/* article photos from the admin: a crop weighted to the top (photos pass 2026-10-14), so heads stay in the wide frame;
   the hover zoom grows from the frame's top edge (devices pass 2026-10-15), so a head near the top stays whole */
.fp-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform-origin: 50% 0; transition: transform 0.4s ease; }
.fly-posts a:hover .fp-img img { transform: scale(1.04); }
/* devices pass 2026-10-15 (owner rule: no head cut, menus included): 39191044, an older couple whose heads fill the
   photo's width (the man's is cut by the photo's right edge): the frame keeps that edge, and the photo does not zoom
   on hover, which would push one of the two heads out of the 223 px frame at 1200 px */
.fp-img img[src*="pexels-photo-39191044."] { object-position: 100% 50%; }
.fly-posts a:hover .fp-img img[src*="pexels-photo-39191044."] { transform: none; }
/* fresh-eyes check 2026-10-15: the woman's bob in 39191044 reaches x 0.135 of the photo, and below 1280 px the three
   frames are only 217-249 px wide (a scroll bar takes 17 px), so a 150 px tall frame cut the back of her hair. From
   1200 to 1279 px the frames take the article cards' own 16:10 shape (136-156 px tall), which holds both heads
   (x 0.10-1) and the top-weighted crop of every other article photo, the same crops as the cards on the pages. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .mega-in.ar .fp-img { height: auto; aspect-ratio: 16 / 10; }
}
.fly-posts a:hover { background: var(--white); }
.fly-posts time { color: var(--muted); font: 400 11px / 1.2 var(--f-tag); letter-spacing: 0.1em; text-transform: uppercase; }
.fly-posts span { font: 700 17px / 1.3 var(--f-sans); }
.fly-all, .fly-all:visited { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; text-decoration: underline !important; text-decoration-color: var(--tan) !important; text-decoration-thickness: 3px !important; text-underline-offset: 6px; }
.fly-all .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- 4 phone sheet (#hDrawer, below 1200 px): kraft */
.h-drawer.offcanvas {
  --bs-offcanvas-width: 440px;
  --bs-offcanvas-bg: var(--kraft);
  --bs-offcanvas-color: var(--charcoal);
  border-right: 0;
  background: var(--kraft) var(--grain);
  color: var(--charcoal);
}
@media (max-width: 575.98px) { .h-drawer.offcanvas { --bs-offcanvas-width: 100%; } }
.offcanvas-backdrop.show { opacity: 0.55; }
/* flex-shrink 0 (18 Oct): the sheet is a flex column, and on short screens its long body squeezed this 64 px header
   (49 px at 320x568, 45 px at 667x375); the body scrolls instead */
.h-drawer .offcanvas-header { display: flex; flex-shrink: 0; align-items: stretch; justify-content: space-between; height: 64px; padding: 0; border-bottom: 1px solid var(--ink-20); }
.h-drawer .h-brand { padding: 0 38px 0 20px; }
.h-drawer .h-brand::after { background: linear-gradient(to bottom left, var(--kraft) 50%, var(--tan) 50%); }
.h-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  min-height: 44px;
  margin-right: 12px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--charcoal);
  font: 400 12px / 1 var(--f-tag);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  cursor: pointer;
}
.h-close .pi { width: 20px; height: 20px; }
.h-drawer .offcanvas-body { display: flex; flex-direction: column; padding: 8px 24px 28px; }
.mb { display: grid; }
.mb-t, .mb-l, .mb-l:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ink-20);
  background: none;
  color: var(--charcoal);
  font: 800 25px / 1.1 var(--f-sans);
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mb-t.is-on > span, .mb-l.is-on { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 4px; text-underline-offset: 7px; }
.mb-l:hover { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--charcoal); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.mb-pm { position: relative; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--charcoal); border-radius: 3px; }
.mb-pm::before, .mb-pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--charcoal); transform: translate(-50%, -50%); transition: transform 0.18s ease; }
.mb-pm::before { width: 12px; height: 2px; }
.mb-pm::after { width: 2px; height: 12px; }
.mb-t[aria-expanded="true"] .mb-pm { background: var(--charcoal); }
.mb-t[aria-expanded="true"] .mb-pm::before { background: var(--kraft); }
.mb-t[aria-expanded="true"] .mb-pm::after { transform: translate(-50%, -50%) scaleY(0); }
.mb-sub { border-bottom: 1px solid var(--ink-20); }
.mb-sub > a, .mb-grp > a, .mb-trades a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  color: var(--charcoal);
  font: 600 17px / 1.3 var(--f-sans);
  text-decoration: none;
}
.mb-sub a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.mb-sub { padding: 6px 0 16px; }
.mb-sub.collapsing { padding: 0; }
.mb-trades { margin: 0; padding: 0; list-style: none; }
.mb-trades li { max-width: none; margin: 0; }
.mb-trades .mb-ic { width: 22px; height: 22px; }
.mb-h { margin: 12px 0 2px; color: var(--muted); font: 400 11px / 1.2 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.mb-grp:first-child .mb-h { margin-top: 4px; }
.mb-foot { display: grid; gap: 6px; margin-top: auto; padding-top: 28px; }
.mb-foot .h-btn { margin-bottom: 14px; }
.mb-c, .mb-c:visited { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--charcoal); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.mb-c .pi { width: 20px; height: 20px; }
.mb-c:hover span { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- 5 closing panel (C9): kraft, checklist, photo strip
   (kraft since the cross-site check of 2026-10-13: a dark rounded Join Us panel is MyHomeZilla's and SecureYrHome's) */
.hs-cta { overflow: hidden; padding: 92px 0; }
.cta-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; }
.cta-txt { grid-column: 1 / span 5; }
.cta-txt h2 { margin: 0 0 20px; color: var(--charcoal); font-size: 54px; line-height: 1.02; }
.cta-txt p { max-width: 42ch; margin: 0 0 32px; color: var(--charcoal); font-size: 20px; line-height: 1.5; }
.cta-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.cta-list {
  grid-column: 6 / span 4;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 6px 0 6px 36px;
  border-left: 1px solid var(--ink-20);
  list-style: none;
}
.cta-list li { display: flex; align-items: flex-start; gap: 14px; max-width: none; margin: 0; }
.cta-list b { display: block; color: var(--charcoal); font-size: 18px; font-weight: 700; line-height: 1.3; }
.cta-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 15px; line-height: 1.4; }
/* charcoal check squares with a kraft tick (a tan square would hardly show on the kraft board) */
.cta-list .ck { background-color: var(--charcoal); background-image: var(--check-kraft); }
/* the six crews as stamped trade tags (charcoal on kraft), two rows of three */
.cta-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; margin-top: 10px; }
.cta-tags .tag { min-height: 26px; padding: 4px 8px 3px 9px; font-size: 11px; }
.cta-strip { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 22%; max-width: 330px; margin: 0; overflow: hidden; border-radius: 20px; }
.cta-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the band holds the kraft closing panel on inner pages; 20 px under it, like the next board on the bench, the kraft
   footer board starts (the two never touch) */
.cta-band { padding-top: 40px; padding-bottom: 20px; }
.cta-band.after-alt { padding-top: 20px; }
@media (max-width: 1199.98px) {
  .cta-txt { grid-column: 1 / span 6; }
  .cta-list { grid-column: 7 / span 6; }
  .cta-strip { display: none; }
  .cta-txt h2 { font-size: 46px; }
}
@media (max-width: 991.98px) {
  .hs-cta { padding: 64px 0 0; }
  .cta-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .cta-txt, .cta-list { grid-column: 1; }
  .cta-list { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--ink-20); }
  /* the photo strip sits in the text column (same left and right edges as the copy) */
  .cta-strip { position: static; display: block; width: auto; max-width: none; height: 220px; margin: 8px 0 calc(var(--pad) - var(--inset)); border-radius: 16px; }
}
@media (max-width: 767.98px) {
  .cta-txt h2 { font-size: 36px; }
  .cta-txt p { font-size: 17px; }
  .cta-band { padding-top: 24px; }
}

/* ---------------------------------------------------------------- 6 footer (Ft6): a kraft board, never dark */
.h-foot { padding: 0 0 var(--inset); }
.hf-board { padding: 20px 0 28px; }
.hf-news { padding: 40px 48px; border-radius: 20px; }
.hf-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 56px; align-items: center; margin: 0; }
.hf-sub label { margin: 0; cursor: default; }
.hf-sub label b { display: block; color: var(--white); font: 800 34px / 1.05 var(--f-sans); letter-spacing: -0.025em; text-wrap: balance; }
.hf-sub label span { display: block; margin-top: 10px; color: var(--on-dark-muted); font: 400 17px / 1.5 var(--f-sans); }
.hf-row { display: flex; gap: 12px; align-items: flex-start; }
.hf-row input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border: 1.5px solid rgba(230, 215, 188, 0.45);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font: 400 17px / 1 var(--f-sans);
}
.hf-row input::placeholder { color: rgba(230, 215, 188, 0.75); }
.hf-row input:focus { border-color: var(--white); outline: 3px solid var(--sky); outline-offset: 2px; }
.hf-row .h-btn { min-height: 56px; }
.hf-sub .hf-err { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--tan); color: var(--white); font-size: 15px; }
.hf-sub .mini-wait, .hf-sub .mini-done { min-height: 56px; color: var(--white); }
.hf-sub .spin { background: rgba(230, 215, 188, 0.3); }
.hf-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: 56px 0 44px; }
.hf-brand { grid-column: 1 / span 3; }
.hf-guides ul { grid-auto-flow: row; }
.hf-logo, .hf-logo:visited { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 34px 22px 24px; background: var(--charcoal); text-decoration: none; }
/* the logo's tag line as live text: 11 px Michroma in kraft, two lines under the wordmark */
.hf-tagline { display: grid; gap: 3px; color: var(--kraft); font: 400 11px / 1.25 var(--f-tag); letter-spacing: 0.12em; text-transform: uppercase; }
.hf-logo::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(to bottom left, var(--kraft) 50%, var(--tan) 50%); }
.hf-logo img { display: block; width: 214px; height: auto; }
.hf-brand p { max-width: 32ch; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
/* the four link columns are sized to what they hold (16 Oct): the guides column ("HOME CARE GUIDES", the longest stamp,
   216 px at 12 px) and the contact column (the email, 210 px, and the street line) get 1.2 shares, Trades and
   HomeIsSecure 1 each. With four even columns the guides stamp ran 2 to 25 px past its column from 992 px up and touched
   the HomeIsSecure stamp at 1200 px. The min-content floor keeps every column at least as wide as its own stamp at any
   width (stamps never wrap). Beside the logo block there is room for this from 1280 px; below that the logo block sits
   above the columns (the max-width 1279.98px rule below), and below 992 px the two-column rules take over. */
.hf-cols { grid-column: 4 / -1; display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1.2fr) minmax(min-content, 1fr) minmax(min-content, 1.2fr); gap: 24px; }
.hf-col h4.tag { margin: 0 0 18px; font-size: 12px; letter-spacing: 0.12em; }
.hf-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.hf-col li { max-width: none; margin: 0; font-size: 15px; line-height: 1.4; }
.hf-col a, .hf-col a:visited { color: var(--charcoal); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.hf-col a:hover { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.hf-contact li { display: flex; align-items: flex-start; gap: 10px; }
.hf-contact .pi { width: 18px; height: 18px; margin-top: 1px; }
.hf-disc { max-width: none; margin: 0; padding: 24px 0; border-top: 1px solid var(--ink-20); color: var(--muted); font-size: 15px; line-height: 1.6; }
.hf-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--ink-20); font-size: 15px; }
.hf-bot p { margin: 0; }
.hf-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.hf-legal li { margin: 0; }
.hf-legal a { font-weight: 600; }
/* the logo block above the four columns up to 1279 px (up to 1199 px until 16 Oct): beside it, at 1200-1279 px the
   columns were too narrow for the stamps and the links (the guides stamp ran into its neighbour, links wrapped) */
@media (max-width: 1279.98px) {
  .hf-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-bottom: 40px; }
  .hf-brand p { margin: 0; }
  .hf-cols { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  .hf-sub { grid-template-columns: minmax(0, 1fr); }
  /* two columns: Trades | Company, then the guides across both (their links in two columns), then Contact */
  .hf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .hf-guides { grid-column: 1 / -1; grid-row: 2; }
  .hf-guides ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .hf-contact-col { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .hf-news { padding: 28px 22px 30px; border-radius: 16px; }
  .hf-sub label b { font-size: 27px; }
  .hf-row { flex-direction: column; align-items: stretch; }
  .hf-row .h-btn { width: 100%; }
  .hf-main { padding: 40px 0 32px; }
  .hf-cols { gap: 32px 20px; }
  /* the third column's title is "HomeIsSecure" (owner-approved rewording 2026-10-14), a 12-letter stamp that is wider
     than a half column at 12 px: on phones the column titles are 11 px (the logo tag line's size) and fit at 390 px; on
     narrower phones each column keeps at least its title's width (min-content) and Trades gives way, so no title runs
     off the board (both columns have the floor, so the full-width guides title adds nothing to the second one) */
  .hf-cols { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
  .hf-col h4.tag { font-size: 11px; letter-spacing: 0.08em; }
  .hf-bot { flex-direction: column; align-items: flex-start; }
  /* tap targets: the phone and email links are 44 px tall */
  .hf-contact li { align-items: center; }
  .hf-col .hf-contact a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .hf-contact li:last-child { align-items: flex-start; }
  .hf-col ul { gap: 0 24px; }
  .hf-col li a { display: inline-flex; align-items: flex-start; min-height: 44px; padding-block: 11px; }
  .hf-legal { gap: 0 24px; }
  .hf-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------------------------------------------------------------- 7 inner-page fit */
@media (min-width: 1200px) { .h-postp .read-bar { top: 66px; left: 0; } }
@media (max-width: 1199.98px) { .h-postp .read-bar { top: calc(var(--hdr) - 2px); } }
main { display: block; }

/* ---------------------------------------------------------------- 8 forced colours (Windows High Contrast, 18 Oct)
   The logo images are drawn for the charcoal logo blocks (white tag and name, tan accents). Forced colours paint the
   blocks in the theme's Canvas colour, white in the light themes, where the tag and the name vanished (only the tan
   "Is", eyelet and lit pane stayed). The header, phone-sheet and footer logo blocks keep their own charcoal (and the
   footer tag line its kraft); the folded corner shows the theme's Canvas behind it. Focus rings: the header logo's
   sky ring lies inside its charcoal block and stays; the footer logo's ring lies outside, on the page, so it takes
   the theme's Highlight like every other link's ring there. */
@media (forced-colors: active) {
  .h-brand, .hf-logo { forced-color-adjust: none; }
  .h-brand::after, .h-drawer .h-brand::after, .hf-logo::after { background: linear-gradient(to bottom left, Canvas 50%, var(--tan) 50%); }
  .hf-logo:focus-visible { outline-color: Highlight; }
}