/* ============================================================
InnerVista Psychology — Design System
Typography: Acumin Pro Wide (brand display, via Adobe Fonts)
with Archivo as the Google Fonts fallback
+ Manrope (body)
============================================================ */
/* Archivo serves as the immediate fallback. Acumin Pro Wide will be used
when you add your Adobe Fonts kit to the of each HTML file:
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');
:root {
/* Brand palette */
--green-primary: #1F9A4B;
--green-bright: #2BB058;
--green-dark: #0B3D1E;
--green-deeper: #082E16;
--green-soft: #4FB877;
--gold: #C9A961;
--gold-light: #D9BD7E;
/* Neutrals */
--cream: #F2EFE8;
--cream-soft: #EEEBE3;
--white: #FFFFFF;
--off-white: #FAFAF7;
--ink: #14241A;
--ink-soft: #3F5246;
--muted: #6B7C72;
--line: #E2DED4;
/* Type — Acumin Pro Wide preferred, Archivo as visible fallback */
--font-display: 'acumin-pro-wide', 'Acumin Pro Wide', 'Archivo', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--transition-fast: 200ms var(--ease-out);
--transition: 400ms var(--ease-out);
--transition-slow: 700ms var(--ease-out);
/* Layout */
--container: 1280px;
--container-narrow: 1080px;
--radius-sm: 6px;
--radius: 12px;
--radius-lg: 24px;
--radius-pill: 999px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--green-dark);
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--white);
overflow-x: hidden;
min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* Typography ------------------------------------------------- */
.eyebrow {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--green-soft);
margin-bottom: 18px;
display: inline-block;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--green-primary);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.015em;
}
h1 {
font-size: clamp(2.4rem, 4.8vw, 4.2rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
}
h2 {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 600;
letter-spacing: -0.02em;
}
h3 {
font-size: clamp(1.25rem, 1.8vw, 1.45rem);
font-weight: 600;
}
h4 {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0;
}
p {
color: var(--ink-soft);
font-size: 16px;
line-height: 1.7;
}
.lead {
font-size: 17px;
line-height: 1.65;
}
/* Container -------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
.container-narrow { max-width: var(--container-narrow); }
@media (max-width: 768px) {
.container { padding: 0 20px; }
}
/* Buttons ---------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.01em;
transition: all var(--transition);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.15);
transform: translateX(-100%);
transition: transform 500ms var(--ease-out);
}
.btn:hover::before { transform: translateX(0); }
.btn-primary {
background: var(--green-primary);
color: white;
box-shadow: 0 4px 14px rgba(31, 154, 75, 0.25);
}
.btn-primary:hover {
background: var(--green-bright);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(31, 154, 75, 0.32);
}
.btn-gold {
background: var(--gold);
color: white;
box-shadow: 0 4px 14px rgba(201, 169, 97, 0.3);
}
.btn-gold:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(201, 169, 97, 0.4);
}
.btn-ghost {
background: transparent;
color: var(--green-primary);
border: 1.5px solid var(--green-primary);
}
.btn-ghost:hover {
background: var(--green-primary);
color: white;
}
.btn .arrow {
display: inline-block;
transition: transform 300ms var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }
/* Navigation ------------------------------------------------- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 22px 0;
transition: all var(--transition);
background: transparent;
}
.nav.scrolled {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(20, 36, 26, 0.06);
padding: 14px 0;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.logo {
display: flex;
align-items: center;
transition: opacity var(--transition);
}
.logo:hover { opacity: 0.85; }
.logo-full {
height: 44px;
width: auto;
display: block;
}
/* Footer variant: larger now the signup is gone; brighten so green renders well on dark BG */
.footer-grid > div:first-child .logo-full {
height: 80px;
filter: brightness(1.18) saturate(1.05);
margin-bottom: 28px;
}
@media (max-width: 640px) {
.logo-full { height: 36px; }
.footer-grid > div:first-child .logo-full { height: 56px; }
}
.nav-links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
margin-left: auto;
}
.nav-links a {
position: relative;
font-size: 14.5px;
font-weight: 500;
color: white;
transition: color var(--transition-fast);
padding: 6px 0;
}
.nav.scrolled .nav-links a { color: var(--ink); }
.nav-links a:not(.btn)::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: currentColor;
transform-origin: right;
transform: scaleX(0);
transition: transform 400ms var(--ease-out);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after {
transform-origin: left;
transform: scaleX(1);
}
.nav .btn {
padding: 11px 22px;
font-size: 13.5px;
}
/* The panel logo link only appears inside the mobile slide-out, not the desktop nav */
.nav-logo-item { display: none; }
/* The Call button only appears inside the mobile slide-out */
.nav-call { display: none; }
.menu-toggle {
display: none;
width: 44px;
height: 44px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
margin-left: auto;
}
.menu-toggle span {
width: 24px;
height: 2px;
background: white;
transition: all var(--transition);
}
.nav.scrolled .menu-toggle span { background: var(--ink); }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
.menu-toggle { display: flex; position: relative; z-index: 106; }
/* Slide-out panel */
.nav-links {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(380px, 86%);
z-index: 105;
background: linear-gradient(165deg, var(--green-dark) 0%, var(--green-deeper) 100%);
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 4px;
padding: 104px 36px 48px;
transform: translateX(100%);
transition: transform 480ms var(--ease-out);
box-shadow: -24px 0 70px rgba(0, 0, 0, 0.35);
overflow-y: auto;
}
.nav-links.open { transform: translateX(0); }
/* Clickable brand icon pinned at the top of the slide-out panel (links home) */
.nav-logo-item {
display: block;
position: absolute;
top: 30px;
left: 32px;
width: auto;
margin: 0;
border-bottom: none !important;
}
.nav-logo-item a { display: block; padding: 0; width: auto; }
.nav-logo-item img {
width: 74px;
height: auto;
filter: brightness(1.12) saturate(1.05) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}
.nav-links li { width: 100%; }
.nav-links li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
/* Active page: turn its divider gold (single indicator — no separate underline) */
.nav-links li:has(a.active) { border-bottom: 2px solid var(--gold); }
.nav-links a {
color: #fff !important;
font-size: 21px;
font-weight: 600;
width: 100%;
display: block;
padding: 16px 2px;
}
.nav-links a:not(.btn)::after { display: none; }
/* CTA group sits apart; buttons stack full-width */
.nav-links li:last-child { margin-top: 22px; }
.nav-links li.nav-cta { display: flex; flex-direction: column; gap: 12px; }
.nav-links .btn { width: 100%; text-align: center; font-size: 15px; padding: 16px 22px; }
.nav-cta .nav-call { display: inline-flex; }
}
/* Mobile nav: backdrop, scroll lock, and open-state hamburger colour */
.nav-backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(8, 46, 22, 0.45);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
}
.nav-backdrop.open {
opacity: 1;
visibility: visible;
transition: opacity 400ms var(--ease-out);
}
body.nav-open { overflow: hidden; }
.menu-toggle.open span { background: #fff !important; }
@media (min-width: 901px) { .nav-backdrop { display: none !important; } }
/* Hero (split layout) ---------------------------------------- */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
position: relative;
padding: 0;
}
.hero-content {
padding: 160px 80px 80px 80px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 640px;
margin-left: auto;
width: 100%;
}
.hero-content .eyebrow {
opacity: 0;
animation: fadeUp 800ms var(--ease-out) 200ms forwards;
}
.hero-content h1 {
opacity: 0;
animation: fadeUp 900ms var(--ease-out) 350ms forwards;
}
.hero-content p {
opacity: 0;
animation: fadeUp 900ms var(--ease-out) 500ms forwards;
}
.hero-content .btn-row {
opacity: 0;
animation: fadeUp 900ms var(--ease-out) 650ms forwards;
}
.hero h1 { margin-bottom: 24px; }
.hero h1 em {
font-style: italic;
color: var(--green-soft);
font-weight: 500;
}
.hero-content p {
font-size: 17px;
margin-bottom: 36px;
max-width: 460px;
}
.btn-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-visual {
background: var(--green-dark);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Light-panel variant used on service detail pages to showcase brand icons */
.hero-visual.hero-visual-icon {
background:
radial-gradient(circle at 30% 30%, rgba(125, 183, 133, 0.18), transparent 60%),
radial-gradient(circle at 75% 80%, rgba(201, 169, 97, 0.14), transparent 60%),
var(--cream-soft);
}
.hero-visual.hero-visual-icon::before,
.hero-visual.hero-visual-icon::after { display: none; }
.hero-visual.hero-visual-icon .orbit-deco {
opacity: 0.18;
border-color: rgba(15, 51, 28, 0.25);
}
/* When the right hero panel is light (service detail pages), the nav text
needs to be dark from the start since white-on-cream is invisible. */
body:has(.hero-visual-icon) .nav-links a:not(.btn) { color: var(--ink); }
body:has(.hero-visual-icon) .nav .menu-toggle span { background: var(--ink); }
/* Pages with no hero visual panel stack to a white hero-content at the top on
mobile, so the closed hamburger must also be dark to stay visible.
(Pages with a plain dark-green .hero-visual keep the white default.) */
body:not(:has(.hero-visual)) .nav .menu-toggle span { background: var(--ink); }
body:not(:has(.hero-visual)) .nav-links a:not(.btn) { color: var(--ink); }
.hero-service-icon {
width: min(70%, 380px);
height: auto;
display: block;
position: relative;
z-index: 2;
animation: heroIconEnter 1.4s cubic-bezier(.34,1.5,.6,1) both,
float 9s ease-in-out 1.4s infinite;
filter: drop-shadow(0 24px 40px rgba(15, 51, 28, 0.18));
}
@keyframes heroIconEnter {
0% { opacity: 0; transform: scale(0.7) translateY(40px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.hero-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(79, 184, 119, 0.15), transparent 50%),
radial-gradient(circle at 70% 70%, rgba(201, 169, 97, 0.08), transparent 50%);
pointer-events: none;
}
.hero-visual::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 60%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(125, 183, 133, 0.35), rgba(125, 183, 133, 0) 65%);
filter: blur(20px);
pointer-events: none;
animation: ambientPulse 7s ease-in-out infinite;
z-index: 1;
}
@keyframes ambientPulse {
0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
}
/* Hero icon (the brand mark, inlined for animation control) */
.hero-icon {
width: min(60%, 380px);
height: auto;
position: relative;
z-index: 2;
overflow: visible;
animation: heroEnter 1200ms var(--ease-out) both, float 9s ease-in-out 1200ms infinite;
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35));
transform-origin: center 75%;
}
/* Icon paint colors — pulled from the brand SVG */
.hero-icon .cls-1 { fill: #C9A961; } /* gold stars */
.hero-icon .cls-2 { fill: #7DB785; } /* sage green */
.hero-icon .cls-3 { fill: #1DAA52; } /* primary green (lifted slightly from #009d46 for contrast on dark BG) */
/* Trunk gets a slow grow-in on load to feel like it "sprouts" */
.hero-icon .iv-trunk {
transform-origin: 43px 100px;
animation: trunkGrow 1600ms var(--ease-out) both;
}
/* Stars — each gets its own twinkle phase via data-i */
.hero-icon .iv-star {
transform-box: fill-box;
transform-origin: center;
animation: starTwinkle 2.6s ease-in-out infinite, starAppear 600ms var(--ease-out) both;
opacity: 0;
}
.hero-icon .iv-star[data-i="0"] { animation-delay: 0s, 1000ms; }
.hero-icon .iv-star[data-i="1"] { animation-delay: 0.4s, 1200ms; }
.hero-icon .iv-star[data-i="2"] { animation-delay: 0.9s, 1400ms; }
.hero-icon .iv-star[data-i="3"] { animation-delay: 1.3s, 1600ms; }
.hero-icon .iv-star[data-i="4"] { animation-delay: 1.7s, 1800ms; }
.hero-icon .iv-star[data-i="5"] { animation-delay: 2.1s, 2000ms; }
.hero-icon .iv-star[data-i="6"] { animation-delay: 2.4s, 2200ms; }
/* Sage-green leaf accents pulse gently to feel "alive" */
.hero-icon .cls-2 {
animation: leafBreathe 6s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.hero-icon g > .cls-2:nth-of-type(2n) { animation-delay: -3s; }
@keyframes heroEnter {
0% { opacity: 0; transform: translateY(40px) scale(0.92); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
@keyframes starTwinkle {
0%, 100% { opacity: 0.55; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.25); }
}
@keyframes starAppear {
from { opacity: 0; transform: scale(0); }
to { opacity: 0.55; transform: scale(0.92); }
}
@keyframes leafBreathe {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
@keyframes trunkGrow {
from { transform: scaleY(0.4); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
/* ============================================================
RICH ICON ANIMATION SYSTEM (homepage)
Scoped to .hero-icon-wrap so other pages keep the baseline.
Layers: 3D mouse tilt + orchestrated entrance + per-leaf sway
+ swirling star bloom + drifting twinkle + rising gold particles.
============================================================ */
.hero-icon-wrap {
position: relative;
width: min(60%, 380px);
z-index: 2;
/* No perspective, no 3D — purely 2D so the SVG stays vector-crisp */
animation: wrapEnter 1.6s cubic-bezier(.34,1.5,.6,1) both,
wrapFloat 9s ease-in-out 1.6s infinite;
}
/* Soft contact shadow beneath the icon, decoupled from any filter on the icon */
.hero-icon-wrap::after {
content: '';
position: absolute;
left: 18%;
right: 18%;
bottom: -22px;
height: 50px;
background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
filter: blur(12px);
z-index: -1;
pointer-events: none;
animation: ambientShadow 9s ease-in-out 1.6s infinite;
}
@keyframes ambientShadow {
0%, 100% { opacity: 0.7; transform: scaleX(1); }
50% { opacity: 0.5; transform: scaleX(0.85); }
}
@keyframes wrapEnter {
0% { opacity: 0; transform: translateY(70px) scale(0.6); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Pure vertical float — no rotation, no 3D, keeps SVG crisp */
@keyframes wrapFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
/* The SVG gets 2D parallax translation only — no rotateX/Y, so no rasterization,
so the vector paths stay sharp at every cursor position. */
.hero-icon-wrap .hero-icon {
width: 100%;
height: auto;
display: block;
animation: none;
filter: none;
shape-rendering: geometricPrecision;
transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--hover-scale, 1));
transition: transform 0.55s cubic-bezier(.2,.85,.2,1);
}
/* Trunk: more pronounced sprouting + breathing once settled */
.hero-icon-wrap .hero-icon .iv-trunk {
transform-box: fill-box;
transform-origin: 50% 100%;
animation:
trunkSprout 1.6s cubic-bezier(.34,1.5,.6,1) 0.35s both,
trunkBreathe 7s ease-in-out 2s infinite;
}
@keyframes trunkSprout {
0% { opacity: 0; scale: 0.3 0.3; }
60% { opacity: 1; }
100% { opacity: 1; scale: 1 1; }
}
@keyframes trunkBreathe {
0%, 100% { scale: 1 1; }
50% { scale: 1.015 1.02; }
}
/* Leaves: each sways independently — different phases via nth-of-type */
.hero-icon-wrap .hero-icon path.cls-2,
.hero-icon-wrap .hero-icon path.cls-3:not(.iv-trunk) {
transform-box: fill-box;
transform-origin: 50% 95%;
animation: leafSway 6s ease-in-out infinite;
}
.hero-icon-wrap .hero-icon path:nth-of-type(2) { animation-duration: 5.4s; animation-delay: -0.5s; }
.hero-icon-wrap .hero-icon path:nth-of-type(3) { animation-duration: 6.8s; animation-delay: -1.2s; }
.hero-icon-wrap .hero-icon path:nth-of-type(4) { animation-duration: 5.8s; animation-delay: -2.1s; }
.hero-icon-wrap .hero-icon path:nth-of-type(5) { animation-duration: 7.2s; animation-delay: -0.8s; }
.hero-icon-wrap .hero-icon path:nth-of-type(6) { animation-duration: 6.2s; animation-delay: -2.6s; }
.hero-icon-wrap .hero-icon path:nth-of-type(7) { animation-duration: 5.6s; animation-delay: -3.1s; }
.hero-icon-wrap .hero-icon path:nth-of-type(8) { animation-duration: 6.4s; animation-delay: -1.5s; }
.hero-icon-wrap .hero-icon path:nth-of-type(9) { animation-duration: 7.0s; animation-delay: -2.3s; }
.hero-icon-wrap .hero-icon path:nth-of-type(10) { animation-duration: 5.8s; animation-delay: -0.9s; }
.hero-icon-wrap .hero-icon path:nth-of-type(11) { animation-duration: 6.6s; animation-delay: -3.4s; }
.hero-icon-wrap .hero-icon path:nth-of-type(12) { animation-duration: 5.2s; animation-delay: -1.8s; }
@keyframes leafSway {
0%, 100% { rotate: -1.4deg; }
50% { rotate: 1.4deg; }
}
/* Stars: swirling bloom entrance + continuous drift + twinkle */
.hero-icon-wrap .hero-icon .iv-star {
transform-box: fill-box;
transform-origin: center;
opacity: 0;
animation:
starBloom 1.1s cubic-bezier(.34,1.6,.5,1) both,
starTwinkleRich 2.8s ease-in-out 2.4s infinite,
starDrift 9s ease-in-out 2.4s infinite;
}
.hero-icon-wrap .hero-icon .iv-star[data-i="0"] { animation-delay: 1.20s, 2.40s, 2.40s; }
.hero-icon-wrap .hero-icon .iv-star[data-i="1"] { animation-delay: 1.35s, 2.55s, 3.00s; }
.hero-icon-wrap .hero-icon .iv-star[data-i="2"] { animation-delay: 1.50s, 2.70s, 3.60s; }
.hero-icon-wrap .hero-icon .iv-star[data-i="3"] { animation-delay: 1.65s, 2.85s, 4.20s; }
.hero-icon-wrap .hero-icon .iv-star[data-i="4"] { animation-delay: 1.80s, 3.00s, 4.80s; }
.hero-icon-wrap .hero-icon .iv-star[data-i="5"] { animation-delay: 1.95s, 3.15s, 5.40s; }
.hero-icon-wrap .hero-icon .iv-star[data-i="6"] { animation-delay: 2.10s, 3.30s, 6.00s; }
@keyframes starBloom {
0% { opacity: 0; scale: 0; rotate: -220deg; }
70% { opacity: 1; scale: 1.15; rotate: 10deg; }
100% { opacity: 0.85; scale: 0.95; rotate: 0deg; }
}
@keyframes starTwinkleRich {
0%, 100% { opacity: 0.55; scale: 0.9; }
50% { opacity: 1; scale: 1.35; }
}
@keyframes starDrift {
0%, 100% { translate: 0 0; }
25% { translate: 1.5px -1.5px; }
50% { translate: -1px -2.5px; }
75% { translate: -1.5px 1px; }
}
/* Rising gold particles — soft motes that emit from the figure */
.hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
animation: fadeInLater 0.6s ease-out 2.5s both;
}
@keyframes fadeInLater {
from { opacity: 0; } to { opacity: 1; }
}
.hero-particles span {
position: absolute;
left: var(--x, 50%);
bottom: 28%;
width: 5px;
height: 5px;
border-radius: 50%;
background: #C9A961;
box-shadow: 0 0 10px 1px rgba(201, 169, 97, 0.7),
0 0 20px 2px rgba(201, 169, 97, 0.35);
opacity: 0;
animation: particleRise var(--dur, 7s) ease-in var(--delay, 0s) infinite;
}
@keyframes particleRise {
0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
15% { opacity: 0.9; }
60% { opacity: 0.7; }
100% { opacity: 0; transform: translate(var(--drift, 20px), -260px) scale(0.4); }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.hero-icon-wrap,
.hero-icon-wrap *,
.hero-icon-wrap .hero-icon * {
animation: none !important;
transition: none !important;
}
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
.hero { grid-template-columns: 1fr; }
.hero-content { padding: 40px 24px 60px; max-width: 100%; margin: 0; }
.hero-visual { min-height: 480px; order: -1; padding-top: 100px; }
}
/* Hero Compact (for sub-pages) ------------------------------- */
.hero-compact {
min-height: auto;
}
.hero-compact .hero-content { padding: 160px 80px 100px; }
.hero-compact .hero-visual { min-height: 480px; }
@media (max-width: 1024px) {
.hero-compact .hero-content { padding: 40px 24px 60px; }
.hero-compact .hero-visual { min-height: 360px; padding-top: 60px; }
}
/* Service-detail hero icons: shrink and add top clearance on smaller screens
so they don't ride up under the fixed header logo. */
@media (max-width: 1024px) {
.hero-visual.hero-visual-icon { padding-top: 96px; }
.hero-service-icon { width: min(52%, 250px); }
}
@media (max-width: 600px) {
.hero-visual.hero-visual-icon { padding-top: 88px; }
.hero-service-icon { width: min(46%, 180px); }
}
/* Section base ----------------------------------------------- */
section {
padding: 100px 0;
position: relative;
}
.section-tinted {
background: var(--cream);
}
.section-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
margin-bottom: 64px;
}
.section-intro p {
font-size: 16.5px;
line-height: 1.75;
}
@media (max-width: 800px) {
.section-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
section { padding: 64px 0; }
}
/* Service cards ---------------------------------------------- */
.service-list { display: flex; flex-direction: column; gap: 24px; }
.service-card {
display: grid;
grid-template-columns: 280px 1fr auto;
gap: 48px;
align-items: center;
padding: 32px;
background: white;
border-radius: var(--radius-lg);
transition: all var(--transition);
border: 1px solid var(--line);
}
.service-card:nth-child(even) {
background: var(--cream-soft);
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(11, 61, 30, 0.08);
border-color: transparent;
}
.service-visual {
height: 180px;
border-radius: var(--radius);
background:
radial-gradient(circle at 70% 80%, rgba(125, 183, 133, 0.15), transparent 60%),
radial-gradient(circle at 30% 30%, rgba(201, 169, 97, 0.10), transparent 60%),
var(--cream-soft);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(15, 51, 28, 0.06);
}
.service-visual::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.service-visual svg,
.service-icon {
width: auto;
height: 78%;
max-width: 80%;
position: relative;
z-index: 2;
transition: transform 600ms var(--ease-out);
}
.service-card:hover .service-visual svg,
.service-card:hover .service-icon {
transform: scale(1.06) rotate(-2deg);
}
/* About-page service visual variant — slightly taller proportion */
.service-visual-about {
height: auto;
aspect-ratio: 5/3;
margin-bottom: 24px;
}
.service-body h3 { margin-bottom: 12px; }
.service-body p { font-size: 15px; }
.service-action .btn {
padding: 12px 22px;
font-size: 13.5px;
}
@media (max-width: 900px) {
.service-card {
grid-template-columns: 1fr;
gap: 20px;
padding: 24px;
}
.service-visual { height: 200px; }
.service-action { justify-self: start; }
}
/* Why Choose section ----------------------------------------- */
.why-header {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 56px;
gap: 40px;
flex-wrap: wrap;
}
.why-header h2 { margin-bottom: 12px; }
.why-header p { max-width: 500px; }
.carousel-nav { display: flex; gap: 10px; }
/* Why-Choose cards are a responsive grid (no carousel), so these nav arrows
are not needed on any screen size. */
.why-header .carousel-nav { display: none; }
.carousel-btn {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--green-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.carousel-btn:hover {
background: var(--green-dark);
transform: scale(1.05);
}
.carousel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.why-card {
position: relative;
}
.why-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--green-soft);
color: white;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
margin-bottom: 24px;
}
.why-card h3 { margin-bottom: 16px; }
@media (max-width: 800px) {
.why-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* Testimonials ----------------------------------------------- */
.testimonial-header { margin-bottom: 48px; }
.testimonial-header h2 { margin-bottom: 12px; }
.testimonial-track-wrap {
overflow: hidden;
margin: 0 -16px;
padding: 16px;
}
.testimonial-track {
display: flex;
gap: 24px;
transition: transform 600ms var(--ease-out);
}
.testimonial {
flex: 0 0 calc(33.333% - 16px);
background: white;
padding: 36px 32px;
border-radius: var(--radius);
position: relative;
border: 1px solid var(--line);
transition: transform var(--transition);
}
.testimonial:hover { transform: translateY(-4px); }
.quote-mark {
font-family: var(--font-display);
font-size: 64px;
line-height: 1;
color: var(--green-soft);
margin-bottom: 4px;
}
.testimonial p {
font-size: 14.5px;
margin-bottom: 24px;
font-style: italic;
color: var(--ink-soft);
}
.testimonial .author {
font-family: var(--font-display);
font-weight: 600;
color: var(--green-primary);
font-size: 15px;
}
.testimonial-controls {
display: flex;
gap: 10px;
margin-top: 32px;
}
@media (max-width: 900px) {
.testimonial { flex: 0 0 calc(100% - 16px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
.testimonial { flex: 0 0 calc(50% - 12px); }
}
/* About page sections ---------------------------------------- */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.two-col h2 { margin-bottom: 18px; }
.mva-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 48px;
align-items: start;
}
.mva-grid h2 { margin-bottom: 18px; }
.tc-icon {
width: 52px;
height: 52px;
margin-bottom: 22px;
color: var(--green-primary);
}
.tc-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tc-icon [data-pulse] { transform-box: fill-box; transform-origin: center; animation: tc-pulse 2.6s ease-in-out infinite; }
.tc-icon [data-breathe] { animation: tc-breathe 3.4s ease-in-out infinite; }
.tc-icon [data-pulse].d1 { animation-delay: 0s; }
.tc-icon [data-pulse].d2 { animation-delay: 0.35s; }
.tc-icon [data-pulse].d3 { animation-delay: 0.7s; }
@keyframes tc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes tc-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.tc-icon [data-pulse], .tc-icon [data-breathe] {
animation: none;
transform: none;
opacity: 1;
}
}
.mva-grid p { font-size: 15px; margin-bottom: 16px; }
.mva-grid p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.mva-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 800px) {
.two-col { grid-template-columns: 1fr; gap: 40px; }
}
.approach-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.approach-grid p { margin-bottom: 18px; }
.approach-visual {
aspect-ratio: 4/3;
background: var(--green-dark);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.approach-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(79, 184, 119, 0.18), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(201, 169, 97, 0.08), transparent 60%);
}
.approach-visual svg {
width: 60%;
height: auto;
position: relative;
z-index: 2;
animation: float 8s ease-in-out infinite;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));
}
/* Service-detail variant: light cream panel showcasing the brand icon */
.approach-visual.approach-visual-icon {
background:
radial-gradient(circle at 30% 30%, rgba(125, 183, 133, 0.18), transparent 65%),
radial-gradient(circle at 75% 80%, rgba(201, 169, 97, 0.12), transparent 65%),
var(--cream-soft);
border: 1px solid rgba(15, 51, 28, 0.06);
}
.approach-visual.approach-visual-icon::before { display: none; }
.approach-icon {
width: auto;
height: 78%;
max-width: 75%;
position: relative;
z-index: 2;
animation: float 8s ease-in-out infinite;
}
/* Approach growth sequence — 5-scene crossfade player */
.approach-sequence .scene-player { position: absolute; inset: 0; z-index: 2; }
.approach-sequence .scene {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.approach-sequence .scene img {
width: auto;
height: auto;
max-height: 88%;
max-width: 80%;
object-fit: contain;
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
}
.approach-sequence .scene svg {
height: 88%;
width: auto;
max-width: 80%;
animation: none;
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
}
@keyframes sceneCycle { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sceneFinal { 0% { opacity: 0; transform: scale(0.9); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.approach-sequence .scene-1 { animation: sceneCycle 2.8s 0s ease-in-out forwards; }
.approach-sequence .scene-2 { animation: sceneCycle 2.8s 2.2s ease-in-out forwards; }
.approach-sequence .scene-3 { animation: sceneCycle 2.8s 4.4s ease-in-out forwards; }
.approach-sequence .scene-4 { animation: sceneCycle 2.8s 6.6s ease-in-out forwards; }
.approach-sequence .scene-5 { animation: sceneFinal 1.4s 8.8s ease-out forwards; }
.approach-sequence .scene-5 img { max-width: 84%; max-height: 60%; }
/* Hold the sequence until the panel scrolls into view */
.approach-visual:not(.in) .scene-player * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.approach-sequence .scene-1,
.approach-sequence .scene-2,
.approach-sequence .scene-3,
.approach-sequence .scene-4 { display: none; }
.approach-sequence .scene-5 { opacity: 1; animation: none; }
}
@media (max-width: 900px) {
.approach-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Values grid ------------------------------------------------ */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 52px 56px;
margin-top: 56px;
}
.value-card { }
.value-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--green-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: white;
transition: transform var(--transition);
}
.value-card:hover .value-icon { transform: scale(1.08) rotate(-6deg); }
.value-icon svg { width: 26px; height: 26px; stroke: white; }
.value-card h3 { margin-bottom: 10px; }
.value-card p { font-size: 15px; }
@media (max-width: 980px) {
.values-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 56px; }
}
@media (max-width: 700px) {
.values-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Doctor profile --------------------------------------------- */
.doctor-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.doctor-body h2 { margin-bottom: 22px; }
.doctor-body p { margin-bottom: 18px; line-height: 1.75; }
.doctor-visual {
aspect-ratio: 3/4;
background: var(--green-dark);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.doctor-visual::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(79, 184, 119, 0.2), transparent 60%);
}
.doctor-visual svg {
width: 64%;
position: relative;
z-index: 2;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));
}
.doctor-photo {
aspect-ratio: 3/4;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: var(--green-dark);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.doctor-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
@media (max-width: 900px) {
.doctor-grid { grid-template-columns: 1fr; gap: 40px; }
.doctor-visual { aspect-ratio: 1; max-width: 480px; }
.doctor-photo { max-width: 480px; }
}
/* Contact page ----------------------------------------------- */
.contact-info {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 32px;
margin-bottom: 28px;
}
.contact-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.contact-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--green-soft);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-icon svg { width: 16px; height: 16px; }
.contact-row .text {
line-height: 1.5;
padding-top: 8px;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.form-card {
background: transparent;
padding: 0;
}
.form-card h2 { margin-bottom: 28px; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-note {
margin: -2px 0 2px;
font-size: 13px;
line-height: 1.5;
color: var(--muted, #6b7280);
}
.input, .textarea {
width: 100%;
padding: 14px 18px;
font-family: var(--font-body);
font-size: 14.5px;
color: var(--ink);
background: white;
border: 1px solid var(--line);
border-radius: var(--radius);
transition: all var(--transition);
}
.input:focus, .textarea:focus {
outline: none;
border-color: var(--green-primary);
box-shadow: 0 0 0 4px rgba(31, 154, 75, 0.1);
}
.input::placeholder, .textarea::placeholder {
color: var(--muted);
}
.textarea {
min-height: 130px;
resize: vertical;
font-family: var(--font-body);
}
.form-submit {
width: 100%;
padding: 16px;
margin-top: 6px;
}
.map-card,
.image-placeholder {
aspect-ratio: 4/4;
background: var(--green-dark);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: rgba(255, 255, 255, 0.45);
}
.map-card::before,
.image-placeholder::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(125, 183, 133, 0.18), transparent 55%),
radial-gradient(circle at 75% 80%, rgba(201, 169, 97, 0.10), transparent 55%);
pointer-events: none;
}
.placeholder-icon {
width: 72px;
height: 72px;
position: relative;
z-index: 1;
}
.placeholder-label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
/* ===== Location selector (contact page) ===== */
.map-panel {
background: var(--green-dark);
border-radius: var(--radius-lg);
padding: 22px;
position: relative;
overflow: hidden;
}
.map-panel::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 20%, rgba(125, 183, 133, 0.16), transparent 55%),
radial-gradient(circle at 80% 90%, rgba(201, 169, 97, 0.10), transparent 55%);
pointer-events: none;
}
.loc-selector {
display: flex;
flex-wrap: wrap;
gap: 10px;
position: relative;
z-index: 1;
margin-bottom: 18px;
}
.loc-pill {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-pill);
padding: 9px 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all var(--transition);
}
.loc-pill:hover { background: rgba(255, 255, 255, 0.14); }
.loc-pill.is-active {
background: var(--gold);
border-color: var(--gold);
color: var(--green-deeper);
}
.pill-soon {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.9);
}
.loc-pill.is-active .pill-soon {
background: rgba(11, 61, 30, 0.18);
color: var(--green-deeper);
}
.loc-address {
position: relative;
z-index: 1;
color: white;
font-size: 15px;
line-height: 1.6;
margin-bottom: 16px;
}
.loc-address:empty { display: none; }
/* Optional secondary line under an address, e.g. "By appointment" */
.loc-note {
display: block;
margin-top: 8px;
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
/* Hero "also opening soon" note (light background) */
.loc-upcoming {
margin: 4px 0 26px;
padding: 14px 18px;
border-radius: var(--radius);
background: rgba(31, 154, 75, 0.06);
border-left: 3px solid var(--green-soft);
max-width: 470px;
}
.loc-upcoming:empty { display: none; }
.loc-upcoming-eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green-primary);
margin-bottom: 4px;
}
.loc-upcoming p {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--ink);
}
.loc-upcoming a {
color: var(--green-primary);
font-weight: 600;
white-space: nowrap;
}
.loc-upcoming a:hover { color: var(--green-dark); }
/* Footer location list (dark background) */
.footer-locations {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-loc {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color var(--transition-fast);
}
.footer-loc:hover { color: white; }
.footer-loc-soon {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-light);
border: 1px solid rgba(217, 189, 126, 0.4);
border-radius: var(--radius-pill);
padding: 1px 7px;
}
.loc-map {
position: relative;
z-index: 1;
border-radius: var(--radius);
overflow: hidden;
}
.loc-map-frame {
width: 100%;
height: 320px;
border: 0;
display: block;
background: rgba(255, 255, 255, 0.06);
}
.loc-directions {
display: inline-block;
margin-top: 12px;
color: var(--gold-light);
font-weight: 600;
font-size: 14px;
}
.loc-directions:hover { color: white; }
.loc-soon {
text-align: center;
color: rgba(255, 255, 255, 0.92);
padding: 30px 16px 8px;
}
.loc-soon svg {
width: 44px;
height: 44px;
color: var(--gold-light);
margin-bottom: 6px;
}
.loc-soon h3 {
color: white;
font-size: 20px;
margin-bottom: 10px;
}
.loc-soon p {
font-size: 14.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
max-width: 360px;
margin: 0 auto 20px;
}
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.form-grid { grid-template-columns: 1fr; }
.loc-map-frame { height: 260px; }
}
/* ADHD page specific ----------------------------------------- */
.process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px 48px;
}
.process-card {
position: relative;
}
@media (max-width: 800px) {
.process-grid { grid-template-columns: 1fr; gap: 36px; }
}
.gain-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.gain-list, .feature-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.gain-list li, .feature-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15px;
color: var(--ink-soft);
line-height: 1.5;
}
.check-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 2px;
}
.feature-list .check-icon {
background: var(--green-primary);
color: white;
border-radius: 50%;
padding: 4px;
}
.gain-list .check-icon { color: var(--green-primary); }
.gain-block { margin-bottom: 0; }
.gain-block h3 { margin-bottom: 22px; }
@media (max-width: 900px) {
.gain-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Sub-list for FAQ-like blocks ------------------------------- */
.sub-section h3 { margin-bottom: 20px; }
.sub-section h4 { color: var(--green-primary); margin-bottom: 6px; margin-top: 18px; }
.sub-section h4:first-of-type { margin-top: 0; }
.sub-section p { font-size: 15px; margin-bottom: 4px; }
/* CTA Strip -------------------------------------------------- */
.cta-strip {
background: var(--green-dark);
padding: 90px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-strip::before, .cta-strip::after {
content: '';
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(79,184,119,0.2), transparent 70%);
}
.cta-strip::before { width: 600px; height: 600px; top: -300px; left: -200px; }
.cta-strip::after { width: 500px; height: 500px; bottom: -250px; right: -150px; }
/* Line-art neural network behind CTA text — keeps the panel feeling alive
while staying subtle enough that the heading and button remain crisp. */
.cta-neural-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
pointer-events: none;
opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
.cta-neural-bg { opacity: 0.55; }
}
.cta-strip > .container { position: relative; z-index: 2; }
.cta-strip h2 { color: white; margin-bottom: 16px; }
.cta-strip p { color: rgba(255,255,255,0.85); font-size: 17px; margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }
/* Footer ----------------------------------------------------- */
footer {
background: var(--green-dark);
color: rgba(255,255,255,0.9);
padding-top: 70px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 50px;
}
footer .logo-text .brand { color: white; }
footer .logo-text .tagline { color: rgba(255,255,255,0.7); }
/* Newsletter column: give the heading and form clear breathing room */
.footer-grid > div:first-child h4 {
color: var(--green-soft);
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
margin: 8px 0 20px;
letter-spacing: 0;
text-transform: none;
}
.footer-col h4 {
color: white;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 22px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
font-size: 14px;
color: rgba(255,255,255,0.75);
transition: color var(--transition-fast);
}
.footer-col a:hover { color: white; }
.footer-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-actions .btn { padding: 11px 24px; font-size: 13.5px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 22px 0;
background: rgba(255,255,255,0.04);
}
.footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
color: rgba(255,255,255,0.65);
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-credit {
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-credit-logo {
height: 9px;
width: auto;
display: block;
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* Reveal animations ----------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
/* Page transition overlay ----------------------------------- */
.page-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--green-dark);
z-index: 200;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 500ms var(--ease-in-out), visibility 500ms;
display: flex;
align-items: center;
justify-content: center;
}
.page-overlay::after {
content: '';
width: 60px;
height: 60px;
border: 2px solid rgba(255,255,255,0.15);
border-top-color: var(--green-soft);
border-radius: 50%;
animation: spinLoader 800ms linear infinite;
opacity: 0;
transition: opacity 300ms 200ms;
}
.page-overlay.enter {
opacity: 1;
visibility: visible;
}
.page-overlay.enter::after { opacity: 1; }
@keyframes spinLoader {
to { transform: rotate(360deg); }
}
/* Mini orbit/circle decoration ------------------------------ */
.orbit-deco {
position: absolute;
width: 600px;
height: 600px;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 50%;
pointer-events: none;
animation: spin 60s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Cookie/utility ----------------------------------------- */
::selection { background: var(--green-primary); color: white; }
:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 3px; border-radius: 4px; }
/* ============ OTHER SERVICES (detail page cross-links) ============ */
.other-services-section { padding: 96px 0; }
.other-services-section h2 {
font-size: clamp(28px, 3.2vw, 40px);
color: var(--green-primary);
text-align: left;
}
.other-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.other-service-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 32px 28px 28px;
background: #FFFFFF;
border-radius: var(--radius);
border: 1px solid rgba(15, 51, 28, 0.06);
text-decoration: none;
color: var(--ink);
transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms;
}
.other-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(15, 51, 28, 0.08);
border-color: rgba(31, 154, 75, 0.25);
}
.other-service-icon-wrap {
width: 100%;
aspect-ratio: 5/3;
background:
radial-gradient(circle at 70% 80%, rgba(125, 183, 133, 0.18), transparent 60%),
radial-gradient(circle at 30% 30%, rgba(201, 169, 97, 0.12), transparent 60%),
var(--cream-soft);
border-radius: var(--radius-sm, 12px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.other-service-icon {
width: auto;
height: 78%;
max-width: 80%;
transition: transform 400ms var(--ease-out);
}
.other-service-card:hover .other-service-icon {
transform: scale(1.06) rotate(-2deg);
}
.other-service-card h3 {
font-size: 18px;
font-weight: 600;
color: var(--green-primary);
line-height: 1.3;
margin: 0;
}
.other-service-btn {
font-size: 13.5px;
padding: 11px 22px;
margin-top: auto;
}
/* The card itself is the clickable link; the pill is just a visual indicator.
Since we can't nest tags, we trigger the btn hover sweep from the card. */
.other-service-card:hover .other-service-btn {
background: var(--green-bright);
box-shadow: 0 10px 24px rgba(31, 154, 75, 0.32);
}
.other-service-card:hover .other-service-btn::before {
transform: translateX(0);
}
.other-service-btn span[aria-hidden] {
transition: transform 300ms var(--ease-out);
}
.other-service-card:hover .other-service-btn span[aria-hidden] {
transform: translateX(4px);
}
@media (max-width: 900px) {
.other-services-grid { grid-template-columns: 1fr; }
.other-services-section { padding: 72px 0; }
}
/* ============ BOOK APPOINTMENT MODAL ============ */
.modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal[hidden] { display: none; }
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(11, 61, 30, 0.65);
backdrop-filter: blur(6px);
animation: modalFadeIn 250ms var(--ease-out);
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-card {
position: relative;
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
background: #FFFFFF;
border-radius: var(--radius-lg);
padding: 40px 38px 32px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
animation: modalSlideIn 380ms cubic-bezier(.34,1.5,.6,1);
}
@keyframes modalSlideIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--green-dark);
font-size: 24px;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 200ms var(--ease-out);
}
.modal-close:hover { background: rgba(11, 61, 30, 0.08); }
.modal-card h2 {
margin: 0 0 8px;
font-size: 26px;
font-weight: 600;
color: var(--green-primary);
}
.modal-subtitle {
margin: 0 0 24px;
color: var(--ink-soft, rgba(20, 36, 26, 0.7));
font-size: 14.5px;
}
.modal-form .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.modal-form .input,
.modal-form .textarea,
.modal-form select.input {
padding: 12px 14px;
font-size: 14px;
}
.modal-form .input.full,
.modal-form .textarea.full,
.modal-form .form-submit.full,
.modal-form select.full {
grid-column: 1 / -1;
}
.modal-form .textarea { min-height: 80px; resize: vertical; }
.modal-form select.input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231F9A4B' stroke-width='1.8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
color: var(--ink);
}
.modal-form select.input:invalid { color: rgba(20, 36, 26, 0.4); }
.modal-form .form-submit { margin-top: 6px; }
body.modal-open { overflow: hidden; }
/* Success message */
.modal-success {
text-align: center;
padding: 16px 0 8px;
}
.modal-success svg {
width: 60px;
height: 60px;
margin: 0 auto 14px;
display: block;
color: var(--green-primary);
}
.modal-success h3 { color: var(--green-primary); margin-bottom: 8px; font-size: 22px; }
.modal-success p { color: var(--ink); margin-bottom: 20px; line-height: 1.5; }
@media (max-width: 560px) {
.modal-card { padding: 32px 22px 22px; }
.modal-form .form-grid { grid-template-columns: 1fr; }
}
/* Legal pages (Privacy Policy / Terms & Conditions) ---------- */
.legal-section { padding-top: 64px; }
.legal-body { max-width: 820px; margin: 0 auto; }
.legal-body h2 {
font-size: clamp(22px, 2.4vw, 28px);
margin: 48px 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
font-size: 18px;
margin: 28px 0 10px;
color: var(--ink);
}
.legal-body p { margin-bottom: 16px; line-height: 1.75; color: var(--ink-soft); }
.legal-body ul { margin: 0 0 18px 22px; }
.legal-body ul li { margin-bottom: 10px; line-height: 1.7; color: var(--ink-soft); }
.legal-body a { color: var(--green-primary); text-decoration: underline; }
.legal-body a:hover { color: var(--green-dark); }
.legal-meta {
font-size: 14px;
color: var(--muted);
margin-bottom: 40px;
}
.legal-callout {
background: var(--cream-soft);
border-left: 3px solid var(--gold);
border-radius: var(--radius-sm);
padding: 18px 22px;
margin: 0 0 32px;
}
.legal-callout p { margin: 0; font-size: 15px; }
/* About page: "How we can support you" services grid -------- */
.support-services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
@media (max-width: 700px) {
.support-services-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* ===== FAQ accordion (service pages) ===== */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px 2px;
background: none;
border: none;
text-align: left;
cursor: pointer;
font-family: inherit;
font-size: 17px;
font-weight: 600;
line-height: 1.4;
color: var(--ink);
transition: color var(--transition-fast);
}
.faq-q:hover { color: var(--green-primary); }
.faq-icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after {
content: ""; position: absolute; background: var(--green-primary); border-radius: 2px;
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.faq-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--transition); }
.faq-a p { margin: 0; padding: 0 2px 22px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
.faq-a, .faq-icon::before, .faq-icon::after { transition: none; }
}
/* ===== Nav legibility fix (901–1300px) ==========================
The hero's dark panel starts around 50% of the viewport. Because the
nav links are right-aligned, they slide left off that panel onto the
white background as the window narrows — leaving white text on white
(the "Home" link disappearing). Above ~1300px the links still sit over
the dark panel, so the transparent nav is kept there. In the band below,
the nav takes its solid frosted treatment so links are always legible. */
@media (min-width: 901px) and (max-width: 1300px) {
.nav {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(20, 36, 26, 0.06);
}
.nav .nav-links a:not(.btn) { color: var(--ink); }
}
/* ===== Services hero: cycling service icons =====================
Four service icons crossfade in sequence on the cream hero panel.
Each SVG already carries its own internal motion; this layer only
handles the transition between them. */
.hero-icon-cycle {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Clear the fixed nav so the icons don't crowd it on desktop */
.hero-visual:has(.hero-icon-cycle) { padding-top: 96px; }
/* On mobile the visual sits above the content, so it needs both nav clearance
and enough height that the icon (which is taller than it is wide) fits. */
@media (max-width: 1024px) {
.hero-visual:has(.hero-icon-cycle) {
padding-top: 130px;
padding-bottom: 40px;
min-height: 500px;
}
}
.hero-icon-cycle .cyc {
position: absolute;
top: 50%;
left: 50%;
width: min(56%, 300px);
max-height: 100%;
object-fit: contain;
opacity: 0;
transform-origin: center;
animation: hero-cyc 16s cubic-bezier(0.22, 1, 0.36, 1) infinite;
will-change: opacity, transform;
}
.hero-icon-cycle .cyc-1 { animation-delay: 0s; }
.hero-icon-cycle .cyc-2 { animation-delay: 4s; }
.hero-icon-cycle .cyc-3 { animation-delay: 8s; }
.hero-icon-cycle .cyc-4 { animation-delay: 12s; }
/* Each icon: lifts and fades in, holds, then drifts up and away */
@keyframes hero-cyc {
0% { opacity: 0; transform: translate(-50%, -46%) scale(0.86) rotate(-5deg); }
5% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
22% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
27% { opacity: 0; transform: translate(-50%, -54%) scale(1.08) rotate(4deg); }
100% { opacity: 0; transform: translate(-50%, -54%) scale(1.08) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-icon-cycle .cyc {
animation: none;
opacity: 0;
transform: translate(-50%, -50%);
}
/* Show a single static icon instead of cycling */
.hero-icon-cycle .cyc-1 { opacity: 1; }
}
/* ===== Contact hero: map panel in place of the brand icon ========
The map card is dark green, so the hero panel behind it uses the
light cream treatment (same as the service-detail heroes) rather
than the default dark green — otherwise it's dark-on-dark. */
.hero-visual.hero-visual-map {
background:
radial-gradient(circle at 30% 30%, rgba(125, 183, 133, 0.18), transparent 60%),
radial-gradient(circle at 75% 80%, rgba(201, 169, 97, 0.14), transparent 60%),
var(--cream-soft);
padding-left: 40px;
padding-right: 40px;
}
.hero-visual.hero-visual-map::before,
.hero-visual.hero-visual-map::after { display: none; }
.hero-visual.hero-visual-map .map-panel {
width: 100%;
max-width: 560px;
}
/* Light hero panel → nav text must be dark from the top (as with .hero-visual-icon) */
body:has(.hero-visual-map) .nav-links a:not(.btn) { color: var(--ink); }
body:has(.hero-visual-map) .nav .menu-toggle span { background: var(--ink); }
/* Mobile: unlike other pages (where the visual leads), the contact page should
lead with the heading and contact details, with the map following. The nav
clearance therefore moves to .hero-content, since that now comes first. */
@media (max-width: 1024px) {
.hero:has(.hero-visual-map) .hero-content { padding-top: 120px; }
.hero-visual.hero-visual-map {
order: 1;
padding-left: 20px;
padding-right: 20px;
padding-top: 0;
padding-bottom: 56px;
min-height: 0;
}
}