/* ==========================================================================
   LOOK: "friendly" — the neighbour you can call.
   Rounded, bright, soft-tinted, big clear icons. Warm but still a real company.
   Signature: the "pillow hero" — the photo is inset inside the hero with the
   page tint framing it, not full-bleed.
   Everything below derives colour from tokens; the look never declares a
   customer-palette --color-* token itself.
   ========================================================================== */
/* Shipped copy of docs/looks/friendly.css (Hermes) -- demo colours removed,
   token blocks at :root:where() specificity; see tests/test_looks_registry.py */

/* --------------------------------------------------------------------------
   1. LOOK TOKENS (no literal brand hue below this line)
   -------------------------------------------------------------------------- */
:root:where([data-look="friendly"]) {
  /* type */
  --font-heading: 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --ocf-font-heading: 'Nunito', system-ui, sans-serif;
  --ocf-font-body: 'Nunito Sans', system-ui, sans-serif;

  --ocf-font-h1-size: clamp(34px, 4.6vw, 62px);
  --ocf-font-h2-size: clamp(28px, 3vw, 38px);
  --ocf-font-h3-size: 21px;
  --ocf-font-body-size: 18px;
  --ocf-font-h1-weight: 800;
  --ocf-font-h2-weight: 800;
  --ocf-font-h3-weight: 800;
  --font-weight-bold: 800;
  --font-weight-semibold: 700;

  /* shape language — very rounded */
  --ocf-radius-lg: 24px;              /* the card token */
  --ocf-card-radius: 24px;
  --ocf-card-radius-lg: 28px;
  --ocf-radius-sm: 14px;
  --ocf-radius-input: 14px;
  --ocf-image-radius: 24px;
  --ocf-button-radius: 999px;
  --ocf-radius-outline: 999px;
  --button-border-width: 0px;

  /* soft, slightly accent-tinted shadows */
  --ocf-card-shadow: 0 0.35rem 1.35rem color-mix(in srgb, var(--color-accent) 14%, transparent);
  --ocf-card-shadow-hover: 0 0.85rem 2.1rem color-mix(in srgb, var(--color-accent) 20%, transparent);
  --ocf-image-shadow: 0 0.6rem 1.8rem color-mix(in srgb, var(--color-accent) 15%, transparent);
  --ocf-button-shadow: 0 0.45rem 1.1rem color-mix(in srgb, var(--color-accent) 22%, transparent);
  --ocf-button-shadow-hover: 0 0.75rem 1.6rem color-mix(in srgb, var(--color-accent) 30%, transparent);
  --card-transform-hover: translateY(-4px);
  --card-border-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-border-light));

  /* rhythm */
  --ocf-section-pad: clamp(3.5rem, 7vw, 6rem);
  --grid-gap: 1.5rem;

  /* footer: deep heading colour, never black */
  --ocf-footer-bg: var(--color-heading);
  --ocf-footer-heading: #FFFFFF;
  --ocf-footer-body: color-mix(in srgb, #FFFFFF 74%, transparent);

  /* local helpers */
  --fr-band-radius: 48px;
  --fr-tint-08: color-mix(in srgb, var(--ocf-primary) 8%, var(--ocf-bg));
  --fr-tint-12: color-mix(in srgb, var(--ocf-primary) 12%, var(--ocf-bg));
  --fr-scrim: color-mix(in srgb, var(--ocf-primary) 32%, var(--ocf-heading));
}

/* --------------------------------------------------------------------------
   2. TYPE
   -------------------------------------------------------------------------- */
html[data-look="friendly"] body {
  font-family: var(--ocf-font-body), system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

html[data-look="friendly"] h1,
html[data-look="friendly"] h2,
html[data-look="friendly"] h3,
html[data-look="friendly"] h4,
html[data-look="friendly"] .heading-1,
html[data-look="friendly"] .heading-2,
html[data-look="friendly"] .heading-3,
html[data-look="friendly"] .ocf-hero__headline,
html[data-look="friendly"] .ocf-about__headline,
html[data-look="friendly"] .ocf-cta__headline {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

html[data-look="friendly"] .heading-1,
html[data-look="friendly"] .ocf-hero__headline { font-weight: 800; line-height: 1.07; }
html[data-look="friendly"] .heading-2,
html[data-look="friendly"] .ocf-about__headline,
html[data-look="friendly"] .ocf-cta__headline { font-weight: 800; }
html[data-look="friendly"] .heading-3 { font-weight: 800; }

/* Eyebrows become small rounded tinted chips (base skin hides them). */
html[data-look="friendly"] .eyebrow,
html[data-look="friendly"] .ocf-about__eyebrow,
html[data-look="friendly"] .ocf-cta__eyebrow {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border: 0;
  margin: 0 0 1.05rem;
  padding: 0.4rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  align-self: start;
  white-space: nowrap;
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ocf-primary);
  background: color-mix(in srgb, var(--ocf-primary) 10%, var(--ocf-bg));
  border-radius: 999px;
}
html[data-look="friendly"] .ocf-services-eyebrow { margin-bottom: 0.9rem; }
html[data-look="friendly"] .ocf-service-areas__eyebrow { margin-bottom: 0.1rem; }
html[data-look="friendly"] .ocf-eyebrow-link { padding-bottom: 0; }
html[data-look="friendly"] .ocf-eyebrow-link::after { content: none; }

/* Heading accent: short amber pill dash. */
html[data-look="friendly"] .eyebrow + h2::after,
html[data-look="friendly"] .eyebrow + h3::after,
html[data-look="friendly"] .ocf-about__eyebrow + .ocf-about__headline::after,
html[data-look="friendly"] .ocf-cta__eyebrow + .ocf-cta__headline::after {
  content: '';
  display: block;
  width: 38px;
  height: 6px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--ocf-secondary);
}

/* --------------------------------------------------------------------------
   3. NAV — light, airy, pill-shaped bits
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .nav-bar {
  background: color-mix(in srgb, var(--ocf-bg) 90%, transparent);
  border-bottom-color: transparent;
  box-shadow: 0 0.5rem 1.6rem color-mix(in srgb, var(--ocf-primary) 9%, transparent);
}
html[data-look="friendly"] .nav-bar.is-condensed {
  background: color-mix(in srgb, var(--ocf-bg) 97%, transparent);
  box-shadow: 0 0.6rem 1.8rem color-mix(in srgb, var(--ocf-primary) 12%, transparent);
}
html[data-look="friendly"] .nav-logo-text {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
html[data-look="friendly"] .nav-link,
html[data-look="friendly"] .nav-dropdown-trigger {
  font-weight: 700;
  border-radius: 999px;
}
html[data-look="friendly"] .nav-phone {
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--ocf-primary);
  background: color-mix(in srgb, var(--ocf-primary) 9%, var(--ocf-bg));
}
html[data-look="friendly"] .nav-divider { opacity: 0; }
html[data-look="friendly"] .nav-cta,
html[data-look="friendly"] .mobile-cta {
  font-weight: 800;
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
}
html[data-look="friendly"] .dropdown-menu {
  border-radius: 20px;
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
}
html[data-look="friendly"] .dropdown-item { border-radius: 12px; }

/* --------------------------------------------------------------------------
   4. HERO — the pillow
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-hero {
  background: var(--ocf-bg-alt);
  margin-bottom: 0;                     /* no hero-stat card in this markup */
  overflow: hidden;
  --hero-rating-color: var(--ocf-heading);
  --hero-check-color: var(--ocf-primary);
  --hero-intro-color: color-mix(in srgb, var(--ocf-heading-alt) 90%, transparent);
  /* G0b hero centering (same fix proven on Bold, see bold.css's own
     comment): the active skin's generic `[data-skin] section { padding:
     var(--section-pad) 0; }` rule stacks a SECOND layer of vertical
     padding on this <section class="ocf-section ocf-hero">, on top of
     hero.css's own internal rhythm (`.ocf-hero .ocf-hero__grid`'s own
     padding-block). Friendly's --ocf-section-pad token (block 1 above)
     feeds that stacked outer layer too, so on real customer copy it
     grows the band past its min-height floor. Cancel the redundant
     outer layer so the band's height is governed solely by hero.css's
     own internal grid rhythm + min-height floor. */
  padding-block: 0;
}
/* hero.css's own grid row uses align-items: start -- the pillow's inset
   photo frame and the lead-form card rarely land the same height, so a
   top-anchored row leaves the shorter column sitting high. Center both
   columns on the band's own vertical middle instead. */
html[data-look="friendly"] .ocf-hero__grid {
  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="friendly"] .ocf-hero__form {
  align-self: center;
}

html[data-look="friendly"] .ocf-hero__media,
html[data-look="friendly"] .ocf-hero__shade {
  inset: 1.5rem;
  border-radius: 32px;
  overflow: hidden;
}
html[data-look="friendly"] .ocf-hero__media img {
  border-radius: 32px;
  filter: saturate(1.08) brightness(1.03);
}

/* Soft accent-tinted wash from the bottom-left, clear at the top-right. */
html[data-look="friendly"] .ocf-hero__shade {
  opacity: 1;
  background:
    linear-gradient(to top right,
      color-mix(in srgb, var(--fr-scrim) 82%, transparent) 0%,
      color-mix(in srgb, var(--fr-scrim) 42%, transparent) 38%,
      color-mix(in srgb, var(--fr-scrim) 10%, transparent) 68%,
      transparent 88%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--fr-scrim) 68%, transparent) 0%,
      color-mix(in srgb, var(--fr-scrim) 48%, transparent) 28%,
      color-mix(in srgb, var(--fr-scrim) 20%, transparent) 50%,
      transparent 68%);
}

/* rating pill: white, soft-shadowed */
html[data-look="friendly"] .ocf-hero__rating {
  background: var(--ocf-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0.5rem 1.05rem;
  color: var(--ocf-heading);
  box-shadow: 0 0.5rem 1.2rem color-mix(in srgb, var(--ocf-heading) 22%, transparent);
}
html[data-look="friendly"] .ocf-hero__rating-value {
  font-weight: 800;
  color: var(--ocf-heading);
}
html[data-look="friendly"] .ocf-hero__rating-label { color: var(--ocf-body); font-weight: 600; }

html[data-look="friendly"] .ocf-hero__intro {
  margin-top: 1.15rem;
  font-size: 19px;
  line-height: 1.6;
}

/* checks: white text + round accent bubbles with white ticks */
html[data-look="friendly"] .ocf-hero__checks {
  gap: 0.7rem;
  margin-top: 1.35rem;
  font-weight: 700;
}
html[data-look="friendly"] .ocf-hero__checks li { gap: 0.8rem; }
html[data-look="friendly"] .ocf-hero__checks li > span:not(.ocf-hero__check-icon),
html[data-look="friendly"] .ocf-hero__check-text {
  color: var(--ocf-heading-alt);
}
html[data-look="friendly"] .ocf-hero__checks li > svg {
  width: 28px;
  height: 28px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
  box-shadow: 0 0.3rem 0.7rem color-mix(in srgb, var(--ocf-primary) 45%, transparent);
}
html[data-look="friendly"] .ocf-hero__actions { margin-top: 1.6rem; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .btn-primary,
html[data-look="friendly"] .nav-cta,
html[data-look="friendly"] .ultimate-b1-btn,
html[data-look="friendly"] .hero-form-card .form-submit-btn,
html[data-look="friendly"] .mobile-cta {
  border-radius: 999px !important;
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.005em;
}
html[data-look="friendly"] .btn-lg { min-height: 3.25rem; padding-inline: 1.6rem; }

html[data-look="friendly"] .btn-secondary {
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--ocf-primary) 34%, transparent);
  color: var(--ocf-primary);
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  min-height: 3rem;
  padding-inline: 1.4rem;
}
html[data-look="friendly"] .btn-secondary:hover,
html[data-look="friendly"] .btn-secondary:focus-visible {
  border-color: var(--ocf-primary);
  background: color-mix(in srgb, var(--ocf-primary) 10%, var(--ocf-bg));
  color: var(--ocf-primary);
}

/* --------------------------------------------------------------------------
   6. HERO FORM CARD
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .hero-form-card {
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--ocf-primary) 12%, var(--ocf-bg));
  background: var(--ocf-bg);
  box-shadow:
    0 1.4rem 3rem color-mix(in srgb, var(--ocf-primary) 20%, transparent),
    0 0.3rem 0.8rem color-mix(in srgb, var(--ocf-heading) 8%, transparent);
  padding: 1.9rem;
}
html[data-look="friendly"] .hero-form-card .hero-form-title {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}
html[data-look="friendly"] .hero-form-card .hero-form-fields { gap: 0.8rem; }

html[data-look="friendly"] .ultimate-f1-field input,
html[data-look="friendly"] .ultimate-f1-field textarea {
  border-radius: 14px !important;
  border: 1.5px solid color-mix(in srgb, var(--ocf-primary) 13%, var(--ocf-bg)) !important;
  background: color-mix(in srgb, var(--ocf-primary) 5%, var(--ocf-bg)) !important;
  font-family: var(--ocf-font-body), system-ui, sans-serif;
}
html[data-look="friendly"] .ultimate-f1-field input:focus,
html[data-look="friendly"] .ultimate-f1-field textarea:focus {
  border-color: var(--ocf-primary) !important;
  background: var(--ocf-bg) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ocf-primary) 14%, transparent) !important;
}
html[data-look="friendly"] .ultimate-f1-field label { font-weight: 600; }
html[data-look="friendly"] .hero-form-card .form-submit-btn {
  min-height: 3.15rem;
  margin-top: 0.25rem;
}
html[data-look="friendly"] .ultimate-b1-arrow { color: var(--ocf-secondary); }
html[data-look="friendly"] .ocf-form-secure-note { font-weight: 600; }

/* --------------------------------------------------------------------------
   7. BAND RHYTHM — tinted bands get a gentle rounded lift off the white page
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-about {
  border-radius: var(--fr-band-radius) var(--fr-band-radius) 0 0;
}
html[data-look="friendly"] .ocf-commitments {
  border-radius: 0 0 var(--fr-band-radius) var(--fr-band-radius);
}
html[data-look="friendly"] .ocf-faq {
  border-radius: var(--fr-band-radius);
}

/* --------------------------------------------------------------------------
   8. SERVICES — sticker-inset photo cards + round tinted carousel arrows
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-services-header { margin-bottom: 2.4rem; align-items: end; }

html[data-look="friendly"] .ocf-svc-nav button {
  width: 2.85rem;
  height: 2.85rem;
  border: 0;
  border-radius: 50%;
  color: var(--ocf-primary);
  background: color-mix(in srgb, var(--ocf-primary) 11%, var(--ocf-bg));
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
html[data-look="friendly"] .ocf-svc-nav button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ocf-primary) 18%, var(--ocf-bg));
  transform: translateY(-2px);
}
html[data-look="friendly"] .ocf-svc-nav button:disabled { opacity: 0.42; }

html[data-look="friendly"] .ocf-svc-card {
  border-radius: 24px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ocf-primary) 9%, var(--ocf-bg));
  background: var(--ocf-bg);
  box-shadow: var(--card-shadow);
}
html[data-look="friendly"] .ocf-svc-card-img {
  border-radius: 18px;
  overflow: hidden;
  background: var(--fr-tint-08);
}
html[data-look="friendly"] .ocf-svc-card-img img { filter: saturate(1.08) brightness(1.03); }
html[data-look="friendly"] .ocf-svc-card-body {
  padding: 1.15rem 0.95rem 0.9rem;
  gap: 0.6rem;
}
html[data-look="friendly"] .ocf-svc-card-body h3 {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}
html[data-look="friendly"] .ocf-svc-card-body h3::after {
  height: 3px;
  border-radius: 999px;
  background: var(--ocf-secondary);
}
html[data-look="friendly"] .ocf-svc-card-body p { line-height: 1.55; }

/* "See details" becomes a pill outline link */
html[data-look="friendly"] .ocf-svc-card-cta {
  border-top: 0;
  margin-top: 0.35rem;
  padding: 0.4rem 0.5rem 0.4rem 0.95rem;
  width: auto;
  justify-self: start;
  justify-content: flex-start;
  gap: 0.35rem;
  border: 1.5px solid color-mix(in srgb, var(--ocf-primary) 28%, transparent);
  border-radius: 999px;
  color: var(--ocf-primary);
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
html[data-look="friendly"] .ocf-svc-arrow {
  width: 1.4rem;
  height: 1.4rem;
  background: transparent;
  box-shadow: none;
  color: var(--ocf-primary);
}
html[data-look="friendly"] .ocf-svc-card:hover .ocf-svc-card-cta {
  background: color-mix(in srgb, var(--ocf-primary) 10%, var(--ocf-bg));
  border-color: color-mix(in srgb, var(--ocf-primary) 45%, transparent);
}

/* --------------------------------------------------------------------------
   9. ABOUT — rounded photo, big accent check bubbles
   -------------------------------------------------------------------------- */
:root:where([data-look="friendly"]) .ocf-about {
  --about-check-color: var(--ocf-primary);
  --about-check-mark-color: var(--ocf-primary-contrast);
}
html[data-look="friendly"] .ocf-about__media {
  border-radius: 24px;
  border: 0;
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
}
html[data-look="friendly"] .ocf-about__media img { filter: saturate(1.08) brightness(1.03); }
html[data-look="friendly"] .ocf-about__body ul { gap: 1rem; margin-top: 0.6rem; }
html[data-look="friendly"] .ocf-about__body li { padding-left: 3.35rem; }
html[data-look="friendly"] .ocf-about__body li::before {
  width: 1.75rem;
  height: 1.75rem;
  box-shadow: 0 0.3rem 0.75rem color-mix(in srgb, var(--ocf-primary) 35%, transparent);
}
html[data-look="friendly"] .ocf-about__body strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   10. COMMITMENTS — amber-tinted round step badges, dotted connector
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-commitment-num {
  inline-size: 3rem;
  block-size: 3rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ocf-secondary) 26%, var(--ocf-bg));
  color: var(--ocf-primary);
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}
html[data-look="friendly"] .ocf-commitments .ocf-commitment:not(:last-child)::before {
  top: calc(3rem + 0.35rem);
  bottom: calc(-1.2rem + 0.35rem);
  left: calc(1.5rem - 1px);
  border-left: 3px dotted color-mix(in srgb, var(--ocf-primary) 34%, var(--ocf-bg-alt));
}
html[data-look="friendly"] .ocf-commitments .ocf-commitment:not(:last-child)::after { content: none; }
html[data-look="friendly"] .ocf-commitment + .ocf-commitment { border-top: 0; }
html[data-look="friendly"] .ocf-commitment { padding: 1.05rem 0; }
html[data-look="friendly"] .ocf-commitment h3 {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  font-size: 21px;
  margin-bottom: 0.25rem;
}
html[data-look="friendly"] .ocf-commitments-image {
  border-radius: 24px;
  border: 0;
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
}
html[data-look="friendly"] .ocf-commitments-image img { filter: saturate(1.08) brightness(1.03); }

/* --------------------------------------------------------------------------
   11. SERVICE AREAS — framed map, check-bubble area links
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-service-areas__map {
  border-radius: 24px;
  border: 0;
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
  min-height: 23rem;
}
html[data-look="friendly"] .mock-map {
  background: color-mix(in srgb, var(--ocf-primary) 9%, var(--ocf-bg));
  min-height: 23rem;
}
html[data-look="friendly"] .mock-map__label {
  font-family: var(--ocf-font-body), system-ui, sans-serif;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--ocf-heading) 16%, transparent);
}
html[data-look="friendly"] .ocf-service-areas .ocf-service-areas__links {
  gap: 0.85rem 1rem;
  margin-block: 0.85rem 0.35rem;
}
html[data-look="friendly"] .ocf-service-areas .ocf-service-areas__link {
  gap: 0.65rem;
  font-weight: 700;
  align-items: center;
}
html[data-look="friendly"] .ocf-service-areas__link-icon {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.32rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ocf-primary) 13%, var(--ocf-bg));
  color: var(--ocf-primary);
  transition: background var(--duration) var(--ease);
}
html[data-look="friendly"] .ocf-service-areas .ocf-service-areas__link:hover .ocf-service-areas__link-icon {
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
}

/* --------------------------------------------------------------------------
   12. FAQ — rounded white cards, tinted round plus button
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-faq-columns { gap: 0.9rem; margin-top: 2rem; }
html[data-look="friendly"] .ocf-faq-column { gap: 0.9rem; }
html[data-look="friendly"] .ocf-faq-item {
  border: 0;
  border-radius: 20px;
  background: var(--ocf-bg);
  padding: 1.15rem 1.35rem;
  box-shadow: 0 0.35rem 1.1rem color-mix(in srgb, var(--ocf-primary) 12%, transparent);
  transition: box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}
html[data-look="friendly"] .ocf-faq-item:hover {
  box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, var(--ocf-primary) 18%, transparent);
}
html[data-look="friendly"] .ocf-faq-item.is-open {
  background: var(--ocf-bg);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--ocf-primary) 22%, transparent),
    0 0.6rem 1.6rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
}
html[data-look="friendly"] .ocf-faq-trigger {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
html[data-look="friendly"] .ocf-faq-icon {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ocf-primary) 15%, var(--ocf-bg));
  color: var(--ocf-primary);
}
html[data-look="friendly"] .ocf-faq-item.is-open .ocf-faq-icon {
  background: var(--ocf-primary);
  color: var(--ocf-primary-contrast);
}
html[data-look="friendly"] .ocf-faq-answer p { padding-top: 0.6rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   13. CTA — big rounded tinted card with a warm amber corner glow
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .ocf-cta .ocf-cta__panel {
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--ocf-primary) 12%, transparent);
  overflow: hidden;
  /* warm amber corner glow, painted as a background layer so the rounded
     card always clips it cleanly */
  background:
    radial-gradient(320px 320px at calc(100% - 60px) -40px,
      color-mix(in srgb, var(--ocf-secondary) 46%, transparent) 0%,
      color-mix(in srgb, var(--ocf-secondary) 18%, transparent) 52%,
      transparent 76%),
    var(--ocf-bg-alt);
  box-shadow: 0 1rem 2.6rem color-mix(in srgb, var(--ocf-primary) 13%, transparent);
  padding: clamp(2.1rem, 4vw, 3.25rem);
}
html[data-look="friendly"] .ocf-cta .ocf-cta__inner { z-index: 1; }
html[data-look="friendly"] .ocf-cta .ocf-cta__phone {
  border: 2px solid color-mix(in srgb, var(--ocf-primary) 34%, transparent);
  border-radius: 999px;
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  min-height: 3.25rem;
  padding-inline: 1.4rem;
}
html[data-look="friendly"] .ocf-cta .ocf-cta__phone:hover,
html[data-look="friendly"] .ocf-cta .ocf-cta__phone:focus-visible {
  text-decoration: none;
  border-color: var(--ocf-primary);
  background: color-mix(in srgb, var(--ocf-primary) 10%, var(--ocf-bg));
}
html[data-look="friendly"] .ocf-cta .ocf-cta__body { font-size: 18px; }

/* --------------------------------------------------------------------------
   14. FOOTER — deep navy tab with rounded top corners
   -------------------------------------------------------------------------- */
html[data-look="friendly"] .site-footer {
  border-radius: 32px 32px 0 0;
  border-top: 0;
}
html[data-look="friendly"] .site-footer::before {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--ocf-primary) 34%, transparent), transparent 70%);
}
html[data-look="friendly"] .footer-brand-name {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
html[data-look="friendly"] .footer-heading {
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}
html[data-look="friendly"] .footer-link-list { gap: 0.55rem; }
html[data-look="friendly"] .footer-contact-links { gap: 0.75rem; }
html[data-look="friendly"] .footer-contact-links a,
html[data-look="friendly"] .footer-address {
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
}
html[data-look="friendly"] .footer-contact-links svg,
html[data-look="friendly"] .footer-address svg {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  margin: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: color-mix(in srgb, #FFFFFF 12%, transparent);
  color: #FFFFFF;
}
html[data-look="friendly"] .footer-bottom {
  border-top-color: color-mix(in srgb, #FFFFFF 14%, transparent);
  padding-top: 1.4rem;
}

/* --------------------------------------------------------------------------
   15. FOCUS + MOTION
   -------------------------------------------------------------------------- */
html[data-look="friendly"] a:focus-visible,
html[data-look="friendly"] button:focus-visible,
html[data-look="friendly"] input:focus-visible,
html[data-look="friendly"] textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ocf-primary) 60%, transparent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-look="friendly"] *,
  html[data-look="friendly"] *::before,
  html[data-look="friendly"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html[data-look="friendly"] .ocf-svc-card:hover,
  html[data-look="friendly"] .ocf-svc-nav button:hover:not(:disabled) { transform: none; }
}

/* --------------------------------------------------------------------------
   16. NARROW VIEWPORTS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root:where([data-look="friendly"]) {
    --fr-band-radius: 32px;
  }
  html[data-look="friendly"] .ocf-hero__media,
  html[data-look="friendly"] .ocf-hero__shade {
    inset: 0.75rem;
    border-radius: 24px;
  }
  html[data-look="friendly"] .ocf-hero__media img { border-radius: 24px; }
  html[data-look="friendly"] .ocf-hero__shade {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--fr-scrim) 72%, transparent) 0%,
        color-mix(in srgb, var(--fr-scrim) 62%, transparent) 40%,
        color-mix(in srgb, var(--fr-scrim) 40%, transparent) 70%,
        color-mix(in srgb, var(--fr-scrim) 22%, transparent) 100%);
  }
  /* keep the form card and copy off the pillow's own edge */
  html[data-look="friendly"] .ocf-hero .ocf-hero__grid {
    padding-inline: 0.9rem;
    padding-block: clamp(4.5rem, 9vw, 6rem) clamp(3rem, 7vw, 4rem);
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-look="friendly"] .ocf-hero__content,
  html[data-look="friendly"] .ocf-hero__form { min-width: 0; max-width: 100%; }
  html[data-look="friendly"] .hero-form-card { padding: 1.5rem; border-radius: 24px; }
  html[data-look="friendly"] .ocf-cta .ocf-cta__panel { border-radius: 24px; }
  html[data-look="friendly"] .site-footer { border-radius: 24px 24px 0 0; }
}