@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&display=swap');

:root{
  --brown:#2d2211;
  --brown-soft:#40311c;
  --rust:#934921;
  --gold:#e8b850;
  --sage:#97a67f;
  --sage-deep:#5f6b4c;
  --cream:#fffeee;
  --cream-dim:#f2eed9;
  --line-on-brown: rgba(255,254,238,0.16);
  --line-on-cream: rgba(45,34,17,0.14);
  --wrap: min(1180px, 92vw);
  --nav-h: 78px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  padding-top:var(--nav-h);
}

::selection{ background:var(--gold); color:var(--brown); }

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

h1,h2,h3{
  font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.94;
  margin:0;
  text-wrap:balance;
  letter-spacing:.005em;
}
h1{ font-size:clamp(42px,7vw,92px); }
h2{ font-size:clamp(32px,4.8vw,58px); }
h3{ font-size:clamp(22px,2.6vw,30px); }

p{ font-size:clamp(16px,1.4vw,18.5px); line-height:1.6; max-width:62ch; }
.lede{ font-size:clamp(18px,1.9vw,23px); line-height:1.5; max-width:42ch; font-style:italic; font-weight:400; }

a{ color:inherit; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  background:var(--brown);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,4vw,40px);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.nav .brand{ display:flex; align-items:center; height:100%; }
.nav .brand img{ height:26px; width:auto; }
.nav .links{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,30px);
}
.nav .links a{
  font-family:'Fraunces',serif; font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--cream); opacity:.8; padding:6px 2px; position:relative;
}
.nav .links a:hover, .nav .links a.active{ opacity:1; }
.nav .links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);
}
.nav .links a.navcta{
  background:var(--gold); color:var(--brown); opacity:1;
  padding:9px 20px; border-radius:999px; letter-spacing:.04em;
}
.nav .links a.navcta:hover{ filter:brightness(1.06); }
.nav .links a.navcta.active::after{ display:none; }
.nav .burger{
  display:none; background:none; border:none; cursor:pointer; padding:10px;
}
.nav .burger span{ display:block; width:24px; height:2px; background:var(--cream); margin:5px 0; }

@media (max-width:840px){
  .nav .links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    background:var(--brown); flex-direction:column; align-items:stretch;
    padding:10px clamp(18px,4vw,40px) 26px; gap:2px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    border-top:1px solid var(--line-on-brown);
  }
  .nav .links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav .links a{ width:100%; padding:13px 4px; font-size:15px; }
  .nav .links a.active::after{ display:none; }
  .nav .links a.active{ color:var(--gold); }
  .nav .links a.navcta{ margin-top:10px; text-align:center; padding:13px 20px; }
  .nav .burger{ display:block; }
}

/* ---------- sections ---------- */
.section{ position:relative; overflow:hidden; padding:clamp(56px,10vh,110px) 0; }
.section.on-cream{ background:var(--cream); color:var(--brown); }
.section.on-brown{ background:var(--brown); color:var(--cream); }
.section.on-rust{ background:var(--rust); color:var(--cream); }
.section.on-dim{ background:var(--cream-dim); color:var(--brown); }

.wrap{ width:var(--wrap); max-width:1180px; margin:0 auto; position:relative; z-index:2; }

.eyebrow{
  font-family:'Fraunces',serif; font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 18px;
}
.on-cream .eyebrow, .on-dim .eyebrow{ color:var(--rust); }
.on-brown .eyebrow, .on-rust .eyebrow{ color:var(--gold); }
.eyebrow::before{ content:""; display:inline-block; width:28px; height:2px; background:currentColor; }

.tag{
  display:inline-block; padding:5px 14px; border-radius:999px;
  font-family:'Fraunces',serif; font-weight:600; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.tag.gold{ background:var(--gold); color:var(--brown); }
.tag.cream{ background:var(--cream); color:var(--brown); }
.tag.line-brown{ border:1.5px solid var(--brown); color:var(--brown); }
.tag.line-cream{ border:1.5px solid var(--cream); color:var(--cream); }

/* contour motif */
.contour{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.contour svg{ width:100%; height:100%; }
.on-cream .contour, .on-dim .contour{ color:var(--sage); opacity:.32; }
.on-brown .contour{ color:var(--sage); opacity:.24; }
.on-rust .contour{ color:var(--gold); opacity:.2; }

.grid2{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,64px); align-items:center; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* tablet: card grids go two-up instead of jumping straight to one column */
@media (max-width:980px){
  .grid3, .grid4{ grid-template-columns:repeat(2,1fr); gap:14px; }
}
/* phone: stack everything */
@media (max-width:640px){
  .grid2, .grid3, .grid4{ grid-template-columns:1fr; }
  .grid2{ gap:28px; }
}

.card{ border-radius:14px; padding:22px 24px 20px; }
.on-cream .card, .on-dim .card{ background:var(--cream-dim); border:1px solid var(--line-on-cream); }
.on-brown .card{ background:var(--brown-soft); border:1px solid var(--line-on-brown); }
.on-rust .card{ background:rgba(45,34,17,.28); border:1px solid rgba(255,254,238,.18); }

.stat{ font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,3.4vw,42px); line-height:.95; margin:2px 0 8px; }
.on-cream .stat, .on-dim .stat{ color:var(--rust); }
.on-brown .stat, .on-rust .stat{ color:var(--gold); }

hr.rule{ border:none; border-top:1.5px solid currentColor; opacity:.18; margin:20px 0; }

.quote{ font-style:italic; font-size:clamp(19px,2.1vw,25px); line-height:1.5; max-width:52ch; }

a.cta{
  display:inline-block; margin-top:8px;
  background:var(--gold); color:var(--brown);
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:.03em;
  padding:14px 30px; border-radius:999px; text-decoration:none;
}
a.cta:hover{ filter:brightness(1.05); }
a.cta.outline{
  background:none; border:1.5px solid currentColor; color:inherit;
}
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:26px; }

.hero{ padding-top:clamp(70px,14vh,130px); padding-bottom:clamp(60px,10vh,100px); }

.small-print{ font-size:12.5px; opacity:.65; max-width:64ch; line-height:1.6; }

.placeholder{
  border:1.5px dashed currentColor; opacity:.85; border-radius:10px;
  padding:14px 16px; font-size:13.5px; line-height:1.55; margin-top:14px;
}

/* ---------- footer ---------- */
footer.site{
  background:var(--brown); color:var(--cream);
  padding:52px 0 30px;
}
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
footer.site img{ height:22px; margin-bottom:14px; }
footer.site a{ text-decoration:none; }
footer.site .cols{ display:flex; gap:56px; flex-wrap:wrap; }
footer.site .col h4{
  font-family:'Fraunces',serif; font-weight:600; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;
}
footer.site .col a{ display:block; font-size:14px; opacity:.85; margin-bottom:8px; }
footer.site .col a:hover{ opacity:1; }
footer.site .bottom{
  border-top:1px solid var(--line-on-brown); margin-top:36px; padding-top:20px;
  font-size:12px; opacity:.6; max-width:80ch;
}