/* Annelie van Heerden Physiotherapy: landing page styles */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-anchor: none; } /* no scroll re-anchoring: the sticky header resizes, and compensating for it fights the header's own state logic */
body { margin: 0; font-family: 'Inter', sans-serif; color: #2F2B2C; background: #FCFAF8; }
h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', sans-serif; }
h3.fw6 { font-weight: 800; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: #7A1E34; text-decoration: none; }
a:hover { color: #5E1626; }

/* ---------- Atomic layout utilities (kept from design system) ---------- */
.fx { display: flex; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; }
.ac { align-items: center; }
.jc { justify-content: center; }
.jb { justify-content: space-between; }
.f1 { flex: 1; }
.noshrink { flex-shrink: 0; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }
.upper { text-transform: uppercase; }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }
.gap8 { gap: 8px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.gap24 { gap: 24px; }
.m0 { margin: 0; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.posrel { position: relative; }
.posabs { position: absolute; }
.round { border-radius: 50%; }
.ohide { overflow: hidden; }
.bbox { box-sizing: border-box; }
.pointer { cursor: pointer; }
.w100 { width: 100%; }
.b0 { border: none; }

/* ---------- Design tokens & components ---------- */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.blue { color: #7A1E34; }
.muted { color: rgba(47, 43, 44, .72); font-size: 14px; line-height: 1.7; }
.small { font-size: 12px; color: rgba(47, 43, 44, .55); line-height: 1.7; }

.btn { display: inline-block; background: #7A1E34; color: #fff; border: none; border-radius: 8px; padding: 13px 26px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { background: #5E1626; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(122, 30, 52, .25); }

.navlink { color: #2F2B2C; font-size: 14px; font-weight: 500; }
.navlink:hover { color: #7A1E34; }

/* Subtle inline text CTA */
.cta-link { display: inline-flex; align-items: center; gap: 6px; color: #7A1E34; font-size: 14px; font-weight: 600; transition: gap .2s ease, color .2s ease; }
.cta-link:hover { color: #5E1626; gap: 10px; }
.team-cta { margin-top: 22px; }
/* Heading placed directly after an eyebrow (sections without an intro line) */
.eyebrow + .h2 { margin-top: 14px; }
/* Pill action buttons (practice locations) */
.pill-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid #E8DFE1; color: #7A1E34; background: #fff; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.pill-btn:hover { border-color: #C98A92; background: #FCFAF8; transform: translateY(-1px); color: #7A1E34; }
.pill-btn svg { flex-shrink: 0; }

.h2 { font-size: 38px; font-weight: 800; margin: 0; line-height: 1.25; letter-spacing: -.5px; }
.sect { padding: 100px 0; }
/* Anchor targets clear the sticky header when navigated to */
section[id] { scroll-margin-top: 96px; }
/* Colour rhythm: canvas hero → canvas treat → white process → canvas about → feature-blush philosophy → white team → soft-blush testimonials → white practices → blush-gradient booking → dark footer */
/* Background system: colour reinforces content, never just alternates.
   Canvas (#FCFAF8, the body) is the default; white lifts info-heavy sections;
   blush is used sparingly for human/emotional moments. */
.bg-white { background: #FFFFFF; }     /* information-heavy sections, lets photos/cards read */
.bg-blush { background: #F8F1F2; }     /* soft blush: human connection (testimonials) */
.bg-feature { background: #F3E5E8; }   /* feature blush: emotional moments (philosophy) */
.softblue { background: #F8F1F2; }     /* alias kept for treatment sub-pages */
.bg-sand { background: #F9F4F3; }      /* warm neutral band: separates same-tone sections without colour */

/* Section eyebrow label: one consistent token across every section */
.eyebrow { display: inline-block; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 2.2px; color: #7A1E34; }
/* Supporting description under a heading */
.lead { color: rgba(47, 43, 44, .72); font-size: 15px; line-height: 1.8; }

.abicon { width: 48px; height: 48px; background: #F9F4F3; border-radius: 10px; color: #7A1E34; flex-shrink: 0; }

.svccard { background: #fff; border-radius: 14px; padding: 34px 28px; text-align: center; box-shadow: 0 10px 30px rgba(122, 30, 52, .08); transition: transform .3s ease, box-shadow .3s ease; }
.svccard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(122, 30, 52, .16); }
.card-link { display: inline-block; color: #7A1E34; font-size: 13px; font-weight: 500; margin-top: 14px; }
.card-link:hover { color: #5E1626; }
.svcico { width: 68px; height: 68px; border-radius: 16px; background: #F9F4F3; color: #7A1E34; margin: 0 auto 18px; transition: background .3s ease, color .3s ease, transform .3s ease; }
.svccard:hover .svcico { background: #7A1E34; color: #fff; transform: scale(1.06); }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 50px; }

/* ---------- What We Treat ---------- */
#services .orb-1 { width: 470px; height: 470px; top: 40px; left: -170px; }
#services .orb-2 { width: 250px; height: 250px; top: 210px; left: 215px; }
#services .orb-3 { width: 320px; height: 320px; top: 590px; left: -70px; }
.treat-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; margin-top: 48px; }
.treat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.treat-body .treat-grid { grid-template-columns: 1fr 1fr; }
.treat-media { order: -1; border-radius: 16px; overflow: hidden; }
.treat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.treat-media:hover img { transform: scale(1.04); }

.treat-grid .svccard { position: relative; border-radius: 16px; padding: 26px 24px; text-align: left; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.treat-grid .svcico { width: 46px; height: 46px; border-radius: 12px; margin: 0 0 18px; }
.treat-grid .svccard:hover .svcico { transform: none; }
.treat-grid .svccard h3 { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; color: #2F2B2C; margin: 0 0 8px; letter-spacing: -.1px; }
.treat-grid .svccard p { font-size: 13px; line-height: 1.7; color: rgba(47, 43, 44, .72); margin: 0; }
.treat-grid .card-link { margin-top: auto; padding-top: 16px; }
/* Stretch the link's hit-area over the whole card so the entire card is clickable */
.treat-grid .card-link::after { content: ''; position: absolute; inset: 0; }

/* Treatment tiles (home page + treatment-page Explore grids): primary burgundy with white icons & text */
.treat-grid .svccard { background: #7A1E34; box-shadow: 0 10px 30px rgba(122, 30, 52, .22); }
.treat-grid .svcico { background: rgba(255, 255, 255, .15); color: #fff; }
.treat-grid .svccard:hover .svcico { background: rgba(255, 255, 255, .26); color: #fff; }
.treat-grid .svccard h3 { color: #fff; }
.treat-grid .card-link,
.treat-grid .card-link:hover { color: #fff; }

.stat { border-radius: 12px; padding: 16px 20px; text-align: center; }
.statn { font-size: 26px; font-weight: 700; }

#reviews .orb-1 { width: 430px; height: 430px; top: -110px; right: -150px; }
#reviews .orb-2 { width: 300px; height: 300px; bottom: -100px; left: -110px; }
#reviews .orb-3 { width: 200px; height: 200px; top: 90px; right: 150px; }
.revcard { background: #fff; border-radius: 14px; padding: 52px 28px 30px; text-align: center; box-shadow: 0 10px 30px rgba(122, 30, 52, .06); position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.revcard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(122, 30, 52, .12); }
.revcard::before { content: '\201C'; position: absolute; top: -8px; left: 12px; font-family: 'Manrope', sans-serif; font-size: 96px; font-weight: 800; color: rgba(122, 30, 52, .07); line-height: 1; pointer-events: none; }
.revcard.featured { background: #7A1E34; }
.revcard.featured::before { color: rgba(255, 255, 255, .12); }
.revcard.featured .small { color: #EBCBD2; }
.revcard.featured .tbd { color: #F2B8C0; }
.stars { color: #FBBC04; font-size: 15px; letter-spacing: 3px; margin-top: 10px; }

.qrow { font-size: 13px; color: rgba(47, 43, 44, .72); }
.qico { width: 34px; height: 34px; border-radius: 8px; background: #fff; color: #7A1E34; flex-shrink: 0; }

.foot { background: #2A1820; color: #C9BDC0; padding: 84px 0 32px; }
.foothead { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; margin: 0 0 22px; white-space: nowrap; }
.footlink { color: #C9BDC0; font-size: 13px; display: block; transition: color .2s ease, transform .2s ease; }
.footlink:hover { color: #fff; transform: translateX(3px); }
.foot-hours { color: #C9BDC0; font-size: 13px; line-height: 1.7; }
.social-row { display: flex; gap: 10px; margin-top: 22px; }
.social-link { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); color: #EAE6E3; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.social-link:hover { border-color: #C98A92; color: #fff; background: rgba(201, 138, 146, .14); }
.foot .tbd { color: #C98A92; }

/* Placeholder text that still needs real practice details filled in */
.tbd { color: #B5484F; font-style: italic; }

/* ---------- Header (sticky) ---------- */
.site-header { position: sticky; top: 0; z-index: 90; background: #fff; padding: 20px 0; transition: padding .25s ease, box-shadow .25s ease; }
.site-header.scrolled { padding: 12px 0; box-shadow: 0 4px 22px rgba(122, 30, 52, .07); }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.logo-link img { height: 104px; width: auto; display: block; mix-blend-mode: multiply; transition: height .25s ease; }
.site-header.scrolled .logo-link img { height: 72px; }

.nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #2F2B2C; margin: 5px 0; }
.nav-close { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: #2F2B2C; }
.nav-close svg { width: 24px; height: 24px; }

/* ---------- Hero ---------- */
.hero { padding-top: 40px; padding-bottom: 0; align-items: flex-end; gap: 24px; }
.hero-copy { max-width: 520px; padding-bottom: 110px; }
.hero-copy h1 { font-size: 46px; font-weight: 800; line-height: 1.25; margin: 0; }
/* Negative block margins keep the 88px badge from growing the button row past the
   buttons themselves: it overflows evenly above and below instead, so the buttons
   stay where they were designed to sit and the stat banner below is unaffected. */
.hero-badge { display: block; width: 88px; height: 88px; flex-shrink: 0; margin: -22px 0; transition: transform .2s ease; }
.hero-badge img { display: block; width: 100%; height: 100%; }
.hero-badge:hover { transform: scale(1.06); }
.hero-media { height: 440px; }
/* Sized from its own height at a fixed ratio and centred, rather than stretched
   to the container by inset. The border-radius is in percentages, so a container
   that is much wider than it is tall used to render this as a long flat ellipse
   instead of a blob. max-width keeps it inside the box it used to occupy. */
.hero-media .tint { inset: auto auto 10px 50%; transform: translateX(-50%); height: calc(100% - 65px); aspect-ratio: 1.3; max-width: calc(100% - 40px); border-radius: 42% 58% 68% 32% / 45% 38% 62% 55%; background-color: rgba(122, 30, 52, .05); }
.hero-media .deco-icon { color: #7A1E34; opacity: .1; }
.hero-media .icon-plus { inset: 25px auto auto 15px; animation: float-a 9s ease-in-out infinite; }
.hero-media .icon-circle { inset: auto auto 70px 0; animation: float-b 10.5s ease-in-out infinite; }
.hero-media .icon-plus2 { inset: auto 15px 40px auto; animation: float-b 11.5s ease-in-out infinite; animation-delay: 1.5s; }
.hero-media .icon-circle2 { inset: 10px 0 auto auto; animation: float-a 8.5s ease-in-out infinite; animation-delay: .5s; }
.hero-media .photo { inset: 0 20px 0 60px; }

/* ---------- Section intro line ----------
   The narrative sentence that sits between the eyebrow and the heading.
   Larger than the eyebrow, quieter than the heading; it carries the story. */
.sect-intro { max-width: 560px; margin: 16px 0 0; font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 500; line-height: 1.6; letter-spacing: -.2px; color: rgba(47, 43, 44, .72); }
.tc .sect-intro { margin-left: auto; margin-right: auto; }
.sect-intro + .h2 { margin-top: 16px; }

/* ---------- Our Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 62px; }
.process-step { text-align: center; }
.process-ico { width: 58px; height: 58px; border-radius: 16px; background: #F9F4F3; color: #7A1E34; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.process-num { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #C98A92; }
.process-step h3 { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; color: #2F2B2C; margin: 8px 0 0; letter-spacing: -.2px; }
.process-step p { color: rgba(47, 43, 44, .72); font-size: 14px; line-height: 1.75; margin: 12px auto 0; max-width: 290px; }

/* ---------- Organic background texture ----------
   Large, very low-contrast circles and thin rings that bleed off the
   section edges. Purely atmospheric, kept under the content layer. */
.sect { position: relative; }
.sect > .wrap { position: relative; z-index: 1; }
/* Squircles: rounded squares with soft, slightly organic corners */
.orb { position: absolute; border-radius: 35% 37% 34% 36% / 37% 34% 36% 34%; pointer-events: none; z-index: 0; }
.orb-1 { border-radius: 37% 33% 38% 32% / 33% 38% 34% 37%; }
.orb-2 { border-radius: 32% 38% 34% 36% / 38% 33% 37% 34%; }
.orb-3 { border-radius: 38% 32% 36% 35% / 34% 37% 33% 38%; }
.orb-light { background: rgba(255, 255, 255, .28); }
.orb-tint { background: rgba(122, 30, 52, .022); }
.orb-ring { border: 1px solid rgba(122, 30, 52, .055); }
.has-orbs { overflow: hidden; }

/* ---------- Dot grid texture (reusable) ---------- */
.dot-grid { background-image: radial-gradient(circle, rgba(122, 30, 52, .18) 2.5px, transparent 2.6px); background-size: 26px 26px; }
.hero-dot-grid { inset: auto auto 60px 0; width: 130px; height: 120px; }
/* Softer variant for section-edge accents */
.deco-dots { background-image: radial-gradient(circle, rgba(122, 30, 52, .14) 2.5px, transparent 2.6px); pointer-events: none; }
#services, #facilities, #appointment { position: relative; }
.facilities-dots { top: 90px; right: 60px; width: 180px; height: 120px; }
.appointment-dots { bottom: 50px; left: 10px; width: 160px; height: 120px; }

@keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.hero-media .photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

/* ---------- Stats bar ---------- */
.stats-bar-wrap { position: relative; z-index: 10; margin-top: -50px; margin-bottom: -70px; }
#services { padding-top: 170px; }
.stats-bar { background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(122, 30, 52, .10); padding: 32px 20px; justify-content: space-around; }
.statitem { flex: 1; text-align: center; padding: 0 20px; }
.statitem.divider { border-left: 1px solid #EEE7E8; border-right: 1px solid #EEE7E8; }
.staticon { width: 48px; height: 48px; border-radius: 12px; background: #F9F4F3; color: #7A1E34; margin: 0 auto 14px; }
.statbig { font-family: 'Manrope', sans-serif; font-size: 34px; font-weight: 800; color: #7A1E34; line-height: 1.1; letter-spacing: -.5px; }
.statlabel { font-size: 13px; font-weight: 600; color: #2F2B2C; margin-top: 6px; }
.statsub { font-size: 11px; color: rgba(47, 43, 44, .55); margin-top: 3px; letter-spacing: .3px; }

/* ---------- About ---------- */
.about-media { width: 440px; height: 400px; flex-shrink: 0; }
.about-media .card-bg { inset: 40px 30px 0 0; background: #fff; border-radius: 16px; }
/* Rows sit every 26px starting 13px in, so -50px clears two full rows above the photo. */
.about-media .about-dots { top: -50px; right: 4px; width: 140px; height: 110px; }
.about-media .photo { inset: 0 0 0 30px; }
.about-media .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 36px rgba(122, 30, 52, .12); }
.float-badge { right: -18px; bottom: 34px; background: #7A1E34; border-radius: 14px; box-shadow: 0 14px 34px rgba(122, 30, 52, .28); padding: 14px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.float-badge .fb-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 24px; color: #fff; line-height: 1; }
.float-badge .fb-label { font-size: 11px; color: #E0BFC7; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Motto banner ---------- */
#motto { background: linear-gradient(90deg, #7A1E34 0%, #97223E 100%); }
.motto-lead { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 500; color: #fff; margin: 0; letter-spacing: -.2px; }
.motto-row { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 6px; }
.motto-script { font-family: 'Solitreo', cursive; font-size: 58px; line-height: 1.35; color: #fff; }
.motto-stamp { width: 96px; height: auto; filter: brightness(0) invert(1); }

/* ---------- Team ---------- */
#doctors .orb-1 { width: 620px; height: 620px; top: 60px; right: -230px; }
#doctors .orb-2 { width: 380px; height: 380px; top: 420px; right: -120px; }
#doctors .orb-3 { width: 300px; height: 300px; bottom: -90px; left: -110px; }
.team-row { gap: 50px; margin-bottom: 60px; }
.team-row:last-child { margin-bottom: 0; }
.team-photo { width: 400px; height: 513px; flex-shrink: 0; }
.team-photo .team-photo-img { inset: 0; width: 100%; height: 100%; padding: 28px 0 0; object-fit: cover; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(122, 30, 52, .08); }
.team-photo .photo-placeholder.team-photo-img { border-radius: 16px; }
/* Cut-out portraits fill a single rounded panel: `contain` fits the whole figure
   instead of cropping the arms, and the white panel fills the transparent cut-out
   background. The frame height is set so that content box = panel minus the top
   padding matches Annelie's 700x848 exactly (400x485 + 28px headroom): her cut-out
   bleeds off its own canvas edges, so any letterboxing would expose those hard edges
   inside the rounded corners. Julandri is a narrower crop and floats on the white. */
.team-photo .team-photo-img.photo-fit { object-fit: contain; object-position: bottom; }
.team-text { margin-top: 100px; }
.team-name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: -.4px; margin: 0; color: #2F2B2C; }
.team-role { font-size: 13px; font-weight: 600; color: #7A1E34; margin-top: 8px; letter-spacing: .2px; }
.team-meta { display: flex; flex-wrap: wrap; gap: 0 34px; margin-top: 22px; padding: 18px 0; border-top: 1px solid #EEE7E8; border-bottom: 1px solid #EEE7E8; }
.team-meta > div { padding: 4px 0; }
.team-meta dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #A8969B; margin: 0; }
.team-meta dd { font-size: 13px; font-weight: 600; color: #2F2B2C; margin: 5px 0 0; }
.team-bio p { margin: 0 0 14px; }
.team-bio p:last-child { margin-bottom: 0; }
.team-row.rev { flex-direction: row-reverse; }
.team-quote { border-left: 3px solid #7A1E34; padding-left: 20px; margin-top: 20px; }
.team-quote p { margin: 0; color: #2F2B2C; }

/* ---------- Philosophy (why patients keep choosing us) ---------- */
#philosophy { padding: 120px 0; }
.philo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 90px; align-items: start; }
.philo-title { font-family: 'Manrope', sans-serif; font-size: 38px; font-weight: 800; line-height: 1.25; letter-spacing: -.5px; color: #2F2B2C; margin: 24px 0 0; }
.philo-title span { display: block; color: #7A1E34; }
.philo-intro { color: rgba(47, 43, 44, .72); font-size: 15px; line-height: 1.85; margin: 24px 0 0; max-width: 415px; }
.philo-img { width: 100%; height: 570px; object-fit: cover; border-radius: 16px; margin-top: 44px; box-shadow: 0 18px 44px rgba(122, 30, 52, .12); }

.philo-points { list-style: none; margin: 0; padding: 24px 0 0; }
.philo-points li { display: flex; gap: 30px; padding: 26px 0; border-bottom: 1px solid #EEE7E8; }
.philo-points li:first-child { padding-top: 0; }
.philo-points li:last-child { border-bottom: none; }
.philo-num { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: #C98A92; line-height: 1.45; flex-shrink: 0; letter-spacing: .5px; }
.philo-points h3 { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; color: #2F2B2C; margin: 0; letter-spacing: -.1px; }
.philo-points p { color: rgba(47, 43, 44, .72); font-size: 14px; line-height: 1.75; margin: 9px 0 0; }

/* ---------- Photo placeholder (unfilled slots) ---------- */
.photo-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: #F3E5E8; color: #7A1E34; border: 2px dashed rgba(122, 30, 52, .2); text-align: center; }
.photo-placeholder span { font-size: 12px; font-weight: 500; padding: 0 10px; }

/* ---------- Treatment page header image ---------- */
.treatment-header-media { width: 380px; height: 375px; border-radius: 16px; }

/* ---------- Practices (one dedicated section each) ---------- */
.practice-intro { max-width: 620px; margin: 0 auto 72px; }
.practice-head { text-align: center; max-width: 640px; margin: 0 auto; }
.practice-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 28px; color: #2F2B2C; margin: 8px 0 0; letter-spacing: -.4px; }
.practice-addr { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; transition: color .2s ease; }
.practice-actions { display: inline-flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.practice-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px; }
.practice-photos { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; height: 420px; }
.practice-photos > .facility-frame, .practice-photos > .photo-placeholder { height: 100%; min-height: 0; border-radius: 16px; }
.practice-cols .map-embed { min-height: 0; height: 420px; }
.practice-cols .map-embed iframe { min-height: 0; }
.facility-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 14px 36px rgba(122, 30, 52, .10); min-width: 0; background: #F9F4F3; } /* tint sits behind the photo so a slow load shows brand colour, not white */
.facility-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.facility-frame:hover img { transform: scale(1.04); }

/* BNAP section (treatment sub-pages): pinned background */
#bnap { background: #F8F1F2; }

/* ---------- Medical aids banner ---------- */
/* Slim reassurance band between the white practices sections and the canvas
   contact section. Deliberately NOT .sect: it is a banner, not a section, so it
   uses a shorter rhythm and the white-card idiom already used by .stats-bar. */
.medical-aids { padding: 56px 0; }
.ma-banner { display: flex; flex-direction: column; gap: 24px; max-width: 860px; margin: 0 auto; background: #fff; border-radius: 18px; box-shadow: 0 14px 36px rgba(122, 30, 52, .08); padding: 28px 40px; }
.ma-top { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ma-icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: #7A1E34; color: #fff; display: flex; align-items: center; justify-content: center; }
.ma-title { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.4px; color: #2F2B2C; margin: 0; }
.ma-sub { font-size: 15px; line-height: 1.7; color: rgba(47, 43, 44, .72); margin: 4px 0 0; }
.ma-progs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(122, 30, 52, .12); }
.ma-prog { display: flex; gap: 14px; text-decoration: none; color: inherit; border-radius: 12px; padding: 10px; margin: -10px; transition: background .18s ease; }
.ma-prog:hover { background: rgba(122, 30, 52, .04); }
.ma-prog-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(122, 30, 52, .08); color: #7A1E34; display: flex; align-items: center; justify-content: center; }
.ma-prog-copy { display: block; }
.ma-prog-title { display: block; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: #2F2B2C; }
.ma-prog-sub { display: block; font-size: 13.5px; line-height: 1.65; color: rgba(47, 43, 44, .72); margin-top: 4px; }
.ma-prog-link { display: block; font-size: 13px; font-weight: 600; color: #7A1E34; margin-top: 8px; }
.ma-prog:hover .ma-prog-link { text-decoration: underline; }

/* ---------- Appointment / booking ---------- */
#appointment { padding-bottom: 150px; overflow: hidden; background: #FCFAF8; }
/* Soft depth behind the closing card: palette plum at very low alpha */
#appointment::before { content: ''; position: absolute; width: 620px; height: 620px; border-radius: 50%; top: -180px; right: -170px; background: radial-gradient(circle, rgba(122, 30, 52, .10) 0%, rgba(122, 30, 52, 0) 68%); pointer-events: none; }
#appointment::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; bottom: -200px; left: -150px; background: radial-gradient(circle, rgba(122, 30, 52, .08) 0%, rgba(122, 30, 52, 0) 68%); pointer-events: none; }
/* ---------- Contact section (form + details panel) ---------- */
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: stretch; margin-top: 48px; }
.contact-form { background: #fff; border-radius: 20px; padding: 38px; box-shadow: 0 18px 48px rgba(122, 30, 52, .10); display: flex; flex-direction: column; gap: 18px; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: #2F2B2C; margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; font-family: 'Inter', sans-serif; font-size: 14px; color: #2F2B2C; background: #fff; border: 1px solid #E8DFE1; border-radius: 10px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { resize: vertical; min-height: 118px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(47, 43, 44, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #7A1E34; box-shadow: 0 0 0 3px rgba(122, 30, 52, .08); }
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { font-size: 13px; margin: 2px 0 0; color: rgba(47, 43, 44, .72); }

.contact-panel { background: #7A1E34; color: #fff; border-radius: 20px; padding: 38px; display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; }
.contact-panel > *:not(.contact-watermark) { position: relative; z-index: 1; }
.contact-watermark { position: absolute; right: -46px; bottom: -46px; width: 250px; height: auto; opacity: .12; filter: brightness(0) invert(1); pointer-events: none; z-index: 0; }
.contact-panel-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.contact-social .social-row { margin-top: 12px; }
.contact-panel-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.2px; color: #fff; margin: 0 0 2px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-ico { width: 40px; height: 40px; border-radius: 50%; background: #F9F4F3; color: #7A1E34; flex-shrink: 0; }
.contact-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #E0BFC7; }
.contact-val { display: block; font-size: 14px; color: #fff; margin-top: 3px; line-height: 1.55; }
a.contact-val:hover { color: #E0BFC7; }
.contact-panel .tbd { color: #E8C7CD; }
.btn-light { background: #fff; color: #7A1E34; align-self: flex-start; margin-top: 6px; }
.btn-light:hover { background: #F3E5E8; color: #7A1E34; }

.booking-panel { background: #fff; border-radius: 22px; box-shadow: 0 18px 48px rgba(122, 30, 52, .10); padding: 52px; position: relative; z-index: 1; }
.booking-cta { max-width: 660px; margin: 0 auto; text-align: center; padding: 56px; }
.booking-cta .sect-intro, .booking-cta .lead { margin-left: auto; margin-right: auto; }
.booking-cta .quick-contact { text-align: left; }
.qcontact-row { flex-wrap: wrap; }
.qcontact-row .qrow { color: rgba(47, 43, 44, .72); }
.qcontact-row a.qrow:hover { color: #7A1E34; }
.crit-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.crit-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.65; color: rgba(47, 43, 44, .72); }
.crit-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #7A1E34; }
@media (max-width: 560px) { .crit-list { grid-template-columns: 1fr; } }
.quick-contact { background: #F8F1F2; border: 1px solid #E8DFE1; border-radius: 14px; padding: 22px 26px; margin-top: 30px; }
.bnap-badge { width: 96px; height: 96px; flex-shrink: 0; }
.qrow a:hover { color: #7A1E34; }
.map-embed { border-radius: 14px; overflow: hidden; min-height: 420px; box-shadow: 0 10px 30px rgba(122, 30, 52, .08); }
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 420px; }

/* ---------- Footer ---------- */
.foot { position: relative; }
.foot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #7A1E34, #C98A92 55%, #7A1E34); }
.foot .footer-cols { justify-content: flex-end; gap: 52px; }
.foot .wrap.fx { gap: 72px; }
.foot .footer-bottom { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .10); color: rgba(201, 189, 192, .6); letter-spacing: .3px; }

/* ---------- Scroll reveal (classes added by JS; no-JS stays visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }
  .reveal.in { opacity: 1; transform: translateY(0); }
}

/* ---------- WhatsApp floating CTA ---------- */
.whatsapp-fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); z-index: 100; transition: transform .15s ease; }
.whatsapp-fab:hover { transform: scale(1.08); }
/* Flex centres the glyph's bounding box, but the speech-bubble tail extends that
   box downward, which lifts the bubble's circle ~1px above the button's centre
   and leaves visibly more green below it than above. Nudge it back down so the
   two circles are concentric. */
.whatsapp-fab svg { transform: translateY(1px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .site-header nav { position: fixed; inset: 0 0 0 auto; width: min(280px, 80%); height: 100vh; background: #fff; flex-direction: column; align-items: flex-start; padding: 90px 32px 32px; gap: 20px; box-shadow: -10px 0 30px rgba(0, 0, 0, .1); transform: translateX(100%); transition: transform .25s ease; z-index: 50; }
  .site-header nav.open { transform: translateX(0); }
  .nav-close { display: flex; position: absolute; top: 14px; right: 14px; }
  .nav-toggle { display: block; }
  .site-header { padding: 14px 0; }
  .logo-link img { height: 60px; }
  .site-header.scrolled { padding: 10px 0; }
  .site-header.scrolled .logo-link img { height: 50px; }

  .hero { flex-direction: column; align-items: center; }
  .hero-copy { max-width: none; padding-bottom: 32px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-badge { width: 68px; height: 68px; }
  /* The hero cutout is nearly square (1200x1101) but sat in a fixed 320px box
     still carrying the desktop side insets, leaving it only ~216-286px of width.
     `contain` then fitted it to that width and centred it, so up to ~120px of
     dead space was split above and below, the lower half being the gap before
     the stats card. Give it the full width and anchor it to the bottom, so what
     slack remains sits above, next to the copy, where it reads as spacing. */
  .hero-media { width: 100%; height: 300px; flex: none; }
  .hero-media .photo { inset: 0 0 0 24px; }
  /* Overlap the card onto the photo as the desktop layout does (-50px there),
     which closes the gap and tucks the cutout's hard bottom edge under the card. */
  .stats-bar-wrap { margin-top: -20px; }
  .stats-bar { flex-direction: column; gap: 24px; }
  .statitem.divider { border-left: none; border-right: none; border-top: 1px solid #EEE7E8; border-bottom: 1px solid #EEE7E8; padding: 20px 0; }

  #about .wrap { flex-direction: column; }
  .about-media { width: 100%; height: 300px; }

  .motto-lead { font-size: 18px; }
  .motto-row { flex-direction: column; gap: 16px; margin-top: 8px; }
  .motto-script { font-size: 31px; }
  .motto-stamp { width: 72px; }

  #services .grid, .reviews-grid { grid-template-columns: 1fr !important; }
  .card-grid-3 { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }

  .sect-intro { font-size: 17px; }
  .process-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 44px; }
  .treat-body { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; }
  .treat-media { height: 300px; }
  .treat-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  #bnap .quick-contact.jb { flex-direction: column; align-items: stretch !important; }
  .bnap-badge { width: 72px; height: 72px; }

  .team-row, .team-row.rev { flex-direction: column; gap: 24px; }
  .team-photo { width: 306px; height: 391px; max-width: 100%; margin: 0 auto 20px; }
  .team-photo .team-photo-img { padding-top: 20px; }
  .team-text { margin-top: 0; }

  .deco-dots { display: none; }
  .orb { transform: scale(.55); }
  .float-badge { right: 8px; bottom: 20px; }
  .booking-panel { padding: 30px 22px; }
  .booking-cta { padding: 32px 22px; }
  #appointment { padding-bottom: 70px; }
  .contact-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
  .contact-form, .contact-panel { padding: 26px; }

  .practice-intro { margin-bottom: 44px; }
  .practice-cols { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .practice-photos { height: auto; }
  .practice-photos > .facility-frame, .practice-photos > .photo-placeholder { height: 220px; }
  .practice-cols .map-embed { height: 300px; }
  .qcontact-row { flex-direction: column; align-items: flex-start; gap: 14px; }

  .team-meta { gap: 0 26px; }
  .team-name { font-size: 25px; }

  #philosophy { padding: 70px 0; }
  .philo-grid { grid-template-columns: 1fr; gap: 44px; }
  .philo-title { font-size: 32px; }
  .philo-intro { max-width: none; }
  .philo-img { height: 400px; margin-top: 36px; }
  .philo-points { padding-top: 0; }

  .treatment-intro-row { flex-direction: column; }
  .treatment-header-media { width: 100%; height: 290px; margin-bottom: 32px; }

  .foot .wrap.fx { flex-direction: column; gap: 40px; }
  .foot .footer-cols { flex-direction: column; justify-content: flex-start; gap: 32px; }
}

@media (max-width: 640px) {
  .sect { padding: 64px 0; }
  .h2 { font-size: 28px; }
  .wrap { padding: 0 20px; }
  .statbig { font-size: 30px; }
  .philo-title { font-size: 28px; }
  .philo-img { height: 340px; }
  .team-meta > div { flex: 0 0 calc(50% - 13px); }
  .field-2 { grid-template-columns: 1fr; }
  .treat-grid { grid-template-columns: 1fr; }
  .medical-aids { padding: 44px 0; }
  .ma-banner { gap: 20px; padding: 28px 24px; }
  .ma-top { flex-direction: column; text-align: center; gap: 16px; }
  .ma-progs { grid-template-columns: 1fr; gap: 18px; }
  .ma-title { font-size: 21px; }
}

/* Long-form treatment copy: a readable measure for the SEO body text, the tick
   list used for "we commonly assist with" rundowns, and the two-column grid
   that carries the programme-component rows under "How We Can Help". */
.prose { max-width: 720px; margin: 8px auto 0; }
.prose p { color: rgba(47, 43, 44, .72); font-size: 16px; line-height: 1.75; margin: 18px 0 0; }
.cond-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cond-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.65; color: rgba(47, 43, 44, .72); }
.cond-list li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 5px; height: 9px; border: solid #7A1E34; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; max-width: 900px; margin: 44px auto 0; }
@media (max-width: 900px) {
  .help-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Treatment pages hold paragraph copy to two sizes: 16px for primary body text
   and 14px for supporting text. .small and .fs13 stay at 12/13px elsewhere on
   the site, so these overrides are scoped to the treatment pages only. */
.treatment-page p.small { font-size: 14px; }
.treatment-page p.fs13 { font-size: 14px; }