/*
Theme Name:   Kadence Child
Theme URI:    https://howcashfordiamonds.co.uk
Author:       Mike
Description:  HowCashForDiamonds — Kadence child theme. v2 design system: Cormorant Garamond + Inter, forest/champagne/ivory palette. Source of truth: design-reference/design-spec.md
Version:      2.0.0
Template:     kadence
Text Domain:  kadence-child
*/

/* ==========================================================================
   HowCashForDiamonds — v2 Design System
   Reference: design-reference/howcashfordiamonds-wp-theme/howcashfordiamonds/assets/css/theme.css
   Google Fonts are loaded via functions.php (hcfd_enqueue_google_fonts).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — CSS Custom Properties
   --------------------------------------------------------------------------
   All values here are the canonical source. Replicate in theme.json only if
   you need them exposed in the block editor sidebar.
   -------------------------------------------------------------------------- */

:root {

  /* ── Colour palette ───────────────────────────────────────────────────────
     Using oklch() for perceptual uniformity. All major browsers support it
     (Chrome 111+, Firefox 113+, Safari 15.4+). Hex equivalents in comments
     for tooling that doesn't parse oklch yet.                               */

  --ink: oklch(0.18 0 0);
  /* ≈ #111111 — primary text, dark btn bg  */
  --forest: oklch(0.32 0.06 155);
  /* ≈ #0F3D2E — brand primary, hovers      */
  --champagne: oklch(0.76 0.08 80);
  /* ≈ #C9A96E — brand accent, gold detail  */
  --ivory: oklch(0.97 0.012 85);
  /* ≈ #F8F4EC — page background            */
  --cream: oklch(0.985 0.008 85);
  /* ≈ #FBF9F4 — card / surface background  */
  --stone: oklch(0.52 0.01 60);
  /* ≈ #6B6660 — secondary / muted text     */
  --mist: oklch(0.9 0.01 75);
  /* ≈ #E8E4DC — borders, hairlines         */
  --rose: oklch(0.66 0.06 30);
  /* ≈ #B68A7C — warm accent (testimonials) */
  --success: oklch(0.50 0.12 145);
  /* ≈ #2F7D4F — confirmation states        */
  --alert: oklch(0.45 0.12 25);
  /* ≈ #A8442D — errors and warnings        */

  /* ── Typography ──────────────────────────────────────────────────────────
     Loaded via Google Fonts in functions.php.                               */

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  /* Static size scale (rem / px reference) */
  --text-xs: 0.75rem;
  /*  12px — eyebrow labels, table headers  */
  --text-sm: 0.875rem;
  /*  14px — UI copy, buttons, captions     */
  --text-base: 1.0625rem;
  /*  17px — body copy (desktop)            */
  --text-lg: 1.125rem;
  /*  18px                                  */
  --text-xl: 1.25rem;
  /*  20px                                  */
  --text-2xl: 1.5rem;
  /*  24px                                  */
  --text-3xl: 1.875rem;
  /*  30px                                  */
  --text-4xl: 2.25rem;
  /*  36px                                  */
  --text-5xl: 3rem;
  /*  44px                                  */

  /* Fluid heading sizes (scale from design-spec §4.3) */
  --h1-size: clamp(2.5rem, 5vw, 4rem);
  /* 40 → 64px */
  --h2-size: clamp(1.875rem, 3.5vw, 2.75rem);
  /* 30 → 44px */
  --h3-size: clamp(1.25rem, 2vw, 1.5rem);
  /* 20 → 24px */

  /* ── Spacing — 4 px base unit ────────────────────────────────────────────
     Named after multiples of the 4px base (--space-1 = 1 × 4px = 0.25rem).
     Use these instead of hard-coded rem values.                             */

  --space-1: 0.25rem;
  /*   4px */
  --space-2: 0.5rem;
  /*   8px */
  --space-3: 0.75rem;
  /*  12px */
  --space-4: 1rem;
  /*  16px */
  --space-5: 1.25rem;
  /*  20px */
  --space-6: 1.5rem;
  /*  24px */
  --space-8: 2rem;
  /*  32px — card inner padding                 */
  --space-10: 2.5rem;
  /*  40px */
  --space-12: 3rem;
  /*  48px */
  --space-16: 4rem;
  /*  64px — section spacing (mobile)           */
  --space-20: 5rem;
  /*  80px — header height                      */
  --space-24: 6rem;
  /*  96px — section spacing (desktop min)      */
  --space-28: 7rem;
  /* 112px */
  --space-32: 8rem;
  /* 128px — section spacing (desktop max)      */

  /* Fluid section rhythm (clamp-based) */
  --section-padding: clamp(4rem, 10vw, 8rem);
  /* 64 → 128px */
  --section-gap: clamp(3rem, 6vw, 6rem);
  /* 48 →  96px */

  /* ── Container ───────────────────────────────────────────────────────────
     1280px max-width, 88px outer gutters on desktop (design-spec §4.5).    */

  --container-max: 1280px;
  --container-pad-sm: 1.5rem;
  /* mobile  — 24px */
  --container-pad-md: 3rem;
  /* tablet  — 48px */
  --container-pad-xl: 5.5rem;
  /* desktop — 88px */

  /* ── Shape ───────────────────────────────────────────────────────────────*/

  --radius: 8px;
  /* default card radius  */
  --radius-sm: 4px;
  /* submenu items, pills */
  --radius-lg: 16px;
  /* featured cards       */

  /* ── Shadows ─────────────────────────────────────────────────────────────*/

  --shadow-sm: 0 1px 3px 0 color-mix(in oklab, var(--ink) 10%, transparent);
  --shadow-md: 0 4px 12px -2px color-mix(in oklab, var(--ink) 15%, transparent);
  --shadow-lg: 0 10px 30px -10px color-mix(in oklab, var(--ink) 20%, transparent);

  /* ── Motion ──────────────────────────────────────────────────────────────
     200–300 ms ease-out; always gate scroll animations on prefers-reduced-motion */

  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  /* ── Z-index scale ───────────────────────────────────────────────────────*/

  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 40;
  --z-header: 50;
  --z-modal: 100;

  /* ── Component dimensions ────────────────────────────────────────────────*/

  --header-height: 80px;
  --btn-height: 56px;

  --global-body-font-family: var(--font-sans) !important;
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.65;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--champagne);
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Base (0,0,2) — global fallback */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 0.75em;
}

/* Boost to (0,1,2) inside .single-content so we beat Kadence's .single-content h2 (0,1,1) */
body .single-content h1,
body .single-content h2,
body .single-content h3,
body .single-content h4,
body .single-content h5,
body .single-content h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 0.75em;
}

body h1,
body .single-content h1 {
  font-size: var(--h1-size);
}

body h2,
body .single-content h2 {
  font-size: var(--h2-size);
}

body h3,
body .single-content h3 {
  font-size: var(--h3-size);
}

body h4,
body .single-content h4 {
  font-size: var(--text-xl);
}

body h5,
body .single-content h5 {
  font-size: var(--text-lg);
}

body h6,
body .single-content h6 {
  font-size: var(--text-base);
}

p {
  margin: 0 0 1rem;
}

.content-bg,
body.content-style-unboxed.wp-theme-kadence .site {
  background: var(--ivory);
}

/* Eyebrow — small all-caps label in champagne gold */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  display: block;
  margin-bottom: var(--space-3);
}


/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

/* Full-bleed container with fluid gutters */
.container-edge {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .container-edge {
    padding-inline: var(--container-pad-md);
  }
}

@media (min-width: 1280px) {
  .container-edge {
    padding-inline: var(--container-pad-xl);
  }
}

/* Section vertical rhythm */
.section {
  padding-block: var(--section-padding);
}

/* 1 px mist hairline — use as <hr> or empty <div> */
.hairline {
  height: 1px;
  background: var(--mist);
  border: none;
  margin: 0;
}

/* Card surface — no padding here; apply padding to inner content elements
   so image-first cards can extend edge-to-edge within the surface.          */
.card-surface {
  background: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height);
  padding-inline: 2rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  /* design has square corners */
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

/* Primary — dark fill, forest on hover */
.btn-primary {
  background: var(--ink);
  color: var(--ivory);
  border: none;
}

.btn-primary:hover {
  background: var(--forest);
  color: var(--ivory);
}

/* Secondary — 1px ink outline, fills dark on hover.
   border-width must be set here (not in the shared rule) or it stays 0. */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--ivory);
}

/* Ghost — inline text link with champagne underline */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--forest);
  font-family: var(--font-sans);
  font-weight: 500;
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 2px;
  transition: gap var(--transition-base);
}

.btn-ghost:hover {
  gap: 0.625rem;
  color: var(--forest);
}


/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

/* Kadence's #wrapper can have overflow:clip which breaks position:sticky.
   Reset it here so our sticky header works correctly.                       */
#wrapper.site {
  overflow: visible;
}

.site-header {
  position: sticky !important;
  top: 0;
  z-index: var(--z-header);
  /* bg-ivory/90 from static design — ivory at 90 % opacity.
     Using oklch() with alpha channel directly (matches Tailwind bg-ivory/90). */
  background: oklch(0.97 0.012 85 / 0.90) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mist);
}

.admin-bar .site-header {
  top: 46px;
  /* account for WP admin bar height when logged in */
}

@media (min-width: 783px) {
  .admin-bar .site-header {
    top: 32px;
    /* account for WP admin bar height when logged in */
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--forest);
}

/* Text fallback when no custom logo is uploaded */
.site-header__brand-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--forest);
  line-height: 1;
}

.site-header__brand-est {
  display: none;
  /* visible ≥ 640px */
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

@media (min-width: 640px) {
  .site-header__brand-est {
    display: inline;
  }
}

/* Desktop nav — hidden below 1024 px — ul reset */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop nav — hidden below 1024 px */
.site-nav {
  display: none;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
  }
}

.site-nav a,
.site-nav button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  padding: var(--space-2) 0;
  transition: color var(--transition-base);
  display: inline-flex;
}

/* Explicit background: none on hover — prevents Kadence's parent stylesheet
   from applying its own nav hover background through a more specific rule.  */
.site-nav a:hover,
.site-nav button:hover {
  color: var(--forest);
  background: none;
  box-shadow: none;
}

.site-nav a:focus,
.site-nav button:focus {
  color: var(--forest);
  background: none;
  box-shadow: none;
}

/* Dropdown trigger — <a> when parent has a real URL, <button> when it's "#".
   Button resets (background/border/cursor) are harmless on <a> too.        */
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  padding: var(--space-2) 0;
  transition: color var(--transition-base);
}

.site-nav__trigger:hover {
  color: var(--forest);
}

/* Chevron — rotates when aria-expanded="true" */
.site-nav__chevron {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.site-nav__trigger[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

/* Dropdown submenus */
.has-submenu {
  position: relative;
}

.has-submenu>.submenu {
  position: absolute;
  top: calc(100% + 0rem);
  /* pt-3 gap between trigger and panel */
  left: 50%;
  transform: translateX(-50%);
  background: var(--ivory);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 0.5rem 0;
  /* py-2 — links handle horizontal padding */
  min-width: 240px;
  display: none;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay);
  list-style: none;
  margin: 0;
}

.has-submenu:hover>.submenu,
.has-submenu:focus-within>.submenu {
  display: flex;
}

.submenu a {
  display: block;
  padding: 0.5rem 1rem;
  /* py-2 px-4 */
  font-size: var(--text-sm);
  color: var(--ink);
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
}

.submenu a:hover {
  background: var(--cream);
  color: var(--forest);
}

/* Active / current page link */
.submenu a[aria-current="page"],
.submenu a.current-menu-item {
  color: var(--forest);
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

/* Wrapper */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--mist);
  margin-top: var(--space-16);
}

/* ── 4-column grid ─────────────────────────────────────────────────────── */
.site-footer__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  padding-top: var(--space-20);
  /* 80px — matches static site py-20 */
  padding-bottom: var(--space-12);
  /* 48px — leaves space for divider + bottom bar */
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Col 1: Brand + address ─────────────────────────────────────────────── */
.site-footer__logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.site-footer__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--forest);
  line-height: 1;
}

/* If a custom logo image is uploaded, constrain its height */
.site-footer__logo img {
  height: 40px;
  width: auto;
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--stone);
  line-height: 1.65;
  margin: 0 0 var(--space-6);
}

.site-footer__address {
  font-style: normal;
  /* <address> resets italic */
  font-size: var(--text-xs);
  color: var(--stone);
  line-height: 1.625;
  margin-bottom: 0;
}

.site-footer__address a {
  color: var(--stone);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer__address a:hover {
  color: var(--forest);
}

.site-footer__col .eyebrow {
  margin-bottom: var(--space-4);
  /* 16px — adds extra space below the column heading */
}

/* ── Cols 2-4: nav menus ────────────────────────────────────────────────── */

/* Column heading — uses the shared .eyebrow class:
   font-size var(--text-xs), letter-spacing 0.18em, color var(--champagne).
   No override needed.                                                        */

.site-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__menu li {
  margin-bottom: 10px;
}

.site-footer__menu li:last-child {
  margin-bottom: 0;
}

.site-footer__menu a {
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer__menu a:hover {
  color: var(--forest);
}

/* ── Hairline divider ───────────────────────────────────────────────────── */
.site-footer__divider {
  margin-block: 0;
}

/* margin controlled by parent padding */

/* ── Bottom bar ─────────────────────────────────────────────────────────── */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-12) var(--space-12);
  /* 32px top, 80px bottom */
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.site-footer__copyright {
  font-size: var(--text-xs);
  color: var(--stone);
  margin: 0;
}

/* Accreditation badges — horizontal pill list */
.site-footer__accreditations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--stone);
}


/* --------------------------------------------------------------------------
   8. SELL-CATEGORY TEMPLATE
   -------------------------------------------------------------------------- */

.sell-hero {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .sell-hero {
    grid-template-columns: 1.1fr 1fr;
  }
}

.sell-hero img {
  border-radius: var(--radius);
}

/* Recent purchases table */
.recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.recent-table th,
.recent-table td {
  text-align: left;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--mist);
}

.recent-table th {
  font-weight: 500;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-xs);
}


/* --------------------------------------------------------------------------
   9. FAQ ACCORDIONS
   -------------------------------------------------------------------------- */

.faq details {
  border-bottom: 1px solid var(--mist);
  padding: var(--space-5) 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: var(--text-2xl);
  color: var(--champagne);
  flex-shrink: 0;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details>*:not(summary) {
  margin-top: var(--space-4);
  color: var(--stone);
}


/* --------------------------------------------------------------------------
   10. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* — Colour — */
.text-ink {
  color: var(--ink);
}

.text-forest {
  color: var(--forest);
}

.text-champagne {
  color: var(--champagne);
}

.text-stone {
  color: var(--stone);
}

.text-ivory {
  color: var(--ivory);
}

.text-rose {
  color: var(--rose);
}

.bg-ivory {
  background: var(--ivory);
}

.bg-cream {
  background: var(--cream);
}

.bg-mist {
  background: var(--mist);
}

.bg-ink {
  background: var(--ink);
  color: var(--ivory);
}

.bg-forest {
  background: var(--forest);
  color: var(--ivory);
}

/* — Responsive grid helpers — */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --------------------------------------------------------------------------
   11. HEADER — right group (phone + CTA)
   -------------------------------------------------------------------------- */

/* Wrapper — hidden on mobile (shows ≥ 768 px) */
.site-header__right {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .site-header__right {
    display: flex;
  }
}

/* Phone link */
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.site-header__phone:hover {
  color: var(--forest);
}

.site-header__phone svg {
  flex-shrink: 0;
  /* currentColor — inherits the link's var(--ink) / var(--forest) on hover,
     matching the static design exactly (no champagne tint on the icon).    */
  color: currentColor;
}

/* CTA button — matches static !h-11 !px-5 !text-xs override.
   border-radius is already 0 from btn-primary base rule.         */
.site-header__cta {
  height: 44px;
  padding-inline: 1.25rem;
  font-size: var(--text-xs);
}


/* --------------------------------------------------------------------------
   12. HEADER — hamburger button
   -------------------------------------------------------------------------- */

.site-header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.site-header__burger:hover {
  background: none;
  color: var(--ink);
  box-shadow: none;
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .site-header__burger {
    display: none;
  }
}

/* Show menu icon, hide close icon by default */
.site-header__burger-icon--close {
  display: none;
}

/* Swap to close icon when drawer is open */
.site-header__burger[aria-expanded="true"] .site-header__burger-icon--open {
  display: none;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-icon--close {
  display: block;
}


/* --------------------------------------------------------------------------
   13. MOBILE NAV DRAWER
   -------------------------------------------------------------------------- */

/* Drawer — ivory bg, top hairline separator from header.
   Max-height keeps it within the viewport; overflow-y lets it scroll. */
.site-mobile-nav {
  background: var(--ivory);
  border-top: 1px solid var(--mist);
  max-height: calc(100dvh - var(--header-height) - 73px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-bar .site-mobile-nav {
  max-height: calc(100dvh - var(--header-height) - 73px - 46px);
  /* account for WP admin bar height when logged in */
}

/* Force hidden on desktop */
@media (min-width: 1024px) {
  .site-mobile-nav {
    display: none !important;
  }
}

/* Inner — py-6, flex col, gap-5 between all direct children */
.site-mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

/* ── Nav list ─────────────────────────────────────────────────────────────── */

.site-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Each top-level item — column, gap-2 between parent link and its sub-list */
.site-mobile-nav__list>li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* All top-level links — base size, ink */
.site-mobile-nav__list>li>a {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  transition: color var(--transition-base);
  line-height: 1.5;
}

.site-mobile-nav__list>li>a:hover {
  color: var(--forest);
}

/* Items WITH children — parent link: forest, medium weight */
.site-mobile-nav__list>li.menu-item-has-children>a {
  font-weight: 500;
  color: var(--forest);
}

/* Active / current items */
.site-mobile-nav__list>li.current-menu-item>a,
.site-mobile-nav__list>li.current-menu-ancestor>a {
  color: var(--forest);
}

/* ── Sub-menus — always visible, indented with mist left border ───────────── */

.site-mobile-nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-4);
  border-left: 1px solid var(--mist);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: 1.2;
}

/* Sub-menu links — sm, stone, hover → forest */
.site-mobile-nav__list .sub-menu a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--stone);
  transition: color var(--transition-base);
}

.site-mobile-nav__list .sub-menu a:hover,
.site-mobile-nav__list .sub-menu .current-menu-item>a {
  color: var(--forest);
}

/* ── Phone link at bottom ─────────────────────────────────────────────────── */

.site-mobile-nav__phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--forest);
  transition: color var(--transition-base);
  line-height: 1.5;
}

.site-mobile-nav__phone:hover {
  color: var(--ink);
}

/* Prevent body scroll while drawer is open */
body.mobile-nav-open {
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   14. SCROLL ANIMATION — fade-up (JS adds .is-visible on IntersectionObserver)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--transition-slow),
      transform var(--transition-slow);
  }

  .fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --------------------------------------------------------------------------
   15. HERO SECTION  (Synced Pattern — hcfd/hero-home)
   ─────────────────────────────────────────────────────────────────────────
   Block: core/cover with class .hcfd-hero
   Static reference: bg-ivory/90, py-24 → py-36 → py-44 (96 → 144 → 176 px)
   -------------------------------------------------------------------------- */

/* Section wrapper ─────────────────────────────────────────────────────── */
.hcfd-hero.wp-block-cover {
  /* Fluid padding that tracks the static design's breakpoint jumps.
     clamp floor=96px (py-24), ceiling=176px (py-44).                     */
  padding-block: clamp(6rem, 12vw, 11rem) !important;
  /* Let padding drive the height — override Gutenberg's min-height attr. */
  min-height: 0 !important;
  justify-content: center;
  margin-bottom: 0 !important;
}

/* Content area — max ~900px, pinned to the left ────────────────────────── */
.hcfd-hero__inner.wp-block-group {
  max-width: 900px;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .hcfd-hero__inner.wp-block-group {
    padding-left: 90px;
    padding-right: 90px;
  }
}

/* Eyebrow label ─────────────────────────────────────────────────────────── */
.hcfd-hero .eyebrow {
  margin-top: 0;
  margin-bottom: var(--space-6);
  color: var(--forest);
}

/* H1 ────────────────────────────────────────────────────────────────────── */
.hcfd-hero__headline.wp-block-heading {
  font-family: var(--font-display) !important;
  font-size: var(--h1-size) !important;
  /* clamp(2.5rem, 5vw, 4rem) */
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  text-wrap: balance;
  /* nicer multi-line wrapping  */
  margin-top: 0;
  margin-bottom: var(--space-6) !important;
}

/* Sub-headline / body ──────────────────────────────────────────────────── */
.hcfd-hero__body {
  font-family: var(--font-sans) !important;
  font-size: clamp(1rem, 2vw, 1.25rem);
  /* text-lg → text-xl         */
  color: var(--stone);
  max-width: 640px;
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: var(--space-10) !important;
}

/* Button row ─────────────────────────────────────────────────────────────── */
.hcfd-hero__buttons.wp-block-buttons {
  gap: var(--space-4) !important;
  flex-wrap: wrap;
  margin-top: 0;
}

/* Reset Gutenberg's wp-block-button__link defaults for both hero CTAs.
   Uses !important to beat theme.json / Gutenberg's generated inline styles. */
.hcfd-hero .wp-block-button__link.wp-element-button {
  border-radius: 0 !important;
  /* design has square corners      */
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 56px;
  padding-block: 0 !important;
  /* height handled by min-height   */
  padding-inline: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    background-color var(--transition-base),
    color var(--transition-base) !important;
}

/* Primary ─── dark fill → forest on hover */
.hcfd-hero .hcfd-btn-primary .wp-block-button__link {
  background-color: var(--ink) !important;
  color: var(--ivory) !important;
  border: 1px solid transparent !important;
}

.hcfd-hero .hcfd-btn-primary .wp-block-button__link:hover {
  background-color: var(--forest) !important;
  color: var(--ivory) !important;
}

/* Secondary ─── outlined → dark fill on hover */
.hcfd-hero .hcfd-btn-secondary .wp-block-button__link {
  background-color: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}

.hcfd-hero .hcfd-btn-secondary .wp-block-button__link:hover {
  background-color: var(--ink) !important;
  color: var(--ivory) !important;
}


/* --------------------------------------------------------------------------
   16. TRUST STRIP  (Synced Pattern — hcfd/trust-strip)
   ─────────────────────────────────────────────────────────────────────────
   Block: core/group .hcfd-trust-strip
   Static ref: border-y border-mist · bg-ivory · container-edge py-5
               flex-wrap justify-center · gap-x-8 gap-y-2
               text-xs uppercase tracking-[0.16em] text-stone
   -------------------------------------------------------------------------- */

/* Section wrapper — full-bleed band with hairline borders */
.hcfd-trust-strip {
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  background: var(--ivory);
  margin-bottom: 0 !important;
}

/* Inner row — container-edge class handles max-width + responsive h-padding.
   This rule adds the vertical padding and turns the row into flex.           */
.hcfd-trust-strip__inner.wp-block-group .wp-block-group__inner-container {
  padding-block: 1.25rem;
  /* py-5  = 20px */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 2rem;
  /* gap-x-8 = 32px */
  row-gap: 0.5rem;
  /* gap-y-2 =  8px */
}

/* Individual items */
.hcfd-trust-strip__item.wp-block-paragraph {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  /* 0.75rem / 12px */
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
  /* never break a single item mid-word */
  margin: 0;
  /* reset paragraph default margin     */
}


/* --------------------------------------------------------------------------
   17. WHAT WE BUY SECTION  (Synced Pattern — hcfd/what-we-buy)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-what-we-buy
   Static ref: section.section · grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
               gap-6 · card-surface overflow-hidden hover:border-champagne
   -------------------------------------------------------------------------- */

/* Section padding (matches .section utility) */
body .wp-block-group.hcfd-what-we-buy {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Intro block — max-w-2xl mb-16 */
body .wp-block-group.hcfd-what-we-buy__header {
  max-width: 42rem;
  /* max-w-2xl = 672px */
  margin-bottom: 4rem;
  /* mb-16 = 64px      */
}

/* Gutenberg's is-layout-flow injects margin-block-start on every sibling.
   Zero it out here — spacing is controlled by eyebrow mb and intro mt only. */
body .wp-block-group.hcfd-what-we-buy__header>* {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* h2 base rule adds margin-bottom: 0.75em; zero it — intro's margin-top handles the gap. */
body .wp-block-group.hcfd-what-we-buy__header .wp-block-heading {
  margin-bottom: 0;
  margin-top: 0;
}

body .wp-block-group.hcfd-what-we-buy__header .eyebrow {
  margin-bottom: var(--space-4);
}

/* Intro paragraph — mt-4 text-stone */
body .wp-block-group.hcfd-what-we-buy__header .hcfd-what-we-buy__intro {
  color: var(--stone);
  margin-top: 1rem;
  /* mt-4 = 16px */
  margin-bottom: 0;
}

/* Responsive grid — 1 col → 2 col → 3 col
   sm: breakpoint in the static is 640px; lg: is 1024px.
   !important beats Gutenberg's .wp-block-group.is-layout-flow { display: flow-root }
   which has specificity 0,2,0 and would otherwise override a single-class rule.    */
.hcfd-what-we-buy__grid .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* gap-6 = 24px */
}

/* Neutralise is-layout-flow automatic margin-block-start that Gutenberg injects
   on direct children of any layout:default group block.                            */
body .wp-block-group.hcfd-what-we-buy__grid>* {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

@media (min-width: 640px) {
  .hcfd-what-we-buy__grid .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hcfd-what-we-buy__grid .wp-block-group__inner-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Category card ────────────────────────────────────────────────────── */

/* Outer link — card-surface + overflow-hidden + hover:border-champagne */
.hcfd-category-card {
  display: block;
  background: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.hcfd-category-card:hover {
  border-color: var(--champagne);
}

/* Square image wrapper — aspect-square overflow-hidden */
.hcfd-category-card__image {
  aspect-ratio: 1;
  overflow: hidden;
}

/* Image — object-cover, scale-105 on hover */
.hcfd-category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease-out;
}

.hcfd-category-card:hover .hcfd-category-card__image img {
  transform: scale(1.05);
}

/* Caption row — p-6 flex items-center justify-between */
.hcfd-category-card__caption {
  padding: 1.5rem;
  /* p-6 = 24px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

/* Card title — font-display text-xl text-ink */
body .single-content .hcfd-category-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  /* 1.25rem = 20px */
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
}

/* Card subtitle — text-sm text-stone mt-1 */
body .single-content .hcfd-category-card__subtitle {
  font-size: var(--text-sm);
  /* 0.875rem = 14px */
  color: var(--stone);
  margin: 0.25rem 0 0;
  /* mt-1 = 4px */
  line-height: 20px;
}

/* Arrow — hidden by default, fades in on hover */
body .single-content .hcfd-category-card__arrow {
  flex-shrink: 0;
  color: var(--forest);
  opacity: 0;
  transition: opacity var(--transition-base);
}

body .single-content .hcfd-category-card:hover .hcfd-category-card__arrow {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   18. HOW IT WORKS SECTION  (Synced Pattern — hcfd/how-it-works)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-how-it-works
   Static ref: section.section.bg-cream · max-w-2xl mb-16 header ·
               grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 ·
               border-t border-mist pt-6 per step card
   -------------------------------------------------------------------------- */

/* Section — cream background + section padding */
body .single-content .hcfd-how-it-works {
  padding-block: var(--section-padding);
  background: var(--cream);
  margin-bottom: 0;
}

/* Section header — max-w-2xl mb-16 */
body .single-content .hcfd-how-it-works__header {
  max-width: 42rem;
  margin-bottom: 4rem;
}

/* Zero Gutenberg block gap; spacing via eyebrow mb and h2 alone */
body .single-content .hcfd-how-it-works__header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-how-it-works__header .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

body .single-content .hcfd-how-it-works__header .eyebrow {
  margin-bottom: var(--space-4);
}

/* Step grid — 1 col → 2 col (768px) → 4 col (1024px), gap-8 = 2rem */
body .single-content .hcfd-how-it-works__grid .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

body .single-content .hcfd-how-it-works__grid>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  body .single-content .hcfd-how-it-works__grid .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  body .single-content .hcfd-how-it-works__grid .wp-block-group__inner-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Step card — border-t border-mist pt-6 */
.hcfd-step {
  border-top: 1px solid var(--mist);
  padding-top: 1.5rem;
}

/* Step number — font-display text-3xl text-champagne */
.hcfd-step__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--champagne);
  line-height: 1.2;
}

/* Icon — mt-4 text-forest; display:block so margin-top applies */
.hcfd-step__icon {
  display: block;
  margin-top: 1rem;
  color: var(--forest);
}

/* Step title — font-display text-xl mt-3 */
.hcfd-step__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  margin-top: 0.75rem;
  line-height: 1.4;
}

/* Step body — text-sm text-stone mt-2; boost beats .single-content p margins */
body .single-content .hcfd-step__body {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.65;
}

/* Footer note — mt-12 text-sm text-stone italic */
body .single-content .hcfd-how-it-works__note {
  margin-top: 3rem;
  font-size: var(--text-sm);
  color: var(--stone);
  font-style: italic;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   19. FAMILY SECTION  (Synced Pattern — hcfd/family)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-family
   Static ref: section.section · md:grid-cols-2 gap-12 lg:gap-20 items-center
               text col order-2 md:order-1 · image col order-1 md:order-2
   -------------------------------------------------------------------------- */

body .single-content .hcfd-family {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Two-col grid: stacked on mobile, side-by-side from 768px */
.hcfd-family__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* Mobile: image first, text second */
.hcfd-family__image {
  order: 1;
}

.hcfd-family__text {
  order: 2;
}

@media (min-width: 768px) {
  .hcfd-family__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  /* Desktop: text left, image right */
  .hcfd-family__text {
    order: 1;
  }

  .hcfd-family__image {
    order: 2;
  }
}

/* Heading — reset Kadence margins */
body .single-content .hcfd-family__heading {
  margin-top: 1rem;
  margin-bottom: 0;
}

body .single-content .hcfd-family__text .eyebrow {
  margin-bottom: 0;
}

/* Body copy — text-stone leading-relaxed; first para mt-6, subsequent mt-4 */
body .single-content .hcfd-family__body {
  color: var(--stone);
  line-height: 1.65;
  font-size: var(--text-base);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

body .single-content .hcfd-family__body+.hcfd-family__body {
  margin-top: 1rem;
}

/* Ghost CTA link — mt-8 */
.hcfd-family__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2rem;
}

/* Portrait image — fills its column, slight rounding */
.hcfd-family__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   20. TESTIMONIALS SECTION  (Synced Pattern — hcfd/testimonials)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-testimonials
   Static ref: section.section.bg-forest.text-ivory · max-w-2xl mb-12 header ·
               bg-ivory/5 border-ivory/10 Trustpilot box ·
               grid-cols-1 md:grid-cols-3 gap-8 figure cards border-t
   -------------------------------------------------------------------------- */

/* Section — forest background, ivory text */
body .single-content .hcfd-testimonials {
  padding-block: var(--section-padding);
  background: var(--forest);
  color: var(--ivory);
  margin-bottom: 0;
}

/* Zero Gutenberg block gap on direct children */
body .single-content .hcfd-testimonials>* {
  margin-block-start: 0;
}

/* Section header — max-w-2xl mb-12 */
body .single-content .hcfd-testimonials__header {
  max-width: 42rem;
  margin-bottom: 3rem;
}

body .single-content .hcfd-testimonials__header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Eyebrow — override default forest colour → champagne */
body .single-content .hcfd-testimonials__eyebrow {
  color: var(--champagne);
  margin-bottom: var(--space-4);
}

/* H2 — force ivory on dark bg (beats .single-content h2 at 0,1,1) */
body .single-content .hcfd-testimonials__heading {
  color: var(--ivory);
  margin-top: 0;
  margin-bottom: 0;
}

/* Trustpilot box — bg-ivory/5 border-ivory/10 p-8 mb-10 */
.hcfd-testimonials__trustpilot {
  background: rgba(248, 244, 236, 0.05);
  border: 1px solid rgba(248, 244, 236, 0.10);
  padding: 2rem;
  margin-bottom: 2.5rem;
}

.hcfd-testimonials__tp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: rgba(248, 244, 236, 0.70);
  text-decoration: none;
  transition: color 0.2s;
}

.hcfd-testimonials__tp-link:hover {
  color: var(--ivory);
}

/* Star + score — font-display text-2xl, champagne */
.hcfd-testimonials__tp-score {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--champagne);
  line-height: 1;
  display: flex;
  gap: 0.25em;
}

.hcfd-testimonials__tp-score span:last-child {
  line-height: 15px;
}

/* Quote grid — 1 col → 3 col (768px), gap-8 = 2rem */
body .single-content .hcfd-testimonials__grid .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

body .single-content .hcfd-testimonials__grid>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  body .single-content .hcfd-testimonials__grid .wp-block-group__inner-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Testimonial card — border-t border-ivory/20 pt-6 */
body .single-content .hcfd-testimonial {
  border-top: 1px solid rgba(248, 244, 236, 0.20);
  padding-top: 1.5rem;
  margin: 0;
}

/* Blockquote — font-display text-xl italic leading-snug */
body .single-content .hcfd-testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.375;
  color: var(--ivory);
  margin: 0;
  padding: 0;
  border: none;
}

/* Suppress default browser blockquote quote characters */
body .single-content .hcfd-testimonial__quote::before,
body .single-content .hcfd-testimonial__quote::after {
  content: none;
}

/* Caption — mt-6 text-sm text-ivory/70 */
.hcfd-testimonial__caption {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  color: rgba(248, 244, 236, 0.70);
  font-style: normal;
}


/* --------------------------------------------------------------------------
   21. CALCULATOR SECTION  (Synced Pattern — hcfd/calculator)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-calculator
   Static ref: section.section · card-surface p-10 md:p-16 ·
               md:grid-cols-2 gap-10 items-center ·
               bg-ivory border-mist p-8 price preview widget
   -------------------------------------------------------------------------- */

body .single-content .hcfd-calculator {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Card — card-surface + padding + responsive grid */
.hcfd-calculator__card {
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .hcfd-calculator__card {
    padding: 4rem;
    grid-template-columns: 1fr 1fr;
  }
}

/* Text column — zero out Gutenberg flow margins on children */
body .single-content .hcfd-calculator__text>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-calculator__text .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-calculator__heading {
  margin-top: 0;
  margin-bottom: 0;
}

body .single-content .hcfd-calculator__body {
  color: var(--stone);
  line-height: 1.65;
  margin-top: 1rem;
  margin-bottom: 0;
}

body .single-content .hcfd-calculator__cta {
  margin-top: 2rem;
}

/* Price preview widget — bg-ivory border-mist p-8 */
.hcfd-calculator__preview {
  background: var(--ivory);
  border: 1px solid var(--mist);
  padding: 2rem;
}

/* "Indicative" label — text-xs uppercase tracking-[0.16em] text-stone */
.hcfd-calculator__preview-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--stone);
}

/* Price range — font-display text-5xl text-forest */
.hcfd-calculator__preview-price {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  color: var(--forest);
  margin-top: 0.75rem;
  line-height: 1;
}

/* Stone spec line — text-sm text-stone */
.hcfd-calculator__preview-spec {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 1rem;
}

/* Hairline divider — my-6 = 1.5rem each side */
.hcfd-calculator__divider {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Disclaimer — text-xs text-stone leading-relaxed */
.hcfd-calculator__preview-disclaimer {
  font-size: var(--text-xs);
  color: var(--stone);
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   22. FAQ SECTION  (Synced Pattern — hcfd/faq)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-faq
   Accordion:  kadence/accordion — iconStyle:"arrow" gives chevron ↓/↑
   Static ref: section.section · container-edge max-w-3xl ·
               divide-y divide-mist border-y border-mist accordion ·
               font-display text-xl py-6 flex justify-between items-center
   -------------------------------------------------------------------------- */

body .single-content .hcfd-faq {
  padding-block: var(--section-padding);
}

/* Constrain section to max-w-3xl (48rem) */
body .single-content .hcfd-faq .container-edge {
  max-width: 48rem;
}

/* Section header — eyebrow + h2, mb-12 */
body .single-content .hcfd-faq__header {
  margin-bottom: 3rem;
}

body .single-content .hcfd-faq__header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-faq__header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-faq__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Accordion overrides ──────────────────────────────────────────────── */

/* Inner wrap: collapse Kadence row-gap + add border-y / divide-y */
body .single-content .hcfd-faq .kt-accordion-inner-wrap {
  row-gap: 0;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}

/* Pane dividers — border-top on every pane after the first */
body .single-content .hcfd-faq .kt-accordion-pane+.kt-accordion-pane {
  border-top: 1px solid var(--mist);
}

/* Reset Kadence pane top margin */
body .single-content .hcfd-faq .wp-block-kadence-pane {
  margin-top: 0;
}

/* Header button — remove Kadence grey background, set py-6 / gap-6 */
body .single-content .hcfd-faq .kt-blocks-accordion-header {
  background: none;
  color: var(--ink);
  padding: 1.5rem 0;
  gap: 1.5rem;
  justify-content: space-between;
  box-shadow: none;
}

body .single-content .hcfd-faq .kt-blocks-accordion-header:hover,
body .single-content .hcfd-faq .kt-blocks-accordion-header.kt-accordion-panel-active {
  background: none;
  color: var(--ink);
  box-shadow: none;
}

/* Title wrap — no right padding (we control gap via button gap) */
body .single-content .hcfd-faq .kt-blocks-accordion-title-wrap {
  padding-right: 0;
}

/* Question text — font-display text-xl text-ink */
body .single-content .hcfd-faq .kt-blocks-accordion-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

body .single-content .hcfd-faq .kt-blocks-accordion-icon-trigger {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

/* Chevron icon — use forest colour; Kadence "arrow" style does the rotation */
body .single-content .hcfd-faq .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-faq .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
  width: 9px;
  height: 1px;
  top: 8px;
}

body .single-content .hcfd-faq .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-faq .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
}

/* Panel content — pb-6 pr-10 text-stone; no Kadence border */
body .single-content .hcfd-faq .kt-accordion-panel-inner {
  padding: 0 2.5rem 1.5rem 0;
  border: none;
}

body .single-content .hcfd-faq .kt-accordion-panel-inner p {
  color: var(--stone);
  line-height: 1.65;
  margin: 0;
}

/* Footer ghost link — mt-10 */
.hcfd-faq__footer {
  margin-top: 2.5rem;
}


/* --------------------------------------------------------------------------
   23. MOBILE / TABLET STICKY CTA BAR
   ─────────────────────────────────────────────────────────────────────────
   Fixed bottom bar with "Get estimate" + "WhatsApp" buttons.
   Visible below 1024px, hidden at 1024px+.
   Adds matching padding-bottom to <body> so page content is not obscured.
   -------------------------------------------------------------------------- */

.hcfd-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--ivory);
  border-top: 1px solid var(--mist);
}

/* Smaller buttons — override shared btn height and text size */
.hcfd-mobile-cta__btn {
  height: 3rem;
  font-size: var(--text-xs);
}

/* Body padding so content isn't hidden behind the bar (~72px) */
@media (max-width: 1023px) {
  body {
    padding-bottom: 4.5rem;
  }
}

/* Hide bar and remove padding on desktop (1024px+) */
@media (min-width: 1024px) {
  .hcfd-mobile-cta {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   24. PAGE HEADER  (Synced Pattern — hcfd/page-header)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-page-header
   Static ref: section.container-edge.py-24 · eyebrow · h1 · max-w-2xl intro
   Reused on:  How It Works, About, FAQs, and other inner pages.
   -------------------------------------------------------------------------- */

/* py-24 = --space-24 = 6rem vertical padding */
body .single-content .hcfd-page-header {
  padding-block: var(--space-24);
  margin-bottom: 0;
}

/* Zero Gutenberg block gap on all direct children */
body .single-content .hcfd-page-header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-page-header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-page-header .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Intro paragraph — text-lg text-stone max-w-2xl */
body .single-content .hcfd-page-header__intro {
  font-size: var(--text-lg);
  color: var(--stone);
  max-width: 42rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   25. HOW IT WORKS — STEPS  (Synced Pattern — hcfd/hiw-steps)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-hiw-steps
                 > core/group.container-edge.hcfd-hiw-steps__inner
                   > wp:html  <ol.hcfd-hiw-steps__list>
                   > wp:html  <div.card-surface.hcfd-hiw-steps__guarantee>
   Static ref: max-w-4xl (56rem) inner, champagne step numbers, guarantee card
   -------------------------------------------------------------------------- */

body .single-content .hcfd-hiw-steps {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Constrain the steps column to max-w-4xl = 56rem */
body .single-content .hcfd-hiw-steps__inner {
  max-width: 56rem;
}

/* ── Steps list ─────────────────────────────────────────────────────────── */

body .single-content .hcfd-hiw-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Each step item: single column mobile, two-column desktop */
body .single-content .hcfd-step-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  body .single-content .hcfd-step-item {
    grid-template-columns: 6rem 1fr;
    gap: 2rem;
    align-items: start;
  }
}

/* Step number — champagne, display font, large */
body .single-content .hcfd-step-item__number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--champagne);
  margin: 0;
}

/* Step title */
body .single-content .hcfd-step-item__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--forest);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.35;
}

/* Step body */
body .single-content .hcfd-step-item__body {
  color: var(--stone);
  line-height: 1.65;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* ── Guarantee card ─────────────────────────────────────────────────────── */

body .single-content .hcfd-hiw-steps__guarantee {
  margin-top: 5rem;
  margin-bottom: 0;
  padding: 2rem;
}

body .single-content .hcfd-hiw-steps__guarantee-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--forest);
  margin-top: 0;
  margin-bottom: 0;
}

body .single-content .hcfd-hiw-steps__guarantee-body {
  color: var(--stone);
  line-height: 1.65;
  margin-top: 0.75rem;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   26. HOW IT WORKS — EDGE CASES  (Synced Pattern — hcfd/hiw-edge-cases)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-hiw-edge-cases
   Static ref: section.section.bg-cream · container-edge max-w-3xl ·
               divide-y divide-mist border-y border-mist · 4-pane accordion
   -------------------------------------------------------------------------- */

body .single-content .hcfd-hiw-edge-cases {
  padding-block: var(--section-padding);
  margin-bottom: 0;
  background: var(--cream);
}

/* Constrain to max-w-3xl (48rem) */
body .single-content .hcfd-hiw-edge-cases .container-edge {
  max-width: 48rem;
}

/* Section header — eyebrow + h2 */
body .single-content .hcfd-hiw-edge-cases__header {
  margin-bottom: 3rem;
}

body .single-content .hcfd-hiw-edge-cases__header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-hiw-edge-cases__header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-hiw-edge-cases__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Accordion overrides ──────────────────────────────────────────────── */

body .single-content .hcfd-hiw-edge-cases .kt-accordion-inner-wrap {
  row-gap: 0;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}

body .single-content .hcfd-hiw-edge-cases .kt-accordion-pane+.kt-accordion-pane {
  border-top: 1px solid var(--mist);
}

body .single-content .hcfd-hiw-edge-cases .wp-block-kadence-pane {
  margin-top: 0;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-header {
  background: none;
  color: var(--ink);
  padding: 1.5rem 0;
  gap: 1.5rem;
  justify-content: space-between;
  box-shadow: none;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-header:hover,
body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-header.kt-accordion-panel-active {
  background: none;
  color: var(--ink);
  box-shadow: none;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-title-wrap {
  padding-right: 0;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-icon-trigger {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
  width: 9px;
  height: 1px;
  top: 8px;
}

body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-hiw-edge-cases .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
}

body .single-content .hcfd-hiw-edge-cases .kt-accordion-panel-inner {
  padding: 0 2.5rem 1.5rem 0;
  border: none;
}

body .single-content .hcfd-hiw-edge-cases .kt-accordion-panel-inner p {
  color: var(--stone);
  line-height: 1.65;
  margin: 0;
}


/* --------------------------------------------------------------------------
   27. HOW IT WORKS — PROCESS FAQs  (Synced Pattern — hcfd/hiw-process-faqs)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-hiw-process-faqs
   Static ref: section.section · container-edge max-w-3xl ·
               3-pane accordion · mt-12 flex gap-4 CTA buttons
   -------------------------------------------------------------------------- */

body .single-content .hcfd-hiw-process-faqs {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Constrain to max-w-3xl (48rem) */
body .single-content .hcfd-hiw-process-faqs .container-edge {
  max-width: 48rem;
}

/* Section header */
body .single-content .hcfd-hiw-process-faqs__header {
  margin-bottom: 40px;
}

body .single-content .hcfd-hiw-process-faqs__header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-hiw-process-faqs__header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-hiw-process-faqs__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Accordion overrides ──────────────────────────────────────────────── */

body .single-content .hcfd-hiw-process-faqs .kt-accordion-inner-wrap {
  row-gap: 0;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}

body .single-content .hcfd-hiw-process-faqs .kt-accordion-pane+.kt-accordion-pane {
  border-top: 1px solid var(--mist);
}

body .single-content .hcfd-hiw-process-faqs .wp-block-kadence-pane {
  margin-top: 0;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-header {
  background: none;
  color: var(--ink);
  padding: 1.5rem 0;
  gap: 1.5rem;
  justify-content: space-between;
  box-shadow: none;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-header:hover,
body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-header.kt-accordion-panel-active {
  background: none;
  color: var(--ink);
  box-shadow: none;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-title-wrap {
  padding-right: 0;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-icon-trigger {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
  width: 9px;
  height: 1px;
  top: 8px;
}

body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-hiw-process-faqs .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
}

body .single-content .hcfd-hiw-process-faqs .kt-accordion-panel-inner {
  padding: 0 2.5rem 1.5rem 0;
  border: none;
}

body .single-content .hcfd-hiw-process-faqs .kt-accordion-panel-inner p {
  color: var(--stone);
  line-height: 1.65;
  margin: 0;
}

/* ── CTA buttons — mt-12 flex flex-wrap gap-4 ────────────────────────── */

body .single-content .hcfd-hiw-process-faqs__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   28. SELL PAGE HERO  (Synced Pattern — hcfd/sell-hero)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-sell-hero
   Static ref: section.container-edge.py-20.grid.md:grid-cols-2.gap-12.items-center
   Reused on:  Engagement Rings, Loose Diamonds, and other sell sub-pages.
   -------------------------------------------------------------------------- */

body .single-content .hcfd-sell-hero {
  margin-bottom: 0;
}

/* Section IS the container-edge AND the 2-col grid */
body .single-content .hcfd-sell-hero>.wp-block-group__inner-container {
  padding-block: var(--space-20);
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  body .single-content .hcfd-sell-hero>.wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
  }
}

body .single-content .hcfd-sell-hero__content {
  margin-bottom: 0;
}

/* Reset Gutenberg block gaps on all direct content children */
body .single-content .hcfd-sell-hero__content>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-sell-hero__content .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-sell-hero__content .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Intro paragraph — text-lg text-stone leading-relaxed mt-6 */
body .single-content .hcfd-sell-hero__intro {
  font-size: var(--text-lg);
  color: var(--stone);
  line-height: 1.65;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* CTA buttons row — mt-8 flex flex-wrap gap-4 */
body .single-content .hcfd-sell-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Hero image */
body .single-content .hcfd-sell-hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}


/* --------------------------------------------------------------------------
   29. SELL IN BRIEF  (Synced Pattern — hcfd/sell-in-brief)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-sell-in-brief
   Static ref: section.section · container-edge max-w-3xl ·
               eyebrow + text-xl font-display leading-snug paragraph
   -------------------------------------------------------------------------- */

body .single-content .hcfd-sell-in-brief {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Constrain to max-w-3xl (48rem) */
body .single-content .hcfd-sell-in-brief .container-edge {
  max-width: 48rem;
}

body .single-content .hcfd-sell-in-brief .eyebrow {
  margin-bottom: var(--space-4);
  margin-top: 0;
}

/* Large display-font pull quote — text-xl font-display leading-snug */
body .single-content .hcfd-sell-in-brief__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  line-height: 1.375;
  margin-top: 0;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   30. SELL CRITERIA  (Synced Pattern — hcfd/sell-criteria)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-sell-criteria
   Static ref: section.section.bg-cream · container-edge grid md:grid-cols-2
               gap-16 · checklist (SVG check + span) · right col body text
   -------------------------------------------------------------------------- */

body .single-content .hcfd-sell-criteria {
  padding-block: var(--section-padding);
  margin-bottom: 0;
  background: var(--cream);
}

/* Grid — 1 col mobile → 2 equal cols at 768px, gap-16 = 4rem */
body .single-content .hcfd-sell-criteria__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-sell-criteria__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Column eyebrow + heading resets */
body .single-content .hcfd-sell-criteria__col .eyebrow {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-sell-criteria__col h2 {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* ── Checklist ────────────────────────────────────────────────────────── */

body .single-content .hcfd-sell-criteria__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body .single-content .hcfd-sell-criteria__item {
  display: flex;
  gap: 0.75rem;
  color: var(--stone);
  align-items: flex-start;
}

/* Checkmark icon — forest colour, nudge down 2px to align with text cap */
body .single-content .hcfd-sell-criteria__item svg {
  flex-shrink: 0;
  color: var(--forest);
  margin-top: 0.125rem;
}

/* ── Right column body text ───────────────────────────────────────────── */

body .single-content .hcfd-sell-criteria__body {
  color: var(--stone);
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   31. SELL RECENT PRICES  (Synced Pattern — hcfd/sell-recent-prices)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-sell-recent-prices
   Static ref: section.section · container-edge · eyebrow + h2 ·
               grid md:grid-cols-2 lg:grid-cols-4 gap-6 · card-surface p-6
   -------------------------------------------------------------------------- */

body .single-content .hcfd-sell-recent-prices {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

body .single-content .hcfd-sell-recent-prices .eyebrow {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-sell-recent-prices__heading {
  margin-top: 0;
  margin-bottom: 3rem;
}

/* Grid — 1 col → 2 col at 768px → 4 col at 1024px */
body .single-content .hcfd-sell-recent-prices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-sell-recent-prices__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  body .single-content .hcfd-sell-recent-prices__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Price card ───────────────────────────────────────────────────────── */

body .single-content .hcfd-recent-price-card {
  padding: 1.5rem;
}

/* Item name — font-display text-xl */
body .single-content .hcfd-recent-price-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  line-height: 1.3;
}

/* Spec line — text-sm text-stone mt-2 */
body .single-content .hcfd-recent-price-card__specs {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 0.5rem;
}

/* Price — font-display text-2xl text-forest mt-4 */
body .single-content .hcfd-recent-price-card__amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--forest);
  margin-top: 1rem;
  line-height: 1.35;
}

/* Date — text-xs text-stone mt-2 */
body .single-content .hcfd-recent-price-card__date {
  font-size: var(--text-xs);
  color: var(--stone);
  margin-top: 0.5rem;
  line-height: 1.25;
}


/* --------------------------------------------------------------------------
   32. SELL WHY SELL  (Synced Pattern — hcfd/sell-why-sell)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-sell-why-sell
   Static ref: section.section.bg-forest.text-ivory · container-edge max-w-3xl
               eyebrow !text-champagne · h2 !text-ivory ·
               text-lg font-display italic text-ivory/80
   -------------------------------------------------------------------------- */

body .single-content .hcfd-sell-why-sell {
  padding-block: var(--section-padding);
  margin-bottom: 0;
  background: var(--forest);
}

/* Constrain to max-w-3xl (48rem) */
body .single-content .hcfd-sell-why-sell .container-edge {
  max-width: 48rem;
}

/* Eyebrow — champagne override (!text-champagne) */
body .single-content .hcfd-sell-why-sell__eyebrow {
  color: var(--champagne);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* H2 — ivory override */
body .single-content .hcfd-sell-why-sell__heading {
  color: var(--ivory);
  margin-top: 0;
  margin-bottom: 0;
}

/* Quote paragraph — font-display italic text-lg ivory/80 */
body .single-content .hcfd-sell-why-sell__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: rgba(248, 244, 236, 0.8);
  line-height: 1.65;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   33. ABOUT — OUR FAMILY  (Synced Pattern — hcfd/about-family)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-about-family
   Static ref: section.relative > div.container-edge.py-20.grid.md:grid-cols-2
               .gap-12.items-center — text col + family portrait
   -------------------------------------------------------------------------- */

/* Section IS the container-edge AND the 2-col grid */
body .single-content .hcfd-about-family {
  margin-bottom: 0;
}

body .single-content .hcfd-about-family>.wp-block-group__inner-container {
  padding-block: var(--space-20);
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  body .single-content .hcfd-about-family>.wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

body .single-content .hcfd-about-family__content {
  margin-bottom: 0;
}

/* Reset Gutenberg block gaps on text column children */
body .single-content .hcfd-about-family__content>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-about-family__content .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-about-family__content .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Intro paragraph — text-lg text-stone leading-relaxed mt-6 */
body .single-content .hcfd-about-family__intro {
  font-size: var(--text-lg);
  color: var(--stone);
  line-height: 1.65;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Portrait image */
body .single-content .hcfd-about-family__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* --------------------------------------------------------------------------
   34. ABOUT — OUR STORY  (Synced Pattern — hcfd/about-story)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-about-story
   Static ref: section.section.bg-cream · container-edge max-w-3xl ·
               eyebrow + h2 + div.mt-8.space-y-5.text-stone.leading-relaxed
   -------------------------------------------------------------------------- */

body .single-content .hcfd-about-story {
  padding-block: var(--section-padding);
  margin-bottom: 0;
  background: var(--cream);
}

/* Constrain to max-w-3xl (48rem) */
body .single-content .hcfd-about-story .container-edge {
  max-width: 48rem;
}

body .single-content .hcfd-about-story .eyebrow {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-about-story__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Body paragraphs — mt-8 space-y-5 text-stone leading-relaxed */
body .single-content .hcfd-about-story__body {
  margin-top: 2rem;
  margin-bottom: 0;
}

body .single-content .hcfd-about-story__body p {
  color: var(--stone);
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

body .single-content .hcfd-about-story__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   35. ABOUT — MEET THE TEAM  (Synced Pattern — hcfd/about-team)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-about-team
   Static ref: section.section · container-edge · eyebrow + h2 ·
               grid md:grid-cols-2 gap-8 · card-surface p-8
   -------------------------------------------------------------------------- */

body .single-content .hcfd-about-team {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

body .single-content .hcfd-about-team .eyebrow {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-about-team__heading {
  margin-top: 0;
  margin-bottom: 3rem;
}

/* Grid — 1 col mobile → 2 cols at 768px, gap-8 = 2rem */
body .single-content .hcfd-about-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-about-team__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Team card ────────────────────────────────────────────────────────── */

body .single-content .hcfd-team-card {
  padding: 2rem;
}

/* Name — font-display text-2xl */
body .single-content .hcfd-team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--ink);
  line-height: 1.2;
}

/* Role — text-sm champagne uppercase tracking-[0.16em] mt-1 */
body .single-content .hcfd-team-card__role {
  font-size: var(--text-sm);
  color: var(--champagne);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 0.25rem;
}

/* Tenure — text-sm text-stone mt-3 */
body .single-content .hcfd-team-card__tenure {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 0.75rem;
}

/* Bio paragraph — text-stone leading-relaxed mt-4 */
body .single-content .hcfd-team-card__bio {
  color: var(--stone);
  line-height: 1.65;
  margin-top: 1rem;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   36. ABOUT — ACCREDITATIONS  (Synced Pattern — hcfd/about-accreditations)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section].hcfd-about-accreditations
   Static ref: section.section.bg-forest · container-edge ·
               grid md:grid-cols-2 lg:grid-cols-3 gap-8 ·
               border-ivory/20 award icon + name + desc · champagne CTA btn
   -------------------------------------------------------------------------- */

body .single-content .hcfd-about-accreditations {
  padding-block: var(--section-padding);
  margin-bottom: 0;
  background: var(--forest);
}

/* Eyebrow — champagne */
body .single-content .hcfd-about-accreditations__eyebrow {
  color: var(--champagne);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* H2 — ivory */
body .single-content .hcfd-about-accreditations__heading {
  color: var(--ivory);
  margin-top: 0;
  margin-bottom: 3rem;
}

/* Grid — 1 col → 2 cols at 768px → 3 cols at 1024px, gap-8 = 2rem */
body .single-content .hcfd-about-accreditations__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-about-accreditations__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  body .single-content .hcfd-about-accreditations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Accreditation item ───────────────────────────────────────────────── */

/* border-t border-ivory/20 pt-6 */
body .single-content .hcfd-accred-item {
  border-top: 1px solid rgba(248, 244, 236, 0.2);
  padding-top: 1.5rem;
}

/* Award icon — champagne */
body .single-content .hcfd-accred-item__icon {
  color: var(--champagne);
  display: block;
}

/* Name — font-display text-2xl ivory mt-3 */
body .single-content .hcfd-accred-item__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--ivory);
  margin-top: 0.75rem;
  line-height: 1.2;
}

/* Description — text-sm ivory/80 leading-relaxed mt-2 */
body .single-content .hcfd-accred-item__desc {
  font-size: var(--text-sm);
  color: rgba(248, 244, 236, 0.8);
  line-height: 1.65;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* ── CTA button ───────────────────────────────────────────────────────── */

body .single-content .hcfd-about-accreditations__cta {
  margin-top: 3rem;
}

/* Override btn-primary for dark section: champagne bg, ink text, ivory hover */
body .single-content .hcfd-about-accreditations__btn.btn-primary {
  background: var(--champagne);
  color: var(--ink);
  border-color: var(--champagne);
}

body .single-content .hcfd-about-accreditations__btn.btn-primary:hover {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
}


/* --------------------------------------------------------------------------
   37. FAQS PAGE HEADER  (Synced Pattern — hcfd/faqs-header)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-faqs-header
   Static ref: section.container-edge.py-20.max-w-3xl ·
               eyebrow · h1 · text-lg text-stone intro paragraph
   -------------------------------------------------------------------------- */

/* py-20 = 5rem; max-w-3xl = 48rem scoped on the section itself */
body .single-content .hcfd-faqs-header {
  padding-block: var(--space-20);
  margin-bottom: 0;
  max-width: 48rem;
}

body .single-content .hcfd-faqs-header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-faqs-header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-faqs-header .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Intro paragraph — text-lg text-stone leading-relaxed mt-6 */
body .single-content .hcfd-faqs-header__intro {
  font-size: var(--text-lg);
  color: var(--stone);
  line-height: 1.65;
  margin-top: 1.5rem;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   38. FAQS BODY  (Synced Pattern — hcfd/faqs-body)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-faqs-body
   Static ref: section.container-edge.pb-24.max-w-3xl.space-y-16 ·
               6 groups each with h2.font-display.text-3xl + Kadence accordion
   No padding-top — sits directly below hcfd/faqs-header.
   -------------------------------------------------------------------------- */

/* pb-24 only; max-w-3xl = 48rem */
body .single-content .hcfd-faqs-body {
  padding-top: 0;
  padding-bottom: var(--space-24);
  margin-bottom: 0;
  max-width: 48rem;
}

/* space-y-16 = 4rem gap between consecutive groups */
body .single-content .hcfd-faqs-group+.hcfd-faqs-group {
  margin-top: 4rem;
}

/* Group heading — font-display text-3xl mb-8 */
body .single-content .hcfd-faqs-group__heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 2rem;
}

/* ── Accordion overrides (mirrors §22, scoped to .hcfd-faqs-body) ─────── */

body .single-content .hcfd-faqs-body .kt-accordion-inner-wrap {
  row-gap: 0;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}

body .single-content .hcfd-faqs-body .kt-accordion-pane+.kt-accordion-pane {
  border-top: 1px solid var(--mist);
}

body .single-content .hcfd-faqs-body .wp-block-kadence-pane {
  margin-top: 0;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-header {
  background: none;
  color: var(--ink);
  padding: 1.5rem 0;
  gap: 1.5rem;
  justify-content: space-between;
  box-shadow: none;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-header:hover,
body .single-content .hcfd-faqs-body .kt-blocks-accordion-header.kt-accordion-panel-active {
  background: none;
  color: var(--ink);
  box-shadow: none;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-title-wrap {
  padding-right: 0;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-icon-trigger {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-faqs-body .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
  width: 9px;
  height: 1px;
  top: 8px;
}

body .single-content .hcfd-faqs-body .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-faqs-body .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
}

body .single-content .hcfd-faqs-body .kt-accordion-panel-inner {
  padding: 0 2.5rem 1.5rem 0;
  border: none;
}

body .single-content .hcfd-faqs-body .kt-accordion-panel-inner p {
  color: var(--stone);
  line-height: 1.65;
  margin: 0;
}


/* --------------------------------------------------------------------------
   39. CONTACT CARDS  (Synced Pattern — hcfd/contact-cards)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-contact-cards
   Static ref: section.container-edge.pb-20 ·
               grid md:grid-cols-3 gap-6 · card-surface p-8 hover:border-champagne
   No padding-top — sits directly below the contact page header.
   -------------------------------------------------------------------------- */

/* pb-20 only */
body .single-content .hcfd-contact-cards {
  padding-top: 0;
  padding-bottom: var(--space-20);
  margin-bottom: 0;
}

/* Grid — 1 col → 3 cols at 768px, gap-6 = 1.5rem */
body .single-content .hcfd-contact-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-contact-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card link — block display, padding, hover border */
body .single-content .hcfd-contact-card {
  display: block;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base);
}

body .single-content .hcfd-contact-card:hover {
  border-color: var(--champagne);
}

/* Icon — forest colour */
body .single-content .hcfd-contact-card__icon {
  color: var(--forest);
  display: block;
}

/* Title — font-display text-xl mt-4 */
body .single-content .hcfd-contact-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  margin-top: 1rem;
  line-height: 1.4;
}

/* Contact detail — text-sm text-stone mt-1 */
body .single-content .hcfd-contact-card__detail {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 0.25rem;
  line-height: 1.45;
}

/* Availability note — text-xs text-stone mt-3 */
body .single-content .hcfd-contact-card__note {
  font-size: var(--text-xs);
  color: var(--stone);
  margin-top: 0.75rem;
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════════
   §40 CONTACT FORM
   hcfd-contact-form — cream bg, 2-col at 768px
   CSS: patterns/hcfd-contact-form.php
   ══════════════════════════════════════════════════════════════════════════ */

body .single-content .hcfd-contact-form {
  background: var(--cream);
  padding-block: 10vw;
  margin-bottom: 0;
}

/* Align columns to the top; suppress wp:columns default margin */
body .single-content .hcfd-contact-form__columns {
  align-items: start !important;
  margin-bottom: 0;
  gap: 3rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-contact-form__columns.wp-block-columns {
    flex-wrap: nowrap !important;
  }
}

/* ── Left column ─────────────────────────────────────────────────────────── */
body .single-content .hcfd-contact-form__heading {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  body .single-content .hcfd-contact-form__heading {
    font-size: 44px;
  }
}

body .single-content .hcfd-contact-form__left .eyebrow {
  margin-bottom: var(--space-4);
}

/* Address / hours rows */
body .single-content .hcfd-contact-info-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

body .single-content .hcfd-contact-info-row__icon {
  color: var(--forest);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

body .single-content .hcfd-contact-info-row__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

body .single-content .hcfd-contact-info-row__text {
  font-size: var(--text-base);
  color: var(--stone);
  line-height: 1.6;
}

/* ── Right column — card surface ─────────────────────────────────────────── */
body .single-content .hcfd-contact-form__right {
  background: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 2rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-contact-form__right {
    flex-basis: 440px !important;
    flex-grow: 0 !important;
  }
}

@media (min-width: 1024px) {
  body .single-content .hcfd-contact-form__right {
    flex-basis: 528px !important;
    flex-grow: 0 !important;
  }
}



/* "Send us a message" heading */
body .single-content .hcfd-contact-form__right .wp-block-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.25rem;
  line-height: 1.35;
}

/* Privacy note */
body .single-content .hcfd-contact-form__right .wp-block-paragraph {
  font-size: var(--text-xs);
  color: var(--stone);
  margin-top: 0.75rem;
  text-align: center;
}

/* ── Kadence Advanced Form field overrides ───────────────────────────────── */

/* Space between fields — matches space-y-5 */
body .single-content .hcfd-contact-form .wp-block-kadence-column,
body .single-content .hcfd-contact-form .kb-adv-form-field {
  margin-bottom: 1.25rem;
}

body .single-content .hcfd-contact-form .kb-adv-form-field:last-of-type {
  margin-bottom: 0;
}

/* Remove default Kadence column inner padding */
body .single-content .hcfd-contact-form .kt-inside-inner-col {
  padding: 0;
}

/* Infield label */
body .single-content .hcfd-contact-form .kb-adv-form-label {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
}

body .single-content .hcfd-contact-form .kb-adv-form-required {
  color: var(--champagne);
  margin-left: 0.125rem;
}

/* Input + textarea */
body .single-content .hcfd-contact-form .kb-field {
  width: 100%;
  background: var(--ivory) !important;
  border: 1px solid var(--mist) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--ink) !important;
  box-sizing: border-box;
  transition: border-color var(--transition-fast) !important;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}

body .single-content .hcfd-contact-form .kb-field:focus {
  outline: none !important;
  border-color: var(--forest) !important;
  box-shadow: none !important;
}

body .single-content .hcfd-contact-form .kt-row-column-wrap {
  gap: 0;
}

body .single-content .hcfd-contact-form .kb-advanced-form {
  gap: 0;
  margin-bottom: 0;
}

body .single-content .hcfd-contact-form .kb-textarea-field {
  resize: vertical;
  min-height: 8rem;
}

body .single-content .hcfd-contact-form .wp-block-kadence-advanced-form-submit {
  margin-top: 8px;
}

/* ── Submit button — btn-primary full-width ──────────────────────────────── */
body .single-content .hcfd-contact-form .kb-adv-form-submit-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--btn-height) !important;
  padding-inline: 2rem !important;
  background: var(--ink) !important;
  color: var(--ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color var(--transition-base), color var(--transition-base) !important;
}

body .single-content .hcfd-contact-form .kb-adv-form-submit-button:hover {
  background: var(--forest) !important;
  color: var(--ivory) !important;
}

/* Placeholder paragraph — editor hint, hidden on frontend */
body .single-content .hcfd-form-placeholder {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   §41 CONTACT BOOKING
   hcfd-contact-booking — Calendly inline widget, max-w-5xl, py-20
   CSS: patterns/hcfd-contact-booking.php
   ══════════════════════════════════════════════════════════════════════════ */

body .single-content .hcfd-contact-booking {
  padding-block: 10vw;
  margin-bottom: 0;
}

body .single-content .hcfd-contact-booking .eyebrow {
  margin-bottom: var(--space-3);
}

/* Narrow the container to max-w-5xl (64rem) */
body .single-content .hcfd-contact-booking__container {
  max-width: 64rem;
}

/* ── Header row ──────────────────────────────────────────────────────────── */
body .single-content .hcfd-contact-booking__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

body .single-content .hcfd-contact-booking__heading {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  body .single-content .hcfd-contact-booking__heading {
    font-size: 44px;
  }
}

/* Ghost CTA button — aligns to bottom of header row */
body .single-content .hcfd-contact-booking__cta {
  flex-shrink: 0;
}

/* ── Calendly card ───────────────────────────────────────────────────────── */
body .single-content .hcfd-contact-booking__card {
  padding: 0.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  body .single-content .hcfd-contact-booking__card {
    padding: 1rem;
  }
}

/* Ensure the Calendly iframe fills the card */
body .single-content .hcfd-contact-booking__card .calendly-inline-widget {
  width: 100%;
  height: 680px;
}

/* ══════════════════════════════════════════════════════════════════════════
   §42 BOOK PAGE
   hcfd-book-page — 3 info cards + Calendly widget, pb-12, no top padding
   CSS: patterns/hcfd-book-page.php
   ══════════════════════════════════════════════════════════════════════════ */

body .single-content .hcfd-book-page {
  padding-top: 0;
  padding-bottom: var(--space-12);
  margin-bottom: 0;
}

/* ── 3-col info card grid ────────────────────────────────────────────────── */
body .single-content .hcfd-book-page__info-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-book-page__info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Info cards */
body .single-content .hcfd-book-info-card {
  padding: 1.5rem;
}

body .single-content .hcfd-book-info-card__icon {
  color: var(--forest);
  display: block;
}

body .single-content .hcfd-book-info-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

body .single-content .hcfd-book-info-card__desc {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 0.25rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ── Calendly card ───────────────────────────────────────────────────────── */
body .single-content .hcfd-book-page__calendly-card {
  padding: 0.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  body .single-content .hcfd-book-page__calendly-card {
    padding: 1rem;
  }
}

body .single-content .hcfd-book-page__calendly-card .calendly-inline-widget {
  width: 100%;
  height: 780px;
}

/* ── Phone fallback ──────────────────────────────────────────────────────── */
body .single-content .hcfd-book-page__fallback {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

body .single-content .hcfd-book-page__fallback a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   §43 KNOWLEDGE POSTS
   hcfd-knowledge-posts — 2-col card grid, pb-24, no top padding
   CSS: patterns/hcfd-knowledge-posts.php | PHP: functions.php §6
   ══════════════════════════════════════════════════════════════════════════ */

body .single-content .hcfd-knowledge-posts {
  padding-top: 0;
  padding-bottom: var(--space-24);
  margin-bottom: 0;
}

/* ── 2-col grid ──────────────────────────────────────────────────────────── */
body .single-content .hcfd-knowledge-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-knowledge-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Article card ────────────────────────────────────────────────────────── */
body .single-content .hcfd-knowledge-card {
  padding: 2rem;
  transition: border-color var(--transition-base);
  display: flex;
  flex-direction: column;
}

body .single-content .hcfd-knowledge-card:hover {
  border-color: var(--champagne);
}

/* Meta bar — book-open icon + category · reading time */
body .single-content .hcfd-knowledge-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--champagne);
}

body .single-content .hcfd-knowledge-card__meta svg {
  flex-shrink: 0;
}

/* Title */
body .single-content .hcfd-knowledge-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Excerpt */
body .single-content .hcfd-knowledge-card__excerpt {
  font-size: var(--text-sm);
  color: var(--stone);
  line-height: 1.65;
  margin-top: 0.75rem;
  margin-bottom: 0;
  flex-grow: 1;
}

/* Read guide link — pushed to bottom of card */
body .single-content .hcfd-knowledge-card__link {
  margin-top: 1.5rem;
  align-self: flex-start;
}

/* Empty state */
body .single-content .hcfd-knowledge-empty {
  font-size: var(--text-sm);
  color: var(--stone);
}


/* --------------------------------------------------------------------------
   44. SINGLE POST TEMPLATE
   ─────────────────────────────────────────────────────────────────────────
   File:       single.php (child theme root)
   Classes:    .hcfd-post, .hcfd-post__*
   .single-content wrapper applied directly in single.php.
   -------------------------------------------------------------------------- */

/* Article wrapper */
body .single-content .hcfd-post {
  padding-bottom: var(--section-padding);
  margin-bottom: 0;
}

/* ── Featured image ─────────────────────────────────────────────────────── */

body .single-content .hcfd-post__featured-wrap {
  padding-top: var(--space-10);
}

body .single-content .hcfd-post__featured-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  max-height: 480px;
  object-fit: cover;
}

/* ── Narrow text column ──────────────────────────────────────────────────── */

/* max-w-3xl = 48rem — matches about-story, faqs-header, sell-in-brief */
body .single-content .hcfd-post__inner {
  max-width: 48rem;
  margin-inline: auto;
}

/* ── Post header ─────────────────────────────────────────────────────────── */

body .single-content .hcfd-post__header {
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

body .single-content .hcfd-post__header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-post__title {
  margin-top: 0;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

body .single-content .hcfd-post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: var(--space-4);
}

/* ── Body content ─────────────────────────────────────────────────────────── */

body .single-content .hcfd-post__body {
  padding-bottom: var(--space-6);
}

/* Paragraphs — ink for readability in long-form editorial */
body .single-content .hcfd-post__body p {
  color: var(--ink);
  line-height: 1.65;
  font-size: var(--text-base);
  margin-bottom: 1.5rem;
}

/* Headings — breathing room above/below content headings */
body .single-content .hcfd-post__body h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

body .single-content .hcfd-post__body h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

body .single-content .hcfd-post__body h4 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* Links — forest with champagne underline matching brand accent */
body .single-content .hcfd-post__body a {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-underline-offset: 0.15em;
  transition: color var(--transition-base);
}

body .single-content .hcfd-post__body a:hover {
  color: var(--champagne);
}

/* Blockquotes — 3 px champagne left bar, serif italic (mirrors testimonials) */
body .single-content .hcfd-post__body blockquote {
  border-left: 3px solid var(--champagne);
  padding-left: var(--space-6);
  margin: 2rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--stone);
  line-height: 1.5;
}

body .single-content .hcfd-post__body blockquote p {
  color: var(--stone);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  margin: 0;
}

/* Unordered list — 6 px champagne dot bullet */
body .single-content .hcfd-post__body ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

body .single-content .hcfd-post__body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  color: var(--ink);
  line-height: 1.65;
}

body .single-content .hcfd-post__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--champagne);
}

/* Ordered list — champagne serif numeral counter (mirrors .hcfd-step__number) */
body .single-content .hcfd-post__body ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
  counter-reset: hcfd-ol;
}

body .single-content .hcfd-post__body ol li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.625rem;
  counter-increment: hcfd-ol;
  color: var(--ink);
  line-height: 1.65;
}

body .single-content .hcfd-post__body ol li::before {
  content: counter(hcfd-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--champagne);
  line-height: 1.4;
}

/* Inline code — cream surface, mist border, forest text */
body .single-content .hcfd-post__body code {
  font-family: ui-monospace, 'Cascadia Code', Menlo, 'Courier New', monospace;
  font-size: 0.875em;
  background: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--forest);
}

/* Code blocks */
body .single-content .hcfd-post__body pre {
  background: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: var(--space-6);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

body .single-content .hcfd-post__body pre code {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-sm);
  color: var(--ink);
}

/* Horizontal rule — mist hairline */
body .single-content .hcfd-post__body hr {
  border: none;
  border-top: 1px solid var(--mist);
  margin-block: 3rem;
}

/* Images inside body — radius matches site convention */
body .single-content .hcfd-post__body img {
  border-radius: var(--radius);
  max-width: 100%;
  height: auto;
  display: block;
  margin-block: 2rem;
}

/* Tables — mirrors .recent-table (§8) with adjusted column spacing */
body .single-content .hcfd-post__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

body .single-content .hcfd-post__body th {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--mist);
}

body .single-content .hcfd-post__body td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--mist);
  font-size: var(--text-sm);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.55;
}

body .single-content .hcfd-post__body tr:last-child td {
  border-bottom: none;
}

/* ── Author box ──────────────────────────────────────────────────────────── */

body .single-content .hcfd-post__author {
  padding: var(--space-8);
  margin-top: var(--space-16);
  margin-bottom: 0;
}

/* .eyebrow on the label already applies champagne / uppercase / tracking */
body .single-content .hcfd-post__author-label {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

body .single-content .hcfd-post__author-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--ink);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}

body .single-content .hcfd-post__author-bio {
  font-size: var(--text-sm);
  color: var(--stone);
  line-height: 1.65;
  margin-top: var(--space-3);
  margin-bottom: 0;
}

body .single-content .hcfd-post__author-link {
  margin-top: var(--space-6);
  display: inline-flex;
}

/* ── Prev / Next navigation ──────────────────────────────────────────────── */

body .single-content .hcfd-post__nav {
  margin-top: var(--space-12);
  margin-bottom: 0;
}

body .single-content .hcfd-post__nav-divider {
  margin-bottom: var(--space-8);
}

body .single-content .hcfd-post__nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

body .single-content .hcfd-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  transition: color var(--transition-base);
}

body .single-content .hcfd-post__nav-link--next {
  text-align: right;
  align-items: flex-end;
}

body .single-content .hcfd-post__nav-direction {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--champagne);
}

body .single-content .hcfd-post__nav-link--next .hcfd-post__nav-direction {
  flex-direction: row-reverse;
}

body .single-content .hcfd-post__nav-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  line-height: 1.3;
  transition: color var(--transition-base);
}

body .single-content .hcfd-post__nav-link:hover .hcfd-post__nav-title {
  color: var(--forest);
}

/* Stack nav links on small screens */
@media (max-width: 639px) {
  body .single-content .hcfd-post__nav-inner {
    grid-template-columns: 1fr;
  }

  body .single-content .hcfd-post__nav-link--next {
    text-align: left;
    align-items: flex-start;
  }

  body .single-content .hcfd-post__nav-link--next .hcfd-post__nav-direction {
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
   45. CALCULATOR PAGE HEADER  (Synced Pattern — hcfd/calculator-header)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .container-edge.hcfd-calculator-header
   Static ref: section.container-edge.py-20 · eyebrow · h1 ·
               p.mt-6.text-lg.text-stone.max-w-2xl intro
   py-20 = var(--space-20) = 5 rem. No section-level max-width (differs
   from hcfd/page-header's py-24 and hcfd/faqs-header's max-w-3xl).
   -------------------------------------------------------------------------- */

body .single-content .hcfd-calculator-header {
  padding-block: var(--space-20);
  margin-bottom: 0;
}

/* Zero Gutenberg block gap on all direct children */
body .single-content .hcfd-calculator-header>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

body .single-content .hcfd-calculator-header .eyebrow {
  margin-bottom: var(--space-4);
}

body .single-content .hcfd-calculator-header .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Intro paragraph — text-lg text-stone max-w-2xl mt-6 */
body .single-content .hcfd-calculator-header__intro {
  font-size: var(--text-lg);
  color: var(--stone);
  max-width: 42rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   46. CALCULATOR WIDGET  (Synced Pattern — hcfd/calculator-widget)
   ─────────────────────────────────────────────────────────────────────────
   Block:  core/group[tagName=section] .hcfd-calc
           → core/group .container-edge
           → wp:html  .card-surface.hcfd-calc__card
   JS:     assets/js/hcfd-calculator.js (enqueued on diamond-calculator page)
   Static: section.container-edge.pb-20 · card-surface.grid.lg:grid-cols-[1.1fr_1fr]
   -------------------------------------------------------------------------- */

/* Section root — pb-20 (5 rem), no section-level background */
body .single-content .hcfd-calc {
  padding-bottom: var(--space-20);
  margin-bottom: 0;
}

/* Card: stack → 2-col grid at lg */
body .single-content .hcfd-calc__card {
  display: grid;
  padding: var(--space-6);
  gap: var(--space-10);
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc__card {
    padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  body .single-content .hcfd-calc__card {
    grid-template-columns: 1.1fr 1fr;
    padding: var(--space-12);
  }
}

/* ── Controls column ─────────────────────────────────────────────────────── */

body .single-content .hcfd-calc__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

body .single-content .hcfd-calc__field {
  display: flex;
  flex-direction: column;
}

/* Eyebrow label — block + mb-3 */
body .single-content .hcfd-calc__label {
  display: block;
  margin-bottom: var(--space-3);
}

/* Carat readout next to eyebrow */
body .single-content .hcfd-calc__carat-val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-left: var(--space-2);
}

/* Shape pill buttons */
body .single-content .hcfd-calc__shapes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

body .single-content .hcfd-calc__shape-btn {
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.43;
  border: 1px solid var(--mist);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base);
}

body .single-content .hcfd-calc__shape-btn:hover {
  border-color: var(--ink);
}

body .single-content .hcfd-calc__shape-btn.is-active {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

/* Carat range slider */
body .single-content .hcfd-calc__slider {
  width: 100%;
  accent-color: var(--forest);
  cursor: pointer;
  margin-top: 0.2rem;
  margin-bottom: 0.45rem;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  -webkit-appearance: auto;
  appearance: auto;
}

body .single-content .hcfd-calc__slider-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--stone);
  margin-top: var(--space-1);
  line-height: 1.35;
}

/* Colour / Clarity selects — 2-col grid */
body .single-content .hcfd-calc__grades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

body .single-content .hcfd-calc__grade-field {
  display: flex;
  flex-direction: column;
}

body .single-content .hcfd-calc__select {
  width: 100%;
  background: var(--ivory);
  border: 1px solid var(--mist);
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  appearance: auto;
  transition: border-color var(--transition-base);
}

body .single-content .hcfd-calc__select:focus {
  outline: none;
  border-color: var(--forest);
}

/* "Don't know" hint link */
body .single-content .hcfd-calc__hint {
  font-size: var(--text-xs);
  color: var(--stone);
  margin: 0;
  line-height: 1.65;
}

body .single-content .hcfd-calc__hint-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--forest);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Result panel (forest background) ───────────────────────────────────── */

body .single-content .hcfd-calc__result {
  background: var(--forest);
  color: var(--ivory);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc__result {
    padding: var(--space-8);
  }
}

body .single-content .hcfd-calc__result-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--champagne);
  line-height: 1.35;
}

/* Live price output — Cormorant, large */
body .single-content .hcfd-calc__price {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: 1;
  color: var(--ivory);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc__price {
    font-size: 3.75rem;
  }
}

/* Spec summary line — ivory/80 */
body .single-content .hcfd-calc__summary {
  font-size: var(--text-sm);
  color: color-mix(in oklab, var(--ivory) 80%, transparent);
  margin-top: var(--space-6);
  margin-bottom: 0;
  line-height: 1.65;
}

/* Hairline divider — ivory/20 */
body .single-content .hcfd-calc__divider {
  height: 1px;
  background: color-mix(in oklab, var(--ivory) 20%, transparent);
  margin-block: var(--space-6);
  flex-shrink: 0;
}

/* Disclaimer — ivory/70 */
body .single-content .hcfd-calc__disclaimer {
  font-size: var(--text-xs);
  color: color-mix(in oklab, var(--ivory) 70%, transparent);
  line-height: 1.65;
  margin: 0;
}

/* CTA button stack */
body .single-content .hcfd-calc__ctas {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-8);
}

body .single-content .hcfd-calc__result .hcfd-calc__cta-primary.btn-primary svg {
  flex-shrink: 0;
}

/* Primary CTA override: champagne bg, ink text, hover → ivory */
body .single-content .hcfd-calc__result .hcfd-calc__cta-primary.btn-primary {
  background: var(--champagne);
  color: var(--ink);
  border: 1px solid var(--champagne);
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc__result .hcfd-calc__cta-primary.btn-primary {
    padding-inline: 2rem;
  }
}

body .single-content .hcfd-calc__result .hcfd-calc__cta-primary.btn-primary:hover {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
}

/* Secondary CTA override: ivory/40 border, ivory text, hover → ivory bg */
body .single-content .hcfd-calc__result .hcfd-calc__cta-secondary.btn-secondary {
  background: transparent;
  color: var(--ivory);
  border-color: color-mix(in oklab, var(--ivory) 40%, transparent);
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc__result .hcfd-calc__cta-secondary.btn-secondary {
    padding-inline: 2rem;
  }
}

body .single-content .hcfd-calc__result .hcfd-calc__cta-secondary.btn-secondary:hover {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
}


/* --------------------------------------------------------------------------
   47. CALCULATOR VALUATIONS  (Synced Pattern — hcfd/calculator-valuations)
   ─────────────────────────────────────────────────────────────────────────
   Block:  core/group[tagName=section] .hcfd-calc-valuations
           → core/group .container-edge.hcfd-calc-valuations__inner
           → wp:html   .hcfd-calc-valuations__table (.hcfd-calc-valuations__row ×4)
   Static: section.section.bg-cream · container-edge max-w-4xl ·
           eyebrow · h2 · p.max-w-2xl · border-t rows with 1fr/auto grid
   -------------------------------------------------------------------------- */

/* Section — cream bg, full section padding */
body .single-content .hcfd-calc-valuations {
  background: var(--cream);
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Zero Kadence block gaps */
body .single-content .hcfd-calc-valuations>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Narrow inner container — max-w-4xl (56rem / 896px) */
body .single-content .hcfd-calc-valuations__inner {
  max-width: 56rem;
}

/* Eyebrow — mb-4 */
body .single-content .hcfd-calc-valuations .hcfd-calc-valuations__eyebrow {
  margin-bottom: var(--space-4);
}

/* Heading — no extra margins from Kadence */
body .single-content .hcfd-calc-valuations .wp-block-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Intro paragraph — stone colour, max-w-2xl, mt-4 */
body .single-content .hcfd-calc-valuations .hcfd-calc-valuations__intro {
  color: var(--stone);
  max-width: 42rem;
  margin-top: var(--space-4);
  margin-bottom: 0;
  line-height: 1.65;
}

/* Table wrapper — mt-10, top hairline */
body .single-content .hcfd-calc-valuations__table {
  margin-top: var(--space-10);
  border-top: 1px solid var(--mist);
}

/* Row — 1fr auto grid, py-5, bottom hairline */
body .single-content .hcfd-calc-valuations__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--mist);
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc-valuations__row {
    font-size: var(--text-base);
  }
}

/* Stone description */
body .single-content .hcfd-calc-valuations__stone {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.85;
}

@media (min-width: 768px) {
  body .single-content .hcfd-calc-valuations__stone {
    font-size: 16px;
  }
}

/* Price range — display serif, xl, forest */
body .single-content .hcfd-calc-valuations__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--forest);
  white-space: nowrap;
  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   48. CALCULATOR FAQS  (Synced Pattern — hcfd/calculator-faqs)
   ─────────────────────────────────────────────────────────────────────────
   Block:      core/group[tagName=section] .hcfd-calc-faqs
               → core/group .container-edge.hcfd-calc-faqs__inner
               → wp:html JSON-LD · wp:kadence/accordion (5 panes, calcfaq/cf1–cf5)
   Static ref: section.section · container-edge max-w-3xl ·
               eyebrow mb-4 · h2 mb-10 ·
               divide-y divide-mist border-y border-mist accordion
   -------------------------------------------------------------------------- */

/* Section — ivory (default), section padding */
body .single-content .hcfd-calc-faqs {
  padding-block: var(--section-padding);
  margin-bottom: 0;
}

/* Zero Kadence block gaps */
body .single-content .hcfd-calc-faqs>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Narrow container — max-w-3xl (48rem) */
body .single-content .hcfd-calc-faqs__inner {
  max-width: 48rem;
}

/* Eyebrow — mb-4 */
body .single-content .hcfd-calc-faqs .hcfd-calc-faqs__eyebrow {
  margin-bottom: var(--space-4);
}

/* h2 — mt-0, mb-10 */
body .single-content .hcfd-calc-faqs .hcfd-calc-faqs__heading {
  margin-top: 0;
  margin-bottom: var(--space-10);
}

/* ── Accordion overrides (mirrors §22 scoped to .hcfd-calc-faqs) ─────────── */

/* Inner wrap — collapse row-gap, add border-y */
body .single-content .hcfd-calc-faqs .kt-accordion-inner-wrap {
  row-gap: 0;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}

/* Pane dividers */
body .single-content .hcfd-calc-faqs .kt-accordion-pane+.kt-accordion-pane {
  border-top: 1px solid var(--mist);
}

/* Reset Kadence pane top margin */
body .single-content .hcfd-calc-faqs .wp-block-kadence-pane {
  margin-top: 0;
}

/* Header button — remove Kadence grey bg, set py-6 / gap-6 */
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-header {
  background: none;
  color: var(--ink);
  padding: 1.5rem 0;
  gap: 1.5rem;
  justify-content: space-between;
  box-shadow: none;
}

body .single-content .hcfd-calc-faqs .kt-blocks-accordion-header:hover,
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-header.kt-accordion-panel-active {
  background: none;
  color: var(--ink);
  box-shadow: none;
}

/* Title wrap — no right padding */
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-title-wrap {
  padding-right: 0;
}

/* Question text — font-display text-xl text-ink */
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

/* Chevron icon — forest colour */
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-icon-trigger {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

body .single-content .hcfd-calc-faqs .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
  width: 9px;
  height: 1px;
  top: 8px;
}

body .single-content .hcfd-calc-faqs .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
body .single-content .hcfd-calc-faqs .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--forest);
}

/* Panel content — pb-6 pr-10 text-stone */
body .single-content .hcfd-calc-faqs .kt-accordion-panel-inner {
  padding: 0 2.5rem 1.5rem 0;
  border: none;
}

body .single-content .hcfd-calc-faqs .kt-accordion-panel-inner p {
  color: var(--stone);
  line-height: 1.65;
  margin: 0;
}