/* ==========================================================================
   Aesthetic Master Infusions — global stylesheet
   One file for the whole site. Sections are reusable components:
   reuse the same class on any page and only change the content.

   1. Tokens          6. Hero              11. FAQ
   2. Base            7. Consult (form)    12. Blog cards
   3. Layout          8. Why choose us     13. About band + video modal
   4. Buttons         9. Services cards    14. Footer
   5. Header / nav   10. Reviews slider    15. Utilities
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --pink: #f38bb7;            /* Figma primary pink (buttons, top bar, accents) */
  --pink-hover: #ec74a8;
  --pink-soft: #fde3ee;       /* Why Choose Us / open FAQ background */
  --pink-text: #c13a78;       /* pink text on white — AA contrast */
  --black: #000000;
  --ink: #111111;
  --text: #1f1f1f;
  --muted: #555555;
  --line: #d9d9d9;
  --card: #f4f4f4;            /* service card background */
  --white: #ffffff;
  --star: #ffc107;            /* Figma star yellow */

  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --container: 1350px;
  --gutter: 20px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .08);
  --section-y: 70px;
}
@media (min-width: 768px)  { :root { --gutter: 32px; --section-y: 90px; } }

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; color: var(--black); line-height: 1.12; margin: 0; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--pink-text); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--black); color: var(--white); text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section-title { font-size: clamp(2rem, 4.4vw, 3.5rem); letter-spacing: -.01em; margin-bottom: 28px; }
.section-title--center { text-align: center; }

/* 4. BUTTONS --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 24px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none;
  color: var(--black); cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--pink); }
.btn--primary:hover { background: var(--pink-hover); }
.btn--outline { background: transparent; border-color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }
.btn--dark { background: var(--black); color: var(--pink); }
.btn--dark:hover { background: #2a2a2a; }
.btn--lg { min-height: 53px; padding: 0 24px; font-size: 19px; } /* Figma hero buttons: 53px tall, 19px */
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: .9rem; }
.btn--block { width: 100%; }

/* 5. HEADER / NAV ---------------------------------------------------------- */
.topbar {
  background: var(--pink); color: var(--black); text-align: center;
  font-size: 14px; font-weight: 500; line-height: 16px; padding: 2px var(--gutter); /* Figma: 20px bar, 14px Medium */
}
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.header__logo img { width: 150px; height: auto; }
.header__actions { display: none; }
.header__phone { display: inline-flex; align-items: center; gap: 10px; color: #f58abb; font-size: 23px; font-weight: 600; text-decoration: none; white-space: nowrap; } /* Figma: ~19px SemiBold, #F58ABB */
.header__phone:hover { color: var(--pink-text); }
.header__phone svg { width: 24px; height: 24px; color: #f58abb; }
.btn--header { /* Figma: 264×52, 17px Medium */
  min-height: 52px; padding: 0 26px; gap: 10px;
  font-size: 21px; font-weight: 500; line-height: 1;
}
.btn--header svg { width: 18px; height: 18px; margin-top: -1px; }
.header__logo, .header__phone svg, .nav__caret { flex: none; }

/* burger */
.header__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
}
.header__burger span { display: block; height: 2px; background: var(--black); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .header__burger span:nth-child(2) { opacity: 0; }
.nav-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile nav panel */
.nav { display: none; }
.nav-open .nav {
  display: block; position: fixed; z-index: 99; inset: var(--nav-top, 110px) 0 0 0;
  background: var(--white); overflow-y: auto; padding: 8px var(--gutter) 40px; border-top: 1px solid var(--line);
}
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list > li { border-bottom: 1px solid #eee; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  padding: 15px 2px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--black); text-decoration: none; text-align: left;
}
.nav__link.is-active { color: var(--pink-text); }
.nav__caret { width: 9px; height: 6px; color: var(--pink); transition: transform .2s; }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__menu { display: none; padding: 0 0 12px 12px; }
.nav__menu.is-open { display: block; }
.nav__menu ul { list-style: none; margin: 0; padding: 0; }
.nav__menu a { display: block; padding: 7px 4px; color: var(--text); font-size: .95rem; text-decoration: none; }
.nav__menu a:hover { color: var(--pink-text); }
.nav__menu a.is-current, .nav__menu .nav__group-title.is-current { color: var(--pink-text) !important; font-weight: 600; }   /* page you are on */
.nav__group + .nav__group { margin-top: 8px; }
.nav__group-title { font-weight: 600; color: var(--black) !important; }
.nav__group ul { padding-left: 12px; }
.nav__group ul a { font-size: .9rem; color: var(--muted); }
.nav__mobile-cta { display: grid; gap: 12px; margin-top: 24px; }

@media (min-width: 1180px) {
  .header__inner { min-height: 88px; } /* Figma header height */
  .header__logo img { width: 190px; }
  .header__burger, .nav__mobile-cta { display: none; }
  .header__actions { display: flex; align-items: center; gap: 22px; }
  .nav, .nav-open .nav { display: block; position: static; padding: 0; border: 0; overflow: visible; background: none; }
  .nav__list { display: flex; align-items: center; gap: 6px; }
  .nav__list > li { position: relative; border: 0; }
  .nav__link { width: auto; padding: 10px 10px; font-size: 18px; font-weight: 500; white-space: nowrap; justify-content: flex-start; } /* Figma: 16px Medium */
  .nav__menu {
    position: absolute; top: 100%; left: 0; min-width: 240px; padding: 12px;
    background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid #eee;
  }
  .nav__menu--mega { left: -160px; width: min(900px, 86vw); grid-template-columns: repeat(4, 1fr); gap: 0 20px; padding: 20px; }
  .nav__menu--mega.is-open { display: grid; }
  .nav__group + .nav__group { margin-top: 0; }
  .nav__group ul { padding-left: 0; }
}
/* small laptops: same look, tighter spacing so everything fits on one line */
@media (min-width: 1180px) and (max-width: 1439px) {
  .header__logo img { width: 160px; }
  .nav__list { gap: 0; }
  .nav__link { padding-inline: 9px; font-size: 15px; }
  .header__actions { gap: 16px; }
  .header__phone { font-size: 17px; gap: 7px; }
  .header__phone svg { width: 20px; height: 20px; }
  .btn--header { padding-inline: 18px; font-size: 15px; min-height: 48px; }
}

/* 6. HERO ------------------------------------------------------------------ */
/* Hero = one banner image (.hero__bg) + text on top.
   Desktop: the image fills the whole section (people on the right).
   Mobile: text first on a matching pink gradient, image below it. */
.hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fdc6df url("../images/backgrounds/hero-pink.webp") left top / cover no-repeat;   /* shared pink hero background */
}
.hero__bg {
  order: 2; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 78% center;
}
.hero__inner { display: grid; align-items: end; padding-top: 48px; }
@media (min-width: 640px) and (max-width: 991px) { .hero__bg { aspect-ratio: 16 / 9; } }
/* phones/tablets: the photo's own pink must melt into the text area's pink - no hard seam, one banner */
@media (max-width: 991px) {
  .hero__bg {
    margin-top: -12%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
            mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  }
}
@media (min-width: 992px) {
  /* keep the banner's own ratio so the people never slide under the text */
  .hero { display: flex; flex-direction: row; align-items: center; height: min(47.5vw, 820px); }
  .hero__bg { position: absolute; inset: 0; z-index: 0; height: 100%; aspect-ratio: auto; object-position: right center; }
}
/* ultra-wide screens: keep the photo at its natural ratio on the right, blend into the pink */
@media (min-width: 1921px) {
  .hero { background-size: auto 100%; background-repeat: repeat-x; }
  .hero__bg {
    left: auto; width: auto; max-width: none; object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
}
/* Hero text — values measured from the Figma frame (1440px) */
.hero__content { position: relative; z-index: 2; padding-bottom: 40px; color: #000; }
.hero__title {                                   /* Figma H1: Playfair Display 400, 99.27px, line-height 95%, letter-spacing -4% */
  font-family: var(--font-heading); font-weight: 400; font-style: normal; color: #000;
  font-size: clamp(3.2rem, 6.9vw, 99.27px); line-height: .95; letter-spacing: -.04em; margin-bottom: 29px;
}
.hero__title--long { font-size: clamp(2.6rem, 5.4vw, 78px); }   /* titles with one very long word (Microdermabrasion) */
.hero__sub {                                     /* Poppins ~20.6px / 31px, #000 */
  font-family: var(--font-body); font-size: clamp(17px, 1.6vw, 20.6px); font-weight: 400;
  line-height: 31px; color: #000; margin-bottom: 38px;
}
.hero__sub strong { font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 19px; margin-bottom: 30px; }
.hero__actions .btn {                            /* Figma buttons: 53px tall, Poppins 19px Medium */
  min-height: 53px; font-family: var(--font-body); font-size: 19px; font-weight: 500; color: #000; border-radius: 8px;
}
.hero__actions .btn--primary { padding-inline: 29px; gap: 12px; }   /* 177px wide */
.hero__actions .btn--outline { padding-inline: 21.5px; border-width: 1.5px; }  /* 153px wide */
.hero__actions .btn--outline:hover { color: #fff; }
.hero__actions .btn svg { width: 21px; height: 21px; }
.hero__rating {
  display: flex; align-items: center; gap: 14px; width: fit-content; margin-bottom: 39px;
  color: #000; text-decoration: none; font-size: 14px; line-height: 1;
}
.hero__rating strong { font-size: 16px; font-weight: 600; }
.hero__location {                                /* white 50% pill, 50px tall */
  display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 50px;
  padding: 0 23px 0 17px; border-radius: 30px; background: rgba(255, 255, 255, .5);
  color: #000; font-size: 19px; font-weight: 400; text-decoration: none;
}
.hero__location svg { width: 26px; height: 32px; flex: none; color: #f58abb; }
@media (min-width: 992px) {
  .hero__inner { position: relative; z-index: 1; padding-top: 0; }
  .hero__content { padding-block: 0; max-width: 560px; }
}
/* small laptops / landscape tablets: same overlay layout, compact text so it stays left of the photo */
@media (min-width: 992px) and (max-width: 1279px) {
  .hero { min-height: 470px; }
  .hero__content { max-width: 40vw; }
  .hero__title { font-size: clamp(50px, 5.9vw, 74px); margin-bottom: 18px; }
  .hero__title--long { font-size: clamp(40px, 4.6vw, 58px); }
  .hero__sub { font-size: 17px; line-height: 26px; margin-bottom: 24px; }
  .hero__actions { margin-bottom: 20px; }
  .hero__actions .btn { min-height: 48px; font-size: 17px; }
  .hero__rating { margin-bottom: 20px; }
  .hero__location { min-height: 44px; font-size: 17px; }
  .hero:not(.hero--page) .hero__content { max-width: 34vw; }   /* home banner: group photo starts further left */
  .hero:not(.hero--page) .hero__sub { font-size: 16px; }
}

.stars { display: inline-flex; gap: 6px; color: var(--star); }
.stars svg { width: 23px; height: 23px; fill: currentColor; }
.stars--sm svg { width: 16px; height: 16px; }

/* 7. CONSULT (form + intro text) ------------------------------------------ */
/* values measured from the Figma frame at 1440px */
.consult {
  padding-block: 80px;
  background: #ececec url("../images/backgrounds/intro-waves.webp") center / cover no-repeat;
}
.consult__inner { display: grid; gap: 44px; align-items: start; }
@media (min-width: 992px) { .consult__inner { grid-template-columns: 452px 1fr; gap: 47px; } }
.consult__content .section-title {                 /* Playfair 55px / 53px, #000 */
  font-size: clamp(2rem, 4vw, 56px); line-height: .95; color: #000; margin: 22px 0 36px;
}
.consult__content { max-width: 810px; }            /* Figma text column width */
.consult__content p { font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000; margin: 0 0 23px; }
.consult__content p:last-child { margin-bottom: 0; }
.consult__content a { color: #000; text-decoration: underline; text-underline-offset: 2px; }

.consult__form-card {
  background: #fff; border: 1px solid #e8e9e9; border-radius: 16px; padding: 17px 21px 27px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}
.consult__form-title { font-size: 28px; font-weight: 600; line-height: 1.2; color: #1b262a; margin-bottom: 31px; }

/* Form component (reused by every form on the site) */
.form { display: grid; gap: 12px; }
.form__row { display: grid; gap: 12px; }
@media (min-width: 420px) { .form__row { grid-template-columns: 1fr 1fr; gap: 11px; } }
.form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form__field label {                               /* Poppins 11.5px SemiBold, uppercase */
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600; line-height: 14px;
  text-transform: uppercase; color: #1b262a;
}
.form__field input, .form__field select, .form__field textarea {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid #e8e9e9; border-radius: 8px;
  background-color: #fff; color: #1b262a; font-family: var(--font-body); font-size: 12.5px;
  transition: border-color .2s, box-shadow .2s;
}
.form__field textarea { height: 63px; min-height: 63px; padding: 15px 14px 10px; resize: none; line-height: 1.5; }
.form__field ::placeholder { color: #6b5a6b; opacity: 1; }   /* Figma placeholder colour */
.form__field select { appearance: none; -webkit-appearance: none; padding-right: 38px; color: #6b5a6b; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b262a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 13px center / 15px no-repeat; }
.form__field select.has-value, .form__field select:focus { color: #1b262a; }
.form__field [data-datepicker], .form__field input[type="date"] { padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b262a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2.5'/%3E%3Cpath d='M8.5 3v4M15.5 3v4M4 10h16'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.form__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline: none; border-color: #f58abb; box-shadow: 0 0 0 3px rgba(245, 138, 187, .22);
}
@media (max-width: 575px) { /* 16px stops iPhone from zooming into the field */
  .form__field input, .form__field select, .form__field textarea { font-size: 16px; }
}
.form__field.has-error input, .form__field.has-error select, .form__field.has-error textarea { border-color: #c62828; }
.form__error { font-size: 12px; color: #b71c1c; }
.form__error:empty { display: none; }
.form__submit {                                    /* Figma: 51px, #F58ABB, Poppins 16px SemiBold */
  min-height: 50px; margin-top: 21px; border-radius: 10px; background: #f58abb;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: #1b262a;
}
.form__submit:hover { background: #ef72aa; }
.form__note { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10px; line-height: 1.4; color: #6b5a6b; }
@media (max-width: 767px) { .form__note { font-size: 12px; } }
.form__note svg { width: 15px; height: 16px; flex: none; color: #f58abb; }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: #fdecea; color: #8a1c1c; font-size: .9rem; }

/* 8. WHY CHOOSE US --------------------------------------------------------- */
/* values measured from the Figma frame at 1440px: section 475px, pills 380×56, gap 16 */
.why { position: relative; overflow: hidden; background: #ffe2ef; }
.why__inner { position: relative; }
.why__content { position: relative; z-index: 1; padding-block: 64px 0; }
.why .section-title {                               /* Playfair 56px, #1B262A */
  font-size: clamp(2.4rem, 4.4vw, 57.5px); line-height: 1.2; color: #1b262a; margin-bottom: 49px;
}
.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.why__list li {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px;
  background: #fff; border: 1px solid #e8e9e9; border-radius: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
  font-family: var(--font-body); font-size: 14.4px; font-weight: 500; line-height: 1.3; color: #1b262a;  /* Poppins Medium */
}
.why__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; background: #f2f2f2;
}
.why__icon svg { width: 19px; height: 19px; fill: none; stroke: #1b262a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.why__media img { display: block; width: 100%; max-width: 420px; height: auto; margin: 24px 0 0 auto; }
@media (min-width: 640px) { .why__list { grid-template-columns: repeat(2, minmax(0, 380px)); } }
@media (min-width: 992px) {
  .why__inner { min-height: 475px; }
  .why__content { padding-block: 74px 78px; }
  .why__media { position: absolute; right: calc(var(--gutter) + 51px); bottom: 0; height: 456px; }
  .why__media img { width: auto; height: 100%; max-width: none; margin: 0; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .why__media { right: var(--gutter); height: 360px; opacity: .9; }
  .why__list { grid-template-columns: repeat(2, minmax(0, 290px)); }
}

/* 9. SERVICES CARDS -------------------------------------------------------- */
/* values measured from the Figma frame at 1440px: cards 644px, gap 19/18, image 601×248 */
.services { padding-block: clamp(56px, 5.6vw, 80px) clamp(56px, 5.2vw, 75px); background: #fff; }
.services .section-title { font-size: clamp(2.4rem, 4.4vw, 57.5px); line-height: 1.2; color: #1b262a; margin-bottom: clamp(32px, 4.7vw, 68px); }
.services__grid { display: grid; gap: 18px 19px; max-width: 1307px; margin-inline: auto; }
@media (min-width: 900px) { .services__grid { grid-template-columns: 1fr 1fr; } }
.service-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px 21.5px 23px; border-radius: 20px; background: #f4f4f4;
}
.service-card__head { display: flex; align-items: center; gap: 15px; margin-bottom: 11px; }
.service-card__title {                             /* Playfair ~30.5px, #1B262A */
  font-size: clamp(1.4rem, 2.2vw, 31px); font-weight: 400; line-height: 1.2; color: #1b262a;
}
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 50px; height: 50px; border-radius: 12px; background: #f58abb;
}
.icon-badge svg { width: 24px; height: 24px; fill: none; stroke: #1b262a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-card__img { width: 100%; aspect-ratio: 601 / 248; object-fit: cover; border-radius: 16px; }
.service-card__text {                              /* Poppins 14.4px / 25px */
  margin: 14px 0 34px; font-family: var(--font-body); font-size: 14.4px; line-height: 25px; color: #1b262a;
}
@media (min-width: 900px) { /* Figma text boxes are narrower in row 2 (keeps identical line breaks) */
  .service-card:nth-child(3) .service-card__text { max-width: 573px; }
  .service-card:nth-child(4) .service-card__text { max-width: 562px; }
}
.service-card__text a { color: #1b262a; }
.service-card .btn {                               /* Figma: 158×50, Poppins Medium ~18.7px */
  align-self: flex-start; margin-top: auto; min-height: 51px; padding: 0 26px;
  border: 1.5px solid #000; border-radius: 8px; font-size: 18.7px; font-weight: 500; color: #1b262a;
}
.service-card .btn:hover { color: #fff; }

/* 10. REVIEWS SLIDER ------------------------------------------------------- */
/* values measured from the Figma frame at 1440px: section 848px, cards 403×379, gap 19 */
.reviews {
  padding-block: clamp(56px, 5.4vw, 77px) 55px; color: #fff;
  background: #000 url("../images/backgrounds/reviews-dark.webp") center / cover no-repeat;
}
.reviews__title {                                   /* Playfair ~55.5px / 55px, white */
  font-size: clamp(2.2rem, 4.4vw, 58.5px); line-height: .95; color: #fff; margin-bottom: 38px;
}
.reviews__intro {                                   /* Poppins 15.3px / 23.5px, white */
  max-width: 1060px; margin-bottom: 49px; font-family: var(--font-body); font-size: 15.5px; line-height: 23.5px; color: #fff;
}
.reviews__intro strong { font-weight: 600; }
.reviews__intro a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.reviews__slider { --per-view: 1; position: relative; max-width: 1247px; margin-inline: auto; }
@media (min-width: 768px)  { .reviews__slider { --per-view: 2; } }
@media (min-width: 1100px) { .reviews__slider { --per-view: 3; } }
.slider-viewport { overflow: hidden; touch-action: pan-y; }
.reviews__track { display: flex; gap: 19px; transition: transform .55s cubic-bezier(.25, .8, .25, 1); will-change: transform; }
/* no-JS fallback: plain horizontal scroll */
.reviews__slider:not(.is-ready) .reviews__track { overflow-x: auto; scroll-snap-type: x mandatory; }
.review-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * 19px) / var(--per-view));
  scroll-snap-align: start; display: flex; flex-direction: column; margin: 0; min-width: 0; min-height: 379px;
  padding: 24px 16px 26px 21px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .094);
}
/* Figma: in the 2nd/3rd card the quote text sits 7px further in, 8px lower and wraps at ~338px */
@media (min-width: 1100px) {
  .review-card--2 .review-card__text, .review-card--3 .review-card__text { margin-left: 7px; max-width: 340px; padding-top: 8px; }
  .review-card--3 .review-card__text { max-width: 348px; }
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; height: 35px; margin-bottom: 22px; }
.review-card__quote { width: 25px; height: 19px; margin: 2px 0 0 -4px; align-self: flex-start; fill: #f58abb; }
.review-card__google { width: 35px; height: 35px; margin-right: 12px; }
.review-card__text {                                /* Poppins ~18.9px / 29px, white */
  margin: 0 0 18px; flex: 1; font-family: var(--font-body); font-size: 18.9px; line-height: 29px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__foot { display: grid; grid-template-columns: 1fr auto; gap: 12px 12px; align-items: end; padding-left: 5px; padding-right: 23px; }
.review-card__name { font-family: var(--font-body); font-size: 16.2px; font-weight: 600; line-height: 1.2; color: #fff; }
.review-card__more {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  color: #f58abb; font-family: var(--font-body); font-size: 15.7px; font-weight: 500; text-underline-offset: 3px;
}
.review-card .stars { gap: 1px; color: #ffc107; }
.review-card .stars svg { width: 18px; height: 18px; }
.slider-arrow {
  display: none; position: absolute; top: 190px; z-index: 2; transform: translateY(-50%);   /* middle of a 379px card */
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center;
}
.slider-arrow svg { width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.slider-arrow--prev { left: -42px; background: #fff; }
.slider-arrow--next { right: -40px; background: #f58abb; }
.slider-arrow:disabled { cursor: default; }        /* design keeps both arrows bright */
.slider-arrow[hidden] { display: none !important; }
@media (min-width: 768px) { .slider-arrow { display: inline-flex; } }
@media (min-width: 768px) and (max-width: 1359px) {   /* not enough room outside the cards: sit on the card edge */
  .slider-arrow--prev { left: -15px; } .slider-arrow--next { right: -15px; }
  .slider-arrow { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
}
.slider-dots { display: flex; justify-content: center; gap: 10.5px; margin-top: 55px; }
.slider-dots button { position: relative; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 1.5px solid #fff; background: transparent; cursor: pointer; }
.slider-dots button::after { content: ""; position: absolute; inset: -14px; }   /* 42px tap area, same look */
.slider-dots button[aria-current="true"] { background: #f58abb; border-color: #f58abb; }

/* 11. FAQ ------------------------------------------------------------------ */
/* values measured from the Figma frame at 1440px: list 1074px, row pitch 115px, open box 1102px */
.faq { padding-block: clamp(56px, 5.8vw, 83px) clamp(64px, 7.8vw, 112px); background: #fff; }
.faq .section-title { font-size: clamp(2.2rem, 4.4vw, 57.4px); line-height: 1.2; color: #1b262a; margin-bottom: clamp(36px, 5.6vw, 80px); }
.faq__list { max-width: 1074px; margin-inline: auto; }
.faq__item {
  position: relative; padding: 61px 0 22px;
  border: 1px solid transparent; border-bottom-color: #404040; border-radius: 0;   /* same border width open/closed = no jump */
  transition: padding .35s ease, margin .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease, border-radius .35s ease;
}
/* the line right above an open card would double its border — hide it */
.faq__item:has(+ .faq__item.is-open) { border-bottom-color: transparent; }
.faq__item:first-child { padding-top: 0; }
.faq__q { margin: 0; font-family: var(--font-heading); font-size: clamp(18px, 1.6vw, 21.5px); font-weight: 600; line-height: 30px; color: #000; }
.faq__q button {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
  min-height: 30px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: #000; font: inherit;
}
.faq__icon { position: relative; flex: none; width: 36px; height: 36px; margin-block: -3px; border-radius: 50%; background: #f58abb; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: #1f1117;
  transform: translate(-50%, -50%); transition: transform .2s, background-color .2s;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a {
  margin: 0 0 0 14px; max-width: 960px; overflow: hidden;
  font-family: var(--font-body); font-size: 14.4px; line-height: 23.5px; color: #000;
  transition: height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.faq__item.is-open .faq__a { margin-top: 18px; }
.faq__a p { margin: 0; }

/* open item = pink card that sticks out 14px on each side (Figma) */
.faq__item.is-open {
  margin: 0 -14px -21px; padding: 31px 22px 25px 27px;
  background: #ffe2ef; border-color: #201e1f; border-radius: 12px; box-shadow: 0 4px 9px rgba(0, 0, 0, .12);
}
.faq__q button { transition: padding-left .35s ease; }
.faq__q button::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 25px; background: #f58abb;
  transform: translateY(-50%) scaleY(0); transition: transform .35s ease;
}
.faq__item.is-open .faq__q button { padding-left: 25px; }
.faq__item.is-open .faq__q button::before { transform: translateY(-50%) scaleY(1); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (max-width: 767px) {
  .faq__item { padding-top: 28px; padding-bottom: 18px; }
  .faq__item.is-open { margin: 0 -10px -10px; padding: 22px 16px 20px; }
  .faq__q { line-height: 1.35; }
  .faq__a { margin-left: 0; }
}

/* 12. BLOG CARDS ----------------------------------------------------------- */
/* values measured from the Figma frame at 1440px: section 829px, cards 372×578, gap ~41 */
.blog {
  padding-block: clamp(48px, 3.6vw, 51px) clamp(56px, 5.6vw, 81px);
  background: #f9dce9 url("../images/backgrounds/blog-floral.webp") center / cover no-repeat;
}
.blog .section-title { font-size: clamp(2.2rem, 4.4vw, 57.4px); line-height: 1.2; color: #1b262a; margin-bottom: clamp(32px, 3.6vw, 51px); }
.blog__grid { display: grid; gap: 24px; margin-inline: auto; max-width: 1198px; }
@media (min-width: 768px)  { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog__grid { grid-template-columns: repeat(3, 1fr); gap: 41px; } }
.post-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 578px;
  padding: 33px 33px 30px; border-radius: 22px; background: #fff;
  box-shadow: 0 4px 16px rgba(157, 75, 124, .06); transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(157, 75, 124, .14); }
.post-card__meta { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--font-body); font-size: 11.3px; line-height: 16px; color: #6b5a6b; }
.post-card__meta > span[aria-hidden] { font-size: 0; width: 4px; height: 4px; border-radius: 50%; background: #c9bcc4; }
.post-card__tag { font-size: 12.7px; font-weight: 600; text-transform: uppercase; color: #9d4b7c; }   /* Poppins SemiBold */
.post-card__img { width: 100%; aspect-ratio: 305 / 210; margin-top: 16px; object-fit: cover; border-radius: 10px; }
/* Figma: images and titles sit at slightly different heights in each card */
.post-card--2 .post-card__img { margin-top: 24px; }
.post-card--3 .post-card__img { margin-top: 28px; }
.post-card--2 .post-card__title { margin-top: 27px; }
.post-card--3 .post-card__title { margin-top: 30px; }
.post-card__title { margin-top: 18px; font-size: clamp(1.4rem, 2vw, 29px); font-weight: 400; line-height: 1.31; color: #000; }   /* Playfair 29/38 */
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card__excerpt { margin: 23px 0 18px; font-family: var(--font-body); font-size: 16.5px; line-height: 26px; color: #6b5a6b; }   /* Poppins 16.5/26 */
.post-card__more {
  display: inline-flex; align-items: center; gap: 12px; margin-top: auto;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 20px; color: #000;
}
.post-card__more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.post-card:hover .post-card__more svg { transform: translateX(4px); }

/* 13. ABOUT BAND + VIDEO MODAL -------------------------------------------- */
/* values measured from the Figma frame at 1440px: band 550px, image 674×422 */
.about-band { padding-block: clamp(40px, 4.1vw, 59px) clamp(48px, 4.8vw, 69px); background: #f58abb; }
.about-band__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) { .about-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 674px); gap: 40px; } }
.about-band__chip {
  display: inline-flex; align-items: center; min-height: 42px; margin-bottom: 18px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px;
  font-family: var(--font-body); font-size: 16px; font-weight: 500; text-transform: uppercase; color: #000;
}
.about-band .section-title { font-size: clamp(2.2rem, 4.4vw, 57.4px); line-height: .98; color: #000; margin-bottom: 22px; }
.about-band__content p {
  max-width: 570px; margin-bottom: 30px; font-family: var(--font-body); font-size: 15.5px; line-height: 25.3px; color: #000;
}
.about-band .btn--dark {                           /* Figma: 264×53, Poppins Regular 19px pink, white play icon */
  min-width: 264px; min-height: 53px; padding: 0 24px; gap: 14px; border-radius: 8px;
  background: #000; color: #f58abb; font-size: 19px; font-weight: 400;
}
.about-band .btn--dark svg { width: 25px; height: 25px; color: #fff; }
.about-band .btn--dark:hover { background: #222; }
.about-band__media { position: relative; }
.about-band__media img { width: 100%; aspect-ratio: 674 / 422; object-fit: cover; border-radius: 16px; }
.about-band__play {                                 /* pink halo + white ring + white triangle */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; width: 98px; height: 98px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(245, 138, 187, .6); color: #fff; cursor: pointer;
  transition: transform .25s ease, background-color .25s ease;
}
.about-band__play::before { content: ""; position: absolute; inset: 9px; border: 6px solid #fff; border-radius: 50%; }
.about-band__play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(245, 138, 187, .8); }
.about-band__play svg { position: relative; width: 22px; height: 26px; margin-left: 5px; }

.video-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.video-modal__dialog { position: relative; width: min(960px, 100%); }
.video-modal__dialog video { width: 100%; border-radius: var(--radius); background: #000; }
.video-modal__close {
  position: absolute; right: 0; top: -48px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--white); color: var(--black); font-size: 1.6rem; line-height: 1; cursor: pointer;
}

/* 14. FOOTER --------------------------------------------------------------- */
/* values measured from the Figma frame at 1440px: footer content 1224px wide, columns at 108 / 498 / 799 / 1100 */
.site-footer {
  padding: clamp(48px, 4.7vw, 68px) 0 40px; background: #fff;
  font-family: var(--font-body); font-size: 15.25px; line-height: 25px; color: #1b262a;
}
.footer__wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }   /* same container as the header */
.footer__top { display: grid; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid #eaebeb; }
@media (min-width: 640px)  { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__top { grid-template-columns: 390fr 301fr 301fr 258fr; gap: 0; align-items: start; padding-bottom: 40px; } }
.footer__logo { align-self: center; }
.footer__logo img { width: 296px; height: auto; }
@media (min-width: 1100px) { .footer__logo { align-self: start; margin-top: 40px; } }
.footer__title {                                    /* Playfair SemiBold ~27.5px, uppercase */
  margin: 0 0 14px; font-family: var(--font-heading); font-size: 27.5px; font-weight: 600; line-height: 34px;
  text-transform: uppercase; color: #1b262a; white-space: nowrap;
}
.footer__col address, .footer__line { margin: 0; font-style: normal; }
.footer__btn {                                      /* Figma: 46px tall, radius 8, Poppins SemiBold ~14.5px */
  min-height: 46px; padding: 0 17px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: #1b262a;
}
.footer__btn--pink { margin-top: 15px; background: #f58abb; border-color: #f58abb; }
.footer__btn--pink:hover { background: #ef72aa; border-color: #ef72aa; }
.footer__btn--outline { margin-top: 15px; background: #fff; border: 1px solid #1b262a; }
.footer__btn--outline:hover { background: #1b262a; color: #fff; }
.footer__text-link { display: table; margin-top: 18px; padding-block: 8px; margin-bottom: -8px; color: #f58abb; text-decoration: underline; text-underline-offset: 3px; }
.footer__text-link:hover { color: #c13a78; }
.footer__phone { text-decoration: none; }
.footer__phone:hover { color: #c13a78; }
.footer__hours { margin: 0 0 15px; }
.footer__hours div { display: flex; gap: .3em; }
.footer__hours dt, .footer__hours dd { margin: 0; }
.footer__note { margin: 0; }

.footer__bottom { display: grid; gap: 28px; padding-top: 40px; }
@media (min-width: 1100px) {
  .footer__bottom { grid-template-columns: 316px minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; gap: 0; }
  .footer__links { grid-row: 1 / span 2; }
  .footer__legal-links { grid-column: 2; max-width: 440px; }
  .footer__copyright { grid-column: 3; text-align: right; }
  .footer__disclaimer { grid-column: 2 / span 2; margin-top: 20px; align-self: start; }   /* longer Site Links list must not stretch the box */
}
.footer__links .footer__title { margin-bottom: 14px; }
.footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: #c13a78; text-decoration: underline; }
.footer__legal-links { margin: 6px 0 0; line-height: 23.5px; }
.footer__legal-links a { text-decoration: none; }
.footer__legal-links a::before, .footer__legal-links span::before { content: "| "; }   /* Figma: "| Do Not Share…| Conditions of Use|…" */
.footer__legal-links a:hover { text-decoration: underline; }
.footer__copyright { margin: 6px 0 0; line-height: 24.5px; }
.footer__disclaimer {
  padding: 13px 18px 15px; border-radius: 16px; background: #fce4f0;
  font-size: 11.6px; line-height: 16px; color: #1b262a;
}
.footer__disclaimer p { max-width: 800px; margin: 0 0 16px; }
.footer__disclaimer-accent { margin: 0 !important; color: #f58abb; font-weight: 600; }

/* 16. INNER PAGES (category + service pages) -------------------------------- */
/* hero without rating/location: same component, text block only */
.hero--page .hero__actions { margin-bottom: 0; }
@media (min-width: 992px) and (max-width: 1279px) {
  .hero--page .hero__content { max-width: 44vw; }
  .hero--page .hero__title { margin-bottom: 26px; }
  .hero--page .hero__sub { margin-bottom: 30px; }
}
@media (min-width: 1280px) {
  .hero--page .hero__content { max-width: 780px; }
  .hero--page .hero__title { margin-bottom: 41px; }
  .hero--page .hero__sub { margin-bottom: 48px; }
}

/* consult intro with bullet list (service pages): text column centred on the form card */
.consult--center .consult__inner { align-items: center; }
.consult__content ul, .split__text ul, .why-card ul {
  margin: 0 0 23px; padding-left: 22px; font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000;
}
.consult__content li::marker, .split__text li::marker, .why-card li::marker { font-size: .8em; }

/* category page: card grid without a heading */
.services--list { padding-block: clamp(48px, 4.9vw, 70px) clamp(56px, 6.5vw, 94px); }
.services--list .services__grid { row-gap: 22px; }
@media (min-width: 900px) {
  .services--list .service-card { min-height: 557px; }
  .services--list .service-card__text { max-width: 575px; }
}

/* pink split section: text left, cutout photo right (bottom aligned) */
.split { position: relative; overflow: hidden; background: #ffe2ef; }
.split__inner { position: relative; display: flex; align-items: center; }
.split__text { position: relative; z-index: 1; max-width: 760px; padding-block: 28px 32px; }
/* --split-l / --split-w / --split-h are unitless Figma values at 1440px; below 1440 they scale with the screen */
.split { --split-unit: calc(min(100vw, 1440px) / 1440); }   /* 1 Figma px, scaled */
.split__text .section-title { font-size: clamp(2.2rem, 4.4vw, 57px); line-height: .97; color: #1b262a; margin-bottom: 22px; }
.split__text p { margin: 0 0 23px; font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000; }
.split__text p:last-child { margin-bottom: 0; }
.split__text p.split__lead { max-width: 745px; }
.split__media { display: block; }
.split__media img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
@media (min-width: 992px) {
  .split__inner { position: static; min-height: calc(var(--split-h, 475) * var(--split-unit)); }
  .split__media {                                     /* anchored to the section, scales with screen width */
    position: absolute; bottom: 0; height: 100%;
    left: calc(max(0px, (100vw - 1440px) / 2) + var(--split-l, 816) * var(--split-unit));
    width: calc(var(--split-w, 520) * var(--split-unit));
  }
  .split__media img { position: absolute; bottom: 0; left: 0; width: 100%; max-width: none; height: auto; max-height: 100%; object-fit: contain; object-position: left bottom; }
  .split__text { max-width: min(760px, calc(var(--split-l, 816) * var(--split-unit) - var(--gutter) - 40px)); }
  .split__text p { max-width: 745px; }
}
/* photos that Figma bleeds off the right edge (hard cut edge): stay glued to the screen edge on wide screens too */
@media (min-width: 992px) {
  .split--bleed .split__media { left: auto; right: 0; }
  .split--bleed .split__media img { left: auto; right: 0; object-position: right bottom; }
}
@media (min-width: 992px) and (max-width: 1279px) {   /* smaller laptops: slightly smaller heading so text fits beside the photo */
  .split__text .section-title { font-size: 40px; }
}
@media (max-width: 991px) { .split__inner { flex-direction: column; } .split__text { padding-bottom: 8px; } }

/* "Why choose" grey card with a wide photo */
.why-card-section { padding-block: clamp(48px, 4.7vw, 68px); background: #fff; }
.why-card { padding: 41px 22px 26px; border-radius: 20px; background: #f4f4f4; }
.why-card__title { margin: 0 0 24px; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 31.5px); font-weight: 400; line-height: 1.2; color: #1b262a; }
.why-card__img { display: block; width: 100%; aspect-ratio: 1263 / 356; object-fit: cover; border-radius: 16px; margin-bottom: 29px; }
.why-card p, .why-card ul { font-size: 14.4px; line-height: 25px; color: #1b262a; }
.why-card p { margin: 0 0 25px; font-family: var(--font-body); }
.why-card p:last-child { margin-bottom: 0; }
.why-card ul { margin-bottom: 25px; }
.why-card p + ul { margin-top: -25px; }
.why-card p.why-card__gap + ul { margin-top: 0; }

/* pink floral band with a white "Contact Us" card */
.contact-cta {
  padding-block: clamp(48px, 5.8vw, 84px) clamp(48px, 5.8vw, 83px);
  background: #f9dce9 url("../images/backgrounds/blog-floral.webp") center / cover no-repeat;
}
.contact-cta__card {
  max-width: 1075px; margin-inline: auto; padding: 78px clamp(20px, 7.4vw, 100px) 78px;
  border-radius: 16px; background: #fff; text-align: center;
}
.contact-cta__card .section-title { font-size: clamp(2.2rem, 4.4vw, 57.4px); line-height: 1; color: #000; margin-bottom: 40px; }
.contact-cta__card p { margin: 0 auto 23px; max-width: 880px; font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000; }
.contact-cta__card p:last-child { margin-bottom: 0; }
.contact-cta__card a { color: #000; text-decoration: underline; text-underline-offset: 2px; }

/* FAQ on service pages sits closer to the pink band above */
.contact-cta + .faq { padding-top: clamp(48px, 4.4vw, 63px); }

@media (max-width: 767px) { .hero__rating { padding-block: 10px; margin-bottom: 29px; } }

/* reviews page: same cards as the slider, in a 3-column grid with "Load More" (Figma: 403px cards, 19 / 35 gaps) */
.reviews--page { padding-bottom: clamp(56px, 8.3vw, 120px); }
.reviews__grid { display: grid; gap: 35px 19px; max-width: 1247px; margin-inline: auto; }
.reviews__grid .review-card { flex: none; min-height: 379px; }
.reviews__grid .review-card[hidden] { display: none; }
@media (min-width: 768px)  { .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reviews__more { display: flex; justify-content: center; margin-top: 90px; }
.reviews__more-btn { gap: 10px; min-width: 178px; min-height: 53px; font-size: 19px; }
.reviews__more-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* FAQs page: intro line under the heading */
.faq--page .section-title { margin-bottom: 26px; }
.faq__lead { max-width: 800px; margin: 0 auto clamp(36px, 3.8vw, 55px); text-align: center; font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000; }
.faq__lead a { color: inherit; text-decoration: none; }
.faq__lead a:hover { color: var(--pink-text); text-decoration: underline; }

/* pages that start right under the header (contact, call-back) */
.consult--page { padding-block: clamp(48px, 6.7vw, 97px); }

/* contact page: info boxes in two columns beside the form (Figma: 352px boxes, 37px gap) */
.contact-info { display: grid; gap: 20px; align-self: start; }
.contact-info__col { display: grid; gap: 20px; align-content: start; }
.contact-info, .contact-info__col, .info-box { min-width: 0; }
/* two columns when there is room: stacked under the form (700-991) or beside it (1200+) */
@media (min-width: 700px) and (max-width: 991px), (min-width: 1200px) { .contact-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 37px; } }
@media (min-width: 992px) { .contact-info { margin-top: -12px; } }
.info-box { padding: 16px 14px 18px; border: 1px solid #eceef1; border-radius: 12px; background: #f9fafb; }
.info-box__title { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-family: var(--font-heading); font-size: 19.5px; font-weight: 600; line-height: 1.3; color: #111; }
.info-box__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-box__lines { margin: 0; padding: 0 0 0 22px; list-style: none; font-family: var(--font-body); font-size: 12.8px; line-height: 22.5px; color: #111; }
.info-box__lines a { color: inherit; text-decoration: none; }
.info-box__lines a:hover { color: var(--pink-text); text-decoration: underline; }
.info-box__text { margin: 0 0 10px; font-family: var(--font-body); font-size: 12.8px; line-height: 15px; color: #111; }
.info-box__map img { display: block; width: 100%; height: auto; aspect-ratio: 324 / 172; object-fit: cover; border-radius: 18px; }
.info-box__btn { gap: 6px; margin-top: 12px; min-height: 33px; padding: 6px 12px; border-radius: 8px; font-size: 12.8px; color: #fff; }
.info-box__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.info-box__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.info-box__chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #eceef1; border-radius: 999px; background: #fff;
  font-family: var(--font-body); font-size: 11.6px; line-height: 1.2; color: #111;
}
.info-box__chips svg { width: 15px; height: 15px; fill: none; stroke: var(--pink); stroke-width: 1.8; }

/* call-back request: one wide form card (Figma: 1085px) */
.callback-card { max-width: 1085px; margin-inline: auto; padding: 37px 21px 36px; border: 1px solid #e6e6e6; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .05); }
.callback-card__lead { margin: 0 0 33px; text-align: center; font-family: var(--font-body); font-size: 15.8px; font-weight: 400; line-height: 1.5; color: #000; }
.callback-card .form__submit { gap: 10px; margin-top: 12px; }
.callback-card .form__submit svg { width: 20px; height: 20px; }
.form__field--icon { position: relative; }
.form__field--icon > svg { position: absolute; right: 14px; bottom: 13px; width: 18px; height: 18px; pointer-events: none; }
.form__field--icon select { background-image: none; padding-right: 44px; }
.form__note a { color: inherit; text-decoration: none; }
.form__note a:hover { color: var(--pink-text); text-decoration: underline; }

/* split band without a cutout photo (pages that have no Figma frame): text only, two-column list on wide screens */
.split--text .split__inner { min-height: 0; }
.split--text .split__inner { justify-content: center; }
.split--text .split__text { max-width: 900px; padding-block: clamp(40px, 4.4vw, 64px); }
@media (min-width: 768px) { .split--text .split__text ul { columns: 2; column-gap: 40px; } }

/* blog article: pink header band, article + sticky sidebar, CTA, share, related cards (reuses .post-card / .blog) */
.article-hero {
  padding-block: clamp(44px, 5.6vw, 80px) clamp(110px, 12vw, 170px);
  background: #fde3ee url("../images/backgrounds/hero-pink.webp") center / cover no-repeat;
}
.article-hero__inner { max-width: 960px; text-align: center; }
.article-hero__crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; font-family: var(--font-body); font-size: 13.5px; color: #4a3a44; }
.article-hero__crumbs a { color: inherit; text-decoration: none; }
.article-hero__crumbs a:hover { color: var(--pink-text); text-decoration: underline; }
.article-hero__tag {
  display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: #fff;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9d4b7c;
}
.article-hero__title { margin: 0 0 18px; font-family: var(--font-heading); font-size: clamp(2.1rem, 4.6vw, 60px); font-weight: 400; line-height: .95; letter-spacing: -.04em; color: #000; }
.article-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0; font-family: var(--font-body); font-size: 14.5px; color: #3d2f38; }
.article-hero__meta > span[aria-hidden] { width: 4px; height: 4px; overflow: hidden; border-radius: 50%; background: #c58aa8; font-size: 0; }

.article { padding-bottom: clamp(56px, 6.7vw, 96px); background: #fff; }
.article__grid { display: grid; gap: 40px; }
@media (min-width: 1100px) { .article__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; max-width: 1180px; } }
.article__main { min-width: 0; }
.article__img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin-top: clamp(-130px, -9vw, -80px); margin-bottom: clamp(32px, 3.5vw, 48px);
  border: 6px solid #fff; border-radius: 24px; box-shadow: 0 18px 40px rgba(157, 75, 124, .18);
}
.article__body { font-family: var(--font-body); font-size: 16.5px; line-height: 1.85; color: #222; }
.article__body p { margin: 0 0 20px; }
.article__body p.article__lead { font-size: 19px; line-height: 1.75; color: #111; }
.article__body p.article__lead::first-letter { float: left; margin: 6px 10px 0 0; font-family: var(--font-heading); font-size: 64px; line-height: .85; color: var(--pink); }
.article__body h2 {
  position: relative; scroll-margin-top: 120px; margin: 46px 0 16px; padding-left: 18px;
  font-family: var(--font-heading); font-size: clamp(1.6rem, 2.6vw, 34px); font-weight: 400; line-height: 1.2; color: #1b262a;
}
.article__body h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 2px; background: var(--pink); }
.article__body h3 { margin: 28px 0 10px; font-family: var(--font-heading); font-size: 22px; font-weight: 600; line-height: 1.3; color: #9d4b7c; }
.article__body ul { margin: 0 0 20px; padding-left: 22px; }
.article__body li + li { margin-top: 6px; }
.article__body a { color: #9d4b7c; text-underline-offset: 3px; }
.article__body a:hover { color: #000; }

.article__cta {
  margin-top: 48px; padding: clamp(28px, 3.5vw, 44px); border-radius: 22px; text-align: center;
  background: #f58abb url("../images/backgrounds/hero-pink.webp") center / cover no-repeat;
}
.article__cta h2 { margin: 0 0 10px; font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 38px); font-weight: 400; color: #000; }
.article__cta p { max-width: 560px; margin: 0 auto 22px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: #2b1f27; }
.article__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.article__cta .btn--outline { background: rgba(255, 255, 255, .6); }
.article__cta .btn--outline:hover { background: #000; border-color: #000; color: #fff; }   /* keep text visible on hover */
.article__cta .btn--outline svg { width: 20px; height: 20px; }

.article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; padding-block: 20px; border-block: 1px solid #f1dbe6; }
.article__share span { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #1b262a; }
.article__share ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.article__share a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #f2a7c9; border-radius: 50%; color: #9d4b7c; transition: background-color .2s, color .2s; }
.article__share a:hover { background: var(--pink); border-color: var(--pink); color: #000; }
.article__share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.article__pager { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 700px) { .article__pager { grid-template-columns: 1fr 1fr; } }
.article__pager-link {
  display: block; padding: 18px 20px; border: 1px solid #f1dbe6; border-radius: 16px; text-decoration: none;
  font-family: var(--font-heading); font-size: 19px; line-height: 1.3; color: #1b262a; transition: border-color .2s, box-shadow .2s;
}
.article__pager-link span { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9d4b7c; }
.article__pager-link--next { text-align: right; grid-column: -2; }
.article__pager-link:hover { border-color: var(--pink); box-shadow: 0 8px 22px rgba(157, 75, 124, .12); }

.article__aside { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1100px) { .article__aside { position: sticky; top: 120px; margin-top: 40px; } }
.article__toc, .article__side-cta { padding: 24px; border: 1px solid #f1dbe6; border-radius: 20px; background: #fff7fb; }
.article__toc h2 { margin: 0 0 12px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9d4b7c; }
.article__toc ol { margin: 0; padding-left: 20px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: #9d4b7c; }
.article__toc li + li { margin-top: 9px; }
.article__toc a { color: #1b262a; text-decoration: none; }
.article__toc a:hover { color: var(--pink-text); text-decoration: underline; }
@media (max-width: 1099px) { .article__aside { display: none; } }   /* phones/tablets: CTA box at the end of the post is enough */
@media (max-width: 767px) { .article__body { font-size: 16px; } .article__body p.article__lead { font-size: 17px; } .article__body p.article__lead::first-letter { font-size: 52px; } }
.article__side-cta { background: #1b1b1b; border-color: #1b1b1b; color: #fff; }
.article__side-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 24px; color: #fff; }
.article__side-cta p { margin: 0 0 18px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: #e9dde4; }
.article__side-phone { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--pink); text-decoration: none; }
.article__side-phone svg { width: 20px; height: 20px; }

.blog--related .post-card__img { margin-top: 16px; }
@media (min-width: 768px) { .blog__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }

/* legal pages (privacy, terms...): readable text column, same type scale as the rest of the site */
.legal { padding-block: clamp(48px, 6.7vw, 97px); background: #fff; }
.legal__inner { max-width: 900px; }
.legal .section-title { font-size: clamp(2.2rem, 4.4vw, 57.4px); line-height: 1.1; color: #1b262a; margin-bottom: 10px; }
.legal__updated { margin: 0 0 28px; font-family: var(--font-body); font-size: 14px; color: var(--muted); }
.legal__toc { margin-bottom: 36px; padding: 20px 24px; border: 1px solid #f2a7c9; border-radius: 16px; background: #fff7fb; }
.legal__toc ul { margin: 0; padding: 0 0 0 18px; columns: 2 220px; column-gap: 32px; font-family: var(--font-body); font-size: 14.4px; line-height: 1.9; }
.legal__toc a { color: #1b262a; text-decoration: none; }
.legal__toc a:hover { color: var(--pink-text); text-decoration: underline; }
.legal__section { scroll-margin-top: 130px; padding-top: 8px; }
.legal__section h2 { margin: 28px 0 12px; font-family: var(--font-heading); font-size: clamp(1.4rem, 2.2vw, 28px); font-weight: 400; line-height: 1.25; color: #1b262a; }
.legal__section p, .legal__section ul { margin: 0 0 16px; font-family: var(--font-body); font-size: 15.3px; line-height: 25px; color: #000; }
.legal__section ul { padding-left: 22px; }
.legal__section a { color: inherit; text-underline-offset: 2px; }
.legal__section a:hover { color: var(--pink-text); }

/* thank-you / 404: the floral "contact" card, page version */
.contact-cta--page .section-title { font-size: clamp(2.2rem, 4.4vw, 57.4px); }

/* finance: shorter text column (Figma 685px) + bold phone line */
.consult__content--narrow { max-width: 700px; }
.consult__content p.consult__call { font-weight: 700; }
.consult__content p.consult__call a { text-decoration: none; }
.consult__content p.consult__call a:hover { color: var(--pink-text); }

/* team: alternating bio card + photo on the pink band (Figma 1440: card 720, photo 534x612, gap 53) */
.team { padding-block: clamp(48px, 6.7vw, 97px); background: #ffe2ef; }
.team__member { display: grid; gap: 24px; align-items: center; }
.team__photo { display: block; width: 100%; max-width: 534px; aspect-ratio: 534 / 612; object-fit: cover; border-radius: 20px; margin-inline: auto; }
.team__card { border-radius: 22px; background: #fff; }
.team__name {
  margin: 0; padding: 22px 38px 20px; border: 1px solid #f2a7c9; border-radius: 22px; background: var(--card);
  font-family: var(--font-heading); font-size: clamp(1.75rem, 3.1vw, 44.5px); font-weight: 400; line-height: 1.15; color: #1b262a;
}
.team__bio { padding: 34px 38px 44px; }
.team__bio p { margin: 0 0 23px; font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000; }
.team__bio p:last-child { margin-bottom: 0; }
.team__rule { height: 1px; margin: clamp(32px, 4.7vw, 67px) 6px; border: 0; background: #f2a7c9; }
@media (min-width: 992px) {
  .team__member { grid-template-columns: minmax(0, 720fr) minmax(0, 534fr); gap: 53px; }
  .team__member--flip { grid-template-columns: minmax(0, 534fr) minmax(0, 720fr); }
  .team__member--flip .team__photo { order: -1; }
  .team__photo { max-width: none; }
}
@media (max-width: 991px) { .team__photo { order: -1; } }
@media (max-width: 480px) { .team__name { padding-inline: 22px; } .team__bio { padding: 26px 22px 32px; } }

/* business facts: three columns of bordered cards (Figma 1440: 324/324/302 wide, 66 gap) */
.info { padding-block: clamp(48px, 8.6vw, 124px) clamp(56px, 8.9vw, 128px); background: var(--card); }
.info .section-title { font-size: clamp(2rem, 4vw, 56px); line-height: 1.2; color: #000; margin-bottom: 26px; }
.info__lead { max-width: 920px; margin: 0 auto clamp(40px, 5.4vw, 78px); text-align: center; font-family: var(--font-body); font-size: 15.3px; line-height: 23.4px; color: #000; }
.info-grid { display: grid; gap: 24px; max-width: 1082px; margin-inline: auto; }
.info-grid__col { display: flex; flex-direction: column; gap: 24px; }
.info-card { padding: 22px 21px 20px; border: 1px solid #f2a7c9; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(243, 139, 183, .12); }
.info-card__label { margin: 0 0 12px; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--pink-text); }
.info-card__big { margin: 0 0 4px; font-family: var(--font-heading); font-size: 35px; font-weight: 700; line-height: 1.2; color: #000; }
.info-card__list { margin: 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: #1b262a; }
.info-card__list li { position: relative; padding-left: 16px; }
.info-card__list li + li { margin-top: 9px; }
.info-card__list a { color: inherit; text-decoration: none; }
.info-card__list a:hover { color: var(--pink-text); text-decoration: underline; }
/* "Learn more about" chip links to /about; home FAQ links to the full FAQ page */
a.about-band__chip { text-decoration: none; transition: background-color .2s; }
a.about-band__chip:hover { background: rgba(255, 255, 255, .25); }
.faq__more { margin: 40px 0 0; text-align: center; font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.faq__more a { color: #1b262a; text-underline-offset: 3px; }
.faq__more a:hover { color: var(--pink-text); }
.reviews__all { margin: 30px 0 0; text-align: center; font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.reviews__all a { color: #f58abb; text-underline-offset: 3px; }
.reviews__all a:hover { color: #fff; }
/* in-text links to other pages (auto-linked): Figma-style underline, pink on hover */
:is(.consult__content, .split__text, .why-card, .service-card__text, .faq__a, .team__bio, .contact-cta__card) a:hover { color: var(--pink-text); }
.split__text a, .why-card a, .faq__a a { text-underline-offset: 2px; }
/* link whose page is not built yet (sync-partials.py): href="#" until the page exists */
.info-card__list li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
@media (min-width: 768px) and (max-width: 991px) { .info-grid { grid-template-columns: 1fr 1fr; } .info-grid__col:last-child { grid-column: 1 / -1; } }
@media (min-width: 992px) {
  .info-grid { grid-template-columns: 324fr 324fr 302fr; gap: 66px; }
  .info-grid__col { gap: 69px; }
  .info-grid__col > :last-child { margin-top: auto; }
}

/* 15. UTILITIES ------------------------------------------------------------ */
.text-center { text-align: center; }
[hidden] { display: none !important; }

@media (min-width: 992px) { .split__text--wide { max-width: 860px; } .split__text--wide p { max-width: 745px; } }
@media (max-width: 767px) { .faq__q button { min-height: 44px; } }
@media (max-width: 767px) {
  .section-title br { display: none; }               /* desktop line breaks look odd on narrow screens */
  .why-card__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) { .hero__title { font-size: clamp(32px, 10vw, 48px); overflow-wrap: break-word; } .hero__title--long { font-size: clamp(28px, 8.4vw, 40px); } }