/* =========================================================
   ATELIER — Interior Design Studio Template
   Design system: tokens, base, layout, components, pages
========================================================= */

:root{
  /* Palette */
  --cream-50:#fdfcfa;
  --cream-100:#faf7f2;
  --cream-200:#f3ece1;
  --cream-300:#e9dcc8;

  --charcoal-900:#1a1712;
  --charcoal-800:#26221c;
  --charcoal-700:#332f28;
  --charcoal-600:#454239;
  --charcoal-500:#5d5952;
  --charcoal-400:#8a8681;
  --charcoal-100:#e7e5e3;

  --clay-700:#7a4530;
  --clay-600:#985637;
  --clay-500:#b56a44;
  --clay-400:#c9835e;
  --clay-300:#dba98d;
  --clay-100:#f2ddd2;
  --clay-50:#faf2ee;

  --sage-600:#5a6849;
  --sage-500:#71835c;
  --sage-400:#8fa178;
  --sage-300:#b3c1a2;
  --sage-100:#e1e7d9;
  --sage-50:#f2f4ef;

  --bg: var(--cream-100);
  --surface: #ffffff;
  --ink: var(--charcoal-800);
  --ink-soft: var(--charcoal-500);
  --accent: var(--clay-500);
  --accent-ink: var(--clay-700);
  --border: var(--cream-300);

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 28px;
  --shadow-card: 0 4px 24px -6px rgba(26,23,18,.10);
  --shadow-soft: 0 20px 60px -20px rgba(26,23,18,.25);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; background:var(--cream-200); }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--charcoal-900); letter-spacing:-.01em; }
p{ margin:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent-ink);
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--accent);
}
.section{ padding:112px 0; }
@media (max-width:900px){ .section{ padding:80px 0; } }
@media (max-width:560px){ .section{ padding:64px 0; } }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.12; margin-top:14px; }
.section-head p{ margin-top:18px; color:var(--ink-soft); font-size:1.05rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; font-weight:600; font-size:.92rem;
  border:1px solid transparent; transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--charcoal-900); color:var(--cream-100); }
.btn-primary:hover{ background:var(--clay-600); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.btn-outline{ background:transparent; color:var(--charcoal-900); border-color:var(--charcoal-900); }
.btn-outline:hover{ background:var(--charcoal-900); color:var(--cream-100); transform:translateY(-2px); }
.btn-light{ background:var(--cream-100); color:var(--charcoal-900); }
.btn-light:hover{ background:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--charcoal-900); padding:15px 6px; }
.btn-ghost:hover{ color:var(--accent-ink); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn svg{ width:16px; height:16px; }

.tag{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:100px;
  background:var(--sage-100); color:var(--sage-600); font-size:.75rem; font-weight:600;
  letter-spacing:.04em;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="left"].in{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="right"].in{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].in{ transform:scale(1); }

/* ---------- Top notice bar ---------- */
.notice-bar{
  background:var(--charcoal-900); color:var(--cream-200);
  text-align:center; font-size:.8rem; letter-spacing:.04em; padding:9px 16px;
}
.notice-bar a{ color:var(--clay-300); font-weight:600; margin-left:6px; }

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background:var(--cream-100);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
/* Note: intentionally no backdrop-filter here — it would create a CSS
   containing block on this element, which breaks position:fixed on the
   mobile .nav-links panel nested inside it (fixed insets would resolve
   against the 84px-tall navbar instead of the viewport). */
.navbar.scrolled{ border-color:var(--border); box-shadow:0 2px 20px -10px rgba(26,23,18,.15); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; }
.brand{
  position:relative; z-index:110;
  display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.4rem; font-weight:600; letter-spacing:.01em;
}
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--charcoal-900);
  display:flex; align-items:center; justify-content:center; color:var(--cream-100);
  font-family:var(--font-display); font-size:1rem;
}
/* Duplicate brand shown only inside the mobile drawer, so the logo
   slides in together with the link list instead of sitting pinned and
   static above it (the header's own .brand stays fixed above the
   drawer as the persistent, non-sliding control alongside the close
   toggle, and is hidden while the drawer is open — see .nav-drawer-open
   below — so the two don't show at once). */
.drawer-brand{ display:none; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:.92rem; font-weight:500; color:var(--charcoal-600);
  position:relative; padding:4px 0; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--charcoal-900); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--charcoal-900); }
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--charcoal-900); }
/* The mobile-menu "Book a Consultation" link is also a .btn.btn-primary —
   the broad .nav-links a color/underline rules above would otherwise
   override its white text and add a stray underline under the pill. */
.nav-links a.btn{ color:var(--cream-100); }
.nav-links a.btn:hover{ color:var(--cream-100); }
.nav-links a.btn::after{ display:none; }
.nav-cta{ position:relative; z-index:110; display:flex; align-items:center; gap:14px; }
.nav-phone{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color:var(--charcoal-700); }
.nav-phone svg{ width:16px; height:16px; color:var(--accent-ink); }
.nav-toggle{
  position:relative; z-index:110;
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border); background:var(--surface);
}
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--charcoal-900); position:relative; transition:background .2s; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--charcoal-900); transition:transform .3s, top .3s;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
/* Open state: the toggle morphs hamburger -> X so it also serves as the
   drawer's close control, and it keeps its z-index above .nav-links
   (below) so it stays visible/clickable once the drawer covers the
   full screen instead of disappearing behind it. */
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }
.nav-mobile-cta{ display:none; }

@media (max-width:960px){
  .nav-links{
    position:fixed; inset:0; z-index:105; background:var(--cream-100);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:calc(84px + env(safe-area-inset-top,0px) + 24px) 28px 32px;
    gap:0; transform:translateX(100%);
    overflow-y:auto;
    /* visibility (not just the off-screen transform) keeps this panel from
       ever being able to widen the page's scrollable area on mobile
       Safari, which can treat a transformed position:fixed element as
       contributing to document scroll even while it's clipped and
       pushed off-screen — the classic cause of "phantom" horizontal
       scroll on iOS that a plain overflow-x:hidden doesn't always stop.
       It's switched instantly on open (delay:0s) so the panel is there
       to animate in, but delayed on close (delay:.4s, matching the
       transform's own duration) so it stays visible for the whole
       slide-out instead of vanishing the instant .open is removed. */
    visibility:hidden; pointer-events:none;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
  }
  .nav-links.open{
    transform:translateX(0); visibility:visible; pointer-events:auto;
    transition:transform .4s var(--ease), visibility 0s linear;
  }
  .nav-links a{ padding:16px 0; border-bottom:1px solid var(--border); font-size:1.1rem; }
  /* The "Book a Consultation" pill in .nav-cta was competing with the
     brand and the toggle for the same narrow row, crowding the toggle
     to the edge (and clipping it on small phones) — the drawer already
     has its own "Book a Consultation" CTA (.nav-mobile-cta), so drop
     the top-bar one entirely on mobile instead of squeezing it in. */
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links .drawer-brand{
    display:flex; align-items:center; gap:10px; font-family:var(--font-display);
    font-size:1.3rem; font-weight:600; letter-spacing:.01em; color:var(--charcoal-900);
    padding:0 0 24px; margin-bottom:12px; border-bottom:1px solid var(--border);
  }
  .nav-links .nav-mobile-cta{ display:inline-flex; margin-top:20px; }
  /* Hide the header's static brand while the drawer is open so it
     isn't shown twice at once — the .drawer-brand copy above takes
     over and slides in with the rest of the panel. */
  body.nav-drawer-open .brand{ opacity:0; pointer-events:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:56px 0 100px; overflow:hidden; background:var(--cream-100); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:68px; align-items:center; }
.hero-copy h1{
  color:var(--charcoal-900); font-size:clamp(2.8rem,4.4vw,4.4rem); line-height:1.04;
  margin-top:22px; max-width:620px;
}
.hero-copy h1 em{ font-style:italic; color:var(--accent-ink); }
.hero-sub{ margin-top:24px; max-width:460px; font-size:1.12rem; line-height:1.65; color:var(--ink-soft); }
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap:40px; margin-top:56px; padding-top:32px; border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.hero-stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--charcoal-900); }
.hero-stat span{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.02em; }

.hero-visual{ position:relative; padding:0 20px 52px 0; }
.hero-visual-main{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.hero-visual-main img{ width:100%; height:580px; object-fit:cover; display:block; }
.hero-visual-accent{
  position:absolute; left:-36px; bottom:0; width:48%; border-radius:var(--radius);
  overflow:hidden; border:6px solid var(--cream-100); box-shadow:var(--shadow-card);
}
.hero-visual-accent img{ width:100%; height:190px; object-fit:cover; display:block; }
.hero-visual .badge-ring{
  position:absolute; top:-22px; right:12px; width:104px; height:104px; border-radius:50%;
  background:var(--clay-500); color:#fff; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-display); font-size:.8rem; line-height:1.3; padding:10px;
  box-shadow:var(--shadow-soft);
}
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:56px; }
  .hero-copy h1, .hero-sub{ max-width:100%; }
  .hero-visual{ padding:0 40px 60px 0; max-width:560px; }
}
@media (max-width:640px){
  .hero{ padding:36px 0 72px; }
  .hero-grid{ gap:48px; }
  .hero-copy h1{ margin-top:16px; font-size:clamp(2.2rem,8.5vw,2.8rem); line-height:1.08; }
  .hero-sub{ margin-top:16px; font-size:1rem; }
  .hero-actions{ margin-top:26px; gap:12px; }
  .hero-stats{ margin-top:32px; padding-top:22px; gap:16px 26px; }
  .hero-stat b{ font-size:1.5rem; }
  .hero-visual{ padding:0 26px 44px 0; }
  .hero-visual-main img{ height:340px; }
  .hero-visual-accent{ left:-14px; width:56%; }
  .hero-visual-accent img{ height:130px; }
  .hero-visual .badge-ring{ width:80px; height:80px; font-size:.68rem; top:-14px; right:-4px; }
}

/* ---------- Marquee strip ---------- */
.marquee{ background:var(--charcoal-900); color:var(--cream-200); overflow:hidden; max-width:100%; padding:20px 0; }
.marquee-track{ display:flex; gap:56px; white-space:nowrap; animation:marquee 32s linear infinite; width:max-content; }
.marquee-track span{ font-family:var(--font-display); font-style:italic; font-size:1.25rem; color:var(--cream-100); display:flex; align-items:center; gap:56px; }
.marquee-track span::after{ content:"✦"; color:var(--clay-400); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Intro / About split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split-media{ position:relative; }
.split-media img{ border-radius:var(--radius-lg); width:100%; height:560px; object-fit:cover; }
.split-media .float-card{
  position:absolute; bottom:-28px; left:-28px; background:var(--surface); border-radius:var(--radius);
  padding:24px 26px; box-shadow:var(--shadow-soft); max-width:250px;
}
@media (max-width:560px){ .split-media .float-card{ left:0; bottom:-20px; padding:18px 20px; } }
.float-card .stars{ color:var(--clay-500); letter-spacing:2px; font-size:.9rem; }
.float-card p{ margin-top:8px; font-size:.9rem; color:var(--ink-soft); }
.split-media .badge-ring{
  position:absolute; top:-24px; right:-24px; width:104px; height:104px; border-radius:50%;
  background:var(--clay-500); color:#fff; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-display); font-size:.8rem; line-height:1.3; padding:10px;
  box-shadow:var(--shadow-soft);
}
@media (max-width:560px){
  .split-media .badge-ring{ top:-16px; right:0; width:88px; height:88px; font-size:.72rem; }
}
.split-body p{ color:var(--ink-soft); font-size:1.05rem; margin-top:18px; }
.check-list{ margin-top:28px; display:grid; gap:14px; }
.check-list li{ display:flex; align-items:center; gap:12px; font-weight:500; }
.check-list svg{ width:20px; height:20px; color:var(--sage-500); flex:none; }
.split-actions{ margin-top:36px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.signature{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--charcoal-800); }

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--surface); border-radius:var(--radius); padding:36px 30px; box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); position:relative; overflow:hidden;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-soft); }
.service-num{ font-family:var(--font-display); font-style:italic; color:var(--clay-300); font-size:1.1rem; }
.service-icon{
  width:52px; height:52px; border-radius:14px; background:var(--sage-50); color:var(--sage-600);
  display:flex; align-items:center; justify-content:center; margin:18px 0 22px;
}
.service-icon svg{ width:24px; height:24px; }
.service-card h3{ font-size:1.3rem; }
.service-card p{ color:var(--ink-soft); margin-top:12px; font-size:.95rem; }
.service-card .price{ margin-top:20px; font-weight:600; color:var(--accent-ink); font-size:.9rem; }
.service-link{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem;
  color:var(--charcoal-900); border-bottom:1px solid var(--charcoal-900); padding-bottom:2px;
}
.service-card.dark{ background:var(--charcoal-900); color:var(--cream-100); }
.service-card.dark h3, .service-card.dark .service-num{ color:var(--cream-100); }
.service-card.dark p{ color:var(--charcoal-100); }
.service-card.dark .service-icon{ background:rgba(255,255,255,.08); color:var(--clay-300); }
.service-card.dark .service-link{ color:#fff; border-color:#fff; }

/* ---------- Process ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--border); }
.process-step{ padding:34px 28px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.process-step:last-child{ border-right:none; }
@media (max-width:900px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }
.process-step .n{ font-family:var(--font-display); font-style:italic; font-size:2.4rem; color:var(--clay-300); }
.process-step h4{ margin-top:14px; font-size:1.15rem; }
.process-step p{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; }

/* ---------- Portfolio ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filter-btn{
  padding:10px 20px; border-radius:100px; border:1px solid var(--border); background:var(--surface);
  font-size:.86rem; font-weight:600; color:var(--ink-soft); transition:all .25s;
}
.filter-btn:hover{ border-color:var(--charcoal-900); color:var(--charcoal-900); }
.filter-btn.active{ background:var(--charcoal-900); color:#fff; border-color:var(--charcoal-900); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:24px; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:4/5;
}
.gallery-item.wide{ aspect-ratio:8/5; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(26,23,18,.78) 0%, rgba(26,23,18,0) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px; opacity:0; transition:opacity .4s;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{ color:var(--clay-300); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.gallery-overlay h4{ color:#fff; font-size:1.2rem; margin-top:6px; }
.gallery-item[hidden]{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(20,17,13,.94); display:none;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{ max-width:1000px; width:100%; }
.lightbox-inner img{ width:100%; max-height:74vh; object-fit:cover; border-radius:12px; }
.lightbox-cap{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px; color:#fff; gap:16px; }
.lightbox-cap h4{ color:#fff; font-size:1.3rem; }
.lightbox-cap p{ color:var(--cream-300); margin-top:4px; font-size:.9rem; }
.lightbox-close, .lightbox-nav{
  position:fixed; top:36px; right:36px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2);
}
.lightbox-nav{ top:50%; transform:translateY(-50%); right:auto; }
.lightbox-nav.prev{ left:24px; }
.lightbox-nav.next{ right:24px; }
@media (max-width:640px){ .lightbox{ padding:20px; } .lightbox-nav{ display:none; } }

/* ---------- Testimonials ---------- */
.testi-wrap{ position:relative; max-width:760px; margin:0 auto; text-align:center; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation:fadeUp .6s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.testi-quote{ font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.5; color:var(--charcoal-800); font-style:italic; }
.testi-person{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:14px; }
.testi-person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testi-person b{ display:block; font-size:.95rem; }
.testi-person span{ display:block; font-size:.82rem; color:var(--ink-soft); }
.testi-dots{ display:flex; justify-content:center; gap:9px; margin-top:36px; }
.testi-dots button{ width:9px; height:9px; border-radius:50%; background:var(--charcoal-100); border:none; padding:0; }
.testi-dots button.active{ background:var(--charcoal-900); width:22px; border-radius:6px; transition:all .3s; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.price-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:42px 34px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; position:relative; border:1px solid var(--border);
}
.price-card.featured{ background:var(--charcoal-900); color:#fff; transform:scale(1.03); box-shadow:var(--shadow-soft); border:none; }
.price-card .badge{
  position:absolute; top:-14px; left:34px; background:var(--clay-500); color:#fff; font-size:.72rem;
  font-weight:700; letter-spacing:.06em; padding:6px 14px; border-radius:100px; text-transform:uppercase;
}
.price-card h3{ font-size:1.4rem; }
.price-card.featured h3{ color:#fff; }
.price-card .amount{ font-family:var(--font-display); font-size:2.6rem; margin-top:18px; }
.price-card .amount span{ font-size:1rem; font-family:var(--font-body); color:var(--ink-soft); font-weight:500; }
.price-card.featured .amount span{ color:var(--charcoal-100); }
.price-card p.desc{ color:var(--ink-soft); margin-top:10px; font-size:.92rem; }
.price-card.featured p.desc{ color:var(--charcoal-100); }
.price-feats{ margin:28px 0 32px; display:grid; gap:13px; flex:1; }
.price-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; }
.price-feats svg{ width:18px; height:18px; color:var(--sage-500); flex:none; margin-top:2px; }
.price-card.featured .price-feats svg{ color:var(--clay-300); }

/* ---------- CTA Banner ---------- */
.cta-banner{
  border-radius:var(--radius-lg); background:var(--charcoal-900); color:#fff;
  padding:72px 60px; display:flex; align-items:center; justify-content:space-between; gap:40px;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(181,106,68,.35), transparent 70%); top:-160px; right:-100px;
}
.cta-banner h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:520px; }
.cta-banner p{ color:var(--cream-200); margin-top:14px; max-width:440px; }
@media (max-width:800px){ .cta-banner{ flex-direction:column; align-items:flex-start; padding:48px 30px; } }

/* ---------- Footer ---------- */
.footer{ background:var(--charcoal-900); color:var(--cream-200); padding-top:88px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer .brand{ color:#fff; }
.footer-about p{ margin-top:16px; color:var(--charcoal-100); font-size:.92rem; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex;
  align-items:center; justify-content:center; transition:all .25s;
}
.footer-social a:hover{ background:var(--clay-500); border-color:var(--clay-500); }
.footer-social svg{ width:16px; height:16px; }
.footer h5{ color:#fff; font-family:var(--font-body); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:20px; }
.footer-links{ display:grid; gap:13px; }
.footer-links a{ color:var(--charcoal-100); font-size:.92rem; transition:color .2s; }
.footer-links a:hover{ color:var(--clay-300); }
.footer-contact li{ display:flex; gap:10px; color:var(--charcoal-100); font-size:.92rem; margin-bottom:14px; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; color:var(--clay-300); flex:none; margin-top:1px; }
.footer-form{ display:flex; gap:8px; margin-top:6px; }
.footer-form input{
  flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:100px;
  padding:12px 18px; color:#fff; font-size:.88rem;
}
.footer-form input::placeholder{ color:var(--charcoal-400); }
.footer-form button{
  width:44px; height:44px; border-radius:50%; background:var(--clay-500); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.8rem; color:var(--charcoal-400); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:var(--charcoal-400); }
.footer-bottom-links{ display:flex; gap:22px; }

/* ---------- Page header (inner pages) ----------
   Same full-bleed-photo-with-gradient approach as the homepage hero,
   just shorter, so inner pages read as consistently "designed" rather
   than a flat dark banner with a barely-visible image behind it. */
.page-header{
  position:relative; padding:230px 0 110px; overflow:hidden; background:var(--charcoal-900);
  min-height:460px; display:flex; align-items:flex-end;
}
.page-header img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--charcoal-900); }
.page-header::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,23,18,.6) 0%, rgba(26,23,18,.52) 45%, rgba(26,23,18,.86) 100%);
}
.page-header .container{ position:relative; z-index:1; }
.page-header .eyebrow{ color:var(--clay-300); }
.page-header .eyebrow::before{ background:var(--clay-300); }
.page-header h1{ color:#fff; font-size:clamp(2.4rem,5vw,3.6rem); margin-top:16px; max-width:700px; }
.page-header p{ color:var(--cream-200); margin-top:16px; max-width:560px; font-size:1.05rem; }
.breadcrumb{ display:flex; gap:8px; align-items:center; margin-top:26px; font-size:.85rem; color:var(--cream-300); }
.breadcrumb a{ color:var(--clay-300); }

/* ---------- Cards: team / values ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{ padding:8px 0; }
.value-card .service-icon{ margin-bottom:20px; }
.value-card h4{ font-size:1.1rem; }
.value-card p{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; }

.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }
.team-card img{ border-radius:var(--radius); height:340px; width:100%; object-fit:cover; }
.team-card h4{ margin-top:18px; font-size:1.1rem; }
.team-card span{ display:block; margin-top:4px; color:var(--accent-ink); font-size:.85rem; font-weight:600; }

.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:640px){ .stat-strip{ grid-template-columns:1fr 1fr; } }
.stat-strip b{ display:block; font-family:var(--font-display); font-size:2.6rem; color:var(--charcoal-900); }
.stat-strip span{ display:block; margin-top:6px; color:var(--ink-soft); font-size:.88rem; }

/* ---------- Forms (contact) ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.84rem; font-weight:600; color:var(--charcoal-700); }
.field .req{ color:var(--clay-500); }
.field input, .field select, .field textarea{
  border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:.95rem; color:var(--ink); transition:border-color .2s, box-shadow .2s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--clay-400); box-shadow:0 0 0 4px var(--clay-50);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-error{ font-size:.78rem; color:#b3413a; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#b3413a; }
.field.invalid .field-error{ display:block; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:6px; }

.contact-info-card{ background:var(--surface); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-card); }
.contact-info-card li{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-info-card li:last-child{ border-bottom:none; }
.contact-info-card .ic{
  width:44px; height:44px; border-radius:12px; background:var(--clay-50); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-card .ic svg{ width:20px; height:20px; }
.contact-info-card b{ display:block; font-size:.95rem; }
.contact-info-card span, .contact-info-card p{ color:var(--ink-soft); font-size:.9rem; margin-top:2px; }
.map-embed{ border-radius:var(--radius-lg); overflow:hidden; height:220px; margin-top:24px; }
.map-embed img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Booking wizard ---------- */
.booking-shell{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:flex-start; }
@media (max-width:960px){ .booking-shell{ grid-template-columns:1fr; } }

.steps-bar{ display:flex; align-items:center; margin-bottom:48px; }
.step-item{ display:flex; align-items:center; gap:12px; flex:1; }
.step-item .dot{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:var(--charcoal-400);
  transition:all .3s; flex:none;
}
.step-item .label{ font-size:.85rem; font-weight:600; color:var(--charcoal-400); transition:color .3s; }
.step-item .bar{ flex:1; height:1px; background:var(--border); margin:0 6px; }
.step-item:last-child .bar{ display:none; }
.step-item.active .dot, .step-item.done .dot{ border-color:var(--charcoal-900); background:var(--charcoal-900); color:#fff; }
.step-item.active .label, .step-item.done .label{ color:var(--charcoal-900); }
.step-item.done .dot{ background:var(--sage-500); border-color:var(--sage-500); }
@media (max-width:640px){ .step-item .label{ display:none; } }

.card-panel{ background:var(--surface); border-radius:var(--radius-lg); padding:44px; box-shadow:var(--shadow-card); }
@media (max-width:560px){ .card-panel{ padding:26px 20px; } }
.booking-step{ display:none; }
.booking-step.active{ display:block; animation:fadeUp .5s var(--ease); }
.booking-step h3{ font-size:1.5rem; }
.booking-step > .hint{ color:var(--ink-soft); margin-top:8px; font-size:.92rem; }

.service-pick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
@media (max-width:560px){ .service-pick-grid{ grid-template-columns:1fr; } }
.pick-card{
  border:1.5px solid var(--border); border-radius:var(--radius); padding:22px; cursor:pointer; transition:all .25s;
  position:relative;
}
.pick-card:hover{ border-color:var(--clay-400); }
.pick-card.selected{ border-color:var(--charcoal-900); background:var(--cream-50); box-shadow:0 0 0 1px var(--charcoal-900); }
.pick-card h4{ font-size:1.02rem; }
.pick-card p{ color:var(--ink-soft); font-size:.85rem; margin-top:8px; }
.pick-card .meta{ display:flex; justify-content:space-between; margin-top:16px; font-size:.8rem; color:var(--charcoal-500); font-weight:600; }
.pick-card .check{
  position:absolute; top:18px; right:18px; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; background:#fff;
}
.pick-card.selected .check{ background:var(--charcoal-900); border-color:var(--charcoal-900); }
.pick-card.selected .check svg{ display:block; }
.pick-card .check svg{ display:none; width:12px; height:12px; color:#fff; }

.date-row{ display:flex; gap:14px; align-items:flex-end; margin-top:28px; flex-wrap:wrap; }
.date-row .field{ min-width:220px; }
.slots-label{ margin-top:32px; font-size:.85rem; font-weight:600; color:var(--charcoal-700); }
.slots-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
@media (max-width:640px){ .slots-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .slots-grid{ grid-template-columns:repeat(2,1fr); } }
.slot-btn{
  padding:12px 8px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface);
  font-size:.86rem; font-weight:600; color:var(--charcoal-700); transition:all .2s;
}
.slot-btn:hover:not(:disabled){ border-color:var(--clay-400); }
.slot-btn.selected{ background:var(--charcoal-900); border-color:var(--charcoal-900); color:#fff; }
.slot-btn:disabled{ opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.slots-empty{ margin-top:14px; font-size:.88rem; color:var(--ink-soft); font-style:italic; }

.step-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; gap:16px; }

.summary-panel{
  background:var(--charcoal-900); color:#fff; border-radius:var(--radius-lg); padding:36px; position:sticky; top:104px;
}
.summary-panel h4{ color:#fff; font-size:1.1rem; }
.summary-row{ display:flex; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.9rem; }
.summary-row span:first-child{ color:var(--charcoal-100); }
.summary-row span:last-child{ font-weight:600; text-align:right; }
.summary-empty{ color:var(--charcoal-100); font-size:.88rem; margin-top:16px; }
.summary-total{ display:flex; justify-content:space-between; margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); font-family:var(--font-display); font-size:1.3rem; }
.summary-note{ margin-top:20px; font-size:.8rem; color:var(--charcoal-100); display:flex; gap:10px; }
.summary-note svg{ width:18px; height:18px; color:var(--clay-300); flex:none; }

.confirm-box{ text-align:center; padding:20px 0 8px; }
.confirm-box .icon-ring{
  width:84px; height:84px; border-radius:50%; background:var(--sage-50); color:var(--sage-600);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px;
}
.confirm-box .icon-ring svg{ width:38px; height:38px; }
.confirm-box h3{ font-size:1.7rem; }
.confirm-box p{ color:var(--ink-soft); margin-top:10px; }
.confirm-ref{ display:inline-block; margin-top:18px; background:var(--cream-200); padding:10px 20px; border-radius:100px; font-weight:700; letter-spacing:.04em; font-size:.9rem; }
.confirm-details{ text-align:left; max-width:420px; margin:34px auto 0; background:var(--cream-50); border-radius:var(--radius); padding:26px 28px; }
.confirm-details .summary-row{ border-color:var(--border); }
.confirm-details .summary-row span:first-child{ color:var(--ink-soft); }
.confirm-actions{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

/* review step */
.review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
@media (max-width:640px){ .review-grid{ grid-template-columns:1fr; } }
.review-block{ background:var(--cream-50); border-radius:var(--radius); padding:22px 24px; }
.review-block h5{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; }
.review-block .edit{ float:right; font-size:.78rem; font-weight:700; text-decoration:underline; color:var(--charcoal-700); }
.review-block dl{ margin:14px 0 0; display:grid; gap:8px; }
.review-block dl div{ display:flex; justify-content:space-between; font-size:.88rem; gap:10px; }
.review-block dl dt{ color:var(--ink-soft); }
.review-block dl dd{ margin:0; font-weight:600; text-align:right; }

.consent-row{ display:flex; gap:12px; align-items:flex-start; margin-top:26px; font-size:.86rem; color:var(--ink-soft); }
.consent-row input{ margin-top:3px; width:16px; height:16px; accent-color:var(--charcoal-900); flex:none; }

/* toast */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,16px); background:var(--charcoal-900); color:#fff;
  padding:14px 24px; border-radius:100px; font-size:.88rem; font-weight:600; z-index:400;
  transition:transform .4s var(--ease), opacity .4s var(--ease); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-soft);
}
.toast.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.toast svg{ width:18px; height:18px; color:var(--sage-400); }

/* ---------- Template sale bar ----------
   Promotes the template itself to whoever is browsing this live demo.
   Remove this whole block (and the matching <div class="promo-bar">…
   markup at the end of each page) once the site has been purchased and
   is being deployed for a real client. */
:root{ --promo-bar-h:64px; }
@media (max-width:640px){ :root{ --promo-bar-h:112px; } }
body{ padding-bottom:var(--promo-bar-h); }
.promo-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--charcoal-900); box-shadow:0 -10px 30px -12px rgba(26,23,18,.4);
}
.promo-bar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px;
}
.promo-bar-text{ font-size:.92rem; color:var(--cream-200); }
.promo-bar-text strong{ color:#fff; font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.promo-bar-btn{ flex:none; white-space:nowrap; }
.promo-bar-btn svg{ width:17px; height:17px; }
@media (max-width:640px){
  .promo-bar-inner{ flex-direction:column; align-items:stretch; gap:10px; padding-block:12px; text-align:center; }
  .promo-bar-btn{ width:100%; }
}

/* back to top — offset above the sale bar so they never overlap */
.to-top{
  position:fixed; bottom:calc(var(--promo-bar-h) + 20px); left:20px; width:46px; height:46px; border-radius:50%; background:var(--charcoal-900);
  color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s, bottom .3s; z-index:90;
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top svg{ width:18px; height:18px; }

/* misc */
.divider-fade{ height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); }
.badge-count{ background:var(--clay-500); color:#fff; border-radius:100px; padding:1px 8px; font-size:.7rem; margin-left:6px; }
::selection{ background:var(--clay-300); color:var(--charcoal-900); }