/* Built from assets/css/src — edit the source files, not this one. */

/* ==== 00-base.css ==== */
/**
 * The Dental Clinic — base: the fonts, the design tokens, the reset, type styles, containers and
 * section rhythm. Every value is read from the approved Figma file (page "Website UI", 1728px
 * desktop frames); fluid values scale from the 1728px canvas (1vw at 1728 = 17.28px) down to
 * sensible minimums, since the file carries no tablet or phone frames.
 *
 * Source partials are bundled into assets/css/main.css (functions.php). Edit here, not there.
 */

@font-face {
	font-family: "Ibrand";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibrand-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Black Signature";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/black-signature-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Josefin Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-normal-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Josefin Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-ext-normal-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Josefin Sans";
	font-style: italic;
	font-weight: 100 700;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-italic-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Josefin Sans";
	font-style: italic;
	font-weight: 100 700;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-ext-italic-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ---- colour (sampled from the approved frames) */
	--taupe: #847c70;
	--heading: #7f776b;
	--title: #877f73;
	--body: #b1aca6;
	--ink: #232323;
	--charcoal: #423d39;
	--script: #e9dcc7;
	--cream: #f3efe8;
	--cream-2: #f4f0e9;
	--card: #fcfcfa;
	--card-2: #fcfbf9;
	--line: #e0dedb;
	--eyebrow: #c1bdb7;
	--hl: #cdc7bc;
	--star: #ffca72;
	--white: #ffffff;
	--taupe-rgb: 132 124 112;
	--heading-rgb: 127 119 107;
	--charcoal-rgb: 66 61 57;
	--cream-rgb: 243 239 232;
	--taupe-deep: #6b645a; /* the filled button's pressed/hover step */

	/* ---- type */
	--font-heading: "Ibrand", "Josefin Sans", system-ui, sans-serif;
	--font-script: "Black Signature", "Brush Script MT", cursive;
	--font-body: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* ---- layout. The design's content sits 131px in from each edge of its 1728px canvas; the
	 * wider bands and the card rows use their own gutters. Each is fluid below 1728 and never
	 * narrower than a phone-friendly minimum. */
	--gutter: clamp(20px, 7.58vw, 131px);
	--gutter-wide: clamp(16px, 2.9vw, 50px);
	--gutter-band: clamp(20px, 5.32vw, 92px);
	--gutter-grid: clamp(20px, 5.55vw, 96px);
	--gutter-cards: clamp(20px, 9vw, 156px);
	--gutter-team: clamp(20px, 8vw, 138px);
	--gutter-tiles: clamp(20px, 6.37vw, 110px);
	--gutter-about: clamp(20px, 8.3vw, 143px);
	--gutter-usps: clamp(20px, 13.66vw, 236px);
	--gutter-cta: clamp(20px, 10.4vw, 180px);
	--gutter-contact: clamp(20px, 10.1vw, 175px);
	--gutter-maps: clamp(20px, 9.4vw, 163px);
	--gutter-fees: clamp(20px, 9.1vw, 157px);
	/* every content gutter on a phone */
	--gutter-phone: 15px;
	--inner-max: 1466px;
	--section-gap: clamp(64px, 7.3vw, 126px);
	--section-gap-sm: clamp(48px, 5.5vw, 96px);
	--header-h: 123px;
	--anchor-offset: 90px;

	/* ---- shape: the design is square-cornered almost everywhere */
	--r-card: 0;
	--r-soft: 20px;
	--r-frost: 30px;
	--r-review: 20px;
	--btn-h: 55px;
	--btn-h-sm: 47px;

	/* ---- motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--btn-ease: 180ms ease;

	/* ---- aliases the cookie window stylesheet (50-consent.css) reads */
	--navy: var(--charcoal);
	--navy-rgb: var(--charcoal-rgb);
	--leaf: var(--taupe);
	--stone: var(--cream);
	--stone-deep: var(--line);
	--forest: var(--heading);
	--ink-muted: #6f6a64;
	--font-display: var(--font-heading);
	--focus-line: var(--taupe);
	--focus-halo: rgb(var(--taupe-rgb) / 0.3);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--anchor-offset);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--white);
	color: var(--body);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

svg {
	fill: none;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--taupe);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tdc-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--charcoal);
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
}

.tdc-skip:focus {
	top: 16px;
}

/* --------------------------------------------------------------- containers
 * .tdc-container          the content column (131px gutters at 1728px)
 * .tdc-container--wide    the quick-links bar (50px gutters)
 * .tdc-container--band    the reviews / resources bands (92px gutters, 1545px)
 * .tdc-container--grid    the Reviews page grid (96px gutters, 1536px)
 * .tdc-container--cards   the treatment card rows (156px gutters, 1416px)
 * .tdc-container--team    the team rows (138px gutters, 1452px)
 * .tdc-container--tiles   the resources grid (110px gutters, 1498px)
 */
.tdc-container {
	width: min(100% - 2 * var(--gutter), var(--inner-max));
	margin-inline: auto;
}

.tdc-container--wide {
	width: min(100% - 2 * var(--gutter-wide), 1628px);
}

.tdc-container--band {
	width: min(100% - 2 * var(--gutter-band), 1545px);
}

.tdc-container--grid {
	width: min(100% - 2 * var(--gutter-grid), 1536px);
}

.tdc-container--cards {
	width: min(100% - 2 * var(--gutter-cards), 1416px);
}

.tdc-container--team {
	width: min(100% - 2 * var(--gutter-team), 1452px);
}

.tdc-container--tiles {
	width: min(100% - 2 * var(--gutter-tiles), 1498px);
}

.tdc-main {
	display: block;
}

/* Every section ends with the design's white space; the next section starts flush. Sections that
 * carry their own band set their own padding. */
.tdc-section {
	padding-bottom: var(--section-gap);
}

.tdc-section--flush {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------- type */
.tdc-eyebrow {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--eyebrow);
}

.tdc-eyebrow--taupe {
	color: var(--taupe);
}

.tdc-eyebrow--muted {
	color: rgb(var(--heading-rgb) / 0.5);
}

.tdc-eyebrow--on-dark {
	color: var(--cream);
	letter-spacing: 0.2em;
}

.tdc-eyebrow--ink {
	color: var(--ink);
	letter-spacing: 0.2em;
}

/* The big lowercase heading: Ibrand 65px on the canvas, fluid below it. */
.tdc-h2 {
	font-family: var(--font-heading);
	font-size: clamp(38px, 3.76vw, 65px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--heading);
}

.tdc-h2--title {
	color: var(--title);
}

.tdc-h2--mid {
	font-family: var(--font-heading);
	font-size: clamp(32px, 2.6vw, 45px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--heading);
}

.tdc-h2--on-dark {
	color: var(--white);
}

.tdc-h3 {
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.3vw, 40px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--heading);
}

.tdc-h4 {
	font-family: var(--font-heading);
	font-size: clamp(22px, 1.62vw, 28px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--heading);
}

/* The two kinds of emphasis a heading can carry. */
/* The script word is drawn larger and lower than the words around it, and never sets the height of
 * its line: its line-height is zero and it is lowered with vertical-align, so a heading's pitch is
 * the heading's own line-height whichever line the script word falls on, and the script overlaps
 * the line above or below as the design draws it. */
.tdc-script {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 1.3em;
	line-height: 0;
	vertical-align: -0.3em;
	letter-spacing: 0;
	color: var(--script);
}

.tdc-h2 .tdc-script,
.tdc-h3 .tdc-script {
	color: inherit;
}

.tdc-hl {
	color: var(--hl);
}

.tdc-lead {
	font-size: clamp(17px, 1.16vw, 20px);
	line-height: 1.4;
	color: var(--body);
}

.tdc-text {
	font-size: clamp(16px, 1.04vw, 18px);
	line-height: 1.34;
	color: var(--body);
}

/* The eyebrow sits 18px above its heading (Figma: label 15px tall, heading 33px below its top). */
.tdc-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.tdc-section-header--centred {
	align-items: center;
	text-align: center;
}

/* A line break typed into a heading applies on larger screens only. */
.tdc-br {
	display: none;
}

@media (min-width: 1024px) {
	.tdc-br {
		display: inline;
	}
}

/* Buttons under a section: 27px apart, as every pair in the design. */
.tdc-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 27px;
}

.tdc-cta-row--centred {
	justify-content: center;
}

/* ------------------------------------------------------- prose (posts, legal) */
.tdc-prose {
	font-size: clamp(17px, 1.16vw, 20px);
	line-height: 1.5;
	color: #6f6a64;
}

.tdc-prose p,
.tdc-prose ul,
.tdc-prose ol,
.tdc-prose blockquote {
	margin: 0 0 1.2em;
	max-width: 70ch;
}

.tdc-prose h2,
.tdc-prose h3,
.tdc-prose h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--heading);
	margin: 1.6em 0 0.5em;
	line-height: 1.2;
}

.tdc-prose h2 {
	font-size: clamp(28px, 2.3vw, 40px);
}

.tdc-prose h3 {
	font-size: clamp(24px, 1.74vw, 30px);
}

.tdc-prose h4 {
	font-size: clamp(20px, 1.4vw, 24px);
}

.tdc-prose ul {
	list-style: disc;
	padding-left: 1.4em;
}

.tdc-prose ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.tdc-prose a {
	color: var(--taupe);
	text-underline-offset: 3px;
}

.tdc-prose blockquote {
	padding-left: 24px;
	border-left: 2px solid var(--line);
	color: var(--heading);
}

.tdc-prose img {
	margin: 1.5em 0;
}

/* ------------------------------------------------------- plain pages, notes */
.tdc-plain {
	padding: clamp(64px, 6vw, 110px) 0 96px;
}

.tdc-plain__title {
	font-family: var(--font-heading);
	font-size: clamp(38px, 3.76vw, 65px);
	font-weight: 400;
	line-height: 1.18;
	color: var(--heading);
	margin-bottom: 20px;
}

.tdc-plain__lead {
	max-width: 60ch;
	margin-bottom: 28px;
	font-size: 20px;
	line-height: 1.4;
}

.tdc-admin-note {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 60px auto;
	padding: 14px 18px;
	border: 1px dashed var(--line);
	font-size: 15px;
	color: var(--heading);
}

.tdc-admin-note__flag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--taupe);
}

/* The marked empty slot the logo placements draw until the approved artwork is uploaded. */
.tdc-logo-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tdc-logo-w, 65px);
	height: var(--tdc-logo-h, 66px);
	border: 1px dashed rgb(var(--taupe-rgb) / 0.5);
	color: rgb(var(--taupe-rgb) / 0.7);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 4px;
}

/* ------------------------------------------------------ WordPress admin bar */
.admin-bar .tdc-subnav.is-stuck,
.admin-bar .tdc-fees__aside.is-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ---- password-protected page: WordPress's own form, drawn in the house style. */
.tdc-password {
	padding: 96px 0;
}

.tdc-password__inner {
	max-width: 560px;
}

.tdc-password .post-password-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.tdc-password .post-password-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 600;
	color: var(--heading);
}

.tdc-password .post-password-form input[type="password"] {
	width: 100%;
	max-width: 320px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
}

.tdc-password .post-password-form input[type="submit"] {
	align-self: flex-start;
	padding: 18px 24px;
	border: 0;
	background: var(--heading);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 17px;
	cursor: pointer;
}

/* ------------------------------------------------------------ phones and mobile
 * On a phone every content column sits 15px from each edge (images and background bands that are
 * meant to run to the edge still do). Ordinary paragraph text is 16px on mobile screens; fine print,
 * legal pages, the cookie window and labels keep their own sizes.
 */
@media (max-width: 600px) {
	:root {
		--gutter: var(--gutter-phone);
		--gutter-wide: var(--gutter-phone);
		--gutter-band: var(--gutter-phone);
		--gutter-grid: var(--gutter-phone);
		--gutter-cards: var(--gutter-phone);
		--gutter-team: var(--gutter-phone);
		--gutter-tiles: var(--gutter-phone);
		--gutter-about: var(--gutter-phone);
		--gutter-usps: var(--gutter-phone);
		--gutter-cta: var(--gutter-phone);
		--gutter-contact: var(--gutter-phone);
		--gutter-maps: var(--gutter-phone);
		--gutter-fees: var(--gutter-phone);
	}
}

@media (max-width: 767px) {
	body {
		font-size: 16px;
	}

	.tdc-lead,
	.tdc-text,
	.tdc-prose {
		font-size: 16px;
		line-height: 1.55;
	}

	.tdc-plain__lead {
		font-size: 18px;
	}
}


/* ==== 10-components.css ==== */
/**
 * Shared components: the square-cornered buttons (Figma "Primary-Btn"), the round arrow buttons,
 * the form fields and submit bars, the frosted "patient smiles" card, the arch-clipped photos,
 * the reviews placeholder cards, the consent-gated map tile and the sticky category bar.
 */

/* ------------------------------------------------------------------ buttons
 * 55px tall, square corners, Ibrand 17px with 1% tracking, 24px side padding (the label box is
 * inset 12px in the design plus the natural side bearing). Two looks, coloured by what they sit
 * on. Outlined fills with its own colour on hover; filled takes one darker step. Colour
 * transitions only: no shadow, no movement.
 */
.tdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--btn-h);
	padding: 17px 24px 15px;
	border: 1px solid var(--heading);
	border-radius: 0;
	background: var(--heading);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--btn-ease), color var(--btn-ease), border-color var(--btn-ease);
}

.tdc-btn__icon {
	display: block;
	flex: none;
	width: 22px;
	height: 12px;
}

.tdc-btn__icon svg {
	width: 100%;
	height: 100%;
}

.tdc-btn--small {
	min-height: var(--btn-h-sm);
	padding: 13px 20px 11px;
	font-size: 16px;
}

.tdc-btn--block {
	width: 100%;
}

/* Light surfaces (white and cream) */
.tdc-btn--primary:hover,
.tdc-btn--primary:focus-visible {
	background: var(--taupe-deep);
	border-color: var(--taupe-deep);
	color: var(--white);
}

.tdc-btn--secondary {
	border-color: var(--taupe);
	background: transparent;
	color: var(--taupe);
}

.tdc-btn--secondary:hover,
.tdc-btn--secondary:focus-visible {
	background: var(--taupe);
	border-color: var(--taupe);
	color: var(--white);
}

/* Over a photo or the dark panel */
.tdc-btn--on-dark.tdc-btn--primary {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}

.tdc-btn--on-dark.tdc-btn--primary:hover,
.tdc-btn--on-dark.tdc-btn--primary:focus-visible {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--taupe);
}

.tdc-btn--on-dark.tdc-btn--secondary {
	border-color: var(--white);
	background: rgb(255 255 255 / 0.1);
	color: var(--white);
	-webkit-backdrop-filter: blur(2.4px);
	backdrop-filter: blur(2.4px);
}

.tdc-btn--on-dark.tdc-btn--secondary:hover,
.tdc-btn--on-dark.tdc-btn--secondary:focus-visible {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--taupe);
}

/* The homepage hero's cream "book online". Its label is the deeper taupe: 5.1:1 on cream and 5.8:1
 * on the white hover (the brand taupe gave 3.6:1 and 4.1:1). */
.tdc-btn--cream.tdc-btn--primary {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--taupe-deep);
}

.tdc-btn--cream.tdc-btn--primary:hover,
.tdc-btn--cream.tdc-btn--primary:focus-visible {
	background: var(--white);
	border-color: var(--white);
	color: var(--taupe-deep);
}

.tdc-btn:focus-visible {
	outline: 2px solid var(--taupe);
	outline-offset: 3px;
}

.tdc-btn--on-dark:focus-visible {
	outline-color: var(--white);
}

@media (max-width: 480px) {
	.tdc-btn {
		max-width: 100%;
		white-space: normal;
	}

	.tdc-cta-row .tdc-btn {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------- text links
 * The "Get Directions →" / "View Post →" link: words with a long arrow after them. The arrow
 * slides 4px on hover.
 */
.tdc-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--title);
	text-decoration: none;
	transition: color var(--btn-ease);
}

.tdc-arrow-link__icon {
	display: block;
	flex: none;
	width: 28px;
	height: 12px;
	transition: transform 220ms var(--ease);
}

.tdc-arrow-link__icon svg {
	width: 100%;
	height: 100%;
}

.tdc-arrow-link:hover .tdc-arrow-link__icon,
.tdc-arrow-link:focus-visible .tdc-arrow-link__icon {
	transform: translateX(4px);
}

.tdc-arrow-link--on-dark {
	color: var(--white);
}

/* ------------------------------------------------------------ round arrows
 * 60px circles: rest = the pale line colour, hover/active = taupe; white glyph in both
 * (Figma "Group 7": left = default, right = hover).
 */
.tdc-arrows {
	display: flex;
	gap: 14px;
}

.tdc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--line);
	color: var(--white);
	transition: background-color var(--btn-ease), opacity var(--btn-ease);
}

.tdc-arrow svg {
	width: 22px;
	height: 11px;
}

.tdc-arrow--prev svg {
	transform: rotate(180deg);
}

.tdc-arrow:hover,
.tdc-arrow:focus-visible {
	background: var(--taupe);
}

.tdc-arrow:disabled,
.tdc-arrow[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
}

.tdc-arrow:disabled:hover {
	background: var(--line);
}

@media (max-width: 600px) {
	.tdc-arrow {
		width: 48px;
		height: 48px;
	}
}

/* ------------------------------------------------------------------ forms
 * Fields are 73px white (or field-cream) bars with no border and square corners; the label is
 * visible above the field for accessibility and the design's in-field wording is the placeholder.
 * Submit bars are full-width 64px taupe (or cream) bars.
 */
.tdc-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 19px 23px;
}

.tdc-form__field {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tdc-form__field--half {
	grid-column: span 1;
}

.tdc-form__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--taupe);
}

.tdc-form__control {
	width: 100%;
	min-height: 73px;
	padding: 24px 33px 22px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--white);
	color: var(--heading);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	outline: 0;
	transition: border-color var(--btn-ease), box-shadow var(--btn-ease);
	-webkit-appearance: none;
	appearance: none;
}

.tdc-form__control::placeholder {
	color: var(--taupe);
	opacity: 1;
}

.tdc-form__control:hover {
	border-color: var(--line);
}

.tdc-form__control:focus {
	border-color: var(--taupe);
	box-shadow: 0 0 0 3px rgb(var(--taupe-rgb) / 0.18);
}

.tdc-form__control[aria-invalid="true"] {
	border-color: #b4553f;
}

select.tdc-form__control {
	padding-right: 60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23847c70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 28px center;
	background-size: 18px 18px;
	cursor: pointer;
}

select.tdc-form__control:has(option[value=""]:checked) {
	color: var(--taupe);
}

textarea.tdc-form__control {
	min-height: 175px;
	resize: vertical;
}

.tdc-form__control--cream {
	background: #faf8f4;
}

.tdc-form__error {
	font-size: 14px;
	line-height: 1.4;
	color: #a24a35;
}

.tdc-form__submit {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
	margin-top: 0;
	padding: 20px 24px 18px;
	border: 0;
	border-radius: 0;
	background: var(--taupe);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color var(--btn-ease), color var(--btn-ease);
}

.tdc-form__submit:hover,
.tdc-form__submit:focus-visible {
	background: var(--charcoal);
	color: var(--white);
}

.tdc-form__submit--cream {
	background: var(--cream-2);
	color: var(--taupe);
}

.tdc-form__submit--cream:hover,
.tdc-form__submit--cream:focus-visible {
	background: var(--white);
	color: var(--taupe);
}

.tdc-form__submit[aria-busy="true"] {
	opacity: 0.7;
	cursor: progress;
}

.tdc-form__status {
	grid-column: 1 / -1;
	padding: 14px 18px;
	border: 1px solid #e6c8bf;
	background: #fbf1ee;
	color: #8a3b29;
	font-size: 15px;
	line-height: 1.4;
}

.tdc-form__consent {
	grid-column: 1 / -1;
	font-size: 13px;
	line-height: 1.45;
	color: var(--taupe);
}

.tdc-form__consent a {
	color: var(--heading);
	text-underline-offset: 2px;
}

.tdc-form__success {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	background: var(--white);
	color: var(--heading);
}

.tdc-form__success:focus {
	outline: none;
}

.tdc-form__success-title {
	font-family: var(--font-heading);
	font-size: clamp(24px, 1.74vw, 30px);
	font-weight: 400;
	line-height: 1.2;
}

.tdc-form__success-text {
	font-size: 17px;
	line-height: 1.45;
	color: #6f6a64;
}

/* The honeypot: out of sight, never tabbable. */
.tdc-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A two-step form: one step shows at a time (with scripts); without them both show in order. */
.tdc-form__step[hidden] {
	display: none;
}

.tdc-form__step-head {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
}

.tdc-form__step-title {
	font-family: var(--font-body);
	font-size: clamp(22px, 1.5vw, 26px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--heading);
	text-align: center;
	width: 100%;
}

.tdc-form__back {
	font-size: 15px;
	font-weight: 600;
	color: var(--taupe);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.tdc-form {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.tdc-form__field--half {
		grid-column: 1 / -1;
	}

	.tdc-form__control {
		min-height: 60px;
		padding: 18px 20px 16px;
		font-size: 16px;
	}

	select.tdc-form__control {
		background-position: right 18px center;
	}
}

/* ------------------------------------------------------- frosted smiles card
 * 240 × 300, cream at 35% with a 9.7px blur behind it, radius 30; the thumbnail 213 × 161 radius 20
 * with the play ring near its bottom-right corner. On hover (the brief) it becomes a solid, readable
 * surface. When the video is opened the same card grows into a 16:9 player (85-video.js).
 */
.tdc-smiles {
	position: absolute;
	right: clamp(16px, 4.3vw, 74px);
	bottom: clamp(24px, 4vw, 70px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: 240px;
	padding: 16px 13px 26px;
	border-radius: var(--r-frost);
	background: rgb(var(--cream-rgb) / 0.35);
	color: var(--white);
	-webkit-backdrop-filter: blur(9.7px);
	backdrop-filter: blur(9.7px);
	transition: background-color 220ms var(--ease), color 220ms var(--ease), width 320ms var(--ease);
}

.tdc-smiles:hover,
.tdc-smiles:focus-within {
	background: var(--white);
	color: var(--taupe);
}

.tdc-smiles__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 213 / 161;
	overflow: hidden;
	border-radius: var(--r-soft);
	background: var(--charcoal);
}

.tdc-smiles__thumb .tdc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-smiles__play {
	position: absolute;
	right: 15px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -7px;
	color: var(--white);
	transition: transform 200ms var(--ease);
}

.tdc-smiles__play svg {
	width: 30px;
	height: 30px;
}

.tdc-smiles__thumb:hover .tdc-smiles__play,
.tdc-smiles__thumb:focus-visible .tdc-smiles__play {
	transform: scale(1.08);
}

.tdc-smiles__eyebrow {
	margin: 17px 7px 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
}

.tdc-smiles__title {
	margin: 3px 7px 0;
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
}

.tdc-smiles__link {
	margin: 10px 7px 0;
	color: inherit;
}

/* Open: the card grows to a 16:9 player; the words beneath are hidden. */
.tdc-smiles.is-open {
	width: min(640px, calc(100vw - 32px));
	padding: 13px;
	background: var(--white);
	color: var(--taupe);
}

.tdc-smiles.is-open .tdc-smiles__thumb {
	aspect-ratio: 16 / 9;
	border-radius: var(--r-soft);
	background: #000;
}

.tdc-smiles.is-open .tdc-smiles__eyebrow,
.tdc-smiles.is-open .tdc-smiles__title,
.tdc-smiles.is-open .tdc-smiles__link,
.tdc-smiles.is-open .tdc-smiles__play {
	display: none;
}

.tdc-smiles__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tdc-smiles__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--taupe);
	color: var(--white);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
}

.tdc-smiles__close svg {
	width: 18px;
	height: 18px;
}

.tdc-smiles__pending {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	padding: 20px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: var(--white);
	background: var(--charcoal);
}

@media (max-width: 900px) {
	.tdc-smiles {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 320px;
		margin-top: 28px;
	}
}

/* On mobile the tile sits further below the hero's buttons, and everything in it is centred on the
 * tile — the small line, the title and "Get Directions" alike. */
@media (max-width: 767px) {
	.tdc-smiles {
		margin-top: 48px;
		align-items: center;
		text-align: center;
	}

	.tdc-smiles__eyebrow,
	.tdc-smiles__title {
		margin-inline: 0;
	}

	.tdc-smiles__link {
		align-self: center;
		margin-inline: 0;
	}
}

@media (max-width: 900px) {

	.tdc-smiles.is-open {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------- arch photos
 * A rectangle with one semicircular end; the photo fills it and keeps its focal point.
 */
.tdc-arch {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--taupe);
}

.tdc-arch--right {
	border-radius: 0 999px 999px 0;
}

.tdc-arch--bottom {
	border-radius: 0 0 999px 999px;
}

.tdc-arch--bottom-r {
	border-radius: 0 0 999px 999px / 0 0 50% 50%;
}

.tdc-arch .tdc-img,
.tdc-arch__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-arch--empty {
	background: var(--cream);
}

/* ------------------------------------------------------ reviews placeholder
 * Local copy only: three outlined cards in the review card's geometry, each saying plainly what
 * belongs there. Never drawn on a live site.
 */
.tdc-reviews-block {
	width: 100%;
}

.tdc-reviews-block--placeholder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 19px;
}

.tdc-review-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 320px;
	padding: 42px 37px 36px;
	border: 1px dashed rgb(var(--taupe-rgb) / 0.5);
	border-radius: var(--r-review);
	background: var(--card-2);
}

.tdc-review-placeholder__stars {
	display: flex;
	gap: 9px;
}

.tdc-review-placeholder__stars span {
	width: 25px;
	height: 25px;
	background: var(--line);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.tdc-review-placeholder__lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tdc-review-placeholder__lines span {
	height: 12px;
	border-radius: 6px;
	background: var(--cream);
}

.tdc-review-placeholder__lines span:nth-child(2) {
	width: 85%;
}

.tdc-review-placeholder__lines span:nth-child(3) {
	width: 60%;
}

.tdc-review-placeholder__label {
	margin-top: auto;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--taupe);
}

.tdc-reviews-block__pending {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 259px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-review);
	background: var(--card-2);
	text-align: center;
	color: var(--heading);
}

.tdc-reviews-block__pending p {
	max-width: 48ch;
	font-size: 17px;
	line-height: 1.5;
}

.tdc-reviews-block__loading,
.tdc-reviews-block__failed {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-review);
	background: var(--card-2);
	color: var(--heading);
	font-size: 15px;
	text-align: center;
}

.tdc-reviews-block__widget {
	width: 100%;
	min-height: 120px;
}

@media (max-width: 1023px) {
	.tdc-reviews-block--placeholder {
		grid-template-columns: repeat(2, 1fr);
	}

	.tdc-review-placeholder:nth-child(n + 3) {
		display: none;
	}
}

@media (max-width: 600px) {
	.tdc-reviews-block--placeholder {
		grid-template-columns: 1fr;
	}

	.tdc-review-placeholder:nth-child(n + 2) {
		display: none;
	}
}

/* ---------------------------------------------------------------- map tile
 * The consent-gated Google map: 671 × 394 on the canvas (ratio 1.705), square corners.
 */
.tdc-map {
	position: relative;
	width: 100%;
	aspect-ratio: 671 / 394;
	overflow: hidden;
	background: var(--cream);
}

.tdc-map__pending {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	color: var(--heading);
}

.tdc-map__pending-where {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tdc-map__pending-name {
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1.2;
}

.tdc-map__pending-address {
	font-size: 15px;
	color: var(--taupe);
}

.tdc-map__pending-text {
	max-width: 36ch;
	font-size: 14px;
	line-height: 1.4;
	color: var(--taupe);
}

.tdc-map__pending-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--heading);
	text-underline-offset: 3px;
}

.tdc-map__failed {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	color: var(--heading);
}

.tdc-map__frame,
.tdc-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------- sticky category bar
 * 73px cream bar under the hero; Ibrand 20px links 80px apart, centred. Sticks to the top of the
 * viewport while its section scrolls (90-subnav.js adds .is-stuck and a placeholder keeps the
 * page from jumping). On narrow screens the links scroll sideways in one row.
 */
.tdc-subnav {
	position: relative;
	z-index: 20;
	background: var(--cream);
}

.tdc-subnav.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 6px 20px rgb(var(--charcoal-rgb) / 0.08);
}

.tdc-subnav__placeholder {
	display: none;
}

.tdc-subnav__placeholder.is-active {
	display: block;
}

.tdc-subnav__list {
	display: flex;
	justify-content: center;
	gap: clamp(8px, 3vw, 52px);
	padding: 14px var(--gutter-wide);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tdc-subnav__list::-webkit-scrollbar {
	display: none;
}

/* Each link is a soft rounded tint on hover, focus and for the category in view (73px bar). */
.tdc-subnav__link {
	position: relative;
	display: block;
	padding: 12px 14px 10px;
	border-radius: 8px;
	font-family: var(--font-heading);
	font-size: clamp(16px, 1.16vw, 20px);
	letter-spacing: 0.01em;
	line-height: 1.15;
	color: var(--heading);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--btn-ease), background-color var(--btn-ease);
}

.tdc-subnav__link:hover,
.tdc-subnav__link:focus-visible {
	background: rgb(var(--taupe-rgb) / 0.1);
	color: var(--charcoal);
}

.tdc-subnav__link[aria-current="true"] {
	background: rgb(var(--taupe-rgb) / 0.14);
	color: var(--charcoal);
}

.tdc-subnav__link:focus-visible {
	outline-offset: 0;
}

@media (max-width: 900px) {
	.tdc-subnav__list {
		justify-content: flex-start;
		padding: 10px var(--gutter);
	}
}

/* ------------------------------------------------------- generic carousel
 * A track moved by transform; the viewport clips it (55-carousel.js).
 */
.tdc-carousel {
	position: relative;
}

.tdc-carousel__viewport {
	overflow: hidden;
	/* Vertical drags still scroll the page; sideways drags reach the swipe handler instead of being
	 * cancelled by the browser on touch screens. */
	touch-action: pan-y;
}

.tdc-carousel__viewport:focus-visible {
	outline-offset: 6px;
}

.tdc-carousel__track {
	display: flex;
	transform: translate3d(var(--tdc-carousel-x, 0), 0, 0);
	transition: transform 520ms var(--ease);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.tdc-carousel__track,
	.tdc-arrow-link__icon,
	.tdc-smiles {
		transition: none;
	}
}

/* Indicators: a small dot per photograph; the one in view grows into a rounded pill. */
.tdc-dots {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.tdc-dots__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
}

.tdc-dots__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--line);
	transition: width 280ms var(--ease), background-color var(--btn-ease);
}

.tdc-dots__dot:hover::before,
.tdc-dots__dot:focus-visible::before {
	background: var(--taupe);
}

.tdc-dots__dot[aria-current="true"]::before {
	width: 28px;
	background: var(--taupe);
}

.tdc-dots__dot:focus-visible {
	outline-offset: -2px;
	border-radius: 999px;
}

/* A button drawn but not live (a treatment with no page linked yet). */
.tdc-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ------------------------------------------------------------ odds and ends */
/* The marked empty frame that stands in for a photo until it is uploaded. */
.tdc-photo-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: var(--cream);
	color: var(--taupe);
}

.tdc-photo-empty--dark {
	background: var(--charcoal);
	color: var(--cream);
}

.tdc-photo-empty__label {
	padding: 6px 10px;
	border: 1px dashed currentColor;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.tdc-social--lg {
	width: 38px;
	height: 38px;
}

.tdc-social--lg svg {
	width: 20px;
	height: 20px;
}

.tdc-eyebrow--heading {
	color: var(--heading);
}

@media (max-width: 767px) {
	.tdc-form__success-text,
	.tdc-reviews-block__pending p {
		font-size: 16px;
	}
}


/* ==== 20-header.css ==== */
/**
 * The top bar and the header (Figma "Header", 1728 × 123): a 35px cream strip with small
 * uppercase links each side, then an 88px white bar — logo at 29px, the menu 112px after it, the
 * two header buttons and the phone number at the right — with a hairline under each bar.
 */
.tdc-topbar {
	background: var(--cream);
	border-bottom: 1px solid rgb(0 0 0 / 0.1);
}

.tdc-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 35px;
	padding: 0 32px 0 29px;
}

.tdc-topbar__list {
	display: flex;
	align-items: center;
	gap: 0;
}

/* Each item keeps its dot and its link on one line. */
.tdc-topbar__list li {
	display: flex;
	align-items: center;
	flex: none;
}

.tdc-topbar__list li + li::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 25px;
	border-radius: 50%;
	background: var(--taupe);
	vertical-align: middle;
}

/* 13px: the bar's small uppercase line (it was 14px in the design, and 16px for one pass). The
 * padding keeps a 34px target in the 35px bar. At this size the brand taupe on cream (3.6:1) is
 * below the 4.5:1 small text needs, so the words take the deeper taupe (5.1:1). */
.tdc-topbar__link {
	display: inline-block;
	padding: 10px 0 9px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--taupe-deep);
	text-decoration: none;
	transition: color var(--btn-ease);
}

.tdc-topbar__link:hover,
.tdc-topbar__link:focus-visible {
	color: var(--charcoal);
}

.tdc-header {
	position: relative;
	z-index: 30;
	background: var(--white);
	border-bottom: 1px solid rgb(0 0 0 / 0.1);
}

.tdc-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(24px, 6.5vw, 112px);
	min-height: 88px;
	padding: 11px 43px 11px 29px;
}

.tdc-header__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.tdc-header__logo-img {
	display: block;
	height: 66px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

.tdc-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.tdc-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px clamp(18px, 2.15vw, 37px);
}

/* A menu link: a soft rounded tint appears behind the words on hover and focus, and stays behind
 * the page being viewed. The tint extends 12px either side of the words without moving them. */
.tdc-nav__link {
	position: relative;
	display: inline-block;
	margin-inline: -12px;
	padding: 10px 12px 9px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--taupe);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--btn-ease), background-color var(--btn-ease);
}

.tdc-nav__link:hover,
.tdc-nav__link:focus-visible {
	background: rgb(var(--taupe-rgb) / 0.09);
	color: var(--charcoal);
}

.tdc-nav__link[aria-current="page"] {
	background: rgb(var(--taupe-rgb) / 0.13);
	color: var(--charcoal);
}

.tdc-nav__link:focus-visible {
	outline-offset: 0;
}

.tdc-header__actions {
	display: flex;
	align-items: center;
	flex: none;
	gap: 9px;
	margin-left: auto;
}

.tdc-header__btn {
	min-height: 47px;
	padding: 13px 16px 11px;
	font-size: 16px;
}

.tdc-header__btn--1 {
	border-color: var(--taupe);
	color: var(--taupe);
}

.tdc-header__btn--2 {
	background: var(--taupe);
	border-color: var(--taupe);
	color: var(--white);
}

.tdc-header__btn--2:hover,
.tdc-header__btn--2:focus-visible {
	background: var(--taupe-deep);
	border-color: var(--taupe-deep);
}

.tdc-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-left: 24px;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--taupe);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--btn-ease);
}

.tdc-header__phone:hover,
.tdc-header__phone:focus-visible {
	color: var(--charcoal);
}

.tdc-header__phone-icon {
	display: block;
	width: 18px;
	height: 18px;
	color: #c4b6a0;
}

.tdc-header__phone-icon svg {
	width: 100%;
	height: 100%;
}

.tdc-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--taupe);
}

.tdc-burger__icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.tdc-burger__icon span {
	display: block;
	height: 2px;
	background: currentColor;
}

/* ------------------------------------------------------------- narrow screens
 * The compact phone: the icon in a 47px square, the number kept in the link's accessible name. The
 * header switches to it below 1400px: with the number showing, the menu runs out of room at about
 * 1338px ("Reviews" wrapped), and the switch is made with room to spare for font rendering and
 * label changes. The sticky bar always uses it. Below 1100px the burger takes over the menu. */
.tdc-header__phone--compact {
	width: 42px;
	height: 42px;
	justify-content: center;
	margin: 0;
	border: 1px solid var(--taupe);
}

.tdc-header__phone--compact .tdc-header__phone-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tdc-header__phone--compact .tdc-header__phone-icon {
	color: var(--taupe);
}

@media (max-width: 1399px) {
	.tdc-header__phone {
		width: 47px;
		height: 47px;
		justify-content: center;
		margin: 0;
		border: 1px solid var(--taupe);
	}

	.tdc-header__phone-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.tdc-header__phone-icon {
		color: var(--taupe);
	}

	.tdc-sticky .tdc-header__phone {
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 1280px) {
	.tdc-header__inner {
		gap: 32px;
	}
}

@media (max-width: 1100px) {
	.tdc-nav,
	.tdc-header__btn--1 {
		display: none;
	}

	.tdc-burger {
		display: inline-flex;
	}
}

/* Below 900px the top bar keeps For Patients and For Professionals, centred, and the other three
 * move into the phone menu (Useful Links). On a phone the links grow to a 38px tap height. */
.tdc-topbar__link {
	white-space: nowrap;
}

@media (max-width: 900px) {
	.tdc-topbar__list--right {
		display: none;
	}

	.tdc-topbar__inner {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.tdc-topbar__inner {
		padding: 0 15px;
	}

	.tdc-topbar__list li + li::before {
		margin: 0 14px;
	}

	.tdc-topbar__link {
		padding: 12px 0 11px;
	}
}

/* Under 360px the pair needs a little less tracking to share one line. */
@media (max-width: 359px) {
	.tdc-topbar__list li + li::before {
		margin: 0 10px;
	}

	.tdc-topbar__link {
		letter-spacing: 0.06em;
	}
}

@media (max-width: 600px) {

	.tdc-header__inner {
		min-height: 72px;
		padding: 8px var(--gutter-phone);
		gap: 16px;
	}

	.tdc-header__logo-img {
		height: 52px;
	}

	.tdc-header__btn--2 {
		min-height: 42px;
		padding: 11px 14px 9px;
		font-size: 15px;
	}

	.tdc-header__phone,
	.tdc-sticky .tdc-header__phone {
		width: 42px;
		height: 42px;
	}
}

/* ------------------------------------------------------------- sticky bar
 * The compact bar (05-header.js): fixed to the top, slid out of view until the header has gone,
 * then slid down over a translucent, blurred surface. Under the admin bar when there is one.
 */
.tdc-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: rgb(255 255 255 / 0.74);
	border-bottom: 1px solid rgb(0 0 0 / 0.08);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 280ms var(--ease), opacity 280ms var(--ease), visibility 0s linear 280ms;
}

.tdc-sticky.is-shown {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.admin-bar .tdc-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.tdc-sticky__inner {
	display: flex;
	align-items: center;
	gap: clamp(20px, 4vw, 72px);
	min-height: 64px;
	padding: 8px 32px 8px 29px;
}

.tdc-sticky__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.tdc-sticky__logo-img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

.tdc-sticky__actions .tdc-header__btn {
	min-height: 42px;
	padding: 11px 14px 9px;
	font-size: 15px;
}

@media (max-width: 1100px) {
	.tdc-sticky__actions .tdc-header__btn--1 {
		display: none;
	}
}

@media (max-width: 600px) {
	.tdc-sticky__inner {
		min-height: 56px;
		padding: 6px var(--gutter-phone);
		gap: 16px;
	}

	.tdc-sticky__logo-img {
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdc-sticky {
		transition: none;
	}
}

/* ------------------------------------------------------------ phone menu */
.tdc-menu {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	flex-direction: column;
	padding: 8px 20px 24px;
	background: var(--white);
	color: var(--heading);
	transform: translateX(100%);
	transition: transform 260ms var(--ease);
	overflow-y: auto;
}

.tdc-menu.is-open {
	transform: none;
}

html.tdc-menu-open,
html.tdc-dialog-open {
	overflow: hidden;
}

.tdc-menu__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
}

.tdc-menu__logo {
	display: block;
	flex: none;
	line-height: 0;
}

/* The stamp is drawn large enough for "The Dental Centre" around it to be read: 40% of the screen
 * width, 128px on a 320px phone up to 172px (the footer stamp's size), in its own proportions. The
 * close button keeps its 44px circle at the top right. */
.tdc-menu__logo-img {
	display: block;
	height: clamp(128px, 40vw, 172px);
	width: auto;
	max-width: none;
	object-fit: contain;
}

.tdc-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cream);
	color: var(--taupe);
}

.tdc-menu__close svg {
	width: 20px;
	height: 20px;
}

.tdc-menu__nav {
	flex: 1;
	padding: 24px 0;
}

.tdc-menu__list {
	display: flex;
	flex-direction: column;
}

/* Each link is a rounded block: a soft tint under the pointer or the keyboard focus, a deeper one
 * while pressed (so a tap shows on touch screens, where there is no hover), and the page being
 * viewed keeps a tint of its own. The words stay where they were; the tint extends 10px past them. */
.tdc-menu__list li {
	border-bottom: 1px solid var(--line);
	padding: 3px 0;
}

.tdc-menu__link,
.tdc-menu__small-link {
	display: block;
	margin: 0 -10px;
	border-radius: 8px;
	color: var(--heading);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--btn-ease), color var(--btn-ease);
}

.tdc-menu__link {
	padding: 14px;
	font-family: var(--font-heading);
	font-size: 28px;
	line-height: 1.2;
}

@media (hover: hover) {
	.tdc-menu__link:hover,
	.tdc-menu__small-link:hover {
		background: rgb(var(--taupe-rgb) / 0.08);
		color: var(--charcoal);
	}
}

.tdc-menu__link:focus-visible,
.tdc-menu__small-link:focus-visible {
	background: rgb(var(--taupe-rgb) / 0.08);
	color: var(--charcoal);
	outline: 2px solid var(--taupe);
	outline-offset: 0;
}

.tdc-menu__link:active,
.tdc-menu__small-link:active {
	background: rgb(var(--taupe-rgb) / 0.18);
	color: var(--charcoal);
}

.tdc-menu__link[aria-current="page"] {
	background: rgb(var(--taupe-rgb) / 0.12);
	color: var(--taupe);
}

/* The top-bar links, grouped under a small heading on a soft cream panel. */
.tdc-menu__group {
	margin-top: 24px;
	padding: 16px 20px 12px;
	border-radius: 8px;
	background: rgb(var(--cream-rgb) / 0.7);
}

.tdc-menu__group-title {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--taupe);
}

.tdc-menu__small {
	display: flex;
	flex-direction: column;
}

.tdc-menu__small-link {
	padding: 10px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.tdc-menu__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tdc-menu__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	font-size: 22px;
	color: var(--taupe);
	text-decoration: none;
}

.tdc-menu__phone svg {
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.tdc-menu,
	.tdc-menu__link,
	.tdc-menu__small-link {
		transition: none;
	}
}


/* ==== 30-footer.css ==== */
/**
 * The footer (Figma "Group 126"): a 25% cream panel (effectively #fcfbf9) on a 20px margin, four
 * columns divided by 19% taupe hairlines, Ibrand 25px headings, 19px Josefin links on a 38px
 * pitch, the email/phone pills (taupe circle + text; the pill tint is the hover), the stamp mark
 * and the social circles, then the copyright row on white.
 */
.tdc-footer {
	padding: 0 20px 24px;
	color: var(--body);
}

.tdc-footer__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 45px clamp(24px, 7.9vw, 136px) 40px;
	background: rgb(var(--cream-rgb) / 0.25);
}

.tdc-footer__columns {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 32px;
}

.tdc-footer__col {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.tdc-footer__col + .tdc-footer__col {
	padding-left: clamp(24px, 4.5vw, 78px);
}

.tdc-footer__col + .tdc-footer__col::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgb(var(--heading-rgb) / 0.19);
}

.tdc-footer__heading {
	font-family: var(--font-heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--title);
	max-width: 253px;
}

.tdc-footer__subheading {
	margin-top: 12px;
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--title);
}

.tdc-footer__address {
	font-size: 19px;
	line-height: 1.58;
	color: var(--body);
	max-width: 240px;
}

.tdc-footer__directions {
	margin-top: 2px;
}

.tdc-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: -6px;
}

.tdc-footer__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 2px 16px 2px 2px;
	border-radius: 999px;
	color: var(--body);
	font-size: 19px;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color var(--btn-ease), color var(--btn-ease);
}

.tdc-footer__pill:hover,
.tdc-footer__pill:focus-visible {
	background: rgb(var(--taupe-rgb) / 0.08);
	color: var(--heading);
}

.tdc-footer__pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: var(--taupe);
	color: var(--card-2);
}

.tdc-footer__pill-icon svg {
	width: 17px;
	height: 17px;
}

.tdc-footer__pill-text {
	overflow-wrap: anywhere;
}

.tdc-footer__links {
	display: flex;
	gap: 20px;
}

.tdc-footer__list {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}

.tdc-footer__link {
	display: inline-block;
	padding: 6px 10px;
	margin-left: -10px;
	border-radius: 999px;
	font-size: 19px;
	line-height: 1.37;
	color: var(--body);
	text-decoration: none;
	transition: background-color var(--btn-ease), color var(--btn-ease);
}

.tdc-footer__link:hover,
.tdc-footer__link:focus-visible {
	background: rgb(var(--taupe-rgb) / 0.08);
	color: var(--heading);
}

.tdc-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: 8px;
}

.tdc-footer__stamp {
	display: block;
	line-height: 0;
}

.tdc-footer__stamp-img {
	display: block;
	width: auto;
	height: 172px;
	max-width: 200px;
	object-fit: contain;
}

.tdc-footer__social {
	display: flex;
	gap: 7px;
	padding-bottom: 8px;
}

.tdc-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: var(--taupe);
	border: 1px solid var(--taupe);
	color: var(--card-2);
	transition: background-color var(--btn-ease), color var(--btn-ease);
}

.tdc-social svg {
	width: 17px;
	height: 17px;
}

.tdc-social:hover,
.tdc-social:focus-visible {
	background: var(--card-2);
	color: var(--taupe);
}

.tdc-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 14px 13px 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
}

/* The legal list is fine print: 15px on a 32px pitch. */
.tdc-footer__col--legal .tdc-footer__link {
	font-size: 15px;
	line-height: 1.4;
	padding: 5px 10px;
}

.tdc-footer__credit a,
.tdc-footer__credit strong {
	font-weight: 700;
	color: var(--taupe);
}

.tdc-footer__credit a {
	text-underline-offset: 3px;
}

@media (max-width: 1200px) {
	.tdc-footer__columns {
		grid-template-columns: 1fr 1fr;
		gap: 40px 32px;
	}

	.tdc-footer__col:nth-child(3) {
		padding-left: 0;
	}

	.tdc-footer__col:nth-child(3)::before {
		display: none;
	}
}

/* Phones: one centred column — the two practices, then Useful Links and Legal Information folded
 * under their headings (95-footer.js), the stamp drawn larger, the social circles and the fine
 * print, all on the centre line, with a hairline between the groups. Fine print stays 15px. */
@media (max-width: 700px) {
	.tdc-footer {
		padding: 0 0 20px;
	}

	.tdc-footer__panel {
		gap: 20px;
		padding: 36px var(--gutter-phone) 32px;
		text-align: center;
	}

	.tdc-footer__columns {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.tdc-footer__col {
		align-items: center;
		padding: 28px 0;
	}

	.tdc-footer__col:first-child {
		padding-top: 0;
	}

	.tdc-footer__col + .tdc-footer__col {
		padding-left: 0;
	}

	.tdc-footer__col + .tdc-footer__col::before {
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}

	.tdc-footer__heading {
		max-width: none;
	}

	.tdc-footer__address {
		margin-inline: auto;
	}

	.tdc-footer__contact {
		align-items: center;
	}

	.tdc-footer__links {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.tdc-footer__list {
		flex: none;
		align-items: center;
	}

	.tdc-footer__link {
		margin-left: 0;
	}

	/* A folded group is one row: its heading as a full-width button with a chevron; open, its links
	 * follow, centred. The last row closes with a hairline of its own. */
	.tdc-footer__col.is-folded {
		gap: 0;
		padding-block: 10px;
	}

	.tdc-footer__col.is-folded:last-child {
		border-bottom: 1px solid rgb(var(--heading-rgb) / 0.19);
	}

	.tdc-footer__col.is-folded .tdc-footer__heading {
		width: 100%;
	}

	.tdc-footer__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		min-height: 48px;
		padding: 4px 12px;
		border: 0;
		border-radius: 8px;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color var(--btn-ease);
	}

	.tdc-footer__toggle:focus-visible {
		outline: 2px solid var(--taupe);
		outline-offset: 0;
	}

	.tdc-footer__toggle:active {
		background: rgb(var(--taupe-rgb) / 0.12);
	}

	.tdc-footer__toggle-icon {
		flex: none;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform var(--btn-ease);
	}

	.tdc-footer__toggle[aria-expanded="true"] .tdc-footer__toggle-icon {
		transform: translateY(2px) rotate(-135deg);
	}

	.tdc-footer__col.is-open .tdc-footer__links {
		padding: 6px 0 10px;
	}

	.tdc-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		margin-top: 8px;
	}

	.tdc-footer__stamp-img {
		height: clamp(160px, 50vw, 200px);
		max-width: none;
	}

	.tdc-footer__social {
		justify-content: center;
		padding-bottom: 0;
	}

	.tdc-footer__bar {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		text-align: center;
		padding-inline: var(--gutter-phone);
	}
}

@media (max-width: 700px) and (hover: hover) {
	.tdc-footer__toggle:hover {
		background: rgb(var(--taupe-rgb) / 0.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdc-footer__toggle,
	.tdc-footer__toggle-icon {
		transition: none;
	}
}


/* ==== 40-motion.css ==== */
/**
 * Motion: entrances. An IntersectionObserver (40-motion.js) adds .is-in as an element scrolls into
 * view; CSS transitions do the rest, on opacity and a small rise only. Nothing is hidden unless the
 * motion is going to run: every "start hidden" rule hangs off html.tdc-motion, which the inline
 * script in <head> adds only when JavaScript runs, scrolling can be observed and reduced motion is
 * not asked for — and takes away again if the main script never starts.
 *
 *   data-tdc-reveal          fades up into place, once
 *   data-tdc-reveal="fade"   fades without moving
 *   --tdc-i                  a stagger index (80ms steps) for items in a row
 */
html.tdc-motion [data-tdc-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 640ms var(--ease), transform 640ms var(--ease);
	transition-delay: calc(var(--tdc-base, 0ms) + var(--tdc-i, 0) * 80ms);
	will-change: opacity, transform;
}

html.tdc-motion [data-tdc-reveal="fade"] {
	transform: none;
}

html.tdc-motion [data-tdc-reveal].is-in {
	opacity: 1;
	transform: none;
}

.tdc-hero__lead,
.tdc-about__text,
.tdc-intro__lead {
	--tdc-base: 160ms;
}

.tdc-hero__ctas,
.tdc-about__ctas,
.tdc-intro__text {
	--tdc-base: 280ms;
}

@media (prefers-reduced-motion: reduce) {
	html.tdc-motion [data-tdc-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* ==== 50-consent.css ==== */
/**
 * The cookie settings window (template-parts/global/consent.php).
 *
 * A large white dialog centred over a dark, translucent backdrop: a row of three tabs behind a
 * hairline with a leaf underline on the one that is open, generous type, a scrolling body and three
 * full-size buttons along the bottom. Drawn with the site's own colours, type, radii and buttons.
 *
 * The dialog is never taller than the screen: its head and its buttons stay put and the body
 * between them scrolls, so the actions are always reachable — on a 320px phone as on a desktop.
 */
.tdc-cc {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	/* On a phone the window sits at the foot of the screen and grows upwards, so its buttons stay
	 * in one place under the thumb whichever tab is open. From 600px it is centred. */
	place-items: end center;
	padding: 16px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.tdc-cc[hidden] {
	display: none;
}

.tdc-cc__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(66 61 57 / 0.6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.tdc-cc__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: 100%;
	overflow: hidden;
	border-radius: 0;
	background: var(--white);
	box-shadow: 0 32px 80px rgb(66 61 57 / 0.3);
	color: var(--ink);
}

/* Focus lands on the dialog itself when it opens, so it is announced; it is not a control and
 * shows no ring of its own. */
.tdc-cc__dialog:focus {
	outline: none;
}

/* Arriving: a short fade and rise. Skipped entirely when reduced motion is asked for. */
@media (prefers-reduced-motion: no-preference) {
	.tdc-cc.is-opening .tdc-cc__backdrop {
		animation: tdc-cc-fade 220ms ease both;
	}

	.tdc-cc.is-opening .tdc-cc__dialog {
		animation: tdc-cc-rise 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
}

@keyframes tdc-cc-fade {
	from {
		opacity: 0;
	}
}

@keyframes tdc-cc-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}
}

/* The page behind cannot scroll while the window is open. */
html.tdc-cc-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------- tabs */
.tdc-cc__head {
	position: relative;
	display: flex;
	flex: none;
	align-items: stretch;
	border-bottom: 1px solid var(--line);
}

.tdc-cc__tabs {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.tdc-cc__tab {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 60px;
	padding: 12px 8px;
	border: 0;
	background: none;
	color: var(--ink-muted);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: color 200ms ease;
}

.tdc-cc__tab::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	background: var(--leaf);
	opacity: 0;
	transition: opacity 200ms ease;
}

.tdc-cc__tab:hover {
	color: var(--navy);
}

.tdc-cc__tab[aria-selected="true"] {
	color: var(--navy);
}

.tdc-cc__tab[aria-selected="true"]::after {
	opacity: 1;
}

/* The ring sits inside the tab, so the dialog's rounded corner never clips it. */
.tdc-cc__tab:focus-visible {
	outline: 3px solid var(--focus-halo);
	outline-offset: -5px;
	box-shadow: inset 0 0 0 2px var(--focus-line);
}

.tdc-cc__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--line);
	background: none;
	color: var(--navy);
	cursor: pointer;
}

.tdc-cc__close[hidden] {
	display: none;
}

.tdc-cc__close svg {
	width: 22px;
	height: 22px;
}

.tdc-cc__close:hover {
	background: var(--stone);
}

.tdc-cc__close:focus-visible {
	outline: 3px solid var(--focus-halo);
	outline-offset: -5px;
	box-shadow: inset 0 0 0 2px var(--focus-line);
}

/* ------------------------------------------------------------------- body */
/* The body scrolls when its tab is longer than the room there is. A soft shadow appears at whichever
 * edge has more to show (it is painted with the content, so it fades out at the ends). */
.tdc-cc__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(var(--white) 30%, rgb(255 255 255 / 0)) 0 0 / 100% 36px no-repeat local,
		linear-gradient(rgb(255 255 255 / 0), var(--white) 70%) 0 100% / 100% 36px no-repeat local,
		linear-gradient(rgb(var(--navy-rgb) / 0.12), rgb(var(--navy-rgb) / 0)) 0 0 / 100% 12px no-repeat scroll,
		linear-gradient(rgb(var(--navy-rgb) / 0), rgb(var(--navy-rgb) / 0.12)) 0 100% / 100% 12px no-repeat scroll,
		var(--white);
}

.tdc-cc__panel {
	padding: 24px 20px;
}

.tdc-cc__panel[hidden] {
	display: none;
}

.tdc-cc__panel:focus-visible {
	outline: 3px solid var(--focus-halo);
	outline-offset: -6px;
	box-shadow: inset 0 0 0 2px var(--focus-line);
}

.tdc-cc__title {
	margin-bottom: 14px;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: clamp(24px, 21.4px + 0.8vw, 32px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.6px;
	font-variation-settings: "wdth" 100;
}

.tdc-cc__text {
	display: grid;
	gap: 12px;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.56;
}

.tdc-cc__text a,
.tdc-cc__cat-text a {
	color: var(--navy);
	font-weight: 600;
	text-underline-offset: 3px;
}

.tdc-cc__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 4px;
}

/* -------------------------------------------------------------- categories */
.tdc-cc__cat {
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.tdc-cc__cat:first-child {
	padding-top: 0;
	border-top: 0;
}

.tdc-cc__cat:last-child {
	padding-bottom: 0;
}

.tdc-cc__cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tdc-cc__cat-name {
	min-width: 0;
	color: var(--navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.2px;
	cursor: pointer;
}

.tdc-cc__cat--locked .tdc-cc__cat-name {
	cursor: default;
}

.tdc-cc__cat-text {
	display: grid;
	gap: 6px;
	max-width: 58ch;
	padding-top: 8px;
	color: var(--ink-muted);
	font-size: 15px;
	line-height: 1.5;
}

.tdc-cc__cat-use {
	color: var(--forest);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

/* The switch: a real checkbox laid invisibly over the drawn track, so it takes the click, the tap,
 * the keyboard and the screen reader. Off = a pale track with a grey knob at the left; on = navy
 * with a leaf knob at the right — the same pairing as the chosen contact pill on the quote form. */
.tdc-cc__switch {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

.tdc-cc__always {
	color: var(--ink-muted);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.tdc-cc__input {
	position: absolute;
	top: 50%;
	right: 0;
	width: 54px;
	height: 44px; /* a full-size touch target around the 32px track */
	margin: 0;
	opacity: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

.tdc-cc__input:disabled {
	cursor: not-allowed;
}

.tdc-cc__track {
	position: relative;
	display: block;
	flex: none;
	width: 54px;
	height: 32px;
	border-radius: 999px;
	background: var(--stone-deep);
	box-shadow: inset 0 0 0 1.5px rgb(var(--navy-rgb) / 0.55);
	transition: background-color 180ms ease, box-shadow 180ms ease;
}

.tdc-cc__knob {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgb(var(--navy-rgb) / 0.6);
	transition: transform 180ms ease, background-color 180ms ease;
}

.tdc-cc__input:checked + .tdc-cc__track {
	background: var(--navy);
	box-shadow: inset 0 0 0 1.5px var(--navy);
}

.tdc-cc__input:checked + .tdc-cc__track .tdc-cc__knob {
	background: var(--leaf);
	transform: translateX(22px);
}

.tdc-cc__input:disabled + .tdc-cc__track {
	opacity: 0.55;
}

.tdc-cc__input:focus-visible + .tdc-cc__track {
	outline: 3px solid var(--focus-halo);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--focus-line);
}

/* ---------------------------------------------------------------- actions
 * Three buttons of the site's standard height. Side by side and equal in width where there is room;
 * stacked full-width on a phone, in the same order (so what you see is the order focus moves in),
 * which leaves the primary action nearest the thumb.
 */
.tdc-cc__actions {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 20px;
	border-top: 1px solid var(--line);
	background: var(--white);
}

.tdc-cc__btn {
	flex: none;
	min-width: 0;
	white-space: normal;
}

.tdc-cc__btn[hidden] {
	display: none;
}

@media (min-width: 600px) {
	.tdc-cc {
		place-items: center;
		padding: 24px;
	}

	/* One size for all three tabs, so the window does not jump as you move between them. */
	.tdc-cc__dialog {
		height: min(720px, 100%);
	}

	.tdc-cc__tab {
		min-height: 68px;
		font-size: 17px;
	}

	.tdc-cc__close {
		width: 68px;
	}

	.tdc-cc__panel {
		padding: 32px 40px;
	}

	.tdc-cc__text {
		font-size: 17px;
	}

	.tdc-cc__actions {
		flex-direction: row;
		gap: 12px;
		padding: 20px 40px 28px;
	}

	.tdc-cc__btn {
		flex: 1 1 0;
	}
}

/* A small phone: the three stacked buttons take the compact size, so more of the text shows. */
@media (max-width: 599.98px) and (max-height: 700px) {
	.tdc-cc__tab {
		min-height: 52px;
	}

	.tdc-cc__panel {
		padding-block: 18px;
	}

	.tdc-cc__actions {
		gap: 8px;
		padding-block: 12px 14px;
	}

	.tdc-cc__btn {
		padding-block: 11px;
	}
}

/* A short screen (a phone on its side): tighter, so the body still has room to scroll. */
@media (max-height: 520px) {
	.tdc-cc {
		padding: 8px;
	}

	.tdc-cc__tab {
		min-height: 48px;
	}

	.tdc-cc__panel {
		padding-block: 16px;
	}

	.tdc-cc__actions {
		flex-direction: row;
		padding-block: 10px;
	}

	.tdc-cc__btn {
		flex: 1 1 0;
		padding-block: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdc-cc__tab,
	.tdc-cc__tab::after,
	.tdc-cc__track,
	.tdc-cc__knob {
		transition: none;
	}
}

/* The buttons that open the window need the script; without it they are not offered. */
html:not(.js) .tdc-legal__choices {
	display: none;
}


/* --------------------------------------------------------------- compact
 * Amendments pass: a smaller window in the body face. Headings are not display type here; copy
 * is 16px; buttons keep a 44px target but no more.
 */
.tdc-cc__dialog {
	max-width: 560px;
	border-radius: 4px;
}

/* The window takes only the height its open tab needs (the old window held a fixed 720px so the
 * tabs would not change its size); it still never exceeds the screen and its body scrolls. */
@media (min-width: 600px) {
	.tdc-cc__dialog {
		height: auto;
		max-height: min(100%, 92vh);
	}
}

.tdc-cc__body,
.tdc-cc__panel {
	min-height: 0;
	height: auto;
}

.tdc-cc__head {
	padding: 6px 16px 0;
}

.tdc-cc__tab {
	padding: 12px 10px;
	font-size: 14px;
}

.tdc-cc__body {
	padding: 4px 24px 8px;
}

.tdc-cc__panel {
	padding: 14px 0 10px;
}

.tdc-cc__title {
	margin-bottom: 8px;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.tdc-cc__text,
.tdc-cc__text p,
.tdc-cc__cat-text,
.tdc-cc__cat-text p,
.tdc-cc__cat-use,
.tdc-cc__links {
	font-size: 16px;
	line-height: 1.5;
}

.tdc-cc__text p + p {
	margin-top: 10px;
}

.tdc-cc__cat {
	padding: 14px 0;
}

.tdc-cc__cat-name {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
}

.tdc-cc__actions {
	gap: 10px;
	padding: 12px 24px 18px;
}

.tdc-cc__btn {
	min-height: 44px;
	padding: 12px 16px 11px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
}

@media (max-width: 600px) {
	.tdc-cc__body {
		padding: 4px 18px 8px;
	}

	.tdc-cc__actions {
		padding: 10px 18px 14px;
	}
}


/* ==== 70-legal.css ==== */
/**
 * The legal pages (template-legal.php): the light hero on white, then the sections with an
 * "On this page" list beside them.
 */
.tdc-legal__hero {
	padding: clamp(56px, 5.7vw, 99px) 0 clamp(40px, 4vw, 64px);
	background: var(--cream);
	text-align: center;
}

.tdc-legal__hero .tdc-eyebrow--on-dark {
	color: var(--ink);
	letter-spacing: 0.2em;
}

.tdc-legal__title {
	margin-top: 19px;
}

.tdc-legal__updated {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--charcoal);
}

.tdc-legal__intro {
	max-width: 62ch;
	margin: 24px auto 0;
	color: #6f6a64;
}

.tdc-legal__body {
	padding: clamp(40px, 4vw, 64px) 0 96px;
}

.tdc-legal__body--toc {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.tdc-legal__toc {
	position: sticky;
	top: calc(var(--anchor-offset) + 16px);
	z-index: 1;
	transition: opacity 180ms var(--ease);
}

body.admin-bar .tdc-legal__toc {
	top: calc(var(--anchor-offset) + 16px + var(--wp-admin--admin-bar--height, 32px));
}

.tdc-legal__toc.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.tdc-legal__toc-title {
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--taupe);
}

.tdc-legal__toc-toggle {
	display: none;
}

.tdc-legal__toc-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tdc-legal__toc-link {
	display: block;
	padding: 6px 0 6px 12px;
	border-left: 2px solid transparent;
	font-size: 15px;
	font-weight: 500;
	color: #6f6a64;
	text-decoration: none;
}

.tdc-legal__toc-link[aria-current="true"],
.tdc-legal__toc-link:hover {
	border-left-color: var(--taupe);
	color: var(--heading);
}

.tdc-legal__sections {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: 760px;
}

.tdc-legal__section {
	scroll-margin-top: var(--anchor-offset);
}

.tdc-legal__heading {
	margin-bottom: 14px;
}

.tdc-legal__prose {
	font-size: 17px;
	line-height: 1.55;
	color: #6f6a64;
}

.tdc-legal__prose p,
.tdc-legal__prose ul,
.tdc-legal__prose ol {
	margin: 0 0 1em;
}

.tdc-legal__prose ul {
	list-style: disc;
	padding-left: 1.4em;
}

.tdc-legal__prose ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.tdc-legal__prose a {
	color: var(--taupe);
	overflow-wrap: anywhere;
}

.tdc-legal__choices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding: 20px 24px;
	background: var(--cream);
	color: var(--heading);
}

@media (max-width: 900px) {
	.tdc-legal__body--toc {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.tdc-legal__toc {
		position: static;
	}

	.tdc-legal__toc-title {
		display: none;
	}

	.tdc-legal__toc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 18px;
		border: 1px solid var(--line);
		font-weight: 600;
		color: var(--heading);
	}

	.tdc-legal__toc-chev svg {
		width: 18px;
		height: 18px;
		transition: transform 200ms var(--ease);
	}

	.tdc-legal__toc-toggle[aria-expanded="true"] .tdc-legal__toc-chev svg {
		transform: rotate(180deg);
	}

	.tdc-legal__toc-toggle[aria-expanded="false"] + .tdc-legal__toc-list {
		display: none;
	}

	.tdc-legal__toc-list {
		padding: 12px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdc-legal__toc,
	.tdc-legal__toc-chev svg {
		transition: none;
	}
}


/* ==== about.css ==== */
/**
 * The small about (two arch photos) and the statistics row beneath it.
 */
.tdc-container--about {
	width: min(100% - 2 * var(--gutter-about), 1441px);
}

.tdc-about {
	padding-bottom: 78px;
}

/* The three columns and the gaps between them scale together with the screen (330 / 497 / 453 on
 * the 1728 canvas), so the heading wraps the same way at every desktop width. */
.tdc-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 330fr) minmax(0, 497fr) minmax(0, 453fr);
	column-gap: clamp(24px, 4.63vw, 80px);
	align-items: start;
}

.tdc-about__arch--small {
	aspect-ratio: 330 / 266;
}

.tdc-about__arch--tall {
	margin-top: 8px;
	aspect-ratio: 453 / 532;
}

.tdc-about__arch-frame {
	display: block;
	width: 100%;
	height: 100%;
}

.tdc-about__copy {
	padding-top: 11px;
}

/* Ibrand sets a little wider in the browser than in Figma: the heading keeps the approved four
 * lines by running 24px into the gap beside it (the gap is 80px) at a size a touch under Figma's 63. */
.tdc-about__title {
	width: calc(100% + 24px);
	max-width: none;
	font-size: clamp(36px, 3.53vw, 61px);
	line-height: 1.1;
}

.tdc-about__text {
	max-width: 443px;
	margin-top: 37px;
}

.tdc-about__text p + p {
	margin-top: 1em;
}

.tdc-about__ctas {
	margin-top: 44px;
}

@media (max-width: 1023px) {
	.tdc-about__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px 24px;
	}

	.tdc-about__copy {
		grid-column: 1 / -1;
		order: -1;
	}

	.tdc-about__arch--tall {
		margin-top: 0;
	}
}

/* -------------------------------------------------------------- statistics */
.tdc-stats-section {
	padding-bottom: clamp(64px, 6.1vw, 106px);
}

.tdc-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px clamp(24px, 4.2vw, 72px);
}

.tdc-stats--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tdc-stats--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tdc-stat {
	padding-top: 29px;
	border-top: 1px solid rgb(var(--heading-rgb) / 0.19);
}

.tdc-stat__number {
	font-family: var(--font-heading);
	font-size: clamp(36px, 3.18vw, 55px);
	line-height: 1.29;
	letter-spacing: -0.02em;
	color: var(--heading);
}

.tdc-stat__value {
	color: var(--hl);
}

.tdc-stat__digits {
	font-variant-numeric: tabular-nums;
}

.tdc-stat__text {
	max-width: 394px;
	margin-top: 11px;
	font-size: 18px;
	line-height: 1.33;
	color: var(--body);
}

@media (max-width: 900px) {
	.tdc-stats,
	.tdc-stats--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.tdc-stats,
	.tdc-stats--2,
	.tdc-stats--4 {
		grid-template-columns: 1fr;
	}
}

/* Mobile: the tall arch steps out; the wide arch follows the copy, larger, from the very left edge
 * of the screen to just short of the right. The statistics stack in one centred column with larger
 * figures. */
@media (max-width: 767px) {
	.tdc-about__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.tdc-about__arch--tall {
		display: none;
	}

	.tdc-about__arch--small {
		width: calc(100% + var(--gutter-about));
		max-width: 620px;
		margin-left: calc(-1 * var(--gutter-about));
	}

	.tdc-about__title {
		width: auto;
		text-wrap: pretty;
	}

	.tdc-about__text {
		margin-top: 28px;
	}

	.tdc-about__ctas {
		margin-top: 32px;
	}

	.tdc-stats,
	.tdc-stats--2,
	.tdc-stats--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
		text-align: center;
	}

	.tdc-stat__number {
		font-size: clamp(52px, 15vw, 64px);
		line-height: 1.15;
	}

	.tdc-stat__text {
		max-width: 340px;
		margin: 12px auto 0;
		font-size: 16px;
		line-height: 1.5;
	}
}


/* ==== contact.css ==== */
/**
 * The contact block (tiles, social row and form) and "where to find us".
 */
.tdc-container--contact {
	width: min(100% - 2 * var(--gutter-contact), 1396px);
}

.tdc-contact {
	padding-top: 56px;
	padding-bottom: clamp(64px, 7.35vw, 127px);
}

.tdc-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 616fr) minmax(0, 748fr);
	column-gap: 32px;
	align-items: start;
}

.tdc-contact__tiles {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tdc-ctile {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 128px;
	padding: 25px;
	background: var(--taupe);
	color: var(--white);
	text-decoration: none;
	transition: background-color 220ms var(--ease), color 220ms var(--ease);
}

.tdc-ctile__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	background: var(--cream);
	color: var(--taupe);
	transition: background-color 220ms var(--ease), color 220ms var(--ease);
}

.tdc-ctile__icon svg {
	width: auto;
	height: 44px;
	max-width: 49px;
}

a.tdc-ctile:hover,
a.tdc-ctile:focus-visible {
	background: var(--cream);
	color: var(--taupe);
}

a.tdc-ctile:hover .tdc-ctile__icon,
a.tdc-ctile:focus-visible .tdc-ctile__icon {
	background: var(--taupe);
	color: var(--cream);
}

.tdc-ctile__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tdc-ctile__label {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.27;
}

.tdc-ctile__value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.27;
	overflow-wrap: anywhere;
}

.tdc-contact__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 21px;
	margin-top: 25px;
}

.tdc-contact__social-list {
	display: flex;
	gap: 9px;
}

.tdc-contact__social-label {
	font-size: 22px;
	font-weight: 700;
	color: var(--heading);
}

.tdc-contact__panel {
	padding: 39px clamp(24px, 2.1vw, 36px) 48px clamp(24px, 1.8vw, 31px);
	background: var(--cream);
}

.tdc-contact__panel .tdc-form__control {
	padding-left: 28px;
}

@media (max-width: 1023px) {
	.tdc-contact__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
}

@media (max-width: 600px) {
	.tdc-ctile {
		gap: 16px;
		padding: 18px;
	}

	.tdc-ctile__icon {
		width: 56px;
		height: 56px;
	}

	.tdc-ctile__icon svg {
		height: 30px;
	}

	.tdc-ctile__label,
	.tdc-ctile__value {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------- locations */
.tdc-container--maps {
	width: min(100% - 2 * var(--gutter-maps), 1402px);
}

.tdc-locations {
	padding-bottom: clamp(64px, 7vw, 122px);
}

.tdc-locations__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px clamp(24px, 3.4vw, 59px);
	margin-top: 34px;
}

.tdc-locations__grid--1 {
	grid-template-columns: minmax(0, 671px);
	justify-content: center;
}

.tdc-locations__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tdc-loc__name {
	margin: 30px 0 0 26px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.27;
	color: var(--heading);
}

.tdc-loc__address {
	margin: 10px 0 0 26px;
	font-size: 17px;
	line-height: 1.4;
	color: var(--heading);
}

.tdc-loc__btn {
	margin: 19px 0 0 26px;
	min-width: 191px;
}

.tdc-map--none {
	border: 1px dashed var(--line);
}

@media (max-width: 800px) {
	.tdc-locations__grid,
	.tdc-locations__grid--3 {
		grid-template-columns: 1fr;
	}

	.tdc-loc__name,
	.tdc-loc__address,
	.tdc-loc__btn {
		margin-left: 0;
	}
}

/* Phones: the enquiry panel runs to the screen edges so its fields line up with the tiles above
 * (both on the 15px gutter). */
@media (max-width: 600px) {
	.tdc-contact__panel {
		margin-inline: calc(-1 * var(--gutter-contact));
		padding: 28px var(--gutter-phone) 32px;
	}

	.tdc-contact__panel .tdc-form__control {
		padding-left: 20px;
	}
}

@media (max-width: 767px) {
	.tdc-loc__address {
		font-size: 16px;
	}
}


/* ==== cta.css ==== */
/**
 * The closing call to action with the enquiry form.
 */
.tdc-container--cta {
	width: min(100% - 2 * var(--gutter-cta), 1368px);
}

.tdc-cta {
	padding-bottom: clamp(64px, 7.5vw, 129px);
}

.tdc-cta__panel {
	display: grid;
	grid-template-columns: minmax(0, 487px) minmax(0, 681px);
	justify-content: space-between;
	column-gap: clamp(32px, 5vw, 86px);
	padding: 76px clamp(24px, 2.1vw, 36px) 36px clamp(24px, 4.5vw, 78px);
	background: linear-gradient(290.63deg, #f3efe8 32.43%, rgb(243 239 232 / 0.16) 103.43%);
}

.tdc-cta__copy .tdc-section-header {
	gap: 10px;
}

.tdc-cta__title {
	max-width: 419px;
	font-size: clamp(40px, 3.47vw, 60px);
	line-height: 1.2;
}

.tdc-cta__text {
	max-width: 487px;
	margin-top: 34px;
	font-size: 18px;
	line-height: 1.67;
	color: var(--body);
}

.tdc-cta__form {
	align-self: start;
	margin-top: -37px;
}

.tdc-cta textarea.tdc-form__control {
	min-height: 73px;
}

@media (max-width: 1023px) {
	.tdc-cta__panel {
		grid-template-columns: 1fr;
		padding: 48px 24px;
	}

	.tdc-cta__form {
		margin-top: 32px;
	}
}

/* Phones: the panel runs to the screen edges, its copy and form on the 15px gutter. */
@media (max-width: 600px) {
	.tdc-container--cta {
		width: 100%;
	}

	.tdc-cta__panel {
		padding: 44px var(--gutter-phone) 36px;
	}
}

@media (max-width: 767px) {
	.tdc-cta__text {
		font-size: 16px;
		line-height: 1.6;
	}
}


/* ==== faqs.css ==== */
/**
 * Frequently asked questions.
 */
.tdc-faqs {
	padding-bottom: 0;
	margin-bottom: clamp(56px, 5.4vw, 93px);
}

.tdc-faqs__band {
	padding: clamp(64px, 6.2vw, 107px) 0 clamp(64px, 7.6vw, 132px);
	background: linear-gradient(161.16deg, #f3efe8 5.43%, rgb(243 239 232 / 0.16) 82.22%);
}

.tdc-faqs__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(100%, 940px);
	margin: 43px auto 0;
}

.tdc-faq {
	background: var(--white);
	border-radius: 5px;
}

.tdc-faq__heading {
	margin: 0;
	font: inherit;
}

.tdc-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 118px;
	padding: 24px 54px 24px 61px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: var(--heading);
	transition: color var(--btn-ease);
}

.tdc-faq__toggle:hover,
.tdc-faq__toggle:focus-visible {
	color: var(--charcoal);
}

.tdc-faq__toggle:focus-visible {
	outline-offset: -4px;
}

.tdc-faq__icon {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.tdc-faq__icon::before,
.tdc-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	background: var(--taupe);
	transition: transform 220ms var(--ease);
}

.tdc-faq__icon::after {
	transform: rotate(90deg);
}

.tdc-faq__toggle[aria-expanded="true"] .tdc-faq__icon::after {
	transform: rotate(0deg);
}

.tdc-faq__panel {
	padding: 0 61px 32px;
}

.tdc-faq__answer {
	font-size: 17px;
	line-height: 1.5;
}

.tdc-faq__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.tdc-faq__toggle {
		min-height: 80px;
		padding: 20px 24px;
		font-size: 17px;
	}

	.tdc-faq__panel {
		padding: 0 24px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdc-faq__icon::before,
	.tdc-faq__icon::after {
		transition: none;
	}
}

@media (max-width: 767px) {
	.tdc-faq__answer {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.tdc-faq__toggle {
		padding: 18px 18px 18px 20px;
	}

	.tdc-faq__panel {
		padding: 0 20px 20px;
	}
}


/* ==== fees.css ==== */
/**
 * Fees: the tables and the sticky enquiry / book column.
 */
.tdc-container--fees {
	width: min(100% - 2 * var(--gutter-fees), 1414px);
}

.tdc-fees {
	padding-bottom: clamp(64px, 7.35vw, 127px);
}

.tdc-fees__grid {
	display: grid;
	grid-template-columns: minmax(0, 807fr) minmax(0, 556fr);
	column-gap: 51px;
	align-items: start;
	padding-top: 53px;
}

.tdc-fees__main {
	min-width: 0;
}

.tdc-fees__intro {
	max-width: 487px;
	margin-top: 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(var(--heading-rgb) / 0.5);
}

.tdc-fees__empty {
	margin-top: 42px;
}

.tdc-fees__table-wrap {
	margin-top: 42px;
	scroll-margin-top: calc(var(--anchor-offset) + 16px);
}

.tdc-fees__table-wrap + .tdc-fees__table-wrap {
	margin-top: 29px;
}

.tdc-fees__table {
	width: 100%;
	border-collapse: collapse;
}

.tdc-fees__th {
	height: 72px;
	padding: 0 50px 0 33px;
	background: var(--cream-2);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--heading);
}

.tdc-fees__th--price {
	text-align: right;
	white-space: nowrap;
}

.tdc-fees__cell {
	height: 72px;
	padding: 14px 50px 14px 33px;
	border-bottom: 1px solid rgb(var(--heading-rgb) / 0.53);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
	color: var(--heading);
}

.tdc-fees__cell--price {
	text-align: right;
	white-space: nowrap;
}

.tdc-fees__cell--request {
	font-size: 16px;
	font-style: italic;
	color: var(--taupe);
}

.tdc-fees__note {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--body);
}

.tdc-fees__aside {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-self: stretch;
	margin-top: 165px;
}

/* The enquiry card scrolls with the page; the Book Online card stays in view beneath whatever is
 * fixed above it, for as long as the tables run (65-sticky.js sets the offset). */
.tdc-fees__grid.is-sticky .tdc-fees__book {
	position: sticky;
	top: var(--tdc-sticky-top, 100px);
}

.tdc-fees__enquiry {
	padding: 35px clamp(24px, 2vw, 36px) 40px clamp(24px, 2.2vw, 39px);
	background: rgb(244 240 233 / 0.4);
}

.tdc-fees__enquiry-title {
	text-align: center;
}

.tdc-fees__enquiry-intro {
	max-width: 396px;
	margin: 13px auto 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: rgb(var(--heading-rgb) / 0.5);
}

.tdc-fees__enquiry .tdc-form {
	margin-top: 37px;
}

.tdc-form--compact {
	gap: 10px;
}

.tdc-form--compact .tdc-form__control {
	padding-left: 26px;
	padding-right: 26px;
}

.tdc-form--compact select.tdc-form__control {
	padding-right: 56px;
}

.tdc-form--compact .tdc-form__submit {
	min-height: 53.5px;
	margin-top: 6px;
	padding: 16px 20px 14px;
}

.tdc-fees__book {
	padding: 36px clamp(24px, 2vw, 36px) 36.5px;
	background: var(--taupe);
	text-align: center;
}

.tdc-fees__book-title {
	font-family: var(--font-heading);
	font-size: 35px;
	font-weight: 400;
	line-height: 1.2;
	color: #fbf9f6;
}

.tdc-fees__book-btn {
	min-height: 53.5px;
	margin-top: 20px;
	border-color: #fbf9f6;
	background: transparent;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: #fbf9f6;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.tdc-fees__book-btn:hover,
.tdc-fees__book-btn:focus-visible {
	background: #fbf9f6;
	border-color: #fbf9f6;
	color: var(--taupe);
}

@media (max-width: 1023px) {
	.tdc-fees__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.tdc-fees__aside {
		margin-top: 0;
	}

	.tdc-fees__grid.is-sticky .tdc-fees__book {
		position: static;
	}
}

@media (max-width: 600px) {
	.tdc-fees__th,
	.tdc-fees__cell {
		padding-left: 16px;
		padding-right: 16px;
		font-size: 16px;
	}
}

/* Phones: the schedule, the enquiry card and the Book Online card use the whole width inside the
 * 15px gutter; their own padding tightens so the fields and prices have room. */
@media (max-width: 600px) {
	.tdc-fees__grid {
		padding-top: 40px;
	}

	.tdc-fees__th,
	.tdc-fees__cell {
		padding-left: 14px;
		padding-right: 14px;
	}

	.tdc-fees__cell--price,
	.tdc-fees__th--price {
		padding-left: 8px;
	}

	.tdc-fees__enquiry {
		padding: 28px 16px 24px;
	}

	.tdc-fees__book {
		padding: 28px 16px;
	}

	.tdc-fees__enquiry .tdc-form {
		margin-top: 24px;
	}
}


/* ==== gallery.css ==== */
/**
 * The practice gallery and its lightbox.
 */
.tdc-gallery {
	padding-bottom: clamp(64px, 6.9vw, 119px);
}

.tdc-gallery__panel {
	margin-inline: clamp(0px, 5.44vw, 94px);
	padding: clamp(48px, 4.6vw, 80px) 0 clamp(48px, 5.8vw, 101px);
	background: linear-gradient(98.07deg, #f3efe8 29.39%, rgb(243 239 232 / 0.16) 103.44%);
}

.tdc-gallery__carousel {
	margin-top: 57px;
}

.tdc-gallery__viewport {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	touch-action: pan-y;
}

.tdc-gallery__track {
	display: flex;
	gap: 25px;
	transform: translate3d(var(--tdc-gallery-x, 0), 0, 0);
	transition: transform 640ms var(--ease);
	will-change: transform;
}

.tdc-gallery__track.is-jumping {
	transition: none;
}

.tdc-gallery__slide {
	flex: 0 0 auto;
	width: min(898px, 86vw);
	aspect-ratio: 898 / 558;
}

.tdc-gallery__slide.is-clone .tdc-gallery__open {
	cursor: default;
}

.tdc-gallery__open {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
	background: var(--line);
}

.tdc-gallery__open:focus-visible {
	outline-offset: -4px;
}

.tdc-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-gallery__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.tdc-gallery__cta {
	margin-top: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.tdc-gallery__track {
		transition: none;
	}
}

/* --------------------------------------------------------------- lightbox */
.tdc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 180;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 220ms var(--ease);
}

.tdc-lightbox.is-open {
	opacity: 1;
}

.tdc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(35 35 35 / 0.9);
}

.tdc-lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	outline: none;
}

.tdc-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.tdc-lightbox__img {
	width: auto;
	height: auto;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 160px);
	object-fit: contain;
	background: var(--charcoal);
}

.tdc-lightbox__caption {
	font-size: 15px;
	text-align: center;
	color: var(--cream);
}

.tdc-lightbox__caption:empty {
	display: none;
}

.tdc-lightbox__count {
	margin-top: 10px;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--cream);
}

.tdc-lightbox__close {
	position: fixed;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--white);
	color: var(--taupe);
}

.tdc-lightbox__close svg {
	width: 20px;
	height: 20px;
}

.tdc-lightbox__prev,
.tdc-lightbox__next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: var(--white);
	color: var(--taupe);
}

.tdc-lightbox__prev {
	left: 20px;
}

.tdc-lightbox__next {
	right: 20px;
}

.tdc-lightbox__prev:hover,
.tdc-lightbox__next:hover,
.tdc-lightbox__close:hover {
	background: var(--taupe);
	color: var(--white);
}

@media (max-width: 600px) {
	.tdc-lightbox__prev,
	.tdc-lightbox__next {
		top: auto;
		bottom: 20px;
		transform: none;
	}

	.tdc-lightbox__img {
		max-height: calc(100vh - 200px);
	}
}

@media (max-width: 600px) {
	.tdc-gallery__panel {
		margin-inline: 0;
	}
}


/* ==== hero.css ==== */
/**
 * The hero (template-parts/sections/hero.php), the treatment hero and the quick-links bar.
 */
.tdc-hero {
	position: relative;
}

.tdc-hero__stage {
	position: relative;
	overflow: hidden;
	background: var(--charcoal);
	color: var(--white);
}

.tdc-hero--light .tdc-hero__stage {
	background: var(--white);
	color: var(--ink);
}

.tdc-hero--no-image .tdc-hero__stage,
.tdc-hero--no-image .tdc-thero__stage {
	background: linear-gradient(241.84deg, var(--taupe) 20%, var(--charcoal) 120%);
}

.tdc-hero__media {
	position: absolute;
	inset: 0;
}

.tdc-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tdc-hero--image_centred .tdc-hero__media::after {
	background: linear-gradient(241.84deg, rgb(132 124 112 / 0) 49.32%, #342d22 119.96%);
	opacity: 0.4;
}

.tdc-hero--image_left .tdc-hero__media::after {
	background: rgb(66 61 57 / 0.4);
}

.tdc-thero .tdc-hero__media::after {
	background: rgb(66 61 57 / 0.55);
}

/* The homepage hero's outline button sits on the brightest part of the photograph, where its white
 * label on the designed white-tinted glass measured about 2:1. Its glass is smoked instead — a 60%
 * dark tint with a slightly stronger blur — so the label reads at 4.7:1 or better over every part of
 * the photo, at every width; the white border and label are as designed. Hover and focus fill it
 * cream as before, with the deeper taupe label (5.1:1). */
.tdc-hero--image_centred .tdc-hero__ctas .tdc-btn--on-dark.tdc-btn--secondary {
	background: rgb(52 45 34 / 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.tdc-hero--image_centred .tdc-hero__ctas .tdc-btn--on-dark.tdc-btn--secondary:hover,
.tdc-hero--image_centred .tdc-hero__ctas .tdc-btn--on-dark.tdc-btn--secondary:focus-visible {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--taupe-deep);
}

/* The copy and the smiles card live in a 1728px frame, centred on wider screens, so the card keeps
 * its designed place at the frame's edge rather than drifting to the browser's. */
.tdc-hero__frame {
	position: relative;
	max-width: 1728px;
	margin-inline: auto;
}

.tdc-hero__inner {
	position: static;
	width: min(100% - 2 * var(--gutter), var(--inner-max));
	margin-inline: auto;
}

.tdc-hero--image_centred .tdc-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: clamp(560px, 46.76vw, 808px);
	padding: clamp(96px, 8vw, 140px) 0 clamp(120px, 9.3vw, 160px);
	text-align: center;
}

.tdc-hero--image_left .tdc-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(460px, 37.1vw, 641px);
	padding: clamp(64px, 6vw, 110px) 0;
}

.tdc-hero--light .tdc-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(56px, 5.7vw, 99px) 0 40px;
	text-align: center;
}

.tdc-hero__copy {
	position: relative;
	z-index: 1;
	max-width: 100%;
}

.tdc-hero--image_left .tdc-hero__copy {
	max-width: 620px;
}

.tdc-hero--light .tdc-hero__copy {
	max-width: 620px;
}

.tdc-hero__eyebrow {
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cream);
}

.tdc-hero--image_left .tdc-hero__eyebrow,
.tdc-thero .tdc-hero__eyebrow {
	color: var(--white);
}

.tdc-hero--light .tdc-hero__eyebrow {
	color: var(--ink);
}

/* Lines sit 0.84em apart (Figma's value, and the tightest at which an Ibrand descender such as the
 * "p" of "deep" stays clear of the next line's ascenders); the homepage's larger title, whose lines
 * have no descenders, sits tighter still (below). The script word adds no height either way. */
.tdc-hero__title {
	--tdc-hero-lh: 0.84;
	max-width: 100%;
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: var(--tdc-hero-lh);
	letter-spacing: -0.01em;
	color: var(--white);
	text-wrap: balance;
}

/* A script word on the first line reaches about 0.4em above it (its ascenders); this keeps it the
 * same distance from the eyebrow as before the line-height change. Decided by the typed line
 * breaks (hero.php), so it never depends on how a phone happens to wrap the words. */
.tdc-hero__title--script-first {
	padding-top: 0.24em;
}

.tdc-hero__title .tdc-br {
	display: inline;
}

/* 0.8em: between Figma's 0.84 and the tighter look the client set in the inspector (24px at 1728,
 * which with the old script box came to 0.76em between baselines). */
.tdc-hero--image_centred .tdc-hero__title {
	--tdc-hero-lh: 0.8;
	margin-top: 23px;
	font-size: clamp(54px, 5.79vw, 100px);
}

.tdc-hero--image_left .tdc-hero__title,
.tdc-hero--light .tdc-hero__title {
	margin-top: 18px;
	font-size: clamp(46px, 4.44vw, 76.78px);
}

.tdc-hero--light .tdc-hero__title {
	margin-top: 19px;
	color: var(--heading);
}

.tdc-hero__title .tdc-script {
	color: var(--script);
}

.tdc-hero--light .tdc-hero__title .tdc-script {
	color: inherit;
}

.tdc-hero__lead {
	max-width: 457px;
	margin-top: clamp(26px, 2.2vw, 38px);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--white);
}

.tdc-hero--image_centred .tdc-hero__lead,
.tdc-hero--light .tdc-hero__lead {
	margin-inline: auto;
}

.tdc-hero--image_left .tdc-hero__lead,
.tdc-thero .tdc-hero__lead,
.tdc-hero--light .tdc-hero__lead {
	max-width: 443px;
	margin-top: clamp(24px, 2vw, 34px);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.47;
}

.tdc-hero--light .tdc-hero__lead {
	color: var(--ink);
}

.tdc-hero__lead p + p {
	margin-top: 0.8em;
}

.tdc-hero__ctas {
	margin-top: 53px;
}

.tdc-hero--image_left .tdc-hero__ctas,
.tdc-hero--light .tdc-hero__ctas {
	margin-top: 35px;
}

/* The practice's mark as a watermark at the right of the light hero. */
.tdc-hero__watermark {
	position: absolute;
	top: 28px;
	right: -138px;
	width: 675px;
	height: 688px;
	background: var(--taupe);
	opacity: 0.06;
	-webkit-mask: var(--tdc-wm) center / contain no-repeat;
	mask: var(--tdc-wm) center / contain no-repeat;
	pointer-events: none;
}

/* What follows a hero: the quick-links bar then 76px; or the next section's own gap; or, when a
 * sticky category bar comes next, nothing at all. */
.tdc-hero--image_centred {
	padding-bottom: 76px;
}

.tdc-hero--image_left {
	padding-bottom: var(--section-gap-sm);
}

.tdc-hero--image_left:has(+ .tdc-has-subnav) {
	padding-bottom: 0;
}

.tdc-hero--light {
	padding-bottom: 0;
}

/* ------------------------------------------------------------- quick links */
.tdc-quick-wrap {
	position: relative;
	z-index: 2;
	margin-top: -17px;
}

.tdc-quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px clamp(16px, 2vw, 40px);
	padding: 39px clamp(24px, 4.6vw, 80px) 38px;
	background: var(--taupe);
	color: var(--white);
}

.tdc-quick__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.tdc-quick__label {
	color: rgb(var(--cream-rgb) / 0.5);
}

.tdc-quick__value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--font-heading);
	font-size: clamp(24px, 1.85vw, 32px);
	line-height: 1.19;
}

.tdc-quick__link {
	color: var(--white);
	text-decoration: none;
	text-underline-offset: 5px;
	transition: color var(--btn-ease);
}

a.tdc-quick__link:hover,
a.tdc-quick__link:focus-visible {
	color: var(--cream);
	text-decoration: underline;
}

.tdc-quick__dot {
	width: 8px;
	height: 8px;
	margin: 0 20px;
	border-radius: 50%;
	background: var(--white);
}

@media (max-width: 1100px) {
	.tdc-quick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tdc-quick {
		grid-template-columns: 1fr;
	}

	.tdc-hero--image_centred {
		padding-bottom: 56px;
	}
}

/* --------------------------------------------------------- treatment hero
 * Full width at every size: the photo fills the left of the hero and the taupe form panel runs to
 * the right edge of the screen, so no photo ever shows to the right of it. The panel is the right
 * 816/1728 of the hero, as designed, until it reaches 960px (at about 2030px wide); wider screens
 * give the extra width to the photo. The copy lines up with the site's content column (1466px,
 * centred) instead of the screen's edge, and the form inside the panel is at most 760px wide.
 */
.tdc-thero {
	padding-bottom: 52px;
}

.tdc-thero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(47.2222%, 960px);
	container-type: inline-size;
}

.tdc-thero__stage {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 37.1vw, 641px);
	overflow: hidden;
	background: var(--charcoal);
	color: var(--white);
}

/* The left edge of the content column: the gutter up to 1728px, then half of what the 1466px column
 * leaves (cqw: the hero's own width, so a scrollbar never shifts it). */
.tdc-thero__copy {
	--tdc-thero-edge: max(var(--gutter), (100cqw - var(--inner-max)) / 2);
	position: relative;
	z-index: 1;
	max-width: calc(443px + var(--tdc-thero-edge) + 24px);
	padding: clamp(64px, 8.7vw, 151px) 24px clamp(64px, 9.8vw, 169px) var(--tdc-thero-edge);
}

.tdc-thero__title {
	margin-top: 20px;
	font-family: var(--font-body);
	font-size: clamp(40px, 3.7vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--white);
}

.tdc-thero .tdc-hero__lead {
	margin-top: 38px;
}

.tdc-thero .tdc-hero__ctas {
	margin-top: 20px;
}

.tdc-thero__panel {
	display: flex;
	align-items: center;
	padding: 58px clamp(24px, 4vw, 70px) 59px clamp(24px, 4vw, 69px);
	background: var(--taupe);
}

.tdc-thero__form {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
}

.tdc-thero textarea.tdc-form__control {
	min-height: 73px;
}

.tdc-thero .tdc-form__consent {
	color: var(--cream);
}

.tdc-thero .tdc-form__consent a {
	color: var(--white);
}

.tdc-thero .tdc-form__success {
	background: rgb(255 255 255 / 0.9);
}

@media (max-width: 1023px) {
	.tdc-thero__grid {
		grid-template-columns: 1fr;
	}

	.tdc-thero__panel {
		padding: 40px var(--gutter);
	}
}

/* ------------------------------------------------------------------ mobile
 * Every page hero is centred on mobile — eyebrow, heading, script word, paragraph and buttons — in
 * the same column and with the same spacing, whatever its desktop layout. The quick-links strip
 * overlaps the foot of the homepage hero a little, as it does on desktop.
 */
@media (max-width: 767px) {
	/* The homepage copy is centred over the photograph on phones, where the desktop's corner gradient
	 * does not reach (the white outline button sat on the bright window at under 4:1), so it takes
	 * the even tint the other page heroes already use. */
	.tdc-hero--image_centred .tdc-hero__media::after {
		background: rgb(66 61 57 / 0.4);
		opacity: 1;
	}

	.tdc-hero--image_centred .tdc-hero__inner,
	.tdc-hero--image_left .tdc-hero__inner {
		min-height: 0;
		align-items: center;
		justify-content: flex-start;
		padding: 64px 0 56px;
		text-align: center;
	}

	.tdc-hero--light .tdc-hero__inner {
		padding: 56px 0 40px;
	}

	.tdc-hero--has-quick .tdc-hero__inner {
		padding-bottom: 72px;
	}

	.tdc-hero__copy,
	.tdc-hero--image_left .tdc-hero__copy,
	.tdc-hero--light .tdc-hero__copy {
		max-width: 100%;
		margin-inline: auto;
	}

	.tdc-hero__lead,
	.tdc-hero--image_left .tdc-hero__lead,
	.tdc-thero .tdc-hero__lead,
	.tdc-hero--light .tdc-hero__lead {
		max-width: 34em;
		margin-inline: auto;
		font-size: 16px;
		line-height: 1.5;
	}

	.tdc-hero__ctas,
	.tdc-hero--image_left .tdc-hero__ctas {
		justify-content: center;
		margin-top: 32px;
	}

	.tdc-hero--image_centred .tdc-hero__ctas {
		margin-top: 32px;
	}

	/* the treatment page hero: the same centred copy above its enquiry panel */
	.tdc-thero__stage {
		justify-content: center;
		min-height: 0;
	}

	.tdc-thero__copy {
		max-width: 100%;
		padding: 64px var(--gutter) 56px;
		text-align: center;
	}

	.tdc-thero__title {
		margin-top: 18px;
	}

	.tdc-thero .tdc-hero__lead {
		margin-top: 28px;
	}

	.tdc-thero .tdc-hero__ctas {
		margin-top: 28px;
	}
}

@media (max-width: 600px) {
	.tdc-quick-wrap {
		margin-top: -24px;
	}

	.tdc-quick {
		padding: 28px 20px;
	}
}


/* ==== intro.css ==== */
/**
 * The About introduction and the USP row.
 */
.tdc-intro {
	padding-bottom: clamp(64px, 8.1vw, 140px);
}

.tdc-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 735fr) minmax(0, 527fr);
	column-gap: clamp(32px, 9.8vw, 170px);
	align-items: start;
}

.tdc-intro__header {
	gap: 12px;
}

.tdc-intro__title {
	font-size: clamp(30px, 2.6vw, 45px);
	line-height: 1.2;
}

.tdc-intro__arch {
	width: calc(100% + var(--gutter) + clamp(0px, 6vw, 105px));
	margin-top: 44px;
	margin-left: calc(-1 * var(--gutter));
	aspect-ratio: 971 / 436.5;
}

.tdc-intro__arch-frame {
	display: block;
	width: 100%;
	height: 100%;
}

.tdc-intro__lead {
	font-size: clamp(20px, 1.45vw, 25px);
	font-weight: 600;
	line-height: 1.24;
	color: var(--body);
}

.tdc-intro__lead p + p {
	margin-top: 1em;
}

.tdc-intro__text {
	margin-top: 33px;
	font-size: clamp(17px, 1.16vw, 20px);
	line-height: 1.4;
	color: var(--body);
}

.tdc-intro__text p {
	max-width: none;
	margin-bottom: 1.4em;
}

.tdc-intro__text > :last-child {
	margin-bottom: 0;
}

.tdc-intro__ctas {
	margin-top: 58px;
}

@media (max-width: 1023px) {
	.tdc-intro__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.tdc-intro__arch {
		width: calc(100% + var(--gutter));
		margin-top: 32px;
	}
}

/* ------------------------------------------------------------------- USPs */
.tdc-container--usps {
	width: min(100% - 2 * var(--gutter-usps), 1256px);
}

.tdc-usps {
	padding-bottom: clamp(64px, 8.2vw, 141px);
}

.tdc-usps__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 52px;
}

.tdc-usps__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tdc-usps__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tdc-usps__grid--1 {
	grid-template-columns: minmax(0, 1fr);
}

.tdc-usp__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--cream-2);
	color: var(--ink);
}

.tdc-usp__icon svg {
	width: 32px;
	height: 32px;
}

.tdc-usp__title {
	margin-top: 17px;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--heading);
}

.tdc-usp__text {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--body);
}

@media (max-width: 900px) {
	.tdc-usps__grid,
	.tdc-usps__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.tdc-usps__grid,
	.tdc-usps__grid--4,
	.tdc-usps__grid--2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.tdc-intro__lead {
		font-size: 18px;
		line-height: 1.4;
	}

	.tdc-intro__text {
		font-size: 16px;
		line-height: 1.55;
	}
}


/* ==== overview.css ==== */
/**
 * Treatment overview: the copy column and the photo strip.
 */
.tdc-overview {
	padding-bottom: 52px;
}

/* The design's 1728px composition — copy column at the content edge, photo strip running to the
 * right — kept whole and centred on wider screens, so its copy lines up with the hero's and the
 * strip does not leave the right of an ultra-wide screen empty. Unchanged at 1728px and below. */
.tdc-overview__grid {
	display: grid;
	grid-template-columns: minmax(0, 675px) minmax(0, 1fr);
	column-gap: 45px;
	align-items: start;
	max-width: 1728px;
	margin-inline: auto;
	padding-left: var(--gutter);
}

.tdc-overview__copy {
	padding-top: 41px;
}

.tdc-overview .tdc-section-header {
	gap: 10px;
}

.tdc-overview__text {
	margin-top: 33px;
	font-size: clamp(17px, 1.16vw, 20px);
	line-height: 1.4;
	color: var(--body);
}

.tdc-overview__text p {
	max-width: 622px;
	margin-bottom: 1.4em;
}

.tdc-overview__text > :last-child {
	margin-bottom: 0;
}

.tdc-overview__ctas {
	margin-top: 53px;
}

.tdc-overview__strip {
	min-width: 0;
}

.tdc-overview__viewport {
	overflow: hidden;
}

.tdc-overview__track {
	gap: 24px;
}

.tdc-overview__slide {
	flex: 0 0 auto;
	width: min(472px, 80vw);
	aspect-ratio: 472 / 574;
	background: var(--line);
}

.tdc-overview__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-overview__arrows {
	margin-top: 23px;
}

@media (max-width: 1023px) {
	.tdc-overview__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
		padding-right: var(--gutter);
	}

	.tdc-overview__copy {
		padding-top: 0;
	}

	.tdc-overview__viewport {
		margin-right: calc(-1 * var(--gutter));
	}
}

@media (max-width: 767px) {
	.tdc-overview__text {
		font-size: 16px;
		line-height: 1.55;
	}
}


/* ==== referral.css ==== */
/**
 * The referral form section.
 */
.tdc-container--referral {
	width: min(100% - 2 * var(--gutter), 985px);
}

.tdc-referral {
	padding-top: 39px;
	padding-bottom: clamp(80px, 12.8vw, 222px);
}

.tdc-referral__step {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.tdc-referral__step + .tdc-referral__step {
	margin-top: 48px;
}

.tdc-referral .tdc-form__step-title {
	display: block;
	width: 100%;
	padding: 0;
	font-size: clamp(22px, 1.5vw, 26px);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--heading);
}

.tdc-form--nested {
	margin-top: 28px;
}

.tdc-form__step-head {
	display: block;
}

.tdc-form__back {
	display: block;
	margin: 12px auto 0;
}

html.js .tdc-referral__form[data-tdc-step="1"] [data-tdc-step-panel="2"],
html.js .tdc-referral__form[data-tdc-step="2"] [data-tdc-step-panel="1"] {
	display: none;
}

.tdc-referral__consent {
	margin-top: 16px;
}


/* ==== res.css ==== */
/**
 * Advice and resources: the latest-posts band, the full listing and the single article.
 */
.tdc-res--latest {
	padding-top: clamp(56px, 4.7vw, 81px);
	padding-bottom: clamp(24px, 2.1vw, 37px);
}

.tdc-res--latest.tdc-res--cream {
	background: linear-gradient(165.04deg, #f3efe8 18.37%, rgb(243 239 232 / 0) 69.06%);
}

.tdc-res--all {
	padding-top: clamp(64px, 5.85vw, 101px);
	padding-bottom: clamp(64px, 8.6vw, 149px);
}

.tdc-res__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
}

.tdc-res__cta {
	padding-bottom: 6px;
}

.tdc-res__grid {
	display: grid;
	margin-top: 44px;
}

.tdc-res__grid--latest {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 29px;
}

.tdc-res__grid--all {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 75px 20px;
	margin-top: 0;
}

.tdc-rtile-slot {
	min-width: 0;
}

.tdc-rtile {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--body);
	text-decoration: none;
}

.tdc-rtile--band {
	padding: 6px 5px 17px 6px;
	transition: background-color 220ms var(--ease);
}

.tdc-rtile--band:hover,
.tdc-rtile--band:focus-visible {
	background: var(--cream-2);
}

.tdc-rtile__media {
	position: relative;
	aspect-ratio: 484 / 270;
	overflow: hidden;
	background: var(--title);
}

.tdc-rtile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-rtile__chip {
	position: absolute;
	left: 10px;
	bottom: 0;
	padding: 17px 25px 14px;
	background: rgb(255 255 255 / 0.2);
	-webkit-backdrop-filter: blur(4.2px);
	backdrop-filter: blur(4.2px);
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.tdc-rtile--grid .tdc-rtile__chip {
	left: 19px;
	padding: 20px 16px 18px;
	font-weight: 500;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.tdc-rtile__title {
	margin: 23px 17px 0;
	font-family: var(--font-heading);
	font-size: 28px;
	line-height: 1.07;
	letter-spacing: -0.01em;
	color: var(--title);
}

.tdc-rtile--grid .tdc-rtile__title {
	margin: 18px 0 0;
	font-size: clamp(26px, 1.97vw, 34px);
}

.tdc-rtile__text {
	max-width: 425px;
	margin: 12px 17px 0;
	font-size: 18px;
	line-height: 1.33;
	color: var(--body);
}

.tdc-rtile--grid .tdc-rtile__text {
	margin: 17px 0 0;
	font-size: 20px;
	line-height: 1.4;
}

.tdc-rtile__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	min-height: 48px;
	margin: 11px 17px 0 -1px;
	padding: 12px 15px 12px 18px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--title);
	transition: background-color var(--btn-ease), color var(--btn-ease);
}

.tdc-rtile--grid .tdc-rtile__more {
	margin: 19px 0 0 -18px;
	font-weight: 400;
}

.tdc-rtile__more .tdc-arrow-link__icon {
	width: 27px;
	height: 12px;
}

.tdc-rtile:hover .tdc-rtile__more,
.tdc-rtile:focus-visible .tdc-rtile__more {
	background: var(--heading);
	color: var(--cream-2);
}

.tdc-rtile:focus-visible {
	outline: 2px solid var(--taupe);
	outline-offset: 4px;
}

.tdc-res__empty {
	margin-top: 32px;
}

.tdc-res__pages {
	margin-top: 64px;
}

.tdc-res__pages-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.tdc-res__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-family: var(--font-heading);
	font-size: 17px;
	color: var(--taupe);
	text-decoration: none;
	transition: background-color var(--btn-ease), color var(--btn-ease), border-color var(--btn-ease);
}

a.tdc-res__page:hover,
a.tdc-res__page:focus-visible,
.tdc-res__page--current {
	background: var(--taupe);
	border-color: var(--taupe);
	color: var(--white);
}

@media (max-width: 1023px) {
	.tdc-res__grid--latest,
	.tdc-res__grid--all {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 20px;
	}
}

@media (max-width: 640px) {
	.tdc-res__grid--latest,
	.tdc-res__grid--all {
		grid-template-columns: 1fr;
	}

	.tdc-res__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------- an article */
.tdc-container--post {
	width: min(100% - 2 * var(--gutter), 760px);
}

.tdc-post__head {
	padding: clamp(56px, 5.7vw, 99px) 0 32px;
}

.tdc-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tdc-post__title {
	margin-top: 18px;
}

.tdc-post__media {
	margin-bottom: 40px;
}

.tdc-post__img {
	width: 100%;
	aspect-ratio: 484 / 270;
	object-fit: cover;
}

.tdc-post__body {
	padding-bottom: 48px;
}

.tdc-post__foot {
	padding-bottom: var(--section-gap);
}

/* Mobile: headings, then the articles, then "View All Posts". */
@media (max-width: 767px) {
	.tdc-res--latest .tdc-container--band {
		display: flex;
		flex-direction: column;
	}

	.tdc-res--latest .tdc-res__head {
		display: contents;
	}

	.tdc-res--latest .tdc-section-header {
		order: 1;
	}

	.tdc-res--latest .tdc-res__grid {
		order: 2;
		margin-top: 32px;
	}

	.tdc-res--latest .tdc-res__cta {
		order: 3;
		margin-top: 32px;
		padding-bottom: 0;
	}

	.tdc-rtile__text,
	.tdc-rtile--grid .tdc-rtile__text {
		font-size: 16px;
		line-height: 1.5;
	}
}

/* Phones: the grid tile's "View Post" is pulled left so its label lines up with the text above, and
 * fills on hover or tap. Inside the 15px phone gutter the full 18px pull would push the filled box
 * past the screen edge, so it is pulled 10px, with 10px of padding before the label. */
@media (max-width: 600px) {
	.tdc-rtile--grid .tdc-rtile__more {
		margin-left: -10px;
		padding-left: 10px;
	}
}


/* ==== results.css ==== */
/**
 * Before and after results: the cream panel, the case carousel and the compare slider.
 */
.tdc-results {
	padding-bottom: 60px;
}

.tdc-results__panel {
	position: relative;
	margin-inline: clamp(0px, 13.9vw, 240px);
	padding: clamp(48px, 3.7vw, 64px) 0;
	background: linear-gradient(97.09deg, #f3efe8 29.39%, rgb(243 239 232 / 0.16) 103.44%);
}

.tdc-results__intro {
	max-width: 487px;
	margin: 9px auto 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: var(--body);
}

.tdc-results__carousel {
	width: 100vw;
	margin-top: 51px;
	margin-left: calc(50% - 50vw);
}

.tdc-results__viewport {
	overflow: hidden;
}

.tdc-results__track {
	gap: 26px;
	margin-left: clamp(-155px, calc((100vw - 2038px) / 2), 50vw);
}

.tdc-results__slide {
	flex: 0 0 auto;
	width: min(490px, 85vw);
}

.tdc-results__caption {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: var(--heading);
}

.tdc-results__arrows {
	justify-content: center;
	margin-top: 24px;
}

.tdc-results__ctas {
	margin-top: 52px;
}

.tdc-results__empty {
	max-width: 60ch;
	margin: 40px auto 0;
	padding: 0 24px;
	font-size: 17px;
	line-height: 1.5;
	text-align: center;
	color: var(--heading);
}

@media (max-width: 1023px) {
	.tdc-results__track {
		margin-left: 24px;
	}
}

/* ---------------------------------------------------------------- compare */
.tdc-compare {
	position: relative;
	aspect-ratio: 490 / 546;
	overflow: hidden;
	background: var(--line);
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.tdc-compare__layer {
	position: absolute;
	inset: 0;
}

.tdc-compare__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.tdc-compare__layer--after {
	clip-path: inset(0 0 0 var(--tdc-split, 50%));
}

.tdc-compare__tag {
	position: absolute;
	top: 16px;
	padding: 8px 12px;
	background: rgb(255 255 255 / 0.85);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--heading);
}

.tdc-compare__tag--before {
	left: 16px;
}

.tdc-compare__tag--after {
	right: 16px;
}

.tdc-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tdc-split, 50%);
	width: 2px;
	margin-left: -1px;
	background: var(--white);
	cursor: ew-resize;
}

.tdc-compare__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white);
	color: var(--taupe);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
	transform: translate(-50%, -50%);
}

.tdc-compare__knob svg {
	width: 22px;
	height: 22px;
}

.tdc-compare__handle:focus-visible {
	outline: none;
}

.tdc-compare__handle:focus-visible .tdc-compare__knob {
	outline: 2px solid var(--taupe);
	outline-offset: 3px;
}

/* Mobile: the cream panel runs to the screen edges; its words sit on the 15px gutter. */
@media (max-width: 767px) {
	.tdc-results__panel {
		margin-inline: 0;
	}

	.tdc-results__empty {
		padding: 0 var(--gutter);
		font-size: 16px;
	}
}


/* ==== reviews.css ==== */
/**
 * Google reviews: the band and the Reviews page layout.
 */
.tdc-reviews {
	padding-bottom: clamp(64px, 6.4vw, 111px);
}

.tdc-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
}

.tdc-reviews__cta {
	padding-bottom: 6px;
}

.tdc-reviews__body {
	margin-top: 39px;
}

.tdc-reviews--cream {
	padding-bottom: clamp(64px, 8vw, 139px);
	margin-bottom: 44px;
	padding-top: clamp(64px, 8vw, 139px);
	background: var(--cream);
}

.tdc-reviews--cream .tdc-review-placeholder,
.tdc-reviews--cream .tdc-reviews-block__pending {
	background: var(--white);
}

/* The Reviews page */
.tdc-reviews--page {
	padding-top: clamp(64px, 6.6vw, 114px);
}

.tdc-reviews__intro-col {
	max-width: 904px;
}

.tdc-reviews__intro {
	max-width: 487px;
	margin-top: 15px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(var(--heading-rgb) / 0.5);
}

.tdc-reviews__mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 19px 10px 8px;
	border-radius: 8px;
	background: #f5f5f5;
	color: #111f30;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.tdc-reviews__mark-g svg {
	width: 44px;
	height: 45px;
}

.tdc-reviews--page .tdc-reviews__body {
	margin-top: 70px;
}

/* Mobile: heading, then the reviews, then "View All Reviews". */
@media (max-width: 767px) {
	.tdc-reviews--band .tdc-container--band {
		display: flex;
		flex-direction: column;
	}

	.tdc-reviews--band .tdc-reviews__head {
		display: contents;
	}

	.tdc-reviews--band .tdc-section-header {
		order: 1;
	}

	.tdc-reviews--band .tdc-reviews__body {
		order: 2;
		margin-top: 32px;
	}

	.tdc-reviews--band .tdc-reviews__cta {
		order: 3;
		margin-top: 32px;
		padding-bottom: 0;
	}

	.tdc-reviews--page .tdc-reviews__body {
		margin-top: 40px;
	}
}


/* ==== tcar.css ==== */
/**
 * Popular treatments: the header row and the staggered card carousel.
 */
.tdc-tcar__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px 40px;
	margin-bottom: 62px;
}

.tdc-tcar__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px clamp(16px, 2.6vw, 45px);
	padding-top: 44px;
}

.tdc-tcar__carousel {
	padding-left: clamp(16px, 3.88vw, 67px);
	overflow: clip;
}

.tdc-tcar__track {
	gap: clamp(16px, 1.8vw, 31px);
	align-items: flex-start;
	padding-bottom: 54px;
}

.tdc-tcard-slot {
	flex: 0 0 auto;
	width: min(434px, 82vw);
}

.tdc-tcard-slot:nth-child(even) {
	margin-top: 54px;
}

.tdc-tcard {
	position: relative;
	display: block;
	aspect-ratio: 434 / 556;
	overflow: hidden;
	background: var(--charcoal);
	color: var(--white);
	text-decoration: none;
}

.tdc-tcard__media {
	position: absolute;
	inset: 0;
}

.tdc-tcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
	transition: opacity 360ms var(--ease);
}

.tdc-tcard:hover .tdc-tcard__img,
.tdc-tcard:focus-visible .tdc-tcard__img {
	opacity: 1;
}

.tdc-tcard__body {
	position: absolute;
	left: 33px;
	right: 33px;
	bottom: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tdc-tcard__label {
	font-size: 15px;
	line-height: 1.33;
	letter-spacing: 0.01em;
}

.tdc-tcard__title {
	font-family: var(--font-heading);
	font-size: clamp(36px, 3.18vw, 55px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.tdc-tcard__btn {
	margin-top: 18px;
}

.tdc-tcard:hover .tdc-tcard__btn,
.tdc-tcard:focus-visible .tdc-tcard__btn {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--taupe);
}

.tdc-tcard:focus-visible {
	outline: 2px solid var(--taupe);
	outline-offset: 4px;
}

@media (max-width: 900px) {
	.tdc-tcar__head {
		flex-direction: column;
		margin-bottom: 36px;
	}

	.tdc-tcar__tools {
		padding-top: 0;
	}

	.tdc-tcard-slot:nth-child(even) {
		margin-top: 32px;
	}

	.tdc-tcar__track {
		padding-bottom: 32px;
	}

	.tdc-tcard__body {
		left: 24px;
		right: 24px;
		bottom: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdc-tcard__img {
		transition: none;
	}
}

/* Mobile: the eyebrow and heading, then the cards, then one row with "view all" at the left and the
 * arrows at the right. The head row is dissolved (display: contents) so its two parts can be placed
 * either side of the carousel; desktop keeps its approved layout untouched. */
@media (max-width: 767px) {
	.tdc-tcar {
		display: flex;
		flex-direction: column;
	}

	.tdc-tcar__head {
		display: contents;
	}

	.tdc-tcar .tdc-section-header {
		order: 1;
		width: min(100% - 2 * var(--gutter), var(--inner-max));
		margin: 0 auto 32px;
	}

	.tdc-tcar__carousel {
		order: 2;
		padding-left: var(--gutter);
	}

	.tdc-tcar__tools {
		order: 3;
		width: min(100% - 2 * var(--gutter), var(--inner-max));
		margin: 4px auto 0;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-top: 0;
	}
}


/* ==== tcat.css ==== */
/**
 * The Treatments page: category blocks and treatment tiles.
 */
.tdc-tcat {
	padding-bottom: clamp(64px, 7.3vw, 126px);
}

.tdc-tcat__group {
	padding-top: 77px;
}

.tdc-tcat__group + .tdc-tcat__group {
	padding-top: clamp(56px, 6.4vw, 110px);
}

.tdc-tcat__group--band {
	margin-top: clamp(56px, 7.5vw, 130px);
	padding: clamp(56px, 6.4vw, 110px) 0 clamp(56px, 6.6vw, 114px);
	background: linear-gradient(101.02deg, #f3efe8 29.39%, rgb(243 239 232 / 0.16) 103.44%);
}

.tdc-tcat__group--band + .tdc-tcat__group {
	padding-top: clamp(56px, 6.4vw, 110px);
}

.tdc-tcat__heading {
	margin-left: 7px;
	scroll-margin-top: var(--anchor-offset);
}

.tdc-tcat__intro {
	max-width: 60ch;
	margin: 16px 0 0 7px;
}

.tdc-tcat__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 35px;
}

.tdc-ttile {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--card);
}

.tdc-tcat__group--band .tdc-ttile {
	background: rgb(255 255 255 / 0.5);
}

.tdc-ttile__media {
	display: block;
	margin: 7px 6px 0 7px;
	aspect-ratio: 439 / 257;
	overflow: hidden;
	background: var(--line);
}

.tdc-ttile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-ttile__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 26px 28px 29px;
}

.tdc-ttile__title {
	font-size: clamp(22px, 1.62vw, 28px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--heading);
}

.tdc-ttile__text {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--body);
}

/* Learn More and Book Online share the row in equal halves — 191px each at 1728px, as designed —
 * down to 1401px; from 1400px down they stack, each the tile's full width. */
.tdc-ttile__actions {
	display: flex;
	gap: 15px;
	margin-top: auto;
	padding-top: 28px;
}

.tdc-ttile__link,
.tdc-ttile__book {
	flex: 1 1 0;
	min-width: 0;
}

/* The whole tile opens the treatment: the "Learn More" link is stretched over it; "book online"
 * sits above so it keeps its own destination. */
.tdc-ttile--linked .tdc-ttile__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tdc-ttile__book {
	position: relative;
	z-index: 1;
}

.tdc-ttile--linked:hover .tdc-ttile__link {
	background: var(--taupe);
	border-color: var(--taupe);
	color: var(--white);
}

.tdc-ttile--linked .tdc-ttile__link:focus-visible {
	outline: none;
}

.tdc-ttile--linked .tdc-ttile__link:focus-visible::after {
	outline: 2px solid var(--taupe);
	outline-offset: 2px;
}

@media (max-width: 1400px) {
	.tdc-ttile__actions {
		flex-direction: column;
		gap: 12px;
	}

	.tdc-ttile__link,
	.tdc-ttile__book {
		flex: none;
		width: 100%;
	}
}

@media (max-width: 1100px) {
	.tdc-tcat__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.tdc-tcat__grid {
		grid-template-columns: 1fr;
	}
}


/* ==== team.css ==== */
/**
 * Meet the team and the biography drawer.
 */
.tdc-team {
	padding-bottom: clamp(80px, 10.4vw, 179px);
}

.tdc-team__band {
	padding: clamp(48px, 3.6vw, 62px) 0 clamp(48px, 4.9vw, 85px);
	background: linear-gradient(96.64deg, #f3efe8 29.39%, rgb(243 239 232 / 0.16) 103.44%);
}

.tdc-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 46px;
}

.tdc-team__slot {
	min-width: 0;
}

.tdc-tm {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 348 / 432;
	overflow: hidden;
	background: var(--line);
	color: inherit;
	text-align: left;
}

.tdc-tm--bio {
	cursor: pointer;
}

.tdc-tm--bio:focus-visible {
	outline: 2px solid var(--taupe);
	outline-offset: 4px;
}

.tdc-tm__media {
	position: absolute;
	inset: 0;
}

.tdc-tm__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-tm__panel {
	position: absolute;
	left: 7px;
	right: 6px;
	bottom: 7px;
	display: flex;
	flex-direction: column;
	padding: 16px 18px 15px;
	background: rgb(255 255 255 / 0.71);
	-webkit-backdrop-filter: blur(7.7px);
	backdrop-filter: blur(7.7px);
	transition: background-color 220ms var(--ease);
}

.tdc-tm:hover .tdc-tm__panel,
.tdc-tm:focus-visible .tdc-tm__panel {
	background: var(--white);
}

.tdc-tm__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.33;
	color: var(--heading);
}

.tdc-tm__role {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.85;
	color: var(--taupe);
}

.tdc-tm__hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--title);
	opacity: 0;
	transition: opacity 220ms var(--ease), max-height 220ms var(--ease), margin-top 220ms var(--ease);
}

.tdc-tm:hover .tdc-tm__hint,
.tdc-tm:focus-visible .tdc-tm__hint {
	max-height: 24px;
	margin-top: 6px;
	opacity: 1;
}

@media (hover: none) {
	.tdc-tm__hint {
		max-height: 24px;
		margin-top: 6px;
		opacity: 1;
	}
}

@media (max-width: 1100px) {
	.tdc-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.tdc-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 440px) {
	.tdc-team__grid {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------- drawer */
.tdc-drawer {
	position: fixed;
	inset: 0;
	z-index: 170;
}

.tdc-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(66 61 57 / 0.5);
	opacity: 0;
	transition: opacity 220ms var(--ease);
}

.tdc-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(560px, 100%);
	padding: 72px clamp(24px, 4vw, 56px) 48px;
	overflow-y: auto;
	background: var(--white);
	color: var(--body);
	outline: none;
	transform: translateX(100%);
	transition: transform 300ms var(--ease);
}

.tdc-drawer.is-open .tdc-drawer__backdrop {
	opacity: 1;
}

.tdc-drawer.is-open .tdc-drawer__panel {
	transform: none;
}

.tdc-drawer__close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cream);
	color: var(--taupe);
}

.tdc-drawer__close svg {
	width: 20px;
	height: 20px;
}

.tdc-drawer__name {
	font-family: var(--font-heading);
	font-size: 36px;
	line-height: 1.2;
	color: var(--heading);
}

.tdc-drawer__role {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--taupe);
}

.tdc-drawer__gdc {
	margin-top: 4px;
	font-size: 14px;
	color: var(--body);
}

.tdc-drawer__bio {
	margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
	.tdc-drawer__panel,
	.tdc-drawer__backdrop,
	.tdc-tm__panel,
	.tdc-tm__hint {
		transition: none;
	}
}

/* --------------------------------------------------------- mobile carousel
 * Desktop and tablet: the grid above, with the carousel's controls hidden. Mobile: one member at a
 * time, moved by the arrows, the dots, a swipe or the arrow keys (55-carousel.js).
 */
.tdc-team__controls {
	display: none;
}

@media (max-width: 767px) {
	.tdc-team__viewport {
		width: min(100% - 2 * var(--gutter-team), 1452px);
		margin: 46px auto 0;
		overflow: hidden;
		touch-action: pan-y;
	}

	.tdc-team__grid,
	.tdc-team__grid.tdc-container--team {
		display: flex;
		gap: 0;
		width: 100%;
		margin: 0;
		transform: translate3d(var(--tdc-carousel-x, 0), 0, 0);
		transition: transform 420ms var(--ease);
	}

	.tdc-team__slot {
		flex: 0 0 100%;
		min-width: 0;
	}

	.tdc-team__slot .tdc-tm {
		max-width: 400px;
		margin-inline: auto;
	}

	.tdc-team__controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 24px;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.tdc-team__grid,
	.tdc-team__grid.tdc-container--team {
		transition: none;
	}
}