/*
Theme Name: SiteSync TM Roofing
Description: Theme for TM Roofing & Building, a rebuild of the old Elementor site at rooferlancaster.co.uk that looks the same (navy and bright blue, Serpentine headings, glowing slanted buttons). Content comes from the SiteSync plugin; this theme only renders it.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Author: SiteSync
Text Domain: sitesync-tm-roofing
Update URI: false
*/

/* Montserrat (SIL Open Font License 1.1), Latin subset. Serpentine Bold Oblique is the client's own
   font file, which the old site already served (see assets/fonts/README.md). */
@font-face { font-family: "Serpentine"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/serpentine-bold-oblique.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/montserrat-500.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 500; font-display: swap; src: url(assets/fonts/montserrat-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/montserrat-700.woff2) format("woff2"); }

:root {
	--navy: #0d2757;
	--blue: #286cbd;
	--bright: #0075ff;
	--deep: #00102e;
	--head: "Serpentine", "Arial Black", Impact, sans-serif;
	--body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: #fff; color: #000; font: 500 20px/30px var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 600; text-transform: uppercase; line-height: 1; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; z-index: 300; background: #fff; color: #000; padding: .5rem 1rem; }
:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Shared pieces ---------- */
.kicker { margin: 0; font: 500 20px/1.2 var(--body); color: var(--bright); text-transform: uppercase; }
.kicker--italic { font-style: italic; }
.h-xl { font-size: 40px; }
.prose a { color: inherit; }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 0 0 14px; }
.prose ol { padding-left: 1.4em; margin: 0 0 14px; }

/* The glowing, slanted button: a white frame lit by three turning gradients round a blue button. */
@property --glow-1 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --glow-2 { syntax: "<angle>"; inherits: false; initial-value: 90deg; }
@property --glow-3 { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
@keyframes glow-1 { from { --glow-1: 0deg; } to { --glow-1: 360deg; } }
@keyframes glow-2 { from { --glow-2: 90deg; } to { --glow-2: 360deg; } }
@keyframes glow-3 { from { --glow-3: 180deg; } to { --glow-3: 720deg; } }
.glow-btn {
	display: inline-flex; flex: none; padding: 2px; border-radius: 8px; transform: skewX(-12deg); text-decoration: none;
	background-color: #fff;
	background-image:
		conic-gradient(from var(--glow-1) at 10% 15%, transparent, #eafbff 10%, transparent 30%, transparent),
		conic-gradient(from var(--glow-2) at 70% 60%, transparent, #29a8ff 10%, transparent 60%, transparent),
		conic-gradient(from var(--glow-3) at 50% 20%, transparent, #beefff 10%, transparent 50%, transparent);
	box-shadow: 0 0 2px rgba(90, 156, 229, .95), 0 0 10px rgba(40, 108, 189, .55), 0 0 24px rgba(40, 108, 189, .3), 0 20px 35px rgba(13, 39, 87, .45), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 12px 18px rgba(255, 255, 255, .04), inset 0 -18px 24px rgba(13, 39, 87, .5);
	animation: glow-1 3s linear infinite, glow-2 8s linear infinite, glow-3 13s linear infinite;
}
.glow-btn span { display: block; padding: 12px 24px; border: 2px solid #000; border-radius: 8px; background: linear-gradient(180deg, #2488ff 0%, #286cbd 100%); font: 500 16px/1 var(--head); text-transform: uppercase; color: #fff; white-space: nowrap; transition: filter .2s; }
.glow-btn:hover span { filter: brightness(1.12); }
.glow-btn--small span { padding: 8px 24px; }

/* The hero buttons with a light running round the edge. */
@property --laser-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes laser-spin { to { --laser-angle: 360deg; } }
.laser { position: relative; display: inline-flex; border-radius: 15px; --laser-color: #fff; --laser-tip: #a5b4fc; }
.laser::before {
	content: ""; position: absolute; inset: -1px; border-radius: 16px; pointer-events: none;
	background: conic-gradient(from var(--laser-angle), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 79%, var(--laser-color) 86.4%, var(--laser-tip) 93.7%, var(--laser-tip) 95.4%, var(--laser-tip) 97.1%, var(--laser-color) 99%, rgba(0, 0, 0, 0) 100%);
	filter: drop-shadow(0 0 1.6px var(--laser-color)) drop-shadow(0 0 4px var(--laser-tip)) drop-shadow(0 0 7px var(--laser-color));
	animation: laser-spin 5s linear infinite;
}
.laser:hover::before { animation-duration: 1s; }
.laser a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; margin: 1px; padding: 14px 32px; border-radius: 14px; background: var(--bright); font: 500 15px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; text-decoration: none; }
.laser--navy { --laser-color: var(--blue); }
.laser--navy a { background: var(--navy); }

/* The curved edges between sections (the old site's "curve" shape). */
.curve { position: absolute; left: 0; right: 0; overflow: hidden; line-height: 0; pointer-events: none; }
.curve svg { position: relative; left: 50%; display: block; transform: translateX(-50%); }
.curve path { fill: var(--navy); }
.curve--bottom { bottom: -1px; }
.curve--bottom svg { width: calc(159% + 1.3px); height: 462px; }
.curve--top { top: -1px; }
.curve--top svg { width: calc(133% + 1.3px); height: auto; aspect-ratio: 10 / 1; transform: translateX(-50%) rotate(180deg); }

/* Photos scrolling sideways in a loop. */
@keyframes strip { to { transform: translateX(-50%); } }
.photo-strip { width: 100%; overflow: hidden; }
.photo-strip__track { display: flex; width: max-content; animation: strip 50s linear infinite; }
.photo-strip:hover .photo-strip__track { animation-play-state: paused; }
.photo-strip ul { display: flex; gap: 8px; padding-right: 8px; }
.photo-strip li { width: 295px; height: 290px; flex: none; overflow: hidden; border: 3px solid var(--navy); border-radius: 29px; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header: the navy box over the banner photo ---------- */
.site-header { position: absolute; top: 42px; left: 0; right: 0; z-index: 50; padding: 0 10px; }
.site-header__box { position: relative; display: flex; overflow: hidden; width: 100%; max-width: 1440px; margin: 0 auto; border-radius: 20px; background: var(--navy); box-shadow: 0 0 10px 1px rgba(0, 132, 255, .5); }
.site-header__logo { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: min(352px, 27%); margin-right: -25px; padding: 25px; border: solid #1480f9; border-width: 5px 5px 0 0; border-radius: 16px 0 0 16px; background: linear-gradient(277deg, #286cbd 0%, #0d2757 50%); box-shadow: 0 0 10px 3px rgba(0, 0, 0, .5); transform: skewX(-12deg) translateX(-12px); text-decoration: none; color: #fff; font: 600 24px/1 var(--head); }
.site-header__logo img { width: 281px; transform: skewX(12deg); }
.site-header__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.site-header__top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 15px 0 25px; border-radius: 0 17px 0 0; background: linear-gradient(24deg, #0d2757 62%, #286cbd 100%); }
.top-contact { display: flex; align-items: center; }
.top-contact li { display: flex; align-items: center; height: 100%; }
.top-contact li + li::before { content: ""; width: 1px; height: 14px; margin: 0 10px; background: var(--bright); }
.top-contact a { display: flex; align-items: center; gap: 10px; font: 500 17px/1 var(--body); color: #fff; text-decoration: none; }
.top-contact .icon { font-size: 20px; color: var(--bright); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; height: 87px; padding: 0 25px 0 0; border-top: 1px solid var(--bright); border-radius: 0 0 20px 0; background: linear-gradient(180deg, #286cbd 0%, #0d2757 36%); }
.site-nav > ul { display: flex; align-items: center; }
.site-nav li { display: flex; align-items: center; }
.site-nav li + li::before { content: ""; width: 1px; height: 45px; background: var(--blue); }
.site-nav a { display: block; position: relative; padding: 13px clamp(8px, (100vw - 1050px) / 28, 20px); font: 500 16px/1 var(--head); text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; background: #fff; transform: scaleX(0); transition: transform .2s; }
.site-nav a:hover::after, .site-nav .is-current > a::after { transform: scaleX(1); }
.menu-toggle { display: none; }
.site-header__phone-actions { display: none; }

/* Narrower desktops: the menu closes up so it stays on one line with "Contact Us". */
@media (max-width: 1399px) and (min-width: 1201px) {
	.site-header__logo img { width: 240px; }
	.site-nav a { font-size: 14px; }
	.site-header__bar .glow-btn span { padding: 10px 18px; font-size: 14px; }
}

/* Below 1200px (the six menu items no longer fit beside the logo): the logo card with "Contact Us"
   and the round menu button, the menu dropping down. */
@media (max-width: 1200px) {
	.site-header { top: 0; padding: 20px; }
	.site-header__box { overflow: visible; flex-direction: column; align-items: center; max-width: 520px; padding: 20px; border: 3px solid var(--bright); border-radius: 25px; background: linear-gradient(152deg, #0d2757 0%, #286cbd 100%); box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
	.site-header__logo { flex: none; width: auto; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
	.site-header__logo img { width: 304px; transform: none; }
	.site-header__phone-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; }
	.site-header__main { display: contents; }
	.site-header__top { display: none; }
	.site-header__bar { display: block; height: auto; padding: 0; border: 0; background: none; width: 100%; }
	.site-header__bar > .glow-btn { display: none; }
	.menu-toggle { display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--bright); font-size: 18px; cursor: pointer; }
	.menu-toggle .icon--close, .menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
	.menu-toggle[aria-expanded="true"] .icon--close { display: block; }
	.site-nav { display: none; margin-top: 16px; }
	.site-nav.is-open { display: block; }
	.site-nav > ul { flex-direction: column; align-items: stretch; border-radius: 15px; background: var(--navy); overflow: hidden; }
	.site-nav li { display: block; }
	.site-nav li + li::before { display: none; }
	.site-nav li + li { border-top: 1px solid var(--blue); }
	.site-nav a { padding: 14px 20px; text-align: center; }
	.site-nav a::after { display: none; }
	.site-nav .is-current > a { background: var(--blue); }
}

/* ---------- Banner (hero): photo, title, buttons and the glass quote form ---------- */
.banner { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.banner__media { position: absolute; inset: 0; }
.banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.banner__media img.is-active { opacity: 1; }
.banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000 79%, #0075ff 100%); opacity: .46; }
.banner__inner { position: relative; display: grid; grid-template-columns: minmax(0, 759fr) minmax(0, 611fr); gap: 30px; width: min(1400px, 100% - 40px); margin: 0 auto; padding: 250px 0 100px; }
.banner__text { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 10px; }
.banner__kicker { margin: 0 0 -19px; font: italic 500 25px/1.2 var(--body); color: var(--bright); text-transform: uppercase; }
.banner__title { font-size: 40px; color: #fff; }
.banner__buttons { display: flex; flex-wrap: wrap; gap: 20px; }
.banner__email { display: inline-block; align-self: flex-start; padding: 12px 24px; border-radius: 3px; background: linear-gradient(90deg, #0d2757 0%, #0075ff 100%); font: 500 20px/1 var(--body); color: #fff; text-decoration: none; }
.banner__lines li + li { margin-top: 18px; }
.banner__lines a { display: flex; align-items: center; gap: 14px; font: 600 33px/1 var(--head); text-transform: uppercase; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.banner__lines .icon { font-size: 26px; color: var(--bright); }

/* The quote form in its glass card. */
.form-card { align-self: start; padding: 30px; border: 1px solid rgba(88, 92, 98, .4); border-radius: 16px; background: rgba(88, 92, 98, .1); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 8px 32px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .3); color: #fff; scroll-margin-top: 20px; }
.form-card__title { margin-bottom: 18px; font-size: 25px; text-align: center; color: #fff; }
.sitesync-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sitesync-field { display: flex; flex-direction: column; margin: 0; }
.sitesync-field--textarea, .sitesync-submit, .cf-turnstile { grid-column: 1 / -1; }
.sitesync-field label { font: 500 20px/1.2 var(--body); color: #fff; }
.sitesync-field label span { display: none; }
.sitesync-field input, .sitesync-field select, .sitesync-field textarea { width: 100%; padding: 10px 16px; border: 3px solid var(--bright); border-radius: 10px; background: #fff; font: 500 20px/1.2 var(--body); color: #000; }
.sitesync-field select { -webkit-appearance: none; appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px; }
.sitesync-field textarea { height: 126px; resize: vertical; }
.sitesync-field ::placeholder { color: #777; }
.sitesync-submit { margin: 0; }
.sitesync-submit .button { width: 100%; padding: 6px 20px; border: 0; border-radius: 15px; background: var(--bright); font: 600 25px/28px var(--head); text-transform: uppercase; color: #fff; cursor: pointer; transition: filter .2s; }
.sitesync-submit .button:hover { filter: brightness(1.1); }
.sitesync-form-message { margin-bottom: 14px; padding: 14px 18px; border-radius: 10px; background: #fff; color: var(--navy); font-size: 18px; line-height: 1.4; }
.sitesync-form-message--error { color: #a00; }

/* ---------- About: the blue card beside the heading, text and photos ---------- */
.about { position: relative; padding: 40px 0; background: #fff center / cover no-repeat; }
.about::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .5); }
.about__inner { position: relative; display: grid; grid-template-columns: minmax(0, 544fr) minmax(0, 826fr); gap: 30px; width: min(1400px, 100% - 40px); margin: 0 auto; }
.about--narrow .about__inner { grid-template-columns: minmax(0, 392fr) minmax(0, 896fr); width: min(1318px, 100% - 40px); }
.about__card { align-self: start; padding: 20px; border-radius: 25px; background: linear-gradient(182deg, #0d2757 0%, #0075ff 100%); box-shadow: 0 0 10px 3px rgba(0, 0, 0, .5); color: #fff; }
.about__card .kicker { color: #fff; }
.about__card h2 { margin-bottom: 30px; font-size: 35px; color: #fff; }
.about__card h2 + .prose { margin-top: -8px; }
.about__card .prose + h2 { margin-top: 30px; }
.about__main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 10px; min-width: 0; }
.about__main h2 { font-size: 40px; color: #000; }

/* ---------- Offer: kicker, heading and line on the dark photo, then service cards or text ---------- */
.offer { position: relative; padding: 50px 20px; background: var(--navy) center / cover no-repeat; color: #fff; text-align: center; scroll-margin-top: 0; }
@media (min-width: 1025px) { .offer { background-attachment: fixed; } }
.offer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0d2757 0%, #286cbd 100%); opacity: .81; }
.offer > * { position: relative; }
.offer .kicker { font-size: 25px; }
.offer h2 { font-size: 40px; }
.offer__line { width: 54%; height: 1px; margin: 20px auto; background: var(--bright); border: 0; }
.offer__text { max-width: 1500px; margin: 0 auto; }
.offer__cards { display: flex; gap: 20px; max-width: 1500px; margin: 0 auto; padding: 10px; text-align: left; }
.card { position: relative; flex: 1 1 0; min-width: 0; min-height: 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; overflow: hidden; padding: 170px 15px 15px; border: 3px solid #fff; border-radius: 20px; box-shadow: 0 0 10px 4px rgba(0, 0, 0, .5); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); opacity: .91; }
.card > :not(img) { position: relative; z-index: 2; }
.card h3 { font-size: 35px; color: #fff; }
.card p { margin: 0; }
.card .glow-btn { margin: auto 0 4px 6px; }

/* ---------- Feature: photos (or a photo, or before and after) beside the text, curved navy edge ---------- */
.feature { position: relative; padding: 40px 0 159px; background: #fff; }
.feature__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 789fr) minmax(0, 581fr); gap: 30px; width: min(1400px, 100% - 40px); margin: 0 auto; }
.feature__media, .feature__text { display: flex; flex-direction: column; justify-content: center; padding: 10px; min-width: 0; }
.feature__text { align-items: flex-start; gap: 20px; }
.feature__text h2 { font-size: 40px; margin-top: -20px; }
.feature__text .kicker { font-style: italic; }
.feature__photo { width: 87%; margin: 0 auto; border-radius: 20px; box-shadow: 0 0 10px 3px rgba(0, 0, 0, .5); }

/* Before and after: drag the handle (or use the arrow keys) to compare. */
.ba { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 0 10px 3px rgba(0, 0, 0, .3); --pos: 50%; aspect-ratio: 4 / 2.12; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__tag { position: absolute; top: 16px; z-index: 2; padding: 4px 12px; border-radius: 6px; background: rgba(0, 0, 0, .45); font: 600 15px/1.4 var(--body); color: #fff; }
.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba__line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6l7-6v12zM24 6l-7-6v12z'/%3E%3C/svg%3E") no-repeat center / 18px 9px; box-shadow: 0 0 6px rgba(0, 0, 0, .3); }
.ba__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + .ba__line::after { outline: 3px solid var(--bright); outline-offset: 2px; }

/* ---------- Why: the "Enquire today!" card, then heading, text and ticks on navy ---------- */
.why { position: relative; padding: 14px 20px 40px; background: var(--navy); color: #fff; text-align: center; }
.enquire { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; width: min(77%, 1155px); margin: -120px auto 0; padding: 10px 20px; border-radius: 25px; background: linear-gradient(158deg, #0075ff 0%, #286cbd 100%); box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5); text-align: left; }
.enquire__title { margin: 0; font: 600 40px/1.1 var(--head); text-transform: uppercase; }
.enquire__text { margin: 0; }
.enquire__lines a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.enquire__lines .icon { font-size: 14px; color: var(--navy); }
.why__inner { max-width: 1500px; min-height: 275px; margin: 0 auto; padding: 50px 0 10px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.why h2 { font-size: 40px; color: #fff; }
.why__block { display: flex; flex-direction: column; gap: 20px; }
.why__block + .why__block { margin-top: 20px; }
.ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks .icon { font-size: 14px; color: var(--bright); }

/* ---------- FAQ: on navy, under the why section ---------- */
.faq { padding: 30px 20px 60px; background: var(--navy); color: #fff; }
.faq__inner { max-width: 1100px; margin: 0 auto; }
.faq .kicker { text-align: center; }
.faq h2 { margin-bottom: 30px; font-size: 40px; text-align: center; color: #fff; }
.faq__item { margin-top: 12px; border: 2px solid var(--bright); border-radius: 15px; background: rgba(255, 255, 255, .04); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; font-weight: 700; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { font-size: 16px; color: var(--bright); transform: rotate(90deg); transition: transform .2s; }
.faq__item[open] summary .icon { transform: rotate(-90deg); }
.faq__answer { padding: 0 22px 18px; }

/* ---------- Areas: curved navy edge, then text beside the map ---------- */
.areas { position: relative; min-height: 499px; padding: 115px 20px 50px; background: #fff center / cover no-repeat; }
.areas::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .81); }
.areas__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 1500px; margin: 0 auto; }
.areas__text, .areas__map { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 10px; min-width: 0; }
.areas__map { padding: 10px 0; }
.areas__text { align-items: flex-start; }
.areas__text h2 { font-size: 40px; margin-top: -20px; }
.areas__map iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; box-shadow: 0 0 10px 3px rgba(0, 0, 0, .3); background: #e5e3df; }

/* ---------- Gallery and plain text pages: on the blue gradient ---------- */
.gallery, .text-page { padding: 285px 20px 80px; background: linear-gradient(180deg, #286cbd 0%, #1d4f97 100%); color: #fff; }
.gallery__head { text-align: center; margin-bottom: 20px; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1440px; margin: 0 auto; }
.gallery__grid a { display: block; overflow: hidden; border: 3px solid #fff; border-radius: 20px; aspect-ratio: 350 / 233; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery__grid a:hover img { transform: scale(1.04); }
.text-page__inner { max-width: 1140px; margin: 0 auto; }
.text-page h1 { font-size: 40px; text-align: center; }
.text-page__line { width: 54%; height: 1px; margin: 20px auto 30px; background: var(--bright); border: 0; }
.text-page .prose { font-size: 18px; line-height: 1.6; }
.text-page .prose h2 { margin: 30px 0 12px; font-size: 24px; }
.text-page .prose a { overflow-wrap: anywhere; }
.text-page__button { display: flex; justify-content: center; margin-top: 40px; }

.lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 50px 60px; border: 0; background: rgba(0, 0, 0, .9); }
.lightbox:not([open]) { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.lightbox button { position: absolute; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 10px; }
.lightbox__close { top: 10px; right: 14px; }
.lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }

.notfound { padding: 285px 20px 120px; background: linear-gradient(180deg, #286cbd 0%, #1d4f97 100%); color: #fff; text-align: center; }
.notfound h1 { font-size: 40px; margin-bottom: 20px; }
.notfound .glow-btn { margin-top: 20px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 4px solid #fff; background: linear-gradient(135deg, #0d2757 50%, #0075ff 100%); color: #fff; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 394fr) minmax(0, 618fr) minmax(0, 588fr); gap: 0; align-items: center; max-width: 1600px; min-height: 169px; margin: 0 auto; padding: 30px 15px; }
.site-footer__logo img { width: 344px; }
.site-footer__heading { margin: 0 0 12px; font: 500 22px/1.2 var(--body); text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .icon { font-size: 14px; color: var(--bright); }
.site-footer__bottom { padding: 10px 20px; background: var(--deep); text-align: center; }
.site-footer__bottom p { max-width: 1140px; margin: 0 auto; }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bright); color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Tablets ---------- */
@media (max-width: 1024px) {
	.banner__inner { grid-template-columns: 1fr; padding-top: 290px; padding-bottom: 60px; }
	.banner__text { text-align: center; align-items: center; }
	.banner__buttons { justify-content: center; }
	.banner__email { align-self: center; }
	.banner__lines a { justify-content: center; }
	.form-card { width: 100%; max-width: 640px; margin: 0 auto; }
	.about__inner, .about--narrow .about__inner { grid-template-columns: 1fr; width: min(680px, 100% - 40px); }
	.about__card, .about__main { text-align: center; align-items: center; }
	.offer__cards { flex-wrap: wrap; justify-content: center; }
	.card { flex: 0 1 calc(50% - 10px); }
	.feature__inner { grid-template-columns: 1fr; width: min(760px, 100% - 40px); }
	.feature__text { order: -1; align-items: center; text-align: center; }
	.enquire { width: 100%; max-width: 760px; }
	.areas__inner { grid-template-columns: 1fr; max-width: 760px; }
	.areas__text { align-items: center; text-align: center; }
	.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__inner { grid-template-columns: 1fr 1fr; gap: 30px; }
	.site-footer__logo { grid-column: 1 / -1; }
	.gallery, .text-page, .notfound { padding-top: 300px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	body { font-size: 18px; line-height: 30px; }
	.banner__inner { padding-top: 250px; width: calc(100% - 40px); }
	.banner__kicker { margin-bottom: -14px; font-size: 22px; }
	.banner__title { font-size: 35px; }
	.banner:not(.banner--contact) .banner__intro { display: none; }
	.banner__buttons { flex-direction: column; align-items: center; }
	.banner__lines a { font-size: 18px; }
	.form-card { padding: 30px 30px 40px; }
	.sitesync-form { grid-template-columns: 1fr; }
	.about__card h2 { font-size: 31px; }
	.about__main h2, .feature__text h2, .areas__text h2, .why h2, .offer h2, .faq h2, .gallery h1, .text-page h1 { font-size: 30px; }
	.offer h2 { font-size: 35px; }
	.card { flex-basis: 100%; }
	.photo-strip li { width: 260px; height: 290px; }
	.enquire { grid-template-columns: 1fr; text-align: center; padding: 20px; }
	.enquire__title { font-size: 34px; }
	.enquire__lines li + li { display: none; }
	.feature { padding-bottom: 120px; }
	.areas { padding-top: 70px; }
	.gallery__grid { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__logo img { width: 304px; }
	.site-footer__bottom { font-size: 18px; }
	.gallery, .text-page, .notfound { padding-top: 260px; }
}