/* ============================================================
   TAMARUKE — Design System
   Premium heritage / genetic-program brand aesthetic
   ============================================================ */

:root{
  /* Palette */
  --pine:#414b39;          /* deep forest green — primary dark */
  --pine-2:#4b553f;
  --bone:#f4efe6;          /* warm background */
  --bone-2:#eae1d1;
  --ink:#2c2a26;           /* body text */
  --ink-soft:#57534b;
  --brass:#b06a43;         /* accent — brass/gold */
  --brass-2:#c8825a;
  --sage:#8c8577;
  --line:rgba(30,43,36,.14);
  --white:#ffffff;

  /* Type */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Rhythm */
  --wrap:1200px;
  --gap:clamp(1rem,3vw,2rem);
  --sec:clamp(4rem,9vw,8rem);
  --radius:4px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bone);
  line-height:1.65;
  font-size:clamp(1rem,.55vw + .9rem,1.075rem);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.01em}
p{max-width:66ch}

/* Utilities ------------------------------------------------ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  display:inline-block;margin-bottom:1rem;
}
.eyebrow.on-dark{color:var(--brass-2)}
.lede{font-size:clamp(1.1rem,1vw + .95rem,1.35rem);color:var(--ink-soft);max-width:62ch}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}
.section{padding-block:var(--sec)}
.section--dark{background:var(--pine);color:var(--bone)}
.section--dark .lede{color:rgba(246,242,234,.8)}
.rule{width:56px;height:2px;background:var(--brass);border:0;margin:1.5rem 0}
.center .rule{margin-inline:auto}

/* Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 1.9rem;border-radius:var(--radius);
  border:1px solid var(--brass);background:var(--brass);color:var(--pine);
  cursor:pointer;transition:.25s ease;
}
.btn:hover{background:var(--brass-2);border-color:var(--brass-2);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--pine);border-color:var(--line)}
.btn--ghost:hover{background:var(--pine);color:var(--bone);border-color:var(--pine)}
.btn--ghost-light{background:transparent;color:var(--bone);border-color:rgba(246,242,234,.4)}
.btn--ghost-light:hover{background:var(--bone);color:var(--pine)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.center .btn-row{justify-content:center}

/* Header --------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,242,234,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em;color:var(--pine)}
.brand span{color:var(--brass)}
.nav-links{display:flex;gap:1.9rem;align-items:center}
.nav-links a{font-size:.9rem;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--pine)}
.nav-links .btn{padding:.7rem 1.25rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--pine);cursor:pointer}

/* Hero ----------------------------------------------------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:var(--bone);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,20,15,.45) 0%,rgba(16,20,15,.22) 32%,rgba(16,20,15,.92) 100%),linear-gradient(90deg,rgba(16,20,15,.60) 0%,rgba(16,20,15,.12) 58%,rgba(16,20,15,0) 100%)}
.hero__inner{padding-block:clamp(3rem,8vw,6rem)}
.hero h1{font-size:clamp(2.8rem,7vw,5.5rem);color:var(--bone);max-width:16ch}
.hero .lede{color:rgba(246,242,234,.9);margin-top:1.4rem}

/* Stat band ------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stat{background:var(--bone);padding:2rem 1rem;text-align:center}
.section--dark .stats{background:rgba(246,242,234,.12);border-color:rgba(246,242,234,.2)}
.section--dark .stat{background:var(--pine)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--brass);line-height:1}
.stat span{display:block;margin-top:.5rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.section--dark .stat span{color:rgba(246,242,234,.7)}

/* Feature grid --------------------------------------------- */
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(30,43,36,.4)}
.card h3{font-size:1.35rem;margin-bottom:.6rem;color:var(--pine)}
.card .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.8rem;display:block}
.card p{font-size:.97rem;color:var(--ink-soft)}

/* Split feature -------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover}
.split--flip .split__text{order:2}

/* Gallery -------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.gallery img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}

/* Opportunity options -------------------------------------- */
.options{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem}
.option{border:1px solid rgba(246,242,234,.22);border-radius:var(--radius);padding:2.2rem}
.option .tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2);font-weight:600}
.option h3{color:var(--bone);font-size:1.5rem;margin:.6rem 0 1rem}
.option p{color:rgba(246,242,234,.78);font-size:.97rem}

/* Cross-link band ------------------------------------------ */
.crosslink{background:var(--bone-2);border-block:1px solid var(--line)}
.crosslink .split__text .eyebrow{color:var(--brass)}

/* CTA ------------------------------------------------------ */
.cta{background:var(--pine);color:var(--bone);text-align:center}
.cta h2{color:var(--bone);font-size:clamp(2rem,4vw,3rem);max-width:20ch;margin-inline:auto}

/* Footer --------------------------------------------------- */
.site-footer{background:var(--pine-2);color:rgba(246,242,234,.72);padding-block:3.5rem;font-size:.9rem}
.site-footer .brand{color:var(--bone);margin-bottom:1rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.foot-grid h4{font-family:var(--sans);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2);margin-bottom:1rem}
.foot-grid a{display:block;padding:.28rem 0;color:rgba(246,242,234,.72)}
.foot-grid a:hover{color:var(--bone)}
.foot-legal{border-top:1px solid rgba(246,242,234,.14);margin-top:2.5rem;padding-top:1.5rem;font-size:.8rem;color:rgba(246,242,234,.5)}

/* Section heading helper ----------------------------------- */
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head h2{font-size:clamp(2rem,4vw,3.1rem);color:var(--pine)}
.section--dark .sec-head h2{color:var(--bone)}
.sec-head.center{margin-inline:auto}

/* Prose (article/content pages) ---------------------------- */
.prose{max-width:70ch;margin-inline:auto}
.prose h2{font-size:1.9rem;margin:2.5rem 0 1rem;color:var(--pine)}
.prose h3{font-size:1.35rem;margin:2rem 0 .8rem;color:var(--pine)}
.prose p{margin-bottom:1.15rem;max-width:none}
.prose ul{margin:0 0 1.15rem 1.2rem}
.prose li{margin-bottom:.5rem}
.page-hero{position:relative;background-color:var(--pine);color:var(--bone);padding-block:clamp(3.5rem,8vw,6rem);background-image:linear-gradient(100deg,rgba(38,44,31,.94) 0%,rgba(38,44,31,.85) 45%,rgba(38,44,31,.5) 100%),var(--hero-img,none);background-size:cover;background-position:center right}
.page-hero h1,.page-hero .lede{text-shadow:0 2px 18px rgba(0,0,0,.4)}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);color:var(--bone);max-width:18ch}
.page-hero .lede{color:rgba(246,242,234,.82);margin-top:1.2rem}
.breadcrumb{font-size:.8rem;letter-spacing:.06em;color:rgba(246,242,234,.6);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--brass-2)}

/* Responsive ----------------------------------------------- */
@media(max-width:900px){
  .grid--3{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .split,.options,.foot-grid{grid-template-columns:1fr}
  .split--flip .split__text{order:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery img:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10;height:auto}
  .nav-links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;
    background:var(--bone);border-bottom:1px solid var(--line);
    padding:1rem 1.5rem 1.5rem;transform:translateY(-120%);transition:transform .3s;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.85rem 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:1rem;justify-content:center}
  .nav-toggle{display:block}
}
@media(max-width:560px){
  .grid--3,.stats{grid-template-columns:1fr 1fr}
  .stat:last-child:nth-child(odd){grid-column:span 2}
}

/* Ellington: heavier display weight for Cormorant Garamond */
h1,h2,h3,h4{font-weight:600}
.brand{font-weight:600;letter-spacing:.01em}
.hero h1{font-weight:600}


/* Ellington hero legibility */
.hero h1,.hero .lede{text-shadow:0 2px 22px rgba(0,0,0,.5)}
.hero .eyebrow{color:#ecc9a6;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero .lede{color:#f2ece1}


/* Property "at a glance" spec list */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;max-width:960px;margin-inline:auto}
.specs div{display:flex;gap:.75rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:.98rem}
.specs b{color:var(--brass);font-size:.8rem}
@media(max-width:700px){.specs{grid-template-columns:1fr}}

/* keep heading on one line (desktop), wrap on small screens */
.nowrap-lg{white-space:nowrap}
@media(max-width:680px){.nowrap-lg{white-space:normal}}