/* ===================================================================
   PRESENCE STUDIO — Site Template
   Design direction: "Ivory & Gold" — a warm ivory ground with true
   black type and a soft champagne-gold accent, drawn directly from
   the client's own packaging photography (cream marble, black ribbon,
   warm light). One dark contrast band (the signage strip) keeps the
   page from reading as flat or generic.
   Every color/type value below is a CSS variable — reskin a client by
   editing this block only, no other file needs to change.
   =================================================================== */

:root {
  /* ---- Palette (edit per client) ---- */
  --cream:      #F7F1E6;   /* primary background — warm ivory */
  --cream-soft: #EFE7D8;   /* alt section background */
  --card:       #FBF8F1;   /* card / elevated surface */
  --ink:        #141414;   /* primary text — true black, not brown-black */
  --ink-soft:   #4A463E;   /* secondary text */
  --gold:       #B08D3E;   /* signature accent — champagne gold */
  --gold-deep:  #8C6E30;
  --line:       rgba(20,20,20,0.10);
  --paper:      #FBF8F1;   /* text-on-dark, used only in the signage band */

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-script:  "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;

  /* ---- Layout ---- */
  --wrap: 1120px;
  --radius: 3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0 0 0.4em; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 0.5em;
  letter-spacing: 0.01em;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: #000; box-shadow: 0 10px 24px rgba(20,20,20,0.18); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,241,230,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; }
.brand-logo { display: block; height: 48px; width: 48px; object-fit: contain; }
.footer-logo { display: block; height: 76px; width: 76px; object-fit: contain; margin-bottom: 14px; }
.nav { display: flex; gap: 30px; }
.nav a { font-size: 0.88rem; color: var(--ink-soft); position: relative; padding-bottom: 2px; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width 0.25s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav-cta { padding: 0.55em 1.4em; font-size: 0.82rem; }
@media (max-width: 760px) { .nav { display: none; } }

/* ---- Hero ---- */
.hero { padding: 70px 0 0; position: relative; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  padding-bottom: 70px;
}
.hero-sub { font-size: 1.08rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 1.6em; flex-wrap: wrap; }
.hero-visual {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -20px rgba(20,20,20,0.25);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 340px; margin: 0 auto; }
}

/* Signature element: a dark contrast band — the one deliberately bold
   moment on an otherwise light, quiet page. Feed it hours/status. */
.signage {
  background: var(--ink);
  overflow: hidden;
  white-space: nowrap;
}
.signage-track {
  display: inline-flex;
  gap: 3.5em;
  padding: 13px 0;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  animation: scroll-left 28s linear infinite;
}
.signage-track span { display: inline-flex; align-items: center; gap: 0.6em; }
.signage-track span::before { content: "•"; color: rgba(176,141,62,0.5); }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .signage-track { animation: none; }
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Sections ---- */
.section { padding: 90px 0; }
.section-alt { background: var(--cream-soft); }
.section-sub { max-width: 56ch; }

/* ---- Services ---- */
.services-list { margin-top: 1.6em; border-top: 1px solid var(--line); }
.service-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
  gap: 20px;
  transition: padding-left 0.25s ease, background 0.25s ease;
  border-radius: var(--radius);
}
.service-row:hover { padding-left: 14px; background: rgba(176,141,62,0.06); }
.service-name { font-family: var(--font-display); font-size: 1.15rem; }
.service-meta { color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.2em; opacity: 0.75; }
.service-price { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-deep); white-space: nowrap; }

/* ---- Booking embed ---- */
.booking-embed-slot {
  margin-top: 1.6em;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.embed-placeholder { color: var(--ink-soft); font-size: 0.9rem; margin: 0; opacity: 0.6; }

/* ---- Gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 1.6em;
}
.gallery-grid div {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--cream-soft) 0%, #E4D9C3 100%);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.gallery-grid div::before {
  content: "Photo coming soon";
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.32);
  text-align: center;
  padding: 0 20px;
}
.gallery-grid div:hover { transform: translateY(-4px); border-color: var(--gold); }
.gallery-grid .gallery-photo { background: none; }
.gallery-grid .gallery-photo::before { content: none; }
.gallery-grid .gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ig-link {
  display: inline-block; margin-top: 1.6em;
  font-size: 0.9rem; color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
}

@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Testimonials ---- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 1.8em;
}
.testimonial-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(20,20,20,0.03);
}
.testimonial-card .stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 0.1em; margin-bottom: 14px; }
.testimonial-quote { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5; color: var(--ink); flex-grow: 1; margin-bottom: 18px; }
.testimonial-attribution { display: flex; flex-direction: column; padding-top: 14px; border-top: 1px solid var(--line); }
.testimonial-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.testimonial-role { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
.hours-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
.hours-card ul { list-style: none; margin: 0; padding: 0; }
.hours-card li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); }
.hours-card li:last-child { border-bottom: none; }
@media (max-width: 780px) { .about-grid { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.site-footer { padding: 70px 0 40px; background: var(--cream-soft); border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px; }
.footer-cta { text-align: right; }
.footer-note { font-size: 0.75rem; color: var(--ink-soft); opacity: 0.6; margin-top: 1em; }
@media (max-width: 600px) { .footer-inner { flex-direction: column; align-items: flex-start; } .footer-cta { text-align: left; } }

/* ---- Focus visibility (accessibility floor) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}