/* ==========================================================================
   12-home-figma.css — Sunrise Dermatology homepage Figma alignment
   --------------------------------------------------------------------------
   Source: Figma node 4531-8401 (file mIY3xFtVxnPjx9zUEZHWEN).
   Layered last in the enqueue chain so its rules win by load order without
   touching any of the working tier files (01-tokens, 03-typography,
   04-buttons-forms, 09-components-gd, etc.).

   Scope: `.home` body class only. Other pages keep using the global tiers.

   Section index:
     1.  Type tier extension (.h2-5 = 56/64)
     2.  Hero (first row)              -- typography confirm + button sizing
     3.  Marquee                       -- sitewide in 07-home-hero-cls.css §E
     4.  Intro + 3 icons               -- h2 56/64, icon labels 24/32
     5.  Dermatology Services          -- 80/80 head, 40/48 titles, chevron
     6.  Who We Are                    -- 80/80 head, orange counters, 24/32 caps
     7.  Healthier Skin Starts Here    -- 56/64 h2 on beach bg
     8.  Providers (isotope grid)      -- 80/80 head, 40/48 names, credentials
     9.  Locations widget              -- 56px city, 36px "01." counter prefix
     10. Reviews / Testimonials        -- single-item layout (overrides 09)
     11. FAQ accordion                 -- header 80/80, question 40/48, borders
     12. Responsive (959px / 767px)

   Footer CTA (.a-new-day) + Proud Member (.aqua-row) → 06-footer-layout.css
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   1. Type tier extension — Display 03 (50/60/0)
   --------------------------------------------------------------------------
   Display 03 is sized in Uncode Custom Sizes (font-size 50px in Theme
   Options → Typography); 03-typography.css applies the 60px line-height
   and 0 letter-spacing. Used for intro h2 / Healthier Skin h2.
   ────────────────────────────────────────────────────────────────────────── */

.h2-5,
h1.h2-5, h2.h2-5, h3.h2-5, h4.h2-5, h5.h2-5, h6.h2-5 {
	font-family: var(--sd-font-display) !important;
	font-size: 56px !important;
	font-weight: 500 !important;
	line-height: 64px !important;
	letter-spacing: -0.5px !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. Hero — first .vc_row.row-container
   --------------------------------------------------------------------------
   Live: h1.h1 → 96/96 (already correct via 03-typography).
   Buttons: Book Appt = .btn-color-213373.btn-circle.btn-flat (filled blue-gray)
            Learn More = .btn.btn-default.btn-circle.btn-flat (default — needs
            outline blue-gray treatment in this scope).
   Figma sizing: 56h pill (Lrg), 28r, 18px SemiBold copy.
   ────────────────────────────────────────────────────────────────────────── */

body.home #row-unique-0 .heading-text h1.h1 {
	color: var(--sd-blue-gray) !important;
}

/* Force Lrg sizing on hero buttons (Uncode's btn-circle defaults to Med 48h) */
body.home #row-unique-0 .btn.btn-circle {
	height: 56px !important;
	min-height: 56px !important;
	padding: 0 24px !important;
	border-radius: 28px !important;
	font-size: 18px !important;
	line-height: 54px !important;
	font-weight: 600 !important;
}

/* Learn More — Uncode rendered .btn-default.btn-circle.btn-flat (no outline class).
   Style it as outline blue-gray to match Figma. */
body.home #row-unique-0 .btn.btn-default.btn-circle {
	background: transparent !important;
	border: 1px solid var(--sd-blue-gray) !important;
	color: var(--sd-blue-gray) !important;
}

body.home #row-unique-0 .btn.btn-default.btn-circle:hover,
body.home #row-unique-0 .btn.btn-default.btn-circle:focus {
	background: var(--sd-blue-gray) !important;
	color: var(--sd-white) !important;
	border-color: var(--sd-blue-gray) !important;
}


/* §3 Marquee — sitewide spec lives in 07-home-hero-cls.css §E (32/40, 20/28 @959px). */


/* ──────────────────────────────────────────────────────────────────────────
   4. Intro + 3 icons — third .vc_row (.onepage-section)
   --------------------------------------------------------------------------
   Live: intro h2 has class .h4 (32/40). Icons render `text_size="h4"` so the
         labels also get .h4. Icons themselves are images via vc_icon.
   Figma: intro h2 = 56/64, icon labels = 24/32 #114671, icon glyphs = orange.
   ────────────────────────────────────────────────────────────────────────── */

/* Intro headline override — 56/64 instead of .h4's 32/40 */
body.home .row-container.onepage-section h1.h4,
body.home .row-container.onepage-section h2.h4,
body.home .row-container.onepage-section h3.h4 {
	font-family: var(--sd-font-display) !important;
	font-size: 56px !important;
	font-weight: 500 !important;
	line-height: 64px !important;
	letter-spacing: -0.5px !important;
	color: var(--sd-blue-gray) !important;
}

/* Icon labels — bring .h4 32/40 down to 24/32 inside the icon row only */
body.home .row-container.onepage-section .vc_icon_element h1.h4,
body.home .row-container.onepage-section .vc_icon_element h2.h4,
body.home .row-container.onepage-section .vc_icon_element h3.h4,
body.home .row-container.onepage-section .vc_icon_element h4.h4,
body.home .row-container.onepage-section .vc_icon_element h5.h4,
body.home .row-container.onepage-section .vc_icon_element h6.h4,
body.home .row-container.onepage-section .vc_icon_element .h4 {
	font-family: var(--sd-font-heading) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 32px !important;
	letter-spacing: 0 !important;
	color: var(--sd-blue-gray) !important;
}

/* Icon image sizing parity (Figma uses ~63-64px square icons) */
body.home .row-container.onepage-section .vc_icon_element-inner img {
	width: 64px;
	height: auto;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. Dermatology Services — .vc_row.style-color-118909-bg.row-container
   --------------------------------------------------------------------------
   Live: headline .h1 (96/96), service items `.home-services-item` with h3
         (28px white) + p (default).
   Figma: headline 80/80 white, h3 40/48 white, p 18/26 white, chevron-right
          24px white pinned to right of card, 1px white-20% inner borders.
   ────────────────────────────────────────────────────────────────────────── */

body.home .style-color-118909-bg .heading-text h1.h1,
body.home .style-color-118909-bg .heading-text h2.h1,
body.home .style-color-118909-bg .heading-text h3.h1 {
	font-size: 80px !important;
	line-height: 80px !important;
	letter-spacing: -1px !important;
}

/* Service item container — make room for the chevron */
body.home .home-services-item {
	position: relative;
	padding-right: 56px !important;
}

/* Service title (h3) — 40/48 SemiCondensed white, kill default Uncode 28px bold */
body.home .home-services-item h3 {
	font-family: var(--sd-font-heading) !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
	letter-spacing: 0 !important;
	color: var(--sd-white) !important;
	margin: 0 !important;
	transition: color 0.2s ease-in-out;
}

/* Service description paragraph */
body.home .home-services-item p {
	font-family: var(--sd-font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	color: var(--sd-white) !important;
	margin: 8px 0 0 !important;
	opacity: 0.92;
}

/* Chevron-right pinned to the right edge — uses the existing .col-link wrap */
body.home .home-services-item .col-link.custom-link::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcfaf7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(-50%);
	transition: transform 0.2s ease-in-out;
	pointer-events: none;
}

body.home .home-services-item:hover .col-link.custom-link::after {
	transform: translate(4px, -50%);
}

body.home .home-services-item:hover h3 {
	color: var(--sd-yellow) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. Who We Are — `.who-we-are` row el_class
   --------------------------------------------------------------------------
   Live: h3.h3 (40/48), counters at .h1 (96/96, color set in shortcode to
         color-118909 = blue, NOT orange).
   Figma: h3 80/80 #114671, counters 96/96 orange #ee7f00, captions 24/32
          #114671.
   ────────────────────────────────────────────────────────────────────────── */

.who-we-are .heading-text h1.h3,
.who-we-are .heading-text h2.h3,
.who-we-are .heading-text h3.h3,
.who-we-are .heading-text [class*="fontsize-"] {
	font-family: var(--sd-font-display) !important;
	font-size: 80px !important;
	font-weight: 500 !important;
	line-height: 80px !important;
	letter-spacing: -1px !important;
	color: var(--sd-blue-gray) !important;
}

/* Force counter values to brand orange (overrides counter_color="color-118909"
   shortcode pick) and lock typography to the .h1 tier. */
.who-we-are .uncode-counter-value {
	color: var(--sd-orange) !important;
	font-family: var(--sd-font-display) !important;
	font-weight: 500 !important;
	letter-spacing: -2px !important;
}

.who-we-are .uncode-counter-text {
	font-family: var(--sd-font-heading) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 32px !important;
	color: var(--sd-blue-gray) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   7. Healthier Skin Starts Here — `.healthier-skin` (reusable content block)
   --------------------------------------------------------------------------
   Live: h2.h2 (80/80) + .text-color-213373-color blue-gray. Two buttons,
         both .btn-color-213373 (one .btn-flat, one .btn-outline).
   Figma: h2 56/64 blue-gray, beach image bg, two pill buttons.
   ────────────────────────────────────────────────────────────────────────── */

.vc_row.healthier-skin .heading-text h1.h2,
.vc_row.healthier-skin .heading-text h2.h2,
.vc_row.healthier-skin .heading-text h3.h2,
.vc_row.healthier-skin .heading-text h4.h2 {
	font-size: 56px !important;
	line-height: 64px !important;
	letter-spacing: -0.5px !important;
}

/* Lrg buttons inside the CTA banner */
.vc_row.healthier-skin .btn.btn-circle {
	height: 56px !important;
	min-height: 56px !important;
	padding: 0 24px !important;
	border-radius: 28px !important;
	font-size: 18px !important;
	line-height: 54px !important;
	font-weight: 600 !important;
}

/* "Meet The Team" pill — solid white, borderless. Default outline-dark
   variant has a 1px blue-gray border and transparent fill; override here
   (and on hover/focus/active, since 04-buttons-forms.css forces
   background-color:transparent on those states). */
.vc_row.healthier-skin .btn.btn-color-213373.btn-outline,
.vc_row.healthier-skin .btn.btn-color-213373.btn-outline:hover,
.vc_row.healthier-skin .btn.btn-color-213373.btn-outline:focus,
.vc_row.healthier-skin .btn.btn-color-213373.btn-outline:active {
	background: rgba(255, 255, 255, 1) !important;
	border: 0px !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   8. Providers (Meet Our Team) — #row-unique-7
   --------------------------------------------------------------------------
   Live: h3.h2 (80/80) ✓ already correct size. Uses Uncode isotope grid
         `.tmb.img-circle` — photos already circular. Names render as
         h3.t-entry-title.h6 (20/28). No credentials.
   Figma: 80/80 head ✓, circular photos ✓, names 40/48 SemiCondensed,
          credentials 18/26 below.
   ────────────────────────────────────────────────────────────────────────── */

body.home #row-unique-7 .heading-text h1.h2,
body.home #row-unique-7 .heading-text h2.h2,
body.home #row-unique-7 .heading-text h3.h2 {
	color: var(--sd-blue-gray) !important;
}

/* Provider name (overrides .h6 = 20/28 → Figma 40/48) */
body.home #row-unique-7 .doctorscsssp .tmb .t-entry-title,
body.home #row-unique-7 .doctorscsssp .tmb .t-entry-title.h6 {
	font-family: var(--sd-font-heading) !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
	letter-spacing: 0 !important;
	color: var(--sd-blue-gray) !important;
	margin: 0 !important;
	text-align: center;
}

body.home #row-unique-7 .doctorscsssp .tmb .t-entry-title a {
	color: var(--sd-blue-gray) !important;
	text-decoration: none;
}

body.home #row-unique-7 .doctorscsssp .tmb .t-entry-title a:hover {
	color: var(--sd-orange) !important;
}

/* Light-blue circle background behind cropped photos (matches Figma) */
body.home #row-unique-7 .doctorscsssp .tmb.img-circle .t-entry-visual-cont {
	background: var(--sd-light-blue);
	border-radius: 50%;
	overflow: hidden;
}

/* Credentials would render via the t-entry meta line if added; placeholder
   styling so it picks up cleanly when content is wired in. */
body.home #row-unique-7 .doctorscsssp .tmb .t-entry-meta,
body.home #row-unique-7 .doctorscsssp .tmb .t-entry-text .t-entry-meta {
	font-family: var(--sd-font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	color: var(--sd-blue-gray) !important;
	margin-top: 8px !important;
	text-align: center;
}


/* ──────────────────────────────────────────────────────────────────────────
   9. Locations — .sd-locations-block + .sd-communities-widget
   --------------------------------------------------------------------------
   Live: widget renders `.sd-communities-title` h2 + `.sd-community-item`
         <a> tags with map-pin SVGs and "Daphne AL", "Foley, AL", "Mobile AL".
   Figma: large numbered items "01. Mobile / 02. Daphne / 03. Foley"
          (number prefix 36px, city 56px, both Mona Sans SemiCondensed).
          No pin icons in the Figma comp.
   Approach: hide pins inside this homepage instance, add CSS counter "01.",
            uplift typography to Figma sizes. Section title gets 80/80.
   ────────────────────────────────────────────────────────────────────────── */

body.home .sd-locations-block .sd-communities-title {
	font-family: var(--sd-font-display) !important;
	font-size: 56px !important;
	font-weight: 500 !important;
	line-height: 64px !important;
	letter-spacing: -0.5px !important;
	color: var(--sd-blue-gray) !important;
	text-align: center;
	margin: 0 0 40px !important;
}

body.home .sd-locations-block .sd-communities-list {
	counter-reset: sd-loc;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	justify-content: center;
	align-items: baseline;
}

body.home .sd-locations-block .sd-community-item {
	counter-increment: sd-loc;
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--sd-font-heading) !important;
	font-size: 56px !important;
	font-weight: 400 !important;
	line-height: 64px !important;
	letter-spacing: 0 !important;
	color: var(--sd-blue-gray) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease-in-out;
}

body.home .sd-locations-block .sd-community-item:hover {
	color: var(--sd-orange) !important;
	text-decoration: none;
}

/* Hide the pin SVG in this homepage instance — Figma shows none */
body.home .sd-locations-block .sd-community-item svg {
	display: none !important;
}

/* Numbered prefix "01." / "02." / "03." */
body.home .sd-locations-block .sd-community-item::before {
	content: "0" counter(sd-loc) ".";
	font-family: var(--sd-font-heading);
	font-size: 36px;
	line-height: 64px;
	color: var(--sd-blue-gray);
	font-weight: 400;
	flex-shrink: 0;
}


/* §11 (Reviews single-item override) intentionally removed.
   Sunrise now uses Goodman's 3-up paginated layout via .sd-reviews-* rules
   in 09-components-gd.css (presentation already tokenised to Sunrise fonts
   and colors). PHP markup: includes/testimonials-section.php.
   JS:               assets/js/sd-custom.js (initReviewCarousels).            */


/* ──────────────────────────────────────────────────────────────────────────
   12. FAQ — global .uncode-accordion treatment
   --------------------------------------------------------------------------
   Applies to every Uncode native accordion on the site (Home FAQs row,
   /service/ FAQs row, and any future page that uses the same component).
   Figma: header 80/80 #114671 left, question 40/48 SemiCondensed #114671,
          1px black-20% top + last bottom borders, 32px vertical pad,
          16px ± icon right.
   The section header rule is structurally scoped via :has(.uncode-accordion)
   so it only applies to rows that actually contain an accordion.
   ────────────────────────────────────────────────────────────────────────── */

/* Header h2 downsize from .h1 96/96 to 80/80 (only the heading inside an
   accordion-bearing row) */
.vc_row.row-container:has(.uncode-accordion) .heading-text h1.h1,
.vc_row.row-container:has(.uncode-accordion) .heading-text h2.h1,
.vc_row.row-container:has(.uncode-accordion) .heading-text h3.h1 {
	font-size: 80px !important;
	line-height: 80px !important;
	letter-spacing: -1px !important;
	color: var(--sd-blue-gray) !important;
}

/* Question text — bring .h2 (80/80) down to 40/48 */
.uncode-accordion .panel-title,
.uncode-accordion .panel-title.h2 {
	font-family: var(--sd-font-heading) !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
	letter-spacing: 0 !important;
	color: var(--sd-blue-gray) !important;
	margin: 0 !important;
}

.uncode-accordion .panel-title a,
.uncode-accordion .panel-title a span {
	color: var(--sd-blue-gray) !important;
	text-decoration: none !important;
}

/* Panel borders + spacing — top border on every panel, bottom on last */
.uncode-accordion .panel.panel-default {
	background: transparent !important;
	border: none !important;
	border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
	border-radius: 0 !important;
	padding: 32px 0 !important;
	margin: 0 !important;
}

.uncode-accordion .panel.panel-default:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Strip Uncode's panel-heading default chrome */
.uncode-accordion .panel-heading {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.uncode-accordion .panel-heading .panel-title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 !important;
}

/* Kill Uncode parent theme's native icon — it's drawn as a CSS pseudo on
   .panel-title > a > span::after (chevron glyph). We render our own +/- on
   the trigger <a> below, so we suppress the inner-span pseudo and reclaim
   the 45px right-padding the parent reserves on the span (02-base-uncode.css:128). */
.uncode-accordion .panel-title > a > span::after,
.uncode-accordion .panel-title > a > span:after {
	content: none !important;
	display: none !important;
}

body:not(.rtl) .uncode-accordion:not(.none-signed) .panel-title > a > span {
	padding-right: 0 !important;
}

/* Plus/minus toggle icon — use ::after on the trigger so we control style */
.uncode-accordion .panel-title a::after {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114671' stroke-width='2' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease-in-out;
}

/* Open state — flip + to – only when the trigger reports expanded via a
   POSITIVE signal. We deliberately avoid :not(.collapsed) here — that
   matches by default on initial render (Bootstrap only adds .collapsed
   after JS runs), so it would render every panel as minus on page load.
   aria-expanded="true" is Uncode's canonical signal (same pattern as
   02-base-uncode.css:1003-1005); .active and .is-open are kept as
   fallbacks for other accordion implementations. */
.uncode-accordion .panel-title > a[aria-expanded="true"]::after,
.uncode-accordion .panel-title.active > a::after,
.uncode-accordion .panel.is-open .panel-title a::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114671' stroke-width='2' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

/* Hide Uncode's own font-icon if present */
.uncode-accordion .panel-heading .fa-plus,
.uncode-accordion .panel-heading .fa-minus,
.uncode-accordion .panel-heading .accordion-toggle-icon {
	display: none !important;
}

/* Answer body */
.uncode-accordion .panel-collapse {
	margin: 0 !important;
}

.uncode-accordion .panel-body {
	padding: 24px 0 0 !important;
	background: transparent !important;
	border: none !important;
}

.uncode-accordion .panel-body,
.uncode-accordion .panel-body p,
.uncode-accordion .panel-body li {
	font-family: var(--sd-font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	color: var(--sd-blue-gray) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   13. Responsive scale-down — 959px / 767px
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 959px) {
	/* §1 type tier */
	.h2-5,
	h1.h2-5, h2.h2-5, h3.h2-5, h4.h2-5, h5.h2-5, h6.h2-5 {
		font-size: 40px !important;
		line-height: 48px !important;
		letter-spacing: -0.5px !important;
	}

	/* §4 intro */
	body.home .row-container.onepage-section h1.h4,
	body.home .row-container.onepage-section h2.h4,
	body.home .row-container.onepage-section h3.h4 {
		font-size: 40px !important;
		line-height: 48px !important;
	}

	/* §5 services */
	body.home .style-color-118909-bg .heading-text h1.h1,
	body.home .style-color-118909-bg .heading-text h2.h1,
	body.home .style-color-118909-bg .heading-text h3.h1 {
		font-size: 48px !important;
		line-height: 52px !important;
		letter-spacing: -0.5px !important;
	}

	body.home .home-services-item h3 {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	body.home .home-services-item .col-link.custom-link::after {
		right: 8px;
	}

	/* §6 who we are */
	.who-we-are .heading-text h1.h3,
	.who-we-are .heading-text h2.h3,
	.who-we-are .heading-text h3.h3,
	.who-we-are .heading-text [class*="fontsize-"] {
		font-size: 48px !important;
		line-height: 52px !important;
		letter-spacing: -0.5px !important;
	}

	/* §7 healthier */
	.vc_row.healthier-skin .heading-text h1.h2,
	.vc_row.healthier-skin .heading-text h2.h2,
	.vc_row.healthier-skin .heading-text h3.h2,
	.vc_row.healthier-skin .heading-text h4.h2 {
		font-size: 40px !important;
		line-height: 48px !important;
	}

	/* §8 providers */
	body.home #row-unique-7 .doctorscsssp .tmb .t-entry-title,
	body.home #row-unique-7 .doctorscsssp .tmb .t-entry-title.h6 {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	/* §9 locations */
	body.home .sd-locations-block .sd-communities-title {
		font-size: 40px !important;
		line-height: 48px !important;
	}

	body.home .sd-locations-block .sd-community-item {
		font-size: 36px !important;
		line-height: 44px !important;
	}

	body.home .sd-locations-block .sd-community-item::before {
		font-size: 24px;
		line-height: 44px;
	}

	/* §11 reviews — see 09-components-gd.css for the responsive 3-up rules. */

	/* §12 FAQ */
	.vc_row.row-container:has(.uncode-accordion) .heading-text h1.h1,
	.vc_row.row-container:has(.uncode-accordion) .heading-text h2.h1,
	.vc_row.row-container:has(.uncode-accordion) .heading-text h3.h1 {
		font-size: 48px !important;
		line-height: 52px !important;
		letter-spacing: -0.5px !important;
	}

	.uncode-accordion .panel-title,
	.uncode-accordion .panel-title.h2 {
		font-size: 24px !important;
		line-height: 32px !important;
	}

	.uncode-accordion .panel.panel-default {
		padding: 24px 0 !important;
	}
}

@media (max-width: 767px) {
	/* §2 hero */
	body.home #row-unique-0 .btn.btn-circle {
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 18px !important;
		font-size: 16px !important;
		line-height: 46px !important;
	}

	/* §1 type tier */
	.h2-5,
	h1.h2-5, h2.h2-5, h3.h2-5, h4.h2-5, h5.h2-5, h6.h2-5 {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	/* §4 intro */
	body.home .row-container.onepage-section h1.h4,
	body.home .row-container.onepage-section h2.h4,
	body.home .row-container.onepage-section h3.h4 {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	/* §5 services title */
	body.home .style-color-118909-bg .heading-text h1.h1,
	body.home .style-color-118909-bg .heading-text h2.h1,
	body.home .style-color-118909-bg .heading-text h3.h1 {
		font-size: 36px !important;
		line-height: 42px !important;
	}

	body.home .home-services-item {
		padding-right: 40px !important;
	}

	body.home .home-services-item h3 {
		font-size: 24px !important;
		line-height: 32px !important;
	}

	body.home .home-services-item p {
		font-size: 16px !important;
		line-height: 24px !important;
	}

	/* §6 who we are */
	.who-we-are .heading-text h1.h3,
	.who-we-are .heading-text h2.h3,
	.who-we-are .heading-text h3.h3,
	.who-we-are .heading-text [class*="fontsize-"] {
		font-size: 36px !important;
		line-height: 42px !important;
	}

	/* §7 healthier */
	.vc_row.healthier-skin .heading-text h1.h2,
	.vc_row.healthier-skin .heading-text h2.h2,
	.vc_row.healthier-skin .heading-text h3.h2,
	.vc_row.healthier-skin .heading-text h4.h2 {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	/* §9 locations */
	body.home .sd-locations-block .sd-communities-list {
		gap: 20px 32px;
	}

	body.home .sd-locations-block .sd-community-item {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	body.home .sd-locations-block .sd-community-item::before {
		font-size: 20px;
		line-height: 36px;
	}

	.vc_row.healthier-skin .btn.btn-circle {
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 18px !important;
		font-size: 16px !important;
		line-height: 46px !important;
	}

	/* §11 reviews — see 09-components-gd.css for the responsive 3-up rules. */

	/* §12 FAQ */
	.uncode-accordion .panel-title,
	.uncode-accordion .panel-title.h2 {
		font-size: 20px !important;
		line-height: 28px !important;
	}

	.uncode-accordion .panel-heading .panel-title a {
		gap: 16px;
	}
}