/* ============================================================
   Dr. Shweta Valunj's Dental Clinic — design tokens
   Palette pulled from the clinic's own footage:
   chair/drape teal, warm porcelain walls, brushed steel trays,
   warm skin/lip tones for the human accent.
   ============================================================ */
:root{
  --porcelain:#F8F4EC;
  --porcelain-dim:#F1ECE1;
  --ink:#211D18;
  --ink-soft:#5C554C;

  --steel:#1C2A27;
  --steel-2:#25352F;

  --teal:#2F6E63;
  --teal-deep:#1E4A42;
  --teal-mist:#E9F1EE;

  --petal:#D9767F;
  --petal-deep:#B85560;

  --line:rgba(33,29,24,0.13);
  --line-light:rgba(248,244,236,0.18);

  /* glass recipe — used sparingly: nav, floating CTA, cards-on-hover, modals */
  --glass-bg-dark:    rgba(28,42,39,0.55);
  --glass-bg-light:   rgba(248,244,236,0.14);
  --glass-bg-cream:   rgba(248,244,236,0.55);
  --glass-border:     rgba(248,244,236,0.24);
  --glass-border-ink: rgba(33,29,24,0.10);
  --glass-highlight:  rgba(248,244,236,0.35);
  --glass-blur:       18px;
  --glass-blur-sm:    10px;

  --status-requested: #B8863E;
  --status-confirmed: #2F6E63;
  --status-completed: #6B7671;
  --status-cancelled: #B84B3E;
  --status-warning-bg: #FBEDE4;

  --radius-pill: 999px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'SF Mono', monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--porcelain);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-0.01em;}
em{font-style:italic; color:var(--teal);}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin-bottom:14px;
}
.eyebrow-light{color:var(--petal);}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
.skip-link{
  position:fixed; top:-60px; left:14px; z-index:1000;
  background:var(--ink); color:var(--porcelain);
  padding:10px 16px; border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:12px;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:14px;}
.container{max-width:1240px; margin:0 auto; padding-left:clamp(20px,6vw,56px); padding-right:clamp(20px,6vw,56px);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:15px; white-space:nowrap;
  padding:15px 26px; border-radius:var(--radius-pill);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:active{transform:translateY(0) scale(.98);}
.btn[disabled],.btn.is-disabled{opacity:.45; pointer-events:none;}
.btn-arrow{transition:transform .25s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(3px);}

.btn-primary{ background:var(--petal); color:var(--steel); }
.btn-primary:hover{ background:#EFA0A6; transform:translateY(-2px); }

.btn-primary-dark{ background:var(--teal-deep); color:var(--porcelain); }
.btn-primary-dark:hover{ background:var(--teal); transform:translateY(-2px); }

.btn-glass{
  background:var(--glass-bg-light);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(160%);
  border:1px solid var(--glass-border);
  color:var(--porcelain);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.btn-glass:hover{ background:rgba(248,244,236,0.22); transform:translateY(-2px); }

.btn-text{
  font-family:var(--mono); font-size:13px; padding:0;
  border-radius:0; background:none;
  color:var(--teal-deep); border-bottom:1px solid var(--teal);
  padding-bottom:2px;
}
.btn-text:hover{ color:var(--teal); border-color:var(--petal); }
.btn-text.on-dark{ color:var(--porcelain); border-color:var(--line-light); }
.btn-text.on-dark:hover{ color:var(--petal); border-color:var(--petal); }
.btn-sm{ padding:10px 18px; font-size:13px; }

/* ---------- Glass surface ---------- */
.glass-surface{
  background:var(--glass-bg-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 32px rgba(0,0,0,0.18);
}
.glass-surface-cream{
  background:var(--glass-bg-cream);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-border-ink);
  border-radius:var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 32px rgba(33,29,24,0.08);
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:999;
  background:var(--steel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.hide{opacity:0; visibility:hidden;}
.loader-mark{
  font-family:var(--serif); font-style:italic; font-size:34px; color:var(--porcelain);
  letter-spacing:0.02em;
}
.loader-bar{width:160px; height:2px; background:rgba(248,244,236,0.2); border-radius:2px; overflow:hidden;}
.loader-fill{width:0%; height:100%; background:var(--teal); transition:width .2s linear;}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  color:var(--porcelain);
  transition:background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled, .nav.solid{
  background:rgba(28,42,39,0.72);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  padding-top:14px; padding-bottom:14px;
  border-bottom-color:var(--line-light);
}
.nav-mark{display:flex; flex-direction:column; line-height:1.15;}
.nav-mark-line1{font-family:var(--serif); font-style:italic; font-size:19px;}
.nav-mark-line2{font-family:var(--mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; opacity:0.75;}
.nav-links{display:flex; align-items:center; gap:30px; font-size:14px; font-weight:500;}
.nav-links a{position:relative; opacity:0.82; transition:opacity .25s; padding-bottom:4px;}
.nav-links a:hover{opacity:1;}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--petal); transition:right .3s var(--ease);
}
.nav-links a:hover::after{right:0;}
.nav-links a[aria-current="page"]{opacity:1;}
.nav-links a[aria-current="page"]::after{right:0; background:var(--petal);}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-call{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13px;
  border:1px solid var(--line-light); border-radius:100px;
  padding:9px 16px;
  transition:background .25s, border-color .25s;
}
.nav-call:hover{background:rgba(248,244,236,0.08); border-color:rgba(248,244,236,0.4);}
.nav-call .dot{width:6px; height:6px; border-radius:50%; background:var(--petal); display:inline-block;}
.nav-book{ padding:11px 20px; font-size:13.5px; }
.nav-toggle{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line-light);
}
.nav-toggle-lines{position:relative; width:16px; height:11px;}
.nav-toggle-lines i{position:absolute; left:0; width:100%; height:1px; background:var(--porcelain); transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);}
.nav-toggle-lines i:nth-child(1){top:0;}
.nav-toggle-lines i:nth-child(2){top:5px;}
.nav-toggle-lines i:nth-child(3){top:10px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:nth-child(1){top:5px; transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:nth-child(3){top:5px; transform:rotate(-45deg);}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-call span{display:none;}
  .nav-book{display:none;}
  .nav-toggle{display:flex;}
}

.mobile-menu{
  position:fixed; inset:0; z-index:190;
  background:var(--glass-bg-dark);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  display:flex; flex-direction:column;
  padding:100px clamp(24px,8vw,56px) 40px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu nav{display:flex; flex-direction:column; gap:6px; margin-bottom:auto;}
.mobile-menu nav a{
  font-family:var(--serif); font-style:italic; font-size:clamp(30px,8vw,42px);
  color:var(--porcelain); padding:12px 0; border-bottom:1px solid var(--line-light);
}
.mobile-menu nav a[aria-current="page"]{color:var(--petal);}
.mobile-menu-foot{display:flex; flex-direction:column; gap:16px; padding-top:28px;}
body.menu-open{overflow:hidden;}

/* ---------- HERO & BACKGROUND CANVAS (home page) ---------- */
.bg-canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--steel);
}
.scrub-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 28, 26, 0.65) 0%,
    rgba(20, 28, 26, 0.35) 35%,
    rgba(20, 28, 26, 0.55) 70%,
    rgba(14, 20, 18, 0.88) 100%
  );
  pointer-events: none;
}

body[data-page="home"] {
  background: var(--steel);
  color: var(--porcelain);
}

.hero-wrap {
  position: relative;
  height: 240vh;
}
.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: flex-end;
}
.hero-copy{
  position:absolute; left:clamp(20px,6vw,72px); bottom:12%;
  color:var(--porcelain); max-width:640px;
}
.hero-copy .eyebrow{color:var(--petal); opacity:0.95;}
.beat{
  position:absolute; left:0; bottom:0;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.beat.active{ opacity:1; transform:translateY(0); position:relative; pointer-events:auto;}
.hero-copy h1, .hero-copy .beat-heading{font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-0.01em; font-size:clamp(34px,5.4vw,64px); margin-bottom:16px;}
.hero-copy p{font-size:clamp(15px,1.6vw,18px); max-width:460px; color:rgba(248,244,236,0.88); font-weight:500; margin-bottom:22px;}
.hero-copy .btn-glass{margin-top:4px;}
.hero-cta{margin-top:28px; position:relative;}

.scroll-cue{
  position:absolute; right:clamp(20px,6vw,56px); bottom:8%;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(248,244,236,0.75); font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
}
.scroll-cue-line{width:1px; height:44px; background:rgba(248,244,236,0.25); position:relative; overflow:hidden;}
.scroll-cue-line i{position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--petal); animation:cueDrop 1.8s infinite ease-in-out;}
@keyframes cueDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ---------- Simple page hero (inner pages) ---------- */
.page-hero{
  background:rgba(20,28,26,0.65); color:var(--porcelain);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(248,244,236,0.12);
  padding:clamp(140px,18vw,200px) clamp(20px,6vw,56px) clamp(70px,9vw,110px);
  position:relative; overflow:hidden; z-index:2;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 85% 15%, rgba(47,110,99,0.35), transparent 70%);
  pointer-events:none;
}
.page-hero-inner{max-width:1240px; margin:0 auto; position:relative;}
.page-hero .eyebrow{color:var(--petal);}
.page-hero h1{font-size:clamp(38px,6vw,68px); max-width:14ch;}
.page-hero p{font-size:clamp(15px,1.6vw,18px); color:rgba(248,244,236,0.85); max-width:52ch; margin-top:18px; line-height:1.6;}
.page-hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.page-hero-media{
  margin-top:44px; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:16/7; border:1px solid var(--line-light);
}
.page-hero-media img{width:100%; height:100%; object-fit:cover;}

/* ---------- Split section (about/doctor-style) ---------- */
.split{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 0.9fr; gap:clamp(30px,6vw,90px);
  align-items:center;
  max-width:1240px; margin:0 auto;
  padding:clamp(90px,12vw,160px) clamp(20px,6vw,56px);
  color:var(--porcelain);
}
.split::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:rgba(20,28,26,0.62);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(248,244,236,0.12);
  border-bottom:1px solid rgba(248,244,236,0.12);
}
.split.reverse{grid-template-columns:0.9fr 1fr;}
.split.reverse .split-media{order:-1;}
.split h2{font-size:clamp(32px,4vw,50px); margin-bottom:22px; color:var(--porcelain);}
.split .lead{font-size:18px; line-height:1.6; margin-bottom:16px; color:rgba(248,244,236,0.95);}
.split p{line-height:1.7; color:rgba(248,244,236,0.8); margin-bottom:16px;}
.split-media{position:relative;}
.split-frame{
  border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5;
  border:1px solid rgba(248,244,236,0.2); box-shadow:0 30px 60px -30px rgba(0,0,0,0.5);
  background:rgba(28,42,39,0.65); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.split-frame img{width:100%; height:100%; object-fit:cover;}
.split-frame.placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px;
}
.split-frame.placeholder p{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; color:rgba(248,244,236,0.75);
  margin:0; line-height:1.6;
}
.split-tag{
  position:absolute; bottom:-16px; left:-16px;
  background:var(--teal); color:var(--porcelain);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  padding:9px 16px; border-radius:4px;
}
@media (max-width:820px){
  .split, .split.reverse{grid-template-columns:1fr;}
  .split-media, .split.reverse .split-media{order:-1; max-width:320px; margin:0 auto 20px;}
}

/* ---------- Value grid (why-us / pillars) ---------- */
.value-section{
  position:relative; z-index:2;
  background:rgba(20,28,26,0.62); color:var(--porcelain);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:clamp(80px,10vw,130px) clamp(20px,6vw,56px);
  border-top:1px solid rgba(248,244,236,0.12);
  border-bottom:1px solid rgba(248,244,236,0.12);
}
.value-section.on-cream{
  background:rgba(248,244,236,0.85); color:var(--ink);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.value-grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:40px;
}
.value-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.value-item h3{font-family:var(--sans); font-weight:700; font-size:17px; margin-bottom:10px; letter-spacing:-0.01em;}
.value-item p{font-size:14.5px; line-height:1.65; color:rgba(248,244,236,0.68);}
.value-section.on-cream .value-item p{color:var(--ink-soft);}
.value-item{border-top:1px solid var(--line-light); padding-top:22px;}
.value-section.on-cream .value-item{border-top-color:var(--line);}
@media (max-width:900px){ .value-grid, .value-grid.cols-3{grid-template-columns:1fr 1fr; row-gap:32px;} }
@media (max-width:560px){ .value-grid, .value-grid.cols-3{grid-template-columns:1fr;} }

/* ---------- Entry cards (home) ---------- */
.entry-section{
  position: relative;
  z-index: 2;
  padding: clamp(70px,9vw,120px) clamp(20px,6vw,56px);
  max-width: 1240px;
  margin: 0 auto;
}
.entry-section::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background: var(--porcelain);
}
.entry-section .eyebrow{ color: var(--petal); }
.entry-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px;}
.entry-card{
  display:block; padding:32px 26px; border-radius:var(--radius-lg);
  background:rgba(28,42,39,0.62);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(248,244,236,0.20);
  box-shadow:inset 0 1px 0 rgba(248,244,236,0.25), 0 16px 40px -12px rgba(0,0,0,0.35);
  color:var(--porcelain);
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.entry-card:hover{
  transform:translateY(-4px);
  background:rgba(37,55,50,0.85);
  border-color:var(--petal);
  box-shadow:inset 0 1px 0 rgba(248,244,236,0.35), 0 24px 48px -10px rgba(0,0,0,0.45);
}
.entry-card .eyebrow{margin-bottom:20px; color:var(--petal);}
.entry-card h3{font-size:25px; margin-bottom:10px; color:var(--porcelain);}
.entry-card p{color:rgba(248,244,236,0.85); font-size:14.5px; line-height:1.6; margin-bottom:18px;}
.entry-card .btn-text{display:inline-block; color:var(--porcelain); border-color:var(--petal);}
.entry-card .btn-text:hover{color:var(--petal);}
@media (max-width:900px){ .entry-grid{grid-template-columns:1fr;} }

/* ---------- Testimonial / proof strip ---------- */
.proof-strip{
  position: relative;
  z-index: 2;
  background: rgba(20,28,26,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(248,244,236,0.15);
  border-bottom: 1px solid rgba(248,244,236,0.15);
  padding:clamp(50px,7vw,80px) clamp(20px,6vw,56px);
}
.proof-strip blockquote{
  max-width:820px; margin:0 auto; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,3.4vw,34px);
  line-height:1.35; color:var(--porcelain);
}
.proof-strip cite{
  display:block; margin-top:18px; font-style:normal;
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:rgba(248,244,236,0.75); text-transform:uppercase;
}

/* ---------- Catalogue grid (/care) ---------- */
.catalogue-section{position:relative; background:var(--porcelain); padding:clamp(80px,10vw,140px) clamp(20px,6vw,56px); overflow:hidden;}
.catalogue-orbit{
  position:absolute; top:50%; left:50%; width:min(1100px,140vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid var(--line);
  pointer-events:none; z-index:0;
}
.catalogue-orbit::before, .catalogue-orbit::after{
  content:""; position:absolute; inset:9%; border-radius:50%; border:1px solid var(--line);
}
.catalogue-orbit::after{inset:20%;}
.catalogue-head{max-width:1240px; margin:0 auto 56px; position:relative; z-index:1;}
.catalogue-head h2{font-size:clamp(32px,4.4vw,52px);}
.catalogue-grid{
  max-width:1240px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.catalogue-card{
  display:block; background:var(--porcelain); padding:36px 32px;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.catalogue-card:hover{
  background:var(--glass-bg-cream);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  transform:translateY(-4px);
  box-shadow:0 24px 48px -28px rgba(33,29,24,0.28);
  position:relative; z-index:2;
}
.catalogue-icon{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-mist); color:var(--teal-deep); margin-bottom:20px;
}
.catalogue-icon svg{width:22px; height:22px;}
.catalogue-card h3{font-size:23px; margin-bottom:10px;}
.catalogue-card p{font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:16px;}
@media (max-width:700px){ .catalogue-grid{grid-template-columns:1fr;} }

/* ---------- Treatment deep-page: steps ---------- */
.step-section{position:relative; z-index:2; padding:clamp(70px,9vw,120px) clamp(20px,6vw,56px); max-width:1240px; margin:0 auto;}
.step-section::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:var(--porcelain);
}
.step-head{max-width:640px; margin-bottom:52px;}
.step-head h2{font-size:clamp(30px,4vw,46px);}
.illustrative-figure img{width:100%; display:block; border-radius:var(--radius-lg); border:1px solid var(--line); aspect-ratio:16/9; object-fit:cover;}
.illustrative-figure-caption{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:14px; line-height:1.6;}
.step-list{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.step-row{
  display:grid; grid-template-columns:80px 1fr; gap:28px;
  background:var(--porcelain); padding:34px clamp(20px,4vw,40px);
}
.step-num{font-family:var(--mono); font-size:13px; color:var(--petal-deep); letter-spacing:0.08em; padding-top:4px;}
.step-row h3{font-size:22px; margin-bottom:8px;}
.step-row p{color:var(--ink-soft); line-height:1.65; font-size:15px;}
@media (max-width:640px){ .step-row{grid-template-columns:1fr; gap:8px;} }

/* ---------- FAQ / accordion ---------- */
/* ---------- FAQ / accordion ---------- */
.accordion{display:flex; flex-direction:column; gap:10px; position:relative; z-index:2;}
.accordion-item{
  border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; background:var(--porcelain);
  color:var(--ink);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.accordion-item.open{
  background:var(--teal-mist);
  border-color:var(--teal);
  box-shadow:0 16px 36px -24px rgba(33,29,24,0.25);
}
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 24px; text-align:left; font-size:16px; font-weight:600; color:var(--ink);
}
.accordion-chevron{flex:none; width:20px; height:20px; transition:transform .3s var(--ease); color:var(--teal-deep);}
.accordion-item.open .accordion-chevron{transform:rotate(180deg);}
.accordion-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease);}
.accordion-item.open .accordion-panel{grid-template-rows:1fr;}
.accordion-panel-inner{overflow:hidden;}
.accordion-panel p{padding:0 24px 22px; color:var(--ink-soft); line-height:1.7; font-size:15px; max-width:70ch;}
.faq-group-title{font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--petal-deep); margin:44px 0 16px; position:relative; z-index:2;}
.faq-group-title:first-child{margin-top:0;}
.faq-search{position:relative; margin-bottom:8px; z-index:2;}
.faq-search input{
  width:100%; background:var(--porcelain-dim);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:16px 22px; font-size:15px; font-family:var(--sans); color:var(--ink);
}
.faq-search input::placeholder{color:var(--ink-soft);}
.faq-search input:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.faq-empty{color:var(--ink-soft); font-size:14.5px; padding:20px 4px;}

/* ---------- Quiz ---------- */
.quiz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px;}
.quiz-option{
  text-align:left; padding:26px 22px; border-radius:var(--radius-md);
  background:var(--teal-mist); border:1px solid transparent;
  transition:background .25s var(--ease), transform .2s var(--ease), border-color .25s var(--ease);
}
.quiz-option:hover{transform:translateY(-3px);}
.quiz-option[aria-pressed="true"]{
  background:var(--glass-bg-cream);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border-color:var(--teal);
  box-shadow:0 16px 36px -22px rgba(33,29,24,0.3);
}
.quiz-option h3{font-size:17px; margin-bottom:6px; font-family:var(--sans); font-weight:700;}
.quiz-option p{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.quiz-result{
  margin-top:36px; padding:clamp(28px,4vw,44px); border-radius:var(--radius-lg);
  background:var(--teal-deep); color:var(--porcelain);
  display:none;
}
.quiz-result.visible{display:block;}
.quiz-result .eyebrow{color:var(--petal);}
.quiz-result h3{font-size:clamp(24px,3vw,32px); margin-bottom:14px;}
.quiz-result p{color:rgba(248,244,236,0.82); line-height:1.7; margin-bottom:22px; max-width:60ch;}
.quiz-result-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.quiz-disclaimer{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:28px; max-width:60ch; line-height:1.6;}
@media (max-width:900px){ .quiz-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .quiz-grid{grid-template-columns:1fr;} }

/* ---------- Results gallery ---------- */
.notice-banner {
  position: relative; z-index: 2;
  border: 1px dashed rgba(248, 244, 236, 0.25);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  background: rgba(28, 42, 39, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(248, 244, 236, 0.85);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 24px;
}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
.case-card{
  position: relative; z-index: 2;
  border-radius:var(--radius-md); overflow:hidden;
  border:1px solid rgba(248,244,236,0.18);
  background:rgba(28,42,39,0.62);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  color:var(--porcelain);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.case-card:hover{
  transform:translateY(-4px);
  background:rgba(37,55,50,0.85);
  border-color:var(--petal);
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.45);
}
.case-thumb{aspect-ratio:4/3; background:rgba(20,28,26,0.5); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.case-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.case-card-body{padding:18px 20px;}
.case-tag{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--petal); margin-bottom:6px; display:block;}
.case-card h3{font-size:18px; color:var(--porcelain);}
.case-placeholder-note{
  font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-align:center; padding:0 20px; line-height:1.6;
}
.consent-caption{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:10px;}
.ba-slider{position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--steel);}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-select:none;}
.ba-slider .ba-after{clip-path:inset(0 0 0 50%);}
.ba-slider-label{position:absolute; top:14px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--porcelain); background:rgba(20,28,26,0.5); padding:6px 12px; border-radius:var(--radius-pill); z-index:3;}
.ba-slider-label.before{left:14px;}
.ba-slider-label.after{right:14px;}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; appearance:none; -webkit-appearance:none;
  background:transparent; z-index:4; cursor:ew-resize;
}
.ba-range::-webkit-slider-runnable-track{background:transparent;}
.ba-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:44px; height:44px; border-radius:50%;
  background:var(--glass-bg-light); backdrop-filter:blur(8px);
  border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 4px 16px rgba(0,0,0,0.3);
  margin-top:0;
}
.ba-range::-moz-range-thumb{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-border);
  background:var(--glass-bg-light);
}
.ba-divider{position:absolute; top:0; bottom:0; width:2px; background:var(--porcelain); z-index:3; pointer-events:none;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr;} }

/* ---------- Visit / map ---------- */
.visit{
  display:grid; grid-template-columns:1fr 1fr;
  background:rgba(20,28,26,0.65);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(248,244,236,0.12);
  position:relative; z-index:2;
}
.visit-info{ color:var(--porcelain); padding:clamp(140px,18vw,190px) clamp(20px,6vw,64px) clamp(70px,9vw,120px); }
.visit-info h1{font-size:clamp(34px,4.4vw,54px); margin-bottom:16px;}
.visit-lead{font-size:16px; color:rgba(248,244,236,0.78); max-width:420px; margin-bottom:40px; line-height:1.6;}
.visit-rows{display:flex; flex-direction:column; gap:22px; margin-bottom:36px;}
.visit-row{display:flex; flex-direction:column; gap:6px; border-bottom:1px solid var(--line-light); padding-bottom:18px; font-size:16px;}
.visit-row-label{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--petal);}
.visit-row a:hover{color:var(--petal);}
.visit-actions{display:flex; flex-wrap:wrap; gap:14px;}
.visit-map{min-height:420px; position:relative;}
.visit-map-ambient{position:absolute; inset:0; opacity:0.5; pointer-events:none; z-index:0;}
.visit-map iframe{width:100%; height:100%; min-height:420px; border:0; filter:grayscale(0.15) contrast(1.05); position:relative; z-index:1;}
@media (max-width:820px){ .visit{grid-template-columns:1fr;} .visit-map{min-height:320px;} }

/* ---------- Forms ---------- */
.form-panel{
  max-width:640px; margin:0 auto; padding:clamp(32px,5vw,52px);
  border-radius:var(--radius-lg);
}
.field{margin-bottom:26px;}
.field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--petal); margin-bottom:10px;}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-light);
  color:var(--porcelain); font-family:var(--sans); font-size:16px; padding:10px 2px;
  transition:border-color .25s var(--ease);
}
.field select{-webkit-appearance:none; appearance:none;}
.field select option{color:var(--ink);}
.field textarea{resize:vertical; min-height:90px;}
.field input::placeholder, .field textarea::placeholder{color:rgba(248,244,236,0.4);}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-bottom-color:var(--petal);
}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-bottom-color:var(--status-cancelled);}
.field-error{display:none; font-family:var(--mono); font-size:12px; color:#F0A99E; margin-top:8px;}
.field.has-error .field-error{display:block;}
.form-note{font-size:13px; color:rgba(248,244,236,0.6); margin-top:-10px; margin-bottom:26px; line-height:1.6;}
.form-success{
  display:none; text-align:center; padding:clamp(32px,5vw,52px);
}
.form-success.visible{display:block;}
.form-success .eyebrow{color:var(--petal); justify-content:center; display:flex;}
.form-success h3{font-size:clamp(24px,3vw,32px); color:var(--porcelain); margin-bottom:14px;}
.form-success p{color:rgba(248,244,236,0.82); line-height:1.7; margin-bottom:26px; max-width:52ch; margin-left:auto; margin-right:auto;}
.form-success-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.form-wrap{background:var(--steel); padding:clamp(90px,12vw,150px) clamp(20px,6vw,56px);}

/* ---------- Footer ---------- */
.footer{
  position: relative;
  z-index: 2;
  background:var(--steel); color:var(--porcelain);
  padding:64px clamp(20px,6vw,56px) 40px;
  border-top:1px solid var(--line-light);
}
.footer-top{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:36px;
  padding-bottom:48px; margin-bottom:32px; border-bottom:1px solid var(--line-light);
}
.footer-mark span{display:block;}
.footer-mark span:first-child{font-family:var(--serif); font-style:italic; font-size:26px;}
.footer-sub{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; opacity:0.65; margin-top:6px;}
.footer-tagline{margin-top:16px; font-size:14px; color:rgba(248,244,236,0.62); max-width:32ch; line-height:1.6;}
.footer-col h4{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--petal); margin-bottom:16px; font-weight:600;}
.footer-col{display:flex; flex-direction:column; gap:11px; font-size:14px;}
.footer-col a, .footer-col p{color:rgba(248,244,236,0.72);}
.footer-col a:hover{color:var(--porcelain);}
.footer-bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
.footer-connect{display:flex; gap:10px; flex-wrap:wrap;}
.footer-connect-pill{
  display:flex; align-items:center; gap:7px;
  background:var(--glass-bg-light); backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border); border-radius:var(--radius-pill);
  padding:9px 15px; font-family:var(--mono); font-size:12px;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.footer-connect-pill:hover{background:rgba(248,244,236,0.22); transform:translateY(-2px);}
.footer-connect-pill svg{width:14px; height:14px;}
.footer-legal{font-family:var(--mono); font-size:11.5px; color:rgba(248,244,236,0.45);}
.footer-admin-link{color:rgba(248,244,236,0.45); border-bottom:1px solid transparent; padding-bottom:1px; transition:color .2s var(--ease), border-color .2s var(--ease);}
.footer-admin-link:hover{color:var(--porcelain); border-bottom-color:var(--petal);}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:32px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }

/* ---------- Floating WhatsApp ---------- */
.float-wa{
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg-dark);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 10px 30px -8px rgba(0,0,0,0.4);
  transition:transform .25s var(--ease);
}
.float-wa svg{width:27px; height:27px;}
.float-wa:hover{transform:translateY(-3px) scale(1.04);}
.float-wa-ring{
  position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--teal);
  animation:waRing 1.8s var(--ease) 1;
}
@keyframes waRing{
  0%{transform:scale(1); opacity:.9;}
  100%{transform:scale(1.7); opacity:0;}
}

@media (max-width:600px){
  .hero-copy{bottom:17%; right:20px;}
  .hero-copy p{max-width:88%;}
  .scroll-cue{display:none;}
  .float-wa{right:16px; bottom:16px; width:52px; height:52px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hero-wrap{height:100vh;}
  .beat{transition:none; position:relative; opacity:1; transform:none; pointer-events:auto; display:none;}
  .beat[data-beat="0"]{display:block;}
  .scroll-cue{display:none;}
  .scroll-cue-line i{animation:none; display:none;}
  .float-wa-ring{animation:none; display:none;}
  .entry-card:hover, .catalogue-card:hover, .quiz-option:hover, .case-card:hover, .btn:hover, .footer-connect-pill:hover{transform:none;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}