@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root{
  --navy:#07152f;
  --beige-1:#b79b73;
  --beige-2:#c8bba8;
  --beige-3:#8d8076;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;background:#000;color:#111;font-family:Montserrat,Arial,sans-serif}
.site{width:100%;overflow:hidden}
.page{
  position:relative;
  width:100%;
  min-height:100svh;
  aspect-ratio:16/9;
  overflow:hidden;
  scroll-snap-align:start;
}
.page-1{
  background-image:url('assets/clinic.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.page-1 .hero-overlay{background:rgba(0,0,0,.08)}
.home-center{
  position:absolute;
  z-index:2;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  color:#fff;
}
.home-logo{
  font-size:7.25vw;
  line-height:1;
  font-weight:300;
  letter-spacing:.34em;
  margin-left:.34em;
  text-shadow:0 0 10px rgba(255,255,255,.10);
}
.home-tagline{
  margin-top:1.0vw;
  font-size:1.45vw;
  line-height:1.2;
  font-weight:400;
  letter-spacing:.27em;
}
.page-8{
  background-image:url('assets/network-wave.jpg');
  background-size:cover;
  background-position:center center;
}
.page-8 .hero-overlay{background:rgba(0,0,0,0)}
.hero-content{position:relative;z-index:2;width:100%;height:100%}
/* VGN8: positions matched to the supplied 1366x768 original */
.brand{position:absolute;left:7.25vw;top:16.0vw;width:auto;text-align:left}
.brand-name{font-size:7.45vw;line-height:.82;letter-spacing:.34em;font-weight:300;margin-left:0;text-shadow:0 0 18px rgba(120,190,255,.55);white-space:nowrap}
.brand-la{position:absolute;left:57.2vw;top:28.2%;color:#ffd52f;font-family:"Brush Script MT","Segoe Script",cursive;font-size:3.0vw;white-space:nowrap;text-shadow:0 0 12px rgba(255,214,47,.55)}
.contact-block{position:absolute;left:7.25vw;top:45.2%;bottom:auto}
.label{font-weight:800;font-style:italic;font-size:1.72vw;line-height:1.1;letter-spacing:.06em;margin-bottom:.55vw}
.contact-block p{font-size:1.20vw;line-height:1.45;letter-spacing:.035em;margin:0}
.contact-block .hours{font-size:1.03vw;font-style:normal;margin-top:7.15vw;margin-bottom:.7vw}
.contact-block .hours + p{font-size:1.03vw;line-height:1.45;margin:0 0 1.15vw}
.email{display:block;color:#fff;text-decoration:none;font-size:2.15vw;line-height:1.1;font-weight:800;letter-spacing:.02em}
.page-2{background:#061217}
.hex{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(3,12,16,.15),rgba(3,12,16,.45)),url('assets/hexagon.jpg');background-size:cover;background-position:center}
.dna{position:absolute;inset:0;width:55%;background-image:url('assets/dna.jpg');background-repeat:no-repeat;background-size:auto 120%;background-position:42% 40%;mix-blend-mode:screen;opacity:.9}
.business-list{position:absolute;z-index:2;left:31.5%;right:7%;top:14%;bottom:12%;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.business-item{display:flex;align-items:flex-start;gap:1.3vw}
.business-item .rule{width:4px;min-width:4px;height:4.7vw;background:#fff}
.business-item h2{font-size:1.85vw;font-style:italic;margin:0 0 1.1vw;font-weight:700;letter-spacing:.01em}
.business-item p{font-size:1.52vw;margin:0;letter-spacing:.03em}
.content-page{color:var(--navy)}
.content-inner{position:absolute;inset:0;padding:6.1vw 15.3vw}
.content-page:after{content:"";position:absolute;left:15.3%;top:18%;bottom:9%;width:7px;background:#fff}
.content-page h1{margin:0;color:#fff;font-size:2.65vw;font-weight:800;line-height:1.1;letter-spacing:.01em}
.subtitle{margin:2.5vw 0 2.0vw 3.2vw;font-size:1.35vw;letter-spacing:.01em}
.subtitle.italic,.italic{font-style:italic}
.copy{margin-left:6.7vw}
.copy h2{font-size:2.55vw;line-height:1.68;margin:0 0 3.0vw;color:#000;font-weight:800;letter-spacing:-.02em}
.focus{font-size:1.28vw;line-height:1.62}
.focus strong{display:block;font-style:italic;font-weight:800;margin-bottom:.05vw}
.closing{font-size:1.38vw;line-height:1.55;margin-top:2.7vw}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
.page-3{background:#b89b72}
.page-4{background:#978b82}
.page-5{background:#b4966a}
.page-6{background:#c9baa6}
.page-7{background:#85776d}
.page-4 .copy h2{line-height:1.68}
.page-4 .focus{font-style:italic}
.page-7 .copy h2{line-height:1.55}
.page-7 .focus{margin-top:1.0vw}
.page-7 .closing{margin-top:2.3vw}


@media(max-width:900px){
  .home-logo{font-size:12vw;letter-spacing:.22em;margin-left:.22em}
  .home-tagline{font-size:3.1vw;letter-spacing:.18em;margin-top:2.5vw}
  .page{min-height:100svh;aspect-ratio:auto}
  .brand-name{font-size:12vw}
  .brand{left:6vw;top:12vw}
  .brand-la{font-size:5vw;top:28%;left:57%}
  .contact-block{left:7vw;bottom:8vw}
  .label{font-size:3.8vw}
  .contact-block p,.contact-block .hours + p{font-size:2.7vw}
  .contact-block .hours{font-size:2.6vw}
  .email{font-size:4.8vw}
  .business-list{left:34%;right:6%;top:13%;bottom:11%}
  .business-item .rule{height:12vw}
  .business-item h2{font-size:4.2vw;margin-bottom:2vw}
  .business-item p{font-size:3.2vw;line-height:1.35}
  .content-inner{padding:9vw 9vw 9vw 15vw}
  .content-page:after{left:8%;top:15%;bottom:9%;width:4px}
  .content-page h1{font-size:5.6vw}
  .subtitle{font-size:3.2vw;margin:5vw 0 4vw 4vw}
  .copy{margin-left:4vw}
  .copy h2{font-size:4.3vw;line-height:1.55;margin-bottom:7vw}
  .focus{font-size:2.9vw;line-height:1.55}
  .closing{font-size:3vw;line-height:1.45;margin-top:6vw}
  .two-col{grid-template-columns:1fr;gap:2vw}
}
@media(max-width:600px){
  .desktop{display:none}
  .page-1{background-position:center}
  .page-8{background-position:center center}
  .dna{width:70%;background-size:auto 100%;background-position:20% 45%}
  .business-list{left:30%;top:12%;bottom:10%}
}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}
.brand.reveal{transform:translateY(-18px) scale(.985)}

/* Canva VGN3-VGN7 fit tuning */
.page-4 .copy h2{font-size:2.38vw;line-height:1.52;margin-bottom:2.0vw}
.page-4 .focus{line-height:1.42}
.page-4 .closing{margin-top:1.7vw}
.page-5 .copy h2{font-size:2.42vw;line-height:1.53;margin-bottom:2.4vw}
.page-5 .focus{line-height:1.45}
.page-5 .closing{margin-top:2.0vw}
.page-6 .copy h2{font-size:2.38vw;line-height:1.53;margin-bottom:2.0vw}
.page-6 .focus{line-height:1.45}
.page-6 .closing{margin-top:1.8vw}
.page-7 .copy h2{font-size:2.42vw;line-height:1.48;margin-bottom:2.0vw}
.page-7 .focus{line-height:1.45}
.page-7 .closing{margin-top:1.8vw}

/* VGN8 readability: original design uses light text over the dark background */
.page-8 {
  color: #ffffff;
}
.page-8 .contact-title,
.page-8 .contact-label,
.page-8 .contact-address,
.page-8 .contact-hours,
.page-8 .contact-hours-text,
.page-8 .contact-email,
.page-8 p,
.page-8 h1,
.page-8 h2,
.page-8 h3 {
  color: #ffffff;
}
.page-8 .la-medicus {
  color: #ffd84d;
}

/* V10 FINAL LAYOUT LOCK — VGN3-VGN7 */
.page-3 .content-inner,
.page-4 .content-inner,
.page-5 .content-inner,
.page-6 .content-inner,
.page-7 .content-inner{
  top:0;
  height:100%;
}
.page-3 .copy,
.page-4 .copy,
.page-5 .copy,
.page-6 .copy,
.page-7 .copy{
  position:relative;
}
.page-3 .focus{margin-top:0}
.page-3 .closing{margin-top:2.7vw}
.page-4 .focus{margin-top:0}
.page-5 .focus{margin-top:0}
.page-6 .focus{margin-top:0}
.page-7 .focus{margin-top:0}

/* VGN8 — exact composition based on supplied 1366×768 original */
.page-8 .brand{
  left:7.25vw;
  top:9.9vw;
  width:auto;
  position:absolute;
}
.page-8 .brand-name{
  font-size:7.45vw;
  line-height:.82;
  letter-spacing:.34em;
  white-space:nowrap;
}
.page-8 .brand-la{
  left:50vw;
  top:6.4vw;
  color:#ffd52f;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:3vw;
  white-space:nowrap;
}
.page-8 .contact-block{
  left:7.25vw;
  top:45.2%;
  bottom:auto;
  position:absolute;
  color:#fff;
}
.page-8 .contact-block .label,
.page-8 .contact-block p,
.page-8 .contact-block .hours,
.page-8 .contact-block .hours + p,
.page-8 .email{
  color:#fff;
}
@media(max-width:900px){
  .page-8 .brand{left:6vw;top:10vw}
  .page-8 .brand-name{font-size:12vw}
  .page-8 .brand-la{left:50vw;top:8vw;font-size:5vw}
  .page-8 .contact-block{left:7vw;top:45%;bottom:auto}
}