/* =====================================================================
   LONGEVA — Design System
   Cinematic editorial. Forest green, charcoal, warm white, stone, gold.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* Brand palette (anchored to logo green #25382E) */
  --green:#25382E;
  --green-900:#162019;
  --green-800:#1B271F;
  --green-700:#25382E;
  --green-600:#33503F;
  --green-500:#46685440;
  --moss:#3A5244;
  --charcoal:#1C1C1A;
  --ink:#14140F;
  --warm-white:#F5F0E8;
  --warm-white-2:#FBF8F2;
  --stone:#D9D0C3;
  --stone-2:#C4BAA9;
  --taupe:#8C8576;
  --gold:#BD9A5F;
  --gold-soft:#CBAE7C;

  --maxw:1320px;
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.16,1,.3,1);

  --fs-body:clamp(1rem,.55vw + .85rem,1.15rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--warm-white);
  color:var(--green-900);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.7;
  letter-spacing:-.005em;
  overflow-x:hidden;
}

/* Film grain — atmosphere */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Typography */
h1,h2,h3,h4,.display{font-family:'Cormorant',Georgia,serif;font-weight:500;line-height:1.02;letter-spacing:-.015em}
.display-italic{font-style:italic;font-weight:400}
::selection{background:var(--green);color:var(--warm-white)}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{
  font-family:'Inter',sans-serif;font-size:.7rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--taupe);
  display:inline-flex;align-items:center;gap:.8rem;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);display:inline-block}
.eyebrow.on-dark{color:var(--stone-2)}
.eyebrow.center::before{display:none}

/* Buttons */
.btn{
  --bg:var(--green);--fg:var(--warm-white);--bd:var(--green);
  position:relative;display:inline-flex;align-items:center;gap:.75rem;
  padding:1.05rem 2rem;border:1px solid var(--bd);border-radius:100px;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg);
  background:var(--bg);cursor:pointer;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  isolation:isolate;
}
.btn>*{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--green-900);transform:translateY(100%);transition:transform .55s var(--ease);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(22,32,25,.55)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-ghost{--bg:transparent;--fg:var(--green);--bd:rgba(37,56,46,.35)}
.btn-ghost::before{background:var(--green)}
.btn-ghost:hover{--fg:var(--warm-white)}
.btn-light{--bg:var(--warm-white);--fg:var(--green);--bd:var(--warm-white)}
.btn-light::before{background:var(--gold)}
.btn-light:hover{--fg:var(--ink)}
.btn-outline-light{--bg:transparent;--fg:var(--warm-white);--bd:rgba(245,240,232,.4)}
.btn-outline-light::before{background:var(--warm-white)}
.btn-outline-light:hover{--fg:var(--green)}

/* Section scaffolding */
.section{padding-block:clamp(5rem,11vw,9.5rem);position:relative}
.section-tight{padding-block:clamp(3.5rem,7vw,6rem)}
.dark{background:var(--green-900);color:var(--warm-white)}
.dark h1,.dark h2,.dark h3{color:var(--warm-white)}
.darker{background:var(--ink);color:var(--warm-white)}
.stone-bg{background:linear-gradient(180deg,var(--warm-white),#EFE8DC)}

/* Reveal animation (progressive enhancement: visible by default) */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .reveal[data-d="4"]{transition-delay:.32s}
.js .reveal[data-d="5"]{transition-delay:.40s}

/* Line-mask reveal for big headings */
.lines .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.lines .line>span{display:block}
.js .lines .line>span{transform:translateY(115%);transition:transform 1.15s var(--ease)}
.js .lines.in .line>span{transform:translateY(0)}
.js .lines.in .line:nth-child(2)>span{transition-delay:.1s}
.js .lines.in .line:nth-child(3)>span{transition-delay:.2s}
.js .lines.in .line:nth-child(4)>span{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .lines .line>span{transform:none}
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:background .6s var(--ease),padding .6s var(--ease),box-shadow .6s var(--ease);
}
.nav.scrolled{background:rgba(245,240,232,.85);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 rgba(37,56,46,.08);padding-block:.95rem}
.nav.on-dark-hero:not(.scrolled){color:var(--warm-white)}
.nav.on-dark-hero:not(.scrolled) .nav-link{color:rgba(245,240,232,.85)}
.nav.on-dark-hero:not(.scrolled) .brand{color:var(--warm-white)}
.nav.on-dark-hero:not(.scrolled) .nav-cta{border-color:rgba(245,240,232,.5);color:var(--warm-white)}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--green);transition:color .6s var(--ease)}
.brand .mark{width:22px;height:28px;color:currentColor;flex:none}
.brand .name{font-family:'Cormorant',serif;font-size:1.45rem;font-weight:600;letter-spacing:.26em;padding-left:.12em}
.nav-links{display:flex;align-items:center;gap:2.4rem}
.nav-link{font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);position:relative;padding:.35rem 0;transition:color .35s}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .45s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-cta{border:1px solid var(--green);border-radius:100px;padding:.6rem 1.3rem!important;transition:all .45s var(--ease)}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--green);color:var(--warm-white)!important}
.nav.on-dark-hero:not(.scrolled) .nav-cta:hover{background:var(--warm-white);color:var(--green)!important;border-color:var(--warm-white)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;z-index:1001}
.nav-toggle span{width:24px;height:1.5px;background:currentColor;display:block;transition:.4s var(--ease)}
.brand,.nav-toggle{color:var(--green)}
.nav.on-dark-hero:not(.scrolled) .nav-toggle{color:var(--warm-white)}

@media(max-width:880px){
  .nav-links{
    position:fixed;inset:0;background:var(--green-900);color:var(--warm-white);
    flex-direction:column;justify-content:center;gap:2.2rem;
    transform:translateX(100%);transition:transform .65s var(--ease);
    padding:var(--gutter);
  }
  .nav-links.open{transform:none}
  .nav-link{font-family:'Cormorant',serif;font-size:2rem;letter-spacing:0;text-transform:none;color:var(--warm-white)}
  .nav-cta{border-color:rgba(245,240,232,.4)!important;color:var(--warm-white)!important;font-size:1rem!important;padding:.9rem 2rem!important}
  .nav-toggle{display:flex}
  .nav-toggle.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle.x span:nth-child(2){opacity:0}
  .nav-toggle.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav.menu-open .nav-toggle{color:var(--warm-white)}
}

/* ---------- FOOTER ---------- */
.footer{background:var(--green-900);color:var(--warm-white);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(2rem,5vw,4rem);padding-bottom:3.5rem;border-bottom:1px solid var(--green-600)}
.footer .mark{width:44px;height:56px;color:var(--warm-white);margin-bottom:1.3rem}
.footer .f-name{font-family:'Cormorant',serif;font-size:1.6rem;letter-spacing:.28em;font-weight:600}
.footer .f-tag{font-family:'Cormorant',serif;font-style:italic;font-size:1.05rem;color:var(--stone-2);margin-top:.6rem;max-width:24ch}
.footer h4{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.2rem}
.footer a.f-link{display:block;color:rgba(245,240,232,.78);font-size:.92rem;margin-bottom:.7rem;width:fit-content;transition:color .35s,transform .35s var(--ease)}
.footer a.f-link:hover{color:var(--warm-white);transform:translateX(4px)}
.footer-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:2rem;font-size:.74rem;color:var(--stone-2);letter-spacing:.04em}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* Utility */
.fadein-img{overflow:hidden}
.fadein-img img{transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.serif-lead{font-family:'Cormorant',serif;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.28;letter-spacing:-.01em}
.text-gold{color:var(--gold)}
.text-moss{color:var(--moss)}
.measure{max-width:54ch}
.measure-sm{max-width:42ch}
.kicker-num{font-family:'Cormorant',serif;font-size:.95rem;color:var(--gold);letter-spacing:.1em}
.divider-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);width:80px}