/* ============================================================
         LFB DESIGN SYSTEM  (extract this block to lfb-design-system.css)
         ============================================================ */

    :root {
      /* Brand colours */
      --color-dark:   #181818;  /* dark sections, nav, footer, dark text on light */
      --color-gold:   #E0BB75;  /* accents, links, eyebrows, emphasis, CTAs */
      --color-blue:   #3A75BD;  /* brain concepts + secondary buttons (white text) */
      --color-salmon: #F6C0B3;  /* illustrations only, never text/buttons/fills */
      --color-light:  #F6F1EB;  /* cream, marketing alternating sections */
      --color-white:  #FFFFFF;  /* blog/bright sections + card fills */
      --color-grey:   #9E9E9E;  /* disclaimers + low-emphasis helper on DARK only */

      /* Fonts */
      --font-heading: 'Merriweather Sans', sans-serif;
      --font-body:    'Manrope', sans-serif;
      --font-eyebrow: 'Permanent Marker', cursive;

      /* Shape + signature glow (gold, spread 5px, blur 20px) */
      --radius: 16px;
      --card-top-border: 3px solid var(--color-gold);
      --glow-gold: 0 0 20px 5px rgba(224, 187, 117, 0.45);

      /* Layout */
      --container: 1100px;
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-weight: 300;
      background: var(--color-dark);
      color: var(--color-white);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ── Layout ─────────────────────────────────────────────── */
    .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

    .section { padding: 120px 0; }            /* standard */
    .section--large { padding: 180px 0; }      /* large */
    .section--small { padding: 70px 0; }       /* small */

    /* Background + text-colour pairing CONTRACT.
       Dark bg  → white text, gold accent. Never dark/black text.
       Light bg → dark text,  gold accent. Never white/light-grey text. */
    .section--dark  { background: var(--color-dark);  color: var(--color-white); }
    .section--light { background: var(--color-white); color: var(--color-dark); }
    .section--cream { background: var(--color-light); color: var(--color-dark); }
    .section--white { background: var(--color-white); color: var(--color-dark); }

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

    /* ── Typography scale (from Theme Explorer) ─────────────── */
    h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; }

    h1 { font-size: 48px; line-height: 1.25; }
    h1.large { font-size: 54px; line-height: 1.25; }
    h2 { font-size: 38px; line-height: 1.3; }
    h3 { font-size: 23px; line-height: 1.4; font-weight: 700; }
    h4 { font-size: 18px; line-height: 1.55; font-weight: 700; }

    p { font-size: 18px; line-height: 1.7; }
    p.large { font-size: 22px; line-height: 1.6; }
    p.small { font-size: 15px; line-height: 1.65; }

    /* Heading base colour follows the section; accent is always gold.
       This is the dual-colour title rule: one base colour, one gold fragment. */
    .section--dark  h1, .section--dark  h2,
    .section--dark  h3, .section--dark  h4 { color: var(--color-white); }
    .section--light h1, .section--light h2,
    .section--light h3, .section--light h4,
    .section--cream h1, .section--cream h2,
    .section--cream h3, .section--cream h4,
    .section--white h1, .section--white h2,
    .section--white h3, .section--white h4 { color: var(--color-dark); }

    .section--dark  p { color: var(--color-white); }
    .section--light p, .section--cream p, .section--white p { color: var(--color-dark); }

    .accent { color: var(--color-gold); }       /* gold emphasis fragment */
    .brain  { color: var(--color-blue); font-weight: 600; }  /* brain concepts only */

    /* ── Eyebrow / overline ─────────────────────────────────── */
    .eyebrow {
      font-family: var(--font-eyebrow);
      font-size: 16px;
      color: var(--color-gold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      display: block;
      margin-bottom: 18px;
    }

    /* ── Buttons ────────────────────────────────────────────── */
    .btn {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 17px;
      line-height: 1;
      color: var(--color-white);
      border: 2px solid transparent;
      border-radius: var(--radius);
      padding: 17px 40px;
      display: inline-block;
      text-decoration: none;
      cursor: pointer;
      transition: transform 160ms ease, box-shadow 160ms ease,
                  background-color 160ms ease, color 160ms ease;
    }
    .btn--primary   { background: var(--color-gold); color: var(--color-white); }
    .btn--secondary { background: var(--color-blue); color: var(--color-white); }
    .btn--outline-dark {
      background: transparent;
      color: var(--color-dark);
      border-color: var(--color-dark);
    }
    .btn--outline-light {
      background: transparent;
      color: var(--color-white);
      border-color: var(--color-white);
    }

    /* On-brand interaction states (NEW, these did not exist in the theme) */
    .btn--primary:hover   { background: var(--color-gold); transform: translateY(-2px); box-shadow: var(--glow-gold); }
    .btn--secondary:hover { background: var(--color-blue); transform: translateY(-2px); }
    .btn--outline-dark:hover  { background: var(--color-dark);  color: var(--color-white); transform: translateY(-2px); }
    .btn--outline-light:hover { background: var(--color-white); color: var(--color-dark);  transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

    /* ── Universal button rule: gold background, white text, no exceptions ── */
    .btn--primary,
    .btn--secondary,
    .btn--outline-light {
      background: var(--color-gold);
      color: var(--color-white);
      border-color: transparent;
    }
    .btn--primary:hover,
    .btn--secondary:hover,
    .btn--outline-light:hover {
      background: var(--color-gold);
      color: var(--color-white);
      border-color: transparent;
      transform: translateY(-2px);
      box-shadow: var(--glow-gold);
    }

    /* ── Form fields ────────────────────────────────────────── */
    /* Helper/placeholder = grey everywhere. Typed text on a dark field = gold. */
    .lfb-field {
      font-family: var(--font-body);
      font-size: 17px;
      border-radius: var(--radius);
      padding: 16px 20px;
      border: 2px solid var(--color-gold);
      width: 100%;
    }
    .lfb-field--dark {
      background: var(--color-dark);
      color: var(--color-gold);            /* what the user types */
    }
    .lfb-field--dark::placeholder { color: var(--color-grey); }   /* helper text */
    .lfb-field--light {
      background: var(--color-white);
      color: var(--color-dark);            /* typed text on light */
    }
    .lfb-field--light::placeholder { color: var(--color-grey); }
    .form-consent {                         /* white very-small consent line */
      font-size: 13px; line-height: 1.7; color: var(--color-white); display: block; margin-top: 12px;
    }

    /* ── Cards: shared glow-on-hover signature ──────────────── */
    /* Every card lifts + gains the gold glow on hover. The persistent glow
       (.is-signature) is reserved for the newsletter / hero offer card. */
    .card-glow { border: 1px solid var(--color-gold); border-top-width: 3px; transition: transform 200ms ease, box-shadow 200ms ease; }
    .card-glow:hover { transform: translateY(-4px); box-shadow: var(--glow-gold); }
    .is-signature { border: 1px solid var(--color-gold); border-top-width: 3px; box-shadow: var(--glow-gold); }

    /* ── Footer ─────────────────────────────────────────────── */
    .footer { background: var(--color-dark); padding: 56px 0; text-align: center; }
    .footer p { font-size: 14px; color: var(--color-white); }
    .footer a { color: var(--color-gold); text-decoration: none; }
    .footer a:hover { text-decoration: underline; }
    .footer .disclaimer { color: var(--color-grey); font-size: 13px; line-height: 1.7; max-width: 760px; margin: 20px auto 0; }

    /* ── Utilities ──────────────────────────────────────────── */
    .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
    .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
    .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; }

    /* ── Reveal on scroll (subtle, respects reduced motion) ──── */
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
    .reveal.is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
      .btn, .card-glow { transition: none; }
    }

    /* ============================================================
         PAGE-SPECIFIC  (stays with this page)
         ============================================================ */

    /* Nav */
    .nav { position: sticky; top: 0; z-index: 50; background: var(--color-dark); border-bottom: 1px solid rgba(224,187,117,0.35); }
    .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .nav__logo { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-white); text-decoration: none; }
    .nav__logo span { color: var(--color-white); }
    .nav__links { list-style: none; display: flex; align-items: center; gap: 32px; }
    .nav__links a { font-family: var(--font-body); font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: uppercase; color: var(--color-gold); text-decoration: none; }
    .nav__links a:hover { text-decoration: none; }
    .nav__links a.btn { text-transform: none; letter-spacing: 0; color: var(--color-white); }

    /* Low-emphasis microcopy: grey on dark, muted-dark on light (never light-grey on white) */
    .whisper { font-family: var(--font-body); font-size: 14px; font-weight: 300; color: var(--color-grey); margin-top: 14px; display: block; }
    .whisper--dark { color: #5F5F5F; }

    /* Resonate bullet list */
    .lfb-list { list-style: none; margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
    .lfb-list li { font-size: 18px; font-weight: 300; color: var(--color-white); padding-left: 24px; position: relative; line-height: 1.6; }
    .lfb-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; background: var(--color-gold); border-radius: 50%; }
    .lfb-list li strong { color: var(--color-white); font-weight: 600; }

    /* Step cards */
    .step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
    .step-card { background: var(--color-dark); border-radius: var(--radius); padding: 32px 28px; }
    .step-card__num { font-family: var(--font-eyebrow); font-size: 15px; color: var(--color-gold); text-transform: uppercase; margin-bottom: 16px; display: block; }
    .step-card__title { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--color-white); margin-bottom: 10px; }
    .step-card__body { font-size: 17px; font-weight: 300; color: var(--color-white); line-height: 1.7; }

    /* Concept cards (brain concepts → blue titles) */
    .concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
    .concept-card { background: var(--color-white); border-radius: var(--radius); padding: 36px 32px; }
    .concept-card .concept-card__label { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--color-blue); margin-bottom: 16px; }
    .concept-card__body { font-size: 17px; font-weight: 300; color: var(--color-dark); line-height: 1.75; }
    .concept-card__body .brain { color: var(--color-blue); font-weight: 600; }

    /* Shift cards */
    .shift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
    .shift-card { background: var(--color-white); border-radius: var(--radius); padding: 36px 32px; }
    .shift-card__title { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--color-gold); margin-bottom: 14px; }
    .shift-card__body { font-size: 17px; font-weight: 300; color: var(--color-dark); line-height: 1.75; }

    /* Testimonials (others' quotes → black text on white card, italic) */
    .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
    .testimonial-card { background: var(--color-dark); border-radius: var(--radius); padding: 40px 32px 32px; position: relative; }
    .testimonial-card::before { content: '\201C'; font-family: Georgia, serif; font-size: 64px; color: var(--color-gold); opacity: 0.5; position: absolute; top: 14px; left: 24px; line-height: 1; }
    .testimonial-card__quote { font-size: 17px; font-weight: 300; font-style: italic; color: var(--color-white); line-height: 1.75; margin-top: 22px; }
    .testimonial-card__author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
    .testimonial-card__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.12); }
    .testimonial-card__name { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-white); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; }
    .testimonial-card__role { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-white); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; }

    /* Offer cards */
    .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 56px; max-width: 860px; margin-left: auto; margin-right: auto; }
    .offer-card { background: var(--color-white); border-radius: var(--radius); padding: 44px 40px; position: relative; }
    .offer-card--featured { }   /* persistent gold glow + border via .is-signature */
    .offer-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-gold); color: var(--color-dark); font-family: var(--font-body); font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; }
    .offer-card__type { font-family: var(--font-eyebrow); font-size: 14px; color: var(--color-gold); text-transform: uppercase; margin-bottom: 10px; display: block; }
    .offer-card .offer-card__name { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--color-dark); margin-bottom: 8px; }
    .offer-card__price { font-family: var(--font-heading); font-size: 38px; font-weight: 800; color: var(--color-dark); margin-bottom: 4px; }
    .offer-card__price span { font-size: 15px; font-weight: 300; color: var(--color-grey); }
    .offer-card__desc { font-size: 16px; font-weight: 300; color: var(--color-dark); line-height: 1.65; margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08); }
    .offer-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
    .offer-features li { font-size: 16px; font-weight: 400; color: var(--color-dark); padding-left: 22px; position: relative; line-height: 1.55; }
    .offer-features li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--color-gold); border-radius: 50%; }
    .offer-features li strong { font-weight: 700; }
    .offer-card__whisper { font-size: 13px; font-weight: 300; color: #5F5F5F; margin-top: 14px; text-align: center; display: block; }
    .offer-btn-group { display: flex; flex-direction: column; gap: 10px; }
    .offer-btn-group .btn { width: 100%; text-align: center; }

    /* About (divided list, not glow cards) */
    .about-grid { display: flex; flex-direction: column; margin-top: 56px; max-width: 720px; }
    .about-card { padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
    .about-card:last-child { border-bottom: none; }
    .about-card__label { font-family: var(--font-body); font-size: 19px; font-weight: 700; color: var(--color-gold); margin-bottom: 10px; }
    .about-card__body { font-size: 17px; font-weight: 300; color: var(--color-white); line-height: 1.75; }

    /* Cost-of-delay cards */
    .delay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
    .delay-card { background: var(--color-white); border-radius: var(--radius); padding: 36px 30px; }
    .delay-card__year { font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: var(--color-gold); margin-bottom: 16px; }
    .delay-card__body { font-size: 17px; font-weight: 300; color: var(--color-dark); line-height: 1.75; }

    /* Responsive */
    @media (max-width: 900px) {
      .step-grid { grid-template-columns: repeat(2, 1fr); }
      .delay-grid { grid-template-columns: 1fr; }
      .concept-grid { grid-template-columns: 1fr; }
      .testimonial-grid { grid-template-columns: 1fr; }
      .offer-grid { grid-template-columns: 1fr; max-width: 480px; }
      h1.large { font-size: 42px; } h2 { font-size: 30px; }
      .nav__links { gap: 18px; }
    }
    @media (max-width: 640px) {
      .section { padding: 80px 0; } .section--large { padding: 110px 0; }
      .step-grid { grid-template-columns: 1fr; }
      .shift-grid { grid-template-columns: 1fr; }
      .about-grid { max-width: 100%; }
      .nav__links li:not(:last-child) { display: none; }
    }
  
    /* ============================================================
         LFB ENHANCEMENT LAYER v2: "The Signal" (light-on-dark system)
         Appended after the base system so refinements win ties.
         Brand contract intact: dark #181818 base, gold #E0BB75 signal,
         pairing contract, 15px radius, Permanent Marker eyebrows.
         ============================================================ */

    :root {
      --color-dark:   #181818;
      --color-gold:   #E0BB75;
      --color-gold-hi:#EDCB90;
      --color-gold-lo:#D9B167;
      --color-blue:   #3A75BD;
      --color-grey:   #9E9E9E;
      --lfb-glow:     0 0 20px 5px rgba(224, 187, 117, 0.45);
    }

    /* Selection + scrollbar carry the brand */
    ::selection { background: rgba(224,187,117,.9); color: #181818; }
    html { scrollbar-color: rgba(224,187,117,.45) #141414; }
    body::-webkit-scrollbar { width: 10px; }
    body::-webkit-scrollbar-track { background: #141414; }
    body::-webkit-scrollbar-thumb { background: rgba(224,187,117,.38); border-radius: 8px; }
    body::-webkit-scrollbar-thumb:hover { background: rgba(224,187,117,.6); }

    /* Film grain: a whisper of texture so the dark reads as material, not void */
    body::after {
      content: '';
      position: fixed; inset: -50%;
      width: 200%; height: 200%;
      pointer-events: none;
      z-index: 2147483000;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: .028;
      mix-blend-mode: overlay;
    }

    /* ── Atmosphere: dark sections get quiet gold/blue ambience ── */
    .section--dark { position: relative; }
    .section--dark > .container { position: relative; z-index: 1; }
    .section--dark::before {
      content: '';
      position: absolute; inset: 0;
      pointer-events: none;
      background: none;
    }
    .section--large.section--dark::before {
      background:
        radial-gradient(1100px 600px at 78% -14%, rgba(224,187,117,.10), transparent 64%),
        radial-gradient(760px 560px at -10% 118%, rgba(58,117,189,.06), transparent 60%);
    }
    .section--cream { background: linear-gradient(180deg, #F8F4EE 0%, #F4EDE3 100%); }

    /* ── Nav: translucent glass over the dark field ── */
    .nav {
      background: rgba(24,24,24,.72);
      -webkit-backdrop-filter: blur(16px) saturate(1.25);
      backdrop-filter: blur(16px) saturate(1.25);
      transition: background .35s ease, box-shadow .35s ease;
    }
    .nav.is-scrolled {
      background: rgba(20,20,20,.9);
      box-shadow: 0 14px 36px -22px rgba(0,0,0,.85);
    }
    .nav__links a:not(.btn) { position: relative; padding-bottom: 2px; transition: color .2s ease; }
    .nav__links a:not(.btn)::after {
      content: '';
      position: absolute; left: 0; bottom: -4px;
      width: 100%; height: 1px;
      background: linear-gradient(90deg, var(--color-gold), rgba(224,187,117,.25));
      transform: scaleX(0); transform-origin: left;
      transition: transform .28s ease;
    }
    .nav__links a:not(.btn):hover::after { transform: scaleX(1); }

    /* ── Type: accent fragments literally carry light on dark ── */
    .section--dark h1 .accent,
    .section--dark h2 .accent {
      text-shadow: 0 0 32px rgba(224,187,117,.4), 0 0 90px rgba(224,187,117,.16);
    }
    .eyebrow { letter-spacing: .06em; }

    /* ── Buttons: gold gains depth, hover behavior unchanged (gold stays gold) ── */
    .btn--primary {
      background: linear-gradient(180deg, var(--color-gold-hi) 0%, var(--color-gold-lo) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px -14px rgba(224,187,117,.55);
    }
    .btn--primary:hover {
      background: linear-gradient(180deg, var(--color-gold-hi) 0%, var(--color-gold-lo) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--lfb-glow);
    }
    /* All button variants inherit the gold gradient + gold depth (no blue) */
    .btn--secondary, .btn--outline-light {
      background: linear-gradient(180deg, var(--color-gold-hi) 0%, var(--color-gold-lo) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px -14px rgba(224,187,117,.55);
    }
    .btn--secondary:hover, .btn--outline-light:hover {
      background: linear-gradient(180deg, var(--color-gold-hi) 0%, var(--color-gold-lo) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--lfb-glow);
    }

    /* ── Secondary "More info" button: solid black (new filled style), inverts on hover ── */
    .btn--outline-dark {
      background: var(--color-dark);
      color: var(--color-white);
      border: 2px solid var(--color-dark);
      box-shadow: 0 12px 28px -14px rgba(24,24,24,.45);
    }
    .btn--outline-dark:hover {
      background: var(--color-white);
      color: var(--color-dark);
      border-color: var(--color-dark);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -14px rgba(24,24,24,.35);
    }

    /* ── Cards: subtle inner light on dark, soft grounded shadow on light ── */
    .section--dark .lfb-card,
    .step-card,
    .testimonial-card,
    .lfb-tcard {
      background: linear-gradient(180deg, #1E1C19 0%, #181818 62%);
    }
    .concept-card, .shift-card, .delay-card,
    .section--light .lfb-card, .section--white .lfb-card, .section--cream .lfb-card,
    .lfb-faq details {
      box-shadow: 0 18px 40px -30px rgba(24,24,24,.35);
    }
    .lfb-faq summary { transition: background .2s ease; }
    .lfb-faq summary:hover { background: rgba(224,187,117,.07); }

    /* Featured offer: the persistent glow breathes, very slowly */
    @keyframes lfbBreathe {
      0%, 100% { box-shadow: 0 0 20px 5px rgba(224,187,117,.42); }
      50%      { box-shadow: 0 0 34px 9px rgba(224,187,117,.6); }
    }
    .is-signature, .lfb-offer { animation: lfbBreathe 7s ease-in-out infinite; }

    /* Testimonial initial avatars (gold-lit) */
    .testimonial-card__avatar {
      width: 52px; height: 52px; border-radius: 50%;
      object-fit: cover; flex-shrink: 0;
      background: rgba(224,187,117,.18);
    }

    /* ── Reveal: content comes into focus, the brand metaphor made motion ── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      filter: blur(6px);
      transition: opacity .75s ease, transform .75s ease, filter .75s ease;
    }
    .reveal.is-in { opacity: 1; transform: none; filter: none; }
    .rv-d1 { transition-delay: .06s; }
    .rv-d2 { transition-delay: .16s; }
    .rv-d3 { transition-delay: .28s; }
    .rv-d4 { transition-delay: .42s; }

    /* ── Minimalist visuals (Section E build standard: #181818 panel) ── */
    .lfb-visual {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: clamp(12px, 3vw, 28px) 0;
      margin: 40px auto 0;
      max-width: 880px;
      box-shadow: none;
    }
    .lfb-visual:hover { transform: none; box-shadow: none; }
    .lfb-visual svg { display: block; width: 100%; height: auto; }
    .lfb-visual text { user-select: none; }

    /* ============================================================
         THE LIGHT CURSOR: attention as illumination
         The pointer becomes a soft gold light over the dark field
         (screen blend keeps it invisible on light sections) with a
         precise gold dot as the actual pointer. Fully click-through.
         Desktop fine-pointers only; JS gates everything.
         ============================================================ */
    html.lfb-cursor-on * { cursor: none !important; }

    .lfb-light, .lfb-dot, .lfb-ring {
      position: fixed; top: 0; left: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s ease;
    }
    body.lfb-cursor-visible .lfb-light,
    body.lfb-cursor-visible .lfb-dot,
    body.lfb-cursor-visible .lfb-ring { opacity: 1; }

    .lfb-light {
      width: 640px; height: 640px;
      margin: -320px 0 0 -320px;
      border-radius: 50%;
      z-index: 2147483200;
      background: radial-gradient(circle,
        rgba(224,187,117,.16) 0%,
        rgba(224,187,117,.07) 32%,
        rgba(224,187,117,.02) 55%,
        transparent 72%);
      mix-blend-mode: screen;
      will-change: transform;
    }
    .lfb-dot {
      width: 8px; height: 8px;
      margin: -4px 0 0 -4px;
      border-radius: 50%;
      background: var(--color-gold);
      box-shadow: 0 0 10px 2px rgba(224,187,117,.85);
      z-index: 2147483400;
      will-change: transform;
      transition: opacity .4s ease, width .18s ease, height .18s ease, margin .18s ease, border-radius .18s ease;
    }
    .lfb-ring {
      width: 38px; height: 38px;
      margin: -19px 0 0 -19px;
      border-radius: 50%;
      border: 1.5px solid rgba(224,187,117,.65);
      z-index: 2147483300;
      transform: scale(.55);
      transition: opacity .25s ease, transform .25s ease;
      will-change: transform;
    }
    body.lfb-hovering .lfb-ring { opacity: 1; transform: scale(1); }
    body.lfb-hovering .lfb-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
    body.lfb-text .lfb-dot { width: 2px; height: 24px; margin: -12px 0 0 -1px; border-radius: 1px; }
    body.lfb-text .lfb-ring { opacity: 0; }
    body.lfb-pressing .lfb-ring { transform: scale(.85); }

    /* ── Reduced motion: calm everything, keep the brand ── */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; filter: none; transition: none; }
      .is-signature, .lfb-offer { animation: none; box-shadow: 0 0 20px 5px rgba(224,187,117,.45); }
      .lfb-visual, .lfb-visual:hover { transform: none; }
      .lfb-light { display: none; }
      .lfb-dot, .lfb-ring { transition: opacity .4s ease; }
    }
    @media (hover: none), (pointer: coarse) {
      .lfb-light, .lfb-dot, .lfb-ring { display: none; }
    }

    /* ── Booking flow polish (matches only on /book) ── */
    .book-wrap {
      background:
        radial-gradient(1100px 620px at 82% -12%, rgba(224,187,117,.08), transparent 62%),
        radial-gradient(820px 620px at -12% 112%, rgba(58,117,189,.055), transparent 60%),
        var(--color-dark);
    }
    .book-progress, .book-prog__fill {
      background: linear-gradient(90deg, var(--color-gold-lo), var(--color-gold-hi));
    }
    .book-progress { box-shadow: 0 0 14px rgba(224,187,117,.5); }
    .opt { transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
    .opt:hover { box-shadow: 0 0 18px -8px rgba(224,187,117,.5); transform: translateY(-1px); }
    .opt.sel { box-shadow: 0 0 18px -8px rgba(224,187,117,.55); }

  
    /* ============================================================
         LFB ENHANCEMENT LAYER v3: "Editorial Precision"
         Stripe / Linear / Vercel-grade refinement + 8/16/24 system.
         Pure polish. No content, diagram, color, or type-family
         change. Brand contract intact: dark #181818, gold #E0BB75,
         16px radius, Permanent Marker eyebrows, pairing contract.
         ============================================================ */

    :root {
      --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
      --s-5: 40px;  --s-6: 48px;  --s-7: 64px;  --s-8: 80px;
      --s-9: 96px;  --s-10: 120px; --s-12: 160px;
      --radius-card: 16px;
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --hairline: rgba(224,187,117,0.14);
    }

    /* ── Fluid, mobile-first type scale ───────────────────────── */
    h1 { font-size: clamp(34px, 5.2vw, 48px); line-height: 1.18; letter-spacing: -0.018em; }
    h1.large { font-size: clamp(36px, 6vw, 56px); line-height: 1.16; letter-spacing: -0.02em; }
    h2 { font-size: clamp(27px, 3.8vw, 39px); line-height: 1.24; letter-spacing: -0.014em; }
    h3 { font-size: clamp(20px, 2.4vw, 23px); line-height: 1.4; letter-spacing: -0.008em; }
    p { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.72; }
    p.large { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.58; letter-spacing: -0.006em; }
    h1, h2, h3 { text-wrap: balance; }
    .section--dark > .container p.large,
    .text-center > p { text-wrap: pretty; }

    /* ── Whitespace: section rhythm onto the 8px scale ─────────── */
    .section { padding: var(--s-10) 0; }
    .section--large { padding: var(--s-12) 0; }
    .section--small { padding: var(--s-8) 0; }

    /* ── Eyebrow: precise editorial kicker ─────────────────────── */
    .eyebrow {
      font-size: 14px;
      letter-spacing: 0.14em;
      margin-bottom: var(--s-3);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .eyebrow::before {
      content: '';
      width: 22px; height: 1px;
      background: linear-gradient(90deg, var(--color-gold), rgba(224,187,117,0.2));
      display: inline-block;
    }
    .text-center .eyebrow { justify-content: center; }

    /* ============================================================
         BUTTON SYSTEM v4: emphasis ladder (conversion-optimized)
         Primary  = filled gold, INTENSIFY on hover (lift + glow).
                    Never hollows out; keeps weight at moment of intent.
         Secondary= ghost/outline at rest (recedes, never competes),
                    FILLS IN on hover. The inversion lives here, where
                    gaining weight on intent is the correct direction.
         All radii now 16px (8/16/24 system).
         ============================================================ */

    .btn {
      font-weight: 600;
      letter-spacing: -0.006em;
      padding: 16px 34px;
      border-radius: var(--radius-card);
      transition: transform 200ms var(--ease-spring),
                  box-shadow 240ms var(--ease-out),
                  background-color 200ms var(--ease-out),
                  color 200ms var(--ease-out),
                  border-color 200ms var(--ease-out);
    }
    .btn:active { transform: translateY(0) scale(0.985); }
    .btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

    /* PRIMARY — keep the gold gradient + intensify (unchanged behavior, refined) */
    .btn--primary {
      background: linear-gradient(180deg, var(--color-gold-hi, #EDCB90) 0%, var(--color-gold-lo, #D9B167) 100%);
      color: var(--color-white);
      border: 2px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px -14px rgba(224,187,117,.55);
    }
    .btn--primary:hover {
      background: linear-gradient(180deg, var(--color-gold-hi, #EDCB90) 0%, var(--color-gold-lo, #D9B167) 100%);
      color: var(--color-white);
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--glow-gold);
    }

    /* SECONDARY "More info" — GHOST at rest, FILLS IN on hover.
       On light cards: transparent fill, dark hairline border, dark text.
       Lower weight than gold so it never out-competes the primary CTA. */
    .btn--outline-dark {
      background: transparent;
      color: var(--color-dark);
      border: 1.5px solid rgba(24,24,24,0.28);
      box-shadow: none;
    }
    .btn--outline-dark:hover {
      background: var(--color-dark);
      color: var(--color-white);
      border-color: var(--color-dark);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -16px rgba(24,24,24,0.45);
    }
    /* Ghost variant for dark sections (if used): light hairline → fills white */
    .section--dark .btn--outline-dark {
      color: var(--color-white);
      border-color: rgba(255,255,255,0.3);
    }
    .section--dark .btn--outline-dark:hover {
      background: var(--color-white);
      color: var(--color-dark);
      border-color: var(--color-white);
    }

    /* ── Cards: unified 16px radius, hairline + lift (Aceternity) ── */
    .delay-card, .concept-card, .shift-card, .step-card,
    .testimonial-card, .offer-card, .lfb-visual, .lfb-card {
      border-radius: var(--radius-card);
    }
    .card-glow {
      border: 1px solid var(--hairline);
      transition: transform 320ms var(--ease-out),
                  box-shadow 320ms var(--ease-out),
                  border-color 320ms var(--ease-out);
    }
    .card-glow:hover {
      transform: translateY(-6px);
      border-color: rgba(224,187,117,0.4);
      box-shadow: var(--glow-gold);
    }
    .concept-card, .shift-card, .delay-card, .offer-card {
      box-shadow: 0 1px 2px rgba(24,24,24,0.04), 0 12px 32px -24px rgba(24,24,24,0.5);
    }
    .step-card, .testimonial-card {
      position: relative;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .step-card::after, .testimonial-card::after {
      content: '';
      position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(224,187,117,0.5), transparent);
      opacity: 0.7; border-radius: 16px 16px 0 0;
    }

    /* ── Grids: open gutters onto the 8px system ───────────────── */
    .step-grid { gap: var(--s-3); margin-top: var(--s-7); }
    .concept-grid { gap: var(--s-4); margin-top: var(--s-7); }
    .shift-grid { gap: var(--s-3); margin-top: var(--s-7); }
    .testimonial-grid { gap: var(--s-4); margin-top: var(--s-7); }
    .delay-grid { gap: var(--s-3); margin-top: var(--s-7); }
    .offer-grid { gap: var(--s-4); margin-top: var(--s-8); }

    .step-card { padding: var(--s-4); }
    .concept-card { padding: var(--s-5); }
    .shift-card { padding: var(--s-5); }
    .delay-card { padding: var(--s-5) var(--s-4); }
    .testimonial-card { padding: var(--s-6) var(--s-4) var(--s-4); }

    /* ── List rhythm ───────────────────────────────────────────── */
    .lfb-list { gap: var(--s-2); margin-top: var(--s-4); }
    .lfb-list li { padding-left: 26px; }
    .lfb-list li::before { top: 10px; width: 7px; height: 7px; box-shadow: 0 0 12px 1px rgba(224,187,117,0.5); }

    /* ── Nav: precise control bar ──────────────────────────────── */
    .nav__inner { height: 68px; }
    .nav__logo { letter-spacing: -0.01em; font-size: 19px; }
    .nav__links { gap: var(--s-4); }
    .nav__links a:not(.btn) { font-size: 14px; letter-spacing: 0.04em; font-weight: 500; }
    .nav__links a.btn { padding: 10px 20px !important; border-radius: 12px; }

    /* ── Reveal: calmer, faster (premium = restraint) ──────────── */
    .reveal {
      transform: translateY(16px); filter: blur(3px);
      transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out);
    }
    .rv-d1 { transition-delay: .05s; } .rv-d2 { transition-delay: .12s; }
    .rv-d3 { transition-delay: .19s; } .rv-d4 { transition-delay: .26s; }

    /* ── Offer rhythm ──────────────────────────────────────────── */
    .offer-features { gap: var(--s-2); }
    .offer-card__desc { margin: var(--s-3) 0; padding-top: var(--s-3); }
    .whisper { font-size: 13px; letter-spacing: 0.01em; margin-top: var(--s-2); }

    /* ── Accessibility floor ───────────────────────────────────── */
    a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 4px;
    }

    /* ── Mobile-first: protect whitespace ──────────────────────── */
    @media (max-width: 640px) {
      .container { padding: 0 20px; }
      .section { padding: var(--s-8) 0; }
      .section--large { padding: var(--s-9) 0; }
      .eyebrow::before { width: 16px; }
      .btn { width: 100%; text-align: center; }
      .nav__links a.btn { width: auto; }
      .step-card, .concept-card, .shift-card, .delay-card { padding: var(--s-4) var(--s-3); }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { filter: none; transform: none; }
      .card-glow:hover { transform: none; }
      .btn:active { transform: none; }
    }

  
    /* ============================================================
         LFB ENHANCEMENT LAYER v4: "Consistency Pass"
         Fixes: (1) secondary ghost button = black border + black text
         at rest, inverts to filled black/white on hover; (2) eyebrow
         dash optically centered to Permanent Marker glyphs; (3) full
         card parity for the lfb-card / lfb-tcard system used on inner
         pages so they match the homepage cards exactly.
         Appended last so corrections win. Brand contract intact.
         ============================================================ */

    /* ── (1) SECONDARY GHOST BUTTON — design rule ──────────────────
       Rest: transparent fill, SOLID BLACK border, BLACK text.
       Hover: invert to filled black, white text. Recedes at rest so
       it never out-competes the gold primary; gains weight on intent. */
    .btn--outline-dark {
      background: transparent;
      color: var(--color-dark);
      border: 2px solid var(--color-dark);
      box-shadow: none;
    }
    .btn--outline-dark:hover {
      background: var(--color-dark);
      color: var(--color-white);
      border-color: var(--color-dark);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -16px rgba(24,24,24,0.45);
    }
    /* On dark sections: border + text become white, invert to white fill */
    .section--dark .btn--outline-dark {
      background: transparent;
      color: var(--color-white);
      border: 2px solid var(--color-white);
    }
    .section--dark .btn--outline-dark:hover {
      background: var(--color-white);
      color: var(--color-dark);
      border-color: var(--color-white);
    }

    /* ── (2) EYEBROW DASH — optical vertical centering ─────────────
       Permanent Marker glyphs sit low in the line box, so a strictly
       center-aligned dash reads too high. Use baseline-ish alignment
       and nudge the dash down to sit centered on the visible letters. */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      line-height: 1;
    }
    .eyebrow::before {
      content: '';
      width: 22px; height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--color-gold), rgba(224,187,117,0.25));
      display: inline-block;
      position: relative;
      top: 0.04em;            /* optical nudge to center on the glyphs */
      flex: none;
    }
    .text-center .eyebrow { justify-content: center; }
    /* On light/cream/white sections the dash uses the deeper gold for contrast */
    .section--light .eyebrow::before,
    .section--white .eyebrow::before,
    .section--cream .eyebrow::before {
      background: linear-gradient(90deg, #B8963E, rgba(184,150,62,0.25));
    }

    /* ── (3) lfb-card / lfb-tcard — full parity with homepage cards ──
       16px radius, hairline border, premium hover lift, top light line
       on dark surfaces, grounded shadow on light surfaces, 8px padding. */
    .lfb-card, .lfb-tcard {
      border-radius: var(--radius-card);
      padding: var(--s-5);
      transition: transform 320ms var(--ease-out),
                  box-shadow 320ms var(--ease-out),
                  border-color 320ms var(--ease-out);
    }

    /* Dark-surface cards: hairline + top line of light (Aceternity signature) */
    .section--dark .lfb-card, .lfb-tcard {
      border: 1px solid rgba(255,255,255,0.06);
      border-top: 1px solid rgba(255,255,255,0.06);
      background: linear-gradient(180deg, #1E1C19 0%, #181818 62%);
      position: relative;
    }
    .section--dark .lfb-card::after, .lfb-tcard::after {
      content: '';
      position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(224,187,117,0.5), transparent);
      opacity: 0.7;
      border-radius: 16px 16px 0 0;
    }
    .section--dark .lfb-card:hover, .lfb-tcard:hover {
      transform: translateY(-6px);
      border-color: rgba(224,187,117,0.4);
      box-shadow: var(--glow-gold);
    }

    /* Light-surface cards: hairline + soft grounded premium shadow */
    .section--light .lfb-card,
    .section--white .lfb-card,
    .section--cream .lfb-card {
      border: 1px solid var(--hairline);
      border-top: 1px solid var(--hairline);
      box-shadow: 0 1px 2px rgba(24,24,24,0.04), 0 12px 32px -24px rgba(24,24,24,0.5);
    }
    .section--light .lfb-card:hover,
    .section--white .lfb-card:hover,
    .section--cream .lfb-card:hover {
      transform: translateY(-6px);
      border-color: rgba(224,187,117,0.4);
      box-shadow: var(--glow-gold);
    }

    /* Card number kicker: align to refined type rhythm */
    .lfb-card__num { letter-spacing: 0.1em; margin-bottom: var(--s-2); }
    .lfb-card__title { letter-spacing: -0.008em; }

    /* Grid gutters for the lfb system onto 8px scale (if present) */
    .lfb-grid, .lfb-tgrid { gap: var(--s-4); }

    /* Mobile padding parity */
    @media (max-width: 640px) {
      .lfb-card, .lfb-tcard { padding: var(--s-4) var(--s-3); }
    }
    @media (prefers-reduced-motion: reduce) {
      .section--dark .lfb-card:hover, .lfb-tcard:hover,
      .section--light .lfb-card:hover, .section--white .lfb-card:hover,
      .section--cream .lfb-card:hover { transform: none; }
    }

  
    /* ============================================================
         LFB ENHANCEMENT LAYER v5: "Kicker Alignment"
         Fixes the eyebrow/overline dash:
         (1) Vertically centered on the CAP HEIGHT of the kicker text
             (Permanent Marker glyphs sit low in the line box, so we
             align to the first line's top and offset down to the
             optical middle of the caps — not the line-box middle).
         (2) Larger horizontal gap so the dash reads as a separate
             editorial mark, not attached to the word.
         (3) Wrap-safe: on two-line eyebrows (mobile), the dash stays
             beside the FIRST line and the lines get healthy spacing.
         Appended last so it wins. No content/color/GA/Stripe change.
         ============================================================ */

    .eyebrow {
      display: inline-flex;
      align-items: flex-start;     /* anchor dash to first line, not block middle */
      gap: 14px;                   /* larger horizontal breathing room */
      line-height: 1.35;           /* healthy spacing when the kicker wraps */
    }

    .eyebrow::before {
      content: '';
      width: 24px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--color-gold), rgba(224,187,117,0.25));
      display: block;
      flex: none;
      position: relative;
      /* Offset down to the optical center of the cap height of line 1.
         With line-height 1.35 and Permanent Marker caps, ~0.62em lands
         the 2px rule on the visual middle of the capital letters. */
      top: 0.62em;
    }

    /* Single-line, centered eyebrows keep the dash beside the text */
    .text-center .eyebrow { justify-content: center; }

    /* Light surfaces: deeper gold dash for contrast (unchanged behavior) */
    .section--light .eyebrow::before,
    .section--white .eyebrow::before,
    .section--cream .eyebrow::before {
      background: linear-gradient(90deg, #B8963E, rgba(184,150,62,0.25));
    }

    /* Mobile: keep the dash proportional and the wrap spacing balanced */
    @media (max-width: 640px) {
      .eyebrow { gap: 12px; line-height: 1.4; }
      .eyebrow::before { width: 18px; top: 0.6em; }
    }

  
    /* ============================================================
         LFB ENHANCEMENT LAYER v6: "Centered Kicker Fix"
         Problem: centered section kickers showed the dash spaced far
         from the text. Cause: these eyebrows live in .sec-head and
         .cta-block (both text-align:center). The earlier rule used
         justify-content:center on a full-width inline-flex, which
         distributed space and pushed the dash away from the word.
         The hero kickers (.sub-hero, left-aligned) were never affected
         — which is why only those looked correct.
         Fix: make .sec-head / .cta-block eyebrows shrink-wrap to their
         content and center via auto margins, keeping the dash-to-text
         gap tight and identical to the hero kickers.
         No content / color / GA / Stripe change.
         ============================================================ */

    .sec-head .eyebrow,
    .cta-block .eyebrow {
      display: inline-flex;
      width: auto;
      justify-content: flex-start;   /* dash stays snug beside the text */
      align-items: flex-start;
      gap: 14px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
    }

    /* The parent's text-align:center centers the now-shrink-wrapped
       inline-flex box, so the whole kicker sits centered while the
       dash hugs the text exactly like the hero kickers. */

    @media (max-width: 640px) {
      .sec-head .eyebrow,
      .cta-block .eyebrow { gap: 12px; }
    }

  
/* ============================================================
   LFB BLOG LAYER v1 (14 Aug 2026). Additive over the v6 system.
   ============================================================ */
.post-hero { padding: 140px 0 40px; }
.post-meta { font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--color-grey, #9E9E9E); letter-spacing: 0.04em; }
.post-meta .cat { color: var(--color-gold, #E0BB75); text-transform: uppercase; font-size: 13px; letter-spacing: 0.12em; font-weight: 600; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body h2 { margin: 56px 0 18px; }
.post-body h3 { margin: 40px 0 14px; }
.post-body p { margin: 0 0 1.25em; }
.post-body img { width: 100%; height: auto; border-radius: 16px; margin: 28px 0; display: block; }
.post-body a:not(.btn) { color: #B8963E; }
.post-body .btn, .post-cta .btn, .post-body .btn--primary { color: #FFFFFF !important; }
.post-body p:empty { display: none; }
.video-embed { position: relative; width: 100%; max-width: 760px; margin: 36px auto 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(224,187,117,0.25); box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-cta { border: 1px solid rgba(224,187,117,0.35); border-top: 3px solid var(--color-gold, #E0BB75); border-radius: 16px; padding: 34px 32px; margin: 48px 0; text-align: center; background: linear-gradient(180deg, #FBF8F3 0%, #F6F1EB 100%); }
.post-cta .eyebrow { justify-content: center; }
.post-cta h3 { margin: 10px 0 8px; }
.post-cta p { margin: 0 0 20px; }
.faq-list details { border: 1px solid rgba(224,187,117,0.25); border-radius: 16px; margin-bottom: 12px; background: linear-gradient(180deg, #1E1C19 0%, #181818 62%); }
.faq-list summary { cursor: pointer; padding: 20px 24px; font-family: 'Merriweather Sans', sans-serif; font-weight: 700; font-size: 17px; color: #FFFFFF; list-style: none; position: relative; padding-right: 48px; }
.faq-list summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--color-gold, #E0BB75); font-size: 22px; font-weight: 400; }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list .faq-a { padding: 0 24px 22px; color: #FFFFFF; }
.faq-list details:hover { border-color: rgba(224,187,117,0.5); }
/* blog index */
.carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 20px; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { height: 8px; }
.blog-card { flex: 0 0 320px; scroll-snap-align: start; border: 1px solid rgba(224,187,117,0.25); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #1E1C19 0%, #181818 62%); text-decoration: none; display: block; transition: transform .32s cubic-bezier(0.22,1,0.36,1), border-color .32s, box-shadow .32s; }
.blog-card:hover { transform: translateY(-6px); border-color: rgba(224,187,117,0.5); box-shadow: 0 0 20px 5px rgba(224,187,117,0.25); }
.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-card .bc-body { padding: 18px 20px 22px; }
.blog-card .bc-date { font-size: 13px; color: #9E9E9E; margin-bottom: 8px; }
.blog-card .bc-title { font-family: 'Merriweather Sans', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.4; color: #FFFFFF; }
.blog-card .bc-tags { margin-top: 10px; font-size: 12px; color: var(--color-gold, #E0BB75); text-transform: uppercase; letter-spacing: 0.08em; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-grid .blog-card { flex: none; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } .blog-card { flex-basis: 280px; } }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid rgba(224,187,117,0.35); border-radius: 999px; padding: 8px 16px; font-family: 'Manrope', sans-serif; font-size: 13px; color: #FFFFFF; background: transparent; cursor: pointer; transition: all .2s; }
.chip:hover, .chip.active { background: var(--color-gold, #E0BB75); color: #FFFFFF; border-color: var(--color-gold, #E0BB75); }
.search-input { width: 100%; max-width: 420px; background: #181818; border: 2px solid var(--color-gold, #E0BB75); border-radius: 16px; padding: 14px 20px; font-family: 'Manrope', sans-serif; font-size: 16px; color: var(--color-gold, #E0BB75); outline: none; }
.search-input::placeholder { color: #9E9E9E; }