/*
 * Tandem Data — Design Polish
 * Confirmed by wptandem's inspection of the live markup: the homepage is
 * Elementor Sections (elementor-section/elementor-top-section, no
 * e-con containers). All 41 interior pages are plain WordPress block-editor
 * (Gutenberg) content instead — .entry-content, .wp-block-heading,
 * .wp-block-list, .wp-block-paragraph — not Elementor at all. Rules below
 * are split accordingly. The single layout is "bold" (sections 2-18 below,
 * from BOLD-R1); since 2026-10-27 (MANIFEST §104) it is unconditional.
 * The old .td-hero/.td-stat component (and its tandem-polish.js counter
 * animation) was retired along with the pre-bitmap hero; see git history /
 * prior versions of this file if it's ever needed again.
 */

:root {
  /* Sourced from Astra's own global palette (set up during the earlier brand-color
     pass) rather than hardcoded, so this stays in sync if the palette ever changes
     in the CMS. Hex values are fallbacks only, for the unlikely case those aren't
     defined on a given page. */
  --td-orange: var(--ast-global-color-0, #ed9700);
  --td-orange-dark: #c67c00;
  /* THE single burnt-orange-on-light token (2026-09-29, retuned 2026-10-04 — Chuck is undecided on the
     exact shade long-term, so this stays the one place to retune or revert it; every "orange text/link
     on a light background" context reads this one variable, nothing hardcodes its own hex). Covers:
     body-content inline links, the main header nav, and the homepage's "Nationwide Service" /
     "See our Google reviews" links (previously on --td-orange-dark, #C67C00, confirmed only 3.34:1 on
     white — a 2026-10-04 QA finding).
     Value history: started at #B35A00 (4.80:1 on white). 2026-10-04: Chuck's starting point for a
     retune was #A86500 (4.64:1 on white) — but the header nav's real background measures
     rgb(240,241,243) (confirmed directly, not assumed; this is NOT pure white despite reading as
     "white" by eye), where #A86500 only reaches 4.11:1, under the 4.5:1 floor. Rather than split into a
     second, context-specific variable (which the "keep it in one place" instruction explicitly ruled
     out), darkened further to #9E5C00 — the one hex that clears 4.5:1 on BOTH real backgrounds this
     token actually appears against (5.27:1 on white, 4.66:1 on the header's rgb(240,241,243)), each
     confirmed with this project's usual relative-luminance formula, not assumed from the other's
     rating. Links on DARK backgrounds (footer, CTA bands, the hero) keep the brighter --td-orange as-is
     — already 7.27:1 against --td-dark — so there's nothing to fix there; this variable is deliberately
     NOT a blanket `a{color}` override. */
  --td-orange-onlight: #9e5c00;
  --td-orange-onlight-hover: #964c00;
  /* Header-nav-only state: keyboard focus gets a third, clearly distinct darker shade (hover alone
     isn't a visible-enough step for a state keyboard users specifically need to see); current-page uses
     the body text color rather than a 4th orange, so "you're on this page" doesn't read as just another
     hover tone. */
  --td-nav-onlight-focus: #7a3d00;
  --td-green: var(--ast-global-color-1, #808000);
  --td-dark: #1a1d21;
  --td-dark-2: #24282e;
  --td-gray-bg: #f4f5f6;
  /* Reverse background = the Elementor kit's custom colour "Charcoal" (homepage Contact Us band).
     tandem-polish.php prints --e-global-color-charcoal on every page; the hex is a fallback only. */
  --td-charcoal: var(--e-global-color-charcoal, #201911);
  /* Problem-mark red (2026-10-15, Nationwide "X" marks). No red existed in the palette; #d32f2f = 4.98:1 on white. */
  --td-red: #d32f2f;
  /* Answer-mark green (2026-10-15, Nationwide check only; Chuck wanted brighter than the olive brand green).
     #2e7d32 = 4.70:1 on the #f4f5f6 tint, white glyph on it 5.13:1. --td-green itself is unchanged. */
  --td-green-ok: #2e7d32;
  /* THE site check (Chuck 2026-10-29, MANIFEST §118/§120): potrace trace of check-reference.png (Segoe UI Symbol U+1F5F8,
     faux-bold), 41.42x40 viewBox. Used as a mask (colour = the ::before's background), by td-check-bold, 9f lists and
     the Hosted VoIP feature grid. Its colour: --td-check-color. */
  --td-check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.42 40'%3E%3Cpath d='M39.72 0.41C29.14 6.91 18.94 17.66 11.91 29.71C11.57 30.3 11.24 30.87 11.17 30.99C11.11 31.11 11.04 31.19 11.03 31.18C11.01 31.16 10.68 30.44 10.29 29.57C8.71 26.05 7.74 24.38 6.57 23.18C5.69 22.26 5.01 21.92 4.14 21.97C3.03 22.03 1.76 22.68 0.3 23.94C-0.06 24.26 -0.07 24.28 0.14 24.31C1.53 24.53 2.71 25.56 3.98 27.65C5.36 29.93 8.47 37.17 9.09 39.56C9.15 39.8 9.21 40 9.22 40C9.24 40 9.43 39.84 9.66 39.65C10.31 39.09 11.08 38.52 12.39 37.65C13.45 36.94 13.62 36.81 13.67 36.69C15.44 32.02 17.59 27.9 20.64 23.33C26.3 14.88 33.65 7.15 41 1.92C41.23 1.76 41.42 1.61 41.42 1.6C41.42 1.57 40.56 0.06 40.5 0.01C40.47 -0.03 40.28 0.06 39.72 0.41Z'/%3E%3C/svg%3E");
  --td-check-color: #2E9E3A;
  --td-text: #2b2e33;
  /* Typefaces are NOT named here: they come from the Elementor kit (Site Settings >
     Global Fonts: Primary = headings, Text = body) via tandem-polish.php. */
  --font-heading: var(--e-global-typography-primary-font-family), "Segoe UI", Arial, sans-serif;
  --font-body: var(--e-global-typography-text-font-family), "Segoe UI", Arial, sans-serif;
}

/* ---------- Typography ---------- */

/* Color set on body only, not on p/.elementor-widget-text-editor directly —
   this way it's inherited (lowest-priority) rather than competing with any
   element that already has its own explicit color (e.g. white hero text on
   a dark background), which a same-specificity, later-loaded rule would win
   and incorrectly override. Font/line-height are safe to set broadly since
   nothing depends on inheriting those instead. */
body {
  color: var(--td-text);
}

/* ---------- Heading typeface: single source = Elementor kit "Primary" token ---------- */

/* Every heading-style element takes its typeface from the kit's Primary typography
   token (Elementor > Site Settings > Global Fonts > Primary). Change the typeface
   there and the whole site follows: no font names live in widgets or in this file.
   Widgets keep only their own size/weight. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-counter-number-wrapper,
.elementor-icon-box-title,
.elementor-image-box-title,
.wp-block-heading {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
}

/* Page titles on plain-content pages are h1.entry-title. Astra's static CSS pins .entry-title to font-weight 400 (specificity
   0,1,0) and doesn't emit the "page title weight" option, so it beat the h1 weight set in Customizer (700) and left the
   H1 lighter than the H2s. Keep it in step with Astra's H1 weight. Size/colour/line-height come from Astra's settings. */
.entry-title,
.entry-title a {
  font-weight: 700;
}

/* ---------- Inline link color, light backgrounds only (2026-09-29) ----------
   `.entry-content a` covers every plain-content (Gutenberg) page's body-copy links — the vast majority
   of the site's inline links and the main thing the QA sweep's contrast finding was about (confirmed on
   Legacy Support's manual links, How We Work's inline links, both plain --td-orange on white). The
   `:not()` list excludes anything that's really a BUTTON printing as an `<a>` (own color rules, own
   contrast already checked) so only genuine inline text links get recolored. Underline kept (Astra's
   default), just the color + a darker hover change. Does NOT touch the header, footer, hero, or CTA
   bands — those sit on dark backgrounds where the brighter --td-orange already passes (7.27:1) and were
   left alone per Cowork's explicit instruction. */
.entry-content a:not(.td-btn):not(.wp-block-button__link):not(.elementor-button):not(.wpforms-submit) {
  color: var(--td-orange-onlight);
}

.entry-content a:not(.td-btn):not(.wp-block-button__link):not(.elementor-button):not(.wpforms-submit):hover {
  color: var(--td-orange-onlight-hover);
}

/* Elementor icon-box description links (2026-10-04 Lighthouse finding): the homepage's "Cabling" card
   has an inline link in its description text ("Low voltage" -> the new dedicated page) that `.entry-
   content a` doesn't reach, since this is Elementor content, not Gutenberg. With no specific-enough
   override, it was inheriting Elementor kit 840's own `.elementor-kit-840 a` rule (2.32:1, the bright
   orange) instead of this site's AA-safe token — found by checking which CSS rule actually wins via
   live CSSOM matching, not assumed from source order. `.elementor-kit-840 a` has specificity (0,1,1);
   this selector needs 2 classes to safely beat it. General-purpose (any icon-box description link,
   sitewide), not scoped to just the one current instance. */
.elementor-widget-icon-box .elementor-icon-box-description a {
  color: var(--td-orange-onlight);
}

.elementor-widget-icon-box .elementor-icon-box-description a:hover {
  color: var(--td-orange-onlight-hover);
}

/* ---------- Header / nav ---------- */

/* The logo must keep its intrinsic size. With the logo in the desktop right column,
   Astra sizes its container from a 0% flex-basis, and the theme's img { max-width: 100% }
   then resolves against that and collapses the image to 0 width on the mobile header
   (logo left, hamburger right). */
.custom-logo {
  max-width: none;
}

.site-header,
.main-header-bar {
  border-bottom: 1px solid #eceeef;
}

.main-navigation ul li a {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Section rhythm (alternate bands down the page) ---------- */

/* :has(.elementor-widget) excludes empty spacer sections from the banding —
   per wptandem's finding, an empty section was picking up a gray band it
   shouldn't have. */
.elementor-top-section:has(.elementor-widget):nth-of-type(even) {
  background-color: var(--td-gray-bg);
}

/* ---------- Stat counters ---------- */

.elementor-counter-title {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* ---------- Icon lists -> cards (opt-in via .td-cards) ---------- */

/* Scoped under .td-cards so plain lists (e.g. the Service Areas city directory)
   keep Elementor's native layout. Add a "td-cards" CSS class (Advanced tab) to any
   icon-list widget that should render as a card grid. */

.td-cards .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.td-cards .elementor-icon-list-item {
  flex: 1 1 260px;
  background: #ffffff;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.td-cards .elementor-icon-list-item:hover {
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.09);
  transform: translateY(-2px);
}

.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  color: var(--td-orange);
  fill: var(--td-orange);
}

/* ---------- List bullets: plain orange square, sitewide default ----------

   Standardized 2026-09-24 (Chuck): the plain orange-square marker piloted on Nationwide Service
   is now the ONLY list style, applied automatically to every plain-content list site-wide (every
   WordPress core List block, plus any Elementor text-editor list) — no per-list opt-in class
   needed. An earlier checkmark-on-square variant was tried and dropped.

   Hover: the marker grows exactly like the homepage icon-boxes' hover state. Values are NOT
   re-guessed — pulled from Elementor's own shipped hover.css for "elementor-animation-grow" (the
   hover animation already set on the live homepage icon-box/image-box icons) via the compiled
   frontend CSS: `transform: scale(1.1)`, `transition-duration: 0.3s`, `transition-property:
   transform`. Using the same numbers here means this reads as the same interaction sitewide
   instead of a one-off. */
.elementor-widget-text-editor ul:not(.elementor-icon-list-items),
.entry-content ul,
.wp-block-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.elementor-widget-text-editor ul:not(.elementor-icon-list-items) li,
.entry-content ul li,
.wp-block-list li {
  position: relative;
  list-style: none;
  padding-left: 30px;
  margin-bottom: 10px;
}

.elementor-widget-text-editor ul:not(.elementor-icon-list-items) li::before,
.entry-content ul li::before,
.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.27em;
  width: 18px;
  height: 18px;
  background-color: var(--td-orange);
  border-radius: 3px;
  transition-duration: 0.3s;
  transition-property: transform;
}

.elementor-widget-text-editor ul:not(.elementor-icon-list-items) li:hover::before,
.entry-content ul li:hover::before,
.wp-block-list li:hover::before {
  transform: scale(1.1);
}

/* Ordered Gutenberg lists (2026-10-24, IP Security Cameras "How it works"): the square above also lands on <ol> items,
   which hid the step numbers. Same orange square, with the item's number in it. Nationwide's ol.td-steps is not a
   .wp-block-list and keeps its own circles. Bold leaves ordered lists on these squares too (its cards are ul-only). */
.entry-content ol.wp-block-list > li::before {
  content: counter(list-item);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td-dark);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Ordered lists: 48px inline padding, 500 weight. Section 9 sets the bold inset (flush with the headings, like
   its ul cards) where its list rules apply. */
.entry-content ol.wp-block-list:not(li ol) {
  padding-inline: 48px;
  margin-left: 0;
}

html:root body:not(.home) #content .entry-content ol.wp-block-list:not(li ol) {
  padding-inline: 0;
}

/* ---------- Buttons ---------- */

.elementor-button,
.wpforms-submit,
.wp-block-button__link {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.elementor-button:hover,
.wpforms-submit:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* ---------- Interior (Gutenberg block) content pages ---------- */

/* Nav spacing tightened (2026-09-28) to buy back the room the bigger logo above needed — Cowork's
   call on which lever to use: this one (not an earlier hamburger cutover) since it keeps the full
   inline nav working at the same real-world desktop widths as before, rather than trading some of
   them away. Per-item padding was the biggest single lever (15px each side x 6 items x 2 sides =
   180px total) — tightened before touching font-size, which would cost readability for less room
   gained. Empirically tuned alongside the logo width increase, not independently. */
.main-header-menu > .menu-item > a {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Nav link contrast (2026-09-30): the light header's nav links inherit Astra's generic `a { color:
   var(--ast-global-color-0) }` (the bright brand orange, ~2:1 against the header bar — well under
   WCAG AA), confirmed via a live CSSOM rule-matching check rather than assumed. Scoped to the header's
   OWN top-level links only, deliberately NOT a blanket `a{color}` change — the homepage's transparent
   header keeps its own separate (and far higher-specificity) white-on-photo rules from Astra, unaffected
   by this. Four visually distinct states, all independently confirmed >=4.5:1 against rgb(240,241,243):
   resting/hover/focus each a progressively darker burnt-orange, current-page in the body text color so
   "you're already here" doesn't read as just another hover shade. 2026-10-04: resting/hover now read
   the single sitewide --td-orange-onlight/-hover token (see its own comment at the top of this file for
   why) instead of header-only variables — one fewer near-duplicate pair to keep in sync. */

.main-header-menu > .menu-item:hover > a,
.main-header-menu > .menu-item.focus > a {
  color: var(--td-orange-onlight-hover);
}

.main-header-menu > .menu-item > a:focus-visible {
  color: var(--td-nav-onlight-focus);
  outline: 2px solid var(--td-nav-onlight-focus);
  outline-offset: 2px;
}

/* Dropdown submenu links (2026-10-05, Chuck): were still Astra's bright #ED9700 (2.33:1 on the white
   submenu) while the top-level links used the burnt-orange token. Same token and states as the
   top-level rules above, so the two levels look uniform. On white: resting 5.27:1, hover 6.31:1,
   focus darker still. The 2px orange top rule on the submenu stays as it is. */
.main-header-menu .sub-menu .menu-item > a {
  color: var(--td-orange-onlight);
}

.main-header-menu .sub-menu .menu-item:hover > a,
.main-header-menu .sub-menu .menu-item.focus > a {
  color: var(--td-orange-onlight-hover);
}

.main-header-menu .sub-menu .menu-item > a:focus-visible {
  color: var(--td-nav-onlight-focus);
  outline: 2px solid var(--td-nav-onlight-focus);
  outline-offset: -2px;
}

.main-header-menu .sub-menu .menu-item.current-menu-item > a {
  color: var(--td-text);
}

/* Top-level nav dividers (2026-09-30): desktop only (Astra's own tablet breakpoint is 1250px — see
   astra_tablet_breakpoint in tandem-polish.php — so 1251px+ matches exactly where the mobile/off-canvas
   menu is NOT in play). `>` + adjacent-sibling keeps this off dropdown submenu items entirely — a
   submenu's own .menu-item is nested under .sub-menu, never a direct child of .main-header-menu, so
   this selector structurally can't match it, no extra exclusion needed. */
@media (min-width: 1251px) {

  .main-header-menu > .menu-item + .menu-item::before {
    content: "";
    position: absolute;
    left: 0;
    /* 2026-10-05: was top:20%/height:60% (48px in the 80px bar, read as full-height). Now a short
       centered tick, close to the homepage hero nav's 13.6px that Chuck likes. Color unchanged. */
    top: 50%;
    height: 18px;
    transform: translateY(-50%);
    width: 1px;
    background: rgb(201, 196, 184);
    pointer-events: none;
  }
}

/* 2026-10-04 cleanup: this rule used to also set `color: var(--td-orange)` (and a sibling `:hover`
   rule set `color: var(--td-orange-dark)`) — both confirmed dead via live CSSOM rule-matching (the
   09-29 fix's higher-specificity `:not()` chain below always wins instead) and removed as actively
   misleading dead code, not a styling change. font-weight is the one thing this rule actually
   contributes live — kept. */
.entry-content a {
  font-weight: 500;
}

/* ---------- Transparent header (per page; homepage only via Astra's page-level switch) ---------- */

/* Astra removes the header from the flow and overlays it when body.ast-theme-transparent-header is set
   (Astra page setting "Transparent Header: Enabled", currently only on the homepage). --td-header-h = that header's
   height. Header colours/logo live in Astra's transparent-header settings (Customizer), not here. */
.ast-theme-transparent-header {
  --td-header-h: 94px;
}

@media (max-width: 1250px) {
  .ast-theme-transparent-header {
    --td-header-h: 92px;
  }
}

/* ---------- Buttons, shared CTA pattern (2026-09-27) ----------
   Pulled out of the homepage hero's own inline styles at Cowork's direction: this solid-orange /
   white-outline pair is now the standard CTA button treatment site-wide, not a hero-only one-off,
   so it lives here instead of trapped in that widget's <style> block. */
.td-btn {
  display: inline-block;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.td-btn:hover {
  transform: translateY(-1px);
}

.td-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* !important on color here: this class is meant to be dropped into any context (hero over a photo,
   plain content, wherever) and stay legible regardless of ambient link-color rules with higher
   selector specificity than a single class — confirmed necessary, not precautionary: on the homepage
   hero this collided with an Elementor-widget-scoped `a` color rule and rendered orange-on-orange
   (invisible) without it. */

.td-btn--primary:hover {
  background: var(--td-orange-dark);
  border-color: var(--td-orange-dark);
  color: var(--td-dark) !important;
}

.td-btn--ghost:hover {
  background: #fff;
  color: var(--td-dark) !important;
}

/* Homepage hero Call button, every breakpoint (2026-10-05, Chuck): dark translucent fill so the trail's
   glow is screened where it passes behind the button. Outline + white text unchanged. :not(:hover) leaves
   the hover (solid white) as it was. Hero-scoped: the CTA bands' ghost buttons are untouched. */
.td-home-hero__ctas .td-btn--ghost:not(:hover) {
  background-color: rgba(0, 0, 0, 0.45);
}

/* ---------- Homepage hero v2: photo hero + bottom nav strip (2026-09-27, DESKTOP ONLY) ----------
   Cowork's redesign spec: the Communications page's header photo as the hero background, H1 +
   subhead over the photo's upper-left, the light TD logo mid-right, the two standard .td-btn CTAs
   below the logo (grouped with it — see .td-home-hero__cluster). Section 17 (bold Home hero) rebuilds
   it on top of these base rules: one hero at every width, Astra's own header and menu.


   ROUND 2 (2026-09-27 pm), against Cowork's Photoshop comp (to-do/Alternate Heroes/Target hero.png):
   fixed 486px band height (was a 560-680px viewport-relative clamp — a static comp wants a static
   height, not one that reflows the whole composition per viewport), a flat darkening overlay added
   over the photo since the plain photo read too bright/busy against the comp, H1/subhead forced to
   one line each (was wrapping to two, which also pushed the subhead down into the photo's brighter
   mid-ground), and the background-position retuned — the comp's crop keeps the glowing cable's
   brightest terminus well clear of the logo, ours didn't at the round-1 position.

   ROUND 3 (2026-09-27 evening), against Comparison Hero With Variable Screen(-and-Hints).png: the
   flat full-hero overlay from round 2 is GONE, replaced by Cowork's own technique from their white-
   background reference mockup — a soft, diffuse, zero-offset drop shadow behind each element that
   needs it (title block, CTA pair; the logo already had its own from round 1), so only the areas that
   actually need contrast get darkened and the rest of the photo stays vivid. That's a real box-shadow
   on each element (0 0 blur spread rgba(...)) — a true "screen the element, not the image" effect CSS
   can do natively, no per-element image editing needed. Background-position retuned again per Cowork's
   own pixel measurement ("~90px above the menu bar, should rest on it") to drop the trail's visible
   bottom edge onto the menu strip (verified: 6px clearance, was ~90px). Title block also nudged per
   Cowork's hint image (measured against its 40x46px reference boxes, scale-corrected): 40px left,
   ~20px further from the top. */
.td-home-hero__desktop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 486px;
  background: #0f0d0b var(--td-home-hero-url) var(--td-home-hero-pos, 50% 50%) / cover no-repeat;
  color: #fff;
}

/* Elementor's default ~20px widget-to-widget spacing zeroed for the widgets in the hero's column (page 91,
   column 7757ad0), so the column ends on the hero photo's bottom edge. */
.elementor-element-7757ad0 > .elementor-widget-wrap > .elementor-element {
  margin-bottom: 0;
}

.td-home-hero__title-block p {
  position: relative;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  /* 1.5rem (24px), up from 1.3rem (20.8px) — same bump as h1, above. */
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  /* Box tight around the text (fit-content), pushed right (margin-left auto); 14a resets both on the hero. */
  width: fit-content;
  margin: 0 0 0 auto;
  /* 2026-09-29: same pair as h1 but a touch heavier (subhead is smaller/lighter-weight text, more
     vulnerable against the now full-vibrance photo behind it — Cowork's own "slightly heavier on the
     subhead if it helps" option). */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.68);
}

/* round 2: logo + CTAs wrapped in one flex-column group instead of two independently-positioned
   elements — this is what makes the logo centered over the button PAIR (correction #8) structural
   rather than a hand-tuned offset that would drift if a button label ever changes, and makes the
   32px gap (correction #7) an actual flex gap instead of two numbers that have to be kept in sync.
   Width is shrink-to-fit (Elementor prints no explicit width), so it's exactly as wide as its widest
   child — normally the button row — and align-items:center centers the narrower logo within that. */
.td-home-hero__cluster {
  position: absolute;
  z-index: 1;
  right: 4%;
  top: 222px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 32px flex gap = the logo-to-button gap, per correction #7. Round 3 briefly ran this at 18px to
     compensate for the CTA row's own padding (needed for a box-shadow); round 4 dropped that padding
     (see .td-home-hero__ctas below) so the gap goes back to the actual target value directly. */
  gap: 32px;
}

.td-home-hero__ctas {
  position: relative;
  display: flex;
  gap: 12px;
}

/* ---------- Interior page header (opt-in, lightweight echo of the homepage hero) ---------- */

/* Not wired into any page yet — this is the "gradient + faint static wave lines"
   motif from the interior-header discussion: same brand palette as .td-hero, but
   with none of that hero's cost. No blur filter, no JS, no animation, and only two
   thin static SVG strokes (vs. the homepage wave's ~120 path instances across 3
   blurred layers) — cheap enough to repeat on all 41 interior pages without a
   measurable Core Web Vitals hit, even on low-end phones. Height is a single
   compact, uniform band (not the homepage's full hero height) meant to carry just
   an H1 and, optionally, a breadcrumb. Apply by giving a page's header/cover
   element the "td-page-header" class; content (h1, breadcrumb) goes inside a
   ".td-page-header__inner" wrapper, the same pattern as .td-hero__inner.

   The background lives on ::before rather than directly on the element so a
   per-page variant (below) can shift/tint just the artwork without touching the
   white H1/breadcrumb text sitting in front of it. */
.td-page-header {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(140px, 16vw, 200px);
  padding: 32px 24px;
  background-color: var(--td-dark);
}

.td-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(237, 151, 0, 0.14), transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(128, 128, 0, 0.16), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0,150 C200,60 350,190 550,90 C650,40 720,80 800,50' fill='none' stroke='%23ed9700' stroke-opacity='0.18' stroke-width='2'/%3E%3Cpath d='M0,80 C180,140 380,20 560,110 C680,170 740,120 800,150' fill='none' stroke='%23808000' stroke-opacity='0.14' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover, cover, 100% 100%;
  background-position: 50% center;
}

.td-page-header__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Interior page header: per-page variation (opt-in, no JS) ----------

   Chuck asked whether the CMS could randomize this on the fly instead of every
   page getting the identical band. Two ways to read "randomize":

   - True per-request randomness (a different look on every reload) actively works
     against page caching — a cache serves the same bytes to everyone, so "random"
     either breaks the cache or means recomputing per visitor — and reads as buggy
     rather than intentional ("didn't this page look different a second ago?").
   - Per-PAGE variation that's stable every time you load that URL, but different
     from the next page's, gets the visual variety without either problem.

   So: a small fixed set of variants (5, td-hue-0..td-hue-4), picked once per page
   by hashing the post ID — deterministic, so it's cacheable exactly like the rest
   of the page and never flickers between visits. tandem-polish.php adds the class
   to body_class(); nothing here needs the class list to change if pages are added
   or removed later. Each variant only nudges hue (kept to a ±14deg band so orange
   stays orange-ish and olive stays olive-ish, never drifting to an off-brand color)
   and moves the artwork's focal point — no new assets, same one SVG + two
   gradients doing the work for every page. */
.td-hue-1 .td-page-header::before { filter: hue-rotate(7deg); background-position: 35% center; }
.td-hue-2 .td-page-header::before { filter: hue-rotate(-7deg); background-position: 65% center; }
.td-hue-3 .td-page-header::before { filter: hue-rotate(14deg); background-position: 30% 60%; }
.td-hue-4 .td-page-header::before { filter: hue-rotate(-14deg); background-position: 70% 40%; }
/* td-hue-0 is the default above: no filter, centered — deliberately left as one
   of the five rather than special-cased, so it's one variant among equals. */

.td-page-header h1 {
  font-family: var(--font-heading);
  color: #ffffff;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0;
  font-weight: 700;
}

.td-page-header .td-breadcrumb,
.td-page-header .td-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.td-page-header .td-breadcrumb a:hover {
  color: #ffffff;
}

/* ---------- Interior page header, photo variant (locked design, 2026-09-24) ----------

   Replaces .td-page-header above on a PAGE-BY-PAGE basis, only once a page has finished,
   on-style art — Voice & Data Cabling is the first. Every other interior page keeps the
   abstract gradient+wave .td-page-header until its own art is ready; the two are independent
   class families and never cascade into each other. Values below are literal, taken from the
   locked mockup (Chuck's "Option B: dark, weighty band").

   Markup: a `.td-page-header-photo` band (with a `.td-page-header-photo__inner` wrapper
   holding a `.td-eyebrow` + the page's own `<h1>`) followed by a sibling `.td-mission-callout`
   paragraph — same two-piece structure as the mockup, not nested. Astra's own page-title output
   is disabled per-page (postmeta `site-post-title = disabled`, Astra's own mechanism) rather
   than hidden with CSS, so there's exactly one H1 in the DOM, not a hidden duplicate. */
.td-page-header-photo {
  position: relative;
  height: 340px;
  display: flex;
  align-items: flex-end;
  /* Overlay: nearly clear over the photo, only reaching ~80% dark at the very bottom where the title sits.
     (An earlier version used a flat .42 -> .80 screen tuned for the old bright studio photo; on the new dark,
     high-depth renders it flattened them to gray.) Crop is set PER IMAGE via the two custom properties below
     (inline on each page's band), recomposed around where that image's interest actually is. */
  background-image: linear-gradient(180deg, rgba(15, 16, 18, 0.03) 0%, rgba(15, 16, 18, 0.1) 35%, rgba(15, 16, 18, 0.58) 68%, rgba(15, 16, 18, 0.82) 100%), var(--td-page-header-photo-url);
  background-size: var(--td-page-header-photo-size, 100%);
  background-position: var(--td-page-header-photo-pos, 50% 20%);
  background-repeat: no-repeat;
}

.td-page-header-photo__inner {
  position: relative;
  z-index: 1;
  padding: 30px 40px 26px;
}

/* Eyebrow size (Chuck's mockup, 2026-10-16): eyebrow = half the section H2 (14pt Inter over 28pt Space Grotesk).
   Section H2 is 30/28/26px at desktop/<=1250/<=544 (Astra breakpoints), so 15/14/13px. One rule for every
   .td-eyebrow on the site (L2/L3 header bands + Nationwide band eyebrows). Was 0.72rem (10.8px).
   Weight 700 = Inter Bold per the mockup (2026-10-16; was 600). Inter 700 added to the Google Fonts request in tandem-polish.php. */
.td-eyebrow {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-orange);
  margin: 0;
}

@media (max-width: 1250px) {
  .td-eyebrow {
    font-size: 14px;
  }
}

@media (max-width: 544px) {
  .td-eyebrow {
    font-size: 13px;
  }
}

/* ---------- Mission-statement callout (intro paragraph directly under a page header) ---------- */

.td-mission-callout {
  position: relative;
  background: linear-gradient(180deg, rgba(237, 151, 0, 0.08), rgba(237, 151, 0, 0.03));
  padding: 18px 40px 18px 54px;
  margin: 0 0 4px;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--td-dark);
  animation: td-mission-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: 0.15s;
}

.td-mission-callout p {
  margin: 0 0 0.7em;
}

.td-mission-callout a[href^="tel:"] {
  white-space: nowrap;
}

.td-mission-callout p:last-child {
  margin-bottom: 0;
}

@keyframes td-mission-in {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-mission-callout {
    animation: none;
  }
}

/* ---------- Inset figure (an on-style illustration, full frame, placed in body copy) ---------- */

.td-inset-figure {
  float: right;
  width: 44%;
  margin: 4px 0 16px 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.td-inset-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Astra's theme stylesheet sets `h1,h2,h3,h4,h5,h6 { clear: both }` sitewide (a normal, sensible
   default so headings never sit half-tucked beside a float from the PREVIOUS section) — but the
   mockup this component is built from puts an inset figure directly before a heading whose own
   body text is meant to wrap beside it. Checked against a plain build of the mockup (no Astra
   loaded): without Astra's rule the heading + its text wrap beside the figure exactly as
   intended; ON the real site, that same clear:both made the heading (and everything after it)
   jump straight past the image, leaving the tall left-hand gap Chuck's instruction was written to
   avoid. Scoped narrowly to a heading that DIRECTLY follows an inset figure — every other heading
   on the site keeps Astra's normal clear-the-float behavior. */
.td-inset-figure + h2 {
  clear: none;
}

@media (max-width: 600px) {

  .td-inset-figure {
    float: none;
    width: 100%;
    margin: 0 0 16px;
  }
}

/* ---------- Card grid (image, title, short description, footer links) ----------

   First used on Legacy & Discontinued System Support (2026-09-25). Layout per Cowork's "Legacy Cards.jpg"
   reference: image on top, then title, a ~3-line description and a small footer link row, in a grid
   (3 across desktop, 2 tablet, 1 phone). Footers align to the bottom of each card. The last card can be
   a call-to-action variant (.td-card--cta, no image). Card titles are real <h2>s (as the page's
   per-system headings were) restyled small, so the page outline is unchanged. */
.td-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 28px 0 8px;
}

.td-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
  scroll-margin-top: 110px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.td-card:hover {
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.1);
  transform: translateY(-2px);
}

.td-card__img {
  display: block;
  width: 100%;
  /* 3 / 1, was 2.3 / 1: the v2 card renders (2026-09-25) are ~2.9-3.4 : 1 with an icon column on the far right edge;
     in the old 2.3 : 1 box `cover` trimmed 20-32% off their width and cut the icons in half. To go back to the old
     shape, restore 2.3 / 1 (and expect the icons to be clipped). */
  aspect-ratio: 3 / 1;
  object-fit: cover;
  background: #f1f2f4;
}

.td-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 18px;
}

.td-card__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-orange);
}

.entry-content .td-card__title {
  margin: 2px 0 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.td-card__sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #6b7078;
}

.td-card__text {
  margin: 10px 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.td-card__foot {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #eceeef;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #6b7078;
}

.td-card--cta {
  justify-content: center;
  background: linear-gradient(180deg, rgba(237, 151, 0, 0.1), rgba(237, 151, 0, 0.04));
  border-color: rgba(237, 151, 0, 0.35);
}

.td-card--cta .td-card__body {
  justify-content: center;
  padding: 28px 24px;
}

@media (max-width: 900px) {
  .td-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .td-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Icon box (Gutenberg-compatible echo of Elementor's icon-box widget, 2026-09-28) ----------

   Business Phone Systems and Communications (both Elementor) use Elementor's native icon-box widget
   to link a hub page to its children — icon left, stacked title + description, hover-grow. Voice &
   Data Cabling's hub is plain Gutenberg content (not Elementor), and converting an existing, working
   page to Elementor just to get this one widget wasn't worth the churn/risk — so this is a small,
   self-contained HTML+CSS equivalent instead, built to read the same way. Icon is a plain inline SVG,
   not Font Awesome: Font Awesome is only enqueued on Elementor-templated pages, so an <i class="fas
   fa-*"> here would silently render as nothing on a Gutenberg page. Hover-grow uses the exact same
   values as the sitewide plain-bullet marker above (scale(1.1), 0.3s, transform) — pulled from
   Elementor's own shipped hover.css for "elementor-animation-grow", the same animation the icon-box
   widget itself uses, so this reads as the same interaction even though it's a different element. */
.td-icon-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin: 28px 0;
}

/* 2026-10-05: 4-card grids (Cabling hub, once Cat5e/Cat6/Cat6A made it 4) read as 2x2. auto-fit gave
   a cramped 4-up at 1440 (every title wrapped, ~180px text columns) and a 3+1 orphan at ~1100. */
.td-icon-box-grid--2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .td-icon-box-grid--2x2 { grid-template-columns: minmax(0, 1fr); }
}

a.td-icon-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* !important: text-decoration painted by an ancestor <a> still visually passes through a
     descendant that sets text-decoration:none on itself (a genuine CSS quirk, not a specificity
     issue) — has to be killed at the actual originating element, not just the title/desc spans
     that were the visibly-underlined part. Those two still keep their own text-decoration:none
     too, since the same ambient-underline collision would otherwise apply to them individually. */
  text-decoration: none !important;
  color: inherit;
}

.td-icon-box__icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--td-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.td-icon-box__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}

a.td-icon-box:hover .td-icon-box__icon {
  transform: scale(1.1);
}

/* both spans need display:block — inline by default, which ran the title and description
   together on one line instead of stacking them — and text-decoration:none !important: same
   ambient-link-styling collision as .td-btn (see that component's own comment) — `.entry-content a`
   (specificity 0,1,1) still beats a flat single-class rule (0,1,0), so without !important these
   stayed underlined regardless. */
.td-icon-box__title {
  display: block;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--td-text);
  text-decoration: none !important;
}

.td-icon-box__desc {
  display: block;
  margin: 0;
  color: var(--td-text);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none !important;
}

/* ---------- Interior page header, LIGHT variant (L3 / admin pages, 2026-09-25) ----------

   A third header family alongside .td-page-header (abstract dark, unused) and .td-page-header-photo
   (dark hub-page "swoop" bands): a shallow, pale banner for admin/technical pages and pages nested
   under a hub. Source art per Collateral/Prompt light graphic bands for innermost pages.txt — equipment
   cluster left, signal-wave carrying the eye right, most of the frame kept open. Title sits in that open
   area, so it's RIGHT-aligned (unlike the dark bands' left-aligned white text) — putting it over the
   equipment side made it illegible in testing. Text is dark (matches ordinary heading color), since the
   art is pale, not white. Same per-page crop mechanism as .td-page-header-photo (two custom properties,
   set inline per page) so new L3 pages can reuse this without a CSS change.
   Markup: `.td-page-header-light` > `.td-page-header-light__inner` > .td-eyebrow + the page's own <h1>.
   No mission callout — this family is header-only, page content is untouched below it.

   2026-09-28 punch list: (1) the eyebrow duplicated the H1 verbatim on every single L3 page (checked
   all 13) so the <p class="td-eyebrow"> markup was removed sitewide rather than page-by-page — the CSS
   rule below is left in place harmlessly for any future page that has a genuinely different eyebrow.
   (2) margin-bottom added — the first heading/paragraph after the band had no breathing room at all
   ("page content is untouched below it" was taken a little too literally); a margin on the band itself
   is simpler and more robust than chasing every possible first-child type (h2, p, list...) that could
   follow it on a given page. */
.td-page-header-light {
  position: relative;
  height: clamp(120px, 14vw, 160px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background-color: #fdfaf7;
  background-image: var(--td-page-header-photo-url);
  background-size: var(--td-page-header-photo-size, cover);
  background-position: var(--td-page-header-photo-pos, 20% 55%);
  background-repeat: no-repeat;
  border-bottom: 6px solid var(--td-orange);
  margin-bottom: 32px;
}

/* "Glow-up" pass (2026-09-28, Chuck's L3 Band Glow-up.png mockup): eyebrow + H1 dropped to sit flush
   against the orange rule (was vertically centered in the band) instead of floating above it, and each
   gets its own white radial-gradient glow behind it — the mirror image of the DARK glows built for the
   homepage hero's white-on-photo text (since removed from the homepage): there it was dark text needing a light background pushed dark; here it's dark text needing a light
   background pushed lighter/more uniform. Same mechanism (radial-gradient ellipse on ::before,
   z-index:-1, pointer-events:none — NOT box-shadow, which only paints outside an element's box, the
   bug that cost a full round on the homepage hero before landing on this approach there). */
.td-page-header-light__inner {
  position: relative;
  padding: 0 40px 18px;
  text-align: right;
  max-width: 100%;
}

.td-page-header-light .td-eyebrow {
  position: relative;
  margin: 0;
}

.td-page-header-light h1 {
  position: relative;
  /* #3a3a3a, not var(--td-dark) (#1a1d21, near-black) — matches the sitewide body-heading gray,
     confirmed against a live H2's computed color (rgb(58,58,58)) rather than trusting Chuck's
     Photoshop-eyedropped 3c3c3c blind; the two are close enough to be the same practical value. */
  color: #3a3a3a;
  margin: 4px 0 0;
}

/* Phone-width band text (Chuck, 2026-10-05, MANIFEST §25): <=700px only, tablet/desktop untouched. Applies to the whole
   light-band family (L3 children + admin pages + Service Areas) so phones read consistently. Title: Space Grotesk,
   clamp 22-26px, -0.03em, right-aligned 15px off the band edge. 1px outer #bebebd halo = 2px stroke painted UNDER the
   fill (paint-order), so the glyph shape isn't eaten. Eyebrow: charcoal instead of orange (orange glow behind it).
   padding-bottom keeps descenders >=8px clear of the orange rule (measured, see work-log). Long titles wrap to 2 lines. */
@media (max-width: 700px) {

  .td-page-header-light .td-page-header-light__inner h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(22px, 6.8vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-align: right;
    color: #3a3a3a;
    -webkit-text-stroke: 2px #bebebd;
    paint-order: stroke fill;
    overflow-wrap: break-word;
  }

  /* Remote Programming (7910) only, Chuck 2026-10-05: at the clamp's 26/24.5px its "R" sat over the dark switch stack
     on the busy phone-systems band (pos 20% 45%). Pinned to the clamp's 22px minimum; image position unchanged. */
  .page-id-7910 .td-page-header-light .td-page-header-light__inner h1 {
    font-size: 22px;
  }
}

/* Strip-art L3 bands (band-cabling-l3-v4: How We Work, Fiber, Low Voltage, Cat5e; band-phone-systems-l3-v3: Hosted PBX,
   Current Systems, Legacy Support, Remote Programming). Both are 1202x164 strips with the equipment packed at the far left,
   shown at inline pos 0% 50% from 701px up. History: 2026-09-29 phones got a right-anchored (100% 50%) wave-only crop of
   the cabling strip below 700px; 2026-10-05 that <=699px rule was REMOVED (MANIFEST §31). At <=700px both families now
   swap to the plain wave image /contact-us/ uses (band-admin-generic-700.webp, at its exact computed 50% 55% / cover).
   That rule lives after the L2/L3 tier blocks below so it wins the cascade. */

/* ---------- L2/L3 band images: responsive sized tiers (2026-09-29) ----------
   Same problem the homepage hero had (fixed earlier the same day): every one of these bands was
   serving its full 1536px (L2) or 1600-2172px (L3) source to every viewport, phones included — found in
   the 2026-09-29 QA sweep's page-weight check (`voice-data-cabling-header.webp` alone was 205KB, same
   bytes to a phone as a 4K monitor). Unlike the hero, none of these need a per-image "keep the subject
   in frame" crop: L2 bands render at `background-size:100%` (always full width, never cropped
   horizontally) and the L3 bands' `cover` crop only trims a wide, mostly-abstract/generic photo, not a
   composed subject — so a plain LANCZOS downscale of the existing file, same background-position, is
   enough. Two tiers per image (1100px, 700px — matching the hero's own tier widths for consistency).

   First attempt overrode the `--td-page-header-photo-url` CUSTOM PROPERTY from these media-query rules,
   matching how the property is fed in — didn't work: that same property is ALSO set inline on the
   element (`style="--td-page-header-photo-url:url(...)"` per page), and an inline declaration always
   wins over an external stylesheet rule for that exact property, media query or not (confirmed via a
   CSSOM check that showed my override rule matching and "winning" in the cascade sense, while the
   COMPUTED style still showed the old url — the custom property's cascaded value was mine, but nothing
   ever recomputed from it because the element's own inline value pre-empted it at the property level).
   The cabling v4 band above sidesteps this by overriding `background-position` (a plain property, never
   set inline) rather than the custom property that would otherwise feed it — same fix applied here:
   override `background-image` directly (the actual consuming property) instead of the custom property. */
@media (max-width: 1100px) {
  .td-page-header-light[style*="manuals-documentation-header"] { background-image: url('/wp-content/uploads/2026/09/manuals-documentation-header-1100.webp'); }
  .td-page-header-light[style*="paging-systems-header"] { background-image: url('/wp-content/uploads/2026/09/paging-systems-header-1100.webp'); }
}

@media (max-width: 700px) {
  .td-page-header-light[style*="manuals-documentation-header"] { background-image: url('/wp-content/uploads/2026/09/manuals-documentation-header-700.webp'); }
  .td-page-header-light[style*="paging-systems-header"] { background-image: url('/wp-content/uploads/2026/09/paging-systems-header-700.webp'); }
}

/* ---------- Homepage "Contact Us" band (charcoal, full-bleed) ---------- */

/* Colour (#201911, kit custom colour "Charcoal"), layout and the framed map are native Elementor settings on the
   section. This only tightens paragraph rhythm inside the contact details to match the approved mockup. */
.td-contact-band .elementor-widget-text-editor p {
  margin: 0 0 16px;
}

.td-contact-band .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ---------- Entrance animations, dialled back ---------- */

/* Elementor's stock "Bounce In" overshoots and its "Fade In Left/Right" slide the element a full 100% of its own width, which
   is far too aggressive on big bands and image rows. The animation NAMES chosen in Elementor are kept (so nothing has to be
   re-picked per widget); these class rules re-point them at gentler keyframes: same character (scale-in / slide-in from the
   side), no overshoot, ~28px travel instead of 100%. Specificity (0,2,0) beats Elementor's (0,1,0) regardless of load order.
   Used today on the homepage only: bounceIn = the "When communications break down" band; fadeInLeft/Right = "More About
   Tandem Data". fadeIn / fadeInDown are left as Elementor ships them. */
@keyframes tdSoftScaleIn {
  from { opacity: 0; transform: scale3d(0.97, 0.97, 1); }
  to   { opacity: 1; transform: none; }
}

@keyframes tdSoftInLeft {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes tdSoftInRight {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.animated.bounceIn {
  animation-name: tdSoftScaleIn;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.animated.fadeInLeft {
  animation-name: tdSoftInLeft;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.animated.fadeInRight {
  animation-name: tdSoftInRight;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .animated.bounceIn,
  .animated.fadeInLeft,
  .animated.fadeInRight {
    animation: none;
  }
}

/* ---------- Footer ---------- */

/* Astra's footer builder paints each row (.site-primary-footer-wrap / .site-below-footer-wrap)
   with its own background, which hides a background set only on footer.site-footer and left the
   light text below unreadable on light rows. The dark band lives on the footer element; the rows
   are made transparent so it shows through. */
.site-footer,
footer.site-footer {
  background-color: var(--td-dark-2);
  color: rgba(255, 255, 255, 0.75);
}

.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
  background-color: transparent;
}

.site-footer .site-primary-footer-wrap {
  padding-top: 48px;
  padding-bottom: 24px;
}

.site-footer .site-below-footer-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer .site-footer-below-section-1 {
  justify-content: flex-start;
  text-align: left;
}

.site-footer .site-footer-below-section-2 {
  justify-content: flex-end;
  text-align: right;
}

.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
  text-align: left;
}

.site-footer .ast-footer-html-1,
.site-footer .ast-footer-html-1 .ast-builder-html-element,
.site-footer .ast-footer-html-1 p {
  text-align: right;
}

.site-footer .widget-title {
  color: #ffffff;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.site-footer p,
.site-footer .ast-footer-copyright,
.site-footer .ast-builder-html-element {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer .widget_nav_menu li {
  margin-bottom: 8px;
}

.site-footer a:hover {
  color: #ffffff;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .td-cards .elementor-icon-list-items {
    flex-direction: column;
  }
}

/* ---------- td-list-2col: short plain lists doubled up into two columns (2026-09-29) ----------
   Chuck's call for pages whose short plain lists sat in a narrow left column with empty space to the
   right (Nationwide Service, Paging Systems first; reusable for Batch 2 via Additional CSS class
   "td-list-2col" on the list block). Layout ONLY: the sitewide orange-square markers, their hover-grow
   and the li spacing above are untouched — NOT td-feature-grid (no lead/description split, no
   dividers). CSS multi-column, so order reads down column 1 then column 2; with an odd count the
   extra item lands in column 1 (column-fill: balance). Rule of thumb from the brief: only lists of 4+
   items get the class; 3 or fewer stay single-column. */
.entry-content ul.td-list-2col li {
  break-inside: avoid; /* an item (and its absolutely-positioned marker) never splits across columns */
}

/* ---------- Content list inset, sitewide (2026-09-29, Chuck's call) ----------
   Every top-level bullet list in Gutenberg page content gets EQUAL left and right padding (48px) at
   desktop — the list stays full width (not a narrower centered block), so its left edge keeps the same
   relationship to the headings/paragraphs around it, just stepped in. Multi-column lists
   (td-list-2col, td-feature-grid) lay out INSIDE the padded box; their 44px column gap is unchanged.
   Below 800px: 20px left, no right inset, so phones keep their width.
   Scope, deliberately narrow (surveyed first: all 60 content lists are bare <ul> or .wp-block-list,
   none nested):
   - not nested lists (li ul) — none exist today, but a sub-list shouldn't double-indent;
   - not Elementor widget lists (.elementor ul — homepage, hubs; they have their own layout);
   - not WPForms checkbox/radio lists (.wpforms-container ul on Contact / Get a Quote);
   - footer/nav lists are outside .entry-content, so never matched.
   Replaces the earlier "max-width cap on lists" idea. The :not() arguments also give this rule
   enough weight (0,3,4) to override td-feature-grid's own padding:0 without !important. */
.entry-content ul:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
  padding-inline: 48px;
  /* Astra adds `.entry-content[ast-blocks-layout] > ul { margin-left: 1em }` to lists sitting directly in
     the content (not inside groups), which silently made the first version of this inset 63px left /
     48px right (34px on phones). Zeroed so the inset is exactly the padding, equal on both sides. */
  margin-left: 0;
}

@media (max-width: 799px) {
  .entry-content ul:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
    padding-inline: 20px 0;
  }
}

/* td-list-2col--aligned (2026-09-29, Voice & Data Cabling hub): a 2-column list sitting directly above
   a .td-icon-box-grid card row. Both read as a 2-column grid, so the list drops the sitewide 48px
   inset and matches the card row's geometry exactly: flush to the content edges, 28px column gap
   (= .td-icon-box-grid gap), so column 1's squares start at the left card's icon x and column 2's at
   the right card's. 68px below (was 28, collapsed with the card grid's 28px top margin) so the two
   grids read as separate blocks — no divider. Desktop only: below 800px the list keeps the normal
   stacked 20px-inset look. Selector mirrors the sitewide inset rule + the modifier so it outranks it. */
@media (min-width: 800px) {
  .entry-content ul.td-list-2col.td-list-2col--aligned:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
    padding-inline: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 68px;
    column-gap: 28px;
  }
}

/* ---------- td-cols-2: two side-by-side content columns (2026-09-29, first used on Nationwide) ----------
   Group block (class td-cols-2) holding two child groups, each an H2 + its content. 1.2fr / 1fr,
   44px gap, top-aligned; stacks in source order below 800px. Same .entry-content .wp-block-group
   weight as the other group components so Astra's block padding/margins don't win. */
.entry-content .wp-block-group.td-cols-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0 44px;
  align-items: start;
  margin: 0 0 1em;
  padding: 0;
}

.entry-content .wp-block-group.td-cols-2 > .wp-block-group {
  margin: 0;
  padding: 0;
}

/* Shared rows (2026-09-29, Carrier Services): each column is H2 + list, and when one H2 wraps to two
   lines its list started lower than its neighbour's. The parent defines two rows; each column spans
   both and adopts them via subgrid, so row 1 = the taller H2 in either column and both lists start at
   the same y. Desktop only; stacked (<800) is untouched. Assumes the H2 + one-block pattern both
   current uses have (Carrier Services, Nationwide); a third child would just flow into an implicit row. */
@media (min-width: 800px) {

  .entry-content .wp-block-group.td-cols-2 > .wp-block-group {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

@media (max-width: 799px) {
  .entry-content .wp-block-group.td-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Interior page components — PILOT on Hosted PBX only (2026-09-28) ----------
   Three reusable components from Cowork's spec, prototyped in-browser and approved by Chuck, piloted
   on /business-phone-systems/hosted-pbx/ (7858) before any sitewide rollout. All three are opt-in by
   class (Gutenberg "Additional CSS class"), so nothing here touches a page that doesn't use them.
   Brand values: orange var(--td-orange), dark #22252d (matches the footer), heading gray #3a3a3a. */

/* td-feature-grid — a "<strong>Lead</strong><span>Description.</span>" list as a 2-column grid.
   The sitewide list rules above (.entry-content ul li / .wp-block-list li) give every li 30px of
   left padding and an 18px ::before square. Both are neutralised here and the square moves onto the
   <strong> instead (smaller, 12px), so there is exactly ONE marker per item — the prototype shipped
   with two (the sitewide li::before plus its own), which is the bug this avoids. Selectors carry
   .entry-content + ul so they outrank the sitewide rules (0,2,2 vs 0,1,2) without !important. */
.entry-content ul.td-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  row-gap: 0;
  margin: 0 0 2em;
  padding: 0;
}

.entry-content ul.td-feature-grid li strong {
  display: block;
  position: relative;
  padding-left: 22px;
  color: #3a3a3a;
  font-weight: 700;
}

/* Same hover-grow interaction as every other orange square on the site, scaled a bit harder (1.25
   vs 1.1) because the square itself is smaller. top:0.42em centers it on the lead line's x-height. */

.entry-content ul.td-feature-grid li:hover strong::before {
  transform: scale(1.25);
}

/* 22px indent = the lead text's own padding-left, so the description sits flush under the lead
   words rather than under the square. */
.entry-content ul.td-feature-grid li span {
  display: block;
  margin-top: 4px;
  padding-left: 22px;
  color: #4a4a4a;
  line-height: 1.55;
}

/* td-split-intro — intro paragraph left, illustration right. The right slot is styled as "any
   <figure> that is a direct child", so swapping the pilot's inline-SVG placeholder (a Custom HTML
   block) for the real illustration is a one-block edit: delete it, add an Image block (which renders
   as <figure class="wp-block-image">) and it lands in the same frame. */
/* Selector carries .entry-content + .wp-block-group: Astra prints `.entry-content > .wp-block-group`
   (block padding 45px, and its own margins) AFTER this stylesheet, so a plain class loses on source
   order. 0,3,0 outranks it without !important. Same for .td-cta-band below. */
.entry-content .wp-block-group.td-split-intro {
  display: grid;
  /* Figure column capped at 380px (~253px tall at 3:2) and pushed to the right edge; text takes the
     rest. Was 1.25fr/1fr — at desktop that made the figure 516x348 next to a ~180px text block and
     shoved the next section down (Chuck/Cowork 2026-09-29). The cap applies to EVERY figure in this
     component (placeholder SVG or real image). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 40px;
  /* start, not center: centering the text against a taller figure left a visible gap between the
     section's H2 and its paragraph (Chuck's review of the pilot). The H2 now lives INSIDE the left
     column (.td-split-intro__text = H2 + paragraph), so heading, text and figure read as one unit
     and all three top edges line up. */
  align-items: start;
  margin: 0 0 2em;
  padding: 0;
}

/* Figure-less state (Batch 2, 2026-09-29): body images are still being generated, so pages get the
   split-intro structure WITHOUT a figure — single column, text at full content width like the rest of
   the page's prose (no 66ch cap: that cap only exists to balance text against a figure). When the art
   arrives, adding an Image block (<figure>) as the group's second child flips it to the 380px-figure
   grid above automatically via :has() — no markup restructure, no CSS change. */
.entry-content .wp-block-group.td-split-intro:not(:has(> figure)) {
  grid-template-columns: minmax(0, 1fr);
}

.entry-content .wp-block-group.td-split-intro:not(:has(> figure)) .td-split-intro__text > p {
  max-width: none;
}

/* The Reviews page (8131) briefly had page-scoped rules here (padding-inline + margin-top) giving its
   `td-split-intro` a card-matching inset — REPLACED 2026-09-29, same day: Cowork's follow-up asked for
   the existing `.td-mission-callout` component instead (cream background, orange rule, same as
   Wireless Networking's intro), not a one-off inset on this component. The page's markup no longer
   uses `td-split-intro` at all, so those rules were dead weight — removed rather than left stale. See
   work-log.md's "Reviews page intro, mission-callout" entry. */

/* Left column wrapper. Same selector weight as the parent: it's a nested group, and flow layout
   gives its children margin-block-start. H2 keeps a small gap to its paragraph, nothing above it,
   so its top edge lines up with the figure's. */
.entry-content .wp-block-group.td-split-intro__text > * {
  margin: 0;
}

.entry-content .wp-block-group.td-split-intro__text > * + p {
  margin-top: 0.9em;
}

/* Body-image rollout (2026-09-29): some text columns hold more than H2 + paragraph (a list, or a second
   H2 section) so the text roughly balances the 380x253 figure. The margin reset above would otherwise
   leave those flush against the block before them. */

.entry-content .wp-block-group.td-split-intro__text > * + h2 {
  margin-top: 1.4em;
}

/* WP's flow layout adds margin-block-start to every child after the first; in a grid that just
   pushes the figure off-center. */
.td-split-intro > * {
  margin: 0 !important;
}

/* ~66ch measure so a wide text column doesn't run to ~100-character lines next to the smaller figure. */
.entry-content .wp-block-group.td-split-intro__text > p {
  max-width: 66ch;
}

.td-split-intro > figure {
  justify-self: end;
  width: 100%;
  max-width: 380px;
  padding: 24px;
  background: linear-gradient(135deg, #fff8ec 0%, #fdebcb 100%);
  border-radius: 6px;
  border-bottom: 4px solid var(--td-orange);
}

.td-split-intro > figure svg,
.td-split-intro > figure img {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  height: auto;
}

/* Real-artwork variant (core Image block, first used on Hosted PBX 2026-09-29). The body renders are
   full-bleed scenes on a pale warm-white ground (edge pixels ~#fcfcfc-#fefefe, faint peach curves
   running off the sides), so the placeholder frame's 24px padding + peach gradient would show as a
   visible seam/box around the picture. For image figures only: no padding, a flat near-white fill
   matching the render's own edges (only visible for a sub-pixel if the image ever under-fills), and
   overflow:hidden so the image itself takes the frame's 6px radius. The 4px orange bottom rule and
   the radius are kept; the SVG placeholder frame above is unchanged. Image fills the column width
   (the 340px cap is for the line-art placeholder only). */
.td-split-intro > figure.wp-block-image {
  padding: 0;
  background: #fdfdfc;
  overflow: hidden;
}

.td-split-intro > figure.wp-block-image img {
  max-width: none;
  border-radius: 0;
}

/* td-cta-band — dark closing call-to-action band. Reuses the standard .td-btn primary/ghost pair
   (same buttons as the homepage hero), so button styling isn't duplicated here.
   .td-cta-band--elementor (2026-10-07): the same band hand-written in an Elementor HTML widget on the
   Business Phone Systems hub (7857), which has no .entry-content wrapper; it replaced that page's
   one-off "Ready to talk?" line (element 00320a5, whose link-color rule was removed with it). */
.entry-content .wp-block-group.td-cta-band,
.td-cta-band--elementor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 34px 40px;
  /* 48px below: without it the band sits flush on the footer (also #22252d) and the two read as one
     dark slab — the "merges with the footer" fix from the prototype review. */
  margin: 2.5em 0 48px;
  background: #22252d;
  color: #fff;
  border-radius: 6px;
  border-bottom: 4px solid var(--td-orange);
}

.td-cta-band > * {
  margin: 0 !important;
}

.entry-content .td-cta-band h3,
.td-cta-band--elementor h3 {
  margin: 0 0 6px;
  color: #fff;
}

.entry-content .td-cta-band p,
.td-cta-band--elementor p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Same ambient-underline collision documented on .td-btn / .td-icon-box: the sitewide content-link
   underline paints through unless killed on the <a> itself. */

.td-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 799px) {
  /* Same selectors as the desktop rules — a bare .td-split-intro here lost to them and the figure
     stayed squeezed beside the text on phones. */
  .entry-content ul.td-feature-grid,
  .entry-content .wp-block-group.td-split-intro {
    grid-template-columns: 1fr;
  }

  .entry-content .wp-block-group.td-split-intro {
    gap: 24px;
  }

  .td-split-intro > figure {
    max-width: none; /* stacked: full column width, as before */
  }
}

/* ---------- WPForms (Contact Us, Get a Quote) — field delineation + checkboxes (2026-09-29, Chuck) ----------
   Astra's input border is var(--ast-border-color) #f2f5f7 on a #fafafa fill: invisible on the white page.
   Border #8a9199 = 3.19:1 on white and checkbox border/fill --td-orange-dark #c67c00 = 3.34:1 (WCAG 1.4.11
   non-text >= 3:1; brand #ed9700 is only 2.33:1). Checkbox lists drop the sitewide orange-square bullet
   (li::before) but keep its 30px indent. */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
  border: 1px solid #8a9199;
  border-radius: 4px;
  background-color: #fff;
  color: var(--ast-global-color-3, #2b2e33);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--td-orange-dark);
  box-shadow: 0 0 0 3px rgba(237, 151, 0, 0.25);
  outline: none;
}

.entry-content .wpforms-container ul li::before {
  content: none;
}

.entry-content .wpforms-container ul li:has(input[type="checkbox"], input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wpforms-container input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--td-orange-dark);
  border-radius: 3px;
  background: #fff center / 12px 12px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wpforms-container input[type="checkbox"]:checked {
  background-color: var(--td-orange-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wpforms-container input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--td-orange-dark);
  outline-offset: 2px;
}

.entry-content .wpforms-container ul li label {
  margin: 0;
  cursor: pointer;
}

/* ---------- Reviews page (/reviews/): Google reviews + client testimonials (2026-09-29) ----------
   Markup from tandem-reviews.php ([td_google_reviews], [td_testimonials]). Both lists opt out of the
   sitewide orange-square bullet (li::before) and the 48px list inset; the inset selector is repeated
   with one extra class so it wins without !important. Google's attribution rules: logo 16-19px tall
   (18 here) with >=10px clear space; each review credits the author and links to Google Maps. */

.td-btn--outline:hover {
  background: var(--td-dark);
  color: #fff !important;
}

.td-reviews .td-btn {
  text-decoration: none !important;
}

.td-reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 28px;
}

.td-reviews__score {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--td-text);
}

.td-reviews__count {
  color: var(--td-text);
}

.td-reviews__source {
  margin-left: auto;
  padding: 10px;
  line-height: 0;
}

.td-reviews__google {
  display: block;
  height: 18px;
  width: auto;
}

.td-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.td-reviews__summary .td-stars .td-star {
  width: 24px;
  height: 24px;
}

.td-star {
  width: 16px;
  height: 16px;
  background: linear-gradient(90deg, var(--td-orange) var(--td-star-fill, 100%), #d3d7db var(--td-star-fill, 100%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entry-content ul.td-reviews__list:not(.elementor ul):not(.wpforms-container ul):not(li ul),
.entry-content ul.td-testimonials:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
  display: grid;
  gap: 28px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.entry-content ul.td-reviews__list:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.entry-content ul.td-testimonials:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.entry-content ul.td-reviews__list li,
.entry-content ul.td-testimonials li {
  margin: 0;
  padding: 24px;
  border: 1px solid #dfe2e6;
  border-radius: 8px;
  background: #fff;
}

.entry-content ul.td-reviews__list li::before,
.entry-content ul.td-testimonials li::before {
  content: none;
}

.td-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.td-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.td-review__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.td-review__avatar--blank {
  background: var(--td-gray-bg);
}

.td-review__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.td-review__author {
  font-weight: 600;
  color: var(--td-text);
}

.entry-content .td-review__author a {
  color: var(--td-text);
  text-decoration: none;
}

.entry-content .td-review__author a:hover {
  text-decoration: underline;
}

.td-review__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #5c6168;
}

/* Very long reviews are clipped at 10 lines; the card's "View on Google Maps" link shows the rest. */
.td-review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  overflow: hidden;
}

.td-review__text p {
  margin: 0 0 0.75em;
}

.td-review__text p:last-child {
  margin-bottom: 0;
}

.entry-content a.td-review__link {
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--td-orange-onlight);
}

.td-reviews__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 56px;
}

.td-reviews__admin-note {
  padding: 12px 16px;
  border-left: 4px solid var(--td-orange-dark);
  background: var(--td-gray-bg);
}

.td-testimonial figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.td-testimonial blockquote {
  position: relative;
  margin: 0;
  padding: 28px 0 0;
  border: 0;
  font-style: italic;
  color: var(--td-text);
}

.td-testimonial blockquote::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: -2px;
  font-family: Georgia, serif;
  font-size: 4rem;
  font-style: normal;
  line-height: 1;
  color: var(--td-orange);
}

.td-testimonial blockquote p {
  margin: 0;
}

.td-testimonial figcaption {
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--td-text);
}

@media (max-width: 599px) {
  .td-reviews__source {
    margin-left: -10px;
    flex-basis: 100%;
  }

  .entry-content ul.td-reviews__list li,
  .entry-content ul.td-testimonials li {
    padding: 20px;
  }
}

/* ---------- Reviews page, Maps-embed variant (2026-09-29) ----------
   Cowork's decision: no Places API / billing for now — the reviews page is a Google Maps embed
   (live rating + count, Google's own UI) plus links out to Google, not the [td_google_reviews]
   shortcode above (left in place, dormant, as the documented upgrade path — see DEVELOPER-NOTES.md).
   Wrapper centers the iframe and constrains it to a readable width; the iframe itself keeps a ~4:3
   aspect ratio via aspect-ratio (widely supported enough here — this is an internal admin-facing
   fallback concern, not a design-critical one) with a min-height floor so it doesn't collapse on
   narrow phones where 4:3 of a ~340px-wide column would otherwise dip under a usable map size. */
/* max-width needs !important: Astra's own `.entry-content[ast-blocks-layout] > *` content-width rule
   (a wildcard direct-child selector, specificity 0,0,2,0 vs this single class's 0,0,1,0) otherwise
   wins and stretches this to Astra's full block content width regardless of source order — confirmed
   via a CSSOM matching-rules check, not guessed. */
.td-reviews-embed {
  max-width: 700px !important;
  margin: 0 auto 32px;
}

/* height:auto is required alongside aspect-ratio: the iframe's own width="600" height="450" HTML
   attributes give it an explicit (non-auto) height that aspect-ratio won't override on its own —
   confirmed via a CDP computed-style check (height was pinned to the attribute's 450px at every
   viewport width, ignoring the resolved aspect ratio, until height:auto was added here). */
.td-reviews-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 350px;
  border: 0;
}

.td-reviews-embed__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* ========== HOMEPAGE COMPACT REBUILD (2026-09-29, exploratory, Chuck/Cowork; see work-log) ==========
   Section order + classes come from homepage-compact/apply-structure.php (Elementor data):
   hero -> .td-hp-services -> .td-hp-tagline -> .td-hp-counters-head + .td-hp-counters ->
   .td-hp-testimonials -> .td-hp-contact. More About + empty spacers carry .td-hp-hidden (hidden, not
   deleted). Rollback: DEVELOPER-NOTES "Homepage restore point 2026-09-29", or delete this block and
   restore page 91's Elementor data. Selectors start with .elementor-91 to outrank Elementor's
   per-element CSS (.elementor-91 .elementor-element.elementor-element-<id> ...). */
.td-hp-hidden,
.elementor-91 .elementor-element.td-hp-hidden {
  display: none !important;
}

/* Hero master v3 (2026-10-05, communications-header-revised-lower-plug-3, 3:2): framing per Chuck's
   brief. Size 102.5% leaves horizontal slack so the photo can sit ~20px LEFT at a 1536px band
   (-1.3vw) without exposing the right edge. Vertical is pinned in PIXELS, not a percentage: a fixed %
   drifts the plug ~45px between 1300 and 1920 (it slid behind the nav strip at wide widths). Plug
   centre is at 47% of the image height and the image is 0.6836 x band width tall at this size, so
   y = C - 0.47 x 68.36vw puts the plug centre at C px down the 413px band (below the subtitle, which
   ends at 138px; above the nav strip, which starts at 366px). C = min(262px, 17vw + 17px, 330px - 3.72vw):
   - 262px: the brief's spot, from 1440px up.
   - 17vw + 17px: rises to ~230px at 1251. The logo/CTA cluster is anchored right while the photo
     scales from the left, so narrower bands slide the logo onto the trail. The extra lift clears it
     (modelled against the trail's hot core + glow, then confirmed by screenshots at 1280/1366).
   - 330px - 3.72vw: on ultrawide screens the plug grows with the width. This keeps its bottom at or
     above 330px, at least ~36px clear of the nav strip. The band height itself is already fixed at
     413px, so ultrawide needs no other cap. */

.td-home-hero__cluster {
  top: 170px;
}

/* --- services: "How Can We Help You?" directly under the hero --- */

.elementor-91 .elementor-element.td-hp-services .elementor-widget-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- 3. tagline band: same words, slim and centred --- */
.elementor-91 .elementor-element.td-hp-tagline > .elementor-container {
  max-width: 1000px;
}

/* font-size deliberately NOT set here (was 1.25rem, a flat override for every width) — 2026-09-29,
   found while checking the quote band's Times New Roman sizing: this rule was silently overriding the
   widget's own `quoteserif` KIT GLOBAL typography (font-family/style/weight came through fine since
   this rule never touched those, but font-size always lost to this flat value regardless of the kit's
   per-breakpoint settings). Removed so the kit global is the single source of truth for size again,
   matching how the widget was already wired (`__globals__.typography_typography:
   "globals/typography?id=quoteserif"`) — current kit values: 22px desktop, 19px tablet, 17px mobile
   (<700px), round 2 of this fix per Cowork's exact-px correction.

   font-family IS set here, though, as a deliberate exception to "the kit global is the source of
   truth": Elementor's typography control only accepts one font name and picks its OWN generic fallback
   based on which family list that name is in — "Times New Roman" isn't in a list it recognizes as
   serif, so it was silently falling back to sans-serif instead of a serif font. Elementor's UI has no
   field for a manual fallback chain, so the full stack is set here instead, matching Cowork's exact
   spec. */
.elementor-91 .elementor-element.td-hp-tagline .elementor-widget-text-editor,
.elementor-91 .elementor-element.td-hp-tagline .elementor-widget-text-editor p {
  font-family: "Times New Roman", Times, serif;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* --- 4. counters: heading folded into the same block, one row of 7 at desktop --- */
.elementor-91 .elementor-element.elementor-section.td-hp-counters-head:not(.td-x),
.elementor-91 .elementor-element.elementor-section.td-hp-counters:not(.td-x) {
  background-color: var(--td-gray-bg);
}

.elementor-91 .elementor-element.td-hp-counters-head .elementor-widget-wrap {
  padding: 24px 10px 4px;
}

/* 2026-09-29: top/bottom padding bumped (was 6/22) so this block reads as its own discrete element
   between the quote band and Testimonials, per Cowork's "roughly 40-56px each" ask. */
.elementor-91 .elementor-element.td-hp-counters {
  padding: 40px 10px 48px;
}

/* 12-column grid (was a flat 7-equal-columns row), 2026-09-29: Cowork's ask was two centered rows,
   3 items then 4, each row's items equal width within that row — a 12-column grid with per-item
   `grid-column: span 4` (first 3) / `span 3` (last 4) does exactly that with plain CSS Grid auto-wrap
   (3x4=12 fills row 1 exactly, 4x3=12 fills row 2 exactly), no separate row markup needed. This also
   fixes the "1,818 clipped on the left" bug: the old flat 7-column grid gave each item only ~164px
   (1200px / 7, confirmed via a live width measurement) — tight enough that a 5-character number at
   2.5rem could genuinely clip. The new narrower ("span 3") columns are ~300px, the wider ("span 4")
   ones ~400px, both comfortably wider than the old flat column. */
/* row-gap added 2026-09-29 (Cowork's "homepage round 2" — "counter spacing"): the two rows had no
   vertical gap at all between them at the desktop 12-column breakpoint (only column-gap was set), so
   row 1's bottom edge sat flush against row 2's top edge. */
.elementor-91 .elementor-element.td-hp-counters > .elementor-container {
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 28px;
}

.elementor-91 .elementor-element.td-hp-counters .elementor-column,
.elementor-91 .elementor-element.td-hp-counters .elementor-widget-wrap {
  display: contents;
}

.elementor-91 .elementor-element.td-hp-counters .elementor-element.elementor-widget-counter {
  margin: 0;
  width: auto;
}

/* Reading order as before (row-wise): years, installations, sites, cities, states, countries, technicians.
   Row 1 (span 4 of 12, 3 items): years, installations, customer sites.
   Row 2 (span 3 of 12, 4 items): cities, states and provinces, countries, qualified technicians. */
.elementor-91 .elementor-element.td-hp-counters .elementor-element-2ad83d53 { order: 1; grid-column: span 4; }
.elementor-91 .elementor-element.td-hp-counters .elementor-element-39f60ae1 { order: 2; grid-column: span 4; }
.elementor-91 .elementor-element.td-hp-counters .elementor-element-2020ad81 { order: 3; grid-column: span 4; }
.elementor-91 .elementor-element.td-hp-counters .elementor-element-5bca5618 { order: 4; grid-column: span 3; }
.elementor-91 .elementor-element.td-hp-counters .elementor-element-71c0c33e { order: 5; grid-column: span 3; }
.elementor-91 .elementor-element.td-hp-counters .elementor-element-7048b5f4 { order: 6; grid-column: span 3; }
.elementor-91 .elementor-element.td-hp-counters .elementor-element-68cf7814 { order: 7; grid-column: span 3; }

/* Tight leading + a small, deliberate gap between the number and its label, per Cowork's "light
   leading" ask — line-height trimmed on both, margin-top on the label kept small (6px, was 4px, just
   enough to read as two distinct lines rather than one cramped block). */

@media (max-width: 1024px) {
  .elementor-91 .elementor-element.td-hp-counters > .elementor-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 16px;
  }

  /* the 12-col spans above only make sense at the 12-col desktop grid; collapse everyone back to one
     equal-width track per item so the 4-across tablet layout isn't accidentally lopsided. */
  .elementor-91 .elementor-element.td-hp-counters .elementor-element.elementor-widget-counter {
    grid-column: span 1;
  }
}

/* --- 5. testimonials: three compact columns, quotes verbatim --- */
.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section .elementor-column > .elementor-widget-wrap {
  padding: 18px 20px;
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section .elementor-column.elementor-element {
  margin: 0 8px;
}

/* Icons above each quote + the section's gray band removed 2026-09-29 (Chuck). Type stays a flat,
   explicit 14px (px, not rem) on the whole quote block, first line and citation alike. */
.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-text-editor,
.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-text-editor p {
  font-size: 14px;
  line-height: 1.5;
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-text-editor p {
  margin: 0 0 10px;
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* "See our Google reviews" link, added 2026-09-29 under the testimonials quotes, pointing at the new
   /reviews/ page. Small/centered on purpose (task: "keep the compact layout") — a plain text link, not
   a full .td-btn, so it doesn't compete with the section's own weight. 2026-10-04: moved off
   --td-orange-dark (#C67C00, only 3.34:1 on white — a 2026-10-04 QA finding) onto the sitewide
   --td-orange-onlight token, same one the header nav and body links use. */
.td-hp-testimonials__cta {
  text-align: center;
  margin: 18px 0 0;
}

.td-hp-testimonials__cta a:hover {
  color: var(--td-orange-onlight-hover);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section .elementor-column.elementor-element {
    margin: 0 0 14px;
  }
}

/* --- 6. contact: text | map | address side by side at desktop --- */

@media (min-width: 1025px) {
  .elementor-91 .elementor-element.td-hp-contact .elementor-inner-section .elementor-column > .elementor-widget-wrap {
    padding: 0 12px;
  }

  /* Left column: headings beside the small phone cutout. */
  .elementor-91 .elementor-element.td-hp-contact .elementor-element-1200740 > .elementor-widget-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-content: start;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-b890777,
  .elementor-91 .elementor-element.td-hp-contact .elementor-element-118b96a {
    grid-column: 1;
    margin-bottom: 8px;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element.elementor-element-b890777 .elementor-heading-title {
    font-size: 1.75rem;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element.elementor-element-118b96a .elementor-heading-title {
    font-size: 1.375rem;
    line-height: 1.35;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-452b202 {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-452b202 img {
    width: auto;
    max-height: 150px;
  }

  /* Right column: map beside the address block. */
  .elementor-91 .elementor-element.td-hp-contact .elementor-element-cc5131f > .elementor-widget-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-ab61fbc {
    margin: 0;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-ab61fbc img {
    width: 100%;
    height: 190px;
    object-fit: cover;
  }
}

@media (max-width: 1024px) {

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-452b202 img {
    max-height: 180px;
    width: auto;
  }
}

/* Phone cutout hidden entirely, 2026-09-29 — widened from "<=700px only" (this same day, earlier) to
   every width per Cowork's "homepage round 2" item ("Contact Us without the phone", no width qualifier
   this time). Heading/address/map/contact-details all stay — only this one widget goes, at every size
   now, not just true phone widths. */
.elementor-91 .elementor-element.td-hp-contact .elementor-element-452b202 {
  display: none;
}

/* --- compact pass 2 (2026-09-29): testimonials + contact toward ~300px, Nationwide line --- */

.elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section:first-child .elementor-widget-wrap.elementor-element-populated {
  padding: 14px 20px 4px;
}

/* 2026-09-29: heading-to-cards gap was 40px (measured: the heading widget's own 14px margin-bottom +
   its wrap's 12px margin-bottom + that same wrap's 14px padding-bottom, traced by walking the DOM
   rather than guessing which rule owned it — the nesting here has an extra inner-column layer the
   `:first-child` rule above doesn't reach). Cowork's ask was "about half" (~20px); cutting the widget's
   own margin to 6px and the wrap's margin+padding to 4px/6px lands at ~16px, close enough. */

.elementor-91 .elementor-element.td-hp-testimonials .elementor-element-6480de5d .elementor-widget-wrap {
  margin-bottom: 4px;
  padding-bottom: 6px;
}

/* Testimonial cards, 2026-09-29 (Cowork's polish-round item 5): white bg, light border + a very soft
   shadow (both, per the brief's "or" — reads better together at this size than either alone), radius
   matching td-cta-band (6px, the sitewide dark-band radius), 26px padding (middle of the 24-28px
   range). flex-column + height:100% here (the parent .elementor-container row is already display:flex
   and stretches all 3 columns to equal height on its own — confirmed via a live height check, 253px
   each — this just lets that stretched height reach all the way down into the card's own content so
   the attribution can pin to the bottom of it). */
/* The hand-written-testimonial card CSS that used to live here (scoped to
   `.elementor-element-2ca9c95e .elementor-column`, `.elementor-widget-text-editor p:first-child`, etc.)
   was REMOVED 2026-09-29 when that section's 3 text-editor widgets were replaced with a single
   [td_reviews count="3"] shortcode widget (see MANIFEST.md / work-log.md, "Google review cards, content
   step"). Keeping it would have double-carded the new content — the shortcode's own `.td-review-card`
   styling (above) already provides the equivalent white/border/shadow/radius/equal-height/quote-glyph
   treatment, and the old rules' selectors still matched the new single wrapping column, nesting one
   card style inside the other. Caught from a screenshot after the swap, not predicted in advance. */

/* ---------- Google review cards, [td_reviews] (2026-09-29) ----------
   A variant of the testimonial card above, not a second design: same white background, border, radius
   (6px, matches td-cta-band), soft shadow and equal-height flex-column layout — reused directly rather
   than redefined, so the two stay visually consistent if either is tuned later. Grid instead of the
   testimonials' Elementor-driven flex row, since this markup is a plain <ul> the shortcode prints
   wherever it's dropped (homepage widget or the Reviews page's Gutenberg content), not tied to a fixed
   3-column Elementor structure. 3 columns desktop, 2 tablet, 1 mobile, per the brief. */
.td-review-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.td-review-cards li.td-review-card {
  margin: 0;
}

.td-review-cards li.td-review-card::before {
  content: none;
}

.td-review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  background: #fff;
  border: 1px solid #c9c4b8;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
}

.td-review-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.td-review-card__stars .td-star {
  width: 17px;
  height: 17px;
}

.td-review-card__excerpt {
  flex: 1;
  font-style: italic;
  color: var(--td-text);
  line-height: 1.55;
  margin: 0 0 18px;
}

.td-review-card__meta {
  /* 2026-09-30: avatar removed (deleted below, not hidden) — __who is now the only child, so no
     flex/gap is needed here; left as a plain block so __who's own left alignment is all that matters. */
  margin-bottom: 14px;
}

.td-review-card__who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.td-review-card__source {
  font-size: 0.8125rem;
  color: #767676;
}

.td-review-card__link {
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* 2026-10-04 Lighthouse finding: on the homepage specifically, this single-class selector
   (specificity 0,1,0) was losing to Elementor kit 840's own `.elementor-kit-840 a` (0,1,1) — the
   color declaration above never actually won there, confirmed live (2.32:1, the bright orange) even
   though this rule reads correctly in the source. Re-added here with the extra `.td-review-cards`
   ancestor class so it safely beats (0,1,1) everywhere, not just on non-Elementor pages where it
   happened to have no competition. */

.td-review-cards a.td-review-card__link:hover {
  color: var(--td-orange-onlight-hover);
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .td-review-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .td-review-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reviews page: star header above the Maps embed (2026-09-29) ----------
   Five large gold stars + a line of text, no hardcoded rating number or review count (the embed below
   shows those, straight from Google — this header is deliberately just the visual cue, not a duplicate
   or possibly-stale number). */
.td-reviews-star-header {
  text-align: center;
  margin: 0 0 28px;
}

.td-reviews-star-header .td-review-card__stars {
  justify-content: center;
  margin: 0 0 10px;
}

.td-reviews-star-header .td-star {
  width: 28px;
  height: 28px;
}

.td-reviews-star-header p {
  margin: 0;
  font-weight: 600;
  color: var(--td-text);
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap.elementor-element-populated {
  margin-left: 12px;
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap.elementor-element-populated {
  margin-right: 12px;
}

.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-text-editor,
.elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-text-editor p {
  font-size: 14px;
  line-height: 1.45;
}

.elementor-91 .elementor-element.td-hp-contact > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 1025px) {
  .elementor-91 .elementor-element.td-hp-contact .elementor-element.elementor-element-452b202 {
    align-self: start;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-452b202 img {
    max-height: 130px;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-ab61fbc img {
    height: 150px;
  }

  .elementor-91 .elementor-element.td-hp-contact .elementor-element-d4b7a74 p {
    font-size: 0.9375rem;
    line-height: 1.45;
    margin-bottom: 6px;
  }
}

/* Nationwide line under the service cards (widget td-hp-nationwide, added by apply-structure.php). */

.elementor-91 .elementor-element.td-hp-services .td-hp-nationwide p {
  margin: 0;
  text-align: center;
  font-size: 1rem;
}

/* 2026-10-04 QA finding: was --td-orange-dark (#C67C00), 3.34:1 on white — moved onto the sitewide
   --td-orange-onlight token, same one the header nav and body links use. */

.elementor-91 .elementor-element.td-hp-services .td-hp-nationwide a:hover {
  color: var(--td-orange-onlight-hover);
}

/* ---------- Banded landing-page sections (2026-10-15, first used on Nationwide Service 7846) ----------
   Content-width bands with alternating backgrounds (light tint / white), plus a reverse (charcoal) stat
   strip under the page header. All opt-in by class; nothing here touches another page.
   .td-band (group block) [+ --tint | --white] [+ --center: centres eyebrow/H2/subline/closing line].
   Selectors carry .entry-content + .wp-block-group to beat Astra's `.entry-content > .wp-block-group`
   padding/margins (same reason as td-split-intro / td-cols-2). */

/* Header-band buttons inside the mission callout (div variant of .td-mission-callout). */
.td-mission-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.td-mission-callout__actions .td-btn:focus-visible,
.td-band .td-btn:focus-visible {
  outline-color: var(--td-dark);
}

/* Reverse stat strip: live numbers ([tandem_stat], server-rendered text, no counters). White labels
   on #201911 = 17.4:1; orange #ed9700 numbers = 7.5:1 (both relative-luminance, checked 2026-10-15). */
.td-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 26px 40px;
  background: var(--td-charcoal);
  color: #fff;
}

.td-stat-strip__item {
  margin: 0;
  text-align: center;
}

.td-stat-strip__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--td-orange);
}

.td-stat-strip__label {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #fff;
}

.entry-content .wp-block-group.td-band--tint {
  background: var(--td-gray-bg);
}

.entry-content .wp-block-group.td-band--white {
  background: #fff;
}

.entry-content .wp-block-group.td-band > * {
  margin-top: 0;
}

/* Eyebrow on a light band: the plain .td-eyebrow orange is 2.2:1 on white, so use the on-light token. */
.td-band .td-eyebrow {
  margin: 0 0 6px;
  color: var(--td-orange-onlight);
}

.entry-content .td-band h2 {
  margin: 0 0 10px;
}

/* Extra air between the H2 and a card row that follows it directly (2026-10-16): Nationwide's icon-box grid and
   process steps. +20px desktop, +16 tablet, +12 phone over the H2's 10px margin-bottom. The two margins COLLAPSE, so
   these values are the full gap (30/26/22), not an addition. Other bands (H2 + subline, split) don't match. */
.entry-content .wp-block-group.td-band > h2 + .td-icon-box-grid,
.entry-content .wp-block-group.td-band > h2 + .td-steps {
  margin-top: 30px;
}

@media (max-width: 1250px) {
  .entry-content .wp-block-group.td-band > h2 + .td-icon-box-grid,
  .entry-content .wp-block-group.td-band > h2 + .td-steps {
    margin-top: 26px;
  }
}

@media (max-width: 544px) {
  .entry-content .wp-block-group.td-band > h2 + .td-icon-box-grid,
  .entry-content .wp-block-group.td-band > h2 + .td-steps {
    margin-top: 22px;
  }
}

.td-band__sub {
  margin: 0 0 4px;
  font-size: 1.06rem;
  color: #4a4e55;
}

.td-band__close {
  margin: 28px 0 0;
  font-size: 1.06rem;
  font-weight: 600;
}

/* Static cards (no link): the .td-card look without the hover lift, which would read as clickable. */
.td-card--static:hover {
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
  transform: none;
}

.td-card--static .td-card__text {
  margin-bottom: 0;
}

/* Problem / answer marks (2026-10-15, Nationwide "Managing contractors"): red X above each problem card's H3,
   green check above the closing H3. Inline SVG (decorative, aria-hidden), filled circle + white stroke glyph.
   Red --td-red #d32f2f = 4.98:1 on the white card; green --td-green-ok #2e7d32 = 4.70:1 on the #f4f5f6 tint
   (both >= 3:1 for a large graphic); white glyph on each >= 4.98:1. */
.td-mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 0 12px;
}

.td-mark path {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Problem cards, hanging layout (Chuck 2026-10-15; replaces the same-day centred-X version): X in a left
   column, title + text share one left edge beside it. The X is centred on the title's FIRST line:
   offset = (title line box - X) / 2, title = 1.3rem x line-height 1.2 (.td-card__title), so it holds when
   the title wraps. Negative offset = the X rises a few px into the card's top padding. */
.td-card--static .td-card__body:has(> .td-mark) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  align-content: start;
}

.td-card--static .td-card__body > .td-mark {
  grid-row: 1 / span 2;
  margin: calc((1.3rem * 1.2 - 48px) / 2) 0 0;
  /* Chuck 2026-10-15: drop the X 11px below first-line centre. transform, not margin, so card heights and
     text never move. Phones use 7px (below). */
  transform: translateY(11px);
}

.td-card--static .td-card__body > .td-mark ~ * {
  grid-column: 2;
}

.entry-content .td-card--static .td-card__body > .td-card__title {
  margin-top: 0;
}

.td-mark--no circle {
  fill: var(--td-red);
}

.td-mark--yes circle {
  fill: var(--td-green-ok);
}

/* Check centred between the card bottoms and the tagline's text (Chuck 2026-10-15): gap above = card-grid
   bottom -> circle top; gap below = circle bottom -> top of the tagline's glyphs (its line box top + half-leading,
   ~--td-verdict-lead). Desktop 26/26, phones 20/20 (60px / 50px circle). 0,4,0 beats the band's > * reset. */
.entry-content .wp-block-group.td-band > .td-band__verdict-mark {
  --td-verdict-gap: 26px;
  /* tagline line-box top -> glyph top, measured 7px at 1.55rem (0.45rem tracks Astra's smaller tablet rem). */
  --td-verdict-lead: 0.45rem;
  margin: var(--td-verdict-gap) 0 0;
}

.td-band__verdict-mark .td-mark {
  width: 60px;
  height: 60px;
  margin: 0 auto calc(var(--td-verdict-gap) - var(--td-verdict-lead, 0px));
}

/* Closing tagline: still an H3 (also carries .td-card__title), one step up from the card titles, bold, same
   heading font and colour. Two lines on desktop/tablet, break forced after "together"; phones wrap freely. */
.entry-content .td-band .td-band__verdict {
  margin: 0;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 601px) {
  .td-band__verdict-l2 {
    display: block;
  }
}

/* Below the forced break: natural wrap, balanced so no line ends up with an orphan word. */
@media (max-width: 600px) {
  .entry-content .td-band .td-band__verdict {
    text-wrap: balance;
  }
}

/* Subline under the H2 as an H3, same type as the card titles (also carries .td-card__title), centred.
   0,4,0 beats the band's `> * { margin-top: 0 }` reset and .td-card__title's own margin. */
.entry-content .wp-block-group.td-band > .td-band__sub-h {
  /* 28px below = the gap the old <p> subline got from Astra's paragraph margin. */
  margin: 0 0 28px;
  text-align: center;
}

/* 3-across icon-box grid (6 cards = 3x2 at desktop, 2-up tablet, 1-up phone). */
.td-icon-box-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .td-icon-box-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .td-icon-box-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.td-icon-box__more {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--td-orange-onlight);
  text-decoration: none !important;
}

a.td-icon-box:hover .td-icon-box__more {
  color: var(--td-orange-onlight-hover);
}

/* Numbered process steps: an <ol>, so the numbering is real; the visible circle is aria-hidden. */
.entry-content ol.td-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.td-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--td-orange);
  color: var(--td-dark);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform 0.3s;
}

.td-steps li:hover .td-steps__num {
  transform: scale(1.1);
}

.entry-content .td-steps h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.td-steps p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Text left, list right. */
.entry-content .wp-block-group.td-band-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: center;
  margin: 0;
  padding: 0;
}

@media (max-width: 1000px) {
  .entry-content ol.td-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .entry-content ol.td-steps > li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .td-steps__num {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .entry-content .td-steps h3 {
    margin-top: 10px;
  }
}

@media (max-width: 799px) {
  .entry-content .wp-block-group.td-band-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .td-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
    padding: 22px 20px;
  }

  .td-mark {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  .entry-content .wp-block-group.td-band > .td-band__verdict-mark {
    --td-verdict-gap: 20px;
    --td-verdict-lead: 0.37rem;
  }

  .td-band__verdict-mark .td-mark {
    width: 50px;
    height: 50px;
  }

  .entry-content .td-band .td-band__verdict {
    font-size: 1.4rem;
  }

  .td-card--static .td-card__body:has(> .td-mark) {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
  }

  .td-card--static .td-card__body > .td-mark {
    margin: calc((1.3rem * 1.2 - 40px) / 2) 0 0;
    /* 7px, not 11: the title line is ~21px here, so 11px would put the X closer to a wrapped title's 2nd line. */
    transform: translateY(7px);
  }

  .td-stat-strip__label {
    font-size: 0.875rem;
  }

  .td-mission-callout__actions .td-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------- Nationwide Service part 2 (2026-10-16, 7846): reverse bands, case study + quote, industry pills,
   FAQ (core Details blocks), closing CTA band. Same .td-band system as part 1; all opt-in by class.
   Reverse = --td-charcoal #201911: white 17.4:1, orange #ed9700 eyebrow 7.5:1. */
.entry-content .wp-block-group.td-band--reverse {
  background: var(--td-charcoal);
  color: #fff;
}

.entry-content .td-band--reverse h2,
.entry-content .td-band--reverse h3,
.entry-content .td-band--reverse h4 {
  color: #fff;
}

/* On charcoal the plain brand orange passes (7.5:1); the on-light token would be too dark here. */
.td-band--reverse .td-eyebrow {
  color: var(--td-orange);
}

/* The light bands' dark focus ring would vanish on charcoal. */
.td-band--reverse .td-btn:focus-visible {
  outline-color: #fff;
}

/* H2 -> content row, same full gap as part 1's card rows (30/26/22; collapses with the H2's 10px). */
.entry-content .wp-block-group.td-band > h2 + .td-results,
.entry-content .wp-block-group.td-band > h2 + .td-pills,
.entry-content .wp-block-group.td-faq > h2 + .td-faq__item {
  margin-top: 30px;
}

@media (max-width: 1250px) {
  .entry-content .wp-block-group.td-band > h2 + .td-results,
  .entry-content .wp-block-group.td-band > h2 + .td-pills,
  .entry-content .wp-block-group.td-faq > h2 + .td-faq__item {
    margin-top: 26px;
  }
}

@media (max-width: 544px) {
  .entry-content .wp-block-group.td-band > h2 + .td-results,
  .entry-content .wp-block-group.td-band > h2 + .td-pills,
  .entry-content .wp-block-group.td-faq > h2 + .td-faq__item {
    margin-top: 22px;
  }
}

/* Results: case-study card (raised charcoal) + customer quote card (white), side by side, equal height. */
.td-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.td-case,
.td-quote {
  margin: 0;
  padding: 30px 32px 32px;
  border-radius: 8px;
}

/* #342b22 = one step up from the band; body text rgba(255,255,255,0.85) on it ~11:1. */
.td-case {
  background: var(--td-case-bg, #342b22);
  border-top: 3px solid var(--td-orange);
}

.entry-content .td-case .td-case__title {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
}

.td-case__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 20px 0 6px;
  padding: 16px 0;
  border-block: 1px solid rgba(255, 255, 255, 0.16);
}

/* .entry-content scope: Astra's paragraph margin-bottom outranked a bare .td-case__stat and padded each stat. */
.entry-content .td-case .td-case__stat {
  margin: 0;
}

.td-case__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.td-case__label {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.entry-content .td-case h4 {
  margin: 18px 0 4px;
  font-size: 1.05rem;
  line-height: 1.3;
}

.entry-content .td-case p:not(.td-eyebrow):not(.td-case__stat) {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.td-quote {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #2b2e33;
}

/* Decorative (aria-hidden); the brand orange is fine for a non-text mark. */
.td-quote__mark {
  display: block;
  width: 40px;
  height: 34px;
  fill: var(--td-orange);
}

/* margin-block auto centres the quote between the mark and the attribution, as in the mockup. Resets
   Astra's blockquote border/padding/italic. */
.entry-content .td-quote blockquote.td-quote__text {
  margin: auto 0;
  padding: 24px 0;
  border: 0;
  background: none;
  font-style: normal;
}

.entry-content .td-quote .td-quote__text p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.65;
  color: #2b2e33;
}

.td-quote__cite {
  font-size: 0.95rem;
  color: #4a4e55;
}

.td-quote__cite strong {
  color: var(--td-dark);
}

/* Industry pills: plain text tags, not links. Opts out of the sitewide bullet and the 48px list inset. */
.entry-content ul.td-pills:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* No top margin here: this rule outranks the H2 -> pills gap above. */
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
}

.entry-content ul.td-pills li {
  margin: 0;
  padding: 10px 20px;
  border: 1px solid #dfe2e6;
  border-radius: 999px;
  background: var(--td-gray-bg);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--td-dark);
}

.entry-content ul.td-pills li::before {
  content: none;
}

/* FAQ: narrower centred column, core Details blocks as white cards. Native <details>/<summary>, so
   keyboard and screen-reader behaviour is the browser's own; the marker is redrawn as a triangle. */
.entry-content .wp-block-group.td-faq {
  max-width: 850px;
  margin: 0 auto;
  padding: 0;
}

.entry-content .wp-block-details.td-faq__item {
  margin: 12px 0 0;
  padding: 0;
  background: #fff;
  border: 1px solid #dfe2e6;
  border-radius: 8px;
}

.td-faq__item > summary {
  position: relative;
  display: block;
  list-style: none;
  padding: 20px 24px 20px 48px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--td-dark);
}

.td-faq__item > summary::-webkit-details-marker {
  display: none;
}

/* Right-pointing triangle, turns down when open; centred on the first line (20px pad + half the 1.4 line). */
.td-faq__item > summary::before {
  content: "";
  position: absolute;
  left: 24px;
  top: calc(20px + 0.7em - 6px);
  border-left: 10px solid var(--td-dark);
  border-block: 6px solid transparent;
  transition: transform 0.2s ease;
}

.td-faq__item[open] > summary::before {
  transform: rotate(90deg);
}

.td-faq__item > summary:focus-visible {
  outline: 3px solid var(--td-orange-onlight);
  outline-offset: 2px;
}

.entry-content .td-faq__item > p {
  margin: -6px 0 0;
  padding: 0 24px 20px 48px;
  color: #4a4e55;
  line-height: 1.6;
}

/* Closing CTA band: text left, buttons right (stacks on narrow screens). Same .td-btn primary/ghost pair
   as the sitewide .td-cta-band. */
.entry-content .wp-block-group.td-band--cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
}

.entry-content .wp-block-group.td-band--cta > .td-band-cta__text {
  flex: 1 1 420px;
  margin: 0;
  padding: 0;
}

.entry-content .td-band-cta__text h2 {
  margin: 0 0 8px;
}

.entry-content .td-band-cta__text p {
  margin: 0;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Last thing on the page: where Astra adds no content padding below (tablet/phone), the charcoal band would sit
   flush on the dark footer and read as one slab. 48px, the same fix as .td-cta-band. */
@media (max-width: 1250px) {
  .entry-content .wp-block-group.td-band--cta:last-child {
    margin-bottom: 48px;
  }
}

.td-band-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .td-results {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .td-case,
  .td-quote {
    padding: 24px 20px;
  }

  .td-case__stats {
    gap: 12px 24px;
  }

  .td-faq__item > summary {
    padding: 16px 18px 16px 42px;
  }

  .td-faq__item > summary::before {
    left: 18px;
    top: calc(16px + 0.7em - 6px);
  }

  .entry-content .td-faq__item > p {
    padding: 0 18px 16px 42px;
  }

  .td-band-cta__actions {
    width: 100%;
  }

  .td-band-cta__actions .td-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* BOLD-R1 (2026-10-17, MANIFEST §52): the sitewide "bold" layout. Built as a switchable layer; since 2026-10-27
   (MANIFEST §104) it is the only layout, every rule here applies unconditionally. html:root (always matches) keeps
   the 0,1,1 base specificity these rules were tuned with, so they still out-rank Elementor's later one-class rules.
   First round: tokens; the 7 L2 photo-header pages (hero); Nationwide 7846; Chris's fonts (Archivo / Public Sans)
   in the content area. Later rounds (sections 9-18) cover the rest, the homepage included. */

/* 2. Tokens. --td-bold-* on purpose (--td-dark is the sitewide #1a1d21, untouched). The case-study card shade is
   derived from the dark token (8% white), so a colour trial moves it too (the .td-case rule's fallback is the
   old literal #342b22). Overlay levels: left = behind the text, right = far side of the photo. A page that
   needs more can set --td-hero-overlay-left on its body class (the scrim is built on the layer itself, so it picks
   up per-page values). */
html:root {
  --td-bold-dark: #201911;
  --td-bold-dark-rgb: 32, 25, 17;
  --td-hero-overlay-left: 0.85;
  --td-hero-overlay-right: 0.55;
  --td-case-bg: color-mix(in srgb, var(--td-bold-dark) 92%, #fff);
}

/* 3. L2 photo-header hero (.td-page-header-photo + .td-mission-callout [+ .td-stat-strip]): Gutenberg pages
   (.entry-content) and the two Elementor HTML-widget pages (Business Phone Systems, Manuals) alike, generalised
   from 8232. Base = solid dark pieces, full-bleed by box-shadow (the fallback without anchor positioning). */
html:root body:not(.home).ast-plain-container #primary:has(.td-page-header-photo),
html:root body:not(.home) .elementor .elementor-top-section:has(.td-page-header-photo):first-child {
  margin-top: 0;
  padding-top: 0;
}

html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child,
html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout,
html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip {
  background: var(--td-bold-dark);
  box-shadow: 0 0 0 100vmax var(--td-bold-dark);
  clip-path: inset(0 -100vmax);
}

/* Hairline fix (as 8232 round 3): a piece with another hero piece after it runs 1px under it. */
html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child,
html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout:has(+ .td-stat-strip) {
  clip-path: inset(0 -100vmax -1px);
}

html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child {
  height: auto;
  min-height: 0;
}

html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child .td-page-header-photo__inner {
  padding: 64px 40px 0;
}

html:root .td-page-header-photo:first-child h1 {
  margin: 10px 0 0;
  max-width: 900px;
  color: #fff;
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  text-shadow: none;
}

html:root .td-page-header-photo:first-child .td-eyebrow {
  text-shadow: none;
}

html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout {
  max-width: none;
  margin: 0;
  padding: 20px 40px 52px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  animation: none;
}

html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout:has(+ .td-stat-strip) {
  padding-bottom: 8px;
}

/* Long-form Gutenberg pages: the old cream callout gave the first heading air; the dark hero needs a gap below
   (not before a stat strip or a full-bleed band; the Elementor pages' next section has its own padding). */
html:root .entry-content > .td-page-header-photo:first-child + .td-mission-callout:not(:has(+ .td-stat-strip, + .td-band)) {
  margin-bottom: 44px;
}

html:root .td-page-header-photo:first-child + .td-mission-callout::before {
  content: none;
}

/* Text measure ~820px whether the callout is the paragraph itself or wraps paragraphs + buttons. */
html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + p.td-mission-callout {
  padding-right: max(40px, calc(100% - 860px));
}

html:root .td-page-header-photo:first-child + .td-mission-callout > p {
  max-width: 820px;
}

html:root .td-page-header-photo:first-child + .td-mission-callout :is(strong, b) {
  color: #fff;
}

html:root .td-page-header-photo:first-child + .td-mission-callout a:not(.td-btn) {
  color: #fff;
}

html:root .td-page-header-photo:first-child + .td-mission-callout .td-mission-callout__actions {
  margin-top: 24px;
}

/* Outline button on the dark hero: white border + text (the dark outline would vanish). */
html:root .td-page-header-photo:first-child + .td-mission-callout .td-btn--outline {
  color: #fff !important;
  border-color: #fff;
}

html:root .td-page-header-photo:first-child + .td-mission-callout .td-btn--outline:hover {
  background: #fff;
  color: var(--td-dark) !important;
}

html:root .td-page-header-photo:first-child + .td-mission-callout .td-btn:focus-visible {
  outline-color: #fff;
}

/* Stat strip under the intro: hairline divider, as the mockup. */
html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip {
  margin: 0;
  padding: 36px 40px 48px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16));
  background-size: calc(100% - 80px) 1px;
  background-position: 40px 20px;
  background-repeat: no-repeat;
}

@media (max-width: 600px) {
  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child .td-page-header-photo__inner {
    padding: 44px 20px 0;
  }

  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout {
    padding: 16px 20px 36px;
    font-size: 1.06rem;
  }

  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout:has(+ .td-stat-strip) {
    padding-bottom: 4px;
  }

  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + p.td-mission-callout {
    padding-right: 20px;
  }

  html:root .entry-content > .td-page-header-photo:first-child + .td-mission-callout:not(:has(+ .td-stat-strip, + .td-band)) {
    margin-bottom: 28px;
  }

  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip {
    padding: 34px 20px 36px;
    background-size: calc(100% - 40px) 1px;
    background-position: 20px 16px;
  }
}

/* Photo behind the WHOLE hero, edge to edge, under a left-to-right scrim (8232 technique): the header goes static
   so its ::before is positioned against the parent (relative + isolated, z-index -1 = above the page, under the
   text); bottom edge anchored to the last hero piece. Each page's own inline url / size / pos custom properties. */
@supports (anchor-name: --a) {
  html:root :is(.entry-content, .elementor-widget-container):has(> .td-page-header-photo:first-child) {
    position: relative;
    isolation: isolate;
  }

  /* Last match in tree order wins: the stat strip, else the intro. */
  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child,
  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout,
  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip {
    anchor-name: --td-hero-end;
    background-color: transparent;
    box-shadow: none;
    clip-path: none;
  }

  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child {
    position: static;
    background-image: none;
  }

  html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
    --td-bold-hero-scrim: linear-gradient(90deg, rgba(var(--td-bold-dark-rgb), var(--td-hero-overlay-left)) 0%, rgba(var(--td-bold-dark-rgb), var(--td-hero-overlay-left)) 35%, rgba(var(--td-bold-dark-rgb), var(--td-hero-overlay-right)) 80%);
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: anchor(--td-hero-end bottom);
    left: calc(50% - 50vw);
    width: 100vw;
    background-color: var(--td-bold-dark);
    background-image: var(--td-bold-hero-scrim), var(--td-page-header-photo-url);
    background-size: auto, var(--td-page-header-photo-size, cover);
    background-position: 0 0, var(--td-page-header-photo-pos, 50% 30%);
    background-repeat: no-repeat;
    pointer-events: none;
  }

  /* Phones/small tablets: one flat scrim at the left value (text spans the full width there). */
  @media (max-width: 767px) {
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
      --td-bold-hero-scrim: linear-gradient(rgba(var(--td-bold-dark-rgb), var(--td-hero-overlay-left)), rgba(var(--td-bold-dark-rgb), var(--td-hero-overlay-left)));
    }
  }

  /* Same 1100/700 file tiers as the base band (section 'Interior page header, photo variant'); one line per image (must out-rank the ::before rule above). */
  @media (max-width: 1100px) {
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="business-phone-systems-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/business-phone-systems-header-1100.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="manuals-documentation-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/manuals-documentation-header-1100.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="nationwide-service-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/nationwide-service-header-1100.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="paging-systems-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/paging-systems-header-1100.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="voice-data-cabling-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/voice-data-cabling-header-1100.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="wireless-networking-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/wireless-networking-header-1100.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="ip-security-cameras-hero"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/10/ip-security-cameras-hero-v2-1100.webp'); }
  }

  @media (max-width: 700px) {
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="business-phone-systems-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/business-phone-systems-header-700.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="manuals-documentation-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/manuals-documentation-header-700.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="nationwide-service-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/nationwide-service-header-700.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="paging-systems-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/paging-systems-header-700.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="voice-data-cabling-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/voice-data-cabling-header-700.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="wireless-networking-header"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/09/wireless-networking-header-700.webp'); }
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo[style*="ip-security-cameras-hero"]:first-child::before { background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/10/ip-security-cameras-hero-v2-700.webp'); }
  }

  /* Phones: cover, like the base band (a 100%-wide image is too short for the taller hero). */
  @media (max-width: 600px) {
    html:root :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
      background-size: auto, cover;
    }
  }
}

/* 4. Nationwide (7846) = the 8232 look (8232 itself was removed 2026-10-18, MANIFEST §69). Copied from the
   NATIONWIDE-BOLD-TEST block (non-hero rules). Section H2 + type per Chris's mockup. */
html:root :is(.page-id-7846, .page-id-8232) .entry-content .wp-block-group.td-band {
  padding-top: 76px;
  padding-bottom: 76px;
}

html:root :is(.page-id-7846, .page-id-8232) .td-band--center > .td-eyebrow,
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band--center > h2,
html:root :is(.page-id-7846, .page-id-8232) .td-band--center > .td-band__sub,
html:root :is(.page-id-7846, .page-id-8232) .entry-content .wp-block-group.td-band--center > .td-band__sub-h,
html:root :is(.page-id-7846, .page-id-8232) .td-band--center > .td-band__close {
  text-align: left;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band h2 {
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band:not(.td-band--reverse) h2 {
  color: var(--td-charcoal);
}

html:root :is(.page-id-7846, .page-id-8232) .td-card--static .td-card__text,
html:root :is(.page-id-7846, .page-id-8232) .td-icon-box__desc,
html:root :is(.page-id-7846, .page-id-8232) .td-steps p,
html:root :is(.page-id-7846, .page-id-8232) .td-band-split p:not(.td-eyebrow),
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split li,
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-case p:not(.td-eyebrow):not(.td-case__stat),
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-faq__item > p,
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-cta__text p {
  font-size: 17px;
  line-height: 1.6;
}

html:root :is(.page-id-7846, .page-id-8232) .td-icon-box__desc {
  font-weight: 400;
}

html:root :is(.page-id-7846, .page-id-8232) .td-card--static,
html:root :is(.page-id-7846, .page-id-8232) .td-card--static:hover {
  border: 1px solid #d9dde3;
  border-radius: 6px;
  box-shadow: none;
}

html:root :is(.page-id-7846, .page-id-8232) .td-card--static .td-card__body {
  border-top: 0;
  padding: 26px;
}

html:root :is(.page-id-7846, .page-id-8232) a.td-icon-box {
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

html:root :is(.page-id-7846, .page-id-8232) a.td-icon-box:hover {
  border-color: var(--td-orange);
}

html:root :is(.page-id-7846, .page-id-8232) .td-icon-box__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  transform-origin: left center;
}

html:root :is(.page-id-7846, .page-id-8232) .td-icon-box__icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--td-orange);
}

html:root :is(.page-id-7846, .page-id-8232) a.td-icon-box > span:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
}

html:root :is(.page-id-7846, .page-id-8232) .td-icon-box__more {
  margin-top: auto;
  padding-top: 12px;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content ol.td-steps > li {
  padding: 24px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split ul.wp-block-list:not(.elementor ul):not(.wpforms-container ul):not(li ul) {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split ul.wp-block-list li {
  margin: 0;
  padding: 18px 24px 18px 56px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split ul.wp-block-list li::before {
  left: 24px;
  top: calc(18px + 0.3em);
}

/* Pull quote (8232 round 2 sizes; 400 = the Public Sans weight loaded, 500 would fall back to it anyway). */
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.45;
}

/* Check + closing tagline left-aligned; the "Managing contractors" band (right after the stat strip) stays centred. */
html:root :is(.page-id-7846, .page-id-8232) .td-band__verdict-mark .td-mark {
  margin-left: 0;
  margin-right: 0;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band .td-band__verdict {
  text-align: left;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-stat-strip + .wp-block-group.td-band > h2,
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-stat-strip + .wp-block-group.td-band > .td-band__sub-h,
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-stat-strip + .wp-block-group.td-band .td-band__verdict {
  text-align: center;
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-stat-strip + .wp-block-group.td-band > .td-band__sub-h {
  text-wrap: balance;
}

html:root :is(.page-id-7846, .page-id-8232) .td-stat-strip + .td-band .td-band__verdict-mark .td-mark {
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed band backgrounds (box-shadow + side-only clip; never adds scroll width), 1px run-under against hairlines
   except the closing CTA (nothing full-bleed follows it). Reverse bands on the token. */
html:root :is(.page-id-7846, .page-id-8232) .entry-content .wp-block-group.td-band--reverse {
  background-color: var(--td-bold-dark);
  box-shadow: 0 0 0 100vmax var(--td-bold-dark);
  clip-path: inset(0 -100vmax -1px);
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .wp-block-group.td-band--tint {
  box-shadow: 0 0 0 100vmax var(--td-gray-bg);
  clip-path: inset(0 -100vmax -1px);
}

html:root :is(.page-id-7846, .page-id-8232) .entry-content .wp-block-group.td-band--reverse.td-band--cta {
  clip-path: inset(0 -100vmax);
}

@media (max-width: 1250px) {
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
    font-size: 21px;
  }
}

@media (max-width: 900px) {
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .wp-block-group.td-band {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  html:root :is(.page-id-7846, .page-id-8232) a.td-icon-box,
  html:root :is(.page-id-7846, .page-id-8232) .td-card--static .td-card__body,
  html:root :is(.page-id-7846, .page-id-8232) .entry-content ol.td-steps > li {
    padding: 22px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split ul.wp-block-list li {
    padding: 16px 20px 16px 50px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split ul.wp-block-list li::before {
    left: 20px;
    top: calc(16px + 0.3em);
  }
}

@media (max-width: 544px) {
  html:root :is(.page-id-7846, .page-id-8232) .td-card--static .td-card__text,
  html:root :is(.page-id-7846, .page-id-8232) .td-icon-box__desc,
  html:root :is(.page-id-7846, .page-id-8232) .td-steps p,
  html:root :is(.page-id-7846, .page-id-8232) .td-band-split p:not(.td-eyebrow),
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-split li,
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-case p:not(.td-eyebrow):not(.td-case__stat),
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-faq__item > p,
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-band-cta__text p {
    font-size: 16px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
    font-size: 18px;
  }
}

/* 5. Chris's fonts, content area only (#content = between the header and footer on both the Astra and the
   Elementor full-width templates; the homepage is excluded this round). The two kit variables AND the two
   :root aliases are re-declared here (the aliases are resolved where they're declared, so overriding only the
   kit variables would not reach them); the font-family line covers Gutenberg body text, which inherits Astra's
   literal 'Inter' from body. Weights loaded: Archivo 700/800, Public Sans 400/600/700. */
html:root body:not(.home) #content {
  --e-global-typography-primary-font-family: "Archivo";
  --e-global-typography-secondary-font-family: "Archivo";
  --e-global-typography-text-font-family: "Public Sans";
  --e-global-typography-accent-font-family: "Public Sans";
  --font-heading: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", Arial, sans-serif;
  font-family: var(--font-body);
}

/* Form controls and buttons carry Astra's / the Elementor kit's literal Inter, not inherited. */
html:root body:not(.home) #content :is(button, input, select, textarea, .ast-button, .elementor-button, .wp-block-button__link, .wpforms-submit) {
  font-family: var(--font-body);
}

/* L3 band H1 on phones names Space Grotesk literally (light-band block, <=700px). */
html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner h1 {
  font-family: var(--font-heading);
}

/* Headings keep their weights: 700 is the lightest Archivo loaded, so the old 600 renders as 700. */

/* Buttons: Public Sans 700 / 17px (mockup). */
html:root body:not(.home) #content :is(.td-btn, .elementor-button, .wp-block-button__link) {
  font-weight: 700;
  font-size: 17px;
}

html:root body:not(.home) #content .wpforms-submit {
  font-weight: 700;
}

/* Eyebrows: Public Sans 700, mockup tracking 0.16em; size unchanged (15/14/13). */
html:root body:not(.home) #content .td-eyebrow {
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Card titles, stat numbers, FAQ questions, quote attribution (mockup sizes). */
html:root body:not(.home) #content .td-icon-box__title {
  font-size: 22px;
}

html:root body:not(.home) #content .td-card--static .td-card__title:not(.td-band__sub-h) {
  font-size: 21px;
}

html:root body:not(.home) #content .td-case .td-case__title {
  font-size: 22px;
}

html:root body:not(.home) #content .entry-content .td-steps h3 {
  font-size: 19px;
}

html:root body:not(.home) #content .td-stat-strip__num {
  font-size: 34px;
  font-weight: 800;
}

html:root body:not(.home) #content .td-case__num {
  font-size: 30px;
  font-weight: 800;
}

html:root body:not(.home) #content .td-faq__item > summary {
  font-weight: 700;
}

html:root body:not(.home) #content .td-quote__cite {
  font-size: 16px;
}

@media (max-width: 600px) {
  html:root body:not(.home) #content .td-stat-strip__num {
    font-size: 30px;
  }

  html:root body:not(.home) #content .td-case__num {
    font-size: 26px;
  }
}

/* 7. Hero photo focal points under bold (2026-10-17, MANIFEST §54). The bold hero is full-bleed and wider/shorter than
   the old band, so some photos lost their subject. Declared ON the ::before: the page's inline style sets these
   properties on the header itself, so a value set on an ancestor would be shadowed.
   BPS = same photo as Reviews (separate file), framed like Reviews: screen + keypad (y 45%; x only matters <=600).
   Manuals: binders + phone (was only the top third of the photo). Wireless: the whole access point (was cut at the bottom). */
html:root .page-id-7857 :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
  --td-page-header-photo-pos: 70% 45%;
}

html:root .page-id-7861 :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
  --td-page-header-photo-pos: 50% 47%;
}

html:root .page-id-7856 :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
  --td-page-header-photo-pos: 50% 26%;
}

/* IP Security Cameras (8241, 2026-10-24, MANIFEST §82, re-tuned §83 for the 16:9 photo v2). The dome + mount + cable loop
   take ~55% of the photo's height and the bold hero is only ~305-330px tall (set by its text), so from 768px the photo is
   sized by the hero's HEIGHT (174% = ~530-575px tall, ~945-1020px wide; it stops growing once the hero height settles, so
   the dome is the same size at 1240 and 2560) and anchored right. That keeps the whole dome and cable loop in frame at
   768-2560 and, from 1240 up, clear of the lead paragraph. Left of the photo is the hero's own --td-bold-dark background;
   the -bold-wide file is the same photo with its left 31% faded to #201911 (= --td-bold-dark) so there is no seam (the
   photo's real left edge is bright orange cabling). <=767px keeps the shared phone rules. */
@media (min-width: 768px) {
  html:root .page-id-8241 :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child::before {
    background-image: var(--td-bold-hero-scrim), url('/wp-content/uploads/2026/10/ip-security-cameras-hero-v2-bold-wide.webp');
    background-size: auto, auto 174%;
    background-position: 0 0, 100% 8.7%;
  }
}

/* Same space above "Why Tandem Data" as above "How it works" (the split intro's bottom margin, 48px);
   the numbered list ran into the heading (§83). */

.page-id-8241 .entry-content ol.wp-block-list > li:last-child {
  margin-bottom: 0;
}

html:root body.page-id-8241 #content .entry-content ol.wp-block-list {
  margin-bottom: 48px;
}

/* 8. Nationwide Results under bold (2026-10-17, MANIFEST §55). Pull quote bigger so it fills the equal-height card
   (mark top, attribution bottom, quote centred by the existing margin-block auto). 500 = requested weight; it renders
   as 400 unless Public Sans 500 is in the font request. Case-study stats: one row on phones, labels wrap under
   their number (auto tracks shrink toward min-content), no orphan "3". */
html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 1250px) {
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
    font-size: 24px;
  }
}

@media (max-width: 900px) {
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
    font-size: 22px;
  }
}

@media (max-width: 600px) {
  html:root :is(.page-id-7846, .page-id-8232) .entry-content .td-quote .td-quote__text p {
    font-size: 19px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .td-case__stats {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    column-gap: 20px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .td-case__num {
    white-space: nowrap;
  }

  html:root :is(.page-id-7846, .page-id-8232) .td-case__label {
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-width: 420px) {
  html:root body:is(.page-id-7846, .page-id-8232) #content .td-case__num {
    font-size: 22px;
  }
}

@media (max-width: 380px) {
  html:root body:is(.page-id-7846, .page-id-8232) #content .td-case__num {
    font-size: 20px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .td-case__stats {
    column-gap: 14px;
  }

  html:root :is(.page-id-7846, .page-id-8232) .td-case__label {
    font-size: 12.5px;
  }
}

/* 9. ROUND 2 (2026-10-18, MANIFEST §56): typography, buttons, CTA bands, split intros, lists. Same scope
   as the rest of BOLD-R1 (content area, homepage excluded); the menu strip (incl. its Quote button)
   sits outside #content, so it is untouched. Placed here because these rules have to come after
   section 4-8 (the 8232-only NATIONWIDE-BOLD-TEST block was removed 2026-10-18, MANIFEST §69). */

/* 9a. Body copy ~1px up (Public Sans sets smaller than Inter): Astra's 1rem = 15px / 13.68px (<=1250) -> 16 / 15.
   Components with their own sizes (Nationwide 17px copy, review cards, eyebrows, buttons) keep them. */
html:root body:not(.home) #content {
  font-size: 16px;
  line-height: 1.6;
}

/* :where() = specificity of html:root only (0,1,1), so every component's own size still wins. Eyebrows
   (one-class size rule) and the hero intro's paragraphs (inherit the callout's size) are left out. */
html:root :where(body:not(.home) #content) :where(.entry-content p:not(.td-eyebrow, .td-mission-callout p), .entry-content li, .elementor-widget-text-editor) {
  font-size: 16px;
  line-height: 1.6;
}

html:root body:not(.home) #content .elementor-icon-box-description {
  font-size: 16px;
  line-height: 1.6;
}

/* Long-form measure: plain top-level paragraphs (no class, or only wp-block-paragraph) and single-column lists
   stop at 60ch = ~75-78 characters on a full line (were 150-160 at 1440 on Wireless / Cat5e / How We Work; 68ch
   measured 85-87). Left-aligned: the constrained layout would centre them. Classed paragraphs (hero intro,
   callouts) keep their own measure. */
html:root body:not(.home) #content .entry-content > p:is(:not([class]), .wp-block-paragraph):not(.td-mission-callout),
html:root body:not(.home) #content .entry-content > ul:not(.td-list-2col):not(.td-feature-grid):not(.td-pills):not(.td-review-cards),
html:root body:not(.home) #content .elementor-widget-text-editor p {
  max-width: 60ch;
  margin-left: 0;
  margin-right: 0;
}

/* 9b. Headings (Chris's mockup, all bold-mode pages): section H2 = Archivo 800 at the Nationwide band size; card
   titles and other H3/H4 = 700 (sizes from section 5 unchanged). CTA-band titles are styled with the band (9e). */
html:root body:not(.home) #content h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}

html:root body:not(.home) #content :is(h3, h4) {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* L3 light-band H1: 800 / 1.05, Nationwide clamp above 700px. At <=700 the band is 100-130px tall with a
   right-aligned title (MANIFEST §25), so the phone size stays the band's own clamp (22-26px; Remote Programming 22). */
html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner h1 {
  font-weight: 800;
  line-height: 1.05;
}

@media (min-width: 701px) {
  html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner h1 {
    font-size: clamp(34px, 4.6vw, 60px);
  }
}

/* 9c. Buttons: Public Sans 700 / 17px, mockup 52px box (14 x 28 padding + 2px border, 6px radius). Light ground:
   orange -> dark token on hover, outline = dark token -> filled; dark ground (hero intro, CTA bands, reverse
   bands): hover fills white. Focus ring 3px, dark token on light grounds, white on dark. */
html:root body:not(.home) #content .td-btn {
  padding: 14px 28px;
  border-width: 2px;
  border-style: solid;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

html:root body:not(.home) #content .td-btn--primary {
  background: var(--td-orange);
  border-color: var(--td-orange);
  color: var(--td-bold-dark) !important;
}

html:root body:not(.home) #content .td-btn--primary:hover {
  background: var(--td-bold-dark);
  border-color: var(--td-bold-dark);
  color: #fff !important;
}

html:root body:not(.home) #content .td-btn--outline {
  background: transparent;
  border-color: var(--td-bold-dark);
  color: var(--td-bold-dark) !important;
}

html:root body:not(.home) #content .td-btn--outline:hover {
  background: var(--td-bold-dark);
  color: #fff !important;
}

html:root body:not(.home) #content .td-btn:focus-visible {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 3px;
}

html:root body:not(.home) #content :is(.td-cta-band, .td-band--reverse, .td-page-header-photo:first-child + .td-mission-callout) .td-btn--outline {
  border-color: #fff;
  color: #fff !important;
}

html:root body:not(.home) #content :is(.td-cta-band, .td-band--reverse, .td-page-header-photo:first-child + .td-mission-callout) .td-btn--ghost {
  background: transparent;
  border-color: #fff;
  color: #fff !important;
}

html:root body:not(.home) #content :is(.td-cta-band, .td-band--reverse, .td-page-header-photo:first-child + .td-mission-callout) .td-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--td-bold-dark) !important;
}

html:root body:not(.home) #content :is(.td-cta-band, .td-band--reverse, .td-page-header-photo:first-child + .td-mission-callout) .td-btn:focus-visible {
  outline-color: #fff;
}

/* WPForms submit (Contact / Get a Quote): same primary button. */
html:root body:not(.home) #content .wpforms-container .wpforms-submit {
  padding: 14px 28px;
  border: 2px solid var(--td-orange);
  border-radius: 6px;
  background: var(--td-orange);
  color: var(--td-bold-dark);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  height: auto;
}

html:root body:not(.home) #content .wpforms-container .wpforms-submit:hover {
  background: var(--td-bold-dark);
  border-color: var(--td-bold-dark);
  color: #fff;
}

html:root body:not(.home) #content .wpforms-container .wpforms-submit:focus-visible {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 3px;
}

/* 9d. Split intros (H2 + list/copy | figure): bold H2 from 9b, Nationwide's 56px column gap and 17px copy. */
html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro {
  column-gap: 56px;
  margin-bottom: 48px;
}

html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro__text > h2 {
  margin-bottom: 16px;
}

html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro__text > p {
  font-size: 17px;
}

html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro__text > * + ul {
  margin-top: 20px;
}

/* 9e. Closing CTA band (.td-cta-band, Gutenberg + the BPS Elementor copy) = the Nationwide closing CTA: dark token,
   full-bleed by box-shadow + side-only clip (no 100vw, no scroll width), square, no waves or orange rule, text left /
   buttons right, band-size title. */
html:root body:not(.home) #content :is(.entry-content .wp-block-group.td-cta-band, .td-cta-band--elementor) {
  gap: 22px 40px;
  margin: 72px 0 48px;
  padding: 76px 0;
  background: var(--td-bold-dark);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--td-bold-dark);
  clip-path: inset(0 -100vmax);
}

/* Gap to the footer = Nationwide's: 60px above 1250 (Astra's content padding, so no margin), 48px below.
   The BPS Elementor copy sits in a section that adds 40px under it, so its margin is 40px less (selector out-ranks the phone margin shorthand below). */
@media (min-width: 1251px) {
  html:root body:not(.home) #content .entry-content .wp-block-group.td-cta-band:last-child {
    margin-bottom: 0;
  }

  html:root body:not(.home) #content .elementor-widget-container > .wp-block-group.td-cta-band.td-cta-band--elementor {
    margin-bottom: 20px;
  }
}

@media (max-width: 1250px) {
  html:root body:not(.home) #content .elementor-widget-container > .wp-block-group.td-cta-band.td-cta-band--elementor {
    margin-bottom: 8px;
  }
}

html:root body:not(.home) #content .td-cta-band__text {
  flex: 1 1 420px;
}

html:root body:not(.home) #content .td-cta-band h3 {
  margin: 0 0 8px;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}

html:root body:not(.home) #content .td-cta-band p {
  font-size: 17px;
  line-height: 1.6;
}

/* 9f. Lists = the Nationwide checklist: bordered white rows, green check. Gutenberg list blocks (not the Hosted PBX
   feature grid) + Wireless's one plain list. Two columns for td-list-2col (grid, so rows line up). This applies to the
   Manuals and city-page link lists and Privacy too (an earlier note here said they kept square bullets; they don't);
   Thank-you overrides the glyph with its arrow. Check = THE site check (--td-check-glyph, #2E9E3A, 2026-10-29 §120)
   in the same 20x20 slot (glyph fitted by contain, ~20 x 19.3), so padding and text did not move. */
html:root body:not(.home) #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul),
html:root body:not(.home).page-id-7856 #content .entry-content > ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  column-count: auto;
}

html:root body:not(.home) #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li,
html:root body:not(.home).page-id-7856 #content .entry-content > ul > li {
  margin: 0;
  padding: 18px 24px 18px 56px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
}

html:root body:not(.home) #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li::before,
html:root body:not(.home).page-id-7856 #content .entry-content > ul > li::before {
  left: 24px;
  top: calc(18px + 0.75em - 10px);
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: var(--td-check-color);
  -webkit-mask: var(--td-check-glyph) center / contain no-repeat;
  mask: var(--td-check-glyph) center / contain no-repeat;
  transform: none;
}

@media (min-width: 800px) {
  html:root body:not(.home) #content .entry-content ul.wp-block-list.td-list-2col:not(.td-feature-grid):not(li ul) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* In a split column or Nationwide's band-split the list has no trailing gap (the column/band ends there). */
html:root body:not(.home) #content .entry-content :is(.td-split-intro__text, .td-band-split) ul.wp-block-list:last-child {
  margin-bottom: 0;
}

@media (max-width: 1250px) {
  html:root body:not(.home) #content,
  html:root :where(body:not(.home) #content) :where(.entry-content p:not(.td-eyebrow, .td-mission-callout p), .entry-content li, .elementor-widget-text-editor),
  html:root body:not(.home) #content .elementor-icon-box-description {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  html:root body:not(.home) #content :is(.entry-content .wp-block-group.td-cta-band, .td-cta-band--elementor) {
    margin: 48px 0;
    padding: 56px 0;
  }

  html:root body:not(.home) #content .td-cta-band__actions {
    width: 100%;
  }

  html:root body:not(.home) #content .td-cta-band__actions .td-btn {
    flex: 1 1 100%;
  }

  html:root body:not(.home) #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li,
  html:root body:not(.home).page-id-7856 #content .entry-content > ul > li {
    padding: 16px 20px 16px 50px;
  }

  html:root body:not(.home) #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li::before,
  html:root body:not(.home).page-id-7856 #content .entry-content > ul > li::before {
    left: 20px;
    top: calc(16px + 0.75em - 10px);
  }
}

@media (max-width: 544px) {
  html:root body:not(.home) #content .td-cta-band p,
  html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro__text > p {
    font-size: 16px;
  }
}

/* 9g. Hosted PBX feature grid (td-feature-grid, page 7858 only) = the same checklist rows as 9f (cowork R2 answer d,
   2026-10-18). Grid kept (2 columns >=800, 1 below - base rules), 12px gap like 9f; the base 12px orange square
   on the <strong> is hidden and the 9f green check goes on the li itself; lead/description indents move to the li's
   56px (50 on phones) padding. */
html:root body:not(.home) #content .entry-content ul.td-feature-grid {
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
}

html:root body:not(.home) #content .entry-content ul.td-feature-grid > li {
  margin: 0;
  padding: 18px 24px 18px 56px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
}

html:root body:not(.home) #content .entry-content ul.td-feature-grid > li::before {
  content: "";
  left: 24px;
  top: calc(18px + 0.75em - 10px);
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: var(--td-check-color);
  -webkit-mask: var(--td-check-glyph) center / contain no-repeat;
  mask: var(--td-check-glyph) center / contain no-repeat;
  transform: none;
}

html:root body:not(.home) #content .entry-content ul.td-feature-grid > li strong::before {
  content: none;
}

html:root body:not(.home) #content .entry-content ul.td-feature-grid > li :is(strong, span) {
  padding-left: 0;
}

@media (max-width: 600px) {
  html:root body:not(.home) #content .entry-content ul.td-feature-grid > li {
    padding: 16px 20px 16px 50px;
  }

  html:root body:not(.home) #content .entry-content ul.td-feature-grid > li::before {
    left: 20px;
    top: calc(16px + 0.75em - 10px);
  }
}

/* 10. ROUND 3 (2026-10-18, MANIFEST §58): solid title bands for the pages below L2. Same scope as the rest
   of BOLD-R1. 10a = the 17 light-band pages (8 L3 children + 9 misc: About, Carrier, Contact, Quote, Leasing,
   Relocation, Privacy, Thank-you, Service Areas), 10b = the 22 pages that only had Astra's plain title (18 city pages
   + the 4 manual sub-pages). L2 photo heroes, Manuals, Home, Nationwide and the CTA bands are not touched.
   Both kinds: --td-bold-dark, no art, no orange rule, flush under the header like the L2 heroes, full-bleed by
   box-shadow + side-only clip (no 100vw), text left-aligned on the L2 hero's 40 / 20px inset, centred vertically.
   L3 (strip art, style*="-l3-") keeps the old band height as a minimum (160 desktop); misc + plain-title bands
   are content-driven with a 120px minimum (100 at <=700). Single piece each, so no seam to overlap. */

/* 10a + 10b. Flush under the header (was 24px >=1200 with a band, Astra's 60px >=1200 on plain-title pages). */
html:root body:not(.home).ast-plain-container #primary:has(.td-page-header-light),
html:root body.page:not(.home).ast-plain-container #primary:has(.entry-header > .entry-title):not(:has(.td-page-header-light, .td-page-header-photo)) {
  margin-top: 0;
}

html:root body:not(.home) .elementor .elementor-top-section:has(.td-page-header-light):first-child {
  padding-top: 0;
}

/* 10a. Light band -> solid band. The background shorthand also drops the tier / phone-swap background-image rules. */
html:root body:not(.home) #content .td-page-header-light {
  height: auto;
  min-height: 120px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 44px;
  background: var(--td-bold-dark);
  border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--td-bold-dark);
  clip-path: inset(0 -100vmax);
}

html:root body:not(.home) #content .td-page-header-light[style*="-l3-"] {
  min-height: clamp(120px, 14vw, 160px);
}

html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner {
  width: 100%;
  padding: 24px 40px;
  text-align: left;
}

html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner h1 {
  margin: 0;
  color: #fff;
  text-align: left;
  text-shadow: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner .td-eyebrow {
  color: var(--td-orange);
  text-align: left;
}

html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner .td-eyebrow + h1 {
  margin-top: 10px;
}

/* No glow behind the text on a solid band. */
html:root body:not(.home) #content .td-page-header-light :is(.td-eyebrow, h1)::before {
  content: none;
}

/* Subtitle (none today; for a future band that has one). */
html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner > p:not(.td-eyebrow) {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.85);
}

/* 10b. Astra's plain page title (pages only, not search/archive lists; only pages with no band or photo hero) -> the same slim band. Title = the 10a band
   size capped at Astra's 44px (at 60px the city titles wrap to two lines on desktop); <=700 the band's 22-26px. */
html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
  display: flex;
  align-items: center;
  min-height: 120px;
  margin: 0 0 44px;
  padding: 24px 40px;
  background: var(--td-bold-dark);
  box-shadow: 0 0 0 100vmax var(--td-bold-dark);
  clip-path: inset(0 -100vmax);
}

html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header > .entry-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.6vw, 44px);
  font-weight: 800;
  line-height: 1.05;
}

@media (max-width: 700px) {
  html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header > .entry-title {
    font-size: clamp(22px, 6.8vw, 26px);
  }

  html:root body:not(.home) #content .td-page-header-light,
  html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
    min-height: 100px;
    margin-bottom: 28px;
  }

  html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner,
  html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
    padding: 20px;
  }
}

@media (max-width: 600px) {
  html:root body:not(.home) #content .td-page-header-light[style*="-l3-"] {
    min-height: clamp(100px, 26vw, 130px);
  }
}

/* 11. ROUND 4 (2026-10-18, MANIFEST §59): Elementor content, forms, Reviews, Thank-you. Same scope as the
   rest of BOLD-R1 (content area, homepage excluded). Card = the Nationwide bold card: white, 1px #d9dde3,
   6px radius, no shadow, 26px padding, orange border on hover. */

/* 11a. Elementor icon boxes (Business Phone Systems 7857, Manuals 7861): each widget becomes a card, equal height per
   row, whole card clickable (title link stretched), icon = bare 32px orange glyph (no white disc). Layout kept
   (icon left of text, 3 / 4 columns); phones stack as before but left-aligned like the Nationwide cards. */
html:root body:not(.home) #content .elementor-widget-icon-box {
  height: 100%;
}

html:root body:not(.home) #content .elementor-widget-icon-box > .elementor-widget-container {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 26px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

html:root body:not(.home) #content .elementor-widget-icon-box > .elementor-widget-container:has(a:hover) {
  border-color: var(--td-orange);
}

html:root body:not(.home) #content .elementor-widget-icon-box > .elementor-widget-container:has(a:focus-visible) {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 3px;
}

html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon-box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon-box-title a:focus-visible {
  outline: none;
}

html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon-box-title {
  margin-top: 0;
}

html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--td-orange);
  fill: var(--td-orange);
  font-size: 32px;
}

html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon-box-icon {
  line-height: 1;
}

/* Manuals at 768-1023 (§61): the 4 icon-box columns wrap to 2 x 2 (25% -> 50%); 4 columns from 1024 up. */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body:not(.home) #content .elementor-top-section.elementor-element-ab0f98e > .elementor-container {
    flex-wrap: wrap;
  }

  html:root body:not(.home) #content .elementor-top-section.elementor-element-ab0f98e > .elementor-container > .elementor-column {
    width: 50%;
  }
}

/* <=1024 (Elementor tablet + phone): icon above the title like the Nationwide cards, text left. Beside the title it
   squeezed the 3 / 4 tablet columns to 3-4 line titles ("Hosted / Cloud / Phones") at 768. */
@media (max-width: 1024px) {
  html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: block;
    text-align: left;
  }

  html:root body:not(.home) #content .elementor-widget-icon-box .elementor-icon-box-icon {
    display: block;
    margin: 0 0 14px;
  }
}

/* 11b. Elementor tinted sections (#f4f5f6 boxes on BPS, Manuals, Service Areas x2): full-bleed on --td-gray-bg like the
   Nationwide tint bands (box-shadow + side-only clip, no 100vw). */
html:root body:not(.home) #content .elementor-top-section:is(.elementor-element-5fb3ed3, .elementor-element-ab0f98e, .elementor-element-4a0e3a6, .elementor-element-8675b84) {
  background-color: var(--td-gray-bg);
  box-shadow: 0 0 0 100vmax var(--td-gray-bg);
  clip-path: inset(0 -100vmax);
}

html:root body:not(.home) #content .elementor-top-section:is(.elementor-element-5fb3ed3, .elementor-element-ab0f98e) {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Service Areas: the intro panel starts right under the title band (no 44px white strip). The city list section between
   the two tints stays white (§61, cowork 2026-10-18; §59 had tinted it). */
html:root body:not(.home).page-id-7866 #content .td-page-header-light {
  margin-bottom: 0;
}

/* 11c. Elementor text: the R2 60ch measure pinned these centred paragraphs to the left (Service Areas intro and
   closing line, Manuals closing line) - centre the box. Links: on-light orange (bright orange is 2.3:1 on white). */
html:root body:not(.home):is(.page-id-7861, .page-id-7866) #content .elementor-widget-text-editor p {
  margin-inline: auto;
}

html:root body:not(.home) #content .elementor-widget-text-editor a {
  color: var(--td-orange-onlight);
  text-decoration: underline;
}

html:root body:not(.home) #content .elementor-widget-text-editor a:hover {
  color: var(--td-orange-onlight-hover);
}

/* 11d. Service Areas city list (Elementor icon list): each city = a small bold card, columns kept. */
html:root body:not(.home) #content .elementor-widget-icon-list .elementor-icon-list-items {
  display: grid;
  gap: 10px;
}

html:root body:not(.home) #content .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item {
  margin: 0;
  padding: 0;
}

html:root body:not(.home) #content .elementor-widget-icon-list .elementor-icon-list-item > a {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 18px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

html:root body:not(.home) #content .elementor-widget-icon-list .elementor-icon-list-item > a:hover {
  border-color: var(--td-orange);
}

html:root body:not(.home) #content .elementor-widget-icon-list .elementor-icon-list-item > a:focus-visible {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 2px;
}

html:root body:not(.home) #content .elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--td-text);
  font-weight: 700;
}

/* 11e. WPForms (Contact 7912, Get a Quote 7913; WPForms' own non-modern render). Styling only: fields, names, validation, submit and
   the redirect to Thank-you untouched. One form width (720px, the medium fields' width) so the message box no
   longer runs 480px past the inputs; 52px controls (= the R2 buttons), 6px radius, 16px text; 3px dark focus ring
   (as the buttons); errors in --td-red (4.98:1). */
html:root body:not(.home) #content .wpforms-container {
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}

html:root body:not(.home) #content .wpforms-container .wpforms-field {
  padding: 0;
  margin: 0 0 24px;
}

html:root body:not(.home) #content .wpforms-container .wpforms-field-label {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--td-text);
}

html:root body:not(.home) #content .wpforms-container .wpforms-required-label {
  color: var(--td-red);
}

html:root body:not(.home) #content .wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #8a9199;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--td-text);
}

html:root body:not(.home) #content .wpforms-container textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 150px;
  padding: 14px 16px;
  border: 1px solid #8a9199;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--td-text);
}

html:root body:not(.home) #content .wpforms-container :is(input, select, textarea):focus {
  border-color: var(--td-bold-dark);
  box-shadow: none;
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 2px;
}

html:root body:not(.home) #content .wpforms-container :is(input, select, textarea).wpforms-error {
  border-color: var(--td-red);
  box-shadow: inset 0 0 0 1px var(--td-red);
}

html:root body:not(.home) #content .wpforms-container :is(label, em).wpforms-error {
  display: block;
  margin-top: 6px;
  color: var(--td-red);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

html:root body:not(.home) #content .wpforms-container .wpforms-field-checkbox ul {
  display: grid;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
}

html:root body:not(.home) #content .wpforms-container .wpforms-field-checkbox li {
  margin: 0;
  padding: 0;
}

html:root body:not(.home) #content .wpforms-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

html:root body:not(.home) #content .wpforms-container input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 2px;
}

html:root body:not(.home) #content .wpforms-container .wpforms-submit-container {
  padding: 8px 0 0;
}

/* Success: both forms redirect to Thank-you (styled in 11g); an inline confirmation, if one is ever switched on,
   gets a bold card with a green rule. */
html:root body:not(.home) #content .wpforms-confirmation-container-full {
  max-width: 720px;
  margin: 0 0 24px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-left: 4px solid var(--td-green-ok);
  border-radius: 6px;
  color: var(--td-text);
}

/* 11f. Reviews 8131: review cards and the map get the bold card; excerpts upright (the bold system has no italics),
   17px like the Nationwide card copy; text unchanged. Buttons lose the inherited underline. */
html:root body:not(.home) #content .td-review-card {
  border-color: #d9dde3;
  box-shadow: none;
}

html:root body:not(.home) #content .td-review-card__excerpt {
  font-style: normal;
  font-size: 17px;
  line-height: 1.6;
}

html:root body:not(.home) #content .td-review-card__name {
  font-weight: 700;
}

/* The iframe carries an inline border:0, so the card edge is a 1px ring (box-shadow follows the radius). */
html:root body:not(.home) #content .td-reviews-embed {
  margin-top: 40px;
}

html:root body:not(.home) #content .td-reviews-embed iframe {
  border-radius: 6px;
  box-shadow: 0 0 0 1px #d9dde3;
}

html:root body:not(.home) #content a.td-btn {
  text-decoration: none;
}

/* 11g. Thank-you 8151: the "In the meantime" links are navigation, not a checklist - each row is a bold card with an
   orange arrow, the whole row clickable, text Public Sans 700 in on-light orange, border orange on hover. */
html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li {
  position: relative;
  transition: border-color 0.2s ease;
}

html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li:has(a:hover) {
  border-color: var(--td-orange);
}

html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li:has(a:focus-visible) {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 2px;
}

html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li::before {
  background-color: var(--td-orange-onlight);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-5-5 5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-5-5 5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li > a {
  font-weight: 700;
  text-decoration: none;
}

html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li > a:focus-visible {
  outline: none;
}

/* 12. L3 image placement (2026-10-18, MANIFEST §60). Stacked (<=799), a split intro that follows other intro
   content (Fiber, How We Work, Low Voltage: intro H2/paragraph first) shows its photo FIRST in the group, i.e. right
   below that intro paragraph, instead of after the whole group (Low Voltage 400: 1134px below the band -> ~400).
   Split intros that open the page (Hosted, On-Premises, Remote, Leasing) keep text-then-photo.
   §68 (2026-10-18): query widened 799 -> 1000 with the bold stack point (section 16), so 800-1000 orders exactly like <=799. */
@media (max-width: 1000px) {
  html:root body:not(.home) #content .entry-content > .wp-block-group.td-split-intro:not(.td-page-header-light + .td-split-intro) > figure {
    order: -1;
  }

  /* A split intro whose text column opens with a paragraph (Cat5e: intro p, H2, p) shows the photo right below that
     first paragraph: the text group's children join the split's grid (display: contents) and the figure is
     ordered after the first one. Split intros that open with a heading (every other L3) are not matched. */
  html:root body:not(.home) #content .entry-content > .wp-block-group.td-split-intro:has(> .td-split-intro__text > p:first-child) {
    row-gap: 0;
  }

  html:root body:not(.home) #content .entry-content > .wp-block-group.td-split-intro:has(> .td-split-intro__text > p:first-child) > .td-split-intro__text {
    display: contents;
  }

  html:root body:not(.home) #content .entry-content > .wp-block-group.td-split-intro:has(> .td-split-intro__text > p:first-child) > .td-split-intro__text > * {
    order: 2;
  }

  html:root body:not(.home) #content .entry-content > .wp-block-group.td-split-intro:has(> .td-split-intro__text > p:first-child) > .td-split-intro__text > p:first-child {
    order: 0;
    margin-bottom: 24px;
  }

  html:root body:not(.home) #content .entry-content > .wp-block-group.td-split-intro:has(> .td-split-intro__text > p:first-child) > figure {
    order: 1;
  }
}

/* 13. ROUND 5 (2026-10-18, MANIFEST §62): the homepage (page 91, Elementor). Every rule is body.home.
   13a-13b hero, 13c fonts, 13d headings, 13e services cards, 13f tagline band, 13g counters, 13h testimonials,
   13i contact band. Section 17 later rebuilt the hero. */

/* 13a. Home hero overlay tokens. Default = the L2 hero values; 0 for both = the bare photo. Home only. */
html:root {
  --td-home-overlay-left: var(--td-hero-overlay-left);
  --td-home-overlay-right: var(--td-hero-overlay-right);
}

/* 13b. Screen over the hero photo: the L2 scrim (90deg, left value to 35%, fading to the right value at 80%; flat at
   the left value <=767), a layer between the photo and the text (title block + logo/CTA cluster are z-index 1). */
html:root body.home .td-home-hero__desktop::before {
  --td-home-hero-scrim: linear-gradient(90deg, rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-left)) 0%, rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-left)) 35%, rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-right)) 80%);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--td-home-hero-scrim);
  pointer-events: none;
}

/* Hero buttons = the R2 dark-ground buttons: 52px box, Public Sans 700 / 17px, 6px radius; primary orange, outline
   white (the base dark fill behind the Call button stays: it is what keeps it legible at overlay 0); hover fills
   white, focus ring white. */
html:root body.home #content :is(.td-home-hero__ctas .td-btn) {
  padding: 14px 28px;
  border-width: 2px;
  border-style: solid;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

html:root body.home #content :is(.td-home-hero__ctas .td-btn--primary) {
  background: var(--td-orange);
  border-color: var(--td-orange);
  color: var(--td-bold-dark) !important;
}

html:root body.home #content :is(.td-home-hero__ctas .td-btn--primary) {
  text-shadow: none;
}

html:root body.home #content :is(.td-home-hero__ctas .td-btn--ghost) {
  border-color: #fff;
  color: #fff !important;
}

html:root body.home #content :is(.td-home-hero__ctas .td-btn):hover {
  background: #fff;
  border-color: #fff;
  color: var(--td-bold-dark) !important;
  transform: none;
}

html:root body.home #content :is(.td-home-hero__ctas .td-btn):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* 13c. Fonts: the section-5 kit variables on the homepage content too. */
html:root body.home #content {
  --e-global-typography-primary-font-family: "Archivo";
  --e-global-typography-secondary-font-family: "Archivo";
  --e-global-typography-text-font-family: "Public Sans";
  --e-global-typography-accent-font-family: "Public Sans";
  --font-heading: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", Arial, sans-serif;
  font-family: var(--font-body);
}

/* Body copy at the R2 size: 16px, 15px <=1250. */
html:root body.home #content :is(.elementor-icon-box-description, .td-hp-nationwide p, .td-hp-contact .elementor-widget-text-editor p) {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1250px) {
  html:root body.home #content :is(.elementor-icon-box-description, .td-hp-nationwide p, .td-hp-contact .elementor-widget-text-editor p) {
    font-size: 15px;
  }
}

/* 13d. Section headings ("How Can We Help You?", "Are You Experienced? We Are.", "Testimonials", "Contact Us"):
   the R2 section H2, Archivo 800 clamp(30px, 3.2vw, 42px) / 1.15. Centred, as on BPS. */
html:root body.home #content .elementor-91 .elementor-widget-heading :is(.elementor-heading-title.elementor-size-xl, h2.elementor-heading-title) {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

/* Section rhythm closer to the other bold pages (was 32 / 24 / 40). */
html:root body.home #content .elementor-91 .elementor-element.td-hp-services,
html:root body.home #content .elementor-91 .elementor-element.td-hp-testimonials {
  padding-top: 64px;
  padding-bottom: 64px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-services .elementor-widget-heading,
html:root body.home #content .elementor-91 .elementor-element.td-hp-testimonials .elementor-widget-heading {
  margin-bottom: 28px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-counters-head .elementor-widget-wrap {
  padding-top: 64px;
}

@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-services,
  html:root body.home #content .elementor-91 .elementor-element.td-hp-testimonials {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters-head .elementor-widget-wrap {
    padding-top: 44px;
  }
}

/* 13e. Services: the white panel goes (the grey section is the ground, as BPS 11b) and each icon box is the 11a bold
   card: white, 1px #d9dde3, 6px, 26px padding, equal height per row, whole card clickable, bare 32px orange icon;
   icon above the title <=1024. */
html:root body.home #content .elementor-91 .elementor-element.td-hp-services .elementor-element-19ba3163 > .elementor-widget-wrap {
  background: transparent;
}

html:root body.home #content .td-hp-services .elementor-inner-section .elementor-widget-wrap {
  padding: 10px;
}

html:root body.home #content .td-hp-services .elementor-widget-icon-box {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

html:root body.home #content .td-hp-services .elementor-widget-icon-box > .elementor-widget-container {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 26px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

html:root body.home #content .td-hp-services .elementor-widget-icon-box > .elementor-widget-container:has(a:hover) {
  border-color: var(--td-orange);
}

html:root body.home #content .td-hp-services .elementor-widget-icon-box > .elementor-widget-container:has(a:focus-visible) {
  outline: 3px solid var(--td-bold-dark);
  outline-offset: 3px;
}

html:root body.home #content .td-hp-services .elementor-icon-box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

html:root body.home #content .td-hp-services .elementor-icon-box-title a:focus-visible,
html:root body.home #content .td-hp-services .elementor-icon:focus-visible {
  outline: none;
}

html:root body.home #content .td-hp-services .elementor-icon-box-title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}

html:root body.home #content .td-hp-services .elementor-icon-box-title a {
  color: var(--e-global-color-charcoal, #3a3a3a);
}

html:root body.home #content .td-hp-services .elementor-icon-box-description {
  margin: 0;
  color: var(--td-text);
}

html:root body.home #content .td-hp-services .elementor-icon {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--td-orange);
  fill: var(--td-orange);
  font-size: 32px;
}

html:root body.home #content .td-hp-services .elementor-icon i {
  width: 1em;
  height: 1em;
}

html:root body.home #content .td-hp-services .elementor-icon-box-icon {
  margin-right: 18px;
  line-height: 1;
}

html:root body.home #content .td-hp-nationwide {
  margin-top: 24px;
}

html:root body.home #content .td-hp-nationwide a {
  color: var(--td-orange-onlight);
  font-weight: 700;
}

@media (max-width: 1024px) {
  html:root body.home #content .td-hp-services .elementor-icon-box-wrapper {
    display: block;
    text-align: left;
  }

  html:root body.home #content .td-hp-services .elementor-icon-box-icon {
    display: block;
    margin: 0 0 14px;
  }
}

/* 13f. Tagline band: the dark token, full width (stretched section), upright Public Sans like the bold pull quote
   (no italics in the bold system; was italic Times New Roman). Same words. */
html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline {
  background-color: var(--td-bold-dark);
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline .elementor-widget-wrap {
  padding: 52px 20px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline .elementor-widget-text-editor,
html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline .elementor-widget-text-editor p {
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(19px, 1.8vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline .elementor-widget-wrap {
    padding: 40px 20px;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline .elementor-widget-text-editor,
  html:root body.home #content .elementor-91 .elementor-element.td-hp-tagline .elementor-widget-text-editor p {
    font-size: 18px;
  }
}

/* 13g. Experience counters = bold stat cards on the grey ground: white, 1px #d9dde3, 6px; number Archivo 800 in
   #d17a00 (R5b, cowork: 3.23:1 on white, passes for large text - 40px / 32px 800; the brand #ed9700 is 2.33:1,
   below 3:1 even for large text; was --td-orange-onlight in R5); label = eyebrow treatment
   (Public Sans 700 uppercase, tracked). Grid kept (3 + 4 desktop, 4 + 3 tablet); phones 2 columns, last card full. */
html:root body.home #content .elementor-91 .elementor-element.td-hp-counters {
  padding-bottom: 64px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-counters > .elementor-container {
  column-gap: 20px;
  row-gap: 20px;
  padding: 0 10px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element.elementor-widget-counter {
  box-sizing: border-box;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element .elementor-counter-number-wrapper {
  color: #d17a00;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element .elementor-counter-title {
  margin-top: 10px;
  color: var(--td-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters > .elementor-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element.elementor-widget-counter {
    padding: 20px 10px;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element.elementor-element-68cf7814 {
    grid-column: span 2;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element .elementor-counter-number-wrapper {
    font-size: 32px;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters .elementor-element .elementor-counter-title {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

/* 13h. Testimonials: the Reviews 11f card (border #d9dde3, no shadow, upright 17px excerpt, name 700). */
html:root body.home #content .td-review-card {
  border-color: #d9dde3;
  box-shadow: none;
}

html:root body.home #content .td-review-card__excerpt {
  font-style: normal;
  font-size: 17px;
  line-height: 1.6;
}

html:root body.home #content .td-review-card__name {
  font-weight: 700;
}

html:root body.home #content .td-hp-testimonials__cta {
  margin-top: 28px;
}

html:root body.home #content .td-hp-testimonials__cta a {
  font-size: 16px;
  font-weight: 700;
}

/* Phones: the review cards sat 62px in from the edge (two nested column paddings + a 12px margin); align them with
   the service cards (20px). */
@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-testimonials > .elementor-container > .elementor-column > .elementor-widget-wrap,
  html:root body.home #content .elementor-91 .elementor-element.td-hp-testimonials .elementor-inner-section .elementor-column > .elementor-widget-wrap.elementor-element-populated {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 13i. Contact band (the closing dark band): R2 band padding 76 / 56, title = the band H2 (13d) in white,
   "Questions?" Archivo 700, subline + details Public Sans. Layout (text | map | details) kept. */
html:root body.home #content .elementor-91 .elementor-element.td-hp-contact {
  padding-top: 76px;
  padding-bottom: 76px;
  background-color: var(--td-bold-dark);
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-contact .elementor-widget-heading.elementor-element-dda0030 {
  margin-bottom: 32px;
}

html:root body.home #content .td-hp-contact .elementor-element-b890777 .elementor-heading-title {
  font-family: var(--font-heading);
  font-weight: 700;
}

html:root body.home #content .td-hp-contact .elementor-element-118b96a .elementor-heading-title {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
}

@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-contact {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* 13j. Sweep fix (R5 part B): the R2 9a body-size rule (:where(), specificity html:root = 0,1,1) out-ranks the
   one-class card rules, so on Legacy Support (7860, the only page with these cards) kicker / sub / text / foot all
   rendered 16px (base 10.8 / 12.3 / 14.25 / 12.3). Base sizes back; kicker in on-light orange (bright orange
   is 2.3:1 on white). */
html:root body.page-id-7860 #content .td-card .td-card__kicker {
  font-size: 0.72rem;
  color: var(--td-orange-onlight);
}

html:root body.page-id-7860 #content .td-card :is(.td-card__sub, .td-card__foot) {
  font-size: 0.82rem;
}

html:root body.page-id-7860 #content .td-card .td-card__text {
  font-size: 0.95rem;
}

/* 13k. On-white menu (R5b item 7, MANIFEST §63): interior pages' light menu strip (and Home's since §72 / 17b), top-level items only. Text = the
   charcoal text token (12.1:1 on the strip's rgb(240,241,243)) instead of the on-light orange; hover / keyboard
   focus / current page / current ancestor show a 3px #ed9700 bar under the item; :focus-visible adds a 2px charcoal
   ring. The Home hero menu (on dark), the dropdown submenus and the Quote button are not touched. Desktop (>=1251,
   80px items) = an absolute bar 20px above the item's bottom edge; the hamburger panel (<=1250) = a 3px underline. */
html:root body .main-header-menu > .menu-item > a,
html:root body .main-header-menu > .menu-item:is(:hover, .focus) > a,
html:root body .main-header-menu > .menu-item:is(.current-menu-item, .current-menu-ancestor) > a,
html:root body .main-header-menu > .menu-item > a:focus-visible {
  color: var(--td-text);
}

html:root body .main-header-menu > .menu-item > a:focus-visible {
  outline: 2px solid var(--td-text);
  outline-offset: -2px;
}

@media (min-width: 1251px) {
  html:root body .main-header-menu > .menu-item > a {
    position: relative;
  }

  html:root body .main-header-menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 20px;
    height: 3px;
    background: #ed9700;
    opacity: 0;
    pointer-events: none;
  }

  html:root body .main-header-menu > .menu-item:is(:hover, .focus, .current-menu-item, .current-menu-ancestor) > a::after,
  html:root body .main-header-menu > .menu-item > a:focus-visible::after {
    opacity: 1;
  }
}

@media (max-width: 1250px) {
  html:root body .main-header-menu > .menu-item:is(:hover, .focus, .current-menu-item, .current-menu-ancestor) > a,
  html:root body .main-header-menu > .menu-item > a:focus-visible {
    text-decoration: underline 3px #ed9700;
    text-underline-offset: 6px;
  }
}

/* 13l. Body links on white / light tint (R5b item 7): charcoal text + a 2px #ed9700 underline instead of the
   on-light orange. Hover = the underline turns charcoal and thickens to 3px; :focus-visible = 2px charcoal ring.
   Covers every on-light-orange text link the R5 inventory found: Gutenberg body links, icon-box description links,
   Elementor text links (interior; home Nationwide line), review "Read on Google" links (Reviews + home), the home
   "See our Google reviews" line and the Thank-you row links. Buttons, cards, icons and dark-band links unchanged. */
html:root #content .entry-content a:not(.td-btn):not(.wp-block-button__link):not(.elementor-button):not(.wpforms-submit):not(.td-icon-box),
html:root #content .elementor-widget-icon-box .elementor-icon-box-description a,
html:root body:not(.home) #content .elementor-widget-text-editor a,
html:root body.home #content .td-hp-nationwide a,
html:root body.home #content .td-hp-testimonials__cta a,
html:root #content .td-review-cards a.td-review-card__link,
html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li > a {
  color: var(--td-text);
  text-decoration-line: underline;
  text-decoration-color: #ed9700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

html:root #content .entry-content a:not(.td-btn):not(.wp-block-button__link):not(.elementor-button):not(.wpforms-submit):not(.td-icon-box):hover,
html:root #content .elementor-widget-icon-box .elementor-icon-box-description a:hover,
html:root body:not(.home) #content .elementor-widget-text-editor a:hover,
html:root body.home #content .td-hp-nationwide a:hover,
html:root body.home #content .td-hp-testimonials__cta a:hover,
html:root #content .td-review-cards a.td-review-card__link:hover,
html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li > a:hover {
  color: var(--td-text);
  text-decoration-color: var(--td-text);
  text-decoration-thickness: 3px;
}

html:root #content .entry-content a:not(.td-btn):not(.wp-block-button__link):not(.elementor-button):not(.wpforms-submit):not(.td-icon-box):focus-visible,
html:root #content .elementor-widget-icon-box .elementor-icon-box-description a:focus-visible,
html:root body:not(.home) #content .elementor-widget-text-editor a:focus-visible,
html:root body.home #content .td-hp-nationwide a:focus-visible,
html:root body.home #content .td-hp-testimonials__cta a:focus-visible,
html:root #content .td-review-cards a.td-review-card__link:focus-visible,
html:root body:not(.home).page-id-8151 #content .entry-content ul.wp-block-list:not(.td-feature-grid):not(li ul) > li > a:focus-visible {
  color: var(--td-text);
  outline: 2px solid var(--td-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Card link line ("Data cabling ->" on Nationwide / 8232 cards and the other .td-icon-box grids): same treatment.
   !important only because the base .td-icon-box__more rule sets text-decoration: none !important. */
html:root #content a.td-icon-box .td-icon-box__more {
  color: var(--td-text);
  text-decoration: underline 2px #ed9700 !important;
  text-underline-offset: 3px;
}

html:root #content a.td-icon-box:hover .td-icon-box__more {
  color: var(--td-text);
  text-decoration: underline 3px var(--td-text) !important;
}

/* 13m. Footer type (R5b item 1, MANIFEST §63 part 2): every page incl. Home. Column titles (Astra widget-title H2,
   Space Grotesk 600) = Archivo 700 (the bold H3/H4 weight; 700 is the lightest Archivo loaded); text, links,
   copyright and tagline (Inter) = Public Sans 400. Sizes, colours and the dark-band link colours unchanged. */
html:root .site-footer,
html:root .site-footer :is(p, a, li, span, div, address) {
  font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
}

html:root .site-footer :is(h1, h2, h3, h4, h5, h6, .widget-title) {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}

/* 13n. Home hero (R5b item 4): no per-element glows (radial ::before) and no text shadows - the 13b screen does that
   job. The ghost button's own dark fill stays (it is the button's fill, not a glow). */
html:root body.home #content :is(.td-home-hero__title-block p, .td-home-hero__logo-wrap, .td-home-hero__ctas)::before {
  content: none;
}

html:root body.home #content :is(.td-home-hero__title-block p, .td-home-hero__ctas .td-btn) {
  text-shadow: none;
}

/* Subhead solid white (base 0.92 alpha). */
html:root body.home #content .td-home-hero__title-block p {
  color: #fff;
}

/* 13o. Home hero alignment (R5b item 5): desktop (>=1251) title block and logo / button cluster sit on the Home
   card grid's edges = the Elementor boxed container (1200px, centred) + its 20px column padding. At 1440: 140 /
   1300; at 1280: 60 / 1220. Vertical positions unchanged. */
@media (min-width: 1251px) {
  html:root body.home #content .td-home-hero__title-block {
    left: calc(max((100% - 1200px) / 2, 0px) + 20px);
  }

  html:root body.home #content .td-home-hero__cluster {
    right: calc(max((100% - 1200px) / 2, 0px) + 20px);
  }
}

/* 13p. Home counters on phones (R5b item 3): 7 counters, so neither one row nor 2 x 2 fits; 2 + 2 + 3 on a 6-column
   grid (order kept: 26 / 20,903 | 7,965 / 1,818 | 64 / 4 / 901), no full-width orphan. Replaces 13g's 2-column grid
   and full-width last card. The short numbers share the 3-up row; its labels wrap. */
@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters > .elementor-container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters :is(.elementor-element-2ad83d53, .elementor-element-39f60ae1, .elementor-element-2020ad81, .elementor-element-5bca5618) {
    grid-column: span 3;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters :is(.elementor-element-71c0c33e, .elementor-element-7048b5f4, .elementor-element.elementor-element-68cf7814) {
    grid-column: span 2;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Narrow phones: "TECHNICIANS" (95px at 12px / 0.08em) is wider than the 3-up card at 360 (85px): 11px / 0.04em. */
@media (max-width: 380px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters :is(.elementor-element-71c0c33e, .elementor-element-7048b5f4, .elementor-element-68cf7814) .elementor-counter-title {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 340px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters :is(.elementor-element-71c0c33e, .elementor-element-7048b5f4, .elementor-element.elementor-element-68cf7814) {
    padding-left: 3px;
    padding-right: 3px;
  }

  html:root body.home #content .elementor-91 .elementor-element.td-hp-counters :is(.elementor-element-71c0c33e, .elementor-element-7048b5f4, .elementor-element-68cf7814) .elementor-counter-title {
    font-size: 10px;
  }
}

/* 14. BANDS V2 (2026-10-18, MANIFEST §64). 14a Home subline, 14b swoop
   under the solid title bands, 14c the band summary line (td_page_summary, printed by tandem-polish.php). */

/* 14a. Home hero (>=1251, the title block): the second line starts on the left edge instead of ending on the
   right edge (base rule: width fit-content + margin-left auto). */
@media (min-width: 1251px) {
  html:root body.home #content .td-home-hero__title-block p {
    margin-left: 0;
  }
}

/* 14b. Solid title bands (10a: 8 L3 + 9 misc incl. Service Areas; 10b: the 22 plain-title pages) get the generic
   swoop (band-admin-generic, attachment 8006 = the Collateral "Generic swoop" PNG as webp) under the L2 hero scrim
   shape (90deg, left value to 35%, right value at 80%) on the --td-bold-dark base. Own tokens, so the L2 heroes are
   not affected: --td-band-overlay-left = the hero left value (0.85); --td-band-overlay-right = 0.7, not the hero's
   0.55 (the swoop is near-white, unlike the photos: at 0.55 the .88 summary measured 3.4:1 at 768). Flat at the
   left value <=1100 (the L2 hero: <=767): there the eyebrow / titles / summary run past 35% of the width. The image is a ::before on the band (100vw, centred, z -1 inside the band's own stacking
   context), clipped to the band's height by its existing side-only clip-path; the band keeps its dark background +
   100vmax box-shadow underneath, so any fractional edge falls on the same dark. Cover, one position (50% 55%, the
   old admin-band crop) everywhere; 1100 / 700 file tiers as the L2 heroes. L2 photo heroes not touched. */
html:root body:not(.home) #content .td-page-header-light,
html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
  --td-band-overlay-left: var(--td-hero-overlay-left);
  --td-band-overlay-right: 0.7;
  --td-bold-band-scrim: linear-gradient(90deg, rgba(var(--td-bold-dark-rgb), var(--td-band-overlay-left)) 0%, rgba(var(--td-bold-dark-rgb), var(--td-band-overlay-left)) 35%, rgba(var(--td-bold-dark-rgb), var(--td-band-overlay-right)) 80%);
  --td-bold-band-swoop: url('/wp-content/uploads/2026/09/band-admin-generic.webp');
  position: relative;
  isolation: isolate;
}

html:root body:not(.home) #content .td-page-header-light::before,
html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background-color: var(--td-bold-dark);
  background-image: var(--td-bold-band-scrim), var(--td-bold-band-swoop);
  background-size: auto, cover;
  background-position: 0 0, 50% 55%;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (max-width: 1100px) {
  html:root body:not(.home) #content .td-page-header-light,
  html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
    --td-bold-band-swoop: url('/wp-content/uploads/2026/09/band-admin-generic-1100.webp');
    --td-bold-band-scrim: linear-gradient(rgba(var(--td-bold-dark-rgb), var(--td-band-overlay-left)), rgba(var(--td-bold-dark-rgb), var(--td-band-overlay-left)));
  }
}

@media (max-width: 700px) {
  html:root body:not(.home) #content .td-page-header-light,
  html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
    --td-bold-band-swoop: url('/wp-content/uploads/2026/09/band-admin-generic-700.webp');
  }
}

/* 14c. Band summary (<p class="td-band-summary">, only in the HTML when the page's td_page_summary is filled).
   Styled as the bold Nationwide hero intro paragraph (Public Sans 400, 1.15rem / 1.06rem <=600,
   line-height 1.6, white .88, max 820px) under the H1. Bands are content-driven (min-heights from 10a / 10b kept);
   with a summary the band gets 4px more padding top and bottom (L3 at 1440 with 2 lines = ~222px), and the plain-title band stacks its children. */

html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner > p.td-band-summary,
html:root body.page:not(.home) #content .entry-header > p.td-band-summary {
  display: block;
  max-width: 820px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
}

html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner:has(> .td-band-summary) {
  padding-top: 28px;
  padding-bottom: 28px;
}

html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title):has(> .td-band-summary) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 28px;
  padding-bottom: 28px;
}

@media (max-width: 700px) {
  html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner:has(> .td-band-summary),
  html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title):has(> .td-band-summary) {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (max-width: 600px) {
  html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner > p.td-band-summary,
  html:root body.page:not(.home) #content .entry-header > p.td-band-summary {
    margin-top: 10px;
    font-size: 1.06rem;
  }
}

/* 15. CONTENT EDGE (2026-10-18, MANIFEST §66). One content container on every bold page = the Nationwide
   one: Astra's content box (1200px max, 20px side padding) inset by --td-edge-inset (40px; 20px <=600). Viewport
   to text edge = max(--td-edge-min, (100% - --td-edge-max) / 2): 1440 160, 1280 80, 1024 / 768 60, 400 / 360 40.
   The page wrapper carries the inset (.entry-content on Gutenberg pages, the .elementor root on Elementor pages), so
   body, split intros, lists, cards, forms and CTA band text all start on it; the pieces that used to carry their own
   40 / 20px (hero, title bands, Nationwide td-bands, stat strip) drop it. Their full-bleed backgrounds (box-shadow,
   centred 100vw ::before) are unchanged. Header, logo strip and the Round 2 measures are not touched. */
html:root {
  --td-edge-inset: 40px;
  --td-edge-max: 1120px;
  --td-edge-min: 60px;
  --td-edge: max(var(--td-edge-min), (100% - var(--td-edge-max)) / 2);
}

@media (max-width: 600px) {
  html:root {
    --td-edge-inset: 20px;
    --td-edge-min: 40px;
  }
}

/* 15a. The container. */
html:root body:not(.home) #content .entry-content,
html:root body:not(.home) #content .ast-container > .elementor {
  padding-left: var(--td-edge-inset);
  padding-right: var(--td-edge-inset);
}

/* Elementor columns (default gap) pad their widgets 10px: pull the row out by that, so the outer widgets' edges
   (cards, city tiles, the BPS CTA band) sit on the container edge. */
html:root body:not(.home) #content .ast-container > .elementor .elementor-top-section > .elementor-container.elementor-column-gap-default {
  margin-left: -10px;
  margin-right: -10px;
}

/* 15b. Pieces that carried their own side inset now sit on the container: no side padding. */
html:root body:not(.home) #content :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child .td-page-header-photo__inner,
html:root body:not(.home) #content :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout,
html:root body:not(.home) #content :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip,
html:root body:not(.home) #content .td-page-header-light .td-page-header-light__inner,
html:root body:not(.home) #content .entry-content .wp-block-group.td-band {
  padding-left: 0;
  padding-right: 0;
}

/* Intro measure stays 820px (was 40px pad + max(40px, 100% - 860px)). */
html:root body:not(.home) #content :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + p.td-mission-callout {
  padding-right: max(0px, 100% - 820px);
}

/* Stat strip hairline: full container width (was inset 40 / 20px with the padding). */
html:root body:not(.home) #content :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip {
  background-size: 100% 1px;
  background-position: 0 20px;
}

@media (max-width: 600px) {
  html:root body:not(.home) #content :is(.entry-content, .elementor-widget-container) > .td-page-header-photo:first-child + .td-mission-callout + .td-stat-strip {
    background-position: 0 16px;
  }
}

/* Plain-title band (10b) sits outside .entry-content: it keeps a side padding, now the token (was 40, 20 <=700). */
html:root body.page:not(.home) #content #primary:not(:has(.td-page-header-light, .td-page-header-photo)) .entry-header:has(> .entry-title) {
  padding-left: var(--td-edge-inset);
  padding-right: var(--td-edge-inset);
}

/* 15c. Footer columns (and the copyright row) on the same container. The row was Astra's 1200px box (full width
   with a 20px pad on phones); now full width, padded to the edge (its parent is viewport-wide). */
html:root .site-footer .ast-builder-grid-row-container .ast-builder-grid-row {
  max-width: none;
  padding-left: var(--td-edge);
  padding-right: var(--td-edge);
}

/* 15d. Home (page 91, Elementor) on the same container: hero title block + logo / button cluster (>=1251) and the outer edges of the service cards, counter cards, review cards and contact
   band columns. Was 13o's 1200 + 20px (140 / 60 at 1440 / 1280). Offsets measured inside each section: service
   card = container + 20px (two 10px column pads), contact = + 10px, counters = the 13g grid's own padding,
   reviews = + 50px (>=768; 13h zeroes it on phones). The stretched sections (viewport-wide) take --td-edge; the
   boxed Testimonials section sits in Astra's content box, so it takes the inset. Centred headings, the tagline
   band's 1000px measure and the hero nav strip are not moved. */
@media (min-width: 1251px) {
  html:root body.home #content .td-home-hero__title-block {
    left: var(--td-edge);
  }

  html:root body.home #content .td-home-hero__cluster {
    right: var(--td-edge);
  }
}

html:root body.home #content .elementor-91 > .elementor-element:is(.td-hp-services, .td-hp-counters, .td-hp-contact) {
  padding-left: 0;
  padding-right: 0;
}

html:root body.home #content .elementor-91 > .elementor-element:is(.td-hp-services, .td-hp-counters, .td-hp-contact) > .elementor-container {
  max-width: none;
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-services > .elementor-container {
  padding-left: calc(var(--td-edge) - 20px);
  padding-right: calc(var(--td-edge) - 20px);
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-counters > .elementor-container {
  padding-left: var(--td-edge);
  padding-right: var(--td-edge);
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-contact > .elementor-container {
  padding-left: calc(var(--td-edge) - 10px);
  padding-right: calc(var(--td-edge) - 10px);
}

/* Centred lines: the "Multiple locations?" link line (in the services column, outside the card rows: + 10px), the
   counters heading (+ 10px) and the tagline band (+ 20px; its 1000px measure is kept, the band only gains side room
   where the viewport is narrower). */
html:root body.home #content .td-hp-services .elementor-element.td-hp-nationwide {
  margin-left: 10px;
  margin-right: 10px;
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-counters-head {
  padding-left: calc(var(--td-edge) - 10px);
  padding-right: calc(var(--td-edge) - 10px);
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-counters-head > .elementor-container {
  max-width: none;
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-tagline {
  padding-left: calc(var(--td-edge) - 20px);
  padding-right: calc(var(--td-edge) - 20px);
}

html:root body.home #content .elementor-91 > .elementor-element.td-hp-testimonials > .elementor-container {
  max-width: none;
  margin-left: calc(var(--td-edge-inset) - 50px);
  margin-right: calc(var(--td-edge-inset) - 50px);
}

@media (max-width: 767px) {
  html:root body.home #content .elementor-91 > .elementor-element.td-hp-testimonials > .elementor-container {
    margin-left: var(--td-edge-inset);
    margin-right: var(--td-edge-inset);
  }
}

/* 16. BOLD FIXES (2026-10-18, MANIFEST §68).
   16a Service Areas (7866) intro paragraph as a lead: Archivo 700, 24px at 1440 -> 19px at 400 (linear), 1.35, charcoal,
   centred, 820px max. Markup and text unchanged; the link keeps the 13l charcoal + orange underline (it inherits the size). */
html:root body:not(.home).page-id-7866 #content .elementor-element-8de6c8a .elementor-widget-container > p:first-of-type {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 17.077px + 0.4808vw, 24px);
  line-height: 1.35;
  color: var(--td-charcoal);
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

/* 16b Split intros stack at <=1000 (was <=799): one column, 24px gap, photo at full column width -
   the base <=799 rules repeated for 800-1000. Order (text then photo, or §60's photo-first variants) = section 12,
   whose query now runs to 1000. */
@media (min-width: 800px) and (max-width: 1000px) {
  html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro > figure {
    max-width: none;
  }
}

/* 16c 1001-1100 (2-col, text column 525 at 1001 / 548 at 1024 was 468): photo column 380 -> 300. */
@media (min-width: 1001px) and (max-width: 1100px) {
  html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro:has(> figure) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }

  html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro > figure {
    max-width: 300px;
  }
}

/* 16d Word-break safety net = Astra's `.entry-content { word-wrap: break-word }` (inherited). In split intros it now
   applies at <=400 only (as `anywhere`, so a word wider than the column - "Telecommunications" ~316px at 30px, column
   280 at 360 - wraps instead of running past the edge); above 400 words are never chopped. */
html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro {
  overflow-wrap: normal;
}

@media (max-width: 400px) {
  html:root body:not(.home) #content .entry-content .wp-block-group.td-split-intro {
    overflow-wrap: anywhere;
  }
}

/* 17. BOLD HOME HERO (2026-10-19, MANIFEST §72), Chuck's "Bold home page mockup.1.png" (1:1 at a 1633px
   viewport: header band 108, hero 630, logo 420 wide / right edge 163 in / bottom 82 up). Page 91 widget dccfbf6
   (§72 scripts in backups/home-hero-2026-10-19/; the old layout's pieces removed 2026-10-27, MANIFEST §104):
   h1.td-home-hero__headline, p.td-home-hero__lead, img.td-home-hero__logo-bold. 17b header (light band above the
   hero, menu centred, no logo), 17c one hero at every width, 17d type, 17e logo, 17f screen, 17g services gap. */

/* 17b. Header: Home gets the interior light band (13k menu colours now cover Home too) instead of the transparent
   overlay header (>=1251 was hidden in favour of the hero's dark nav strip, which goes). No logo in the band: the hero
   carries it. Menu centred (Chris, 9-29). Band height (2026-10-26, MANIFEST §100, client: shorter Home hero): desktop
   (>=1251) 64px + 1px rule, the menu items 64px tall with the 13k bar 12px off their bottom (the old 106 band held an
   80px item, bar 20px up: same ~8px under the text); <=1250 the bar is 60px (was Astra's 80) and the toggle a >= 44px
   tap target (12px padding on the ~20.5px icon; was 40.5). Home only: interior pages keep the 106 / 80 bands. */
html:root body.home .site-header {
  display: block;
}

html:root body.home.ast-theme-transparent-header #masthead {
  position: relative;
}

html:root body.home .site-header,
html:root body.home .main-header-bar {
  border-bottom: 1px solid #eceeef;
}

html:root body.home #masthead .main-header-bar {
  background: rgb(240, 241, 243);
}

html:root body.home #masthead .site-header-primary-section-left {
  display: none;
}

html:root body.home #ast-desktop-header .ast-builder-grid-row {
  grid-template-columns: 1fr;
  min-height: 64px;
}

html:root body.home #ast-desktop-header .site-primary-header-wrap {
  min-height: 64px;
}

html:root body.home #ast-desktop-header :is(.main-header-menu > .menu-item, .main-header-menu > .menu-item > .menu-link) {
  line-height: 64px;
}

@media (min-width: 1251px) {
  html:root body.home #ast-desktop-header .main-header-menu > .menu-item > a::after {
    bottom: 12px;
  }
}

html:root body.home #ast-mobile-header .main-header-bar {
  min-height: 60px;
}

html:root body.home #ast-mobile-header .menu-toggle {
  padding: 12px;
}

html:root body.home #ast-desktop-header .site-header-primary-section-right {
  justify-content: center;
}

html:root body.home #ast-mobile-header .ast-builder-grid-row {
  grid-template-columns: 1fr;
}

html:root body.home #ast-mobile-header .site-header-primary-section-right {
  justify-content: flex-end;
}

html:root body.home #masthead .ast-mobile-menu-trigger-minimal svg,
html:root body.home #masthead .menu-toggle svg {
  fill: var(--td-orange);
}

/* Astra's transparent-header colours (white / orange links, white dropdowns with orange links, page-setting driven)
   back to the interior values measured on About: charcoal top level (500 desktop, 400 in the hamburger panel; the
   13k bar / underline marks hover and the current page), dropdown links #9e5c00 on white (desktop) / #f9f9f9 (panel),
   charcoal submenu arrows. #masthead outranks Astra's 4-class transparent selectors. */
html:root body.home #masthead .main-header-menu > .menu-item > .menu-link,
html:root body.home #masthead .main-header-menu > .menu-item > .ast-menu-toggle {
  color: var(--td-text);
  background: transparent;
}

html:root body.home #masthead .main-header-menu .sub-menu .menu-link {
  color: var(--td-orange-onlight);
  background: transparent;
}

@media (min-width: 1251px) {
  html:root body.home #masthead .main-header-menu > .menu-item > .menu-link {
    font-weight: 500;
  }
}

@media (max-width: 1250px) {
  html:root body.home #masthead .main-header-menu > .menu-item > .menu-link {
    font-weight: 400;
  }

  html:root body.home #masthead .main-header-menu .sub-menu {
    background: rgb(249, 249, 249);
    border-color: var(--td-text);
  }
}

/* 17c. Hero box: the desktop block at every width, a flex column on the
   content edge. Height from content at every width (2026-10-26, MANIFEST §100: the 630px floor >=857 from §73 part 3
   is gone, client asked for a shorter hero). Padding >=1001: 40 top; bottom max(40px, 3.882vw - 4px) = the logo's
   overhang below the button row (logo 7.764vw tall, centred on a ~52-56px row) + 24px, so the logo's bottom edge stays
   24px off the hero's (>= ~1134; more below that). <=1000: 36 / 36 (logo on the row at 857-1000 overhangs ~13px).
   Photo = cover at 50% 26% (the base rule's 102.5%-width size and pixel-pinned position were tuned to the 413px band and
   left the photo short of the box on phones). */

html:root body.home #content .td-home-hero__desktop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  padding: 40px var(--td-edge) max(40px, calc(3.882vw - 4px));
  background-size: cover;
  background-position: 50% 26%;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__title-block {
  position: relative;
  z-index: 1;
  top: auto;
  left: auto;
  max-width: none;
  white-space: normal;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__cluster {
  display: contents;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas {
  z-index: 1;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 56px;
}

@media (max-width: 1000px) {
  html:root body.home #content .td-home-hero__desktop {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas {
    margin-top: 36px;
  }
}

/* 17d. Type. No eyebrow (2026-10-26, MANIFEST §100). The headline is the page's H1 (h1.td-home-hero__headline;
   a <p role="heading"> until 2026-10-27). Headline = the bold L2 hero H1 scale (Archivo 800,
   clamp(34px, 4.6vw, 60px) / 1.05), 14em measure. Lead = Public Sans 500, 18px (16 <=767) / 1.7, 740px measure.
   Buttons (§100: slightly smaller than the mockup's 62px pair) = 14px / 34px padding, clamp(16px, 1.39vw, 20px):
   56px tall at >=1440, ~51 at the 16px floor. */

html:root body.home #content .td-home-hero__desktop .td-home-hero__title-block .td-home-hero__headline {
  display: block;
  width: auto;
  max-width: 14em;
  margin: 0;
  font-family: var(--font-heading);
  /* 2026-10-25 (MANIFEST §90): §79's reduction to clamp(34px, 3.68vw, 48px) undone; back to the original size. */
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__title-block .td-home-hero__lead {
  display: block;
  width: auto;
  max-width: 740px;
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  color: #fff;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas .td-btn {
  padding: 14px 34px;
  font-size: clamp(16px, 1.39vw, 20px);
}

@media (max-width: 767px) {
  html:root body.home #content .td-home-hero__desktop .td-home-hero__title-block .td-home-hero__lead {
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (max-width: 544px) {
  html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas .td-btn {
    padding: 12px 20px;
  }
}

/* 17e. Logo (revised 2026-10-19, MANIFEST §73 part 2): the white 671px logo.
   Size: 25.7vw >=1001 (the hero is viewport-wide, so = 25.7% of the hero; vw, not %, keeps the 1000/1001 step at 0px
   even with a non-overlay scrollbar) and frozen at the 1001px size, 257.26px, from 1000 down to phones (no 50%/70% rule).
   Position, row mode (hero >= 857px wide = >= 24px between the Call button and the logo): absolute, right edge 10% in,
   vertical centre on the button row's centre (CSS anchor on .td-home-hero__ctas; replaces "bottom 80px", which let the
   logo drift as the hero shortened). Stacked (hero < 857px, a container query so it tracks the real hero width): in
   flow after the buttons, 30px above and 24px below (30 before §100), right edge still 10% in at 601-856 (the switch is a pure vertical
   move, same size), centred <=600 (section 18). No anchor support: the old bottom-80px placement >=1001, stacked <=1000. */
html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap .td-home-hero__logo-bold {
  display: block;
  width: 100%;
  height: auto;
}

html:root body.home #content .td-home-hero__desktop {
  container: td-home-hero / inline-size;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas {
  anchor-name: --td-home-ctas;
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap {
  position: absolute;
  z-index: 1;
  top: anchor(--td-home-ctas center);
  right: 10%;
  bottom: auto;
  width: 25.7vw;
  translate: 0 -50%;
}

@media (max-width: 1000px) {
  html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap {
    width: 257.26px;
  }
}

/* No anchor support (Firefox < 147-ish, Safari < 26): >=1001 the logo's bottom is set so it centres on the button row
   as near as possible without the anchor (§100: was a fixed 80px, which floated it above the row once the hero
   shortened): bottom = 17c's bottom padding + half the ~52-56px row - half the 7.764vw logo = max(22px, 66px - 3.882vw). */
@supports not (anchor-name: --a) {
  html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap {
    top: auto;
    bottom: max(22px, calc(66px - 3.882vw));
    translate: none;
  }

  @media (max-width: 1000px) {
    html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap {
      position: relative;
      bottom: auto;
      right: auto;
      order: 2;
      align-self: flex-end;
      margin-top: 30px;
      margin-right: calc(10% - 0.8 * var(--td-edge-min));
      margin-bottom: -12px;
    }
  }
}

/* Stacked: the query's width is the hero's CONTENT box (hero - 2 x 60px edge), so 737 = an 857px hero. margin-right
   (% = of that content box C) = 10% of the hero (C + 120) minus the 60px edge = 10% - 0.8 x 60px, i.e. the right edge
   10% of the hero in (the edge is --td-edge-min at every stacked width above 600); margin-bottom -12px turns the hero's 36px bottom padding into 24px below the logo (§100; was -14 on 44 = 30). */
@container td-home-hero (width < 737px) {
  html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    translate: none;
    order: 2;
    align-self: flex-end;
    margin-top: 30px;
    margin-right: calc(10% - 0.8 * var(--td-edge-min));
    margin-bottom: -12px;
  }
}

/* 17f. Screen (13b's layer, now at every width since the desktop block is the bold hero everywhere): Home's own
   values. The 13b shape (left value to 35%, right value at 80%) can't light the trail AND keep 4.5:1 under a headline
   that runs to ~70% of the width (worst pixel needs the screen >= ~0.62 there, i.e. right >= 0.55 = today's), so
   Home gets two stop tokens: left value held to --td-home-overlay-hold, lifting to the right value at
   --td-home-overlay-end. Flat at the left value <=1000 (the stacked layout: text runs ~80-100% of the width). */
html:root body.home {
  --td-home-overlay-left: 0.85;
  --td-home-overlay-right: 0.2;
  --td-home-overlay-hold: 60%;
  --td-home-overlay-end: 100%;
}

html:root body.home .td-home-hero__desktop::before {
  --td-home-hero-scrim: linear-gradient(90deg, rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-left)) 0%, rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-left)) var(--td-home-overlay-hold), rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-right)) var(--td-home-overlay-end));
}

@media (max-width: 1000px) {
  html:root body.home .td-home-hero__desktop::before {
    --td-home-hero-scrim: linear-gradient(rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-left)), rgba(var(--td-bold-dark-rgb), var(--td-home-overlay-left)));
  }
}

/* 17h. 2026-10-25: hero lightened per Chuck's mockup 10-25 (F4b, MANIFEST §95/§96). >=1001 only; <=1000 keeps 17c/17f.
   Photo = the 10-12 lower-plug-3 render (attachment 8247), framed as the mockup (1:1 at -104,0 in 1325px = the 1440
   layout): 1516/1325 = 114.42% wide, image row 383.85 held at the hero's centre, never past the top edge. Vertical term
   re-derived 2026-10-26 (MANIFEST §100) for the shorter, content-height hero: it keeps the image row that the 630px
   hero had at its centre, max(315px, 28.97vw) down the rendered photo (= row 383.85 from ~1088 up, a bit lower
   1001-1087 where the old top clamp held), at the centre of WHATEVER height the hero now has:
   y = 50% + 38.153vw (half the 0.76306W-tall photo) - max(315px, 28.97vw). Same plug/trail framing, less above/below
   it. (Was min(0px, calc(315px - 28.97vw)), which only centred a 630px box.) Screen = the
   PSD's (black -> rgb 40, .79 to 29.8%, 0 at 64.2%). Call pad = the PSD's 40,40,40 @ .66. Halo = the PSD's text/logo
   Drop Shadow as SVG filters printed by tandem-polish.php (#td-halo .4; #td-halo-lead +.22 on the lead for >= 3:1, and
   on the headline since §100). */
@media (min-width: 1001px) {
  html:root body.home #content .td-home-hero__desktop {
    background-image: url(/wp-content/uploads/2026/10/communications-header-lp3.webp);
    background-size: 114.42% auto;
    background-position: -7.849vw calc(50% + 38.153vw - max(315px, 28.97vw));
  }

  html:root body.home #content .td-home-hero__desktop::before {
    --td-home-hero-scrim: linear-gradient(to right, rgba(0, 0, 0, 0.79) 0, rgba(14, 14, 14, 0.79) 29.8%, rgba(40, 40, 40, 0) 64.2%);
  }

  html:root body.home #content .td-home-hero__ctas .td-btn--ghost:not(:hover) {
    background-color: rgba(40, 40, 40, 0.66);
  }

  /* §144 (2026-11-04): CSS glow replaces the §96/§100/§101 SVG halo (feMorphology was ~5 s of paint per load, the whole
     Home desktop TBT). One filter per element (§150: headline + lead now share ONE chain on the title block). drop-shadow() chains, not
     text-shadow: Chrome paints each text line's shadow over the line above (greyed glyphs, §93), drop-shadow() shadows the
     element as a whole. The chain was fitted to the old halo's falloff (alpha ~.5 to 12px out, 0 by ~45px): the 4px step
     thickens the strokes so the two wide steps build the plateau that the SVG's dilate made. Contrast pass (one adjustment):
     headline last step .52 -> full, lead + a 12px step (thin 18px text needs a denser field). Strength = --td-glow (17i). */
  /* §150 (2026-11-08): ONE chain on the title block (the lead's 4-layer), none on the headline or lead. Per-element
     filters made the lead's glow paint over the headline's second line (DOM order), greying "& Network Infrastructure".
     The block's drop-shadow sits behind both texts. */
  html:root body.home #content .td-home-hero__desktop .td-home-hero__title-block {
    filter: drop-shadow(0 0 4px rgb(0 0 0 / var(--td-glow, 1))) drop-shadow(0 0 12px rgb(0 0 0 / var(--td-glow, 1))) drop-shadow(0 0 48px rgb(0 0 0 / var(--td-glow, 1))) drop-shadow(0 0 38px rgb(0 0 0 / var(--td-glow, 1)));
  }

  html:root body.home #content .td-home-hero__desktop img.td-home-hero__logo-bold {
    filter: drop-shadow(0 0 3px rgb(0 0 0 / calc(0.9 * var(--td-glow, 1)))) drop-shadow(0 0 43px rgb(0 0 0 / calc(0.89 * var(--td-glow, 1)))) drop-shadow(0 0 37px rgb(0 0 0 / calc(0.47 * var(--td-glow, 1))));
  }
}

/* 17i. 2026-10-26: bold Home hero 700-1000px, the V3 ramp (MANIFEST §97/§98). Block = mid/V3.css as built.

   WHAT IT DOES. At >=1001 the hero is 17h's bright F4b (lp3 photo, PSD screen, light Call pad, SVG halo). At <=699
   it is the old dark hero (17f: flat rgba(32,25,17,.85) screen, 8005 photo, Call pad rgba(0,0,0,.45), no halo).
   Without this block 1000px jumped straight from one to the other. Here the bright version eases into the dark one
   step by step, so neighbouring widths look almost the same (hero brightness steps <= 1 level of 255) and the
   look at 700 matches 699. Layout is untouched: this block only changes paint (backgrounds, mask, filters).

   WHY 100000px GRADIENTS. CSS has no clean way to turn a screen width into an opacity. The usual trick
   (tan(atan2(100vw, 1px)) to get a unitless number) works in Chromium, but Firefox 132 throws away every declaration
   that uses it and WebKit ignores it in colours and filters. So every ramp here is built from LENGTHS only: a
   gradient 100000px wide (0 -> full strength) is laid over the hero and slid sideways by a vw formula. The hero is
   at most 1000px wide, so it only ever sees a 1000px sliver of that gradient: the colour is effectively flat
   (varies <= 1% across the hero), and how far the gradient is slid picks which strength you get. Slide offset
   -s * 100000px = strength s. The 101000px size is the 100000 ramp + 1000px of the end colour for the hero to sit on.

   THE PIECES.
   - Dark screen = layer 1 of the hero's background-image: rgba(32,25,17) from 0 to .85 (the same colour/opacity
     17f uses at <=699), sitting on the photo and under ::before. Darkness at a width = .85 * s(W).
   - Photo = layer 2: lp3, framed linearly in vw from 17h's 114.42% / -7.849vw at 1001 to 112% / -42px at 700
     (= the size 8005's cover lands on at 700), so the plug and trail stay in frame and line up with <=699.
     Vertical (2026-10-26, MANIFEST §100, shorter content-height hero): was 0 (top) under a 630px box (857-1000) or a
     522-544px one (700-856); now y = 50% + half the photo (40.037vw - 18.839px) - the old box's centre, so the
     photo row that sat at the old hero's centre sits at the new one's: 315px at 857-1000, 186.35px + 10.7vw at
     700-856 (the old content heights' halves, within ~2px). Same part of the photo, less above/below it.
   - F4b scrim (::before): the 17h PSD gradient with moving stops (below), faded out as a whole by a mask slid the
     same way (mask fully on to 833, gone at 700) so at 700 only the dark screen is left.
   - Call pad: F4b's rgba(40,40,40,.66) easing to the live rgba(0,0,0,.45), on the same s as the dark screen.
     Hover is untouched (:not(:hover)).
   - Halo: the §96 SVG filters (#td-halo, #td-halo-lead, printed by tandem-polish.php; #td-halo-lead also on the
     headline since §100; the headline's own #td-halo-head since §101, stepped in the same bands) are kept on and their
     flood-opacity stepped down in 8 bands to almost nothing by 727; at <=699 the filter is not applied at all.

   THE ARITHMETIC. A slide written clamp(-100000px, calc(A vw - B px), 0px) gives
     s(W) = (B - A*W/100) / 100000, clamped 0..1, i.e. s = 0 at W0 = 100*B/A and s = 1 at W1 = 100*(B - 100000)/A.
   To make a ramp run from 0 at W0 to full at W1 (W0 > W1):  A = 10000000 / (W0 - W1),  B = 100000 * W0 / (W0 - W1).
   - Dark screen + Call pad: W0 = 941, W1 = 700 -> A = 41493.78, B = 390456.4 (both rules use this same formula; keep
     them equal). s = (941 - W) / 241: .00 @941, .17 @900, .34 @860, .58 @800, .92 @720, 1 @700.
   - ::before mask: W0 = 832.55, W1 = 700 -> A = 75443.23, B = 628100. The F4b scrim is fully on to ~833, then gone
     by 700 (mask strength = 1 - s).
   - Ramp start/end at other widths: recompute A and B from the two formulas above. Keep W1 = 700 or the cliff
     comes back at 699/700. Darker or brighter overall: change .85 in the dark-screen end stop (but at 700 it must
     be .85 to match <=699). Darker or brighter at ONE width without moving the ends: add a colour stop inside
     the 100000px gradient: a stop at P px applies at the width where s = P/100000 (e.g. rgba(32,25,17,0.3)
     50000px makes s = .5, i.e. W = 820.5, .30 instead of .425). The gradient's stops ARE the curve.
   - Scrim stops (percent = of the hero width, which is the viewport width here):
     hold stop  max(29.8%, 1918.7px - 174.1vw): F4b's 29.8% down to 941, then slides right to 700px = 100% at 700.
       (Line through 29.8% of 941 = 280.4px and 700px at 700: slope -1.741 per px of width, intercept 1918.7.)
     fade end   max(min(64.2% + 1961.96px - 196vw, 74.8%), 2018.7px - 174.1vw): 64.2% at 1001, widening by 1.96px
       for every px narrower (1961.96 = 1.96 * 1001), capped at 74.8% (reached ~950), and never closer than 100px
       to the hold stop (that floor takes over ~811). Raise 74.8% / 1.96 = headline darker sooner; lower = brighter
       right side, but the headline fails (see DEVELOPER-NOTES item 11 d3).
   - Photo: size calc(120.07vw - 56.5px), position-x calc(43.05px - 12.15vw): the straight lines through
     1145.4px / -78.6px at 1001 and 784px / -42px at 700. Change the two end points, refit the lines.

   HALO BANDS (flood-opacity; lead = .55 x halo; nested max-width rules, the narrowest wins):
     width      td-halo  td-halo-lead        width      td-halo  td-halo-lead
     921-1000   .4       .22  (PHP default)  783-810    .175     .09625
     894-920    .375     .20625              756-782    .125     .06875
     866-893    .325     .17875              728-755    .075     .04125
     839-865    .275     .15125              700-727    .025     .01375
     811-838    .225     .12375              <=699      filter off (17h is >=1001, this block >=700)
   Band k (1-8) = .4 * (1 - (k - .5)/8), each band ~27.6px wide from 921 down; each step ~3 grey levels of halo.
   Measured (Chromium, worst pixel): headline >= 3.24 (920), lead >= 3.78 (1000), eyebrow >= 5.16. */
@media (min-width: 700px) and (max-width: 1000px) {
  html:root body.home #content .td-home-hero__desktop {
    background-image: linear-gradient(to right, rgba(32, 25, 17, 0) 0, rgba(32, 25, 17, 0.85) 100000px), url(/wp-content/uploads/2026/10/communications-header-lp3.webp);
    background-size: 101000px 100%, calc(120.07vw - 56.5px) auto;
    background-position: clamp(-100000px, calc(41493.78vw - 390456.4px), 0px) 0, calc(43.05px - 12.15vw) calc(50% + 40.037vw - 333.839px);
    background-repeat: no-repeat;
  }
  @media (max-width: 856px) {
    html:root body.home #content .td-home-hero__desktop {
      background-position: clamp(-100000px, calc(41493.78vw - 390456.4px), 0px) 0, calc(43.05px - 12.15vw) calc(50% + 29.337vw - 205.19px);
    }
  }
  html:root body.home #content .td-home-hero__desktop::before {
    --td-home-hero-scrim: linear-gradient(to right, rgba(0, 0, 0, 0.79) 0, rgba(14, 14, 14, 0.79) max(29.8%, calc(1918.7px - 174.1vw)), rgba(40, 40, 40, 0) max(min(calc(64.2% + 1961.96px - 196vw), 74.8%), calc(2018.7px - 174.1vw)));
    mask-image: linear-gradient(to right, #000 0, transparent 100000px);
    mask-size: 101000px 100%;
    mask-position: clamp(-100000px, calc(75443.23vw - 628100px), 0px) 0;
    mask-repeat: no-repeat;
  }
  html:root body.home #content .td-home-hero__ctas .td-btn--ghost:not(:hover) {
    background-color: transparent;
    background-image: linear-gradient(to right, rgba(40, 40, 40, 0.66) 0, rgba(0, 0, 0, 0.45) 100000px);
    background-size: 101000px 100%;
    background-position: clamp(-100000px, calc(41493.78vw - 390456.4px), 0px) 0;
    background-repeat: no-repeat;
  }
  /* §144: 17h's CSS glow, stepped by --td-glow = the old flood-opacity / .4 (same 8 bands; <=699 no glow). */
  /* §150: one chain on the title block (see 17h). */
  html:root body.home #content .td-home-hero__desktop .td-home-hero__title-block { filter: drop-shadow(0 0 4px rgb(0 0 0 / var(--td-glow, 1))) drop-shadow(0 0 12px rgb(0 0 0 / var(--td-glow, 1))) drop-shadow(0 0 48px rgb(0 0 0 / var(--td-glow, 1))) drop-shadow(0 0 38px rgb(0 0 0 / var(--td-glow, 1))); }
  html:root body.home #content .td-home-hero__desktop img.td-home-hero__logo-bold { filter: drop-shadow(0 0 3px rgb(0 0 0 / calc(0.9 * var(--td-glow, 1)))) drop-shadow(0 0 43px rgb(0 0 0 / calc(0.89 * var(--td-glow, 1)))) drop-shadow(0 0 37px rgb(0 0 0 / calc(0.47 * var(--td-glow, 1)))); }
  @media (max-width: 920px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.9375; }
  }
  @media (max-width: 893px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.8125; }
  }
  @media (max-width: 865px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.6875; }
  }
  @media (max-width: 838px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.5625; }
  }
  @media (max-width: 810px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.4375; }
  }
  @media (max-width: 782px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.3125; }
  }
  @media (max-width: 755px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.1875; }
  }
  @media (max-width: 727px) {
    html:root body.home #content .td-home-hero__desktop { --td-glow: 0.0625; }
  }
}

/* 17g. "How Can We Help You?" (Home services section only; testimonials keep 13d's 64 / 28): space above + below the
   heading 74 + 48 -> 26 + 20 (>=768; cards 76px higher: 907 -> 831 at 1440) and 54 + 48 -> 20 + 20 (<=767, the same
   ~62% cut). Below = the heading's margin (28 -> 0) + the card rows' own 10 + 10px padding, kept. */
html:root body.home #content .elementor-91 .elementor-element.td-hp-services {
  padding-top: 16px;
}

html:root body.home #content .elementor-91 .elementor-element.td-hp-services .elementor-widget-heading {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  html:root body.home #content .elementor-91 .elementor-element.td-hp-services {
    padding-top: 10px;
  }
}

/* 18. HOME PHONE TWEAKS (2026-10-19, MANIFEST §73; Chuck's phone screenshot). Bold Home at <=600 only; 601+
   unchanged. 18a hero logo centred under the buttons (same 257.26px size as 601-1000, 17e; the first §73 pass made it
   70vw, superseded), 30px above (below the Call button) and 24px below (above the hero's bottom edge, padding 24; was 30
   before §100). 18b service cards: icon, title and
   description all centred (§73 part 3; replaces the icon-only centring). Card size, borders, spacing unchanged. */
@media (max-width: 600px) {
  html:root body.home #content .td-home-hero__desktop {
    padding-bottom: 24px;
  }

  html:root body.home #content .td-home-hero__desktop .td-home-hero__logo-wrap {
    align-self: center;
    margin-top: 30px;
    margin-right: 0;
    margin-bottom: 0;
  }

  html:root body.home #content .td-hp-services :is(.elementor-icon-box-icon, .elementor-icon-box-title, .elementor-icon-box-description) {
    text-align: center;
  }
}

/* 17j. FULL-BLEED HOME HERO + MENU STRIP (2026-10-26, MANIFEST §101; Home only, interior untouched).
   - No header band above the hero: #masthead is position:absolute (DOM + tab order unchanged, visual placement only; selectors
     repeat 17b's body.home.ast-theme-transparent-header form, which set it back to relative), so the
     hero starts at y=0 and runs edge to edge. z-index 30 keeps the header and its dropdowns above the page below.
   - >=1251 (full menu): the hero gets 48px more at the bottom (padding) and the desktop header sits in that strip: menu centred,
     white text on a .78 --td-bold-dark screen the hero's full width, 48px items, the 13k current/hover bar 6px off the bottom,
     white focus ring and arrows. Placed with anchor positioning (top = hero bottom - 48); without anchor support the top is the
     hero's own height formula (padding-top + button margin are held at 96px together below, headline 2 x 1.05 x fs, lead 2 x 30.6,
     22 + 32 + 1.2 x the button font, bottom padding) = calc(211.2px + 2.1 x fs + 1.2 x button fs + bottom padding). Dropdowns
     open downward from the strip, i.e. over the services section.
   - <=1250 (hamburger): the 60px mobile bar is transparent over the photo; the toggle (44x44) gets a dark pad + white icon; the
     panel opens under the bar as before (now over the hero instead of pushing it down). No strip.
   - Headline block spacing (item 6): space above = hero top -> top of the H1's capitals (0.17 x fs below the headline's line box
     top, measured: 10px at 60, 7 at 41.4, 6 at 34); space below = bottom of the lead's last line of text (its text box, d = 5.6px
     above the paragraph's bottom at 18px, 4.4 at 16px) -> top of the button row. Padding-top + the button row's margin-top stay
     at their §100 total S (96 >=1001, 72 <=1000), so the buttons, logo and hero height don't move; the block moves down until
     the two spaces are equal: padding-top = (S + d - 0.17 fs) / 2, margin-top = (S - d + 0.17 fs) / 2. --td-hh-fs must match
     17d's headline font-size. Phones (<=699): the capitals start 60px down (clear of the 8-52px toggle) and the gap below the
     lead is made the same 60px (the hero grows ~38px there; the header's 61px is gone).
   - Photo >=1251: §100's row held at the centre of the hero minus the strip (50% - 24px), so the photo stays where it was
     relative to the hero's top, headline, buttons and logo; the strip just shows 48px more of it at the bottom. <=1250
     the hero height is unchanged, so 17h/17i stand.
   - Lead halo (item 5): #td-halo-lead .22 -> .4 at 950-1300 (lead was 3.52-4.41 there). The headline has its own #td-halo-head. */
html:root body.home #masthead,
html:root body.home.ast-theme-transparent-header #masthead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

html:root body.home .site-header,
html:root body.home #masthead .main-header-bar {
  border-bottom: 0;
  background: transparent;
}

html:root body.home #content .td-home-hero__desktop {
  --td-hh-fs: clamp(34px, 4.6vw, 60px);
  --td-hh-s: 96px;
  --td-hh-d: 5.6px;
  anchor-name: --td-home-hero;
  padding-top: calc((var(--td-hh-s) + var(--td-hh-d) - 0.17 * var(--td-hh-fs)) / 2);
}

html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas {
  margin-top: calc((var(--td-hh-s) - var(--td-hh-d) + 0.17 * var(--td-hh-fs)) / 2);
}

@media (max-width: 1000px) {
  html:root body.home #content .td-home-hero__desktop {
    --td-hh-s: 72px;
  }
}

@media (max-width: 767px) {
  html:root body.home #content .td-home-hero__desktop {
    --td-hh-d: 4.4px;
  }
}

@media (max-width: 699px) {
  html:root body.home #content .td-home-hero__desktop {
    padding-top: calc(60px - 0.17 * var(--td-hh-fs));
  }

  html:root body.home #content .td-home-hero__desktop .td-home-hero__ctas {
    margin-top: calc(60px - var(--td-hh-d));
  }
}

@media (min-width: 1251px) {
  html:root body.home #masthead,
  html:root body.home.ast-theme-transparent-header #masthead {
    top: calc(anchor(--td-home-hero bottom) - 48px);
  }

  html:root body.home #content .td-home-hero__desktop {
    padding-bottom: calc(max(40px, 3.882vw - 4px) + 48px);
    background-position: -7.849vw calc(50% - 24px + 38.153vw - max(315px, 28.97vw));
  }

  html:root body.home #ast-desktop-header .main-header-bar {
    background: rgba(var(--td-bold-dark-rgb), 0.78);
  }

  html:root body.home #ast-desktop-header :is(.ast-builder-grid-row, .site-primary-header-wrap) {
    min-height: 48px;
  }

  html:root body.home #ast-desktop-header :is(.main-header-menu > .menu-item, .main-header-menu > .menu-item > .menu-link) {
    line-height: 48px;
  }

  html:root body.home #ast-desktop-header .main-header-menu > .menu-item > .menu-link,
  html:root body.home #ast-desktop-header .main-header-menu > .menu-item:is(:hover, .focus, .current-menu-item, .current-menu-ancestor) > .menu-link {
    color: #fff;
  }

  html:root body.home #ast-desktop-header .main-header-menu > .menu-item > .menu-link .ast-icon svg {
    fill: #fff;
  }

  html:root body.home #ast-desktop-header .main-header-menu > .menu-item > a::after {
    bottom: 6px;
  }

  html:root body.home #ast-desktop-header .main-header-menu > .menu-item > a:focus-visible {
    outline-color: #fff;
  }
}

@supports not (anchor-name: --a) {
  @media (min-width: 1251px) {
    html:root body.home #masthead,
    html:root body.home.ast-theme-transparent-header #masthead {
      top: calc(211.2px + 2.1 * min(4.6vw, 60px) + 1.2 * min(1.39vw, 20px) + max(40px, 3.882vw - 4px));
    }
  }
}

@media (max-width: 1250px) {
  html:root body.home #ast-mobile-header .menu-toggle {
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
  }

  html:root body.home #masthead #ast-mobile-header .menu-toggle svg {
    fill: #fff;
  }
}

/* §144: the 950-1300 lead halo bump (#td-halo-lead .4) is gone with the SVG filters; the lead's CSS glow is already at
   full strength (17h). */

/* END BOLD-R1 */

/* 19. WIRELESS LAYOUT (2026-10-28, MANIFEST §108; page 7856 only, layout only, text untouched). The three H2 sections
   sit in a 3-column group (td-wn-cols > td-wn-col: decorative inline-SVG icon, H2, paragraphs) at >=1001; 1000 and down
   they stack in one column with the icon left of the heading. Then the lead-in (keeps the 60ch measure) and the list as
   a 2-column card grid (td-list-2col, so no measure cap; 1 column <=699). The list's check = td-check-bold below. */
html:root body:not(.home).page-id-7856 #content .entry-content > .td-wn-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: none;
  margin: 0 0 56px;
  padding: 0;
}

html:root body:not(.home).page-id-7856 #content .td-wn-col {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  align-content: start;
  max-width: 60ch;
  margin: 0;
  padding: 0;
}

html:root body:not(.home).page-id-7856 #content .td-wn-col > * {
  grid-column: 1 / -1;
  margin-left: 0;
  margin-right: 0;
}

html:root body:not(.home).page-id-7856 #content .td-wn-col > .td-wn-icon {
  grid-column: 1;
  display: block;
  width: 44px;
  height: 44px;
  margin: 0;
  color: var(--td-orange);
}

html:root body:not(.home).page-id-7856 #content .td-wn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

html:root body:not(.home).page-id-7856 #content .td-wn-col > h2 {
  grid-column: 2;
  margin: 0;
}

html:root body:not(.home).page-id-7856 #content .td-wn-col > p {
  margin: 16px 0 0;
}

html:root body:not(.home).page-id-7856 #content .td-wn-col > p + p {
  margin-top: 1.2em;
}

html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-list-2col.td-check-bold {
  max-width: none;
}

@media (min-width: 700px) {
  html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-list-2col.td-check-bold {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1001px) {
  html:root body:not(.home).page-id-7856 #content .entry-content > .td-wn-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(32px, 4vw, 56px);
  }

  html:root body:not(.home).page-id-7856 #content .td-wn-col {
    display: block;
    max-width: none;
  }

  html:root body:not(.home).page-id-7856 #content .td-wn-col > .td-wn-icon {
    margin-bottom: 16px;
  }

  /* Column headings at the site's H2 floor (30px): the 42px section size runs 2-3 lines in a ~340px column. */
  html:root body:not(.home).page-id-7856 #content .td-wn-col > h2 {
    font-size: 30px;
  }
}

@media (max-width: 699px) {
  html:root body:not(.home).page-id-7856 #content .td-wn-col {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
  }

  html:root body:not(.home).page-id-7856 #content .td-wn-col > .td-wn-icon {
    width: 40px;
    height: 40px;
  }
}

/* Card band (2026-10-28, MANIFEST §113): the card-grid H2 + cards moved into a group (td-wn-band) placed first, straight
   under the hero; the three text columns follow on white. Band = --td-gray-bg (#f4f5f6, the Home counters / section
   tint), full-bleed by box-shadow + side-only clip like the 11b / Nationwide tints (no 100vw, no scroll width). Flush
   under the hero (the callout's 44px gap dropped on this page only). Cards: #d3d7dc border, soft shadow, 4px brand-orange
   left bar (border-left, so it follows the rounded corners), more padding, 18px text (17px <=1000; weight stays 400:
   Public Sans 500 is not in the font request, 400/600/700 only). The check's top/left track the new padding so it still
   centres on the first line. Short centred orange rule under the H2 (decorative ::after, no DOM).
   2026-11-03 (MANIFEST §128): the band and the centred H2 + orange rule are now the shared td-gray-band / td-section
   classes in 23a (Hosted VoIP uses them too); the band's group class td-wn-band became td-gray-band and the H2's own
   class was dropped. What stays here is Wireless-only: the callout gap, the 2-column cards in the band, the gap after. */
html:root body:not(.home).page-id-7856 #content .td-mission-callout {
  margin-bottom: 0;
}

html:root body:not(.home).page-id-7856 #content .entry-content > .td-gray-band + .td-wn-cols {
  margin-top: 56px;
}

html:root body:not(.home).page-id-7856 #content .entry-content > .td-wn-cols:last-child {
  margin-bottom: 32px;
}

html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-check-bold.td-check-bold {
  margin: 0;
}

html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-check-bold.td-check-bold > li {
  padding: 26px 32px 26px calc(32px + var(--td-check-bold-size) * 1.1 + 18px);
  border: 1px solid #d3d7dc;
  border-left: 4px solid var(--td-orange);
  box-shadow: 0 1px 3px rgba(26, 29, 33, 0.06), 0 4px 12px rgba(26, 29, 33, 0.06);
  font-size: 18px;
}

html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-check-bold.td-check-bold > li::before {
  left: 32px;
  top: calc(26px + 0.5lh - var(--td-check-bold-size) / 2);
}

@media (max-width: 1000px) {
  html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-check-bold.td-check-bold > li {
    font-size: 17px;
  }
}

@media (max-width: 699px) {
  html:root body:not(.home).page-id-7856 #content .entry-content > .td-gray-band + .td-wn-cols {
    margin-top: 44px;
  }
}

@media (max-width: 600px) {
  html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-check-bold.td-check-bold > li {
    padding: 22px 24px 22px calc(24px + var(--td-check-bold-size) * 1.1 + 14px);
  }

  html:root body:not(.home).page-id-7856 #content .td-gray-band > ul.td-check-bold.td-check-bold > li::before {
    left: 24px;
    top: calc(22px + 0.5lh - var(--td-check-bold-size) / 2);
  }
}

/* td-check-bold: reusable bold check for any checklist (add the class to the <ul>). No circle (2026-10-28, MANIFEST §109):
   a large tapered brush-style check (thick body, thin pointed upper stroke, short thick left hook) = one filled path,
   lightened 2026-10-28 (MANIFEST §112): body ~27% thinner, smoother upper stroke to a ~1-unit tip, slimmer left hook,
   fixed 44x40 viewBox. SHAPE REPLACED 2026-10-29 (MANIFEST §118): potrace trace of Chuck's check-reference.png (Segoe
   UI Symbol U+1F5F8, faux-bold), tight 41.42x40 viewBox. Used as a mask on the ::before so it scales crisply and takes
   its colour from background-color. The li padding still reserves the old 1.1x slot so the text did not move.
   Green #2E9E3A on the white card = 3.46:1 (>= 3:1 graphics minimum). Height via --td-check-bold-size (width = 1.036x),
   colour via --td-check-bold-color. Centred on the first text line. Doubled class = enough specificity to beat 9f's
   rules (WP renders the list as ul.wp-block-list) wherever the class is added. Rows get a little more padding. */
html:root body:not(.home) #content .entry-content ul.td-check-bold.td-check-bold:not(li ul) {
  --td-check-bold-size: 38px;
  --td-check-bold-color: #2E9E3A;
}

html:root body:not(.home) #content .entry-content ul.td-check-bold.td-check-bold:not(li ul) > li {
  padding: 22px 28px 22px calc(28px + var(--td-check-bold-size) * 1.1 + 18px);
}

html:root body:not(.home) #content .entry-content ul.td-check-bold.td-check-bold:not(li ul) > li::before {
  left: 28px;
  top: calc(22px + 0.5lh - var(--td-check-bold-size) / 2);
  width: calc(var(--td-check-bold-size) * 1.036);
  height: var(--td-check-bold-size);
  border-radius: 0;
  background: var(--td-check-bold-color);
  -webkit-mask: var(--td-check-glyph) center / contain no-repeat;
  mask: var(--td-check-glyph) center / contain no-repeat;
  transform: none;
}

@media (max-width: 600px) {
  html:root body:not(.home) #content .entry-content ul.td-check-bold.td-check-bold:not(li ul) {
    --td-check-bold-size: 32px;
  }

  html:root body:not(.home) #content .entry-content ul.td-check-bold.td-check-bold:not(li ul) > li {
    padding: 18px 22px 18px calc(22px + var(--td-check-bold-size) * 1.1 + 14px);
  }

  html:root body:not(.home) #content .entry-content ul.td-check-bold.td-check-bold:not(li ul) > li::before {
    left: 22px;
    top: calc(18px + 0.5lh - var(--td-check-bold-size) / 2);
  }
}

/* 20. IP SECURITY CAMERAS "WHY TANDEM DATA?" (2026-10-29, MANIFEST §117; page 8241 only). Chris (IC-1): the paragraph
   used half the page. Its two paragraphs sit in a td-ic-why group: side by side at >=1001, each column still capped at
   the 60ch long-form measure; 1000 and down they stack, same breakpoint as the Wireless columns. */
html:root body:not(.home).page-id-8241 #content .entry-content > .td-ic-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 60ch;
  margin: 0;
  padding: 0;
}

html:root body:not(.home).page-id-8241 #content .td-ic-why > p {
  max-width: 60ch;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 1001px) {
  html:root body:not(.home).page-id-8241 #content .entry-content > .td-ic-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(32px, 4vw, 56px);
    max-width: none;
  }

  /* Both columns start at the same y (the stacked paragraph gap would push column 2 down). */
  html:root body:not(.home).page-id-8241 #content .td-ic-why > p {
    margin-top: 0;
  }
}

/* The GPT copy adds a lead-in paragraph above the What We Install list; 9f's list margin (0 0 32px) beat 9d's 20px
   `* + ul` gap, so the list sat flush on the paragraph. Restores 9d's 20px here. */
html:root body:not(.home).page-id-8241 #content .entry-content .td-split-intro__text > p + ul.td-check-bold {
  margin-top: 20px;
}

/* 21. IP SECURITY CAMERAS "HOW IT WORKS" CARDS (2026-10-29, MANIFEST §119; page 8241 only). Chuck: the 4 steps become
   Nationwide's ol.td-steps cards (orange number circle, H3 title, sentence; base rules + bold H3 size reused). Card box =
   the Nationwide 7846 values. 4 across >=1001, 2x2 700-1000, 1 column <=699; grid rows stretch, so cards are equal height.
   Full content width (no 60ch cap). 48px below = the gap the old numbered list had above "Why Tandem Data?". */
html:root body.page-id-8241 #content .entry-content ol.td-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: none;
  margin: 0 0 48px;
}

html:root body.page-id-8241 #content .entry-content ol.td-steps > li {
  margin: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 6px;
}

html:root body.page-id-8241 #content .td-steps p {
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  html:root body.page-id-8241 #content .entry-content ol.td-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* Circle left of title (base <=1000 rule). A card stretched to its row-mate's height split the extra space between
     the title and sentence rows; the sentence row takes it all instead, so the text stays under the title. */
  html:root body.page-id-8241 #content .entry-content ol.td-steps > li {
    grid-template-rows: auto 1fr;
  }
}

@media (max-width: 699px) {
  html:root body.page-id-8241 #content .entry-content ol.td-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  html:root body.page-id-8241 #content .entry-content ol.td-steps > li {
    padding: 22px;
  }
}

@media (max-width: 544px) {
  html:root body.page-id-8241 #content .td-steps p {
    font-size: 16px;
  }
}

/* 22. ABOUT US REBUILD (2026-10-30, MANIFEST §123; page 7850 only). Chris AU-3: the ChatGPT sample's wording and section
   order (/About-Us-GPT/), our bold styling. Hero = the photo header (section 9 bold hero) with About Us' own photo tiers +
   a bottom scrim for the sub-line; intro split (text | figure + caption + orange rule); .td-au-split = eyebrow + H2 left,
   text right (2 columns >=1001, stacked <=1000); dark band = td-band--reverse, full-bleed, decorative dot map
   (tools/about-us-map/build-map.mjs -> uploads/2026/10/about-us-dot-map.svg) + the big orange 01; closing td-cta-band. */
html:root body.page-id-7850 {
  --td-au-hero-img: url('/wp-content/uploads/2026/10/about-us-hero-v2.webp');
  --td-au-rule: #d9dde3;
}

@media (max-width: 1100px) {
  html:root body.page-id-7850 { --td-au-hero-img: url('/wp-content/uploads/2026/10/about-us-hero-v2-1100.webp'); }
}

@media (max-width: 700px) {
  html:root body.page-id-7850 { --td-au-hero-img: url('/wp-content/uploads/2026/10/about-us-hero-v2-700.webp'); }
}

/* 22a. Hero: the photo's left third is dark by design (text there); cords on the right kept by the 85% x position.
   Extra bottom-up scrim so the sub-line (15px white / orange) clears 4.5:1 over the cords. */
html:root body.page-id-7850 #content .entry-content > .td-page-header-photo:first-child::before {
  background-image: linear-gradient(0deg, rgba(var(--td-bold-dark-rgb), 0.9) 0, rgba(var(--td-bold-dark-rgb), 0.6) 30%, rgba(var(--td-bold-dark-rgb), 0) 60%), var(--td-bold-hero-scrim), var(--td-au-hero-img);
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, var(--td-page-header-photo-pos, 85% 50%);
}

/* 22a2 (2026-10-30, MANIFEST §124; Chuck: too dark, cords murky). >=768 only (<=767 keeps the flat phone scrim): own
   left-to-right scrim, strong to 40% (text), easing to 0.18 by 80% so the right half reads as a photo; bottom scrim lighter
   and lower (the sub-row). Every hero text still >=4.5:1 against the lightest pixel behind it (contrast.mjs). */
@media (min-width: 768px) {
  html:root body.page-id-7850 #content .entry-content > .td-page-header-photo:first-child::before {
    background-image: linear-gradient(0deg, rgba(var(--td-bold-dark-rgb), 0.92) 0, rgba(var(--td-bold-dark-rgb), 0.8) 20%, rgba(var(--td-bold-dark-rgb), 0) 44%), linear-gradient(90deg, rgba(var(--td-bold-dark-rgb), 0.88) 0, rgba(var(--td-bold-dark-rgb), 0.85) 40%, rgba(var(--td-bold-dark-rgb), 0.18) 80%), var(--td-au-hero-img);
  }
}

html:root body.page-id-7850 #content .td-au-hero .td-page-header-photo__inner {
  width: 100%;
  max-width: none;
}

html:root body.page-id-7850 #content .td-au-hero__sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 44px;
  padding: 18px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* #primary: out-ranks 13l's on-white link rule (1,7,2). */
html:root body.page-id-7850 #content #primary .td-au-hero__sub a {
  color: var(--td-orange);
  font-weight: 600;
  text-decoration: none;
}

html:root body.page-id-7850 #content #primary .td-au-hero__sub a:hover {
  text-decoration: underline;
}

html:root body.page-id-7850 #content #primary .td-au-hero__sub a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* 22b. Shared type: section H2 = the Nationwide band H2; body 17px; eyebrows on white = the on-light orange. */
html:root body.page-id-7850 #content .entry-content :is(.td-au-split, .td-au-nation) h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--td-charcoal);
}

html:root body.page-id-7850 #content .entry-content :is(.td-au-intro__text, .td-au-split__body) p,
html:root body.page-id-7850 #content .entry-content .td-au-nation p:not(.td-eyebrow) {
  max-width: 75ch;
  font-size: 17px;
  line-height: 1.65;
}

html:root body.page-id-7850 #content .entry-content :is(.td-au-intro__text, .td-au-split__body) p {
  margin: 0 0 18px;
}

html:root body.page-id-7850 #content .entry-content .td-au-split__body p:last-child {
  margin-bottom: 0;
}

html:root body.page-id-7850 #content .entry-content .td-au-split .td-eyebrow {
  margin: 0 0 10px;
  color: var(--td-orange-onlight);
}

html:root body.page-id-7850 #content .entry-content .td-au-split__body strong {
  color: var(--td-orange-onlight);
  font-weight: 700;
}

/* 22c. Intro: text | figure. */
html:root body.page-id-7850 #content .entry-content .td-au-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin: 64px 0 0;
  padding: 0;
}

html:root body.page-id-7850 #content .entry-content .td-au-intro > * {
  margin: 0;
}

html:root body.page-id-7850 #content .entry-content p.td-au-lead {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--td-charcoal);
  margin-bottom: 20px;
}

html:root body.page-id-7850 #content .td-au-actions {
  margin-top: 30px;
}

html:root body.page-id-7850 #content .entry-content .td-au-intro__figure img,
html:root body.page-id-7850 #content .entry-content .td-au-approach__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html:root body.page-id-7850 #content .entry-content .td-au-intro__figure figcaption {
  margin: 12px 0 0;
  padding: 0 0 12px;
  border-bottom: 3px solid var(--td-orange);
  font-size: 14px;
  line-height: 1.4;
  color: #5b5f66;
  text-align: left;
}

/* 22d. Split sections (Built on Experience, A Practical Approach): eyebrow + H2 (+ image) left, text right. */
html:root body.page-id-7850 #content .entry-content .td-au-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 64px 0;
}

html:root body.page-id-7850 #content .entry-content .td-au-split > * {
  margin: 0;
}

html:root body.page-id-7850 #content .entry-content .td-au-split--experience {
  margin-top: 64px;
  border-top: 1px solid var(--td-au-rule);
}

/* §124: the fiber photo = a wide banner (8252, 1536x549 crop of the same photo) under the H2 + text row, full content
   width at every width (Chuck's pick; was 8250 under the H2 in the left column, which left the text column short). */
html:root body.page-id-7850 #content .entry-content .td-au-split > .td-au-approach__figure {
  grid-column: 1 / -1;
  margin: 24px 0 0;
}

/* §126: banner = 8253 (about-us-how-we-work-wide-v2, 2000x668) as a short strip. max-height (not height) so only the
   top/bottom is cropped: where the natural height is already under the cap (phones), the photo shows whole, sides kept. */
html:root body.page-id-7850 #content .entry-content .td-au-split > .td-au-approach__figure img {
  max-height: 280px;
  object-fit: cover;
  object-position: 50% 48%;
}

@media (max-width: 1000px) {
  html:root body.page-id-7850 #content .entry-content .td-au-split > .td-au-approach__figure img {
    max-height: 220px;
  }
}

@media (max-width: 600px) {
  html:root body.page-id-7850 #content .entry-content .td-au-split > .td-au-approach__figure img {
    max-height: 160px;
  }
}

/* 22e. Dark band: full-bleed --td-bold-dark (as Nationwide's reverse bands), map behind, 01 feature row. */
html:root body.page-id-7850 #content .entry-content .wp-block-group.td-au-nation {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 76px 0;
  background-color: var(--td-bold-dark);
  box-shadow: 0 0 0 100vmax var(--td-bold-dark);
  clip-path: inset(0 -100vmax);
  color: rgba(255, 255, 255, 0.88);
}

html:root body.page-id-7850 #content .entry-content .td-au-nation h2,
html:root body.page-id-7850 #content .entry-content .td-au-nation h3 {
  color: #fff;
}

html:root body.page-id-7850 #content .entry-content .td-au-nation .td-eyebrow {
  margin: 0 0 10px;
  color: var(--td-orange);
}

html:root body.page-id-7850 #content .entry-content .td-au-nation p:not(.td-eyebrow) {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

html:root body.page-id-7850 #content .entry-content .td-au-nation strong {
  color: var(--td-orange);
  font-weight: 700;
}

html:root body.page-id-7850 #content .td-au-map {
  position: absolute;
  z-index: -1;
  top: 48px;
  right: 0;
  width: min(720px, 64%);
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

/* 22e2 (§124): the brighter map sits under the copy; a halo in the band colour keeps every line readable over dots and arcs. */
html:root body.page-id-7850 #content .entry-content .td-au-nation :is(.td-au-nation__head, .td-au-nation__feature) :is(h2, h3) {
  text-shadow: 0 0 2px var(--td-bold-dark), 0 0 6px var(--td-bold-dark), 0 0 12px rgba(var(--td-bold-dark-rgb), 0.8);
}

/* §125: paragraphs (and the orange strong inside) keep the full §124 halo: the gray dots stay at full brightness and the
   lighter halo let them through under 17px text (4.38). Headings keep the lighter one above (Chuck: smudgy). */
html:root body.page-id-7850 #content .entry-content .td-au-nation :is(.td-au-nation__head, .td-au-nation__feature) p {
  text-shadow: 0 0 2px var(--td-bold-dark), 0 0 5px var(--td-bold-dark), 0 0 10px var(--td-bold-dark), 0 0 16px rgba(var(--td-bold-dark-rgb), 0.9);
}

html:root body.page-id-7850 #content .td-au-nation__head,
html:root body.page-id-7850 #content .td-au-nation__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

html:root body.page-id-7850 #content .td-au-nation__feature {
  margin-top: 44px;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

html:root body.page-id-7850 #content .td-au-one {
  font-family: var(--font-heading);
  font-size: clamp(76px, 8.4vw, 116px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--td-orange);
}

html:root body.page-id-7850 #content .td-au-one span {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html:root body.page-id-7850 #content .entry-content .td-au-nation h3 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}

html:root body.page-id-7850 #content .td-au-nation__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding-top: 32px;
}

html:root body.page-id-7850 #content #primary .entry-content a.td-au-link {
  color: var(--td-orange);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

html:root body.page-id-7850 #content #primary .entry-content a.td-au-link:hover {
  text-decoration: underline;
}

html:root body.page-id-7850 #content #primary .entry-content a.td-au-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* 22f. The approach split runs straight into the closing CTA band: no extra bottom gap beyond its padding. */
html:root body.page-id-7850 #content .entry-content .td-au-split--approach {
  padding-top: 76px;
}

/* 22g. Two columns >=1001 (the site's split breakpoint). */
@media (min-width: 1001px) {
  html:root body.page-id-7850 #content .entry-content .td-au-intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    margin-top: 72px;
  }

  html:root body.page-id-7850 #content .entry-content .td-au-split,
  html:root body.page-id-7850 #content .td-au-nation__head,
  html:root body.page-id-7850 #content .td-au-nation__feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }

  html:root body.page-id-7850 #content .entry-content .td-au-split {
    padding: 76px 0;
  }

  html:root body.page-id-7850 #content .td-au-nation__head {
    align-items: end;
  }

  html:root body.page-id-7850 #content .td-au-nation__bottom p {
    max-width: 62ch;
  }
}

/* §125: 1001-1150 the DFW dot fell on the end of "Every location." (H3 line 2); 34px higher puts it in the clear space
   between the hairline and the H3 (the gap under the H3 is only ~14px). */
@media (min-width: 1001px) and (max-width: 1150px) {
  html:root body.page-id-7850 #content .td-au-map {
    top: 14px;
  }
}

@media (max-width: 1000px) {
  html:root body.page-id-7850 #content .entry-content .td-au-intro__figure {
    max-width: 640px;
  }

  html:root body.page-id-7850 #content .td-au-map {
    top: 40px;
    width: min(600px, 80%);
    opacity: 0.9;
  }
}

@media (max-width: 600px) {
  html:root body.page-id-7850 #content .td-au-hero__sub {
    flex-direction: column;
    margin-top: 32px;
    padding-bottom: 26px;
  }

  html:root body.page-id-7850 #content .entry-content .td-au-intro {
    margin-top: 44px;
  }

  html:root body.page-id-7850 #content .entry-content p.td-au-lead {
    font-size: 19px;
  }

  html:root body.page-id-7850 #content .entry-content .td-au-split {
    padding: 52px 0;
  }

  html:root body.page-id-7850 #content .entry-content .td-au-split--experience {
    margin-top: 52px;
  }

  html:root body.page-id-7850 #content .entry-content .wp-block-group.td-au-nation {
    padding: 56px 0;
  }

  html:root body.page-id-7850 #content .entry-content .td-au-split__body p,
  html:root body.page-id-7850 #content .entry-content .td-au-nation p:not(.td-eyebrow) {
    font-size: 16px;
  }

  /* Phones: the map shrinks to a faint layer behind the band heading. */
  html:root body.page-id-7850 #content .td-au-map {
    top: 36px;
    width: 100%;
    opacity: 0.55;
  }
}

/* 23. SHARED GRAY BAND + SECTION H2 RULE; HOSTED VOIP REBUILD (2026-11-03, MANIFEST §128). Chris approved the
   /Hosted-VoIP-Opus/ mockup for 7858; its inline .tdm-* block moved here as reusable classes (tdm-* -> td-*). */

/* 23a. SHARED (Wireless 7856 + Hosted VoIP 7858). td-gray-band = full-bleed --td-gray-bg band (box-shadow + side-only
   clip, no 100vw, no scroll width); td-section = a plain white section. A direct H2 in either is centred, capped at
   900px, 30-34px, with a short orange rule under it (decorative ::after, no DOM). Generalised from Wireless §111/§113,
   values unchanged; the doubled class keeps the old page-id selectors' weight. */
html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band {
  max-width: none;
  margin: 0;
  padding: 60px 0;
  background-color: var(--td-gray-bg);
  box-shadow: 0 0 0 100vmax var(--td-gray-bg);
  clip-path: inset(0 -100vmax);
}

html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band > h2,
html:root body:not(.home) #content .entry-content > .td-section.td-section > h2 {
  max-width: 900px;
  margin: 0 auto 36px;
  font-size: clamp(30px, 2.4vw, 34px);
  text-align: center;
  text-wrap: balance;
}

html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band > h2::after,
html:root body:not(.home) #content .entry-content > .td-section.td-section > h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 20px auto 0;
  background: var(--td-orange);
}

@media (max-width: 1000px) {
  html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band {
    padding: 48px 0;
  }
}

@media (max-width: 699px) {
  html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band {
    padding: 40px 0;
  }

  html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band > h2,
  html:root body:not(.home) #content .entry-content > .td-section.td-section > h2 {
    margin-bottom: 28px;
  }

  html:root body:not(.home) #content .entry-content > .td-gray-band.td-gray-band > h2::after,
  html:root body:not(.home) #content .entry-content > .td-section.td-section > h2::after {
    margin-top: 16px;
  }
}

/* 23b. Spacing: a band straight after a split intro sits 8px below it; white sections get 72px above and below and
   none of Astra's default group padding (.entry-content > .wp-block-group, ~48px all round). */
html:root body:not(.home) #content .entry-content > .td-split-intro + .td-gray-band.td-gray-band {
  margin-top: 8px;
}

html:root body #content .entry-content > .td-section {
  margin: 72px 0;
  max-width: none;
  padding: 0;
}

/* 23c. Feature cards in a gray band (td-feature-grid + td-check-bold): orange left bar + soft shadow, as Wireless's
   cards; the grid's own padding and type are unchanged. */
html:root body #content .td-gray-band > ul.td-feature-grid.td-check-bold {
  margin: 0;
  max-width: none;
}

html:root body #content .td-gray-band > ul.td-feature-grid.td-check-bold > li {
  border-left: 4px solid var(--td-orange);
  box-shadow: 0 1px 3px rgba(26, 29, 33, 0.06), 0 4px 12px rgba(26, 29, 33, 0.06);
}

/* 23d. td-fit: two "is this a fit" cards side by side (one column <=1000). --alt = the other option's card (orange bar, same as its sibling since 2026-11-03 §140; was gray #8a8f96).
   td-fit-note = the centred line under them. */
.td-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.td-fit__col {
  background: #fff;
  border: 1px solid #d3d7dc;
  border-left: 4px solid var(--td-orange);
  box-shadow: 0 1px 3px rgba(26, 29, 33, 0.06), 0 4px 12px rgba(26, 29, 33, 0.06);
  padding: 28px 32px 20px;
}

.td-fit__col--alt {
  border-left-color: var(--td-orange);
}

html:root body #content .td-fit__col h3 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.3;
}

.td-fit__col ul {
  margin: 0;
  padding: 0;
}

.td-fit__col li {
  margin: 0 0 10px;
}

html:root body #content .td-fit-note {
  margin: 26px auto 0;
  text-align: center;
  max-width: 820px;
}

.td-fit-note a {
  font-weight: 600;
}

/* 23e. td-step-cols > td-step: three icon + H3 + text steps (one column <=1000). Icon = decorative inline SVG
   (aria-hidden), stroke in brand orange. (td-steps, plural, is the older numbered-steps component; different look.) */
.td-step-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(32px, 4vw, 56px);
}

.td-step__icon {
  width: 44px;
  height: 44px;
  color: var(--td-orange);
  margin-bottom: 16px;
}

.td-step__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

html:root body #content .td-step h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
}

html:root body #content .td-step p {
  margin: 0;
}

/* 23f. td-faq-list: plain accordion of core Details blocks (class td-faq-list__item), hairlines between, orange +/-
   at the right. tandem-schema.php reads td-faq-list__item for FAQPage like Nationwide's td-faq__item (a different,
   older look; not reused). */
.td-faq-list {
  max-width: 860px;
  margin: 0 auto;
}

/* margin 0: the items are core Details blocks in a flow-layout group, which would add WP's 24px block gap. */
.td-faq-list details {
  margin: 0;
  border-bottom: 1px solid #d9dde3;
}

.td-faq-list details:first-of-type {
  border-top: 1px solid #d9dde3;
}

.td-faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-weight: 600;
  font-size: 18px;
}

.td-faq-list summary::-webkit-details-marker {
  display: none;
}

.td-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  color: var(--td-orange);
  line-height: 1;
}

.td-faq-list details[open] summary::after {
  content: "\2212";
}

html:root body #content .td-faq-list details p {
  margin: 0 0 22px;
  max-width: 760px;
}

@media (max-width: 1000px) {
  .td-step-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .td-fit {
    grid-template-columns: 1fr;
  }
}

/* 23g. ON-PREMISES REBUILD (2026-11-03, MANIFEST §130): the two rules the /On-Premises-Opus/ mockup added on top of
   23a-23f. td-band-note = a centred note paragraph under a gray band's feature grid (core paragraph, class td-band-note;
   the html:root body #content weight beats WP flow-layout block gap). Links inside td-step-cols steps are semibold, as td-fit-note's. */
html:root body #content .td-band-note {
  text-align: center;
  margin: 28px auto 0;
  max-width: none;
}

.td-step-cols a {
  font-weight: 600;
}