/*
========================================================
   Handcrafted by ROYED
   https://royed.org/
========================================================
*/

/* -------------------------------------------------------
   01. Design tokens & reset
------------------------------------------------------- */
:root {
  --slate: #2f3437;
  --charcoal: #1b1f22;
  --gold: #c8a97e;
  --gold-light: #d8b78a;
  --ivory: #f7f4ef;
  --white: #fefcf9;
  --stone: #6b7280;
  --sage: #9aa89a;
  --ink: #202426;
  --muted: #66706e;
  --line: rgba(47, 52, 55, .14);
  --glass: rgba(254, 252, 249, .76);
  --surface: #f0ece5;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --h4: 1.5rem;
  --h3: clamp(1.75rem, 3vw, 2.5rem);
  --h2: clamp(2.5rem, 4vw, 4rem);
  --h1: clamp(3.5rem, 6vw, 5.5rem);
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;
  --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-xl: 38px; --radius-pill: 999px;
  --shadow-sm: 0 6px 20px rgba(27,31,34,.07);
  --shadow: 0 20px 50px rgba(27,31,34,.12);
  --shadow-lg: 0 32px 80px rgba(27,31,34,.18);
  --ease: cubic-bezier(.2,.75,.25,1);
  --header-h: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; color: var(--ink); background: var(--ivory); font-family: var(--sans); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
::selection { color: var(--charcoal); background: var(--gold-light); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--gold); border: 3px solid var(--ivory); border-radius: var(--radius-pill); }

/* -------------------------------------------------------
   02. Shared structure, announcement & navigation
------------------------------------------------------- */
.announcement { position: relative; z-index: 1002; padding: 7px 16px; color: #f7f4ef; background: var(--charcoal); text-align: center; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.announcement a { color: var(--gold-light); font-weight: 700; }
.progress { position: fixed; z-index: 1200; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .1s linear; }
.site-header { position: sticky; top: 12px; z-index: 1000; width: min( calc(100% - 32px), 1360px); height: var(--header-h); margin: 12px auto -94px; padding: 0 18px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: height .3s var(--ease), transform .3s var(--ease), background .3s; }
.site-header.scrolled { height: 68px; transform: translateY(-6px); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--serif); font-size: 1.28rem; font-weight: 700; letter-spacing: -.05em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--charcoal); background: var(--gold); border-radius: 50% 50% 50% 12%; font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: 0; transform: rotate(-10deg); }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 28px); font-size: .78rem; font-weight: 600; letter-spacing: .03em; }
.nav-links a { position: relative; padding: 8px 0; color: var(--muted); transition: color .2s; }
.nav-links a::after { position: absolute; bottom: 2px; left: 0; width: 0; height: 1px; content: ""; background: var(--gold); transition: width .25s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: transparent; transition: transform .2s, background .2s; }
.icon-button:hover { background: var(--surface); transform: rotate(12deg); }
.menu-toggle { display: none; }
.mobile-menu { position: fixed; z-index: 999; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 120px 32px 48px; color: var(--white); background: var(--charcoal); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .35s var(--ease); }
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { font-family: var(--serif); font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.1; }
.mobile-menu .mobile-cta { margin-top: 20px; font-family: var(--sans); font-size: .9rem; }

/* -------------------------------------------------------
   03. Reusable type, layouts, cards & buttons
------------------------------------------------------- */
.container { width: min(100% - 48px, 1240px); margin-inline: auto; }
.narrow { width: min(100% - 48px, 840px); margin-inline: auto; }
.section { padding: var(--s9) 0; }
.section-sm { padding: var(--s8) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s3); color: var(--gold); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { width: 32px; height: 1px; content: ""; background: currentColor; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
h1 { max-width: 980px; margin-bottom: var(--s4); font-size: var(--h1); }
h2 { margin-bottom: var(--s4); font-size: var(--h2); }
h3 { margin-bottom: var(--s3); font-size: var(--h3); }
h4 { margin-bottom: var(--s2); font-size: var(--h4); }
.lead { max-width: 650px; color: var(--muted); font-size: var(--text-lg); line-height: 1.8; }
.text-gold { color: var(--gold); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: var(--s6); }
.section-heading h2 { max-width: 690px; margin-bottom: 0; }
.section-heading .lead { margin-bottom: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 23px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { color: var(--charcoal); background: var(--gold); box-shadow: 0 10px 20px rgba(200,169,126,.25); }
.btn-primary:hover { background: var(--gold-light); box-shadow: 0 15px 26px rgba(200,169,126,.35); }
.btn-dark { color: var(--ivory); background: var(--charcoal); }
.btn-dark:hover { box-shadow: var(--shadow); }
.btn-outline { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-outline:hover { background: var(--surface); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: .7rem; }
.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.glass-card { border: 1px solid rgba(254,252,249,.5); border-radius: var(--radius); background: rgba(254,252,249,.8); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.image-wrap { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); }
.image-wrap img { height: 100%; transition: transform .7s var(--ease); }
.image-wrap:hover img { transform: scale(1.045); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; color: var(--charcoal); border-radius: var(--radius-pill); background: var(--gold-light); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-list { display: grid; gap: 13px; padding: 0; margin: var(--s4) 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
.feature-list svg { width: 18px; flex: none; margin-top: 4px; color: var(--gold); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.verified { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.verified svg { width: 14px; color: var(--sage); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }.reveal[data-delay="2"] { transition-delay: .2s; }.reveal[data-delay="3"] { transition-delay: .3s; }

/* -------------------------------------------------------
   04. Home
------------------------------------------------------- */
.hero { position: relative; min-height: 880px; padding: 188px 0 96px; overflow: clip; }
.hero::before { position: absolute; z-index: -1; top: 160px; right: -10%; width: 47vw; height: 47vw; max-height: 720px; max-width: 720px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(200,169,126,.21), transparent 68%); filter: blur(7px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr); align-items: center; gap: clamp(40px, 7vw, 112px); }
.hero-copy { padding-top: 30px; }
.hero-copy h1 em { color: var(--gold); font-style: italic; }
.hero-visual { position: relative; min-height: 570px; }
.hero-main-image { position: absolute; inset: 0 0 20px 8%; overflow: hidden; border-radius: 200px 200px 32px 32px; box-shadow: var(--shadow-lg); }
.hero-main-image img { height: 100%; }
.float-card { position: absolute; z-index: 2; padding: 17px 19px; color: var(--charcoal); }
.float-card strong { display: block; font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.float-card small { display: block; margin-top: 4px; color: #56605c; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.float-rating { top: 12%; left: 0; }.float-tech { right: -2%; bottom: 3%; }.float-satisfaction { bottom: 14%; left: -4%; }
.float-card .stars { margin-bottom: 4px; font-size: .75rem; }
.stats-ribbon { position: relative; z-index: 3; margin-top: -1px; color: var(--ivory); background: var(--charcoal); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { min-height: 150px; padding: 32px 24px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(247,244,239,.14); }
.stat:last-child { border: none; }.stat strong { color: var(--gold-light); font-family: var(--serif); font-size: clamp(2rem,3vw,3.2rem); font-weight: 500; line-height: 1; }.stat span { margin-top: 8px; color: #c9cbc5; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-card { position: relative; min-height: 430px; padding: 28px; display: flex; flex-direction: column; justify-content: end; color: #fefcf9; overflow: hidden; border-radius: var(--radius-lg); isolation: isolate; }
.service-card::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, transparent 20%, rgba(20,24,25,.82)); }.service-card img { position: absolute; z-index: -2; inset: 0; height: 100%; transition: transform .7s var(--ease); }.service-card:hover img { transform: scale(1.06); }.service-card h3 { color: #fff; font-size: 2rem; }.service-card p { margin-bottom: 0; color: rgba(255,255,255,.76); font-size: .88rem; }
.comparison-section { color: #f7f4ef; background: var(--charcoal); }.comparison-section h2 { color: #f7f4ef; }.comparison-section .lead { color: #c7cbc7; }
.compare-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.comparison { position: relative; aspect-ratio: 1.32; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); user-select: none; }.comparison .after-img, .comparison .before-img { position: absolute; inset: 0; height: 100%; }.comparison .before-img { z-index: 2; width: 50%; overflow: hidden; border-right: 2px solid var(--gold); }.comparison .before-img img, .comparison .after-img img { width: auto; min-width: 100%; max-width: none; height: 100%; }.comparison-label { position: absolute; z-index: 4; top: 18px; padding: 7px 11px; color: #fff; border-radius: var(--radius-pill); background: rgba(27,31,34,.68); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.label-before { left: 18px; }.label-after { right: 18px; }.comparison input { position: absolute; z-index: 5; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; }.compare-handle { position: absolute; z-index: 3; top: calc(50% - 22px); left: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; color: var(--charcoal); border-radius: 50%; background: var(--gold-light); pointer-events: none; }.compare-handle svg { width: 20px; }
.experience-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,7vw,100px); align-items: center; }.experience-image { height: 640px; }.amenity-list { display: grid; gap: 0; margin-top: var(--s5); }.amenity { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }.amenity:last-child { border-bottom: 1px solid var(--line); }.amenity-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--gold); border-radius: 50%; background: var(--surface); }.amenity h4 { margin: 0 0 3px; font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; }.amenity p { margin: 0; color: var(--muted); font-size: .9rem; }
.testimonial-masonry { columns: 3; column-gap: 18px; }.quote-card { break-inside: avoid; margin: 0 0 18px; padding: 28px; }.quote-card p { margin: 18px 0 24px; font-family: var(--serif); font-size: 1.18rem; line-height: 1.45; }.reviewer { display: flex; align-items: center; gap: 11px; }.reviewer img { width: 38px; height: 38px; border-radius: 50%; }.reviewer strong { display: block; font-size: .83rem; }.reviewer span { color: var(--muted); font-size: .72rem; }
.booking-panel { padding: clamp(32px,6vw,80px); overflow: hidden; color: #f7f4ef; border-radius: var(--radius-xl); background: linear-gradient(120deg, #2f3437, #1b1f22); }.booking-panel h2 { max-width: 650px; color: #f7f4ef; }.booking-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 80px; align-items: end; }.booking-panel .lead { color: #cbd0ca; }.schedule-mockup { padding: 20px; color: var(--ink); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg); }.schedule-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 800; }.schedule-days { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top: 14px; }.schedule-days span { padding: 11px 5px; border-radius: 9px; background: var(--surface); text-align: center; font-size: .7rem; font-weight: 700; }.schedule-days span.active { color: var(--charcoal); background: var(--gold); }

/* -------------------------------------------------------
   05. Inner pages & sections
------------------------------------------------------- */
.page-hero { position: relative; min-height: 590px; display: flex; align-items: end; padding: 190px 0 86px; overflow: hidden; color: #fff; background: var(--charcoal); }.page-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(20,23,24,.83) 8%, rgba(20,23,24,.42) 68%, rgba(20,23,24,.15)); }.page-hero .container { position: relative; z-index: 1; }.page-hero h1 { max-width: 780px; color: #fff; }.page-hero .lead { color: rgba(255,255,255,.78); }.page-hero img { position: absolute; inset: 0; height: 100%; }.page-hero .eyebrow { color: var(--gold-light); }
.intro-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,8vw,130px); align-items: start; }.intro-grid .lead { max-width: none; }
.spotlight { display: grid; grid-template-columns: .95fr 1.05fr; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); }.spotlight-image { min-height: 640px; }.spotlight-copy { padding: clamp(32px,7vw,96px); }.credentials { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }.credential { padding: 7px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; }.signature { margin-top: 30px; color: var(--gold); font-family: cursive; font-size: 2.4rem; transform: rotate(-5deg); }
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.team-card .team-photo { height: 360px; }.team-card .team-body { padding: 20px; }.team-card h3 { margin-bottom: 5px; font-size: 1.65rem; }.team-title { display: block; margin-bottom: 11px; color: var(--gold); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }.team-card p { margin: 0; color: var(--muted); font-size: .87rem; }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.value-card { padding: 26px 20px; border-top: 1px solid var(--gold); background: var(--white); }.value-card svg { width: 24px; margin-bottom: 32px; color: var(--gold); }.value-card h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }.value-card p { margin: 0; color: var(--muted); font-size: .8rem; }
.timeline { position: relative; display: grid; gap: 0; max-width: 900px; margin: auto; }.timeline::before { position: absolute; top: 0; bottom: 0; left: 110px; width: 1px; content: ""; background: var(--line); }.timeline-item { display: grid; grid-template-columns: 90px 1fr; gap: 38px; padding: 26px 0; }.timeline-year { color: var(--gold); font-size: .78rem; font-weight: 800; }.timeline-content { position: relative; }.timeline-content::before { position: absolute; top: 5px; left: -44px; width: 12px; height: 12px; content: ""; border: 3px solid var(--ivory); border-radius: 50%; background: var(--gold); }.timeline-content h3 { margin-bottom: 6px; font-size: 1.5rem; }.timeline-content p { margin: 0; color: var(--muted); }
.secondary-nav { position: sticky; z-index: 950; top: 92px; display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 34px); width: min(calc(100% - 48px), 1240px); margin: 18px auto 0; padding: 14px 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(254,252,249,.94); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); white-space: nowrap; }.secondary-nav a { color: var(--slate); font-size: .72rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; transition: color .2s, transform .2s; }.secondary-nav a:hover, .secondary-nav a:focus-visible { color: var(--gold); transform: translateY(-1px); }
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,7vw,100px); align-items: center; padding: var(--s9) 0; border-bottom: 1px solid var(--line); }.service-detail.reverse .service-image { order: 2; }.service-image { min-height: 500px; }.service-detail p { color: var(--muted); }.service-number { color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
.benefits-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }.benefit-card { padding: 28px; min-height: 230px; }.benefit-card svg { width: 30px; margin-bottom: 36px; color: var(--gold); }.benefit-card h3 { font-size: 1.55rem; }.benefit-card p { margin: 0; color: var(--muted); font-size: .87rem; }
.treatment-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }.treatment-step { position: relative; padding: 0 26px 25px; border-left: 1px solid var(--line); }.treatment-step:first-child { border: 0; }.step-number { display: block; margin-bottom: 32px; color: var(--gold); font-family: var(--serif); font-size: 3rem; line-height: 1; }.treatment-step h3 { font-size: 1.35rem; }.treatment-step p { margin: 0; color: var(--muted); font-size: .85rem; }
.assessment { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border-radius: var(--radius-xl); background: var(--charcoal); }.assessment-copy { padding: clamp(32px,7vw,88px); color: #fff; }.assessment-copy h2 { color: #fff; }.assessment-copy p { color: #c8ceca; }.assessment-panel { padding: clamp(32px,6vw,72px); background: var(--white); }.assessment-panel h3 { max-width: 430px; }.assessment-panel .feature-list { margin: 26px 0; }.form-note { display: block; margin-top: 12px; color: var(--muted); font-size: .72rem; }
.results-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.result-card { position: relative; overflow: hidden; border-radius: var(--radius); }.result-card img { height: 390px; }.result-card::after { position: absolute; inset: 40% 0 0; content: ""; background: linear-gradient(transparent,rgba(20,24,25,.85)); }.result-caption { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; color: #fff; }.result-caption h3 { margin: 6px 0; color: #fff; font-size: 1.4rem; }.result-caption span { font-size: .73rem; }
.financing { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 56px; border-radius: var(--radius-xl); background: var(--gold); }.financing h2 { margin: 0 0 10px; font-size: clamp(2.1rem,4vw,3.6rem); }.financing p { max-width: 620px; margin: 0; color: #4a4034; }
.expect-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }.expect-card { padding: 28px; }.expect-card span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 52px; color: var(--charcoal); border-radius: 50%; background: var(--gold-light); font-family: var(--serif); }.expect-card h3 { font-size: 1.4rem; }.expect-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.forms-grid, .comfort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.download-card { padding: 28px; }.download-card svg, .comfort-card svg { width: 28px; color: var(--gold); }.download-card h3, .comfort-card h3 { margin-top: 28px; font-size: 1.4rem; }.download-card p, .comfort-card p { color: var(--muted); font-size: .86rem; }.download-card .btn { margin-top: 10px; }.insurance-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; padding: 52px; border-radius: var(--radius-xl); background: var(--surface); }.insurance-panel h3 { font-size: 2rem; }.insurance-panel p { color: var(--muted); }.insurance-logos { display: flex; flex-wrap: wrap; gap: 10px; }.insurance-logos span { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); background: var(--white); font-size: .73rem; font-weight: 800; }
.faq { max-width: 900px; margin: auto; border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 25px 0; color: var(--ink); background: none; text-align: left; font-family: var(--serif); font-size: 1.45rem; }.faq-question svg { width: 20px; transition: transform .3s var(--ease); }.faq-item.active .faq-question svg { transform: rotate(45deg); }.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }.faq-answer > div { overflow: hidden; }.faq-answer p { padding: 0 0 0; margin: 0; color: var(--muted); }.faq-item.active .faq-answer { grid-template-rows: 1fr; }.faq-item.active .faq-answer p { padding-bottom: 24px; }
.video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.video-card { position: relative; min-height: 410px; display: flex; align-items: end; padding: 25px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; isolation: isolate; }.video-card::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg,rgba(20,24,25,.05),rgba(20,24,25,.83)); }.video-card img { position: absolute; z-index: -2; inset: 0; height: 100%; }.video-card h3 { margin-bottom: 5px; color: #fff; font-size: 1.65rem; }.video-card p { margin: 0; color: rgba(255,255,255,.72); font-size: .8rem; }.play-button { position: absolute; top: 25px; left: 25px; display: grid; place-items: center; width: 54px; height: 54px; color: var(--charcoal); border-radius: 50%; background: var(--gold-light); }.play-button svg { width: 21px; margin-left: 3px; }.story-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.story-card { padding: 25px; color: #fff; border-radius: var(--radius); background: var(--slate); }.story-card:nth-child(even) { color: var(--ink); background: var(--gold); }.story-card .badge { margin-bottom: 38px; }.story-card h3 { color: inherit; font-size: 1.55rem; }.story-card p { margin: 0; opacity: .77; font-size: .85rem; }
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.contact-card { min-height: 250px; padding: 30px; }.contact-card svg { width: 28px; color: var(--gold); }.contact-card h3 { margin-top: 42px; font-size: 1.6rem; }.contact-card p, .contact-card a { color: var(--muted); font-size: .95rem; }.map { min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #dce0d5; box-shadow: var(--shadow-sm); }.map iframe { display: block; width: 100%; height: 500px; border: 0; filter: saturate(.72) contrast(.96); }.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }.hours-list { margin: 0; padding: 0; list-style: none; }.hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }.hours-list li span:last-child { color: var(--muted); text-align: right; }.getting-list { display: grid; gap: 16px; }.getting-item { display: grid; grid-template-columns: 35px 1fr; gap: 12px; }.getting-item svg { width: 20px; color: var(--gold); }.getting-item h4 { margin: 0 0 3px; font-family: var(--sans); font-size: .95rem; font-weight: 800; letter-spacing: 0; }.getting-item p { margin: 0; color: var(--muted); font-size: .86rem; }

/* -------------------------------------------------------
   06. Footer & floating controls
------------------------------------------------------- */
.site-footer { margin-top: var(--s9); padding: 80px 0 22px; color: #f7f4ef; background: var(--charcoal); }.footer-cta { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.14); }.footer-cta h2 { max-width: 580px; margin: 0; color: #fff; font-size: clamp(2.2rem,4vw,3.6rem); }.footer-cta .button-row { margin: 0; flex: none; }.site-footer .btn-outline { color: #f7f4ef; border-color: rgba(247,244,239,.48); background: transparent; }.site-footer .btn-outline:hover { color: var(--charcoal); border-color: var(--gold-light); background: var(--gold-light); }.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding: 58px 0; }.footer-brand p { max-width: 260px; color: #b9bfba; font-size: .86rem; }.footer-heading { margin: 0 0 14px; color: var(--gold-light); font-family: var(--sans); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.footer-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }.footer-list a, .footer-list li { color: #d2d6d1; font-size: .83rem; }.footer-list a:hover { color: var(--gold-light); }.social-links { display: flex; gap: 8px; margin-top: 20px; }.social-links a { display: grid; place-items: center; width: 35px; height: 35px; color: var(--charcoal); border-radius: 50%; background: var(--gold-light); font-size: .73rem; font-weight: 800; transition: transform .2s; }.social-links a:hover { transform: translateY(-3px); }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); color: #969d98; font-size: .72rem; }.footer-bottom a { color: var(--gold-light); }.footer-bottom .legal { display: flex; gap: 14px; }.back-to-top { position: fixed; z-index: 500; right: 24px; bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--charcoal); border-radius: 50%; background: var(--gold-light); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .25s var(--ease); }.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }.back-to-top svg { width: 19px; }

/* -------------------------------------------------------
   07. Responsive
------------------------------------------------------- */
@media (max-width: 1100px) { .nav-links { gap: 14px; }.nav-links a { font-size: .7rem; }.services-grid { grid-template-columns: repeat(2,1fr); }.values-grid { grid-template-columns: repeat(3,1fr); }.benefits-grid { grid-template-columns: repeat(2,1fr); }.expect-grid { grid-template-columns: repeat(2,1fr); }.story-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { :root { --header-h: 72px; }.nav-links, .header-actions .btn { display: none; }.menu-toggle { display: grid; }.hero { min-height: auto; padding-top: 160px; }.hero-grid, .compare-grid, .experience-grid, .booking-grid, .spotlight, .assessment, .service-detail, .intro-grid, .insurance-panel, .hours-grid { grid-template-columns: 1fr; }.hero-copy { padding-top: 0; }.hero-visual { min-height: 480px; }.hero-main-image { inset-left: 6%; }.compare-grid { gap: 38px; }.experience-image { height: 480px; }.booking-grid { gap: 30px; }.spotlight-image { min-height: 460px; }.team-grid { grid-template-columns: repeat(2,1fr); }.treatment-steps { grid-template-columns: repeat(2,1fr); gap: 28px 0; }.results-grid { grid-template-columns: repeat(2,1fr); }.contact-grid { grid-template-columns: 1fr 1fr; }.footer-main { grid-template-columns: 1.5fr 1fr 1fr; }.footer-main > :last-child { grid-column: span 3; }.service-detail.reverse .service-image { order: initial; }.service-image { min-height: 420px; }.section-heading { align-items: start; flex-direction: column; margin-bottom: 40px; }.section-heading .lead { max-width: 650px; }.secondary-nav { position: relative; top: auto; justify-content: flex-start; width: calc(100% - 32px); margin-top: 14px; border-radius: var(--radius-sm); } }
@media (max-width: 640px) { .container, .narrow { width: min(100% - 32px, 1240px); }.site-header { width: calc(100% - 20px); top: 5px; margin-top: 5px; padding: 0 12px 0 17px; }.brand { font-size: 1.1rem; }.brand-mark { width: 30px; height: 30px; }.hero { padding: 135px 0 70px; }.hero-visual { min-height: 390px; margin-top: 5px; }.hero-main-image { inset: 0 0 18px 5%; border-radius: 120px 120px 23px 23px; }.float-card { padding: 11px 12px; }.float-card strong { font-size: 1.1rem; }.float-card small { font-size: .57rem; }.float-rating { top: 4%; }.float-satisfaction { bottom: 2%; }.float-tech { right: -3%; bottom: 25%; }.stats-grid { grid-template-columns: 1fr 1fr; }.stat { min-height: 115px; padding: 22px 16px; border-bottom: 1px solid rgba(255,255,255,.14); }.stat:nth-child(2) { border-right: none; }.stat:nth-child(3), .stat:nth-child(4) { border-bottom: 0; }.services-grid, .team-grid, .benefits-grid, .forms-grid, .comfort-grid, .video-grid, .contact-grid, .results-grid { grid-template-columns: 1fr; }.service-card { min-height: 350px; }.section { padding: 82px 0; }.section-sm { padding: 65px 0; }.testimonial-masonry { columns: 1; }.experience-image { height: 400px; }.page-hero { min-height: 530px; padding: 150px 0 62px; }.page-hero::after { background: linear-gradient(90deg, rgba(20,23,24,.8), rgba(20,23,24,.38)); }.spotlight-copy, .assessment-copy { padding: 32px 24px; }.spotlight-image { min-height: 360px; }.values-grid { grid-template-columns: 1fr 1fr; }.value-card { padding: 20px 16px; }.timeline::before { left: 73px; }.timeline-item { grid-template-columns: 56px 1fr; gap: 28px; }.timeline-content::before { left: -34px; }.service-detail { padding: 75px 0; }.service-image { min-height: 350px; }.treatment-steps { grid-template-columns: 1fr; }.treatment-step { padding-left: 20px; }.financing { grid-template-columns: 1fr; padding: 33px 24px; gap: 22px; }.expect-grid { grid-template-columns: 1fr; }.insurance-panel { padding: 30px 24px; gap: 25px; }.faq-question { font-size: 1.2rem; }.story-grid { grid-template-columns: 1fr; }.map { min-height: 390px; }.footer-cta { align-items: flex-start; flex-direction: column; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-main > :first-child, .footer-main > :last-child { grid-column: span 2; }.footer-bottom { align-items: flex-start; flex-direction: column; }.footer-bottom .legal { flex-wrap: wrap; }.announcement { font-size: .64rem; }.back-to-top { right: 14px; bottom: 14px; } }
@media (max-width: 380px) { h1 { font-size: 3rem; }.btn { width: 100%; }.button-row { display: grid; }.values-grid { grid-template-columns: 1fr; }.footer-main { grid-template-columns: 1fr; }.footer-main > :first-child, .footer-main > :last-child { grid-column: auto; }.schedule-days { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } }