/* ============ RESET ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#0d0d0d; color:#ffffff; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ============ HEADER ============ */
header {
  position:relative; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px;
  background:#ffffff;
  border-bottom:1px solid #f0e4e4;
}


.logo-img { height:110px; }

nav ul { display:flex; gap:26px; }
nav a {
  font-size:14px; font-weight:500; color:#1a1a1a;
  position:relative; padding-bottom:4px;
}
nav a::after {
  content:''; position:absolute; left:0; bottom:0;
  width:0%; height:2px; background:#d81324;
  transition:width .3s ease;
}
nav a:hover::after { width:100%; }

.head-actions { display:flex; align-items:center; gap:12px; }
.btn-call, .btn-book {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:30px;
  white-space:nowrap;
}
.btn-call { background:#fff0f0; color:#d81324; border:1px solid #f5b8b8; }
.btn-book {
  background:linear-gradient(120deg,#d81324,#ff4d4d);
  color:#ffffff;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-book:hover { transform:translateY(-2px); box-shadow:0 8px 20px -6px #d81324; }

.menu-toggle {
  display:none; font-size:22px; background:none; border:none; color:#1a1a1a; cursor:pointer;
}

/* ============ HERO ============ */
.hero {
  position:relative;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  align-items:center;
  gap:40px;
  padding:60px 40px 50px;
  background:
    radial-gradient(ellipse at 15% 20%, #1a1a1a 0%, transparent 60%),
    #0d0d0d;
  min-height:540px;
}

.hero-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.leaf {
  position:absolute; width:120px; height:120px;
  border-radius:0 100% 0 100%;
  background:linear-gradient(135deg,#d8132433,#d813240d);
  animation:sway 7s ease-in-out infinite;
}
.leaf.l1 { top:8%; right:8%; }
.leaf.l2 { bottom:10%; left:2%; width:80px; height:80px; animation-delay:1.5s; }
@keyframes sway {
  0%,100% { transform:rotate(0deg) translateY(0); }
  50% { transform:rotate(8deg) translateY(-10px); }
}

.hero-text { position:relative; z-index:2; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:1.2px;
  color:#ff8080; border:1px solid #d813244d;
  padding:6px 14px; border-radius:30px;
  opacity:0; animation:fadeUp .7s ease forwards;
}

h1 {
  font-family:'Fraunces',serif; font-weight:600;
  font-size:44px;
  line-height:50px; margin:16px 0 14px;
  opacity:0; animation:fadeUp .7s ease .12s forwards;
}
h1 em { font-style:italic; color:#d81324; }

.hero-sub {
  color:#c9b3b3; font-size:15px; max-width:520px; line-height:26px;
  opacity:0; animation:fadeUp .7s ease .24s forwards;
}
.hero-sub b { color:#ffffff; font-weight:600; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:translateY(0); }
}

.stat-row {
  display:flex; gap:18px; flex-wrap:wrap;
  margin-top:20px;
  opacity:0; animation:fadeUp .7s ease .36s forwards;
}
.stat-row div { font-size:13px; color:#e9d9d9; display:flex; align-items:center; gap:6px; }
.stat-row span.num { color:#d81324; font-weight:600; font-size:15px; }

.hero-cta { display:flex; gap:14px; margin-top:26px; opacity:0; animation:fadeUp .7s ease .48s forwards; }
.cta-primary, .cta-secondary {
  padding:13px 24px; border-radius:8px; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
}
.cta-primary {
  background:#d81324; color:#ffffff;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta-primary:hover { transform:translateY(-3px); box-shadow:0 10px 24px -8px #d81324; }
.cta-secondary {
  border:1px solid #ffffff33; color:#ffffff;
  transition:background .25s ease;
}
.cta-secondary:hover { background:#ffffff10; }

.hero-address {
  margin-top:30px; font-size:12px; color:#a98989;
  display:flex; flex-direction:column; gap:4px;
  opacity:0; animation:fadeUp .7s ease .6s forwards;
}

/* ============ HERO VISUAL ============ */
.hero-visual { position:relative; z-index:2; }
.visual-frame {
  position:relative; width:100%; height:520px;
  border-radius:170px 220px 220px 140px / 200px 170px 240px 190px;
  overflow:hidden;
  background:linear-gradient(160deg,#330000,#141414 70%);
  animation:morph 10s ease-in-out infinite;
}
@keyframes morph {
  0%,100% { border-radius:170px 220px 220px 140px / 200px 170px 240px 190px; }
  50% { border-radius:220px 170px 140px 220px / 170px 220px 170px 240px; }
}
.visual-frame img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
}

.float-card {
  position:absolute; background:#ffffff; color:#141414;
  border-radius:14px; padding:12px 16px;
  font-size:13px; font-weight:600;
  box-shadow:0 14px 30px -10px #00000066;
  display:flex; align-items:center; gap:8px;
  animation:floaty 4s ease-in-out infinite;
}
.float-card.fc1 { top:40px; left:-30px; animation-delay:.2s; }
.float-card.fc2 { bottom:30px; right:-24px; animation-delay:1s; }
.float-card .dot { width:8px; height:8px; border-radius:50%; background:#d81324; }
@keyframes floaty {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}

/* ============ RESPONSIVE ============ */
@media (max-width:940px) {
  nav, .head-actions .btn-call { display:none; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; text-align:left; padding-top:40px; min-height:auto; }
  .hero-visual { margin-top:40px; max-width:360px; }
  .visual-frame { height:420px; }
  .float-card.fc1 { left:0; }
  .float-card.fc2 { right:0; }
}

@media (max-width:520px) {
  header { padding:12px 20px; }
  .btn-book .txt { display:none; }
  .hero { padding:30px 24px 40px; }
  h1 { font-size:32px; line-height:38px; }
  .stat-row { gap:12px; }
  .hero-cta { flex-wrap:wrap; }
  .visual-frame { height:340px; }
}


/* ============ TREATMENTS ============ */
.treatments {
  background:linear-gradient(180deg,#fbeaea 0%,#fff5f5 45%,#ffffff 100%);
  padding:64px 40px 72px;                 /* was 90px 40px 100px */
}

.treat-head {
  max-width:760px; margin:0 auto 44px; text-align:center;   /* was 60px */
}
.eyebrow-dark {
  color:#d81324; border:1px solid #d8132433; background:#ffffff;
}
.treat-head h2 {
 font-weight:600;
  font-size:38px; line-height:46px; color:#141414;
  margin:14px 0 16px;                     /* was 18px 0 20px */
}
.treat-head h2 span { color:#d81324; }
.treat-head p { font-size:15px; line-height:26px; color:#6e5555; }

.treat-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}

.treat-card {
  background:#ffffff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px -14px rgba(42,15,30,0.15);
  transition:transform .4s ease, box-shadow .4s ease;
  display:flex; flex-direction:column;
}
.treat-card:hover {
  transform:translateY(-10px);
  box-shadow:0 26px 50px -18px rgba(216,19,36,0.35);
}

.treat-media {
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,#1a1a1a,#330000);
}
.treat-media img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.treat-card:hover .treat-media img { transform:scale(1.08); }

.treat-num {
  position:absolute; left:18px; bottom:-14px;
  font-weight:600; font-style:italic;
  font-size:56px; color:#ffffff; opacity:.55;
  text-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.treat-icon {
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; border-radius:12px;
  background:#d81324; color:#ffffff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:transform .4s ease;
}
.treat-card:hover .treat-icon { transform:rotate(18deg) scale(1.08); }

.treat-body { padding:28px 24px 26px; }    /* was 34px 26px 30px */
.treat-body h3 { font-size:21px; color:#141414; margin-bottom:4px; }
.treat-tag {
  display:block; font-size:12px; font-weight:600; color:#d81324;
  margin-bottom:12px;                      /* was 14px */
}
.treat-body > p {
  font-size:13px; line-height:22px; color:#6e5555; margin-bottom:16px;   /* was 18px */
}
.treat-body h4 {
  font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  color:#a98989; margin-bottom:10px;
}
.treat-body ul { display:flex; flex-direction:column; gap:8px; }
.treat-body li {
  position:relative; padding-left:22px;
  font-size:13px; color:#1a1a1a; line-height:20px;
}
.treat-body li::before {
  content:'✓'; position:absolute; left:0; top:0;
  width:16px; height:16px; border-radius:50%;
  background:#ffe0e0; color:#d81324;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* scroll reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0ms); }
.reveal.in-view { opacity:1; transform:translateY(0); }

@media (max-width:940px) {
  .treat-grid { grid-template-columns:1fr 1fr; }
  .treatments { padding:52px 24px 60px; }   /* was 70px 24px 80px */
}
@media (max-width:640px) {
  .treat-grid { grid-template-columns:1fr; }
  .treat-head h2 { font-size:28px; line-height:34px; }
}

/* ============ TREATMENTS CTA ============ */
.treat-cta { grid-column: 1 / -1; }
.treat-cta {
  max-width:600px; margin:40px auto 0; text-align:center;   /* was 56px */
}
.treat-cta p {
  font-size:14px; color:#6e5555; margin-bottom:18px;
}
.treat-cta-buttons {
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
.cta-secondary-light {
  border:1px solid #d8132455; color:#d81324;
}
.cta-secondary-light:hover { background:#fff0f0; }

@media (max-width:520px) {
  .treat-cta-buttons { flex-direction:column; align-items:center; }
  .treat-cta-buttons a { width:220px; justify-content:center; }
}



.adv-treatments {
  background:
    radial-gradient(circle at 12% 15%, #ffe2e2 0%, transparent 50%),
    radial-gradient(circle at 88% 85%, #ffeaea 0%, transparent 55%),
    #fffbfb;
  padding:64px 40px 80px;
}

.adv-head {
  max-width:760px; margin:0 auto 48px; text-align:center;
}
.adv-head h2 {
  font-weight:600;
  font-size:36px; line-height:44px; color:#141414;
  margin:14px 0 16px;
}
.adv-head h2 span { color:#d81324; }
.adv-head p { font-size:15px; line-height:26px; color:#6e5555; }

.adv-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}

.adv-card {
  position:relative;
  overflow:hidden;
  background:#ffffff;
  border-radius:18px;
  padding:32px 26px 28px;
  box-shadow:0 10px 26px -16px rgba(42,15,30,0.18);
  transition:transform .4s ease, box-shadow .4s ease;
}

/* accent line that grows in from the left on hover */
.adv-card::before {
  content:'';
  position:absolute; top:0; left:0;
  width:0; height:3px;
  background:#d81324;
  transition:width .4s ease;
}
.adv-card:hover::before { width:100%; }

.adv-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 40px -18px rgba(216,19,36,0.3);
}

/* faint oversized numeral in the corner, darkens + nudges on hover */
.adv-card-num {
  position:absolute; top:4px; right:14px;
  font-weight:700; font-style:italic;
  font-size:52px; line-height:1;
  color:rgba(216,19,36,0.07);
  transition:color .4s ease, transform .4s ease;
}
.adv-card:hover .adv-card-num {
  color:rgba(216,19,36,0.14);
  transform:translate(-3px,3px);
}

.adv-icon {
  position:relative; z-index:1;
  width:52px; height:52px; border-radius:14px;
  background:#ffe0e0; color:#d81324;
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  margin-bottom:18px;
  transition:transform .35s ease, background .35s ease, color .35s ease;
}
.adv-card:hover .adv-icon {
  background:#d81324; color:#ffffff;
  transform:rotate(-8deg) scale(1.06);
}

.adv-card h3 {
  position:relative; z-index:1;
  font-weight:600;
  font-size:18px; color:#141414;
  transition:color .3s ease;
}
.adv-card:hover h3 { color:#d81324; }

/* underline that expands under the heading on hover */
.adv-line {
  width:22px; height:2px;
  margin:10px 0 12px;
  background:#d81324;
  transition:width .35s ease;
}
.adv-card:hover .adv-line { width:44px; }

.adv-card p {
  position:relative; z-index:1;
  font-size:13px; line-height:21px; color:#6e5555;
}

@media (max-width:1100px) {
  .adv-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:940px) {
  .adv-treatments { padding:52px 24px 64px; }
  .adv-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .adv-grid { grid-template-columns:1fr; }
  .adv-head h2 { font-size:27px; line-height:34px; }
}
/* ============ WHY CHOOSE ============ */
.why-choose {
  background:
    linear-gradient(180deg, #fbeaea 0%, #fff5f5 45%, #ffffff 100%);
  padding:90px 40px 100px;
}

.why-head { max-width:640px; margin:0 auto 56px; text-align:center; }
.eyebrow-pink { color:#d81324; border:1px solid #d8132433; background:#ffffff; }
.why-head h2 {
 font-weight:600;
  font-size:36px; line-height:44px; color:#141414;
 
}
.why-head h2 span { color:#d81324; }
.why-head p { font-size:14px; color:#6e5555; }

.why-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}

.why-card {
  position:relative;
  background:#141414;
  border:1px solid #ffffff14;
  border-radius:16px;
  padding:28px 22px;
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.why-card::before {
  content:'';
  position:absolute; top:0; left:0;
  width:0%; height:2px;
  background:linear-gradient(90deg,#d81324,#ff8080);
  transition:width .5s ease;
}
.why-card:hover {
  transform:translateY(-6px);
  border-color:#d8132440;
  background:#1f1f1f;
}
.why-card:hover::before { width:100%; }

.why-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,#d81324,#ff4d4d);
  font-size:20px; margin-bottom:16px;
  transition:transform .35s ease;
}
.why-icon i { color:#ffffff; font-size:18px; }
.why-card:hover .why-icon { transform:scale(1.1) rotate(-6deg); }

.why-card h3 { font-size:15px; color:#ffffff; font-weight:600; margin-bottom:8px; }
.why-card p { font-size:12.5px; line-height:20px; color:#b7a2a2; }

@media (max-width:940px) {
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .why-choose { padding:70px 24px 80px; }
}
@media (max-width:520px) {
  .why-head h2 { font-size:28px; line-height:34px; }
}

/* ============ ANTI-AGEING (TABBED) ============ */
.antiageing {
  background:rgb(20, 20, 20);
  padding:30px 30px 30px;
}
.aa-head { max-width:760px; margin:0 auto 56px; text-align:center; }
.aa-head h2 {
  font-weight:600;
  font-size:36px; line-height:44px; color:white;
  margin:18px 0 20px;
}
.aa-head h2 span { color:#d81324; }
.aa-head p { font-size:15px; line-height:26px; color:#e1d9d9; }

.aa-wrap {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:300px 1fr; gap:0;
  border-radius:24px; overflow:hidden;
  box-shadow:0 20px 50px -24px rgba(42,15,30,0.25);
}

/* tab list */
.aa-tabs {
  background:#fbeaea;
  display:flex; flex-direction:column;
  padding:14px;
}
.aa-tab {
  display:flex; align-items:center; gap:14px;
  background:transparent; border:none; text-align:left;
  padding:16px 14px; border-radius:14px; cursor:pointer;
  border-left:3px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.aa-tab:hover { background:#ffffff; }
.aa-tab.active { background:#ffffff; border-left-color:#d81324; }
.aa-tab-icon {
  flex-shrink:0;
  width:40px; height:40px; border-radius:10px;
  background:#ffe0e0; color:#d81324;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:background .3s ease, color .3s ease;
}
.aa-tab.active .aa-tab-icon { background:#d81324; color:#ffffff; }
.aa-tab-text { display:flex; flex-direction:column; gap:3px; }
.aa-tab-text strong { font-size:14px; color:#141414; }
.aa-tab-text small { font-size:11.5px; color:#998989; }

/* panels */
.aa-panels {
  position:relative;
  background:#fff6f6;
  min-height:520px;
}
.aa-panel {
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  opacity:0; pointer-events:none;
  transform:translateX(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.aa-panel.active {
  opacity:1; pointer-events:auto;
  transform:translateX(0);
  position:relative;
}
.aa-panel-media { position:relative; overflow:hidden; background:#1a1a1a; }
.aa-panel-media img { width:100%;height:560px; object-fit:cover; }

.aa-panel-body { padding:35px 40px; overflow-y:auto; }
.aa-chip {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  color:#d81324; margin-bottom:14px;
}
.aa-panel-body h3 {
 font-size:26px; color:#141414; margin-bottom:14px;
}
.aa-panel-body > p { font-size:13.5px; line-height:23px; color:#6e5555; margin-bottom:18px; }
.aa-panel-body h4 {
  font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  color:#a98989; margin-bottom:10px;
}
.aa-panel-body ul { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.aa-panel-body li {
  position:relative; padding-left:22px;
  font-size:13px; color:#1a1a1a; line-height:20px;
}
.aa-panel-body li::before {
  content:'✓'; position:absolute; left:0; top:0;
  width:16px; height:16px; border-radius:50%;
  background:#ffe0e0; color:#d81324;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.aa-note {
  background:#ffe9e9; border-left:3px solid #d81324;
  padding:12px 16px; border-radius:8px;
  font-size:12.5px; color:#a31f1f; line-height:19px;
  margin-bottom:22px;
}
.aa-cta { display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:940px) {
  .aa-wrap { grid-template-columns:1fr; border-radius:18px; }
  .aa-tabs { flex-direction:row; overflow-x:auto; gap:8px; }
  .aa-tab { flex-shrink:0; min-width:200px; border-left:none; border-bottom:3px solid transparent; }
  .aa-tab.active { border-bottom-color:#d81324; }
  .aa-panels { min-height:auto; }
  .aa-panel { position:relative; display:none; grid-template-columns:1fr; opacity:1; transform:none; }
  .aa-panel.active { display:grid; }
  .aa-panel-media { height:260px; }
  .aa-panel-body { padding:32px 24px; }
}
@media (max-width:520px) {
  .antiageing { padding:70px 20px 80px; }
  .aa-head h2 { font-size:27px; line-height:33px; }
  .aa-panel-body h3 { font-size:22px; }
}


/* ============ ANTI-AGEING: EXTRA TAB STYLES ============ */
.aa-subline { font-size:13px; font-weight:600; color:#1a1a1a; margin-bottom:10px; }
.aa-cta-label {
  display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
  color:#a98989; margin-bottom:12px;
}
.aa-tabs { max-height:560px; overflow-y:auto; }

@media (max-width:940px) {
  .aa-tabs { max-height:none; }
}

/* ============ FACIAL PEELING v2 ============ */
.peel-v2 {
  background:linear-gradient(180deg,#fbeaea 0%,#fff5f5 45%,#ffffff 100%);
  padding:90px 40px 100px;
}
.peel-v2-head,
.peel-v2-tags,
.peel-v2-slider,
.peel-v2-note,
.peel-v2-cta {
  max-width:820px; margin-left:auto; margin-right:auto;
}
.peel-v2-head { text-align:center; }
.peel-v2-head h2 {
 
  font-size:34px; line-height:42px; color:#141414;
  margin:16px 0 18px;
}
.peel-v2-head h2 span { color:#d81324; }
.peel-v2-head p { font-size:14.5px; line-height:25px; color:#6e5555; margin-bottom:36px; }

.peel-v2-tags {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-bottom:56px;
}
.ptag {
  display:inline-flex; align-items:center; gap:7px;
  background:#fbeaea; border:1px solid #f5b8b8;
  padding:9px 16px; border-radius:30px;
  font-size:12.5px; color:#1a1a1a; font-weight:500;
  opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity .5s ease, transform .5s ease, background .3s ease, border-color .3s ease;
  transition-delay:var(--d,0ms);
}
.ptag.in-view { opacity:1; transform:translateY(0) scale(1); }
.ptag i { color:#d81324; font-size:11px; }
.ptag:hover { background:#d81324; color:#ffffff; border-color:#d81324; }
.ptag:hover i { color:#ffffff; }

.peel-v2-slider {
  background:linear-gradient(160deg,#141414,#1a1a1a);
  border-radius:24px;
  padding:44px 40px 40px;
  margin-bottom:30px;
}

.intensity-track {
  position:relative;
  display:flex; justify-content:space-between;
  margin-bottom:38px;
  padding:0 4px;
}
.intensity-track::before {
  content:''; position:absolute; top:9px; left:4px; right:4px;
  height:2px; background:#ffffff22;
}
.intensity-fill {
  position:absolute; top:9px; left:4px;
  height:2px; background:#d81324;
  width:4%; transition:width .5s cubic-bezier(.4,.2,.2,1);
}
.intensity-stop {
  position:relative; z-index:2;
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.istop-dot {
  width:20px; height:20px; border-radius:50%;
  background:#1a1a1a; border:2px solid #ffffff33;
  transition:background .35s ease, border-color .35s ease, transform .35s ease;
}
.intensity-stop.active .istop-dot {
  background:#d81324; border-color:#d81324;
  transform:scale(1.15);
  box-shadow:0 0 0 6px #d8132426;
}
.istop-label { font-size:12px; color:#a98989; font-weight:600; transition:color .35s ease; }
.intensity-stop.active .istop-label { color:#ffffff; }

.intensity-panels { position:relative; min-height:120px; text-align:left; }
.intensity-panel {
  position:absolute; inset:0;
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
.intensity-panel.active { opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.ipanel-chip { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:#ff8080; margin-bottom:10px; }
.intensity-panel h3 { font-size:22px; color:#ffffff; margin-bottom:10px; }
.intensity-panel p { font-size:13px; line-height:22px; color:#d3b3b3; }

.peel-v2-note {
  background:#fbeaea; border-left:3px solid #d81324;
  padding:14px 18px; border-radius:10px;
  font-size:12.5px; line-height:19px; color:#a31f1f;
  text-align:left; margin-bottom:30px;
}
.peel-v2-cta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

@media (max-width:640px) {
  .peel-v2 { padding:70px 24px 80px; }
  .peel-v2-head h2 { font-size:27px; line-height:34px; }
  .peel-v2-slider { padding:32px 22px 28px; }
  .istop-label { font-size:10.5px; }
  .intensity-panel h3 { font-size:19px; }
}


/* ===============================
   SECTION
================================ */

.skin-conditions {
  position: relative;
  overflow: hidden;
  padding: 70px 20px;
  background:
    radial-gradient(at 85% 10%, rgb(26, 26, 26) 0%, transparent 55%),
    rgb(13, 13, 13);
}

.skin-container {
  max-width: 1200px;
  margin: auto;
}


/* ===============================
   HEADING
================================ */

.skin-heading {
  max-width: 700px;
  margin: 0 auto 42px;
  text-align: center;
}

.skin-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 13px;
  border: 1px solid rgba(217, 43, 43, .35);
  border-radius: 30px;
  color: #e33b3b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.skin-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.skin-heading h2 span {
  color: #d92b2b;
}

.skin-heading-line {
  width: 38px;
  height: 2px;
  margin: 14px auto;
  background: #d92b2b;
}

.skin-heading p {
  max-width: 620px;
  margin: auto;
  color: #baa8a8;
  font-size: 13px;
  line-height: 1.65;
}


/* ===============================
   CARDS
================================ */

.skin-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.skin-card {
  position: relative;
  min-width: 0;
  padding: 24px 20px;
  overflow: hidden;
  border: 1px solid rgba(232, 59, 131, .14);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.skin-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #d92b2b;
  transition: width .4s ease;
}

.skin-card:hover {
  transform: translateY(-7px);
  border-color: rgba(217,43,43,.4);
  box-shadow: 0 18px 40px rgba(217,43,43,.12);
}

.skin-card:hover::before {
  width: 100%;
}


/* ===============================
   NUMBER
================================ */

.skin-number {
  position: absolute;
  top: 8px;
  right: 14px;
  color: rgba(217,43,43,.07);
  font-size: 60px;
  line-height: 1;
  font-weight: 800;
  transition: .4s ease;
}

.skin-card:hover .skin-number {
  color: rgba(217,43,43,.14);
  transform: translate(-4px, 4px);
}


/* ===============================
   ICON
================================ */

.skin-icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 11px;
  background: linear-gradient(145deg,#e23a3a,#8f1414);
  box-shadow: 0 8px 18px rgba(226,58,58,.18);
  transition: .4s ease;
}

.skin-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: .4s ease;
}

.skin-card:hover .skin-icon {
  transform: rotate(-7deg) scale(1.08);
}

.skin-card:hover .skin-icon svg {
  transform: rotate(10deg);
}


/* ===============================
   CONTENT
================================ */

.skin-card h3 {
  position: relative;
  z-index: 1;
  min-height: 45px;
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  transition: color .3s ease;
}

.skin-card:hover h3 {
  color: #e33b3b;
}

.skin-line {
  width: 25px;
  height: 2px;
  margin: 10px 0 12px;
  background: #d92b2b;
  transition: width .35s ease;
}

.skin-card:hover .skin-line {
  width: 48px;
}

.skin-card p {
  margin: 0;
  color: #b8a8a8;
  font-size: 11.5px;
  line-height: 1.7;
}

.skin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: #e33b3b;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  transform: translateY(5px);
  transition: .35s ease;
}

.skin-link span {
  font-size: 14px;
}

.skin-card:hover .skin-link {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================
   BOTTOM
================================ */

.skin-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.skin-bottom p {
  margin: 0;
  color: #a99595;
  font-size: 11px;
}

.skin-bottom strong {
  color: #fff;
}

.skin-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-radius: 30px;
  background: #d31f1f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: .3s ease;
}

.skin-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(211,31,31,.25);
}


/* ===============================
   REVEAL ANIMATION
================================ */

.reveal,
.reveal-card {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal-card:nth-child(1) {
  transition-delay: .05s;
}

.reveal-card:nth-child(2) {
  transition-delay: .12s;
}

.reveal-card:nth-child(3) {
  transition-delay: .19s;
}

.reveal-card:nth-child(4) {
  transition-delay: .26s;
}

.reveal.active,
.reveal-card.active {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================
   TABLET
================================ */

@media (max-width: 900px) {

  .skin-conditions {
    padding: 60px 20px;
  }

  .skin-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .skin-card h3 {
    min-height: auto;
  }

}


/* ===============================
   MOBILE
================================ */

@media (max-width: 600px) {

  .skin-conditions {
    padding: 50px 15px;
  }

  .skin-heading {
    margin-bottom: 30px;
  }

  .skin-heading h2 {
    font-size: 31px;
  }

  .skin-heading p {
    font-size: 12px;
  }

  .skin-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .skin-card {
    padding: 22px 20px;
  }

  .skin-card p {
    font-size: 11.5px;
  }

  .skin-link {
    opacity: 1;
    transform: none;
  }

  .skin-bottom {
    flex-direction: column;
    gap: 13px;
    margin-top: 25px;
    text-align: center;
  }

}


/* ===============================
   SMALL MOBILE
================================ */

@media (max-width: 380px) {

  .skin-heading h2 {
    font-size: 28px;
  }

  .skin-card {
    padding: 20px 17px;
  }

}
/* =========================================================
   SKIN CONSULTATION SECTION
========================================================= */

.skin-consultation-section {
    width: 100%;
    background: #100f0f;
    overflow: hidden;
}

.skin-consultation-container {
    width: 100%;
    min-height: 585px;

    display: grid;
    grid-template-columns: 52% 48%;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.skin-location-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 10% 70px 15%;

    background: #100f0f;
}

.skin-location-content h2 {
    margin: 0;

    max-width: 560px;

    color: #f5f5f5;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(34px, 3.5vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.skin-location-content h2 span {
    color: #ef3030;
    font-style: italic;
}

.skin-red-line {
    width: 38px;
    height: 3px;

    margin: 20px 0 18px;

    background: #ef3030;
}

.skin-location-content > p {
    max-width: 570px;

    margin: 0;

    color: #9c9999;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   LEFT CONTACT DETAILS
========================================================= */

.skin-contact-info {
    display: flex;
    flex-direction: column;

    gap: 18px;

    margin-top: 27px;
}

.skin-info-box {
    padding-left: 15px;

    border-left: 1px solid #ef3030;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.skin-info-box span {
    color: #ef3030;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.skin-info-box strong,
.skin-info-box a {
    color: #d6d3d3;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    text-decoration: none;
}

.skin-info-box a {
    display: inline-block;

    transition: color 0.2s ease;
}

.skin-info-box a:hover {
    color: #ef3030;
}


/* =========================================================
   RIGHT FORM AREA
========================================================= */

.skin-form-wrapper {
    width: 100%;

    padding: 20px 6.5% 30px;

    background: #252221;

    border-left: 1px solid rgba(255, 255, 255, 0.03);
}

.skin-form-wrapper h2 {
    margin: 0 0 24px;

    color: #f4f4f4;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -1px;
}

.skin-form-wrapper h2 span {
    color: #ef3030;
    font-style: italic;
}


/* =========================================================
   FORM
========================================================= */

#skinConsultationForm {
    width: 100%;
}

.form-group {
    width: 100%;

    margin-bottom: 13px;
}

.form-group label {
    display: block;

    margin-bottom: 6px;

    color: #eeeeee;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.5px;
}


/* =========================================================
   INPUTS + SELECT
========================================================= */

.form-group input,
.form-group select {
    display: block;

    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid #dedede;
    border-radius: 6px;

    outline: none;

    background: #ffffff;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input::placeholder {
    color: #888888;
    opacity: 1;
}

.form-group select {
    cursor: pointer;

    appearance: auto;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.form-group input:focus,
.form-group select:focus {
    border-color: #ef3030;

    box-shadow:
        0 0 0 2px rgba(239, 48, 48, 0.12);
}


/* =========================================================
   VALIDATION ERROR
========================================================= */

.form-group input.input-error,
.form-group select.input-error {
    border-color: #ef3030;

    box-shadow:
        0 0 0 2px rgba(239, 48, 48, 0.10);
}

.error-message {
    display: block;

    min-height: 0;

    margin-top: 4px;

    color: #ff5d5d;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.3;
}


/* =========================================================
   FORM STATUS
========================================================= */

.form-status {
    min-height: 17px;

    margin: 3px 0 5px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.form-status.error {
    color: #ff5d5d;
}

.form-status.success {
    color: #5be28a;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

#skinConsultationForm button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 44px;

    margin: 0;

    padding: 0 20px;

    border: none;
    border-radius: 6px;

    background: #d91f1f;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

#skinConsultationForm button:hover {
    background: #ed2d2d;
}

#skinConsultationForm button:active {
    transform: translateY(1px);
}

#skinConsultationForm button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* =========================================================
   LOADING STATE
========================================================= */

.button-loader {
    display: none;
}


/* =========================================================
   HONEYPOT
========================================================= */

.hp-field {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .skin-consultation-container {
        grid-template-columns: 50% 50%;
    }

    .skin-location-content {
        padding: 60px 8%;
    }

    .skin-form-wrapper {
        padding: 30px 6%;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 850px) {

    .skin-consultation-container {
        grid-template-columns: 1fr 1fr;
    }

    .skin-location-content {
        padding: 50px 7%;
    }

    .skin-location-content h2 {
        font-size: 34px;
    }

    .skin-location-content > p {
        font-size: 13px;
    }

    .skin-form-wrapper {
        padding: 28px 5%;
    }

    .skin-form-wrapper h2 {
        font-size: 32px;
    }

    .form-group {
        margin-bottom: 11px;
    }

    .form-group input,
    .form-group select {
        height: 42px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .skin-consultation-section {
        width: 100%;
    }

    .skin-consultation-container {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }


    /* -----------------------------------------
       LEFT CONTENT
    ----------------------------------------- */

    .skin-location-content {
        width: 100%;

        padding: 55px 24px 45px;

        box-sizing: border-box;
    }

    .skin-location-content h2 {
        max-width: 100%;

        font-size: 34px;
        line-height: 1.1;
    }

    .skin-location-content > p {
        max-width: 100%;

        font-size: 14px;
        line-height: 1.8;
    }

    .skin-contact-info {
        margin-top: 25px;
    }


    /* -----------------------------------------
       FORM
    ----------------------------------------- */

    .skin-form-wrapper {
        width: 100%;

        padding: 42px 24px 50px;

        box-sizing: border-box;

        border-top: 1px solid rgba(255,255,255,0.05);
        border-left: none;
    }

    .skin-form-wrapper h2 {
        margin-bottom: 25px;

        font-size: 34px;
        line-height: 1.06;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        font-size: 12px;
        margin-bottom: 7px;
    }

    .form-group input,
    .form-group select {
        height: 46px;

        font-size: 14px;
    }

    #skinConsultationForm button {
        height: 46px;

        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .skin-location-content {
        padding: 45px 18px 38px;
    }

    .skin-location-content h2 {
        font-size: 30px;

        letter-spacing: -0.8px;
    }

    .skin-location-content > p {
        font-size: 13px;
        line-height: 1.75;
    }

    .skin-form-wrapper {
        padding: 35px 18px 42px;
    }

    .skin-form-wrapper h2 {
        font-size: 30px;
    }

    .form-group input,
    .form-group select {
        height: 44px;

        padding: 0 12px;

        font-size: 13px;
    }

    #skinConsultationForm button {
        height: 45px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .skin-location-content h2,
    .skin-form-wrapper h2 {
        font-size: 27px;
    }

    .skin-location-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .skin-form-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }

}
/* =========================================================
   CONSULTATION POPUP
========================================================= */

.consultation-popup {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    box-sizing: border-box;
}


/* SHOW POPUP */

.consultation-popup.active {
    display: flex;
}


/* =========================================================
   POPUP OVERLAY
========================================================= */

.consultation-popup-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(4px);
}


/* =========================================================
   POPUP BOX
========================================================= */

.consultation-popup-box {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;

    max-height: 92vh;

    overflow-y: auto;

    padding: 32px 36px 35px;

    background: #252221;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 8px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55);

    box-sizing: border-box;

    animation: consultationPopupOpen 0.25s ease;
}


@keyframes consultationPopupOpen {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.consultation-popup-close {
    position: absolute;

    top: 12px;
    right: 15px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #ffffff;

    font-size: 30px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition: color 0.2s ease;
}

.consultation-popup-close:hover {
    color: #ef3030;
}


/* =========================================================
   POPUP HEADING
========================================================= */

.popup-heading {
    padding-right: 35px;

    margin-bottom: 25px;
}

.popup-heading > span {
    color: #ef3030;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.popup-heading h2 {
    margin: 7px 0 0;

    color: #f4f4f4;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 36px;
    line-height: 1.05;

    font-weight: 800;
}

.popup-heading h2 em {
    color: #ef3030;

    font-style: italic;
}

.popup-red-line {
    width: 38px;
    height: 3px;

    margin-top: 17px;

    background: #ef3030;
}


/* =========================================================
   POPUP FORM
========================================================= */

#popupConsultationForm {
    width: 100%;
}

.popup-form-group {
    width: 100%;

    margin-bottom: 13px;
}

.popup-form-group label {
    display: block;

    margin-bottom: 6px;

    color: #eeeeee;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.5px;
}


/* =========================================================
   POPUP INPUTS
========================================================= */

.popup-form-group input,
.popup-form-group select {
    display: block;

    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid #dedede;

    border-radius: 6px;

    outline: none;

    background: #ffffff;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.popup-form-group input::placeholder {
    color: #888888;
}

.popup-form-group input:focus,
.popup-form-group select:focus {
    border-color: #ef3030;

    box-shadow:
        0 0 0 2px rgba(239, 48, 48, 0.12);
}


/* =========================================================
   POPUP VALIDATION
========================================================= */

.popup-form-group input.input-error,
.popup-form-group select.input-error {
    border-color: #ef3030;

    box-shadow:
        0 0 0 2px rgba(239, 48, 48, 0.10);
}

.popup-error-message {
    display: block;

    min-height: 0;

    margin-top: 4px;

    color: #ff5d5d;

    font-size: 11px;
    line-height: 1.3;
}


/* =========================================================
   POPUP STATUS
========================================================= */

.popup-form-status {
    min-height: 17px;

    margin: 3px 0 5px;

    font-size: 12px;
    line-height: 1.4;
}

.popup-form-status.error {
    color: #ff5d5d;
}

.popup-form-status.success {
    color: #5be28a;
}


/* =========================================================
   POPUP BUTTON
========================================================= */

#popupConsultationForm button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 44px;

    margin: 0;

    padding: 0 20px;

    border: none;

    border-radius: 6px;

    background: #d91f1f;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

#popupConsultationForm button:hover {
    background: #ed2d2d;
}

#popupConsultationForm button:active {
    transform: translateY(1px);
}

#popupConsultationForm button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* =========================================================
   LOADER
========================================================= */

.popup-button-loader {
    display: none;
}


/* =========================================================
   HONEYPOT
========================================================= */

.popup-hp-field {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* =========================================================
   MOBILE POPUP
========================================================= */

@media (max-width: 600px) {

    .consultation-popup {
        padding: 12px;
    }

    .consultation-popup-box {
        max-height: 94vh;

        padding: 28px 22px 25px;

        border-radius: 7px;
    }

    .consultation-popup-close {
        top: 8px;
        right: 10px;
    }

    .popup-heading {
        margin-bottom: 22px;
    }

    .popup-heading h2 {
        font-size: 30px;
    }

    .popup-form-group {
        margin-bottom: 12px;
    }

    .popup-form-group input,
    .popup-form-group select {
        height: 44px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .consultation-popup {
        padding: 8px;
    }

    .consultation-popup-box {
        padding: 25px 18px 22px;
    }

    .popup-heading h2 {
        font-size: 27px;
    }

}

/* =========================================================
   WHATSAPP FLOATING BUTTON
========================================================= */

.whatsapp-float {
    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #25D366;
    color: #ffffff;

    border-radius: 50%;

    text-decoration: none;

    z-index: 9990;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.whatsapp-float svg {
    width: 31px;
    height: 31px;

    fill: #ffffff;

    display: block;
}


/* Hover */

.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 12px 30px rgba(37, 211, 102, 0.35);
}


/* =========================================================
   PULSE
========================================================= */

.whatsapp-float::before {
    content: "";

    position: absolute;

    inset: -5px;

    border: 2px solid rgba(37, 211, 102, 0.45);

    border-radius: 50%;

    animation: whatsappPulse 2s infinite;

    pointer-events: none;
}


@keyframes whatsappPulse {

    0% {
        opacity: 0.8;
        transform: scale(0.9);
    }

    70% {
        opacity: 0;
        transform: scale(1.3);
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .whatsapp-float {
        right: 15px;
        bottom: 15px;

        width: 52px;
        height: 52px;
    }


    .whatsapp-float svg {
        width: 27px;
        height: 27px;
    }

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    background: #f8f8f8;
    color: #111111;
    border-top: 3px solid #ed1c24;
    overflow: hidden;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {
    padding: 55px 0 45px;
}

.footer-container {
    width: min(1180px, calc(100% - 60px));
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr
        1.25fr;

    gap: 55px;

    align-items: start;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
    max-width: 300px;
}


/* LOGO */

.footer-logo {
    display: inline-flex;
    flex-direction: column;

    text-decoration: none;

    line-height: 1;

    margin-bottom: 22px;
}


.footer-logo img
{
    width:100%;
    height:100px;
}


/* DESCRIPTION */

.footer-description {
    max-width: 285px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    line-height: 1.75;

    color: #666666;
}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {
    display: flex;
    gap: 10px;

    margin-top: 24px;
}


.footer-social a {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dddddd;

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    text-decoration: none;

    font-size: 16px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.footer-social a:hover {
    background: #ed1c24;

    border-color: #ed1c24;

    color: #ffffff;

    transform: translateY(-4px);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h3,
.footer-map-column h3 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    font-weight: 700;

    color: #111111;
}


.footer-title-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #ed1c24;

    margin-top: 10px;
    margin-bottom: 20px;
}


/* =========================================================
   SIMPLE TREATMENT LINKS
========================================================= */

.footer-simple-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.footer-simple-links a {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 150px;

    padding: 10px 0;

    border-bottom: 1px solid #e5e5e5;

    color: #555555;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color .25s ease,
        padding-left .25s ease;
}


.footer-simple-links a span {
    color: #ed1c24;

    font-size: 15px;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.footer-simple-links a:hover {
    color: #ed1c24;

    padding-left: 5px;
}


.footer-simple-links a:hover span {
    opacity: 1;

    transform: translateX(0);
}

/* =========================================================
   CONTACT
========================================================= */

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;

    color: #666666;
    font-size: 15px;
    line-height: 1.65;

    text-decoration: none;
}


.footer-contact-icon {
    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #e2e2e2;

    color: #ed1c24;

    font-size: 13px;
}


.location-dot {
    font-size: 8px;
    color: #ed1c24;
}


/* PHONE HOVER */

.footer-contact-item[href]:hover {
    color: #ed1c24;
}


/* =========================================================
   APPOINTMENT
========================================================= */

.footer-appointment {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 4px;

    padding: 13px 17px;

    background: #111111;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    border-radius: 3px;

    transition:
        background .3s ease,
        transform .3s ease;
}


.footer-appointment span {
    color: #ed1c24;

    font-size: 17px;

    transition: transform .3s ease;
}


.footer-appointment:hover {
    background: #ed1c24;

    transform: translateY(-2px);
}


.footer-appointment:hover span {
    color: #ffffff;

    transform: translateX(4px);
}


/* =========================================================
   MAP
========================================================= */

.footer-map-column {
    min-width: 0;
}


.footer-map {
    width: 100%;

    height: 190px;

    overflow: hidden;

    border-radius: 8px;

    background: #eeeeee;

    border: 1px solid #e4e4e4;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
}


.footer-map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.footer-bottom {
    border-top: 1px solid #e4e4e4;

    background: #ffffff;
}


.footer-bottom-inner {
    width: min(1180px, calc(100% - 60px));

    min-height: 62px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.footer-bottom p {
    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    color: #777777;
}


.footer-top {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;
    font-weight: 600;

    color: #555555;

    text-decoration: none;

    transition: color .25s ease;
}


.footer-top span {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dddddd;

    border-radius: 50%;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.footer-top:hover {
    color: #ed1c24;
}


.footer-top:hover span {
    background: #ed1c24;

    border-color: #ed1c24;

    color: #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .footer-container {
        grid-template-columns: 1.2fr 1fr 1fr;

        gap: 40px;
    }

    .footer-map-column {
        grid-column: 1 / -1;

        max-width: 500px;
    }

    .footer-map {
        height: 200px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .footer-main {
        padding: 30px 0 20px;
    }

    .footer-container {
        width: min(100% - 36px, 500px);

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .footer-brand {
        max-width: 100%;
    }


    .footer-description {
        max-width: 390px;
    }


    .footer-column,
    .footer-map-column {
        width: 100%;
    }


    .footer-treatment-group {
        margin-bottom: 18px;
    }


    .footer-map-column {
        max-width: none;
    }


    .footer-map {
        height: 220px;
    }


    .footer-bottom-inner {
        width: min(100% - 36px, 500px);

        min-height: auto;

        padding: 18px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .footer-main {
        padding: 40px 0 35px;
    }


    .footer-container {
        width: calc(100% - 28px);

        gap: 30px;
    }


    .footer-logo-name {
        font-size: 34px;
    }


    .footer-description {
        font-size: 13px;
    }


    .footer-map {
        height: 200px;
    }


    .footer-bottom-inner {
        width: calc(100% - 28px);
    }
}