/* ============================================================
   LOOK: bold — "the confident crew that shows up"
   Light page, deep-color bands, truck-lettering condensed caps,
   sharp 4px corners, a skewed accent slab in the hero and two
   diagonal section edges that rhyme.
   Every rule is scoped to html[data-look="bold"].
   ============================================================ */
/* Shipped copy of docs/looks/bold.css (Hermes) -- demo colours removed, token blocks at :root:where() specificity, inner-page icon-badge squaring added; see tests/test_looks_registry.py */

/* ---------- 2. LOOK TOKENS (no literal brand hue below this line) -------- */
:root:where([data-look="bold"]) {
  /* type */
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --ocf-font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ocf-font-body: "Barlow", system-ui, sans-serif;

  --ocf-font-body-size: 18px;
  --font-body-size: 18px;
  --font-label-size: 16px;
  --font-button-size: 15px;
  --font-h1-size: clamp(42px, 5.4vw, 76px);
  --font-h2-size: clamp(30px, 3.4vw, 44px);
  --font-h3-size: 21px;
  --ocf-font-h1-size: clamp(42px, 5.4vw, 76px);
  --ocf-font-h2-size: clamp(30px, 3.4vw, 44px);
  --ocf-font-h3-size: 21px;
  --ocf-font-h1-weight: 700;
  --ocf-font-h2-weight: 700;
  --ocf-font-h3-weight: 700;
  --ocf-font-eyebrow-size: 13px;
  --ocf-font-eyebrow-weight: 700;

  /* shape: sharp everywhere */
  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 4px;
  --radius-full: 3px;
  --radius-input: 3px;
  --radius-outline: 2px;
  --image-radius: 4px;
  --card-radius: 4px;
  --card-radius-lg: 4px;
  --button-radius: 4px;

  /* borders / shadows: hard, flat, structural */
  --card-border-width: 1px;
  --card-border-color: var(--ocf-border);
  --card-border-color-subtle: var(--ocf-border-light);
  --card-shadow: none;
  --card-shadow-hover: 0 16px 30px -22px color-mix(in srgb, var(--ocf-heading) 70%, transparent);
  --card-transform-hover: translateY(-3px);
  --button-shadow: none;
  --button-shadow-hover: none;
  --button-transform-hover: none;
  --button-border-width: 0px;
  --button-text-transform: uppercase;
  --button-letter-spacing: 0.06em;
  --image-shadow: none;

  /* rhythm */
  --section-pad: clamp(3.75rem, 8vw, 5.5rem);
  --grid-gap: 1.5rem;

  /* look-local helpers */
  --bold-wedge: clamp(24px, 3.4vw, 56px);
  --bold-deep: color-mix(in srgb, var(--ocf-heading) 92%, #000);
  --bold-ink-on-dark: color-mix(in srgb, #fff 82%, transparent);
  --bold-rule-on-dark: color-mix(in srgb, #fff 16%, transparent);
  --bold-photo: contrast(1.08) saturate(1.1);
}

/* ---------- 3. TYPE ------------------------------------------------------ */
html[data-look="bold"] body {
  font-family: var(--ocf-font-body);
  font-size: 18px;
  line-height: 1.62;
  font-weight: 400;
  color: var(--ocf-body);
  -webkit-font-smoothing: antialiased;
}

html[data-look="bold"] h1,
html[data-look="bold"] h2,
html[data-look="bold"] h3,
html[data-look="bold"] h4,
html[data-look="bold"] .heading-1,
html[data-look="bold"] .heading-2,
html[data-look="bold"] .heading-3 {
  font-family: var(--ocf-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

html[data-look="bold"] h1,
html[data-look="bold"] .heading-1,
html[data-look="bold"] .ocf-hero__headline {
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 0.97;
}
html[data-look="bold"] h2,
html[data-look="bold"] .heading-2,
html[data-look="bold"] .ocf-about__headline,
html[data-look="bold"] .ocf-cta__headline {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
}
html[data-look="bold"] h3,
html[data-look="bold"] .heading-3 {
  font-size: 21px;
  line-height: 1.12;
}

/* eyebrows come back on screen: uppercase body-face, wide tracking */
html[data-look="bold"] .eyebrow,
html[data-look="bold"] .ocf-about__eyebrow,
html[data-look="bold"] .ocf-cta__eyebrow {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0 0.7rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  display: inline-flex;
  border: 0;
  font-family: var(--ocf-font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocf-primary);
}
html[data-look="bold"] .eyebrow::before { content: none; }

/* short thick accent bar under every section heading */
html[data-look="bold"] .eyebrow + h2::after,
html[data-look="bold"] .eyebrow + h3::after,
html[data-look="bold"] .ocf-about__eyebrow + .ocf-about__headline::after,
html[data-look="bold"] .ocf-cta__eyebrow + .ocf-cta__headline::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-top: 16px;
  border-radius: 0;
  background: var(--ocf-primary);
}

/* ---------- 4. BUTTONS: rectangular, uppercase, hard bottom edge --------- */
html[data-look="bold"] .btn-primary,
html[data-look="bold"] .nav-cta,
html[data-look="bold"] .mobile-cta,
html[data-look="bold"] .ultimate-b1-btn,
html[data-look="bold"] .hero-form-card .form-submit-btn {
  border-radius: 4px !important;
  border-bottom: 3px solid var(--ocf-primary-hover);
  box-shadow: none;
  font-family: var(--ocf-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
html[data-look="bold"] .btn-primary:hover,
html[data-look="bold"] .btn-primary:focus-visible,
html[data-look="bold"] .nav-cta:hover,
html[data-look="bold"] .mobile-cta:hover,
html[data-look="bold"] .ultimate-b1-btn:hover,
html[data-look="bold"] .ultimate-b1-btn:focus-visible,
html[data-look="bold"] .hero-form-card .form-submit-btn:hover,
html[data-look="bold"] .hero-form-card .form-submit-btn:focus-visible {
  box-shadow: none;
  transform: none;
  background: var(--ocf-primary-hover);
  border-bottom-color: color-mix(in srgb, var(--ocf-primary-hover) 55%, #000);
}
html[data-look="bold"] .btn-lg {
  min-height: 3.25rem;
  padding-inline: 1.75rem;
  font-size: 16px;
}

html[data-look="bold"] .btn-secondary {
  border-radius: 4px;
  border: 2px solid var(--ocf-heading);
  color: var(--ocf-heading);
  background: transparent;
  font-family: var(--ocf-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 3rem;
}
html[data-look="bold"] .btn-secondary:hover,
html[data-look="bold"] .btn-secondary:focus-visible {
  transform: none;
  color: var(--ocf-primary-contrast);
  background: var(--ocf-heading);
  border-color: var(--ocf-heading);
}

html[data-look="bold"] a:focus-visible,
html[data-look="bold"] button:focus-visible,
html[data-look="bold"] input:focus-visible,
html[data-look="bold"] textarea:focus-visible {
  outline: 3px solid var(--ocf-primary);
  outline-offset: 2px;
}

/* ---------- 5. NAV ------------------------------------------------------- */
html[data-look="bold"] .nav-bar,
html[data-look="bold"] .nav-bar.is-condensed {
  background: var(--ocf-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 4px solid var(--ocf-primary);
  border-bottom: 1px solid var(--ocf-border);
  box-shadow: none;
}
html[data-look="bold"] .nav-logo-text {
  font-family: var(--ocf-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 24px;
  color: var(--ocf-heading);
}
html[data-look="bold"] .nav-link,
html[data-look="bold"] .nav-dropdown-trigger {
  font-family: var(--ocf-font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="bold"] .nav-link:hover,
html[data-look="bold"] .nav-dropdown-trigger:hover { color: var(--ocf-primary); }
html[data-look="bold"] .nav-phone {
  font-family: var(--ocf-font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ocf-heading);
}
html[data-look="bold"] .nav-cta {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}
html[data-look="bold"] .nav-dropdown-panel .dropdown-menu {
  border-radius: 4px;
  border: 1px solid var(--ocf-border);
}
html[data-look="bold"] .dropdown-item {
  font-family: var(--ocf-font-body);
  font-weight: 500;
  border-radius: 2px;
}

/* ---------- 6. HERO ------------------------------------------------------ */
html[data-look="bold"] .ocf-hero {
  overflow: hidden; /* also stops the skewed slab creating page-wide scroll */
  margin-bottom: 0;
  background: var(--ocf-bg);
  /* bottom edge cut on a diagonal — services slides in under it */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bold-wedge)), 0 100%);
  /* 2026-09-07 (hero-fit): the active skin's generic rule
     `[data-skin] section { padding: var(--section-pad) 0; }` (skin.css)
     stacks a SECOND layer of vertical padding on this <section
     class="ocf-section ocf-hero">, on top of the internal rhythm
     hero.css's own `.ocf-hero .ocf-hero__grid` rule already applies via
     padding-block. Bold's own --section-pad token (block 2 above) is
     taller than the default, so that stacked outer padding alone added
     176px on real customer copy, on top of a taller-than-reference
     condensed-caps text column, and pushed the whole band past its
     min-height floor (935px measured vs the reference's 828px). Cancel
     the redundant outer layer here so the hero's height is governed
     solely by hero.css's own internal grid rhythm + min-height floor,
     matching the reference band height again. */
  padding-block: 0;
}

html[data-look="bold"] .ocf-hero__media img {
  filter: var(--bold-photo);
}

/* heavier, directional scrim from the left */
html[data-look="bold"] .ocf-hero__shade {
  opacity: 1;
  background:
    linear-gradient(
      93deg,
      color-mix(in srgb, var(--ocf-heading) 66%, transparent) 0%,
      color-mix(in srgb, var(--ocf-heading) 62%, transparent) 40%,
      color-mix(in srgb, var(--ocf-heading) 44%, transparent) 62%,
      color-mix(in srgb, var(--ocf-heading) 26%, transparent) 82%,
      color-mix(in srgb, var(--ocf-heading) 14%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, #000 36%, transparent) 0%,
      color-mix(in srgb, #000 14%, transparent) 45%,
      color-mix(in srgb, #000 44%, transparent) 100%
    );
}

/* SIGNATURE: the skewed accent slab — a work-truck stripe behind the copy */
html[data-look="bold"] .ocf-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -12%;
  bottom: -12%;
  left: -16%;
  width: 66%;
  transform: skewX(-8deg);
  /* not opaque: the roofline still reads faintly through the slab */
  background: color-mix(in srgb, color-mix(in srgb, var(--ocf-heading) 18%, #000) 74%, transparent);
  border-right: 12px solid var(--ocf-primary);
  pointer-events: none;
}
html[data-look="bold"] .ocf-hero__grid {
  position: relative;
  z-index: 2;
  /* hero.css's own grid row uses align-items: start (each column keeps
     its own top edge) -- Bold's condensed-caps text column and the
     lead-form card are rarely the same height, so start-aligning left
     the shorter card sitting high in the row. Center them on each
     other so both track the band's own vertical middle. */
  align-items: center;
}
/* hero.css also sets `align-self: start` directly on the form column
   (.ocf-hero__form), which wins over the container's align-items above
   on that item specifically -- override it too or the card stays
   pinned to the row's top edge. */
html[data-look="bold"] .ocf-hero__form {
  align-self: center;
}
html[data-look="bold"] .ocf-hero__content {
  max-width: 600px;
}

/* rating chip: squared, heavier border */
html[data-look="bold"] .ocf-hero__rating {
  border-radius: 2px;
  padding: 0.5rem 0.9rem;
  border: 2px solid color-mix(in srgb, #fff 34%, transparent);
  background: color-mix(in srgb, #000 34%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 0.5rem;
}
html[data-look="bold"] .ocf-hero__rating-value {
  font-family: var(--ocf-font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
}
html[data-look="bold"] .ocf-hero__rating-label {
  font-family: var(--ocf-font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
}

html[data-look="bold"] .ocf-hero__intro {
  font-size: 19px;
  line-height: 1.55;
  max-width: 34ch;
  color: color-mix(in srgb, #fff 88%, transparent);
}

/* square accent check boxes */
html[data-look="bold"] .ocf-hero__checks {
  gap: 0.6rem;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}
html[data-look="bold"] .ocf-hero__checks li > svg {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0.28rem;
  box-sizing: border-box;
  border-radius: 2px;
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
}
html[data-look="bold"] .ocf-hero__checks li > span {
  color: color-mix(in srgb, #fff 92%, transparent);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.07em;
  font-weight: 600;
}

/* rating badge (templates/ultimate's .ultimate-hero-stats): the ultimate
   pack straddles the hero's bottom edge (bottom: -2.75rem, .ocf-hero gets
   a matching margin-bottom for room to sit half in / half out). Bold's
   own hero (block 6 above) sets margin-bottom: 0 and overflow: hidden
   -- needed so the skewed slab doesn't create page-wide scroll -- so the
   straddling half gets clipped away and only a sliver shows. Bold also
   diagonally clips the hero's bottom-right (clip-path polygon in block 6);
   the bottom-LEFT stays at full band height, so pull the badge fully
   inside the hero and pin it there, square and bordered like the rest of
   Bold's chrome, instead of letting it hang off the edge. Band height is
   untouched -- only this card's own position/size changes. PHP only ever
   emits this block when a real stat exists, so absent-stats stays a
   no-op here too. */
html[data-look="bold"] .ultimate-hero-stats {
  left: var(--container-pad);
  right: auto;
  bottom: 1.5rem;
  max-width: 15rem;
  margin: 0;
  justify-content: flex-start;
  gap: 1.3rem;
  padding: 0.75rem 1.15rem 0.7rem;
  border-radius: 0;
  border: 2px solid var(--ocf-primary);
  box-shadow: 0 18px 34px -22px color-mix(in srgb, #000 70%, transparent);
  z-index: 3;
}

/* Mobile: hero grid constrains to calc(100vw - 2rem) so left offset = 1rem */
@media (max-width: 720px) {
  html[data-look="bold"] .ultimate-hero-stats {
    left: 1rem;
  }
}
html[data-look="bold"] .ultimate-hero-stat__num {
  font-family: var(--ocf-font-heading);
  font-weight: 800;
  letter-spacing: 0.01em;
}
html[data-look="bold"] .ultimate-hero-stat__label {
  font-family: var(--ocf-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocf-body);
}

/* ---------- 7. HERO FORM CARD ------------------------------------------- */
html[data-look="bold"] .hero-form-card {
  border-radius: 0;
  border: 1px solid var(--ocf-border);
  border-top: 4px solid var(--ocf-primary);
  background: var(--ocf-bg);
  box-shadow: 0 30px 60px -34px color-mix(in srgb, #000 90%, transparent);
  padding: 1.65rem 1.5rem 1.5rem;
}
html[data-look="bold"] .hero-form-card .hero-form-title {
  font-family: var(--ocf-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 28px;
  line-height: 1.05;
  margin-bottom: 1rem;
  color: var(--ocf-heading);
}
html[data-look="bold"] .ultimate-f1-field input,
html[data-look="bold"] .ultimate-f1-field textarea,
html[data-look="bold"] .hero-form-card input,
html[data-look="bold"] .hero-form-card textarea {
  border-radius: 3px !important;
  border: 1px solid var(--ocf-border) !important;
  background: var(--ocf-bg-alt) !important;
  font-family: var(--ocf-font-body);
}
html[data-look="bold"] .ultimate-f1-field label {
  font-family: var(--ocf-font-body);
  font-weight: 500;
}
html[data-look="bold"] .hero-form-card .form-submit-btn {
  min-height: 3.1rem;
  font-size: 16px;
}
html[data-look="bold"] .ocf-form-secure-note {
  font-family: var(--ocf-font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- 8. SERVICES -------------------------------------------------- */
html[data-look="bold"] .ocf-services { background: var(--ocf-bg); }

html[data-look="bold"] .ocf-svc-card {
  position: relative;
  border-radius: 0;
  border: 1px solid var(--ocf-border);
  box-shadow: none;
  background: var(--ocf-bg);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
html[data-look="bold"] .ocf-svc-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--ocf-primary);
  transform: scaleX(0.16);
  transform-origin: left center;
  transition: transform 280ms var(--ease);
}
html[data-look="bold"] .ocf-svc-card:hover::after,
html[data-look="bold"] .ocf-svc-card:focus-within::after { transform: scaleX(1); }
html[data-look="bold"] .ocf-svc-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ocf-heading) 30%, var(--ocf-border));
  box-shadow: 0 18px 34px -26px color-mix(in srgb, var(--ocf-heading) 80%, transparent);
}
html[data-look="bold"] .ocf-svc-card-img { border-radius: 0; }
html[data-look="bold"] .ocf-svc-card-img img { border-radius: 0; filter: var(--bold-photo); }
html[data-look="bold"] .ocf-svc-card-body { padding: 1.3rem 1.35rem 1.45rem; }
html[data-look="bold"] .ocf-svc-card-body h3 {
  font-family: var(--ocf-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 23px;
  line-height: 1.05;
  padding-bottom: 0;
}
html[data-look="bold"] .ocf-svc-card-body h3::after { display: none; content: none; }
html[data-look="bold"] .ocf-svc-card-body p { font-size: 15.5px; line-height: 1.6; }

html[data-look="bold"] .ocf-svc-card-cta {
  border-top: 1px solid var(--ocf-border-light);
  font-family: var(--ocf-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ocf-primary);
  padding-top: 1rem;
}
html[data-look="bold"] .ocf-svc-arrow {
  position: relative;
  width: auto;
  height: 1.1rem;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ocf-primary);
  padding-left: 2.1rem;
}
html[data-look="bold"] .ocf-svc-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.9rem;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: width 260ms var(--ease), left 260ms var(--ease);
}
html[data-look="bold"] .ocf-svc-arrow svg { width: 1.1rem; height: 1.1rem; }
html[data-look="bold"] .ocf-svc-card:hover .ocf-svc-arrow::before { width: 2.4rem; left: 0.3rem; }
html[data-look="bold"] .ocf-svc-card:hover .ocf-svc-arrow { transform: none; }

html[data-look="bold"] .ocf-svc-nav button {
  border-radius: 0;
  border: 2px solid var(--ocf-heading);
  color: var(--ocf-heading);
  background: var(--ocf-bg);
  height: 2.75rem;
  width: 2.75rem;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
html[data-look="bold"] .ocf-svc-nav button:hover:not(:disabled) {
  background: var(--ocf-heading);
  color: var(--ocf-bg);
}
html[data-look="bold"] .ocf-svc-nav button:disabled { opacity: 0.3; }

/* ---------- 9. ABOUT ----------------------------------------------------- */
html[data-look="bold"] .ocf-about {
  background: var(--ocf-bg-alt);
  --about-check-color: var(--ocf-primary);
  --about-check-mark-color: var(--ocf-primary-contrast);
}
html[data-look="bold"] .ocf-about__media {
  border-radius: 0;
  border: 0;
  border-bottom: 6px solid var(--ocf-primary);
  box-shadow: none;
  background: transparent;
}
html[data-look="bold"] .ocf-about__media img {
  border-radius: 0;
  filter: var(--bold-photo);
}
html[data-look="bold"] .ocf-about__body li::before {
  border-radius: 2px;
  height: 1.5rem;
  width: 1.5rem;
  top: 0.15em;
}
html[data-look="bold"] .ocf-about__body li::after {
  left: 0.38rem;
  top: calc(0.15em + 0.44rem);
  height: 0.4rem;
  width: 0.7rem;
  border-bottom-width: 0.16rem;
  border-left-width: 0.16rem;
}
html[data-look="bold"] .ocf-about__body li { padding-left: 2.5rem; }
html[data-look="bold"] .ocf-about__body strong { letter-spacing: 0.005em; }

/* ---------- 10. COMMITMENTS: the deep band ------------------------------- */
html[data-look="bold"] .ocf-commitments {
  background: var(--bold-deep);
  color: var(--ocf-dark-body);
}
html[data-look="bold"] .ocf-commitments .eyebrow {
  color: color-mix(in srgb, var(--ocf-primary) 42%, #fff);
}
html[data-look="bold"] .ocf-commitments .heading-2,
html[data-look="bold"] .ocf-commitments h2,
html[data-look="bold"] .ocf-commitments h3 {
  color: var(--ocf-dark-heading);
}
html[data-look="bold"] .ocf-commitments .eyebrow + h2::after {
  background: var(--ocf-primary);
}
html[data-look="bold"] .ocf-commitments-description,
html[data-look="bold"] .ocf-commitments .text-body {
  color: var(--bold-ink-on-dark);
}
html[data-look="bold"] .ocf-commitments .ocf-commitment p {
  color: color-mix(in srgb, #fff 66%, transparent);
}
html[data-look="bold"] .ocf-commitments .ocf-commitment-num {
  border-radius: 2px;
  border: 0;
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
  font-family: var(--ocf-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  inline-size: 2.5rem;
  block-size: 2.5rem;
}
html[data-look="bold"] .ocf-commitments .ocf-commitment h3 {
  font-family: var(--ocf-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 22px;
  margin-bottom: 0.3rem;
}
html[data-look="bold"] .ocf-commitments .ocf-commitment + .ocf-commitment {
  border-top-color: var(--bold-rule-on-dark);
}
html[data-look="bold"] .ocf-commitments .ocf-commitment:not(:last-child)::before {
  border-left-color: var(--bold-rule-on-dark);
}
html[data-look="bold"] .ocf-commitments .ocf-commitment:not(:last-child)::after {
  background: var(--bold-rule-on-dark);
}
html[data-look="bold"] .ocf-commitments-image {
  border-radius: 0;
  border: 4px solid var(--ocf-primary);
  box-shadow: none;
  background: transparent;
}
html[data-look="bold"] .ocf-commitments-image img { filter: var(--bold-photo); }

/* ---------- 11. SERVICE AREAS -------------------------------------------- */
html[data-look="bold"] .ocf-service-areas { background: var(--ocf-bg); }
html[data-look="bold"] .ocf-service-areas__map {
  border-radius: 0;
  border: 0;
  border-left: 6px solid var(--ocf-primary);
  background: var(--ocf-bg-alt);
  min-height: 28rem;
  /* survey-paper grid so the panel is never a dead grey box */
  background-image:
    linear-gradient(color-mix(in srgb, var(--ocf-heading) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ocf-heading) 7%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--ocf-heading) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ocf-heading) 4%, transparent) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
/* the mock map resolves to 0px tall (percentage height with no parent
   height), which hides its own pin + label — give it a real height */
html[data-look="bold"] .mock-map {
  background: transparent;
  height: 28rem;
  min-height: 28rem;
}
html[data-look="bold"] .mock-map__grid { opacity: 0.5; }
html[data-look="bold"] .mock-map__pin { color: var(--ocf-primary); }
html[data-look="bold"] .mock-map__label {
  border-radius: 2px;
  font-family: var(--ocf-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  box-shadow: none;
  border: 1px solid var(--ocf-border);
  color: var(--ocf-heading);
}
html[data-look="bold"] .ocf-service-areas .ocf-service-areas__links {
  gap: 0.7rem 1rem;
}
html[data-look="bold"] .ocf-service-areas .ocf-service-areas__link {
  font-family: var(--ocf-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ocf-heading);
  gap: 0.6rem;
}
html[data-look="bold"] .ocf-service-areas__link-icon {
  width: 1.2rem;
  height: 1.2rem;
  padding: 0.16rem;
  box-sizing: border-box;
  border: 2px solid var(--ocf-primary);
  color: var(--ocf-primary);
  border-radius: 0;
}
html[data-look="bold"] .ocf-service-areas .ocf-service-areas__link:hover .ocf-service-areas__link-icon {
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
}
html[data-look="bold"] .ocf-service-areas__text { max-width: 52ch; }

/* ---------- 12. FAQ ------------------------------------------------------ */
html[data-look="bold"] .ocf-faq { background: var(--ocf-bg-alt); }
html[data-look="bold"] .ocf-faq-columns { gap: 0.75rem; }
html[data-look="bold"] .ocf-faq-column { gap: 0.75rem; }
html[data-look="bold"] .ocf-faq-item,
html[data-look="bold"] .ocf-faq-column .ocf-faq-item:first-child {
  border-radius: 0;
  border: 1px solid var(--ocf-border-light);
  border-left: 4px solid var(--ocf-primary);
  background: var(--ocf-bg);
  box-shadow: none;
  padding: 1.05rem 1.25rem;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
html[data-look="bold"] .ocf-faq-item:hover,
html[data-look="bold"] .ocf-faq-item.is-open {
  box-shadow: none;
  background: var(--ocf-bg);
  border-color: var(--ocf-border);
  border-left-color: var(--ocf-primary);
}
html[data-look="bold"] .ocf-faq-trigger {
  font-family: var(--ocf-font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.005em;
  color: var(--ocf-heading);
}
html[data-look="bold"] .ocf-faq-icon {
  border-radius: 2px;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.35rem;
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
}
html[data-look="bold"] .ocf-faq-answer p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ocf-body);
}

/* ---------- 13. CTA: full-width accent band with a diagonal top ---------- */
html[data-look="bold"] .ocf-cta {
  background: var(--ocf-primary) !important;
  border-top: 0;
  overflow: visible;
  position: relative;
  padding-block: clamp(3.25rem, 6vw, 4.5rem);
  --cta-headline-color: var(--ocf-primary-contrast);
  --cta-body-color: color-mix(in srgb, #fff 88%, transparent);
  --cta-eyebrow-color: var(--ocf-primary-contrast);
}
/* the wedge rhymes with the hero's bottom cut, painted over the FAQ band */
html[data-look="bold"] .ocf-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--bold-wedge));
  height: var(--bold-wedge);
  background: var(--ocf-primary);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
html[data-look="bold"] .ocf-cta .ocf-cta__panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
html[data-look="bold"] .ocf-cta .ocf-cta__inner { padding: 0; }
html[data-look="bold"] .ocf-cta .ocf-cta__eyebrow {
  color: color-mix(in srgb, #fff 78%, transparent);
}
html[data-look="bold"] .ocf-cta .ocf-cta__eyebrow + .ocf-cta__headline::after {
  background: var(--ocf-primary-contrast);
}
html[data-look="bold"] .ocf-cta .ocf-cta__body {
  color: color-mix(in srgb, #fff 86%, transparent);
}
html[data-look="bold"] .ocf-cta .btn-primary {
  background: var(--ocf-bg);
  color: var(--ocf-primary);
  border-bottom-color: color-mix(in srgb, #000 22%, var(--ocf-bg));
}
html[data-look="bold"] .ocf-cta .btn-primary:hover,
html[data-look="bold"] .ocf-cta .btn-primary:focus-visible {
  background: var(--ocf-bg);
  color: var(--ocf-primary-hover);
  border-bottom-color: color-mix(in srgb, #000 38%, var(--ocf-bg));
}
html[data-look="bold"] .ocf-cta .ocf-cta__phone {
  border-radius: 4px;
  border: 2px solid color-mix(in srgb, #fff 58%, transparent);
  color: var(--ocf-primary-contrast);
  background: transparent;
  font-family: var(--ocf-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  min-height: 3.25rem;
  padding-inline: 1.5rem;
}
html[data-look="bold"] .ocf-cta .ocf-cta__phone:hover,
html[data-look="bold"] .ocf-cta .ocf-cta__phone:focus-visible {
  background: color-mix(in srgb, #fff 14%, transparent);
  border-color: var(--ocf-primary-contrast);
  color: var(--ocf-primary-contrast);
  text-decoration: none;
}
html[data-look="bold"] .ocf-cta .ocf-cta__phone strong {
  color: var(--ocf-primary-contrast);
}

/* ---------- 14. FOOTER --------------------------------------------------- */
:root:where([data-look="bold"]) {
  --ocf-footer-bg: var(--bold-deep);
  --ocf-footer-heading: #ffffff;
  --ocf-footer-body: color-mix(in srgb, #ffffff 62%, transparent);
}
html[data-look="bold"] .site-footer {
  border-top: 0;
  padding-top: 3.5rem;
}
html[data-look="bold"] .site-footer::before { display: none; content: none; }
html[data-look="bold"] .footer-brand-name {
  font-family: var(--ocf-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 24px;
  color: #fff;
}
html[data-look="bold"] .footer-heading {
  font-family: var(--ocf-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 16px;
  color: #fff;
}
html[data-look="bold"] .footer-link-list a,
html[data-look="bold"] .footer-contact-links a,
html[data-look="bold"] .footer-address,
html[data-look="bold"] .footer-brand-desc {
  font-family: var(--ocf-font-body);
  font-size: 15.5px;
}
html[data-look="bold"] .footer-bottom {
  border-top: 2px solid var(--ocf-primary);
  font-size: 14px;
  letter-spacing: 0.03em;
}
html[data-look="bold"] .footer-bottom-links a {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 13px;
}

/* ---------- 15. MOBILE --------------------------------------------------- */
@media (max-width: 900px) {
  html[data-look="bold"] .ocf-hero__content { max-width: none; }
  /* stacked hero: the slab becomes an angled accent block in the top corner,
     clear of every line of type, and the photo stays visible under a scrim */
  html[data-look="bold"] .ocf-hero::after {
    top: -32px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 150px;
    transform: none;
    background: var(--ocf-primary);
    border-right: 0;
    /* bottom edge rises to the right — same slope as the hero's own cut */
    clip-path: polygon(0 0, 100% 0, 100% 58%, 0 100%);
  }
  html[data-look="bold"] .ocf-hero__shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocf-heading) 52%, transparent) 0%,
        color-mix(in srgb, var(--ocf-heading) 74%, transparent) 34%,
        color-mix(in srgb, var(--ocf-heading) 80%, transparent) 100%
      ),
      linear-gradient(0deg, color-mix(in srgb, #000 30%, transparent), color-mix(in srgb, #000 30%, transparent));
  }
  html[data-look="bold"] .ocf-hero__intro { max-width: none; }
}

@media (max-width: 640px) {
  html[data-look="bold"] .ocf-svc-nav button { height: 2.5rem; width: 2.5rem; }
  html[data-look="bold"] .hero-form-card { padding: 1.25rem 1.1rem 1.2rem; }
  html[data-look="bold"] .ocf-cta .ocf-cta__phone { width: 100%; justify-content: center; }
  html[data-look="bold"] .ocf-cta .btn-primary { width: 100%; }
}

/* ---------- 16. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-look="bold"] .ocf-svc-card,
  html[data-look="bold"] .ocf-svc-card::after,
  html[data-look="bold"] .ocf-svc-arrow::before,
  html[data-look="bold"] .ocf-svc-nav button,
  html[data-look="bold"] .btn-primary,
  html[data-look="bold"] .btn-secondary,
  html[data-look="bold"] .ocf-faq-item {
    transition: none !important;
  }
  html[data-look="bold"] .ocf-svc-card:hover { transform: none !important; }
  html[data-look="bold"] .ocf-svc-card::after { transform: scaleX(1) !important; }
}

/* ---------- 17. INNER PAGES: service/area/about/contact/sitemap --------- */
/* Structural shape (card radius, image radius, FAQ items, buttons, h1-h3
   typography) already inherits everywhere via the shared --card-radius /
   --image-radius / --radius-* / --ocf-font-heading tokens set in block 2
   above, plus the class rules in blocks 3-13 above, which target shared
   component classes (.ocf-svc-card, .ocf-faq-item, .btn-primary,
   .btn-secondary, .ocf-cta, h1-h3) reused unchanged on the archive/detail/
   about/contact/sitemap page templates. Only these two icon badges are
   hardcoded to a circle (border-radius: 50%) rather than a token, so they
   are the one place that needs an explicit square-corner rule to match the
   home page's own squared icon treatment (.ocf-faq-icon, hero check icons,
   service-areas link icon, all squared in blocks above). */
html[data-look="bold"] .ocf-services-help-card__icon,
html[data-look="bold"] .ocf-service-areas-archive__contact-icon {
  border-radius: 2px;
}

/* Page-header (service/area/about/contact/sitemap banner) eyebrow/breadcrumb
   line hardcodes letter-spacing: 0 in its own component CSS -- match the
   wide tracking every other Bold eyebrow uses (block 3 above). */
html[data-look="bold"] .ocf-page-header__eyebrow {
  letter-spacing: 0.14em;
}