/* ═══════════════════════════════════════════════════
MAWI MEDICAL CENTER — style.css
═══════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--black: #0E0D0C;
--white: #FFFFFF;
--green: #4d8a0f;
--green-dark: #3a6b0a;
--offblack: #efefef;
--charcoal: #E6DFD6;
--ink: #D4CCC1;
--warm-grey: #5A5550;
--stone: #7A7068;
--parchment: #2C2A27;
--ivory: #1A1816;
--yellow: #e8f9aa;
--green-dim: rgba(77,138,15,0.10);
--serif: 'Libre Baskerville', Georgia, serif;
--sans: 'Jost', sans-serif;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--white);
color: var(--ivory);
font-family: var(--sans);
font-weight: 300;
line-height: 1.7;
overflow-x: hidden;
}
/* ═══════════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════════ */
nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 200;
padding: 20px 60px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.6s var(--ease), padding 0.5s var(--ease);
}
nav.scrolled {
background: rgba(26,24,22,0.97);
backdrop-filter: blur(18px);
padding: 14px 60px;
border-bottom: 1px solid rgba(26,24,22,0.10);
}
.nav-logo img {
height: 52px; width: auto; display: block;
transition: opacity 0.3s;
}
.nav-logo img:hover { opacity: 0.8; }
.nav-links {
display: flex; gap: 44px; list-style: none;
}
.nav-links a {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
text-decoration: none;
position: relative;
transition: color 0.3s;
}
.nav-links a::after {
content: '';
position: absolute; bottom: -4px; left: 0;
width: 0; height: 1px;
background: var(--green);
transition: width 0.35s var(--ease);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { width: 100%; }
.nav-appointment {
font-family: var(--sans);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--white);
background: var(--green-dark);
border: none;
padding: 11px 26px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background 0.4s var(--ease);
}
.nav-appointment:hover { background: var(--green); }
/* Burger */
.nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
z-index: 210;
}
.nav-burger span {
display: block; width: 26px; height: 1px;
background: var(--ivory);
transition: transform 0.3s, opacity 0.3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Mobile overlay */
.nav-mobile {
display: none;
position: fixed; inset: 0;
background: rgba(26,24,22,0.99);
z-index: 190;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 36px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.nav-mobile.open { display: flex; opacity: 1; pointer-events: all; }
.nav-mobile a {
font-family: var(--serif);
font-size: 2.4rem;
font-weight: 300;
color: var(--ivory);
text-decoration: none;
letter-spacing: 0.04em;
transition: color 0.3s;
}
.nav-mobile a:hover { color: var(--green); }
.nav-mobile .nav-mobile-cta {
font-family: var(--sans);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white);
background: var(--green-dark);
padding: 13px 36px;
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════
NAV DROPDOWN — desktop only
═══════════════════════════════════════════════════ */
.nav-links li.has-dropdown { position: relative; }
/* Invisible hover bridge fills the gap between link and panel */
.nav-links li.has-dropdown::before {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
width: 220px; height: 22px;
z-index: 299;
pointer-events: auto;
}
.nav-dropdown {
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: rgba(255,255,255,0.97);
backdrop-filter: blur(20px);
border: 1px solid rgba(26,24,22,0.09);
border-top: 2px solid var(--green);
min-width: 200px;
padding: 10px 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
z-index: 300;
list-style: none;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
display: block;
padding: 10px 22px;
font-family: var(--sans);
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,24,22,0.58);
text-decoration: none;
transition: color 0.22s, background 0.22s;
white-space: nowrap;
}
.nav-dropdown li a::after { display: none !important; }
.nav-dropdown li a:hover {
color: var(--green);
background: rgba(137,199,58,0.06);
}
/* ═══════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════ */
#hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 60px 80px;
position: relative;
overflow: hidden;
background: var(--black);
}
.hero-image {
position: absolute; inset: 0;
background-size: cover;
background-position: center 20%;
opacity: 0;
animation: heroReveal 2.2s 0.3s var(--ease) forwards;
}
.hero-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom,
rgba(0,0,0,0.08) 0%,
rgba(0,0,0,0.05) 35%,
rgba(0,0,0,0.20) 70%,
rgba(0,0,0,0.40) 100%
);
}
.hero-rule {
position: absolute; top: 0; left: 60px;
width: 1px; height: 0;
background: rgba(26,24,22,0.15);
animation: growDown 1.8s 0.6s var(--ease) forwards;
}
.hero-location {
position: absolute; top: 120px; right: 60px;
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.32em; text-transform: uppercase;
color: rgba(26,24,22,0.35);
writing-mode: vertical-rl;
opacity: 0; animation: fadeIn 1s 2s forwards;
}
.hero-content { position: relative; z-index: 2; }
.hero-kicker {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.38em; text-transform: uppercase;
color: var(--green-dark); margin-bottom: 28px;
opacity: 0; animation: fadeUp 0.9s 1.1s var(--ease) forwards;
}
.hero-headline {
font-family: var(--serif);
font-size: clamp(2.6rem, 6.8vw, 8rem);
font-weight: 300; line-height: 0.95;
letter-spacing: -0.02em; color: var(--ivory);
opacity: 0; animation: fadeUp 1.1s 1.3s var(--ease) forwards;
}
.hero-headline .line2 { padding-left: 0vw; display: block; font-style: italic; color: var(--yellow); }
.hero-headline .line3 { display: block; color: var(--ivory); }
.hero-footer {
margin-top: 56px;
display: flex; align-items: flex-end; justify-content: space-between;
opacity: 0; animation: fadeUp 0.9s 1.9s var(--ease) forwards;
}
.hero-descriptor {
max-width: 320px; font-size: 1rem;
color: rgba(26,24,22,0.45); line-height: 1.9; letter-spacing: 0.02em;
}
.hero-cta-group { display: flex; align-items: center; gap: 36px; }
.hero-cta-primary {
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--black); background: var(--ivory);
padding: 15px 38px; text-decoration: none; display: inline-block;
transition: background 0.4s var(--ease), color 0.4s;
}
.hero-cta-primary:hover { background: var(--green-dark); color: var(--white); }
.hero-cta-ghost {
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(26,24,22,0.4); text-decoration: none; transition: color 0.3s;
}
.hero-cta-ghost:hover { color: var(--ivory); }
.hero-scroll {
position: absolute; bottom: 20px; left: 60px;
display: flex; align-items: center; gap: 16px;
opacity: 0; animation: fadeIn 1s 2.4s forwards;
}
.hero-scroll-label {
font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
color: rgba(26,24,22,0.22);
writing-mode: vertical-rl; transform: rotate(180deg); padding-bottom: 80px;
}
.hero-scroll-line {
width: 1px; height: 80px; background: rgba(26,24,22,0.12);
position: absolute; bottom: 0; left: 0; overflow: hidden;
}
.hero-scroll-line::after {
content: ''; position: absolute; top: -100%; left: 0;
width: 100%; height: 100%; background: var(--green-dark);
animation: scanDown 2.5s 2.5s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════
SERVICES — 6 PREMIUM CARDS (section 2)
═══════════════════════════════════════════════════ */
#services {
background: var(--black);
padding: 160px 60px;
border-top: 1px solid rgba(26,24,22,0.07);
}
.services-header {
max-width: 1300px; margin: 0 auto 80px;
display: flex; justify-content: space-between; align-items: flex-end;
}
.services-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color: var(--green); margin-bottom: 24px;
}
.services-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 4rem);
font-weight: 300; line-height: 1.05; color: var(--ivory);
}
.services-headline em { font-style: italic; color: var(--green); }
.services-note {
max-width: 260px; font-size: 1rem;
color: rgba(26,24,22,0.35); line-height: 1.85;
text-align: right; padding-bottom: 8px;
}
/* 3×2 grid */
.services-grid {
max-width: 1300px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
/* Card is now an tag */
.service-card {
position: relative; overflow: hidden;
aspect-ratio: 4/5;
background: var(--charcoal);
display: block; /* needs block */
text-decoration: none; /* remove link underline */
cursor: pointer;
}
.service-card-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
transition: transform 0.9s var(--ease), filter 0.6s;
filter: brightness(0.75) saturate(0.85);
}
.service-card:hover .service-card-img {
transform: scale(1.07);
filter: brightness(0.60) saturate(0.9);
}
.service-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom,
transparent 30%,
rgba(0,0,0,0.4) 60%,
rgba(0,0,0,0.88) 100%
);
transition: background 0.5s var(--ease);
}
.service-card:hover .service-card-overlay {
background: linear-gradient(to bottom,
rgba(77,138,15,0.12) 0%,
rgba(0,0,0,0.25) 50%,
rgba(0,0,0,0.50) 100%
);
}
.service-card-body {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 24px 28px 28px; z-index: 2;
transition: transform 0.5s var(--ease);
}
.service-card:hover .service-card-body { transform: translateY(-8px); }
.service-card-icon {
font-size: 28px; margin-bottom: 10px;
opacity: 0.65; color: var(--white);
transition: opacity 0.4s, transform 0.4s var(--ease);
display: block; line-height: 1;
}
.service-card:hover .service-card-icon { opacity: 1; transform: scale(1.1); }
.service-card-name {
font-family: var(--serif);
font-size: clamp(1.3rem, 1.8vw, 1.65rem);
font-weight: 300; color: var(--white);
line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.01em;
transition: color 0.35s;
}
.service-card:hover .service-card-name { color: var(--green); }
.service-card-desc {
font-size: 0.9rem; color: rgba(255,255,255,0.8);
line-height: 1.75; max-width: 280px;
height: 0; overflow: hidden; opacity: 0;
transition: height 0.5s var(--ease), opacity 0.45s var(--ease);
}
.service-card:hover .service-card-desc { height: 70px; opacity: 1; }
.service-card-arrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--sans); font-size: 0.58rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--green); margin-top: 18px;
opacity: 0; transform: translateX(-12px);
transition: opacity 0.4s 0.1s var(--ease), transform 0.4s 0.1s var(--ease);
}
.service-card-arrow::after { content: '→'; font-family: serif; font-size: 1rem; }
.service-card:hover .service-card-arrow { opacity: 1; transform: translateX(0); }
/* border glow */
.service-card::after {
content: ''; position: absolute; inset: 0;
border: 1px solid transparent;
transition: border-color 0.4s; pointer-events: none; z-index: 3;
}
.service-card:hover::after { border-color: rgba(137,199,58,0.3); }
/* ═══════════════════════════════════════════════════
ABOUT (section 3)
═══════════════════════════════════════════════════ */
#about {
background: var(--offblack);
padding: 180px 60px;
position: relative; overflow: hidden;
border-top: 1px solid rgba(26,24,22,0.05);
}
.about-word {
position: absolute; top: 50%; left: -0.04em;
transform: translateY(-50%);
font-family: var(--serif); font-size: 30vw;
font-weight: 300; font-style: italic;
color: rgba(26,24,22,0.022);
pointer-events: none; user-select: none;
letter-spacing: -0.04em; line-height: 1; white-space: nowrap;
}
.about-inner {
max-width: 1300px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 120px;
align-items: center; position: relative; z-index: 1;
}
.about-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color:var(--green); margin-bottom: 40px;
}
.about-statement {
font-family: var(--serif);
font-size: clamp(1.6rem, 2.8vw, 3.2rem);
font-weight: 300; line-height: 1.2; color: var(--ivory);
}
.about-statement em { font-style: italic; color: var(--green); opacity: 0.65; }
.about-subheading {
font-family: var(--serif);
font-size: clamp(1rem, 1.4vw, 1.25rem);
font-weight: 300;
font-style: normal;
color: rgba(26,24,22,0.48);
line-height: 1.6;
margin-top: 28px;
max-width: 440px;
}
.about-subheading em { font-style: italic; color: var(--green); opacity: 0.75; }
.about-body {
font-size: 1rem; color: var(--warm-grey); line-height: 2;
margin-top: 36px; max-width: 480px;
}
.about-rule { width: 40px; height: 1px; background: var(--green-dark); margin: 48px 0; opacity: 0.6; }
.about-body2 {
font-size: 1rem; color: rgba(26,24,22,0.32); line-height: 2; max-width: 480px;
}
.about-link {
display: inline-block; margin-top: 40px;
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--green); text-decoration: none;
transition: letter-spacing 0.3s, opacity 0.3s;
opacity: 0.8;
}
.about-link:hover { letter-spacing: 0.3em; opacity: 1; }
.about-credentials {
max-width: 1300px; margin: 120px auto 0;
padding-top: 60px;
border-top: 1px solid rgba(26,24,22,0.06);
display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px;
position: relative; z-index: 1;
}
.cred-item {}
.cred-num {
font-family: var(--serif); font-size: 3.5rem;
font-weight: 300; color: var(--ivory);
line-height: 1; margin-bottom: 12px; letter-spacing: -0.02em;
}
.cred-num span { color: var(--green-dark); font-size: 2rem; }
.cred-desc {
font-family: var(--sans); font-size: 0.7rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(26,24,22,0.3); line-height: 1.6;
}
/* ═══════════════════════════════════════════════════
OUR DOCTORS — SLIDER (section 4)
═══════════════════════════════════════════════════ */
#doctors {
background: var(--white);
padding: 160px 0 160px 120px;
border-top: 1px solid rgba(26,24,22,0.05);
overflow: hidden;
}
.doctors-header {
max-width: 1300px; padding-right: 0px;
margin-bottom: 72px;
display: flex; justify-content: space-between; align-items: flex-end;
}
.doctors-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color:var(--green); margin-bottom: 24px;
}
.doctors-headline {
font-family: var(--serif);
font-size: clamp(2rem, 3.2vw, 3.8rem);
font-weight: 300; line-height: 1.05; color: var(--ivory);
}
.doctors-headline em { font-style: italic; color: var(--green); }
.doctors-controls { display: flex; align-items: center; gap: 16px; padding-bottom: 10px; }
.doc-btn {
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid rgba(26,24,22,0.15);
background: transparent; color: rgba(26,24,22,0.55);
font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.doc-btn:hover { border-color: var(--green); color: var(--green); background: rgba(137,199,58,0.06); }
.doc-counter {
font-family: var(--serif); font-size: 1rem;
color: rgba(26,24,22,0.25); letter-spacing: 0.12em;
min-width: 52px; text-align: center;
}
.doctors-track-wrap { overflow: hidden; }
.doctors-track {
display: flex; gap: 24px;
transition: transform 0.7s var(--ease);
will-change: transform;
}
/* Each card is now an tag */
.doctor-card {
flex: 0 0 calc(25% - 18px); min-width: 280px;
position: relative;
text-decoration: none;
display: block;
cursor: pointer;
}
.doctor-card-img-wrap {
width: 100%; aspect-ratio: 3/4;
overflow: hidden; position: relative;
background: var(--charcoal); margin-bottom: 24px;
}
.doctor-card-img-wrap img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
filter: grayscale(20%) contrast(1.05);
transition: transform 0.9s var(--ease), filter 0.6s;
}
.doctor-card:hover .doctor-card-img-wrap img {
transform: scale(1.04); filter: grayscale(0%) contrast(1.0);
}
.doctor-card-img-wrap::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
background: var(--green); transform: scaleX(0); transform-origin: left;
transition: transform 0.5s var(--ease);
}
.doctor-card:hover .doctor-card-img-wrap::after { transform: scaleX(1); }
.doctor-card-name {
font-family: var(--serif); font-size: 1.5rem;
font-weight: 300; color: var(--ivory); margin-bottom: 6px;
transition: color 0.3s;
}
.doctor-card:hover .doctor-card-name { color: var(--green); }
.doctor-card-role {
font-family: var(--sans); font-size: 1rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(26,24,22,0.35); margin-bottom: 16px;
}
.doctor-card-link {
font-family: var(--sans); font-size: 0.58rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(26,24,22,0.28);
display: inline-flex; align-items: center; gap: 8px;
transition: color 0.3s;
}
.doctor-card-link::after { content: '→'; }
.doctor-card:hover .doctor-card-link { color: var(--green); }
/* Dots */
.doctors-dots { display: flex; gap: 10px; margin-top: 52px; padding-right: 60px; }
.doc-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(26,24,22,0.18); border: none;
cursor: pointer; transition: background 0.3s, transform 0.3s; padding: 0;
}
.doc-dot.active { background: var(--green); transform: scale(1.4); }
/* ═══════════════════════════════════════════════════
TESTIMONIALS — dark theme (section 5)
═══════════════════════════════════════════════════ */
#testimonials {
background: var(--white);
padding: 160px 60px;
position: relative; overflow: hidden;
border-top: 1px solid rgba(26,24,22,0.05);
}
.testi-bg-word {
position: absolute; bottom: -0.1em; right: -0.05em;
font-family: var(--serif); font-size: 28vw;
font-weight: 300; font-style: italic;
color: rgba(26,24,22,0.018);
pointer-events: none; user-select: none;
letter-spacing: -0.04em; line-height: 1; white-space: nowrap;
}
.testi-inner {
max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
}
.testi-header { margin-bottom: 72px; }
.testi-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color:var(--green); margin-bottom: 24px;
}
.testi-headline {
font-family: var(--serif);
font-size: clamp(2rem, 3.2vw, 3.8rem);
font-weight: 300; line-height: 1.05; color: var(--ivory);
}
.testi-headline em { font-style: italic; color: var(--green); }
/* Slider wrapper */
.testi-slider-wrap {}
.testi-track { overflow: hidden; }
.testi-slides {
display: flex;
transition: transform 0.75s var(--ease);
}
.testi-slide { flex: 0 0 100%; }
/* Slide card */
.testi-slide-inner {
background: rgba(26,24,22,0.04);
border: 1px solid rgba(26,24,22,0.07);
padding: 64px 72px;
position: relative;
transition: background 0.4s;
}
.testi-slide-inner:hover { background: rgba(26,24,22,0.07); }
/* decorative open-quote */
.testi-slide-inner::before {
content: '\201C';
position: absolute; top: 32px; left: 52px;
font-family: var(--serif); font-size: 6rem;
color: var(--green-dark); opacity: 0.4;
font-style: normal; line-height: 1;
pointer-events: none;
}
.testi-stars {
display: flex; gap: 6px; margin-bottom: 36px;
}
.testi-stars span { color: var(--green); font-size: 1rem; }
.testi-quote {
font-family: var(--sans);
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
font-weight: 300; font-style: normal;
color: rgba(26,24,22,0.82);
line-height: 1.85; margin-bottom: 48px;
max-width: 820px;
}
.testi-author { display: flex; align-items: center; gap: 20px; }
.testi-author-avatar {
width: 48px; height: 48px; border-radius: 50%;
background: var(--green-dark);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 1.3rem;
color: var(--white); font-style: italic; flex-shrink: 0;
}
.testi-author-name {
font-family: var(--sans); font-size: 0.85rem;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--ivory); margin-bottom: 5px;
}
.testi-author-role {
font-family: var(--sans); font-size: 0.78rem;
letter-spacing: 0.15em; color: rgba(26,24,22,0.32);
}
/* Controls */
.testi-controls {
display: flex; align-items: center; gap: 20px;
margin-top: 36px;
}
.testi-dots { display: flex; gap: 10px; }
.testi-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(26,24,22,0.18); border: none;
cursor: pointer; padding: 0;
transition: background 0.3s, transform 0.3s;
}
.testi-dot.active { background: var(--green); transform: scale(1.4); }
.testi-btn {
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(26,24,22,0.15);
background: transparent; color: rgba(26,24,22,0.45);
font-size: 1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.testi-btn:hover { border-color: var(--green); color: var(--green); background: rgba(137,199,58,0.06); }
/* ═══════════════════════════════════════════════════
BOOK APPOINTMENT — FORM BOX (section 6)
═══════════════════════════════════════════════════ */
#appointment {
background: var(--black);
padding: 160px 60px;
border-top: 1px solid rgba(26,24,22,0.06);
position: relative; overflow: hidden;
}
/* subtle bg texture */
#appointment::before {
content: '';
position: absolute; top: 0; right: 0;
width: 55%; height: 100%;
background: linear-gradient(135deg, rgba(77,138,15,0.04) 0%, transparent 60%);
pointer-events: none;
}
.appt-inner {
max-width: 1300px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px;
align-items: start; position: relative; z-index: 1;
}
.appt-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color:var(--green); margin-bottom: 28px;
}
.appt-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 4.2rem);
font-weight: 300; line-height: 1; color: var(--ivory);
letter-spacing: -0.02em; margin-bottom: 28px;
}
.appt-headline em { font-style: italic; color: var(--green); }
.appt-subtext {
font-size: 1rem; color: rgba(26,24,22,0.38);
line-height: 1.9; max-width: 380px; margin-bottom: 52px;
}
.appt-contact-list { display: flex; flex-direction: column; gap: 20px; }
.appt-contact-item {
display: flex; align-items: flex-start; gap: 16px;
font-size: 1rem; color: rgba(26,24,22,0.45); line-height: 1.5;
}
.appt-contact-item svg {
width: 18px; height: 18px; flex-shrink: 0;
color: var(--green-dark); margin-top: 2px;
}
/* ── THE FORM BOX ── */
.appt-form-box {
background: var(--white);
border: 1px solid rgba(26,24,22,0.08);
padding: 52px 52px 48px;
position: relative;
}
/* top green accent line */
.appt-form-box::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(to right, var(--green-dark), var(--green), var(--green-dark));
}
.appt-form-title {
font-family: var(--serif);
font-size: clamp(2rem, 3.2vw, 3.8rem);
font-weight: 300; line-height: 1.1; color: var(--ivory);
margin-bottom: 40px; letter-spacing: -0.02em;
}
.appt-form-title em { font-style: italic; color: var(--green); }
/* side-by-side name row */
.form-row-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
}
/* form fields */
.form-field {
border-bottom: 1px solid rgba(26,24,22,0.08);
padding: 20px 0 8px; margin-bottom: 0;
position: relative;
}
.form-field label {
font-family: var(--sans); font-size: 0.7rem;
letter-spacing: 0.26em; text-transform: uppercase;
color: rgba(26,24,22,0.3); display: block; margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%; background: transparent; border: none; outline: none;
font-family: var(--serif); font-size: 1rem;
font-weight: 300; color: var(--ivory); padding: 0;
appearance: none; -webkit-appearance: none;
}
.form-field select { cursor: pointer; color: rgba(26,24,22,0.38); }
.form-field select option { background: var(--offblack); color: var(--ivory); }
.form-field textarea { resize: none; min-height: 72px; line-height: 1.7; height: 90px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(26,24,22,0.16); }
.form-field input[type="date"] { color-scheme: light; }
/* animated focus line */
.form-field::after {
content: ''; position: absolute; bottom: -1px; left: 0;
width: 0; height: 1px; background: var(--green);
transition: width 0.4s var(--ease);
}
.form-field:focus-within::after { width: 100%; }
/* submit */
.appt-submit {
width: 100%; margin-top: 40px;
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--white); background: var(--green-dark);
border: none; padding: 17px 44px;
cursor: pointer; transition: background 0.4s var(--ease), letter-spacing 0.3s;
}
.appt-submit:hover { background: var(--green); letter-spacing: 0.28em; }
.appt-form-note {
margin-top: 18px; font-size: 0.8rem;
color: rgba(26,24,22,0.50); line-height: 1.6; text-align: center; margin-top: 0px;
}
/* ═══════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════ */
footer {
background: var(--offblack);
border-top: 1px solid rgba(26,24,22,0.06);
}
.footer-inner {
max-width: 1300px; margin: 0 auto;
padding: 80px 60px 60px;
display: grid; grid-template-columns: 1.6fr 2fr; gap: 80px;
}
.footer-brand {}
.footer-logo img {
height: 80px; width: auto; opacity: 0.6;
transition: opacity 0.3s; display: block; margin-bottom: 24px;
}
.footer-logo img:hover { opacity: 1; }
.footer-tagline {
font-family: var(--sans); font-size:16px;
font-style:normal; color: rgba(26,24,22,0.5); line-height: 1.7;
}
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-col h4 {
font-family: var(--serif); font-size: 1rem;
letter-spacing: 0em; text-transform: uppercase;
color: rgba(26,24,22,0.8); margin-bottom: 24px; font-weight: 400;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
font-family: var(--sans); font-size: 1rem;
color: rgba(26,24,22,0.5); text-decoration: none;
transition: color 0.3s; letter-spacing: 0.04em;
}
.footer-col ul li a:hover { color: var(--green); }
.footer-bottom {
max-width: 1300px; margin: 0 auto;
padding: 24px 60px;
border-top: 1px solid rgba(26,24,22,0.05);
display: flex; justify-content: space-between; align-items: center;
}
.footer-copy {
font-family: var(--sans); font-size: 0.92rem;
letter-spacing: 0.12em; color: rgba(26,24,22,0.5);
}
.footer-legal { display: flex; gap: 28px; }
.footer-legal a {
font-family: var(--sans); font-size: 0.92rem;
letter-spacing: 0.12em; color: rgba(26,24,22,0.5);
text-decoration: none; transition: color 0.3s;
}
.footer-legal a:hover { color: rgba(26,24,22,0.5); }
/* ═══════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes heroReveal {
from { opacity: 0; transform: scale(1.04); }
to { opacity: 1; transform: scale(1); }
}
@keyframes growDown {
from { height: 0; }
to { height: 100%; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scanDown {
0% { top: -100%; }
100% { top: 100%; }
}
/* ═══════════════════════════════════════════════════
SCROLL REVEAL
═══════════════════════════════════════════════════ */
.reveal {
opacity: 0; transform: translateY(24px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.38s; }
.reveal-d4 { transition-delay: 0.52s; }
/* Mobile breadcrumb — shows below heading inside content flow */
.page-hero-breadcrumb-mobile {
display: none;
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(26,24,22,0.35);
gap: 10px; align-items: center;
margin-top: 20px;
position: relative; z-index: 4;
}
.page-hero-breadcrumb-mobile a { color: rgba(26,24,22,0.35); text-decoration: none; transition: color 0.3s; }
.page-hero-breadcrumb-mobile a:hover { color: var(--green); }
.page-hero-breadcrumb-mobile span { color: var(--green); }
@media (max-width: 768px) {
.page-hero-breadcrumb { display: none !important; }
.page-hero-breadcrumb-mobile { display: flex; }
}
/* ═══════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.doctor-card { flex: 0 0 calc(50% - 12px); }
.footer-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 960px) {
nav { padding: 18px 30px; }
nav.scrolled { padding: 14px 30px; }
.nav-links { display: none; }
.nav-appointment { display: none; }
.nav-burger { display: flex; }
#hero { padding: 0 30px 60px; }
.hero-rule { left: 30px; }
.hero-location { display: none; }
.hero-scroll { left: 30px; }
.hero-footer { flex-direction: column; align-items: flex-start; gap: 32px; }
#services { padding: 100px 30px; }
.services-header { flex-direction: column; align-items: flex-start; gap: 24px; }
.services-note { text-align: left; }
#about { padding: 120px 30px; }
.about-inner { grid-template-columns: 1fr; gap: 60px; }
.about-credentials { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px; }
#doctors { padding: 100px 0 100px 30px; }
.doctors-header { padding-right: 30px; flex-direction: column; align-items: flex-start; gap: 32px; }
#testimonials { padding: 100px 30px; }
.testi-slide-inner { padding: 44px 36px; }
.testi-slide-inner::before { left: 24px; top: 20px; font-size: 4rem; }
#appointment { padding: 100px 30px; }
.appt-inner { grid-template-columns: 1fr; gap: 60px; }
.appt-form-box { padding: 40px 32px; }
.footer-inner { padding: 60px 30px 40px; }
.footer-cols { grid-template-columns: repeat(2, 1fr); }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; padding: 20px 30px; }
}
@media (max-width: 640px) {
.services-grid { grid-template-columns: 1fr; }
.service-card { aspect-ratio: unset; min-height: 320px; }
.service-card-desc { height: auto !important; opacity: 1 !important; }
.service-card-arrow { opacity: 1 !important; transform: translateX(0) !important; }
.doctor-card { flex: 0 0 80vw; }
.doctors-controls { display: none; }
.about-credentials { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: 1fr; }
.appt-form-box { padding: 32px 24px; }
.form-row-2 { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════
VALUES CARDS (About section)
═══════════════════════════════════════════════════ */
.values-grid {
max-width: 1300px; margin: 100px auto 0;
padding-top: 0px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
position: relative; z-index: 1;
}
.value-card {
padding: 48px 32px;
border: 1px solid rgba(26,24,22,0.05);
background: rgba(255,255,255,0.50);
position: relative; overflow: hidden;
transition: background 0.4s, border-color 0.4s;
}
.value-card:hover { background: rgba(137,199,58,0.04); border-color: rgba(137,199,58,0.2); }
.value-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(to right, var(--green-dark), var(--green));
transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.value-card:hover::before { transform: scaleX(1); }
.value-card-icon { width: 40px; height: 40px; margin-bottom: 24px; color: var(--green); transition: color 0.3s; }
.value-card:hover .value-card-icon { color: var(--green); }
.value-card-icon svg { width: 100%; height: 100%; }
.value-card-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; color: var(--ivory); margin-bottom: 12px; transition: color 0.3s; }
.value-card:hover .value-card-title { color: var(--green); }
.value-card-desc { font-family: var(--sans); font-size: 1rem; color: var(--warm-grey); line-height: 1.8; }
/* ═══════════════════════════════════════════════════
TESTIMONIALS — 2 per slide
═══════════════════════════════════════════════════ */
.testi-pair {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 1100px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .values-grid { grid-template-columns: repeat(2, 1fr); margin-top: 60px; } .testi-pair { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } .testi-pair { display: flex; flex-direction: column; gap: 0; } .testi-pair .testi-slide-inner:last-child { display: none; } }
/* ═══════════════════════════════════════════════════
PAGE HERO (about.html & service pages)
═══════════════════════════════════════════════════ */
.page-hero {
min-height: 68vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 60px 120px;
position: relative;
overflow: hidden;
background: var(--black);
}
.page-hero-bg {
position: absolute; inset: 0;
background-image: url('images/hero_bg.jpg');
background-size: cover;
background-position: center 30%;
opacity: 0;
animation: heroReveal 2.2s 0.3s var(--ease) forwards;
}
.page-hero-bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.05) 25%,
rgba(0,0,0,0.25) 60%,
rgba(0,0,0,0.50) 100%
);
}
.page-hero-rule {
position: absolute; top: 0; left: 60px;
width: 1px; height: 0;
background: rgba(26,24,22,0.15);
animation: growDown 1.8s 0.6s var(--ease) forwards;
}
.page-hero-eyebrow {
position: relative; z-index: 2;
font-family: var(--sans);
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 20px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero-headline {
font-family: var(--serif);
font-size: clamp(3rem, 4.8vw, 6.5rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--white);
opacity: 0;
animation: fadeSlideUp 1.2s 0.9s var(--ease) forwards;
}
.page-hero-headline em { font-style: italic; color: var(--green); }
.page-hero-sub {
margin-top: 28px;
max-width: 480px;
font-family: var(--sans);
font-size: 0.95rem;
font-weight: 300;
color: rgba(26,24,22,0.55);
line-height: 1.8;
opacity: 0;
animation: fadeIn 1s 1.6s forwards;
}
.page-hero-location {
position: absolute; top: 120px; right: 60px;
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.32em; text-transform: uppercase;
color: rgba(26,24,22,0.3);
writing-mode: vertical-rl;
opacity: 0; animation: fadeIn 1s 2.2s forwards;
}
.page-hero-breadcrumb {
position: absolute; bottom: 48px; right: 60px;
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(26,24,22,0.35);
z-index: 4;
display: flex; gap: 10px; align-items: center;
opacity: 0; animation: fadeIn 1s 2s forwards;
}
.page-hero-breadcrumb a { color: rgba(26,24,22,0.35); text-decoration: none; transition: color 0.3s; }
.page-hero-breadcrumb a:hover { color: var(--green); }
.page-hero-breadcrumb span { color: var(--green); }
/* Mobile: breadcrumb moves below heading inside content flow */
@media (max-width: 768px) {
.page-hero-breadcrumb {
position: static;
margin-top: 20px;
opacity: 1;
animation: none;
}
}
/* page-hero footer variant (plastic surgery) */
.page-hero-footer {
margin-top: 36px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
opacity: 0;
animation: fadeIn 1s 1.6s forwards;
}
.page-hero-cta {
flex-shrink: 0;
font-family: var(--sans);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white);
background: var(--green-dark);
padding: 15px 36px;
text-decoration: none;
display: inline-block;
white-space: nowrap;
transition: background 0.4s var(--ease);
}
.page-hero-cta:hover { background: var(--green); }
/* ═══════════════════════════════════════════════════
ABOUT PAGE — STORY, STATS, MISSION, VALUES, LEADERSHIP, ACCRED, CTA
═══════════════════════════════════════════════════ */
.about-story {
padding: 120px 60px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: start;
max-width: 1400px;
margin: 0 auto;
}
.about-story-label {
font-family: var(--sans);
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 28px;
}
.about-story-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 3.2rem);
font-weight: 400;
line-height: 1.15;
color: var(--ivory);
margin-bottom: 0;
}
.about-story-headline em { font-style: italic; color: var(--green); }
.about-story-right { padding-top: 10px; }
.about-story-body {
font-family: var(--sans);
font-size: 1rem;
font-weight: 300;
color: var(--warm-grey);
line-height: 1.9;
margin-bottom: 28px;
}
.about-story-body + .about-story-body { margin-bottom: 0; }
.about-story-divider { width: 40px; height: 1px; background: var(--green); margin: 40px 0; }
.about-stats {
border-top: 1px solid rgba(26,24,22,0.07);
border-bottom: 1px solid rgba(26,24,22,0.07);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.about-stat-item {
padding: 60px 50px;
border-right: 1px solid rgba(26,24,22,0.07);
position: relative;
}
.about-stat-item:last-child { border-right: none; }
.about-stat-number {
font-family: var(--serif);
font-size: clamp(2.8rem, 4vw, 4rem);
font-weight: 400;
color: var(--black);
line-height: 1;
margin-bottom: 12px;
}
.about-stat-number em { font-style: italic; color: var(--green); }
.about-stat-label {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--warm-grey);
}
.about-mission { background: var(--offblack); padding: 120px 60px; }
.about-mission-inner {
max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 2fr;
gap: 100px; align-items: center;
}
.about-mission-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 28px;
}
.about-mission-heading {
font-family: var(--serif);
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 400; color: var(--ivory); line-height: 1.2;
}
.about-mission-heading em { font-style: italic; color: var(--green); }
.about-mission-quote {
font-family: var(--serif);
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 400; font-style: italic;
color: rgba(26,24,22,0.75); line-height: 1.6;
border-left: 2px solid var(--green);
padding-left: 36px; margin-bottom: 40px;
}
.about-mission-body {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.9;
}
.about-values { padding: 120px 60px; max-width: 1400px; margin: 0 auto; }
.about-values-header {
display: flex; justify-content: space-between;
align-items: flex-end; margin-bottom: 64px;
}
.about-values-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.about-values-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 3.2rem);
font-weight: 400; color: var(--ivory); line-height: 1.15;
}
.about-values-headline em { font-style: italic; color: var(--green); }
.about-values-note {
max-width: 320px; font-family: var(--sans);
font-size: 0.85rem; font-weight: 300;
color: var(--warm-grey); line-height: 1.8; text-align: right;
}
.about-leadership { background: var(--offblack); padding: 120px 60px; }
.about-leadership-inner { max-width: 1400px; margin: 0 auto; }
.about-leadership-header { margin-bottom: 64px; }
.about-leadership-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.about-leadership-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 3.2rem);
font-weight: 400; color: var(--ivory); line-height: 1.15;
}
.about-leadership-headline em { font-style: italic; color: var(--green); }
.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.leadership-card {
background: var(--charcoal); overflow: hidden;
position: relative; text-decoration: none; display: block;
transition: background 0.4s var(--ease);
}
.leadership-card:hover { background: var(--ink); }
.leadership-card-img {
width: 100%; aspect-ratio: 4/5;
object-fit: cover; object-position: top center; display: block;
filter: grayscale(30%);
transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.leadership-card:hover .leadership-card-img { filter: grayscale(0%); transform: scale(1.03); }
.leadership-card-body { padding: 28px 32px 36px; border-top: 1px solid rgba(26,24,22,0.07); }
.leadership-card-name {
font-family: var(--serif); font-size: 1.25rem;
font-weight: 400; color: var(--ivory); margin-bottom: 6px;
}
.leadership-card-title {
font-family: var(--sans); font-size: 0.7rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--green); margin-bottom: 14px;
}
.leadership-card-bio {
font-family: var(--sans); font-size: 0.85rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.8;
}
.about-accred {
padding: 100px 60px; max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 2fr;
gap: 80px; align-items: center;
}
.about-accred-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.about-accred-headline {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.8vw, 2.5rem);
font-weight: 400; color: var(--ivory); line-height: 1.2;
}
.about-accred-headline em { font-style: italic; color: var(--green); }
.about-accred-body {
margin-top: 24px; font-family: var(--sans);
font-size: 0.9rem; font-weight: 300;
color: var(--warm-grey); line-height: 1.9;
}
.about-accred-right { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.accred-badge {
background: var(--offblack); padding: 36px 32px;
display: flex; flex-direction: column; gap: 12px;
border: 1px solid rgba(26,24,22,0.04);
}
.accred-badge-icon { width: 36px; height: 36px; color: var(--green); }
.accred-badge-title {
font-family: var(--serif); font-size: 1rem;
font-weight: 400; color: var(--ivory);
}
.accred-badge-desc {
font-family: var(--sans); font-size: 0.8rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.7;
}
.about-cta {
background: var(--green-dark); padding: 80px 60px;
display: flex; align-items: center;
justify-content: space-between; gap: 40px;
}
.about-cta-headline {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 400; font-style: italic;
color: var(--white); line-height: 1.2; margin-bottom: 10px;
}
.about-cta-sub {
font-family: var(--sans); font-size: 0.85rem;
font-weight: 300; color: rgba(26,24,22,0.65); letter-spacing: 0.06em;
}
.about-cta-btn {
flex-shrink: 0; font-family: var(--sans);
font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--green-dark); background: var(--white);
padding: 16px 40px; text-decoration: none; display: inline-block;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.about-cta-btn:hover { background: var(--black); color: var(--white); }
/* ═══════════════════════════════════════════════════
PLASTIC SURGERY PAGE (ps-*)
═══════════════════════════════════════════════════ */
.ps-intro {
padding: 120px 60px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 100px; align-items: center;
max-width: 1400px; margin: 0 auto;
}
.ps-intro-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 28px;
}
.ps-intro-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 3.2rem);
font-weight: 400; line-height: 1.15; color: var(--ivory);
}
.ps-intro-headline em { font-style: italic; color: var(--green); }
.ps-intro-divider { width: 40px; height: 1px; background: var(--green); margin: 36px 0; }
.ps-intro-body {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.9;
}
.ps-intro-body + .ps-intro-body { margin-top: 24px; }
.ps-intro-img-wrap { position: relative; }
.ps-intro-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; filter: grayscale(15%); }
.ps-intro-img-accent {
position: absolute; bottom: -24px; right: -24px;
width: 55%; aspect-ratio: 1;
border: 1px solid rgba(137,199,58,0.3); pointer-events: none;
}
.ps-philosophy { background: var(--offblack); padding: 100px 60px; }
.ps-philosophy-inner {
max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 100px; align-items: center;
}
.ps-philosophy-inner.full-width {
grid-template-columns: 1fr;
max-width: 900px;
}
.ps-philosophy-quote {
font-family: var(--serif);
font-size: clamp(1.5rem, 2.8vw, 2.2rem);
font-weight: 400; font-style: italic;
color: rgba(26,24,22,0.8); line-height: 1.55;
border-left: 2px solid var(--green); padding-left: 36px;
}
.ps-philosophy-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-philosophy-headline {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.8vw, 2.4rem);
font-weight: 400; color: var(--ivory); line-height: 1.2; margin-bottom: 28px;
}
.ps-philosophy-headline em { font-style: italic; color: var(--green); }
.ps-philosophy-body {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.9;
}
.ps-procedures { padding: 120px 60px; max-width: 1400px; margin: 0 auto; }
.ps-procedures-header {
display: flex; justify-content: space-between;
align-items: flex-end; margin-bottom: 64px;
}
.ps-procedures-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-procedures-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 3.2rem);
font-weight: 400; color: var(--ivory); line-height: 1.15;
}
.ps-procedures-headline em { font-style: italic; color: var(--green); }
.ps-procedures-note {
max-width: 300px; font-family: var(--sans);
font-size: 0.85rem; font-weight: 300;
color: var(--warm-grey); line-height: 1.8; text-align: right;
}
.ps-procedures-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.ps-proc-card {
background: var(--charcoal); padding: 48px 44px;
border: 1px solid rgba(26,24,22,0.04);
position: relative; overflow: hidden;
cursor: default; transition: background 0.4s var(--ease);
}
.ps-proc-card::before {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 2px; background: var(--green);
transition: width 0.5s var(--ease);
}
.ps-proc-card:hover { background: var(--ink); }
.ps-proc-card:hover::before { width: 100%; }
.ps-proc-number {
font-family: var(--serif); font-size: 4rem;
font-weight: 400; font-style: italic;
color: rgba(26,24,22,0.05);
position: absolute; top: 20px; right: 28px;
line-height: 1; pointer-events: none;
}
.ps-proc-icon { font-size: 1.8rem; color: var(--green); margin-bottom: 20px; display: block; }
.ps-proc-title {
font-family: var(--serif); font-size: 1.35rem;
font-weight: 400; color: var(--ivory); margin-bottom: 14px; line-height: 1.2;
}
.ps-proc-desc {
font-family: var(--sans); font-size: 0.88rem;
font-weight: 300; color: var(--warm-grey);
line-height: 1.85; margin-bottom: 24px;
}
.ps-proc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-proc-tag {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--green); border: 1px solid rgba(137,199,58,0.3); padding: 4px 12px;
}
.ps-process { background: var(--offblack); padding: 120px 60px; }
.ps-process-inner { max-width: 1400px; margin: 0 auto; }
.ps-process-header { margin-bottom: 80px; }
.ps-process-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-process-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 3.2rem);
font-weight: 400; color: var(--ivory); line-height: 1.15;
}
.ps-process-headline em { font-style: italic; color: var(--green); }
.ps-steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.ps-steps::before {
content: ''; position: absolute;
top: 28px; left: 0; right: 0; height: 1px;
background: rgba(26,24,22,0.08); z-index: 0;
}
.ps-step { padding: 0 32px 0 0; position: relative; z-index: 1; }
.ps-step-num {
width: 56px; height: 56px;
border: 1px solid rgba(137,199,58,0.4);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 1.1rem;
font-style: italic; color: var(--green);
margin-bottom: 32px; background: var(--offblack); flex-shrink: 0;
}
.ps-step-title {
font-family: var(--serif); font-size: 1.1rem;
font-weight: 400; color: var(--ivory); margin-bottom: 14px; line-height: 1.2;
}
.ps-step-desc {
font-family: var(--sans); font-size: 0.85rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.85;
}
.ps-surgeon {
padding: 120px 60px; max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 5fr 7fr;
gap: 80px; align-items: center;
}
.ps-surgeon-img-wrap { position: relative; }
.ps-surgeon-img {
width: 100%; aspect-ratio: 3/4;
object-fit: cover; object-position: top center; display: block;
filter: grayscale(20%); transition: filter 0.6s var(--ease);
}
.ps-surgeon-img-wrap:hover .ps-surgeon-img { filter: grayscale(0%); }
.ps-surgeon-img-border {
position: absolute; top: 24px; left: 24px; right: -24px; bottom: -24px;
border: 1px solid rgba(26,24,22,0.07); pointer-events: none;
}
.ps-surgeon-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-surgeon-name {
font-family: var(--serif);
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 400; color: var(--ivory); line-height: 1.1; margin-bottom: 8px;
}
.ps-surgeon-title {
font-family: var(--sans); font-size: 0.7rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--warm-grey); margin-bottom: 36px;
}
.ps-surgeon-divider { width: 40px; height: 1px; background: var(--green); margin-bottom: 36px; }
.ps-surgeon-bio {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey);
line-height: 1.9; margin-bottom: 20px;
}
.ps-surgeon-credentials { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.ps-surgeon-cred { display: flex; align-items: flex-start; gap: 14px; }
.ps-surgeon-cred-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green); margin-top: 8px; flex-shrink: 0;
}
.ps-surgeon-cred-text {
font-family: var(--sans); font-size: 0.85rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.6;
}
.ps-surgeon-cta {
margin-top: 48px; display: inline-flex;
align-items: center; gap: 14px;
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--white); background: var(--green-dark);
padding: 14px 32px; text-decoration: none;
transition: background 0.4s var(--ease);
}
.ps-surgeon-cta:hover { background: var(--green); }
.ps-gallery {
display: grid; grid-template-columns: 2fr 1fr 1fr;
gap: 2px; height: 520px;
}
.ps-gallery-item { overflow: hidden; position: relative; }
.ps-gallery-item img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(30%);
transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.ps-gallery-item:hover img { filter: grayscale(0%); transform: scale(1.04); }
.ps-gallery-item-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(255,255,255,0.6) 0%, transparent 50%);
pointer-events: none;
}
.ps-gallery-caption {
position: absolute; bottom: 20px; left: 20px;
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(26,24,22,0.5);
}
.ps-testi { background: var(--offblack); padding: 100px 60px; }
.ps-testi-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.ps-testi-stars {
display: flex; justify-content: center; gap: 6px;
margin-bottom: 36px; color: var(--green); font-size: 1.2rem;
}
.ps-testi-quote {
font-family: var(--serif);
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
font-weight: 400; font-style: italic;
color: rgba(26,24,22,0.8); line-height: 1.65; margin-bottom: 40px;
}
.ps-testi-author-name {
font-family: var(--sans); font-size: 0.75rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ivory); margin-bottom: 6px;
}
.ps-testi-author-role {
font-family: var(--sans); font-size: 0.7rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey);
}
.ps-faq {
padding: 120px 60px; max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 2fr; gap: 80px;
}
.ps-faq-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-faq-headline {
font-family: var(--serif);
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 400; color: var(--ivory); line-height: 1.2;
}
.ps-faq-headline em { font-style: italic; color: var(--green); }
.ps-faq-note {
margin-top: 24px; font-family: var(--sans);
font-size: 0.88rem; font-weight: 300; color: var(--warm-grey); line-height: 1.8;
}
.ps-faq-item { border-top: 1px solid rgba(26,24,22,0.08); padding: 28px 0; }
.ps-faq-item:last-child { border-bottom: 1px solid rgba(26,24,22,0.08); }
.ps-faq-q {
font-family: var(--serif); font-size: 1.1rem;
font-weight: 400; color: var(--ivory); margin-bottom: 14px;
cursor: pointer; display: flex;
justify-content: space-between; align-items: flex-start; gap: 20px;
}
.ps-faq-q-icon {
color: var(--green); font-size: 1.1rem;
flex-shrink: 0; margin-top: 2px;
transition: transform 0.3s var(--ease);
}
.ps-faq-item.open .ps-faq-q-icon { transform: rotate(45deg); }
.ps-faq-a {
font-family: var(--sans); font-size: 0.9rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.85; display: none;
}
.ps-faq-item.open .ps-faq-a { display: block; }
.ps-cta {
background: var(--green-dark); padding: 80px 60px;
display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.ps-cta-headline {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 400; font-style: italic;
color: var(--white); line-height: 1.2; margin-bottom: 10px;
}
.ps-cta-sub {
font-family: var(--sans); font-size: 0.85rem;
font-weight: 300; color: rgba(26,24,22,0.65); letter-spacing: 0.06em;
}
.ps-cta-btn {
flex-shrink: 0; font-family: var(--sans);
font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--green-dark); background: var(--white);
padding: 16px 40px; text-decoration: none; display: inline-block;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.ps-cta-btn:hover { background: var(--black); color: var(--white); }
/* ═══════════════════════════════════════════════════
ANIMATION — fadeSlideUp (used by page heroes)
═══════════════════════════════════════════════════ */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════
NAV DROPDOWN (Services submenu)
═══════════════════════════════════════════════════ */
.nav-links li.has-dropdown { position: relative; }
/* Use ::before pseudo bridge to fill gap between nav link and dropdown */
.nav-links li.has-dropdown::before {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
width: 200px; height: 24px; /* bridge the gap */
z-index: 299;
}
.nav-dropdown {
position: absolute; top: calc(100% + 20px); left: 50%;
transform: translateX(-50%) translateY(-6px);
background: rgba(255,255,255,0.97);
backdrop-filter: blur(20px);
border: 1px solid rgba(26,24,22,0.08);
border-top: 2px solid var(--green);
min-width: 200px;
padding: 12px 0;
opacity: 0; pointer-events: none;
transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
z-index: 300;
list-style: none;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown {
opacity: 1; pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
display: block;
padding: 11px 24px;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,24,22,0.6);
text-decoration: none;
transition: color 0.25s, background 0.25s;
white-space: nowrap;
}
.nav-dropdown li a:hover {
color: var(--green);
background: rgba(137,199,58,0.06);
}
.nav-dropdown li a::after { display: none; }
/* ═══════════════════════════════════════════════════
BEFORE & AFTER — SLIDER + LIGHTBOX
═══════════════════════════════════════════════════ */
#before-after {
background: var(--black);
padding: 80px 0 80px;
border-top: 1px solid rgba(26,24,22,0.05);
overflow: hidden;
}
.ba-section-header {
max-width: 1300px; margin: 0 auto 52px;
padding: 0 0px;
}
.ba-section-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color: rgba(26,24,22,0.3); margin-bottom: 14px;
}
.ba-section-title {
font-family: var(--serif);
font-size: clamp(2rem, 3vw, 3.2rem);
font-weight: 300; line-height: 1.05; color: var(--ivory);
}
.ba-section-title em { font-style: italic; color: var(--green); }
/* Slider outer wrapper — full bleed edge-to-edge */
.ba-slider-outer {
position: relative;
padding: 0 60px;
}
.ba-slider-track-wrap { overflow: hidden; }
.ba-slider-track {
display: flex;
gap: 6px;
transition: transform 0.72s var(--ease);
}
/* Each thumb: 4 visible = calc(25% - gap) */
.ba-thumb {
flex: 0 0 calc(25% - 5px);
aspect-ratio: 3 / 4;
overflow: hidden;
position: relative;
cursor: pointer;
background: var(--charcoal);
}
.ba-thumb img {
width: 100%; height: 100%;
object-fit: cover; display: block;
filter: brightness(0.92);
transition: transform 0.6s var(--ease), filter 0.4s;
}
.ba-thumb:hover img { transform: scale(1.06); filter: brightness(1.05); }
.ba-thumb-overlay {
position: absolute; inset: 0;
background: rgba(14,13,12,0);
transition: background 0.35s;
display: flex; align-items: center; justify-content: center;
}
.ba-thumb:hover .ba-thumb-overlay { background: rgba(255,255,255,0.22); }
.ba-thumb-icon {
width: 48px; height: 48px;
border: 1px solid rgba(26,24,22,0.75);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--white); font-size: 1.5rem; font-weight: 300;
opacity: 0; transform: scale(0.6);
transition: opacity 0.3s, transform 0.3s;
}
.ba-thumb:hover .ba-thumb-icon { opacity: 1; transform: scale(1); }
/* Prev / Next buttons */
.ba-slider-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid rgba(26,24,22,0.18);
background: rgba(255,255,255,0.7); color: rgba(26,24,22,0.55);
font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, color 0.3s, background 0.3s;
z-index: 10;
}
.ba-slider-prev { left: 8px; }
.ba-slider-next { right: 8px; }
.ba-slider-btn:hover { border-color: var(--green); color: var(--green); background: rgba(255,255,255,0.92); }
/* Lightbox */
.ba-lightbox {
position: fixed; inset: 0;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(14px);
z-index: 1000;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.32s var(--ease);
}
.ba-lightbox.open { opacity: 1; pointer-events: all; }
.ba-lightbox-img {
max-width: 88vw; max-height: 86vh;
object-fit: contain; display: block;
transform: scale(0.95);
transition: transform 0.32s var(--ease);
}
.ba-lightbox.open .ba-lightbox-img { transform: scale(1); }
.ba-lightbox-close {
position: fixed; top: 24px; right: 32px;
width: 48px; height: 48px;
border: 1px solid rgba(26,24,22,0.22);
border-radius: 50%;
background: transparent; color: rgba(26,24,22,0.7);
font-size: 1.5rem; cursor: pointer; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, color 0.3s;
}
.ba-lightbox-close:hover { border-color: var(--green); color: var(--green); }
.ba-lightbox-prev, .ba-lightbox-next {
position: fixed; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px;
border: 1px solid rgba(26,24,22,0.15);
border-radius: 50%;
background: transparent; color: rgba(26,24,22,0.55);
font-size: 1.2rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.ba-lightbox-prev { left: 24px; }
.ba-lightbox-next { right: 24px; }
.ba-lightbox-prev:hover, .ba-lightbox-next:hover {
border-color: var(--green); color: var(--green); background: rgba(137,199,58,0.07);
}
.ba-lightbox-counter {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(26,24,22,0.3);
}
@media (max-width: 1100px) {
.ba-thumb { flex: 0 0 calc(33.333% - 4px); }
.ba-slider-outer { padding: 0 40px; }
}
@media (max-width: 768px) {
#before-after { padding: 60px 0; }
.ba-section-header { padding: 0 24px; }
.ba-thumb { flex: 0 0 calc(50% - 3px); }
.ba-slider-outer { padding: 0 24px; }
.ps-results-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.ba-thumb { flex: 0 0 calc(80vw); }
}
/* Responsive additions */
@media (max-width: 1100px) {
.about-story { grid-template-columns: 1fr; gap: 50px; }
.about-stats { grid-template-columns: repeat(2, 1fr); }
.about-stat-item:nth-child(2) { border-right: none; }
.about-mission-inner { grid-template-columns: 1fr; gap: 50px; }
.about-values-header { flex-direction: column; align-items: flex-start; gap: 24px; }
.about-values-note { text-align: left; }
.leadership-grid { grid-template-columns: 1fr 1fr; }
.about-accred { grid-template-columns: 1fr; gap: 50px; }
.ps-intro { grid-template-columns: 1fr; gap: 60px; padding: 80px 40px; }
.ps-intro-img-accent { display: none; }
.ps-philosophy-inner { grid-template-columns: 1fr; gap: 50px; }
.ps-procedures-header { flex-direction: column; align-items: flex-start; gap: 24px; }
.ps-procedures-note { text-align: left; }
.ps-procedures-grid { grid-template-columns: 1fr; }
.ps-steps { grid-template-columns: 1fr 1fr; gap: 50px; }
.ps-steps::before { display: none; }
.ps-surgeon { grid-template-columns: 1fr; }
.ps-surgeon-img { aspect-ratio: 16/9; }
.ps-gallery { grid-template-columns: 1fr; height: auto; }
.ps-gallery-item { height: 280px; }
.ps-gallery-item:first-child { height: 380px; }
.ps-faq { grid-template-columns: 1fr; gap: 50px; }
.ba-card { flex: 0 0 calc(50% - 12px); }
.ba-header { flex-direction: column; align-items: flex-start; gap: 24px; }
.ba-note { text-align: left; }
}
@media (max-width: 768px) {
.page-hero { padding: 0 24px 60px; }
.page-hero-rule { left: 24px; }
.page-hero-location { display: none; }
.about-story { padding: 80px 24px; }
.about-stat-item { padding: 40px 24px; }
.about-mission { padding: 80px 24px; }
.about-values { padding: 80px 24px; }
.about-leadership { padding: 80px 24px; }
.leadership-grid { grid-template-columns: 1fr; }
.about-accred { padding: 80px 24px; }
.about-accred-right { grid-template-columns: 1fr; }
.about-cta { padding: 60px 24px; flex-direction: column; align-items: flex-start; }
.ps-intro { padding: 80px 24px; }
.ps-philosophy { padding: 80px 24px; }
.ps-procedures { padding: 80px 24px; }
.ps-process { padding: 80px 24px; }
.ps-steps { grid-template-columns: 1fr; }
.ps-surgeon { padding: 80px 24px; }
.ps-testi { padding: 80px 24px; }
.ps-faq { padding: 80px 24px; }
.ps-cta { padding: 60px 24px; flex-direction: column; align-items: flex-start; }
#before-after { padding: 100px 30px; }
.ba-card { flex: 0 0 80vw; }
.ba-hint { display: none; }
}
/* 4-col services layout override */
.services-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .services-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid-4 { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════
JOURNEY / START SECTION
═══════════════════════════════════════════════════ */
#journey {
background: var(--offblack);
padding: 120px 60px;
border-top: 1px solid rgba(26,24,22,0.05);
}
.journey-inner {
max-width: 1300px; margin: 0 auto;
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 100px; align-items: center;
}
.journey-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.35em; text-transform: uppercase;
color: rgba(26,24,22,0.3); margin-bottom: 24px;
}
.journey-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 4rem);
font-weight: 300; line-height: 1.05; color: var(--ivory);
margin-bottom: 28px;
}
.journey-headline em { font-style: italic; color: var(--green); }
.journey-body {
font-size: 1rem; color: rgba(26,24,22,0.5);
line-height: 1.9; max-width: 520px; margin-bottom: 40px;
}
.journey-cta {
display: inline-block;
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--black); background: var(--ivory);
padding: 15px 36px; text-decoration: none;
transition: background 0.4s var(--ease), color 0.4s;
}
.journey-cta:hover { background: var(--green-dark); color: var(--white); }
.journey-contact-list {
display: flex; flex-direction: column; gap: 28px;
padding-left: 40px;
border-left: 1px solid rgba(26,24,22,0.08);
}
.journey-contact-item {
display: flex; align-items: flex-start; gap: 18px;
font-family: var(--serif); font-size: 1.05rem;
color: rgba(26,24,22,0.55); line-height: 1.5;
}
.journey-contact-item svg {
width: 20px; height: 20px; flex-shrink: 0;
color: var(--green); margin-top: 3px;
}
@media (max-width: 960px) {
#journey { padding: 80px 30px; }
.journey-inner { grid-template-columns: 1fr; gap: 60px; }
.journey-contact-list { padding-left: 0; border-left: none;
border-top: 1px solid rgba(26,24,22,0.08); padding-top: 40px; }
}
@media (max-width: 640px) {
.journey-body { max-width: 100%; }
}
/* ═══════════════════════════════════════════════════
APPOINTMENT — contact group labels
═══════════════════════════════════════════════════ */
.appt-contact-group-label {
font-family: var(--sans);
font-size: 0.8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 4px;
margin-top: 16px;
}
.appt-contact-group-label:first-child { margin-top: 0; }
/* ═══════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════ */
.contact-section {
background: var(--black);
padding: 100px 60px 120px;
}
.contact-inner {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-info-label {
font-family: var(--sans);
font-size: 0.6rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(26,24,22,0.3);
margin-bottom: 28px;
}
.contact-info-headline {
font-family: var(--serif);
font-size: clamp(2.2rem, 3.5vw, 4rem);
font-weight: 400;
line-height: 1.1;
color: var(--ivory);
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.contact-info-headline em { font-style: italic; color: var(--green); }
.contact-info-sub {
font-family: var(--sans);
font-size: 1rem;
color: rgba(26,24,22,0.42);
line-height: 1.85;
max-width: 400px;
margin-bottom: 52px;
}
.contact-details { display: flex; flex-direction: column; gap: 0; }
.contact-detail-group { margin-bottom: 36px; }
.contact-detail-group-label {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 16px;
}
.contact-detail-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 14px;
}
.contact-detail-item svg {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 2px;
color: rgba(26,24,22,0.35);
stroke: currentColor;
}
.contact-detail-item span, .contact-detail-item a {
font-family: var(--sans);
font-size: 0.95rem;
color: rgba(26,24,22,0.7);
line-height: 1.5;
text-decoration: none;
transition: color 0.3s;
}
.contact-detail-item a:hover { color: var(--green); }
.contact-form-box {
background: rgba(26,24,22,0.04);
border: 1px solid rgba(26,24,22,0.08);
padding: 52px 48px;
}
.contact-form-title {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.8vw, 3rem);
font-weight: 400;
line-height: 1.15;
color: var(--ivory);
margin-bottom: 36px;
letter-spacing: -0.02em;
}
.contact-form-title em { font-style: italic; color: var(--green); }
.contact-map {
margin-top: 80px;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 0 0px 0px;
}
.contact-map-label {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(26,24,22,0.3);
margin-bottom: 24px;
}
.contact-map iframe {
width: 100%;
height: 420px;
border: 1px solid rgba(26,24,22,0.08);
filter: grayscale(40%) brightness(1.0) contrast(0.95) sepia(0.1);
display: block;
}
@media (max-width: 960px) {
.contact-section { padding: 80px 30px 80px; }
.contact-inner { grid-template-columns: 1fr; gap: 60px; }
.contact-map { padding: 0 30px 80px; }
.contact-form-box { padding: 36px 28px; }
}
/* ═══════════════════════════════════════════════════
DOCTORS PAGE GRID
═══════════════════════════════════════════════════ */
.doctors-page-section {
padding: 100px 60px 120px;
max-width: 1400px;
margin: 0 auto;
}
.doctors-page-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 80px;
}
.doctors-page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.dp-card {
display: block;
text-decoration: none;
color: inherit;
background: var(--offblack);
border: 1px solid rgba(26,24,22,0.06);
transition: border-color 0.35s, transform 0.35s;
position: relative;
overflow: hidden;
}
.dp-card:hover {
border-color: rgba(137,199,58,0.35);
transform: translateY(-4px);
}
.dp-card-img-wrap {
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
}
.dp-card-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
display: block;
}
.dp-card:hover .dp-card-img-wrap img { transform: scale(1.04); }
.dp-card-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(255,255,255,0.7) 0%, transparent 50%);
}
.dp-card-body { padding: 28px 32px 32px; }
.dp-card-name {
font-family: var(--serif);
font-size: 1.45rem;
font-weight: 400;
color: var(--ivory);
margin-bottom: 6px;
line-height: 1.2;
}
.dp-card-role {
font-family: var(--sans);
font-size: 0.78rem;
color: rgba(26,24,22,0.45);
letter-spacing: 0.04em;
line-height: 1.5;
margin-bottom: 20px;
}
.dp-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
transition: gap 0.3s;
}
.dp-card-link::after { content: '→'; font-size: 1rem; }
.dp-card:hover .dp-card-link { gap: 14px; }
.dp-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, var(--green-dark), var(--green));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease);
}
.dp-card:hover::before { transform: scaleX(1); }
@media (max-width: 960px) {
.doctors-page-section { padding: 80px 30px 100px; }
.doctors-page-intro { grid-template-columns: 1fr; gap: 24px; }
.doctors-page-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
.doctors-page-grid { grid-template-columns: 1fr; }
.dp-card-img-wrap { aspect-ratio: 4/3; }
}
/* ═══════════════════════════════════════════════════
DOCTOR DETAIL PAGE
═══════════════════════════════════════════════════ */
.doc-detail-section {
background: var(--offblack);
padding: 160px 60px 120px;
}
.doc-detail-inner {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 380px 1fr;
gap: 80px;
align-items: start;
}
.doc-sidebar-img {
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
margin-bottom: 36px;
position: relative;
}
.doc-sidebar-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.doc-sidebar-img::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40%;
background: linear-gradient(to top, rgba(255,255,255,0.6), transparent);
}
.doc-sidebar-name {
font-family: var(--serif);
font-size: 1.9rem;
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
margin-bottom: 10px;
}
.doc-sidebar-role {
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 300;
color: rgba(26,24,22,0.5);
line-height: 1.5;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(26,24,22,0.08);
}
.doc-sidebar-meta { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.doc-sidebar-meta-item { display: flex; align-items: flex-start; gap: 14px; }
.doc-sidebar-meta-item svg {
width: 16px; height: 16px;
flex-shrink: 0;
margin-top: 3px;
color: var(--green);
stroke: currentColor;
}
.doc-sidebar-meta-item span {
font-family: var(--sans);
font-size: 0.85rem;
color: rgba(26,24,22,0.55);
line-height: 1.5;
}
.doc-sidebar-cta {
display: block;
text-align: center;
font-family: var(--sans);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--black);
background: var(--green);
padding: 16px 32px;
text-decoration: none;
transition: background 0.3s;
margin-bottom: 12px;
}
.doc-sidebar-cta:hover { background: var(--green-dark); }
.doc-main-breadcrumb {
font-family: var(--sans);
font-size: 0.6rem;
letter-spacing: 0.2em;
color: rgba(26,24,22,0.25);
text-transform: uppercase;
margin-bottom: 40px;
}
.doc-main-breadcrumb a {
color: rgba(26,24,22,0.25);
text-decoration: none;
transition: color 0.3s;
}
.doc-main-breadcrumb a:hover { color: var(--green); }
.doc-main-breadcrumb span { color: var(--green); }
.doc-main-bio {
font-family: var(--sans);
font-size: 1rem;
color: rgba(26,24,22,0.65);
line-height: 1.9;
margin-bottom: 24px;
}
.doc-main-section-title {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--ivory);
margin-top: 52px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(26,24,22,0.07);
}
.doc-main-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.doc-main-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-family: var(--sans);
font-size: 0.95rem;
color: rgba(26,24,22,0.6);
line-height: 1.6;
}
.doc-main-list li::before {
content: '';
width: 5px;
height: 5px;
background: var(--green);
border-radius: 50%;
flex-shrink: 0;
margin-top: 8px;
}
.doc-main-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.doc-main-tag {
font-family: var(--sans);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(26,24,22,0.5);
border: 1px solid rgba(26,24,22,0.12);
padding: 7px 16px;
transition: border-color 0.3s, color 0.3s;
}
.doc-main-tag:hover { border-color: var(--green); color: var(--green); }
.doc-other {
background: var(--white);
padding: 80px 60px;
}
.doc-other-inner { max-width: 1300px; margin: 0 auto; }
.doc-other-label {
font-family: var(--sans);
font-size: 0.6rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(26,24,22,0.3);
margin-bottom: 40px;
}
.doc-other-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.doc-other-card {
display: block;
text-decoration: none;
color: inherit;
transition: opacity 0.3s;
}
.doc-other-card:hover { opacity: 0.75; }
.doc-other-img {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
margin-bottom: 14px;
}
.doc-other-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
display: block;
filter: grayscale(20%);
transition: filter 0.3s;
}
.doc-other-card:hover .doc-other-img img { filter: grayscale(0); }
.doc-other-name {
font-family: var(--serif);
font-size: 1rem;
color: var(--ivory);
margin-bottom: 4px;
}
.doc-other-role {
font-family: var(--sans);
font-size: 0.7rem;
color: rgba(26,24,22,0.38);
line-height: 1.4;
}
@media (max-width: 1100px) {
.doc-other-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
.doc-detail-section { padding: 120px 30px 80px; }
.doc-detail-inner { grid-template-columns: 1fr; gap: 48px; }
.doc-sidebar-img { aspect-ratio: 4/3; max-height: 400px; }
.doc-other { padding: 60px 30px; }
.doc-other-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.doc-other-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════
APPOINTMENT PAGE — REDESIGNED
═══════════════════════════════════════════════════ */
/* Green background section */
.appt-green-section {
background: #89c73a;
padding: 100px 60px 120px;
display: flex;
align-items: center;
justify-content: center;
}
/* Centered form box */
.appt-center-box {
background: var(--offblack);
border: 1px solid rgba(26,24,22,0.10);
max-width: 740px;
width: 100%;
position: relative;
overflow: hidden;
}
.appt-center-box::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(to right, var(--green-dark), var(--green), var(--green-dark));
}
.appt-center-box-head {
padding: 44px 52px 32px;
border-bottom: 1px solid rgba(26,24,22,0.07);
}
.appt-center-box-title {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 300;
line-height: 1.1;
color: var(--ivory);
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.appt-center-box-title em { font-style: italic; color: var(--green); }
.appt-center-box-sub {
font-family: var(--sans);
font-size: 0.85rem;
color: rgba(26,24,22,0.35);
line-height: 1.6;
}
.appt-center-box-body { padding: 36px 52px 48px; }
/* Form fields (reuse existing .form-field, .form-row-2 from style.css) */
/* Service pills in centered box */
.appt-service-select-label {
font-family: var(--sans); font-size: 0.57rem;
letter-spacing: 0.26em; text-transform: uppercase;
color: rgba(26,24,22,0.3); margin-bottom: 14px;
}
.appt-service-pills {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px; margin-bottom: 4px;
}
.appt-pill {
border: 1px solid rgba(26,24,22,0.1);
background: transparent;
padding: 12px 16px;
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(26,24,22,0.45);
cursor: pointer;
text-align: left;
display: flex; align-items: center; gap: 10px;
transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.appt-pill svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.5; transition: opacity 0.25s; }
.appt-pill:hover { border-color: rgba(137,199,58,0.35); color: rgba(26,24,22,0.7); }
.appt-pill.selected {
border-color: var(--green);
background: rgba(137,199,58,0.07);
color: var(--ivory);
}
.appt-pill.selected svg { opacity: 1; color: var(--green); }
.appt-service-hidden { display: none; }
.appt-form-divider {
height: 1px; background: rgba(26,24,22,0.06);
margin: 28px 0;
}
.appt-page-submit {
width: 100%; margin-top: 32px;
font-family: var(--sans); font-size: 0.65rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--white); background: var(--green-dark);
border: none; padding: 18px 44px;
cursor: pointer; transition: background 0.4s var(--ease), letter-spacing 0.3s;
position: relative; overflow: hidden;
}
.appt-page-submit::after {
content: '→';
position: absolute; right: 24px; top: 50%;
transform: translateY(-50%);
font-size: 1rem; font-family: serif;
opacity: 0.5; transition: opacity 0.3s, right 0.3s;
}
.appt-page-submit:hover { background: var(--green); letter-spacing: 0.28em; }
.appt-page-submit:hover::after { opacity: 1; right: 20px; }
.appt-page-submit.sent {
background: #2e5014 !important;
pointer-events: none; letter-spacing: 0.22em;
}
.appt-privacy {
display: flex; align-items: center; gap: 10px;
margin-top: 18px; justify-content: center;
}
.appt-privacy svg { width: 14px; height: 14px; color: rgba(26,24,22,0.2); flex-shrink: 0; }
.appt-privacy span {
font-family: var(--sans); font-size: 0.68rem;
color: rgba(26,24,22,0.2); line-height: 1.5;
}
@media (max-width: 960px) {
.appt-green-section { padding: 80px 30px 100px; }
.appt-center-box-head { padding: 32px 32px 24px; }
.appt-center-box-body { padding: 28px 32px 40px; }
}
@media (max-width: 640px) {
.appt-service-pills { grid-template-columns: 1fr; }
.appt-green-section { padding: 60px 20px 80px; }
.appt-center-box-head { padding: 28px 24px 20px; }
.appt-center-box-body { padding: 24px 24px 36px; }
}
/* ── Stat/result card row ── */
.ps-stat-row {
padding: 100px 60px;
background: var(--black);
}
.ps-stat-row-inner { max-width: 1400px; margin: 0 auto; }
.ps-stat-row-header { margin-bottom: 64px; }
.ps-stat-row-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-stat-row-headline {
font-family: var(--serif);
font-size: clamp(2rem, 3.2vw, 3rem);
font-weight: 400; color: var(--ivory); line-height: 1.15;
}
.ps-stat-row-headline em { font-style: italic; color: var(--green); }
.ps-stat-row-sub {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey);
line-height: 1.9; margin-top: 20px; max-width: 680px;
}
.ps-cards-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin-top: 48px;
}
.ps-cards-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ps-card-item {
padding: 40px 32px;
background: rgba(26,24,22,0.02);
border: 1px solid rgba(26,24,22,0.06);
transition: background 0.35s, border-color 0.35s;
position: relative;
}
.ps-card-item::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(to right, var(--green-dark), var(--green));
transform: scaleX(0); transform-origin: left;
transition: transform 0.4s var(--ease);
}
.ps-card-item:hover { background: rgba(137,199,58,0.04); border-color: rgba(137,199,58,0.2); }
.ps-card-item:hover::before { transform: scaleX(1); }
.ps-card-icon {
font-size: 28px; color: var(--green);
margin-bottom: 20px; display: block; line-height: 1;
}
.ps-card-title {
font-family: var(--serif);
font-size: 1.2rem; font-weight: 400;
color: var(--ivory); margin-bottom: 12px; line-height: 1.3;
}
.ps-card-body {
font-family: var(--sans); font-size: 0.9rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.8;
}
/* ── Split section: image left or right, text other side ── */
.ps-split {
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
}
.ps-split.img-right { }
.ps-split-img {
overflow: hidden; position: relative;
}
.ps-split-img img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
filter: grayscale(20%);
transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.ps-split:hover .ps-split-img img { filter: grayscale(0); transform: scale(1.03); }
.ps-split-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(255,255,255,0.25), transparent);
}
.ps-split.img-right .ps-split-img-overlay {
background: linear-gradient(to left, rgba(255,255,255,0.25), transparent);
}
.ps-split-content {
padding: 80px 72px;
display: flex; flex-direction: column; justify-content: center;
background: var(--offblack);
}
.ps-split.alt .ps-split-content { background: var(--black); }
.ps-split-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-split-headline {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.8vw, 2.6rem);
font-weight: 400; color: var(--ivory); line-height: 1.15; margin-bottom: 28px;
}
.ps-split-headline em { font-style: italic; color: var(--green); }
.ps-split-body {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.9;
margin-bottom: 16px;
}
.ps-split-divider { width: 40px; height: 1px; background: var(--green); margin: 28px 0; }
/* ── Care tips list inside split ── */
.ps-split-list { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.ps-split-list li {
display: flex; align-items: flex-start; gap: 14px;
font-family: var(--sans); font-size: 0.95rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.65;
}
.ps-split-list li::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
flex-shrink: 0; margin-top: 8px;
}
@media (max-width: 1100px) {
.ps-cards-row { grid-template-columns: repeat(2, 1fr); }
.ps-cards-row.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.ps-split { grid-template-columns: 1fr; }
.ps-split-img { min-height: 320px; }
.ps-split-content { padding: 60px 30px; }
.ps-stat-row { padding: 80px 30px; }
.ps-cards-row { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.ps-card-item { padding: 28px 20px; }
}
@media (max-width: 480px) {
.ps-cards-row { grid-template-columns: 1fr; }
.ps-cards-row.cols-3 { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════
TWO-COLUMN TEXT PANEL (no image, replaces ps-split pairs)
═══════════════════════════════════════════════════ */
.ps-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
}
.ps-two-col-item {
padding: 80px 72px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-right: 1px solid rgba(26,24,22,0.05);
}
.ps-two-col-item:last-child { border-right: none; }
.ps-two-col-divider { width: 40px; height: 1px; background: var(--green); margin: 28px 0; }
.ps-two-col-label {
font-family: var(--sans); font-size: 0.6rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--green); margin-bottom: 20px;
}
.ps-two-col-headline {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
font-weight: 400; color: var(--ivory); line-height: 1.15; margin-bottom: 28px;
}
.ps-two-col-headline em { font-style: italic; color: var(--green); }
.ps-two-col-body {
font-family: var(--sans); font-size: 1rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.9;
margin-bottom: 16px;
}
.ps-two-col-list { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.ps-two-col-list li {
display: flex; align-items: flex-start; gap: 14px;
font-family: var(--sans); font-size: 0.95rem;
font-weight: 300; color: var(--warm-grey); line-height: 1.65;
}
.ps-two-col-list li::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
flex-shrink: 0; margin-top: 8px;
}
@media (max-width: 900px) {
.ps-two-col { grid-template-columns: 1fr; }
.ps-two-col-item { padding: 60px 30px; border-right: none; border-bottom: 1px solid rgba(26,24,22,0.05); }
.ps-two-col-item:last-child { border-bottom: none; }
}
/* ═══════════════════════════════════════════════════
LIGHT THEME — HERO TEXT OVERRIDES
(text on photo backgrounds must stay light)
═══════════════════════════════════════════════════ */
#hero .hero-headline,
#hero .hero-headline .line2,
#hero .hero-descriptor,
#hero .hero-cta-ghost,
#hero .hero-scroll-label,
#hero .hero-location {
color: var(--white) !important;
}
#hero .hero-headline .line2 { color: var(--yellow) !important; }
#hero .hero-headline .line3 { color: var(--white) !important; }
#hero .hero-cta-primary { background: rgba(255,255,255,0.92); color: var(--ivory) !important; }
#hero .hero-cta-primary:hover { background: var(--green-dark); color: #fff !important; }
.page-hero-headline,
.page-hero-eyebrow,
.page-hero-sub,
.page-hero-location {
color: #ffffff !important;
}
.page-hero-headline em { color: var(--green) !important; }
.page-hero-breadcrumb a { color: rgba(255,255,255,0.6) !important; }
.page-hero-breadcrumb span { color: rgba(255,255,255,0.9) !important; }
.page-hero-breadcrumb-mobile a { color: rgba(26,24,22,0.5) !important; }
.page-hero-breadcrumb-mobile span { color: var(--green) !important; }
/* ── Section-specific text fixes ── */
/* Services section — on dark bg, text needs to stay readable */
#services .services-label{color:var(--green) !important}
#services .services-headline,
#services .services-note { color: var(--ivory) !important; }
#services .services-headline em { color: var(--green) !important; }
/* Doctors section on offblack bg */
#doctors .doctors-label,
#doctors .doctors-headline { color: var(--ivory) !important; }
#doctors .doctors-headline em { color: var(--green) !important; }
/* Testimonials on dark bg */
#testimonials .testi-label,
#testimonials .testi-headline,
#testimonials .testi-quote,
#testimonials .testi-author-name { color: var(--ivory) !important; }
/* BA gallery section — on dark bg */
#before-after .ba-section-label,
#before-after .ba-section-title { color: var(--ivory) !important; }
#before-after .ba-section-title em { color: var(--green) !important; }
/* CTA Banner inherits green bg, text stays white */
.ps-cta .ps-cta-headline,
.ps-cta .ps-cta-sub { color: #ffffff !important; }
/* Appointment form box — on offblack bg */
.appt-form-box .appt-form-title,
.appt-form-box .appt-form-title em { var(--green) !important }
.appt-form-box .form-field label { color: rgba(255,255,255,0.4) !important; }
.appt-form-box .form-field input,
.appt-form-box .form-field select,
.appt-form-box .form-field textarea { color: var(--ivory) !important; }
.appt-form-box .form-field input::placeholder,
.appt-form-box .form-field textarea::placeholder { color: rgba(255,255,255,0.2) !important; }
/* Philosophy / dark strips */
.ps-philosophy { background: var(--white) !important; }
.ps-philosophy .ps-philosophy-quote { color: var(--warm-grey) !important;}
.ps-philosophy .ps-philosophy-headline,
.ps-philosophy .ps-philosophy-headline em { color: var(--ivory) !important; }
.ps-philosophy .ps-philosophy-body { color: var(--warm-grey) !important; }
.ps-philosophy .ps-philosophy-label { color: var(--green) !important; }
/* Process steps section — dark bg strip */
.ps-process { background: var(--offblack) !important; }
.ps-process .ps-process-label,
.ps-process .ps-process-headline,
.ps-process .ps-process-headline em { color: var(--black) !important; }
.ps-process .ps-step-title { color: var(--black) !important; }
.ps-process .ps-step-desc { color: var(--warm-grey) !important; }
.ps-process .ps-step-num { background: var(--offblack) !important; }
/* Testimonial strip */
.ps-testi { background: var(--offblack) !important; }
.ps-testi .ps-testi-quote { color: rgba(255,255,255,0.8) !important; }
.ps-testi .ps-testi-author-name { color: var(--ivory) !important; }
.ps-testi .ps-testi-author-role { color: var(--warm-grey) !important; }
/* Doctor card on dark slider bg */
#doctors { background: var(--offblack) !important; }
/* Nav on light bg — fix appointment button text */
.nav-appointment { color: #ffffff !important; }
/* Mobile nav on white bg */
.nav-mobile a { color: var(--ivory) !important; }
.nav-mobile a:hover { color: var(--green) !important; }
.nav-burger span { background: var(--ivory) !important; }
/* About section dark bg — text stays readable */
#about { background: var(--offblack) !important; }
.about-label { color: var(--green) !important; }
/* Value cards on dark bg */
/* ── LIGHT SECTIONS — text should be dark ── */
/* Services section */
#services {
background: #ffffff !important;
border-top: 1px solid rgba(26,24,22,0.08) !important;
}
.services-label { color: rgba(26,24,22,0.4) !important; }
.services-headline { color: #1A1816 !important; }
.services-headline em { color: var(--green) !important; }
.services-note { color: rgba(26,24,22,0.45) !important; }
/* Before-After gallery — alternate light */
#before-after {
background: #FFFFFF !important;
border-top: 1px solid rgba(26,24,22,0.06) !important;
}
/* Appointment form section — light bg */
#appointment {
background:var(--offblack) !important;
border-top: 1px solid rgba(26,24,22,0.07) !important;
}
.appt-label { color: rgba(26,24,22,0.38) !important; }
.appt-headline { color: #1A1816 !important; }
.appt-headline em { color: var(--green) !important; }
.appt-subtext { color: var(--warm-grey) !important; }
.appt-contact-item { color: var(--warm-grey) !important; }
.appt-contact-item svg { color: var(--green) !important; }
.appt-contact-group-label { color: var(--green) !important; }
/* Journey section if present */
#journey {
background: #F2EDE6 !important;
border-top: 1px solid rgba(26,24,22,0.07) !important;
}
.journey-label { color: rgba(26,24,22,0.38) !important; }
.journey-headline { color: #1A1816 !important; }
.journey-headline em { color: var(--green) !important; }
.journey-body { color: rgba(26,24,22,0.55) !important; }
.journey-contact-item { color: rgba(26,24,22,0.55) !important; }
.journey-contact-item svg { color: var(--green) !important; }
.journey-contact-list { border-left-color: rgba(26,24,22,0.12) !important; }
.journey-cta { background: #1A1816 !important; color: #ffffff !important; }
.journey-cta:hover { background: var(--green-dark) !important; color: #ffffff !important; }
/* Footer — keep dark */
footer { background: #1A1816 !important; }
.footer-tagline { color: rgba(255,255,255,0.5) !important; }
.footer-col h4 { color: rgba(255,255,255,0.8) !important; }
.footer-col ul li a { color: rgba(255,255,255,0.5) !important; }
.footer-col ul li a:hover { color: var(--green) !important; }
.footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; }
.footer-copy { color: rgba(255,255,255,0.5) !important; }
.footer-legal a { color: rgba(255,255,255,0.5) !important; }
/* Contact page light sections */
.contact-section {
background: #ffffff !important;
}
.contact-info-label { color: var(--green) !important; }
.contact-info-headline { color: #1A1816 !important; }
.contact-info-headline em { color: var(--green) !important; }
.contact-info-sub { color: var(--warm-grey) !important; }
.contact-detail-group-label { color: var(--green) !important; }
.contact-detail-item span,
.contact-detail-item a { color: var(--warm-grey) !important; }
.contact-form-box {
background: var(--offblack) !important;
border-color: var(--offblack) !important;
}
.contact-form-title { color: #1A1816 !important; }
.contact-form-title em { color: var(--green) !important; }
.contact-map-label { color: var(--green) !important; }
/* About page light sections */
/* About CTA banner — keep green bg */
.about-cta { background: var(--green-dark) !important; }
.about-cta-headline { color: #ffffff !important; }
.about-cta-sub { color: rgba(255,255,255,0.7) !important; }
/* Services page hero text */
.services-page-label { color: rgba(26,24,22,0.35) !important; }
/* Doctors page */
.doctors-page-label { color: rgba(26,24,22,0.35) !important; }
/* Intro sections — light bg */
.ps-intro { }
.ps-intro-label { color: var(--green) !important; }
.ps-intro-headline { color: #1A1816 !important; }
.ps-intro-headline em { color: var(--green) !important; }
.ps-intro-divider { background: var(--green) !important; }
.ps-intro-body { color: rgba(26,24,22,0.55) !important; }
/* Procedures section — light bg */
.ps-procedures { }
.ps-procedures-label { color: var(--green) !important; }
.ps-procedures-headline { color: #1A1816 !important; }
.ps-procedures-headline em { color: var(--green) !important; }
.ps-procedures-note { color: rgba(26,24,22,0.45) !important; }
.ps-proc-card {
background: #efefef !important;
border-color: rgba(26,24,22,0.07) !important;
}
.ps-proc-card:hover { background: #ffffff !important; }
.ps-proc-number { color: rgba(26,24,22,0.07) !important; }
.ps-proc-title { color: #1A1816 !important; }
.ps-proc-desc { color: rgba(26,24,22,0.55) !important; }
.ps-proc-tag { color: var(--green) !important; border-color: rgba(77,138,15,0.35) !important; }
/* FAQ */
.ps-faq-label { color: var(--green) !important; }
.ps-faq-headline { color: #1A1816 !important; }
.ps-faq-headline em { color: var(--green) !important; }
.ps-faq-note { color: rgba(26,24,22,0.5) !important; }
.ps-faq-item { border-top-color: rgba(26,24,22,0.1) !important; }
.ps-faq-item:last-child { border-bottom-color: rgba(26,24,22,0.1) !important; }
.ps-faq-q { color: #1A1816 !important; }
.ps-faq-a { color: rgba(26,24,22,0.55) !important; }
/* Surgeon/intro right column */
.ps-surgeon-label { color: var(--green) !important; }
.ps-surgeon-name { color: #1A1816 !important; }
.ps-surgeon-title { color: rgba(26,24,22,0.5) !important; }
.ps-surgeon-bio { color: rgba(26,24,22,0.55) !important; }
.ps-surgeon-cred-dot { background: var(--green) !important; }
.ps-surgeon-cred-text { color: rgba(26,24,22,0.55) !important; }
.ps-surgeon-divider { background: var(--green) !important; }
.ps-surgeon-img-border { border-color: rgba(26,24,22,0.1) !important; }
.ps-intro-img-accent { border-color: rgba(77,138,15,0.3) !important; }
/* Gallery */
.ps-gallery-caption { color: rgba(255,255,255,0.6) !important; }
/* Credentials section */
.cred-num { color: #1A1816 !important; }
.cred-desc { color: rgba(26,24,22,0.35) !important; }
.about-rule { background: var(--green) !important; }
.about-body2 { color: rgba(26,24,22,0.38) !important; }
.about-link { color: var(--green) !important; }
/* About credentials grid */
.about-credentials { border-top-color: rgba(26,24,22,0.08) !important; }
/* Doctor cards */
.doctor-card-name { color: #1A1816 !important; }
.doctor-card-role { color: rgba(26,24,22,0.42) !important; }
.doctor-card-link { color: rgba(26,24,22,0.35) !important; }
.doctor-card:hover .doctor-card-name { color: var(--green) !important; }
.doctor-card:hover .doctor-card-link { color: var(--green) !important; }
/* Doc btn counter */
.doctors-label { color: rgba(26,24,22,0.38) !important; }
.doctors-headline { color: #1A1816 !important; }
.doctors-headline em { color: var(--green) !important; }
.doc-btn {
border-color: rgba(26,24,22,0.2) !important;
color: rgba(26,24,22,0.55) !important;
background: transparent !important;
}
.doc-btn:hover { border-color: var(--green) !important; color: var(--green) !important; }
.doc-counter { color: rgba(26,24,22,0.4) !important; }
.doc-dot { background: rgba(26,24,22,0.18) !important; }
.doc-dot.active { background: var(--green) !important; }
/* Testi dots */
.testi-dot { background: rgba(0,0,0,0.22) !important; }
.testi-dot.active { background: var(--green) !important; }
.testi-btn {
border-color: rgba(0,0,0,0.2) !important;
color: rgba(0,0,0,0.5) !important;
background: transparent !important;
}
.testi-btn:hover { border-color: var(--green) !important; color: var(--green) !important; }
/* Form fields on light sections */
#appointment .form-field,
.contact-section .form-field {
border-bottom-color: rgba(26,24,22,0.12) !important;
}
#appointment .form-field label,
.contact-section .form-field label { color: var(--green) !important}
#appointment .form-field input,
#appointment .form-field select,
#appointment .form-field textarea,
.contact-section .form-field input,
.contact-section .form-field select,
.contact-section .form-field textarea { color: #1A1816 !important; }
#appointment .form-field input::placeholder,
.contact-section .form-field input::placeholder { color: rgba(26,24,22,0.22) !important; }
#appointment .form-field select { color: rgba(26,24,22,0.45) !important; }
#appointment .form-field select option { background: #ffffff; color: #1A1816; }
.contact-section .form-field select option { background: #ffffff; color: #1A1816; }
/* Appointment page form card — dark bg */
.appt-form-card { background: var(--offblack) !important; border-color: rgba(255,255,255,0.07) !important; }
.appt-form-card-title { color: rgba(255,255,255,0.9) !important; }
.appt-form-card-title em { color: var(--green) !important; }
.appt-form-card-sub { color: rgba(255,255,255,0.35) !important; }
.appt-page-label { color: rgba(26,24,22,0.38) !important; }
.appt-page-headline { color: #1A1816 !important; }
.appt-page-headline em { color: var(--green) !important; }
.appt-page-body { color: rgba(26,24,22,0.5) !important; }
.appt-info-group-label { color: var(--green) !important; }
.appt-info-value { color: rgba(26,24,22,0.6) !important; }
.appt-info-value a { color: rgba(26,24,22,0.6) !important; }
.appt-info-block { border-top-color: rgba(26,24,22,0.07) !important; }
.appt-info-block:last-child { border-bottom-color: rgba(26,24,22,0.07) !important; }
.appt-info-icon { color: var(--green) !important; }
.appt-badge {
background: #F2EDE6 !important;
border-color: rgba(26,24,22,0.1) !important;
}
.appt-badge span { color: rgba(26,24,22,0.5) !important; }
.appt-badge svg { color: var(--green) !important; }
.appt-step-item { border-right-color: rgba(26,24,22,0.08) !important; }
.appt-step-text-label { color: rgba(26,24,22,0.35) !important; }
.appt-step-text-title { color: #1A1816 !important; }
/* Lightbox — stays dark */
.ba-lightbox { background: rgba(0,0,0,0.96) !important; }
.ba-lightbox-close { border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.75) !important; background: transparent !important; }
.ba-lightbox-prev, .ba-lightbox-next { border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.6) !important; background: transparent !important; }
.ba-lightbox-counter { color: rgba(255,255,255,0.35) !important; }
/* About page main section bg */
section > .about-story { background: #ffffff; }
section > .about-story .about-story-headline { color: #1A1816 !important; }
/* Doctor profile pages */
.doctor-profile-section { background: #ffffff !important; }
.appt-step-num {
border-color: rgba(77,138,15,0.4) !important;
color: var(--green) !important;
background: #F2EDE6 !important;
}
.appt-steps { background: #F2EDE6 !important; border-bottom-color: rgba(26,24,22,0.08) !important; }
.appt-page-section { background: #ffffff !important; }