/*
Theme Name: Robinson Roofers
Theme URI: https://www.robinson-roofers.co.uk/
Author: Welch Marketing Ltd
Author URI: https://www.welchmarketing.co.uk/
Description: Premium, plugin free WordPress theme built for Robinson Roofers, roofing and property maintenance across London, Kent and Essex. Self building pages, Welch Settings admin panel, lead capture with webhook delivery, GDPR cookie consent, schema and local SEO.
Version: 1.1.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: robinson-roofers
Tags: business, roofing, local-business, custom-menu, custom-logo, block-styles, wide-blocks, accessibility-ready
*/

/* -------------------------------------------------------------------------
 * 1. Self hosted fonts. Nothing calls a third party, so no font request can
 *    fire before the visitor has given cookie consent.
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "DM Sans";
	src: url("assets/fonts/dmsans-var.woff2") format("woff2-variations");
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-var.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
 * 2. Design tokens. The colour values are overridden from Welch Settings, so
 *    the client can change the palette without touching this file.
 * ---------------------------------------------------------------------- */
:root {
	--brand: #0f2942;
	--brand-2: #17395a;
	--brand-3: #0a1b29;
	--accent: #289afb;
	--accent-2: #77bcf8;

	/* The logo blue is bright, so it only reaches 2.96 to 1 against white. It
	   is fine as a large fill but fails as small text, and white text on top of
	   it fails too. These two darker steps carry the accent wherever it has to
	   be readable, and dark ink sits on the accent rather than white. */
	--accent-deep: #0f66b3;
	--accent-deeper: #0c5697;
	--accent-ink: #08202f;

	--ink: #0e202e;
	--muted: #54677a;
	--cream: #f1f6fa;
	--line: #dce6ee;
	--white: #ffffff;
	--ok: #1f7a4d;
	--err: #a52121;

	--font-display: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--wrap: 1200px;
	--gutter: clamp(1.15rem, 4vw, 2.5rem);
	--radius: 14px;
	--radius-lg: 22px;
	--speed: .22s;
	--section: clamp(3.6rem, 7vw, 5.5rem);
	--cta-bar: 58px;
	--shadow: 0 18px 46px rgba(10, 27, 41, .10);
	--shadow-lg: 0 30px 70px rgba(10, 27, 41, .18);
}

/* -------------------------------------------------------------------------
 * 3. Reset and base
 * ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 0;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 .6em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.45rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-2); }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: .5rem; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
blockquote {
	margin: 1.6rem 0; padding: 1.1rem 1.4rem;
	border-left: 4px solid var(--accent); background: var(--cream); border-radius: 0 var(--radius) var(--radius) 0;
}
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
th, td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-display); font-weight: 700; }

/* Focus states, visible and never removed. WCAG 2.2 AA. */
:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--brand); color: #fff; padding: .9rem 1.4rem;
	font-family: var(--font-display); font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
[tabindex="-1"]:focus { outline: none; }
.skip-link:focus { left: 0; color: #fff; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Icons carry intrinsic size on the element, so a missing stylesheet can never
   let them fall back to the 300x150 replaced element default. */
.icon {
	width: 1em; height: 1em; display: inline-block; flex: none;
	vertical-align: -.125em; fill: currentColor;
}

/* -------------------------------------------------------------------------
 * 4. Layout helpers and section tones
 * ---------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Narrow reading column: the wrapper keeps its full container width and its
   own centring; only the children are capped and pulled left, so the column
   starts on the same left line as the hero headline. */
.wrap.narrow > * { max-width: 48rem; margin-left: 0; margin-right: auto; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .66); }
.tone-white { background: var(--white); }
.tone-cream { background: var(--cream); }
.tone-dark { background: var(--brand); color: #d5e2ec; }
.tone-dark h2, .tone-dark h3, .tone-dark h4 { color: #fff; }
.tone-dark a:not(.btn) { color: var(--accent-2); }

/* Two sections that share a tone must not stack their padding. */
.tone-white + .tone-white,
.tone-cream + .tone-cream,
.tone-dark + .tone-dark { padding-top: 0; }

.eyebrow {
	font-family: var(--font-display); font-weight: 700; font-size: .78rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
	margin: 0 0 .8rem;
}
.tone-white .eyebrow, .tone-cream .eyebrow { color: var(--accent-deep); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head p { color: var(--muted); font-size: 1.06rem; }
.tone-dark .section__head p { color: #b4c6d6; }
.lede { font-size: 1.12rem; color: var(--muted); }
.tone-dark .lede { color: #c2d3e0; }

/* -------------------------------------------------------------------------
 * 5. Buttons
 * ---------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1;
	padding: 1.02rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
	cursor: pointer; text-decoration: none; text-align: center;
	transition: transform var(--speed), background var(--speed), color var(--speed), border-color var(--speed);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); }
.btn--dark { background: var(--brand); color: #fff; }
.btn--dark:hover { background: var(--brand-2); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.btn--ghost:hover { background: #fff; color: var(--brand); border-color: #fff; }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* -------------------------------------------------------------------------
 * 6. Header and navigation
 * ---------------------------------------------------------------------- */
.topbar { background: var(--brand-3); color: #b7cad8; font-size: .86rem; }
.topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; padding-block: .55rem; }
.topbar a { color: #dde8f0; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--accent-2); text-decoration: underline; }
.topbar__list { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.topbar__list li { margin: 0; display: inline-flex; align-items: center; gap: .45rem; }
.topbar__list a { display: inline-flex; align-items: center; gap: .45rem; }

.site-header {
	position: sticky; top: 0; z-index: 800;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; padding-block: .85rem; flex-wrap: nowrap; }
.brand-link { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-link img { max-height: 56px; width: auto; }
.brand-link svg { height: 50px; width: auto; }

/* Only the top level is a horizontal row. The selector is deliberately a
   direct child, because a plain .primary-nav ul also matches the dropdown and
   its align-items: center was shrink-wrapping every dropdown item to its own
   width and centring it, which is what made the list look ragged. */
.primary-nav { min-width: 0; }
.primary-nav > ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.primary-nav li { margin: 0; position: relative; }
.primary-nav a {
	display: block; padding: .6rem .68rem; border-radius: 8px;
	font-family: var(--font-display); font-weight: 600; font-size: .96rem;
	color: var(--ink); text-decoration: none; white-space: nowrap;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { background: var(--cream); color: var(--brand); }

/* A parent with a dropdown says so, rather than leaving people to discover it
   by chance. */
.primary-nav > ul > .menu-item-has-children > a { padding-right: 1.5rem; }
.primary-nav > ul > .menu-item-has-children > a::after {
	content: ""; position: absolute; right: .62rem; top: 50%;
	width: 6px; height: 6px; margin-top: -4px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); opacity: .55;
	transition: transform var(--speed), opacity var(--speed);
}
.primary-nav > ul > .menu-item-has-children:hover > a::after,
.primary-nav > ul > .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg); margin-top: -1px; opacity: 1;
}

.primary-nav .sub-menu {
	position: absolute; top: 100%; left: 0;
	list-style: none; margin: 0;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-lg); padding: .55rem; z-index: 60;

	/* Ten services in a single column makes a tower taller than most laptop
	   screens, so they run in two columns. The columns are wide enough for the
	   longest service name to sit on one line. */
	display: none; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .1rem .2rem; width: max-content; max-width: min(94vw, 620px);
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: grid; }
.primary-nav .sub-menu li { position: static; }
.primary-nav .sub-menu a {
	display: block; width: 100%; text-align: left; white-space: nowrap;
	padding: .58rem .7rem; border-radius: 8px;
	font-size: .92rem; font-weight: 550; color: var(--ink);
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a {
	background: var(--cream); color: var(--accent-deep);
}

/* Narrower desktops cannot fit two columns beside the rest of the header, so
   the dropdown drops back to one. */
@media (max-width: 1240px) {
	.primary-nav .sub-menu { grid-template-columns: minmax(0, 1fr); }
}

.header-cta { display: flex; align-items: center; gap: .7rem; flex: none; }
.header-cta .btn { padding: .85rem 1.2rem; font-size: .93rem; }


.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
	display: none; width: 48px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
	background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-close { display: none; }

@media (max-width: 720px) {
	.topbar { display: none; }
}

@media (max-width: 1080px) {
	/* The frosted header effect creates a containing block that would trap a
	   fixed position menu inside the header, so it is switched off here. */
	.site-header { backdrop-filter: none; background: #fff; }
	.nav-toggle { display: flex; }
	.header-cta { display: none; }

	.primary-nav {
		display: none;
		position: fixed; inset: 0; z-index: 900;
		background: var(--brand); color: #fff;
		padding: 5.4rem var(--gutter) 3rem;
		overflow-y: auto; overscroll-behavior: contain;
	}
	#nav-toggle:checked ~ .primary-nav { display: block; }
	.primary-nav > ul { flex-direction: column; align-items: stretch; gap: .1rem; }
	.primary-nav a { color: #fff; font-size: 1.14rem; padding: .85rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .12); border-radius: 0; }
	.primary-nav a:hover, .primary-nav .current-menu-item > a { background: transparent; color: var(--accent-2); }
	.primary-nav .sub-menu {
		position: static; display: grid; grid-template-columns: minmax(0, 1fr);
		background: transparent; border: 0; box-shadow: none;
		padding: 0 0 0 .9rem; width: auto; max-width: none;
	}
	.primary-nav .sub-menu a { font-size: 1rem; color: #c6d7e3; white-space: normal; }
	.primary-nav > ul > .menu-item-has-children > a::after { display: none; }
	.nav-close {
		display: flex; position: absolute; top: 1.1rem; right: var(--gutter);
		width: 46px; height: 46px; align-items: center; justify-content: center;
		border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: transparent;
		color: #fff; cursor: pointer; font-size: 1.5rem; line-height: 1;
	}
	/* Freeze the page behind the open menu. Bound to the checkbox, so the lock
	   can only ever exist while the menu is open. */
	body:has(#nav-toggle:checked) { overflow: hidden; }
	html:has(#nav-toggle:checked) { overflow: hidden; }
	body { padding-bottom: var(--cta-bar); }
}

/* -------------------------------------------------------------------------
 * 7. Hero. Headline, supporting line and call to action buttons only.
 * ---------------------------------------------------------------------- */
.hero { position: relative; background: var(--brand-3); color: #fff; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(15, 26, 33, .94) 0%, rgba(15, 26, 33, .82) 46%, rgba(15, 26, 33, .58) 100%);
}
.hero__fallback {
	position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(1100px 520px at 12% 8%, rgba(233, 169, 61, .16), transparent 62%),
		linear-gradient(160deg, var(--brand-3) 0%, var(--brand) 58%, var(--brand-2) 100%);
}
.hero__inner { padding-block: clamp(3.6rem, 9vw, 7rem); position: relative; }
.hero--page .hero__inner { padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.hero__content { max-width: 44rem; }
.hero h1 { color: #fff; margin-bottom: .65rem; }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: #c6d7e3; margin-bottom: 1.7rem; max-width: 40rem; }
.hero .btn-row { margin-bottom: 1.8rem; }
/* Accreditation logos, sitting directly on the hero with no panel behind them.
   Measured before removing it: the Checkatrade red and blue reach 3.6 and 3.7
   against the hero navy, against 4.1 and 4.0 on a white panel, so the badge is
   no harder to read without one. A logotype carries no contrast requirement in
   any case.

   Heights are matched rather than widths, so a wide logo and a square one read
   as the same size to the eye instead of one dwarfing the other. The soft
   shadow lifts pale parts of a badge off a photographic hero without touching
   the brand colours, which most schemes forbid altering. */
.accred-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.accred-logos li { margin: 0; display: inline-flex; }
.accred-logos a { display: inline-flex; align-items: center; transition: transform var(--speed), opacity var(--speed); }
.accred-logos a:hover { transform: translateY(-2px); opacity: .9; }
.accred-logos img {
	display: block; height: 46px; width: auto; max-width: 210px; object-fit: contain;
	filter: drop-shadow(0 2px 5px rgba(6, 16, 26, .45));
}

/* On a light section the shadow is unnecessary and would look like a smudge. */
.tone-white .accred-logos img,
.tone-cream .accred-logos img { filter: none; }

.hero__accreds { margin-top: 1.7rem; }

@media (max-width: 560px) {
	.accred-logos { gap: 1.1rem; }
	.accred-logos img { height: 36px; max-width: 165px; }
}

.breadcrumbs { font-size: .84rem; color: #a8bccd; margin-bottom: 1rem; }
.breadcrumbs a { color: #d4e2ec; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-2); text-decoration: underline; }
.breadcrumbs span { margin-inline: .4rem; }

/* -------------------------------------------------------------------------
 * 8. Trust strip
 * ---------------------------------------------------------------------- */
.trust { background: var(--brand-2); color: #d4e2ec; border-top: 1px solid rgba(255, 255, 255, .07); }
.trust__list { display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; list-style: none; margin: 0; padding: 1.05rem 0; justify-content: center; }
.trust__list li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: .93rem; font-weight: 500; }
.trust__list svg { color: var(--accent); font-size: 1.1rem; flex: none; }

/* On a narrow screen the centred row wraps into a ragged stack, because each
   wrapped line centres on its own. Below this width the items become a plain
   left aligned list instead: every tick on the same left edge, every phrase
   starting on the same line, and a rule between rows so it reads as a list
   rather than floating fragments.

   The tick is pinned to the first line rather than centred, so a phrase that
   runs to two lines does not leave its tick hovering in the middle, and the
   second line hangs under the text rather than under the tick. */
@media (max-width: 760px) {
	.trust__list {
		flex-direction: column; flex-wrap: nowrap;
		align-items: stretch; justify-content: flex-start;
		gap: 0; padding: .35rem 0;
	}
	.trust__list li {
		align-items: flex-start; gap: .6rem;
		padding: .62rem 0; font-size: .92rem; line-height: 1.45;
		border-bottom: 1px solid rgba(255, 255, 255, .09);
	}
	.trust__list li:last-child { border-bottom: 0; }
	.trust__list svg { margin-top: .16em; }
}

/* -------------------------------------------------------------------------
 * 9. Cards. The flex chain is unbroken from card to link so every
 *    "Read more" lands on the same baseline whatever the blurb length.
 * ---------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.7rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* auto-fit stretches a lone card across the whole row, which turns one team
   member or one article into a very wide, very empty looking box. Where there
   are only one or two cards, the track is capped so they keep a card's
   proportions and sit at the left rather than sprawling. */
.grid--3:has(> :last-child:nth-child(-n + 2)),
.grid--4:has(> :last-child:nth-child(-n + 2)) {
	grid-template-columns: repeat(auto-fit, minmax(230px, 320px));
	justify-content: start;
}

.card { display: flex; }
.card__link {
	display: flex; flex-direction: column; width: 100%;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	overflow: hidden; text-decoration: none; color: inherit;
	transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c3d3df; }
.card__media { flex: none; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.35rem 1.4rem 1.5rem; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { color: var(--muted); font-size: .96rem; margin-bottom: 1.1rem; }
.card__more {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--font-display); font-weight: 700; font-size: .93rem; color: var(--brand);
}
.card__link:hover .card__more { color: var(--accent-deeper); text-decoration: underline; }
.tone-dark .card__link { background: var(--brand-2); border-color: rgba(255, 255, 255, .12); }
.tone-dark .card__body p { color: #b4c6d6; }
.tone-dark .card__more { color: var(--accent-2); }

/* Area cards, compact */
.card--area .card__body { padding: 1.15rem 1.25rem 1.3rem; }
.card--area .card__body h3 { font-size: 1.15rem; }

/* Review cards */
.review {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 1.5rem 1.5rem 1.4rem;
}
.review__stars { color: var(--accent); font-size: 1.05rem; margin-bottom: .8rem; display: flex; gap: .15rem; }
.review__job { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deeper); margin-bottom: .6rem; }
.review__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.review__body p { color: var(--ink); font-size: .98rem; }
.review__meta {
	margin-top: auto; align-self: flex-start; display: flex; align-items: center; gap: .75rem;
	padding-top: 1.15rem; border-top: 1px solid var(--line); width: 100%;
}
.review__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--cream); }
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__avatar-initial {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 700; color: var(--brand); background: var(--cream);
}
.review__name { font-family: var(--font-display); font-weight: 700; font-size: .97rem; line-height: 1.3; }
.review__town { font-size: .85rem; color: var(--muted); }

/* -------------------------------------------------------------------------
 * 10. Image slots. An empty slot is neutral, tasteful design, never a broken
 *     image and never text addressed to the site owner.
 * ---------------------------------------------------------------------- */
.imgslot {
	position: relative; overflow: hidden; border-radius: var(--radius-lg);
	background:
		repeating-linear-gradient(135deg, rgba(27, 42, 51, .045) 0 12px, rgba(27, 42, 51, .015) 12px 24px),
		var(--cream);
	border: 1px dashed rgba(27, 42, 51, .16);
	display: flex; align-items: center; justify-content: center;
	min-height: 160px;
}
.imgslot::after {
	content: ""; width: 46px; height: 46px; opacity: .18;
	background: currentColor; color: var(--brand);
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.imgslot--filled { border: 0; background: none; min-height: 0; }
.imgslot--filled::after { display: none; }
.imgslot--filled img { width: 100%; height: 100%; object-fit: cover; }
.imgslot--cover { position: absolute; inset: 0; border-radius: 0; }
.card__media .imgslot { position: absolute; inset: 0; border-radius: 0; border-width: 0 0 1px 0; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-45 { aspect-ratio: 4 / 5; }

/* -------------------------------------------------------------------------
 * 11. Split blocks (about, packages)
 * ---------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; }
.split--media-right { direction: ltr; }
.split__media .imgslot { width: 100%; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.ticks { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .6rem; }
.ticks li { margin: 0; display: flex; align-items: flex-start; gap: .65rem; }
.ticks svg { color: var(--accent); margin-top: .28rem; flex: none; font-size: 1.05rem; }
.tone-white .ticks svg, .tone-cream .ticks svg { color: var(--accent-deep); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.stat { background: var(--cream); border-radius: var(--radius); padding: 1.1rem 1.2rem; border: 1px solid var(--line); }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--brand); line-height: 1; }
.stat__label { font-size: .88rem; color: var(--muted); margin-top: .35rem; }
.tone-dark .stat { background: var(--brand-2); border-color: rgba(255, 255, 255, .12); }
.tone-dark .stat__num { color: var(--accent-2); }
.tone-dark .stat__label { color: #b4c6d6; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(.7rem, 1.6vw, 1.1rem); }
.gallery .imgslot { aspect-ratio: 4 / 3; }

/* Accreditation strip */
.accreds { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.accreds li {
	margin: 0; display: inline-flex; align-items: center; gap: .5rem;
	background: #fff; border: 1px solid var(--line); border-radius: 999px;
	padding: .55rem 1.05rem; font-size: .9rem; font-weight: 550; font-family: var(--font-display);
}
.accreds svg { color: var(--accent-deep); }
.tone-dark .accreds li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #dfeaf2; }
.tone-dark .accreds svg { color: var(--accent); }

/* FAQ */
.faq { display: grid; gap: .8rem; max-width: 52rem; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq summary {
	cursor: pointer; padding: 1.05rem 1.25rem; font-family: var(--font-display); font-weight: 700;
	font-size: 1.03rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--accent-deep); line-height: 1; flex: none; transition: transform var(--speed); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 1.25rem 1.2rem; color: var(--muted); }

/* A section that carries a photograph behind its content. The image is a real
   element so it keeps its alt text, pinned behind the content by a stacking
   context created on the section itself, so the negative z-index cannot escape
   and slide behind the page background. The overlay is heavy on purpose: at
   this strength even a pure white photograph still leaves white text above
   7 to 1, so readability never depends on which photo is chosen. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section__photo {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.section--photo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, rgba(15, 41, 66, .95) 0%, rgba(15, 41, 66, .88) 55%, rgba(10, 27, 41, .90) 100%);
}
.tone-cream.section--photo::before, .tone-white.section--photo::before {
	background: linear-gradient(105deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .90) 100%);
}

/* -------------------------------------------------------------------------
 * 12. Forms
 * ---------------------------------------------------------------------- */
.form-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 650; font-size: .92rem; color: var(--ink); }
.field .req { color: var(--err); }
.field input, .field select, .field textarea {
	width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
	background: #fff; border: 1px solid #8195a7; border-radius: 10px; padding: .82rem .9rem;
	transition: border-color var(--speed), box-shadow var(--speed);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--brand); box-shadow: 0 0 0 3px rgba(40, 154, 251, .22); outline: none;
}
.field__hint { font-size: .84rem; color: var(--muted); }
.field__error { font-size: .86rem; color: var(--err); font-weight: 550; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--err); }

.consent { display: flex; gap: .7rem; align-items: flex-start; grid-column: 1 / -1; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: .18rem; accent-color: var(--brand); }
.consent label { font-family: var(--font-body); font-weight: 400; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.consent a { color: var(--brand); }

/* The form card keeps its own colours wherever it is placed. It is a white
   panel, so inheriting a dark section's white headings would leave the heading
   invisible against it. */
.tone-dark .form-card,
.tone-brand .form-card { color: var(--ink); }
.tone-dark .form-card h2, .tone-dark .form-card h3, .tone-dark .form-card h4,
.tone-brand .form-card h2, .tone-brand .form-card h3, .tone-brand .form-card h4 { color: var(--ink); }
.tone-dark .form-card .lede,
.tone-brand .form-card .lede { color: var(--muted); }
.tone-dark .form-card a,
.tone-brand .form-card a { color: var(--brand); }
.tone-dark .form-card label,
.tone-brand .form-card label { color: var(--ink); }

/* Honeypot. Hidden from sight and from assistive technology, but still a real
   input a bot will fill in. */
.hp-wrap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-notice { border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.3rem; font-size: .96rem; }
.form-notice--ok { background: #e8f5ee; border: 1px solid #b6ddc8; color: #14603b; }
.form-notice--err { background: #fdecec; border: 1px solid #f0c2c2; color: #8d1c1c; }
.form-notice ul { margin: .5rem 0 0; }

/* -------------------------------------------------------------------------
 * 13. Contact panel
 * ---------------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contact-list li { margin: 0; display: flex; gap: .9rem; align-items: flex-start; }
.contact-list svg { color: var(--accent); font-size: 1.3rem; flex: none; margin-top: .18rem; }
.contact-list strong { display: block; font-family: var(--font-display); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .1rem; }
.tone-dark .contact-list strong { color: #9db3c6; }
.contact-list a { text-decoration: none; font-size: 1.06rem; font-weight: 550; }
.contact-list a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
 * 14. Blog
 * ---------------------------------------------------------------------- */
.article-header { background: var(--brand-3); color: #fff; padding-block: clamp(2.6rem, 6vw, 4.2rem); }
.article-header h1 { color: #fff; }
.article-meta { font-size: .88rem; color: #a8bccd; }
.entry-content { font-size: 1.05rem; }
.entry-content h2 { margin-top: 2.4rem; }
.entry-content h3 { margin-top: 1.9rem; }
.entry-content ul, .entry-content ol { margin-bottom: 1.3rem; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 650; }

.pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2.6rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
	padding: 0 .7rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
	font-family: var(--font-display); font-weight: 650; color: var(--ink); background: #fff;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* -------------------------------------------------------------------------
 * 15. Footer
 * ---------------------------------------------------------------------- */
.site-footer { background: var(--brand-3); color: #a8bccd; padding-top: clamp(2.8rem, 6vw, 4.2rem); font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .04em; margin-bottom: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.6rem, 3.4vw, 3rem); padding-bottom: 2.6rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer a { color: #cfdeea; text-decoration: none; }
.site-footer a:hover { color: var(--accent-2); text-decoration: underline; }
.footer-brand svg { height: 46px; width: auto; margin-bottom: 1.1rem; }
.footer-brand img { max-height: 60px; width: auto; margin-bottom: 1.1rem; }
.footer-menu, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-menu li, .footer-contact li { margin: 0; }
.social-row { display: flex; gap: .55rem; margin-top: 1.2rem; }
.social-row a {
	width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; color: #cfdeea;
}
.social-row a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.social-row svg { font-size: 1.15rem; }
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.3rem;
	display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; justify-content: space-between; align-items: center; font-size: .88rem;
}
.legal-menu { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.legal-menu li { margin: 0; }
.rr-cookie-open {
	background: none; border: 0; padding: 0; margin: 0; font: inherit;
	color: #cfdeea; cursor: pointer; text-decoration: none;
}
.rr-cookie-open:hover { color: var(--accent-2); text-decoration: underline; }

/* -------------------------------------------------------------------------
 * 16. Sticky mobile call to action. Hidden while the hero's own buttons are
 *     on screen, revealed once they scroll away. Fails visible: with no
 *     JavaScript the noscript rule keeps it permanently on.
 * ---------------------------------------------------------------------- */
.mobile-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
	/* The two halves butt together with no divider. The container is painted in
	   the brand colour so that if a viewport of odd width leaves a sub pixel
	   sliver between the flex items, it blends into the call button rather than
	   showing as a bright hairline. */
	display: none; gap: 0; background: var(--brand);
	transform: translateY(110%); transition: transform .28s ease;
	box-shadow: 0 -8px 26px rgba(0, 0, 0, .22);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta a {
	flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	height: var(--cta-bar); font-family: var(--font-display); font-weight: 700; font-size: .98rem;
	text-decoration: none;
}
.mobile-cta a:first-child { background: var(--brand); color: #fff; }
.mobile-cta a:last-child { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 1080px) { .mobile-cta { display: flex; } }

/* -------------------------------------------------------------------------
 * 17. Cookie consent banner. Sits flush on the bottom edge and stacks above
 *     the sticky call bar.
 * ---------------------------------------------------------------------- */
.rr-cookie {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
	background: var(--brand); color: #dae6ef; box-shadow: 0 -10px 34px rgba(0, 0, 0, .3);
	max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
}
.rr-cookie[hidden] { display: none; }
.rr-cookie__inner {
	max-width: var(--wrap); margin-inline: auto;
	padding: clamp(1.15rem, 3vw, 1.7rem) var(--gutter);
	display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap;
}
.rr-cookie__text { flex: 1 1 330px; }
.rr-cookie__title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: #fff; margin: 0 0 .4rem; }
.rr-cookie__body { margin: 0; font-size: .92rem; line-height: 1.62; color: #bacdda; }
.rr-cookie__body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.rr-cookie__actions { display: flex; gap: .6rem; flex: 0 0 auto; flex-wrap: wrap; }
.rr-cookie__btn {
	font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1;
	padding: .85rem 1.5rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
	transition: transform var(--speed), background var(--speed), color var(--speed), border-color var(--speed);
}
.rr-cookie__btn:hover { transform: translateY(-2px); }
.rr-cookie__btn--accept { background: var(--accent); color: var(--accent-ink); }
.rr-cookie__btn--accept:hover { background: var(--accent-2); }
.rr-cookie__btn--reject { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.rr-cookie__btn--reject:hover { background: #fff; color: var(--brand); }
.rr-cookie__btn--manage { background: transparent; color: #cfdeea; text-decoration: underline; padding-inline: .8rem; }
.rr-cookie__btn--manage:hover { color: #fff; }
.rr-cookie__panel { flex: 1 1 100%; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.rr-cookie__panel[hidden] { display: none; }
.rr-cat { display: flex; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rr-cat:last-of-type { border-bottom: 0; }
.rr-cat input { width: 20px; height: 20px; flex: none; margin-top: .25rem; accent-color: var(--accent); }
.rr-cat__name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: .98rem; display: block; }
.rr-cat__desc { font-size: .87rem; color: #aec2d2; margin: .2rem 0 0; }
.rr-cat__locked { font-size: .82rem; color: var(--accent-2); font-weight: 600; flex: none; margin-top: .3rem; }
.rr-cookie__save { margin-top: 1rem; }

@media (max-width: 680px) {
	.rr-cookie__actions { flex: 1 1 100%; }
	.rr-cookie__btn { flex: 1 1 auto; text-align: center; }
	.rr-cookie__btn--manage { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
 * 18. Utilities and motion
 * ---------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
/* Content is only hidden once the script that reveals it is confirmed to be
   running, and the script also has a failsafe that reveals everything after a
   moment. A missed observer can never leave a heading permanently blank. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
	.reveal, .js-reveal .reveal { opacity: 1; transform: none; }
	.btn:hover, .card__link:hover { transform: none; }
}

@media print {
	.site-header, .site-footer, .mobile-cta, .rr-cookie, .topbar { display: none !important; }
	body { padding-bottom: 0; }
}