/*!
 * Beyond the Cotton Fields — site styles
 * Moved from Elementor Custom Code into the child theme (2026-07-02).
 * Source modules concatenated in cascade order. Edit here going forward.
 */


/* ===================== global (was snippet #224) ===================== */
/*
------------------------------------------------------------------

Global Foundation

Purpose:
Design tokens (:root), CSS reset, base body, paper-grain texture, and shared section utilities (.section-label/.section-title/.gold-rule/.section-wrap).

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

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

:root {
      --parchment:      #f7f0e3;
      --parchment-deep: #ede3d0;
      --parchment-warm: #e8dcc8;
      --cream:          #faf6ee;
      --ivory:          #fdfaf4;
      --tobacco:        #2c1f0e;
      --tobacco-mid:    #3d2c16;
      --tobacco-light:  #5a3e22;
      --tobacco-pale:   #7a5a38;
      --gold:           #b8892a;
      --gold-bright:    #d4a43c;
      --gold-pale:      #e8c870;
      --gold-muted:     rgba(184,137,42,0.15);
      --gold-glow:      rgba(184,137,42,0.25);
      --navy:           #1a2540;
      --navy-mid:       #243050;
      --cotton-amber:   #c4954a;
      --cotton-warm:    #d4a85a;
      --border-warm:    rgba(44,31,14,0.1);
      --border-gold:    rgba(184,137,42,0.2);
      --shadow-warm:    rgba(44,31,14,0.12);
      --shadow-deep:    rgba(44,31,14,0.25);
      --display-font:        'Cormorant Garamond', Georgia, serif;
      --body:           'Jost', system-ui, sans-serif;
      --literary:       'EB Garamond', Georgia, serif;
      --shadow-sm:  0 2px 16px rgba(44,31,14,0.1), 0 1px 4px rgba(44,31,14,0.08);
      --shadow-md:  0 8px 48px rgba(44,31,14,0.15), 0 2px 12px rgba(44,31,14,0.1);
      --shadow-lg:  0 20px 80px rgba(44,31,14,0.2), 0 6px 24px rgba(44,31,14,0.12);
      --shadow-xl:  0 40px 120px rgba(44,31,14,0.28), 0 12px 48px rgba(44,31,14,0.15);
    }

html { scroll-behavior: smooth; margin: 0; padding: 0; overflow-x: hidden; scrollbar-width: none; }

html::-webkit-scrollbar { width: 0; display: none; }

body {
      margin: 0; padding: 0;
      background: var(--ivory);
      color: var(--tobacco);
      font-family: var(--body);
      overflow-x: hidden;
      max-width: 100vw;
      -webkit-font-smoothing: antialiased;
    }

body::after {
      content: '';
      position: fixed; inset: 0; z-index: 9999;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.028;
      pointer-events: none;
      mix-blend-mode: multiply;
    }

.section-label {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

.section-label-line {
      width: 32px; height: 1px;
      background: var(--gold);
      flex-shrink: 0;
    }

.section-label-text {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
    }

.section-title {
      font-family: var(--display-font);
      font-size: clamp(2.2rem, 4vw, 3.8rem);
      font-weight: 600;
      line-height: 1.1;
      color: var(--tobacco);
      margin-bottom: 20px;
    }

.section-title em {
      font-style: italic;
      font-weight: 300;
      color: var(--tobacco-light);
    }

.gold-rule {
      width: 48px; height: 2px;
      background: linear-gradient(to right, var(--gold), var(--gold-pale), transparent);
      margin-bottom: 28px;
    }

.section-wrap {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 80px;
    }

.format-pill {
      font-family: var(--body);
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 6px 16px;
      border: 1px solid var(--border-warm);
      color: var(--tobacco-pale);
      background: rgba(44,31,14,0.03);
    }


/* ===================== typography (was snippet #225) ===================== */
/*
------------------------------------------------------------------

Typography

Purpose:
Loads the three brand typefaces and defines the base typographic
foundation. In the native rebuild, per-widget typography is set with
Elementor Global Fonts (Site Settings > Typography); this file only
supplies the @font import and element-level defaults that Global Fonts
inherit from. Keep the type SCALE here so it lives in one place.

Font roles (mapped to Elementor Global Fonts):
  Display  -> Cormorant Garamond  (--display)   H1, H2, hero, section titles
  Body     -> Jost                (--body)      paragraphs, labels, buttons, nav
  Literary -> EB Garamond         (--literary)  pull quotes, intros, italic prose

Dependencies:
global.css (defines --display / --body / --literary tokens)

------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Jost:wght@300;400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ── Base element defaults (Global Fonts inherit from these) ───────── */
body {
  font-family: var(--body);
  color: var(--tobacco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display-font);
  font-weight: 600;
  line-height: 1.1;
  color: var(--tobacco);
}

/* ── Type scale (clamp-based, fluid) — reference for Global Fonts ──── */
/* Display : clamp(3.5rem, 7vw, 6.5rem)   — hero title            */
/* H1      : clamp(2.6rem, 5vw, 4.2rem)                            */
/* H2      : clamp(2.2rem, 4vw, 3.8rem)   — section title         */
/* H3      : clamp(1.5rem, 2.4vw, 2.1rem)                          */
/* Body    : 1.05rem / line-height 1.85 / weight 300              */
/* Small   : 0.72rem / letter-spacing 0.18em / uppercase          */
/* Buttons : 0.72rem / weight 600 / letter-spacing 0.18em / caps  */
/* Captions: 0.65rem / weight 600 / letter-spacing 0.25em / caps  */

em, .literary, blockquote {
  font-family: var(--literary);
}

a { color: var(--gold); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--gold-bright); }


/* ===================== buttons (was snippet #226) ===================== */
/*
------------------------------------------------------------------

Buttons & CTAs

Purpose:
All button and call-to-action styles: hero CTAs, nav CTA, book-store buttons, card links, event/excerpt CTAs. Hover transitions are CSS-only.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.site-nav a:not(.nav-cta)::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: var(--gold);
      transition: width 0.35s ease;
    }

.site-nav a:not(.nav-cta):hover::after { width: 100%; }

.site-nav a:not(.nav-cta):hover { color: var(--gold-pale); }

.site-header.scrolled .site-nav a:not(.nav-cta):hover { color: var(--gold); }

.nav-cta {
      background: var(--tobacco);
      color: var(--parchment) !important;
      padding: 10px 24px;
      font-size: 0.68rem !important;
      letter-spacing: 0.18em;
      border: 1px solid var(--tobacco);
      transition: all 0.35s ease !important;
      box-shadow: 0 2px 12px rgba(44,31,14,0.3);
    }

.nav-cta:hover {
      background: var(--gold) !important;
      border-color: var(--gold) !important;
      color: var(--tobacco) !important;
      box-shadow: 0 4px 20px rgba(184,137,42,0.4) !important;
    }

.mobile-nav-cta {
      margin-top: 28px !important;
      background: var(--gold) !important;
      color: var(--tobacco) !important;
      padding: 14px 36px !important;
      font-family: var(--body) !important;
      font-size: 0.68rem !important;
      letter-spacing: 0.2em !important;
      font-weight: 700 !important;
      border: none !important;
      border-bottom: none !important;
      width: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      box-shadow: 0 8px 32px rgba(184,137,42,0.35) !important;
      transition: background 0.3s, box-shadow 0.3s !important;
    }

.mobile-nav-cta:hover { background: var(--gold-bright) !important; box-shadow: 0 12px 40px rgba(184,137,42,0.5) !important; }

.mobile-nav-cta .nav-num { display: none !important; }

.mobile-nav-cta::after { display: none !important; }

.btn-primary {
      display: inline-flex;
      align-items: center;
      background: var(--gold);
      color: var(--tobacco);
      padding: 16px 36px;
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid var(--gold);
      transition: all 0.35s ease;
      box-shadow: 0 4px 24px rgba(184,137,42,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
      position: relative;
      overflow: hidden;
    }

.btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    }

.btn-primary:hover {
      background: var(--gold-bright);
      border-color: var(--gold-bright);
      box-shadow: 0 8px 40px rgba(184,137,42,0.55);
      transform: translateY(-2px);
    }

.btn-secondary {
      display: inline-flex;
      align-items: center;
      background: transparent;
      color: var(--parchment);
      padding: 16px 36px;
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid rgba(247,240,227,0.4);
      transition: all 0.35s ease;
      backdrop-filter: blur(4px);
    }

.btn-secondary:hover {
      border-color: var(--gold);
      color: var(--gold-pale);
      background: rgba(184,137,42,0.08);
    }

.btn-book-primary {
      display: inline-flex;
      align-items: center;
      background: var(--tobacco);
      color: var(--parchment);
      padding: 14px 28px;
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid var(--tobacco);
      transition: all 0.35s ease;
      box-shadow: var(--shadow-sm);
    }

.btn-book-primary:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--tobacco);
      box-shadow: 0 6px 28px rgba(184,137,42,0.4);
    }

.btn-book-secondary {
      display: inline-flex;
      align-items: center;
      background: transparent;
      color: var(--tobacco);
      padding: 14px 28px;
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid var(--border-warm);
      transition: all 0.35s ease;
    }

.btn-book-secondary:hover {
      border-color: var(--gold);
      color: var(--gold);
      background: rgba(184,137,42,0.04);
    }

.btn-card-link {
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.3s;
    }

.btn-card-link:hover { gap: 10px; }

.excerpt-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      transition: gap 0.3s;
    }

.excerpt-cta:hover { gap: 14px; }

.event-cta {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.3s;
    }

.event-cta:hover { color: var(--gold-bright); }


/* ===================== header (was snippet #227) ===================== */
/*
------------------------------------------------------------------

Header & Navigation

Purpose:
Sticky transparent-to-solid header, desktop nav, hamburger, off-canvas mobile menu, floating social sidebar, mobile sticky bar.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.site-header {
      position: fixed;
      top: 0;
      left: 0;
      /* NB: no CSS transform here — a transform on the fixed header would become
         the containing block for its descendant position:fixed elements (the
         WooCommerce side-cart panel), clipping the cart to the header's height.
         Full-viewport width pinned at left:0 centers identically without it. */
      width: 100vw;
      max-width: 100vw;
      height: 80px;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 60px;
      box-sizing: border-box;
      transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
      border-bottom: 1px solid transparent;
    }

.site-header.scrolled {
      background: rgba(253,250,244,0.98);
      /* NB: no backdrop-filter — like transform, it makes the header the
         containing block for descendant position:fixed elements (the Woo
         side-cart panel), clipping the cart to the header. The 0.98-opaque
         parchment reads the same without it. */
      border-bottom-color: rgba(184,137,42,0.18);
      box-shadow: 0 1px 0 rgba(184,137,42,0.08), 0 6px 40px rgba(44,31,14,0.1);
    }

.logo-wrap {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      gap: 1px;
      flex-shrink: 0;
    }

.logo-main {
      font-family: var(--display-font);
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--tobacco);
      letter-spacing: 0.01em;
      line-height: 1.1;
      transition: color 0.3s;
    }

.site-header:not(.scrolled) .logo-main { color: var(--parchment); }

.logo-sub {
      font-family: var(--body);
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
    }

.site-nav {
      display: flex;
      align-items: center;
      gap: 36px;
    }

.site-nav a {
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(247,240,227,0.85);
      transition: color 0.3s;
      position: relative;
    }

.site-header.scrolled .site-nav a { color: var(--tobacco-light); }

.hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      background: none;
      border: none;
      z-index: 1100;
    }

.hamburger span {
      display: block;
      width: 26px;
      height: 2px;
      background: var(--parchment);
      transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
      transform-origin: center;
    }

.site-header.scrolled .hamburger span { background: var(--tobacco); }

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 1050;
      background: var(--tobacco);
      display: grid;
      grid-template-columns: 1fr;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1);
      overflow: hidden;
    }

.mobile-menu::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.035;
      pointer-events: none;
      z-index: 0;
    }

.mobile-menu.open {
      opacity: 1;
      pointer-events: all;
    }

.mobile-menu-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      height: 100%;
      width: 100%;
    }

.mobile-menu-book-panel {
      display: none;
      position: relative;
      background-image: url('/wp-content/uploads/2026/06/book-cover-source.webp');
      background-size: cover;
      background-position: center center;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 60px 40px;
      border-right: 1px solid rgba(184,137,42,0.18);
      overflow: hidden;
    }

.mobile-menu-book-panel::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(44,31,14,0.72) 0%,
          rgba(44,31,14,0.58) 40%,
          rgba(44,31,14,0.68) 100%),
        radial-gradient(ellipse at 50% 30%, rgba(184,137,42,0.12) 0%, transparent 60%);
      z-index: 0;
    }

.mobile-menu-book-img {
      position: relative; z-index: 1;
      width: 200px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4), -6px 6px 0 rgba(184,137,42,0.2);
      opacity: 0;
      transform: translateY(24px) scale(0.95);
      transition: opacity 0.7s ease 0.3s, transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s;
    }

.mobile-menu.open .mobile-menu-book-img { opacity: 1; transform: translateY(0) scale(1); }

.mobile-menu-book-tagline {
      position: relative; z-index: 1;
      font-family: var(--literary);
      font-size: 0.82rem;
      font-style: italic;
      color: rgba(247,240,227,0.45);
      text-align: center;
      margin-top: 24px;
      line-height: 1.6;
      max-width: 200px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
    }

.mobile-menu.open .mobile-menu-book-tagline { opacity: 1; transform: translateY(0); }

.mobile-menu-nav-panel {
      position: relative; z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 80px 48px 60px;
      background: var(--tobacco);
      overflow: hidden;
    }

.mobile-menu-nav-panel::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, var(--gold) 0%, var(--gold-pale) 50%, var(--gold) 100%);
    }

.mobile-menu-nav-panel::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, transparent 0%, rgba(184,137,42,0.3) 50%, transparent 100%);
    }

.mobile-menu-bg-text {
      position: absolute;
      font-family: var(--display-font);
      font-size: clamp(12rem, 40vw, 22rem);
      font-weight: 700;
      color: rgba(184,137,42,0.04);
      letter-spacing: -0.04em;
      user-select: none;
      white-space: nowrap;
      bottom: -4rem;
      right: -2rem;
      z-index: 0;
      line-height: 1;
    }

.mobile-menu-eyebrow {
      position: relative; z-index: 1;
      font-family: var(--body);
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 32px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
    }

.mobile-menu.open .mobile-menu-eyebrow { opacity: 1; transform: translateY(0); }

.mobile-nav {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      width: 100%;
    }

.mobile-nav a {
      font-family: var(--display-font);
      font-size: clamp(1.9rem, 6vw, 3.2rem);
      font-weight: 500;
      color: rgba(247,240,227,0.75);
      text-decoration: none;
      letter-spacing: 0.01em;
      padding: 10px 0;
      position: relative;
      opacity: 0;
      transform: translateX(-24px);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), color 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;
      border-bottom: 1px solid rgba(184,137,42,0.07);
      width: 100%;
    }

.mobile-nav a:last-child { border-bottom: none; }

.mobile-nav a .nav-num {
      font-family: var(--body);
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      color: rgba(184,137,42,0.45);
      min-width: 24px;
      transition: color 0.3s;
    }

.mobile-menu.open .mobile-nav a { opacity: 1; transform: translateX(0); }

.mobile-menu.open .mobile-nav a:nth-child(1) { transition-delay: 0.08s; }

.mobile-menu.open .mobile-nav a:nth-child(2) { transition-delay: 0.13s; }

.mobile-menu.open .mobile-nav a:nth-child(3) { transition-delay: 0.18s; }

.mobile-menu.open .mobile-nav a:nth-child(4) { transition-delay: 0.23s; }

.mobile-menu.open .mobile-nav a:nth-child(5) { transition-delay: 0.28s; }

.mobile-menu.open .mobile-nav a:nth-child(6) { transition-delay: 0.33s; }

.mobile-menu.open .mobile-nav a:nth-child(7) { transition-delay: 0.38s; }

.mobile-nav a:hover { color: var(--parchment); }

.mobile-nav a:hover .nav-num { color: var(--gold); }

.mobile-nav a::after {
      content: '';
      position: absolute;
      left: 0; bottom: -1px;
      width: 0; height: 1px;
      background: var(--gold);
      transition: width 0.4s ease;
    }

.mobile-nav a:hover::after { width: 100%; }

.mobile-menu-social {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 12px;
      margin-top: 36px;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
    }

.mobile-menu.open .mobile-menu-social { opacity: 1; transform: translateY(0); }

.mobile-menu-social a {
      width: 36px; height: 36px;
      border: 1px solid rgba(247,240,227,0.15);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s;
    }

.mobile-menu-social a:hover { border-color: var(--gold); background: rgba(184,137,42,0.12); }

.mobile-menu-social svg { width: 14px; height: 14px; fill: rgba(247,240,227,0.5); transition: fill 0.3s; }

.mobile-menu-social a:hover svg { fill: var(--gold-pale); }

.mobile-menu-divider {
      position: relative; z-index: 1;
      width: 32px; height: 1px;
      background: rgba(184,137,42,0.25);
      margin: 28px 0 0;
    }

.social-sidebar {
      position: fixed;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 500;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.social-sidebar-link {
      width: 36px; height: 36px;
      background: rgba(253,250,244,0.9);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(184,137,42,0.2);
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-sm);
    }

.social-sidebar-link:hover {
      background: var(--gold);
      border-color: var(--gold);
      transform: translateX(-3px);
    }

.social-sidebar-link svg { width: 14px; height: 14px; fill: var(--tobacco); }

.social-sidebar-link:hover svg { fill: var(--ivory); }

.mobile-sticky-bar {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 900;
      background: var(--tobacco);
      border-top: 1px solid rgba(184,137,42,0.2);
      padding: 12px 20px;
      gap: 10px;
    }

.msb-primary {
      flex: 1;
      padding: 14px;
      background: var(--gold);
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
    }

.msb-secondary {
      flex: 1;
      padding: 14px;
      background: transparent;
      color: var(--parchment);
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      border: 1px solid rgba(247,240,227,0.2);
    }


/* ===================== footer (was snippet #228) ===================== */
/*
------------------------------------------------------------------

Footer

Purpose:
Full-width four-column footer: brand, social row, navigation columns, legal row.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.site-footer {
      position: relative;
      width: 100%;
      background: var(--tobacco);
      padding: 80px 0 0;
      overflow: hidden;
      box-sizing: border-box;
    }

.site-footer::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, transparent 0%, var(--gold) 25%, var(--gold-pale) 50%, var(--gold) 75%, transparent 100%);
    }

.site-footer::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(184,137,42,0.06) 1px, transparent 0);
      background-size: 40px 40px;
      pointer-events: none;
    }

.footer-inner {
      position: relative; z-index: 1;
      width: 100%;
      max-width: 1400px;      /* match the body content width (.page-wrap/.section-wrap) */
      margin: 0 auto;
      padding: 0 80px;
      box-sizing: border-box;
    }

.footer-top {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 60px;
      /* border-bottom removed — .footer-bottom's border-top is the single divider
         (the two adjacent borders were rendering as a double line). */
      margin-bottom: 0;
    }

.footer-logo {
      font-family: var(--display-font);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--parchment);
      margin-bottom: 4px;
      line-height: 1.1;
    }

.footer-logo-sub {
      font-family: var(--body);
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 20px;
    }

.footer-tagline {
      font-family: var(--literary);
      font-size: 0.92rem;
      font-style: italic;
      line-height: 1.7;
      color: rgba(247,240,227,0.45);
      margin-bottom: 28px;
    }

.footer-social {
      display: flex;
      gap: 10px;
    }

.footer-social-link {
      width: 38px; height: 38px;
      border: 1px solid rgba(247,240,227,0.12);
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      transition: all 0.3s ease;
    }

.footer-social-link:hover {
      border-color: var(--gold);
      background: rgba(184,137,42,0.12);
    }

.footer-social-link svg { width: 14px; height: 14px; fill: rgba(247,240,227,0.5); transition: fill 0.3s; }

.footer-social-link:hover svg { fill: var(--gold-pale); }

.footer-col-title {
      font-family: var(--body);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(184,137,42,0.15);
    }

.footer-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.footer-links a {
      font-family: var(--body);
      font-size: 0.82rem;
      font-weight: 300;
      color: rgba(247,240,227,0.45);
      text-decoration: none;
      transition: color 0.3s;
      line-height: 1.4;
    }

.footer-links a:hover { color: var(--gold-pale); }

.footer-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding: 28px 0;
      border-top: 1px solid rgba(247,240,227,0.06);
    }

.footer-copy {
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 300;
      color: rgba(247,240,227,0.28);
      line-height: 1.5;
      flex-shrink: 0;
    }

.footer-legal {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 24px;
      flex-shrink: 0;
    }

.footer-legal a {
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 300;
      color: rgba(247,240,227,0.28);
      text-decoration: none;
      transition: color 0.3s;
      white-space: nowrap;
    }

.footer-legal a:hover { color: var(--gold-pale); }


/* ===================== hero (was snippet #229) ===================== */
/*
------------------------------------------------------------------

Hero

Purpose:
Full-viewport hero: background breathe animation, multi-layer overlays, eyebrow/title/CTAs, scroll hint, and the marquee band beneath it.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.hero {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      transform: translateZ(0);
      isolation: isolate;
    }

.hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('/wp-content/uploads/2026/06/hero-bg-bookcover.webp');
      background-size: cover;
      background-position: center top;
      animation: heroBreathe 16s ease-in-out infinite;
      will-change: transform;
    }

.hero-overlay-1 {
      position: absolute; inset: 0;
      background: linear-gradient(
        to right,
        rgba(20,14,5,0.72) 0%,
        rgba(20,14,5,0.45) 45%,
        rgba(20,14,5,0.15) 70%,
        rgba(20,14,5,0.05) 100%
      );
    }

.hero-overlay-2 {
      position: absolute; inset: 0;
      background: linear-gradient(
        to top,
        rgba(10,7,2,0.85) 0%,
        rgba(10,7,2,0.4) 30%,
        transparent 60%
      );
    }

.hero-overlay-3 {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 80%, rgba(184,137,42,0.15) 0%, transparent 55%);
    }

.hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 80px 100px;
      max-width: 760px;
    }

.hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

.hero-eyebrow-line {
      width: 40px; height: 1px;
      background: var(--gold);
    }

.hero-eyebrow-text {
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-pale);
    }

.hero-title {
      font-family: var(--display-font);
      font-size: clamp(3.5rem, 7vw, 6.5rem);
      font-weight: 600;
      line-height: 1.0;
      color: var(--parchment);
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

.hero-title em {
      font-style: italic;
      font-weight: 300;
      color: var(--cotton-warm);
    }

.hero-rule {
      width: 60px; height: 1px;
      background: linear-gradient(to right, var(--gold), transparent);
      margin-bottom: 20px;
    }

.hero-subtitle {
      font-family: var(--body);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(247,240,227,0.65);
      margin-bottom: 10px;
    }

.hero-author {
      font-family: var(--literary);
      font-size: 1.3rem;
      font-style: italic;
      color: var(--gold-pale);
      margin-bottom: 40px;
    }

.hero-ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

.marquee-band {
      width: 100%;
      background: var(--tobacco);
      border-top: 1px solid rgba(184,137,42,0.2);
      border-bottom: 1px solid rgba(184,137,42,0.2);
      padding: 14px 0;
      overflow: hidden;
      position: relative;
    }

.marquee-band::before, .marquee-band::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 80px;
      z-index: 2;
    }

.marquee-band::before { left: 0; background: linear-gradient(to right, var(--tobacco), transparent); }

.marquee-band::after  { right: 0; background: linear-gradient(to left, var(--tobacco), transparent); }

.marquee-track {
      display: flex;
      width: max-content;
      animation: marqueeScroll 32s linear infinite;
    }

.marquee-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 32px;
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(247,240,227,0.6);
      white-space: nowrap;
    }

.marquee-dot {
      width: 4px; height: 4px;
      background: var(--gold);
      border-radius: 50%;
      flex-shrink: 0;
    }


/* ===================== story (was snippet #230) ===================== */
/*
------------------------------------------------------------------

Story / Pullquote / Social Follow

Purpose:
His-Story two-column block, parallax pull-quote band, and the social-follow card row.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.story-section {
      padding: 120px 0;
      background-color: var(--parchment);
      position: relative;
      overflow: hidden;
    }

.story-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 2px,
          rgba(44,31,14,0.018) 2px,
          rgba(44,31,14,0.018) 4px
        ),
        repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 2px,
          rgba(44,31,14,0.012) 2px,
          rgba(44,31,14,0.012) 4px
        );
      pointer-events: none;
    }

.story-section::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, transparent 0%, var(--gold) 30%, var(--gold-pale) 50%, var(--gold) 70%, transparent 100%);
    }

.story-bg-letter {
      position: absolute;
      font-family: var(--display-font);
      font-size: clamp(18rem, 35vw, 30rem);
      font-weight: 700;
      color: rgba(44,31,14,0.03);
      line-height: 1;
      right: -2%;
      top: 50%;
      transform: translateY(-50%);
      user-select: none;
      pointer-events: none;
      letter-spacing: -0.05em;
    }

.story-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

.story-image-wrap {
      position: relative;
    }

.story-image-frame {
      position: relative;
    }

.story-image-frame::before {
      content: '';
      position: absolute;
      top: -16px; left: -16px;
      right: 16px; bottom: -16px;
      border: 1px solid rgba(184,137,42,0.3);
      z-index: 0;
    }

.story-image-frame::after {
      content: '';
      position: absolute;
      top: 16px; left: 16px;
      right: -16px; bottom: 16px;
      background: linear-gradient(135deg, rgba(184,137,42,0.08), rgba(196,149,74,0.04));
      z-index: 0;
    }

.story-image-frame img {
      position: relative;
      z-index: 1;
      width: 100%;
      display: block;
      box-shadow: var(--shadow-xl);
      filter: contrast(1.02) saturate(0.95);
    }

.story-intro {
      font-family: var(--literary);
      font-size: 1.35rem;
      font-style: italic;
      line-height: 1.65;
      color: var(--tobacco-mid);
      margin-bottom: 24px;
      padding-left: 20px;
      border-left: 3px solid var(--gold);
    }

.story-body {
      font-family: var(--body);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.85;
      color: var(--tobacco-light);
      margin-bottom: 20px;
    }

.story-credentials {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 32px;
      padding: 28px;
      background: rgba(44,31,14,0.04);
      border: 1px solid rgba(184,137,42,0.15);
      position: relative;
    }

.story-credentials::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: linear-gradient(to bottom, var(--gold), var(--cotton-amber));
    }

.credential-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

.credential-dot {
      width: 6px; height: 6px;
      background: var(--gold);
      border-radius: 50%;
      margin-top: 7px;
      flex-shrink: 0;
    }

.credential-text {
      font-family: var(--body);
      font-size: 0.92rem;
      font-weight: 400;
      line-height: 1.6;
      color: var(--tobacco-mid);
    }

.pullquote-section {
      position: relative;
      padding: 160px 0;
      overflow: hidden;
      background-image: url('/wp-content/uploads/2026/06/cotton-field-sunrise.webp');
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
    }

.pullquote-parallax-bg {
      display: none;
    }

.pullquote-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(30,18,6,0.55) 0%,
          rgba(30,18,6,0.45) 50%,
          rgba(30,18,6,0.55) 100%);
    }

.pullquote-inner {
      position: relative;
      z-index: 2;
      max-width: 860px;
      margin: 0 auto;
      padding: 0 80px;
      text-align: center;
    }

.pullquote-ornament {
      font-family: var(--display-font);
      font-size: 7rem;
      line-height: 0.4;
      color: var(--gold);
      opacity: 0.8;
      display: block;
      margin-bottom: 20px;
    }

.pullquote-text {
      font-family: var(--display-font);
      font-size: clamp(1.6rem, 3.2vw, 2.6rem);
      font-weight: 400;
      font-style: italic;
      line-height: 1.55;
      color: var(--parchment);
      margin-bottom: 32px;
      text-shadow: 0 2px 24px rgba(0,0,0,0.4);
    }

.pullquote-text strong {
      font-weight: 600;
      font-style: normal;
      color: var(--gold-pale);
    }

.pullquote-rule {
      width: 48px; height: 1px;
      background: var(--gold);
      margin: 0 auto 20px;
    }

.pullquote-attribution {
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(247,240,227,0.7);
    }

.social-section {
      padding: 120px 0;
      background: var(--parchment-deep);
      position: relative;
      overflow: hidden;
    }

.social-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(44,31,14,0.04) 39px, rgba(44,31,14,0.04) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(44,31,14,0.04) 39px, rgba(44,31,14,0.04) 40px);
      pointer-events: none;
    }

.social-section::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(184,137,42,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(184,137,42,0.05) 0%, transparent 55%);
      pointer-events: none;
    }

.social-section .social-top-rule {
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, transparent 0%, var(--gold) 30%, var(--gold-pale) 50%, var(--gold) 70%, transparent 100%);
    }

.social-inner {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 80px;
      text-align: center;
    }

.social-eyebrow {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }

.social-heading {
      font-family: var(--display-font);
      font-size: clamp(1.8rem, 3.5vw, 3rem);
      font-weight: 500;
      color: var(--tobacco);
      margin-bottom: 56px;
      line-height: 1.2;
    }

.social-heading em { font-style: italic; font-weight: 300; color: var(--cotton-amber); }

.social-cards {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

.social-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 44px 48px;
      text-decoration: none;
      border: 1px solid rgba(44,31,14,0.1);
      background: rgba(253,250,244,0.7);
      backdrop-filter: blur(4px);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
      min-width: 180px;
      box-shadow: 0 4px 24px rgba(44,31,14,0.06), 0 1px 4px rgba(44,31,14,0.04);
    }

.social-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

.social-card.instagram::before { background: linear-gradient(to right, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }

.social-card.tiktok::before { background: #69C9D0; }

.social-card.facebook::before { background: #1877F2; }

.social-card.linkedin::before { background: #0A66C2; }

.social-card:hover { background: var(--ivory); border-color: rgba(184,137,42,0.35); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(44,31,14,0.15), 0 4px 16px rgba(44,31,14,0.08); }

.social-card:hover::before { transform: scaleX(1); }

.social-icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: rgba(44,31,14,0.08);
      border: 1px solid rgba(44,31,14,0.08);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.4s ease;
    }

.social-card:hover .social-icon { background: rgba(44,31,14,0.12); border-color: rgba(184,137,42,0.2); }

.social-icon svg { width: 26px; height: 26px; }

.social-card-label {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--tobacco-light);
    }

.social-card-action {
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--tobacco);
    }


/* ===================== videos (was snippet #231) ===================== */
/*
------------------------------------------------------------------

Videos

Purpose:
Deep-tobacco video section: featured video, 3-up video grid, play buttons, and the lightbox modal.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.video-section {
      padding: 120px 0;
      background: var(--tobacco);
      position: relative;
      overflow: hidden;
    }

.video-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 60px,
          rgba(184,137,42,0.025) 60px,
          rgba(184,137,42,0.025) 61px
        );
    }

.video-section::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 15% 50%, rgba(184,137,42,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 50%, rgba(196,149,74,0.05) 0%, transparent 55%);
    }

.video-inner {
      position: relative; z-index: 1;
      max-width: 1400px; margin: 0 auto; padding: 0 80px;
    }

.video-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 56px;
    }

.video-header-left .section-label-text { color: var(--gold-pale); }

.video-header-left .section-label-line { background: var(--gold); }

.video-section-title {
      font-family: var(--display-font);
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 600;
      color: var(--parchment);
      line-height: 1.1;
    }

.video-section-title em { font-style: italic; font-weight: 300; color: var(--cotton-warm); }

.video-featured {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
      margin-bottom: 24px;
      cursor: pointer;
      box-shadow: var(--shadow-xl);
    }

.video-featured img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.7s ease;
    }

.video-featured:hover img { transform: scale(1.03); }

.video-featured-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(44,31,14,0.8) 0%, rgba(44,31,14,0.2) 50%, transparent 100%);
      display: flex; align-items: center; justify-content: center;
    }

.play-btn-large {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: rgba(247,240,227,0.12);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(247,240,227,0.35);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.35s ease;
      animation: playPulse 2.8s ease-in-out infinite;
    }

.video-featured:hover .play-btn-large {
      background: rgba(184,137,42,0.9);
      border-color: var(--gold);
      transform: scale(1.1);
    }

.play-btn-large svg { width: 30px; height: 30px; fill: var(--parchment); margin-left: 5px; }

.video-featured-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 32px 36px;
    }

.video-featured-title {
      font-family: var(--display-font);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--parchment);
      margin-bottom: 6px;
    }

.video-featured-sub {
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: rgba(247,240,227,0.6);
    }

.video-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

.video-card {
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
      cursor: pointer;
      box-shadow: var(--shadow-md);
    }

.video-card img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.5s ease;
    }

.video-card:hover img { transform: scale(1.06); }

.video-card-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(44,31,14,0.82) 0%, rgba(44,31,14,0.25) 50%, transparent 100%);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.35s ease;
    }

.video-card:hover .video-card-overlay {
      background: linear-gradient(to top, rgba(44,31,14,0.88) 0%, rgba(44,31,14,0.4) 50%, rgba(44,31,14,0.1) 100%);
    }

.play-btn-sm {
      width: 54px; height: 54px;
      border-radius: 50%;
      background: rgba(247,240,227,0.12);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(247,240,227,0.3);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s ease;
    }

.video-card:hover .play-btn-sm {
      background: rgba(184,137,42,0.85);
      border-color: var(--gold);
      transform: scale(1.1);
    }

.play-btn-sm svg { width: 18px; height: 18px; fill: var(--parchment); margin-left: 3px; }

.video-card-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 20px 20px;
    }

.video-card-title {
      font-family: var(--display-font);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--parchment);
      line-height: 1.3;
    }

.lightbox {
      position: fixed; inset: 0; z-index: 2000;
      background: rgba(10,7,2,0.92);
      backdrop-filter: blur(12px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease;
    }

.lightbox.active { opacity: 1; pointer-events: all; }

.lightbox-inner {
      position: relative;
      width: 90%;
      max-width: 960px;
    }

.lightbox-close {
      position: absolute;
      top: -48px; right: 0;
      background: none;
      border: 1px solid rgba(247,240,227,0.2);
      color: rgba(247,240,227,0.7);
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 8px 20px;
      cursor: pointer;
      transition: all 0.3s;
    }

.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }

.lightbox-video {
      aspect-ratio: 16/9;
      background: rgba(44,31,14,0.5);
      display: flex; align-items: center; justify-content: center;
    }

.lightbox-placeholder {
      text-align: center;
      color: rgba(247,240,227,0.4);
      font-family: var(--body);
      font-size: 0.85rem;
      padding: 40px;
    }


/* ===================== books (was snippet #232) ===================== */
/*
------------------------------------------------------------------

Books / Movement / Excerpt / Endorsements

Purpose:
Featured book, secondary book cards, Join-the-Movement presale band, chapter excerpt, and endorsement cards.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.books-section {
      padding: 120px 0;
      background: var(--ivory);
      position: relative;
      overflow: hidden;
    }

.books-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(45deg, rgba(184,137,42,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(184,137,42,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(184,137,42,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(184,137,42,0.04) 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }

.books-section::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(253,250,244,0.95) 0%, rgba(253,250,244,0.7) 40%, transparent 70%),
        radial-gradient(ellipse at 50% 100%, rgba(253,250,244,0.95) 0%, rgba(253,250,244,0.7) 40%, transparent 70%);
    }

.books-inner {
      position: relative; z-index: 1;
      max-width: 1400px; margin: 0 auto; padding: 0 80px;
    }

.books-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 64px;
    }

.books-featured {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: center;
      margin-bottom: 64px;
      padding: 60px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.12);
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
    }

.books-featured::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, var(--gold), var(--gold-pale), var(--gold));
    }

.books-featured::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 3px,
          rgba(44,31,14,0.012) 3px,
          rgba(44,31,14,0.012) 6px
        );
      pointer-events: none;
    }

.book-cover-wrap {
      position: relative;
      z-index: 1;
    }

.book-cover-badge {
      position: absolute;
      top: -12px; right: -12px;
      background: var(--gold);
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 8px 14px;
      z-index: 2;
      box-shadow: 0 4px 16px rgba(184,137,42,0.4);
    }

.book-cover-img {
      width: 100%;
      display: block;
      box-shadow: var(--shadow-xl);
      position: relative;
      z-index: 1;
    }

.book-cover-shadow {
      position: absolute;
      bottom: -20px; left: 10%; right: 10%;
      height: 40px;
      background: radial-gradient(ellipse, rgba(44,31,14,0.35) 0%, transparent 70%);
      filter: blur(12px);
    }

.book-info { position: relative; z-index: 1; }

.book-tag {
      display: inline-block;
      font-family: var(--body);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid var(--gold-muted);
      padding: 5px 14px;
      margin-bottom: 20px;
      background: rgba(184,137,42,0.06);
    }

.book-title {
      font-family: var(--display-font);
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 600;
      line-height: 1.1;
      color: var(--tobacco);
      margin-bottom: 8px;
    }

.book-subtitle {
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--tobacco-pale);
      margin-bottom: 24px;
    }

.book-description {
      font-family: var(--body);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.8;
      color: var(--tobacco-light);
      margin-bottom: 28px;
    }

.book-formats {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

.book-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

.books-secondary {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

.book-card-secondary {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 28px;
      align-items: start;
      padding: 32px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.1);
      box-shadow: var(--shadow-sm);
      transition: all 0.35s ease;
      position: relative;
      overflow: hidden;
    }

.book-card-secondary::before {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 3px; height: 100%;
      background: linear-gradient(to bottom, var(--gold), transparent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.4s ease;
    }

.book-card-secondary:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.book-card-secondary:hover::before { transform: scaleY(1); }

.book-card-secondary img {
      width: 100%;
      box-shadow: var(--shadow-md);
    }

.book-card-tag {
      font-family: var(--body);
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }

.book-card-title {
      font-family: var(--display-font);
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--tobacco);
      line-height: 1.2;
      margin-bottom: 8px;
    }

.book-card-desc {
      font-family: var(--body);
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--tobacco-light);
      margin-bottom: 16px;
    }

.movement-section {
      padding: 160px 0;
      position: relative;
      overflow: hidden;
      background-image: url('/wp-content/uploads/2026/06/movement-bg.png');
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
    }

.movement-section::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(26,37,64,0.72) 0%,
          rgba(26,37,64,0.58) 50%,
          rgba(26,37,64,0.72) 100%);
    }

.movement-section::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 2px 2px, rgba(184,137,42,0.12) 1px, transparent 0);
      background-size: 48px 48px;
      pointer-events: none;
    }

.movement-inner {
      position: relative; z-index: 1;
      max-width: 860px; margin: 0 auto; padding: 0 80px;
      text-align: center;
    }

.movement-eyebrow {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }

.movement-title {
      font-family: var(--display-font);
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 600;
      line-height: 1.1;
      color: var(--parchment);
      margin-bottom: 24px;
    }

.movement-title em { font-style: italic; font-weight: 300; color: var(--cotton-warm); }

.movement-body {
      font-family: var(--body);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(247,240,227,0.65);
      margin-bottom: 48px;
    }

.movement-form {
      display: flex;
      gap: 0;
      max-width: 520px;
      margin: 0 auto 20px;
      box-shadow: 0 8px 48px rgba(0,0,0,0.3);
    }

.movement-form input {
      flex: 1;
      padding: 18px 24px;
      font-family: var(--body);
      font-size: 0.88rem;
      background: rgba(247,240,227,0.08);
      border: 1px solid rgba(247,240,227,0.15);
      border-right: none;
      color: var(--parchment);
      outline: none;
      transition: border-color 0.3s;
    }

.movement-form input::placeholder { color: rgba(247,240,227,0.35); }

.movement-form input:focus { border-color: var(--gold); }

.movement-form button {
      padding: 18px 32px;
      background: var(--gold);
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: all 0.35s ease;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    }

.movement-form button:hover { background: var(--gold-bright); }

.movement-note {
      font-family: var(--body);
      font-size: 0.72rem;
      color: rgba(247,240,227,0.35);
      letter-spacing: 0.05em;
    }

.excerpt-section {
      padding: 120px 0;
      background: var(--parchment-deep);
      position: relative;
      overflow: hidden;
    }

.excerpt-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 80px,
          rgba(44,31,14,0.015) 80px,
          rgba(44,31,14,0.015) 81px
        ),
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 80px,
          rgba(44,31,14,0.015) 80px,
          rgba(44,31,14,0.015) 81px
        );
    }

.excerpt-inner {
      position: relative; z-index: 1;
      max-width: 1400px; margin: 0 auto; padding: 0 80px;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 80px;
      align-items: start;
    }

.excerpt-label-col {
      position: sticky;
      top: 120px;
    }

.excerpt-chapter {
      font-family: var(--display-font);
      font-size: clamp(5rem, 10vw, 9rem);
      font-weight: 700;
      color: rgba(44,31,14,0.06);
      line-height: 1;
      margin-bottom: -20px;
      letter-spacing: -0.02em;
    }

.excerpt-content {
      padding: 48px;
      background: var(--ivory);
      border: 1px solid rgba(184,137,42,0.1);
      box-shadow: var(--shadow-lg);
      position: relative;
    }

.excerpt-content::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, var(--gold), transparent);
    }

.excerpt-dropcap {
      font-family: var(--display-font);
      font-size: 5.5rem;
      font-weight: 700;
      float: left;
      line-height: 0.75;
      margin-right: 8px;
      margin-top: 8px;
      color: var(--gold);
    }

.excerpt-text {
      font-family: var(--literary);
      font-size: 1.15rem;
      line-height: 1.95;
      color: var(--tobacco-mid);
      margin-bottom: 24px;
    }

.endorsements-section {
      padding: 120px 0;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }

.endorsements-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(
          60deg,
          transparent,
          transparent 10px,
          rgba(44,31,14,0.016) 10px,
          rgba(44,31,14,0.016) 11px
        ),
        repeating-linear-gradient(
          -60deg,
          transparent,
          transparent 10px,
          rgba(44,31,14,0.016) 10px,
          rgba(44,31,14,0.016) 11px
        );
    }

.endorsements-inner {
      position: relative; z-index: 1;
      max-width: 1400px; margin: 0 auto; padding: 0 80px;
    }

.endorsements-header { text-align: center; margin-bottom: 64px; }

.endorsements-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

.endorsement-card {
      padding: 40px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.1);
      box-shadow: var(--shadow-sm);
      position: relative;
      transition: all 0.4s ease;
    }

.endorsement-card::before {
      content: '"';
      position: absolute;
      top: 20px; left: 32px;
      font-family: var(--display-font);
      font-size: 5rem;
      line-height: 1;
      color: rgba(184,137,42,0.15);
    }

.endorsement-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(184,137,42,0.2);
    }

.endorsement-text {
      font-family: var(--literary);
      font-size: 1.05rem;
      font-style: italic;
      line-height: 1.75;
      color: var(--tobacco-mid);
      margin-bottom: 28px;
      padding-top: 32px;
    }

.endorsement-rule {
      width: 32px; height: 1px;
      background: var(--gold);
      margin-bottom: 16px;
    }

.endorsement-name {
      font-family: var(--body);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--tobacco);
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

.endorsement-title {
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 400;
      color: var(--tobacco-pale);
    }

.endorsement-portrait-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }

.endorsement-portrait {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      object-fit: cover;
      object-position: top center;
      border: 2px solid rgba(184,137,42,0.25);
      box-shadow: 0 4px 16px rgba(44,31,14,0.15);
      flex-shrink: 0;
    }

.endorsement-portrait-meta { flex: 1; }


/* ===================== events (was snippet #233) ===================== */
/*
------------------------------------------------------------------

Events

Purpose:
Upcoming-events list with date chips and RSVP links (rebuilt dynamically via The Events Calendar).

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.events-section {
      padding: 120px 0;
      background: var(--parchment-warm);
      position: relative;
      overflow: hidden;
    }

.events-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(44,31,14,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44,31,14,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
    }

.events-inner {
      position: relative; z-index: 1;
      max-width: 1400px; margin: 0 auto; padding: 0 80px;
    }

.events-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 56px;
    }

.events-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

.event-item {
      display: grid;
      grid-template-columns: 100px 1fr auto;
      gap: 40px;
      align-items: center;
      padding: 28px 36px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.08);
      transition: all 0.35s ease;
      position: relative;
      overflow: hidden;
    }

.event-item::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--gold);
      transform: scaleY(0);
      transition: transform 0.35s ease;
    }

.event-item:hover { background: var(--ivory); box-shadow: var(--shadow-sm); transform: translateX(4px); }

.event-item:hover::before { transform: scaleY(1); }

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

.event-month {
      font-family: var(--body);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 2px;
    }

.event-day {
      font-family: var(--display-font);
      font-size: 2.2rem;
      font-weight: 600;
      color: var(--tobacco);
      line-height: 1;
    }

.event-name {
      font-family: var(--display-font);
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--tobacco);
      margin-bottom: 4px;
    }

.event-meta {
      font-family: var(--body);
      font-size: 0.78rem;
      font-weight: 400;
      color: var(--tobacco-pale);
    }



/* --- Events Loop Grid (dynamic TEC) --- */
.events-loop .elementor-loop-container{display:flex;flex-direction:column;gap:0;grid-template-columns:none;}
.events-loop .e-loop-item{width:100%;}
.events-loop .event-item{display:flex;align-items:center;gap:clamp(16px,3vw,32px);padding:22px 0;border-bottom:1px solid var(--border-warm);}
.events-loop .event-date{flex:0 0 auto;min-width:130px;}
.events-loop .event-date .tec-events-elementor-event-widget__datetime,.events-loop .event-datetime{font-family:var(--display-font);font-size:1rem;font-weight:600;color:var(--gold);line-height:1.25;}
.events-loop .event-body{flex:1 1 auto;}
.events-loop .event-name a,.events-loop .event-name{font-family:var(--display-font);font-size:1.2rem;font-weight:600;color:var(--tobacco);text-decoration:none;}
.events-loop .event-meta{font-family:var(--body);font-size:0.82rem;color:var(--tobacco-pale);}
.events-loop .event-cta{flex:0 0 auto;}


/* ===================== forms (was snippet #234) ===================== */
/*
------------------------------------------------------------------

Forms

Purpose:
Contact / speaking-inquiry two-column block and shared form field styling.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
> Custom Code.

------------------------------------------------------------------
*/

.contact-section {
      padding: 120px 0;
      background: var(--ivory);
      position: relative;
      overflow: hidden;
    }

.contact-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(44,31,14,0.03) 39px, rgba(44,31,14,0.03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(44,31,14,0.03) 39px, rgba(44,31,14,0.03) 40px);
    }

.contact-inner {
      position: relative; z-index: 1;
      max-width: 1400px; margin: 0 auto; padding: 0 80px;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 80px;
      align-items: start;
    }

.contact-info-col { }

.contact-channels {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: 40px;
    }

.contact-channel {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 20px 24px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.1);
      border-left: 3px solid var(--gold);
    }

.contact-channel-label {
      font-family: var(--body);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
    }

.contact-channel-value {
      font-family: var(--body);
      font-size: 0.95rem;
      font-weight: 400;
      color: var(--tobacco-mid);
      /* Email addresses are one long unbreakable "word". With the default
         overflow-wrap:normal they cannot wrap, so on a narrow screen they run
         straight out of the card and get clipped. Even the short local addresses
         already measured 242px inside a 230px card; a longer one (e.g.
         drraymondcrawford@beyondthecottonfields.com, as used on live) overflows
         badly.
         `anywhere` rather than `break-word` on purpose: only `anywhere` also
         reduces the element's min-content width, so the address can no longer
         force its flex parent wider than the screen. */
      overflow-wrap: anywhere;
    }

.contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 48px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.1);
      box-shadow: var(--shadow-md);
      position: relative;
    }

.contact-form::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, var(--gold), var(--gold-pale), transparent);
    }

/* Scoped to .contact-form only. A BARE `.form-row` (0,1,0) also matches
   WooCommerce's checkout/cart fields (`<p class="form-row form-row-first">` …),
   turning every checkout field into a 2-col grid — label in one cell, input in
   the other — which visually broke the checkout billing form. */
.contact-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

.contact-form input,
    .contact-form select,
    .contact-form textarea {
      padding: 14px 18px;
      background: var(--ivory);
      border: 1px solid rgba(44,31,14,0.1);
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.3s, box-shadow 0.3s;
      width: 100%;
    }

.contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(184,137,42,0.08);
    }

.contact-form textarea { resize: vertical; min-height: 140px; }

.contact-form button {
      padding: 16px 32px;
      background: var(--tobacco);
      color: var(--parchment);
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      border: 2px solid var(--tobacco);
      cursor: pointer;
      transition: all 0.35s ease;
      align-self: flex-start;
    }

.contact-form button:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--tobacco);
    }


/* ===================== newsletter (was snippet #235) ===================== */
/*
------------------------------------------------------------------

Newsletter

Purpose:
Inner-Circle newsletter section (Mailchimp).

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
&gt; Custom Code.

------------------------------------------------------------------
*/

.newsletter-section {
      padding: 160px 0;
      position: relative;
      overflow: hidden;
      background-image: url('/wp-content/uploads/2026/06/newsletter-bg.png');
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
    }

.newsletter-section::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(44,31,14,0.78) 0%,
          rgba(44,31,14,0.65) 50%,
          rgba(44,31,14,0.78) 100%);
    }

.newsletter-section-border {
      position: absolute;
      inset: 20px;
      border: 1px solid rgba(184,137,42,0.18);
      pointer-events: none;
      z-index: 1;
    }

.newsletter-section::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(184,137,42,0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(184,137,42,0.07) 0%, transparent 55%);
      pointer-events: none;
    }

.newsletter-inner {
      position: relative; z-index: 1;
      max-width: 640px; margin: 0 auto; padding: 0 80px;
      text-align: center;
    }

.newsletter-eyebrow {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }

.newsletter-title {
      font-family: var(--display-font);
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 500;
      color: var(--parchment);
      margin-bottom: 16px;
      line-height: 1.2;
    }

.newsletter-title em { font-style: italic; font-weight: 300; color: var(--cotton-warm); }

.newsletter-body {
      font-family: var(--body);
      font-size: 0.95rem;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(247,240,227,0.55);
      margin-bottom: 40px;
    }

.newsletter-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

.newsletter-form input {
      padding: 16px 20px;
      background: rgba(247,240,227,0.07);
      border: 1px solid rgba(247,240,227,0.12);
      color: var(--parchment);
      font-family: var(--body);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.3s;
    }

.newsletter-form input::placeholder { color: rgba(247,240,227,0.3); }

.newsletter-form input:focus { border-color: var(--gold); }

.newsletter-form button {
      padding: 16px;
      background: var(--gold);
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: all 0.35s ease;
      box-shadow: 0 4px 20px rgba(184,137,42,0.35);
    }

.newsletter-form button:hover { background: var(--gold-bright); }


/* ===================== woo (was snippet #236) ===================== */
/*
------------------------------------------------------------------

WooCommerce

Purpose:
Styles the WooCommerce pages (Shop, Single Product, Cart, Checkout,
Order Confirmation) to match the Beyond the Cotton Fields design
system — tobacco (#2c1f0e), parchment (#f7f0e3), gold (#b8892a),
Cormorant Garamond display headings, Jost body. These pages are built
with Elementor / WooCommerce Theme Builder widgets; this file supplies
the brand skin the native store widgets can't set on their own.

Dependencies:
global.css, typography.css, buttons.css

------------------------------------------------------------------
*/

/* ── Store-wide surface + type ─────────────────────────────────────── */
.woocommerce, .woocommerce-page {
  font-family: var(--body);
  color: var(--tobacco);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
  font-family: var(--display-font);
  color: var(--tobacco);
}

/* ── Product titles &amp; prices ───────────────────────────────────────── */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--tobacco);
  font-family: var(--body);
  font-weight: 500;
}
.woocommerce span.onsale {
  background: var(--gold);
  color: var(--tobacco);
  font-family: var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Buttons (match brand primary) ─────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--gold);
  color: var(--tobacco);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 2px solid var(--gold);
  border-radius: 0;
  padding: 14px 32px;
  transition: all 0.35s ease;
  box-shadow: 0 4px 24px rgba(184,137,42,0.35);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--tobacco);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(184,137,42,0.5);
}

/* ── "Coming Soon" retailer buttons (Phase 1 disabled state) ───────── */
.btn-retailer.coming-soon,
.woocommerce a.button.coming-soon {
  background: rgba(44,31,14,0.08);
  color: var(--tobacco-pale);
  border-color: var(--border-warm);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Form fields (cart, checkout, product variations) ──────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container,
.woocommerce table.shop_table {
  border-radius: 0;
  border-color: var(--border-warm);
  font-family: var(--body);
}
.woocommerce-checkout #payment {
  background: var(--parchment);
  border: 1px solid var(--border-gold);
  border-radius: 0;
}

/* ── Notices ───────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--gold);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--gold);
}

/* ── Cart / checkout headings &amp; totals ─────────────────────────────── */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.cart_totals h2, .woocommerce-checkout h3 {
  font-family: var(--display-font);
  color: var(--tobacco);
}

/* ── Light pages with NO dark hero → force the solid header look ────────
   (cart/checkout/shop have dark heroes; single product + single event open
   on light content, where the transparent light header + light nav would be
   invisible and the content would slide under the fixed header). */
body.single-product .site-header,
body.post-type-archive-tribe_events .site-header,
body.woocommerce-shop .site-header,
body.post-type-archive-product .site-header {
  background: rgba(253,250,244,0.98);
  /* no backdrop-filter here either — see .site-header.scrolled note */
  border-bottom-color: rgba(184,137,42,0.18);
  box-shadow: 0 1px 0 rgba(184,137,42,0.08), 0 6px 40px rgba(44,31,14,0.1);
}
body.single-product .site-nav a.elementor-item,
body.post-type-archive-tribe_events .site-nav a.elementor-item,
body.woocommerce-shop .site-nav a.elementor-item,
body.post-type-archive-product .site-nav a.elementor-item { color: var(--tobacco-light); }
body.single-product .site-nav a.elementor-item:hover,
body.post-type-archive-tribe_events .site-nav a.elementor-item:hover,
body.woocommerce-shop .site-nav a.elementor-item:hover,
body.post-type-archive-product .site-nav a.elementor-item:hover { color: var(--gold); }
/* logo is light for dark heroes; on the solid header force it dark */
body.single-product .site-header:not(.scrolled) .logo-main,
body.post-type-archive-tribe_events .site-header:not(.scrolled) .logo-main,
body.woocommerce-shop .site-header:not(.scrolled) .logo-main,
body.post-type-archive-product .site-header:not(.scrolled) .logo-main { color: var(--tobacco); }
body.single-product .header-cart .elementor-button-icon svg,
body.single-product .header-cart .elementor-button-icon i,
body.single-product .header-cart .elementor-button-icon,
body.post-type-archive-tribe_events .header-cart .elementor-button-icon svg,
body.post-type-archive-tribe_events .header-cart .elementor-button-icon i,
body.post-type-archive-tribe_events .header-cart .elementor-button-icon,
body.woocommerce-shop .header-cart .elementor-button-icon svg,
body.woocommerce-shop .header-cart .elementor-button-icon i,
body.woocommerce-shop .header-cart .elementor-button-icon,
body.post-type-archive-product .header-cart .elementor-button-icon svg,
body.post-type-archive-product .header-cart .elementor-button-icon i,
body.post-type-archive-product .header-cart .elementor-button-icon { color: var(--tobacco) !important; fill: var(--tobacco) !important; }
/* clear the 80px fixed header above the first content block */
body.single-product .woo-breadcrumb-bar { padding-top: 104px; }
/* single events now open on a full-bleed .event-hero which carries its own 80px
   header clearance, so they must NOT also get this 120px offset (it would push the
   hero down and expose a light gap under the fixed header). The events ARCHIVE
   (/calendar/) still opens on light content and keeps it. */
body.post-type-archive-tribe_events .tribe-events-pg-template { padding-top: 120px !important; }
body.single-tribe_events .tribe-events-pg-template { padding-top: 0 !important; }
/* shop preorder page opens on light content directly under the fixed header */
body.woocommerce-shop .shop-preorder,
body.post-type-archive-product .shop-preorder { padding-top: clamp(112px, 9vw, 140px); }

/* ── Add-to-cart button → brand gold (was unstyled Woo mauve #a46497) ── */
.product-atc .single_add_to_cart_button,
.product-atc button.button,
.product-atc .button.alt,
.woocommerce div.product form.cart .button {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  color: #fff !important;
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}
.product-atc .single_add_to_cart_button:hover,
.product-atc button.button:hover,
.woocommerce div.product form.cart .button:hover {
  background: var(--tobacco) !important;
  background-color: var(--tobacco) !important;
  border-color: var(--tobacco) !important;
  color: var(--parchment) !important;
}

/* ── WooCommerce notices must clear the fixed header (add-to-cart toast) ─
   The .woocommerce-notices-wrapper sits right after </header> at y:0, so any
   message overlapped the 80px fixed header. Only pad it when it holds a
   notice (:not(:empty)) so hero sections still sit flush under the header. */
.woocommerce-notices-wrapper:not(:empty) {
  padding-top: 96px;
  padding-left: max(24px, 5vw);
  padding-right: max(24px, 5vw);
  background: var(--parchment);
}


/* ===================== elementor-bridge (was snippet #237) ===================== */
/*
------------------------------------------------------------------

Elementor Bridge

Purpose:
Native Elementor widgets wrap their content in extra markup
(.elementor-button inside a widget div; nav-menu renders .elementor-item
anchors). The mockup CSS targets bare <a> tags. This bridge maps the
widget markup back to the mockup's look for the header CTA, nav menu,
and footer links — the few places where the wrapper structure matters.

Dependencies: header.css, footer.css, buttons.css, global.css tokens

------------------------------------------------------------------
*/

/* ── Header layout ─────────────────────────────────────────────────── */
.site-header .header-right { display: flex; align-items: center; gap: 28px; }

/* ── Header CTA button (Order Now) ─────────────────────────────────── */
.site-header .nav-cta .elementor-button {
  background: var(--tobacco);
  color: var(--parchment);
  padding: 10px 24px;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--tobacco);
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(44,31,14,0.3);
  transition: all 0.35s ease;
}
.site-header .nav-cta .elementor-button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--tobacco);
  box-shadow: 0 4px 20px rgba(184,137,42,0.4);
}

/* ── Nav menu items → mockup nav-link look ─────────────────────────── */
.site-nav .elementor-nav-menu a.elementor-item {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,240,227,0.85);
  padding: 0 2px;
  transition: color 0.3s ease;
}
.site-header.scrolled .site-nav a.elementor-item { color: var(--tobacco-light); }
.site-nav a.elementor-item:hover { color: var(--gold-pale); background: transparent; }
.site-header.scrolled .site-nav a.elementor-item:hover { color: var(--gold); }

/* ── Footer links &amp; legal rendered as buttons → plain text links ───── */
.footer-links .elementor-button,
.footer-legal .elementor-button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  fill: rgba(247,240,227,0.55) !important;
  font-family: var(--body) !important;
  font-style: normal !important;
  color: rgba(247,240,227,0.55) !important;
  /* !important on the type too — loop-grid pages (home, events) re-emit the
     kit's global .elementor-widget-button .elementor-button typography inline
     after btcf.css at equal specificity, blowing footer links up to ~20px. */
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  transition: color 0.3s ease;
  display: inline-block;
}
.footer-links .elementor-widget-button { margin-bottom: 8px; }
.footer-legal .elementor-button { font-size: 0.72rem !important; letter-spacing: 0.08em !important; }
.footer-links .elementor-button:hover,
.footer-legal .elementor-button:hover { color: var(--gold-pale) !important; background: transparent !important; }
.footer-social .elementor-icon { color: rgba(247,240,227,0.5); font-size: 14px; transition: color 0.3s; }
.footer-social a:hover .elementor-icon { color: var(--gold-pale); }


/* ===================== animations (was snippet #238) ===================== */
/*
------------------------------------------------------------------

Animations

Purpose:
Scroll-reveal system ([data-reveal]) and all @keyframes (heroBreathe, marqueeScroll, playPulse, scrollLine), plus the back-to-top control.

Dependencies:
None

Source: extracted from finalized mockup (v5) — do not hand-edit
generated files; edit the source module and re-load into Elementor
&gt; Custom Code.

------------------------------------------------------------------
*/

[data-reveal] {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
    }

[data-reveal="left"]  { transform: translateX(-48px); opacity: 0; }

[data-reveal="right"] { transform: translateX(48px); opacity: 0; }

[data-reveal="scale"] { transform: scale(0.92); opacity: 0; }

[data-reveal="fade"]  { transform: none; opacity: 0; }

[data-reveal="line"]  { transform: scaleX(0); transform-origin: left; opacity: 1;
                            transition: transform 1.4s cubic-bezier(0.16,1,0.3,1); }

[data-reveal].visible { opacity: 1; transform: none; }

@keyframes heroBreathe {
      0%   { transform: scale(1.0); }
      50%  { transform: scale(1.08); }
      100% { transform: scale(1.0); }
    }

.hero-scroll-hint {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

.hero-scroll-hint span {
      font-family: var(--body);
      font-size: 0.6rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(247,240,227,0.4);
    }

@keyframes scrollLine {
      0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
      50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
      51% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    }

.scroll-line {
      width: 1px; height: 48px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: scrollLine 2s ease-in-out infinite;
    }

@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@keyframes playPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(184,137,42,0.5); }
      50% { box-shadow: 0 0 0 20px rgba(184,137,42,0); }
    }

.back-to-top {
      position: fixed;
      bottom: 36px;
      right: 36px;
      z-index: 800;
      width: 48px; height: 48px;
      background: var(--parchment);
      border: 1px solid rgba(184,137,42,0.25);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      opacity: 0;
      transform: translateY(16px);
      transition: all 0.4s ease;
      box-shadow: var(--shadow-md);
      text-decoration: none;
    }

.back-to-top.visible {
      opacity: 1;
      transform: translateY(0);
    }

.back-to-top:hover {
      background: var(--gold);
      border-color: var(--gold);
    }

.back-to-top svg { width: 16px; height: 16px; fill: none; stroke: var(--tobacco); stroke-width: 2; transition: stroke 0.3s; }

.back-to-top:hover svg { stroke: var(--ivory); }


/* ===================== responsive (was snippet #239) ===================== */
/*
------------------------------------------------------------------

Responsive

Purpose:
Tablet (&lt;=1024px) and mobile ( Custom Code.

------------------------------------------------------------------
*/

@media (min-width: 520px) {
      .mobile-menu-layout { grid-template-columns: 260px 1fr; }
      .mobile-menu-book-panel { display: flex; }
      .mobile-menu-nav-panel { padding: 80px 56px 60px; }
    }

@media (max-width: 1024px) {
      .site-header { padding: 0 40px; }
      .site-nav { gap: 24px; }
      .section-wrap, .video-inner, .books-inner, .social-inner,
      .movement-inner, .endorsements-inner, .events-inner,
      .newsletter-inner, .contact-inner, .footer-inner { padding: 0 40px; }
      .story-grid { grid-template-columns: 1fr; gap: 48px; }
      .story-image-wrap { max-width: 480px; }
      .books-featured { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
      .book-cover-wrap { max-width: 300px; }
      .books-secondary { grid-template-columns: 1fr; }
      .endorsements-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-inner { grid-template-columns: 1fr; gap: 48px; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
      .excerpt-inner { grid-template-columns: 1fr; gap: 32px; }
      .excerpt-label-col { position: static; }
      .video-grid { grid-template-columns: repeat(2, 1fr); }
    }

@media (max-width: 600px) {
      /* shrink the logo so logo + burger + cart fit on one line on phones */
      .site-header .logo-main { font-size: 1.05rem; }
      .site-header .logo-sub { font-size: 0.5rem; }
}
@media (max-width: 768px) {
      .site-header { padding: 0 20px; }
      .hamburger { display: flex; }
      .social-sidebar { display: none; }
      .hero-content { padding: 0 24px 120px; }
      .hero-title { font-size: clamp(2.8rem, 10vw, 4rem); }
      .hero-ctas { flex-direction: column; gap: 12px; }
      .btn-primary, .btn-secondary { justify-content: center; text-align: center; }
      .section-wrap, .video-inner, .books-inner, .social-inner,
      .movement-inner, .endorsements-inner, .events-inner,
      .newsletter-inner, .contact-inner, .footer-inner,
      .pullquote-inner, .excerpt-inner { padding: 0 24px; }
      .story-section, .video-section, .books-section, .endorsements-section,
      .events-section, .newsletter-section, .contact-section,
      .excerpt-section, .pullquote-section { padding: 80px 0; }
      .story-grid { grid-template-columns: 1fr; }
      .books-featured { padding: 28px; }
      .books-secondary { grid-template-columns: 1fr; }
      .book-card-secondary { grid-template-columns: 90px 1fr; gap: 20px; }
      .endorsements-grid { grid-template-columns: 1fr; }
      .events-inner { padding: 0 16px; }
      .event-item { grid-template-columns: 72px 1fr; gap: 16px; padding: 20px 16px; }
      .event-cta { display: none; }
      /* Client request 2026-07-15: the three link columns sit SIDE BY SIDE on
         mobile rather than stacking (was 1fr, i.e. one column, ~970px of
         scrolling). The brand block (first child) spans the full row above them.
         Column gap stays tight because 3 columns of ~100px is all a 390px
         screen allows; longer labels wrap to two lines, which is fine here. */
      .footer-top { grid-template-columns: repeat(3, 1fr); gap: 36px 14px; }
      .footer-top > :first-child { grid-column: 1 / -1; }
      /* Elementor buttons centre their label by default. At full column width
         that never showed, but in a ~103px column the longer labels wrap to two
         lines and the centring becomes obvious — and inconsistent with the
         left-aligned desktop footer. Pin them left. */
      .footer-top .footer-links .elementor-button { text-align: left; }
      .footer-top .footer-links .elementor-widget-button { width: 100%; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .footer-inner { padding: 0 24px; }
      .mobile-sticky-bar { display: flex; }
      /* Hero "Scroll" hint — retire it on phones.
         It lives at bottom:40px, i.e. y 704–804 in an 844px viewport. The mobile
         sticky CTA bar is position:fixed; bottom:0, 98px tall at z-index 9998, so
         it occupies y 746–844 and covers 58 of the hint's 100px: the gold line is
         cut to a stub and the "Scroll" label sits entirely behind the bar. That
         clipped stub is what reads as "bugged".
         There is nowhere to move it to — the hero's own content (title, subtitle,
         author, two CTAs) already runs to ~720px, leaving ~26px of clear space,
         so raising it above the bar would collide with the buttons instead.
         On a phone the sticky bar is the stronger affordance and scrolling is
         instinctive, so the hint simply isn't needed here. Desktop keeps it. */
      .hero-scroll-hint { display: none !important; }
      /* Clear the mobile sticky CTA bar. That bar is position:fixed;bottom:0 with
         z-index:9998 vs this button's 800, so anything it overlaps is simply
         covered. `bottom:80px` assumed a bar <=80px tall — measured, it is 98px
         (12px padding top+bottom around a two-line title/sub + the ORDER button),
         so the bar's top edge at y=746 was cutting 18px off this button's bottom
         edge at y=764: ~37% of a 48px control, hidden behind the bar.
         98px bar + 18px breathing room = 116px. */
      .back-to-top { bottom: 116px; right: 20px; }
      .movement-form { flex-direction: column; }
      .movement-form input { border-right: 1px solid rgba(247,240,227,0.15); }
      .social-cards { flex-direction: column; align-items: stretch; }
      .social-card { flex-direction: row; padding: 24px; gap: 20px; }
      .contact-form .form-row { grid-template-columns: 1fr; }
      .contact-form { padding: 28px; }
      .video-grid { grid-template-columns: 1fr; }
      .newsletter-inner { padding: 0 24px; max-width: 100%; }
      .pullquote-section { background-attachment: scroll; }
      .movement-section { background-attachment: scroll; }
      .newsletter-section { background-attachment: scroll; }
    }

@media (max-width: 480px) {
      .hero-title { font-size: 2.4rem; }
      .section-title { font-size: 1.9rem; }
      /* Keep the 3-up columns from the 768 block — this rule previously reset to
         `1fr` and, being the later/narrower query, would have re-stacked the
         footer on exactly the phone widths the side-by-side layout is for.
         Tighten the gutter and trim the link size so the labels still fit. */
      .footer-top { grid-template-columns: repeat(3, 1fr); gap: 28px 10px; }
      .footer-top .footer-links .elementor-button { font-size: 0.72rem !important; }
      .footer-top .footer-col-title { font-size: 0.6rem; letter-spacing: 0.14em; }
      .hero-content { padding: 0 20px 100px; }
      .books-featured { padding: 20px; }
    }


/* ===================== Elementor container flex bridge (2026-07-02) =====================
   Elementor renders every container as `.e-con.e-flex` (specificity 0,2,0) with
   flex-direction:column and its own align/justify defaults, overriding the mockup's
   single-class rules. Re-assert the mockup's intended horizontal layout at matching
   specificity (.e-con.<class> = 0,2,0, and loads after elementor-frontend). */
.e-con.hero { flex-direction: row; align-items: flex-end; }
.e-con.site-header { flex-direction: row; align-items: center; justify-content: space-between; }
.e-con.header-right { flex-direction: row; align-items: center; }
.e-con.section-label { flex-direction: row; align-items: center; }
.e-con.site-nav { flex-direction: row; align-items: center; }
.e-con.hero-eyebrow { flex-direction: row; align-items: center; }
.e-con.hero-ctas { flex-direction: row; }
/* MARQUEE — must stay ONE scrolling row at every breakpoint.
   Two Elementor container defaults broke it below the desktop breakpoint:
     1. `.e-con` flex-wrap becomes `wrap` at mobile, and
     2. `.e-con` children are width:100%.
   Together, each .marquee-item took the full 4143px track width and they wrapped
   into an 18-item vertical stack — the band rendered 684px tall instead of 66px
   (a big empty tobacco block, since the text scrolled out of view horizontally).
   Desktop was fine only because the items happened to size to content there.
   Same width:100% trap already documented for .e-con.social-card. */
.e-con.marquee-track { flex-direction: row; flex-wrap: nowrap !important; }
.e-con.marquee-item { width: auto !important; flex: 0 0 auto; }
.e-con.credential-item { flex-direction: row; align-items: center; }
.e-con.social-cards { flex-direction: row; }
.e-con.video-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.e-con.books-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.e-con.book-formats { flex-direction: row; }
.e-con.book-ctas { flex-direction: row; }
.e-con.movement-form { flex-direction: row; }
.e-con.endorsement-portrait-row { flex-direction: row; align-items: center; }
.e-con.events-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.e-con.footer-social { flex-direction: row; }
.e-con.footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
.e-con.footer-legal { flex-direction: row; align-items: center; }
.events-loop .event-item { flex-direction: row; }


/* --- Events Loop Grid refinements (2026-07-02): tame TEC widget output --- */
/* The TEC venue widget renders an empty Google map that bloats each card; hide it. */
.events-loop .tec-events-elementor-event-widget__venue-map { display: none !important; }
.events-loop .event-item {
  align-items: center;
  min-height: 0;
  padding: 22px 28px;
  background: var(--parchment);
  border: 1px solid rgba(184,137,42,0.08);
  gap: clamp(16px, 3vw, 40px);
}
/* Neutralize TEC widget default spacing so the row is compact. */
.events-loop .event-item .elementor-widget { margin: 0 !important; }
/* Elementor containers default to width:100%; in the flex row that starves the body
   to width:0 (the title then wraps 1 char/line → 700px+ tall cards). Force auto widths:
   date/RSVP shrink to content, body grows into the rest. */
.events-loop .event-item > * { width: auto !important; }
.events-loop .event-date { flex: 0 0 auto; min-width: 130px; }
.events-loop .event-body { flex: 1 1 auto; min-width: 0; }
.events-loop .event-body > * { width: auto !important; }
.events-loop .event-name, .events-loop .event-name .elementor-heading-title { width: auto !important; white-space: normal; }
.events-loop .tec-events-elementor-event-widget__title,
.events-loop .tec-events-elementor-event-widget__title a {
  font-family: var(--display-font); font-size: 1.2rem; font-weight: 600;
  color: var(--tobacco); text-decoration: none; margin: 0 0 4px;
}
.events-loop .tec-events-elementor-event-widget__venue {
  font-family: var(--body); font-size: 0.82rem; color: var(--tobacco-pale);
}
.events-loop .event-cta { flex: 0 0 auto; white-space: nowrap; }
/* Loop-grid items must be natural height (the grid otherwise stretches each item). */
.events-loop .elementor-loop-container { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.events-loop .e-loop-item { width: 100% !important; height: auto !important; min-height: 0 !important; align-self: auto !important; }
.events-loop .e-loop-item > .event-item { height: auto !important; min-height: 0 !important; width: 100%; }
.events-loop .tec-events-elementor-event-widget__datetime-wrapper { display: inline-flex; }
.events-loop .event-datetime { font-family: var(--display-font); font-size: 1.05rem; font-weight: 600; color: var(--gold); }


/* ===================== Elementor heading typography bridge (2026-07-02) =====================
   The mockup's text classes (.hero-title, .contact-channel-label, .event-name, etc.) sit on
   the Elementor heading WIDGET WRAPPER, but the visible text is an inner .elementor-heading-title
   that keeps the global h1–h6 size. Make the inner element inherit the wrapper's type so the
   mockup class controls size/weight/family/etc. as the design intends. */
/* !important so this wins over the kit's global typography rule that Loop-Grid
   (loop-item) documents re-emit INLINE after btcf.css at equal specificity —
   without it, every heading on a loop-grid page inherits the kit's huge size. */
.elementor-widget-heading .elementor-heading-title {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  font-style: inherit !important;
}


/* ===================== Elementor button bridge (2026-07-02) =====================
   Button widgets put the mockup class on the WRAPPER while the visible/clickable element is
   the inner <a>.elementor-button — causing a nested double-box. Neutralize the wrapper box
   and apply the mockup button look to the inner element (keeps the correct click target). */
.elementor-widget-button.btn-primary,
.elementor-widget-button.btn-secondary,
.elementor-widget-button.btn-book-primary,
.elementor-widget-button.btn-book-secondary,
.elementor-widget-button.event-cta,
.elementor-widget-button.excerpt-cta,
.elementor-widget-button.btn-card-link {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.elementor-widget-button.btn-primary::before,
.elementor-widget-button.btn-secondary::before { display: none !important; }

/* Button typography bridge: Loop-Grid documents (homepage + /events) re-emit the kit's
   global button rule INLINE after btcf.css at equal specificity — `.elementor-widget-button
   .elementor-button { font-family: <accent italic serif>; font-style: italic; background:
   accent }` — which leaks onto ALL buttons and turned the hero CTAs into italic serif.
   Force our button font/style with !important so the mockup .btn-* look is preserved. */
.elementor-widget-button .elementor-button {
  font-family: var(--body) !important;
  font-style: normal !important;
}
/* Shared inner reset */
.btn-primary .elementor-button, .btn-secondary .elementor-button,
.btn-book-primary .elementor-button, .btn-book-secondary .elementor-button {
  border-radius: 0; font-family: var(--body); text-transform: uppercase;
  text-decoration: none; transition: all 0.35s ease; display: inline-flex; align-items: center;
  font-size: 0.72rem !important; font-weight: 600 !important; line-height: 1 !important;
}
/* Primary (gold) */
.btn-primary .elementor-button {
  background: var(--gold) !important; color: var(--tobacco); padding: 16px 36px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  border: 2px solid var(--gold) !important; box-shadow: 0 4px 24px rgba(184,137,42,0.4);
}
.btn-primary .elementor-button:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
/* Secondary (outline, light) */
.btn-secondary .elementor-button {
  background: transparent !important; color: var(--parchment); padding: 16px 36px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em;
  border: 1px solid rgba(247,240,227,0.4) !important; backdrop-filter: blur(4px);
}
.btn-secondary .elementor-button:hover { border-color: var(--gold); color: var(--gold-pale); }
/* Book primary (tobacco) */
.btn-book-primary .elementor-button {
  background: var(--tobacco) !important; color: var(--parchment); padding: 14px 28px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; border: 2px solid var(--tobacco) !important;
}
.btn-book-primary .elementor-button:hover { background: var(--gold); border-color: var(--gold); color: var(--tobacco); }
/* Book secondary (outline) */
.btn-book-secondary .elementor-button {
  background: transparent !important; color: var(--tobacco); padding: 14px 28px;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; border: 1px solid var(--border-warm) !important;
}
.btn-book-secondary .elementor-button:hover { border-color: var(--gold); color: var(--gold); }

/* Text-link buttons (RSVP →, read-more): strip all button chrome → plain gold link */
.event-cta .elementor-button, .excerpt-cta .elementor-button, .btn-card-link .elementor-button {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; color: var(--gold) !important;
  font-family: var(--body) !important; font-weight: 600 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important; font-size: 0.66rem !important;
}
.event-cta .elementor-button:hover, .excerpt-cta .elementor-button:hover,
.btn-card-link .elementor-button:hover { color: var(--gold-bright) !important; background: transparent !important; }

/* Form submit buttons (Elementor Forms): match the PDF — contact dark, newsletter/movement gold */
.contact-form .elementor-button[type="submit"] {
  background: var(--tobacco) !important; color: var(--parchment) !important;
  border: 2px solid var(--tobacco) !important; border-radius: 0 !important;
  font-family: var(--body) !important; font-style: normal !important; font-weight: 700 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important; font-size: 0.72rem !important;
}
.contact-form .elementor-button[type="submit"]:hover {
  background: var(--gold) !important; border-color: var(--gold) !important; color: var(--tobacco) !important;
}
.newsletter-form .elementor-button[type="submit"], .movement-form .elementor-button[type="submit"] {
  background: var(--gold) !important; color: var(--tobacco) !important; border: none !important;
  border-radius: 0 !important; font-family: var(--body) !important; font-style: normal !important;
  font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important;
  /* font-size was MISSING here, so the kit's global button typography (20.8px)
     applied instead of the design's 0.72rem (see the original `.newsletter-form
     button` rule above, and `.btn-primary` — both 0.72rem). At 20.8px + 0.2em
     tracking + white-space:nowrap, "Subscribe to the Newsletter" measured 473px
     and was clipped inside its 332px column on mobile. Exactly the same kit
     typography leak already fixed for the footer links — !important because the
     kit re-emits button typography at equal specificity AFTER this file. */
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  /* belt and braces: if a label is ever long enough to still not fit, wrap it
     rather than clip it */
  white-space: normal !important;
}
.newsletter-form .elementor-button[type="submit"]:hover,
.movement-form .elementor-button[type="submit"]:hover { background: var(--gold-bright) !important; }


/* ===================== Scroll-reveal (JS-driven, fail-safe) (2026-07-02) =====================
   .btcf-reveal is added by animations.js at runtime, so if JS never runs nothing is hidden. */
.btcf-reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.btcf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btcf-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}


/* ===================== Social cards row fix (2026-07-02) =====================
   Elementor gives every .e-con width:100%, so flex children fill the row and wrap (stack).
   Let the social cards size to content so all four sit in one centered row. */
.e-con.social-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.e-con.social-card { width: auto; max-width: 300px; flex: 0 1 auto; }
/* Same guard for any inline card rows that must not stretch full-width */
.e-con.credential-item { width: auto; }


/* ===================== Movement presale form (email + button inline) (2026-07-02) ===================== */
.movement-form .elementor-form-fields-wrapper { display: flex; flex-wrap: nowrap; gap: 0; margin: 0 auto; max-width: 520px; align-items: stretch; }
.movement-form .elementor-field-group { margin: 0; padding: 0; flex: 1 1 auto; }
.movement-form .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; }
.movement-form .elementor-field-group > .elementor-field { width: 100%; height: 100%; }
.movement-form input[type="email"] { flex: 1; padding: 18px 24px; font-family: var(--body); font-size: .88rem;
  background: rgba(247,240,227,0.08); border: 1px solid rgba(247,240,227,0.15); border-right: none; color: var(--parchment); }
.movement-form input[type="email"]::placeholder { color: rgba(247,240,227,0.4); }
.movement-form .elementor-button[type="submit"] { padding: 18px 32px; white-space: nowrap; height: 100%; }


/* Movement form refinements: translucent input + single-line button */
.movement-form input[type="email"],
.movement-form .elementor-field-textual {
  background: rgba(247,240,227,0.10) !important;
  border: 1px solid rgba(247,240,227,0.20) !important;
  border-right: none !important;
  color: var(--parchment) !important;
}
.movement-form input[type="email"]::placeholder { color: rgba(247,240,227,0.45) !important; }
.movement-form .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; min-width: 220px; }
.movement-form .elementor-button[type="submit"] { white-space: nowrap !important; letter-spacing: 0.14em !important; width: 100%; }


/* Newsletter form: translucent inputs on dark bg (match design) */
.newsletter-form input, .newsletter-form .elementor-field-textual {
  background: rgba(247,240,227,0.08) !important;
  border: 1px solid rgba(247,240,227,0.15) !important;
  color: var(--parchment) !important;
}
.newsletter-form input::placeholder { color: rgba(247,240,227,0.4) !important; }


/* ===================== Header nav + hero eyebrow fixes (2026-07-02) ===================== */
/* Nav: 36px gap between items (mockup .site-nav gap:36px); the nav-menu <ul> is the flex row. */
/* NOTE: do NOT force display:flex here — Elementor sets flex on the horizontal menu on
   desktop and display:none on ≤tablet (dropdown collapse). Forcing flex broke the tablet/
   mobile burger collapse (menu stayed visible, squishing the logo). Only style the flex. */
.site-nav .elementor-nav-menu { align-items: center; gap: 36px; }
.site-nav .elementor-nav-menu > li { margin: 0; }
.site-nav .elementor-nav-menu > li > a.elementor-item,
.site-nav a.elementor-item { padding: 0 !important; margin: 0 !important; }

/* Hero eyebrow: the divider "line" must be a fixed 40px, not full-width, and the text must not wrap. */
.e-con.hero-eyebrow { gap: 14px; justify-content: flex-start; }
.hero-eyebrow-line { width: 40px !important; max-width: 40px; flex: 0 0 40px; }
.hero-eyebrow-line .elementor-divider { padding-block: 0 !important; }
.hero-eyebrow-line .elementor-divider-separator {
  width: 40px; border-top: 1px solid var(--gold); margin: 0;
}
.hero-eyebrow-text { flex: 0 1 auto; }
.hero-eyebrow-text .elementor-heading-title { white-space: nowrap; }


/* Header nav — single line, even spacing, NO shrink (2026-07-03).
   flex:0 0 auto is critical: without it the nav box shrinks below its content
   and the last items (CONTACT) overflow UNDER the Order Now button. */
.site-header .header-right { flex-wrap: nowrap; gap: 24px; }
.site-nav { flex: 0 0 auto; max-width: none; margin: 0 10px 0 0; }
.site-nav .elementor-nav-menu { flex-wrap: nowrap !important; gap: 26px; }
.site-nav .elementor-nav-menu > li { white-space: nowrap; flex: 0 0 auto; }
.site-nav .elementor-nav-menu > li > a.elementor-item { white-space: nowrap; }
/* header-right must never shrink either, so the cart is never clipped at the edge */
.site-header .header-right > * { flex: 0 0 auto; }
.site-header .header-cart { flex: 0 0 auto; }

/* CENTERED NAV (desktop ≥1025px): absolutely-center the nav-menu in the header so the
   layout reads Logo (left) · Nav (center) · Order Now + Cart (right). The nav is a child
   of header-right in the DOM but is taken out of flow here (relative to the fixed
   .site-header), so header-right collapses to just the CTA + cart on the right, pushed
   right by justify-content:space-between. On ≤1024 the nav returns to normal flow inside
   header-right and the nav-menu widget's own burger + cart sit on the right (mobile). */
/* Desktop (≥1025px): 3-column grid → Logo (left) · Nav (center) · Order Now + Cart (right).
   The nav is a direct grid child (moved out of header-right in the DOM). 1fr/auto/1fr keeps
   the nav perfectly centered regardless of the logo / actions widths. */
@media (min-width: 1025px) {
  .site-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
  }
  .site-header > .logo-wrap  { justify-self: start;  grid-column: 1; }
  .site-header > .site-nav   { justify-self: center; grid-column: 2; position: static; margin: 0; }
  .site-header > .header-right{ justify-self: end;   grid-column: 3; margin: 0; }
}
/* Mobile (≤1024): flex row → logo left, then the nav-menu burger + cart on the right.
   The nav-menu widget (dropdown-tablet) hides its horizontal menu and shows a burger at
   ≤1024; keep the widget VISIBLE so that burger shows (overrides the old ≤768
   `.site-nav{display:none}` which hid it and left the header with no menu). */
@media (max-width: 1024px) {
  /* Elementor containers default to flex-wrap:wrap → the header wrapped and the burger
     dropped to a 2nd line. Force one line: logo (left) · burger + cart (right). */
  .site-header { flex-wrap: nowrap !important; column-gap: 12px; }
  /* logo grows to fill, pushing burger + cart to the right; it may shrink (min-width:0)
     but the reduced font-size below keeps it on one line. */
  .site-header > .logo-wrap { flex: 1 1 auto; min-width: 0; margin: 0; }
  .site-header .logo-main, .site-header .logo-sub { white-space: nowrap; }
  /* Elementor containers/widgets default to width:100%; with flex:0 0 auto they stay
     ~full width and shove the cart off-screen. Force width:auto so they shrink to content. */
  .site-header > .site-nav { display: flex !important; flex: 0 0 auto; width: auto !important; margin: 0; align-items: center; order: 2; }
  .site-header > .header-right { flex: 0 0 auto; width: auto !important; order: 3; }
  /* collapse to burger: hide the horizontal menu (our custom rules had forced it visible)
     and show the toggle. The dropdown panel stays JS-controlled.

     Target the --main NAV CONTAINER only. Elementor puts the --main/--dropdown
     modifier on the <nav> wrapper, while BOTH <ul>s carry the bare
     `elementor-nav-menu` class and nothing else. The previous guard here —
     `.elementor-nav-menu:not(.elementor-nav-menu--dropdown)` — read as "any menu
     that isn't the dropdown", but since the <ul> never carries that modifier it
     matched the DROPDOWN's OWN <ul> and display:none'd it. That is the second
     half of the broken burger: the panel measured 390x0 even after its width was
     fixed. Hiding the --main container hides its <ul> as a descendant anyway, so
     the extra selector bought nothing and cost the whole mobile menu. */
  .site-header > .site-nav .elementor-nav-menu--main { display: none !important; }
  /* The dropdown's <ul> is a plain .elementor-nav-menu, so the base header rules
     for the horizontal row (gap:26px, flex-wrap:nowrap) still reach it. Reset to
     a stacked list. */
  .site-header > .site-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: block !important;
    gap: 0 !important;
  }
  /* Show + STYLE the burger. Elementor's default is a dark icon on a translucent grey
     box → invisible on our dark header. Make it a clean parchment icon, no box. */
  .site-header .elementor-menu-toggle {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px !important;
    color: var(--parchment) !important;
    --nav-menu-icon-color: var(--parchment);
  }
  .site-header .elementor-menu-toggle i,
  .site-header .elementor-menu-toggle svg,
  .site-header .elementor-menu-toggle .e-font-icon-svg { color: var(--parchment) !important; fill: var(--parchment) !important; }
  /* Scrolled (solid light) header → dark burger for contrast. */
  .site-header.scrolled .elementor-menu-toggle,
  .site-header.scrolled .elementor-menu-toggle i,
  .site-header.scrolled .elementor-menu-toggle svg,
  .site-header.scrolled .elementor-menu-toggle .e-font-icon-svg { color: var(--tobacco) !important; fill: var(--tobacco) !important; }
  .site-header > .header-right { flex: 0 0 auto; }

  /* ---- Dropdown panel GEOMETRY (fixes the burger opening to nothing) ----
     The panel is a static flex ITEM of .site-nav, and .site-nav is forced
     `width:auto !important` just above so it shrinks to the burger (~34px).
     The panel inherited that 34px and then flex-shrank to 0x0. The burger was
     never broken: tapping it set aria-expanded=true, added .elementor-active
     and lifted max-height 0px -> 8440px — the panel simply had no size to show.
     (Verified via CDP: JS fires correctly, panel measured 0x0.)

     Fix: take the panel out of flow and anchor it to .site-header. .site-header
     is position:fixed, so making .site-nav static hands the containing block to
     the header — top:100% then sits it directly under the 80px bar, and
     left/right:0 spans the full header width regardless of the 34px nav. */
  .site-header > .site-nav { position: static; }
  .site-header > .site-nav .elementor-nav-menu--dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto !important;
    z-index: 9998;
  }
  /* Dropdown ITEMS: the base header rules zero the padding for the tight
     horizontal desktop row (`.site-nav a.elementor-item{padding:0!important}`,
     ~L3619) and that !important reaches the dropdown as well — items rendered
     ~12px tall and flush to the screen edge. Restore real, tappable rows:
     15px top/bottom + a ~14px line ≈ a 44px target, which is the minimum
     comfortable touch size. font-style is pinned because the header nav's own
     `a` styling leaves the dropdown inheriting an oblique face. */
  .site-header > .site-nav .elementor-nav-menu--dropdown a.elementor-item {
    padding: 15px 24px !important;
    margin: 0 !important;
    font-style: normal !important;
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(247, 240, 227, 0.09);
  }
  .site-header > .site-nav .elementor-nav-menu--dropdown li:last-child a.elementor-item {
    border-bottom: none;
  }
  /* Dropdown panel (opens on tap): match the design instead of Elementor defaults. */
  .site-header .elementor-nav-menu--dropdown { background: var(--tobacco) !important; border: none !important; }
  .site-header .elementor-nav-menu--dropdown a { color: var(--parchment) !important; font-family: var(--body); letter-spacing: 0.06em; }
  .site-header .elementor-nav-menu--dropdown a:hover { color: var(--gold-pale) !important; background: rgba(184,137,42,0.12) !important; }
}
/* Narrower desktops (1025–1700px): tighten padding + gaps so the full nav + Order Now
   + cart still fit on one line without clipping the cart. (Placed AFTER the base nav
   rules so it wins inside the query; the 1024/768 mobile blocks below still override.) */
@media (max-width: 1700px) {
  .site-header { padding: 0 40px; }
  .site-header .header-right { gap: 20px; }
  .site-nav { margin-right: 4px; }
  .site-nav .elementor-nav-menu { gap: 22px; }
}
@media (max-width: 1300px) {
  .site-header { padding: 0 28px; }
  .site-header .header-right { gap: 16px; }
  .site-nav .elementor-nav-menu { gap: 18px; }
  .nav-cta { padding: 9px 18px; }
}


/* ===================== Header CTA + cart coherence (2026-07-02) ===================== */
/* "Order Now" button: upright (not italic) + single line */
.site-header .nav-cta .elementor-button {
  font-style: normal !important;
  white-space: nowrap !important;
  font-family: var(--body) !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}
/* Cart: subtle icon that fits the design (no boxed $0.00) */
.site-header .header-cart .elementor-menu-cart__toggle .elementor-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  min-width: 0 !important;
}
.site-header .header-cart .elementor-menu-cart__toggle .elementor-button-text { display: none !important; }
.site-header .header-cart .elementor-button-icon svg,
.site-header .header-cart .elementor-button-icon i,
.site-header .header-cart .elementor-button-icon {
  color: rgba(247,240,227,0.9) !important;
  fill: rgba(247,240,227,0.9) !important;
  font-size: 19px !important;
}
.site-header .header-cart .elementor-button-icon [class*="count"],
.site-header .header-cart .elementor-button-icon > span:not(:empty) {
  background: var(--gold) !important; color: var(--tobacco) !important;
}
/* Solid (scrolled) header → tobacco icon */
.site-header.scrolled .header-cart .elementor-button-icon svg,
.site-header.scrolled .header-cart .elementor-button-icon i,
.site-header.scrolled .header-cart .elementor-button-icon { color: var(--tobacco) !important; fill: var(--tobacco) !important; }


/* Order Now: remove the wrapper's duplicate box (double-box bug) — inner button only */
.elementor-widget-button.nav-cta,
.site-header .nav-cta.elementor-widget-button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.elementor-widget-button.nav-cta::before,
.elementor-widget-button.nav-cta::after { display: none !important; }
.site-header .nav-cta .elementor-button { box-shadow: 0 2px 12px rgba(44,31,14,0.3) !important; }


/* ===================== Mobile header (2026-07-02) ===================== */
@media (max-width: 1024px) {
  /* Order Now is redundant + cramped on mobile → hide (design = logo + hamburger [+ cart]) */
  .site-header .nav-cta { display: none !important; }
  .site-header .header-right { justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: nowrap; }
  .site-header { padding: 0 20px; }
  /* keep the hamburger + cart on the right, comfortably tappable */
  .site-header .header-cart { order: 2; }
  .site-header .site-nav { order: 3; }
  .site-header .header-cart .elementor-button-icon svg,
  .site-header .header-cart .elementor-button-icon i { font-size: 22px !important; }
}


/* Play-button triangle — native .play-btn containers are empty; render the ▶ icon (2026-07-02) */
.play-btn-large::after, .play-btn-sm::after {
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-color: transparent transparent transparent rgba(247,240,227,0.92);
}
.play-btn-large::after { border-width: 11px 0 11px 18px; margin-left: 5px; }
.play-btn-sm::after { border-width: 7px 0 7px 12px; margin-left: 3px; }
/* if a native SVG icon is ever added inside, hide the pseudo-triangle to avoid doubling */
.play-btn-large:has(svg)::after, .play-btn-sm:has(svg)::after { display: none; }
.play-btn-large svg, .play-btn-sm svg { fill: rgba(247,240,227,0.92); width: 40%; height: 40%; }


/* Movement "Reserve Signed Copy" button — force single line (2026-07-02) */
.movement-form .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; min-width: 0; }
.movement-form .elementor-button[type="submit"] {
  white-space: nowrap !important;
  letter-spacing: 0.12em !important;
  padding: 18px 28px !important;
  font-size: 0.66rem !important;
  width: auto !important;
  line-height: 1.1 !important;
}
.movement-form .elementor-button[type="submit"] .elementor-button-content-wrapper,
.movement-form .elementor-button[type="submit"] .elementor-button-text {
  white-space: nowrap !important;
  display: inline !important;
}
/* keep the whole form compact + centered like the reference */
.movement-form .elementor-form-fields-wrapper { max-width: 560px; }


/* Endorsements label — centered "— Endorsements —" (2026-07-02) */
.endorsements-header .section-label {
  justify-content: center !important;
  align-items: center;
  gap: 14px;
}
.endorsements-header .section-label-line {
  width: 32px !important; max-width: 32px; flex: 0 0 32px;
}
.endorsements-header .section-label-line .elementor-divider { padding-block: 0 !important; }
.endorsements-header .section-label-line .elementor-divider-separator {
  width: 32px; border-top: 1px solid var(--gold); margin: 0;
}
.endorsements-header .section-label-text .elementor-heading-title { white-space: nowrap; }


/* Newsletter subscribe button — single line */
.newsletter-form .elementor-button[type="submit"],
.newsletter-form .elementor-button[type="submit"] .elementor-button-content-wrapper,
.newsletter-form .elementor-button[type="submit"] .elementor-button-text {
  white-space: nowrap !important;
}
.newsletter-form .elementor-button[type="submit"] { letter-spacing: 0.18em !important; }


/* ===================== QA batch 1 (2026-07-02): section-label eyebrows, marquee dots, movement input ===================== */
/* Section-label eyebrows: short "— LABEL" inline (not a full-width rule with vertically-stacked text) */
.section-label { align-items: center; gap: 12px; }
.section-label-line { width: 40px !important; max-width: 40px !important; min-width: 40px; flex: 0 0 40px !important; }
.section-label-line .elementor-divider { padding-block: 0 !important; }
.section-label-line .elementor-divider-separator { width: 40px; border-top: 1px solid var(--gold); margin: 0; }
.section-label-text, .section-label-text .elementor-heading-title { white-space: nowrap !important; }

/* Marquee separator dots: small 4px gold dots (were oversized) */
.marquee-dot {
  width: 4px !important; height: 4px !important;
  min-width: 4px !important; max-width: 4px !important; min-height: 4px !important; max-height: 4px !important;
  background: var(--gold) !important; border-radius: 50% !important; padding: 0 !important; flex: 0 0 4px !important;
}

/* Movement email input: widen so "Enter your email address" isn't clipped */
.movement-form .elementor-field-group:not(.elementor-field-type-submit) { flex: 1 1 auto; }
.movement-form .elementor-form-fields-wrapper { max-width: 620px; }
.movement-form input[type="email"] { width: 100% !important; min-width: 280px; }


/* Marquee: enforce a consistent leading dot on every item (reference has a dot inside each item;
   one native item was missing its dot). Use ::before and hide the inline dot elements. */
.marquee-band .marquee-item::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  flex: 0 0 4px;
}
.marquee-band .marquee-dot { display: none !important; }


/* ===================== QA batch 2 (2026-07-02): eyebrow lines, marquee ===================== */
/* Eyebrow accent lines were DOUBLED (gold wrapper bg + black Elementor divider border) and the
   divider drew black. Make each a single clean 40px gold line. */
.section-label-line, .hero-eyebrow-line {
  background: transparent !important;
  padding: 0 !important; height: auto !important;
}
.section-label-line { width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; }
.hero-eyebrow-line { width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; }
.section-label-line .elementor-divider, .hero-eyebrow-line .elementor-divider { padding: 0 !important; }
.section-label-line .elementor-divider-separator,
.hero-eyebrow-line .elementor-divider-separator {
  border-top: 1px solid var(--gold) !important;
  width: 40px !important; margin: 0 !important; background: transparent !important;
}

/* Marquee: dot sits close to its own label (single leading separator, tight spacing) */
.marquee-band .marquee-item { gap: 12px !important; padding: 0 22px !important; }
.marquee-band .marquee-item::before { margin: 0 !important; }


/* ===================== QA batch 3 (2026-07-02): marquee spacing + remaining gold lines ===================== */
/* Marquee: drop the ::before hack, use the real dot as a tight leading separator, space items clearly */
.marquee-band .marquee-item::before { content: none !important; display: none !important; }
.marquee-band .marquee-dot {
  display: inline-block !important;
  width: 4px !important; height: 4px !important; min-width: 4px !important;
  background: var(--gold) !important; border-radius: 50% !important;
  flex: 0 0 4px !important; margin: 0 !important;
}
.marquee-band .marquee-dot > * { display: none !important; }
.marquee-band .marquee-item { gap: 10px !important; padding: 0 !important; margin: 0 28px !important; }

/* Remaining accent dividers → gold, single line (hero rule, gold rule under section headings) */
.hero-rule, .gold-rule { background: transparent !important; }
.hero-rule .elementor-divider-separator, .gold-rule .elementor-divider-separator {
  border-top-color: var(--gold) !important; background: transparent !important;
}


/* Marquee item: dot beside text (was column-stacked by Elementor default) */
.marquee-band .marquee-item, .e-con.marquee-item {
  flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important;
}


/* ===================== QA batch 4 (2026-07-02): hero-rule + header line ===================== */
/* Hero rule under the title: short 60px gold-gradient line (was rendering ~600px) */
.hero-rule {
  width: 60px !important; max-width: 60px !important; min-width: 60px;
  height: 1px !important; min-height: 1px; max-height: 1px;
  background: linear-gradient(to right, var(--gold), transparent) !important;
  flex: 0 0 auto !important; overflow: hidden;
}
.hero-rule .elementor-widget-container, .hero-rule .elementor-divider { display: none !important; }

/* Scrolled header: drop the gold border + gold box-shadow line (not in the reference); keep a subtle dark shadow */
.site-header.scrolled {
  border-bottom-color: transparent !important;
  box-shadow: 0 4px 24px rgba(44,31,14,0.07) !important;
}


/* Scroll indicator line: 1px vertical gold gradient (was rendering as a full-width bar) */
.scroll-line {
  width: 1px !important; max-width: 1px !important; min-width: 1px !important;
  height: 48px !important; min-height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent) !important;
  margin: 0 auto !important; flex: 0 0 auto !important;
}
.scroll-line .elementor-widget-container, .scroll-line .elementor-divider { display: none !important; }


/* ===================== QA batch 5 (2026-07-02): constrain remaining accent rules to mockup widths ===================== */
.gold-rule {
  width: 48px !important; max-width: 48px !important; min-width: 48px !important;
  height: 2px !important; min-height: 2px; max-height: 2px;
  background: linear-gradient(to right, var(--gold), var(--gold-pale), transparent) !important;
  flex: 0 0 auto !important; overflow: hidden;
}
.pullquote-rule {
  width: 48px !important; max-width: 48px !important; min-width: 48px !important;
  height: 1px !important; min-height: 1px; max-height: 1px;
  background: var(--gold) !important; margin: 0 auto 20px !important; flex: 0 0 auto !important; overflow: hidden;
}
.endorsement-rule {
  width: 32px !important; max-width: 32px !important; min-width: 32px !important;
  height: 1px !important; min-height: 1px; max-height: 1px;
  background: var(--gold) !important; flex: 0 0 auto !important; overflow: hidden;
}
.gold-rule .elementor-widget-container, .gold-rule .elementor-divider,
.pullquote-rule .elementor-widget-container, .pullquote-rule .elementor-divider,
.endorsement-rule .elementor-widget-container, .endorsement-rule .elementor-divider { display: none !important; }


/* @@BTCF-PAGES-MODULE@@ */
/* ==========================================================================
   BTCF — INTERIOR PAGES design system
   --------------------------------------------------------------------------
   Styles the reusable interior-page components emitted by btcf_gen.py so that
   About / Contact / Speaking / Book / Legal / Shop / Cart / Checkout / Account
   / 404 / Search / Events inherit the EXACT homepage design language.

   Uses the same :root tokens defined in the global module. Loaded (concatenated
   into btcf.css) AFTER elementor-frontend, so `.e-con.<class>` bridges (0,2,0)
   win over Elementor's default flex-column containers — same technique as the
   homepage.  NO inline CSS anywhere; everything is class-keyed and editable.
   ========================================================================== */

/* ---- generic interior section frame ---------------------------------- */
.page-section { padding: 120px 0; position: relative; }
.page-section.tight { padding: 90px 0; }
.page-section.alt   { background: var(--cream); }
.page-section.deep  { background: var(--parchment); }
.page-wrap {
      max-width: 1400px; width: 100%;
      margin: 0 auto; padding: 0 80px;
}
.page-wrap.narrow { max-width: 900px; }
.page-wrap.readable { max-width: 820px; }
.e-con.page-wrap { align-items: stretch; }
.page-section-head { text-align: center; margin-bottom: 56px; }
.e-con.page-section-head { align-items: center; }
.page-section-head .section-label { justify-content: center; }

/* ==========================================================================
   PAGE HERO  (interior banner — mirrors the homepage hero language)
   ========================================================================== */
.page-hero {
      position: relative;
      min-height: clamp(360px, 46vh, 540px);
      /* clear the 80px fixed header so the eyebrow/title never sit under it */
      padding-top: 80px;
      box-sizing: border-box;
      overflow: hidden;
      background: var(--tobacco);
      isolation: isolate;
}
.e-con.page-hero { flex-direction: column; align-items: center; justify-content: center; }
.page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      transform: scale(1.04);
      filter: saturate(0.92);
}
.page-hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(120% 120% at 50% 20%, rgba(44,31,14,0.35), rgba(20,15,7,0.86)),
        linear-gradient(180deg, rgba(20,15,7,0.55), rgba(20,15,7,0.80));
}
.page-hero-content {
      position: relative; z-index: 2;
      max-width: 960px;
      padding: 80px 40px;
      text-align: center;
}
.e-con.page-hero-content { align-items: center; justify-content: center; text-align: center; }
.page-hero .hero-eyebrow, .e-con.page-hero-eyebrow { justify-content: center; }
.page-hero-title {
      font-family: var(--display-font);
      font-size: clamp(2.6rem, 6vw, 5rem);
      font-weight: 600;
      line-height: 1.02;
      letter-spacing: -0.01em;
      color: var(--parchment);
      margin-bottom: 18px;
}
.page-hero-title em { font-style: italic; font-weight: 300; color: var(--gold-pale); }
.page-hero .hero-rule { margin: 0 auto 20px; }
.page-hero-subtitle {
      font-family: var(--body);
      font-size: 0.8rem; font-weight: 400;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(247,240,227,0.7);
      max-width: 620px;
}
.page-hero .hero-author {
      color: var(--gold-pale);
      margin-top: 14px;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb-bar {
      background: var(--cream);
      border-bottom: 1px solid var(--border-warm);
      padding: 18px 0;
}
.e-con.breadcrumb-bar { align-items: center; }
.breadcrumb-inner {
      max-width: 1400px; width: 100%;
      margin: 0 auto; padding: 0 80px;
}
.e-con.breadcrumb-inner { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.e-con.crumb { flex-direction: row; align-items: center; width: auto; }
.crumb-link, .crumb-current, .crumb-sep { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.crumb-link { color: var(--tobacco-pale); transition: color .3s ease; cursor: pointer; }
.crumb:hover .crumb-link { color: var(--gold); }
.crumb-sep { color: var(--border-gold); }
.crumb-current { color: var(--gold); font-weight: 600; }

/* ==========================================================================
   SPLIT GRID  (media + text, e.g. biography / showcase rows)
   ========================================================================== */
.e-con.split-grid { flex-direction: row; align-items: center; gap: 70px; }
.split-grid.reverse { flex-direction: row-reverse; }
.e-con.split-media { flex: 1 1 44%; }
.e-con.split-body  { flex: 1 1 52%; align-items: flex-start; }
.split-media .elementor-image img, .split-media img {
      width: 100%; border-radius: 4px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border-warm);
}
.split-body .section-title { margin-top: 8px; }

/* ==========================================================================
   FEATURE / TOPIC / VALUE CARDS
   ========================================================================== */
.e-con.feature-grid { flex-direction: row; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: stretch; }
.e-con.feature-card {
      flex: 1 1 300px; max-width: 380px; width: auto;
      align-items: flex-start;
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 6px;
      padding: 44px 36px;
      box-shadow: var(--shadow-sm);
      transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--border-gold); }
.feature-icon {
      width: 62px; height: 62px; margin-bottom: 24px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--gold-muted);
      color: var(--gold);
}
.feature-icon .elementor-icon, .feature-icon i, .feature-icon svg { color: var(--gold); fill: var(--gold); font-size: 24px; width: 24px; height: 24px; }
.feature-card-title { font-family: var(--display-font); font-size: 1.55rem; font-weight: 600; color: var(--tobacco); margin-bottom: 12px; line-height: 1.2; }
.feature-card-body  { font-family: var(--body); font-size: 0.98rem; line-height: 1.75; color: var(--tobacco-light); }

/* ==========================================================================
   STAT ROW  (achievements / credibility numbers)
   ========================================================================== */
.e-con.stat-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 64px; }
.e-con.stat { width: auto; align-items: center; text-align: center; }
.stat-num { font-family: var(--display-font); font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 600; color: var(--gold); line-height: 1; }
.stat-label { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tobacco-pale); margin-top: 12px; }

/* ==========================================================================
   TIMELINE  (career / journey)
   ========================================================================== */
.timeline { position: relative; max-width: 860px; margin: 0 auto; }
.timeline::before { content:''; position:absolute; left: 118px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--gold), var(--border-gold)); }
.e-con.timeline-item { flex-direction: row; align-items: flex-start; gap: 40px; padding: 22px 0; position: relative; }
.timeline-year { flex: 0 0 96px; font-family: var(--display-font); font-size: 1.5rem; font-weight: 600; color: var(--gold); text-align: right; }
.e-con.timeline-body { flex: 1 1 auto; align-items: flex-start; position: relative; padding-left: 30px; }
.timeline-body::before { content:''; position:absolute; left: -6px; top: 9px; width: 11px; height: 11px; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-muted); }
.timeline-title { font-family: var(--display-font); font-size: 1.35rem; font-weight: 600; color: var(--tobacco); margin-bottom: 6px; }
.timeline-text  { font-family: var(--body); font-size: 0.95rem; line-height: 1.7; color: var(--tobacco-light); }

/* ==========================================================================
   FAQ  (native Elementor accordion)
   ========================================================================== */
.faq-section { padding: 120px 0; background: var(--cream); }
.e-con.faq-inner { align-items: center; }
.faq-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; }
.faq-header { text-align: center; margin-bottom: 50px; }
.e-con.faq-header { align-items: center; }
.faq-header .section-label { justify-content: center; }
.faq-body { width: 100%; }

.btcf-accordion .elementor-accordion { border: none; }
.btcf-accordion .elementor-accordion-item { border: none; border-bottom: 1px solid var(--border-warm); background: transparent; }
.btcf-accordion .elementor-tab-title {
      background: transparent !important; border: none !important;
      padding: 26px 8px; cursor: pointer;
      font-family: var(--display-font); font-size: 1.3rem; font-weight: 600; color: var(--tobacco);
      transition: color .3s ease;
}
/* TYPOGRAPHY BRIDGE — without this, the 1.3rem above does nothing.
   The rule above styles the tab-title WRAPPER <div>, but the question text is an
   inner "a.elementor-accordion-title", and the Elementor kit sizes THAT element
   directly: selector ".elementor-widget-accordion .elementor-accordion-title"
   sets font-size to var(--e-global-typography-primary-font-size) = 2.6rem =
   41.6px. So every FAQ question rendered at 41.6px — larger than the section
   title above it — on all three accordion pages (Contact #273, The Book #275,
   Single Product #269).
   Bridging the inner element to `inherit` lets the wrapper's 1.3rem apply -> 20.8px.
   Same wrapper-vs-inner trap the .elementor-heading-title bridge fixes; the
   accordion was simply never bridged.
   SPECIFICITY: `.btcf-accordion` sits on the widget element itself, so chaining it
   to .elementor-widget-accordion gives 0,3,0 and beats the kit's 0,2,0 outright.
   A bare `.btcf-accordion .elementor-accordion-title` would only be 0,2,0 — a tie
   decided by stylesheet load order, which is not worth relying on. */
.elementor-widget-accordion.btcf-accordion .elementor-accordion-title { font-size: inherit; }
.btcf-accordion .elementor-tab-title:hover,
.btcf-accordion .elementor-tab-title.elementor-active { color: var(--gold); }
.btcf-accordion .elementor-tab-title .elementor-accordion-icon { color: var(--gold); }
.btcf-accordion .elementor-tab-content {
      background: transparent !important; border: none !important;
      padding: 0 8px 26px;
      font-family: var(--body); font-size: 1rem; line-height: 1.85; color: var(--tobacco-light);
}

/* ==========================================================================
   ICON LIST  (native)
   ========================================================================== */
.btcf-icon-list .elementor-icon-list-item { align-items: flex-start; }
.btcf-icon-list .elementor-icon-list-icon { color: var(--gold); padding-top: 4px; }
.btcf-icon-list .elementor-icon-list-icon i, .btcf-icon-list .elementor-icon-list-icon svg { color: var(--gold); fill: var(--gold); }
.btcf-icon-list .elementor-icon-list-text { font-family: var(--body); font-size: 1rem; line-height: 1.7; color: var(--tobacco-light); }

/* ==========================================================================
   CTA BAND  (reusable premium dark call-to-action)
   ========================================================================== */
.cta-band { padding: 120px 0; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--tobacco), var(--tobacco-mid)); }
.cta-band::before { content:''; position:absolute; inset:0; background: radial-gradient(90% 140% at 50% 0%, var(--gold-glow), transparent 60%); opacity: .5; pointer-events:none; }
.e-con.cta-band { align-items: center; }
.cta-band-inner { max-width: 820px; margin: 0 auto; padding: 0 40px; text-align: center; position: relative; z-index: 1; }
.e-con.cta-band-inner { align-items: center; }
.cta-band-eyebrow { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: 18px; }
.cta-band-title { font-family: var(--display-font); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 600; line-height: 1.1; color: var(--parchment); margin-bottom: 20px; }
.cta-band-title em { font-style: italic; font-weight: 300; color: var(--gold-pale); }
.cta-band-body { font-family: var(--body); font-size: 1.05rem; line-height: 1.8; color: rgba(247,240,227,0.72); max-width: 640px; margin: 0 auto 36px; }
.e-con.cta-band-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ==========================================================================
   PRICING / PURCHASE OPTIONS
   ========================================================================== */
.e-con.pricing-grid { flex-direction: row; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: stretch; }
.e-con.pricing-card {
      flex: 1 1 260px; max-width: 320px; width: auto; align-items: center; text-align: center;
      background: var(--ivory); border: 1px solid var(--border-warm); border-radius: 6px;
      padding: 44px 32px; box-shadow: var(--shadow-sm);
      transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.pricing-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--border-gold); }
.pricing-card.featured { border-color: var(--gold); box-shadow: var(--shadow-md); }
.pricing-tag { font-family: var(--body); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.pricing-name { font-family: var(--display-font); font-size: 1.6rem; font-weight: 600; color: var(--tobacco); margin-bottom: 8px; }
.pricing-price { font-family: var(--display-font); font-size: 2.6rem; font-weight: 600; color: var(--gold); margin-bottom: 6px; }
.pricing-note { font-family: var(--body); font-size: 0.9rem; color: var(--tobacco-pale); margin-bottom: 24px; }

/* ==========================================================================
   TRUST BADGES / SHIPPING STRIP
   ========================================================================== */
.e-con.trust-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 48px; }
.e-con.trust-badge { width: auto; align-items: center; text-align: center; max-width: 240px; }
.trust-badge .feature-icon { margin-bottom: 16px; }
.trust-badge-title { font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tobacco); font-weight: 600; margin-bottom: 6px; }
.trust-badge-text { font-family: var(--body); font-size: 0.9rem; line-height: 1.6; color: var(--tobacco-pale); }

/* ==========================================================================
   LEGAL / LONG-FORM readable content
   ========================================================================== */
.legal-layout { }
.e-con.legal-layout { flex-direction: row; align-items: flex-start; gap: 60px; }
.e-con.legal-toc { flex: 0 0 260px; align-items: flex-start; position: sticky; top: 110px; }
.legal-toc-title { font-family: var(--body); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.e-con.legal-main { flex: 1 1 auto; align-items: flex-start; }
.legal-updated { font-family: var(--body); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--tobacco-pale); margin-bottom: 28px; font-style: italic; }
.legal-body { font-family: var(--literary); font-size: 1.08rem; line-height: 1.9; color: var(--tobacco-mid); }
.legal-body h2 { font-family: var(--display-font); font-size: 1.9rem; font-weight: 600; color: var(--tobacco); margin: 44px 0 16px; }
.legal-body h3 { font-family: var(--display-font); font-size: 1.4rem; font-weight: 600; color: var(--tobacco); margin: 30px 0 12px; }
.legal-body p { margin-bottom: 18px; }
.legal-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-body ul, .legal-body ol { margin: 0 0 20px 22px; }
.legal-body li { margin-bottom: 10px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.e-con.contact-grid { flex-direction: row; align-items: flex-start; gap: 64px; }
.e-con.contact-detail-col { flex: 1 1 40%; align-items: flex-start; }
.e-con.contact-form-col { flex: 1 1 56%; align-items: stretch; }
.contact-map-frame { border-radius: 6px; overflow: hidden; border: 1px solid var(--border-warm); box-shadow: var(--shadow-sm); }
.contact-map-frame iframe { display: block; width: 100%; min-height: 320px; border: 0; filter: sepia(0.12) saturate(0.9); }

/* ==========================================================================
   WOOCOMMERCE interior refinements (Shop / Product / Cart / Checkout / Account)
   Premium restyle layered over Woo defaults — full custom templates handled in
   Theme Builder, these ensure typography/spacing consistency everywhere Woo
   markup appears inside our Elementor sections.
   ========================================================================== */
.woo-frame { padding: 90px 0 120px; }
.woo-frame .woocommerce { font-family: var(--body); color: var(--tobacco); }
.woo-frame .woocommerce a.button, .woo-frame .woocommerce button.button,
.woo-frame .woocommerce .button {
      background: var(--gold); color: var(--tobacco);
      font-family: var(--body); font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      border-radius: 2px; padding: 15px 32px; border: 2px solid var(--gold);
      transition: background .3s ease, color .3s ease;
}
.woo-frame .woocommerce a.button:hover, .woo-frame .woocommerce button.button:hover {
      background: transparent; color: var(--gold);
}
.woo-frame .woocommerce ul.products li.product h2,
.woo-frame .woocommerce ul.products li.product .woocommerce-loop-product__title {
      font-family: var(--display-font); font-weight: 600; color: var(--tobacco); font-size: 1.35rem;
}
.woo-frame .woocommerce ul.products li.product .price { color: var(--gold); font-family: var(--display-font); font-size: 1.3rem; }
.woo-frame .woocommerce .product_title { font-family: var(--display-font); font-weight: 600; color: var(--tobacco); }

/* Thank-You / Order Received (order-confirmation) */
.woo-frame .woocommerce-order { max-width: 860px; margin: 0 auto; }
.woo-frame .woocommerce-thankyou-order-received {
      font-family: var(--display-font); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 600;
      color: var(--tobacco); text-align: center; margin-bottom: 12px;
}
.woo-frame .woocommerce-order-overview {
      display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
      background: var(--ivory); border: 1px solid var(--border-warm); border-radius: 6px;
      padding: 28px 32px; margin: 28px 0; box-shadow: var(--shadow-sm); list-style: none;
}
.woo-frame .woocommerce-order-overview li {
      font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--tobacco-pale); border: none; padding: 0;
}
.woo-frame .woocommerce-order-overview li strong { display: block; font-family: var(--display-font); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--gold); margin-top: 6px; }
.woo-frame .woocommerce-order table.shop_table { border: 1px solid var(--border-warm); border-radius: 6px; overflow: hidden; }
.woo-frame .woocommerce-order table.shop_table th { font-family: var(--body); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--tobacco); }

/* ==========================================================================
   404 / SEARCH
   ========================================================================== */
.error-404-num { font-family: var(--display-font); font-size: clamp(6rem, 18vw, 13rem); font-weight: 600; line-height: 0.9; color: var(--gold); letter-spacing: -0.02em; }
.error-404-num em { font-style: italic; font-weight: 300; color: var(--gold-pale); }
.search-hero-form { max-width: 620px; margin: 28px auto 0; }
.e-con.search-hero-form { align-items: center; }

/* ==========================================================================
   ANNOUNCEMENT BAR  (prepended to the header template)
   ========================================================================== */
.announce-bar { background: linear-gradient(90deg, var(--tobacco), var(--tobacco-mid)); border-bottom: 1px solid var(--border-gold); padding: 9px 20px; width: 100%; }
.e-con.announce-bar { align-items: center; }
.e-con.announce-inner { flex-direction: row; align-items: center; justify-content: center; width: auto; }
.announce-text, .announce-text p { font-family: var(--body); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247,240,227,0.85); text-align: center; margin: 0; }
.announce-text strong { color: var(--gold-pale); font-weight: 600; }
.announce-text a { color: var(--gold-bright); text-decoration: none; font-weight: 600; transition: color .3s ease; white-space: nowrap; }
.announce-text a:hover { color: var(--gold-pale); }

/* ==========================================================================
   MOBILE STICKY CTA  (appended to footer; fixed bottom, mobile only)
   ========================================================================== */
.mobile-sticky-cta { display: none; }
@media (max-width: 768px) {
      .mobile-sticky-cta {
            display: flex !important;
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
            background: rgba(28,20,9,0.97);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            border-top: 1px solid var(--border-gold);
            box-shadow: 0 -6px 24px rgba(20,15,7,0.35);
            padding: 12px 18px;
      }
      .e-con.mobile-sticky-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
      .e-con.sticky-cta-text { flex: 1 1 auto; width: auto; align-items: flex-start; }
      .sticky-cta-title { font-family: var(--display-font); font-size: 1.05rem; font-weight: 600; color: var(--parchment); line-height: 1.1; display: block; }
      .sticky-cta-sub { font-family: var(--body); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-pale); display: block; }
      .elementor-widget-button.sticky-cta-btn { flex: 0 0 auto; }
      .elementor-widget-button.sticky-cta-btn .elementor-button { padding: 12px 24px; font-size: 0.68rem; white-space: nowrap; }
      /* keep the fixed bar from covering page footer content */
      body { padding-bottom: 64px; }
}

/* ==========================================================================
   POPUPS  (Elementor Popup templates)
   ========================================================================== */
.popup-newsletter { background: linear-gradient(135deg, var(--tobacco), var(--tobacco-mid)); padding: 56px 48px; border: 1px solid var(--border-gold); position: relative; overflow: hidden; }
.popup-newsletter::before { content:''; position:absolute; inset:0; background: radial-gradient(80% 120% at 50% 0%, var(--gold-glow), transparent 60%); pointer-events:none; }
.e-con.popup-inner { align-items: center; text-align: center; position: relative; z-index: 1; max-width: 460px; margin: 0 auto; }
.popup-newsletter .newsletter-eyebrow { color: var(--gold-pale); }
.popup-newsletter .newsletter-title { color: var(--parchment); font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.popup-newsletter .newsletter-title em { color: var(--gold-pale); }
.popup-newsletter .newsletter-body { color: rgba(247,240,227,0.72); margin-bottom: 24px; }
.popup-newsletter .movement-note { color: rgba(247,240,227,0.5); font-size: 0.72rem; margin-top: 14px; letter-spacing: 0.08em; }
.e-con.popup-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
/* Book-promo popup (cover + body) */
.e-con.popup-promo-grid { flex-direction: row; align-items: stretch; gap: 0; }
.e-con.popup-promo-media { flex: 0 0 40%; background: var(--tobacco-mid); align-items: center; justify-content: center; padding: 32px; }
.popup-promo-cover img { width: 100%; max-width: 220px; border-radius: 3px; box-shadow: var(--shadow-lg); }
.e-con.popup-promo-body { flex: 1 1 60%; align-items: flex-start; text-align: left; padding: 48px 44px; max-width: none; }
.popup-promo-body .newsletter-title, .popup-promo-body .newsletter-body { text-align: left; }
.popup-promo-body .book-formats { justify-content: flex-start; margin: 4px 0 8px; }
.e-con.popup-promo-body .popup-actions { justify-content: flex-start; }
@media (max-width: 680px) {
      .e-con.popup-promo-grid { flex-direction: column; }
      .e-con.popup-promo-media { flex: 1 1 auto; padding: 28px; }
      .e-con.popup-promo-body { padding: 32px 26px; }
}

/* ==========================================================================
   404  (premium error template)
   ========================================================================== */
.error-404-hero { min-height: clamp(520px, 80vh, 760px); }
.error-404-num { margin-bottom: 8px; }
.error-404-hero .hero-ctas { margin-top: 30px; }
.e-con.error-404-hero .hero-ctas, .e-con.search-hero .hero-ctas { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   RESPONSIVE  (interior pages)
   ========================================================================== */
@media (max-width: 1024px) {
      .page-wrap, .breadcrumb-inner { padding: 0 48px; }
      .e-con.split-grid, .split-grid.reverse { flex-direction: column; gap: 44px; }
      .e-con.split-media, .e-con.split-body { flex: 1 1 100%; width: 100%; }
      .e-con.legal-layout { flex-direction: column; gap: 40px; }
      .e-con.legal-toc { position: static; flex: 1 1 100%; width: 100%; }
      .e-con.contact-grid { flex-direction: column; gap: 44px; }
      .e-con.contact-detail-col, .e-con.contact-form-col { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 768px) {
      .page-section, .faq-section, .cta-band { padding: 80px 0; }
      .page-wrap, .breadcrumb-inner, .cta-band-inner, .faq-inner { padding: 0 24px; }
      .page-hero-content { padding: 64px 24px; }
      .page-hero-title, .page-hero-title .elementor-heading-title { font-size: clamp(2rem, 6.4vw, 3rem) !important; overflow-wrap: break-word; }
      .page-hero-subtitle { font-size: 0.68rem; letter-spacing: 0.14em; }
      .e-con.stat-row { gap: 40px; }
      .timeline::before { left: 60px; }
      .timeline-year { flex: 0 0 46px; font-size: 1.15rem; }
      .e-con.timeline-item { gap: 20px; }
}
@media (max-width: 480px) {
      .e-con.feature-card, .e-con.pricing-card { flex: 1 1 100%; max-width: 100%; }
      .page-hero-content { padding: 56px 18px; }
      .page-hero-title, .page-hero-title .elementor-heading-title { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; overflow-wrap: break-word; }
      .page-hero-subtitle { font-size: 0.64rem; letter-spacing: 0.12em; }
      .page-hero .hero-eyebrow-text { font-size: 0.62rem; letter-spacing: 0.14em; }
      .section-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
      .cta-band-title, .newsletter-title { overflow-wrap: break-word; }
}

/* ══════════════════════════════════════════════════════════════════════
   Mini-cart side panel — brand design (WooCommerce menu-cart off-canvas)
   Structure: __container (overlay) > __main (panel) > close + products +
   subtotal + footer-buttons. Defaults are stark white + oversized serif
   links + grey buttons; this maps it to the parchment/gold/tobacco system.
   ══════════════════════════════════════════════════════════════════════ */
.elementor-menu-cart__container { background: rgba(44,31,14,0.55) !important; display: flex !important; justify-content: flex-end !important; }
.elementor-menu-cart__main {
  position: relative !important;
  width: 430px !important;
  max-width: 90vw !important;
  height: 100% !important;
  background: var(--cream) !important;
  padding: 56px 34px 34px !important;
  box-shadow: -22px 0 70px rgba(44,31,14,0.28) !important;
  border-left: 1px solid var(--border-gold) !important;
  overflow-y: auto !important;
}
/* close X — Elementor draws it as two absolutely-positioned pseudo bars
   (left:0; width:25px; rotated ±45°). Pin the button to a fixed square in the
   corner and re-center both bars inside it so the × is always symmetric. */
.elementor-menu-cart__close-button {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  color: var(--tobacco) !important;
  opacity: 0.6 !important;
  transition: opacity .3s ease, color .3s ease !important;
}
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after {
  left: 50% !important;
  right: auto !important;
  top: 12px !important;            /* ~centre of the 26px box (bars are ~2px tall) */
  width: 22px !important;
  margin-left: -11px !important;   /* centre the 22px bar horizontally */
}
.elementor-menu-cart__close-button:hover { color: var(--gold) !important; opacity: 1 !important; }

/* empty state */
.elementor-menu-cart__products .woocommerce-mini-cart__empty-message,
.woocommerce-mini-cart__empty-message {
  font-family: var(--display-font) !important;
  color: var(--tobacco) !important;
  font-size: 1.5rem !important;
  font-style: italic;
}

/* product rows */
.elementor-menu-cart__products { border: none !important; margin-top: 8px !important; }
.elementor-menu-cart__product,
.woocommerce-mini-cart-item {
  border: none !important;
  border-bottom: 1px solid var(--border-warm) !important;
  padding: 20px 0 !important;
}
/* The LAST item's border-bottom would stack with the subtotal's border-top and
   read as a double rule — drop it so the subtotal border is the sole divider. */
.elementor-menu-cart__product:last-child,
.woocommerce-mini-cart-item:last-child { border-bottom: none !important; }
/* Woo's own total border would also double up with .__subtotal's border-top. */
.woocommerce-mini-cart__total { border-top: none !important; }
.elementor-menu-cart__product img,
.woocommerce-mini-cart-item img {
  border: 1px solid var(--border-gold) !important;
  border-radius: 0 !important;
}
/* product name link */
.elementor-menu-cart__product-name a,
.elementor-menu-cart__product a:not(.remove),
.woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--tobacco) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color .3s ease !important;
}
.elementor-menu-cart__product a:not(.remove):hover,
.woocommerce-mini-cart-item a:not(.remove):hover { color: var(--gold) !important; }
/* quantity "3 × $29.99" */
.elementor-menu-cart__product .quantity,
.woocommerce-mini-cart-item .quantity {
  font-family: var(--body) !important;
  color: var(--tobacco-light) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.elementor-menu-cart__product .quantity .woocommerce-Price-amount,
.woocommerce-mini-cart-item .quantity .woocommerce-Price-amount { color: var(--tobacco-light) !important; }
/* remove × */
.elementor-menu-cart__product a.remove,
.woocommerce-mini-cart-item a.remove {
  color: var(--gold) !important;
  border: 1px solid var(--border-gold) !important;
  opacity: 0.85 !important;
  transition: background .25s ease, color .25s ease, opacity .25s ease !important;
}
.elementor-menu-cart__product a.remove:hover,
.woocommerce-mini-cart-item a.remove:hover { background: var(--gold) !important; color: #fff !important; opacity: 1 !important; }

/* subtotal */
.elementor-menu-cart__subtotal {
  font-family: var(--display-font) !important;
  color: var(--tobacco) !important;
  font-size: 1.2rem !important;
  border-top: 1px solid var(--border-warm) !important;
  border-bottom: none !important;
  padding: 22px 0 !important;
  margin-top: 6px !important;
}
.elementor-menu-cart__subtotal strong { font-weight: 600 !important; letter-spacing: 0.02em; }
.elementor-menu-cart__subtotal .woocommerce-Price-amount { color: var(--gold) !important; font-weight: 600 !important; }

/* footer buttons */
.elementor-menu-cart__footer-buttons { gap: 12px !important; margin-top: 4px !important; }
.elementor-menu-cart__footer-buttons .elementor-button {
  font-family: var(--body) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 16px 18px !important;
  line-height: 1 !important;
  transition: background .3s ease, border-color .3s ease, color .3s ease !important;
}
/* View cart = outlined secondary */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: transparent !important;
  color: var(--tobacco) !important;
  border: 1.5px solid var(--tobacco) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background: var(--tobacco) !important;
  color: var(--cream) !important;
}
/* Checkout = gold primary */
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--gold) !important;
  color: #fff !important;
  border: 1.5px solid var(--gold) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background: var(--tobacco) !important;
  border-color: var(--tobacco) !important;
  color: var(--cream) !important;
}

@media (max-width: 480px) {
  .elementor-menu-cart__main { width: 100vw !important; max-width: 100vw !important; padding: 44px 22px 28px !important; }
  .elementor-menu-cart__footer-buttons { flex-direction: column !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Event Tickets RSVP block + "Add to calendar" — brand palette
   The Events Calendar / Event Tickets ships its own design system
   (.tribe-common) in an indigo/blue accent. Remap it to the site's
   parchment / gold / tobacco system with Cormorant + Jost.
   ══════════════════════════════════════════════════════════════════════ */
/* remap the tribe design-system accent variables (best-effort) */
.tribe-common,
.tribe-tickets,
.tribe-events {
  --tec-color-accent-primary: var(--gold);
  --tec-color-accent-primary-hover: var(--tobacco);
  --tec-color-accent-primary-active: var(--tobacco);
  --tec-color-accent-primary-multiplier-active: var(--tobacco);
  --tec-color-link-accent: var(--gold);
  --tec-color-link-accent-hover: var(--tobacco);
  --tec-color-background-secondary: var(--cream);
}

/* card wrapper */
.tribe-tickets__rsvp-wrapper {
  background: var(--cream) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 0 !important;
}

/* headings — "Reserve Your Spot", "RSVP Here" */
.tribe-tickets__rsvp-wrapper .tribe-tickets__rsvp-title,
.tribe-tickets__rsvp-wrapper .tribe-tickets__rsvp-actions-title,
.tribe-tickets__rsvp-wrapper .tribe-common-h2,
.tribe-tickets__rsvp-wrapper .tribe-common-h3,
.tribe-tickets__rsvp-wrapper .tribe-common-h4,
.tribe-tickets__rsvp-attendance-number {
  font-family: var(--display-font) !important;
  color: var(--tobacco) !important;
  font-weight: 600 !important;
}

/* supporting text — description, attendance/availability labels */
.tribe-tickets__rsvp-description,
.tribe-tickets__rsvp-attendance-going,
.tribe-tickets__rsvp-availability,
.tribe-tickets__rsvp-availability-quantity,
.tribe-tickets__rsvp-wrapper .tribe-common-b1,
.tribe-tickets__rsvp-wrapper .tribe-common-b2,
.tribe-tickets__rsvp-wrapper .tribe-common-b3,
.tribe-tickets__rsvp-wrapper p {
  font-family: var(--body) !important;
  color: var(--tobacco-light) !important;
}
.tribe-tickets__rsvp-availability-quantity { color: var(--tobacco) !important; }

/* primary RSVP button ("Going") — selector keyed on the actual wrapper class
   (.tribe-tickets__rsvp-wrapper) so it beats the .tribe-common-b1 text rule the
   button also carries; the extra .tribe-common-c-btn class lifts specificity. */
.tribe-tickets__rsvp-wrapper .tribe-common-c-btn,
.tribe-tickets__rsvp-wrapper .tribe-common-c-btn.tribe-tickets__rsvp-actions-button-going,
.tribe-tickets__rsvp-actions-button-going {
  background-color: var(--gold) !important;
  background-image: none !important;
  border: 1.5px solid var(--gold) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease !important;
}
.tribe-tickets__rsvp-wrapper .tribe-common-c-btn:hover,
.tribe-tickets__rsvp-wrapper .tribe-common-c-btn:focus,
.tribe-tickets__rsvp-actions-button-going:hover,
.tribe-tickets__rsvp-actions-button-going:focus {
  background-color: var(--tobacco) !important;
  border-color: var(--tobacco) !important;
  color: var(--cream) !important;
}

/* "Add to calendar" (outlined subscribe button) + its icons */
.tribe-events-c-subscribe-dropdown__button,
.tribe-common-c-btn-border {
  background: transparent !important;
  border: 1.5px solid var(--border-gold) !important;
  border-radius: 0 !important;
  font-family: var(--body) !important;
}
.tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events-c-subscribe-dropdown__button:focus { border-color: var(--gold) !important; }
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__button .tribe-common-c-svgicon {
  color: var(--tobacco) !important;
  fill: var(--tobacco) !important;
  font-weight: 600 !important;
}
.tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__button:hover .tribe-common-c-svgicon,
.tribe-events-c-subscribe-dropdown__button:hover { color: var(--gold) !important; fill: var(--gold) !important; }

/* calendar-options dropdown panel */
.tribe-events-c-subscribe-dropdown__content { border-radius: 0 !important; border-color: var(--border-gold) !important; }
.tribe-events-c-subscribe-dropdown__list-item-link { color: var(--tobacco) !important; font-family: var(--body) !important; }
.tribe-events-c-subscribe-dropdown__list-item:hover { background: var(--parchment) !important; }
.tribe-events-c-subscribe-dropdown__list-item:hover .tribe-events-c-subscribe-dropdown__list-item-link { color: var(--gold) !important; }

/* vertical divider between details + actions → warm tone */
.tribe-tickets__rsvp-actions-wrapper { border-color: var(--border-gold) !important; }

/* TEC single-event meta/venue links → brand gold (were default blue) */
.single-tribe_events .tribe-events-gmap,
.single-tribe_events .tribe-events-single-map-more,
.single-tribe_events .tribe-events-meta-group a,
.single-tribe_events .tribe-events-schedule a,
.single-tribe_events .tribe-events-cal-links a,
.single-tribe_events .tribe-events-event-meta a {
  color: var(--gold) !important;
  text-decoration: none !important;
}
.single-tribe_events .tribe-events-gmap:hover,
.single-tribe_events .tribe-events-single-map-more:hover,
.single-tribe_events .tribe-events-meta-group a:hover,
.single-tribe_events .tribe-events-schedule a:hover {
  color: var(--tobacco) !important;
}
.single-tribe_events .tribe-events-single-section-title { font-family: var(--display-font) !important; color: var(--tobacco) !important; }

/* ── Video section = native Elementor Video widgets (YouTube + lightbox) ──
   Each card holds a Video widget (thumbnail = image overlay, opens the YouTube
   video in a lightbox) + the caption on top. To swap a video the client opens
   the homepage in Elementor, clicks the video, and pastes a new YouTube URL. */
.video-featured .video-embed,
.video-card .video-embed { position: absolute; inset: 0; margin: 0; }
.video-embed > .elementor-widget-container { height: 100%; }
.video-embed .elementor-wrapper { height: 100%; padding: 0 !important; }
.video-embed .elementor-custom-embed-image-overlay {
  position: absolute; inset: 0; height: 100%;
  background-size: cover; background-position: top center;
  border-radius: 0;
}
/* readability gradient over the thumbnail (matches the old overlay) */
.video-embed .elementor-custom-embed-image-overlay::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(44,31,14,0.82) 0%, rgba(44,31,14,0.25) 50%, transparent 100%);
  transition: background 0.35s ease; pointer-events: none;
}
.video-featured:hover .video-embed .elementor-custom-embed-image-overlay::after,
.video-card:hover .video-embed .elementor-custom-embed-image-overlay::after {
  background: linear-gradient(to top, rgba(44,31,14,0.88) 0%, rgba(44,31,14,0.4) 50%, rgba(44,31,14,0.12) 100%);
}
/* play button → brand circle (echoes the old .play-btn) */
.video-embed .elementor-custom-embed-play { z-index: 2; }
.video-embed .elementor-custom-embed-play svg {
  width: 62px; height: 62px; fill: var(--parchment);
  filter: drop-shadow(0 4px 18px rgba(44,31,14,0.5));
  transition: fill 0.35s ease, transform 0.35s ease;
}
.video-featured:hover .video-embed .elementor-custom-embed-play svg,
.video-card:hover .video-embed .elementor-custom-embed-play svg { fill: var(--gold); transform: scale(1.08); }
.video-embed-sm .elementor-custom-embed-play svg { width: 46px; height: 46px; }
/* captions sit above the video, click passes through to open the lightbox */
.video-featured-caption, .video-card-caption { pointer-events: none; z-index: 3; }

/* ── Static events list (native widgets, mockup-exact) ─────────────────
   Elementor containers default to flex; force the mockup's 3-col grid and
   the date column's stacked month/day. Scoped to .events-list so the
   dynamic-loop styles elsewhere are untouched. */
.events-list .e-con.event-item {
  display: grid !important;
  grid-template-columns: 100px 1fr auto;
  gap: 40px;
  align-items: center;
}
.events-list .e-con.event-date { display: flex; flex-direction: column; text-align: center; }
.events-list .e-con.event-body { display: flex; flex-direction: column; }
.event-item .elementor-widget { margin: 0; width: auto; }
.event-item .event-month .elementor-heading-title,
.event-item .event-day .elementor-heading-title,
.event-item .event-name .elementor-heading-title,
.event-item .event-meta .elementor-heading-title { margin: 0; }

/* ── Movement "Pre-Order Your Copy" CTA (replaces the presale form) ──── */
.movement-cta { display: flex; justify-content: center; margin-top: 8px; }
.movement-cta .btn-primary .elementor-button {
  padding: 18px 56px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.2em !important;
  box-shadow: 0 8px 40px rgba(184,137,42,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TEC events archive (/calendar/) — events bar + views → brand palette
   The Events Calendar ships an indigo/blue events bar (search, Find Events,
   List/Month/Day selector, prev/next nav). Remap to gold/tobacco/parchment.
   ══════════════════════════════════════════════════════════════════════ */
.tribe-events .tribe-events-header,
.tribe-events-c-events-bar,
.tribe-events-c-events-bar__search { background: var(--parchment) !important; }
.tribe-events-header { border-radius: 0 !important; }

/* search field */
.tribe-events-c-search__input {
  font-family: var(--body) !important;
  border-radius: 0 !important;
  color: var(--tobacco) !important;
}
.tribe-events-c-search__input-control-icon-svg { color: var(--gold) !important; }

/* "Find Events" primary button */
.tribe-events-c-search__button,
.tribe-events .tribe-common-c-btn {
  background-color: var(--gold) !important;
  background-image: none !important;
  border: 1.5px solid var(--gold) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.tribe-events-c-search__button:hover,
.tribe-events .tribe-common-c-btn:hover {
  background-color: var(--tobacco) !important;
  border-color: var(--tobacco) !important;
  color: var(--cream) !important;
}

/* view selector (List / Month / Day) */
.tribe-events-c-view-selector__list-item-text,
.tribe-events-c-view-selector__button-text,
.tribe-events-c-top-bar__datepicker-button { font-family: var(--body) !important; color: var(--tobacco) !important; }
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item-link:hover { color: var(--gold) !important; }
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after,
.tribe-common .tribe-events-c-view-selector__list-item--active::after { background-color: var(--gold) !important; }
.tribe-events-c-view-selector__list-item-icon-svg,
.tribe-events-c-view-selector__button-icon-svg { color: var(--gold) !important; }

/* top bar: prev/next nav, today, datepicker caret */
.tribe-events-c-top-bar__nav-link,
.tribe-events-c-top-bar__today-button,
.tribe-events-c-top-bar__nav-link-icon-svg,
.tribe-events-c-top-bar__datepicker-button-icon-svg { color: var(--tobacco) !important; }
.tribe-events-c-top-bar__nav-link:hover,
.tribe-events-c-top-bar__today-button:hover { color: var(--gold) !important; border-color: var(--gold) !important; }

/* links + accents throughout the archive → gold */
.tribe-events .tribe-common a:not(.tribe-common-c-btn):not(.tribe-events-c-search__button),
.tribe-events-calendar-list__event-title-link,
.tribe-events-calendar-month__calendar-event-title-link { color: var(--tobacco) !important; }
.tribe-events-calendar-list__event-title-link:hover,
.tribe-events-calendar-month__calendar-event-title-link:hover { color: var(--gold) !important; }
/* today highlight + month grid accents */
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date { color: var(--gold) !important; }
.tribe-events-calendar-month__day-cell--selected,
.tribe-events-calendar-month__day--current { background-color: rgba(184,137,42,0.06) !important; }

/* ============================================================
   @@BTCF-SHOP-PREORDER-MODULE@@
   Shop preorder landing (native rebuild of Angel's Shop package).
   Two sections: .shop-preorder (light) + .shop-ebook (dark).
   Rendered by Product Archive template #270 on /shop.
   ============================================================ */
.shop-preorder {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 7vw, 96px) 0;
  background:
    radial-gradient(circle at 17% 22%, var(--gold-glow), transparent 32%),
    linear-gradient(135deg, var(--ivory) 0%, var(--parchment-deep) 100%);
}
.shop-preorder::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -150px;
  width: 420px;
  height: 420px;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  pointer-events: none;
}
.shop-preorder-inner {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}
.shop-cover-col, .shop-copy, .shop-option, .shop-option-copy,
.shop-option-action, .shop-ebook-inner, .shop-retailers { min-width: 0; }

.shop-cover-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px;
}
.shop-cover-glow {
  position: absolute;
  inset: 9% 6% 4%;
  border-radius: 46%;
  background: radial-gradient(circle, var(--gold-glow), rgba(184,137,42,0));
  filter: blur(10px);
  z-index: 0;
}
.shop-cover {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  margin: 0 auto;
  transform: rotate(-1.25deg);
  filter: drop-shadow(0 30px 70px var(--shadow-deep));
}
.shop-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px 12px 12px 4px;
}

.shop-eyebrow {
  margin-bottom: 15px;
  color: var(--tobacco-light);
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}
.shop-title {
  max-width: 720px;
  margin-bottom: 12px;
  color: var(--tobacco);
  font-family: var(--display-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-size: clamp(3rem, 5.6vw, 5.6rem);
}
.shop-author {
  margin-bottom: 18px;
  color: var(--gold);
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.shop-hook {
  max-width: 640px;
  margin-bottom: 24px;
  color: var(--tobacco-pale);
  font-family: var(--literary);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.48;
}

.shop-ship-notice {
  display: flex !important;
  flex-direction: row !important;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px 18px;
  border: 1px solid var(--border-gold);
  border-radius: 13px;
  background: rgba(253, 250, 244, 0.64);
}
.shop-status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-muted);
}
.shop-ship-title {
  display: block;
  margin-bottom: 2px;
  color: var(--tobacco);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
}
.shop-ship-note {
  color: var(--tobacco-pale);
  font-family: var(--body);
  font-size: 0.9rem;
  line-height: 1.5;
}

.shop-options {
  overflow: hidden;
  border: 1px solid var(--border-warm);
  border-radius: 17px;
  background: rgba(253, 250, 244, 0.75);
  box-shadow: 0 18px 40px var(--shadow-warm);
}
.shop-option {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 19px 20px;
}
.shop-option + .shop-option { border-top: 1px solid var(--border-warm); }
.shop-option-label {
  margin-bottom: 3px;
  color: var(--tobacco);
  font-family: var(--display-font);
  font-size: 1.35rem;
  font-weight: 600;
}
.shop-option-detail {
  color: var(--tobacco-pale);
  font-family: var(--body);
  font-size: 0.9rem;
  line-height: 1.5;
}
.shop-option-action {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px;
  align-items: center;
  justify-content: flex-end;
}
.shop-price {
  min-width: 62px;
  color: var(--tobacco);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: right;
}

/* preorder buttons — neutralize Elementor wrapper, style inner .elementor-button */
.elementor-widget-button.btn-preorder-primary,
.elementor-widget-button.btn-preorder-secondary {
  background: none; border: none; padding: 0; width: auto;
}
.btn-preorder-primary .elementor-button,
.btn-preorder-secondary .elementor-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 9px;
  border: 1px solid var(--tobacco);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-transform: none;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-preorder-primary .elementor-button {
  background: var(--tobacco);
  color: var(--ivory);
}
.btn-preorder-primary .elementor-button:hover {
  background: var(--gold); border-color: var(--gold); color: var(--tobacco);
  transform: translateY(-2px); box-shadow: 0 11px 24px var(--shadow-warm);
}
.btn-preorder-secondary .elementor-button {
  background: transparent;
  color: var(--tobacco);
}
.btn-preorder-secondary .elementor-button:hover {
  background: var(--tobacco); color: var(--ivory);
  transform: translateY(-2px); box-shadow: 0 11px 24px var(--shadow-warm);
}

.shop-checkout-note {
  margin-top: 13px;
  color: var(--tobacco-pale);
  font-family: var(--body);
  font-size: 0.82rem;
  text-align: center;
}

/* ── Section 2: dark eBook strip ── */
.shop-ebook {
  padding: clamp(30px, 4vw, 48px) 0;
  background: var(--tobacco);
  color: var(--ivory);
}
.shop-ebook-inner {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: center;
}
.shop-eyebrow-light { color: var(--gold-pale); margin-bottom: 10px; }
.shop-ebook-title {
  margin-bottom: 7px;
  color: var(--ivory);
  font-family: var(--display-font);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
}
.shop-ebook-text {
  max-width: 690px;
  color: rgba(253, 250, 244, 0.74);
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.55;
}
.shop-retailers {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}
.shop-retailer {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  min-height: 74px;
  padding: 12px 17px;
  border: 1px solid rgba(253, 250, 244, 0.22);
  border-radius: 10px;
  background: rgba(253, 250, 244, 0.06);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.shop-retailer:hover {
  border-color: var(--gold-pale);
  background: rgba(253, 250, 244, 0.11);
  transform: translateY(-2px);
}
.shop-retailer-name { color: var(--ivory); font-family: var(--body); font-weight: 700; font-size: 1rem; }
.shop-retailer-tag {
  margin-top: 2px;
  color: var(--gold-pale);
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .shop-preorder-inner { grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr); gap: 38px; }
  .shop-cover-stage { padding: 10px; }
  .shop-option { grid-template-columns: 1fr; gap: 12px; }
  .shop-option-action { justify-content: space-between; }
  .shop-ebook-inner { grid-template-columns: 1fr; gap: 22px; }
  .shop-retailers { max-width: 430px; }
}
@media (max-width: 680px) {
  .shop-preorder { padding: 34px 0 40px; }
  .shop-preorder-inner { width: min(100% - 30px, 540px); grid-template-columns: 1fr; gap: 26px; }
  .shop-cover-col { order: 1; }
  .shop-copy { order: 2; }
  .shop-cover { width: min(70vw, 292px); }
  .shop-ebook-inner { width: min(100% - 30px, 540px); }
  .shop-option-action { flex-direction: column !important; align-items: stretch; }
  .shop-price { text-align: left; }
  .btn-preorder-primary .elementor-button, .btn-preorder-secondary .elementor-button { width: 100%; }
  .shop-retailers { grid-template-columns: 1fr; max-width: none; }
}
/* @@END-BTCF-SHOP-PREORDER-MODULE@@ */

/* ============================================================
   @@BTCF-SPEAKING-MODULE@@
   Speaking page redesign (native rebuild of Angel's Speaking package).
   .speaking-hero (dark navy) + .speaking-topics (cream) + the preserved
   form section restyled dark via .speaking-form-dark. Navy palette matches
   the approved mockup (scoped to .speaking-* so it doesn't affect the site).
   ============================================================ */
.speaking-hero {
  --spk-navy: #09182a;
  --spk-navy-soft: #102640;
  --spk-gold: #c8a45d;
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  min-height: 660px;
  padding-top: 80px; /* clear fixed header (dark hero, header stays transparent) */
  background:
    radial-gradient(circle at 8% 0%, rgba(200,164,93,0.18), transparent 34%),
    linear-gradient(120deg, var(--spk-navy) 0%, var(--spk-navy-soft) 100%);
  color: #fff;
}
.speaking-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--spk-gold), rgba(200,164,93,0));
}
.speaking-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.7fr);
  gap: clamp(50px, 7vw, 100px);
  align-items: center;
  padding: 72px 0;
}
.speaking-hero-copy, .speaking-portrait { min-width: 0; }
.speaking-hero-copy { max-width: 720px; }

.speaking-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--spk-gold, var(--gold));
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}
.speaking-hero-title {
  margin-bottom: 26px;
  max-width: 760px;
  color: #fff;
  font-family: var(--display-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.0;
  font-size: clamp(2.9rem, 6vw, 4.9rem);
}
.speaking-hero-title em { color: var(--spk-gold); font-style: italic; font-weight: 400; }
.speaking-lead {
  margin-bottom: 32px;
  max-width: 650px;
  color: rgba(255,255,255,0.8);
  font-family: var(--literary);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.62;
}
.speaking-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
/* CTA — neutralize Elementor button wrapper, style inner */
.elementor-widget-button.speaking-cta { background: none; border: none; padding: 0; width: auto; }
.speaking-cta .elementor-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border: 1px solid var(--spk-gold);
  border-radius: 0;
  background: var(--spk-gold);
  color: #071425;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.speaking-cta .elementor-button:hover {
  background: transparent; color: #fff; transform: translateY(-2px);
}
.speaking-meta {
  display: block;
  max-width: 250px;
  color: rgba(255,255,255,0.58);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.speaking-portrait {
  position: relative;
  width: min(100%, 430px);
  margin: 0 0 0 auto;
  padding: 14px;
  border: 1px solid rgba(200,164,93,0.38);
}
.speaking-portrait::before {
  content: "";
  position: absolute;
  top: -16px; right: -16px;
  width: 100px; height: 100px;
  border-top: 2px solid #c8a45d;
  border-right: 2px solid #c8a45d;
  pointer-events: none;
}
.speaking-portrait-img img {
  display: block;
  width: 100%;
  height: clamp(420px, 48vw, 560px);
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.85) contrast(1.04);
}
.speaking-portrait-cap {
  position: absolute;
  left: 13px; bottom: 13px;
  padding: 11px 18px;
  background: #c8a45d;
  color: #09182a;
  font-family: var(--body);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Section 2: cream signature themes ── */
.speaking-topics {
  background: #f4efe5;
  padding: clamp(56px, 7vw, 88px) 0;
}
.speaking-topics-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.speaking-topics-head {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 38px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(23,34,53,0.18);
}
.speaking-eyebrow-dark { color: #8b6d34; margin-bottom: 0; }
.speaking-topics-title {
  color: var(--tobacco);
  font-family: var(--display-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
}
.speaking-topic-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.speaking-topic { position: relative; min-width: 0; padding: 6px 34px 8px 0; }
.speaking-topic + .speaking-topic { padding-left: 34px; border-left: 1px solid rgba(23,34,53,0.18); }
.speaking-topic-num {
  display: block;
  margin-bottom: 14px;
  color: #9a7a3e;
  font-family: var(--display-font);
  font-size: 1.15rem;
  font-style: italic;
}
.speaking-topic-title {
  margin-bottom: 12px;
  color: #172235;
  font-family: var(--display-font);
  font-weight: 500;
  line-height: 1.14;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}
.speaking-topic-body {
  color: #657084;
  font-family: var(--body);
  font-size: 0.94rem;
  line-height: 1.65;
}
.speaking-audience {
  margin-top: 34px;
  color: #5e6877;
  font-family: var(--literary);
  font-size: 1rem;
  font-style: italic;
  text-align: center;
}

/* ── Section 3: preserved form section, restyled dark navy ── */
.speaking-form-dark { scroll-margin-top: 90px; background: #09182a !important; }
.speaking-form-dark .section-label-text,
.speaking-form-dark .section-title,
.speaking-form-dark .section-title em,
.speaking-form-dark .story-body { color: #fff !important; }
.speaking-form-dark .section-title em { color: #c8a45d !important; }
.speaking-form-dark .gold-rule { background: #c8a45d !important; }
.speaking-form-dark .contact-form input,
.speaking-form-dark .contact-form textarea,
.speaking-form-dark .contact-form select {
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}
/* Dropdown option list: the open <select> popup renders on a white background,
   so the form's white text made options invisible (white-on-white). Give the
   options a dark navy panel with light text so the open list matches the form. */
.speaking-form-dark .contact-form select option {
  background-color: #0f2138 !important;
  color: #fff !important;
}
.speaking-form-dark .contact-form select option:checked,
.speaking-form-dark .contact-form select option:hover {
  background-color: #1a3a5c !important;
  color: #fff !important;
}
.speaking-form-dark .contact-form input::placeholder,
.speaking-form-dark .contact-form textarea::placeholder { color: rgba(255,255,255,0.62) !important; }
.speaking-form-dark .contact-form .elementor-field-label { color: rgba(255,255,255,0.8) !important; }
/* drop the cream card so fields sit on navy (matches mockup) */
.speaking-form-dark .contact-form { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.speaking-form-dark .contact-form::before { display: none !important; }
.speaking-form-dark .contact-form button[type="submit"],
.speaking-form-dark .contact-form .elementor-button {
  background: #c8a45d !important; color: #071425 !important; border-color: #c8a45d !important;
}
.speaking-form-dark .contact-form button[type="submit"]:hover,
.speaking-form-dark .contact-form .elementor-button:hover {
  background: transparent !important; color: #fff !important;
}

@media (max-width: 900px) {
  .speaking-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.58fr); gap: 38px; }
  .speaking-topic-list { grid-template-columns: 1fr; gap: 24px; }
  .speaking-topic, .speaking-topic + .speaking-topic {
    padding: 0 0 24px; border-left: 0; border-bottom: 1px solid rgba(23,34,53,0.16);
  }
  .speaking-topic-list .speaking-topic:last-child { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 700px) {
  .speaking-hero { min-height: 0; }
  .speaking-hero-inner { width: min(100% - 32px, 1180px); grid-template-columns: 1fr; gap: 34px; padding: 40px 0 48px; }
  .speaking-portrait { grid-row: 1; width: min(100%, 360px); margin: 0 auto; }
  .speaking-portrait-img img { height: min(112vw, 465px); }
  .speaking-actions { flex-direction: column !important; align-items: flex-start; }
  .speaking-cta .elementor-button { width: 100%; }
  .speaking-meta { max-width: none; }
  .speaking-topics-inner { width: min(100% - 32px, 1180px); }
  .speaking-topics-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
}
/* @@END-BTCF-SPEAKING-MODULE@@ */

/* ============================================================
   @@BTCF-ABOUT-MODULE@@
   About page redesign (native rebuild of Angel's About package).
   Warm-dark editorial biography: hero → endurance quote → 6-milestone
   alternating timeline → three-careers pillars → closing CTA. Palette
   scoped to .about-* (warm dark + gold), fonts = site Cormorant/Jost.
   ============================================================ */
.about-hero, .about-journey, .about-pillars, .about-closing {
  --ab-ink: #15130f; --ab-brown: #201a14; --ab-ivory: #f3ecdf;
  --ab-gold: #c99a3b; --ab-gold-light: #dfbd73; --ab-muted: #b9aa95;
  --ab-line: rgba(201,154,59,.35);
}
/* shared editorial type */
.about-eyebrow {
  display: flex !important; flex-direction: row !important;
  align-items: center; gap: 14px;
  color: #dfbd73;
  font-family: var(--body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.26em; line-height: 1.4; text-transform: uppercase;
}
.about-eyebrow::after { content: ''; width: 52px; height: 1px; background: #c99a3b; }
.about-eyebrow-center { justify-content: center; }
.about-eyebrow-center::after { display: none; }
.about-eyebrow-dark { color: #8a682b; }
.about-display {
  color: var(--ab-ivory);
  font-family: var(--display-font); font-weight: 600;
  letter-spacing: -0.02em; line-height: 0.92;
  font-size: clamp(3rem, 7vw, 5.9rem);
}
.about-display em { display: block; color: #dfbd73; font-style: normal; font-weight: 500; }
.about-section-title {
  color: var(--ab-ivory);
  font-family: var(--display-font); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(2.5rem, 5vw, 4.1rem);
}
.about-title-dark { color: #241d15; }
.about-copy { color: #d7ccbc; font-family: var(--literary); font-size: clamp(1.2rem, 2vw, 1.44rem); line-height: 1.65; }

/* 1. HERO */
.about-hero {
  position: relative; overflow: hidden;
  display: flex !important; align-items: flex-end;
  min-height: min(780px, 88vh);
  background: #191611;
}
.about-hero-bg {
  position: absolute !important; inset: 0; z-index: 0;
  background-size: cover !important; background-position: 70% 22% !important;
  filter: saturate(.68) sepia(.2) contrast(1.04);
}
.about-hero-veil {
  position: absolute !important; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(13,11,9,.96) 0%, rgba(13,11,9,.76) 36%, rgba(13,11,9,.12) 72%),
    linear-gradient(0deg, rgba(13,11,9,.76) 0%, transparent 48%);
}
.about-hero-inner {
  position: relative; z-index: 2;
  width: min(1180px, calc(100% - 64px)); margin: 0 auto;
}
.about-hero-content { width: min(780px, 100%); padding: 120px 0 96px; }
.about-hero-content .about-eyebrow { margin-bottom: 28px; }
.about-display { margin-bottom: 0; }
.about-hero-roles {
  margin-top: 30px; color: #f2e8d7;
  font-family: var(--body); font-size: clamp(0.7rem, 1.3vw, 0.94rem);
  font-weight: 600; letter-spacing: 0.25em; line-height: 1.5; text-transform: uppercase;
}

/* 2. INTRODUCTION */
.about-intro {
  display: grid !important;
  /* Client 2026-07-15: reduce the "His Foundation" portrait. Was
     minmax(0,1fr) minmax(0,1.15fr) => a 651px-wide photo at 1440, ~46% of the
     section, while the copy column sat half empty. Narrowing the column shrinks
     the photo in BOTH dimensions rather than cropping it: .about-intro-img is
     height:auto-driven, so its height follows its intrinsic aspect at whatever
     width the column gives it (651x799 -> ~543x666 here). Only .about-intro
     uses these rules (About #272), so no scoping needed. */
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  min-height: 600px;
  background: #e9decd; color: #241d15;
}
.about-intro-photo { position: relative; overflow: hidden; min-height: 540px; }
.about-intro-photo .about-intro-img,
.about-intro-photo .about-intro-img img { height: 100%; }
.about-intro-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.76) sepia(.1); }
.about-intro-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(54px, 7vw, 100px);
}
.about-intro-content .about-eyebrow { margin-bottom: 20px; }
.about-intro-content .about-section-title { margin-bottom: 30px; }
.about-quote {
  position: relative; max-width: 650px; padding-left: 42px;
  color: #483a2c; font-family: var(--display-font);
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-style: italic; line-height: 1.45;
}
.about-quote::before {
  position: absolute; top: -30px; left: -2px; content: '“';
  color: #c99a3b; font-family: var(--display-font); font-size: 6rem; font-style: normal; line-height: 1;
}
.about-signature { margin-top: 28px; padding-left: 42px; color: #725e46; font-family: var(--display-font); font-size: 1.3rem; font-style: italic; }

/* 3. TIMELINE */
.about-journey {
  position: relative; padding: 110px 0 118px;
  background-size: cover !important; background-position: center 38% !important;
}
.about-journey::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(16,14,11,.91), rgba(16,14,11,.96));
}
.about-journey-inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.about-journey-head { text-align: center; margin-bottom: 76px; }
.about-journey-head .about-eyebrow { margin-bottom: 18px; }
.about-timeline { position: relative; width: min(980px, 100%); margin: 0 auto; }
.about-timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(transparent, #c99a3b 5%, #c99a3b 95%, transparent);
}
.about-milestone {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center; min-height: 220px;
}
.about-ms-dot {
  position: relative; z-index: 2; width: 13px; height: 13px; margin: auto;
  border: 3px solid #17140f; border-radius: 50%; outline: 1px solid #dfbd73;
  background: #c99a3b; box-shadow: 0 0 0 7px rgba(201,154,59,.1);
}
.about-ms-photo, .about-ms-content { width: min(390px, 100%); }
.about-ms-photo {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid rgba(223,189,115,.38); box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.about-ms-img, .about-ms-img img { width: 100%; height: 100%; }
.about-ms-img img { object-fit: cover; object-position: center 24%; filter: grayscale(.35) sepia(.22) saturate(.78); }
.about-ms-year { color: #dfbd73; font-family: var(--display-font); font-size: 1.25rem; font-weight: 600; margin-bottom: 7px; }
.about-ms-title { color: #f3ebdf; font-family: var(--display-font); font-weight: 600; line-height: 1; margin-bottom: 10px; font-size: clamp(1.7rem, 3vw, 2.25rem); }
.about-ms-text { max-width: 390px; color: #b9aa95; font-family: var(--display-font); font-size: 1.12rem; line-height: 1.55; }
.about-milestone:nth-child(odd) .about-ms-photo { justify-self: end; }
.about-milestone:nth-child(odd) .about-ms-content { justify-self: start; text-align: left; }
.about-milestone:nth-child(even) .about-ms-photo { grid-column: 3; justify-self: start; }
.about-milestone:nth-child(even) .about-ms-dot { grid-column: 2; grid-row: 1; }
.about-milestone:nth-child(even) .about-ms-content { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.about-milestone:nth-child(even) .about-ms-text { margin-left: auto; }

/* 4. THREE PILLARS */
.about-pillars { padding: 108px 0; background: #201a14; }
.about-pillars-inner { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.about-pillars-head {
  display: flex !important; flex-direction: row !important;
  align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px;
}
.about-pillars-head-left { max-width: 620px; }
.about-pillars-head-left .about-eyebrow { margin-bottom: 16px; }
.about-pillars-note { max-width: 390px; color: #b9aa95; font-family: var(--display-font); font-size: 1.18rem; line-height: 1.55; }
.about-pillar {
  position: relative; display: grid !important;
  grid-template-columns: 1.1fr 1fr .5fr; align-items: center;
  min-height: 180px; margin-top: 14px; overflow: hidden;
  border: 1px solid rgba(223,189,115,.16); background: #17130f;
}
.about-pillar-img { position: absolute !important; inset: 0 auto 0 0; width: 44%; height: 100%; z-index: 0; }
.about-pillar-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: grayscale(.42) sepia(.18) brightness(.56); }
.about-pillar::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #17130f 43%, #17130f 100%);
}
.about-pillar > *:not(.about-pillar-img) { position: relative; z-index: 2; }
.about-pillar-name {
  padding-left: clamp(28px, 5vw, 72px);
  color: var(--ab-ivory); font-family: var(--display-font); font-weight: 600;
  letter-spacing: 0.04em; font-size: clamp(1.9rem, 4vw, 2.9rem);
}
.about-pillar-summary { padding: 28px 38px; color: #cfc3b2; font-family: var(--display-font); font-size: 1.12rem; line-height: 1.55; }
.about-pillar-fact { min-width: 180px; padding: 16px 34px; border-left: 1px solid var(--ab-line); text-align: center; }
.about-pillar-fact-num { display: block; color: #dfbd73; font-family: var(--display-font); font-size: 1.4rem; line-height: 1.1; }
.about-pillar-fact-sub { display: block; margin-top: 6px; color: #b9aa95; font-family: var(--body); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; }

/* 5. CLOSING */
.about-closing { position: relative; overflow: hidden; display: flex !important; align-items: center; min-height: 600px; background: #0f0e0b; }
.about-closing-img { position: absolute !important; inset: 0 0 0 auto; width: 58%; height: 100%; z-index: 0; }
.about-closing-img img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 22%; filter: saturate(.6) sepia(.16) brightness(.72); }
.about-closing-veil {
  position: absolute !important; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #0f0e0b 0%, rgba(15,14,11,.94) 38%, rgba(15,14,11,.2) 78%);
}
.about-closing-inner { position: relative; z-index: 2; width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.about-closing-content { width: min(650px, 58%); padding: 100px 0; }
.about-closing-content .about-eyebrow { margin-bottom: 20px; }
.about-closing-content .about-section-title { margin-bottom: 24px; }
.about-closing-content .about-copy { max-width: 590px; }
.about-actions { display: flex !important; flex-direction: row !important; align-items: center; gap: 30px; margin-top: 38px; flex-wrap: wrap; }
.elementor-widget-button.about-button, .elementor-widget-button.about-text-link { background: none; border: none; padding: 0; width: auto; }
.about-button .elementor-button {
  display: inline-flex; min-height: 52px; align-items: center; justify-content: center;
  padding: 14px 26px; border: 1px solid #c99a3b; border-radius: 0; background: #c99a3b; color: #17130f;
  font-family: var(--body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .22s ease, color .22s ease, transform .16s ease;
}
.about-button .elementor-button:hover { background: transparent; color: #dfbd73; }
.about-text-link .elementor-button {
  background: none; border: none; padding: 0; border-radius: 0;
  color: #f0e4d2; font-family: var(--display-font); font-size: 1.12rem; text-transform: none;
  text-decoration: underline; text-underline-offset: 6px;
}
.about-text-link .elementor-button:hover { color: #dfbd73; background: none; }

@media (max-width: 980px) {
  .about-hero-inner, .about-journey-inner, .about-pillars-inner, .about-closing-inner { width: min(100% - 40px, 860px); }
  /* kept proportional to the reduced desktop ratio above (was .9fr 1.1fr) */
  .about-intro { grid-template-columns: .58fr 1fr; }
  .about-intro-content { padding: 52px 38px; }
  .about-pillar { grid-template-columns: 1fr 1fr; }
  .about-pillar-name { padding-left: 34px; }
  .about-pillar-summary { padding-inline: 26px; }
  .about-pillar-fact { grid-column: 2; padding: 0 26px 26px; border-left: 0; text-align: left; }
}
@media (max-width: 720px) {
  .about-hero-inner, .about-journey-inner, .about-pillars-inner, .about-closing-inner { width: min(100% - 36px, 640px); }
  .about-hero { min-height: 600px; }
  .about-hero-content { padding: 110px 0 58px; }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro-photo { min-height: 440px; }
  .about-journey { padding: 82px 0 88px; }
  .about-journey-head { text-align: left; margin-bottom: 52px; }
  .about-journey-head .about-eyebrow { justify-content: flex-start; }
  .about-timeline::before { left: 7px; }
  .about-milestone, .about-milestone:nth-child(even) {
    grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; min-height: 0; padding-bottom: 56px;
  }
  .about-milestone .about-ms-dot, .about-milestone:nth-child(even) .about-ms-dot { grid-column: 1; grid-row: 1; align-self: start; margin: 5px auto 0 0; }
  .about-milestone .about-ms-photo, .about-milestone:nth-child(even) .about-ms-photo { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; margin-bottom: 22px; }
  .about-milestone .about-ms-content, .about-milestone:nth-child(even) .about-ms-content { grid-column: 2; grid-row: 2; justify-self: stretch; width: 100%; text-align: left; }
  .about-milestone:nth-child(even) .about-ms-text { margin-left: 0; }
  .about-pillars { padding: 82px 0; }
  .about-pillars-head { display: block !important; }
  .about-pillars-note { margin-top: 22px; }
  .about-pillar { display: block !important; min-height: 0; padding: 190px 24px 28px; }
  .about-pillar-img { inset: 0 0 auto 0; width: 100%; height: 200px; }
  .about-pillar::after { background: linear-gradient(0deg, #17130f 0%, #17130f 48%, transparent 84%); }
  .about-pillar-name { padding: 0; }
  .about-pillar-summary { padding: 12px 0 18px; }
  .about-pillar-fact { min-width: 0; padding: 17px 0 0; border-top: 1px solid var(--ab-line); border-left: 0; text-align: left; }
  .about-closing { min-height: 640px; align-items: flex-end; }
  .about-closing-img { inset: 0; width: 100%; }
  .about-closing-veil { background: linear-gradient(0deg, #0f0e0b 0%, rgba(15,14,11,.86) 48%, rgba(15,14,11,.12) 100%); }
  .about-closing-content { width: 100%; padding: 240px 0 64px; }
  .about-actions { flex-direction: column !important; align-items: stretch; gap: 20px; }
  .about-button .elementor-button { width: 100%; }
}
/* @@END-BTCF-ABOUT-MODULE@@ */

/* ============================================================
   @@BTCF-RSVP-NAME-MODULE@@
   RSVP form First/Last name row (name.php override) + party-size clarity.
   ============================================================ */
.btcf-rsvp-name-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btcf-rsvp-name-row > .tribe-tickets__form-field { flex: 1 1 160px; min-width: 0; }
@media (max-width: 500px) { .btcf-rsvp-name-row > .tribe-tickets__form-field { flex: 1 1 100%; } }
/* ===== Inline RSVP form — brand-coherent styling (content.php override) ===== */
.btcf-rsvp-inline { width: 100%; }
.btcf-rsvp-inline .tribe-tickets__rsvp-form-button--cancel { display: none !important; }

/* CARD WIDTH — Event Tickets hard-caps the RSVP card in its own rsvp.css:
       .tribe-tickets__rsvp-wrapper { max-width: 580px; width: 100% }
   Inside our 1048px content column that left ~470px of dead space to the right
   of the card, and squeezed everything downstream of it: the form column to
   266px and the text inputs to 163px (the inputs are width:100% of a padded
   211px wrapper, so they were only thin because the CARD was). Lifting the cap
   fixes the whole chain in one go — the 42%/54% split below then resolves
   against the full column instead of 580px.
   Scoped to event pages (the only place an RSVP renders) and 0,2,0 + !important
   so it beats ET's 0,1,0 regardless of stylesheet order. */
body.single-tribe_events .tribe-tickets__rsvp-wrapper {
  max-width: none !important;
}

/* intentional panel padding */
.tribe-tickets__rsvp-wrapper { padding: clamp(26px, 4vw, 46px) !important; }

/* two balanced columns: details | form */
.tribe-tickets__rsvp.tribe-common-g-row { align-items: flex-start !important; }
.tribe-tickets__rsvp-details-wrapper { flex: 1 1 42% !important; max-width: 46% !important; }
.tribe-tickets__rsvp-actions-wrapper.btcf-rsvp-inline {
  flex: 1 1 54% !important;
  max-width: 54% !important;
  padding-left: clamp(24px, 4vw, 48px) !important;
}

/* form title → serif subheading, left aligned (was bold sans .tribe-common-h5) */
.tribe-tickets__rsvp-form-title,
.tribe-tickets__rsvp-form-title .tribe-common-h5,
.tribe-tickets__rsvp-wrapper .tribe-common-h5 {
  font-family: var(--display-font) !important;
  color: var(--tobacco) !important;
  font-weight: 600 !important;
  font-size: 1.55rem !important;
  line-height: 1.18 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tribe-tickets__rsvp-form-title { margin-bottom: 22px !important; }

/* field labels → left, uppercase Jost, tobacco-light */
.tribe-tickets__rsvp-form-wrapper .tribe-tickets__form-field-label {
  display: block !important;
  text-align: left !important;
  font-family: var(--body) !important;
  color: var(--tobacco-light) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
}

/* inputs → match the site's form fields */
.tribe-tickets__rsvp-form-wrapper .tribe-tickets__form-field-input {
  width: 100% !important;
  background: var(--ivory) !important;
  border: 1px solid rgba(44, 31, 14, 0.14) !important;
  border-radius: 0 !important;
  color: var(--tobacco) !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  padding: 13px 16px !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.tribe-tickets__rsvp-form-wrapper .tribe-tickets__form-field-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-muted) !important;
  outline: none !important;
}
.tribe-tickets__rsvp-form-wrapper input::placeholder { color: var(--tobacco-pale) !important; opacity: 1 !important; }

/* field spacing */
.tribe-tickets__rsvp-form-wrapper .tribe-tickets__form-field { margin-bottom: 16px !important; }

/* party size — constrained */
.tribe-tickets__rsvp-form-field-quantity { max-width: 110px !important; }

/* ET centres the RSVP form content (text-align:center on
   .tribe-tickets__rsvp-form-content / the field wrappers). That is invisible for
   the width:100% text inputs, but the Party Size box is a 110px inline-block, so
   it floated to the middle of its 376px field — 133px away from its own
   left-aligned "PARTY SIZE" label. Only showed up once the card was widened. */
.btcf-rsvp-inline .tribe-tickets__rsvp-form-content,
.btcf-rsvp-inline .tribe-tickets__form-field {
  text-align: left !important;
}

/* FINISH button — left-aligned, generous */
.btcf-rsvp-inline .tribe-tickets__rsvp-form-buttons { margin-top: 8px !important; justify-content: flex-start !important; }
/* ET ships the buttons as a right-aligned [Cancel] [Finish] pair and puts
   margin-left:20px on each to space them. We hide Cancel (see above), so that
   20px became a stray indent that knocked FINISH out of line with the fields
   above it. */
.btcf-rsvp-inline .tribe-tickets__rsvp-form-buttons > button { margin-left: 0 !important; }
.tribe-tickets__rsvp-wrapper .tribe-tickets__rsvp-form-button {
  padding: 15px 44px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
}

/* attendance number reads as "0" (Jost) not a serif "O" — beat the .tribe-common-h2 rule */
.tribe-tickets__rsvp-wrapper .tribe-tickets__rsvp-attendance-number,
.tribe-tickets__rsvp-wrapper .tribe-tickets__rsvp-attendance-number.tribe-common-h2 {
  font-family: var(--body) !important;
  font-weight: 700 !important;
}

/* stack on tablet/mobile */
@media (max-width: 860px) {
  .tribe-tickets__rsvp-details-wrapper,
  .tribe-tickets__rsvp-actions-wrapper.btcf-rsvp-inline {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
  }
}
/* @@END-BTCF-RSVP-NAME-MODULE@@ */

/* ==========================================================================
   @@BTCF-EVENTS-HERO-MODULE@@
   Events page (#295) hero.

   SCOPING NOTE: `.page-hero` is shared by 12 pages/templates (Contact, the 3
   legal pages, Cart, Checkout, My Account, 404, Search, Events Archive, The
   Book, Events). Every rule below is therefore scoped to the additive
   `.events-hero` class on section #btcf0010 — nothing here can reach the other
   dependents. The section keeps `page-hero`, so all base styles still apply and
   this module only layers the elevated treatment on top.

   Intent: bring the Events hero up to the `.about-hero` / `.speaking-hero`
   design language — taller cinematic frame, bottom-left anchored copy,
   directional veil, warmer film grade — while reusing the existing widgets.
   ========================================================================== */

.events-hero {
      min-height: min(620px, 74vh);
      background: #191611;
}
/* base is .e-con.page-hero{align-items:center;justify-content:center} (0,2,0);
   this is (0,3,0) so it wins without !important */
.e-con.page-hero.events-hero {
      align-items: flex-end;
      justify-content: flex-end;
}

/* film grade matched to .about-hero-bg */
.events-hero .page-hero-bg {
      background-position: 50% 38% !important;
      filter: saturate(0.68) sepia(0.2) contrast(1.04);
      transform: scale(1.06);
}

/* directional veil — dense at bottom-left under the copy, clearing to the right
   so the sunrise stays readable (same construction as .about-hero-veil) */
.events-hero .page-hero-overlay {
      background:
        linear-gradient(90deg, rgba(13,11,9,0.94) 0%, rgba(13,11,9,0.72) 40%, rgba(13,11,9,0.18) 78%),
        linear-gradient(0deg, rgba(13,11,9,0.82) 0%, transparent 54%);
}

/* bottom-left copy on the .about-hero-inner 1180px rhythm */
.events-hero .page-hero-content {
      max-width: none;
      width: min(1180px, calc(100% - 64px));
      margin: 0 auto;
      padding: 132px 0 88px;
      text-align: left;
}
.events-hero .e-con.page-hero-content {
      align-items: flex-start;
      justify-content: flex-end;
      text-align: left;
}
/* base centres the eyebrow via .page-hero .hero-eyebrow (0,2,0) */
.events-hero .e-con.page-hero-eyebrow,
.events-hero .hero-eyebrow {
      justify-content: flex-start;
}
.events-hero .page-hero-title {
      font-size: clamp(2.9rem, 6.4vw, 5.4rem);
      margin-bottom: 20px;
}
/* base is .page-hero .hero-rule{margin:0 auto 20px} — equal specificity (0,2,0),
   wins on source order because this module is appended last */
.events-hero .hero-rule {
      margin: 0 0 22px;
}
.events-hero .page-hero-subtitle {
      max-width: 640px;
}

/* Mobile: the 90deg veil is meaningless at narrow widths — swap to a vertical
   scrim. Kept in the 768 block so it also covers 481–768; verified under CDP
   device emulation at 390px, where the 480 block does fire (contrary to an
   older note in this file claiming otherwise — that was an artifact of the
   retired headless --window-size tooling, which CDP does not share). */
@media (max-width: 768px) {
      .events-hero {
            min-height: min(520px, 66vh);
      }
      /* Three stops, not two: dense at the bottom under the copy, clear through
         the middle for the image, then re-darkened at the very top. The top
         scrim is load-bearing — .site-header is a transparent overlay, and this
         hero's sunrise is at its brightest exactly where the logo sits, so
         without it the gold logo sub-line drops below legible contrast. */
      .events-hero .page-hero-overlay {
            background:
              linear-gradient(0deg, rgba(13,11,9,0.90) 0%, rgba(13,11,9,0.42) 56%, rgba(13,11,9,0.68) 100%);
      }
      .events-hero .page-hero-content {
            width: calc(100% - 40px);
            padding: 104px 0 64px;
      }
      /* The base PAGES module pins .page-hero-title AND its inner
         .elementor-heading-title with !important in BOTH the 768 (~4387) and
         480 (~4397) blocks to stop long titles overflowing. Two consequences
         for any scoped variant: (1) !important beats specificity, so the
         variant needs !important too; (2) the inner element's size is set
         directly, so it can't be reached through the wrapper-inherit bridge —
         the variant must name both selectors, exactly as the base does. */
      .events-hero .page-hero-title,
      .events-hero .page-hero-title .elementor-heading-title {
            font-size: clamp(2.1rem, 8.5vw, 2.9rem) !important;
      }
}

/* ==========================================================================
   @@BTCF-CONTACT-FAQ-MAP-MODULE@@
   Contact (#273) — FAQ and Map side by side. Client request 2026-07-15.

   SCOPING NOTE: `.faq-inner` is also used by Single Product #269 and The Book
   #275, and `.page-section-head` by those plus Cart #149. Every rule below is
   scoped to the additive `.faq-map-split` class on Contact's faq-inner
   (#btcf0059), so no other page can be reached. `.faq-inner` is retained on the
   element, so its base styling still applies underneath.

   STRUCTURE: the map head (#btcf0047) and google_maps widget (#btcf0048) were
   MOVED into .faq-inner — same elements, same IDs, same settings, nothing
   rebuilt. Their old wrapper section (an otherwise-empty `page-section alt
   tight`) was removed; left in place it would have rendered as a bare 90px
   cream band.

   Explicit row/column placement pins the two titles to row 1 and the two bodies
   to row 2, so the accordion and the map top-align instead of drifting apart as
   the accordion opens. DOM order stays FAQ title -> FAQ body -> map title ->
   map, which is also the correct screen-reader reading order.
   ========================================================================== */

.faq-map-split {
      max-width: 1180px;
      /* base is `.e-con.faq-inner{align-items:center}` + Elementor's own flex on
         .e-con — both 0,2,0, hence !important rather than a specificity war */
      display: grid !important;
      grid-template-columns: 1.05fr 1fr;
      grid-template-rows: auto 1fr;
      column-gap: 60px;
      row-gap: 26px;
}
.e-con.faq-map-split { align-items: start; }

.faq-map-split > .faq-header        { grid-column: 1; grid-row: 1; }
.faq-map-split > .faq-body          { grid-column: 1; grid-row: 2; }
.faq-map-split > .page-section-head { grid-column: 2; grid-row: 1; }
.faq-map-split > .contact-map-frame { grid-column: 2; grid-row: 2; }

/* NOTE: the accordion question-size fix used to live here, scoped to this split.
   It is now site-wide, next to the `.btcf-accordion .elementor-tab-title` rule it
   restores (search "TYPOGRAPHY BRIDGE"), because The Book #275 and Single Product
   #269 had the identical 41.6px bug. Nothing accordion-related is scoped to
   Contact any more. */

/* Both heads were centred for their old full-width sections; in a two-column
   split they read as column headings, so left-align them and their rules. */
.faq-map-split > .faq-header,
.faq-map-split > .page-section-head {
      text-align: left;
      margin-bottom: 0;
}
.faq-map-split > .e-con.faq-header,
.faq-map-split > .e-con.page-section-head { align-items: flex-start; }
.faq-map-split > .faq-header .section-label,
.faq-map-split > .page-section-head .section-label { justify-content: flex-start; }

/* Make the map fill its cell so its bottom edge lands with the accordion's.
   The widget div stretches with the grid row, but Elementor nests the iframe in
   an intermediate `.elementor-custom-embed` that keeps its own content height —
   so `height:100%` on the iframe resolved against THAT (420px), not the 804px
   cell, leaving a dead cream gap under the map. Pinning the embed with
   position:absolute/inset:0 against the already-position:relative widget div
   gives it a definite box to fill, which the iframe's 100% can then resolve
   against. min-height on the FRAME (not the iframe) keeps the map sane if the
   accordion column is ever shorter than the map. */
.faq-map-split > .contact-map-frame {
      align-self: stretch;
      position: relative;
      min-height: 420px;
}
.faq-map-split > .contact-map-frame .elementor-custom-embed {
      position: absolute;
      inset: 0;
      height: auto;
}
.faq-map-split > .contact-map-frame iframe {
      width: 100%;
      height: 100%;
      min-height: 0;
}

/* Stack below the desktop split. 1024 rather than 768: at tablet widths the map
   cell gets too narrow to read street labels. grid-row:auto returns them to DOM
   order — faq title, faq body, map title, map. */
@media (max-width: 1024px) {
      .faq-map-split {
            grid-template-columns: 1fr;
            grid-template-rows: none;
            row-gap: 18px;
      }
      .faq-map-split > .faq-header,
      .faq-map-split > .faq-body,
      .faq-map-split > .page-section-head,
      .faq-map-split > .contact-map-frame {
            grid-column: 1;
            grid-row: auto;
      }
      .faq-map-split > .page-section-head { margin-top: 30px; }
      /* min-height belongs on the frame, not the iframe — the iframe fills the
         absolutely-positioned embed, so a min-height there would fight it */
      .faq-map-split > .contact-map-frame { min-height: 320px; }
}

/* ==========================================================================
   @@BTCF-EVENT-HERO-MODULE@@
   Single event ("RSVP") pages — Contact-style hero. Client request 2026-07-15.

   The markup is rendered by btcf_event_hero_html() in functions.php using the
   EXISTING .page-hero classes, so nearly all of the look comes from the real
   design system (bg, overlay, title, subtitle, spacing) with no duplication.
   This module only supplies the few things that are normally provided by
   Elementor and therefore missing on hand-written markup:

     1. FLEX CENTRING. Contact's hero centres via `.e-con.page-hero`, which is
        Elementor's container class. A plain <section> never gets it, so the
        content would sit top-left. Mirrors that bridge exactly.
     2. THE DIVIDER LINES. `.hero-eyebrow-line` / `.hero-rule` are Elementor
        DIVIDER widgets — the visible line lives on an inner
        `.elementor-divider-separator`, and `.hero-rule` is even forced
        `background:transparent !important` for that variant. Plain elements
        need the line drawn on themselves.
     3. FULL-BLEED. TEC's Template_Bootstrap fires `tribe_events_before_html`
        inside <section class="tribe-events-pg-template">, which is ~1048px wide.
        Contact's hero is full-bleed, so break out of that wrapper.
   ========================================================================== */

/* 1. what `.e-con.page-hero` would have given us */
.event-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
}

/* 3. break out of .tribe-events-pg-template to full-bleed */
.event-hero {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
}
/* 100vw includes the scrollbar on platforms that reserve one, which would add a
   few px of horizontal scroll. `clip` (not `hidden`) prevents that without
   creating a scroll container — and it is scoped to event pages only. */
body.single-tribe_events {
      overflow-x: clip;
}

/* 2. divider lines, drawn directly since these are not Elementor widgets here */
.event-hero .hero-eyebrow-line {
      height: 0;
      border-top: 1px solid var(--gold);
}
.event-hero .hero-rule {
      width: 60px;
      height: 1px;
      /* the Elementor variant is forced transparent (see `.hero-rule,.gold-rule`)
         because its line is drawn on an inner separator — re-assert it here */
      background: linear-gradient(to right, var(--gold), transparent) !important;
      margin: 0 auto 20px;
}

/* TEC prints its own <h1> further down; the hero now carries the title, so the
   duplicate would be both a visual repeat and two h1s on one page. */
body.single-tribe_events .tribe-events-single-event-title {
      display: none;
}

/* ==========================================================================
   @@BTCF-CHECKOUT-SKIN-MODULE@@  (2026-07-17)
   Brand skin for the WooCommerce checkout so it reads as part of the site:
   ivory/cream surfaces, tobacco text, Cormorant headings, warm borders, gold
   accents + a gold PLACE ORDER button matching the site's other Woo buttons.
   Scoped to body.woocommerce-checkout so cart / my-account are untouched.
   NOTE: the card number / expiry / CVC fields live inside Stripe's own iframe
   and CANNOT be themed from here — those are set in the Stripe gateway's
   "appearance" options (WooCommerce -> Settings -> Payments -> Stripe).
   ========================================================================== */

/* — Section headings ("Billing details", "Your order", "Additional information") — */
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout #order_review_heading {
      font-family: var(--display-font);
      font-weight: 600;
      color: var(--tobacco);
      font-size: 1.65rem;
      letter-spacing: 0;
      line-height: 1.2;
      padding-bottom: 14px;
      margin-bottom: 24px;
      border-bottom: 1px solid var(--border-gold);
}

/* — Field labels — */
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-checkout .woocommerce-additional-fields label {
      font-family: var(--body);
      color: var(--tobacco-light);
      font-size: 0.76rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      margin-bottom: 6px;
}
body.woocommerce-checkout .required { color: var(--gold); border: 0; }

/* — Text inputs / textareas / selects — */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 0;
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.92rem;
      padding: 13px 16px;
      height: auto;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-muted);
      outline: none;
}
body.woocommerce-checkout ::placeholder { color: var(--tobacco-pale); opacity: 0.7; }
/* select2 (country / state) inner alignment */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: var(--tobacco); line-height: normal; padding: 0;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
body.woocommerce-checkout .select2-dropdown { border-color: var(--border-warm); border-radius: 0; }
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gold); }
/* brand accent on native checkboxes / radios */
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"] { accent-color: var(--gold); }

/* — Order review table — */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
      background: var(--cream);
      border: 1px solid var(--border-gold);
      border-radius: 2px;
      overflow: hidden;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
      font-family: var(--body);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--tobacco-light);
      padding: 16px 20px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
      font-family: var(--body);
      color: var(--tobacco);
      padding: 16px 20px;
      border-top: 1px solid var(--border-warm);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { font-weight: 500; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
      font-size: 0.72rem;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th {
      font-family: var(--display-font);
      font-size: 1.2rem;
      text-transform: none;
      letter-spacing: 0;
      color: var(--tobacco);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
      font-family: var(--display-font);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--gold);
}

/* — Coupon toggle notice + form — */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
      background: var(--parchment);
      border-top: 3px solid var(--gold);
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.85rem;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { color: var(--gold); }
body.woocommerce-checkout form.checkout a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle a,
body.woocommerce-checkout .woocommerce-checkout-review-order a {
      color: var(--gold);
      text-decoration: none;
}
body.woocommerce-checkout form.checkout a:hover { color: var(--gold-bright); text-decoration: underline; }

/* — Payment box — */
body.woocommerce-checkout #payment { background: var(--parchment); border: 1px solid var(--border-gold); }
body.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border-warm); }
body.woocommerce-checkout #payment ul.payment_methods li label {
      font-family: var(--body);
      color: var(--tobacco);
      font-weight: 500;
}
body.woocommerce-checkout #payment div.payment_box {
      background: var(--ivory);
      color: var(--tobacco-light);
      font-family: var(--body);
      font-size: 0.85rem;
}
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ivory); }

/* — PLACE ORDER button (matches the site's gold Woo buttons) — */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout .woocommerce #place_order {
      background: var(--gold) !important;
      color: var(--tobacco) !important;
      font-family: var(--body) !important;
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.16em !important;
      text-transform: uppercase !important;
      border: 2px solid var(--gold) !important;
      border-radius: 2px !important;
      padding: 18px 40px !important;
      width: 100%;
      transition: background 0.3s ease, color 0.3s ease !important;
}
body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-checkout .woocommerce #place_order:hover {
      background: transparent !important;
      color: var(--gold) !important;
}

/* — Notices / validation — */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info {
      font-family: var(--body);
      border-top-color: var(--gold);
}
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #b3261e; }

/* ==========================================================================
   @@BTCF-CART-SKIN-MODULE@@  (2026-07-17)
   Brand skin for the WooCommerce Cart page — mirrors the checkout skin so the
   two read as one flow. Scoped to body.woocommerce-cart (cart/my-account safe).
   ========================================================================== */

/* — "Cart totals" heading — */
body.woocommerce-cart .cart_totals h2 {
      font-family: var(--display-font);
      font-weight: 600;
      color: var(--tobacco);
      font-size: 1.65rem;
      letter-spacing: 0;
      padding-bottom: 14px;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border-gold);
}

/* — Cart items table + totals table — */
body.woocommerce-cart .woocommerce table.shop_table {
      background: var(--cream);
      border: 1px solid var(--border-gold);
      border-radius: 2px;
      overflow: hidden;
}
body.woocommerce-cart .woocommerce table.shop_table th {
      font-family: var(--body);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--tobacco-light);
      padding: 16px 18px;
      border: 0;
}
body.woocommerce-cart .woocommerce table.shop_table td {
      font-family: var(--body);
      color: var(--tobacco);
      padding: 18px;
      border-top: 1px solid var(--border-warm);
}
body.woocommerce-cart .woocommerce table.cart .product-name a,
body.woocommerce-cart .woocommerce table.cart a:not(.remove):not(.button) {
      color: var(--tobacco) !important;
      text-decoration: none;
      font-weight: 500;
      transition: color .3s ease;
}
body.woocommerce-cart .woocommerce table.cart .product-name a:hover { color: var(--gold) !important; }
body.woocommerce-cart .woocommerce table.cart .amount { color: var(--tobacco); }

/* remove × on the cart line */
body.woocommerce-cart .woocommerce table.cart a.remove {
      color: var(--gold) !important;
      border: 1px solid var(--border-gold);
      transition: background .25s ease, color .25s ease;
}
body.woocommerce-cart .woocommerce table.cart a.remove:hover { background: var(--gold) !important; color: #fff !important; }

/* quantity stepper */
body.woocommerce-cart .woocommerce .quantity input.qty {
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 0;
      color: var(--tobacco);
      font-family: var(--body);
      padding: 10px 8px;
}
body.woocommerce-cart .woocommerce .quantity input.qty:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-muted);
      outline: none;
}

/* coupon field */
body.woocommerce-cart .woocommerce .coupon input#coupon_code,
body.woocommerce-cart .woocommerce .coupon input.input-text {
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 0;
      color: var(--tobacco);
      font-family: var(--body);
      padding: 13px 16px;
}
body.woocommerce-cart .woocommerce .coupon input#coupon_code:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-muted);
      outline: none;
}

/* totals rows */
body.woocommerce-cart .cart_totals table.shop_table th { text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--tobacco); }
body.woocommerce-cart .cart_totals .order-total th {
      font-family: var(--display-font);
      font-size: 1.15rem;
      color: var(--tobacco);
}
body.woocommerce-cart .cart_totals .order-total .amount,
body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
      font-family: var(--display-font);
      font-size: 1.45rem;
      font-weight: 600;
      color: var(--gold);
}
body.woocommerce-cart .cart_totals a:not(.checkout-button) { color: var(--gold) !important; text-decoration: none; }
body.woocommerce-cart .cart_totals a:not(.checkout-button):hover { color: var(--gold-bright) !important; text-decoration: underline; }

/* — PROCEED TO CHECKOUT button (Woo ships this bright/coloured .alt button) — */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
      display: block;
      width: 100%;
      text-align: center;
      background: var(--gold) !important;
      color: var(--tobacco) !important;
      font-family: var(--body) !important;
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.16em !important;
      text-transform: uppercase !important;
      border: 2px solid var(--gold) !important;
      border-radius: 2px !important;
      padding: 18px 32px !important;
      transition: background .3s ease, color .3s ease !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
      background: transparent !important;
      color: var(--gold) !important;
}

/* update-cart / apply-coupon buttons match the site's gold Woo buttons */
body.woocommerce-cart .woocommerce table.cart td.actions .button,
body.woocommerce-cart .woocommerce .coupon .button {
      background: var(--gold) !important;
      color: var(--tobacco) !important;
      border: 2px solid var(--gold) !important;
      border-radius: 2px !important;
      font-family: var(--body) !important;
      font-size: 0.72rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      transition: background .3s ease, color .3s ease !important;
}
body.woocommerce-cart .woocommerce table.cart td.actions .button:hover,
body.woocommerce-cart .woocommerce .coupon .button:hover {
      background: transparent !important;
      color: var(--gold) !important;
}

/* ==========================================================================
   @@BTCF-MY-ACCOUNT-SKIN-MODULE@@  (2026-07-17)
   Brand skin for the WooCommerce My Account area so it reads as one flow with
   the cart / checkout skins: a card-based two-column dashboard (brand nav rail
   + content card), gold links (kills the stock #5bc0de blue), branded tables /
   address cards / forms, and a constrained, centred login card. Scoped to
   body.woocommerce-account so no other page is touched.
   ========================================================================== */

/* — Two-column dashboard shell (logged in). Woo floats the nav + content; we
     replace that with a real grid so the columns align and the content card no
     longer collapses next to a taller nav. — */
body.woocommerce-account.logged-in .woocommerce {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 40px;
      align-items: start;
      max-width: 1240px;
      margin: 8px auto 64px;
}
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after { content: none; display: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
      float: none !important;
      width: auto !important;
}

/* — Navigation rail as a brand card — */
body.woocommerce-account .woocommerce-MyAccount-navigation {
      background: var(--cream);
      border: 1px solid var(--border-gold);
      border-radius: 2px;
      padding: 8px;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 108px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
      list-style: none; margin: 0; padding: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
      border-top: 1px solid var(--border-warm);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
      display: block;
      position: relative;
      padding: 15px 18px;
      font-family: var(--body);
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--tobacco-light) !important;
      text-decoration: none;
      transition: color .25s ease, background .25s ease, padding-left .25s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
      color: var(--gold) !important;
      background: var(--gold-muted);
      padding-left: 24px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
      color: var(--tobacco) !important;
      background: var(--gold-muted);
      font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
      content: "";
      position: absolute;
      left: 0; top: 9px; bottom: 9px;
      width: 3px;
      background: var(--gold);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a {
      color: var(--tobacco-pale) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a:hover {
      color: var(--gold) !important;
}

/* — Content panel as a brand card — */
body.woocommerce-account .woocommerce-MyAccount-content {
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 2px;
      padding: 40px 44px !important;
      box-shadow: var(--shadow-sm);
      min-height: 380px;
      font-family: var(--body);
      color: var(--tobacco);
      line-height: 1.75;
}
/* The theme wraps the content in a white, bordered, padded box — that stacks a
   second border/card inside our content card. Neutralise it so our card is the
   single surface. */
body.woocommerce-account .woocommerce-MyAccount-content-wrapper {
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 1.1em; color: var(--tobacco-light); }
body.woocommerce-account .woocommerce-MyAccount-content p:last-child { margin-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-content strong { color: var(--tobacco); font-weight: 600; }
body.woocommerce-account .woocommerce-MyAccount-content mark {
      background: var(--gold-muted); color: var(--tobacco); padding: 0 4px;
}

/* — Kill the stock #5bc0de blue links site-account-wide; use the brand gold.
     A plugin/kit rule sets these blue with higher weight, so !important is
     required (same pattern the cart/checkout skins use). Buttons are excluded
     so the gold-button rules below still control their colour. — */
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button),
body.woocommerce-account .woocommerce-MyAccount-content-wrapper a:not(.button):not(.woocommerce-Button),
body.woocommerce-account .addresses a.edit,
body.woocommerce-account .woocommerce-Address a:not(.button) {
      color: var(--gold) !important;
      text-decoration: none;
      font-weight: 500;
      transition: color .25s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button):hover,
body.woocommerce-account .woocommerce-MyAccount-content-wrapper a:not(.button):not(.woocommerce-Button):hover {
      color: var(--gold-bright) !important;
      text-decoration: underline;
}

/* — Headings inside the content card — */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-Address-title h3 {
      font-family: var(--display-font);
      color: var(--tobacco);
      font-weight: 600;
      font-size: 1.5rem;
      line-height: 1.2;
      letter-spacing: 0;
      margin: 0 0 20px;
}

/* — Account tables (orders, downloads, order details) — */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .woocommerce-table--order-details {
      background: var(--cream);
      border: 1px solid var(--border-gold);
      border-radius: 2px;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      margin-bottom: 8px;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th,
body.woocommerce-account .woocommerce-orders-table th {
      font-family: var(--body);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--tobacco-light);
      padding: 15px 18px;
      border: 0;
      background: transparent;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
body.woocommerce-account .woocommerce-orders-table td {
      font-family: var(--body);
      color: var(--tobacco);
      padding: 16px 18px;
      border-top: 1px solid var(--border-warm);
      vertical-align: middle;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
      padding: 14px 18px; border-top: 1px solid var(--border-warm);
}

/* — Address grid — */
body.woocommerce-account .woocommerce-Addresses {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      margin: 4px 0 0;
}
body.woocommerce-account .woocommerce-Address {
      background: var(--cream);
      border: 1px solid var(--border-warm);
      border-radius: 2px;
      padding: 26px 28px;
}
body.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body.woocommerce-account .woocommerce-Address-title h3 { margin: 0; }
body.woocommerce-account .woocommerce-Address-title .edit {
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
body.woocommerce-account .woocommerce-Address address {
      font-style: normal;
      color: var(--tobacco-light);
      line-height: 1.9;
      font-size: 0.92rem;
}

/* — Forms (edit account, add / edit address, login, register, lost password) — */
body.woocommerce-account .woocommerce form .form-row label,
body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account .woocommerce-address-fields label,
body.woocommerce-account .woocommerce-form-login label,
body.woocommerce-account .woocommerce-form-register label {
      font-family: var(--body);
      color: var(--tobacco-light);
      font-size: 0.76rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      margin-bottom: 6px;
      display: block;
}
body.woocommerce-account .required { color: var(--gold); border: 0; }
body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce-Input.input-text,
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account select,
body.woocommerce-account textarea,
body.woocommerce-account .select2-container--default .select2-selection--single {
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 0;
      color: var(--tobacco);
      font-family: var(--body);
      font-size: 0.92rem;
      padding: 13px 16px;
      height: auto;
      box-sizing: border-box;
      transition: border-color .25s ease, box-shadow .25s ease;
}
body.woocommerce-account .woocommerce form .form-row input.input-text:focus,
body.woocommerce-account .woocommerce-Input.input-text:focus,
body.woocommerce-account input:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-muted);
      outline: none;
}
body.woocommerce-account ::placeholder { color: var(--tobacco-pale); opacity: 0.7; }
body.woocommerce-account input[type="checkbox"],
body.woocommerce-account input[type="radio"] { accent-color: var(--gold); }
body.woocommerce-account fieldset {
      border: 1px solid var(--border-warm);
      border-radius: 2px;
      padding: 22px 26px;
      margin-top: 28px;
}
body.woocommerce-account fieldset legend {
      font-family: var(--display-font); font-size: 1.25rem; color: var(--tobacco); padding: 0 8px;
}
body.woocommerce-account .woocommerce-form__label-for-checkbox span,
body.woocommerce-account .woocommerce-form-login__rememberme span { color: var(--tobacco-light); font-size: 0.85rem; }

/* — Buttons across the account area → the site's gold Woo button — */
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .woocommerce-Address a.edit,
body.woocommerce-account button[type="submit"],
body.woocommerce-account input[type="submit"].button,
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit {
      display: inline-block;
      background: var(--gold) !important;
      color: var(--tobacco) !important;
      font-family: var(--body) !important;
      font-size: 0.74rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      border: 2px solid var(--gold) !important;
      border-radius: 2px !important;
      padding: 15px 32px !important;
      cursor: pointer;
      transition: background .3s ease, color .3s ease !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-Address a.edit:hover,
body.woocommerce-account button[type="submit"]:hover,
body.woocommerce-account input[type="submit"].button:hover,
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-register__submit:hover {
      background: transparent !important;
      color: var(--gold) !important;
}

/* — Login / register (logged out): constrain to a centred card instead of a
     full-width 1240px band — */
body.woocommerce-account:not(.logged-in) .woocommerce { max-width: 540px; margin: 24px auto 72px; }
body.woocommerce-account:not(.logged-in) .woocommerce > h2,
body.woocommerce-account .u-column1 > h2,
body.woocommerce-account .u-column2 > h2 {
      font-family: var(--display-font);
      color: var(--tobacco);
      font-weight: 600;
      font-size: 1.9rem;
      text-align: center;
      margin: 0 0 22px;
}
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
      background: var(--ivory) !important;
      border: 1px solid var(--border-warm);
      border-radius: 2px;
      padding: 38px 40px !important;
      box-shadow: var(--shadow-sm);
}
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit { width: 100%; margin-top: 6px; }
body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { display: block; margin: 4px 0 18px; }
body.woocommerce-account .woocommerce-LostPassword {
      text-align: center; margin-top: 18px; font-size: 0.85rem;
}
body.woocommerce-account .woocommerce-LostPassword a { color: var(--gold); }

/* — Notices in the account area → brand — */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
      font-family: var(--body);
      border-top-color: var(--gold);
      background: var(--parchment);
      color: var(--tobacco);
}
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before { color: var(--gold); }

/* — Responsive: stack the dashboard on tablet / phone — */
@media (max-width: 768px) {
      body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 24px; }
      body.woocommerce-account .woocommerce-MyAccount-navigation { position: static; top: auto; }
      body.woocommerce-account .woocommerce-MyAccount-content { padding: 28px 22px; min-height: 0; }
      body.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
      body.woocommerce-account:not(.logged-in) .woocommerce { max-width: 100%; }
      body.woocommerce-account .woocommerce-form-login,
      body.woocommerce-account .woocommerce-form-register { padding: 26px 22px !important; }
}

/* ==========================================================================
   @@BTCF-REMOVE-X-CENTERING@@  (2026-07-17)
   Woo ships a.remove as a ~15x22 inline box with border-radius:100% — i.e. an
   ELLIPSE — and the "×" glyph baseline-aligns to the top, so it never looks
   centred. Force a true square, a real circle, and optically centre the glyph
   with flex. Un-scoped so the cart line, the mini-cart panel, and any other
   Woo remove control all get a clean centred × in a circle.
   ========================================================================== */
.woocommerce a.remove,
.woocommerce-cart-form a.remove,
.elementor-menu-cart__product a.remove,
.woocommerce-mini-cart-item a.remove,
a.remove.remove_from_cart_button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 24px !important;
      height: 24px !important;
      box-sizing: border-box !important;
      padding: 0 !important;
      border-radius: 50% !important;
      line-height: 1 !important;
      font-size: 17px !important;
      font-weight: 400 !important;
      text-align: center !important;
      text-decoration: none !important;
}

/* — Elementor mini-cart (slide panel) remove control. This one is NOT an
     a.remove — it is a `.elementor-menu-cart__product-remove` circle whose ×
     is drawn as two 1px ::before / ::after diagonal bars (the <a> inside is
     just an invisible click overlay). Those hair-thin default-grey bars render
     muddy — at some zooms they smear into a gold arc/wedge instead of a clean
     ×. Redraw them: a real gold-bordered circle with two crisp bars perfectly
     centred via translate(-50%,-50%) so the × stays symmetric at any size, and
     overflow:visible so the circle can never clip a bar into an arc. — */
.elementor-menu-cart__product-remove {
      width: 24px !important;
      height: 24px !important;
      border: 1px solid var(--border-gold) !important;
      border-radius: 50% !important;
      overflow: visible !important;
      background: transparent !important;
      transition: background .25s ease, border-color .25s ease !important;
}
.elementor-menu-cart__product-remove::before,
.elementor-menu-cart__product-remove::after {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: 11px !important;
      height: 1.5px !important;
      margin: 0 !important;
      border-radius: 1px !important;
      background: var(--gold) !important;
      transition: background .25s ease !important;
}
.elementor-menu-cart__product-remove::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.elementor-menu-cart__product-remove::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }
.elementor-menu-cart__product-remove:hover {
      background: var(--gold) !important;
      border-color: var(--gold) !important;
}
.elementor-menu-cart__product-remove:hover::before,
.elementor-menu-cart__product-remove:hover::after { background: #fff !important; }

/* ==========================================================================
   @@BTCF-CART-SPACING-POLISH@@  (2026-07-17)
   The cart read a touch tight and cramped. Give the item rows, the actions /
   coupon row, the two columns, and the totals card more proportional breathing
   room without changing the established brand look. Scoped to the cart page.
   ========================================================================== */
body.woocommerce-cart .woocommerce table.cart td { padding: 22px 20px; }
body.woocommerce-cart .woocommerce table.cart td.product-thumbnail img { width: 64px; height: auto; }
body.woocommerce-cart .woocommerce table.cart td.actions { padding: 22px 20px; }
body.woocommerce-cart .woocommerce table.cart td.actions .coupon { margin-bottom: 4px; }
body.woocommerce-cart .woocommerce table.cart td.actions .coupon input#coupon_code { margin-right: 10px; }
body.woocommerce-cart .woocommerce .cart-collaterals { margin-top: 40px; }
body.woocommerce-cart .woocommerce .cart_totals { padding: 4px 0; }
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td { padding: 16px 18px; }
body.woocommerce-cart .wc-proceed-to-checkout { padding-top: 26px; }
body.woocommerce-cart .woocommerce-cart-form { margin-bottom: 8px; }

/* ==========================================================================
   @@BTCF-MINICART-DOUBLE-X-FIX@@  (2026-07-18)
   The mini-cart (slide panel) item-remove control showed TWO overlapping ×.
   Elementor draws the × as ::before/::after bars on the .__product-remove
   WRAPPER (redrawn gold in @@BTCF-REMOVE-X-CENTERING@@). On LIVE the inner
   remove link is WooCommerce-core markup — class="remove remove_from_cart_button"
   carrying its own literal &times; glyph — which the centering rule then shapes
   into a SECOND gold circle-×, stacked on the wrapper's ×. (Local ships the link
   empty with no .remove class, so local only ever shows one × — hence live-only.)
   Fix: hide the inner link's glyph so only the single wrapper × remains. The link
   keeps its full 24px box, so it stays a clickable remove target. Matches on
   `a.remove` only, so it is a no-op on local (link has no .remove class). Verified
   by rendering the real live markup with live CSS: two × -> one clean ×.
   ========================================================================== */
.elementor-menu-cart__product-remove a.remove {
      font-size: 0 !important;
      color: transparent !important;
      border: 0 !important;
      background: none !important;
}
.elementor-menu-cart__product-remove a.remove::before,
.elementor-menu-cart__product-remove a.remove::after {
      content: none !important;
}

/* ==========================================================================
   @@BTCF-VIDEO-LIGHTBOX-EXIT-MODULE@@  (2026-07-20)

   Client report: "when I click the videos there's no indication how to exit."

   Diagnosed against the real rendered lightbox (headless CDP probe), two causes,
   both real and both fixed here:

   (a) STACKING. Elementor's lightbox is z-index 9998. The site header is
       z-index 99999, so the header sat ON TOP of the open lightbox: logo, nav,
       ORDER NOW and the cart icon all rendered at full brightness over the
       modal while the rest of the page was dimmed. That reads as "the video
       just appeared on the page", not as a modal you can close, and it puts
       Elementor's close control right next to the cart icon where it competes
       with the header's own buttons. Raising the lightbox above the header
       lets the scrim cover everything, which is what makes a modal read as
       closeable.

   (b) THE CLOSE CONTROL ITSELF. Elementor ships a 20px, near-white glyph on a
       transparent background (measured: 30x30 box, rgba(237,237,237,.9), no
       backing). Over a busy photographic hero at 55% scrim it is genuinely
       easy to miss. Redrawn below as a 48px circle with its own dark backing
       and a gold border, so it reads as a button at any zoom and against any
       frame of any video.

   The scrim is also deepened (was tobacco at 55%, which left the page clearly
   legible behind the video) so the modal separates properly from the page.

   Esc already closes the lightbox — that is Elementor behaviour and the control
   is already labelled "Close (Esc)" for screen readers. A visible hint is added
   next to the button for sighted users.
   ========================================================================== */

/* (a) above the fixed site header (z-index 99999) so the scrim covers the page */
.elementor-lightbox {
      z-index: 100000 !important;
      background-color: rgba(20, 14, 6, 0.92) !important;
}

/* (b) close control: a real, obvious button instead of a bare hairline glyph */
.elementor-lightbox .dialog-close-button,
.elementor-lightbox .dialog-lightbox-close-button {
      top: 22px !important;
      right: 26px !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: 1px solid var(--gold);
      border-radius: 50%;
      background: rgba(20, 14, 6, 0.72);
      color: var(--parchment) !important;
      opacity: 1 !important;
      cursor: pointer;
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.elementor-lightbox .dialog-close-button:hover,
.elementor-lightbox .dialog-lightbox-close-button:hover,
.elementor-lightbox .dialog-close-button:focus-visible,
.elementor-lightbox .dialog-lightbox-close-button:focus-visible {
      background: var(--gold);
      border-color: var(--gold-bright);
      color: #fff !important;
      transform: scale(1.06);
}
/* the glyph is an inline SVG (e-font-icon-svg); size it explicitly */
.elementor-lightbox .dialog-close-button svg,
.elementor-lightbox .dialog-lightbox-close-button svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
}

/* visible "Esc" affordance beside the button (hidden on small screens where
   there is no keyboard to press it with) */
.elementor-lightbox .dialog-lightbox-close-button::after {
      content: "ESC";
      position: absolute;
      right: 58px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--body);
      font-size: .62rem;
      letter-spacing: .18em;
      color: rgba(247, 240, 227, 0.75);
      pointer-events: none;
      white-space: nowrap;
}
@media (max-width: 1024px) {
      .elementor-lightbox .dialog-lightbox-close-button::after { content: none; }
      .elementor-lightbox .dialog-close-button,
      .elementor-lightbox .dialog-lightbox-close-button {
            top: 14px !important;
            right: 14px !important;
            width: 44px;
            height: 44px;
      }
}

/* ==========================================================================
   @@BTCF-EVENTS-COMINGSOON-MODULE@@  (2026-07-20)

   Shown when the site has no upcoming published event (body.btcf-no-events,
   set in the child theme's functions.php). Covers BOTH surfaces that list
   events, because both use the `.events-list` container:

     - Home page  -> four HARD-CODED demo event cards (placeholder content from
                     the design; they would otherwise publish to live as if they
                     were real scheduled events).
     - /events    -> a dynamic Loop Grid, which with nothing to loop collapses
                     to an empty gap under the hero and reads as broken.

   Hiding is done with a body class so neither page has to be edited in
   Elementor — which keeps this a theme-zip deploy with no database changes,
   and means it reverses itself the moment a real event is published.

   The panel reuses the existing hero-eyebrow / hero-rule design-system pieces,
   so it inherits the real styling rather than duplicating it.
   ========================================================================== */

/* hide the event list (static cards + loop grid) while nothing is scheduled */
body.btcf-no-events .events-list {
      display: none !important;
}

/* The "View Full Calendar" button (on /events) would lead to an empty calendar.
   NOTE the :has() — `.btn-book-secondary` is the Elementor button WRAPPER, while
   the href lives on the inner `.elementor-button` anchor, so a plain
   `.btn-book-secondary[href*=calendar]` matches nothing. This is the same
   wrapper-vs-inner trap documented throughout this file. Matching on the href
   rather than the page ID keeps it working on live, where post IDs differ.
   The home page's own "Book Dr. Crawford" button is deliberately left visible. */
body.btcf-no-events .events-header .btn-book-secondary:has(a[href*="calendar"]) {
      display: none !important;
}

.btcf-events-comingsoon {
      width: 100%;
      padding: 8px 0 4px;
}

.btcf-events-comingsoon-inner {
      max-width: 720px;
      margin: 0 auto;
      padding: 56px 48px 52px;
      text-align: center;
      background: var(--cream);
      border: 1px solid var(--parchment-warm);
      border-radius: 2px;
      box-shadow: var(--shadow-sm);
}

/* the eyebrow is a flex row (line + label) — centre it in this context */
.btcf-events-comingsoon .btcf-comingsoon-eyebrow {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 18px;
}

.btcf-comingsoon-title {
      font-family: var(--display-font);
      font-size: clamp(1.9rem, 3vw, 2.6rem);
      font-weight: 600;
      line-height: 1.15;
      color: var(--tobacco);
      margin: 0;
}
.btcf-comingsoon-title em {
      font-style: italic;
      color: var(--gold);
}

/* the shared .hero-rule draws its own line here (no Elementor divider inside) */
.btcf-events-comingsoon .hero-rule {
      width: 64px;
      height: 1px;
      margin: 22px auto;
      background: var(--gold) !important;
}

.btcf-comingsoon-body {
      font-family: var(--body);
      font-size: .95rem;
      font-weight: 300;
      line-height: 1.85;
      color: var(--tobacco-light);
      max-width: 56ch;
      margin: 0 auto;
}

.btcf-comingsoon-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 34px;
}

.btcf-comingsoon-btn {
      display: inline-block;
      padding: 15px 32px;
      font-family: var(--body);
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 1px;
      transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btcf-comingsoon-btn--primary {
      background: var(--gold);
      color: #fff !important;
      border: 1px solid var(--gold);
}
.btcf-comingsoon-btn--primary:hover {
      background: var(--tobacco);
      border-color: var(--tobacco);
      color: #fff !important;
}
.btcf-comingsoon-btn--ghost {
      background: transparent;
      color: var(--tobacco) !important;
      border: 1px solid var(--tobacco-pale);
}
.btcf-comingsoon-btn--ghost:hover {
      background: var(--tobacco);
      border-color: var(--tobacco);
      color: #fff !important;
}

@media (max-width: 768px) {
      .btcf-events-comingsoon-inner { padding: 40px 24px 36px; }
      .btcf-comingsoon-actions { flex-direction: column; gap: 12px; }
      .btcf-comingsoon-btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   @@BTCF-BUTTON-HOVER-FIX-MODULE@@  (2026-07-20)

   Client report: hovering "SHOP THE BOOK" turned the whole button dark — text
   included — so the label disappeared.

   CAUSE (measured with the hover state forced, not inferred): every button
   family sets its base background/border with the `background: … !important`
   SHORTHAND, while the matching :hover rule sets `background: var(--gold)` with
   NO !important. An !important declaration always beats a non-important one no
   matter how specific the selector, so the hover background was discarded and
   the button kept its tobacco base.

   The text colour, however, is NOT !important in the base rule, so the hover's
   `color: var(--tobacco)` did win on specificity. Net result on .btn-book-primary:

       normal  bg #2c1f0e  /  text #f7f0e3   -> readable
       hover   bg #2c1f0e  /  text #2c1f0e   -> dark on dark, label invisible

   The same flaw silently affected the other three families — their hovers were
   simply doing nothing visible rather than breaking legibility:
     .btn-primary        background AND border-color both blocked (no hover feedback at all)
     .btn-secondary      border-color blocked (only the text colour changed)
     .btn-book-secondary border-color blocked (only the text colour changed)

   This module restores the ORIGINAL mockup hover behaviour (see the source
   .btn-book-primary:hover rule near the top of this file) by matching the base
   rule's !important. It is a bug fix, not a redesign — no hover colour is
   changed from what the design already specified.

   Contrast check on the fixed state: gold #b8892a behind tobacco #2c1f0e text
   is ~5.1:1, which passes WCAG AA for this size and weight.
   ========================================================================== */

/* Book primary — the reported bug: gold fill, dark label (was dark on dark) */
.btn-book-primary .elementor-button:hover,
.btn-book-primary .elementor-button:focus-visible {
      background: var(--gold) !important;
      border-color: var(--gold) !important;
      color: var(--tobacco) !important;
      box-shadow: 0 6px 28px rgba(184, 137, 42, 0.4);
}

/* Primary (gold) — hover brightened, was doing nothing */
.btn-primary .elementor-button:hover,
.btn-primary .elementor-button:focus-visible {
      background: var(--gold-bright) !important;
      border-color: var(--gold-bright) !important;
}

/* Secondary (outline on dark) — gold edge, was border-blocked */
.btn-secondary .elementor-button:hover,
.btn-secondary .elementor-button:focus-visible {
      border-color: var(--gold) !important;
      color: var(--gold-pale) !important;
}

/* Book secondary (outline on light) — gold edge + the design's faint gold wash */
.btn-book-secondary .elementor-button:hover,
.btn-book-secondary .elementor-button:focus-visible {
      border-color: var(--gold) !important;
      background: rgba(184, 137, 42, 0.04) !important;
      color: var(--gold) !important;
}

/* ==========================================================================
   @@BTCF-MINICART-REMOVE-HITAREA-MODULE@@  (2026-07-21)

   Client report: "when I hover the close icon on the right slide for the cart
   it would give me 2 close icons."

   ROOT CAUSE — our own hover rule resurrects Elementor's invisible click
   overlay. Elementor's slide-cart draws the item-remove control as a WRAPPER
   `.elementor-menu-cart__product-remove` whose × is two ::before/::after bars
   (redrawn gold in @@BTCF-REMOVE-X-CENTERING@@). The <a> inside is NOT meant to
   be seen at all — Elementor ships it as `position:absolute; width:100%;
   height:100%; opacity:0; z-index:2`, i.e. a transparent hit area laid over the
   wrapper's ×. Verified in elementor-pro/assets/css/widget-woocommerce-menu-cart
   .min.css and modules/woocommerce/wc-templates/cart/mini-cart.php:51.

   But the original Woo skin styles that link as if it were the visible control:

       btcf.css:4647  .elementor-menu-cart__product a.remove
                      { border: 1px solid var(--border-gold) !important;
                        opacity: 0.85 !important; }
       btcf.css:4654  .elementor-menu-cart__product a.remove:hover
                      { background: var(--gold) !important; opacity: 1 !important; }

   and @@BTCF-REMOVE-X-CENTERING@@ additionally forces it to 24x24 with
   `border-radius:50%`. So the overlay becomes a SECOND gold circle sitting on
   top of, and slightly offset from, the wrapper's × — which is why the client
   sees two, and why the hovered one reads as a "›": the second circle covers
   the left half of the white × underneath, leaving only its right stroke.

   Why it only shows on HOVER: @@BTCF-MINICART-DOUBLE-X-FIX@@ (2026-07-18)
   already neutralises the overlay at rest with `background:none; border:0` at
   specificity (0,2,1) — but the :hover rule at 4654 is (0,3,1) and wins, so
   `background: var(--gold) !important` and `opacity: 1 !important` come back
   the moment the pointer lands. The 07-18 fix was simply under-specific, and it
   also only matched `a.remove`, which is the class the LIVE markup carries.

   Fix: stop styling the overlay entirely and restore Elementor's intent — a
   fully transparent, full-size hit area — across every state (rest, hover,
   focus, active). Scoped by CHILD COMBINATOR to links inside
   `.elementor-menu-cart__product-remove`, and matched on the element rather
   than on any class, so it holds for BOTH markup shapes: local renders the
   links as `.elementor_remove_from_cart_button` / `.remove_from_cart_button`
   (no `.remove` class), live renders them carrying `.remove` via the
   `woocommerce_cart_item_remove_link` filter. The wrapper class is REPEATED
   THREE TIMES to reach (0,4,1) — beating the 4654 hover rule on specificity,
   not merely on file order. Repeating the class rather than prefixing an
   ancestor is deliberate: it depends on nothing but the wrapper itself, so it
   survives whichever of the two markup shapes live actually renders.

   SCOPING NOTE: this touches ONLY the Elementor slide-cart panel. The cart-page
   line remove (`body.woocommerce-cart table.cart a.remove`, btcf.css:6457) and
   any bare `li.woocommerce-mini-cart-item a.remove` rendered WITHOUT Elementor's
   wrapper keep their existing gold circle-× — those are genuine single controls
   and must stay visible.

   The control stays fully clickable and keeps its aria-label; only its paint is
   removed. Keyboard users are covered by the :focus-within rule at the end,
   which lights up the WRAPPER instead — previously tabbing to the remove link
   gave no visible feedback at all.
   ========================================================================== */
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a,
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a:hover,
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a:focus,
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a:focus-visible,
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a:active {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      outline: none !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      text-decoration: none !important;
      opacity: 0 !important;
      z-index: 2 !important;
}

/* The overlay may also carry its own glyph (live markup ships a literal
   `&times;` inside the link). font-size:0 hides text, but kill any generated
   content too so it can never redraw a second ×. */
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a::before,
.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove.elementor-menu-cart__product-remove > a::after {
      content: none !important;
      display: none !important;
}

/* Keyboard parity: the link is invisible, so surface focus on the wrapper —
   same treatment as :hover, which is defined in @@BTCF-REMOVE-X-CENTERING@@. */
.elementor-menu-cart__product-remove:focus-within {
      background: var(--gold) !important;
      border-color: var(--gold) !important;
      outline: 2px solid var(--gold) !important;
      outline-offset: 2px !important;
}
.elementor-menu-cart__product-remove:focus-within::before,
.elementor-menu-cart__product-remove:focus-within::after {
      background: #fff !important;
}
/* @@END-BTCF-MINICART-REMOVE-HITAREA-MODULE@@ */

/* ==========================================================================
   @@BTCF-HERO-ARTWORK-2026-07-MODULE@@
   Added 2026-07-27. Replaces the homepage hero artwork and crops its lower
   edge away so only the overlay occupies the bottom of the hero.

   WHY THE IMAGE LIVES IN THE THEME
   The artwork ships at assets/img/btcf-hero.webp and is referenced with a
   path relative to this stylesheet. That makes the hero deploy with the theme
   zip alone: no Media Library upload, no attachment id, no absolute URL, and
   nothing that differs between local and live.

   WHY !important
   The hero container (Elementor element btcf0001, class .hero-bg) still
   carries its own background_image setting, and Elementor prints that as
   .elementor-element-btcf0001{background-image:...} in the per-post CSS file,
   which loads AFTER btcf.css at equal specificity. Without !important the old
   artwork wins. Consequence worth knowing: the hero image is now theme
   controlled. To change it, replace assets/img/btcf-hero.webp - changing the
   background in the Elementor editor will no longer have any effect.

   HOW THE LOWER EDGE IS CUT
   The source artwork fades into a dark, low-detail band across roughly its
   bottom 15 percent (sampled row brightness: 80% height = 43, 85% = 23,
   90% = 16, 95% = 13 out of 255). Stacked under .hero-overlay-2, which is
   already 0.85 alpha at the foot of the hero, that band read as dead mud.

   background-size:cover alone cannot remove it: the hero is taller than the
   artwork is proportionally, so cover scales to fill the height and crops the
   sides instead - the full image height always shows. Instead the background
   layer is extended BELOW the hero (bottom:-16%) while the hero keeps
   overflow:hidden, and the artwork is anchored to the top. The layer is then
   116% of the hero's height, of which only the top 100% is visible, so the
   bottom of the artwork is clipped no matter the viewport. Measured cut is
   ~14% at 1440x900, 1440x800 and 390x844, and ~25% on a 2560x1080 ultrawide -
   always from the bottom, because of the top anchor.
   ========================================================================== */
.hero-bg {
      background-image: url('img/btcf-hero.webp') !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;

      /* Extend the layer past the foot of the hero so its lower edge is
         clipped by .hero{overflow:hidden}. Keep top/left/right pinned. */
      inset: 0 0 -16% 0;
}

/* The artwork is supplied at 1280x720. On a wide desktop the hero scales it
   well past 1:1, so disable the breathe zoom above 1600px, where the extra
   1.08x magnification is what tips it from soft into visibly soft. Motion is
   retained at the sizes where the image still has pixels to spare. */
@media (min-width: 1600px) {
  .hero-bg { animation: none; }
}

/* Narrow viewports crop hard on the horizontal axis. Centre-cropping lands
   just right of Dr. Crawford's face (the head spans roughly 33-63% of the
   artwork's width), so bias the focal point left to keep the portrait in
   frame rather than the empty field beside it. */
@media (max-width: 768px) {
  .hero-bg { background-position: 42% top !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
}
/* @@END-BTCF-HERO-ARTWORK-2026-07-MODULE@@ */

/* ==========================================================================
   @@BTCF-FORM-MESSAGE-MODULE@@
   Added 2026-07-27. Brand styling for the message a form shows after it is
   submitted - previously this was the only part of the site with no design
   applied to it at all.

   WHAT ELEMENTOR SHIPS
   On success the frontend appends, to the <form> element itself:
       <div class="elementor-message elementor-message-success" role="alert">
   on failure the same with .elementor-message-danger, and for per-field
   validation a <span> that additionally carries .elementor-help-inline
   .elementor-form-help-inline. The only styling Elementor gives any of them is
       .elementor-message{font-size:1em;line-height:1;margin:10px 0}
       .elementor-message.form-message-success{color:#5cb85c}
   plus an eicons glyph on ::before. So the confirmation rendered as bootstrap
   green body text hard against the submit button.

   WHY IT IS AN OPAQUE CARD
   These forms sit on both surfaces: .contact-form is a light cream card, while
   .newsletter-form, .movement-form and the popup forms sit on dark tobacco
   backgrounds. A message tinted to suit one is illegible on the other, so it
   carries its own ivory surface and reads correctly on either.
   ========================================================================== */

/* Block-level messages only. The :not() keeps inline field validation out -
   it is handled separately at the end of this module and must stay small. */
.elementor-message:not(.elementor-help-inline) {
      display: block;
      margin: 26px 0 0;
      padding: 18px 22px 18px 24px;
      background: var(--ivory);
      border: 1px solid var(--border-gold);
      border-left: 4px solid var(--gold);
      border-radius: 3px;
      box-shadow: var(--shadow-sm);

      font-family: var(--body);
      font-size: 0.86rem;
      font-weight: 400;
      /* Elementor forces line-height:1, which crushes the second sentence
         against the first once the message wraps to more than one line. */
      line-height: 1.65 !important;
      letter-spacing: 0.01em;
      color: var(--tobacco);
      text-align: left;
}

/* Success keeps the gold accent set above. Failure shifts to a warm brick that
   belongs to this palette rather than Elementor's #d9534f. */
.elementor-message.elementor-message-danger:not(.elementor-help-inline) {
      border-left-color: #a4402c;
      color: var(--tobacco);
}

/* Elementor colours the text through .elementor-message.elementor-message-success
   when the widget's own Success Message colour control is set, which would
   override the card's body colour. Pin both states back to tobacco. */
.elementor-message.elementor-message-success,
.elementor-message.elementor-message-danger { color: var(--tobacco); }

/* The marker glyph.
   Elementor sets content:"\e90e" in the eicons webfont, but eicons is only
   enqueued on pages that actually render an icon widget - on /contact the
   success card showed an empty tofu box instead of a tick. Both the character
   and the font stack are therefore replaced with ones that need no webfont:
   U+2713 / U+0021 resolve from the system fallback everywhere. */
.elementor-message:not(.elementor-help-inline)::before {
      content: "\2713";
      font-family: var(--body);
      font-weight: 600;
      color: var(--gold);
      font-size: 1rem;
      line-height: 1;
      vertical-align: -1px;
      margin-inline-end: 10px;
}
.elementor-message.elementor-message-danger:not(.elementor-help-inline)::before {
      content: "\0021";
      color: #a4402c;
}
/* Same treatment when the SVG icon experiment is on and Elementor swaps the
   glyph for an inline <svg> under .elementor-message-svg. */
.elementor-message.elementor-message-svg:not(.elementor-help-inline) > svg {
      width: 1.05rem; height: 1.05rem;
      fill: var(--gold);
      vertical-align: -3px;
      margin-inline-end: 10px;
}
.elementor-message.elementor-message-danger.elementor-message-svg > svg { fill: #a4402c; }

/* Per-field validation stays inline and compact - no card, no shadow. */
.elementor-message.elementor-help-inline {
      display: block;
      margin: 7px 0 0;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
      font-family: var(--body);
      font-size: 0.72rem;
      line-height: 1.45 !important;
      letter-spacing: 0.04em;
      color: #a4402c;
}
/* Same webfont problem as the block message above: the inline variant keeps
   Elementor's eicons glyph and renders a tofu box wherever eicons is not
   enqueued. Replace it with a plain marker from the system fallback. */
.elementor-message.elementor-help-inline::before {
      content: "\0021";
      font-family: var(--body);
      font-weight: 600;
      color: #a4402c;
      margin-inline-end: 6px;
}

/* The newsletter and movement forms are horizontal rows; their message must
   drop onto its own full-width line instead of squeezing in beside the input. */
.newsletter-form .elementor-message:not(.elementor-help-inline),
.movement-form .elementor-message:not(.elementor-help-inline) {
      flex: 1 0 100%;
      width: 100%;
      margin-top: 22px;
}

/* Inside a popup the card would otherwise touch the modal edge. */
.elementor-popup-modal .elementor-message:not(.elementor-help-inline) {
      margin-top: 20px;
}

@media (max-width: 768px) {
  .elementor-message:not(.elementor-help-inline) {
        margin-top: 20px;
        padding: 16px 18px 16px 20px;
        font-size: 0.82rem;
  }
}
/* @@END-BTCF-FORM-MESSAGE-MODULE@@ */

/* ==========================================================================
   @@BTCF-ORDER-CONFIRMATION-MODULE@@
   Added 2026-07-27. Spacing and colour for the screen a customer lands on
   after paying (/checkout/order-received/) and for the WooCommerce order
   tables reused on My Account.

   THE ACTUAL BUG
   .woo-frame .woocommerce-thankyou-order-received sets
   font-size:clamp(1.8rem,3.4vw,2.8rem) but never sets line-height, so the
   paragraph inherited a computed line-height of 21px. Measured on the live
   template: font-size 44.8px inside a 21px line box. The glyphs overflowed
   their own box in both directions, which is why the headline sat on top of
   the breadcrumb bar above it and left no gap at all before the order card
   below - the element only occupied 21px of layout. Everything else in this
   module is the surrounding rhythm that was never written.
   ========================================================================== */

/* --- The confirmation headline ---------------------------------------- */
.woo-frame .woocommerce-thankyou-order-received {
      line-height: 1.2;
      margin: 0 0 14px;
      padding: 0;
      max-width: 22ch;
      margin-inline: auto;
}

/* Supporting line under the headline (added via the
   woocommerce_thankyou_order_received_text filter in functions.php). */
.woo-frame .btcf-order-received-note {
      display: block;
      max-width: 48ch;
      margin: 0 auto;
      font-family: var(--body);
      font-size: 0.86rem;
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: 0.01em;
      color: var(--tobacco-pale);
      text-align: center;
}

/* --- Order overview card ---------------------------------------------- */
.woo-frame .woocommerce-order-overview {
      margin: 34px 0 46px;
      gap: 20px 44px;
}

/* --- Section headings ("Order details", "Billing address") ------------- */
.woo-frame .woocommerce-order h2,
.woo-frame .woocommerce-order .woocommerce-column__title,
.woo-frame .woocommerce-customer-details h2 {
      font-family: var(--display-font);
      font-weight: 600;
      font-size: 1.6rem;
      line-height: 1.25;
      color: var(--tobacco);
      margin: 0 0 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-warm);
}
.woo-frame .woocommerce-order .woocommerce-order-details,
.woo-frame .woocommerce-order .woocommerce-customer-details { margin-top: 46px; }

/* --- Order tables ------------------------------------------------------
   Woo ships th/td with padding-left:0, so every cell sat flush against the
   table's left border, and the header row had no padding-top at all. */
.woo-frame .woocommerce-order table.shop_table th,
.woo-frame .woocommerce-order table.shop_table td {
      padding: 16px 22px !important;
      vertical-align: top;
      border-color: var(--border-warm);
}
.woo-frame .woocommerce-order table.shop_table thead th {
      padding-top: 18px !important;
      padding-bottom: 18px !important;
      background: var(--parchment);
      border-bottom: 1px solid var(--border-warm);
}
.woo-frame .woocommerce-order table.shop_table tfoot th,
.woo-frame .woocommerce-order table.shop_table tfoot td {
      padding-top: 14px !important;
      padding-bottom: 14px !important;
}
.woo-frame .woocommerce-order table.shop_table tfoot tr:last-child th,
.woo-frame .woocommerce-order table.shop_table tfoot tr:last-child td {
      padding-bottom: 18px !important;
      border-top: 1px solid var(--border-warm);
}

/* Product links render in WooCommerce/kit blue (#5bc0de) exactly as they did
   on My Account. Same fix as @@BTCF-MY-ACCOUNT-SKIN-MODULE@@ - the kit rule
   out-specifies a plain scoped selector, so !important is required. */
.woo-frame .woocommerce-order table.shop_table a:not(.button) {
      color: var(--gold) !important;
      text-decoration: none;
      transition: color .25s ease;
}
.woo-frame .woocommerce-order table.shop_table a:not(.button):hover {
      color: var(--tobacco) !important;
      text-decoration: underline;
}

/* Totals in the brand's serif, matching the cart and checkout skins. */
.woo-frame .woocommerce-order table.shop_table tfoot .woocommerce-Price-amount {
      font-family: var(--display-font);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--gold);
}
.woo-frame .woocommerce-order table.shop_table tfoot tr:last-child .woocommerce-Price-amount {
      font-size: 1.35rem;
}

/* --- Billing / shipping address blocks -------------------------------- */
.woo-frame .woocommerce-customer-details .woocommerce-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 32px;
}
.woo-frame .woocommerce-customer-details address {
      font-family: var(--body);
      font-size: 0.9rem;
      line-height: 1.85;
      font-style: normal;
      color: var(--tobacco-mid);
      background: var(--ivory);
      border: 1px solid var(--border-warm);
      border-radius: 6px;
      padding: 22px 26px;
}

/* --- Page rhythm -------------------------------------------------------
   The order-received screen is shorter than cart or checkout, so the shared
   .woo-frame footprint (90px / 120px) left a long empty band between the last
   address card and the trust badges below it. */
body.woocommerce-order-received .woo-frame { padding: 72px 0 84px; }

@media (max-width: 768px) {
  body.woocommerce-order-received .woo-frame { padding: 52px 0 64px; }
  .woo-frame .woocommerce-order h2,
  .woo-frame .woocommerce-order .woocommerce-column__title,
  .woo-frame .woocommerce-customer-details h2 { font-size: 1.35rem; }
  .woo-frame .woocommerce-order .woocommerce-order-details,
  .woo-frame .woocommerce-order .woocommerce-customer-details { margin-top: 34px; }
  .woo-frame .woocommerce-order-overview { margin: 26px 0 34px; padding: 22px 20px; }
  .woo-frame .woocommerce-order table.shop_table th,
  .woo-frame .woocommerce-order table.shop_table td { padding: 13px 15px !important; }
  .woo-frame .woocommerce-customer-details address { padding: 18px 20px; }
}
/* @@END-BTCF-ORDER-CONFIRMATION-MODULE@@ */

/* ==========================================================================
   @@BTCF-FACE-FRAMING-MODULE@@
   Added 2026-07-27. Client: "The image needs to be adjusted to show his full
   face not just his lips in the Hear the Story section. All of the images need
   to be adjusted where his face is fully in the frame without being cut off."

   WHY IT HAPPENED
   Every photograph of Dr. Crawford in the library is a PORTRAIT (roughly 2:3 -
   1660x2048, 1676x2048, 1365x2048, 1351x2048) and every slot it is placed into
   is LANDSCAPE. object-fit:cover therefore keeps the width and throws away the
   top and bottom of the frame. Centred, that lands on the mouth and chest -
   exactly what the client saw. In every one of these photographs the head sits
   in roughly the top 2-42% of the frame, so anchoring the crop to the TOP puts
   the whole head in view.

   The theme already intended this: .video-featured img and .video-card img have
   declared `object-position: top center` since they were written. It never took
   effect. Both are specificity (0,1,1), and an Elementor rule matching the same
   <img> at (0,1,1) loads afterwards and wins on source order, resetting
   object-position to its 50% 50% initial value. Proven by injecting candidate
   rules against the live element and reading the computed value back:

       .video-featured img { object-position: 50% 0% }                -> 50% 50%  (lost)
       .video-featured .elementor-custom-embed-image-overlay img {...} -> 50% 0%   (won)

   So the fix is the (0,2,1) descendant form. No !important needed - this wins on
   specificity, which is stable, rather than on load order, which is not.
   ========================================================================== */

/* --- "Hear the Story" / Watch video thumbnails -------------------------
   Elementor renders a video widget's image overlay as an <img> inside
   .elementor-custom-embed-image-overlay - NOT as a CSS background. The older
   background-size/background-position rules in the video block therefore apply
   to a div that has no background image and do nothing at all. */
.video-featured .elementor-custom-embed-image-overlay img,
.video-card .elementor-custom-embed-image-overlay img {
      object-fit: cover;
      object-position: 50% 0%;
}

/* --- About: journey timeline -------------------------------------------
   Measured at 1440: box 368x222, so 40-49% of the portrait is visible. The
   previous anchor of 24% put the top of the visible window at 12-14% of the
   source, which cut through the crown of his head. 5% places the window top at
   ~2.5% - clear of the highest hairline in the set - and the full head fits
   inside the 40% window. */
.about-ms-img img { object-position: center 5%; }

/* --- About: legacy pillars and closing band ---------------------------- */
.about-pillar-img img { object-position: center 6%; }
.about-closing-img img { object-position: 55% 10%; }

/* --- About: pillar bands made tall enough to contain a face -------------
   Client follow-up: "make the pillar bands taller so his face fits".

   Cropping alone could not do it. How much of a portrait a cover-fitted box
   shows is fixed by the box, not by the crop anchor:

       visible fraction  V = bandHeight x imageAspect / imageWidth

   and a head occupies roughly 40% of these frames, so V must reach ~0.45. At
   the original 180px band height over a 519px-wide image (44% of the 1180px
   band) that gave V = 0.23 - barely half of what a head needs - so every anchor
   value simply chose WHICH part of the face to cut.

   DESKTOP. The band width is capped at 1180px, so the widest band is the worst
   case and a fixed min-height is safe: narrower viewports only make V larger.

       min-height   V (worst of the three photos)
       180px        0.231   <- was cutting the face
       320px        0.410
       340px        0.436
       360px        0.462   <- chosen
       380px        0.487

   With object-position 6% that puts the visible window at 3.2%-49.4% of the
   source for the tightest photo, against a head that sits at roughly 2%-42%. */
.about-pillar { min-height: 360px; }

@media (max-width: 720px) {
  /* MOBILE is a different geometry, and a worse one. The band stacks and the
     image becomes a FULL-WIDTH strip, so the fixed 200px height meant V fell
     away as the screen got wider - fine on a small phone, badly cut on a large
     one:

         viewport   band    V at height:200px
         320px      284px   0.469   ok
         390px      354px   0.376   cuts
         480px      444px   0.300   cuts
         720px      640px   0.208   cuts

     A fixed height cannot hold across that range, so the strip is given a
     RATIO instead: its height follows its own width and V stays at 0.480 at
     every width. The band's top padding uses the same ratio - percentage
     padding resolves against the containing block's width, which is the same
     width the strip spans - so the text clears the image exactly. */
  .about-pillar-img { height: auto; aspect-ratio: 1 / 0.72; }
  .about-pillar { padding: calc(72% + 22px) 24px 28px; }
}
/* @@END-BTCF-FACE-FRAMING-MODULE@@ */

/* ==========================================================================
   @@BTCF-ABOUT-PHILOSOPHIES-MODULE@@  (2026-07-29)
   --------------------------------------------------------------------------
   The About introduction was built as ONE quotation followed by the signature.
   The client has renamed that section "His Core Philosophies" and added two
   more quotations, so it is now a SET. This module supplies the only thing a
   set needs that a single quotation did not: vertical rhythm between them.

   Written as the adjacent-sibling form on purpose. With one .about-quote on a
   page there is no second .about-quote for it to match, so this rule cannot
   change how anything rendered before today - it is inert everywhere except a
   stack. Nothing above is edited, per the append-only convention.

   The gap has to clear the decorative gold quotation mark, which is drawn as an
   absolutely positioned pseudo-element at top -30px and so hangs above its own
   quotation without occupying any layout space. A plain paragraph gap would let
   the mark of one quotation collide with the tail of the one before it.
   ========================================================================== */
.about-intro-content .about-quote + .about-quote { margin-top: 56px; }

/* The photo column stretches to whatever height the copy column now needs
   (.about-intro-photo is overflow:hidden with a height:100% cover image), so a
   taller section shows MORE of the portrait rather than cropping it further.
   Below 720px the two columns stack and the photo is capped instead, so that
   three quotations do not push the copy an entire screen down the page. */
@media (max-width: 720px) {
  .about-intro-content .about-quote + .about-quote { margin-top: 42px; }
}
/* @@END-BTCF-ABOUT-PHILOSOPHIES-MODULE@@ */