/**
 * Doctor Banoo theme styles: the home page.
 *
 * Loaded after base.css on the front page only (see drb_is_home_layout()): the hero, and every home
 * section in patterns/home-*.php. Section headings follow the order of base.css, so a part that is
 * split across the two files carries the same heading in both.
 */

/* Section shells
   ------------------------------------------------------------------ */

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

@media (min-width: 900px) {
	.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);
}

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

.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);
}

/* Hero
   What the hero's parts share: its padding, the title, the lead and the chips under the search.
   ------------------------------------------------------------------ */

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

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

.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-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-hero__title {
		max-inline-size: 16ch;
	}

	.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;
	}
}

/* Stage entrances
   The keyframes the lit stage below builds itself with.
   ------------------------------------------------------------------ */

/* 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);
	}
}

/* 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;
}

/* 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;
	}
}

.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-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);
}

/* 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-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--3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.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__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);
}

/* 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);
}

/* 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 base.css.
   ------------------------------------------------------------------ */

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

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

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

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

.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;
}

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

@media (hover: none) {
	/* The why cards press here rather than in base.css, so the press still wins over their hover lift. */
	.drb-why__card:active {
		transform: scale(0.98);
	}
}

/* Illustrations carry their surface's colour (the full note is in base.css)
   ------------------------------------------------------------------ */

/* 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
   ================================================================== */

.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);
}