/* ============================================================
   Herdade dos Sobreiros — design tokens
   Palette named after the estate's own materials.
   Rhythm: cream daylight → ink dusk (A Terra) → warm cream
   (A Mesa) → terracotta → ink night (Reservas) — the page
   moves through a day at the estate.
   ============================================================ */
:root{
  --cal:        #F5F1E8; /* whitewashed lime plaster */
  --cal-deep:   #EBE4D4; /* shaded plaster / card bg   */
  --terra:      #B5502E; /* roof tile / burnt earth    */
  --terra-deep: #8F3E22;
  --cortica:    #5C4130; /* cork bark / ink on cream   */
  --azinheira:  #4A5D3A; /* holm oak / cork oak green  */
  --poente:     #23282A; /* dusk sky, ink sections     */
  --poente-2:   #2E3532;
  --palha:      #D9A441; /* wheat / lantern light      */
  --cream-70:   rgba(245,241,232,.7);

  --font-display: 'Piazzolla', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ledger: 'Space Mono', 'SF Mono', monospace;

  --wrap: 1240px;
  --edge: clamp(24px, 5vw, 64px);
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cal);
  color:var(--cortica);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--terra);
  outline-offset:3px;
}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--font-ledger);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terra);
  margin:0 0 1.1em;
}
.eyebrow--light{ color:var(--palha); text-shadow:0 1px 12px rgba(0,0,0,.5); }

.h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 .55em;
  color:var(--cortica);
}
.h2--light{ color:var(--cal); text-shadow:0 2px 20px rgba(0,0,0,.4); }
.h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.6rem;
  margin:.15em 0 .5em;
}
.lede{
  font-size:1.14rem;
  line-height:1.6;
  max-width:44ch;
  color:var(--cortica);
  opacity:.92;
}
.lede--light{ color:var(--cal); opacity:.92; text-shadow:0 1px 14px rgba(0,0,0,.4); }
.body{
  max-width:46ch;
  opacity:.85;
}

.link-arrow{
  display:inline-block;
  margin-top:1.6em;
  font-family:var(--font-ledger);
  font-size:.82rem;
  letter-spacing:.04em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  color:var(--terra);
  transition:opacity .2s;
}
.link-arrow:hover{ opacity:.65; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95em 1.9em;
  font-family:var(--font-ledger);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.btn--terra{
  background:var(--terra);
  color:var(--cal);
}
.btn--terra:hover{ background:var(--terra-deep); }
.btn--ghost{
  border-color:var(--cream-70);
  color:var(--cal);
}
.btn--ghost:hover{ background:rgba(245,241,232,.12); }
.btn:active{ transform:translateY(1px); }

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- crest ---------- */
.nav__crest, .divider__crest, .footer__crest{ fill:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px var(--edge);
  color:var(--cal);
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.nav.is-scrolled{
  background:rgba(35,40,42,.88);
  backdrop-filter:blur(10px);
  padding-top:14px;
  padding-bottom:14px;
  box-shadow:0 1px 0 rgba(245,241,232,.08);
}
.nav__mark{
  display:flex;
  align-items:center;
  gap:.6em;
  text-decoration:none;
  color:inherit;
}
.nav__crest{ width:30px; height:30px; color:currentColor; flex-shrink:0; }
.nav__wordmark{
  font-family:var(--font-display);
  font-size:1.02rem;
  letter-spacing:.01em;
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:2.1em;
  font-family:var(--font-ledger);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nav__menu a{
  text-decoration:none;
  color:inherit;
  opacity:.88;
  position:relative;
  padding-bottom:4px;
}
.nav__menu a:not(.nav__cta)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav__menu a:not(.nav__cta):hover::after{ transform:scaleX(1); }
.nav__cta{
  border:1px solid currentColor;
  padding:.65em 1.3em;
  border-radius:var(--radius);
  opacity:1 !important;
}
.nav__toggle{
  display:none;
  position:relative;
  z-index:2;
  width:44px; height:44px;
  background:rgba(20,20,18,.32);
  border:1px solid rgba(245,241,232,.4);
  border-radius:50%;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  transition:background .25s ease, border-color .25s ease;
}
.nav.is-scrolled .nav__toggle{
  background:rgba(245,241,232,.1);
  border-color:rgba(245,241,232,.3);
}
.nav__toggle:hover{ background:rgba(20,20,18,.5); }
.nav__toggle span{
  display:block; height:2px; width:19px;
  background:var(--cal);
  border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, width .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav__toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  color:var(--cal);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  animation:hero-settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes hero-settle{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,20,18,.34) 0%, rgba(20,20,18,.12) 28%, rgba(20,20,18,.52) 58%, rgba(15,16,13,.92) 100%),
    linear-gradient(90deg, rgba(15,15,13,.4) 0%, rgba(15,15,13,0) 50%);
}
.hero__card{
  position:relative;
  z-index:2;
  max-width:640px;
  padding:0 var(--edge) 7.5vh;
  margin-top:auto;
}
.hero .eyebrow{ color:var(--palha); text-shadow:0 1px 12px rgba(0,0,0,.55); }
.hero__title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.5rem, 6vw, 4.4rem);
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 .45em;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero__lede{
  font-size:1.12rem;
  max-width:38ch;
  color:var(--cal);
  opacity:.95;
  margin:0 0 2em;
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.hero__actions{
  display:flex; gap:1em; flex-wrap:wrap;
}
.hero__ledger{
  position:absolute;
  right:var(--edge);
  bottom:7.5vh;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:.5em;
  font-family:var(--font-ledger);
  font-size:.76rem;
  letter-spacing:.05em;
  text-align:right;
  color:var(--cream-70);
  border-right:1px solid rgba(245,241,232,.35);
  padding-right:1.1em;
}
.hero__scroll{
  position:absolute;
  left:50%; bottom:28px;
  transform:translateX(-50%);
  width:1px; height:52px;
  z-index:2;
}
.hero__scroll span{
  position:absolute; top:0; left:0;
  width:1px; height:100%;
  background:linear-gradient(var(--cal), transparent);
  animation:scroll-hint 2.2s ease-in-out infinite;
}
@keyframes scroll-hint{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  60%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:1fr .82fr;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  max-width:var(--wrap);
  margin:0 auto;
  padding:min(16vw,150px) var(--edge) min(10vw,110px);
}
.about__media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
}

.divider{
  display:flex;
  justify-content:center;
  padding:0 0 clamp(3rem,7vw,6rem);
  color:var(--terra);
  opacity:.55;
}
.divider__crest{ width:34px; height:34px; }

/* ============================================================
   SUITES
   ============================================================ */
.suites{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--edge) clamp(3rem,8vw,7rem);
}
.suites__intro{ max-width:640px; margin-bottom:clamp(3rem,6vw,5rem); }

.suite{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid rgba(92,65,48,.16);
}
.suite--reverse .suite__media{ order:2; }
.suite__media img{
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  border-radius:var(--radius);
}
.suite__num{
  font-family:var(--font-ledger);
  font-size:.76rem;
  letter-spacing:.1em;
  color:var(--azinheira);
}
.specs{
  list-style:none;
  margin:0 0 1.2em;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.6em 1em;
  font-family:var(--font-ledger);
  font-size:.8rem;
  color:var(--cortica);
  opacity:.75;
}
.specs li{ position:relative; padding-left:1.1em; }
.specs li::before{
  content:"·";
  position:absolute; left:0;
  color:var(--terra);
}
.specs li:first-child{ padding-left:0; }
.specs li:first-child::before{ display:none; }

.suite-detail{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  border-top:1px solid rgba(92,65,48,.16);
  padding-top:clamp(2.5rem,5vw,4rem);
}
.suite-detail img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
}
.suite-detail p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.4rem;
  line-height:1.4;
  max-width:20ch;
  color:var(--cortica);
}

/* ============================================================
   THE LAND (ink section)
   ============================================================ */
.land{
  background:var(--poente);
  color:var(--cal);
  padding:clamp(4rem,9vw,8rem) var(--edge);
}
.land__intro{ max-width:640px; margin:0 auto clamp(3rem,6vw,5rem); text-align:left; }
.land__grid{
  max-width:var(--wrap);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:auto auto;
  gap:1.4rem;
}
.land__item{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); }
.land__item--tall{ grid-row:1 / 3; }
.land__item img{
  width:100%; height:100%;
  object-fit:cover;
  min-height:260px;
  transition:transform .6s ease;
}
.land__item:hover img{ transform:scale(1.045); }
.land__item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4em 1.3em 1.1em;
  background:linear-gradient(0deg, rgba(20,20,18,.72), transparent);
  font-family:var(--font-ledger);
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--cal);
}

.pull-quote{
  max-width:760px;
  margin:clamp(4rem,7vw,6rem) auto 0;
  text-align:center;
}
.pull-quote p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.4;
  color:var(--palha);
  margin:0 0 .6em;
}
.pull-quote cite{
  font-family:var(--font-ledger);
  font-size:.78rem;
  letter-spacing:.05em;
  font-style:normal;
  opacity:.65;
}

/* ============================================================
   GOOGLE REVIEWS BANNER
   ============================================================ */
.reviews{
  background:var(--cal-deep);
  border-top:1px solid rgba(92,65,48,.14);
  border-bottom:1px solid rgba(92,65,48,.14);
}
.reviews__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:1.8rem var(--edge);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.1rem 1.6rem;
}
.reviews__g{ width:32px; height:32px; flex-shrink:0; }
.reviews__score{ display:flex; align-items:baseline; gap:.5em; }
.reviews__number{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.7rem;
  color:var(--cortica);
}
.reviews__stars{
  color:var(--palha);
  font-size:.95rem;
  letter-spacing:.05em;
}
.reviews__text{
  flex:1 1 260px;
  font-size:.92rem;
  opacity:.85;
  margin:0;
}
.reviews__text strong{ color:var(--terra); font-weight:600; }
.reviews__link{
  font-family:var(--font-ledger);
  font-size:.78rem;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--terra);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  white-space:nowrap;
}
.reviews__link:hover{ opacity:.65; }

/* ============================================================
   MOMENTS FILMSTRIP
   ============================================================ */
.moments{ padding:clamp(2rem,5vw,4rem) 0 clamp(4rem,8vw,7rem); }
.moments__eyebrow{ text-align:center; }
.moments__strip{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:0 var(--edge) 1rem;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--terra) transparent;
}
.moments__strip img{
  scroll-snap-align:start;
  flex:0 0 auto;
  height:clamp(220px,32vw,340px);
  width:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--radius);
}
.moments__strip img:nth-child(even){ aspect-ratio:4/3; align-self:center; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial{
  background:var(--terra);
  color:var(--cal);
  text-align:center;
  padding:clamp(3.5rem,8vw,6rem) var(--edge);
}
.testimonial p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  max-width:18ch;
  margin:0 auto .5em;
  line-height:1.35;
}
.testimonial span{
  font-family:var(--font-ledger);
  font-size:.78rem;
  letter-spacing:.05em;
  opacity:.8;
}

/* ============================================================
   BOOKING (night section)
   ============================================================ */
.booking{
  position:relative;
  padding:clamp(5rem,11vw,9rem) var(--edge);
  color:var(--cal);
  overflow:hidden;
}
.booking__media{ position:absolute; inset:0; }
.booking__media img{ width:100%; height:100%; object-fit:cover; }
.booking__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,22,20,.88), rgba(20,22,20,.78) 55%, rgba(20,22,20,.92));
}
.booking__content{ position:relative; z-index:1; max-width:640px; margin:0 auto; text-align:left; }

.booking__contact{
  margin-top:2.4em;
  display:flex;
  flex-wrap:wrap;
  gap:1em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--poente-2);
  color:var(--cream-70);
  padding:clamp(3rem,6vw,4.5rem) var(--edge) 2rem;
}
.footer__top{
  max-width:var(--wrap);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2rem;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid rgba(245,241,232,.14);
}
.footer__mark{ display:flex; align-items:center; gap:.7em; }
.footer__crest{ width:36px; height:36px; color:var(--palha); }
.footer__wordmark{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--cal);
  margin:0;
}
.footer__label{
  font-family:var(--font-ledger);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--palha);
  margin:0 0 .6em;
}
.footer__col p{ margin:0; line-height:1.7; }
.footer__col a{ text-decoration:none; }
.footer__col a:hover{ color:var(--cal); }
.footer__bottom{
  max-width:var(--wrap);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5em;
  padding-top:1.6em;
  font-size:.85rem;
}
.footer__credit{ opacity:.55; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .nav__menu{
    position:fixed;
    inset:0 0 0 auto;
    width:min(78vw,340px);
    height:100vh;
    background:var(--poente);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.6em;
    padding:2rem var(--edge);
    transform:translateX(100%);
    transition:transform .4s ease;
    font-size:.95rem;
  }
  .nav__menu.is-open{ transform:translateX(0); }
  .nav__toggle{ display:flex; }

  .about{ grid-template-columns:1fr; padding-top:min(28vw,180px); }
  .about__media{ order:-1; }

  .reviews__inner{ justify-content:center; text-align:center; }
  .reviews__text{ order:3; flex-basis:100%; }
  .reviews__link{ order:4; }

  .suite, .suite--reverse{ grid-template-columns:1fr; }
  .suite__media, .suite--reverse .suite__media{ order:0; }

  .suite-detail{ grid-template-columns:1fr; }

  .land__grid{ grid-template-columns:1fr; }
  .land__item--tall{ grid-row:auto; }
  .land__item img{ min-height:200px; }

  .footer__top{ grid-template-columns:1fr 1fr; }

  .hero__ledger{ display:none; }
}

@media (max-width: 560px){
  .footer__top{ grid-template-columns:1fr; }
  .hero__card{ padding-bottom:9vh; }
}