/* Generated by tools/sync-site.mjs from the <style> blocks in index.html's <head>. Do not edit here. */

      /* ═══════════════════════════════════════════════════════
   FIRESIDE 610 — COMPLETE REDESIGN
   Design System + Full Site
   ═══════════════════════════════════════════════════════ */

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

      :root {
        --bg: #130e0d;
        --bg-raised: #1a1312;
        --bg-card: #221917;
        --bg-hover: #2b201d;
        --border: rgba(255, 214, 190, 0.09);
        --border-lt: rgba(255, 214, 190, 0.16);
        --ember: #f26b1d;
        --ember-lt: #fe8c1a;
        --ember-dk: #da3d06;
        --ember-glow: rgba(242, 107, 29, 0.12);
        --gold: #d9a63c;
        --cream: #f0e8e5;
        --smoke: #c9b5ad;
        --ash: #9a8680;
        --green: #2ea866;
        --red: #c74040;
        --font: "DM Sans", "DM Sans Fallback", -apple-system, sans-serif;
        --display: "Oswald", "Oswald Fallback", "Oswald Fallback Arial", sans-serif;
        --max-w: 1280px;
        --section-py: clamp(56px, 7vw, 100px);
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--font);
        background: var(--bg);
        color: var(--cream);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      /* ── Global ember layer ── */
      nav,
      main,
      footer,
      .stats-bar {
        position: relative;
        z-index: 1;
      }

      /* ── Utility ── */
      .container {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 0 24px;
      }
      .section-pad {
        padding: var(--section-py) 0;
      }

      /* ── Reveal animations ── */
      .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }
      .reveal-delay-4 {
        transition-delay: 0.4s;
      }

      /* ── Section Labels ── */
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ember-lt);
        margin-bottom: 16px;
      }
      .section-label::before {
        content: "";
        width: 20px;
        height: 1px;
        background: var(--ember);
      }

      .section-title {
        font-family: var(--display);
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.18;
        padding-bottom: 0.08em;
        background: linear-gradient(to bottom, #fff8f4, #e6d3ca);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
        text-wrap: balance;
      }

      .section-sub {
        font-size: 16px;
        line-height: 1.7;
        color: var(--smoke);
        max-width: 580px;
        text-wrap: pretty;
      }

      /* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 0 24px;
        transition:
          background 0.3s ease,
          border-color 0.3s ease;
        border-bottom: 1px solid transparent;
      }
      .nav.scrolled {
        background: rgba(19, 14, 13, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: var(--border);
      }
      .nav.menu-open {
        background: #130e0d;
        backdrop-filter: none;
      }
      .nav-inner {
        max-width: var(--max-w);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
      }
      .nav-logo img {
        height: 44px;
        opacity: 0.95;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 32px;
        list-style: none;
      }
      .nav-links a {
        font-family: var(--font);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--smoke);
        text-decoration: none;
        transition: color 0.2s;
        position: relative;
      }
      .nav-links a::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--ember);
        border-radius: 1px;
        transition: width 0.3s ease;
      }
      .nav-links a:hover::after,
      .nav-links a.active::after {
        width: 100%;
      }
      .nav-links a:hover,
      .nav-links a.active {
        color: var(--cream);
      }
      .nav-cta::after {
        display: none;
      }
      .nav-cta {
        font-family: var(--display);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #fff;
        background: var(--ember);
        padding: 10px 24px;
        border-radius: 4px;
        text-decoration: none;
        transition: background 0.2s;
      }
      .nav-cta:hover {
        background: var(--ember-lt);
      }

      /* Mobile nav */
      .nav-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
      }
      .nav-toggle span {
        width: 24px;
        height: 2px;
        background: var(--cream);
        transition: all 0.3s ease;
      }

      /* Hamburger animation */
      .nav-toggle span {
        transform-origin: center;
      }
      .nav-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .nav-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .nav-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      @media (max-width: 900px) {
        .nav-toggle {
          display: flex;
        }
        .nav-links {
          position: fixed;
          top: 64px;
          left: 0;
          right: 0;
          bottom: 0;
          flex-direction: column;
          background: #130e0d;
          padding: 48px 24px;
          gap: 8px;
          transform: translateX(100%);
          transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          align-items: center;
          justify-content: flex-start;
          border-top: 1px solid var(--border);
          z-index: 9999;
          overflow-y: auto;
        }
        .nav-links.open {
          transform: translateX(0);
        }
        .nav-links li {
          width: 100%;
          text-align: center;
          opacity: 0;
          transform: translateY(12px);
          transition:
            opacity 0.3s ease,
            transform 0.3s ease;
        }
        .nav-links.open li {
          opacity: 1;
          transform: translateY(0);
        }
        .nav-links.open li:nth-child(1) {
          transition-delay: 0.05s;
        }
        .nav-links.open li:nth-child(2) {
          transition-delay: 0.1s;
        }
        .nav-links.open li:nth-child(3) {
          transition-delay: 0.15s;
        }
        .nav-links.open li:nth-child(4) {
          transition-delay: 0.2s;
        }
        .nav-links.open li:nth-child(5) {
          transition-delay: 0.25s;
        }
        .nav-links.open li:nth-child(6) {
          transition-delay: 0.3s;
        }
        .nav-links.open li:nth-child(7) {
          transition-delay: 0.35s;
        }
        .nav-links a {
          font-size: 20px;
          display: block;
          padding: 14px 0;
          border-bottom: 1px solid var(--border);
          transition:
            color 0.2s ease,
            background 0.2s ease;
        }
        .nav-links a:hover {
          color: var(--ember-lt);
          background: rgba(242, 107, 29, 0.06);
        }
        .nav-links a::after {
          display: none;
        }
        .nav-cta-mobile {
          display: inline-block;
          margin-top: 24px;
          padding: 14px 32px;
        }
        .nav-cta-desktop {
          display: none;
        }
      }
      @media (min-width: 901px) {
        .nav-cta-mobile {
          display: none;
        }
      }

      /* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
      .hero {
        position: relative;
        min-height: 100vh;
        min-height: 100svh; /* the visible viewport on phones; 100vh overshoots under the Instagram and Safari toolbars */
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse at 30% 20%,
            rgba(242, 107, 29, 0.08),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 70% 80%,
            rgba(242, 107, 29, 0.04),
            transparent 40%
          ),
          radial-gradient(
            circle at 50% 50%,
            rgba(19, 14, 13, 0.45),
            transparent 70%
          );
        pointer-events: none;
      }
      /* Noise texture overlay */
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.03;
        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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        pointer-events: none;
      }
      .hero-bg-photo {
        position: absolute;
        inset: 0;
        background: url("photos/Fireside-11.webp") center/cover no-repeat;
        opacity: 0.12;
        filter: grayscale(0.3);
      }
      .hero-content {
        position: relative;
        z-index: 2;
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 120px 24px 80px;
      }
      .hero-eyebrow {
        font-family: var(--font);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ember-lt);
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .hero-eyebrow::before {
        content: "";
        width: 32px;
        height: 1px;
        background: var(--ember);
      }
      .hero h1 {
        font-family: var(--display);
        font-size: clamp(48px, 8vw, 96px);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: 0.01em;
        background: linear-gradient(to bottom, #fff8f4, #e6d3ca);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        padding-bottom: 0.08em;
        margin-bottom: 12px;
      }
      .hero h1 .ember {
        -webkit-text-fill-color: var(--ember);
      }
      .hero-sub {
        font-family: var(--display);
        font-size: clamp(24px, 4vw, 44px);
        font-weight: 400;
        letter-spacing: 0.02em;
        color: var(--smoke);
        margin-bottom: 28px;
      }
      .hero-body {
        font-size: 17px;
        line-height: 1.7;
        color: var(--smoke);
        max-width: 540px;
        margin-bottom: 40px;
        text-wrap: pretty;
      }
      .hero-actions {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }
      .btn-primary {
        font-family: var(--display);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        background: var(--ember);
        padding: 16px 36px;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
        transition:
          background 0.2s,
          transform 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .btn-primary:hover {
        background: var(--ember-lt);
        transform: translateY(-1px);
      }
      .btn-primary svg {
        width: 16px;
        height: 16px;
      }

      .btn-ghost {
        font-family: var(--display);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--smoke);
        background: transparent;
        padding: 16px 36px;
        border: 1px solid var(--border-lt);
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s;
      }
      .btn-ghost:hover {
        border-color: var(--cream);
        color: var(--cream);
      }

      /* Scroll indicator */
      .hero-scroll {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: var(--ash);
        font-size: 10px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }
      .hero-scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, var(--ash), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
      }
      @keyframes scrollPulse {
        0%,
        100% {
          opacity: 0.3;
        }
        50% {
          opacity: 1;
        }
      }

      /* ═══════════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════════ */
      .stats-bar {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--bg-raised);
      }
      .stats-inner {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .stat-item {
        padding: 32px 0;
        text-align: center;
        border-right: 1px solid var(--border);
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-number {
        font-family: var(--display);
        font-size: 32px;
        font-weight: 600;
        color: var(--cream);
        letter-spacing: 0.02em;
      }
      .stat-number .ember {
        color: var(--ember-lt);
      }
      .stat-label {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ash);
        margin-top: 4px;
      }
      @media (max-width: 600px) {
        .stats-inner {
          grid-template-columns: repeat(2, 1fr);
        }
        .stat-item:nth-child(2) {
          border-right: none;
        }
        .stat-item:nth-child(3),
        .stat-item:nth-child(4) {
          border-top: 1px solid var(--border);
        }
      }

      /* ═══════════════════════════════════════════════════════
   PROBLEM SECTION
   ═══════════════════════════════════════════════════════ */
      .problem {
        position: relative;
      }
      .problem-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }
      .problem-text .problem-lead {
        font-family: var(--display);
        font-size: clamp(20px, 2.4vw, 26px);
        font-weight: 400;
        line-height: 1.3;
        color: var(--cream);
        margin-bottom: 18px;
        text-wrap: balance;
      }
      .problem-text p {
        font-size: 16px;
        line-height: 1.8;
        color: var(--smoke);
        margin-bottom: 16px;
        text-wrap: pretty;
      }
      .problem-text .highlight {
        color: var(--cream);
        font-weight: 600;
      }
      .problem-visual {
        position: relative;
        aspect-ratio: 4/3;
        border-radius: 8px;
        overflow: hidden;
      }
      .problem-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .problem-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(242, 107, 29, 0.1),
          transparent
        );
      }
      .scripture {
        margin-top: 40px;
        padding: 24px;
        border-left: 2px solid var(--ember-dk);
        background: var(--ember-glow);
        border-radius: 0 6px 6px 0;
      }
      .scripture p {
        font-size: 14px;
        font-style: italic;
        line-height: 1.7;
        color: var(--smoke);
        margin: 0;
      }
      .scripture cite {
        display: block;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.06em;
        color: var(--ember-lt);
        margin-top: 8px;
      }
      @media (max-width: 768px) {
        .problem-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .problem-visual {
          max-height: 300px;
        }
      }

      /* ═══════════════════════════════════════════════════════
   TACTICAL KIT — brackets, chips, stencil details
   ═══════════════════════════════════════════════════════ */
      .tac-corners {
        position: relative;
      }
      /* Single ::before paints all four corner brackets, so elements that
         already own an ::after (photo gradient overlays) never collide */
      .tac-corners::before {
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 2;
        pointer-events: none;
        --tc: var(--ember);
        background:
          linear-gradient(var(--tc), var(--tc)) left 0 top 0 / 26px 2px,
          linear-gradient(var(--tc), var(--tc)) left 0 top 0 / 2px 26px,
          linear-gradient(var(--tc), var(--tc)) right 0 top 0 / 26px 2px,
          linear-gradient(var(--tc), var(--tc)) right 0 top 0 / 2px 26px,
          linear-gradient(var(--tc), var(--tc)) left 0 bottom 0 / 26px 2px,
          linear-gradient(var(--tc), var(--tc)) left 0 bottom 0 / 2px 26px,
          linear-gradient(var(--tc), var(--tc)) right 0 bottom 0 / 26px 2px,
          linear-gradient(var(--tc), var(--tc)) right 0 bottom 0 / 2px 26px;
        background-repeat: no-repeat;
      }
      .photo-tag {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 26px 16px 12px;
        background: linear-gradient(to top, rgba(19, 14, 13, 0.72), transparent);
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #e8decb;
        text-align: center;
      }
      .enemy-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--cream);
        line-height: 1.4;
        margin: 2px 0 20px;
      }
      .enemy-label {
        color: #b32a2a;
        padding-right: 14px;
        margin-right: 2px;
        border-right: 1px solid #b32a2a;
      }
      .enemy-line i {
        width: 5px;
        height: 5px;
        background: #b32a2a;
        transform: rotate(45deg);
      }
      @media (max-width: 1020px) {
        .enemy-line {
          justify-content: center;
        }
      }
      /* ═══════════════════════════════════════════════════════
   SOLUTION / PILLARS
   ═══════════════════════════════════════════════════════ */
      .pillars {
        background: var(--bg-raised);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        position: relative;
        overflow: hidden;
      }
      .pillars-bg-texture {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 90% 70% at 50% 110%,
            rgba(242, 107, 29, 0.2) 0%,
            transparent 65%
          ),
          radial-gradient(
            ellipse 50% 50% at 15% 90%,
            rgba(218, 61, 6, 0.14) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 50% 50% at 85% 85%,
            rgba(217, 166, 60, 0.08) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 30% 30% at 50% 50%,
            rgba(242, 107, 29, 0.04) 0%,
            transparent 60%
          );
        pointer-events: none;
      }
      .pillars-header {
        text-align: center;
        margin-bottom: 60px;
      }
      .pillars-header .section-sub {
        margin: 0 auto;
      }
      .pillars-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
      }
      .pillar-card {
        background: var(--bg-card);
        padding: 40px 28px;
        text-align: center;
        transition:
          background 0.4s ease,
          box-shadow 0.4s ease,
          transform 0.4s ease;
        position: relative;
        overflow: hidden;
      }
      /* Top ember line on hover */
      .pillar-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(
          to right,
          var(--ember-dk),
          var(--ember-lt),
          var(--ember-dk)
        );
        transition: width 0.5s ease;
      }
      /* Subtle diagonal shimmer sweep */
      .pillar-card::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          115deg,
          transparent 40%,
          rgba(242, 107, 29, 0.04) 45%,
          rgba(242, 107, 29, 0.08) 50%,
          rgba(242, 107, 29, 0.04) 55%,
          transparent 60%
        );
        transform: translateX(-100%);
        transition: none;
        pointer-events: none;
      }
      .pillar-card:hover::after {
        animation: pillarShimmer 0.8s ease forwards;
      }
      @keyframes pillarShimmer {
        to {
          transform: translateX(100%);
        }
      }
      .pillar-card:hover::before {
        width: 100%;
      }
      .pillar-card:hover {
        background: var(--bg-hover);
        box-shadow:
          0 8px 32px rgba(242, 107, 29, 0.08),
          0 0 0 1px rgba(242, 107, 29, 0.1);
        transform: translateY(-4px);
      }
      .pillar-num {
        position: absolute;
        top: 12px;
        right: 14px;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        color: var(--ember-lt);
        opacity: 0.75;
      }
      .pillar-watermark {
        position: absolute;
        right: -8px;
        bottom: -26px;
        font-family: var(--display);
        font-size: 110px;
        font-weight: 700;
        line-height: 1;
        color: var(--ember-lt);
        opacity: 0.05;
        pointer-events: none;
        user-select: none;
      }
      .pillar-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ember-glow);
        border-radius: 50%;
        border: 1px solid rgba(242, 107, 29, 0.1);
        transition:
          transform 0.4s ease,
          box-shadow 0.4s ease,
          border-color 0.4s ease;
      }
      .pillar-card:hover .pillar-icon {
        transform: translateY(-4px) scale(1.08);
        box-shadow: 0 6px 20px rgba(242, 107, 29, 0.2);
        border-color: rgba(242, 107, 29, 0.3);
      }
      .pillar-icon svg {
        width: 22px;
        height: 22px;
        stroke: var(--ember-lt);
        fill: none;
        stroke-width: 1.5;
        transition: stroke 0.3s ease;
      }
      .pillar-card:hover .pillar-icon svg {
        stroke: var(--cream);
      }
      .pillar-card h3 {
        font-family: var(--display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cream);
        margin-bottom: 12px;
      }
      .pillar-card p {
        font-size: 14px;
        line-height: 1.7;
        color: var(--smoke);
        text-wrap: pretty;
      }
      @media (max-width: 900px) {
        .pillars-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 540px) {
        .pillars-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ═══════════════════════════════════════════════════════
   THE PATH / PROGRESSION
   ═══════════════════════════════════════════════════════ */
      .path-header {
        text-align: center;
        margin-bottom: 60px;
      }
      .path-header .section-sub {
        margin: 0 auto;
      }
      /* Photo slider carousel */
      .path-photo-slider {
        margin-top: 60px;
        overflow: hidden;
        mask-image: linear-gradient(
          to right,
          transparent,
          black 3%,
          black 97%,
          transparent
        );
        -webkit-mask-image: linear-gradient(
          to right,
          transparent,
          black 3%,
          black 97%,
          transparent
        );
      }
      .path-photo-track {
        display: flex;
        gap: 16px;
        animation: scrollPhotos 45s linear infinite;
        width: max-content;
      }
      .path-photo-track:hover {
        animation-play-state: paused;
      }
      @keyframes scrollPhotos {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .path-photo {
        width: 320px;
        height: 220px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
      }
      .path-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85) contrast(1.05);
        transition: transform 0.4s ease;
      }
      .path-photo:hover img {
        transform: scale(1.05);
      }
      .path-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(19, 14, 13, 0.3), transparent);
        pointer-events: none;
      }
      /* ── The Fireside Path — rank ladder (season-card energy) ── */
      .path-unsure {
        text-align: center;
        margin-top: 48px;
      }
      .path-unsure p {
        font-family: var(--display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--cream);
        margin-bottom: 4px;
      }
      .path-unsure .path-unsure-sub {
        font-size: 14px;
        color: var(--smoke);
      }
      .path-unsure-link {
        display: inline-block;
        margin-top: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--ember);
        text-decoration: none;
        border-bottom: 1px solid var(--ember);
        padding-bottom: 2px;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
      }
      .path-unsure-link:hover {
        color: var(--cream);
        border-color: var(--cream);
      }

      .path-strip {
        display: flex;
        gap: 4px;
        justify-content: center;
        margin: 18px auto 0;
        max-width: 240px;
      }
      .path-strip span {
        height: 3px;
        flex: 1;
        border-radius: 2px;
      }
      .path-provided {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px 18px;
        flex-wrap: wrap;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 16px 26px;
        margin-bottom: 28px;
        text-align: center;
      }
      .path-provided strong {
        font-family: var(--display);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ember);
        white-space: nowrap;
      }
      .path-provided p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--smoke);
        margin: 0;
      }
      .path-levels {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .path-level-card {
        display: flex;
        flex-direction: column;
        --r-accent: #c45a28;
        --r-accent-lt: #e07a3e;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 24px 22px 20px;
        position: relative;
        overflow: hidden;
        transition:
          border-color 0.3s ease,
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      .path-level-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
          to right,
          var(--r-accent),
          var(--r-accent-lt)
        );
      }
      .path-level-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--r-accent) 45%, transparent);
        box-shadow: 0 12px 28px rgba(36, 28, 19, 0.16);
      }
      .path-level-card:nth-child(1) {
        --r-accent: #a5820f;
        --r-accent-lt: #c9a227;
      }
      .path-level-card:nth-child(2) {
        --r-accent: #c45a28;
        --r-accent-lt: #e07a3e;
      }
      .path-level-card:nth-child(3) {
        --r-accent: #b32a2a;
        --r-accent-lt: #d04040;
      }
      .path-level-card:nth-child(4) {
        --r-accent: #3a6a9c;
        --r-accent-lt: #5b8ec2;
      }
      .rank-tag {
        position: absolute;
        top: 14px;
        right: 16px;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--r-accent);
        opacity: 0.9;
      }
      .rank-mark {
        position: absolute;
        right: -4px;
        bottom: -6px;
        width: 84px;
        height: 84px;
        color: var(--r-accent);
        opacity: 0.1;
        pointer-events: none;
      }
      .path-rank {
        font-family: var(--display);
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--r-accent);
        margin-bottom: 2px;
      }
      .path-subtitle {
        font-size: 12px;
        font-weight: 600;
        color: var(--ash);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 12px;
      }
      .path-card-desc {
        font-size: 14px;
        line-height: 1.6;
        color: var(--smoke);
        margin-bottom: 14px;
      }
      .path-advance {
        font-size: 13px;
        line-height: 1.5;
        color: var(--smoke);
        border-left: 2px solid var(--r-accent);
        padding: 2px 0 2px 12px;
        margin-bottom: 16px;
      }
      .path-advance strong {
        display: block;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--r-accent);
        margin-bottom: 2px;
      }
      .path-gear-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: auto;
        position: relative;
        z-index: 1;
        padding: 11px 14px;
        background: var(--bg-card);
        border: 1px solid color-mix(in srgb, var(--r-accent) 45%, transparent);
        border-radius: 6px;
        color: var(--r-accent);
        font-family: var(--display);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        transition:
          background 0.2s ease,
          border-color 0.2s ease;
      }
      .path-gear-btn:hover,
      .path-level-card.gear-open .path-gear-btn {
        background: color-mix(in srgb, var(--r-accent) 8%, transparent);
        border-color: var(--r-accent);
      }
      .path-gear-btn svg {
        width: 14px;
        height: 14px;
        stroke: var(--r-accent);
        stroke-width: 2;
        fill: none;
        transition: transform 0.3s ease;
      }
      .path-level-card.gear-open .path-gear-btn svg {
        transform: rotate(45deg);
      }
      /* When open, let the button flow with content; slack falls below the
         panel instead of opening a void mid-card */
      .path-level-card.gear-open .path-gear-btn {
        margin-top: 0;
      }
      .path-gear-panel {
        max-height: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;
        background: var(--bg-card);
        transition: max-height 0.4s ease;
      }
      .path-level-card.gear-open .path-gear-panel {
        max-height: 400px;
      }
      .path-gear-inner {
        padding: 16px 0 2px;
      }
      .path-gear-list {
        list-style: none;
        margin: 0;
      }
      .path-gear-list li {
        font-size: 13px;
        line-height: 1.55;
        color: var(--smoke);
        padding: 3px 0 3px 18px;
        position: relative;
      }
      .path-gear-list li::before {
        content: "\203A";
        position: absolute;
        left: 4px;
        color: var(--r-accent);
        font-weight: 700;
      }
      /* ═══ The Fireside Path: rank deck (the season card's depth, its own climb) ═══ */
      .path-section {
        background: var(--bg);
        border-top: 1px solid var(--border);
      }
      .path-section .path-header {
        margin-bottom: 44px;
      }
      .path-deck {
        --gap: 24px;
        /* Wider than the site container on big screens so the four ranks fill
           the band (Justyn, 2026-11-07). Never narrower than the container;
           centered on it, so the header and the line below stay put. */
        --deck-w: max(100%, min(1600px, calc(100vw - 96px)));
        width: var(--deck-w);
        list-style: none;
        margin: 0 0 0 calc((100% - var(--deck-w)) / 2);
        padding: 0 0 42px;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gap);
        align-items: stretch;
      }
      /* The climb: each rank sits a step higher than the one before it, and a
         chevron in the gap carries the eye to the next rank. */
      .path-step {
        position: relative;
        transform: translateY(calc((3 - var(--i)) * 14px));
      }
      .path-step + .path-step::before {
        content: "\203A";
        position: absolute;
        left: calc(-1 * var(--gap) / 2 - 6px);
        top: 64px;
        z-index: 2;
        font-family: var(--display);
        font-size: 30px;
        font-weight: 600;
        line-height: 1;
        color: var(--m);
        opacity: 0.9;
        text-shadow: 0 0 14px color-mix(in srgb, var(--m) 45%, transparent);
      }
      .path-deck .path-level-card {
        height: 100%;
        padding: 26px 24px 22px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      }
      .path-deck .path-level-card:hover {
        box-shadow:
          0 16px 38px rgba(0, 0, 0, 0.5),
          0 0 0 1px color-mix(in srgb, var(--r-accent) 35%, transparent);
      }
      .path-deck .card-photo {
        opacity: 0.18;
      }
      .path-deck .path-level-card:hover .card-photo {
        opacity: 0.28;
      }
      .path-deck .path-level-card > *:not(.card-photo):not(.rank-mark):not(.rank-tag):not(.path-chip) {
        position: relative;
        z-index: 1;
      }
      .path-deck .rank-tag {
        z-index: 1;
        color: var(--r-accent-lt);
      }
      .path-deck .rank-mark {
        width: 124px;
        height: 124px;
        right: -12px;
        bottom: -16px;
        color: var(--r-accent-lt);
        opacity: 0.08;
      }
      .path-chip {
        position: absolute;
        top: 3px;
        left: 24px;
        z-index: 2;
        font-family: var(--display);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #130e0d;
        background: var(--r-accent-lt);
        padding: 4px 10px;
        border-radius: 0 0 4px 4px;
      }
      .path-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 8px 0 14px;
      }
      .path-rank-box {
        flex: none;
        min-width: 76px;
        padding: 10px 12px 8px;
        border-radius: 8px;
        text-align: center;
        background: color-mix(in srgb, var(--r-accent) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--r-accent) 32%, transparent);
      }
      .path-rank-box .lvl {
        display: block;
        font-family: var(--display);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--r-accent-lt);
      }
      .path-rank-box .num {
        display: block;
        font-family: var(--display);
        font-size: 38px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;
        color: var(--cream);
        margin: 2px 0 4px;
      }
      .box-chev {
        width: 20px;
        height: 20px;
        color: var(--r-accent-lt);
      }
      .path-head-text {
        min-width: 0;
      }
      .path-deck .path-rank {
        font-size: clamp(24px, 2vw, 30px);
        line-height: 1.02;
        color: var(--cream);
        margin-bottom: 6px;
      }
      .path-deck .path-subtitle {
        color: var(--r-accent-lt);
        margin-bottom: 0;
      }
      .path-who {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--ash);
        margin-bottom: 16px;
      }
      .path-meta {
        padding-top: 16px;
        border-top: 1px solid var(--border);
      }
      .path-deck .path-card-desc {
        font-size: 13.5px;
        color: var(--smoke);
      }
      .path-deck .path-card-desc strong,
      .path-deck .path-advance strong {
        display: block;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--r-accent-lt);
        margin-bottom: 3px;
      }
      .path-deck .path-advance {
        color: var(--smoke);
        border-left-color: var(--r-accent-lt);
      }
      .path-deck .path-gear-btn {
        background: transparent;
        color: var(--r-accent-lt);
        border-color: color-mix(in srgb, var(--r-accent-lt) 45%, transparent);
      }
      .path-deck .path-gear-btn:hover,
      .path-deck .path-level-card.gear-open .path-gear-btn {
        background: color-mix(in srgb, var(--r-accent) 14%, transparent);
        border-color: var(--r-accent-lt);
      }
      .path-deck .path-gear-btn svg {
        stroke: var(--r-accent-lt);
      }
      .path-deck .path-gear-panel {
        background: transparent;
      }
      .path-deck .path-gear-list li::before {
        color: var(--r-accent-lt);
      }
      .path-section .path-unsure {
        margin-top: 8px;
      }
      /* Four across needs about 280px per card for COMMANDER; below 1240px
         the ranks go 2 x 2 instead of pushing the page sideways. */
      @media (max-width: 1240px) {
        .path-deck {
          --deck-w: 100%;
          grid-template-columns: 1fr 1fr;
          padding-bottom: 0;
        }
        .path-section .path-unsure {
          margin-top: 32px;
        }
        .path-step {
          transform: none;
        }
        .path-step + .path-step::before {
          display: none;
        }
      }
      @media (max-width: 640px) {
        .path-deck {
          grid-template-columns: 1fr;
          gap: 18px;
        }
        /* Phone: the chevron turns to point down the stack, everything centers */
        .path-step + .path-step::before {
          content: "\203A";
          display: block;
          position: static;
          width: 30px;
          margin: 0 auto 2px;
          text-align: center;
          transform: rotate(90deg);
        }
        .path-deck .path-level-card {
          /* The down-chevron sits inside the slot above each card, so a
             100% height overran the slot by the chevron and the last card
             ran under the line below. Stacked cards size to their content. */
          height: auto;
          padding: 24px 20px 20px;
          text-align: center;
        }
        .path-head {
          flex-direction: column;
          gap: 12px;
        }
        .path-rank-box {
          min-width: 92px;
        }
        .path-deck .path-advance {
          border-left: none;
          border-top: 2px solid var(--r-accent-lt);
          padding: 10px 0 0;
        }
        .path-deck .path-gear-btn {
          justify-content: center;
          gap: 10px;
        }
        .path-deck .path-gear-list {
          display: inline-block;
          text-align: left;
        }
      }
      /* ═══════════════════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════════════════ */
      .events {
        background: var(--bg-raised);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .events-header {
        margin-bottom: 48px;
        text-align: center;
      }
      .events-header .section-sub {
        margin: 0 auto;
      }
      .events-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 60px;
      }
      /* Odd-count grid: center the lone last card */
      .event-card-center {
        grid-column: 1 / -1;
        width: calc(50% - 10px);
        margin: 0 auto;
      }
      .event-card {
        --s-accent: var(--ember);
        --s-accent-lt: var(--ember-lt);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 32px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.3s ease;
      }
      .event-card:hover {
        border-color: color-mix(in srgb, var(--s-accent) 40%, transparent);
      }
      .event-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
          to right,
          var(--s-accent),
          var(--s-accent-lt)
        );
      }
      /* ═══ LIGHT SECTIONS — warm bone "field manual" break ═══ */
      .section-light {
        --cream: #241c13;
        --smoke: #574c3d;
        --ash: #6d6152;
        --bg-card: #f4eddd;
        --bg-raised: #eee5d2;
        --border: #d3c5aa;
        background: #e8decb;
        position: relative;
      }
      .section-light::before {
        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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.04;
        pointer-events: none;
      }
      .section-light > * {
        position: relative;
      }
      .mantra.section-light {
        background: #e8decb;
        border-top: 1px solid #d3c5aa;
        border-bottom: 1px solid #d3c5aa;
      }
      .section-light .faq-question svg {
        stroke: #8a7c68;
      }
      /* Gradient-clip headlines are built for dark; go solid ink on bone */
      .section-light .section-title {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: #241c13;
        color: #241c13;
      }

      /* ═══ Season cards — cinematic layer ═══ */
      .event-card {
        transition:
          border-color 0.3s ease,
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      .event-card:hover {
        transform: translateY(-4px);
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.45),
          0 0 0 1px color-mix(in srgb, var(--s-accent) 35%, transparent);
      }
      .card-photo {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.16;
        transition: opacity 0.35s ease;
        pointer-events: none;
      }
      .event-card:hover .card-photo {
        opacity: 0.26;
      }
      .event-card
        > *:not(.card-photo):not(.season-mark):not(.season-tag):not(
          .event-next-chip
        ) {
        position: relative;
        z-index: 1;
      }
      .season-mark,
      .season-tag {
        z-index: 1;
      }
      .event-countdown {
        font-family: var(--display);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--cream);
        opacity: 0.85;
      }
      .season-strip {
        display: flex;
        gap: 4px;
        justify-content: center;
        margin: 18px auto 0;
        max-width: 240px;
      }
      .season-strip span {
        height: 3px;
        flex: 1;
        border-radius: 2px;
      }

      /* ── Season identities: muted, masculine ── */
      .season-fall {
        --s-accent: #c45a28;
        --s-accent-lt: #e07a3e;
      }
      .season-winter {
        --s-accent: #5f7f99;
        --s-accent-lt: #86a7bf;
      }
      .season-hunt {
        --s-accent: #66744a;
        --s-accent-lt: #8b9c68;
      }
      .season-spring {
        --s-accent: #6d8a55;
        --s-accent-lt: #93b077;
      }
      .season-finale {
        --s-accent: #b08d3f;
        --s-accent-lt: #d4b05e;
      }
      .event-card .event-month-box {
        background: color-mix(in srgb, var(--s-accent) 10%, transparent);
        border-color: color-mix(in srgb, var(--s-accent) 28%, transparent);
      }
      .event-card .event-month-box .month {
        color: var(--s-accent-lt);
      }
      .season-tag {
        position: absolute;
        top: 16px;
        right: 18px;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--s-accent-lt);
        opacity: 0.85;
      }
      .season-mark {
        position: absolute;
        right: -14px;
        bottom: -18px;
        width: 120px;
        height: 120px;
        color: var(--s-accent-lt);
        opacity: 0.07;
        pointer-events: none;
      }
      .event-card .event-spots {
        color: var(--s-accent-lt);
      }
      .event-date-block {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
      }
      .event-month-box {
        background: var(--ember-glow);
        border: 1px solid rgba(242, 107, 29, 0.15);
        border-radius: 6px;
        padding: 10px 14px;
        text-align: center;
        flex-shrink: 0;
      }
      .event-month-box .month {
        font-family: var(--display);
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ember-lt);
      }
      .event-month-box .day {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 600;
        color: var(--cream);
        line-height: 1;
      }
      .event-info h3 {
        font-family: var(--display);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--cream);
        margin-bottom: 4px;
      }
      .event-info .loc {
        font-size: 13px;
        color: var(--ash);
      }
      .event-info .event-qualify {
        margin-top: 6px;
        color: var(--ember-lt);
        font-weight: 600;
        letter-spacing: 0.02em;
      }
      .event-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        margin-top: 20px;
      }
      .event-price {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 600;
        color: var(--cream);
      }
      .event-price span {
        font-size: 14px;
        font-weight: 400;
        color: var(--ash);
      }
      .event-spots {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ember-lt);
      }
      .event-register-btn {
        display: block;
        width: 100%;
        margin-top: 20px;
        font-family: var(--display);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: center;
        color: #fff;
        background: var(--ember);
        padding: 14px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
        text-decoration: none;
      }
      .event-register-btn:hover {
        background: var(--ember-lt);
      }

      /* ── Ticket Quantity Selector (modal preview) ── */
      .ticket-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .ticket-modal-overlay.open {
        display: flex;
      }
      .ticket-modal {
        background: var(--bg-card);
        border: 1px solid var(--border-lt);
        border-radius: 12px;
        padding: 40px;
        max-width: 480px;
        width: 100%;
        position: relative;
        animation: modalIn 0.3s ease;
      }
      @keyframes modalIn {
        from {
          opacity: 0;
          transform: scale(0.95) translateY(10px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      .ticket-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        color: var(--ash);
        cursor: pointer;
        font-size: 20px;
        padding: 4px;
        transition: color 0.2s;
      }
      .ticket-modal-close:hover {
        color: var(--cream);
      }
      .ticket-modal h3 {
        font-family: var(--display);
        font-size: 24px;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
      }
      .ticket-modal .event-name {
        font-size: 14px;
        color: var(--ash);
        margin-bottom: 28px;
      }
      .qty-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--smoke);
        margin-bottom: 10px;
      }
      .qty-selector {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
      }
      .qty-btn {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-lt);
        color: var(--cream);
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s;
      }
      .qty-btn:hover {
        border-color: var(--ember);
      }
      .qty-value {
        font-family: var(--display);
        font-size: 32px;
        font-weight: 600;
        color: var(--cream);
        min-width: 48px;
        text-align: center;
      }
      .qty-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        border-top: 1px solid var(--border);
        margin-bottom: 24px;
      }
      .qty-total-label {
        font-size: 14px;
        color: var(--smoke);
      }
      .qty-total-price {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 600;
        color: var(--cream);
      }
      .qty-note {
        font-size: 13px;
        color: var(--ash);
        margin-bottom: 24px;
        padding: 12px 16px;
        background: var(--ember-glow);
        border-radius: 6px;
        border-left: 2px solid var(--ember);
        line-height: 1.6;
        display: none;
      }
      .qty-note.show {
        display: block;
      }
      .ticket-proceed-btn {
        width: 100%;
        font-family: var(--display);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        background: var(--ember);
        padding: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
      }
      .ticket-proceed-btn:hover {
        background: var(--ember-lt);
      }

      .events-hero-img {
        aspect-ratio: 21/9;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 40px;
        position: relative;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
      }
      .events-hero-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85) contrast(1.05);
      }
      .events-hero-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(19, 14, 13, 0.4), transparent);
      }

      /* ── Registration Modal ── */
      .reg-modal {
        max-width: 560px;
        max-height: 90vh;
        overflow-y: auto;
      }
      .reg-block {
        text-align: left;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
      }
      .reg-block-title {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ember-lt);
        margin-bottom: 12px;
      }
      .reg-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .reg-grid input:not([type="checkbox"]),
      .reg-grid select {
        background: var(--bg-raised);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 12px 14px;
        color: var(--cream);
        font-family: var(--font);
        font-size: 14px;
        min-width: 0;
        width: 100%;
        appearance: none;
      }
      .reg-grid select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89d8f'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
      }
      .reg-grid input::placeholder {
        color: var(--ash);
      }
      .reg-grid input:focus,
      .reg-grid select:focus {
        outline: none;
        border-color: var(--ember);
      }
      .reg-grid input[type="checkbox"],
      .reg-check input[type="checkbox"] {
        appearance: auto;
        -webkit-appearance: checkbox;
        width: 18px;
        height: 18px;
        min-width: 18px;
        padding: 0;
        accent-color: var(--ember);
        cursor: pointer;
      }
      /* Each attendee is his own clearly separated card */
      .attendee-card {
        background: var(--bg-raised);
        border: 1px solid var(--border);
        border-left: 3px solid var(--ember);
        border-radius: 6px;
        padding: 18px;
        margin-top: 16px;
      }
      .attendee-card .reg-block-title {
        font-size: 14px;
        margin-bottom: 14px;
      }
      .attendee-card .reg-block-title span {
        color: var(--ash);
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        font-size: 13px;
      }
      .surprise-row input[type="checkbox"] {
        appearance: auto;
        -webkit-appearance: checkbox;
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-top: 1px;
        accent-color: var(--ember);
        cursor: pointer;
      }
      .surprise-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 12px;
        padding: 10px 12px;
        border: 1px dashed var(--border);
        border-radius: 6px;
        font-size: 13px;
        color: var(--ash);
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s;
      }
      .surprise-row:has(input:checked) {
        border-color: var(--ember);
        color: var(--cream);
      }
      .surprise-row:has(input:checked)::after {
        content: "Held";
        margin-left: auto;
        color: var(--ember-lt);
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .reg-grid .span2 {
        grid-column: 1 / -1;
      }
      .reg-check {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        font-size: 14px;
        color: var(--ash);
        cursor: pointer;
      }
      .reg-check input {
        accent-color: var(--ember);
        width: 16px;
        height: 16px;
      }
      /* ── Registration wizard: one step at a time, Path-section theme ── */
      .ticket-modal.wiz {
        --cream: #241c13;
        --smoke: #574c3d;
        --ash: #6d6152;
        --bg-card: #f4eddd;
        --bg-raised: #fbf6ec;
        --border: #d3c5aa;
        --border-lt: #d3c5aa;
        background: #e8decb;
        color: var(--cream);
        max-width: 620px;
        padding: 36px 32px 28px;
      }
      .ticket-modal.wiz .event-name {
        margin-bottom: 18px;
      }
      .wiz-progress {
        display: flex;
        gap: 4px;
        margin-bottom: 14px;
      }
      .wiz-progress span {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: #d3c5aa;
      }
      .wiz-progress span.done {
        background: var(--ember);
      }
      .wiz-progress span.now {
        background: var(--ember-lt);
      }
      .wiz-step-label {
        font-family: var(--display);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ember);
      }
      .wiz-title {
        font-family: var(--display);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--cream);
        margin: 4px 0 6px;
        line-height: 1.15;
      }
      .wiz-sub {
        font-size: 14px;
        line-height: 1.55;
        color: var(--smoke);
        margin: 0 0 18px;
      }
      .wiz-sub:empty {
        display: none;
      }
      .wiz-body {
        text-align: left;
      }
      .wiz-classes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .wiz-classes .path-level-card {
        cursor: default;
      }
      .wiz-classes .path-level-card:hover {
        transform: none;
      }
      .wiz-classes .path-level-card.wiz-selected {
        border: 2px solid var(--r-accent);
        padding: 23px 21px 19px;
        box-shadow: 0 10px 24px rgba(36, 28, 19, 0.14);
      }
      .wiz-who {
        margin-bottom: 12px;
      }
      .wiz-choose {
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 12px 14px;
        border: none;
        border-radius: 6px;
        background: var(--r-accent);
        color: #fff;
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        position: relative;
        z-index: 1;
        transition: filter 0.2s;
      }
      .wiz-choose:hover {
        filter: brightness(1.08);
      }
      .wiz-selected .wiz-choose {
        background: transparent;
        color: var(--r-accent);
        box-shadow: inset 0 0 0 1px var(--r-accent);
      }
      .wiz-alt {
        display: block;
        margin: 16px auto 0;
        background: none;
        border: none;
        color: var(--smoke);
        font-family: var(--font);
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
      }
      .wiz-count {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin: 6px 0 18px;
      }
      .wiz-count .qty-btn {
        background: var(--bg-raised);
      }
      .wiz-count .qty-value {
        font-size: 44px;
      }
      .wiz-seg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 4px 0 16px;
      }
      .wiz-seg button {
        padding: 12px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-raised);
        color: var(--smoke);
        font-family: var(--display);
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
      }
      .wiz-seg button.on {
        border: 2px solid var(--ember);
        padding: 11px 9px;
        color: var(--cream);
        background: var(--bg-card);
      }
      .wiz-man .wm-right {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }
      .wiz-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0 0;
        border-top: 1px solid var(--border);
        font-size: 14px;
        color: var(--smoke);
      }
      .wiz-total b {
        font-family: var(--display);
        font-size: 26px;
        font-weight: 600;
        color: var(--cream);
      }
      .wiz-field label {
        display: block;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--smoke);
        margin: 0 0 5px;
      }
      .wiz .reg-grid {
        gap: 14px 12px;
      }
      .wiz .reg-grid input:not([type="checkbox"]),
      .wiz .reg-grid select {
        padding: 13px 14px;
        font-size: 16px;
      }
      .wiz .reg-grid input.bad,
      .wiz .reg-grid select.bad {
        border-color: #a3321f;
      }
      .wiz .surprise-row {
        background: var(--bg-raised);
      }
      .wiz-qual p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--cream);
        margin: 0 0 4px;
      }
      .wiz .qual-row:has(input:checked)::after {
        content: "Understood";
      }
      .wiz-qual-note {
        font-size: 13px;
        color: var(--ember-lt);
        margin-bottom: 10px;
      }
      /* Hog Hunt rules step */
      .wiz-rules p { margin-bottom: 8px; }
      .wiz-rules b { color: var(--ember); }
      .wiz-more { font-size: 13px; }
      .wiz-more a, .wv-full a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
      /* Waiver step: the agreement scrolls inside the modal, acks + signature below */
      .wv-scroll {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-raised);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 14px 16px;
        font-size: 13px;
        line-height: 1.55;
        color: var(--cream);
        margin-bottom: 8px;
      }
      .wv-scroll h4 {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ember);
        margin: 16px 0 6px;
      }
      .wv-scroll .wv-meta + .wv-sec h4 { margin-top: 4px; }
      .wv-scroll h5 {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--smoke);
        margin: 10px 0 4px;
      }
      .wv-scroll p { margin: 0 0 8px; }
      .wv-scroll ul { margin: 0 0 8px 18px; padding: 0; }
      .wv-scroll li { margin-bottom: 4px; }
      .wv-scroll .wv-meta { font-size: 12px; color: var(--smoke); }
      .wv-scroll .wv-quote {
        margin: 8px 0 10px;
        padding: 10px 12px;
        border-left: 3px solid var(--ember);
        background: var(--bg-card);
      }
      .wv-scroll .wv-warning {
        border: 2px solid var(--cream);
        padding: 10px 12px;
        margin: 8px 0 10px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.02em;
      }
      .wv-scroll .wv-cite { font-weight: 400; text-transform: none; color: var(--smoke); font-size: 11px; margin: 0; }
      .wv-full { font-size: 13px; margin: 0 0 12px; color: var(--smoke); }
      .wv-acks { display: grid; gap: 8px; margin-bottom: 14px; }
      .wiz .ack-row { margin-top: 0; align-items: flex-start; }
      .wiz .ack-row:has(input:checked)::after { content: "Agreed"; }
      .wiz .ack-row.bad-row { border-color: #a3321f; }
      .wiz .photo-row:has(input:checked)::after { content: "Opted Out"; }
      .wv-grid { margin-bottom: 14px; }
      .wv-sign label {
        display: block;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--smoke);
        margin: 0 0 5px;
      }
      .wv-sign input {
        width: 100%;
        padding: 14px 16px;
        font-family: var(--display);
        font-size: 22px;
        letter-spacing: 0.02em;
        background: #fff;
        border: 1px solid var(--border);
        border-bottom: 2px solid var(--ember);
        border-radius: 4px;
        color: var(--cream);
      }
      .wv-sign input.bad { border-color: #a3321f; }
      .wv-stamp { font-size: 12px; color: var(--ash); margin-top: 8px; line-height: 1.5; }
      .wv-done {
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px dashed var(--ember);
        border-radius: 6px;
        font-size: 13px;
        color: var(--cream);
      }
      .event-more {
        display: inline-block;
        margin-top: 8px;
        font-size: 13px;
        color: var(--ember-lt);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .event-more:hover { color: var(--cream); }
      .wiz-review {
        display: grid;
        gap: 10px;
      }
      .wiz-man {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-left: 4px solid var(--r-accent);
        border-radius: 6px;
        padding: 12px 14px;
      }
      .wiz-man .wm-name {
        font-weight: 600;
        color: var(--cream);
      }
      .wiz-man .wm-meta {
        font-size: 13px;
        color: var(--smoke);
      }
      .wiz-man .wm-badge {
        font-family: var(--display);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #fff;
        background: var(--r-accent);
        border-radius: 4px;
        padding: 5px 9px;
        white-space: nowrap;
      }
      .wiz-contact {
        margin-top: 14px;
        padding: 12px 14px;
        border: 1px solid var(--ember);
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.55;
        color: var(--cream);
      }
      .wiz-contact b {
        color: var(--ember);
        word-break: break-all;
      }
      .wiz-edit {
        background: none;
        border: none;
        padding: 0;
        color: var(--ember);
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
      }
      .wiz-nav {
        display: flex;
        gap: 10px;
        margin-top: 18px;
      }
      .wiz-nav .wiz-next {
        flex: 1;
        margin: 0;
      }
      .wiz-back {
        flex: 0 0 auto;
        padding: 0 18px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--smoke);
        font-family: var(--display);
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
      }
      .wiz-back[hidden] {
        display: none;
      }
      .wiz-next:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .ticket-modal.wiz .notify-msg.err {
        color: #a3321f;
        font-weight: 600;
        overflow-wrap: anywhere;
      }
      .ticket-modal.wiz .wiz-fix {
        display: block;
        width: 100%;
        margin: 10px 0 6px;
        padding: 12px 14px;
        border: none;
        border-radius: 6px;
        background: #a3321f;
        color: #fff;
        font-family: var(--display);
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
      }
      .ticket-modal.wiz .wiz-sugg {
        display: block;
        margin-top: 2px;
        font-size: 15px;
        overflow-wrap: anywhere;
      }
      .ticket-modal.wiz .wiz-keep {
        display: block;
        font-weight: 500;
      }
      @media (max-width: 640px) {
        .ticket-modal.wiz {
          padding: 30px 18px 22px;
        }
        .wiz-classes {
          grid-template-columns: 1fr;
        }
        .wiz-title {
          font-size: 22px;
        }
      }
      .reg-secure {
        margin-top: 12px;
        font-size: 12px;
        color: var(--ash);
        opacity: 0.75;
      }
      @media (max-width: 480px) {
        .reg-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ── Notify List Capture ── */
      .notify-banner {
        background: var(--bg-card);
        border: 1px solid rgba(242, 107, 29, 0.35);
        border-radius: 8px;
        padding: 40px;
        margin-bottom: 80px;
        position: relative;
        overflow: hidden;
      }
      .notify-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(to right, var(--ember), var(--ember-lt));
      }
      .notify-copy {
        text-align: center;
        max-width: 560px;
        margin: 0 auto 28px;
      }
      .notify-copy h3 {
        font-family: var(--display);
        font-size: clamp(22px, 3vw, 30px);
        font-weight: 600;
        color: var(--cream);
        margin-bottom: 10px;
      }
      .notify-copy p {
        color: var(--ash);
        line-height: 1.6;
        font-size: 15px;
      }
      .notify-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      /* Names side by side; email, mobile and the button span the row where
         the form is narrow (popup, phones). The home band puts email and
         mobile side by side on desktop (see .firstword-form). */
      .notify-fields .nf-wide,
      .notify-fields .notify-btn {
        grid-column: 1 / -1;
      }
      .notify-fields input {
        background: var(--bg-raised);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 14px 16px;
        color: var(--cream);
        font-family: var(--font);
        font-size: 16px; /* 16px minimum: iOS Safari and the Instagram browser zoom the page on smaller inputs */
        min-width: 0;
      }
      .notify-fields input::placeholder {
        color: var(--ash);
      }
      .notify-fields input:focus {
        outline: none;
        border-color: var(--ember);
      }
      .notify-btn {
        width: 100%;
        margin-top: 2px;
        padding: 14px 28px;
        white-space: nowrap;
      }
      .notify-hp {
        position: absolute;
        left: -9999px;
        opacity: 0;
        pointer-events: none;
      }
      .notify-msg {
        text-align: center;
        margin-top: 14px;
        font-size: 14px;
        min-height: 20px;
      }
      .notify-msg.ok {
        color: var(--ember-lt);
        font-weight: 600;
      }
      .notify-msg.err {
        color: #d9776a;
      }
      .notify-msg.confirm {
        color: var(--cream);
        border: 1px solid var(--ember);
        border-radius: 6px;
        padding: 12px 14px;
        line-height: 1.55;
      }
      .notify-msg.confirm b {
        color: var(--ember-lt);
        word-break: break-all;
      }
      .notify-consent {
        text-align: center;
        color: var(--ash);
        font-size: 12px;
        margin-top: 12px;
        opacity: 0.75;
      }
      @media (max-width: 900px) {
        .firstword-form .notify-fields .nf-email,
        .firstword-form .notify-fields .nf-phone {
          grid-column: 1 / -1;
        }
        .notify-banner {
          padding: 28px 20px;
        }
      }

      /* ── What to Expect: 2 x 2, every cell pulls its weight ── */
      .expect-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px 48px;
        align-items: stretch;
      }
      .expect-col {
        display: flex;
        flex-direction: column;
      }
      .expect-where h4,
      .expect-panel h4 {
        font-family: var(--display);
        font-size: 18px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cream);
        margin: 0 0 12px;
      }
      /* The photo grows to meet the agenda's height so both columns land on
         the same baseline. */
      .expect-photo {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 300px;
        max-width: none;
        margin: 0 0 22px;
      }
      /* The image fills whatever height the column gives the box, so the
         photo can never set the row height itself. */
      .expect-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .expect-where p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--smoke);
        margin: 0;
      }
      .expect-panel {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 24px 26px 20px;
      }
      .expect-panel .pack-list li:last-child {
        border-bottom: none;
      }
      .agenda-note {
        margin-top: auto;
        padding-top: 18px;
      }
      .agenda-list {
        list-style: none;
      }
      .agenda-item {
        display: flex;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
      }
      .agenda-item:last-child {
        border-bottom: none;
      }
      .agenda-time {
        font-family: var(--display);
        font-size: 16px;
        letter-spacing: 0.04em;
        color: var(--ember-lt);
        white-space: nowrap;
        min-width: 110px;
      }
      .agenda-desc {
        font-size: 16px;
        color: var(--smoke);
        line-height: 1.5;
      }
      .expect-details h4 {
        font-family: var(--display);
        font-size: 18px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cream);
        margin-bottom: 12px;
        margin-top: 24px;
      }
      .expect-details h4:first-child {
        margin-top: 0;
      }
      .expect-details p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--smoke);
      }
      @media (max-width: 768px) {
        .events-grid {
          grid-template-columns: 1fr;
        }
        .event-card-center {
          width: 100%;
        }
        .expect-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .expect-photo {
          flex: none;
          width: 100%;
          aspect-ratio: 4 / 3;
          min-height: 0;
          margin: 0 0 20px;
        }
        .agenda-note {
          margin-top: 18px;
          padding-top: 0;
        }
      }

      /* ═══════════════════════════════════════════════════════
   TESTIMONIALS — Auto-scrolling carousel
   ═══════════════════════════════════════════════════════ */
      #testimonials {
        position: relative;
        overflow: hidden;
      }
      .testimonials-bg-photo {
        position: absolute;
        inset: 0;
        background: url("photos/Fireside-40.webp") center/cover no-repeat;
        opacity: 0.13;
        filter: brightness(0.85) contrast(1.05);
        pointer-events: none;
      }
      .testimonials-header {
        text-align: center;
        margin-bottom: 48px;
      }

      /* Carousel track */
      .testimonial-carousel {
        overflow: hidden;
        position: relative;
        mask-image: linear-gradient(
          to right,
          transparent,
          black 5%,
          black 95%,
          transparent
        );
        -webkit-mask-image: linear-gradient(
          to right,
          transparent,
          black 5%,
          black 95%,
          transparent
        );
      }
      .testimonial-track {
        display: flex;
        gap: 20px;
        animation: scrollTestimonials 60s linear infinite;
        width: max-content;
      }
      .testimonial-track:hover {
        animation-play-state: paused;
      }
      @keyframes scrollTestimonials {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .test-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 32px;
        position: relative;
        min-width: 360px;
        max-width: 400px;
        flex-shrink: 0;
      }
      .test-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .test-stars {
        font-size: 14px;
        letter-spacing: 3px;
        color: var(--ember-lt);
        margin-top: 6px;
      }
      .test-quote-mark {
        font-family: Georgia, serif;
        font-size: 48px;
        line-height: 1;
        color: var(--ember);
        opacity: 0.4;
      }
      .test-card blockquote {
        font-size: 15px;
        line-height: 1.7;
        color: var(--smoke);
        font-style: italic;
        margin-bottom: 20px;
        text-wrap: pretty;
      }
      .test-author {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
      }
      .test-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--ember-glow);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--display);
        font-size: 14px;
        font-weight: 600;
        color: var(--ember-lt);
      }
      .test-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--cream);
      }
      .test-role {
        font-size: 12px;
        color: var(--ash);
      }
      @media (max-width: 500px) {
        .test-card {
          min-width: 300px;
          max-width: 320px;
        }
      }

      /* ═══════════════════════════════════════════════════════
   THE CODE / MANTRA
   ═══════════════════════════════════════════════════════ */
      .mantra {
        background: var(--bg-raised);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        text-align: center;
      }
      .mantra-content {
        max-width: 680px;
        margin: 0 auto;
      }
      .mantra-plate {
        margin-top: 40px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 36px 40px;
        text-align: left;
      }
      .mantra-lines {
        list-style: none;
      }
      .mantra-lines li {
        display: flex;
        align-items: baseline;
        gap: 18px;
        font-size: 16px;
        line-height: 1.7;
        color: var(--smoke);
        padding: 13px 0;
        border-bottom: 1px solid var(--border);
        text-wrap: pretty;
      }
      .mantra-lines li:last-child {
        border-bottom: none;
      }
      .code-num {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: var(--ember);
        flex-shrink: 0;
        width: 26px;
      }
      .mantra-lines li.code-anchor {
        font-family: var(--display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      @media (max-width: 640px) {
        .mantra-plate {
          padding: 26px 20px;
        }
        .mantra-lines li {
          gap: 12px;
        }
      }
      .mantra-lines li strong {
        color: var(--cream);
        font-weight: 600;
      }
      .mantra-lines li em {
        color: var(--ember-lt);
        font-style: normal;
        font-weight: 600;
      }

      /* ═══════════════════════════════════════════════════════
   KEITH GIBBS TRIBUTE
   ═══════════════════════════════════════════════════════ */
      #keith {
        position: relative;
        overflow: hidden;
      }
      .tribute-bg-photo {
        position: absolute;
        inset: 0;
        background: url("photos/Fireside-12.webp") center/cover no-repeat;
        opacity: 0.14;
        filter: grayscale(0.3) brightness(0.85);
        pointer-events: none;
      }
      #keith::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            to bottom,
            var(--bg) 0%,
            transparent 15%,
            transparent 85%,
            var(--bg) 100%
          ),
          radial-gradient(
            ellipse at 30% 50%,
            rgba(242, 107, 29, 0.05),
            transparent 60%
          );
        pointer-events: none;
        z-index: 1;
      }
      #keith > .container {
        position: relative;
        z-index: 2;
      }
      .tribute-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 60px;
        align-items: start;
      }
      .tribute-aside {
        position: sticky;
        top: 100px;
      }
      .tribute-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(242, 107, 29, 0.08);
        border: 1px solid rgba(242, 107, 29, 0.15);
        padding: 8px 16px;
        border-radius: 100px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ember-lt);
        margin-bottom: 20px;
      }
      .tribute-aside h2 {
        font-family: var(--display);
        font-size: clamp(28px, 4vw, 44px);
        font-weight: 600;
        line-height: 1.18;
        padding-bottom: 0.08em;
        margin-bottom: 16px;
      }
      .tribute-portrait {
        aspect-ratio: 4/3;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 32px;
        position: relative;
        max-width: 320px;
      }
      .tribute-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .tribute-portrait::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(19, 14, 13, 0.2), transparent);
      }
      .tribute-verse {
        margin-top: 32px;
      }
      .tribute-verse p {
        font-size: 14px;
        font-style: italic;
        line-height: 1.7;
        color: var(--smoke);
      }
      .tribute-verse cite {
        display: block;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        color: var(--ember-lt);
        margin-top: 8px;
      }
      .tribute-body p {
        font-size: 16px;
        line-height: 1.8;
        color: var(--smoke);
        margin-bottom: 20px;
        text-wrap: pretty;
      }
      .tribute-body .signature {
        font-size: 14px;
        font-weight: 600;
        color: var(--cream);
        margin-top: 32px;
        font-style: italic;
      }
      @media (max-width: 768px) {
        .tribute-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .tribute-aside {
          position: static;
        }
      }

      /* ═══════════════════════════════════════════════════════
   COMMUNITY
   ═══════════════════════════════════════════════════════ */
      .community {
        background: var(--bg-raised);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .community-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }
      .community-features {
        display: grid;
        gap: 16px;
        margin-top: 32px;
      }
      .comm-feature {
        display: flex;
        gap: 16px;
        align-items: start;
      }
      .comm-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ember-glow);
        border-radius: 6px;
      }
      .comm-icon svg {
        width: 16px;
        height: 16px;
        stroke: var(--ember-lt);
        fill: none;
        stroke-width: 2;
      }
      .comm-feature h3 {
        font-size: 15px;
        font-weight: 700;
        color: var(--cream);
        margin-bottom: 2px;
      }
      .comm-feature p {
        font-size: 13px;
        color: var(--smoke);
        line-height: 1.5;
      }
      .community-photo {
        aspect-ratio: 4/3;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
      }
      .community-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85) contrast(1.05);
      }
      .community-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(19, 14, 13, 0.4), transparent);
      }
      @media (max-width: 768px) {
        .community-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }

      /* ═══════════════════════════════════════════════════════
   FAQs
   ═══════════════════════════════════════════════════════ */
      .faqs-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 60px;
        align-items: start;
      }
      /* Desktop: the FAQ heading rides along while the questions scroll and
         leaves with the section; the grid's own height bounds it, so it never
         covers the next section (Justyn, 2026-11-07). Stacked on phones. */
      @media (min-width: 769px) {
        .faqs-head {
          position: sticky;
          top: 112px; /* 72px nav + 40px air */
        }
      }
      .faq-item {
        border-bottom: 1px solid var(--border);
      }
      .faq-question {
        width: 100%;
        background: none;
        border: none;
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font-family: var(--font);
        font-size: 15px;
        font-weight: 600;
        color: var(--cream);
        text-align: left;
      }
      .faq-question svg {
        width: 16px;
        height: 16px;
        stroke: var(--ash);
        flex-shrink: 0;
        transition: transform 0.3s ease;
      }
      .faq-item.open .faq-question svg {
        transform: rotate(45deg);
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.3s ease,
          padding 0.3s ease;
      }
      .faq-answer-inner {
        padding-bottom: 20px;
        font-size: 14px;
        line-height: 1.7;
        color: var(--smoke);
      }
      .faq-item.open .faq-answer {
        max-height: 200px;
      }
      @media (max-width: 768px) {
        .faqs-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
      }

      /* ═══════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════ */
      .final-cta {
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .final-cta-bg-photo {
        position: absolute;
        inset: 0;
        background: url("photos/Fireside-11.webp") center/cover no-repeat;
        opacity: 0.12;
        filter: grayscale(0.3);
        pointer-events: none;
      }
      .final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse at 30% 20%,
            rgba(242, 107, 29, 0.08),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 70% 80%,
            rgba(242, 107, 29, 0.04),
            transparent 40%
          ),
          radial-gradient(
            circle at 50% 50%,
            rgba(19, 14, 13, 0.45),
            transparent 70%
          );
        pointer-events: none;
      }
      .cta-reticle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 440px;
        height: 440px;
        color: var(--ember-lt);
        opacity: 0.16;
        pointer-events: none;
      }
      .final-cta .container {
        position: relative;
      }
      .final-cta .section-title {
        margin-bottom: 12px;
      }
      .final-cta .section-sub {
        margin: 0 auto 40px;
        text-align: center;
      }

      /* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
      .footer {
        border-top: 1px solid var(--border);
        background: var(--bg-raised);
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 48px;
        padding: var(--section-py) 0 60px;
      }
      .footer-brand img {
        height: 80px;
        opacity: 0.9;
        margin-bottom: 16px;
      }
      .footer-brand p {
        font-size: 14px;
        line-height: 1.7;
        color: var(--ash);
        max-width: 300px;
        margin-bottom: 20px;
      }
      .footer-social {
        display: flex;
        gap: 12px;
      }
      .footer-social a {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--ash);
        text-decoration: none;
        transition:
          border-color 0.2s,
          color 0.2s;
      }
      .footer-social a:hover {
        border-color: var(--ember);
        color: var(--ember-lt);
      }
      .footer-social svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
      }
      .footer-col h3 {
        font-family: var(--display);
        font-size: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--cream);
        margin-bottom: 16px;
      }
      .footer-col ul {
        list-style: none;
      }
      .footer-col li {
        margin-bottom: 10px;
      }
      .footer-col a {
        font-size: 14px;
        color: var(--ash);
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-col a:hover {
        color: var(--cream);
      }
      .footer-bottom {
        padding: 20px 0;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--ash);
      }
      @media (max-width: 768px) {
        .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
      }
      @media (max-width: 480px) {
        .footer-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ═══════════════════════════════════════════════════════
   MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════════════ */
      @media (max-width: 768px) {
        /* Tighter spacing on mobile */
        :root {
          --section-py: clamp(40px, 8vw, 64px);
        }
        .container {
          padding: 0 16px;
        }

        /* Center all section headers */
        .section-label {
          justify-content: center;
        }
        .section-title {
          text-align: center;
        }
        .section-sub {
          text-align: center;
          margin-left: auto;
          margin-right: auto;
        }

        /* Nav logo */
        .nav-logo img {
          height: 36px;
        }
        .nav-inner {
          height: 64px;
        }

        /* Hero */
        .hero-content {
          padding: 56px 16px 110px;
          text-align: center;
        }
        .hero-eyebrow {
          justify-content: center;
        }
        .hero h1 {
          font-size: clamp(40px, 11.5vw, 68px);
        }
        .hero-sub {
          font-size: clamp(20px, 5vw, 32px);
        }
        .hero-body {
          margin-left: auto;
          margin-right: auto;
          text-align: center;
        }
        .hero-actions {
          justify-content: center;
        }

        /* Stats */
        .stats-inner {
          grid-template-columns: 1fr !important;
        }
        .stat-item {
          border-right: none !important;
          border-bottom: 1px solid var(--border);
        }
        .stat-item:last-child {
          border-bottom: none;
        }

        /* Problem */
        .problem-text {
          text-align: center;
        }
        .problem-text .problem-lead {
          text-align: center;
        }
        /* Phone: label on its own line, the four words in a tidy 2 x 2 */
        .enemy-line {
          gap: 8px;
          font-size: 12px;
          letter-spacing: 0.1em;
        }
        .enemy-line i {
          display: none;
        }
        .enemy-line span:not(.enemy-label) {
          flex: 0 0 calc(50% - 4px);
          text-align: center;
        }
        .enemy-label {
          flex-basis: 100%;
          text-align: center;
          padding-right: 0;
          margin: 0 0 2px;
          border-right: none;
        }
        .problem-text p {
          text-align: center;
        }
        .scripture {
          text-align: center;
        }

        /* Pillars */
        .pillars-grid {
          grid-template-columns: 1fr !important;
          gap: 12px;
        }
        .pillar-card {
          padding: 32px 24px;
        }

        /* Path timeline */
        .path-header {
          margin-bottom: 40px;
        }
        .path-desc {
          text-align: center;
        }

        /* Photo slider */
        .path-photo-slider {
          margin-top: 40px;
        }
        .path-photo {
          width: 260px;
          height: 180px;
        }

        /* Events */
        .events-header {
          text-align: center;
        }
        .events-grid {
          max-width: 100% !important;
        }
        .expect-grid {
          text-align: center;
        }
        .expect-where,
        .expect-panel {
          text-align: center;
        }
        .expect-panel .pack-list li {
          text-align: center;
          padding-left: 0;
        }
        .expect-panel .pack-list li::before {
          display: none;
        }
        .agenda-item {
          justify-content: center;
          text-align: center;
          flex-direction: column;
          gap: 4px;
        }

        /* Testimonials */
        .testimonials-header {
          text-align: center;
        }
        .test-card {
          min-width: 280px;
          max-width: 300px;
          padding: 24px;
        }

        /* Mantra */
        .mantra-content {
          text-align: center;
        }

        /* Tribute */
        .tribute-grid {
          text-align: center;
        }
        .tribute-badge {
          margin-left: auto;
          margin-right: auto;
        }
        .tribute-aside h2 {
          text-align: center;
        }
        .tribute-portrait {
          max-width: 220px;
          max-height: 180px;
          margin-left: auto;
          margin-right: auto;
          aspect-ratio: 4/3;
        }
        .tribute-verse {
          text-align: center;
        }
        .tribute-body {
          text-align: center;
        }
        .tribute-body p {
          text-align: center;
        }

        /* Community */
        .community-grid {
          text-align: center;
        }
        .comm-feature {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
        .community-photo {
          max-height: 280px;
          margin: 0 auto;
        }
        .community-photo img {
          object-position: center;
        }

        /* FAQs */
        .faqs-grid {
          text-align: center;
        }
        .faq-question {
          text-align: center;
          justify-content: center;
          gap: 12px;
        }
        .faq-answer-inner {
          text-align: center;
        }

        /* Final CTA */
        .final-cta .section-sub {
          text-align: center;
        }

        /* Footer — always single column on mobile */
        .footer-grid {
          grid-template-columns: 1fr !important;
          text-align: center;
          gap: 32px;
        }
        .footer-brand {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .footer-brand p {
          text-align: center;
          max-width: 100%;
        }
        .footer-social {
          justify-content: center;
        }
        .footer-col {
          text-align: center;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 6px;
          text-align: center;
        }

        /* Events hero image centered */
        .events-hero-img {
          margin-left: auto;
          margin-right: auto;
        }

        /* Problem visual centered */
        .problem-visual {
          margin: 0 auto;
        }
        .problem-visual img {
          object-position: center;
        }
      }

      @media (max-width: 480px) {
        .hero h1 {
          font-size: clamp(38px, 11vw, 54px);
        }
        .hero-body {
          font-size: 15px;
        }
        .btn-primary,
        .btn-ghost {
          padding: 14px 28px;
          font-size: 13px;
          width: 100%;
          justify-content: center;
        }
        .hero-actions {
          flex-direction: column;
          align-items: center;
        }
        .event-card {
          padding: 24px;
        }
        .pillar-card {
          padding: 28px 20px;
        }
        .path-photo {
          width: 220px;
          height: 150px;
        }
      }
      /* ═══════════════════════════════════════════════════════
   EMBER PASS (2026-10-15) — canvas, glow, photo fades, icons
   Palette from the Fireside brand kit A6.14 v2 and Ryan's refresh deck.
   ═══════════════════════════════════════════════════════ */
      /* Section canvases: the deck's warm glow at the top of every dark slide */
      .stats-bar,
      .events,
      .community,
      .footer,
      .pillars {
        background: var(--bg-raised);
      }
      #testimonials {
        background: var(--bg);
      }
      .pillars-bg-texture {
        opacity: 0.55;
      }

      /* Hero: the photo shows, then falls into the ember canvas */
      .hero-bg-photo {
        opacity: 0.16;
        filter: sepia(0.15) saturate(1.05) contrast(1.05);
      }
      .hero::before {
        background:
          linear-gradient(
            to bottom,
            rgba(19, 14, 13, 0.55) 0%,
            rgba(19, 14, 13, 0.3) 30%,
            rgba(19, 14, 13, 0.72) 72%,
            var(--bg) 100%
          ),
          radial-gradient(
            ellipse 70% 55% at 50% 100%,
            rgba(120, 40, 14, 0.28),
            transparent 70%
          );
      }

      /* Photo fades go to ember, never to neutral black */
      .path-photo::after,
      .events-hero-img::after,
      .community-photo::after,
      .tribute-portrait::after {
        background: linear-gradient(
          to top,
          rgba(19, 14, 13, 0.72),
          rgba(19, 14, 13, 0.18) 55%,
          transparent
        );
      }
      .problem-visual::after {
        background:
          linear-gradient(
            to top,
            rgba(19, 14, 13, 0.55),
            rgba(19, 14, 13, 0) 55%
          ),
          linear-gradient(135deg, rgba(242, 107, 29, 0.12), transparent);
      }
      .card-photo {
        filter: sepia(0.15) saturate(1.05);
      }
      .testimonials-bg-photo,
      .tribute-bg-photo,
      .final-cta-bg-photo {
        opacity: 0.16;
        filter: sepia(0.2) saturate(1.05) brightness(0.8);
      }
      #keith::before {
        background:
          linear-gradient(
            to bottom,
            var(--bg) 0%,
            transparent 15%,
            transparent 85%,
            var(--bg) 100%
          ),
          radial-gradient(
            ellipse at 30% 50%,
            rgba(120, 40, 14, 0.22),
            transparent 60%
          );
      }
      .final-cta::before {
        background:
          radial-gradient(
            ellipse 70% 70% at 50% 50%,
            rgba(120, 40, 14, 0.32),
            transparent 70%
          ),
          linear-gradient(
            to bottom,
            var(--bg),
            transparent 20%,
            transparent 80%,
            var(--bg)
          );
      }

      /* Filled buttons: flame orange with ember ink, like the deck's chips */
      .btn-primary,
      .nav-cta,
      .event-register-btn,
      .ticket-proceed-btn,
      .notify-btn {
        color: #130e0d;
        font-weight: 600;
      }
      .btn-primary:hover,
      .nav-cta:hover,
      .event-register-btn:hover,
      .ticket-proceed-btn:hover,
      .notify-btn:hover {
        color: #130e0d;
      }

      /* Pillars: outlined numerals, kit icons */
      .pillar-watermark {
        font-size: 150px;
        right: -6px;
        bottom: -36px;
        color: transparent;
        -webkit-text-stroke: 1px rgba(254, 140, 26, 0.55);
        opacity: 0.5;
        transition: opacity 0.4s ease;
      }
      .pillar-card:hover .pillar-watermark {
        opacity: 0.85;
      }
      .pillar-icon {
        width: 60px;
        height: 60px;
        background: rgba(242, 107, 29, 0.1);
        border-color: rgba(242, 107, 29, 0.25);
      }
      .pillar-icon svg {
        width: 26px;
        height: 26px;
        color: var(--ember-lt);
        stroke-width: 1.6;
      }
      .pillar-card:hover .pillar-icon svg {
        color: var(--cream);
      }

      /* Pack lists: the deck's square bullets */
      .pack-list {
        list-style: none;
        margin: 0 0 4px;
      }
      .pack-list li {
        position: relative;
        text-align: left;
        padding: 9px 0 9px 20px;
        border-bottom: 1px solid var(--border);
        font-size: 15px;
        line-height: 1.5;
        color: var(--smoke);
      }
      .pack-list li:last-child {
        border-bottom: none;
      }
      .pack-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 17px;
        width: 7px;
        height: 7px;
        background: var(--ember);
      }
      .pack-note {
        font-size: 14px;
        color: var(--ash);
        margin-top: 10px;
      }

      /* Scripture: the deck's serif verse */
      .scripture {
        background: none;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        padding: 28px 0 0;
        margin-top: 36px;
      }
      .scripture p {
        font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
          serif;
        font-style: normal;
        font-size: clamp(20px, 2.4vw, 26px);
        line-height: 1.4;
        color: var(--cream);
        text-wrap: balance;
      }
      .scripture cite {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ember);
        margin-top: 14px;
      }
      .scripture cite::before {
        content: "";
        width: 22px;
        height: 1px;
        background: var(--ember);
      }

      /* Headlines: the deck's condensed caps */
      .section-title,
      .tribute-aside h2,
      .notify-copy h3 {
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.04;
      }

      /* Season: the next gathering stands out */
      .event-card.event-next {
        border-color: rgba(242, 107, 29, 0.55);
        box-shadow:
          0 0 0 1px rgba(242, 107, 29, 0.22),
          0 18px 40px rgba(0, 0, 0, 0.35);
      }
      .event-card.event-next .card-photo {
        opacity: 0.26;
      }
      .event-next-chip {
        position: absolute;
        top: 3px;
        left: 32px;
        z-index: 2;
        font-family: var(--display);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #130e0d;
        background: var(--ember);
        padding: 4px 10px;
        border-radius: 0 0 4px 4px;
      }

      /* Event cards: the date and the title carry the card */
      .event-date-block {
        gap: 22px;
        align-items: center;
        margin-bottom: 22px;
      }
      .event-month-box {
        min-width: 100px;
        padding: 14px 18px;
        border-radius: 8px;
      }
      .event-month-box .month {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.16em;
      }
      .event-month-box .day {
        font-size: 46px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 2px 0;
        white-space: nowrap;
      }
      .season-hunt .event-month-box .day {
        font-size: 34px;
      }
      .event-info h3 {
        font-size: clamp(28px, 2.7vw, 38px);
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.02;
        margin-bottom: 8px;
      }
      .event-info .when {
        font-family: var(--display);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--s-accent-lt);
        margin-bottom: 4px;
      }
      .event-info .loc {
        font-size: 15px;
        color: var(--smoke);
      }
      /* A gathering that already happened */
      .event-done {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--display);
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--cream);
      }
      .event-done svg {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        fill: none;
        stroke: var(--s-accent-lt);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .event-done svg circle {
        fill: color-mix(in srgb, var(--s-accent) 22%, transparent);
      }
      .event-done-sub {
        font-size: 14px;
        line-height: 1.5;
        color: var(--ash);
        margin: 10px 0 0;
      }
      /* A completed gathering steps back: photo drained, type muted, no lift
         on hover. The Register For <next> button stays lit as the one live
         thing on the card. */
      .event-card.event-complete {
        --s-accent: #6d6152;
        --s-accent-lt: #9a8680;
        border-color: rgba(255, 255, 255, 0.06);
      }
      .event-card.event-complete:hover {
        transform: none;
        box-shadow: none;
      }
      .event-card.event-complete .card-photo,
      .event-card.event-complete:hover .card-photo {
        filter: grayscale(1);
        opacity: 0.07;
      }
      .event-card.event-complete .event-info h3,
      .event-card.event-complete .event-info .when,
      .event-card.event-complete .event-month-box .day,
      .event-card.event-complete .event-done {
        color: var(--ash);
      }
      .event-card.event-complete .season-tag,
      .event-card.event-complete .event-month-box {
        opacity: 0.6;
      }
      .event-next-btn {
        background: transparent;
        color: var(--ember-lt);
        border: 1px solid rgba(242, 107, 29, 0.55);
      }
      .event-next-btn:hover {
        background: var(--ember);
        color: #1a0404;
      }
      @media (max-width: 768px) {
        .event-date-block {
          gap: 16px;
        }
        .event-month-box {
          min-width: 86px;
          padding: 12px 14px;
        }
        .event-month-box .day {
          font-size: 38px;
        }
        .season-hunt .event-month-box .day {
          font-size: 28px;
        }
        .event-info h3 {
          font-size: 26px;
        }
        .event-done {
          font-size: 15px;
        }
        .event-date-block {
          margin-top: 14px; /* clear the season tag now that titles are bigger */
        }
      }

      /* Hog Hunt: Get First Word button on the card + its popup */
      .event-notify-btn {
        background: var(--ember);
        color: #1a0404;
      }
      .event-notify-btn:hover {
        background: var(--ember-lt);
        color: #1a0404;
      }
      .hunt-modal .hunt-sub {
        color: var(--smoke);
        font-size: 15px;
        line-height: 1.6;
        margin: -12px 0 22px;
      }
      .hunt-modal .notify-fields {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .hunt-modal .notify-btn {
        width: 100%;
        margin-top: 4px;
      }
      .hunt-modal .notify-msg,
      .hunt-modal .notify-consent {
        text-align: left;
      }
      .hunt-modal .notify-consent {
        margin-top: 14px;
      }

      /* Day / night timeline */
      .agenda-list {
        position: relative;
        padding-left: 24px;
      }
      .agenda-list::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 12px;
        bottom: 14px;
        width: 1px;
        background: var(--border-lt);
      }
      .agenda-item {
        position: relative;
        border-bottom: none;
        padding: 9px 0;
      }
      .agenda-item::before {
        content: "";
        position: absolute;
        left: -24px;
        top: 17px;
        width: 11px;
        height: 11px;
        box-sizing: border-box;
        border-radius: 50%;
        background: var(--bg-raised);
        border: 2px solid var(--ember-dk);
      }
      .agenda-phase {
        position: relative;
        list-style: none;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ember-lt);
        padding: 14px 0 6px;
      }
      .agenda-phase:first-child {
        padding-top: 2px;
      }
      .agenda-phase::before {
        content: "";
        position: absolute;
        left: -24px;
        top: 50%;
        margin-top: -1px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--ember);
        box-shadow: 0 0 0 4px rgba(242, 107, 29, 0.18);
      }
      .agenda-phase:first-child::before {
        margin-top: -6px;
      }
      .agenda-fire .agenda-time,
      .agenda-fire .agenda-desc {
        color: var(--ember-lt);
      }
      .agenda-fire .agenda-desc {
        color: var(--cream);
      }
      .agenda-fire::before {
        border-color: var(--ember);
        background: var(--ember);
      }

      @media (max-width: 768px) {
        .hero-content {
          padding-top: 120px;
        }
        .hero-eyebrow {
          font-size: 11px;
          letter-spacing: 0.14em;
          white-space: nowrap;
        }
        /* Timeline reads left to right on the phone, dots stay on the rail */
        .agenda-list {
          text-align: left;
        }
        .agenda-item {
          justify-content: flex-start;
          align-items: flex-start;
          text-align: left;
        }
      }

      /* Final CTA: two actions */
      .cta-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      .final-cta .btn-ghost {
        display: inline-flex;
        align-items: center;
      }

      /* Footer: the verse under the mark, as in the lockup */
      .footer-verse {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ember);
        margin: -4px 0 18px;
      }
      .footer-verse::before,
      .footer-verse::after {
        content: "";
        width: 22px;
        height: 1px;
        background: rgba(242, 107, 29, 0.6);
      }
      /* The verse sits on its own line under the mark, never beside it */
      .footer-brand img {
        display: block;
      }
      .footer-verse {
        display: flex;
        width: max-content;
        max-width: 100%;
      }

      /* ═══════════════════════════════════════════════════════
   FILL PASS (2026-10-15) — sections carry their width
   ═══════════════════════════════════════════════════════ */
      /* Why Fireside: one photo, running the full height of the copy */
      .problem-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 72px;
        align-items: stretch;
      }
      .problem-visual {
        aspect-ratio: auto;
        min-height: 420px;
      }
      .problem-visual img {
        position: absolute;
        inset: 0;
        object-position: 50% 35%;
      }

      /* Pillars: a touch more room, numerals kept quiet */
      .pillar-card {
        padding: 46px 28px 42px;
      }
      .pillar-watermark {
        right: -16px;
        bottom: -46px;
        opacity: 0.28;
      }
      .pillar-card:hover .pillar-watermark {
        opacity: 0.55;
      }
      /* Community: the Fireside Online render is already night-dark */
      .community-photo img {
        filter: brightness(0.96) contrast(1.03);
        object-position: 50% 45%;
      }

      /* Code: intro and photo left, the creed right, outlined numerals */
      .mantra {
        text-align: left;
      }
      .code-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 64px;
        align-items: stretch;
      }
      .code-intro {
        display: flex;
        flex-direction: column;
      }
      .code-intro .section-sub {
        margin: 0 0 28px;
      }
      .code-photo {
        position: relative;
        flex: 1;
        min-height: 300px;
        border-radius: 8px;
        overflow: hidden;
      }
      .code-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 30%;
      }
      .code-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            to top,
            rgba(19, 14, 13, 0.55),
            rgba(19, 14, 13, 0) 55%
          ),
          linear-gradient(135deg, rgba(242, 107, 29, 0.12), transparent);
      }
      .mantra-plate {
        margin-top: 0;
        padding: 36px 44px;
      }
      .mantra-lines li {
        padding: 17px 0;
        gap: 22px;
        font-size: 17px;
      }
      .code-num {
        width: 46px;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        color: var(--ember);
        opacity: 0.5;
        transform: translateY(2px);
      }
      .mantra-lines li.code-anchor {
        font-size: 23px;
      }
      .mantra-lines li.code-anchor .code-num {
        opacity: 1;
      }

      @media (max-width: 1020px) {
        .problem-grid {
          gap: 40px;
        }
        .problem-visual {
          margin: 0;
          width: 100%;
        }
        .code-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .code-photo {
          flex: none;
          aspect-ratio: 16 / 9;
          min-height: 0;
        }
      }
      @media (max-width: 768px) {
        .problem-grid {
          grid-template-columns: 1fr;
          gap: 32px;
          align-items: start;
        }
        .problem-visual {
          aspect-ratio: auto;
          min-height: 0;
          height: min(300px, calc((100vw - 32px) * 0.72));
        }
        .code-intro .section-sub {
          text-align: center;
          margin: 0 auto 24px;
        }
        .mantra-plate {
          padding: 26px 20px;
        }
        .mantra-lines li {
          gap: 14px;
          font-size: 16px;
        }
        .code-num {
          width: 34px;
          font-size: 22px;
        }
        .mantra-lines li.code-anchor {
          font-size: 19px;
        }
      }

      /* ── Why Fireside on the phone: photo under the title, enemy as a 2x2 plate ── */
      .problem-photo-m {
        display: none;
      }
      @media (max-width: 768px) {
        .problem-visual {
          display: none;
        }
        .problem-photo-m {
          display: block;
          position: relative;
          aspect-ratio: 16 / 10;
          border-radius: 8px;
          overflow: hidden;
          margin: 4px 0 24px;
        }
        .problem-photo-m img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 35%;
          display: block;
        }
        .problem-text .problem-lead {
          font-size: 22px;
          margin-bottom: 14px;
        }
        .problem-text p {
          font-size: 15.5px;
          line-height: 1.7;
        }
        .enemy-line {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          margin: 20px 0 22px;
          border: 1px solid var(--border);
          border-radius: 6px;
          overflow: hidden;
          background: color-mix(in srgb, var(--bg-card) 70%, transparent);
          font-size: 12px;
          letter-spacing: 0.12em;
        }
        .enemy-label {
          grid-column: 1 / -1;
          flex-basis: auto;
          margin: 0;
          padding: 9px 12px;
          text-align: center;
          border-right: none;
          border-bottom: 1px solid var(--border);
          background: rgba(179, 42, 42, 0.08);
        }
        .enemy-line span:not(.enemy-label) {
          flex: none;
          padding: 12px 8px;
          text-align: center;
          border-right: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
        }
        .enemy-line span:nth-child(4),
        .enemy-line span:nth-child(8) {
          border-right: none;
        }
        .enemy-line span:nth-child(6),
        .enemy-line span:nth-child(8) {
          border-bottom: none;
        }
        .scripture {
          margin-top: 30px;
          padding-top: 24px;
        }
        .scripture p {
          font-size: 19px;
        }
      }

      /* ═══════════════════════════════════════════════════════
   PERFECT PASS (2026-10-28): anchors, focus, labels, tap targets,
   responsive photos, accordion heights, reduced motion, no-JS
   ═══════════════════════════════════════════════════════ */
      html {
        scroll-padding-top: 84px;
      }
      @media (max-width: 900px) {
        html {
          scroll-padding-top: 72px;
        }
      }
      /* Without JavaScript nothing stays hidden */
      html:not(.js) .reveal {
        opacity: 1;
        transform: none;
      }
      .skip-link {
        position: absolute;
        top: -100px;
        left: 16px;
        z-index: 3000;
        padding: 12px 18px;
        background: var(--ember);
        color: #130e0d;
        font-family: var(--display);
        font-size: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
      }
      .skip-link:focus {
        top: 12px;
      }
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:focus-visible {
        outline: 2px solid var(--ember-lt);
        outline-offset: 3px;
      }
      .ticket-modal.wiz :focus-visible {
        outline-color: #a3321f;
      }
      body.modal-lock {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
      }
      /* Label floor: nothing a man has to read sits under 12px */
      .section-label,
      .season-tag,
      .photo-tag {
        font-size: 12px;
      }
      .event-next-chip,
      .hero-scroll {
        font-size: 11px;
      }
      @media (max-width: 768px) {
        .hero-eyebrow {
          font-size: 12px;
          letter-spacing: 0.12em;
          white-space: normal;
        }
      }
      .agenda-phase,
      .rank-tag {
        font-size: 12px;
      }
      .path-chip,
      .path-rank-box .lvl {
        font-size: 11px;
      }
      /* Tap targets: 44px on anything a thumb lands on */
      .nav-toggle {
        padding: 10px;
        margin-right: -10px;
      }
      .ticket-modal-close {
        top: 8px;
        right: 8px;
        padding: 10px 12px;
        font-size: 22px;
        line-height: 1;
      }
      .footer-col li {
        margin-bottom: 0;
      }
      .footer-col a {
        display: inline-block;
        padding: 6px 0;
      }
      .path-unsure-link {
        padding: 6px 2px 7px;
      }
      /* Logos keep their aspect from the width/height attributes */
      .nav-logo img,
      .footer-brand img {
        width: auto;
      }
      .problem-photo-m img {
        height: 100%;
      }
      /* Range by Day: centered header on phones, the rail stays left */
      @media (max-width: 768px) {
        .expect-when .section-title,
        .expect-when .section-sub {
          text-align: center;
          margin-left: auto;
          margin-right: auto;
        }
      }
      /* FAQ answers open to any height (the hunt answer is long on a phone) */
      .faq-answer {
        max-height: none;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.32s ease;
      }
      .faq-item.open .faq-answer {
        max-height: none;
        grid-template-rows: 1fr;
      }
      .faq-answer-inner {
        min-height: 0;
        overflow: hidden;
      }
      /* Card photos: 800px cuts, 480px cuts on phones, one gradient */
      .card-photo {
        background-image:
          linear-gradient(100deg, #221917 25%, rgba(34, 25, 23, 0.35) 75%),
          var(--photo);
      }
      @media (max-width: 640px) {
        .card-photo {
          background-image:
            linear-gradient(100deg, #221917 25%, rgba(34, 25, 23, 0.35) 75%),
            var(--photo-m, var(--photo));
        }
        .hero-bg-photo,
        .final-cta-bg-photo {
          background-image: url("photos/Fireside-11-m.webp");
        }
        .testimonials-bg-photo {
          background-image: url("photos/Fireside-40-m.webp");
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        .reveal {
          transition: none;
          opacity: 1;
          transform: none;
        }
        .testimonial-track {
          animation: none;
        }
        .testimonial-carousel {
          overflow-x: auto;
          mask-image: none;
          -webkit-mask-image: none;
        }
        .hero-scroll-line,
        .ticket-modal {
          animation: none;
        }
        #emberCanvas,
        #globalEmberCanvas {
          display: none;
        }
      }
    

/* Self-hosted fonts for Fireside 610 — eliminates Google Fonts CDN round-trip on mobile */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src:
    url("/fonts/oswald-variable.woff2") format("woff2-variations"),
    url("/fonts/oswald-variable.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src:
    url("/fonts/dmsans-variable.woff2") format("woff2-variations"),
    url("/fonts/dmsans-variable.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dmsans-italic-400.woff") format("woff");
}
/* Metric-matched fallbacks. While Oswald and DM Sans download, the system font
   renders at the same advance widths and line boxes, so the swap moves nothing
   (before this the hero shifted 0.11 CLS on a slow connection). Measured in
   Chromium 2026-11-07 against the shipped woff2 files; weight 700 and 400-600
   get their own size-adjust because the bold runs wider. */
@font-face {
  font-family: "Oswald Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  size-adjust: 96.46%;
  ascent-override: 123.67%;
  descent-override: 29.96%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Oswald Fallback";
  font-style: normal;
  font-weight: 400 600;
  src: local("Arial Narrow"), local("ArialNarrow");
  size-adjust: 87.92%;
  ascent-override: 135.69%;
  descent-override: 32.87%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Oswald Fallback Arial";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 79.11%;
  ascent-override: 150.81%;
  descent-override: 36.53%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Oswald Fallback Arial";
  font-style: normal;
  font-weight: 400 600;
  src: local("Arial"), local("ArialMT");
  size-adjust: 72.11%;
  ascent-override: 165.45%;
  descent-override: 40.08%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "DM Sans Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.26%;
  ascent-override: 97.97%;
  descent-override: 30.61%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "DM Sans Fallback";
  font-style: normal;
  font-weight: 400 600;
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.33%;
  ascent-override: 96.01%;
  descent-override: 30.00%;
  line-gap-override: 0%;
}


      /* ── Get First Word band (free opt-in) + sold-out state ── */
      .firstword {
        position: relative;
        padding: clamp(48px, 6vw, 84px) 0;
        background: var(--bg-raised);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        overflow: hidden;
      }
      .firstword::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 55% 90% at 82% 50%, var(--ember-glow), transparent 70%);
        pointer-events: none;
      }
      .firstword .container {
        position: relative;
      }
      .firstword-inner {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 56px;
        align-items: center;
      }
      .firstword .section-title {
        font-size: clamp(30px, 4.2vw, 48px);
        margin-bottom: 12px;
      }
      .firstword .section-sub {
        margin: 0;
      }
      .firstword-form {
        position: relative;
        padding: 26px 26px 22px;
        background: var(--bg-card);
        border: 1px solid var(--border-lt);
        border-radius: 6px;
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38);
      }
      .firstword-form::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--ember);
        border-radius: 6px 0 0 6px;
      }
      .firstword-form .notify-msg {
        margin-top: 12px;
        min-height: 0;
      }
      .firstword-form .notify-msg:empty {
        display: none;
      }
      .firstword-form .notify-consent {
        margin-top: 12px;
        text-align: left;
      }
      @media (min-width: 901px) {
        .firstword-form .notify-fields {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
      }
      @media (max-width: 900px) {
        .firstword-inner {
          grid-template-columns: 1fr;
          gap: 26px;
          text-align: center;
        }
        .firstword .section-sub {
          margin: 0 auto;
        }
        .firstword-form {
          padding: 20px 18px 18px;
        }
        .firstword-form .notify-consent {
          text-align: center;
        }
      }
      .event-spots.event-soldout {
        color: var(--smoke);
      }
      .hero-actions button.btn-ghost {
        line-height: 1.5;
      }