/* ==========================================================================
   Elegance Plastic Surgery — theme.css
   Palette: bg #F7F5EF · ink #22261C · olive #3D4630 / #636E48 · sage #C3CBAA
            sand #E8E2D4 · panel #FFFDF8 · gold #8A6A3C
   Fonts:   Marcellus (display) · Jost (body)
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: #F7F5EF; font-family: 'Jost', system-ui, sans-serif; color: #22261C; -webkit-font-smoothing: antialiased; }
a { color: #636E48; text-decoration: none; }
a:hover { color: #3D4630; }
img { max-width: 100%; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(138,106,60,.5); } 70% { box-shadow: 0 0 0 16px rgba(138,106,60,0); } 100% { box-shadow: 0 0 0 0 rgba(138,106,60,0); } }
@keyframes lineIn { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes underlineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-2%,-1.5%,0) scale(1.12); } }

.reveal { animation: rise .8s both; }
@supports (animation-timeline: view()) {
  .reveal { animation-timeline: view(); animation-range: entry 0% cover 26%; }
}

/* ---------- Floating buttons ---------- */
.float-btns { position: fixed; right: 20px; bottom: 26px; z-index: 90; display: flex; flex-direction: column; gap: 14px; }
.float-btn { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.float-btn:hover { transform: scale(1.06); }
.float-call { background: #3D4630; color: #F7F5EF; box-shadow: 0 12px 26px rgba(34,38,28,.28); }
.float-call:hover { background: #22261C; color: #fff; }
.float-wa { background: #25D366; color: #fff; box-shadow: 0 12px 26px rgba(37,211,102,.32); }
.float-wa:hover { background: #1EBE5A; color: #fff; }

/* ---------- Utility bar ---------- */
.u-bar { background: #3D4630; color: #E8E2D4; font-size: 13px; letter-spacing: .02em; }
.u-bar-in { padding-top: 9px; padding-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.u-left, .u-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.u-right { gap: 16px; }
.u-bar a { color: #E8E2D4; display: flex; align-items: center; gap: 7px; }
.u-bar a:hover { color: #fff; }
.u-emergency { background: #8A6A3C; color: #fff !important; padding: 5px 13px; border-radius: 999px; font-weight: 500; white-space: nowrap; animation: pulseRing 2.6s infinite; }
.u-emergency:hover { background: #6F5430; }
.u-book { background: #E8E2D4; color: #3D4630 !important; padding: 5px 15px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.u-book:hover { background: #fff; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(247,245,239,.94); backdrop-filter: blur(12px); border-bottom: 1px solid #E2DECF; }
.head-in { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 46px; width: auto; display: block; }
.main-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; font-size: 14.5px; }
.main-nav a { display: flex; align-items: center; gap: 6px; padding: 10px 13px; color: #22261C; border-radius: 6px; white-space: nowrap; }
.main-nav a:hover { background: #EDEAE0; color: #3D4630; }
.main-nav .nav-cta { margin-left: 10px; background: #636E48; color: #fff; padding: 11px 20px; border-radius: 999px; font-weight: 500; }
.main-nav .nav-cta:hover { background: #3D4630; color: #fff; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: #3D4630; margin: 5px 0; transition: transform .3s, opacity .3s; }
.nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile bottom bar ---------- */
.m-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #22261C; }
.m-bar a { flex: 1; text-align: center; color: #F7F5EF; padding: 14px 6px; font-size: 14.5px; font-weight: 500; border-right: 1px solid rgba(232,226,212,.15); }
.m-bar a:last-child { border-right: 0; background: #636E48; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: #22261C; color: #F7F5EF; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 18%, #4B5539 0%, #22261C 62%); animation: drift 22s ease-in-out infinite alternate; }
.hero-in { position: relative; padding-top: 96px; padding-bottom: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; }
.hero-copy { animation: rise .9s .05s both; }
.hero-badge { display: inline-flex; align-items: center; gap: 11px; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #C3CBAA; background: rgba(195,203,170,.09); border: 1px solid rgba(195,203,170,.35); padding: 8px 17px; border-radius: 999px; margin-bottom: 28px; line-height: 1.5; white-space: nowrap; }
.hero-badge i { width: 6px; height: 6px; border-radius: 50%; background: #C3CBAA; display: block; }
.hero h1 { font-family: 'Marcellus', serif; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.04; margin: 0 0 24px; font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
.hero h1 .l1 { display: block; animation: lineIn .9s .12s cubic-bezier(.2,.7,.3,1) both; }
.hero h1 .l2 { display: block; color: #C3CBAA; font-style: italic; animation: lineIn .9s .38s cubic-bezier(.2,.7,.3,1) both; }
.hero h1 .l3 { display: block; color: #C3CBAA; font-style: italic; position: relative; animation: lineIn .9s .62s cubic-bezier(.2,.7,.3,1) both; }
.hero h1 .l3 u { position: absolute; left: .06em; bottom: .02em; width: 5.4em; height: 2px; background: rgba(195,203,170,.55); transform-origin: left; animation: underlineIn .8s 1.3s cubic-bezier(.2,.7,.3,1) both; display: block; }
.hero-sub { display: flex; align-items: flex-start; gap: 20px; max-width: 600px; margin: 0 0 32px; }
.hero-sub i { flex-shrink: 0; width: 2px; height: 74px; background: linear-gradient(#C3CBAA, rgba(195,203,170,0)); display: block; margin-top: 6px; }
.hero-sub p { font-size: 18.5px; line-height: 1.7; color: #CFD3C2; margin: 0; text-wrap: pretty; }
.hero-sub strong { font-weight: 500; color: #F7F5EF; }
.hero-proof { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-proof .chip { display: flex; align-items: center; gap: 9px; background: rgba(247,245,239,.07); border: 1px solid rgba(232,226,212,.18); border-radius: 999px; padding: 9px 16px; white-space: nowrap; font-size: 14.5px; color: #E4E6DA; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-light { background: #E8E2D4; color: #22261C; padding: 16px 30px; border-radius: 999px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.btn-light:hover { background: #fff; color: #22261C; }
.btn-ghost { border: 1px solid rgba(232,226,212,.4); color: #F7F5EF; padding: 16px 28px; border-radius: 999px; font-size: 16px; white-space: nowrap; }
.btn-ghost:hover { background: rgba(232,226,212,.12); color: #fff; }
.hero-em { margin-top: 36px; display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: #D9C1A6; }
.hero-em i { width: 9px; height: 9px; border-radius: 50%; background: #8A6A3C; display: block; animation: pulseRing 2.4s infinite; flex-shrink: 0; }
.hero-em a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.hero-visual { position: relative; animation: rise 1s .18s both; }
.hero-frame { position: absolute; inset: -14px -14px 34px 26px; border: 1px solid rgba(195,203,170,.35); border-radius: 220px 220px 24px 24px; }
.hero-img { position: relative; width: 100%; aspect-ratio: 3/3.4; border-radius: 220px 220px 20px 20px; overflow: hidden; background: #2E3325; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card { position: absolute; left: -28px; bottom: 24px; background: #F7F5EF; color: #22261C; padding: 16px 22px; border-radius: 14px; box-shadow: 0 22px 44px rgba(0,0,0,.28); }
.hero-card b { font-family: 'Marcellus', serif; font-size: 19px; line-height: 1.2; font-weight: 400; display: block; }
.hero-card span { font-size: 12.5px; color: #6E7358; letter-spacing: .04em; margin-top: 4px; display: block; }
.marquee-band { position: relative; border-top: 1px solid rgba(232,226,212,.16); overflow: hidden; background: rgba(0,0,0,.18); }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; padding: 14px 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #A9B295; }
.marquee-track span { padding: 0 26px; white-space: nowrap; }

/* ---------- Image placeholder (shown until a real image is uploaded in admin) ---------- */
.img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; background: linear-gradient(135deg, #E8E2D4, #D6D9C4); color: #6E7358; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }

/* ---------- Section headers ---------- */
.kicker { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #8A8F76; margin-bottom: 14px; }
.sec-h2 { font-family: 'Marcellus', serif; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin: 0; font-weight: 400; text-wrap: balance; }
.sec-h2 em { color: #636E48; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 44px; }
.sec-head p { font-size: 16px; line-height: 1.7; color: #5C6152; max-width: 400px; margin: 0; text-wrap: pretty; }
.link-under { border-bottom: 1px solid #B7BFA2; padding-bottom: 3px; font-size: 15.5px; letter-spacing: .05em; }

/* ---------- Specialty buckets ---------- */
.buckets-sec { padding-top: 96px; padding-bottom: 20px; }
.bucket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.bucket { display: block; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 16px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; color: #22261C; }
.bucket:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,38,28,.09); border-color: #C7CDB2; color: #22261C; }
.bucket-img { position: relative; width: 100%; aspect-ratio: 16/9; background: #E8E2D4; overflow: hidden; }
.bucket-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bucket-body { padding: 26px 28px; }
.bucket-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.bucket-num { font-family: 'Marcellus', serif; font-size: 15px; color: #B0B79A; }
.bucket-count { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8A8F76; }
.bucket h3 { font-family: 'Marcellus', serif; font-size: 25px; line-height: 1.22; margin: 0 0 12px; font-weight: 400; color: #22261C; }
.bucket p { font-size: 15px; line-height: 1.65; color: #5C6152; margin: 0 0 18px; text-wrap: pretty; }
.bucket-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.bucket-tags span { font-size: 12.5px; color: #5C6152; background: #F1EEE3; border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.bucket-more { font-size: 14px; letter-spacing: .06em; color: #636E48; }

/* ---------- Emergency band ---------- */
.em-band-sec { margin-top: 64px; }
.em-band { background: #22261C; border-radius: 20px; padding: 44px 46px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; align-items: center; color: #F7F5EF; position: relative; overflow: hidden; }
.em-band > div:not(.em-glow) { position: relative; }
.em-band > .em-glow { position: absolute; left: -80px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(138,106,60,.28); filter: blur(30px); pointer-events: none; }
.em-kicker { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #E9B6AB; margin-bottom: 14px; }
.em-band h2 { font-family: 'Marcellus', serif; font-size: clamp(27px, 3vw, 38px); line-height: 1.15; margin: 0 0 14px; font-weight: 400; }
.em-band p { font-size: 16.5px; line-height: 1.7; color: #CFD3C2; margin: 0; max-width: 540px; text-wrap: pretty; }
.em-actions { display: flex; flex-direction: column; gap: 12px; }
.em-call { background: #8A6A3C; color: #fff; padding: 18px 26px; border-radius: 12px; font-size: 19px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.em-call:hover { background: #6F5430; color: #fff; }
.em-wa { border: 1px solid rgba(232,226,212,.35); color: #F7F5EF; padding: 16px 26px; border-radius: 12px; font-size: 15.5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.em-wa:hover { background: rgba(232,226,212,.12); color: #fff; }
.em-note { font-size: 13px; color: #9FA88B; padding-left: 4px; }

/* ---------- Doctor ---------- */
.doctor-sec { padding-top: 96px; padding-bottom: 96px; }
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.doctor-visual { position: relative; }
.doctor-visual i { position: absolute; inset: 20px -20px -20px 20px; background: #E8E2D4; border-radius: 18px; display: block; }
.doctor-visual img { position: relative; width: 100%; display: block; border-radius: 18px; object-fit: cover; aspect-ratio: 4/4.4; }
.doctor-copy h2 { font-family: 'Marcellus', serif; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; margin: 0 0 20px; font-weight: 400; }
.doctor-copy .bio p { font-size: 17px; line-height: 1.75; color: #42473A; margin: 0 0 18px; text-wrap: pretty; }
.cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 12px 0 32px; }
.cred { display: flex; gap: 11px; align-items: flex-start; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 11px; padding: 14px 16px; transition: background .3s, border-color .3s; }
.cred:hover { background: #F4F1E7; border-color: #C7CDB2; }
.cred i { color: #636E48; font-size: 15px; line-height: 1.5; font-style: normal; }
.cred span { font-size: 15px; line-height: 1.5; color: #42473A; }
.stats-band { margin-top: 72px; border-top: 1px solid #E2DECF; border-bottom: 1px solid #E2DECF; padding: 44px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.stat { text-align: center; }
.stat b { font-family: 'Marcellus', serif; font-size: 46px; line-height: 1; color: #3D4630; font-weight: 400; display: block; }
.stat span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #8A8F76; margin-top: 12px; display: block; }

/* ---------- Cases ---------- */
.cases-sec { background: #EFEBDF; padding: 92px 0; }
.case-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.case-filters button { font-family: 'Jost', sans-serif; font-size: 14px; padding: 9px 17px; border-radius: 999px; cursor: pointer; white-space: nowrap; border: 1px solid #D7D2C0; background: transparent; color: #42473A; }
.case-filters button:hover { border-color: #636E48; }
.case-filters button.active { background: #3D4630; color: #F7F5EF; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; }
.case-card { background: #FFFDF8; border: 1px solid #E1DCCB; border-radius: 14px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.case-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(34,38,28,.10); }
.case-media { aspect-ratio: 4/3; background: linear-gradient(135deg, #DCD8C7, #C9CDB6); display: flex; align-items: center; justify-content: center; color: #6E7358; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-body { padding: 16px 18px 18px; }
.case-body b { font-size: 16px; line-height: 1.35; color: #22261C; font-weight: 400; display: block; }
.case-body span { font-size: 13px; color: #8A8F76; margin-top: 6px; display: block; }
.case-note { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.case-note p { font-size: 13.5px; color: #7A7F68; margin: 0; max-width: 640px; text-wrap: pretty; }

/* ---------- Top treatments ---------- */
.treat-sec { padding: 92px 0; }
.treat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.treat-card { display: block; border: 1px solid #E5E1D2; background: #FFFDF8; border-radius: 13px; overflow: hidden; color: #22261C; transition: box-shadow .35s, border-color .35s, transform .35s cubic-bezier(.2,.7,.3,1); }
.treat-card:hover { border-color: #C7CDB2; box-shadow: 0 18px 34px rgba(34,38,28,.10); transform: translateY(-5px); color: #22261C; }
.treat-img { position: relative; width: 100%; aspect-ratio: 4/3; background: #E8E2D4; overflow: hidden; }
.treat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.treat-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: 16px; }
.treat-name i { opacity: .55; font-style: normal; }

/* ---------- Testimonials ---------- */
.testi-sec { background: #3D4630; color: #F7F5EF; padding: 92px 0; }
.testi-sec .kicker { color: #B0B79A; }
.testi-sec .sec-h2 em { color: #C3CBAA; }
.testi-score { text-align: right; }
.testi-score .stars { font-size: 15px; color: #C3CBAA; }
.testi-score b { font-family: 'Marcellus', serif; font-size: 30px; margin-top: 6px; font-weight: 400; display: block; }
.testi-score span { font-size: 13px; color: #A9B295; }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 20px; }
.testi { margin: 0; background: rgba(247,245,239,.06); border: 1px solid rgba(232,226,212,.18); border-radius: 16px; padding: 30px 28px; }
.testi .stars { font-size: 14px; color: #C3CBAA; margin-bottom: 16px; }
.testi blockquote { margin: 0 0 22px; font-size: 16.5px; line-height: 1.75; color: #E4E6DA; text-wrap: pretty; }
.testi figcaption { font-size: 14px; color: #A9B295; }

/* ---------- Costs ---------- */
.costs-sec { padding: 92px 0; }
.costs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: start; }
.costs-copy h2 { margin-bottom: 18px; }
.costs-copy p { font-size: 16.5px; line-height: 1.75; color: #42473A; margin: 0 0 20px; text-wrap: pretty; }
.cost-rows { display: grid; gap: 12px; }
.cost-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; align-items: center; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 12px; padding: 18px 22px; transition: transform .3s, border-color .3s; }
.cost-row:hover { transform: translateX(3px); border-color: #C7CDB2; }
.cost-name { font-size: 16.5px; color: #22261C; }
.cost-band { font-size: 16px; color: #3D4630; font-family: 'Marcellus', serif; }
.cost-cover { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #7A7F68; text-align: right; }

/* ---------- Guides ---------- */
.guides-sec { background: #EFEBDF; padding: 92px 0; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 20px; }
.guide-card { display: block; background: #FFFDF8; border: 1px solid #E1DCCB; border-radius: 16px; padding: 28px; transition: transform .35s, box-shadow .35s; color: #22261C; }
.guide-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(34,38,28,.10); color: #22261C; }
.guide-tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8A8F76; margin-bottom: 14px; }
.guide-card h3 { font-family: 'Marcellus', serif; font-size: 23px; line-height: 1.28; margin: 0 0 12px; font-weight: 400; color: #22261C; }
.guide-card p { font-size: 15px; line-height: 1.65; color: #5C6152; margin: 0 0 18px; text-wrap: pretty; }
.guide-meta { font-size: 13px; color: #8A8F76; }

/* ---------- YouTube videos ---------- */
.videos-sec { padding: 92px 0 20px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.video-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .35s, box-shadow .35s; }
.video-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(34,38,28,.10); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: #22261C; }
.video-thumb img, .video-thumb iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.video-play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; text-indent: 4px; }
.video-play::before { content: ''; position: absolute; z-index: -1; width: 62px; height: 62px; border-radius: 50%; background: rgba(61,70,48,.85); }
.video-title { padding: 14px 18px; font-size: 15.5px; color: #22261C; }

/* ---------- FAQ ---------- */
.faq-sec { padding: 92px 0; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro h2 { margin-bottom: 18px; }
.faq-intro p { font-size: 16.5px; line-height: 1.75; color: #42473A; margin: 0 0 22px; text-wrap: pretty; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 12px; overflow: hidden; }
.faq-item button { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; text-align: left; font-family: 'Jost', sans-serif; font-size: 17px; line-height: 1.45; color: #22261C; background: none; border: 0; padding: 20px 22px; cursor: pointer; }
.faq-item button:hover { background: #F4F1E7; }
.faq-sign { color: #636E48; font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.faq-a { display: none; margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.75; color: #5C6152; max-width: 64ch; text-wrap: pretty; }
.faq-item.open .faq-a { display: block; animation: fade .25s ease both; }

/* ---------- Contact ---------- */
.contact-sec { padding: 92px 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; }
.centre-cards { display: grid; gap: 14px; margin-bottom: 26px; }
.centre { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 22px 24px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.centre:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34,38,28,.09); border-color: #C7CDB2; }
.centre b { font-family: 'Marcellus', serif; font-size: 21px; color: #3D4630; margin-bottom: 8px; font-weight: 400; display: block; }
.centre .addr { font-size: 15.5px; line-height: 1.7; color: #42473A; }
.centre .hours { font-size: 14px; color: #7A7F68; margin-top: 10px; }
.contact-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-olive { background: #636E48; color: #fff; padding: 15px 26px; border-radius: 999px; font-size: 15.5px; white-space: nowrap; }
.btn-olive:hover { background: #3D4630; color: #fff; }
.btn-line { border: 1px solid #C7CDB2; color: #3D4630; padding: 15px 26px; border-radius: 999px; font-size: 15.5px; white-space: nowrap; }
.btn-line:hover { background: #EDEAE0; color: #3D4630; }
.enquiry-box { background: #22261C; border-radius: 18px; padding: 38px 36px; color: #F7F5EF; }
.enquiry-box h3 { font-family: 'Marcellus', serif; font-size: 28px; margin: 0 0 8px; font-weight: 400; }
.enquiry-box .sub { font-size: 15px; line-height: 1.65; color: #B9BEA9; margin: 0 0 26px; }
.enquiry-form { display: grid; gap: 12px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { font-family: 'Jost', sans-serif; font-size: 15.5px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(232,226,212,.25); background: rgba(247,245,239,.06); color: #F7F5EF; outline: none; width: 100%; }
.enquiry-form option { color: #22261C; }
.enquiry-form textarea { resize: vertical; }
.enquiry-form button { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; padding: 16px; border-radius: 10px; border: 0; background: #E8E2D4; color: #22261C; cursor: pointer; }
.enquiry-form button:hover { background: #fff; }
.enquiry-note { font-size: 12.5px; color: #8E9480; line-height: 1.6; }
.form-ok { background: rgba(195,203,170,.15); border: 1px solid rgba(195,203,170,.4); color: #E4E6DA; border-radius: 10px; padding: 14px 16px; font-size: 15px; }
.form-err { background: rgba(224,106,84,.12); border: 1px solid rgba(224,106,84,.4); color: #F3C3B9; border-radius: 10px; padding: 12px 16px; font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band { background: #EFE7E1; padding: 110px 0 96px; }
.cta-band-in { text-align: center; }
.cta-eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 17px; color: #5C6152; margin-bottom: 26px; flex-wrap: wrap; }
.cta-eyebrow i { display: block; width: 16px; height: 16px; border: 2px dotted #A8886F; border-radius: 50%; }
.cta-band h2 { font-family: 'Marcellus', serif; font-size: clamp(28px, 4.2vw, 54px); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: #3D4630; margin: 0 0 48px; font-weight: 400; text-wrap: balance; }
.cta-pill { background: #FFFDF8; border-radius: 44px; padding: 22px 30px; display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: center; justify-content: space-between; box-shadow: 0 18px 40px rgba(61,70,48,.08); text-align: left; }
.cta-contact { display: flex; align-items: center; gap: 16px; color: #22261C; flex: 1 1 230px; }
.cta-contact:hover { color: #3D4630; }
.cta-contact .ico { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: #3D4630; color: #F7F5EF; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.cta-contact .lbl { display: block; font-size: 14px; color: #8A8F76; letter-spacing: .04em; }
.cta-contact .val { display: block; font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; margin-top: 3px; }
.cta-btn { flex: 0 0 auto; margin-left: auto; border: 1px solid #C7CDB2; border-radius: 999px; padding: 18px 40px; font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; white-space: nowrap; }
.cta-btn:hover { background: #3D4630; color: #F7F5EF; }

/* ---------- Footer ---------- */
.site-footer { background: #22261C; color: #CFD3C2; padding: 72px 0 0; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 44px; }
.foot-logo { height: 44px; width: auto; display: block; margin-bottom: 18px; filter: brightness(1.08); }
.foot-about { font-size: 15px; line-height: 1.75; margin: 0 0 18px; color: #A9B295; max-width: 330px; text-wrap: pretty; }
.foot-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.foot-socials a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(232,226,212,.25); border-radius: 50%; color: #CFD3C2; }
.foot-socials a:hover { background: rgba(232,226,212,.12); color: #fff; }
.foot-title { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #8E9480; margin-bottom: 16px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a { font-size: 15px; color: #CFD3C2; }
.foot-links a:hover { color: #fff; }
.foot-base { margin-top: 56px; padding-top: 22px; padding-bottom: 30px; border-top: 1px solid rgba(232,226,212,.14); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: #8E9480; }
.foot-base a { color: #CFD3C2; }
.foot-base a:hover { color: #fff; }
.foot-legal a { color: #8E9480; }
.foot-legal a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1179px) {
  .nav-burger { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #FFFDF8; border-bottom: 1px solid #E2DECF; flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 4px; box-shadow: 0 24px 40px rgba(34,38,28,.12); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 12px; font-size: 16px; border-radius: 8px; }
  .main-nav .nav-cta { margin-left: 0; text-align: center; justify-content: center; }
  .site-header { position: sticky; }
  .m-bar { display: flex; }
  body { padding-bottom: 50px; }
  .faq-intro { position: static; }
  .hero-card { left: 10px; }
  .u-mail { display: none !important; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .hero-in { padding-top: 64px; padding-bottom: 60px; gap: 40px; }
  .u-left a:first-child { display: none; }
  .em-band { padding: 32px 24px; }
  .enquiry-box { padding: 28px 22px; }
  .cta-pill { border-radius: 24px; }
  .float-btns { bottom: 66px; }
}

/* ==========================================================================
   Inner pages (Phase 2): pillar, treatment, about, gallery, costs, contact,
   guides, policies
   ========================================================================== */
/* dark page hero with breadcrumbs */
.page-hero { position: relative; overflow: hidden; background: #22261C; color: #F7F5EF; }
.page-hero .hero-bg { position: absolute; inset: 0; background: radial-gradient(115% 95% at 78% 18%, #4B5539 0%, #22261C 60%); animation: drift 24s ease-in-out infinite alternate; }
.crumbs { position: relative; font-size: 13.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 22px; }
.crumbs a, .crumbs span { white-space: nowrap; }
.page-hero .crumbs { color: #A9B295; }
.page-hero .crumbs a { color: #A9B295; }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .crumbs .cur { color: #E8E2D4; }
.crumbs-lt { font-size: 13.5px; color: #7A7F68; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.crumbs-lt .cur { color: #3D4630; }
.page-hero-in { position: relative; padding: 48px 0 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; }
.ph-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #C3CBAA; border: 1px solid rgba(195,203,170,.35); padding: 7px 16px; border-radius: 999px; margin-bottom: 24px; white-space: nowrap; }
.page-hero h1 { font-family: 'Marcellus', serif; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; margin: 0 0 20px; font-weight: 400; text-wrap: balance; }
.page-hero h1 em { color: #C3CBAA; }
.ph-sub { font-size: 18.5px; line-height: 1.7; color: #CFD3C2; margin: 0 0 26px; max-width: 620px; text-wrap: pretty; }
.ph-cred { font-size: 17px; letter-spacing: .02em; color: #C3CBAA; margin: 0 0 22px; }
.ph-chips { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: #A9B295; margin-top: 30px; }
.ph-img-round { position: relative; }
.ph-img-round i { position: absolute; inset: -14px -14px 30px 26px; border: 1px solid rgba(195,203,170,.35); border-radius: 200px 200px 22px 22px; display: block; }
.ph-img-round img { position: relative; width: 100%; display: block; border-radius: 200px 200px 20px 20px; object-fit: cover; aspect-ratio: 3/3.3; }
.ph-img-rect { position: relative; width: 100%; aspect-ratio: 4/3.2; border-radius: 20px; overflow: hidden; background: #3A4130; }
.ph-img-rect img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-stats-band { position: relative; border-top: 1px solid rgba(232,226,212,.16); background: rgba(0,0,0,.16); }
.hero-stats-in { padding: 26px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.hero-stats-in b { font-family: 'Marcellus', serif; font-size: 34px; line-height: 1; color: #F7F5EF; font-weight: 400; display: block; }
.hero-stats-in span { font-size: 12.5px; letter-spacing: .11em; text-transform: uppercase; color: #A9B295; margin-top: 9px; display: block; }

/* light hero (guides, policies, contact) */
.lt-hero h1 { font-family: 'Marcellus', serif; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; margin: 0 0 18px; font-weight: 400; text-wrap: balance; }
.lt-hero h1 em { color: #636E48; }
.lt-hero .lead { font-size: 18px; line-height: 1.7; color: #42473A; margin: 0 0 40px; max-width: 660px; text-wrap: pretty; }

/* glance strip */
.glance-strip { background: #EFEBDF; border-bottom: 1px solid #E2DECF; }
.glance-in { padding: 34px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; }
.glance-in .g-label { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: #8A8F76; margin-bottom: 8px; }
.glance-in .g-value { font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; line-height: 1.35; }

/* article layout with sticky sidebar */
.art-wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding: 76px 0 92px; }
.art-side { position: sticky; top: 118px; flex: 0 1 290px; min-width: 260px; }
.art-main { flex: 1 1 480px; min-width: 0; max-width: 820px; }
.toc-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 16px; padding: 24px 22px; }
.toc-card .t-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8A8F76; margin-bottom: 16px; }
.toc-card nav { display: flex; flex-direction: column; gap: 2px; }
.toc-card nav a { font-size: 15px; color: #42473A; padding: 9px 12px; border-radius: 8px; transition: background .25s; }
.toc-card nav a:hover { background: #F1EEE3; color: #3D4630; }
.side-cta { margin-top: 16px; background: #22261C; color: #F7F5EF; border-radius: 16px; padding: 24px 22px; }
.side-cta b { font-family: 'Marcellus', serif; font-size: 20px; line-height: 1.3; margin-bottom: 10px; font-weight: 400; display: block; }
.side-cta p { font-size: 14.5px; line-height: 1.65; color: #B9BEA9; margin: 0 0 16px; }
.side-cta .wa-btn { display: block; text-align: center; background: #25D366; color: #fff; padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.side-cta .wa-btn:hover { background: #1EBE5A; color: #fff; }
.side-note { margin-top: 16px; background: #EFEBDF; border-radius: 16px; padding: 24px 22px; }
.side-note b { font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; line-height: 1.3; margin-bottom: 10px; font-weight: 400; display: block; }
.side-note p { font-size: 14.5px; line-height: 1.7; color: #5C6152; margin: 0; }
.art-main h2 { font-family: 'Marcellus', serif; font-size: clamp(27px, 2.8vw, 36px); line-height: 1.15; margin: 0 0 16px; font-weight: 400; }
.art-main > p, .art-body p { font-size: 17px; line-height: 1.8; color: #42473A; margin: 0 0 16px; text-wrap: pretty; }
.quick-answer { background: #FFFDF8; border: 1px solid #C7CDB2; border-radius: 16px; padding: 30px 32px; margin-bottom: 44px; }
.quick-answer .qa-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8A8F76; margin-bottom: 12px; }
.quick-answer p { font-size: 19px; line-height: 1.7; color: #22261C; margin: 0; text-wrap: pretty; }
.cond-box { background: #EFEBDF; border-radius: 14px; padding: 24px 26px; margin: 26px 0 40px; }
.cond-box b { font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; margin-bottom: 12px; font-weight: 400; display: block; }
.cond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 20px; }
.cond-grid div { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.6; color: #42473A; }
.cond-grid i { color: #636E48; font-style: normal; }
.flag-list { display: grid; gap: 10px; margin-bottom: 40px; }
.flag-item { background: #FFFDF8; border: 1px solid #E5E1D2; border-left: 3px solid #8A6A3C; border-radius: 10px; padding: 16px 20px; font-size: 15.5px; line-height: 1.65; color: #42473A; }
.flag-item.olive { border-left-color: #636E48; }
.stage-list { display: grid; gap: 12px; margin-bottom: 40px; }
.stage-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 22px 24px; transition: border-color .3s, box-shadow .3s; }
.stage-card:hover { border-color: #C7CDB2; box-shadow: 0 14px 28px rgba(34,38,28,.07); }
.age-pill { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #636E48; background: #EDEAE0; border-radius: 999px; padding: 5px 12px; margin-bottom: 10px; white-space: nowrap; }
.stage-card b { font-family: 'Marcellus', serif; font-size: 20px; color: #22261C; line-height: 1.28; font-weight: 400; display: block; }
.stage-card p { font-size: 15.5px; line-height: 1.7; color: #5C6152; margin: 0; }
.step-list { display: grid; gap: 14px; margin-bottom: 40px; }
.step-row { display: flex; gap: 18px; align-items: flex-start; }
.step-num { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #3D4630; color: #E8E2D4; display: flex; align-items: center; justify-content: center; font-family: 'Marcellus', serif; font-size: 17px; }
.step-row b { font-size: 17.5px; color: #22261C; margin-bottom: 5px; font-weight: 400; display: block; }
.step-row p { font-size: 15.5px; line-height: 1.7; color: #5C6152; margin: 0; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 40px; }
.rec-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 22px 20px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.rec-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34,38,28,.09); border-color: #C7CDB2; }
.rec-card b { font-family: 'Marcellus', serif; font-size: 17px; color: #636E48; margin-bottom: 10px; font-weight: 400; display: block; }
.rec-card p { font-size: 15px; line-height: 1.7; color: #5C6152; margin: 0; }
.risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 44px; }
.risk-grid > div { font-size: 15.5px; line-height: 1.6; color: #42473A; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 10px; padding: 15px 18px; }
.byline-box { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: #EFEBDF; border-radius: 14px; padding: 22px 26px; }
.byline-box img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block; }
.byline-box .b-main { min-width: 200px; flex: 1; }
.byline-box .b-line { font-size: 15.5px; color: #22261C; }
.byline-box .b-sub { font-size: 13.5px; color: #7A7F68; margin-top: 4px; }

/* pillar page */
.glance-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.glance-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 13px; padding: 22px 24px; transition: border-color .3s, box-shadow .3s; }
.glance-card:hover { border-color: #C7CDB2; box-shadow: 0 14px 28px rgba(34,38,28,.07); }
.glance-card b { font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; margin-bottom: 8px; font-weight: 400; display: block; }
.glance-card p { font-size: 15px; line-height: 1.65; color: #5C6152; text-wrap: pretty; margin: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.cat-tile { position: relative; display: block; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: #DCD8C7; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
.cat-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(34,38,28,.16); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile .shade { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(24,28,18,.86), rgba(24,28,18,0)); pointer-events: none; }
.cat-tile .info { position: absolute; inset: auto 0 0 0; padding: 26px 26px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; pointer-events: none; }
.cat-tile .info b { font-family: 'Marcellus', serif; font-size: 26px; line-height: 1.2; color: #F7F5EF; font-weight: 400; display: block; }
.cat-tile .info span { font-size: 13.5px; color: #C3CBAA; margin-top: 7px; display: block; }
.cat-tile .arrow { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(247,245,239,.6); color: #F7F5EF; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.path-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 20px; }
.path-card { position: relative; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 16px; padding: 28px 24px 26px; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.path-card:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(34,38,28,.09); border-color: #C7CDB2; }
.path-card .p-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.path-card .p-num { font-family: 'Marcellus', serif; font-size: 34px; color: #E3E0D2; line-height: 1; }
.path-card b { font-family: 'Marcellus', serif; font-size: 21px; color: #22261C; margin-bottom: 10px; line-height: 1.25; font-weight: 400; display: block; }
.path-card p { font-size: 15px; line-height: 1.7; color: #5C6152; margin: 0; text-wrap: pretty; }
.why-band { background: #22261C; color: #F7F5EF; padding: 88px 0; }
.why-band .kicker { color: #B0B79A; }
.why-band h2 em { color: #C3CBAA; }
.pull-quote { border-left: 2px solid #6C7853; padding-left: 24px; margin-bottom: 26px; }
.pull-quote p { font-family: 'Marcellus', serif; font-size: 22px; line-height: 1.55; color: #E8EADD; margin: 0; text-wrap: pretty; }
.why-band .body-p { font-size: 16.5px; line-height: 1.75; color: #CFD3C2; margin: 0 0 16px; text-wrap: pretty; }
.who-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.who-strip img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block; }
.who-strip b { font-family: 'Marcellus', serif; font-size: 19px; color: #F7F5EF; font-weight: 400; display: block; }
.who-strip span { font-size: 13.5px; color: #A9B295; margin-top: 3px; display: block; }
.facil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(232,226,212,.16); border: 1px solid rgba(232,226,212,.16); border-radius: 16px; overflow: hidden; }
.facil-grid > div { background: #22261C; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; transition: background .3s; font-size: 15.5px; line-height: 1.5; color: #E4E6DA; }
.facil-grid > div:hover { background: #2C3125; }
.mini-stats { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.mini-stats > div { border-top: 1px solid rgba(232,226,212,.2); padding-top: 16px; }
.mini-stats b { font-family: 'Marcellus', serif; font-size: 34px; line-height: 1; color: #F7F5EF; font-weight: 400; display: block; }
.mini-stats span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #A9B295; margin-top: 9px; display: block; }
.index-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 20px; padding: 44px 44px 40px; }
.index-pill { background: #EDEAE0; color: #3D4630; border-radius: 999px; padding: 6px 14px; white-space: nowrap; font-size: 13.5px; }
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; }
.index-grid a { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #42473A; padding: 11px 14px; border-radius: 10px; transition: background .25s, transform .25s; }
.index-grid a:hover { background: #F1EEE3; color: #3D4630; transform: translateX(3px); }
.index-grid .ini { font-family: 'Marcellus', serif; font-size: 13px; color: #B0B79A; width: 16px; flex-shrink: 0; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.related-grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #E5E1D2; background: #FFFDF8; border-radius: 12px; padding: 20px 22px; font-size: 16px; color: #22261C; transition: background .3s, border-color .3s, transform .3s; }
.related-grid a:hover { background: #3D4630; color: #F7F5EF; border-color: #3D4630; transform: translateX(4px); }

/* about page */
.qual-list { display: grid; gap: 10px; margin-bottom: 44px; }
.qual-row { display: flex; gap: 16px; align-items: flex-start; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 12px; padding: 18px 22px; transition: transform .3s, border-color .3s; }
.qual-row:hover { transform: translateX(3px); border-color: #C7CDB2; }
.qual-row i { flex-shrink: 0; color: #636E48; font-size: 15px; line-height: 1.6; font-style: normal; }
.qual-row b { font-size: 16.5px; color: #22261C; font-weight: 400; display: block; }
.qual-row span { font-size: 14.5px; line-height: 1.65; color: #7A7F68; margin-top: 4px; display: block; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 22px; }
.exp-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 24px 22px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.exp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34,38,28,.09); border-color: #C7CDB2; }
.exp-card b { font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; margin-bottom: 12px; line-height: 1.28; font-weight: 400; display: block; }
.exp-card .items { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.55; color: #5C6152; }
.quote-dark { background: #22261C; color: #F7F5EF; border-radius: 18px; padding: 32px 34px; margin-bottom: 44px; }
.quote-dark .q-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #B0B79A; margin-bottom: 14px; }
.quote-dark .q-text { font-family: 'Marcellus', serif; font-size: 23px; line-height: 1.55; color: #E8EADD; margin: 0 0 16px; text-wrap: pretty; }
.quote-dark .q-sub { font-size: 14px; color: #A9B295; }
.acad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 44px; }
.acad-grid > div { border-top: 2px solid #C7CDB2; padding-top: 16px; }
.acad-grid b { font-family: 'Marcellus', serif; font-size: 26px; color: #3D4630; line-height: 1; font-weight: 400; display: block; }
.acad-grid span { font-size: 14.5px; line-height: 1.6; color: #5C6152; margin-top: 8px; display: block; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.photo-grid figure { margin: 0; background: #FFFDF8; border: 1px solid #E1DCCB; border-radius: 14px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.photo-grid figure:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(34,38,28,.10); }
.photo-grid .ph-media { width: 100%; aspect-ratio: 16/10; background: #E8E2D4; overflow: hidden; }
.photo-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-grid figcaption { padding: 14px 18px 16px; font-size: 14.5px; color: #5C6152; }
.vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.vision-grid h2 { font-family: 'Marcellus', serif; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; margin: 0 0 16px; font-weight: 400; }
.vision-grid p { font-size: 16.5px; line-height: 1.8; color: #42473A; margin: 0; text-wrap: pretty; }

/* case gallery */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ba-card { margin: 0; background: #FFFDF8; border: 1px solid #E1DCCB; border-radius: 16px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.ba-card:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(34,38,28,.11); }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E1DCCB; }
.ba-pair > div { position: relative; aspect-ratio: 3/4; background: #E8E2D4; overflow: hidden; }
.ba-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-card figcaption { padding: 18px 20px 20px; }
.ba-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.ba-tag { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #636E48; background: #EDEAE0; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.ba-follow { font-size: 12.5px; color: #8A8F76; }
.ba-title { font-size: 17px; line-height: 1.35; color: #22261C; margin-bottom: 6px; }
.ba-detail { font-size: 14.5px; line-height: 1.6; color: #5C6152; text-wrap: pretty; }
.ba-patient { font-size: 13px; color: #8A8F76; margin-top: 10px; }

/* costs */
.principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.principle-card { background: rgba(247,245,239,.06); border: 1px solid rgba(232,226,212,.18); border-radius: 14px; padding: 22px 20px; }
.principle-card b { font-family: 'Marcellus', serif; font-size: 19px; color: #E8EADD; margin-bottom: 8px; font-weight: 400; display: block; }
.principle-card span { font-size: 14.5px; line-height: 1.6; color: #B9BEA9; display: block; }
.cost-thead { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; padding: 0 24px 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8A8F76; }
.cost-trow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; align-items: center; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 12px; padding: 18px 24px; transition: border-color .3s; }
.cost-trow:hover { border-color: #C7CDB2; }
.cost-trow .c1 { font-size: 16.5px; }
.cost-trow .c2 { font-family: 'Marcellus', serif; font-size: 16.5px; color: #3D4630; }
.cost-trow .c3 { font-size: 14.5px; color: #5C6152; }
.cost-trow .c4 { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #7A7F68; text-align: right; }
.scheme-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 22px 24px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.scheme-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34,38,28,.09); border-color: #C7CDB2; }
.scheme-card .s-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; }
.scheme-card p { font-size: 15.5px; line-height: 1.7; color: #5C6152; margin: 0; text-wrap: pretty; }

/* contact */
.em-strip { background: #8A6A3C; color: #fff; }
.em-strip-in { padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.em-strip-in .t { font-size: 16.5px; line-height: 1.5; }
.em-strip-in a { background: #fff; color: #8A6A3C; padding: 12px 24px; border-radius: 999px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.em-strip-in a:hover { background: #F7F5EF; color: #8A6A3C; }
.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 34px; }
.channel-card { display: block; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 22px; color: #22261C; transition: border-color .3s, box-shadow .3s; }
.channel-card:hover { border-color: #C7CDB2; box-shadow: 0 14px 28px rgba(34,38,28,.07); color: #22261C; }
.channel-card .ch-label { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A8F76; margin-bottom: 6px; }
.channel-card .ch-value { display: block; font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; line-height: 1.3; }
.channel-card .ch-note { display: block; font-size: 13.5px; color: #7A7F68; margin-top: 7px; }
.centre-big { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 16px; overflow: hidden; }
.centre-big .c-media { position: relative; width: 100%; aspect-ratio: 16/7; background: #E8E2D4; overflow: hidden; }
.centre-big .c-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.centre-big .c-body { padding: 24px 26px; }
.centre-big .c-body b { font-family: 'Marcellus', serif; font-size: 21px; color: #3D4630; margin-bottom: 10px; font-weight: 400; display: block; }
.centre-big .c-strip { height: 8px; background: #EFEBDF; }

/* guides */
.guide-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; background: #22261C; border-radius: 20px; overflow: hidden; color: #F7F5EF; margin-bottom: 44px; }
.guide-featured:hover { color: #F7F5EF; }
.guide-featured .gf-media { position: relative; min-height: 280px; background: #3A4130; overflow: hidden; }
.guide-featured .gf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-featured .gf-body { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; }
.guide-featured .gf-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #E9B6AB; margin-bottom: 14px; }
.guide-featured h2 { font-family: 'Marcellus', serif; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; margin: 0 0 14px; font-weight: 400; }
.guide-featured p { font-size: 16.5px; line-height: 1.7; color: #CFD3C2; margin: 0 0 20px; text-wrap: pretty; }
.guide-featured .gf-meta { font-size: 14px; color: #A9B295; }
.guide-lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.guide-lg { display: block; background: #FFFDF8; border: 1px solid #E1DCCB; border-radius: 16px; overflow: hidden; color: #22261C; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.guide-lg:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(34,38,28,.10); border-color: #C7CDB2; color: #22261C; }
.guide-lg .g-media { position: relative; width: 100%; aspect-ratio: 16/9; background: #E8E2D4; overflow: hidden; }
.guide-lg .g-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-lg .g-body { padding: 24px 24px 26px; }
.guide-lg h3 { font-family: 'Marcellus', serif; font-size: 21px; line-height: 1.28; margin: 0 0 10px; font-weight: 400; }
.guide-lg p { font-size: 15px; line-height: 1.65; color: #5C6152; margin: 0 0 16px; text-wrap: pretty; }

/* policies */
.policy-sec { margin-bottom: 52px; }
.policy-sec h2 { font-family: 'Marcellus', serif; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; margin: 0 0 16px; font-weight: 400; }
.policy-sec .p-intro { font-size: 17px; line-height: 1.8; color: #42473A; margin: 0 0 20px; text-wrap: pretty; }
.policy-points { display: grid; gap: 10px; margin-bottom: 16px; }
.policy-points > div { display: flex; gap: 14px; align-items: flex-start; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 11px; padding: 16px 20px; transition: background .3s, border-color .3s, transform .3s; font-size: 15.5px; line-height: 1.7; color: #42473A; }
.policy-points > div:hover { background: #F4F1E7; border-color: #C7CDB2; transform: translateX(3px); }
.policy-points i { color: #636E48; flex-shrink: 0; font-style: normal; }
.policy-updated { font-size: 13.5px; color: #8A8F76; }

/* generic */
.sec-pad { padding: 88px 0; }
.band-sand { background: #EFEBDF; }
.band-rose { background: #EFE7E1; }
@media (max-width: 1179px) {
  .art-side { position: static; }
}

/* ---------- Mega menu ---------- */
.mega-panel { display: none; border-top: 1px solid #E2DECF; background: #FFFDF8; animation: fade .18s ease both; position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 30px 50px rgba(34,38,28,.12); }
.mega-panel.open { display: block; }
.site-header { position: sticky; }
.mega-in { padding: 30px 28px 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px; }
.mega-title { font-family: 'Marcellus', serif; font-size: 16px; color: #3D4630; line-height: 1.25; margin-bottom: 14px; }
.mega-links { display: flex; flex-direction: column; gap: 2px; }
.mega-links a { font-size: 14.5px; color: #22261C; padding: 8px 10px; border-radius: 7px; }
.mega-links a:hover { background: #F1EEE3; color: #3D4630; }
@media (max-width: 1179px) {
  .mega-panel { position: static; box-shadow: none; }
  .mega-in { padding: 10px 20px 20px; gap: 18px; }
}


/* ---------- v3: design sync (bronze accent, hover states on static cards) ---------- */
.em-kicker { color: #D9C1A6; }
.risk-grid > div, .principle-card, .acad-grid > div, .cond-grid > div,
.glance-in > div, .mini-stats > div, .hero-stats-in > div, .stat,
.index-pill { transition: transform .3s, box-shadow .3s, border-color .3s, background .3s; }
.risk-grid > div:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(34,38,28,.08); border-color: #C7CDB2; }
.principle-card:hover { transform: translateY(-3px); background: rgba(247,245,239,.1); }
.acad-grid > div:hover { transform: translateY(-3px); border-top-color: #636E48; }
.stage-card:hover, .rec-card:hover { border-color: #C7CDB2; }
.mega-title { display: flex; align-items: center; gap: 10px; }
.mega-title .mi { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #EDEAE0; color: #636E48; flex-shrink: 0; }
.ch-ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #EDEAE0; color: #636E48; margin-bottom: 14px; }
.exp-ico, .ag-ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #EDEAE0; color: #636E48; margin-bottom: 16px; }
.sch-ico { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: #EDEAE0; color: #636E48; flex-shrink: 0; }
.centre-big .c-media iframe { width: 100%; height: 100%; border: 0; display: block; }


/* ==========================================================================
   v4: mobile redesign — compact header, responsive pass across all sections
   ========================================================================== */
@media (max-width: 1179px) {
  /* compact one-row utility bar */
  .u-bar-in { flex-wrap: nowrap; gap: 10px; padding-top: 7px; padding-bottom: 7px; }
  .u-left { gap: 10px; min-width: 0; }
  .u-left a { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .u-left a:first-child { display: none; }   /* secondary phone lives on the contact page */
  .u-right { gap: 8px; flex-shrink: 0; }
  .u-right .u-book { display: none; }        /* Book lives in the sticky bottom bar */
  .u-emergency { font-size: 11.5px; padding: 4px 11px; animation: none; }
  /* tighter header */
  .head-in { padding-top: 10px; padding-bottom: 10px; }
  .brand-logo { height: 38px; }
  /* page hero */
  .page-hero-in { padding: 32px 0 44px; gap: 32px; }
  .page-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .ph-sub { font-size: 16.5px; }
  .ph-badge { font-size: 11px; letter-spacing: .12em; white-space: normal; text-align: center; line-height: 1.6; }
  .ph-chips { gap: 10px 18px; }
  .hero-stats-in { grid-template-columns: repeat(2, 1fr); }
  /* sections breathe less on mobile */
  .sec-pad { padding: 56px 0; }
  .art-wrap { padding: 44px 0 56px; gap: 32px; }
  .buckets-sec, .doctor-sec, .treat-sec, .costs-sec, .faq-sec, .contact-sec { padding-top: 56px; padding-bottom: 56px; }
  .index-card { padding: 26px 20px 24px; }
  .quick-answer { padding: 22px 20px; }
  .quick-answer p { font-size: 17px; }
  .cond-box { padding: 20px 18px; }
  .em-band { padding: 30px 22px; }
  /* CTA band + pill stack cleanly */
  .cta-band { padding: 64px 0 56px; }
  .cta-band h2 { margin-bottom: 34px; }
  .cta-pill { flex-direction: column; align-items: stretch; gap: 8px; border-radius: 22px; padding: 18px; }
  .cta-contact { flex: 1 1 auto; }
  .cta-btn { margin-left: 0; text-align: center; }
  /* emergency strip (contact) stacks */
  .em-strip-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* glance strip: clean 2-col grid */
  .glance-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 26px 0; }
  .glance-in .g-value { font-size: 17px; }
  /* footer base stacks */
  .foot-base { flex-direction: column; gap: 8px; }
  /* floating buttons clear the bottom bar on all mobile widths */
  .float-btns { bottom: 66px; right: 14px; gap: 10px; }
  .float-btn { width: 48px; height: 48px; }
  /* guide featured card */
  .guide-featured .gf-body { padding: 28px 22px; }
  /* enquiry box */
  .enquiry-box { padding: 26px 20px; border-radius: 16px; }
  /* case pairs keep aspect */
  .ba-pair > div { aspect-ratio: 3/3.4; }
  /* stage/step cards */
  .stage-card { grid-template-columns: 1fr; gap: 10px; padding: 18px 18px; }
  .step-row { gap: 12px; }
  /* pillar hero */
  .path-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .why-band { padding: 56px 0; }
  /* mega panel inside drawer */
  .mega-in { grid-template-columns: 1fr; gap: 14px; padding: 8px 20px 16px; }
  .mega-title { font-size: 15px; margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand-logo { height: 34px; }
  .u-left a { max-width: 150px; }
  .hero h1 { font-size: clamp(32px, 10vw, 40px); }
  .sec-h2 { font-size: clamp(26px, 7.5vw, 34px); }
  .btn-light, .btn-ghost, .btn-olive, .btn-line { padding: 13px 22px; font-size: 15px; }
  .treat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .treat-name { padding: 12px 12px; font-size: 14px; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-thead { display: none; }
  .cost-trow { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .cost-trow .c4 { text-align: left; }
  .glance-cards { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: repeat(2, 1fr); padding: 28px 0; }
  .stat b { font-size: 34px; }
  .marquee-track { font-size: 12.5px; }
  .video-grid, .guide-lg-grid, .ba-grid { grid-template-columns: 1fr; }
}


/* ---------- v5: vision cards + mega menu spacing ---------- */
.vision-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 16px; padding: 30px 28px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.vision-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34,38,28,.09); border-color: #C7CDB2; }
.vision-card h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 12px; }
.vision-card p { font-size: 15.5px; line-height: 1.75; }
.vision-card .kicker { margin-bottom: 10px; }
.vision-grid { gap: 20px; }
.mega-in { padding: 26px 28px 28px; gap: 26px 30px; align-items: start; max-height: calc(100vh - 140px); overflow-y: auto; }
.mega-col { min-width: 0; }
.mega-title { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #EDEAE0; }
.mega-links a { padding: 7px 10px; }
@media (max-width: 1179px) {
  .mega-in { max-height: none; overflow: visible; }
  .vision-card { padding: 24px 20px; }
}


/* ==========================================================================
   v6: mobile hero redesign + drawer/mega interaction
   ========================================================================== */
@media (max-width: 1179px) {
  /* --- home hero: compact editorial banner --- */
  .hero-in { padding-top: 40px; padding-bottom: 36px; gap: 26px; }
  .hero-badge { font-size: 11px; padding: 7px 14px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 46px); margin-bottom: 18px; }
  .hero h1 .l3 u { display: none; }
  .hero-sub { gap: 14px; margin-bottom: 22px; }
  .hero-sub i { height: 52px; }
  .hero-sub p { font-size: 15.5px; line-height: 1.65; }
  .hero-proof { gap: 8px; margin-bottom: 22px; }
  .hero-proof .chip { font-size: 12.5px; padding: 7px 12px; gap: 7px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn-light, .hero-ctas .btn-ghost { width: 100%; text-align: center; padding: 14px 20px; font-size: 15px; }
  .hero-em { margin-top: 22px; font-size: 13px; align-items: flex-start; }
  .hero-em i { margin-top: 5px; }
  /* hero visual: hide the empty placeholder arch entirely; real image becomes a clean 16/10 card */
  .hero-visual:has(.img-ph) { display: none; }
  .hero-frame { display: none; }
  .hero-img { aspect-ratio: 16/10; border-radius: 16px; }
  .hero-card { position: static; margin-top: 12px; box-shadow: none; border: 1px solid #E5E1D2; border-radius: 12px; display: inline-block; }
  .marquee-track { padding: 11px 0; font-size: 12px; }
  /* --- drawer with mega accordion --- */
  .main-nav.open { max-height: calc(100vh - 120px); overflow-y: auto; }
  .mega-panel { border-top: 0; background: transparent; box-shadow: none; animation: none; }
  .mega-panel.open { border-top: 1px solid #E2DECF; background: #FFFDF8; }
  body.nav-open .mega-panel.open { position: static; }
  .mega-in { max-height: none; overflow: visible; }
  .mega-title { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #8A8F76; font-family: 'Jost', sans-serif; border-bottom: 0; margin-bottom: 4px; padding-bottom: 0; }
  .mega-title .mi { width: 24px; height: 24px; }
  .mega-title .mi svg { width: 13px; height: 13px; }
  .mega-links a { font-size: 15px; padding: 9px 10px; }
}


/* ---------- v7: mega redesign (4 balanced columns + promo card) ---------- */
.mega-in { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px 32px; padding: 30px 28px 32px; max-height: none; overflow: visible; }
.mega-title { font-family: 'Marcellus', serif; font-size: 16px; color: #3D4630; text-transform: none; letter-spacing: 0; border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
.mega-title .mi { width: 32px; height: 32px; }
.mega-promo { background: #EFEBDF; border-radius: 14px; padding: 24px 24px 22px; }
.mega-promo .mp-title { font-family: 'Marcellus', serif; font-size: 19px; color: #3D4630; line-height: 1.25; margin-bottom: 9px; }
.mega-promo p { font-size: 13.5px; line-height: 1.6; color: #5C6152; margin: 0 0 14px; }
.mega-promo .mp-links { display: flex; flex-direction: column; gap: 5px; }
.mega-promo .mp-links a { font-size: 13.5px; letter-spacing: .04em; color: #636E48; padding: 3px 0; border-bottom: 1px solid transparent; width: fit-content; }
.mega-promo .mp-links a:hover { color: #3D4630; border-bottom-color: #B7BFA2; }
@media (max-width: 1179px) {
  .mega-in { grid-template-columns: 1fr; gap: 14px; padding: 8px 20px 16px; }
  .mega-title { font-size: 15px; margin-bottom: 6px; }
  .mega-promo { padding: 18px; }
}


/* ---------- v8: six bucket mega (per structure document) ---------- */
@media (min-width: 1180px) {
  .mega-in { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; padding: 28px 24px 30px; }
  .mega-title { font-size: 15px; }
  .mega-links a { font-size: 13.5px; padding: 6px 8px; }
}
@media (min-width: 1180px) and (max-width: 1199px) {
  .mega-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mega-links a.mega-all { color: #636E48; font-weight: 500; margin-top: 6px; border-top: 1px solid #EDEAE0; padding-top: 9px; }
.mega-links a.mega-all::after { content: ' \2192'; }
.mega-links a.mega-all:hover { color: #3D4630; }


/* ---------- v9: five column footer + guaranteed page visual ---------- */
.foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px 28px; }
.foot-title-cont { visibility: visible; }
.art-hero-img { position: relative; width: 100%; aspect-ratio: 16/8; border-radius: 16px; overflow: hidden; background: #E8E2D4; margin-bottom: 34px; }
.art-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-hero-img .img-ph { position: absolute; inset: 0; }
.contact-visual { position: relative; width: 100%; aspect-ratio: 21/8; border-radius: 18px; overflow: hidden; background: #E8E2D4; }
.contact-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-visual .img-ph { position: absolute; inset: 0; }
@media (max-width: 1099px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-title-cont { display: none; }
}
@media (max-width: 767px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
    .contact-visual { aspect-ratio: 16/9; }
  .art-hero-img { aspect-ratio: 16/10; margin-bottom: 26px; }
}


/* ---------- v10: mega treatments strip + repeated footer heading ---------- */
.mega-foot { border-top: 1px solid #EDEAE0; background: #FBF9F4; padding: 15px 28px 17px;
             display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.mega-foot .mf-label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
                       color: #8A8F76; white-space: nowrap; }
.mega-foot .mf-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mega-foot .mf-links a { font-size: 13.5px; color: #3D4630; border-bottom: 1px solid transparent; padding: 2px 0; }
.mega-foot .mf-links a:hover { color: #636E48; border-bottom-color: #B7BFA2; }
@media (max-width: 1179px) {
  .mega-foot { flex-direction: column; gap: 10px; padding: 14px 20px 18px; }
  .mega-foot .mf-links { flex-direction: column; gap: 2px; }
  .mega-foot .mf-links a { padding: 7px 10px; font-size: 15px; }
}


/* ---------- v11: tile arrow + facilities grid ---------- */
/* beats .cat-tile .info span, which was overriding size, colour and centring */
.cat-tile .info .arrow {
  flex-shrink: 0; width: 46px; height: 46px; margin-top: 0;
  border-radius: 50%; border: 1px solid rgba(247,245,239,.6);
  background: rgba(247,245,239,.08);
  color: #F7F5EF; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s, transform .3s;
}
.cat-tile:hover .info .arrow { background: rgba(247,245,239,.18); border-color: #F7F5EF; transform: translateX(3px); }

/* four items in a three column grid left two dead cells; let the last row fill */
.facil-grid { display: flex; flex-wrap: wrap; }
.facil-grid > div { flex: 1 1 150px; min-width: 150px; }
@media (max-width: 520px) {
  .facil-grid > div { flex: 1 1 100%; }
  .cat-tile .info .arrow { width: 40px; height: 40px; font-size: 18px; }
}


/* ---------- v12: hub (T3) content blocks ---------- */
.hub-intro { max-width: 820px; }
.hub-intro p { font-size: 17px; line-height: 1.85; margin-bottom: 16px; color: #3F4536; }
.hub-intro p:last-child { margin-bottom: 0; }
.hub-table { border: 1px solid #E5E1D2; border-radius: 16px; overflow: hidden; background: #FFFDF8; }
.hub-table .ht-head { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 18px;
  padding: 15px 24px; background: #EFEBDF; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #6C7357; }
.hub-table .ht-row { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 18px;
  padding: 20px 24px; border-top: 1px solid #EDEAE0; font-size: 15px; line-height: 1.65; }
.hub-table .ht-row b { font-weight: 500; color: #22261C; }
.hub-table .ht-row:hover { background: #FAF8F1; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.topic-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 24px 22px;
  transition: transform .3s, box-shadow .3s, border-color .3s; }
.topic-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34,38,28,.09); border-color: #C7CDB2; }
.topic-card h3 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; margin-bottom: 9px; color: #22261C; }
.topic-card p { font-size: 15px; line-height: 1.7; color: #5C6152; }
.hub-flags { border-left: 3px solid #8A6A3C; }
@media (max-width: 767px) {
  .hub-table .ht-head { display: none; }
  .hub-table .ht-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 18px; }
  .hub-table .ht-row > div::before { content: attr(data-l); display: block; font-size: 11px;
    letter-spacing: .1em; text-transform: uppercase; color: #8A8F76; margin-bottom: 3px; }
  .hub-intro p { font-size: 16px; }
}


/* ---------- v13: extended treatment sections ---------- */
.takeaway-box { background: #EFEBDF; border-radius: 14px; padding: 24px 26px; margin: 0 0 26px; }
.takeaway-box ul { margin: 0; padding-left: 20px; }
.takeaway-box li { font-size: 16px; line-height: 1.7; color: #3F4536; margin-bottom: 8px; }
.takeaway-box li:last-child { margin-bottom: 0; }
.def-box { border-left: 3px solid #636E48; background: #FFFDF8; padding: 16px 20px; border-radius: 0 10px 10px 0;
           font-size: 16px; line-height: 1.7; color: #42473A; margin: 0 0 30px; }
.def-box b { font-weight: 500; color: #22261C; }
.suit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 18px 0 40px; }
.suit-col { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 22px 22px; }
.suit-col > b { display: block; font-weight: 500; font-size: 16px; margin-bottom: 12px; color: #22261C; }
.suit-col div { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.65; color: #42473A; margin-bottom: 9px; }
.suit-col div:last-child { margin-bottom: 0; }
.suit-yes { border-left: 3px solid #636E48; }
.suit-yes i { color: #636E48; font-style: normal; }
.suit-no { border-left: 3px solid #8A6A3C; }
.suit-no i { color: #8A6A3C; font-style: normal; }
.benefit-grid, .care-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 20px; margin: 18px 0 34px; }
.care-list { grid-template-columns: 1fr; gap: 9px; }
.benefit-grid div, .care-list div { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.65; color: #42473A; }
.benefit-grid i, .care-list i { color: #636E48; font-style: normal; flex-shrink: 0; }
.myth-list { display: grid; gap: 12px; margin: 18px 0 40px; }
.myth-row { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px; padding: 20px 22px; }
.myth-row .myth-q span, .myth-row .myth-a span { display: inline-block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #8A8F76; margin-bottom: 5px; }
.myth-row .myth-q b { display: block; font-weight: 500; font-size: 16.5px; color: #22261C; margin-bottom: 12px; }
.myth-row .myth-a { border-top: 1px solid #EDEAE0; padding-top: 12px; }
.myth-row .myth-a p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #5C6152; }
.src-box { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 12px; padding: 20px 22px; margin: 30px 0 0; }
.src-box > b { display: block; font-weight: 500; font-size: 15px; margin-bottom: 10px; color: #22261C; }
.src-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.src-links a { font-size: 14.5px; border-bottom: 1px solid #C7CDB2; padding-bottom: 2px; }
@media (max-width: 767px) {
  .takeaway-box { padding: 20px 20px; }
  .benefit-grid { grid-template-columns: 1fr; }
}


/* ---------- v14: pillar category cards + linked mega headings ---------- */
.cat-cell { display: flex; flex-direction: column; }
.cat-cell .cat-tile { aspect-ratio: 3/3.4; }
.cat-eg { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px 0; }
.cat-eg a { font-size: 14px; line-height: 1.5; color: #5C6152; padding: 4px 0;
            border-bottom: 1px solid transparent; width: fit-content; }
.cat-eg a:hover { color: #3D4630; border-bottom-color: #C7CDB2; }
.cat-eg .cat-eg-all { font-size: 13.5px; color: #636E48; margin-top: 4px; }
.mega-title a { color: inherit; }
.mega-title a:hover { color: #636E48; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .cat-cell .cat-tile { aspect-ratio: 3/2.6; }
  .cat-eg a { font-size: 15px; padding: 6px 0; }
}


/* ---------- v15: hub treatment cards with image slot ---------- */
.treat-img .img-ph { position: absolute; inset: 0; }
.hub-view-grid .treat-img { aspect-ratio: 4/3; }
@media (max-width: 1179px) {
  .art-main .treat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}


/* ---------- v16: pillar category cards redesigned ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.cat-card { display: flex; flex-direction: column; background: #FFFDF8; border: 1px solid #E5E1D2;
  border-radius: 16px; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(34,38,28,.11); border-color: #C7CDB2; }
.cat-media { position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  background: #E8E2D4; overflow: hidden; }
.cat-media .img-ph { position: absolute; inset: 0; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-arrow { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(247,245,239,.14); border: 1px solid rgba(247,245,239,.55); color: #F7F5EF;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: background .3s, transform .3s; }
.cat-card:hover .cat-arrow { background: rgba(247,245,239,.26); transform: translateX(3px); }
.cat-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.cat-body .cat-count { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #8A8F76; margin-bottom: 8px; }
.cat-body h3 { font-family: 'Marcellus', serif; font-size: 23px; font-weight: 400; line-height: 1.2;
  margin: 0 0 14px; }
.cat-body h3 a { color: #22261C; }
.cat-body h3 a:hover { color: #636E48; }
.cat-links { display: flex; flex-direction: column; gap: 1px; padding-top: 12px;
  border-top: 1px solid #EDEAE0; margin-bottom: 14px; }
.cat-links a { font-size: 14.5px; line-height: 1.5; color: #5C6152; padding: 5px 0; }
.cat-links a:hover { color: #3D4630; }
.cat-all { margin-top: auto; font-size: 14px; color: #636E48; border-bottom: 1px solid #C7CDB2;
  padding-bottom: 2px; width: fit-content; }
.cat-all:hover { color: #3D4630; border-bottom-color: #636E48; }
@media (max-width: 767px) {
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-media { aspect-ratio: 16/8; }
  .cat-body h3 { font-size: 21px; }
}


/* ---------- v17: related cards match the treatment cards ---------- */
.related-grid a.rel-card { display: block; padding: 0; overflow: hidden; border-radius: 13px;
  transition: box-shadow .35s, border-color .35s, transform .35s cubic-bezier(.2,.7,.3,1); }
.related-grid a.rel-card:hover { background: #FFFDF8; color: #22261C; border-color: #C7CDB2;
  transform: translateY(-5px); box-shadow: 0 18px 34px rgba(34,38,28,.10); }
.related-grid a.rel-card .treat-img { aspect-ratio: 4/3; }
.related-grid a.rel-card .treat-name { padding: 16px 18px; }


/* ==========================================================================
   v18: mobile drawer scrolling with the mega panel inside it
   The panel is moved into .main-nav by the header script below 1180px, so the
   drawer is the single scroll container for the whole menu.
   ========================================================================== */
@media (max-width: 1179px) {
  /* the drawer is the scroll container; overscroll-behavior stops the page
     behind it from taking over the gesture at either end of the list */
  .main-nav.open {
    /* Block, not flex. The drawer is a plain vertical stack, and as a COLUMN FLEX container it
       would not scroll: with flex-wrap:wrap inherited from the desktop bar a height cap makes it
       wrap into new columns, and even with nowrap the overflow never reaches scrollHeight
       (measured: scrollHeight == clientHeight == 698 as flex, 3125 as block). Each link keeps its
       own `display:flex` for its icon and label, so nothing else changes. */
    display: block;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* clears the fixed bottom call/WhatsApp/Book bar */
    padding-bottom: 76px;
  }
  /* the panel now flows inside the drawer rather than hanging off the header */
  .main-nav .mega-panel {
    position: static;
    display: none;
    margin: 2px 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  .main-nav .mega-panel.open {
    display: block;
    border: 1px solid #E5E1D2;
    background: #FFFDF8;
  }
  .main-nav .mega-in { max-height: none; overflow: visible; padding: 12px 14px 14px; gap: 12px; }
  .main-nav .mega-foot { padding: 12px 14px 14px; }
  .main-nav .mega-links a { padding: 10px 10px; }
  /* block layout drops the flex `gap`, so the items carry their own spacing */
  .main-nav.open > a { margin-bottom: 4px; }
  .main-nav.open > a:last-child { margin-bottom: 0; }
  /* the drawer scrolls on its own, so the page behind must not move with it */
  body.nav-open { overflow: hidden; }
}
/* The panel is a child of .main-nav while the drawer owns it, so the drawer's own link rules
   reach the panel's links. white-space:nowrap is the harmful one: long labels such as
   "Bite & Degloving Injuries" then push out of their column instead of wrapping. */
.main-nav .mega-panel a { white-space: normal; }

@supports (height: 100dvh) {
  @media (max-width: 1179px) {
    /* dvh follows the mobile browser chrome as it hides, so the last item stays reachable */
    .main-nav.open { max-height: calc(100dvh - 104px); }
  }
}


/* ==========================================================================
   v22: site search (document 3: search field in the drawer)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-search { display: flex; align-items: center; gap: 8px; background: #FFFDF8;
  border: 1px solid #E5E1D2; border-radius: 999px; padding: 4px 4px 4px 16px; }
.site-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: 'Jost', sans-serif; font-size: 15px; color: #22261C; padding: 9px 0; }
.site-search input::placeholder { color: #8A8F76; }
.site-search button { flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; background: #636E48; color: #F7F5EF; border-radius: 999px;
  padding: 10px 16px; font-family: 'Jost', sans-serif; font-size: 14.5px; font-weight: 500;
  transition: background .25s; }
.site-search button:hover { background: #3D4630; }
.site-search:focus-within { border-color: #C7CDB2; box-shadow: 0 0 0 3px rgba(99,110,72,.10); }
.site-search-lg { max-width: 560px; margin-top: 30px; }
.nav-search { display: none; }
.nav-search button { padding: 10px 13px; }
.nav-search-btn { display: flex; align-items: center; justify-content: center; width: 40px;
  height: 40px; border-radius: 50%; color: #3D4630; transition: background .25s; }
.nav-search-btn:hover { background: #EDEAE0; }

.search-list { display: grid; gap: 14px; }
.search-hit { display: block; background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 14px;
  padding: 24px 26px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.search-hit:hover { transform: translateY(-3px); border-color: #C7CDB2;
  box-shadow: 0 16px 30px rgba(34,38,28,.09); }
.search-hit h3 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400;
  color: #22261C; margin: 0 0 8px; }
.search-hit p { font-size: 15px; line-height: 1.7; color: #5C6152; margin: 0 0 12px; }
.search-hit strong { background: #EFEBDF; font-weight: 500; color: #3D4630; padding: 0 2px; }
.search-pager { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.search-pager a, .search-pager span { padding: 8px 14px; border-radius: 8px;
  border: 1px solid #E5E1D2; background: #FFFDF8; color: #42473A; }
.search-pager a:hover { background: #3D4630; color: #F7F5EF; border-color: #3D4630; }

@media (max-width: 1179px) {
  /* in the drawer the field is the first thing under the burger; the icon button goes away */
  .nav-search { display: flex; margin: 4px 0 10px; }
  .nav-search-btn { display: none; }
}


/* ==========================================================================
   v23: document 3.6 previous / next, and the Surat line on clinical pages
   ========================================================================== */
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prev-next a { display: block; border: 1px solid #E5E1D2; background: #FFFDF8; border-radius: 14px;
  padding: 20px 22px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.prev-next a:hover { border-color: #C7CDB2; transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(34,38,28,.09); }
.prev-next span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #8A8F76; margin-bottom: 7px; }
.prev-next b { font-family: 'Marcellus', serif; font-size: 18px; font-weight: 400; color: #22261C;
  line-height: 1.3; }
.prev-next .pn-next { text-align: right; }
.surat-line { font-size: 15px; line-height: 1.75; color: #5C6152; max-width: 760px; margin: 0; }
.surat-line a { border-bottom: 1px solid #C7CDB2; color: #3D4630; }
@media (max-width: 640px) {
  .prev-next { grid-template-columns: 1fr; }
  .prev-next .pn-next { text-align: left; }
}


/* ==========================================================================
   v24: document 3.2 WhatsApp in the utility bar, 3.3 footer address block
   ========================================================================== */
.u-bar .u-wa { color: #E8E2D4; }
.u-bar .u-wa:hover { color: #fff; }
.foot-address { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px; padding-top: 32px; margin-top: 8px; border-top: 1px solid rgba(232,226,212,.16); }
.foot-centre b { font-family: 'Marcellus', serif; font-size: 16px; font-weight: 400;
  color: #F7F5EF; display: block; margin-bottom: 8px; }
.foot-centre p { font-size: 14px; line-height: 1.7; color: #A9B295; margin: 0 0 6px; }
.foot-centre .fc-hours { font-size: 13.5px; color: #8A8F76; }
.foot-centre a { font-size: 13.5px; color: #C3CBAA; border-bottom: 1px solid rgba(195,203,170,.4); }
.foot-centre a:hover { color: #F7F5EF; }
@media (max-width: 767px) { .foot-address { padding-top: 26px; gap: 20px; } }


/* ==========================================================================
   v25: document 3.4 emergency banner, trauma / burns / microsurgery pillars only
   ========================================================================== */
.pil-emergency { background: #6E2B22; color: #F7EDE9; border-bottom: 1px solid #5A231B; }
.pil-emergency-in { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.pil-emergency b { font-family: 'Marcellus', serif; font-size: 17px; font-weight: 400;
  display: block; margin-bottom: 4px; }
.pil-emergency p { font-size: 14.5px; line-height: 1.6; color: #F0D9D2; margin: 0; max-width: 640px; }
.pil-em-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pil-em-actions a { background: rgba(247,237,233,.14); border: 1px solid rgba(247,237,233,.34);
  color: #F7EDE9; border-radius: 999px; padding: 10px 18px; font-size: 14.5px; font-weight: 500;
  white-space: nowrap; transition: background .25s; }
.pil-em-actions a:hover { background: rgba(247,237,233,.26); }
@media (max-width: 767px) {
  .pil-emergency-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pil-em-actions a { padding: 10px 15px; font-size: 14px; }
}


/* ==========================================================================
   v26: document 3.3 five named footer columns, brand block above them
   ========================================================================== */
.foot-brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px;
  align-items: start; padding-bottom: 34px; }
.foot-brand .foot-about { max-width: 560px; }
.foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; align-items: start; }
.foot-links-2col { columns: 2; column-gap: 22px; }
.foot-links-2col a { break-inside: avoid; }
@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-spec { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .foot-brand { grid-template-columns: 1fr; gap: 18px; padding-bottom: 26px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-links-2col { columns: 2; }
}


/* ==========================================================================
   v27: blog index redesign — category tabs, card meta, pagination
   ========================================================================== */
.blog-count { font-size: 14px; color: #A9B295; margin-top: 18px; }
.blog-tabs-sec { padding: 34px 28px 0; }
.blog-tabs-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #8A8F76; margin-bottom: 14px; }
.blog-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-tab { display: inline-flex; align-items: center; gap: 8px; background: #FFFDF8;
  border: 1px solid #E5E1D2; border-radius: 999px; padding: 9px 16px; font-size: 14.5px;
  color: #42473A; transition: background .25s, border-color .25s, color .25s, transform .25s; }
.blog-tab i { font-style: normal; font-size: 12px; background: #EDEAE0; color: #6C7357;
  border-radius: 999px; padding: 2px 8px; transition: background .25s, color .25s; }
.blog-tab:hover { border-color: #C7CDB2; background: #F4F1E7; transform: translateY(-2px); }
.blog-tab.is-active { background: #3D4630; border-color: #3D4630; color: #F7F5EF; }
.blog-tab.is-active i { background: rgba(247,245,239,.22); color: #F7F5EF; }

.guide-lg-grid .treat-card .bc-body { padding: 20px 22px 22px; }
.bc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bc-cat { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6C7357; }
.bc-read { font-size: 12.5px; color: #8A8F76; }
.bc-read::before { content: '·'; margin-right: 10px; color: #C7CDB2; }
.guide-lg-grid .treat-card h3 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400;
  line-height: 1.25; margin: 0 0 8px; color: #22261C; }
.guide-lg-grid .treat-card p { font-size: 14.5px; line-height: 1.65; color: #5C6152; margin: 0 0 12px; }
.card-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(34,38,28,.62); color: #F7F5EF;
  display: flex; align-items: center; justify-content: center; font-size: 17px; padding-left: 3px;
  border: 1px solid rgba(247,245,239,.5); }

.blog-pager { margin-top: 40px; display: flex; justify-content: center; }
.blog-pager .k_paginator, .blog-pager ul { display: flex; gap: 8px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0; align-items: center; }
.blog-pager li { list-style: none; }
.blog-pager a, .blog-pager span, .blog-pager strong { display: inline-block; padding: 9px 15px;
  border-radius: 9px; border: 1px solid #E5E1D2; background: #FFFDF8; color: #42473A;
  font-size: 15px; font-weight: 400; }
.blog-pager a:hover { background: #3D4630; color: #F7F5EF; border-color: #3D4630; }
.blog-pager strong, .blog-pager .current { background: #3D4630; color: #F7F5EF; border-color: #3D4630; }
@media (max-width: 767px) {
  .blog-tabs-sec { padding: 26px 20px 0; }
  .blog-tab { font-size: 13.5px; padding: 8px 13px; }
}


/* v27b: blog article video */
.art-video { margin: 0 0 30px; }
.art-video .video-thumb { position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/9; background: #E8E2D4; cursor: pointer; }
.art-video .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-video figcaption { font-size: 13.5px; color: #7A7F68; margin-top: 10px; }


/* ==========================================================================
   v28: nav type, doctor portrait crop, Surat visiting section
   ========================================================================== */
/* 1. main menu: brand serif, larger */
.main-nav { font-size: 16.5px; }
.main-nav a { font-family: 'Marcellus', serif; font-size: 16.5px; letter-spacing: .012em;
  padding: 10px 14px; }
.main-nav .nav-cta { font-family: 'Jost', sans-serif; font-size: 15px; }
@media (min-width: 1180px) and (max-width: 1199px) {
  .main-nav a { font-size: 15.5px; padding: 10px 11px; }
}

/* 2. the portrait was cropping the top of the head; anchor the crop to the top */
.doctor-visual img { object-position: 50% 12%; }
.doctor-grid .doctor-visual img { aspect-ratio: 4/4.6; }

/* 3. Surat "visiting the clinic": intro full width, centres side by side below */
.visit-intro { max-width: 760px; margin-bottom: 40px; }
.visit-body { margin-top: 18px; }
.visit-body p { font-size: 16.5px; line-height: 1.75; color: #42473A; margin: 0 0 16px;
  text-wrap: pretty; }
.visit-body p:last-child { margin-bottom: 0; }
.centre-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px; align-items: start; }
.centre-card { background: #FFFDF8; border: 1px solid #E5E1D2; border-radius: 16px;
  padding: 26px 26px 24px; }
.centre-card h3 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400;
  color: #22261C; margin: 0 0 10px; }
.centre-card .cc-addr { font-size: 15.5px; line-height: 1.7; color: #5C6152; margin: 0 0 10px; }
.centre-card .cc-hours { font-size: 14.5px; line-height: 1.6; color: #42473A; margin: 0 0 16px; }
.centre-card .cc-hours strong { font-weight: 500; color: #22261C; margin-right: 6px; }
.centre-card .cc-map { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 12px;
  overflow: hidden; background: #E8E2D4; }
.centre-card .cc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  display: block; }
.centre-card .cc-link { display: inline-block; margin-top: 14px; font-size: 14.5px; color: #3D4630;
  border-bottom: 1px solid #C7CDB2; padding-bottom: 2px; }
.centre-card .cc-link:hover { border-bottom-color: #3D4630; }
@media (max-width: 767px) {
  .main-nav a { font-size: 17px; }
  .visit-intro { margin-bottom: 28px; }
  .centre-card { padding: 20px 20px 18px; }
}


/* v28b: the doctor portrait source is a 400x400 square, but the slot was rendering it into a
   landscape box, so object-fit:cover trimmed 30% off the top and bottom and cut his face.
   Matching the box to the source removes the crop entirely. */
.doctor-visual img,
.doctor-grid .doctor-visual img { aspect-ratio: 1/1; height: auto; object-position: 50% 50%; }


/* ==========================================================================
   v30: header on one line, and the About portrait crop
   ========================================================================== */
/* The serif nav is wider than the old sans one and pushed the bar onto two rows.
   Tightening the link padding and the flex gaps reclaims enough width to fit on one line. */
@media (min-width: 1180px) {
  .head-in { flex-wrap: nowrap; gap: 12px; }
  .main-nav { flex-wrap: nowrap; gap: 0; }
  .main-nav a { padding: 10px 10px; }
  .main-nav .nav-cta { margin-left: 8px; padding: 11px 18px; }
  .brand { flex: 0 0 auto; }
  .nav-search-btn { flex: 0 0 auto; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .main-nav a { font-size: 15.5px; padding: 10px 8px; }
  .main-nav .nav-cta { padding: 10px 15px; font-size: 14.5px; }
}

/* The About hero portrait is the same 400x400 square as the home page one, but the slot asked
   for a 3/3.3 upright box, so object-fit:cover trimmed the top of his head. The arch shape is
   kept; only the box ratio changes so nothing is cropped. */
.ph-img-round img { aspect-ratio: 1/1; height: auto; object-position: 50% 50%; }


/* v31: the nav must fit on one line across the whole desktop range, not just at 1280.
   nowrap alone just traded a wrapped bar for horizontal overflow, so the type and padding
   step down as the viewport narrows, and the bar hands over to the burger below 992. */
@media (min-width: 1160px) and (max-width: 1279px) {
  .main-nav a { font-size: 15.5px; padding: 10px 8px; }
  .main-nav .nav-cta { padding: 10px 15px; font-size: 14.5px; }
}
@media (min-width: 1180px) and (max-width: 1159px) {
  .head-in { gap: 8px; }
  .main-nav a { font-size: 14.5px; padding: 9px 5px; letter-spacing: 0; }
  .main-nav .nav-cta { padding: 9px 12px; font-size: 13.5px; margin-left: 4px; }
  .nav-search-btn { width: 34px; height: 34px; }
  .brand-logo { max-width: 150px; }
}


/* v32: with the drawer taking over below 1180px, the bar only has to fit from 1180 up. */
@media (min-width: 1180px) and (max-width: 1339px) {
  .main-nav a { font-size: 15.5px; padding: 10px 8px; }
  .main-nav .nav-cta { padding: 10px 15px; font-size: 14.5px; }
  .brand-logo { max-width: 165px; }
}


/* v33: icons on the "most searched treatments" strip in the mega panel */
.mega-foot .mf-links a { display: inline-flex; align-items: center; gap: 8px; }
.mq-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px;
  height: 26px; border-radius: 8px; background: #EDEAE0; color: #636E48; flex-shrink: 0;
  transition: background .25s, color .25s; }
.mega-foot .mf-links a:hover .mq-ico { background: #3D4630; color: #F7F5EF; }
@media (max-width: 1179px) {
  .main-nav .mega-foot .mf-links a { padding: 9px 10px; }
  .mq-ico { width: 24px; height: 24px; }
}


/* ==========================================================================
   v34: lighter greens.
   The deep olive was reading as almost black on large surfaces. Only the
   backgrounds are lifted here; #22261C stays the body text colour, which is why
   this is an override list rather than a find and replace on the hex.
   ========================================================================== */
.hero { background: #39432E; }
.hero-bg { background: radial-gradient(120% 90% at 78% 18%, #5F6E48 0%, #39432E 62%); }
.page-hero { background: #39432E; }
.page-hero .hero-bg { background: radial-gradient(115% 95% at 78% 18%, #5F6E48 0%, #39432E 60%); }
.site-footer { background: #39432E; }
.why-band { background: #39432E; }
.em-band { background: #39432E; }
.enquiry-box { background: #39432E; }
.side-cta { background: #39432E; }
.quote-dark { background: #39432E; }
.guide-featured { background: #39432E; }
.facil-grid > div { background: #39432E; }
.facil-grid > div:hover { background: #4A5639; }
.m-bar { background: #39432E; }
.u-bar { background: #4A5639; }
.testi-sec { background: #4A5639; }
.video-thumb { background: #39432E; }


/* v35: second surgeon block, image on the right so the two profiles read as a pair */
.doctor-sec-2 { padding-top: 0; }
.doctor-sec-2 .doctor-visual i { inset: 20px 20px -20px -20px; }
.doctor-sec-2 .doc2-cred { font-size: 15.5px; color: #6C7357; margin: -6px 0 18px;
  letter-spacing: .01em; }
@media (max-width: 900px) {
  .doctor-sec-2 .doctor-grid { display: flex; flex-direction: column; }
  .doctor-sec-2 .doctor-visual { order: -1; }
}

/* v35: an upright hero photograph keeps its own proportions instead of being cropped to the
   landscape box, and is centred so it does not stretch across the column */
.ph-img-rect.is-upright { aspect-ratio: 1/1; max-width: 460px; margin-inline: auto; }


/* ==========================================================================
   v36: greens lifted again, a second step up from v34.
   Same override list, same reason: #22261C stays the body text colour, so only
   the large surfaces move. The base is held at AAA against the near white text.
   ========================================================================== */
.hero { background: #475336; }
.hero-bg { background: radial-gradient(120% 90% at 78% 18%, #65764B 0%, #475336 62%); }
.page-hero { background: #475336; }
.page-hero .hero-bg { background: radial-gradient(115% 95% at 78% 18%, #65764B 0%, #475336 60%); }
.site-footer { background: #475336; }
.why-band { background: #475336; }
.em-band { background: #475336; }
.enquiry-box { background: #475336; }
.side-cta { background: #475336; }
.quote-dark { background: #475336; }
.guide-featured { background: #475336; }
.facil-grid > div { background: #475336; }
.facil-grid > div:hover { background: #55643F; }
.m-bar { background: #475336; }
.u-bar { background: #55643F; }
.testi-sec { background: #55643F; }
.video-thumb { background: #475336; }
.ph-img-rect { background: #55643F; }


/* ==========================================================================
   v37: greens lifted once more, a slight step up from v36. The accent is held where
   it is: it already sits on the AA floor and cannot go lighter under this text.
   Same override list, same reason: #22261C stays the body text colour, so only
   the large surfaces move. The base is held at AAA against the near white text.
   ========================================================================== */
.hero { background: #4D5A3C; }
.hero-bg { background: radial-gradient(120% 90% at 78% 18%, #65764B 0%, #4D5A3C 62%); }
.page-hero { background: #4D5A3C; }
.page-hero .hero-bg { background: radial-gradient(115% 95% at 78% 18%, #65764B 0%, #4D5A3C 60%); }
.site-footer { background: #4D5A3C; }
.why-band { background: #4D5A3C; }
.em-band { background: #4D5A3C; }
.enquiry-box { background: #4D5A3C; }
.side-cta { background: #4D5A3C; }
.quote-dark { background: #4D5A3C; }
.guide-featured { background: #4D5A3C; }
.facil-grid > div { background: #4D5A3C; }
.facil-grid > div:hover { background: #5B6B45; }
.m-bar { background: #4D5A3C; }
.u-bar { background: #5B6B45; }
.testi-sec { background: #5B6B45; }
.video-thumb { background: #4D5A3C; }
.ph-img-rect { background: #5B6B45; }

/* ==========================================================================
   v41: time critical care band, rebuilt.
   Two columns. The photograph holds the left; the heading, the copy and both
   actions share the right, so the emergency number finally has the room to sit
   on one line. Nothing red: the urgency is carried by the gold rule, the scale
   of the number and the photograph itself.
   ========================================================================== */
.em-band.has-media {
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: stretch;
}
.em-band.has-media > .em-media { grid-column: 1; grid-row: 1 / -1; }
.em-band.has-media > div:not(.em-glow):not(.em-media):not(.em-actions) {
  grid-column: 2; grid-row: 1; padding: 44px 46px 0;
}
.em-band.has-media > .em-actions { grid-column: 2; grid-row: 2; padding: 26px 46px 44px; }

/* the gold rule that marks this band out from every other panel on the page */
.em-band.has-media::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 3;
  background: linear-gradient(180deg, #C9A227, #8A6A3C);
}

/* photograph: fills its column, then fades into the panel rather than stopping on a hard edge */
.em-media { position: relative; overflow: hidden; min-height: 300px; }
.em-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(34,38,28,.10) 0%, rgba(34,38,28,0) 30%, rgba(34,38,28,0) 62%, rgba(34,38,28,.96) 100%);
}

/* actions: side by side, the call leading */
.em-band.has-media .em-actions {
  flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px;
}
.em-band.has-media .em-call {
  flex: 1 1 300px; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 4px; padding: 16px 26px; background: #8A6A3C; border-radius: 14px;
}
.em-band.has-media .em-call span:first-child {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F0E2CB;
  font-weight: 400;
}
.em-band.has-media .em-call span:last-child {
  font-family: 'Marcellus', serif; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1;
  letter-spacing: .01em; white-space: nowrap; color: #fff; font-weight: 400;
}
.em-band.has-media .em-wa {
  flex: 1 1 240px; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 4px; padding: 16px 26px; border-radius: 14px;
  border: 1px solid rgba(232,226,212,.42); background: rgba(232,226,212,.05);
}
/* the label matches EMERGENCY LINE so the two blocks share one rhythm */
.em-band.has-media .em-wa span:first-child {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #B9C0A6;
  font-weight: 400;
}
.em-band.has-media .em-wa span:last-child {
  font-family: 'Marcellus', serif; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.1;
  color: #F7F5EF; font-weight: 400; letter-spacing: .01em; white-space: nowrap;
}
.em-band.has-media .em-wa:hover {
  background: rgba(232,226,212,.13); border-color: rgba(232,226,212,.65);
}
.em-band.has-media .em-wa:hover span:last-child { color: #fff; }
.em-band.has-media .em-note {
  flex: 1 1 100%; padding-left: 2px; margin-top: 2px; font-size: 12.5px; letter-spacing: .01em;
}

@media (max-width: 1050px) {
  .em-band.has-media { grid-template-columns: minmax(200px, 30%) minmax(0, 1fr); }
  .em-band.has-media > div:not(.em-glow):not(.em-media):not(.em-actions) { padding: 36px 32px 0; }
  .em-band.has-media > .em-actions { padding: 22px 32px 36px; }
}

@media (max-width: 820px) {
  .em-band.has-media { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .em-band.has-media > .em-media { grid-column: 1; grid-row: 1; min-height: 0; height: 210px; }
  .em-band.has-media > div:not(.em-glow):not(.em-media):not(.em-actions) {
    grid-column: 1; grid-row: 2; padding: 30px 26px 0;
  }
  .em-band.has-media > .em-actions { grid-column: 1; grid-row: 3; padding: 22px 26px 32px; }
  /* the seam runs downward once the picture sits above the copy */
  .em-media::after {
    background: linear-gradient(180deg, rgba(34,38,28,0) 55%, rgba(34,38,28,.92) 100%);
  }
  .em-band.has-media .em-call,
  .em-band.has-media .em-wa { flex: 1 1 100%; }
}


/* ==========================================================================
   v43: video gallery.
   Four vertical Shorts across, matching the shape the videos were shot in.
   The poster sits under the player until it loads, so the card never collapses
   and there is no jump when the iframe arrives.
   ========================================================================== */
.videos-sec .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.video-card.video-short { background: transparent; border: 0; border-radius: 0; cursor: default; }
.video-card.video-short:hover { transform: none; box-shadow: none; }
.video-card.video-short .video-thumb {
  aspect-ratio: 9/16; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(34,38,28,.14);
}
.video-card.video-short .video-thumb img { object-fit: cover; }
.video-card.video-short .video-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card.video-short .video-title {
  padding: 14px 2px 0; font-size: 15px; line-height: 1.5; color: #42473A;
}
/* the play mark is only a placeholder while the player loads */
.video-card.video-short .video-play { pointer-events: none; }

@media (max-width: 1100px) {
  .videos-sec .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 560px) {
  .videos-sec .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .video-card.video-short .video-title { font-size: 13.5px; padding-top: 10px; }
}


/* ==========================================================================
   v46: specialty card pictures are no longer cropped.
   The box was 16/9 while every supplied picture is 840x705, so object-fit was
   cutting a third of each one away, top and bottom. The box now matches the
   pictures, and what the client sends is what shows.
   ========================================================================== */
.bucket-img { aspect-ratio: 840 / 705; }