/* Aura — hub/index pages (/treatments/, /dental-problems/, /before-and-after/).
   Self-contained: hub pages load content.css + this, not service.css. */

.hub .reveal{opacity:0;transform:translateY(24px)}
.hub .reveal.in{opacity:1;transform:none;
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,.8,.26,1)}
@media (prefers-reduced-motion:reduce){.hub .reveal{opacity:1;transform:none}}
@media (scripting:none){.hub .reveal{opacity:1;transform:none}}

/* ---- hero ---- */
.svc-hero{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream);
  padding:88px 0 88px;isolation:isolate}
.svc-hero .wrap{max-width:960px;position:relative;z-index:3}
.svc-hero-glow{position:absolute;z-index:1;top:-170px;right:-130px;width:520px;height:520px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(191,161,95,.20),rgba(191,161,95,0) 62%);
  animation:hubFloat 9s ease-in-out infinite}
.svc-h-eyebrow{color:var(--gold);display:block;margin-bottom:20px;opacity:0;animation:hubRise .8s ease .1s forwards}
.svc-h-title{color:var(--cream);margin:0 0 20px;max-width:18ch;position:relative;
  font-size:clamp(38px,5.6vw,76px);line-height:1.04;opacity:0;
  animation:hubRise .95s cubic-bezier(.16,.8,.26,1) .22s forwards}
.svc-h-title::after{content:"";display:block;height:2px;width:0;margin-top:22px;
  background:linear-gradient(90deg,var(--gold),rgba(191,161,95,0));animation:hubDraw 1.1s ease 1s forwards}
.svc-hero .svc-lead{font-size:clamp(17px,2vw,20px);line-height:1.75;color:#e2d2ba;max-width:60ch;
  opacity:0;animation:hubRise .9s ease .5s forwards}
.svc-hero .svc-lead p{margin:0 0 .7em}.svc-hero .svc-lead p:last-child{margin-bottom:0}
.svc-h-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;opacity:0;animation:hubRise .9s ease .72s forwards}
.svc-h-cta .btn-ghost{color:var(--gold-lt);border-color:var(--gold)}
.svc-h-cta .btn-ghost:hover{background:rgba(191,161,95,.14);color:var(--cream)}
.svc-hero .svc-seam{position:absolute;left:50%;bottom:0;width:2px;height:60px;transform:translateX(-50%);
  background:linear-gradient(var(--gold),rgba(191,161,95,0));z-index:3}

/* shared section head */
.svc-offer-head{max-width:760px;margin:0 auto 40px;text-align:center}
.svc-offer-head .eyebrow{display:block;margin-bottom:14px;color:var(--gold-dk)}
.svc-offer-head h2{margin:0 0 16px}
.svc-offer-lead{color:var(--body);font-size:17px}
.svc-offer-lead p{margin:0}

/* ---- index: filter + grid ---- */
.hub-index{background:var(--ivory);padding:88px 0 92px}
.hub-tools{max-width:640px;margin:0 auto 34px;display:flex;align-items:center;gap:16px}
.hub-search{flex:1}
.hub-search .field{width:100%}
.hub-count{margin:0;flex:none;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--gold-dk);white-space:nowrap}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;
  max-width:var(--maxw);margin:0 auto}
.hub-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid rgba(43,30,23,.1);border-radius:6px;padding:22px 24px;
  text-decoration:none;overflow:hidden;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.hub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(43,30,23,.1);border-color:rgba(191,161,95,.55)}
.hub-card:hover::before{transform:scaleY(1)}
.hub-card.reveal.in{transition-delay:var(--d,0ms)}
.hub-card-name{font-family:var(--display);font-size:20px;color:var(--ink);line-height:1.2}
.hub-card-arw{font-size:19px;color:var(--gold-dk);flex:none;transition:transform .24s ease}
.hub-card:hover .hub-card-arw{transform:translateX(5px)}
.hub-card[hidden]{display:none}
.hub-empty{max-width:640px;margin:28px auto 0;text-align:center;color:var(--body)}
.hub-empty a{color:var(--gold-dk)}

/* ---- page copy below the index ---- */
.hub-copy{background:var(--cream);padding:80px 0}
.hub-copy-inner{max-width:760px;margin:0 auto}
.hub-copy-inner h2,.hub-copy-inner h3{margin-top:1.5em}
.hub-copy-inner>*:first-child{margin-top:0}

/* ---- before/after gallery cards ---- */
.hub-gallery{background:var(--ivory);padding:88px 0 92px}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;
  max-width:var(--maxw);margin:0 auto}
.ba-card{position:relative;display:block;background:#fff;border:1px solid rgba(43,30,23,.09);
  border-radius:6px;padding:32px 30px;overflow:hidden;text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.ba-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(191,161,95,0));transform:scaleX(0);
  transform-origin:left;transition:transform .4s ease}
.ba-card.is-link:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(43,30,23,.12);
  border-color:rgba(191,161,95,.55)}
.ba-card.is-link:hover::before{transform:scaleX(1)}
.ba-card.reveal.in{transition-delay:var(--d,0ms)}
.ba-card-idx{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--gold-dk)}
.ba-card h3{margin:10px 0 12px;font-size:clamp(21px,2.2vw,27px);color:var(--ink);line-height:1.2}
.ba-card-body{font-size:15.5px;line-height:1.7;color:var(--body)}
.ba-card-body p{margin:0 0 .6em}.ba-card-body p:last-child{margin-bottom:0}
.ba-card-go{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-dk)}
.ba-card-go i{font-style:normal;display:inline-block;transition:transform .25s ease}
.ba-card.is-link:hover .ba-card-go i{transform:translateX(5px)}

/* ---- close ---- */
.svc-close{position:relative;overflow:hidden;background:var(--espresso);color:#cdb9a0;
  text-align:center;padding:92px 0 100px}
.svc-close .wrap{max-width:720px;position:relative;z-index:2}
.svc-close .eyebrow{color:var(--gold);display:block;margin-bottom:18px}
.svc-close .big{font-family:var(--display);font-size:clamp(30px,4.2vw,54px);color:var(--cream);
  line-height:1.06;margin:0 auto;max-width:18ch}
.svc-close .sub{margin:20px auto 0;max-width:56ch;color:#cdb9a0;font-size:17px}
.svc-close .cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.svc-close .cta .btn-ghost{color:var(--gold-lt);border-color:var(--gold)}
.svc-close .cta .btn-ghost:hover{background:rgba(191,161,95,.14);color:var(--cream)}
.svc-bloom{display:block;width:9px;height:9px;margin:50px auto 0;transform:rotate(45deg);
  background:var(--gold);box-shadow:0 0 26px 6px rgba(191,161,95,.5)}

@keyframes hubRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hubDraw{to{width:120px}}
@keyframes hubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

@media (max-width:640px){
  .svc-hero{padding:58px 0 62px}
  .hub-index,.hub-gallery{padding:60px 0}
  .hub-tools{flex-direction:column;align-items:stretch;gap:12px}
  .hub-count{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .svc-hero-glow{animation:none}
  .svc-h-eyebrow,.svc-h-title,.svc-hero .svc-lead,.svc-h-cta{animation:none;opacity:1}
  .svc-h-title::after{animation:none;width:120px}
  .hub-card,.ba-card,.hub-card-arw,.ba-card-go i{transition:none}
}