/* ==========================================================================
   Blue Cow Studios — main stylesheet
   Dark theme, navy blue throughout (buttons, accents, highlights) — one
   consistent brand hue, no secondary accent colour competing with it.
   Mobile-first: base styles target small screens, then progressively
   enhanced with min-width media queries at 600 / 900 / 1200px.
   Colours, spacing and fonts are all CSS custom properties in :root,
   so the whole site's look can be re-themed by editing this one block.
   ========================================================================== */

:root {
	/* --- Surfaces (darkest → lightest) ---------------------------------- */
	--color-bg:          #0A0F1C; /* page background */
	--color-bg-alt:      #0D1424; /* header / footer / banner background */
	--color-surface:     #141C2E; /* cards (service cards, form fields, gallery filters) */
	--color-surface-alt: #1A2440; /* slightly-raised cards (tinted sections, dropdowns, sidebars) */
	--color-border:      #2B3654; /* hairlines, dashed placeholder borders */

	/* --- Text -------------------------------------------------------------- */
	--color-heading:     #FFFFFF;
	--color-text:        #E7EAF3;
	--color-text-muted:  #99A3C0;

	/* --- Brand: every accent on the site is a shade of this one navy blue - */
	--color-navy-btn:        #2A4EB0; /* solid fills — buttons, badges, active states */
	--color-navy-btn-hover:  #3A62D6; /* hover/pressed state of the above */
	--color-link:            #9DB6FF; /* body text links, small accents (eyebrow text, icons) */
	--color-link-hover:      #CBDBFF; /* brightened hover state for text links */

	--color-white:       #FFFFFF;
	--color-success-bg:   #113524;
	--color-success-text: #7FD9A6;
	--color-error-bg:     #3A1620;
	--color-error-text:   #F2A2A8;

	/* --- Type ------------------------------------------------------------ */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);

	/* --- Layout ------------------------------------------------------- */
	--container-width: 1200px;
	--radius: 10px;
	--gap: 1.5rem;
	--header-height: 76px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	font-size: 16px;
}

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

a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus { color: var(--color-link-hover); }

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: 1.2;
	margin: 0 0 .6em;
	color: var(--color-heading);
	font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* Focus visibility for keyboard users (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--color-white);
	outline-offset: 2px;
}

/* Screen-reader-only text (skip link target label etc.) */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	background: var(--color-navy-btn);
	color: var(--color-white);
	padding: .75rem 1.25rem;
	z-index: 1000;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top .2s ease;
}
.skip-link:focus { top: 0; color: var(--color-white); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 1.25rem;
}
.container--narrow { max-width: 760px; }
.center { text-align: center; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 3rem; }

.section { padding: 3.5rem 0; }
@media (min-width: 900px) { .section { padding: 5.5rem 0; } }

.section-heading { margin-bottom: .4em; }
.section-intro { color: var(--color-text-muted); max-width: 620px; margin-bottom: 2.5rem; }
.section-intro--centered { margin-inline: auto; }

/* ==========================================================================
   Buttons — navy blue is the one consistent action colour site-wide
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .9em 1.6em;
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

.btn--primary {
	background: var(--color-navy-btn);
	color: var(--color-white);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-navy-btn-hover); color: var(--color-white); }

.btn--ghost {
	background: transparent;
	color: var(--color-white);
	border-color: currentColor;
}

.btn--full { width: 100%; }

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-height);
	gap: 1rem;
}

.site-logo { display: flex; align-items: center; }
.site-logo__text { font-weight: 800; font-size: 1.3rem; color: var(--color-heading); letter-spacing: -.01em; }
.site-logo img, .site-logo__image { max-height: 44px; width: auto; }

.site-nav__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.75rem;
}
.site-nav__list a {
	color: var(--color-text);
	font-weight: 600;
	font-size: .95rem;
}
.site-nav__list li { position: relative; }
.site-nav__list ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
	padding: .5rem;
	min-width: 220px;
	z-index: 10;
}
.site-nav__list li:hover > ul,
.site-nav__list li:focus-within > ul { display: block; }
.site-nav__list ul li a { display: block; padding: .5rem .75rem; border-radius: 6px; }
.site-nav__list ul li a:hover { background: var(--color-surface); color: var(--color-white); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.site-header__phone {
	display: none;
	align-items: center;
	gap: .5em;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
}
.site-header__phone:hover { color: var(--color-link-hover); }

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	cursor: pointer;
	padding: 0;
}
.nav-toggle__bar { width: 20px; height: 2px; background: var(--color-heading); margin-inline: auto; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav: collapsed dropdown panel under the header */
@media (max-width: 899.98px) {
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg-alt);
		border-bottom: 1px solid var(--color-border);
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.site-nav.is-open { max-height: 80vh; overflow-y: auto; }
	.site-nav__list { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.25rem; }
	.site-nav__list > li { border-top: 1px solid var(--color-border); }
	.site-nav__list > li:first-child { border-top: none; }
	.site-nav__list a { display: block; padding: .85rem 0; }
	.site-nav__list ul { position: static; box-shadow: none; border: none; padding-left: 1rem; display: none; }
	.site-nav__list li.menu-item-has-children.is-open > ul { display: block; }
	.site-header .btn--primary { display: none; } /* keep mobile header uncluttered; CTA is in nav + throughout page */
}
@media (min-width: 900px) {
	.nav-toggle { display: none; }
	.site-header__phone { display: inline-flex; }
	.site-nav { display: block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	background:
		radial-gradient(900px circle at 15% -10%, rgba(42, 78, 176, .35), transparent 60%),
		linear-gradient(180deg, var(--color-bg-alt), var(--color-bg) 65%);
	padding: 3rem 0;
	overflow: hidden;
}
.hero__inner { display: grid; gap: 2.5rem; align-items: center; }

/* Full-width cover hero (used whenever a real hero photo is set) — the
   photo fills the entire section edge-to-edge behind the text, rather
   than sitting in its own column next to it. */
.hero--cover { padding: 0; }
.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 15, 28, .92) 0%, rgba(10, 15, 28, .78) 40%, rgba(10, 15, 28, .35) 75%, rgba(10, 15, 28, .15) 100%),
		linear-gradient(0deg, var(--color-bg) 0%, rgba(10, 15, 28, .25) 18%, transparent 45%);
}

/* Optional showreel background video (Customizer > Homepage Hero) — fills
   the section the same way .hero__bg (the photo) does. The iframe is sized
   in vw/vh so it always overflows its box rather than letterboxing. */
.hero__bg--video { position: absolute; inset: 0; overflow: hidden; }
.hero__bg--video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 */
	min-width: 177.78vh; /* 16:9, height-driven */
	min-height: 100vh;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Trust badges (Customizer > Trust & Social Proof) — hidden by default,
   see bcs_render_trust_badges(). */
.trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}
.trust-badges__item {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--color-text);
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--color-border);
	padding: .35rem .75rem;
	border-radius: 999px;
}
.hero__inner--cover {
	position: relative;
	z-index: 1;
	display: block;
	min-height: 420px;
	/* padding-block only (not the padding shorthand) — the shorthand would
	   zero out the left/right padding-inline .container already sets,
	   which is what was pushing the hero text flush against the mobile
	   viewport edge. */
	padding-block: 3.5rem;
}
.hero__inner--cover .hero__content { max-width: 34rem; }
.eyebrow {
	display: inline-block;
	color: var(--color-link);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .8rem;
	margin-bottom: .75rem;
}
.hero__lead { font-size: 1.15rem; color: var(--color-text-muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.hero__actions.center { justify-content: center; }

@media (min-width: 900px) {
	.hero:not(.hero--cover) { padding: 5rem 0; }
	.hero__inner { grid-template-columns: 1.1fr 1fr; }
	.hero__inner--cover { grid-template-columns: none; min-height: 560px; padding-block: 5rem; }
}

/* ==========================================================================
   Placeholder media blocks
   (used everywhere a real photo/video will eventually go)
   ========================================================================== */

.bcs-placeholder {
	aspect-ratio: var(--bcs-ratio, 4/3);
	width: 100%;
	border-radius: var(--radius);
	background: repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 10px, var(--color-surface-alt) 10px, var(--color-surface-alt) 20px);
	border: 2px dashed var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bcs-placeholder__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	color: var(--color-text-muted);
	text-align: center;
	padding: 1rem;
}
.bcs-placeholder__inner span { font-size: .8rem; font-weight: 600; max-width: 22ch; }

/* Real replacement for .bcs-placeholder once a client uploads a photo (via
   wp-admin Featured Image or a Customizer image field) — same aspect-ratio
   box via the shared --bcs-ratio custom property, so nothing shifts layout
   when a placeholder is swapped for a real photo. */
.bcs-photo {
	aspect-ratio: var(--bcs-ratio, 4/3);
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}

/* Every self-hosted video slot (Why Us, service cards) gets this fallback
   background so it always reads as "a box with something in it" rather
   than an invisible void — matters most in the moment before a poster
   frame or the clip itself has actually decoded. */
.bcs-video {
	background: var(--color-surface-alt);
}


/* ==========================================================================
   Cards / grids (services + gallery)
   ========================================================================== */

.card-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

.service-card {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.service-card__media { margin-bottom: 1.25rem; }

/* A real, stated launch-status flag (e.g. "not live yet") on a service
   card — deliberately outlined rather than filled, so it reads as a notice
   rather than competing with the navy price-badge for attention. */
.service-card__badge {
	position: absolute;
	top: .9rem;
	right: .9rem;
	z-index: 1;
	max-width: calc(100% - 1.8rem);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-link);
	color: var(--color-link);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-align: right;
	padding: .3em .6em;
	border-radius: 999px;
}

/* Same treatment, inline, for the note on that service's own page. */
.service-coming-soon-note {
	display: inline-block;
	margin-top: .75rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-link);
	color: var(--color-text);
	font-size: .85rem;
	padding: .6em 1em;
	border-radius: var(--radius);
}
.service-card h3, .service-card h2 { font-size: 1.15rem; }
.service-card p { color: var(--color-text-muted); flex-grow: 1; }
.service-card__icon { color: var(--color-navy-btn-hover); margin-bottom: 1rem; }
.service-card__icon--lg { color: var(--color-navy-btn-hover); }
.service-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: .75rem; flex-wrap: wrap; }

.price-badge {
	display: inline-block;
	background: var(--color-navy-btn);
	color: var(--color-white);
	font-size: .75rem;
	font-weight: 700;
	padding: .35em .75em;
	border-radius: 999px;
}
.price-badge--lg { font-size: .95rem; margin-top: .5rem; }

.link-arrow { font-weight: 700; font-size: .9rem; white-space: nowrap; }

.checklist { list-style: none; padding: 0; margin-bottom: 1.75rem; }
.checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: .9rem;
	color: var(--color-text-muted);
}
.checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: .2em;
	width: 1.3rem; height: 1.3rem;
	border-radius: 50%;
	background: var(--color-navy-btn);
}
.checklist li::after {
	content: "✓";
	position: absolute;
	left: .28rem; top: .05em;
	color: var(--color-white);
	font-size: .8rem;
	font-weight: 900;
}

.why-us__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .why-us__grid { grid-template-columns: 1fr 1fr; } }
.why-us--tinted { background: var(--color-bg-alt); }

/* Uses var(--color-surface-alt) rather than .why-us--tinted's
   var(--color-bg-alt) — "What We Offer" sits directly above the "Why Us"
   section on the homepage, and both are tinted sections, so sharing the
   exact same background color made them read as one undifferentiated
   block. --color-surface-alt is a distinct, slightly-raised shade (not
   reused as a full-section background anywhere else) that still sets this
   section apart from the plain page background without competing with the
   service cards, which sit on their own lighter var(--color-surface). Kept
   as its own class (rather than reusing .why-us--tinted directly on this
   section) so the markup doesn't read as though this section belongs to
   "Why Us". A faint dot-grid texture sits on top of that tint — pure CSS
   (a repeating radial-gradient), no image file/HTTP request. Dots are
   deliberately low-opacity white so they stay a background texture, not
   a visible decoration competing with the card grid. */
.services-overview--tinted {
	background-color: var(--color-surface-alt);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 24px 24px;
}

/* Replaces the old plain checklist with card-style feature tiles, matching
   the card language used everywhere else on the site (service cards, areas
   groups, trusted-by chips) instead of a bare bulleted list. */
.why-us__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.75rem;
}
@media (max-width: 480px) { .why-us__features { grid-template-columns: 1fr; } }
.why-us__feature {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
}
.why-us__feature-icon { color: var(--color-navy-btn-hover); margin-bottom: .6rem; }
.why-us__feature h3 { font-size: .95rem; margin-bottom: .3em; }
.why-us__feature p { font-size: .82rem; color: var(--color-text-muted); margin: 0; }

/* "Trusted By" venue/client logos — hidden entirely from front-page.php
   unless at least one is uploaded (Customizer > Trust & Social Proof). */
.trusted-by { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.trusted-by__label {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-text-muted);
	margin-bottom: 1.5rem;
}
.trusted-by__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}
/* A light "chip" behind every logo, rather than dimming/grayscaling the
   logos themselves — on a dark theme, a grayscale-and-faded venue logo
   often has too little contrast against the navy background to read at
   all (this was the cause of the "dull, not visible enough" feedback).
   A white card guarantees every logo's own real colours stay legible
   regardless of how light, dark or colourful that particular logo is. */
.trusted-by__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border-radius: var(--radius);
	padding: .85rem 1.5rem;
	transition: transform .2s ease;
}
.trusted-by__chip:hover { transform: translateY(-2px); }
.trusted-by__logo {
	max-height: 36px;
	width: auto;
	display: block;
}

/* "Follow Our Work" social links section. */
.follow-us__links { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.follow-us__links .social-link {
	width: 48px;
	height: 48px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}
.follow-us__links .social-link:hover { transform: translateY(-2px); }

/* ==========================================================================
   Fast Facts stats bar (homepage, under the hero)
   ========================================================================== */

.stats-bar { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.stats-bar__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem 1rem;
	padding-block: 2rem;
	text-align: center;
}
@media (min-width: 700px) { .stats-bar__inner { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column; gap: .25rem; }
.stat__number { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); font-weight: 800; color: var(--color-link); }
.stat__label { font-size: .8rem; color: var(--color-text-muted); }

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Gap between a gallery/testimonial grid and the "view more" link below it.
   Needed because .center only sets text-align and paragraphs have no
   top margin site-wide — without this, the button sits flush against
   whichever card ends up last (worse when a grid wraps to an uneven
   last row, e.g. 3 testimonials in a 2-column layout). */
.gallery-grid + p.center,
.testimonial-grid + p.center {
	margin-top: 2rem;
}

.testimonial-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.testimonial-stars { display: flex; gap: 2px; color: var(--color-link); }
.testimonial-card blockquote { margin: 0; font-size: 1.02rem; color: var(--color-text); flex-grow: 1; }
.testimonial-card figcaption { display: flex; align-items: center; gap: .75rem; }
.testimonial-card__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-card__name { font-weight: 700; color: var(--color-heading); display: block; }
.testimonial-card__event { font-size: .8rem; color: var(--color-text-muted); display: block; }
.testimonials-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--color-text-muted);
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	padding: 2rem;
}

/* ==========================================================================
   FAQs (native <details>/<summary> accordion — no JS needed)
   ========================================================================== */

.faq-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.faq-item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0;
	overflow: hidden;
}
.faq-item summary {
	cursor: pointer;
	padding: 1.1em 1.4em;
	font-weight: 700;
	color: var(--color-heading);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--color-link);
	flex-shrink: 0;
	transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding: 0 1.4em 1.3em; color: var(--color-text-muted); }
.faq-item__answer p:last-child { margin-bottom: 0; }
.faq-jump-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.faq-jump-list a { font-weight: 700; }

/* ==========================================================================
   Areas We Cover
   ========================================================================== */

.areas-intro p:last-child { margin-bottom: 0; }

/* auto-fit + minmax instead of fixed breakpoints: each card gets at least
   280px (comfortable for the longer region blurbs) and the grid finds its
   own column count at any screen width, rather than snapping awkwardly
   between fixed 1/2/3-column steps. align-items:start (not the grid
   default stretch) so a short card never gets stretched into empty space
   just because it shares a row with the much longer Nottinghamshire one. */
.areas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	align-items: start;
	margin-top: 2rem;
}
.areas-group {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem;
}
.areas-group h2, .areas-group h3 { font-size: 1.05rem; color: var(--color-link); margin-bottom: .6em; }
.venues-section .areas-grid { margin-top: 0; }
.areas-group__blurb { font-size: .85rem; color: var(--color-text-muted); margin-bottom: 1.1rem; }
.areas-group__blurb a { text-decoration: underline; text-underline-offset: 2px; }

/* Towns as compact wrapping pills rather than a tall bordered list — reads
   faster, and stops a long town list making short-blurb cards look empty
   underneath. */
.areas-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.areas-list li {
	font-size: .78rem;
	font-weight: 600;
	color: var(--color-text);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: .3rem .7rem;
}

.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 2rem; }
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery-grid--portfolio { grid-template-columns: repeat(4, 1fr); } }

.gallery-item__caption { font-size: .8rem; color: var(--color-text-muted); margin-top: .5rem; margin-bottom: 0; }

/* Responsive 16:9 wrapper WordPress's wp_oembed_get() output is dropped into
   (YouTube/Vimeo iframes render at a fixed size by default otherwise). */
.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.gallery-filter {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: .5em 1.1em;
	font-weight: 600;
	font-size: .85rem;
	cursor: pointer;
	color: var(--color-text);
}
.gallery-filter.is-active { background: var(--color-navy-btn); border-color: var(--color-navy-btn); color: var(--color-white); }
.gallery-item[hidden] { display: none; }

/* ==========================================================================
   Page banner (used on interior pages instead of the big homepage hero)
   ========================================================================== */

.page-banner {
	background:
		radial-gradient(800px circle at 85% -20%, rgba(42, 78, 176, .3), transparent 60%),
		var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: 3rem 0;
	text-align: center;
}
.page-banner h1 { color: var(--color-heading); margin-bottom: .25em; }
.page-banner .hero__lead { color: var(--color-text-muted); margin-inline: auto; }
.page-banner--service .hero__lead { margin-top: .25rem; }

.breadcrumbs { margin-bottom: 1rem; }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
	color: var(--color-text-muted);
}
.breadcrumbs__item { display: flex; align-items: center; gap: .35em; }
.breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--color-border);
}
.breadcrumbs__item a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--color-primary, var(--color-heading)); text-decoration: underline; }
.breadcrumbs__item span[aria-current="page"] { color: var(--color-text-muted); }

/* ==========================================================================
   Service single page layout
   ========================================================================== */

.service-layout { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .service-layout { grid-template-columns: 2fr 1fr; align-items: start; } }
.service-layout__content h2 { margin-top: 1.4em; }

.enquiry-box {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem;
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
}
.enquiry-box .btn { width: 100%; margin-top: .5rem; }
.enquiry-box__phone { margin: 1rem 0 0; font-size: .9rem; }

/* ==========================================================================
   About page
   ========================================================================== */

.about-layout { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .about-layout { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.about-layout__content.container--narrow { max-width: none; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-layout { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.form-row { margin-bottom: 1.25rem; }
.form-row--split { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row--split { grid-template-columns: 1fr 1fr; } }

label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .4em; color: var(--color-heading); }
input, select, textarea {
	width: 100%;
	padding: .75em .9em;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	background: var(--color-surface);
	color: var(--color-text);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--color-navy-btn-hover); }
textarea { resize: vertical; }

.form-note { font-size: .8rem; color: var(--color-text-muted); margin-top: 1rem; }

/* Honeypot field: hidden from sighted users AND screen readers via
   aria-hidden-equivalent positioning, but still present in the DOM/tab
   order removed so only bots (which read raw HTML) tend to fill it in. */
.bcs-hp { position: absolute; left: -9999px; top: -9999px; }

.form-message { display: none; padding: 1em 1.25em; border-radius: var(--radius); margin-bottom: 1.5rem; font-weight: 600; }
.form-message.is-visible { display: block; }
.form-message--success { background: var(--color-success-bg); color: var(--color-success-text); }
.form-message--error { background: var(--color-error-bg); color: var(--color-error-text); }

.contact-details-box {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-navy-btn);
	border-radius: var(--radius);
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}
.contact-details-box h2 { color: var(--color-heading); }
.contact-details-list { list-style: none; padding: 0; margin: 0; }
.contact-details-list li { margin-bottom: 1rem; }
.contact-details-list strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: .2em; }
.contact-details-list a { color: var(--color-heading); font-weight: 700; }
.contact-details-list a:hover { color: var(--color-link-hover); }
.contact-details-box__socials { margin-top: 1.25rem; }
.contact-details-box .social-link { color: var(--color-heading); }

/* ==========================================================================
   CTA band — the one deliberately light-on-dark block, for contrast/pop
   ========================================================================== */

.cta-band { background: linear-gradient(135deg, var(--color-navy-btn), var(--color-navy-btn-hover)); color: var(--color-white); }
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: var(--color-white); opacity: .85; }
.cta-band__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: space-between;
}
.cta-band h2 { margin-bottom: .25em; }
@media (min-width: 800px) { .cta-band__inner { flex-direction: row; align-items: center; } }

/* ==========================================================================
   Blog / post list (index.php) — used if a News section is enabled later
   ========================================================================== */

.post-list { display: grid; gap: 2rem; }
@media (min-width: 700px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
.post-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; padding-bottom: 1.5rem; }
.post-card__thumb { display: block; }
.post-card h2, .post-card .post-meta, .post-card p, .post-card .link-arrow { padding-inline: 1.5rem; }
.post-card h2 { margin-top: 1rem; font-size: 1.1rem; }
.post-meta { color: var(--color-text-muted); font-size: .8rem; }
.pagination { margin-top: 2rem; display: flex; gap: .5rem; justify-content: center; }

/* ==========================================================================
   Single post + comments (only used if a News/blog section is enabled)
   ========================================================================== */

.single-post__thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; }
.comments-area { margin-top: 3rem; border-top: 1px solid var(--color-border); padding-top: 2rem; }
.comment-list { list-style: none; padding: 0; }
.comment-list li { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }

/* ==========================================================================
   404
   ========================================================================== */

.section--404 h1 { font-size: 5rem; color: var(--color-link); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--color-bg-alt); color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 3.5rem; }

/* "Trusted By" repeated in the footer (same source as the homepage section,
   hidden until logos are uploaded) — smaller chips, separated from the
   footer link columns below by its own bottom border. */
.footer-trusted-by { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); }
.footer-trusted-by .trusted-by__grid { gap: .85rem; }
.footer-trusted-by .trusted-by__chip { padding: .55rem 1rem; }
.footer-trusted-by .trusted-by__logo { max-height: 26px; }
.footer-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.site-footer .site-logo__text { color: var(--color-heading); }
.footer-tagline { color: var(--color-text-muted); max-width: 34ch; margin-top: 1rem; }
.footer-heading { color: var(--color-heading); font-size: 1rem; margin-bottom: 1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .7rem; }
.footer-list a { color: var(--color-text-muted); }
.footer-list a:hover { color: var(--color-link-hover); }

.footer-socials { display: flex; gap: .75rem; margin-top: 1.25rem; }
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	color: var(--color-heading);
}
.social-link:hover { background: var(--color-navy-btn); color: var(--color-white); }

/* ==========================================================================
   WhatsApp link (uses WhatsApp's own brand green for the icon only —
   everything else stays on the site's navy-blue link colours)
   ========================================================================== */

.whatsapp-link { display: inline-flex; align-items: center; gap: .5em; margin-top: .75rem; }
.whatsapp-link svg { color: #25D366; flex-shrink: 0; }
.whatsapp-link--inline { margin-top: 0; font-weight: 600; }
.whatsapp-note { display: block; font-size: .75rem; color: var(--color-text-muted); margin-top: .2rem; }

.footer-widget-title { color: var(--color-heading); font-size: 1rem; }

.footer-bottom { border-top: 1px solid var(--color-border); padding: 1.5rem 0; }
.footer-bottom__inner { display: flex; flex-direction: column; gap: .5rem; justify-content: space-between; font-size: .8rem; }
@media (min-width: 700px) { .footer-bottom__inner { flex-direction: row; align-items: center; } }
.footer-bottom a { color: var(--color-text-muted); }
.footer-bottom a:hover { color: var(--color-link-hover); }

/* ==========================================================================
   Sticky mobile contact bar (footer.php) — Call / WhatsApp / Quote, fixed
   to the bottom of the screen on small screens only, hidden on the
   Contact page itself since the form there is already the call to action.
   ========================================================================== */
.mobile-contact-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .35);
}
.mobile-contact-bar__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	padding: .55rem .5rem calc(.55rem + env(safe-area-inset-bottom, 0px));
	color: var(--color-text);
	font-size: .7rem;
	font-weight: 700;
	text-align: center;
	border-left: 1px solid var(--color-border);
}
.mobile-contact-bar__btn:first-child { border-left: 0; }
.mobile-contact-bar__btn:hover { color: var(--color-link-hover); }
.mobile-contact-bar__btn--whatsapp svg { color: #25D366; }
.mobile-contact-bar__btn--quote { background: var(--color-navy-btn); color: var(--color-white); }
.mobile-contact-bar__btn--quote:hover { background: var(--color-navy-btn-hover); color: var(--color-white); }

/* Room at the bottom of every page so the fixed bar never covers content. */
@media (max-width: 899.98px) {
	body { padding-bottom: 62px; }
}
@media (min-width: 900px) {
	.mobile-contact-bar { display: none; }
}

/* ==========================================================================
   Print — keep quotes/contact details usable if someone prints a page
   (dark backgrounds are overridden here — nobody wants to print black ink blocks)
   ========================================================================== */
@media print {
	.site-header, .nav-toggle, .cta-band, .gallery-filters, .mobile-contact-bar, form { display: none; }
	body, .hero, .page-banner, .site-footer, .service-card, .contact-details-box { background: #fff !important; color: #000 !important; }
}