/* ============================================================
   Elegant Nails & Spa — Soft Luxury
   Warm off-white · soft blush · muted gold · deep charcoal
   Hand-written, no framework.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
img, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

:root{
  --cream:    #F5EFE6;   /* warm off-white — main ground */
  --cream-2:  #EFE5D8;   /* deeper warm tint */
  --blush:    #EEDAD4;   /* soft blush */
  --blush-sf: #F5E7E1;
  --gold:     #A9855A;   /* muted gold */
  --gold-lt:  #C7A876;
  --gold-pale:#E4D2AE;
  --charcoal: #2B2623;   /* deep soft charcoal */
  --charcoal2:#3B3530;
  --ink:      #35302C;   /* warm body text */
  --ink-soft: #766C63;
  --berry:    #7C2A46;   /* brand accent — CTAs, sparingly */
  --berry-dk: #611F36;
  --line:     color-mix(in srgb, var(--gold) 42%, transparent);

  --display: "Fraunces", "Times New Roman", serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --fs-eyebrow:.72rem;
  --fs-h1: clamp(2.7rem, 1.5rem + 5.2vw, 5rem);
  --fs-h2: clamp(1.95rem, 1.35rem + 2.6vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.55rem);
  --fs-lead: clamp(1.04rem, .98rem + .35vw, 1.2rem);

  --edge: clamp(1.2rem, 5vw, 4.5rem);
  --maxw: 1200px;
  --radius: 4px;              /* restrained, architectural */
  --radius-lg: 8px;
  --shadow: 0 30px 70px -40px rgba(43,38,35,.5);
  --header-h: 82px;
}
@media (min-width:960px){ :root{ --header-h: 98px; } }

body{
  font-family: var(--body); color: var(--ink);
  /* soft mesh gradient — ambient "salon lighting", blurred & faded */
  background-color: #FBF4EF;
  background-image:
    radial-gradient(at 8% 6%,  rgba(244,199,213,.72) 0, transparent 42%),
    radial-gradient(at 92% 4%, rgba(233,206,166,.62) 0, transparent 42%),
    radial-gradient(at 72% 32%, rgba(240,208,224,.55) 0, transparent 46%),
    radial-gradient(at 28% 48%, rgba(245,206,188,.45) 0, transparent 46%),
    radial-gradient(at 10% 78%, rgba(240,195,206,.58) 0, transparent 46%),
    radial-gradient(at 96% 80%, rgba(232,212,176,.55) 0, transparent 44%),
    radial-gradient(at 50% 102%, rgba(244,202,215,.5) 0, transparent 48%);
  background-attachment: fixed;
  line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* fine film grain for tactile, printed depth */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ body{ background-attachment: scroll; } }
.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--edge); }

.display{ font-family: var(--display); font-optical-sizing:auto; font-weight:400; line-height:1.06; letter-spacing:-.005em; }
.italic{ font-style: italic; }
.eyebrow{
  font-size: var(--fs-eyebrow); font-weight:600; letter-spacing:.36em; text-transform:uppercase;
  color: var(--gold); display:inline-flex; align-items:center; gap:.75rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background: currentColor; opacity:.8; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:34px; height:1px; background: currentColor; opacity:.8; }
.lead{ font-size: var(--fs-lead); color: var(--ink-soft); font-weight:300; }
.muted{ color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  --_bg: var(--berry); --_fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding: 1rem 2rem; border-radius: 999px; font-weight:600; font-size:.94rem; letter-spacing:.01em;
  background: var(--_bg); color: var(--_fg); border:1px solid transparent; cursor:pointer;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, background .3s, color .3s, border-color .3s;
  box-shadow: 0 16px 34px -18px rgba(124,42,70,.65);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(124,42,70,.7); }
.btn--lg{ padding:1.1rem 2.3rem; font-size:1rem; }
.btn--ghost{
  background:transparent; color: var(--charcoal); border-color: var(--line); box-shadow:none;
}
.btn--ghost:hover{ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); box-shadow:none; }
.on-media .btn--ghost{ color:#fff; border-color: rgba(255,255,255,.5); }
.on-media .btn--ghost:hover{ background:#fff; color: var(--charcoal); border-color:#fff; }
.textlink{ font-weight:600; color: var(--charcoal); display:inline-flex; align-items:center; gap:.4rem; border-bottom:1px solid var(--line); padding-bottom:2px; }
.textlink:hover{ color: var(--gold); border-color: var(--gold); }
.on-media .textlink{ color:#fff; border-color: rgba(255,255,255,.55); }
.link-underline{ font-weight:600; color: var(--gold); border-bottom:1px solid; }

/* ---------- Header ---------- */
.site-header{ position: sticky; top:0; z-index:60; transition: background .35s, box-shadow .35s; }
.site-header.on-hero{ position: fixed; left:0; right:0; }
.site-header nav{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h); }
.brand img{ height:56px; width:auto; display:block; }
@media (min-width:960px){ .brand img{ height:64px; } }
.brand .b-berry{ display:block; } .brand .b-white{ display:none; }
.site-header.on-hero .brand .b-berry{ display:none; } .site-header.on-hero .brand .b-white{ display:block; }
.nav-links{ display:none; gap:2.3rem; font-weight:500; font-size:.92rem; letter-spacing:.01em; }
.nav-links a{ position:relative; color: var(--ink); padding:.2rem 0; }
.site-header.on-hero .nav-links a{ color: #fff; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background: var(--gold); transition:width .3s; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:none; align-items:center; gap:1.3rem; }
.nav-phone{ font-weight:600; font-size:.9rem; color: var(--charcoal); }
.site-header.on-hero .nav-phone{ color:#fff; }
.site-header.scrolled{ background: var(--cream); box-shadow: 0 1px 0 var(--line), 0 10px 30px -26px rgba(43,38,35,.6); }
.site-header.scrolled.on-hero{ position: fixed; }
.site-header.scrolled .brand .b-berry{ display:block; } .site-header.scrolled .brand .b-white{ display:none; }
.site-header.scrolled .nav-links a, .site-header.scrolled .nav-phone{ color: var(--ink); }

.menu-btn{ display:inline-flex; background:none; border:0; padding:.5rem; cursor:pointer; color: var(--charcoal); }
.site-header.on-hero:not(.scrolled) .menu-btn{ color:#fff; }
.menu-btn svg{ width:26px; height:26px; display:block; }
.menu-btn svg[hidden]{ display:none; }
.mobile-menu{ display:none; }
.mobile-menu.open{ display:block; border-top:1px solid var(--line); background: var(--cream); box-shadow:0 14px 26px -20px rgba(43,38,35,.6); }
.mobile-menu .inner{ padding:.4rem var(--edge) 1.4rem; display:flex; flex-direction:column; }
.mobile-menu a.m-link{ padding:.95rem 0; border-bottom:1px solid var(--cream-2); font-weight:500; }
.mobile-menu .m-actions{ display:flex; gap:.7rem; margin-top:1.1rem; }
.mobile-menu .m-actions .btn{ flex:1; }
@media (min-width:960px){ .nav-links, .nav-cta{ display:flex; } .menu-btn{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height: 92svh; display:flex; align-items:center;
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ /* warm berry/plum wash — reads pink, legible + atmospheric */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(74,22,42,.82) 0%, rgba(92,28,51,.52) 48%, rgba(92,28,51,.15) 100%),
    linear-gradient(0deg, rgba(48,18,30,.55) 0%, transparent 42%);
}
.hero-inner{ padding-block: clamp(7rem,16vh,11rem) clamp(3rem,8vh,5rem); max-width: 40rem; }
.hero .pill{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); padding:.42rem .95rem; border-radius:999px; margin-bottom:1.2rem; backdrop-filter:blur(3px); }
.hero .pill::before{ content:"✦"; color: var(--gold-lt); }
.hero .eyebrow{ color: var(--gold-lt); }
.hero h1{ font-size: var(--fs-h1); margin:1rem 0 1.1rem; font-weight:400; text-wrap:balance; }
.hero h1 em{ font-style:italic; color: var(--gold-pale); }
.hero .sub{ font-size: var(--fs-lead); color: rgba(255,255,255,.9); font-weight:300; max-width: 34ch; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.3rem; margin-top: 2.2rem; }
.hero-proof{ display:flex; align-items:center; gap:.7rem; margin-top:2rem; font-size:.84rem; color: rgba(255,255,255,.85); }
.stars{ color: var(--gold-lt); letter-spacing:.1em; }
.scroll-cue{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:1; color:rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-cue::after{ content:""; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent); }

/* ---------- Section scaffolding ---------- */
.section{ padding-block: clamp(3.6rem, 8vw, 7rem); position:relative; }
.section .wrap{ position:relative; z-index:1; }
.section.tint{ background: rgba(255,251,246,.42); }
/* delicate gold blossom accents — a nod to Apple Blossom, kept faint */
#services::before, #reviews::after{
  content:""; position:absolute; width:210px; height:210px; z-index:0; pointer-events:none; opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23B0895A' stroke-width='1.3'%3E%3Ccircle cx='50' cy='50' r='5.5'/%3E%3Cellipse cx='50' cy='27' rx='9' ry='21'/%3E%3Cellipse cx='50' cy='27' rx='9' ry='21' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='9' ry='21' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='9' ry='21' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='9' ry='21' transform='rotate(288 50 50)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
#services::before{ top:2.4rem; right:-34px; transform:rotate(14deg); }
#reviews::after{ bottom:1.5rem; left:-40px; transform:rotate(-18deg); }
.section.charcoal{ background: var(--charcoal); color: var(--cream); }
.section.charcoal .section-head h2, .section.charcoal h2{ color:#fff; }
.section.charcoal .lead, .section.charcoal p{ color: rgba(245,239,230,.8); }
.section-head{ max-width: 46rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: var(--fs-h2); color: var(--charcoal); margin:.7rem 0 .8rem; font-weight:400; text-wrap:balance; }
.section-head p{ font-size: var(--fs-lead); font-weight:300; }

/* ---------- Services ---------- */
.rituals{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.5vw,1.1rem); margin-top:2.8rem; }
.ritual{ position:relative; background:#FBF7F0; border:1px solid var(--line); border-radius: var(--radius-lg);
  display:flex; flex-direction:column; padding:1.4rem 1.3rem 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ritual:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.ritual.feat{ background: linear-gradient(180deg, var(--blush-sf), #FBF7F0); border-color: color-mix(in srgb, var(--gold) 62%, transparent); }
.ritual .badge{ align-self:flex-start; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color: var(--charcoal); background: var(--gold-pale); padding:.3rem .55rem; border-radius:2px; font-weight:600; margin-bottom:.9rem; }
.ritual .rname{ font-family:var(--display); font-size:1.2rem; color: var(--charcoal); display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--line); }
.ritual .rname .rp{ color: var(--berry); font-weight:600; white-space:nowrap; font-family:var(--body); font-size:1.02rem; }
.ritual .rdesc{ font-size:.82rem; line-height:1.55; color: var(--ink-soft); font-weight:300; margin-top:.75rem; }

.menu-wrap{ display:grid; gap: clamp(2rem,4vw,3.5rem); margin-top:3rem; grid-template-columns:1fr; }
.menu-col h3{ font-family: var(--display); font-weight:400; font-size:1.4rem; color: var(--charcoal); display:flex; align-items:baseline; gap:.7rem; padding-bottom:1rem; margin-bottom:.6rem; border-bottom:1px solid var(--line); }
.menu-col h3 .n{ font-size:.72rem; font-family:var(--body); letter-spacing:.2em; color: var(--gold); font-weight:700; }
.menu-col h3 + h3{ margin-top:2.4rem; }
.menu-list{ list-style:none; padding:0; }
.menu-list li{ display:flex; align-items:baseline; gap:.7rem; padding:.6rem 0; }
.menu-list li .name{ font-weight:500; color: var(--ink); }
.menu-list li .desc{ font-size:.8rem; color: var(--ink-soft); font-weight:300; }
.menu-list li .dots{ flex:1; border-bottom:1px dotted color-mix(in srgb, var(--charcoal) 25%, transparent); transform:translateY(-4px); min-width:1.5rem; }
.menu-list li .price{ font-weight:600; color: var(--charcoal); white-space:nowrap; font-variant-numeric:tabular-nums; }
.menu-list li .price .fr{ font-family:var(--display); font-style:italic; font-weight:400; font-size:.82em; color: var(--ink-soft); margin-right:.15em; }
.menu-note{
  max-width: 640px; margin: 2.8rem auto 0; text-align:center;
  font-size:.95rem; line-height:1.6; color: var(--charcoal); font-weight:400;
  background: rgba(255,251,246,.8); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.5rem; box-shadow: 0 18px 40px -34px rgba(43,38,35,.5);
}
.menu-note::before{ content:"✦"; color: var(--gold); margin-right:.5rem; }
@media (min-width:820px){ .menu-wrap{ grid-template-columns:1fr 1fr; } .ritual .rname{ font-size:1.25rem; } }
@media (min-width:1080px){ .rituals{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Gallery (the star) ---------- */
.gallery-grid{ margin-top:3rem; display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem,1.4vw,1rem); }
.gtile{ position:relative; overflow:hidden; border-radius: var(--radius-lg); }
.gtile img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition: transform .6s ease; }
.gtile.tall img{ aspect-ratio:3/4; }
.gtile.feature{ grid-column: span 2; }
.gtile.feature img{ aspect-ratio:4/3; }
.gtile:hover img{ transform: scale(1.06); }
.gallery-foot{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:2.4rem; text-align:center; }
.gallery-foot .ig{ font-size:.86rem; color: var(--ink-soft); }
@media (min-width:720px){
  .gallery-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .gtile.feature{ grid-column: span 2; grid-row: span 2; }
  .gtile.feature img{ aspect-ratio:1/1; height:100%; }
  .gtile img{ aspect-ratio:1/1; }
}

/* ---------- Reviews ---------- */
.reviews{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin:2.8rem auto 0; max-width:860px; }
.review{ background: var(--cream); border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.7rem 1.6rem; box-shadow: 0 24px 50px -40px rgba(43,38,35,.5); }
.section.tint .review{ background:#FBF7F0; }
.review .rstars{ color: var(--gold); letter-spacing:.12em; font-size:.9rem; }
.review .quote{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.08rem; line-height:1.5; color: var(--charcoal); margin:.9rem 0 1.1rem; }
.review .who{ display:flex; align-items:center; gap:.7rem; }
.review .av{ width:38px; height:38px; border-radius:999px; background: var(--blush); color: var(--berry); display:grid; place-items:center; font-family:var(--display); font-size:1rem; flex:none; }
.review .nm{ font-weight:600; font-size:.9rem; color: var(--ink); }
.review .src{ font-size:.75rem; color: var(--ink-soft); }
@media (min-width:640px){ .reviews{ grid-template-columns:1fr 1fr; } }

/* ---------- Experience split ---------- */
.split{ display:grid; gap: clamp(2.2rem,5vw,4rem); align-items:center; grid-template-columns:1fr; }
.split .media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.feature-list{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:2.2rem; }
.feature{ display:flex; gap:1rem; }
.feature .fi{ font-family:var(--display); font-style:italic; font-size:1.4rem; color: var(--gold); line-height:1; width:1.6rem; flex:none; }
.feature h4{ font-size:1rem; font-weight:600; color: var(--charcoal); }
.feature p{ font-size:.87rem; color: var(--ink-soft); font-weight:300; margin-top:.15rem; }
.section.charcoal .feature h4{ color:#fff; }
.section.charcoal .feature p{ color: rgba(245,239,230,.72); }
@media (min-width:880px){ .split{ grid-template-columns:1fr 1fr; } .split .media img{ aspect-ratio:4/5; } .split.reverse .media{ order:2; } .feature-list{ grid-template-columns:1fr 1fr; } }

/* ---------- Booking band ---------- */
.cta-band{ text-align:center; }
.cta-band .hero-actions{ justify-content:center; }
.cta-band .hours{ margin-top:1.5rem; font-size:.84rem; color: rgba(245,239,230,.7); }

/* ---------- FAQ ---------- */
.faq{ max-width: 46rem; margin-inline:auto; margin-top:2.6rem; display:flex; flex-direction:column; gap:.6rem; }
.faq details{ border-bottom:1px solid var(--line); padding:.3rem 0; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.05rem 0; font-weight:600; color: var(--charcoal); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ color: var(--gold); font-size:1.4rem; line-height:1; transition:transform .3s; flex:none; }
.faq details[open] summary .plus{ transform: rotate(45deg); }
.faq details p{ padding-bottom:1.15rem; color: var(--ink-soft); font-size:.93rem; font-weight:300; }
.faq details p a{ color: var(--gold); border-bottom:1px solid; }

/* ---------- Visit / contact ---------- */
.contact-grid{ display:grid; gap: clamp(2rem,5vw,3rem); grid-template-columns:1fr; margin-top:2.6rem; }
.info-row{ display:flex; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--cream-2); }
.info-row .k{ font-family:var(--display); font-style:italic; color: var(--gold); width:1.5rem; flex:none; font-size:1.2rem; }
.info-row .lbl{ font-weight:600; color: var(--charcoal); font-size:.92rem; }
.info-row .val{ color: var(--ink-soft); font-size:.92rem; }
.info-row .val a{ color: var(--charcoal); border-bottom:1px solid var(--line); }
.contact-form{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.85rem; }
.contact-form label{ font-size:.8rem; font-weight:600; color: var(--charcoal); }
.contact-form input, .contact-form textarea{ width:100%; border:1px solid var(--line); background: var(--cream); border-radius: var(--radius); padding:.9rem 1rem; font-size:.92rem; transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--gold); box-shadow:0 0 0 3px rgba(169,133,90,.16); }
.form-row{ display:grid; gap:.85rem; grid-template-columns:1fr; }
.hp{ position:absolute; left:-9999px; }
.form-ok{ background: var(--charcoal); color:#fff; padding:1rem 1.2rem; border-radius: var(--radius); font-size:.9rem; }
.form-ok a{ color:#fff; text-decoration:underline; }
.map-frame{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); min-height:320px; border:1px solid var(--line); height:100%; }
.map-frame iframe{ width:100%; height:100%; min-height:320px; border:0; filter: grayscale(.2) saturate(.9); }
.map-frame .dir{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background: var(--cream); color: var(--charcoal); padding:.6rem 1.2rem; border-radius:999px; font-weight:600; font-size:.85rem; box-shadow: var(--shadow); white-space:nowrap; }
@media (min-width:520px){ .form-row{ grid-template-columns:1fr 1fr; } }
@media (min-width:920px){ .contact-grid{ grid-template-columns:1.05fr .95fr; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--charcoal); color: rgba(245,239,230,.82); padding-top: clamp(3rem,6vw,4.5rem); padding-bottom:2rem; }
.footer-grid{ display:grid; gap:2.4rem; grid-template-columns:1fr; }
.footer-grid img.flogo{ height:52px; width:auto; margin-bottom:1.1rem; }
.footer-about{ max-width:34ch; font-size:.9rem; color: rgba(245,239,230,.66); font-weight:300; }
.footer-socials{ display:flex; gap:.6rem; margin-top:1.3rem; }
.footer-socials a{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(245,239,230,.2); transition: background .25s, border-color .25s; }
.footer-socials a:hover{ background: var(--gold); border-color: var(--gold); }
.footer-socials svg{ width:18px; height:18px; }
.site-footer h5{ color:#fff; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:600; }
.footer-nav{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.9rem; }
.footer-nav a{ color: rgba(245,239,230,.72); }
.footer-nav a:hover{ color:#fff; }
.footer-addr{ font-style:normal; font-size:.9rem; color: rgba(245,239,230,.72); line-height:1.95; }
.footer-addr a:hover{ color:#fff; }
.footer-bottom{ margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid rgba(245,239,230,.14); font-size:.76rem; color: rgba(245,239,230,.5); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; } }

/* Sticky mobile book */
.mobile-book{ position:fixed; left:14px; right:14px; bottom:14px; z-index:50; display:flex; }
.mobile-book .btn{ flex:1; box-shadow: 0 18px 36px -14px rgba(124,42,70,.75); }
@media (min-width:960px){ .mobile-book{ display:none; } }

/* ---------- Solid header (sub-pages) ---------- */
.site-header.solid{ background: var(--cream); box-shadow: 0 1px 0 var(--line), 0 10px 30px -26px rgba(43,38,35,.5); }
.site-header.solid .brand .b-berry{ display:block; } .site-header.solid .brand .b-white{ display:none; }
.site-header.solid .nav-links a, .site-header.solid .nav-phone{ color: var(--ink); }
.site-header.solid .menu-btn{ color: var(--charcoal); }

/* ---------- Services overview cards (homepage) ---------- */
.svc-overview{ display:grid; grid-template-columns:1fr; gap: clamp(.8rem,1.6vw,1.1rem); margin-top:2.8rem; }
.svc-card{ display:flex; flex-direction:column; padding:1.6rem 1.5rem; background:#FBF7F0; border:1px solid var(--line); border-radius: var(--radius-lg); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.svc-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.svc-card .sc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.svc-card .sc-name{ font-family:var(--display); font-size:1.32rem; color: var(--charcoal); }
.svc-card .sc-from{ font-size:.82rem; color: var(--gold); font-weight:600; white-space:nowrap; }
.svc-card .sc-desc{ font-size:.87rem; color: var(--ink-soft); font-weight:300; margin-top:.5rem; }
.svc-card .sc-more{ margin-top:1rem; font-size:.8rem; font-weight:600; letter-spacing:.02em; color: var(--berry); }
@media (min-width:680px){ .svc-overview{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .svc-overview{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Sub-page hero + breadcrumb ---------- */
.page-hero{ padding: calc(var(--header-h) + clamp(2.4rem,6vw,4.5rem)) 0 clamp(2rem,5vw,3.5rem); position:relative; }
.page-hero .wrap{ max-width: 52rem; }
.breadcrumb{ font-size:.78rem; color: var(--ink-soft); margin-bottom:1.2rem; letter-spacing:.02em; }
.breadcrumb a{ color: var(--gold); } .breadcrumb a:hover{ color: var(--charcoal); }
.page-hero h1{ font-family:var(--display); font-weight:400; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); color: var(--charcoal); line-height:1.05; margin:.5rem 0 .9rem; }
.page-hero .intro{ font-size: var(--fs-lead); color: var(--ink-soft); font-weight:300; max-width:40ch; }
.page-hero .hero-actions{ margin-top:2rem; }

/* menu with descriptions (sub-pages) */
.menu-list li.rich{ flex-direction:column; align-items:stretch; gap:.15rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.menu-list li.rich .top{ display:flex; align-items:baseline; gap:.7rem; }
.menu-list li.rich .rdesc{ font-size:.84rem; color: var(--ink-soft); font-weight:300; margin-top:.2rem; }

/* other services cross-links */
.other-svcs{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem; justify-content:center; }
.other-svcs a{ font-size:.86rem; font-weight:500; color: var(--charcoal); border:1px solid var(--line); border-radius:999px; padding:.55rem 1.1rem; transition: background .25s, color .25s, border-color .25s; }
.other-svcs a:hover{ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* Reveal */
.js .reveal{ opacity:0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ transition:none; opacity:1; transform:none; }
  .hero-media video{ display:none; }
  .hero-media .poster{ display:block !important; }
  .scroll-cue{ display:none; }
}