/* ========================================
VeraVita Clinic — Design System
Based on Curevo Webflow Template
======================================== */
/* Google Fonts loaded via in HTML — no @import needed */
/* ---- Variables ---- */
:root {
--dark: #1e3528;
--dark-2: #2d5040;
--body-text: #3a3a3a;
--gray-3: #7a9e8a;
--gray-4: #dceada;
--gray-5: #c2d4c2;
--gray-6: #eaf2ea;
--primary: #728C69;
--accent: #728C69;
--green: #728C69;
--green-pale: #eef3ec;
--white: #ffffff;
--font-h: 'Libre Caslon Text', Georgia, serif;
--font-b: 'DM Sans', Arial, sans-serif;
--max-w: 1460px;
--mid-w: 1220px;
--inn-w: 980px;
--gap: 1.875rem;
--r-btn: 6.25rem;
--r-sm: 0.375rem;
--r-inp: 0.625rem;
--r-card: 1.25rem;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--dur: 0.35s;
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; scroll-behavior: smooth; }
/* Desktop perf: skip rendering off-screen sections until near viewport */
@media (min-width: 861px) {
.services-accord-section,
.anim-testimonials,
.about-home-section,
.sf-footer {
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}
}
body { font-family: var(--font-b); font-size: 1rem; line-height: 1.65; color: var(--body-text); background: var(--white); overflow-x: hidden; padding-top: 72px; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); font-weight: 400; line-height: 1.12; color: var(--dark); }
h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
em { font-style: italic; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
/* ---- Containers ---- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); }
.container-medium { width: 100%; max-width: var(--mid-w); margin: 0 auto; padding: 0 var(--gap); }
.container-inner { width: 100%; max-width: var(--inn-w); margin: 0 auto; padding: 0 var(--gap); }
/* ---- Section spacing ---- */
section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.section-lg { padding: 8rem 0; }
/* ---- Section label pill ---- */
.section-label {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.8125rem; font-weight: 500; color: var(--body-text);
text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1.125rem;
}
.section-label::before {
content: ''; display: inline-block;
width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
/* ---- Pricing section tag ---- */
.section-tag {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--primary);
}
/* ---- Section header (centred) ---- */
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header .section-label { justify-content: center; }
.section-header h2 { margin-bottom: 1rem; }
.section-header > p { font-size: 1.0625rem; color: var(--body-text); max-width: 560px; margin: 0 auto; }
/* ========================================
BUTTONS
======================================== */
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.875rem 2rem; border-radius: var(--r-btn);
font-size: 0.9375rem; font-weight: 500; font-family: var(--font-b);
border: 2px solid transparent; transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease), color var(--dur) var(--ease),
transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
cursor: pointer; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.btn-primary { background: #728C69; color: #fff; border-color: #728C69; }
.btn-primary:hover { background: #5d7355; border-color: #5d7355; }
.btn-dark { background: var(--dark); color: var(--white); border-color: var(--dark); }
.btn-dark:hover { background: var(--dark-2); }
.btn-outline { background: transparent; color: var(--dark); border-color: var(--dark); }
.btn-outline:hover { background: var(--dark); color: var(--white); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-outline-white:hover { background: var(--white); color: var(--dark); border-color: var(--white); }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
.btn-lg { padding: 1.0625rem 2.5rem; font-size: 1rem; }
/* ========================================
NAVBAR
======================================== */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
padding: 1.125rem 0;
transition: border-color var(--dur), box-shadow var(--dur), padding var(--dur);
}
.navbar--scrolled {
border-color: var(--gray-5);
box-shadow: 0 2px 24px rgba(38,51,45,0.08);
padding: 0.75rem 0;
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative; }
/* Logo */
.navbar-logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-img--mobile { display: none; }
.logo-icon {
width: 40px; height: 40px; border-radius: 50%;
background: var(--dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-icon svg { width: 20px; height: 20px; }
.logo-text { font-family: var(--font-h); font-size: 1.375rem; color: var(--dark); font-weight: 700; letter-spacing: -0.02em; }
/* Nav links */
.navbar-nav {
display: flex; align-items: center; gap: 0.125rem;
flex: 0 0 auto;
background: var(--white);
border: 1px solid var(--gray-5);
border-radius: 100px;
padding: 4px;
box-shadow: 0 1px 4px rgba(38,51,45,0.05);
position: absolute; left: 50%; transform: translateX(-50%);
overflow: visible;
}
.nav-link {
padding: 0.5rem 1rem; font-size: 0.9375rem; color: var(--dark);
border-radius: 100px; transition: background var(--dur), color var(--dur);
display: flex; align-items: center; gap: 0.3rem; font-weight: 400;
}
.nav-link:hover, .nav-link.active { background: var(--gray-6); color: var(--dark-2); }
/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%);
background: var(--white); border: 1px solid var(--gray-5); border-radius: var(--r-card);
padding: 0.5rem; min-width: 220px;
box-shadow: 0 12px 40px rgba(0,0,0,0.12);
opacity: 0; visibility: hidden;
transition: opacity var(--dur), visibility var(--dur), transform var(--dur);
transform: translateX(-50%) translateY(-6px);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: block; padding: 0.5625rem 1rem; font-size: 0.9375rem;
color: var(--dark); border-radius: var(--r-sm);
transition: background var(--dur);
}
.nav-dropdown-menu a:hover { background: var(--gray-6); }
/* Enhanced dropdown items with icons */
.nav-dd-item {
display: flex !important; align-items: center; gap: 0.875rem;
padding: 0.75rem 1rem !important;
}
.nav-dd-item:not(:last-child) { margin-bottom: 0.125rem; }
.nav-dd-icon {
width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
background: var(--gray-6); display: flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 0.875rem;
transition: background var(--dur), color var(--dur);
}
.nav-dd-item:hover .nav-dd-icon { background: var(--primary); color: var(--white); }
.nav-dd-text { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-dd-text strong { font-size: 0.9rem; font-weight: 500; color: var(--dark); line-height: 1; }
.nav-dd-text span { font-size: 0.775rem; color: var(--body-text); line-height: 1; font-weight: 400; }
/* CTA button */
.btn-nav {
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 0.6875rem 1.375rem; background: var(--dark); color: var(--white);
border-radius: var(--r-btn); font-size: 0.9375rem; font-weight: 500;
transition: background var(--dur), transform var(--dur);
flex-shrink: 0;
}
.btn-nav:hover { background: var(--dark-2); transform: translateY(-1px); }
.btn-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
/* Animated wave underline on nav CTA */
.btn-nav--wave { overflow: visible; }
.btn-nav-text-wrap { position: relative; display: inline-block; }
.btn-nav-wave-svg {
position: absolute;
bottom: -7px;
left: 0;
pointer-events: none;
color: var(--primary);
}
.btn-nav-wave-path {
stroke-dasharray: 400;
stroke-dashoffset: 400;
}
/* Mobile toggle */
.navbar-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; background: none; border: none; cursor: pointer; }
.navbar-toggle span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
/* Hamburger → X animation */
.navbar-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ========================================
HERO
======================================== */
.hero { background: var(--gray-6); padding: 5rem 0 0; overflow: visible; min-height: calc(100vh - 80px); display: flex; align-items: center; }
.hero > .container { width: 100%; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; }
.hero-inner--centered { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 80px); padding: 6rem 0; }
.hero-content { padding: 5rem 0 5rem; }
.hero-content--centered { text-align: center; max-width: 720px; padding: 0; }
.hero-content--centered .hero-title { font-size: clamp(3.5rem, 6.5vw, 5.5rem); }
.hero-content--centered .hero-subtitle { max-width: 560px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.8); }
.hero-content--centered .hero-actions { justify-content: center; }
.hero-tag {
display: inline-flex; align-items: center; gap: 0.625rem;
background: var(--white); border: 1px solid var(--gray-5); border-radius: var(--r-btn);
padding: 0.4375rem 1.125rem; font-size: 0.875rem; color: var(--dark); margin-bottom: 1.75rem;
}
.hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.hero-tag-line { display: inline-block; width: 24px; height: 1px; background: var(--primary); flex-shrink: 0; }
.hero-tag-text { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; font-weight: 500; }
.hero--dark .hero-tag-line { background: var(--primary); }
.hero-title { font-size: clamp(3rem, 5.5vw, 4.75rem); color: var(--dark); margin-bottom: 1.5rem; line-height: 1.08; }
.hero-title em { color: var(--body-text); }
.hero-subtitle { font-size: 1.0625rem; color: var(--body-text); max-width: 500px; margin-bottom: 2.5rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-image-wrap { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; }
.hero-image {
width: 100%; max-width: 560px; height: 580px; object-fit: cover;
border-radius: 1.5rem 1.5rem 0 0;
display: block;
}
.hero-badge {
position: absolute; bottom: 3.5rem; left: 1.5rem;
background: var(--white); border-radius: var(--r-card); padding: 1rem 1.375rem;
box-shadow: 0 12px 40px rgba(38,51,45,0.15);
display: flex; align-items: center; gap: 1rem;
}
.hero-badge-left {}
.hero-badge-stars { color: #f5a623; font-size: 0.875rem; letter-spacing: 2px; line-height: 1; margin-bottom: 0.25rem; }
.hero-badge-score { font-family: var(--font-h); font-size: 1.75rem; color: var(--dark); line-height: 1; }
.hero-badge-score sup { font-size: 1rem; font-family: var(--font-b); vertical-align: super; }
.hero-badge-label { font-size: 0.8125rem; color: var(--body-text); line-height: 1.4; }
/* ========================================
MARQUEE
======================================== */
.marquee-section { background: var(--white); padding: 3.5rem 0; overflow: hidden; border-bottom: 1px solid var(--gray-5); }
.marquee-label { text-align: center; font-size: 0.875rem; color: var(--body-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2rem; }
.marquee-wrap { overflow: hidden; }
.marquee-track {
display: flex; gap: 1.25rem; width: max-content;
animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-img {
width: 280px; height: 180px; object-fit: cover;
border-radius: var(--r-card); flex-shrink: 0;
transition: transform var(--dur);
}
.marquee-img:hover { transform: scale(1.03); }
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ========================================
WHY CHOOSE US
======================================== */
.why-us { background: var(--white); }
.why-us-header {
display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
align-items: start; margin-bottom: 3.5rem;
}
.why-us-title { font-size: clamp(2rem, 3.5vw, 2.75rem); }
.why-us-right p { font-size: 1.0625rem; color: var(--body-text); line-height: 1.75; margin-bottom: 2rem; }
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.why-card {
background: var(--gray-6); border-radius: var(--r-card); padding: 2rem;
border: 1px solid transparent;
transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.why-card:hover { border-color: var(--gray-4); box-shadow: 0 16px 48px rgba(38,51,45,0.1); transform: translateY(-4px); }
.why-card-icon {
width: 52px; height: 52px; border-radius: 50%; background: var(--dark);
display: flex; align-items: center; justify-content: center; margin-bottom: 1.375rem;
}
.why-card-icon i { color: var(--primary); font-size: 1.25rem; }
.why-card h4 { font-family: var(--font-b); font-weight: 600; font-size: 1rem; color: var(--dark); margin-bottom: 0.625rem; }
.why-card p { font-size: 0.9375rem; color: var(--body-text); margin: 0; line-height: 1.65; }
/* ========================================
SERVICES TABS
======================================== */
.services-tabs-section { background: var(--gray-6); }
.tabs-nav { display: flex; align-items: center; justify-content: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 3rem; }
.tab-btn {
padding: 0.625rem 1.5rem; border-radius: var(--r-btn);
border: 1px solid var(--gray-5); background: var(--white);
color: var(--dark); font-size: 0.9375rem; font-family: var(--font-b);
cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.tab-btn:hover { border-color: var(--dark); }
.tab-btn.active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--r-card); margin-bottom: 2.5rem; }
.tab-content { max-width: 780px; }
.tab-content .section-label { margin-bottom: 0.875rem; }
.tab-content h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1.25rem; }
.tab-content p { font-size: 1rem; color: var(--body-text); line-height: 1.75; margin-bottom: 1.5rem; }
.tab-list { margin-bottom: 2rem; }
.tab-list li {
display: flex; align-items: flex-start; gap: 0.875rem;
padding: 0.75rem 0; font-size: 0.9375rem; color: var(--body-text);
border-bottom: 1px solid var(--gray-5);
}
.tab-list li:last-child { border-bottom: none; }
.tab-list i { color: var(--primary); font-size: 1rem; margin-top: 3px; flex-shrink: 0; background: var(--dark); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.tab-list strong { color: var(--dark); display: block; margin-bottom: 0.125rem; }
/* ========================================
HOW IT WORKS
======================================== */
.how-it-works { background: var(--dark); color: var(--white); }
.how-it-works .section-label { color: var(--gray-3); }
.how-it-works h2 { color: var(--white); }
.how-it-works .section-header > p { color: var(--gray-3); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.step-card { text-align: center; padding: 2.5rem 2rem; border-radius: var(--r-card); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: border-color var(--dur), background var(--dur); }
.step-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(45,80,64,0.20); }
.step-num { font-family: var(--font-h); font-size: 3.5rem; color: rgba(45,80,64,0.14); line-height: 1; margin-bottom: 1rem; }
.step-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(45,80,64,0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.step-icon i { color: var(--primary); font-size: 1.375rem; }
.step-card h4 { font-family: var(--font-b); font-weight: 600; font-size: 1.125rem; color: var(--white); margin-bottom: 0.75rem; }
.step-card p { font-size: 0.9375rem; color: var(--gray-3); margin: 0; line-height: 1.65; }
/* ========================================
STATS BAR
======================================== */
.stats-section { background: var(--gray-4); padding: 5rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.stat-item { text-align: center; }
.stat-number { font-family: var(--font-h); font-size: clamp(2.25rem,4vw,3rem); color: var(--dark); display: block; margin-bottom: 0.375rem; line-height: 1; }
.stat-label { font-size: 0.9375rem; color: var(--body-text); }
/* ========================================
TEAM
======================================== */
/* ---- Curevo-style team section ---- */
.tmd-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/Underlay pic 1.webp') center / cover scroll;
padding: 6rem 0;
contain: layout style;
}
/* Intro above cards */
.tmd-intro-top {
text-align: center;
margin-bottom: 2.5rem;
}
.tmd-intro-top h2 {
font-family: var(--font-h);
font-size: clamp(2rem, 3vw, 2.75rem);
font-weight: 400;
color: var(--dark);
line-height: 1.2;
margin: 0;
}
/* 4 cards in one row */
.tmd-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
/* Keep .tmd-top alias for any other pages using it */
.tmd-top {
display: grid;
grid-template-columns: 2.5fr 1fr 1fr;
gap: 1.25rem;
align-items: start;
margin-bottom: 1.25rem;
}
.tmd-intro {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2rem;
padding: 2rem 2rem 2rem 0;
min-height: 100%;
min-width: 0;
overflow: hidden;
}
.tmd-intro h2 {
font-family: var(--font-h);
font-size: clamp(2rem, 3vw, 2.75rem);
font-weight: 400;
color: var(--dark);
line-height: 1.2;
margin: 0;
}
/* Specialty marquee — contained within .tmd-intro column */
.tmd-marquee-wrap {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 85%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 85%, transparent);
}
@keyframes tmd-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes tmd-scroll-ltr {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.tmd-marquee-track {
display: flex;
align-items: center;
gap: 0.75rem;
width: max-content;
animation: tmd-scroll 28s linear infinite;
}
.tmd-marquee-track:hover { animation-play-state: paused; }
.tmd-marquee-track--ltr {
animation: tmd-scroll-ltr 18s linear infinite;
}
.tmd-marquee-track--ltr:hover { animation-play-state: paused; }
.tmd-specialty {
font-family: var(--font-b);
font-size: 0.875rem;
font-weight: 800;
color: #1e3528;
white-space: nowrap;
cursor: default;
}
.tmd-dot {
color: #1e3528;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
opacity: 0.4;
}
/* Bottom block: 4 cards */
.tmd-bottom {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 1.25rem;
}
/* Coming Soon card */
.tmd-card--coming-soon {
background: rgba(255,255,255,0.55);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
cursor: default;
border: 2px dashed rgba(114,140,105,0.4);
}
.tmd-card--coming-soon:hover { transform: none; box-shadow: none; }
.tmd-coming-soon-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 2rem;
text-align: center;
}
.tmd-coming-soon-icon {
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(114,140,105,0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.25rem;
}
.tmd-coming-soon-body h4 {
font-family: var(--font-h);
font-size: 1.125rem;
font-weight: 400;
color: var(--dark);
margin: 0;
}
.tmd-coming-soon-body span {
font-size: 0.8125rem;
color: var(--primary);
font-weight: 500;
}
/* Card — full photo with gradient overlay */
.tmd-card {
position: relative;
display: block;
border-radius: var(--r-card);
overflow: hidden;
aspect-ratio: 9 / 16;
text-decoration: none;
transition: transform var(--dur), box-shadow var(--dur);
}
.tmd-card:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(38,51,45,0.18); }
.tmd-card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.5s ease;
}
.tmd-card:hover .tmd-card-img { transform: scale(1.04); }
/* Gradient overlay at bottom */
.tmd-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10,25,15,0.85) 0%, rgba(10,25,15,0.15) 24%, transparent 42%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem 1.25rem 0.625rem;
transition: background 0.4s ease;
}
/* Active/hover state — solid dark bottom half for readability */
.tmd-card:hover .tmd-card-overlay,
.tmd-card:focus-within .tmd-card-overlay {
background: linear-gradient(to top, rgba(8,20,12,0.97) 0%, rgba(8,20,12,0.85) 40%, rgba(8,20,12,0.4) 65%, transparent 85%);
}
.tmd-card-overlay h4 {
font-family: var(--font-h);
font-size: 1rem;
font-weight: 400;
color: #ffffff;
margin: 0 0 0.2rem;
line-height: 1.25;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.tmd-card-overlay span {
font-family: var(--font-b);
font-size: 0.75rem;
font-weight: 600;
color: rgba(168,201,158,1);
display: block;
margin-bottom: 0.6rem;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.tmd-card-overlay p {
font-size: 0.8125rem;
color: rgba(255,255,255,0.88);
line-height: 1.5;
margin: 0 0 0.875rem;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.4s ease;
}
.tmd-card:hover .tmd-card-overlay p {
max-height: 6rem;
opacity: 1;
}
.tmd-card-cta {
font-family: var(--font-b);
font-size: 0.8125rem;
font-weight: 600;
color: #ffffff;
display: flex;
align-items: center;
gap: 0.4rem;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tmd-card:hover .tmd-card-cta { opacity: 1; transform: translateY(0); }
/* Card body — description + profile link */
.tmd-card-body {
padding: 1rem 1.375rem 1.375rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
border-top: 1px solid var(--gray-5);
}
.tmd-card-body p {
font-size: 0.875rem;
color: var(--body-text);
line-height: 1.65;
margin: 0;
}
.tmd-card-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 600;
color: #1e3528;
text-decoration: none;
font-family: var(--font-b);
transition: gap 0.2s ease, color var(--dur);
width: fit-content;
}
.tmd-card-link:hover { gap: 0.65rem; color: var(--primary); }
/* CTA row below the grid */
.tmd-cta {
display: flex;
align-items: center;
justify-content: center;
padding-top: 3rem;
}
@media (max-width: 1024px) {
.tmd-cards { grid-template-columns: repeat(2, 1fr); }
.tmd-top { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
/* Stack intro above cards, cards side by side */
.tmd-top {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.tmd-intro {
grid-column: 1 / -1;
padding: 0 0 1rem 0;
gap: 1.25rem;
}
.tmd-intro h2 { font-size: clamp(1.75rem, 5vw, 2.25rem); }
/* Bottom row: 2x2 grid */
.tmd-bottom { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 600px) {
.tmd-cards { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.tmd-card-overlay { padding: 1rem 0.875rem 0.875rem; }
.tmd-top { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.tmd-bottom { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.tmd-section { padding: 4rem 0; }
}
/* Legacy team styles (used on other pages) */
.team-section { background: var(--gray-6); }
.team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.team-card {
background: var(--white); border-radius: var(--r-card); overflow: hidden;
transition: transform var(--dur), box-shadow var(--dur);
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 20px 56px rgba(38,51,45,0.14); }
.team-card-img { width: 100%; height: 280px; object-fit: cover; object-position: top; transition: transform 0.5s var(--ease); }
.team-card:hover .team-card-img { transform: scale(1.04); }
.team-card-body { padding: 1.25rem 1.375rem; }
.team-card h4 { font-family: var(--font-b); font-weight: 600; font-size: 1rem; color: var(--dark); margin-bottom: 0.25rem; }
.team-card-role { font-size: 0.875rem; color: var(--body-text); }
/* ========================================
TESTIMONIALS
======================================== */
.testimonials-section { background: var(--white); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.testimonial-card {
background: var(--gray-6); border-radius: var(--r-card); padding: 2.25rem;
border: 1px solid transparent;
transition: border-color var(--dur), box-shadow var(--dur);
}
.testimonial-card:hover { border-color: var(--gray-4); box-shadow: 0 12px 36px rgba(38,51,45,0.08); }
.testimonial-stars { color: #f5a623; font-size: 1rem; letter-spacing: 3px; margin-bottom: 1.125rem; }
.testimonial-text { font-size: 0.9375rem; color: var(--body-text); line-height: 1.75; margin-bottom: 1.75rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 0.875rem; }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-name { font-weight: 600; color: var(--dark); font-size: 0.9375rem; }
.testimonial-detail { font-size: 0.8125rem; color: var(--body-text); margin-top: 0.125rem; }
/* ========================================
DARK CTA / NEWSLETTER
======================================== */
.dark-cta { background: var(--dark); padding: 6rem 0; }
.dark-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.dark-cta-left .section-label { color: var(--gray-3); }
.dark-cta-left h2 { color: var(--white); margin-bottom: 1.125rem; }
.dark-cta-left p { color: var(--gray-3); font-size: 1.0625rem; line-height: 1.75; }
/* Forms (dark bg) */
.form-group { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.form-stack { display: flex; flex-direction: column; gap: 0.875rem; }
.inp {
width: 100%; padding: 0.9375rem 1.25rem;
border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-inp);
background: rgba(255,255,255,0.05); color: var(--white);
font-family: var(--font-b); font-size: 0.9375rem; outline: none;
transition: border-color var(--dur), background var(--dur);
}
.inp::placeholder { color: var(--gray-3); }
.inp:focus { border-color: var(--primary); background: rgba(255,255,255,0.08); }
.inp-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.inp-select option { background: var(--dark); color: var(--white); }
.inp-textarea { resize: vertical; min-height: 120px; }
/* Forms (light bg) */
.inp-light {
width: 100%; padding: 0.9375rem 1.25rem;
border: 1px solid var(--gray-5); border-radius: var(--r-inp);
background: var(--white); color: var(--dark);
font-family: var(--font-b); font-size: 0.9375rem; outline: none;
transition: border-color var(--dur), box-shadow var(--dur);
}
.inp-light::placeholder { color: var(--gray-3); }
.inp-light:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(38,51,45,0.06); }
.inp-textarea-light { resize: vertical; min-height: 120px; }
/* ========================================
SPLIT SECTION
======================================== */
.split-section { background: var(--white); }
.split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.split-img-wrap { position: relative; }
.split-img { width: 100%; height: 540px; object-fit: cover; border-radius: var(--r-card); }
.split-img-badge {
position: absolute; bottom: 2rem; right: -1.5rem;
background: var(--white); border-radius: var(--r-card); padding: 1.25rem 1.5rem;
box-shadow: 0 12px 40px rgba(0,0,0,0.12); max-width: 220px;
}
.split-img-badge-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.split-img-badge h5 { font-family: var(--font-b); font-weight: 600; font-size: 0.9375rem; color: var(--dark); margin-bottom: 0.25rem; }
.split-img-badge p { font-size: 0.8125rem; color: var(--body-text); margin: 0; line-height: 1.5; }
.split-content {}
.split-content .section-label { margin-bottom: 0.75rem; }
.split-content h2 { margin-bottom: 1.25rem; }
.split-content > p { font-size: 1.0625rem; color: var(--body-text); line-height: 1.75; margin-bottom: 1.5rem; }
.split-list { margin-bottom: 2.25rem; }
.split-list li {
display: flex; align-items: flex-start; gap: 1rem;
padding: 0.875rem 0; border-bottom: 1px solid var(--gray-5);
font-size: 0.9375rem; color: var(--body-text);
}
.split-list li:last-child { border-bottom: none; }
.split-check { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.split-check i { color: var(--dark); font-size: 0.75rem; }
.split-list strong { color: var(--dark); }
/* ========================================
CINEMATIC TEXT-ZOOM HERO (about page)
======================================== */
.ph-cinematic {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background: #0d1a10 url('../images/bg-hero-section.webp') center/cover no-repeat;
z-index: 0;
}
.ph-cinematic-spacer {
position: relative;
height: 100vh;
pointer-events: none;
}
.ph-cinematic-spacer ~ * {
position: relative;
z-index: 1;
}
/* Dark curtain behind hero */
.ph-cinematic::after {
content: '';
position: fixed;
inset: 0;
background: #0d1a10;
z-index: -2;
pointer-events: none;
}
/* Dark overlay on top of video */
.ph-cinematic::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.20);
z-index: 0;
pointer-events: none;
}
/* Video plays full bleed, always visible behind overlay */
.ph-cin-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
will-change: transform;
transform: translateZ(0);
}
/* Canvas overlay — injected by JS, draws the coloured mask + text cutout */
.ph-cin-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
will-change: transform;
transform: translateZ(0);
}
.ph-cin-label {
/* Hidden — rendered by canvas so it composites correctly with the cutout */
display: none;
}
/* Post-zoom hero content — slides up after overlay fades */
.ph-hero-content {
position: absolute;
bottom: 28%;
left: 8%;
z-index: 2;
max-width: 540px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
pointer-events: none;
}
.ph-hero-content > * { pointer-events: auto; opacity: 0; }
.ph-hero-pre {
font-family: var(--font-b);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
margin: 0;
}
.ph-hero-heading {
font-family: var(--font-h);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
color: #fff;
line-height: 1.1;
margin: 0;
text-shadow: 0 2px 28px rgba(0,0,0,0.55);
}
.ph-hero-heading em {
font-style: italic;
color: #fff;
text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.ph-hero-sub {
font-family: var(--font-b);
font-size: 1rem;
color: rgba(255,255,255,0.82);
line-height: 1.65;
margin: 0;
max-width: 420px;
text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}
/* ========================================
PAGE HERO (interior pages)
======================================== */
.page-hero {
background: linear-gradient(rgba(10,25,15,0.85), rgba(10,25,15,0.85)),
url('../images/bg-hero.jpg') center/cover no-repeat;
padding: 6rem 0 5rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Video variant — full viewport */
.page-hero--video {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 560px;
padding: 0;
}
.page-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: blur(2px) brightness(0.95);
transform: scale(1.04);
will-change: transform;
transform: translateZ(0) scale(1.04);
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: rgba(18,28,20,0.45);
z-index: 1;
}
.page-hero--video .page-hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
}
.page-hero-title {
font-family: var(--font-h);
font-size: clamp(2.75rem, 6vw, 5rem);
font-weight: 700;
color: var(--white);
line-height: 1.1;
margin: 0;
text-shadow: 0 2px 32px rgba(0,0,0,0.35);
}
.page-hero-title em {
font-style: italic;
font-weight: 400;
color: var(--white);
}
.page-hero--video .page-hero-sub {
color: rgba(255,255,255,0.85);
font-size: 1.125rem;
max-width: 560px;
margin: 0;
line-height: 1.7;
font-family: var(--font-b);
text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
/* Outline-light CTA for dark video heroes */
.btn-ihb--outline-light {
border: 1.5px solid rgba(255,255,255,0.55);
color: var(--white);
background: transparent;
}
.btn-ihb--outline-light .btn-ihb-blob { background: var(--primary); }
.btn-ihb--outline-light:hover { border-color: var(--primary); color: var(--dark); }
.btn-ihb--outline-light .btn-ihb-reveal { color: var(--dark); }
/* ========================================
SERVICES PAGE HERO
======================================== */
.svc-hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
}
.svc-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateZ(0);
}
.svc-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(10,20,10,0.45) 0%,
rgba(10,20,10,0.55) 60%,
rgba(10,20,10,0.7) 100%);
z-index: 1;
}
.svc-hero-content {
position: relative;
z-index: 2;
max-width: 820px;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.svc-hero-eyebrow {
font-family: var(--font-b);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
margin: 0;
}
.svc-hero-heading {
font-family: var(--font-h);
font-size: clamp(2.75rem, 6vw, 5rem);
font-weight: 400;
color: var(--white);
line-height: 1.1;
margin: 0;
}
.svc-hero-heading em {
font-style: italic;
color: #fff;
}
.svc-hero-sub {
font-family: var(--font-b);
font-size: 1.0625rem;
color: rgba(255,255,255,0.82);
line-height: 1.7;
max-width: 600px;
margin: 0;
}
.svc-hero-btns {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
}
/* ========================================
SERVICES GRID — bordered cell layout
======================================== */
.svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--gray-5);
border-left: 1px solid var(--gray-5);
}
.svc-cell {
border-right: 1px solid var(--gray-5);
border-bottom: 1px solid var(--gray-5);
display: flex;
flex-direction: column;
background: var(--white);
transition: background 0.2s;
}
.svc-cell:hover { background: #e3eee3; }
.svc-cell-img {
width: 100%;
background: #eaf2ea;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.svc-cell-img img {
width: 100%;
height: auto;
max-height: 260px;
object-fit: contain;
transition: transform 0.5s ease;
display: block;
}
.svc-cell:hover .svc-cell-img img { transform: scale(1.03); }
.svc-cell-body {
padding: 1.75rem 1.75rem 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
.svc-cell-icon {
font-size: 1.375rem;
color: #1e3528;
margin-bottom: 1rem;
}
.svc-cell-name {
font-family: var(--font-h);
font-size: 1.5rem;
font-weight: 400;
color: var(--dark);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.svc-cell-desc {
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--body-text);
line-height: 1.7;
margin: 0 0 1.5rem;
flex: 1;
}
.svc-cell-link {
font-family: var(--font-b);
font-size: 0.875rem;
font-weight: 600;
color: #1e3528;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: gap 0.2s, color 0.2s;
margin-top: auto;
}
.svc-cell-link:hover { gap: 0.75rem; color: var(--dark); }
@media (max-width: 900px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.svc-grid { grid-template-columns: 1fr; }
}
/* Non-video pages keep existing style */
.page-hero:not(.page-hero--video) .page-hero-content { position: relative; z-index: 1; }
.page-hero:not(.page-hero--video) h1 { color: var(--white); margin-bottom: 1rem; }
.page-hero-sub { color: rgba(255,255,255,0.85); font-size: 1.125rem; max-width: 580px; margin: 0 auto; line-height: 1.7; }
.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-bottom: 1.5rem; }
.breadcrumb a { color: rgba(255,255,255,0.65); transition: color var(--dur); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: rgba(255,255,255,0.4); font-size: 0.75rem; }
/* ========================================
ABOUT PAGE
======================================== */
/* About Cards — Curevo-style mission + values split cards */
.about-cards-section {
background: var(--white);
padding: 6rem 0;
display: flex;
flex-direction: column;
gap: 0;
}
.asc-card {
display: flex;
border-radius: var(--r-card);
overflow: hidden;
margin-bottom: 1.25rem;
min-height: 300px;
border: 1px solid var(--gray-5);
}
.asc-card--green { background: var(--gray-6); }
.asc-card--white { background: var(--white); }
/* Mission card — picture element must be an explicit flex item so 4K image fills correctly */
.asc-card--mission picture {
display: block;
width: 62%;
flex-shrink: 0;
align-self: stretch;
overflow: hidden;
}
.asc-card--mission picture .asc-card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.asc-card-img {
width: 38%;
flex-shrink: 0;
object-fit: cover;
display: block;
}
.asc-card-body {
flex: 1;
padding: 3rem 3.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.asc-card-title {
font-family: var(--font-h);
font-size: 1.75rem;
font-weight: 400;
color: var(--dark);
margin-bottom: 1rem;
}
.asc-card-body p {
color: var(--body-text);
font-size: 0.9375rem;
line-height: 1.78;
max-width: 520px;
margin: 0;
}
.asc-value-tags {
display: flex;
flex-wrap: wrap;
gap: 0.625rem 2.25rem;
margin-top: 1.5rem;
}
.asc-value-tag {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-b);
font-size: 0.9375rem;
font-weight: 500;
color: var(--dark);
}
.asc-value-tag i { color: var(--primary); font-size: 0.875rem; }
@media (max-width: 768px) {
.asc-card { flex-direction: column; }
.asc-card-img { width: 100%; height: auto; aspect-ratio: 16/9; }
.asc-card--mission picture { width: 100%; height: auto; }
.asc-card--mission picture .asc-card-img { height: auto; aspect-ratio: 16/9; }
.asc-card-body { padding: 2rem; }
}
/* About Statement — centered scroll-reveal section */
.about-statement-section {
padding: 8rem 0 6rem;
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/Underlay pic 1.webp') center / cover scroll;
text-align: center;
}
.about-statement-icon {
width: 64px;
height: 64px;
margin: 0 auto 2.5rem;
color: var(--dark);
opacity: 0.75;
}
.about-statement-icon svg { width: 100%; height: 100%; }
.about-statement-heading {
font-family: var(--font-h);
font-size: clamp(1.625rem, 2.8vw, 2.375rem);
font-weight: 400;
line-height: 1.55;
max-width: 860px;
margin: 0 auto 2.25rem;
color: var(--dark);
}
/* Each word wrapped by JS — starts faded, scrolls to full opacity */
.about-statement-heading .word {
display: inline;
opacity: 0.12;
}
.about-statement-sub {
max-width: 660px;
margin: 0 auto;
color: var(--body-text);
line-height: 1.8;
font-size: 0.9375rem;
}
.about-statement-divider {
border: none;
border-top: 1px solid var(--gray-5);
max-width: 720px;
margin: 3rem auto 2.75rem;
}
.about-statement-pillars {
display: flex;
justify-content: center;
gap: 4rem;
}
.about-pillar {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
font-family: var(--font-b);
font-size: 0.9375rem;
font-weight: 500;
color: var(--dark);
}
.about-pillar i { font-size: 1.375rem; opacity: 0.6; }
@media (max-width: 600px) {
.about-statement-pillars { flex-direction: column; gap: 2rem; align-items: center; }
}
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.value-card {
position: relative;
background: var(--white);
border: 1px solid var(--gray-5);
border-radius: var(--r-card);
padding: 2.25rem;
transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(45,80,64,0.08); }
.value-num { font-family: var(--font-h); font-size: 3rem; color: rgba(45,80,64,0.45); line-height: 1; margin-bottom: 1rem; }
.value-card h4 { font-family: var(--font-b); font-weight: 600; color: var(--dark); margin-bottom: 0.625rem; }
.value-card p { font-size: 0.9375rem; color: var(--dark-2); margin: 0; }
/* ---- GlowingEffect — mouse-tracking conic gradient arc on border ---- */
.glowing-effect {
pointer-events: none;
position: absolute;
inset: 0;
border-radius: inherit;
--spread: 20;
--glowingeffect-border-width: 1px;
}
.glow { border-radius: inherit; height: 100%; }
.glow::after {
content: '';
border-radius: inherit;
position: absolute;
inset: calc(-1 * var(--glowingeffect-border-width));
border: var(--glowingeffect-border-width) solid transparent;
/* Brand-green multi-layer gradient, viewport-fixed so it "slides" as cursor moves */
background:
radial-gradient(circle, #2d5040 10%, transparent 20%),
radial-gradient(circle at 40% 40%, #2d5040 5%, transparent 15%),
radial-gradient(circle at 60% 60%, #3d7060 10%, transparent 20%),
radial-gradient(circle at 40% 60%, #9abfb0 10%, transparent 20%),
repeating-conic-gradient(
from 236.84deg at 50% 50%,
#2d5040 0%,
#2d5040 calc(25% / 5),
#3d7060 calc(50% / 5),
#9abfb0 calc(75% / 5),
#2d5040 calc(100% / 5)
);
background-attachment: scroll;
opacity: var(--active, 0);
transition: opacity 0.3s;
/* Mask reveals only the 1px border strip at the angle pointed at by the cursor */
-webkit-mask-clip: padding-box, border-box;
mask-clip: padding-box, border-box;
-webkit-mask-composite: intersect;
mask-composite: intersect;
-webkit-mask-image:
linear-gradient(transparent, transparent),
conic-gradient(
from calc((var(--start, 0) - var(--spread)) * 1deg),
transparent 0deg,
white,
transparent calc(var(--spread) * 2deg)
);
mask-image:
linear-gradient(transparent, transparent),
conic-gradient(
from calc((var(--start, 0) - var(--spread)) * 1deg),
transparent 0deg,
white,
transparent calc(var(--spread) * 2deg)
);
}
/* About CTA Video Banner */
.about-cta-video-section {
position: relative;
height: 72vh;
min-height: 480px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.about-cta-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.38);
}
.about-cta-overlay {
position: relative;
z-index: 1;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
}
.about-cta-label {
font-family: var(--font-b);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin: 0;
}
.about-cta-heading {
font-family: var(--font-h);
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 400;
font-style: italic;
color: var(--primary);
margin: 0;
line-height: 1.15;
}
/* Social Proof */
.about-partners-section {
background: var(--gray-6);
padding: 4.5rem 0;
overflow-x: hidden;
}
.about-partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
text-align: center;
divide-x: 1px solid var(--gray-5);
}
.about-partner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
padding: 1rem 1.5rem;
border-right: 1px solid var(--gray-5);
}
.about-partner:last-child { border-right: none; }
.about-partner-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(45,80,64,0.12);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.25rem;
}
.about-partner-icon i { font-size: 1.125rem; color: var(--dark); }
.about-partner-name {
font-family: var(--font-h);
font-size: 1.25rem;
font-weight: 700;
color: var(--dark);
letter-spacing: -0.01em;
}
.about-partner-quote {
font-family: var(--font-b);
font-size: 0.875rem;
color: var(--body-text);
line-height: 1.65;
max-width: 200px;
}
@media (max-width: 768px) {
.about-partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
.about-partner {
border-right: none;
border-bottom: 1px solid var(--gray-5);
padding: 1.5rem 1rem;
}
/* Right column items get a left border as divider */
.about-partner:nth-child(even) { border-left: 1px solid var(--gray-5); }
.about-partner:last-child { border-bottom: none; }
/* Second-to-last item also loses bottom border if on same row as last */
.about-partner:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.about-partner-name { font-size: 1.0625rem; }
.about-partner-quote { font-size: 0.8125rem; max-width: 100%; }
}
@media (max-width: 480px) {
.about-partners-grid { grid-template-columns: 1fr; }
.about-partner { border-left: none !important; }
.about-partner:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--gray-5); }
}
/* Timeline */
.timeline-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/Underlay pic 1.webp') center / cover scroll;
padding: 6rem 0;
}
.timeline-inner { max-width: 800px; margin: 0 auto; position: relative; }
.timeline-inner::before {
content: ''; position: absolute; left: 132px; top: 0; bottom: 0;
width: 2px; background: var(--gray-5);
}
.timeline-item { display: flex; gap: 2rem; padding: 2.25rem 0; }
.timeline-year { width: 110px; flex-shrink: 0; font-family: var(--font-h); font-size: 1.125rem; color: var(--dark); text-align: right; padding-top: 0.125rem; }
.timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 3px solid var(--dark); flex-shrink: 0; margin-top: 0.3rem; position: relative; z-index: 1; }
.timeline-body h5 { font-family: var(--font-b); font-weight: 600; color: var(--dark); margin-bottom: 0.375rem; }
.timeline-body p { font-size: 0.9375rem; color: var(--body-text); margin: 0; }
/* ========================================
SERVICES PAGE
======================================== */
.services-filter { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 3rem; }
.filter-btn { padding: 0.5625rem 1.375rem; border-radius: var(--r-btn); border: 1px solid var(--gray-5); background: var(--white); color: var(--dark); font-size: 0.9375rem; font-family: var(--font-b); cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.filter-btn:hover, .filter-btn.active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.service-card {
background: var(--white); border-radius: var(--r-card); overflow: hidden;
display: flex; flex-direction: column;
transition: transform var(--dur), box-shadow var(--dur);
border: 1px solid var(--gray-5);
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 56px rgba(38,51,45,0.12); }
.service-card-img { width: 100%; height: 210px; object-fit: cover; transition: transform 0.5s var(--ease); }
.service-card:hover .service-card-img { transform: scale(1.04); }
.service-card-body { padding: 1.625rem; flex: 1; display: flex; flex-direction: column; }
.service-card-tag { font-size: 0.8125rem; color: var(--body-text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.service-card h3 { font-family: var(--font-b); font-weight: 600; font-size: 1.125rem; color: var(--dark); margin-bottom: 0.75rem; }
.service-card p { font-size: 0.9375rem; color: var(--body-text); flex: 1; margin-bottom: 1.25rem; line-height: 1.65; }
.service-card-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 500; color: var(--dark); transition: gap var(--dur); }
.service-card-link:hover { gap: 0.625rem; }
/* ========================================
CONTACT PAGE
======================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; }
.contact-info h3 { font-size: 1.75rem; margin-bottom: 1.75rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.625rem; margin-bottom: 2.5rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1.125rem; }
.contact-info-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--gray-6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-icon i { color: var(--dark); font-size: 1rem; }
.contact-info-text strong { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--dark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.contact-info-text span { font-size: 0.9375rem; color: var(--body-text); line-height: 1.5; }
/* ========================================
BOOKING PAGE
======================================== */
.booking-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; }
.booking-info h2 { margin-bottom: 1.25rem; }
.booking-info > p { color: var(--body-text); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 2rem; }
.booking-contact-list { display: flex; flex-direction: column; gap: 1.375rem; }
.booking-contact-item { display: flex; align-items: center; gap: 1rem; }
.booking-contact-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--gray-6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.booking-contact-icon i { color: var(--dark); font-size: 1rem; }
.booking-contact-label { font-size: 0.8125rem; font-weight: 600; color: var(--dark); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.2rem; }
.booking-contact-value { font-size: 0.9375rem; color: var(--body-text); }
.booking-form-card { background: var(--white); border-radius: var(--r-card); padding: 2.75rem; box-shadow: 0 8px 48px rgba(38,51,45,0.09); }
.booking-form-title { font-size: 1.75rem; margin-bottom: 0.375rem; }
.booking-form-sub { font-size: 0.9375rem; color: var(--body-text); margin-bottom: 2rem; }
/* ========================================
HOURS SECTION
======================================== */
.hours-section { background: var(--white); padding: 5rem 0; }
.section--book-green {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/book an appointment overlay pic.jpg') center / cover scroll;
}
.hours-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; max-width: 860px; margin: 0 auto; text-align: center; }
.hours-item i { font-size: 1.75rem; color: var(--primary); margin-bottom: 1rem; display: block; }
.hours-item h4 { font-family: var(--font-b); font-weight: 600; color: var(--dark); margin-bottom: 0.5rem; }
.hours-item p { font-size: 0.9375rem; color: var(--body-text); margin: 0; }
.emergency-bar {
max-width: 860px; margin: 2.5rem auto 0;
background: var(--dark); border-radius: var(--r-card); padding: 1.375rem 2rem;
display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.emergency-bar i { color: var(--primary); font-size: 1.125rem; flex-shrink: 0; }
.emergency-bar p { margin: 0; font-size: 0.9375rem; color: var(--gray-3); }
.emergency-bar a { color: var(--primary); font-weight: 600; }
/* ========================================
FAQ PAGE
======================================== */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-5); }
.faq-question {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 1.5rem 0; font-size: 1.0625rem; font-weight: 600;
color: var(--dark); background: none; border: none; cursor: pointer;
text-align: left; font-family: var(--font-b); transition: color var(--dur);
}
.faq-question:hover { color: var(--dark-2); }
.faq-icon {
width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-5);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background var(--dur), border-color var(--dur), transform var(--dur);
font-size: 0.875rem;
}
.faq-item.open .faq-icon { background: var(--dark); color: var(--white); border-color: var(--dark); transform: rotate(45deg); }
.faq-answer { overflow: hidden; font-size: 0.9375rem; color: var(--body-text); line-height: 1.75; }
.faq-answer a { color: var(--dark); font-weight: 600; text-decoration: underline; }
.faq-support {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
background: var(--gray-6); border-radius: var(--r-card); padding: 2rem 2.5rem;
margin-top: 3rem; max-width: 780px; margin-left: auto; margin-right: auto;
}
.faq-support p { font-size: 1.0625rem; color: var(--dark); font-weight: 500; margin: 0; }
.faq-support-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* ========================================
STICKY FOOTER
======================================== */
.sf-footer {
position: relative;
height: 480px;
clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
will-change: transform;
transform: translateZ(0);
}
.sf-fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 480px;
background: linear-gradient(rgba(255,255,255,0.50), rgba(255,255,255,0.50)),
url('../images/bg-hero-footer.webp') center/cover no-repeat;
border-top: 1px solid rgba(30,53,40,0.12);
color: #1e3528;
will-change: transform;
transform: translateZ(0);
}
/* Radial gradient decorations */
.sf-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sf-deco-1 {
position: absolute; top: 0; left: 0;
width: 560px; height: 560px;
transform: translate(-30%, -60%) rotate(-45deg);
border-radius: 9999px;
background: radial-gradient(68.54% 68.72% at 55.02% 31.46%, rgba(45,80,64,0.25) 0%, rgba(45,80,64,0.06) 50%, transparent 80%);
}
.sf-deco-2 {
position: absolute; top: 0; right: 0; left: auto;
width: 400px; height: 400px;
transform: translate(20%, 10%);
border-radius: 9999px;
background: radial-gradient(50% 50% at 50% 50%, rgba(45,80,64,0.14) 0%, transparent 80%);
}
.sf-deco-3 {
position: absolute; bottom: 0; left: 50%;
width: 300px; height: 300px;
transform: translate(-50%, 40%);
border-radius: 9999px;
background: radial-gradient(50% 50% at 50% 50%, rgba(30,53,40,0.08) 0%, transparent 100%);
}
.sf-body {
position: relative; z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2.5rem 5rem 1.75rem;
}
/* Top row */
.sf-top {
display: flex;
gap: 3rem;
align-items: flex-start;
}
/* Brand column */
.sf-brand { flex: 0 0 280px; }
.sf-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-bottom: 1.25rem; }
.sf-logo-img { height: 170px; width: auto; background: none; border-radius: 0; padding: 0; display: block; margin: -30px 0; }
.sf-logo-fallback { display: flex; align-items: center; gap: 0.5rem; }
.sf-logo-fallback svg { width: 32px; height: 32px; }
.sf-logo-fallback span { font-family: var(--font-h); font-size: 1.5rem; color: #111; font-weight: 700; }
.sf-desc { font-family: var(--font-b); font-size: 1rem; color: #111; line-height: 1.7; margin-bottom: 1.25rem; }
.sf-social { display: flex; gap: 0.5rem; }
.sf-social-btn {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(30,53,40,0.3);
display: flex; align-items: center; justify-content: center;
color: #1e3528; font-size: 0.875rem;
transition: border-color var(--dur), color var(--dur), background var(--dur);
text-decoration: none;
}
.sf-social-btn:hover { border-color: #1e3528; background: #1e3528; color: #ffffff; }
/* Link columns */
.sf-col { flex: 1; min-width: 0; }
.sf-col-title {
font-family: var(--font-b);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #111;
margin-bottom: 0.875rem;
}
.sf-links {
display: flex;
flex-direction: column;
gap: 0.55rem;
list-style: none;
padding: 0;
margin: 0;
}
.sf-links li, .sf-links a {
font-family: var(--font-b);
font-size: 0.9375rem;
color: #222;
text-decoration: none;
transition: color var(--dur);
line-height: 1.5;
}
.sf-links a:hover { color: #000; font-weight: 600; }
.sf-contact-icon { color: #111; font-size: 0.8125rem; margin-right: 0.375rem; }
/* Bottom bar */
.sf-bottom {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(30,53,40,0.2);
padding-top: 1.25rem;
gap: 1rem;
flex-wrap: wrap;
}
.sf-bottom p { font-family: var(--font-b); font-size: 0.9rem; color: #222; }
.sf-powered { margin-left: auto; font-size: 0.8rem !important; color: rgba(30,53,40,0.45) !important; }
.sf-powered a { color: var(--primary); text-decoration: none; font-weight: 500; }
.sf-powered a:hover { text-decoration: underline; }
/* Footer fade-in handled by GSAP in main.js */
/* ========================================
CONTACT PAGE
======================================== */
.cth-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/underlay pic 5.webp') center / cover scroll;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 0;
box-sizing: border-box;
overflow: hidden;
}
.cth-top {
text-align: center;
padding: 0 1.5rem 1.75rem;
}
.cth-title {
font-family: var(--font-h);
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 400;
color: var(--dark);
margin: 0 0 0.75rem;
}
.cth-sub {
font-family: var(--font-b);
font-size: 1rem;
color: var(--body-text);
line-height: 1.65;
max-width: 620px;
margin: 0 auto;
}
.cth-body {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 3rem;
align-items: stretch;
flex: 1;
min-height: 0;
}
/* Arched image */
.cth-img-wrap {
width: 100%;
display: flex;
min-height: 0;
}
.cth-img {
width: 100%;
height: 100%;
min-height: 0;
max-height: 520px;
object-fit: cover;
border-radius: 999px 999px 0 0;
display: block;
}
/* Form */
.cth-form {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.cth-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.cth-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cth-field label {
font-family: var(--font-b);
font-size: 0.875rem;
font-weight: 500;
color: #1e3528;
}
.cth-inp {
font-family: var(--font-b);
font-size: 0.9375rem;
color: #1e3528;
background: #e3ede3;
border: 1.5px solid transparent;
border-radius: 999px;
padding: 0.75rem 1.25rem;
outline: none;
transition: border-color 0.2s, background 0.2s;
width: 100%;
}
.cth-inp::placeholder { color: #8aaa98; }
.cth-inp:focus { border-color: #1e3528; background: #d0e8d0; }
.cth-textarea {
border-radius: 1.25rem;
resize: vertical;
background: #e3ede3;
min-height: 140px;
}
.cth-submit { margin-top: 0.5rem; }
@media (max-width: 860px) {
/* Let section grow naturally — no fixed height */
.cth-section {
height: auto;
overflow: visible;
padding: 3.5rem 0 4rem;
}
.cth-body {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 var(--gap);
}
/* Show image as a wide banner above the form */
.cth-img-wrap { min-height: 0; }
.cth-img { height: 260px; border-radius: 1.5rem; max-height: none; }
}
@media (max-width: 600px) {
/* Hide the decorative image on small phones to save space */
.cth-img-wrap { display: none; }
.cth-form-row { grid-template-columns: 1fr; }
.cth-section { padding: 2.5rem 0 3rem; }
}
/* ========================================
CONTACT FAQ SECTION
======================================== */
.cfaq-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/underlay pic 5.webp') center / cover scroll;
padding: 5rem 0 6rem;
border-top: 1px solid #c2d4c2;
}
.cfaq-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 5rem;
align-items: start;
}
.cfaq-title {
font-family: var(--font-h);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 400;
color: var(--dark);
line-height: 1.2;
margin: 0 0 2.5rem;
}
.cfaq-support {
display: flex;
align-items: center;
gap: 1rem;
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--body-text);
}
.cfaq-email-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-b);
font-size: 0.9375rem;
font-weight: 500;
color: #fff;
text-decoration: none;
background: #728C69;
border: 1.5px solid #728C69;
border-radius: 999px;
padding: 0.5rem 1.25rem;
transition: background 0.2s, border-color 0.2s;
}
.cfaq-email-btn:hover {
background: #5d7355;
border-color: #5d7355;
color: #fff;
}
/* Accordion */
.cfaq-list { display: flex; flex-direction: column; }
.cfaq-item { border-bottom: 1px solid #b8ccb8; }
.cfaq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: none;
border: none;
padding: 1.375rem 0;
cursor: pointer;
text-align: left;
font-family: var(--font-b);
font-size: 1rem;
font-weight: 500;
color: var(--dark);
transition: color 0.2s;
}
.cfaq-q:hover { color: #1e3528; }
.cfaq-icon {
font-size: 1.25rem;
font-weight: 300;
color: var(--dark);
line-height: 1;
flex-shrink: 0;
transition: transform 0.35s cubic-bezier(0.04, 0.62, 0.23, 0.98), color 0.2s;
display: inline-block;
}
.cfaq-item.open .cfaq-icon {
transform: rotate(45deg);
color: #1e3528;
}
.cfaq-a {
overflow: hidden;
height: 0;
}
.cfaq-a p {
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--body-text);
line-height: 1.75;
padding-bottom: 1.375rem;
margin: 0;
}
@media (max-width: 860px) {
.cfaq-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ========================================
JOIN OUR TEAM SECTION
======================================== */
.jot-section {
background: var(--white);
padding: 6rem 0;
}
.jot-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.jot-video-wrap {
border-radius: 1.25rem;
overflow: hidden;
position: relative;
aspect-ratio: 4 / 5;
}
.jot-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jot-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.jot-title {
font-family: var(--font-h);
font-size: clamp(2.25rem, 4vw, 3.25rem);
font-weight: 400;
color: var(--dark);
line-height: 1.15;
margin: 0;
}
.jot-title em { color: var(--primary); font-style: italic; }
.jot-desc {
font-family: var(--font-b);
font-size: 1rem;
color: var(--body-text);
line-height: 1.75;
margin: 0;
max-width: 440px;
}
.jot-perks {
display: flex;
flex-direction: column;
gap: 0.65rem;
list-style: none;
padding: 0;
margin: 0;
}
.jot-perks li {
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--dark);
display: flex;
align-items: center;
gap: 0.65rem;
}
.jot-perks li i {
color: var(--primary);
font-size: 0.875rem;
flex-shrink: 0;
}
@media (max-width: 860px) {
.jot-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
padding: 0 var(--gap);
}
.jot-video-wrap { aspect-ratio: 16 / 9; max-height: 320px; }
.jot-section { padding: 4rem 0; }
.jot-desc { max-width: 100%; }
}
/* ========================================
VISIT US SECTION
======================================== */
.visit-section {
background: var(--white);
padding: 5rem 0 6rem;
border-top: 1px solid #c2d4c2;
}
.visit-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}
/* Top row */
.visit-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: end;
margin-bottom: 3rem;
}
.visit-heading {
font-family: var(--font-h);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400;
color: var(--dark);
margin: 0;
line-height: 1.15;
}
.visit-top-desc {
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--body-text);
line-height: 1.7;
margin: 0;
}
/* Bottom row */
.visit-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: center;
}
.visit-card {
background: #e3ede3;
padding: 2.5rem 2.75rem;
border-radius: 1rem;
display: flex;
flex-direction: column;
}
.visit-city {
font-family: var(--font-h);
font-size: 1.75rem;
font-weight: 400;
color: var(--dark);
margin: 0 0 1rem;
}
.visit-card-desc {
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--body-text);
line-height: 1.7;
margin: 0 0 1.5rem;
}
.visit-divider {
border: none;
border-top: 1px solid #b8ccb8;
margin: 0 0 1.5rem;
}
.visit-details {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.visit-details li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--dark);
line-height: 1.55;
}
.visit-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #1e3528;
flex-shrink: 0;
margin-top: 0.45em;
}
.visit-img-wrap {
overflow: hidden;
border-radius: 1rem;
}
.visit-img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
}
@media (max-width: 860px) {
.visit-top { grid-template-columns: 1fr; gap: 1rem; }
.visit-body { grid-template-columns: 1fr; align-items: stretch; }
.visit-img { height: 300px; }
}
/* ========================================
PRACTITIONERS PAGE
======================================== */
.prac-hero {
position: relative; overflow: hidden;
padding: 7rem 0 5rem;
text-align: center;
}
.prac-hero-title {
font-family: var(--font-h);
font-size: clamp(2.75rem, 5vw, 4.5rem);
font-weight: 400;
color: var(--white);
line-height: 1.1;
margin: 0.5rem 0 1.25rem;
}
.prac-hero .container,
.prac-hero .container-medium,
.legal-hero .container,
.legal-hero .container-medium { position: relative; z-index: 2; }
.prac-hero .section-label,
.legal-hero .section-label,
.page-hero .section-label { color: rgba(255,255,255,0.75); }
.prac-hero-title em { color: #fff; font-style: italic; }
.prac-hero-sub {
font-family: var(--font-b);
font-size: 1.0625rem;
color: rgba(255,255,255,0.75);
line-height: 1.75;
max-width: 640px;
margin: 0 auto;
}
.prac-grid-section {
background: var(--white);
padding: 5rem 0 6rem;
}
.prac-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
/* Card */
.prac-card {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.prac-photo-wrap {
border-radius: 1rem;
overflow: hidden;
background: var(--gray-6);
aspect-ratio: 3 / 4;
}
.prac-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform 0.5s var(--ease);
}
.prac-card:hover .prac-photo { transform: scale(1.04); }
.prac-info {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.prac-name {
font-family: var(--font-h);
font-size: 1.125rem;
font-weight: 700;
color: var(--dark);
margin: 0;
}
.prac-role {
font-family: var(--font-b);
font-size: 0.8125rem;
font-weight: 600;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.prac-desc {
font-family: var(--font-b);
font-size: 0.9rem;
color: var(--body-text);
line-height: 1.7;
margin: 0.4rem 0 0.6rem;
}
.prac-link {
font-family: var(--font-b);
font-size: 0.875rem;
font-weight: 600;
color: var(--dark);
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
transition: color var(--dur), gap var(--dur);
}
.prac-link:hover { color: var(--primary); gap: 0.65rem; }
/* CTA banner */
.prac-cta-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/Underlay pic 2.webp') center / cover scroll;
padding: 6rem 0;
}
.prac-cta-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.prac-cta-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.prac-cta-title {
font-family: var(--font-h);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400;
color: var(--dark);
line-height: 1.15;
margin: 0;
}
.prac-cta-title em { color: var(--primary); font-style: italic; }
.prac-cta-sub {
font-family: var(--font-b);
font-size: 1rem;
color: var(--body-text);
line-height: 1.7;
margin: 0;
max-width: 420px;
}
.prac-cta-btns {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.prac-cta-img-wrap {
border-radius: 1.25rem;
overflow: hidden;
height: 480px;
}
.prac-cta-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
@media (max-width: 900px) {
.prac-grid { grid-template-columns: repeat(2, 1fr); }
.prac-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.prac-cta-img-wrap { order: -1; }
}
@media (max-width: 580px) {
.prac-grid { grid-template-columns: 1fr; }
}
/* ========================================
FOLLOW US SECTION
======================================== */
.follow-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/underlay pic 5.webp') center / cover scroll;
padding: 5rem 0 6rem;
border-top: 1px solid #c2d4c2;
}
.follow-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 7rem;
align-items: center;
}
/* Pills container */
.follow-pills {
display: flex;
align-items: flex-start;
gap: 0;
}
.follow-pill {
border-radius: 999px;
overflow: hidden;
width: 36%;
flex-shrink: 0;
height: 460px;
}
.follow-pill--short {
margin-top: 60px;
}
.follow-pill video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Content */
.follow-content {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.follow-heading {
font-family: var(--font-h);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400;
color: var(--dark);
line-height: 1.15;
margin: 0;
}
.follow-desc {
font-family: var(--font-b);
font-size: 0.9375rem;
color: var(--body-text);
line-height: 1.7;
margin: 0;
max-width: 340px;
}
.follow-handle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-b);
font-size: 0.9375rem;
font-weight: 600;
color: #fff;
background: #1e3528;
border-radius: 999px;
padding: 0.65rem 1.5rem;
text-decoration: none;
transition: background 0.2s, transform 0.2s;
align-self: flex-start;
}
.follow-handle:hover { background: #152b1e; transform: translateY(-2px); }
@media (max-width: 860px) {
.follow-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.follow-pill--tall { height: 280px; }
.follow-pill--short { height: 200px; margin-top: 50px; }
}
/* Keep social-link for other pages */
.social-link {
width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center; color: var(--gray-3);
font-size: 0.9375rem; transition: border-color var(--dur), color var(--dur);
}
.social-link:hover { border-color: var(--primary); color: var(--primary); }
/* ========================================
UTILITY
======================================== */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.divider { border: none; border-top: 1px solid var(--gray-5); margin: 0; }
/* Social links variant for light bg */
.social-link-light {
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gray-5);
display: flex; align-items: center; justify-content: center; color: var(--body-text);
font-size: 0.9375rem; transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.social-link-light:hover { border-color: var(--dark); color: var(--white); background: var(--dark); }
/* ========================================
MISSING / PATCH CLASSES
======================================== */
/* .section alias */
.section { padding: 6rem 0; }
/* Form labels */
label {
display: block; font-size: 0.875rem; font-weight: 500;
color: var(--dark); margin-bottom: 0.375rem;
}
.dark-cta label { color: rgba(255,255,255,0.7); }
/* inp-textarea-light */
.inp-textarea-light {
width: 100%; padding: 0.9375rem 1.25rem;
border: 1px solid var(--gray-5); border-radius: var(--r-inp);
background: var(--white); color: var(--dark);
font-family: var(--font-b); font-size: 0.9375rem; outline: none;
transition: border-color var(--dur), box-shadow var(--dur);
resize: vertical; min-height: 120px;
}
.inp-textarea-light::placeholder { color: var(--gray-3); }
.inp-textarea-light:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(38,51,45,0.06); }
/* service-card-img as div wrapper */
.service-card-img {
width: 100%; height: 210px; overflow: hidden; flex-shrink: 0;
}
.service-card-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s var(--ease); display: block;
}
.service-card:hover .service-card-img img { transform: scale(1.05); }
/* hours-item-icon */
.hours-item-icon {
width: 52px; height: 52px; border-radius: 50%;
background: var(--gray-6); display: flex; align-items: center;
justify-content: center; margin: 0 auto 1rem;
}
.hours-item-icon i { color: var(--dark); font-size: 1.25rem; }
/* override the earlier hours-item i rule to allow div wrapper */
.hours-item > i { font-size: 1.75rem; color: var(--primary); margin-bottom: 1rem; display: block; }
/* split-list & split-check used as li class in generated pages */
.split-list li.split-check,
.split-list .split-check {
display: flex; align-items: flex-start; gap: 0.875rem;
padding: 0.75rem 0; font-size: 0.9375rem; color: var(--body-text);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.split-list .split-check:last-child { border-bottom: none; }
.dark-cta .split-list .split-check { color: var(--gray-3); }
.split-list .split-check i {
color: var(--primary); font-size: 0.875rem;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(45,80,64,0.10);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.split-list .split-check span { line-height: 1.6; }
/* faq-support flex */
.faq-support { flex-wrap: wrap; }
.faq-support h3 {
font-size: 1.375rem; font-family: var(--font-h); color: var(--dark);
margin-bottom: 0.5rem;
}
.faq-support > p { font-size: 0.9375rem; color: var(--body-text); margin-bottom: 0; width: 100%; }
/* booking-contact-item strong/span */
.booking-contact-item strong {
display: block; font-size: 0.8125rem; font-weight: 600; color: var(--dark);
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem;
}
.booking-contact-item span { font-size: 0.9375rem; color: var(--body-text); line-height: 1.5; }
/* emergency-bar span */
.emergency-bar span { font-size: 0.9375rem; color: var(--gray-3); line-height: 1.5; }
.emergency-bar a { color: var(--primary); font-weight: 600; }
/* hours-item span (subtitle line) */
.hours-item span { font-size: 0.8125rem; color: var(--body-text); display: block; margin-top: 0.25rem; }
/* filter-btn using btn classes */
.services-filter .btn.filter-btn.active { background: var(--dark) !important; color: var(--white) !important; border-color: var(--dark) !important; }
/* Services categorised sections */
.svc-section { padding: 5rem 0 0; }
.svc-section:last-child { padding-bottom: 5rem; }
.svc-section-header {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--gray-5);
max-width: 640px;
}
.svc-section-header h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin: 0 0 0.875rem;
line-height: 1.15;
}
.svc-section-header h2 em { color: var(--primary); font-style: italic; }
.svc-section-header p {
font-size: 1rem; color: var(--body-text);
line-height: 1.7; margin: 0;
}
.svc-grid--top { border-top: 1px solid var(--gray-5); }
.svc-section-divider {
border: none; border-top: 1px solid var(--gray-4);
margin: 0;
}
@media (max-width: 700px) {
.svc-section { padding: 3.5rem 0 0; }
}
/* contact-info ul vs div */
ul.contact-info-list { padding: 0; margin: 0; }
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1100px) {
.why-grid { grid-template-columns: repeat(2,1fr); }
.team-grid { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.stats-grid { grid-template-columns: repeat(2,1fr); }
.tab-img { height: 300px; }
}
@media (max-width: 900px) {
section { padding: 4.5rem 0; }
.hero-inner { grid-template-columns: 1fr; }
.hero-image-wrap { display: none; }
.hero-content { padding-bottom: 4rem; }
.why-us-header { grid-template-columns: 1fr; gap: 2rem; }
.split-inner { grid-template-columns: 1fr; gap: 3rem; }
.dark-cta-inner { grid-template-columns: 1fr; gap: 3rem; }
.testimonials-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; gap: 3rem; }
.booking-grid { grid-template-columns: 1fr; gap: 3rem; }
.steps-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr 1fr; }
.hours-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
:root { --gap: 1.25rem; }
body { padding-top: 62px; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.75rem; }
/* ---- Navbar ---- */
.navbar { padding: 0.875rem 0; }
.navbar-inner { position: relative; justify-content: space-between; }
/* Center logo on mobile */
.navbar-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo-img--desktop { display: none; }
.logo-img--mobile { display: block; height: 48px; width: auto; }
/* Hide desktop CTA from header — moved to bottom bar */
.navbar .btn-ihb { display: none; }
.navbar-nav {
display: none;
position: static; transform: none;
background: none; border: none; box-shadow: none; padding: 0;
}
.navbar-toggle { display: flex; }
.navbar-nav.open {
display: flex; flex-direction: column; position: fixed;
top: 64px; left: 0; right: 0; background: var(--white);
padding: 1rem var(--gap); border-bottom: 1px solid var(--gray-5);
box-shadow: 0 12px 40px rgba(0,0,0,0.1); z-index: 998;
max-height: calc(100vh - 64px); overflow-y: auto;
}
/* ---- Bottom booking bar (mobile only) ---- */
.mobile-book-bar {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 997;
padding: 0.75rem 1.25rem;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--gray-5);
box-shadow: 0 -4px 24px rgba(38,51,45,0.10);
}
.mobile-book-btn {
width: 100%;
justify-content: center;
padding: 0.9rem 1.5rem;
font-size: 0.9375rem;
}
/* ---- Mobile nav dropdown ---- */
.nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
position: static !important;
transform: none !important;
left: auto !important;
top: auto !important;
opacity: 1; visibility: visible;
box-shadow: none; border: none; border-radius: 0;
padding: 0.25rem 0 0.25rem 0.75rem; background: none; min-width: unset;
display: none;
border-left: 2px solid var(--gray-4);
margin: 0.25rem 0 0.5rem;
}
.nav-dropdown.open .nav-dropdown-menu { display: block !important; }
.nav-dd-item {
padding: 0.625rem 0.75rem !important;
gap: 0 !important;
}
.nav-dd-icon { display: none; }
.nav-dd-text { flex-direction: column; gap: 0.1rem; }
.nav-dd-text strong { font-size: 0.9375rem; }
.nav-dd-text span { font-size: 0.775rem; color: var(--body-text); }
/* ---- Cinematic hero ---- */
.ph-cinematic::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.15) 100%);
z-index: 1;
pointer-events: none;
}
.ph-hero-content {
left: var(--gap);
right: var(--gap);
bottom: 22%;
max-width: 100%;
}
.ph-hero-heading { font-size: clamp(2rem, 8vw, 3rem); text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 4px 32px rgba(0,0,0,0.5); }
.ph-hero-heading em { text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 4px 32px rgba(0,0,0,0.5); }
.ph-hero-sub { font-size: 0.9375rem; max-width: 100%; text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 3px 24px rgba(0,0,0,0.4); }
/* ---- Forms / general ---- */
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; text-align: center; }
.values-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.faq-support { flex-direction: column; }
.split-img-badge { display: none; }
.hero-actions { flex-direction: column; align-items: flex-start; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
/* ---- Section headings / labels ---- */
.section-label { font-size: 0.7rem; }
.legal-hero-title { font-size: 2.25rem; }
.prac-hero-title { font-size: 2.25rem; }
.page-hero-title { font-size: 2.25rem; }
/* ---- Buttons inside sections ---- */
.btn-ihb { padding: 0.875rem 1.75rem; font-size: 0.9375rem; }
}
@media (max-width: 480px) {
.team-grid { grid-template-columns: 1fr; }
.booking-form-card { padding: 1.75rem; }
}
/* ========================================
HERO SPLIT LAYOUT (index.html)
======================================== */
.hs-section {
display: flex;
flex-direction: row;
min-height: calc(100vh - 80px);
overflow: hidden;
background: var(--white);
padding: 0;
}
.hs-left {
flex: 0 0 58%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 4rem clamp(2rem, 5vw, 5rem) 3rem clamp(1.5rem, 6vw, 6rem);
}
.hs-eyebrow {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--body-text);
}
.hs-main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 0;
}
.hs-title {
font-family: var(--font-h);
font-size: clamp(3rem, 4.8vw, 5rem);
font-weight: 400;
line-height: 1.05;
color: var(--dark);
margin: 0;
}
.hs-title em { color: var(--primary); font-style: italic; }
.hs-divider {
width: 4.5rem;
height: 3px;
background: var(--primary);
margin: 1.75rem 0;
border-radius: 2px;
}
.hs-subtitle {
font-size: 1.0625rem;
color: var(--body-text);
line-height: 1.75;
max-width: 480px;
margin-bottom: 2.25rem;
}
.hs-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
padding-top: 2rem;
border-top: 1px solid var(--gray-5);
}
.hs-contact-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--body-text);
line-height: 1.5;
}
.hs-contact-item svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.hs-right {
flex: 0 0 42%;
background: url('../images/Background 3.png') center center / cover no-repeat;
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}
@media (max-width: 900px) {
.hs-section { flex-direction: column; }
.hs-left { flex: none; padding: 3rem 1.5rem 2.5rem; }
.hs-right { flex: none; height: 55vw; clip-path: none; }
.hs-footer { grid-template-columns: 1fr; gap: 0.75rem; }
}
/* ========================================
HERO — DARK VARIANT
======================================== */
.hero--dark {
position: relative;
padding: 5rem 0 0;
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
background: url('../images/Background 1.png') center center / cover no-repeat;
}
.hero--dark::before {
content: '';
position: absolute;
inset: 0;
background: rgba(18, 30, 22, 0.62);
z-index: 0;
}
.hero--dark > .container { position: relative; z-index: 1; }
.hero--dark .hero-tag--light {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.8);
}
.hero--dark .hero-title { color: var(--white); }
.hero--dark .hero-title em { color: var(--primary); }
.hero--dark .hero-subtitle { color: rgba(255,255,255,0.7); }
/* heading clip reveal */
.heading-wrap { overflow: visible; display: block; }
.heading-inner { display: block; }
/* ========================================
HERE WHEN YOU NEED US (Section 2)
======================================== */
.hwnu-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/underlay pic 15.webp') center / cover scroll;
padding: 6rem 0; text-align: center;
contain: layout style paint;
transform: translateZ(0);
}
.hwnu-eyebrow {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--dark); opacity: 0.6;
margin-bottom: 2.5rem;
}
.hwnu-statement {
font-size: clamp(1.25rem, 2.2vw, 1.625rem);
font-weight: 400;
line-height: 1.65;
color: var(--dark);
max-width: 760px;
margin: 0 auto 3rem;
}
.hwnu-marquee {
overflow: hidden;
width: 100%;
margin-bottom: 3rem;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.hwnu-track {
display: flex;
gap: 0.875rem;
will-change: transform;
width: max-content;
animation: hwnu-scroll 30s linear infinite;
}
.hwnu-img {
width: 280px;
height: 190px;
object-fit: cover;
border-radius: var(--r-card);
flex-shrink: 0;
opacity: 0;
filter: blur(6px);
transform: translateZ(0) scale(0.95);
transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}
.hwnu-img.loaded {
opacity: 1;
filter: blur(0);
transform: translateZ(0) scale(1);
}
@keyframes hwnu-scroll {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
.hwnu-cta-wrap { display: flex; justify-content: center; }
@media (max-width: 700px) {
.hwnu-img { width: 200px; height: 140px; }
}
/* ========================================
WHY CHOOSE VERAVITA (Section 3)
======================================== */
.wcu-section { background: var(--white); padding: 5rem 0 6rem; }
/* Header */
.wcu-header { margin-bottom: 4.5rem; }
.wcu-eyebrow {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gray-3);
margin-bottom: 0.875rem;
}
.wcu-eyebrow i { font-size: 0.6rem; color: var(--gray-3); }
.wcu-heading {
font-family: var(--font-h);
font-size: clamp(2rem, 3vw, 2.5rem);
font-weight: 400;
color: var(--dark);
line-height: 1.2;
margin: 0;
}
/* Feature grid */
.wcu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem;
margin-bottom: 4rem;
align-items: start;
}
.wcu-item { display: flex; flex-direction: column; }
.wcu-icon-svg {
width: 52px;
height: 52px;
color: var(--gray-3);
margin-bottom: 1.75rem;
flex-shrink: 0;
}
.wcu-item-title {
font-family: var(--font-h);
font-size: 1.0625rem;
font-weight: 400;
color: var(--dark);
margin: 0 0 0.625rem;
line-height: 1.3;
}
.wcu-item-text {
font-size: 0.875rem;
color: var(--body-text);
line-height: 1.7;
margin: 0;
}
/* Certified care card */
.wcu-cert-card {
background: var(--white);
border-radius: var(--r-card);
padding: 2.5rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
}
.wcu-cert-left { display: flex; flex-direction: column; flex: 1; }
.wcu-cert-title {
font-family: var(--font-h);
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
font-weight: 400;
color: var(--dark);
margin: 0 0 1.5rem;
line-height: 1.25;
}
.wcu-cert-right {
display: flex; align-items: center; gap: 2.5rem; flex-shrink: 0;
}
.wcu-cert-divider { width: 1px; height: 56px; background: var(--gray-5); }
.wcu-cert-badge { display: flex; align-items: center; gap: 0.875rem; }
.wcu-cert-icon { font-size: 2.25rem; color: var(--gray-3); }
.wcu-cert-badge-title {
font-family: var(--font-b);
font-size: 0.9375rem; font-weight: 700;
color: var(--dark); letter-spacing: 0.03em;
}
.wcu-cert-badge-sub {
font-size: 0.6875rem; color: var(--body-text);
text-transform: uppercase; letter-spacing: 0.1em;
margin-top: 0.2rem;
}
@media (max-width: 900px) {
.wcu-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.wcu-cert-card { flex-direction: column; align-items: flex-start; }
.wcu-cert-right { flex-wrap: wrap; }
}
/* Mobile bottom booking bar — hidden on desktop */
.mobile-book-bar { display: none; }
/* ========================================
SERVICES ACCORDION SECTION (dark)
======================================== */
.services-accord-section {
position: relative;
background: var(--dark);
padding: 6rem 0;
overflow: hidden;
contain: layout style;
}
/* Video background */
.accord-video-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
transform: translateZ(0);
}
.accord-video-overlay {
position: absolute;
inset: 0;
background: rgba(18, 28, 20, 0.72);
z-index: 1;
}
.services-accord-inner { display: grid; grid-template-columns: 1fr 0.72fr; gap: 5rem; align-items: start; }
/* Sticky image card */
.services-accord-img {
position: sticky;
top: calc(50vh - 260px);
align-self: start;
}
.accord-img-card {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.accord-img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
transition: opacity 0.3s ease;
}
.accord-img-footer {
padding: 1.25rem 1.5rem 1.5rem;
background: linear-gradient(rgba(18,28,20,0), rgba(10,20,12,0.95));
position: absolute;
bottom: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
}
.accord-img-name {
font-size: 1rem; font-weight: 600; color: var(--white);
font-family: var(--font-b);
}
.accord-img-link {
display: inline-flex; align-items: center; gap: 0.375rem;
font-size: 0.8rem; color: var(--primary); font-weight: 500;
text-decoration: none; transition: gap 0.2s ease;
font-family: var(--font-b);
white-space: nowrap;
}
.accord-img-link:hover { gap: 0.6rem; }
/* Header */
.services-accord-content .section-label { color: rgba(255,255,255,0.45); }
.services-accord-content h2 { color: var(--white); margin-bottom: 0; }
.accord-list { margin-top: 2.5rem; }
.accord-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.accord-item:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
/* Trigger row */
.accord-trigger {
display: grid;
grid-template-columns: 2.5rem 1fr 2.25rem auto;
align-items: center;
gap: 0.75rem;
width: 100%; padding: 1.25rem 0; text-align: left;
cursor: pointer; background: none; border: none;
transition: color var(--dur);
}
.accord-num {
font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.2);
font-family: var(--font-b); letter-spacing: 0.06em;
transition: color var(--dur);
}
.accord-label {
color: var(--white); font-size: 1.0625rem; font-family: var(--font-b);
font-weight: 500; transition: color var(--dur);
}
.accord-svc-icon {
width: 2.25rem; height: 2.25rem; border-radius: 9px;
background: rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.35); font-size: 0.8rem;
transition: background var(--dur), color var(--dur);
flex-shrink: 0;
}
.accord-item.open .accord-svc-icon,
.accord-trigger:hover .accord-svc-icon { background: var(--primary); color: var(--dark); }
.accord-trigger:hover .accord-num,
.accord-item.open .accord-num { color: var(--primary); }
.accord-trigger:hover .accord-label,
.accord-item.open .accord-label { color: var(--primary); }
.accord-icon { font-size: 0.8rem; color: rgba(255,255,255,0.3); transition: transform 0.4s var(--ease), color var(--dur); flex-shrink: 0; }
.accord-item.open .accord-icon { transform: rotate(45deg); color: var(--primary); }
/* Body */
.accord-body { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.accord-item.open .accord-body { max-height: 500px; }
.accord-body-inner {
padding: 0 0 1.5rem 3.25rem;
display: flex; flex-direction: column; gap: 0.875rem;
}
.accord-body-inner p { color: rgba(255,255,255,0.55); font-size: 0.9375rem; line-height: 1.75; margin: 0; }
.accord-learn {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.825rem; font-weight: 600; color: var(--primary);
text-decoration: none; font-family: var(--font-b);
transition: gap 0.2s ease; width: fit-content;
}
.accord-learn:hover { gap: 0.65rem; }
/* ========================================
TEAM — updated header layout
======================================== */
.team-section { background: var(--white); }
.team-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 3rem; gap: 2rem;
}
.team-header h2 { margin-bottom: 0; }
/* ========================================
TESTIMONIAL SPLIT
======================================== */
.testimonial-split { background: var(--gray-6); padding: 6rem 0; }
.tsplit-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.tsplit-photo { width: 100%; height: 520px; object-fit: cover; border-radius: var(--r-card); }
.tsplit-img { position: relative; }
.tsplit-rating-badge {
position: absolute; bottom: 2rem; left: 2rem;
background: var(--white); border-radius: var(--r-card); padding: 1rem 1.5rem;
box-shadow: 0 12px 40px rgba(38,51,45,0.15);
text-align: center;
}
.tsplit-stars { color: #f5a623; font-size: 0.875rem; margin-bottom: 0.25rem; }
.tsplit-score { font-family: var(--font-h); font-size: 2rem; color: var(--dark); line-height: 1; }
.tsplit-platform { font-size: 0.8125rem; color: var(--body-text); margin-top: 0.25rem; }
.tsplit-content h2 { margin-bottom: 2rem; }
.tsplit-quotes { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.tsplit-quote {
background: var(--white); border-radius: var(--r-card); padding: 1.5rem;
box-shadow: 0 4px 20px rgba(38,51,45,0.06);
}
.tsplit-quote-stars { color: #f5a623; font-size: 0.875rem; margin-bottom: 0.75rem; }
.tsplit-quote p { font-size: 0.9375rem; color: var(--body-text); line-height: 1.7; margin-bottom: 1rem; }
.tsplit-author { display: flex; align-items: center; gap: 0.75rem; }
.tsplit-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tsplit-author strong { display: block; font-size: 0.9375rem; color: var(--dark); font-weight: 600; }
.tsplit-author span { font-size: 0.8125rem; color: var(--body-text); }
.tsplit-platforms { display: flex; gap: 1rem; flex-wrap: wrap; }
.tsplit-platform-badge {
display: flex; align-items: center; gap: 0.5rem;
background: var(--white); border: 1px solid var(--gray-5); border-radius: var(--r-btn);
padding: 0.5rem 1rem; font-size: 0.875rem;
}
.tsplit-platform-badge i { color: var(--dark); }
.tsplit-platform-badge span { font-weight: 600; color: var(--dark); }
.tsplit-platform-badge small { color: var(--body-text); }
/* ========================================
DARK REVIEWS SECTION
======================================== */
.reviews-dark-section { background: var(--dark); padding: 6rem 0; }
.reviews-dark-section .section-header { margin-bottom: 3rem; }
.reviews-dark-quote {
max-width: 680px; margin: 0 auto 3.5rem;
text-align: center;
}
.reviews-dark-quote blockquote {
font-family: var(--font-h); font-size: clamp(1.125rem, 2vw, 1.375rem);
color: var(--white); font-style: italic; line-height: 1.65;
margin-bottom: 1.5rem;
}
.reviews-dark-author { display: flex; align-items: center; justify-content: center; gap: 0.875rem; }
.reviews-dark-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.reviews-dark-badges { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.review-badge-card {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-card); padding: 2rem 1.5rem; text-align: center;
transition: background var(--dur), border-color var(--dur);
}
.review-badge-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(45,80,64,0.20); }
.review-badge-icon { font-size: 1.75rem; color: var(--primary); margin-bottom: 0.75rem; display: block; }
.review-badge-score { font-family: var(--font-h); font-size: 2.25rem; color: var(--white); line-height: 1; margin-bottom: 0.375rem; }
.review-badge-stars { color: #f5a623; font-size: 0.875rem; margin-bottom: 0.5rem; }
.review-badge-label { font-size: 0.875rem; color: var(--gray-3); }
/* ========================================
STATS MOSAIC (bento grid)
======================================== */
.stats-mosaic { background: var(--white); padding: 6rem 0; }
.mosaic-grid {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.25rem;
}
.mosaic-card {
background: var(--gray-6); border-radius: var(--r-card); padding: 2.5rem;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 220px;
}
.mosaic-card--large { grid-row: span 2; }
.mosaic-card--img { grid-column: span 1; padding: 0; overflow: hidden; }
.mosaic-card--img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.mosaic-card--accent { background: var(--primary); }
.mosaic-card--dark { background: var(--dark); }
.mosaic-number {
font-family: var(--font-h); font-size: clamp(2.5rem, 5vw, 3.75rem);
color: var(--dark); line-height: 1; display: block;
}
.mosaic-card--accent .mosaic-number { color: var(--dark); }
.mosaic-card--dark .mosaic-number,
.mosaic-card--dark .mosaic-suffix,
.mosaic-card--dark .mosaic-label { color: var(--white); }
.mosaic-suffix { font-family: var(--font-h); font-size: 2rem; color: var(--dark); }
.mosaic-label { font-size: 0.9375rem; color: var(--body-text); margin-top: 0.5rem; display: block; }
.mosaic-card--accent .mosaic-label { color: var(--dark); opacity: 0.7; }
/* ========================================
ABOUT HOME SECTION
======================================== */
.about-home-section {
display: flex;
height: 100vh;
min-height: 560px;
padding: 0;
background: var(--dark);
overflow: hidden;
contain: layout style paint;
transform: translateZ(0);
}
.about-home-left {
flex: 0 0 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 4rem 3.5rem 4rem 6rem;
overflow: hidden;
position: relative;
z-index: 2;
transform: translateZ(0);
}
.about-home-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-b);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-3);
margin-bottom: 1rem;
}
.about-home-label i { color: var(--primary); font-size: 0.7rem; }
.about-home-heading {
font-family: var(--font-h);
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 700;
color: var(--white);
line-height: 1.15;
margin-bottom: 1rem;
}
.about-home-heading em { color: var(--white); font-style: italic; font-weight: 400; }
.about-home-sub {
font-family: var(--font-b);
font-size: 1rem;
color: var(--gray-3);
line-height: 1.7;
margin-bottom: 2rem;
max-width: 400px;
}
/* Scrolling doctor marquee */
.about-home-profiles {
overflow: hidden;
margin-top: 2rem;
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.about-profiles-track {
display: flex;
width: max-content;
animation: profiles-scroll 14s linear infinite;
will-change: transform;
transform: translateZ(0);
}
@keyframes profiles-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.about-profile-thumb {
width: 150px;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top center;
border-radius: 14px;
border: 2px solid rgba(255,255,255,0.15);
flex-shrink: 0;
margin-right: 1rem;
}
/* Video panel + green fade overlay */
.about-home-video-wrap {
flex: 1;
position: relative;
overflow: hidden;
contain: layout style paint;
transform: translateZ(0);
}
.about-home-video-wrap::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 240px;
background: linear-gradient(to right, var(--dark) 0%, transparent 100%);
z-index: 2;
pointer-events: none;
}
.about-home-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
transform: translateZ(0);
}
/* ========================================
WELLNESS CTA SECTION
======================================== */
.wellness-cta-section { background: var(--gray-6); padding: 6rem 0; }
.wellness-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.wellness-cta-content h2 { margin-bottom: 1.25rem; }
.wellness-cta-content > p { font-size: 1.0625rem; color: var(--body-text); line-height: 1.75; margin-bottom: 1.5rem; }
.wellness-stack-item {
display: flex; align-items: center; gap: 0.75rem;
font-size: 0.9375rem; color: var(--dark); padding: 0.5rem 0;
}
.wellness-stack-item i { color: var(--primary); font-size: 1.125rem; }
.wellness-img-stack { position: relative; }
.wellness-img { border-radius: var(--r-card); object-fit: cover; }
.wellness-img--top { width: 85%; height: 300px; margin-left: auto; display: block; }
.wellness-img--btm { width: 70%; height: 240px; margin-top: -4rem; position: relative; z-index: 1; box-shadow: 0 20px 60px rgba(38,51,45,0.2); display: block; }
/* ========================================
RESPONSIVE — NEW SECTIONS
======================================== */
@media (max-width: 1100px) {
.mosaic-grid { grid-template-columns: 1fr 1fr 1fr; }
.mosaic-card--large { grid-row: span 1; }
}
@media (max-width: 900px) {
.intro-inner { grid-template-columns: 1fr; gap: 3rem; }
.features-grid { grid-template-columns: 1fr; }
.services-accord-inner { grid-template-columns: 1fr; gap: 3rem; }
.services-accord-img { display: none; }
.tsplit-inner { grid-template-columns: 1fr; gap: 3rem; }
.tsplit-photo { height: 340px; }
.reviews-dark-badges { grid-template-columns: repeat(2,1fr); }
.mosaic-grid { grid-template-columns: 1fr 1fr; }
.wellness-cta-inner { grid-template-columns: 1fr; gap: 3rem; }
.team-header { flex-direction: column; align-items: flex-start; }
.about-home-section { flex-direction: column; height: auto; }
.about-home-left { flex: none; padding: 4rem 2rem 3rem; }
.about-home-video-wrap { display: none; }
}
@media (max-width: 600px) {
.reviews-dark-badges { grid-template-columns: 1fr 1fr; }
.mosaic-grid { grid-template-columns: 1fr 1fr; }
.intro-images { flex-direction: column; }
.trust-badges { gap: 1rem; }
}
/* ========================================
INTERACTIVE HOVER BUTTON (.btn-ihb)
Adapted from: buttom prompt / InteractiveHoverButton
======================================== */
.btn-ihb {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
padding: 1.0625rem 2.5rem;
border-radius: var(--r-btn);
font-size: 1rem; font-weight: 500; font-family: var(--font-b);
cursor: pointer; white-space: nowrap; border: 2px solid transparent;
text-decoration: none; transition: color 0.4s ease;
}
/* Shiny sweep animation for primary CTA buttons */
@property --shiny-x {
syntax: '';
inherits: false;
initial-value: 100%;
}
@keyframes btn-shiny-sweep {
0%, 10% { --shiny-x: 100%; }
80%, 100% { --shiny-x: -100%; }
}
/* Primary = Sage */
.btn-ihb--primary {
background: #728C69;
border-color: #728C69;
color: #fff;
transition: background 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 18px rgba(114,140,105,0.35);
}
.btn-ihb--primary:hover {
background: #5d7355;
border-color: #5d7355;
box-shadow: 0 6px 24px rgba(114,140,105,0.45);
transform: scale(0.97);
}
.btn-ihb--primary:active { transform: scale(0.95); }
.btn-ihb--primary .btn-ihb-blob { display: none; }
.btn-ihb--primary .btn-ihb-reveal { display: none; }
.btn-ihb--primary .btn-ihb-default { transform: none !important; opacity: 1 !important; }
/* Dark variant keeps blob/reveal */
.btn-ihb--dark { background: var(--dark); color: var(--white); border-color: var(--dark); }
.btn-ihb-blob {
position: absolute; border-radius: 50%;
width: 200%; padding-top: 200%;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none; z-index: 0;
}
.btn-ihb--dark .btn-ihb-blob { background: var(--primary); }
.btn-ihb--dark:hover .btn-ihb-blob { transform: translate(-50%, -50%) scale(1); }
.btn-ihb-default, .btn-ihb-reveal {
display: flex; align-items: center; gap: 0.5rem;
position: relative; z-index: 1;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}
.btn-ihb-reveal {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
transform: translateX(-60px); opacity: 0; white-space: nowrap;
}
.btn-ihb--dark:hover .btn-ihb-default { transform: translateX(60px); opacity: 0; }
.btn-ihb--dark:hover .btn-ihb-reveal { transform: translateX(0); opacity: 1; }
.btn-ihb--dark:hover .btn-ihb-reveal { color: var(--white); }
/* ========================================
TEXT GRADIENT SCROLL
Adapted from: text gradient scroll / TextGradientScroll
======================================== */
.tgs-word { display: inline; white-space: nowrap; contain: layout style; }
.tgs-char { display: inline; }
/* ========================================
TEAM CARD TOOLTIPS
Adapted from: animated tooltip / AnimatedTooltip
======================================== */
.team-card { position: relative; }
.team-tooltip {
position: absolute;
bottom: calc(100% + 0.875rem); left: 50%;
transform: translateX(-50%);
background: var(--dark); color: var(--white);
padding: 0.625rem 1rem 0.75rem; border-radius: 0.75rem;
font-size: 0.8125rem; font-family: var(--font-b);
white-space: nowrap; pointer-events: none; z-index: 20;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
text-align: center;
}
.team-tooltip::after {
content: '';
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent; border-top-color: var(--dark);
}
.team-tooltip-name { font-weight: 600; color: var(--white); display: block; font-size: 0.875rem; }
.team-tooltip-role { font-size: 0.75rem; color: var(--gray-3); display: block; margin-top: 0.2rem; }
.team-tooltip-line-1 {
position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(to right, transparent, #10b981, transparent);
}
.team-tooltip-line-2 {
position: absolute; bottom: 0; left: 15%; right: 25%; height: 1px;
background: linear-gradient(to right, transparent, #0ea5e9, transparent);
}
/* ========================================
ANIMATED TESTIMONIALS
Adapted from: testimonal prompt / AnimatedTestimonials
======================================== */
.anim-testimonials {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay pic desktop/underlay pic 18.webp') center / cover scroll;
padding: 6rem 0;
}
.at-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
gap: 5rem 5rem;
align-items: start;
}
/* Desktop grid placement */
.at-stack-wrap {
grid-column: 1; grid-row: 1 / span 2;
position: relative; height: 520px;
display: flex; align-items: center; justify-content: center;
align-self: center;
}
.at-text { grid-column: 2; grid-row: 1; }
.at-nav { grid-column: 2; grid-row: 2; }
.at-stack {
position: relative; width: 100%; max-width: 400px;
height: 480px; margin: 0 auto;
}
.at-card {
position: absolute; inset: 0;
border-radius: var(--r-card); overflow: hidden;
will-change: transform;
transform: translateZ(0);
box-shadow: 0 8px 24px rgba(38,51,45,0.18);
}
.at-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-text { display: flex; flex-direction: column; }
.at-text .section-label { margin-bottom: 1.125rem; }
.at-text h2 { margin-bottom: 2rem; }
.at-quote-area {
background: var(--white); border-radius: var(--r-card); padding: 1.75rem;
margin-bottom: 1.75rem; box-shadow: 0 4px 20px rgba(38,51,45,0.06);
}
.at-stars { color: #f5a623; font-size: 1rem; letter-spacing: 3px; margin-bottom: 1rem; }
.at-quote {
font-family: var(--font-h); font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
color: var(--dark); line-height: 1.7; font-style: italic;
margin-bottom: 1.25rem;
}
.at-author { display: flex; align-items: center; gap: 0.875rem; }
.at-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.at-author strong { display: block; font-size: 0.9375rem; color: var(--dark); font-weight: 600; font-family: var(--font-b); }
.at-author span { font-size: 0.8125rem; color: var(--body-text); }
.at-nav { display: flex; align-items: center; gap: 1rem; }
.at-btn {
width: 44px; height: 44px; border-radius: 50%;
border: 1.5px solid var(--gray-5); background: var(--white);
display: flex; align-items: center; justify-content: center;
color: var(--dark); font-size: 0.875rem; cursor: pointer; flex-shrink: 0;
transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.at-btn:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.at-dots { display: flex; gap: 0.5rem; align-items: center; }
.at-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--gray-5); border: none; cursor: pointer; padding: 0;
transition: background var(--dur), transform var(--dur);
}
.at-dot--active { background: var(--dark); transform: scale(1.3); }
.at-counter { font-size: 0.875rem; font-weight: 500; color: var(--dark); letter-spacing: 0.05em; min-width: 3.5rem; text-align: center; }
/* ========================================
RESPONSIVE — ENHANCEMENTS
======================================== */
@media (max-width: 900px) {
/* Mobile: image → arrows → text (all single column, explicit rows) */
.at-wrap {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 1.5rem;
}
.at-stack-wrap { grid-column: 1; grid-row: 1; height: 360px; align-self: auto; }
.at-nav { grid-column: 1; grid-row: 2; justify-content: center; padding: 0.25rem 0; }
.at-text { grid-column: 1; grid-row: 3; }
.at-stack { height: 320px; max-width: 100%; }
/* Bigger tap targets for mobile arrows */
.at-btn { width: 52px; height: 52px; font-size: 1rem; }
}
@media (max-width: 600px) {
.team-tooltip { display: none; }
.btn-ihb-reveal { display: none; }
}
/* ========================================
GLOBAL MOBILE FIXES
======================================== */
body { overflow-x: hidden; }
/* Services hero — reduce height on small phones */
@media (max-width: 480px) {
.svc-hero { min-height: 440px; height: 80vh; }
}
/* sf-footer — responsive */
@media (max-width: 900px) {
.sf-footer { height: auto; }
.sf-fixed {
position: static;
height: auto;
}
.sf-body { padding: 2.5rem 2rem 1.75rem; }
.sf-top { flex-wrap: wrap; gap: 2rem; }
.sf-brand { flex: 0 0 100%; }
.sf-col { flex: 1 1 140px; }
}
@media (max-width: 768px) {
.sf-fixed { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
.sf-body { padding: 2rem 1.25rem 1.5rem; }
.sf-top { gap: 1.75rem; }
.sf-col { flex: 1 1 100%; }
.sf-bottom { flex-direction: column; text-align: center; }
}
/* Contact form rows — collapse earlier */
/* Follow pills — full width on mobile */
@media (max-width: 860px) {
.follow-pills { justify-content: center; gap: 0.75rem; }
.follow-pill { width: 30%; flex-shrink: 1; }
.follow-pill--short { margin-top: 40px; }
}
@media (max-width: 540px) {
.follow-inner { padding: 0 1.25rem; }
.follow-pills { flex-direction: column; align-items: center; gap: 1rem; }
.follow-pill { width: 80%; height: 260px !important; }
.follow-pill--short { margin-top: 0; }
}
/* Visit section — mobile padding */
@media (max-width: 540px) {
.visit-inner { padding: 0 1.25rem; }
.visit-card { padding: 1.5rem; }
}
/* Contact FAQ mobile padding */
@media (max-width: 540px) {
.cfaq-inner { padding: 0 1.25rem; }
}
/* Navbar dropdown — visible on mobile inside open hamburger menu */
@media (max-width: 768px) {
.nav-dropdown { display: block; }
}
/* ========================================
CAREERS PAGE
======================================== */
/* Hero */
.careers-hero {
padding: 7rem 0 4rem;
position: relative; overflow: hidden;
border-bottom: 1px solid var(--gray-5);
}
.careers-hero .container { position: relative; z-index: 2; }
.careers-hero-inner {
max-width: 680px;
}
.careers-hero .careers-hero-inner h1 { margin: 0.5rem 0 1rem; color: var(--white) !important; }
.careers-hero .careers-hero-inner p { font-size: 1.125rem; color: rgba(255,255,255,0.85) !important; line-height: 1.7; }
.careers-hero .section-label { color: rgba(255,255,255,0.75) !important; }
/* Open positions */
.careers-positions { padding: 5rem 0; }
.careers-section-head { text-align: center; max-width: 600px; margin: 0 auto 3.5rem; }
.careers-section-head h2 { margin: 0.5rem 0 0.75rem; }
.careers-section-head p { color: var(--text-2); }
.careers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.careers-card {
background: var(--white);
border: 1px solid var(--gray-5);
border-radius: var(--r-card);
padding: 2rem;
display: flex;
gap: 1.25rem;
transition: box-shadow 0.25s, transform 0.25s;
}
.careers-card:hover {
box-shadow: 0 8px 32px rgba(38,51,45,0.10);
transform: translateY(-3px);
}
.careers-card-icon {
flex-shrink: 0;
width: 48px; height: 48px;
background: var(--green-pale, #eef7ee);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--green);
font-size: 1.125rem;
}
.careers-card-body { flex: 1; }
.careers-card-top { margin-bottom: 0.75rem; }
.careers-card-top h3 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; margin: 0 0 0.5rem; color: var(--dark); }
.careers-card-top h3 span { font-weight: 400; color: var(--text-2); font-size: 1rem; }
.careers-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.careers-tag {
font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em;
background: var(--gray-6); color: var(--text-2);
padding: 0.25rem 0.625rem; border-radius: 999px;
border: 1px solid var(--gray-5);
}
.careers-card-body > p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.65; margin-bottom: 1rem; }
.careers-list {
list-style: none; padding: 0; margin: 0 0 1.25rem;
display: flex; flex-direction: column; gap: 0.375rem;
}
.careers-list li {
font-size: 0.875rem; color: var(--text-2);
padding-left: 1.25rem; position: relative;
}
.careers-list li::before {
content: '✓'; position: absolute; left: 0;
color: var(--green); font-weight: 600;
}
.careers-apply-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.9rem; font-weight: 600; color: var(--green);
text-decoration: none;
transition: gap 0.2s;
}
.careers-apply-btn:hover { gap: 0.75rem; }
/* Why join us */
.careers-why {
padding: 5rem 0;
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/careers overlay pic.jpg') center / cover scroll;
}
.careers-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.careers-why-text h2 { margin: 0.5rem 0 1rem; }
.careers-why-text p { color: var(--text-2); line-height: 1.7; }
.careers-why-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.careers-perk {
background: var(--white);
border: 1px solid var(--gray-5);
border-radius: var(--r-card);
padding: 1.5rem;
}
.careers-perk-icon {
width: 40px; height: 40px;
background: var(--green-pale, #eef7ee);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--green); font-size: 1rem;
margin-bottom: 0.875rem;
}
.careers-perk h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; margin: 0 0 0.5rem; }
.careers-perk p { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; margin: 0; }
/* CTA banner */
.careers-cta {
padding: 5rem 0;
background: var(--dark);
}
.careers-cta-inner {
text-align: center; max-width: 560px; margin: 0 auto;
}
.careers-cta-inner h2 { color: var(--white); margin: 0 0 0.75rem; }
.careers-cta-inner p { color: rgba(255,255,255,0.65); margin-bottom: 2rem; line-height: 1.7; }
/* About page join-team CTA */
.about-join {
padding: 5rem 0;
background: var(--green);
}
.about-join-inner {
display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.about-join-text h2 { color: var(--white); margin: 0 0 0.5rem; }
.about-join-text p { color: rgba(255,255,255,0.8); margin: 0; font-size: 1.0625rem; }
.btn-ihb--white {
background: var(--white);
color: var(--green);
}
.btn-ihb--white .btn-ihb-blob { background: rgba(0,0,0,0.06); }
/* Careers responsive */
@media (max-width: 960px) {
.careers-grid { grid-template-columns: 1fr; }
.careers-why-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
.careers-hero { padding: 5rem 0 3rem; }
.careers-card { flex-direction: column; }
.careers-why-grid { grid-template-columns: 1fr; }
.about-join-inner { flex-direction: column; align-items: flex-start; }
}
/* ========================================
PRACTITIONER DETAIL PAGES
======================================== */
/* Back link */
.pd-back {
padding: 1.5rem 0 0;
background: var(--white);
}
.pd-back-link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; font-weight: 500; color: var(--body-text);
transition: color var(--dur);
}
.pd-back-link:hover { color: var(--primary); }
.pd-back-link i { font-size: 0.75rem; }
/* Hero */
.pd-hero {
padding: 3.5rem 0 5rem;
background: var(--white);
}
.pd-hero-inner {
display: grid;
grid-template-columns: 1fr 420px;
gap: 5rem;
align-items: start;
}
.pd-label {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.8125rem; font-weight: 500; color: var(--body-text);
text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1rem;
}
.pd-label::before {
content: ''; display: inline-block;
width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.pd-name {
font-family: var(--font-h);
font-size: clamp(2.5rem, 4.5vw, 3.75rem);
color: var(--dark); line-height: 1.1; margin-bottom: 0.5rem;
}
.pd-specialty {
font-size: 1rem; font-weight: 500; color: var(--primary);
letter-spacing: 0.04em; margin-bottom: 1.75rem;
}
.pd-short-bio {
font-size: 1.0625rem; color: var(--body-text);
line-height: 1.7; margin-bottom: 2rem;
max-width: 600px;
}
.pd-meta-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 2rem; margin-bottom: 2.5rem;
}
.pd-meta-block h4 {
font-family: var(--font-b); font-size: 0.75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--gray-3); margin-bottom: 0.875rem;
}
.pd-expertise-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.pd-expertise-list li {
display: flex; align-items: flex-start; gap: 0.5rem;
font-size: 0.9375rem; color: var(--body-text);
}
.pd-expertise-list li::before {
content: '✓'; color: var(--primary); font-weight: 700;
flex-shrink: 0; margin-top: 0.05em;
}
.pd-cred-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.pd-cred-list li {
font-size: 0.9375rem; color: var(--body-text);
padding-left: 1rem; position: relative;
}
.pd-cred-list li::before {
content: '—'; position: absolute; left: 0;
color: var(--primary); font-size: 0.875rem;
}
/* Photo */
.pd-photo-wrap {
border-radius: 1.25rem; overflow: hidden;
aspect-ratio: 3 / 4; background: var(--gray-6);
position: sticky; top: 6rem;
}
.pd-photo {
width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
/* Per-practitioner underlay backgrounds */
.dr-jill-nazar { --dr-underlay: url('../images/underlay pic desktop/underlay pic 19.webp'); }
.dr-susan-mankaeeva { --dr-underlay: url('../images/underlay pic desktop/underlay pic 20.webp'); }
.dr-viktoriia-taylor { --dr-underlay: url('../images/underlay pic desktop/underlay pic 21.webp'); }
.vialeta-bhharvani { --dr-underlay: url('../images/underlay pic desktop/underlay pic 22.webp'); }
.dr-jill-nazar .pd-detail-section,
.dr-susan-mankaeeva .pd-detail-section,
.dr-viktoriia-taylor .pd-detail-section,
.vialeta-bhharvani .pd-detail-section,
.dr-jill-nazar .pd-services-section,
.dr-susan-mankaeeva .pd-services-section,
.dr-viktoriia-taylor .pd-services-section,
.vialeta-bhharvani .pd-services-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
var(--dr-underlay) center / cover scroll;
}
/* Detail section */
.pd-detail-section {
background: var(--gray-6);
padding: 5rem 0;
}
.pd-detail-inner {
max-width: 780px;
}
.pd-detail-inner h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin-bottom: 1.25rem;
}
.pd-detail-inner p {
font-size: 1.0625rem; color: var(--body-text);
line-height: 1.75; margin-bottom: 1.25rem;
}
.pd-help-heading, .pd-approach-heading {
font-family: var(--font-h);
font-size: 1.375rem; color: var(--dark);
margin: 2.5rem 0 1rem;
}
.pd-help-list, .pd-approach-list {
list-style: none; display: flex; flex-direction: column; gap: 0.55rem;
margin-bottom: 1.5rem;
}
.pd-help-list li, .pd-approach-list li {
display: flex; align-items: flex-start; gap: 0.6rem;
font-size: 1rem; color: var(--body-text); line-height: 1.6;
}
.pd-help-list li::before {
content: '→'; color: var(--primary); font-weight: 700; flex-shrink: 0;
}
.pd-approach-list li::before {
content: '✦'; color: var(--primary); font-size: 0.7rem; flex-shrink: 0; margin-top: 0.3em;
}
/* Booking form */
.pd-booking-section {
background: var(--white);
padding: 5rem 0;
}
.pd-booking-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 5rem; align-items: center;
}
.pd-booking-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.pd-booking-heading em { color: var(--primary); font-style: italic; }
.pd-booking-sub { font-size: 1rem; color: var(--body-text); margin-bottom: 1.75rem; }
/* Perks list */
.pd-booking-perks {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0.875rem;
}
.pd-booking-perks li {
display: flex; align-items: center; gap: 0.75rem;
font-size: 0.9375rem; color: var(--dark); font-weight: 500;
}
.pd-booking-perks li i { color: var(--primary); font-size: 1rem; flex-shrink: 0; }
/* Jane App card */
.pd-jane-card {
background: var(--dark);
border-radius: var(--r-card);
padding: 2.5rem 2.25rem;
display: flex; flex-direction: column; gap: 1.25rem;
box-shadow: 0 24px 64px rgba(10,25,15,0.18);
}
.pd-jane-icon {
width: 3.25rem; height: 3.25rem; border-radius: 50%;
background: rgba(114,140,105,0.18);
display: flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 1.375rem;
}
.pd-jane-title {
font-family: var(--font-h); font-size: 1.375rem; font-weight: 400;
color: #ffffff; margin: 0; line-height: 1.3;
}
.pd-jane-desc {
font-size: 0.9375rem; color: rgba(255,255,255,0.65);
line-height: 1.65; margin: 0;
}
.pd-jane-btn { width: 100%; justify-content: center; }
.pd-jane-note {
font-size: 0.8125rem; color: rgba(255,255,255,0.4);
margin: 0; text-align: center; display: flex;
align-items: center; justify-content: center; gap: 0.5rem;
}
.pd-jane-note i { font-size: 0.75rem; }
/* Services cards */
.pd-services-section {
background: var(--gray-6);
padding: 5rem 0;
}
.pd-services-header { margin-bottom: 3rem; }
.pd-services-header .section-label { display: flex; }
.pd-services-header h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 0.5rem; }
.pd-services-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
.pd-svc-card {
background: var(--white); border-radius: var(--r-card);
overflow: hidden;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pd-svc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(30,53,40,0.1); }
.pd-svc-img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.pd-svc-img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s var(--ease); }
.pd-svc-card:hover .pd-svc-img { transform: scale(1.04); }
.pd-svc-body { padding: 1.5rem; }
.pd-svc-title {
font-family: var(--font-h); font-size: 1.125rem;
color: var(--dark); margin-bottom: 0.5rem;
}
.pd-svc-desc { font-size: 0.9rem; color: var(--body-text); margin: 0; }
/* Responsive */
@media (max-width: 960px) {
.pd-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
.pd-photo-wrap { position: static; order: -1; aspect-ratio: 3/4; max-width: 420px; margin: 0 auto; }
.pd-booking-inner { grid-template-columns: 1fr; gap: 3rem; }
.pd-services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.pd-meta-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.pd-form-row { grid-template-columns: 1fr; }
.pd-services-grid { grid-template-columns: 1fr; }
}
/* ========================================
SERVICE DETAIL PAGES (.sd-*)
======================================== */
/* Back link */
.sd-back { padding: 1.5rem 0 0; background: var(--white); }
.sd-back-link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; font-weight: 500; color: var(--body-text);
transition: color var(--dur);
}
.sd-back-link:hover { color: var(--primary); }
.sd-back-link i { font-size: 0.75rem; }
/* Hero */
.sd-hero { padding: 3.5rem 0 0; background: var(--white); }
.sd-hero-inner {
display: grid;
grid-template-columns: 1fr 480px;
gap: 4rem; align-items: start;
}
.sd-hero-icon {
width: 52px; height: 52px; border-radius: 12px;
background: var(--gray-6); display: flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 1.375rem; margin-bottom: 1.25rem;
}
.sd-hero-label {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.8125rem; font-weight: 500; color: var(--body-text);
text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.875rem;
}
.sd-hero-label::before {
content: ''; display: inline-block;
width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.sd-hero-title {
font-family: var(--font-h);
font-size: clamp(2.25rem, 4vw, 3.25rem);
color: var(--dark); line-height: 1.1; margin-bottom: 1.25rem;
}
.sd-hero-title em { color: var(--primary); font-style: italic; }
.sd-hero-intro {
font-size: 1.0625rem; color: var(--body-text);
line-height: 1.75; margin-bottom: 2rem; max-width: 560px;
}
.sd-hero-img-wrap {
border-radius: 1.25rem; overflow: hidden;
aspect-ratio: 4/5; background: var(--gray-6);
}
.sd-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-hero-img--mobile { display: none; }
@media (max-width: 768px) {
.sd-hero-img--desktop { display: none; }
.sd-hero-img--mobile { display: block; }
}
/* Content + Sidebar */
.sd-body { background: var(--white); padding: 4rem 0 5rem; }
/* Per-service underlay backgrounds — white/green/white pattern */
.svc-botox .sd-body,
.svc-dermal-fillers .sd-body,
.svc-lab-testing .sd-body,
.svc-naturopathic-care .sd-body,
.svc-osteopathy .sd-body,
.svc-weight-loss .sd-body,
.svc-pediatric-care .sd-body,
.svc-iv-therapy .sd-body,
.svc-fatigue-treatment .sd-body,
.svc-massage-therapy .sd-body,
.svc-fertility-program .sd-body,
.svc-acupuncture-cupping .sd-body,
.svc-vitamin-injections .sd-body,
.svc-acupuncture-traditional .sd-body,
.svc-acupuncture-korean .sd-body,
.svc-acupuncture-childrens .sd-body,
.svc-acupuncture-scalp-electro .sd-body,
.svc-acupuncture-tui-na .sd-body,
.svc-acupuncture-cosmetic .sd-body,
.svc-acupuncture-tcm .sd-body,
.svc-clinical-esthetics .sd-body,
.svc-facial-acne .sd-body,
.svc-facial-anti-aging .sd-body,
.svc-facial-dermaplaning .sd-body,
.svc-facial-european .sd-body,
.svc-facial-extraction .sd-body,
.svc-facial-green-peel .sd-body,
.svc-facial-relaxation .sd-body,
.svc-microdermabrasion .sd-body,
.svc-derma-needling .sd-body,
.svc-exosome-needling .sd-body,
.svc-exo-hair .sd-body,
.svc-skin-tag-removal .sd-body {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
var(--svc-underlay) center / cover scroll;
}
.svc-botox { --svc-underlay: url('../images/underlay pic desktop/Underlay pic 3.webp'); }
.svc-dermal-fillers { --svc-underlay: url('../images/underlay pic desktop/underlay pic 6.webp'); }
.svc-lab-testing { --svc-underlay: url('../images/underlay pic desktop/underlay pic 7.webp'); }
.svc-naturopathic-care { --svc-underlay: url('../images/underlay pic desktop/underlay pic 8.webp'); }
.svc-osteopathy { --svc-underlay: url('../images/underlay pic desktop/underlay pic 9.webp'); }
.svc-weight-loss { --svc-underlay: url('../images/underlay pic desktop/underlay pic 10.webp'); }
.svc-pediatric-care { --svc-underlay: url('../images/underlay pic desktop/underlay pic 12.webp'); }
.svc-iv-therapy { --svc-underlay: url('../images/underlay pic desktop/underlay pic 13.webp'); }
.svc-fatigue-treatment { --svc-underlay: url('../images/underlay pic desktop/Underlay pic 14.webp'); }
.svc-massage-therapy { --svc-underlay: url('../images/underlay pic desktop/underlay pic 15.webp'); }
.svc-fertility-program { --svc-underlay: url('../images/underlay pic desktop/underlay pic 16.webp'); }
.svc-acupuncture-cupping { --svc-underlay: url('../images/underlay pic desktop/underlay pic 17.webp'); }
.svc-vitamin-injections { --svc-underlay: url('../images/underlay pic desktop/underlay pic 18.webp'); }
/* Acupuncture & TCM pages */
.svc-acupuncture-traditional { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
.svc-acupuncture-korean { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
.svc-acupuncture-childrens { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
.svc-acupuncture-scalp-electro { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
.svc-acupuncture-tui-na { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
.svc-acupuncture-cosmetic { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
.svc-acupuncture-tcm { --svc-underlay: url('../images/underlay pic desktop/underlay pic 23.webp'); }
/* Clinical Esthetics pages */
.svc-clinical-esthetics { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-acne { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-anti-aging { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-dermaplaning { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-european { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-extraction { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-green-peel { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-facial-relaxation { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-microdermabrasion { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-derma-needling { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-exosome-needling { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-exo-hair { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.svc-skin-tag-removal { --svc-underlay: url('../images/underlay pic desktop/underlay pic 24.webp'); }
.sd-body-inner {
display: grid;
grid-template-columns: 1fr 360px;
gap: 4rem; align-items: start;
}
.sd-main h3 {
font-family: var(--font-h); font-size: 1.5rem;
color: var(--dark); margin-bottom: 1rem;
}
.sd-main p {
font-size: 1rem; color: var(--body-text);
line-height: 1.75; margin-bottom: 1.25rem;
}
.sd-bullet-list {
list-style: none; display: flex; flex-direction: column;
gap: 0.5rem; margin-bottom: 2rem;
}
.sd-bullet-list li {
display: flex; align-items: flex-start; gap: 0.6rem;
font-size: 0.9375rem; color: var(--body-text); line-height: 1.6;
}
.sd-bullet-list li::before {
content: '✓'; color: var(--primary); font-weight: 700; flex-shrink: 0;
}
.sd-next-steps {
display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem;
}
.sd-next-link {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.6rem 1.25rem; border-radius: var(--r-btn);
border: 1.5px solid var(--gray-4); font-size: 0.875rem;
font-weight: 500; color: var(--dark);
transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.sd-next-link:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.sd-next-link i { font-size: 0.7rem; }
/* Gallery strip */
.sd-gallery {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0.875rem; margin-top: 2.5rem;
}
.sd-gallery-item {
border-radius: 0.75rem; overflow: hidden; aspect-ratio: 4/3;
}
.sd-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.4s var(--ease); }
.sd-gallery-item:hover img { transform: scale(1.05); }
/* Sidebar card */
.sd-card {
background: var(--dark); color: var(--white);
border-radius: 1.25rem; padding: 2.25rem;
position: sticky; top: 6rem;
}
.sd-card-title {
font-family: var(--font-h); font-size: 1.375rem;
color: var(--white); margin-bottom: 0.625rem;
}
.sd-card-intro {
font-size: 0.9rem; color: rgba(255,255,255,0.65);
line-height: 1.65; margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sd-card-section-title {
font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--primary); margin-bottom: 1.125rem;
}
.sd-overview-list {
list-style: none; display: flex; flex-direction: column;
gap: 1.125rem; margin-bottom: 2rem;
}
.sd-overview-item {
display: flex; align-items: flex-start; gap: 0.875rem;
font-size: 0.9rem; color: rgba(255,255,255,0.85);
}
.sd-overview-icon {
width: 34px; height: 34px; border-radius: 9px;
background: rgba(176,252,56,0.15); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 0.8rem; margin-top: 0.1em;
}
.sd-overview-label { font-size: 0.68rem; color: rgba(255,255,255,0.45); display: block; margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.07em; }
.sd-overview-value { display: block; line-height: 1.4; }
.sd-card-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 1.75rem 0; }
.sd-card-btn {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
width: 100%; padding: 0.9rem 1.5rem; border-radius: var(--r-btn);
background: #728C69; color: #fff;
border: none; cursor: pointer; text-decoration: none;
font-size: 0.9375rem; font-weight: 500; font-family: var(--font-b);
box-shadow: 0 4px 18px rgba(114,140,105,0.3);
transition: background var(--dur), transform 0.15s;
}
.sd-card-btn:hover { background: #5d7355; transform: translateY(-1px); }
/* Related tabs */
.sd-card-btn + .sd-card-section-title { margin-top: 2rem; }
.sd-card-tabs { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.sd-card-tab {
display: flex; align-items: center; justify-content: space-between;
padding: 0.8rem 1rem; border-radius: 0.75rem;
border: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem;
color: rgba(255,255,255,0.7); transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.sd-card-tab:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--white); }
.sd-card-tab i { font-size: 0.7rem; color: var(--primary); }
/* Related services */
.sd-related { background: var(--white); padding: 5rem 0; }
.sd-related-header {
display: flex; align-items: flex-end;
justify-content: space-between; gap: 2rem;
margin-bottom: 2.5rem;
}
.sd-related-header-text .section-label { display: flex; }
.sd-related-header-text h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 0.5rem; }
.sd-related-header-text p { font-size: 0.9375rem; color: var(--body-text); margin: 0.75rem 0 0; max-width: 420px; line-height: 1.65; }
.sd-related-arrows { display: flex; gap: 0.625rem; flex-shrink: 0; padding-bottom: 0.25rem; }
.sd-arrow {
width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid var(--gray-5); background: var(--white);
display: flex; align-items: center; justify-content: center;
color: var(--dark); font-size: 0.875rem; cursor: pointer; flex-shrink: 0;
transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.sd-arrow:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.sd-arrow:disabled { opacity: 0.3; cursor: default; }
/* Overlay-style cards */
.sd-related-grid {
display: flex;
gap: 1.25rem;
overflow: hidden;
}
.sd-rel-card {
position: relative;
border-radius: 1.25rem;
overflow: hidden;
flex: 0 0 calc(50% - 0.625rem);
aspect-ratio: 4/3;
background: var(--dark);
cursor: pointer;
}
.sd-rel-img-wrap {
position: absolute; inset: 0;
}
.sd-rel-img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.6s var(--ease);
}
.sd-rel-card:hover .sd-rel-img { transform: scale(1.05); }
.sd-rel-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,25,15,0.95) 0%, rgba(10,25,15,0.6) 50%, rgba(10,25,15,0.1) 100%);
transition: opacity var(--dur);
}
.sd-rel-body {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 2rem; z-index: 1;
}
.sd-rel-name {
font-family: var(--font-h); font-size: clamp(1.125rem, 2vw, 1.5rem);
color: var(--white); margin-bottom: 0.5rem; line-height: 1.2;
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.sd-rel-desc { font-size: 0.875rem; color: rgba(255,255,255,0.9); margin-bottom: 1.25rem; line-height: 1.55; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.sd-rel-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.6rem 1.375rem; border-radius: 2rem;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(6px);
font-size: 0.875rem; font-weight: 500; color: var(--white);
transition: background var(--dur), border-color var(--dur);
}
.sd-rel-link:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5); }
.sd-rel-link i { font-size: 0.7rem; }
/* ── New overlay-hero template (TMJ, Hot Stone, Prenatal, Paediatric etc.) ── */
/* Page wrapper */
.sd-wrap { display: flex; flex-direction: column; }
/* Back bar */
.sd-back-bar { padding: 1rem 0; background: var(--white); border-bottom: 1px solid var(--gray-5); }
.sd-back-bar .sd-back {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; color: var(--body-text); font-weight: 500;
transition: color var(--dur);
}
.sd-back-bar .sd-back:hover { color: var(--primary); }
.sd-back-bar .sd-back i { font-size: 0.7rem; }
/* Full-width hero with image + overlay */
.sd-hero-img-wrap {
position: relative; width: 100%; height: 420px; overflow: hidden;
}
.sd-hero-img-wrap .sd-hero-img {
width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.sd-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(10,25,15,0.35) 0%, rgba(10,25,15,0.65) 100%);
}
.sd-hero-content {
padding: 2.5rem 0 3rem;
}
.sd-hero-label {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--primary); margin-bottom: 0.875rem;
}
.sd-hero-title { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; margin-bottom: 1rem; }
.sd-hero-title em { color: var(--primary); font-style: italic; }
.sd-hero-intro { font-size: 1.0625rem; color: var(--body-text); line-height: 1.7; max-width: 640px; margin-bottom: 2rem; }
/* Body sections */
.sd-section { margin-bottom: 2.5rem; }
.sd-section-title {
font-size: clamp(1.25rem, 2.5vw, 1.625rem);
font-family: var(--font-h); color: var(--dark);
margin-bottom: 1rem; padding-bottom: 0.5rem;
border-bottom: 2px solid var(--gray-5);
}
.sd-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.sd-list li {
display: flex; align-items: flex-start; gap: 0.75rem;
font-size: 1rem; color: var(--body-text); line-height: 1.6;
}
.sd-list li i { color: var(--primary); flex-shrink: 0; margin-top: 0.25rem; }
.sd-text { font-size: 1rem; color: var(--body-text); line-height: 1.75; }
/* Gallery grid */
.sd-gallery-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem;
}
.sd-gallery-img {
width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.75rem; display: block;
}
/* Sidebar card inner structure */
.sd-card-inner { display: flex; flex-direction: column; gap: 0; }
.sd-card-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }
.sd-card-list li {
display: flex; flex-direction: column; gap: 0.25rem;
padding: 0.875rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sd-card-list li:first-child { padding-top: 0.5rem; }
.sd-card-label {
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em;
color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 0.4rem;
}
.sd-card-label i { font-size: 0.7rem; }
.sd-card-value { font-size: 0.9375rem; color: var(--white); font-weight: 500; line-height: 1.4; }
.sd-card-enquire {
display: block; text-align: center; margin-top: 0.875rem;
font-size: 0.8125rem; color: rgba(255,255,255,0.45);
transition: color var(--dur);
}
.sd-card-enquire:hover { color: rgba(255,255,255,0.8); }
/* btn-ihb inside sd-card */
.sd-card .btn-ihb { width: 100%; justify-content: center; }
/* Related section — new link-card style */
.sd-related-title {
font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2rem;
}
.sd-related-title em { color: var(--primary); font-style: italic; }
.sd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.sd-related-card {
display: block; border-radius: 1.25rem; overflow: hidden;
background: var(--dark); position: relative; aspect-ratio: 4/3;
transition: transform 0.4s var(--ease);
}
.sd-related-card:hover { transform: translateY(-4px); }
.sd-related-img-wrap { position: absolute; inset: 0; }
.sd-related-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.sd-related-card:hover .sd-related-img { transform: scale(1.05); }
.sd-related-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,25,15,0.95) 0%, rgba(10,25,15,0.5) 55%, rgba(10,25,15,0.1) 100%);
}
.sd-related-body {
position: absolute; bottom: 0; left: 0; right: 0;
z-index: 1; padding: 1.5rem 1.25rem;
display: flex; flex-direction: column; gap: 0.35rem;
}
.sd-related-cat {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--primary); font-weight: 600;
}
.sd-related-name { font-size: 1.125rem; color: var(--white); font-family: var(--font-h); line-height: 1.2; }
.sd-related-link {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.8125rem; color: rgba(255,255,255,0.65);
margin-top: 0.25rem; transition: color var(--dur);
}
.sd-related-card:hover .sd-related-link { color: var(--white); }
/* Responsive */
@media (max-width: 1024px) {
.sd-hero-inner { grid-template-columns: 1fr 380px; }
}
@media (max-width: 860px) {
.sd-hero-inner {
grid-template-columns: 1fr;
grid-template-areas: "img" "content";
gap: 2.5rem;
}
.sd-hero-content { grid-area: content; }
.sd-hero-img-wrap {
grid-area: img;
aspect-ratio: 16/9;
justify-self: stretch;
margin-left: calc(-1 * var(--gap));
margin-right: calc(-1 * var(--gap));
border-radius: var(--r-card);
}
.sd-hero-img-wrap .sd-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.sd-body { padding: 2.5rem 0 2rem; }
.sd-related { padding: 3rem 0 2.5rem; }
.sd-body-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.sd-card { position: static; }
.sd-gallery { grid-template-columns: repeat(2, 1fr); }
.sd-rel-card { flex: 0 0 calc(85vw); }
}
@media (max-width: 540px) {
.sd-gallery { grid-template-columns: 1fr 1fr; }
.sd-body { padding: 2rem 0 1.25rem; }
.sd-related { padding: 2.5rem 0 2rem; }
.sd-related-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.sd-rel-card { aspect-ratio: 3/2; }
.sd-rel-body { padding: 1.25rem; }
.sd-rel-name { font-size: 1.1rem; }
.sd-rel-desc { font-size: 0.8125rem; margin-bottom: 0.875rem; }
}
/* =============================================
LEGAL PAGES (privacy-policy, terms, cookies)
============================================= */
.legal-hero {
position: relative; overflow: hidden;
padding: 7rem 0 4.5rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.legal-hero-title {
font-family: var(--font-h);
font-size: clamp(2.4rem, 5vw, 3.75rem);
color: var(--white);
line-height: 1.15;
margin: 0.5rem 0 1rem;
}
.legal-hero-title em { color: #fff; font-style: italic; }
.legal-hero-sub {
font-size: 0.9rem;
color: rgba(255,255,255,0.8);
font-family: var(--font-b);
}
.legal-body {
background: var(--white);
padding: 5rem 0 6rem;
}
.legal-container {
max-width: 760px;
margin: 0 auto;
padding: 0 2rem;
}
.legal-intro {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--text);
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 3rem;
}
.legal-section {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.legal-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.legal-section h2 {
font-family: var(--font-h);
font-size: 1.375rem;
color: var(--dark);
margin-bottom: 1rem;
line-height: 1.3;
}
.legal-section h3 {
font-family: var(--font-b);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--primary);
margin: 1.75rem 0 0.6rem;
}
.legal-section p {
font-size: 0.9375rem;
line-height: 1.8;
color: var(--text);
margin-bottom: 0.75rem;
}
.legal-section ul {
padding-left: 1.25rem;
margin: 0.5rem 0 1rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.legal-section ul li {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--text);
}
.legal-section a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-section a:hover { opacity: 0.8; }
.legal-contact-block {
margin-top: 1.25rem;
padding: 1.5rem 1.75rem;
background: var(--light, #f5f7f4);
border-radius: 1rem;
border-left: 3px solid var(--primary);
}
.legal-contact-block p {
margin-bottom: 0.35rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text);
}
.legal-contact-block p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.legal-hero { padding: 5.5rem 0 3rem; }
.legal-container { padding: 0 1.25rem; }
.legal-body { padding: 3.5rem 0 4rem; }
}
/* ========================================
MOBILE: disable fixed background attachment
(not supported on iOS/Android)
======================================== */
@media (max-width: 1024px) {
section { background-attachment: scroll !important; }
}
/* ========================================
MOBILE OVERLAY BACKGROUNDS (max-width: 860px)
Portrait pics — spaces URL-encoded, opacity 75%
======================================== */
@media (max-width: 860px) {
/* HOME */
.hwnu-section,
.anim-testimonials {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/mobile%20overlay%20pic/pexels-alinaskazka-27806125.jpg') center / cover;
}
/* ABOUT */
.about-statement-section,
.timeline-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/mobile%20overlay%20pic/pexels-allecgomes-3628770.jpg') center / cover;
}
/* CONTACT */
.cth-section,
.cfaq-section,
.follow-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/mobile%20overlay%20pic/pexels-allecgomes-3628770%20(1).jpg') center / cover;
}
/* PRACTITIONERS LISTING */
.prac-cta-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/mobile%20overlay%20pic/pexels-ameliacui-11983527.jpg') center / cover;
/* Fix for bottom practitioner cards squeezing on mobile */
.tmd-bottom {
/* Forces a 2-column layout */
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px;
}
/* Center the 5th card in this section (the 7th card overall) */
.tmd-bottom .tmd-card:last-child {
grid-column: 1 / -1; /* Spans across both columns */
justify-self: center; /* Centers the card horizontally */
width: calc(50% - 7.5px); /* Keeps it the exact same width as the other cards */
}
/* Adjust the text overlay so it doesn't climb up the image */
.tmd-bottom .tmd-card-overlay {
padding: 15px 10px;
}
.tmd-bottom .tmd-card-overlay h4 {
font-size: 1rem;
margin-bottom: 2px;
}
.tmd-bottom .tmd-card-overlay span {
font-size: 0.8rem;
}
/* Hide the paragraph and CTA button on small cards to save space */
.tmd-bottom .tmd-card-overlay p,
.tmd-bottom .tmd-card-overlay .tmd-card-cta {
display: none;
}
}
/* SERVICE PAGES */
.svc-botox { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-bharati-mahli-7865119-6483393.jpg'); }
.svc-dermal-fillers { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-cheeseburger-36452123.jpg'); }
.svc-lab-testing { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-chetanvlad-5457362.jpg'); }
.svc-naturopathic-care { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-clickout-pixel-1048032-12847431.jpg'); }
.svc-osteopathy { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-didsss-13214230.jpg'); }
.svc-weight-loss { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-felipealves-9297361.jpg'); }
.svc-pediatric-care { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-igor-milicevic-1095449-8069526.jpg'); }
.svc-iv-therapy { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-karola-g-5978610.jpg'); }
.svc-fatigue-treatment { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-lawlesscapture-17218114.jpg'); }
.svc-massage-therapy { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-leon-e-2160053836-36653171.jpg'); }
.svc-fertility-program { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-maahidphotos-8058776.jpg'); }
.svc-acupuncture-cupping { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-magda-ehlers-pexels-9890362.jpg'); }
.svc-vitamin-injections { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-minan1398-1599969.jpg'); }
/* Acupuncture & TCM — mobile */
.svc-acupuncture-traditional,
.svc-acupuncture-korean,
.svc-acupuncture-childrens,
.svc-acupuncture-scalp-electro,
.svc-acupuncture-tui-na,
.svc-acupuncture-cosmetic,
.svc-acupuncture-tcm { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-minan1398-1650032.jpg'); }
/* Clinical Esthetics — mobile */
.svc-clinical-esthetics,
.svc-facial-acne,
.svc-facial-anti-aging,
.svc-facial-dermaplaning,
.svc-facial-european,
.svc-facial-extraction,
.svc-facial-green-peel,
.svc-facial-relaxation,
.svc-microdermabrasion,
.svc-derma-needling,
.svc-exosome-needling,
.svc-exo-hair,
.svc-skin-tag-removal { --svc-underlay: url('../images/mobile%20overlay%20pic/pexels-vickievj-5092641.jpg'); }
/* Also override sd-body opacity for service pages on mobile */
.svc-botox .sd-body, .svc-dermal-fillers .sd-body, .svc-lab-testing .sd-body,
.svc-naturopathic-care .sd-body, .svc-osteopathy .sd-body, .svc-weight-loss .sd-body,
.svc-pediatric-care .sd-body, .svc-iv-therapy .sd-body, .svc-fatigue-treatment .sd-body,
.svc-massage-therapy .sd-body, .svc-fertility-program .sd-body,
.svc-acupuncture-cupping .sd-body, .svc-vitamin-injections .sd-body,
.svc-acupuncture-traditional .sd-body, .svc-acupuncture-korean .sd-body,
.svc-acupuncture-childrens .sd-body, .svc-acupuncture-scalp-electro .sd-body,
.svc-acupuncture-tui-na .sd-body, .svc-acupuncture-cosmetic .sd-body,
.svc-acupuncture-tcm .sd-body,
.svc-clinical-esthetics .sd-body, .svc-facial-acne .sd-body,
.svc-facial-anti-aging .sd-body, .svc-facial-dermaplaning .sd-body,
.svc-facial-european .sd-body, .svc-facial-extraction .sd-body,
.svc-facial-green-peel .sd-body, .svc-facial-relaxation .sd-body,
.svc-microdermabrasion .sd-body, .svc-derma-needling .sd-body,
.svc-exosome-needling .sd-body, .svc-exo-hair .sd-body,
.svc-skin-tag-removal .sd-body {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
var(--svc-underlay) center / cover;
}
/* PRACTITIONER PROFILES */
.dr-jill-nazar { --dr-underlay: url('../images/mobile%20overlay%20pic/pexels-minan1398-1650032.jpg'); }
.dr-susan-mankaeeva { --dr-underlay: url('../images/mobile%20overlay%20pic/pexels-mirza-farhan-140378-12951726.jpg'); }
.dr-viktoriia-taylor { --dr-underlay: url('../images/mobile%20overlay%20pic/pexels-photosbyanas-17672394.jpg'); }
.vialeta-bhharvani { --dr-underlay: url('../images/mobile%20overlay%20pic/pexels-plantpool-images-2222972-4039949.jpg'); }
/* Also override pd sections opacity */
.dr-jill-nazar .pd-detail-section, .dr-jill-nazar .pd-services-section,
.dr-susan-mankaeeva .pd-detail-section, .dr-susan-mankaeeva .pd-services-section,
.dr-viktoriia-taylor .pd-detail-section, .dr-viktoriia-taylor .pd-services-section,
.vialeta-bhharvani .pd-detail-section, .vialeta-bhharvani .pd-services-section {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
var(--dr-underlay) center / cover;
}
/* BOOK APPOINTMENT */
.section--book-green {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/mobile%20overlay%20pic/pexels-sedanur-kunuk-78972032-31594864.jpg') center / cover;
}
/* CAREERS */
.careers-why {
background:
linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/mobile%20overlay%20pic/pexels-sonny-29059167.jpg') center / cover;
}
}
/* ========================================
MOBILE: static background (no animation)
iOS/Android can't do background-attachment:fixed
======================================== */
@media (max-width: 860px) {
.hwnu-section, .anim-testimonials,
.about-statement-section, .timeline-section,
.cth-section, .cfaq-section, .follow-section,
.prac-cta-section, .section--book-green, .careers-why,
.svc-botox .sd-body, .svc-dermal-fillers .sd-body,
.svc-lab-testing .sd-body, .svc-naturopathic-care .sd-body,
.svc-osteopathy .sd-body, .svc-weight-loss .sd-body,
.svc-pediatric-care .sd-body, .svc-iv-therapy .sd-body,
.svc-fatigue-treatment .sd-body, .svc-massage-therapy .sd-body,
.svc-fertility-program .sd-body, .svc-acupuncture-cupping .sd-body,
.svc-vitamin-injections .sd-body,
.dr-jill-nazar .pd-detail-section, .dr-jill-nazar .pd-services-section,
.dr-susan-mankaeeva .pd-detail-section, .dr-susan-mankaeeva .pd-services-section,
.dr-viktoriia-taylor .pd-detail-section, .dr-viktoriia-taylor .pd-services-section,
.vialeta-bhharvani .pd-detail-section, .vialeta-bhharvani .pd-services-section {
animation: none;
background-position: center center;
background-size: cover;
}
}
/* ========================================
SERVICES — THEME CARDS (hub page)
======================================== */
.svc-theme-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--gray-5);
border-left: 1px solid var(--gray-5);
}
.svc-theme-card {
position: relative;
border-right: 1px solid var(--gray-5);
border-bottom: 1px solid var(--gray-5);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 500px;
}
.svc-theme-card--wide { grid-column: 1 / -1; min-height: 380px; }
.svc-theme-card-bg-img {
position: absolute;
inset: 0; width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.svc-theme-card:hover .svc-theme-card-bg-img { transform: scale(1.05); }
.svc-theme-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,25,15,0.88) 0%, rgba(10,25,15,0.45) 55%, rgba(10,25,15,0.18) 100%);
}
.svc-theme-card-body {
position: relative; z-index: 2;
margin-top: auto; padding: 2.5rem;
display: flex; flex-direction: column; gap: 0.75rem;
}
.svc-theme-card-prac {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-b); font-size: 0.725rem; font-weight: 500;
letter-spacing: 0.09em; text-transform: uppercase;
color: #a8c99e; background: rgba(255,255,255,0.08);
backdrop-filter: blur(6px); border: 1px solid rgba(168,201,158,0.35);
border-radius: 100px; padding: 0.3rem 0.875rem; width: fit-content;
}
.svc-theme-card-title {
font-family: var(--font-h); font-weight: 400; color: var(--white);
font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.15; margin: 0;
}
.svc-theme-card-title em { font-style: italic; }
.svc-theme-card-desc {
font-family: var(--font-b); font-size: 0.9375rem;
color: rgba(255,255,255,0.75); line-height: 1.65; max-width: 500px; margin: 0;
}
.svc-theme-card-actions {
display: flex; align-items: center; gap: 1.5rem;
flex-wrap: wrap; margin-top: 0.5rem;
}
.svc-theme-card-link {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-b); font-size: 0.875rem; font-weight: 600;
color: var(--white); text-decoration: none; transition: gap 0.2s;
}
.svc-theme-card-link:hover { gap: 0.75rem; }
.svc-theme-card-price {
font-family: var(--font-b); font-size: 0.8125rem;
color: rgba(255,255,255,0.5);
}
@media (max-width: 760px) {
.svc-theme-grid { grid-template-columns: 1fr; }
.svc-theme-card { min-height: 380px; }
.svc-theme-card--wide { min-height: 320px; }
.svc-theme-card-body { padding: 1.75rem; }
}
/* ========================================
PRICING PAGE
======================================== */
.pricing-hero {
background: linear-gradient(rgba(10,25,15,0.82), rgba(10,25,15,0.82)),
url('../images/background%204K.png') center / cover no-repeat;
padding: 8rem 0 6rem; text-align: center;
}
.pricing-hero h1 { color: var(--white); font-size: clamp(2.5rem,5vw,4rem); margin-bottom: 1rem; }
.pricing-hero p { color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 580px; margin: 0 auto; }
.pricing-subnav {
position: sticky; top: 72px; z-index: 50;
background: var(--white); border-bottom: 1px solid var(--gray-5);
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pricing-subnav::-webkit-scrollbar { display: none; }
.pricing-subnav-inner {
display: flex; gap: 0; padding: 0 var(--gap);
max-width: var(--max-w); margin: 0 auto; min-width: max-content;
}
.pricing-subnav-link {
display: block; padding: 1rem 1.375rem;
font-family: var(--font-b); font-size: 0.875rem; font-weight: 500;
color: var(--body-text); text-decoration: none;
border-bottom: 2px solid transparent; white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
}
.pricing-subnav-link:hover { color: var(--dark); border-bottom-color: var(--gray-4); }
.pricing-subnav-link.active { color: var(--dark); border-bottom-color: var(--primary); }
.pricing-section { padding: 5rem 0; border-bottom: 1px solid var(--gray-5); }
.pricing-section:last-of-type { border-bottom: none; }
.pricing-section-hd {
display: flex; align-items: flex-end;
justify-content: space-between; gap: 2rem;
margin-bottom: 2.5rem; flex-wrap: wrap;
}
.pricing-section-hd h2 {
font-size: clamp(1.625rem, 2.5vw, 2.25rem); margin: 0 0 0.375rem; line-height: 1.15;
}
.pricing-section-hd h2 em { color: var(--primary); font-style: italic; }
.pricing-prac-badge {
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--font-b); font-size: 0.8rem; font-weight: 500;
color: var(--primary); background: var(--gray-6);
border: 1px solid var(--gray-5); border-radius: 100px;
padding: 0.4rem 1.1rem; flex-shrink: 0;
}
/* Cat-page pricing section background */
#pricing {
background: linear-gradient(180deg, var(--gray-6) 0%, var(--white) 55%);
position: relative;
overflow: hidden;
}
#pricing::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(ellipse at top right, rgba(114,140,105,0.10) 0%, transparent 68%);
pointer-events: none;
}
#pricing .svc-section-header {
border-bottom: 1px solid var(--gray-4);
}
#pricing .svc-section-header h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
/* Pricing table wrap */
.price-table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--gray-4);
border-radius: var(--r-card);
background: var(--white);
box-shadow: 0 4px 28px rgba(30,53,40,0.07), 0 1px 4px rgba(30,53,40,0.04);
}
/* Table */
.price-table {
width: 100%; border-collapse: collapse;
font-family: var(--font-b); font-size: 0.9375rem;
}
/* Header */
.price-table thead {
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
}
.price-table thead th {
padding: 1.125rem 1.5rem; text-align: left;
font-size: 0.68rem; font-weight: 600;
letter-spacing: 0.11em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.price-table thead th:first-child { color: rgba(255,255,255,0.85); }
/* Rows */
.price-table tbody tr {
border-bottom: 1px solid var(--gray-4);
transition: background 0.18s;
}
.price-table tbody tr:last-child { border-bottom: none; }
.price-table tbody tr:nth-child(even) { background: #f7faf7; }
.price-table tbody tr:hover { background: var(--gray-6); }
/* Cells */
.price-table td {
padding: 1.125rem 1.5rem; color: var(--body-text); vertical-align: middle;
}
.price-table td:first-child { color: var(--dark); font-weight: 500; }
/* Duration — subtle pill */
.price-table .td-dur {
font-size: 0.8rem; font-weight: 500; white-space: nowrap;
color: var(--primary);
}
/* Price — brand accent, larger */
.price-table .td-price {
font-weight: 700; font-size: 1.05rem;
color: var(--primary); white-space: nowrap;
}
.price-table .td-consult { font-style: italic; color: var(--body-text); font-size: 0.875rem; }
/* Book button — filled sage */
.price-table .td-book { text-align: right; }
.price-table .td-book a {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.45rem 1.125rem; font-size: 0.8rem; font-weight: 600;
color: var(--white);
background: var(--primary);
border: 1.5px solid var(--primary);
border-radius: 100px; text-decoration: none; white-space: nowrap;
transition: background 0.2s, border-color 0.2s;
}
.price-table .td-book a:hover {
background: var(--dark); border-color: var(--dark);
}
.pricing-disclaimer {
background: var(--gray-6); border: 1px solid var(--gray-5);
border-radius: var(--r-card); padding: 1.5rem 2rem;
display: flex; align-items: flex-start; gap: 1rem; margin-top: 4rem;
}
.pricing-disclaimer-icon { font-size: 1.25rem; color: var(--primary); flex-shrink: 0; margin-top: 0.1rem; }
.pricing-disclaimer p { font-size: 0.9375rem; color: var(--body-text); line-height: 1.6; margin: 0; }
.pricing-disclaimer a { color: var(--primary); font-weight: 500; }
/* clinical esthetics service page */
.svc-clinical-esthetics .sd-body {
background: linear-gradient(rgba(234,242,234,0.90), rgba(234,242,234,0.90)),
url('../images/underlay%20pic%20desktop/underlay%20pic%2024.webp') center / cover scroll;
}
@media (max-width: 768px) {
.pricing-subnav { top: 62px; }
.pricing-section { padding: 3.5rem 0; }
.pricing-section-hd { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
.price-table thead th, .price-table td { padding: 0.875rem 1rem; font-size: 0.875rem; }
.pricing-disclaimer { flex-direction: column; }
}
/* ========================================
SERVICES HUB — 2-col grid with cover images
======================================== */
.svc-grid--hub { grid-template-columns: repeat(2, 1fr); }
.svc-grid--hub .svc-cell--hub:last-child { grid-column: 1 / -1; }
.svc-cell--hub .svc-cell-img {
height: 240px; padding: 0; overflow: hidden;
}
.svc-cell--hub .svc-cell-img img {
width: 100%; height: 100%; max-height: none; object-fit: cover;
}
.svc-cell-prac {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-b); font-size: 0.8125rem; font-weight: 500;
color: var(--primary); letter-spacing: 0.02em; margin-bottom: 0.625rem;
}
@media (max-width: 768px) {
.svc-grid--hub { grid-template-columns: 1fr; }
.svc-grid--hub .svc-cell--hub:last-child { grid-column: unset; }
.svc-cell--hub .svc-cell-img { height: 200px; }
}
/* ========================================
CAT PAGE — MOBILE
======================================== */
/* Cat-hero video background */
.cat-hero {
position: relative;
overflow: hidden;
}
.cat-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.35;
}
.cat-hero .container {
position: relative;
z-index: 1;
}
/* Hero */
@media (max-width: 768px) {
.cat-hero { padding: 3.5rem 0 2.75rem !important; }
.cat-hero h1 { font-size: clamp(2rem, 7vw, 3rem); }
.cat-hero p { font-size: 0.9375rem; }
.cat-hero .svc-cell-prac { font-size: 0.8125rem; }
}
/* Pricing section */
@media (max-width: 768px) {
#pricing { padding: 2.5rem 0 4rem !important; }
#pricing .svc-section-header { margin-bottom: 1.75rem !important; }
#pricing .svc-section-header h2 { font-size: 1.625rem; }
.section-tag { font-size: 0.65rem; }
.price-table-wrap { border-radius: 0.75rem; }
.price-table thead th,
.price-table td { padding: 0.875rem 0.875rem; font-size: 0.8125rem; }
.price-table td:first-child { font-size: 0.875rem; }
.price-table .td-price { font-size: 0.9375rem; }
}
/* Hide Duration column on very small phones to avoid table overflow */
@media (max-width: 420px) {
.price-table th:nth-child(2),
.price-table td:nth-child(2) { display: none; }
}
/* ========================================
PRICING PAGE v2 — TAB LAYOUT
======================================== */
/* Hero */
.ptab-hero {
padding: 5rem 0 3.5rem;
background: var(--gray-6);
}
/* Tab section background */
.ptab-section {
background: var(--gray-6);
padding: 0 0 5rem;
}
/* Tab nav — dark pill bar */
.ptab-nav {
display: flex;
gap: 0.25rem;
background: var(--dark);
border-radius: 100px;
padding: 0.375rem;
margin-bottom: 2rem;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.ptab-nav::-webkit-scrollbar { display: none; }
.ptab-btn {
flex-shrink: 0;
padding: 0.625rem 1.25rem;
border-radius: 100px;
border: none;
background: none;
color: rgba(255,255,255,0.6);
font-family: var(--font-b);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.ptab-btn:hover { color: rgba(255,255,255,0.9); }
.ptab-btn.active {
background: var(--white);
color: var(--dark);
}
/* Tab panel */
.ptab-panel { display: none; }
.ptab-panel.active { display: block; }
.ptab-card {
background: var(--white);
border-radius: var(--r-card);
overflow: hidden;
box-shadow: 0 4px 32px rgba(30,53,40,0.07), 0 1px 4px rgba(30,53,40,0.04);
}
/* Panel header with practitioner badge */
.ptab-panel-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.75rem 2rem;
border-bottom: 1px solid var(--gray-4);
}
.ptab-panel-hd h2 {
font-size: 1.25rem;
margin: 0;
color: var(--dark);
}
.ptab-panel-hd h2 em { color: var(--primary); font-style: italic; }
.ptab-badge {
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
color: var(--body-text);
white-space: nowrap;
flex-shrink: 0;
}
/* Service grid — 2 columns */
.ptab-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.ptab-item {
padding: 1.125rem 2rem;
border-bottom: 1px solid var(--gray-4);
}
.ptab-item:nth-child(odd) { border-right: 1px solid var(--gray-4); }
.ptab-item:nth-last-child(1):nth-child(odd),
.ptab-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.ptab-item:nth-last-child(1) { border-bottom: none; }
.ptab-item:nth-last-child(2):nth-child(even) { border-bottom: none; }
.ptab-item-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.ptab-item-name {
font-weight: 500;
color: var(--dark);
font-size: 0.9375rem;
line-height: 1.3;
}
.ptab-item-price {
font-weight: 700;
color: var(--primary);
font-size: 0.9375rem;
white-space: nowrap;
flex-shrink: 0;
}
.ptab-item-price.consult {
font-weight: 400;
font-style: italic;
color: var(--body-text);
font-size: 0.8125rem;
}
.ptab-item-dur {
font-size: 0.8rem;
color: var(--body-text);
margin-top: 0.25rem;
}
/* Note below grid (for aesthetics consultation note) */
.ptab-note {
padding: 1rem 2rem;
border-top: 1px solid var(--gray-4);
font-size: 0.875rem;
color: var(--body-text);
font-style: italic;
}
/* CTA */
.ptab-cta {
display: flex;
justify-content: center;
padding: 2.5rem 2rem;
border-top: 1px solid var(--gray-4);
}
/* Mobile */
@media (max-width: 640px) {
.ptab-hero { padding: 3.5rem 0 2.5rem; }
.ptab-panel-hd { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1.25rem; }
.ptab-grid { grid-template-columns: 1fr; }
.ptab-item { border-right: none !important; }
.ptab-item:nth-last-child(2) { border-bottom: 1px solid var(--gray-4) !important; }
.ptab-item { padding: 1rem 1.25rem; }
.ptab-note { padding: 1rem 1.25rem; }
.ptab-cta { padding: 2rem 1.25rem; }
.ptab-btn { font-size: 0.8rem; padding: 0.5rem 1rem; }
}