/**
 * Doctor Banoo theme styles.
 *
 * Colours, type sizes and spacing come from theme.json as --wp--preset-- variables and follow the
 * product design system (product-spec/06). This file adds what theme.json cannot express: radii,
 * shadows, the header, the phone tab bar, the footer, every home page section, form controls and
 * the dark scheme. The site is RTL, so only logical properties are used.
 *
 * The site is light only. Dark surfaces appear as deliberate banners (the booking-steps band and
 * the footer), never as a whole-page scheme.
 */

:root {
	--drb-radius-sm: 8px;
	--drb-radius-md: 12px;
	--drb-radius-lg: 20px;
	--drb-radius-xl: 28px;
	--drb-radius-full: 999px;
	--drb-shadow-sm: 0 1px 2px rgba(27, 36, 32, 0.06);
	--drb-shadow-md: 0 4px 16px rgba(27, 36, 32, 0.08);
	--drb-shadow-lg: 0 12px 32px rgba(27, 36, 32, 0.1);
	--drb-ease: 200ms ease-out;
	--drb-wrap: 1120px;
	--drb-gutter: var(--wp--preset--spacing--4);
	--drb-tile-pink: #ffeef4;
	--drb-tile-green: #e8f7f0;
	--drb-tile-cream: #fdf7f0;
	--drb-footer-bg: #1f5d4c;
	--drb-footer-ink: #f3f7f5;
	--drb-footer-muted: rgba(243, 247, 245, 0.72);
	--drb-footer-line: rgba(243, 247, 245, 0.16);
	--drb-tabbar-height: 64px;
}

@media (min-width: 900px) {
	:root {
		--drb-gutter: var(--wp--preset--spacing--5);
	}
}

/* Base
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
}

body {
	overflow-x: hidden;
	font-feature-settings: "ss01" 0, "ss02" 0, "salt" 0, "dlig" 0;
}

p {
	max-inline-size: 70ch;
	text-wrap: pretty;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

::selection {
	background: var(--wp--preset--color--pink-illus);
	color: var(--wp--preset--color--text);
}

/* A tap on a phone should leave nothing behind: Android paints a blue-grey box over whatever is
   touched, which lands straight on the tab bar and the cards. The keyboard's own outline stays. */

html {
	-webkit-tap-highlight-color: transparent;
}

a,
button,
label,
summary,
input,
select,
textarea,
[role="button"],
[tabindex] {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--green-action);
	outline-offset: 2px;
}

/* A click or a tap leaves no ring; only the keyboard does. */
:focus:not(:focus-visible) {
	outline: none;
}

img {
	block-size: auto;
}

/* Square illustration slots. The pictures are trimmed to their subject when exported, so one can
   come back taller than it is wide; the slot keeps its square and the picture fits inside it
   instead of stretching the card around it. */
.drb-cloud__object,
.drb-band__figure,
.drb-team__mark img,
.drb-page__hero-figure img,
.drb-stage-hero__figure img,
.drb-stage-card__figure img {
	aspect-ratio: 1;
	block-size: auto;
	object-fit: contain;
}
.drb-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.drb-skip {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--2);
	inset-inline-start: var(--wp--preset--spacing--2);
	z-index: 100;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	text-decoration: none;
	transform: translateY(-200%);
}

.drb-skip:focus {
	transform: none;
}

.drb-wrap {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--drb-wrap);
	margin-inline: auto;
	padding-inline: var(--drb-gutter);
}

/* Layout shell. The main landmark runs edge to edge; each section carries its own .drb-wrap, so
   backgrounds reach the sides of the screen. Block content inside a page sits in .drb-content,
   which is a constrained layout like the block editor's. */

.drb-site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100dvh;
}

.drb-main {
	flex: 1 0 auto;
	outline: 0;
}

.drb-main > * + * {
	margin-block-start: 0;
}

.drb-content {
	padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
}

.drb-content > :first-child.alignfull {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--5));
}

.drb-content > .drb-booking,
.drb-content > .drb-pro,
.drb-content > .drb-contact-grid {
	max-inline-size: var(--wp--style--global--wide-size);
}

.drb-main--sections .drb-content,
.drb-main--builder {
	padding-block: 0;
}

html.drb-locked {
	overflow: hidden;
}

.drb-section {
	padding-block: var(--wp--preset--spacing--6);
}

.drb-section--tight {
	padding-block: var(--wp--preset--spacing--3);
}

@media (min-width: 900px) {
	.drb-section {
		padding-block: var(--wp--preset--spacing--7);
	}

	.drb-section--tight {
		padding-block: var(--wp--preset--spacing--5);
	}
}

.drb-section--band {
	background: var(--wp--preset--color--green-ink);
	color: var(--drb-footer-ink);
	margin-block: var(--wp--preset--spacing--5);
}

.drb-section--band .drb-section__title {
	color: var(--drb-footer-ink);
}

.drb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	margin-block-end: var(--wp--preset--spacing--5);
}

.drb-section__head--center {
	justify-content: center;
	text-align: center;
}

.drb-section__title {
	margin: 0;
}

.drb-section__sub {
	margin: var(--wp--preset--spacing--1) 0 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-section__tools {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

.drb-label {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
	letter-spacing: 0.01em;
}

/* As a paragraph block the label is its own line. Left inline-block, it ignores the editor's
   centring class and sits at the start edge of a full-width band instead of above the title. */
p.drb-label {
	display: block;
}

/* Icons, buttons, links, inputs
   ------------------------------------------------------------------ */

.drb-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex-shrink: 0;
	vertical-align: -0.3em;
}

.drb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: 44px;
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-button:hover {
	background: var(--wp--preset--color--green-ink);
	color: var(--wp--preset--color--on-action);
}

.drb-button:active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.drb-button--outline {
	background: transparent;
	color: var(--wp--preset--color--green-action);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--green-action);
}

.drb-button--outline:hover {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-block-size: 44px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--green-action);
	white-space: nowrap;
}

.drb-link-arrow .drb-icon {
	transition: transform var(--drb-ease);
}

.drb-link-arrow:hover {
	color: var(--wp--preset--color--green-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.drb-link-arrow:hover .drb-icon {
	transform: translateX(-3px);
}

.drb-rail-nav {
	display: none;
	gap: var(--wp--preset--spacing--2);
}

@media (min-width: 900px) and (hover: hover) {
	.drb-rail-nav {
		display: inline-flex;
	}
}

.drb-rail-nav__button {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	cursor: pointer;
	transition: border-color var(--drb-ease), background-color var(--drb-ease);
}

.drb-rail-nav__button:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
}

.drb-rail-nav__button .drb-icon {
	inline-size: 18px;
	block-size: 18px;
}

/* In RTL the "previous" chevron points to the right, "next" to the left. */

.drb-rail-nav__button--next .drb-icon {
	transform: none;
}

.drb-rail-nav__button:not(.drb-rail-nav__button--next) .drb-icon {
	transform: scaleX(-1);
}

.drb-input {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0.6em 1em;
	border: 1px solid var(--drb-field-border);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--green-action);
	box-shadow: 0 0 0 3px var(--wp--preset--color--green-illus);
}

.drb-input::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 0.8;
}

.drb-notice {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	font-size: var(--wp--preset--font-size--small);
}

.drb-notice--success {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-notice--error {
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--text);
}

/* Chips */

.drb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	list-style: none;
}

.drb-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding: 0.35em 1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--drb-ease), background-color var(--drb-ease), color var(--drb-ease);
}

.drb-chip:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

/* Horizontal rails (life stages on every screen, magazine on phones)
   The rail lives inside the content column and clips at its edges, so the cards line up with
   every other section; the prev/next buttons and swiping reveal the rest.
   ------------------------------------------------------------------ */

.drb-rail {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--drb-wrap);
	margin-inline: auto;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	padding-inline: var(--drb-gutter);
	scroll-padding-inline: var(--drb-gutter);
	-webkit-overflow-scrolling: touch;
}

.drb-rail::-webkit-scrollbar {
	display: none;
}

.drb-rail:focus-visible {
	outline-offset: -2px;
}

.drb-rail__track {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
	inline-size: max-content;
	min-inline-size: 100%;
}

.drb-rail__track > * {
	scroll-snap-align: start;
}

/* Header
   ------------------------------------------------------------------ */

.drb-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	padding-block: var(--wp--preset--spacing--3);
	/* Not a white strip: a wash of the brand's own two colours, thin enough to read through and
	   to keep the menu's contrast. */
	background:
		linear-gradient(90deg, rgba(255, 238, 244, 0.94) 0%, rgba(255, 252, 253, 0.9) 48%, rgba(232, 247, 240, 0.9) 100%),
		color-mix(in srgb, var(--wp--preset--color--page) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-block-end: 1px solid transparent;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-header.is-scrolled {
	border-block-end-color: var(--wp--preset--color--line);
	box-shadow: var(--drb-shadow-sm);
}

.admin-bar .drb-header {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .drb-header {
		inset-block-start: 0;
	}
}

.drb-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
}

.drb-header__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.drb-header__logo img {
	inline-size: auto;
	block-size: 40px;
}

.drb-header__nav {
	flex: 1 1 auto;
	justify-content: center;
}

.drb-menu {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-menu > li {
	position: relative;
}

.drb-menu a {
	display: block;
	padding: 0.4rem 0.35rem;
	white-space: nowrap;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color var(--drb-ease);
}

.drb-menu a:hover,
.drb-menu .current-menu-item > a,
.drb-menu .current-menu-ancestor > a {
	color: var(--wp--preset--color--green-action);
}

.drb-menu .current-menu-item > a,
.drb-menu .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
	text-decoration-color: var(--wp--preset--color--green-decor);
}

/* A second level opens under its parent on hover or keyboard focus. */
.drb-menu .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	display: grid;
	min-inline-size: 220px;
	margin: 0;
	padding: var(--wp--preset--spacing--2);
	list-style: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--drb-ease), transform var(--drb-ease), visibility var(--drb-ease);
}

.drb-menu li:hover > .sub-menu,
.drb-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.drb-menu .sub-menu a {
	padding: 0.5rem 0.75rem;
	border-radius: var(--drb-radius-sm);
}

.drb-menu .sub-menu a:hover {
	background: var(--wp--preset--color--green-bg);
}

.drb-header__tools {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	flex-shrink: 0;
}

.drb-header__cta {
	min-block-size: 40px;
	padding: 0.45em 1.1em;
	font-size: var(--wp--preset--font-size--small);
}

/* Phone header: logo on the start side, toggle and menu button on the end side.
   The booking button lives in the tab bar instead. */

@media (max-width: 899px) {
	.drb-header {
		padding-block: var(--wp--preset--spacing--2);
	}

	.drb-header__logo img {
		block-size: 34px;
	}

	.drb-header__nav,
	.drb-header__cta,
	.drb-header__account-label {
		display: none;
	}

	.drb-header__tools {
		margin-inline-start: auto;
	}

}

/* Header details
   ------------------------------------------------------------------
   A header is the first thing read on every page, so it carries more than a logo and links: the
   site's first action as a field rather than a hidden magnifier, the phone for whoever would
   rather call, and a hairline that only appears once the page has moved. */

.drb-header__find {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease), color var(--drb-ease);
}

.drb-header__find svg {
	inline-size: 18px;
	block-size: 18px;
	color: var(--wp--preset--color--pink-mid);
}

.drb-header__find:hover,
.drb-header__find:focus-visible {
	border-color: var(--wp--preset--color--pink-soft);
	box-shadow: var(--drb-shadow-sm);
	color: var(--wp--preset--color--text);
}

/* The magnifier and the phone are the narrow-screen versions of the field beside them.
   .drb-iconbutton is declared further down the file, so these need the extra class to win. */
.drb-header .drb-header__findicon,
.drb-header .drb-header__call {
	display: none;
}

/* The menu items sit in pills: hover fills them softly, the page you are on keeps its fill. */

.drb-menu a {
	padding: 0.42rem 0.9rem;
	border-radius: var(--drb-radius-full);
	transition: color var(--drb-ease), background-color var(--drb-ease);
}

.drb-menu a:hover {
	background: var(--drb-tile-pink);
}

.drb-menu .current-menu-item > a,
.drb-menu .current-menu-ancestor > a {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	text-decoration: none;
}

.drb-header__cta {
	gap: 0.5em;
	box-shadow: 0 6px 18px rgba(31, 122, 100, 0.22);
}

.drb-header__cta svg {
	inline-size: 18px;
	block-size: 18px;
	transition: transform var(--drb-ease);
}

.drb-header__cta:hover svg {
	transform: translateY(-2px);
}

/* The hairline under the header: a thread of the brand's two colours, drawn only once the page
   has been scrolled, so a page at rest keeps its calm. */

/* A thread of the brand's colours along the very top of the page, so the header is never a plain
   white strip even before anything is scrolled. */

.drb-header::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--pink-decor), var(--wp--preset--color--pink-soft) 30%, var(--wp--preset--color--green-illus) 62%, var(--wp--preset--color--green-decor));
	opacity: 0.9;
}

.drb-topbar + .drb-header::before {
	display: none;
}

.drb-header::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline: 0;
	block-size: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--pink-soft) 22%, var(--wp--preset--color--green-illus) 50%, var(--wp--preset--color--pink-soft) 78%, transparent);
	opacity: 0;
	transition: opacity var(--drb-ease);
}

.drb-header.is-scrolled::after {
	opacity: 1;
}

.drb-header__logo img {
	transition: block-size var(--drb-ease);
}

@media (min-width: 900px) {
	.drb-header {
		transition: padding-block var(--drb-ease), border-color var(--drb-ease), box-shadow var(--drb-ease);
	}

	.drb-header.is-scrolled {
		padding-block: var(--wp--preset--spacing--2);
	}

	.drb-header.is-scrolled .drb-header__logo img {
		block-size: 34px;
	}

	.drb-header.is-scrolled .drb-header__find {
		min-block-size: 36px;
	}
}

@media (max-width: 899px) {
	.drb-header__find {
		display: none;
	}

	.drb-header .drb-header__findicon,
	.drb-header .drb-header__call {
		display: grid;
	}
}

/* Phone tab bar
   ------------------------------------------------------------------
   Four tabs and one raised key. The bar is a capsule of glass that floats off the screen edge,
   and booking rises out of the middle of it inside a ring of the page colour, which is what cuts
   the straight line. Only one item is ever coloured — the page you are on. The chat is an
   ordinary tab until a message is actually waiting. */

.drb-tabbar {
	display: none;
}

@media (max-width: 899px) {
	body.drb-has-tabbar {
		/* Room for the bar, for the key that rises out of it, and for the gap under both. */
		padding-block-end: calc(var(--drb-tabbar-height) + env(safe-area-inset-bottom, 0px) + 38px);
	}

	.drb-tabbar {
		position: fixed;
		inset-inline: 10px;
		inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
		z-index: 60;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: end;
		gap: 2px;
		padding: 8px 6px 6px;
		border: 1px solid rgba(255, 252, 253, 0.7);
		border-radius: 26px;
		background: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
		backdrop-filter: blur(20px) saturate(150%);
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		box-shadow: 0 12px 34px rgba(27, 36, 32, 0.16), 0 2px 6px rgba(27, 36, 32, 0.05);
		transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease-out;
	}

	.drb-tabbar.is-away {
		transform: translateY(calc(100% + 22px));
		opacity: 0;
	}

	.drb-tabbar__item {
		position: relative;
		display: grid;
		justify-items: center;
		gap: 4px;
		padding-block: 6px 4px;
		border-radius: 18px;
		color: var(--wp--preset--color--text-muted);
		text-decoration: none;
		transition: color var(--drb-ease), background-color var(--drb-ease);
	}

	.drb-tabbar__mark {
		display: grid;
		place-items: center;
		inline-size: 30px;
		block-size: 30px;
	}

	.drb-tabbar__item .drb-icon {
		inline-size: 23px;
		block-size: 23px;
		transition: transform var(--drb-ease);
	}

	.drb-tabbar__label {
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
	}

	/* The one highlight on the bar. */
	.drb-tabbar__item[aria-current="page"] {
		color: var(--wp--preset--color--green-ink);
		background: var(--wp--preset--color--green-bg);
	}

	.drb-tabbar__item[aria-current="page"] .drb-icon {
		transform: scale(1.06);
	}

	/* Booking: a key that rises out of the bar, its label staying in the row with the others. */
	.drb-tabbar__item--book {
		gap: 0;
		padding-block-start: 0;
		background: none;
		color: var(--wp--preset--color--green-ink);
	}

	.drb-tabbar__item--book .drb-tabbar__mark {
		inline-size: 52px;
		block-size: 52px;
		/* The ring around the key is 5px wide, so the label needs that much more room under it
		   than the gap alone would give. */
		margin-block: -24px 9px;
		border-radius: var(--drb-radius-full);
		background: linear-gradient(180deg, #23886f, var(--wp--preset--color--green-action));
		color: var(--wp--preset--color--on-action);
		box-shadow: 0 0 0 5px var(--wp--preset--color--page), 0 10px 22px rgba(31, 122, 100, 0.36);
		transition: transform var(--drb-ease), box-shadow var(--drb-ease);
	}

	.drb-tabbar__item--book .drb-icon {
		inline-size: 24px;
		block-size: 24px;
	}

	.drb-tabbar__item--book:active .drb-tabbar__mark {
		transform: scale(0.94);
	}

	.drb-tabbar__item--book[aria-current="page"] {
		background: none;
	}

	.drb-tabbar__item--book[aria-current="page"] .drb-tabbar__mark {
		box-shadow: 0 0 0 5px var(--wp--preset--color--page), 0 0 0 7px var(--wp--preset--color--green-illus), 0 10px 22px rgba(31, 122, 100, 0.36);
	}

	/* Waiting message: the only other mark the bar ever shows. */
	.drb-tabbar__dot {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 2px;
		inline-size: 9px;
		block-size: 9px;
		border-radius: var(--drb-radius-full);
		background: var(--wp--preset--color--pink-decor);
		box-shadow: 0 0 0 2px var(--wp--preset--color--white);
		animation: drb-breathe 2.4s ease-in-out infinite;
	}

	.drb-tabbar__item--chat.is-open {
		color: var(--wp--preset--color--green-ink);
		background: var(--wp--preset--color--green-bg);
	}
}

/* Hero — inside the embrace
   The logo's arc is scaled up and the copy, the search and the chips sit inside it; the search box
   lands where the arc opens. On phones the arc becomes an oversized backdrop behind normal flow.
   ------------------------------------------------------------------ */

.drb-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3);
}

.drb-embrace {
	position: relative;
	inline-size: 100%;
	max-inline-size: 860px;
	margin-inline: auto;
}

.drb-embrace__arc {
	display: block;
	inline-size: 100%;
	block-size: auto;
	fill: var(--wp--preset--color--green-illus);
}

.drb-embrace__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (min-width: 900px) {
	.drb-hero {
		padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
	}

	/* The inner circle of the mark, in percent of the arc's box. */
	.drb-embrace__inner {
		position: absolute;
		inset-inline-start: 17%;
		inset-block-start: 15%;
		inline-size: 66%;
		block-size: 76%;
		padding-block-start: 4%;
	}

	.drb-embrace__inner > * {
		max-inline-size: 78%;
	}
}

.drb-hero__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	max-inline-size: 15ch;
}

.drb-hero__lead {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	max-inline-size: 36ch;
}

.drb-search {
	inline-size: 100%;
	max-inline-size: 560px;
}

.drb-search__field {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-search__field:focus-within {
	border-color: var(--wp--preset--color--green-action);
	box-shadow: var(--drb-shadow-lg), 0 0 0 3px var(--wp--preset--color--green-illus);
}

.drb-search__field > .drb-icon {
	inline-size: 22px;
	block-size: 22px;
	margin-inline-start: 6px;
	color: var(--wp--preset--color--text-muted);
}

.drb-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	text-align: start;

	/* The placeholder rotates through real questions, and the long ones reach the button.
	   Truncating them keeps the last word readable instead of shearing it. */
	text-overflow: ellipsis;
}

.drb-search__input:focus {
	outline: none;
}

.drb-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.drb-search__button {
	border-radius: var(--drb-radius-full);
	min-block-size: 44px;
	white-space: nowrap;
	flex-shrink: 0;
}

.drb-hero__chips {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--4);
}

@media (min-width: 900px) {
	.drb-hero__chips {
		max-inline-size: 100%;
	}
}

@media (max-width: 899px) {
	.drb-embrace {
		padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
	}

	.drb-embrace__arc {
		position: absolute;
		inset-block-start: -4%;
		inset-inline-start: 50%;
		inline-size: 128%;
		max-inline-size: none;
		transform: translateX(-50%);
		opacity: 0.5;
		pointer-events: none;
		animation: none;
	}

	.drb-embrace__inner {
		position: relative;
		padding-inline: var(--wp--preset--spacing--2);
	}

	.drb-hero__title {
		max-inline-size: 16ch;
	}

	.drb-search__field > .drb-icon {
		display: none;
	}

	.drb-search__field {
		gap: var(--wp--preset--spacing--3);
		padding-inline-start: 10px;
	}

	/* The hint drops a step so the longest concern fits the box; what gets typed keeps the
	   reading size. The script drops the «مثلاً» prefix on this width for the same reason. */
	.drb-search__input::placeholder {
		font-size: var(--wp--preset--font-size--small);
	}

	.drb-search__button {
		padding-inline: 0.9em;
	}

	.drb-hero__chips {
		flex-wrap: nowrap;
		justify-content: flex-start;
		inline-size: calc(100% + 2 * var(--drb-gutter));
		overflow-x: auto;
		scrollbar-width: none;
		padding-inline: var(--drb-gutter);
		scroll-snap-type: x proximity;
		-webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--drb-gutter), #000 calc(100% - var(--drb-gutter)), transparent 100%);
		mask-image: linear-gradient(to left, transparent 0, #000 var(--drb-gutter), #000 calc(100% - var(--drb-gutter)), transparent 100%);
	}

	.drb-hero__chips::-webkit-scrollbar {
		display: none;
	}

	.drb-hero__chips > li {
		scroll-snap-align: start;
	}
}

/* Hero variants B, C, D (A is the embrace above). The active one is a setting.
   ------------------------------------------------------------------ */

.drb-accent {
	color: var(--wp--preset--color--pink-mid);
}

/* --- B: the cloud of unasked questions --- */

.drb-hero--b {
	padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
}

.drb-hero-b {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	align-items: center;
}

@media (min-width: 900px) {
	.drb-hero--b {
		padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
	}

	.drb-hero-b {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: var(--wp--preset--spacing--7);
	}
}

.drb-hero-b__copy {
	min-inline-size: 0;
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-hero-b__copy .drb-hero__title {
	max-inline-size: 17ch;
}

.drb-hero-b__copy .drb-hero__chips {
	justify-content: flex-start;
}

.drb-cloud {
	position: relative;
	aspect-ratio: 1;
	max-inline-size: 520px;
	margin-inline: auto;
	inline-size: 100%;
}

.drb-cloud__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(30px);
	opacity: 0.9;
}

.drb-cloud__blob--pink {
	inset-block-start: 6%;
	inset-inline-end: 4%;
	inline-size: 62%;
	aspect-ratio: 1;
	background: var(--wp--preset--color--pink-bg);
}

.drb-cloud__blob--green {
	inset-block-end: 4%;
	inset-inline-start: 2%;
	inline-size: 52%;
	aspect-ratio: 1;
	background: var(--wp--preset--color--green-bg);
}

.drb-cloud__object {
	position: absolute;
	border-radius: 0;
	filter: drop-shadow(0 14px 18px rgba(31, 93, 76, 0.14));
	transform-origin: 50% 100%;
	animation: drb-set-in 800ms cubic-bezier(0.2, 0.8, 0.25, 1) both, drb-float 6s ease-in-out infinite;
	/* The pointer nudges the objects a few pixels each, the nearer ones further. Kept in the
	   translate property so it composes with the floating animation instead of fighting it. */
	translate: var(--px, 0) var(--py, 0);
	transition: translate 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.drb-cloud__object--1 {
	inset-block-start: 18%;
	inset-inline-start: 22%;
	inline-size: 56%;
	animation-delay: 200ms, 1s;
}

.drb-cloud__object--2 {
	inset-block-start: 0;
	inset-inline-end: 6%;
	inline-size: 30%;
	animation-delay: 420ms, 1.8s;
}

.drb-cloud__object--3 {
	inset-block-end: 6%;
	inset-inline-end: 12%;
	inline-size: 24%;
	animation-delay: -4s, 560ms;
}

.drb-cloud__object--4 {
	inset-block-end: 12%;
	inset-inline-start: 4%;
	inline-size: 26%;
	animation-delay: -1s, 700ms;
}

.drb-cloud__whisper {
	position: absolute;
	padding: 0.35em 0.9em;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--drb-shadow-sm);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
	text-decoration: none;
	white-space: nowrap;
	animation: drb-float 7s ease-in-out infinite, drb-pop 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-cloud__whisper:hover {
	border-color: var(--wp--preset--color--green-decor);
	color: var(--wp--preset--color--green-action);
}

.drb-cloud__whisper--1 { inset-block-start: 10%; inset-inline-start: 6%; animation-delay: -3s, 800ms; }
.drb-cloud__whisper--2 { inset-block-start: 42%; inset-inline-end: 0; animation-delay: -1.5s, 950ms; }
.drb-cloud__whisper--3 { inset-block-end: 22%; inset-inline-start: 34%; animation-delay: -5s, 1100ms; }
.drb-cloud__whisper--4 { inset-block-end: 0; inset-inline-end: 30%; animation-delay: -2.5s, 1250ms; }

@media (max-width: 899px) {
	.drb-cloud {
		max-inline-size: 340px;
	}

	.drb-cloud__whisper {
		font-size: 0.72rem;
	}
}

/* --- C: the night band --- */

.drb-hero--c {
	background: var(--wp--preset--color--green-ink);
	color: var(--drb-footer-ink);
	padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
	overflow: hidden;
	position: relative;
	border-radius: var(--drb-radius-xl);
}

.drb-hero--c::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(174, 229, 208, 0.16), transparent 40%),
		radial-gradient(circle at 85% 90%, rgba(251, 196, 214, 0.14), transparent 45%);
	pointer-events: none;
}

.drb-hero-c {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--6);
	align-items: center;
}

@media (min-width: 900px) {
	.drb-hero--c {
		padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--7);
	}

	.drb-hero-c {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--wp--preset--spacing--8);
	}
}

.drb-hero-c__copy {
	min-inline-size: 0;
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-hero-c__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--green-illus);
	letter-spacing: 0.02em;
}

.drb-hero--c .drb-hero__title {
	color: var(--drb-footer-ink);
	max-inline-size: 18ch;
}

.drb-hero--c .drb-accent {
	color: var(--wp--preset--color--pink-illus);
}

.drb-hero--c .drb-hero__lead {
	color: var(--drb-footer-muted);
}

.drb-hero--c .drb-search__field {
	border-color: transparent;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.drb-chips--onDark {
	justify-content: flex-start;
}

.drb-chips--onDark .drb-chip {
	background: rgba(255, 252, 253, 0.06);
	border-color: rgba(255, 252, 253, 0.22);
	color: var(--drb-footer-ink);
}

.drb-chips--onDark .drb-chip:hover {
	background: rgba(255, 252, 253, 0.14);
	border-color: var(--wp--preset--color--green-illus);
	color: var(--drb-footer-ink);
}

.drb-moon {
	position: relative;
	aspect-ratio: 1;
	inline-size: 100%;
	max-inline-size: 440px;
	margin-inline: auto;
	display: grid;
	place-items: center;
}

.drb-moon__arc {
	position: absolute;
	inset: -6%;
	inline-size: 112%;
	block-size: 112%;
	fill: none;
	stroke: var(--wp--preset--color--green-illus);
	stroke-width: 6;
	stroke-linecap: round;
	opacity: 0.55;
	animation: drb-breathe 8s ease-in-out infinite;
	transform-origin: 50% 55%;
}

.drb-moon__disc {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 66%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #fff6f9, var(--drb-tile-pink) 70%);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 -10px 30px rgba(251, 196, 214, 0.6);
	animation: drb-pop 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms both;
}

.drb-moon__disc img {
	inline-size: 74%;
	border-radius: 0;
	animation: drb-float 6s ease-in-out infinite;
}

.drb-moon__satellite {
	position: absolute;
	border-radius: 0;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.3));
	animation: drb-float 7s ease-in-out infinite, drb-pop 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-moon__satellite--1 {
	inset-block-start: 4%;
	inset-inline-start: 2%;
	inline-size: 30%;
	animation-delay: -2s, 600ms;
}

.drb-moon__satellite--2 {
	inset-block-end: 6%;
	inset-inline-end: 0;
	inline-size: 32%;
	animation-delay: -4s, 800ms;
}

.drb-moon__spark {
	position: absolute;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--pink-illus);
	box-shadow: 0 0 12px var(--wp--preset--color--pink-illus);
	animation: drb-twinkle 3s ease-in-out infinite;
}

.drb-moon__spark--1 { inset-block-start: 14%; inset-inline-end: 18%; }
.drb-moon__spark--2 { inset-block-end: 26%; inset-inline-start: 14%; inline-size: 6px; block-size: 6px; animation-delay: -1s; background: var(--wp--preset--color--green-illus); box-shadow: 0 0 10px var(--wp--preset--color--green-illus); }
.drb-moon__spark--3 { inset-block-start: 48%; inset-inline-end: 2%; inline-size: 7px; block-size: 7px; animation-delay: -2s; }

@keyframes drb-twinkle {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

@media (max-width: 899px) {
	.drb-hero--c {
		padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	}

	.drb-moon {
		max-inline-size: 300px;
	}
}

/* --- D: the big question and the shelf --- */

.drb-hero--d {
	padding-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
}

@media (min-width: 900px) {
	.drb-hero--d {
		padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--5);
	}
}

.drb-hero-d {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.drb-hero-d > * {
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-hero-d > :nth-child(2) { animation-delay: 120ms; }
.drb-hero-d > :nth-child(3) { animation-delay: 240ms; }
.drb-hero-d > :nth-child(4) { animation-delay: 360ms; }
.drb-hero-d > :nth-child(5) { animation-delay: 480ms; }
.drb-hero-d > :nth-child(6) { animation-delay: 600ms; }

.drb-hero-d__mark {
	inline-size: 56px;
	margin-block-end: var(--wp--preset--spacing--4);
	border-radius: 0;
}

.drb-hero-d__title {
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: 1.25;
	max-inline-size: 22ch;
}

.drb-underline {
	position: relative;
	white-space: nowrap;
}

.drb-underline::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.08em;
	block-size: 0.28em;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-illus);
	z-index: -1;
	transform-origin: 100% 50%;
	animation: drb-ink 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 700ms both;
}

@keyframes drb-ink {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.drb-hero--d .drb-hero__lead {
	max-inline-size: 48ch;
}

.drb-search--wide {
	max-inline-size: 760px;
}

.drb-search--wide .drb-search__field {
	padding: 8px 8px 8px 18px;
}

.drb-search--wide .drb-search__input {
	min-block-size: 52px;
	font-size: var(--wp--preset--font-size--lead);
}

.drb-search--wide .drb-search__button {
	min-block-size: 52px;
	padding-inline: 1.8em;
}

.drb-hero--d .drb-hero__chips {
	justify-content: flex-start;
}

.drb-shelf {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--wp--preset--spacing--3);
	inline-size: 100%;
	margin: var(--wp--preset--spacing--7) 0 0;
	padding: 0;
	list-style: none;
}

.drb-shelf__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--drb-radius-lg);
	background: var(--drb-tile-pink);
	color: var(--wp--preset--color--green-ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: transform var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-shelf__tile--puberty,
.drb-shelf__tile--preconception,
.drb-shelf__tile--postpartum {
	background: var(--drb-tile-green);
}

.drb-shelf__tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--drb-shadow-md);
}

.drb-shelf__tile img {
	inline-size: 64%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0;
	animation: drb-float 6s ease-in-out infinite;
}

.drb-shelf li:nth-child(2n) .drb-shelf__tile img { animation-delay: -2s; }
.drb-shelf li:nth-child(3n) .drb-shelf__tile img { animation-delay: -4s; }

@media (max-width: 899px) {
	.drb-shelf {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--drb-gutter));
		padding-inline: var(--drb-gutter);
		inline-size: calc(100% + 2 * var(--drb-gutter));
		scroll-snap-type: x proximity;
	}

	.drb-shelf::-webkit-scrollbar {
		display: none;
	}

	.drb-shelf li {
		flex: 0 0 120px;
		scroll-snap-align: start;
	}
}

/* Hero E — the spotlight
   ------------------------------------------------------------------
   Written for a phone first. Three soft lights drift behind everything, the sentence ends on a
   stroke that draws itself, and the search sits on a raised pane of glass: the one lit surface on
   the screen, which is where the spec wants the first tap to land. The clay pieces decorate the
   corners of their own box, so nothing can push the page sideways. */

.drb-hero--e {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7);
}

.drb-aurora {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.drb-aurora__light {
	position: absolute;
	display: block;
	border-radius: 50%;
}

.drb-aurora__light--pink {
	inline-size: 90vw;
	block-size: 90vw;
	inset-block-start: -34vw;
	inset-inline-end: -26vw;
	background: radial-gradient(circle, var(--wp--preset--color--pink-bg) 0%, rgba(255, 238, 244, 0) 70%);
	animation: drb-drift 22s ease-in-out infinite;
}

.drb-aurora__light--green {
	inline-size: 80vw;
	block-size: 80vw;
	inset-block-end: -30vw;
	inset-inline-start: -24vw;
	background: radial-gradient(circle, var(--wp--preset--color--green-bg) 0%, rgba(232, 247, 240, 0) 70%);
	animation: drb-drift 26s ease-in-out 1.5s infinite reverse;
}

.drb-aurora__light--cream {
	inline-size: 60vw;
	block-size: 60vw;
	inset-block-start: 22%;
	inset-inline-start: 18%;
	background: radial-gradient(circle, var(--drb-tile-cream) 0%, rgba(253, 247, 240, 0) 70%);
	animation: drb-drift 30s ease-in-out infinite;
}

@keyframes drb-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(-3%, 4%, 0) scale(1.08);
	}
}

.drb-hero-e {
	position: relative;
	display: grid;
	/* A column that cannot grow past the page: otherwise the widest child, the search pane, sets
	   the column width and everything centred on it hangs off the side of a phone. */
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--wp--preset--spacing--4);
	text-align: center;
}

/* The clay pieces: one in the middle, three around it, each drifting at its own pace. */

.drb-hero-e__art {
	position: relative;
	inline-size: min(100%, 460px);
	block-size: 190px;
	margin-block-end: calc(-1 * var(--wp--preset--spacing--3));
}

.drb-hero-e__piece {
	position: absolute;
	transform-origin: 50% 100%;
	animation: drb-set-in 700ms cubic-bezier(0.2, 0.8, 0.25, 1) both, drb-float 6s ease-in-out infinite;
}

.drb-hero-e__piece--main {
	inline-size: 200px;
	inset-block-start: 0;
	inset-inline-start: 50%;
	margin-inline-start: -100px;
	animation-delay: 120ms, 0.9s;
}

.drb-hero-e__piece--1 {
	inline-size: 78px;
	inset-block-start: 6%;
	inset-inline-end: 4%;
	animation-delay: 320ms, 1.4s;
}

.drb-hero-e__piece--2 {
	inline-size: 68px;
	inset-block-end: 2%;
	inset-inline-start: 6%;
	animation-delay: 460ms, 2.2s;
}

.drb-hero-e__piece--3 {
	inline-size: 62px;
	inset-block-start: 4%;
	inset-inline-start: 2%;
	animation-delay: 600ms, 3s;
}

.drb-hero-e__eyebrow {
	margin: 0;
	padding: 6px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: color-mix(in srgb, var(--wp--preset--color--white) 82%, transparent);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
	animation: drb-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-hero-e__title {
	margin: 0;
	max-inline-size: 18ch;
	font-size: clamp(2rem, 8.5vw, 3.4rem);
	line-height: 1.35;
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}

/* The last words carry a stroke that draws itself once the page has settled. */

.drb-brush {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	color: var(--wp--preset--color--pink-mid);
}

.drb-brush__line {
	position: absolute;
	inset-inline: -3%;
	inset-block-end: -0.22em;
	inline-size: 106%;
	block-size: 0.34em;
	overflow: visible;
}

.drb-brush__line path {
	fill: none;
	stroke: var(--wp--preset--color--pink-decor);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 280;
	stroke-dashoffset: 280;
	animation: drb-draw 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 800ms forwards;
}

/* The stage builds itself: each entrance animates opacity and the individual scale property,
   so the endless float (transform) and the pointer parallax (translate) keep their own channels
   and nothing overrides anything. */

@keyframes drb-set-in {
	from {
		opacity: 0;
		scale: 0.86;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes drb-set-up {
	from {
		opacity: 0;
		scale: 1 0.55;
	}

	to {
		opacity: 1;
		scale: 1 1;
	}
}

@keyframes drb-bloom {
	from {
		opacity: 0;
		scale: 0.6;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

/* The slow camera: the whole cast breathes towards the viewer and back, which is what keeps a
   still picture from looking frozen. */

@keyframes drb-camera {
	0%,
	100% {
		transform: scale(1) translateY(0);
	}

	50% {
		transform: scale(1.035) translateY(-6px);
	}
}

@keyframes drb-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.drb-hero-e__lead {
	margin: 0;
	max-inline-size: 42ch;
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 220ms both;
}

/* The pane the search sits on: the one raised, lit surface in the hero. */

.drb-hero-e__panel {
	inline-size: 100%;
	max-inline-size: 560px;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	border-radius: var(--drb-radius-xl);
	background: color-mix(in srgb, var(--wp--preset--color--white) 76%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--drb-shadow-lg);
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 320ms both;
	transition: box-shadow var(--drb-ease);
}

.drb-hero-e__panel:focus-within {
	box-shadow: var(--drb-shadow-lg), 0 0 0 3px var(--wp--preset--color--green-illus);
}

/* Inside the pane the chips stay inside it: the bleeding scroller the other heroes use would
   run out past the glass. */

.drb-hero-e__panel .drb-hero__chips {
	justify-content: center;
	inline-size: 100%;
	margin-block: var(--wp--preset--spacing--3) 0;
	margin-inline: 0;
	padding-inline: 0;
	scroll-padding-inline: 4px;
}

.drb-search--spot .drb-search__field {
	border-color: transparent;
	box-shadow: var(--drb-shadow-sm);
}

.drb-hero-e__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--green-action);
	text-decoration: none;
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 420ms both;
}

.drb-hero-e__more svg {
	inline-size: 16px;
	block-size: 16px;
	animation: drb-float 2.6s ease-in-out infinite;
}

.drb-hero-e__more:hover {
	text-decoration: underline;
}

@media (min-width: 900px) {
	.drb-hero--e {
		padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7);
	}

	.drb-hero-e {
		gap: var(--wp--preset--spacing--5);
	}

	.drb-hero-e__art {
		inline-size: min(100%, 760px);
		block-size: 220px;
	}

	.drb-hero-e__piece--main {
		inline-size: 220px;
		margin-inline-start: -110px;
	}

	.drb-hero-e__piece--1 {
		inline-size: 116px;
		inset-inline-end: 8%;
	}

	.drb-hero-e__piece--2 {
		inline-size: 100px;
		inset-inline-start: 10%;
	}

	.drb-hero-e__piece--3 {
		inline-size: 92px;
		inset-inline-start: 2%;
		inset-block-start: 0;
	}

	.drb-hero-e__title {
		max-inline-size: 20ch;
	}

	.drb-hero-e__panel {
		padding: var(--wp--preset--spacing--4);
	}
}

/* Hero F — the lit stage
   ------------------------------------------------------------------
   The one place on the site that goes dark, the way the booking band does. A warm light pools
   behind an arch, the clay pieces stand on a round podium, and the search floats over the scene
   in a capsule of glass. White type on this green is the footer's pairing, which is the one dark
   surface the brand allows; the button stays green, in the light tint the dark ground needs. */

.drb-hero--f {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block-end: var(--wp--preset--spacing--6);
	border-end-start-radius: var(--drb-radius-xl);
	border-end-end-radius: var(--drb-radius-xl);
	/* The green a film stands on, once a browser has decoded it — a few levels off the brand's
	   dark green, because every render comes back a little different. Measure it in a browser
	   and nowhere else: ffmpeg reads the same file several levels lighter, and a poster written
	   straight from webm to webp inherits that error and shows as a rectangle until the film
	   starts. Draw the frame to a canvas instead, and build posters through PNG. The band behind the film
	   is painted this, which is what stops the picture reading as a rectangle; everywhere else
	   on the site keeps the token. hero-f.php replaces it for whichever scene came up, from
	   assets/video/grounds.json; the value here is the average of the scenes there are, for a
	   film that has no entry yet. The flat band has to end well below the film: the picture
	   reaches 43% of the hero on a phone and 46% on a wide screen, and a gradient that starts
	   darkening any earlier draws a line across the picture's lower edge. */
	--drb-film-ground: #1e5c4c;

	background: linear-gradient(180deg, var(--drb-film-ground) 0%, var(--drb-film-ground) 62%, #164a3d 84%, #123c32 100%);
	color: var(--drb-footer-ink);
	text-align: center;
}

.drb-stage {
	position: relative;
	block-size: 46vh;
	min-block-size: 280px;
	max-block-size: 380px;
}

.drb-stage > span {
	position: absolute;
	display: block;
}

/* The pool of light. Warm, low and wide, so the pieces stand in it rather than float in front. */
.drb-stage__glow {
	inset-block-end: 4%;
	inset-inline-start: -16%;
	inline-size: 132%;
	aspect-ratio: 1.5;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 60%, rgba(255, 238, 244, 0.5) 0%, rgba(245, 143, 174, 0.22) 38%, rgba(31, 93, 76, 0) 70%);
	animation: drb-bloom 1200ms cubic-bezier(0.2, 0.7, 0.2, 1) both, drb-breathe 9s ease-in-out 1.4s infinite;
}

/* Two flats behind the cast, like a set on a stage. */
.drb-stage__arch {
	transform-origin: 50% 100%;
	animation: drb-set-up 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 360ms both;
	inset-block-end: 18%;
	inset-inline-start: 50%;
	inline-size: 200px;
	block-size: 64%;
	margin-inline-start: -110px;
	border-start-start-radius: 110px;
	border-start-end-radius: 110px;
	background: linear-gradient(180deg, rgba(255, 238, 244, 0.22), rgba(255, 238, 244, 0.06));
	box-shadow: inset 0 0 0 1px rgba(255, 252, 253, 0.12);
}

.drb-stage__panel {
	transform-origin: 50% 100%;
	animation: drb-set-up 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 480ms both;
	inset-block-end: 20%;
	inset-inline-start: 50%;
	inline-size: 130px;
	block-size: 42%;
	margin-inline-start: 6px;
	border-radius: var(--drb-radius-md);
	background: linear-gradient(180deg, rgba(174, 229, 208, 0.22), rgba(174, 229, 208, 0.04));
}

/* The podium the pieces stand on, with its own shadow on the floor. */
.drb-stage__podium {
	transform-origin: 50% 100%;
	animation: drb-set-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms both;
	inset-block-end: 9%;
	inset-inline-start: 50%;
	inline-size: 250px;
	block-size: 54px;
	margin-inline-start: -125px;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 252, 253, 0.92), rgba(255, 238, 244, 0.6));
	box-shadow: 0 26px 40px rgba(18, 60, 50, 0.55);
}

.drb-stage__cast {
	animation: drb-camera 16s ease-in-out 2s infinite;
	position: absolute;
	inset-block-end: 12%;
	inset-inline-start: 50%;
	inline-size: 320px;
	block-size: 76%;
	margin-inline-start: -160px;
}

.drb-stage__scene,
.drb-stage__piece {
	position: absolute;
	transform-origin: 50% 100%;
	animation: drb-set-in 700ms cubic-bezier(0.2, 0.8, 0.25, 1) both, drb-float 7s ease-in-out infinite;
	translate: var(--px, 0) var(--py, 0);
	transition: translate 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.drb-stage__scene {
	inset-block-end: 0;
	inset-inline-start: 50%;
	inline-size: 300px;
	margin-inline-start: -150px;
}

.drb-stage__piece--main {
	inset-block-end: 0;
	inset-inline-start: 50%;
	inline-size: 190px;
	margin-inline-start: -95px;
	animation-delay: 900ms, 1.6s;
}

/* The piece furthest back sits beside the arch, smaller and a shade quieter, so the eye reads
   depth rather than a pile. */
.drb-stage__piece--back {
	inset-block-end: 42%;
	inset-inline-end: 16%;
	inline-size: 64px;
	opacity: 0.72;
	animation-delay: 620ms, 0.4s;
}

.drb-stage__piece--left {
	inset-block-end: 4%;
	inset-inline-end: 2%;
	inline-size: 92px;
	animation-delay: 1040ms, 2.4s;
}

.drb-stage__piece--right {
	inset-block-end: 6%;
	inset-inline-start: 2%;
	inline-size: 80px;
	animation-delay: 1160ms, 3.2s;
}

/* The film cut of the same scene. It carries its own podium, flats and ground, and that ground
   is the exact green the hero starts from, so the drawn set is left out and only the pool of
   light stays behind it. The edges are dissolved rather than cut: that is what keeps the picture
   from reading as a rectangle pasted onto the green. */
.drb-stage--film {
	display: grid;
	block-size: auto;
	max-block-size: none;
}

/* The drawn pool of light only ever fell outside the picture, which drew a rectangle around it.
   The film is lit in itself, so the light moves over the whole hero instead of behind the film. */
.drb-stage--film .drb-stage__glow {
	inset-block-end: -12%;
	z-index: 1;
	background: radial-gradient(ellipse at 50% 58%, rgba(255, 238, 244, 0.16) 0%, rgba(245, 143, 174, 0.08) 42%, rgba(31, 93, 76, 0) 72%);
}

.drb-stage__film {
	animation: drb-set-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
	grid-area: 1 / 1;
	inline-size: 100%;

	/* The width and height attributes reserve the right box before the file arrives; they also
	   pin the height, so it is handed back to the ratio here. */
	block-size: auto;
	margin-inline: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--drb-film-ground);

	/* The film's ground and the page's are the same green, but only to within a few levels: a
	   browser paints a video through its own colour path, which does not agree with what any
	   measurement of the file reports, and the gap moves from device to device. So the edge is
	   dissolved rather than matched. The radial this replaces put every edge inside its opaque
	   zone and only rounded the corners, which left a hard rectangle relying on an exact match.

	   The fades are as wide as the empty ground allows and no wider: across every cut the set
	   sits inside 16%-85% and 8%-93%, measured from the files, so the ramps only ever run over
	   bare ground. Check those numbers again before widening them. */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 12%, #000 87%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0, #000 12%, #000 87%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-composite: intersect;
}

/* Same width the script picks the wide cut at: below it the small cut is a 4:3 file and fills
   this box exactly, above it the large one is 16:9 and does the same. Either way nothing is
   cropped away and nothing is scaled up. */
@media (min-width: 768px) {
	.drb-stage__film {
		aspect-ratio: 16 / 9;
	}
}

/* Insurance: if the entrance never runs — a tab that loads in the background, a browser that
   pauses animations — the script marks the stage after three seconds and the scene is simply
   there. Only the entrance channels are forced; the float keeps its own. */

.drb-stage.is-shown > span,
.drb-stage.is-shown .drb-stage__piece,
.drb-stage.is-shown .drb-stage__scene,
.drb-stage.is-shown .drb-stage__film,
.drb-hero-e__art.is-shown .drb-hero-e__piece {
	opacity: 1 !important;
	scale: 1 !important;
}

.drb-hero-f {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-block-start: calc(-1 * var(--wp--preset--spacing--4));
}

.drb-hero-f__title {
	margin: 0;
	max-inline-size: 17ch;
	font-size: clamp(1.9rem, 7.4vw, 3.2rem);
	line-height: 1.4;
	color: var(--drb-footer-ink);
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}

.drb-hero-f__lead {
	margin: 0;
	max-inline-size: 40ch;
	color: var(--drb-footer-muted);
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 220ms both;
}

/* The capsule: the one piece of glass on the stage, holding the concern search. */

.drb-capsule {
	inline-size: 100%;
	max-inline-size: 560px;
	padding: 8px;
	border: 1px solid rgba(255, 252, 253, 0.22);
	border-radius: var(--drb-radius-full);
	background: rgba(255, 252, 253, 0.12);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 18px 44px rgba(9, 32, 26, 0.45);
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 320ms both;
}

.drb-search--capsule .drb-search__field {
	border: 0;
	border-radius: var(--drb-radius-full);
	background: transparent;
	box-shadow: none;
}

.drb-search--capsule .drb-search__input {
	color: var(--drb-footer-ink);
}

.drb-search--capsule .drb-search__input::placeholder {
	color: rgba(243, 247, 245, 0.72);
}

.drb-search--capsule .drb-search__field > .drb-icon {
	color: rgba(243, 247, 245, 0.72);
}

/* On the dark ground the button takes the light green of the palette with dark green type: the
   full-strength green would sit almost invisibly on it. */
.drb-search--capsule .drb-search__button {
	background: var(--wp--preset--color--green-decor);
	color: #123c32;
}

.drb-search--capsule .drb-search__button:hover,
.drb-search--capsule .drb-search__button:focus-visible {
	background: var(--wp--preset--color--green-illus);
	color: #123c32;
}

.drb-hero--f .drb-hero__chips {
	margin-block-start: 0;
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 420ms both;
}

.drb-hero--f .drb-chip {
	border-color: rgba(255, 252, 253, 0.22);
	background: rgba(255, 252, 253, 0.1);
	color: var(--drb-footer-ink);
}

.drb-hero--f .drb-chip:hover,
.drb-hero--f .drb-chip:focus-visible {
	border-color: rgba(255, 252, 253, 0.5);
	background: rgba(255, 252, 253, 0.18);
	color: var(--drb-footer-ink);
}

.drb-hero-f__cue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--drb-footer-muted);
}

.drb-hero-f__cue svg {
	inline-size: 16px;
	block-size: 16px;
	rotate: 90deg;
	animation: drb-float 2.4s ease-in-out infinite;
}

@media (min-width: 900px) {
	.drb-hero--f {
		padding-block-end: var(--wp--preset--spacing--7);
	}

	.drb-stage {
		block-size: 42vh;
		max-block-size: 390px;
	}

	.drb-stage__film {
		max-inline-size: 690px;
	}

	.drb-stage__arch {
		inline-size: 280px;
		margin-inline-start: -150px;
	}

	.drb-stage__panel {
		inline-size: 180px;
	}

	.drb-stage__podium {
		inline-size: 360px;
		block-size: 74px;
		margin-inline-start: -180px;
	}

	.drb-stage__cast {
		inline-size: 460px;
		margin-inline-start: -230px;
	}

	.drb-stage__scene {
		inline-size: 440px;
		margin-inline-start: -220px;
	}

	.drb-stage__piece--main {
		inline-size: 260px;
		margin-inline-start: -130px;
	}

	.drb-stage__piece--back {
		inline-size: 84px;
		inset-inline-end: 20%;
	}

	.drb-stage__piece--left {
		inline-size: 124px;
	}

	.drb-stage__piece--right {
		inline-size: 108px;
	}
}

/* Decorative touches on the rest of the page
   ------------------------------------------------------------------ */

.drb-journey {
	position: relative;
	/* The soft glow behind the stages reaches past the viewport edge; clip it so it cannot widen
	   the page and give phones a sideways scroll. */
	overflow-x: clip;
}

.drb-journey::before {
	content: "";
	position: absolute;
	inset-block-start: 10%;
	inset-inline-end: -8%;
	inline-size: 32vw;
	max-inline-size: 460px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--pink-bg);
	filter: blur(60px);
	opacity: 0.8;
	pointer-events: none;
	z-index: -1;
}

.drb-section--band {
	position: relative;
	overflow: hidden;
}

.drb-section--band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(174, 229, 208, 0.18) 1.5px, transparent 1.6px);
	background-size: 26px 26px;
	pointer-events: none;
}

.drb-section--band > .drb-wrap {
	position: relative;
}

.drb-band__figure {
	/* Sits fully inside the band: a figure hanging past the edge is clipped by the
	   section and reads as a mistake rather than a decoration. */
	position: absolute;
	inset-block-end: 6%;
	inset-inline-start: 3%;
	inline-size: 180px;
	border-radius: 0;
	opacity: 0.9;
	filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.3));
	animation: drb-float 7s ease-in-out infinite;
	pointer-events: none;
}

@media (max-width: 899px) {
	.drb-band__figure {
		display: none;
	}
}



.drb-team__mark img {
	inline-size: 96px;
}

/* Trust bar
   ------------------------------------------------------------------ */

.drb-trust {
	display: grid;
	gap: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	list-style: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-sm);
}

.drb-trust__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.drb-trust__item + .drb-trust__item {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.drb-trust__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-action);
}

.drb-trust__icon .drb-icon {
	inline-size: 18px;
	block-size: 18px;
}

@media (min-width: 720px) {
	.drb-trust {
		grid-template-columns: repeat(3, 1fr);
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	}

	.drb-trust__item {
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	}

	.drb-trust__item + .drb-trust__item {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--line);
	}

	.drb-trust__icon {
		inline-size: 40px;
		block-size: 40px;
	}

	.drb-trust__icon .drb-icon {
		inline-size: 20px;
		block-size: 20px;
	}
}

/* Concerns as a conversation
   ------------------------------------------------------------------ */

.drb-ask {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	margin-block-end: var(--wp--preset--spacing--6);
}

.drb-ask__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
}

.drb-ask__avatar img {
	inline-size: 30px;
	border-radius: 0;
}

.drb-ask__bubble {
	position: relative;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-lg);
	border-start-end-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--green-bg);
}

.drb-ask__title {
	margin: 0 0 var(--wp--preset--spacing--1);
}

.drb-ask__text {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-answers {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
	.drb-answers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.drb-answers {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--4);
		padding-inline-start: 6%;
	}
}

.drb-answer {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	block-size: 100%;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.drb-answer__bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	border-end-start-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--white);
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease), transform var(--drb-ease), background-color var(--drb-ease);
}

/* Bubble tail on the start side, like a message the visitor just sent. */
.drb-answer__bubble::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: -8px;
	inline-size: 16px;
	block-size: 16px;
	background: inherit;
	border-inline-start: 1px solid var(--wp--preset--color--line);
	border-block-end: 1px solid var(--wp--preset--color--line);
	clip-path: polygon(0 100%, 100% 100%, 100% 0);
	border-end-end-radius: 3px;
}

.drb-answer:hover .drb-answer__bubble {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	transform: translateY(-2px);
}

.drb-answer__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--green-ink);
}

.drb-answer__line {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-answer__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-inline-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

.drb-answer__meta::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-decor);
}

.drb-answer--postpartum .drb-answer__meta::before,
.drb-answer--menopause .drb-answer__meta::before,
.drb-answer--birth .drb-answer__meta::before {
	background: var(--wp--preset--color--pink-decor);
}

.drb-answers__more {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--6);
}

@media (max-width: 479px) {
	.drb-answer__bubble {
		padding: var(--wp--preset--spacing--3);
	}

	.drb-answer__title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.drb-answer__line {
		display: none;
	}
}

/* Life stages as a path
   ------------------------------------------------------------------ */

.drb-path {
	position: relative;
}

.drb-path__line {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	fill: none;
	stroke: var(--wp--preset--color--green-illus);
	stroke-width: 3;
	stroke-dasharray: 10 12;
	stroke-linecap: round;
	pointer-events: none;
}

.drb-path__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-station {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.drb-station__body {
	display: flex;
	flex-direction: column;
	align-items: inherit;
}

.drb-station__figure {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 128px;
	block-size: 128px;
	border-radius: 50%;
	background: var(--drb-tile-pink);
	border: 4px solid var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-md);
	transition: transform var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-station--puberty .drb-station__figure,
.drb-station--preconception .drb-station__figure,
.drb-station--postpartum .drb-station__figure {
	background: var(--drb-tile-green);
}

.drb-station__figure img {
	inline-size: 68%;
	aspect-ratio: 1;
	block-size: auto;
	object-fit: contain;
	border-radius: 0;
}

.drb-station__index {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	box-shadow: 0 0 0 3px var(--wp--preset--color--cream);
}

.drb-station:hover .drb-station__figure {
	transform: translateY(-4px);
	box-shadow: var(--drb-shadow-lg);
}

.drb-station__title {
	margin-block-start: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--green-ink);
}

.drb-station__age {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.drb-path {
		padding-block: var(--wp--preset--spacing--4) var(--wp--preset--spacing--3);
	}

	.drb-path__list {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		align-items: start;
		min-block-size: 360px;
	}

	.drb-path__line {
		block-size: 320px;
		inset-block-start: var(--wp--preset--spacing--4);
	}

	.drb-path__station {
		padding-block-start: 32px;
	}

	.drb-path__station--low {
		padding-block-start: 160px;
	}
}

@media (max-width: 899px) {
	.drb-path__line {
		display: none;
	}

	.drb-path__list {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--4);
		padding-inline-start: 0;
	}

	/* A vertical dashed line runs through the station figures. */
	.drb-path__list::before {
		content: "";
		position: absolute;
		inset-block: 24px;
		inset-inline-start: 39px;
		border-inline-start: 3px dashed var(--wp--preset--color--green-illus);
	}

	.drb-station {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--4);
		text-align: start;
	}

	.drb-station__figure {
		inline-size: 80px;
		block-size: 80px;
		flex-shrink: 0;
	}

	.drb-station__index {
		inline-size: 24px;
		block-size: 24px;
		font-size: 0.7rem;
	}

	.drb-station__title {
		margin-block-start: 0;
	}

	.drb-station__body {
		display: flex;
		flex-direction: column;
	}
}

/* Steps
   ------------------------------------------------------------------ */

.drb-steps {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-step {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: var(--wp--preset--spacing--3);
	align-items: start;
}

.drb-step__num {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-illus);
	box-shadow: 0 0 0 5px rgba(174, 229, 208, 0.18);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	color: var(--wp--preset--color--green-ink);
}

.drb-step__title {
	margin: 0.4rem 0 0;
	color: var(--drb-footer-ink);
}

.drb-step__text {
	margin: var(--wp--preset--spacing--1) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--drb-footer-muted);
	max-inline-size: 34ch;
}

@media (min-width: 720px) {
	.drb-steps {
		position: relative;
		gap: var(--wp--preset--spacing--5);
	}

	.drb-steps--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.drb-steps--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.drb-steps::before {
		content: "";
		position: absolute;
		inset-inline: 14%;
		inset-block-start: 28px;
		border-block-start: 2px dashed rgba(174, 229, 208, 0.35);
	}

	.drb-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--2);
	}

	.drb-step__num {
		inline-size: 56px;
		block-size: 56px;
		font-size: var(--wp--preset--font-size--x-large);
		box-shadow: 0 0 0 6px rgba(174, 229, 208, 0.18);
	}

	.drb-step__title {
		margin-block-start: var(--wp--preset--spacing--2);
	}

	.drb-step__text {
		margin: 0;
		max-inline-size: 28ch;
	}
}

.drb-steps__after {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: var(--wp--preset--spacing--5) auto 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	inline-size: fit-content;
	max-inline-size: 100%;
	border-radius: var(--drb-radius-full);
	background: rgba(255, 252, 253, 0.1);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--drb-footer-ink);
	text-align: center;
}

.drb-steps__after .drb-icon {
	color: var(--wp--preset--color--pink-illus);
	fill: var(--wp--preset--color--pink-illus);
}

/* Team note
   ------------------------------------------------------------------ */

.drb-team {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	align-items: center;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
}

@media (min-width: 720px) {
	.drb-team {
		grid-template-columns: 120px 1fr;
		gap: var(--wp--preset--spacing--5);
		padding: var(--wp--preset--spacing--6);
	}
}

.drb-team__mark img {
	inline-size: 72px;
	border-radius: 0;
}

@media (min-width: 720px) {
	.drb-team__mark img {
		inline-size: 96px;
	}
}

.drb-team__title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--x-large);
}

.drb-team__body p {
	margin: 0;
}

.drb-team__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--5);
	margin-block-start: var(--wp--preset--spacing--3);
}

/* Magazine cards
   ------------------------------------------------------------------ */

.drb-articles {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.drb-article__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease), transform var(--drb-ease);
}

.drb-article__link:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	transform: translateY(-2px);
}

.drb-article__figure {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--drb-tile-pink);
}

/* Magazine covers are full-frame flat illustrations (System B in ART-DIRECTION.md),
   not cut-out objects, so they fill the figure rather than sitting inside padding. */
.drb-article__figure img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	padding: 0;
	border-radius: 0;
}

.drb-article__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--4);
}

.drb-article__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--green-ink);
}

.drb-byline {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

/* On phones the magazine becomes a swipeable rail like the stages. */

@media (max-width: 719px) {
	.drb-articles.drb-rail__track-mobile {
		display: flex;
		gap: var(--wp--preset--spacing--3);
		margin-inline: calc(-1 * var(--drb-gutter));
		padding-inline: var(--drb-gutter);
		padding-block-end: var(--wp--preset--spacing--2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--drb-gutter);
		scrollbar-width: none;
	}

	.drb-articles.drb-rail__track-mobile::-webkit-scrollbar {
		display: none;
	}

	.drb-articles.drb-rail__track-mobile > li {
		flex: 0 0 min(78vw, 300px);
		scroll-snap-align: start;
	}
}

/* Guide
   ------------------------------------------------------------------ */

.drb-guide {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	align-items: center;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-sm);
}

@media (min-width: 900px) {
	.drb-guide {
		grid-template-columns: 300px 1fr;
		gap: var(--wp--preset--spacing--7);
		padding: var(--wp--preset--spacing--6);
	}
}

.drb-guide__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	inline-size: 100%;
	max-inline-size: 300px;
	margin-inline: auto;
	border-radius: var(--drb-radius-lg);
	background: var(--drb-tile-pink);
}

@media (max-width: 899px) {
	.drb-guide__cover {
		aspect-ratio: 2 / 1;
		max-inline-size: none;
	}

	.drb-guide__cover img {
		max-block-size: 80%;
	}
}

.drb-guide__cover img {
	inline-size: 68%;
	max-block-size: 68%;
	object-fit: contain;
	border-radius: 0;
}

.drb-guide__title {
	margin: 0 0 var(--wp--preset--spacing--2);
}

.drb-guide__text {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--text-muted);
}

.drb-guide__field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	max-inline-size: 480px;
}

.drb-guide__field .drb-input {
	flex: 1 1 200px;
	text-align: start;
}

.drb-guide__field .drb-button {
	flex: 1 0 auto;
}

.drb-guide__note {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

/* Why Doctor Banoo: the three trust promises as cards that lead to the pages behind them
   ------------------------------------------------------------------ */

.drb-why {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.drb-why {
		grid-template-columns: repeat(3, 1fr);
	}
}

.drb-why__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	block-size: 100%;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: transform var(--drb-ease), box-shadow var(--drb-ease), border-color var(--drb-ease);
}

.drb-why__card:hover,
.drb-why__card:focus-visible {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--drb-shadow-md);
}

.drb-why__icon {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: var(--wp--preset--spacing--2);
	border-radius: var(--drb-radius-full);
	background: var(--drb-tile-pink);
	color: var(--wp--preset--color--pink-mid);
}

.drb-why__icon svg {
	inline-size: 24px;
	block-size: 24px;
}

.drb-why__card:hover .drb-why__icon {
	background: var(--drb-tile-green);
	color: var(--wp--preset--color--green-ink);
}

.drb-why__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--green-ink);
}

.drb-why__text {
	margin: 0;
	flex: 1 0 auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	color: var(--wp--preset--color--text-muted);
}

/* Ask us: an invitation to the chat with a sample conversation beside it
   ------------------------------------------------------------------ */

.drb-ask__box {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--drb-radius-xl);
	background: var(--drb-tile-pink);
}

@media (min-width: 900px) {
	.drb-ask__box {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		padding: var(--wp--preset--spacing--7);
	}
}

.drb-ask__text {
	margin: var(--wp--preset--spacing--3) 0 0;
	max-inline-size: 46ch;
	color: var(--wp--preset--color--text);
}

.drb-ask__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-block-start: var(--wp--preset--spacing--5);
}

.drb-ask__note {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-ask__note svg {
	inline-size: 16px;
	block-size: 16px;
	flex-shrink: 0;
}

.drb-ask__talk {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	justify-items: start;
}

.drb-bubble {
	max-inline-size: 30ch;
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-lg);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	box-shadow: var(--drb-shadow-sm);
}

.drb-bubble--them {
	border-start-end-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
}

.drb-bubble--us {
	justify-self: end;
	border-start-start-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--green-ink);
	color: var(--drb-footer-ink);
}

.drb-bubble--typing {
	display: flex;
	justify-self: end;
	gap: 5px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-start-start-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--white);
}

/* The exchange plays itself once when the section comes into view: the question, then the team
   writing, then the answer. Without the script every line is simply there, which is why the
   dots carry a hidden attribute in the markup rather than being hidden here. */

.drb-ask__talk.is-playing [data-step] {
	opacity: 0;
}

.drb-ask__talk [data-step].is-on {
	opacity: 1;
	animation: drb-pop 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Each bubble grows out of its own corner, the way a message leaves the composer. */

.drb-ask__talk .drb-bubble--them.is-on {
	transform-origin: 100% 100%;
}

.drb-ask__talk .drb-bubble--us.is-on {
	transform-origin: 0 100%;
}

/* `display` from a stylesheet beats the hidden attribute, so this is what makes the script's
   hiding take effect; without it the dots sat between the two bubbles for good. */
.drb-bubble--typing[hidden] {
	display: none;
}

.drb-bubble--typing span {
	inline-size: 7px;
	block-size: 7px;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-decor);
	animation: drb-typing 1.4s ease-in-out infinite;
}

.drb-bubble--typing span:nth-child(2) {
	animation-delay: 200ms;
}

.drb-bubble--typing span:nth-child(3) {
	animation-delay: 400ms;
}

@keyframes drb-typing {
	0%,
	60%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(-4px);
	}
}

/* For doctors: one quiet line at the end of the home page
   ------------------------------------------------------------------ */

.drb-pro-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border: 1px dashed var(--wp--preset--color--green-decor);
	border-radius: var(--drb-radius-xl);
	background: var(--drb-tile-green);
}

.drb-pro-band__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--green-ink);
}

.drb-pro-band__text {
	margin: var(--wp--preset--spacing--1) 0 0;
	max-inline-size: 60ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* The outline button needs a surface of its own on the tinted band, or its hover state lands on
   the same colour as the band. */

.drb-pro-band .drb-button--outline {
	background: var(--wp--preset--color--white);
}

.drb-pro-band .drb-button--outline:hover {
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

/* Intro band on listing pages, 404
   ------------------------------------------------------------------ */

.drb-intro {
	padding-block: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--white);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.drb-intro > * {
	margin-block: 0;
}

.drb-intro > * + * {
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-contact__note {
	margin-block-start: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--text-muted);
}

.drb-notfound__inner {
	max-inline-size: 640px;
	padding-block: var(--wp--preset--spacing--6);
}

.drb-notfound__title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--x-large);
}

/* Post list cards (magazine listing)
   ------------------------------------------------------------------ */

.drb-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	padding: var(--wp--preset--spacing--4);
	transition: box-shadow var(--drb-ease), border-color var(--drb-ease), transform var(--drb-ease);
}

.drb-card:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	transform: translateY(-2px);
}

.drb-card > * + * {
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-card .wp-block-post-featured-image {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--4));
	margin-inline: calc(-1 * var(--wp--preset--spacing--4));
	margin-block-end: var(--wp--preset--spacing--3);
	background: var(--drb-tile-pink);
	border-start-start-radius: var(--drb-radius-lg);
	border-start-end-radius: var(--drb-radius-lg);
	overflow: hidden;
}

.drb-card .wp-block-post-featured-image img {
	border-radius: 0;
	object-fit: contain !important;
	padding: var(--wp--preset--spacing--3);
}

.drb-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.wp-block-post-featured-image {
	background: var(--drb-tile-pink);
	border-radius: var(--drb-radius-lg);
	overflow: hidden;
}

.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--6);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-inline-size: 2.5rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--drb-radius-full);
	text-align: center;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

.wp-block-post-terms a {
	display: inline-block;
	padding: 0.1rem 0.75rem;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	text-decoration: none;
}

/* Search block (inner pages) */

.wp-block-search__inside-wrapper {
	border-radius: var(--drb-radius-full);
	border-color: var(--wp--preset--color--line);
	padding: 4px;
	background: var(--wp--preset--color--white);
}

.wp-block-search__input {
	border: 0;
	padding-inline: 1rem;
	font-family: inherit;
}

.wp-block-search__button {
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	border: 0;
}

/* Footer
   ------------------------------------------------------------------ */

.drb-footer {
	margin-block-start: var(--wp--preset--spacing--6);
	padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--4);
	background: var(--drb-footer-bg);
	color: var(--drb-footer-ink);
}

.drb-footer a {
	color: inherit;
	text-decoration: none;
}

.drb-footer a:hover {
	color: var(--wp--preset--color--pink-illus);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.drb-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	grid-template-columns: 1fr;
}

@media (min-width: 360px) {
	.drb-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.drb-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1000px) {
	.drb-footer__grid {
		grid-template-columns: 1.6fr repeat(4, 1fr);
	}

	.drb-footer__brand {
		grid-column: auto;
	}
}

.drb-footer__brand {
	max-inline-size: 36ch;
}

.drb-footer__logo {
	inline-size: 170px;
	margin-block-end: var(--wp--preset--spacing--3);
	border-radius: 0;
}

.drb-footer__tagline {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.drb-footer__note {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--small);
	color: var(--drb-footer-muted);
}

.drb-footer__social {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.drb-footer__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--drb-footer-ink);
}

.drb-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-footer__col li + li {
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-footer__col a {
	display: inline-block;
	min-block-size: 32px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--drb-footer-muted);
}

.drb-footer__col a:hover {
	color: var(--wp--preset--color--pink-illus);
}

.drb-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: var(--wp--preset--spacing--4);
}

.drb-footer__badges img {
	inline-size: 72px;
	background: #fffcfd;
	border-radius: var(--drb-radius-sm);
}

.drb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	margin-block-start: var(--wp--preset--spacing--6);
	padding-block-start: var(--wp--preset--spacing--4);
	border-block-start: 1px solid var(--drb-footer-line);
	font-size: var(--wp--preset--font-size--label);
	color: var(--drb-footer-muted);
}

.drb-footer__bottom p {
	margin: 0;
}

/* Motion
   Entrance and ambient animation, all short and easing out. The hero animates on load; the rest
   waits until it scrolls into view (theme.js adds `is-in`). Everything is switched off under
   prefers-reduced-motion at the end of this file.
   ------------------------------------------------------------------ */

@keyframes drb-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes drb-pop {
	from {
		opacity: 0;
		transform: scale(0.82);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes drb-arc-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes drb-breathe {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.015);
	}
}

@keyframes drb-march {
	to {
		stroke-dashoffset: -220;
	}
}

@keyframes drb-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

.drb-embrace__arc {
	transform-origin: 50% 55%;
	animation: drb-arc-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both, drb-breathe 7s ease-in-out 1s infinite;
}

.drb-embrace__inner > * {
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-embrace__inner > :nth-child(1) { animation-delay: 250ms; }
.drb-embrace__inner > :nth-child(2) { animation-delay: 380ms; }
.drb-embrace__inner > :nth-child(3) { animation-delay: 520ms; }
.drb-embrace__inner > :nth-child(4) { animation-delay: 680ms; }

.drb-trust {
	animation: drb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 900ms both;
}

/* Scroll-triggered groups: children start hidden and rise in order once the group is in view. */

/* Hidden only once the page's script has marked the document, so content never stays invisible
   when the script is blocked or fails. */
.js [data-anim] > * {
	opacity: 0;
}

[data-anim].is-in > * {
	animation: drb-rise 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms);
}

[data-anim="pop"].is-in > * {
	animation-name: drb-pop;
	transform-origin: 20% 100%;
}

.drb-answer__bubble {
	transform-origin: 10% 100%;
}

.drb-station__figure img {
	animation: drb-float 5s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -700ms);
}

.drb-path__line {
	animation: drb-march 14s linear infinite;
}

.drb-hero__chips > li:hover .drb-chip,
.drb-chip:focus-visible {
	transform: translateY(-2px);
}

.drb-chip {
	transition: border-color var(--drb-ease), background-color var(--drb-ease), color var(--drb-ease), transform var(--drb-ease);
}

/* The bar under a sideways rail, and the small press a card gives back on a touch screen.
   ------------------------------------------------------------------ */

.drb-railbar {
	position: relative;
	block-size: 3px;
	margin-block-start: var(--wp--preset--spacing--3);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--line);
	overflow: hidden;
}

.drb-railbar > span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	inline-size: 30%;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-decor);
	transition: inset-inline-start 120ms linear;
}

@media (min-width: 900px) {
	.drb-railbar {
		display: none;
	}
}

@media (hover: none) {
	.drb-card__link:active,
	.drb-answer:active,
	.drb-why__card:active,
	.drb-chip:active,
	.drb-button:active,
	.drb-tabbar__item:active {
		transform: scale(0.98);
	}
}

/* Reduced motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.js [data-anim] > * {
		opacity: 1;
	}
}

/* ==================================================================
   Inner pages: concern, stage, service, magazine, doctors
   ------------------------------------------------------------------
   Everything below belongs to the pages built from the content model.
   The home page is a poster; these are documents, so they are quieter:
   one column of text, generous line height, and colour used only where
   it carries meaning.
   ================================================================== */

.drb-page {
	display: block;
	padding-block-end: var(--wp--preset--spacing--7);
}

.drb-wrap--text {
	max-inline-size: 760px;
}

/* Breadcrumb
   ------------------------------------------------------------------ */

.drb-crumbs {
	padding-block: var(--wp--preset--spacing--4) 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-crumbs__item + .drb-crumbs__item::before {
	content: "›";
	margin-inline-end: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--line);
}

.drb-crumbs a {
	color: inherit;
	text-decoration: none;
}

.drb-crumbs a:hover {
	color: var(--wp--preset--color--green-ink);
	text-decoration: underline;
}

/* Page head
   ------------------------------------------------------------------ */

.drb-page__hero {
	padding-block-end: var(--wp--preset--spacing--5);
}

.drb-page__hero--center {
	padding-block-start: var(--wp--preset--spacing--6);
	text-align: center;
}

.drb-page__hero--center:has(.drb-crumbs) {
	padding-block-start: 0;
}

.drb-page__hero--center .drb-crumbs__list {
	justify-content: center;
}

.drb-page__hero-body {
	display: flex;
	gap: var(--wp--preset--spacing--5);
	align-items: center;
	justify-content: space-between;
	padding-block-start: var(--wp--preset--spacing--4);
}

.drb-page__hero-text {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.drb-page__hero-figure {
	flex: 0 0 auto;
	display: none;
	inline-size: 160px;
}

.drb-page__hero-figure img {
	inline-size: 100%;
	block-size: auto;
}

@media (min-width: 720px) {
	.drb-page__hero-figure {
		display: block;
		inline-size: 200px;
	}
}

.drb-page__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1.3;
	color: var(--wp--preset--color--green-ink);
}

.drb-page--concern .drb-page__title {
	color: var(--wp--preset--color--text);
}

.drb-page__lead {
	margin-block-start: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
}

.drb-page__hero--center .drb-page__lead {
	margin-inline: auto;
}

.drb-page__aside {
	margin-block-start: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--green-ink);
}

.drb-eyebrow--link {
	display: inline-block;
	text-decoration: none;
}

.drb-eyebrow--link:hover {
	text-decoration: underline;
}

/* Page body and sections
   ------------------------------------------------------------------ */

.drb-page__body > * + * {
	margin-block-start: var(--wp--preset--spacing--7);
}

.drb-block__head {
	margin-block-end: var(--wp--preset--spacing--4);
}

.drb-block__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--green-ink);
}

.drb-block__lead {
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-block__text {
	margin: 0;
}

.drb-block__source {
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-block--alone {
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--drb-tile-pink);
}

.drb-block--alone .drb-block__title {
	color: var(--wp--preset--color--green-ink);
}

/* The red-flag box
   ------------------------------------------------------------------
   The one element on a clinical page that may never be moved, folded or
   dropped. It is styled to stop the eye without shouting: warm sand, a
   soft border, no red. */

.drb-urgent {
	margin-block: var(--wp--preset--spacing--6) 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--urgent-line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--urgent-bg);
	color: var(--wp--preset--color--urgent-ink);
}

.drb-urgent__title {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	color: inherit;
}

.drb-urgent__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--urgent-ink);
	color: var(--wp--preset--color--urgent-bg);
	font-weight: 700;
	line-height: 1;
}

.drb-urgent__lead {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	font-weight: 600;
}

.drb-urgent__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-urgent__list li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--5);
	padding-block: 6px;
	line-height: 1.8;
}

.drb-urgent__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 17px;
	inline-size: 14px;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.5;
}

.drb-urgent__foot {
	margin-block-start: var(--wp--preset--spacing--3);
	padding-block-start: var(--wp--preset--spacing--3);
	border-block-start: 1px solid var(--wp--preset--color--urgent-line);
	font-weight: 600;
}

/* Lists
   ------------------------------------------------------------------ */

.drb-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--3);
}

.drb-list li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--6);
	line-height: 1.8;
}

.drb-list li::before {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: var(--drb-radius-full);
	font-size: 13px;
	font-weight: 700;
}

.drb-list--maybe li::before {
	content: "؟";
	background: var(--drb-tile-pink);
	color: var(--wp--preset--color--pink-mid);
}

.drb-list--check li::before {
	content: "✓";
	background: var(--drb-tile-green);
	color: var(--wp--preset--color--green-ink);
}

.drb-list--cross li::before {
	content: "×";
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-muted);
}

/* Numbered steps
   ------------------------------------------------------------------ */

.drb-steps__item {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-steps__index {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--drb-radius-full);
	background: var(--drb-tile-green);
	color: var(--wp--preset--color--green-ink);
	font-weight: 700;
	line-height: 1;
}

.drb-steps__text {
	line-height: 1.8;
}

/* Call to action
   ------------------------------------------------------------------ */

.drb-cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	align-items: flex-start;
	margin-block: var(--wp--preset--spacing--5);
}

.drb-cta--band {
	align-items: center;
	margin-block-end: 0;
}

.drb-cta__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* The dark banner that closes a page
   ------------------------------------------------------------------ */

.drb-band {
	margin-block-start: var(--wp--preset--spacing--8);
	padding-block: var(--wp--preset--spacing--7);
	background: var(--drb-footer-bg);
	color: var(--drb-footer-ink);
	text-align: center;
}

.drb-band--inline {
	margin-block: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
}

.drb-band__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: inherit;
}

.drb-band__text {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	margin-inline: auto;
	color: var(--drb-footer-muted);
}

.drb-band .drb-button {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
}

.drb-band .drb-button:hover {
	background: var(--drb-tile-green);
}

/* Accordion
   ------------------------------------------------------------------ */

.drb-faq {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	overflow: hidden;
}

.drb-faq__item + .drb-faq__item {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.drb-faq__q {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--4);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.drb-faq__q::-webkit-details-marker {
	display: none;
}

.drb-faq__q:hover {
	background: var(--drb-tile-cream);
}

.drb-faq__q .drb-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--green-action);
	transform: rotate(-90deg);
	transition: transform var(--drb-ease);
}

.drb-faq__item[open] .drb-faq__q .drb-icon {
	transform: rotate(90deg);
}

.drb-faq__a {
	padding: 0 var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--text-muted);
}

.drb-faq__a p {
	margin: 0;
	line-height: 1.8;
}

/* Card grids
   ------------------------------------------------------------------ */

.drb-cards {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.drb-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.drb-cards--articles,
	.drb-cards--doctors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.drb-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.drb-card__link > * + * {
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--green-ink);
}

.drb-card__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-card__figure {
	display: block;
	overflow: hidden;
	border-radius: var(--drb-radius-md);
	background: var(--drb-tile-cream);
}

.drb-card__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.drb-card__figure--portrait img {
	aspect-ratio: 1 / 1;
	border-radius: var(--drb-radius-md);
}

.drb-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--drb-radius-full);
	background: var(--drb-tile-green);
	color: var(--wp--preset--color--green-ink);
	font-weight: 600;
}

/* The concerns list page
   ------------------------------------------------------------------ */

.drb-concerns {
	padding-block-start: var(--wp--preset--spacing--5);
}

.drb-concerns__group + .drb-concerns__group {
	margin-block-start: var(--wp--preset--spacing--7);
}

.drb-concerns__stage {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-concerns__stage a {
	color: inherit;
	text-decoration: none;
}

.drb-concerns__stage a:hover {
	text-decoration: underline;
}

.drb-concerns__empty {
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--drb-radius-xl);
	background: var(--drb-tile-cream);
	text-align: center;
	color: var(--wp--preset--color--text-muted);
}

.drb-rows {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.drb-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.drb-row {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-row:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-sm);
}

.drb-row__body {
	display: grid;
	gap: 2px;
}

.drb-row__title {
	font-weight: 600;
	line-height: 1.6;
}

.drb-row__line {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-row .drb-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--green-action);
}

/* Tabs
   ------------------------------------------------------------------ */

.drb-tabs {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	overflow-x: auto;
	margin-block-end: var(--wp--preset--spacing--5);
	padding-block-end: var(--wp--preset--spacing--2);
	scrollbar-width: none;
}

.drb-tabs::-webkit-scrollbar {
	display: none;
}

.drb-tab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background var(--drb-ease), color var(--drb-ease), border-color var(--drb-ease);
}

.drb-tab:hover {
	border-color: var(--wp--preset--color--green-decor);
}

.drb-tab.is-active {
	border-color: var(--wp--preset--color--green-action);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

/* The "didn't find it" note
   ------------------------------------------------------------------ */

.drb-note {
	margin-block-start: var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--drb-radius-xl);
	background: var(--drb-tile-green);
	text-align: center;
}

.drb-note__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-note__text {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	margin-inline: auto;
	color: var(--wp--preset--color--text-muted);
}

.drb-note__foot {
	margin-block-start: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-note .drb-cta {
	align-items: center;
}

/* Stage hub
   ------------------------------------------------------------------ */

.drb-stage-hero {
	padding-block-end: var(--wp--preset--spacing--6);
	background: linear-gradient(180deg, var(--drb-tile-pink), transparent);
}

.drb-stage-hero__body {
	display: flex;
	gap: var(--wp--preset--spacing--5);
	align-items: center;
	justify-content: space-between;
	padding-block-start: var(--wp--preset--spacing--4);
}

.drb-stage-hero__text {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 620px;
}

.drb-stage-hero__figure {
	flex: 0 0 auto;
	display: none;
	inline-size: 220px;
}

.drb-stage-hero__figure img {
	inline-size: 100%;
	block-size: auto;
	filter: drop-shadow(0 16px 32px rgba(27, 36, 32, 0.1));
}

@media (min-width: 860px) {
	.drb-stage-hero__figure {
		display: block;
	}
}

.drb-stage-hero__sub {
	margin-block-start: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--green-ink);
}

.drb-stage-hero__age {
	margin-block-start: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

/* The two boxes at the top of a stage: what is usual here, and what is worth a visit. Side by
   side on a wide screen because they are read against each other. */
.drb-stage-facts {
	display: grid;
	gap: var(--wp--preset--spacing--4);
}

@media (min-width: 720px) {
	.drb-stage-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.drb-stage-facts__box {
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-stage-facts__box--watch {
	border-color: var(--wp--preset--color--pink-soft);
	background: var(--drb-tile-pink);
}

.drb-stage-facts__title {
	margin-block: 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--green-ink);
	font-size: var(--wp--preset--font-size--medium);
}

.drb-stage-facts__list {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--4);
	line-height: 1.9;
}

.drb-stage-facts__list li + li {
	margin-block-start: var(--wp--preset--spacing--1);
}

.drb-stage-nav {
	margin-block-start: var(--wp--preset--spacing--7);
}

.drb-stage-nav__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

.drb-stage-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Stages list page
   ------------------------------------------------------------------ */

.drb-stage-grid {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.drb-stage-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 980px) {
	.drb-stage-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.drb-stage-card {
	position: relative;
	block-size: 100%;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	transition: box-shadow var(--drb-ease), border-color var(--drb-ease);
}

.drb-stage-card:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
}

.drb-stage-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.drb-stage-card__index {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--4);
	inset-inline-start: var(--wp--preset--spacing--4);
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: var(--drb-radius-full);
	background: var(--drb-tile-pink);
	color: var(--wp--preset--color--green-ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
}

.drb-stage-card__figure {
	display: block;
	inline-size: 120px;
	margin-inline: auto;
}

.drb-stage-card__figure img {
	inline-size: 100%;
	block-size: auto;
}

.drb-stage-card__title {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-stage-card__age {
	margin: var(--wp--preset--spacing--1) 0 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-stage-card__text {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-stage-card__concerns {
	display: grid;
	gap: 6px;
	margin: var(--wp--preset--spacing--4) 0 0;
	padding-block-start: var(--wp--preset--spacing--3);
	border-block-start: 1px solid var(--wp--preset--color--line);
	list-style: none;
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--small);
}

.drb-stage-card__concerns a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.drb-stage-card__concerns a:hover {
	color: var(--wp--preset--color--green-ink);
	text-decoration: underline;
}

/* Service page
   ------------------------------------------------------------------ */

.drb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: var(--wp--preset--spacing--4);
	padding: 0;
	list-style: none;
}

.drb-facts__item {
	padding: 6px 14px;
	border-radius: var(--drb-radius-full);
	background: var(--drb-tile-cream);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-price {
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
}

.drb-price__amount {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.drb-price__amount--unset {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.drb-price__note,
.drb-price__label {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-price__promise {
	margin-block-start: var(--wp--preset--spacing--4);
	padding-block-start: var(--wp--preset--spacing--3);
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.drb-chip--static {
	cursor: default;
}

/* Magazine article
   ------------------------------------------------------------------ */

.drb-page--article .drb-article__figure {
	margin-block: var(--wp--preset--spacing--5);
	aspect-ratio: auto;
	background: none;
}

/* The covers are 900px wide files. Stretched across the whole page they were being blown up and
   went soft, so the cover stays at a size the file can fill: centred while the article is one
   column, and lined up with the text once the sidebar appears. */

.drb-page--article .drb-article__figure img {
	display: block;
	inline-size: 100%;
	max-inline-size: 640px;
	block-size: auto;
	margin-inline: auto;
	border-radius: var(--drb-radius-xl);
}

@media (min-width: 1080px) {
	.drb-page--article .drb-article__figure img {
		margin-inline: 0;
	}
}

.drb-takeaways {
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--drb-tile-green);
}

.drb-takeaways__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-takeaways__list {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--5);
}

.drb-takeaways__list li {
	line-height: 1.8;
}

.drb-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.drb-prose h2 {
	margin-block-start: var(--wp--preset--spacing--7);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--green-ink);
}

.drb-prose h3 {
	margin-block-start: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--green-ink);
}

/* A short pink rule marks the start of a section: the only decoration inside the text, and it
   sits beside the heading rather than under it so nothing pushes the lines apart. */

.drb-prose h2::before {
	content: "";
	display: block;
	inline-size: 32px;
	block-size: 4px;
	margin-block-end: var(--wp--preset--spacing--3);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-decor);
}

.drb-prose > p:first-of-type {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.9;
	color: var(--wp--preset--color--text);
}

.drb-prose ul,
.drb-prose ol {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.drb-prose li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--5);
	line-height: 1.9;
}

.drb-prose ul > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.7em;
	inset-inline-start: var(--wp--preset--spacing--2);
	inline-size: 7px;
	block-size: 7px;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-decor);
}

.drb-prose ol {
	counter-reset: drb-step;
}

.drb-prose ol > li {
	padding-inline-start: var(--wp--preset--spacing--6);
	counter-increment: drb-step;
}

.drb-prose ol > li::before {
	content: counter( drb-step, persian );
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	inline-size: 24px;
	block-size: 24px;
	border-radius: var(--drb-radius-full);
	background: var(--drb-tile-green);
	font-size: var(--wp--preset--font-size--label);
	line-height: 24px;
	text-align: center;
	color: var(--wp--preset--color--green-ink);
}

.drb-prose strong {
	color: var(--wp--preset--color--green-ink);
}

.drb-prose a {
	color: var(--wp--preset--color--green-action);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.drb-prose blockquote {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-inline-start: 3px solid var(--wp--preset--color--pink-decor);
	border-radius: var(--drb-radius-md);
	background: var(--drb-tile-pink);
}

.drb-prose blockquote p {
	margin: 0;
}

.drb-sources__list {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-sources__policy {
	margin-block-start: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--small);
}

/* Article sidebar
   ------------------------------------------------------------------
   Wide screens get a second column: contents, the reviewing doctor, one booking card and the
   share row. Narrow screens have no room for it, so the aside dissolves into the single column
   with display:contents — the contents box rises above the article and the cards follow it. */

.drb-article__layout {
	display: grid;
	gap: var(--wp--preset--spacing--5);
}

.drb-article__main {
	min-inline-size: 0;
}

@media (max-width: 1079px) {
	.drb-article__side {
		display: contents;
	}

	.drb-article__layout > *,
	.drb-article__side > * {
		inline-size: 100%;
		max-inline-size: 760px;
		margin-inline: auto;
	}

	.drb-toc {
		order: -1;
	}
}

@media (min-width: 1080px) {
	.drb-article__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--wp--preset--spacing--7);
		align-items: start;
	}

	.drb-article__side {
		position: sticky;
		inset-block-start: 96px;
		display: grid;
		gap: var(--wp--preset--spacing--4);
	}

	/* The head and the body of the article line up on the same column, with the cover free to
	   run the full width of the page. */
	.drb-page--article .drb-page__hero > .drb-wrap--text {
		max-inline-size: var(--drb-wrap);
	}

	.drb-page--article .drb-page__hero > .drb-wrap--text > * {
		max-inline-size: 760px;
	}

	.drb-toc__list {
		max-block-size: 46vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.drb-prose h2,
.drb-prose h3 {
	scroll-margin-block-start: 96px;
}

.drb-toc__box {
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-toc__head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
	cursor: pointer;
	list-style: none;
}

.drb-toc__head::-webkit-details-marker {
	display: none;
}

.drb-toc__head svg {
	inline-size: 20px;
	block-size: 20px;
	color: var(--wp--preset--color--pink-mid);
}

.drb-toc__list {
	margin: var(--wp--preset--spacing--3) 0 0;
	padding: 0;
	list-style: none;
}

.drb-toc__item--3 {
	padding-inline-start: var(--wp--preset--spacing--4);
}

.drb-toc__item a {
	display: block;
	padding-block: 6px;
	padding-inline-start: var(--wp--preset--spacing--3);
	border-inline-start: 2px solid transparent;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	transition: color var(--drb-ease), border-color var(--drb-ease);
}

.drb-toc__item a:hover {
	color: var(--wp--preset--color--green-ink);
}

.drb-toc__item.is-current a {
	border-inline-start-color: var(--wp--preset--color--pink-decor);
	color: var(--wp--preset--color--green-ink);
	font-weight: 600;
}

.drb-aside__card {
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-aside__label {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-aside__title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-aside__text {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-aside__ask {
	border-color: transparent;
	background: var(--drb-tile-pink);
}

.drb-reviewer__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	color: inherit;
	text-decoration: none;
}

.drb-reviewer__photo img {
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--drb-radius-full);
	object-fit: cover;
}

.drb-reviewer__body {
	display: grid;
	gap: 4px;
	justify-items: start;
}

.drb-reviewer__name {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--green-ink);
}

.drb-reviewer__link:hover .drb-reviewer__name {
	text-decoration: underline;
}

.drb-reviewer__title,
.drb-reviewer__date {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-reviewer__date {
	margin-block-start: var(--wp--preset--spacing--3);
}

.drb-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.drb-share__link {
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--green-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--drb-ease), background-color var(--drb-ease);
}

.drb-share__link:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
}

/* Reading progress: a hair-thin line at the very top of the window, filling from the start of
   the line, which in this direction is the right edge. */

.drb-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	block-size: 3px;
	pointer-events: none;
}

.admin-bar .drb-progress {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

.drb-progress__bar {
	display: block;
	inline-size: 0;
	block-size: 100%;
	border-start-start-radius: 0;
	border-end-end-radius: var(--drb-radius-full);
	border-start-end-radius: var(--drb-radius-full);
	background: linear-gradient(to left, var(--wp--preset--color--pink-decor), var(--wp--preset--color--green-decor));
}

/* Signatures and the disclaimer
   ------------------------------------------------------------------ */

.drb-page__foot {
	margin-block-start: var(--wp--preset--spacing--6);
}

.drb-signature {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-signature .drb-icon {
	color: var(--wp--preset--color--green-action);
}


.drb-disclaimer {
	margin-block-start: var(--wp--preset--spacing--4);
	padding-block-start: var(--wp--preset--spacing--4);
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-byline__row {
	margin: 0 0 6px;
}

/* Filtering hides rows rather than removing them, so nothing is lost
   when the script is off. */

[data-hidden="true"] {
	display: none !important;
}

/* Illustrations carry their surface's colour
   ------------------------------------------------------------------
   Each illustration is exported with its background painted to the exact colour of the surface it
   sits on, or with a transparent background where what sits behind it is not one flat colour (the
   hero clouds, the stage hero's gradient). A stage illustration exists once per tile colour, chosen
   by drb_stage_ground() in PHP. A matched file must not be blended: multiply over a matching field
   darkens it into a visible square, and so would a drop-shadow, which follows the file's rectangle.

   Until the whole set has been regenerated with its grounds, files still carrying the old white
   background are dropped into their surface with multiply, as before. A file served as a ground
   copy is marked .drb-illus--grounded and is left alone. Remove this rule once every illustration
   has been rebuilt. */
.drb-cloud__object:not(.drb-illus--grounded),
.drb-team__mark img:not(.drb-illus--grounded),
.drb-page__hero-figure img:not(.drb-illus--grounded),
.drb-stage-hero__figure img:not(.drb-illus--grounded),
.drb-stage-card__figure img:not(.drb-illus--grounded),
.drb-station__figure img:not(.drb-illus--grounded),
.drb-shelf__tile img:not(.drb-illus--grounded),
.drb-guide__cover img:not(.drb-illus--grounded),
.drb-card__figure img:not(.drb-illus--grounded) {
	mix-blend-mode: multiply;
}

.drb-station__figure,
.drb-shelf__tile,
.drb-guide__cover,
.drb-card__figure,
.drb-stage-card,
.drb-cloud,
.drb-page__hero-figure,
.drb-stage-hero__figure {
	isolation: isolate;
}

/* The booking band is the one dark surface on the site. Its figure sits on a cream plate, a
   deliberate medallion, and the illustration's own background is painted the same cream. */
.drb-band__figure {
	background: var(--drb-cream, #FDF7F0);
	border-radius: 50%;
	padding: 10px;
	box-sizing: border-box;
}


/* ==================================================================
   Request forms, the booking page, the doctor page
   ================================================================== */

:root {
	/* Field outlines need 3:1 against white to be seen as a boundary (WCAG 1.4.11); the hairline
	   colour used for dividers is far below that. */
	--drb-field-border: color-mix(in srgb, var(--wp--preset--color--text-muted) 75%, white);
}

/* The hero's heading and lead are the first thing painted. They move into place but are never
   hidden, so the largest text on the page is visible from the first frame. */
@keyframes drb-lift {
	from {
		transform: translateY(12px);
	}

	to {
		transform: none;
	}
}

.drb-embrace__inner > :nth-child(-n+2) {
	animation-name: drb-lift;
}

.drb-form {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 12px 32px rgba(27, 36, 32, 0.06);
}

.drb-form--done {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	box-shadow: none;
}

.drb-form--done p {
	margin: 0;
	line-height: 1.9;
}

.drb-form__row {
	display: grid;
	align-items: start;
	gap: var(--wp--preset--spacing--4);
}

@media (min-width: 600px) {
	.drb-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.drb-form__field {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.drb-form__label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
}

.drb-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.drb-form__input {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0.6em 1em;
	border: 1px solid var(--drb-field-border);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

textarea.drb-form__input {
	min-block-size: 96px;
	line-height: 1.9;
	resize: vertical;
}

.drb-form__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--green-action);
	box-shadow: 0 0 0 3px var(--wp--preset--color--green-illus);
}

.drb-form__hint {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.drb-form__choices .drb-form__label {
	inline-size: 100%;
}

.drb-form__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding-inline: 14px;
	border: 1px solid var(--drb-field-border);
	border-radius: var(--drb-radius-full);
	cursor: pointer;
}

.drb-form__choice:has(input:checked) {
	border-color: var(--wp--preset--color--green-action);
	background: var(--wp--preset--color--green-bg);
}

.drb-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	color: var(--wp--preset--color--text-muted);
}

.drb-form__consent input {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 5px;
	accent-color: var(--wp--preset--color--green-action);
}

.drb-form__error {
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
}

/* Visually hidden rather than display:none, which some form fillers skip over. Clipped in place
   instead of pushed off screen: in a right-to-left page an offset would widen the page. */
.drb-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.drb-form .drb-button {
	justify-self: start;
}

.drb-guide__form + .drb-form__consent {
	margin-block-start: var(--wp--preset--spacing--3);
}

.drb-guide__form .drb-form__consent {
	margin-block-start: var(--wp--preset--spacing--3);
}

/* Booking request page */

.drb-booking {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-block: var(--wp--preset--spacing--5);
}

@media (min-width: 900px) {
	.drb-booking {
		grid-template-columns: 5fr 6fr;
		align-items: start;
	}
}

.drb-booking__intro {
	display: grid;
	gap: var(--wp--preset--spacing--5);
}

.drb-numbered {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: drb-numbered;
}

.drb-numbered__item {
	position: relative;
	padding-inline-start: 44px;
	line-height: 1.9;
	counter-increment: drb-numbered;
}

.drb-numbered__item::before {
	content: counter(drb-numbered, persian);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 2px;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.drb-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-checklist li {
	position: relative;
	padding-inline-start: 30px;
	line-height: 1.9;
}

.drb-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 0.75em;
	inline-size: 12px;
	block-size: 7px;
	border-inline-start: 2px solid var(--wp--preset--color--green-action);
	border-block-end: 2px solid var(--wp--preset--color--green-action);
	transform: rotate(-45deg);
}

.drb-pro,
.drb-contact-form {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-block: var(--wp--preset--spacing--5);
}

.drb-contact-form {
	gap: var(--wp--preset--spacing--4);
}

/* Doctor profile */

.drb-doctor {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	padding-block: var(--wp--preset--spacing--5);
}

@media (min-width: 960px) {
	.drb-doctor {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.drb-doctor__rail {
		position: sticky;
		inset-block-start: 96px;
	}
}

.drb-doctor__main {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	min-inline-size: 0;
}

.drb-doctor__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
}

.drb-doctor__portrait img {
	inline-size: 120px;
	block-size: 120px;
	border-radius: 50%;
	object-fit: cover;
}

.drb-doctor__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--3) 0 0;
}

.drb-badge--soft {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--text);
}

.drb-rail {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 12px 32px rgba(27, 36, 32, 0.06);
}

.drb-rail__facts {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.drb-rail__facts div {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding-block-end: var(--wp--preset--spacing--3);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.drb-rail__facts dt {
	color: var(--wp--preset--color--text-muted);
}

.drb-rail__facts dd {
	margin: 0;
	font-weight: 700;
}

.drb-rail__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-button--block {
	justify-content: center;
	inline-size: 100%;
}

.drb-location {
	display: grid;
	gap: 6px;
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--cream);
}

.drb-location__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.drb-location__line {
	margin: 0;
	line-height: 1.9;
}

.drb-location__hours {
	margin: 0;
	padding-inline-start: 1.2em;
}

.drb-search-concerns {
	margin-block: var(--wp--preset--spacing--5);
}

/* ==================================================================
   Theme shell: notice bar, header tools, menu drawer, search dialog
   ================================================================== */

.drb-topbar {
	background: var(--wp--preset--color--green-ink);
	color: var(--drb-footer-ink);
	font-size: var(--wp--preset--font-size--label);
}

.drb-topbar__inner {
	display: flex;
	justify-content: center;
	padding-block: 0.45rem;
	text-align: center;
}

.drb-topbar__text {
	margin: 0;
	max-inline-size: none;
	color: inherit;
	text-decoration: none;
}

a.drb-topbar__text:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	color: inherit;
}

.drb-iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-inline-size: 42px;
	min-block-size: 42px;
	padding: 0 0.6rem;
	border: 1px solid transparent;
	border-radius: var(--drb-radius-full);
	background: transparent;
	color: var(--wp--preset--color--green-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--drb-ease), border-color var(--drb-ease);
}

.drb-iconbutton:hover {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-iconbutton .drb-icon {
	inline-size: 22px;
	block-size: 22px;
	vertical-align: 0;
}

.drb-header__account.is-member {
	border-color: var(--wp--preset--color--line);
}

.drb-header__toggle {
	display: none;
}

@media (max-width: 899px) {
	.drb-header__toggle {
		display: inline-flex;
	}

	.drb-header__tools .drb-iconbutton {
		padding: 0;
	}
}

/* Dialogs share the open/close motion and backdrop. */

.drb-drawer,
.drb-searchdialog {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	max-inline-size: 100vw;
	max-block-size: 100dvh;
}

.drb-drawer::backdrop,
.drb-searchdialog::backdrop {
	background: rgba(27, 36, 32, 0.38);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.drb-drawer {
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	margin: 0;
	block-size: 100dvh;
	inline-size: min(360px, 88vw);
}

.drb-drawer[open] .drb-drawer__panel {
	animation: drb-drawer-in 260ms ease-out;
}

.drb-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	block-size: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5) calc(var(--wp--preset--spacing--5) + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(170deg, var(--drb-tile-pink) 0%, var(--wp--preset--color--cream) 42%, var(--wp--preset--color--white) 100%);
	overflow-y: auto;
	isolation: isolate;
}

/* A soft light in the corner of the drawer, the same one the hero uses. */
.drb-drawer__panel::before {
	content: "";
	position: absolute;
	inset-block-start: -18%;
	inset-inline-start: -30%;
	z-index: -1;
	inline-size: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--wp--preset--color--green-bg) 0%, rgba(232, 247, 240, 0) 70%);
	pointer-events: none;
}

.drb-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.drb-drawer__logo {
	inline-size: auto;
	block-size: 32px;
}

.drb-drawer__menu,
.drb-drawer__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-drawer__menu {
	display: grid;
	gap: var(--wp--preset--spacing--2);
}

.drb-drawer__menu a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: 0.6rem 0.7rem;
	border-radius: var(--drb-radius-lg);
	background: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	color: var(--wp--preset--color--green-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--drb-ease), box-shadow var(--drb-ease), transform var(--drb-ease);
}

/* The rows arrive one after another when the drawer opens. */
.drb-drawer[open] .drb-drawer__menu > li {
	animation: drb-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-drawer[open] .drb-drawer__menu > li:nth-child(1) { animation-delay: 60ms; }
.drb-drawer[open] .drb-drawer__menu > li:nth-child(2) { animation-delay: 110ms; }
.drb-drawer[open] .drb-drawer__menu > li:nth-child(3) { animation-delay: 160ms; }
.drb-drawer[open] .drb-drawer__menu > li:nth-child(4) { animation-delay: 210ms; }
.drb-drawer[open] .drb-drawer__menu > li:nth-child(5) { animation-delay: 260ms; }
.drb-drawer[open] .drb-drawer__menu > li:nth-child(n+6) { animation-delay: 310ms; }

.drb-drawer__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--drb-radius-md);
	background: var(--drb-tile-pink);
	color: var(--wp--preset--color--pink-mid);
	transition: background-color var(--drb-ease), color var(--drb-ease);
}

.drb-drawer__icon .drb-icon {
	inline-size: 21px;
	block-size: 21px;
}

.drb-drawer__menu a:active {
	transform: scale(0.99);
}

.drb-drawer__quick {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--wp--preset--spacing--2);
}

.drb-drawer__quickitem {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding-block: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	text-decoration: none;
}

.drb-drawer__quickitem .drb-icon {
	inline-size: 20px;
	block-size: 20px;
	color: var(--wp--preset--color--pink-mid);
}

.drb-drawer__menu .sub-menu a {
	padding-inline-start: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.drb-drawer__menu .current-menu-item > a {
	background: var(--wp--preset--color--green-bg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--green-illus);
}

.drb-drawer__menu .current-menu-item > a .drb-drawer__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-action);
}

.drb-drawer__foot {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin-block-start: auto;
}

.drb-drawer__phone {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.drb-searchdialog {
	inset-block-start: 0;
	margin-block: min(12vh, 96px) 0;
	margin-inline: auto;
	inline-size: min(680px, calc(100vw - 2 * var(--drb-gutter)));
}

.drb-searchdialog[open] .drb-searchdialog__panel {
	animation: drb-dialog-in 220ms ease-out;
}

.drb-searchdialog__panel {
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
}

.drb-searchdialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--4);
}

.drb-searchdialog__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.drb-searchdialog__alt {
	margin-block-start: var(--wp--preset--spacing--2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--green-action);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.drb-searchdialog__label {
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

@keyframes drb-drawer-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes drb-dialog-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.drb-drawer[open] .drb-drawer__panel,
	.drb-searchdialog[open] .drb-searchdialog__panel {
		animation: none;
	}
}

/* ==================================================================
   Page heads, listings, pagination and empty states
   ================================================================== */

.drb-pagehead {
	padding-block-end: var(--wp--preset--spacing--6);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.drb-page__hero--pink {
	background: var(--wp--preset--color--pink-bg);
}

.drb-page__hero--green {
	background: var(--wp--preset--color--green-bg);
}

.drb-page__hero--cream {
	background: var(--wp--preset--color--white);
}

.drb-pagehead .drb-page__title {
	margin-block-start: var(--wp--preset--spacing--3);
}

.drb-pagehead .drb-label + .drb-page__title {
	margin-block-start: 0;
}

.drb-listing {
	padding-block-start: var(--wp--preset--spacing--5);
}

.drb-topics {
	margin-block-end: var(--wp--preset--spacing--5);
}

.drb-chip.is-active,
.drb-chip[aria-current="page"] {
	background: var(--wp--preset--color--green-action);
	border-color: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

.drb-feature {
	margin-block-end: var(--wp--preset--spacing--6);
}

.drb-feature__link {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--drb-ease), border-color var(--drb-ease);
}

.drb-feature__link:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	color: inherit;
}

.drb-feature__figure {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--drb-tile-pink);
}

.drb-feature__figure img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.drb-feature__body {
	display: grid;
	align-content: center;
	gap: var(--wp--preset--spacing--2);
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
}

.drb-feature__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--green-ink);
}

.drb-feature__lead {
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.drb-feature__link {
		grid-template-columns: 1.1fr 1fr;
		gap: 0;
	}

	.drb-feature__body {
		padding: var(--wp--preset--spacing--6);
	}
}

.drb-pagination {
	margin-block-start: var(--wp--preset--spacing--6);
}

.drb-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
}

.drb-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.drb-pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
}

.drb-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--green-action);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

/* The chevron icon points left, which is "next" in RTL; "previous" is mirrored. */
.drb-pagination .prev .drb-icon {
	transform: scaleX(-1);
}

.drb-search--inline {
	max-inline-size: 640px;
	margin-block-end: var(--wp--preset--spacing--5);
}

.drb-empty {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	text-align: center;
}

.drb-empty__mark {
	display: grid;
	place-items: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--pink-mid);
}

.drb-empty__mark .drb-icon {
	inline-size: 28px;
	block-size: 28px;
	vertical-align: 0;
}

.drb-empty__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.drb-empty__text {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
	margin-block-start: var(--wp--preset--spacing--2);
}

/* 404 */

.drb-notfound {
	background: linear-gradient(180deg, var(--wp--preset--color--pink-bg), var(--wp--preset--color--page) 70%);
}

.drb-notfound__inner {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	max-inline-size: var(--drb-wrap);
	padding-block: var(--wp--preset--spacing--5);
}

.drb-notfound__art {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: min(260px, 60vw);
	margin-inline: auto;
}

.drb-notfound__arc {
	inline-size: 100%;
	block-size: auto;
	fill: var(--wp--preset--color--pink-decor);
	opacity: 0.55;
}

.drb-notfound__code {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-block-start: 12%;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3.5rem, 9vw, 5.5rem);
	font-weight: 800;
	color: var(--wp--preset--color--green-ink);
}

.drb-notfound__copy {
	max-inline-size: 640px;
	margin-inline: auto;
	text-align: center;
}

.drb-notfound__copy .drb-search {
	text-align: start;
}

.drb-notfound__title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--x-large);
}

.drb-paths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	list-style: none;
}

.drb-paths__item {
	display: grid;
	gap: 4px;
	block-size: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease), transform var(--drb-ease);
}

.drb-paths__item:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	transform: translateY(-2px);
	color: inherit;
}

.drb-paths__icon {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block-end: var(--wp--preset--spacing--2);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-action);
}

.drb-paths__icon .drb-icon {
	vertical-align: 0;
}

.drb-paths__title {
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-paths__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* ==================================================================
   Alerts, the finished form, the save button
   ================================================================== */

.drb-alert {
	margin: 0 0 var(--wp--preset--spacing--4);
	max-inline-size: none;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	border-inline-start: 4px solid currentColor;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.drb-alert--success {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-alert--error {
	background: var(--wp--preset--color--urgent-bg);
	color: var(--wp--preset--color--urgent-ink);
}

.drb-form--done {
	justify-items: start;
	gap: var(--wp--preset--spacing--2);
}

.drb-form__done-mark {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--green-action);
}

.drb-form__done-mark::after {
	content: "";
	inline-size: 18px;
	block-size: 10px;
	margin-block-start: -4px;
	border-inline-start: 3px solid var(--wp--preset--color--on-action);
	border-block-end: 3px solid var(--wp--preset--color--on-action);
	transform: rotate(-45deg);
}

.drb-form--done .drb-form__done-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.drb-form__done-link a {
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.drb-save-form {
	display: inline-block;
	margin: 0;
}

.drb-save {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-block-size: 40px;
	padding: 0.35em 1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--drb-ease), border-color var(--drb-ease);
}

.drb-save:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-save .drb-icon {
	inline-size: 18px;
	block-size: 18px;
	vertical-align: 0;
}

.drb-save.is-saved {
	border-color: var(--wp--preset--color--pink-decor);
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-save.is-saved .drb-icon {
	fill: currentColor;
}

.drb-page__hero .drb-save,
.drb-page__hero .drb-save-form {
	margin-block-start: var(--wp--preset--spacing--3);
}

/* ==================================================================
   Login and registration
   ================================================================== */

.drb-auth {
	padding-block: var(--wp--preset--spacing--6);
	background: linear-gradient(180deg, var(--wp--preset--color--pink-bg), var(--wp--preset--color--page) 60%);
}

.drb-auth__inner {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	max-inline-size: 1000px;
}

.drb-auth__brand {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--green-ink);
	color: var(--drb-footer-ink);
}

.drb-auth__arc {
	position: absolute;
	inset-block-end: -18%;
	inset-inline-end: -14%;
	inline-size: 70%;
	fill: var(--wp--preset--color--green-illus);
	opacity: 0.18;
	pointer-events: none;
}

.drb-auth__brand .drb-label {
	color: var(--wp--preset--color--green-decor);
}

.drb-auth__brand-title {
	position: relative;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--drb-footer-ink);
}

.drb-auth__benefits {
	position: relative;
	display: none;
	gap: var(--wp--preset--spacing--4);
	margin: var(--wp--preset--spacing--5) 0 0;
	padding: 0;
	list-style: none;
}

.drb-auth__benefits li {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: flex-start;
	line-height: 1.8;
	color: var(--drb-footer-muted);
}

.drb-auth__benefits strong {
	display: block;
	color: var(--drb-footer-ink);
}

.drb-auth__benefit-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--drb-radius-md);
	background: rgba(243, 247, 245, 0.1);
	color: var(--wp--preset--color--green-decor);
}

.drb-auth__benefit-icon .drb-icon {
	vertical-align: 0;
}

.drb-auth__panel {
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), var(--drb-shadow-lg);
}

.drb-auth__title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--x-large);
}

.drb-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-block-end: var(--wp--preset--spacing--5);
	padding: 4px;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--cream);
}

.drb-auth__tab {
	padding: 0.55rem;
	border-radius: var(--drb-radius-full);
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.drb-auth__tab[aria-current="page"] {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	box-shadow: var(--drb-shadow-sm);
}

.drb-auth__form {
	padding: 0;
	box-shadow: none;
}

.drb-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
}

.drb-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.drb-auth__remember input {
	inline-size: 18px;
	block-size: 18px;
	accent-color: var(--wp--preset--color--green-action);
}

.drb-auth__forgot {
	color: var(--wp--preset--color--green-action);
}

.drb-auth__note {
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-auth__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin: calc(-1 * var(--wp--preset--spacing--2)) 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.drb-auth__who bdi {
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
	letter-spacing: 0.04em;
}

.drb-auth__big {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.04em;
}

.drb-auth__code {
	font-size: 28px;
	letter-spacing: 0.4em;
	text-align: center;
}

.drb-auth__methods {
	display: grid;
	gap: var(--wp--preset--spacing--3);
}

.drb-auth__methods form {
	margin: 0;
}

.drb-auth__method {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--drb-ease), background-color var(--drb-ease);
}

.drb-auth__method:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--text);
}

.drb-auth__method strong {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--green-ink);
}

.drb-auth__method-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-action);
}

.drb-auth__method-icon .drb-icon {
	vertical-align: 0;
}

.drb-auth__resend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-block-start: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--small);
}

.drb-auth__resend button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--green-action);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.drb-auth__resend button:disabled {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	cursor: default;
}

.drb-password {
	position: relative;
	display: block;
}

.drb-password .drb-form__input {
	box-sizing: border-box;
	padding-inline-end: 3rem;
}

.drb-password__toggle {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	inline-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
}

.drb-password__toggle.is-on {
	color: var(--wp--preset--color--green-action);
}

@media (min-width: 900px) {
	.drb-auth {
		padding-block: var(--wp--preset--spacing--7);
	}

	.drb-auth__inner {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.drb-auth__brand {
		padding: var(--wp--preset--spacing--6);
	}

	.drb-auth__benefits {
		display: grid;
	}

	.drb-auth__panel {
		padding: var(--wp--preset--spacing--6);
	}
}

/* ==================================================================
   Account
   ================================================================== */

.drb-account {
	padding-block-end: var(--wp--preset--spacing--7);
}

.drb-account__head {
	padding-block: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--pink-bg);
}

.drb-account__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.drb-account__lead {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-account__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--5);
	margin-block-start: var(--wp--preset--spacing--5);
}

.drb-account__nav {
	min-inline-size: 0;
}

.drb-account__nav ul {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 6px;
	overflow-x: auto;
	list-style: none;
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), var(--drb-shadow-md);
	scrollbar-width: none;
}

.drb-account__navlink {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6rem 0.9rem;
	border-radius: var(--drb-radius-md);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--drb-ease), color var(--drb-ease);
}

.drb-account__navlink .drb-icon {
	vertical-align: 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-account__navlink:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--green-ink);
}

.drb-account__navlink[aria-current="page"] {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-account__navlink[aria-current="page"] .drb-icon {
	color: var(--wp--preset--color--green-action);
}

.drb-account__navlink--out,
.drb-account__navlink--out .drb-icon {
	color: var(--wp--preset--color--pink-mid);
}

.drb-account__count {
	margin-inline-start: auto;
	min-inline-size: 1.6em;
	padding: 0 0.45em;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--green-ink);
	font-size: var(--wp--preset--font-size--label);
	text-align: center;
}

.drb-account__panel {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	align-content: start;
	min-inline-size: 0;
}

.drb-account__panel > .drb-alert {
	margin: 0;
}

.drb-account__section-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.drb-account__card {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: none;
}

.drb-account__card p {
	margin: 0;
}

.drb-account__card--cta {
	grid-template-columns: 1fr;
	align-items: center;
	border-color: transparent;
	background: var(--wp--preset--color--green-bg);
}

.drb-account__card--soft {
	justify-items: start;
	border-style: dashed;
	background: var(--wp--preset--color--cream);
}

.drb-account__card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.drb-account__hint {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 900px) {
	.drb-account__layout {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}

	.drb-account__nav {
		position: sticky;
		inset-block-start: 96px;
	}

	.drb-account__nav ul {
		flex-direction: column;
		padding: var(--wp--preset--spacing--2);
	}

	.drb-account__card--cta {
		grid-template-columns: 1fr auto;
	}
}

.drb-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--4);
}

.drb-stat {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-stat:hover {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	color: inherit;
}

.drb-stat__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--green-ink);
}

.drb-stat__value--text {
	font-size: var(--wp--preset--font-size--large);
}

.drb-requests {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-request {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-request__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
}

.drb-request__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.drb-request__topic {
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.drb-request__date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-request__closed {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-progress {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: drb-step;
}

.drb-progress__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
	text-align: center;
	counter-increment: drb-step;
}

.drb-progress__step::before {
	content: counter(drb-step, persian);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	font-weight: 700;
}

.drb-progress__step + .drb-progress__step::after {
	content: "";
	position: absolute;
	inset-block-start: 15px;
	inset-inline-end: 50%;
	inline-size: 100%;
	block-size: 2px;
	background: var(--wp--preset--color--line);
}

.drb-progress__step.is-done {
	color: var(--wp--preset--color--green-ink);
	font-weight: 600;
}

.drb-progress__step.is-done::before {
	border-color: var(--wp--preset--color--green-action);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

.drb-progress__step.is-done::after {
	background: var(--wp--preset--color--green-action);
}

.drb-saved {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-saved__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-saved__link {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
	flex: 1 1 240px;
	color: inherit;
	text-decoration: none;
}

.drb-saved__kind {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.drb-saved__title {
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-saved__link:hover .drb-saved__title {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ==================================================================
   Coming soon
   ================================================================== */

.drb-soon-page {
	padding: 0 !important;
}

.drb-soon {
	display: grid;
	place-items: center;
	min-block-size: 100dvh;
	padding: var(--drb-gutter);
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--wp--preset--color--pink-bg), var(--wp--preset--color--page));
}

.drb-soon__card {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--4);
	max-inline-size: 560px;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
	text-align: center;
}

.drb-soon__logo {
	inline-size: 140px;
	block-size: auto;
}

.drb-soon__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.drb-soon__text {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}

.drb-soon__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
}

/* Account: appointment facts, companions and the patients a companion follows */

.drb-account__lead-text {
	margin: calc(-1 * var(--wp--preset--spacing--3)) 0 0;
	max-inline-size: 62ch;
	color: var(--wp--preset--color--text-muted);
}

.drb-request__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-bg);
}

.drb-request__facts dt {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-request__facts dd {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
}

.drb-people {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-people__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-people__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--green-ink);
	font-weight: 700;
}

.drb-people__body {
	display: grid;
	flex: 1 1 180px;
	min-inline-size: 0;
}

.drb-people__body span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-people__item form,
.drb-patient form {
	margin: 0;
}

.drb-patient__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.drb-patient__head > div {
	flex: 1 1 160px;
}

.drb-visits {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-visits__item {
	display: grid;
	gap: 2px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-inline-start: 4px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--cream);
}

.drb-visits__item--booked {
	border-inline-start-color: var(--wp--preset--color--green-action);
}

.drb-visits__item strong {
	color: var(--wp--preset--color--green-ink);
}

.drb-visits__item span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* Account: visits, booking again and the health record
   ------------------------------------------------------------------ */

.drb-account__block {
	display: grid;
	gap: var(--wp--preset--spacing--3);
}

.drb-visit-list {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-visit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
}

.drb-visit__date {
	display: grid;
	align-content: center;
	justify-items: center;
	min-inline-size: 84px;
	padding: var(--wp--preset--spacing--3);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	line-height: 1.3;
	text-align: center;
}

.drb-visit__date span {
	font-size: var(--wp--preset--font-size--label);
}

.drb-visit__date strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
}

.drb-visit__body {
	display: grid;
	gap: 4px;
	align-content: center;
	min-inline-size: 0;
}

.drb-visit__body p {
	margin: 0;
}

.drb-visit__time {
	font-weight: 700;
	color: var(--wp--preset--color--green-ink);
}

.drb-visit__status {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 0 10px;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--green-bg);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
}

.drb-visit__who {
	font-weight: 600;
}

.drb-visit__place,
.drb-visit__next {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-visit__plan {
	padding: var(--wp--preset--spacing--3);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--cream);
}

.drb-visit__cancel {
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-visit-list--past .drb-visit__date,
.drb-visit--cancelled_user .drb-visit__date,
.drb-visit--cancelled_clinic .drb-visit__date,
.drb-visit--no_show .drb-visit__date {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--text-muted);
}

.drb-visit--cancelled_user .drb-visit__status,
.drb-visit--cancelled_clinic .drb-visit__status,
.drb-visit--no_show .drb-visit__status {
	background: var(--wp--preset--color--pink-bg);
	color: var(--wp--preset--color--text);
}

.drb-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	border: 0;
}

.drb-slot {
	position: relative;
	display: grid;
	gap: 0;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--drb-field-border);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--white);
	line-height: 1.5;
	cursor: pointer;
}

.drb-slot input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.drb-slot span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.drb-slot strong {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--green-ink);
}

.drb-slot:has(input:checked) {
	border-color: var(--wp--preset--color--green-action);
	background: var(--wp--preset--color--green-bg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--green-action);
}

.drb-slot:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--green-action);
	outline-offset: 2px;
}

.drb-record-add summary {
	cursor: pointer;
}

.drb-record-add[open] {
	gap: var(--wp--preset--spacing--4);
}

.drb-timeline {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0 0 0 0;
	list-style: none;
}

.drb-timeline::before {
	content: "";
	position: absolute;
	inset-block: 8px;
	inset-inline-start: 7px;
	inline-size: 2px;
	background: var(--wp--preset--color--line);
}

.drb-timeline__item {
	position: relative;
	display: grid;
	gap: 4px;
	padding-inline-start: 32px;
}

.drb-timeline__item::before {
	content: "";
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 0;
	inline-size: 16px;
	block-size: 16px;
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--pink-decor);
	box-shadow: 0 0 0 1px var(--wp--preset--color--line);
}

.drb-timeline__item--visit::before {
	background: var(--wp--preset--color--green-action);
}

.drb-timeline__date {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

.drb-timeline__body {
	display: grid;
	gap: 4px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-timeline__body p {
	margin: 0;
}

.drb-timeline__type {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

.drb-timeline__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-timeline__tools form {
	margin: 0;
}

@media (max-width: 520px) {
	.drb-visit {
		grid-template-columns: 1fr;
	}

	.drb-visit__date {
		display: flex;
		gap: 6px;
		justify-content: flex-start;
		align-items: baseline;
	}

	.drb-visit__date strong {
		font-size: var(--wp--preset--font-size--large);
	}
}