:root {
            --sacred-orange: #FF6B35;
            --sacred-saffron: #F7931E;
            --deep-blue: #082F49;
            --soft-cream: #FFFBF5;
                   --sacred-orange: #FF6B35;
            --sacred-saffron: #F7931E;
            --deep-blue: #1A365D;
            --river-blue: #2C5F8D;
            --soft-cream: #FFF8F0;
            --success-green: #10B981;
            --muted-text: #64748b;
        }

        body { font-family: 'Inter', sans-serif; background-color: var(--soft-cream); color: #334155; overflow-x: hidden; }
        h1, h2, h3, .brand-font { font-family: 'Cinzel', serif; }
        .lora { font-family: 'Lora', serif; }

        /* Navigation */
        .navbar { background: white !important; border-bottom: 3px solid var(--sacred-saffron); padding: 15px 0; }
        .navbar-brand { color: var(--deep-blue) !important; letter-spacing: 2px; }

        /* Hero Section */
        .hero-section {
            padding: 0px;
            background: linear-gradient(rgba(255, 251, 245, 0.85), rgba(255, 251, 245, 0.85)), 
                        url('https://images.unsplash.com/photo-1561361042-0f04e760c231?q=80&w=2000'); /* Sacred River vibe */
            background-size: cover; background-position: center;
        }

        /* Value Cards */
        .value-card {
            background: white; border: none; border-radius: 24px; padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: all 0.3s ease; height: 100%;
        }
        .value-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(255, 107, 53, 0.1); }
        .icon-box {
            width: 60px; height: 60px; background: #FFF5F2; border-radius: 15px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; color: var(--sacred-orange); margin-bottom: 20px;
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, var(--sacred-orange), var(--sacred-saffron));
            color: white; border: none; padding: 14px 30px; border-radius: 50px;
            font-weight: 700; box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
        }

        /* Comparison Section */
        .comparison-table { background: white; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
        .comp-header { background: var(--deep-blue); color: white; padding: 20px; }
        .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      background: var(--sacred-orange);
      color: #fff;
      padding: .5rem 1rem;
      border-radius: 0 0 6px 6px;
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      z-index: 9999;
      text-decoration: none;
      transition: top .2s;
    }
    .skip-link:focus { top: 0; }

    /* ── Hero shell ── */
    .hero-section {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
      background: var(--cream);
    }

    /* ── Ripple / water SVG background ── */
    .hero-ripple {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .08;
      z-index: 0;
    }

    /* ── Grain overlay ── */
    .hero-section::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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
      background-size: 200px;
      opacity: .035;
      z-index: 1;
      pointer-events: none;
    }

    /* ── Decorative vertical rule ── */
    .hero-divider {
      position: absolute;
      left: 50%;
      top: 8%;
      bottom: 8%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--warm-gold) 25%, var(--warm-gold) 75%, transparent);
      z-index: 2;
      transform: scaleY(0);
      transform-origin: top;
      animation: growLine .9s cubic-bezier(.77,0,.18,1) .4s forwards;
    }
    @keyframes growLine { to { transform: scaleY(1); } }

    /* ── IMAGE SIDE ── */
    .hero-image-col {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: stretch;
    }

    .hero-image-wrap {
      position: relative;
      width: 100%;
      overflow: hidden;
      clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
    }

    .hero-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transform: scale(1.08);
      animation: imgReveal 1.4s cubic-bezier(.77,0,.18,1) .1s forwards;
    }
    @keyframes imgReveal {
      to { transform: scale(1); }
    }

    /* gradient overlay on image */
    .hero-image-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(13,43,78,.45) 0%, transparent 60%),
                  linear-gradient(to top, rgba(13,43,78,.6) 0%, transparent 40%);
    }

    /* floating stat chips on the image */
    .stat-chip {
      position: absolute;
      z-index: 5;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      border-left: 3px solid var(--sacred-orange);
      border-radius: 6px;
      padding: .55rem 1rem;
      font-family: 'Mulish', sans-serif;
      opacity: 0;
      transform: translateY(14px);
    }
    .stat-chip strong {
      display: block;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--deep-blue);
      line-height: 1.1;
    }
    .stat-chip span {
      font-size: .72rem;
      color: #555;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .stat-chip:nth-child(1) {
      bottom: 22%; left: 8%;
      animation: chipIn .6s ease .9s forwards;
    }
    .stat-chip:nth-child(2) {
      bottom: 12%; left: 8%;
      animation: chipIn .6s ease 1.1s forwards;
    }
    @keyframes chipIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── TEXT SIDE ── */
    .hero-text-col {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5rem 5% 5rem 6%;
    }

    /* staggered fade-up on children */
    .hero-text-col > * {
      opacity: 0;
      transform: translateY(24px);
    }
    .hero-text-col > *:nth-child(1) { animation: fadeUp .65s ease .5s forwards; }
    .hero-text-col > *:nth-child(2) { animation: fadeUp .65s ease .68s forwards; }
    .hero-text-col > *:nth-child(3) { animation: fadeUp .65s ease .84s forwards; }
    .hero-text-col > *:nth-child(4) { animation: fadeUp .65s ease 1s forwards; }
    .hero-text-col > *:nth-child(5) { animation: fadeUp .65s ease 1.15s forwards; }
    @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

    .hero-eyebrow {
      font-family: 'Mulish', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--sacred-orange);
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: 1.4rem;
    }
    .hero-eyebrow::before {
      content: '';
      display: inline-block;
      width: 2rem;
      height: 2px;
      background: var(--sacred-orange);
    }

    .hero-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.6rem, 4.5vw, 4rem);
      font-weight: 700;
      line-height: 1.1;
      color: var(--deep-blue);
      margin-bottom: 1.4rem;
    }
    .hero-heading em {
      font-style: italic;
      color: var(--sacred-orange);
    }

    .hero-body {
      font-family: 'Mulish', sans-serif;
      font-size: 1.05rem;
      line-height: 1.75;
      color: #3a4a5c;
      max-width: 38ch;
      margin-bottom: 2.2rem;
    }
    .hero-body strong { color: var(--deep-blue); font-weight: 700; }

    /* ── Divider ornament ── */
    .ornament {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: 2.2rem;
    }
    .ornament::before,
    .ornament::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--warm-gold));
    }
    .ornament::after {
      background: linear-gradient(to left, transparent, var(--warm-gold));
    }
    .ornament-icon {
      color: var(--warm-gold);
      font-size: 1.2rem;
    }

    /* ── CTA buttons ── */
    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: .9rem;
      align-items: center;
    }

    .btn-reserve {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .04em;
      padding: .9rem 2rem;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      background: var(--sacred-orange);
      color: #fff;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: box-shadow .25s, transform .2s;
    }
    .btn-reserve::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
      opacity: 0;
      transition: opacity .25s;
    }
    .btn-reserve:hover, .btn-reserve:focus-visible {
      box-shadow: 0 8px 24px rgba(212,100,26,.45);
      transform: translateY(-2px);
    }
    .btn-reserve:hover::before, .btn-reserve:focus-visible::before { opacity: 1; }
    .btn-reserve:focus-visible { outline: 3px solid var(--deep-blue); outline-offset: 3px; }

    .btn-call {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .04em;
      padding: .85rem 1.8rem;
      border-radius: 4px;
      border: 2px solid var(--deep-blue);
      cursor: pointer;
      background: transparent;
      color: var(--deep-blue);
      text-decoration: none;
      transition: background .25s, color .25s, transform .2s, box-shadow .25s;
    }
    .btn-call:hover, .btn-call:focus-visible {
      background: var(--deep-blue);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(13,43,78,.3);
    }
    .btn-call:focus-visible { outline: 3px solid var(--sacred-orange); outline-offset: 3px; }

    /* ── Wave decoration at bottom ── */
    .hero-wave {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      pointer-events: none;
      line-height: 0;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .hero-section {
        grid-template-columns: 1fr;
        grid-template-rows: 52vw auto;
        min-height: auto;
      }
      .hero-divider { display: none; }
      .hero-image-wrap { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
      .hero-image-wrap img { height: 52vw; min-height: 220px; }
      .hero-text-col { padding: 2.8rem 1.4rem 3.5rem; }
      .hero-heading { font-size: clamp(2rem, 6vw, 2.8rem); }
    }

    @media (max-width: 480px) {
      .hero-ctas { flex-direction: column; align-items: stretch; }
      .btn-reserve, .btn-call { justify-content: center; }
    }

    /* ── Reduce motion ── */
    @media (prefers-reduced-motion: reduce) {
      .hero-image-wrap img,
      .hero-divider,
      .stat-chip,
      .hero-text-col > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }
    .btn-primary-custom {
            background: linear-gradient(135deg, var(--sacred-orange), var(--sacred-saffron));
            color: white; border: none; padding: 14px 30px; border-radius: 50px;
            font-weight: 700; box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
        }

        .hero-badge {
            background: linear-gradient(135deg, var(--sacred-orange), var(--sacred-saffron));
            color: white; padding: 8px 20px; border-radius: 50px; font-weight: 700; display: inline-block; font-size: 0.85rem;
        }

        .details-card {
            background: white; border-radius: 24px; padding: 35px; box-shadow: 0 10px 40px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.05);
        }

        .buddy-feature {
            background: #ffffff; border: 1px solid #edf2f7; border-left: 4px solid var(--sacred-orange); 
            padding: 20px; border-radius: 12px; height: 100%; transition: transform 0.2s;
        }
        .buddy-feature:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

        .booking-sidebar {
            background: white; border-radius: 24px; padding: 30px; border: 2px solid var(--sacred-saffron);
            position: sticky; top: 20px; box-shadow: 0 15px 35px rgba(247, 147, 30, 0.1);
        }

        .form-label { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: var(--river-blue); letter-spacing: 0.5px; }
        
        .btn-check:checked + .btn-outline-secondary {
            background-color: var(--sacred-orange); border-color: var(--sacred-orange); color: white;
        }

        .btn-book {
            background: linear-gradient(to right, var(--sacred-orange), var(--sacred-saffron));
            color: white; border: none; padding: 16px; border-radius: 12px; font-weight: 700; width: 100%; 
            margin-top: 15px; transition: all 0.3s ease;
        }
        .btn-book:hover { opacity: 0.9; transform: scale(1.02); color: white; }

        .service-highlight { color: var(--sacred-orange); font-weight: 700; }
        .call-action-box {
            background: var(--deep-blue); color: white; padding: 30px; border-radius: 20px;
            margin-bottom: 30px; border-left: 10px solid var(--sacred-orange);
        }
        .required-star { color: var(--sacred-orange); font-weight: bold; }

        /* Progress Tracker */
        .step-indicator { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; }
        .step-indicator::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: #e2e8f0; z-index: 1; }
        .ind-step { width: 30px; height: 30px; border-radius: 50%; background: white; border: 2px solid #e2e8f0; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; }
        .ind-step.active { border-color: var(--success-green); background: var(--success-green); color: white; }