/* ============================================================
   Vasari v3 — designer (Figma) direction.
   Full-bleed render hero + "A New Era of Living" feature run.
   ============================================================ */
:root{
  --sage:#6E735F;--sage-deep:#5A5E49;--cream:#F1EEE5;--paper:#FFFFFF;
  --ink:#241D14;--ink-soft:#4A4636;--deep:#3B3C2B;
  --rule:rgba(31,35,23,.16);
  --display:"Sorts Mill Goudy","Times New Roman",serif;
  --body:"Jost",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}

/* ---- HERO ---------------------------------------------------- */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,16,.34) 0%,rgba(20,22,16,0) 22%,rgba(20,22,16,0) 60%,rgba(20,22,16,.46) 100%);pointer-events:none}

/* top nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px,2.6vw,34px) clamp(24px,4vw,52px);color:#fff}
.brand{display:flex;align-items:center;gap:10px}
.brand .wm{height:26px;width:auto;display:block}
.brand .sparkle{width:15px;height:15px}
.nav-links{display:flex;gap:clamp(22px,3vw,42px)}
.nav-links a{font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;opacity:.92;transition:opacity .2s}
.nav-links a:hover{opacity:.6}
.text-us{font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.6);border-radius:2px;padding:11px 26px;transition:background .2s,color .2s}
.text-us:hover{background:#fff;color:var(--ink)}

/* fixed bottom bar over hero */
.hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:22px clamp(24px,4vw,52px);color:#fff;font-family:var(--body);font-size:13px;letter-spacing:.04em}
.hero-bar .l{justify-self:start;opacity:.95}
.hero-bar .c{justify-self:center}
.hero-bar .c a{letter-spacing:.16em;text-transform:uppercase;font-size:12px;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:3px}
.hero-bar .r{justify-self:end;opacity:.95}

/* ---- FEATURE SECTION ---------------------------------------- */
.era{position:relative;padding:clamp(64px,10vw,140px) clamp(24px,5vw,56px) clamp(90px,12vw,170px);text-align:center}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage);margin:0 0 clamp(34px,5vw,64px)}
.era-run{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.6vw,76px);line-height:1.16;letter-spacing:-.01em;
  color:#8d8e78;max-width:16ch;margin:0 auto}
.era-run sup{font-size:.4em;vertical-align:super;color:var(--sage);font-family:var(--body);margin-left:.06em;top:-.7em}
.era-cta{margin-top:clamp(40px,6vw,70px)}
.era-cta a{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:3px;transition:color .2s,border-color .2s}
.era-cta a:hover{color:var(--sage);border-color:var(--sage)}
/* floating interior image, left */
.era-photo{position:absolute;left:clamp(24px,5vw,56px);top:clamp(120px,16vw,260px);width:min(22vw,260px);aspect-ratio:3/4;object-fit:cover;border:1px solid var(--rule)}
/* floating section tab, bottom-left */
.era-tab{position:absolute;left:clamp(24px,5vw,56px);bottom:clamp(28px,4vw,48px);display:flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.era-tab .sparkle{width:13px;height:13px;opacity:.8}

@media (max-width:820px){
  .nav-links{display:none}
  .era-photo{display:none}
  .era-tab{display:none}
  .hero-bar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;row-gap:8px}
  .hero-bar .l,.hero-bar .r{justify-self:center}
}