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

/* === Variables === */
:root {
  --sand:#f2ece0; --bark:#2e1f14; --clay:#a8522e; --smoke:#7a7266;
  --cream:#faf7f0; --warm:#c9b48a; --pale:#e8dfd0; --moss:#4a5c3a;
}

/* === Site Wrapper === */
.site { font-family:'Jost',sans-serif; background:var(--cream); color:var(--bark); max-width:880px; margin:0 auto; }

/* === Navigation === */
nav { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 2.5rem; border-bottom:0.5px solid var(--warm); flex-wrap:wrap; }
.nav-logo img { height:52px; width:auto; display:block; }
.nav-links { display:flex; gap:1.4rem; list-style:none; padding:0; margin:0; }
.nav-links li { list-style:none; }
.nav-links a { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--smoke); text-decoration:none; }
.nav-links a:hover { color:var(--bark); }

/* Hamburger button — hidden on desktop */
.nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:4px; flex-shrink:0; }
.nav-hamburger span { display:block; width:22px; height:1.5px; background:var(--smoke); margin:5px 0; transition:transform 0.25s, opacity 0.25s; }
.nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px, 4px); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px, -4px); }

@media (max-width:820px) {
  nav { padding:0.9rem 1.2rem; }
  .nav-logo img { height:44px; }
  .nav-hamburger { display:block; }
  .nav-links {
    display:none;
    flex-direction:column;
    width:100%;
    gap:0;
    padding:0.5rem 0 0.6rem;
    border-top:0.5px solid var(--warm);
    margin-top:0.6rem;
  }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; padding:0.6rem 0; font-size:0.72rem; letter-spacing:0.12em; border-bottom:0.5px solid var(--pale); }
  .nav-links li:last-child a { border-bottom:none; }
}

@media (max-width:600px) {
  .nav-logo img { height:38px; }

  .hero { height:400px; }
  .hero-content { padding:0 1.2rem; max-width:100%; }
  .hero-quote { font-size:1.75rem; }
  .hero-sub { font-size:0.8rem; }

  .divider { padding:1.8rem 1.2rem 0; }

  footer { flex-direction:column; gap:0.4rem; padding:1.5rem 1.2rem; text-align:center; }
}

/* === Divider === */
.divider { display:flex; align-items:center; gap:1.2rem; padding:2.8rem 2.5rem 0; margin-bottom:1.8rem; }
.divider span { font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--smoke); white-space:nowrap; }
.divider-line { flex:1; height:0.5px; background:var(--warm); }

/* === Hero Base === */
.hero { position:relative; height:540px; overflow:hidden; }
.hero-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(20,10,5,0.75) 0%, rgba(20,10,5,0.32) 55%, rgba(20,10,5,0.08) 100%); }
.hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 3.5rem; max-width:520px; }
.hero-tag { font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--warm); margin-bottom:1.2rem; }
.hero-quote { font-family:'Cormorant Garamond',serif; font-size:2.3rem; font-weight:400; font-style:italic; line-height:1.35; color:#f5ede0; margin-bottom:1.8rem; }
.hero-sub { font-size:0.82rem; color:rgba(245,237,224,0.72); line-height:1.7; max-width:360px; margin-bottom:2rem; }
.hero-cta { display:inline-block; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:#f5ede0; border:0.5px solid rgba(245,237,224,0.5); padding:0.7rem 1.6rem; cursor:pointer; transition:background 0.2s; text-decoration:none; }
.hero-cta:hover { background:rgba(245,237,224,0.12); }

/* === Footer === */
footer { background:var(--bark); padding:2rem 2.5rem; border-top:0.5px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:center; }
.footer-name { font-family:'Cormorant Garamond',serif; font-size:1rem; font-style:italic; color:rgba(245,237,224,0.5); }
.footer-note { font-size:0.7rem; color:rgba(245,237,224,0.3); }