/* ============================================================
   LOOK: craftsman -- "the trusted family business"
   Warm, hand-built, down-to-earth, still premium.
   Every rule is scoped to html[data-look="craftsman"].
   Colours come from tokens everywhere except the demo block below.
   ============================================================ */
/* Shipped copy of docs/looks/craftsman.css (Hermes) -- demo colours removed, token blocks at :root:where() specificity; see tests/test_looks_registry.py */

/* ---- 2. MATERIAL: derived colour, shape, shadow, type tokens ---- */
:root:where([data-look="craftsman"]) {
  /* warm brown-black used for scrims, footer, and every shadow */
  --craft-ink: color-mix(in srgb, var(--color-heading) 88%, #000);
  /* the scrim keeps a little more brown in it than the shadows do */
  --craft-scrim: color-mix(in srgb, var(--color-heading) 62%, #241503);
  /* the "paper" a card is cut from: the page ground pulled toward white */
  --craft-paper: color-mix(in srgb, var(--color-bg) 42%, #fff);
  --craft-hair: var(--color-border);
  --craft-shadow-soft: 0 1px 2px color-mix(in srgb, var(--craft-ink) 5%, transparent);
  --craft-shadow-lift: 0 0.75rem 1.6rem -0.85rem color-mix(in srgb, var(--craft-ink) 26%, transparent);

  /* dark-surface text: warm, never cool grey. NOTE: this look never
     declares --color-bg-dark (G4a -- no --color-* declarations of any
     kind, even a derived/non-literal one); the one Ultimate-visible
     consumer of that token, the sitewide .cta-band (parts/cta-band.php,
     rendered from footer.php on every page but /contact/), gets its own
     scoped override below in section 8 instead, reading --craft-ink
     directly. */
  --ocf-heading-alt: color-mix(in srgb, var(--color-bg) 55%, #fff);
  --ocf-body-alt: color-mix(in srgb, var(--color-bg) 88%, var(--color-heading));

  /* fonts */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --ocf-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ocf-font-body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --craft-font-sc: 'Alegreya Sans SC', 'Alegreya Sans', system-ui, sans-serif;

  /* type scale */
  --font-h1-size: clamp(38px, 4.7vw, 62px);
  --font-h2-size: clamp(29px, 3.15vw, 41px);
  --font-h3-size: 21px;
  --font-body-size: 19px;
  --ocf-font-body-size: 19px;
  --font-label-size: 17.5px;
  --font-button-size: 16px;
  --ocf-font-h1-size: var(--font-h1-size);
  --ocf-font-h2-size: var(--font-h2-size);
  --ocf-font-h3-size: var(--font-h3-size);
  --ocf-font-h1-weight: 600;
  --ocf-font-h2-weight: 600;
  --ocf-font-h3-weight: 600;

  /* shapes: soft + rounded */
  --card-radius: 20px;
  --card-radius-lg: 24px;
  --radius: 14px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --radius-input: 12px;
  --radius-outline: 999px;
  --button-radius: 999px;
  --image-radius: 18px;

  /* hairlines instead of shadows */
  --card-border-width: 1px;
  --card-border-color: var(--color-border);
  --card-border-color-subtle: var(--color-border-light);
  --card-shadow: var(--craft-shadow-soft);
  --card-shadow-hover: var(--craft-shadow-lift);
  --card-transform-hover: translateY(-3px);
  --image-shadow: none;
  --button-shadow: 0 0.4rem 0.9rem -0.35rem color-mix(in srgb, var(--craft-ink) 30%, transparent);
  --button-shadow-hover: 0 0.7rem 1.3rem -0.4rem color-mix(in srgb, var(--craft-ink) 34%, transparent);
  --button-transform-hover: translateY(-2px);

  /* rhythm */
  --section-pad: clamp(4rem, 8.5vw, 5.75rem);
  --container-max: 1240px;
  --grid-gap: 1.5rem;

  /* hero scrim: warm brown, anchored bottom-left, sunlit top-right */
  --gradient-hero-dark:
    linear-gradient(101deg,
      color-mix(in srgb, var(--craft-scrim) 90%, transparent) 0%,
      color-mix(in srgb, var(--craft-scrim) 80%, transparent) 28%,
      color-mix(in srgb, var(--craft-scrim) 52%, transparent) 52%,
      color-mix(in srgb, var(--craft-scrim) 20%, transparent) 76%,
      color-mix(in srgb, var(--craft-scrim) 3%, transparent) 100%),
    radial-gradient(105% 125% at -4% 112%,
      color-mix(in srgb, var(--craft-scrim) 74%, transparent) 0%,
      color-mix(in srgb, var(--craft-scrim) 34%, transparent) 44%,
      transparent 74%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--craft-scrim) 10%, transparent) 0%,
      transparent 38%,
      color-mix(in srgb, var(--craft-scrim) 30%, transparent) 100%);
}

/* ---- 3. TYPE ---- */
html[data-look="craftsman"] body {
  font-family: var(--ocf-font-body);
  font-size: var(--font-body-size);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
html[data-look="craftsman"] h1,
html[data-look="craftsman"] h2,
html[data-look="craftsman"] h3,
html[data-look="craftsman"] h4,
html[data-look="craftsman"] .heading-1,
html[data-look="craftsman"] .heading-2,
html[data-look="craftsman"] .heading-3 {
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-look="craftsman"] h1,
html[data-look="craftsman"] .heading-1 {
  font-size: var(--font-h1-size);
  line-height: 1.06;
  font-variation-settings: 'opsz' 120;
}
html[data-look="craftsman"] h2,
html[data-look="craftsman"] .heading-2 {
  font-size: var(--font-h2-size);
  line-height: 1.12;
  font-variation-settings: 'opsz' 96;
}
html[data-look="craftsman"] h3,
html[data-look="craftsman"] .heading-3 {
  font-size: var(--font-h3-size);
  line-height: 1.25;
  font-variation-settings: 'opsz' 30;
}
html[data-look="craftsman"] p,
html[data-look="craftsman"] li,
html[data-look="craftsman"] .text-body {
  font-weight: 400;
}
html[data-look="craftsman"] strong,
html[data-look="craftsman"] b { font-weight: 700; }

/* Eyebrows come BACK into view on this look: small caps + an ochre dash.
   (The shipped look clips them and draws a bar under the h2 instead.) */
html[data-look="craftsman"] .eyebrow,
html[data-look="craftsman"] .ocf-about__eyebrow,
html[data-look="craftsman"] .ocf-cta__eyebrow {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0 0.9rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--craft-font-sc);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: none;
  line-height: 1.2;
  color: var(--ocf-primary);
}
html[data-look="craftsman"] .eyebrow::before,
html[data-look="craftsman"] .ocf-about__eyebrow::before,
html[data-look="craftsman"] .ocf-cta__eyebrow::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ocf-secondary);
}
/* the eyebrow is the opener now, so the bar under the h2 goes away */
html[data-look="craftsman"] .eyebrow + h2::after,
html[data-look="craftsman"] .eyebrow + h3::after,
html[data-look="craftsman"] .ocf-about__eyebrow + .ocf-about__headline::after,
html[data-look="craftsman"] .ocf-cta__eyebrow + .ocf-cta__headline::after {
  content: none;
}

/* ---- 4. BUTTONS ---- */
html[data-look="craftsman"] .btn-primary,
html[data-look="craftsman"] .btn-secondary,
html[data-look="craftsman"] .nav-cta,
html[data-look="craftsman"] .mobile-cta,
html[data-look="craftsman"] .hero-form-card .form-submit-btn {
  font-family: var(--ocf-font-body);
  font-weight: 700;
  letter-spacing: 0.012em;
  border-radius: var(--radius-full) !important;
}
html[data-look="craftsman"] .btn-primary,
html[data-look="craftsman"] .btn-lg {
  padding-inline: 1.5rem;
}
html[data-look="craftsman"] .btn-secondary {
  color: var(--ocf-primary);
  border: 1px solid color-mix(in srgb, var(--ocf-primary) 42%, var(--ocf-border));
  background: color-mix(in srgb, var(--ocf-bg) 45%, #fff);
  padding-inline: 1.4rem;
}
html[data-look="craftsman"] .btn-secondary:hover,
html[data-look="craftsman"] .btn-secondary:focus-visible {
  background: color-mix(in srgb, var(--ocf-primary) 9%, var(--ocf-bg));
  border-color: var(--ocf-primary);
  color: var(--ocf-primary);
}
html[data-look="craftsman"] a:focus-visible,
html[data-look="craftsman"] button:focus-visible,
html[data-look="craftsman"] input:focus-visible,
html[data-look="craftsman"] textarea:focus-visible {
  outline: 2px solid var(--ocf-primary);
  outline-offset: 3px;
}

/* ---- 5. NAV: warm hairline, no glass shadow ---- */
html[data-look="craftsman"] .nav-bar {
  background: color-mix(in srgb, var(--ocf-bg) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ocf-border) 75%, transparent);
  box-shadow: none;
}
html[data-look="craftsman"] .nav-bar.is-condensed {
  background: color-mix(in srgb, var(--ocf-bg) 97%, transparent);
  box-shadow: 0 0.6rem 1.4rem -1rem color-mix(in srgb, var(--craft-ink) 40%, transparent);
}
html[data-look="craftsman"] .nav-logo-text {
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 40;
  color: var(--ocf-heading);
}
html[data-look="craftsman"] .nav-link,
html[data-look="craftsman"] .nav-dropdown-trigger,
html[data-look="craftsman"] .nav-phone {
  font-family: var(--ocf-font-body);
  font-weight: 600;
  font-size: 17px;
}
html[data-look="craftsman"] .nav-divider {
  background: var(--ocf-border);
}
html[data-look="craftsman"] .dropdown-menu,
html[data-look="craftsman"] .nav-dropdown-panel > * {
  border-radius: 16px;
  border-color: var(--ocf-border);
  box-shadow: var(--craft-shadow-lift);
}
html[data-look="craftsman"] .dropdown-item {
  border-radius: 10px;
  font-family: var(--ocf-font-body);
}

/* ---- 6. HERO ---- */
:root:where([data-look="craftsman"]) .ocf-hero {
  --hero-rating-color: var(--ocf-heading);
  --hero-overlay-opacity: 1;
}
/* 2026-09-08 (hero-fit, precedent: Bold #545/9e16cf6): 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.
   Measured on a real customer build this added enough height to push the
   band from the reference 828px to 862px. 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. Craftsman's own .ocf-hero__content align-self: center
   rule below already keeps both columns centered, so no grid/form
   align-* changes are needed here. */
html[data-look="craftsman"] .ocf-hero {
  padding-block: 0;
}
/* G0b hero centering: Fraunces wraps this headline into one fewer line than
   the shared default heading font at this width, so the text column ends up
   noticeably shorter than the form card next to it. The two-column grid
   (.ocf-hero__grid) top-anchors both columns (align-items: start) to a row
   whose height is set by the taller one (the card) -- a shorter, top-
   anchored text column drifts well above the band's true center. Center the
   text column within its own row instead, the same way the (taller) card
   already reads as centered by construction. */
html[data-look="craftsman"] .ocf-hero__content {
  align-self: center;
}
html[data-look="craftsman"] .ocf-hero__media img {
  filter: saturate(1.05) sepia(0.08) contrast(1.02);
}
html[data-look="craftsman"] .ocf-hero__headline {
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.04;
  font-variation-settings: 'opsz' 130;
  text-shadow: 0 1px 24px color-mix(in srgb, var(--craft-ink) 30%, transparent);
}
html[data-look="craftsman"] .ocf-hero__intro {
  font-size: 19px;
  line-height: 1.6;
  max-width: 46ch;
}

/* rating chip -> a soft slip of paper */
html[data-look="craftsman"] .ocf-hero__rating {
  background: color-mix(in srgb, var(--ocf-bg) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--ocf-border) 80%, transparent);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.05rem;
  box-shadow: 0 0.6rem 1.4rem -0.9rem color-mix(in srgb, var(--craft-ink) 55%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ocf-heading);
  margin-bottom: 1.35rem;
}
html[data-look="craftsman"] .ocf-hero__rating-value {
  font-family: var(--craft-font-sc);
  font-weight: 700;
  letter-spacing: 0.04em;
}
html[data-look="craftsman"] .ocf-hero__rating-label {
  color: color-mix(in srgb, var(--ocf-body) 88%, var(--ocf-bg));
}

/* hero checks: ochre discs, warm dark tick */
html[data-look="craftsman"] .ocf-hero__checks {
  gap: 0.7rem;
  margin-top: 1.35rem;
}
html[data-look="craftsman"] .ocf-hero__checks li {
  gap: 0.75rem;
}
html[data-look="craftsman"] .ocf-hero__checks li > svg {
  box-sizing: border-box;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: var(--ocf-secondary);
  color: color-mix(in srgb, var(--craft-ink) 92%, #fff);
}

/* ---- 7. HERO FORM CARD: a sheet of good paper ---- */
html[data-look="craftsman"] .hero-form-card {
  background: color-mix(in srgb, var(--ocf-bg) 30%, #fff);
  border: 1px solid var(--ocf-border);
  border-radius: 22px;
  padding: 1.9rem 1.75rem;
  box-shadow: 0 1.4rem 3rem -1.6rem color-mix(in srgb, var(--craft-ink) 62%, transparent);
}
html[data-look="craftsman"] .hero-form-card .hero-form-title {
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  font-variation-settings: 'opsz' 40;
  margin-bottom: 1.1rem;
}
html[data-look="craftsman"] .ultimate-f1-field input,
html[data-look="craftsman"] .ultimate-f1-field textarea {
  background: color-mix(in srgb, var(--ocf-bg-alt) 55%, #fff) !important;
  border: 1px solid var(--ocf-border) !important;
  border-radius: 12px !important;
  font-family: var(--ocf-font-body) !important;
}
html[data-look="craftsman"] .ultimate-f1-field input:focus,
html[data-look="craftsman"] .ultimate-f1-field textarea:focus {
  border-color: var(--ocf-primary) !important;
  background: color-mix(in srgb, var(--ocf-bg) 25%, #fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocf-primary) 13%, transparent) !important;
}
html[data-look="craftsman"] .ultimate-f1-field label {
  font-family: var(--ocf-font-body);
  color: color-mix(in srgb, var(--ocf-body) 86%, var(--ocf-bg));
}
html[data-look="craftsman"] .hero-form-card .form-submit-btn {
  font-size: 17px;
  min-height: 3rem;
}
html[data-look="craftsman"] .ocf-form-secure-note {
  font-family: var(--ocf-font-body);
  font-size: 14.5px;
}

/* ---- 8. BAND RHYTHM: paper / cream, warm rule on the tinted ones ---- */
html[data-look="craftsman"] .ocf-services { background: var(--ocf-bg); }
html[data-look="craftsman"] .ocf-about {
  background: var(--ocf-bg-alt);
  border-top: 1px solid var(--ocf-border);
}
html[data-look="craftsman"] .ocf-commitments { background: var(--ocf-bg); }
html[data-look="craftsman"] .ocf-service-areas {
  background: var(--ocf-bg-alt);
  border-top: 1px solid var(--ocf-border);
}
html[data-look="craftsman"] .ocf-faq { background: var(--ocf-bg); }

/* the sitewide CTA band (parts/cta-band.php, rendered from footer.php on
   every page but /contact/ -- a legacy V1 furniture piece, not part of the
   ocf-* Ultimate spine, but still visible on every Ultimate page) reads the
   shared theme's --color-bg-dark for its background (assets/base.css
   .cta-band). This look never declares that token (G4a); the warm
   brown-black surface goes on the component directly instead. */
html[data-look="craftsman"] .cta-band {
  background: var(--craft-ink);
}

/* ---- 9. SERVICE CARDS + CAROUSEL ---- */
html[data-look="craftsman"] .ocf-svc-card {
  background: color-mix(in srgb, var(--ocf-bg) 38%, #fff);
  border: 1px solid var(--ocf-border);
  border-radius: 20px;
  box-shadow: var(--craft-shadow-soft);
}
html[data-look="craftsman"] .ocf-svc-card-img img {
  filter: saturate(1.05) sepia(0.08) contrast(1.02);
}
html[data-look="craftsman"] .ocf-svc-card-body { padding: 1.5rem 1.5rem 1.35rem; }
html[data-look="craftsman"] .ocf-svc-card-body h3 {
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.18;
  font-variation-settings: 'opsz' 40;
}
html[data-look="craftsman"] .ocf-svc-card-body p {
  font-size: 16.5px;
  line-height: 1.58;
  color: color-mix(in srgb, var(--ocf-body) 92%, var(--ocf-bg));
}
html[data-look="craftsman"] .ocf-svc-card-cta {
  border-top: 1px solid var(--ocf-border);
  padding-top: 1rem;
  margin-top: 0.35rem;
  font-family: var(--ocf-font-body);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.01em;
  color: var(--ocf-primary);
}
html[data-look="craftsman"] .ocf-svc-arrow {
  width: 1.75rem;
  height: 1.75rem;
  background: color-mix(in srgb, var(--ocf-primary) 12%, var(--ocf-bg));
  color: var(--ocf-primary);
  box-shadow: none;
}
html[data-look="craftsman"] .ocf-svc-card:hover {
  border-color: color-mix(in srgb, var(--ocf-primary) 34%, var(--ocf-border));
  box-shadow: var(--craft-shadow-lift);
}
html[data-look="craftsman"] .ocf-svc-card-body h3::after {
  background: var(--ocf-secondary);
}
/* round paper buttons for the carousel */
html[data-look="craftsman"] .ocf-svc-nav button {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ocf-bg) 35%, #fff);
  border: 1px solid var(--ocf-border);
  color: var(--ocf-heading);
  box-shadow: var(--craft-shadow-soft);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
html[data-look="craftsman"] .ocf-svc-nav button:hover:not([disabled]) {
  border-color: var(--ocf-primary);
  color: var(--ocf-primary);
}
html[data-look="craftsman"] .ocf-svc-nav button[disabled] { opacity: 0.42; }
html[data-look="craftsman"] .ocf-eyebrow-link__icon { display: none; }

/* ---- 10. SIGNATURE: mounted-print photo frame (about + commitments only) ----
   The photo sits on a solid accent-tinted backing plate offset down-right,
   like a print mounted on board. The plate is an offset box-shadow on the
   WRAPPER (never on the <img> itself -- an image carrying both a filter and
   a box-shadow rasterises blank in this capture harness). */
html[data-look="craftsman"] .ocf-about__media,
html[data-look="craftsman"] .ocf-commitments-image {
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: var(--image-radius);
  box-shadow:
    14px 14px 0 0 color-mix(in srgb, var(--ocf-primary) 20%, var(--ocf-bg)),
    14px 14px 0 1px color-mix(in srgb, var(--ocf-primary) 34%, var(--ocf-bg)),
    0 1.1rem 2.2rem -1.4rem color-mix(in srgb, var(--craft-ink) 45%, transparent);
}
html[data-look="craftsman"] .ocf-about__media img,
html[data-look="craftsman"] .ocf-commitments-image img {
  border-radius: var(--image-radius);
  border: 1px solid color-mix(in srgb, var(--ocf-border) 80%, var(--ocf-heading));
  filter: saturate(1.05) sepia(0.08) contrast(1.02);
}
html[data-look="craftsman"] .ocf-commitments-image-wrap { padding-right: 14px; }

/* ---- 11. ABOUT ---- */
:root:where([data-look="craftsman"]) .ocf-about {
  --about-check-color: color-mix(in srgb, var(--ocf-primary) 15%, var(--ocf-bg));
  --about-check-mark-color: var(--ocf-primary);
}
html[data-look="craftsman"] .ocf-about__headline {
  font-weight: 600;
  line-height: 1.1;
}
html[data-look="craftsman"] .ocf-about__body {
  font-size: var(--font-body-size);
  line-height: 1.62;
}
html[data-look="craftsman"] .ocf-about__body li::before {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ocf-primary) 26%, transparent);
}

/* ---- 12. COMMITMENTS: serif numerals in a hairline circle ---- */
html[data-look="craftsman"] .ocf-commitment-num {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  font-variation-settings: 'opsz' 24;
  letter-spacing: 0.01em;
  color: var(--ocf-primary);
  background: color-mix(in srgb, var(--ocf-bg) 40%, #fff);
  border: 1px solid color-mix(in srgb, var(--ocf-primary) 34%, var(--ocf-border));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ocf-primary) 7%, transparent);
}
html[data-look="craftsman"] .ocf-commitments .ocf-commitment:not(:last-child)::before {
  top: calc(2.75rem + 5px);
  left: calc(1.375rem - 1px);
  bottom: calc(-1.2rem - 1px);
  border-left: 2px dotted color-mix(in srgb, var(--ocf-primary) 30%, var(--ocf-border));
}
html[data-look="craftsman"] .ocf-commitments .ocf-commitment:not(:last-child)::after {
  left: calc(2.75rem + clamp(1rem, 2vw, 1.35rem));
  background: var(--ocf-border);
}
html[data-look="craftsman"] .ocf-commitment + .ocf-commitment {
  border-top-color: var(--ocf-border);
}
html[data-look="craftsman"] .ocf-commitment h3 {
  font-weight: 600;
  font-size: 1.28rem;
  margin-bottom: 0.3rem;
}
html[data-look="craftsman"] .ocf-commitment p {
  color: color-mix(in srgb, var(--ocf-body) 82%, var(--ocf-bg));
  font-size: 16.5px;
}
html[data-look="craftsman"] .ocf-commitments-description {
  font-size: var(--font-body-size);
}

/* ---- 13. SERVICE AREAS ---- */
html[data-look="craftsman"] .ocf-service-areas__map {
  border-radius: var(--image-radius);
  border: 1px solid var(--ocf-border);
  box-shadow: none;
}
html[data-look="craftsman"] .mock-map {
  background: color-mix(in srgb, var(--ocf-bg-alt) 42%, var(--ocf-bg));
  color: var(--ocf-primary);
  height: clamp(20rem, 26vw, 24rem);
  min-height: 20rem;
}
html[data-look="craftsman"] .mock-map__grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ocf-heading) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ocf-heading) 9%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--ocf-bg) 60%, #fff), transparent 46%),
    radial-gradient(circle at 70% 66%, color-mix(in srgb, var(--ocf-secondary) 7%, var(--ocf-bg)), transparent 42%);
}
html[data-look="craftsman"] .mock-map__label {
  font-family: var(--ocf-font-body);
  font-weight: 700;
  color: var(--ocf-heading);
  background: color-mix(in srgb, var(--ocf-bg) 20%, #fff);
  border: 1px solid var(--ocf-border);
  box-shadow: var(--craft-shadow-soft);
}
html[data-look="craftsman"] .ocf-service-areas__link {
  font-family: var(--ocf-font-body);
  font-weight: 600;
  font-size: 17px;
  gap: 0.6rem;
}
html[data-look="craftsman"] .ocf-service-areas__link-icon {
  box-sizing: border-box;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0.28rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ocf-primary) 14%, var(--ocf-bg));
  color: var(--ocf-primary);
}

/* ---- 14. FAQ: cream cards on paper, paper when open ---- */
html[data-look="craftsman"] .ocf-faq-columns { gap: 0.85rem; }
html[data-look="craftsman"] .ocf-faq-column { gap: 0.85rem; }
html[data-look="craftsman"] .ocf-faq-item {
  background: var(--ocf-bg-alt);
  border: 1px solid var(--ocf-border);
  border-radius: 18px;
  box-shadow: none;
  padding: 1.15rem 1.4rem;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
html[data-look="craftsman"] .ocf-faq-item:hover {
  border-color: color-mix(in srgb, var(--ocf-primary) 30%, var(--ocf-border));
  box-shadow: none;
}
html[data-look="craftsman"] .ocf-faq-item.is-open {
  background: color-mix(in srgb, var(--ocf-bg) 25%, #fff);
  border-color: color-mix(in srgb, var(--ocf-primary) 32%, var(--ocf-border));
  box-shadow: var(--craft-shadow-lift);
}
html[data-look="craftsman"] .ocf-faq-trigger {
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  font-variation-settings: 'opsz' 30;
  color: var(--ocf-heading);
}
html[data-look="craftsman"] .ocf-faq-icon {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.36rem;
  background: var(--ocf-primary);
  color: var(--ocf-bg);
}
html[data-look="craftsman"] .ocf-faq-answer p {
  font-size: 16.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ocf-body) 92%, var(--ocf-bg));
}

/* ---- 15. CTA: paper card on a cream band with a faint ochre glow ---- */
html[data-look="craftsman"] .ocf-cta {
  background:
    radial-gradient(58% 90% at 76% 8%, color-mix(in srgb, var(--ocf-secondary) 20%, var(--ocf-bg-alt)) 0%, transparent 68%),
    radial-gradient(60% 90% at 12% 100%, color-mix(in srgb, var(--ocf-primary) 9%, var(--ocf-bg-alt)) 0%, transparent 70%),
    var(--ocf-bg-alt) !important;
  border-top: 1px solid var(--ocf-border);
}
html[data-look="craftsman"] .ocf-cta .ocf-cta__panel {
  min-height: 0;
  padding: 0;
  background: color-mix(in srgb, var(--ocf-bg) 28%, #fff);
  border: 1px solid var(--ocf-border);
  border-radius: 26px;
  box-shadow: 0 1.5rem 3rem -1.7rem color-mix(in srgb, var(--craft-ink) 45%, transparent);
  width: min(100%, 68rem);
  margin-inline: auto;
}
html[data-look="craftsman"] .ocf-cta .ocf-cta__inner {
  padding: clamp(2rem, 4.5vw, 3.25rem);
}
html[data-look="craftsman"] .ocf-cta__headline {
  font-weight: 600;
  line-height: 1.1;
}
html[data-look="craftsman"] .ocf-cta__body { font-size: var(--font-body-size); }
html[data-look="craftsman"] .ocf-cta .ocf-cta__phone {
  font-family: var(--ocf-font-body);
  font-weight: 600;
  color: var(--ocf-body);
}
html[data-look="craftsman"] .ocf-cta .ocf-cta__phone strong {
  font-weight: 700;
}

/* ---- 16. FOOTER: deep warm brown-black, ochre hairline ---- */
:root:where([data-look="craftsman"]) {
  --ocf-footer-bg: color-mix(in srgb, var(--color-heading) 85%, #000);
  --ocf-footer-heading: color-mix(in srgb, var(--color-bg) 68%, #fff);
  --ocf-footer-body: color-mix(in srgb, var(--color-bg) 70%, transparent);
}
/* the shipped look floats a brand-coloured halo in the footer; this look
   wants a plain, solid, warm brown-black board instead -- the only accent
   down here is the ochre hairline above the legal bar. */
html[data-look="craftsman"] .site-footer::before { content: none; }

html[data-look="craftsman"] .footer-brand-name {
  font-family: var(--ocf-font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 40;
}
html[data-look="craftsman"] .footer-brand-desc {
  max-width: 30ch;
  font-size: 16.5px;
  line-height: 1.6;
}
html[data-look="craftsman"] .footer-heading {
  font-family: var(--craft-font-sc);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.055em;
  margin-bottom: 0.9rem;
  color: var(--ocf-footer-heading);
}
html[data-look="craftsman"] .footer-link-list,
html[data-look="craftsman"] .footer-contact-links {
  font-size: 16px;
}
html[data-look="craftsman"] .footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--ocf-secondary) 42%, transparent);
  padding-top: 1.4rem;
  margin-top: 2.4rem;
  font-size: 15.5px;
}

/* ---- 17. PREVIEW CHROME (harness only, kept warm so it doesn't clash) ---- */
html[data-look="craftsman"] .preview-banner {
  background: color-mix(in srgb, var(--color-heading) 85%, #000);
  color: color-mix(in srgb, var(--color-bg) 68%, #fff);
  font-family: var(--craft-font-sc);
  letter-spacing: 0.05em;
}

/* ---- 18. MOBILE ---- */
@media (max-width: 900px) {
  html[data-look="craftsman"] .ocf-hero__headline { font-size: clamp(36px, 9.6vw, 46px); }
  html[data-look="craftsman"] .hero-form-card { padding: 1.5rem 1.35rem; }
  html[data-look="craftsman"] .ocf-about__media,
  html[data-look="craftsman"] .ocf-commitments-image {
    box-shadow:
      10px 10px 0 0 color-mix(in srgb, var(--ocf-primary) 20%, var(--ocf-bg)),
      10px 10px 0 1px color-mix(in srgb, var(--ocf-primary) 34%, var(--ocf-bg)),
      0 0.8rem 1.6rem -1.2rem color-mix(in srgb, var(--craft-ink) 45%, transparent);
  }
  html[data-look="craftsman"] .ocf-commitments-image-wrap { padding-right: 10px; }
  html[data-look="craftsman"] .ocf-about__media { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  html[data-look="craftsman"] .ocf-svc-nav button { width: 2.6rem; height: 2.6rem; }
  html[data-look="craftsman"] .ocf-cta .ocf-cta__inner { padding: 1.6rem 1.35rem; }
}

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