:root {
      --color-base: #0C0A09;
      --color-surface: #1A1714;
      --color-surface-elevated: #252019;
      --color-border: rgba(61,53,41,0.4);
      --color-border-hover: rgba(61,53,41,0.7);
      --color-text-primary: #F5F0E8;
      --color-text-body: #D4CCBC;
      --color-text-muted: #9C9484;
      --color-text-disabled: #6B6358;
      --color-gold: #C9A96E;
      --color-gold-hover: #D4B97E;
      --color-gold-muted: #8B7748;
      --color-gold-glow: rgba(201,169,110,0.15);
      --font-heading: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'Crimson Pro', Georgia, serif;
      --font-ui: 'DM Sans', 'Helvetica Neue', sans-serif;
      --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
      --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;
      --content-width: 1200px; --content-narrow: 720px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: var(--font-body); font-weight: 300; line-height: 1.7;
      color: var(--color-text-body); background: var(--color-base);
      overflow-x: hidden; letter-spacing: 0.01em;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
    .wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 clamp(20px,4vw,48px); }

    /* ── scroll reveal ── */
    .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .rv.vis { opacity: 1; transform: translateY(0); }
    .rv-d1 { transition-delay: .12s; } .rv-d2 { transition-delay: .24s; } .rv-d3 { transition-delay: .36s; }

    /* ── buttons ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 1rem 2.5rem; font-family: var(--font-ui);
      font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      border: none; border-radius: 2px; cursor: pointer; transition: all .3s ease;
    }
    .btn--gold { background: var(--color-gold); color: var(--color-base); }
    .btn--gold:hover { background: var(--color-gold-hover); box-shadow: 0 0 30px var(--color-gold-glow); }
    .btn--outline { background: transparent; color: var(--color-gold); border: 1px solid rgba(201,169,110,0.35); }
    .btn--outline:hover { border-color: var(--color-gold); background: rgba(201,169,110,0.08); }

    /* ── shared ── */
    .divider { width: 120px; height: 1px; background: linear-gradient(to right, transparent, var(--color-gold-muted), transparent); margin: var(--space-16) auto; }
    .section-label { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); opacity: 0.6; margin-bottom: var(--space-6); }

    /* ── nav ── */
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 0; transition: all .4s; }
    .nav.scrolled { background: rgba(12,10,9,0.92); backdrop-filter: blur(16px); padding: 14px 0; box-shadow: 0 1px 0 rgba(201,169,110,0.07); }
    .nav__in { display: flex; align-items: center; justify-content: space-between; }
    .nav__brand { font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); }
    .nav__link { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); opacity: 0.7; transition: opacity .3s; }
    .nav__link:hover { opacity: 1; }
    .nav__links { display: flex; align-items: center; gap: 28px; }
    .nav__cta {
      font-family: var(--font-ui);
      font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--color-gold); opacity: 0.9; transition: opacity .3s;
      text-decoration: none; border: 1px solid rgba(201,169,110,0.4);
      padding: 7px 16px; border-radius: 2px;
    }
    .nav__cta:hover { opacity: 1; border-color: var(--color-gold); }

    /* ── HERO ── */
    .hero {
      padding: clamp(140px,16vw,200px) 0 clamp(80px,10vw,140px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,169,110,0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero__eyebrow {
      font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--color-gold-muted);
      margin-bottom: var(--space-6);
    }
    .hero__h {
      font-size: clamp(2.6rem,6vw,4.4rem);
      color: var(--color-text-primary);
      max-width: 760px; margin: 0 auto var(--space-6);
      line-height: 1.1;
    }
    .hero__h em { font-style: italic; color: var(--color-gold); }
    .hero__sub {
      font-size: clamp(1.05rem,1.8vw,1.25rem);
      color: var(--color-text-muted);
      max-width: 520px; margin: 0 auto;
      line-height: 1.7;
    }

    /* ── STEPS ── */
    .steps { padding: var(--space-32) 0; }
    .steps__inner { max-width: 860px; margin: 0 auto; position: relative; }

    /* vertical connector line */
    .steps__inner::before {
      content: '';
      position: absolute;
      left: 42px;
      top: 60px;
      bottom: 60px;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--color-border) 10%, var(--color-border) 90%, transparent);
    }

    .step { display: flex; gap: clamp(28px,4vw,56px); align-items: flex-start; margin-bottom: clamp(48px,7vw,80px); }
    .step:last-child { margin-bottom: 0; }

    .step__num-wrap {
      flex-shrink: 0;
      width: 84px; height: 84px;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 2px;
      position: relative; z-index: 1;
    }
    .step__num {
      font-family: var(--font-heading);
      font-size: 2.8rem;
      font-weight: 300;
      color: var(--color-gold);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .step__body { padding-top: 16px; flex: 1; }
    .step__tag {
      font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--color-gold-muted);
      margin-bottom: var(--space-3);
    }
    .step__h {
      font-size: clamp(1.5rem,2.8vw,2rem);
      color: var(--color-text-primary);
      margin-bottom: var(--space-4);
    }
    .step__p {
      font-size: 1.05rem; color: var(--color-text-muted);
      line-height: 1.8; margin-bottom: var(--space-4);
    }
    .step__p:last-child { margin-bottom: 0; }
    .step__note {
      font-family: var(--font-ui); font-size: 0.8rem;
      color: var(--color-text-disabled); line-height: 1.6;
      border-left: 2px solid var(--color-gold-muted);
      padding-left: var(--space-4);
      margin-top: var(--space-4);
    }
    .step__img {
      margin-top: var(--space-6);
      border-radius: 4px; overflow: hidden;
      max-width: 480px;
    }
    .step__img img {
      width: 100%; display: block;
      filter: contrast(1.05) saturate(0.9);
    }

    @media (max-width: 599px) {
      .steps__inner::before { display: none; }
      .step { flex-direction: column; gap: var(--space-4); }
      .step__num-wrap { width: 64px; height: 64px; }
      .step__num { font-size: 2rem; }
      .step__body { padding-top: 0; }
    }

    /* ── WHAT YOU'LL NEED ── */
    .needs { padding: var(--space-32) 0; background: var(--color-surface); }
    .needs__inner { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: center; }
    .needs__body {}
    .needs__h { font-size: clamp(1.8rem,3vw,2.6rem); color: var(--color-text-primary); margin-bottom: var(--space-6); }
    .needs__p { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-8); }
    .needs__list { list-style: none; }
    .needs__item {
      display: flex; align-items: flex-start; gap: var(--space-4);
      padding: var(--space-4) 0;
      border-bottom: 1px solid rgba(61,53,41,0.2);
      font-size: 1rem; color: var(--color-text-body);
    }
    .needs__item:first-child { border-top: 1px solid rgba(61,53,41,0.2); }
    .needs__icon {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border: 1px solid var(--color-gold-muted);
      border-radius: 2px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600;
      color: var(--color-gold-muted); letter-spacing: 0;
      margin-top: 2px;
    }
    .needs__item-text {}
    .needs__item-label { color: var(--color-text-primary); display: block; margin-bottom: 2px; font-size: 1rem; }
    .needs__item-note { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-text-disabled); line-height: 1.5; }
    .needs__img { border-radius: 4px; overflow: hidden; }
    .needs__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: contrast(1.05) saturate(0.9); }
    @media (max-width: 699px) {
      .needs__inner { grid-template-columns: 1fr; }
      .needs__img { order: -1; max-width: 420px; }
      .needs__img img { aspect-ratio: 16/9; }
    }

    /* ── TIMELINE ── */
    .timeline { padding: var(--space-32) 0; }
    .timeline__head { text-align: center; margin-bottom: var(--space-16); max-width: var(--content-narrow); margin-left: auto; margin-right: auto; }
    .timeline__h { font-size: clamp(2rem,3.5vw,2.8rem); color: var(--color-text-primary); margin-bottom: var(--space-4); }
    .timeline__sub { font-size: 1.05rem; color: var(--color-text-muted); }

    .timeline__track {
      max-width: 680px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 0;
      position: relative;
    }
    .timeline__track::before {
      content: '';
      position: absolute;
      left: 15px; top: 24px; bottom: 24px;
      width: 1px;
      background: linear-gradient(to bottom, var(--color-border) 0%, var(--color-border) 100%);
    }

    .tl-item {
      display: flex; gap: clamp(20px,3vw,36px);
      align-items: flex-start;
      padding: var(--space-6) 0;
      border-bottom: 1px solid rgba(61,53,41,0.15);
      position: relative;
    }
    .tl-item:last-child { border-bottom: none; }
    .tl-dot {
      flex-shrink: 0;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1px solid var(--color-gold-muted);
      background: var(--color-base);
      position: relative; z-index: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .tl-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold-muted); }
    .tl-body { padding-top: 4px; }
    .tl-when { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-muted); margin-bottom: 4px; }
    .tl-what { font-size: 1.05rem; color: var(--color-text-primary); }
    .tl-detail { font-family: var(--font-ui); font-size: 0.82rem; color: var(--color-text-disabled); margin-top: 4px; line-height: 1.5; }

    /* ── FAQ ── */
    .faq { padding: var(--space-32) 0; background: var(--color-surface); }
    .faq__head { text-align: center; margin-bottom: var(--space-16); }
    .faq__h { font-size: clamp(2rem,3.5vw,2.8rem); color: var(--color-text-primary); }
    .faq__list { max-width: var(--content-narrow); margin: 0 auto; }
    .faq__item { border-bottom: 1px solid var(--color-border); }
    .faq__q {
      display: flex; justify-content: space-between; align-items: center;
      width: 100%; background: none; border: none;
      color: var(--color-text-primary); font-family: var(--font-body);
      font-size: 1.1rem; font-weight: 300; padding: var(--space-6) 0;
      cursor: pointer; text-align: left;
    }
    .faq__q::after {
      content: '+'; font-family: var(--font-ui); font-size: 1.2rem;
      color: var(--color-text-disabled); margin-left: var(--space-4);
      flex-shrink: 0; transition: transform .3s ease;
    }
    .faq__q.open::after { transform: rotate(45deg); }
    .faq__a {
      max-height: 0; overflow: hidden;
      transition: max-height .4s ease, padding .4s ease;
      font-size: 1rem; color: var(--color-text-muted); line-height: 1.7;
    }
    .faq__a.open { max-height: 400px; padding-bottom: var(--space-6); }

    /* ── FINAL CTA ── */
    .final { padding: var(--space-32) 0; text-align: center; }
    .final__h { font-size: clamp(2rem,4vw,3rem); color: var(--color-text-primary); max-width: 640px; margin: 0 auto var(--space-4); }
    .final__sub { font-size: 1.1rem; color: var(--color-text-muted); max-width: 480px; margin: 0 auto var(--space-8); }
    .final__btns { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
    .final__note { font-family: var(--font-ui); font-size: 0.75rem; color: var(--color-text-disabled); margin-top: var(--space-4); }

    /* ── FOOTER ── */
    .footer { padding: var(--space-8) 0; font-family: var(--font-ui); font-size: 0.7rem; color: var(--color-text-disabled); border-top: 1px solid var(--color-border); }
    .footer__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
    .footer__links { display: flex; gap: var(--space-6); }
    .footer__links a { color: var(--color-text-disabled); transition: color .3s; }
    .footer__links a:hover { color: var(--color-gold-muted); }
  
/* Hide Shopline default header on SW pages (theme layout) */
#shopline-section-sections--header-group__header,
#shopline-section-sections--header-group__announcement-bar,
[id*="header-group"] {
  display: none !important;
}

/* ═══ SW NAV visibility fix ═══ */
.nav__link {
  opacity: 1 !important;
  font-size: 0.82rem !important;
  color: #C9A96E !important;
}
.nav__brand {
  opacity: 1 !important;
  font-size: 1.2rem !important;
  color: #C9A96E !important;
}
.nav__cta {
  opacity: 1 !important;
  font-size: 0.82rem !important;
  padding: 10px 22px !important;
}

/* ═══ HIDE native footer-group on SW pages ═══ */
[id*="footer-group"] {
  display: none !important;
}