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

        :root {
          --cream: #f5f0e8;
          --cream-dark: #ede5d5;
          --warm-brown: #6b4f3a;
          --dark-brown: #3a2a1e;
          --forest-green: #3d5a3e;
          --forest-green-light: #4e7050;
          --burn-orange: #C15E22;
          --burn-orange-dark: #AE551F;
          --text-body: #5a4535;
          --text-light: #8a7060;
          --section-divider: #c8b89a;
          --font-serif: 'Cormorant Garamond', Georgia, serif;
          --font-body: 'EB Garamond', Georgia, serif;
        }

        html { scroll-behavior: smooth; }

        body {
          font-family: var(--font-body);
          background-color: var(--cream-dark);
          color: var(--text-body);
          overflow-x: hidden;
        }

        /* ============ HERO IMAGE ============ */
        .hero-image-wrap {
          margin-top: 61px;
          padding: 20px 20px 0;
        }

        .hero-image {
          width: 100%;
          max-width: 860px;
          margin: 0 auto;
          display: block;
          border-radius: 16px;
          overflow: hidden;
          aspect-ratio: 16/7;
        }

        .hero-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center 30%;
          display: block;
          filter: sepia(0.08) brightness(0.97);
          transition: transform 0.6s ease;
        }
        .hero-image:hover img { transform: scale(1.02); }

        /* ============ TITLE BLOCK ============ */
        .title-block {
          text-align: center;
          padding: 40px 24px 0;
          max-width: 680px;
          margin: 0 auto;
        }

        .title-block h1 {
          font-family: var(--font-serif);
          font-size: clamp(2rem, 5vw, 3.2rem);
          font-weight: 400;
          color: var(--dark-brown);
          letter-spacing: 0.03em;
          margin-bottom: 0.3em;
          animation: fadeUp 0.9s ease both;
        }

        .title-block .subtitle {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: clamp(1rem, 2vw, 1.25rem);
          font-weight: 300;
          color: var(--warm-brown);
          line-height: 1.55;
          animation: fadeUp 0.9s ease 0.1s both;
        }

        .divider-dots {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin: 18px 0 0;
          animation: fadeUp 0.9s ease 0.2s both;
        }
        .divider-dots span {
          width: 5px; height: 5px;
          border-radius: 50%;
          background: var(--section-divider);
          display: block;
        }
        .divider-dots span:nth-child(2) { width: 4px; height: 4px; opacity: 0.6; }

        .divider-dots::before,
        .divider-dots::after {
          content: '';
          flex: 1;
          display: block;
          height: 1px;
          background: var(--section-divider);
          min-width: 100px;
        }

        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* ============ MAIN CONTENT ============ */
        .content-wrap {
          padding: 48px 24px 0;
          max-width: 1200px;
          margin: 0 auto;
        }

        /* Two-column layout: text left, sidebar right */
        .content-grid {
          display: grid;
          grid-template-columns: 1fr 320px;
          gap: 56px;
          align-items: start;
        }

        /* ── Left: body text ── */
        .content-body p {
          font-family: var(--font-body);
          font-size: clamp(0.97rem, 1.5vw, 1.08rem);
          color: var(--text-body);
          line-height: 1.85;
          margin-bottom: 1.2em;
        }
        .content-body p strong {
          font-weight: 500;
          color: var(--dark-brown);
        }
        .content-body p em {
          font-style: italic;
        }

        .content-body .bullet-list {
          list-style: none;
          margin: 1.6em 0 1.6em;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .content-body .bullet-list li {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          font-family: var(--font-body);
          font-size: clamp(0.97rem, 1.5vw, 1.05rem);
          color: var(--text-body);
          line-height: 1.65;
        }
        .bullet-list li::before {
          content: '•';
          color: var(--forest-green);
          font-size: 1.2rem;
          line-height: 1.4;
          flex-shrink: 0;
        }
        .bullet-list li strong {
          font-weight: 500;
          color: var(--dark-brown);
        }

        /* ── Right: sidebar ── */
        .content-sidebar {
          display: flex;
          flex-direction: column;
          gap: 24px;
          position: sticky;
          top: 88px;
        }

        .sidebar-img-wrap {
          border-radius: 12px;
          overflow: hidden;
          aspect-ratio: 4/3;
          box-shadow: 0 8px 32px rgba(58,42,30,0.12);
        }
        .sidebar-img-wrap img {
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
          filter: sepia(0.1) brightness(0.95);
          transition: transform 0.5s ease;
        }
        .sidebar-img-wrap:hover img { transform: scale(1.04); }

        .sidebar-price-block {
          text-align: center;
          padding: 8px 0 4px;
        }

        .price-amount {
          font-family: var(--font-serif);
          font-size: clamp(2rem, 4vw, 2.8rem);
          font-weight: 400;
          color: var(--dark-brown);
          letter-spacing: 0.02em;
          line-height: 1.1;
          margin-bottom: 6px;
        }

        .price-detail {
          font-family: var(--font-body);
          font-size: 0.95rem;
          color: var(--text-light);
          letter-spacing: 0.04em;
        }

        .sidebar-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 15px 28px;
          background: var(--burn-orange);
          color: #fff;
          font-family: var(--font-body);
          font-size: 1.05rem;
          letter-spacing: 0.06em;
          text-decoration: none;
          border-radius: 100px;
          border: none;
          cursor: pointer;
          transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
          box-shadow: 0 4px 20px rgba(61,90,62,0.25);
          width: 100%;
        }
        .sidebar-btn:hover {
          background: var(--burn-orange-dark);
          /*transform: translateY(-2px);*/
          box-shadow: 0 8px 28px rgba(61,90,62,0.3);
        }
        .sidebar-btn-arrow { font-size: 1rem; }

        /* ============ BOTTOM BANNER ============ */
        .bottom-banner {
          margin: 64px 20px 0;
          border-radius: 16px;
          overflow: hidden;
          max-width: 860px;
          margin-left: auto;
          margin-right: auto;
          aspect-ratio: 16/5;
          margin-bottom: 24px;
        }

        .bottom-banner img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center 20%;
          display: block;
          filter: sepia(0.15) brightness(0.9);
        }

        /* ============ FAQ ============ */
        .faq-wrap {
          padding: 64px 24px 80px;
          max-width: 680px;
          margin: 0 auto;
        }

        .section-heading {
          font-family: var(--font-serif);
          font-size: clamp(1.7rem, 3.5vw, 2.4rem);
          font-weight: 400;
          color: var(--dark-brown);
          letter-spacing: 0.04em;
          text-align: center;
          margin-bottom: 0;
        }

        .faq-list {
          margin-top: 40px;
          border-top: 1px solid var(--section-divider);
        }

        .faq-item {
          border-bottom: 1px solid var(--section-divider);
          overflow: hidden;
        }

        .faq-question {
          width: 100%;
          background: none;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px 0;
          text-align: left;
          gap: 16px;
        }

        .faq-question-text {
          font-family: var(--font-body);
          font-size: clamp(0.95rem, 1.5vw, 1.02rem);
          color: var(--text-body);
          letter-spacing: 0.02em;
          line-height: 1.5;
        }

        .faq-icon {
          flex-shrink: 0;
          width: 28px; height: 28px;
          border: 1.5px solid var(--section-divider);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.9rem;
          color: var(--text-light);
          transition: transform 0.3s ease, background 0.2s, color 0.2s, border-color 0.2s;
        }
        .faq-item.open .faq-icon {
          transform: rotate(90deg);
          background: var(--forest-green);
          color: #fff;
          border-color: var(--forest-green);
        }

        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease;
        }
        .faq-item.open .faq-answer { max-height: 300px; }

        .faq-answer-inner {
          padding: 0 0 20px;
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 0.98rem;
          color: var(--text-light);
          line-height: 1.75;
        }

        /* ============ SCROLL REVEAL ============ */
        .reveal {
          opacity: 0;
          transform: translateY(22px);
          transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible { opacity: 1; transform: none; }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }

        /* ============ MOBILE FIRST RESPONSIVE ============ */

        /* Mobile base — single column */
        @media (max-width: 767px) {
          .hero-image-wrap { padding: 14px 14px 0; }
          .hero-image { aspect-ratio: 16/9; border-radius: 12px; }

          .title-block { padding: 32px 20px 0; }

          .content-wrap { padding: 36px 20px 0; }

          .content-grid {
            grid-template-columns: 1fr;
            gap: 36px;
          }

          /* On mobile, sidebar comes AFTER body text */
          .content-sidebar {
            position: static;
            order: 2;
          }
          .content-body { order: 1; }

          /* Price + CTA become a sticky bottom bar on mobile */
          .sidebar-price-block { display: none; }
          .sidebar-btn-desktop { display: none; }

          .mobile-cta-bar {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: rgba(245,240,232,0.97);
            backdrop-filter: blur(10px);
            padding: 14px 24px 20px;
            border-top: 1px solid var(--section-divider);
            z-index: 90;
            box-shadow: 0 -4px 24px rgba(58,42,30,0.1);
          }

          .mobile-cta-price {
            display: flex;
            flex-direction: column;
            gap: 2px;
          }
          .mobile-cta-price .price-amount {
            font-size: 1.6rem;
            text-align: left;
            margin: 0;
          }
          .mobile-cta-price .price-detail {
            font-size: 0.82rem;
            text-align: left;
          }

          .mobile-cta-btn {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 24px;
            background: var(--forest-green);
            color: #fff;
            font-family: var(--font-body);
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            text-decoration: none;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
            box-shadow: 0 4px 16px rgba(61,90,62,0.3);
          }
          .mobile-cta-btn:hover {
            background: var(--forest-green-light);
            transform: translateY(-1px);
          }

          /* extra bottom padding so content isn't hidden behind sticky bar */
          body { padding-bottom: 90px; }

          .bottom-banner { aspect-ratio: 16/7; margin: 48px 14px 0;}

          .faq-wrap { padding: 48px 20px 100px; }
        }

        /* Tablet */
        @media (min-width: 768px) and (max-width: 1023px) {
          .content-grid {
            grid-template-columns: 1fr 260px;
            gap: 40px;
          }
          .mobile-cta-bar { display: none !important; }
        }

        /* Desktop */
        @media (min-width: 1024px) {
          .hero-image-wrap { padding: 28px 48px 0; }
          .content-wrap { padding: 56px 0 0; }
          .mobile-cta-bar { display: none !important; }
        }

        /* Hide mobile CTA bar by default (shown via media query above) */
        .mobile-cta-bar { display: none; }