:root {
      --sand:      #C8A96E;
      --sand-lt:   #E8D5A8;
      --sand-pale: #F5EDD8;
      --ink:       #1A1208;
      --ink-soft:  #3D2E12;
      --dusk:      #6B4C2A;
      --sky:       #7BA5BC;
      --white:     #FDFAF4;
      --rule:      rgba(200,169,110,.35);

      --ff-display: 'Cormorant Garamond', Georgia, serif;
      --ff-body:    'Jost', system-ui, sans-serif;
    }

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

    html { scroll-behavior: smooth; }

    /* ── HERO ──────────────────────────────────────────────────────── */
    .hero {
      position: relative;
      height: 52vh; min-height: 340px;
      display: flex; align-items: flex-end;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background: url('https://www.sandroutesresort.com/img/banner-1.jpg') center/cover no-repeat;
      transform: scale(1.05);
      animation: heroZoom 14s ease-in-out infinite alternate;
    }
    @keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(26,18,8,.88) 0%, rgba(26,18,8,.3) 55%, transparent 100%);
    }
    .hero-content {
      position: relative; z-index: 1;
      padding: 0 6vw 3.5rem;
    }
    .hero-eyebrow {
      display: inline-block;
      font-family: var(--ff-body);
      font-size: .72rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--sand);
      margin-bottom: .6rem;
    }
    .hero-title {
      font-family: var(--ff-display);
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      font-weight: 400;
      color: var(--sand-pale);
      line-height: 1.1;
    }
    .hero-title em { font-style: italic; color: var(--sand); }

    /* ── SAND-GRAIN DIVIDER (signature element) ─────────────────────
       A horizontal strip of subtle CSS-generated dune-like ripples
       that separates every major section — specific to desert brand.  */
    .dune-rule {
      width: 100%;
      height: 28px;
      position: relative;
      overflow: hidden;
      pointer-events: none;
    }
    .dune-rule::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 18px,
        rgba(200,169,110,.18) 18px,
        rgba(200,169,110,.18) 20px
      );
      mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, black 40%, transparent 100%);
    }

    /* ── CONTACT GRID ──────────────────────────────────────────────── */
    .contact-sectiona {
      max-width: 1160px;
      margin: 0 auto;
      padding: 5rem 5vw 6rem;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 5rem;
    }

    /* Left: info panel */
    .info-panel {}
    .section-label {
      font-size: .72rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sand);
      margin-bottom: .8rem;
    }
    .info-heading {
      font-family: var(--ff-display);
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: 400;
      color: var(--ink-soft);
      line-height: 1.2;
      margin-bottom: 1rem;
    }
    .info-subtext {
      font-size: .92rem;
      color: var(--dusk);
      margin-bottom: 2.5rem;
      max-width: 360px;
    }

    .contact-cards { display: flex; flex-direction: column; gap: 1rem; }
    .card {
      display: flex; align-items: flex-start; gap: 1rem;
      padding: 1.2rem 1.4rem;
      border: 1px solid var(--rule);
      border-radius: 4px;
      background: var(--sand-pale);
      transition: border-color .2s, box-shadow .2s;
      text-decoration: none;
      color: inherit;
    }
    .card:hover { border-color: var(--sand); box-shadow: 0 4px 18px rgba(200,169,110,.18); }
    .card-icon {
      width: 42px; height: 42px;
      background: var(--sand);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .card-icon svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .card-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dusk); margin-bottom: .15rem; }
    .card-value { font-size: .96rem; color: var(--ink); font-weight: 400; }
    .card-value small { display: block; font-size: .82rem; color: var(--dusk); }

    /* WhatsApp card accent */
    .card-wa .card-icon { background: #25D366; }
    .card-wa .card-icon svg { stroke: #fff; }

    .social-row { display: flex; gap: .8rem; margin-top: 2rem; }
    .social-btn {
      width: 40px; height: 40px;
      border: 1px solid var(--rule);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--dusk);
      text-decoration: none;
      transition: background .2s, border-color .2s;
    }
    .social-btn:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
    .social-btn svg { width: 17px; height: 17px; fill: currentColor; }

    /* Right: form panel */
    .form-panel {
      background: var(--sand-pale);
      border: 1px solid var(--rule);
      border-radius: 6px;
      padding: 2.8rem 2.6rem;
    }
    .form-title {
      font-family: var(--ff-display);
      font-size: 1.7rem;
      font-weight: 400;
      color: var(--ink-soft);
      margin-bottom: .4rem;
    }
    .form-sub { font-size: .85rem; color: var(--dusk); margin-bottom: 2rem; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
    .field label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); }
    .field input, .field select, .field textarea {
      background: var(--white);
      border: 1px solid rgba(200,169,110,.4);
      border-radius: 3px;
      padding: .75rem 1rem;
      font-family: var(--ff-body);
      font-size: .92rem;
      color: var(--ink);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
      width: 100%;
    }
    .field input:focus, .field select:focus, .field textarea:focus {
      border-color: var(--sand);
      box-shadow: 0 0 0 3px rgba(200,169,110,.15);
    }
    .field textarea { resize: vertical; min-height: 110px; }
    .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B4C2A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

    .btn-submit {
      display: inline-flex; align-items: center; gap: .6rem;
      background: var(--sand);
      color: var(--ink);
      border: none;
      border-radius: 3px;
      padding: .9rem 2.2rem;
      font-family: var(--ff-body);
      font-size: .84rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      font-weight: 500;
      transition: background .2s, transform .15s;
      width: 100%;
      justify-content: center;
      margin-top: .5rem;
    }
    .btn-submit:hover { background: var(--dusk); color: var(--white); transform: translateY(-1px); }
    .btn-submit svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* success message */
    .form-success {
      display: none;
      text-align: center;
      padding: 2rem 1rem;
    }
    .form-success .check { font-size: 3rem; margin-bottom: .8rem; }
    .form-success p { font-family: var(--ff-display); font-size: 1.4rem; color: var(--dusk); }
    .form-success small { font-size: .85rem; color: var(--sand); }

    /* ── MAP ───────────────────────────────────────────────────────── */
    .map-section { padding: 0 0 5rem; }
    .map-inner { max-width: 1160px; margin: 0 auto; padding: 0 5vw; }
    .map-label {
      font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
      color: var(--sand); margin-bottom: .6rem;
    }
    .map-heading {
      font-family: var(--ff-display);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 400; color: var(--ink-soft);
      margin-bottom: 1.8rem;
    }
    .map-frame-wrap {
      border: 1px solid var(--rule);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(107,76,42,.12);
    }
    .map-frame-wrap iframe {
      width: 100%; height: 420px; display: block; border: none;
    }

    /* ── BOOK STRIP ────────────────────────────────────────────────── */
    .book-strip {
      background: var(--ink);
      padding: 3.5rem 5vw;
      display: flex; align-items: center; justify-content: space-between;
      gap: 2rem; flex-wrap: wrap;
    }
    .book-strip-text {}
    .book-strip-eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); margin-bottom: .4rem; }
    .book-strip-heading { font-family: var(--ff-display); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--sand-pale); font-weight: 400; }
    .book-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
    .btn-primary {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--sand); color: var(--ink);
      padding: .85rem 2rem; border-radius: 3px;
      font-family: var(--ff-body); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
      text-decoration: none; transition: background .2s;
    }
    .btn-primary:hover { background: var(--sand-lt); }
    .btn-outline {
      display: inline-flex; align-items: center; gap: .5rem;
      border: 1px solid var(--sand-lt); color: var(--sand-lt);
      padding: .85rem 2rem; border-radius: 3px;
      font-family: var(--ff-body); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
      text-decoration: none; transition: background .2s, color .2s;
    }
    .btn-outline:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }
    /* ── RESPONSIVE ────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .contact-sectiona { grid-template-columns: 1fr; gap: 3rem; }
      .form-row { grid-template-columns: 1fr; }
      .float-btn-text { display: inline; }
    }
    @media (max-width: 600px) {
      .form-panel { padding: 1.8rem 1.4rem; }
      .book-strip { flex-direction: column; align-items: flex-start; }
    }