/* components.css - buttons, cards, spec box, tags, strips */

/* buttons */
.btn{
  display:inline-block;font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;padding:13px 28px;border-radius:var(--radius-btn);
  transition:background-color .2s,border-color .2s,transform .05s;
}
.btn--primary{background:var(--accent-btn);color:#fff}
.btn--primary:hover{background:#675937}
/* header nav CTA only — dark grey rather than taupe */
.nav .btn--primary{background:var(--ink);font-weight:400}
.nav .btn--primary:hover{background:#26221d}
/* CTA section (above footer) Book today — dark grey */
.cta .btn--primary{background:#3f3f3f}
.cta .btn--primary:hover{background:#2b2b2b}
.btn--outline{border:.5px solid #cbc8c1;color:var(--ink);font-weight:400}
.btn--outline:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn--sm{padding:9px 18px}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* eyebrow price + labels */
.price{font-size:13px;color:var(--accent-ink)}

/* hero */
.hero{text-align:center;padding-block:clamp(44px,6vw,60px) 40px}
.hero h1{margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.hero .lede{max-width:460px;margin:0 auto 14px}
.hero .reassure{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);margin:0 auto 26px;max-width:none}
.hero .btn-row{justify-content:center}
/* treatment tick list */
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;margin:0 auto 20px}
.ticks li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.06em;color:var(--ink)}
.ticks .tick{display:flex;flex:none;color:var(--accent-btn)}
.ticks .tick svg{width:17px;height:17px;display:block}
.hero__eyebrow{margin:0 auto 18px;max-width:none}

/* wide image band */
.imgband{height:200px;margin-inline:var(--gutter)}

/* Victoria Wellness wordmark — script is the artwork, the two lines below are
   live text so their weight and tracking stay adjustable */
.wordmark{display:flex;flex-direction:column;align-items:center}
/* the script "writes on" left-to-right — the direction the hand actually moves.
   The clip edge is slanted to match the script's own slope, so the reveal follows
   the pen rather than wiping past it like a straight bar. */
.wordmark__name{
  display:block;width:130px;height:45px;
  background:var(--ink);
  -webkit-mask:url(../images/logo/victoria-wellness-clinic-logo.png) no-repeat center/contain;
  mask:url(../images/logo/victoria-wellness-clinic-logo.png) no-repeat center/contain;
  animation:writeOn 2.1s cubic-bezier(.55,.06,.32,1) both;
}
@keyframes writeOn{
  from{clip-path:polygon(0 0, 0 0, -14% 100%, -14% 100%)}
  to  {clip-path:polygon(0 0, 118% 0, 104% 100%, 0 100%)}
}
/* text-indent offsets the trailing space letter-spacing adds, so it stays centred */
.wordmark__w{
  font-family:var(--font-body);font-weight:500;font-size:9px;line-height:1;
  letter-spacing:.42em;text-indent:.42em;color:var(--accent-ink);margin-top:1px;
  animation:logoFade .8s ease-out 1.65s both;
}
.wordmark__c{
  font-family:var(--font-body);font-weight:600;font-size:6.5px;line-height:1;
  letter-spacing:.3em;text-indent:.3em;color:var(--accent-ink);margin-top:6px;
  animation:logoFade .8s ease-out 1.95s both;
}
.wordmark--footer .wordmark__name{width:145px;height:51px}
.wordmark--footer .wordmark__w{font-size:10px}
.wordmark--footer .wordmark__c{font-size:7.5px}

/* manufacturer stat badges (supplied artwork, used as-is) */
/* the muscle/fat badges carry an "on average*" caption inside the artwork (pill = 80%
   of the image); the 30-min badge is pill-only. Sized so the pills match, and
   top-aligned so they sit on the same line. */
.stat-badges{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-top:22px}
.stat-badges img{height:50px;width:auto;display:block}
.stat-badges img.is-pill-only{height:40px}
.stat-note{font-size:11px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:46ch}
/* EXION ships two icon formats — tall chevrons and wide pills. They can't share a
   height without one becoming unreadable, so each row is sized to its own shape. */
.stat-rows{display:flex;flex-direction:column;align-items:center;gap:20px}
.stat-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px}
.stat-row--tall img{height:132px;width:auto;display:block}
.stat-row--wide img{height:54px;width:auto;display:block}
.stat-rows .stat-note{text-align:center;max-width:none;margin-top:4px}

/* treatment brand lockups — each logo's alpha is used as a mask so they all
   render in one ink, regardless of the colour BTL shipped the master in.
   Width/height are fixed per logo to preserve each one's own aspect ratio. */
.brandmark{
  display:block;margin-bottom:14px;
  background:var(--ink);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
}
.brandmark--emfusion{width:138px;height:18px;
  -webkit-mask-image:url(../images/treatments/emfusion-logo.png);
  mask-image:url(../images/treatments/emfusion-logo.png)}
.brandmark--emface{width:130px;height:21px;
  -webkit-mask-image:url(../images/treatments/emface-logo.png);
  mask-image:url(../images/treatments/emface-logo.png)}
.brandmark--emsculpt{width:180px;height:21px;
  -webkit-mask-image:url(../images/treatments/emsculpt-neo-logo.png);
  mask-image:url(../images/treatments/emsculpt-neo-logo.png)}
.brandmark--exion{width:101px;height:21px;
  -webkit-mask-image:url(../images/treatments/exion-logo.png);
  mask-image:url(../images/treatments/exion-logo.png)}

/* nav dropdown */
.nav__group{position:relative}
.nav__trigger{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;
  color:var(--text);cursor:pointer;transition:color .2s;
}
.nav__trigger:hover,.nav__trigger[aria-expanded="true"]{color:var(--ink)}
.nav__chev{width:13px;height:13px;flex:none;transition:transform .2s}
.nav__trigger[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav .nav__menu{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  min-width:216px;padding:8px;
  background:var(--bg);border:.5px solid var(--line);border-radius:var(--radius-card);
  box-shadow:0 18px 40px -18px rgba(58,53,46,.3);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:60;
}
.nav .nav__menu[data-open="true"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__menu a{display:block;padding:9px 12px;border-radius:2px;transition:background-color .15s,color .15s}
.nav__menu a:hover{background:var(--band)}
.nav__menu-all{border-top:.5px solid var(--line);margin-top:6px;padding-top:6px}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)}
.trust__item{padding:22px 16px;text-align:center;border-right:.5px solid var(--line)}
.trust__item:last-child{border-right:0}
.trust__item .ico{color:var(--accent);display:flex;justify-content:center}
.trust__item p{font-size:12px;font-weight:600;color:var(--ink);margin:8px auto 0;letter-spacing:.5px;max-width:none}

/* cards */
.card{background:#fff;border:.5px solid var(--line);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column}
.card__media{display:block}
/* flex column + flex:1 lets the actions row sit at the bottom of every card,
   so the buttons line up regardless of title or description length */
.card__body{padding:18px;display:flex;flex-direction:column;flex:1}
.card__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:10px}
.card__head .price{white-space:nowrap}
.card p{font-size:13px;line-height:1.6;margin:0 0 14px}
.card__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto}
.card__more{
  font-size:12px;letter-spacing:.3px;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px;
  transition:color .15s;
}
.card__more:hover{color:var(--ink)}
/* circular arrow — the card's only action now that Book has moved to the offers */
.card__go{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:.5px solid #cbc8c1;color:var(--accent-btn);
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
.card__go svg{width:17px;height:17px;display:block;transition:transform .2s}
.card__go:hover{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
.card__go:hover svg{transform:translateX(2px)}
.card .ph{border-radius:0;aspect-ratio:16/10}
.card__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}

/* treatment names in the body sans; the section title stays in the display serif
   like every other section heading */
#treatments .card h3{
  font-family:var(--font-body);font-weight:600;
  font-size:16px;letter-spacing:.01em;
}
/* [data-reveal] is added by main.js, so no-JS renders the titles normally */
#treatments .card h3[data-reveal]{
  opacity:0;transform:translateX(-14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1);
}
#treatments .card h3[data-revealed]{opacity:1;transform:none}

/* section heading block */
.head{text-align:center;margin-bottom:28px}
.head .eyebrow{margin:0 auto 8px;max-width:none}
.head h2{margin:0}

/* offers */
.offer{
  background:#fff;border:.5px solid var(--line);border-radius:var(--radius-card);
  padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.offer h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:.01em;margin:0}
.offer__price{font-size:12px;color:var(--text);margin:14px 0 0;max-width:none;letter-spacing:.04em}
.offer__price strong{
  display:block;margin-top:5px;
  font-family:var(--font-body);font-weight:400;font-size:24px;letter-spacing:-.01em;color:var(--ink);
}
/* benefits read better ranged left, even though the rest of the card is centred */
/* the bottom margin guarantees a gap even when margin-top:auto on the button
   has no slack left, i.e. when the card is full.
   The list is centred as a block but each row keeps its own left edge, so the
   ticks line up rather than staggering with the text length. */
.offer__benefits{
  margin:16px auto 20px;padding:0;list-style:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.offer__benefits li{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.45;color:var(--text);text-align:left}
.offer__benefits .ico{color:var(--accent-btn);flex:none;display:flex;margin-top:1px}
.offer__benefits .ico svg{width:13px;height:13px;display:block}
.offer .btn{margin-top:auto}
.offer__price{margin-bottom:2px}
/* longer label needs to fit a narrow card, so ease the size and tracking */
.offer__btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.09em;padding:9px 14px;
}
.offer__btn .btn__arrow{width:12px;height:12px;flex:none;transition:transform .2s}
.offer__btn:hover .btn__arrow{transform:translateX(3px)}
.offer-note{
  margin:26px auto 0;max-width:none;text-align:center;
  font-size:13px;color:var(--text);
}
.offer-note strong{color:var(--ink);font-weight:600}

/* before/after */
.ba{border:.5px solid var(--line);border-radius:var(--radius-card);padding:14px}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* supplied before/after cards already carry their own labels and credit */
.ba img{width:100%;height:auto;display:block;border-radius:6px}
.ba__pair .ph{aspect-ratio:1;position:relative}
.ba__tag{position:absolute;top:8px;left:8px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.ba__tag--after{color:var(--accent-ink)}
.ba__cap{font-size:13px;color:var(--text);text-align:center;margin:12px 0 4px}
/* max-width:none + auto margins, else p{max-width:60ch} pins the box left and
   text-align only centres inside that box */
.ba__credit{font-size:10px;color:var(--muted);text-align:center;margin:0 auto;max-width:none}

/* embedded map */
/* the map is a cross-origin iframe, so its own styling can't be touched — a CSS
   filter on the element desaturates it and warms it toward the site's taupe */
.map-embed{
  display:block;width:100%;height:260px;margin-top:10px;
  border:.5px solid var(--line);border-radius:var(--radius-card);
  filter:grayscale(1);
}
.map-link{margin:10px 0 0;font-size:12px;max-width:none}
.map-link a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px}
.map-link a:hover{color:var(--ink)}

/* on the homepage the map sits in a two-column split, so it fills the column
   rather than using the fixed height it has on the contact page */
.location .map-embed{height:100%;min-height:280px;margin-top:0}

/* location */
.location .split{align-items:stretch}
.location .ph{min-height:220px}
.location__card{border:.5px solid var(--line);border-radius:var(--radius-card);padding:30px;display:flex;flex-direction:column;justify-content:center}
.location__card address{font-style:normal;font-size:14px;line-height:1.8;color:var(--text);margin:8px 0 6px}

/* CTA */
.cta{text-align:center}
.cta h2{margin:0 0 12px}
.cta p{max-width:none;margin:0 auto 22px}
.cta .btn-row{justify-content:center}

/* ---- treatment page ---- */
.tphero{padding-block:48px}
.tphero .split{align-items:center}
.tphero h1{margin:0 0 18px}
.tphero h1 em{font-style:normal;color:var(--accent-ink)}
.tphero .lede{margin:0 0 24px}
.tp-media{display:flex;flex-direction:column;gap:18px}
.tp-media .ph{aspect-ratio:5/4}
.tp-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius-card);display:block}
/* device renders are portrait cut-outs — show them whole rather than cropping */
.tp-media img.is-device,.card__media img.is-device{object-fit:contain;background:var(--band)}

/* spec box */
.spec{border:.5px solid var(--line);border-radius:var(--radius-card);padding:6px 22px 12px}
.spec__row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:.5px solid var(--line)}
.spec__row:last-child{border-bottom:0}
.spec__k{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-ink)}
.spec__v{font-size:14px;color:var(--ink)}
.spec__v--price{color:var(--accent-ink)}

/* benefit list + area tags */
.blist{display:flex;flex-direction:column;gap:11px;padding:0;margin:0;list-style:none}
.blist li{display:flex;gap:10px;font-size:14px;color:#5f5b53;align-items:flex-start}
.blist .ico{color:var(--accent-btn);flex:none;display:flex;margin-top:2px}
.blist .ico svg{width:16px;height:16px;display:block}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tag{background:#fff;border:.5px solid var(--line);border-radius:var(--radius-btn);padding:6px 14px;font-size:13px;color:#5f5b53}

/* ---- animated logo mark ---- */
.brand{align-items:center}
.logo{width:68px;height:68px;display:block}
.logo--footer{width:72px;height:72px}
.logo__ring{fill:none;stroke:var(--accent);stroke-width:1.8;animation:logoFade .8s ease-out both}
.logo__mono{font-family:var(--font-logo);font-style:italic;font-weight:500;font-size:33px;fill:var(--ink);text-anchor:middle;animation:logoFade .8s ease-out .3s both}
.logo__div{stroke:var(--ink);stroke-width:1.6;animation:logoFade .8s ease-out .3s both}
.logo__sub{font-family:var(--font-body);font-weight:400;font-size:15px;letter-spacing:1px;fill:var(--accent-ink);text-anchor:middle;animation:logoFade .8s ease-out .5s both}
@keyframes logoFade{from{opacity:0}to{opacity:1}}

/* ---- forms (contact) ---- */
.form{max-width:560px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.field input,.field textarea{width:100%;font:inherit;font-weight:400;color:var(--ink);background:#fff;border:.5px solid #cbc8c1;border-radius:var(--radius-btn);padding:12px 14px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(170,160,149,.28)}
.field textarea{min-height:130px;resize:vertical}
.field-error{display:block;color:#a24a3d;font-size:12px;margin-top:6px}
[aria-invalid="true"]{border-color:#a24a3d}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.info-row{display:flex;gap:12px;margin-bottom:18px;font-size:14px;color:var(--text)}
.info-row .ico{color:var(--accent);flex:none;margin-top:2px}
.info-row h4{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-ink);margin:0 0 3px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:28px}}