/* =========================================================================
   DentalRun master theme CSS
   2026-10-11: carries every generic fix made on the Marlow sample (Oct 8 and 9). Sample only content and
   each sample's colours stay in that sample's theme.
   Tokens come from theme.json (--wp--preset--*). Everything visual lives here.
   Section map: 1 tokens, 2 base, 3 buttons, 4 header, 5 hero, 6 sections,
   7 cards and media, 8 each section, 9 footer and mobile bar, 10 motion, 11 mobile
   ========================================================================= */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	/* Semantic color tokens. Values come from theme.json (--wp--preset--*), fallbacks here. */
	--bg-deep: var(--wp--preset--color--bg-deep, #17113F);
	--bg-section: var(--wp--preset--color--bg-section, #1D1650);
	--bg-card: var(--wp--preset--color--bg-card, #261D63);
	--accent: var(--wp--preset--color--accent, #8A4BC9);
	--accent-bright: var(--wp--preset--color--accent-bright, #C9A9EA);
	--accent-deep: var(--wp--preset--color--accent-deep, #6828A0);
	--surface-light: var(--wp--preset--color--surface-light, #F4EFFA);
	--surface-light-2: var(--wp--preset--color--surface-light-2, #E9E0F5);
	--text-on-dark: var(--wp--preset--color--text-on-dark, #F7F4FC);
	--text-muted: var(--wp--preset--color--text-muted, #B9AFD6);
	--text-on-light: var(--wp--preset--color--text-on-light, #201858);
	--text-muted-light: var(--wp--preset--color--text-muted-light, var(--text-muted-light));
	/* RGB triplets for translucent overlays (CSS cannot derive these from a hex token). */
	--bg-deep-rgb: 23, 17, 63;
	--bg-card-rgb: 38, 29, 99;
	--accent-bright-rgb: 201, 169, 234;
	--surface-light-rgb: 244, 239, 250;
	--btn-a: var(--accent-deep);
	--btn-b: var(--accent-bright);
	--glow: #C9A9EA;
	--glow-rgb: 201, 169, 234;
	--grad-light: linear-gradient(180deg, #E6DAF4 0%, #F4EFFA 55%, #FFFFFF 100%);
	--grad-text: linear-gradient(90deg, #A58CCB 0%, #C9A9EA 55%, #E3D3F5 100%);
	--btn-bg: #ffffff;
	--btn-fg: var(--bg-deep);
	--btn-icon-bg: var(--bg-deep);
	--btn-icon-fg: #ffffff;

	--font-display: var(--wp--preset--font-family--display, "Quera", Inter, system-ui, sans-serif);
	--font-body: var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);

	--grad-button: linear-gradient(94deg, var(--btn-a) 0%, var(--btn-b) 100%);
	--grad-section: linear-gradient(180deg, var(--bg-section) 0%, var(--bg-deep) 100%);
	--grad-hero-glow: radial-gradient(60% 55% at 28% 22%, rgba(var(--accent-bright-rgb), .35) 0%, rgba(var(--accent-bright-rgb), 0) 70%);
	--grad-hero-overlay: linear-gradient(157deg, rgba(var(--bg-deep-rgb), .9) 16%, rgba(var(--bg-deep-rgb), .15) 47%, var(--bg-deep) 100%);
	--grad-image-fade: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 60%, rgba(var(--bg-deep-rgb), .88) 98%);
	--grad-image-fade-cream: linear-gradient(180deg, rgba(var(--surface-light-rgb), 0) 70%, rgba(var(--surface-light-rgb), .9) 100%);

	--radius: 20px;
	--radius-sm: 12px;
	--gutter: 20px;
	--section-y: clamp(64px, 9vw, 128px);
	--ease: cubic-bezier(.22, 1, .36, 1);
}

/* 2. Base ---------------------------------------------------------------- */
/* Border box everywhere: width includes padding, so 100% + padding never overflows the screen. */
.dr-main *, .dr-main *::before, .dr-main *::after, .dr-header *, .dr-footer *, .dr-header, .dr-footer { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	background: var(--bg-deep);
	color: var(--text-on-dark);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.dr-motion-ready [data-reveal] { will-change: transform, opacity; }
/* WordPress adds a block gap between top level blocks; the hero must touch the top. */
.wp-site-blocks > * + *, .dr-main > * + * { margin-block-start: 0 !important; }
.wp-site-blocks > header { height: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; margin: 0 0 .5em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.2; }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--text-on-dark); }

.dr-eyebrow {
	font-family: var(--font-body);
	font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent-bright); margin-bottom: 1rem;
}
.dr-section--cream .dr-eyebrow { color: var(--accent-deep); }
.dr-lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.55; color: var(--text-muted); max-width: 56ch; }
.dr-section--cream .dr-lead { color: var(--text-muted-light); }
.dr-link { font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* 3. Buttons ------------------------------------------------------------- */
.dr-btn .wp-block-button__link, .dr-btn--inline {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 52px; padding: 0 28px; border-radius: 999px;
	font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1;
	text-decoration: none; transition: box-shadow .35s var(--ease), transform .35s var(--ease), background-color .3s;
	box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
}
.dr-btn--primary .wp-block-button__link, .dr-btn--primary.dr-btn--inline {
	background: var(--grad-button); color: #fff; border: 0;
}
.dr-btn--primary .wp-block-button__link:hover, .dr-btn--primary.dr-btn--inline:hover {
	color: #fff; transform: translateY(-1px);
	box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, .85), 0 14px 30px -12px rgba(var(--accent-bright-rgb), .55);
}
.dr-btn--ghost .wp-block-button__link, .dr-btn--ghost.dr-btn--inline {
	background: transparent; color: var(--text-on-dark); border: 1px solid rgba(255, 255, 255, .28);
}
.dr-btn--ghost .wp-block-button__link:hover, .dr-btn--ghost.dr-btn--inline:hover {
	border-color: var(--accent-bright); color: #fff; box-shadow: inset 0 -3px 0 0 var(--accent-bright);
}
.dr-section--cream .dr-btn--ghost.dr-btn--inline { color: var(--text-on-light); border-color: rgba(32, 24, 88, .25); }
button.dr-btn--inline { cursor: pointer; width: 100%; }

/* 4. Header -------------------------------------------------------------- */
.dr-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	padding: 14px var(--gutter);
	background: rgba(var(--bg-deep-rgb), 0); backdrop-filter: blur(0px);
	transition: background-color .4s, backdrop-filter .4s, padding .4s, box-shadow .4s;
}
/* Logged in: the WordPress admin bar sits over the top 32px (46px on phones). Push the header below it. */
body.admin-bar .dr-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .dr-header { top: 46px; } }
.dr-header.is-scrolled {
	background: rgba(var(--bg-deep-rgb), .82); backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06); padding: 8px var(--gutter);
}
.dr-header__inner { align-items: center; gap: 24px; }
.dr-header__logo img { width: clamp(150px, 16vw, 220px); height: auto; transition: width .4s; }
.dr-header.is-scrolled .dr-header__logo img { width: clamp(130px, 13vw, 170px); }
.dr-nav { gap: 28px; }
.dr-nav .wp-block-navigation-item__content { color: var(--text-on-dark); font-size: .95rem; font-weight: 500; }
.dr-nav .wp-block-navigation-item__content:hover { color: var(--accent-bright); }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bg-deep); padding: 24px; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--font-display); font-size: 2rem; }
.dr-nav .wp-block-navigation__responsive-container-open, .dr-nav .wp-block-navigation__responsive-container-close { color: var(--text-on-dark); }
.dr-header__cta { margin: 0; }

/* Inner pages: header is always solid, there is no dark hero to sit on. */
body:not(.home) .dr-header { background: rgba(var(--bg-deep-rgb), .92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }

/* 5. Hero ---------------------------------------------------------------- */
.dr-hero {
	position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 140px 0 0; overflow: hidden; isolation: isolate;
}
.dr-hero__media { position: absolute; inset: 0; z-index: -3; }
.dr-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; }
.dr-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero-overlay); }
.dr-hero__glow { position: absolute; inset: 0; z-index: -2; background: var(--grad-hero-glow); pointer-events: none; }
.dr-hero__content { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 6vw, 80px); }
/* Hero strip: three columns over the bottom of the photo (reference: appointment / emergency / hours). */
.dr-hero__strip {
	position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr);
	width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter);
	background: rgba(var(--bg-deep-rgb), .55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.dr-hero__strip-item {
	display: flex; gap: 16px; padding: 28px 28px 28px 0; color: var(--text-on-dark);
	border-right: 1px solid rgba(255, 255, 255, .12);
}
.dr-hero__strip-item + .dr-hero__strip-item { padding-left: 28px; }
.dr-hero__strip-item:last-child { border-right: 0; }
a.dr-hero__strip-item:hover strong { color: var(--accent-bright); }
.dr-hero__strip-icon { flex: 0 0 auto; color: var(--accent-bright); padding-top: 2px; }
.dr-hero__strip-body { display: flex; flex-direction: column; gap: 6px; }
.dr-hero__strip-body strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; transition: color .3s; }
.dr-hero__strip-body > span { color: rgba(247, 244, 252, .78); font-size: .95rem; line-height: 1.5; }
.dr-hero__hours { display: grid; grid-template-columns: auto auto; gap: 2px 18px; }
.dr-hero__hours em { font-style: normal; }
.dr-hero__hours b { font-weight: 500; color: var(--text-on-dark); }
.dr-hero__title {
	font-size: clamp(2.5rem, 6.2vw, 4.5rem); line-height: 1.02; max-width: 14ch; margin-bottom: 1.25rem;
	text-wrap: balance;
}
.dr-hero__lead { max-width: 48ch; margin-bottom: 2rem; color: rgba(247, 244, 252, .82); }
.dr-hero__actions { gap: 14px; margin-bottom: 1.5rem; }
.dr-hero__note { font-size: .9rem; color: var(--text-muted); }

/* 6. Sections ------------------------------------------------------------ */
.dr-section { position: relative; padding: var(--section-y) var(--gutter); background: var(--grad-section); }
.dr-section--cream { background: var(--surface-light); color: var(--text-on-light); }
.dr-section--cream a { color: var(--accent-deep); }
.dr-section__head { max-width: 42rem; margin-bottom: clamp(40px, 5vw, 64px); }
.dr-section__head h2 { text-wrap: balance; }

/* 7. Cards and media ----------------------------------------------------- */
.dr-card {
	background: rgba(var(--bg-card-rgb), .55); border: 1px solid rgba(255, 255, 255, .07);
	border-radius: var(--radius); padding: 28px;
	transition: border-color .35s, transform .35s var(--ease), background-color .35s;
}
.dr-card:hover { border-color: rgba(var(--accent-bright-rgb), .45); transform: translateY(-4px); }
.dr-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-card); }
.dr-media img { width: 100%; height: 100%; object-fit: cover; }
.dr-media::after { content: ""; position: absolute; inset: 0; background: var(--grad-image-fade); pointer-events: none; }
.dr-section--cream .dr-media::after { background: var(--grad-image-fade-cream); }
.dr-media--portrait { aspect-ratio: 4 / 5; }
.dr-media--tall { aspect-ratio: 4 / 5; }
.dr-media--wide { aspect-ratio: 3 / 2; }
.dr-media--map { aspect-ratio: 8 / 3; margin-top: clamp(40px, 5vw, 64px); }
/* Map in Google's own colours, no filter and no shade over it (Ahmad, 2026-10-08: "look as it shows on google map"). */
.dr-media--map iframe { width: 100%; height: 100%; border: 0; display: block; }
.dr-media.dr-media--map::after { display: none; }

/* 8a. Trust strip -------------------------------------------------------- */
.dr-trust { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.dr-trust__list {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08);
	padding: 32px 0;
}
.dr-trust__item { display: flex; flex-direction: column; gap: 6px; }
.dr-trust__num { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: #fff; }
.dr-trust__num--text { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.dr-trust__label { font-size: .95rem; color: var(--text-muted); max-width: 26ch; }

/* 8b. Services: section pins, cards travel sideways (desktop, GSAP). Mobile: swipe track. */
.dr-services { padding-left: 0; padding-right: 0; }
.dr-services__pin { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: 40px 0; }
.dr-services__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
	max-width: 1320px; width: 100%; margin: 0 auto 40px; padding: 0 var(--gutter);
}
.dr-services__head h2 { margin: 0; }
.dr-services__head .dr-lead { margin: 0; }
.dr-services__viewport { width: 100%; overflow: hidden; }
.dr-services__track { display: flex; gap: 24px; padding: 0 max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); width: max-content; }
.dr-service {
	flex: 0 0 auto; width: clamp(280px, 26vw, 360px); display: flex; flex-direction: column;
	background: rgba(var(--bg-card-rgb), .55); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radius); overflow: hidden;
	transition: border-color .35s, transform .35s var(--ease);
}
.dr-service:hover { border-color: rgba(var(--accent-bright-rgb), .45); transform: translateY(-4px); }
.dr-service__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dr-service__media img { width: 100%; height: 100%; object-fit: cover; }
.dr-service__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-card-rgb), 0) 55%, rgba(var(--bg-card-rgb), .95) 100%); }
.dr-service__body { padding: 8px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dr-service__index { font-family: var(--font-display); font-size: 1rem; color: var(--accent-bright); }
.dr-service__title { margin: 0; }
.dr-service__text { margin: 0 0 8px; color: var(--text-muted); font-size: .95rem; flex: 1; }
.dr-services__hint { max-width: 1320px; margin: 24px auto 0; padding: 0 var(--gutter); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* 8c. Doctors ------------------------------------------------------------ */
.dr-doctors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.dr-doctors__grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dr-doctors__grid--4 .dr-doctor__name { font-size: 1.3rem; }
.dr-doctor__name { margin: 20px 0 4px; font-size: 1.5rem; }
.dr-doctor__role { color: var(--accent-deep); font-weight: 600; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.dr-doctor__bio { color: var(--text-muted-light); font-size: .97rem; }

/* 8d. Why us ------------------------------------------------------------- */
.dr-why__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dr-why__list { display: grid; gap: 18px; margin-top: 28px; }
.dr-why__list li { padding-left: 28px; position: relative; color: var(--text-muted); line-height: 1.55; }
.dr-why__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--grad-button); }
.dr-why__list strong { color: var(--text-on-dark); }

/* 8e. Gallery ------------------------------------------------------------ */
.dr-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dr-gallery__caption { margin: 14px 0 0; color: var(--text-muted); font-size: .95rem; }
/* Before and after pairs (2026-10-08): two 2:1 halves stacked, the section colour shows as the divider.
   No shade over the photos, so the result is shown as it is. */
.dr-ba { display: grid; gap: 6px; border-radius: var(--radius); overflow: hidden; }
.dr-ba__half { position: relative; margin: 0; aspect-ratio: 2 / 1; overflow: hidden; background: var(--bg-card); }
.dr-ba__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-ba__tag { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #ffffff; background: rgba(var(--bg-deep-rgb), .62); }
.dr-ba__tag--after { color: var(--bg-deep); background: rgba(255, 255, 255, .9); }

/* 8f. Reviews ------------------------------------------------------------ */
.dr-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dr-review { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: 0 20px 40px -30px rgba(32, 24, 88, .35); }
.dr-review__stars { color: #D9A441; letter-spacing: .1em; margin-bottom: 14px; }
.dr-review__quote { margin: 0 0 20px; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; color: var(--text-on-light); }
.dr-review__meta { margin: 0; font-size: .9rem; color: var(--text-muted-light); }
.dr-review__meta strong { color: var(--text-on-light); margin-right: 8px; }

/* 8g. FAQ ---------------------------------------------------------------- */
.dr-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.dr-faq__list { display: grid; gap: 12px; }
.dr-faq__item { border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-sm); background: rgba(var(--bg-card-rgb), .4); padding: 0 24px; transition: border-color .3s; }
.dr-faq__item[open] { border-color: rgba(var(--accent-bright-rgb), .45); }
.dr-faq__item summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 600; position: relative; }
.dr-faq__item summary::-webkit-details-marker { display: none; }
.dr-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent-bright); transition: transform .3s; }
.dr-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dr-faq__item p { padding-bottom: 20px; color: var(--text-muted); }

/* 8h. Contact ------------------------------------------------------------ */
.dr-contact { overflow: hidden; isolation: isolate; }
.dr-contact__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 75% 30%, rgba(var(--accent-bright-rgb), .22) 0%, rgba(var(--accent-bright-rgb), 0) 70%); pointer-events: none; }
.dr-contact__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.dr-contact__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 28px 0 32px; }
.dr-contact__facts dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 6px; }
.dr-contact__facts dd { margin: 0; color: var(--text-on-dark); line-height: 1.5; }
.dr-contact__form { padding: 32px; }
.dr-form { display: grid; gap: 14px; }
.dr-form h3 { margin-bottom: 4px; }
.dr-form label { display: grid; gap: 6px; font-size: .85rem; color: var(--text-muted); }
.dr-form input, .dr-form textarea {
	width: 100%; padding: 12px 14px; border-radius: 10px; font: inherit; font-size: 1rem;
	background: rgba(var(--bg-deep-rgb), .6); border: 1px solid rgba(255, 255, 255, .12); color: var(--text-on-dark);
}
.dr-form input:focus, .dr-form textarea:focus { outline: 2px solid var(--accent-bright); outline-offset: 0; border-color: transparent; }
.dr-form__note { font-size: .8rem; color: var(--text-muted); margin: 0; }

/* 9. Footer and mobile bar ---------------------------------------------- */
.dr-footer { background: var(--bg-deep); padding: clamp(48px, 6vw, 80px) var(--gutter) 40px; border-top: 1px solid rgba(255, 255, 255, .06); }
.dr-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.dr-footer__brand img { width: 220px; margin-bottom: 16px; }
.dr-footer__brand p, .dr-footer__col p, .dr-footer__col li { color: var(--text-muted); font-size: .95rem; line-height: 1.6; }
.dr-footer__col h4 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark); margin-bottom: 12px; }
.dr-footer__col a { color: var(--text-muted); }
.dr-footer__col a:hover { color: var(--accent-bright); }
.dr-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .06); }
.dr-footer__bottom p { margin: 0; font-size: .85rem; color: var(--text-muted); }
.dr-footer__bottom a { color: var(--text-muted); }
.dr-mobile-bar { display: none; }

/* 10. Motion (initial states; JS animates from these) ------------------- */
.dr-motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.dr-motion [data-reveal="stagger"] { opacity: 1; transform: none; }
.dr-motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(28px); }
.dr-motion .dr-hero__title { visibility: hidden; }
.dr-motion .dr-hero__title.is-split { visibility: visible; }
.dr-img-scale img { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.dr-motion [data-reveal], .dr-motion [data-reveal="stagger"] > * { opacity: 1; transform: none; }
	.dr-motion .dr-hero__title { visibility: visible; }
	.dr-card, .dr-btn .wp-block-button__link { transition: none; }
}

/* 11. Mobile and tablet ------------------------------------------------- */
@media (max-width: 1023px) {
	.dr-why__grid, .dr-faq__grid, .dr-contact__grid, .dr-services__head { grid-template-columns: 1fr; }
	.dr-services__pin { min-height: 0; }
	.dr-services__viewport { overflow-x: auto; scrollbar-width: none; }
	.dr-services__hint { display: none; }
	.dr-trust__list { grid-template-columns: repeat(2, 1fr); }
	.dr-doctors__grid, .dr-doctors__grid--4, .dr-reviews__grid, .dr-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.dr-footer__grid { grid-template-columns: 1fr 1fr; }
	.dr-header .dr-header__cta { display: none; }
}

@media (max-width: 767px) {
	:root { --section-y: 64px; }
	body { padding-bottom: 72px; }
	.dr-hero { min-height: 0; padding-top: 110px; }
	.dr-hero__strip { grid-template-columns: 1fr; padding: 0 var(--gutter); }
	.dr-hero__strip-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 20px 0; }
	.dr-hero__strip-item + .dr-hero__strip-item { padding-left: 0; }
	.dr-hero__strip-item:last-child { border-bottom: 0; }
	.dr-hero__media img { object-position: 60% 30%; }
	.dr-hero__title { font-size: 2.5rem; max-width: 12ch; }
	.dr-hero__actions { flex-direction: column; align-items: stretch; }
	.dr-hero__actions .wp-block-button, .dr-hero__actions .wp-block-button__link { width: 100%; }
	.dr-trust__list { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px 0; }

	/* Services become a horizontal swipe track (animation 4). */
	.dr-services__pin { min-height: 0; padding: 0; }
	.dr-services__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
	.dr-services__viewport::-webkit-scrollbar { display: none; }
	.dr-services__track { gap: 14px; padding: 4px var(--gutter) 16px; }
	.dr-service { width: 78vw; scroll-snap-align: start; }
	.dr-services__hint { display: none; }

	.dr-doctors__grid, .dr-doctors__grid--4, .dr-reviews__grid, .dr-gallery__grid { grid-template-columns: 1fr; }
	.dr-media--map { aspect-ratio: 4 / 3; }
	.dr-contact__facts { grid-template-columns: 1fr; }
	.dr-contact__form { padding: 24px; }
	.dr-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.dr-footer__bottom { flex-direction: column; }

	/* Sticky bottom bar: Call and Book. */
	.dr-mobile-bar {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
		background: rgba(var(--bg-deep-rgb), .92); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, .08);
	}
	.dr-mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font-weight: 600; color: #fff; }
	.dr-mobile-bar__call { border: 1px solid rgba(255, 255, 255, .3); }
	.dr-mobile-bar__book { background: var(--grad-button); }
}

/* 12. Reference treatment (2026-09-22): corner glows, light fade, gradient words, pills, arrow buttons */
.dr-section { background: var(--bg-deep); isolation: isolate; }
.dr-section::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(55% 60% at 0% 0%, rgba(var(--glow-rgb), .55) 0%, rgba(var(--glow-rgb), 0) 70%),
		radial-gradient(45% 55% at 100% 100%, rgba(var(--glow-rgb), .42) 0%, rgba(var(--glow-rgb), 0) 70%);
}
.dr-main > section:nth-of-type(even)::before {
	background:
		radial-gradient(50% 60% at 100% 0%, rgba(var(--glow-rgb), .5) 0%, rgba(var(--glow-rgb), 0) 70%),
		radial-gradient(45% 55% at 0% 100%, rgba(var(--glow-rgb), .38) 0%, rgba(var(--glow-rgb), 0) 70%);
}
.dr-section--cream { background: var(--grad-light); color: var(--text-on-light); }
.dr-section--cream::before { display: none; }
.dr-section--cream {
	--btn-bg: var(--bg-deep); --btn-fg: #ffffff; --btn-icon-bg: #ffffff; --btn-icon-fg: var(--bg-deep);
}
.dr-hero__glow { background: radial-gradient(60% 55% at 22% 18%, rgba(var(--glow-rgb), .45) 0%, rgba(var(--glow-rgb), 0) 70%), radial-gradient(40% 50% at 100% 100%, rgba(var(--glow-rgb), .35) 0%, rgba(var(--glow-rgb), 0) 70%); }
.dr-hero__media::after { background: linear-gradient(157deg, rgba(var(--bg-deep-rgb), .72) 10%, rgba(var(--bg-deep-rgb), .18) 50%, rgba(var(--bg-deep-rgb), .8) 100%); }
/* Hero video plays everywhere (muted, inline). Phones in Low Power Mode fall back to the poster on their own. */
.dr-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
@media (prefers-reduced-motion: reduce) { .dr-hero__video { display: none !important; } }
.dr-hero__strip { background: rgba(var(--bg-deep-rgb), .62); }
.dr-contact__glow { display: none; }

/* Gradient words in headings (not on the split hero H1). */
.dr-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dr-section--cream .dr-grad { background: linear-gradient(90deg, #5A2290 0%, #6828A0 60%, #8A4BC9 100%); -webkit-background-clip: text; background-clip: text; }

/* Eyebrow becomes a pill with an asterisk, like the reference labels. */
.dr-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .22); background: rgba(var(--bg-deep-rgb), .35);
	font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-on-dark);
	margin-bottom: 1.25rem;
}
.dr-eyebrow::before { content: "\2733"; font-size: 1rem; line-height: 1; color: var(--text-on-dark); }
.dr-section--cream .dr-eyebrow { border-color: rgba(var(--bg-deep-rgb), .3); background: rgba(255, 255, 255, .5); color: var(--text-on-light); }
.dr-section--cream .dr-eyebrow::before { color: var(--text-on-light); }

/* Buttons: pill with an arrow circle on the right. */
.dr-btn .wp-block-button__link, .dr-btn--inline { padding: 6px 6px 6px 26px; gap: 14px; min-height: 56px; }
.dr-btn--primary .wp-block-button__link, .dr-btn--primary.dr-btn--inline { background: var(--btn-bg); color: var(--btn-fg); }
.dr-btn--primary .wp-block-button__link::after, .dr-btn--primary.dr-btn--inline::after {
	content: ""; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
	background: var(--btn-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .35s var(--ease), background-color .3s;
}
.dr-section--cream .dr-btn--primary .wp-block-button__link::after, .dr-section--cream .dr-btn--primary.dr-btn--inline::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071C21' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); }
.dr-btn--primary .wp-block-button__link:hover, .dr-btn--primary.dr-btn--inline:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(var(--glow-rgb), .6); }
.dr-btn--primary .wp-block-button__link:hover::after, .dr-btn--primary.dr-btn--inline:hover::after { transform: rotate(45deg); }
.dr-btn--ghost .wp-block-button__link, .dr-btn--ghost.dr-btn--inline { padding: 0 26px; border-color: rgba(255, 255, 255, .35); }
.dr-btn--ghost .wp-block-button__link:hover, .dr-btn--ghost.dr-btn--inline:hover { border-color: #fff; box-shadow: none; background: rgba(255, 255, 255, .08); }
.dr-mobile-bar__book { background: #fff; color: var(--bg-deep) !important; }
.dr-link { color: var(--text-on-dark); }
.dr-link:hover { color: var(--accent-bright); }
.dr-section--cream .dr-link { color: var(--text-on-light); }

/* Cards on dark: deeper glass, like the reference rows. */
.dr-card, .dr-service, .dr-faq__item { background: rgba(var(--bg-deep-rgb), .55); border-color: rgba(255, 255, 255, .08); }
.dr-service__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 55%, rgba(var(--bg-deep-rgb), .92) 100%); }
.dr-review { box-shadow: 0 24px 50px -30px rgba(var(--bg-deep-rgb), .45); }
.dr-trust__list { border-color: rgba(255, 255, 255, .1); }

/* 13. Light contact section and the Contact page (reference: teal mist to white, pale teal fields) */
.dr-section--cream .dr-form input, .dr-section--cream .dr-form textarea {
	background: rgba(var(--glow-rgb), .12); border-color: rgba(var(--bg-deep-rgb), .08); color: var(--text-on-light);
}
.dr-section--cream .dr-form input::placeholder, .dr-section--cream .dr-form textarea::placeholder { color: rgba(var(--bg-deep-rgb), .45); }
.dr-section--cream .dr-form input:focus, .dr-section--cream .dr-form textarea:focus { outline-color: var(--accent-deep); }
.dr-section--cream .dr-form label { color: var(--text-on-light); font-weight: 600; font-size: 1rem; }
.dr-section--cream .dr-form__note { color: var(--text-muted-light); }
.dr-section--cream .dr-contact__form { background: rgba(255, 255, 255, .55); border-color: rgba(var(--bg-deep-rgb), .08); }
.dr-section--cream .dr-contact__facts dt { color: var(--accent-deep); }
.dr-section--cream .dr-contact__facts dd, .dr-section--cream .dr-contact__facts a { color: var(--text-on-light); }
.dr-section--cream .dr-lead { color: var(--text-muted-light); }

.dr-main--page { padding-top: 0; }
.dr-cpage { padding-top: calc(var(--section-y) + 110px); }
.dr-cpage__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.dr-cpage__title { margin: 0; font-size: clamp(3rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.03em; }
.dr-cpage__intro { margin: 0; max-width: 44ch; justify-self: end; }
.dr-cpage__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.dr-form--page { gap: 20px; }
.dr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dr-form input[type="date"] { min-height: 52px; }
.dr-form__check { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; font-weight: 500 !important; }
.dr-form__check input { width: 22px; height: 22px; accent-color: var(--bg-deep); margin: 0; }
.dr-form__check a { text-decoration: underline; color: inherit; }
.dr-form--page button.dr-btn--inline { width: auto; justify-self: start; }
.dr-media--plain::after { display: none; }
.dr-cpage__photo { aspect-ratio: 4 / 5; border-radius: 28px; }
.dr-cpage-info__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.dr-media--nomargin { margin-top: 0; aspect-ratio: 4 / 3; }

@media (max-width: 1023px) {
	.dr-cpage__head, .dr-cpage__grid, .dr-cpage-info__grid { grid-template-columns: 1fr; }
	.dr-cpage__intro { justify-self: start; }
}
@media (max-width: 767px) {
	.dr-form__row { grid-template-columns: 1fr; }
	.dr-cpage { padding-top: 120px; }
	.dr-form--page button.dr-btn--inline { width: 100%; }
}

/* Reviews on dark */
.dr-reviews:not(.dr-section--cream) .dr-review { background: rgba(var(--bg-deep-rgb), .55); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
.dr-reviews:not(.dr-section--cream) .dr-review__quote { color: var(--text-on-dark); }
.dr-reviews:not(.dr-section--cream) .dr-review__meta { color: var(--text-muted); }
.dr-reviews:not(.dr-section--cream) .dr-review__meta strong { color: var(--text-on-dark); }
.dr-section--cream .dr-gallery__caption { color: var(--text-muted-light); }

/* 14. Review 4 fixes (2026-09-22): form sizing, full bleed header gradient, nav size, light trust strip, light service cards */
.dr-form input, .dr-form textarea, .dr-form button { box-sizing: border-box; }
.dr-form input { min-height: 54px; }
.dr-form input[type="date"] { min-height: 54px; line-height: 1.2; }
.dr-form__row { align-items: start; }

/* Contact page top fade (2026-10-08, Ahmad: the old one showed lines). Same recipe as Royal Dental's
   approved contact page: ONE colour (the brand's deep teal) diluted to white along the curve measured
   row by row from Ahmad's reference (Desktop/Contact sheet_Gradient.png), 29 opaque stops so no turn in
   the curve shows as a line, and a 4.5% grain layer that breaks up 8 bit banding. The reference turns
   sharply at the foot of its menu (hidden there by a hairline); that turn is smoothed out here, because
   it showed as an edge under our header. Stacked layouts (<=1023px) run the same curve a little shorter.
   Rebrand by changing --fade-top and --fade-mid only. */
.dr-cpage {
	/* Top: the footer colour (Ahmad, 2026-10-08), so header, page top and footer match. It eases into the
	   brand teal by about a third of the way down, then the teal fades to white. The footer colour alone,
	   diluted to white, turned the middle grey; the teal keeps it teal. */
	--fade-top: var(--bg-deep);
	--fade-mid: color-mix(in srgb, var(--glow) 62%, var(--bg-deep));
	--fade: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 100.0%, var(--fade-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 98.0%, var(--fade-mid)) 96.8%, #fff) 19.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 92.2%, var(--fade-mid)) 93.5%, #fff) 32.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 83.8%, var(--fade-mid)) 90.3%, #fff) 43.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 72.5%, var(--fade-mid)) 86.9%, #fff) 52.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 61.0%, var(--fade-mid)) 83.8%, #fff) 61.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 48.0%, var(--fade-mid)) 80.5%, #fff) 69.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 35.6%, var(--fade-mid)) 77.3%, #fff) 78px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 24.3%, var(--fade-mid)) 74.2%, #fff) 86.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 14.5%, var(--fade-mid)) 71.1%, #fff) 94.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 6.5%, var(--fade-mid)) 67.9%, #fff) 103.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 1.2%, var(--fade-mid)) 64.5%, #fff) 111.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 61.5%, #fff) 118.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 58.4%, #fff) 126px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 55.4%, #fff) 133.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 52.3%, #fff) 140.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 49.2%, #fff) 147.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 46.2%, #fff) 154.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 43.2%, #fff) 162px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 39.7%, #fff) 170.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 36.4%, #fff) 178.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 33.1%, #fff) 187.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 30.0%, #fff) 195.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 26.6%, #fff) 205.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 23.5%, #fff) 214.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 20.2%, #fff) 225.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 17.0%, #fff) 237.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 13.9%, #fff) 250.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 10.8%, #fff) 266.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 7.7%, #fff) 285.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 4.8%, #fff) 309.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 2.8%, #fff) 333.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 1.5%, #fff) 357.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.9%, #fff) 381.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.5%, #fff) 405.6px, #fff 428.4px);
	--fade-h: 429px;
	background: var(--fade) top / 100% var(--fade-h) no-repeat, #ffffff;
}
/* The intro sits on the pale part of the fade; one step darker keeps it readable (4.5:1 or more) at every width. */
.dr-cpage .dr-cpage__intro { color: color-mix(in srgb, var(--text-muted-light) 65%, var(--text-on-light)); }
.dr-cpage::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fade-h) + 80px);
	z-index: -1; pointer-events: none; opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
@media (max-width: 1023px) {
	.dr-cpage {
		--fade: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 100.0%, var(--fade-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 98.0%, var(--fade-mid)) 96.8%, #fff) 16px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 92.2%, var(--fade-mid)) 93.5%, #fff) 27px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 83.8%, var(--fade-mid)) 90.3%, #fff) 36px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 72.5%, var(--fade-mid)) 86.9%, #fff) 44px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 61.0%, var(--fade-mid)) 83.8%, #fff) 51px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 48.0%, var(--fade-mid)) 80.5%, #fff) 58px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 35.6%, var(--fade-mid)) 77.3%, #fff) 65px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 24.3%, var(--fade-mid)) 74.2%, #fff) 72px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 14.5%, var(--fade-mid)) 71.1%, #fff) 79px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 6.5%, var(--fade-mid)) 67.9%, #fff) 86px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 1.2%, var(--fade-mid)) 64.5%, #fff) 93px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 61.5%, #fff) 99px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 58.4%, #fff) 105px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 55.4%, #fff) 111px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 52.3%, #fff) 117px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 49.2%, #fff) 123px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 46.2%, #fff) 129px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 43.2%, #fff) 135px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 39.7%, #fff) 142px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 36.4%, #fff) 149px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 33.1%, #fff) 156px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 30.0%, #fff) 163px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 26.6%, #fff) 171px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 23.5%, #fff) 179px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 20.2%, #fff) 188px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 17.0%, #fff) 198px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 13.9%, #fff) 209px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 10.8%, #fff) 222px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 7.7%, #fff) 238px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 4.8%, #fff) 258px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 2.8%, #fff) 278px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 1.5%, #fff) 298px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.9%, #fff) 318px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.5%, #fff) 338px, #fff 357px);
		--fade-h: 357px;
	}
}
body:has(.dr-cpage) .dr-header { background: transparent; backdrop-filter: none; box-shadow: none; }
body:has(.dr-cpage) .dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .82); backdrop-filter: blur(14px); }
.dr-cpage__title, .dr-cpage .dr-form label, .dr-cpage .dr-form__check { color: var(--text-on-light); }

/* Nav text a step bigger. */
.dr-nav .wp-block-navigation-item__content { font-size: 1.05rem; font-weight: 500; }
.dr-nav { gap: 32px; }

/* Trust strip on light. */
.dr-trust.dr-section--cream { background: var(--grad-light); }
.dr-section--cream .dr-trust__list { border-color: rgba(var(--bg-deep-rgb), .12); }
.dr-section--cream .dr-trust__num { color: var(--text-on-light); }
.dr-section--cream .dr-trust__label { color: var(--text-muted-light); }

/* Service cards: light with a soft gradient, dark text. */
.dr-service {
	background: linear-gradient(180deg, #FFFFFF 0%, #EFE8F8 100%);
	border: 1px solid rgba(255, 255, 255, .6); color: var(--text-on-light);
}
.dr-service:hover { border-color: rgba(var(--glow-rgb), .5); }
.dr-service__media::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .92) 100%); }
.dr-service__index { color: var(--accent-deep); }
.dr-service__title { color: var(--text-on-light); }
.dr-service__text { color: var(--text-muted-light); }
.dr-service .dr-link { color: var(--text-on-light); }
.dr-service .dr-link:hover { color: var(--accent-deep); }

/* 15. Review 5 (2026-09-22): glassy hero strip, stats + services as one light sheet, full image service cards, new rhythm */
.dr-hero__strip {
	background: rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .3);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.dr-hero__strip-item { border-right-color: rgba(255, 255, 255, .25); }
.dr-hero__strip-body > span { color: rgba(255, 255, 255, .85); }

/* Stats strip fades teal mist to white; services continues white to teal mist, so the two read as one sheet. */
.dr-trust.dr-section--cream { background: linear-gradient(180deg, #D7C6EE 0%, #EFE8F8 55%, #FFFFFF 100%); padding-bottom: 24px; }
.dr-section--cream .dr-trust__list { border-bottom: 0; }
.dr-services.dr-section--cream { background: linear-gradient(180deg, #FFFFFF 0%, #F4EFFA 45%, #D7C6EE 100%); }
.dr-services.dr-section--cream::before { display: none; }
.dr-services.dr-section--cream .dr-services__hint { color: var(--text-muted-light); }

/* Service cards: the photo fills the card, text sits on a bottom up gradient. */
.dr-service {
	position: relative; aspect-ratio: 3 / 4; display: block; overflow: hidden;
	background: var(--bg-deep); border: 0; color: #fff; box-shadow: 0 30px 50px -30px rgba(var(--bg-deep-rgb), .55);
}
.dr-service__media { position: absolute; inset: 0; aspect-ratio: auto; }
.dr-service__media img { width: 100%; height: 100%; object-fit: cover; }
.dr-service__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 30%, rgba(var(--bg-deep-rgb), .55) 62%, rgba(var(--bg-deep-rgb), .96) 100%); }
.dr-service__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; gap: 6px; flex: none; }
.dr-service__index { color: var(--accent-bright); }
.dr-service__title { color: #fff; font-size: 1.35rem; }
.dr-service__text { color: rgba(255, 255, 255, .82); }
.dr-service .dr-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.dr-service .dr-link:hover { color: var(--accent-bright); }

/* Doctors on dark. */
.dr-doctors:not(.dr-section--cream) .dr-doctor__name { color: var(--text-on-dark); }
.dr-doctors:not(.dr-section--cream) .dr-doctor__role { color: var(--accent-bright); }
.dr-doctors:not(.dr-section--cream) .dr-doctor__bio { color: var(--text-muted); }

/* Why us on light. */
.dr-why.dr-section--cream .dr-why__list li { color: var(--text-muted-light); }
.dr-why.dr-section--cream .dr-why__list strong { color: var(--text-on-light); }

/* Gallery on dark. */
.dr-gallery:not(.dr-section--cream) .dr-gallery__caption { color: var(--text-muted); }

/* 16. Review 6 (2026-09-22): no dead space around services, seamless section edges, lighter dark sections */
.dr-trust.dr-section--cream { padding-top: clamp(32px, 4vw, 48px); padding-bottom: 8px; }
.dr-services.dr-section--cream { padding-top: 0; padding-bottom: 0; }
.dr-services__pin { min-height: 100svh; justify-content: center; padding: 24px 0 32px; }
.dr-services__head { margin-bottom: 28px; }
.dr-service { width: auto; height: min(62svh, 560px); aspect-ratio: 3 / 4; }
.dr-services__hint { margin-top: 18px; }
@media (max-width: 1023px) {
	.dr-services__pin { min-height: 0; padding: 32px 0 48px; }
	.dr-service { width: clamp(260px, 60vw, 340px); height: auto; }
}
@media (max-width: 767px) { .dr-service { width: 78vw; } }

/* Dark sections that sit between light ones: start from the light tone above, settle on a softer deep teal,
   and lift again at the bottom so the next light section does not hit a hard edge. */
.dr-doctors:not(.dr-section--cream), .dr-gallery:not(.dr-section--cream), .dr-faq:not(.dr-section--cream) {
	background: linear-gradient(180deg, var(--bleed-from, #FFFFFF) 0%, #6828A0 9%, #2C2270 26%, #1A1348 60%, #231B5A 88%, #6828A0 100%);
}
.dr-doctors:not(.dr-section--cream) { --bleed-from: #D7C6EE; }
.dr-doctors:not(.dr-section--cream)::before, .dr-gallery:not(.dr-section--cream)::before, .dr-faq:not(.dr-section--cream)::before {
	background: radial-gradient(50% 50% at 100% 40%, rgba(var(--glow-rgb), .35) 0%, rgba(var(--glow-rgb), 0) 70%);
}
/* Light sections start from the teal the dark section ended on. */
.dr-why.dr-section--cream, .dr-reviews.dr-section--cream, .dr-contact.dr-section--cream {
	background: linear-gradient(180deg, #6828A0 0%, #B596DE 10%, #EFE8F8 48%, #FFFFFF 100%);
}

/* 17. Mobile menu drawer (2026-09-22). backdrop-filter on the header made it the containing block for the
   fixed overlay, so the overlay only covered the header. Drop the filter while the menu is open. */
html.has-modal-open .dr-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open {
	left: auto; right: 0; width: min(75vw, 420px);
	background: linear-gradient(180deg, #D7C6EE 0%, #EFE8F8 45%, #FFFFFF 100%);
	box-shadow: -30px 0 60px rgba(var(--bg-deep-rgb), .35);
	padding: 96px 28px 32px; overflow-y: auto; box-sizing: border-box;
}
/* Dim the page outside the drawer with a huge shadow spread (a fixed pseudo element landed inside the drawer on phones). */
.dr-nav .wp-block-navigation__responsive-container.is-menu-open::before { content: none; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open { box-shadow: 0 0 0 100vmax rgba(var(--bg-deep-rgb), .55), -30px 0 60px rgba(var(--bg-deep-rgb), .35); }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; align-items: flex-start; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--text-on-light); font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em;
}
.dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--accent-deep); }
.dr-nav .wp-block-navigation__responsive-container-close { color: var(--text-on-light); top: 22px; right: 22px; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 6px; border-radius: 4px; }
.dr-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.dr-nav .wp-block-navigation__responsive-container-open { padding: 6px; }
.dr-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* 18. Review 7 (2026-09-22): the section bleed looked muddy. Back to clean separated sections:
   dark sections on the softer deep teal with corner glows, light sections on their own mist to white fade. */
.dr-doctors:not(.dr-section--cream), .dr-gallery:not(.dr-section--cream), .dr-faq:not(.dr-section--cream) { background: var(--bg-section); }
.dr-doctors:not(.dr-section--cream)::before, .dr-gallery:not(.dr-section--cream)::before, .dr-faq:not(.dr-section--cream)::before {
	background:
		radial-gradient(55% 60% at 0% 0%, rgba(var(--glow-rgb), .45) 0%, rgba(var(--glow-rgb), 0) 70%),
		radial-gradient(45% 55% at 100% 100%, rgba(var(--glow-rgb), .35) 0%, rgba(var(--glow-rgb), 0) 70%);
}
.dr-gallery:not(.dr-section--cream)::before {
	background:
		radial-gradient(50% 60% at 100% 0%, rgba(var(--glow-rgb), .42) 0%, rgba(var(--glow-rgb), 0) 70%),
		radial-gradient(45% 55% at 0% 100%, rgba(var(--glow-rgb), .3) 0%, rgba(var(--glow-rgb), 0) 70%);
}
.dr-why.dr-section--cream, .dr-reviews.dr-section--cream, .dr-contact.dr-section--cream { background: var(--grad-light); }

/* 19. Phone performance (2026-09-23): no blur filters over the video, cheap dim layer, smaller video for phones */
body.dr-motion-ready [data-reveal] { will-change: auto; }
.dr-nav .wp-block-navigation__responsive-container.is-menu-open { box-shadow: -30px 0 60px rgba(var(--bg-deep-rgb), .35); }
/* Dim layer lives on the body, below the fixed header (z 100), so the drawer inside the header always paints above it. */
html.has-modal-open body::before { content: ""; position: fixed; inset: 0; background: rgba(var(--bg-deep-rgb), .55); z-index: 90; pointer-events: none; }
@media (max-width: 1023px) {
	.dr-header, .dr-header.is-scrolled, .dr-hero__strip, .dr-mobile-bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
	.dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .96); }
	.dr-hero__strip { background: rgba(var(--bg-deep-rgb), .55); }
	.dr-mobile-bar { background: rgba(var(--bg-deep-rgb), .96); }
	.dr-service, .dr-card { transition: none; }
	.dr-hero__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .55) 0%, rgba(var(--bg-deep-rgb), .25) 45%, rgba(var(--bg-deep-rgb), .85) 100%); }
}


/* Reviews as Google reviews, swipeable (2026-10-08, Ahmad). A native scroll track with snap points:
   swipe on phones, trackpad or the arrow buttons on desktop. Three cards show on desktop, two on
   tablets, one and a peek of the next on phones so it is clear there is more. */
.dr-greviews__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
.dr-greviews__summary { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: #ffffff; box-shadow: 0 14px 30px -24px rgba(var(--bg-deep-rgb), .5); color: var(--text-on-light); font-size: .95rem; }
.dr-greviews__g { display: inline-flex; width: 26px; height: 26px; }
.dr-greviews__g svg, .dr-greview__g svg { width: 100%; height: 100%; display: block; }
.dr-greviews__label strong { font-weight: 600; }
.dr-greviews__score { font-weight: 700; font-size: 1.05rem; margin-left: 4px; }
.dr-greviews__stars, .dr-greview__stars { color: #FBBC04; letter-spacing: .06em; }
.dr-greviews__nav { display: flex; gap: 10px; }
.dr-greviews__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--bg-deep-rgb), .12); background: #ffffff; color: var(--bg-deep); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.dr-greviews__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dr-greviews__btn:hover:not(:disabled) { background: var(--bg-deep); color: #ffffff; }
.dr-greviews__btn:disabled { opacity: .35; cursor: default; }
/* The track reaches into the page gutter on both sides: room for the card shadows on desktop, and on
   phones the next card runs off the screen edge instead of being cut at the gutter. */
.dr-greviews__track { display: flex; gap: 24px; margin: 0 calc(-1 * var(--gutter)) -40px; padding: 6px var(--gutter) 46px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.dr-greviews__track::-webkit-scrollbar { display: none; }
.dr-greviews__track:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: var(--radius); }
.dr-greview { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; padding: 26px 28px 30px; box-shadow: 0 22px 36px -26px rgba(var(--bg-deep-rgb), .42); } /* shadow kept inside the 20px the track has on each side */
.dr-greview__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dr-greview__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #ffffff; font-weight: 600; font-size: 1.05rem; }
.dr-greview__who { display: grid; line-height: 1.3; color: var(--text-on-light); }
.dr-greview__who strong { font-weight: 600; }
.dr-greview__who span { font-size: .85rem; color: var(--text-muted-light); }
.dr-greview__g { margin-left: auto; width: 22px; height: 22px; flex: 0 0 auto; }
.dr-greview__stars { margin: 0 0 10px; font-size: 1.05rem; }
.dr-greview__text { margin: 0; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; font-weight: 400; color: var(--text-on-light); }
@media (max-width: 1023px) { .dr-greview { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px) {
	.dr-greviews__track { gap: 16px; }
	.dr-greview { flex-basis: 86%; padding: 22px 22px 26px; }
	.dr-greviews__summary { font-size: .9rem; }
	.dr-greviews__nav { display: none; } /* phones swipe; the peeking card shows there is more */
}

/* Section heads, titles and FAQ (2026-10-09, Ahmad: heads looked like they were floating, questions too small,
   call button too close to the line above it).
   1. WordPress centres every block inside a constrained section, so a head capped at 42rem sat in the middle
      while the cards below start at the left edge. The head now spans the content width (left edges line up)
      and only its text is capped. */
.dr-section__head { max-width: 1320px; }
.dr-section__head > h2 { max-width: 48rem; }
.dr-section__head > .dr-lead { max-width: 42rem; }
/* 2. Gutenverse prints "body h2 { font-size: 2rem }", which beat our h2 size and froze every section title at
      32px. Back to the design scale: 56px on desktop, 32px on phones (docs/design-direction.md). */
body .dr-section h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
/* 3. Questions a size up, so they read as questions next to the bigger title. */
.dr-faq__item summary { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.35; padding: 24px 44px 24px 0; }
.dr-faq__item p { font-size: 1.02rem; line-height: 1.6; }
/* 4. Breathing room between the lead line and the call button under it. */
.dr-section__head .dr-lead + .dr-btn { margin-top: 28px; }
/* 5. The bigger titles made the pinned services head taller, and its label slid under the fixed header on
      900px tall screens. Desktop only (smaller screens do not pin): keep 96px clear for the header and let
      the cards give up height on short screens instead (360px minimum, 560px as before at most). */
@media (min-width: 1024px) {
	.dr-services__pin { padding-top: 96px; }
	.dr-service { height: clamp(360px, calc(100svh - 400px), 560px); }
}

/* Section bleeds (2026-10-09, Ahmad: the light sections bled sky blue against the dark ones; bleed the dark
   blue instead). Same curve as the approved contact page fade (docs/reference/make-contact-fade.py, curve
   x0.95 on desktop, x0.8 on phones): it starts on the exact colour of the dark neighbour, eases into the
   brand teal and ends on white, so the join has no line. Down = dark at the top of a light section,
   up = dark at its bottom. Replaces the sky blue #B596DE / #D7C6EE tints. */
.dr-section--cream {
	--bleed-dark: var(--bg-section);
	--bleed-mid: color-mix(in srgb, var(--glow) 62%, var(--bg-deep));
	--bleed-down: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 15.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 25.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 34.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 41.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 48.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 55.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 61.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 68.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 75px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 81.7px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 88.3px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 94px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 99.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 105.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 111.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 116.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 122.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 128.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 134.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 141.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 148.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 154.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 162.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 170px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 178.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 188.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 198.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 210.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 226.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 245.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 264.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 283.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 302.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 321.1px, #fff 339.1px);
	--bleed-up: linear-gradient(0deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 15.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 25.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 34.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 41.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 48.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 55.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 61.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 68.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 75px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 81.7px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 88.3px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 94px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 99.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 105.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 111.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 116.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 122.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 128.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 134.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 141.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 148.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 154.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 162.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 170px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 178.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 188.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 198.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 210.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 226.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 245.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 264.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 283.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 302.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 321.1px, #fff 339.1px);
	--bleed-h: 340px;
}
@media (max-width: 767px) {
	.dr-section--cream {
		--bleed-down: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 12.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 21.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 28.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 35.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 40.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 46.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 52px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 57.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 63.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 68.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 74.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 79.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 84px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 88.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 93.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 98.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 103.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 108px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 113.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 119.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 124.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 130.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 136.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 143.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 150.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 158.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 167.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 177.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 190.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 206.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 222.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 238.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 254.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 270.4px, #fff 285.6px);
		--bleed-up: linear-gradient(0deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 12.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 21.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 28.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 35.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 40.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 46.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 52px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 57.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 63.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 68.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 74.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 79.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 84px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 88.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 93.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 98.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 103.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 108px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 113.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 119.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 124.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 130.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 136.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 143.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 150.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 158.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 167.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 177.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 190.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 206.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 222.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 238.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 254.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 270.4px, #fff 285.6px);
		--bleed-h: 286px;
	}
}
/* Under the hero: starts on the footer colour, the darkest tone of the hero overlay. The stats move down so
   the numbers and labels sit on the light part of the fade (4.5:1 or better). */
.dr-trust.dr-section--cream { --bleed-dark: var(--bg-deep); background: var(--bleed-down) top / 100% var(--bleed-h) no-repeat, #ffffff; padding-top: 120px; }
/* After a dark section: starts on that section's colour. */
.dr-why.dr-section--cream, .dr-reviews.dr-section--cream, .dr-contact.dr-section--cream { background: var(--bleed-down) top / 100% var(--bleed-h) no-repeat, #ffffff; }
/* Services runs into Our doctors: dark at its foot. The extra bottom padding keeps the pinned cards and the
   scroll hint on the white part while the section is pinned. */
.dr-services.dr-section--cream { background: var(--bleed-up) bottom / 100% var(--bleed-h) no-repeat, #ffffff; padding-bottom: 160px; }
/* Grain over each bleed (4.5%), as on the contact page, so no 8 bit steps show. */
.dr-trust.dr-section--cream::before, .dr-why.dr-section--cream::before, .dr-reviews.dr-section--cream::before, .dr-contact.dr-section--cream::before, .dr-services.dr-section--cream::before {
	display: block; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: calc(var(--bleed-h) + 60px); z-index: -1; pointer-events: none; opacity: .045;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.dr-services.dr-section--cream::before { top: auto; bottom: 0; -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%); mask-image: linear-gradient(0deg, #000 55%, transparent 100%); }
/* The dark sections' corner glows fade out before their top and bottom edges, so the edge row is the flat
   section colour that the bleeds start from. */
.dr-doctors:not(.dr-section--cream)::before, .dr-gallery:not(.dr-section--cream)::before, .dr-faq:not(.dr-section--cream)::before {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}

/* Why us with a landscape photo (2026-10-09, Ahmad: not vertical). 4:3 image, and the image column takes a
   little more width so the photo holds its own next to the list. Only when the photo is landscape; a tall photo
   keeps the original 5fr 6fr. Stacked layouts are unchanged. */
.dr-media--landscape { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .dr-why__grid:has(.dr-media--landscape) { grid-template-columns: 6fr 5fr; } }

/* Two doctors (2026-10-09, Ahmad removed the third). Two large square portraits fill the row instead of
   leaving an empty third column; one per row on phones. */
.dr-doctors__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.dr-media--square { aspect-ratio: 1 / 1; }
@media (max-width: 767px) { .dr-doctors__grid--2 { grid-template-columns: 1fr; } }

/* Stats strip under the hero (2026-10-09, Ahmad: no gradient under the hero, less white space, no floating
   line above the numbers, a thin line under them, a light colour for the strip). A solid light brand teal
   band that starts right under the hero; its only rule is the thin line along its bottom edge. */
.dr-trust.dr-section--cream { background: color-mix(in srgb, var(--accent) 10%, #ffffff); padding-top: 8px; padding-bottom: 0; }
.dr-trust.dr-section--cream::before { display: none; }
.dr-section--cream .dr-trust__list { border-top: 0; border-bottom: 1px solid rgba(var(--bg-deep-rgb), .14); }
/* Less white between the strip and "What we do": 88px still clears the 72px header when services pins. */
@media (min-width: 1024px) { .dr-services__pin { padding-top: 88px; justify-content: flex-start; } } /* top aligned: tall screens put their spare height under the cards, not above the label */
/* Small on purpose photo: the bottom fade is now a soft dark blue instead of ivory. */
.dr-why.dr-section--cream .dr-media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 55%, rgba(var(--bg-deep-rgb), .6) 100%); }

/* Fewer bleeds (2026-10-09, Ahmad: remove the fade at the top of Why us and at the foot of Services, keep the
   one on Book a visit). Both sections are plain white again; services loses the 160px it had for its fade. */
.dr-why.dr-section--cream { background: #ffffff; }
.dr-services.dr-section--cream { background: #ffffff; padding-bottom: 0; }
.dr-why.dr-section--cream::before, .dr-services.dr-section--cream::before { display: none; }
/* Map band: same light brand teal as the stats strip, with the same thin rule, here along its top edge at
   content width. The contact section above ends sooner so no white gap sits between them. */
.dr-contact.dr-section--cream { padding-bottom: clamp(48px, 6vw, 80px); }
.dr-mapband.dr-section--cream { background: color-mix(in srgb, var(--accent) 10%, #ffffff); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
/* .dr-main prefix: ".dr-main > section:nth-of-type(even)::before" (the corner glows) otherwise wins and paints over the rule. */
.dr-main .dr-mapband.dr-section--cream::before {
	display: block; content: ""; position: absolute; z-index: 0; top: 0; bottom: auto; height: 1px;
	left: max(var(--gutter), calc((100% - 1320px) / 2)); right: max(var(--gutter), calc((100% - 1320px) / 2));
	background: rgba(var(--bg-deep-rgb), .14); -webkit-mask-image: none; mask-image: none; opacity: 1;
}
.dr-mapband .dr-media--map { margin-top: 0; }

/* Doctors: smaller cards (2026-10-09, Ahmad: the cards were huge). On desktop the heading takes the first third
   and the two portraits share the other two thirds, about 410px each, so the row is full without big images. */
@media (min-width: 1024px) {
	.dr-doctors__layout { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
	.dr-doctors__layout .dr-section__head { margin-bottom: 0; }
}
/* Reviews: no top fade any more (2026-10-09, Ahmad). Book a visit is now the only section with one. */
.dr-reviews.dr-section--cream { background: #ffffff; }
.dr-reviews.dr-section--cream::before { display: none; }
/* Tablet menu (2026-10-09): WordPress shows the full menu from 600px up, and between 600 and 819px the six
   links wrapped onto two lines while Book a Visit was hidden. Below 1024px the burger is used instead, and on
   tablets (768 to 1023px) Book a Visit stays in the header; phones keep the bottom Call and Book bar. */
@media (max-width: 1023px) {
	.dr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.dr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.dr-header .dr-header__cta { display: flex; }
}
/* Hero info strip on tablets (2026-10-09): at 768px all three titles broke onto two lines. Between 768 and
   1023px the icons step aside and the type is a size smaller, so each title stays on one line. */
@media (min-width: 768px) and (max-width: 1023px) {
	.dr-hero__strip-icon { display: none; }
	.dr-hero__strip-body strong { font-size: clamp(.95rem, 2vw, 1.05rem); }
	.dr-hero__strip-body > span { font-size: .85rem; }
	.dr-hero__strip-item + .dr-hero__strip-item { padding-left: 20px; }
}
/* Desktop: the title scales down a little on narrow desktops so "Same day emergencies" stays on one line at 1024px. */
@media (min-width: 1024px) { .dr-hero__strip-body strong { font-size: clamp(1.2rem, 1.7vw, 1.5rem); } }

/* Powered by DentalRun (2026-10-09, Ahmad): sits in the footer's bottom row with the copyright and the links,
   on the same centre line. The approved cream wordmark, unchanged in shape, at the brand minimum of 160px, toned
   down with opacity so it reads at the same weight as the footer text; full strength on hover. */
.dr-footer__bottom { align-items: baseline; } /* copyright, links and Powered by share one text line */
.dr-footer__powered { margin: 0; }
.dr-footer__powered a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-muted); font-size: .85rem; text-decoration: none; white-space: nowrap; }
/* 96px wide (Ahmad, 2026-10-11: about 40% smaller than 160). The wordmark has no descenders, so its bottom edge is its
   baseline: baseline alignment puts "Powered by" and "dentalrun" on one line, like two words in a sentence. */
.dr-footer__powered img { width: 96px; height: auto; display: block; opacity: .6; transition: opacity .2s; }
.dr-footer__powered a:hover img, .dr-footer__powered a:focus-visible img { opacity: 1; }
.dr-footer__powered a:hover span, .dr-footer__powered a:focus-visible span { color: var(--text-on-dark); }
@media (max-width: 1023px) { .dr-footer__bottom { align-items: flex-start; } }
/* The hero glow picked up WordPress's 19px block gap and started below the top of the photo, which drew a line
   across the hero. Decorative layers sit flush with their section. */
.dr-hero > .dr-hero__glow, .dr-contact > .dr-contact__glow { margin: 0 !important; }

/* Hero video on iPhone and iPad (2026-10-09, Ahmad saw a play button on his iPad). When iOS will not autoplay
   (Low Power Mode, or a password protected preview such as Local's Live Link), Safari draws a big play button over
   the poster. Hide it: visitors then see the still hero photo, never a broken looking player. */
.dr-hero__video::-webkit-media-controls, .dr-hero__video::-webkit-media-controls-start-playback-button,
.dr-hero__video::-webkit-media-controls-overlay-play-button, .dr-hero__video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; opacity: 0; }

/* Services on tablets (2026-10-09, Ahmad on his iPad: scrolling down did not move the cards). From 768 to 1023px the
   section now pins and the cards travel sideways with the scroll, as on desktop. The head is one column here, so
   the cards give up more height; the label clears the 84px tablet header. */
@media (min-width: 768px) and (max-width: 1023px) {
	.dr-services__pin { min-height: 100svh; padding: 100px 0 32px; justify-content: flex-start; }
	.dr-services__head { margin-bottom: 24px; gap: 12px; }
	.dr-services__viewport { overflow: hidden; scroll-snap-type: none; }
	.dr-service { width: auto; height: clamp(340px, calc(100svh - 440px), 640px); aspect-ratio: 3 / 4; }
	.dr-services__hint { display: block; }
}
/* Reviews heading centred in its section (2026-10-09, Ahmad). */
.dr-reviews .dr-section__head { text-align: center; margin-left: auto; margin-right: auto; }
.dr-reviews .dr-section__head > h2 { margin-left: auto; margin-right: auto; }
/* Tall portrait tablets at desktop width (iPad Pro 12.9 in portrait, 1024x1366): taller cards so the pinned screen
   is not half empty. Landscape screens and monitors keep the 560px cap. */
@media (min-width: 1024px) and (orientation: portrait) { .dr-service { height: clamp(360px, calc(100svh - 440px), 720px); } }

/* Services on touch screens of any size (2026-10-09, Ahmad: on the iPad he wants to swipe the cards left and right).
   No pin: the cards sit in a sideways swipe strip that snaps to each card; scrolling up and down just moves the page.
   Computers with a mouse or trackpad keep the pinned scroll (dentalrun-motion.js checks pointer: fine). */
@media (min-width: 768px) and (pointer: coarse) {
	.dr-services__pin { min-height: 0; padding: 40px 0 56px; justify-content: flex-start; }
	.dr-services__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
		scroll-padding-left: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); }
	.dr-services__viewport::-webkit-scrollbar { display: none; }
	.dr-services__track { transform: none !important; }
	.dr-service { width: auto; height: clamp(380px, 52svh, 560px); aspect-ratio: 3 / 4; scroll-snap-align: start; }
	.dr-services__hint { display: none; }
}

/* 19. Treatment pages (2026-10-11, Ahmad: "services pages for the marlow website"). One layout for every
   treatment (patterns/treatment.php): hero with four quick facts, who it suits, the steps on dark, comfort,
   cost on the light brand teal, related treatments, questions on dark, then the booking section and map.
   Built from the homepage parts so a rebrand carries over. */

/* Hero: the contact page's top fade (.dr-cpage), text left, photo right, facts in a ruled row below. */
.dr-thero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.dr-thero__title { margin: 20px 0; font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; color: var(--text-on-light); }
.dr-thero .dr-lead { color: color-mix(in srgb, var(--text-muted-light) 65%, var(--text-on-light)); }
.dr-thero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dr-thero__photo { aspect-ratio: 4 / 5; border-radius: 28px; }
.dr-main .dr-thero .dr-thero__facts { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(var(--bg-deep-rgb), .14); border-bottom: 1px solid rgba(var(--bg-deep-rgb), .14); }
.dr-thero .dr-trust__num--text { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
/* The facts row closes the hero; the next section's own top space is enough below it. */
.dr-main .dr-thero { padding-bottom: clamp(16px, 2vw, 32px); }

/* Who it suits: white, photo left, two lists (a good fit, worth talking through first). */
.dr-tfit.dr-section--cream { background: #ffffff; }
.dr-tfit__label { margin: 32px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.dr-tfit .dr-why__list { margin-top: 16px; }
.dr-tfit__talk li::before { background: none; border: 2px solid var(--glow); box-sizing: border-box; }
@media (min-width: 1024px) {
	.dr-tfit .dr-why__grid { grid-template-columns: 1fr 1fr; align-items: start; }
	.dr-tfit .dr-media { position: sticky; top: 120px; }
}

/* Steps: dark, heading and diagram on the left (they stay in view on desktop), numbered steps on the right. */
.dr-tsteps { background: var(--bg-section); color: var(--text-on-dark); }
.dr-tsteps::before {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}
.dr-tsteps__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.dr-tsteps__media { margin-top: 32px; background: #ffffff; }
.dr-tstep { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.dr-tstep:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dr-tstep__n { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--accent-bright); }
.dr-tstep h3 { margin: 0 0 6px; color: var(--text-on-dark); }
.dr-tstep__time { margin: 0 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); }
.dr-tstep p:last-child { margin: 0; color: var(--text-muted); line-height: 1.6; }
@media (min-width: 1024px) { .dr-tsteps__intro { position: sticky; top: 112px; } }

/* Comfort: white, text and a review on the left, photo on the right. */
.dr-tcomfort.dr-section--cream { background: #ffffff; }
.dr-tcomfort__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dr-tcomfort__quote { margin: 32px 0 0; padding: 24px 28px; border-left: 3px solid var(--glow); border-radius: 0 16px 16px 0; background: color-mix(in srgb, var(--accent) 10%, #ffffff); }
.dr-tcomfort__quote blockquote { margin: 0; padding: 0; border: 0; }
.dr-tcomfort__quote blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--text-on-light); }
.dr-tcomfort__quote figcaption { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--text-on-light); }
.dr-tcomfort__stars { color: #FBBC04; letter-spacing: 2px; margin-right: 6px; }

/* Cost: the light brand teal of the stats strip and map band, factors as ruled rows. */
.dr-tcost.dr-section--cream { background: color-mix(in srgb, var(--accent) 10%, #ffffff); }
.dr-tcost__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.dr-tcost__pay { margin: 24px 0 0; max-width: 46ch; font-weight: 600; color: var(--text-on-light); }
.dr-tcost__list li { padding: 22px 0; border-top: 1px solid rgba(var(--bg-deep-rgb), .14); color: var(--text-muted-light); line-height: 1.55; }
.dr-tcost__list li:last-child { border-bottom: 1px solid rgba(var(--bg-deep-rgb), .14); }
.dr-tcost__list strong { color: var(--text-on-light); font-size: 1.1rem; font-weight: 600; }

/* Related treatments: the homepage service cards, three in a row (a swipe strip on phones). */
.dr-tmore.dr-section--cream { background: #ffffff; }
.dr-tmore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(24px, 3vw, 40px); }
.dr-main .dr-tmore .dr-service { width: auto; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius); }
.dr-tmore__link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.dr-tmore .dr-service__title { margin: 0; font-size: 1.35rem; }

/* A photo that is still being made shows a calm placeholder, never a broken image. */
.dr-media__pending { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(var(--glow-rgb), .10) 0 14px, rgba(var(--glow-rgb), .04) 14px 28px), color-mix(in srgb, var(--accent) 12%, #ffffff); }
.dr-media__pending span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }

@media (max-width: 1023px) {
	.dr-thero__grid, .dr-tsteps__grid, .dr-tcomfort__grid, .dr-tcost__grid { grid-template-columns: 1fr; }
	.dr-main .dr-thero .dr-thero__facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.dr-tmore__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: clamp(24px, 3vw, 40px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; }
	.dr-tmore__grid::-webkit-scrollbar { display: none; }
	.dr-main .dr-tmore .dr-service { flex: 0 0 72vw; scroll-snap-align: start; }
	.dr-tstep { grid-template-columns: 40px 1fr; gap: 14px; }
}

/* Full image hero for treatment pages (2026-10-11, Ahmad: the photo as a full background with a brand colour over
   it and the text on top). A teal wash (blend mode "color") ties any photo to the palette; a deep fade from the
   left keeps the text readable; the four facts sit in the homepage's light stats strip right below. */
.dr-main .dr-thero--full {
	min-height: min(86svh, 820px); display: grid; align-content: end;
	padding-top: 150px; padding-bottom: clamp(56px, 7vw, 104px);
	background: var(--bg-deep); color: var(--text-on-dark); overflow: hidden;
}
.dr-main .dr-thero--full::before { display: none; }
.dr-thero__bg { position: absolute; inset: 0; z-index: -1; max-width: none !important; margin: 0 !important; }
.dr-thero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.dr-thero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--glow); mix-blend-mode: color; opacity: .35; }
.dr-thero__bg::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(90deg, rgba(var(--bg-deep-rgb), .9) 0%, rgba(var(--bg-deep-rgb), .74) 34%, rgba(var(--bg-deep-rgb), .28) 66%, rgba(var(--bg-deep-rgb), .12) 100%),
		linear-gradient(180deg, rgba(var(--bg-deep-rgb), .6) 0%, rgba(var(--bg-deep-rgb), 0) 26%, rgba(var(--bg-deep-rgb), 0) 70%, rgba(var(--bg-deep-rgb), .45) 100%);
}
.dr-thero--full .dr-thero__text { width: 100%; }
.dr-thero--full .dr-thero__text > * { max-width: 620px; }
.dr-thero--full .dr-thero__title { color: #ffffff; }
.dr-thero--full .dr-lead { color: rgba(255, 255, 255, .86); }
body:has(.dr-thero--full) .dr-header { background: transparent; backdrop-filter: none; box-shadow: none; }
body:has(.dr-thero--full) .dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .82); backdrop-filter: blur(14px); }
.dr-tfacts .dr-trust__num--text { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
/* Phones and tablets: the text fills the width, so the photo is drawn taller than the hero and lifted, which puts
   the subject (the implant model) in the open band above the headline instead of behind it. */
@media (max-width: 1023px) {
	.dr-main .dr-thero--full { min-height: 88svh; padding-top: 120px; }
	.dr-thero__bg img { position: absolute; left: 0; top: var(--focus-top, -20%); height: 120%; object-position: var(--focus-x, 55%) 50%; } /* --focus-x and --focus-top: set per page. Nov 7: 120%, not 148%, for the new photos, so a whole face fits between the logo and the title */
	.dr-thero__bg::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .5) 0%, rgba(var(--bg-deep-rgb), .12) 18%, rgba(var(--bg-deep-rgb), .2) 36%, rgba(var(--bg-deep-rgb), .82) 52%, rgba(var(--bg-deep-rgb), .95) 100%); }
}

/* Treatment hero entrance (2026-10-11): html.dr-anim (set in the head, not with reduced motion) hides the hero text
   from the first paint; dentalrun-motion.js plays it in. A safety reveal at 3 seconds covers a script that never
   runs. The line masks get a little room below so letters like g and p are not clipped while they rise. */
.dr-anim .dr-thero__text > * { opacity: 0; animation: dr-safety-show 0s linear 3s forwards; }
@keyframes dr-safety-show { to { opacity: 1; } }
.dr-thero__title > div { padding-bottom: .12em; margin-bottom: -.12em; }

/* Treatment pages with fewer photos (2026-10-11): who it suits without a photo puts the heading on top and the two
   lists side by side; comfort without a photo puts the review beside the text. */
.dr-tfit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); margin-top: 8px; }
.dr-tfit__plain h2 { max-width: 20ch; }
.dr-tcomfort__grid--text { align-items: center; }
.dr-tcomfort__grid--text .dr-tcomfort__quote { margin-top: 0; }
@media (max-width: 767px) { .dr-tfit__cols { grid-template-columns: 1fr; gap: 0; } }

/* Services dropdown in the header (2026-10-11, Ahmad: "services to show in a drop down from the navigation bar").
   Desktop: opens on hover or keyboard focus, a dark glass panel under Services; the arrow next to Services opens it
   on touch screens. Phone menu: the treatments sit under Services as a smaller indented list. */
.dr-nav .wp-block-navigation-submenu__toggle, .dr-nav .wp-block-navigation__submenu-icon { color: var(--text-on-dark); }
.dr-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; stroke-width: 2px; }
.dr-nav .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 14px) !important; left: -16px !important; right: auto !important; min-width: 260px !important; padding: 8px !important;
	background: rgba(var(--bg-deep-rgb), .96) !important; color: var(--text-on-dark) !important;
	border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 16px;
	box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* A see-through bridge over the 14px gap, so the panel stays open while the mouse travels down to it. */
.dr-nav .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block; width: 100%; padding: 10px 14px !important; border-radius: 10px;
	font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .88);
	transition: background-color .2s, color .2s;
}
.dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { background: rgba(var(--glow-rgb), .22); color: #ffffff; }
.dr-nav .wp-block-navigation__submenu-container .is-current > .wp-block-navigation-item__content { color: var(--accent-bright); }

/* Phone menu (the light drawer): the treatments as an indented list under Services, no panel. */
.dr-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container {
	position: static !important; min-width: 0 !important; width: auto !important; padding: 8px 0 0 14px !important;
	background: transparent !important; border: 0 !important; border-left: 2px solid rgba(var(--bg-deep-rgb), .12) !important; border-radius: 0;
	box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 2px;
}
.dr-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container::before { content: none; }
.dr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 0 !important; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0;
	color: var(--text-muted-light); background: none;
}
.dr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--accent-deep); background: none; }
.dr-nav .is-menu-open .wp-block-navigation__submenu-container .is-current > .wp-block-navigation-item__content { color: var(--accent-deep); }
.dr-nav .is-menu-open .wp-block-navigation-item.has-child { align-items: flex-start !important; width: 100%; }

/* Phone menu: Services collapsed until tapped (2026-10-12, Ahmad: "shows the services collapsed, only open when its
   clicked"). dentalrun-motion.js toggles .is-expanded; the chevron turns over when open. */
.dr-nav .is-menu-open .dr-nav__services > .wp-block-navigation__submenu-container { display: none !important; }
.dr-nav .is-menu-open .dr-nav__services.is-expanded > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column; }
.dr-nav .is-menu-open .dr-nav__services > .wp-block-navigation-submenu__toggle { display: none !important; }
.dr-nav .is-menu-open .dr-nav__services > a { display: inline-flex; align-items: center; gap: 14px; }
.dr-nav .is-menu-open .dr-nav__services > a::after {
	content: ""; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
	transform: translateY(-4px) rotate(45deg); transition: transform .25s;
}
.dr-nav .is-menu-open .dr-nav__services.is-expanded > a::after { transform: translateY(2px) rotate(-135deg); }

/* Footer treatments column and privacy notice page (2026-10-12). The footer gets a fifth column only when the site
   has treatment pages; the privacy page is the contact page's top with a single paragraph. */
@media (min-width: 1024px) { .dr-footer__grid:has(.dr-footer__col--treatments) { grid-template-columns: 1.4fr 1fr .9fr 1.1fr .8fr; } }
.dr-legal { min-height: 62vh; padding-bottom: clamp(96px, 12vw, 160px); }

/* Before and after on treatment pages (2026-10-13): the homepage gallery cards; two pairs sit in a narrower row. */
@media (min-width: 1024px) { .dr-tresults__grid--2 { grid-template-columns: repeat(2, minmax(0, 440px)); } } /* left aligned under the heading */
/* Footer bottom row (2026-10-13, Ahmad: the privacy link looked like it was floating in the middle). The two legal
   links sit with the copyright on the left; Powered by DentalRun stays on the right. */
@media (min-width: 1024px) { .dr-footer__bottom .dr-footer__legal { margin-left: 8px; margin-right: auto; } } /* .dr-footer__bottom p sets margin 0, so the rule needs the parent too */

/* Numbered lists we style ourselves start flush with the headings (2026-10-13: the browser default 40px indent pushed the
   treatment cards and the treatment page steps to the right). */
.dr-stack__list, .dr-tsteps__list { list-style: none; margin: 0; padding: 0; }

/* Body text font (2026-10-13, Ahmad noticed the "right for you" lists looked like a different font). The Gutenverse
   plugin prints its own CSS after this file and sets body to the system font stack, so every paragraph and list without
   its own font fell back to Segoe UI on Windows or San Francisco on a Mac. "html body" outranks its plain "body" rule.
   Bold uses 600, the heaviest weight we load, so the browser never fakes a bold. */
html body { font-family: var(--font-body); }
strong, b { font-weight: 600; }

/* =========================================================================
   22. Feature switches (2026-10-14). Optional layouts and effects a site turns on in inc/features.php; all off in the
   master. Each block below only takes effect when its switch is on: the body carries dr-feat--<switch>, or the
   section only exists then. Each was built and tested first on the Arcline sample. Colours come from the tokens in
   section 1; the variables named in each block let a site retune it without touching the rules.
   ========================================================================= */

/* Promise hero ('hero' => 'promise'): full photo under a dark wash, headline left, glass card with three promises.
   Tune: --promise-dash, the short line before each promise title. */
:root { --promise-dash: var(--accent-bright); }
.dr-hero--promise .dr-hero__media picture { display: contents; }
.dr-hero--promise .dr-hero__media img { object-position: 60% 40%; }
.dr-hero--promise .dr-hero__media::after { background: linear-gradient(90deg, rgba(var(--bg-deep-rgb), .82) 0%, rgba(var(--bg-deep-rgb), .55) 38%, rgba(var(--bg-deep-rgb), .12) 70%, rgba(var(--bg-deep-rgb), .25) 100%), linear-gradient(180deg, rgba(var(--bg-deep-rgb), .55) 0%, rgba(var(--bg-deep-rgb), 0) 25%, rgba(var(--bg-deep-rgb), 0) 70%, rgba(var(--bg-deep-rgb), .5) 100%); }
.dr-hero__promises {
	list-style: none; margin: 0; display: grid; gap: 0; padding: 6px 24px; border-radius: 24px; color: #fff;
	background: linear-gradient(160deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 100%); border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.dr-hero__promises li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dr-hero__promises li:last-child { border-bottom: 0; }
.dr-hero__promises strong { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; line-height: 1.2; letter-spacing: .01em; }
.dr-hero__promises strong::before { content: ""; flex: 0 0 18px; height: 1.5px; background: var(--promise-dash); }
.dr-hero__promises span { padding-left: 30px; font-weight: 300; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .74); }
@media (min-width: 1024px) {
	.dr-hero--promise .dr-hero__content { padding-right: calc(var(--gutter) + 420px); }
	.dr-hero__promises { position: absolute; z-index: 2; width: 360px; bottom: clamp(48px, 6vw, 80px); right: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); }
}
@media (max-width: 1023px) {
	.dr-hero--promise { padding-bottom: 32px; }
	.dr-hero__promises { margin: 0 var(--gutter); }
	.dr-hero--promise .dr-hero__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .55) 0%, rgba(var(--bg-deep-rgb), .25) 30%, rgba(var(--bg-deep-rgb), .8) 62%, rgba(var(--bg-deep-rgb), .92) 100%); }
}
/* Phones: the photo fills the first screen only and the dark colour continues under the card, so the photo is not
   stretched to the full (taller than one screen) hero and over zoomed. */
@media (max-width: 767px) {
	.dr-hero--promise { padding-top: 0; background: var(--bg-deep); }
	.dr-hero--promise .dr-hero__content { padding-top: calc(80px + 26svh); padding-bottom: 28px; }
	.dr-hero--promise .dr-hero__media { bottom: auto; height: 76svh; }
	.dr-hero--promise .dr-hero__media img { object-position: 50% 0%; }
	.dr-hero--promise .dr-hero__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .4) 0%, rgba(var(--bg-deep-rgb), 0) 14%, rgba(var(--bg-deep-rgb), .15) 30%, rgba(var(--bg-deep-rgb), .72) 46%, rgba(var(--bg-deep-rgb), .9) 62%, rgba(var(--bg-deep-rgb), .95) 100%); }
}

/* Moving band ('ticker'). Tune: --ticker-bg. */
:root { --ticker-bg: var(--accent-deep); }
.dr-ticker { background: var(--ticker-bg); color: #fff; overflow: hidden; padding: 18px 0; }
.dr-ticker__track { display: flex; width: max-content; animation: dr-ticker 55s linear infinite; }
.dr-ticker__row { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex-shrink: 0; }
.dr-ticker__word { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); white-space: nowrap; }
.dr-ticker__dot { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .5); }
@keyframes dr-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dr-ticker__track { animation: none; } }

/* Stacked treatment cards ('services' => 'stack'): each card sticks a little lower than the one before, so they pile
   up on scroll. Tune: --stack-bg (section), --stack-index (the 01, 02 numbers). A site moves one photo's crop with
   .dr-stack__card--<slug> .dr-stack__img { object-position: 50% 30%; }. */
:root { --stack-bg: var(--surface-light-2); --stack-index: var(--accent-bright); }
.dr-stack.dr-section--cream { background: var(--stack-bg); }
.dr-stack__head { max-width: 1320px; margin-bottom: clamp(32px, 4vw, 56px); } /* full width so WordPress does not centre it; the text is capped below */
.dr-stack__head > * { max-width: 760px; }
.dr-stack__list { display: grid; gap: 28px; }
.dr-stack__card { position: sticky; top: calc(96px + var(--i) * 14px); height: min(70svh, 560px); border-radius: 28px; overflow: hidden; isolation: isolate; box-shadow: 0 -18px 40px -24px rgba(var(--bg-deep-rgb), .55); }
.dr-stack__card picture { display: contents; }
.dr-stack__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
.dr-stack__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--bg-deep-rgb), .82) 0%, rgba(var(--bg-deep-rgb), .5) 45%, rgba(var(--bg-deep-rgb), .05) 80%); }
.dr-stack__body { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); max-width: 440px; color: #fff; display: grid; gap: 10px; justify-items: start; }
.dr-stack__index { font-size: .8rem; letter-spacing: .22em; color: var(--stack-index); }
.dr-stack__title { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.7rem); color: #fff; line-height: 1.05; }
.dr-stack__text { margin: 0 0 8px; font-weight: 300; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.dr-stack .dr-btn--ghost.dr-btn--inline { color: #fff; border-color: rgba(255, 255, 255, .55); }
@media (max-width: 767px) {
	.dr-stack__card { top: calc(80px + var(--i) * 10px); height: 480px; }
	.dr-stack__img { object-position: 50% 25%; }
	.dr-stack__card::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .05) 25%, rgba(var(--bg-deep-rgb), .6) 55%, rgba(var(--bg-deep-rgb), .92) 100%); }
	.dr-stack__body { right: 24px; }
}

/* Before and after with a drag line ('results' => 'compare'): four across, two on tablets, one on phones.
   Tune: --compare-accent (the arrows on the handle and the keyboard outline). */
:root { --compare-accent: var(--accent-deep); }
.dr-results.dr-section--cream { background: #ffffff; }
.dr-results__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dr-compare { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; background: var(--surface-light-2); }
.dr-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dr-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.dr-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.dr-compare__knob { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.dr-compare__knob::before, .dr-compare__knob::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-left: 2px solid var(--compare-accent); border-bottom: 2px solid var(--compare-accent); }
.dr-compare__knob::before { left: 9px; transform: rotate(45deg); }
.dr-compare__knob::after { right: 9px; transform: rotate(-135deg); }
.dr-compare__tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--bg-deep-rgb), .7); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.dr-compare__tag--after { left: auto; right: 10px; background: rgba(255, 255, 255, .88); color: var(--text-on-light); }
.dr-compare__range { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* visually hidden, still reachable by keyboard */
.dr-compare:focus-within { outline: 2px solid var(--compare-accent); outline-offset: 3px; }
.dr-results__title { margin: 14px 0 4px; font-size: 1.05rem; color: var(--text-on-light); }
.dr-results__text { margin: 0; font-size: .92rem; color: var(--text-muted-light); }
@media (max-width: 1023px) { .dr-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .dr-results__grid { grid-template-columns: 1fr; } }

/* Services panel on desktop ('services_panel'): a light panel under Services with a photo card on the left and the
   treatment pages on the right; the photo and its line switch to the treatment under the mouse. It replaces the dark
   dropdown on desktop only; the phone menu keeps its collapsed list. Opened and placed by dentalrun-motion.js.
   Tune: --mega-bg, --mega-hover (row under the mouse), --mega-link, --mega-current (the page you are on). */
:root { --mega-bg: rgba(var(--surface-light-rgb), .97); --mega-hover: var(--surface-light-2); --mega-link: var(--text-on-light); --mega-current: var(--accent-deep); }
.dr-mega { display: none; }
@media (min-width: 600px) {
	body.dr-feat--services-panel .dr-header__inner { position: relative; }
	body.dr-feat--services-panel .dr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .dr-nav__services > .wp-block-navigation__submenu-container { display: none !important; }
	.dr-mega {
		display: grid; grid-template-columns: 15rem 1fr; gap: 8px; width: 34rem; padding: 8px;
		position: absolute; z-index: 5; top: calc(100% + 12px); left: var(--mega-left, 30%);
		background: var(--mega-bg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
		border-radius: 16px; color: var(--text-on-light);
		box-shadow: 0 0 0 1px rgba(var(--bg-deep-rgb), .08), 0 30px 60px -24px rgba(var(--bg-deep-rgb), .45);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.dr-mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
	/* A see-through bridge over the gap, so the panel stays open while the mouse travels down to it. */
	.dr-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
	.dr-mega__media { position: relative; min-height: 21rem; border-radius: 12px; overflow: hidden; background: var(--surface-light-2); }
	.dr-mega__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.dr-mega__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 42%, rgba(var(--bg-deep-rgb), .8) 100%); }
	.dr-mega__caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; color: #fff; }
	.dr-mega__title { margin: 0; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; }
	.dr-mega__text { margin: 6px 0 0; font-size: .85rem; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.dr-mega__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding: 12px 8px 8px; } /* list starts under the heading, so a short list leaves no gap */
	.dr-mega__heading { margin: 0; padding: 8px 12px 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; color: var(--text-on-light); }
	.dr-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
	.dr-mega__link { display: block; padding: 10px 12px; border-radius: 8px; font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: var(--mega-link); text-decoration: none; transition: background-color .15s, color .15s; }
	.dr-mega__link:hover, .dr-mega__link:focus-visible, .dr-mega__link.is-active { background: var(--mega-hover); color: var(--text-on-light); outline: none; }
	.dr-mega__link.is-current { color: var(--mega-current); }
	body.dr-feat--services-panel .dr-nav__services .wp-block-navigation__submenu-icon svg { transition: transform .2s; }
	body.dr-feat--services-panel .dr-nav__services.is-mega-open .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }
}

/* Photo wash ('photo_wash'): a small warm shift on each service and treatment photo, then a light colour multiplied
   over it, so photos from different sources sit together (whites turn soft, blues calm down, faces keep their
   colour). Never on before and after photos: those must show true colour. Tune: --wash-color, --wash-strength,
   --wash-filter (Arcline: #EFDCC9, .34, sepia(.14) saturate(.94)). */
:root { --wash-color: #EFDCC9; --wash-strength: .34; --wash-filter: sepia(.14) saturate(.94); }
body.dr-feat--photo-wash :is(.dr-stack__img, .dr-service__media img, .dr-thero__photo img, .dr-tfit .dr-media img, .dr-tsteps__media img, .dr-tcomfort .dr-media img, .dr-cpage__photo img, .dr-mega__img) { filter: var(--wash-filter); }
body.dr-feat--photo-wash .dr-ticker__dot { filter: sepia(.2) saturate(.9); }
body.dr-feat--photo-wash :is(.dr-stack__card, .dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo)::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: var(--wash-color); mix-blend-mode: multiply; opacity: var(--wash-strength);
}
/* Stacked cards: the photo is at -2 and the dark text fade at -1, so the wash slots in between them. */
body.dr-feat--photo-wash .dr-stack__card::before { z-index: -1; }
/* Other photos: the wash stays inside the frame, on top of the photo. */
body.dr-feat--photo-wash :is(.dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo) { isolation: isolate; }
body.dr-feat--photo-wash :is(.dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo) img { position: relative; z-index: 0; }
body.dr-feat--photo-wash :is(.dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo)::before { z-index: 1; }

/* Phone Call and Book bar waits ('call_bar_wait'): hidden until the hero has scrolled away (dentalrun-motion.js adds
   dr-past-hero to the body), so the promise card can peek at the bottom of the first screen. */
@media (max-width: 767px) {
	body.dr-feat--call-bar-wait .dr-mobile-bar { transform: translateY(120%); transition: transform .35s var(--ease); }
	body.dr-feat--call-bar-wait.dr-past-hero .dr-mobile-bar { transform: none; }
}


/* =========================================================================
   23. Family Crown Dentistry skin (PRIVATE pitch mockup, 2026-10-15). Copied from the Glow Dent Doral pitch.
   Colours from her logo: navy #201858 and purple #6828A0, with a light lilac #C9A9EA for accents on dark.
   Dark sections are her navy taken deep (#17113F); no black and no colour she does not use.
   ========================================================================= */
:root {
	--fc-lilac: #C9A9EA;
	--grad-light: linear-gradient(180deg, #E6DAF4 0%, #F4EFFA 55%, #FFFFFF 100%);
	--grad-text: linear-gradient(90deg, #C9A9EA 0%, #E3D3F5 55%, #F7F4FC 100%);
	--promise-dash: var(--fc-lilac);
	--ticker-bg: #6828A0;
	--stack-bg: #F4EFFA;
	--stack-index: #E3D3F5; /* Nov 9: light lilac, the purple did not show on the dark card */
	--wash-color: #EEE6F8;
	--wash-strength: .18;
	--wash-filter: saturate(.95);
}
.dr-section--cream .dr-grad { background: linear-gradient(90deg, #5A2290 0%, #6828A0 55%, #8A4BC9 100%); -webkit-background-clip: text; background-clip: text; }
.dr-header__logo img { width: 210px; height: auto; }
.dr-header.is-scrolled .dr-header__logo img { width: 180px; }
.dr-footer__brand img { width: 220px; height: auto; }
/* The hero headline is split into letters for its entrance, which hides gradient text; the accent word is solid. */
.dr-hero__title .dr-grad { background: none; color: var(--fc-lilac); -webkit-text-fill-color: currentColor; font-style: italic; }
.dr-hero__title .dr-grad div { color: var(--fc-lilac); }
/* Desktop hero: her portrait sits on the right two thirds and melts into her navy on the left (one colour,
   a smoothed curve over 40 stops), so the headline never covers her face. Phones keep the full photo. */
@media (min-width: 1024px) {
	.dr-hero--promise { background: #17113F; }
	.dr-hero--promise .dr-hero__media { left: 36%; }
	.dr-hero--promise .dr-hero__media img { object-position: 72% 18%; }
	.dr-hero--promise .dr-hero__media::after { background: linear-gradient(90deg, rgba(23,17,63,1) 0%, rgba(23,17,63,1.000) 0.00%, rgba(23,17,63,0.998) 1.15%, rgba(23,17,63,0.993) 2.30%, rgba(23,17,63,0.985) 3.45%, rgba(23,17,63,0.973) 4.60%, rgba(23,17,63,0.959) 5.75%, rgba(23,17,63,0.942) 6.90%, rgba(23,17,63,0.923) 8.05%, rgba(23,17,63,0.901) 9.20%, rgba(23,17,63,0.877) 10.35%, rgba(23,17,63,0.852) 11.50%, rgba(23,17,63,0.824) 12.65%, rgba(23,17,63,0.795) 13.80%, rgba(23,17,63,0.764) 14.95%, rgba(23,17,63,0.732) 16.10%, rgba(23,17,63,0.699) 17.25%, rgba(23,17,63,0.666) 18.40%, rgba(23,17,63,0.631) 19.55%, rgba(23,17,63,0.596) 20.70%, rgba(23,17,63,0.561) 21.85%, rgba(23,17,63,0.525) 23.00%, rgba(23,17,63,0.489) 24.15%, rgba(23,17,63,0.454) 25.30%, rgba(23,17,63,0.419) 26.45%, rgba(23,17,63,0.384) 27.60%, rgba(23,17,63,0.351) 28.75%, rgba(23,17,63,0.318) 29.90%, rgba(23,17,63,0.286) 31.05%, rgba(23,17,63,0.255) 32.20%, rgba(23,17,63,0.226) 33.35%, rgba(23,17,63,0.198) 34.50%, rgba(23,17,63,0.173) 35.65%, rgba(23,17,63,0.149) 36.80%, rgba(23,17,63,0.127) 37.95%, rgba(23,17,63,0.108) 39.10%, rgba(23,17,63,0.091) 40.25%, rgba(23,17,63,0.077) 41.40%, rgba(23,17,63,0.065) 42.55%, rgba(23,17,63,0.057) 43.70%, rgba(23,17,63,0.052) 44.85%, rgba(23,17,63,0.050) 46.00%), linear-gradient(180deg, rgba(23,17,63,.35) 0%, rgba(23,17,63,0) 22%, rgba(23,17,63,0) 70%, rgba(23,17,63,.55) 100%); }
}
/* Service cards (2026-10-29): every card has its own cards/<slug>-wide.jpg cut to the desktop band, so no crop rules are needed. */
/* Her photo is light (white coat, pale wall), so the promise card is tinted with her navy to keep its words readable. */
.dr-hero--promise .dr-hero__promises { background: linear-gradient(160deg, rgba(23, 17, 63, .62) 0%, rgba(32, 24, 88, .48) 100%); border-color: rgba(255, 255, 255, .22); }

/* Quera for every heading, number and card title (Ahmad, 2026-10-15): the broad display sans from his font library
   (The Vault/Tools/FONTS/Sans/Quera), close to the lettering in her logo. One weight only, so the face is declared for
   every weight: the browser then never fakes a bold, and the accent word is upright (no fake italic). Body stays Inter. */
@font-face {
	font-family: "Quera";
	src: url("../fonts/Quera.woff2") format("woff2"), url("../fonts/Quera.woff") format("woff");
	font-weight: 100 900; font-style: normal; font-display: swap;
}
:root { --font-display: "Quera", Inter, system-ui, sans-serif; }
h1, h2, h3, h4, .dr-hero__title, .dr-trust__num, .dr-ticker__word, .dr-stack__title, .dr-doctor__name, .dr-why h2 { font-synthesis: none; letter-spacing: -0.01em; }
.dr-hero__title .dr-grad, .dr-hero__title .dr-grad div { font-style: normal; }
.dr-hero__title { font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.04; }


/* Google rating pill in the hero (Ahmad, 2026-10-15), the same glass as Royal Dental's hero rating badge
   (Royal-Dental-Website/src/components/Hero.astro, .rating-badge): pill, thin white edge, light blur, gold stars. */
.fc-rating-badge { display: flex; width: fit-content; align-items: center; gap: .5rem; margin: 0 0 1.4rem; padding: .45rem 1rem;
	border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
	font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: #fff; }
.fc-rating-badge__stars { color: #FBBC04; letter-spacing: .08em; font-size: .95em; }
.fc-rating-badge__text { color: rgba(255, 255, 255, .95); white-space: nowrap; }
/* Her logo at the top of the phone menu, in its own colours on the light drawer (Ahmad, 2026-10-15). */
.dr-nav .wp-block-navigation__responsive-container.is-menu-open::after {
	content: ""; position: absolute; top: 18px; left: 26px; width: 170px; height: 52px; z-index: 2; pointer-events: none;
	background: url("../img/familycrown/logo-color.png") left center / contain no-repeat;
}
/* The close button sits in the drawer's content box, which starts 96px down; lift it level with the logo. */
.dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: -66px; }

/* Reviews, redesigned 2026-10-15 (Ahmad: "looks very basic"). Dark rating panel with glossy gold stars on the left,
   quote cards on the right (2 by 2 on desktop, a sideways swipe on phones). Her navy, purple and lilac; gold only for stars. */
.fc-reviews { position: relative; overflow: hidden; background:
	radial-gradient(42% 60% at 92% 12%, rgba(201, 169, 234, .32) 0%, rgba(201, 169, 234, 0) 70%),
	radial-gradient(38% 50% at 4% 96%, rgba(104, 40, 160, .10) 0%, rgba(104, 40, 160, 0) 70%),
	linear-gradient(180deg, #F4EFFA 0%, #FBF9FE 60%, #FFFFFF 100%); }
.fc-reviews__head { text-align: left; margin-bottom: clamp(28px, 4vw, 48px); }
.fc-reviews__head h2 { max-width: 16ch; }
.fc-reviews__grid { display: grid; grid-template-columns: minmax(280px, 0.82fr) 2fr; gap: 24px; align-items: stretch; }
.fc-stars-gloss { }
.fc-rating { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 40px 36px; border-radius: 28px; color: #fff; overflow: hidden;
	background: radial-gradient(80% 60% at 20% 0%, rgba(201, 169, 234, .30) 0%, rgba(201, 169, 234, 0) 60%), linear-gradient(160deg, #2A2070 0%, #201858 45%, #17113F 100%);
	box-shadow: 0 30px 60px rgba(32, 24, 88, .28), inset 0 1px 0 rgba(255, 255, 255, .14); }
.fc-rating::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255, 255, 255, .12); }
.fc-rating__g { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); margin-bottom: 18px; }
.fc-rating__g svg { width: 28px; height: 28px; }
.fc-rating__score { margin: 0; font-family: var(--font-display); font-size: clamp(4.5rem, 8vw, 6.5rem); line-height: .9; letter-spacing: -.02em; }
.fc-rating__stars, .fc-quote__stars { margin: 0; letter-spacing: .12em; background: linear-gradient(180deg, #FFE9A8 0%, #FFC83D 45%, #F2A500 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .25)); }
.fc-rating__stars { font-size: 1.9rem; margin-top: 8px; }
.fc-rating__label { margin: 6px 0 22px; font-size: 1rem; line-height: 1.5; color: rgba(247, 244, 252, .82); max-width: 22ch; }
.fc-rating__link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 12px 20px; border-radius: 999px; text-decoration: none;
	background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 600; font-size: .95rem;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, transform .3s; }
.fc-rating__link:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.fc-reviews__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fc-quote { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 28px; border-radius: 24px; background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(104, 40, 160, .10); box-shadow: 0 24px 50px rgba(32, 24, 88, .08), inset 0 1px 0 #fff;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.fc-quote:hover { transform: translateY(-4px); box-shadow: 0 32px 60px rgba(32, 24, 88, .14), inset 0 1px 0 #fff; }
.fc-quote__mark { position: absolute; top: 4px; right: 24px; font-family: Georgia, serif; font-size: 7rem; line-height: 1; pointer-events: none;
	background: linear-gradient(180deg, #C9A9EA 0%, rgba(201, 169, 234, .25) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fc-quote__stars { font-size: 1.05rem; }
.fc-quote__text { margin: 0; flex: 1; font-size: 1.02rem; line-height: 1.65; color: #201858; }
.fc-quote__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(104, 40, 160, .10); }
.fc-quote__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; font-family: var(--font-display); font-size: 1.15rem;
	background: linear-gradient(140deg, #8A4BC9 0%, #6828A0 55%, #201858 100%); box-shadow: 0 6px 16px rgba(104, 40, 160, .30), inset 0 1px 0 rgba(255, 255, 255, .3); }
.fc-quote__who strong { display: block; font-size: .98rem; color: #201858; }
.fc-quote__who em { display: block; font-style: normal; font-size: .82rem; color: #5B5678; }
@media (max-width: 1023px) {
	.fc-reviews__grid { grid-template-columns: 1fr; }
	.fc-rating { padding: 32px 28px; }
}
@media (max-width: 767px) {
	.fc-reviews__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scrollbar-width: none; }
	.fc-reviews__cards::-webkit-scrollbar { display: none; }
	.fc-quote { flex: 0 0 84%; scroll-snap-align: start; }
	.fc-rating__score { font-size: 4.5rem; }
}
/* The theme's link colour won over the button; keep it white in the dark rating panel. */
.fc-reviews .fc-rating a.fc-rating__link, .fc-reviews .fc-rating a.fc-rating__link:visited { color: #fff; font-family: var(--font-body); }
/* Her tooth and crown mark as a faint watermark on the rating card (Ahmad, 2026-10-15). Cut from her own logo, white
   only, same shapes (assets/img/familycrown/mark-white.png); it bleeds off the right edge, behind the words. */
.fc-rating::before { content: ""; position: absolute; z-index: 0; right: -46px; top: 50%; width: 250px; height: 288px; transform: translateY(-46%);
	background: url("../img/familycrown/mark-white.png") right center / contain no-repeat; opacity: .12; pointer-events: none; }
.fc-rating > * { position: relative; z-index: 1; }
@media (max-width: 1023px) { .fc-rating::before { right: -20px; width: 210px; height: 242px; } }

/* Before and after (2026-10-15): example pairs until her own cases arrive, each clearly tagged. */
.fc-example-note { margin: 10px 0 0; font-size: .88rem; color: #5B5678; max-width: 60ch; }
.dr-compare { position: relative; }
.fc-example-tag { position: absolute; z-index: 4; top: 14px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px;
	background: rgba(32, 24, 88, .78); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
/* Treatment pages: the dentist byline under the hero lead (2026-10-29). */
.dr-thero__byline { margin: 18px 0 0; font-size: .92rem; line-height: 1.5; color: #5B5678; }
.dr-thero__byline a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dr-thero--full .dr-thero__byline { color: rgba(255, 255, 255, .8); }

/* 25. SmileRun (2026-10-29, inc/smilerun.php). The homepage band: dark navy with lilac glows like the other dark
   sections, copy left, the tilted phone right (Royal Dental's variant A in her colors). The phone screen is exactly
   SmileRun's 390:844 stage, which the demo scales to the box's width; position relative is load bearing, the demo host
   fills the box over the still. */
.fc-smile { position: relative; isolation: isolate; overflow: clip; background: var(--bg-section); }
.fc-smile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(45% 70% at 80% 50%, rgba(var(--glow-rgb), .30) 0%, rgba(var(--glow-rgb), 0) 70%),
		radial-gradient(50% 55% at 0% 0%, rgba(var(--glow-rgb), .30) 0%, rgba(var(--glow-rgb), 0) 70%); }
.fc-smile__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(40px, 6vw, 80px); }
.fc-smile__copy { display: grid; justify-items: start; }
.fc-smile h2 { margin: 0; color: var(--text-on-dark); }
.fc-smile .dr-lead { margin: 20px 0 28px; max-width: 34rem; color: rgba(247, 244, 252, .86); }
button[data-smile-preview].dr-btn--inline { font: inherit; font-weight: 600; border: 0; cursor: pointer; display: inline-flex; align-items: center; border-radius: 999px; width: auto; justify-self: start; }
.fc-smile__note, .fc-smile__caption { font-size: .82rem; line-height: 1.5; color: rgba(247, 244, 252, .72); }
.fc-smile__note { margin: 18px 0 0; max-width: 30rem; }
.fc-smile__msg { margin: 12px 0 0; font-size: .9rem; }
.fc-smile__msg a { color: inherit; text-decoration: underline; }
.fc-smile__stage { margin: 0; display: grid; justify-items: center; gap: 16px; perspective: 1400px; }
.fc-smile__caption { text-align: center; }
.fc-smile__phone { position: relative; width: clamp(240px, 22vw, 300px); padding: 10px; border-radius: 50px;
	background: linear-gradient(150deg, #2C2270, #17113F 55%, #0E0A28);
	box-shadow: inset 0 0 0 1.5px rgba(247, 244, 252, .16), inset 0 0 0 6px #0E0A28, 0 50px 80px -40px rgba(14, 10, 40, .8), 0 20px 36px -24px rgba(14, 10, 40, .6);
	transform: rotateY(-18deg) rotateX(6deg) rotateZ(2deg); animation: fc-smile-float 9s ease-in-out infinite; }
.fc-smile__phone::after { content: ""; position: absolute; inset: 10px; border-radius: 40px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1) 0%, transparent 28%); }
.fc-smile__screen { position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: 40px; overflow: hidden; background: linear-gradient(180deg, #17113F, #261D63); }
.fc-smile__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes fc-smile-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (prefers-reduced-motion: reduce) { .fc-smile__phone { animation: none; } }
@media (max-width: 900px) {
	.fc-smile__grid { grid-template-columns: minmax(0, 1fr); }
	.fc-smile__phone { width: min(68vw, 280px); }
}
/* The treatment page strip, no phone (the demo plays straighter teeth, not this page's treatment). Nov 6 (Ahmad, as on
   Junquera since Nov 4): her deep navy card with a soft lilac glow, light text, the white button, and an example before
   and after on the right; the pair goes under the text on a tablet and phone. */
.fc-smile-strip__card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
	padding: clamp(28px, 4vw, 48px); border-radius: 28px; color: var(--text-on-dark);
	background: radial-gradient(70% 90% at 100% 0%, rgba(var(--accent-bright-rgb), .22) 0%, rgba(var(--accent-bright-rgb), 0) 60%), var(--bg-deep);
	box-shadow: 0 30px 60px -36px rgba(var(--bg-deep-rgb), .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
	--btn-bg: #ffffff; --btn-fg: var(--bg-deep); --btn-icon-bg: var(--bg-deep); --btn-icon-fg: #ffffff; }
.fc-smile-strip__card h2 { margin: 0; color: var(--text-on-dark); }
.fc-smile-strip .fc-smile-strip__card .dr-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* light lilac words on the dark card */
.fc-smile-strip__card .dr-eyebrow { color: var(--text-on-dark); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); }
.fc-smile-strip .fc-smile-strip__card .dr-eyebrow::before { color: var(--text-on-dark); }
.fc-smile-strip .dr-btn--primary.dr-btn--inline::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); } /* the white arrow in the navy circle, as on Junquera */
.fc-smile-strip__card .dr-lead { margin: 16px 0 0; color: var(--text-muted); }
.fc-smile-strip__action { display: grid; justify-items: start; }
.fc-smile-strip .fc-smile__note { color: var(--text-muted); }
.fc-smile-strip__card--example { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy example" "action example"; row-gap: 24px; }
.fc-smile-strip__card--example .fc-smile-strip__copy { grid-area: copy; align-self: end; }
.fc-smile-strip__card--example .fc-smile-strip__action { grid-area: action; align-self: start; }
.fc-smile-strip__example { grid-area: example; margin: 0; }
.fc-smile-strip__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fc-smile-strip__shot { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: rgba(255, 255, 255, .06); }
.fc-smile-strip__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-smile-strip__example figcaption { margin-top: 10px; font-size: .82rem; color: var(--text-muted); }
@media (max-width: 900px) {
	.fc-smile-strip__card--example { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "example" "action"; }
	.fc-smile-strip__card--example .fc-smile-strip__copy { align-self: start; }
}
@media (max-width: 767px) { .fc-smile-strip__card { grid-template-columns: minmax(0, 1fr); } }

/* 26. Info pages (2026-10-31, inc/pages.php): about, doctors, new patients, on the treatment page styles. Also the form
   status lines, legal text and self hosted Inter, the same as Junquera's launch. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	font-weight: 300 600; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-weight: 300 600; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.dr-ipage-head { padding-bottom: clamp(32px, 4vw, 56px); }
.dr-ipage-head .dr-cpage__head { margin-bottom: 0; }
.dr-ipage-feature { padding-top: clamp(32px, 4vw, 56px); }
.dr-bio { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(32px, 4vw, 56px); }
.dr-bio__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.dr-bio__text h2 { margin: 0 0 20px; }
.dr-bio__text .dr-lead { margin: 0 0 16px; }
.dr-bio__text .dr-tfit__label { margin-top: 28px; }
.dr-bio__list { margin: 0; padding: 0; list-style: none; }
.dr-bio__list li { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--text-on-light) 14%, transparent); }
.dr-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dr-form__status:empty { display: none; }
.dr-form__status { font-weight: 500; color: var(--text); }
.dr-section--cream .dr-form__status { color: inherit; }
.dr-legal__body { max-width: 72ch; color: var(--text-on-light); font-size: 1.08rem; line-height: 1.7; margin-inline: auto; }
.dr-legal__body h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin: 2.2em 0 .5em; color: var(--text-on-light); }
.dr-legal__body p, .dr-legal__body ul { margin: 0 0 1em; }
.dr-legal__body ul { padding-left: 1.2em; }
.dr-legal__body li { margin-bottom: .35em; }
.dr-legal__body a { color: inherit; text-decoration: underline; }
.dr-legal__date { font-size: .9rem; color: var(--text-muted-light); }
@media (max-width: 767px) { .dr-bio__grid { grid-template-columns: minmax(0, 1fr); } }

/* 27. Smile gallery (Nov 6, from Junquera's Nov 3 page): info page "smile-gallery", section types cases and prose in
   info-page.php. The cases follow the page heading closely, before above after, three across on a computer, two on a
   tablet, one on a phone. The honest note under them is a footnote, so it sits tight. "See all smiles" under the
   homepage before and afters opens the page once it is published, centered under the cases. */
.dr-main .dr-sgallery { padding-top: clamp(8px, 1.5vw, 24px); }
.dr-sgallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px); }
@media (max-width: 1099px) { .dr-sgallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dr-sgallery__grid { grid-template-columns: minmax(0, 1fr); } }
.dr-sgallery .dr-ba { box-shadow: 0 26px 50px -38px rgba(var(--bg-deep-rgb), .45); }
.dr-sgallery .dr-sgallery__title { margin: 14px 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--text-on-light); }
.dr-main .dr-prose { padding-top: clamp(8px, 1vw, 16px); }
.dr-prose .dr-lead { max-width: 46rem; margin: 0; color: var(--text-muted-light); }
.dr-more-smiles { margin-top: clamp(28px, 3.4vw, 44px); }
.dr-results .dr-more-smiles { text-align: center; }

/* 28. Line band (Nov 6 preview, feature 'ticker' => 'line', patterns/ticker.php): the moving words without the round
   photos, so Family Crown does not look like Junquera. The hero's deep colour, a faint line above so it does not melt
   into the hero, and a thin upright line between words. */
.fc-line { background: var(--bg-deep); border-top: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; }
.fc-line .dr-ticker__row { gap: 36px; padding-right: 36px; }
.fc-line__sep { width: 1px; height: 28px; flex-shrink: 0; background: rgba(var(--accent-bright-rgb), .55); }
@media (max-width: 767px) { .fc-line { padding: 16px 0; } .fc-line .dr-ticker__row { gap: 26px; padding-right: 26px; } .fc-line__sep { height: 22px; } }

/* 29. Contact card (Nov 7, patterns/contact-page.php): in place of the photo beside the form. Her deep navy card with a
   lilac glow and her crown mark large and faint in the corner (assets/img/familycrown/mark-white.png, tinted by a mask);
   call, text, the address and the hours as a ruled list, the live open status, and directions. On a phone it comes
   before the form, so call and text are the first thing a visitor sees. */
.fc-ccard { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 22px; justify-items: start; align-content: start;
	padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; color: var(--text-on-dark);
	background: radial-gradient(80% 60% at 100% 0%, rgba(var(--accent-bright-rgb), .24) 0%, rgba(var(--accent-bright-rgb), 0) 65%), var(--bg-deep);
	box-shadow: 0 30px 60px -36px rgba(var(--bg-deep-rgb), .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
	--btn-bg: #ffffff; --btn-fg: var(--bg-deep); --btn-icon-bg: var(--bg-deep); --btn-icon-fg: #ffffff; }
.fc-ccard__mark { position: absolute; z-index: -1; right: -48px; bottom: -40px; width: 260px; aspect-ratio: 392 / 452; background: rgba(255, 255, 255, .07);
	-webkit-mask: url("../img/familycrown/mark-white.png") center / contain no-repeat; mask: url("../img/familycrown/mark-white.png") center / contain no-repeat; }
.fc-ccard__title { margin: 0; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.08; color: var(--text-on-dark); }
.dr-cpage .fc-ccard .dr-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fc-ccard__list { margin: 0; width: 100%; display: grid; }
.fc-ccard__list > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.fc-ccard__list > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fc-ccard__list dt { margin: 0; padding-top: 3px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.fc-ccard__list dd { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--text-on-dark); }
.dr-cpage .fc-ccard__list dd a { color: var(--text-on-dark); font-size: 1.15rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.dr-cpage .fc-ccard__list dd a:hover { border-bottom-color: #ffffff; }
.fc-ccard__small { display: block; margin-top: 4px; font-size: .88rem; color: var(--text-muted); }
.fc-ccard .dr-hours-status { display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
	font-size: .86rem; line-height: 1.3; color: var(--text-on-dark); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.fc-ccard .dr-hours-status[hidden] { display: none; }
.dr-hours-status strong { font-weight: 600; }
.dr-hours-status__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #9AA3B5; }
.dr-hours-status.is-open .dr-hours-status__dot { background: #3FAE6A; box-shadow: 0 0 0 3px rgba(63, 174, 106, .22); }
.dr-hours-status.is-soon .dr-hours-status__dot { background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(var(--accent-bright-rgb), .25); }
@media (max-width: 1023px) { .dr-cpage__grid .fc-ccard { order: -1; } }
@media (max-width: 767px) { .fc-ccard__list > div { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } .fc-ccard__mark { width: 190px; } }
.fc-ccard .dr-btn--primary.dr-btn--inline::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); } /* the white arrow in the navy circle */

/* 30. Treatment pages (Nov 7, as on Junquera, patterns/treatment.php). Meet your dentist after the steps: her portrait
   beside what she does for this treatment, her training and a booking button, on a slightly deeper lavender so it
   stands apart. The lenders' own logos under the payment line in the cost section (never recolored). */
.dr-main .dr-tdoc.dr-section--cream { background: var(--surface-light-2); }
.dr-tdoc__card { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 600px); justify-content: start; gap: clamp(28px, 5vw, 80px); align-items: center; }
.dr-tdoc__photo { overflow: hidden; border-radius: 28px; aspect-ratio: .8; box-shadow: 0 30px 56px -34px rgba(var(--bg-deep-rgb), .45); }
.dr-tdoc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.dr-tdoc__title { margin: 0; color: var(--text-on-light); }
.dr-tdoc__note { margin: 18px 0 0; font-size: 1.12rem; line-height: 1.6; font-weight: 500; color: var(--text-on-light); }
.dr-tdoc__details { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .95rem; color: var(--text-muted-light); }
.dr-tdoc__details li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--accent); }
.dr-tdoc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.dr-main .dr-tdoc__more { display: inline-flex; gap: 8px; font-weight: 600; color: var(--text-on-light); text-decoration: underline; text-decoration-color: rgba(var(--accent-bright-rgb), .9); text-underline-offset: 5px; }
@media (max-width: 767px) {
	.dr-tdoc__card { grid-template-columns: minmax(0, 1fr); }
	.dr-tdoc__photo { max-width: 320px; }
}
.dr-tcost__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.dr-tcost__partners a { display: inline-block; border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.dr-tcost__partners img { display: block; height: 26px; width: auto; padding: 10px 14px; box-sizing: content-box; border-radius: 12px; background: #fff; border: 1px solid rgba(var(--bg-deep-rgb), .08); }
.dr-tcost__partners a:hover, .dr-tcost__partners a:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(var(--accent-bright-rgb), .7), 0 12px 24px -16px rgba(var(--bg-deep-rgb), .5); outline: none; }
/* Patient reviews on treatment pages (Nov 7, Ahmad: the homepage section was too big here). A slim heading row with the
   Google rating as one badge on the right, then three short white review cards; a swipe row on phones. */
.fc-treviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(22px, 3vw, 32px); }
.fc-treviews__head h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.dr-main a.fc-treviews__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; color: var(--text-on-light);
	text-decoration: none; font-size: .95rem; border: 1px solid rgba(var(--bg-deep-rgb), .08); box-shadow: 0 14px 30px -22px rgba(var(--bg-deep-rgb), .5); transition: transform .2s ease; }
.dr-main a.fc-treviews__badge:hover { transform: translateY(-2px); }
.fc-treviews__g { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-deep); color: #fff; font-weight: 700; font-size: .9rem; }
.fc-treviews__badge strong { font-size: 1.15rem; }
.fc-treviews__stars { color: #F2A500; letter-spacing: .08em; }
.fc-treviews__arrow { color: var(--accent); }
.fc-treviews__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fc-treviews__card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(var(--bg-deep-rgb), .07); box-shadow: 0 20px 44px -34px rgba(var(--bg-deep-rgb), .45); }
.fc-treviews__card p.fc-treviews__stars { margin: 0; font-size: .95rem; }
.fc-treviews__card blockquote { margin: 0; flex: 1; font-size: .98rem; line-height: 1.6; color: var(--text-on-light); }
.fc-treviews__who { margin: 0; padding-top: 12px; border-top: 1px solid rgba(var(--bg-deep-rgb), .08); font-size: .88rem; color: var(--text-muted-light); }
.fc-treviews__who strong { color: var(--text-on-light); }
@media (max-width: 900px) {
	.fc-treviews__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0; padding: 4px 0 18px; scrollbar-width: none; }
	.fc-treviews__cards::-webkit-scrollbar { display: none; }
	.fc-treviews__card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* 31. Reading sizes and star contrast (Nov 7, ported from Junquera's Nov 5 fixes; measured with
   clients/Family Crown Dentistry/concept/contrast-check.mjs on all 15 pages, computer and phone).
   Running text at least 17 px, details and footer 16 px, small notes and labels at least 14 to 15 px. Text already
   bigger is left alone. !important because these rules sit in many places with different weights; this block is the
   one place for sizes. Stars on light backgrounds were Google yellow, 1.5 to 2 to 1; warm gold reads at 3.3 to 1
   (stars are graphics, they need 3). Stars on her dark sections keep their yellow. */
.dr-main .dr-tstep p, .dr-main .dr-why__list li, .dr-main .dr-faq__item p, .dr-main .dr-doctor__bio,
.dr-main .dr-service__text, .dr-main .dr-tcost__pay, .dr-main .dr-tcost__note, .dr-main .dr-bio__list li,
.dr-main .dr-thero__byline, .dr-main .fc-quote__text, .dr-main .fc-treviews__card blockquote { font-size: 17px !important; line-height: 1.6 !important; }
.dr-main .dr-thero__byline { line-height: 1.5 !important; }
.dr-contact__facts dd, .dr-contact__facts a, .dr-cpage__grid dd, .dr-main .dr-tdoc__details li, .dr-main .fc-rating__label,
.dr-footer__col p, .dr-footer__col a, .dr-footer__brand p { font-size: 16px !important; }
.dr-main .dr-form__note, .dr-main .fc-smile__note, .dr-main .fc-smile__caption, .dr-main .dr-tstep__time,
.dr-main .fc-quote__who em, .dr-main .fc-smile-strip__example figcaption { font-size: 15px !important; line-height: 1.5 !important; }
.dr-contact__facts dt, .dr-cpage__grid dt, .dr-footer__col h4, .dr-main .dr-tfit__label { font-size: 14px !important; }
.dr-tcomfort__stars, .fc-treviews__stars { color: #B07D00; }

/* 32. Homepage doctors, compact (2026-11-09, Ahmad: "the Our Doctors section in the home page is huge"). Was two
   half-page 4:5 photos, about 1,500 px tall at 1440. Now each doctor is a smaller photo with the name, role and bio
   beside it; side by side from 1100 px, one per row from 768 px, stacked on phones as before. */
@media (min-width: 768px) {
	.home .dr-doctors__grid--2 { grid-template-columns: 1fr; gap: 28px; }
	.home .dr-doctors__grid--2 .dr-doctor { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start; }
	.home .dr-doctors__grid--2 .dr-doctor > .dr-media { grid-row: 1 / span 3; }
	.home .dr-doctors__grid--2 .dr-doctor__name { margin-top: 6px; }
}
@media (min-width: 1100px) {
	.home .dr-doctors__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}


/* 33. Nov 9 (Ahmad): the address is a Google Maps link wherever it shows, and the open now status shows wherever the
   hours do (homepage contact, contact page, footer), as on Royal Dental and Junquera. */
a.dr-addr { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: rgba(127, 127, 127, .45); }
a.dr-addr:hover { border-bottom-color: currentColor; }
h2 a.dr-addr { border-bottom: 0; }
h2 a.dr-addr:hover { opacity: .85; }
.dr-hours-status:not([hidden]) { display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
	font-size: .86rem; line-height: 1.3; }
.dr-section--cream .dr-hours-status, .dr-contact .dr-hours-status { color: var(--text-on-light); background: rgba(104, 40, 160, .07); border: 1px solid rgba(104, 40, 160, .16); }
.dr-footer .dr-hours-status, .fc-ccard .dr-hours-status { color: var(--text-on-dark); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }

/* 34. Legal pages tighter (Nov 9, Ahmad: too much empty space; the subheading under the title on computers). The title,
   subheading and text share one centred column; section headings smaller with less space above. */
.dr-legal { min-height: 0; padding-bottom: clamp(64px, 7vw, 96px); }
.dr-legal .dr-cpage__head { display: block; max-width: 72ch; margin: 0 auto clamp(20px, 3vw, 32px); }
.dr-legal .dr-cpage__intro { margin-top: 12px; max-width: 60ch; }
.dr-main .dr-legal__body h2 { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); line-height: 1.25; margin: 1.6em 0 .45em; }
.dr-main .dr-legal__body h2:first-of-type { margin-top: 1.2em; }
.dr-legal .dr-cpage__head { font-size: 1.08rem; text-align: left; } /* same 72ch column as the text below */
.dr-legal .dr-cpage__title, .dr-legal .dr-cpage__intro { text-align: left; margin-left: 0; margin-right: 0; max-width: none; justify-self: start; }
.dr-footer a.dr-addr { border-bottom: 0; }


/* 35. Contact details and hours card (Nov 9, Ahmad: like Royal Dental's location block). dentalrun_contact_block():
   address, phone, text and email rows with round icon badges, then a white hours card with the open now pill in its
   header. Homepage contact section and contact page "Find us". */
.dr-loc { font-style: normal; display: grid; gap: 14px; margin: 26px 0 22px; }
.dr-loc__row { display: flex; align-items: center; gap: 14px; margin: 0; }
.dr-loc__badge { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #EEE6F8; color: #6828A0; }
.dr-loc__text { display: flex; flex-direction: column; line-height: 1.35; }
.dr-loc__text a { color: var(--text-on-light); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; width: fit-content; overflow-wrap: anywhere; }
.dr-loc__text a:hover { border-bottom-color: currentColor; }
.dr-main .dr-loc__note { font-size: 14px; color: var(--text-muted-light); }
.dr-hours-card { background: #FFFFFF; border: 1px solid rgba(104, 40, 160, .14); border-radius: 18px; padding: 18px 22px 8px; margin: 0 0 28px; max-width: 460px; box-shadow: 0 10px 30px -18px rgba(40, 20, 80, .35); }
.dr-hours-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(104, 40, 160, .12); }
.dr-hours-card__title { margin: 0; font-weight: 700; color: var(--text-on-light); font-size: 1.02rem; }
.dr-hours-card .dr-hours-status:not([hidden]) { margin-top: 0; }
.dr-hours-card__table { width: 100%; border-collapse: collapse; }
.dr-hours-card__table th, .dr-hours-card__table td { padding: 11px 0; border-bottom: 1px solid rgba(104, 40, 160, .08); font-size: 16px; color: var(--text-on-light); }
.dr-hours-card__table tr:last-child th, .dr-hours-card__table tr:last-child td { border-bottom: 0; }
.dr-hours-card__table th { text-align: left; font-weight: 500; }
.dr-hours-card__table td { text-align: right; color: var(--text-muted-light); }
@media (max-width: 767px) { .dr-hours-card { max-width: none; } }
.dr-hours-card .dr-hours-status:not([hidden]) { color: var(--text-on-light); background: rgba(104, 40, 160, .07); border: 1px solid rgba(104, 40, 160, .16); }
.dr-cpage-info .dr-loc__text a { color: var(--text-on-dark); }
.dr-cpage-info .dr-loc__note { color: var(--text-muted); }
.dr-cpage-info .dr-loc__badge { background: rgba(255, 255, 255, .1); color: #E3D3F5; }


/* Nov 9: booking card in the contact section and the question form heading on the contact page (patterns/contact.php,
   patterns/contact-page.php), shown only while the DentalRun booking portal is switched on. */
.dr-bookcard { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.dr-bookcard h3 { margin: 0; }
.dr-bookcard__lead { margin: 0; }
.dr-bookcard__steps { margin: 4px 0 6px; padding: 0; list-style: none; counter-reset: drb; display: grid; gap: 10px; }
.dr-bookcard__steps li { counter-increment: drb; display: flex; align-items: center; gap: 12px; font-size: 16px; }
.dr-bookcard__steps li::before { content: counter(drb); flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	font-size: 14px; font-weight: 700; color: var(--accent-deep, currentColor); background: rgba(var(--accent-bright-rgb, 120, 90, 60), .14); }
.dr-bookcard .dr-btn { align-self: flex-start; }
.dr-bookcard__call { margin: 0; font-size: 15px; }
.dr-bookcard__call a { color: inherit; text-decoration: underline; }
.dr-form__intro { margin-bottom: 6px; }
.dr-form__intro .dr-form__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin: 0 0 6px; }
.dr-form__intro p { margin: 0; }
.dr-form__intro a { color: inherit; text-decoration: underline; }

/* 36. Memberships and partners under the trust numbers (Nov 10, the office asked; patterns/partners.php). Official logos in
   their own colours, one row on computers, wrapping on phones. */
.dr-partners { background: #fff; padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(28px, 4vw, 48px); }
.dr-partners__title { text-align: center; margin: 0 0 18px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--bg-deep-rgb), .62); }
.dr-partners__list { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 6.5vw, 96px); } /* Nov 10 (Ahmad): more air between the logos on computers */
.dr-partners__list li { display: flex; align-items: center; }
.dr-partners__list img { display: block; width: auto; max-width: 100%; }
@media (max-width: 600px) {
	.dr-partners__list { gap: 20px 28px; }
	.dr-partners__list img { max-height: 30px; }
}