/* ============ BRAND TOKENS (Aura House Resort Brand Book §4–5) ============ */
  :root{
    --brown:      #4A2E1E;  /* Deep Brown — primary: text, structure, wordmark ink */
    --terracotta: #3E5B3E;  /* Terracotta Roof — accent, small use only */
    --forest:     #3E5B3E;  /* Forest Green — accent, RESORT wordmark / nature */
    --gold:       #B8935A;  /* Warm Gold — highlight, thin lines & details only */
    --cream:      #F8F4EE;  /* Cream — primary background, 60% */
    --ivory:      #FAF7F0;  /* Ivory White — text on dark, negative space */
    --slate:      #5B6B5E;  /* Slate Water — water imagery accents only */

    /* Brand-book §5 typography */
    --script: "Brittany Signature", "Alex Brush", cursive;   /* wordmark: Aura House */
    --caps:   "Cinzel", serif;                                /* RESORT + eyebrows */
    --thai:   "Noto Serif Thai", serif;                       /* all Thai copy */

    --wrap: 1220px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--thai);
    color: var(--brown);
    background: var(--cream);
    line-height:1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

  h1,h2,h3,h4{
    font-family: var(--thai);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--brown);
  }
  .eyebrow{
    font-family: var(--caps);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
    font-weight: 600;
  }

  /* ============ WORDMARK (brand-book §3: logo system) ============ */
  .wordmark{ display:flex; align-items:baseline; gap:8px; }
  .wordmark .script{
    font-family: var(--script);
    font-size: 2.1rem;
    color: var(--brown);
    line-height:1;
  }
  .wordmark .caps{
    font-family: var(--caps);
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    color: var(--forest);
    font-weight:600;
    text-transform:uppercase;
  }
  .wordmark.on-dark .script{ color: var(--ivory); }
  .wordmark.on-dark .caps{ color: var(--gold); }

  /* ============ HEADER ============ */
  /* Do/Don't §6: keep logo on Cream — header stays light so the primary logo never sits on a dark field */
  .site-header{
    position: fixed; top:0; left:0; right:0; z-index: 100;
    padding: 18px 0;
    background: rgba(248,244,238,0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(74,46,30,0.08);
    transition: all .4s var(--ease);
  }
  .site-header.scrolled{
    padding: 12px 0;
    box-shadow: 0 6px 24px rgba(74,46,30,0.08);
  }
  .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  .brand-lockup{ display:flex; align-items:center; gap:12px; }
  .brand-lockup img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }

  .nav-links{ display:flex; gap:34px; }
  .nav-links a{ font-family:var(--thai); color: var(--brown); font-size: 0.92rem; position:relative; padding: 4px 0; }
  .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold); transition: width .3s var(--ease); }
  .nav-links a:hover::after{width:100%;}

  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--thai); font-size:0.88rem; padding: 13px 26px; border-radius: 999px; border:1px solid transparent; cursor:pointer; transition: all .3s var(--ease); white-space:nowrap; }
  .btn-brown{ background: var(--brown); color: var(--ivory); font-weight:600; }
  .btn-brown:hover{ background: #3a2417; }
  .btn-gold-line{ border-color: var(--gold); color: var(--brown); }
  .btn-gold-line:hover{ background: var(--gold); color: var(--ivory); }
  .btn-ivory-line{ border-color: rgba(250,247,240,0.55); color: var(--ivory); }
  .btn-ivory-line:hover{ border-color:#fff; background: rgba(250,247,240,0.1); }

  .burger{ display:none; width:26px; height:18px; position:relative; background:none; border:none; cursor:pointer; }
  .burger span{ position:absolute; left:0; right:0; height:1.4px; background:var(--brown); transition: all .3s var(--ease); }
  .burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:8px;} .burger span:nth-child(3){top:16px;}
  .burger.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  /* ============ HERO ============ */
  .hero{
    position:relative; min-height: 100svh; display:flex; align-items:center;
    background:
      linear-gradient(180deg, rgba(37,23,15,0.5) 0%, rgba(37,23,15,0.82) 100%),
      url('images/hotspring-pool.jpg') center/cover;
    overflow:hidden;
  }
  .hero-badge{
    position:absolute; top: 104px; right: 32px; z-index:3;
    background: var(--brown); color: var(--ivory);
    font-family:var(--caps); font-size:0.7rem; font-weight:600; letter-spacing:.08em;
    padding: 10px 18px; border-radius:999px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }
  .breath-ring{
    position:absolute; right:-10%; top:50%; transform:translateY(-50%);
    width: min(58vw, 700px); height: min(58vw, 700px);
    border-radius:50%; border: 1px solid rgba(184,147,90,0.4);
    animation: breathe 7s var(--ease) infinite; z-index:1;
  }
  .breath-ring::before, .breath-ring::after{ content:""; position:absolute; inset: 10%; border-radius:50%; border:1px solid rgba(184,147,90,0.26); }
  .breath-ring::after{ inset:22%; border-color: rgba(184,147,90,0.18); }
  @keyframes breathe{ 0%,100%{ transform:translateY(-50%) scale(1); opacity:.6; } 50%{ transform:translateY(-50%) scale(1.08); opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .breath-ring{ animation:none; } }

  .hero-content{ position:relative; z-index:2; max-width: 700px; padding-top: 66px; }
  .hero-logo{ width:96px; height:96px; border-radius:50%; margin-bottom:26px; box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
  .hero-content .slogan{
    font-family: var(--thai); font-style:normal; font-weight:600;
    color: var(--gold); font-size: 1.05rem; letter-spacing:.02em; margin-bottom:14px;
  }
  .hero-content h1{
    font-family: var(--script); font-weight:400;
    font-size: clamp(3.4rem, 8vw, 4.2rem);
    color: var(--ivory); line-height:0.95; margin-bottom:6px;
  }
  .hero-content .resort-caps{
    font-family: var(--caps); font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing:.5em; color: var(--ivory); font-weight:600; margin-bottom:26px;
  }
  .hero-content p{ font-family:var(--thai); color: rgba(250,247,240,0.86); font-size: 1.05rem; max-width: 500px; margin-bottom: 34px; }
  .hero-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
  .hero-phone{ font-family:var(--thai); color: rgba(250,247,240,0.78); font-size:0.88rem; }
  .hero-phone strong{ display:block; color:var(--ivory); font-size:1rem; letter-spacing:.02em; }

  .scroll-cue{ position:absolute; bottom:30px; left:32px; z-index:2; display:flex; align-items:center; gap:10px; color: rgba(250,247,240,0.65); font-family:var(--caps); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; }
  .scroll-cue .line{ width:34px; height:1px; background: rgba(250,247,240,0.5); }

  /* ============ SECTION GENERAL ============ */
  section{ padding: 116px 0; position:relative; }
  .section-head{ max-width: 640px; margin-bottom: 60px; }
  .section-head h2{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-top:12px; }
  .section-head p{ margin-top:16px; color:#6b5847; font-size:1.02rem; max-width:520px; }

  .reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }

  /* ============ ABOUT ============ */
  .about{ background: var(--ivory); }
  .about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 68px; align-items:center; }
  .about-media{ position:relative; }
  .about-media img{ border-radius: 6px; width:100%; height: 440px; object-fit:cover; }
  .about-media .stat-card{ position:absolute; left:-30px; bottom:-30px; background: var(--brown); color:var(--ivory); padding: 24px 28px; border-radius: 6px; width: 220px; }
  .stat-card .num{ font-family:var(--script); font-size:2.6rem; color:var(--gold); line-height:1; }
  .stat-card .lbl{ font-family:var(--thai); font-size:0.78rem; color: rgba(250,247,240,0.8); margin-top:6px; }
  .about-copy p{ color:#6b5847; margin-top:18px; max-width:480px; }
  .about-copy .btn{ margin-top:30px; }

  /* ============ AMENITIES ============ */
  .amenities{ background: var(--cream); }
  .amenity-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(74,46,30,0.1); border-radius: 8px; overflow:hidden; }
  .amenity-card{ background: var(--ivory); padding: 38px 28px; text-align:center; transition: background .35s var(--ease), transform .35s var(--ease); }
  .amenity-card:hover{ background: var(--brown); transform: translateY(-4px); }
  .amenity-card:hover h3{ color:var(--ivory); }
  .amenity-card .icon{ width:34px; height:34px; margin: 0 auto 18px; color: var(--forest); }
  .amenity-card:hover .icon{ color: var(--gold); }
  .amenity-card h3{ font-family:var(--thai); font-size:1rem; font-weight:600; transition:color .35s; }

  /* ============ PROMOTION ============ */
  /* High-impact accent block — the one place Terracotta covers a large field, within the brand book's 10% accent budget for this section */
  .promo{ background: var(--terracotta); padding: 100px 0; position:relative; overflow:hidden; }
  .promo::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(184,147,90,0.22), transparent 55%); }
  .promo-inner{ position:relative; text-align:center; max-width:640px; margin:0 auto; }
  .promo .eyebrow{ color: var(--gold); }
  .promo h2{ color:var(--ivory); font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 14px 0 8px; }
  .promo-sub{ color: rgba(250,247,240,0.75); font-size:0.95rem; margin-bottom: 36px; }
  .price-row{ display:flex; align-items:baseline; justify-content:center; gap:18px; margin-bottom:10px; flex-wrap:wrap; }
  .price-old{ font-family:var(--script); font-size:1.6rem; color: rgba(250,247,240,0.55); text-decoration: line-through; }
  .price-new{ font-family:var(--script); font-size: clamp(2.8rem, 6vw, 4.2rem); color: var(--gold); line-height:1; }
  .price-new sup{ font-family:var(--thai); font-size: 1.1rem; font-weight:600; margin-left:6px; color: rgba(250,247,240,0.8); }
  .price-note{ color: rgba(250,247,240,0.65); font-size:0.8rem; margin-bottom:38px; }
  .promo-badge{ display:inline-block; background: #5B6B5E; color:var(--ivory); font-family:var(--caps); font-size:0.72rem; font-weight:600; letter-spacing:.06em; padding:9px 20px; border-radius:999px; margin-bottom:22px; }
  .promo-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .btn-green {
    background: var(--slate);
    color: var(--ivory);
    font-weight: 600;
}

  /* ============ GALLERY ============ */
  .gallery{ background: var(--ivory); }
  .gallery-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 50px; gap:24px; flex-wrap:wrap; }
  .gallery-grid{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; gap: 14px; }
  .gallery-grid a{ grid-column: span 2; grid-row: span 2; overflow:hidden; border-radius:6px; position:relative; }
  .gallery-grid a:nth-child(1){ grid-column: span 4; grid-row: span 2;}
  .gallery-grid a:nth-child(4){ grid-column: span 3; }
  .gallery-grid a:nth-child(5){ grid-column: span 3; }
  .gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
  .gallery-grid a:hover img{ transform: scale(1.07); }
  .gallery-grid a::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(37,23,15,0.55) 100%); opacity:0; transition:opacity .4s; }
  .gallery-grid a:hover::after{ opacity:1; }

  /* ============ CONTACT / FOOTER ============ */
  footer{ background: var(--brown); color: rgba(250,247,240,0.78); padding: 90px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(250,247,240,0.12); }
  .footer-grid h4{ color:var(--ivory); font-family:var(--caps); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; margin-bottom:20px; }
  .footer-brand .brand-lockup{ margin-bottom:18px; }
  .footer-brand p{ font-family:var(--thai); font-size:0.92rem; max-width:280px; color: rgba(250,247,240,0.68); }
  .footer-links li{ margin-bottom:12px; font-family:var(--thai); font-size:0.9rem; display:flex; align-items:center; gap:8px; }
  .footer-links a:hover{ color: var(--gold); }
  .hashtags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .hashtags span{ font-family:var(--caps); font-size:0.66rem; letter-spacing:.02em; color: var(--gold); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 26px; font-size:0.78rem; color: rgba(250,247,240,0.5); flex-wrap:wrap; gap:12px; }
  .socials{ display:flex; gap:14px; }
  .socials a{ width:36px; height:36px; border:1px solid rgba(250,247,240,0.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--caps); font-size:0.65rem; transition: all .3s; }
  .socials a:hover{ border-color: var(--gold); color: var(--gold); }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px){
    .about-grid{ grid-template-columns:1fr; gap:52px; }
    .about-media img{ height: 340px; }
    .amenity-grid{ grid-template-columns: repeat(2,1fr); }
    .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:36px; }
    .gallery-grid{ grid-template-columns: repeat(4,1fr); grid-auto-rows:140px;}
    .gallery-grid a:nth-child(1){ grid-column: span 4; }
    .gallery-grid a:nth-child(4){ grid-column: span 2; }
    .gallery-grid a:nth-child(5){ grid-column: span 2; }
  }

  @media (max-width: 760px){
    .wrap{ padding:0 20px; }
    section{ padding: 80px 0; }
    .nav-links{ position:fixed; inset:0 0 0 auto; width: min(78vw, 340px); background: var(--cream); flex-direction:column; justify-content:center; align-items:flex-start; gap: 26px; padding: 40px; transform: translateX(100%); transition: transform .45s var(--ease); z-index: 90; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
    .nav-links.open{ transform:translateX(0); }
    .nav-links a{ font-size:1.05rem; }
    .nav-cta .btn-gold-line{ display:none; }
    .burger{ display:block; }
    .hero-content{ padding-top: 84px; }
    .hero-content p{ max-width:100%; }
    .hero-badge{ top:86px; right:20px; font-size:0.62rem; padding:8px 14px; }
    .breath-ring{ width: 90vw; height:90vw; right:-30%; opacity:.5; }
    .amenity-grid{ grid-template-columns: 1fr 1fr; }
    .about-media .stat-card{ left:14px; bottom:-22px; padding:18px 20px; width:auto; }
    .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; }
    .gallery-grid a:nth-child(1){ grid-column: span 2; }
    .gallery-grid a:nth-child(4){ grid-column: span 1; }
    .gallery-grid a:nth-child(5){ grid-column: span 1; }
    .footer-grid{ grid-template-columns: 1fr; gap:34px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
    .price-row{ flex-direction:column; gap:4px; }
  }

  .nav-overlay{ display:none; position:fixed; inset:0; background:rgba(37,23,15,0.35); z-index:80; }
  .nav-overlay.open{ display:block; }