@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --bg:#FDF5E6;
  --text:#111111;
  --accent:#B76E79;
  --accent-2:#8B5E3C;
  --light:#E5E5E5;
}

html{ font-size:16px; scroll-behavior:smooth; }
@media (max-width:600px){ html{ font-size:15px; } }

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  color:var(--text);
  margin:0 0 .5rem 0;
}

.container{ max-width:1100px; margin:0 auto; padding:0 1rem; }

/* ===== Header ===== */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--light);
}
header nav.container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 0;
}

.nav-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1.25rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--text);
  font-weight:500;
}
.nav-links a:hover{ color:var(--accent); }

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--light);
  padding:.5rem .75rem;
  border-radius:.5rem;
}
@media (max-width:800px){
  .nav-toggle{ display:inline-block; position:absolute; right:1rem; }
  .nav-links{
    display:none;
    position:absolute;
    right:1rem; left:1rem; top:64px;
    background:#fff; border:1px solid var(--light);
    border-radius:.75rem; padding:1rem;
    flex-direction:column; gap:.75rem;
  }
  .nav-links.is-open{ display:flex; }
}

/* ===== Hero: logo is the background image, covering the whole area ===== */
.hero.hero--logo{
  position: relative;
  display: grid;
  place-items: center;         /* centers the container for small screens */
  min-height: clamp(420px, 68vh, 780px);
  padding: 0;                  /* we want true full-bleed */
  background: center / cover no-repeat url('assets/logo/logo.jpeg'); /* <- your logo */
  color: var(--text);
}

/* remove the dark overlay from the old hero */
.hero.hero--logo::before{ display:none; }

/* Button placement: centered horizontally, vertically placed just under "HAIR" */
.hero-cta{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* this "bottom" value puts it near the lower third; tweak if needed */
  bottom: 10%;
  background: var(--accent);
  color:#fff;
  font-weight: 500;
  padding: .9rem 2rem;
  border-radius: .5rem;
  text-decoration: none;
  transition: background .25s ease;
}
.hero-cta:hover{ background: var(--accent-2); }

/* Fine-tune on smaller screens so the button doesn’t sit too low */
@media (max-width: 900px){
  .hero-cta{ bottom: 18%; }
}
@media (max-width: 600px){
  .hero-cta{ bottom: 14%; padding: .8rem 1.4rem; }
}

/* ===== Sections ===== */
.section{ padding:3rem 1rem; max-width:1100px; margin:0 auto; border-top:1px solid rgba(0,0,0,.03); }
@media (max-width:900px){ .section{ padding:2.25rem 1.25rem; } }

/* ===== About ===== */
.about-wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:start;
}
@media (max-width:900px){ .about-wrap{ grid-template-columns:1fr; } }
.about-photo{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:.75rem;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  border-radius:.5rem;
  padding:.75rem 1.5rem;
  font-weight:500;
  text-decoration:none;
}
.btn:hover{ background:var(--accent-2); }

/* ===== Portfolio ===== */
.portfolio-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,1fr);
  grid-template-rows:1fr 1fr;
  gap:.75rem;
  overflow-x:auto;
  padding:.5rem 0 1rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }
@media (min-width:900px){
  .carousel{ grid-auto-columns:minmax(260px,1fr); }
}
.card{ scroll-snap-align:start; margin:0; }
.card .ph,.card img{
  border-radius:.5rem;
  width:100%;
  height:auto;
  object-fit:cover;
}
.carousel.dragging{ cursor:grabbing; user-select:none; }
.carousel-controls{ display:flex; gap:.5rem; }
.carousel-btn{
  border:1px solid var(--light);
  background:#fff;
  color:var(--text);
  padding:.4rem .7rem;
  border-radius:.5rem;
  cursor:pointer;
}
.carousel-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* ===== Services ===== */
.service-category{
  margin:2rem 0 1rem;
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  color:var(--accent-2);
  border-bottom:2px solid var(--light);
  padding-bottom:.25rem;
}
.price-cards{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.price-card{
  background:#FFFAF4;
  border:none;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  border-radius:.75rem;
  padding:1rem;
}
.price-card header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
.price-card h4{ font-size:1rem; margin:0; }
.price-card .price{ font-weight:700; color:var(--accent); }
.fineprint{ margin-top:2rem; font-size:.9rem; color:#555; }

/* ===== Footer ===== */
footer{
  text-align:center;
  padding:1.5rem;
  background:#fff;
  border-top:1px solid var(--light);
  font-size:.9rem;
}

/* ===== Lightbox ===== */
.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:grid;
  place-items:center;
  z-index:9999;
  padding:2rem;
}
.lightbox img{
  max-width:min(1200px,92vw);
  max-height:85vh;
  border-radius:.5rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;
  top:1rem;
  right:1rem;
  font-size:2rem;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

/* ===== Placeholder shimmer ===== */
.ph{
  background:linear-gradient(110deg,rgba(255,255,255,.14) 8%,rgba(255,255,255,.28) 18%,rgba(255,255,255,.14) 33%),#d3c6c1;
  background-size:200% 100%;
  animation:ph-shimmer 1.2s linear infinite;
  border-radius:.5rem;
}
.ph-4x5{ aspect-ratio:4/5; }
@keyframes ph-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
/* --- Mobile hero tuning --- */
@media (max-width: 900px) {
  .hero.hero--logo{
    /* use the "small viewport" unit so it behaves with the URL bar */
    min-height: min(76svh, 680px);
    /* nudge the focal point so “HAIR” lands higher in frame */
    background-position: center 35%;
  }
  .hero-cta{
    bottom: 12%;          /* was 15–22% — lower the button a touch on tablets */
    padding: .85rem 1.6rem;
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  .hero.hero--logo{
    min-height: min(72svh, 600px);
    background-position: center 40%;  /* pushes the text area up so it’s visible */
    padding-top: env(safe-area-inset-top);
  }
  .hero-cta{
    bottom: 9%;            /* a little lower on narrow phones */
    padding: .75rem 1.25rem;
    font-size: .95rem;
    border-radius: .45rem;
  }
}

/* Keep header controls from crowding the viewport edge on phones */
@media (max-width: 800px){
  header nav.container{
    justify-content: space-between;
    padding: .75rem 1rem;
  }
  .nav-toggle{ right: 1rem; }
}

/* Mobile hero tuning: full-bleed but better crop */
@media (max-width: 900px) {
  .hero.hero--logo{
    min-height: min(72svh, 620px);
    background-position: center 32%; /* try 28–38% if needed */
  }
  .hero-cta{ bottom: 12%; }
}

/* Narrow phones */
@media (max-width: 520px) {
  .hero.hero--logo{
    min-height: min(68svh, 560px);
    background-position: center 28%;
  }
  .hero-cta{ bottom: 10%; }
}
/* Uniform card sizing across all images */
.carousel{
  /* consistent column width that adapts to screen size */
  grid-auto-columns: clamp(200px, 28vw, 260px);
  grid-template-rows: auto auto;  /* two even rows */
}

.card{
  margin: 0;
  aspect-ratio: 4 / 5;           /* every card same ratio */
}

.card img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fills card cleanly */
  border-radius: .5rem;
  display: block;
}

/* Prevent the image from “capturing” the drag */
.carousel img{
  pointer-events: none;           /* no clicks today */
  user-select: none;
  -webkit-user-drag: none;
}
/* ===== Reviews ===== */
.review-cards {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-items: center;
  margin-top: 1.5rem;
}

.review-card {
  background: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  border-radius: .75rem;
  padding: 1.4rem 1.6rem;
  max-width: 500px;
}

.review-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.review-card::before {
  content: "“";
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  line-height: 1;
  color: rgba(0,0,0,.18);
  margin-right: .25rem;
  vertical-align: top;
}

.review-meta {
  margin-top: .6rem;
  color: #666;
  font-size: .9rem;
}

/* Baltimore Magazine card: center it full-width */
.review-card--mag {
  grid-column: 1 / -1;            /* spans across both columns */
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

/* Responsive stacking for mobile */
@media (max-width: 750px) {
  .review-cards {
    grid-template-columns: 1fr;
  }
  .review-card--mag {
    grid-column: auto;
  }
}
/* ===== Contact & Map ===== */
.map-container {
  margin-top: 1.5rem;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.map-container iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

/* Make header always on top */
header{
  position: fixed;       /* was: sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;   /* max-ish, nothing will overtake it */
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* Prevent content from sitting under the fixed header */
:root { --header-h: 64px; }      /* adjust if your header is taller */
body { padding-top: var(--header-h); }

/* Mobile header slightly shorter? tweak if needed */
@media (max-width: 800px){
  :root { --header-h: 56px; }
}
/* RESET from the last change */
body { padding-top: 0 !important; }

/* Keep the header sticky, but unbeatable in z-order */
header{
  position: sticky;       /* back to sticky */
  top: 0;
  left: 0; right: 0;
  background: #fff;
  z-index: 10000;         /* above everything */
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  isolation: isolate;     /* creates its own stacking context */
}

/* Make sure page content can never sit "above" the header */
main, .section, .price-cards, .price-card, .service-category, .review-card {
  position: relative;
  z-index: 0;             /* explicitly below header */
}