/* ================================================================
   [Business Name] — SHARED STYLESHEET (used by every page)
   ----------------------------------------------------------------
   Edit the variables in section 1 to re-theme the whole site.
   ================================================================ */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root{
  /* --- Colors (luxury palette) --- */
  --warm-white:  #F8F5EF;   /* page background */
  --paper:       #FDFBF6;   /* cards / lighter surfaces */
  --ink:         #1B1916;   /* soft black — primary text */
  --charcoal:    #4A453D;   /* secondary text */
  --taupe:       #9A8C74;   /* accent (beige/taupe) */
  --taupe-soft:  #C7BBA6;   /* light accent */
  --line:        rgba(27,25,22,0.12);   /* hairline rules */
  --line-soft:   rgba(27,25,22,0.07);

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* --- Layout --- */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 78px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--warm-white);
  color:var(--ink);
  font-weight:300;
  line-height:1.65;
  font-size:16px;
  letter-spacing:0.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
section{ scroll-margin-top:var(--nav-h); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* ================================================================
   3. TYPOGRAPHY HELPERS
   ================================================================ */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-0.01em; }
.h-xl{ font-size:clamp(2.8rem, 7vw, 6rem); }
.h-lg{ font-size:clamp(2.2rem, 5vw, 4rem); }
.h-md{ font-size:clamp(1.7rem, 3vw, 2.6rem); }

.eyebrow{
  font-family:var(--font-body);
  font-size:0.72rem; font-weight:500;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--taupe);
  display:inline-flex; align-items:center; gap:.8em;
}
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--taupe); display:inline-block; }

.lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--charcoal); font-weight:300; }
.muted{ color:var(--charcoal); }

.section-head{ max-width:640px; margin-bottom:clamp(40px,6vw,72px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .h-lg{ margin-top:18px; }

.section{ padding-block:clamp(72px, 11vw, 150px); }

/* ================================================================
   4. BUTTONS
   ================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-body); font-size:0.8rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:1.05em 2.2em; border-radius:1px;
  transition:all .45s var(--ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--taupe); color:#fff; transform:translateY(-2px); }
.btn-outline{ border:1px solid currentColor; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.btn-light{ border:1px solid rgba(255,255,255,.6); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
/* text link with arrow */
.btn-text{ font-size:.78rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  display:inline-flex; align-items:center; gap:.7em; padding-bottom:6px; border-bottom:1px solid var(--ink);
  transition:gap .4s var(--ease), color .3s; }
.btn-text:hover{ gap:1.1em; color:var(--taupe); border-color:var(--taupe); }

/* ================================================================
   5. NAVIGATION  (identical on every page; transparent over the
   hero/banner, turns solid on scroll)
   ================================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:1000;
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Logo / business name — replace text, or drop an <img> in the .brand link */
.brand{
  font-family:var(--font-display); font-size:1.5rem; font-weight:500;
  letter-spacing:0.02em; color:#fff; transition:color .4s var(--ease); z-index:1002;
}
.brand small{ display:block; font-family:var(--font-body); font-size:.55rem; font-weight:400;
  letter-spacing:0.35em; text-transform:uppercase; opacity:.8; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
.nav-links a{
  font-size:0.78rem; font-weight:400; letter-spacing:0.12em; text-transform:uppercase;
  color:#fff; opacity:.92; position:relative; padding-block:6px; transition:opacity .3s;
}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .4s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after{ width:100%; }   /* active = current page */
.nav-cta{ border:1px solid rgba(255,255,255,.55); padding:.7em 1.4em !important; border-radius:1px;
  transition:all .4s var(--ease); }
.nav-cta:hover{ background:#fff; color:var(--ink); }

/* Scrolled state */
.nav.scrolled{ background:var(--paper); box-shadow:0 1px 0 var(--line); height:64px; }
.nav.scrolled .brand{ color:var(--ink); }
.nav.scrolled .nav-links a{ color:var(--ink); }
.nav.scrolled .nav-cta{ border-color:var(--ink); }
.nav.scrolled .nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav.scrolled .hamburger span{ background:var(--ink); }

/* Hamburger */
.hamburger{ display:none; flex-direction:column; gap:5px; padding:8px; z-index:1002; }
.hamburger span{ width:26px; height:1.5px; background:#fff; transition:all .4s var(--ease); }
.hamburger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ================================================================
   6. HERO (homepage only)
   ================================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
/* REPLACE hero image URL */
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
  transform:scale(1.05); animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,15,.55) 0%, rgba(20,18,15,.15) 35%, rgba(20,18,15,.7) 100%); }
.hero-inner{ position:relative; z-index:2; padding-bottom:clamp(120px,14vw,180px); padding-top:120px; max-width:900px; }
.hero h1{ margin:24px 0 26px; }
.hero .lead{ color:rgba(255,255,255,.9); max-width:620px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }
.hero .eyebrow{ color:#fff; } .hero .eyebrow::before{ background:#fff; }

.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-size:.62rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,.75);
  display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue::after{ content:""; width:1px; height:46px; background:rgba(255,255,255,.6); animation:cue 2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

.hero .anim{ opacity:0; transform:translateY(28px); animation:fadeUp 1s var(--ease) forwards; }
.hero .anim:nth-child(1){ animation-delay:.35s; }
.hero .anim:nth-child(2){ animation-delay:.5s; }
.hero .anim:nth-child(3){ animation-delay:.65s; }
.hero .anim:nth-child(4){ animation-delay:.8s; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

/* ================================================================
   7. PAGE BANNER (top of every interior page)
   Set the image per page with:  style="--banner:url('...')"
   ================================================================ */
.page-banner{ position:relative; min-height:54vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.page-banner::before{ content:""; position:absolute; inset:0; background:var(--banner) center/cover no-repeat;
  transform:scale(1.05); animation:heroZoom 14s var(--ease) forwards; }
.page-banner::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,15,.5) 0%, rgba(20,18,15,.32) 45%, rgba(20,18,15,.72) 100%); }
.page-banner .inner{ position:relative; z-index:2; padding-bottom:clamp(46px,7vw,82px); padding-top:150px; max-width:760px; }
.page-banner h1{ margin-top:18px; }
.page-banner p{ color:rgba(255,255,255,.88); max-width:560px; margin-top:18px; }
.page-banner .eyebrow{ color:#fff; } .page-banner .eyebrow::before{ background:#fff; }

/* ================================================================
   8. SCROLL-REVEAL
   ================================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }

/* ================================================================
   9. INTRO BLOCK (homepage + about)
   ================================================================ */
.intro{ background:var(--warm-white); }
.intro-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,7vw,96px); align-items:center; }
.intro-copy h2{ margin:18px 0 22px; }
.intro-stats{ display:flex; gap:48px; margin-top:42px; flex-wrap:wrap; }
.stat .num{ font-family:var(--font-display); font-size:2.6rem; line-height:1; color:var(--ink); }
.stat .lbl{ font-size:.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--taupe); margin-top:8px; }
.intro-figure{ position:relative; }
.intro-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(8%); }
.intro-figure .tag{ position:absolute; bottom:-1px; left:-1px; background:var(--paper); padding:18px 26px;
  font-family:var(--font-display); font-size:1.2rem; border:1px solid var(--line); }

/* ================================================================
   10. MARQUEE DIVIDER
   ================================================================ */
.marquee{ border-block:1px solid var(--line); overflow:hidden; padding-block:22px; background:var(--paper); }
.marquee-track{ display:flex; gap:48px; white-space:nowrap; width:max-content; animation:scrollX 32s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,2rem); font-style:italic;
  color:var(--charcoal); display:inline-flex; align-items:center; gap:48px; }
.marquee-track span::after{ content:"·"; color:var(--taupe); }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* ================================================================
   11. HOMEPAGE PREVIEW SECTIONS
   ================================================================ */
/* Portfolio preview — featured strip */
.preview-portfolio{ background:var(--paper); }
.feature-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:46px; }
.feature-strip a{ position:relative; overflow:hidden; display:block; }
.feature-strip img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1s var(--ease); }
.feature-strip a:hover img{ transform:scale(1.06); }
.feature-strip .cap{ position:absolute; inset:auto 0 0 0; padding:20px; color:#fff;
  background:linear-gradient(0deg, rgba(20,18,15,.55), rgba(20,18,15,0)); font-size:.72rem;
  letter-spacing:0.18em; text-transform:uppercase; opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.feature-strip a:hover .cap{ opacity:1; transform:none; }

/* Services preview — refined list */
.preview-services{ background:var(--warm-white); }
.preview-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.svc-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.svc-list li{ border-top:1px solid var(--line); padding:16px 0; font-family:var(--font-display);
  font-size:1.35rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center;
  transition:color .3s, padding-left .4s var(--ease); }
.svc-list li:hover{ color:var(--taupe); padding-left:8px; }
.svc-list li span{ font-family:var(--font-body); font-size:.7rem; color:var(--taupe); letter-spacing:0.18em; }

/* Pricing preview — compact tiers */
.preview-pricing{ background:var(--paper); }
.tier-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px; }
.tier-mini{ border:1px solid var(--line); background:var(--warm-white); padding:34px 30px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.tier-mini:hover{ transform:translateY(-6px); box-shadow:0 22px 56px rgba(27,25,22,.08); }
.tier-mini.featured{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tier-mini .tier{ font-size:.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--taupe); }
.tier-mini.featured .tier{ color:var(--taupe-soft); }
.tier-mini h3{ font-size:1.8rem; margin:8px 0 6px; }
.tier-mini.featured h3{ color:#fff; }
.tier-mini .price{ font-family:var(--font-display); font-size:1.25rem; color:var(--taupe); margin-bottom:14px; }
.tier-mini.featured .price{ color:var(--taupe-soft); }
.tier-mini p{ font-size:.88rem; color:var(--charcoal); }
.tier-mini.featured p{ color:rgba(255,255,255,.78); }

/* About teaser */
.preview-about{ background:var(--warm-white); }
.about-teaser{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,84px); align-items:center; }
.about-teaser .photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(15%); }
.about-teaser h2{ margin:18px 0 20px; }

/* ================================================================
   12. PORTFOLIO (full page)
   ================================================================ */
.portfolio{ background:var(--paper); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; }
.filter-btn{
  font-size:.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:400;
  padding:.7em 1.3em; border:1px solid var(--line); border-radius:40px; color:var(--charcoal);
  transition:all .35s var(--ease);
}
.filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.filter-btn.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.gallery{ column-count:3; column-gap:18px; }
.gallery-item{ break-inside:avoid; margin-bottom:18px; position:relative; overflow:hidden; cursor:pointer; background:var(--warm-white); }
.gallery-item img{ width:100%; transition:transform 1s var(--ease); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,18,15,.6), rgba(20,18,15,0) 55%);
  opacity:0; transition:opacity .5s var(--ease); display:flex; align-items:flex-end; padding:22px; }
.gallery-item:hover .overlay{ opacity:1; }
.gallery-item .overlay span{ color:#fff; font-size:.72rem; letter-spacing:0.18em; text-transform:uppercase; }
.gallery-item .overlay span small{ display:block; font-family:var(--font-display); font-size:1.4rem; letter-spacing:0; text-transform:none; margin-top:4px; }
.badge-3d{ position:absolute; top:14px; left:14px; z-index:3; background:rgba(255,255,255,.92); color:var(--ink);
  font-size:.6rem; letter-spacing:0.18em; text-transform:uppercase; padding:6px 11px; display:flex; align-items:center; gap:6px; }

/* ================================================================
   13. LIGHTBOX
   ================================================================ */
.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(15,13,11,.94);
  display:flex; align-items:center; justify-content:center; padding:5vw;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:90vw; max-height:86vh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.lb-btn{ position:absolute; color:#fff; font-size:2rem; width:54px; height:54px; display:flex;
  align-items:center; justify-content:center; opacity:.8; transition:opacity .3s, transform .3s; }
.lb-btn:hover{ opacity:1; }
.lb-close{ top:24px; right:28px; font-size:1.6rem; }
.lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.lb-prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lb-next:hover{ transform:translateY(-50%) translateX(4px); }

/* ================================================================
   14. SERVICES PAGE — premium alternating feature rows
   ================================================================ */
.services-page{ background:var(--warm-white); }
.svc-feature{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,76px); align-items:center;
  margin-bottom:clamp(64px,9vw,128px);
}
.svc-feature:last-child{ margin-bottom:0; }
/* Alternate sides on even rows */
.svc-feature:nth-of-type(even) .svc-media{ order:2; }
.svc-media{ position:relative; overflow:hidden; }
.svc-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.3s var(--ease); }
.svc-feature:hover .svc-media img{ transform:scale(1.05); }
.svc-media .svc-num{ position:absolute; top:18px; left:20px; z-index:2; font-family:var(--font-display);
  font-size:3.2rem; line-height:1; color:#fff; opacity:.85; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.svc-body .eyebrow{ margin-bottom:14px; }
.svc-body h2{ font-size:clamp(1.9rem,3.2vw,2.8rem); margin-bottom:18px; }
.svc-body p{ color:var(--charcoal); margin-bottom:22px; max-width:520px; }
.svc-points{ display:flex; flex-direction:column; gap:11px; margin-bottom:8px; }
.svc-points li{ position:relative; padding-left:26px; font-size:.92rem; color:var(--ink); }
.svc-points li::before{ content:""; position:absolute; left:0; top:.6em; width:13px; height:1px; background:var(--taupe); }

/* ================================================================
   15. PRICING (full page)
   ================================================================ */
.pricing{ background:var(--paper); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.price-card{ background:var(--warm-white); border:1px solid var(--line); padding:clamp(28px,3vw,44px);
  display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.price-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(27,25,22,.08); }
.price-card .tier{ font-size:.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--taupe); }
.price-card h3{ font-size:2rem; margin:10px 0 4px; }
.price-card .price{ font-family:var(--font-display); font-size:1.6rem; color:var(--ink); margin-bottom:22px; }
.price-card .price small{ font-family:var(--font-body); font-size:.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--taupe); display:block; }
.price-card ul{ display:flex; flex-direction:column; gap:13px; margin:8px 0 30px; }
.price-card li{ font-size:.9rem; color:var(--charcoal); padding-left:24px; position:relative; line-height:1.5; }
.price-card li::before{ content:""; position:absolute; left:0; top:.55em; width:11px; height:1px; background:var(--taupe); }
.price-card .btn{ margin-top:auto; width:100%; }
.price-card.featured{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.price-card.featured .tier{ color:var(--taupe-soft); }
.price-card.featured h3,.price-card.featured .price{ color:#fff; }
.price-card.featured li{ color:rgba(255,255,255,.82); }
.price-card.featured li::before{ background:var(--taupe-soft); }
.price-card.featured .ribbon{ font-size:.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink);
  background:var(--taupe-soft); display:inline-block; padding:4px 10px; margin-bottom:14px; }
.price-card.featured .btn{ background:#fff; color:var(--ink); }
.price-card.featured .btn:hover{ background:var(--taupe); color:#fff; }
.pricing-note{ text-align:center; margin-top:34px; font-size:.85rem; color:var(--charcoal); font-style:italic; }

/* ================================================================
   16. ADD-ONS
   ================================================================ */
.addons{ background:var(--warm-white); }
.addons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.addon-card{ border:1px solid var(--line); background:var(--paper); padding:34px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; transition:border-color .4s var(--ease); }
.addon-card:hover{ border-color:var(--taupe); }
.addon-card h4{ font-size:1.5rem; margin-bottom:6px; }
.addon-card p{ font-size:.84rem; color:var(--charcoal); }
.addon-card .price{ font-family:var(--font-display); font-size:1.2rem; color:var(--taupe); white-space:nowrap; }
.addons-help{ text-align:center; max-width:560px; margin:36px auto 0; color:var(--charcoal); font-size:.92rem; }

/* ================================================================
   17. BOOKING / FORMS (dark)
   ================================================================ */
.booking{ background:var(--ink); color:var(--paper); }
.booking .eyebrow{ color:var(--taupe-soft); } .booking .eyebrow::before{ background:var(--taupe-soft); }
.booking-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); align-items:start; }
.booking-intro h2{ color:#fff; margin:18px 0 20px; }
.booking-intro p{ color:rgba(255,255,255,.72); margin-bottom:28px; }
.booking-contactline{ display:flex; flex-direction:column; gap:14px; margin-top:34px;
  border-top:1px solid rgba(255,255,255,.15); padding-top:28px; }
.booking-contactline a{ color:rgba(255,255,255,.85); font-size:.9rem; letter-spacing:0.06em;
  display:flex; align-items:center; gap:12px; transition:color .3s; }
.booking-contactline a:hover{ color:#fff; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--taupe-soft); margin-bottom:9px; }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:.95rem; font-weight:300; color:#fff;
  background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.25);
  padding:10px 2px; transition:border-color .35s var(--ease); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--taupe-soft); }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C7BBA6' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; }
.field select option{ color:var(--ink); }
.field textarea{ resize:vertical; min-height:90px; }
.field input[type="date"],.field input[type="time"]{ color-scheme:dark; }
.form-submit{ grid-column:1 / -1; margin-top:14px; }
.form-submit .btn{ width:100%; background:#fff; color:var(--ink); }
.form-submit .btn:hover{ background:var(--taupe); color:#fff; }
.form-success{ grid-column:1 / -1; display:none; border:1px solid var(--taupe-soft); padding:22px; color:#fff; font-size:.92rem; }
.form-success.show{ display:block; }
.cal-booking-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  padding:clamp(20px,3vw,34px); box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.cal-booking-header{ margin-bottom:20px; }
.cal-booking-header h3{ font-family:var(--font-display); font-size:clamp(2rem,3vw,3rem); font-weight:400; color:#fff; margin:12px 0 10px; }
.cal-booking-header p{ color:rgba(255,255,255,.68); font-size:.95rem; max-width:640px; }
.cal-embed-wrap{
  min-height:760px; background:#fff; border:1px solid rgba(255,255,255,.18);
  overflow:hidden; position:relative;
}
.cal-embed-wrap iframe{ min-height:760px !important; }
.cal-fallback{ margin-top:14px; color:rgba(255,255,255,.68); font-size:.9rem; }
.cal-fallback a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.42); }
.cal-fallback a:hover{ border-color:#fff; }

/* ================================================================
   18. ABOUT (full page)
   ================================================================ */
.about{ background:var(--warm-white); }
.about-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(15%); }
.about-copy h2{ margin:18px 0 24px; }
.about-copy .signature{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--taupe); margin-top:30px; }
/* values / approach row */
.values{ background:var(--paper); }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card{ background:var(--paper); padding:clamp(28px,3vw,44px); }
.value-card .num{ font-size:.72rem; letter-spacing:0.2em; color:var(--taupe); }
.value-card h3{ font-size:1.5rem; margin:14px 0 10px; }
.value-card p{ font-size:.9rem; color:var(--charcoal); }

/* ================================================================
   19. CONTACT (full page)
   ================================================================ */
.contact{ background:var(--warm-white); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,84px); align-items:start; }
.contact-info .info-item{ border-top:1px solid var(--line); padding:24px 0; }
.contact-info .info-item:last-child{ border-bottom:1px solid var(--line); }
.contact-info .lbl{ font-size:.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--taupe); margin-bottom:8px; }
.contact-info .val{ font-family:var(--font-display); font-size:1.6rem; color:var(--ink); transition:color .3s; }
.contact-info a.val:hover{ color:var(--taupe); }
/* light contact form */
.contact-form .field label{ color:var(--charcoal); }
.contact-form .field input,.contact-form .field textarea{ color:var(--ink); border-bottom:1px solid var(--line); }
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{ color:rgba(27,25,22,.35); }
.contact-form .field input:focus,.contact-form .field textarea:focus{ border-color:var(--taupe); }
.contact-form .form-submit .btn{ background:var(--ink); color:var(--paper); }
.contact-form .form-submit .btn:hover{ background:var(--taupe); color:#fff; }
.contact-form .form-success{ border-color:var(--taupe); color:var(--ink); }

/* ================================================================
   20. CTA BAND
   ================================================================ */
.cta{ position:relative; color:#fff; text-align:center; overflow:hidden; }
/* REPLACE CTA background image URL */
.cta::before{ content:""; position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=80') center/cover fixed; }
.cta::after{ content:""; position:absolute; inset:0; background:rgba(20,18,15,.62); }
.cta .container{ position:relative; z-index:2; padding-block:clamp(80px,12vw,150px); }
.cta h2{ color:#fff; margin:20px auto 30px; max-width:720px; }
.cta .eyebrow{ color:#fff; } .cta .eyebrow::before{ background:#fff; }

/* ================================================================
   21. FOOTER
   ================================================================ */
.footer{ background:var(--paper); border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-block:clamp(56px,7vw,88px); }
.footer .brand{ color:var(--ink); font-size:1.8rem; }
.footer .brand small{ opacity:.7; }
.footer p.tag{ color:var(--charcoal); margin-top:18px; max-width:300px; font-size:.92rem; }
.footer h5{ font-family:var(--font-body); font-size:.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--taupe); margin-bottom:20px; }
.footer ul{ display:flex; flex-direction:column; gap:11px; }
.footer ul a,.footer .contact-item{ font-size:.92rem; color:var(--charcoal); transition:color .3s; }
.footer ul a:hover{ color:var(--ink); }
.footer .contact-item{ display:block; margin-bottom:11px; }
.footer .contact-item:hover{ color:var(--ink); }
.footer-bottom{ border-top:1px solid var(--line); padding-block:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
.footer-bottom p{ font-size:.78rem; letter-spacing:0.06em; color:var(--charcoal); }
.footer-bottom .socials{ display:flex; gap:22px; }
.footer-bottom .socials a{ font-size:.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--charcoal); }
.footer-bottom .socials a:hover{ color:var(--ink); }

/* ================================================================
   22. RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .gallery{ column-count:2; }
  .intro-grid,.about-grid,.booking-grid,.preview-split,.about-teaser,.contact-grid{ grid-template-columns:1fr; }
  .intro-figure,.about-photo,.about-teaser .photo{ max-width:520px; }
  .pricing-grid,.addons-grid,.tier-mini-grid,.values-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .price-card.featured,.tier-mini.featured{ order:-1; }
  /* Services page: stack and keep image on top */
  .svc-feature{ grid-template-columns:1fr; gap:26px; }
  .svc-feature:nth-of-type(even) .svc-media{ order:0; }
  .feature-strip{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .hamburger{ display:flex; }
  .nav-links{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px;
    background:var(--paper); transform:translateX(100%); transition:transform .55s var(--ease); height:100vh; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--ink) !important; font-size:1rem; letter-spacing:0.16em; }
  .nav-cta{ border-color:var(--ink) !important; padding:.9em 1.8em !important; }

  .gallery{ column-count:1; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .addon-card{ flex-direction:column; }
  .svc-list{ grid-template-columns:1fr; }
  .feature-strip{ grid-template-columns:1fr; }
  .intro-stats{ gap:28px; }
  .hero{ min-height:92svh; }
  .scroll-cue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}