/* ============================================================
   VDC CINEMATIC HERO — scroll-driven, three acts
   Scoped under .vdc-hero / .vdc- prefixes. Uses site tokens:
   --bg --bg-alt --brand --accent --ink --ink-soft --line
   ============================================================ */

.vdc-hero{
  --vdc-serif:'Cormorant Garamond',serif;
  --vdc-sans:'Manrope','Inter',sans-serif;
  --vdc-ease:cubic-bezier(.16,1,.3,1);
  position:relative; height:100vh; height:100svh;
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 90% at 72% 42%, rgba(11,91,83,.05), transparent 55%),
    radial-gradient(100% 80% at 12% 92%, rgba(232,176,75,.06), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--vdc-sans);
}

#vdc-scene{ position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; }

/* ---------- background atmosphere ---------- */
/* fine dot lattice, faded radially */
.vdc-lattice{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(11,91,83,.10) .6px, transparent .6px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 70% at 64% 45%, #000 30%, transparent 78%);
          mask-image:radial-gradient(75% 70% at 64% 45%, #000 30%, transparent 78%);
}
/* concentric measurement arcs behind the model */
.vdc-arcs{
  position:absolute; z-index:0; right:-12vw; top:50%;
  width:min(58vw,860px); aspect-ratio:1; transform:translateY(-50%);
  pointer-events:none; opacity:0;
}
.vdc-arcs svg{ width:100%; height:100%; display:block; animation:vdc-spin 160s linear infinite; }
@keyframes vdc-spin{ to{ transform:rotate(360deg); } }
/* drifting gold motes */
.vdc-motes{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.vdc-motes i{
  position:absolute; bottom:-3vh; border-radius:50%;
  background:var(--accent); filter:blur(.4px);
  animation:vdc-rise linear infinite; opacity:0;
}
@keyframes vdc-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  8%{ opacity:.34; }
  85%{ opacity:.18; }
  100%{ transform:translateY(-108vh) translateX(4vw); opacity:0; }
}
/* ghost serif word, fills the upper-left field */
.vdc-ghost{
  position:absolute; z-index:0; left:-1vw; top:4vh;
  font-family:var(--vdc-serif); font-style:italic; font-weight:500;
  font-size:clamp(160px,21vw,330px); line-height:1; letter-spacing:-.02em;
  color:rgba(11,91,83,.045); pointer-events:none; user-select:none;
  white-space:nowrap;
}
/* hairline frame with gold corner ticks */
.vdc-frame{ position:absolute; inset:clamp(14px,2vw,28px); z-index:8; pointer-events:none; }
.vdc-frame i{ position:absolute; background:rgba(14,27,26,.12); }
.vdc-frame .ft{ top:0; left:0; right:0; height:1px; transform:scaleX(0); transform-origin:center; }
.vdc-frame .fb{ bottom:0; left:0; right:0; height:1px; transform:scaleX(0); transform-origin:center; }
.vdc-frame .fl{ left:0; top:0; bottom:0; width:1px; transform:scaleY(0); transform-origin:center; }
.vdc-frame .fr{ right:0; top:0; bottom:0; width:1px; transform:scaleY(0); transform-origin:center; }
.vdc-frame b{ position:absolute; width:7px; height:7px; opacity:0; }
.vdc-frame b::before,.vdc-frame b::after{ content:""; position:absolute; background:var(--accent); }
.vdc-frame b::before{ width:7px; height:1px; } .vdc-frame b::after{ width:1px; height:7px; }
.vdc-frame .c1{ top:-1px; left:-1px; } .vdc-frame .c2{ top:-1px; right:-1px; }
.vdc-frame .c3{ bottom:-1px; left:-1px; } .vdc-frame .c4{ bottom:-1px; right:-1px; }
.vdc-frame .c2::before,.vdc-frame .c4::before{ right:0; } .vdc-frame .c2::after,.vdc-frame .c4::after{ right:0; }
.vdc-frame .c3::before,.vdc-frame .c4::before{ bottom:0; } .vdc-frame .c3::after,.vdc-frame .c4::after{ bottom:0; }

/* soft ground shadow */
.vdc-shadow{
  position:absolute; z-index:1; left:72%; top:79%;
  width:330px; height:64px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(11,91,83,.13), transparent 72%);
  pointer-events:none; opacity:0;
}

/* drag affordance zone (site cursor shows "Drag") */
.vdc-dragzone{ position:absolute; z-index:3; right:0; top:14%; bottom:14%; width:46%; }
@media (hover:none),(pointer:coarse){ .vdc-dragzone{ display:none; } }

/* ---------- top-left meta block (fills the upper-left) ---------- */
.vdc-meta{
  position:absolute; z-index:7;
  left:clamp(64px,8vw,140px); top:clamp(96px,13vh,140px);
  display:flex; align-items:center; gap:clamp(16px,1.6vw,26px);
  font-size:9.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft);
}
.vdc-meta .m{ display:flex; flex-direction:column; gap:5px; }
.vdc-meta .m b{ color:var(--brand); font-weight:800; }
.vdc-meta .sep{ width:1px; height:26px; background:var(--line); }
.vdc-meta .live{ display:inline-flex; align-items:center; gap:7px; }
.vdc-meta .live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent);
  animation:vdc-blink 2.4s infinite;
}
@keyframes vdc-blink{ 50%{ opacity:.3; } }

/* ---------- progress rail ---------- */
.vdc-rail{
  position:absolute; left:clamp(22px,3vw,44px); top:50%; transform:translateY(-50%);
  z-index:9; display:flex; flex-direction:column; gap:26px;
}
.vdc-rail-line{ position:absolute; left:3.5px; top:10px; bottom:10px; width:1px; background:var(--line); }
.vdc-rail-line i{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--brand); }
.vdc-rail-node{
  position:relative; display:flex; align-items:center; gap:14px;
  background:none; border:0; cursor:pointer; padding:0; text-align:left;
  font-family:var(--vdc-sans);
}
.vdc-rail-node b{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--bg); border:1px solid rgba(14,27,26,.35);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.vdc-rail-node span{
  font-size:9px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); opacity:0; transform:translateX(-6px);
  transition:opacity .4s, transform .4s var(--vdc-ease), color .4s;
}
.vdc-rail-node:hover span,
.vdc-rail-node:focus-visible span{ opacity:1; transform:none; }
.vdc-rail-node.on b{ background:var(--brand); border-color:var(--brand); box-shadow:0 0 0 4px rgba(11,91,83,.12); }
.vdc-rail-node.on:hover span{ color:var(--brand); }
/* the rail sits beside the copy column, so labels stay hidden until hover */
.vdc-rail-node span{ background:var(--bg); padding-right:6px; }

/* ---------- copy column / acts ---------- */
.vdc-copy{
  position:absolute; z-index:7;
  left:clamp(64px,8.6vw,150px); top:0; bottom:0;
  width:min(660px,46vw);
}
.vdc-act{ position:absolute; left:0; top:50%; width:100%; opacity:0; pointer-events:none; }
.vdc-act.live{ pointer-events:auto; }

.vdc-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:10px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brand); margin-bottom:34px;
}
.vdc-eyebrow::before{ content:""; width:44px; height:1px; background:var(--accent); flex:none; }

.vdc-h1{
  font-family:var(--vdc-serif); font-weight:500;
  font-size:clamp(52px,6.4vw,104px); line-height:1.0; letter-spacing:-.01em;
  color:var(--ink); margin:0;
}
.vdc-act-2 .vdc-h1{ font-size:clamp(44px,5.2vw,84px); }
.vdc-h1 em{ font-style:italic; font-weight:500; color:var(--brand); position:relative; white-space:nowrap; }
.vdc-h1 em::after{
  content:""; position:absolute; left:2%; right:2%; bottom:.04em; height:1px;
  background:linear-gradient(90deg, var(--accent), rgba(232,176,75,.25));
}
.vdc-hline{ display:block; overflow:hidden; padding-bottom:.10em; margin-bottom:-.10em; }
.vdc-hin{ display:inline-block; }
.vdc-hin .w{ display:inline-block; }

.vdc-sub{
  margin-top:30px; max-width:46ch;
  font-size:15px; line-height:1.85; font-weight:400; color:var(--ink-soft);
}
.vdc-sub .vdc-cycle{
  font-family:var(--vdc-serif); font-style:italic; font-size:1.18em;
  color:var(--brand); display:inline-block; min-width:4.2ch;
}

.vdc-cta-row{ display:flex; align-items:center; gap:16px; margin-top:40px; flex-wrap:wrap; }

.vdc-trust{
  display:flex; align-items:center; gap:10px; margin-top:36px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-soft);
}
.vdc-trust .stars{ color:var(--accent); letter-spacing:2px; font-size:12px; }
.vdc-addr{
  margin-top:18px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; line-height:1.9;
}
.vdc-addr b{ color:var(--brand); font-weight:700; }

/* ---------- annotations ---------- */
.vdc-anno{
  position:absolute; z-index:7; display:flex; align-items:center; gap:14px;
  pointer-events:none;
}
.vdc-anno .lab b{
  display:block; font-family:var(--vdc-serif); font-weight:600; font-size:19px;
  color:var(--ink); letter-spacing:.01em; line-height:1.15;
}
.vdc-anno .lab span{
  display:block; margin-top:3px; font-size:9px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft);
}
.vdc-anno .ln{ width:84px; height:1px; background:var(--accent); transform-origin:left center; position:relative; transform:scaleX(0); }
.vdc-anno .ln::after{
  content:""; position:absolute; right:-3px; top:-3px; width:6px; height:6px; border-radius:50%;
  border:1px solid var(--accent); background:var(--bg);
}
.vdc-anno.flip{ flex-direction:row-reverse; text-align:right; }
.vdc-anno.flip .ln{ transform-origin:right center; }
.vdc-anno.flip .ln::after{ right:auto; left:-3px; }
.vdc-anno .lab{ opacity:0; }
.vdc-anno-1{ right:calc(100% - 63.5%); top:55%; }
.vdc-anno-2{ left:80.5%; top:66%; }
.vdc-anno-3{ left:79.5%; top:34%; }

/* ---------- hero footer strip ---------- */
.vdc-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:8;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:clamp(28px,4vh,44px) clamp(40px,5vw,80px);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-soft);
}
.vdc-foot .vdc-doc{ display:flex; align-items:center; gap:10px; }
.vdc-foot .vdc-doc b{ color:var(--brand); font-weight:700; }
.vdc-scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:12px; letter-spacing:.3em; font-size:9px; }
.vdc-scroll-cue .line{ width:1px; height:52px; background:var(--line); position:relative; overflow:hidden; }
.vdc-scroll-cue .line::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--brand); animation:vdc-drop 2.4s var(--vdc-ease) infinite;
}
@keyframes vdc-drop{ 0%{ top:-40%; } 70%,100%{ top:110%; } }

/* ---------- entrance pre-states (animated by vdc-hero.js) ---------- */
.vdc-prestate .vdc-meta,
.vdc-prestate .vdc-act-1 .vdc-eyebrow,
.vdc-prestate .vdc-act-1 .vdc-sub,
.vdc-prestate .vdc-rail,
.vdc-prestate .vdc-foot,
.vdc-prestate .vdc-ghost{ opacity:0; }

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .vdc-copy{ width:min(560px,52vw); left:clamp(40px,6vw,90px); }
  .vdc-anno-1{ display:none; }
  .vdc-meta{ left:clamp(40px,6vw,90px); }
}
@media (max-width:860px){
  .vdc-copy{ width:auto; left:clamp(22px,6vw,44px); right:clamp(22px,6vw,44px); }
  .vdc-act{ top:auto; bottom:84px; }
  .vdc-h1{ font-size:clamp(42px,10.5vw,64px); }
  .vdc-sub{ font-size:14px; max-width:none; }
  .vdc-anno,.vdc-rail,.vdc-shadow,.vdc-ghost,.vdc-meta .sep,
  .vdc-meta .m-clock,.vdc-meta .m-doc{ display:none; }   /* keep the city on small screens */
  .vdc-meta{ top:88px; }
  .vdc-foot .vdc-doc{ display:none; }
  .vdc-cta-row{ margin-top:30px; }
  .vdc-trust{ margin-top:28px; }
  .vdc-arcs{ right:-30vw; width:90vw; opacity:.5; }
}
@media (prefers-reduced-motion:reduce){
  .vdc-arcs svg,.vdc-motes i,.vdc-scroll-cue .line::after,.vdc-meta .live::before{ animation:none !important; }
  .vdc-motes{ display:none; }
}

/* ============================================================
   HERO IDENTITY — clinic name, address, doctor, clinic photos
   The name is the headline; the address sits in a highlighted
   bar directly beneath it so the area and city read instantly.
   ============================================================ */
.vdc-eyebrow{ margin-bottom:18px; }

/* the clinic name, as the headline */
.vdc-name{ font-size:clamp(38px,5vw,72px); font-weight:600; }
.vdc-name .vdc-hline-2 .vdc-hin{
  font-style:italic; font-weight:600; color:var(--brand);
}

/* highlighted location bar */
.vdc-address{
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:26px 0 0; padding:13px 22px 13px 18px;
  border-radius:100px; background:var(--brand); color:var(--bg);
  font-family:var(--vdc-sans); font-weight:700;
  font-size:clamp(11.5px,.95vw,13.5px); letter-spacing:.13em; text-transform:uppercase;
  line-height:1.4;
  box-shadow:0 16px 34px -18px rgba(11,91,83,.85);
}
.vdc-address svg{ width:17px; height:17px; flex:none; color:var(--accent); }
.vdc-address .a-dot{
  width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none;
}
.vdc-address .a-city{ color:#fff; }

/* the line the clinic is known by, now a tagline */
.vdc-tagline{
  margin:24px 0 0;
  font-family:var(--vdc-serif); font-weight:500;
  font-size:clamp(23px,2.3vw,34px); line-height:1.25; letter-spacing:-.005em;
  color:var(--ink);
}
.vdc-tagline em{
  font-style:italic; color:var(--brand); position:relative; white-space:nowrap;
}
.vdc-tagline em::after{
  content:""; position:absolute; left:2%; right:2%; bottom:.02em; height:1px;
  background:linear-gradient(90deg, var(--accent), rgba(232,176,75,.25));
}

.vdc-sub{ margin-top:18px; }

/* clinic photo strip + doctor credit */
.vdc-idcard{
  display:flex; align-items:center; gap:clamp(14px,1.5vw,22px);
  margin-top:34px; flex-wrap:wrap;
}
.vdc-thumbs{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  padding:6px; margin:-6px; border-radius:14px;
  transition:background .35s var(--vdc-ease);
}
.vdc-thumbs:hover{ background:rgba(11,91,83,.05); }
.vdc-thumb{
  display:block; width:58px; height:72px; border-radius:9px; overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--line); flex:none;
  box-shadow:0 6px 16px -8px rgba(11,91,83,.4);
  transition:transform .45s var(--vdc-ease), width .45s var(--vdc-ease), box-shadow .35s;
}
.vdc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vdc-thumbs:hover .vdc-thumb{ width:66px; }
.vdc-thumb-more{
  display:grid; place-items:center; width:62px; height:72px; flex:none;
  border-radius:9px; border:1px dashed rgba(11,91,83,.35);
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); text-align:center; line-height:1.5;
  transition:background .35s, border-color .35s;
}
.vdc-thumb-more i{ font-style:normal; }
.vdc-thumbs:hover .vdc-thumb-more{ background:rgba(11,91,83,.07); border-color:var(--brand); }

.vdc-doctor{
  margin:0; padding-left:clamp(14px,1.5vw,22px);
  border-left:1px solid var(--line); line-height:1.5;
}
.vdc-doctor b{
  display:block; font-family:var(--vdc-serif); font-weight:600;
  font-size:20px; letter-spacing:.01em; color:var(--ink);
}
.vdc-doctor span{
  display:block; margin-top:2px; font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}

/* entrance pre-states */
.vdc-prestate .vdc-act-1 .vdc-address,
.vdc-prestate .vdc-act-1 .vdc-tagline,
.vdc-prestate .vdc-act-1 .vdc-idcard{ opacity:0; }

/* keep act 1 from crowding on short viewports */
@media (max-height:780px) and (min-width:861px){
  .vdc-act-1 .vdc-name{ font-size:clamp(34px,4vw,56px); }
  .vdc-tagline{ font-size:clamp(20px,1.9vw,27px); margin-top:18px; }
  .vdc-address{ margin-top:20px; padding:11px 19px 11px 15px; }
  .vdc-sub{ margin-top:14px; }
  .vdc-idcard{ margin-top:22px; }
  .vdc-thumb,.vdc-thumb-more{ height:58px; }
}
@media (max-width:860px){
  .vdc-name{ font-size:clamp(32px,8.6vw,46px); }
  .vdc-address{
    margin-top:20px; padding:11px 17px 11px 14px; gap:8px;
    font-size:10.5px; letter-spacing:.1em;
  }
  .vdc-address svg{ width:15px; height:15px; }
  .vdc-tagline{ font-size:clamp(19px,5.4vw,25px); margin-top:18px; }
  .vdc-sub{ margin-top:14px; }
  .vdc-idcard{ margin-top:24px; gap:14px; }
  .vdc-thumb{ width:48px; height:58px; }
  .vdc-thumb-more{ display:none; }
  .vdc-doctor b{ font-size:17px; }
  .vdc-doctor span{ font-size:8.5px; letter-spacing:.14em; }
}