:root{
  --white:#FFFFFF;--cream-1:#FAF8F3;--cream-2:#F2EDE3;--cream-3:#E8DFD0;
  --green-2:#5C7A54;--green-3:#4F6B47;
  --blush-1:#F5E6E8;--blush-2:#E8C4CB;--blush-3:#C9899A;
  --gold:#B5935A;--ink:#3D3228;--ink-mid:#6B5C4E;--ink-soft:#9C8B7E;
  --display:'Cormorant Garamond',serif;--body:'Tenor Sans',sans-serif;
  --nav-h:82px;

  /* Text-safe variants: same family, darkened/lightened until they clear
     WCAG AA (4.5:1 normal text, 3:1 large text ≥24px). The originals above
     stay available for fills, borders, and other non-text uses. */
  --gold-text:#8C6B3E;      /* eyebrow labels on cream/white — 4.6–4.9:1 */
  --gold-on-dark:#D8B074;   /* gold text on the dark ink footer — 6.2:1 */
  --blush-text:#A85C74;     /* italic accent words in headings — 3.9–4.7:1 */
  --blush-cta:#9C4F68;      /* nav/CTA button fill, paired with white text — 5.6:1 */
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--cream-1);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:inherit}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}

/* Visible focus states for keyboard users */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:3px;
}

.tag-label{
  position:fixed;top:0;left:0;z-index:99;background:var(--ink);color:var(--cream-1);
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;padding:6px 14px;
}

/* ============ NAV ============ */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 6vw;background:var(--cream-1);border-bottom:1px solid var(--cream-3);
  position:sticky;top:0;z-index:50;min-height:var(--nav-h);
}

.brand{
  font-family:var(--display);font-size:clamp(1.15rem,3vw,1.6rem);
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink);line-height:1;
  white-space:nowrap;
}
.brand span{
  display:block;font-family:var(--body);font-size:.5rem;
  letter-spacing:.5em;color:var(--gold-text);margin-top:3px;text-align:center;
}

.nav-links{
  display:flex;gap:34px;align-items:center;
}
.nav-links a{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mid);text-decoration:none;transition:color .3s;
}
.nav-links a:hover{color:var(--gold-text)}

.nav-cta{
  background:var(--blush-cta);color:var(--white)!important;padding:12px 26px;transition:all .3s;
}
.nav-cta:hover{background:var(--ink)}

/* Hamburger button — hidden on desktop, shown on smaller screens */
.nav-toggle{
  display:none;
  width:38px;height:32px;
  border:none;background:transparent;cursor:pointer;
  position:relative;padding:0;flex-shrink:0;
  z-index:60;
}
.nav-toggle span{
  position:absolute;left:0;right:0;height:2px;background:var(--ink);
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){top:6px}
.nav-toggle span:nth-child(2){top:15px}
.nav-toggle span:nth-child(3){top:24px}

.nav-toggle[aria-expanded="true"] span:nth-child(1){top:15px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:15px;transform:rotate(-45deg)}

/* ============ BUTTONS ============ */
.btn{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  padding:17px 40px;transition:all .35s;cursor:pointer;display:inline-block;
  border-radius:1px;
}
.btn-primary{background:var(--ink);color:var(--cream-1);border:1px solid var(--ink)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--cream-1)}
.btn-light{background:var(--cream-1);color:var(--ink);border:1px solid var(--cream-1)}
.btn-light:hover{background:transparent;color:var(--cream-1)}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:var(--cream-1);
  padding:calc(var(--nav-h) * 0.4) 24px 60px;
}
.hero-photo{position:absolute;inset:0;background:linear-gradient(175deg,var(--white) 0%,var(--cream-2) 60%,var(--blush-1) 100%)}
.hero-photo::after{
  /* content:'your hero photo';position:absolute;bottom:26px;right:30px; */
  font-family:var(--display);font-style:italic;font-size:1rem;color:var(--ink-mid);opacity:.7;
}
.hero-inner{position:relative;z-index:5;padding:0 12px;max-width:860px;width:100%}
.hero-eyebrow{
  font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-text);
  margin-bottom:30px;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';display:inline-block;width:34px;height:1px;background:var(--gold);
  vertical-align:middle;margin:0 18px;opacity:.6;
}
.hero h1{
  font-family:var(--display);font-size:clamp(2.4rem,8vw,6.8rem);font-weight:300;
  line-height:1.05;color:var(--ink);
}
.hero h1 i{font-style:italic;color:var(--blush-text)}
.hero-sub{margin:34px auto 44px;max-width:470px;color:var(--ink-mid);font-size:1rem;line-height:1.95}
.hero-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.scroll-cue{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-mid);z-index:5;
}
.scroll-cue::after{
  content:'';display:block;width:1px;height:36px;background:var(--ink-soft);margin:12px auto 0;
  animation:cue 2.2s ease-in-out infinite;transform-origin:top;
}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:.9}}

/* ============ INTRO ============ */
.intro{text-align:center;padding:100px 6vw;background:var(--white)}
.intro .eyebrow{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-text);margin-bottom:20px}
.intro h2{
  font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.5rem);font-weight:300;
  color:var(--ink);max-width:720px;margin:0 auto 8px;line-height:1.18;
}
.intro h2 i{font-style:italic;color:var(--blush-text)}
.intro-heart{color:var(--blush-text);font-size:.95rem;margin:22px 0}
.intro p{max-width:520px;margin:0 auto;color:var(--ink-mid);font-size:.98rem;line-height:1.95}

/* ============ GALLERY ============ */
.gallery{padding:90px 6vw;background:var(--cream-1);scroll-margin-top:var(--nav-h)}
.gallery-head{text-align:center;margin-bottom:50px}
.gallery-head .eyebrow{font-size:.66rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-text)}
.gallery-head h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:300;color:var(--ink);margin-top:12px}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto;
}
.g-item{
  display:block;aspect-ratio:1;border-radius:3px;overflow:hidden;position:relative;cursor:pointer;
  background:var(--cream-2);border:1px solid var(--cream-3);text-decoration:none;
}
.gallery-cta{text-align:center;margin-top:44px}
.g-item div{
  width:100%;height:100%;transition:transform 1s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;justify-content:center;
}
.g-item:hover div,.g-item:focus-within div{transform:scale(1.05)}
.g-item img{width:100%;height:100%;object-fit:cover}
.g-ph{font-family:var(--display);font-style:italic;font-size:1rem;color:var(--ink-mid);opacity:.7}
.g-item span{
  position:absolute;left:16px;bottom:14px;color:var(--ink);font-family:var(--display);
  font-style:italic;font-size:1.15rem;opacity:0;transform:translateY(8px);transition:all .45s;
  background:rgba(250,248,243,.9);padding:2px 12px;border-radius:2px;
}
.g-item:hover span,.g-item:focus-within span{opacity:1;transform:none}

/* ============ FEATURE BAND ============ */
.feature{
  background:linear-gradient(165deg,var(--green-2),var(--green-3));color:var(--cream-1);
  text-align:center;padding:100px 6vw;
}
.feature .eyebrow{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--white);margin-bottom:22px}
.feature h2{
  font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:300;
  margin-bottom:22px;line-height:1.15;
}
.feature h2 i{font-style:italic;color:var(--blush-1)}
.feature p{max-width:500px;margin:0 auto 40px;opacity:.9;font-size:1rem;line-height:1.9}

/* ============ CTA ============ */
.cta{text-align:center;padding:100px 6vw;background:linear-gradient(175deg,var(--cream-1),var(--blush-1))}
.cta h2{
  font-family:var(--display);font-size:clamp(2rem,5vw,4rem);font-weight:300;color:var(--ink);
  margin-bottom:20px;line-height:1.15;
}
.cta h2 i{font-style:italic;color:var(--blush-text)}
.cta p{max-width:420px;margin:0 auto 40px;color:var(--ink-mid);font-size:.96rem}

/* ============ RENTALS PAGE ============ */
.rentals-page{max-width:1180px;margin:0 auto;padding:100px 6vw 120px;text-align:center}
.rentals-page .eyebrow{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-text);margin-bottom:20px}
.rentals-page h2{
  font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:300;
  color:var(--ink);margin-bottom:8px;line-height:1.18;
}
.rentals-page h2 i{font-style:italic;color:var(--blush-text)}
.rentals-sub{color:var(--ink-mid);font-size:.98rem;line-height:1.9;max-width:520px;margin:18px auto 60px}

.rentals-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left;
}
.rental-card{
  background:var(--white);border:1px solid var(--cream-3);border-radius:3px;
  padding:0 0 28px;display:flex;flex-direction:column;gap:14px;
}
.rental-photo{
  aspect-ratio:4/3;background:var(--cream-2);display:flex;align-items:center;justify-content:center;
  border-radius:3px 3px 0 0;overflow:hidden;
}
.rental-photo img{width:100%;height:100%;object-fit:cover}
.rental-card h3{
  font-family:var(--display);font-size:1.4rem;font-weight:400;color:var(--ink);padding:0 24px;
}
.rental-card h3 i{font-style:italic;color:var(--blush-text)}
.rental-card p{color:var(--ink-mid);font-size:.9rem;line-height:1.8;padding:0 24px}
.rental-card .btn{margin:6px 24px 0;align-self:flex-start;margin-top:auto}

@media (max-width: 860px){
  .rentals-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
}

/* ============ CONTACT PAGE ============ */
.contact-page{max-width:640px;margin:0 auto;padding:100px 6vw 120px;text-align:center}
.contact-page .eyebrow{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-text);margin-bottom:20px}
.contact-page h2{
  font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:300;
  color:var(--ink);margin-bottom:8px;line-height:1.18;
}
.contact-page h2 i{font-style:italic;color:var(--blush-text)}
.contact-sub{color:var(--ink-mid);font-size:.98rem;line-height:1.9;max-width:440px;margin:18px auto 50px}

.contact-email{
  font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,3vw,1.8rem);
  color:var(--blush-text);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:4px;transition:color .3s;
}
.contact-email:hover{color:var(--ink)}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:var(--cream-2);padding:56px 6vw 32px;text-align:center}
.foot-brand{font-family:var(--display);font-size:clamp(1.5rem,4vw,2rem);letter-spacing:.3em;text-transform:uppercase}
.foot-brand span{display:block;font-family:var(--body);font-size:.52rem;letter-spacing:.5em;color:var(--gold-on-dark);margin-top:5px}
.foot-info{margin-top:24px;font-size:.8rem;line-height:1.9;opacity:.7}
.foot-bottom{
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(232,223,208,.15);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;
}

/* ======================================================
   RESPONSIVE — tablet and below (≤ 860px)
   ====================================================== */
@media (max-width: 860px){
  nav{padding:16px 5vw}

  .nav-toggle{display:block}

  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    position:fixed;
    top:var(--nav-h);
    right:0;
    width:min(78vw, 320px);
    height:calc(100vh - var(--nav-h));
    background:var(--cream-1);
    border-left:1px solid var(--cream-3);
    padding:30px 32px;
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-y:auto;
  }
  .nav-links.is-open{transform:translateX(0)}
  .nav-links a{
    width:100%;
    padding:16px 0;
    border-bottom:1px solid var(--cream-3);
    font-size:.75rem;
  }
  .nav-cta{
    margin-top:20px;
    text-align:center;
    border-bottom:none !important;
    width:100%;
  }

  /* Dim the page behind the open mobile menu */
  .nav-scrim{
    display:none;
    position:fixed;inset:0;top:var(--nav-h);
    background:rgba(61,50,40,.25);
    z-index:45;
  }
  .nav-scrim.is-open{display:block}

  .gallery-grid{grid-template-columns:repeat(2,1fr)}

  .hero{min-height:78vh}
  .hero-photo::after{font-size:.85rem;bottom:16px;right:16px}
}

/* ======================================================
   RESPONSIVE — small phones (≤ 480px)
   ====================================================== */
@media (max-width: 480px){
  nav{padding:14px 20px}
  .brand{letter-spacing:.18em}
  .brand span{letter-spacing:.34em}

  .nav-links{width:100vw;border-left:none}

  .hero{padding:40px 18px 50px}
  .hero-eyebrow{
    font-size:.6rem;letter-spacing:.32em;margin-bottom:22px;
  }
  .hero-eyebrow::before,.hero-eyebrow::after{width:18px;margin:0 10px}
  .hero-sub{font-size:.92rem;margin:26px auto 34px}
  .hero-actions{flex-direction:column;width:100%;gap:14px}
  .hero-actions .btn{width:100%;text-align:center;padding:16px 20px}

  .intro,.gallery,.feature,.cta{padding-left:6vw;padding-right:6vw}
  .intro{padding-top:70px;padding-bottom:70px}
  .gallery{padding-top:64px;padding-bottom:64px}
  .feature{padding-top:70px;padding-bottom:70px}
  .cta{padding-top:70px;padding-bottom:70px}

  .gallery-grid{grid-template-columns:1fr;gap:14px;max-width:420px}
  .gallery-head{margin-bottom:36px}

  .contact-page{padding:70px 6vw 90px}

  .btn{padding:15px 28px;font-size:.64rem;letter-spacing:.2em}

  footer{padding:44px 6vw 26px}
}