:root {
  --cream:#f5f0e7;
  --paper:#fffdf8;
  --terracotta:#b65d3e;
  --terracotta-dark:#8e432e;
  --olive:#687044;
  --navy:#143547;
  --navy-deep:#0c2635;
  --espresso:#302720;
  --muted:#746d66;
  --white:#fff;
  --border:rgba(48,39,32,.14);
  --heading:"Cormorant Garamond",Georgia,serif;
  --body:"Manrope",Arial,sans-serif;
  --container:min(1180px,calc(100% - 48px))
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:86px
}

body {
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--espresso);
  font-family:var(--body);
  line-height:1.7
}

body.menu-open {
  overflow:hidden
}

img {
  display:block;
  max-width:100%
}

a {
  text-decoration:none;
  color:inherit
}

button {
  font:inherit;
  border:0
}

.container {
  width:var(--container);
  margin:auto
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:9999;
  padding:10px 14px;
  background:var(--navy);
  color:white;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  height:100px;
  color:white;
  transition:.3s
}

.site-header.is-scrolled {
  height:98px;
  color:var(--espresso);
  background:rgba(255,253,248,.04);
  backdrop-filter:blur(15px);
  box-shadow:0 12px 35px rgba(0,0,0,.48);
      background-color:#121212;
}

.header-inner {
  height:100%;
  display:grid;
  grid-template-columns:200px 1fr auto;
  align-items:center;
  gap:32px
}

.brand img {
  width:185px;
  transition:.3s;
  margin-top: 10px;
}

.site-header.is-scrolled .brand img {
  width:126px;
  margin-bottom: 10px !important;    
  filter:none;
  
}

.desktop-nav {
  display:flex;
  justify-content:center;
  gap:34px
}

.desktop-nav a {
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  position:relative;
  color: #fff;
      
      
}

.desktop-nav a:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transition:.3s
}

.desktop-nav a:hover:after,.desktop-nav a.is-active:after {
  transform:scaleX(1)
}

.button {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 27px;
  border:1px solid transparent;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:.3s
}

.button:hover {
  transform:translateY(-2px)
}

.button-primary {
  background:var(--terracotta);
  color:white
}

.button-primary:hover {
  background:var(--terracotta-dark)
}

.button-header {
  color:white;
  background:rgba(182,93,62,.7);
  border-color:rgba(255,255,255,.5)
}

.site-header.is-scrolled .button-header {
  background:var(--terracotta);
  border-color:var(--terracotta)
}

.menu-toggle {
  display:none;
  background:none;
  color:inherit
}

.mobile-menu {
  position:fixed;
  inset:0;
  z-index:1200;
  visibility:hidden;
  pointer-events:none;
  background-color: #121212 !important;
}

.mobile-menu.open {
  visibility:visible;
  pointer-events:auto
}

.menu-backdrop {
  position:absolute;
  inset:0;
  background:rgba(4,16,23,.72);
  opacity:0;
  transition:.35s;
  background-color: #121212 !important;    
      
}

.mobile-menu.open .menu-backdrop {
  opacity:1
}

.menu-panel {
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(420px,92vw);
  padding:28px;
  
  transform:translateX(105%);
  transition:.45s;
  display:flex;
  flex-direction:column;
  background-color: #121212 !important;    
}

.mobile-menu.open .menu-panel {
  transform:none
}

.menu-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:20px
}

.menu-head img {
  width:130px
}

.menu-close {
  font-size:2.2rem;
  background:none;
    color: #fff;
}

.menu-panel nav {
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1
}

.menu-panel nav a {
  font:500 2.6rem/1 var(--heading);
  padding:12px 0;
    color: #fff;
}

.hero {
  position:relative;
  min-height:820px;
  height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy);
  color:white
}

.hero-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:hero 1.5s ease both
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,15,20,.76),rgba(6,15,20,.34) 52%,rgba(6,15,20,.06)),linear-gradient(180deg,rgba(6,15,20,.28),transparent 45%,rgba(6,15,20,.2))
}

.hero-content {
  position:relative;
  z-index:2;
  padding-top:80px
}

.eyebrow {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78)
}

h1,h2,h3 {
  font-family:var(--heading);
  font-weight:500;
  line-height:.98;
  margin-top:0
}

h1 {
  font-size:clamp(4.2rem,7.4vw,7.7rem);
  letter-spacing:-.045em;
  margin-bottom:28px;
  color:white
}

.hero-copy {
  max-width:590px;
  font-size:1.05rem;
  color:rgba(255,255,255,.86);
  margin-bottom:36px
}

.hero-actions {
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap
}

.text-link {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:5px
}

.text-link.light {
  color:white
}

@keyframes hero {
  from {
  transform:scale(1.08);
  opacity:.7
}

to {
  transform:scale(1);
  opacity:1
}


}

.story {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  min-height:720px;
  background:var(--cream)
}

.story-image {
  overflow:hidden
}

.story-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.story-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:90px clamp(50px,7vw,115px)
}

.script {
  color:var(--terracotta);
  font:italic 1.8rem var(--heading)
}

h2 {
  font-size:clamp(3.5rem,5.4vw,6rem);
  letter-spacing:-.04em;
  margin:10px 0 28px
}

.story-content p,.section-heading p,.location-content>p {
  color:var(--muted)
}

.story-content .text-link {
  margin-top:18px;
  align-self:flex-start
}

.experiences {
  display:grid;
  grid-template-columns:repeat(3,1fr)
}

.experience {
  border-right:1px solid var(--border);
  background:var(--paper)
}

.experience:last-child {
  border:0
}

.experience>img {
  width:100%;
  aspect-ratio:1.45/1;
  object-fit:cover
}

.experience>div {
  padding:38px 44px 46px;
  position:relative
}

.experience span {
  position:absolute;
  top:-27px;
  left:44px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--olive);
  color:white;
  border:4px solid var(--paper);
  font-size:.68rem;
  font-weight:700
}

.experience h3 {
  font-size:2.6rem;
  margin:12px 0
}

.experience p {
  color:var(--muted);
  font-size:.92rem
}

.sunset {
  position:relative;
  min-height:600px;
  display:grid;
  place-items:center;
  overflow:hidden
}

.sunset>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.sunset-overlay {
  position:absolute;
  inset:0;
  background:rgba(8,25,34,.38)
}

.sunset p {
  position:relative;
  z-index:2;
  color:white;
  text-align:center;
  font:500 clamp(3.1rem,5vw,5.8rem)/.97 var(--heading);
  letter-spacing:-.035em
}

.sunset em {
  color:#f5c0a2
}

.section {
  padding:120px 0
}

.gallery {
  background:var(--cream)
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:54px
}

.section-heading h2 {
  margin-bottom:0
}

.section-heading p {
  max-width:450px
}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:230px;
  gap:5px;
  padding:0 5px
}

.gallery-item {
  grid-column:span 4;
  overflow:hidden;
  position:relative;
  background:#222

}

.gallery-item.portrait {
  grid-row:span 2
}

.gallery-item.wide {
  grid-column:span 8
}

.gallery-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.7s
}

.gallery-item:hover img {
  transform:scale(1.06);
  opacity:.76
}

.gallery-item:after {
  content:"+";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-40%);
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(182,93,62,.92);
  color:white;
  font:2rem var(--heading);
  opacity:0;
  transition:.3s
}

.gallery-item:hover:after {
  opacity:1;
  transform:translate(-50%,-50%)
}

.location {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:680px
}

.location iframe {
  width:100%;
  height:100%;
  min-height:680px;
  border:0;
  filter:saturate(.7) sepia(.08)
}

.location-content {
  padding:90px clamp(48px,7vw,105px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--paper)
}

.details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin:34px 0 42px
}

.details div {
  display:flex;
  flex-direction:column
}

.details b {
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:4px
}

.details span,.details a {
  color:var(--muted);
  font-size:.9rem
}

.location-content .button {
  align-self:flex-start
}

.site-footer {
  background:var(--navy-deep);
  color:rgba(255,255,255,.72)
}

.footer-main {
  display:grid;
  grid-template-columns:1.4fr .7fr .8fr;
  gap:70px;
  padding:72px 0 58px
}

.footer-brand {
  max-width:330px
}

.footer-brand img {
  width:170px;
  filter:brightness(0) invert(1);
  margin-bottom:22px
}

.footer-main>div:not(.footer-brand) {
  display:flex;
  flex-direction:column
}

.footer-main h3 {
  font:700 .72rem var(--body);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:white
}

.footer-main a {
  font-size:.85rem;
  margin-bottom:8px
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.18);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:.72rem
}

.footer-bottom a {
  color:white
}

.whatsapp,.back-top {
  position:fixed;
  right:22px;
  z-index:900;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  transition:.3s
}

.whatsapp {
  bottom:22px;
  background:#20ba55
}

.whatsapp svg {
  width:27px;
  fill:currentColor
}

.back-top {
  bottom:86px;
  background:var(--terracotta);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  cursor:pointer
}

.back-top.visible {
  opacity:1;
  visibility:visible;
  transform:none
}

.reveal {
  opacity:0;
  transform:translateY(30px);
  transition:.8s cubic-bezier(.22,1,.36,1)
}

.reveal.visible {
  opacity:1;
  transform:none
}

@media(max-width:920px) {
  :root {
  --container:min(100% - 34px,740px)
}

.desktop-nav,.button-header {
  display:none
}

.header-inner {
  grid-template-columns:1fr auto
}

.menu-toggle {
  display:flex;
  width:42px;
  height:42px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px
}

.menu-toggle span {
  width:28px;
  height:1px;
  background:currentColor
}

.menu-toggle span:nth-child(2) {
  width:20px
}

.story {
  grid-template-columns:1fr
}

.story-image {
  min-height:520px
}

.experiences {
  grid-template-columns:1fr
}

.experience {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  border-right:0;
  border-bottom:1px solid var(--border)
}

.experience>img {
  height:100%;
  aspect-ratio:auto;
  min-height:350px
}

.experience span {
  left:-27px;
  top:36px
}

.gallery-item {
  grid-column:span 6
}

.gallery-item.wide {
  grid-column:span 12
}

.location {
  grid-template-columns:1fr
}

.location iframe {
  min-height:450px
}

.footer-main {
  grid-template-columns:1fr 1fr
}

.footer-brand {
  grid-column:span 2
}


}

@media(max-width:650px) {
  :root {
  --container:min(100% - 28px,600px)
}

.site-header,.site-header.is-scrolled {
  height:76px
}

.brand img,.site-header.is-scrolled .brand img {
  width:105px
}

.hero {
  height:auto;
  min-height:730px;
  align-items:flex-end;
  padding-bottom:80px
}

.hero-image {
  object-position:62% center
}

.hero-overlay {
  background:linear-gradient(180deg,rgba(6,15,20,.22),rgba(6,15,20,.25) 30%,rgba(6,15,20,.84))
}

.hero-actions {
  flex-direction:column;
  align-items:flex-start
}

.story-image {
  min-height:390px
}

.story-content {
  padding:72px 26px
}

.experience {
  display:block
}

.experience>img {
  min-height:0;
  aspect-ratio:1.28/1
}

.experience span {
  left:28px;
  top:-27px
}

.section-heading {
  flex-direction:column;
  align-items:flex-start
}

.gallery-grid {
  grid-template-columns:1fr 1fr;
  grid-auto-rows:210px
}

.gallery-item,.gallery-item.wide {
  grid-column:span 1
}

.gallery-item.wide {
  grid-column:span 2
}

.details {
  grid-template-columns:1fr
}

.location-content {
  padding:72px 26px
}

.footer-main {
  grid-template-columns:1fr;
  gap:36px
}

.footer-brand {
  grid-column:auto
}

.footer-bottom {
  flex-direction:column;
  gap:7px
}


}

@media(max-width:460px) {
  .section {
  padding:80px 0
}

.gallery-grid {
  display:flex;
  flex-direction:column
}

.gallery-item {
  aspect-ratio:1.15/1
}

.gallery-item.portrait {
  aspect-ratio:.86/1
}

.whatsapp,.back-top {
  right:15px;
  width:48px;
  height:48px
}

.whatsapp {
  bottom:15px
}

.back-top {
  bottom:75px
}


}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important
}

.reveal {
  opacity:1;
  transform:none
}


}



/* Reduced transparency preference */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled,
  .brand {
    backdrop-filter: none;
  }
}

.gallery-lightbox-library {
    display: none !important;
}


/* =========================================================
   Experiences + sunset mobile correction
========================================================= */

@media (max-width: 650px) {

  .experiences {
    display: block;
  }

  .experience {
    display: block;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .experience:last-child {
    border-bottom: 0;
  }

  .experience > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
  }

  .experience > div {
    position: relative;
    padding: 44px 24px 40px;
  }

  .experience span {
    top: -27px;
    left: 24px;
  }

  .experience h3 {
    margin: 8px 0 12px;
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1;
  }

  .experience p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .sunset {
    min-height: 480px;
    padding: 70px 24px;
  }

  .sunset > img {
    object-position: center;
  }

  .sunset p {
    max-width: 340px;
    font-size: clamp(2.5rem, 12vw, 4rem);
    line-height: 0.98;
  }
}


@media (min-width: 651px) and (max-width: 920px) {
  .experience span {
    left: -27px;
    top: 34px;
    z-index: 2;
  }

  .experience > div {
    padding: 54px 30px 40px;
  }

  .experience h3 {
    font-size: clamp(2rem, 4vw, 2.6rem);
  }
}