:root {
--background: hsl(0, 0%, 100%);
--foreground: hsl(210, 15%, 15%);
--primary: hsl(210, 70%, 50%);
--primary-foreground: hsl(0, 0%, 98%);
--secondary: hsl(150, 40%, 60%);
--secondary-foreground: hsl(210, 15%, 15%);
--muted: hsl(210, 40%, 96%);
--muted-foreground: hsl(210, 15%, 45%);
--accent: hsl(180, 60%, 85%);
--accent-foreground: hsl(210, 15%, 15%);
--destructive: hsl(0, 84.2%, 60.2%);
--destructive-foreground: hsl(210, 40%, 98%);
--border: hsl(210, 20%, 90%);
--input: hsl(210, 20%, 90%);
--ring: hsl(210, 70%, 50%);
--medical-blue: hsl(210, 70%, 50%);
--medical-blue-light: hsl(210, 60%, 85%);
--medical-blue-dark: hsl(210, 80%, 35%);
--medical-teal: hsl(180, 60%, 55%);
--medical-green: hsl(150, 40%, 60%);
--medical-gray: hsl(210, 15%, 95%);
--text-white: #fff;
--gradient-hero: linear-gradient(
135deg,
var(--medical-blue),
var(--medical-teal)
);
--gradient-card: linear-gradient(
180deg,
var(--background),
var(--medical-gray)
);
--shadow-medical: 0 4px 20px -2px hsl(210, 70%, 50%, 0.1);
--shadow-card: 0 2px 10px -1px hsl(210, 70%, 50%, 0.05);
--radius: 0.5rem;
--medical-teal-h: 173;
--medical-teal-s: 85%;
--medical-teal-l: 31%;
--primary-h: 221;
--primary-s: 83%;
--primary-l: 58%;
--shrivas-bg-blue: #005a86;
--background: hsl(0, 0%, 100%);
--foreground: hsl(215, 25%, 15%);
--card: hsl(0, 0%, 100%);
--card-foreground: hsl(215, 25%, 15%);
--primary: hsl(210, 85%, 35%);
--primary-foreground: hsl(0, 0%, 100%);
--secondary: hsl(187, 85%, 55%);
--accent: hsl(187, 85%, 55%);
--muted-foreground: hsl(215, 15%, 50%);
--border: hsl(210, 25%, 88%);
--shadow-card:
0 4px 6px -1px rgba(30, 86, 133, 0.08),
0 2px 4px -1px rgba(30, 86, 133, 0.04);
--shadow-hover:
0 10px 25px -5px rgba(30, 86, 133, 0.15),
0 8px 10px -6px rgba(30, 86, 133, 0.08);
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family:
ui-sans-serif,
system-ui,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
Segoe UI Symbol,
"Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
scroll-padding-top: 100px; /* Account for fixed header */
}
body {
background: var(--background);
color: var(--foreground);
margin: 0;
padding: 0;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.container-fluid {
max-width: 100%;
padding: 0 2rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: bold;
margin: 0 0 0.5em 0;
}
ol,
ul,
menu {
margin: 0;
padding: 0;
}
.text-white {
color: var(--text-white);
}
.shrivas-bg-blue {
background-color: var(--shrivas-bg-blue);
}
.text-center {
text-align: center;
}
.text-primary {
color: var(--primary);
}
.text-secondary {
color: var(--secondary);
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-background {
color: var(--background);
}
.bg-background {
background: var(--background);
}
.bg-foreground {
background: var(--foreground);
}
.bg-light {
background: var(--medical-gray);
}
.bg-gradient {
background: var(--gradient-hero);
}
.bg-gradient-card {
background: var(--gradient-card);
}
.block {
display: block;
}
/* Flex, Grid, and Layout Utilities */
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.col-span-2 {
grid-column: span 2;
}
.col-span-1 {
grid-column: span 1;
}
/* Spacing Utilities */
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.pt-0 {
padding-top: 0;
}
.pt-6 {
padding-top: 1.5rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.mt-0 {
margin-top: 0;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* Border, Radius, and Shadow */
.border {
border: 1px solid var(--border);
}
.border-b {
border-bottom: 1px solid var(--border);
}
.border-t {
border-top: 1px solid var(--border);
}
.border-l-2 {
border-left: 2px solid var(--primary);
}
.border-background\/20 {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-full {
border-radius: 9999px;
}
.shadow-medical {
box-shadow: var(--shadow-medical);
}
.shadow-card {
box-shadow: var(--shadow-card);
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.box-sizing-border-box {
box-sizing: border-box;
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-size: 1rem;
font-weight: 500;
border-radius: 0.375rem;
padding: 0.5em 1.5em;
border: none;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background: hsl(210, 70%, 45%);
}
.btn-outline {
background: var(--background);
color: var(--primary);
border: 1px solid var(--primary);
}
.btn-outline:hover {
background: var(--accent);
color: var(--accent-foreground);
}
.btn-secondary {
background: var(--secondary);
color: var(--secondary-foreground);
}
.btn-secondary:hover {
background: hsl(150, 40%, 55%);
}
.btn-ghost {
background: transparent;
color: var(--primary);
}
.btn-ghost:hover {
background: var(--background);
color: var(--accent-foreground);
}
.btn-lg {
font-size: 1.125rem;
padding: 0.75em 2em;
}
.btn-sm {
font-size: 0.875rem;
padding: 0.25em 1em;
}
.w-full {
width: 100%;
}
.w-75 {
width: 75%;
}
.w-4 {
width: 1rem;
}
/* Badge Styles */
.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25em 0.75em;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s;
}
.badge-default {
background: var(--shrivas-bg-blue);
color: var(--primary-foreground);
}
.badge-secondary {
background: var(--secondary);
color: var(--secondary-foreground);
}
.badge-outline {
background: transparent;
color: var(--foreground);
border: 1px solid var(--border);
}
/* Card Styles */
.card,
.about-card,
.doctor-card,
.gallery-card,
.news-card,
.sidebar-card {
background: var(--card, var(--background));
color: var(--card-foreground, var(--foreground));
border-radius: var(--radius);
box-shadow: var(--shadow-card);
border: 1px solid var(--border);
padding: 1.5rem;
}
/* Misc */
.text-xs {
font-size: 0.75rem;
}
.font-bold {
font-weight: bold;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.leading-tight {
line-height: 1.2;
}
.transition-shadow {
transition: box-shadow 0.2s;
}
.transition-transform {
transition: transform 0.2s;
}
.transition-opacity {
transition: opacity 0.2s;
}
.text-sm {
font-size: 0.875rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.text-4xl {
font-size: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
}
.lg\:text-6xl {
font-size: 3.75rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-2xl {
max-width: 42rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-full {
border-radius: 9999px;
}
.object-cover {
object-fit: cover;
}
/* Icon SVGs (Lucide style, minimal) */
.icon-phone::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-heart::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-award::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-users::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-menu::before {
content: "";
display: inline-block;
width: 2em;
height: 2em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-mail::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-calendar::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-graduation::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-stethoscope::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-microscope::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-shield::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-play::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-zoom-in::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-facebook::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-twitter::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-linkedin::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-map-pin::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-clock::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-arrow-right::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.nav-links a {
text-decoration: none;
}
.text-decoration-none {
text-decoration: none;
}
/* Responsive Styles */
@media (max-width: 1024px) {
.container {
padding: 0 1rem;
}
.grid-4 {
grid-template-columns: 1fr 1fr;
}
.footer-main.grid-4 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.doctors-list,
.gallery-list,
.about-cards,
.news-main {
grid-template-columns: 1fr !important;
}
.footer-main.grid-4 {
grid-template-columns: 1fr;
}
.hero-section,
.about-section,
.doctors-section,
.gallery-section,
.news-section,
.footer {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.5rem;
}
.nav-links {
display: none;
}
.show-md {
display: inline-flex !important;
}
.hidden-md {
display: none !important;
}
}
@media (min-width: 769px) {
.show-md {
display: none !important;
}
.hidden-md {
display: flex !important;
}
.md\:w-75 {
width: 75%;
}
}
@media (max-width: 480px) {
.container {
padding: 0 0.5rem;
}
.hero-title,
.section-title {
font-size: 1.25rem;
}
.btn,
.btn-lg,
.btn-sm {
font-size: 0.9rem;
padding: 0.5em 1em;
}
.sm\:w-100 {
width: 100%;
}
}
/* Responsive Grid Columns */
@media (min-width: 768px) {
.md\:grid-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.lg\:grid-cols-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.lg\:grid-cols-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.lg\:col-span-2 {
grid-column: span 2;
}
.lg\:col-span-1 {
grid-column: span 1;
}
}
@media (min-width: 1024px) {
.lg\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
}
/* Gaps */
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-12 {
gap: 3rem;
}
/* --- Spacing Utilities --- */
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.pt-0 {
padding-top: 0;
}
.pt-6 {
padding-top: 1.5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-4 {
padding-left: 1rem;
}
.pr-0 {
padding-right: 0;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
/* --- Sizing Utilities --- */
.w-full {
width: 100%;
}
.w-2 {
width: 0.5rem;
}
.w-12 {
width: 3rem;
}
.w-16 {
width: 4rem;
}
.w-20 {
width: 5rem;
}
.h-20 {
height: 5rem;
}
.w-36 {
width: 9rem;
}
.h-36 {
height: 9rem;
}
.w-24 {
width: 6rem;
}
.w-28 {
width: 7rem;
}
.w-32 {
width: 8rem;
}
.w-48 {
width: 12rem;
}
.w-64 {
width: 16rem;
}
.w-96 {
width: 24rem;
}
.h-full {
height: 100%;
}
.h-2 {
height: 0.5rem;
}
.h-3 {
height: 0.75rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-10 {
height: 2.5rem;
}
.h-11 {
height: 2.75rem;
}
.h-12 {
height: 3rem;
}
.h-16 {
height: 4rem;
}
.h-24 {
height: 6rem;
}
.h-28 {
height: 7rem;
}
.h-32 {
height: 8rem;
}
.h-48 {
height: 12rem;
}
.h-64 {
height: 16rem;
}
.h-96 {
height: 24rem;
}
.min-h-screen {
min-height: 100vh;
}
/* --- Positioning & Z-Index --- */
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.top-0 {
top: 0;
}
.top-3 {
top: 0.75rem;
}
.top-4 {
top: 1rem;
}
.right-4 {
right: 1rem;
}
.top-24 {
top: 6rem;
}
.-bottom-2 {
bottom: -0.5rem;
}
.-right-2 {
right: -0.5rem;
}
.left-0 {
left: 0;
}
.left-3 {
left: 0.75rem;
}
.right-0 {
right: 0;
}
.z-50 {
z-index: 50;
}
.z-100 {
z-index: 100;
}
/* --- Typography --- */
.font-bold {
font-weight: bold;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.leading-tight {
line-height: 1.2;
}
.leading-relaxed {
line-height: 1.625;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-base {
font-size: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.text-4xl {
font-size: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-primary {
color: var(--shrivas-bg-blue);
}
.text-primary-foreground {
color: var(--primary-foreground);
}
.text-background {
color: var(--background);
}
.text-background\/80 {
color: rgba(255, 255, 255, 0.8);
}
.text-background\/60 {
color: rgba(255, 255, 255, 0.6);
}
.text-blue-500 {
color: #3b82f6;
}
.text-blue-700 {
color: #1d4ed8;
}
.text-gray-600 {
color: #4b5563;
}
.text-gray-100 {
color: #f3f4f6;
}
.underline {
text-decoration: underline;
}
/* --- Color & Background Utilities --- */
.bg-background {
background: var(--background);
}
.bg-foreground {
background: var(--foreground);
}
.bg-white\/90 {
background-color: #ffffffe6;
}
.bg-primary {
background: var(--primary);
}
.bg-primary\/10 {
background: rgba(56, 189, 248, 0.1);
}
.bg-black\/0 {
background: rgba(0, 0, 0, 0);
}
.bg-black\/20 {
background: rgba(0, 0, 0, 0.2);
}
.bg-medical-blue-light {
background: hsl(210, 60%, 85%);
}
.bg-medical-gray\/30 {
background: rgba(241, 245, 249, 0.3);
}
.bg-gradient-to-br {
background: linear-gradient(
135deg,
var(--medical-blue-light),
var(--background)
);
}
.bg-gradient-to-r {
background: linear-gradient(
90deg,
rgba(56, 189, 248, 0.1),
rgba(45, 212, 191, 0.1)
);
}
.from-primary\/10 {
background: rgba(56, 189, 248, 0.1);
}
.to-medical-teal\/10 {
background: rgba(45, 212, 191, 0.1);
}
.--tw-gradient-to-position {
}
/* --- Effects & Transitions --- */
.shadow-card {
box-shadow: 0 2px 10px -1px rgba(56, 189, 248, 0.05);
}
.shadow-medical {
box-shadow: 0 4px 20px -2px rgba(56, 189, 248, 0.1);
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-md {
border-radius: 0.375rem;
}
.transition-colors {
transition-property:
color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.transition-shadow {
transition: box-shadow 0.2s;
}
.transition-transform {
transition: transform 0.2s;
}
.transition-opacity {
transition: opacity 0.2s;
}
.duration-300 {
transition-duration: 300ms;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.hover\:shadow-card:hover {
box-shadow: 0 2px 10px -1px rgba(56, 189, 248, 0.15);
}
.hover\:bg-primary\/80:hover {
background: rgba(56, 189, 248, 0.8);
}
.hover\:text-primary:hover {
color: var(--primary);
}
.hover\:bg-background\/10:hover {
background: rgba(255, 255, 255, 0.1);
}
.hover\:text-blue-700:hover {
color: #1d4ed8;
}
.hover\:underline:hover {
text-decoration: underline;
}
/* --- Flex & Grid --- */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-end {
justify-content: flex-end;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: 1fr;
}
.grid-cols-2 {
grid-template-columns: 1fr 1fr;
}
.grid-cols-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-12 {
gap: 3rem;
}
.col-span-1 {
grid-column: span 1;
}
.col-span-2 {
grid-column: span 2;
}
.hidden {
display: none !important;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.group {
position: relative;
padding: 0;
}
.group-hover\:scale-105:hover {
transform: scale(1.05);
}
.group-hover\:opacity-100:hover {
opacity: 1;
}
.group-hover\:bg-black\/20:hover {
background: rgba(0, 0, 0, 0.2);
}
/* --- Misc --- */
.space-x-2 > :not(:last-child) {
margin-right: 0.5rem;
}
.space-x-3 > :not(:last-child) {
margin-right: 0.75rem;
}
.space-x-4 > :not(:last-child) {
margin-right: 1rem;
}
.space-x-6 > :not(:last-child) {
margin-right: 1.5rem;
}
.space-x-8 > :not(:last-child) {
margin-right: 2rem;
}
.space-y-1 > :not(:last-child) {
margin-bottom: 0.25rem;
}
.space-y-3 > :not(:last-child) {
margin-bottom: 0.75rem;
}
.space-y-4 > :not(:last-child) {
margin-bottom: 1rem;
}
.space-y-6 > :not(:last-child) {
margin-bottom: 1.5rem;
}
/* --- Animation Placeholders --- */
.animate-fade-in {
animation: fadeIn 0.8s ease;
}
.animate-slide-in-right {
animation: slideInRight 0.8s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* --- Utility for absolute fill --- */
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
/* --- Utility for border color --- */
.border-border {
border-color: var(--border);
}
.border-primary\/20 {
border-color: rgba(56, 189, 248, 0.2);
}
/* --- Utility for font color --- */
.text-foreground {
color: var(--foreground);
}
/* --- Utility for background color --- */
.bg-black\/0 {
background: rgba(0, 0, 0, 0);
}
/* --- Utility for hover states --- */
.hover\:bg-accent:hover {
background: var(--accent);
}
.hover\:text-accent-foreground:hover {
color: var(--accent-foreground);
}
/* --- Utility for pointer events --- */
.pointer-events-none {
pointer-events: none;
}
/* --- Utility for disabled states --- */
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.icon-calendar,
.icon-clock,
.icon-users,
.icon-map-pin,
.icon-mail,
.icon-heart,
.icon-award,
.icon-graduation,
.icon-facebook,
.icon-twitter,
.icon-linkedin,
.icon-menu,
.icon-play,
.icon-zoom-in,
.icon-arrow-right {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.aspect-ratio {
aspect-ratio: 1 / 1;
}
.overflow-hidden {
overflow: hidden;
}
/* Gallery image styles */
/* .gallery-image:hover img {
transform: scale(1.1);
} */
.gallery-overlay {
position: absolute;
inset: 0;
background-color: hsl(var(--primary) / 0.2);
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* Allow clicks to pass through to the image */
}
.gallery-image:hover .gallery-overlay {
opacity: 1;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
@media (min-width: 768px) {
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 640px) {
.sm\:flex-row {
flex-direction: row !important;
}
}
/* Responsive Grid */
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
}
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.md\:flex {
display: flex;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* Gradient backgrounds */
.gradient-to-right {
background-image: linear-gradient(
to right,
hsla(221, 83%, 58%, 0.1),
hsla(221, 83%, 58%, 0)
);
}
.to-medical-teal-10 {
--gradient-to: hsla(
var(--medical-teal-h),
var(--medical-teal-s),
var(--medical-teal-l),
0.1
);
}
.from-primary-10 {
--gradient-from: hsla(
var(--primary-h),
var(--primary-s),
var(--primary-l),
0.1
);
--gradient-to: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0);
--gradient-stops: var(--gradient-from), var(--gradient-to);
}
/* Text sizes */
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
/* Max width utilities */
.max-w-2xl {
max-width: 42rem;
}
/* Spacing utilities */
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
/* Flex utilities */
.justify-center {
justify-content: center;
}
.space-x-4 > * + * {
margin-left: 1rem;
}
/* Button size variants */
.btn-lg {
height: 3rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
/* Play icon */
.icon-play {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
/* Procedures Section Utilities */
.bg-medical-teal\/10 {
background: rgba(45, 212, 191, 0.1);
}
.text-medical-teal {
color: #14b8a6;
}
.bg-accent\/10 {
background: rgba(244, 63, 94, 0.1);
}
.text-accent {
color: #f43f5e;
}
.bg-medical-blue\/10 {
background: rgba(56, 189, 248, 0.1);
}
.text-medical-blue {
color: #38bdf8;
}
.bg-primary\/5 {
background: rgba(56, 189, 248, 0.05);
}
.to-medical-teal\/5 {
--tw-gradient-to: rgba(45, 212, 191, 0.05);
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.font-medium {
font-weight: 500;
}
.h-full {
height: 100%;
}
.border-border {
border-color: var(--border);
}
.hover\:bg-primary\/90:hover {
background: rgba(56, 189, 248, 0.9);
}
.hover\:bg-muted:hover {
background: var(--muted);
}
.icon-activity {
display: inline-block;
width: 2rem;
height: 2rem;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
/* .icon-clock { display: inline-block; width: 2rem; height: 2rem; background: url('data:image/svg+xml;utf8,') no-repeat center/contain; } */
.icon-scissors {
display: inline-block;
width: 2rem;
height: 2rem;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
/* Lazy Loading Styles */
.lazy {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.lazy.loaded {
opacity: 1;
}
/* Gallery Image Loading States */
.gallery-image {
position: relative;
overflow: hidden;
break-inside: avoid;
margin-bottom: 1rem;
padding: 6px;
/* border-radius: 12px; */
background: rgba(255, 255, 255, 0.1); /* transparent white */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari support */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.gallery-image img {
width: 100%;
height: auto;
display: block;
/* object-fit: cover; */
transition:
transform 0.5s ease,
opacity 0.3s ease;
}
.gallery-image img.lazy {
opacity: 0;
}
.gallery-image img.loaded {
opacity: 1;
}
#gallery-grid {
column-count: 4;
}
/* Responsive columns */
@media (max-width: 1200px) {
#gallery-grid {
column-count: 3;
}
}
@media (max-width: 768px) {
#gallery-grid {
column-count: 2;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
#gallery-grid {
column-count: 1;
}
}
/* Loading Placeholder */
.loading-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f3f4f6;
z-index: 2;
}
.loading-spinner {
width: 30px;
height: 30px;
border: 3px solid #e5e7eb;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 8px;
}
.loading-text {
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Lightbox Styles */
.lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.lightbox-content {
position: relative;
overflow: hidden;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 0.5rem;
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: white;
font-size: 30px;
cursor: pointer;
padding: 10px;
transition: color 0.2s ease;
}
.lightbox-close:hover {
color: #3b82f6;
}
/* Responsive Gallery Grid */
@media (max-width: 640px) {
.gallery-image {
min-height: 150px;
}
}
@media (max-width: 480px) {
.gallery-image {
min-height: 120px;
}
}
/* Mobile menu styles */
.nav-links-mobile {
max-height: 0;
transition: max-height 0.3s ease;
overflow: hidden;
background: var(--background);
border-top: 1px solid var(--border);
}
.nav-links-mobile.active {
max-height: 1200px;
}
.nav-links-mobile a {
transition: color 0.2s ease;
padding: 1rem;
font-size: 20px;
text-decoration: none;
display: block;
text-align: center;
border-bottom: 1px solid var(--border);
}
.nav-links-mobile a:last-child {
border-bottom: none;
}
.nav-links-mobile a:hover {
color: var(--primary);
background: var(--accent);
}
/* Desktop dropdown */
.nav-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
}
.nav-caret {
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.2s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
transform: translateY(1px) rotate(225deg);
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 8px);
min-width: 13rem;
padding: 0.5rem 0;
background: var(--background);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 60;
}
.nav-dropdown-menu::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 4px);
}
.nav-dropdown-menu a {
display: block;
padding: 0.6rem 1.1rem;
white-space: nowrap;
text-decoration: none;
margin: 0;
}
.nav-dropdown-menu a:hover {
background: var(--accent);
color: var(--primary);
}
/* Mobile grouped links */
.nav-mobile-group {
border-bottom: 1px solid var(--border);
}
.nav-mobile-label {
display: block;
padding: 1rem 1rem 0.35rem;
text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.nav-links-mobile .nav-mobile-sub {
font-size: 17px;
padding: 0.7rem 1rem;
border-bottom: 0;
}
.cursor-pointer {
cursor: pointer;
}
.each-post img {
width: 100%;
}
.circle-bg {
position: relative;
width: 420px;
height: 420px;
background-color: #92b4c9;
border-radius: 50%;
}
.circle-bg .ragahvi-header {
position: absolute;
width: 320px;
left: 10%;
top: 20px;
}
.throat-svg {
position: absolute;
background-color: #fff;
border-radius: 50%;
padding: 10px;
width: 40px;
height: 40px;
right: 6%;
top: 10%;
}
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
z-index: 1000;
cursor: pointer;
text-decoration: none;
background-color: white;
border-radius: 50%;
}
/* floating whatsapp button with circular text around the icon */
.whatsapp-float {
position: fixed;
width: 90px;
height: 90px;
bottom: 40px;
right: 40px;
z-index: 1000;
cursor: pointer;
text-decoration: none;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
}
/* svg that draws text around the button's perimeter */
.whatsapp-text-circle {
position: absolute;
top: 4px;
left: 0;
width: 100%;
height: 100%;
/* rotate so the text path starts at the top instead of the right */
transform: rotate(-90deg);
pointer-events: none;
}
.whatsapp-text-circle text {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
fill: #333;
}
.whatsapp-icon {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
box-shadow: 2px 6px 19px var(--secondary);
transition: transform 0.3s ease;
}
.whatsapp-icon:hover {
transform: scale(1.1);
}
/* Legacy: the header no longer switches to position:fixed on scroll.
The nav itself is position:sticky, which avoids the layout jump. */
.menu_fixed {
background-color: #fff;
}
@media (max-width: 768px) {
.circle-bg {
width: 300px;
height: 300px;
}
.circle-bg .ragahvi-header {
width: 220px;
left: 5%;
}
.throat-svg {
right: 4%;
top: 8%;
}
}
@media (max-width: 400px) {
.circle-bg {
width: 200px;
height: 200px;
}
.circle-bg .ragahvi-header {
width: 170px;
left: 5%;
}
.throat-svg {
right: 4%;
top: 8%;
}
}
.shorts-section {
max-width: 100%;
padding: 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.shorts-title {
font-size: 1.8rem;
margin-bottom: 4px;
padding-left: 10px;
color: #111;
}
.shorts-slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
background: #000;
}
.shorts-slide.active {
opacity: 1;
z-index: 1;
}
.shorts-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
font-size: 20px;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 10;
transition:
background 0.2s ease,
transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.shorts-nav:hover {
background: #f0f0f0;
transform: translateY(-50%) scale(1.05);
}
.shorts-nav.prev {
left: 0px;
background-color: var(--primary);
color: white;
}
.shorts-nav.next {
right: 0px;
background-color: var(--primary);
color: white;
}
@media (max-width: 500px) {
.shorts-nav.prev {
left: 5px;
}
.shorts-nav.next {
right: 5px;
}
/* .shorts-slider-wrapper {
width: 90%;
} */
}
#moveToTopBtn {
position: fixed;
bottom: 50px;
left: 50px;
z-index: 50;
background-color: #1e40af72; /* blue-800 */
color: white;
border: none;
outline: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
display: none; /* Hidden by default */
transition:
opacity 0.3s,
transform 0.3s;
}
#moveToTopBtn:hover {
background-color: #2563eb; /* blue-600 */
transform: scale(1.1);
}
/* Instagrram */
.insta-slider-section {
max-width: 100%;
padding: 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.insta-slider-wrapper {
position: relative;
width: 320px;
min-height: 520px;
margin: 0 auto;
overflow: hidden;
}
.insta-slider {
position: relative;
width: 100%;
height: 100%;
}
.insta-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
z-index: 0;
}
.insta-slide.active {
opacity: 1;
z-index: 1;
}
.insta-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
font-size: 20px;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.insta-nav:hover {
background: #f0f0f0;
}
.insta-nav.prev {
left: 0;
background-color: var(--primary);
color: white;
}
.insta-nav.next {
right: 0;
background-color: var(--primary);
color: white;
}
@media (max-width: 500px) {
.insta-nav.prev {
left: 5px;
}
.insta-nav.next {
right: 5px;
}
/* .insta-slider-wrapper {
width: 90%;
} */
}
.permalink-blog {
color: #000;
font-weight: 600;
font-size: 1.2rem;
text-decoration: none;
}
.blog-details-hero {
padding: 3rem;
}
.shorts-logo {
width: 26px;
height: 26px;
padding-top: 4px;
}
.company-name {
color: var(--primary-foreground);
text-decoration: none;
}
.event_registration {
display: none;
}
#home {
background-color: var(--shrivas-bg-blue);
}
/* --- Home hero (styled after the VASCON 2026 hero) --- */
.hero-home {
--hero-blue: var(--shrivas-bg-blue, #005a86);
--hero-teal: #1aa6b7;
--hero-brand-2: var(--accent, #2563eb);
--hero-line: rgba(255, 255, 255, 0.24);
--hero-glass: rgba(255, 255, 255, 0.14);
--hero-radius: 0.5rem;
--hero-radius-lg: 0.85rem;
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(900px 420px at 18% 12%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
radial-gradient(820px 460px at 86% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%),
linear-gradient(135deg, var(--hero-blue), var(--hero-teal));
border-bottom: 1px solid var(--hero-line);
}
.hero-home * {
box-sizing: border-box;
}
.hero-home::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='520' viewBox='0 0 920 520'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M20 250 C 120 210, 160 310, 260 270 C 360 230, 400 340, 520 290 C 640 240, 700 320, 820 280'/%3E%3Cpath d='M40 310 C 140 270, 190 360, 290 320 C 390 280, 430 390, 560 340 C 690 290, 750 370, 880 330'/%3E%3Cpath d='M70 120 C 140 140, 190 170, 250 210 C 310 250, 370 290, 450 300 C 540 310, 620 280, 690 230 C 750 190, 790 150, 860 130'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='760' cy='120' r='80'/%3E%3Ccircle cx='760' cy='120' r='140'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 75% 35%;
background-size: 900px auto;
}
.hero-inner {
position: relative;
z-index: 1;
padding-top: 42px;
padding-bottom: 18px;
}
.hero-layout {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
align-items: center;
}
.hero-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.26);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.hero-title {
margin: 14px 0 12px;
letter-spacing: -0.02em;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.1;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
max-width: 24ch;
}
.hero-subtitle {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
line-height: 1.55;
max-width: 62ch;
}
.hero-main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
align-items: center;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.hero-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--hero-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.22);
background: var(--hero-glass);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.hero-stat-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.95);
font-size: 1.05rem;
}
.hero-stat-value {
font-size: 1.25rem;
font-weight: 850;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero-stat-label {
font-size: 13px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.88);
margin-top: 2px;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.hero-home .btn {
padding: 0.65em 1.25em;
border: 1px solid transparent;
border-radius: 0.375rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 120ms ease;
}
.hero-home .btn:hover {
transform: translateY(-1px);
}
.hero-btn-primary {
background: rgba(255, 255, 255, 0.96);
color: var(--hero-blue);
border-color: rgba(255, 255, 255, 0.26);
}
.hero-btn-primary:hover {
background: #fff;
color: var(--hero-blue);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}
.hero-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.hero-btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.hero-locations {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 12px 0;
}
.hero-locations-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin-right: 2px;
}
.hero-locations-label svg {
width: 16px;
height: 16px;
fill: none;
stroke: #ffd166;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-location {
display: inline-flex;
align-items: center;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--hero-blue);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.26);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
transition: transform 120ms ease, box-shadow 0.2s;
}
.hero-location:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
color: var(--hero-blue);
}
.hero-doctor {
text-align: center;
}
.hero-doctor .circle-bg {
margin: 0 auto 14px;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
}
.hero-doctor-name {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 2px;
}
.hero-doctor-role {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 8px;
}
.hero-doctor-creds {
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.hero-brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
padding: 22px 20px;
border-radius: 18px;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
color: #0f172a;
}
.hero-brand-logo {
display: block;
width: 100%;
max-width: 300px;
height: auto;
}
.hero-brand-rule {
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--hero-blue), var(--hero-teal));
margin: 14px 0 12px;
}
.hero-brand-tagline {
margin: 0;
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.1;
font-weight: 850;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--hero-blue), var(--hero-teal));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-brand-sub {
margin: 8px 0 0;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #475569;
}
.hero-wave {
height: 22px;
margin-top: 18px;
opacity: 0.65;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
@media (min-width: 640px) {
.hero-main-grid {
grid-template-columns: 1.15fr 1fr;
}
}
@media (min-width: 1024px) {
.hero-layout {
grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
gap: 28px;
}
.hero-inner {
padding-top: 56px;
}
.hero-home .circle-bg {
width: 300px;
height: 300px;
}
.hero-home .circle-bg .ragahvi-header {
width: 236px;
left: 10%;
top: 12px;
}
}
@media (max-width: 768px) {
.hero-wave {
background-size: 900px 40px;
}
}
/* --- About Me --- */
.about-me {
--am-blue: var(--shrivas-bg-blue, #005a86);
--am-teal: #1aa6b7;
padding: 4.5rem 0;
background:
radial-gradient(900px 420px at 10% 0%, rgba(0, 90, 134, 0.08), rgba(0, 90, 134, 0) 62%),
radial-gradient(800px 420px at 92% 20%, rgba(26, 166, 183, 0.08), rgba(26, 166, 183, 0) 62%),
var(--background);
border-bottom: 1px solid var(--border);
}
.about-me * {
box-sizing: border-box;
}
.about-me-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: start;
}
.about-me-media {
max-width: 420px;
margin: 0 auto;
width: 100%;
}
.about-me-photo {
position: relative;
border-radius: 1.25rem;
padding: 6px;
background: linear-gradient(135deg, var(--am-blue), var(--am-teal));
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}
.about-me-photo img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(1.25rem - 6px);
}
.about-me-highlights {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.about-me-highlights li {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
background: var(--card, #fff);
border: 1px solid var(--border);
border-radius: 0.85rem;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.about-me-highlight-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 90, 134, 0.14), rgba(26, 166, 183, 0.14));
border: 1px solid rgba(0, 90, 134, 0.18);
}
.about-me-highlight-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: rgba(0, 90, 134, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.about-me-highlight-title {
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
color: var(--foreground);
}
.about-me-highlight-text {
font-size: 0.8rem;
color: var(--muted-foreground);
margin-top: 2px;
}
.about-me-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--am-teal);
margin-bottom: 0.75rem;
}
.about-me-name {
margin: 0 0 0.35rem;
line-height: 1.15;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--am-blue), var(--am-teal));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-me-role {
margin: 0 0 1rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--foreground);
}
.about-me-tags {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.about-me-tags li {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.85rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
color: var(--am-blue);
background: rgba(0, 90, 134, 0.08);
border: 1px solid rgba(0, 90, 134, 0.16);
}
.about-me-intro p,
.about-me-more-body p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.about-me-intro p:first-child {
font-size: 1.125rem;
color: var(--foreground);
font-weight: 500;
}
/* From the Founder section: full intro reads in black, not muted grey */
.dr-statement-body .about-me-intro p,
.dr-statement-body .about-me-intro p:first-child,
main:not(.vgym) .dr-statement-body .dr-statement-creds li {
font-size: 1.0625rem;
font-weight: 400;
color: #000;
}
.about-me-more-row {
margin-top: 0.75rem;
}
.about-me-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65em 1.3em;
border-radius: 0.375rem;
border: 1px solid transparent;
font-weight: 600;
color: #fff !important;
background: linear-gradient(135deg, var(--am-blue), var(--am-teal));
box-shadow: 0 10px 24px rgba(0, 90, 134, 0.22);
text-decoration: none;
transition: transform 120ms ease, box-shadow 0.2s;
}
.about-me-more-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(0, 90, 134, 0.28);
}
.about-me-more-arrow {
transition: transform 0.2s ease;
}
.about-me-more-btn:hover .about-me-more-arrow {
transform: translateX(3px);
}
.about-me-h3 {
--am-blue: var(--shrivas-bg-blue, #005a86);
--am-teal: #1aa6b7;
position: relative;
margin: 1.75rem 0 0.75rem;
padding-left: 1rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
}
.about-me-h3:first-child {
margin-top: 0;
}
.about-me-h3::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--am-blue), var(--am-teal));
}
@media (min-width: 1024px) {
.about-me-grid {
grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
gap: 3.5rem;
}
.about-me-media {
position: sticky;
top: 7rem;
margin: 0;
}
}
/* --- Services (tabbed, styled after the VASCON schedule) --- */
.services {
--sv-blue: var(--shrivas-bg-blue, #005a86);
--sv-teal: #1aa6b7;
--sv-line: rgba(15, 23, 42, 0.12);
padding: 4.5rem 0;
background:
radial-gradient(900px 420px at 10% 0%, rgba(0, 90, 134, 0.1), rgba(0, 90, 134, 0) 62%),
radial-gradient(800px 420px at 92% 20%, rgba(26, 166, 183, 0.1), rgba(26, 166, 183, 0) 62%),
var(--muted, #f8fafc);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.services * {
box-sizing: border-box;
}
.services-head {
text-align: center;
max-width: 760px;
margin: 0 auto 1.75rem;
}
.services-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sv-teal);
margin-bottom: 0.75rem;
}
.services-title {
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--sv-blue), var(--sv-teal));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.services-lead {
margin: 0;
color: var(--muted-foreground);
line-height: 1.65;
font-size: 1.0625rem;
}
.services-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 14px;
}
.services-tab {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--sv-line);
background: rgba(255, 255, 255, 0.75);
color: var(--foreground);
padding: 10px 16px 10px 12px;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-weight: 650;
font-size: 14px;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.services-tab:hover {
border-color: rgba(0, 90, 134, 0.35);
background: rgba(255, 255, 255, 0.98);
}
.services-tab-icon {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 90, 134, 0.14), rgba(26, 166, 183, 0.14));
border: 1px solid rgba(0, 90, 134, 0.18);
transition: background 120ms ease, border-color 120ms ease;
}
.services-tab-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: rgba(0, 90, 134, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 120ms ease;
}
.services-tab[aria-selected="true"] {
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}
.services-tab[aria-selected="true"] .services-tab-icon {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
.services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: #fff;
}
.services-tab:nth-child(1)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 90, 134, 1), rgba(26, 166, 183, 1));
}
.services-tab:nth-child(2)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(26, 166, 183, 1), rgba(0, 90, 134, 1));
}
.services-tab:nth-child(3)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 90, 134, 1), rgba(0, 130, 168, 1));
}
.services-tab:nth-child(4)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(26, 166, 183, 1), rgba(0, 90, 134, 0.95));
}
.services-tab:nth-child(5)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 65, 102, 1), rgba(0, 90, 134, 1));
}
.services-tab:nth-child(6)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 90, 134, 1), rgba(0, 65, 102, 1));
}
.services-panel {
margin-top: 18px;
}
.services-panel[hidden] {
display: none !important;
}
.services-card {
position: relative;
overflow: hidden;
background: var(--card, #fff);
border: 1px solid var(--border);
border-radius: 0.85rem;
padding: 1.75rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.services-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--sv-blue), var(--sv-teal));
opacity: 0.85;
}
.services-card-title {
margin: 0 0 0.75rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
text-align: center;
}
.services-card-sub {
margin: -0.25rem auto 1rem;
text-align: center;
font-size: 1.125rem;
font-weight: 600;
font-style: italic;
color: var(--sv-teal);
}
.services-card-text + .services-card-text {
margin-top: 1rem;
}
.services-card-text {
margin: 0 auto;
max-width: 56rem;
text-align: center;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.services-image {
margin-top: 1.75rem;
text-align: center;
}
.services-image img {
width: 100%;
max-width: 900px;
max-height: 520px;
object-fit: cover;
border-radius: 1rem;
box-shadow: var(--shadow-hover, 0 18px 38px rgba(15, 23, 42, 0.16));
}
.services-more-body {
text-align: left;
max-width: 56rem;
margin: 1.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.services-more-body p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.services-h4 {
position: relative;
margin: 1.75rem 0 0.75rem;
padding-left: 1rem;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
}
.services-h4:first-child {
margin-top: 0;
}
.services-h4::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--sv-blue), var(--sv-teal));
}
.services-list {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem 1.25rem;
}
.services-list li {
position: relative;
padding-left: 1.75rem;
font-size: 1rem;
line-height: 1.55;
color: var(--foreground);
}
.services-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat,
linear-gradient(135deg, var(--sv-blue), var(--sv-teal));
}
.services-more-body .services-pull {
margin: 0 0 1rem;
padding: 0.75rem 1.25rem;
border-left: 4px solid var(--sv-teal);
border-radius: 0 0.5rem 0.5rem 0;
background: rgba(26, 166, 183, 0.08);
font-size: 1.15rem;
font-weight: 600;
font-style: italic;
color: var(--sv-blue);
}
.services-tagline {
margin: 1.5rem 0 0 !important;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
background: linear-gradient(135deg, rgba(0, 90, 134, 0.08), rgba(26, 166, 183, 0.08));
border: 1px solid rgba(0, 90, 134, 0.16);
color: var(--sv-blue) !important;
font-weight: 600;
text-align: center;
}
@media (min-width: 640px) {
.services-list {
grid-template-columns: 1fr 1fr;
}
}
.services-more-row {
margin-top: 1.5rem;
text-align: center;
}
.services-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65em 1.3em;
border-radius: 0.375rem;
border: 1px solid transparent;
font-weight: 600;
color: #fff !important;
background: linear-gradient(135deg, var(--sv-blue), var(--sv-teal));
box-shadow: 0 10px 24px rgba(0, 90, 134, 0.22);
text-decoration: none;
transition: transform 120ms ease, box-shadow 0.2s;
}
.services-more-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(0, 90, 134, 0.28);
}
.services-more-arrow {
transition: transform 0.2s ease;
}
.services-more-btn:hover .services-more-arrow {
transform: translateX(3px);
}
.services-placeholder {
text-align: center;
padding: 3rem 1.75rem;
}
.services-placeholder p {
margin: 0;
color: var(--muted-foreground);
font-size: 1.0625rem;
}
@media (max-width: 640px) {
.services-tab {
font-size: 13px;
padding: 8px 12px 8px 8px;
}
.services-card {
padding: 1.25rem;
}
.services-card-text {
text-align: left;
}
}
/* =====================================================================
Dual-tone accent layer: warm amber against the blue/teal base.
Applies to the home page, Services, Voice Gym and doctor pages.
===================================================================== */
:root {
--accent-gold: #f2b632;
--accent-gold-deep: #d99a14;
--accent-gold-soft: rgba(242, 182, 50, 0.16);
--accent-ink: #0b2a3a;
}
/* Eyebrow labels */
.home-page .hp-eyebrow,
.hp-eyebrow,
.about-me-eyebrow,
.services-eyebrow,
.vg-eyebrow,
.sp-eyebrow,
.dr-eyebrow {
color: var(--accent-gold-deep);
}
.home-page .hp-eyebrow--light,
.hp-eyebrow--light,
.vg-eyebrow--light,
.sp-eyebrow--light {
color: var(--accent-gold);
}
/* Card top stripes and accent bars */
.home-page .service-card::before,
.home-page #procedures .card::before,
.home-page #doctors .card::before,
.home-page #news .card::before,
.home-page .hp-cta-card::before,
.home-page .testimonial-card::before,
.services-card::before,
.vg-card::before,
.dr-page .card::before {
background: linear-gradient(90deg, var(--hero-blue, #005a86) 0%, #1aa6b7 55%, var(--accent-gold) 100%);
opacity: 1;
}
.about-me-h3::before,
.services-h4::before {
background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-deep));
}
.about-me-highlight-icon,
.vg-icon,
.home-page #procedures .card .w-16,
.services-tab-icon {
background: linear-gradient(135deg, var(--accent-gold-soft), rgba(242, 182, 50, 0.28));
border-color: rgba(217, 154, 20, 0.35);
}
.about-me-highlight-icon svg,
.vg-icon svg,
.services-tab-icon svg,
.home-page #procedures .card .w-16 svg {
stroke: var(--accent-gold-deep);
}
.services-tab[aria-selected="true"] .services-tab-icon {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.28);
}
.services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: var(--accent-gold);
}
/* Hero accents */
.vg-hero .vg-pills li strong,
.hero-doctor-role,
.dr-hero-role {
color: var(--accent-gold);
}
.hero-stat-icon {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
border-color: rgba(242, 182, 50, 0.6);
color: #fff;
}
.hero-stat-icon .icon-award::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.hero-stat-icon .icon-users::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.hero-stat-icon .icon-heart::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.hero-brand-rule,
.vg-hero-rule {
background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-deep));
}
.hero-doctor .circle-bg,
.vg-doctor-photo,
.about-me-photo,
.dr-hero-photo {
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.55), 0 18px 38px rgba(0, 0, 0, 0.2);
}
.about-me-photo,
.vg-doctor-photo {
background: linear-gradient(135deg, var(--hero-blue, #005a86), var(--accent-gold));
}
/* Gradient section titles: keep blue base, warm the tail */
.hp-h2,
.about-me-name,
.services-title,
.vg-h2,
.sp-h2,
.dr-h2,
.hero-brand-tagline,
.vg-hero-tagline {
background: linear-gradient(135deg, #005a86 0%, #1aa6b7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hp-h2--light,
.vg-h2--light,
.sp-h2--light {
background: none;
-webkit-text-fill-color: initial;
color: #fff;
}
/* Primary call-to-action buttons go amber with navy text */
.home-page .hp-btn,
.services-more-btn,
.about-me-more-btn,
.about-me-more summary,
.vg-btn-primary,
.sp-btn-primary,
.dr-btn-primary,
.hero-btn-primary {
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-deep) 100%);
color: var(--accent-ink) !important;
border-color: rgba(217, 154, 20, 0.5);
box-shadow: 0 10px 24px rgba(217, 154, 20, 0.3);
}
.home-page .hp-btn:hover,
.services-more-btn:hover,
.about-me-more-btn:hover,
.vg-btn-primary:hover,
.sp-btn-primary:hover,
.dr-btn-primary:hover,
.hero-btn-primary:hover {
background: linear-gradient(135deg, #f7c34a 0%, var(--accent-gold) 100%);
box-shadow: 0 16px 32px rgba(217, 154, 20, 0.38);
color: var(--accent-ink) !important;
}
.home-page .hp-btn--light {
background: rgba(255, 255, 255, 0.96);
color: var(--hp-blue) !important;
box-shadow: none;
border-color: rgba(255, 255, 255, 0.26);
}
.home-page .hp-btn--light:hover {
background: #fff;
color: var(--hp-blue) !important;
}
.hero-location {
color: var(--accent-ink);
background: linear-gradient(135deg, #fff 0%, #ffe9b3 100%);
}
/* Lists, ratings, FAQ */
.services-list li::before,
.vg-list li::before,
.dr-page .card li .bg-primary {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat,
linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
}
.home-page .star {
fill: var(--accent-gold);
}
.home-page .dot.active {
background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-deep));
}
.home-page .faq-question .icon {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
color: var(--accent-ink);
}
.home-page .faq-question:hover,
.home-page .faq-item.active .faq-question {
background: linear-gradient(135deg, rgba(242, 182, 50, 0.14), rgba(0, 90, 134, 0.06));
}
.home-page #news .card .badge,
.dr-page .card .badge,
.home-page #doctors .card .badge {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
color: var(--accent-ink);
}
.vg-num,
.vg-step-num,
.services-more-arrow {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
color: var(--accent-ink);
}
.services-more-arrow {
background: none;
}
.vg-program--elite .vg-num {
background: var(--accent-gold);
color: var(--accent-ink);
}
.vg-card-sub,
.services-card-sub,
.vg-tags li,
.about-me-tags li,
.dr-tags li {
color: var(--accent-gold-deep);
}
.vg-tags li,
.about-me-tags li {
background: var(--accent-gold-soft);
border-color: rgba(217, 154, 20, 0.35);
}
.dr-tags li {
background: #fff3d1;
}
.services-tagline,
.vg-quote--big {
background: linear-gradient(135deg, rgba(242, 182, 50, 0.16), rgba(0, 90, 134, 0.06));
border-color: rgba(217, 154, 20, 0.35);
}
.services-more-body .services-pull,
.vg-quote {
border-left-color: var(--accent-gold);
background: rgba(242, 182, 50, 0.12);
}
.sp-jump .sp-jump--ext {
background: var(--accent-gold);
color: var(--accent-ink);
}
.vg-brand-rule,
.vg-hero-rule,
.hero-brand-rule,
.about-me-highlight-title {
color: inherit;
}
/* A warm glow in the corner of every dark band */
.hero-home,
.home-page .hp-dark,
.vg-hero,
.sp-hero,
.dr-hero,
.vg-cta-band,
.sp-cta {
background-image:
radial-gradient(700px 360px at 92% 100%, rgba(242, 182, 50, 0.22), rgba(242, 182, 50, 0) 65%),
radial-gradient(900px 420px at 18% 12%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
linear-gradient(135deg, #005a86, #1aa6b7);
}
/* =====================================================================
Home page v2 hero: specialty-led banner with photo background,
action tiles and a trust strip below.
===================================================================== */
.hero-v2 {
position: relative;
overflow: hidden;
color: #fff;
background: #00466b;
}
.hero-v2-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-v2-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.35;
filter: saturate(0.85);
}
.hero-v2-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 360px at 92% 100%, rgba(242, 182, 50, 0.26), rgba(242, 182, 50, 0) 65%),
linear-gradient(100deg, rgba(0, 70, 107, 0.96) 0%, rgba(0, 90, 134, 0.88) 45%, rgba(26, 166, 183, 0.55) 100%);
}
.hero-v2-inner {
position: relative;
z-index: 1;
padding-top: 64px;
padding-bottom: 48px;
}
.hero-v2-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
.hero-v2-kicker {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.24);
font-size: 13px;
color: rgba(255, 255, 255, 0.95);
}
.hero-v2-title {
margin: 18px 0 12px;
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.025em;
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
max-width: 16ch;
}
.hero-v2-sub {
margin: 0;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
max-width: 52ch;
}
.hero-v2-sub strong {
color: var(--accent-gold, #f2b632);
font-weight: 700;
}
.hero-v2-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
}
.hero-v2-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.8em 1.5em;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
color: #0b2a3a !important;
background: linear-gradient(135deg, #f2b632, #d99a14);
box-shadow: 0 12px 28px rgba(217, 154, 20, 0.35);
transition: transform 120ms ease, box-shadow 0.2s;
}
.hero-v2-btn:hover {
transform: translateY(-1px);
box-shadow: 0 18px 36px rgba(217, 154, 20, 0.45);
}
.hero-v2-link {
color: #fff;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
.hero-v2-link:hover {
border-bottom-color: #fff;
color: #fff;
}
.hero-v2-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.hero-v2-doctor {
position: relative;
width: 100%;
max-width: 380px;
border-radius: 1.25rem;
overflow: hidden;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.45), 0 24px 48px rgba(0, 0, 0, 0.3);
}
.hero-v2-doctor img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: top center;
}
.hero-v2-doctor-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 16px 16px;
background: linear-gradient(180deg, rgba(0, 46, 70, 0) 0%, rgba(0, 46, 70, 0.92) 55%);
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-v2-doctor-caption strong {
font-size: 1.05rem;
color: #fff;
}
.hero-v2-doctor-caption span {
font-size: 12px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
}
.hero-v2-gym {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 380px;
padding: 16px 18px 14px;
border-radius: 1rem;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.45), 0 18px 38px rgba(0, 0, 0, 0.28);
text-decoration: none;
transition: transform 120ms ease, box-shadow 0.2s;
}
.hero-v2-gym:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.65), 0 24px 46px rgba(0, 0, 0, 0.32);
}
.hero-v2-gym img {
display: block;
width: 100%;
max-width: 300px;
height: auto;
}
.hero-v2-gym-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 10px;
padding-top: 10px;
border-top: 2px solid #f2b632;
width: 100%;
text-align: center;
}
.hero-v2-gym-text strong {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #005a86;
}
.hero-v2-gym-text span {
font-size: 12px;
font-weight: 600;
color: #d99a14;
}
.hero-v2-tiles {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 40px;
}
.hero-v2-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 0.85rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
color: #fff;
text-decoration: none;
transition: background 0.2s, transform 120ms ease;
}
.hero-v2-tile:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
color: #fff;
}
.hero-v2-tile-icon {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f2b632, #d99a14);
}
.hero-v2-tile-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-v2-tile-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hero-v2-tile-text strong {
font-size: 0.98rem;
}
.hero-v2-tile-text span {
font-size: 12px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.82);
}
.hero-v2-tile-arrow {
margin-left: auto;
color: var(--accent-gold, #f2b632);
font-weight: 700;
transition: transform 0.2s ease;
}
.hero-v2-tile:hover .hero-v2-tile-arrow {
transform: translateX(3px);
}
.hero-v2-tile--gym {
background: rgba(242, 182, 50, 0.18);
border-color: rgba(242, 182, 50, 0.45);
}
.hero-v2-tile--gym .hero-v2-tile-icon {
background: #fff;
}
.hero-v2-tile--gym .hero-v2-tile-icon svg {
stroke: #d99a14;
}
.trust-strip {
background: var(--background, #fff);
border-bottom: 1px solid var(--border);
}
.trust-strip-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
padding-top: 18px;
padding-bottom: 18px;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 8px;
border-right: 1px solid var(--border);
}
.trust-item:nth-child(2n) {
border-right: 0;
}
.trust-item strong {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #005a86, #1aa6b7);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.trust-item span {
font-size: 0.85rem;
color: var(--muted-foreground);
}
@media (min-width: 640px) {
.hero-v2-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.hero-v2-grid {
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
gap: 48px;
}
.hero-v2-inner {
padding-top: 84px;
}
.hero-v2-tiles {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-strip-inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-item:nth-child(2n) {
border-right: 1px solid var(--border);
}
.trust-item:last-child {
border-right: 0;
}
}
/* Header logo (drives the nav bar height) */
.site-logo {
width: 5.75rem;
height: 5.75rem;
display: block;
margin: 0.25rem 0;
}
@media (max-width: 768px) {
.site-logo {
width: 4.25rem;
height: 4.25rem;
}
}
/* =====================================================================
PREMIUM LAYER (scoped to .home-premium plus a few global basics).
Typography, calmer colour, one card system, editorial details.
===================================================================== */
/* --- Typography: Inter for body, Fraunces for display --- */
body {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.home-premium h1,
.home-premium h2,
.home-premium h3,
.home-premium .hp-h2,
.home-premium .hero-v2-title,
.home-premium .about-me-name,
.home-premium .services-title,
.home-premium .services-card-title,
.home-premium .dr-statement-quote,
.home-premium .trust-item strong {
font-family: "Fraunces", Georgia, "Times New Roman", serif;
font-weight: 600;
letter-spacing: -0.015em;
}
.home-premium .hero-v2-title,
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
font-weight: 600;
}
.home-premium p,
.home-premium li {
line-height: 1.78;
}
.home-premium .trust-item strong {
font-variant-numeric: tabular-nums;
}
/* --- Quieter header --- */
.site-banner {
padding: 0.35rem 0 !important;
background: #f6f1e4 !important;
}
.site-banner a {
font-size: 0.82rem;
font-weight: 600;
color: #7a5a12 !important;
text-decoration: none !important;
}
.site-banner a:hover {
text-decoration: underline !important;
}
.nav-links a,
.nav-dropdown-toggle {
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.005em;
}
/* --- Calm the colour: light sections become plain --- */
.home-premium .hp-alt,
.home-premium .services,
.home-premium .about-me {
background: #fbfaf7;
background-image: none;
}
.home-premium .services {
border-top: 1px solid rgba(15, 23, 42, 0.07);
border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.home-premium .hp-dark {
background-image: none;
background: linear-gradient(140deg, #004e73 0%, #00354e 100%);
}
/* --- One card system --- */
.home-premium .services-card,
.home-premium .service-card,
.home-premium #news .card,
.home-premium .about-me-highlights li,
.home-premium .testimonial-card,
.home-premium .hp-cta-card {
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.09);
border-radius: 12px;
box-shadow: none;
transition: box-shadow 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 260ms ease;
}
.home-premium .services-card:hover,
.home-premium .service-card:hover,
.home-premium #news .card:hover,
.home-premium .about-me-highlights li:hover {
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.09);
border-color: rgba(15, 23, 42, 0.14);
transform: translateY(-2px);
}
.home-premium .services-card::before,
.home-premium .service-card::before,
.home-premium #news .card::before,
.home-premium .testimonial-card::before,
.home-premium .hp-cta-card::before {
display: none;
}
/* --- Accent used sparingly: amber only for primary actions --- */
.home-premium .about-me-highlight-icon,
.home-premium .services-tab-icon {
background: rgba(0, 90, 134, 0.07);
border-color: rgba(0, 90, 134, 0.14);
}
.home-premium .about-me-highlight-icon svg,
.home-premium .services-tab-icon svg {
stroke: #005a86;
}
.home-premium .services-tab[aria-selected="true"] {
background: #00354e;
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: #fff;
}
.home-premium .about-me-h3::before,
.home-premium .services-h4::before {
background: #d99a14;
}
.home-premium .services-list li::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005a86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
background-color: rgba(0, 90, 134, 0.08);
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
background: none;
-webkit-text-fill-color: initial;
color: #0b2a3a;
}
.home-premium .hp-h2--light {
color: #fff;
}
/* --- Editorial eyebrows with numbers --- */
.home-premium .hp-eyebrow,
.home-premium .about-me-eyebrow,
.home-premium .services-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b7f8c;
margin-bottom: 1rem;
}
.home-premium .hp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.home-premium .hp-eyebrow i,
.home-premium .about-me-eyebrow i,
.home-premium .services-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: #d99a14;
padding-right: 0.6rem;
border-right: 1px solid rgba(15, 23, 42, 0.16);
}
.home-premium .hp-eyebrow--light i {
border-right-color: rgba(255, 255, 255, 0.28);
color: #f2b632;
}
/* --- Plain text links replace pill buttons --- */
.home-premium .text-link {
display: inline-block;
font-size: 0.92rem;
font-weight: 600;
color: #005a86;
text-decoration: none;
padding: 0 0 2px;
border: 0;
background: none !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(0, 90, 134, 0.35);
transition: border-color 200ms ease, color 200ms ease;
}
.home-premium .text-link:hover {
color: #003b57;
border-bottom-color: #003b57;
}
.home-premium .text-link--light {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.45);
}
.home-premium .text-link--light:hover {
color: #fff;
border-bottom-color: #fff;
}
/* --- Generous section rhythm --- */
.home-premium section.py-16,
.home-premium .services,
.home-premium .about-me {
padding-top: 7rem;
padding-bottom: 7rem;
}
.home-premium .hp-head {
margin-bottom: 3rem;
}
/* --- Doctor statement --- */
.dr-statement {
padding: 7rem 0;
background: #0b2a3a;
color: #fff;
}
.dr-statement-inner {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
.dr-statement-photo {
margin: 0;
max-width: 420px;
}
.dr-statement-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 4px;
filter: saturate(0.92);
}
.dr-statement .hp-eyebrow {
color: rgba(255, 255, 255, 0.7);
}
.dr-statement .hp-eyebrow i {
color: #f2b632;
border-right-color: rgba(255, 255, 255, 0.28);
}
.dr-statement-quote {
margin: 0 0 2rem;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.38;
font-weight: 500;
letter-spacing: -0.015em;
color: #fff;
}
.dr-statement-meta {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.dr-statement-meta strong {
font-size: 1.05rem;
color: #fff;
}
.dr-statement-meta span {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.68);
}
.dr-statement-creds {
list-style: none;
margin: 1.5rem 0 2rem;
padding: 0;
display: grid;
gap: 0.4rem 1.5rem;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.78);
}
.dr-statement-creds li {
position: relative;
padding-left: 1rem;
}
.dr-statement-creds li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 5px;
height: 1px;
background: #f2b632;
}
.dr-statement .text-link {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.45);
}
.dr-statement .text-link:hover {
border-bottom-color: #fff;
}
/* --- Single-photo gallery --- */
.gallery-feature {
padding: 7rem 0;
background: #fbfaf7;
}
.gallery-feature-figure {
margin: 0;
overflow: hidden;
border-radius: 4px;
}
.gallery-feature-figure img {
display: block;
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gallery-feature-figure:hover img {
transform: scale(1.03);
}
.gallery-feature-link {
margin: 1.75rem 0 0;
text-align: center;
}
/* --- Trust strip refinement --- */
.home-premium .trust-strip {
background: #fff;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.home-premium .trust-strip-inner {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.home-premium .trust-item {
border-right-color: rgba(15, 23, 42, 0.08);
}
.home-premium .trust-item strong {
font-size: 2.1rem;
font-weight: 600;
background: none;
-webkit-text-fill-color: initial;
color: #0b2a3a;
}
.home-premium .trust-item span {
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b7f8c;
margin-top: 0.35rem;
}
/* --- Motion: one easing curve, reveal on scroll, slow hero zoom --- */
.home-premium .animate-fade-in,
.home-premium .animate-slide-in-right {
animation: none;
}
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.hero-v2-bg img {
animation: heroDrift 24s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
@keyframes heroDrift {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero-v2-bg img { animation: none; }
.gallery-feature-figure img { transition: none; }
}
@media (min-width: 768px) {
.dr-statement-creds {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.dr-statement-inner {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 5rem;
}
}
@media (max-width: 767px) {
.home-premium section.py-16,
.home-premium .services,
.home-premium .about-me,
.dr-statement,
.gallery-feature {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* --- Premium clean-up: retire leftover accent flourishes --- */
.home-premium .about-me-photo,
.home-premium .hero-v2-doctor,
.home-premium .hero-v2-gym {
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.home-premium .about-me-photo {
padding: 0;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 4px;
box-shadow: none;
background: none;
}
.home-premium .about-me-photo img {
border-radius: 4px;
aspect-ratio: 4 / 5;
}
.home-premium .hero-v2-doctor,
.home-premium .hero-v2-gym {
border-radius: 4px;
}
.home-premium .hero-v2-gym-text {
border-top-color: rgba(15, 23, 42, 0.12);
}
.home-premium .hero-v2-gym-text span {
color: #6b7f8c;
}
.home-premium .about-me-tags li {
background: rgba(0, 90, 134, 0.06);
border-color: rgba(0, 90, 134, 0.14);
color: #005a86;
border-radius: 3px;
font-weight: 500;
letter-spacing: 0.02em;
}
.home-premium .about-me-role,
.home-premium .services-card-sub {
color: #6b7f8c;
font-style: normal;
}
.home-premium .star {
fill: #d99a14;
}
.home-premium .dot.active {
background: #d99a14;
}
.home-premium .testimonial-image {
border-color: rgba(15, 23, 42, 0.12);
}
.home-premium .services-tagline {
background: rgba(0, 90, 134, 0.05);
border-color: rgba(0, 90, 134, 0.14);
color: #0b2a3a !important;
}
.home-premium .hero-v2-tile {
border-radius: 4px;
}
.home-premium .hero-v2-tile-icon {
border-radius: 3px;
background: rgba(255, 255, 255, 0.16);
}
.home-premium .hero-v2-tile-icon svg {
stroke: #fff;
}
.home-premium .hero-v2-tile--gym {
background: rgba(242, 182, 50, 0.16);
border-color: rgba(242, 182, 50, 0.4);
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon {
background: #f2b632;
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon svg {
stroke: #0b2a3a;
}
.home-premium .hero-v2-kicker {
border-radius: 3px;
letter-spacing: 0.04em;
}
.home-premium #news .card .badge {
background: rgba(0, 90, 134, 0.08);
color: #005a86;
border-radius: 3px;
font-weight: 600;
}
.home-premium .services-more-btn,
.home-premium .about-me-more-btn {
border-radius: 4px;
box-shadow: none;
background: #0b2a3a;
color: #fff !important;
font-weight: 600;
letter-spacing: 0.01em;
}
.home-premium .services-more-btn:hover,
.home-premium .about-me-more-btn:hover {
background: #005a86;
color: #fff !important;
box-shadow: none;
transform: none;
}
/* Premium: keep the Voice Gym card on the hero background at phone width */
@media (max-width: 1023px) {
.home-premium .hero-v2-side {
gap: 14px;
}
.home-premium .hero-v2-gym {
max-width: 380px;
margin: 0 auto;
}
.home-premium .hero-v2-tiles {
margin-top: 28px;
}
}
/* =====================================================================
Nav bar: links left, dual logos centred, links right.
===================================================================== */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.nav-side {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
}
.nav-side--left {
justify-content: flex-end;
}
.nav-side--right {
justify-content: flex-start;
}
.nav-side .nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: nowrap;
}
.nav-side .nav-links > a,
.nav-side .nav-dropdown-toggle {
white-space: nowrap;
}
.nav-brand {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.9rem;
}
.nav-brand-link {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.nav-brand-divider {
flex: 0 0 auto;
width: 1px;
height: 2.6rem;
background: rgba(15, 23, 42, 0.16);
}
.site-logo-gym {
display: block;
width: auto;
height: 5.4rem;
max-width: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.nav-brand-link--gym {
opacity: 0.95;
transition: opacity 200ms ease;
}
.nav-brand-link--gym:hover {
opacity: 1;
}
@media (max-width: 1200px) {
.nav-side .nav-links {
gap: 1.1rem;
}
.nav-side .nav-links > a,
.nav-side .nav-dropdown-toggle {
font-size: 0.86rem;
}
.nav-brand {
gap: 0.7rem;
}
.site-logo-gym {
height: 4.6rem;
}
.nav-brand-divider {
height: 2.4rem;
}
}
@media (max-width: 768px) {
.nav-bar {
justify-content: space-between;
gap: 0.75rem;
}
.nav-side {
display: none;
}
.nav-brand {
flex: 1 1 auto;
justify-content: flex-start;
gap: 0.6rem;
}
.site-logo-gym {
height: 4rem;
}
.nav-brand-divider {
height: 2.1rem;
}
}
@media (max-width: 420px) {
.nav-brand-divider,
.nav-brand-link--gym {
display: none;
}
}
/* =====================================================================
Hero v2 portrait: cut-out figure instead of a boxed photo.
===================================================================== */
.hero-v2-portrait {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-height: 420px;
padding-bottom: 0;
}
.hero-v2-portrait-glow {
position: absolute;
left: 50%;
bottom: 12%;
width: 118%;
aspect-ratio: 1 / 1;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 68%);
pointer-events: none;
}
.hero-v2-portrait > img {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 400px;
height: auto;
filter: drop-shadow(0 26px 46px rgba(0, 20, 34, 0.45));
}
.hero-v2-portrait-caption {
position: relative;
z-index: 2;
margin-top: 1rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.22);
width: min(100%, 360px);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
padding: 0 0.5rem;
}
.hero-v2-portrait-caption strong {
font-size: 1.12rem;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
}
.hero-v2-portrait-caption span {
font-size: 0.86rem;
color: rgba(255, 255, 255, 0.86);
}
.hero-v2-portrait-caption em {
display: inline-block;
margin-top: 0.45rem;
padding: 0.3rem 0.75rem;
border-radius: 3px;
font-style: normal;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #0b2a3a;
background: #f2b632;
}
.home-premium .hero-v2-portrait-caption strong {
font-family: "Fraunces", Georgia, serif;
font-size: 1.25rem;
}
@media (min-width: 1024px) {
.hero-v2-portrait {
min-height: 500px;
}
.hero-v2-portrait > img {
max-width: 440px;
}
}
@media (max-width: 640px) {
.hero-v2-portrait {
min-height: 340px;
margin-top: 1rem;
}
.hero-v2-portrait > img {
max-width: 290px;
}
.hero-v2-portrait-caption {
margin-top: 0.85rem;
padding-top: 1rem;
}
}
/* =====================================================================
DUAL-TONE + TYPE REFRESH (v2 / .home-premium)
Deep teal-navy as the base, warm terracotta-gold as a true second
tone with real presence. Instrument Serif display + Outfit body.
===================================================================== */
.home-premium,
.hero-v2,
.dr-statement,
.gallery-feature {
--tone-ink: #07242f;
--tone-deep: #0c3a4a;
--tone-mid: #18657d;
--tone-warm: #e08a3c;
--tone-warm-deep: #c06a22;
--tone-warm-soft: #fdf1e3;
--tone-paper: #fcf8f3;
--tone-line: rgba(7, 36, 47, 0.12);
}
/* --- Type --- */
body {
font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
letter-spacing: 0.002em;
}
.home-premium h1,
.home-premium h2,
.home-premium h3,
.home-premium .hp-h2,
.home-premium .hero-v2-title,
.home-premium .about-me-name,
.home-premium .services-title,
.home-premium .services-card-title,
.home-premium .dr-statement-quote,
.home-premium .trust-item strong,
.home-premium .hero-v2-portrait-caption strong {
font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: -0.012em;
}
.home-premium .hero-v2-title {
font-size: clamp(38px, 5.4vw, 70px);
line-height: 1.02;
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.1;
}
.home-premium .dr-statement-quote {
font-size: clamp(1.75rem, 3.2vw, 2.65rem);
line-height: 1.24;
}
.home-premium .hero-v2-sub,
.home-premium .hp-lead,
.home-premium .services-lead {
font-weight: 300;
font-size: 1.1rem;
}
.home-premium .hero-v2-sub {
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
/* --- Warm paper base for light sections --- */
.home-premium .hp-alt,
.home-premium .services,
.home-premium .about-me,
.gallery-feature {
background: var(--tone-paper);
background-image: none;
}
.home-premium .trust-strip {
background: #fff;
}
/* --- Dark sections: deep teal-navy, not blue --- */
.home-premium .hp-dark {
background: linear-gradient(150deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
background-image:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
}
.dr-statement {
background: var(--tone-ink);
background-image:
radial-gradient(560px 300px at 6% 0%, rgba(224, 138, 60, 0.2), rgba(224, 138, 60, 0) 58%);
}
.hero-v2-bg::after {
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.4), rgba(224, 138, 60, 0) 60%),
linear-gradient(104deg, rgba(7, 36, 47, 0.96) 0%, rgba(12, 58, 74, 0.9) 48%, rgba(24, 101, 125, 0.62) 100%);
}
/* --- The warm tone, used with intent --- */
.home-premium .hero-v2-sub strong {
color: var(--tone-warm);
font-weight: 500;
}
.home-premium .hp-eyebrow i,
.home-premium .about-me-eyebrow i,
.home-premium .services-eyebrow i,
.dr-statement .hp-eyebrow i {
color: var(--tone-warm);
}
.home-premium .hp-eyebrow,
.home-premium .about-me-eyebrow,
.home-premium .services-eyebrow {
color: var(--tone-warm-deep);
}
.home-premium .hp-eyebrow--light,
.dr-statement .hp-eyebrow {
color: rgba(255, 255, 255, 0.72);
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
color: var(--tone-ink);
}
/* Headings that sit on the dark bands stay white. */
.home-premium .hp-h2--light,
.home-premium .hp-dark .hp-h2,
.home-premium .vg-h2--light,
.home-premium .sp-h2--light,
.dr-statement .dr-h2 {
color: #fff;
background: none;
-webkit-text-fill-color: #fff;
}
/* And so does the lead text beneath them. */
.home-premium .hp-lead--light,
.home-premium .hp-dark .hp-lead,
.home-premium .sp-lead--light,
.home-premium .vg-lead--light {
color: rgba(255, 255, 255, 0.86);
}
.home-premium .hp-dark .hp-eyebrow,
.home-premium .hp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.home-premium .hp-dark .hp-eyebrow i,
.home-premium .hp-eyebrow--light i {
color: var(--tone-warm, #e08a3c);
border-right-color: rgba(255, 255, 255, 0.28);
}
.home-premium .about-me-h3::before,
.home-premium .services-h4::before {
background: var(--tone-warm);
width: 3px;
}
.home-premium .about-me-highlight-icon,
.home-premium .services-tab-icon {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.3);
}
.home-premium .about-me-highlight-icon svg,
.home-premium .services-tab-icon svg {
stroke: var(--tone-warm-deep);
}
.home-premium .services-tab[aria-selected="true"] {
background: var(--tone-ink);
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon {
background: var(--tone-warm);
border-color: transparent;
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: var(--tone-ink);
}
.home-premium .services-list li::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c06a22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
background-color: var(--tone-warm-soft);
}
.home-premium .about-me-tags li {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.28);
color: var(--tone-warm-deep);
}
.home-premium .star,
.home-premium .dot.active {
fill: var(--tone-warm);
background: var(--tone-warm);
}
.home-premium .star {
background: none;
}
.home-premium .services-tagline {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.28);
color: var(--tone-warm-deep) !important;
}
.home-premium .services-more-body .services-pull,
.home-premium .services-card-sub {
border-left-color: var(--tone-warm);
color: var(--tone-warm-deep);
}
.home-premium .services-more-body .services-pull {
background: var(--tone-warm-soft);
}
.home-premium #news .card .badge {
background: var(--tone-warm-soft);
color: var(--tone-warm-deep);
}
.home-premium .text-link {
color: var(--tone-warm-deep);
border-bottom-color: rgba(192, 106, 34, 0.4);
}
.home-premium .text-link:hover {
color: var(--tone-ink);
border-bottom-color: var(--tone-ink);
}
.dr-statement .text-link,
.home-premium .text-link--light {
color: var(--tone-warm);
border-bottom-color: rgba(224, 138, 60, 0.5);
}
.dr-statement .text-link:hover,
.home-premium .text-link--light:hover {
color: #fff;
border-bottom-color: #fff;
}
.dr-statement-creds li::before {
background: var(--tone-warm);
}
/* --- Primary actions carry the warm tone --- */
.home-premium .services-more-btn,
.home-premium .about-me-more-btn {
background: var(--tone-warm);
color: var(--tone-ink) !important;
font-weight: 600;
}
.home-premium .services-more-btn:hover,
.home-premium .about-me-more-btn:hover {
background: var(--tone-warm-deep);
color: #fff !important;
}
/* --- Hero details --- */
.home-premium .hero-v2-portrait-caption em {
background: var(--tone-warm);
color: var(--tone-ink);
}
.home-premium .hero-v2-tile-icon {
background: rgba(255, 255, 255, 0.14);
}
.home-premium .hero-v2-tile--gym {
background: rgba(224, 138, 60, 0.2);
border-color: rgba(224, 138, 60, 0.46);
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon {
background: var(--tone-warm);
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon svg {
stroke: var(--tone-ink);
}
.home-premium .hero-v2-tile-arrow {
color: var(--tone-warm);
}
/* --- Trust strip in the warm tone --- */
.home-premium .trust-item strong {
color: var(--tone-ink);
font-size: 2.6rem;
}
.home-premium .trust-item span {
color: var(--tone-warm-deep);
}
.home-premium .trust-item {
border-right-color: var(--tone-line);
}
/* --- Cards on warm paper --- */
.home-premium .services-card,
.home-premium .service-card,
.home-premium #news .card,
.home-premium .about-me-highlights li,
.home-premium .hp-cta-card {
border-color: var(--tone-line);
}
.home-premium .services {
border-top-color: var(--tone-line);
border-bottom-color: var(--tone-line);
}
/* --- Header picks up the warm tone --- */
.site-banner {
background: var(--tone-warm-soft, #fdf1e3) !important;
}
.site-banner a {
color: #8a4d12 !important;
}
/* =====================================================================
Type: Figtree throughout (the face Apollo Hospitals uses).
One family, weight and size carry the hierarchy.
===================================================================== */
body {
font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
letter-spacing: 0;
}
.home-premium h1,
.home-premium h2,
.home-premium h3,
.home-premium h4,
.home-premium .hp-h2,
.home-premium .hero-v2-title,
.home-premium .about-me-name,
.home-premium .services-title,
.home-premium .services-card-title,
.home-premium .dr-statement-quote,
.home-premium .trust-item strong,
.home-premium .hero-v2-portrait-caption strong {
font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
}
/* Display sizes: heavier weight and tighter tracking do the work */
.home-premium .hero-v2-title {
font-weight: 700;
font-size: clamp(36px, 4.8vw, 60px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
}
.home-premium .dr-statement-quote {
font-weight: 600;
font-size: clamp(1.6rem, 2.9vw, 2.35rem);
line-height: 1.32;
letter-spacing: -0.022em;
}
.home-premium .services-card-title {
font-weight: 700;
letter-spacing: -0.015em;
}
.home-premium .trust-item strong {
font-weight: 700;
font-size: 2.5rem;
letter-spacing: -0.03em;
}
.home-premium .hero-v2-portrait-caption strong {
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.015em;
}
.home-premium .hero-v2-sub,
.home-premium .hp-lead,
.home-premium .services-lead {
font-weight: 400;
}
.home-premium .hero-v2-sub {
font-size: clamp(1.02rem, 1.4vw, 1.22rem);
line-height: 1.6;
}
.home-premium p,
.home-premium li {
line-height: 1.72;
}
.nav-links a,
.nav-dropdown-toggle {
font-weight: 500;
}
/* =====================================================================
Services page: pick up the dual-tone theme.
===================================================================== */
.services-page.home-premium {
--sp-blue: var(--tone-deep);
--sp-teal: var(--tone-mid);
--sv-blue: var(--tone-deep);
--sv-teal: var(--tone-mid);
}
/* Hero */
.services-page.home-premium .sp-hero {
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.36), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
}
.services-page.home-premium .sp-hero::after {
opacity: 0.18;
}
.services-page.home-premium .sp-hero-inner {
padding-top: 72px;
padding-bottom: 32px;
}
.services-page.home-premium .sp-hero-title {
font-weight: 700;
font-size: clamp(36px, 4.8vw, 60px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.services-page.home-premium .sp-hero-lead {
font-size: clamp(1.02rem, 1.4vw, 1.22rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.services-page.home-premium .sp-kicker {
border-radius: 3px;
letter-spacing: 0.04em;
}
.services-page.home-premium .sp-jump a {
border-radius: 3px;
font-weight: 500;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
}
.services-page.home-premium .sp-jump a:hover {
background: rgba(255, 255, 255, 0.2);
}
.services-page.home-premium .sp-jump .sp-jump--ext {
background: var(--tone-warm);
color: var(--tone-ink);
border-color: transparent;
font-weight: 600;
}
.services-page.home-premium .sp-jump .sp-jump--ext:hover {
background: var(--tone-warm-deep);
color: #fff;
}
/* Sections */
.services-page.home-premium .sp-section {
padding: 7rem 0;
background: #fff;
}
.services-page.home-premium .sp-section--alt {
background: var(--tone-paper);
background-image: none;
border-top: 1px solid var(--tone-line);
border-bottom: 1px solid var(--tone-line);
}
.services-page.home-premium .sp-head {
margin-bottom: 2rem;
}
.services-page.home-premium .sp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep);
margin-bottom: 1rem;
}
.services-page.home-premium .sp-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--tone-warm);
padding-right: 0.6rem;
border-right: 1px solid var(--tone-line);
}
.services-page.home-premium .sp-h2 {
background: none;
-webkit-text-fill-color: initial;
color: var(--tone-ink);
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
}
.services-page.home-premium .sp-h2--light {
color: #fff;
}
.services-page.home-premium .sp-body {
border-top-color: var(--tone-line);
}
.services-page.home-premium .sp-note a {
color: var(--tone-warm-deep);
}
/* Procedures block inherited from the home page */
.services-page.home-premium #procedures {
background: var(--tone-paper);
background-image: none;
padding-top: 7rem;
padding-bottom: 7rem;
}
.services-page.home-premium .hp-cta-card {
border-color: var(--tone-line);
}
/* Closing call to action */
.services-page.home-premium .sp-cta {
background:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
padding: 6rem 0;
}
.services-page.home-premium .sp-btn-primary {
background: var(--tone-warm);
color: var(--tone-ink);
border-color: transparent;
font-weight: 600;
}
.services-page.home-premium .sp-btn-primary:hover {
background: var(--tone-warm-deep);
color: #fff;
}
.services-page.home-premium .sp-btn-ghost {
border-radius: 4px;
}
.services-page.home-premium .sp-btn-primary,
.services-page.home-premium .sp-btn-ghost {
border-radius: 4px;
}
.services-page.home-premium .sp-lead--light {
color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 767px) {
.services-page.home-premium .sp-section,
.services-page.home-premium #procedures {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* Services page: remaining accents onto the dual tone */
.services-page.home-premium .text-link,
.services-page.home-premium .service-show-more,
.services-page.home-premium .show-details-link {
display: inline-block;
color: var(--tone-warm-deep) !important;
background: none !important;
border: 0;
border-bottom: 1px solid rgba(192, 106, 34, 0.4);
border-radius: 0;
box-shadow: none !important;
padding: 0 0 2px;
font-size: 0.9rem !important;
font-weight: 600;
text-decoration: none !important;
}
.services-page.home-premium .text-link:hover,
.services-page.home-premium .service-show-more:hover,
.services-page.home-premium .show-details-link:hover {
color: var(--tone-ink) !important;
border-bottom-color: var(--tone-ink);
background: none !important;
}
.services-page.home-premium .hp-btn {
background: var(--tone-warm);
color: var(--tone-ink) !important;
border-radius: 4px;
box-shadow: none;
font-weight: 600;
}
.services-page.home-premium .hp-btn:hover {
background: var(--tone-warm-deep);
color: #fff !important;
transform: translateY(-1px);
box-shadow: none;
}
.services-page.home-premium #procedures .card .w-16 {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.3);
}
.services-page.home-premium #procedures .card .w-16 svg {
stroke: var(--tone-warm-deep);
}
.services-page.home-premium #procedures .card li .bg-primary {
background: var(--tone-warm);
}
/* Hero v2: layered graphic behind the cut-out portrait */
.hero-v2-portrait-art {
position: absolute;
left: 50%;
top: 40%;
width: 146%;
max-width: 700px;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.hero-v2-portrait-art svg {
width: 100%;
height: 100%;
display: block;
animation: hv2ArtIn 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-v2-portrait-art circle:first-of-type {
transform-origin: 50% 50%;
animation: hv2Spin 90s linear infinite;
}
@keyframes hv2ArtIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hv2Spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-v2-portrait-glow {
background:
radial-gradient(circle at 50% 46%, rgba(224, 138, 60, 0.2) 0%, rgba(224, 138, 60, 0.07) 36%, rgba(255, 255, 255, 0) 66%);
}
@media (prefers-reduced-motion: reduce) {
.hero-v2-portrait-art svg,
.hero-v2-portrait-art circle:first-of-type {
animation: none;
}
}
@media (max-width: 640px) {
.hero-v2-portrait-art {
width: 124%;
top: 44%;
}
}
/* =====================================================================
Doctor profile page: dual-tone theme.
===================================================================== */
.dr-page.home-premium {
--dr-blue: var(--tone-deep);
--dr-teal: var(--tone-mid);
--am-blue: var(--tone-deep);
--am-teal: var(--tone-mid);
}
/* Hero */
.dr-page.home-premium .dr-hero {
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.34), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
}
.dr-page.home-premium .dr-hero::after {
opacity: 0.16;
}
.dr-page.home-premium .dr-hero-title {
font-weight: 700;
font-size: clamp(34px, 4.4vw, 54px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.dr-page.home-premium .dr-hero-role {
color: var(--tone-warm);
font-weight: 500;
}
.dr-page.home-premium .dr-kicker,
.dr-page.home-premium .dr-pills li {
border-radius: 3px;
letter-spacing: 0.02em;
}
.dr-page.home-premium .dr-tags li {
background: var(--tone-warm);
color: var(--tone-ink);
border-radius: 3px;
font-weight: 600;
}
.dr-page.home-premium .dr-btn-primary {
background: var(--tone-warm);
color: var(--tone-ink);
border-color: transparent;
border-radius: 4px;
font-weight: 600;
}
.dr-page.home-premium .dr-btn-primary:hover {
background: var(--tone-warm-deep);
color: #fff;
}
.dr-page.home-premium .dr-btn-ghost {
border-radius: 4px;
}
.dr-page.home-premium .dr-hero-photo {
background: #fff;
border-radius: 4px;
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}
.dr-page.home-premium .dr-hero-photo img {
border-radius: 3px;
}
/* Sections */
.dr-page.home-premium .dr-section {
padding: 7rem 0;
background: #fff;
}
.dr-page.home-premium .dr-section--alt {
background: var(--tone-paper);
background-image: none;
border-top: 1px solid var(--tone-line);
border-bottom: 1px solid var(--tone-line);
}
.dr-page.home-premium .dr-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep);
margin-bottom: 1rem;
}
.dr-page.home-premium .dr-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--tone-warm);
padding-right: 0.6rem;
border-right: 1px solid var(--tone-line);
}
.dr-page.home-premium .dr-h2 {
background: none;
-webkit-text-fill-color: initial;
color: var(--tone-ink);
font-weight: 700;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.16;
letter-spacing: -0.025em;
}
.dr-page.home-premium .dr-profile-intro .dr-lead {
color: var(--tone-ink);
}
.dr-page.home-premium .about-me-h3::before {
background: var(--tone-warm);
width: 3px;
}
/* Credential cards */
.dr-page.home-premium .card {
background: #fff;
border: 1px solid var(--tone-line);
border-radius: 12px;
box-shadow: none;
transition: box-shadow 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 260ms ease;
}
.dr-page.home-premium .card::before {
display: none;
}
.dr-page.home-premium .card:hover {
box-shadow: 0 14px 40px rgba(7, 36, 47, 0.08);
border-color: rgba(7, 36, 47, 0.16);
}
.dr-page.home-premium .card .text-primary {
color: var(--tone-warm-deep);
}
.dr-page.home-premium .card svg.text-primary,
.dr-page.home-premium .card .lucide {
stroke: var(--tone-warm-deep);
}
.dr-page.home-premium .card li .bg-primary {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c06a22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
background-color: var(--tone-warm-soft);
}
.dr-page.home-premium .card h4 {
color: var(--tone-warm-deep);
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.28);
border-radius: 3px;
}
.dr-page.home-premium .card .badge {
background: var(--tone-warm-soft);
color: var(--tone-warm-deep);
border-radius: 3px;
font-weight: 600;
}
@media (max-width: 767px) {
.dr-page.home-premium .dr-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* Doctor page: recolour the remaining flat-file icons to the warm tone */
.dr-page.home-premium .card .flex.items-center img[src$=".svg"] {
filter: brightness(0) saturate(100%) invert(46%) sepia(58%) saturate(1180%)
hue-rotate(347deg) brightness(88%) contrast(92%);
}
.dr-page.home-premium .card svg[fill="currentColor"] {
fill: var(--tone-warm-deep);
stroke: none;
}
/* =====================================================================
Hero locations: two clickable location cards, shared by both
home templates.
===================================================================== */
.hero-locations,
.hero-v2-locations {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin: 1.5rem 0 0;
padding: 0;
}
.hero-locations-label,
.hero-v2-locations-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.hero-locations-label svg {
width: 15px;
height: 15px;
fill: none;
stroke: #e08a3c;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-locations-list,
.hero-v2-locations-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.hero-location,
.hero-v2-location {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 1.1rem 0.65rem 0.7rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-left: 3px solid #e08a3c;
backdrop-filter: blur(8px);
text-decoration: none;
transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 220ms ease;
}
.hero-location:hover,
.hero-v2-location:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.34);
border-left-color: #f2b632;
transform: translateY(-2px);
}
.hero-location-pin,
.hero-v2-location-pin {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 3px;
background: #e08a3c;
}
.hero-location-pin svg,
.hero-v2-location-pin svg {
width: 16px;
height: 16px;
fill: none;
stroke: #07242f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-location-text,
.hero-v2-location-text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.25;
}
.hero-location-text strong,
.hero-v2-location-text strong {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
letter-spacing: -0.005em;
}
.hero-location-text > span,
.hero-v2-location-text > span {
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.66);
}
@media (max-width: 480px) {
.hero-locations-list,
.hero-v2-locations-list {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.hero-location,
.hero-v2-location {
width: 100%;
}
}
/* =====================================================================
Sticky header. The whole header pins (a sticky child can never travel
outside its parent, and the header is only ~138px tall), and the
announcement bar slides away under the nav as you scroll.
===================================================================== */
.main_menu {
position: sticky;
top: 0;
z-index: 60;
transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
/* Pull the header up by exactly the banner height so the nav rests at the
top edge, leaving the banner visible only at the top of the page. */
.main_menu.nav-scrolled {
transform: translateY(calc(-1 * var(--banner-h, 0px)));
}
.main_menu nav {
position: relative;
z-index: 2;
background: #fff;
border-bottom: 1px solid rgba(7, 36, 47, 0.08);
transition: background 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.main_menu.nav-scrolled nav {
background: #fff;
border-bottom-color: rgba(7, 36, 47, 0.1);
box-shadow: 0 6px 24px rgba(7, 36, 47, 0.09);
}
/* The bar condenses a little once pinned */
.main_menu nav .site-logo,
.main_menu nav .site-logo-gym,
.main_menu nav .nav-brand-divider {
transition: height 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
width 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.main_menu.nav-scrolled nav .site-logo {
width: 4.4rem;
height: 4.4rem;
}
.main_menu.nav-scrolled nav .site-logo-gym {
height: 4.4rem;
}
.main_menu.nav-scrolled nav .nav-brand-divider {
height: 2rem;
}
@media (prefers-reduced-motion: reduce) {
.main_menu,
.main_menu nav,
.main_menu nav .site-logo,
.main_menu nav .site-logo-gym,
.main_menu nav .nav-brand-divider {
transition: none;
}
}
/* =====================================================================
Gallery page: dual-tone theme, and a restyle of the NextGEN plugin
thumbnails so they match the site's card system.
===================================================================== */
.gallery-page.home-premium {
--gp-ink: var(--tone-ink, #07242f);
}
/* Hero */
.gp-hero {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.34), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.gp-hero-inner {
position: relative;
z-index: 1;
padding-top: 68px;
padding-bottom: 28px;
}
.gp-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
letter-spacing: 0.02em;
}
.gp-hero-title {
margin: 16px 0 10px;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.03em;
color: #fff;
}
.gp-hero-lead {
margin: 0 auto 22px;
max-width: 56ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.gp-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.gp-jump a {
display: inline-flex;
align-items: center;
padding: 9px 14px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gp-jump a:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.gp-wave {
height: 22px;
margin-top: 24px;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
/* Sections */
.gp-section {
padding: 6rem 0;
background: #fff;
scroll-margin-top: 130px;
}
.gp-section--alt {
background: var(--tone-paper, #fcf8f3);
border-top: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
border-bottom: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.gp-head {
text-align: center;
max-width: 760px;
margin: 0 auto 2.75rem;
}
.gp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep, #c06a22);
margin-bottom: 1rem;
}
.gp-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--tone-warm, #e08a3c);
padding-right: 0.6rem;
border-right: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.gp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.gp-eyebrow--light i {
color: var(--tone-warm, #e08a3c);
border-right-color: rgba(255, 255, 255, 0.28);
}
.gp-h2 {
margin: 0;
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
color: var(--gp-ink);
}
.gp-h2--light {
color: #fff;
}
.gp-lead--light {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.6;
}
/* --- NextGEN thumbnails restyled as clean cards --- */
.gallery-page div.ngg-galleryoverview {
display: grid !important;
width: 100% !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
margin: 0 !important;
padding: 0;
overflow: visible !important;
float: none;
}
.gallery-page div.ngg-galleryoverview div.ngg-gallery-thumbnail-box,
.gallery-page .ngg-gallery-thumbnail-box[style] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.gallery-page .ngg-gallery-thumbnail {
display: block;
width: auto !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
float: none !important;
}
.gallery-page .ngg-gallery-thumbnail a {
display: block;
margin: 0 !important;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
background: #fff;
transition: box-shadow 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 280ms ease;
}
.gallery-page .ngg-gallery-thumbnail a:hover {
box-shadow: 0 16px 40px rgba(7, 36, 47, 0.12);
border-color: rgba(7, 36, 47, 0.18);
transform: translateY(-3px);
}
.gallery-page .ngg-gallery-thumbnail img {
display: block;
width: 100% !important;
height: 230px !important;
object-fit: cover;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gallery-page .ngg-gallery-thumbnail a:hover img {
transform: scale(1.05);
}
/* The gallery script injects the raw filename as a caption after load.
Clip the box to the image so no injected text can show. */
.gallery-page .ngg-gallery-thumbnail-box .ngg-gallery-thumbnail span,
.gallery-page .ngg-gallery-thumbnail > span,
.gallery-page .ngg-gallery-thumbnail-box > span,
.gallery-page .ngg-gallery-thumbnail-box p,
.gallery-page .ngg-gallery-thumbnail-box .ngg-caption,
.gallery-page .ngg-gallery-thumbnail a > span,
.gallery-page .ngg-gallery-thumbnail a > div {
display: none !important;
}
.gallery-page div.ngg-galleryoverview div.ngg-gallery-thumbnail-box {
height: 230px;
overflow: hidden;
border-radius: 10px;
}
.gallery-page .ngg-gallery-thumbnail {
height: 100%;
}
.gallery-page .ngg-gallery-thumbnail a {
height: 100%;
}
/* The plugin emits a clearing div; in a grid it would steal a cell. */
.gallery-page div.ngg-galleryoverview > .ngg-clear,
.gallery-page div.ngg-galleryoverview > br {
display: none !important;
}
.gallery-page .ngg-navigation {
grid-column: 1 / -1;
clear: both;
}
.gallery-page .ngg-navigation {
margin-top: 2rem;
text-align: center;
}
.gallery-page .ngg-navigation a,
.gallery-page .ngg-navigation span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 0.6rem;
margin: 0 3px;
border-radius: 3px;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
background: #fff;
color: var(--gp-ink);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.gallery-page .ngg-navigation a:hover {
border-color: var(--tone-warm, #e08a3c);
color: var(--tone-warm-deep, #c06a22);
}
.gallery-page .ngg-navigation .current {
background: var(--tone-warm, #e08a3c);
border-color: transparent;
color: var(--gp-ink);
}
/* Closing call to action */
.gp-cta {
padding: 6rem 0;
color: #fff;
background:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, #0c3a4a 0%, #07242f 100%);
}
.gp-cta-inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: center;
}
.gp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery-page .btn {
padding: 0.75em 1.35em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 220ms ease, color 220ms ease, transform 160ms ease;
}
.gallery-page .btn:hover {
transform: translateY(-1px);
}
.gp-btn-primary {
background: var(--tone-warm, #e08a3c);
color: var(--gp-ink);
}
.gp-btn-primary:hover {
background: var(--tone-warm-deep, #c06a22);
color: #fff;
}
.gp-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.gp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
@media (min-width: 1024px) {
.gp-cta-inner {
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
}
.gp-cta-actions {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.gp-section,
.gp-cta {
padding-top: 4rem;
padding-bottom: 4rem;
}
.gallery-page div.ngg-galleryoverview {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 0.75rem;
}
.gallery-page div.ngg-galleryoverview div.ngg-gallery-thumbnail-box {
height: 160px;
}
.gallery-page .ngg-gallery-thumbnail img {
height: 160px !important;
}
}
/* =====================================================================
Blog listing page: dual-tone theme.
===================================================================== */
.blog-page {
--bp-ink: var(--tone-ink, #07242f);
}
/* Hero */
.bp-hero {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.34), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.bp-hero-inner {
position: relative;
z-index: 1;
padding-top: 68px;
padding-bottom: 28px;
}
.bp-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
letter-spacing: 0.02em;
}
.bp-hero-title {
margin: 16px 0 10px;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.03em;
color: #fff;
}
.bp-hero-lead {
margin: 0 auto;
max-width: 54ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.bp-wave {
height: 22px;
margin-top: 26px;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
/* Listing */
.bp-section {
padding: 5rem 0 6rem;
background: var(--tone-paper, #fcf8f3);
}
.bp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.75rem;
align-items: stretch;
}
.bp-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
border-radius: 12px;
transition: box-shadow 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 280ms ease;
}
.bp-card:hover {
box-shadow: 0 16px 42px rgba(7, 36, 47, 0.1);
border-color: rgba(7, 36, 47, 0.18);
transform: translateY(-3px);
}
.bp-card-media {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--tone-paper, #fcf8f3);
}
.bp-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-card:hover .bp-card-media img {
transform: scale(1.05);
}
.bp-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 1.5rem;
}
.bp-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.85rem;
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6b7f8c;
}
.bp-card-cat {
display: inline-flex;
padding: 0.26rem 0.6rem;
border-radius: 3px;
background: var(--tone-warm-soft, #fdf1e3);
color: var(--tone-warm-deep, #c06a22);
font-weight: 600;
letter-spacing: 0.06em;
}
.bp-card-title {
margin: 0 0 0.7rem;
font-size: 1.22rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
}
.bp-card-title a {
color: var(--bp-ink);
text-decoration: none;
transition: color 200ms ease;
}
.bp-card-title a:hover {
color: var(--tone-warm-deep, #c06a22);
}
.bp-card-excerpt {
margin: 0 0 1.25rem;
font-size: 0.97rem;
line-height: 1.7;
color: #55707d;
}
.bp-card-link {
align-self: flex-start;
margin-top: auto;
padding: 0 0 2px;
font-size: 0.9rem;
font-weight: 600;
color: var(--tone-warm-deep, #c06a22);
text-decoration: none;
border-bottom: 1px solid rgba(192, 106, 34, 0.4);
transition: color 200ms ease, border-color 200ms ease;
}
.bp-card-link:hover {
color: var(--bp-ink);
border-bottom-color: var(--bp-ink);
}
.bp-empty {
text-align: center;
color: #55707d;
font-size: 1.05rem;
}
/* Pagination */
.bp-pagination {
margin-top: 3rem;
text-align: center;
}
.bp-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 0.7rem;
margin: 0 3px;
border-radius: 3px;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
background: #fff;
color: var(--bp-ink);
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
transition: border-color 200ms ease, color 200ms ease;
}
.bp-pagination .page-numbers:hover {
border-color: var(--tone-warm, #e08a3c);
color: var(--tone-warm-deep, #c06a22);
}
.bp-pagination .page-numbers.current {
background: var(--tone-warm, #e08a3c);
border-color: transparent;
color: var(--bp-ink);
}
/* Closing call to action */
.bp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep, #c06a22);
margin-bottom: 1rem;
}
.bp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.bp-h2 {
margin: 0;
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
color: var(--bp-ink);
}
.bp-h2--light {
color: #fff;
}
.bp-lead--light {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.6;
}
.bp-cta {
padding: 6rem 0;
color: #fff;
background:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, #0c3a4a 0%, #07242f 100%);
}
.bp-cta-inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: center;
}
.bp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.blog-page .btn {
padding: 0.75em 1.35em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 220ms ease, color 220ms ease, transform 160ms ease;
}
.blog-page .btn:hover {
transform: translateY(-1px);
}
.bp-btn-primary {
background: var(--tone-warm, #e08a3c);
color: var(--bp-ink);
}
.bp-btn-primary:hover {
background: var(--tone-warm-deep, #c06a22);
color: #fff;
}
.bp-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.bp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
@media (min-width: 1024px) {
.bp-cta-inner {
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
}
.bp-cta-actions {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.bp-section {
padding: 3.5rem 0 4rem;
}
.bp-cta {
padding: 4rem 0;
}
.bp-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* =====================================================================
VOICE GYM — rebuilt page.
One photographic hero, then a typographic page. Editorial scale,
a left rail of numbers, and programmes shown as a progression.
===================================================================== */
.vgym {
--ink: #07242f;
--ink-soft: #55707d;
--paper: #fcf8f3;
--line: rgba(7, 36, 47, 0.14);
--warm: #e08a3c;
--warm-deep: #c06a22;
color: var(--ink);
background: #fff;
}
.vgym * {
box-sizing: border-box;
}
.vgym h1,
.vgym h2,
.vgym h3 {
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.04;
margin: 0;
}
.vgym p {
margin: 0;
}
.vgym-kicker {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--warm-deep);
margin-bottom: 1.1rem !important;
}
.vgym-h2 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
}
.vgym-head {
max-width: 30ch;
margin-bottom: 3.5rem;
}
.vgym-programmes .vgym-head {
max-width: 46ch;
}
.vgym-who .vgym-head {
max-width: none;
}
.vgym-head--light .vgym-kicker {
color: var(--warm);
}
.vgym-head--light .vgym-h2 {
color: #fff;
}
.vgym-head-note {
margin-top: 1.1rem !important;
color: rgba(255, 255, 255, 0.66);
font-size: 1.02rem;
line-height: 1.6;
max-width: 34ch;
}
/* --- 1. Hero --- */
.vgym-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: min(88vh, 760px);
padding-top: 5rem;
overflow: hidden;
background: var(--ink);
}
.vgym-hero-media {
position: absolute;
inset: 0;
}
.vgym-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.42;
filter: grayscale(0.35) contrast(1.05);
animation: vgymDrift 26s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.vgym-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 36, 47, 0.7) 0%, rgba(7, 36, 47, 0.55) 40%, rgba(7, 36, 47, 0.94) 100%);
}
@keyframes vgymDrift {
from { transform: scale(1.02); }
to { transform: scale(1.1); }
}
.vgym-hero-inner {
position: relative;
z-index: 1;
padding-bottom: 3.5rem;
}
.vgym-hero-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 1.6rem !important;
}
.vgym-hero-title {
font-size: clamp(2.7rem, 7vw, 5.6rem);
color: #fff;
max-width: 16ch;
}
.vgym-hero-title em {
font-style: normal;
color: var(--warm);
}
.vgym-hero-lead {
margin-top: 1.6rem !important;
max-width: 46ch;
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.82);
}
.vgym-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2.2rem;
}
.vgym-btn {
display: inline-flex;
align-items: center;
padding: 0.95rem 1.7rem;
border-radius: 2px;
background: var(--warm);
color: var(--ink);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.vgym-btn:hover {
background: #fff;
color: var(--ink);
}
.vgym-btn--quiet {
background: none;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.vgym-btn--quiet:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.vgym-hero-facts {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vgym-hero-facts > div {
padding: 1.3rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.vgym-hero-facts dt {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.vgym-hero-facts dd {
margin: 0.15rem 0 0;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
/* --- 2. Argument --- */
.vgym-argument {
padding: 7rem 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.vgym-statement {
font-size: clamp(1.8rem, 4vw, 3.1rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.03em;
max-width: 20ch;
}
.vgym-statement span {
display: block;
color: var(--warm-deep);
}
.vgym-argument-body {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2.5rem;
max-width: 62ch;
}
.vgym-argument-body p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ink-soft);
}
/* --- 3. Who --- */
.vgym-who {
padding: 7rem 0;
}
.vgym-who-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.vgym-who-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
padding: 2rem 0;
border-bottom: 1px solid var(--line);
transition: background 220ms ease;
}
.vgym-who-list li:hover {
background: var(--paper);
}
.vgym-who-num {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--warm);
padding-top: 0.45rem;
font-variant-numeric: tabular-nums;
}
.vgym-who-list h3 {
font-size: 1.45rem;
margin-bottom: 0.4rem;
}
.vgym-who-list p {
font-size: 1rem;
line-height: 1.7;
color: var(--ink-soft);
max-width: 60ch;
}
/* --- 4. Programmes ladder --- */
.vgym-programmes {
padding: 7rem 0;
background: var(--ink);
color: #fff;
}
.vgym-ladder {
display: grid;
gap: 3.5rem;
}
.vgym-rung-stage {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
padding-bottom: 1.1rem;
margin-bottom: 1.6rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.vgym-prog-row {
display: grid;
grid-template-columns: 1fr;
gap: 2rem 2.5rem;
}
.vgym-prog h3 {
font-size: 1.5rem;
color: #fff;
margin-bottom: 0.3rem;
}
.vgym-prog-sub {
font-size: 0.8rem !important;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 0.8rem !important;
}
.vgym-prog p:last-child {
font-size: 0.98rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.66);
max-width: 44ch;
}
.vgym-prog--wide h3 {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.vgym-prog--wide p:last-child {
max-width: 56ch;
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.76);
}
.vgym-prog--clinical .vgym-prog-sub {
color: #9fc4d2;
}
.vgym-prog--elite {
padding: 2rem;
background: rgba(224, 138, 60, 0.1);
box-shadow: inset 0 0 0 1px rgba(224, 138, 60, 0.35);
border-radius: 2px;
}
.vgym-rung--entry .vgym-prog--wide {
padding-left: 1.5rem;
border-left: 3px solid var(--warm);
}
/* --- 5. Method --- */
.vgym-method {
padding: 7rem 0;
background: var(--paper);
}
.vgym-method-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
counter-reset: m;
}
.vgym-method-grid article {
counter-increment: m;
position: relative;
padding-top: 1.6rem;
border-top: 2px solid var(--ink);
}
.vgym-method-grid article::before {
content: "0" counter(m);
position: absolute;
top: -2.1rem;
left: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--warm-deep);
}
.vgym-method-grid h3 {
font-size: 1.5rem;
margin-bottom: 0.6rem;
}
.vgym-method-grid p {
font-size: 1rem;
line-height: 1.75;
color: var(--ink-soft);
}
/* --- 6. Doctor --- */
.vgym-doctor {
padding: 7rem 0;
}
.vgym-doctor-inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
.vgym-doctor-photo {
margin: 0;
max-width: 420px;
}
.vgym-doctor-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 2px;
filter: grayscale(0.15);
}
.vgym-doctor-role {
margin-top: 0.6rem !important;
font-size: 1.05rem;
font-weight: 600;
color: var(--warm-deep);
}
.vgym-doctor-text {
margin-top: 1.5rem !important;
font-size: 1.05rem;
line-height: 1.8;
color: var(--ink-soft);
max-width: 58ch;
}
.vgym-creds {
list-style: none;
margin: 2rem 0;
padding: 0;
display: grid;
gap: 0.55rem;
max-width: 46ch;
}
.vgym-creds li {
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--line);
font-size: 0.93rem;
color: var(--ink);
}
.vgym-link {
font-size: 0.95rem;
font-weight: 600;
color: var(--warm-deep);
text-decoration: none;
border-bottom: 1px solid rgba(192, 106, 34, 0.45);
padding-bottom: 2px;
}
.vgym-link:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
/* --- 7. Process + FAQ --- */
.vgym-detail {
padding: 7rem 0;
background: var(--paper);
border-top: 1px solid var(--line);
}
.vgym-detail-inner {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
}
.vgym-steps {
list-style: none;
margin: 0;
padding: 0;
}
.vgym-steps li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem;
padding: 1.4rem 0;
border-top: 1px solid var(--line);
}
.vgym-steps li:last-child {
border-bottom: 1px solid var(--line);
}
.vgym-steps span {
font-size: 0.78rem;
font-weight: 700;
color: var(--warm);
padding-top: 0.3rem;
font-variant-numeric: tabular-nums;
}
.vgym-steps h3 {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.vgym-steps p {
font-size: 0.96rem;
line-height: 1.65;
color: var(--ink-soft);
}
.vgym-faq {
border-top: 1px solid var(--line);
}
.vgym-faq:last-of-type {
border-bottom: 1px solid var(--line);
}
.vgym-faq summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 2.5rem 1.25rem 0;
position: relative;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
}
.vgym-faq summary::-webkit-details-marker {
display: none;
}
.vgym-faq summary::after {
content: "+";
position: absolute;
right: 0;
top: 1.1rem;
font-size: 1.3rem;
font-weight: 400;
color: var(--warm);
}
.vgym-faq[open] summary::after {
content: "\2212";
}
.vgym-faq p {
padding: 0 2.5rem 1.4rem 0;
font-size: 0.98rem;
line-height: 1.75;
color: var(--ink-soft);
}
/* --- 8. Close --- */
.vgym-close {
padding: 7rem 0;
background: var(--ink);
color: #fff;
}
.vgym-close-title {
font-size: clamp(2.2rem, 5vw, 4rem);
color: #fff;
}
.vgym-close-text {
margin-top: 1.1rem !important;
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.7);
max-width: 42ch;
}
.vgym-close-locations {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 4.5rem;
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vgym-close-locations h3 {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 0.8rem;
}
.vgym-close-locations p {
font-size: 0.95rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.6rem !important;
}
.vgym-close-locations a {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
/* --- Responsive --- */
@media (min-width: 700px) {
.vgym-hero-facts {
grid-template-columns: repeat(3, 1fr);
}
.vgym-hero-facts > div {
border-bottom: 0;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.vgym-hero-facts > div:last-child {
border-right: 0;
}
.vgym-argument-body {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.vgym-method-grid,
.vgym-close-locations {
grid-template-columns: repeat(3, 1fr);
}
.vgym-prog-row {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.vgym-hero-inner {
padding-bottom: 4.5rem;
}
.vgym-argument-inner,
.vgym-method-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 4rem;
align-items: start;
}
.vgym-argument .vgym-kicker,
.vgym-argument .vgym-statement {
grid-column: 1;
}
.vgym-argument-body {
grid-column: 2;
grid-row: 1 / 3;
margin-top: 0.4rem;
grid-template-columns: 1fr;
}
.vgym-method .vgym-head {
grid-column: 1;
margin-bottom: 0;
}
.vgym-method-grid {
grid-column: 2;
grid-template-columns: 1fr;
gap: 2.75rem;
}
.vgym-who-list li {
grid-template-columns: 5rem 1fr;
gap: 2.5rem;
}
.vgym-prog-row {
grid-template-columns: repeat(4, 1fr);
}
.vgym-prog-row--two {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.vgym-doctor-inner {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 4.5rem;
}
.vgym-detail-inner {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
}
@media (max-width: 767px) {
.vgym-argument,
.vgym-who,
.vgym-programmes,
.vgym-method,
.vgym-doctor,
.vgym-detail,
.vgym-close {
padding: 4.5rem 0;
}
.vgym-hero {
min-height: auto;
padding-top: 3.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.vgym-hero-media img {
animation: none;
}
}
/* =====================================================================
RESTORED: base layout rules for shared home-page components.
These were removed in error while cleaning up the old Voice Gym
styles; the theme overrides for them still exist further up.
===================================================================== */
/* --- Section header --- */
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-title {
font-size: 2.5rem;
font-weight: bold;
color: #fff;
margin-bottom: 0;
}
.section-subtitle {
font-size: 1.125rem;
color: #fff;
margin-bottom: 0;
margin-top: 2px;
}
/* --- Testimonials --- */
.testimonials-section {
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.testimonial-container {
position: relative;
}
.testimonial-card {
background: #fff;
border-radius: 16px;
padding: 48px;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e5e5;
opacity: 0;
animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.testimonial-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.testimonial-image {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--shrivas-bg-blue);
}
.testimonial-author {
flex: 1;
}
.testimonial-name {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
.testimonial-role {
color: #666;
font-size: 0.875rem;
}
.stars {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.star {
width: 20px;
height: 20px;
fill: var(--shrivas-bg-blue);
}
.testimonial-content {
font-size: 1.125rem;
line-height: 1.75;
color: #333;
margin-bottom: 32px;
font-style: italic;
}
.testimonial-dots {
display: flex;
justify-content: center;
gap: 8px;
}
.dot {
height: 8px;
width: 8px;
border-radius: 9999px;
background: #e5e5e5;
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.dot:hover {
background: #d4d4d4;
}
.dot.active {
width: 32px;
background: var(--shrivas-bg-blue);
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.nav-button {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #e5e5e5;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-button svg {
width: 24px;
height: 24px;
stroke: #1a1a1a;
fill: none;
}
/* --- Facilities / services grid --- */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
padding-top: 3rem;
}
.service-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.2rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-card);
}
.service-icon {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--card-foreground);
}
.service-description {
font-size: 1rem;
color: var(--muted-foreground);
font-weight: 500;
margin-bottom: 1rem;
}
.service-features {
list-style: none;
}
/* --- Associated hospitals scroller --- */
.hospital-scroll-section {
width: 100%;
padding: 4rem 0;
overflow: hidden;
}
.scroll-container {
position: relative;
width: 100%;
overflow: visible;
}
.scroll-track {
display: flex;
width: fit-content;
animation: scroll 40s linear infinite;
will-change: transform;
}
.hospital-card {
flex-shrink: 0;
margin: 0 2rem;
width: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hospital-card p {
height: 30%;
font-weight: bold;
}
.card-inner {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
padding: 1.1rem;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.card-inner img {
max-width: 100%;
max-height: 70%;
object-fit: contain;
transition: all 0.3s ease;
}
/* --- FAQ accordion --- */
.faq {
max-width: 70%;
margin: 0 auto;
padding: 2rem;
}
.faq-item {
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.faq-question {
background: #f1f5f9;
padding: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question:hover {
background: #e2e8f0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition:
max-height 0.3s ease,
padding 0.3s ease;
padding: 0 16px;
color: #475569;
line-height: 1.5;
}
.faq-item.active .faq-answer {
max-height: max-content;
padding: 16px;
}
.faq-answer ul {
margin: revert;
padding: revert;
}
.faq-item.active .icon {
transform: rotate(180deg);
}
/* Hospital logo carousel animation (restored). */
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-33.333%);
}
}
/* =====================================================================
VOICE GYM — section variation.
Each section gets its own treatment so the page stops repeating
one left-aligned pattern eight times.
===================================================================== */
/* 2. The idea — dark full-bleed quote band */
.vgym-argument {
background: var(--ink);
color: #fff;
border-bottom: 0;
padding: 8rem 0;
}
.vgym-argument .vgym-statement {
position: relative;
padding-top: 2.5rem;
font-size: clamp(2rem, 4.6vw, 3.6rem);
color: #fff;
max-width: 22ch;
margin: 0;
quotes: none;
}
.vgym-argument .vgym-statement::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 3px;
background: var(--warm);
}
.vgym-argument .vgym-statement span {
color: var(--warm);
}
.vgym-argument-body p {
color: rgba(255, 255, 255, 0.68);
}
/* 3. Who — header splits, list gets a wide hover state */
.vgym-head--split {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: none;
align-items: end;
}
.vgym-head--split > div {
max-width: 48ch;
}
.vgym-head--split .vgym-h2 {
max-width: 16ch;
}
.vgym-head-aside {
font-size: 0.95rem;
color: var(--ink-soft);
letter-spacing: 0.01em;
}
.vgym-who-list li {
position: relative;
padding-left: 0;
transition: padding-left 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
background 320ms ease;
}
.vgym-who-list li::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: var(--warm);
transition: width 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vgym-who-list li:hover::after {
width: 100%;
}
.vgym-who-list li:hover {
background: none;
}
/* 5. Method — centred, three columns under one split headline */
.vgym-method {
background: #fff;
border-top: 1px solid var(--line);
padding: 8rem 0;
text-align: center;
}
.vgym-kicker--center {
text-align: center;
}
.vgym-method-title {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1em;
font-size: clamp(2.2rem, 6vw, 4.6rem);
line-height: 0.98;
letter-spacing: -0.04em;
margin-bottom: 4rem;
}
.vgym-method-title span:nth-child(1) { color: var(--ink); }
.vgym-method-title span:nth-child(2) { color: var(--warm); }
.vgym-method-title span:nth-child(3) { color: var(--ink-soft); }
.vgym-method .vgym-method-grid {
counter-reset: m;
text-align: left;
max-width: 1000px;
margin: 0 auto;
}
.vgym-method .vgym-method-grid article {
border-top: 1px solid var(--line);
padding-top: 2.6rem;
position: relative;
}
.vgym-method .vgym-method-grid article::before {
color: var(--warm);
top: 1.1rem;
}
/* 6. Doctor — offset, photo overlaps the section edge */
.vgym-doctor {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.vgym-doctor-photo img {
filter: grayscale(0.15) contrast(1.02);
}
/* 7. Detail — process on paper, FAQ on white, split down the middle */
.vgym-detail {
padding: 0;
background: none;
border-top: 0;
}
.vgym-detail-inner {
gap: 0;
}
.vgym-process,
.vgym-faq-block {
padding: 6rem 0;
}
@media (min-width: 700px) {
.vgym-method-title {
flex-direction: row;
gap: 0.4em;
justify-content: center;
flex-wrap: wrap;
}
}
@media (min-width: 1024px) {
.vgym-head--split {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 3rem;
}
.vgym-head-aside {
text-align: right;
padding-bottom: 0.5rem;
}
.vgym-who-list li:hover {
padding-left: 1.25rem;
}
.vgym-argument-inner {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 5rem;
}
.vgym-method .vgym-method-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.vgym-doctor-inner {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
}
.vgym-doctor-photo {
max-width: none;
margin-left: -4rem;
}
.vgym-doctor-media {
padding-bottom: 2rem;
}
.vgym-detail-inner {
grid-template-columns: 1fr 1fr;
gap: 0;
}
.vgym-process {
padding-right: 4rem;
background: var(--paper);
position: relative;
}
.vgym-process::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
background: var(--paper);
z-index: -1;
}
.vgym-process::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50vw;
width: 50vw;
background: var(--paper);
}
.vgym-faq-block {
padding-left: 4rem;
}
}
@media (max-width: 767px) {
.vgym-argument,
.vgym-method {
padding: 4.5rem 0;
}
.vgym-process,
.vgym-faq-block {
padding: 3.5rem 0;
}
.vgym-process {
background: var(--paper);
}
}
/* =====================================================================
VOICE GYM — programmes as a numbered index.
A contents-page treatment: big left numerals, a rule per row, and a
tag column on the right. Replaces the stacked ladder.
===================================================================== */
.vgym-index-head {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 4rem;
align-items: end;
}
.vgym-index-title {
font-size: clamp(2.1rem, 4.6vw, 3.6rem);
line-height: 1.02;
letter-spacing: -0.035em;
color: #fff;
margin: 0;
}
.vgym-index-note {
font-size: 1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.55);
max-width: 30ch;
}
.vgym-index {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vgym-idx {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1.25rem;
padding: 1.9rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
transition: background 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vgym-idx::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 1px;
background: var(--warm);
transition: width 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vgym-idx:hover::after {
width: 100%;
}
.vgym-idx-num {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.34);
padding-top: 0.5rem;
transition: color 300ms ease;
}
.vgym-idx:hover .vgym-idx-num {
color: var(--warm);
}
.vgym-idx-body h3 {
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
color: #fff;
margin-bottom: 0.25rem;
}
.vgym-idx-for {
font-size: 0.78rem !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 0.6rem !important;
}
.vgym-idx-text {
font-size: 0.98rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.6);
max-width: 58ch;
}
.vgym-idx-tag {
grid-column: 2;
justify-self: start;
margin-top: 0.4rem;
padding: 0.28rem 0.7rem;
border-radius: 2px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.vgym-idx-tag--clinical {
color: #9fc4d2;
box-shadow: inset 0 0 0 1px rgba(159, 196, 210, 0.4);
}
.vgym-idx-tag--elite {
color: var(--warm);
box-shadow: inset 0 0 0 1px rgba(224, 138, 60, 0.5);
}
/* The first row reads as the entry point */
.vgym-idx--first {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
background: rgba(255, 255, 255, 0.03);
}
.vgym-idx--first .vgym-idx-num {
color: var(--warm);
}
.vgym-idx--first .vgym-idx-body h3 {
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
.vgym-idx--first .vgym-idx-tag {
color: var(--ink);
background: var(--warm);
box-shadow: none;
}
@media (min-width: 900px) {
.vgym-index-head {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 3rem;
}
.vgym-index-head .vgym-kicker {
grid-column: 1 / -1;
}
.vgym-index-note {
padding-bottom: 0.5rem;
}
.vgym-idx {
grid-template-columns: 4.5rem minmax(0, 1fr) 7rem;
gap: 0 2rem;
align-items: start;
}
.vgym-idx-num {
font-size: 0.85rem;
}
.vgym-idx-tag {
grid-column: 3;
justify-self: end;
margin-top: 0.7rem;
}
.vgym-idx:hover {
background: rgba(255, 255, 255, 0.03);
}
}
/* =====================================================================
RESTORED: base Services page rules (hero, sections, CTA).
Removed in error during the Voice Gym cleanup; the dual-tone
overrides for these still exist further up the file.
===================================================================== */
.services-page {
--sp-blue: #005a86;
--sp-teal: #1aa6b7;
--sv-blue: #005a86;
--sv-teal: #1aa6b7;
color: var(--foreground);
}
.services-page * {
box-sizing: border-box;
}
/* Hero */
.sp-hero {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
background: linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.sp-hero-inner {
position: relative;
z-index: 1;
padding-top: 68px;
padding-bottom: 28px;
}
.sp-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
letter-spacing: 0.02em;
}
.sp-hero-title {
margin: 16px 0 10px;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.03em;
color: #fff;
}
.sp-hero-lead {
margin: 0 auto 22px;
max-width: 56ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.sp-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.sp-jump a {
display: inline-flex;
align-items: center;
padding: 9px 14px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sp-jump a:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.sp-wave {
height: 22px;
margin-top: 24px;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
/* Sections */
.sp-section,
.services-page #procedures {
scroll-margin-top: 200px;
}
.sp-section {
padding: 7rem 0;
background: #fff;
}
.sp-head {
text-align: center;
max-width: 800px;
margin: 0 auto 2rem;
}
.sp-h2 {
margin: 0;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
font-weight: 700;
letter-spacing: -0.025em;
}
.sp-intro {
max-width: 56rem;
margin: 0 auto;
}
.sp-intro .services-card-text + .services-card-text {
margin-top: 1rem;
}
.services-page .sp-body {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(15, 23, 42, 0.12);
}
.sp-note {
margin: 1.25rem 0 0;
text-align: center;
font-size: 0.95rem;
color: var(--muted-foreground);
}
/* Closing call to action */
.sp-cta {
padding: 6rem 0;
color: #fff;
background: linear-gradient(150deg, #0c3a4a 0%, #07242f 100%);
}
.sp-cta-inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: center;
}
.sp-lead--light {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.6;
}
.sp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.services-page .btn {
padding: 0.7em 1.3em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 120ms ease;
}
.services-page .btn:hover {
transform: translateY(-1px);
}
.sp-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.sp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
@media (min-width: 1024px) {
.sp-cta-inner {
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
}
.sp-cta-actions {
justify-content: flex-end;
}
}
@media (max-width: 768px) {
.sp-wave {
background-size: 900px 40px;
}
.sp-section {
scroll-margin-top: 170px;
}
.sp-intro .services-card-text {
text-align: left;
}
}
/* =====================================================================
RESTORED: base doctor-profile page rules.
Removed in error during the Voice Gym cleanup.
===================================================================== */
.dr-page {
--dr-blue: #0c3a4a;
--dr-teal: #18657d;
--am-blue: #0c3a4a;
--am-teal: #18657d;
color: var(--foreground);
}
.dr-page * {
box-sizing: border-box;
}
/* Hero */
.dr-hero {
position: relative;
overflow: hidden;
color: #fff;
background: linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.dr-hero-inner {
position: relative;
z-index: 1;
padding-top: 48px;
padding-bottom: 18px;
}
.dr-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center;
}
.dr-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.24);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.dr-hero-title {
margin: 14px 0 4px;
letter-spacing: -0.03em;
font-size: clamp(30px, 4.2vw, 48px);
line-height: 1.08;
font-weight: 700;
color: #fff;
}
.dr-hero-role {
margin: 0 0 14px;
font-size: clamp(17px, 1.8vw, 21px);
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.dr-pills {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dr-pills li {
display: inline-flex;
padding: 9px 12px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.dr-tags {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dr-tags li {
display: inline-flex;
padding: 5px 11px;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.dr-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dr-page .btn {
padding: 0.7em 1.3em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 120ms ease;
}
.dr-page .btn:hover {
transform: translateY(-1px);
}
.dr-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.dr-btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.dr-hero-photo {
align-self: center;
max-width: 360px;
width: 100%;
margin: 0 auto;
padding: 6px;
border-radius: 4px;
background: #fff;
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}
.dr-hero-photo img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 3px;
}
/* Sections */
.dr-section {
padding: 7rem 0;
background: #fff;
}
.dr-head {
text-align: center;
max-width: 820px;
margin: 0 auto 2.25rem;
}
.dr-h2 {
margin: 0;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.16;
font-weight: 700;
letter-spacing: -0.025em;
}
.dr-profile {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: start;
}
.dr-profile-intro p,
.dr-profile-body p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.dr-profile-intro .dr-lead {
font-size: 1.15rem;
font-weight: 500;
}
.dr-profile-body .about-me-h3:first-child {
margin-top: 0;
}
@media (min-width: 1024px) {
.dr-hero-grid {
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
.dr-hero-inner {
padding-top: 60px;
}
.dr-profile {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: 3.5rem;
}
.dr-profile-intro {
position: sticky;
top: 7rem;
}
}
@media (max-width: 767px) {
.dr-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* =====================================================================
RESTORED: VASCON 2026 page styles.
These were removed in error while cleaning up other page styles.
Recovered from the shrivasclinic theme copy.
===================================================================== */
.vascon2026 {
/* Prefer live-site variables when embedded into shrivasclinic.com */
--vsc-bg: var(--background, #ffffff);
--vsc-ink: var(--foreground, #0f172a);
--vsc-muted: var(--muted-foreground, #475569);
--vsc-line: var(--border, rgba(15, 23, 42, 0.12));
--vsc-card: var(--card, #ffffff);
--vsc-surface: var(--muted, #f8fafc);
--vsc-brand: var(--primary, #0f766e);
--vsc-brand-2: var(--accent, #2563eb);
--vsc-shadow: var(--shadow-card, 0 10px 30px rgba(15, 23, 42, 0.1));
--vsc-shadow-hover: var(--shadow-hover, 0 18px 38px rgba(15, 23, 42, 0.16));
--vsc-radius: var(--radius, 0.5rem);
--vsc-hero-blue: var(--shrivas-bg-blue, #005a86);
--vsc-hero-grad: var(
--gradient-hero,
linear-gradient(135deg, var(--vsc-hero-blue), #1aa6b7)
);
--vsc-teal: #1aa6b7;
--vsc-surface-2: rgba(0, 90, 134, 0.06);
--vsc-radius-lg: calc(var(--vsc-radius) + 0.35rem);
color: var(--vsc-ink);
background:
radial-gradient(
1200px 700px at 15% 0%,
rgba(0, 90, 134, 0.1),
rgba(0, 90, 134, 0) 55%
),
radial-gradient(
900px 650px at 92% 20%,
rgba(26, 166, 183, 0.1),
rgba(26, 166, 183, 0) 55%
),
var(--vsc-bg);
}
.vascon2026 * {
box-sizing: border-box;
}
.vascon2026 a {
color: white;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.vascon2026 a:hover {
text-decoration-thickness: 0.12em;
}
.vascon2026 .vsc-srOnly {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.vascon2026 .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.vascon2026 .vsc-hero {
padding: 42px 0 18px;
background:
radial-gradient(
900px 420px at 18% 12%,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0) 60%
),
radial-gradient(
820px 460px at 86% 0%,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0) 62%
),
var(--vsc-hero-grad);
border-bottom: 1px solid var(--vsc-line);
position: relative;
overflow: hidden;
}
.vascon2026 .vsc-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='520' viewBox='0 0 920 520'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M20 250 C 120 210, 160 310, 260 270 C 360 230, 400 340, 520 290 C 640 240, 700 320, 820 280'/%3E%3Cpath d='M40 310 C 140 270, 190 360, 290 320 C 390 280, 430 390, 560 340 C 690 290, 750 370, 880 330'/%3E%3Cpath d='M70 120 C 140 140, 190 170, 250 210 C 310 250, 370 290, 450 300 C 540 310, 620 280, 690 230 C 750 190, 790 150, 860 130'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='760' cy='120' r='80'/%3E%3Ccircle cx='760' cy='120' r='140'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 75% 35%;
background-size: 900px auto;
}
.vascon2026 .vsc-heroGrid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 22px;
align-items: stretch;
}
.vascon2026 .vsc-siteLogo {
height: 58px;
width: auto;
border-radius: 18px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
display: inline-block;
margin-bottom: 10px;
}
.vascon2026 .vsc-siteLogo--wide {
height: 52px;
padding: 8px 12px;
border-radius: 20px;
max-width: 100%;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
.vascon2026 .vsc-siteLogo--small {
height: 44px;
padding: 8px 10px;
margin: 0 0 8px;
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
}
.vascon2026 .vsc-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.26);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.vascon2026 .vsc-title {
margin: 14px 0 6px;
letter-spacing: -0.02em;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.08;
background: linear-gradient(135deg, var(--vsc-brand), var(--vsc-brand-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vascon2026 .vsc-hero .vsc-title {
background: none;
-webkit-text-fill-color: initial;
color: #ffffff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.vascon2026 .vsc-subtitle {
margin: 0;
color: var(--vsc-muted);
font-size: 16px;
line-height: 1.55;
max-width: 62ch;
}
.vascon2026 .vsc-hero .vsc-subtitle {
color: rgba(255, 255, 255, 0.92);
}
.vascon2026 .vsc-metaRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.vascon2026 .vsc-pill {
display: inline-flex;
gap: 10px;
align-items: baseline;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid var(--vsc-line);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
color: var(--vsc-ink);
font-size: 13px;
}
.vascon2026 .vsc-hero .vsc-pill {
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.95);
}
.vascon2026 .vsc-pill strong {
font-weight: 700;
}
.vascon2026 .vsc-ctaRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.vascon2026 .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-size: 1rem;
font-weight: 500;
border-radius: 0.375rem;
padding: 0.65em 1.25em;
border: 1px solid transparent;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
box-shadow 0.2s,
transform 120ms ease;
text-decoration: none;
}
.vascon2026 .btn:hover {
transform: translateY(-1px);
}
.vascon2026 .btn-primary {
background: var(--vsc-brand);
color: var(--primary-foreground, #ffffff);
}
.vascon2026 .btn-primary:hover {
box-shadow: var(--vsc-shadow-hover);
}
.vascon2026 .btn-outline {
background: rgba(255, 255, 255, 0.75);
color: var(--vsc-brand);
border-color: rgba(15, 23, 42, 0.14);
}
.vascon2026 .btn-outline:hover {
background: rgba(15, 23, 42, 0.04);
}
.vascon2026 .btn-ghost {
background: transparent;
color: var(--vsc-brand);
border-color: rgba(15, 23, 42, 0.1);
}
.vascon2026 .btn-ghost:hover {
background: rgba(15, 23, 42, 0.04);
}
.vascon2026 .vsc-hero .btn-primary {
background: rgba(255, 255, 255, 0.96);
color: var(--vsc-hero-blue);
border-color: rgba(255, 255, 255, 0.26);
}
.vascon2026 .vsc-hero .btn-primary:hover {
background: #ffffff;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}
.vascon2026 .vsc-hero .btn-outline,
.vascon2026 .vsc-hero .btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.vascon2026 .vsc-hero .btn-outline:hover,
.vascon2026 .vsc-hero .btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
}
.vascon2026 .vsc-heroAside {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: var(--vsc-radius);
overflow: hidden;
background: transparent;
}
.vascon2026 .vsc-cover {
width: 100%;
height: auto;
display: block;
}
.vascon2026 .vsc-asideBody {
padding: 14px;
}
.vascon2026 .vsc-logos {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 10px 0 0;
}
.vascon2026 .vsc-logoImg {
height: 28px;
width: auto;
max-width: 170px;
object-fit: contain;
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: var(--vsc-card);
padding: 6px 8px;
}
.vascon2026 .vsc-section {
padding: 34px 0;
position: relative;
overflow: hidden;
}
.vascon2026 .vsc-section > .container {
position: relative;
z-index: 1;
}
.vascon2026 .vsc-section:not(.vsc-section--alt)::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
900px 420px at 12% 10%,
rgba(0, 90, 134, 0.08),
rgba(0, 90, 134, 0) 62%
),
radial-gradient(
820px 420px at 92% 20%,
rgba(26, 166, 183, 0.08),
rgba(26, 166, 183, 0) 62%
),
linear-gradient(135deg, rgba(0, 90, 134, 0.02), rgba(26, 166, 183, 0.02));
}
.vascon2026 .vsc-section:not(.vsc-section--alt)::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
135deg,
rgba(0, 90, 134, 0.035) 0px,
rgba(0, 90, 134, 0.035) 1px,
rgba(0, 90, 134, 0) 1px,
rgba(0, 90, 134, 0) 14px
);
opacity: 0.22;
}
.vascon2026 .vsc-hero::before {
display: none;
}
.vascon2026 .vsc-section--alt {
background:
radial-gradient(
900px 420px at 10% 0%,
rgba(0, 90, 134, 0.1),
rgba(0, 90, 134, 0) 62%
),
radial-gradient(
800px 420px at 92% 20%,
rgba(26, 166, 183, 0.1),
rgba(26, 166, 183, 0) 62%
),
var(--vsc-surface);
border-top: 1px solid var(--vsc-line);
border-bottom: 1px solid var(--vsc-line);
}
.vascon2026 .vsc-h2 {
margin: 0 0 10px;
font-size: 22px;
letter-spacing: -0.01em;
}
.vascon2026 .vsc-section .vsc-h2 {
background: linear-gradient(135deg, var(--vsc-brand), var(--vsc-brand-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vascon2026 .vsc-lead {
margin: 0;
color: var(--vsc-muted);
line-height: 1.65;
max-width: 80ch;
}
.vascon2026 .vsc-hero .vsc-note,
.vascon2026 .vsc-hero .vsc-note a {
color: black;
}
.vsc-note-details {
color: white;
}
.vascon2026 .vsc-hero .vsc-note a {
text-decoration-color: rgba(255, 255, 255, 0.6);
}
.vascon2026 .vsc-hero .vsc-note a:hover {
text-decoration-color: rgba(255, 255, 255, 0.9);
}
.vascon2026 .vsc-grid3 {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.vascon2026 .card {
border: 1px solid transparent;
background:
linear-gradient(var(--vsc-card), var(--vsc-card)) padding-box,
linear-gradient(135deg, rgba(0, 90, 134, 0.3), rgba(26, 166, 183, 0.28))
border-box;
border-radius: var(--vsc-radius-lg);
padding: 16px;
box-shadow: var(--vsc-shadow);
transition:
transform 140ms ease,
box-shadow 140ms ease,
border-color 140ms ease;
position: relative;
}
.vascon2026 .card::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--vsc-hero-blue), var(--vsc-brand-2));
opacity: 0.65;
}
.vascon2026 .card:hover {
transform: translateY(-2px);
box-shadow: var(--vsc-shadow-hover);
}
.vascon2026 .vsc-cardTitle {
margin: 0 0 6px;
font-size: 15px;
letter-spacing: -0.01em;
}
.vascon2026 .vsc-cardText {
margin: 0;
color: var(--vsc-muted);
line-height: 1.6;
font-size: 14px;
}
.vascon2026 .vsc-icon {
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
rgba(0, 90, 134, 0.14),
rgba(26, 166, 183, 0.14)
);
border: 1px solid rgba(0, 90, 134, 0.18);
}
.vascon2026 .vsc-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: rgba(0, 90, 134, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.vascon2026 .vsc-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.vascon2026 .vsc-row h3 {
margin: 0 0 6px;
}
.vascon2026 .vsc-band {
margin-top: -1px;
padding: 18px 0 26px;
background:
radial-gradient(
900px 420px at 18% 12%,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0) 60%
),
radial-gradient(
820px 460px at 86% 0%,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0) 62%
),
var(--vsc-hero-grad);
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.vascon2026 .vsc-bandGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.vascon2026 .vsc-bandCard {
border-radius: var(--vsc-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
padding: 12px 12px;
color: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.vascon2026 .vsc-bandCard .vsc-icon {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
.vascon2026 .vsc-bandCard .vsc-icon svg {
stroke: rgba(255, 255, 255, 0.95);
}
.vascon2026 .vsc-bandTitle {
margin: 10px 0 4px;
font-weight: 850;
letter-spacing: -0.01em;
font-size: 14px;
}
.vascon2026 .vsc-bandText {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
line-height: 1.45;
}
.vascon2026 .vsc-dividerWave {
height: 22px;
margin-top: 18px;
opacity: 0.65;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
@keyframes vsc-rise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vascon2026 .vsc-heroGrid > div > * {
animation: vsc-rise 520ms ease both;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(1) {
animation-delay: 0ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(2) {
animation-delay: 60ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(3) {
animation-delay: 120ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(4) {
animation-delay: 180ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(5) {
animation-delay: 240ms;
}
.vascon2026 .vsc-details {
margin-top: 14px;
}
.vascon2026 .vsc-details summary {
cursor: pointer;
font-weight: 650;
color: var(--vsc-ink);
}
.vascon2026 .vsc-detailsBody {
margin-top: 10px;
color: var(--vsc-muted);
line-height: 1.75;
}
.vascon2026 .vsc-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 16px;
}
.vascon2026 .vsc-chipGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
margin-top: 10px;
}
.vascon2026 .vsc-chip {
border: 1px solid var(--vsc-line);
background: rgba(255, 255, 255, 0.88);
padding: 8px 10px;
border-radius: 999px;
color: var(--vsc-ink);
font-size: 13px;
line-height: 1.2;
}
.vascon2026 .vsc-chip small {
display: block;
color: var(--vsc-muted);
margin-top: 4px;
font-size: 12px;
}
.vascon2026 .vsc-facultyWrap {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.vascon2026 .vsc-facultyCol {
display: grid;
grid-auto-rows: min-content;
gap: 14px;
}
.vascon2026 .vsc-facultyCard .vsc-note {
margin-top: 8px;
}
.vascon2026 .vsc-facultyHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.vascon2026 .vsc-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
padding: 6px 10px;
background: rgba(0, 90, 134, 0.1);
border: 1px solid rgba(0, 90, 134, 0.18);
color: rgba(0, 90, 134, 0.95);
white-space: nowrap;
}
.vascon2026 .vsc-badge--teal {
background: rgba(26, 166, 183, 0.12);
border-color: rgba(26, 166, 183, 0.22);
color: rgba(0, 110, 126, 1);
}
.vascon2026 .vsc-personList {
margin: 12px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.vascon2026 .vsc-personRow {
display: grid;
grid-template-columns: 12px 1fr;
gap: 10px;
align-items: start;
}
.vascon2026 .vsc-personDot {
width: 10px;
height: 10px;
border-radius: 999px;
margin-top: 4px;
background: linear-gradient(135deg, var(--vsc-hero-blue), var(--vsc-brand-2));
box-shadow: 0 0 0 4px rgba(0, 90, 134, 0.1);
}
.vascon2026 .vsc-personName {
font-weight: 800;
color: var(--vsc-ink);
font-size: 14px;
line-height: 1.2;
}
.vascon2026 .vsc-personMeta {
margin-top: 4px;
color: var(--vsc-muted);
font-size: 13px;
line-height: 1.35;
}
.vascon2026 .vsc-miniGrid {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.vascon2026 .vsc-miniGrid--tight {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vascon2026 .vsc-miniPerson {
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 14px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.75);
}
.vascon2026 .vsc-miniName {
font-weight: 800;
font-size: 13px;
line-height: 1.25;
color: var(--vsc-ink);
}
.vascon2026 .vsc-miniMeta {
margin-top: 4px;
font-size: 12px;
color: var(--vsc-muted);
}
.vascon2026 .vsc-details--tight {
margin-top: 10px;
}
.vascon2026 .vsc-colList {
margin: 0;
padding-left: 18px;
columns: 2;
column-gap: 24px;
}
.vascon2026 .vsc-colList li {
break-inside: avoid;
padding: 2px 0;
}
.vascon2026 .vsc-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.vascon2026 .vsc-tabBtn {
border: 1px solid var(--vsc-line);
background: rgba(255, 255, 255, 0.75);
color: var(--vsc-ink);
padding: 10px 12px;
border-radius: 999px;
cursor: pointer;
font-weight: 650;
font-size: 13px;
transition:
border-color 120ms ease,
background 120ms ease;
}
.vascon2026 .vsc-tabBtn[aria-selected="true"] {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(0, 90, 134, 0.35);
box-shadow: 0 8px 18px rgba(0, 90, 134, 0.1);
}
.vascon2026 .vsc-tabs--days .vsc-tabBtn[aria-selected="true"],
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn[aria-selected="true"] {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}
.vascon2026 .vsc-tabs--days .vsc-tabBtn:nth-child(1)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(0, 90, 134, 1),
rgba(26, 166, 183, 1)
);
}
.vascon2026 .vsc-tabs--days .vsc-tabBtn:nth-child(2)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(26, 166, 183, 1),
rgba(0, 90, 134, 1)
);
}
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn:nth-child(1)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(0, 90, 134, 1),
rgba(0, 130, 168, 1)
);
}
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn:nth-child(2)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(26, 166, 183, 1),
rgba(0, 90, 134, 0.95)
);
}
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn:nth-child(3)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 65, 102, 1), rgba(0, 90, 134, 1));
}
.vascon2026 .vsc-panel {
margin-top: 14px;
}
.vascon2026 .vsc-panel[hidden] {
display: none !important;
}
.vascon2026 .vsc-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.vascon2026 .vsc-timeline {
position: relative;
}
.vascon2026 .vsc-timeline::before {
content: "";
position: absolute;
left: 146px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(0, 90, 134, 0.16);
}
.vascon2026 .vsc-tlItem {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
align-items: start;
}
.vascon2026 .vsc-time {
position: sticky;
top: 10px;
align-self: start;
font-weight: 800;
color: var(--vsc-ink);
letter-spacing: -0.01em;
font-size: 13px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(0, 90, 134, 0.1);
border: 1px solid rgba(0, 90, 134, 0.2);
}
.vascon2026 .vsc-tlCard {
border-radius: var(--vsc-radius);
background: var(--vsc-card);
border: 1px solid var(--vsc-line);
padding: 14px;
box-shadow: var(--vsc-shadow);
position: relative;
}
.vascon2026 .vsc-tlCard::before {
content: "";
position: absolute;
left: -12px;
top: 18px;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--vsc-hero-blue);
box-shadow: 0 0 0 5px rgba(0, 90, 134, 0.14);
}
.vascon2026 .vsc-tlCard h4 {
margin: 0 0 8px;
font-size: 15px;
letter-spacing: -0.01em;
}
.vascon2026 .vsc-talkList {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 7px;
}
.vascon2026 .vsc-talk {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: baseline;
border-top: 1px dashed rgba(15, 23, 42, 0.14);
padding-top: 7px;
}
.vascon2026 .vsc-talk:first-child {
border-top: none;
padding-top: 0;
}
.vascon2026 .vsc-talkTitle {
color: var(--vsc-ink);
font-size: 14px;
line-height: 1.35;
}
.vascon2026 .vsc-talkWho {
color: var(--vsc-muted);
font-size: 13px;
white-space: nowrap;
}
.vascon2026 .vsc-note {
margin: 10px 0 0;
color: black;
font-size: 15px;
line-height: 1.6;
}
.vascon2026 .vsc-personImage {
width: 180px;
height: 180px;
}
.vascon2026 .vsc-tableWrap {
margin-top: 12px;
border: 1px solid var(--vsc-line);
border-radius: var(--vsc-radius);
overflow-x: auto;
background: var(--vsc-card);
}
.vascon2026 .vsc-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
}
.vascon2026 .vsc-table th,
.vascon2026 .vsc-table td {
padding: 12px 12px;
text-align: left;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
vertical-align: top;
}
.vascon2026 .vsc-table th {
font-weight: 800;
font-size: 13px;
color: var(--vsc-ink);
background: rgba(15, 23, 42, 0.04);
}
.vascon2026 .vsc-table td {
font-size: 14px;
color: var(--vsc-muted);
}
.vascon2026 .vsc-twoCol {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 14px;
margin-top: 14px;
}
.vascon2026 .vsc-qr {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: start;
}
.vascon2026 .vsc-qr img {
width: 250px;
height: 250px;
object-fit: contain;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: var(--vsc-card);
}
.payment-card {
margin-top: 10px;
}
.vascon2026 .vsc-list {
margin: 10px 0 0;
padding-left: 20px;
color: var(--vsc-muted);
line-height: 1.7;
}
.vascon2026 .vsc-footer {
padding: 24px 0 38px;
border-top: 1px solid var(--vsc-line);
background: rgba(248, 250, 252, 0.65);
}
.vascon2026 .vsc-small {
color: var(--vsc-muted);
font-size: 13px;
line-height: 1.6;
}
@media (max-width: 960px) {
.vascon2026 .vsc-heroGrid {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-grid3 {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-split {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-twoCol {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-tlItem {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-time {
position: relative;
top: auto;
}
.vascon2026 .vsc-timeline::before,
.vascon2026 .vsc-tlCard::before {
display: none;
}
.vascon2026 .vsc-talkWho {
white-space: normal;
}
.vascon2026 .vsc-facultyWrap {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-miniGrid,
.vascon2026 .vsc-miniGrid--tight {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-colList {
columns: 1;
}
.vascon2026 .vsc-bandGrid {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-dividerWave {
background-size: 900px 40px;
}
}
/* =====================================================================
HOME — infographics.
Original inline SVG diagrams: anatomy map, symptom signs, and the
patient journey. No external images, no licensing, scales cleanly.
===================================================================== */
.home-premium .info {
padding: 6rem 0;
background: #fff;
border-top: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.home-premium .info--signs {
background: var(--tone-paper, #fcf8f3);
}
.home-premium .info--journey {
background: #fff;
}
.home-premium .info-head {
max-width: 46ch;
margin-bottom: 3rem;
}
.home-premium .info-eyebrow {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep, #c06a22);
}
.home-premium .info-h2 {
margin: 0;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.025em;
color: var(--tone-ink, #07242f);
}
.home-premium .info-lead {
margin: 1rem 0 0;
font-size: 1.05rem;
line-height: 1.7;
color: #55707d;
}
/* --- Anatomy map --- */
.info-anatomy {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
.info-anatomy-figure {
margin: 0;
justify-self: center;
}
.info-anatomy-figure svg {
width: 100%;
max-width: 300px;
height: auto;
display: block;
}
.info-anatomy-figure svg path,
.info-anatomy-figure svg ellipse {
vector-effect: non-scaling-stroke;
}
.info-fold {
animation: infoFoldPulse 3.2s ease-in-out infinite;
transform-origin: 160px 150px;
}
@keyframes infoFoldPulse {
0%, 100% { opacity: 1; transform: scaleY(1); }
50% { opacity: 0.72; transform: scaleY(0.84); }
}
.info-anatomy-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: anat;
}
.info-anatomy-list li {
position: relative;
padding: 1.5rem 0 1.5rem 2.75rem;
border-top: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.info-anatomy-list li:last-child {
border-bottom: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.info-anatomy-list li::before {
content: "";
position: absolute;
left: 0;
top: 1.9rem;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--tone-warm, #e08a3c);
box-shadow: 0 0 0 4px rgba(224, 138, 60, 0.16);
}
.info-anatomy-list h3 {
margin: 0 0 0.2rem;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--tone-ink, #07242f);
}
.info-site {
margin: 0 0 0.5rem !important;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tone-warm-deep, #c06a22);
}
.info-anatomy-list p:last-child {
margin: 0;
font-size: 0.98rem;
line-height: 1.7;
color: #55707d;
}
/* --- Symptom signs --- */
.info-signs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.info-signs li {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 0.2rem 1rem;
padding: 1.5rem;
background: #fff;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
border-radius: 12px;
transition: box-shadow 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.info-signs li:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(7, 36, 47, 0.08);
}
.info-signs-icon {
grid-row: 1 / 3;
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--tone-warm-soft, #fdf1e3);
color: var(--tone-warm-deep, #c06a22);
}
.info-signs-icon svg {
width: 1.4rem;
height: 1.4rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.info-signs strong {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--tone-ink, #07242f);
}
.info-signs li > span:last-child {
font-size: 0.93rem;
line-height: 1.6;
color: #55707d;
}
/* --- Patient journey --- */
.info-journey {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
position: relative;
}
.info-journey li {
position: relative;
padding-left: 3.25rem;
}
.info-journey li::before {
content: "";
position: absolute;
left: 0.95rem;
top: 2.1rem;
bottom: -1.75rem;
width: 1px;
background: var(--tone-line, rgba(7, 36, 47, 0.12));
}
.info-journey li:last-child::before {
display: none;
}
.info-step {
position: absolute;
left: 0;
top: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--tone-ink, #07242f);
color: #fff;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.info-journey h3 {
margin: 0.25rem 0 0.3rem;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--tone-ink, #07242f);
}
.info-journey p {
margin: 0;
font-size: 0.96rem;
line-height: 1.65;
color: #55707d;
max-width: 46ch;
}
@media (min-width: 640px) {
.info-signs {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.info-anatomy {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 4.5rem;
}
.info-signs {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.info-journey {
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
.info-journey li {
padding-left: 0;
padding-top: 3.25rem;
}
.info-journey li::before {
left: 2.4rem;
right: -1.5rem;
top: 0.95rem;
bottom: auto;
width: auto;
height: 1px;
}
.info-journey p {
max-width: none;
}
}
@media (max-width: 767px) {
.home-premium .info {
padding: 4rem 0;
}
}
@media (prefers-reduced-motion: reduce) {
.info-fold {
animation: none;
}
}
/* =====================================================================
HOME — service tab diagrams.
A small original SVG per panel, set beside the copy on wide screens.
===================================================================== */
.home-premium .services-card {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem 2.5rem;
align-items: center;
text-align: left;
}
.home-premium .services-card > .services-card-title,
.home-premium .services-card > .services-card-sub,
.home-premium .services-card > .services-card-text,
.home-premium .services-card > .services-more-row {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.home-premium .services-card-text {
max-width: 54ch;
}
.home-premium .services-more-row {
text-align: left;
}
.services-fig {
margin: 0;
padding: 1.25rem;
background: var(--tone-paper, #fcf8f3);
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.1));
border-radius: 12px;
}
.services-fig svg {
display: block;
width: 100%;
height: auto;
font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
}
.services-fig svg [stroke]:not([stroke="none"]) {
vector-effect: non-scaling-stroke;
}
@media (min-width: 900px) {
.home-premium .services-card {
grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
grid-template-rows: auto auto auto auto;
align-items: start;
}
.services-fig {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
}
.home-premium .services-card > .services-card-title,
.home-premium .services-card > .services-card-sub,
.home-premium .services-card > .services-card-text,
.home-premium .services-card > .services-more-row,
.home-premium .services-card > .services-image {
grid-column: 1;
}
}
@media (max-width: 899px) {
.services-fig {
order: -1;
}
.home-premium .services-card {
display: flex;
flex-direction: column;
align-items: stretch;
}
}
/* =====================================================================
CLINIC PAGES — Voice, Swallowing, Airway, Surgery.
Article column with a sticky contact card. Built to rank: one H1,
question headings, addresses and phone numbers in the markup.
===================================================================== */
.clinic {
--ink: #07242f;
--ink-soft: #55707d;
--paper: #fcf8f3;
--line: rgba(7, 36, 47, 0.12);
--warm: #e08a3c;
--warm-deep: #c06a22;
color: var(--ink);
background: #fff;
}
.clinic * {
box-sizing: border-box;
}
.clinic h1,
.clinic h2,
.clinic h3 {
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.14;
margin: 0;
}
/* Hero */
.clinic-hero {
background: linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
color: #fff;
}
.clinic-hero-inner {
padding: 4rem 1.5rem 3.25rem;
}
.clinic-kicker {
margin: 0 0 1.2rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--warm);
}
.clinic-h1 {
font-size: clamp(2rem, 4.4vw, 3.2rem);
color: #fff;
max-width: 20ch;
}
.clinic-strap {
margin: 1.2rem 0 0;
max-width: 56ch;
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
.clinic-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.clinic-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.6rem;
border-radius: 3px;
background: var(--warm);
color: var(--ink);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.clinic-btn:hover {
background: #fff;
color: var(--ink);
}
.clinic-btn--quiet {
background: none;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.clinic-btn--quiet:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.clinic-btn--block {
width: 100%;
margin-top: 1.25rem;
}
/* Layout */
.clinic-layout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
padding-top: 3.5rem;
padding-bottom: 4.5rem;
}
.clinic-intro p {
margin: 0 0 1.15rem;
font-size: 1.1rem;
line-height: 1.8;
color: var(--ink);
max-width: 68ch;
}
.clinic-main h2 {
margin: 2.75rem 0 1rem;
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.clinic-main .services-h4 {
margin: 2.25rem 0 0.85rem;
padding-left: 0.9rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
}
.clinic-main .services-h4::before {
background: var(--warm);
width: 3px;
}
.clinic-main p {
margin: 0 0 1.05rem;
font-size: 1.02rem;
line-height: 1.8;
color: var(--ink-soft);
max-width: 68ch;
}
.clinic-main .services-list {
grid-template-columns: 1fr;
gap: 0.55rem;
margin-bottom: 1.5rem;
}
.clinic-main .services-list li {
font-size: 1rem;
color: var(--ink);
}
.clinic-main .services-tagline {
text-align: left;
border-radius: 4px;
background: #fdf1e3;
border-color: rgba(224, 138, 60, 0.3);
color: var(--warm-deep) !important;
}
.clinic-main .services-pull {
border-radius: 0 4px 4px 0;
background: #fdf1e3;
border-left-color: var(--warm);
color: var(--warm-deep) !important;
}
/* FAQ */
.clinic-faq {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--line);
}
.clinic-faq-item {
border-bottom: 1px solid var(--line);
}
.clinic-faq-item:first-of-type {
border-top: 1px solid var(--line);
}
.clinic-faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.15rem 2.5rem 1.15rem 0;
position: relative;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
}
.clinic-faq-item summary::-webkit-details-marker {
display: none;
}
.clinic-faq-item summary::after {
content: "+";
position: absolute;
right: 0;
top: 1rem;
font-size: 1.3rem;
font-weight: 400;
color: var(--warm);
}
.clinic-faq-item[open] summary::after {
content: "\2212";
}
.clinic-faq-item p {
padding: 0 2.5rem 1.3rem 0;
margin: 0;
}
/* Author block */
.clinic-author {
margin-top: 3rem;
padding: 1.75rem;
background: var(--paper);
border-radius: 6px;
}
.clinic-author h2 {
margin-top: 0;
font-size: 1.15rem;
}
.clinic-link {
font-size: 0.95rem;
font-weight: 600;
color: var(--warm-deep);
text-decoration: none;
border-bottom: 1px solid rgba(192, 106, 34, 0.4);
padding-bottom: 2px;
}
/* Sidebar */
.clinic-card {
padding: 1.75rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 1.25rem;
}
.clinic-card h2 {
margin: 0 0 1.25rem;
font-size: 1.05rem;
}
.clinic-loc {
padding-bottom: 1.1rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid var(--line);
}
.clinic-loc h3 {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm-deep);
margin-bottom: 0.5rem;
}
.clinic-loc p {
margin: 0 0 0.5rem;
font-size: 0.93rem;
line-height: 1.6;
color: var(--ink-soft);
}
.clinic-loc a,
.clinic-related a {
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--line);
}
.clinic-loc a:hover,
.clinic-related a:hover {
color: var(--warm-deep);
border-bottom-color: var(--warm);
}
.clinic-hours {
margin: 0;
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink-soft);
}
.clinic-related ul {
list-style: none;
margin: 0;
padding: 0;
}
.clinic-related li {
padding: 0.6rem 0;
border-bottom: 1px solid var(--line);
}
.clinic-related li:last-child {
border-bottom: 0;
}
@media (min-width: 700px) {
.clinic-main .services-list {
grid-template-columns: 1fr 1fr;
gap: 0.6rem 1.75rem;
}
}
@media (min-width: 1024px) {
.clinic-hero-inner {
padding: 5rem 1.5rem 4rem;
}
.clinic-layout {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 4rem;
padding-top: 4.5rem;
}
.clinic-side {
position: sticky;
top: 140px;
align-self: start;
}
}
/* ==========================================================================
SERVICES — rail + stage layout (supersedes the centred card design)
========================================================================== */
.svc {
--svc-ink: #07242f;
--svc-ink-2: #0c3a4a;
--svc-acc: #e08a3c;
--svc-paper: #fcf8f3;
--svc-line: rgba(7, 36, 47, 0.14);
padding: 5.5rem 0;
background:
radial-gradient(760px 380px at 88% 8%, rgba(224, 138, 60, 0.14), rgba(224, 138, 60, 0) 60%),
#f2ece3;
border-top: 1px solid rgba(7, 36, 47, 0.08);
border-bottom: 1px solid rgba(7, 36, 47, 0.08);
}
.svc .services-head {
text-align: left;
max-width: 720px;
margin: 0 0 2.75rem;
}
.svc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
/* ---- left rail ---- */
.svc-rail {
display: flex;
flex-direction: column;
gap: 2px;
}
.svc-tab {
position: relative;
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 0.85rem;
width: 100%;
padding: 0.95rem 1.1rem;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--svc-line);
background: transparent;
color: var(--svc-ink);
text-align: left;
font: inherit;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: background 160ms ease, padding-left 160ms ease, color 160ms ease;
}
.svc-rail .svc-tab:first-child {
border-top: 1px solid var(--svc-line);
}
.svc-tab-num {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--svc-acc);
font-variant-numeric: tabular-nums;
}
.svc-tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgba(7, 36, 47, 0.06);
flex: none;
transition: background 160ms ease;
}
.svc-tab-icon svg {
width: 1.05rem;
height: 1.05rem;
fill: none;
stroke: var(--svc-ink-2);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 160ms ease;
}
.svc-tab-label {
min-width: 0;
}
.svc-tab:hover {
background: rgba(7, 36, 47, 0.04);
padding-left: 1.4rem;
}
.svc-tab[aria-selected="true"] {
background: var(--svc-ink);
color: #fff;
padding-left: 1.4rem;
border-bottom-color: transparent;
}
.svc-tab[aria-selected="true"] .svc-tab-icon {
background: rgba(255, 255, 255, 0.14);
}
.svc-tab[aria-selected="true"] .svc-tab-icon svg {
stroke: var(--svc-acc);
}
.svc-tab[aria-selected="true"] /* the per-index accent colours from the old pill design do not apply here */
.svc .services-tab:nth-child(n)[aria-selected="true"] {
background: var(--svc-ink);
}
/* ---- stage ---- */
.svc-panel {
margin-top: 0;
}
.svc-panel[hidden] {
display: none !important;
}
.svc-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
overflow: hidden;
border-radius: 1rem;
background: var(--svc-ink);
box-shadow: 0 24px 60px rgba(7, 36, 47, 0.18);
}
.svc-body {
padding: 2.5rem;
color: #fff;
}
.svc-kicker {
display: block;
margin-bottom: 1rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--svc-acc);
}
.svc-title {
margin: 0 0 0.6rem;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
color: #fff;
text-align: left;
}
.svc-sub {
margin: 0 0 0.9rem;
font-size: 1.05rem;
font-weight: 600;
font-style: italic;
color: rgba(255, 255, 255, 0.72);
text-align: left;
}
.svc-text {
margin: 0;
max-width: 64ch;
font-size: 1.02rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.76);
text-align: left;
}
.svc-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 2rem 0 0;
padding: 0;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.6rem;
overflow: hidden;
}
.svc-stat {
padding: 0.9rem 1rem;
background: var(--svc-ink);
}
.svc-stat dt {
margin: 0 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.svc-stat dd {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.35;
color: #fff;
}
.svc-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
padding: 0.75em 1.5em;
border-radius: 999px;
background: var(--svc-acc);
color: var(--svc-ink) !important;
font-weight: 700;
text-decoration: none;
transition: background 160ms ease, transform 160ms ease;
}
.svc-btn:hover {
background: #f0a257;
transform: translateY(-1px);
color: var(--svc-ink) !important;
}
@media (min-width: 880px) {
.svc-layout {
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
gap: 2.5rem;
}
.svc-body {
padding: 3rem 3.25rem;
}
}
@media (max-width: 879px) {
.svc-body {
padding: 1.75rem;
}
}
@media (max-width: 680px) {
.svc-stats {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 560px) {
.svc {
padding: 3.5rem 0;
}
.svc-tab {
font-size: 0.92rem;
padding: 0.8rem 0.9rem;
gap: 0.6rem;
}
.svc-tab-icon {
width: 1.75rem;
height: 1.75rem;
}
}
/* ==========================================================================
SERVICES — dark band variant (inverts the rail + stage onto navy)
========================================================================== */
.home-premium .services.svc,
.svc {
background:
radial-gradient(820px 420px at 88% 6%, rgba(224, 138, 60, 0.16), rgba(224, 138, 60, 0) 62%),
var(--svc-ink);
background-image:
radial-gradient(820px 420px at 88% 6%, rgba(224, 138, 60, 0.16), rgba(224, 138, 60, 0) 62%);
background-color: var(--svc-ink);
border-top: 0;
border-bottom: 0;
}
/* section heading — specificity must beat .home-premium .services-* */
.home-premium .svc .services-eyebrow,
.svc .services-eyebrow {
color: var(--svc-acc);
}
.home-premium .svc .services-title,
.svc .services-title {
color: #fff;
}
.home-premium .svc .services-lead,
.svc .services-lead {
color: rgba(255, 255, 255, 0.72);
}
/* rail sits on navy now */
.home-premium .svc-rail .svc-tab,
.home-premium .svc-rail .svc-tab:first-child,
.svc-rail .svc-tab,
.svc-rail .svc-tab:first-child {
border-color: rgba(255, 255, 255, 0.14);
}
.svc-tab {
color: rgba(255, 255, 255, 0.82);
}
.home-premium .svc .svc-tab-icon,
.svc-tab-icon {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
}
.home-premium .svc .svc-tab-icon svg,
.svc-tab-icon svg {
stroke: rgba(255, 255, 255, 0.7);
}
.svc-tab:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.home-premium .svc-tab[aria-selected="true"],
.svc-tab[aria-selected="true"],
.svc .services-tab:nth-child(n)[aria-selected="true"] {
background: var(--svc-paper);
color: var(--svc-ink);
}
.home-premium .svc .svc-tab[aria-selected="true"] .svc-tab-icon,
.svc-tab[aria-selected="true"] .svc-tab-icon {
background: rgba(7, 36, 47, 0.08);
border-color: rgba(7, 36, 47, 0.14);
}
.home-premium .svc .svc-tab[aria-selected="true"] .svc-tab-icon svg,
.svc-tab[aria-selected="true"] .svc-tab-icon svg {
stroke: var(--svc-ink);
}
.svc-tab[aria-selected="true"] .svc-tab-num {
color: #b5651d;
}
/* panel card flips to light */
.svc-card {
background: var(--svc-paper);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.svc-kicker {
color: #b5651d;
}
.svc-title {
color: var(--svc-ink);
}
.svc-sub {
color: rgba(7, 36, 47, 0.62);
}
.svc-text {
color: rgba(7, 36, 47, 0.74);
}
.svc-stats {
background: rgba(7, 36, 47, 0.14);
border-color: rgba(7, 36, 47, 0.14);
}
.svc-stat {
background: var(--svc-paper);
}
.svc-stat dt {
color: rgba(7, 36, 47, 0.52);
}
.svc-stat dd {
color: var(--svc-ink);
}
.svc-btn {
background: var(--svc-ink);
color: #fff !important;
}
.svc-btn:hover {
background: var(--svc-ink-2);
color: #fff !important;
}
/* ==========================================================================
HERO — paired "firsts" strip above the H1
========================================================================== */
.hero-v2-firsts {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 0;
margin: 0 0 1.25rem;
}
.hero-v2-first {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0 1.4rem 0 0;
}
.hero-v2-firsts .hero-v2-first + .hero-v2-first,
.hero-v2-first-sep + .hero-v2-first {
padding-left: 1.4rem;
}
.hero-v2-first-sep {
width: 1px;
align-self: stretch;
background: rgba(255, 255, 255, 0.28);
}
.hero-v2-first-rank {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tone-warm, #e08a3c);
white-space: nowrap;
}
.hero-v2-first-what {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.25;
color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 560px) {
.hero-v2-firsts {
gap: 0.75rem 0;
}
.hero-v2-first {
padding-right: 1rem;
}
.hero-v2-firsts .hero-v2-first + .hero-v2-first,
.hero-v2-first-sep + .hero-v2-first {
padding-left: 1rem;
}
.hero-v2-first-what {
font-size: 0.88rem;
}
}
/* headline now carries two short lines — give it room so neither wraps */
.home-premium .hero-v2-title,
.hero-v2-title {
max-width: 100%;
text-wrap: balance;
}
@media (min-width: 900px) {
.home-premium .hero-v2-title,
.hero-v2-title {
max-width: 24ch;
}
}
/* the firsts strip must not force the hero wider than the screen */
.hero-v2-firsts {
max-width: 100%;
}
.hero-v2-first-what,
.hero-v2-first-rank {
overflow-wrap: break-word;
}
/* hero: grid items were overflowing on narrow screens (1fr floors at
min-content). Scoped below the 1024px breakpoint so the two-column
desktop layout — text left, portrait right — is left untouched. */
@media (max-width: 1023px) {
.hero-v2-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.hero-v2-main,
.hero-v2-locations,
.hero-v2-locations-list {
min-width: 0;
max-width: 100%;
}
.hero-v2-locations-list {
flex-wrap: wrap;
}
.hero-v2-location {
min-width: 0;
}
/* hero: single "first" claim now reads as a pill above the H1
(the paired two-column strip is no longer used) */
.hero-v2-firsts {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1rem;
padding: 0.5rem 1rem;
border: 1px solid rgba(224, 138, 60, 0.45);
border-radius: 999px;
background: rgba(224, 138, 60, 0.12);
}
.hero-v2-firsts .hero-v2-first {
flex-direction: row;
align-items: baseline;
gap: 0.5rem;
padding: 0;
}
.hero-v2-firsts .hero-v2-first-what {
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.02em;
}
/* restore the headline to its original width now that it is long again */
.home-premium .hero-v2-title,
.hero-v2-title {
max-width: 100%;
}
@media (min-width: 900px) {
.home-premium .hero-v2-title,
.hero-v2-title {
max-width: 17ch;
}
}
/* ==========================================================================
HERO — location cards given real presence (were translucent glass)
========================================================================== */
.hero-v2-locations {
gap: 0.9rem;
}
.hero-v2-locations-label {
font-size: 0.72rem;
letter-spacing: 0.22em;
color: rgba(255, 255, 255, 0.85);
}
.hero-v2-locations-list {
gap: 0.85rem;
}
.hero-v2-location {
position: relative;
overflow: hidden;
gap: 0.85rem;
padding: 0.85rem 1rem 0.85rem 0.85rem;
border-radius: 12px;
background: rgba(7, 36, 47, 0.82);
border: 1px solid rgba(255, 255, 255, 0.16);
border-left: 3px solid #e08a3c;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
/* warm wash that sweeps across on hover */
.hero-v2-location::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%);
opacity: 0;
transition: opacity 220ms ease;
pointer-events: none;
}
.hero-v2-location:hover {
background: rgba(7, 36, 47, 0.92);
border-color: rgba(224, 138, 60, 0.6);
border-left-color: #f2b632;
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
}
.hero-v2-location:hover::after {
opacity: 1;
}
.hero-v2-location:focus-visible {
outline: 2px solid #f2b632;
outline-offset: 3px;
}
.hero-v2-location-pin {
width: 34px;
height: 34px;
border-radius: 9px;
background: linear-gradient(140deg, #f2b632, #e08a3c);
box-shadow: 0 4px 12px rgba(224, 138, 60, 0.4);
}
.hero-v2-location-pin svg {
width: 17px;
height: 17px;
}
.hero-v2-location-text strong {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.hero-v2-location-text > span {
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 480px) {
.hero-v2-location {
justify-content: flex-start;
}
}
/* ==========================================================================
DOCTOR PAGE HERO — modernised (was boxy pills + framed studio photo)
========================================================================== */
.dr-page.home-premium .dr-hero {
background:
radial-gradient(900px 500px at 92% 10%, rgba(224, 138, 60, 0.2), rgba(224, 138, 60, 0) 58%),
radial-gradient(700px 420px at 6% 96%, rgba(26, 166, 183, 0.14), rgba(26, 166, 183, 0) 60%),
linear-gradient(145deg, #0c3a4a 0%, #07242f 62%, #061d26 100%);
}
.dr-page.home-premium .dr-hero-inner {
padding-top: 72px;
padding-bottom: 72px;
}
.dr-page.home-premium .dr-hero-grid {
gap: 48px;
align-items: center;
}
/* kicker — plain line with a pulse dot, not a grey box */
.dr-page.home-premium .dr-kicker {
padding: 0;
gap: 0.6rem;
background: none;
border: 0;
border-radius: 0;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.66);
}
.dr-kicker-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tone-warm, #e08a3c);
box-shadow: 0 0 0 4px rgba(224, 138, 60, 0.2);
flex: none;
}
.dr-page.home-premium .dr-hero-title {
margin: 1rem 0 0.35rem;
font-size: clamp(36px, 4.8vw, 60px);
}
.dr-page.home-premium .dr-hero-role {
margin: 0 0 1.75rem;
font-size: clamp(17px, 1.9vw, 22px);
font-weight: 500;
color: var(--tone-warm, #e08a3c);
}
/* the two "firsts" as a bordered stat row, replacing stacked grey pills */
.dr-firsts {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0 0 1.5rem;
padding: 0;
border-left: 2px solid rgba(224, 138, 60, 0.55);
}
.dr-first {
padding: 0.15rem 1.75rem 0.15rem 1.1rem;
}
.dr-first + .dr-first {
border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.dr-first dt {
margin: 0 0 0.2rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tone-warm, #e08a3c);
}
.dr-first dd {
margin: 0;
font-size: 1.02rem;
font-weight: 600;
color: #fff;
}
/* qualifications read as a line of text, not a cramped tag */
.dr-quals {
margin: 0 0 1.5rem;
max-width: 46ch;
font-size: 0.9rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
}
.dr-quals-label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
/* practice areas — outlined chips instead of solid amber blocks */
.dr-page.home-premium .dr-tags {
gap: 0.5rem;
margin: 0 0 2rem;
}
.dr-page.home-premium .dr-tags li {
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.9);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* buttons */
.dr-page.home-premium .dr-cta {
gap: 0.75rem;
}
.dr-page.home-premium .dr-btn-primary,
.dr-page.home-premium .dr-btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.8em 1.5em;
border-radius: 999px;
font-weight: 650;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.dr-page.home-premium .dr-btn-primary {
background: var(--tone-warm, #e08a3c);
color: var(--tone-ink, #07242f);
box-shadow: 0 12px 30px rgba(224, 138, 60, 0.3);
}
.dr-page.home-premium .dr-btn-primary:hover {
background: #f0a257;
color: var(--tone-ink, #07242f);
transform: translateY(-2px);
}
.dr-page.home-premium .dr-btn-ghost {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
}
.dr-page.home-premium .dr-btn-ghost:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.dr-btn-ico {
display: inline-flex;
width: 17px;
height: 17px;
}
.dr-btn-ico svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* photo — framed portrait replaced with a soft-cornered, glowing cut */
.dr-page.home-premium .dr-hero-photo {
position: relative;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
justify-self: center;
max-width: 420px;
}
.dr-hero-photo-glow {
position: absolute;
inset: -18% -14% -12%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(224, 138, 60, 0.38), rgba(224, 138, 60, 0) 74%);
filter: blur(14px);
pointer-events: none;
}
.dr-page.home-premium .dr-hero-photo img {
position: relative;
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
/* the studio backdrop is a hard blue rectangle — fade its lower edge
into the hero so the portrait sits in the page rather than on it */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0) 99%);
mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0) 99%);
/* DP.jpg has a clinic banner along its bottom edge: anchor the square
crop to the top so the banner falls outside it */
object-position: center top;
}
.dr-hero-photo-badge {
position: absolute;
left: -22px;
bottom: 48px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.7rem 1.1rem;
border-radius: 12px;
background: rgba(7, 36, 47, 0.92);
border: 1px solid rgba(224, 138, 60, 0.45);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
}
.dr-hero-photo-badge strong {
font-size: 1rem;
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.dr-hero-photo-badge span {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tone-warm, #e08a3c);
}
@media (max-width: 900px) {
.dr-page.home-premium .dr-hero-photo {
max-width: 320px;
}
.dr-hero-photo-badge {
left: 0;
}
}
@media (max-width: 560px) {
.dr-firsts {
flex-direction: column;
gap: 0.9rem;
}
.dr-first + .dr-first {
border-left: 0;
}
.dr-page.home-premium .dr-cta {
flex-direction: column;
align-items: stretch;
}
.dr-page.home-premium .dr-btn-primary,
.dr-page.home-premium .dr-btn-ghost {
justify-content: center;
}
}
/* ==========================================================================
DOCTOR PAGE — photography woven into the long-form profile
========================================================================== */
/* inline figures that the body text wraps around */
.dr-fig {
margin: 0 0 1.5rem;
max-width: 100%;
}
.dr-fig img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 18px 40px rgba(7, 36, 47, 0.18);
}
.dr-fig figcaption {
margin-top: 0.6rem;
font-size: 0.8rem;
line-height: 1.45;
color: var(--muted-foreground, #5b7280);
}
@media (min-width: 880px) {
.dr-fig {
width: 300px;
margin-bottom: 1.25rem;
}
.dr-fig--right {
float: right;
margin-left: 2rem;
}
.dr-fig--left {
float: left;
margin-right: 2rem;
}
/* headings must clear a floated figure rather than sit beside it */
.dr-profile-body .about-me-h3 {
clear: both;
}
}
/* photo strip between the profile and the credentials */
.dr-page.home-premium .dr-strip {
padding: 5rem 0;
background: var(--tone-paper, #fcf8f3);
border-top: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.dr-strip-head {
margin-bottom: 2.25rem;
}
.dr-strip-head .dr-h2 {
margin: 0.5rem 0 0;
}
.dr-strip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.25rem;
}
.dr-strip-item {
margin: 0;
overflow: hidden;
border-radius: 14px;
background: #fff;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.1));
box-shadow: 0 10px 28px rgba(7, 36, 47, 0.1);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.dr-strip-item:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(7, 36, 47, 0.16);
}
.dr-strip-item img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
object-position: center 30%;
}
/* the Doctor Vox shot is a tall portrait — its subjects sit mid-frame,
so the default top-weighted crop would show only the projector screen */
.dr-strip-item--portrait img {
object-position: center 46%;
}
.dr-strip-item figcaption {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.9rem 1rem 1.1rem;
}
.dr-strip-item figcaption strong {
font-size: 0.95rem;
font-weight: 700;
color: var(--tone-ink, #07242f);
line-height: 1.25;
}
.dr-strip-item figcaption span {
font-size: 0.78rem;
color: var(--muted-foreground, #5b7280);
line-height: 1.4;
}
/* ==========================================================================
VOICE GYM — programmes restructured: one gate, three tracks
(replaces the seven identical full-width index rows)
========================================================================== */
.vgym-gate {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
margin-top: 3rem;
padding: 2.25rem;
border-radius: 16px;
background: linear-gradient(135deg, rgba(224, 138, 60, 0.16), rgba(224, 138, 60, 0.04) 58%);
border: 1px solid rgba(224, 138, 60, 0.4);
}
.vgym-gate-main {
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.vgym-gate-num {
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.18em;
color: #e08a3c;
padding-top: 0.5rem;
flex: none;
}
.vgym-gate-tag {
margin: 0 0 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #e08a3c;
}
.vgym-gate-title {
margin: 0 0 0.6rem;
font-size: clamp(1.75rem, 3.2vw, 2.4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
}
.vgym-gate-text {
margin: 0;
max-width: 54ch;
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.76);
}
.vgym-gate-out {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 3.6rem;
}
.vgym-gate-out-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
flex: none;
}
.vgym-gate-arrow {
position: relative;
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(224, 138, 60, 0.7), rgba(224, 138, 60, 0.1));
}
.vgym-gate-arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: rgba(224, 138, 60, 0.5);
}
/* three tracks */
.vgym-tracks {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
margin-top: 1.25rem;
}
.vgym-track {
display: flex;
flex-direction: column;
padding: 1.75rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid rgba(255, 255, 255, 0.25);
}
.vgym-track--condition {
border-top-color: #7fb3c7;
}
.vgym-track--clinical {
border-top-color: #9ad0b0;
}
.vgym-track--elite {
border-top-color: #e08a3c;
background: rgba(224, 138, 60, 0.06);
}
.vgym-track-head {
padding-bottom: 1.1rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.vgym-track-badge {
display: inline-block;
margin-bottom: 0.55rem;
padding: 0.3rem 0.75rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #07242f;
background: rgba(255, 255, 255, 0.85);
}
.vgym-track--condition .vgym-track-badge {
background: #7fb3c7;
}
.vgym-track--clinical .vgym-track-badge {
background: #9ad0b0;
}
.vgym-track--elite .vgym-track-badge {
background: #e08a3c;
}
.vgym-track-why {
margin: 0;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82);
}
.vgym-track-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.vgym-track-list li {
padding-left: 0;
}
.vgym-track-list li + li {
padding-top: 1.4rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vgym-track-list h4 {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin: 0 0 0.3rem;
font-size: 1.12rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.vgym-pnum {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.35);
font-variant-numeric: tabular-nums;
}
.vgym-pfor {
margin: 0 0 0.45rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #e08a3c;
}
.vgym-ptext {
margin: 0;
font-size: 0.93rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.68);
}
@media (min-width: 880px) {
.vgym-gate {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2.5rem;
padding: 2.75rem 3rem;
}
.vgym-gate-out {
flex-direction: column;
gap: 0.6rem;
padding-left: 0;
width: 150px;
}
.vgym-gate-arrow {
flex: none;
width: 100%;
}
.vgym-tracks {
grid-template-columns: 1.15fr 0.85fr 1fr;
gap: 1.25rem;
/* each track sizes to its own content: the clinical track holds one
programme and should not be stretched to match the other two */
align-items: start;
}
}
@media (max-width: 879px) {
.vgym-gate-out {
display: none;
}
}
/* ==========================================================================
VOICE GYM — programmes as a rising intensity ladder
Borderless, to match the big-type rhythm of the rest of the page.
Each rung steps right and gains weight as intensity climbs.
========================================================================== */
.vgym-ladder {
position: relative;
margin-top: 3.5rem;
padding-left: 2.5rem;
}
/* vertical axis running the height of the ladder */
.vgym-ladder-axis {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg,
rgba(224, 138, 60, 0.9) 0%,
rgba(127, 179, 199, 0.4) 58%,
rgba(255, 255, 255, 0.1) 100%);
}
.vgym-ladder-axis-label {
position: absolute;
left: 0.75rem;
bottom: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.32);
white-space: nowrap;
}
/* arrowhead at the top of the axis — the climb has a direction */
.vgym-ladder-axis::after {
content: "";
position: absolute;
top: 0;
left: -3px;
width: 7px;
height: 7px;
border-left: 1px solid rgba(224, 138, 60, 0.85);
border-top: 1px solid rgba(224, 138, 60, 0.85);
transform: rotate(45deg);
}
.vgym-rungs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column-reverse; /* 01 at the foot, 07 at the top */
}
.vgym-rung {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: 0 1.25rem;
padding: calc(1.3rem + var(--rung) * 0.1rem) 0;
/* each rung sits further right than the one below it */
margin-left: calc(var(--rung) * 2.2%);
--tick: calc(2.5rem + var(--rung) * 2.2%);
border-top: 1px solid rgba(255, 255, 255, 0.1);
transition: margin-left 260ms cubic-bezier(0.2, 0.7, 0.2, 1), background 220ms ease;
}
.vgym-rungs > .vgym-rung:first-child {
border-top: 0;
}
/* tick connecting each rung back to the axis */
.vgym-rung-rule {
position: absolute;
top: -1px;
right: 100%;
width: var(--tick);
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.vgym-rung-num {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.3);
font-variant-numeric: tabular-nums;
}
.vgym-rung-title {
margin: 0 0 0.55rem;
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.025em;
color: #fff;
/* type scales up as the ladder climbs */
font-size: calc(1.4rem + var(--rung) * 0.17rem);
}
.vgym-rung-who {
margin: 0 0 0.65rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #e08a3c;
}
.vgym-rung-text {
margin: 0;
max-width: 58ch;
font-size: 0.95rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.6);
}
.vgym-rung-track {
justify-self: end;
align-self: center;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
}
/* the dot on the axis marks which band a rung belongs to */
.vgym-rung::before {
content: "";
position: absolute;
top: -4.5px;
right: calc(100% + var(--tick) - 4.5px);
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.vgym-rung--start::before { background: #e08a3c; box-shadow: 0 0 0 5px rgba(224, 138, 60, 0.18); }
.vgym-rung--condition::before { background: #7fb3c7; }
.vgym-rung--clinical::before { background: #9ad0b0; }
.vgym-rung--elite::before { background: #e08a3c; }
.vgym-rung--start .vgym-rung-track { color: #e08a3c; }
.vgym-rung--condition .vgym-rung-track { color: #7fb3c7; }
.vgym-rung--clinical .vgym-rung-track { color: #9ad0b0; }
.vgym-rung--elite .vgym-rung-track { color: #e08a3c; }
.vgym-rung:hover {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}
.vgym-rung:hover .vgym-rung-num {
color: #e08a3c;
}
@media (max-width: 860px) {
.vgym-ladder {
padding-left: 1.5rem;
}
.vgym-rung {
grid-template-columns: auto minmax(0, 1fr);
margin-left: calc(var(--rung) * 1.1%);
--tick: 0px;
padding: 1.15rem 0;
}
.vgym-rung-title {
font-size: calc(1.2rem + var(--rung) * 0.08rem);
}
.vgym-rung-track {
grid-column: 2;
justify-self: start;
margin-top: 0.5rem;
}
.vgym-rung-rule,
.vgym-rung::before {
display: none;
}
.vgym-ladder-axis-label {
display: none;
}
}
/* ==========================================================================
VOICE GYM — programmes: light, icon-led, one panel at a time
Replaces the dark ladder. Compact: 7 programmes in roughly one screen.
========================================================================== */
/* sits between two white sections (vgym-who above, vgym-method below),
so it takes the warm cream to separate from both */
.vgym-programmes {
background: #f6efe5 !important;
color: var(--ink, #07242f) !important;
border-top: 1px solid rgba(7, 36, 47, 0.1);
border-bottom: 1px solid rgba(7, 36, 47, 0.1);
}
.vgp-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}
.vgym-programmes .vgym-kicker {
color: #c06a22;
}
.vgp-title {
margin: 0.6rem 0 0;
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--ink, #07242f);
}
.vgp-note {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: rgba(7, 36, 47, 0.6);
}
.vgp {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
/* ---- icon rail ---- */
.vgp-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 0.6rem;
}
.vgp-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 1rem 0.6rem;
border: 1px solid rgba(7, 36, 47, 0.1);
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(7, 36, 47, 0.04);
color: var(--ink, #07242f);
font: inherit;
cursor: pointer;
text-align: center;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.vgp-tab:hover {
border-color: rgba(224, 138, 60, 0.55);
transform: translateY(-2px);
}
.vgp-tab-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #fdf3e9;
transition: background 160ms ease;
}
.vgp-tab-ico svg {
width: 21px;
height: 21px;
fill: none;
stroke: #c06a22;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.vgp-tab-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.vgp-tab-num {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.16em;
color: rgba(7, 36, 47, 0.38);
}
.vgp-tab-name {
font-size: 0.82rem;
font-weight: 650;
line-height: 1.25;
}
.vgp-tab[aria-selected="true"] {
background: var(--ink, #07242f);
border-color: var(--ink, #07242f);
color: #fff;
}
.vgp-tab[aria-selected="true"] .vgp-tab-ico {
background: rgba(255, 255, 255, 0.14);
}
.vgp-tab[aria-selected="true"] .vgp-tab-ico svg {
stroke: #e08a3c;
}
.vgp-tab[aria-selected="true"] .vgp-tab-num {
color: rgba(255, 255, 255, 0.5);
}
/* ---- panel ---- */
.vgp-panel[hidden] {
display: none !important;
}
.vgp-panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(7, 36, 47, 0.1);
background: #fff;
box-shadow: 0 14px 34px rgba(7, 36, 47, 0.07);
}
.vgp-panel-main {
padding: 2.25rem;
}
/* tier tag above each Voice Gym heading, hidden for now (was inline-block) */
.vgp-band {
display: none;
margin-bottom: 0.9rem;
padding: 0.3rem 0.8rem;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #07242f;
}
.vgp-band--start { background: #e08a3c; }
.vgp-band--condition { background: #9fc4d2; }
.vgp-band--clinical { background: #a9d6bc; }
.vgp-band--elite { background: #07242f; color: #e08a3c; }
.vgp-panel-title {
margin: 0;
padding-bottom: 0.85rem;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink, #07242f);
}
/* "who it's for" line under each Voice Gym tier heading, hidden for now */
.vgp-panel-who {
display: none;
margin: 0 0 1rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c06a22;
}
.vgp-panel-text {
margin: 0 0 1.4rem;
max-width: 52ch;
font-size: 1.02rem;
line-height: 1.7;
color: rgba(7, 36, 47, 0.74);
}
.vgp-panel-list {
list-style: none;
margin: 0;
padding: 1.25rem 0 0;
border-top: 1px solid rgba(7, 36, 47, 0.1);
display: grid;
gap: 0.7rem;
}
.vgp-panel-list li {
position: relative;
padding-left: 1.6rem;
font-size: 0.95rem;
line-height: 1.55;
color: rgba(7, 36, 47, 0.8);
}
.vgp-panel-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid #e08a3c;
}
/* right-hand side of the panel */
.vgp-panel-side {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
padding: 2.25rem;
background: #fcf8f3;
border-top: 1px solid rgba(7, 36, 47, 0.1);
}
.vgp-panel-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: #fdf3e9;
}
.vgp-panel-ico svg {
width: 30px;
height: 30px;
fill: none;
stroke: #c06a22;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.vgp-meta {
margin: 0;
display: grid;
gap: 0.9rem;
}
.vgp-meta dt {
margin: 0 0 0.15rem;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(7, 36, 47, 0.45);
}
.vgp-meta dd {
margin: 0;
font-size: 1rem;
font-weight: 650;
color: var(--ink, #07242f);
}
@media (min-width: 820px) {
.vgp-head {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: end;
gap: 2.5rem;
}
.vgp-note {
padding-bottom: 0.4rem;
}
.vgp-rail {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.vgp-panel {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.vgp-panel-side {
border-top: 0;
border-left: 1px solid rgba(7, 36, 47, 0.1);
}
}
/* ==========================================================================
VOICE GYM — close section now carries only the locations
(the "Start with a screen" headline, text and buttons were removed, so the
divider and offset that separated them from this block are no longer needed)
========================================================================== */
.vgym-close {
padding: 5rem 0;
}
.vgym-close-locations {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* ==========================================================================
SERVICES PAGE — each clinic gets its own layout
(all five previously repeated: centred head > intro > ticks > prose > tagline)
========================================================================== */
/* ---- 01 Voice Clinic: two columns, body left, photo + facts right ---- */
@media (min-width: 1000px) {
.sp-v--split .container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
grid-template-areas:
"head aside"
"intro aside"
"body aside";
column-gap: 3.5rem;
align-items: start;
}
.sp-v--split .sp-head { grid-area: head; }
.sp-v--split .sp-intro { grid-area: intro; }
.sp-v--split .sp-body { grid-area: body; }
.sp-v--split .sp-aside { grid-area: aside; position: sticky; top: 7rem; }
.sp-v--split .sp-head,
.sp-v--split .sp-intro,
.sp-v--split .sp-intro p { text-align: left; margin-left: 0; }
}
.sp-aside {
margin-top: 2rem;
}
.sp-aside-fig {
margin: 0 0 1.5rem;
}
.sp-aside-fig img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 16px 38px rgba(7, 36, 47, 0.14);
}
.sp-aside-fig figcaption {
margin-top: 0.6rem;
font-size: 0.78rem;
color: var(--muted-foreground, #5b7280);
}
.sp-aside-facts {
margin: 0;
display: grid;
gap: 0;
border-top: 2px solid rgba(224, 138, 60, 0.6);
}
.sp-aside-facts > div {
padding: 0.95rem 0;
border-bottom: 1px solid rgba(7, 36, 47, 0.1);
}
.sp-aside-facts dt {
margin: 0 0 0.25rem;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #c06a22;
}
.sp-aside-facts dd {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--foreground, #07242f);
}
/* ---- 02 Swallowing: full-width photo + conditions as cards ---- */
.sp-wide-fig {
margin: 2.5rem 0 3rem;
}
.sp-wide-fig img {
display: block;
width: 100%;
max-height: 340px;
object-fit: cover;
object-position: center 35%;
border-radius: 16px;
box-shadow: 0 20px 48px rgba(7, 36, 47, 0.16);
}
.sp-wide-fig figcaption {
margin-top: 0.7rem;
text-align: center;
font-size: 0.82rem;
color: var(--muted-foreground, #5b7280);
}
.sp-v--band .sp-body .services-list {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.8rem;
}
.sp-v--band .sp-body .services-list li {
padding: 0.9rem 1rem 0.9rem 2.6rem;
background: #fff;
border: 1px solid rgba(7, 36, 47, 0.1);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(7, 36, 47, 0.04);
}
.sp-v--band .sp-body .services-list li::before {
left: 0.9rem;
top: 1.15em;
}
/* ---- 03 Airway: conditions as a numbered index, wider measure ---- */
.sp-v--index .sp-body .services-list {
counter-reset: airway;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0;
}
.sp-v--index .sp-body .services-list li {
counter-increment: airway;
padding: 0.85rem 1rem 0.85rem 3rem;
border-bottom: 1px solid rgba(7, 36, 47, 0.12);
}
.sp-v--index .sp-body .services-list li::before {
content: counter(airway, decimal-leading-zero);
left: 0.4rem;
top: 0.85rem;
width: auto;
height: auto;
border-radius: 0;
background: none;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #c06a22;
}
/* ---- 05 Surgeries: editorial — narrow measure, large opening line ---- */
.sp-v--editorial .sp-head,
.sp-v--editorial .sp-intro,
.sp-v--editorial .sp-intro p,
.sp-v--editorial .sp-body,
.sp-v--editorial .sp-body p {
text-align: left;
}
.sp-v--editorial .sp-head,
.sp-v--editorial .sp-intro,
.sp-v--editorial .sp-body {
max-width: 46rem;
margin-left: 0;
margin-right: auto;
}
.sp-v--editorial .sp-body > p:first-of-type,
.sp-v--editorial .sp-intro p {
font-size: 1.22rem;
line-height: 1.65;
color: var(--foreground, #07242f);
}
.sp-v--editorial .services-h4 {
margin-top: 2.75rem;
padding-left: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c06a22;
}
.sp-v--editorial .services-h4::before {
display: none;
}
.sp-v--editorial .services-tagline {
padding: 1.75rem 0 0;
border-top: 2px solid rgba(224, 138, 60, 0.5);
border-radius: 0;
background: none !important;
font-size: 1.35rem;
font-style: italic;
text-align: left;
}
/* taglines: vary rather than repeat the same amber pill five times */
.sp-v--band .services-tagline {
background: var(--tone-ink, #07242f) !important;
color: #fff !important;
border: 0;
}
.sp-v--index .services-tagline {
background: none !important;
border-left: 3px solid #e08a3c;
border-radius: 0;
text-align: left;
padding-left: 1.25rem;
}
/* ==========================================================================
SERVICES — Surgery in Laryngology: five parallel categories as tabs
(they were 885 words stacked vertically; only one shows at a time now)
========================================================================== */
.sg {
margin: 2.5rem 0 3rem;
}
.sg-lead {
margin: 0 0 1.25rem;
font-size: 0.72rem !important;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #c06a22 !important;
}
.sg-tabs {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
border-top: 1px solid rgba(7, 36, 47, 0.14);
}
.sg-tab {
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
padding: 0.95rem 1rem 0.95rem 0.25rem;
border: 0;
border-bottom: 1px solid rgba(7, 36, 47, 0.14);
background: none;
font: inherit;
text-align: left;
cursor: pointer;
color: var(--foreground, #07242f);
transition: background 160ms ease, padding-left 160ms ease;
}
.sg-tab:hover {
background: rgba(7, 36, 47, 0.035);
padding-left: 0.75rem;
}
.sg-tab-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: none;
border-radius: 50%;
background: #fdf3e9;
transition: background 160ms ease;
}
.sg-tab-ico svg {
width: 17px;
height: 17px;
fill: none;
stroke: #c06a22;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.sg-tab-txt {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.sg-tab-name {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.sg-tab-blurb {
font-size: 0.8rem;
color: var(--muted-foreground, #5b7280);
}
.sg-tab[aria-selected="true"] {
background: var(--tone-ink, #07242f);
color: #fff;
padding-left: 0.75rem;
}
.sg-tab[aria-selected="true"] .sg-tab-ico {
background: rgba(255, 255, 255, 0.14);
}
.sg-tab[aria-selected="true"] .sg-tab-ico svg {
stroke: #e08a3c;
}
.sg-tab[aria-selected="true"] .sg-tab-blurb {
color: rgba(255, 255, 255, 0.62);
}
.sg-panel[hidden] {
display: none !important;
}
.sg-panel {
padding: 1.75rem 0 0;
}
.sg-panel-title {
margin: 0 0 1rem;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--foreground, #07242f);
}
.sg-panel p {
margin: 0 0 1rem;
}
/* the editorial column is ~46rem; this block breaks out wider so the
tab rail and the panel can sit side by side */
@media (min-width: 1040px) {
.sp-v--editorial .sg {
width: calc(100% + 16rem);
max-width: none;
}
}
@media (min-width: 880px) {
.sg {
display: grid;
grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
grid-template-areas:
"rail stage";
column-gap: 3rem;
align-items: start;
}
.sg-rail { grid-area: rail; position: sticky; top: 7rem; }
.sg-stage { grid-area: stage; }
.sg-lead { margin-bottom: 1rem; }
.sg-panel {
padding-top: 0;
}
}
/* ==========================================================================
SERVICES — Swallowing Clinic: two-method comparison + three-step close
========================================================================== */
/* condition cards were ragged (1 to 5 lines); even them out */
.sp-v--band .sp-body .services-list {
align-items: stretch;
}
.sp-v--band .sp-body .services-list li {
display: flex;
align-items: flex-start;
min-height: 100%;
}
/* the two assessment methods, side by side */
.sw-methods {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
margin: 1.75rem 0 1.5rem;
}
.sw-method {
position: relative;
padding: 1.75rem;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(7, 36, 47, 0.12);
box-shadow: 0 10px 28px rgba(7, 36, 47, 0.06);
}
.sw-method::before {
content: "";
position: absolute;
left: 1.75rem;
right: 1.75rem;
top: 0;
height: 3px;
border-radius: 0 0 3px 3px;
background: #9fc4d2;
}
.sw-method:last-child::before {
background: #e08a3c;
}
.sw-method-tag {
display: block;
margin-bottom: 0.6rem;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #7d939d;
}
.sw-method-name {
margin: 0 0 0.5rem;
font-size: 1.18rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--foreground, #07242f);
}
.sw-method-name abbr {
margin-left: 0.4rem;
padding: 0.15em 0.5em;
border-radius: 999px;
background: #fdf3e9;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #c06a22;
text-decoration: none;
vertical-align: 0.15em;
}
.sw-method-what {
margin: 0 0 0.9rem !important;
font-weight: 600;
color: var(--foreground, #07242f) !important;
}
.sw-method p:last-child {
margin-bottom: 0 !important;
font-size: 0.95rem !important;
}
/* the sentence that joins the two methods */
.sw-together {
margin: 0 0 1rem !important;
padding: 1.1rem 1.4rem;
border-left: 3px solid #e08a3c;
border-radius: 0 10px 10px 0;
background: rgba(224, 138, 60, 0.07);
font-weight: 500;
color: var(--foreground, #07242f) !important;
}
/* the closing logic as three steps */
.sw-steps {
counter-reset: swstep;
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin: 1.75rem 0 0;
padding: 0;
border-top: 1px solid rgba(7, 36, 47, 0.14);
}
.sw-steps li {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 1.1rem 0;
border-bottom: 1px solid rgba(7, 36, 47, 0.14);
}
.sw-step-num {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
color: #c06a22;
flex: none;
}
.sw-steps li div {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.sw-steps li strong {
font-size: 1.02rem;
font-weight: 700;
color: var(--foreground, #07242f);
}
.sw-steps li span:not(.sw-step-num) {
font-size: 0.92rem;
line-height: 1.5;
color: var(--muted-foreground, #5b7280);
}
@media (min-width: 820px) {
.sw-methods {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sw-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 0;
}
.sw-steps li {
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem 1.25rem 1.25rem 0;
border-top: 2px solid rgba(224, 138, 60, 0.55);
border-bottom: 0;
}
}
/* ==========================================================================
SERVICES — every clinic becomes a two-column layout with a sticky aside.
Sides alternate down the page so it reads as a rhythm, not a repeat.
========================================================================== */
@media (min-width: 1040px) {
.sp-v--band .container,
.sp-v--index .container,
.sp-v--editorial .container {
display: grid;
column-gap: 3.5rem;
align-items: start;
}
/* 02 Swallowing — aside LEFT */
.sp-v--band .container {
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
grid-template-areas:
"aside head"
"aside intro"
"aside fig"
"aside body";
}
/* 03 Airway — aside RIGHT */
.sp-v--index .container {
grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
grid-template-areas:
"head aside"
"intro aside"
"body aside";
}
/* 05 Surgeries — aside LEFT */
.sp-v--editorial .container {
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
grid-template-areas:
"aside head"
"aside intro"
"aside body";
}
.sp-v--band .sp-head,
.sp-v--index .sp-head,
.sp-v--editorial .sp-head { grid-area: head; }
.sp-v--band .sp-intro,
.sp-v--index .sp-intro,
.sp-v--editorial .sp-intro { grid-area: intro; }
.sp-v--band .sp-body,
.sp-v--index .sp-body,
.sp-v--editorial .sp-body { grid-area: body; }
.sp-v--band .sp-aside,
.sp-v--index .sp-aside,
.sp-v--editorial .sp-aside {
grid-area: aside;
position: sticky;
top: 7rem;
margin-top: 0;
}
.sp-v--band .sp-wide-fig { grid-area: fig; }
/* content sits left-aligned beside its aside, not centred */
.sp-v--band .sp-head,
.sp-v--band .sp-intro,
.sp-v--band .sp-intro p,
.sp-v--index .sp-head,
.sp-v--index .sp-intro,
.sp-v--index .sp-intro p {
text-align: left;
margin-left: 0;
max-width: none;
}
/* the surgeries block no longer needs to break out of a narrow column */
.sp-v--editorial .sg {
width: auto;
}
.sp-v--editorial .sp-head,
.sp-v--editorial .sp-intro,
.sp-v--editorial .sp-body {
max-width: none;
}
/* the swallowing photo is now in-column, so cap its height */
.sp-v--band .sp-wide-fig img {
max-height: 260px;
}
}
/* ==========================================================================
SERVICES — Facilities + Our Technology redesigned
Photo becomes a sticky aside (was a giant inline image); the seven
technology cards get even heights, an image band and proper link styling.
========================================================================== */
@media (min-width: 1040px) {
.sp-v--plain .container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
grid-template-areas:
"text aside"
"grid grid";
grid-auto-flow: row;
column-gap: 3.5rem;
align-items: start;
}
/* head + intro are wrapped together in one grid cell via display:contents
on neither — instead both are pinned to the same row */
.sp-v--plain .sp-textcol { grid-area: text; }
.sp-v--plain .sp-head { margin-bottom: 1.25rem; }
.sp-v--plain .sp-aside {
grid-area: aside;
margin-top: 0;
}
.sp-v--plain .sp-facilities-grid { grid-area: grid; }
.sp-v--plain .sp-head,
.sp-v--plain .sp-intro,
.sp-v--plain .sp-intro p {
text-align: left;
margin-left: 0;
max-width: none;
}
/* head and intro are separate grid rows; the row sizes to the taller
aside, so collapse the gap between them */
.sp-v--plain .sp-head {
margin-bottom: 1.25rem;
}
.sp-v--plain .sp-intro {
margin-top: 0;
}
.sp-v--plain .container {
row-gap: 3rem;
align-content: start;
}
/* technology grid starts a new row below both columns */
.sp-v--plain .sp-facilities-grid {
grid-column: 1 / -1;
}
/* the aside is taller than head+intro combined, which was stretching
those two rows apart; let it overflow its rows instead */
.sp-v--plain .sp-aside {
align-self: start;
grid-row: 1 / span 2;
}
}
.sp-v--plain .sp-facilities-grid {
margin-top: 4rem;
}
/* ---- Our Technology heading ---- */
.tech-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
padding-top: 2.25rem;
margin-bottom: 2.25rem;
border-top: 2px solid rgba(224, 138, 60, 0.55);
}
.tech-eyebrow {
display: block;
margin-bottom: 0.5rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c06a22;
}
.tech-title {
margin: 0;
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--foreground, #07242f);
}
.tech-lead {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: var(--muted-foreground, #5b7280);
}
/* ---- the seven technology cards ---- */
.sp-v--plain .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 1.5rem;
align-items: stretch;
}
.sp-v--plain .service-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 0 1.4rem;
overflow: hidden;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(7, 36, 47, 0.1);
box-shadow: 0 8px 24px rgba(7, 36, 47, 0.06);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sp-v--plain .service-card:hover {
transform: translateY(-4px);
border-color: rgba(224, 138, 60, 0.45);
box-shadow: 0 18px 40px rgba(7, 36, 47, 0.12);
}
/* image band — was a loose inline image at varying sizes */
.sp-v--plain .service-card .service-icon {
display: block;
width: 100%;
height: 170px;
object-fit: contain;
object-position: center;
padding: 1.1rem;
margin: 0 0 0.25rem;
background: #f6efe5;
border-bottom: 1px solid rgba(7, 36, 47, 0.08);
box-sizing: border-box;
}
.sp-v--plain .service-card h3 {
margin: 1.1rem 1.4rem 0.5rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--foreground, #07242f);
}
.sp-v--plain .service-card .service-description {
margin: 0 1.4rem;
font-size: 0.92rem;
line-height: 1.55;
color: var(--muted-foreground, #5b7280);
}
/* push the link to the bottom so every card ends level */
.sp-v--plain .service-card .mt-4 {
margin: 1.1rem 1.4rem 0;
padding-top: 0.9rem;
border-top: 1px solid rgba(7, 36, 47, 0.08);
}
.sp-v--plain .service-card > .mt-4:last-child {
margin-top: auto;
}
/* links were rendering as default blue underlined */
.sp-v--plain .service-card .service-show-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #c06a22 !important;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none !important;
transition: gap 180ms ease;
}
.sp-v--plain .service-card .service-show-more:hover {
gap: 0.7rem;
color: #e08a3c !important;
}
@media (min-width: 820px) {
.tech-head {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 3rem;
align-items: end;
}
}
/* ==========================================================================
HEADER POLISH
- nav was 82px off-centre: space-between fought the flex:1 sides
- no hover/active affordance on links
- logo lockup and banner tightened
========================================================================== */
.nav-bar {
justify-content: center;
gap: 2rem;
}
.nav-side {
flex: 1 1 0;
}
/* both sides claim equal width, so the brand lands dead centre */
.nav-side--left { justify-content: flex-end; }
.nav-side--right { justify-content: flex-start; }
/* ---- links: hover + current-page affordance ---- */
.nav-side .nav-links > a,
.nav-side .nav-dropdown-toggle {
position: relative;
padding: 0.5rem 0;
color: var(--tone-ink, #07242f);
font-weight: 550;
transition: color 180ms ease;
}
.nav-side .nav-links > a::after,
.nav-side .nav-dropdown-toggle::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.1rem;
height: 2px;
border-radius: 2px;
background: #e08a3c;
transform: scaleX(0);
transform-origin: center;
transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-side .nav-links > a:hover,
.nav-side .nav-dropdown-toggle:hover {
color: #c06a22;
}
.nav-side .nav-links > a:hover::after,
.nav-side .nav-dropdown-toggle:hover::after,
.nav-side .nav-dropdown:hover .nav-dropdown-toggle::after {
transform: scaleX(1);
}
.nav-side .nav-links > a:focus-visible,
.nav-side .nav-dropdown-toggle:focus-visible {
outline: 2px solid #e08a3c;
outline-offset: 4px;
border-radius: 3px;
}
/* current page */
.nav-side .nav-links > a[aria-current="page"] {
color: #c06a22;
}
.nav-side .nav-links > a[aria-current="page"]::after {
transform: scaleX(1);
}
/* ---- dropdown ---- */
.nav-dropdown-menu {
border-radius: 12px;
border: 1px solid rgba(7, 36, 47, 0.1);
box-shadow: 0 18px 44px rgba(7, 36, 47, 0.14);
padding: 0.5rem;
overflow: hidden;
}
.nav-dropdown-menu a {
display: block;
padding: 0.55rem 0.85rem;
border-radius: 8px;
font-size: 0.9rem;
transition: background 160ms ease, color 160ms ease;
}
.nav-dropdown-menu a:hover {
background: #fdf3e9;
color: #c06a22;
}
.nav-caret {
transition: transform 200ms ease;
}
.nav-dropdown:hover .nav-caret {
transform: rotate(180deg);
}
/* ---- brand lockup ---- */
.nav-brand {
gap: 1.1rem;
}
.nav-brand-divider {
height: 2.2rem;
background: rgba(7, 36, 47, 0.12);
}
.site-logo-gym {
height: 4.6rem;
transition: transform 220ms ease;
}
.nav-brand-link:hover .site-logo-gym {
transform: scale(1.03);
}
/* ---- announcement banner ---- */
.site-banner {
padding: 0.6rem 0 !important;
background: linear-gradient(90deg, #fdf3e9, #fbe8d2, #fdf3e9) !important;
border-bottom: 1px solid rgba(224, 138, 60, 0.3);
}
.site-banner a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 650;
color: #8a4a12 !important;
text-decoration: none !important;
}
/* ---- the bar itself ---- */
.main_menu nav,
.nav-bar {
transition: box-shadow 220ms ease;
}
.nav-scrolled .nav-bar {
box-shadow: none;
}
/* ==========================================================================
FOOTER — two location maps side by side (was one unlabelled map)
========================================================================== */
.footer-maps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
.footer-map {
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
}
/* captions wrap to different line counts, which pushed one map down and
clipped it; fix the caption height so both maps start and end level */
.footer-map figcaption {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.25rem;
min-height: 5.25rem;
padding: 0.9rem 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-map figcaption strong {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #e08a3c;
}
.footer-map figcaption span {
font-size: 0.82rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.72);
}
.footer-map iframe {
display: block;
width: 100%;
height: 300px;
flex: 1 1 auto;
border: 0;
}
@media (min-width: 820px) {
.footer-maps {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.footer-map iframe {
height: 320px;
}
}
/* ==========================================================================
SERVICES — brochure section is now the last block before the footer
(the "Talk to us" CTA that used to follow it has been removed), so it
needs its own breathing room top and bottom.
========================================================================== */
.services-page #brochure {
margin-top: 0;
padding: 4.5rem 1.5rem 6rem;
}
.services-page #brochure .hp-cta-card {
padding: 3rem 2.5rem;
border-radius: 16px;
background: #fcf8f3;
border: 1px solid rgba(7, 36, 47, 0.12);
box-shadow: 0 16px 40px rgba(7, 36, 47, 0.07);
}
.services-page #brochure .hp-h3 {
margin: 0 0 0.9rem;
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tone-ink, #07242f);
}
.services-page #brochure .hp-lead {
margin: 0 auto 2rem !important;
font-size: 1.02rem;
line-height: 1.7;
color: var(--muted-foreground, #5b7280);
}
.services-page #brochure .hp-btn {
padding: 0.85em 2em;
border-radius: 999px;
font-weight: 700;
}
@media (max-width: 640px) {
.services-page #brochure {
padding: 3rem 1rem 4rem;
}
.services-page #brochure .hp-cta-card {
padding: 2rem 1.5rem;
}
}
/* ==========================================================================
HEADER — one logo image split into two independent links.
voice_gym.jpg is 900x300: the circular clinic badge sits in roughly the
left 300px, the Voice Gym wordmark in the right 600px. Each half shows
its slice of the same file via a shifted, oversized background image,
so no new assets are needed.
========================================================================== */
.nav-brand {
display: flex;
align-items: center;
gap: 0;
}
.nav-brand-half {
--brand-h: 4.6rem;
position: relative;
display: block;
height: var(--brand-h);
overflow: hidden;
text-decoration: none;
transition: opacity 200ms ease, transform 200ms ease;
}
.nav-brand-half img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto; /* natural 3:1 ratio => width is 3x the height */
max-width: none;
display: block;
mix-blend-mode: multiply;
}
/* clinic badge: left third of the 900px artwork */
.nav-brand-half--clinic {
width: calc(var(--brand-h) * 1);
}
.nav-brand-half--clinic img {
left: 0;
}
/* voice gym wordmark: right two-thirds, so shift the image left by a third */
.nav-brand-half--gym {
width: calc(var(--brand-h) * 2);
}
.nav-brand-half--gym img {
left: calc(var(--brand-h) * -1);
}
.nav-brand-half:hover {
opacity: 0.82;
}
.nav-brand-half:focus-visible {
outline: 2px solid #e08a3c;
outline-offset: 3px;
border-radius: 4px;
}
@media (max-width: 1200px) {
.nav-brand-half {
--brand-h: 3.9rem;
}
}
@media (max-width: 860px) {
.nav-brand-half {
--brand-h: 3.2rem;
}
}
/* ==========================================================================
HERO — lift the portrait off the dark background.
Measured at ~88/255 mean luminance against a ~91/255 background, so she
was reading flat. Brighten and add contrast, with a stronger halo behind.
========================================================================== */
.hero-v2-portrait > img {
filter:
drop-shadow(0 26px 46px rgba(0, 20, 34, 0.45))
brightness(1.14)
contrast(1.06)
saturate(1.05);
}
.hero-v2-portrait-glow {
width: 128%;
background:
radial-gradient(circle at 50% 45%,
rgba(255, 255, 255, 0.34) 0%,
rgba(255, 240, 220, 0.16) 40%,
rgba(255, 255, 255, 0) 70%);
}
/* a warm rim behind the subject so the edges separate from the navy */
.hero-v2-portrait::after {
content: "";
position: absolute;
left: 50%;
bottom: 8%;
width: 92%;
aspect-ratio: 1 / 1.15;
transform: translateX(-50%);
border-radius: 50% 50% 46% 46%;
background: radial-gradient(ellipse at 50% 55%,
rgba(224, 138, 60, 0.22) 0%,
rgba(224, 138, 60, 0.08) 45%,
rgba(224, 138, 60, 0) 72%);
pointer-events: none;
z-index: 0;
}
/* ==========================================================================
HOME — "From the Founder" moved to a light band.
It previously sat on #07242f, identical to the Services section that now
follows it, so the two merged into one continuous dark block.
Sequence is now: trust-strip (white) > founder (cream) > services (dark).
========================================================================== */
.home-premium .dr-statement,
.dr-statement {
background: #f6efe5;
background-image:
radial-gradient(640px 340px at 8% 0%, rgba(224, 138, 60, 0.16), rgba(224, 138, 60, 0) 60%);
background-color: #f6efe5;
color: var(--tone-ink, #07242f);
border-top: 1px solid rgba(7, 36, 47, 0.08);
border-bottom: 1px solid rgba(7, 36, 47, 0.08);
}
/* eyebrow */
.home-premium .dr-statement .hp-eyebrow,
.dr-statement .hp-eyebrow {
color: #c06a22;
}
.dr-statement .hp-eyebrow i {
background: rgba(224, 138, 60, 0.5);
}
/* the quote itself */
.home-premium .dr-statement-quote,
.dr-statement-quote {
color: var(--tone-ink, #07242f);
}
/* name block */
.dr-statement-meta {
border-top-color: rgba(7, 36, 47, 0.14);
}
.home-premium .dr-statement-meta strong,
.dr-statement-meta strong {
color: var(--tone-ink, #07242f);
}
.dr-statement-meta span {
color: rgba(7, 36, 47, 0.66);
}
/* credentials list */
.dr-statement-creds li {
color: rgba(7, 36, 47, 0.8);
}
.dr-statement-creds li::before {
color: #c06a22;
}
/* "Read full profile" link */
.dr-statement .vgym-link,
.dr-statement a {
color: #c06a22;
border-bottom-color: rgba(192, 106, 34, 0.45);
}
.dr-statement a:hover {
color: #8a4a12;
border-bottom-color: #8a4a12;
}
/* photo gets a light-surface shadow rather than a dark-field one */
.dr-statement-photo img {
box-shadow: 0 24px 54px rgba(7, 36, 47, 0.2);
}
/* ==========================================================================
DOCTOR PAGE — phone shown as a plain link, not a filled button
(the WhatsApp button beside it has been removed)
========================================================================== */
.dr-page .dr-phone-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0;
background: none;
border: 0;
box-shadow: none;
border-radius: 0;
color: #fff;
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -0.005em;
text-decoration: none;
transition: color 180ms ease;
}
.dr-page .dr-phone-link:hover {
color: var(--tone-warm, #e08a3c);
}
.dr-page .dr-phone-link .dr-btn-ico {
width: 18px;
height: 18px;
color: var(--tone-warm, #e08a3c);
}
.dr-page .dr-phone-link:focus-visible {
outline: 2px solid #e08a3c;
outline-offset: 4px;
border-radius: 3px;
}
/* ==========================================================================
DOCTOR PAGE — the sticky left intro column is hidden, so the profile body
takes the full width instead of sitting in a two-column grid.
========================================================================== */
@media (min-width: 768px) {
.dr-page .dr-profile {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
}
.dr-page .dr-profile-body {
max-width: 62rem;
margin: 0 auto;
}
/* the figures floated against a narrower column before; keep them in
proportion now the measure is wider */
@media (min-width: 880px) {
.dr-page .dr-fig {
width: 340px;
}
/* each heading clears the previous float, so one figure cannot be
pushed into the text column by the figure above it */
.dr-page .dr-profile-body .about-me-h3 {
clear: both;
}
.dr-page .dr-profile-body > p {
overflow: visible;
}
}
/* ==========================================================================
DOCTOR PAGE — credentials columns rebalanced.
The Tailwind grid was a fixed 2:1 split (col-span-2 + 1). The right column
now carries two list cards, so it needs more room than a third.
========================================================================== */
@media (min-width: 1024px) {
.dr-page .dr-cred-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
/* the left block keeps its Tailwind span class, so neutralise it */
.dr-page .dr-cred-grid > .lg\:col-span-2 {
grid-column: auto;
}
}
/* ==========================================================================
VOICE GYM — "Who trains here" as a compact card grid.
Was five full-width numbered rows: ~1,100px tall for 92 words, with the
right half of every row empty.
========================================================================== */
.vgw-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.vgw-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
}
.vgw-card {
position: relative;
padding: 1.75rem 1.5rem 1.6rem;
border-radius: 14px;
background: #fff;
border: 1px solid var(--line, rgba(7, 36, 47, 0.14));
box-shadow: 0 6px 20px rgba(7, 36, 47, 0.05);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.vgw-card:hover {
transform: translateY(-3px);
border-color: rgba(224, 138, 60, 0.5);
box-shadow: 0 16px 36px rgba(7, 36, 47, 0.1);
}
.vgw-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 1rem;
border-radius: 50%;
background: #fdf3e9;
}
.vgw-ico svg {
width: 21px;
height: 21px;
fill: none;
stroke: var(--warm-deep, #c06a22);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.vgw-title {
margin: 0 0 0.5rem;
font-size: 1.08rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.012em;
color: var(--ink, #07242f);
}
.vgw-text {
margin: 0;
font-size: 0.93rem;
line-height: 1.6;
color: var(--ink-soft, #55707d);
}
@media (min-width: 680px) {
.vgw-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.vgw-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ==========================================================================
VOICE GYM — programme panels no longer carry a side column.
The aside held only an icon plus "Typical length" / "Format"; with it gone
the panel is a single column and the head no longer needs a second track.
========================================================================== */
.vgp-panel {
grid-template-columns: minmax(0, 1fr) !important;
}
.vgp-panel-main {
padding: 2.25rem 2.5rem;
}
.vgp-panel-text,
.vgp-panel-list {
max-width: 70ch;
}
.vgp-head {
grid-template-columns: minmax(0, 1fr) !important;
}
/* ==========================================================================
VOICE GYM — the founder section is reused from the home page, where its
refinements were scoped to .home-premium. Apply the same treatment here.
========================================================================== */
.vgym .dr-statement-quote {
font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing: -0.02em;
line-height: 1.22;
}
.vgym .dr-statement .hp-eyebrow {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c06a22;
}
.vgym .dr-statement .text-link {
display: inline-block;
color: #c06a22;
font-weight: 650;
text-decoration: none;
border-bottom: 1px solid rgba(192, 106, 34, 0.45);
transition: color 180ms ease, border-color 180ms ease;
}
.vgym .dr-statement .text-link:hover {
color: #8a4a12;
border-bottom-color: #8a4a12;
}
.vgym .dr-statement-creds li::before {
color: #c06a22;
}
/* ==========================================================================
VOICE GYM — founder section on a dark band.
It inherited the home page's cream, which matched the vgym-detail section
directly below it (#fcf8f3), so the two ran together.
Sequence is now: method (white) > founder (navy) > detail (cream).
========================================================================== */
.vgym .dr-statement {
background: var(--ink, #07242f);
background-image:
radial-gradient(620px 340px at 92% 0%, rgba(224, 138, 60, 0.22), rgba(224, 138, 60, 0) 60%);
background-color: var(--ink, #07242f);
border-top: 0;
border-bottom: 0;
}
.vgym .dr-statement .hp-eyebrow {
color: var(--warm, #e08a3c);
}
.vgym .dr-statement-quote {
color: #fff;
}
.vgym .dr-statement-meta {
border-top-color: rgba(255, 255, 255, 0.18);
}
.vgym .dr-statement-meta strong {
color: #fff;
}
.vgym .dr-statement-meta span {
color: rgba(255, 255, 255, 0.68);
}
.vgym .dr-statement-creds li {
color: rgba(255, 255, 255, 0.82);
}
.vgym .dr-statement-creds li::before {
color: var(--warm, #e08a3c);
}
.vgym .dr-statement .text-link {
color: var(--warm, #e08a3c);
border-bottom-color: rgba(224, 138, 60, 0.45);
}
.vgym .dr-statement .text-link:hover {
color: #f0a257;
border-bottom-color: #f0a257;
}
.vgym .dr-statement-photo img {
box-shadow: 0 26px 56px rgba(0, 0, 0, 0.4);
}
/* ==========================================================================
HOME — gallery preview grid (was one stock facility photo)
========================================================================== */
.gf-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
margin-top: 2.5rem;
}
.gf-item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}
.gf-item img {
display: block;
width: 100%;
height: 240px;
object-fit: cover;
object-position: center 40%;
transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gf-item:hover img {
transform: scale(1.05);
}
.gf-item figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2.5rem 1.1rem 0.95rem;
font-size: 0.85rem;
font-weight: 600;
color: #fff;
background: linear-gradient(to top, rgba(7, 36, 47, 0.88), rgba(7, 36, 47, 0));
pointer-events: none;
}
@media (min-width: 700px) {
.gf-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
/* 3 columns x 2 rows: a tall feature on the left, three tiles beside it */
.gf-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 210px;
}
.gf-item img {
height: 100%;
}
/* feature spans the full left column, both rows */
.gf-grid > .gf-item:first-child {
grid-row: span 2;
}
/* the last tile fills the remaining width on row two */
.gf-grid > .gf-item:last-child {
grid-column: span 2;
}
.gf-item--wide {
grid-column: auto;
}
}
/* the Guy's & St Thomas' shot is a tall portrait in a wide tile; the
default top-weighted crop cut the faces off */
.gf-item--portrait img {
object-position: center 62%;
}
/* ==========================================================================
HOME — testimonials padding aligned with the info sections (6rem),
and the card no longer holds height for the longest review.
========================================================================== */
.home-premium .hp-dark.py-16 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.home-premium .testimonials-section .navigation {
margin-top: 1.75rem;
margin-bottom: 0;
}
.home-premium .testimonial-card {
min-height: 0;
}
@media (max-width: 767px) {
.home-premium .hp-dark.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
/* the testimonials block was capped at 900px and centred, so its content
started 150px right of every other section; let it fill the container */
.home-premium .hp-dark .testimonials-section {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* ==========================================================================
HOME — founder section: quote above, then Clinic | photo | Voice Gym
========================================================================== */
.dr-statement-lead {
max-width: 62rem;
margin: 0 auto 3.5rem;
text-align: center;
}
.dr-statement-lead .dr-statement-quote {
margin-left: auto;
margin-right: auto;
}
.dr-statement-lead .dr-statement-meta {
align-items: center;
}
.dr-statement-lead .dr-statement-creds {
justify-content: center;
max-width: 44rem;
margin-left: auto;
margin-right: auto;
}
.dr-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
align-items: center;
}
.dr-split-photo {
margin: 0;
justify-self: center;
max-width: 420px;
width: 100%;
}
.dr-split-photo img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 26px 56px rgba(7, 36, 47, 0.2);
}
.dr-split-kicker {
display: block;
margin-bottom: 0.7rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c06a22;
}
.dr-split-title {
margin: 0 0 0.8rem;
font-size: 1.22rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--tone-ink, #07242f);
}
.dr-split-text {
margin: 0 0 1.1rem;
font-size: 0.97rem;
line-height: 1.65;
color: rgba(7, 36, 47, 0.74);
}
.dr-split-list {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: grid;
gap: 0.45rem;
}
.dr-split-list li {
position: relative;
padding-left: 1.3rem;
font-size: 0.93rem;
color: rgba(7, 36, 47, 0.8);
}
.dr-split-list li::before {
content: "\2013";
position: absolute;
left: 0;
color: #c06a22;
font-weight: 700;
}
@media (min-width: 1000px) {
.dr-split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
gap: 3rem;
align-items: center;
}
/* the gym column reads inward, toward the photo */
.dr-split-col--gym {
text-align: right;
}
.dr-split-col--gym .dr-split-list li {
padding-left: 0;
padding-right: 1.3rem;
}
.dr-split-col--gym .dr-split-list li::before {
left: auto;
right: 0;
}
}
@media (max-width: 999px) {
/* photo first on narrow screens, then the two offerings */
.dr-split-photo { order: -1; }
}
/* ==========================================================================
HOME HERO — three columns: Shri VAS Clinic | portrait | Voice Gym
========================================================================== */
.hero-v2-grid--three {
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
}
.hero-v2-side-title {
margin: 0 0 0.75rem;
font-size: clamp(1.25rem, 1.9vw, 1.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.015em;
color: #fff;
}
.hero-v2-side-list {
list-style: none;
margin: 1.25rem 0 1.5rem;
padding: 0;
display: grid;
gap: 0.45rem;
}
.hero-v2-side-list li {
position: relative;
padding-left: 1.3rem;
font-size: 0.93rem;
color: rgba(255, 255, 255, 0.82);
}
.hero-v2-side-list li::before {
content: "\2013";
position: absolute;
left: 0;
color: #e08a3c;
font-weight: 700;
}
.hero-v2-side-link {
display: inline-flex;
align-items: center;
font-size: 0.92rem;
font-weight: 700;
color: #e08a3c;
text-decoration: none;
border-bottom: 1px solid rgba(224, 138, 60, 0.45);
transition: color 180ms ease, border-color 180ms ease;
}
.hero-v2-side-link:hover {
color: #f0a257;
border-bottom-color: #f0a257;
}
@media (min-width: 1100px) {
.hero-v2-grid--three {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.92fr);
gap: 2.75rem;
align-items: center;
}
/* the gym column reads inward, toward the portrait */
.hero-v2-side--gym {
text-align: right;
}
.hero-v2-side--gym .hero-v2-sub {
margin-left: auto;
}
.hero-v2-side--gym .hero-v2-side-list li {
padding-left: 0;
padding-right: 1.3rem;
}
.hero-v2-side--gym .hero-v2-side-list li::before {
left: auto;
right: 0;
}
}
@media (max-width: 1099px) {
/* portrait first, then the two offerings */
.hero-v2-grid--three .hero-v2-portrait {
order: -1;
}
}
/* hero three-column: tighten the left column so the H1 does not run to
five lines, and stack the location cards so both fit */
@media (min-width: 1100px) {
.hero-v2-grid--three .hero-v2-title {
font-size: clamp(30px, 2.9vw, 42px);
max-width: none;
}
.hero-v2-grid--three .hero-v2-sub {
font-size: 0.97rem;
line-height: 1.6;
}
.hero-v2-grid--three .hero-v2-locations-list {
flex-direction: column;
align-items: stretch;
}
.hero-v2-grid--three .hero-v2-locations {
margin-top: 1.25rem;
}
.hero-v2-grid--three .hero-v2-side-list {
margin: 1rem 0 1.25rem;
}
}
/* ==========================================================================
HOME HERO — three-column balance: narrow the portrait so the two text
columns get the width they need (they were running 4-5 words per line).
========================================================================== */
@media (min-width: 1100px) {
.hero-v2-grid--three {
/* centre track narrowed from 1.1fr to 0.82fr */
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.82fr) minmax(0, 1.06fr);
gap: 3.25rem;
}
.hero-v2-grid--three .hero-v2-portrait {
min-height: 0;
}
.hero-v2-grid--three .hero-v2-portrait > img {
max-width: 330px;
}
/* the decorative ring scales with the smaller portrait, kept centred */
.hero-v2-grid--three .hero-v2-portrait-art {
left: 50%;
top: 40%;
transform: translate(-50%, -50%) scale(0.86);
}
/* the credential badge was wrapping to three lines */
.hero-v2-grid--three .hero-v2-portrait-caption em {
white-space: normal;
max-width: 30ch;
margin-left: auto;
margin-right: auto;
padding: 0.5rem 0.9rem;
line-height: 1.35;
}
.hero-v2-grid--three .hero-v2-portrait-caption strong {
font-size: 1rem;
}
.hero-v2-grid--three .hero-v2-portrait-caption span,
.hero-v2-grid--three .hero-v2-portrait-caption em {
font-size: 0.8rem;
}
/* text columns can now breathe */
.hero-v2-grid--three .hero-v2-sub,
.hero-v2-grid--three .hero-v2-side-list li {
max-width: none;
}
.hero-v2-grid--three .hero-v2-sub {
font-size: 1rem;
line-height: 1.65;
}
.hero-v2-grid--three .hero-v2-side-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem 1rem;
}
}
/* ==========================================================================
HOME HERO — left column: one consistent left edge.
The heading, paragraph, service list and locations block each started at a
different x, so the column read as stacked blocks rather than one unit.
========================================================================== */
@media (min-width: 1100px) {
.hero-v2-side--clinic > * {
margin-left: 0;
margin-right: 0;
}
/* dashes hang outside the text column so the words line up with the H1 */
.hero-v2-side--clinic .hero-v2-side-list {
margin: 1.5rem 0;
padding-left: 0;
gap: 0.6rem 1.75rem;
}
/* no dash: the words themselves start at the column edge */
.hero-v2-side--clinic .hero-v2-side-list li {
padding-left: 0;
text-indent: 0;
}
.hero-v2-side--clinic .hero-v2-side-list li::before {
display: none;
}
/* locations label and cards share the column's left edge */
.hero-v2-side--clinic .hero-v2-locations {
margin-top: 1.75rem;
padding-left: 0;
}
.hero-v2-side--clinic .hero-v2-locations-list {
gap: 0.6rem;
}
.hero-v2-side--clinic .hero-v2-location {
width: 100%;
max-width: 320px;
}
}
@media (min-width: 1100px) {
.hero-v2-side--clinic .hero-v2-locations-label {
margin-left: 0;
padding-left: 0;
}
.hero-v2-side--clinic .hero-v2-locations,
.hero-v2-side--clinic .hero-v2-locations-list {
align-items: flex-start;
margin-left: 0;
}
}
/* ==========================================================================
HOME HERO — force one left edge in the clinic column.
Measured: H1 at 121px, service list at 177px, locations at 220px.
The column is a flex/grid context whose children were being centred.
========================================================================== */
@media (min-width: 1100px) {
.hero-v2-side--clinic {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.hero-v2-side--clinic > *,
.hero-v2-side--clinic .hero-v2-locations,
.hero-v2-side--clinic .hero-v2-locations-label,
.hero-v2-side--clinic .hero-v2-locations-list,
.hero-v2-side--clinic .hero-v2-side-list {
align-self: stretch;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none;
}
.hero-v2-side--clinic .hero-v2-side-list {
justify-items: start;
}
}
/* ==========================================================================
HOME HERO — the Voice Gym heading matches the H1's treatment, and the
locations block now sits full width below the three columns.
========================================================================== */
.hero-v2-side-title {
margin: 18px 0 12px;
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.025em;
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
@media (min-width: 1100px) {
.hero-v2-grid--three .hero-v2-side-title {
font-size: clamp(30px, 2.9vw, 42px);
/* a generic paragraph line-height was winning here, giving 72px
per line against the H1's 45px */
line-height: 1.04;
margin-top: 0;
}
}
/* locations: full width under the grid, cards side by side */
.hero-v2-inner > .hero-v2-locations {
margin: 2.5rem 0 0;
}
.hero-v2-inner > .hero-v2-locations .hero-v2-locations-list {
flex-direction: row;
flex-wrap: wrap;
gap: 0.85rem;
}
.hero-v2-inner > .hero-v2-locations .hero-v2-location {
width: auto;
max-width: none;
}
/* ==========================================================================
HOME HERO — clinic service list reads as points, not loose text.
The dash markers were removed earlier to fix the column alignment; this
restores a marker using a grid so the text edge still lines up with the H1.
========================================================================== */
@media (min-width: 1100px) {
.hero-v2-side--clinic .hero-v2-side-list li {
display: grid;
grid-template-columns: 1rem 1fr;
align-items: start;
gap: 0.1rem;
padding-left: 0;
text-indent: 0;
}
.hero-v2-side--clinic .hero-v2-side-list li {
align-items: center;
}
.hero-v2-side--clinic .hero-v2-side-list li::before {
display: block;
content: "";
width: 6px;
height: 6px;
margin-top: 0;
border-radius: 50%;
background: #e08a3c;
position: static;
align-self: center;
}
}
/* ==========================================================================
HOME HERO — Voice Gym list: dot markers on the right, matching the
column's right alignment. Uses inline-flex on the li so the text keeps
its natural width instead of being squeezed by a grid track.
========================================================================== */
@media (min-width: 1100px) {
.hero-v2-side--gym .hero-v2-side-list {
justify-items: end;
}
.hero-v2-side--gym .hero-v2-side-list li {
display: inline-flex;
align-items: baseline;
gap: 0.55rem;
padding-left: 0;
padding-right: 0;
text-indent: 0;
white-space: nowrap;
}
.hero-v2-side--gym .hero-v2-side-list li::before {
order: 2;
content: "";
display: block;
width: 6px;
height: 6px;
flex: none;
border-radius: 50%;
background: #e08a3c;
position: static;
left: auto;
right: auto;
transform: translateY(-0.15em);
}
}
/* ==========================================================================
SUBTLE SECTION PATTERNS
Inline SVG textures so the flat bands have some surface. Kept very low
contrast — they should read as texture, not decoration.
========================================================================== */
/* --- dark bands: a faint waveform, echoing the voice theme --- */
.home-premium .services.svc::before,
.home-premium .hp-dark::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120' viewBox='0 0 320 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.5'%3E%3Cpath d='M0 60 q 20 -26 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0'/%3E%3Cpath d='M0 92 q 20 -16 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0'/%3E%3Cpath d='M0 28 q 20 -14 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0 t 40 0'/%3E%3C/g%3E%3C/svg%3E");
background-size: 320px 120px;
}
.home-premium .services.svc,
.home-premium .hp-dark {
position: relative;
}
.home-premium .services.svc > *,
.home-premium .hp-dark > * {
position: relative;
z-index: 1;
}
/* --- light bands: a fine dot grid --- */
.home-premium .info::before,
.home-premium .gallery-feature::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(rgba(7, 36, 47, 0.07) 1px, transparent 1px);
background-size: 22px 22px;
}
.home-premium .info,
.home-premium .gallery-feature {
position: relative;
}
.home-premium .info > *,
.home-premium .gallery-feature > * {
position: relative;
z-index: 1;
}
/* --- founder band: a soft concentric ring, like a stroboscopy trace --- */
.home-premium .dr-statement {
position: relative;
overflow: hidden;
}
.home-premium .dr-statement::after {
content: "";
position: absolute;
right: -8%;
top: 50%;
width: 640px;
height: 640px;
transform: translateY(-50%);
pointer-events: none;
z-index: 0;
border-radius: 50%;
background:
repeating-radial-gradient(circle,
rgba(7, 36, 47, 0.05) 0 1px,
transparent 1px 26px);
}
.home-premium .dr-statement > * {
position: relative;
z-index: 1;
}
/* ==========================================================================
SECTION PATTERNS — other pages.
A different motif per page so each has its own character:
Voice Gym -> diagonal hatching
Services -> soft blueprint grid
Doctor -> fine horizontal rules (ruled-paper feel)
========================================================================== */
/* ---- Voice Gym: diagonal hatching ---- */
.vgym .vgym-who,
.vgym .vgym-method,
.vgym .vgym-detail {
position: relative;
}
.vgym .vgym-who::before,
.vgym .vgym-method::before,
.vgym .vgym-detail::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: repeating-linear-gradient(
135deg,
rgba(7, 36, 47, 0.045) 0 1px,
transparent 1px 14px
);
}
.vgym .vgym-who > *,
.vgym .vgym-method > *,
.vgym .vgym-detail > * {
position: relative;
z-index: 1;
}
/* dark bands on this page get the hatching in white */
.vgym .vgym-argument,
.vgym .vgym-programmes,
.vgym .vgym-close {
position: relative;
}
.vgym .vgym-argument::before,
.vgym .vgym-programmes::before,
.vgym .vgym-close::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.04) 0 1px,
transparent 1px 14px
);
}
.vgym .vgym-argument > *,
.vgym .vgym-programmes > *,
.vgym .vgym-close > * {
position: relative;
z-index: 1;
}
/* ---- Services: soft blueprint grid ---- */
.services-page .sp-section {
position: relative;
}
.services-page .sp-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(7, 36, 47, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(7, 36, 47, 0.035) 1px, transparent 1px);
background-size: 48px 48px;
}
.services-page .sp-section > * {
position: relative;
z-index: 1;
}
/* ---- Doctor page: fine horizontal rules ---- */
.dr-page .dr-section,
.dr-page .dr-strip {
position: relative;
}
.dr-page .dr-section::before,
.dr-page .dr-strip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: repeating-linear-gradient(
to bottom,
rgba(7, 36, 47, 0.04) 0 1px,
transparent 1px 32px
);
}
.dr-page .dr-section > *,
.dr-page .dr-strip > * {
position: relative;
z-index: 1;
}
/* Hero: "Now at two locations" sits below the three-column grid, centred */
.hero-v2-inner > .hero-v2-locations {
align-items: center;
text-align: center;
margin: 2rem auto 0;
}
.hero-v2-inner > .hero-v2-locations .hero-v2-locations-list {
justify-content: center;
}
.hero-v2-inner > .hero-v2-locations .hero-v2-location {
text-align: left;
}
@media (max-width: 480px) {
.hero-v2-inner > .hero-v2-locations {
align-items: stretch;
}
}