/* =========================================================
   SERENE HOME — Global Stylesheet
   Palette:
     --color-black:    #0c0c0c   (primary background)
     --color-charcoal: #161513   (secondary/panel background)
     --color-gold:     #c9a063   (primary accent, matches logo)
     --color-gold-soft:#e6cda0   (hover / highlight)
     --color-cream:    #f3efe7   (text on dark)
     --color-line:     #2c2a26   (hairline borders)
   Type:
     Display / Titles: "Libre Baskerville"
     Body: "Google Sans" (Product Sans) -> fallback "Google Sans Text", Roboto
   ========================================================= */

:root{
  --color-black:#0c0c0c;
  --color-charcoal:#161513;
  --color-charcoal-2:#1e1c19;
  --color-gold:#c9a063;
  --color-gold-soft:#e6cda0;
  --color-cream:#f3efe7;
  --color-muted:#a8a29a;
  --color-line:#2c2a26;

  --font-display:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:'Google Sans Text','Google Sans','Product Sans','Segoe UI',Roboto,Arial,sans-serif;

  --container-w:1240px;
  --nav-h:88px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

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

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--color-black);
  color:var(--color-cream);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:inherit;text-decoration:none;}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.25;
  letter-spacing:0.01em;
  color:var(--color-cream);
}

h1{font-size:clamp(2.4rem,6vw,4.6rem);}
h2{font-size:clamp(1.9rem,4.2vw,3rem);}
h3{font-size:clamp(1.3rem,2.6vw,1.7rem);}

p{color:var(--color-muted);}

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-body);
  font-size:0.74rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  display:block;
  width:34px;height:1px;
  background:var(--color-gold);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:0.82rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:16px 38px;
  border:1px solid var(--color-gold);
  color:var(--color-cream);
  background:transparent;
  cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
  white-space:nowrap;
}
.btn:hover{
  background:var(--color-gold);
  color:#15130f;
}
.btn-solid{
  background:var(--color-gold);
  color:#15130f;
  border-color:var(--color-gold);
}
.btn-solid:hover{
  background:transparent;
  color:var(--color-cream);
}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:rgba(12,12,12,0.0);
  border-bottom:1px solid transparent;
  transition:background var(--transition),border-color var(--transition),height var(--transition);
}
.site-header.scrolled{
  background:rgba(12,12,12,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-line);
  height:74px;
}

.nav-inner{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  z-index:1100;
}
.brand img{
  height:42px;width:42px;
  object-fit:contain;
  transition:height var(--transition);
}
.site-header.scrolled .brand img{height:36px;}
.brand-text{
  font-family:var(--font-display);
  font-size:1.32rem;
  letter-spacing:0.06em;
  line-height:1;
}
.brand-text span{
  display:block;
  font-family:var(--font-body);
  font-size:0.6rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin-top:4px;
}

/* primary nav */
.nav-menu{
  display:flex;
  align-items:center;
  gap:38px;
  list-style:none;
}
.nav-menu > li{
  position:relative;
}
.nav-menu > li > a{
  font-size:0.82rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:10px 2px;
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--color-cream);
  transition:color var(--transition);
}
.nav-menu > li > a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--color-gold);
  transition:width var(--transition);
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a{
  color:var(--color-gold);
}
.nav-menu > li > a:hover::after,
.nav-menu > li.active > a::after{
  width:100%;
}
.caret{
  width:9px;height:9px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--transition);
  flex:none;
}
.has-dropdown:hover .caret{
  transform:rotate(-135deg) translateY(2px);
}

/* dropdown */
.dropdown{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:280px;
  background:var(--color-charcoal);
  border:1px solid var(--color-line);
  padding:14px 0;
  list-style:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--transition),transform var(--transition);
}
.has-dropdown:hover .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown::before{
  content:'';
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;
  background:var(--color-charcoal);
  border-left:1px solid var(--color-line);
  border-top:1px solid var(--color-line);
}
.dropdown li a{
  display:block;
  padding:12px 28px;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-muted);
  border-left:2px solid transparent;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.dropdown li a:hover{
  color:var(--color-gold-soft);
  border-left-color:var(--color-gold);
  background:rgba(201,160,99,0.06);
}

/* nav CTA */
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-cta .btn{padding:13px 28px;font-size:0.74rem;}

/* mobile toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:32px;height:32px;
  background:none;border:none;
  cursor:pointer;
  z-index:1100;
}
.nav-toggle span{
  display:block;
  height:1px;
  width:100%;
  background:var(--color-cream);
  transition:transform var(--transition),opacity var(--transition),background var(--transition);
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--color-charcoal);
  border-top:1px solid var(--color-line);
  padding:90px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:60px;
  padding-bottom:70px;
  border-bottom:1px solid var(--color-line);
}
.footer-brand .brand{margin-bottom:22px;}
.footer-brand p{max-width:320px;font-size:0.93rem;}
.footer-col h4{
  font-family:var(--font-body);
  font-size:0.76rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin-bottom:24px;
}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:14px;}
.footer-col ul li a{
  font-size:0.92rem;
  color:var(--color-muted);
  transition:color var(--transition),padding-left var(--transition);
}
.footer-col ul li a:hover{color:var(--color-gold-soft);padding-left:4px;}
.footer-social{
  display:flex;gap:14px;margin-top:24px;
}
.footer-social a{
  width:38px;height:38px;
  border:1px solid var(--color-line);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;
  transition:border-color var(--transition),color var(--transition);
}
.footer-social a:hover{border-color:var(--color-gold);color:var(--color-gold);}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding:28px 0;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--color-muted);
}
.footer-bottom a{color:var(--color-muted);}
.footer-bottom a:hover{color:var(--color-gold);}
.footer-legal{display:flex;gap:28px;}

/* =========================================================
   HERO (index)
   ========================================================= */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding-top:var(--nav-h);
  background:
    radial-gradient(ellipse at 75% 30%, rgba(201,160,99,0.10), transparent 55%),
    linear-gradient(180deg, #0c0c0c 0%, #0c0c0c 70%, #100f0d 100%);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(255,255,255,0.012) 120px);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
  width:100%;
}
.hero-content .eyebrow{margin-bottom:26px;}
.hero h1{margin-bottom:28px;}
.hero h1 em{
  font-style:italic;
  color:var(--color-gold);
}
.hero-content p{
  max-width:480px;
  font-size:1.05rem;
  margin-bottom:42px;
}
.hero-actions{display:flex;gap:20px;flex-wrap:wrap;}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-emblem{
  width:min(100%,440px);
  aspect-ratio:1/1;
  border:1px solid var(--color-line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-emblem::before{
  content:'';
  position:absolute;
  inset:36px;
  border:1px solid rgba(201,160,99,0.25);
  border-radius:50%;
}
.hero-emblem img{
  width:58%;
  filter:drop-shadow(0 0 40px rgba(201,160,99,0.18));
}
.hero-stats{
  display:flex;
  gap:50px;
  margin-top:60px;
  padding-top:36px;
  border-top:1px solid var(--color-line);
  max-width:560px;
}
.hero-stat .num{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--color-gold-soft);
  display:block;
  margin-bottom:6px;
}
.hero-stat .lbl{
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* =========================================================
   SECTION generic
   ========================================================= */
.section{
  padding:120px 0;
  position:relative;
}
.section-alt{background:var(--color-charcoal);}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:70px;
  flex-wrap:wrap;
}
.section-head .lead{max-width:420px;}
.section-head h2{max-width:560px;}

/* pillars / services preview */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--color-line);
  border:1px solid var(--color-line);
}
.pillar{
  background:var(--color-black);
  padding:48px 40px;
  transition:background var(--transition);
}
.pillar:hover{background:var(--color-charcoal-2);}
.pillar .index{
  font-family:var(--font-display);
  font-size:0.85rem;
  color:var(--color-gold);
  letter-spacing:0.2em;
  margin-bottom:30px;
  display:block;
}
.pillar h3{margin-bottom:16px;}
.pillar p{font-size:0.94rem;}
.pillar a.more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:26px;
  font-size:0.76rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--color-gold);
}

/* ventures */
.ventures-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.venture-card{
  border:1px solid var(--color-line);
  padding:52px 36px;
  position:relative;
  overflow:hidden;
  transition:border-color var(--transition),transform var(--transition);
}
.venture-card:hover{
  border-color:var(--color-gold);
  transform:translateY(-6px);
}
.venture-card .eyebrow{margin-bottom:22px;}
.venture-card h3{margin-bottom:14px;}
.venture-card p{font-size:0.92rem;margin-bottom:24px;}

/* journal / blog preview */
.journal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.journal-card .thumb{
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--color-charcoal-2),var(--color-charcoal));
  border:1px solid var(--color-line);
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.journal-card .thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(201,160,99,0.16), transparent 60%);
}
.journal-card .meta{
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin-bottom:12px;
}
.journal-card h3{margin-bottom:10px;}
.journal-card p{font-size:0.9rem;}

/* CTA band */
.cta-band{
  padding:110px 0;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,160,99,0.10), transparent 60%),
    var(--color-black);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
}
.cta-band h2{max-width:760px;margin:0 auto 36px;}
.cta-band .btn-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}

/* about preview */
.about-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:80px;
  align-items:center;
}
.about-media{
  aspect-ratio:4/5;
  border:1px solid var(--color-line);
  background:linear-gradient(160deg,var(--color-charcoal-2),var(--color-black));
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.about-media img{width:40%;opacity:0.9;}
.about-media::before{
  content:'';
  position:absolute;inset:24px;
  border:1px solid rgba(201,160,99,0.18);
}
.about-text p{margin-bottom:22px;font-size:1rem;}

/* utility */
.text-gold{color:var(--color-gold);}
.divider{height:1px;background:var(--color-line);width:100%;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .nav-menu{gap:26px;}
  .hero-grid{grid-template-columns:1fr;text-align:left;}
  .hero-visual{order:-1;margin-bottom:20px;}
  .hero-emblem{margin:0 auto;max-width:320px;}
  .about-grid,.pillars,.ventures-grid,.journal-grid{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:50px;}
}

@media (max-width:880px){
  :root{--nav-h:74px;}
  .nav-cta .btn:not(.btn-solid){display:none;}

  .nav-menu{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:min(82%,360px);
    background:var(--color-charcoal);
    border-left:1px solid var(--color-line);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    padding:120px 36px 40px;
    transform:translateX(100%);
    transition:transform var(--transition);
    overflow-y:auto;
    list-style:none;
  }
  .nav-menu.open{transform:translateX(0);}
  .nav-menu > li{width:100%;border-bottom:1px solid var(--color-line);}
  .nav-menu > li > a{padding:18px 0;justify-content:space-between;width:100%;font-size:0.9rem;}
  .nav-toggle{display:flex;}

  .dropdown{
    position:static;
    transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    display:none;
    width:100%;
    border:none;
    background:transparent;
    padding:0 0 12px;
  }
  .dropdown::before{display:none;}
  .has-dropdown.open .dropdown{display:block;}
  .has-dropdown.open .caret{transform:rotate(-135deg);}
  .dropdown li a{padding:10px 0 10px 16px;font-size:0.82rem;}

  .pillars,.ventures-grid,.journal-grid,.about-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:46px;}
  .hero-stats{gap:32px;flex-wrap:wrap;}
}

@media (max-width:520px){
  .container{padding:0 22px;}
  .nav-inner{padding:0 22px;}
  .section{padding:80px 0;}
  .hero-actions .btn{width:100%;}
  .cta-band .btn-row{flex-direction:column;align-items:center;}
  .cta-band .btn{width:100%;max-width:320px;}
  .brand-text{font-size:1.05rem;}
}