/* ============================================================
   AMEERA — Design refinement layer (v1)
   Typography, colour and spacing polish only. No markup or
   section changes. Remove the <link> to revert instantly.
   Inspired by the restraint of Singita / andBeyond / A&K:
   warm earth tones, refined serif headings, quiet readable body,
   hairline rules, generous space, slow image motion.
   ============================================================ */
:root{
  --gold:#C69A45;            /* muted antique gold (was bright amber) */
  --gold-light:#DDB766;
  --ivory:#F8F4EB;           /* warmer paper */
  --ivory-dim:#EFE8D8;       /* natural sand */
  --ink:#2A251F;
  --grey:#6E675C;
  --hair:rgba(58,32,20,.14); /* hairline rule colour */
  --ease:cubic-bezier(.22,.61,.36,1);
}
html{text-rendering:optimizeLegibility}
body{font-family:var(--font-body);font-size:16.5px;line-height:1.75;color:var(--ink);font-weight:400}
p{font-size:1.02rem;line-height:1.8;color:#3a342c}
.lede{font-size:1.18rem;line-height:1.7;font-weight:300;color:var(--grey)}

/* Headings: lighter, larger, quieter */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.005em;color:var(--green-dark)}
h1{font-weight:400;font-size:clamp(2.8rem,5.8vw,5rem);line-height:1.06;letter-spacing:-.02em}
h2{font-weight:400;font-size:clamp(2.1rem,3.7vw,3.1rem);line-height:1.12}
h3{font-weight:500}
.hero h1{font-weight:400;text-wrap:balance}
h1,h2{text-wrap:balance}

/* Eyebrows & rules: finer, more tracked */
.eyebrow{font-weight:500;letter-spacing:.34em;font-size:.68rem;color:var(--gold)}
.rule::after{height:1px}

/* Rhythm: more air between sections */
.section{padding:clamp(72px,9vw,128px) var(--pad)}
.section--tight{padding:clamp(48px,6vw,80px) var(--pad)}
.grid{gap:clamp(20px,2.4vw,36px)}

/* Buttons: squarer, finer, calmer */
.btn{font-weight:500;letter-spacing:.24em;font-size:.68rem;padding:16px 34px;border-radius:0;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{transform:none}
.btn--gold{color:#2a1608}
.btn--ghost{border-color:var(--green)}

/* Cards: hairline edge, no heavy shadow, slow image zoom */
.card{border:1px solid var(--hair);box-shadow:none;border-radius:0;background:#fff;
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(36,20,7,.35);border-color:rgba(198,154,69,.5)}
.card-image,.card-image.has-photo{transition:transform 1.1s var(--ease)}
.card:hover .card-image{transform:scale(1.04)}
.card{overflow:hidden}
.card-body h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.card-body p{font-size:.94rem;line-height:1.7}
.card-link{letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;font-weight:600;color:var(--gold)}
.card-tag{letter-spacing:.18em}

/* Homepage panels — same sections, same order, finer finish */
.hm-coll,.hm-dest,.hm-thing,.hm-act,.hm-beach-card,.hm-why,.hm-panel,.hm-form-card{border-radius:0}
.hm-coll-media,.hm-dest-media,.hm-thing-media,.hm-act-media,.hm-beach-media,.price-card-media{transition:transform 1.2s var(--ease)}
.hm-coll:hover .hm-coll-media,.hm-dest:hover .hm-dest-media,.hm-thing:hover .hm-thing-media,
.hm-act:hover .hm-act-media,.hm-beach-card:hover .hm-beach-media{transform:scale(1.05)}
.hm-head h2,.hm-head h3{font-weight:400}
.hm-chips li{border-radius:0;letter-spacing:.08em;border-color:var(--hair)}

/* Header & mega menu: thinner and lighter */
.site-header{border-bottom:1px solid var(--hair)}
.mega-card-lb strong{font-weight:400;letter-spacing:.01em}

/* FAQ, tables, inputs */
details.faq-item{border-top:1px solid var(--hair);border-bottom:0}
details.faq-item summary{font-family:var(--font-display);font-size:1.28rem;font-weight:500}
input,select,textarea{border-radius:0;font-family:var(--font-body)}
input:focus,select:focus,textarea:focus{outline:1px solid var(--gold);outline-offset:1px;border-color:var(--gold)}

/* Hero image slow settle for a cinematic feel (respects reduced motion) */
.hero-slide.is-active{animation:amKen 14s var(--ease) both}
@keyframes amKen{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-slide.is-active{animation:none}*{scroll-behavior:auto!important}}

/* Footer: deeper and calmer */
.site-footer{background:var(--green-dark)}
.site-footer a{letter-spacing:.02em}
::selection{background:var(--gold);color:#2a1608}