:root{
  --bg:#1a1a1a;
  --text:#f5f5f5;
  --muted:#b0b0b0;
  --card:transparent;
  --border:#545454;
  --accent:#111111;
  --button-bg:#707070;
  --pink-ombre: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 45%, #d0d0d0 100%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#1a1a1a;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url('../images/black-marble.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color:var(--text);
  line-height:1.55;
}

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

.container{ width:min(1100px, 92%); margin:0 auto; }
.muted{ color:var(--muted); }
.small{ font-size:0.95rem; }

/* =========================
   Header / Nav
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(26, 26, 26, 0.95);
  border-bottom:1px solid var(--border);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 0;
}

.logo{
  font-family: "Great Vibes", cursive;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}

.nav{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* Your nav links are buttons in HTML, but keep hover niceness anyway */
.nav a{
  border-radius:10px;
}

.nav a:hover{
  background:rgba(255, 255, 255, 0.1);
  color:var(--text);
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-block;
  padding:0.6rem 0.9rem;
  border-radius:12px;
  border:1px solid var(--button-bg);
  background:var(--button-bg);
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}

.btn-outline{
  background:transparent;
  color:var(--text);
}

/* =========================
   Sections / Titles
========================= */
.section{
  padding:3rem 0;
  border-bottom:1px solid var(--border);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.25rem;
}

.section-title{
  font-family: "Playfair Display", Georgia, serif;
  margin: 0 0 12px;
  font-size: 30px;
}

/* =========================
   Hero
========================= */
.hero{
  background:transparent;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:1.5rem;
  align-items:start;
}

.hero h1{
  margin:0 0 0.75rem;
  font-size:clamp(2rem, 3.2vw, 3.1rem);
}

.actions{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.quick{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}

.quick-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
}

.about-logo img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* =========================
   Gallery (2 columns always)
========================= */
.photo-grid-2col{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.photo{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background:var(--card);
}

.photo img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* =========================
   Services
========================= */
#services .section-head{
  justify-content:center;
  text-align:center;
}
#services .chips{
  justify-content:center;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin:0.5rem 0 1.25rem;
}

.chip{
  padding:0.45rem 0.7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-weight:600;
}

.chip:hover{
  color:var(--text);
  border-color:#666;
}

.menu-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:1.25rem;
}

.menu-block{
  /* use percentage + max-width instead of min(): some older iOS
     Safari versions mishandled the min() function and could compute
     a width larger than the container, effectively hiding the content
     off‑screen.  The `width:100%` + `max-width` combo is equivalent
     and more widely supported. */
  width:100%;
  max-width:760px;
  margin: 0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
}

.note{
  background:rgba(255, 255, 255, 0.05);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0.75rem 0.9rem;
}

.service-card{
  border-top:1px solid var(--border);
  padding-top:0.85rem;
  margin-top:0.85rem;
}

.service-card h4{
  margin:0 0 0.35rem;
}

.price{
  font-weight:800;
  margin:0.45rem 0 0;
}

.list{
  margin:0.6rem 0 0;
  padding-left:1.2rem;
}

.two-col{
  columns:2;
  column-gap:2rem;
}

/* =========================
   Manicure block (image on top + services below)
========================= */
.manicure-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items:start;
  margin-top: 0.75rem;
}

.manicure-photo{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--card);
}

.manicure-photo img{
  width:100%;
  height:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
}

/* =========================
   Reusable Service + Image blocks (Pedicure/Enhancements/Wax/Kids)
   Always picture on top (all screen sizes)
========================= */
.service-media-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items:start;
  margin-top: 0.75rem;
}

.service-photo{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--card);
}

.service-photo img{
  width:100%;
  height:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
}

/* =========================
   Hours
========================= */
#hours .section-head{
  justify-content:center;
  text-align:center;
}

.hours-card{
  width: min(400px, 100%);
  margin: 0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
}

.hours-card > div{
  display:flex;
  justify-content:space-between;
  padding:0.65rem 0;
  border-bottom:1px solid var(--border);
}

.hours-card > div:last-child{
  border-bottom:none;
}

/* =========================
   Location + Map
========================= */
.location-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  align-items:start;
}

.map-embed{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background:var(--card);
}

.map-embed iframe{
  width:100%;
  height:280px;
  display:block;
}

/* =========================
   Links section
========================= */
.content-block{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:10px;
}

.clean-list{
  list-style:none;
  padding-left:0;
  margin:0.75rem 0 0;
}
.clean-list li{ margin:0.5rem 0; }

.ig-link,
.fb-link{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.ig-link:hover,
.fb-link:hover{
  opacity:0.85;
}

/* =========================
   Footer
========================= */
.site-footer{
  padding:1.2rem 0;
  font-size: 0.9rem;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.back-to-home{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;

  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 999px;
  padding: 0.55rem 0.8rem;

  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  font-weight: 700;
  color: #000000;
  transition: transform 150ms ease;
}

.back-to-home:hover{
  transform: translateY(-2px);
}

/* =========================
   Animations (keep only ONE copy)
========================= */
.reveal{
  opacity:0;
  transform: translateX(-90px);
  will-change: opacity, transform;
}

.slide-left{
  opacity:0;
  transform: translateX(-160px);
  will-change: transform, opacity;
}

.slide-right{
  opacity:0;
  transform: translateX(160px);
  will-change: transform, opacity;
}

/* Transition‑based fallback for any browser.  A small script adds
   the `.visible` class when elements intersect the viewport. */
.reveal.visible,
.slide-left.visible,
.slide-right.visible {
  opacity:1;
  transform: translateX(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@supports (animation-timeline: view()) {
  .reveal{
    animation: reveal-left 2.0s cubic-bezier(.2,.8,.2,1) forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes reveal-left{
    to{ opacity:1; transform: translateX(0); }
  }

  .slide-left{
    animation: in-left 1.6s cubic-bezier(.2,.8,.2,1) forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }

  .slide-right{
    animation: in-right 1.6s cubic-bezier(.2,.8,.2,1) forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }

  @keyframes in-left{
    from{ opacity: 0; transform: translateX(-160px); }
    to{ opacity: 1; transform: translateX(0); }
  }

  @keyframes in-right{
    from{ opacity: 0; transform: translateX(160px); }
    to{ opacity: 1; transform: translateX(0); }
  }
}

/* Fallback for browsers that don't support the new scroll‑linked
   `animation-timeline` API.  Instead of forcing the elements to be
   visible immediately we leave them in their hidden state and rely on a
   small bit of JavaScript below to toggle a `.visible` class when the
   element scrolls into view. */

/* NOTE: the intersection‑observer script is injected at the end of
   `index.html`.  It only adds the class once, then unobserves so the
   animation plays a single time. */

/* The old unsupported block was removed; leaving elements visible
   instantly made the mobile site appear static. */

/* =========================
   Mobile
========================= */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .quick{ grid-template-columns: 1fr; }
  .location-card{ grid-template-columns: 1fr; }

  /* Gallery stays 2 columns; just reduce height */
  .photo img{ height: 220px; }

  /* Most multi-column lists become 1 column on mobile... */
  .two-col{ columns:1; }

  /* ...but Waxing stays 2 columns on mobile */
  #waxing .two-col{
    columns: 2;
    column-gap: 1rem;
  }
  #waxing .service-photo img{
    max-height: 260px;
  }

  .manicure-photo img,
  .service-photo img{
    max-height: 360px;
  }
}