/* =========================================================
DocInIndia — Design System
World-Class Care. India's Soul.
========================================================= */
:root {
/* Brand — Warm Family Letter palette */
--navy: #3D2E26; /* deep warm cocoa — for headlines */
--navy-700: #4A3930; /* slightly lighter cocoa */
--navy-50: #F4ECE0; /* very soft cream tint */
--gold: #B8593C; /* PRIMARY — terracotta clay */
--gold-soft: #D88468; /* soft clay */
--gold-deep: #8F4128; /* deep clay */
--bg: #F8F7F4; /* warm stone white */
--bg-warm: #F0EFEB; /* light stone for alt sections */
--ink: #2D2620; /* warm charcoal-brown */
--ink-soft: #6B5C4F; /* warm muted text */
--line: #E5E2DD; /* soft stone line */
--success: #6B7B4A; /* sage green (medical-calm) */
--amber: #D4A042; /* honey */
--amber-bg: #FCF1DB; /* honey background */
--amber-line: #E8C77A; /* honey edge */
--white: #FFFCF5; /* paper-white */
--rose: #E8B5A4; /* soft personal accent */
--sage-bg: #E5EBD9; /* soft sage tint for cards */
/* Type */
--serif: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
--sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--script: 'Caveat', 'Brush Script MT', cursive;
--display:'Bebas Neue', 'Arial Narrow', sans-serif;
/* Layout */
--maxw: 1200px;
--maxw-narrow: 820px;
--pad-x: clamp(20px, 4vw, 48px);
--section-y: clamp(72px, 9vw, 128px);
/* Effects — softer, warmer */
--radius: 22px;
--radius-sm: 14px;
--shadow-sm: 0 1px 2px rgba(61,46,38,.05), 0 8px 24px rgba(61,46,38,.06);
--shadow-md: 0 4px 14px rgba(61,46,38,.08), 0 22px 44px rgba(61,46,38,.08);
--shadow-gold: 0 18px 42px rgba(184,89,60,.22);
--ease: cubic-bezier(.22,.61,.36,1);
}
/* Handwritten accent + paper grain helpers */
.handwritten {
font-family: var(--script);
font-weight: 500;
font-size: 1.35em;
line-height: 1.05;
color: var(--gold);
letter-spacing: .005em;
}
.paper-grain {
background-image:
radial-gradient(circle at 20% 10%, rgba(184,89,60,.04) 0, transparent 40%),
radial-gradient(circle at 80% 60%, rgba(107,123,74,.04) 0, transparent 45%);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad-x);
}
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding: var(--section-y) 0; position: relative; }
.section--alt { background: var(--bg-warm); }
.section__head {
text-align: center;
max-width: 760px;
margin: 0 auto clamp(48px, 6vw, 80px);
}
.section__head--light { color: var(--white); }
.section__title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(2rem, 4.4vw, 3.4rem);
line-height: 1.12;
letter-spacing: -.01em;
margin: 8px 0 16px;
color: var(--navy);
}
.section__head--light .section__title { color: var(--white); }
.section__title em { color: var(--gold); font-style: italic; font-weight: 500; }
.section__sub {
font-size: 1.05rem;
color: var(--ink-soft);
max-width: 600px;
margin: 0 auto;
}
.section__sub--light { color: rgba(255,255,255,.85); }
.eyebrow {
font-family: var(--sans);
font-size: .76rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
margin: 0;
}
.eyebrow--light { color: var(--gold-soft); }
.eyebrow .squiggle { display: inline-block; margin-right: 8px; color: var(--gold); }
.rule {
display: block;
width: 88px;
height: 14px;
margin: 28px auto 0;
background: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.rule--gold { background-image: url("data:image/svg+xml;utf8,"); }
.rule--light { background-image: url("data:image/svg+xml;utf8,"); }
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
position: relative;
padding: 16px 36px;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: .18em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
cursor: pointer;
border: none;
border-radius: 0;
background: #2c2c2c;
color: #fff;
overflow: hidden;
transition: color .35s var(--ease), transform .25s var(--ease);
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: #fff;
transform: scaleX(0);
transform-origin: left;
transition: transform .4s cubic-bezier(.77,0,.175,1);
z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: #2c2c2c; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn > * { position: relative; z-index: 1; }
/* Ensure plain-text button labels sit above the ::before wipe */
.btn { z-index: 0; isolation: isolate; }
.btn--lg { padding: 18px 42px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--gold {
background: #2c2c2c;
color: #fff;
}
.btn--gold:hover { color: #2c2c2c; }
.btn--navy {
background: #1a1a1a;
color: #fff;
}
.btn--navy:hover { color: #1a1a1a; }
.btn--ghost {
background: transparent;
color: #2c2c2c;
border: 1px solid #bbb;
}
.btn--ghost::before { background: #2c2c2c; }
.btn--ghost:hover { color: #fff; border-color: #2c2c2c; }
.btn--ghost--light {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,.45);
}
.btn--ghost--light::before { background: #fff; }
.btn--ghost--light:hover { color: #222; border-color: #fff; }
.btn .arrow { transition: transform .25s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }
/* ---------- Split CTA — luxury three-part button ---------- */
.split-cta {
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
border: none;
background: none;
padding: 0;
}
.split-cta__label {
display: flex;
align-items: center;
padding: 10px 18px;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
background: #2c2c2c;
color: #fff;
transition: background .35s var(--ease);
}
.split-cta__sub {
display: flex;
align-items: center;
padding: 10px 14px;
font-family: var(--serif);
font-size: .78rem;
font-style: italic;
letter-spacing: .02em;
color: var(--ink-soft);
border: 1px solid var(--line);
border-left: none;
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.split-cta__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
align-self: stretch;
font-size: .95rem;
color: #fff;
background: var(--gold-deep);
transition: background .3s var(--ease);
}
.split-cta:hover .split-cta__label { background: #444; }
.split-cta:hover .split-cta__sub { color: var(--navy); border-color: var(--gold-soft); }
.split-cta:hover .split-cta__arrow { background: var(--gold); }
/* -- Light variant (on dark backgrounds like hero) -- */
.split-cta--light .split-cta__label { background: #fff; color: #1a1a1a; }
.split-cta--light .split-cta__sub {
color: rgba(255,255,255,.7);
border-color: rgba(255,255,255,.2);
background: transparent;
}
.split-cta--light:hover .split-cta__label { background: #eee; }
.split-cta--light:hover .split-cta__sub { color: #fff; border-color: rgba(255,255,255,.4); }
/* -- Ghost variant (on dark backgrounds, outlined) -- */
.split-cta--ghost .split-cta__label {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,.35);
}
.split-cta--ghost .split-cta__sub {
color: rgba(255,255,255,.55);
border-color: rgba(255,255,255,.15);
}
.split-cta--ghost .split-cta__arrow {
background: rgba(255,255,255,.1);
color: #fff;
}
.split-cta--ghost:hover .split-cta__label { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.split-cta--ghost:hover .split-cta__sub { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); }
.split-cta--ghost:hover .split-cta__arrow { background: rgba(255,255,255,.2); }
/* -- Block variant (full width, e.g. form submit) -- */
.split-cta--block {
width: 100%;
grid-column: 1 / -1;
}
.split-cta--block .split-cta__label { flex: 0 0 auto; }
.split-cta--block .split-cta__sub { flex: 1; justify-content: center; border-left: none; }
.split-cta--block .split-cta__arrow { flex: 0 0 52px; }
/* -- On dark section backgrounds (explore, contact) -- */
.explore .split-cta .split-cta__sub {
color: rgba(255,255,255,.6);
border-color: rgba(255,255,255,.15);
}
.explore .split-cta:hover .split-cta__sub { color: #fff; border-color: rgba(255,255,255,.35); }
.contact .split-cta--block .split-cta__sub {
color: rgba(255,255,255,.55);
border-color: rgba(255,255,255,.15);
}
.contact .split-cta--block:hover .split-cta__sub { color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 600px) {
.split-cta { flex-wrap: nowrap; }
.split-cta__label { flex: 1 1 auto; justify-content: center; font-size: .85rem; padding: 10px 16px; }
.split-cta__arrow { width: 38px; font-size: .9rem; }
.hero__ctas { flex-direction: row; gap: 10px; justify-content: center; }
}
/* ---------- Reveal animation ---------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* =========================================================
NAVBAR
========================================================= */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 18px;
padding-bottom: 18px;
}
.nav.is-scrolled {
background: rgba(248,247,244,.88);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
box-shadow: 0 1px 0 var(--line);
}
/* Logo */
.logo { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: #fff; letter-spacing: -.01em; }
.nav.is-scrolled .logo { color: var(--navy); }
.nav--dark .logo { color: var(--navy); }
.nav--dark .nav__links a { color: var(--ink); }
.nav--dark .nav__icon { color: var(--ink); }
.nav--dark .nav__toggle span { background: var(--ink); }
.logo__text { display: inline-flex; align-items: baseline; }
.logo__i { position: relative; }
.logo__dot {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(-8deg);
width: .35em;
height: .35em;
background: var(--gold);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
border-radius: 0;
}
.logo__india { color: var(--gold-soft); }
.nav.is-scrolled .logo__india { color: var(--gold); }
.logo--light { color: var(--white); }
/* Links */
.nav__links {
display: flex;
gap: 28px;
font-size: .95rem;
font-weight: 500;
}
.nav__links a {
color: rgba(255,255,255,.85);
position: relative;
}
.nav__links a:hover { color: #fff; }
.nav.is-scrolled .nav__links a { color: var(--ink-soft); }
.nav.is-scrolled .nav__links a:hover { color: var(--navy); }
.nav__links a::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -6px;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { padding: 10px 22px; font-size: .9rem; }
.nav__icons {
display: flex;
align-items: center;
gap: 14px;
}
.nav__icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.7);
transition: color .25s var(--ease), transform .25s var(--ease);
}
.nav__icon svg { width: 20px; height: 20px; }
.nav__icon:hover { color: #fff; transform: translateY(-2px); }
.nav.is-scrolled .nav__icon { color: #555; }
.nav.is-scrolled .nav__icon:hover { color: #222; }
/* -- Dark nav for light-background pages -- */
.nav--dark .logo { color: var(--navy); }
.nav--dark .logo__india { color: var(--gold); }
.nav--dark .nav__links a { color: var(--ink-soft); }
.nav--dark .nav__links a:hover { color: var(--navy); }
.nav--dark .nav__icon { color: #555; }
.nav--dark .nav__icon:hover { color: #222; }
.nav--dark .nav__toggle span { background: var(--navy); }
.nav__toggle {
display: none;
width: 42px;
height: 42px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 8px;
}
.nav__toggle span {
display: block;
width: 22px;
height: 2px;
background: #fff;
transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled .nav__toggle span { background: var(--navy); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
display: none;
flex-direction: column;
gap: 4px;
padding: 12px var(--pad-x) 24px;
background: var(--bg);
border-top: 1px solid var(--line);
}
.nav__mobile > a {
padding: 14px 0;
font-weight: 500;
border-bottom: 1px solid var(--line);
color: var(--navy);
}
.nav__mobile .btn { margin-top: 12px; align-self: flex-start; }
.nav__mobile.is-open { display: flex; }
.nav__mobile-icons {
display: flex;
gap: 12px;
margin-top: 16px;
padding-top: 8px;
}
.nav__mobile-icon {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 10px;
background: #1e1e1e;
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
color: rgba(255,255,255,.8);
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__mobile-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav__mobile-icon:hover { background: #2a2a2a; color: #fff; }
/* =========================================================
HERO — warm cream paper, organic accents, no photo
========================================================= */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
color: var(--white);
overflow: hidden;
isolation: isolate;
background: var(--ink);
}
.hero__bg {
position: absolute; inset: 0; z-index: -3;
background: url('../assets/hero-bg.webp') center center / cover no-repeat;
}
.hero__overlay {
position: absolute; inset: 0; z-index: -2;
background: transparent;
}
.hero__grain {
position: absolute; inset: 0; z-index: -1;
background-image: url("data:image/svg+xml;utf8,");
opacity: .5;
pointer-events: none;
}
.hero__content {
padding: 140px 0 100px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
.hero__title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.5rem, 6.2vw, 5.2rem);
line-height: 1.06;
letter-spacing: -.018em;
margin: 18px 0 22px;
max-width: 18ch;
color: #fff;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero__title em {
font-style: italic;
color: #fff;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero__sub {
font-size: clamp(1.05rem, 1.6vw, 1.22rem);
font-weight: 400;
max-width: 620px;
color: rgba(255,255,255,.88);
margin: 0 0 36px;
line-height: 1.65;
font-family: var(--serif);
font-style: italic;
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: flex-end;
margin-bottom: 56px;
}
.hero__trust {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-wrap: wrap;
gap: 28px;
font-size: .9rem;
color: rgba(255,255,255,.85);
font-weight: 400;
}
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; display: inline-block; }
.hero__scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: .72rem;
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
.hero__scroll-line {
width: 1px;
height: 44px;
background: linear-gradient(180deg, transparent, var(--gold));
position: relative;
overflow: hidden;
}
.hero__scroll-line::before {
content: "";
position: absolute;
top: -44px; left: 0;
width: 1px; height: 44px;
background: var(--gold);
animation: scrollDown 2.4s var(--ease) infinite;
}
@keyframes scrollDown {
0% { top: -44px; }
100% { top: 44px; }
}
/* Hero stagger */
.hero .reveal { transition-duration: .9s; }
.hero .reveal:nth-child(1) { transition-delay: .15s; }
.hero .reveal:nth-child(2) { transition-delay: .3s; }
.hero .reveal:nth-child(3) { transition-delay: .45s; }
.hero .reveal:nth-child(4) { transition-delay: .6s; }
.hero .reveal:nth-child(5) { transition-delay: .75s; }
/* =========================================================
STATS
========================================================= */
.stats {
background: var(--navy);
color: var(--white);
padding: clamp(48px, 6vw, 72px) 0;
position: relative;
overflow: hidden;
}
.stats::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.stat__num {
font-family: var(--display);
font-size: clamp(2.6rem, 5vw, 4.2rem);
line-height: 1;
color: var(--gold);
letter-spacing: .02em;
}
.stat__label {
font-size: .85rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
margin-top: 10px;
}
/* =========================================================
SERVICES
========================================================= */
.services {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.service {
position: relative;
background: var(--white);
border-radius: var(--radius);
padding: 40px 36px 36px;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
overflow: hidden;
}
.service::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gold);
transform-origin: left;
transition: transform .4s var(--ease);
}
.service:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-gold);
}
.service__icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(140deg, var(--bg-warm), var(--bg));
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.service__icon svg { width: 32px; height: 32px; }
.service__title {
font-family: var(--serif);
font-weight: 500;
font-size: 1.7rem;
margin: 0 0 10px;
color: var(--navy);
}
.service__desc {
font-size: .98rem;
color: var(--ink-soft);
margin: 0 0 20px;
line-height: 1.6;
}
.service__list {
list-style: none;
padding: 0; margin: 0 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
font-size: .9rem;
color: var(--ink);
}
.service__list li {
position: relative;
padding-left: 18px;
}
.service__list li::before {
content: "";
position: absolute;
left: 0; top: .55em;
width: 8px; height: 1px;
background: var(--gold);
}
.service__price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
padding-top: 20px;
margin-top: auto;
border-top: 1px solid var(--line);
}
.service__from { font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }
.service__amount { font-family: var(--display); font-size: 2.2rem; color: var(--navy); line-height: 1; }
.service__vs { font-size: .85rem; color: var(--ink-soft); }
.service__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 22px;
font-weight: 600;
color: var(--gold-deep);
font-size: .95rem;
}
.service__cta .arrow { transition: transform .25s var(--ease); }
.service:hover .service__cta .arrow { transform: translateX(4px); }
/* =========================================================
HOW IT WORKS
========================================================= */
.steps {
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
position: relative;
}
.steps::before {
content: "";
position: absolute;
top: 32px;
left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
z-index: 0;
}
.step {
position: relative;
text-align: center;
z-index: 1;
}
.step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
border-radius: 50%;
background: var(--bg);
border: 1.5px solid var(--gold);
color: var(--navy);
font-family: var(--display);
font-size: 1.6rem;
margin: 0 auto 24px;
position: relative;
}
.step__num::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px dashed rgba(184,89,60,.4);
}
.section--alt .step__num { background: var(--bg-warm); }
.step__title {
font-family: var(--serif);
font-weight: 500;
font-size: 1.4rem;
margin: 0 0 12px;
color: var(--navy);
}
.step__desc {
font-size: .98rem;
color: var(--ink-soft);
max-width: 320px;
margin: 0 auto;
line-height: 1.65;
}
.how__cta { text-align: center; margin-top: 64px; }
/* =========================================================
EXPLORE INDIA — kept small, warm, photo-free
========================================================= */
.explore {
position: relative;
padding: var(--section-y) 0;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.explore__bg {
position: absolute; inset: 0; z-index: -1;
background: url('https://wallpapercave.com/wp/wp6736660.jpg') center center / cover no-repeat;
pointer-events: none;
}
.explore__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(20,30,40,.55) 0%, rgba(20,30,40,.7) 100%);
}
.travel-notes {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.travel-note {
position: relative;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: var(--radius-sm);
padding: 28px 26px 30px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0,0,0,.15);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
overflow: hidden;
}
.travel-note::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-soft), var(--rose));
opacity: .85;
}
.travel-note:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.travel-note:nth-child(2)::before { background: linear-gradient(90deg, var(--success), var(--gold-soft)); }
.travel-note:nth-child(3)::before { background: linear-gradient(90deg, var(--amber), var(--gold)); }
.travel-note__tag {
display: inline-block;
font-family: var(--script);
font-size: 1.35rem;
color: var(--gold-soft);
margin: 0 0 6px;
letter-spacing: .005em;
}
.travel-note__name {
font-family: var(--serif);
font-weight: 500;
font-size: 1.35rem;
line-height: 1.25;
color: #fff;
margin: 0 0 10px;
}
.travel-note__desc {
font-size: .95rem;
color: rgba(255,255,255,.75);
line-height: 1.6;
margin: 0;
}
.explore .section__title { color: #fff; }
.explore .section__title em { color: var(--gold-soft); }
.explore .section__sub { color: rgba(255,255,255,.8); }
.explore .eyebrow { color: var(--gold-soft); }
.explore .rule { background: rgba(255,255,255,.25); }
.explore__cta { text-align: center; }
.explore__cta .btn--ghost {
color: #fff;
border-color: rgba(255,255,255,.4);
}
.explore__cta .btn--ghost:hover {
background: rgba(255,255,255,.08);
border-color: #fff;
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial {
background: var(--white);
border-radius: var(--radius);
padding: 36px 32px;
margin: 0;
box-shadow: var(--shadow-sm);
position: relative;
display: flex;
flex-direction: column;
}
.testimonial::before {
content: "\201C";
position: absolute;
top: 14px;
right: 28px;
font-family: var(--serif);
font-size: 5rem;
line-height: 1;
color: var(--gold);
opacity: .18;
}
.testimonial__stars {
color: var(--gold);
letter-spacing: .15em;
font-size: 1.05rem;
margin-bottom: 16px;
}
.testimonial__quote {
font-family: var(--serif);
font-size: 1.18rem;
line-height: 1.5;
color: var(--navy);
margin: 0 0 24px;
font-style: italic;
font-weight: 400;
flex: 1;
}
.testimonial__author {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.testimonial__name { font-weight: 600; color: var(--navy); font-size: .95rem; }
.testimonial__meta { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }
/* Avatar placeholders — gradient initials */
.avatar {
width: 48px; height: 48px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, var(--navy), var(--gold));
position: relative;
}
.avatar::after {
content: attr(data-initials);
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--white);
font-weight: 600;
font-size: .9rem;
}
.avatar--james { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); }
.avatar--james::after { content: "JT"; position: absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:600; }
.avatar--sarah { background: linear-gradient(135deg, var(--gold), var(--success)); }
.avatar--sarah::after { content: "SM"; position: absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:600; }
.avatar--robert { background: linear-gradient(135deg, var(--success), var(--navy)); }
.avatar--robert::after { content: "RK"; position: absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:600; }
/* =========================================================
FAQ
========================================================= */
.faq {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq__item {
background: #1e1e1e;
border-radius: 4px;
border: 1px solid rgba(255,255,255,.08);
overflow: hidden;
transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq__item[open] {
box-shadow: 0 8px 24px rgba(0,0,0,.2);
border-color: rgba(212,160,66,.3);
}
.faq__item summary {
list-style: none;
cursor: pointer;
padding: 22px 28px;
font-family: var(--serif);
font-weight: 500;
font-size: 1.12rem;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+";
font-family: var(--sans);
font-weight: 300;
font-size: 1.6rem;
color: var(--gold);
width: 28px; height: 28px;
display: grid; place-items: center;
flex-shrink: 0;
transition: transform .3s var(--ease);
}
.faq__item[open] summary::after {
content: "–";
transform: rotate(180deg);
}
.faq__body {
padding: 0 28px 24px;
color: rgba(255,255,255,.6);
font-size: .98rem;
line-height: 1.7;
}
.faq__body p { margin: 0; }
/* =========================================================
CONTACT
========================================================= */
.contact {
position: relative;
padding: var(--section-y) 0;
background: #1a1a1a;
color: var(--white);
overflow: hidden;
isolation: isolate;
}
.contact::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.contact__grain {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(800px 400px at 90% 10%, rgba(255,255,255,.03), transparent 60%),
radial-gradient(600px 300px at 10% 90%, rgba(255,255,255,.02), transparent 60%);
}
.contact__grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 64px;
align-items: start;
}
.contact__title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.12;
margin: 10px 0 16px;
}
.contact__title em { color: var(--gold); font-style: italic; }
.contact__sub {
font-size: 1.05rem;
color: rgba(255,255,255,.82);
max-width: 440px;
margin: 0 0 32px;
}
.contact__trust {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
font-size: .95rem;
color: rgba(255,255,255,.88);
}
.contact__trust a { color: var(--gold-soft); border-bottom: 1px dotted var(--gold-soft); }
.contact__trust a:hover { color: var(--gold); }
.contact__icon { display: inline-block; margin-right: 6px; }
/* Form */
.contact__form {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 2px;
padding: 48px 40px 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 24px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.field { display: flex; flex-direction: column; gap: 0; position: relative; }
.field--full { grid-column: 1 / -1; }
.field label {
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
font-weight: 600;
margin-bottom: 10px;
transition: color .25s var(--ease);
}
.field:focus-within label { color: #fff; }
.field .optional { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.3); font-weight: 400; font-size: 10px; }
.field input,
.field select,
.field textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,.2);
border-radius: 0;
padding: 10px 0;
color: #fff;
font-family: var(--sans);
font-size: 1rem;
transition: border-color .3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.25); }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-bottom-color: #fff;
}
.field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.5)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: right 4px center;
background-repeat: no-repeat;
padding-right: 24px;
cursor: pointer;
}
.field select option { background: #1a1a1a; color: #fff; }
.field textarea { resize: vertical; min-height: 80px; }
.contact__form .btn { grid-column: 1 / -1; }
.form__success {
grid-column: 1 / -1;
margin: 0;
padding: 14px 18px;
background: rgba(45,122,79,.18);
border: 1px solid rgba(45,122,79,.5);
border-radius: 10px;
color: #B7E5C7;
font-size: .95rem;
}
/* =========================================================
FOOTER
========================================================= */
.footer {
background: #1a1a1a;
color: rgba(255,255,255,.65);
padding: 80px 0 30px;
font-size: .92rem;
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__brand .logo { color: var(--white); display: inline-block; margin-bottom: 14px; }
.footer__tag {
font-family: var(--serif);
font-style: italic;
color: rgba(255,255,255,.6);
margin: 0 0 22px;
font-size: 1rem;
}
.footer__social { display: flex; gap: 12px; }
.social {
width: 38px; height: 38px;
display: grid; place-items: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 50%;
color: rgba(255,255,255,.7);
transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social svg { width: 16px; height: 16px; }
.social:hover { background: #555; color: #fff; transform: translateY(-2px); border-color: #555; }
.footer__col h4 {
font-family: var(--sans);
font-size: .8rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
margin: 0 0 18px;
font-weight: 600;
}
.footer__col a {
display: block;
padding: 6px 0;
color: rgba(255,255,255,.7);
font-size: .95rem;
}
.footer__col a:hover { color: #fff; }
.footer__bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: .82rem;
color: rgba(255,255,255,.45);
}
.footer__disclaimer { max-width: 640px; }
/* =========================================================
WhatsApp FAB
========================================================= */
.whatsapp-fab {
position: fixed;
bottom: 22px; right: 22px;
width: 56px; height: 56px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: grid;
place-items: center;
box-shadow: 0 8px 24px rgba(37,211,102,.45);
z-index: 90;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover {
transform: scale(1.06);
box-shadow: 0 12px 30px rgba(37,211,102,.6);
}
/* =========================================================
SUB-PAGE STYLES (shared)
========================================================= */
.subhero {
position: relative;
padding: 180px 0 96px;
color: var(--white);
overflow: hidden;
isolation: isolate;
}
.subhero__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center;
}
.subhero__overlay {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg, rgba(61,46,38,.88) 0%, rgba(61,46,38,.62) 100%);
}
.subhero__title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(2.2rem, 5.4vw, 4.4rem);
line-height: 1.08;
letter-spacing: -.01em;
margin: 14px 0 18px;
max-width: 18ch;
}
.subhero__title em { color: var(--gold-soft); font-style: italic; }
.subhero__sub {
font-size: clamp(1rem, 1.4vw, 1.18rem);
color: rgba(255,255,255,.86);
max-width: 580px;
margin: 0 0 32px;
font-weight: 300;
}
.subhero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.crumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: .82rem;
color: rgba(255,255,255,.7);
letter-spacing: .08em;
text-transform: uppercase;
margin: 0;
}
.crumbs a { color: var(--gold-soft); }
.crumbs a:hover { color: var(--gold); }
/* Comparison table */
.compare {
width: 100%;
border-collapse: collapse;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
font-size: .95rem;
}
.compare th, .compare td {
padding: 18px 20px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.compare thead th {
background: var(--navy);
color: var(--white);
font-family: var(--sans);
font-weight: 600;
font-size: .82rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare tbody tr:hover { background: var(--bg); }
.compare .cost { font-family: var(--display); font-size: 1.4rem; color: var(--navy); }
.compare .cost--india { color: var(--success); }
.compare .save { color: var(--success); font-weight: 600; }
@media (max-width: 768px) {
.compare { font-size: .85rem; }
.compare th, .compare td { padding: 14px 14px; }
.compare .cost { font-size: 1.1rem; }
}
@media (max-width: 480px) {
.compare th, .compare td { padding: 12px 10px; white-space: nowrap; }
.compare .cost { font-size: .95rem; }
.compare thead th { font-size: .7rem; letter-spacing: .08em; }
}
/* Recovery timeline */
.timeline {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 22px; top: 12px; bottom: 12px;
width: 2px;
background: linear-gradient(180deg, var(--gold), var(--gold-soft));
}
.timeline__item {
position: relative;
padding: 18px 0 18px 64px;
}
.timeline__dot {
position: absolute;
left: 14px; top: 22px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--gold);
}
.timeline__when {
font-family: var(--display);
font-size: 1.2rem;
color: var(--gold-deep);
letter-spacing: .04em;
margin: 0 0 4px;
}
.timeline__what {
font-family: var(--serif);
font-weight: 500;
font-size: 1.15rem;
color: var(--navy);
margin: 0 0 6px;
}
.timeline__detail { color: var(--ink-soft); margin: 0; }
/* Hospital partners */
.partners {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.partner {
background: var(--white);
border-radius: var(--radius-sm);
padding: 22px 24px;
box-shadow: var(--shadow-sm);
border-top: 3px solid var(--gold);
}
.partner__name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--navy); margin: 0 0 4px; }
.partner__city { font-size: .85rem; color: var(--ink-soft); margin: 0 0 10px; }
.partner__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
background: rgba(107,123,74,.14);
color: var(--success);
}
.badge--gold { background: rgba(184,89,60,.14); color: var(--gold-deep); }
/* Two-col layout for sub-pages */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
/* Before/After (placeholder swatches) */
.ba {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ba__panel {
aspect-ratio: 4/5;
border-radius: var(--radius);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.ba__panel::after {
content: attr(data-label);
position: absolute;
top: 14px; left: 14px;
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--white);
background: rgba(61,46,38,.7);
padding: 4px 10px;
border-radius: 999px;
backdrop-filter: blur(6px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
.nav__links { gap: 18px; font-size: .9rem; }
.stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
.services { gap: 22px; }
.testimonials { grid-template-columns: 1fr 1fr; }
.testimonial:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
.travel-notes { grid-template-columns: 1fr 1fr; }
.travel-note:last-child { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; width: 100%; }
.contact__grid { grid-template-columns: 1fr; gap: 40px; }
.footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.two-col { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
body { font-size: 16px; }
.nav__links, .nav__cta { display: none; }
.nav__toggle { display: flex; }
.nav__icons { gap: 10px; }
.nav__icon { width: 32px; height: 32px; }
.nav__icon svg { width: 18px; height: 18px; }
.hero { min-height: 92vh; }
.hero__content { padding: 120px 0 60px; align-items: center; text-align: center; }
.hero__title { max-width: 100%; }
.hero__sub { max-width: 100%; }
.hero__ctas { justify-content: center; width: 100%; }
.hero__trust { justify-content: center; gap: 14px 22px; font-size: .82rem; }
.section__title { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.section__sub { font-size: .95rem; }
.eyebrow { font-size: .68rem; }
.services { grid-template-columns: 1fr; }
.service__list { grid-template-columns: 1fr; }
.service { padding: 32px 28px; }
.steps { grid-template-columns: 1fr; gap: 40px; }
.steps::before { display: none; }
.travel-notes { grid-template-columns: 1fr; }
.travel-note:last-child { grid-column: auto; max-width: none; }
.testimonials { grid-template-columns: 1fr; }
.testimonial:last-child { max-width: none; }
.contact__form { grid-template-columns: 1fr; padding: 28px 22px; }
.footer__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
.footer__bottom { flex-direction: column; text-align: center; }
.stats__grid { gap: 32px 16px; }
.stat__num { font-size: 2.4rem; }
.faq__item summary { padding: 18px 20px; font-size: 1rem; }
.faq__body { padding: 0 20px 20px; }
.whatsapp-fab { width: 50px; height: 50px; bottom: 16px; right: 16px; }
.whatsapp-fab svg { width: 24px; height: 24px; }
.page-hero__title { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.page-hero__sub { font-size: 1rem; }
.three-col { grid-template-columns: 1fr; gap: 16px; }
.three-col__cell { padding: 22px 20px; }
.rebeka-grid__story { font-size: .95rem; }
.rebeka-cta { font-size: .8rem; }
.split-cta__label { font-size: 9px; padding: 14px 18px; }
.split-cta__sub { font-size: 8px; padding: 14px 14px; }
.split-cta__arrow { width: 38px; font-size: .85rem; }
}
@media (max-width: 480px) {
.hero__title { font-size: 1.55rem; }
.hero__sub { font-size: .95rem; }
.hero__ctas { flex-direction: row; align-items: center; gap: 8px; }
.hero__ctas .split-cta { flex: 1; }
.stats__grid { grid-template-columns: 1fr 1fr; }
.section { padding: clamp(48px, 7vw, 72px) 0; }
.section__title { font-size: 1.45rem; }
.voice-card { padding: 24px 20px 22px; gap: 16px; }
.voice-card__quote { font-size: .95rem; }
.voice-card__stat-num { font-size: 1.5rem; }
.timeline__content { padding: 4px 16px 16px; }
.timeline__title { font-size: .95rem; }
.timeline__copy { font-size: .82rem; }
.founder--compact .founder__letter { font-size: .95rem; }
.doctor__name { font-size: 1.3rem; }
.doctor__role { font-size: .8rem; }
.doctor__label { font-size: .65rem; }
.doctor__facts { font-size: .88rem; }
.doctor__connection { font-size: .92rem; }
.rebeka-numbers { padding: 20px 18px; }
.rebeka-numbers__value { font-size: 1.4rem; }
.faq__item summary { padding: 16px 18px; font-size: .92rem; }
.faq__body { padding: 0 18px 18px; font-size: .9rem; }
.page-hero { padding: 100px 0 40px; }
.page-hero__title { font-size: 1.6rem; }
.page-hero__sub { font-size: .92rem; }
.nav__icons { gap: 8px; }
.nav__icon { width: 30px; height: 30px; }
.nav__icon svg { width: 16px; height: 16px; }
}
/* =========================================================
v5 — "We Treat You Like Family" components
========================================================= */
/* ---------- What We Actually Do — comparison table ---------- */
.compare-flow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
}
.compare-flow__col {
padding: 36px 32px;
}
.compare-flow__col--others {
background: var(--bg-warm);
border-right: 1px solid var(--line);
color: var(--ink-soft);
}
.compare-flow__col--us {
background: var(--white);
position: relative;
}
.compare-flow__col--us::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gold);
}
.compare-flow__head {
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 24px;
color: var(--ink-soft);
}
.compare-flow__col--us .compare-flow__head { color: var(--gold-deep); }
.compare-flow__list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.compare-flow__list li {
font-size: .98rem;
line-height: 1.5;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.compare-flow__list li:last-child { border-bottom: none; padding-bottom: 0; }
.compare-flow__col--us .compare-flow__list li {
color: var(--ink);
font-weight: 500;
}
.compare-flow__col--others .compare-flow__list li {
text-decoration: line-through;
text-decoration-color: rgba(107,107,107,.35);
text-decoration-thickness: 1px;
}
.compare-flow__note {
margin-top: 36px;
font-family: var(--serif);
font-style: italic;
font-size: 1.1rem;
line-height: 1.7;
color: var(--ink);
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ---------- Founder Story — letter layout ---------- */
.founder {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 64px;
align-items: start;
}
.founder__photo {
position: sticky;
top: 100px;
aspect-ratio: 4/5;
border-radius: var(--radius);
background:
radial-gradient(circle at 30% 25%, rgba(216,132,104,.45), transparent 55%),
radial-gradient(circle at 75% 75%, rgba(212,160,66,.30), transparent 60%),
linear-gradient(135deg, var(--bg-warm), #EAD9C2);
box-shadow: var(--shadow-md);
overflow: hidden;
display: grid;
place-items: center;
text-align: center;
padding: 32px;
}
.founder__photo::before {
content: "AM";
display: block;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(4rem, 9vw, 7.5rem);
color: rgba(184,89,60,.55);
line-height: 1;
letter-spacing: -.02em;
}
.founder__photo::after {
content: "Abhi Malik";
position: absolute;
bottom: 28px;
left: 0; right: 0;
font-family: var(--script);
font-size: 1.6rem;
color: var(--gold-deep);
font-weight: 600;
text-align: center;
letter-spacing: .005em;
}
.founder__letter {
font-family: var(--serif);
font-size: 1.18rem;
line-height: 1.75;
color: var(--ink);
}
.founder__letter p {
margin: 0 0 22px;
}
.founder__letter p:first-child::first-letter {
font-family: var(--serif);
font-size: 3.6rem;
font-weight: 600;
float: left;
line-height: .9;
margin: 6px 10px 0 0;
color: var(--gold);
}
.founder__sign {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--line);
font-family: var(--serif);
font-style: italic;
color: var(--navy);
}
.founder__sign strong {
display: block;
font-style: normal;
font-weight: 600;
font-size: 1.05rem;
margin-bottom: 2px;
}
/* ---------- Proof point cards (Father, Dentist, Cousin) ---------- */
.proof-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 56px;
}
.proof-card {
background: var(--white);
border-radius: var(--radius-sm);
padding: 26px 24px;
border-top: 3px solid var(--gold);
box-shadow: var(--shadow-sm);
}
.proof-card__icon {
font-size: 1.8rem;
margin-bottom: 8px;
}
.proof-card__who {
font-family: var(--sans);
font-size: .76rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 600;
margin: 0 0 4px;
}
.proof-card__what {
font-family: var(--serif);
font-weight: 500;
font-size: 1.2rem;
color: var(--navy);
margin: 0 0 10px;
}
.proof-card__quote {
font-family: var(--serif);
font-style: italic;
color: var(--ink-soft);
font-size: .98rem;
margin: 0;
line-height: 1.5;
}
/* ---------- Mother & Friend story — full bleed amber ---------- */
.mother-story {
background: var(--amber-bg);
padding: var(--section-y) 0;
position: relative;
border-top: 1px solid var(--amber-line);
border-bottom: 1px solid var(--amber-line);
}
.mother-story::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--amber);
}
.mother-story__head {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.mother-story__eyebrow {
font-family: var(--sans);
font-size: .76rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--amber);
font-weight: 700;
margin: 0 0 12px;
}
.mother-story__title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
line-height: 1.15;
color: var(--navy);
margin: 0 0 14px;
}
.mother-story__title em { color: var(--amber); font-style: italic; }
.mother-story__sub {
font-family: var(--serif);
font-style: italic;
color: var(--ink-soft);
font-size: 1.1rem;
margin: 0;
}
.contrast {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
margin-bottom: 48px;
}
.contrast__col {
padding: 40px 36px;
display: flex;
flex-direction: column;
}
.contrast__col--mother {
background: linear-gradient(180deg, #FAEBD0 0%, #FCF4E5 100%);
border-right: 1px solid var(--amber-line);
}
.contrast__col--friend {
background: linear-gradient(180deg, #E7F1EA 0%, #F4F8F5 100%);
}
.contrast__who {
font-family: var(--sans);
font-size: .76rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 6px;
}
.contrast__col--mother .contrast__who { color: var(--amber); }
.contrast__col--friend .contrast__who { color: var(--success); }
.contrast__name {
font-family: var(--serif);
font-weight: 500;
font-size: 1.4rem;
color: var(--navy);
margin: 0 0 24px;
}
.contrast__list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
font-size: .98rem;
}
.contrast__list li {
padding: 10px 0;
border-bottom: 1px dashed rgba(107,107,107,.2);
}
.contrast__list li:last-child { border-bottom: none; }
.contrast__list strong {
display: block;
font-family: var(--sans);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 600;
margin-bottom: 4px;
}
.mother-story__body {
max-width: 720px;
margin: 0 auto;
font-family: var(--serif);
font-size: 1.1rem;
line-height: 1.75;
color: var(--ink);
}
.mother-story__body p { margin: 0 0 18px; }
.mother-story__callout {
max-width: 720px;
margin: 40px auto 0;
padding: 28px 32px;
background: var(--white);
border-left: 3px solid var(--amber);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
font-family: var(--serif);
font-style: italic;
color: var(--navy);
font-size: 1.05rem;
line-height: 1.6;
}
.mother-story__callout::before {
content: "💛";
display: block;
font-style: normal;
font-size: 1.4rem;
margin-bottom: 8px;
}
/* ---------- Doctor cards (modern sleek) ---------- */
.doctors {
display: flex;
flex-direction: column;
gap: 80px;
}
.doctor {
display: grid;
grid-template-columns: 160px 1fr;
gap: 40px;
align-items: start;
}
.doctor__photo {
width: 160px;
height: 160px;
border-radius: 50%;
background: #2c2c2c;
overflow: hidden;
flex-shrink: 0;
}
.doctor__photo::after { display: none; }
.doctor__body {
display: flex;
flex-direction: column;
gap: 0;
}
.doctor__head {
margin: 0 0 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.card-num {
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-deep);
display: block;
margin-bottom: 12px;
}
.doctor__name {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
color: var(--navy);
margin: 0 0 8px;
line-height: 1.15;
}
.doctor__role {
font-size: .95rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.5;
}
.doctor__role span {
display: block;
font-size: .82rem;
margin-top: 4px;
color: var(--ink-soft);
}
.doctor__block {
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.doctor__block:first-of-type {
border-top: none;
}
.doctor__label {
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 9px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 700;
margin: 0 0 10px;
}
.doctor__connection {
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
line-height: 1.6;
color: var(--ink);
margin: 0;
}
.doctor__crosslink {
display: inline-block;
margin-top: 8px;
font-size: .82rem;
color: var(--gold-deep);
border-bottom: 1px solid transparent;
transition: border-color .25s var(--ease);
}
.doctor__crosslink:hover { border-color: var(--gold-deep); }
.doctor__facts {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: .9rem;
color: var(--ink);
line-height: 1.5;
}
.doctor__facts li::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
background: var(--gold);
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
}
.doctor__facts strong {
font-family: var(--display);
color: var(--navy);
font-size: 1.1rem;
margin-right: 4px;
letter-spacing: .02em;
}
.doctor__cta {
margin-top: 28px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
background: #2c2c2c;
align-self: flex-start;
transition: background .3s var(--ease);
}
.doctor__cta:hover { background: #444; }
.doctor__cta .arrow { transition: transform .25s var(--ease); }
.doctor__cta:hover .arrow { transform: translateX(4px); }
.doctor--fortis .doctor__photo {
background: #2c2c2c;
}
.doctor--fortis .doctor__photo::before { display: none; }
.doctor__badge {
display: inline-block;
margin-top: 10px;
padding: 5px 14px;
background: rgba(44,44,44,.06);
color: var(--ink-soft);
border-radius: 2px;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.doctor__important {
margin-top: 0;
padding: 16px 20px;
background: rgba(44,44,44,.04);
border-left: 2px solid var(--ink-soft);
border-radius: 0;
font-size: .88rem;
color: var(--ink);
line-height: 1.55;
}
.doctor__important strong { color: var(--ink); display: block; font-size: 9px; font-family: "Josefin Sans", var(--sans), sans-serif; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.doctors__note {
text-align: center;
margin-top: 56px;
font-family: var(--serif);
font-style: italic;
color: var(--ink-soft);
font-size: 1.05rem;
line-height: 1.6;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
/* small link below dentist card -> mother story */
.doctor__crosslink {
display: inline-block;
margin-top: 6px;
font-size: .85rem;
color: var(--amber);
font-style: italic;
border-bottom: 1px dotted var(--amber);
}
.doctor__crosslink:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
/* ---------- Reviews ---------- */
.reviews {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.review {
background: var(--white);
border-radius: var(--radius);
padding: 32px 30px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review--full { grid-column: 1 / -1; }
.review--contrast {
background: var(--amber-bg);
border: 1px solid var(--amber-line);
grid-column: 1 / -1;
}
.review--contrast::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--amber);
border-radius: var(--radius) var(--radius) 0 0;
}
.review__head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.review--contrast .review__head { border-bottom-color: var(--amber-line); }
.review__avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy), var(--gold));
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--white);
font-family: var(--serif);
font-weight: 600;
font-size: 1.05rem;
}
.review--contrast .review__avatar {
background: linear-gradient(135deg, var(--amber), var(--gold-deep));
}
.review__who {
flex: 1;
min-width: 0;
}
.review__name {
font-family: var(--serif);
font-weight: 500;
color: var(--navy);
font-size: 1.05rem;
margin: 0 0 2px;
}
.review__meta {
font-size: .82rem;
color: var(--ink-soft);
margin: 0;
}
.review__stars {
color: var(--gold);
letter-spacing: .15em;
font-size: 1rem;
}
.review--contrast .review__stars { display: none; }
.review--contrast .review__contrast-flag {
font-size: .72rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--amber);
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.review__body {
font-family: var(--serif);
font-size: 1.05rem;
line-height: 1.65;
color: var(--ink);
margin: 0;
font-style: italic;
}
.review__body p { margin: 0 0 14px; }
.review__body p:last-child { margin-bottom: 0; }
.review__signoff {
font-family: var(--serif);
font-style: italic;
color: var(--navy);
font-size: 1rem;
margin: 0;
font-weight: 500;
}
/* ---------- Review gallery (photos & videos) ---------- */
.review__gallery {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.review__gallery-label {
margin: 0 0 12px;
font-family: var(--sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.review__gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.review__gallery-grid img,
.review__gallery-grid video {
width: 100%;
border-radius: 8px;
object-fit: cover;
aspect-ratio: 4/3;
background: #000;
cursor: pointer;
transition: transform .2s var(--ease);
}
.review__gallery-grid img:hover,
.review__gallery-grid video:hover {
transform: scale(1.03);
}
@media (max-width: 480px) {
.review__gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.review__warm-note {
margin: 0;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: .82rem;
color: var(--ink-soft);
font-style: italic;
}
.review--contrast .review__warm-note {
border-top-color: var(--amber-line);
color: var(--gold-deep);
background: rgba(255,255,255,.5);
margin: 0 -30px -32px;
padding: 14px 30px;
border-radius: 0 0 var(--radius) var(--radius);
}
.reviews__intro {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
padding: 18px 24px;
background: rgba(184,89,60,.08);
border-left: 3px solid var(--gold);
border-radius: 6px;
font-family: var(--serif);
font-style: italic;
color: var(--ink);
font-size: .98rem;
line-height: 1.6;
text-align: left;
}
.reviews__outro {
text-align: center;
margin-top: 48px;
font-family: var(--serif);
font-style: italic;
color: var(--ink-soft);
font-size: 1.02rem;
line-height: 1.65;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* ---------- 7-step journey ---------- */
.journey {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.journey::before {
content: "";
position: absolute;
left: 22px; top: 22px; bottom: 22px;
width: 2px;
background: linear-gradient(180deg, var(--gold), var(--gold-soft));
}
.journey__step {
position: relative;
padding: 18px 0 32px 70px;
}
.journey__step:last-child { padding-bottom: 0; }
.journey__num {
position: absolute;
left: 0; top: 18px;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--bg);
border: 1.5px solid var(--gold);
display: grid;
place-items: center;
font-family: var(--display);
color: var(--navy);
font-size: 1.2rem;
z-index: 1;
}
.section--alt .journey__num { background: var(--bg-warm); }
.journey__title {
font-family: var(--serif);
font-weight: 500;
font-size: 1.4rem;
color: var(--navy);
margin: 0 0 8px;
}
.journey__desc {
font-size: 1rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.65;
max-width: 640px;
}
/* ---------- Sub-page hero (clean minimal) ---------- */
.page-hero {
position: relative;
min-height: 52vh;
display: flex;
align-items: center;
padding: clamp(140px, 16vw, 200px) 0 clamp(60px, 8vw, 100px);
color: var(--ink);
isolation: isolate;
background: var(--bg);
}
.page-hero::before {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.page-hero__crumbs {
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 24px;
}
.page-hero__crumbs a { color: var(--gold); }
.page-hero__crumbs a:hover { color: var(--gold-deep); }
.page-hero__content {
max-width: 880px;
position: relative;
}
.page-hero__title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.08;
margin: 16px 0 22px;
color: var(--navy);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.page-hero__title em {
color: var(--gold);
font-style: italic;
font-weight: 400;
}
.page-hero__sub {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.05rem, 1.6vw, 1.22rem);
line-height: 1.65;
color: var(--ink-soft);
max-width: 720px;
margin: 0 0 32px;
}
.page-hero .eyebrow--light {
color: var(--gold);
}
/* -- Dark page hero -- */
.page-hero--dark {
background: #1a1a1a !important;
color: #fff;
}
.page-hero--dark .page-hero__title { color: #fff; }
.page-hero--dark .page-hero__title em { color: var(--gold); }
.page-hero--dark .page-hero__sub { color: rgba(255,255,255,.7); }
.page-hero--dark .page-hero__crumbs { color: rgba(255,255,255,.5); }
.page-hero--dark .page-hero__crumbs a { color: var(--gold); }
.page-hero--dark::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
/* ---------- Honest hero badge ---------- */
.hero__badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
font-size: .85rem;
color: rgba(255,255,255,.9);
margin-top: 36px;
font-weight: 500;
box-shadow: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero__badge span { color: rgba(255,255,255,.65); font-weight: 400; }
/* ---------- Section variants ---------- */
.section--narrow .container { max-width: var(--maxw-narrow); }
.section__lead {
font-family: var(--serif);
font-style: italic;
font-size: 1.15rem;
line-height: 1.7;
color: var(--ink-soft);
text-align: center;
max-width: 680px;
margin: 0 auto;
}
/* ---------- 5-card services grid (3+2) ---------- */
.services--5 {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 1025px) {
.services--5 {
grid-template-columns: repeat(6, 1fr);
}
.services--5 > .service { grid-column: span 2; }
.services--5 > .service:nth-child(4) { grid-column: 2 / span 2; }
.services--5 > .service:nth-child(5) { grid-column: 4 / span 2; }
}
/* ---------- 6-card services grid (3x2) ---------- */
.services--6 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.services--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.services--6 { grid-template-columns: 1fr; }
}
.service__personal {
font-family: var(--serif);
font-style: italic;
color: var(--ink);
font-size: .98rem;
line-height: 1.55;
padding: 14px 16px;
background: rgba(184,89,60,.06);
border-left: 2px solid var(--gold);
border-radius: 4px;
margin: 16px 0 20px;
}
.service__badge {
display: inline-block;
margin-bottom: 10px;
padding: 4px 10px;
background: rgba(107,123,74,.16);
color: var(--success);
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
/* ---------- NRI callout ---------- */
.nri-callout {
margin: 40px auto 0;
max-width: 720px;
padding: 24px 28px;
background: rgba(184,89,60,.1);
border: 1px solid rgba(184,89,60,.3);
border-radius: var(--radius-sm);
font-family: var(--serif);
font-style: italic;
color: var(--ink);
line-height: 1.6;
font-size: 1rem;
}
.nri-callout::before {
content: "💡";
font-style: normal;
display: inline-block;
margin-right: 8px;
}
/* ---------- Case study (Patient #1) ---------- */
.case-study {
background: var(--white);
border-radius: var(--radius);
padding: 48px 44px;
box-shadow: var(--shadow-md);
border-top: 4px solid var(--gold);
}
.case-study__head {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
align-items: baseline;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
margin-bottom: 32px;
}
.case-study__name {
font-family: var(--serif);
font-weight: 500;
font-size: 1.6rem;
color: var(--navy);
margin: 0;
}
.case-study__meta {
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
}
.case-study__section {
margin-bottom: 28px;
}
.case-study__section:last-child { margin-bottom: 0; }
.case-study__label {
font-family: var(--sans);
font-size: .76rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 700;
margin: 0 0 10px;
}
.case-study__text {
font-size: 1rem;
line-height: 1.7;
color: var(--ink);
margin: 0;
}
.case-study__cost {
list-style: none;
padding: 18px 22px; margin: 0;
background: var(--bg);
border-radius: var(--radius-sm);
display: grid;
gap: 8px;
font-family: var(--sans);
font-size: .95rem;
}
.case-study__cost li {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.case-study__cost li.total {
border-top: 1px solid var(--line);
padding-top: 12px;
margin-top: 6px;
font-weight: 600;
color: var(--navy);
}
.case-study__cost li.saved { color: var(--success); font-weight: 600; }
.case-study__cost .num { font-family: var(--display); font-size: 1.15rem; letter-spacing: .03em; }
.case-study__quote {
font-family: var(--serif);
font-style: italic;
font-size: 1.2rem;
line-height: 1.6;
color: var(--navy);
padding: 20px 24px;
border-left: 3px solid var(--gold);
background: rgba(184,89,60,.06);
margin: 0;
}
.case-study__placeholder {
text-align: center;
padding: 60px 30px;
background: var(--bg);
border-radius: var(--radius-sm);
border: 1px dashed var(--gold);
font-family: var(--serif);
font-style: italic;
color: var(--ink-soft);
line-height: 1.7;
}
.case-study__placeholder strong { color: var(--navy); display: block; font-size: 1.2rem; margin-bottom: 6px; font-style: normal; }
/* ---------- Responsive for v5 components ---------- */
@media (max-width: 1024px) {
.founder { grid-template-columns: 1fr; gap: 40px; }
.founder__photo { position: static; max-width: 360px; margin: 0 auto; }
.doctor { grid-template-columns: 140px 1fr; gap: 28px; }
.doctor__photo { width: 140px; height: 140px; }
.reviews { grid-template-columns: 1fr; }
.review--full { grid-column: auto; }
.review--contrast { grid-column: auto; }
.compare-flow { grid-template-columns: 1fr; }
.compare-flow__col--others { border-right: none; border-bottom: 1px solid var(--line); }
.contrast { grid-template-columns: 1fr; }
.contrast__col--mother { border-right: none; border-bottom: 1px solid var(--amber-line); }
.proof-cards { grid-template-columns: 1fr; }
.services--5 > .service:nth-child(4),
.services--5 > .service:nth-child(5) { grid-column: auto; }
.services--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.compare-flow__col { padding: 28px 22px; }
.contrast__col { padding: 28px 22px; }
.case-study { padding: 32px 24px; }
.doctor { grid-template-columns: 1fr; gap: 0; justify-items: center; text-align: center; }
.doctor__photo { width: 120px; height: 120px; margin-bottom: 20px; }
.doctor__body { padding: 0; }
.doctor__cta { align-self: center; }
.review { padding: 26px 22px; }
.review--contrast .review__warm-note { margin: 0 -22px -28px; padding: 14px 22px; }
.journey::before { left: 18px; }
.journey__step { padding-left: 58px; }
.journey__num { width: 38px; height: 38px; font-size: 1rem; }
.services--5 { grid-template-columns: 1fr; }
}
/* ---------- Real doctor headshots ---------- */
/* Sits above the gradient + symbol layer so the gradient acts as a
graceful fallback while the image loads or if it fails. */
.doctor__photo__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
display: block;
}
/* ---------- Handwritten centred variant ---------- */
.handwritten--center {
display: block;
text-align: center;
margin: 8px auto 14px;
font-size: 1.6rem;
color: var(--gold-deep);
}
/* ---------- Per-organ doctor placeholders ---------- */
/* Each card gets its own gentle wash + symbol so the grid feels personal,
not photo-stocky. Symbols are abstract and respectful. */
.doctor__photo--knee {
background:
radial-gradient(circle at 25% 30%, rgba(107,123,74,.32), transparent 55%),
radial-gradient(circle at 80% 75%, rgba(212,160,66,.22), transparent 55%),
linear-gradient(135deg, #EFE7D2, #DCD5BD);
}
.doctor__photo--knee::after { content: "↺"; color: rgba(74,57,48,.22); font-size: 5rem; }
.doctor__photo--teeth {
background:
radial-gradient(circle at 28% 30%, rgba(212,160,66,.32), transparent 55%),
radial-gradient(circle at 78% 78%, rgba(232,181,164,.32), transparent 55%),
linear-gradient(135deg, #FCF1DB, #F2E1B8);
}
.doctor__photo--teeth::after { content: "✦"; color: rgba(184,89,60,.20); font-size: 4.4rem; }
.doctor__photo--hair {
background:
radial-gradient(circle at 30% 30%, rgba(232,181,164,.45), transparent 55%),
radial-gradient(circle at 75% 75%, rgba(184,89,60,.22), transparent 55%),
linear-gradient(135deg, #F8E4D9, #ECC9B6);
}
.doctor__photo--hair::after { content: "❀"; color: rgba(143,65,40,.22); font-size: 4.6rem; }
.doctor__photo--hip {
background:
radial-gradient(circle at 25% 30%, rgba(216,132,104,.40), transparent 55%),
radial-gradient(circle at 80% 75%, rgba(184,89,60,.22), transparent 55%),
linear-gradient(135deg, #F1D9C8, #E0BFA6);
}
.doctor__photo--hip::after { content: "◐"; color: rgba(74,57,48,.20); font-size: 4.6rem; }
/* ---------- Mental Health (calming lavender / sage wash) ---------- */
.doctor__photo--mind {
background:
radial-gradient(circle at 28% 28%, rgba(155,178,206,.50), transparent 55%),
radial-gradient(circle at 78% 78%, rgba(186,168,196,.42), transparent 60%),
linear-gradient(135deg, #E9E4F0, #DCE4EE);
}
.doctor__photo--mind::after {
content: "ψ";
color: rgba(60,70,100,.32);
font-size: 5.6rem;
font-family: var(--serif);
font-weight: 500;
}
.doctor--mind .doctor__photo {
background:
radial-gradient(circle at 28% 28%, rgba(155,178,206,.55), transparent 55%),
radial-gradient(circle at 78% 78%, rgba(186,168,196,.45), transparent 60%),
linear-gradient(135deg, #E9E4F0, #DCE4EE);
position: relative;
}
.doctor--mind .doctor__badge {
background: rgba(120,108,150,.14);
color: #4d4470;
border-color: rgba(120,108,150,.30);
}
/* Service tile variant — soft mind tint on the icon */
.service--mind .service__icon {
color: #6f6094;
background: rgba(155,178,206,.16);
}
.service--mind .service__badge {
background: rgba(120,108,150,.14);
color: #4d4470;
}
/* ============================================================
Rebeka — review photo strip + Instagram story journey
============================================================ */
/* Photo strip inside a review card */
.review__photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 6px 0 22px;
}
.review__photo {
display: block;
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
object-position: center 25%;
border-radius: 12px;
background: var(--bg-warm);
box-shadow: 0 6px 18px rgba(33,47,64,.10);
}
.review__photo--single {
aspect-ratio: 16/10;
object-position: center 30%;
}
/* Caption directly under a single review hero photo */
.review__photo-caption {
margin: -14px 0 18px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: .92rem;
color: var(--ink-soft);
}
/* "See full story" link inside a review card */
.review__see-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-family: var(--serif);
font-style: italic;
font-size: .98rem;
color: var(--gold-deep);
text-decoration: none;
border-bottom: 1px solid rgba(184,89,60,.35);
padding-bottom: 2px;
transition: color .2s ease, border-color .2s ease;
}
.review__see-more:hover {
color: var(--ink);
border-color: var(--ink);
}
/* Instagram story grid — 5 phone-shaped cards */
.ig-story-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px;
padding: 0;
list-style: none;
margin: 28px 0 0;
}
.ig-story-card {
display: flex;
flex-direction: column;
margin: 0;
text-align: center;
}
.ig-story-card__phone {
position: relative;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 18px 44px rgba(33,47,64,.18),
0 4px 10px rgba(33,47,64,.10);
background: #1a1a1a;
transition: transform .35s ease, box-shadow .35s ease;
}
.ig-story-card:hover .ig-story-card__phone {
transform: translateY(-4px);
box-shadow:
0 26px 56px rgba(33,47,64,.24),
0 6px 14px rgba(33,47,64,.14);
}
.ig-story-card__phone img {
width: 100%;
height: auto;
display: block;
}
.ig-story-card__step {
margin: 16px 0 0;
font-family: var(--serif);
color: var(--ink);
font-size: 1rem;
font-weight: 500;
font-style: italic;
letter-spacing: .015em;
}
.ig-story-card__step-num {
display: block;
font-family: var(--sans);
font-style: normal;
letter-spacing: .12em;
font-size: .74rem;
color: var(--gold-deep);
font-weight: 600;
margin-bottom: 4px;
text-transform: uppercase;
}
.ig-story-footer {
text-align: center;
margin: 36px auto 0;
max-width: 620px;
font-size: .94rem;
color: var(--ink-soft);
line-height: 1.6;
}
.ig-story-footer a {
color: var(--gold-deep);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
}
.ig-story-footer a:hover {
color: var(--ink);
}
@media (max-width: 1024px) {
.ig-story-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
.ig-story-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.ig-story-card__step { font-size: .92rem; }
.ig-story-card__step-num { font-size: .68rem; }
}
@media (max-width: 420px) {
.review__photos { gap: 10px; }
}
/* =========================================================
FLOEMA-INSPIRED EDITORIAL THEME LAYER
Added after main system — refines typography, adds
numbered markers, pull quotes, editorial cues.
Inspired by floema.com — refined, magazine-feel.
========================================================= */
/* ---------- Section number marker (inline, alongside eyebrow) ---------- */
.section-num {
display: inline-block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 1.05em;
color: var(--gold);
letter-spacing: 0;
text-transform: none;
margin-right: 10px;
position: relative;
top: -1px;
}
.section-num::after {
content: "—";
display: inline-block;
margin-left: 10px;
color: var(--line);
font-style: normal;
}
.eyebrow .section-num { color: var(--gold); }
.eyebrow--light .section-num { color: var(--gold-soft); }
/* ---------- Big editorial section number (decoration above title) ---------- */
.section-num--display {
display: block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(3rem, 7vw, 5.5rem);
line-height: 1;
color: var(--gold);
opacity: .55;
margin: 0 0 18px;
letter-spacing: -.02em;
}
.section-num--display::after {
content: none;
}
/* ---------- Parenthesized count (Floema's "(50)" cue) ---------- */
.count {
display: inline-block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: .55em;
color: var(--ink-soft);
vertical-align: super;
margin-left: 8px;
letter-spacing: 0;
opacity: .75;
}
.section__head--light .count { color: rgba(255,252,245,.55); }
.section__title .count { font-size: .42em; }
/* ---------- Editorial pull quote (large italic block) ---------- */
.pull-quote {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.4rem);
line-height: 1.25;
color: var(--navy);
max-width: 760px;
margin: clamp(40px, 5vw, 72px) auto;
padding: 0 0 0 28px;
border-left: 2px solid var(--gold);
position: relative;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.pull-quote::before {
content: "\201C";
position: absolute;
top: -22px;
left: 14px;
font-size: 3.5rem;
color: var(--gold);
opacity: .35;
line-height: 1;
font-style: normal;
}
.pull-quote__attr {
display: block;
margin-top: 16px;
font-family: var(--sans);
font-style: normal;
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
}
/* ---------- Refined hero scroll cue (replaces hero__scroll text) ---------- */
.hero__scroll span:first-child {
/* When HTML changes "Scroll" → "Scroll to Explore", this rule
ensures the typography stays refined */
font-family: var(--sans);
font-size: .68rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
}
/* ---------- Numbered card marker (for doctor + service cards) ---------- */
.card-num {
display: inline-block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: .95rem;
color: var(--gold);
letter-spacing: 0;
margin-bottom: 6px;
opacity: .85;
}
.card-num::after {
content: " /";
color: var(--line);
margin-left: 3px;
font-style: normal;
}
/* On doctor cards, position it above the name with breathing room */
.doctor .card-num {
display: block;
margin: 0 0 10px;
font-size: .9rem;
}
/* On service tiles, sit it above the icon row tightly */
.service .card-num {
display: block;
margin: 0 0 12px;
font-size: .82rem;
}
/* ---------- Editorial credit line (footer) ---------- */
.editorial-credit {
display: block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: .9rem;
color: rgba(255,252,245,.5);
margin-top: 10px;
line-height: 1.5;
}
.editorial-credit a {
color: rgba(255,252,245,.7);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255,252,245,.2);
}
.editorial-credit a:hover {
color: var(--gold-soft);
text-decoration-color: var(--gold-soft);
}
/* ---------- Refined eyebrow (slight tightening for editorial feel) ---------- */
.eyebrow {
font-size: .72rem;
letter-spacing: .26em;
}
/* ---------- Refined hero typography (more editorial weight) ---------- */
.hero__title {
font-size: clamp(1.9rem, 3.8vw, 3rem);
letter-spacing: -.018em;
line-height: 1.18;
}
.hero__title em {
font-feature-settings: "ss01" on, "ss02" on;
}
/* ---------- Refined section title (tighter editorial leading) ---------- */
.section__title {
letter-spacing: -.018em;
line-height: 1.08;
}
/* ---------- Editorial divider (replaces .rule on some sections — alternative) ---------- */
.rule--editorial {
display: block;
width: 40px;
height: 1px;
background: var(--gold);
background-image: none;
margin: 28px auto 0;
opacity: .5;
}
/* ---------- Floema-style "go further" link (for cross-page editorial CTAs) ---------- */
.editorial-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
color: var(--navy);
padding: 12px 0 6px;
border-bottom: 1px solid var(--gold);
transition: gap .25s var(--ease), color .25s var(--ease);
}
.editorial-link:hover {
gap: 16px;
color: var(--gold);
}
.editorial-link .arrow {
display: inline-block;
transition: transform .25s var(--ease);
}
.editorial-link:hover .arrow { transform: translateX(4px); }
/* ---------- Mobile adjustments ---------- */
@media (max-width: 720px) {
.section-num { font-size: .95em; margin-right: 8px; }
.section-num::after { margin-left: 8px; }
.section-num--display { font-size: 2.6rem; margin-bottom: 12px; }
.pull-quote { padding-left: 20px; margin: 36px auto; }
.pull-quote::before { font-size: 2.6rem; top: -16px; left: 10px; }
}
/* =========================================================
SLEEK HOMEPAGE — circular doctor strip + teasers
Sub-pages keep the full grids. Homepage shows summaries
that link out to /doctors.html, /pricing.html, /reviews.html
========================================================= */
/* ---------- Generic "view all" editorial link ---------- */
.view-all-link {
display: inline-flex;
align-items: baseline;
gap: 10px;
font-family: var(--serif);
font-style: italic;
font-size: 1.08rem;
color: var(--gold-deep);
text-decoration: none;
border-bottom: 1px solid var(--gold);
padding-bottom: 4px;
transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.view-all-link:hover { color: var(--clay); border-color: var(--clay); gap: 14px; }
.view-all-link .arrow { font-style: normal; transition: transform .25s var(--ease); }
.view-all-link:hover .arrow { transform: translateX(4px); }
.view-all-wrap {
display: flex;
justify-content: center;
margin-top: 48px;
}
/* ---------- Doctors strip — horizontal scroll, circular photos ---------- */
.doctors-strip {
display: flex;
gap: 28px;
padding: 16px var(--pad-x) 36px;
margin: 0 calc(-1 * var(--pad-x));
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
-webkit-overflow-scrolling: touch;
}
.doctors-strip::-webkit-scrollbar { height: 6px; }
.doctors-strip::-webkit-scrollbar-track { background: transparent; }
.doctors-strip::-webkit-scrollbar-thumb {
background: var(--gold-soft);
border-radius: 999px;
}
.doctors-strip::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.doctor-card {
flex: 0 0 260px;
scroll-snap-align: start;
background: var(--white);
border-radius: 20px;
padding: 28px 22px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
text-decoration: none;
color: inherit;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
position: relative;
}
.doctor-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
border-color: var(--gold-soft);
}
.doctor-card__num {
position: absolute;
top: 14px;
left: 18px;
font-family: var(--serif);
font-style: italic;
font-size: .82rem;
color: var(--gold-deep);
letter-spacing: .04em;
}
.doctor-card__photo {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
background:
radial-gradient(circle at 30% 30%, rgba(216,132,104,.4), transparent 55%),
linear-gradient(135deg, var(--gold-deep), var(--navy));
border: 3px solid var(--paper);
box-shadow: 0 6px 18px rgba(38,33,28,.12), 0 0 0 1px var(--gold-soft);
margin-bottom: 18px;
position: relative;
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doctor-card:hover .doctor-card__photo {
transform: scale(1.04);
box-shadow: 0 10px 26px rgba(38,33,28,.18), 0 0 0 1px var(--gold);
}
.doctor-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.doctor-card__photo--placeholder::after {
content: "⚚";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,252,245,.5);
font-family: var(--serif);
font-size: 3rem;
line-height: 1;
}
.doctor-card__name {
font-family: var(--serif);
font-weight: 500;
font-size: 1.15rem;
color: var(--navy);
margin: 0 0 4px;
line-height: 1.3;
}
.doctor-card__role {
font-family: var(--sans);
font-size: .82rem;
color: var(--ink-soft);
line-height: 1.45;
margin: 0 0 16px;
min-height: 2.6em;
}
.doctor-card__connection {
font-family: var(--serif);
font-style: italic;
font-size: .9rem;
color: var(--ink);
margin: 0 0 18px;
line-height: 1.5;
border-top: 1px dashed var(--line);
padding-top: 14px;
width: 100%;
}
@media (max-width: 720px) {
.doctors-strip { gap: 18px; }
.doctor-card { flex-basis: 220px; padding: 24px 18px 22px; }
.doctor-card__photo { width: 110px; height: 110px; }
}
/* ---------- Reviews strip — horizontal scroll teaser ---------- */
.reviews-strip {
display: flex;
gap: 28px;
padding: 8px var(--pad-x) 36px;
margin: 0 calc(-1 * var(--pad-x));
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
-webkit-overflow-scrolling: touch;
}
.reviews-strip::-webkit-scrollbar { height: 6px; }
.reviews-strip::-webkit-scrollbar-track { background: transparent; }
.reviews-strip::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 999px; }
.reviews-strip::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.review-mini {
flex: 0 0 340px;
scroll-snap-align: start;
background: var(--white);
border-radius: 18px;
padding: 28px 28px 26px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.review-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review-mini__head {
display: flex;
align-items: center;
gap: 12px;
}
.review-mini__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-weight: 600;
font-size: .9rem;
flex-shrink: 0;
}
.review-mini__who { flex: 1; }
.review-mini__name {
font-family: var(--serif);
font-size: 1.02rem;
color: var(--navy);
margin: 0;
}
.review-mini__meta {
font-size: .76rem;
color: var(--ink-soft);
margin: 2px 0 0;
}
.review-mini__quote {
font-family: var(--serif);
font-style: italic;
font-size: 1rem;
color: var(--ink);
margin: 0;
line-height: 1.6;
position: relative;
padding-left: 16px;
}
.review-mini__quote::before {
content: "\201C";
position: absolute;
left: -2px;
top: -8px;
font-size: 1.8rem;
color: var(--gold);
font-family: var(--serif);
line-height: 1;
}
.review-mini__foot {
margin-top: auto;
font-family: var(--sans);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
padding-top: 12px;
border-top: 1px dashed var(--line);
}
.review-mini__stars {
color: var(--gold);
letter-spacing: .15em;
font-size: .9rem;
}
@media (max-width: 720px) {
.review-mini { flex-basis: 280px; padding: 24px 22px 22px; }
}
/* ---------- Pricing teaser (compact 3-row table) ---------- */
.pricing-teaser {
width: 100%;
border-collapse: collapse;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.pricing-teaser th,
.pricing-teaser td {
padding: 18px 22px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.pricing-teaser thead th {
background: var(--navy);
color: var(--white);
font-family: var(--sans);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
}
.pricing-teaser tbody tr:last-child td { border-bottom: none; }
.pricing-teaser .cost {
font-family: var(--display);
font-size: 1.25rem;
color: var(--navy);
}
.pricing-teaser .cost--india { color: var(--success); }
.pricing-teaser .pricing-teaser__procedure {
font-family: var(--serif);
font-size: 1.02rem;
color: var(--ink);
}
.pricing-teaser__note {
margin: 22px 0 0;
font-family: var(--serif);
font-style: italic;
font-size: .92rem;
color: var(--ink-soft);
text-align: center;
}
/* ---------- Page hero (used on doctors/pricing/reviews pages) ---------- */
.page-hero {
position: relative;
padding: 140px 0 70px;
background:
radial-gradient(ellipse at 20% 20%, rgba(216,132,104,.18), transparent 55%),
radial-gradient(ellipse at 90% 80%, rgba(232,160,32,.14), transparent 55%),
var(--paper);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.page-hero__content {
max-width: 820px;
position: relative;
}
.page-hero__title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.05;
letter-spacing: -.02em;
color: var(--navy);
margin: 14px 0 22px;
}
.page-hero__title em {
font-style: italic;
color: var(--gold-deep);
}
.page-hero__sub {
font-family: var(--serif);
font-size: 1.12rem;
color: var(--ink-soft);
line-height: 1.65;
max-width: 620px;
margin: 0;
}
.page-hero__crumbs {
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 8px;
}
.page-hero__crumbs a {
color: var(--ink-soft);
text-decoration: none;
border-bottom: 1px dotted var(--line);
}
.page-hero__crumbs a:hover { color: var(--gold-deep); }
@media (max-width: 720px) {
.page-hero { padding: 110px 0 50px; }
}
/* ---------- Section meta line (small italic, under section title) ---------- */
.section-meta {
font-family: var(--serif);
font-style: italic;
font-size: .95rem;
color: var(--ink-soft);
text-align: center;
margin: 0 auto 36px;
max-width: 580px;
}
/* =========================================================
MOAT PROSE — copy-driven sections (Who we are, Doctors, Reviews)
Pure prose. Editorial. No cards. One button at the end.
========================================================= */
.moat-prose {
max-width: 680px;
margin: 0 auto;
}
.moat-prose p {
font-family: var(--serif);
font-size: 1.18rem;
line-height: 1.78;
color: var(--ink);
margin: 0 0 1.4em;
}
.moat-prose p:last-of-type { margin-bottom: 0; }
.moat-prose p strong {
font-weight: 600;
color: var(--navy);
}
.moat-prose p em {
font-style: italic;
color: var(--gold-deep);
}
.moat-prose__lead {
font-family: var(--display);
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.3;
letter-spacing: -.01em;
color: var(--navy);
margin: 0 0 1.2em;
font-style: italic;
}
.moat-prose__lead em {
font-style: normal;
color: var(--gold-deep);
}
.moat-prose hr {
border: 0;
height: 1px;
background: var(--line);
width: 60px;
margin: 32px auto;
}
.moat-prose__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 44px;
padding-top: 36px;
border-top: 1px dashed var(--line);
}
.moat-prose__cta-hint {
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
}
@media (max-width: 640px) {
.moat-prose p { font-size: 1.04rem; line-height: 1.72; }
.moat-prose__lead { font-size: 1.4rem; }
.moat-prose__cta { margin-top: 32px; padding-top: 28px; }
}
/* =========================================================
HYGIENE PROMISE — direct fear-busting card
Addresses "Delhi belly" anxiety with confident, voiced prose
========================================================= */
.hygiene-promise {
background: linear-gradient(135deg, var(--bg-cream), var(--bg-warm));
border: 1px solid var(--line);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
padding: 44px clamp(28px, 5vw, 56px) 32px;
position: relative;
box-shadow: var(--shadow-sm);
}
.hygiene-promise__icons {
display: flex;
gap: 28px;
justify-content: center;
margin-bottom: 28px;
}
.hygiene-promise__icons svg {
width: 56px;
height: 56px;
color: var(--gold-deep);
stroke-width: 1.6;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.hygiene-promise__body {
font-family: var(--serif);
font-size: 1.12rem;
line-height: 1.78;
color: var(--ink);
margin: 0 0 18px;
}
.hygiene-promise__body:first-of-type::first-letter {
font-family: var(--serif);
font-size: 3rem;
font-weight: 600;
float: left;
line-height: .9;
margin: 4px 10px 0 0;
color: var(--gold);
}
.hygiene-promise__body em { font-style: italic; color: var(--gold-deep); }
.hygiene-promise__sign {
margin: 24px 0 0;
padding-top: 18px;
border-top: 1px dashed var(--line);
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold-deep);
text-align: center;
}
@media (max-width: 640px) {
.hygiene-promise { padding: 32px 22px 24px; }
.hygiene-promise__icons { gap: 18px; margin-bottom: 20px; }
.hygiene-promise__icons svg { width: 44px; height: 44px; }
.hygiene-promise__body { font-size: 1.02rem; line-height: 1.7; }
.hygiene-promise__body:first-of-type::first-letter { font-size: 2.4rem; }
}
/* =========================================================
FEE CALLOUT — the $2,000 flat service fee
The single most important pricing message on the site
========================================================= */
.fee-callout {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: center;
padding: 28px 32px;
margin: 32px 0;
background: linear-gradient(135deg, var(--bg-cream), var(--bg-warm));
border: 1px solid var(--line);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.fee-callout__price {
display: flex;
flex-direction: column;
align-items: center;
padding-right: 28px;
border-right: 1px dashed var(--line);
}
.fee-callout__amount {
font-family: var(--display);
font-size: clamp(2.4rem, 5vw, 3.4rem);
color: var(--gold-deep);
line-height: 1;
letter-spacing: -.02em;
}
.fee-callout__label {
font-family: var(--sans);
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-top: 8px;
}
.fee-callout__body {
font-family: var(--serif);
font-size: 1.08rem;
line-height: 1.65;
color: var(--ink);
margin: 0;
}
.fee-callout__body strong {
font-weight: 600;
color: var(--navy);
}
.fee-callout__hint {
display: block;
margin-top: 6px;
font-style: italic;
font-size: .92rem;
color: var(--ink-soft);
}
@media (max-width: 640px) {
.fee-callout {
grid-template-columns: 1fr;
gap: 18px;
padding: 22px 24px;
text-align: center;
}
.fee-callout__price {
flex-direction: row;
justify-content: center;
gap: 14px;
padding-right: 0;
padding-bottom: 16px;
border-right: 0;
border-bottom: 1px dashed var(--line);
}
.fee-callout__amount { font-size: 2.4rem; }
.fee-callout__label { margin-top: 4px; align-self: center; }
.fee-callout__body { text-align: center; font-size: 1rem; }
}
/* The small inline badge — for re-use under CTAs / near prices */
.fee-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--white);
border: 1px solid var(--gold-soft);
border-radius: 999px;
font-family: var(--sans);
font-size: .82rem;
color: var(--ink);
white-space: nowrap;
}
.fee-badge__amount {
font-family: var(--display);
color: var(--gold-deep);
font-weight: 500;
letter-spacing: -.01em;
}
.fee-badge::before {
content: "•";
color: var(--gold);
font-size: 1.4em;
line-height: 0;
}
/* =========================================================
FOUNDER STORY — compact letter (small circular portrait)
Overrides the old big-sticky-photo layout
========================================================= */
.founder.founder--compact {
display: block;
max-width: 720px;
margin: 0 auto;
}
.founder--compact .founder__letter {
font-family: var(--serif);
font-size: 1.12rem;
line-height: 1.78;
color: var(--ink);
}
.founder--compact .founder__letter p { margin: 0 0 18px; }
.founder--compact .founder__letter p:first-child::first-letter {
font-family: var(--serif);
font-size: 3.4rem;
font-weight: 600;
float: left;
line-height: .9;
margin: 4px 10px 0 0;
color: var(--gold);
}
.founder__sign--compact {
display: flex;
align-items: center;
gap: 22px;
margin-top: 36px;
padding-top: 26px;
border-top: 1px solid var(--line);
}
.founder__portrait {
flex: 0 0 84px;
width: 84px;
height: 84px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, rgba(216,132,104,.5), transparent 55%),
radial-gradient(circle at 75% 75%, rgba(212,160,66,.35), transparent 60%),
linear-gradient(135deg, var(--bg-warm), #EAD9C2);
border: 2px solid var(--gold-soft);
box-shadow: 0 4px 12px rgba(38,33,28,.10);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.founder__portrait__initials {
font-family: var(--serif);
font-weight: 500;
font-size: 1.85rem;
color: rgba(184,89,60,.6);
line-height: 1;
letter-spacing: -.01em;
}
.founder__sign-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.founder__sign-warm {
font-family: var(--serif);
font-style: italic;
color: var(--ink-soft);
font-size: .95rem;
}
.founder__sign--compact strong {
font-family: var(--serif);
font-style: normal;
font-weight: 600;
font-size: 1.15rem;
color: var(--navy);
}
.founder__sign-role {
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-deep);
}
@media (max-width: 720px) {
.founder--compact .founder__letter { font-size: 1.05rem; line-height: 1.7; }
.founder--compact .founder__letter p:first-child::first-letter { font-size: 2.8rem; }
.founder__sign--compact { gap: 16px; }
.founder__portrait { flex-basis: 70px; width: 70px; height: 70px; }
.founder__portrait__initials { font-size: 1.5rem; }
}
/* ---------- Founder kicker line ---------- */
.founder__kicker {
margin: 40px 0 0;
padding-top: 28px;
border-top: 1px solid var(--line);
text-align: center;
font-family: var(--serif);
font-size: 1.25rem;
font-style: italic;
line-height: 1.7;
color: var(--navy);
letter-spacing: -.01em;
}
@media (max-width: 640px) {
.founder__kicker { font-size: 1.05rem; }
}
/* =========================================================
JOURNEY FLOW — sideways flow chart with drawn icons
Replaces the vertical numbered list on "How It Works"
========================================================= */
.journey-flow {
display: flex;
gap: 0;
padding: 40px var(--pad-x) 60px;
margin: 24px calc(-1 * var(--pad-x)) 0;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--gold-soft) transparent;
-webkit-overflow-scrolling: touch;
position: relative;
}
.journey-flow::-webkit-scrollbar { height: 6px; }
.journey-flow::-webkit-scrollbar-track { background: transparent; }
.journey-flow::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 999px; }
.journey-flow::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.journey-node {
flex: 0 0 220px;
scroll-snap-align: center;
position: relative;
text-align: center;
padding: 0 10px;
isolation: isolate;
}
/* The gold dashed thread linking icons */
.journey-node::after {
content: '';
position: absolute;
top: 56px;
left: calc(50% + 56px);
right: calc(-50% + 56px);
height: 2px;
background-image: linear-gradient(to right, var(--gold-soft) 50%, transparent 50%);
background-size: 14px 2px;
background-repeat: repeat-x;
z-index: 0;
pointer-events: none;
}
.journey-node:last-child::after { display: none; }
/* Tiny arrow on the connector */
.journey-node::before {
content: '';
position: absolute;
top: 50px;
left: calc(100% - 8px);
width: 12px;
height: 12px;
border-top: 2px solid var(--gold);
border-right: 2px solid var(--gold);
transform: rotate(45deg);
z-index: 1;
pointer-events: none;
}
.journey-node:last-child::before { display: none; }
.journey-node__icon {
width: 112px;
height: 112px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--gold-soft);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.journey-node:hover .journey-node__icon {
transform: translateY(-4px) scale(1.04);
box-shadow: var(--shadow-gold);
border-color: var(--gold);
}
.journey-node__icon svg {
width: 54px;
height: 54px;
color: var(--gold-deep);
stroke-width: 1.6;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.journey-node__num {
position: absolute;
top: -6px;
right: -6px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--navy);
color: var(--white);
font-family: var(--display);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: .04em;
box-shadow: 0 2px 6px rgba(38,33,28,.2);
}
.journey-node__title {
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 500;
color: var(--navy);
margin: 0 0 8px;
line-height: 1.3;
}
.journey-node__desc {
font-family: var(--sans);
font-size: .85rem;
color: var(--ink-soft);
line-height: 1.55;
margin: 0;
}
.journey-flow__hint {
display: block;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: .82rem;
color: var(--ink-soft);
margin-top: -8px;
opacity: .7;
}
.journey-flow__hint::before { content: "← "; color: var(--gold); }
.journey-flow__hint::after { content: " →"; color: var(--gold); }
/* Mobile: vertical stack with a left rail of icons */
@media (max-width: 760px) {
.journey-flow {
flex-direction: column;
gap: 0;
overflow: visible;
padding: 16px 0 0;
margin: 24px 0 0;
}
.journey-node {
flex: 0 0 auto;
text-align: left;
display: grid;
grid-template-columns: 88px 1fr;
gap: 22px;
align-items: start;
padding: 0 0 32px;
}
/* Switch the connector from horizontal to vertical */
.journey-node::after {
top: 88px;
left: 43px;
right: auto;
width: 2px;
height: calc(100% - 88px);
background-image: linear-gradient(to bottom, var(--gold-soft) 50%, transparent 50%);
background-size: 2px 14px;
background-repeat: repeat-y;
}
.journey-node::before {
top: auto;
bottom: -2px;
left: 38px;
transform: rotate(135deg);
}
.journey-node__icon {
width: 88px;
height: 88px;
margin: 0;
}
.journey-node__icon svg { width: 42px; height: 42px; }
.journey-node__num {
width: 28px;
height: 28px;
font-size: .9rem;
top: -6px;
right: -6px;
}
.journey-node__title { font-size: 1.08rem; margin-top: 4px; }
.journey-node__desc { font-size: .92rem; }
.journey-flow__hint { display: none; }
}
/* =========================================================
HOMEPAGE v2 ADDITIONS (May 2026)
Components introduced by the new homepage copy:
- .three-col "Before / While / After" trio
- .currency-strip USD · EUR · AUD · CAD · GBP badges
- .cost-card Wrapper around payment / comparison tables
- .cost-table Pricing & comparison tables
- .rebeka-grid Two-column Rebeka feature with IG grid
- .rebeka-numbers Three-row callout (her spend, vs Spain, flew home)
- .ig-grid / .ig-tile Instagram-style 3x2 photo grid (placeholders)
- .doctor-card extras Hover, soon state, full-text CTA
- .how-rail Vertical numbered "how it works" list
- .people-grid Country contacts (Shveta / Rebeka / US soon)
- .review-list Compact review preview rows
========================================================= */
/* THREE-COL · Before / While / After ------------------------ */
.three-col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: clamp(40px, 5vw, 56px);
}
.three-col__cell {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 26px;
box-shadow: var(--shadow-sm);
position: relative;
}
.three-col__cell::before {
content: '';
position: absolute;
top: 22px; left: 26px;
width: 28px; height: 2px;
background: var(--gold);
border-radius: 2px;
}
.three-col__cell p {
margin: 0;
font-family: var(--sans);
font-size: .98rem;
line-height: 1.7;
color: var(--ink-soft);
}
.three-col__label {
display: block;
margin: 14px 0 14px !important;
font-family: var(--sans);
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-deep);
}
@media (max-width: 820px) {
.three-col { grid-template-columns: 1fr; gap: 18px; }
.three-col__cell { padding: 24px 22px; }
}
/* CURRENCY STRIP -------------------------------------------- */
.currency-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin: 36px auto 12px;
padding: 18px 22px;
background: var(--amber-bg);
border: 1px dashed var(--amber-line);
border-radius: 999px;
max-width: max-content;
}
.currency-strip__label {
font-family: var(--sans);
font-size: .82rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-deep);
margin-right: 6px;
}
.currency-strip__badge {
display: inline-block;
padding: 6px 14px;
background: var(--white);
border: 1px solid var(--amber-line);
border-radius: 999px;
font-family: var(--sans);
font-size: .9rem;
font-weight: 700;
color: var(--navy);
letter-spacing: .04em;
}
@media (max-width: 600px) {
.currency-strip { border-radius: 20px; }
.currency-strip__label { width: 100%; text-align: center; margin-right: 0; }
}
/* COST CARDS & TABLES --------------------------------------- */
.cost-card {
max-width: 920px;
margin: 44px auto 0;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 44px);
box-shadow: var(--shadow-md);
}
.cost-card__title {
margin: 0 0 22px;
font-family: var(--serif);
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
font-weight: 500;
color: var(--navy);
letter-spacing: -.01em;
}
.cost-card__note {
margin: 18px 0 0;
font-family: var(--sans);
font-size: .92rem;
line-height: 1.65;
color: var(--ink-soft);
font-style: italic;
}
.cost-table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans);
font-size: 1rem;
}
.cost-table th,
.cost-table td {
padding: 16px 14px;
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.cost-table thead th {
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-deep);
border-bottom: 2px solid var(--gold);
padding-bottom: 12px;
padding-top: 0;
}
.cost-table tbody th {
font-weight: 500;
color: var(--ink);
}
.cost-table tbody td {
font-weight: 700;
color: var(--navy);
white-space: nowrap;
}
.cost-table tbody td em {
color: var(--ink-soft);
font-weight: 400;
font-style: italic;
font-family: var(--serif);
white-space: normal;
}
.cost-table tbody tr:last-child th,
.cost-table tbody tr:last-child td { border-bottom: none; }
.cost-table__total th,
.cost-table__total td {
background: var(--amber-bg);
font-weight: 700 !important;
color: var(--navy) !important;
font-size: 1.1rem;
}
.cost-table__total td { color: var(--gold-deep) !important; }
.cost-table--compare th,
.cost-table--compare td { text-align: left; }
.cost-table--compare tbody td:first-of-type {
color: var(--gold-deep);
font-weight: 700;
}
.cost-table--compare tbody td:last-of-type {
color: var(--ink-soft);
font-weight: 500;
text-decoration: line-through;
text-decoration-color: rgba(184, 89, 60, .4);
text-decoration-thickness: 1.5px;
}
@media (max-width: 720px) {
.cost-table thead { display: none; }
.cost-table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td { display: block; width: 100%; }
.cost-table tr {
border: 1px solid var(--line);
border-radius: 14px;
margin-bottom: 12px;
padding: 14px 16px;
background: var(--bg);
}
.cost-table th,
.cost-table td {
border: none;
padding: 4px 0;
white-space: normal;
}
.cost-table tbody th {
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-deep);
}
.cost-table tbody td { font-size: 1.05rem; }
.cost-table__total th,
.cost-table__total td { background: transparent; }
.cost-table__total { background: var(--amber-bg); border-color: var(--amber-line) !important; }
.cost-table--compare tbody td:last-of-type { text-decoration: line-through; }
}
/* REBEKA GRID — feature block ------------------------------- */
.rebeka-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(36px, 5vw, 64px);
align-items: start;
}
.rebeka-grid__story {
font-family: var(--sans);
font-size: 1.05rem;
line-height: 1.75;
color: var(--ink-soft);
}
.rebeka-grid__story p { margin: 0 0 18px; }
.rebeka-grid__story strong { color: var(--navy); font-weight: 700; }
/* REBEKA CTA — luxury split button */
.rebeka-cta {
display: inline-flex;
align-items: center;
gap: 0;
margin-top: 20px;
text-decoration: none;
position: relative;
overflow: hidden;
}
.rebeka-cta__label {
display: block;
padding: 10px 18px;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
background: #2c2c2c;
color: #fff;
transition: background .35s var(--ease);
}
.rebeka-cta__sub {
display: block;
padding: 10px 14px;
font-family: var(--serif);
font-size: .78rem;
font-style: italic;
letter-spacing: .02em;
color: var(--ink-soft);
border: 1px solid var(--line);
border-left: none;
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.rebeka-cta__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
align-self: stretch;
font-size: .95rem;
color: #fff;
background: var(--gold-deep);
transition: background .3s var(--ease), transform .3s var(--ease);
}
.rebeka-cta:hover .rebeka-cta__label { background: #444; }
.rebeka-cta:hover .rebeka-cta__sub { color: var(--navy); border-color: var(--gold-soft); }
.rebeka-cta:hover .rebeka-cta__arrow { background: var(--gold); }
.rebeka-cta:hover .rebeka-cta__arrow { transform: translateX(3px); }
@media (max-width: 600px) {
.rebeka-cta { flex-wrap: wrap; }
.rebeka-cta__label { flex: 1 1 100%; }
.rebeka-cta__sub { flex: 1; }
.rebeka-cta__arrow { width: 44px; }
}
/* REBEKA TIMELINE ------------------------------------------- */
.rebeka-timeline {
list-style: none;
margin: 20px 0 24px;
padding: 0 0 0 20px;
border-left: 2px solid var(--gold);
display: flex;
flex-direction: column;
gap: 12px;
}
.rebeka-timeline li {
font-size: .95rem;
line-height: 1.55;
color: var(--ink);
position: relative;
padding-left: 8px;
}
.rebeka-timeline li strong {
color: var(--navy);
font-weight: 700;
}
.rebeka-numbers {
list-style: none;
margin: 26px 0 28px;
padding: 24px 26px;
background: #1e1e1e;
border: 1px solid rgba(255,255,255,.08);
border-left: 3px solid var(--gold);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 14px;
}
.rebeka-numbers li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(255,255,255,.1);
}
.rebeka-numbers li:last-child { border-bottom: none; padding-bottom: 0; }
.rebeka-numbers__label {
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.rebeka-numbers__value {
font-family: var(--serif);
font-size: 1.85rem;
font-weight: 500;
color: var(--gold);
letter-spacing: -.02em;
}
.rebeka-numbers__value--alt {
color: rgba(255,255,255,.4);
text-decoration: line-through;
text-decoration-color: rgba(212,160,66,.5);
text-decoration-thickness: 2px;
}
.rebeka-numbers__value--small {
font-size: 1.05rem;
font-family: var(--sans);
font-style: italic;
color: rgba(255,255,255,.7);
}
.rebeka-grid__media {
position: sticky;
top: 96px;
}
.rebeka-grid__media-label {
margin: 0 0 14px;
font-family: var(--sans);
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-deep);
}
.rebeka-grid__media-hint {
margin: 16px 0 0;
font-family: var(--script);
font-size: 1.15rem;
color: var(--ink-soft);
text-align: center;
}
/* IG GRID — Instagram-style 3-column photo grid ------------- */
.ig-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 12px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
overflow: visible;
}
.ig-tile {
position: relative;
aspect-ratio: 1 / 1;
overflow: visible;
border-radius: 6px;
background: var(--bg-warm);
cursor: pointer;
z-index: 1;
transition: z-index 0s;
}
.ig-tile:hover {
z-index: 50;
}
.ig-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 6px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
transform-origin: center center;
}
.ig-tile:hover .ig-tile__img {
transform: scale(2.4);
box-shadow: 0 16px 48px rgba(0,0,0,.35);
border-radius: 8px;
z-index: 50;
}
.ig-tile:hover video.ig-tile__img {
transform: scale(2.4);
}
/* ---------- Custom video play/pause overlay ---------- */
.video-wrap {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.video-wrap video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-wrap__btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0,0,0,.55);
color: #fff;
border: none;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
transition: opacity .25s ease, background .2s ease;
pointer-events: none;
z-index: 5;
}
.video-wrap:hover .video-wrap__btn {
background: rgba(0,0,0,.7);
}
.video-wrap.is-playing .video-wrap__btn {
opacity: 0;
}
.video-wrap.is-playing:hover .video-wrap__btn {
opacity: 1;
}
.ig-tile__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(216,132,104,.25), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(212,160,66,.20), transparent 60%),
var(--bg-warm);
}
.ig-tile__emoji {
font-size: clamp(2rem, 5vw, 2.8rem);
filter: grayscale(.1);
opacity: .92;
}
.ig-tile__caption {
position: absolute;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 8px 10px 8px;
font-family: var(--sans);
font-size: .72rem;
font-weight: 600;
color: var(--white);
background: linear-gradient(to top, rgba(45,38,32,.78) 0%, rgba(45,38,32,0) 100%);
letter-spacing: .02em;
transition: opacity .2s var(--ease);
z-index: 2;
}
.ig-tile:hover .ig-tile__caption { opacity: 0; }
@media (max-width: 900px) {
.rebeka-grid { grid-template-columns: 1fr; }
.rebeka-grid__media { position: static; }
}
@media (max-width: 480px) {
.rebeka-numbers__value { font-size: 1.55rem; }
.ig-tile__caption { font-size: .66rem; padding: 6px 8px; }
}
/* DOCTOR-CARD CTA & SOON STATE ------------------------------ */
.doctor-card__cta {
display: inline-block;
margin-top: 14px;
font-family: var(--sans);
font-size: .82rem;
font-weight: 700;
color: var(--gold-deep);
border-bottom: 1.5px solid currentColor;
padding-bottom: 2px;
transition: color .2s var(--ease), transform .2s var(--ease);
}
.doctor-card__cta:hover { color: var(--gold); transform: translateX(2px); }
.doctor-card__cta--muted {
color: var(--ink-soft);
border-bottom-style: dashed;
font-style: italic;
cursor: default;
}
.doctor-card__cta--muted:hover { transform: none; color: var(--ink-soft); }
.doctor-card--soon { opacity: .85; }
.doctor-card--soon .doctor-card__photo {
filter: grayscale(.7) opacity(.7);
}
/* TIMELINE — vertical journey steps ------------------------- */
.timeline {
list-style: none;
margin: clamp(40px, 5vw, 56px) auto 0;
padding: 0;
position: relative;
max-width: 680px;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 31px;
width: 2px;
background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
border-radius: 2px;
}
.timeline__step {
position: relative;
display: grid;
grid-template-columns: 64px 1fr;
gap: 0 20px;
padding-bottom: 36px;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__marker {
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
z-index: 2;
}
.timeline__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
background: #1e1e1e;
border: 1px solid rgba(255,255,255,.1);
border-radius: 50%;
box-shadow: 0 4px 14px rgba(0,0,0,.2);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.timeline__step:hover .timeline__icon {
transform: scale(1.1);
border-color: var(--gold);
box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.timeline__content {
padding: 6px 24px 24px;
background: #1e1e1e;
border: 1px solid rgba(255,255,255,.08);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.15);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
position: relative;
}
.timeline__content::before {
content: '';
position: absolute;
top: 18px;
left: -8px;
width: 14px;
height: 14px;
background: #1e1e1e;
border-left: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
transform: rotate(45deg);
}
.timeline__step:hover .timeline__content {
transform: translateX(4px);
box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.timeline__num {
display: inline-block;
font-family: var(--display);
font-size: .68rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 14px 0 6px;
}
.timeline__title {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
}
.timeline__copy {
margin: 0;
font-family: var(--sans);
font-size: .9rem;
line-height: 1.6;
color: rgba(255,255,255,.6);
}
@media (max-width: 600px) {
.timeline::before { left: 23px; }
.timeline__step { grid-template-columns: 48px 1fr; gap: 0 14px; padding-bottom: 24px; }
.timeline__icon { width: 42px; height: 42px; font-size: 1.2rem; }
.timeline__content { padding: 4px 16px 16px; border-radius: 12px; }
.timeline__content::before { top: 14px; left: -6px; width: 10px; height: 10px; }
.timeline__title { font-size: 1rem; }
.timeline__copy { font-size: .84rem; }
}
/* VOICE GRID — modern testimonial cards --------------------- */
.voice-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin: clamp(40px, 5vw, 56px) 0 0;
padding: 0;
align-items: start;
}
.voice-card {
position: relative;
background: #1e1e1e;
border: 1px solid rgba(255,255,255,.08);
border-radius: 6px;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 20px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
overflow: hidden;
}
.voice-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.voice-card__accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
.voice-card--featured .voice-card__accent {
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--rose));
}
.voice-card--soon .voice-card__accent {
background: rgba(255,255,255,.15);
opacity: 1;
}
.voice-card__flag {
font-size: .72rem;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-weight: 700;
letter-spacing: .14em;
color: #fff;
line-height: 1;
}
.voice-card__quote {
margin: 0;
padding: 0;
font-family: var(--serif);
font-size: 1.05rem;
font-style: italic;
line-height: 1.65;
color: rgba(255,255,255,.85);
position: relative;
}
.voice-card__quote::before {
content: '\201C';
position: absolute;
top: -18px;
left: -6px;
font-family: var(--display);
font-size: 4rem;
color: var(--gold-soft);
line-height: 1;
opacity: .4;
pointer-events: none;
}
.voice-card__quote strong {
font-style: normal;
color: var(--gold-deep);
font-weight: 700;
}
.voice-card__stat {
display: flex;
align-items: baseline;
gap: 10px;
padding: 14px 18px;
background: rgba(255,255,255,.04);
border-radius: 4px;
border: 1px solid rgba(255,255,255,.1);
}
.voice-card__stat-num {
font-family: var(--display);
font-size: 1.8rem;
font-weight: 700;
color: var(--gold-deep);
letter-spacing: -.02em;
line-height: 1;
}
.voice-card__stat-label {
font-family: var(--sans);
font-size: .78rem;
color: rgba(255,255,255,.5);
line-height: 1.3;
}
.voice-card__footer {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.08);
margin-top: auto;
}
.voice-card__avatar {
width: 44px; height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-weight: 600;
font-size: .95rem;
color: var(--white);
background: linear-gradient(135deg, var(--gold-deep), var(--navy));
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(184,89,60,.2);
}
.voice-card__avatar--gold {
background: linear-gradient(135deg, var(--gold), var(--rose));
}
.voice-card__avatar--muted {
background: var(--ink-soft);
box-shadow: none;
}
.voice-card__name {
display: block;
font-family: var(--serif);
font-size: 1rem;
color: #fff;
line-height: 1.2;
}
.voice-card__detail {
font-family: var(--sans);
font-size: .8rem;
color: rgba(255,255,255,.5);
}
.voice-card__cta {
display: inline-block;
font-family: "Josefin Sans", var(--sans), sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold);
border-bottom: 1px solid rgba(212,160,66,.3);
padding-bottom: 2px;
transition: color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
align-self: flex-start;
}
.voice-card__cta:hover {
color: #fff;
border-color: #fff;
transform: translateX(3px);
}
.voice-card--featured {
background: #242424;
border-color: rgba(212,160,66,.25);
box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.voice-card--soon {
opacity: .7;
}
.voice-card--soon .voice-card__quote {
font-style: normal;
color: rgba(255,255,255,.45);
}
.voice-card--soon .voice-card__quote::before { display: none; }
.people-grid__hint {
margin: 32px 0 0;
text-align: center;
font-family: var(--script);
font-size: 1.2rem;
color: var(--ink-soft);
}
@media (max-width: 900px) {
.voice-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
/* REVIEW LIST — compact preview rows ------------------------ */
.review-list {
list-style: none;
margin: clamp(28px, 4vw, 40px) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.review-row {
padding: 22px 26px;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
align-items: start;
}
.review-row:last-child { border-bottom: none; }
.review-row__who {
display: flex;
flex-direction: column;
gap: 2px;
}
.review-row__who strong {
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 500;
color: var(--navy);
}
.review-row__who span {
font-family: var(--sans);
font-size: .82rem;
color: var(--ink-soft);
letter-spacing: .03em;
}
.review-row p {
margin: 0;
font-family: var(--sans);
font-size: .98rem;
line-height: 1.7;
color: var(--ink-soft);
}
.review-row--feature {
background: var(--amber-bg);
border-bottom-color: var(--amber-line);
}
.review-row--feature .review-row__who strong { color: var(--gold-deep); }
@media (max-width: 720px) {
.review-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 22px; }
}
/* =========================================================
TRAVEL CARDS — travel.html destination grid
========================================================= */
.travel-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.travel-card {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 28px 26px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.travel-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,.3);
border-color: rgba(255,255,255,.15);
}
.travel-card__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.travel-card__title {
margin: 0;
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 500;
color: #fff;
}
.travel-card__distance {
font-family: var(--sans);
font-size: .78rem;
color: rgba(255,255,255,.45);
white-space: nowrap;
letter-spacing: .04em;
}
.travel-card__body {
margin: 0;
font-size: .95rem;
line-height: 1.65;
color: rgba(255,255,255,.7);
flex: 1;
}
.travel-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.travel-card__tag {
display: inline-block;
padding: 4px 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 100px;
font-family: var(--sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
}
@media (max-width: 768px) {
.travel-grid { grid-template-columns: 1fr; gap: 18px; }
.travel-card { padding: 22px 20px; }
.travel-card__title { font-size: 1.08rem; }
}
/* ---------- Travel includes — what we handle ---------- */
.travel-includes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 48px;
}
.travel-includes__item {
display: flex;
gap: 18px;
align-items: flex-start;
background: #1a1a1a;
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 24px 22px;
transition: border-color .3s var(--ease);
}
.travel-includes__item:hover {
border-color: rgba(255,255,255,.2);
}
.travel-includes__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255,255,255,.06);
color: var(--gold);
}
.travel-includes__title {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 500;
color: #fff;
}
.travel-includes__text {
margin: 0;
font-size: .9rem;
line-height: 1.6;
color: rgba(255,255,255,.6);
}
@media (max-width: 768px) {
.travel-includes { grid-template-columns: 1fr; gap: 16px; }
.travel-includes__item { padding: 20px 18px; }
}
/* ---------- Donate card — pricing.html ---------- */
.donate-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: start;
background: var(--white);
border-radius: var(--radius);
padding: 36px 32px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--gold);
}
.donate-card__body p {
margin: 0 0 14px;
line-height: 1.7;
}
.donate-card__body p:last-child { margin-bottom: 0; }
.donate-card__aside {
text-align: center;
min-width: 140px;
}
.donate-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-warm, #faf5ec);
color: var(--gold);
margin-bottom: 12px;
}
.donate-card__note {
margin: 0;
font-size: .82rem;
color: var(--ink-soft);
line-height: 1.5;
}
@media (max-width: 640px) {
.donate-card {
grid-template-columns: 1fr;
padding: 28px 24px;
}
.donate-card__aside {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
}
.donate-card__icon { margin-bottom: 0; }
}
/* HERO TRUST OVERRIDES — keep launched badge tidy ----------- */
.hero__badge span { opacity: .75; margin-left: 4px; }