/* =========================================================
   TOKENS
========================================================= */
:root{
  --bg:        #FBF7F1;
  --bg-alt:    #F3ECE1;
  --ink:       #2B2622;
  --ink-soft:  #6b6259;
  --accent:    #A8695C;
  --sage:      #6E7B5E;
  --line:      #DCD2C3;

  --display: "Cormorant Garamond", serif;
  --body:    "Jost", sans-serif;

  --header-h: 88px;
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .9rem;
}

h1,h2{ font-family:var(--display); font-weight:400; margin:0; color:var(--ink); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  transition:background .4s ease, box-shadow .4s ease, height .3s ease;
}
.site-header.solid{
  background:rgba(251,247,241,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
  height:72px;
}
.header-inner{
  max-width:var(--container); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,48px);
}
.logo{
  font-family:var(--display); font-size:1.5rem; letter-spacing:.03em;
  color:#fff; transition:color .4s ease;
}
.site-header.solid .logo{ color:var(--ink); }
.logo.small{ color:var(--ink); }

.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.main-nav a{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; position:relative; padding:4px 0; transition:color .4s ease;
}
.site-header.solid .main-nav a{ color:var(--ink); }
.main-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .3s ease;
}
.main-nav a:not(.nav-cta):hover::after{ width:100%; }
.nav-cta{
  border:1px solid currentColor; padding:.55rem 1.2rem !important; border-radius:2px;
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; z-index:110;
}
.nav-toggle span{
  display:block; height:1px; width:100%; background:#fff; transition:background .4s ease, transform .3s ease, opacity .3s ease;
}
.site-header.solid .nav-toggle span{ background:var(--ink); }

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-bg{
  position:absolute; inset:-6% -6%; background-size:cover; background-position:center;
  will-change:transform;
}
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,.45) 0%, rgba(20,16,12,.28) 45%, rgba(20,16,12,.55) 100%);
}
.hero-content{
  position:relative; text-align:center; color:#fff; padding:0 20px;
}
.hero-eyebrow{
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; opacity:.85;
  margin:0 0 1.2rem;
}
.hero-title{
  font-size:clamp(3.2rem, 9vw, 6.5rem); line-height:1; letter-spacing:.01em;
}
.hero-sub{
  font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.5rem);
  margin:.8rem 0 2.2rem; opacity:.92;
}
.hero-link{
  display:inline-block; border:1px solid #fff; padding:.85rem 2.1rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s ease, color .3s ease;
}
.hero-link:hover{ background:#fff; color:var(--ink); }
.hero-link.light{ border-color:var(--ink); color:var(--ink); }
.hero-link.light:hover{ background:var(--ink); color:var(--bg); }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background:rgba(255,255,255,.5); overflow:hidden;
}
.scroll-cue span{
  display:block; width:100%; height:30%; background:#fff;
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(300%); }
}

/* =========================================================
   ABOUT
========================================================= */
.about{
  max-width:var(--container); margin:0 auto;
  padding:min(14vw,120px) clamp(20px,4vw,48px) 100px;
  display:grid; grid-template-columns:.85fr 1fr; gap:clamp(32px,6vw,90px);
  align-items:center;
}
.about-media img{ border-radius:2px; }
.about-copy h2{ font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.15; margin-bottom:1.3rem; }
.about-copy p{ color:var(--ink-soft); line-height:1.75; max-width:46ch; margin:0 0 1.1rem; }
.text-link{
  display:inline-block; margin-top:.6rem; font-size:.85rem; letter-spacing:.06em;
  border-bottom:1px solid var(--accent); color:var(--accent); padding-bottom:2px;
}

/* =========================================================
   GALLERY
========================================================= */
.gallery{ background:var(--bg-alt); padding:100px clamp(20px,4vw,48px) 90px; }
.section-head{ text-align:center; max-width:var(--container); margin:0 auto 3rem; }
.section-head h2{ font-size:clamp(2rem,3.6vw,3rem); }

.gallery-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.gallery-item{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:1/1.05; }
.gallery-item.span-2{ grid-column:span 2; }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s ease, filter .5s ease;
  filter:saturate(.92);
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-note{
  text-align:center; margin:2.6rem 0 0; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* =========================================================
   AWARDS STRIP
========================================================= */
.awards{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.9rem;
  padding:52px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.awards-item{
  margin:0; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.dot{ color:var(--line); }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonials{ padding:110px clamp(20px,4vw,48px) 90px; text-align:center; }
.testi-track{
  max-width:760px; margin:0 auto; position:relative; min-height:210px;
}
.testi-card{
  margin:0; position:absolute; inset:0; opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease; pointer-events:none;
}
.testi-card.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.testi-card p{
  font-family:var(--display); font-style:italic; font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.55; color:var(--ink); max-width:58ch; margin:0 auto 1.3rem;
}
.testi-card cite{
  font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:1.5rem; }
.testi-dots button{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--accent);
  background:transparent; padding:0; cursor:pointer; transition:background .3s ease;
}
.testi-dots button.is-active{ background:var(--accent); }

/* =========================================================
   CTA BAND
========================================================= */
.cta-band{
  background:var(--sage); color:#fff; text-align:center;
  padding:110px 24px;
}
.cta-band .eyebrow{ color:#eee7dd; }
.cta-band h2{ color:#fff; font-size:clamp(2rem,3.6vw,3rem); margin-bottom:1.8rem; line-height:1.2; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background:var(--ink); color:#e9e4db; padding:56px 24px 30px; }
.footer-inner{
  max-width:var(--container); margin:0 auto 26px;
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between;
}
.footer-inner .logo.small{ color:#fff; }
.footer-nav{ display:flex; gap:1.6rem; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.footer-nav a:hover{ color:var(--accent); }
.footer-social{ display:flex; gap:1.4rem; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.footer-social a:hover{ color:var(--accent); }
.footer-copy{
  text-align:center; font-size:.74rem; letter-spacing:.06em; color:#a79f92; margin:0;
  border-top:1px solid #423b33; padding-top:22px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  .about-media{ order:-1; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-item.span-2{ grid-column:span 2; }
}

@media (max-width:760px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--bg); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.8rem; padding:0 42px; transform:translateX(100%); transition:transform .4s ease;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink) !important; font-size:.95rem; }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .awards{ flex-direction:column; gap:.5rem; }
  .awards .dot{ display:none; }
}

@media (max-width:560px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .about{ padding-top:26vw; }
  .cta-band{ padding:80px 20px; }
}