/* ══════════════════════════════════════
   YMC SHARED STYLES
   Used across index, treatments, doctor, gallery
══════════════════════════════════════ */
:root {
  --blue:      #0891b2;
  --blue-dk:   #0e7490;
  --blue-lt:   #e0f2f9;
  --blue-pale: #f0fafd;
  --accent:    #c89b5a;
  --ink:       #1b3040;
  --ink-md:    #3d5a6e;
  --ink-lt:    #6a8fa3;
  --line:      #d4eaf2;
  --line-soft: #e8f3f8;
  --bg:        #ffffff;
  --bg-soft:   #f4fbf9;
  --bg-cream:  #fdfcf8;
  --shadow-sm: 0 2px 16px rgba(8,145,178,.07);
  --shadow:    0 8px 40px rgba(8,145,178,.11);
  --shadow-lg: 0 20px 60px rgba(8,145,178,.14);
  --r-sm: 6px; --r: 12px; --r-lg: 20px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink-md);font-size:16px;line-height:1.6;overflow-x:hidden;padding-top:88px}
img{max-width:100%;display:block}
a{color:inherit}


.fjalla-one-regular {
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* ── PROGRESS ── */
#prog{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--blue);z-index:10001;transition:width .1s linear}

/* ── LAYOUT ── */
.container{max-width:1240px;margin:0 auto;padding:0 5vw}
section{padding:5.5rem 0}
@media(max-width:768px){section{padding:4rem 0}}

/* ── TYPE ── */
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
h2 em{font-style:italic;color:var(--blue)}

/* ── EYEBROW ── */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:1rem;padding:.4rem .9rem .4rem .7rem;background:linear-gradient(90deg,rgba(200,155,90,.08),rgba(8,145,178,.06));border-radius:100px;border:1px solid rgba(200,155,90,.2)}
.eyebrow::before{content:'';width:28px;height:1.5px;background:var(--accent);border-radius:2px}
.eyebrow::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--blue);margin-left:.2rem}

/* ── TOPBAR ── */
.topbar{background:var(--blue-dk);color:#fff;font-size:.74rem;padding:.5rem 5vw;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:400;letter-spacing:.02em;position:fixed;top:0;left:0;right:0;z-index:600;transition:transform .3s ease}
.topbar.hidden{transform:translateY(-100%)}
.topbar-left{display:flex;gap:1.4rem;align-items:center}
.topbar-item{display:inline-flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.82)}
.topbar-item .ic{color:var(--accent)}
.topbar a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar-right{display:flex;gap:1.4rem;align-items:center}

/* ── NAV ── */
nav{position:fixed;top:36px;left:0;right:0;z-index:500;background:white;border-bottom:1px solid rgba(255,255,255,.08);transition:background .4s,border-color .4s,box-shadow .3s,top .3s}
nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.nav-inner{max-width:1240px;margin:0px auto;padding:0rem 5vw;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo{display:flex;align-items:center;gap:1rem;text-decoration:none;flex-shrink:0}
/* .nav-mark{width:62px!important;height:62px!important;border-radius:12px;background:#ffffff!important;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 18px rgba(0,0,0,.2);padding:6px} */
.nav-mark{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-mark img{
  width:clamp(72px,10.5vw,90px)!important;
  height:clamp(72px,10.5vw,90px)!important;
  object-fit:contain!important;
  display:block
}
nav.scrolled .nav-mark{box-shadow:0 2px 8px rgba(255, 255, 255, 0.15)}
.nav-brand{display:flex;flex-direction:column;gap:0;line-height:1}
.nav-brand-primary{
  font-family:'Fjalla One',sans-serif;
  font-size:clamp(1rem,3.5vw,2.15rem)!important;
  font-weight:700;
  color:var(--ink)!important;
  display:block;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  transition:color .4s;
}
.nav-brand-secondary{
  font-family:'Inter',sans-serif;
  font-size:clamp(.5rem,1.75vw,1rem)!important;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-md)!important;
  display:block;
  line-height:1.4;
  transition:color .4s;
  border-top:1px solid var(--line);
  margin-top:.18rem;
  padding-top:.18rem;
}
nav.scrolled .nav-brand-secondary{color:var(--ink-md)!important;border-top-color:var(--line)}
nav.scrolled .nav-brand-primary{color:var(--ink)!important}
nav.scrolled .nav-brand-secondary{color:var(--blue)!important;border-top-color:var(--line)}
@media(max-width:768px){
  .nav-brand-primary{letter-spacing:.08em}
  .nav-brand-secondary{letter-spacing:.16em}
}
.nav-links{display:flex;gap:.2rem;list-style:none;align-items:center}
.nav-links a{font-size:.85rem;color:var(--ink-md);text-decoration:none;font-weight:500;padding:.5rem .85rem;border-radius:6px;transition:color .2s,background .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--blue);background:var(--blue-pale)}
nav.scrolled .nav-links a{color:var(--ink-md)}
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active{color:var(--blue);background:var(--blue-pale)}
.nav-cta{background:var(--blue)!important;color:#fff!important;padding:.55rem 1.1rem!important;border-radius:6px!important;box-shadow:0 4px 14px rgba(8,145,178,.4);white-space:nowrap}
.nav-cta:hover{background:var(--blue-dk)!important;transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;flex-shrink:0}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
nav.scrolled .burger span{background:var(--ink)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--blue-dk);z-index:490;flex-direction:column;padding:7rem 6vw 3rem;overflow-y:auto}
.mob-nav.open{display:flex}
.mob-nav a{padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.05rem;color:rgba(255,255,255,.85);text-decoration:none;font-weight:500;transition:color .2s}
.mob-nav a:hover{color:#fff}
.mob-nav .mob-cta{margin-top:1.5rem;background:var(--blue);color:#fff!important;text-align:center;border-radius:8px;padding:1rem!important;border:none!important}
@media(max-width:1024px){.nav-links{display:none}.burger{display:flex}}
@media(max-width:768px){
  .topbar{font-size:.68rem;padding:.35rem 4vw}
  .topbar .tb-hide,.topbar-right .tb-hide{display:none}
  .nav-inner{padding:.0rem 4vw}
  .nav-brand small{display:none}
}

/* ── PAGE HERO (inner pages) ── */
.page-hero{background:var(--blue-dk);padding:5rem 0 4rem;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(8,145,178,.3),transparent 70%),radial-gradient(ellipse 40% 60% at 90% 90%,rgba(14,116,144,.4),transparent 60%);pointer-events:none}
.page-hero-botanical{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='220' ry='280'/%3E%3Cellipse cx='300' cy='300' rx='160' ry='200' transform='rotate(30 300 300)'/%3E%3Cpath d='M300,80 Q380,180 300,300 Q220,180 300,80Z'/%3E%3Cpath d='M80,300 Q180,220 300,300 Q180,380 80,300Z'/%3E%3C/g%3E%3C/svg%3E");background-size:500px;animation:drift 30s linear infinite;pointer-events:none}
@keyframes drift{from{background-position:0 0}to{background-position:500px 500px}}
.page-hero .container{position:relative;z-index:1}
.page-hero-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1rem;font-weight:500}
.page-hero-eyebrow::before{content:'';width:24px;height:1px;background:var(--accent);display:block}
.page-hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:300;color:#fff;line-height:1.1;margin-bottom:1rem}
.page-hero h1 em{font-style:italic;color:var(--blue-lt)}
.page-hero p{font-size:1rem;color:rgba(255,255,255,.65);max-width:560px;line-height:1.75;font-weight:300}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.8rem;border-radius:8px;font-size:.92rem;font-weight:600;text-decoration:none;transition:all .25s var(--ease);border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 16px rgba(8,145,178,.3)}
.btn-primary:hover{background:var(--blue-dk);transform:translateY(-2px);box-shadow:0 8px 24px rgba(8,145,178,.4)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1ebe5a;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-pale)}
.btn-outline-wht{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);padding:1rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;transition:all .2s;display:inline-flex;align-items:center}
.btn-outline-wht:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── SECTION HEAD ── */
.section-head{margin-bottom:3.5rem;max-width:720px}
.section-head p{margin-top:1rem;color:var(--ink-lt);font-size:1rem;line-height:1.7}

/* ── CTA BANNER ── */
.cta-banner{padding:5rem 0;background:linear-gradient(135deg,var(--blue-dk),var(--blue) 50%,var(--blue-dk));color:#fff;position:relative;overflow:hidden;text-align:center}
.cta-banner::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.06),transparent 40%)}
.cta-banner .container{position:relative;z-index:1}
.cta-banner h2{color:#fff;margin-bottom:1rem}
.cta-banner h2 em{color:var(--accent)}
.cta-banner p{color:rgba(255,255,255,.75);max-width:520px;margin:0 auto 2rem;line-height:1.7}
.cta-banner-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta-banner-phones{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.cta-phone{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-size:1rem;font-weight:500;transition:color .2s}
.cta-phone:hover{color:var(--accent)}
.btn-white{background:#fff;color:var(--blue-dk);padding:1rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;transition:all .2s;display:inline-flex;align-items:center}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ── FLOAT BUTTONS ── */
#wa-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:600;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;text-decoration:none;box-shadow:0 8px 28px rgba(37,211,102,.5);transition:all .3s;opacity:0;transform:scale(.8);pointer-events:none}
#wa-float.show{opacity:1;transform:scale(1);pointer-events:auto}
#wa-float:hover{transform:scale(1.1)}
#book-float{position:fixed;bottom:1.5rem;right:5.5rem;z-index:600;background:var(--blue);color:#fff;padding:.82rem 1.4rem;border-radius:100px;text-decoration:none;font-size:.82rem;font-weight:600;box-shadow:0 6px 20px rgba(8,145,178,.4);transition:all .3s;opacity:0;transform:translateY(20px);pointer-events:none;white-space:nowrap}
#book-float.show{opacity:1;transform:translateY(0);pointer-events:auto}
#book-float:hover{background:var(--blue-dk);transform:translateY(-2px)}
@media(max-width:1024px){
  #wa-float{
    bottom:calc(0 + .8rem);
    right:1rem!important;
    width:48px!important;
    height:48px!important;
    opacity:1!important;
    transform:scale(1)!important;
    pointer-events:auto!important;
  }
  #book-float{
    display:flex!important;
    bottom:calc(0 + .8rem)!important;
    right:calc(1rem + 48px + .6rem)!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    font-size:.75rem;
    padding:.7rem 1rem;
    border-radius:100px;
    white-space:nowrap;
  }
}

/* ── FOOTER ── */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:4rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1.5rem}
.foot-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.foot-mark{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue-dk));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;}
.foot-brand-text strong{font-family:'Fraunces',serif;font-size:1.1rem;color:#fff;font-weight:500;display:block}
.foot-brand-text small{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500}
.foot-about{font-size:.85rem;line-height:1.7;max-width:300px;margin-bottom:1.3rem;color:rgba(255,255,255,.6)}
.foot-social{display:flex;gap:.6rem}
.foot-soc{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);text-decoration:none;font-size:.85rem;transition:all .2s;border:1px solid rgba(255,255,255,.1)}
.foot-soc:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.foot-col h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:1.2rem}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:.6rem}
.foot-col a{color:rgba(255,255,255,.6);text-decoration:none;font-size:.85rem;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-contact-item{margin-bottom:1rem;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.6)}
.foot-contact-item strong{color:#fff;font-weight:500}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:1rem}
.foot-disclaimer{font-size:.72rem;color:rgba(255,255,255,.3);line-height:1.6;margin-top:1rem;max-width:780px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-bottom{flex-direction:column;text-align:center}}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}


/* ── OVERFLOW FIX ── */
html{overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body{overflow-x:hidden;max-width:100vw;-webkit-text-size-adjust:100%;text-size-adjust:100%;padding-top:88px}



/* ── CROSS-BROWSER RESETS ── */
*{-webkit-box-sizing:border-box;box-sizing:border-box}
img{-webkit-user-drag:none;max-width:100%;height:auto}
input,select,textarea,button{-webkit-appearance:none;appearance:none;border-radius:0}
a{-webkit-tap-highlight-color:transparent}
.hero-card-photo{-webkit-transform:translateZ(0);transform:translateZ(0)}




/* ── SAFARI / CROSS-BROWSER COMPATIBILITY ── */

/* Fix Safari fixed positioning with safe areas */
.topbar{padding-left:max(.5rem,env(safe-area-inset-left));padding-right:max(.5rem,env(safe-area-inset-right))}
nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* Fix Safari backdrop-filter */
nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Fix Safari aspect-ratio on older versions */
.hero-card-photo{aspect-ratio:4/4.5}
@supports not (aspect-ratio:1){
  .hero-card-photo::before{float:left;padding-top:112.5%;content:''}
  .hero-card-photo::after{display:block;content:'';clear:both}
}

/* Fix Safari transform flicker on fixed elements */
.topbar,.bottom-nav{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}

/* Fix iOS Safari 100vh */
.mob-nav{height:100vh;height:-webkit-fill-available}

/* Fix Safari button appearance */
.cf-submit,.burger,.ymc-arrow,.vid-close,.cf-submit{-webkit-appearance:none;appearance:none}

/* Fix Safari font rendering */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Fix Safari overscroll */
html{overscroll-behavior:none}

/* Fix iOS input zoom */
input,select,textarea{font-size:16px!important}

/* Fix Safari flex gap */
@supports not (gap:1rem){
  .nav-inner>*+*{margin-left:2rem}
  .hero-cta-row>*+*{margin-left:.9rem}
}

/* Fix Chrome/Safari scrollbar hiding */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none}

/* Fix Safari sticky footer */
footer{-webkit-transform:translateZ(0);transform:translateZ(0)}

/* Fix bottom nav safe area */
.bottom-nav{padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
#wa-float,#book-float{margin-bottom:env(safe-area-inset-bottom)}

/* ── ANCHOR SCROLL OFFSET (for fixed navbar) ── */
[id]{scroll-margin-top:200px}


/* ── FOOTER BRAND OVERRIDE ── */
footer .foot-brand{display:flex;align-items:center;gap:.8rem;flex-wrap:nowrap;margin-bottom:1rem}
footer .nav-mark{background:transparent!important;box-shadow:none!important;padding:0!important;flex-shrink:0!important}
footer .nav-mark img{
  width:clamp(48px,7vw,90px)!important;
  height:clamp(48px,7vw,90px)!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1);
}
footer .nav-brand-primary{
  color:#fff!important;
  font-size:clamp(.9rem,3.5vw,2.15rem)!important;
  letter-spacing:.12em!important;
  line-height:1!important;
}
footer .nav-brand-secondary{
  color:rgba(255,255,255,.55)!important;
  border-top-color:rgba(255,255,255,.15)!important;
  font-size:clamp(.38rem,1vw,.52rem)!important;
}