/* =============================================================
   Divergent Business & Leadership Coaching
   Shared design system — used by every page.
   Swap brand tokens (colors, fonts) below in one place.
   ============================================================= */

/* ---- Brand tokens ------------------------------------------------ */
:root {
  /* Core pairing: rich black + refined gold */
  --color-black: #100f0d;          /* rich near-black, primary sections/text */
  --color-black-soft: #1a1815;     /* slightly lifted dark for layering */
  --color-black-warm: #211d17;     /* warm charcoal for gradient depth */
  --color-gold: #b8975f;           /* muted champagne / antique gold accent */
  --color-gold-deep: #9c7c46;      /* darker gold for hover / active */
  --color-gold-soft: #cbb187;      /* lighter gold for on-dark text */
  --color-gold-pale: #e6d3ad;      /* champagne highlight for metallic sheen */

  /* Metallic gold gradient — used for buttons, numerals, accents */
  --gold-gradient: linear-gradient(135deg, var(--color-gold-pale) 0%, var(--color-gold) 42%, var(--color-gold-deep) 100%);
  --gold-sheen: linear-gradient(100deg, var(--color-gold-deep) 0%, var(--color-gold) 30%, var(--color-gold-pale) 50%, var(--color-gold) 70%, var(--color-gold-deep) 100%);

  /* Nude / tan supporting palette (from brief) */
  --color-greige: #D1C7BD;         /* warm greige */
  --color-offwhite: #EDEDE9;       /* soft off-white — light base (avoid pure white) */
  --color-tan: #CBAC8D;            /* sandy tan (deepest neutral) */
  --color-almond: #E2D5CA;         /* pale almond */
  --color-blush: #D4BFAF;          /* dusty blush beige */

  /* Semantic assignments */
  --bg-dark: var(--color-black);
  --bg-light: var(--color-offwhite);
  --bg-tan: var(--color-almond);
  --text-dark: #1a1815;            /* body text on light */
  --text-muted: #5c5449;           /* secondary text on light */
  --text-light: #ece7df;           /* body text on dark */
  --text-light-muted: #a89e90;     /* secondary text on dark */
  --hairline: rgba(184, 151, 95, 0.35); /* thin gold rule */
  --hairline-soft: rgba(184, 151, 95, 0.18);

  /* Refined shadows — soft, layered, warm */
  --shadow-sm: 0 2px 8px rgba(16, 15, 13, 0.06);
  --shadow-md: 0 18px 40px -12px rgba(16, 15, 13, 0.18);
  --shadow-lg: 0 40px 80px -24px rgba(16, 15, 13, 0.35);
  --shadow-dark: 0 30px 60px -18px rgba(0, 0, 0, 0.6);

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-dark);
  /* Warm off-white with the faintest almond wash for depth */
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(226, 213, 202, 0.55) 0%, transparent 55%),
    var(--bg-light);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

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

/* ---- Typographic scale ------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.75rem, 6.5vw, 5rem); font-weight: 500; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
h4 { font-size: 1.3rem; }

/* Emphasis word inside a display headline */
h1 em, h2 em, h3 em { font-style: italic; color: var(--color-gold-deep); }
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em,
.hero em, .cta-band em, .pullquote em { color: var(--color-gold-soft); }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

/* Eyebrow / small label — generous letter-spacing, flanked by a gold tick */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-gradient);
  display: inline-block;
}
.eyebrow--light { color: var(--color-gold-soft); }
/* Centered eyebrows get ticks on both sides */
.text-center .eyebrow::after,
.pullquote .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-gradient);
  display: inline-block;
}

/* ---- Layout helpers --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }

.section--dark {
  /* Layered warm charcoal rather than flat black */
  background:
    radial-gradient(90% 60% at 15% 0%, var(--color-black-warm) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-black) 0%, var(--color-black-soft) 100%);
  color: var(--text-light);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-offwhite); }

/* Tan / greige sections get a soft directional wash for richness */
.section--tan {
  background: linear-gradient(160deg, var(--color-almond) 0%, var(--color-blush) 100%);
}
.section--greige {
  background: linear-gradient(160deg, var(--color-greige) 0%, #c4b9ad 100%);
}

/* Thin gold rule — recurring structural motif */
.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}
.rule--short {
  width: 60px;
  height: 2px;
  background: var(--gold-gradient);
  margin: 0 0 1.75rem;
  border: 0;
}
.rule--center { margin-inline: auto; }

/* Ornamental divider — thin gold line with a centred diamond */
.rule--ornament {
  border: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto 1.75rem;
  width: 120px;
  color: var(--color-gold);
}
.rule--ornament::before,
.rule--ornament::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.rule--ornament::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.rule--ornament span {
  width: 7px;
  height: 7px;
  background: var(--gold-gradient);
  transform: rotate(45deg);
  flex: none;
}

.text-center { text-align: center; }

/* ---- Buttons ----------------------------------------------------- */
.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.1rem 2.4rem;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  transition: color 0.35s var(--ease),
              border-color 0.35s var(--ease),
              transform 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}

/* Metallic gold — with a light sweep that glides across on hover */
.btn--gold {
  background: var(--gold-gradient);
  color: #2b220f;
  box-shadow: 0 10px 26px -12px rgba(184, 151, 95, 0.7);
}
.btn--gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 232, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease);
}
.btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -12px rgba(184, 151, 95, 0.85);
}
.btn--gold:hover::after { left: 130%; }

/* Outlined — for use on dark backgrounds */
.btn--ghost {
  background: transparent;
  color: var(--color-gold-soft);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-pale);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

/* Outlined — for use on light backgrounds */
.btn--ghost-dark {
  background: transparent;
  color: var(--text-dark);
  border-color: rgba(26, 24, 21, 0.22);
}
.btn--ghost-dark:hover {
  border-color: var(--color-gold-deep);
  color: var(--color-gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(16, 15, 13, 0.4);
}

/* ===============================================================
   HEADER / NAV — shared, sticky
   =============================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16, 15, 13, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--hairline-soft);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
/* Hairline of gold at the very top edge of the page */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold-sheen);
  opacity: 0.7;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 88px;
}

/* Header cart link + live item-count badge (beside the menu). */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--color-gold-soft);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.nav-cart:hover { color: var(--color-gold-pale); transform: translateY(-2px); }
.nav-cart svg { width: 22px; height: 22px; display: block; }
.nav-cart__count {
  position: absolute;
  top: -8px;
  right: -11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  color: #2b220f;
  background: var(--gold-gradient);
  border-radius: 999px;
}
.nav-cart__count[hidden] { display: none; }
@media (min-width: 901px) {
  .nav-links { margin-left: auto; }
  .nav-cart { margin-left: 1.6rem; }
}
@media (max-width: 900px) {
  .nav-toggle { order: 3; }
  .nav-cart { order: 2; margin-left: auto; margin-right: 1.1rem; }
}

/* Brand lockup: gold eagle mark + "Divergent" wordmark. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}
/* The eagle emblem (gold on transparent) */
.logo-mark {
  height: 50px;
  width: auto;
  display: block;
  flex: none;
}
/* Safeguard: WooCommerce block pages (cart, checkout, my-account) enqueue
   styles that can override the logo sizing and blow the header up. Scope an
   !important height to the header logo only (footer logo is unaffected). */
.site-header .logo-mark {
  height: 50px !important;
  width: auto !important;
  object-fit: contain;
}
/* Wordmark — metallic gold text via gradient clip */
.logo-word {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-dot {
  -webkit-text-fill-color: var(--color-offwhite);
  color: var(--color-offwhite);
}
.logo small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  -webkit-text-fill-color: var(--text-light-muted); /* reset from gradient clip */
  margin-top: 5px;
  font-weight: 400;
}
/* Footer emblem sits a little larger */
.footer-brand .logo-mark { height: 64px; }

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links > li { position: relative; }

.nav-links a {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 400;
  padding: 0.5rem 0;
  transition: color 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--color-gold-soft); }

/* Underline sweep on hover */
.nav-links > li > a:not(.nav-cta)::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  background: var(--color-gold);
  transition: width 0.3s var(--ease);
  margin-top: 3px;
}
.nav-links > li > a:not(.nav-cta):hover::after,
.nav-links > li > a[aria-current="page"]::after { width: 100%; }

/* "Contact Here" highlighted CTA item */
.nav-cta {
  position: relative;
  z-index: 0; /* own stacking context so the fill sits behind the label */
  isolation: isolate;
  border: 1px solid var(--hairline);
  color: var(--color-gold-soft) !important;
  padding: 0.72rem 1.6rem !important;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-cta:hover {
  color: #2b220f !important;
  border-color: var(--color-gold);
}
.nav-cta:hover::before { transform: scaleX(1); }

/* Services dropdown / flyout */
.has-dropdown > button {
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s var(--ease);
}
.has-dropdown > button:hover,
.has-dropdown[data-open="true"] > button { color: var(--color-gold-soft); }
.has-dropdown > button .caret {
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2.5px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s var(--ease);
}
.has-dropdown[data-open="true"] > button .caret { transform: rotate(-135deg) translateY(-1px); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background:
    linear-gradient(180deg, var(--color-black-warm), var(--color-black-soft));
  border: 1px solid var(--hairline-soft);
  border-top: 2px solid var(--color-gold);
  padding: 0.6rem 0;
  list-style: none;
  margin: 0.75rem 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  box-shadow: var(--shadow-dark);
}
/* Invisible bridge fills the gap between the button and the menu so the
   pointer keeps :hover while travelling down to the dropdown. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(0.75rem + 10px);
}
.has-dropdown:hover .dropdown,
.has-dropdown[data-open="true"] .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block;
  padding: 0.85rem 1.5rem;
  letter-spacing: 0.1em;
  border-left: 2px solid transparent;
}
.dropdown a:hover {
  background: rgba(184, 151, 95, 0.08);
  border-left-color: var(--color-gold);
}

/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 120;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-gold-soft);
  margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile nav -------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav-links {
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-black);
    border-bottom: 1px solid var(--hairline);
    padding: 1rem var(--gutter) 2.5rem;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform 0.4s var(--ease);
  }
  .nav-links[data-open="true"] { transform: translateY(0); }

  .nav-links > li {
    width: 100%;
    border-bottom: 1px solid rgba(184, 151, 95, 0.15);
  }
  .nav-links > li > a,
  .has-dropdown > button { padding: 1.1rem 0; width: 100%; }

  .nav-links > li > a:not(.nav-cta)::after { display: none; }

  /* Dropdown becomes static accordion on mobile */
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 0 0.75rem;
    display: none;
  }
  .has-dropdown[data-open="true"] .dropdown { display: block; }
  .has-dropdown:hover .dropdown,
  .has-dropdown[data-open="true"] .dropdown {
    transform: none;
  }
  .dropdown a { padding: 0.7rem 0 0.7rem 1.25rem; font-size: 0.78rem; }

  .nav-cta {
    display: inline-block;
    margin-top: 1.25rem;
  }
}

/* ===============================================================
   HERO
   =============================================================== */
.hero {
  /* Textured leather hero photo, darkened on the left to protect the
     left-aligned text, with the image's warm top-right glow left intact.
     The final gradient is a fallback base colour if the image is missing. */
  background:
    linear-gradient(100deg, rgba(14, 13, 11, 0.94) 0%, rgba(14, 13, 11, 0.7) 38%, rgba(14, 13, 11, 0.38) 70%, rgba(14, 13, 11, 0.28) 100%),
    url("../img/hero-bg.png") center center / cover no-repeat,
    linear-gradient(155deg, var(--color-black-warm) 0%, var(--color-black) 60%);
  color: var(--text-light);
  position: relative;
  overflow: hidden;
}
/* Fine gold hairline framing the bottom of the hero */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.5;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(5.5rem, 13vw, 10rem);
  max-width: 880px;
}
.hero h1 {
  color: var(--color-offwhite);
  letter-spacing: -0.01em;
}
.hero p {
  color: var(--text-light-muted);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.75;
  max-width: 680px;
  margin-bottom: 2.75rem;
}

/* Compact hero for interior pages */
.page-hero { text-align: left; }
.page-hero__inner { padding-block: clamp(4rem, 9vw, 7rem); max-width: 780px; }
.page-hero p { margin-bottom: 0; }

/* ===============================================================
   GRIDS & CARDS
   =============================================================== */
.grid { display: grid; gap: 1.75rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Generic card */
.card {
  position: relative;
  background: linear-gradient(170deg, #f5efe8 0%, var(--color-offwhite) 100%);
  border: 1px solid rgba(26, 24, 21, 0.08);
  padding: 2.5rem 2.15rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
  height: 100%;
}
/* Gold corner tick that draws in on hover */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  transition: width 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hairline);
}
.card:hover::before { width: 100%; }
.card h3 { margin-bottom: 0.65rem; }
.card p { color: var(--text-muted); margin-bottom: 1.5rem; }
.card p:last-child { margin-bottom: 0; }

/* Card on tan sections */
.section--tan .card { background: linear-gradient(170deg, #f6efe7, #efe5da); }

/* Pain-point / list card with gold marker */
.marker-card {
  position: relative;
  padding: 1.85rem 1.95rem;
  background: linear-gradient(170deg, #f5efe8 0%, var(--color-offwhite) 100%);
  border: 1px solid rgba(26, 24, 21, 0.06);
  border-left: 2px solid var(--color-gold);
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-left-color 0.45s var(--ease);
}
.marker-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--color-gold-deep);
}
.marker-card h4 { color: var(--color-gold-deep); margin-bottom: 0.4rem; }
.marker-card p { color: var(--text-muted); margin: 0; font-size: 0.98rem; }

.section--dark .marker-card {
  background: linear-gradient(170deg, var(--color-black-warm), var(--color-black-soft));
  border-color: var(--hairline-soft);
  border-left-color: var(--color-gold);
}
.section--dark .marker-card h4 { color: var(--color-gold-soft); }
.section--dark .marker-card p { color: var(--text-light-muted); }

/* Service card (has CTA at bottom) */
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* ===============================================================
   FEATURE LIST (What you'll gain, etc.)
   =============================================================== */
.feature {
  padding: 1.5rem 0;
  border-top: 1px solid var(--hairline);
}
.feature:last-child { border-bottom: 1px solid var(--hairline); }
.feature h4 { color: var(--color-gold-deep); margin-bottom: 0.35rem; }
.feature p { margin: 0; color: var(--text-muted); }
.section--dark .feature h4 { color: var(--color-gold-soft); }
.section--dark .feature p { color: var(--text-light-muted); }

/* ===============================================================
   NUMBERED PROCESS STEPS
   =============================================================== */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--hairline); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  font-style: italic;
  line-height: 1;
  min-width: 2.6ch;
  /* Metallic numeral */
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h4 { margin-bottom: 0.35rem; padding-top: 0.15rem; }
.step p { margin: 0; color: var(--text-muted); }
.section--dark .step p { color: var(--text-light-muted); }

/* ===============================================================
   TAG LIST (short-term outcomes, "who this is for")
   =============================================================== */
.taglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.taglist li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-dark);
}
.section--dark .taglist li { color: var(--text-light); }
.taglist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 9px;
  height: 9px;
  background: var(--color-gold);
  transform: rotate(45deg);
}

/* Inline pill row (short-term outcomes) */
.pills { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.pills li {
  border: 1px solid var(--hairline);
  padding: 0.65rem 1.35rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--text-light);
}

/* ===============================================================
   OUTCOMES SECTION
   Built from Elementor-friendly parts: a centred label, a gold
   check-list (= Elementor Icon List), and impact cards (= containers).
   =============================================================== */

/* Centred sub-label with flanking gold lines
   (Elementor: Heading widget, centred + letter-spaced; class dblc-label) */
.section-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.75rem;
}
.section-label::before,
.section-label::after {
  content: "";
  height: 1px;
  width: 40px;
  background: var(--gold-gradient);
}

/* Gold check-list — short-term outcomes
   (Elementor: Icon List widget, 2 columns, gold circle-check icon) */
.check-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 2.5rem;
}
@media (max-width: 620px) { .check-list { grid-template-columns: 1fr; } }
.check-list li {
  position: relative;
  padding-left: 2.7rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  min-height: 26px;
}
.check-list li::before {
  content: "\2713"; /* ✓ */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  background: rgba(184, 151, 95, 0.14);
  color: var(--color-gold-deep);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 25px;
}

/* Metallic gold display numeral — reusable (impact cards, etc.)
   (Elementor: Heading widget, class dblc-num) */
.gold-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.3rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Impact cards use the shared .card; give their h4 the gold treatment */
.card h4 { color: var(--color-gold-deep); margin-bottom: 0.4rem; }

/* "Includes:" line on product cards */
.product-meta {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-gold-deep);
  border-top: 1px solid var(--hairline-soft);
  padding-top: 0.9rem;
  margin-bottom: 1.6rem;
}
.product-meta strong { font-weight: 500; color: var(--text-dark); }

/* ===============================================================
   PRODUCT SHOWCASE (Products page)
   Alternating two-column feature blocks: visual + detail.
   (Elementor: 2-column inner section, reverse order on the 2nd)
   =============================================================== */
.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.product-showcase--reverse .product-visual { order: 2; }

.product-type {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: 0.85rem;
}
.product-detail h3 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}
.product-detail > p { color: var(--text-muted); margin-bottom: 1.7rem; }

/* Numbered module list (digital course) */
.module-list { list-style: none; margin: 0 0 1.9rem; padding: 0; }
.module-list li {
  display: flex;
  align-items: baseline;
  gap: 0.95rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-dark);
}
.module-list li:last-child { border-bottom: none; }
.module-list__num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-gold-deep);
  flex: none;
  width: 1.4rem;
}

/* Diamond-bulleted feature list (card deck) */
.deck-features { list-style: none; margin: 0 0 1.9rem; padding: 0; }
.deck-features li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.6rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline-soft);
}
.deck-features li:last-child { border-bottom: none; }
.deck-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  background: var(--gold-gradient);
  transform: rotate(45deg);
}

/* Coming-soon pill + action row */
.product-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  border: 1px solid var(--color-gold);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
}
.coming-soon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* --- Product visuals --- */
.product-visual { display: flex; flex-direction: column; gap: 1.1rem; }
.product-visual__caption {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

/* Digital course "player" mock */
.course-mock {
  background: linear-gradient(160deg, var(--color-black-warm), var(--color-black-soft));
  border: 1px solid var(--hairline-soft);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-lg);
}
.course-mock__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 120% at 30% 15%, #262319, #14110c);
  border: 1px solid var(--hairline-soft);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 3vw, 1.6rem);
  overflow: hidden;
}
.course-mock__eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
}
.course-mock__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: var(--color-offwhite);
  margin-top: 0.25rem;
}
.course-mock__play {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.course-mock__play svg {
  width: 26px;
  height: 26px;
  fill: var(--color-black);
  margin-left: 3px;
}
.course-mock__bar {
  height: 3px;
  background: rgba(203, 177, 135, 0.2);
  margin-top: 1.15rem;
}
.course-mock__bar span {
  display: block;
  width: 22%;
  height: 100%;
  background: var(--gold-gradient);
}

/* Physical card deck fan */
.card-fan {
  position: relative;
  height: clamp(330px, 44vw, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-card {
  position: absolute;
  width: min(58%, 232px);
  aspect-ratio: 5 / 7;
  background: linear-gradient(158deg, #211d17, #14110c);
  border: 1px solid var(--color-gold-deep);
  box-shadow: var(--shadow-lg);
  padding: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease);
}
.deck-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(203, 177, 135, 0.22);
  pointer-events: none;
}
.deck-card--back {
  transform: rotate(-15deg) translateX(-34%);
  align-items: center;
  justify-content: center;
}
.deck-card--back img { width: 58%; opacity: 0.92; }
.deck-card--mid { transform: rotate(-2deg) translateX(-4%); z-index: 2; }
.deck-card--front { transform: rotate(12deg) translateX(32%); z-index: 3; }
.card-fan:hover .deck-card--back { transform: rotate(-20deg) translateX(-44%); }
.card-fan:hover .deck-card--front { transform: rotate(17deg) translateX(42%); }
.deck-card__label {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  margin-bottom: 0.85rem;
}
.deck-card p {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.08rem);
  line-height: 1.42;
  color: var(--color-offwhite);
  font-style: italic;
  margin: 0;
}

@media (max-width: 860px) {
  .product-showcase { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-showcase--reverse .product-visual { order: 0; }
}

/* ===============================================================
   EDITORIAL STORY BLOCK (About page)
   Section title on the left, larger lead prose on the right.
   (Elementor: a 2-column container — Heading+Divider | Text)
   =============================================================== */
.story {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: 1040px;
}
@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; gap: 1.25rem; }
}
.story__label { position: relative; }
.story__label h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  margin: 0 0 1rem;
}
.story__body p {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.85;
  margin: 0;
}
.story__body p + p { margin-top: 1.25rem; }

/* ===============================================================
   PLACEHOLDERS — headshots / photos (swap later)
   =============================================================== */
.placeholder {
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(255, 250, 244, 0.4), transparent 60%),
    linear-gradient(150deg, var(--color-blush), var(--color-tan));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(43, 34, 15, 0.7);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  aspect-ratio: 4 / 5;
  position: relative;
  box-shadow: var(--shadow-md);
  /* Gold-framed portrait feel */
  padding: 14px;
}
/* Inner double frame in thin gold */
.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-gold-deep);
  pointer-events: none;
}
.placeholder::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(43, 34, 15, 0.28);
  pointer-events: none;
}
.placeholder--wide { aspect-ratio: 16 / 10; }

/* Real framed photo — mirrors the placeholder's gold-framed treatment */
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-gold-deep);
  box-shadow: var(--shadow-lg);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* keep face/upper body when cropping */
  display: block;
}
/* Thin inner gold line, like a mounted print */
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(230, 211, 173, 0.65);
  pointer-events: none;
}
.photo-frame--wide { aspect-ratio: 16 / 10; }

/* Two-column split (image + text) */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 820px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ===============================================================
   PULL QUOTE / STATEMENT BLOCK
   =============================================================== */
.pullquote {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
/* Punchy opening line — elegant italic serif statement */
.pullquote__lead {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.22;
  color: var(--color-offwhite);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 1.6rem;
}
/* Supporting sentences — clean, readable sans-serif */
.pullquote__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.85;
  color: var(--text-light-muted);
  max-width: 620px;
  margin-inline: auto;
}
.pullquote__body q,
.pullquote__body .accent { color: var(--color-gold-soft); }
.pullquote .mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.5;
  display: block;
  margin-bottom: 1.4rem;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pullquote .eyebrow { justify-content: center; margin-bottom: 1.9rem; }

/* ===============================================================
   FINAL CTA BAND (shared, above footer)
   =============================================================== */
.cta-band {
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(184, 151, 95, 0.22), transparent 60%),
    linear-gradient(160deg, var(--color-black-warm), var(--color-black));
  color: var(--text-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Gold hairlines framing the band top and bottom */
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.5;
}
.cta-band::before { top: 0; }
.cta-band::after { bottom: 0; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--color-offwhite); }
.cta-band p {
  color: var(--text-light-muted);
  max-width: 620px;
  margin: 0 auto 2.5rem;
  font-size: 1.12rem;
}

/* ===============================================================
   FOOTER — shared
   =============================================================== */
.site-footer {
  background: linear-gradient(180deg, var(--color-black) 0%, #0a0908 100%);
  color: var(--text-light-muted);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  border-top: 1px solid var(--hairline-soft);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.4;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

.footer-brand .logo { margin-bottom: 1.1rem; }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-gold-soft);
  max-width: 320px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.footer-col a {
  font-size: 0.92rem;
  color: var(--text-light-muted);
  transition: color 0.3s var(--ease);
}
.footer-col a:hover { color: var(--color-gold-soft); }

/* Social icons */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.social-link:hover { background: var(--color-gold); border-color: var(--color-gold); }
.social-link svg { width: 18px; height: 18px; fill: var(--color-gold-soft); transition: fill 0.3s var(--ease); }
.social-link:hover svg { fill: var(--color-black); }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(184, 151, 95, 0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.footer-legal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 16px;
}
.footer-legal a {
	color: inherit;
	opacity: 0.65;
	text-decoration: none;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-legal a:hover {
	opacity: 1;
	color: var(--color-gold-soft);
}
.footer-legal span { opacity: 0.4; }

@media (max-width: 640px) {
	.footer-legal { display: flex; margin: 8px 0 0; }
	.site-header .logo { overflow: visible; }
	.site-header .logo-mark { height: 40px !important; }
}

/* ===============================================================
   CONTACT FORM
   =============================================================== */
.form-wrap {
  position: relative;
  background: linear-gradient(165deg, var(--color-black-warm), var(--color-black-soft));
  border: 1px solid var(--hairline-soft);
  border-top: 2px solid var(--color-gold);
  padding: clamp(2rem, 5vw, 3.75rem);
  box-shadow: var(--shadow-dark);
}
.form-row { margin-bottom: 1.8rem; }
.form-row label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  margin-bottom: 0.6rem;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(184, 151, 95, 0.4);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  padding: 0.75rem 0;
  transition: border-color 0.3s var(--ease);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus,
.form-row select:-webkit-autofill,
.form-row textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-black-soft) inset;
  -webkit-text-fill-color: var(--text-light);
  caret-color: var(--text-light);
  border-bottom: 1px solid rgba(184, 151, 95, 0.4);
  transition: background-color 9999s ease-out;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--text-light-muted); }
.form-row select { cursor: pointer; }
.form-row select option { background: var(--color-black); color: var(--text-light); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* Confirmation message (shown on submit via JS) */
.form-confirm {
  display: none;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid var(--color-gold);
  background: var(--color-black-soft);
}
.form-confirm .mark {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-gold);
  display: block;
  margin-bottom: 1rem;
}
.form-confirm h3 { color: var(--color-offwhite); }
.form-confirm p { color: var(--text-light-muted); margin: 0; }

/* ===============================================================
   SCROLL-REVEAL (progressive enhancement via main.js)
   =============================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Small utilities -------------------------------------------- */
.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--text-muted); }
.section--dark .lead { color: var(--text-light-muted); }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.25rem; }

/* ===============================================================
   HERO VALUES — centred gold line at the very top of the homepage
   Same champagne gold as the hero eyebrow/quote.
   =============================================================== */
/* High specificity so it wins over `.hero p` (max-width/margin) */
.hero .hero-values {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: var(--color-gold-soft);
  padding-top: clamp(3.25rem, 7vw, 5.5rem);
}
/* When the values line is present, pull the hero content up under it */
.hero:has(.hero-values) .hero__inner {
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

/* ===============================================================
   ABOUT — THE EMBLEM (logo meaning) section
   =============================================================== */
.logo-emblem { text-align: center; }
.logo-emblem img {
  max-width: min(360px, 78%);
  height: auto;
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.55));
}
.brand-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  color: var(--color-gold-soft);
  margin-top: 1.75rem;
}
@media (max-width: 780px) {
  .logo-emblem { margin-bottom: 2.5rem; }
  .logo-emblem img { max-width: 240px; }
}

/* ===============================================================
   PRODUCT GRID (Products page)
   The front end of a WordPress product loop: one uniform card per
   product, so the approved mockup matches what the CMS will render.
   =============================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
/* Category pages may hold a single product today and grow over time.
   Cap card width and centre the row so one card doesn't stretch full-width. */
.product-grid--center {
  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
  justify-content: center;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, #f5efe8 0%, var(--color-offwhite) 100%);
  border: 1px solid rgba(26, 24, 21, 0.08);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold);
}
/* Featured image */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ece3d8;
}
.product-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder shown until a photo is uploaded in WordPress */
.product-card__media.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 28%, #efe7db, #ddd0c0);
  border-bottom: 1px solid rgba(26, 24, 21, 0.08);
}
.product-card__watermark {
  width: 40%;
  max-width: 120px;
  opacity: 0.2;
}
.product-card__imglabel {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  opacity: 0.75;
}
.product-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-offwhite);
  background: rgba(16, 15, 13, 0.72);
  border: 1px solid var(--color-gold);
  padding: 0.4rem 0.7rem;
}
/* Body */
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.product-card__body .product-type { margin-bottom: 0.7rem; }
.product-card__body h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin-bottom: 0.85rem;
}
.product-card__desc {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1.6rem;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline-soft);
}
.product-card__price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-gold-deep);
}

/* ===============================================================
   WOOCOMMERCE DEFAULT ARCHIVE (/shop/ and product category pages)
   The Digital/Physical hub pages render the custom .product-card
   grid, but WooCommerce's own /shop/ archive uses its default
   product loop. Style that loop on-brand: a responsive grid with
   contained images, so a single product never blows up full-width.
   =============================================================== */
.woocommerce-section .woocommerce-result-count {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.woocommerce-section .woocommerce-ordering { margin: 0 0 2rem; }

.woocommerce-section ul.products {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
/* Neutralise WooCommerce's float grid so a lone product doesn't sprawl. */
.woocommerce-section ul.products li.product {
  position: relative;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, #f5efe8 0%, var(--color-offwhite) 100%);
  border: 1px solid rgba(26, 24, 21, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 0 0 1.6rem;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.woocommerce-section ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold);
}
/* The eyesore fix: contain the featured image to the card. */
.woocommerce-section ul.products li.product a img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 0 1.3rem;
}
.woocommerce-section ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  padding: 0 1.5rem;
  margin: 0 0 0.6rem;
}
.woocommerce-section ul.products li.product .price {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold-deep);
  font-size: 1.15rem;
  padding: 0 1.5rem;
  margin: 0 0 1.2rem;
}
.woocommerce-section ul.products li.product .price del {
  color: var(--text-muted);
  opacity: 0.7;
  margin-right: 0.4rem;
  font-style: normal;
}
/* Add-to-cart + "View cart" styled as the theme's light-background ghost button. */
.woocommerce-section ul.products li.product .button,
.woocommerce-section ul.products li.product .added_to_cart {
  margin: auto 1.5rem 0;
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  background: transparent;
  color: var(--text-dark);
  border: 1px solid rgba(26, 24, 21, 0.22);
  border-radius: 0;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.woocommerce-section ul.products li.product .added_to_cart { margin-top: 0.6rem; }
.woocommerce-section ul.products li.product .button:hover,
.woocommerce-section ul.products li.product .added_to_cart:hover {
  border-color: var(--color-gold-deep);
  color: var(--color-gold-deep);
  background: rgba(184, 151, 95, 0.06);
}
/* Sale flash: a square gold tag to match the theme, not the round green default. */
.woocommerce-section span.onsale {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  right: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;
  color: var(--color-offwhite);
  background: rgba(16, 15, 13, 0.82);
  border: 1px solid var(--color-gold);
}

/* Cart / Checkout / My-account render through page.php's tall visual hero,
   but only carry a one-word title, so the black band looks mostly empty.
   Shrink the band and tighten the space before the content on these pages
   only — About/Contact/Services keep their full-height hero. */
body.woocommerce-cart .page-hero__inner,
body.woocommerce-checkout .page-hero__inner,
body.woocommerce-account .page-hero__inner {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
  margin-top: 0;
}
body.woocommerce-cart main > .section,
body.woocommerce-checkout main > .section,
body.woocommerce-account main > .section {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}