/*!
Theme Name: Padra
Theme URI: http://padra.com/
Author: Mr.Alidoosti
Author URI: https://mr-alidoosti.ir
Description: Padra website template
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 8.1
Text Domain: padra
Domain Path: /languages
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
# Graft Calculator Tool
# Header Mega Menu
# BMI Calculator Tool
# 404 Error Page

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Promo landing header */
.pd-promo-header {
  --pd-promo-header-bg: #fff;
  --pd-promo-header-text: #1a1919;
  --pd-promo-header-accent: #ff681e;
  --pd-promo-header-button-text: #fff;
  position: sticky;
  top: 0;
  z-index: 9990;
  overflow: visible;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  background: var(--pd-promo-header-bg);
  color: var(--pd-promo-header-text);
}

.admin-bar .pd-promo-header {
  top: 32px;
}

.pd-promo-header *,
.pd-promo-header *::before,
.pd-promo-header *::after {
  box-sizing: border-box;
}

.pd-promo-header__inner {
  display: flex;
  width: min(1440px, calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto;
  align-items: center;
  gap: 32px;
}

.pd-promo-header__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.pd-promo-header__logo img {
  display: block;
  width: auto;
  max-width: 190px;
  height: 42px;
  object-fit: contain;
}

.pd-promo-header__panel {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 28px;
}

.pd-promo-header__navigation {
  min-width: 0;
  margin-inline: auto;
}

.pd-promo-header__navigation ul {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  list-style: none;
}

.pd-promo-header__navigation a,
.pd-promo-header__languages a {
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.pd-promo-header__navigation a:hover,
.pd-promo-header__navigation a:focus-visible,
.pd-promo-header__languages a:hover,
.pd-promo-header__languages a:focus-visible,
.pd-promo-header__languages a.is-current {
  color: var(--pd-promo-header-accent);
}

.pd-promo-header__actions,
.pd-promo-header__languages {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.pd-promo-header__actions {
  margin-inline-start: auto;
  gap: 18px;
}

.pd-promo-header__languages {
  gap: 8px;
}

.pd-promo-header__languages a+a::before {
  margin-inline-end: 8px;
  color: currentColor;
  content: "/";
  opacity: 0.35;
}

.pd-promo-header__button {
  display: inline-flex;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--pd-promo-header-accent);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--pd-promo-header-accent);
  color: var(--pd-promo-header-button-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.pd-promo-header__button:hover,
.pd-promo-header__button:focus-visible {
  color: var(--pd-promo-header-button-text);
  filter: brightness(0.92);
  transform: translateY(-1px);
}

.pd-promo-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pd-promo-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.pd-promo-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.pd-promo-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.pd-promo-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.pd-promo-header :focus-visible {
  outline: 2px solid var(--pd-promo-header-accent);
  outline-offset: 3px;
}

@media screen and (max-width: 900px) {
  .pd-promo-header__inner {
    position: relative;
    width: min(100% - 32px, 1440px);
    min-height: 66px;
    gap: 16px;
  }

  .pd-promo-header__logo img {
    max-width: 150px;
    height: 36px;
  }

  .pd-promo-header__toggle {
    display: block;
  }

  .pd-promo-header__panel {
    position: absolute;
    inset: 100% -16px auto;
    display: none;
    max-height: calc(100vh - 90px);
    padding: 22px 16px 26px;
    overflow-y: auto;
    border-top: 1px solid rgb(0 0 0 / 8%);
    border-radius: 0 0 16px 16px;
    background: var(--pd-promo-header-bg);
    box-shadow: 0 18px 34px rgb(0 0 0 / 14%);
  }

  .pd-promo-header__panel.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .pd-promo-header__navigation {
    width: 100%;
    margin: 0;
  }

  .pd-promo-header__navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .pd-promo-header__navigation a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    font-size: 15px;
  }

  .pd-promo-header__actions {
    width: 100%;
    padding-top: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .pd-promo-header__button {
    min-width: 160px;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .pd-promo-header {
    top: 46px;
  }
}

@media screen and (max-width: 480px) {
  .pd-promo-header__actions {
    align-items: stretch;
  }

  .pd-promo-header__button {
    width: 100%;
  }
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none !important;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/montserrat/montserrat-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Canela";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("assets/fonts/canela/canela-thin.woff2") format("woff2");
}

@font-face {
  font-family: "Canela";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/canela/canela-light.woff2") format("woff2");
}

:root {
  --padra-font-body: "Montserrat", Arial, sans-serif;
  --padra-font-display: "Canela", Georgia, serif;
  --padra-weight-thin: 100;
  --padra-weight-light: 400;
  --padra-weight-regular: 400;
  --padra-weight-medium: 500;
}

body,
button,
input,
select,
optgroup,
textarea {
  color: #4d4c4b;
  font-family: var(--padra-font-body);
  font-weight: var(--padra-weight-regular);
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--padra-font-display);
  font-weight: var(--padra-weight-light);
  font-style: normal;
  font-size: 32px;
  line-height: 1;
  letter-spacing: normal;
  font-synthesis: none;
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li>ul,
li>ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: rgba(59, 59, 61, 1);
}

a:hover,
a:focus,
a:active {
  color: rgba(59, 59, 61, 1);
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */

/* Main navigation styles live in the "Site Header" section below. */

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

svg.svg-icon {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50em;
  width: 30px;
  height: 30px;
  padding: 5px;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

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

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.site-footer {
  background: #fff;
  border-top: 1px solid #eee;
  color: #404040;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2.5em 1.5em 1.5em;
}

/* Brand column */
.footer-logo img {
  max-width: 220px;
  height: auto;
}

.footer-logo-text a {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #404040;
  text-decoration: none;
}

.footer-location {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 1.5em 0 1em;
  color: #404040;
}

.footer-icon-pin {
  color: #e8853b;
  flex-shrink: 0;
}

.footer-about {
  margin: 0;
  color: #757575;
  line-height: 1.7;
}

/* Link columns (mobile accordion via <details>) */
.footer-col {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 1em;
}

.footer-col-title {
  display: flex;
  align-items: center;
  gap: 0.75em;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625em;
  font-weight: 600;
  color: #333;
  padding: 0.5em 0;
}

.footer-col-title::-webkit-details-marker {
  display: none;
}

.footer-col-title::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.footer-col[open]>.footer-col-title::before {
  transform: rotate(135deg);
}

.footer-menu {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
}

.footer-menu li {
  margin: 0 0 1em;
}

.footer-menu a,
.footer-contact-value a {
  color: #757575;
  text-decoration: none;
}

.footer-menu a:hover,
.footer-menu a:focus,
.footer-contact-value a:hover,
.footer-contact-value a:focus {
  color: #e8853b;
}

/* Contact column */
.footer-contact-body {
  margin-top: 0.5em;
}

.footer-contact-label {
  font-size: 1em;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.5em;
}

.footer-contact-value {
  color: #757575;
  margin: 0 0 1.5em;
  line-height: 1.6;
}

.footer-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 3em;
}

.footer-social {
  display: flex;
  gap: 0.75em;
  margin-top: 0.5em;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f2f2f2;
  color: #404040;
}

/* Copyright bar */
.site-footer .site-info {
  border-top: 1px solid #eee;
  text-align: center;
  padding: 1.25em 1.5em;
  color: #404040;
}

/* Desktop: 4 columns, accordions locked open */
@media screen and (min-width: 56.25em) {
  .footer-main {
    grid-template-columns: 2fr 1fr 1.2fr 1.5fr;
    gap: 3em;
    padding: 3.5em 3em 3em;
  }

  .footer-col {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .footer-col-title {
    pointer-events: none;
    padding-top: 0;
  }

  .footer-col-title::before {
    display: none;
  }

  /* Keep column content visible on desktop even if collapsed on mobile first. */
  .footer-col::details-content {
    content-visibility: visible;
  }
}

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5em;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.75em 1.5em;
}

.site-branding .custom-logo {
  max-height: 48px;
  width: auto;
  display: block;
}

.site-logo-text {
  margin: 0;
}

.site-logo-text a {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1d1d1d;
  text-decoration: none;
}

/* Navigation ------------------------------------------------- */
.site-header .main-navigation {
  width: auto;
  margin-left: auto;
}

.site-header .menu-toggle {
  background: none;
  border: 0;
  padding: 0.5em;
  color: #1d1d1d;
  cursor: pointer;
  display: flex;
}

.site-header .nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile dropdown panel */
.site-header .main-navigation.toggled .nav-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  padding: 0.5em 1.5em 1em;
  z-index: 99999;
}

.site-header .nav-menu a {
  display: block;
  padding: 0.75em 0;
  color: #1d1d1d;
  text-decoration: none;
}

.site-header .nav-menu a:hover,
.site-header .nav-menu a:focus {
  color: #f47b20;
}

.nav-chevron {
  transition: transform 0.2s ease;
  vertical-align: middle;
}

/* Submenu: stacked and indented on mobile */
.site-header .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1em;
}

/* CTA shown as a plain menu item on mobile, hidden on desktop */
.menu-item-cta a {
  font-weight: 600;
  color: #f47b20;
}

/* Header actions --------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75em;
  position: relative;
}

.header-search summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f2eeec;
  color: #1d1d1d;
  cursor: pointer;
}

.header-search summary::-webkit-details-marker {
  display: none;
}

.header-search-panel {
  position: absolute;
  top: calc(100% + 0.75em);
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  padding: 1em;
  min-width: 280px;
  z-index: 99999;
}

.header-lang {
  display: inline-flex;
}

.header-lang summary,
.header-lang-static {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f2eeec;
  color: #1d1d1d;
  font-size: 0.875em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.header-lang summary::-webkit-details-marker {
  display: none;
}

.header-lang-list {
  list-style: none;
  margin: 0;
  padding: 0.5em;
  position: absolute;
  top: calc(100% + 0.75em);
  right: 100px;
  min-width: 160px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  z-index: 99999;
}

.header-lang-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.6em 0.85em;
  border-radius: 6px;
  color: #2f2e2d;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.header-lang-current-flag,
.header-lang-flag {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}

.header-lang-current-flag {
  border-radius: 50%;
}

.header-lang-name {
  display: block;
  min-width: 0;
}

.header-lang-item a:hover,
.header-lang-item a:focus {
  background: #f7f4ee;
  color: #f47b20;
}

.header-lang-item.is-current a {
  color: #f47b20;
  font-weight: 600;
}

html[dir="rtl"] .header-lang-list {
  right: auto;
  left: 100px;
}

.header-cta {
  display: inline-block;
  background: #f47b20;
  color: #fff;
  padding: 0.9em 1.75em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.header-cta:hover,
.header-cta:focus {
  background: #d96a15;
  color: #fff;
}

/* Mobile: logo left, hamburger right, actions hidden */
@media screen and (max-width: 63.99em) {
  .site-header {
    position: relative;
  }

  .site-header .menu-toggle,
  .site-header .main-navigation.toggled .nav-menu {
    display: flex;
  }

  .site-header .main-navigation.toggled .nav-menu {
    display: block;
  }

  .header-actions {
    display: none;
  }
}

/* Desktop: full nav row, hamburger hidden */
@media screen and (min-width: 64em) {
  .site-header .menu-toggle {
    display: none;
  }

  .site-header .nav-menu {
    display: flex;
    align-items: center;
    gap: 2em;
  }

  .site-header .nav-menu a {
    padding: 0.5em 0;
  }

  .site-header .main-navigation {
    margin-left: 3em;
    margin-right: auto;
  }

  /* CTA lives in .header-actions on desktop */
  .menu-item-cta {
    display: none;
  }

  /* Dropdown submenu */
  .site-header .menu-item-has-children {
    position: relative;
  }

  .site-header .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1em;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    padding: 0.5em 0;
    min-width: 240px;
    z-index: 99999;
  }

  .site-header .menu-item-has-children:hover>.sub-menu,
  .site-header .menu-item-has-children:focus-within>.sub-menu,
  .site-header .menu-item-has-children.focus>.sub-menu {
    display: block;
  }

  .site-header .menu-item-has-children:hover>a .nav-chevron {
    transform: rotate(180deg);
  }

  .site-header .sub-menu a {
    padding: 0.6em 1.25em;
  }
}

/*--------------------------------------------------------------
# Blog Detail (single post)
--------------------------------------------------------------*/
.single-post-main {
  background: #f7f4ef;
  padding: 1.5em 1em 0;
}

.single-post-main .blog-detail {
  max-width: 1440px;
  margin: 0 auto;
}

/* Header: breadcrumb + title ---------------------------------- */
.blog-detail-header {
  background: #fffdfa;
  border-radius: 24px;
  padding: 1.75em 1.5em 0.5em;
  margin-bottom: 0.5em;
}

.blog-detail-breadcrumb {
  display: flex;
  gap: 0.5em;
  font-size: 0.8125em;
  color: #a3a09c;
  margin-bottom: 1em;
}

.blog-detail-breadcrumb a {
  color: #a3a09c;
  text-decoration: none;
}

.blog-detail-breadcrumb a:hover,
.blog-detail-breadcrumb a:focus {
  color: #f47b20;
}

.blog-detail-title {
  font-size: 2em;
  line-height: 1.15;
  color: #2f2e2d;
  margin: 0 0 0.75em;
}

/* Two-column layout ------------------------------------------- */
.blog-detail-layout {
  background: #fffdfa;
  border-radius: 24px;
  padding: 1.5em 1.5em 1.5em;
  overflow: hidden;
}

.blog-detail-thumbnail {
  margin: 0 0 1.5em;
}

.blog-detail-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Verified note ----------------------------------------------- */
.blog-detail-verified {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #efece6;
  margin-bottom: 1.5em;
}

.blog-detail-verified-icon {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.blog-detail-verified-title {
  font-family: var(--padra-body-font);
  font-size: 1em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.5em;
}

.blog-detail-verified-body p {
  color: #8b8885;
  margin: 0;
  line-height: 1.5;
}

/* Article content --------------------------------------------- */
.blog-detail .entry-content {
  margin: 0;
  color: #4d4c4b;
  line-height: 1.6;
}

.blog-detail .entry-content h2,
.blog-detail .entry-content h3 {
  font-family: var(--padra-body-font);
  font-weight: 400;
  color: #2f2e2d;
  line-height: 1.8em;
  margin: 1.75em 0 0.75em;
  scroll-margin-top: 2em;
}

.blog-detail .entry-content h2 {
  font-size: 1.125em;
}

.blog-detail .entry-content h3 {
  font-size: 1em;
}

.blog-detail .entry-content img {
  border-radius: 16px;
}

/* Quote text --------------------------------------------------- */
.blog-detail-quote {
  display: flex;
  gap: 0.75em;
  margin: 2em 0;
  padding: 1.5em;
  background: #f7f4ee;
  border-left: 2px solid #f47b20;
  border-radius: 12px;
}

.blog-detail-quote-mark {
  font-family: canela;
  font-size: 2em;
  line-height: 1;
  color: #b3b0ab;
}

.blog-detail-quote-label {
  color: #2f2e2d;
  margin: 0 0 0.75em;
}

.blog-detail-quote-text {
  color: #4d4c4b;
  line-height: 1.6;
  margin: 0 0 1.25em;
}

.blog-detail-quote-source {
  color: #4d4c4b;
  margin: 0;
}

.blog-detail-quote-source a {
  color: #2ac0ce;
  text-decoration: none;
}

/* Related Product --------------------------------------------- */

.blog-related-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 184px;
  margin: 32px 0;
  overflow: hidden;
  border-left: 4px solid #ff6a14;
  border-radius: 16px;
  background: linear-gradient(90deg, #ffab7a 0%, #fde6d4 100%);
}

.blog-related-product.has-image {
  grid-template-columns: 197px minmax(0, 1fr) auto;
}

.blog-related-product__media {
  align-self: stretch;
  width: 197px;
  min-height: 184px;
  overflow: hidden;
  border-radius: 16px;
}

.blog-detail .entry-content .blog-related-product__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 184px;
  margin: 0;
  border-radius: 16px;
  object-fit: cover;
}

.blog-related-product__body {
  align-self: center;
  min-width: 0;
  padding: 16px 0;
}

.blog-related-product__date {
  display: block;
  margin: 0 0 8px;
  color: #625f5b;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.blog-detail .entry-content .blog-related-product__title {
  display: -webkit-box;
  overflow: hidden;
  clear: none;
  margin: 0 0 8px;
  color: #1a1919;
  font-family: var(--padra-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.blog-related-product__description {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #4d4c4b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.blog-related-product__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px 16px 0;
}

.blog-related-product__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 175px;
  min-height: 54px;
  padding: 16px 32px;
  border-radius: 69px;
  background: #fff;
  color: #3b3b3d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.blog-related-product__button:hover,
.blog-related-product__button:focus {
  color: #ff6a14;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 25, 25, 0.08);
}

.blog-related-product__button:focus-visible {
  outline: 2px solid #ff6a14;
  outline-offset: 3px;
}

.blog-related-product__button svg {
  display: block;
  flex: 0 0 24px;
  transition: transform 0.2s ease;
}

.blog-related-product__button:hover svg,
.blog-related-product__button:focus svg {
  transform: translateX(3px);
}

@media screen and (max-width: 47.99em) {

  .blog-related-product,
  .blog-related-product.has-image {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    margin: 24px 0;
  }

  .blog-related-product__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 12px 12px 0 0;
  }

  .blog-detail .entry-content .blog-related-product__image {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
  }

  .blog-related-product__body {
    width: 100%;
    padding: 16px 16px 12px;
  }

  .blog-related-product__date {
    margin-bottom: 6px;
    font-size: 13px;
  }

  .blog-detail .entry-content .blog-related-product__title {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .blog-related-product__description {
    font-size: 14px;
    line-height: 1.5;
  }

  .blog-related-product__actions {
    width: 100%;
    padding: 0 16px 16px;
  }

  .blog-related-product__button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 14px 24px;
  }
}

/* FAQ ---------------------------------------------------------- */
.blog-detail-faq {
  margin-top: 2em;
}

.blog-detail-faq-title {
  font-family: var(--padra-body-font);
  font-size: 1.25em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.75em;
}

.blog-detail-faq-item {
  background: #fffdfa;
  border: 1px solid #edeae4;
  border-radius: 12px;
  padding: 1em 1.25em;
  margin-bottom: 0.75em;
}

.blog-detail-faq-question {
  cursor: pointer;
  color: #2f2e2d;
  line-height: 1.5;
}

.blog-detail-faq-answer {
  color: #4d4c4b;
  line-height: 1.6;
  padding-top: 0.75em;
}

/* Blog CTA ----------------------------------------------------- */

.blog-detail .entry-content .blog-detail-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 253px;
  margin: 32px 0;
  padding: 56px 72px;
  background-color: #ffdbc7;
  border-radius: 32px;
}

.blog-detail .entry-content .blog-detail-cta::before,
.blog-detail .entry-content .blog-detail-cta::after {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  pointer-events: none;
}

.blog-detail .entry-content .blog-detail-cta::before {
  left: 0;
  width: 46%;
  background-image: url("assets/img/cta-pattern-left.svg");
  background-position: left center;
}

.blog-detail .entry-content .blog-detail-cta::after {
  right: 0;
  width: 46%;
  background-image: url("assets/img/cta-pattern-right.svg");
  background-position: right center;
}

.blog-detail .entry-content .blog-detail-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

.blog-detail .entry-content .blog-detail-cta-main,
.blog-detail .entry-content .blog-detail-cta-content {
  min-width: 0;
}

.blog-detail .entry-content .blog-detail-cta-title {
  max-width: 520px;
  margin: 0;
  padding: 0;
  color: #1a1919;
  font-family: canela, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.blog-detail .entry-content .blog-detail-cta-text {
  max-width: 480px;
  margin: 0 0 24px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

.blog-detail .entry-content .blog-detail-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-detail .entry-content .blog-detail-cta-button {
  display: inline-flex;
  min-width: 220px;
  height: 54px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-family: var(--padra-body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

.blog-detail .entry-content .blog-detail-cta-button-primary {
  background-color: #ff6815;
  color: #fff;
}

.blog-detail .entry-content .blog-detail-cta-button-primary:hover,
.blog-detail .entry-content .blog-detail-cta-button-primary:focus-visible {
  background-color: #f25d0d;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  outline: none;
}

.blog-detail .entry-content .blog-detail-cta-button-secondary {
  background-color: #fff;
  color: #4d4c4b;
}

.blog-detail .entry-content .blog-detail-cta-button-secondary:hover,
.blog-detail .entry-content .blog-detail-cta-button-secondary:focus-visible {
  background-color: #fff;
  color: #1a1919;
  text-decoration: none;
  transform: translateY(-2px);
  outline: none;
}

.blog-detail .entry-content .blog-detail-cta-button-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@media screen and (max-width: 1024px) {
  .blog-detail .entry-content .blog-detail-cta {
    padding: 48px;
  }

  .blog-detail .entry-content .blog-detail-cta-title {
    font-size: 38px;
  }

  .blog-detail .entry-content .blog-detail-cta-actions {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 767px) {
  .blog-detail .entry-content .blog-detail-cta {
    min-height: 544px;
    margin: 24px 0;
    padding: 32px;
    background-image: url("assets/img/cta-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 32px;
  }

  .blog-detail .entry-content .blog-detail-cta::before,
  .blog-detail .entry-content .blog-detail-cta::after {
    display: none;
  }

  .blog-detail .entry-content .blog-detail-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .blog-detail .entry-content .blog-detail-cta-title {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.15;
  }

  .blog-detail .entry-content .blog-detail-cta-text {
    max-width: 100%;
    margin-bottom: 40px;
    font-size: 15px;
    line-height: 1.45;
  }

  .blog-detail .entry-content .blog-detail-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .blog-detail .entry-content .blog-detail-cta-button {
    width: 100%;
    min-width: 0;
  }
}

/*--------------------------------------------------------------
# Footer information architecture
--------------------------------------------------------------*/
.footer-brand {
  min-width: 0;
}

.footer-brand-title {
  margin: 1.25em 0 0.55em;
  color: #1f1f1f;
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.3;
}

.footer-brand .footer-about {
  max-width: 36em;
}

.footer-clinics-menu li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
}

.footer-clinics-menu span {
  color: #757575;
}

.footer-clinics-menu small {
  display: inline-flex;
  align-items: center;
  min-height: 1.7em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: #eef3ff;
  color: #315ba8;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
}

.footer-social a {
  width: 38px;
  height: 38px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: #ff681e;
  color: #fff;
}

.footer-social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social [aria-label="Facebook"] path,
.footer-social [aria-label="Whatsapp"] path,
.footer-social [aria-label="Linkedin"] path,
.footer-social [aria-label="Tiktok"] path,
.footer-social [aria-label="Snapchat"] path,
.footer-social [aria-label="Telegram"] path,
.footer-social .is-filled {
  fill: currentColor;
  stroke: none;
}

.site-footer .site-info {
  padding: 0 1.5em;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.25em 0;
}

.footer-bottom-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.25em;
}

.footer-bottom-contact a {
  color: #757575;
  direction: ltr;
  unicode-bidi: isolate;
  text-decoration: none;
}

.footer-bottom-contact a:hover,
.footer-bottom-contact a:focus-visible {
  color: #e8853b;
}

@media screen and (min-width: 56.25em) {
  .footer-main {
    grid-template-columns: minmax(18em, 2fr) repeat(3, minmax(9em, 1fr));
    gap: clamp(2em, 4vw, 5em);
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: start;
  }

  .footer-bottom-contact {
    justify-content: flex-end;
  }
}

/* Expert box -------------------------------------------------- */
.blog-detail-expert {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
  margin-top: 2em;
}

@media screen and (max-width: 63.99em) {
  .blog-detail-expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 1.25em;

    margin-top: 2em;

    text-align: center;
  }

  .blog-detail-expert-photo {
    width: 90px;
    height: 90px;

    border-radius: 50%;

    object-fit: cover;
  }

  .blog-detail-expert-body {
    width: 100%;
    max-width: 320px;

    text-align: center;
  }

  .blog-detail-expert-title {
    font-size: 1.25rem;

    line-height: 1.4;

    margin: 0 0 0.75em;
  }

  .blog-detail-expert-body p {
    font-size: 16px;

    line-height: 1.7;

    color: #4d4c4b;

    margin: 0 auto;
  }
}

.blog-detail-expert-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-detail-expert-title {
  font-family: var(--padra-body-font);
  font-size: 1.0625em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.75em;
}

.blog-detail-expert-specialty {
  display: block;
  font-size: 0.875em;
  color: #4d4c4b;
  margin-top: 0.25em;
}

.blog-detail-expert-title a,
.blog-detail-meta-author a {
  color: inherit;
  text-decoration: none;
}

.blog-detail-expert-title a:hover,
.blog-detail-expert-title a:focus,
.blog-detail-meta-author a:hover,
.blog-detail-meta-author a:focus {
  color: #f47b20;
}

.blog-detail-expert-body p {
  color: #4d4c4b;
  line-height: 1.6;
  margin: 0;
}

/* Sidebar ----------------------------------------------------- */
.blog-detail-sidebar {
  margin-top: 2em;
}

.blog-detail-meta {
  background: #fffdfa;
  border: 1px solid #edeae4;
  border-radius: 16px;
  padding: 1.5em;
}

.blog-detail-meta-block {
  margin-bottom: 1.5em;
}

.blog-detail-meta-block:last-child {
  margin-bottom: 0;
}

.blog-detail-meta-label {
  font-family: var(--padra-body-font);
  font-size: 1em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.5em;
}

.blog-detail-meta-block p {
  color: #4d4c4b;
  margin: 0;
}

.blog-detail-meta-specialty {
  font-size: 0.75em;
  color: #a3a09c;
  margin-top: 0.25em;
}

.blog-detail-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.blog-detail-share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f1ec;
  color: #4d4c4b;
}

.blog-detail-share-link:hover,
.blog-detail-share-link:focus {
  background: #f47b20;
  color: #fff;
}

/* Table of contents ------------------------------------------- */
.blog-detail-toc {
  background: #f4f1ea;
  border-radius: 16px;
  padding: 1.5em 1.25em;
  margin: 0 0 1.5em;
}

.blog-detail-toc-title {
  font-size: 1.8em;
  color: #2f2e2d;
  margin: 0 0 1em;
}

.blog-detail-toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0.75em 0 0;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #f47b20 transparent;
}

.blog-detail-toc-list::-webkit-scrollbar {
  width: 3px;
}

.blog-detail-toc-list::-webkit-scrollbar-thumb {
  background: #f47b20;
  border-radius: 3px;
}

.blog-detail-toc-item {
  margin-bottom: 1em;
}

.blog-detail-toc-item a {
  color: #8b8885;
  text-decoration: none;
}

.blog-detail-toc-item:first-child a {
  color: #2f2e2d;
}

.blog-detail-toc-item a:hover,
.blog-detail-toc-item a:focus {
  color: #f47b20;
}

.blog-detail-toc-level-3 {
  padding-left: 1em;
}

/* Related posts ----------------------------------------------- */
.blog-detail-related {
  display: none;
}

/* Category / sources chips ------------------------------------ */
.blog-detail-terms {
  background: #fffdfa;
  border-radius: 16px;
  padding: 1.5em;
  margin: 1.5em auto 0;
  max-width: 1440px;
}

.blog-detail-terms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75em 1em;
  margin-bottom: 1em;
}

.blog-detail-terms-row:last-child {
  margin-bottom: 0;
}

.blog-detail-terms-label {
  color: #2f2e2d;
  padding-top: 0.5em;
}

.blog-detail-terms-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

.blog-detail-term {
  display: inline-block;
  padding: 0.5em 1.25em;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9375em;
}

.blog-detail-term-category {
  background: #8e8b88;
  color: #fff;
}

.blog-detail-term-category:visited {
  color: #fff;
}

.blog-detail-term-category:hover,
.blog-detail-term-category:focus {
  background: #f47b20;
  color: #fff;
}

.blog-detail-term-source {
  border: 1px solid #e4e0da;
  color: #4d4c4b;
  background: #fff;
}

/* Comments ---------------------------------------------------- */
.blog-detail-comments {
  background: #fffdfa;
  border-radius: 16px;
  padding: 1.5em;
  margin: 1.5em auto 0;
  max-width: 1440px;
}

/* Holds only the cancel-reply link; hidden unless replying */
.blog-detail-reply-title {
  font-family: var(--padra-body-font);
  font-size: 0.875em;
  margin: 0 0 1em;
}

.blog-detail-reply-title:empty {
  display: none;
}

.blog-detail-reply-title a {
  color: #f47b20;
  text-decoration: none;
}

.blog-detail-comment-opinion {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  border: 1px solid #e4e0da;
  border-radius: 12px;
  background: #fff;
  padding: 1em 1.25em;
  margin-bottom: 1em;
}

.blog-detail-comment-opinion textarea {
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 0;
  resize: vertical;
  min-height: 120px;
}

.blog-detail-comment-opinion textarea:focus {
  outline: none;
}

/* Star rating: inputs ordered 5..1, row-reverse renders 1..5 */
.blog-detail-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25em;
}

.blog-detail-rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.blog-detail-rating label {
  cursor: pointer;
  font-size: 1.5em;
  line-height: 1;
  color: #e3dccb;
}

.blog-detail-rating label::before {
  content: "\2605";
}

.blog-detail-rating label:hover,
.blog-detail-rating label:hover~label,
.blog-detail-rating input:checked~label {
  color: #d9a441;
}

.blog-detail-rating input:focus-visible+label {
  outline: 2px solid #f47b20;
  outline-offset: 2px;
}

.blog-detail-comment-form .comment-form-email input,
.blog-detail-comment-form .comment-form-author input {
  width: 100%;
  border: 1px solid #e4e0da;
  border-radius: 999px;
  background: #fff;
  padding: 1em 1.5em;
}

.blog-detail-comment-form .form-submit {
  margin: 1.5em 0 0;
}

.blog-detail-comment-form .form-submit button {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  background: #ddc69c;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 1em 1.75em;
  cursor: pointer;
}

.blog-detail-comment-form .form-submit button:hover,
.blog-detail-comment-form .form-submit button:focus {
  background: #f47b20;
}

.blog-detail-comment-list {
  list-style: none;
  margin: 2em 0 0;
  padding: 1.5em 0 0;
  border-top: 1px solid #efece6;
}

.blog-detail-comment {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #efece6;
}

.blog-detail-comment:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.blog-detail-comment .children {
  list-style: none;
  margin: 1.5em 0 0 2em;
  padding: 0;
}

.blog-detail-comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.blog-detail-comment-author {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.blog-detail-comment-author .avatar {
  border-radius: 50%;
}

.blog-detail-comment-name {
  color: #2f2e2d;
}

.blog-detail-comment-meta {
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: #8b8885;
}

.blog-detail-comment-rating {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding-left: 0.75em;
  border-left: 1px solid #e4e0da;
}

.blog-detail-comment-content p {
  color: #4d4c4b;
  line-height: 1.6;
  margin: 0 0 1em;
}

.blog-detail-comment-content p:last-child {
  margin-bottom: 0;
}

.blog-detail-comment-reply a {
  color: #f47b20;
  text-decoration: none;
  font-size: 0.875em;
}

/* Appointment CTA --------------------------------------------- */
.appointment-cta {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem clamp(2rem, 7vw, 8rem);
  overflow: hidden;
  border-radius: 1.5rem;
  background: #fee8dc;
  scroll-margin-top: 7.5rem;
  width: 1440px;
  margin: auto;
  margin-top: 2em;
}

.appointment-cta+.site-footer {
  border-top: 0;
}

.appointment-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(17.5rem, 22.5rem) minmax(28rem, 34.25rem);
  justify-content: center;
  align-items: center;
  gap: clamp(4rem, 8vw, 9rem);
  width: 100%;
  max-width: 63rem;
  margin: 0 auto;
}

.appointment-cta-intro {
  max-width: 22.5rem;
}

.appointment-cta-title {
  max-width: 20rem;
  margin: 0 0 1.75rem;
  font-family: "canela", Georgia, serif;
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.08;
  color: #3b3b3d;
}

.appointment-cta-text {
  max-width: 20.5rem;
  margin: 0;
  color: #4d4c4b;
  font-size: 1rem;
  line-height: 1.8em;
}

.appointment-cta-form-card {
  width: 100%;
  min-width: 0;
  padding: 3.25rem 2rem;
  border-radius: 1.5rem;
  background: #fff;
}

.appointment-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58%;
  height: 100%;
  background-image: url("assets/img/footer-pattern.svg.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  opacity: 0.72;
  z-index: 0;
  pointer-events: none;
}

.appointment-cta-form,
.appointment-cta-form>div,
.appointment-cta-form form {
  width: 100%;
  max-width: none;
}

.appointment-cta-form {
  --hsf-button__background-color: #ff5f0a;
  --hsf-button__color: #fff;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 1.125rem 2rem;
  --hsf-field-input__border-color: #dfd0c2;
  --hsf-field-input__border-radius: 999px;
}

.appointment-cta-hubspot {
  position: relative;
  z-index: 1;
}

.appointment-cta .appointment-cta-form fieldset {
  max-width: none !important;
  margin: 0 0 1rem !important;
}

.appointment-cta .appointment-cta-form .form-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.appointment-cta .appointment-cta-form .form-columns-1 .hs-form-field,
.appointment-cta .appointment-cta-form .form-columns-2 .hs-form-field,
.appointment-cta .appointment-cta-form .form-columns-3 .hs-form-field {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.appointment-cta .appointment-cta-form label {
  display: block;
  margin: 0 0 0.375rem;
  color: #4d4c4b;
  font-size: 0.8125rem;
  line-height: 1.8em;
}

.appointment-cta .appointment-cta-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.appointment-cta .appointment-cta-form select,
.appointment-cta .appointment-cta-form textarea {
  display: block;
  width: 100% !important;
  min-height: 3.375rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0.875rem 1rem !important;
  border: 1px solid #dfd0c2 !important;
  border-radius: 999px !important;
  outline: 0;
  background-color: #fff !important;
  box-shadow: none !important;
  color: #2f2e2d;
  font: inherit;
}

.appointment-cta .appointment-cta-form textarea {
  min-height: 7rem;
  border-radius: 1.5rem !important;
  resize: vertical;
}

.appointment-cta .appointment-cta-form input:focus,
.appointment-cta .appointment-cta-form select:focus,
.appointment-cta .appointment-cta-form textarea:focus {
  border-color: #ff5f0a !important;
}

.appointment-cta .appointment-cta-form .hs-error-msgs {
  margin: 0.375rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
  color: #b42318;
  font-size: 0.75rem;
}

.appointment-cta .appointment-cta-form .hs_submit {
  margin-top: 1.25rem;
}

.appointment-cta .appointment-cta-form .actions {
  position: relative;
  display: inline-block;
  width: min(100%, 20rem);
  margin: 0;
}

.appointment-cta .appointment-cta-form .actions::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 1.75rem;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-52%);
  pointer-events: none;
}

.appointment-cta .appointment-cta-form input[type="submit"],
.appointment-cta .appointment-cta-form .hs-button {
  display: block;
  width: 100% !important;
  min-height: 3.875rem;
  margin: 0;
  padding: 1rem 3.5rem 1rem 1.75rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ff5f0a !important;
  box-shadow: none !important;
  color: #fff !important;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.appointment-cta .appointment-cta-form input[type="submit"]:hover,
.appointment-cta .appointment-cta-form input[type="submit"]:focus,
.appointment-cta .appointment-cta-form .hs-button:hover,
.appointment-cta .appointment-cta-form .hs-button:focus {
  background: #e95400 !important;
}

/* Mobile: hide desktop TOC, related posts ---------------------- */
@media screen and (max-width: 63.99em) {
  .blog-detail-toc-desktop {
    display: none;
  }
}

/* Desktop ------------------------------------------------------ */
@media screen and (min-width: 64em) {
  .single-post-main {
    padding: 2em 2em 0;
  }

  .blog-detail-header {
    padding: 2.5em 3em 1em;
  }

  .blog-detail-title {
    font-size: 2.5em;
  }

  .blog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    padding: 1.5em 1.5em 1.5em;
  }

  .blog-detail-content {
    padding: 0.5em 3em 3em 0;
  }

  .blog-detail-toc-mobile {
    display: none;
  }

  .blog-detail-sidebar {
    margin-top: 0;
    border-left: 1px solid #efece6;
    background: #fdfcf8;
    border-radius: 0 0 24px 0;
    padding: 0.5em 2em 3em;
  }

  .blog-detail-meta {
    background: none;
    border: 0;
    border-bottom: 1px solid #efece6;
    border-radius: 0;
    padding: 0 0 1.5em;
    margin-bottom: 1.5em;
  }

  .blog-detail-toc {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .blog-detail-related {
    display: block;
    border-top: 1px solid #efece6;
    padding-top: 1.5em;
    margin-top: 1.5em;
  }

  .blog-detail-related-card {
    display: block;
    text-decoration: none;
    margin-bottom: 1.75em;
  }

  .blog-detail-related-card img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0.75em;
  }

  .blog-detail-related-date {
    display: block;
    font-size: 0.8125em;
    color: #a3a09c;
    margin-bottom: 0.35em;
  }

  .blog-detail-related-title {
    color: #2f2e2d;
    line-height: 1.4;
  }

  .blog-detail-related-card:hover .blog-detail-related-title,
  .blog-detail-related-card:focus .blog-detail-related-title {
    color: #f47b20;
  }

  .blog-detail-terms,
  .blog-detail-comments {
    padding: 2em 3em;
  }

  /* Opinion box: textarea left, stars top-right */
  .blog-detail-comment-opinion {
    flex-direction: row;
    align-items: flex-start;
  }

  .blog-detail-comment-form .comment-form-email input,
  .blog-detail-comment-form .comment-form-author input {
    padding: 1.1em 1.5em;
  }
}

@media screen and (max-width: 63.99em) {
  .appointment-cta {
    min-height: 0;
    padding: 3rem 1.25rem 2rem;
    border-radius: 1.5rem;
    scroll-margin-top: 5rem;
  }

  .appointment-cta::before {
    width: 100%;
    background-position: left top;
    background-size: auto 70%;
    opacity: 0.5;
  }

  .appointment-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .appointment-cta-intro {
    max-width: 100%;
  }

  .appointment-cta-title {
    max-width: 18rem;
    margin-bottom: 1.25rem;
    font-size: clamp(2.5rem, 12vw, 3rem);
  }

  .appointment-cta-text {
    max-width: 31rem;
    font-size: 0.9375rem;
    line-height: 1.8em;
  }

  .appointment-cta-form-card {
    padding: 1.75rem 1rem;
    border-radius: 1.25rem;
  }

  .appointment-cta .appointment-cta-form .form-columns-2,
  .appointment-cta .appointment-cta-form .form-columns-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .appointment-cta .appointment-cta-form .actions {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Blog Content Tables
--------------------------------------------------------------*/

.entry-content table {
  width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  border-radius: 12px;

  background: #fff;

  color: rgba(77, 76, 75, 1);

  font-size: 16px;

  line-height: 1.6;

  margin: 2em 0;
}

/*--------------------------------------------------------------
# Table Header
--------------------------------------------------------------*/

.entry-content table thead th,
.entry-content table tbody tr:first-child td:has(b) {
  background: rgba(77, 76, 75, 1);
  color: #fff;
  font-weight: 500;
  padding: 12px 18px;
  border: none;
}

.entry-content table thead th:first-child,
.entry-content table tbody tr:first-child td:has(b):first-child {
  border-top-left-radius: 12px;
}

.entry-content table thead th:last-child,
.entry-content table tbody tr:first-child td:has(b):last-child {
  border-top-right-radius: 12px;
}

/*--------------------------------------------------------------
# Table Body
--------------------------------------------------------------*/

.entry-content table tbody td {
  padding: 8px 12px;

  border-bottom: 1px solid #eee6df;

  background: #fff;

  color: rgba(77, 76, 75, 1);

  vertical-align: middle;
}

.entry-content table tbody tr:last-child td {
  border-bottom: none;
}

.entry-content table td,
.entry-content table th {
  border-left: none;

  border-right: none;
}

/*--------------------------------------------------------------
# RTL
--------------------------------------------------------------*/

html[dir="rtl"] .entry-content table {
  direction: rtl;
}

html[dir="rtl"] .entry-content table td,
html[dir="rtl"] .entry-content table th {
  text-align: right;
}

/*--------------------------------------------------------------
# Mobile Table Scroll
--------------------------------------------------------------*/

@media (max-width: 767px) {
  .entry-content {
    overflow: visible;
  }

  .entry-content table {
    display: block;

    width: 100%;

    max-width: 100%;

    overflow-x: auto;

    white-space: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    scrollbar-color: rgba(77, 76, 75, 1) transparent;

    padding-bottom: 12px;
  }

  .entry-content table tbody,
  .entry-content table thead {
    display: table;

    width: max-content;

    min-width: 650px;
  }

  .entry-content table td,
  .entry-content table th {
    white-space: normal;

    min-width: 160px;

    padding: 14px 16px;

    font-size: 15px;
  }

  /* Chrome / Edge / Safari */

  .entry-content table::-webkit-scrollbar {
    height: 6px;
  }

  .entry-content table::-webkit-scrollbar-track {
    background: transparent;

    border-radius: 20px;
  }

  .entry-content table::-webkit-scrollbar-thumb {
    background: rgba(77, 76, 75, 1);

    border-radius: 20px;
  }

  .entry-content table::-webkit-scrollbar-thumb:hover {
    background: rgba(77, 76, 75, 0.85);
  }
}

/*--------------------------------------------------------------
# Polylang Direction Support
--------------------------------------------------------------*/

/* Keep the existing English/LTR footer design. */
.site-footer.footer-direction-ltr {
  direction: ltr;
  text-align: left;
}

.site-footer.footer-direction-ltr .footer-main,
.site-footer.footer-direction-ltr .footer-brand,
.site-footer.footer-direction-ltr .footer-col,
.site-footer.footer-direction-ltr .footer-contact-body {
  direction: ltr;
  text-align: left;
}

/* Arabic/RTL footer. */
.site-footer.footer-direction-rtl,
html[dir="rtl"] .site-footer {
  direction: rtl;
  text-align: right;
}

.site-footer.footer-direction-rtl .footer-main,
html[dir="rtl"] .site-footer .footer-main {
  direction: rtl;
}

.site-footer.footer-direction-rtl .footer-brand,
.site-footer.footer-direction-rtl .footer-col,
.site-footer.footer-direction-rtl .footer-contact-body,
html[dir="rtl"] .site-footer .footer-brand,
html[dir="rtl"] .site-footer .footer-col,
html[dir="rtl"] .site-footer .footer-contact-body {
  direction: rtl;
  text-align: right;
}

.site-footer.footer-direction-rtl .footer-location,
.site-footer.footer-direction-rtl .footer-col-title,
.site-footer.footer-direction-rtl .footer-contact-row,
.site-footer.footer-direction-rtl .footer-social,
html[dir="rtl"] .site-footer .footer-location,
html[dir="rtl"] .site-footer .footer-col-title,
html[dir="rtl"] .site-footer .footer-contact-row,
html[dir="rtl"] .site-footer .footer-social {
  direction: rtl;
}

.site-footer.footer-direction-rtl .footer-menu,
html[dir="rtl"] .site-footer .footer-menu {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  text-align: right;
}

.site-footer.footer-direction-rtl .footer-col-title::before,
html[dir="rtl"] .site-footer .footer-col-title::before {
  border-right: 0;
  border-left: 2px solid #333;
  transform: rotate(-45deg);
}

.site-footer.footer-direction-rtl .footer-col[open]>.footer-col-title::before,
html[dir="rtl"] .site-footer .footer-col[open]>.footer-col-title::before {
  transform: rotate(-135deg);
}

.site-footer.footer-direction-rtl .footer-contact-value a[href^="tel:"],
.site-footer.footer-direction-rtl .footer-contact-value a[href^="mailto:"],
html[dir="rtl"] .site-footer .footer-contact-value a[href^="tel:"],
html[dir="rtl"] .site-footer .footer-contact-value a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Header RTL support without changing the current English layout. */
html[dir="rtl"] .site-header {
  direction: rtl;
}

html[dir="rtl"] .header-inner,
html[dir="rtl"] .site-header .nav-menu,
html[dir="rtl"] .header-actions {
  direction: rtl;
}

html[dir="rtl"] .site-header .main-navigation {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .site-header .main-navigation.toggled .nav-menu,
html[dir="rtl"] .site-header .sub-menu {
  text-align: right;
}

html[dir="rtl"] .site-header .sub-menu {
  padding-right: 1em;
  padding-left: 0;
}

html[dir="rtl"] .header-search-panel {
  right: auto;
  left: 0;
  text-align: right;
}

@media screen and (min-width: 64em) {
  html[dir="rtl"] .site-header .main-navigation {
    margin-right: 3em;
    margin-left: auto;
  }

  html[dir="rtl"] .site-header .sub-menu {
    right: -1em;
    left: auto;
    padding: 0.5em 0;
  }

  html[dir="rtl"] .site-header .sub-menu a {
    text-align: right;
  }
}

@media screen and (max-width: 56.24em) {

  .site-footer.footer-direction-rtl .footer-col,
  html[dir="rtl"] .site-footer .footer-col {
    text-align: right;
  }
}

/*--------------------------------------------------------------
# Blog Archive (category / tag / author)
--------------------------------------------------------------*/
.blog-archive-main {
  background: #f7f4ef;
  padding: 1.5em 1em;
}

.blog-archive {
  max-width: 1440px;
  margin: 0 auto;
  background: #fffdfa;
  border-radius: 24px;
  padding: 1.75em 1.5em;
}

/* Header: breadcrumb + title + search ------------------------- */
.blog-archive-header {
  text-align: center;
  margin-bottom: 2em;
}

.blog-archive-breadcrumb {
  justify-content: center;
}

.blog-archive-title {
  font-family: canela;
  font-size: 2.25em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.75em;
}

.blog-archive-search {
  display: flex;
  align-items: center;
  gap: 0.6em;
  max-width: 420px;
  margin: 0 auto;
  padding: 0.7em 1.25em;
  background: #fff;
  border: 1px solid #edeae4;
  border-radius: 999px;
  color: #a3a09c;
}

.blog-archive-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: #2f2e2d;
}

/* Layout: filters + results ----------------------------------- */
.blog-archive-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.blog-archive-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  flex-shrink: 0;
}

.blog-archive-filter {
  display: block;
  width: 100%;
  text-align: start;
  padding: 1em 1.25em;
  background: #f4f1eb;
  color: #2f2e2d;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.blog-archive-filter:hover,
.blog-archive-filter:focus {
  background: #e9e5de;
}

.blog-archive-filter.is-active {
  background: #2f2e2d;
  color: #fff;
}

/* Toolbar: selected filter + sort ------------------------------ */
.blog-archive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.5em;
}

.blog-archive-selected {
  font-family: canela;
  font-size: 1.5em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0;
}

.blog-archive-sort {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #a3a09c;
  font-size: 0.875em;
}

.blog-archive-sort-select {
  padding: 0.5em 1em;
  background: #fff;
  border: 1px solid #edeae4;
  border-radius: 999px;
  color: #2f2e2d;
  cursor: pointer;
}

/* Cards grid --------------------------------------------------- */
.blog-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75em 1.25em;
  transition: opacity 0.2s ease;
}

.blog-archive.is-loading .blog-archive-grid {
  opacity: 0.4;
  pointer-events: none;
}

.blog-archive-card {
  display: block;
  text-decoration: none;
}

.blog-archive-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 0.75em;
}

.blog-archive-card-date {
  display: block;
  font-size: 0.8125em;
  color: #a3a09c;
  margin-bottom: 0.35em;
}

.blog-archive-card-title {
  color: #2f2e2d;
  line-height: 1.5;
}

.blog-archive-card:hover .blog-archive-card-title,
.blog-archive-card:focus .blog-archive-card-title {
  color: #f47b20;
}

.blog-archive-empty {
  grid-column: 1 / -1;
  color: #4d4c4b;
  margin: 0;
}

/* Load more ---------------------------------------------------- */
.blog-archive-more {
  text-align: center;
  margin-top: 2em;
}

.blog-archive-more-button {
  padding: 0.75em 2em;
  background: #fff;
  color: #2f2e2d;
  border: 1px solid #edeae4;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.blog-archive-more-button:hover,
.blog-archive-more-button:focus {
  background: #f4f1eb;
}

/* Desktop ------------------------------------------------------ */
@media screen and (min-width: 64em) {
  .blog-archive {
    padding: 2.5em 3em;
  }

  .blog-archive-layout {
    flex-direction: row;
    gap: 2.5em;
  }

  .blog-archive-filters {
    width: 240px;
  }

  .blog-archive-results {
    flex: 1;
    min-width: 0;
  }

  .blog-archive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 40em) and (max-width: 63.99em) {
  .blog-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*--------------------------------------------------------------
# Blog List (Padra Weblog / mag page)
--------------------------------------------------------------*/
.blog-list-main {
  background: #fff;
  padding: 1.5em 1em 3em;
  max-width: 1440px;
  margin: 0 auto;
}

/* Hero slider -------------------------------------------------- */
.blog-list-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin-bottom: 2.5em;
}

.blog-list-hero-track {
  display: flex;
  transition: transform 0.5s ease;
}

.blog-list-hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

.blog-list-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-list-hero-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2em 1.5em 3em;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.blog-list-hero-title {
  font-family: canela;
  font-size: 1.75em;
  font-weight: 400;
  margin: 0 0 0.5em;
  color: #fff;
}

.blog-list-hero-text {
  max-width: 560px;
  line-height: 1.6;
  margin: 0 0 1.25em;
  opacity: 0.9;
}

.blog-list-hero-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.5em;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.blog-list-hero-button:hover,
.blog-list-hero-button:focus {
  background: #f47b20;
  border-color: #f47b20;
}

.blog-list-hero-dots {
  position: absolute;
  bottom: 1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5em;
  z-index: 2;
}

.blog-list-hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.blog-list-hero-dot.is-active {
  background: #fff;
}

/* Header + pills toolbar --------------------------------------- */
.blog-list-header {
  margin-bottom: 1.5em;
}

.blog-list-title {
  font-family: canela;
  font-size: 2em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0;
}

.blog-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.5em;
}

.blog-list-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.blog-list-pill {
  padding: 0.5em 1.25em;
  background: #f4f1eb;
  color: #2f2e2d;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.blog-list-pill:hover,
.blog-list-pill:focus {
  background: #e9e5de;
}

.blog-list-pill.is-active {
  background: #2f2e2d;
  color: #fff;
}

/* Cards grid --------------------------------------------------- */
.blog-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75em 1.25em;
  transition: opacity 0.2s ease;
}

.blog-list.is-loading .blog-list-grid {
  opacity: 0.4;
  pointer-events: none;
}

.blog-list-more {
  text-align: center;
  margin-top: 2em;
}

.blog-list-more-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.75em;
  background: #fff;
  color: #2f2e2d;
  border: 1px solid #edeae4;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.blog-list-more-button:hover,
.blog-list-more-button:focus {
  background: #f4f1eb;
}

/* Video banner ------------------------------------------------- */
.blog-list-video {
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75em;
  margin: 3em 0;
  padding: 2em 1.5em;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

.blog-list-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.blog-list-video>* {
  position: relative;
}

.blog-list-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  backdrop-filter: blur(4px);
}

.blog-list-video-play:hover,
.blog-list-video-play:focus {
  background: #f47b20;
  border-color: #f47b20;
}

.blog-list-video-title {
  font-family: canela;
  font-size: 2em;
  font-weight: 400;
  color: #fff;
  margin: 0;
}

.blog-list-video-text {
  max-width: 480px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

/* Promo cards -------------------------------------------------- */
.blog-list-promos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25em;
  margin: 3em 0;
}

.blog-list-promo {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  background-color: #f4f1eb;
  overflow: hidden;
}

.blog-list-promo-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: calc(100% - 2em);
  margin: 1em;
  padding: 1em 1.25em;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.blog-list-promo-title {
  font-family: var(--padra-body-font);
  font-size: 1.125em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.35em;
}

.blog-list-promo-text {
  font-size: 0.875em;
  color: #4d4c4b;
  line-height: 1.5;
  margin: 0;
}

.blog-list-promo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f47b20;
  color: #fff;
}

.blog-list-promo-link:hover,
.blog-list-promo-link:focus {
  background: #2f2e2d;
  color: #fff;
}

/* Favorite topics ---------------------------------------------- */
.blog-list-topics {
  margin: 3em 0 0;
}

.blog-list-topics-heading {
  font-family: canela;
  font-size: 1.75em;
  font-weight: 400;
  text-align: center;
  color: #2f2e2d;
  max-width: 480px;
  margin: 0 auto 1.5em;
}

.blog-list-topics-columns {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.blog-list-topics-title {
  font-family: var(--padra-body-font);
  font-size: 1.125em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 1em;
}

.blog-list-topic-card {
  display: flex;
  gap: 1.25em;
  text-decoration: none;
  margin-bottom: 1.5em;
}

.blog-list-topic-card img {
  width: 40%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.blog-list-topic-card-excerpt {
  display: block;
  font-size: 0.875em;
  color: #4d4c4b;
  line-height: 1.6;
  margin-top: 0.5em;
}

.blog-list-topic-card:hover .blog-archive-card-title,
.blog-list-topic-card:focus .blog-archive-card-title {
  color: #f47b20;
}

.blog-list-topics-side {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.blog-list-topics-right {
  border: 1px solid #edeae4;
  border-radius: 16px;
  padding: 1.25em;
}

.blog-list-topic-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  text-decoration: none;
  margin-bottom: 1em;
}

.blog-list-topic-row:last-child {
  margin-bottom: 0;
}

.blog-list-topic-row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.blog-list-topic-row:hover .blog-archive-card-title,
.blog-list-topic-row:focus .blog-archive-card-title {
  color: #f47b20;
}

/* Newsletter box ----------------------------------------------- */
.blog-list-newsletter {
  background: #f4f1eb;
  border-radius: 16px;
  padding: 1.5em;
}

.blog-list-newsletter-title {
  font-family: var(--padra-body-font);
  font-size: 1.125em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.5em;
}

.blog-list-newsletter-text {
  font-size: 0.875em;
  color: #4d4c4b;
  line-height: 1.6;
  margin: 0 0 1em;
}

.blog-list-newsletter-form input {
  width: 100%;
  padding: 0.8em 1.25em;
  background: #fff;
  border: 1px solid #edeae4;
  border-radius: 999px;
  margin-bottom: 0.75em;
  outline: none;
}

.blog-list-newsletter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.8em 1.25em;
  background: #2f2e2d;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.blog-list-newsletter-button:hover,
.blog-list-newsletter-button:focus {
  background: #f47b20;
}

/* Desktop ------------------------------------------------------ */
@media screen and (min-width: 40em) {
  .blog-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 64em) {
  .blog-list-main {
    padding: 2em 3em 4em;
  }

  .blog-list-hero-slide {
    min-height: 420px;
  }

  .blog-list-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .blog-list-promos {
    grid-template-columns: 1fr 1fr;
  }

  .blog-list-topics-columns {
    flex-direction: row;
    align-items: flex-start;
  }

  .blog-list-topics-left {
    flex: 1.4;
    min-width: 0;
  }

  .blog-list-topics-side {
    flex: 1;
    min-width: 0;
  }
}

/*--------------------------------------------------------------
# FAQ Page
--------------------------------------------------------------*/
.faq-page-main {
  background: #fff;
  padding: 1.5em 1em 3em;
}

.faq-page {
  max-width: 760px;
  margin: 0 auto;
}

.faq-page-header {
  text-align: center;
  margin-bottom: 2em;
}

.faq-page-breadcrumb {
  justify-content: center;
}

.faq-page-title {
  font-family: canela;
  font-size: 2.25em;
  font-weight: 400;
  color: #2f2e2d;
  margin: 0 0 0.75em;
}

.faq-page-search {
  max-width: 420px;
}

/* Filter pills ------------------------------------------------- */
.faq-page-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  margin-bottom: 2em;
}

.faq-page-filter {
  min-width: 120px;
  padding: 0.65em 1.75em;
  background: #fff;
  color: #2f2e2d;
  border: 1px dashed #d8d4cd;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.faq-page-filter:hover,
.faq-page-filter:focus {
  border-color: #2f2e2d;
}

.faq-page-filter.is-active {
  background: #4d4c4b;
  color: #fff;
  border: 1px solid #4d4c4b;
}

/* Accordion ---------------------------------------------------- */
.faq-page-item {
  background: #fff;
  border: 1px solid #edeae4;
  border-radius: 14px;
  margin-bottom: 1em;
  transition: background 0.2s ease;
}

.faq-page-item[open] {
  background: #f7f4ee;
  border-color: #f7f4ee;
}

.faq-page-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.25em 1.5em;
  color: #2f2e2d;
  cursor: pointer;
  list-style: none;
}

.faq-page-question::-webkit-details-marker {
  display: none;
}

/* Plus / minus toggle */
.faq-page-toggle {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.faq-page-toggle::before,
.faq-page-toggle::after {
  content: "";
  position: absolute;
  background: #2f2e2d;
}

.faq-page-toggle::before {
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
}

.faq-page-toggle::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
}

.faq-page-item[open] .faq-page-toggle::after {
  display: none;
}

.faq-page-answer {
  padding: 0 3em 1.5em 1.5em;
  color: #4d4c4b;
  line-height: 1.7;
}

.faq-page-answer>*:first-child {
  margin-top: 0;
}

.faq-page-answer>*:last-child {
  margin-bottom: 0;
}

html[dir="rtl"] .faq-page-answer {
  padding: 0 1.5em 1.5em 3em;
}

.faq-page-empty {
  text-align: center;
  color: #4d4c4b;
  margin: 2em 0 0;
}

/* Contact Page ------------------------------------------------- */
.contact-main {
  background: #fff;
}

/* Hero */
.contact-hero {
  position: relative;
  background-color: #2f2e2d;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 3.5em 1.25em 6em;
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(30, 28, 26, 0.35),
      rgba(30, 28, 26, 0.15));
  background: linear-gradient(to bottom,
      rgba(30, 28, 26, 0.35),
      rgba(30, 28, 26, 0.15));
}

.contact-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.contact-hero-breadcrumb {
  color: rgba(255, 255, 255, 0.75);
}

.contact-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
}

.contact-hero-breadcrumb a:hover,
.contact-hero-breadcrumb a:focus {
  color: #fff;
}

.contact-hero-title {
  font-family: canela;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.2;
  max-width: 12em;
  margin: 0 0 0.5em;
}

.contact-hero-text {
  max-width: 34em;
  font-size: 0.9375em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Branches section */
.contact-branches {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1360px;
  margin: -4.5em auto 0;
  padding: 4.5em 3.5em 5em;
  background: #ffffff;
  border-radius: 48px 48px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.04);
}

.contact-branches-title {
  font-family: canela, serif;
  font-weight: 400;
  font-size: 2.25rem;
  color: #211e1c;
  text-align: center;
  margin: 0 0 0.35em;
}

/* Country Selector */
.contact-flags {
  text-align: center;
  margin-bottom: 3.5em;
}

.contact-flags-label {
  display: block;
  font-size: 0.95rem;
  color: #777573;
  margin-bottom: 1.75em;
}

.contact-flags-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.75em;
}

.contact-flag-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65em;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.contact-flag-btn:hover {
  transform: translateY(-2px);
}

.contact-flag-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 3px;
  background: #ffffff;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  overflow: hidden;
}

.contact-flag-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.contact-flag-letter {
  font-weight: 600;
  font-size: 1.25rem;
  color: #211e1c;
}

.contact-flag-name {
  font-size: 0.95rem;
  color: #555351;
  font-weight: 400;
  transition:
    color 0.2s ease,
    font-weight 0.2s ease;
}

.contact-flag-btn:hover .contact-flag-circle {
  transform: scale(1.06);
}

.contact-flag-btn.is-active .contact-flag-circle {
  border-color: #f47b20;
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.22);
}

.contact-flag-btn.is-active .contact-flag-name {
  color: #1a1918;
  font-weight: 600;
}

.contact-flag-btn:focus-visible .contact-flag-circle {
  outline: 2px solid #f47b20;
  outline-offset: 3px;
}

/* Contact block */
.contact-block {
  scroll-margin-top: 100px;
  transition: opacity 0.3s ease;
}

.contact-block[hidden] {
  display: none;
}

.contact-block.is-active {
  display: block;
}

/* Branch Header (Flag + Heading) */
.contact-block-header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 2em;
}

.contact-block-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.contact-block-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-block-heading {
  font-family: inherit;
  font-weight: 600;
  font-size: 1.5rem;
  color: #211e1c;
  margin: 0;
  line-height: 1.3;
}

/* Main 2-column layout: Info Card (Left) + Map (Right) */
.contact-block-main {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.75em;
  align-items: stretch;
  margin-bottom: 2.25em;
}

/* Info Card */
.contact-info-card {
  background: #f8f7f5;
  border: 1px solid #ebe8e2;
  border-radius: 20px;
  padding: 2.25em 2em;
  display: flex;
  flex-direction: column;
}

.contact-info-title {
  display: none;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.5em;
  height: 100%;
}

.contact-info-col--primary {
  display: flex;
  flex-direction: column;
  gap: 1.15em;
}

.contact-info-col--secondary {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
}

.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  color: #4d4c4b;
  font-size: 0.95rem;
  line-height: 1.55;
}

.contact-info-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15em;
  color: #777573;
}

.contact-info-icon {
  width: 18px;
  height: 18px;
}

.contact-info-row a {
  color: #4d4c4b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info-row a:hover,
.contact-info-row a:focus {
  color: #f47b20;
}

.contact-info-address {
  color: #4d4c4b;
}

.contact-info-group-label {
  display: block;
  font-size: 0.875rem;
  color: #777573;
  margin-bottom: 0.6em;
}

.contact-info-row--hours {
  margin-bottom: 0;
}

.contact-info-hours {
  color: #4d4c4b;
  font-size: 0.95rem;
  line-height: 1.6;
}

.contact-info-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
}

.contact-info-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eae7e1;
  color: #4d4c4b;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.contact-info-social a:hover,
.contact-info-social a:focus {
  background: #f47b20;
  color: #fff;
  transform: translateY(-2px);
}

/* Map Card */
.contact-map {
  position: relative;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #ebe8e2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

.contact-branch-form-section {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: 3rem;
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: 1.5rem;
  background: #fee8dc;
  box-sizing: border-box;
}

.contact-branch-form-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%;
  margin: 0 auto;
}

.contact-branch-form-intro {
  max-width: 22.5rem;
}

.contact-branch-form-title {
  margin: 0 0 1.25rem;
  font-family: "canela", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: #3b3b3d;
}

.contact-branch-form-text {
  margin: 0;
  color: #4d4c4b;
  font-size: 1rem;
  line-height: 1.7;
}

.contact-branch-form-card {
  width: 100%;
  min-width: 0;
  padding: 2.5rem 2rem;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.contact-branch-form {
  padding: 0;
  background: transparent;
  border: 0;
}

@media screen and (max-width: 63.99em) {
  .contact-branch-form-section {
    padding: 2rem 1.25rem;
    margin-top: 2rem;
  }

  .contact-branch-form-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-branch-form-intro {
    max-width: none;
    text-align: center;
  }

  .contact-branch-form-title {
    font-size: 1.85rem;
    margin-bottom: 0.75rem;
  }

  .contact-branch-form-card {
    padding: 1.5rem 1rem;
  }
}

.padra-hubspot-form {
  --hsf-button__background-color: #f47b20;
  --hsf-button__color: #fff;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 0.9em 1.5em;
}

.padra-hubspot-form .hs-form-field {
  margin-bottom: 1em;
}

.padra-hubspot-form .hs-input {
  width: 100%;
  box-sizing: border-box;
}

.padra-hubspot-form .hs-error-msgs {
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.padra-hubspot-form .hs-button {
  border: 0;
  border-radius: 999px;
  background: #f47b20;
  color: #fff;
  padding: 0.9em 1.5em;
  cursor: pointer;
}

.padra-hubspot-form .hs-button:hover,
.padra-hubspot-form .hs-button:focus {
  background: #d96a15;
}

/* Mobile & Tablet Responsiveness */
@media screen and (max-width: 63.99em) {
  .contact-hero {
    padding: 3.5em 1.25em 6em;
  }

  .contact-hero-title {
    font-size: 2.15rem;
  }

  .contact-branches {
    margin-top: -3.5em;
    padding: 3em 1.25em 3.5em;
    border-radius: 32px 32px 0 0;
  }

  .contact-branches-title {
    font-size: 1.85rem;
  }

  .contact-flags-list {
    gap: 1.5em;
  }

  .contact-flag-circle {
    width: 44px;
    height: 44px;
  }

  .contact-flag-name {
    font-size: 0.85rem;
  }

  .contact-block-main {
    grid-template-columns: 1fr;
    gap: 1.25em;
  }

  .contact-info-title {
    display: block;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.2rem;
    color: #211e1c;
    margin: 0 0 1.25em;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 1.25em;
  }

  .contact-info-card {
    padding: 1.75em 1.25em;
    border-radius: 16px;
  }

  .contact-map {
    min-height: 280px;
    border-radius: 16px;
  }

  .contact-map iframe {
    min-height: 280px;
  }
}

/* About Page --------------------------------------------------- */
.about-main {
  background: rgba(248, 246, 242, 1);
  overflow-x: hidden;
}

/* 1. Hero */
.about-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  background-color: #2f2e2d;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 7em 8em 6em;
  overflow: hidden;
}

.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(30, 28, 26, 0.65) 0%,
      rgba(30, 28, 26, 0.2) 60%,
      rgba(30, 28, 26, 0.05) 100%);
  z-index: 0;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.about-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.about-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.about-hero-breadcrumb a:hover,
.about-hero-breadcrumb a:focus {
  color: #fff;
  text-decoration: underline;
}

.about-hero-title {
  font-family: canela, serif;
  font-weight: 400;
  font-size: 3.25em;
  line-height: 1.15;
  max-width: 11em;
  margin: 0;
  color: #fff;
}

@media screen and (max-width: 63.99em) {
  .about-main .about-hero {
    min-height: 520px;
    padding: 40px 24px 0;
    align-items: flex-start;
    background-position: center bottom;
  }

  .about-main .about-hero::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 429px;
    background: linear-gradient(180deg,
        #ffffff 0%,
        #ffffff 32%,
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.62) 68%,
        rgba(255, 255, 255, 0) 100%);
  }

  .about-main .about-hero-inner {
    text-align: center;
  }

  .about-main .about-hero-breadcrumb {
    justify-content: center;
    color: #1a1919;
  }

  .about-main .about-hero-breadcrumb a,
  .about-main .about-hero-breadcrumb span {
    color: #1a1919;
  }

  .about-main .about-hero-title {
    max-width: 350px;
    margin: 0 auto;
    color: #1a1919;
    font-size: 36px;
    line-height: 1.1;
  }
}

/* 2. Destination */
.about-destination {
  position: relative;
  z-index: 2;
  margin: -48px auto 0;
  padding: 4em 8em 3em;
  background-color: #fff;
  border-radius: 48px 48px 0 0;
}

.about-destination-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.about-destination-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: start;
  margin-bottom: 2em;
}

.about-destination-headings {
  display: flex;
  flex-direction: column;
}

.about-destination-label {
  display: block;
  margin: 0 0 0.75em;
  font-size: 0.875em;
  line-height: 1.4;
  color: #8b8885;
  text-transform: capitalize;
}

.about-destination-title {
  font-family: canela, serif;
  font-size: 2.85em;
  font-weight: 400;
  line-height: 1.2;
  color: #1a1919;
  margin: 0;
}

.about-destination-text {
  margin: 0;
  color: #4d4c4b;
  line-height: 1.7;
  font-size: 15px;
}

.about-destination-text p {
  margin: 0 0 1.25em;
}

.about-destination-text p:last-child {
  margin-bottom: 0;
}

.about-slider {
  position: relative;
  margin-top: 2.5em;
  border-radius: 20px;
  overflow: hidden;
}

.about-slider-viewport {
  overflow: hidden;
  border-radius: 20px;
}

.about-slider-track {
  display: flex;
  transition: transform 0.45s ease;
}

.about-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.about-slide img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 20px;
}

.about-slider-nav {
  position: absolute;
  right: 1.5em;
  bottom: 1.5em;
  display: flex;
  gap: 0.5em;
  z-index: 5;
}

.about-slider-prev,
.about-slider-next {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: #1a1919;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}

.about-slider-prev:hover,
.about-slider-next:hover {
  background: #fff;
  transform: scale(1.05);
}

.about-slider-pagination {
  position: absolute;
  left: 1.5em;
  bottom: 1.5em;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

.about-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.about-slider-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media screen and (max-width: 63.99em) {
  .about-destination {
    margin-top: 0;
    padding: 2.5em 1.25em 2em;
    border-radius: 32px 32px 0 0;
  }

  .about-destination-head {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    margin-bottom: 1.5em;
  }

  .about-destination-title {
    font-size: 2.25em;
  }

  .about-slide img {
    height: 360px;
  }

  .about-slider-pagination {
    left: 0;
    right: 0;
    bottom: 16px;
    justify-content: center;
  }
}

/* 3. Available Treatment Locations */
.about-locations {
  margin: 0 auto;
  padding: 3em 8em 6em;
  background-color: #fff;
  border-radius: 0 0 56px 56px;
}

.about-locations-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.about-locations-title {
  font-family: canela, serif;
  font-weight: 400;
  font-size: 2.75em;
  color: #1a1919;
  text-align: left;
  margin: 0 0 1.2em;
}

.about-locations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.about-location-card {
  display: flex;
  flex-direction: column;
  background: #f2f3f3;
  border-radius: 20px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  min-height: 100%;
  box-sizing: border-box;
}

.about-location-card:hover,
.about-location-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.about-location-image {
  width: 100%;
  aspect-ratio: 16 / 13;
  min-height: 190px;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  background-color: #ded9d1;
  flex-shrink: 0;
}

.about-location-body {
  padding: 18px 8px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.about-location-name {
  font-family: canela, serif;
  font-weight: 400;
  font-size: 1.65em;
  line-height: 1.2;
  color: #1a1919;
  margin: 0 0 8px;
}

.about-location-text {
  font-family: var(--padra-font-body, var(--padra-body-font, sans-serif));
  font-size: 13.5px;
  line-height: 1.6;
  color: #73716e;
  margin: 0;
}

@media screen and (max-width: 63.99em) {
  .about-locations {
    padding: 2em 1.25em 4em;
    border-radius: 0 0 32px 32px;
  }

  .about-locations-title {
    font-size: 2.25em;
    text-align: center;
    margin-bottom: 1.2em;
  }

  .about-locations-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-location-card {
    display: grid !important;
    grid-template-columns: 38% 62% !important;
    padding: 8px;
    gap: 12px;
    align-items: stretch;
    min-height: 160px;
    border-radius: 16px;
  }

  .about-location-image {
    aspect-ratio: auto;
    height: 100% !important;
    min-height: 140px;
    border-radius: 12px;
  }

  .about-location-body {
    padding: 8px 8px 8px 0;
    justify-content: center;
  }

  .about-location-name {
    font-size: 1.4em;
    margin-bottom: 6px;
  }

  .about-location-text {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* 4. Milestones Timeline */
.about-timeline {
  margin: 0 auto;
  padding: 6em 6em;
  overflow: hidden;
}

.about-timeline-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.about-timeline-viewport {
  width: 100%;
  overflow: hidden;
}

.about-timeline-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 480px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.4s ease;
}

.about-timeline-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed #b8b5b0;
  z-index: 1;
}

.about-timeline-item {
  position: relative;
  height: 100%;
  padding: 0 1.25em;
  box-sizing: border-box;
}

.about-timeline-dot {
  position: absolute;
  left: 1.25em;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #c6aa76;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.about-timeline-content {
  position: absolute;
  width: 220px;
  max-width: calc(100% - 1.5em);
  left: 1.25em;
}

.timeline-top .about-timeline-content {
  bottom: calc(50% + 28px);
}

.timeline-bottom .about-timeline-content {
  top: calc(50% + 28px);
}

.about-timeline-year {
  display: block;
  font-family: canela, serif;
  font-size: 3em;
  font-weight: 300;
  line-height: 1;
  color: #807e7d;
  margin-bottom: 0.35em;
}

.about-timeline-title {
  font-family: canela, serif;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.2;
  color: #1a1919;
  margin: 0 0 0.5em;
}

.about-timeline-text {
  font-family: var(--padra-font-body, var(--padra-body-font, sans-serif));
  font-size: 13px;
  line-height: 1.55;
  color: #807e7d;
  margin: 0;
}

.about-timeline-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 2em;
}

.about-timeline-prev,
.about-timeline-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(26, 25, 25, 0.1);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 63.99em) {
  .about-timeline {
    padding: 3.5em 1.5em;
  }

  .about-timeline-list {
    display: flex;
    flex-direction: column;
    min-height: auto;
    height: auto;
    padding-left: 32px;
    gap: 2.5em;
  }

  .about-timeline-list::before {
    left: 7px;
    right: auto;
    top: 12px;
    bottom: 12px;
    border-top: 0;
    border-left: 1px dashed #b8b5b0;
  }

  .about-timeline-item {
    height: auto;
    padding: 0;
  }

  .about-timeline-dot {
    left: -29px;
    top: 12px;
    transform: none;
  }

  .about-timeline-content,
  .timeline-top .about-timeline-content,
  .timeline-bottom .about-timeline-content {
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
  }

  .about-timeline-year {
    font-size: 2.5em;
    margin-bottom: 0.25em;
  }

  .about-timeline-title {
    font-size: 1.35em;
    margin-bottom: 0.4em;
  }

  .about-timeline-text {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

/* 5. Feature Statement & Floating Tag Pills */
.about-intro {
  padding: 5.5em 2em;
  background-color: #fff;
  border-radius: 56px 56px 0 0;
}

.about-intro-inner {
  position: relative;
  max-width: 1100px;
  min-height: 280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-intro-tags {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.about-intro-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.about-intro-tag img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.about-intro-tag:nth-child(1),
.about-intro-tag--1 {
  top: 10%;
  left: 14%;
  background-color: #f8f6f2;
  color: #1a1919;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.about-intro-tag:nth-child(2),
.about-intro-tag--2 {
  top: 14%;
  right: 20%;
  background-color: #ffab7a;
  color: #1a1919;
}

.about-intro-tag:nth-child(3),
.about-intro-tag--3 {
  bottom: 12%;
  left: 22%;
  background-color: #ffab7a;
  color: #1a1919;
}

.about-intro-tag:nth-child(4),
.about-intro-tag--4 {
  bottom: 10%;
  right: 14%;
  background-color: #f8f6f2;
  color: #1a1919;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.about-intro-text {
  position: relative;
  z-index: 1;
  max-width: 900px;
  font-family: canela, serif;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: #1a1919;
  margin: 0;
}

@media screen and (max-width: 63.99em) {
  .about-intro {
    padding: 3.5em 1.5em;
    border-radius: 32px 32px 0 0;
  }

  .about-intro-inner {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  .about-intro-text {
    order: 1;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 1.5em;
  }

  .about-intro-tags {
    position: static;
    order: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .about-intro-tag {
    position: static;
    font-size: 13px;
    padding: 5px 12px 5px 6px;
  }
}

/* 6. Vision & Mission Cards */
.about-values {
  position: relative;
  margin: 0 auto;
  padding: 5.5em 6em;
  background-color: #faf7f2;
  background-image: url("assets/img/about-us-pattern.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.about-values-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1180px;
  margin: 0 auto;
}

.about-value,
.about-value-card {
  position: relative;
  padding: 0 4em;
}

.about-value:first-child,
.about-value-card:first-child {
  border-right: 1px solid rgba(198, 170, 118, 0.35);
  padding-left: 0;
}

.about-value:last-child,
.about-value-card:last-child {
  padding-right: 0;
}

.about-value-label {
  display: block;
  font-size: 14px;
  color: #8b8885;
  margin-bottom: 1.2em;
}

.about-value-title {
  font-family: canela, serif;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.1;
  color: #1a1919;
  margin: 0 0 1em;
}

.about-value-text {
  font-size: 15px;
  line-height: 1.7;
  color: #4d4c4b;
}

.about-value-text p {
  margin: 0 0 1.2em;
}

.about-value-text p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 63.99em) {
  .about-values {
    padding: 3.5em 1.5em;
    background-image: url("assets/img/about-us-pattern-mobile.svg");
    background-size: cover;
  }

  .about-values-inner {
    grid-template-columns: 1fr;
    gap: 3.5em;
  }

  .about-value,
  .about-value-card {
    padding: 0 !important;
    border: 0 !important;
  }

  .about-values-inner> :first-child {
    order: 2;
  }

  .about-values-inner> :last-child {
    order: 1;
  }

  .about-value-title {
    font-size: 2.25em;
  }
}

/* 7. Experts in Beauty */
.about-experts {
  margin: 0 auto;
  padding: 5.5em 8em;
  background: #fff;
  border-radius: 56px 56px 0 0;
}

.about-experts-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.about-experts-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3em;
  align-items: end;
  margin-bottom: 3.5em;
}

.about-experts-title {
  font-family: canela, serif;
  font-weight: 400;
  font-size: 3em;
  line-height: 1.15;
  color: #1a1919;
  margin: 0;
}

.about-experts-text {
  font-size: 15px;
  line-height: 1.7;
  color: #4d4c4b;
  margin: 0;
}

.about-experts-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.about-experts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.about-expert-card {
  min-width: 0;
}

.about-expert-photo {
  width: 100%;
  aspect-ratio: 1 / 0.95;
  overflow: hidden;
  border-radius: 16px;
  background: #ded9d1;
}

.about-expert-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-expert-name {
  font-family: var(--padra-font-body, var(--padra-body-font, sans-serif));
  font-size: 18px;
  font-weight: 600;
  color: #1a1919;
  margin: 16px 0 4px;
}

.about-expert-role {
  font-size: 14px;
  color: #807e7d;
  margin: 0;
}

.about-experts-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 584px);
  margin: 40px auto 0;
}

.about-experts.is-slider-ready .about-experts-nav {
  display: flex;
}

.about-experts-prev,
.about-experts-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid rgba(26, 25, 25, 0.08);
  border-radius: 50%;
  background: #fff;
  color: #1a1919;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.about-experts-prev:hover,
.about-experts-next:hover {
  border-color: rgba(26, 25, 25, 0.2);
}

.about-experts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  margin: 0 24px;
}

.about-experts-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ccc9c8;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.about-experts-dot.is-active {
  background: #ffab7a;
  transform: scale(1.25);
}

@media screen and (min-width: 64em) {
  .about-experts-grid.about-experts-grid--slider {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    transition: transform 0.55s ease;
    will-change: transform;
  }

  .about-experts-grid--slider .about-expert-card {
    flex: 0 0 288px;
    width: 288px;
  }
}

@media screen and (max-width: 63.99em) {
  .about-experts {
    padding: 3em 1.5em;
    border-radius: 32px 32px 0 0;
    overflow: hidden;
  }

  .about-experts-head {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 2em;
  }

  .about-experts-title {
    font-size: 2.25em;
  }

  .about-experts-grid,
  .about-experts-grid--slider {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    transition: transform 0.5s ease;
    will-change: transform;
    touch-action: pan-y;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .about-experts-grid::-webkit-scrollbar {
    display: none;
  }

  .about-expert-card {
    flex: 0 0 82%;
    width: 82%;
    scroll-snap-align: start;
  }

  .about-expert-photo {
    aspect-ratio: 1 / 0.95;
  }
}

/* Containment */
html,
body {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

#page.site {
  position: relative;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
  transform: none;
  box-sizing: border-box;
}

.about-main,
.about-destination,
.about-slider,
.about-slider-viewport,
.about-experts,
.about-values,
.about-locations {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.about-slider-viewport {
  overflow: hidden;
}

.about-slider-track,
.about-slide {
  min-width: 0;
}

/*--------------------------------------------------------------
# Homepage
--------------------------------------------------------------*/
.home-main {
  background: #fff;
  overflow-x: hidden;
}

.home-main section {
  box-sizing: border-box;
}

/* Shared section pieces ---------------------------------------- */
.home-label {
  margin: 0 0 0.5em;
  color: #4d4c4b;
  font-size: 0.938em;
  font-weight: 500;
}

.home-title {
  margin: 0 0 0.75em;
  color: #2f2e2d;
  font-family: canela;
  font-size: 2.875em;
  font-weight: 400;
  line-height: 1.15;
}

.home-text {
  color: #4d4c4b;
}

.home-text p {
  margin: 0 0 1em;
}

.home-text p:last-child {
  margin-bottom: 0;
}

.home-quote {
  margin: 1.5em 0;
  padding-left: 0.875em;
  border-left: 2px solid #f47b20;
  color: #2f2e2d;
  font-size: 1.063em;
  line-height: 1.5;
  font-size: 18px;
  font-weight: 500;
}

/* Buttons ------------------------------------------------------- */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625em;
  padding: 0.95em 2em;
  border-radius: 999px;
  font-size: 1em;
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.home-btn svg {
  flex-shrink: 0;
}

.home-btn-primary {
  background: #f47b20;
  color: #fff;
}

.home-btn-primary:hover,
.home-btn-primary:focus {
  background: #d96a17;
  color: #fff;
}

.home-btn-outline {
  background: #fff;
  color: #2f2e2d;
  border: 1px solid rgba(128, 126, 125, 1);
}

.home-btn-outline:hover,
.home-btn-outline:focus {
  border-color: #2f2e2d;
  color: #2f2e2d;
}

.home-btn-gold {
  background: #d9b98a;
  color: #2f2e2d;
}

.home-btn-gold:hover,
.home-btn-gold:focus {
  background: #cba875;
  color: #2f2e2d;
}

.home-btn-white {
  background: #fff;
  color: #2f2e2d;
}

.home-btn-white:hover,
.home-btn-white:focus {
  background: #f7f4ee;
  color: #2f2e2d;
}

.home-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -0.75em;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

/* Round nav buttons shared by the sliders */
.home-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 9px 12px;
  background: #ffffff;
  color: #2f2e2d;
  border: 1px solid rgba(26, 25, 25, 0.04);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.home-nav-btn:hover,
.home-nav-btn:focus {
  border-color: #2f2e2d;
}

/* Dots shared by the sliders */
.home-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: #d8d4cd;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.home-dot.is-active {
  background: #f47b20;
}

/* Hero ---------------------------------------------------------- */
.home-hero {
  width: 100%;
  padding: 56px 0 0;
  background: #fff;
}

.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 538fr) minmax(0, 734fr);
  grid-template-areas:
    "dots media"
    "content media"
    "stats stats";
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  width: min(1296px, calc(100% - 48px));
  margin: 0 auto;
}

.home-hero-dots {
  grid-area: dots;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 38px 0 22px;
  padding: 0 40px;
}

.home-hero-content {
  grid-area: content;
  min-width: 0;
  padding: 0 40px 16px;
}

.home-hero-eyebrow {
  margin: 0 0 22px;
  color: #1a1919;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
}

.home-hero-title {
  max-width: 500px;
  margin: 0 0 28px;
  color: #1a1919;
  font-family: var(--padra-font-display);
  font-size: clamp(42px, 3.55vw, 52px);
  font-weight: var(--padra-weight-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.home-hero-text {
  max-width: 470px;
  color: #5f5d5a;
  font-size: 16px;
  line-height: 1.32;
}

.home-hero-text p {
  margin: 0 0 4px;
}

.home-hero-text p:last-child {
  margin-bottom: 0;
}

.home-hero-quote {
  max-width: 470px;
  margin: 36px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 1px solid #ff6815;
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.45;
}

.home-hero-cta {
  width: min(100%, 466px);
  min-height: 54px;
  margin-top: 48px;
}

.home-hero-media {
  grid-area: media;
  min-width: 0;
  align-self: start;
}

.home-hero-slider {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
}

.home-hero-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.home-hero-slide {
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #f3eee7;
}

.home-hero-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 734 / 603;
  overflow: hidden;
  border-radius: inherit;
  background: #f3eee7;
}

.home-hero-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.home-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.home-hero-player {
  --plyr-color-main: #ff6815;
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.home-hero-player[hidden] {
  display: none !important;
}

.home-hero-player .plyr,
.home-hero-player .plyr__video-wrapper,
.home-hero-player .plyr__video-wrapper--fixed-ratio {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding-bottom: 0 !important;
  aspect-ratio: auto !important;
  background: #000;
}

.home-hero-player .home-hero-video,
.home-hero-player video,
.home-hero-player iframe,
.home-hero-player .plyr__video-embed {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  border: 0;
  background: #000;
  object-fit: cover;
}

.home-hero-player .plyr__video-embed iframe {
  position: absolute;
  inset: 0;
}

.home-hero-player .plyr__control--overlaid {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-hero-slide.is-video-active .home-hero-picture {
  visibility: hidden;
}

.home-hero-play {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 5;
  display: flex;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  appearance: none;
}

.home-hero-play-icon {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid currentColor;
}

.home-hero-play:focus-visible {
  outline: 2px solid #ff6815;
  outline-offset: 3px;
}

.home-hero-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: calc(100% + 144px);
  margin: 56px -72px 0;
  padding: 30px 72px 52px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  list-style: none;
}

.home-stat {
  display: flex;
  min-width: 0;
  min-height: 116px;
  padding: 10px 24px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  text-align: center;
}

.home-stat-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  object-fit: contain;
}

.home-stat-title {
  color: #1a1919;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

.home-stat-text {
  color: #6d6965;
  font-size: 15px;
  line-height: 1.35;
}

/* Destination --------------------------------------------------- */
.home-destination {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}

.home-destination-inner {
  display: grid;
  grid-template-columns: minmax(0, 546px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 48px 1em;
  background: #f7f4ee;
  border-radius: 56px;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  .home-destination-inner {
    padding: 48px clamp(48px, 5vw, 72px);
  }
}

@media screen and (min-width: 64em) {
  .home-destination {
    padding: 48px 1em;
    background: #f7f4ee;
    border-radius: 56px;
  }

  .home-destination-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
}

.home-destination-media {
  min-width: 0;
}

.home-destination-media img {
  display: block;
  width: 100%;
  height: 518px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

.home-destination-content {
  min-width: 0;
}

.home-destination .home-label {
  margin: 0 0 12px;
  color: #807e7d;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8em;
}

.home-destination .home-title {
  max-width: 700px;
  margin: 0 0 28px;
  color: #1a1919;
  font-family: canela;
  font-size: clamp(42px, 3.35vw, 52px);
  font-weight: 400;
  line-height: 1.08;
}

.home-destination .home-text {
  max-width: 680px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
}

.home-destination .home-text p {
  margin: 0 0 20px;
}

.home-destination .home-text p:last-child {
  margin-bottom: 0;
}

.home-destination-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.home-point {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 78px;
  padding: 16px 20px;
  background: #fffdfa;
  border-radius: 14px;
}

.home-point-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.home-point-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.home-point-title {
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
}

.home-point-text {
  color: #807e7d;
  font-family: var(--padra-body-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

@media screen and (min-width: 64em) and (max-width: 80em) {
  .home-destination-inner {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 40px;
    padding: 48px;
  }

  .home-destination-media img {
    height: 480px;
  }

  .home-destination .home-title {
    font-size: 42px;
  }

  .home-destination-points {
    gap: 8px;
  }

  .home-point {
    padding: 14px;
  }
}

/* Branches ------------------------------------------------------ */
.home-branches {
  padding: 4.5em 1em;
}

.home-branches-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.home-branch-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

.home-branch-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 81px;
  padding: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #edeae4;
  border-radius: 16px;
  color: #2f2e2d;
  text-decoration: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.home-branch-link:hover,
.home-branch-link:focus-visible,
.home-branch-link.is-active {
  background: linear-gradient(90deg,
      rgba(248, 246, 242, 0.96) 0%,
      rgba(255, 171, 122, 0.82) 100%);
  border-color: transparent;
  box-shadow: 0 8px 28px rgba(255, 171, 122, 0.16);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  outline: none;
}

.home-branch-link:focus-visible {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(244, 123, 32, 0.45),
    0 8px 28px rgba(255, 171, 122, 0.16);
}

.home-branch-flag {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
}

.home-branch-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.home-branch-country {
  color: #1a1919;
  font-size: 1em;
  font-weight: 500;
}

.home-branch-city {
  color: #8b8885;
  font-size: 0.875em;
}

.home-branch-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: #4d4c4b;
  background: transparent;
  border-radius: 50%;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.home-branch-link:hover .home-branch-arrow,
.home-branch-link:focus-visible .home-branch-arrow,
.home-branch-link.is-active .home-branch-arrow {
  color: #fff;
  background: #ff6b0b;
}

.home-branch-link:hover .home-branch-arrow {
  transform: translateX(2px);
}

/* Before & after ------------------------------------------------ */
.home-results {
  padding: 4.5em 1em;
}

.home-results-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.home-results-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: end;
  margin-bottom: 2em;
}

.home-results-text {
  margin: 0;
  color: #4d4c4b;
}

.home-results-slider {
  overflow: hidden;
}

.home-results-track {
  display: flex;
  transition: transform 0.4s ease;
}

.home-results-slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  flex: 0 0 100%;
  min-width: 0;
}

.home-result {
  display: grid;
  gap: 2px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.home-result img {
  display: block;
  width: 100%;
  height: 235px;
  object-fit: cover;
}

.home-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1.5em;
}

.home-results-nav {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.home-results-dots {
  display: flex;
  gap: 0.5em;
}

/* Medical precision --------------------------------------------- */
.home-precision {
  padding: 1em;
}

.home-precision-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 4em 3.5em;
  background: #f5f5f5;
  border-radius: 24px;
}

.home-precision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-precision-card {
  padding: 1.75em;
  background: #ebebeb;
  border-radius: 14px;
}

.home-precision-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 1.5em;
  object-fit: contain;
}

.home-precision-card-title {
  margin: 0 0 0.5em;
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-size: 1.063em;
  font-weight: 400;
}

.home-precision-card-text {
  margin: 0;
  color: #4d4c4b;
  font-size: 0.938em;
  line-height: 1.5;
}

/* Services ------------------------------------------------------ */

.home-services {
  padding: 6.5em 1em;
}

.home-services-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.home-services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
  margin-bottom: 2.5em;
}

.home-services-text {
  color: #4d4c4b;
}

.home-services-text p {
  margin: 0 0 0.5em;
}

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-service-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 32px 24px;
  background: #f8f6f2;
  border-radius: 16px;
  isolation: isolate;
  transition: all 0.4s ease;
}

.home-service-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 0.45s ease,
    transform 0.6s ease;
  z-index: 0;
}

.home-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.home-service-icon,
.home-service-title,
.home-service-text,
.home-service-link {
  position: relative;
  z-index: 2;
}

/* Icon */

.home-service-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 32px;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

/* Title */

.home-service-title {
  max-width: 220px;
  margin: 0 0 24px;
  color: #1a1919;
  font-family: canela;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Description */

.home-service-text {
  max-width: 260px;
  margin: auto 0 24px;
  color: #4d4c4b;
  font-size: 0.938em;
  line-height: 1.45;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Button */

.home-service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  color: #2f2e2d;
  background: #fff;
  border: 1px solid #dfbd83;
  border-radius: 999px;
  text-decoration: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

.home-service-link svg {
  color: #c49a5e;
}

/* Hover */

@media (hover: hover) and (pointer: fine) {
  .home-service-card:hover .home-service-image {
    opacity: 1;
    transform: scale(1);
  }

  .home-service-card:hover::before {
    opacity: 1;
  }

  /* Hide card content on hover */
  .home-service-card:hover .home-service-title,
  .home-service-card:hover .home-service-text {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }

  /* Hide the entire service icon on hover */
  .home-service-card:hover .home-service-icon {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Button hover */
  .home-service-card:hover .home-service-link {
    background: rgba(255, 255, 255, 0.65);
    border-color: #fff;
    backdrop-filter: blur(4px);
  }
}

/* Mobile -------------------------------------------------------- */

@media screen and (max-width: 63.99em) {
  .home-service-card {
    min-height: 370px;
    padding: 32px 24px;
  }

  .home-service-image {
    display: none;
  }

  .home-service-card:hover::before {
    opacity: 0;
  }

  .home-service-card:hover .home-service-title,
  .home-service-card:hover .home-service-text {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .home-service-card:hover .home-service-icon {
    background: transparent;
    padding: 0;
  }

  .home-service-title {
    font-size: 36px;
  }

  .home-service-text {
    margin-top: auto;
  }
}

/* Graft calculator ---------------------------------------------- */
.home-calc {
  padding: 6em 1em;
}

.home-calc-inner {
  display: flex;
  align-items: center;
  max-width: 1440px;
  min-height: 450px;
  margin: 0 auto;
  padding: 1.5em;
  background-color: #ded9d1;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
}

.home-calc-card {
  max-width: 620px;
  padding: 2.5em;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

.home-calc-title {
  margin: 0 0 0.75em;
  color: #2f2e2d;
  font-family: canela;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
}

.home-calc-card .home-btn {
  margin-top: 1.5em;
}

/* Support treatments -------------------------------------------- */
.home-support {
  padding: 1em;
}

.home-support-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 6em 3.5em;
  background: #f5f5f5;
  border-radius: 24px;
}

.home-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
}

.home-support-card {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 1.125em 1.25em;
  background: #fff;
  border-radius: 12px;
}

.home-support-card-title {
  color: #2f2e2d;
  font-size: 1em;
}

.home-support-card-text {
  color: #8b8885;
  font-size: 0.875em;
}

/* Generic media slider (support + beauty) ----------------------- */
.home-media-slider {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.home-media-track {
  display: flex;
  transition: transform 0.4s ease;
}

.home-media-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.home-media-slide img {
  display: block;
  width: 100%;
  height: 490px;
  object-fit: cover;
}

.home-media-nav {
  position: absolute;
  left: 1.25em;
  bottom: 1.25em;
  display: flex;
  gap: 0.5em;
}

/* Beauty & skin -------------------------------------------------- */
.home-beauty {
  padding: 6em 1em;
}

.home-beauty-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}

.home-beauty-content .home-btn {
  margin-top: 1.5em;
}

/* Reviews -------------------------------------------------------- */

.home-reviews {
  width: 100%;

  padding: 0;
}

.home-reviews-inner {
  width: 100%;
  padding: 0px 80px;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  background: #f7f4ee;
  border-radius: 56px;
  overflow: hidden;
  margin-top: 3em;
}

.home-reviews-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 500px;
  margin: auto;
}

.home-reviews-logo {
  width: 170px;

  margin-bottom: 32px;
}

.home-reviews-title {
  margin: 0 0 12px;

  font-family: canela;

  font-size: 52px;

  font-weight: 400;

  line-height: 1.1;

  color: #4d4c4b;
}

.home-reviews-text {
  color: #4d4c4b;
}

/* Desktop */

.home-reviews-slider {
  height: 620px;

  overflow: hidden;
}

.home-reviews-columns {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;

  height: 620px;

  overflow: hidden;
}

.home-reviews-column {
  height: 620px;

  overflow: hidden;
}

.home-review-list {
  display: flex;

  flex-direction: column;

  gap: 24px;

  list-style: none;

  margin: 0;

  padding: 0;
}

.home-reviews-column-left .home-review-list {
  animation: reviews-up 30s linear infinite;
}

.home-reviews-column-right .home-review-list {
  animation: reviews-down 35s linear infinite;
}

.home-reviews-slider:hover .home-review-list {
  animation-play-state: paused;
}

@keyframes reviews-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@keyframes reviews-down {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

.home-review {
  position: relative;
  background: #fff;

  border-radius: 16px;

  padding: 32px;

  min-height: 320px;
}

.home-review.has-review-link {
  cursor: pointer;
}

.home-review-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  border-radius: inherit;
}

.home-review-link:focus {
  outline: none;
}

.home-review.has-review-link:focus-within {
  outline: 2px solid #c6aa76;
  outline-offset: 3px;
}

.home-review-rating {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 24px;
}

.home-stars {
  display: flex;

  gap: 2px;
}

.home-star.is-full {
  color: #d9a441;
}

.home-review-score {
  color: #2f2e2d;
}

.home-review-text {
  color: #4d4c4b;

  line-height: 1.55;
}

.home-review-author {
  display: flex;

  align-items: center;

  gap: 16px;

  margin-top: 24px;
}

.home-review-photo,
.home-review-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
}

.home-review-photo {
  object-fit: contain;
  border: 1px solid #f2efed;
}

.home-review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
}

.home-review-avatar--color-1 {
  background: #c78369;
}

.home-review-avatar--color-2 {
  background: #758f8a;
}

.home-review-avatar--color-3 {
  background: #9a769c;
}

.home-review-avatar--color-4 {
  background: #6f88a4;
}

.home-review-avatar--color-5 {
  background: #b28c56;
}

.home-review-avatar--color-6 {
  background: #7f936d;
}

.home-review-avatar--color-7 {
  background: #ae7180;
}

.home-review-avatar--color-8 {
  background: #6f8196;
}

.home-review-meta {
  display: flex;

  flex-direction: column;
}

.home-review-name {
  color: #2f2e2d;
}

.home-review-role {
  color: #8b8885;

  font-size: 14px;
}

.home-review-controls {
  display: none;
}

/* Mobile */
/* Mobile Reviews */
@media screen and (max-width: 63.99em) {
  .home-reviews-inner {
    display: flex;
    flex-direction: column;
    padding: 40px 16px;
    border-radius: 40px;
  }

  .home-reviews-slider {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .home-reviews-columns {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .home-reviews-column {
    display: none;
  }

  .home-reviews-column-left {
    display: block;
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .home-reviews-column-left::-webkit-scrollbar {
    display: none;
  }

  .home-reviews-column-right {
    display: none;
  }

  .home-reviews-column-left .home-review-list {
    display: flex;
    width: 100%;
    max-width: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none !important;
    animation: none !important;
  }

  .home-reviews-column-left .home-review {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    min-height: 452px;
    padding: 32px 40px;
    direction: ltr;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  html[dir="rtl"] .home-reviews-column-left .home-review {
    direction: rtl;
  }

  .home-review-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
  }

  .home-review-prev,
  .home-review-next {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }

  .home-review-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .home-review-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d4d0ca;
    cursor: pointer;
  }

  .home-review-dot.active {
    background: #ffad7a;
  }

  .home-review-dot:focus-visible,
  .home-review-prev:focus-visible,
  .home-review-next:focus-visible {
    outline: 2px solid #2f2e2d;
    outline-offset: 3px;
  }

  .home-reviews-slider.has-single-review .home-review-controls {
    display: none;
  }
}

/* Awards --------------------------------------------------------- */
.home-awards {
  padding: 4.5em 1em;
}

.home-awards-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.home-awards-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
  margin-bottom: 3em;
}

.home-awards-lead {
  margin: 0 0 1em;
  color: #4d4c4b;
}

.home-awards-text {
  margin: 0;
  color: #4d4c4b;
}

.home-award-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  text-align: center;
}

.home-award-logo {
  width: auto;
  max-width: 100%;
  height: 130px;
  margin-bottom: 1.5em;
  object-fit: contain;
}

.home-award-title {
  color: #2f2e2d;
}

.home-award-year {
  color: #4d4c4b;
  font-size: 0.938em;
}

.home-award-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.home-award-link:hover,
.home-award-link:focus-visible {
  transform: translateY(-4px);
}

.home-award-link:focus-visible {
  outline: 2px solid #b89b5e;
  outline-offset: 4px;
}

.home-award-link .home-award-logo {
  margin-bottom: 1.5em;
  transition: transform 0.25s ease;
}

.home-award-zoom-icon {
  position: absolute;
  bottom: 1.8em;
  right: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: #1a1918;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.home-award-link:hover .home-award-zoom-icon,
.home-award-link:focus-visible .home-award-zoom-icon {
  opacity: 1;
  transform: scale(1);
}

/* Awards Lightbox ------------------------------------------------ */
.home-awards-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.home-awards-lightbox[hidden] {
  display: none;
}

.home-awards-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.home-awards-lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(14, 13, 12, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.home-awards-lightbox-dialog {
  position: relative;
  z-index: 2;
  width: min(820px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #181716;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-awards-lightbox.is-open .home-awards-lightbox-dialog {
  transform: translateY(0) scale(1);
}

.home-awards-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: inline-flex;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.home-awards-lightbox-close:hover,
.home-awards-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}

.home-awards-lightbox-nav {
  position: absolute;
  top: calc(50% - 24px);
  z-index: 10;
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.home-awards-lightbox-nav:hover,
.home-awards-lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.home-awards-lightbox-prev {
  left: 18px;
}

.home-awards-lightbox-next {
  right: 18px;
}

.home-awards-lightbox-slides {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.home-awards-lightbox-item {
  display: none;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 2.75em 2.5em 2em;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.home-awards-lightbox-item.is-active {
  display: flex;
  opacity: 1;
}

.home-awards-lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: min(60vh, 520px);
  margin-bottom: 1.5em;
}

.home-awards-lightbox-img {
  max-width: 100%;
  max-height: min(60vh, 520px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.home-awards-lightbox-caption {
  text-align: center;
  color: #fff;
  max-width: 620px;
}

.home-awards-lightbox-title {
  margin: 0 0 0.35em;
  font-size: 1.25rem;
  font-weight: 600;
  color: #f7f6f4;
  line-height: 1.35;
}

.home-awards-lightbox-year {
  display: inline-block;
  font-size: 0.95rem;
  color: #b89b5e;
  font-weight: 500;
  letter-spacing: 0.5px;
}

body.home-awards-lightbox-open {
  overflow: hidden;
}

/* RTL adjustments */
html[dir="rtl"] .home-awards-lightbox-close {
  right: auto;
  left: 18px;
}

html[dir="rtl"] .home-award-zoom-icon {
  right: auto;
  left: -4px;
}

html[dir="rtl"] .home-awards-lightbox-prev {
  left: auto;
  right: 18px;
  transform: scaleX(-1);
}

html[dir="rtl"] .home-awards-lightbox-prev:hover,
html[dir="rtl"] .home-awards-lightbox-prev:focus-visible {
  transform: scaleX(-1) scale(1.08);
}

html[dir="rtl"] .home-awards-lightbox-next {
  right: auto;
  left: 18px;
  transform: scaleX(-1);
}

html[dir="rtl"] .home-awards-lightbox-next:hover,
html[dir="rtl"] .home-awards-lightbox-next:focus-visible {
  transform: scaleX(-1) scale(1.08);
}

@media screen and (max-width: 48em) {
  .home-awards-lightbox {
    padding: 1em;
  }

  .home-awards-lightbox-dialog {
    width: 100%;
    border-radius: 16px;
  }

  .home-awards-lightbox-item {
    padding: 2.25em 1em 1.25em;
  }

  .home-awards-lightbox-media {
    max-height: 50vh;
  }

  .home-awards-lightbox-img {
    max-height: 50vh;
  }

  .home-awards-lightbox-nav {
    width: 36px;
    height: 36px;
  }

  .home-awards-lightbox-prev {
    left: 8px;
  }

  .home-awards-lightbox-next {
    right: 8px;
  }

  html[dir="rtl"] .home-awards-lightbox-prev {
    right: 8px;
  }

  html[dir="rtl"] .home-awards-lightbox-next {
    left: 8px;
  }
}

/* FAQ ------------------------------------------------------------ */
.home-faq {
  padding: 1em;
}

.home-faq-inner {
  margin: 0 auto;
  padding: 4em 3.5em;
  border-radius: 24px;
  background: #f8f6f2;
}

.home-faq-title {
  margin: 0 0 1em;
  color: #4d4c4b;
  font-family: canela;
  font-size: 2.75em;
  font-weight: 400;
  text-align: center;
}

.home-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  margin-bottom: 2.5em;
}

.home-faq-tab {
  min-width: 160px;
  padding: 0.85em 2em;
  background: #fff;
  color: #2f2e2d;
  border: 1px dashed #d8d4cd;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.home-faq-tab:hover,
.home-faq-tab:focus {
  border-color: #2f2e2d;
}

.home-faq-tab.is-active {
  background: #4d4c4b;
  color: #fff;
  border: 1px solid #4d4c4b;
}

.home-faq-list {
  max-width: 1090px;
  margin: 0 auto;
}

.home-faq-item {
  margin-bottom: 1em;
  background: #fff;
  border: 1px solid #e5e3e1;
  border-radius: 14px;
  transition: border-color 0.2s ease;
  border-radius: 20px;
}

.home-faq-item[open] {
  background: #fffdfa;
  border-color: #d9b98a;
}

.home-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.35em 1.75em;
  color: #2f2e2d;
  cursor: pointer;
  list-style: none;
  border-radius: 20px;
  transition: border-color 0.2s ease;
}

/* Hide the question border when the FAQ is open */
.home-faq-item[open] .home-faq-question {
  border-color: transparent;
}

.home-faq-question::-webkit-details-marker {
  display: none;
}

.home-faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.home-faq-toggle::before,
.home-faq-toggle::after {
  content: "";
  position: absolute;
  background: #2f2e2d;
}

.home-faq-toggle::before {
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
}

.home-faq-toggle::after {
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  transition: transform 0.2s ease;
}

.home-faq-item[open] .home-faq-toggle::after {
  transform: scaleY(0);
}

.home-faq-answer {
  padding: 0 1.75em 1.5em;
  color: #4d4c4b;
  line-height: 1.6;
}

.home-faq-answer p {
  margin: 0 0 0.75em;
}

.home-faq-answer p:last-child {
  margin-bottom: 0;
}

/* Consultation CTA ----------------------------------------------- */

.home-cta {
  padding: 3em 1em;
}

.home-cta-inner {
  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3em;

  align-items: center;

  max-width: 1440px;

  margin: 0 auto;

  padding: 3.5em;

  background:
    linear-gradient(100deg, #fbe3d2 0%, #fcd9c2 100%),
    url("assets/img/cta-pattern.svg");

  background-repeat: no-repeat;

  background-position:
    center,
    left center;

  background-size:
    cover,
    auto 100%;

  border-radius: 32px;

  overflow: hidden;
}

/* Pattern Layer */

.home-cta-inner::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image: url("assets/img/cta-pattern.svg");

  background-repeat: no-repeat;

  background-position: left center;

  background-size: auto 100%;

  opacity: 1;

  pointer-events: none;
}

.home-cta-inner>* {
  position: relative;

  z-index: 1;
}

/* Title */

.home-cta-title {
  margin: 0;

  color: #2f2e2d;

  font-family: canela;

  font-size: 3em;

  font-weight: 400;

  line-height: 1.15;
}

/* Label */

.home-cta-label {
  margin: 0 0 0.35em;

  color: #4d4c4b;
}

/* Description */

.home-cta-text {
  margin: 0 0 1.75em;

  color: #4d4c4b;

  line-height: 1.5;
}

/* Actions */

.home-cta-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 1em;
}

/* Buttons */

.home-cta-actions a {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-height: 56px;

  padding: 0 32px;

  border-radius: 999px;

  text-decoration: none;
}

.home-cta-actions a:first-child {
  background: #ff6b18;

  color: #fff;
}

.home-cta-actions a:last-child {
  background: #fff;

  color: #2f2e2d;
}

/* Mobile --------------------------------------------------------- */

@media screen and (max-width: 63.99em) {
  .home-cta {
    padding: 2em 1em;
  }

  .home-cta-inner {
    grid-template-columns: 1fr;

    gap: 2em;

    padding: 2.5em 1.5em;

    border-radius: 40px;

    background-position:
      center,
      center top;

    background-size:
      cover,
      auto 70%;
  }

  .home-cta-inner::before {
    background-position: center top;

    background-size: auto 70%;
  }

  .home-cta-title {
    font-size: 2.2em;
  }

  .home-cta-actions {
    flex-direction: column;

    width: 100%;
  }

  .home-cta-actions a {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Homepage — Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 63.99em) {

  .home-hero-inner,
  .home-destination-inner,
  .home-precision-inner,
  .home-support-inner,
  .home-beauty-inner,
  .home-reviews-inner,
  .home-results-header,
  .home-services-header,
  .home-awards-header,
  .home-cta-inner {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  /* Homepage hero follows the mobile Figma order: media, dots, copy, stats. */
  .home-hero {
    padding: 48px 0 56px;
  }

  .home-hero-inner {
    display: flex;
    width: min(720px, calc(100% - 64px));
    margin: 0 auto;
    flex-direction: column;
  }

  .home-hero-media {
    order: 1;
    width: 100%;
  }

  .home-hero-dots {
    order: 2;
    display: flex;
    margin: 24px 0 46px;
    padding: 0;
  }

  .home-hero-content {
    order: 3;
    width: 100%;
    padding: 0;
  }

  .home-hero-eyebrow {
    margin-bottom: 22px;
    font-size: 18px;
  }

  .home-hero-title {
    max-width: none;
    margin-bottom: 28px;
    font-size: 40px;
    line-height: 1.08;
  }

  .home-hero-text {
    max-width: none;
    font-size: 16px;
    line-height: 1.32;
  }

  .home-hero-quote {
    max-width: none;
    margin-top: 32px;
  }

  .home-hero-cta {
    width: 100%;
    max-width: none;
    margin-top: 28px;
  }

  .home-hero-slider,
  .home-hero-slide,
  .home-hero-visual {
    border-radius: 20px;
  }

  .home-hero-visual {
    aspect-ratio: 350 / 371;
  }

  .home-hero-play {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }

  .home-hero-play-icon {
    margin-left: 3px;
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 14px;
  }

  .home-hero-stats {
    order: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 48px 0 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .home-stat {
    min-height: 156px;
    padding: 20px 14px;
    border-radius: 24px;
    background: #f7f4ef;
  }

  .home-stat-icon {
    margin-bottom: 16px;
  }

  .home-title,
  .home-faq-title {
    font-size: 2em;
  }

  .home-cta-title {
    font-size: 2.25em;
  }

  .home-branch-list,
  .home-service-grid,
  .home-award-list {
    grid-template-columns: 1fr 1fr;
  }

  .home-results-slide {
    grid-template-columns: 1fr;
  }

  .home-review-list {
    grid-template-columns: 1fr;
  }

  .home-precision-inner,
  .home-support-inner,
  .home-reviews-inner,
  .home-faq-inner {
    padding: 2.5em 1.5em;
  }

  /* .home-destination-media img,
  .home-media-slide img {
    height: 320px;
  } */
  @media screen and (max-width: 63.99em) {
    .home-destination {
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .home-destination-inner {
      display: flex;
      flex-direction: column;
      gap: 48px;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 56px 32px 88px;
      background: #f7f4ee;
      border-radius: 48px;
    }

    .home-destination-media {
      order: 1;
      width: 100%;
    }

    .home-destination-content {
      order: 2;
      width: 100%;
    }

    .home-destination-media img {
      width: 100%;
      height: auto;
      aspect-ratio: 350 / 304;
      object-fit: cover;
      object-position: center;
      border-radius: 24px;
    }

    .home-destination .home-label {
      margin: 0 0 12px;
      font-size: 18px;
      line-height: 1.8em;
    }

    .home-destination .home-title {
      max-width: 100%;
      margin: 0 0 28px;
      font-size: 40px;
      line-height: 1.08;
    }

    .home-destination .home-text {
      max-width: 100%;
      font-size: 16px;
      line-height: 1.8em;
    }

    .home-destination .home-text p {
      margin: 0 0 20px;
    }

    .home-destination .home-text p:last-child {
      margin-bottom: 0;
    }

    .home-destination-points {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      width: 100%;
      margin: 32px 0 0;
    }

    .home-point {
      width: 100%;
      min-height: 64px;
      padding: 14px 20px;
      gap: 16px;
      border-radius: 14px;
    }

    .home-point-icon {
      width: 26px;
      height: 26px;
      flex-basis: 26px;
    }

    .home-point-body {
      display: block;
      min-width: 0;
    }

    .home-point-title,
    .home-point-text {
      display: inline;
      font-size: 16px;
      line-height: 1.8em;
    }

    .home-point-title::after {
      content: " ";
    }

    .home-point-text {
      color: #2f2e2d;
    }
  }

  .home-beauty-inner {
    display: flex;
    flex-direction: column;
  }

  .home-reviews-marquee {
    max-height: none;
    overflow: visible;
  }
}

@media screen and (max-width: 23.75em) {
  .home-destination-inner {
    padding: 48px 24px 72px;
    border-radius: 40px;
  }

  .home-destination .home-title {
    font-size: 36px;
  }

  .home-point {
    padding-right: 16px;
    padding-left: 16px;
  }

  .home-point-title,
  .home-point-text {
    font-size: 15px;
  }
}

@media screen and (max-width: 40em) {
  .home-hero-inner {
    width: calc(100% - 64px);
  }

  .home-hero-title {
    font-size: 36px;
  }

  .home-hero-player {
    height: 100%;
    aspect-ratio: auto;
  }

  .home-branch-list,
  .home-service-grid,
  .home-award-list,
  .home-precision-grid,
  .home-support-grid {
    grid-template-columns: 1fr;
  }

  .home-hero-cta,
  .home-cta-actions .home-btn {
    width: 100%;
  }

  .home-results-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5em;
  }

  .home-results-nav {
    justify-content: center;
  }

  .home-results-footer .home-btn {
    width: 100%;
  }

  .home-calc-card {
    padding: 1.75em;
  }

  .home-calc-title {
    font-size: 1.75em;
  }

  .home-faq-tab {
    flex: 1 1 auto;
    min-width: 0;
  }

  .home-faq-question,
  .home-faq-answer {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .home-cta-inner {
    padding: 2.5em 1.5em;
  }
}

/*--------------------------------------------------------------
# Service Layouts
--------------------------------------------------------------*/
.service-main {
  background: #fff;
  overflow-x: hidden;
}

.service-main section {
  box-sizing: border-box;
}

/* Shared pieces -------------------------------------------------- */
.service-label {
  margin: 0 0 0.5em;
  color: #4d4c4b;
  font-size: 0.938em;
}

.service-eyebrow {
  margin: 0 0 0.75em;
  color: #4d4c4b;
  font-size: 0.875em;
  letter-spacing: 0.02em;
}

.service-title {
  margin: 0 0 0.75em;
  color: #2f2e2d;
  font-family: canela;
  font-size: 2.75em;
  font-weight: 400;
  line-height: 1.15;
}

.service-text {
  color: #4d4c4b;
  padding-bottom: 1.5em;
}

.service-text p {
  margin: 0 0 1em;
}

.service-text p:last-child {
  margin-bottom: 0;
}

.service-quote {
  margin: 1.5em 0;
  padding-left: 0.875em;
  border-left: 2px solid #f47b20;
  color: #2f2e2d;
  line-height: 1.5;
  font-weight: 500;
  font-size: 18px;
}

.service-bullets {
  margin: 1.25em 0 0;
  padding-left: 1.25em;
  color: #4d4c4b;
}

.service-bullets li {
  margin-bottom: 0.5em;
}

.service-breadcrumb {
  margin-bottom: 1em;
  color: #4d4c4b;
  font-size: 0.875em;
}

/* Buttons -------------------------------------------------------- */
.service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625em;
  padding: 0.95em 2em;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.service-btn svg {
  flex-shrink: 0;
}

.service-btn-primary {
  background: #f47b20;
  color: #fff;
}

.service-btn-primary:hover,
.service-btn-primary:focus {
  background: #d96a17;
  color: #fff;
}

.service-btn-outline {
  background: #fff;
  color: #2f2e2d;
  border: 1px solid #e4e0da;
}

.service-btn-outline:hover,
.service-btn-outline:focus {
  border-color: #2f2e2d;
  color: #2f2e2d;
}

.service-btn-white {
  background: #fff;
  color: #2f2e2d;
}

.service-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.service-btn-ghost:hover,
.service-btn-ghost:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.service-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #fff;
  color: #2f2e2d;
  border: 1px solid #e4e0da;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.service-nav-btn:hover,
.service-nav-btn:focus {
  border-color: #2f2e2d;
}

.service-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: #d8d4cd;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.service-dot.is-active {
  background: #f47b20;
}

/* Hero ----------------------------------------------------------- */
.service-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1em;
}

.service-hero-title {
  margin: 0 0 0.5em;
  color: #1d1d1d;
  font-family: canela;
  font-size: 3.5em;
  font-weight: 400;
  line-height: 1.12;
}

.service-hero-text {
  max-width: 34em;
  color: #4d4c4b;
}

.service-hero-text p {
  margin: 0 0 0.5em;
}

/* Cover hero (Hair Transplant, Beauty) */
.service-hero-cover {
  position: relative;
  min-height: 640px;
  align-items: center;
  background-color: #efece6;
  background-size: cover;
  background-position: center;
}

/*
 * The hero copy sits over the photo, so lay a light scrim across the side
 * it occupies — without it the title and body text are unreadable.
 */
.service-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.85) 38%,
      rgba(255, 255, 255, 0) 72%);
}

.service-hero-cover .service-hero-inner {
  position: relative;
}

.service-hero-cover .service-hero-content {
  max-width: 620px;
  padding: 3em 0;
}

/* Split hero (Hair Loss) */
.service-hero-split {
  padding: 2em 0 0;
}

.service-hero-split .service-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: center;
  background: linear-gradient(120deg, #fdfaf5 0%, #f7f1e7 100%);
  border-radius: 24px;
  padding: 3.5em;
  max-width: 1408px;
}

.service-hero-split .service-hero-media img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  border-radius: 20px;
}

/* Hero review badge */
.service-rating {
  display: inline-flex;
  align-items: center;
  gap: 1.25em;
  margin-top: 2em;
  padding: 1.25em 2em;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.service-rating-logo {
  width: 108px;
  height: auto;
}

.service-rating-score {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  color: #2f2e2d;
  font-family: canela;
  font-size: 2em;
  line-height: 1;
}

.service-rating-score svg {
  color: #c49a5e;
}

.service-rating-star-label {
  font-size: 0.75em;
}

.service-rating-text {
  margin: 0.35em 0 0;
  color: #4d4c4b;
  font-size: 0.875em;
}

/* Lead form ------------------------------------------------------ */

.service-lead {
  padding: 1em;

  position: relative;
}

.service-lead-inner {
  max-width: 1440px;

  margin: 0 auto;
}

.service-lead-card .service-lead-inner {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 3em;

  min-height: 385px;

  background: #f7f4ee;

  border-radius: 40px;

  overflow: hidden;
}

/* Hair Loss HubSpot Pattern */

.service-main-hairloss .service-lead-card .service-lead-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 947px;
  height: 385px;
  background-image: url("assets/img/hubspot-form-pattern.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: 1;
  pointer-events: none;
}

/* White Form Container */

.service-lead-form {
  position: relative;

  z-index: 2;

  width: 930px;

  padding: 2.25em;

  background: #fff;

  border-radius: 24px;
}

.service-lead-form--hubspot {
  display: block;
}

/* HubSpot Container */

.service-main-hairloss .service-hubspot-form {
  position: relative;

  z-index: 2;

  width: 100%;
}

/* HubSpot Generated Form */

.service-main-hairloss .service-hubspot-form form {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1em;

  margin: 0;
}

/* Fields */

.service-main-hairloss .service-hubspot-form .hs-form-field {
  margin-bottom: 0;
}

.service-main-hairloss .service-hubspot-form input,
.service-main-hairloss .service-hubspot-form select {
  width: 100%;

  height: 48px;

  padding: 0 1.25em;

  background: #fff;

  color: #2f2e2d;

  border: 1px solid #ded6c8;

  border-radius: 999px;

  box-sizing: border-box;

  font-size: 15px;
}

.service-main-hairloss .service-hubspot-form label {
  display: none;
}

/* Select Arrow */

.service-main-hairloss .service-hubspot-form select {
  appearance: none;
}

.service-select-wrap {
  position: relative;

  display: block;
}

.service-select-wrap::after {
  content: "";

  position: absolute;

  top: 50%;

  right: 1.25em;

  width: 8px;

  height: 8px;

  margin-top: -6px;

  border-right: 1.5px solid #4d4c4b;

  border-bottom: 1.5px solid #4d4c4b;

  transform: rotate(45deg);

  pointer-events: none;
}

/* Submit Button */

.service-main-hairloss .service-hubspot-form .hs_submit {
  grid-column: 1 / -1;
}

.service-main-hairloss .service-hubspot-form input[type="submit"],
.service-main-hairloss .service-hubspot-form button {
  height: 48px;

  padding: 0 36px;

  border-radius: 999px;

  background: #ff6b1a;

  border: none;

  color: #fff;

  font-size: 15px;

  cursor: pointer;

  width: fit-content;
}

/* Hero Existing Form Compatibility */

.service-hero .service-lead-form {
  max-width: 580px;

  margin-top: 2em;

  background: rgba(247, 244, 238, 0.92);

  backdrop-filter: blur(8px);
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 63.99em) {
  .service-lead {
    padding: 16px;
  }

  .service-lead-card .service-lead-inner {
    min-height: 430px;

    padding: 24px;

    border-radius: 24px;
  }

  .service-main-hairloss .service-lead-card .service-lead-inner::before {
    width: 100%;

    height: 100%;

    background-position: left top;
  }

  .service-lead-form {
    width: 100%;

    padding: 24px;

    border-radius: 20px;
  }

  .service-main-hairloss .service-hubspot-form form {
    grid-template-columns: 1fr;
  }
}

/* At a Glance spec cards ----------------------------------------- */
.service-specs {
  padding: 4em 1em;
}

.service-specs-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.service-specs-title {
  text-align: center;
  margin-bottom: 1.5em;
}

.service-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-spec {
  display: flex;
  align-items: center;
  gap: 0.875em;
  padding: 1.25em 1.5em;
  background: #f5f2ec;
  border-radius: 14px;
}

.service-spec-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
}

.service-spec-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.service-spec-label {
  color: #8b8885;
  font-size: 0.813em;
}

.service-spec-value {
  color: #2f2e2d;
  font-size: 1.063em;
}

/* Knowledge tabs -------------------------------------------------- */
.service-knowledge {
  padding: 4em 1em;
}

.service-knowledge-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.service-knowledge-heading {
  text-align: center;
  margin-bottom: 1em;
}

.service-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  margin-bottom: 2.5em;
}

.service-tab {
  padding: 0.8em 1.75em;
  background: #f5f2ec;
  color: #2f2e2d;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.service-tab:hover,
.service-tab:focus {
  border-color: #d9b98a;
}

.service-tab.is-active {
  background: #fffdfa;
  border-color: #c49a5e;
}

.service-knowledge-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5em;
  align-items: start;
}

/* `display: grid` would otherwise defeat the hidden attribute. */
.service-knowledge-panel[hidden] {
  display: none;
}

.service-knowledge-media img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 18px;
}

.service-knowledge-title {
  margin: 0 0 0.75em;
  color: #2f2e2d;
  font-family: canela;
  font-size: 2em;
  font-weight: 400;
}

.service-knowledge-list-title {
  margin: 1.5em 0 1em;
  color: #2f2e2d;
}

.service-knowledge-list {
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
}

.service-knowledge-list li {
  margin-bottom: 1.125em;
}

.service-knowledge-list-item-title {
  display: block;
  color: #2f2e2d;
  font-size: 1.063em;
}

.service-knowledge-list-item-text {
  display: block;
  color: #4d4c4b;
  font-size: 0.938em;
}

/* Why choose ------------------------------------------------------ */
.service-why {
  padding: 1em;
}

.service-why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 4em 3.5em;
  background: #f7f4ee;
  border-radius: 24px;
}

.service-why-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
}

.service-why-stat-value {
  display: block;
  margin-bottom: 0.5em;
  color: #2f2e2d;
  font-size: 2em;
  line-height: 1;
}

.service-why-stat-text {
  display: block;
  color: #4d4c4b;
  font-size: 0.875em;
  line-height: 1.5;
}

section.service-why-section {
  background-color: #f8f6f2;
}

/* Who we are (Hair Loss) ------------------------------------------ */
.service-who {
  padding: 4em 1em;
}

.service-who-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}

.service-who-subtitle {
  margin-top: 1.25em;
  font-size: 2.25em;
}

/* Media slider ---------------------------------------------------- */
.service-media-slider {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.service-media-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
}

.service-media-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  padding-inline: 20px;
}

.service-media-slide img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 18px;
}

/* Mobile --------------------------------------------------------- */
@media screen and (max-width: 47.99em) {
  .service-why-media {
    width: 100%;
    min-width: 0;
  }

  .service-why-media .service-media-slider {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .service-media-slide {
    width: 100%;
    min-width: 100%;
    padding-inline: 18px;
  }

  .service-media-prev,
  .service-media-next {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* Mixed image / Plyr video slides -------------------------------- */
.service-media-video {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
}

.service-media-video .plyr,
.service-media-video .plyr__video-wrapper {
  width: 100%;
  height: 100%;
}

.service-media-video .plyr {
  --plyr-color-main: #ff6815;
  height: 100%;
}

.service-media-video .plyr__video-wrapper {
  height: 100%;
  padding-bottom: 0 !important;
  aspect-ratio: auto;
}

.service-media-video video,
.service-media-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Previous / Next navigation ------------------------------------ */
.service-media-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 20;

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

  height: 0;

  pointer-events: none;

  transform: translateY(-50%);
}

.service-media-prev,
.service-media-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  padding: 0;

  border: 1px solid rgba(26, 25, 25, 0.08);
  border-radius: 50%;

  background: #fff;
  color: #1a1919;

  box-shadow: 0 4px 16px rgba(26, 25, 25, 0.08);

  cursor: pointer;
  pointer-events: auto;

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

.service-media-prev:hover,
.service-media-next:hover,
.service-media-prev:focus-visible,
.service-media-next:focus-visible {
  border-color: rgba(26, 25, 25, 0.16);
  background: #fff;
  box-shadow: 0 6px 20px rgba(26, 25, 25, 0.12);
  outline: none;
}

.service-media-prev:focus-visible,
.service-media-next:focus-visible {
  outline: 2px solid #ff6815;
  outline-offset: 2px;
}

.service-media-prev:active,
.service-media-next:active {
  transform: scale(0.96);
}

.service-media-prev svg,
.service-media-next svg {
  display: block;
  width: 7px;
  height: 15px;
  pointer-events: none;
}

/* Tablet --------------------------------------------------------- */
@media screen and (max-width: 63.99em) {
  .service-media-slide {
    padding-inline: 18px;
  }

  .service-media-prev,
  .service-media-next {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* Mobile --------------------------------------------------------- */
@media screen and (max-width: 47.99em) {
  .service-media-slide {
    padding-inline: 18px;
  }

  .service-media-prev,
  .service-media-next {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* Comparison table ------------------------------------------------ */
.service-compare {
  padding: 1em;
}

.service-compare-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3.5em;
  background: #ebebeb;
  border-radius: 24px;
}

.service-compare-title {
  text-align: center;
  margin-bottom: 1.5em;
}

.service-compare-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: start;
}

.service-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.service-compare-table thead th {
  padding: 1em 1.5em;
  background: #4d4c4b;
  color: #fff;
  font-weight: 400;
  text-align: center;
}

.service-compare-table tbody th,
.service-compare-table tbody td {
  padding: 1.125em 1.5em;
  border-top: 1px solid #edeae4;
  color: #2f2e2d;
  font-weight: 400;
}

.service-compare-table tbody th {
  text-align: center;
  border-right: 1px solid #edeae4;
  white-space: nowrap;
}

.service-compare-benefits-title {
  margin: 0 0 1em;
  color: #2f2e2d;
  font-family: canela;
  font-size: 1.75em;
  font-weight: 400;
}

/* Treatment options / benefit / expertise grids -------------------- */
.service-options,
.service-benefits,
.service-expertise {
  padding: 4em 1em;
}

.service-options-inner,
.service-benefits-inner,
.service-expertise-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 6.5em;
}

.service-options-inner {
  padding: 3.5em;
  background: #f7f4ee;
  border-radius: 24px;
}

.service-options-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
  margin-bottom: 2.5em;
}

.service-option-grid,
.service-benefit-grid,
.service-expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-benefit-grid {
  grid-template-columns: repeat(4, 1fr);
}

.service-option,
.service-benefit,
.service-expertise-item {
  padding: 1.75em;
  background: #fff;
  border-radius: 14px;
}

.service-benefit {
  background: #fffdfa;
}

.service-option-icon,
.service-benefit-icon,
.service-expertise-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 1.25em;
  object-fit: contain;
}

.service-option-title,
.service-benefit-title,
.service-expertise-item-title {
  margin: 0 0 0.5em;
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-size: 1.25em;
  font-weight: 400;
}

.service-option-text,
.service-benefit-text,
.service-expertise-item-text {
  margin: 0;
  color: #4d4c4b;
  font-size: 0.938em;
  line-height: 1.55;
}

.service-benefits-title,
.service-expertise-title,
.service-testimonials-title,
.service-timeline-title,
.service-categories-title {
  text-align: center;
  margin-bottom: 1.5em;
}

/* Beauty Expertise Section Refinement ------------------------------ */

.service-main-beauty .service-expertise {
  padding: 3.5em 1em;
}

.service-main-beauty .service-expertise-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 72px;
}

.service-main-beauty .service-expertise-title {
  margin: 0 0 48px;
  color: #222223;
  font-family: canela;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.service-main-beauty .service-expertise-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-main-beauty .service-expertise-item {
  position: relative;
  display: flex;
  min-height: 168px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: transparent;
  border-radius: 0;
  text-align: center;
}

/* Divider */

.service-main-beauty .service-expertise-item:not(:last-child)::after {
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background: #e0c99d;
  opacity: 0.5;
  content: "";
}

/* Icon */

.service-main-beauty .service-expertise-icon {
  width: 32px;
  height: 32px;
  margin: 0 0 24px;
  object-fit: contain;
}

/* Title */

.service-main-beauty .service-expertise-item-title {
  max-width: 180px;
  margin: 0;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

/* Remove old paragraph spacing */

.service-main-beauty .service-expertise-item-text {
  display: none;
}

/*--------------------------------------------------------------
# Beauty Expertise Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 767px) {
  .service-main-beauty .service-expertise {
    padding: 2.5em 1em;
    background: #ffffff;
  }

  .service-main-beauty .service-expertise-inner {
    padding: 40px 32px;
    border-radius: 40px;
    background: #ffffff;
  }

  .service-main-beauty .service-expertise-title {
    margin-bottom: 40px;
    font-size: 32px;
    line-height: 1.15;
  }

  .service-main-beauty .service-expertise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .service-main-beauty .service-expertise-item {
    min-height: 144px;
    padding: 32px 8px;
    background: #ffffff;
    border-radius: 16px;
  }

  .service-main-beauty .service-expertise-item:not(:last-child)::after {
    display: none;
  }

  .service-main-beauty .service-expertise-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
  }

  .service-main-beauty .service-expertise-item-title {
    max-width: 150px;
    font-size: 16px;
    line-height: 1.8em;
  }
}

/* Testimonials ---------------------------------------------------- */

.service-testimonials {
  --testimonial-card-width: 528px;
  --testimonial-card-height: 320px;
  --testimonial-gap: 36px;

  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 697px;

  padding: 104px 0;

  overflow: hidden;

  background: #fffefc;

  border-radius: 40px;
}

/* Background Pattern --------------------------------------------- */

.service-testimonials::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  background-image: url("assets/img/testimonials-pattern-desktop.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  pointer-events: none;
}

/* Main Inner ------------------------------------------------------ */

.service-testimonials-inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: none;

  margin: 0 auto;
}

/* Header ---------------------------------------------------------- */

.service-testimonials-header {
  position: relative;
  z-index: 2;

  max-width: 660px;

  margin: 0 auto 56px;
  padding: 0 24px;

  text-align: center;
}

.service-testimonials-title {
  margin: 0 0 20px;

  color: #1a1919;

  font-family: canela;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;

  text-align: center;
}

.service-testimonials-description {
  max-width: 650px;

  margin: 0 auto;

  color: #4d4c4b;

  font-size: 16px;
  line-height: 1.8em;

  text-align: center;
}

/* Slider ---------------------------------------------------------- */

.service-testimonial-slider {
  position: relative;

  z-index: 2;

  width: 100%;

  overflow: visible;
}

.service-testimonial-viewport {
  position: relative;

  direction: ltr;

  width: 100%;

  overflow: hidden;

  touch-action: pan-y;
}

.service-testimonial-track {
  display: flex;
  align-items: center;

  gap: var(--testimonial-gap);

  width: max-content;
  min-width: 100%;

  margin: 0;
  padding: 0;

  direction: ltr;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Testimonial Card ------------------------------------------------ */

.service-testimonial {
  position: relative;

  flex: 0 0 var(--testimonial-card-width);

  width: var(--testimonial-card-width);
  height: var(--testimonial-card-height);

  padding: 0;

  overflow: hidden;

  background: #eaeaea;

  border-radius: 16px;

  transform: translateZ(0);

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

/*
 * IMPORTANT:
 * Do not use opacity on the whole card on desktop.
 * Using opacity would allow the background pattern to become visible
 * through the testimonial image.
 */
.service-testimonial::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 5;

  background: rgba(255, 255, 255, 0.55);

  border-radius: inherit;

  opacity: 1;

  pointer-events: none;

  transition: opacity 0.45s ease;
}

.service-testimonial.is-active::after {
  opacity: 0;
}

/* Testimonial Media ---------------------------------------------- */

.service-testimonial-media {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #eaeaea;

  border-radius: inherit;
}

.service-testimonial-cover {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  margin: 0;

  object-fit: cover;
  object-position: center;

  opacity: 1;

  transition: opacity 0.25s ease;
}

/* Play Button ----------------------------------------------------- */

.service-testimonial-play {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 6;

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

  width: 112px;
  height: 112px;

  padding: 0;

  color: #fff;

  background: rgba(255, 255, 255, 0.22);

  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  cursor: pointer;

  transform: translate(-50%, -50%);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.service-testimonial-play svg {
  display: block;

  width: auto;
  height: auto;

  pointer-events: none;
}

.service-testimonial-play:hover,
.service-testimonial-play:focus-visible {
  color: #fff;

  background: rgba(255, 255, 255, 0.32);

  transform: translate(-50%, -50%) scale(1.04);

  outline: none;
}

.service-testimonial:not(.is-active) .service-testimonial-play {
  opacity: 0;

  pointer-events: none;
}

/* Previous / Next Navigation ------------------------------------- */

.service-testimonial-nav {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 10;

  width: calc(var(--testimonial-card-width) + 80px);
  height: 0;

  pointer-events: none;

  transform: translate(-50%, -50%);
}

.service-testimonial-prev,
.service-testimonial-next {
  position: absolute;

  top: 50%;

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

  width: 40px;
  height: 40px;

  padding: 0;

  color: #1a1919;

  background: #fff;

  border: 0;
  border-radius: 50%;

  cursor: pointer;

  pointer-events: auto;

  transform: translateY(-50%);

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

.service-testimonial-prev {
  left: 0;
}

.service-testimonial-next {
  right: 0;
}

.service-testimonial-prev:hover,
.service-testimonial-next:hover,
.service-testimonial-prev:focus-visible,
.service-testimonial-next:focus-visible {
  background: #f8f6f2;

  box-shadow: 0 4px 16px rgba(26, 25, 25, 0.08);

  outline: none;
}

.service-testimonial-prev:active,
.service-testimonial-next:active {
  transform: translateY(-50%) scale(0.96);
}

.service-testimonial-prev svg,
.service-testimonial-next svg {
  display: block;

  pointer-events: none;
}

/* Desktop --------------------------------------------------------- */

@media screen and (min-width: 64em) {
  .service-testimonials {
    --testimonial-card-width: 528px;
    --testimonial-card-height: 400px;
    --testimonial-gap: 36px;

    min-height: 697px;

    padding: 104px 0;

    border-radius: 40px;
  }

  .service-testimonials::before {
    background-image: url("assets/img/testimonials-pattern-desktop.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .service-testimonials-header {
    margin-bottom: 56px;
  }

  .service-testimonials-title {
    font-size: 48px;
  }

  /*
   * Side cards remain completely opaque.
   * Only a white overlay creates the faded Figma appearance.
   */
  .service-testimonial {
    opacity: 1;
    visibility: visible;
  }

  .service-testimonial::after {
    background: rgba(255, 255, 255, 0.55);
  }

  .service-testimonial.is-active::after {
    opacity: 0;
  }

  .service-testimonial.is-active {
    z-index: 2;
  }
}

/* Tablet / Mobile ------------------------------------------------- */

@media screen and (max-width: 63.99em) {
  .service-testimonials {
    --testimonial-card-width: calc(100vw - 64px);
    --testimonial-card-height: auto;
    --testimonial-gap: 16px;

    width: 100%;
    min-height: 495px;

    padding: 56px 0;

    background: #fffefc;

    border-radius: 40px;
  }

  /*
   * Mobile pattern must stay on the pseudo-element,
   * not on .service-testimonials itself.
   */
  .service-testimonials::before {
    background-image: url("assets/img/testimonials-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .service-testimonials-inner {
    width: 100%;
  }

  /* Header */

  .service-testimonials-header {
    max-width: 360px;

    margin: 0 auto 16px;
    padding: 0 24px;
  }

  .service-testimonials-title {
    max-width: 400px;

    margin: 0 auto 22px;

    font-size: 36px;
    line-height: 1.08;
  }

  .service-testimonials-description {
    max-width: 340px;

    margin: 0 auto;

    font-size: 16px;
    line-height: 1.25;
  }

  /* Slider */

  .service-testimonial-slider {
    width: 100%;
  }

  .service-testimonial-viewport {
    width: 100%;

    overflow: hidden;
  }

  /* Card */

  .service-testimonial {
    flex: 0 0 var(--testimonial-card-width);

    width: var(--testimonial-card-width);
    max-width: 350px;
    height: auto;

    aspect-ratio: 350 / 226;

    border-radius: 16px;

    /*
     * Mobile Figma only shows the active testimonial.
     * Pattern therefore cannot appear through adjacent cards.
     */
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      opacity 0.35s ease,
      visibility 0.35s ease;
  }

  .service-testimonial.is-active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
  }

  /*
   * No faded overlay is required on mobile because
   * non-active cards are hidden.
   */
  .service-testimonial::after {
    display: none;
  }

  .service-testimonial-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  /* Play */

  .service-testimonial-play {
    width: 82px;
    height: 82px;
  }

  .service-testimonial-play svg {
    width: 22px;
    height: 28px;
  }

  /* Navigation */

  .service-testimonial-nav {
    top: 50%;

    width: min(calc(100vw - 24px), 390px);
  }

  .service-testimonial-prev,
  .service-testimonial-next {
    width: 40px;
    height: 40px;
  }

  .service-testimonial-prev {
    left: 0;
  }

  .service-testimonial-next {
    right: 0;
  }
}

/* Small Mobile ---------------------------------------------------- */

@media screen and (max-width: 25em) {
  .service-testimonials {
    --testimonial-card-width: calc(100vw - 48px);

    padding-top: 48px;
    padding-bottom: 48px;
  }

  .service-testimonials-header {
    padding: 0 20px;
  }

  .service-testimonials-title {
    font-size: 34px;
  }

  .service-testimonials-description {
    font-size: 15px;
  }

  .service-testimonial {
    max-width: 350px;
  }

  .service-testimonial-nav {
    width: calc(100vw - 16px);
  }
}

/* Testimonial Video Lightbox ------------------------------------- */

html.service-testimonial-lightbox-open,
body.service-testimonial-lightbox-open {
  overflow: hidden;
}

.service-testimonial-lightbox {
  position: fixed;
  inset: 0;

  z-index: 100000;

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

  padding: 32px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  overscroll-behavior: contain;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.service-testimonial-lightbox[hidden] {
  display: none !important;
}

.service-testimonial-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.service-testimonial-lightbox-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(16, 15, 15, 0.82);

  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.service-testimonial-lightbox-dialog {
  position: relative;
  z-index: 1;

  width: min(960px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);

  background: #000;

  border-radius: 20px;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);

  transform: translateY(16px) scale(0.98);

  transition: transform 0.25s ease;
}

.service-testimonial-lightbox.is-open .service-testimonial-lightbox-dialog {
  transform: translateY(0) scale(1);
}

.service-testimonial-lightbox-player {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #000;

  border-radius: inherit;
  aspect-ratio: 16 / 9;
}

.service-testimonial-lightbox-player iframe {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  background: #000;

  border: 0;
}

.service-testimonial-lightbox.is-instagram .service-testimonial-lightbox-dialog {
  width: min(480px, calc(100vw - 32px), 45vh);

  background: #fff;
}

.service-testimonial-lightbox.is-instagram .service-testimonial-lightbox-player {
  background: #fff;

  aspect-ratio: 9 / 16;
}

.service-testimonial-lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;

  z-index: 2;

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

  width: 44px;
  height: 44px;

  padding: 0;

  color: #fff;

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;

  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.service-testimonial-lightbox-close:hover,
.service-testimonial-lightbox-close:focus-visible {
  color: #1a1919;

  background: #fff;

  outline: none;
}

.service-testimonial-lightbox-close:active {
  transform: scale(0.95);
}

@media screen and (max-width: 40em) {
  .service-testimonial-lightbox {
    padding: 16px;
  }

  .service-testimonial-lightbox-dialog {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);

    border-radius: 14px;
  }

  .service-testimonial-lightbox.is-instagram .service-testimonial-lightbox-dialog {
    width: min(calc(100vw - 32px), 45vh);
  }

  .service-testimonial-lightbox-close {
    top: -48px;

    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .service-testimonial-lightbox,
  .service-testimonial-lightbox-dialog {
    transition: none;
  }
}

/* Timeline -------------------------------------------------------- */

.service-timeline {
  position: relative;

  width: 100%;

  padding: 0;

  background: #f8f6f2;

  overflow: hidden;
}

.service-timeline-inner {
  width: 100%;
  max-width: 1440px;

  margin: 0 auto;

  padding: 72px 64px 88px;

  background: #f8f6f2;
}

/* Header ---------------------------------------------------------- */

.service-timeline-header {
  max-width: 760px;

  margin: 0 auto 64px;

  text-align: center;
}

.service-timeline-title {
  margin: 0 0 24px;

  color: #1a1919;

  font-family: canela;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.05;

  text-align: center;
}

.service-timeline-text {
  max-width: 720px;

  margin: 0 auto;

  color: #4d4c4b;

  font-size: 16px;
  line-height: 1.8em;

  text-align: center;
}

/* Main Layout ----------------------------------------------------- */

.service-timeline-stage {
  display: grid;

  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);

  gap: 72px;

  align-items: center;

  width: 100%;

  outline: none;

  touch-action: pan-y;
}

/* Cards ----------------------------------------------------------- */

.service-timeline-cards {
  position: relative;

  min-width: 0;
  height: 540px;
}

.service-timeline-list {
  position: relative;

  width: 100%;
  height: 480px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.service-timeline-step {
  position: absolute;

  left: 0;

  display: flex;
  align-items: center;

  width: 100%;

  margin: 0;

  background: #fff;

  border-radius: 16px;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform: translateY(30px) scale(0.97);

  transition:
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
}

/* Previous card */

.service-timeline-step.is-prev {
  top: 0;

  min-height: 136px;

  padding: 32px 40px;

  opacity: 0.38;
  visibility: visible;

  pointer-events: auto;

  transform: translateY(0) scale(1);
}

/* Active card */

.service-timeline-step.is-active {
  top: 152px;

  min-height: 190px;

  padding: 40px;

  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  z-index: 3;

  transform: translateY(0) scale(1);
}

/* Next card */

.service-timeline-step.is-next {
  top: 358px;

  min-height: 136px;

  padding: 32px 40px;

  opacity: 0.38;
  visibility: visible;

  pointer-events: auto;

  transform: translateY(0) scale(1);
}

/* Timeline Card Content ------------------------------------------ */

.service-timeline-photo {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  margin-right: 20px;

  object-fit: cover;
  object-position: center;

  border-radius: 50%;
}

.service-timeline-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  min-width: 0;

  padding-right: 24px;
}

.service-timeline-step-title {
  display: block;

  margin: 0 0 8px;

  color: #1a1919;

  font-size: 18px;
  line-height: 1.25;
}

.service-timeline-step-text {
  display: block;

  max-width: 410px;

  color: #4d4c4b;

  font-size: 16px;
  line-height: 1.8em;
}

.service-timeline-number {
  flex: 0 0 auto;
  margin-left: auto;
  color: #e2c994;
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
}

.service-timeline-step.is-prev .service-timeline-number,
.service-timeline-step.is-next .service-timeline-number {
  color: rgba(226, 201, 148, 0.9);
}

/* Pagination ------------------------------------------------------ */

.service-timeline-controls {
  display: none;
}

.service-timeline-prev,
.service-timeline-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  padding: 0;

  color: #1a1919;

  background: #fff;

  border: 0;
  border-radius: 50%;

  cursor: pointer;

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

.service-timeline-prev:hover,
.service-timeline-next:hover,
.service-timeline-prev:focus-visible,
.service-timeline-next:focus-visible {
  background: #fff;

  box-shadow: 0 5px 18px rgba(26, 25, 25, 0.08);

  outline: none;
}

.service-timeline-prev:active,
.service-timeline-next:active {
  transform: scale(0.95);
}

/* Circular Timeline ---------------------------------------------- */

.service-timeline-visual {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.service-timeline-circle {
  --timeline-ring-inset: 20px;

  position: relative;

  width: min(100%, 500px);

  aspect-ratio: 1;

  margin: 0 auto;
}

/* Timeline Ring -------------------------------------------------- */

.service-timeline-progress {
  position: absolute;

  inset: var(--timeline-ring-inset);

  z-index: 3;

  display: block;

  width: calc(100% - (var(--timeline-ring-inset) * 2));
  height: calc(100% - (var(--timeline-ring-inset) * 2));

  overflow: visible;

  pointer-events: none;

  /*
   * SVG circles start from 3 o'clock.
   * Rotate once so Stage 01 starts from 12 o'clock.
   */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Dotted base ring ----------------------------------------------- */

.service-timeline-progress-track {
  fill: none;

  stroke: #8b8885;
  stroke-width: 1;

  stroke-dasharray: 2 4;
  stroke-linecap: round;

  vector-effect: non-scaling-stroke;
}

/* Completed timeline line ---------------------------------------- */

.service-timeline-progress-line {
  fill: none;

  stroke: #c6aa76;
  stroke-width: 2;
  stroke-linecap: round;

  /*
   * JS normalizes this circle with pathLength="100".
   * The first value is the completed path and the second
   * value is intentionally larger than the remaining path,
   * preventing the gold segment from repeating.
   */
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;

  opacity: 0;

  vector-effect: non-scaling-stroke;

  transition:
    stroke-dasharray 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

/*
 * SVG is the ONLY ring.
 * Never render another dashed circle using ::before.
 */
.service-timeline-circle::before {
  content: none !important;

  display: none !important;

  position: static !important;

  inset: auto !important;

  width: 0 !important;
  height: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;
}

/* Orbit ----------------------------------------------------------- */

/*
 * IMPORTANT:
 * The orbit itself must NEVER rotate.
 * It is only the coordinate system for positioning the dots.
 */
.service-timeline-orbit {
  position: absolute;

  inset: var(--timeline-ring-inset);

  z-index: 6;

  border-radius: 50%;

  pointer-events: none;

  transform: none !important;
}

/* Orbit Dots ------------------------------------------------------ */

.service-timeline-orbit-dot {
  position: absolute;

  top: 0;
  left: 0;

  width: 16px;
  height: 16px;

  margin: 0;

  background: #dec18a;

  border: 0;
  border-radius: 50%;

  box-shadow: 0 0 0 4px #f8f6f2;

  transform: translate(-50%, -50%);

  transform-origin: center;

  transition:
    width 0.3s ease,
    height 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;

  pointer-events: none;
}

/* Active Dot */

.service-timeline-orbit-dot.is-active {
  width: 18px;
  height: 18px;

  background: #c6aa76;

  box-shadow:
    0 0 0 5px #f8f6f2,
    0 0 0 6px rgba(198, 170, 118, 0.15);
}

/* Main Image ------------------------------------------------------ */

.service-timeline-images {
  position: absolute;

  inset: 56px;

  z-index: 2;

  overflow: hidden;

  background: #eaeaea;

  border-radius: 50%;
}

.service-timeline-main-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  opacity: 0;

  visibility: hidden;

  transform: scale(1.035);

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-timeline-main-image.is-active {
  opacity: 1;

  visibility: visible;

  transform: scale(1);
}

.service-timeline-main-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* Stage Badge ----------------------------------------------------- */

/*
 * Badge position is calculated by JS using the exact coordinates
 * of the active dot.
 */
.service-timeline-badge {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 10;

  display: flex;
  align-items: center;

  min-height: 52px;

  padding: 0 22px 0 0;

  overflow: hidden;

  background: #fff;

  border-radius: 999px;

  box-shadow: 0 4px 16px rgba(26, 25, 25, 0.04);

  opacity: 0;

  pointer-events: none;

  will-change: left, top, transform;

  transition:
    left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

/*
 * Top / bottom positions:
 * center the badge horizontally relative to its active dot.
 */
.service-timeline-badge[data-position="top"],
.service-timeline-badge[data-position="bottom"] {
  transform: translate(-50%, -50%);
}

/* Right side */

.service-timeline-badge[data-position="right"] {
  transform: translate(0, -50%);
}

/* Left side */

.service-timeline-badge[data-position="left"] {
  transform: translate(-100%, -50%);
}

/* Badge Number ---------------------------------------------------- */

.service-timeline-badge-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  color: #fff;
  background: #c6aa76;
  border: 10px solid #f3ead9;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

/* Badge Text ------------------------------------------------------ */

.service-timeline-badge-stage {
  display: block;

  padding-left: 10px;

  color: #4d4c4b;

  font-size: 16px;
  line-height: 1.2;

  white-space: nowrap;
}

/* Desktop --------------------------------------------------------- */

@media screen and (min-width: 64em) {
  .service-timeline-inner {
    min-height: 895px;
  }
}

/* Tablet ---------------------------------------------------------- */

@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .service-timeline-inner {
    padding: 64px 40px 72px;
  }

  .service-timeline-stage {
    grid-template-columns: 1fr 1fr;

    gap: 40px;
  }

  .service-timeline-circle {
    max-width: 400px;
  }
}

/* Mobile ---------------------------------------------------------- */

@media screen and (max-width: 47.99em) {
  .service-timeline {
    background: #f8f6f2;
  }

  .service-timeline-inner {
    width: 100%;

    padding: 40px 32px;
  }

  /* Header */

  .service-timeline-header {
    width: 100%;
    max-width: 350px;

    margin: 0 auto 32px;

    text-align: center;
  }

  .service-timeline-badge {
    display: none !important;
  }

  .service-timeline-title {
    width: 100%;
    max-width: 350px;

    margin: 0 auto 16px;

    color: #1a1919;

    font-family: var(--padra-font-display);
    font-size: 32px;
    font-weight: var(--padra-weight-light);
    line-height: 41.4px;

    text-align: center;
  }

  .service-timeline-text {
    width: 100%;
    max-width: 350px;

    margin: 0 auto;

    color: #333;

    font-family: var(--padra-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 20.4px;

    text-align: center;
  }

  /* Layout */

  .service-timeline-stage {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
  }

  .service-timeline-visual {
    order: 1;

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

    width: 100%;
    min-height: 330px;
  }

  .service-timeline-cards {
    position: relative;

    order: 2;

    width: 100%;
    height: auto;
  }

  /* Circular timeline */

  .service-timeline-circle {
    --timeline-ring-inset: 18px;

    width: min(100%, 350px);
    max-width: 350px;

    aspect-ratio: 1;

    margin: 0 auto;
  }

  .service-timeline-progress {
    inset: var(--timeline-ring-inset);

    width: calc(100% - (var(--timeline-ring-inset) * 2));
    height: calc(100% - (var(--timeline-ring-inset) * 2));
  }

  .service-timeline-orbit {
    inset: var(--timeline-ring-inset);

    transform: none !important;
  }

  .service-timeline-images {
    inset: 43px;
  }

  /* Orbit dots */

  .service-timeline-orbit-dot {
    width: 18px;
    height: 18px;

    background: #ccc9c8;

    box-shadow: 0 0 0 4px #f8f6f2;

    transform: translate(-50%, -50%);
  }

  .service-timeline-orbit-dot.is-active {
    width: 18px;
    height: 18px;

    background: #e0c99d;

    box-shadow:
      0 0 0 5px #f8f6f2,
      0 0 0 6px rgba(198, 170, 118, 0.15);
  }

  /* Timeline badge */

  .service-timeline-badge {
    width: auto;
    max-width: none;
    min-height: 33px;
    height: 33px;

    padding: 0;

    overflow: visible;

    background: rgba(255, 254, 252, 0.9);

    border-radius: 32px;

    box-shadow: none;

    transform: none !important;
  }

  /*
   * On the right side of the orbit the stage label extends
   * toward the center while the number stays over the active dot.
   */
  .service-timeline-badge[data-position="mobile-right"] {
    flex-direction: row-reverse;

    transform: translate(calc(-100% + 24px), -50%) !important;
  }

  /*
   * Mirror the badge when the active dot is on the left side.
   */
  .service-timeline-badge[data-position="mobile-left"] {
    flex-direction: row;

    transform: translate(-24px, -50%) !important;
  }

  .service-timeline-badge-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    color: #f8f6f2;

    background: #c6aa76;

    border: 8px solid rgba(198, 170, 118, 0.15);
    border-radius: 50%;

    font-family: var(--padra-font-display);
    font-size: 16px;
    font-weight: var(--padra-weight-light);
    line-height: 1;
  }

  .service-timeline-badge-stage {
    display: flex;
    align-items: center;

    width: auto;
    min-width: 0;
    max-width: 133px;
    height: 33px;

    padding: 0 12px;

    color: #1a1919;

    font-family: var(--padra-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Cards */

  .service-timeline-list {
    width: 100%;
    height: auto;
  }

  .service-timeline-step,
  .service-timeline-step.is-prev,
  .service-timeline-step.is-next {
    display: none;
  }

  .service-timeline-step.is-active {
    position: relative;

    top: auto;
    left: auto;

    display: flex;

    width: 100%;
    min-height: 246px;

    padding: 0 32px 32px 32px;

    opacity: 1;
    visibility: visible;

    background: #fff;

    border-radius: 16px;

    transform: none;
  }

  .service-timeline-step.is-active .service-timeline-photo {
    position: absolute;

    top: 32px;
    left: 32px;

    width: 52px;
    height: 52px;

    margin: 0;

    object-fit: cover;

    border-radius: 50%;
  }

  .service-timeline-step.is-active .service-timeline-body {
    width: 100%;

    padding: 76px 0 0;
  }

  .service-timeline-step-title {
    margin: 0 0 8px;

    color: #1a1919;

    font-family: var(--padra-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
  }

  .service-timeline-step-text {
    max-width: none;

    color: #4d4c4b;

    font-family: var(--padra-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 20.4px;
  }

  .service-timeline-step.is-active .service-timeline-number {
    position: absolute;

    top: 32px;
    right: 32px;

    margin: 0;

    color: #e0c99d;

    font-family: var(--padra-font-display);
    font-size: 48px;
    font-weight: var(--padra-weight-light);
    line-height: 52px;
  }

  /* Navigation */

  .service-timeline-controls {
    position: absolute;

    top: 50%;
    right: -16px;
    left: -16px;

    z-index: 5;

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

    width: auto;

    margin: 0;

    pointer-events: none;

    transform: translateY(-50%);
  }

  .service-timeline-prev,
  .service-timeline-next {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    padding: 0;

    color: #1a1919;

    background: #c6aa76;

    border: 0;
    border-radius: 50%;

    box-shadow: none;

    pointer-events: auto;
  }

  .service-timeline-prev:disabled,
  .service-timeline-next:disabled {
    color: #1a1919;

    background: #fff;

    box-shadow: none;

    opacity: 1;

    cursor: default;
  }

  .service-timeline-prev:hover,
  .service-timeline-next:hover,
  .service-timeline-prev:focus-visible,
  .service-timeline-next:focus-visible {
    box-shadow: none;
  }
}

/* Small Mobile ---------------------------------------------------- */

@media screen and (max-width: 23.75em) {
  .service-timeline-inner {
    padding-right: 24px;
    padding-left: 24px;
  }

  .service-timeline-title {
    font-size: 32px;
    line-height: 41.4px;
  }

  .service-timeline-visual {
    min-height: 350px;
  }

  .service-timeline-circle {
    max-width: 320px;
  }

  .service-timeline-images {
    inset: 40px;
  }

  .service-timeline-step.is-active {
    min-height: 240px;

    padding: 28px;
  }

  .service-timeline-step.is-active .service-timeline-photo {
    top: 28px;
    left: 28px;
  }

  .service-timeline-step.is-active .service-timeline-body {
    padding-top: 72px;
  }

  .service-timeline-step.is-active .service-timeline-number {
    top: 28px;
    right: 28px;
  }
}

/* Before & after --------------------------------------------------- */
.service-results {
  padding: 4em 1em;
}

.service-results-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.service-results-header {
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: end;
  margin-bottom: 2em;
}

.service-results-text {
  margin: 0;
  color: #4d4c4b;
}

.service-results-slider {
  overflow: hidden;
}

.service-results-track {
  display: flex;
  transition: transform 0.4s ease;
}

.service-results-slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  flex: 0 0 100%;
  min-width: 0;
}

.service-result {
  display: flex;
  gap: 2px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.service-result img {
  display: block;
  width: 100%;
  height: 235px;
  object-fit: cover;
}

.service-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1.5em;
}

.service-results-nav {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.service-results-dots {
  display: flex;
  gap: 0.5em;
}

/* Stat row (Beauty) ------------------------------------------------ */
.service-stats {
  padding: 3em 1em;
}

.service-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.service-stat {
  padding: 0 1.5em;
  text-align: center;
  border-left: 1px solid #e4e0da;
}

.service-stat:first-child {
  border-left: 0;
}

.service-stat-value {
  display: block;
  margin-bottom: 0.35em;
  color: #2f2e2d;
  font-family: canela;
  font-size: 2.25em;
  line-height: 1;
}

.service-stat-label {
  display: block;
  color: #4d4c4b;
  font-family: canela;
  font-size: 1em;
  line-height: 1.4;
}

/* Category cards (Beauty) ------------------------------------------ */
.service-main-beauty .service-categories {
  padding: 1em;
  background: #f8f6f2;
}

.service-main-beauty .service-categories-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 4.75em 4.5em 5em;
  background: #f8f6f2;
  border-radius: 40px;
}

.service-main-beauty .service-categories-title {
  margin: 0 0 1.45em;
  color: #1f1f1f;
  font-family: canela;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.service-main-beauty .service-beauty-categories-slider {
  position: relative;
  overflow: visible;
}

.service-main-beauty .service-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5em;
  margin: 0;
  padding: 0;
}

.service-main-beauty .service-category {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
}

.service-main-beauty .service-beauty-category {
  display: flex;
  flex-direction: column;
  height: auto;
}

.service-main-beauty .service-category-head {
  position: relative;
  min-height: 264px;
  padding: 2em;
  background-color: #f1ece6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.service-main-beauty .service-category-head::before {
  display: none;
}

.service-main-beauty .service-beauty-category-copy {
  position: relative;
  z-index: 1;
  width: 44%;
  max-width: 180px;
}

.service-main-beauty .service-category-title {
  position: static;
  max-width: none;
  margin: 0 0 0.55em;
  color: #222223;
  font-family: canela;
  font-size: 1.35em;
  font-weight: 400;
  line-height: 1.15;
}

.service-main-beauty .service-category-text {
  position: static;
  max-width: none;
  margin: 0;
  color: #62605e;
  font-family: var(--padra-body-font);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3;
}

.service-main-beauty .service-category-list {
  margin: -1px 0 0;
  padding: 1.25em 2em;
  background: #fff;
  border-radius: 16px 16px 0 0;
  list-style: none;
}

.service-main-beauty .service-beauty-category-item {
  margin: 0;
}

.service-main-beauty .service-beauty-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 70px;
  padding: 0.75em 0;
  color: #7b7977;
  border-bottom: 1px solid #dedbd7;
  text-decoration: none;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.service-main-beauty .service-beauty-category-item:last-child .service-beauty-category-link {
  border-bottom: 0;
}

.service-main-beauty a.service-beauty-category-link:hover,
.service-main-beauty a.service-beauty-category-link:focus-visible {
  color: #222223;
}

.service-main-beauty .service-beauty-category-link-content {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1em;
}

.service-main-beauty .service-beauty-category-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.service-main-beauty .service-beauty-category-item-title {
  min-width: 0;
  font-family: var(--padra-body-font);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.8em;
}

.service-main-beauty .service-beauty-category-arrow {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
}

.service-main-beauty .service-beauty-category-arrow svg {
  display: block;
  width: 32px;
  height: 32px;
}

.service-main-beauty .service-beauty-categories-controls {
  display: none;
}

@media screen and (max-width: 63.99em) and (min-width: 40.01em) {
  .service-main-beauty .service-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-main-beauty .service-categories-inner {
    padding: 3em 2em;
  }
}

@media screen and (max-width: 40em) {
  .service-main-beauty .service-categories {
    padding: 0;
  }

  .service-main-beauty .service-categories-inner {
    width: 100%;
    max-width: none;
    padding: 3.4em 2em 3.5em;
    overflow: hidden;
    border-radius: 0 0 40px 40px;
  }

  .service-main-beauty .service-categories-title {
    max-width: 320px;
    margin: 0 auto 1em;
    font-size: 2em;
    line-height: 1.12;
  }

  .service-main-beauty .service-beauty-categories-slider {
    overflow: hidden;
    touch-action: pan-y;
  }

  .service-main-beauty .service-category-grid {
    display: flex;
    width: 100%;
    gap: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .service-main-beauty .service-category {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
  }

  .service-main-beauty .service-category-head {
    min-height: 265px;
    padding: 2em;
    border-radius: 16px 16px 0 0;
    background-position: center center;
  }

  .service-main-beauty .service-beauty-category-copy {
    width: 48%;
    max-width: 170px;
  }

  .service-main-beauty .service-category-title {
    margin-bottom: 0.65em;
    font-size: 1.35em;
  }

  .service-main-beauty .service-category-text {
    font-size: 1em;
    line-height: 1.8em;
  }

  .service-main-beauty .service-category-list {
    padding: 1.15em 0.25em 1.15em;
    border-radius: 16px;
  }

  .service-main-beauty .service-beauty-category-link {
    min-height: 70px;
    padding-right: 1.75em;
    padding-left: 1.75em;
  }

  .service-main-beauty .service-beauty-category-link-content {
    gap: 1em;
  }

  .service-main-beauty .service-beauty-category-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .service-main-beauty .service-beauty-category-item-title {
    font-size: 1em;
  }

  .service-main-beauty .service-beauty-categories-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4em;
    margin-top: 1.5em;
  }

  .service-main-beauty .service-beauty-categories-prev,
  .service-main-beauty .service-beauty-categories-next {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .service-main-beauty .service-beauty-categories-prev svg,
  .service-main-beauty .service-beauty-categories-next svg {
    display: block;
    width: 40px;
    height: 40px;
  }

  .service-main-beauty .service-beauty-categories-pagination {
    display: flex;
    min-width: 64px;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
  }

  .service-main-beauty .service-beauty-categories-pagination .service-dot {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    background: #c9c7c4;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .service-main-beauty .service-beauty-categories-pagination .service-dot.is-active {
    background: #ff956b;
  }
}

/* VIP care --------------------------------------------------------- */
.service-vip {
  padding: 1em;
}

.service-vip-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 4em 3.5em;
  background: #f7f4ee;
  border-radius: 24px;
}

.service-vip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
}

.service-vip-card {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 1.125em 1.375em;
  background: #f0ece4;
  border-radius: 12px;
}

.service-vip-card-title {
  color: #2f2e2d;
}

.service-vip-card-text {
  color: #8b8885;
  font-size: 0.875em;
  line-height: 1.45;
}

.service-vip-media img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 18px;
}

/* FAQ --------------------------------------------------------------- */

.service-faq {
  padding: 1em 1em 4em;
}

.service-faq-inner {
  max-width: 1296px;

  margin: 0 auto;

  padding: 84px;

  border-radius: 40px;
}

.service-faq-title,
.service-faq .service-title {
  margin: 0 0 48px;

  color: #2f2e2d;

  font-family: canela;

  font-size: 52px;

  font-weight: 400;

  text-align: center;
}

.service-faq-list,
.service-faq-items {
  max-width: 1090px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.service-faq-item {
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #e8e2d8;
  border-radius: 20px;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
  padding: 0.5em 1em;
}

.service-faq-item.is-open {
  background: #fffdfa;

  border-color: #d9b98a;
}

/* Question Button */

.service-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 20px 0;
  background: transparent;
  border: 0;
  color: #2f2e2d;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 20px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.service-faq-question-text {
  flex: 1;
}

/* Plus / Minus Icon */

.service-faq-toggle {
  position: relative;

  flex-shrink: 0;

  width: 16px;

  height: 16px;
}

.service-faq-toggle::before,
.service-faq-toggle::after {
  content: "";

  position: absolute;

  background: #2f2e2d;
}

.service-faq-toggle::before {
  width: 16px;

  height: 1.5px;

  left: 0;

  top: 7px;
}

.service-faq-toggle::after {
  width: 1.5px;

  height: 16px;

  left: 7px;

  top: 0;

  transition: transform 0.25s ease;
}

.service-faq-item.is-open .service-faq-toggle::after {
  transform: rotate(90deg);

  opacity: 0;
}

/* Answer */

.service-faq-answer {
  padding: 0 0 32px;
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.6;
}

.service-faq-answer p {
  margin: 0 0 16px;
}

.service-faq-answer p:last-child {
  margin-bottom: 0;
}

.service-faq-answer[hidden] {
  display: none;
}

/* FAQ Tabs */

.service-faq-tabs {
  display: flex;

  gap: 12px;

  max-width: 1090px;

  margin: 0 auto 48px;
}

.service-faq-tab {
  flex: 1;

  height: 54px;

  border-radius: 999px;

  background: transparent;

  border: 1px dashed #cfc6b8;

  color: #2f2e2d;

  font-size: 16px;

  cursor: pointer;
}

.service-faq-tab.is-active {
  background: #5a5a5a;

  border-color: #5a5a5a;

  color: #fff;
}

/* Mobile */

@media screen and (max-width: 63.99em) {
  .service-faq {
    padding: 32px 16px;
  }

  .service-faq-inner {
    padding: 32px 20px;

    border-radius: 28px;
  }

  .service-faq .service-title {
    font-size: 36px;

    margin-bottom: 32px;
  }

  .service-faq-tabs {
    overflow-x: auto;
  }

  .service-faq-tab {
    flex: 0 0 auto;

    padding: 0 32px;
  }

  .service-faq-question {
    padding: 20px;

    font-size: 16px;
  }

  .service-faq-answer {
    padding: 0 20px 24px;

    font-size: 14px;
  }

  .service-faq-toggle {
    padding-inline-start: 1em;
  }
}

/*--------------------------------------------------------------
# Hair Transplant Consultation CTA
# Matches Beauty Closing CTA
--------------------------------------------------------------*/

.service-main-transplant .service-consultation-cta {
  position: relative;
  overflow: hidden;
  max-width: 1296px;
  min-height: 253px;
  margin: 24px auto;
  padding: 56px 72px;
  background-color: #ffdbc7;
  border-radius: 32px;
}

.service-main-transplant .service-consultation-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

/* Background Patterns ------------------------------------------ */

.service-main-transplant .service-consultation-cta::before,
.service-main-transplant .service-consultation-cta::after {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  pointer-events: none;
}

.service-main-transplant .service-consultation-cta::before {
  left: 0;
  width: 46%;
  background-image: url("assets/img/cta-pattern-left.svg");
  background-position: left center;
}

.service-main-transplant .service-consultation-cta::after {
  right: 0;
  width: 46%;
  background-image: url("assets/img/cta-pattern-right.svg");
  background-position: right center;
}

/* Title -------------------------------------------------------- */

.service-main-transplant .service-consultation-cta-main {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.service-main-transplant .service-consultation-cta-title {
  max-width: 520px;
  margin: 0;
  padding: 0;
  color: #1a1919;
  font-family: canela, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Content ------------------------------------------------------ */

.service-main-transplant .service-consultation-cta-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 520px;
}

.service-main-transplant .service-consultation-cta-subtitle {
  margin: 0 0 8px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.service-main-transplant .service-consultation-cta-description {
  max-width: 480px;
  margin: 0 0 24px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

/* Actions ------------------------------------------------------ */

.service-main-transplant .service-consultation-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.service-main-transplant .service-consultation-cta-button {
  display: inline-flex;
  width: 258px;
  height: 54px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-family: var(--padra-body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

/* Hide legacy dynamic icons to match Beauty CTA exactly */

.service-main-transplant .service-consultation-cta-button-icon {
  display: none;
}

/* Primary Button ----------------------------------------------- */

.service-main-transplant .service-consultation-cta-button-primary {
  background: #ff6b1a;
  color: #fff !important;
}

.service-main-transplant .service-consultation-cta-button-primary::after {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 9H14.25M14.25 9L9.75 4.5M14.25 9L9.75 13.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.service-main-transplant .service-consultation-cta-button-primary:hover,
.service-main-transplant .service-consultation-cta-button-primary:focus-visible {
  background: #f25d0d;
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}

/* Secondary Button --------------------------------------------- */

.service-main-transplant .service-consultation-cta-button-secondary {
  background: #fff;
  color: #4d4c4b;
}

.service-main-transplant .service-consultation-cta-button-secondary:hover,
.service-main-transplant .service-consultation-cta-button-secondary:focus-visible {
  background: #fff;
  color: #4d4c4b;
  transform: translateY(-2px);
  outline: none;
}

/* Keep legacy shared CTA hidden on Hair Transplant ------------ */

.service-main-transplant .service-closing-cta {
  display: none;
}

/* Tablet ------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  .service-main-transplant .service-consultation-cta {
    padding: 48px;
  }

  .service-main-transplant .service-consultation-cta-title {
    font-size: 38px;
  }
}

/* Mobile ------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .service-main-transplant .service-consultation-cta {
    min-height: auto;
    margin: 16px 16px;
    padding: 32px;
    background-color: #ffdbc7;
    background-image: url("assets/img/cta-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 32px;
  }

  .service-main-transplant .service-consultation-cta::before,
  .service-main-transplant .service-consultation-cta::after {
    display: none;
  }

  .service-main-transplant .service-consultation-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .service-main-transplant .service-consultation-cta-title {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.15;
  }

  .service-main-transplant .service-consultation-cta-subtitle {
    font-size: 16px;
  }

  .service-main-transplant .service-consultation-cta-description {
    max-width: none;
    margin-bottom: 24px;
    font-size: 15px;
  }

  .service-main-transplant .service-consultation-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .service-main-transplant .service-consultation-cta-button {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Service Layouts — Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 63.99em) {

  .service-hero-split .service-hero-inner,
  .service-knowledge-panel,
  .service-why-inner,
  .service-who-inner,
  .service-compare-layout,
  .service-options-header,
  .service-results-header,
  .service-vip-inner {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  .service-hero-title {
    font-size: 2.25em;
  }

  .service-title,
  .service-faq-title {
    font-size: 2em;
  }

  .service-hero-cover {
    min-height: 0;
    padding: 3em 0;
  }

  .service-spec-grid,
  .service-benefit-grid,
  .service-option-grid,
  .service-expertise-grid,
  .service-stats-inner,
  .service-timeline-list,
  .service-vip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-results-slide {
    grid-template-columns: 1fr;
  }

  .service-why-stats {
    grid-template-columns: 1fr;
    gap: 1.25em;
  }

  .service-hero-split .service-hero-inner,
  .service-why-inner,
  .service-options-inner,
  .service-compare-inner,
  .service-timeline-inner,
  .service-categories-inner,
  .service-vip-inner,
  .service-faq-inner,
  .service-lead-card .service-lead-inner {
    padding: 2.5em 1.5em;
  }

  .service-media-slide img,
  .service-media-video,
  .service-main-hairloss .service-who-slider .service-media-video,
  .service-knowledge-media img,
  .service-vip-media img,
  .service-hero-split .service-hero-media img {
    height: 340px;
  }

  .service-stat {
    padding: 1em;
    border-left: 0;
  }
}

@media screen and (max-width: 40em) {
  .service-hero-title {
    font-size: 2em;
  }

  .service-lead-form-grid {
    grid-template-columns: 1fr;
  }

  .service-lead-form {
    padding: 1.5em;
  }

  .service-spec-grid,
  .service-benefit-grid,
  .service-option-grid,
  .service-expertise-grid,
  .service-category-grid,
  .service-stats-inner,
  .service-timeline-list,
  .service-vip-grid {
    grid-template-columns: 1fr;
  }

  .service-rating {
    width: 100%;
    box-sizing: border-box;
    padding: 1em 1.25em;
  }

  .service-compare-table thead th,
  .service-compare-table tbody th,
  .service-compare-table tbody td {
    padding: 0.85em 1em;
  }

  .service-results-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25em;
  }

  .service-results-nav {
    justify-content: center;
  }

  .service-results-footer .service-btn,
  .service-closing-cta-actions .service-btn {
    width: 100%;
  }

  .service-closing-cta {
    padding: 1.75em 1.5em;
  }

  .service-closing-cta-title {
    font-size: 1.75em;
  }

  .service-faq-question,
  .service-faq-answer {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }
}

/* Editor content (bottom of the service layouts) --------------------- */
.service-content {
  padding: 4em 1em;
}

.service-content-inner {
  max-width: 860px;
  margin: 0 auto;
}

.service-content .entry-content {
  color: #4d4c4b;
  line-height: 1.7;
}

.service-content .entry-content>*:first-child {
  margin-top: 0;
}

.service-content .entry-content>*:last-child {
  margin-bottom: 0;
}

.service-content .entry-content h2,
.service-content .entry-content h3,
.service-content .entry-content h4 {
  margin: 1.75em 0 0.6em;
  color: #2f2e2d;
  font-family: canela;
  font-weight: 400;
  line-height: 1.25;
}

.service-content .entry-content h2 {
  font-size: 2em;
}

.service-content .entry-content h3 {
  font-size: 1.5em;
}

.service-content .entry-content h4 {
  font-size: 1.25em;
}

.service-content .entry-content p {
  margin: 0 0 1.25em;
}

.service-content .entry-content ul,
.service-content .entry-content ol {
  margin: 0 0 1.25em;
  padding-left: 1.25em;
}

.service-content .entry-content li {
  margin-bottom: 0.5em;
}

.service-content .entry-content a {
  color: #2f2e2d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.service-content .entry-content a:hover,
.service-content .entry-content a:focus {
  color: #f47b20;
}

.service-content .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

.service-content .entry-content blockquote {
  margin: 1.75em 0;
  padding: 1.25em 1.5em;
  background: #f7f4ee;
  border-left: 2px solid #f47b20;
  border-radius: 12px;
  color: #2f2e2d;
}

.service-content .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.service-content .entry-content table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
}

.service-content .entry-content th,
.service-content .entry-content td {
  padding: 0.85em 1em;
  border: 1px solid #edeae4;
  text-align: left;
}

.service-content .entry-content th {
  background: #f7f4ee;
  color: #2f2e2d;
  font-weight: 400;
}

.service-content .page-links {
  margin-top: 1.5em;
  color: #4d4c4b;
}

@media screen and (max-width: 40em) {
  .service-content {
    padding: 2.5em 1em;
  }

  .service-content .entry-content h2 {
    font-size: 1.625em;
  }

  .service-content .entry-content h3 {
    font-size: 1.313em;
  }
}

/*--------------------------------------------------------------
# Service SEO Content
--------------------------------------------------------------*/

:is(.service-main-transplant, .service-main-hairloss) .service-seo-content {
  padding: 72px 16px;
  background: #f8f6f2;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-content-inner {
  width: 100%;
  max-width: 1296px;
  margin: 0 auto;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-content-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  width: 100%;
  background: #fff;
  border-radius: 28px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-content-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Table of Contents -------------------------------------------- */

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc {
  position: relative;
  min-width: 0;
  padding: 48px 32px;
  border-right: 1px solid #e7e3dc;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc::after {
  position: absolute;
  top: 76px;
  right: -2px;
  width: 4px;
  height: 52px;
  background: #ff681e;
  border-radius: 999px;
  content: "";
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-sticky {
  position: sticky;
  top: 120px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-title {
  margin: 0 0 24px;
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-list {
  max-height: 520px;
  margin: 0;
  padding: 0 10px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #ff681e transparent;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-list::-webkit-scrollbar {
  width: 3px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-list::-webkit-scrollbar-track {
  background: transparent;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-list::-webkit-scrollbar-thumb {
  background: #ff681e;
  border-radius: 999px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item {
  position: relative;
  margin: 0 0 14px;
  padding-left: 14px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item:last-child {
  margin-bottom: 0;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item::before {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 4px;
  height: 4px;
  background: #2f2e2d;
  border-radius: 50%;
  content: "";
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-level-3 {
  margin-left: 14px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item a {
  display: block;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-decoration: none;
  transition: color 0.2s ease;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item a:hover,
:is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item a:focus {
  color: #ff681e;
}

/* Article ------------------------------------------------------ */

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article {
  min-width: 0;
  padding: 64px 56px 72px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content {
  margin: 0;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content>*:first-child {
  margin-top: 0;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content>*:last-child {
  margin-bottom: 0;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2,
:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h3 {
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-weight: 600;
  letter-spacing: 0;
  scroll-margin-top: 120px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2 {
  margin: 0 0 20px;
  font-size: 27px;
  line-height: 1.25;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2~h2 {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #ff681e;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h3 {
  margin: 32px 0 16px;
  font-size: 21px;
  line-height: 1.3;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h4 {
  margin: 28px 0 14px;
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8em;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content p {
  margin: 0 0 24px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content ul,
:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content li {
  margin: 0 0 10px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content li:last-child {
  margin-bottom: 0;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content a {
  color: #ff681e;
  text-decoration: none;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content a:hover,
:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content a:focus {
  color: #e95712;
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px 0;
  border-radius: 16px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  background: #f8f6f2;
  border-left: 2px solid #ff681e;
  border-radius: 12px;
  color: #2f2e2d;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content blockquote>*:last-child {
  margin-bottom: 0;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content table {
  width: 100%;
  margin: 32px 0;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article .page-links {
  margin-top: 32px;
}

/* Tablet ------------------------------------------------------- */

@media screen and (max-width: 63.99em) {
  :is(.service-main-transplant, .service-main-hairloss) .service-seo-content {
    padding: 48px 24px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-content-layout {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc {
    padding: 32px;
    border-right: 0;
    border-bottom: 1px solid #e7e3dc;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc::after {
    top: auto;
    right: auto;
    bottom: -2px;
    left: 32px;
    width: 52px;
    height: 4px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-sticky {
    position: static;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-list {
    max-height: 280px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article {
    padding: 48px 32px 56px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2,
  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h3 {
    scroll-margin-top: 90px;
  }
}

/* Mobile ------------------------------------------------------- */

@media screen and (max-width: 40em) {
  :is(.service-main-transplant, .service-main-hairloss) .service-seo-content {
    padding: 32px 16px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-content-layout {
    border-radius: 20px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc {
    padding: 24px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc::after {
    left: 24px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-title {
    margin-bottom: 18px;
    font-size: 17px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item {
    margin-bottom: 12px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item a {
    font-size: 14px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article {
    padding: 32px 24px 40px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content {
    font-size: 15px;
    line-height: 1.65;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2 {
    margin-bottom: 18px;
    font-size: 24px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2~h2 {
    margin-top: 36px;
    padding-top: 36px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h3 {
    margin-top: 28px;
    font-size: 20px;
  }
}

/* Contact Gallery Slider --------------------------------------- */

.contact-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 32px;
  overflow: hidden;
  border-radius: 20px;
  outline: none;
}

.contact-slider:focus-visible {
  outline: 2px solid rgba(244, 123, 32, 0.65);
  outline-offset: 4px;
}

.contact-slider-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.contact-slider-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 18px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-slide {
  position: relative;
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
}

.contact-slider[data-count="2"] .contact-slide {
  flex: 0 0 calc((100% - 18px) / 2);
}

.contact-slider[data-count="1"] .contact-slide {
  flex: 0 0 100%;
}

.contact-slide img {
  display: block;
  width: 100%;
  height: 380px;
  margin: 0;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.contact-slider-nav {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-slider-prev,
.contact-slider-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  overflow: hidden;
  color: #211e1c;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.contact-slider-prev:hover,
.contact-slider-next:hover,
.contact-slider-prev:focus-visible,
.contact-slider-next:focus-visible {
  color: #000;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
  outline: none;
}

.contact-slider-prev:active,
.contact-slider-next:active {
  transform: translateY(0) scale(0.95);
}

.contact-slider-prev svg,
.contact-slider-next svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.contact-slider--single .contact-slider-nav {
  display: none;
}

/* Contact Slider - RTL */

html[dir="rtl"] .contact-slider-nav {
  right: 24px;
  left: auto;
}

/* Contact Slider - Tablet (768px - 1023px) */

@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .contact-slider {
    border-radius: 18px;
    margin-top: 28px;
  }

  .contact-slider-viewport {
    border-radius: 18px;
  }

  .contact-slider-track {
    gap: 16px;
  }

  .contact-slide {
    flex: 0 0 calc((100% - 16px) / 2);
    border-radius: 14px;
  }

  .contact-slider[data-count="1"] .contact-slide {
    flex: 0 0 100%;
  }

  .contact-slide img {
    height: 300px;
    border-radius: 14px;
  }

  .contact-slider-nav {
    left: 20px;
    bottom: 20px;
  }

  html[dir="rtl"] .contact-slider-nav {
    right: 20px;
    left: auto;
  }
}

/* Contact Slider - Mobile (< 768px) */

@media screen and (max-width: 47.99em) {
  .contact-slider {
    border-radius: 16px;
    margin-top: 24px;
  }

  .contact-slider-viewport {
    border-radius: 16px;
  }

  .contact-slider-track {
    gap: 12px;
  }

  .contact-slide {
    flex: 0 0 100%;
    border-radius: 14px;
  }

  .contact-slide img {
    width: 100%;
    height: auto;
    min-height: 220px;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
  }

  .contact-slider-nav {
    left: 16px;
    bottom: 16px;
  }

  html[dir="rtl"] .contact-slider-nav {
    right: 16px;
    left: auto;
  }

  .contact-slider-prev,
  .contact-slider-next {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/*--------------------------------------------------------------
# Hair Loss Treatment Page
--------------------------------------------------------------*/

.service-main-hairloss {
  --padra-body-font: var(--padra-font-body);

  background: #fffefc;
  overflow-x: hidden;
}

/*--------------------------------------------------------------
# Hair Loss Hero
--------------------------------------------------------------*/

.service-main-hairloss .service-hero-hairloss {
  width: 100%;
  max-width: none;
  margin: 0 0 48px;
  padding: 0;
}

.service-main-hairloss .service-hero-hairloss .service-hero-inner {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  gap: 0;

  overflow: hidden;

  border-radius: 32px;

  background:
    radial-gradient(
      82% 165% at 100% 50%,
      rgba(215, 202, 174, 0.78) 0%,
      rgba(239, 233, 221, 0.58) 44%,
      rgba(248, 246, 242, 0.38) 67%,
      rgba(255, 255, 255, 0) 100%
    ),
    #fff;
}

.service-main-hairloss .service-hero-hairloss .service-breadcrumb {
  width: 100%;
  color: #4d4c4b;
  font-family: var(--padra-font-body);
  font-weight: 400;
  text-align: left;
}

.service-main-hairloss .service-hero-hairloss .service-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.service-main-hairloss .service-hero-hairloss .service-breadcrumb a:hover,
.service-main-hairloss .service-hero-hairloss .service-breadcrumb a:focus {
  color: #ff6815;
}

.service-main-hairloss .service-hero-hairloss .service-hero-title {
  width: 100%;
  margin: 0;
  color: #1a1919;
  font-family: var(--padra-font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.service-main-hairloss .service-hero-hairloss .service-hero-text {
  width: 100%;
  padding: 0;
  color: #4d4c4b;
  font-family: var(--padra-font-body);
  font-weight: 400;
}

.service-main-hairloss .service-hero-hairloss .service-hero-text p {
  margin: 0 0 12px;
}

.service-main-hairloss .service-hero-hairloss .service-hero-text p:last-child {
  margin-bottom: 0;
}

.service-main-hairloss .service-hero-hairloss .service-hero-media {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.service-main-hairloss .service-hero-hairloss .service-hero-media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: contain;
}

/*--------------------------------------------------------------
# Hair Loss Hero Desktop
--------------------------------------------------------------*/

@media screen and (min-width: 64em) {
  .service-main-hairloss .service-hero-hairloss .service-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    align-items: stretch;
    gap: 0;
    min-height: 476px;
    padding: 3em 12em;
    margin-top: 2em;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 48px 48px 44px clamp(72px, 9.15vw, 132px);
    text-align: left;
  }

  .service-main-hairloss .service-hero-hairloss .service-breadcrumb {
    margin: 0 0 48px;
    font-size: 12px;
    line-height: 1.4;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-title {
    max-width: 560px;
    margin-bottom: 24px;
    font-size: 52px;
    line-height: 1.08;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-text {
    max-width: 520px;
    font-size: 16px;
    line-height: 1.28;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-media {
    display: flex;
    width: 100%;
    height: 476px;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-media img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-position: center right;
  }
}

/*--------------------------------------------------------------
# Hair Loss Hero Tablet / Mobile
#
# Visual order:
# 1. Breadcrumb
# 2. Image
# 3. Title
# 4. Description
--------------------------------------------------------------*/

@media screen and (max-width: 63.99em) {
.service-main-hairloss .service-hero-hairloss {
  width: 100%;
  max-width: none;

  margin: 16px 0 32px;
  padding: 0;
}
  .service-main-hairloss .service-hero-hairloss .service-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 32px 24px 16px;
  }

  /*
   * Flatten only the copy wrapper on tablet/mobile. Desktop keeps the normal
   * wrapper, while the media can be placed between breadcrumb and title here.
   */
  .service-main-hairloss .service-hero-hairloss .service-hero-content {
    display: contents;
  }

  .service-main-hairloss .service-hero-hairloss .service-breadcrumb {
    order: 1;
    width: 100%;
    margin: 0 0 34px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-media {
    position: relative;
    z-index: 1;
    display: flex;
    order: 2;
    width: 100%;
    height: auto;
    margin: 0 0 24px;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-media img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    object-position: center bottom;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-title {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    font-size: clamp(40px, 12vw, 48px);
    line-height: 1.02;
    text-align: left;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-text {
    order: 4;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
  }
}

@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .service-main-hairloss .service-hero-hairloss .service-hero-inner {
    padding: 40px 40px 24px;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-title {
    font-size: 48px;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-text {
    max-width: 620px;
    font-size: 15px;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-media img {
    max-width: 440px;
  }
}

@media screen and (max-width: 30em) {
  .service-main-hairloss .service-hero-hairloss {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-inner {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 32px 24px 16px;

    border-radius: 32px;
  }

  .service-main-hairloss .service-hero-hairloss .service-breadcrumb {
    margin-bottom: 34px;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-title {
    font-size: 48px;
  }

  .service-main-hairloss .service-hero-hairloss .service-hero-media img {
    max-width: 302px;
  }
}

/*--------------------------------------------------------------
# Lead Form
--------------------------------------------------------------*/

.service-main-hairloss .service-lead {
  padding: 48px 21em;
}

.service-main-hairloss .service-lead-card .service-lead-inner {
  background: #f8f6f2;
  border-radius: 40px;
  padding: 48px;
}

.service-main-hairloss .service-lead-form {
  background: #fffefc;
  border-radius: 24px;
  padding: 40px;
}

/*--------------------------------------------------------------
# Who We Are
--------------------------------------------------------------*/

.service-main-hairloss .service-who {
  padding: 68px 72px;
}

.service-main-hairloss .service-who-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.service-main-hairloss .service-who-media {
  align-self: start;
  background: transparent;
  border-radius: 24px;
  overflow: hidden;
}

.service-main-hairloss .service-who-slider .service-media-slide {
  padding-inline: 0;
}

.service-main-hairloss .service-media-slide img {
  height: 520px;
  object-fit: cover;
}

.service-main-hairloss .service-who-slider .service-media-video {
  height: 520px;
}

.service-main-hairloss .service-who-content {
  padding: 32px;
}

.service-main-hairloss .service-who-content .service-title {
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.service-main-hairloss .service-text {
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.8em;
}

.service-main-hairloss .service-who-subtitle {
  margin-top: 48px;
}

/*--------------------------------------------------------------
# Knowledge Tabs
--------------------------------------------------------------*/

.service-main-hairloss .service-knowledge {
  padding: 72px;
}

.service-main-hairloss .service-knowledge-inner {
  max-width: 1296px;
  margin: 0 auto;
}

.service-main-hairloss .service-knowledge-title {
  text-align: center;
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 56px;
  color: #1a1919;
}

.service-main-hairloss .service-knowledge-image {
  width: 100%;
  height: 452px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 56px;
}

.service-main-hairloss .service-knowledge-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tabs */

.service-main-hairloss .service-knowledge-tabs {
  display: grid;
  grid-template-columns: 462px 1fr;
  gap: 48px;
  align-items: start;
}

.service-main-hairloss .service-knowledge-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-main-hairloss .service-knowledge-tab {
  width: 100%;
  padding: 15px 24px;
  background: #fffefc;
  border: 1px solid #d4d1c4;
  border-radius: 32px;
  color: #1a1919;
  font-family: var(--padra-body-font);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.service-main-hairloss .service-knowledge-tab.is-active {
  background: #e0c99d;
  border-color: #e0c99d;
}

.service-main-hairloss .service-knowledge-content {
  padding: 0 32px;
}

.service-main-hairloss .service-knowledge-panel {
  display: none;
}

.service-main-hairloss .service-knowledge-panel.is-active {
  display: block;
}

.service-main-hairloss .service-knowledge-panel-image {
  width: 100%;
  margin-top: 32px;
  border-radius: 24px;
}

/*--------------------------------------------------------------
# Hair Loss Compare Section
--------------------------------------------------------------*/

.service-main-hairloss .service-compare {
  padding: 56px 72px;
  overflow: hidden;
  background: #edebe9;
  border-radius: 40px;
}

.service-main-hairloss .service-compare-inner {
  display: block;
  width: 100%;
  max-width: 1296px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* Section Title */

.service-main-hairloss .service-compare-title {
  margin: 0 0 48px;
  color: #1a1919;
  font-family: canela, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}

/* Optional Description */

.service-main-hairloss .service-compare-description {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.service-main-hairloss .service-compare-description> :first-child {
  margin-top: 0;
}

.service-main-hairloss .service-compare-description> :last-child {
  margin-bottom: 0;
}

/* Compare Layout */

.service-main-hairloss .service-compare-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.9fr);
  align-items: center;
  gap: 48px;
  width: 100%;
}

/*--------------------------------------------------------------
# Hair Loss Compare Section
--------------------------------------------------------------*/

.service-main-hairloss .service-compare {
  padding: 56px 72px;
  overflow: hidden;
  background: #edebe9;
  border-radius: 40px;
}

.service-main-hairloss .service-compare-inner {
  width: 100%;
  max-width: 1296px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* Section Title */

.service-main-hairloss .service-compare-title {
  margin: 0 0 48px;
  color: #1a1919;
  font-family: canela, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}

/* Main Layout */

.service-main-hairloss .service-compare-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: 56px;
  width: 100%;
}

.service-main-hairloss .service-compare-layout--table-only,
.service-main-hairloss .service-compare-layout--benefits-only {
  grid-template-columns: minmax(0, 1fr);
}

/*--------------------------------------------------------------
# Compare Table
--------------------------------------------------------------*/

.service-main-hairloss .service-compare-table {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fffefc;
  border-radius: 10px;
  scrollbar-color: #ff6815 #dedad6;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* WebKit Scrollbar */

.service-main-hairloss .service-compare-table::-webkit-scrollbar {
  height: 8px;
}

.service-main-hairloss .service-compare-table::-webkit-scrollbar-track {
  background: #dedad6;
  border-radius: 999px;
}

.service-main-hairloss .service-compare-table::-webkit-scrollbar-thumb {
  background: #ff6815;
  border-radius: 999px;
}

.service-main-hairloss .service-compare-table::-webkit-scrollbar-thumb:hover {
  background: #e95c0d;
}

/* Base Table */

.service-main-hairloss .service-compare-table table {
  width: 100%;
  min-width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: auto;
  background: #fffefc;
}

/*
 * Tables with 5 columns or more keep readable column widths.
 * The wrapper provides horizontal scrolling.
 */

.service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) {
  min-width: 960px;
}

.service-main-hairloss .service-compare-table table:has(tr > :nth-child(6)) {
  min-width: 1120px;
}

.service-main-hairloss .service-compare-table table:has(tr > :nth-child(7)) {
  min-width: 1280px;
}

/* Table Head */

.service-main-hairloss .service-compare-table thead {
  background: #4d4c4b;
}

.service-main-hairloss .service-compare-table th {
  padding: 15px 16px;
  border: 0;
  background: #4d4c4b;
  color: #fff;
  font-family: var(--padra-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

.service-main-hairloss .service-compare-table thead th:first-child {
  border-start-start-radius: 8px;
}

.service-main-hairloss .service-compare-table thead th:last-child {
  border-start-end-radius: 8px;
}

/* Table Body */

.service-main-hairloss .service-compare-table td,
.service-main-hairloss .service-compare-table tbody th {
  padding: 18px 16px;
  border: 0;
  border-bottom: 1px solid #edeceb;
  background: #fffefc;
  color: #1a1919;
  font-family: var(--padra-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
}

.service-main-hairloss .service-compare-table tbody tr:last-child td,
.service-main-hairloss .service-compare-table tbody tr:last-child th {
  border-bottom: 0;
}

/* Wide Table Cells */

.service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) th,
.service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) td {
  min-width: 160px;
}

.service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) th:first-child,
.service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) td:first-child {
  min-width: 140px;
}

/*--------------------------------------------------------------
# Compare Benefits
--------------------------------------------------------------*/

.service-main-hairloss .service-compare-benefits {
  min-width: 0;
  padding: 16px 0;
  color: #4d4c4b;
  text-align: left;
}

.service-main-hairloss .service-compare-benefits-title {
  margin: 0 0 20px;
  color: #4d4c4b;
  font-family: canela, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}

/*
 * compare_description currently contains the Key Benefits
 * content on existing Hair Loss service pages.
 */

.service-main-hairloss .service-compare-description {
  max-width: none;
  margin: 0;
  color: #4d4c4b;
  text-align: left;
}

.service-main-hairloss .service-compare-description> :first-child {
  margin-top: 0;
}

.service-main-hairloss .service-compare-description> :last-child {
  margin-bottom: 0;
}

.service-main-hairloss .service-compare-description h2,
.service-main-hairloss .service-compare-description h3,
.service-main-hairloss .service-compare-description h4 {
  margin: 0 0 20px;
  color: #4d4c4b;
  font-family: canela, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}

.service-main-hairloss .service-compare-description p {
  margin: 0 0 16px;
}

.service-main-hairloss .service-compare-description ul,
.service-main-hairloss .service-compare-description ol {
  margin: 0;
  padding-left: 22px;
}

.service-main-hairloss .service-compare-description li {
  margin: 0 0 8px;
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.5;
}

.service-main-hairloss .service-compare-description li:last-child {
  margin-bottom: 0;
}

.service-main-hairloss .service-compare-benefits .service-bullets {
  margin: 20px 0 0;
  padding-left: 22px;
}

.service-main-hairloss .service-compare-benefits .service-bullets li {
  margin: 0 0 8px;
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.5;
}

.service-main-hairloss .service-compare-benefits .service-bullets li:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Large Tablet / Small Desktop
--------------------------------------------------------------*/

@media screen and (max-width: 75em) {
  .service-main-hairloss .service-compare {
    padding: 48px;
  }

  .service-main-hairloss .service-compare-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
    gap: 36px;
  }

  .service-main-hairloss .service-compare-layout--table-only,
  .service-main-hairloss .service-compare-layout--benefits-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-main-hairloss .service-compare-table th,
  .service-main-hairloss .service-compare-table td,
  .service-main-hairloss .service-compare-table tbody th {
    padding-right: 12px;
    padding-left: 12px;
    font-size: 15px;
  }

  .service-main-hairloss .service-compare-benefits-title,
  .service-main-hairloss .service-compare-description h2,
  .service-main-hairloss .service-compare-description h3,
  .service-main-hairloss .service-compare-description h4 {
    font-size: 30px;
  }

  .service-main-hairloss .service-compare-description li,
  .service-main-hairloss .service-compare-benefits .service-bullets li {
    font-size: 15px;
  }
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media screen and (max-width: 63.99em) {
  .service-main-hairloss .service-compare {
    padding: 40px 32px;
  }

  .service-main-hairloss .service-compare-title {
    margin-bottom: 40px;
    font-size: 42px;
  }

  .service-main-hairloss .service-compare-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  /*
   * Preserve the previous mobile/tablet reading order:
   * benefits first, table second.
   */

  .service-main-hairloss .service-compare-benefits {
    order: 1;
    width: 100%;
    padding: 0;
  }

  .service-main-hairloss .service-compare-table {
    order: 2;
    width: 100%;
  }

  .service-main-hairloss .service-compare-table table {
    min-width: 680px;
  }

  .service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) {
    min-width: 960px;
  }

  .service-main-hairloss .service-compare-table table:has(tr > :nth-child(6)) {
    min-width: 1120px;
  }

  .service-main-hairloss .service-compare-table table:has(tr > :nth-child(7)) {
    min-width: 1280px;
  }
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 40em) {
  .service-main-hairloss .service-compare {
    padding: 32px 16px;
    border-radius: 32px;
  }

  .service-main-hairloss .service-compare-title {
    margin-bottom: 32px;
    font-size: 36px;
    line-height: 1.12;
  }

  .service-main-hairloss .service-compare-layout {
    gap: 28px;
  }

  .service-main-hairloss .service-compare-table {
    border-radius: 8px;
  }

  .service-main-hairloss .service-compare-table::-webkit-scrollbar {
    height: 6px;
  }

  .service-main-hairloss .service-compare-table table {
    min-width: 640px;
  }

  .service-main-hairloss .service-compare-table table:has(tr > :nth-child(5)) {
    min-width: 900px;
  }

  .service-main-hairloss .service-compare-table table:has(tr > :nth-child(6)) {
    min-width: 1040px;
  }

  .service-main-hairloss .service-compare-table table:has(tr > :nth-child(7)) {
    min-width: 1180px;
  }

  .service-main-hairloss .service-compare-table th,
  .service-main-hairloss .service-compare-table td,
  .service-main-hairloss .service-compare-table tbody th {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
  }

  .service-main-hairloss .service-compare-benefits-title,
  .service-main-hairloss .service-compare-description h2,
  .service-main-hairloss .service-compare-description h3,
  .service-main-hairloss .service-compare-description h4 {
    font-size: 28px;
  }

  .service-main-hairloss .service-compare-description li,
  .service-main-hairloss .service-compare-benefits .service-bullets li {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Hair Loss Treatment Options
--------------------------------------------------------------*/

.service-main-hairloss .service-options {
  padding: 72px;
}

.service-main-hairloss .service-options-inner {
  max-width: 1296px;
  margin: 0 auto;
  background: #f8f6f2;
  border-radius: 40px;
  padding: 40px;
}

.service-main-hairloss .service-options-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

.service-main-hairloss .service-options-header .service-title {
  font-size: 48px;
  color: #4d4c4b;
}

.service-main-hairloss .service-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.service-main-hairloss .service-option {
  background: #fffefc;
  border-radius: 16px;
  padding: 16px;
}

.service-main-hairloss .service-option-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
}

.service-main-hairloss .service-option-title {
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  color: #1a1919;
  margin-bottom: 16px;
}

.service-main-hairloss .service-option-text {
  font-size: 16px;
  line-height: 1.8em;
  color: #4d4c4b;
}

/*--------------------------------------------------------------
# Hair Loss FAQ
--------------------------------------------------------------*/

.service-main-hairloss .service-faq {
  background: #edebe9;
  border-radius: 62px;
  padding: 93px 0;
  margin-bottom: 5em;
}

.service-main-hairloss .service-faq-inner {
  max-width: 1069px;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  padding: 84px 24px;
}

.service-main-hairloss .service-faq .service-title {
  font-size: 52px;
  text-align: center;
  margin-bottom: 48px;
}

.service-main-hairloss .service-faq-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
}

.service-main-hairloss .service-faq-tab {
  width: 230px;
  height: 54px;
  border-radius: 58px;
  background: #fff;
  border: 1px dashed #c2bbac;
  color: #1a1919;
  cursor: pointer;
}

.service-main-hairloss .service-faq-tab.is-active {
  background: #5a5a5a;
  color: #fff;
  border-color: #5a5a5a;
}

.service-main-hairloss .service-faq-item {
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 0 40px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.4);
}

.service-main-hairloss .service-faq-question {
  font-family: var(--padra-body-font);
  font-size: 20px;
  color: #333;
  margin: 0 0 0;
}

.service-main-hairloss .service-faq-answer {
  font-size: 16px;
  line-height: 24px;
  color: #333;
}

/*--------------------------------------------------------------
# Hair Loss Closing CTA
--------------------------------------------------------------*/

.service-main-hairloss .service-closing-cta {
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(213deg, #ff6a14 33%, #f8f5ee 143%);
  padding: 40px;
}

.service-main-hairloss .service-closing-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.service-main-hairloss .service-closing-cta-title {
  font-family: canela;
  font-size: 48px;
  font-weight: 400;
  color: #fff;
  margin: 0;
}

.service-main-hairloss .service-closing-cta-description {
  color: #fff;
}

.service-main-hairloss .service-closing-cta-actions {
  display: flex;
  gap: 16px;
}

.service-main-hairloss .service-closing-cta-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  text-decoration: none;
}

.service-main-hairloss .service-closing-cta-primary {
  background: #fff;
  color: #393939;
}

.service-main-hairloss .service-closing-cta-secondary {
  border: 1px solid #fff;
  color: #fff;
}

/*--------------------------------------------------------------
# Hair Loss Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 63.99em) {
  .service-main-hairloss .service-lead,
  .service-main-hairloss .service-who,
  .service-main-hairloss .service-options,
  .service-main-hairloss .service-knowledge {
    padding: 32px 16px;
  }

  .service-main-hairloss .service-who-inner,
  .service-main-hairloss .service-knowledge-tabs,
  .service-main-hairloss .service-compare-layout,
  .service-main-hairloss .service-options-header {
    display: flex;
    flex-direction: column !important;
    gap: 24px;
  }

  .service-main-hairloss .service-who-content {
    padding: 0;
  }

  .service-main-hairloss .service-knowledge-title,
  .service-main-hairloss .service-compare-title {
    font-size: 36px;
  }

  .service-main-hairloss .service-option-grid {
    grid-template-columns: 1fr;
  }

  .service-main-hairloss .service-faq {
    padding: 40px 16px;
    border-radius: 40px;
  }

  .service-main-hairloss .service-faq-inner {
    padding: 32px 20px;
  }

  .service-main-hairloss .service-faq-tabs {
    overflow-x: auto;
  }

  .service-main-hairloss .service-faq-tab {
    flex: 0 0 auto;
    width: auto;
    padding: 0 32px;
  }

  .service-main-hairloss .service-closing-cta {
    margin: 16px;
    padding: 32px 24px;
  }

  .service-main-hairloss .service-closing-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-main-hairloss .service-closing-cta-title {
    font-size: 36px;
  }

  .service-main-hairloss .service-closing-cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .service-main-hairloss .service-closing-cta-actions a {
    width: 100%;
  }
}
/*--------------------------------------------------------------
# Hair Loss Knowledge Gallery
--------------------------------------------------------------*/

.service-main-hairloss .service-knowledge-gallery {
  width: 100%;
  margin-bottom: 56px;
}

/* Main Image */

.service-main-hairloss .service-knowledge-gallery-main {
  position: relative;
  width: 100%;
  height: 452px;
  overflow: hidden;
  border-radius: 24px;
  background: #f8f6f2;
}

/*
.service-main-hairloss .service-knowledge-gallery-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}
    */

.service-main-hairloss .service-knowledge-gallery-image.is-active {
  opacity: 1;
  visibility: visible;
}

/*--------------------------------------------------------------
# Knowledge Gallery Slider
--------------------------------------------------------------*/

.service-main-hairloss .service-knowledge-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
}

.service-main-hairloss .service-knowledge-gallery-track {
  display: flex;
  transition: transform 0.45s ease;
}

.service-main-hairloss .service-knowledge-gallery-slide {
  flex: 0 0 100%;
}

.service-main-hairloss .service-knowledge-gallery-slide img {
  display: block;

  width: 100%;
  height: 452px;

  object-fit: cover;

  border-radius: 24px;
}

/* Controls */

.service-main-hairloss .service-knowledge-gallery-controls {
  position: absolute;

  left: 32px;
  bottom: 32px;

  display: flex;

  gap: 12px;

  z-index: 5;
}

.service-main-hairloss .service-knowledge-gallery-controls button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edeceb;
  border: none;
  color: #4d4c4b;
  cursor: pointer;
}

.service-main-hairloss .service-knowledge-gallery-controls button:hover {
  background: #f8f6f2;
}

/* Mobile */

@media screen and (max-width: 63.99em) {
  .service-main-hairloss .service-knowledge-gallery-slide img {
    height: 240px;

    border-radius: 20px;
  }

  .service-main-hairloss .service-knowledge-gallery-controls {
    left: 20px;
    bottom: 20px;
  }

  .service-main-hairloss .service-knowledge-gallery-controls button {
    width: 36px;
    height: 36px;
  }
}

/* Thumbnail Navigation */

.service-main-hairloss .service-knowledge-gallery-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  overflow-x: auto;

  scrollbar-width: none;
}

.service-main-hairloss .service-knowledge-gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.service-main-hairloss .service-knowledge-gallery-thumb {
  width: 92px;
  height: 72px;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 12px;

  background: transparent;

  overflow: hidden;

  cursor: pointer;

  flex: 0 0 auto;

  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.service-main-hairloss .service-knowledge-gallery-thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.service-main-hairloss .service-knowledge-gallery-thumb:hover {
  transform: translateY(-2px);
}

.service-main-hairloss .service-knowledge-gallery-thumb.is-active {
  border-color: #d9b98a;
}

/*--------------------------------------------------------------
# Knowledge Layout Update
--------------------------------------------------------------*/

.service-main-hairloss .service-knowledge-tabs {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: start;
}

.service-main-hairloss .service-knowledge-content {
  padding-top: 0;
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 63.99em) {
  .service-main-hairloss .service-knowledge-gallery-main {
    height: 260px;
    border-radius: 20px;
  }

  .service-main-hairloss .service-knowledge-gallery-thumbs {
    gap: 8px;
  }

  .service-main-hairloss .service-knowledge-gallery-thumb {
    width: 72px;
    height: 56px;
    border-radius: 10px;
  }

  .service-main-hairloss .service-knowledge-tabs {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

.service-main-hairloss .service-hubspot-form {
  background-color: #fff;
  padding: 2em;
  border-radius: 24px;
}

/*--------------------------------------------------------------
# Service Section Divider
--------------------------------------------------------------*/

.service-main-hairloss .service-section-divider {
  width: calc(100% - 144px);

  max-width: 1296px;

  height: 1px;

  margin: 72px auto;

  background: #c3c3c3;
}

/* Mobile */

@media screen and (max-width: 63.99em) {
  .service-main-hairloss .service-section-divider {
    width: calc(100% - 32px);

    margin: 40px auto;
  }
}

/*--------------------------------------------------------------
# Beauty Treatment Benefits
--------------------------------------------------------------*/

.service-treatment-benefits {
  padding: 5em 1em;
  background: #ffffff;
}

.service-treatment-benefits-inner {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

.service-treatment-benefits-title {
  margin: 0 0 0.75em;
  color: #222223;
  font-family: canela;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.15;
}

.service-treatment-benefits-description {
  max-width: 620px;
  margin: 0 auto 3em;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

.service-treatment-benefits-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-treatment-benefit-item {
  display: flex;
  min-height: 184px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 2em;
  background: #f8f6f2;
  border-radius: 16px;
  transition:
    background 0.35s ease,
    transform 0.25s ease;
}

.service-treatment-benefit-item:hover {
  background: linear-gradient(180deg, #f9b48f 0%, #f8f6f2 100%);
  transform: translateY(-2px);
}

.service-treatment-benefit-icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}

.service-treatment-benefit-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.service-treatment-benefit-title {
  margin: 0;
  color: #222223;
  font-family: var(--padra-body-font);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.8em;
  text-align: center;
}

.service-treatment-benefit-description {
  margin: 0;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 0.9em;
  line-height: 1.45;
  text-align: center;
}

/* Hover state */

.service-treatment-benefit-item:hover .service-treatment-benefit-title {
  color: #222223;
}

.service-treatment-benefit-item:hover .service-treatment-benefit-description {
  color: #4d4c4b;
}

/* Tablet */

@media screen and (max-width: 1024px) {
  .service-treatment-benefits {
    padding: 4em 1.5em;
  }

  .service-treatment-benefits-title {
    font-size: 2.25em;
  }

  .service-treatment-benefits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */

@media screen and (max-width: 767px) {
  .service-treatment-benefits {
    padding: 3em 1em;
  }

  .service-treatment-benefits-title {
    font-size: 2em;
  }

  .service-treatment-benefits-description {
    margin-bottom: 2em;
  }

  .service-treatment-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .service-treatment-benefit-item {
    min-height: 160px;
    padding: 1.25em;
  }

  .service-treatment-benefit-icon,
  .service-treatment-benefit-icon img {
    width: 40px;
    height: 40px;
  }

  .service-treatment-benefit-title {
    font-size: 0.95em;
  }
}

section.service-results {
  background-color: #f8f6f2;
}

/*--------------------------------------------------------------
# Beauty Skin Plan Section
--------------------------------------------------------------*/

.service-skin-plan {
  padding: 5em 1em;
  background: #ffffff;
}

.service-skin-plan-inner {
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(0, 500px);
  gap: 16px;
  max-width: 1312px;
  margin: 0 auto;
  padding: 0;
  background: #ffffff;
  border-radius: 40px;
}

/*--------------------------------------------------------------
# Media Area
--------------------------------------------------------------*/

.service-skin-plan-media {
  position: relative;
  width: 780px;
  height: 538px;
}

.service-skin-plan-main-image {
  display: block;
  width: 780px;
  height: 538px;
  object-fit: cover;
  border-radius: 24px;
}

/*--------------------------------------------------------------
# Floating Card
--------------------------------------------------------------*/

.service-skin-plan-card {
  position: absolute;
  left: 40px;
  bottom: 40px;
  width: 400px;
  padding: 8px;
  background: #f8f6f2;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

.service-skin-plan-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.service-skin-plan-card-text {
  margin: 16px 8px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.service-skin-plan-card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  background: #ff7a24;
  color: #ffffff;
  border-radius: 999px;
  font-family: var(--padra-body-font);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.service-skin-plan-card-button:hover {
  background: #f26b18;
  transform: translateY(-2px);
}

.service-skin-plan-card-button svg {
  flex-shrink: 0;
}

/*--------------------------------------------------------------
# Content Area
--------------------------------------------------------------*/

.service-skin-plan-content {
  display: flex;
  width: 500px;
  height: 538px;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  background: #f8f6f2;
  border-radius: 24px;
}

.service-skin-plan-title {
  max-width: 430px;
  margin: 0 0 3em;
  color: #222223;
  font-family: canela;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.05;
}

.service-skin-plan-items {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-skin-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.service-skin-plan-item-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 3px;
  object-fit: contain;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
  .service-skin-plan-inner {
    padding: 2em;
  }

  .service-skin-plan-content {
    padding: 2em;
  }

  .service-skin-plan-title {
    font-size: 2.2em;
  }

  .service-skin-plan-card {
    left: 24px;
    bottom: 24px;
  }

  .service-skin-plan-inner {
    grid-template-columns: 1fr;
  }

  .service-skin-plan-media,
  .service-skin-plan-main-image,
  .service-skin-plan-content {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 767px) {
  .service-skin-plan {
    padding: 1em 0;
  }

  .service-skin-plan-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 32px;
    border-radius: 40px;
  }

  .service-skin-plan-media {
    min-height: auto;
    height: auto;
  }

  .service-skin-plan-main-image {
    height: 650px;
    min-height: 650px;
    border-radius: 24px;
    object-fit: cover;
  }

  .service-skin-plan-card {
    left: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
  }

  .service-skin-plan-card-image {
    height: 180px;
  }

  .service-skin-plan-card-text {
    font-size: 16px;
  }

  .service-skin-plan-content {
    padding: 40px 32px;
    border-radius: 24px;
  }

  .service-skin-plan-title {
    margin-bottom: 2em;
    font-size: 2.4em;
    line-height: 1.1;
  }

  .service-skin-plan-items {
    gap: 1.5em;
  }

  .service-skin-plan-item {
    font-size: 16px;
  }
}

/*--------------------------------------------------------------
# Beauty Closing CTA
--------------------------------------------------------------*/

.service-main-beauty .service-closing-cta {
  position: relative;
  overflow: hidden;
  max-width: 1296px;
  min-height: 253px;
  margin: 24px auto;
  padding: 56px 72px;
  background-color: #ffdbc7;
  border-radius: 32px;
}

.service-main-beauty .service-closing-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

/*--------------------------------------------------------------
# Background Patterns
--------------------------------------------------------------*/

.service-main-beauty .service-closing-cta::before,
.service-main-beauty .service-closing-cta::after {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  pointer-events: none;
}

.service-main-beauty .service-closing-cta::before {
  left: 0;
  width: 46%;
  background-image: url("assets/img/cta-pattern-left.svg");
  background-position: left center;
}

.service-main-beauty .service-closing-cta::after {
  right: 0;
  width: 46%;
  background-image: url("assets/img/cta-pattern-right.svg");
  background-position: right center;
}

/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/

.service-main-beauty .service-closing-cta-title h2 {
  max-width: 520px;
  margin: 0;
  color: #1a1919;
  font-family: Canela, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

.service-main-beauty .service-closing-cta-content {
  max-width: 520px;
}

.service-main-beauty .service-closing-cta-content h3 {
  margin: 0 0 8px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.service-main-beauty .service-closing-cta-content p {
  max-width: 480px;
  margin: 0 0 24px;
  color: #4d4c4b;
  font-family: var(--padra-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.service-main-beauty .service-closing-cta-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.service-main-beauty .service-closing-cta-primary,
.service-main-beauty .service-closing-cta-secondary {
  display: inline-flex;
  width: 258px;
  height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  font-family: var(--padra-body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

.service-main-beauty .service-closing-cta-primary {
  gap: 12px;
  background: #ff6b1a;
  color: #ffffff;
}

.service-main-beauty .service-closing-cta-primary:hover {
  background: #f25d0d;
  transform: translateY(-2px);
}

.service-main-beauty .service-closing-cta-secondary {
  background: #ffffff;
  color: #4d4c4b;
}

.service-main-beauty .service-closing-cta-secondary:hover {
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
  .service-main-beauty .service-closing-cta {
    padding: 48px;
  }

  .service-main-beauty .service-closing-cta-title h2 {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 767px) {
  .service-main-beauty .service-closing-cta {
    min-height: auto;
    margin: 0 16px;
    padding: 32px;
    border-radius: 32px;
    background-color: #ffdbc7;
  }

  .service-main-beauty .service-closing-cta::before,
  .service-main-beauty .service-closing-cta::after {
    display: none;
  }

  .service-main-beauty .service-closing-cta {
    background-image: url("assets/img/cta-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .service-main-beauty .service-closing-cta-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .service-main-beauty .service-closing-cta-title h2 {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.15;
  }

  .service-main-beauty .service-closing-cta-content h3 {
    font-size: 16px;
  }

  .service-main-beauty .service-closing-cta-content p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .service-main-beauty .service-closing-cta-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .service-main-beauty .service-closing-cta-primary,
  .service-main-beauty .service-closing-cta-secondary {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Service SEO Content RTL
--------------------------------------------------------------*/

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-content-layout {
  direction: rtl;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc {
  direction: rtl;
  text-align: right;

  border-right: 0;
  border-left: 1px solid #e7e3dc;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc::after {
  right: auto;
  left: -2px;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-title,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item a,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h2,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h3,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content h4 {
  font-family: "ravi";
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-list {
  padding-right: 0;
  padding-left: 10px;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item {
  padding-right: 14px;
  padding-left: 0;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-item::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc-level-3 {
  margin-right: 14px;
  margin-left: 0;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content ul,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content ol {
  padding-right: 22px;
  padding-left: 0;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content blockquote {
  border-right: 2px solid #ff681e;
  border-left: 0;
}

html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content th,
html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-article .entry-content td {
  text-align: right;
}

@media screen and (max-width: 63.99em) {
  html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc {
    border-left: 0;
    border-bottom: 1px solid #e7e3dc;
  }

  html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc::after {
    right: 32px;
    left: auto;
  }
}

@media screen and (max-width: 40em) {
  html[dir="rtl"] :is(.service-main-transplant, .service-main-hairloss) .service-seo-toc::after {
    right: 24px;
  }
}

/* SEO Content Read More --------------------------------------- */

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article-body {
  position: relative;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-collapsible-ready.is-collapsed .service-seo-article-body {
  max-height: 520px;
  overflow: hidden;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-collapsible-ready.is-collapsed .service-seo-article-body::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.82) 45%,
      #fff 88%);

  content: "";
  pointer-events: none;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-expanded .service-seo-article-body {
  max-height: none;
  overflow: visible;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-expanded .service-seo-article-body::after {
  display: none;
}

/* Toggle ------------------------------------------------------- */

:is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more-wrap {
  position: relative;
  z-index: 3;

  display: flex;
  justify-content: center;

  margin-top: 24px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-collapsible-ready.is-collapsed .service-seo-read-more-wrap {
  margin-top: -28px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more {
  display: inline-flex;
  min-width: 102px;
  min-height: 42px;

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

  padding: 10px 22px;

  background: #ff681e;
  color: #fff;

  border: 0;
  border-radius: 999px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  box-shadow: none;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more:hover,
:is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more:focus-visible {
  background: #e95712;
  color: #fff;

  transform: translateY(-2px);

  outline: none;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more:focus-visible {
  outline: 2px solid #ff681e;
  outline-offset: 3px;
}

:is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more-wrap[hidden] {
  display: none;
}

/* Mobile ------------------------------------------------------- */

@media screen and (max-width: 40em) {
  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-collapsible-ready.is-collapsed .service-seo-article-body {
    max-height: 440px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-article.is-collapsible-ready.is-collapsed .service-seo-article-body::after {
    height: 130px;
  }

  :is(.service-main-transplant, .service-main-hairloss) .service-seo-read-more {
    min-width: 100px;
    min-height: 40px;

    padding: 10px 20px;

    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Portfolio Results Template
--------------------------------------------------------------*/
.portfolio-main {
  width: 100%;
  max-width: none;
  overflow: hidden;
  background: #fff;
}

.portfolio-container {
  width: min(calc(100% - 64px), 1296px);
  margin-inline: auto;
}

.portfolio-hero {
  padding: 72px 0 96px;
  background: #fff;
}

.portfolio-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
  gap: clamp(48px, 6vw, 104px);
  align-items: center;
}

.portfolio-hero--no-media .portfolio-hero-inner {
  grid-template-columns: minmax(0, 760px);
}

.portfolio-hero-content {
  min-width: 0;
}

.portfolio-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
  color: #878787;
  font-size: 14px;
  line-height: 1.5;
}

.portfolio-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.portfolio-breadcrumb a:hover,
.portfolio-breadcrumb a:focus-visible {
  color: #ff681e;
}

.portfolio-hero-title {
  max-width: 720px;
  margin: 0;
  color: #ff681e;
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1.04;
}

.portfolio-hero-description {
  max-width: 680px;
  margin-top: 26px;
  color: #4d4c4b;
  font-size: 17px;
  line-height: 1.7;
}

.portfolio-hero-description>*:first-child,
.portfolio-hero-description p:first-child {
  margin-top: 0;
}

.portfolio-hero-description>*:last-child,
.portfolio-hero-description p:last-child {
  margin-bottom: 0;
}

.portfolio-hero-actions,
.portfolio-closing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.portfolio-hero-actions {
  margin-top: 32px;
}

.portfolio-button {
  display: inline-flex;
  min-height: 54px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #1a1919;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.portfolio-button:hover,
.portfolio-button:focus-visible {
  transform: translateY(-2px);
}

.portfolio-button--primary {
  border-color: #ff681e;
  background: #ff681e;
  color: #fff;
}

.portfolio-button--primary:hover,
.portfolio-button--primary:focus-visible {
  border-color: #e95711;
  background: #e95711;
  color: #fff;
}

.portfolio-button--outline {
  border-color: #ff681e;
  background: #fff;
  color: #ff681e;
}

.portfolio-button--outline:hover,
.portfolio-button--outline:focus-visible {
  background: #fff3ec;
  color: #e95711;
}

.portfolio-button--light {
  border-color: #fff;
  background: #fff;
  color: #4d4c4b;
}

.portfolio-button--light:hover,
.portfolio-button--light:focus-visible {
  border-color: #f1ebe7;
  background: #f8f5f3;
  color: #1a1919;
}

.portfolio-hero-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  background: #eeeae7;
}

.portfolio-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-hero-media img[hidden],
.portfolio-hero-video[hidden],
.portfolio-hero-play[hidden] {
  display: none;
}

.portfolio-hero-media.is-playing {
  background: #000;
}

.portfolio-hero-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.portfolio-hero-video iframe,
.portfolio-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.portfolio-hero-play {
  position: absolute;
  z-index: 3;
  top: 24px;
  inset-inline-end: 24px;
  display: inline-flex;
  width: 91px;
  height: 91px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.portfolio-hero-play:hover,
.portfolio-hero-play:focus-visible {
  transform: scale(1.05);
}

.portfolio-hero-play svg {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-cases {
  padding: 56px 0 64px;
  background: #efeeec;
}

.portfolio-cases-title {
  margin: 0 0 36px;
  color: #1a1919;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.1;
  text-align: center;
}

.portfolio-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.portfolio-case {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  min-height: 224px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 25, 25, 0.04);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(26, 25, 25, 0.025);
}

.portfolio-case--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.portfolio-case-media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #eeece9;
}

.portfolio-case-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 198px;
  object-fit: cover;
}

.portfolio-case-body {
  display: flex;
  min-width: 0;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
}

.portfolio-case-title {
  margin: 0 0 14px;
  color: #1a1919;
  font-family: var(--padra-body-font);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.portfolio-case-details {
  display: grid;
  width: 100%;
  gap: 8px;
  margin: 0;
}

.portfolio-case-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: #4d4c4b;
  font-size: 13px;
  line-height: 1.45;
}

.portfolio-case-detail dt,
.portfolio-case-detail dd {
  margin: 0;
}

.portfolio-case-detail dt {
  color: #878787;
}

.portfolio-case-detail dd {
  color: #1a1919;
  font-weight: 500;
}

.portfolio-case-video {
  display: inline-flex;
  margin-top: auto;
  padding: 12px 0 0;
  border: 0;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #8d7448;
  font-size: 13px;
  line-height: 1.8em;
  cursor: pointer;
}

.portfolio-case-video:hover,
.portfolio-case-video:focus-visible {
  color: #ff681e;
}

.portfolio-case-video-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.portfolio-case-video-icon svg {
  margin-inline-start: 2px;
}

.portfolio-infinite-scroll {
  display: flex;
  min-height: 56px;
  margin-top: 24px;
  align-items: center;
  justify-content: center;
}

.portfolio-infinite-scroll[hidden],
.portfolio-infinite-scroll-status[hidden] {
  display: none;
}

.portfolio-infinite-scroll-spinner {
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(185, 167, 125, 0.3);
  border-top-color: #b9a77d;
  border-radius: 50%;
  opacity: 0;
  animation: portfolio-spinner 0.75s linear infinite;
}

.portfolio-cases.is-loading-more .portfolio-infinite-scroll-spinner {
  opacity: 1;
}

.portfolio-infinite-scroll-status {
  margin: 0;
  color: #656362;
  font-size: 13px;
  text-align: center;
}

@keyframes portfolio-spinner {
  to {
    transform: rotate(360deg);
  }
}

.portfolio-closing-cta {
  padding: 40px 0;
  background: #fff;
}

.portfolio-closing-cta-inner {
  position: relative;
  display: grid;
  min-height: 253px;
  padding: 48px 106px;
  overflow: hidden;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 68px;
  align-items: center;
  border-radius: 30px;
  background: #fbd7c2;
}

.portfolio-closing-cta-inner::before,
.portfolio-closing-cta-inner::after {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  pointer-events: none;
}

.portfolio-closing-cta-inner::before {
  left: 0;
  background-image: url("assets/img/cta-pattern-left.svg");
  background-position: left center;
}

.portfolio-closing-cta-inner::after {
  right: 0;
  background-image: url("assets/img/cta-pattern-right.svg");
  background-position: right center;
}

.portfolio-closing-cta-title,
.portfolio-closing-cta-content {
  position: relative;
  z-index: 1;
}

.portfolio-closing-cta-title {
  max-width: 500px;
  margin: 0;
  color: #121212;
  font-size: clamp(46px, 3.62vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.portfolio-closing-cta-subtitle {
  margin: 0 0 7px;
  color: #2f2e2d;
  font-family: var(--padra-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
}

.portfolio-closing-cta-description {
  max-width: 520px;
  margin: 0;
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.3;
}

.portfolio-closing-cta-actions {
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 24px;
}

.portfolio-closing-cta-actions .portfolio-button {
  min-height: 55px;
  padding: 12px 24px;
  white-space: nowrap;
}

.portfolio-closing-cta-actions .portfolio-button--primary {
  min-width: 258px;
}

.portfolio-closing-cta-actions .portfolio-button--light {
  min-width: 246px;
}

@media screen and (min-width: 48em) {
  .portfolio-closing-cta-actions .portfolio-button--primary {
    flex-direction: row-reverse;
  }

  .portfolio-closing-cta-actions .portfolio-button--primary svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 50%;
    flex: 0 0 32px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.33 1.84.56 2.8.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px 17px;
  }

  .portfolio-closing-cta-actions .portfolio-button--primary svg path {
    display: none;
  }
}

.portfolio-seo {
  padding: 48px 0 96px;
  background: #fff;
}

.portfolio-seo-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.portfolio-seo-layout--single {
  grid-template-columns: minmax(0, 960px);
  justify-content: center;
}

.portfolio-seo-toc {
  min-width: 0;
  padding: 24px;
  border: 1px solid #e5e1dc;
  border-radius: 18px;
  background: #fbfaf9;
}

.portfolio-seo-toc-sticky {
  position: sticky;
  top: 120px;
}

.portfolio-seo-toc-title {
  margin: 0 0 18px;
  color: #1a1919;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8em;
}

.portfolio-seo-toc-list {
  display: grid;
  max-height: 520px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  gap: 12px;
  list-style: none;
}

.portfolio-seo-toc-item a {
  color: #656362;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}

.portfolio-seo-toc-item a:hover,
.portfolio-seo-toc-item a:focus-visible {
  color: #ff681e;
}

.portfolio-seo-toc-level-3 {
  padding-inline-start: 14px;
}

.portfolio-seo-article {
  min-width: 0;
  padding: 32px;
  border: 1px solid #e5e1dc;
  border-radius: 18px;
  background: #fff;
}

.portfolio-seo-article .entry-content {
  color: #4d4c4b;
  font-size: 16px;
  line-height: 1.8;
}

.portfolio-seo-article .entry-content>*:first-child {
  margin-top: 0;
}

.portfolio-seo-article .entry-content>*:last-child {
  margin-bottom: 0;
}

.portfolio-seo-article .entry-content h2,
.portfolio-seo-article .entry-content h3,
.portfolio-seo-article .entry-content h4 {
  scroll-margin-top: 120px;
  color: #1a1919;
}

.portfolio-seo-article .entry-content h2 {
  margin: 38px 0 18px;
  font-size: 34px;
  line-height: 1.15;
}

.portfolio-seo-article .entry-content h3 {
  margin: 30px 0 14px;
  font-size: 27px;
  line-height: 1.2;
}

.portfolio-seo-article .entry-content h4 {
  margin: 26px 0 12px;
  font-size: 21px;
  line-height: 1.3;
}

.portfolio-seo-article .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.portfolio-seo-article .entry-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.portfolio-seo-article .entry-content th,
.portfolio-seo-article .entry-content td {
  padding: 12px 14px;
  border: 1px solid #e5e1dc;
  text-align: start;
}

.portfolio-seo-article .entry-content blockquote {
  margin-inline: 0;
  padding-inline-start: 20px;
  border-inline-start: 2px solid #ff681e;
}

.portfolio-seo-article.is-collapsible-ready.is-collapsed .portfolio-seo-body {
  position: relative;
  max-height: 720px;
  overflow: hidden;
}

.portfolio-seo-article.is-collapsible-ready.is-collapsed .portfolio-seo-body::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 82%);
  content: "";
  pointer-events: none;
}

.portfolio-seo-toggle-wrap {
  display: flex;
  margin-top: 24px;
  justify-content: center;
}

.portfolio-seo-toggle {
  min-width: 160px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid #ff681e;
  border-radius: 999px;
  background: #fff;
  color: #ff681e;
  cursor: pointer;
}

.portfolio-seo-toggle:hover,
.portfolio-seo-toggle:focus-visible {
  background: #fff3ec;
}

.portfolio-lightbox {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  padding: 32px;
  place-items: center;
}

.portfolio-lightbox[hidden] {
  display: none;
}

.portfolio-lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(13, 13, 13, 0.82);
}

.portfolio-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 960px);
  padding: 50px 18px 18px;
  border-radius: 20px;
  background: #111;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.portfolio-lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.portfolio-lightbox-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #000;
}

.portfolio-lightbox-media iframe,
.portfolio-lightbox-media video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

body.portfolio-lightbox-open {
  overflow: hidden;
}

@media screen and (max-width: 63.99em) {
  .portfolio-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: 40px;
  }

  .portfolio-cases-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-closing-cta-inner {
    min-height: 245px;
    padding: 42px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }

  .portfolio-closing-cta-title {
    font-size: clamp(42px, 5vw, 48px);
  }

  .portfolio-closing-cta-actions {
    flex-wrap: wrap;
  }

  .portfolio-closing-cta-actions .portfolio-button--primary,
  .portfolio-closing-cta-actions .portfolio-button--light {
    min-width: 220px;
  }

  .portfolio-seo-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
  }
}

@media screen and (max-width: 47.99em) {
  .portfolio-container {
    width: min(calc(100% - 32px), 1296px);
  }

  .portfolio-hero {
    padding: 24px 0 52px;
  }

  .portfolio-hero-inner,
  .portfolio-hero--no-media .portfolio-hero-inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
  }

  .portfolio-hero-content,
  .portfolio-hero-media {
    width: 100%;
  }

  .portfolio-hero-media {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
  }

  .portfolio-breadcrumb {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .portfolio-hero-title {
    font-size: 38px;
    line-height: 1.08;
  }

  .portfolio-hero-description {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.65;
  }

  .portfolio-hero-actions {
    display: grid;
    margin-top: 26px;
  }

  .portfolio-button {
    width: 100%;
  }

  .portfolio-cases {
    padding: 42px 0 50px;
  }

  .portfolio-cases-title {
    margin-bottom: 26px;
    font-size: 34px;
  }

  .portfolio-case {
    display: block;
    min-height: 0;
    padding: 10px;
  }

  .portfolio-case-media {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .portfolio-case-media img {
    min-height: 0;
  }

  .portfolio-case-body {
    min-height: 188px;
    padding: 20px 14px 14px;
  }

  .portfolio-case-title {
    font-size: 18px;
  }

  .portfolio-closing-cta {
    padding: 28px 0;
  }

  .portfolio-closing-cta-inner {
    display: block;
    min-height: 0;
    padding: 36px 32px 32px;
    border-radius: 30px;
  }

  .portfolio-closing-cta-inner::before {
    width: 100%;
    background-image: url("assets/img/cta-pattern-mobile.svg");
    background-position: center top;
    background-size: cover;
  }

  .portfolio-closing-cta-inner::after {
    display: none;
  }

  .portfolio-closing-cta-title {
    font-size: 43px;
    line-height: 0.98;
    letter-spacing: normal;
  }

  .portfolio-closing-cta-content {
    margin-top: 30px;
  }

  .portfolio-closing-cta-subtitle {
    font-size: 18px;
  }

  .portfolio-closing-cta-description {
    font-size: 16px;
    line-height: 1.45;
  }

  .portfolio-closing-cta-actions {
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }

  .portfolio-closing-cta-actions .portfolio-button {
    min-width: 0;
  }

  .portfolio-seo {
    padding: 32px 0 64px;
  }

  .portfolio-seo-layout,
  .portfolio-seo-layout--single {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .portfolio-seo-toc,
  .portfolio-seo-article {
    width: 100%;
    padding: 22px;
  }

  .portfolio-seo-toc-sticky {
    position: static;
  }

  .portfolio-seo-toc-list {
    max-height: 280px;
  }

  .portfolio-seo-article .entry-content {
    font-size: 15px;
    line-height: 1.75;
  }

  .portfolio-seo-article .entry-content h2 {
    font-size: 28px;
  }

  .portfolio-seo-article .entry-content h3 {
    font-size: 24px;
  }

  .portfolio-seo-article.is-collapsible-ready.is-collapsed .portfolio-seo-body {
    max-height: 560px;
  }

  .portfolio-lightbox {
    padding: 16px;
  }

  .portfolio-lightbox-dialog {
    padding: 46px 10px 10px;
    border-radius: 16px;
  }
}

/*--------------------------------------------------------------
# HubSpot Forms — Figma Layout
--------------------------------------------------------------*/

/* Keep HubSpot responsible for the fields while flattening its fieldsets so
   the theme can reproduce the approved visual order. */
.appointment-cta .appointment-cta-form form,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.appointment-cta .appointment-cta-form form>fieldset,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) form>fieldset {
  display: contents !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.appointment-cta .appointment-cta-form .hs-form-field,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field {
  float: none !important;
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Full name and email. */
.appointment-cta .appointment-cta-form .hs-form-field:has(input[type="text"]):not(:has(input[type="tel"])):not( :has(select)),
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="text"]):not(:has(input[type="tel"])):not( :has(select)) {
  grid-column: 1;
  grid-row: 1;
}

.appointment-cta .appointment-cta-form .hs-form-field:has(input[type="email"]),
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="email"]) {
  grid-column: 2;
  grid-row: 1;
}

/* Service selector. */
.appointment-cta .appointment-cta-form .hs-form-field:has(select):not(:has(input[type="tel"])) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(select):not(:has(input[type="tel"])) {
  grid-column: 1;
  grid-row: 2;
}

/* HubSpot international phone field contains its own country selector. */
.appointment-cta .appointment-cta-form .hs-form-field:has(input[type="tel"]) {
  grid-column: 1 / -1;
  grid-row: 3;
}

.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="tel"]) {
  grid-column: 2;
  grid-row: 2;
}

.appointment-cta .appointment-cta-form .hs-form-field:has(input[type="tel"])>.input,
.appointment-cta .appointment-cta-form .hs-form-field:has(input[type="tel"]) .hs-fieldtype-intl-phone,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="tel"])>.input,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="tel"]) .hs-fieldtype-intl-phone {
  display: grid !important;
  grid-template-columns: minmax(9.5rem, 0.38fr) minmax(0, 0.62fr);
  gap: 16px;
  width: 100% !important;
}

.appointment-cta .appointment-cta-form label,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) label {
  display: none !important;
}

.appointment-cta .appointment-cta-form .input,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .input {
  margin: 0 !important;
}

.appointment-cta .appointment-cta-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.appointment-cta .appointment-cta-form select,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid #ded3c6 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background-color: #fff !important;
  box-shadow: none !important;
  color: #363534 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.appointment-cta .appointment-cta-form select,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.5L10.5 2' stroke='%233D3B39' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 20px) center !important;
  background-repeat: no-repeat !important;
  background-size: 12px 8px !important;
}

.appointment-cta .appointment-cta-form input::placeholder,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) input::placeholder {
  color: #c5c2bf !important;
  opacity: 1 !important;
}

.appointment-cta .appointment-cta-form input:focus,
.appointment-cta .appointment-cta-form select:focus,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) input:focus,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) select:focus {
  border-color: #ff5f0a !important;
}

.appointment-cta .appointment-cta-form .hs_submit,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs_submit {
  grid-column: 1 / -1;
  margin: 6px 0 0 !important;
}

.appointment-cta .appointment-cta-form .actions,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .actions {
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
}

.appointment-cta .appointment-cta-form .actions::after,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .actions::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 22px;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  transform: translateY(-54%);
  pointer-events: none;
}

.appointment-cta .appointment-cta-form input[type="submit"],
.appointment-cta .appointment-cta-form .hs-button,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) input[type="submit"],
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-button {
  display: block !important;
  width: 319px !important;
  max-width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 0 58px 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ff5f0a !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer;
}

.appointment-cta .appointment-cta-form .hs-error-msgs,
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-error-msgs {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: #b42318;
  font-size: 12px;
}

.appointment-cta .appointment-cta-form form> :where(.legal-consent-container, .hs-richtext, .hs_recaptcha),
.service-main :where(.service-lead-form--hubspot, .service-hubspot-form) form> :where(.legal-consent-container, .hs-richtext, .hs_recaptcha) {
  grid-column: 1 / -1;
}

/* Footer CTA form card. */
.appointment-cta .appointment-cta-form-card {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 548px;
  min-height: 388px;
  padding: 52px 32px;
  border-radius: 24px;
}

.appointment-cta .appointment-cta-form,
.appointment-cta .appointment-cta-form>div {
  width: 100%;
}

/* Service-page form card. */
.service-main .service-lead {
  width: 100%;
  max-width: 1328px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

.service-main .service-lead>.service-lead-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 385px;
  padding: 48px;
  overflow: hidden;
  border-radius: 40px;
  background: #f7f4ee;
}

.service-main .service-lead>.service-lead-inner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 74%;
  background: url("assets/img/hubspot-form-pattern.svg") no-repeat left center / auto 100%;
  pointer-events: none;
}

.service-main .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  max-width: 930px !important;
  min-height: 289px;
  margin: 0 !important;
  padding: 40px 80px !important;
  border-radius: 24px;
  background: #fff !important;
}

.service-main .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) input[type="submit"],
.service-main .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-button {
  width: 216px !important;
  height: 55px !important;
  min-height: 55px !important;
  font-size: 16px !important;
}

@media screen and (max-width: 63.99em) {
  .appointment-cta .appointment-cta-form-card {
    min-height: 0;
    padding: 28px 16px;
  }

  .appointment-cta .appointment-cta-form form,
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) form {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-cta .appointment-cta-form .hs-form-field,
  .appointment-cta .appointment-cta-form .hs-form-field:has(input),
  .appointment-cta .appointment-cta-form .hs-form-field:has(select),
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field,
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input),
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(select) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .appointment-cta .appointment-cta-form .hs-form-field:has(input[type="tel"])>.input,
  .appointment-cta .appointment-cta-form .hs-form-field:has(input[type="tel"]) .hs-fieldtype-intl-phone,
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="tel"])>.input,
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-form-field:has(input[type="tel"]) .hs-fieldtype-intl-phone {
    grid-template-columns: minmax(7.5rem, 0.4fr) minmax(0, 0.6fr);
    gap: 10px;
  }

  .appointment-cta .appointment-cta-form input[type="submit"],
  .appointment-cta .appointment-cta-form .hs-button,
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) input[type="submit"],
  .service-main :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-button {
    width: 100% !important;
  }

  .service-main .service-lead {
    padding: 0 0 40px;
  }

  .service-main .service-lead>.service-lead-inner {
    min-height: 0;
    padding: 24px 16px;
    border-radius: 24px;
  }

  .service-main .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) {
    min-height: 0;
    padding: 24px 16px !important;
    border-radius: 20px;
  }
}

/*--------------------------------------------------------------
# Service Lead CTA — Figma Desktop Layout
--------------------------------------------------------------*/
@media screen and (min-width: 64em) {
  .service-main {
    overflow: visible;
  }

  .service-main .service-hero {
    position: relative;
    z-index: 1;
  }

  .service-main .service-lead {
    --service-lead-overlap: 18px;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: calc(-1 * var(--service-lead-overlap)) 0 0;
    padding: 0;
  }

  .service-main .service-lead>.service-lead-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    border-radius: 40px;
    background-color: #f7f4ee;
  }

  .service-main .service-lead>.service-lead-inner::before {
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: left top;
    background-size: auto 100%;
  }

  .service-main .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) {
    width: 100% !important;
    max-width: 1072px !important;
    min-height: 287px;
    margin: 0 !important;
    padding: 40px 80px !important;
    border-radius: 24px;
  }
}

/*--------------------------------------------------------------
# Hair Transplant Lead Form + Specs — Desktop Figma Layout
--------------------------------------------------------------*/
@media screen and (min-width: 64em) {
  .service-main-transplant .service-lead {
    --service-lead-overlap: 18px;

    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1440px;
    margin: calc(-1 * var(--service-lead-overlap)) auto 0;
    padding: 0;
  }

  .service-main-transplant .service-lead>.service-lead-inner {
    width: 100%;
    max-width: 1440px;
    min-height: clamp(385px, 37.708vw, 543px);
    margin: 0 auto;
    padding: clamp(48px, 5vw, 72px) clamp(72px, 12.778vw, 184px) 0;
    align-items: flex-start;
    justify-content: center;
    border-radius: 40px;
    background-color: #f8f6f2;
  }

  .service-main-transplant .service-lead>.service-lead-inner::before {
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }

  .service-main-transplant .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) {
    width: 100% !important;
    max-width: 1072px !important;
    min-height: 287px;
    margin: 0 !important;
    padding: 40px 80px !important;
    border-radius: 24px;
    background: #fff !important;
  }

  .service-main-transplant .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) input[type="submit"],
  .service-main-transplant .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) .hs-button {
    width: 254px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .service-main-transplant .service-lead :where(.service-lead-form--hubspot, .service-hubspot-form) .actions::after {
    right: 32px;
    font-size: 22px;
  }

  /* At a Glance overlaps the bottom of the lead form section. */
  .service-main-transplant .service-specs {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1440px;
    margin: -112px auto 0;
    padding: 72px 72px 64px;
    background: #fff;
    border-radius: 40px 40px 0 0;
  }

  .service-main-transplant .service-specs-inner {
    width: 100%;
    max-width: 1296px;
    margin: 0 auto;
  }

  .service-main-transplant .service-specs-title {
    margin: 0 0 48px;
  }

  .service-main-transplant .service-spec-grid {
    gap: 12px;
  }
}

/*--------------------------------------------------------------
# Hair Transplant Hero — Figma Split Layout
--------------------------------------------------------------*/
.service-main-transplant .service-hero-transplant {
  width: min(1296px, calc(100% - 32px));
  margin: 48px auto;
  padding: 0;
}

.service-main-transplant .service-hero-transplant-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.service-main-transplant .service-hero-transplant-content,
.service-main-transplant .service-hero-transplant-media {
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
}

.service-main-transplant .service-hero-transplant-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 96px 72px 72px;
  background: #f8f7f4;
}

.service-main-transplant .service-hero-transplant-copy {
  width: 100%;
  min-width: 0;
}

.service-main-transplant .service-hero-transplant .service-hero-title {
  max-width: 510px;
  margin: 0 0 28px;
  color: #1a1919;
  font-family: var(--padra-font-display);
  font-size: clamp(46px, 3.5vw, 52px);
  font-weight: var(--padra-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.service-main-transplant .service-hero-transplant .service-hero-text {
  max-width: 500px;
  margin: 0;
  color: #676462;
  font-family: var(--padra-font-body);
  font-size: 16px;
  font-weight: var(--padra-weight-regular);
  line-height: 1.3;
}

.service-main-transplant .service-hero-transplant .service-hero-text p {
  margin: 0;
}

.service-main-transplant .service-hero-transplant .service-quote {
  max-width: 500px;
  margin: 36px 0 0;
  padding: 4px 0 4px 16px;
  border: 0;
  border-left: 1px solid #ff6815;
  color: #3f3d3b;
  font-family: var(--padra-font-body);
  font-size: 16px;
  font-weight: var(--padra-weight-regular);
  line-height: 1.4;
}

.service-main-transplant .service-hero-transplant .service-rating {
  display: flex;
  width: calc(100% + 48px);
  min-height: 120px;
  margin: 36px -24px 0;
  padding: 20px 48px;
  align-items: center;
  justify-content: center;
  gap: 54px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 0 rgba(26, 25, 25, 0.02);
  backdrop-filter: none;
}

.service-main-transplant .service-hero-transplant .service-rating-logo {
  display: block;
  width: 126px;
  max-width: 42%;
  height: auto;
  flex: 0 0 auto;
}

.service-main-transplant .service-hero-transplant .service-rating-body {
  min-width: 0;
}

.service-main-transplant .service-hero-transplant .service-rating-score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #3d3b39;
  font-family: var(--padra-font-display);
  font-size: 42px;
  font-weight: var(--padra-weight-light);
  line-height: 1;
  white-space: nowrap;
}

.service-main-transplant .service-hero-transplant .service-rating-score svg {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #c6aa76;
}

.service-main-transplant .service-hero-transplant .service-rating-star-label {
  font-size: 0.78em;
}

.service-main-transplant .service-hero-transplant .service-rating-text {
  margin: 6px 0 0;
  color: #4d4c4b;
  font-family: var(--padra-font-body);
  font-size: 16px;
  line-height: 1.3;
}

.service-main-transplant .service-hero-transplant-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 350 / 387;
  background: #ece9e4;
}

.service-main-transplant .service-hero-transplant-poster,
.service-main-transplant .service-hero-transplant-video,
.service-main-transplant .service-hero-transplant-player,
.service-main-transplant .service-hero-transplant-player .plyr,
.service-main-transplant .service-hero-transplant-player .plyr__video-wrapper {
  width: 100%;
  height: 100%;
}

.service-main-transplant .service-hero-transplant-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: opacity 220ms ease;
}

.service-main-transplant .service-hero-transplant-player {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.service-main-transplant .service-hero-transplant-video {
  display: block;
  object-fit: cover;
  object-position: center;
}

.service-main-transplant .service-hero-transplant-media.is-video-active .service-hero-transplant-poster {
  opacity: 0;
  pointer-events: none;
}

.service-main-transplant .service-hero-transplant-media.is-video-active .service-hero-transplant-player {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

/* Autoplay video is progressively enhanced by Plyr, but remains visible even
 * if the JavaScript enhancement is delayed. The video element itself carries
 * the poster, so there is no empty frame while media buffers. */
.service-main-transplant .service-hero-transplant-media.is-autoplay .service-hero-transplant-poster {
  opacity: 0;
  pointer-events: none;
}

.service-main-transplant .service-hero-transplant-media.is-autoplay .service-hero-transplant-player {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.service-main-transplant .service-hero-transplant-player .plyr {
  --plyr-color-main: #ff6815;
  border-radius: 24px;
}

.service-main-transplant .service-hero-transplant-player .plyr__video-wrapper {
  padding-bottom: 0 !important;
  background: #1a1919;
}

.service-main-transplant .service-hero-transplant-player .plyr video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-main-transplant .service-hero-transplant-player .plyr__control--overlaid {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #ff6815;
  box-shadow: 0 12px 30px rgba(26, 25, 25, 0.14);
}

.service-main-transplant .service-hero-transplant-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  color: #ff6815;
  box-shadow: 0 12px 30px rgba(26, 25, 25, 0.14);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.service-main-transplant .service-hero-transplant-play:hover,
.service-main-transplant .service-hero-transplant-play:focus-visible {
  background: #ff6815;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.04);
}

.service-main-transplant .service-hero-transplant-play:focus-visible {
  outline: 2px solid #ff6815;
  outline-offset: 4px;
}

.service-main-transplant .service-hero-transplant-play[hidden] {
  display: none !important;
}

.service-main-transplant .service-hero-transplant.has-no-media .service-hero-transplant-inner {
  grid-template-columns: minmax(0, 636px);
  justify-content: center;
}

@media screen and (max-width: 63.99em) {
  .service-main-transplant .service-hero-transplant {
    width: min(720px, calc(100% - 48px));
    margin: 32px auto 40px;
  }

  .service-main-transplant .service-hero-transplant-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .service-main-transplant .service-hero-transplant-media {
    order: 1;
  }

  .service-main-transplant .service-hero-transplant-content {
    order: 2;
    padding: 56px 56px 32px;
  }

  .service-main-transplant .service-hero-transplant .service-hero-title {
    max-width: none;
    font-size: 40px;
    line-height: 1.12;
  }

  .service-main-transplant .service-hero-transplant .service-hero-text,
  .service-main-transplant .service-hero-transplant .service-quote {
    max-width: none;
  }
}

@media screen and (max-width: 40em) {
  .service-main-transplant .service-hero-transplant {
    width: calc(100% - 64px);
    margin: 48px auto;
  }

  .service-main-transplant .service-hero-transplant-content,
  .service-main-transplant .service-hero-transplant-media {
    border-radius: 24px;
  }

  .service-main-transplant .service-hero-transplant-content {
    padding: 32px 48px 8px;
  }

  .service-main-transplant .service-hero-transplant .service-hero-title {
    margin-bottom: 28px;
    font-size: 36px;
    line-height: 1.15;
  }

  .service-main-transplant .service-hero-transplant .service-hero-text {
    font-size: 15px;
    line-height: 1.35;
  }

  .service-main-transplant .service-hero-transplant .service-quote {
    margin-top: 36px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 16px;
    line-height: 1.35;
  }

  .service-main-transplant .service-hero-transplant .service-rating {
    width: calc(100% + 48px);
    min-height: 215px;
    margin: 32px -24px 0;
    padding: 30px 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
  }

  .service-main-transplant .service-hero-transplant .service-rating-logo {
    width: 126px;
    max-width: none;
  }

  .service-main-transplant .service-hero-transplant .service-rating-score {
    gap: 9px;
    font-size: 46px;
  }

  .service-main-transplant .service-hero-transplant .service-rating-score svg {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .service-main-transplant .service-hero-transplant .service-rating-text {
    margin-top: 8px;
    font-size: 16px;
  }

  .service-main-transplant .service-hero-transplant-play,
  .service-main-transplant .service-hero-transplant-player .plyr__control--overlaid {
    width: 60px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-main-transplant .service-hero-transplant-poster,
  .service-main-transplant .service-hero-transplant-player,
  .service-main-transplant .service-hero-transplant-play {
    transition: none;
  }
}

/* Hide Hair Transplant Timeline progress line */
.service-main-transplant .service-timeline-progress-line {
  display: none !important;
}

/*--------------------------------------------------------------
# Reviews Desktop Scroll Indicator
--------------------------------------------------------------*/
@media screen and (min-width: 64em) {
  .home-reviews-inner .home-reviews-slider {
    position: relative;
    padding-inline-end: 70px;
  }

  .home-reviews-inner .home-reviews-slider::before,
  .home-reviews-inner .home-reviews-slider::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    z-index: 5;
    display: block;
    border-radius: 100px;
    pointer-events: none;
  }

  /* Scroll track */
  .home-reviews-inner .home-reviews-slider::before {
    top: 21px;
    inset-inline-end: 2px;
    width: 2px;
    height: calc(100% - 42px);
    background: #fff;
  }

  /* Gold scroll thumb */
  .home-reviews-inner .home-reviews-slider::after {
    top: 79px;
    width: 6px;
    height: 88px;
    border: 0 solid #f2efed;
    background: #e0c99d;
  }
}

@keyframes home-reviews-scroll-thumb {
  from {
    top: 21px;
  }

  to {
    top: calc(100% - 109px);
  }
}

@media screen and (min-width: 64em) {
  .home-reviews-inner .home-reviews-slider::after {
    top: 21px;
    animation: home-reviews-scroll-thumb 30s linear infinite;
  }

  .home-reviews-inner .home-reviews-slider:hover::after {
    animation-play-state: paused;
  }
}

@media screen and (min-width: 64em) and (prefers-reduced-motion: reduce) {
  .home-reviews-inner .home-reviews-slider::after {
    animation: none;
  }
}

/*--------------------------------------------------------------
# About Timeline — Five Item Desktop Slider
--------------------------------------------------------------*/
.about-timeline-nav {
  display: none;
}

@media screen and (min-width: 64em) {
  .about-timeline-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .about-timeline-viewport::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    z-index: 0;
    border-top: 1px dashed rgba(128, 126, 125, 1);
    pointer-events: none;
  }

  .about-timeline-list {
    position: relative;
    z-index: 1;
    display: flex;
    grid-template-columns: none;
    width: 100%;
    height: 620px;
    min-height: 620px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .about-timeline-list::before {
    content: none;
  }

  .about-timeline-item {
    position: relative;
    flex: 0 0 20%;
    width: 20%;
    min-width: 0;
    height: 620px;
    padding: 0 clamp(12px, 1.5vw, 24px);
  }

  .about-timeline-dot {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .about-timeline-content,
  .timeline-top .about-timeline-content,
  .timeline-bottom .about-timeline-content {
    position: absolute;
    left: 50%;
    width: calc(100% - 32px);
    max-width: 240px;
    overflow: hidden;
    transform: translateX(-50%);
  }

  .timeline-top .about-timeline-content {
    top: auto;
    bottom: calc(50% + 35px);
  }

  .timeline-bottom .about-timeline-content {
    top: calc(50% + 35px);
    bottom: auto;
  }

  .about-timeline-year {
    font-family: "Montserrat";
    font-size: 3em;
    line-height: 1;
  }

  .about-timeline-title {
    display: -webkit-box;
    min-height: 2.4em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .about-timeline-text {
    display: -webkit-box;
    max-width: 240px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  .about-timeline.has-slider .about-timeline-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
  }

  .about-timeline-prev,
  .about-timeline-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e4e0da;
    border-radius: 50%;
    background: #fff;
    color: #4d4c4b;
    cursor: pointer;
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .about-timeline-prev:hover,
  .about-timeline-next:hover,
  .about-timeline-prev:focus-visible,
  .about-timeline-next:focus-visible {
    border-color: #c6aa76;
    background: #f8f6f2;
    color: #c6aa76;
  }

  html[dir="rtl"] .about-timeline-prev svg,
  html[dir="rtl"] .about-timeline-next svg {
    transform: scaleX(-1);
  }
}

@media screen and (min-width: 64em) and (prefers-reduced-motion: reduce) {
  .about-timeline-list {
    transition: none;
  }
}

/* Contact information card — Figma
-------------------------------------------------------------- */

.contact-info {
  box-sizing: border-box;

  min-width: 0;

  padding: 32px 24px;

  overflow: hidden;

  background: #f8f6f2;

  border: 0;
  border-radius: 24px;
}

.contact-info-title {
  margin: 0 0 30px;

  color: #2f2e2d;

  font-family: var(--padra-font-display);
  font-size: 30px;
  font-weight: var(--padra-weight-light);
  line-height: 1.15;
}

.contact-info-title::after {
  content: "";

  display: block;

  width: 98px;
  height: 1px;

  margin-top: 18px;

  background: #777471;
}

/* Default / mobile layout */

.contact-info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  gap: 28px;

  min-width: 0;
  width: 100%;
}

.contact-info-primary,
.contact-info-secondary {
  min-width: 0;
}

/* Contact rows */

.contact-info-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
  margin: 0 0 14px;
  color: #3b3b3d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
}

.contact-info-row:last-child {
  margin-bottom: 0;
}

.contact-info-row--address {
  align-items: start;

  margin-top: 30px;
}

.contact-info-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  margin: 0;

  background: #fff;

  border-radius: 50%;
}

.contact-info-icon {
  display: block;

  flex: none;

  margin: 0;

  color: #92908d;
}

.contact-info-row> :not(.contact-info-icon-wrap) {
  min-width: 0;
}

.contact-info-row--address> :not(.contact-info-icon-wrap) {
  padding-top: 6px;
}

.contact-info-row a {
  min-width: 0;

  color: #3b3b3d;

  text-decoration: none;

  overflow-wrap: anywhere;

  transition: color 0.2s ease;
}

.contact-info-row a:hover,
.contact-info-row a:focus {
  color: #f47b20;
}

/* Secondary information */

.contact-info-group {
  min-width: 0;
  margin: 0;
}

.contact-info-group+.contact-info-group {
  margin-top: 28px;
}

.contact-info-group-label {
  display: block;
  margin: 0 0 12px;
  color: #3b3b3d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.contact-info-row--hours {
  align-items: start;

  margin: 0;
}

.contact-info-row--hours> :not(.contact-info-icon-wrap) {
  padding-top: 2px;
}

/* Social */

.contact-info-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin: 12px 0 0;
}

.contact-info-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  color: #85827f;

  background: #fff;

  border-radius: 50%;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.contact-info-social a:hover,
.contact-info-social a:focus {
  color: #fff;

  background: #f47b20;
}

/* Map */

.contact-map {
  min-width: 0;
  min-height: 260px;

  overflow: hidden;

  border-radius: 24px;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

/* Contact information — Desktop
-------------------------------------------------------------- */

@media screen and (min-width: 64em) {
  .contact-info {
    min-height: 400px;

    padding: 24px 72px;

    border-radius: 16px;
  }

  .contact-info-title {
    margin-bottom: 30px;

    font-size: 36px;
  }

  /*
   * Main Figma layout:
   *
   * Left column:
   * Email / Phones
   *
   * Right column:
   * Working hours / Social
   *
   * Address:
   * Full width below both columns.
   *
   * display: contents allows the existing PHP structure to remain
   * unchanged while its rows participate in the same parent grid.
   */

  .contact-info-layout {
    display: grid;

    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);

    grid-auto-flow: row dense;

    column-gap: 24px;
    row-gap: 12px;

    width: 100%;
  }

  .contact-info-primary,
  .contact-info-secondary {
    display: contents;
  }

  /*
   * Primary items always use the first logical column.
   * In RTL this naturally mirrors to the right-hand side.
   */

  .contact-info-primary>.contact-info-row:not(.contact-info-row--address) {
    grid-column: 1;

    width: 100%;

    margin: 0;
  }

  /*
   * Secondary information fills the second column.
   * Dense grid flow pairs it with primary rows above the address.
   */

  .contact-info-secondary>.contact-info-group {
    grid-column: 2;

    width: 100%;

    margin: 0;
  }

  /*
   * Address is full width exactly like the Figma 504px row.
   */

  .contact-info-primary>.contact-info-row--address {
    grid-column: 1 / -1;

    width: 100%;

    margin: 12px 0 0;
  }

  /*
   * Working hours:
   *
   * Icon      Working hours:
   *           SAT-THU ...
   *           FRI ...
   */

  .contact-info-secondary>.contact-info-group:first-child {
    display: grid;

    grid-template-columns: 38px minmax(0, 1fr);

    column-gap: 16px;
    row-gap: 4px;

    align-items: start;
  }

  .contact-info-secondary>.contact-info-group:first-child>.contact-info-group-label {
    grid-column: 2;
    grid-row: 1;

    align-self: center;

    margin: 0;
  }

  .contact-info-secondary>.contact-info-group:first-child>.contact-info-row--hours {
    display: contents;
  }

  .contact-info-secondary>.contact-info-group:first-child>.contact-info-row--hours>.contact-info-icon-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;

    align-self: start;

    margin: 0;
  }

  .contact-info-secondary>.contact-info-group:first-child>.contact-info-row--hours> :not(.contact-info-icon-wrap) {
    grid-column: 2;
    grid-row: 2;

    min-width: 0;

    padding: 0;
  }

  /*
   * Follow us:
   * Keep the label and icons on one visual line.
   */

  .contact-info-secondary>.contact-info-group:last-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
  }

  .contact-info-secondary>.contact-info-group:last-child>.contact-info-group-label {
    flex: 0 0 auto;

    margin: 0;
  }

  .contact-info-secondary>.contact-info-group:last-child>.contact-info-social {
    flex: 1 1 auto;

    margin: 0;
  }

  /*
   * When a third primary contact row exists, align the social block
   * beside that row instead of leaving the right column too high.
   */

  .contact-info-layout:has(.contact-info-primary > .contact-info-row:not(.contact-info-row--address):nth-child(3)) .contact-info-secondary>.contact-info-group:last-child {
    grid-row: 3;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 400px;

    border-radius: 16px;
  }
}

/* Service Branch Contact Info
-------------------------------------------------------------- */

.service-branch-contact {
  padding: clamp(56px, 6vw, 96px) 24px;

  background: #fff;
}

.service-branch-contact-inner {
  width: min(100%, 1440px);

  margin: 0 auto;
}

.service-branch-contact-title {
  margin-bottom: clamp(32px, 4vw, 56px);

  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
}

.service-branch-contact .contact-slider {
  margin: 0;
}

.service-branch-contact .contact-block-body {
  padding-top: clamp(28px, 3vw, 48px);
}

/* Service Branch Contact — Desktop
-------------------------------------------------------------- */

@media screen and (min-width: 64em) {
  /*
   * Figma proportions:
   * Contact card is slightly wider than the map.
   */

  .service-branch-contact .contact-block-body {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 16px;
  }

  .service-branch-contact .contact-block-body.has-map {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    align-items: stretch;
  }

  .service-branch-contact .contact-info,
  .service-branch-contact .contact-map {
    min-width: 0;
    height: 100%;
  }

  /*
   * Branch contact card layout matches the Figma component:
   * - primary contact rows on the left
   * - Working hours and Follow us stacked on the right
   * - address spanning the full width below both columns
   */

  .service-branch-contact .contact-info {
    min-height: 406px;
    padding: 32px 56px;
  }

  .service-branch-contact .contact-info-title {
    margin-bottom: 34px;
  }

  .service-branch-contact .contact-info-title::after {
    width: min(390px, 100%);
  }

  .service-branch-contact .contact-info-layout {
    display: block;

    width: 100%;
  }

  .service-branch-contact .contact-info-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr);
    align-items: start;

    gap: 40px;

    min-width: 0;
  }

  .service-branch-contact .contact-info-primary,
  .service-branch-contact .contact-info-secondary {
    display: flex;
    flex-direction: column;

    min-width: 0;
  }

  .service-branch-contact .contact-info-primary {
    gap: 30px;
  }

  .service-branch-contact .contact-info-primary>.contact-info-row {
    width: 100%;

    margin: 0;
  }

  .service-branch-contact .contact-info-secondary {
    gap: 26px;
  }

  .service-branch-contact .contact-info-secondary>.contact-info-group,
  .service-branch-contact .contact-info-secondary>.contact-info-group:first-child,
  .service-branch-contact .contact-info-secondary>.contact-info-group:last-child {
    display: block;

    width: 100%;

    margin: 0;
  }

  .service-branch-contact .contact-info-secondary>.contact-info-group>.contact-info-group-label,
  .service-branch-contact .contact-info-secondary>.contact-info-group:first-child>.contact-info-group-label,
  .service-branch-contact .contact-info-secondary>.contact-info-group:last-child>.contact-info-group-label {
    display: block;

    margin: 0 0 12px;
  }

  .service-branch-contact .contact-info-secondary>.contact-info-group:first-child>.contact-info-row--hours {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;

    gap: 22px;

    margin: 0;
  }

  .service-branch-contact .contact-info-secondary>.contact-info-group:first-child>.contact-info-row--hours>.contact-info-icon-wrap {
    grid-column: auto;
    grid-row: auto;

    margin: 0;
  }

  .service-branch-contact .contact-info-secondary>.contact-info-group:first-child>.contact-info-row--hours> :not(.contact-info-icon-wrap) {
    grid-column: auto;
    grid-row: auto;

    min-width: 0;

    padding-top: 1px;
  }

  .service-branch-contact .contact-info-hours {
    line-height: 1.45;
  }

  .service-branch-contact .contact-info-secondary>.contact-info-group:last-child>.contact-info-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
  }

  .service-branch-contact .contact-info-row--address {
    width: 100%;

    margin: 32px 0 0;
  }

  .service-branch-contact .contact-info-address {
    line-height: 1.45;
  }
}

/* Service Branch Contact — Tablet / Mobile
-------------------------------------------------------------- */

@media screen and (max-width: 63.99em) {
  .service-branch-contact {
    padding: 48px 16px;
  }

  .service-branch-contact-title {
    margin-bottom: 28px;

    font-size: 34px;
  }

  .service-branch-contact .contact-block-body,
  .service-branch-contact .contact-block-body.has-map {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 24px;
  }

  .service-branch-contact .contact-info {
    padding: 32px 24px;

    border-radius: 24px;
  }

  .service-branch-contact .contact-info-layout {
    grid-template-columns: minmax(0, 1fr);

    gap: 28px;
  }

  .service-branch-contact .contact-info-columns {
    display: contents;
  }

  .service-branch-contact .contact-info-primary,
  .service-branch-contact .contact-info-secondary {
    display: block;
  }

  .service-branch-contact .contact-info-primary {
    order: 1;
  }

  .service-branch-contact .contact-info-layout>.contact-info-row--address {
    order: 2;

    margin-top: 2px;
  }

  .service-branch-contact .contact-info-secondary {
    order: 3;
  }

  .service-branch-contact .contact-info-primary>.contact-info-row {
    margin-bottom: 14px;
  }

  .service-branch-contact .contact-info-primary>.contact-info-row:last-child {
    margin-bottom: 0;
  }

  .service-branch-contact .contact-info-row--address {
    margin-top: 2px;
  }

  .service-branch-contact .contact-info-group+.contact-info-group {
    margin-top: 28px;
  }

  .service-branch-contact .contact-info-social {
    margin-top: 12px;
  }

  .service-branch-contact .contact-map,
  .service-branch-contact .contact-map iframe {
    min-height: 320px;

    border-radius: 24px;
  }
}

/* Service Branch Contact — Small Mobile
-------------------------------------------------------------- */

@media screen and (max-width: 30em) {
  .service-branch-contact {
    padding-inline: 12px;
  }

  .service-branch-contact .contact-info {
    padding: 28px 20px;
  }

  .service-branch-contact .contact-info-title {
    font-size: 30px;
  }

  .service-branch-contact .contact-info-row {
    grid-template-columns: 38px minmax(0, 1fr);

    gap: 16px;
  }

  .service-branch-contact .contact-map,
  .service-branch-contact .contact-map iframe {
    min-height: 280px;
  }
}

/* Mobile Sticky Footer Navigation */
.mobile-footer-nav,
.mobile-footer-dialog {
  display: none;
}

@media screen and (max-width: 63.9375em) {
  body.has-mobile-footer-nav {
    padding-bottom: calc(174px + env(safe-area-inset-bottom));
  }

  html.mobile-footer-dialog-open,
  html.mobile-footer-dialog-open body {
    overflow: hidden;
  }

  .mobile-footer-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    display: block;
    padding: 24px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fffffff8;
    box-shadow: 0 -8px 30px rgb(0 0 0 / 8%);
  }

  .mobile-footer-nav__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 9vw, 38px);
    margin-bottom: 24px;
  }

  .mobile-footer-nav__action {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #555;
    background: #f8f6f2;
    box-shadow: none;
    cursor: pointer;
  }

  .mobile-footer-nav__action:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .mobile-footer-nav__action img,
  .mobile-footer-nav__action svg {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .mobile-footer-nav__action svg,
  .mobile-footer-nav__cta svg,
  .mobile-footer-dialog__branch svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-footer-nav__cta {
    display: flex;
    width: min(100%, 302px);
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    padding: 12px 24px;
    border-radius: 999px;
    color: #fff;
    background: #ff6815;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
  }

  .mobile-footer-nav__cta svg {
    width: 22px;
    height: 22px;
  }

  .mobile-footer-dialog:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 16px calc(190px + env(safe-area-inset-bottom));
  }

  .mobile-footer-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 48%);
  }

  .mobile-footer-dialog__panel {
    position: relative;
    width: min(100%, 420px);
    max-height: min(60vh, 440px);
    overflow: auto;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgb(0 0 0 / 20%);
  }

  .mobile-footer-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  .mobile-footer-dialog__header h2 {
    margin: 0;
    color: #333;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
  }

  .mobile-footer-dialog__close {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #333;
    background: #f3f1ef;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-footer-dialog__branches {
    display: grid;
    gap: 10px;
  }

  .mobile-footer-dialog__branches[hidden] {
    display: none;
  }

  .mobile-footer-dialog__branch {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #ece7e2;
    border-radius: 12px;
    color: #333;
    background: #fff;
    font-size: 16px;
    text-decoration: none;
  }

  .mobile-footer-dialog__branch svg {
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 22.5em) {
  .mobile-footer-nav__actions {
    gap: 20px;
  }
}

/*--------------------------------------------------------------
# Hair Transplant FAQ
--------------------------------------------------------------*/

.service-main-transplant .service-faq {
  margin: 0 0 80px;
  padding: 72px 16px 68px;
  background: #fff;
  border-radius: 62px;
}

.service-main-transplant .service-faq-inner {
  max-width: 1090px;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
}

.service-main-transplant .service-faq-title {
  margin: 0 0 40px;
  color: #4d4c4b;
  font-family: canela, serif;
  font-size: clamp(40px, 3.62vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.service-main-transplant .service-faq-tabs {
  display: flex;
  max-width: 480px;
  margin: 0 auto 56px;
  gap: 12px;
}

.service-main-transplant .service-faq-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 54px;
  padding: 0 24px;
  border: 1px dashed #cfc6b8;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.service-main-transplant .service-faq-tab.is-active {
  border-color: #5a5a5a;
  background: #5a5a5a;
  color: #fff;
}

.service-main-transplant .service-faq-tab:focus-visible {
  outline: 2px solid #ff671d;
  outline-offset: 3px;
}

.service-main-transplant .service-faq-list {
  max-width: 1090px;
  margin: 0 auto;
  padding: 0;
}

.service-main-transplant .service-faq-item {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5e2de;
  border-radius: 20px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.service-main-transplant .service-faq-item[hidden] {
  display: none;
}

.service-main-transplant .service-faq-item[open],
.service-main-transplant .service-faq-item.is-open {
  border-color: transparent;
  background: #f8f6f2;
}

.service-main-transplant .service-faq-question {
  display: flex;
  width: 100%;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 40px;
  border: 0;
  background: transparent;
  color: #333;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  list-style: none;
}

.service-main-transplant .service-faq-question::-webkit-details-marker {
  display: none;
}

.service-main-transplant .service-faq-question::marker {
  content: "";
}

.service-main-transplant .service-faq-item[open] .service-faq-question,
.service-main-transplant .service-faq-item.is-open .service-faq-question {
  min-height: 72px;
  padding-bottom: 10px;
}

.service-main-transplant .service-faq-question-text {
  flex: 1;
}

.service-main-transplant .service-faq-toggle {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.service-main-transplant .service-faq-toggle::before,
.service-main-transplant .service-faq-toggle::after {
  content: "";
  position: absolute;
  background: #1a1919;
}

.service-main-transplant .service-faq-toggle::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 1.5px;
}

.service-main-transplant .service-faq-toggle::after {
  top: 0;
  left: 7px;
  width: 1.5px;
  height: 16px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.service-main-transplant .service-faq-item[open] .service-faq-toggle::after,
.service-main-transplant .service-faq-item.is-open .service-faq-toggle::after {
  opacity: 0;
  transform: rotate(90deg);
}

.service-main-transplant .service-faq-answer {
  max-width: 930px;
  padding: 0 40px 48px;
  color: #4d4c4b;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.service-main-transplant .service-faq-answer p {
  margin: 0 0 16px;
}

.service-main-transplant .service-faq-answer p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 63.99em) {
  .service-main-transplant .service-faq {
    margin-bottom: 48px;
    padding: 56px 20px;
    border-radius: 40px;
  }

  .service-main-transplant .service-faq-inner {
    padding: 0;
  }

  .service-main-transplant .service-faq-title {
    margin-bottom: 32px;
    font-size: 40px;
  }

  .service-main-transplant .service-faq-tabs {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 40em) {
  .service-main-transplant .service-faq {
    margin-bottom: 32px;
    padding: 44px 16px;
    border-radius: 32px;
  }

  .service-main-transplant .service-faq-title {
    margin-bottom: 28px;
    font-size: 32px;
  }

  .service-main-transplant .service-faq-tabs {
    gap: 8px;
    margin-bottom: 32px;
  }

  .service-main-transplant .service-faq-tab {
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
  }

  .service-main-transplant .service-faq-question {
    min-height: 72px;
    padding: 18px 20px;
    font-size: 16px;
  }

  .service-main-transplant .service-faq-item[open] .service-faq-question,
  .service-main-transplant .service-faq-item.is-open .service-faq-question {
    min-height: 64px;
    padding-bottom: 8px;
  }

  .service-main-transplant .service-faq-answer {
    padding: 0 20px 28px;
    font-size: 15px;
  }
}

/*--------------------------------------------------------------
# Graft Calculator Tool
--------------------------------------------------------------*/

.graft-calculator-main {
  background-color: #f7f4ee;
  padding: 40px 0 80px;
  min-height: 100vh;
  color: #2b2a29;
  font-family: var(--padra-body-font), sans-serif;
}

.graft-calculator-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.graft-card {
  background: #ffffff;
  border-radius: 40px;
  padding: 56px 64px;
  margin-bottom: 36px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  text-align: center;
}

/* Breadcrumb & Hero */
.graft-breadcrumb {
  text-align: center;
  font-size: 13px;
  color: #4d4c4b;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.graft-hero-title {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 46px;
  font-weight: 300;
  text-align: center;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.2;
}

.graft-hero-subtitle {
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  color: #6e6b66;
  text-align: center;
  margin: 0 0 48px;
}

/* Stepper Indicator */
.graft-stepper {
  position: relative;
  max-width: 760px;
  margin: 0 auto 52px;
  padding: 14px 0;
}

.graft-stepper-track {
  position: absolute;
  top: 50%;
  left: 36px;
  right: 36px;
  height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(to right,
      #cfc9be 0,
      #cfc9be 6px,
      transparent 6px,
      transparent 12px);
  z-index: 1;
}

.graft-stepper-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #f26522;
  transition: width 0.35s ease;
}

.graft-stepper-items {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.graft-stepper-item {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fbf9f5;
  border: 1px solid #eae5db;
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 16px;
  color: #4a4845;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.graft-stepper-item:hover {
  background: #f3efe6;
}

.graft-stepper-item.is-active {
  background: #f26522;
  border-color: #f26522;
  color: #ffffff;
  box-shadow:
    0 0 0 5px #ffffff,
    0 0 0 7px #f26522;
}

.graft-stepper-item.is-completed {
  background: #f26522;
  border-color: #f26522;
  color: #ffffff;
}

/* Step Panels */
.graft-step-panel {
  display: none;
  animation: graftFadeIn 0.3s ease;
}

.graft-step-panel.is-active {
  display: block;
}

@keyframes graftFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.graft-step-heading {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  color: #1a1a1a;
  margin: 0 0 40px;
}

/* Option Grid */
.graft-options-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.graft-circle-option {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  background: #fbf9f6;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 16px;
  box-sizing: border-box;
}

.graft-circle-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.graft-circle-option.is-active {
  border-color: #cca978;
  background: #faf6ee;
}

.graft-circle-icon {
  color: #cca978;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.graft-circle-option.is-active .graft-circle-icon {
  color: #cca978;
}

.graft-circle-label {
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #2b2a29;
}

.graft-circle-text {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 22px;
  color: #2b2a29;
}

.graft-circle-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.graft-circle-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Pattern Options (Step 5) */
.graft-options-grid--patterns {
  max-width: 580px;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: center;
}

.graft-circle-option--pattern {
  width: 140px;
  height: 140px;
  padding: 0;
  background: transparent;
}

.graft-circle-option--pattern.is-active {
  border-color: #cca978;
}

/* Male Area / Depth Selector — Step 5 */
.graft-step5-mode[hidden] {
  display: none !important;
}

.graft-male-step5 {
  width: 100%;
  max-width: 620px;
  margin: 0 auto 44px;
}

.graft-male-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 270px;
  margin: 0 auto 32px;
}

.graft-male-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
}

.graft-male-depth-selector {
  width: 100%;
  max-width: 342px;
  margin: 0 auto 28px;
}

.graft-male-depth-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  direction: ltr;
}

.graft-male-depth-track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10%;
  left: 10%;
  height: 1px;
  background: #aaa59e;
  transform: translateY(-50%);
  z-index: 0;
}

.graft-male-depth-button {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #e0b979;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.graft-male-depth-button:hover:not(:disabled) {
  transform: scale(1.08);
}

.graft-male-depth-button.is-active {
  border-color: #ff681e;
  background: #ff681e;
}

.graft-male-depth-button:disabled {
  border-color: #ddd8d0;
  background: #f5f2ed;
  cursor: not-allowed;
  opacity: 0.55;
}

.graft-male-depth-button:focus-visible {
  outline: 2px solid #ff681e;
  outline-offset: 4px;
}

.graft-male-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 106px));
  justify-content: center;
  gap: 14px 16px;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.graft-male-area-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: #f7f4ee;
  color: #2b2a29;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.graft-male-area-button:hover {
  transform: translateY(-1px);
  background: #f1ece4;
}

.graft-male-area-button.is-active {
  background: #ff681e;
  color: #fff;
}

.graft-male-area-button:focus-visible {
  outline: 2px solid #ff681e;
  outline-offset: 3px;
}

/* Male Step 5 responsive */
@media screen and (max-width: 52em) {
  .graft-male-step5 {
    max-width: 360px;
    margin-bottom: 32px;
  }

  .graft-male-preview {
    min-height: 210px;
    margin-bottom: 26px;
  }

  .graft-male-preview img {
    width: 100%;
    max-width: 340px;
    max-height: 240px;
  }

  .graft-male-depth-selector {
    max-width: 300px;
    margin-bottom: 24px;
  }

  .graft-male-depth-button {
    width: 20px;
    height: 20px;
  }

  .graft-male-area-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
    max-width: 320px;
  }

  .graft-male-area-button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media screen and (max-width: 24em) {
  .graft-male-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graft-male-preview {
    min-height: 190px;
  }
}

/* Buttons */
.graft-step-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.graft-btn {
  height: 52px;
  padding: 0 40px;
  border: 0;
  border-radius: 104px;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.graft-btn--primary {
  background: #f26522;
  color: #ffffff;
  min-width: 150px;
}

.graft-btn--primary:hover {
  background: #df5514;
  color: #ffffff;
}

.graft-btn--secondary {
  background: #e5e2db;
  color: #383633;
  min-width: 130px;
}

.graft-btn--secondary:hover {
  background: #dad6ce;
  color: #201f1e;
}

.graft-btn:disabled,
.graft-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.graft-btn--outline {
  background: transparent;
  border: 1.5px solid #807e7d;
  color: #4d4c4b;
}

.graft-btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.graft-btn--outline .padra-know-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.graft-btn--outline .padra-know-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.graft-btn--outline .padra-know-icon .icon-tab path {
  transition:
    stroke 0.2s ease,
    fill 0.2s ease;
}

.graft-btn--outline:hover .padra-know-icon .icon-tab path:first-child {
  stroke: #fff;
}

.graft-btn--outline:hover .padra-know-icon .icon-tab path:last-child {
  fill: #fff;
}

.graft-btn--outline:hover {
  background: #2b2a29;
  color: #ffffff;
}

.graft-btn-spinner {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: graftSpin 0.7s linear infinite;
  display: inline-block;
}

@keyframes graftSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Form Inputs (Step 6) */
.graft-form-fields {
  max-width: 700px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.graft-field {
  position: relative;
  width: 100%;
}

.graft-form-fields .graft-input {
  width: 100%;
  height: 56px;
  padding: 0 30px;
  border: 1px solid #dedad2;
  border-radius: 104px;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  color: #2b2a29;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.graft-form-fields .graft-input:focus {
  border-color: #e0c99d;
}

.graft-form-fields .graft-select {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 30px;
  border: 1px solid #dedad2;
  border-radius: 104px;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 14px;
  color: #2b2a29;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.graft-form-fields .graft-select:focus {
  border-color: #e0c99d;
}

.graft-field--phone-group {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 14px;
}

.graft-select-wrap {
  position: relative;
  width: 100%;
}

.graft-select-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #706d68;
}

.graft-form-feedback {
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
  min-height: 20px;
}

.graft-form-feedback.is-error {
  color: #d32f2f;
}

.graft-form-feedback.is-success {
  color: #2e7d32;
}

/* Result Card */
.graft-result-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
}

.graft-result-icon {
  color: #f26522;
  margin-bottom: 18px;
}

.graft-result-title {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 32px;
  color: #1a1a1a;
  margin: 0 0 20px;
}

.graft-result-badge {
  display: inline-block;
  background: #fff6ee;
  border: 2px solid #f26522;
  border-radius: 9999px;
  padding: 12px 36px;
  margin-bottom: 28px;
}

.graft-result-number {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  color: #f26522;
}

.graft-result-details {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
}

.graft-result-item {
  font-size: 15px;
}

.graft-result-item-label {
  color: #75716b;
  margin-right: 6px;
}

.graft-result-item-val {
  font-weight: 600;
  color: #1a1a1a;
}

.graft-result-message {
  font-size: 15px;
  line-height: 1.6;
  color: #595550;
  margin-bottom: 32px;
}

.graft-result-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Intro Card */
.graft-tag {
  display: block;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #706d68;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.graft-card-title {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 40px;
  font-weight: 300;
  color: #1a1a1a;
  margin: 0 0 22px;
  line-height: 1.25;
}

.graft-card-title--center {
  text-align: center;
}

.graft-card-subtitle--center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
  color: #63605a;
  font-size: 15px;
  line-height: 1.6;
}

.graft-card-desc {
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #4a4845;
}

/* Comparison Table */
.graft-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0 20px;
}

.graft-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ebe5dc;
}

.graft-table thead th {
  background: #d8be93;
  color: #ffffff;
  font-weight: 600;
  padding: 18px 24px;
  text-align: left;
  border: none;
}

.graft-table tbody td {
  padding: 18px 24px;
  border-bottom: 1px solid #f0ede6;
  color: #3b3936;
}

.graft-table tbody tr:last-child td {
  border-bottom: none;
}

.graft-table tbody tr:nth-child(even) {
  background: #fdfcfb;
}

.graft-callout-note {
  border-left: 3px solid #f26522;
  padding: 14px 20px;
  background: #fcf9f5;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.65;
  color: #5c5852;
  margin-top: 16px;
}

.graft-callout-note p {
  margin: 0;
}

/* Split Card */
.graft-card--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.graft-split-text {
  font-size: 15px;
  line-height: 1.7;
  color: #4d4b47;
}

.graft-split-content {
  text-align: left;
}

.graft-bullet-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.graft-bullet-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #3d3b38;
}

.graft-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #caa876;
  font-size: 20px;
  line-height: 1;
  top: -1px;
}

.graft-split-media {
  border-radius: 28px;
  overflow: hidden;
}

.graft-split-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
}

/* FAQ / Knowledge Base */
.graft-faq-desktop {
  display: grid;
  grid-template-columns: 462px 1fr;
  gap: 48px;
  align-items: start;
}

.graft-faq-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.graft-faq-tab {
  width: 100%;
  padding: 14px 22px;
  border-radius: 9999px;
  border: none;
  background: #f5f2eb;
  color: #3b3937;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.graft-faq-tab:hover {
  background: #ece8df;
}

.graft-faq-tab.is-active {
  background: #d8be93;
  color: #ffffff;
}

.graft-faq-panels {
  padding: 8px 0;
  text-align: left;
}

.graft-faq-panel {
  display: none;
}

.graft-faq-panel.is-active {
  display: block;
}

.graft-panel-heading {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 20px;
  line-height: 1.25;
}

.graft-panel-body {
  font-size: 15px;
  line-height: 1.75;
  color: #4d4b47;
}

.graft-panel-body p {
  margin: 0 0 16px;
}

.graft-panel-body ul {
  padding-left: 20px;
  margin: 16px 0;
}

.graft-panel-body li {
  margin-bottom: 8px;
}

.graft-faq-mobile {
  display: none;
}

.graft-accordion-item {
  border-bottom: 1px solid #efeae2;
}

.graft-accordion-item:last-child {
  border-bottom: none;
}

.graft-accordion-header {
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2b2a29;
  text-align: left;
  cursor: pointer;
}

.graft-accordion-item.is-open .graft-accordion-header {
  color: #caa876;
}

.graft-accordion-arrow {
  color: #8c8882;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.graft-accordion-item.is-open .graft-accordion-arrow {
  transform: rotate(90deg);
  color: #caa876;
}

.graft-accordion-collapse {
  padding: 0 0 20px;
}

/* How To Use */
.graft-how-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 36px 0 32px;
}

.graft-how-media {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
}

.graft-how-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.graft-how-col-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px;
  text-align: left;
}

.graft-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.graft-steps-list li {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: #1a1919;
}

.graft-how-tip {
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #4d4c4b;
  margin-top: 24px;
  text-align: left;
}

.graft-how-tip p {
  margin: 0;
}

/* Know More Box */
.graft-card--know-more {
  background: #fcfbf8;
  border: 1.5px solid #ede7dc;
  padding: 48px 56px;
  border-radius: 36px;
  text-align: left;
}

.graft-know-eyebrow {
  font-size: 13px;
  color: #c6aa76;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: block;
  text-align: left;
}

.graft-know-desc {
  font-size: 15px;
  color: #4d4c4b;
  margin: 0 0 24px;
  max-width: 820px;
  line-height: 1.6;
}

/* Desktop FAQ / Knowledge Base alignment */
@media screen and (min-width: 64em) {
  .graft-card--faq {
    overflow: hidden;
  }

  .graft-faq-desktop {
    display: grid;
    grid-template-columns: minmax(0, 462px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    width: 100%;
  }

  .graft-faq-nav,
  .graft-faq-panels {
    min-width: 0;
    width: 100%;
  }

  .graft-faq-panels {
    padding: 0;
  }

  .graft-faq-panel {
    width: 100%;
    min-width: 0;
  }

  .graft-faq-panel.is-active {
    display: block;
  }

  .graft-panel-heading {
    margin: 0 0 24px;
    font-size: 34px;
    line-height: 1.2;
  }

  .graft-panel-body {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.45;
  }

  .graft-panel-body p {
    margin: 0 0 14px;
  }

  .graft-panel-body p:last-child {
    margin-bottom: 0;
  }

  .graft-panel-body ul,
  .graft-panel-body ol {
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .graft-panel-body li {
    margin-bottom: 3px;
    line-height: 1.45;
  }

  .graft-panel-body li:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media screen and (max-width: 64em) {
  .graft-card {
    padding: 44px 36px;
    border-radius: 32px;
  }

  .graft-hero-title {
    font-size: 38px;
  }

  .graft-card-title {
    font-size: 32px;
  }

  .graft-card--split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .graft-faq-desktop {
    grid-template-columns: 260px 1fr;
    gap: 32px;
  }

  .graft-how-columns {
    gap: 32px;
  }
}

@media screen and (max-width: 52em) {
  .graft-calculator-main {
    padding: 24px 0 60px;
  }

  .graft-card {
    padding: 36px 20px;
    border-radius: 28px;
    margin-bottom: 24px;
  }

  .graft-breadcrumb {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .graft-hero-title {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .graft-hero-subtitle {
    font-size: 14px;
    margin-bottom: 32px;
  }

  .graft-card-title {
    font-size: 26px;
  }

  /* Mobile Stepper matching design */
  .graft-stepper {
    max-width: 100%;
    margin: 0 -20px 32px;
    padding: 0 20px;
    overflow: hidden;
  }

  .graft-stepper-track {
    left: 0;
    right: 0;
    background: none;
    display: flex;
    align-items: center;
  }

  .graft-stepper-track::before {
    content: "";
    flex: 1;
    height: 2px;
    background: #f26522;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .graft-stepper-track::after {
    content: "";
    flex: 1;
    height: 2px;
    background-image: repeating-linear-gradient(to right,
        #cfc9be 0,
        #cfc9be 6px,
        transparent 6px,
        transparent 12px);
  }

  .graft-stepper[data-active-step="2"] .graft-stepper-track::before,
  .graft-stepper[data-active-step="3"] .graft-stepper-track::before,
  .graft-stepper[data-active-step="4"] .graft-stepper-track::before,
  .graft-stepper[data-active-step="5"] .graft-stepper-track::before,
  .graft-stepper[data-active-step="6"] .graft-stepper-track::before {
    opacity: 1;
  }

  .graft-stepper-progress {
    display: none;
  }

  .graft-stepper-items {
    justify-content: center;
  }

  .graft-stepper-item {
    display: none;
    width: 52px;
    height: 52px;
    margin: 0 auto;
  }

  .graft-stepper-item.is-active {
    display: inline-flex;
    box-shadow: 0 0 0 4px #ffffff;
  }

  .graft-step-heading {
    font-size: 18px;
    margin: 0 0 28px;
  }

  /* Options grids on mobile */
  .graft-options-grid {
    gap: 16px;
    margin-bottom: 32px;
  }

  .graft-options-grid--gender {
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  .graft-options-grid--gender .graft-circle-option {
    width: 140px;
    height: 140px;
    flex: 0 0 140px;
  }

  .graft-options-grid--hairtype,
  .graft-options-grid--age,
  .graft-options-grid--duration {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 320px;
    margin: 0 auto 32px;
    justify-items: center;
  }

  .graft-options-grid--hairtype .graft-circle-option,
  .graft-options-grid--age .graft-circle-option,
  .graft-options-grid--duration .graft-circle-option {
    width: 140px;
    height: 140px;
  }

  .graft-circle-text {
    font-size: 20px;
  }

  .graft-options-grid--patterns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 320px;
    margin: 0 auto 32px;
    justify-items: center;
  }

  .graft-circle-option--pattern {
    width: 140px;
    height: 140px;
  }

  /* Mobile Step Action Buttons */
  .graft-step-actions {
    display: flex;
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }

  .graft-step-actions .graft-btn {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 16px;
  }

  /* Step 6 Mobile Layout */
  .graft-form-fields {
    max-width: 320px;
    margin: 0 auto 24px;
    gap: 14px;
  }

  .graft-field--phone-group {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .graft-input,
  .graft-select {
    height: 52px;
    font-size: 14px;
  }

  .graft-step-panel[data-panel="6"] .graft-step-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .graft-step-panel[data-panel="6"] .graft-step-actions .graft-btn {
    width: 100%;
    flex: none;
    height: 52px;
  }

  /* Mobile FAQ Accordion */
  .graft-faq-desktop {
    display: none;
  }

  .graft-faq-mobile {
    display: block;
  }

  .graft-how-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .graft-card--know-more {
    padding: 32px 20px;
  }
}

/*--------------------------------------------------------------
# Header Mega Menu
--------------------------------------------------------------*/
/* Campaign Banner ----------------------------------------------- */
.pd-campaign-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffc4a3;
  line-height: 0;
}

.pd-campaign-banner__link,
.pd-campaign-banner__picture {
  display: block;
  width: 100%;
}

.pd-campaign-banner__link {
  text-decoration: none;
}

.pd-campaign-banner__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: cover;
}

.pd-campaign-banner__link:focus-visible {
  position: relative;
  outline: 2px solid #ff681e;
  outline-offset: -2px;
}

@media screen and (max-width: 65em) {
  .pd-campaign-banner__image {
    width: 100%;
    height: auto;
  }
}

.pd-utility,
.pd-header,
.pd-drawer,
.pd-language-sheet {
  --pd-brand: #ff681e;
  --pd-brand-ink: #fff;
  --pd-ink: #1a1919;
  --pd-ink-muted: #68625d;
  --pd-ink-soft: #918a84;
  --pd-bg: #fff;
  --pd-bg-soft: #f8f6f2;
  --pd-utility-bg: #f8f6f2;
  --pd-line: #e7e1db;
  --pd-line-strong: #d4ccc4;
  --pd-radius: 12px;
}

.pd-utility *,
.pd-header *,
.pd-drawer * {
  box-sizing: border-box;
}

.pd-utility {
  min-height: 31px;
  padding: 0;
  border-bottom: 1px solid var(--pd-line);
  background: var(--pd-utility-bg);
  color: var(--pd-ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.pd-utility__inner {
  display: flex;
  width: min(1440px, calc(100% - 48px));
  min-height: 31px;
  margin: 0 auto;
  padding: 6px 0;
  align-items: center;
  gap: 24px;
}

.pd-utility a {
  color: inherit;
  text-decoration: none;
}

.pd-utility a:hover,
.pd-utility a:focus-visible {
  color: var(--pd-ink);
}

.pd-utility__note {
  margin-right: auto;
  color: var(--pd-ink-soft);
}

.pd-utility__ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pd-utility__ext svg {
  width: 12px;
  height: 12px;
}

.site-header.pd-header {
  position: sticky;
  top: 0;
  z-index: 9990;
  overflow: visible;
  border-bottom: 1px solid var(--pd-line);
  background: var(--pd-bg);
}

.admin-bar .site-header.pd-header {
  top: 32px;
}

.pd-bar {
  display: flex;
  width: min(1440px, calc(100% - 48px));
  min-height: 69px;
  margin: 0 auto;
  padding: 12px 0;
  align-items: center;
  gap: 28px;
}

.pd-logo {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
}

.pd-logo a,
.pd-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.pd-logo img,
.pd-logo .custom-logo {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 44px;
  object-fit: contain;
}

.pd-navigation {
  min-width: 0;
  flex: 1 1 auto;
}

.pd-nav,
.pd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.65vw, 32px);
}

.pd-nav__item {
  position: relative;
}

.pd-nav__trigger,
.pd-nav__link {
  display: inline-flex;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--pd-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.8em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pd-nav__trigger:hover,
.pd-nav__trigger:focus-visible,
.pd-nav__trigger[aria-expanded="true"] {
  border-bottom-color: var(--pd-brand);
  color: var(--pd-ink);
}

.pd-nav__link:hover,
.pd-nav__link:focus-visible,
.pd-nav__link[aria-current="page"],
.pd-nav__item.is-current-ancestor>.pd-nav__link {
  border-bottom-color: var(--pd-line-strong);
  color: var(--pd-ink);
}

.pd-nav__trigger svg,
.pd-btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.pd-nav__trigger[aria-expanded="true"]>svg,
.pd-btn[aria-expanded="true"]>svg {
  transform: rotate(180deg);
}

.pd-actions {
  display: flex;
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.pd-action-circle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  background: var(--pd-bg-soft);
  color: var(--pd-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.pd-action-circle:hover,
.pd-action-circle:focus-visible {
  background: #f0ece8;
  color: var(--pd-ink);
}

.pd-action-circle svg,
.pd-action-circle img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.pd-language {
  position: relative;
}

.pd-language__code {
  display: block;
}

.pd-language__button-icon {
  display: none;
}

.pd-language__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  width: 178px;
  padding: 8px 0;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  background: var(--pd-bg);
  box-shadow: 0 18px 42px -20px rgba(26, 25, 25, 0.34);
}

.pd-language__menu[hidden] {
  display: none;
}

.pd-language__item {
  display: flex;
  min-height: 46px;
  padding: 10px 20px;
  align-items: center;
  gap: 10px;
  color: var(--pd-ink-muted);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.pd-language__item:hover,
.pd-language__item:focus-visible,
.pd-language__item.is-current {
  background: var(--pd-bg-soft);
  color: var(--pd-brand);
}

.pd-language__item img {
  display: block;
  width: 33px;
  height: 22px;
  flex: 0 0 24px;
  object-fit: contain;
}

.pd-btn {
  display: inline-flex;
  border: 0;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--pd-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pd-btn--ghost {
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--pd-line-strong);
  background: var(--pd-bg);
}

.pd-btn--ghost:hover,
.pd-btn--ghost:focus-visible {
  border-color: var(--pd-ink);
  color: var(--pd-ink);
}

.pd-btn--primary {
  min-height: 42px;
  padding: 11px 22px;
  background: var(--pd-brand);
  color: var(--pd-brand-ink);
}

.pd-btn--primary:hover,
.pd-btn--primary:focus-visible {
  background: var(--pd-brand);
  color: var(--pd-brand-ink);
  filter: brightness(0.94);
}

.pd-btn--beauty {
  display: none;
  background: #4d4c4b;
  color: #fff;
}

.pd-btn--beauty:hover,
.pd-btn--beauty:focus-visible {
  background: #3f3e3d;
  color: #fff;
}

@media screen and (min-width: 65.01em) {
  .pd-btn--beauty {
    display: inline-flex;
    min-height: 42px;
    padding: 11px 22px;
  }
}

.pd-header :focus-visible,
.pd-drawer :focus-visible,
.pd-utility :focus-visible {
  border-radius: 4px;
  outline-offset: 3px;
}

.pd-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 100;
  display: none;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: var(--pd-bg);
  box-shadow: 0 22px 50px -24px rgba(26, 25, 25, 0.34);
}

.pd-panel.is-open {
  display: block;
}

/* Keep the open mega panel in two columns. This fixes the stacked-panel bug. */
.pd-panel.pd-mega.is-open {
  display: grid;
}

.pd-panel--right {
  right: 0;
  left: auto;
}

.pd-mega {
  width: min(880px, calc(100vw - 64px));
  grid-template-columns: 246px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

.pd-mega__services {
  padding: 16px 0;
  border-right: 1px solid var(--pd-line);
}

.pd-mega__group {
  margin: 0 0 6px;
  padding: 0 18px;
  color: var(--pd-ink-soft);
  font-size: 12px;
}

.pd-mega__services hr {
  margin: 14px 18px 12px;
  border: 0;
  border-top: 1px solid var(--pd-line);
}

.pd-mega__service {
  display: flex;
  width: 100%;
  min-height: 38px;
  padding: 9px 18px;
  border: 0;
  border-left: 2px solid transparent;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  color: var(--pd-ink-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1.8em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pd-mega__service svg {
  width: 14px;
  height: 14px;

  flex: 0 0 auto;

  opacity: 0.45;

  transition: opacity 0.18s ease;
}

.pd-mega__service:hover svg,
.pd-mega__service:focus-visible svg,
.pd-mega__service[aria-selected="true"] svg {
  opacity: 0.75;
}

.pd-mega__service:hover,
.pd-mega__service:focus-visible,
.pd-mega__service[aria-selected="true"] {
  background: var(--pd-bg-soft);
  color: var(--pd-ink);
}

.pd-mega__service[aria-selected="true"] {
  border-left-color: var(--pd-brand);
}

.pd-mega__cities {
  min-height: 286px;
  padding: 18px 20px;
}

.pd-mega__pane[hidden] {
  display: none;
}

.pd-mega__pane.is-active {
  display: block;
  animation: pd-mega-pane-in 0.18s ease;
}

.pd-mega__label {
  margin: 0 0 12px;
  color: var(--pd-ink-soft);
  font-size: 12px;
}

.pd-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pd-city {
  display: block;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: var(--pd-bg-soft);
  color: var(--pd-ink);
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.pd-city:hover,
.pd-city:focus-visible {
  border-color: var(--pd-line-strong);
  background: var(--pd-bg);
  color: var(--pd-ink);
}

.pd-city__name,
.pd-city__meta {
  display: block;
}

.pd-city__name {
  font-size: 15px;
  line-height: 1.8em;
}

.pd-city__meta {
  margin-top: 3px;
  color: var(--pd-ink-muted);
  font-size: 13px;
  line-height: 1.8em;
}

.pd-mega__foot {
  display: flex;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--pd-line);
  gap: 20px;
  font-size: 14px;
}

.pd-mega__foot a {
  color: var(--pd-ink-muted);
  text-decoration: none;
}

.pd-mega__foot a:hover,
.pd-mega__foot a:focus-visible,
.pd-mega__foot a:first-child {
  color: var(--pd-brand);
}

.pd-list {
  min-width: 270px;
  padding: 10px 0;
}

.pd-list a {
  display: block;
  padding: 10px 18px;
  color: var(--pd-ink);
  font-size: 15px;
  line-height: 1.8em;
  text-decoration: none;
}

.pd-list a:hover,
.pd-list a:focus-visible {
  background: var(--pd-bg-soft);
  color: var(--pd-ink);
}

.pd-list__meta {
  display: block;
  margin-top: 2px;
  color: var(--pd-ink-muted);
  font-size: 13px;
}

.pd-burger,
.pd-drawer,
.pd-scrim,
.pd-language-sheet {
  display: none;
}

body.pd-drawer-open {
  overflow: hidden;
}

@keyframes pd-mega-pane-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

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

@media screen and (min-width: 64.01em) and (max-width: 80em) {
  .pd-bar {
    gap: 20px;
  }

  .pd-nav {
    gap: 18px;
  }

  .pd-nav__trigger,
  .pd-nav__link {
    font-size: 14px;
  }

  .pd-btn--ghost {
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media screen and (max-width: 65em) {
  .pd-utility {
    display: none;
  }

  .admin-bar .site-header.pd-header {
    top: 32px;
  }

  .pd-bar {
    width: 100%;
    min-height: 68px;
    padding: 10px 20px;
    gap: 14px;
  }

  .pd-logo img,
  .pd-logo .custom-logo {
    max-width: 132px;
    max-height: 42px;
  }

  .pd-navigation {
    display: none;
  }

  .pd-actions {
    margin-left: auto;
  }

  .pd-actions .pd-btn--ghost,
  .pd-actions .pd-btn--primary {
    display: none;
  }

  .pd-header-search {
    display: none;
  }

  .pd-language__trigger {
    background: var(--pd-bg-soft);
    color: var(--pd-ink);
  }

  .pd-language__trigger:hover,
  .pd-language__trigger:focus-visible {
    background: #f0ece8;
    color: var(--pd-ink);
    filter: none;
  }

  .pd-language__code {
    display: block;
  }

  .pd-language__button-icon {
    display: none;
  }

  .pd-language__menu {
    display: none !important;
  }

  .pd-burger {
    display: inline-flex;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--pd-line-strong);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--pd-bg);
    color: var(--pd-ink);
    cursor: pointer;
  }

  .pd-burger svg,
  .pd-drawer__close svg {
    width: 18px;
    height: 18px;
  }

  .pd-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10001;
    display: flex;
    width: min(420px, 100%);
    overflow-y: auto;
    border-left: 1px solid var(--pd-line);
    flex-direction: column;
    background: var(--pd-bg);
    color: var(--pd-ink);
    visibility: hidden;
    transform: translateX(100%);
    pointer-events: none;
    transition:
      transform 0.24s ease,
      visibility 0.24s ease;
  }

  .pd-drawer.is-open {
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }

  .pd-drawer__top {
    display: flex;
    min-height: 68px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--pd-line);
    align-items: center;
    justify-content: space-between;
  }

  .pd-drawer__close {
    display: inline-flex;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--pd-line-strong);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--pd-bg);
    color: var(--pd-ink);
    cursor: pointer;
  }

  .pd-drawer__content {
    flex: 1 0 auto;
  }

  .pd-acc {
    border-bottom: 1px solid var(--pd-line);
  }

  .pd-acc--nested {
    border-bottom: 0;
  }

  .pd-acc__head {
    display: flex;
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    border: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    color: var(--pd-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.8em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .pd-acc--nested>.pd-acc__head {
    min-height: 48px;
    padding-right: 0;
    padding-left: 0;
    font-size: 15px;
  }

  .pd-acc__row {
    display: flex;
    min-height: 48px;
    align-items: stretch;
  }

  .pd-acc__parent {
    display: flex;
    min-width: 0;
    padding: 13px 0;
    flex: 1 1 auto;
    align-items: center;
    color: var(--pd-ink);
    font-size: 15px;
    line-height: 1.8em;
    text-decoration: none;
  }

  .pd-acc__parent:hover,
  .pd-acc__parent:focus-visible {
    color: var(--pd-brand);
  }

  .pd-acc__toggle {
    display: inline-flex;
    width: 48px;
    min-width: 48px;
    padding: 0;
    border: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--pd-ink);
    cursor: pointer;
  }

  .pd-acc__toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 0.18s ease;
  }

  .pd-acc__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .pd-acc__head svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
  }

  .pd-acc__head[aria-expanded="true"]>svg {
    transform: rotate(180deg);
  }

  .pd-acc__body {
    display: none;
    padding: 0 18px 14px;
  }

  .pd-acc__body.is-open {
    display: block;
  }

  .pd-acc__body a {
    display: block;
    padding: 10px 0;
    color: var(--pd-ink-muted);
    font-size: 15px;
    line-height: 1.8em;
    text-decoration: none;
  }

  .pd-acc__body a:last-child {
    border-bottom: 0;
  }

  .pd-acc__sub {
    margin: 14px 0 4px;
    color: var(--pd-ink-soft);
    font-size: 12px;
  }

  .pd-drawer__foot {
    padding: 18px 18px 8px;
  }

  .pd-drawer__foot .pd-btn {
    width: 100%;
  }

  .pd-drawer__utility {
    display: flex;
    padding: 16px 18px 24px;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--pd-ink-muted);
    font-size: 14px;
  }

  .pd-drawer__utility a {
    color: inherit;
    text-decoration: none;
  }

  .pd-scrim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: block;
    background: rgba(26, 25, 25, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.24s ease,
      visibility 0.24s ease;
  }

  .pd-scrim.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .pd-language-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10002;
    display: flex;
    max-height: min(620px, calc(100vh - 48px));
    padding: 12px 20px 16px;
    border-radius: 14px 14px 0 0;
    flex-direction: column;
    background: var(--pd-bg);
    color: var(--pd-ink);
    visibility: hidden;
    transform: translateY(105%);
    pointer-events: none;
    transition:
      transform 0.24s ease,
      visibility 0.24s ease;
  }

  .pd-language-sheet.is-open {
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .pd-language-sheet__handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--pd-line-strong);
  }

  .pd-language-sheet h2 {
    margin: 0 0 18px;
    color: var(--pd-brand);
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8em;
    text-align: center;
  }

  .pd-language-sheet__list {
    overflow-y: auto;
  }

  .pd-language-sheet__item {
    display: flex;
    min-height: 46px;
    padding: 11px 10px;
    border-bottom: 1px solid var(--pd-line);
    align-items: center;
    gap: 10px;
    color: var(--pd-ink-muted);
    font-size: 16px;
    line-height: 1.8em;
    text-decoration: none;
  }

  .pd-language-sheet__item.is-current {
    color: var(--pd-ink);
  }

  .pd-language-sheet__item img {
    display: block;
    width: 22px;
    height: 15px;
    flex: 0 0 22px;
    object-fit: cover;
  }

  .pd-language-sheet__close {
    width: 100%;
    min-height: 45px;
    margin-top: 10px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--pd-brand);
    color: var(--pd-brand-ink);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
  }

  /* Mobile header and navigation drawer ----------------------- */
  .pd-bar {
    min-height: 80px;
    padding: 16px 32px;
    gap: 16px;
  }

  .pd-logo img,
  .pd-logo .custom-logo {
    width: auto;
    max-width: 136px;
    height: 40px;
    max-height: 40px;
  }

  .pd-actions {
    gap: 16px;
  }

  .pd-action-circle,
  .pd-burger {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .pd-language__trigger {
    background: #f8f6f2;
    font-size: 16px;
  }

  .pd-burger {
    border: 0;
    background: #f2efed;
  }

  .pd-burger svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.7;
  }

  .pd-drawer {
    width: min(414px, 100%);
    padding: 16px;
    border-left: 0;
    gap: 16px;
    background: #fff;
    scrollbar-width: thin;
  }

  .pd-drawer__top {
    min-height: 80px;
    padding: 16px 0;
    border-bottom: 0;
  }

  .pd-drawer__close {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #4d4c4b;
  }

  .pd-drawer__close svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
  }

  .pd-drawer__content {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    border-top: 1px solid #ccc9c8;
  }

  .pd-drawer__countries {
    padding: 32px 0;
    border-bottom: 1px solid #e5e3e1;
  }

  .pd-drawer__countries>p,
  .pd-mobile-menu__title {
    margin: 0 0 16px;
    color: #807e7d;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.275;
  }

  .pd-country-list {
    display: flex;
    width: calc(100% + 16px);
    padding-right: 16px;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pd-country-list::-webkit-scrollbar {
    display: none;
  }

  .pd-country {
    display: inline-flex;
    min-height: 32px;
    padding: 3px 9px 3px 4px;
    border: 1px solid #ccc9c8;
    border-radius: 32px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1a1919;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
  }

  .pd-country img {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }

  .pd-country.is-active {
    border-color: #ffab7a;
    background: #ffab7a;
  }

  .pd-mobile-menu__group {
    padding: 32px 0 8px 0;
    border-bottom: 1px solid #e5e3e1;
  }

  .pd-mobile-menu__group[hidden],
  .pd-mobile-menu__links a[hidden] {
    display: none;
  }

  .pd-mobile-menu__title {
    margin-bottom: 12px;
  }

  .pd-mobile-menu__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .pd-mobile-menu__links a {
    color: #1a1919;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
  }

  .pd-mobile-menu__links a:hover,
  .pd-mobile-menu__links a:focus-visible,
  .pd-mobile-menu__links a[aria-current="page"] {
    color: var(--pd-brand);
  }

  .pd-mobile-menu__accordion {
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid #e5e3e1;
  }

  .pd-mobile-menu__group--accordion {
    padding: 0;
  }

  .pd-mobile-menu__accordion-toggle.pd-acc__head {
    min-height: 58px;
    padding: 16px 0;
    color: #1a1919;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
  }

  .pd-mobile-menu__accordion-body.pd-acc__body {
    width: 100%;
    padding: 0 0 16px;
  }

  .pd-mobile-menu__accordion-body>a,
  .pd-mobile-menu__accordion-body .pd-mobile-menu__links>a {
    display: block;
    padding: 8px 0;
    color: #4d4c4b;
    font-size: 16px;
    line-height: 1.8em;
    text-decoration: none;
  }

  .pd-mobile-menu__primary {
    padding-top: 16px;
  }

  .pd-mobile-menu__primary-link,
  .pd-mobile-menu__primary .pd-acc__head {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid #e5e3e1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    color: #1a1919;
    font: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
  }

  .pd-mobile-menu__primary .pd-acc,
  .pd-mobile-menu__primary .pd-acc--nested {
    border-bottom: 0;
  }

  .pd-mobile-menu__primary .pd-acc__body {
    padding: 8px 0 16px;
    border-bottom: 1px solid #e5e3e1;
  }

  .pd-mobile-menu__primary .pd-acc__body a {
    padding: 10px 0;
    border-bottom: 0;
    color: #4d4c4b;
    font-size: 16px;
  }

  .pd-drawer-search {
    display: flex;
    width: 100%;
    height: 54px;
    margin-top: 32px;
    padding: 0 20px;
    border: 1px solid #ccc9c8;
    border-radius: 83px;
    align-items: center;
    gap: 12px;
  }

  .pd-drawer-search svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #000;
  }

  .pd-drawer-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1a1919;
    font: inherit;
    font-size: 16px;
  }

  .pd-drawer-search input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    opacity: 1;
  }

  .pd-drawer__utility {
    display: flex;
    padding: 32px 0 24px;
    border-top: 1px solid #ccc9c8;
    flex-direction: column;
    gap: 24px;
  }

  .pd-drawer__language-row {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #807e7d;
    font-size: 16px;
    font-weight: 300;
  }

  .pd-drawer__language-options {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
  }

  .pd-drawer__language-options a {
    display: inline-flex;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: #807e7d;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }

  .pd-drawer__language-options a.is-current {
    color: #1a1919;
  }

  .pd-drawer__language-options .pd-drawer__language-switch {
    position: relative;
    width: 59px;
    height: 24px;
    border: 1px solid #ff6815;
    border-radius: 999px;
    background: #ff6815;
  }

  .pd-drawer__language-switch span {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s ease;
  }

  .pd-drawer__language-switch.is-end span {
    transform: translateX(35px);
  }

  .pd-drawer__beauty {
    display: inline-flex;
    width: 100%;
    height: 54px;
    padding: 16px 32px;
    border-radius: 69px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #4d4c4b;
    color: #fff !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }

  .pd-drawer__beauty:hover,
  .pd-drawer__beauty:focus-visible {
    background: #3b3b3d;
    color: #fff;
  }

  .pd-drawer__beauty svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }
}

@media screen and (max-width: 48.875em) {
  .admin-bar .site-header.pd-header {
    top: 46px;
  }
}

@media screen and (max-width: 23.4375em) {
  .pd-bar {
    padding-right: 16px;
    padding-left: 16px;
    gap: 12px;
  }

  .pd-logo img,
  .pd-logo .custom-logo {
    max-width: 120px;
    height: 36px;
    max-height: 36px;
  }

  .pd-actions {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pd-header *,
  .pd-drawer *,
  .pd-scrim {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# BMI Calculator Tool
--------------------------------------------------------------*/

.bmi-calculator-main {
  background-color: #f7f4ee;
  padding: 0px 0 80px;
  min-height: 100vh;
  color: #2b2a29;
  font-family: var(--padra-body-font), sans-serif;
}

.bmi-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  margin-bottom: 36px;
}

.bmi-card {
  background: #ffffff;
  border-radius: 40px;
  padding: 56px 64px;
  margin-bottom: 36px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

/* Hero Section */
.bmi-hero-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 820px;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: #f7f4ee;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}

.bmi-hero-section {
  position: relative;
  z-index: 1;
}

.bmi-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 62%;
  pointer-events: none;
  background: linear-gradient(90deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.99) 32%,
      rgba(255, 255, 255, 0.9) 56%,
      rgba(255, 255, 255, 0.58) 76%,
      rgba(255, 255, 255, 0) 100%);
}

.bmi-hero-section .bmi-container {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 0;
}

.bmi-hero-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.bmi-breadcrumb {
  margin-bottom: 14px;
  color: #8c8882;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bmi-hero-title {
  margin: 0 0 16px;
  color: #1a1a1a;
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 46px;
  font-weight: 300;
  line-height: 1.2;
}

.bmi-title-highlight {
  color: #cca978;
  font-style: italic;
  font-weight: 400;
}

.bmi-hero-subtitle {
  max-width: 540px;
  margin: 0 0 24px;
  color: #6e6b66;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.bmi-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.bmi-pill-badge {
  display: inline-flex;
  padding: 8px 22px;
  border-radius: 9999px;
  background: #f3efe6;
  color: #4a4845;
  font-size: 13px;
  font-weight: 500;
}

.bmi-callout-card {
  max-width: 520px;
  padding: 24px 28px;
  border-radius: 20px;
  box-sizing: border-box;
  background: rgba(251, 249, 245, 0.94);
}

.bmi-callout-title {
  margin: 0 0 8px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
}

.bmi-callout-desc {
  margin: 0;
  color: #5a5752;
  font-size: 14px;
  line-height: 1.6;
}

/* Form Section with Wavy Background */
/* Form Section with Wavy Background */
.bmi-section--form {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 0 184px;
  overflow: hidden;
  border-radius: 40px;
  background-color: #f8f6f2;
  background-image: url("assets/img/bmi/form-waves-bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bmi-section--form>.bmi-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 72px;
}

.bmi-section-header--center {
  width: 100%;
  max-width: none;
  margin: 0 0 32px;
  text-align: left;
}

.bmi-section--form .bmi-eyebrow {
  display: block;
  margin: 0 0 20px;
  color: #807e7d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  letter-spacing: 0;
  text-transform: none;
}

.bmi-section-title {
  max-width: 900px;
  margin: 0 0 20px;
  color: #1a1919;
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.08;
}

.bmi-section-note {
  max-width: 1040px;
  margin: 0;
  color: #4d4c4b;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.bmi-card--form {
  width: 100%;
  max-width: none;
  margin: 0 0 32px;
  padding: 40px 80px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: none;
}

.bmi-calculator-form {
  width: 100%;
}

/* Calculator Form Controls */
.bmi-toggles-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 104px;
  width: 100%;
  margin: 0 0 24px;
}

.bmi-toggle-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.bmi-toggle-label {
  color: #2f2e2d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.bmi-pill-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.bmi-toggle-btn {
  display: inline-flex;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid transparent;
  border-radius: 104px;
  background: #f8f6f2;
  box-shadow: none;
  color: #2f2e2d;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.bmi-toggle-btn:hover {
  background: #f5f1ea;
}

.bmi-toggle-btn.is-active {
  border-color: #e0c99d;
  background: #ffffff;
  color: #2f2e2d;
}

.bmi-toggle-icon {
  width: 22px;
  height: 22px;
  color: #d1a85e;
}

/* Form Inputs Grid */
.bmi-inputs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
}

.bmi-input-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.bmi-calculator-form .bmi-input,
.bmi-calculator-form .bmi-select {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 30px;
  border: 1px solid #dedad2;
  border-radius: 104px;
  outline: 0;
  background: #ffffff;
  box-shadow: none;
  color: #2f2e2d;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.bmi-calculator-form .bmi-input:focus,
.bmi-calculator-form .bmi-select:focus {
  border-color: #e0c99d;
}

.bmi-calculator-form .bmi-input::placeholder {
  color: #999693;
  opacity: 1;
}

.bmi-select-wrap {
  position: relative;
}

.bmi-calculator-form .bmi-select {
  padding-right: 52px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.bmi-select-chevron {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 18px;
  height: 18px;
  color: #706d68;
  pointer-events: none;
  transform: translateY(-50%);
}

.bmi-form-feedback {
  margin: 16px 0 0;
  min-height: 0;
  color: #4d4c4b;
  font-size: 14px;
  text-align: center;
}

.bmi-form-feedback:empty {
  display: none;
}

.bmi-form-feedback.is-error {
  color: #d32f2f;
}

.bmi-form-feedback.is-success {
  color: #2e7d32;
}

.bmi-form-actions {
  display: flex;
  margin: 24px 0 0;
  justify-content: center;
}

.bmi-btn {
  display: inline-flex;
  height: 56px;
  padding: 0 48px;
  border: 0;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.bmi-form-actions .bmi-btn--primary {
  width: 364px;
  max-width: 100%;
  background: #ff6419;
  color: #ffffff;
}

.bmi-form-actions .bmi-btn--primary:hover,
.bmi-form-actions .bmi-btn--primary:focus {
  background: #e95812;
  color: #ffffff;
}

.bmi-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: bmiSpin 0.7s linear infinite;
}

@keyframes bmiSpin {
  to {
    transform: rotate(360deg);
  }
}

.bmi-privacy-callout {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid #f26522;
  border-radius: 0;
  background: transparent;
  color: #2f2e2d;
  font-size: 14px;
  line-height: 1.55;
  box-sizing: border-box;
}

.bmi-privacy-callout p {
  margin: 0;
}

/* What Is BMI & Formula */
.bmi-card--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}

.bmi-card-text {
  font-size: 15px;
  line-height: 1.7;
  color: #4d4b47;
}

.bmi-formula-box {
  background: #faf6ee;
  border-radius: 28px;
  padding: 36px 32px;
  box-sizing: border-box;
}

.bmi-formula-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: #8c8882;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.bmi-formula-expression {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 24px;
}

.bmi-example-pill {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bmi-example-title {
  font-size: 12px;
  font-weight: 600;
  color: #cca978;
  text-transform: uppercase;
}

.bmi-example-val {
  font-size: 15px;
  font-weight: 500;
  color: #2b2a29;
}

/* Understand Your BMI Result Table */
.bmi-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0 20px;
}

.bmi-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 15px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ebe5dc;
}

.bmi-table thead th {
  background: #d8be93;
  color: #ffffff;
  font-weight: 600;
  padding: 18px 24px;
  text-align: left;
  border: none;
}

.bmi-table tbody td {
  padding: 16px 24px;
  border-bottom: 1px solid #f0ede6;
  color: #3b3936;
}

.bmi-table tbody tr:last-child td {
  border-bottom: none;
}

.bmi-table tbody tr:nth-child(even) {
  background: #fdfcfb;
}

.bmi-table-callout {
  border-left: 3px solid #f26522;
  padding: 12px 20px;
  background: #fcf9f5;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.65;
  color: #5c5852;
  margin-top: 16px;
}

.bmi-table-callout p {
  margin: 0;
}

/* BMI Limitations & Context */
.bmi-useful-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}

.bmi-useful-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #4d4b47;
  margin-bottom: 24px;
}

.bmi-can-box {
  background: #faf6ee;
  border-radius: 24px;
  padding: 28px;
  box-sizing: border-box;
}

.bmi-box-heading {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px;
}

.bmi-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bmi-bullet-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #403e3b;
  line-height: 1.5;
}

.bmi-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #cca978;
  font-size: 18px;
  line-height: 1;
  top: 0;
}

.bmi-cannot-card {
  background: #faf6ee;
  border-radius: 28px;
  padding: 32px;
  box-sizing: border-box;
}

.bmi-plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.bmi-plain-list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #403e3b;
}

.bmi-medical-example {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 24px;
  box-sizing: border-box;
}

.bmi-medical-title {
  font-size: 13px;
  font-weight: 600;
  color: #cca978;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.bmi-medical-text {
  font-size: 13px;
  line-height: 1.6;
  color: #5a5752;
  margin: 0;
}

/* Dynamic Live Results Card */
.bmi-section--results {
  display: none;
}

.bmi-section--results.is-visible {
  display: block;
  animation: bmiFadeIn 0.4s ease forwards;
}

@keyframes bmiFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.bmi-card--results {
  text-align: center;
  padding: 56px 48px;
}

.bmi-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.bmi-gauge-circle {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 2.5px solid #d8be93;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #faf8f4;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.bmi-gauge-number {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 46px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1;
}

.bmi-gauge-label {
  font-size: 14px;
  color: #73706b;
  font-weight: 500;
  margin-top: 4px;
}

.bmi-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 22px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.bmi-category-badge.is-normal {
  background: #eaf6ed;
  color: #2e7d32;
  border: 1.5px solid #81c784;
}

.bmi-category-badge.is-overweight {
  background: #fff8e1;
  color: #f57f17;
  border: 1.5px solid #ffd54f;
}

.bmi-category-badge.is-obese,
.bmi-category-badge.is-severe-obese {
  background: #ffebee;
  color: #c62828;
  border: 1.5px solid #e57373;
}

.bmi-category-badge.is-underweight {
  background: #e3f2fd;
  color: #1565c0;
  border: 1.5px solid #64b5f6;
}

.bmi-results-heading {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.bmi-results-detail {
  font-size: 15px;
  color: #5a5752;
  margin: 0 0 40px;
}

/* Spectrum Bar */
.bmi-spectrum-container {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: left;
}

.bmi-spectrum-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
  color: #8c8882;
  margin-bottom: 12px;
}

.bmi-spectrum-track {
  height: 8px;
  border-radius: 9999px;
  position: relative;
  background: linear-gradient(to right,
      #e53935 0%,
      #fb8c00 25%,
      #7cb342 50%,
      #43a047 75%,
      #fb8c00 100%);
  margin-bottom: 12px;
}

.bmi-spectrum-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #f26522;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bmi-spectrum-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #8c8882;
}

.bmi-spec-label.is-active {
  font-weight: 700;
  color: #1a1a1a;
}

/* Two Metric Sub-Cards */
.bmi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}

.bmi-metric-card {
  background: #fbf9f5;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  box-sizing: border-box;
}

.bmi-metric-label {
  font-size: 14px;
  color: #73706b;
}

.bmi-metric-value {
  display: block;
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 8px 0 4px;
}

.bmi-metric-note {
  font-size: 13px;
  color: #8c8882;
}

.bmi-mobile-guide-card {
  display: none;
}

/* Consultation CTA Banner */
.bmi-cta-card {
  background: linear-gradient(135deg, #fceddf 0%, #fef3eb 100%);
  border-radius: 32px;
  padding: 40px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
}

.bmi-cta-title {
  font-family: var(--padra-font-display), Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.bmi-cta-desc {
  font-size: 15px;
  color: #595550;
  margin: 0;
  max-width: 600px;
  line-height: 1.6;
}

.bmi-btn--cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 36px;
  border-radius: 9999px;
  background: #f26522;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.bmi-btn--cta:hover {
  background: #df5514;
  color: #ffffff;
}

/* FAQ Section */
.bmi-faq-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.bmi-faq-tab {
  height: 44px;
  padding: 0 32px;
  border-radius: 9999px;
  border: 1.5px solid #dfdad0;
  background: #ffffff;
  color: #2b2a29;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bmi-faq-tab:hover {
  background: #f7f4ee;
}

.bmi-faq-tab.is-active {
  background: #4a4845;
  color: #ffffff;
  border-color: #4a4845;
}

.bmi-faq-accordion {
  max-width: 860px;
  margin: 0 auto;
}

.bmi-accordion-item {
  border-radius: 20px;
  background: #faf8f4;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}

.bmi-accordion-item.is-open {
  background: #fcfbf8;
  border-color: #d8be93;
}

.bmi-accordion-header {
  width: 100%;
  padding: 20px 28px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--padra-body-font), sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
}

.bmi-accordion-icon {
  font-size: 20px;
  font-weight: 400;
  color: #706d68;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.bmi-icon-minus {
  display: none;
}

.bmi-accordion-item.is-open .bmi-icon-minus {
  display: inline;
}

.bmi-accordion-item.is-open .bmi-icon-plus {
  display: none;
}

.bmi-accordion-content {
  padding: 0 28px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #4d4b47;
}

.bmi-accordion-content p {
  margin: 0 0 12px;
}

.bmi-accordion-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media screen and (max-width: 64em) {
  .bmi-card {
    padding: 44px 36px;
    border-radius: 32px;
  }

  .bmi-hero-title {
    font-size: 38px;
  }

  .bmi-card-title {
    font-size: 32px;
  }

  .bmi-card--split,
  .bmi-useful-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

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

@media screen and (max-width: 52em) {
  .bmi-calculator-main {
    padding: 0 0 60px;
  }

  .bmi-hero-section {
    display: block;
    min-height: 0;
    margin-bottom: 0;
    padding: 500px 0 56px !important;
    overflow: hidden;
    background-color: #ffffff;
    background-position: 64% 0 !important;
    background-size: auto 420px !important;
  }

  .bmi-hero-section::before {
    top: 220px;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 280px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.24) 20%,
        rgba(255, 255, 255, 0.72) 56%,
        rgba(255, 255, 255, 0.96) 82%,
        #ffffff 100%);
  }

  .bmi-hero-section .bmi-container {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }

  .bmi-hero-content {
    width: 100%;
    max-width: 100%;
  }

  .bmi-hero-title {
    font-size: 30px;
    line-height: 1.2;
  }

  .bmi-callout-card {
    background: #fbf9f5;
  }

  .bmi-card {
    padding: 36px 20px;
    border-radius: 28px;
    margin-bottom: 24px;
  }

  .bmi-hero-title {
    font-size: 30px;
  }

  .bmi-section-title,
  .bmi-card-title {
    font-size: 26px;
  }

  .bmi-section--form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 72px 0 184px;
    border-radius: 40px;
    background-position: center top;
    background-size: auto 100%;
  }

  .bmi-section--form>.bmi-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .bmi-section-header--center {
    width: 100%;
    margin: 0 0 32px;
    text-align: center;
  }

  .bmi-section--form .bmi-eyebrow {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
  }

  .bmi-section--form .bmi-section-title {
    max-width: 350px;
    margin: 0 auto 24px;
    font-size: 32px;
    line-height: 1.08;
    text-align: center;
  }

  .bmi-section--form .bmi-section-note {
    max-width: 350px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
  }

  .bmi-section--form .bmi-card--form {
    width: 100%;
    margin: 0 0 32px;
    padding: 28px 24px 24px;
    border-radius: 24px;
  }

  .bmi-toggles-row {
    display: flex;
    margin: 0 0 24px;
    flex-direction: column;
    gap: 24px;
  }

  .bmi-toggle-group {
    width: 100%;
    gap: 12px;
  }

  .bmi-pill-toggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .bmi-toggle-btn {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    font-size: 16px;
  }

  .bmi-toggle-label {
    font-size: 18px;
  }

  .bmi-inputs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bmi-input,
  .bmi-select {
    width: 100%;
    height: 56px;
    padding-right: 30px;
    padding-left: 30px;
    font-size: 16px;
  }

  .bmi-select {
    min-height: 72px;
    padding-right: 54px;
    line-height: 1.8em;
    white-space: normal;
  }

  .bmi-select-chevron {
    right: 22px;
  }

  .bmi-form-actions {
    width: 100%;
    margin-top: 24px;
  }

  .bmi-form-actions .bmi-btn--primary {
    width: 100%;
    height: 56px;
  }

  .bmi-privacy-callout {
    width: 100%;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 2px solid #f26522;
    background: transparent;
    font-size: 14px;
    line-height: 1.5;
  }

  .bmi-metrics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bmi-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 24px;
  }

  .bmi-btn--cta {
    width: 100%;
    justify-content: center;
  }

  .bmi-mobile-guide-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fbf9f5;
    border-radius: 16px;
    padding: 16px 20px;
    margin-top: 24px;
    font-size: 13px;
    text-align: left;
  }

  .bmi-guide-title {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
  }

  .bmi-guide-row {
    color: #706d68;
  }

  .bmi-guide-row.is-normal {
    font-weight: 600;
    color: #2e7d32;
  }
}

/*--------------------------------------------------------------
# 404 Error Page
--------------------------------------------------------------*/
.error-404-main {
  width: 100%;
  background: #ffffff;
}

.error-404.not-found {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(440px, 58vh, 620px);
  padding: 100px 24px;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

.error-404-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--padra-font-display, "Canela", Georgia, serif);
  font-weight: 300;
  font-size: clamp(140px, 24vw, 340px);
  line-height: 0.85;
  color: #ede8e3;
  letter-spacing: -0.02em;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

.error-404-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-404-title {
  font-family: var(--padra-font-display, "Canela", Georgia, serif);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.15;
  color: #1d1d1d;
  margin: 0 0 14px;
}

.error-404-description {
  font-family: var(--padra-font-body, "Montserrat", Arial, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: #4d4c4b;
  margin: 0 auto 28px;
  max-width: 420px;
}

.error-404-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ff6a14;
  color: #ffffff !important;
  font-family: var(--padra-font-body, "Montserrat", Arial, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 999px;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.error-404-btn:hover,
.error-404-btn:focus {
  background: #000;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(244, 123, 32, 0.28);
}

.error-404-btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.error-404-btn:hover .error-404-btn-arrow {
  transform: translateX(3px);
}

@media screen and (max-width: 767px) {
  .error-404.not-found {
    min-height: clamp(340px, 50vh, 460px);
    padding: 60px 20px;
  }

  .error-404-watermark {
    font-size: clamp(110px, 32vw, 190px);
  }

  .error-404-title {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .error-404-description {
    font-size: 14px;
    margin-bottom: 22px;
  }

  .error-404-btn {
    padding: 11px 24px;
    font-size: 14px;
  }
}