*{margin:0;padding:0;box-sizing:border-box}



:root{

  --bg:#0b0b0b;

  --bg2:#111;

  --text:#fff;

  --muted:rgba(255,255,255,.82);

  --border:rgba(255,255,255,.18);

}



body{

  font-family: Arial, sans-serif;

  background: var(--bg);

  color: var(--text);

}



/* STICKY NAV */

.topnav{

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(0,0,0,.55);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,.08);

}



.navwrap{

  width: min(1100px, 92vw);

  margin: 0 auto;

  padding: 12px 0;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 18px;

}



.brand{

  display:flex;

  align-items:center;

  gap:10px;

  text-decoration:none;

  color:#fff;

  font-weight:900;

  letter-spacing:1px;

}



.navlogo{

  width: 28px;

  height: 28px;

  object-fit: contain;

}



.navlinks{

  display:flex;

  align-items:center;

  gap: 14px;

  flex-wrap: wrap;

}



.navlinks a{

  text-decoration:none;

  color: rgba(255,255,255,.86);

  font-weight: 800;

  font-size: 13px;

  letter-spacing: .6px;

  padding: 8px 10px;

  border-radius: 999px;

}



.navlinks a:hover{

  background: rgba(255,255,255,.08);

}



.navlinks .muted{

  opacity:.7;

}



.navlinks .pill{

  border: 1px solid rgba(255,255,255,.25);

}



/* HERO */

.hero{

  position:relative;

  height: 100vh;

  width: 100%;

  overflow:hidden;

  display:flex;

  align-items:center;

}



.fallback{

  position:absolute;

  inset:0;

  background: radial-gradient(circle at 70% 30%, #2b2b2b 0%, #0b0b0b 55%, #000 100%);

  z-index:0;

}



.bg-video{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  opacity:.55;

  z-index:1;

}



.overlay{

  position:relative;

  z-index:2;

  width: min(820px, 92vw);

  margin: 0 auto;

  text-align:left;

  display:flex;

  flex-direction:column;

  gap: 14px;

  padding: 0 4vw;

}



.brand-logo{

  width: 64px;

  height: 64px;

  object-fit: contain;

  opacity: .96;

}



h1{

  font-size: clamp(54px, 7vw, 120px);

  letter-spacing: 3px;

  line-height: .9;

}



.tagline{

  font-size: clamp(16px, 2vw, 20px);

  opacity: .9;

}



/* BUTTONS */

.cta{

  display:flex;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: 8px;

}



.btn{

  padding: 14px 24px;

  border: 2px solid #fff;

  color: #fff;

  text-decoration:none;

  font-weight: 900;

  border-radius: 999px;

  display:inline-block;

}



.btn.primary{

  background:#fff;

  color:#0b0b0b;

}



.btn.ghost{

  border-color: rgba(255,255,255,.45);

  opacity:.95;

}



/* SECTIONS */

.section{

  padding: 90px 0;

  background: var(--bg2);

}



.section.dark{

  background: var(--bg);

}



.wrap{

  width: min(1000px, 92vw);

  margin: 0 auto;

  text-align: left;

}



.section h2{

  font-size: clamp(28px, 3.2vw, 40px);

  margin-bottom: 14px;

}



.section p{

  max-width: 820px;

  font-size: 18px;

  line-height: 1.7;

  color: var(--muted);

  margin-bottom: 22px;

}



/* Title + Logos */

.title-row{

  display:flex;

  align-items:center;

  gap: 12px;

  margin-bottom: 10px;

}



.mini-logo{

  width: 40px;

  height: 40px;

  object-fit: contain;

  opacity: .96;

}



/* Appointment alert */

.alert{

  border: 1px solid rgba(255,255,255,.22);

  background: rgba(255,255,255,.05);

  border-radius: 14px;

  padding: 14px 16px;

  max-width: 820px;

  margin: 10px 0 18px;

  color: rgba(255,255,255,.92);

  line-height: 1.55;

}



.alert strong{ color:#fff; }



/* How it works */

.how{

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.03);

  border-radius: 16px;

  padding: 18px 18px;

  max-width: 900px;

  margin: 10px 0 18px;

}



.how h3{

  font-size: 18px;

  letter-spacing: .5px;

  margin-bottom: 10px;

}



.how ol{

  padding-left: 20px;

  color: rgba(255,255,255,.86);

  line-height: 1.65;

}



.note{

  display:block;

  margin-top: 12px;

  opacity: .75;

  font-size: 14px;

}



/* Coming soon pill */

.coming{

  display:inline-block;

  padding: 10px 14px;

  border: 1px solid rgba(255,255,255,.2);

  border-radius: 999px;

  opacity:.86;

  font-weight: 900;

}



/* Contact card */

.contact-card{

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(255,255,255,.03);

  border-radius: 16px;

  padding: 18px;

  max-width: 900px;

}



.contact-item{

  display:flex;

  justify-content:space-between;

  gap: 16px;

  padding: 12px 0;

  border-bottom: 1px solid rgba(255,255,255,.08);

}



.contact-item:last-child{

  border-bottom: none;

}



.label{

  opacity: .75;

  font-weight: 800;

}



.value{

  color:#fff;

  text-decoration:none;

  font-weight: 900;

}



.value:hover{

  text-decoration: underline;

}



/* Footer */

.footer{

  margin-top: 26px;

  opacity: .65;

  font-size: 14px;

  text-align: left;

}

.site-footer{

  border-top: 1px solid rgba(255,255,255,.1);

  padding: 24px 0;

  margin-top: 60px;

  font-size: 13px;

  opacity: .85;

}



.footer-inner{

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  align-items: center;

}



.footer-links{

  display: flex;

  gap: 16px;

}



.footer-links a{

  color: rgba(255,255,255,.8);

  text-decoration: none;

}



.footer-links a:hover{

  text-decoration: underline;

}


/* ===== HERO OVERLAY CENTER FIX ===== */

.hero {

  position: relative;

  min-height: 100vh;

  overflow: hidden;

}



/* Overlay container */

.hero .overlay {

  position: absolute;

  inset: 0;

  z-index: 2;



  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;



  text-align: center;

  padding: 1rem;

}



/* ===== MAIN LOGO ===== */

.brand-logo {

  display: block;

  width: 320px;        /* DESKTOP SIZE */

  max-width: 80vw;     /* RESPONSIVE */

  height: auto;

  margin-bottom: 1.25rem;

}



/* Tablet */

@media (max-width: 768px) {

  .brand-logo {

    width: 240px;

  }

}



/* Mobile */

@media (max-width: 480px) {

  .brand-logo {

    width: 200px;

  }

}



/* ===== TAGLINE ===== */

.tagline {

  font-size: 1rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-bottom: 1.75rem;

  opacity: 0.9;

}



/* ===== CTA BUTTONS ===== */

.cta {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  justify-content: center;

}

.brand-logo {

  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.45));

}