/*
Theme Name: UK Smiles 2026
Theme URI: https://www.uksmiles.com/
Author: TXS Digital
Author URI: https://txs-digital.webflow.io/
Description: The 2026 redesign for UK Smiles, a two-practice private dental group in Stratford and Romford. Price-led, with live opening status, one shared fee dataset and a mobile layout drawn for every page shape.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uksmiles-2026
*/

/* ---------------------------------------------------------------- tokens */

:root {
	--ink: #0A2233;
	--muted: #4A6475;
	--line: #CDE7F2;
	--paper: #F5FAFC;
	--sky: #E8F5FB;
	--white: #FFFFFF;

	--teal: #0A7EA8;
	--teal-dark: #075C7A;
	--teal-bright: #0EA0D6;
	--red: #C4162C;
	--green: #1F9D6B;
	--amber: #C9821B;
	--star: #F0A500;

	--display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
	--body: 'Source Sans 3', 'Segoe UI', sans-serif;

	--gutter: 120px;
	--max: 1200px;
	--radius: 22px;
	--radius-sm: 18px;
}

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

body {
	margin: 0;
	background: var(--white);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--display);
	letter-spacing: -0.025em;
	line-height: 1.06;
	font-weight: 700;
}

h1 { font-size: 72px; font-weight: 800; }
h2 { font-size: 46px; }
h3 { font-size: 27px; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--teal);
	text-decoration: none;
}

a:hover { color: var(--teal-dark); }

button {
	font-family: var(--body);
	cursor: pointer;
}

/* A visible focus ring everywhere — the site is full of pill buttons that
   otherwise give a keyboard user nothing to follow. */
:focus-visible {
	outline: 3px solid var(--teal-bright);
	outline-offset: 2px;
	border-radius: 4px;
}

.uks-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.uks-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--white);
	padding: 12px 20px;
	border-radius: 0 0 12px 0;
}

.uks-skip:focus {
	left: 0;
	color: var(--white);
}

/* ------------------------------------------------------------- structure */

.uks-section {
	padding: 96px var(--gutter);
}

.uks-section--tight { padding: 60px var(--gutter); }
.uks-section--paper { background: var(--paper); }
.uks-section--sky { background: var(--sky); }
.uks-section--ink {
	/* The price board: diagonal, brightest in the far corner where there is
	   least to read. Both bands are checked for contrast against white text. */
	background: linear-gradient(135deg, #0A2233 0%, #10384F 52%, #185A75 100%);
	color: var(--white);
}

.uks-section--cta {
	/* The closing band: vertical, and it ends on exactly the footer's navy so
	   the two meet without a seam. */
	background: linear-gradient(180deg, #17607D 0%, #0E3348 54%, #0A2233 100%);
	color: var(--white);
}

.uks-inner {
	max-width: var(--max);
	margin: 0 auto;
}

.uks-stack { display: flex; flex-direction: column; gap: 24px; }
.uks-stack--sm { gap: 14px; }
.uks-stack--lg { gap: 40px; }

.uks-grid { display: grid; gap: 20px; }
.uks-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uks-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uks-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uks-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.uks-lede {
	font-size: 19px;
	color: var(--muted);
	max-width: 640px;
}

.uks-note {
	font-size: 15px;
	color: var(--muted);
}

.uks-crumb {
	font-size: 14.5px;
	color: var(--muted);
}

.uks-crumb span { color: var(--line); }

/* ---------------------------------------------------------------- buttons */

.uks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 15px 28px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.uks-btn--sm { padding: 12px 20px; font-size: 15.5px; }
.uks-btn--full { width: 100%; }

.uks-btn--red { background: var(--red); color: var(--white); border-color: var(--red); }
.uks-btn--red:hover { background: #A41023; border-color: #A41023; color: var(--white); }

.uks-btn--green { background: var(--green); color: var(--white); border-color: var(--green); }
.uks-btn--green:hover { background: #178056; border-color: #178056; color: var(--white); }

.uks-btn--teal { background: var(--teal); color: var(--white); border-color: var(--teal); }
.uks-btn--teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }

.uks-btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.uks-btn--ghost:hover { border-color: var(--teal); color: var(--ink); }

.uks-btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
.uks-btn--white:hover { background: var(--sky); border-color: var(--sky); color: var(--ink); }

.uks-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.uks-icon { flex-shrink: 0; }

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

.uks-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.uks-card--sky { background: var(--sky); }
.uks-card--flush { padding: 0; overflow: hidden; }

/* ---------------------------------------------------------------- header */

.uks-bar {
	/* This is the row that follows you down the page: both practices' numbers,
	   their open/closed state and Book online stay one click away. The nav row
	   below scrolls off normally. */
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	color: var(--white);
	padding: 0 var(--gutter);
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.uks-bar__group {
	display: flex;
	align-items: center;
	gap: 28px;
	min-width: 0;
}

.uks-bar a { color: var(--white); font-size: 16px; font-weight: 700; }
.uks-bar a:hover { color: var(--white); opacity: .85; }

.uks-bar__rule {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, .18);
}

.uks-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 700;
}

.uks-status__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	display: block;
	flex-shrink: 0;
}

/* Logged-in admins get WordPress's 32px toolbar fixed over the top of the
   page, which the sticky bar would otherwise slide under. Below 782px that
   toolbar scrolls away with the page, so there it needs no offset. Visitors
   never see a toolbar and never hit either rule. */
@media screen and (min-width: 783px) {
	.admin-bar .uks-bar { top: 32px; }
}

.uks-head {
	position: relative;
	z-index: 40;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 2px 16px rgba(10, 34, 51, .06);
}

.uks-head__inner {
	height: 118px;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.uks-logo img { height: 96px; width: auto; }

.uks-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.uks-nav a {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--ink);
	padding: 6px 2px;
}

.uks-nav .current-menu-item > a,
.uks-nav .current_page_item > a,
.uks-nav .current-page-ancestor > a {
	color: var(--teal);
	box-shadow: inset 0 -2px 0 var(--teal-bright);
}

.uks-burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	border: none;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------- ticker */

.uks-ticker {
	background: var(--ink);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 14px 0;
	overflow: hidden;
	display: flex;
}

.uks-ticker__track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	animation: uks-roll 48s linear infinite;
	will-change: transform;
}

.uks-ticker a {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 0 26px;
	border-right: 1px solid rgba(255, 255, 255, .14);
	white-space: nowrap;
}

.uks-ticker__name { font-size: 15.5px; color: rgba(255, 255, 255, .72); }

.uks-ticker__price {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 800;
	color: var(--white);
}

@keyframes uks-roll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.uks-ticker:hover .uks-ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.uks-ticker__track { animation: none; }
	.uks-ticker { overflow-x: auto; }
}

/* ------------------------------------------------------------------ hero */

.uks-hero {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(135deg, #FFFFFF 0%, #F4FAFD 48%, #E6F3F9 100%);
}

/* The band at the top of every inner page. */
.uks-section--wash {
	background: linear-gradient(135deg, #E8F5FB 0%, #F8FCFD 55%, #E2F1F7 100%);
}

.uks-hero__text {
	flex: 1 1 0;
	padding: 68px 56px 68px var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 26px;
	justify-content: center;
}

.uks-hero__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--teal);
}

.uks-hero__art {
	width: 580px;
	flex-shrink: 0;
	background: var(--sky);
}

.uks-hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 42% 50%;
}

/* ----------------------------------------------------------- price lists */

.uks-price {
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--teal);
	white-space: nowrap;
}

.uks-fees__section + .uks-fees__section { margin-top: 44px; }

.uks-fees h3 {
	font-size: 25px;
	margin-bottom: 14px;
}

.uks-fees__table {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.uks-fees__row {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 14px 24px;
	background: var(--white);
}

.uks-fees__row + .uks-fees__row { border-top: 1px solid var(--line); }

.uks-fees__name { font-size: 16.5px; }
.uks-fees__note { font-size: 14.5px; color: var(--muted); }
.uks-fees__gap { flex: 1 1 0; }
.uks-fees__row .uks-price { font-size: 20px; }

/* --------------------------------------------------------- facts + tiles */

.uks-fact {
	padding: 20px 22px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.uks-fact__label { font-size: 14.5px; color: var(--muted); margin-bottom: 2px; }

.uks-fact__value {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.uks-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .06);
	color: var(--white);
}

.uks-tile:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.uks-tile__name { font-size: 15.5px; color: rgba(255, 255, 255, .72); }

.uks-tile__price {
	font-family: var(--display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* --------------------------------------------------------------- stats */

.uks-stat__figure {
	font-family: var(--display);
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.035em;
}

.uks-stat__label { font-size: 16px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------------ accordion */

.uks-faq__item { border-bottom: 1px solid var(--line); }

.uks-faq__q {
	width: 100%;
	background: transparent;
	border: none;
	padding: 20px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	font-size: 18.5px;
	font-weight: 700;
	color: var(--ink);
}

.uks-faq__sign { font-size: 24px; color: var(--teal); flex-shrink: 0; }

.uks-faq__a {
	font-size: 17px;
	color: var(--muted);
	padding-bottom: 20px;
	max-width: 900px;
}

.uks-faq__item[data-open="false"] .uks-faq__a { display: none; }

/* --------------------------------------------------------------- forms */

.uks-field { display: flex; flex-direction: column; gap: 7px; }

.uks-field label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--muted);
}

.uks-field input,
.uks-field select,
.uks-field textarea {
	width: 100%;
	height: 50px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: 0 16px;
	/* 16px is the floor — anything smaller makes iOS zoom the page on focus. */
	font-size: 16px;
	font-family: var(--body);
	color: var(--ink);
	background: var(--white);
}

.uks-field textarea {
	height: 140px;
	padding: 14px 16px;
	resize: vertical;
}

.uks-field input:focus,
.uks-field select:focus,
.uks-field textarea:focus {
	border-color: var(--teal);
	outline: none;
	box-shadow: 0 0 0 3px rgba(10, 126, 168, .15);
}

/* --------------------------------------------------------------- footer */

.uks-foot {
	background: var(--ink);
	color: rgba(255, 255, 255, .72);
	padding: 64px var(--gutter) 48px;
}

.uks-foot a { color: rgba(255, 255, 255, .72); font-size: 15.5px; line-height: 1.95; }
.uks-foot a:hover { color: var(--white); }
.uks-foot h4 { color: var(--white); font-size: 17px; margin-bottom: 10px; }
.uks-foot__legal { font-size: 14px; color: rgba(255, 255, 255, .5); margin-top: 32px; }

/* ----------------------------------------------------------- phone dock */

.uks-dock { display: none; }

/* =========================================================== responsive */

@media (max-width: 1199px) {
	:root { --gutter: 40px; }

	h1 { font-size: 54px; }
	h2 { font-size: 38px; }

	.uks-grid--4,
	.uks-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uks-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.uks-hero__art { width: 42%; }
	.uks-hero__text { padding: 56px 32px 56px var(--gutter); }
}

@media (max-width: 767px) {
	:root { --gutter: 20px; }

	body { font-size: 16.5px; }

	h1 { font-size: 36px; }
	h2 { font-size: 28px; }
	h3 { font-size: 23px; }

	.uks-section { padding: 40px var(--gutter); }
	.uks-section--tight { padding: 30px var(--gutter); }

	.uks-grid--2,
	.uks-grid--3,
	.uks-grid--4,
	.uks-grid--5 { grid-template-columns: minmax(0, 1fr); }

	/* The price boards stay two across — the tiles are short enough to read
	   side by side and a single column would run for pages. */
	.uks-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.uks-bar { display: none; }
	/* No bar at this width, so the nav row takes the sticky job back
	   and the burger stays reachable all the way down the page. */
	.uks-head { position: sticky; top: 0; }

	.uks-head__inner { height: 80px; padding: 0 var(--gutter); }
	.uks-logo img { height: 52px; }
	.uks-nav { display: none; }
	.uks-burger { display: flex; }

	.uks-ticker__track { animation-duration: 26s; }
	.uks-ticker a { padding: 0 18px; }
	.uks-ticker__name { font-size: 13.5px; }
	.uks-ticker__price { font-size: 19px; }

	.uks-hero { flex-direction: column; }
	.uks-hero__text { padding: 28px var(--gutter) 24px; gap: 18px; }
	.uks-hero__art {
		width: 100%;
		height: 190px;
		margin: 0 var(--gutter) 28px;
		width: calc(100% - (var(--gutter) * 2));
		border-radius: 20px;
		border: 1px solid var(--line);
		overflow: hidden;
	}
	.uks-hero .uks-btns { flex-direction: column; }
	.uks-hero .uks-btn { width: 100%; }

	.uks-fees__row { padding: 12px 16px; gap: 12px; }
	.uks-fees__name { font-size: 16px; }
	/* The note drops under the name so the price keeps the right-hand edge. */
	.uks-fees__note { display: block; font-size: 14px; }
	.uks-fees__row .uks-price { font-size: 17.5px; }
	.uks-fees h3 { font-size: 21px; border-left: 5px solid var(--teal); padding-left: 12px; }

	.uks-card { padding: 20px; border-radius: 20px; }

	.uks-stat__figure { font-size: 38px; }

	/* The sticky contact dock: three equal thirds is all that fits at 390px. */
	.uks-dock {
		position: sticky;
		bottom: 0;
		z-index: 30;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		background: var(--white);
		border-top: 1px solid var(--line);
		padding: 12px;
	}

	.uks-dock .uks-btn {
		min-width: 0;
		padding: 13px 6px;
		font-size: 15px;
		gap: 6px;
	}

	.uks-foot { padding: 40px var(--gutter) 32px; }
}

@media print {
	.uks-bar, .uks-ticker, .uks-dock, .uks-btns { display: none; }
	.uks-section { padding: 12px 0; }
}

/* ======================================================= page components */

/* The phone menu panel. */
.uks-menu {
	border-top: 1px solid var(--line);
	padding: 12px var(--gutter) 20px;
}

.uks-menu__list a {
	display: block;
	padding: 14px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}

/* Symptom picker ------------------------------------------------------- */

.uks-picker {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.uks-picker__list { display: flex; flex-direction: column; gap: 10px; }

.uks-picker__chip {
	background: var(--white);
	border: 2px solid var(--line);
	border-left: 7px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	text-align: left;
	min-height: 60px;
}

.uks-picker__chip[aria-pressed="true"] {
	background: var(--teal);
	border-color: var(--teal);
	color: var(--white);
}

.uks-picker__price { font-size: 34px; margin: 6px 0 10px; }

/* Practice card -------------------------------------------------------- */

.uks-practice { display: flex; flex-direction: column; }

.uks-practice__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.uks-practice__head .uks-status {
	background: var(--sky);
	border-radius: 999px;
	padding: 6px 13px;
}

.uks-practice__address { font-size: 16.5px; color: var(--muted); }

.uks-practice__phone {
	display: block;
	font-family: var(--display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	padding: 8px 0;
}

.uks-practice__email { display: block; font-size: 16.5px; padding: 6px 0 14px; }

.uks-hours { margin-top: auto; }

.uks-hours__row {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
}

.uks-hours__row span { color: var(--muted); }
.uks-practice__actions { margin-top: 18px; }

/* Reviews -------------------------------------------------------------- */

.uks-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.uks-review__text { font-size: 17.5px; line-height: 1.6; color: var(--muted); }
.uks-review__by { margin-top: 16px; }

/* FAQ ------------------------------------------------------------------ */

.uks-faq__wrap { display: flex; gap: 64px; align-items: flex-start; }
.uks-faq__intro { width: 340px; flex-shrink: 0; }
.uks-faq { flex: 1 1 0; }

/* Fee guide ------------------------------------------------------------ */

.uks-fees__section h3 { border-left: 5px solid var(--accent, var(--teal)); padding-left: 14px; }
.uks-fees__sectionnote { margin: -6px 0 14px 19px; }

.uks-fees__quick li + li { border-top: 1px solid var(--line); }

.uks-fees__quick a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	color: var(--ink);
}

/* Treatments ----------------------------------------------------------- */

.uks-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.uks-chip {
	background: var(--white);
	border: 2px solid var(--line);
	border-radius: 999px;
	padding: 11px 20px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	min-height: 44px;
}

.uks-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }

.uks-treatcard { border-left: 5px solid var(--accent, var(--line)); color: var(--ink); display: block; }
.uks-treatcard:hover { color: var(--ink); border-color: var(--accent, var(--teal)); }
.uks-treatcard__head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.uks-treatcard__price { font-size: 22px; margin-top: 12px; }

.uks-treatment__hero { display: flex; gap: 48px; align-items: center; }
.uks-treatment__art { width: 440px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.uks-treatment__body { display: flex; gap: 56px; align-items: flex-start; }
.uks-treatment__side { width: 320px; flex-shrink: 0; position: sticky; top: 78px; display: flex; flex-direction: column; gap: 20px; }
.uks-treatment__price { font-size: 40px; color: var(--ink); line-height: 1.05; }

.uks-sidelist li + li { border-top: 1px solid var(--line); }
.uks-sidelist a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 15.5px; color: var(--ink); }
.uks-sidelist .is-current a { font-weight: 700; color: var(--teal); }

.uks-related { display: block; color: var(--ink); }
.uks-related:hover { color: var(--ink); border-color: var(--teal); }
.uks-related p { margin-top: 6px; }

/* Contact -------------------------------------------------------------- */

.uks-reach {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--white);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	color: var(--ink);
}

.uks-reach:hover { border-color: var(--teal); color: var(--ink); }
.uks-reach__label { font-size: 17.5px; font-weight: 700; color: var(--muted); margin-top: 8px; }
.uks-reach__value { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.uks-reach__note { font-size: 14.5px; color: var(--muted); }

.uks-reach--green { background: var(--green); border-color: var(--green); color: var(--white); }
.uks-reach--green:hover { color: var(--white); border-color: var(--green); }
.uks-reach--red { background: var(--red); border-color: var(--red); color: var(--white); }
.uks-reach--red:hover { color: var(--white); border-color: var(--red); }
.uks-reach--green .uks-reach__label,
.uks-reach--green .uks-reach__note,
.uks-reach--red .uks-reach__label,
.uks-reach--red .uks-reach__note { color: rgba(255, 255, 255, .84); }

.uks-contact__cols { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.uks-urgent { background: #FDF2F3; border-color: #F3D4D8; }
.uks-urgent h3 { display: flex; align-items: center; gap: 10px; color: var(--ink); }

/* Calculator ----------------------------------------------------------- */

.uks-calc { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.uks-calc__monthly { font-family: var(--display); font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.uks-calc__per { font-size: 20px; font-weight: 600; color: var(--muted); margin-left: 10px; letter-spacing: 0; }

/* Editor prose --------------------------------------------------------- */

.uks-prose { flex: 1 1 0; font-size: 18px; }
.uks-prose > * + * { margin-top: 20px; }
.uks-prose h2 { font-size: 31px; margin-top: 40px; }
.uks-prose h3 { font-size: 23px; margin-top: 28px; }
.uks-prose ul { list-style: disc; padding-left: 22px; }
.uks-prose li + li { margin-top: 8px; }

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

.uks-foot__practice + .uks-foot__practice { margin-top: 18px; }
.uks-foot__practice p { font-size: 15px; }
/* The logo as drawn, on its own transparent background. */
.uks-foot__logo { margin-bottom: 16px; line-height: 0; }
.uks-foot__logo img { height: 48px; width: auto; }

@media (max-width: 1199px) {
	.uks-faq__wrap { flex-direction: column; gap: 28px; }
	.uks-faq__intro { width: auto; }
	.uks-treatment__body { flex-direction: column; gap: 32px; }
	.uks-treatment__side { width: 100%; position: static; }
	.uks-treatment__hero { gap: 32px; }
	.uks-treatment__art { width: 38%; }
	.uks-contact__cols,
	.uks-calc { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.uks-picker { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.uks-treatment__hero { flex-direction: column; align-items: stretch; }
	.uks-treatment__art { width: 100%; height: 200px; }
	.uks-treatment__art img { width: 100%; height: 100%; object-fit: cover; }
	.uks-calc__monthly { font-size: 48px; }
	.uks-practice__phone { font-size: 24px; padding: 10px 0; }
	.uks-practice__email { padding: 12px 0; }
	.uks-foot__cols { gap: 28px; }
}

.uks-how { display: flex; flex-direction: column; gap: 10px; }
.uks-how h3 { margin: 0; }

/* ------------------------------------------------- matching the signed-off
   mobile board: the photo sits between the opening lines and the buttons,
   not after them. display:contents lets the hero's two columns flatten into
   one ordered stack without duplicating the markup. */

@media (max-width: 767px) {
	.uks-hero { flex-direction: column; }

	.uks-hero__text {
		display: contents;
	}

	.uks-hero__eyebrow,
	.uks-hero h1,
	.uks-hero__text > p,
	.uks-hero .uks-btns {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	/* Specific enough to beat the `.uks-hero__text > p` rule below, which
	   otherwise catches the eyebrow and drops it under the headline. */
	.uks-hero__text > p.uks-hero__eyebrow { order: 1; margin-top: 28px; }
	.uks-hero h1       { order: 2; margin-top: 14px; }
	.uks-hero__text > p { order: 3; margin-top: 14px; }
	.uks-hero__art     { order: 4; margin: 24px var(--gutter); }
	.uks-hero .uks-btns { order: 5; margin: 4px 0 30px; }
}

/* The fee guide runs to 59 rows. Two columns on desktop halves the scroll.
   A grid rather than column-count, because auto-flow chooses its own break
   point and cannot be told which section belongs on which side; the template
   assigns them instead. On a phone the two columns stack into one list. */
.uks-fees__section + .uks-fees__section { margin-top: 36px; }

@media (min-width: 1200px) {
	.uks-fees {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
		align-items: start;
	}
}

/* The enquiry form's result banner, and the honeypot nobody should see. */
.uks-flash {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 14px;
	font-size: 16.5px;
	margin-bottom: 18px;
}

.uks-flash--ok  { background: #E9F6F0; border: 1px solid #BFE4D3; color: #0E5737; }
.uks-flash--bad { background: #FDF2F3; border: 1px solid #F3D4D8; color: #8C1020; }

.uks-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.uks-example {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #B0851F;
	background: #FDF3DC;
	border-radius: 999px;
	padding: 4px 10px;
	margin-bottom: 12px;
}

.uks-review__src { margin-top: 4px; }
.uks-review__src a { color: var(--teal); font-weight: 700; margin-left: 10px; }

/* The hero subheading reads as one line on a wide screen; below that it wraps
   normally rather than being forced off the edge. */
.uks-hero__lede { font-size: 19.5px; }

@media (min-width: 1280px) {
	.uks-hero__lede { white-space: nowrap; font-size: 19px; }
}

/* The hidden attribute must beat any display a class sets, or scripts that
   hide things by setting `.hidden = true` do nothing visible. The browser's
   own [hidden] rule loses to a single class selector, which is what broke
   the treatment filter: the cards carry display:block. */
[hidden] { display: none !important; }

/* Worked finance examples: total on the left, the monthly figure on the right,
   so the eye runs down the column it came for. */
.uks-finance {
	list-style: none;
	margin: 16px 0 12px;
	border-top: 1px solid rgba(10, 34, 51, .1);
}

.uks-finance li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(10, 34, 51, .1);
}

.uks-finance__total { font-weight: 700; font-size: 16.5px; }

.uks-finance__per {
	font-family: var(--display);
	font-weight: 700;
	font-size: 20px;
	color: var(--teal-dark);
	letter-spacing: -.02em;
}

.uks-finance__per span {
	font-family: var(--body);
	font-weight: 600;
	font-size: 14px;
	color: var(--muted);
	letter-spacing: 0;
	margin-left: 4px;
}

/* ------------------------------------------------------------- carousel */

/* A scroll-snapping row. Touch swipe and keyboard scrolling work with no
   JavaScript at all; the arrows are an addition for pointer users, not the
   mechanism. */
.uks-carousel { position: relative; }

.uks-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.uks-carousel__track::-webkit-scrollbar { display: none; }

.uks-carousel__item {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.uks-carousel__controls {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
}

.uks-carousel__btn {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--teal-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .15s, color .15s, opacity .15s;
}

.uks-carousel__btn:hover:not(:disabled) { border-color: var(--teal); }
.uks-carousel__btn:disabled { opacity: .35; cursor: default; }
.uks-carousel__btn[data-uks-carousel-prev] svg { transform: rotate(180deg); }

@media (max-width: 1199px) {
	.uks-carousel__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 767px) {
	.uks-carousel__track { grid-auto-columns: 86%; gap: 16px; }
}

/* Decorative plate on a treatment page with no photograph. Clearly graphic,
   so nobody reads it as a picture of the practice's own work. */
.uks-plate {
	width: 100%;
	height: 100%;
	min-height: 260px;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(135deg, var(--plate, var(--teal)) 0%, var(--ink) 118%);
	color: rgba(255, 255, 255, .9);
}

.uks-plate svg { width: 96px; height: 96px; stroke-width: 1.3; }

/* The treatment drawings carry their own colours, so the plate behind them is
   the design's pale inner-hero wash rather than a solid accent. */
.uks-plate--art {
	background: linear-gradient(135deg, #E8F5FB 0%, #F8FCFD 55%, #E2F1F7 100%);
	border: 1px solid var(--line);
	padding: 18px;
}

.uks-plate--art svg { width: 88%; height: 88%; max-height: 300px; stroke-width: inherit; }

/* The review on a treatment page is one card, not a band: it was taking a
   full section's worth of vertical space for a single quote. */
.uks-section--hug { padding-top: 34px; padding-bottom: 34px; }
.uks-treatment__review { max-width: 760px; }
.uks-treatment__review .uks-review__text { font-size: 17.5px; margin-top: 8px; }

@media (max-width: 767px) {
	.uks-plate { min-height: 180px; }

	/* Only the icon fallback shrinks to a fixed size. The treatment drawings
	   fill their plate at every width; without the :not() they were caught by
	   this rule and rendered at 68px inside a full-width panel. */
	.uks-plate:not(.uks-plate--art) svg { width: 68px; height: 68px; }
	.uks-plate--art { padding: 14px; }
	.uks-plate--art svg { width: 86%; height: 86%; }
}

/* ------------------------------------------------- hero buttons on one row */

/* Four calls to action, side by side rather than leaving "Book online"
   stranded on a row of its own. Trimmed rather than shrunk to nothing:
   tighter padding, a slightly smaller label, no wrapping inside a button,
   and a narrower photograph to give the row the width it needs.
   Measured at 1200, 1280, 1366 and 1440 — one row at all four, with no
   horizontal overflow. Below 1200px there is genuinely no room and they
   go back to wrapping. */
@media (min-width: 1200px) {
	.uks-hero__art { width: 540px; }

	.uks-hero .uks-btns {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.uks-hero .uks-btn {
		padding: 14px 18px;
		font-size: 15.5px;
		gap: 8px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.uks-hero .uks-btn svg { width: 18px; height: 18px; }
}

/* Narrower desktops need more than trimming: the photograph gives up width
   too. Without this the row overflowed the column at 1280 and pushed the
   whole page into a sideways scroll. */
@media (min-width: 1200px) and (max-width: 1365px) {
	.uks-hero__art { width: 420px; }
	.uks-hero .uks-btns { gap: 8px; }

	.uks-hero .uks-btn {
		padding: 13px 13px;
		font-size: 14.5px;
		gap: 6px;
	}

	.uks-hero .uks-btn svg { width: 17px; height: 17px; }
}

/* The nav row is tall now the logo is bigger, so the links can carry more
   weight instead of floating in the space. */
.uks-nav { gap: 34px; }
.uks-nav a { font-size: 18.5px; }