/* =====================================================================
   Haista Dental — shared base layer
   Reset, fluid type, layout utilities and the motion primitives used by
   every theme. Themes only define tokens + component skins on top.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;min-height:100dvh;font-family:var(--font-body);font-size:var(--fs-base,1rem);line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
img{font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:1rem}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

/* ---------- fluid type scale ---------- */
:root{
  --fs-xs:clamp(.72rem,.7rem + .15vw,.8rem);
  --fs-sm:clamp(.84rem,.8rem + .2vw,.95rem);
  --fs-base:clamp(1rem,.96rem + .25vw,1.1rem);
  --fs-md:clamp(1.1rem,1rem + .5vw,1.3rem);
  --fs-lg:clamp(1.35rem,1.15rem + 1vw,1.9rem);
  --fs-xl:clamp(1.9rem,1.4rem + 2.4vw,3.1rem);
  --fs-2xl:clamp(2.4rem,1.6rem + 4vw,4.6rem);
  --fs-3xl:clamp(2.8rem,1.6rem + 6vw,6.4rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.8s;
  --container:1240px;
  --gutter:clamp(20px,4vw,48px);
  --section:clamp(72px,10vw,136px);
}

/* ---------- layout ---------- */
.container{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.container--wide{--container:1400px}
.container--narrow{--container:860px}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section)*.6)}
.grid{display:grid;gap:var(--gap,24px)}
@media(min-width:768px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid--4{grid-template-columns:repeat(4,1fr)}}
.flex{display:flex;gap:var(--gap,16px);align-items:center}
.stack>*+*{margin-top:var(--stack,1rem)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.hide-mobile{display:none}
@media(min-width:1024px){.hide-mobile{display:initial}.hide-desktop{display:none!important}}

/* ---------- media frames ---------- */
.frame{position:relative;overflow:hidden;background:var(--surface-2,#eee)}
.frame>img{width:100%;height:100%;object-fit:cover}
.frame--parallax>img{height:120%;will-change:transform}
.ratio-4-5{aspect-ratio:4/5}.ratio-3-4{aspect-ratio:3/4}.ratio-1-1{aspect-ratio:1}.ratio-16-9{aspect-ratio:16/9}.ratio-4-3{aspect-ratio:4/3}.ratio-3-2{aspect-ratio:3/2}

/* ---------- motion primitives ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal="left"]{transform:translate3d(-40px,0,0)}
[data-reveal="right"]{transform:translate3d(40px,0,0)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal="none"]{transform:none}
[data-reveal].is-in{opacity:1;transform:none}
/* curtain reveals: an overlay scales away instead of clipping the element, so the
   IntersectionObserver can still see the element (clip-path would hide it from the observer) */
[data-reveal="clip"],[data-reveal="clip-x"]{opacity:1;transform:none;position:relative;overflow:hidden}
[data-reveal="clip"]::after,[data-reveal="clip-x"]::after{content:"";position:absolute;inset:-1px;background:var(--curtain,var(--bg));z-index:3;pointer-events:none;transition:transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal="clip"]::after{transform-origin:bottom}
[data-reveal="clip-x"]::after{transform-origin:right}
[data-reveal="clip"].is-in::after{transform:scaleY(0)}
[data-reveal="clip-x"].is-in::after{transform:scaleX(0)}
[data-reveal="clip"] img,[data-reveal="clip-x"] img{transform:scale(1.12);transition:transform 1.4s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].is-in img{transform:scale(1)}
[data-stagger]>*{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*var(--step,70ms) + var(--d,0ms))}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(var(--i)*40ms + var(--d,0ms))}
[data-split].is-in .w>span{transform:translateY(0)}
.line-draw{position:relative}
.line-draw::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.line-draw.is-in::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-stagger]>*,[data-split] .w>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  [data-reveal="clip"]::after,[data-reveal="clip-x"]::after{display:none}
  .marquee__track{animation:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;position:relative;--speed:40s}
.marquee__track{display:flex;width:max-content;gap:var(--mgap,48px);animation:marquee var(--speed) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee--reverse .marquee__track{animation-direction:reverse}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--mgap,48px)/2))}}

/* ---------- before / after ---------- */
.ba{position:relative;overflow:hidden;--pos:50%;user-select:none;touch-action:pan-y}
.ba img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;z-index:3}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;z-index:2;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(0,0,0,.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.ba__label{position:absolute;top:14px;padding:6px 12px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);z-index:2;pointer-events:none}
.ba__label--before{left:14px}.ba__label--after{right:14px}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:22px 0;font-weight:600;font-size:var(--fs-md);line-height:1.3}
.acc__icon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:transform .5s var(--ease),background .3s,color .3s}
.acc__icon svg{width:16px;height:16px}
.acc__item.is-open .acc__icon{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__body{padding:0 0 24px;color:var(--muted);max-width:68ch}

/* ---------- carousel ---------- */
.carousel{display:flex;gap:var(--cgap,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{scroll-snap-align:start;flex:0 0 min(84vw,var(--cw,380px))}

/* ---------- header skeleton ---------- */
.header{position:sticky;top:0;z-index:50;transition:background .4s,box-shadow .4s,transform .4s var(--ease)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.nav{display:none;align-items:center;gap:32px}
@media(min-width:1024px){.nav{display:flex}}
.nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px}
@media(min-width:1024px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.nav-toggle span+span{margin-top:6px}
html.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
html.nav-open .nav-toggle span:nth-child(2){opacity:0}
html.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:49;background:var(--bg);padding:110px var(--gutter) 40px;display:flex;flex-direction:column;gap:28px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .4s}
html.nav-open .drawer{opacity:1;transform:none;visibility:visible;transition-delay:0s}
html.nav-open{overflow:hidden}
.drawer a.drawer__link{font-size:var(--fs-xl);font-weight:500;line-height:1.15;font-family:var(--font-display)}
.drawer__meta{margin-top:auto;display:grid;gap:12px;font-size:var(--fs-sm);color:var(--muted)}
@media(min-width:1024px){.drawer{display:none}}

/* ---------- sticky mobile cta ---------- */
.mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:translateY(120%);transition:transform .5s var(--ease)}
.mobile-cta.is-visible{transform:none}
@media(min-width:1024px){.mobile-cta{display:none}}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-sm);font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm,10px);background:var(--surface,#fff);transition:border-color .3s,box-shadow .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.field textarea{min-height:110px;resize:vertical}
.form-success{display:none;padding:28px;text-align:center}
.form.is-sent .form-success{display:block}
.form.is-sent .form-body{display:none}

/* ---------- scroll progress + misc ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(var(--scroll,0));transform-origin:left;background:var(--accent);z-index:60;pointer-events:none}
.ticker-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.stars{display:inline-flex;gap:2px;color:#F5B301}
.stars svg{width:14px;height:14px;fill:currentColor}
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{padding:16px 12px;text-align:left;border-bottom:1px solid var(--line)}
.table th{font-weight:600;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.table td:first-child{font-weight:600}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap .table{min-width:520px}
.lightbox-note{font-size:var(--fs-xs);color:var(--muted)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-sm);color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:var(--fs-lg);line-height:1.2;margin-top:2em;font-family:var(--font-display)}
.prose h3{font-size:var(--fs-md);margin-top:1.6em}
.prose ul{padding-left:1.2em;list-style:disc}
.prose li+li{margin-top:.4em}
.prose p{color:var(--muted)}
.prose strong{color:var(--ink)}