/* Rooted Beauty Co. — styles.css */
:root{
  --bg:#0b0f0d; --bg-2:#0f1613; --surface:#131a17;
  --green-600:#1b5e20; --green-400:#2e7d32;
  --gold:#d4af37; --gold-700:#8f6a00;
  --text:#f6f6f6; --muted:#c7d1c9; --link:#e5c86b;
  --shadow: 0 10px 30px rgba(0,0,0,.35); --radius:16px;
}
*{ box-sizing:border-box } html{ color-scheme:dark; scroll-behavior:smooth }
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, rgba(46,125,50,.25), transparent 60%),
              radial-gradient(1200px 600px at 100% 0%, rgba(19,26,23,.8), transparent 70%), var(--bg);
  color:var(--text);
}
img{ max-width:100%; display:block }
.container{ width:min(1100px, 100% - 2rem); margin-inline:auto }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
.center{ text-align:center } .mt-m{ margin-top:1rem } .mt-l{ margin-top:2rem } .mb-s{ margin-bottom:.5rem }
.kicker{ letter-spacing:.2em; text-transform:uppercase; color:var(--link); font-weight:600; font-size:.85rem }
.display{ font-size:clamp(2rem,7vw,4rem); line-height:1.1; margin:.2em 0 .4em }
.lead{ font-size:clamp(1rem,2.5vw,1.25rem); color:var(--muted) }

/* Header */
.site-header{ position:sticky; top:0; z-index:20; background:color-mix(in oklab, var(--bg), #000 10%); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.06) }
.site-header[data-scrolled="true"]{ box-shadow:var(--shadow) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.02em }
.brand-mark{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) } .brand-name{ white-space:nowrap }
.nav-toggle{ display:none; width:40px; height:38px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:transparent }
.nav-toggle span{ display:block; width:60%; height:2px; background:#fff; margin:6px auto; transition:transform .2s ease }
.site-nav ul{ display:flex; gap:1rem; list-style:none; padding:0; margin:0 1rem 0 0 }
.site-nav a{ color:var(--text); text-decoration:none; opacity:.85; padding:.45rem .6rem; border-radius:8px }
.site-nav a:hover, .site-nav a[aria-current="true"]{ background:rgba(255,255,255,.06); opacity:1 }

/* Buttons */
.btn{ --_bg:var(--surface); --_fg:var(--text); --_bd:rgba(255,255,255,.12);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; padding:.8rem 1.1rem; text-decoration:none; color:var(--_fg); border:1px solid var(--_bd);
  font-weight:600; transition:transform .05s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px) } .btn:active{ transform:translateY(0) }
.btn-outline{ background:transparent; --_bd:rgba(255,255,255,.25) }
.btn-accent{ --_bg:linear-gradient(135deg,var(--gold),var(--gold-700)); --_fg:#0b0f0d; --_bd:transparent; background:var(--_bg); color:var(--_fg) }
.btn-accent:hover{ filter:brightness(1.05) } .btn-small{ padding:.5rem .8rem; font-size:.92rem }
.btn-lg{ padding:1rem 1.25rem; font-size:1.05rem } .btn-wide{ min-width:240px }

/* Sections */
.section{ padding:clamp(3rem,7vw,5rem) 0 } .section.alt{ background:linear-gradient(180deg, rgba(19,26,23,.7), rgba(19,26,23,.1)) }
.section-header{ text-align:center; margin-bottom:2rem } .section-header p{ color:var(--muted) }

/* Hero */
.hero{ padding-top:clamp(3rem,8vw,7rem) }
.hero-inner{ display:grid; gap:2rem; align-items:center; grid-template-columns:1.2fr .8fr }
.hero-media{ display:flex; align-items:center; justify-content:center }
.hero-image{ width:min(540px,100%); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08) }
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem }
.divider{ display:block; margin-top:3rem; width:100%; opacity:.7 }

/* Services */
.chip-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; justify-content:center }
.chip{ border:1px solid rgba(255,255,255,.2); color:var(--text); background:transparent; border-radius:999px; padding:.35rem .9rem; cursor:pointer }
.chip.is-active{ background:rgba(255,255,255,.1) }
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr) }
.grid.two-col{ grid-template-columns:1.1fr .9fr; gap:1.5rem }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:1.1rem; border-radius:var(--radius); box-shadow:var(--shadow) }
.card.service header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.card.service .pill{ font-size:.8rem; color:var(--muted); border:1px solid rgba(255,255,255,.14); padding:.15rem .45rem; border-radius:999px }
.card.service .price-line{ margin-top:.5rem; color:var(--link) }

/* About */
.about-grid{ display:grid; gap:1.2rem; grid-template-columns:.9fr 1.1fr; align-items:center }
.about-media img{ border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow) }
.checklist{ list-style:none; padding-left:0 } .checklist li{ margin:.4rem 0; padding-left:1.2rem; position:relative }
.checklist li::before{ content:"✔"; color:var(--gold); position:absolute; left:0 }

/* Gallery */
.masonry{ columns:3 260px; column-gap:1rem }
.masonry img{ width:100%; margin:0 0 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); break-inside:avoid; box-shadow:var(--shadow) }

/* Location */
.map-wrap{ min-height:420px }
address{ font-style:normal; color:var(--muted) }
.contact-lines{ display:grid; gap:.4rem; margin-top:.6rem }
.contact-lines div{ display:flex; justify-content:space-between; gap:1rem }
.hours{ list-style:none; padding-left:0; margin:0 }
.hours li{ display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px dashed rgba(255,255,255,.08) }
.hours li:last-child{ border-bottom:0 }

/* Contact form */
.contact-form .form-row{ display:grid; gap:.4rem; margin:.6rem 0 }
.contact-form input, .contact-form textarea{
  border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:.75rem .9rem; background:rgba(255,255,255,.03); color:var(--text)
}
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid color-mix(in oklab, var(--gold) 60%, white 10%); border-color:transparent }
.form-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.form-hint{ color:var(--muted); font-size:.9rem; opacity:.8 }

/* Footer */
.site-footer{ padding:2rem 0 3.5rem; background:linear-gradient(0deg, rgba(0,0,0,.5), transparent), var(--bg-2); border-top:1px solid rgba(255,255,255,.06) }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.footer-brand{ display:flex; align-items:center; gap:.5rem; color:var(--muted) }
.footer-brand .dot{ color:#555 }
.socials{ display:flex; gap:.6rem }
.icon-link{ display:inline-flex; width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.16); align-items:center; justify-content:center }
.icon-link:hover{ background:rgba(255,255,255,.08) }
.icon-link svg{ width:18px; height:18px; fill:var(--text); opacity:.9 }
.legal{ margin-top:1rem; text-align:center; color:#9ab0a2 }

/* Sticky CTA */
.sticky-cta{ position:fixed; inset:auto 0 1rem 0; display:flex; justify-content:center; z-index:50 }
.sticky-cta .btn{ box-shadow:var(--shadow) }

/* Skip link */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .8rem; border-radius:10px; z-index:1000 }

/* Responsive */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr 1fr }
  .grid.two-col{ grid-template-columns:1fr }
  .about-grid{ grid-template-columns:1fr }
  .hero-inner{ grid-template-columns:1fr }
}
@media (max-width:720px){
  .site-nav{ position:fixed; inset:60px 0 auto 0; background:color-mix(in oklab, var(--bg), #000 10%); padding:1rem; translate:0 -120%; transition:translate .2s ease; border-bottom:1px solid rgba(255,255,255,.08) }
  .site-nav.open{ translate:0 0 }
  .site-nav ul{ flex-direction:column; gap:.4rem; margin:0 0 1rem 0 }
  .nav-toggle{ display:block }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important } }


/* --- Nav Button Position Fix --- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* push the button to the far right on wide screens */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Book Now button styling inside nav */
.site-nav .btn-small {
  margin-left: 1rem;
  white-space: nowrap;
}

/* --- Mobile Layout --- */
@media (max-width: 720px) {
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav .btn-small {
    align-self: stretch;
    text-align: center;
    margin-top: 0.5rem;
  }
}


/* --- Hero spacing fix --- */
.hero {
  padding-bottom: 2rem;     /* tighten bottom space */
}

.hero-inner {
  align-items: center;
  gap: 1rem;                /* reduce large grid spacing */
}

.hero-image {
  margin-bottom: 0;         /* remove stray bottom margin */
}

.divider {
  margin-top: 1rem;         /* reduce the gap above divider */
  margin-bottom: 0;
}

.section {
  padding-top: 3rem;
}

.divider {
  position: relative;       /* take it out of normal flow */
  top: 0;                   /* adjust to where you want it */
  left: 0;
  width: 0%;
  opacity: 0.4;
  object-fit: cover;
  z-index: -1;              /* place behind everything else */
  pointer-events: none;     /* let clicks pass through */
}

/* Rooted Beauty Co — full-page botanical background */
body::before {
  content: "";
  position: fixed;          /* stays put while scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("assets/leaf-divider.svg") repeat center center;
  background-size: cover;   /* scales SVG nicely */
  opacity: 0.1;            /* subtle visibility */
  z-index: -9999;           /* behind everything */
  pointer-events: none;     /* let clicks pass through */
}


.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  scroll-margin-top: 100px; /* offsets sticky header when scrolling to anchors */
}

.card-link:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(255,255,255,0.08);
}


.card.service {
  position: relative;
}
.card.service .service-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  
}
.card.service:hover .service-link:hover {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(255,255,255,0.08);
}

html {
  scroll-behavior: smooth;
}