/*
	Trusted Tutors — theme overrides
	Layered on top of the HTML5 UP "Strongly Typed" template (assets/css/main.css).
	This file re-themes colours/typography for an education service and adds
	the tutoring-specific components (tutor cards, filters, badges, pricing,
	resource cards) that the template doesn't ship with.
*/

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap");

:root {
	/* Named --navy-* for historical reasons (see components below) but the
	   palette is a calm teal/green scheme, per design direction. */
	--navy-950: #0b3330;
	--navy-900: #0f423d;
	--navy-800: #155950;
	--navy-700: #1c7165;
	--navy-600: #268b7a;
	--navy-500: #3aa08d;

	--paleblue-50: #f2faf8;
	--paleblue-100: #e2f5ef;
	--paleblue-200: #c4ebe0;
	--paleblue-300: #9adcc9;

	--green-50: #eff9f4;
	--green-100: #d9f0e4;
	--green-600: #1f9c78;
	--green-700: #187d61;

	/* A genuine pale blue, distinct in hue from the teal/green palette above
	   — used only for the directory cards' Levels badges, so Subjects (pale
	   green) and Levels (pale blue) read as two different kinds of tag at a
	   glance rather than blurring into one undifferentiated row. */
	--skyblue-50: #eff6fc;
	--skyblue-100: #dcebf9;
	--skyblue-700: #2f6690;

	/* A genuine neutral grey — pending/expired/not-verified previously used
	   --paleblue-100 for this, which is actually a pale mint/green tone (see
	   the palette note above), so a "Not Verified" badge read as basically
	   the same colour family as "Verified", just lighter, instead of
	   visibly greyed-out. */
	--grey-100: #e9ebea;
	--grey-600: #6b746f;

	--amber-50: #fdf6e8;
	--amber-100: #faedc4;
	--amber-700: #92650b;

	--red-50: #fdecec;
	--red-600: #c0392b;

	--ink: #1b2e2b;
	/* Darkened from the original #5c766f — the lighter shade was hard to
	   read for tagline/meta/small-print text across the site. */
	--muted: #3f5951;
	--border: #d9ece6;
}

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

body, input, select, textarea {
	color: var(--ink);
}

/* The template justifies every <p> by default, which produces uneven,
   "rivery" word-spacing in narrow columns (most noticeably in the tutor
   profile's About/bio text on mobile) — left-aligned reads more naturally
   at these widths. Anywhere a paragraph should be centred instead (the
   hero, empty/error states) already has its own more specific override
   below, so this only changes ordinary body copy. */
p {
	text-align: left;
}

a {
	color: var(--green-700);
}

	a:hover {
		color: var(--navy-800);
	}

strong, b {
	color: var(--navy-900);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--navy-900);
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Big, friendly, rounded display font for the hero headline, section
   headers and logo — mirrors the bold display type used by well-known
   tutoring marketplaces, with a fallback for offline / no-Google-Fonts use. */
.hero h2,
.section-intro h2,
#features header h2,
#header h1 {
	font-family: 'Baloo 2', 'Arvo', 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
}

/* Buttons -> green primary, navy secondary */

input[type="button"], input[type="submit"], input[type="reset"], button, .button {
	background: var(--green-600);
	box-shadow: none;
	letter-spacing: 1px;
	border-radius: 999px;
}

	input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover {
		background: var(--green-700);
	}

	input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active, .button:active {
		background: var(--green-700);
	}

	.button.alt {
		background: var(--navy-900);
	}

		.button.alt:hover {
			background: var(--navy-800);
		}

	.button.secondary {
		background: transparent;
		color: var(--navy-900) !important;
		box-shadow: inset 0 0 0 2px var(--navy-900);
	}

		.button.secondary:hover {
			background: var(--paleblue-100);
		}

	.button:disabled,
	.button.is-disabled {
		background: var(--paleblue-200) !important;
		color: var(--muted) !important;
		cursor: not-allowed;
		box-shadow: none;
	}

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

/* The template's original header stacks a big centred title with the nav
   floated above it via absolute positioning — that only works with a very
   tall header. Ours is a normal-height header, so instead we lay the logo
   (+ tagline) on the left and the nav on the right, on one row, using a
   grid rather than the template's absolute-positioned nav. This keeps the
   nav from ever overlapping the title, on every page. */
#header {
	background: #fff;
}

/* The template's mobile hamburger (#titleBar) is a full-width, fixed,
   transparent strip across the very top of the page, with the actual
   round toggle button positioned inside it at the left — but the strip
   itself, being the full page width, was sitting on top of (and blocking
   clicks to) whatever sits underneath it in that same top strip, which on
   narrow screens includes our own logo link. Make the strip itself
   click-through and only the visible toggle button clickable, so the logo
   (and anything else up there) works normally underneath it. */
#titleBar {
	pointer-events: none;
}

	#titleBar .toggle {
		pointer-events: auto;
	}

/* The template's hamburger toggle sits at the top-LEFT of the fixed
   #titleBar strip by default — the same corner our own logo occupies in
   the header underneath, since our header has a short 1.25-1.5em top
   padding rather than the template's original tall hero spacing. Moving
   the toggle to the top-right puts it in the same empty area the desktop
   nav already uses (the grid's "nav" column), so the logo and the menu
   button occupy genuinely separate areas rather than overlapping. */
	#titleBar .toggle {
		left: auto;
		right: 0;
	}

		#titleBar .toggle:before {
			left: auto;
			right: 5px;
		}

	#header > .container {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"logo    .  nav"
			"tagline .  nav";
		align-items: center;
		column-gap: 1.5em;
		text-align: left;
		padding: 1.5em 0;
		border-bottom: solid 2px var(--border);
		box-shadow: none;
	}

	body.is-inner #header > .container {
		padding: 1.25em 0;
	}

	#header h1#logo {
		grid-area: logo;
		margin: 0;
	}

	#header > .container > p {
		grid-area: tagline;
		margin: 0.2em 0 0 0;
		text-align: left;
	}

	#header h1 {
		color: var(--navy-900);
		text-shadow: none;
		font-size: 1.7em;
		letter-spacing: 0.5px;
	}

		#header h1 .logo-mark {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.3em;
			height: 1.3em;
			margin-right: 0.35em;
			border-radius: 0.3em;
			background: var(--navy-900);
			color: #fff;
			font-size: 0.55em;
			vertical-align: middle;
			position: relative;
			top: -0.05em;
		}

		#header h1 .logo-accent {
			color: var(--green-600);
		}

	#header p {
		color: var(--muted);
		font-size: 0.85em;
		letter-spacing: 1px;
		text-transform: none;
	}

/* Nav now sits statically in its grid cell, top-right of the header, on
   one line — never absolutely positioned over the title. */
#nav {
	grid-area: nav;
	position: static;
	top: auto;
	left: auto;
	width: auto;
	justify-self: end;
}

	#nav > ul > li {
		padding-right: 1.5em;
	}

#nav > ul > li > a {
	color: var(--navy-700);
}

	#nav > ul > li > a:before {
		background: var(--paleblue-200);
		color: var(--navy-800);
	}

	#nav > ul > li.active > a:before,
	#nav > ul > li:hover > a:before {
		background: var(--green-600);
		color: #fff;
	}

	#nav > ul > li.active > a > span,
	#nav > ul > li:hover > a > span {
		color: var(--green-700);
	}

.dropotron li:hover > span, .dropotron li:hover > a {
	color: var(--green-700);
}

/* The template's #main comes with a very generous 6em top/bottom padding,
   designed around its tall hero header — with our shorter header that
   leaves a lot of dead space above every inner page's content. */
#main {
	padding: 2.5em 0;
}

	@media screen and (max-width: 980px) {
		#main {
			padding: 2em 0;
		}
	}

/* The tutor profile page starts with a compact header card, so it needs
   noticeably less top padding than other inner pages or the space above
   it looks empty. */
body.tutor-page #main {
	padding-top: 1em;
	/* The template's #main is "overflow: hidden" by default (see main.css —
	   it's there to clip decorative background shapes on other layouts,
	   which this page doesn't use), but that also makes #main a clipping/
	   scroll container, which silently breaks position:sticky on anything
	   inside it (the enquiry sidebar just scrolls normally instead of
	   sticking). Restoring normal overflow here is what makes the sticky
	   sidebar above actually work. */
	overflow: visible;
}

/* Find a Tutor: the results themselves are the point of the page, so trim
   the space above them further — a smaller heading gap, and tighter
   margins on the filter row and toolbar above the card grid, brings the
   first row of tutors up rather than pushing it down the page. */
body.find-a-tutor-page #main {
	padding-top: 1.1em;
}

	body.find-a-tutor-page .find-heading {
		margin-bottom: 0.5em;
	}

		body.find-a-tutor-page .find-heading h2 {
			margin-bottom: 0;
		}

/* ---------------------------------------------------------------------- */
/* Hero / search widget (homepage)                                        */
/* ---------------------------------------------------------------------- */

.hero {
	background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
	padding: 3.25em 0 3em 0;
	text-align: center;
	color: #fff;
}

	/* The template's base "p { text-align: justify }" rule directly targets
	   every <p> in the hero and wins over the inherited "center" above (a
	   direct rule always beats an inherited one, regardless of specificity)
	   — which left single-line paragraphs like the CTA button and the small
	   print looking flush-left instead of centred. Force them back. */
	.hero p {
		text-align: center;
	}

	/* Small bouncing arrow at the foot of a hero, linking down to the
	   section right below it (e.g. the membership comparison on Become a
	   Tutor) — a visual cue that there's more worth scrolling to. */
	/* A plain circular arrow with no visible label read as decorative and
	   easy to miss/ignore — it now says outright where it takes you. */
	.hero-scroll-arrow {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.6em;
		margin: 1.75em auto 0 auto;
		text-decoration: none;
		/* Overrides the template's default link underline-via-border-bottom
		   (main.css), which otherwise draws a stray horizontal line across
		   this whole stacked label+circle block. */
		border-bottom: none;
		animation: hero-arrow-bounce 2s ease-in-out infinite;
	}

		.hero-scroll-arrow-label {
			color: rgba(255, 255, 255, 0.85);
			font-size: 0.85em;
			font-weight: 700;
			letter-spacing: 0.3px;
			text-transform: uppercase;
		}

		.hero-scroll-arrow-circle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 2.4em;
			height: 2.4em;
			border: solid 1px rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			transition: border-color 0.15s ease;
		}

		.hero-scroll-arrow:hover .hero-scroll-arrow-circle {
			border-color: rgba(255, 255, 255, 0.6);
		}

		.hero-scroll-arrow .chev {
			display: inline-block;
			width: 0.6em;
			height: 0.6em;
			border-right: solid 2px #fff;
			border-bottom: solid 2px #fff;
			transform: rotate(45deg);
			margin-top: -0.3em;
		}

	@keyframes hero-arrow-bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(6px); }
	}

	.hero h2 {
		color: #fff;
		font-size: 2.5em;
		line-height: 1.2em;
		letter-spacing: 0.2px;
		margin-bottom: 0.4em;
	}

	.hero p.lead {
		color: var(--paleblue-100);
		max-width: 40em;
		margin: 0 auto 1.5em auto;
		font-size: 1.1em;
		line-height: 1.55em;
	}

	/* Prominent, reassuring — but not shouty — reminder right under the
	   search bar that searching is free with no account required. */
	.hero-reassurance {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		margin: 1.1em auto 0 auto;
		background: rgba(255, 255, 255, 0.12);
		border: solid 1px rgba(255, 255, 255, 0.2);
		color: #fff;
		font-weight: 600;
		font-size: 0.95em;
		padding: 0.55em 1.3em;
		border-radius: 999px;
	}

		.hero-reassurance .icon:before {
			color: var(--green-100);
		}

	.hero-reassurance-note {
		margin: 0.6em auto 0 auto;
		max-width: 34em;
		color: var(--paleblue-100);
		font-size: 0.82em;
		opacity: 0.9;
	}

	.hero-trust {
		margin-top: 1.5em;
		padding-bottom: 0.15em;
		display: flex;
		flex-wrap: wrap;
		gap: 0.7em 2em;
		justify-content: center;
		color: var(--paleblue-100);
		font-size: 0.85em;
		line-height: 1.6em;
	}

	@media (max-width: 736px) {
		.hero {
			padding: 2.5em 0 2.5em 0;
		}
		.hero h2 {
			font-size: 1.9em;
		}
		.hero p.lead {
			font-size: 1em;
		}
		.hero-reassurance {
			font-size: 0.85em;
			text-align: left;
			white-space: normal;
		}
		.hero-trust {
			gap: 0.6em 1.2em;
		}
	}

		.hero-trust .icon:before {
			margin-right: 0.4em;
			color: var(--green-100);
		}

.search-widget {
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 20px 40px rgba(7, 26, 51, 0.35);
	padding: 0.6em 0.6em 0.6em 1.5em;
	max-width: 46em;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	text-align: left;
	transition: box-shadow 0.2s ease;
}

	.search-widget:focus-within {
		box-shadow: 0 20px 44px rgba(7, 26, 51, 0.45);
	}

	/* Wraps each <select> so a small chevron can sit on top of it — selects
	   have their native arrow removed site-wide (see main.css), so without
	   this they give no visual hint that they're a dropdown. */
	.select-wrap {
		position: relative;
		flex: 1 1 180px;
		display: flex;
	}

		.select-wrap:after {
			content: '';
			position: absolute;
			right: 0.9em;
			top: 50%;
			width: 0.55em;
			height: 0.55em;
			border-right: solid 2px var(--muted);
			border-bottom: solid 2px var(--muted);
			transform: translateY(-70%) rotate(45deg);
			pointer-events: none;
		}

	.search-widget select {
		flex: 1 1 180px;
		width: 100%;
		margin: 0;
		background: #fff;
		border: 0;
		border-right: solid 1px var(--paleblue-200);
		border-radius: 0;
		box-shadow: none;
		color: var(--navy-800);
		font-weight: 600;
		padding-right: 1.6em;
	}

	.select-wrap:last-of-type select {
		border-right: 0;
	}

	.search-widget .button {
		flex: 0 0 auto;
		margin: 0;
		white-space: nowrap;
		border-radius: 999px;
		padding: 0.85em 1.8em;
		transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	}

		.search-widget .button:hover {
			transform: translateY(-1px);
			box-shadow: 0 8px 18px rgba(15, 66, 61, 0.3);
		}

	@media (max-width: 736px) {
		.search-widget {
			border-radius: 18px;
			padding: 1em;
		}
		.select-wrap {
			flex: 1 1 100%;
			border-bottom: solid 1px var(--paleblue-200);
			padding-bottom: 0.6em;
		}
		.select-wrap:after {
			right: 0.5em;
		}
		.select-wrap select {
			border-right: 0;
		}
		.search-widget .button {
			flex: 1 1 100%;
		}
	}

/* ---------------------------------------------------------------------- */
/* Subject chips                                                           */
/* ---------------------------------------------------------------------- */

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	justify-content: center;
}

.chip {
	display: inline-block;
	padding: 0.55em 1.2em;
	border-radius: 999px;
	background: var(--paleblue-100);
	color: var(--navy-800);
	border: solid 1px var(--paleblue-200);
	font-size: 0.9em;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

	.chip:hover {
		border-color: var(--green-600);
		color: var(--green-700);
		background: var(--green-50);
		transform: translateY(-2px);
		box-shadow: 0 6px 14px rgba(15, 66, 61, 0.12);
	}

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

.tutor-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Without this, the single-line ellipsis tagline (white-space: nowrap)
	   forces the whole grid track wider than the viewport on mobile, since
	   a CSS grid item's default min-width is its content's natural width,
	   not 0 — classic "grid blowout". */
	min-width: 0;
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	/* Tightened from 1.5em — part of shrinking the overall card height
	   without losing any information (see .tutor-card-top, .tutor-tagline,
	   .badge-row below for the rest of that saving). */
	padding: 0.95em 1.15em;
	text-align: left;
	box-shadow: 0 1px 2px rgba(7, 26, 51, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

	.tutor-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 24px rgba(7, 26, 51, 0.1);
	}

	/* Plus tutors get a richer, slightly warmer treatment — a gold-green
	   accent stripe, a subtle tinted background wash and deeper shadow —
	   so a Plus profile visibly stands out without relying on a text
	   badge. Applied to both the card and the profile page's header card. */
	.tutor-card.is-plus {
		border-color: var(--green-200, var(--green-100));
		background: linear-gradient(180deg, #fff 0%, var(--green-50) 130%);
		box-shadow: 0 4px 18px rgba(15, 66, 61, 0.1);
	}

		.tutor-card.is-plus:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			border-radius: 14px 14px 0 0;
			background: linear-gradient(90deg, var(--green-600), #d9b168);
		}

		.tutor-card.is-plus:hover {
			box-shadow: 0 16px 30px rgba(15, 66, 61, 0.16);
		}

	/* A fully-verified tutor (identity + DBS + qualifications all showing
	   "verified") gets a distinct darker green outline, so trust is visible
	   at a glance without having to read the individual badges — separate
	   from, and stacks fine with, the Plus treatment above. */
	.tutor-card.is-verified,
	.profile-header-card.is-verified {
		border: solid 2px var(--green-600);
	}

	/* Tutor profile page header card — photo, name/details, price/CTA. On
	   mobile this switches to a centred, stacked layout with a bigger photo
	   and larger name, rather than the cramped left-aligned row the desktop
	   layout gives at narrow widths. */
	.profile-header-card {
		display: flex;
		flex-direction: row;
		gap: 1.25em;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 1.25em 1.5em;
	}

		/* Bigger than a directory-card avatar (Spec item 1) — the tutor's
		   photo is the main thing a parent is choosing between, so it gets
		   real prominence here, not just the 56px thumbnail used on cards.
		   Still the same softly-rounded-square treatment (.tutor-avatar),
		   not circular. */
		img.profile-avatar {
			width: 160px;
			height: 160px;
		}

		.profile-header-main {
			flex: 1;
			min-width: 220px;
		}

		.profile-verification-quick,
		.profile-video-link,
		.profile-header-main #p-resources-link {
			margin-top: 0.5em;
		}

		.profile-header-side {
			text-align: center;
			min-width: 150px;
		}

			.profile-header-side .price-tag {
				font-size: 1.6em;
			}

			.profile-contact-btn {
				margin-top: 0.6em;
			}

	@media (max-width: 736px) {
		.profile-header-card {
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 1.5em 1.25em;
		}

		/* Centred above the name (Spec item 1), smaller than the desktop
		   photo but still much larger than a card thumbnail. */
		img.profile-avatar {
			width: 130px;
			height: 130px;
		}

		.profile-header-main {
			width: 100%;
			text-align: center;
		}

			.profile-header-main #p-name {
				font-size: 1.65em; /* ~26px on a 16px base, per the mobile type scale */
			}

			.profile-header-main .tutor-tagline {
				font-size: 1em;
			}

			.profile-header-main .subject-tags,
			.profile-header-main .level-tags,
			.profile-header-main .badge-row,
			.profile-header-main .profile-summary-line,
			.profile-header-main .profile-verification-quick {
				justify-content: center;
			}

		.profile-header-side {
			width: 100%;
		}
	}

	/* Sticky mobile "Contact Tutor" bar — off-screen/hidden on desktop and
	   tablet, since the header's own contact button is already visible
	   there; on phones it stays pinned above the fold so visitors don't
	   have to scroll all the way back up to reach it. Page content gets
	   matching bottom padding on mobile so the bar never covers the last
	   section (see body.tutor-page rule below). */
	.mobile-sticky-contact {
		display: none;
	}

	@media (max-width: 736px) {
		/* Spec item 4: ~48-52px tall (not the ~64px it worked out to before
		   with generous vertical padding), inset from the screen edges, and
		   lifted clear of any device safe area (home-indicator strip on
		   iPhone, gesture bar on Android) via env(safe-area-inset-bottom) so
		   it can't sit under it or get clipped. */
		.mobile-sticky-contact {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			position: fixed;
			left: 1em;
			right: 1em;
			bottom: calc(0.85em + env(safe-area-inset-bottom, 0px));
			z-index: 120;
			height: 50px;
			/* Matches the header's own "Contact [Name]" button (the primary
			   green CTA) rather than the dark navy used here previously —
			   two different-coloured buttons doing the exact same thing read
			   as inconsistent/"off" even though each looked fine alone. */
			background: var(--green-600);
			color: #fff;
			font-weight: 700;
			font-size: 0.9em;
			text-decoration: none;
			padding: 0 1.1em;
			border-radius: 999px;
			box-shadow: 0 8px 20px rgba(15, 66, 61, 0.3);
			transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		}

		/* Hidden once the real enquiry form has scrolled into view (see
		   wireStickyContactVisibility in tutor.js) — kept in the layout
		   (not display:none) so the transition can animate, but taken out
		   of the tab order and click path while hidden. */
		.mobile-sticky-contact.is-hidden {
			opacity: 0;
			visibility: hidden;
			transform: translateY(0.5em);
			pointer-events: none;
		}

		/* Bottom clearance sized to the button's own height plus its own
		   inset and safe-area allowance, plus a little breathing room —
		   sized to the actual button now rather than a fixed guess, so it
		   can't fall short (button clipping the last section) or run long
		   (a big dead gap at the foot of the page). */
		body.tutor-page {
			padding-bottom: calc(50px + 1.6em + env(safe-area-inset-bottom, 0px));
		}
	}

	/* Profile name/typography scale (Spec B item 9): a prominent name,
	   16px-equivalent body text and 14px-equivalent secondary text. */
	#p-name {
		font-size: 1.9em; /* ~30px on a 16px base */
		line-height: 1.2em;
		margin: 0 0 0.2em 0;
	}

	/* Spec item 7 — the template's global h3 (uppercase, 2px letter-spacing,
	   ~1em) reads small and "shouty" as a heading over a paragraph of
	   running text (About, Qualifications, Verification, etc). Scoped to
	   the profile's main content only, so the rest of the site — nav,
	   footer, other inner pages — keeps its existing look. */
	body.tutor-page #main-content h3 {
		font-size: 1.3em; /* ~20-21px on a 16px base */
		font-weight: 700;
		letter-spacing: 0.3px;
		text-transform: none;
		margin: 0 0 0.6em 0;
	}

	/* Spec item 2: a short preview only, capped at 3 lines — the full
	   biography still has its own "About" section further down the page,
	   so nothing is lost, just not repeated here at full length. */
	.profile-header-bio {
		font-size: 1em; /* ~16px */
		line-height: 1.45em;
		color: var(--ink);
		margin: 0.4em 0;
		max-width: 60ch;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.profile-summary-line {
		display: flex;
		flex-wrap: wrap;
		gap: 0.3em 1.2em;
		font-size: 0.875em; /* ~14px */
		color: var(--muted);
		margin: 0.4em 0;
	}

		.profile-summary-line span {
			display: inline-flex;
			align-items: center;
			gap: 0.4em;
		}

		.profile-summary-line .icon {
			color: var(--green-600);
		}

	.enquiry-subtext {
		font-size: 0.875em;
		color: var(--muted);
		margin: 0 0 1em 0;
	}

	/* Optional "quick facts" panel (exam boards, availability, trial
	   lesson) — only ever shown when the tutor supplied at least one, so
	   the grid gaps never show up as empty space when hidden. */
	.quick-facts-panel {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 1em;
		background: #fff;
		border: solid 1px var(--border);
		border-radius: 14px;
		padding: 1.25em 1.5em;
		margin-top: 1.5em;
	}

		.quick-fact {
			display: flex;
			align-items: flex-start;
			gap: 0.7em;
			font-size: 0.9em;
		}

			.quick-fact .icon {
				color: var(--green-600);
				font-size: 1.1em;
				margin-top: 0.15em;
			}

			.quick-fact strong {
				display: block;
				color: var(--ink);
				font-size: 0.85em;
			}

			.quick-fact span:not(.icon) {
				color: var(--muted);
				font-size: 0.95em;
			}

	.tutor-card-top {
		display: flex;
		gap: 0.85em;
		align-items: flex-start;
	}

		.tutor-card-photo-link {
			display: block;
			flex-shrink: 0;
			border-radius: 12px;
		}

		.tutor-card-heading {
			min-width: 0; /* lets long names/taglines actually ellipsis/wrap instead of overflowing the card */
		}

	.tutor-avatar {
		width: 56px;
		height: 56px;
		border-radius: 12px;
		flex-shrink: 0;
		object-fit: cover;
		object-position: center;
	}

	.tutor-card h3 {
		font-size: 1.1em;
		margin: 0 0 0.15em 0;
		line-height: 1.25em;
	}

		/* The name itself is the clickable link (alongside the photo), so it
		   needs its own visible focus state for keyboard users tabbing
		   through the results grid. */
		.tutor-card-name-link {
			color: inherit;
			text-decoration: none;
		}

			.tutor-card-name-link:hover,
			.tutor-card-name-link:focus-visible {
				text-decoration: underline;
			}

			.tutor-card-name-link:focus-visible {
				outline: solid 2px var(--green-600);
				outline-offset: 2px;
				border-radius: 3px;
			}

	/* The tagline now runs the full width of the card, below the photo/name
	   row (rather than squeezed into the narrow column beside the photo) —
	   this is what lets it actually read as a short bio line rather than
	   wrapping awkwardly next to a 56px avatar. Still wraps across up to 2
	   lines rather than truncating to a single fixed-width line — a single-
	   line ellipsis was cutting most taglines off mid-word/mid-phrase (e.g.
	   "GCSE & A Level Business Studies special…"), which read as broken
	   rather than intentionally short. */
	.tutor-card > .tutor-tagline {
		font-size: 0.85em;
		line-height: 1.3em;
		margin: 0.6em 0 0.3em 0;
		min-height: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* Needs !important: the homepage's "Browse all tutors" grid sits
		   inside <section id="features">, and the template's own base CSS
		   has "#features p { text-align: center; }" — an ID selector, which
		   beats .tutor-card's own text-align:left no matter what order the
		   rules come in. Left uncorrected, each of the tagline's two clamped
		   lines centred independently, so a two-line tagline started at a
		   different x position per line instead of both starting flush left
		   like every other card element. */
		text-align: left !important;
	}

	.tutor-tagline {
		color: var(--muted);
		font-size: 0.97em;
		line-height: 1.45em;
		margin: 0 0 0.4em 0;
		/* Clamped to 2 lines and given a matching min-height so cards with
		   short vs. long taglines still line their subject tags up at the
		   same height within a row. */
		min-height: 2.8em;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Card content is always left-aligned, whatever text-align rule an
	   ancestor or narrow-viewport style might otherwise apply. */
	.tutor-card-top, .tutor-card-top *, .subject-tags, .level-tags, .badge-row,
	.tutor-card h3, .tutor-card .rating-slot, .tutor-card .rating {
		text-align: left;
	}

	.demo-tag {
		display: inline-block;
		background: var(--amber-100);
		color: var(--amber-700);
		font-size: 0.68em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		padding: 0.2em 0.6em;
		border-radius: 999px;
		margin: 0.4em 0;
	}

	.plus-tag {
		display: inline-flex;
		align-items: center;
		gap: 0.3em;
		background: var(--navy-900);
		color: #fff;
		font-size: 0.68em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		padding: 0.25em 0.65em;
		border-radius: 999px;
	}

	/* Intro-video badge — sized and placed like the verification badges
	   (it lives in the same .badge-row, wrapping alongside them) rather
	   than a large standalone button, but keeps a distinct colour so it
	   still catches the eye as something worth clicking. */
	.badge.video-badge {
		background: var(--navy-800);
		color: #fff;
		text-decoration: none;
	}

		.badge.video-badge:hover {
			background: var(--navy-700);
		}

	/* Reserves a consistent height for the rating line whether or not a
	   tutor has one (Free tutors show none), so the subject tags below
	   always start at the same point across cards in the same row. */
	.rating-slot {
		min-height: 1.5em;
	}

	.rating {
		display: flex;
		align-items: center;
		gap: 0.4em;
		font-size: 0.9em;
		color: var(--navy-800);
		margin: 0.3em 0;
	}

	a.rating-link {
		text-decoration: none;
		color: inherit;
		display: block;
	}

		a.rating-link:hover .rating {
			text-decoration: underline;
		}

		.rating .stars {
			color: #f0ad4e;
			letter-spacing: 1px;
		}

		.rating .stars .empty {
			color: var(--paleblue-200);
		}

		.rating .count {
			color: var(--muted);
		}

	.subject-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.3em;
		margin: 0.4em 0 0 0;
	}

		.subject-tags span {
			background: var(--paleblue-100);
			color: var(--navy-700);
			font-size: 0.78em;
			padding: 0.25em 0.7em;
			border-radius: 999px;
		}

	/* Levels row on directory cards — same shape as Subjects above, but a
	   genuinely different (blue) hue so the two rows are easy to tell apart
	   at a glance, plus a small caps label since "IGCSE" and "GCSE" without
	   any context read ambiguously next to subject names. */
	.level-tags {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.3em;
		margin: 0.35em 0 0 0;
	}

		.level-tags .tag-row-label {
			font-size: 0.68em;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.4px;
			color: var(--muted);
			margin-right: 0.15em;
		}

		.level-tags span:not(.tag-row-label) {
			background: var(--skyblue-100);
			color: var(--skyblue-700);
			font-size: 0.78em;
			padding: 0.25em 0.7em;
			border-radius: 999px;
		}

	.tutor-bio {
		font-size: 0.85em;
		line-height: 1.35em;
		color: var(--ink);
		margin: 0.4em 0 0 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.tutor-meta {
		font-size: 0.92em;
		color: var(--muted);
		margin: 0.5em 0;
	}

		.tutor-meta .icon:before {
			margin-right: 0.4em;
		}

	.badge-row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.3em;
		margin: 0.4em 0 0 0;
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.3em;
		font-size: 0.66em;
		font-weight: 600;
		padding: 0.26em 0.55em;
		border-radius: 999px;
		line-height: 1.3em;
	}

		.badge.verified {
			background: var(--green-50);
			color: var(--green-700);
		}

		/* Every non-verified status (pending/expired/not-verified) shares
		   this one neutral grey treatment — see VERIFICATION_LABELS in
		   js/data.js. */
		.badge.not-verified {
			background: var(--grey-100);
			color: var(--grey-600);
		}

	.tutor-card-footer {
		margin-top: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5em;
		padding-top: 0.7em;
		border-top: solid 1px var(--paleblue-100);
	}

	.price-tag {
		font-size: 1.3em;
		font-weight: 700;
		color: var(--navy-900);
		white-space: nowrap;
		flex-shrink: 0;
	}

		.price-tag span {
			font-size: 0.6em;
			font-weight: 400;
			color: var(--muted);
		}

	.tutor-card-footer .button {
		padding: 0.7em 1.6em;
		font-size: 0.78em;
	}

/* ---------------------------------------------------------------------- */
/* Profile "watch intro video" button + embedded video                    */
/* ---------------------------------------------------------------------- */

/* Solid, high-contrast pill rather than a pale tint — this is the main
   call to action to watch a tutor's intro video (or find their free
   resources), so it needs to stand out against the tagline/meta text
   around it, not blend in with it. */
.video-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--navy-800);
	color: #fff;
	padding: 0.7em 1.3em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(11, 51, 48, 0.25);
	transition: background 0.15s ease, transform 0.15s ease;
}

	.video-link-btn:hover {
		background: var(--navy-700);
		transform: translateY(-1px);
	}

	.video-link-btn .icon:before {
		color: var(--green-100, #fff);
	}

	/* The resources quick-link uses a slightly warmer accent so it reads as
	   a distinct action from "watch intro video" when both are shown. */
	.resources-link-btn {
		background: var(--green-700);
	}

		.resources-link-btn:hover {
			background: var(--green-600, var(--navy-700));
		}

/* Small header with the tutor's circular photo, shown above a real
   YouTube/Vimeo embed so the video section feels personal. */
.video-intro-header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 0.75em;
}

	.video-intro-avatar {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
		border: solid 2px var(--green-100);
	}

	.video-intro-header div {
		display: flex;
		flex-direction: column;
		line-height: 1.3em;
	}

/* "Poster" card shown instead of a plain button when a tutor's video link
   can't be embedded (Drive, Loom, .mp4, etc.) — the tutor's own circular
   photo with a play icon overlay makes a far more inviting click target. */
.video-poster-card {
	display: flex;
	align-items: center;
	gap: 1em;
	background: var(--navy-950);
	border-radius: 10px;
	padding: 1.5em;
	text-decoration: none;
	transition: background 0.15s ease;
}

	.video-poster-card:hover {
		background: var(--navy-900);
	}

	.video-poster-avatar {
		position: relative;
		flex-shrink: 0;
		display: inline-block;
		width: 72px;
		height: 72px;
	}

		.video-poster-avatar img {
			width: 72px;
			height: 72px;
			border-radius: 50%;
			object-fit: cover;
			object-position: center;
			border: solid 3px rgba(255, 255, 255, 0.25);
		}

		.video-poster-play {
			position: absolute;
			bottom: -2px;
			right: -2px;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background: var(--green-600);
			border: solid 2px var(--navy-950);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 0.7em;
		}

	.video-poster-label {
		color: #fff;
		font-weight: 600;
	}

/* .video-poster-trigger reuses .video-poster-card's look on a real <button>
   (rather than a link) for embeddable videos, since clicking it opens the
   pop-up player instead of navigating anywhere — this just strips the
   default button chrome so it matches. */
.video-poster-trigger {
	border: 0;
	width: 100%;
	font: inherit;
	cursor: pointer;
}

/* Plus-only "find me elsewhere" row (website + social links), shown just
   below the intro video — small pill buttons rather than a plain list of
   links, matching the badge/tag styling used throughout the rest of the
   profile. */
.social-links-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

	.social-link {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		background: var(--paleblue-50);
		color: var(--navy-800);
		font-size: 0.9em;
		font-weight: 600;
		padding: 0.55em 1em;
		border-radius: 999px;
		text-decoration: none;
		transition: background 0.15s ease, transform 0.15s ease;
	}

		.social-link:hover {
			background: var(--paleblue-100);
			transform: translateY(-1px);
		}

		.social-link .icon {
			color: var(--green-600);
		}

/* Intro-video pop-up modal — the real embed is only inserted into
   #video-modal-embed at the moment it's opened (see wireVideoModal() in
   tutor.js), so nothing plays until the visitor actually clicks to watch,
   and closing it removes the embed again so playback actually stops. */
.video-modal {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}

	.video-modal-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(10, 20, 18, 0.85);
	}

	.video-modal-dialog {
		position: relative;
		width: 100%;
		max-width: 800px;
	}

	.video-modal-close {
		position: absolute;
		top: -2.6em;
		right: 0;
		background: none;
		border: 0;
		color: #fff;
		font-size: 2em;
		line-height: 1;
		cursor: pointer;
		padding: 0.2em;
	}

	.video-modal-dialog .video-intro-header {
		border-radius: 10px 10px 0 0;
	}

	.video-modal-dialog .video-embed {
		margin: 0;
		border-radius: 0 0 10px 10px;
	}

/* Application-form pop-up (become-a-tutor.html) — reuses the video modal's
   backdrop/close-button chrome, but a form needs real height to fill and
   scroll in on its own (a 16:9 box would crop it), so the frame is sized
   directly rather than via the video's aspect-ratio box. */
.form-modal-dialog {
	max-width: 640px;
}

	.form-modal-frame-wrap {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		height: min(80vh, 720px);
	}

		#form-modal-frame {
			display: block;
			width: 100%;
			height: 100%;
			border: 0;
		}

	.form-modal-fallback {
		text-align: center;
		color: rgba(255, 255, 255, 0.75);
		margin: 0.75em 0 0 0;
	}

		.form-modal-fallback a {
			color: #fff;
			font-weight: 600;
		}

/* Responsive 16:9 embed for a tutor's real YouTube/Vimeo intro video link. */
.video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	background: var(--navy-950);
}

	.video-embed iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

/* The homepage "Are you a tutor?" banner's heading uses the template's big
   2em/uppercase/4px-letter-spacing styling — this button sits in its own
   div (not a <p>, so it's not swept up in that font-size cascade) with
   letter-spacing reset, so it renders at a normal, clickable button size
   instead of shrinking along with the heading's scale. */
.banner-cta {
	margin-top: 1.25em;
	letter-spacing: normal;
}

	.banner-cta .button {
		font-size: 1em;
		padding: 0.85em 1.8em;
	}

/* Cards grid */

/* auto-fill (not a fixed column count) means a short results list — even a
   single card — never gets stretched across the full row leaving a big
   empty gap next to it; each card keeps a sensible width and the grid
   simply wraps once there are enough of them to fill a row. */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5em;
	justify-content: start;
}

	.cards-grid > * {
		max-width: 360px;
	}

	@media (max-width: 736px) {
		.cards-grid {
			grid-template-columns: 1fr;
		}

		.cards-grid > * {
			max-width: none;
		}
	}

/* Narrower container (search results sit next to a filter sidebar).
   Centered rather than left-aligned: when filters narrow the results down
   to just one or two tutors, a left-aligned card looked stranded with a
   large empty gap next to it — centering keeps a sparse result set from
   reading as broken or unfinished. */
.results-cards-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	justify-content: center;
}

	@media (max-width: 736px) {
		.results-cards-grid { grid-template-columns: 1fr; }
	}

/* ---------------------------------------------------------------------- */
/* Filter panel (find-a-tutor)                                            */
/* ---------------------------------------------------------------------- */

.filter-panel {
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	padding: 1.5em;
}

/* Sticky enquiry sidebar on the tutor profile page (desktop only). #sidebar
   is a flex item alongside #content (see .row in main.css, which uses
   display:flex — that stretches #sidebar to the same height as the main
   column automatically), so position:sticky here naturally stops at the
   bottom of #sidebar — i.e. wherever the main content column ends — and
   never creeps into the footer below the row, without any extra JS bounds-
   checking. Gated on min-height as well as min-width: on a short viewport
   (e.g. a laptop with the browser window not maximised) a sticky panel
   taller than the screen would leave part of the form permanently
   unreachable, so below that height it just reverts to being an ordinary,
   normally-scrolling block. */
@media (min-width: 737px) and (min-height: 600px) {
	/* No max-height/overflow-y here on purpose — with the panel now shorter
	   (the "tutor's own email" notice above was removed, and the form
	   itself is compact), it fits comfortably above the fold on ordinary
	   screens without ever needing its own internal scrollbar, which read
	   as an awkward nested-scroll-area inside the page. On the rare short
	   window where it's genuinely taller than the viewport, it just sticks
	   at the top and its lower edge scrolls off with the page, the same as
	   any other sticky element — never a scrollbar boxed inside the card. */
	#enquiry {
		position: sticky;
		top: 24px;
	}
}

	/* Comfortable, readable enquiry form fields (Spec B item 4) — the
	   template's default form controls are fine elsewhere but a touch
	   small for what is often the single most important form on the
	   site. */
	#enquiry input,
	#enquiry textarea {
		font-size: 1em;
		padding: 0.8em 0.9em;
	}

	#enquiry textarea {
		min-height: 9em;
	}

	/* Wraps the form so the success overlay below can be positioned exactly
	   over it (and nothing else in the card — the "Send an enquiry" heading
	   stays visible above, so it's clear which form just went through). */
	.enquiry-form-wrap {
		position: relative;
	}

	.enquiry-success-overlay {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0.35em;
		padding: 1.5em;
		background: var(--green-50);
		border: solid 1px var(--green-100);
		border-radius: 12px;
		animation: enquiry-success-in 0.2s ease;
	}

		.enquiry-success-overlay .icon {
			font-size: 2.2em;
			color: var(--green-600);
			margin-bottom: 0.2em;
		}

		.enquiry-success-overlay strong {
			font-size: 1.15em;
			color: var(--navy-900);
		}

		.enquiry-success-overlay span:not(.icon) {
			color: var(--muted);
			font-size: 0.92em;
		}

	@keyframes enquiry-success-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@media (prefers-reduced-motion: reduce) {
		.enquiry-success-overlay {
			animation: none;
		}
	}

	.filter-panel h4 {
		font-size: 0.95em;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: var(--navy-800);
		margin: 1.2em 0 0.6em 0;
	}

		.filter-panel h4:first-child {
			margin-top: 0;
		}

	.filter-group {
		max-height: 12em;
		overflow-y: auto;
		padding-right: 0.25em;
	}

	/* A checked filter is highlighted (tinted background + bold, coloured
	   label) and gets a tick, so it's obvious at a glance which filters are
	   currently active — not just a small native checkbox that's easy to
	   miss. */
	.filter-checkbox {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: 0.9em;
		margin: 0.15em 0;
		padding: 0.35em 0.5em;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.15s ease;
	}

		.filter-checkbox:hover {
			background: var(--paleblue-50);
		}

		.filter-checkbox input {
			margin: 0;
			width: auto;
			accent-color: var(--green-600);
		}

		.filter-checkbox:has(input:checked) {
			background: var(--green-50);
		}

		.filter-checkbox input:checked ~ span {
			color: var(--green-700);
			font-weight: 700;
		}

		.filter-checkbox input:checked ~ span:after {
			content: '\2713';
			margin-left: 0.4em;
			color: var(--green-600);
		}

	.filter-price-row {
		display: flex;
		align-items: center;
		gap: 0.5em;
	}

		.filter-price-row input {
			margin: 0;
			width: 0; /* combined with flex, forces both inputs to share the
			             row equally instead of overflowing the panel */
			flex: 1 1 0;
			min-width: 0;
			box-sizing: border-box;
		}

/* Subject/Level filters shown as compact dropdowns above the results, so
   they're visible the moment someone lands on Find a Tutor without taking
   up much space — only the sort-of-panel opens when someone actually wants
   to pick a subject or level. */
/* Single compact toolbar: Subject/Level filters on the left, result count
   + Sort on the right — replaces what used to be three separate blocks
   (a heading with the count, a filter-dropdown row, and a results-toolbar
   with just Sort) each with their own margin, which is what was pushing
   the actual card grid well below the top of the filters sidebar. */
.search-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em 1.25em;
	margin-bottom: 1.25em;
	padding-bottom: 1.1em;
	border-bottom: solid 1px var(--border);
}

	.search-toolbar-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75em;
	}

	.search-toolbar-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1em;
	}

		.search-toolbar-meta #results-count {
			margin: 0;
			white-space: nowrap;
		}

	/* On mobile the toolbar sits directly under the centred "Find a Tutor"
	   heading, so a left-hanging row of filter/sort controls read as messy
	   and unbalanced against it. Centring the whole row — the Subject/Level
	   buttons, the "N tutors found" count and Sort control — matches the
	   heading above it and looks tidier than the desktop's edge-to-edge
	   space-between layout. */
	@media (max-width: 600px) {
		.search-toolbar {
			justify-content: center;
			text-align: center;
		}

		.search-toolbar-filters {
			width: 100%;
			justify-content: center;
		}

		.search-toolbar-meta {
			width: 100%;
			justify-content: center;
		}
	}

/* The sidebar's remaining filters (Verification, price range) stack above
   the results on mobile/tablet, since #sidebar and #content share one row
   that wraps to a single column below the "medium" breakpoint (see
   .col-12-medium). Left as an always-open panel, that pushed every tutor
   card below a full screen of checkboxes before anyone had scrolled past
   it. Making the panel a <details> collapses it to just its own "Filters"
   header by default there, so results are visible immediately — it opens
   on tap for anyone who wants to narrow further. */
.mobile-filter-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	cursor: pointer;
	list-style: none;
}

	.mobile-filter-summary::-webkit-details-marker,
	.mobile-filter-summary::marker {
		display: none;
		content: '';
	}

	.mobile-filter-summary .chev {
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		border-right: solid 2px currentColor;
		border-bottom: solid 2px currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
		opacity: 0.6;
	}

	.mobile-filter-panel[open] .mobile-filter-summary .chev {
		transform: rotate(-135deg);
	}

.mobile-filter-body {
	margin-top: 1em;
}

/* Above the "medium" breakpoint (see .col-12-medium in main.css), the
   sidebar sits alongside the results as its own column again, so the
   collapsing behaviour is switched off — the panel just always shows in
   full, exactly as before, with no click needed. Forcing display:block on
   the body overrides the browser's native "hide everything but <summary>
   when not open" behaviour regardless of the details element's open
   state. */
@media (min-width: 981px) {
	.mobile-filter-summary {
		cursor: default;
	}

	.mobile-filter-summary .chev {
		display: none;
	}

	.mobile-filter-body {
		display: block !important;
	}
}

.filter-dropdown {
	position: relative;
}

	.filter-dropdown summary {
		list-style: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		background: #fff;
		border: solid 1px var(--border);
		border-radius: 999px;
		padding: 0.65em 1.3em;
		font-weight: 600;
		color: var(--navy-800);
		font-size: 0.92em;
		transition: border-color 0.15s ease, color 0.15s ease;
	}

		.filter-dropdown summary::-webkit-details-marker,
		.filter-dropdown summary::marker {
			display: none;
			content: '';
		}

		.filter-dropdown summary:hover {
			border-color: var(--green-600);
		}

		.filter-dropdown[open] summary {
			border-color: var(--green-600);
			color: var(--green-700);
		}

		.filter-dropdown summary .chev {
			display: inline-block;
			width: 0.5em;
			height: 0.5em;
			border-right: solid 2px currentColor;
			border-bottom: solid 2px currentColor;
			transform: rotate(45deg);
			transition: transform 0.15s ease;
			opacity: 0.6;
		}

		.filter-dropdown[open] summary .chev {
			transform: rotate(-135deg);
		}

		.filter-dropdown summary .filter-count {
			color: var(--green-700);
			font-weight: 700;
		}

	.filter-dropdown-panel {
		position: absolute;
		top: calc(100% + 0.5em);
		left: 0;
		background: #fff;
		border: solid 1px var(--border);
		border-radius: 12px;
		box-shadow: 0 16px 32px rgba(7, 26, 51, 0.16);
		padding: 0.75em 1em;
		min-width: 260px;
		max-height: 16em;
		overflow-y: auto;
		z-index: 30;
	}

	/* On mobile the Subject dropdown sits hard against the left edge of the
	   toolbar, so anchoring the panel to its OWN right edge (as on desktop)
	   dragged a 260px-wide panel mostly off-screen to the left — it rendered
	   clipped/overlapping the page behind it. Anchoring both panels to the
	   shared toolbar row instead keeps them fully on-screen regardless of
	   which button opened them. */
	@media (max-width: 600px) {
		.search-toolbar-filters {
			position: relative;
		}

		.filter-dropdown {
			position: static;
		}

		.filter-dropdown-panel {
			left: 0;
			right: 0;
			min-width: 0;
			max-width: none;
			width: auto;
		}
	}

	/* Needs !important: the template forces every <button> (including this
	   one, stripped of its pill styling above) to white text via a broad
	   `button { color: #fff !important; }` rule in main.css, which made
	   this read as invisible white-on-white against the panel's own white
	   background. */
	.filter-reset {
		display: inline-block;
		width: auto;
		margin-top: 1.2em;
		font-size: 0.85em;
		color: var(--green-700) !important;
		cursor: pointer;
		text-decoration: underline;
		text-transform: none;
		background: none;
		border: none;
		box-shadow: none;
		padding: 0;
	}

	/* "Sort by" styled to match the Subject/Level filter pills rather than
	   a bare browser <select>, which looked out of place next to them. */
	.sort-control {
		display: flex;
		align-items: center;
		gap: 0.6em;
		cursor: pointer;
	}

		.sort-control-label {
			font-weight: 600;
			color: var(--navy-800);
			font-size: 0.92em;
		}

		.sort-control .select-wrap {
			flex: 0 0 auto;
			position: relative;
			display: inline-flex;
		}

			.sort-control select {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				width: auto;
				margin: 0;
				background: #fff;
				border: solid 1px var(--border);
				border-radius: 999px;
				box-shadow: none;
				color: var(--navy-800);
				font-weight: 600;
				font-size: 0.92em;
				padding: 0.65em 2.2em 0.65em 1.2em;
				cursor: pointer;
				transition: border-color 0.15s ease, color 0.15s ease;
			}

			.sort-control select:hover,
			.sort-control select:focus {
				border-color: var(--green-600);
				color: var(--green-700);
			}

			.sort-control .select-wrap:after {
				right: 1em;
				border-color: var(--green-700);
				opacity: 0.6;
			}

.empty-state {
	text-align: center;
	padding: 4em 2em;
	border: dashed 2px var(--paleblue-300);
	border-radius: 14px;
	color: var(--muted);
}

	/* The template's base `p { text-align: justify; }` otherwise wins over
	   the `text-align: center` above (justify is a distinct value, not
	   something center overrides by inheritance) — a short single-line
	   paragraph then renders flush-left instead of centred. */
	.empty-state p {
		text-align: center;
	}

/* ---------------------------------------------------------------------- */
/* Membership comparison table                                            */
/* ---------------------------------------------------------------------- */

.plan-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
}

	@media (max-width: 736px) {
		.plan-cards { grid-template-columns: 1fr; }
	}

.plan-card {
	background: #fff;
	border: solid 2px var(--border);
	border-radius: 14px;
	padding: 2em;
	/* #features sets text-align:center site-wide for its section headers —
	   override it here so wrapped feature lines stay left-aligned under the
	   checkmark instead of each wrapped line re-centering on its own. */
	text-align: left;
}

	.plan-card.featured {
		border-color: var(--navy-900);
	}

	.plan-card .plan-name {
		font-weight: 700;
		color: var(--navy-900);
		text-align: center;
	}

	.plan-card .plan-price {
		font-size: 2.2em;
		font-weight: 700;
		color: var(--navy-900);
		margin: 0.2em 0;
		text-align: center;
	}

	.plan-card .plus-tag {
		display: table;
		margin: 0 auto 0.4em auto;
	}

		.plan-card .plan-price span {
			font-size: 0.4em;
			font-weight: 400;
			color: var(--muted);
		}

	/* A deliberately prominent callout — not just another feature bullet —
	   since this is the single biggest practical difference from most
	   other tutoring marketplaces, which take a cut of every lesson booked
	   through them. Sits between the "Why join" heading and the three
	   feature columns so it can't be scrolled past unnoticed. */
	.commission-callout {
		display: flex;
		align-items: center;
		gap: 0.9em;
		background: var(--green-50);
		border: solid 1px var(--green-200, var(--green-100));
		border-radius: 12px;
		padding: 1.1em 1.4em;
		margin: 0 0 2em 0;
		color: var(--navy-800);
		font-size: 0.98em;
	}

		.commission-callout .icon {
			font-size: 1.6em;
			color: var(--green-600);
			flex-shrink: 0;
		}

		@media (max-width: 600px) {
			.commission-callout {
				flex-direction: column;
				text-align: center;
			}
		}

	.plan-price-note {
		text-align: center;
		color: var(--muted);
		font-size: 0.85em;
		margin: -0.3em 0 1.2em 0;
	}

	.plan-card ul.plan-features {
		list-style: none;
		margin: 1.5em 0;
		padding: 0;
	}

		.plan-card ul.plan-features li {
			display: flex;
			align-items: flex-start;
			gap: 0.6em;
			font-size: 0.92em;
			margin: 0.65em 0;
		}

			.plan-card ul.plan-features li:before {
				content: '\2713';
				color: var(--green-600);
				font-weight: 700;
			}

/* ---------------------------------------------------------------------- */
/* Profile content sections (About / Video / Qualifications / etc.)       */
/* ---------------------------------------------------------------------- */

/* The template's own #content > article rule (main.css) draws each
   section's separator as a border-top PLUS an inset box-shadow offset a
   few pixels below it — two visible lines, not one — and adds 5em of
   margin+padding on top of that, which is why the About/Video/
   Qualifications sections had large gaps and doubled dividers (Spec
   item 6). Replaced here with a single subtle line and consistent,
   comfortable spacing. Scoped to the tutor profile's main column only. */
body.tutor-page #content > article {
	border-top: solid 1px var(--border);
	box-shadow: none;
	margin: 2em 0 0 0;
	padding: 2em 0 0 0;
}

	body.tutor-page #content > article:first-child {
		border-top: 0;
		margin: 0;
		padding: 0;
	}

/* ---------------------------------------------------------------------- */
/* Verification badges panel (tutor profile)                              */
/* ---------------------------------------------------------------------- */

.verification-panel {
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	padding: 1.25em 1.5em;
}

	.verification-row {
		padding: 0.75em;
		border-radius: 10px;
		margin-bottom: 0.6em;
		font-size: 0.9em;
	}

		.verification-row-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.75em;
		}

		.verification-row-explanation {
			margin: 0.4em 0 0 0;
			font-size: 0.85em;
			font-weight: 400;
			opacity: 0.9;
		}

	/* Compact status rows used on the profile page (Spec B item 7) — just
	   the label and current status, at a glance; per-tutor explanations
	   live in the collapsed "How our verification works" details below,
	   not inline here, which is what keeps this section short. */
	#p-verification {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.verification-row-compact {
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.45em 0.85em;
		border-radius: 999px;
		font-size: 0.85em;
	}

		.verification-row-compact span {
			font-weight: 400;
			opacity: 0.85;
		}

		.verification-row-compact strong {
			font-weight: 700;
		}

	/* A <details> disclosure, collapsed by default — "What these badges
	   mean" is useful reference but doesn't need to sit open by default
	   taking up space on every profile. Generalised as ".info-accordion" so
	   any page can reuse the same collapsed-by-default treatment (e.g.
	   become-a-tutor.html's "What information will I need?" panel);
	   ".verification-explainer" is kept as an alias purely so the existing
	   profile-page markup doesn't need renaming. */
	.info-accordion,
	.verification-explainer {
		background: var(--paleblue-50);
		border-radius: 10px;
		padding: 1em;
		font-size: 0.85em;
		color: var(--navy-700);
		margin-top: 1em;
	}

		.info-accordion summary,
		.verification-explainer summary {
			list-style: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 0.6em;
			font-weight: 700;
			color: var(--navy-800);
		}

		.info-accordion summary::-webkit-details-marker,
		.info-accordion summary::marker,
		.verification-explainer summary::-webkit-details-marker,
		.verification-explainer summary::marker {
			display: none;
			content: '';
		}

		.info-accordion summary .chev,
		.verification-explainer summary .chev {
			display: inline-block;
			width: 0.5em;
			height: 0.5em;
			border-right: solid 2px currentColor;
			border-bottom: solid 2px currentColor;
			transform: rotate(45deg);
			transition: transform 0.15s ease;
			opacity: 0.6;
		}

		.info-accordion[open] summary .chev,
		.verification-explainer[open] summary .chev {
			transform: rotate(-135deg);
		}

		.info-accordion-body,
		.verification-explainer-body {
			margin-top: 0.85em;
		}

		/* Kept separate: the existing verification explainer relies on a
		   plain disc bullet per row, while info-accordion content (e.g. the
		   "What information will I need?" list) supplies its own checkmark
		   character per item and needs no bullet at all. */
		.verification-explainer ul {
			list-style: disc;
			padding-left: 1.3em;
			margin: 0.5em 0;
		}

		.info-accordion ul {
			list-style: none;
			padding-left: 0;
			margin: 0.5em 0;
		}

		.info-accordion li,
		.verification-explainer li {
			margin: 0.4em 0;
		}

/* The legal/scope disclaimer now lives inside the same "Verification
   details and important information" accordion as the per-status
   explanations (Spec item 9), rather than as its own always-visible box —
   this is what keeps the section compact by default while keeping the
   wording itself, and the fact that it's provided, unchanged. It's set off
   from the explainer text above it with its own subtle divider and a
   slightly muted background so the two stay visually distinct. */
.verification-disclaimer {
	margin-top: 1em;
	padding-top: 1em;
	border-top: solid 1px var(--border);
	font-size: 0.95em;
	color: var(--ink);
}

	.verification-disclaimer h4 {
		margin-bottom: 0.6em;
		font-size: 1em;
		color: var(--navy-800);
	}

	.verification-disclaimer p {
		margin: 0.6em 0;
	}

	.verification-disclaimer a {
		font-weight: 600;
	}

/* ---------------------------------------------------------------------- */
/* Notices / callouts                                                     */
/* ---------------------------------------------------------------------- */

.notice {
	border-radius: 10px;
	padding: 1em 1.25em;
	font-size: 0.9em;
	margin-bottom: 1.5em;
	display: flex;
	gap: 0.75em;
	align-items: flex-start;
}

	.notice .icon:before {
		margin-top: 0.15em;
	}

	.notice.amber {
		background: var(--amber-50);
		color: var(--amber-700);
		border: solid 1px var(--amber-100);
	}

	.notice.red {
		background: var(--red-50);
		color: var(--red-600);
		border: solid 1px #f3caca;
	}

	.notice.green {
		background: var(--green-50);
		color: var(--green-700);
		border: solid 1px var(--green-100);
	}

	.notice.blue {
		background: var(--paleblue-50);
		color: var(--navy-800);
		border: solid 1px var(--paleblue-200);
	}

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

.resource-card {
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: 0 1px 2px rgba(7, 26, 51, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

	.resource-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 24px rgba(7, 26, 51, 0.1);
	}

	/* A plain colour block with just text felt flat next to the tutor cards
	   elsewhere on the site — a big, friendly subject icon standing in for a
	   real thumbnail (there rarely is one for a worksheet/PDF) makes the
	   card read as something worth clicking rather than a bare link. */
	.resource-cover {
		position: relative;
		height: 110px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, var(--navy-900), var(--green-700));
	}

		.resource-cover-icon {
			font-size: 2.3em;
			color: rgba(255, 255, 255, 0.9);
		}

		/* The subject/level tag now floats as a small white pill straddling
		   the cover and the body, badge-style, instead of sitting flush
		   inside the dark banner as plain caps text. */
		.resource-cover-tag {
			position: absolute;
			left: 1.1em;
			bottom: -0.9em;
			background: #fff;
			color: var(--navy-800);
			font-weight: 700;
			font-size: 0.72em;
			text-transform: uppercase;
			letter-spacing: 0.6px;
			padding: 0.4em 0.9em;
			border-radius: 999px;
			box-shadow: 0 4px 10px rgba(7, 26, 51, 0.14);
		}

	.resource-body {
		position: relative;
		padding: 1.75em 1.25em 1.25em 1.25em;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.resource-body h3 {
		font-size: 1.05em;
		margin: 0.3em 0;
	}

	.resource-footer {
		margin-top: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75em;
		padding-top: 1em;
		border-top: solid 1px var(--paleblue-100);
	}

	/* Spec item 8: on narrow phones, a "Free" label and a pill-shaped
	   "Download" button sitting side by side (as on wider cards) left very
	   little room for either, crowding them together. Stacking the price
	   above a full-width button gives each its own line and a properly
	   sized tap target instead. */
	@media (max-width: 480px) {
		.resource-footer {
			flex-direction: column;
			align-items: stretch;
			gap: 0.6em;
		}

			.resource-footer .button {
				text-align: center;
				width: 100%;
			}
	}

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

.review-item {
	border: solid 1px var(--border);
	border-radius: 10px;
	padding: 1em 1.2em;
	margin-bottom: 0.75em;
}

	.review-item .review-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.9em;
	}

	.review-item .review-date {
		color: var(--muted);
		font-size: 0.88em;
	}

	.review-source-note {
		background: var(--paleblue-50);
		border-radius: 8px;
		padding: 0.5em 0.75em;
		font-size: 0.86em;
		color: var(--navy-700);
		margin-top: 0.6em;
		display: flex;
		justify-content: space-between;
		gap: 0.5em;
		flex-wrap: wrap;
	}

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

#footer {
	background: var(--navy-950);
	color: var(--paleblue-100);
}

	#footer h2 { color: #fff; }
	/* The template's base "strong, b { color: #666 }" rule otherwise wins
	   here, making "Get in touch." nearly invisible against the dark
	   background — force it back to white. */
	#footer h2 strong { color: #fff; }
	#footer h3 { color: #fff; font-size: 1em; }
	#footer a { color: var(--paleblue-100); }
	#footer a:hover { color: #fff; }
	#footer p { color: rgba(232, 241, 251, 0.75); }

	#footer .footer-links {
		list-style: none;
		padding: 0;
		margin: 0.5em 0 0 0;
	}

		#footer .footer-links li {
			margin: 0.5em 0;
		}

	/* The "Questions? Get in touch." heading above this row is centred by
	   the template, but the two columns underneath (For Parents/For Tutors)
	   were left flush-left within their own half — fine once they stack on
	   narrow screens, but on desktop it read as lopsided and disconnected
	   from the centred heading above, with a lot of dead space either side.
	   Centring both the heading (h3) and the link list underneath it in
	   every column, at every width, keeps the whole block reading as one
	   centred unit. */
	#footer .row > * {
		text-align: center;
	}

	#copyright {
		color: rgba(232, 241, 251, 0.55);
		font-size: 0.8em;
	}

		#copyright a { color: rgba(232, 241, 251, 0.75); }

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.small-muted { font-size: 0.93em; color: var(--muted); }
.section-intro { max-width: 46em; margin: 0 auto 2.5em auto; text-align: center; }
.section-intro h2 { margin-bottom: 0.4em; }
.section-intro p { color: var(--muted); }

table.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
}

	table.spec-table th, table.spec-table td {
		text-align: left;
		padding: 0.7em 0.9em;
		border-bottom: solid 1px var(--paleblue-100);
	}

	table.spec-table th {
		background: var(--paleblue-50);
		color: var(--navy-800);
	}

.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	background: var(--navy-900);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 10001;
	border-radius: 0 0 8px 0;
}

	.skip-link:focus {
		left: 0;
		top: 0;
	}

/* ---------------------------------------------------------------------- */
/* Loading skeletons — tutor profile, Find a Tutor, Resources             */
/* ---------------------------------------------------------------------- */
/* Shown immediately (no waiting on JS or the Google Sheets fetch) so a
 * visitor never sees a blank page while data loads, then swapped out for
 * the real content once it's ready. Built from the same forest-green/pale-
 * mint palette as everything else, just muted, so it reads as "this part
 * of the page" rather than a generic grey placeholder. */

.skeleton {
	background: linear-gradient(100deg, var(--paleblue-100) 30%, var(--paleblue-50) 50%, var(--paleblue-100) 70%);
	background-size: 250% 100%;
	animation: tt-shimmer 1.6s ease-in-out infinite;
	border-radius: 8px;
	color: transparent !important;
}

@keyframes tt-shimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -20% 0; }
}

/* Respect the OS/browser "reduce motion" setting — the shimmer sweep is
 * purely decorative, so it's replaced with a plain static tint rather than
 * disabling the skeleton altogether. */
@media (prefers-reduced-motion: reduce) {
	.skeleton {
		animation: none;
		background: var(--paleblue-100);
	}
}

.skeleton-circle { border-radius: 50%; }

.skeleton-line {
	height: 0.85em;
	margin: 0.5em 0;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.wide { width: 100%; }

/* Tutor profile page skeleton — mirrors the real header/content/sidebar
 * layout closely enough that swapping it for the real page causes no
 * visible layout jump (see #profile-skeleton in tutor.html / tutor.js). */
.profile-skeleton-header {
	display: flex;
	gap: 1.5em;
	align-items: flex-start;
	flex-wrap: wrap;
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	padding: 1.75em;
}

	.profile-skeleton-avatar {
		width: 110px;
		height: 110px;
		flex-shrink: 0;
	}

	.profile-skeleton-main {
		flex: 1;
		min-width: 220px;
	}

	.profile-skeleton-side {
		min-width: 150px;
		text-align: center;
	}

		.profile-skeleton-side .skeleton-line {
			margin-left: auto;
			margin-right: auto;
		}

		.profile-skeleton-price {
			height: 2em;
			width: 70%;
			margin: 0 auto 0.75em auto;
		}

		.profile-skeleton-btn {
			height: 2.6em;
			width: 100%;
			border-radius: 999px;
		}

.profile-skeleton-body {
	display: flex;
	gap: 2em;
	margin-top: 2em;
	flex-wrap: wrap;
}

	.profile-skeleton-content {
		flex: 1 1 60%;
		min-width: 280px;
	}

	.profile-skeleton-sidebar {
		flex: 1 1 30%;
		min-width: 260px;
		background: #fff;
		border: solid 1px var(--border);
		border-radius: 14px;
		padding: 1.5em;
	}

	.profile-skeleton-block {
		background: #fff;
		border: solid 1px var(--border);
		border-radius: 14px;
		padding: 1.5em;
		margin-bottom: 1.5em;
	}

.skeleton-caption {
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: var(--muted);
	font-size: 0.9em;
	margin: 1em 0;
}

	.skeleton-caption .skeleton-dot {
		width: 0.5em;
		height: 0.5em;
		border-radius: 50%;
		background: var(--green-600);
		animation: tt-pulse-dot 1s ease-in-out infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.skeleton-caption .skeleton-dot {
			animation: none;
		}
	}

@keyframes tt-pulse-dot {
	0%, 100% { opacity: 0.35; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1); }
}

/* Card-shaped skeletons used in the Find a Tutor and Resources grids —
 * same outer shape/size as a real .tutor-card / .resource-card so the grid
 * doesn't jump when real cards replace them. */
.tutor-card-skeleton {
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	padding: 0.95em 1.15em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

	.tutor-card-skeleton-top {
		display: flex;
		gap: 0.85em;
		align-items: flex-start;
	}

	.tutor-card-skeleton .skeleton-circle {
		width: 56px;
		height: 56px;
		flex-shrink: 0;
	}

	.tutor-card-skeleton-heading {
		flex: 1;
		min-width: 0;
	}

.resource-card-skeleton {
	background: #fff;
	border: solid 1px var(--border);
	border-radius: 14px;
	overflow: hidden;
}

	.resource-card-skeleton-cover {
		height: 110px;
	}

	.resource-card-skeleton-body {
		padding: 1.25em;
	}

/* Inline error / retry state shared by all three pages' loading states. */
.load-error-state {
	text-align: center;
	padding: 3em 2em;
	border: dashed 2px var(--paleblue-300);
	border-radius: 14px;
	background: var(--paleblue-50);
}

	.load-error-state .icon {
		font-size: 1.8em;
		color: var(--amber-700);
		margin-bottom: 0.4em;
		display: block;
	}

	.load-error-state h3 {
		margin-bottom: 0.4em;
	}

	.load-error-state p {
		text-align: center;
		color: var(--muted);
		margin-bottom: 1.2em;
	}

/* ---------------------------------------------------------------------- */
/* About page — founder story                                             */
/* ---------------------------------------------------------------------- */

/* Photo + name/title right at the start of the founder story, so it reads
   as a real person telling you why they built this rather than an
   anonymous block of "About us" copy. */
.founder-block {
	display: flex;
	align-items: center;
	gap: 1.1em;
	margin: 1.2em 0 1.5em 0;
}

	.founder-photo {
		width: 96px;
		height: 96px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
		box-shadow: 0 4px 14px rgba(7, 26, 51, 0.12);
	}

	.founder-name {
		font-weight: 700;
		font-size: 1.2em;
		color: var(--navy-900);
	}

	.founder-title {
		color: var(--muted);
		font-size: 0.92em;
	}

/* Slightly larger type and shorter paragraphs (each one a single idea) read
   far more easily than one dense block of body-sized text — this is the
   page's strongest material, so it's worth the extra breathing room. */
.founder-story p {
	font-size: 1.08em;
	line-height: 1.65em;
}

@media (max-width: 600px) {
	.founder-block {
		flex-direction: column;
		text-align: center;
	}
}

/* Two-button close for a page (About: Find a Tutor / Become a Tutor) —
   centred, wraps to a stacked full-width pair on narrow screens rather than
   squeezing both buttons onto one cramped line. */
.cta-button-row {
	display: flex;
	justify-content: center;
	gap: 1em;
	flex-wrap: wrap;
	margin-top: 2em;
}

	.cta-button-row .button {
		min-width: 200px;
		text-align: center;
	}

	@media (max-width: 500px) {
		.cta-button-row {
			flex-direction: column;
			align-items: stretch;
		}
	}