/* ==========================================================================
   LOOK: gallery — quiet luxury, the work speaks.
   Photography-led. Huge whitespace. Hairlines instead of boxes. Sharp corners.
   Everything structural comes from tokens; the source pack's demo hue block
   (customer palette placeholders) is not shipped -- see the line below.
   ========================================================================== */
/* Shipped copy of docs/looks/gallery.css (Hermes) -- demo colors removed, token blocks at :root:where() specificity; see tests/test_looks_registry.py */

/* -- 2. LOOK TOKENS (shape, type, rhythm) --------------------------------- */
:root:where([data-look="gallery"]) {
  /* fonts */
  --font-heading: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --ocf-font-heading: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ocf-font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* type scale */
  --ocf-font-body-size: 17.5px;
  --ocf-font-h1-size: clamp(36px, 4.6vw, 68px);
  --ocf-font-h1-weight: 300;
  --ocf-font-h2-size: clamp(27px, 2.85vw, 40px);
  --ocf-font-h2-weight: 400;
  --ocf-font-h3-size: 21px;
  --ocf-font-h3-weight: 400;
  --ocf-font-eyebrow-size: 11px;
  --ocf-font-eyebrow-weight: 500;
  --font-label-size: 15.5px;
  --font-button-size: 13px;
  --button-text-transform: uppercase;
  --button-letter-spacing: 0.12em;

  /* shape: sharp everywhere */
  --ocf-radius-sm: 0px;
  --ocf-radius-lg: 0px;
  --ocf-radius-input: 0px;
  --ocf-radius-outline: 0px;
  --ocf-image-radius: 0px;
  --ocf-card-radius: 0px;
  --ocf-card-radius-lg: 0px;
  --ocf-button-radius: 0px;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --radius-input: 0px;
  --radius-outline: 0px;
  --radius-full: 0px;
  --card-radius: 0px;
  --card-radius-lg: 0px;
  --button-radius: 0px;
  --image-radius: 0px;

  /* no shadows anywhere — hairlines carry every edge */
  --ocf-card-shadow: none;
  --ocf-card-shadow-hover: none;
  --ocf-button-shadow: none;
  --ocf-button-shadow-hover: none;
  --ocf-image-shadow: none;
  --card-shadow: none;
  --card-shadow-hover: none;
  --button-shadow: none;
  --button-shadow-hover: none;
  --image-shadow: none;
  --card-transform-hover: none;
  --button-transform-hover: none;
  --card-border-width: 1px;
  --card-border-color: var(--color-border);
  --card-border-color-subtle: var(--color-border-light);

  /* rhythm */
  --section-pad: clamp(3.75rem, 7vw, 7rem);
  --container-max: 1240px;
  --grid-gap: 1px;

  /* light footer */
  --ocf-footer-bg: var(--color-bg);
  --ocf-footer-heading: var(--color-heading);
  --ocf-footer-body: color-mix(in srgb, var(--color-body) 78%, var(--color-bg));

  /* look-local helpers */
  --g-rule: var(--ocf-border);
  --g-rule-soft: var(--ocf-border-light);
  --g-muted: color-mix(in srgb, var(--ocf-body) 85%, var(--ocf-bg));
  --g-label: 0.2em;
}

/* -- 3. GROUND + TYPE ------------------------------------------------------ */
html[data-look="gallery"] body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.68;
  letter-spacing: 0.002em;
  background: var(--ocf-bg);
  -webkit-font-smoothing: antialiased;
}

html[data-look="gallery"] h1,
html[data-look="gallery"] h2,
html[data-look="gallery"] h3,
html[data-look="gallery"] h4,
html[data-look="gallery"] .heading-1,
html[data-look="gallery"] .heading-2,
html[data-look="gallery"] .heading-3 {
  font-family: var(--font-heading);
  letter-spacing: -0.012em;
  line-height: 1.1;
}
html[data-look="gallery"] .heading-1 { font-weight: 300; line-height: 1.04; }
html[data-look="gallery"] .heading-2 { font-weight: 400; line-height: 1.12; }
html[data-look="gallery"] .heading-3,
html[data-look="gallery"] h3 { font-weight: 400; }

/* No tinted bands anywhere. Whitespace + hairlines separate sections. */
html[data-look="gallery"] .ocf-services,
html[data-look="gallery"] .ocf-about,
html[data-look="gallery"] .ocf-commitments,
html[data-look="gallery"] .ocf-service-areas,
html[data-look="gallery"] .ocf-faq,
html[data-look="gallery"] .ocf-cta {
  background: var(--ocf-bg);
}

/* Every photo on the page gets the same quiet grade. */
html[data-look="gallery"] .ocf-hero__media img,
html[data-look="gallery"] .ocf-svc-card-img img,
html[data-look="gallery"] .ocf-about__media img,
html[data-look="gallery"] .ocf-commitments-image img {
  filter: saturate(0.9) contrast(1.02);
}

/* Focus stays obvious. */
html[data-look="gallery"] a:focus-visible,
html[data-look="gallery"] button:focus-visible,
html[data-look="gallery"] input:focus-visible,
html[data-look="gallery"] textarea:focus-visible {
  outline: 1px solid var(--ocf-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   4. SIGNATURE — the hairline grid.
   Every section opens the way a printed portfolio page does: a tiny
   flush-left index label (the section's own existing eyebrow word), then a
   full-bleed 1px rule, then a lot of air before the heading.
   ========================================================================== */
html[data-look="gallery"] .ocf-services,
html[data-look="gallery"] .ocf-commitments,
html[data-look="gallery"] .ocf-faq {
  position: relative;
}

html[data-look="gallery"] .ocf-services,
html[data-look="gallery"] .ocf-about,
html[data-look="gallery"] .ocf-commitments,
html[data-look="gallery"] .ocf-service-areas,
html[data-look="gallery"] .ocf-faq,
html[data-look="gallery"] .ocf-cta {
  padding-top: calc(var(--section-pad) + 3.1rem);
  padding-bottom: var(--section-pad);
}

html[data-look="gallery"] .ocf-services::before,
html[data-look="gallery"] .ocf-about::before,
html[data-look="gallery"] .ocf-commitments::before,
html[data-look="gallery"] .ocf-service-areas::before,
html[data-look="gallery"] .ocf-faq::before,
html[data-look="gallery"] .ocf-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3.35rem;
  height: 1px;
  background: var(--g-rule);
  z-index: 1;
}

/* the index label itself */
html[data-look="gallery"] .ocf-services .eyebrow,
html[data-look="gallery"] .ocf-commitments .eyebrow,
html[data-look="gallery"] .ocf-faq .eyebrow,
html[data-look="gallery"] .ocf-service-areas__eyebrow,
html[data-look="gallery"] .ocf-about__eyebrow,
html[data-look="gallery"] .ocf-cta__eyebrow {
  position: absolute;
  top: 1.55rem;
  left: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  display: inline-block;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--g-label);
  text-transform: uppercase;
  color: var(--g-muted);
}
/* let the CTA opener anchor to the section itself, same as the others */
html[data-look="gallery"] .ocf-cta .container-global,
html[data-look="gallery"] .ocf-cta .ocf-cta__panel,
html[data-look="gallery"] .ocf-cta .ocf-cta__inner { position: static; }
html[data-look="gallery"] .ocf-services .eyebrow a,
html[data-look="gallery"] .ocf-services .ocf-eyebrow-link {
  color: inherit;
  gap: 0;
  padding: 0;
}
html[data-look="gallery"] .ocf-eyebrow-link__icon { display: none; }
html[data-look="gallery"] .ocf-eyebrow-link::after { background: currentColor; opacity: 0.5; }

/* kill the short accent bars under headings — hairlines do that job now.
   (the base skin draws them from `.eyebrow + h2::after`, so match its weight) */
html[data-look="gallery"] .eyebrow + h2::after,
html[data-look="gallery"] .eyebrow + h3::after,
html[data-look="gallery"] .eyebrow + .heading-2::after,
html[data-look="gallery"] .ocf-about__eyebrow + .ocf-about__headline::after,
html[data-look="gallery"] .ocf-cta__eyebrow + .ocf-cta__headline::after {
  content: none;
  display: none;
}

/* ==========================================================================
   5. NAV — a plain white rail, uppercase letter-spaced labels
   ========================================================================== */
html[data-look="gallery"] .nav-bar,
html[data-look="gallery"] .nav-bar.is-condensed {
  background: var(--ocf-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--g-rule);
}
html[data-look="gallery"] .nav-inner { min-height: 4.75rem; }
html[data-look="gallery"] .nav-bar.is-condensed .nav-inner { min-height: 4rem; }
html[data-look="gallery"] .nav-logo-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .nav-link,
html[data-look="gallery"] .nav-dropdown-trigger {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .nav-links { column-gap: clamp(1.1rem, 2vw, 1.9rem); }
html[data-look="gallery"] .nav-phone {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .nav-phone svg,
html[data-look="gallery"] .nav-dropdown-chevron { stroke-width: 1.25; }
html[data-look="gallery"] .nav-divider { background-color: var(--g-rule); height: 1.1rem; }
html[data-look="gallery"] .dropdown-menu {
  border-radius: 0;
  border-color: var(--g-rule);
  box-shadow: none;
  padding: 0.35rem;
}
html[data-look="gallery"] .dropdown-item {
  font-size: 13.5px;
  letter-spacing: 0.01em;
  border-radius: 0;
}
html[data-look="gallery"] .dropdown-item:hover { background-color: var(--ocf-bg-alt); }

/* ==========================================================================
   6. BUTTONS — solid dark rectangles; accent stays scarce
   ========================================================================== */
html[data-look="gallery"] .btn-primary,
html[data-look="gallery"] .nav-cta,
html[data-look="gallery"] .ultimate-b1-btn,
html[data-look="gallery"] .mobile-cta,
html[data-look="gallery"] .hero-form-card .form-submit-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: var(--ocf-heading);
  color: var(--ocf-bg);
  border: 1px solid var(--ocf-heading);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  min-height: 3rem;
  padding-inline: 1.6rem;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
html[data-look="gallery"] .btn-primary:hover,
html[data-look="gallery"] .btn-primary:focus-visible,
html[data-look="gallery"] .nav-cta:hover,
html[data-look="gallery"] .ultimate-b1-btn:hover,
html[data-look="gallery"] .mobile-cta:hover,
html[data-look="gallery"] .hero-form-card .form-submit-btn:hover,
html[data-look="gallery"] .hero-form-card .form-submit-btn:focus-visible {
  background: var(--ocf-primary);
  border-color: var(--ocf-primary);
  color: var(--ocf-bg);
}
html[data-look="gallery"] .nav-cta { min-height: 2.6rem; padding-inline: 1.2rem; font-size: 11.5px; }
html[data-look="gallery"] .btn-lg { min-height: 3.25rem; padding-inline: 1.9rem; }
html[data-look="gallery"] .btn-primary svg,
html[data-look="gallery"] .ultimate-b1-arrow { stroke-width: 1.25; width: 0.95rem; height: 0.95rem; }

html[data-look="gallery"] .btn-secondary {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ocf-heading) 26%, var(--ocf-bg));
  background: transparent;
  color: var(--ocf-heading);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  min-height: 3rem;
  padding-inline: 1.5rem;
  box-shadow: none;
  transform: none;
}
html[data-look="gallery"] .btn-secondary:hover,
html[data-look="gallery"] .btn-secondary:focus-visible {
  background: transparent;
  transform: none;
  color: var(--ocf-heading);
  border-color: var(--ocf-heading);
}
html[data-look="gallery"] .btn-secondary svg { stroke-width: 1.25; }

/* ==========================================================================
   7. HERO — the scrim is INVERTED: light from the left, photo clean on the
   right, dark type on the pale side.
   ========================================================================== */
html[data-look="gallery"] .ocf-hero {
  overflow: hidden;
  margin-bottom: 0;
  min-height: min(880px, calc(100vh - var(--nav-height)));
  background: var(--ocf-bg);
  --hero-heading-color: var(--ocf-heading);
  --hero-intro-color: var(--ocf-body);
  --hero-rating-color: var(--ocf-heading);
  --hero-check-color: var(--ocf-heading);
  --hero-check-mark-color: var(--ocf-heading);
  /* 2026-09-08 (hero-fit, precedent: Bold #545/9e16cf6, Craftsman #? ):
     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 the
     `.ocf-hero .ocf-hero__grid` rule below already applies via its own
     padding-block clamp. Measured on a real customer build this pushed
     the band from the reference 828px to 878px. Cancel the redundant
     outer layer here so the hero's height is governed solely by the
     grid's own padding-block clamp + min-height floor above, matching
     the reference band height again. Gallery's grid already centers
     both columns (align-items: center below), so no additional
     align-* overrides are needed the way Bold needed for its form
     column. */
  padding-block: 0;
}
html[data-look="gallery"] .ocf-hero__shade {
  opacity: 1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ocf-bg) 94%, transparent) 0%,
      color-mix(in srgb, var(--ocf-bg) 91%, transparent) 29%,
      color-mix(in srgb, var(--ocf-bg) 66%, transparent) 43%,
      color-mix(in srgb, var(--ocf-bg) 26%, transparent) 54%,
      transparent 66%
    );
}
/* G0b hero-height fix (found during proof, not in the source pack): the
   hero section already starts BELOW the nav in normal document flow (the
   page body carries its own nav-height top padding -- ocf-global.css's
   `body { padding-top: calc(var(--nav-height) + ...); }`), so this grid's
   own top padding does not also need to reserve nav-height -- the source
   pack's `calc(var(--nav-height) + clamp(...))` double-counted it (it reads
   like it was authored for a fixed/overlaid nav, which this theme's nav is
   not: gallery's own nav rule above is fully opaque, not floating over the
   hero). Removing the extra nav-height term alone saved ~45px; see the
   card/field tightening below for the rest of the fix. */
html[data-look="gallery"] .ocf-hero .ocf-hero__grid {
  padding-block: clamp(2.5rem, 5vh, 4.25rem) clamp(3.5rem, 7vh, 5rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, 470px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
html[data-look="gallery"] .ocf-hero__content { max-width: 640px; }

/* rating: a plain hairline label, no fill, stars in heading ink */
html[data-look="gallery"] .ocf-hero__rating {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--ocf-heading) 22%, transparent);
  border-radius: 0;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1.6rem;
  gap: 0.55rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-hero__rating-value {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.14em;
}
html[data-look="gallery"] .ocf-hero__stars { color: var(--ocf-heading); font-size: 1em; }
html[data-look="gallery"] .ocf-hero__star-empty { opacity: 0.2; }
html[data-look="gallery"] .ocf-hero__google-icon {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  filter: saturate(0) contrast(0.9);
  opacity: 0.55;
}
html[data-look="gallery"] .ocf-hero__rating-label { letter-spacing: 0.14em; }

html[data-look="gallery"] .ocf-hero__headline {
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.04;
  max-width: 13ch;
}
/* G0b long-copy fix: a real per-business headline/subhead (3-line H1 +
   4-line intro paragraph -- the realistic case, not this fixture's
   1-line default) grows the text column past the form card's own height,
   which then governs hero-band height instead of the card -- so this
   column's own vertical rhythm (margin-top: rest of the source pack's
   values were tuned against the fixture's 1-line intro) needed the same
   tightening the grid/card got above, so a long real headline still fits
   inside the 828px reference band. Kept tighter than the source pack but
   still visibly more open than classic's own rhythm. */
html[data-look="gallery"] .ocf-hero__intro {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ocf-body);
}
html[data-look="gallery"] .ocf-hero__checks {
  margin-top: 1.5rem;
  gap: 0.75rem;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-hero__checks li > svg {
  stroke-width: 1.25;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-hero__checks li > span:not(.ocf-hero__check-icon) { color: var(--ocf-heading); }
html[data-look="gallery"] .ocf-hero__actions { margin-top: 1.75rem; }

/* ==========================================================================
   8. HERO FORM CARD — white, sharp, hairline; underline-only fields
   ========================================================================== */
/* G0b hero-height fix continued: the source pack's generous card padding,
   title margin, and field-to-field gap (on top of the identical per-field
   height every look shares) pushed this card ~90px taller than classic's
   reference card -- enough on its own, combined with the grid-padding fix
   above, to grow the whole hero band past the 828px reference. Tightened
   here to close that gap while keeping visibly more air than classic's
   boxed default (0.875rem/0.875rem/1.75rem). */
html[data-look="gallery"] .hero-form-card {
  background: var(--ocf-bg);
  border: 1px solid var(--g-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 1.9rem 1.75rem 1.75rem;
}
html[data-look="gallery"] .hero-form-card .hero-form-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin-bottom: 1.1rem;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .hero-form-card .hero-form-fields { gap: 0.95rem; }
html[data-look="gallery"] .ocf-name-grid { gap: 1rem; }

html[data-look="gallery"] .ultimate-f1-field input,
html[data-look="gallery"] .ultimate-f1-field textarea,
html[data-look="gallery"] .hero-form-card input,
html[data-look="gallery"] .hero-form-card textarea {
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ocf-heading) 24%, var(--ocf-bg)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 1.15rem 0 0.55rem !important;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ocf-heading);
  transition: border-color 180ms ease;
}
html[data-look="gallery"] .ultimate-f1-field textarea,
html[data-look="gallery"] .hero-form-card textarea { min-height: 4.6rem; resize: vertical; }
html[data-look="gallery"] .ultimate-f1-field input:focus,
html[data-look="gallery"] .ultimate-f1-field textarea:focus {
  border-bottom-color: var(--ocf-heading) !important;
  box-shadow: none !important;
  outline: none;
}
html[data-look="gallery"] .ultimate-f1-field label {
  left: 0;
  top: 1.1rem;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--g-muted);
}
html[data-look="gallery"] .ultimate-f1-field input:focus + label,
html[data-look="gallery"] .ultimate-f1-field input:not(:placeholder-shown) + label,
html[data-look="gallery"] .ultimate-f1-field textarea:focus + label,
html[data-look="gallery"] .ultimate-f1-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.05rem);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .hero-form-card .form-submit-btn {
  width: 100%;
  min-height: 3rem;
  margin-top: 0.75rem;
}
html[data-look="gallery"] .ocf-form-secure-note {
  margin-top: 0.9rem;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--g-muted);
}
html[data-look="gallery"] .ocf-form-secure-note svg { stroke-width: 1.3; }

/* ==========================================================================
   9. SERVICES — a hairline grid of photos, not a row of floating boxes
   ========================================================================== */
html[data-look="gallery"] .ocf-services-header {
  margin-bottom: 2.75rem;
  align-items: end;
}
html[data-look="gallery"] .ocf-services-heading { max-width: 780px; }
html[data-look="gallery"] .ocf-svc-nav { gap: 0; }
html[data-look="gallery"] .ocf-svc-nav button {
  border-radius: 0;
  border: 1px solid var(--g-rule);
  background: transparent;
  color: var(--ocf-heading);
  width: 2.9rem;
  height: 2.9rem;
  transition: border-color 200ms ease, color 200ms ease;
}
html[data-look="gallery"] .ocf-svc-nav button + button { border-left: 0; }
html[data-look="gallery"] .ocf-svc-nav button:hover:not([disabled]) { border-color: var(--ocf-heading); }
html[data-look="gallery"] .ocf-svc-nav button[disabled] { color: color-mix(in srgb, var(--ocf-heading) 28%, var(--ocf-bg)); }
html[data-look="gallery"] .ocf-svc-nav svg { stroke-width: 1.25; width: 1.05rem; height: 1.05rem; }

/* 1px gaps: the track's own ground shows through between the cards */
html[data-look="gallery"] .ocf-svc-viewport {
  padding-inline: 0;
  margin-inline: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-inline: 1px solid var(--g-rule);
}
html[data-look="gallery"] .ocf-svc-track {
  gap: 1px;
  background: var(--g-rule);
  padding-block: 1px;
}
html[data-look="gallery"] .ocf-svc-card,
html[data-look="gallery"] .ocf-svc-card:hover {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--ocf-bg);
  transform: none;
}
html[data-look="gallery"] .ocf-svc-card-img { aspect-ratio: 3 / 2; background: var(--ocf-bg-alt); }
html[data-look="gallery"] .ocf-svc-card:hover .ocf-svc-card-img img { transform: none; }
html[data-look="gallery"] .ocf-svc-card-body {
  padding: 1.6rem 1.5rem 1.5rem;
  gap: 0.55rem;
}
html[data-look="gallery"] .ocf-svc-card-body h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  padding-bottom: 0;
}
html[data-look="gallery"] .ocf-svc-card-body h3::after { content: none; display: none; }
html[data-look="gallery"] .ocf-svc-card-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--g-muted);
}
html[data-look="gallery"] .ocf-svc-card-cta {
  border-top: 0;
  margin-top: 0.9rem;
  padding-top: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocf-heading);
  justify-content: flex-start;
  gap: 0.7rem;
}
html[data-look="gallery"] .ocf-svc-arrow {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-svc-arrow svg { width: 100%; height: 100%; stroke-width: 1.1; }
html[data-look="gallery"] .ocf-svc-card:hover .ocf-svc-arrow,
html[data-look="gallery"] .ocf-svc-card:focus-within .ocf-svc-arrow { transform: translateX(5px); }

/* ==========================================================================
   10. ABOUT — photo with a thin inset frame; hairline circle checks
   ========================================================================== */
:root:where([data-look="gallery"]) .ocf-about {
  --about-check-color: transparent;
  --about-check-mark-color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-about__grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
  gap: clamp(2.25rem, 6vw, 5rem);
  align-items: center;
}
html[data-look="gallery"] .ocf-about__media,
html[data-look="gallery"] .ocf-about__image,
html[data-look="gallery"] .ocf-commitments-image {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}
/* the one ornament: a 1px frame floating 12px inside the photo edge */
html[data-look="gallery"] .ocf-about__media::after,
html[data-look="gallery"] .ocf-commitments-image::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, #ffffff 58%, transparent);
  pointer-events: none;
  z-index: 2;
}
html[data-look="gallery"] .ocf-about__media img { aspect-ratio: 4 / 5; }
html[data-look="gallery"] .ocf-about__copy { gap: 1.35rem; }
html[data-look="gallery"] .ocf-about__headline {
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.14;
  max-width: 18ch;
}
html[data-look="gallery"] .ocf-about__body { font-size: 16.5px; line-height: 1.72; color: var(--ocf-body); }
html[data-look="gallery"] .ocf-about__body ul { gap: 1.1rem; margin-top: 0.6rem; }
html[data-look="gallery"] .ocf-about__body li {
  padding-left: 2.5rem;
  min-height: 1.5rem;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--g-muted);
}
html[data-look="gallery"] .ocf-about__body li strong,
html[data-look="gallery"] .ocf-about__body li b {
  font-weight: 500;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-about__body li::before {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ocf-heading) 32%, var(--ocf-bg));
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  top: 0.18em;
}
html[data-look="gallery"] .ocf-about__body li::after {
  border-bottom: 1px solid var(--ocf-heading);
  border-left: 1px solid var(--ocf-heading);
  width: 0.5rem;
  height: 0.26rem;
  left: 0.45rem;
  top: calc(0.18em + 0.52rem);
}
html[data-look="gallery"] .ocf-about__checkitem-icon {
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ocf-heading) 32%, var(--ocf-bg));
}
html[data-look="gallery"] .ocf-about__checkitem-icon::before {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

/* ==========================================================================
   11. COMMITMENTS — numbered steps as small tracked labels, hairlines between
   ========================================================================== */
html[data-look="gallery"] .ocf-commitments-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 6vw, 5rem);
  align-items: center;
}
html[data-look="gallery"] .ocf-commitments-content { gap: clamp(2rem, 3vw, 2.75rem); }
html[data-look="gallery"] .ocf-commitments-description {
  margin-top: 1.35rem;
  max-width: 46ch;
  font-size: 16.5px;
  color: var(--ocf-body);
}
html[data-look="gallery"] .ocf-commitments .ocf-commitment:not(:last-child)::before,
html[data-look="gallery"] .ocf-commitments .ocf-commitment:not(:last-child)::after {
  content: none;
  display: none;
}
html[data-look="gallery"] .ocf-commitment {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.55rem 0;
  align-items: baseline;
}
html[data-look="gallery"] .ocf-commitment + .ocf-commitment {
  border-top: 1px solid var(--g-rule);
}
html[data-look="gallery"] .ocf-commitment-num {
  display: block;
  inline-size: auto;
  block-size: auto;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: var(--ocf-primary);
  text-align: left;
}
html[data-look="gallery"] .ocf-commitment h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-commitment p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--g-muted);
}
html[data-look="gallery"] .ocf-commitments-image img { aspect-ratio: 4 / 5; }

/* ==========================================================================
   12. SERVICE AREAS — framed map, plain area list with an en-dash marker
   ========================================================================== */
html[data-look="gallery"] .ocf-service-areas__grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: clamp(2.25rem, 6vw, 5rem);
  align-items: center;
}
html[data-look="gallery"] .ocf-service-areas__map {
  border: 1px solid var(--g-rule);
  border-radius: 0;
  background: var(--ocf-bg-alt);
  min-height: 23rem;
}
html[data-look="gallery"] .mock-map {
  background: var(--ocf-bg);
  min-height: 23rem;
  color: var(--ocf-primary);
}
html[data-look="gallery"] .mock-map__grid {
  background-image:
    linear-gradient(var(--g-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-rule) 1px, transparent 1px);
  background-size: 62px 62px, 62px 62px;
  background-position: -1px -1px, -1px -1px;
}
html[data-look="gallery"] .mock-map__pin {
  filter: none;
  color: var(--ocf-primary);
}
html[data-look="gallery"] .mock-map__pin svg { width: 1.5rem; height: 1.5rem; }
html[data-look="gallery"] .mock-map__label {
  background: var(--ocf-bg);
  border: 1px solid var(--g-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 0.45rem 0.9rem;
  transform: translate(-50%, 14px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-service-areas__content { gap: 1.35rem; }
html[data-look="gallery"] .ocf-service-areas__title { max-width: 15ch; }
html[data-look="gallery"] .ocf-service-areas__text { max-width: 46ch; font-size: 16.5px; }
html[data-look="gallery"] .ocf-service-areas .ocf-service-areas__links {
  gap: 0.85rem 1.5rem;
  margin-block: 0.75rem 0.5rem;
}
html[data-look="gallery"] .ocf-service-areas .ocf-service-areas__link {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ocf-heading);
  gap: 0.55rem;
}
html[data-look="gallery"] .ocf-service-areas__link-icon { display: none; }
html[data-look="gallery"] .ocf-service-areas .ocf-service-areas__link::before {
  content: "–";
  color: color-mix(in srgb, var(--ocf-heading) 40%, var(--ocf-bg));
}
html[data-look="gallery"] .ocf-service-areas .ocf-service-areas__link:hover { color: var(--ocf-primary); }
html[data-look="gallery"] .ocf-service-areas .btn-secondary {
  justify-self: start;
  margin-top: 0.75rem;
}

/* ==========================================================================
   13. FAQ — hairline rows, no cards
   ========================================================================== */
html[data-look="gallery"] .ocf-faq-header { max-width: 780px; margin-bottom: 0.5rem; }
html[data-look="gallery"] .ocf-faq-columns {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2.5rem;
}
html[data-look="gallery"] .ocf-faq-column { gap: 0; }
html[data-look="gallery"] .ocf-faq-item,
html[data-look="gallery"] .ocf-faq-item:hover,
html[data-look="gallery"] .ocf-faq-item.is-open {
  border: 0;
  border-bottom: 1px solid var(--g-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
html[data-look="gallery"] .ocf-faq-column .ocf-faq-item:first-child {
  border-top: 1px solid var(--g-rule);
}
html[data-look="gallery"] .ocf-faq-trigger {
  padding: 1.35rem 0;
  gap: 2rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .ocf-faq-trigger:hover { color: var(--ocf-primary); }
html[data-look="gallery"] .ocf-faq-icon {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ocf-heading);
  stroke-width: 1.1;
}
/* the collapsed answer is a 0fr grid row clipped by overflow:hidden — any
   padding on the <p> would show through, so the open row carries the space */
html[data-look="gallery"] .ocf-faq-answer p {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--g-muted);
}
html[data-look="gallery"] .ocf-faq-item.is-open { padding-bottom: 1.6rem; }

/* ==========================================================================
   14. CTA — a centred statement between two hairlines, not a card
   ========================================================================== */
html[data-look="gallery"] .ocf-cta {
  background: var(--ocf-bg) !important;
  border-top: 0;
  min-height: 0;
  --cta-headline-color: var(--ocf-heading);
  --cta-body-color: var(--ocf-body);
  --cta-card-background: transparent;
  --cta-card-border-color: transparent;
  --cta-card-radius: 0px;
  --cta-card-shadow: none;
}
html[data-look="gallery"] .ocf-cta .ocf-cta__panel {
  width: min(100%, 62rem);
  margin-inline: auto;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--g-rule);
  border-bottom: 1px solid var(--g-rule);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(3rem, 6vw, 4.75rem) 0;
}
html[data-look="gallery"] .ocf-cta .ocf-cta__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding: 0;
  gap: 2.25rem;
}
html[data-look="gallery"] .ocf-cta .ocf-cta__copy { max-width: 34ch; }
html[data-look="gallery"] .ocf-cta__headline {
  font-weight: 300;
  font-size: clamp(30px, 3.5vw, 48px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
html[data-look="gallery"] .ocf-cta .ocf-cta__body {
  margin-top: 1.15rem;
  max-width: 52ch;
  margin-inline: auto;
  font-size: 16.5px;
  color: var(--ocf-body);
}
html[data-look="gallery"] .ocf-cta .ocf-cta__actions {
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
html[data-look="gallery"] .ocf-cta .ocf-cta__phone {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--g-muted);
  gap: 0.55rem;
  text-align: left;
}
html[data-look="gallery"] .ocf-cta .ocf-cta__phone svg { width: 1rem; height: 1rem; stroke-width: 1.25; }
html[data-look="gallery"] .ocf-cta .ocf-cta__phone strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ocf-heading);
}

/* ==========================================================================
   15. FOOTER — light, hairline top rule, letter-spaced column headings
   ========================================================================== */
html[data-look="gallery"] .site-footer {
  background: var(--ocf-bg);
  padding-top: 0;
  color: var(--ocf-footer-body);
  border-top: 1px solid var(--g-rule);
  overflow: visible;
}
html[data-look="gallery"] .site-footer::before { content: none; display: none; }
html[data-look="gallery"] .site-footer .section-padding {
  padding-block: clamp(3.25rem, 5.5vw, 5rem) clamp(2rem, 3vw, 2.75rem);
}
html[data-look="gallery"] .footer-grid { gap: 2.5rem; }
html[data-look="gallery"] .footer-brand-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .footer-brand-desc {
  margin-top: 1.1rem;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--g-muted);
}
html[data-look="gallery"] .footer-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocf-heading);
  margin-bottom: 1.1rem;
}
html[data-look="gallery"] .footer-link-list,
html[data-look="gallery"] .footer-contact-links { font-size: 14.5px; gap: 0.6rem; }
html[data-look="gallery"] .footer-link-list a,
html[data-look="gallery"] .footer-contact-links a,
html[data-look="gallery"] .footer-bottom-links a,
html[data-look="gallery"] .footer-address {
  color: var(--g-muted);
}
html[data-look="gallery"] .footer-link-list a:hover,
html[data-look="gallery"] .footer-contact-links a:hover,
html[data-look="gallery"] .footer-bottom-links a:hover { color: var(--ocf-heading); }
html[data-look="gallery"] .footer-contact-links svg,
html[data-look="gallery"] .footer-address svg { stroke-width: 1.25; }
html[data-look="gallery"] .footer-bottom {
  border-top: 1px solid var(--g-rule);
  margin-top: 2.75rem;
  padding-top: 1.35rem;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--g-muted);
}
html[data-look="gallery"] .footer-bottom-links { gap: 1.5rem; }

/* mobile menu chrome */
html[data-look="gallery"] .mobile-menu { border-top-color: var(--g-rule); }
html[data-look="gallery"] .mobile-link,
html[data-look="gallery"] .mobile-accordion-trigger {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ocf-heading);
}
html[data-look="gallery"] .mobile-phone {
  border-radius: 0;
  border-color: var(--g-rule);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ==========================================================================
   16. MOBILE
   ========================================================================== */
@media (max-width: 900px) {
  html[data-look="gallery"] .ocf-hero { min-height: auto; }
  html[data-look="gallery"] .ocf-hero .ocf-hero__grid {
    /* same nav-height double-count fix as the desktop rule above */
    padding-block: 2.25rem 3.5rem;
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  html[data-look="gallery"] .ocf-hero__shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocf-bg) 93%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg) 90%, transparent) 48%,
        color-mix(in srgb, var(--ocf-bg) 80%, transparent) 100%
      );
  }
  html[data-look="gallery"] .ocf-hero__content { max-width: none; }
  html[data-look="gallery"] .ocf-hero__headline { max-width: none; }
  html[data-look="gallery"] .ocf-svc-track { gap: 1px; }
}

@media (max-width: 860px) {
  /* my desktop column rules out-specify the theme's own stacking media
     queries, so restate the single-column layouts here */
  html[data-look="gallery"] .ocf-about__grid,
  html[data-look="gallery"] .ocf-commitments-grid,
  html[data-look="gallery"] .ocf-service-areas__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  html[data-look="gallery"] .ocf-about__media img,
  html[data-look="gallery"] .ocf-commitments-image img { aspect-ratio: 4 / 3; }
  html[data-look="gallery"] .ocf-about__headline,
  html[data-look="gallery"] .ocf-service-areas__title { max-width: none; }
  html[data-look="gallery"] .ocf-service-areas__map,
  html[data-look="gallery"] .mock-map { min-height: 17rem; }
}

@media (max-width: 720px) {
  /* the theme narrows .container-global to a 1rem gutter here */
  html[data-look="gallery"] .ocf-services .eyebrow,
  html[data-look="gallery"] .ocf-commitments .eyebrow,
  html[data-look="gallery"] .ocf-faq .eyebrow,
  html[data-look="gallery"] .ocf-service-areas__eyebrow,
  html[data-look="gallery"] .ocf-about__eyebrow,
  html[data-look="gallery"] .ocf-cta__eyebrow { left: 1rem; }
  html[data-look="gallery"] .ocf-services,
  html[data-look="gallery"] .ocf-about,
  html[data-look="gallery"] .ocf-commitments,
  html[data-look="gallery"] .ocf-service-areas,
  html[data-look="gallery"] .ocf-faq,
  html[data-look="gallery"] .ocf-cta {
    padding-top: calc(var(--section-pad) + 2.6rem);
  }
  html[data-look="gallery"] .ocf-services::before,
  html[data-look="gallery"] .ocf-about::before,
  html[data-look="gallery"] .ocf-commitments::before,
  html[data-look="gallery"] .ocf-service-areas::before,
  html[data-look="gallery"] .ocf-faq::before,
  html[data-look="gallery"] .ocf-cta::before { top: 2.9rem; }
  html[data-look="gallery"] .ocf-services .eyebrow,
  html[data-look="gallery"] .ocf-commitments .eyebrow,
  html[data-look="gallery"] .ocf-faq .eyebrow,
  html[data-look="gallery"] .ocf-service-areas__eyebrow,
  html[data-look="gallery"] .ocf-about__eyebrow,
  html[data-look="gallery"] .ocf-cta__eyebrow { top: 1.25rem; }

  html[data-look="gallery"] .ocf-services-header { display: grid; gap: 1.5rem; }
  html[data-look="gallery"] .ocf-svc-nav { justify-content: flex-start; }
  html[data-look="gallery"] .hero-form-card { padding: 1.6rem 1.4rem 1.5rem; }
  html[data-look="gallery"] .ocf-name-grid { gap: 1rem; }
  html[data-look="gallery"] .ocf-faq-trigger { font-size: 17px; gap: 1.25rem; }
  html[data-look="gallery"] .ocf-service-areas .ocf-service-areas__links { grid-template-columns: 1fr; }
  html[data-look="gallery"] .footer-bottom { flex-direction: column; gap: 0.85rem; }
}

/* ==========================================================================
   17. MOTION — almost none; the arrow is the only thing that moves
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-look="gallery"] *,
  html[data-look="gallery"] *::before,
  html[data-look="gallery"] *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html[data-look="gallery"] .ocf-svc-card:hover .ocf-svc-arrow { transform: none; }
}

/* ==========================================================================
   18. INNER PAGES: service/area/about/contact/sitemap
   ========================================================================== */
/* "Sharp corners everywhere" (block 2's --radius-*/--card-radius/
   --image-radius tokens, all 0) already reaches every ocf-* component
   reused on the inner pages -- service/area cards, FAQ rows, buttons,
   dropdowns, hero-form-card fields -- with no extra rule, same as every
   other structural token this look sets. Only these two icon badges (the
   Services page's "need help?" card and the Service Areas archive's
   contact card) hardcode a circle (border-radius: 50%) in their own
   component CSS rather than reading a radius token, so they are the one
   place that needs an explicit square-corner rule to match every other
   sharp-cornered surface on the page -- same gap Bold's own look found in
   the same two classes. */
html[data-look="gallery"] .ocf-services-help-card__icon,
html[data-look="gallery"] .ocf-service-areas-archive__contact-icon {
  border-radius: 0;
}