/* ======================================================================
   Loft Ladders Scotland — Modernised homepage stylesheet
   Standalone system (does not depend on skeleton.css/custom.css).
   Brand accent kept faithful to real site colours: warm orange #f7a804,
   hero CTA orange #ff5e00 / hover #ff4800. Legacy blue/pink/purple
   template cruft has been dropped entirely.
   ====================================================================== */

/* ---------- Design tokens ---------- */
:root {
	--orange:        #f7a804;
	--orange-deep:   #ff5e00;
	--orange-hover:  #ff4800;
	--orange-tint:   #fef3dc;

	--ink:           #2a2119;
	--ink-soft:      #4a3f36;
	--body-text:     #58514c;
	--muted:         #8a8079;

	--bg:            #f2f2f2;
	--bg-alt:        #f0f0f0;
	--card-bg:       #ffffff;
	--line:          rgba(42, 33, 25, 0.10);

	--deep:          #000031;
	--deep-alt:      #12173f;
	--deep-text:     #eef1fb;
	--deep-line:     rgba(238, 241, 251, 0.12);

	--shadow-sm: 0 2px 8px rgba(35, 25, 15, 0.08);
	--shadow-md: 0 12px 30px rgba(35, 25, 15, 0.12);
	--shadow-lg: 0 24px 60px rgba(35, 25, 15, 0.20);

	--radius-md: 14px;
	--radius-lg: 22px;

	--container: 1200px;
	--header-h: 84px;
}

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 400;
	background: var(--bg);
	color: var(--body-text);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 700; }
p { margin: 0 0 1rem; }
button { font-family: inherit; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange-hover);
	margin-bottom: 0.9rem;
}
.deep .eyebrow, .band .eyebrow { color: var(--orange); }

.section-head {
	max-width: 900px;
	margin: 0 auto 3rem;
	text-align: center;
}
.section-head h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.section-head p {
	margin-top: 0.9rem;
	font-size: 1.05rem;
	color: var(--muted);
}
.deep .section-head p { color: rgba(244, 233, 218, 0.68); }

section { position: relative; padding: 5.5rem 0; }
section.tight { padding: 4rem 0; }
section.deep { background: var(--deep); color: var(--deep-text); }
section.alt { background: var(--bg-alt); }

.deep h1, .deep h2, .deep h3, .deep h4, .deep h5, .deep h6 { color: var(--deep-text); }

/* subtle grain / warmth texture applied everywhere via body backdrop */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
	background-image:
		radial-gradient(circle at 15% 8%, rgba(247, 168, 4, 0.07), transparent 40%),
		radial-gradient(circle at 90% 4%, rgba(255, 94, 0, 0.05), transparent 45%);
}

/* ---------- Reveal-on-load animation ---------- */
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 0.8s cubic-bezier(.2,.7,.3,1) both; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .18s; }
.reveal-3 { animation-delay: .31s; }

/* ---------- Reveal-on-scroll (same fade+slide-up, but gated on scroll
   instead of firing on load — for sections below the fold).
   Fail-safe by design: .scroll-reveal is fully visible by default. js/scroll-reveal.js
   is the only thing that ever hides a section (by adding .reveal-pending), and only
   after confirming it can observe it and reveal it again on scroll. If that script
   404s, errors, or IntersectionObserver is unsupported, sections simply never get
   hidden in the first place — there is no failure mode that leaves content invisible. */
.scroll-reveal {
	transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1);
}
.scroll-reveal.reveal-pending {
	opacity: 0;
	transform: translateY(28px);
}
@media (prefers-reduced-motion: reduce) {
	.scroll-reveal.reveal-pending { opacity: 1; transform: none; transition: none; }
}
.reveal-4 { animation-delay: .44s; }

/* ======================================================================
   Header + primary nav (styles nav.php markup, unmodified)
   ====================================================================== */
header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 500;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: var(--deep);
	border-bottom: 1px solid transparent;
	transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
header.is-scrolled {
	box-shadow: 0 8px 24px rgba(20, 14, 8, 0.35);
	border-bottom-color: var(--deep-line);
}
/* Full-width header bar (not capped at --container/1200px like the rest of the page) —
   the nav needs the extra horizontal room for the logo, full nav links, phone number, and
   two full-text CTA pills to all fit without crowding at typical desktop widths. */
header .container { display: flex; align-items: center; justify-content: space-between; max-width: none; padding: 0 32px; }

header a[href="/"] { display: inline-flex; align-items: center; }
header h1 {
	width: 119px;
	height: 60px;
	background: url("../images/alt_logo2.png") left center no-repeat;
	background-size: 119px 60px;
	text-indent: -9999px;
	margin: 0;
}

header nav { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
header nav ul {
	display: flex;
	align-items: center;
	gap: 2px;
}
header nav ul li { margin: 0; }

header nav ul li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 9px;
	color: rgba(244, 233, 218, 0.78);
	font-size: 0.82rem;
	font-weight: 700;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color .2s ease, border-color .2s ease;
}
header nav ul li a:hover { color: var(--orange); }
header nav ul li a.current { color: var(--deep-text); border-bottom-color: var(--orange); }

header nav ul li a.button,
header nav ul li a.button-primary,
header nav ul li a.whatsapp { border-bottom: none; }

/* Full-text CTA pills, sized down a step from the hero's (52px/30px padding/0.92rem)
   to suit the nav bar, and pushed to the far right of the bar via flex `order` — the
   DOM order in nav.php stays untouched, these just render last among the (all order:0)
   phone number and nav links. */
header nav ul li:has(> a.button-primary),
header nav ul li:has(> a.whatsapp) {
	order: 20;
}

/* Nav link order reversed (Ladders first, phone last) via flex `order` — nav-modern.php's
   DOM order stays untouched. The two CTA buttons above keep order:20, staying rightmost.
   Uses [href^="..."] (starts-with) rather than an exact [href="..."] match, since
   nav-modern.php's hrefs are suffixed (loftladders-modern.php) — an earlier exact-match
   version silently stopped working once that suffix was added. */
header nav ul li:has(> a[href^="loftladders"])       { order: 1; }
header nav ul li:has(> a[href^="electricladders"])   { order: 2; }
header nav ul li:has(> a[href^="lofthatches"])       { order: 3; }
header nav ul li:has(> a[href^="loftflooring"])      { order: 4; }
header nav ul li:has(> a[href^="insulation"])        { order: 5; }
header nav ul li:has(> a[href^="dust-proof-rooms"])  { order: 6; }
header nav ul li:has(> a[href^="testimonials"])      { order: 7; }
header nav ul li#desktop_phone                     { order: 8; }
header nav ul li a.button-primary,
header nav ul li a.whatsapp {
	height: 40px;
	padding: 0 18px;
	font-size: 0.76rem;
	gap: 6px;
	flex: 0 0 auto;
}
header nav ul li a.button-primary i { font-size: 14px; }
header nav ul li a.whatsapp::before { font-size: 15px; }

li#desktop_phone { display: flex; align-items: center; }
li#desktop_phone i { color: var(--orange); font-size: 20px; }
li#desktop_phone a { text-decoration: none !important; font-weight: 700; color: var(--deep-text); padding-left: 6px; }
li#desktop_phone a:hover { color: var(--orange); }

header nav ul li:has(> a.whatsapp) { margin-left: 10px; }

li#mobile_phone { display: flex; align-items: center; gap: 4px; }
li#mobile_phone i { color: var(--orange); font-size: 20px; }
li#mobile_phone a { font-weight: 700; color: var(--deep-text); text-decoration: none !important; font-size: 0.92rem; }

a#toggle_mobile {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: rgba(244, 233, 218, 0.12);
	border: 1px solid rgba(244, 233, 218, 0.3);
	color: var(--deep-text) !important;
	font-weight: 700;
	font-size: 0.85rem;
}
a#toggle_mobile:hover { background: var(--orange); border-color: var(--orange); color: #1c1208 !important; }

@media (max-width: 1149px) {
	header nav ul li.desktop { display: none !important; }
	header nav ul { gap: 14px; }
}
@media (min-width: 1150px) {
	header nav ul li#mobile_menu,
	header nav ul li#mobile_phone { display: none; }
}
@media (max-width: 600px) {
	header h1 { width: 60px; height: 40px; background-size: 60px 40px; }
	:root { --header-h: 68px; }
}

/* ======================================================================
   Mobile nav drawer (styles mobile_nav.php markup, unmodified)
   ====================================================================== */
.overlay {
	position: fixed; inset: 0;
	background: rgba(20, 14, 8, 0.55);
	display: none;
	z-index: 600;
	backdrop-filter: none;
}

#mobile_nav {
	position: fixed;
	top: 0; right: -320px;
	width: 300px; max-width: 86vw;
	height: 100%;
	overflow-y: auto;
	background: var(--bg);
	z-index: 700;
	box-shadow: -10px 0 40px rgba(0,0,0,0.25);
	transition: right .32s cubic-bezier(.2,.8,.3,1);
	padding-bottom: 40px;
}
#mobile_nav.active { right: 0; }

#mobile_nav > i#close {
	display: block;
	font-size: 22px;
	color: var(--ink);
	margin: 22px 0 0 22px;
	cursor: pointer;
}
#mobile_nav > p {
	padding: 0 22px 20px;
	margin-bottom: 20px !important;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-weight: 700 !important;
	font-size: 1.6rem !important;
}

#mobile_nav ul { padding: 0 22px; }
#mobile_nav ul li {
	border-bottom: 1px solid var(--line);
}
#mobile_nav ul li:first-child,
#mobile_nav ul li:nth-child(2) {
	border-bottom: none;
	padding: 4px 0 18px;
}
#mobile_nav ul li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 0;
	color: var(--ink-soft);
	font-weight: 700;
	font-size: 0.98rem;
}
#mobile_nav ul li i { color: var(--muted); font-size: 17px; width: 20px; text-align: center; }
#mobile_nav ul li.current a,
#mobile_nav ul li.current i { color: var(--orange-hover); }
#mobile_nav ul li a.button-primary,
#mobile_nav ul li a.whatsapp {
	padding: 12px 18px !important;
	border-radius: 999px;
	display: inline-flex !important;
	width: auto;
}
#mobile_nav a[href*="facebook.com"],
#mobile_nav a[href*="twitter.com"],
#mobile_nav a[href*="youtube.com"] {
	display: inline-flex;
	margin-top: 6px;
}
#mobile_nav a[href*="facebook.com"] img,
#mobile_nav a[href*="twitter.com"] img,
#mobile_nav a[href*="youtube.com"] img {
	width: 34px; height: 34px;
	filter: grayscale(1) brightness(1.7) opacity(0.55);
	transition: filter .2s ease;
}
#mobile_nav a[href*="facebook.com"]:hover img,
#mobile_nav a[href*="twitter.com"]:hover img,
#mobile_nav a[href*="youtube.com"]:hover img { filter: grayscale(0) brightness(1) opacity(1); }

/* ======================================================================
   Buttons & CTAs (shared classes used by nav/mobile_nav/footer + page)
   ====================================================================== */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	background: transparent;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover { border-color: var(--ink-soft); color: var(--ink); }
.button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.button-primary {
	border: none;
	color: #fff !important;
	background: linear-gradient(135deg, var(--orange-deep), var(--orange));
	box-shadow: var(--shadow-sm);
}
.button-primary:hover {
	background: linear-gradient(135deg, var(--orange-hover), var(--orange-deep));
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: #fff !important;
}
.button-primary i { color: #fff !important; }

a.whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: #25d366;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: background .2s ease, transform .18s ease, box-shadow .18s ease;
	box-shadow: var(--shadow-sm);
}
a.whatsapp:hover { background: #1eb956; transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* the site's real WhatsApp icon file is images/whatsapp.png; nav/mobile_nav/footer
   includes still point at a non-existent images/whatsapp-white-icon.png — hide that
   broken <img> and draw the WhatsApp glyph with Font Awesome instead, everywhere. */
a.whatsapp img.whatsapp-icon { display: none; }
a.whatsapp::before {
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
	content: "\f232";
	font-size: 17px;
	line-height: 1;
}

.cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--ink);
	font-size: 0.95rem;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 2px;
	transition: color .2s ease, gap .2s ease, border-color .2s ease;
}
.cta-link i, .cta-link .arrow { transition: transform .2s ease; }
.cta-link:hover { color: var(--orange-hover); }
.cta-link:hover .arrow { transform: translateX(4px); }

/* ======================================================================
   Hero
   ====================================================================== */
#hero {
	position: relative;
	margin-top: 0;
	padding-top: calc(var(--header-h) + 5.5rem);
	padding-bottom: 6rem;
	min-height: 88vh;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
}
/* images/hero2.jpg's natural cool/blue cast now matches the page's navy palette, so it
   only needs a light exposure/contrast pass for text legibility — no colour-push filter
   needed. The photo lives on its own pseudo-element so the filter/gradient can be applied
   without touching the real image file or affecting the text/buttons layered above it. */
#hero::before {
	content: "";
	position: absolute; inset: -2px;
	background: url("../images/hero2.jpg") center 30% / cover no-repeat;
	filter: saturate(1.05) brightness(0.85) contrast(1.05);
}
#hero::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,20,0.68) 0%, rgba(0,0,20,0.42) 45%, rgba(0,0,12,0.82) 100%);
}
#hero .container { position: relative; z-index: 2; text-align: center; }

#hero .hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.28);
	color: var(--orange);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 1.6rem;
}

#hero h2 {
	color: #fff;
	font-size: clamp(2.6rem, 6.4vw, 5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 900px;
	margin: 0 auto 1.4rem;
}

#hero h3 {
	color: rgba(255,255,255,0.88);
	font-weight: 300;
	font-size: clamp(1.1rem, 2vw, 1.45rem);
	line-height: 1.55;
	max-width: 620px;
	margin: 0 auto 2.6rem;
}

#hero .hero-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 2.6rem;
}
#hero .button-primary,
#hero a.whatsapp { height: 52px; padding-left: 30px; padding-right: 30px; font-size: 0.92rem; }
#hero .button-primary i { margin-right: 2px; }

.hero-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	color: rgba(255,255,255,0.78);
	font-size: 0.88rem;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { color: var(--orange); font-size: 15px; }

@media (max-width: 600px) {
	#hero { min-height: auto; padding-top: calc(var(--header-h) + 2.6rem); padding-bottom: 3.4rem; }
	#hero .hero-ctas { flex-direction: column; align-items: stretch; }
	#hero .hero-ctas a { width: 100%; }
}

/* ======================================================================
   Intro cards (Loft Ladders / Loft Hatches / About Us)
   ====================================================================== */
.intro-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.card {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
	display: flex;
	flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card .card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card .card-body { padding: 1.8rem 1.8rem 2rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.card p { color: var(--body-text); font-size: 0.98rem; flex: 1; margin-bottom: 1.3rem; }

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

/* ======================================================================
   Product grid (Flooring / Insulation / Dust-proof / Accessories)
   ====================================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.8rem;
}
.product-grid .card .card-body { padding: 1.5rem 1.5rem 1.7rem; }
.product-grid .card h3 { font-size: 1.15rem; }
.product-grid .card p { font-size: 0.92rem; }

@media (max-width: 1020px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.product-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   Testimonials — deep warm-neutral section + horizontal scroll gallery
   (styles the raw <blockquote> markup produced by blockquotes.php)
   ====================================================================== */
.testimonial-rail {
	position: relative;
}
.testimonial-rail .rail-fade {
	position: absolute;
	top: 0; bottom: 1.6rem;
	width: 22px;
	z-index: 2;
	pointer-events: none;
}
.testimonial-rail .rail-fade.left { left: 0; background: linear-gradient(90deg, var(--deep), transparent); }
.testimonial-rail .rail-fade.right { right: 0; background: linear-gradient(270deg, var(--deep), transparent); }

.quotes {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.5rem 0 1.6rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(244,233,218,0.35) transparent;
}
.quotes::-webkit-scrollbar { height: 8px; }
.quotes::-webkit-scrollbar-thumb { background: rgba(244,233,218,0.28); border-radius: 999px; }
.quotes::-webkit-scrollbar-track { background: transparent; }

.quotes > blockquote {
	scroll-snap-align: start;
	flex: 0 0 320px;
	margin: 0;
	background: var(--deep-alt);
	border: 1px solid var(--deep-line);
	border-radius: var(--radius-lg);
	padding: 2rem 1.9rem 1.8rem;
	display: flex;
	flex-direction: column;
}
.quotes blockquote p.quote {
	color: var(--deep-text);
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.6;
	text-align: left;
	margin-bottom: 1.4rem;
	flex: 1;
}
.quotes blockquote p.quote i { font-style: normal; }
.quotes blockquote div.author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}
.quotes blockquote img {
	width: 46px; height: 46px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
	border: 2px solid rgba(247,168,4,0.5);
}
.quotes blockquote div.author > p.author,
.quotes blockquote div.author > p.city {
	text-align: left;
	margin: 0;
}
/* fallback avatar circle when a testimonial has no headshot */
.quotes blockquote div.author:not(:has(img))::before {
	content: "";
	width: 46px; height: 46px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: linear-gradient(135deg, var(--orange-deep), var(--orange));
}
.quotes blockquote p.author {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--deep-text);
}
.quotes blockquote p.city {
	font-size: 0.82rem;
	color: rgba(244,233,218,0.55);
}
.quotes blockquote div#rating {
	text-align: left !important;
	order: -1;
	margin-bottom: 0.9rem;
}
.quotes blockquote div#rating i {
	color: var(--orange) !important;
	font-size: 17px;
	margin-right: 1px;
}

.rail-controls {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 0.6rem;
}
.rail-controls button {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--deep-line);
	background: transparent;
	color: var(--deep-text);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.rail-controls button:hover { background: var(--orange); border-color: var(--orange); color: #1c1208; }

@media (max-width: 600px) {
	.quotes > blockquote { flex-basis: 82vw; padding: 1.7rem 1.4rem 1.5rem; }
	.testimonial-rail .rail-fade { width: 16px; }
}

/* ======================================================================
   CTA band
   ====================================================================== */
.band {
	background: linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
	color: var(--ink);
	text-align: center;
	overflow: hidden;
	position: relative;
}
.band::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 85% 10%, rgba(255,255,255,0.28), transparent 55%);
}
.band .container { position: relative; z-index: 1; max-width: 780px; }
.band i.fa-coffee {
	font-size: 2.6rem;
	color: rgba(42,33,25,0.6);
	margin-bottom: 1.2rem;
}
.band h2 {
	color: var(--ink);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	margin-bottom: 0.6rem;
}
.band p.tagline {
	font-size: 1.05rem;
	color: rgba(42,33,25,0.72);
	margin-bottom: 2rem;
	font-style: italic;
}
.band .button-primary {
	background: var(--ink);
	color: #fff !important;
	height: 52px;
	padding: 0 32px;
}
.band .button-primary:hover { background: #100b06; }

/* ======================================================================
   Partner logos strip
   ====================================================================== */
.logos-strip { text-align: center; }
/* .logos-card is inline-block (to shrink-to-content + center via text-align), which
   means it shares the same inline flow as the .eyebrow span right before it instead of
   dropping below it — force the eyebrow onto its own line here. */
.logos-strip .eyebrow { display: block; }
.logos-strip .logos-card {
	display: inline-block;
	max-width: 100%;
	padding: 2.2rem 2.6rem;
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.logos-strip img {
	max-width: 100%;
	width: 720px;
	filter: grayscale(1) opacity(0.75);
	transition: filter .4s ease;
}
.logos-strip .logos-card:hover img,
.logos-strip .logos-card:focus-within img { filter: grayscale(0) opacity(1); }

/* ======================================================================
   Footer (styles footer.php markup, unmodified — dark warm-neutral)
   ====================================================================== */
footer {
	background: var(--deep);
	color: rgba(244,233,218,0.82);
	padding: 0 0 0;
}
footer a { color: rgba(244,233,218,0.82); transition: color .2s ease; }
footer a:hover { color: var(--orange); }
footer h5 {
	color: var(--deep-text);
	font-size: 1.15rem;
	margin-bottom: 1.2rem;
}
footer .container { max-width: var(--container); padding: 0 24px; }

footer .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 2.6rem 2rem;
	padding-top: 4.5rem !important;
	padding-bottom: 3rem !important;
	border-bottom: 1px solid var(--deep-line) !important;
}
footer .columns { min-width: 0; }

/* Icon-left/text-right pairing: the live site's original custom.css relies on a classic
   `float:left` icon + `display:block` text pattern (footer i { float:left } + .get-in-touch
   { display:block }) so each icon stays pinned beside its own adjacent text and each pair
   stacks as its own row. Restored that here instead of inline-block, which let icons and
   text drift into the wrong row when content wrapped. The stray inline
   `style="margin-bottom: 65px"` on the location_on icon in footer.php was a hack tuned to
   the old broken layout — overridden here via !important now that float+block keeps the
   3-line address wrapped correctly beside it without needing that extra gap. */
footer i.material-icons-outlined {
	color: var(--orange) !important;
	float: left !important;
	font-size: 19px;
	margin-right: 10px !important;
	margin-bottom: 0 !important;
	margin-top: 3px;
}
footer .get-in-touch {
	display: block !important;
	margin-bottom: 14px !important;
	font-size: 0.95rem;
}

footer .whatsapp { margin: 4px 0 16px; clear: left; }

footer .four.columns:nth-child(2) p { font-size: 0.95rem; margin-bottom: 1.2rem !important; }
footer .four.columns:nth-child(2) div > div { margin-bottom: 8px; }
footer .four.columns:nth-child(2) .button-primary {
	width: 100%;
	margin-top: 1.6rem;
}

.works-container {
	position: relative;
	float: left;
	width: 23.5%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
	border-radius: 8px;
	overflow: hidden;
}
.works-container:nth-child(4n) { margin-right: 0; }
.squares {
	width: 100%;
	padding-top: 100%;
	background-size: cover !important;
}
.works-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(247,168,4,0.85), rgba(255,94,0,0.85));
	opacity: 0;
	transition: opacity .25s ease;
	display: flex; align-items: center; justify-content: center;
}
.works-overlay:hover { opacity: 1; cursor: pointer; }
.works-overlay i { color: #fff; font-size: 20px; }

footer h5[style] { margin-top: 3.5rem !important; }

#site_map { padding-top: 0 !important; }
footer #site_map .columns ul li { margin-bottom: 0.7rem; }
footer #site_map strong { color: var(--deep-text); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
footer #site_map a { font-size: 0.92rem; }

/* index-modern.php doesn't load custom.css (which already styles this toggle plainly),
   so without an explicit reset here it was rendering as a native <button> — background,
   border, padding chrome and all. Strip that back to plain text matching the sitemap
   links beside it; the chevron alone (rotating on expand) is the affordance. */
.footer-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	margin-top: 4px;
	color: rgba(244,233,218,0.82);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 400;
	cursor: pointer;
	transition: color .2s ease;
}
.footer-more-toggle:hover { color: var(--orange); }
.footer-more-toggle i {
	font-size: 18px;
	transition: transform .2s ease;
}
.footer-more-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.footer-more-links { margin-top: 4px; }
.footer-more-links li a { font-size: 0.92rem; }

#copyright {
	text-align: center;
	padding: 2.4rem 0 2.6rem;
	color: rgba(244,233,218,0.45);
	font-size: 0.85rem;
}

/* The global `img { display:block }` reset makes an <a> whose only child is an <img>
   collapse into a full-width block box (browsers auto-generate a block wrapper for an
   inline element containing only block content), stacking these vertically instead of
   sitting side by side. Force the anchors back to inline-flex, sized to their icon, and
   lay them out in a row. Kept full colour rather than the grayscale-until-hover pattern
   used elsewhere — real colour brightens up an otherwise dark footer band. */
footer div:has(> a[href*="facebook.com"]) {
	display: flex;
	align-items: center;
	gap: 14px;
}
footer a[href*="facebook.com"],
footer a[href*="twitter.com"],
footer a[href*="youtube.com"] {
	display: inline-flex;
}
footer img[width="40"] {
	width: 32px; height: 32px;
	transition: transform .2s ease;
}
footer a[href*="facebook.com"]:hover img,
footer a[href*="twitter.com"]:hover img,
footer a[href*="youtube.com"]:hover img { transform: translateY(-2px); }

@media (max-width: 640px) {
	.works-container { width: 31.5%; }
	.works-container:nth-child(4n) { margin-right: 1.5%; }
	.works-container:nth-child(3n) { margin-right: 0; }
}

/* ======================================================================
   Inner-page components (shared across the sitewide rollout, beyond the
   homepage). Built from the same tokens/card language established above
   (.card, .cta-link, --radius/--shadow/--orange etc.) so unique content
   types (product listings, pricing tables, team bios, legal copy, SEO
   articles) read as one system rather than bolted-on one-offs.
   ====================================================================== */

/* Simple inner-page intro: most inner pages open with a plain heading
   (no big photo hero like the homepage's #hero) directly under the
   fixed header. */
.page-intro {
	padding-top: calc(var(--header-h) + 0.2rem);
	padding-bottom: 0;
}
.page-intro h2 {
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	margin-bottom: 0.8rem;
}
.page-intro p {
	color: var(--body-text);
	font-size: 1.02rem;
	line-height: 1.7;
	margin-bottom: 1rem;
	max-width: 780px;
}

/* Two-column "content + sidebar" layout (Loft Hatches / Flooring / Insulation) */
.content-with-sidebar {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (max-width: 900px) {
	.content-with-sidebar { grid-template-columns: 1fr; }
}

/* ---------- Feature card: product listings (Loft Ladders/Electric Ladders)
   and, in its testimonial variant, the Testimonials page. Wide image-left/
   content-right layout for content-heavy items (feature checklist + either
   a price + CTA, or a quote + star rating + CTA). ---------- */
.feature-card {
	display: flex;
	align-items: stretch;
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-bottom: 1.8rem;
	transition: box-shadow .3s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); }
.feature-card-media {
	flex: 0 0 260px;
	background-size: cover;
	background-position: center;
}
.feature-card-body {
	flex: 1;
	min-width: 0;
	padding: 1.8rem 2rem;
}
.feature-card-body h4 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
}
.feature-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}
.feature-pills li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--body-text);
}
.feature-pills li i { color: var(--orange); font-size: 16px; }
.feature-card-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}
.price-tag { font-size: 0.95rem; color: var(--ink); }
.price-tag strong { color: var(--orange-hover); }
.price-tag .tiny { font-size: 0.78rem; color: var(--muted); }
.feature-card-quote {
	font-style: italic;
	color: var(--body-text);
	margin-bottom: 0.8rem;
	line-height: 1.6;
}
.star-row { color: var(--orange); margin-bottom: 1rem; }
.star-row i { font-size: 18px; margin-right: 2px; }

@media (max-width: 900px) {
	.feature-card { flex-direction: column; }
	.feature-card-media { flex-basis: auto; height: 220px; width: 100%; }
	.feature-card-body { padding: 1.5rem; }
	.feature-card-footer .button-primary { width: 100%; justify-content: center; }
}

/* ---------- Pricing table (Loft Hatches / Loft Flooring / Insulation) ---------- */
.price-table-wrap {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-bottom: 2rem;
}
.price-table-heading {
	background: var(--deep);
	color: var(--deep-text);
	padding: 0.9rem 1.4rem;
	font-size: 1rem;
	margin: 0;
}
table.price-table { width: 100%; border-collapse: collapse; }
table.price-table td {
	padding: 0.9rem 1.4rem;
	border-bottom: 1px solid var(--line);
	color: var(--body-text);
	font-size: 0.95rem;
}
table.price-table tr:last-child td { border-bottom: none; }
table.price-table td.price-cell {
	text-align: right;
	font-weight: 700;
	color: var(--orange-hover);
	white-space: nowrap;
}
@media (max-width: 600px) {
	table.price-table, table.price-table tbody, table.price-table tr, table.price-table td {
		display: block;
		width: 100%;
	}
	table.price-table tr { padding: 0.8rem 1.4rem; border-bottom: 1px solid var(--line); }
	table.price-table td { border-bottom: none; padding: 0.2rem 0; }
	table.price-table td.price-cell { text-align: left; }
}

/* ---------- Related-services sidebar tiles (Hatches/Flooring/Insulation)
   and the plain photo-stack variant (Dust-Proof Rooms) ---------- */
.related-tiles { display: flex; flex-direction: column; gap: 1rem; }
.related-tile {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	aspect-ratio: 4 / 3;
}
.related-tile-media {
	width: 100%; height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform .4s ease;
}
.related-tile:hover .related-tile-media { transform: scale(1.08); }
.related-tile-caption {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(0,0,49,0.72), rgba(255,94,0,0.55));
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	opacity: 0;
	transition: opacity .25s ease;
	text-align: center;
	padding: 1rem;
}
.related-tile:hover .related-tile-caption,
.related-tile:focus-visible .related-tile-caption { opacity: 1; }

.photo-stack-heading {
	background: var(--deep);
	color: var(--deep-text);
	padding: 0.9rem 1.4rem;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	font-size: 1rem;
	margin: 0;
}
.photo-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.photo-stack img { width: 100%; display: block; }

/* ---------- Long-form article body (SEO landing pages, read-more reveals) ---------- */
.article-body { color: var(--body-text); font-size: 1.02rem; line-height: 1.75; }
.article-body p { margin-bottom: 1.2rem; }
.article-body p:has(> strong:only-child) {
	margin-top: 2rem;
	font-size: 1.15rem;
	color: var(--ink);
}
.article-body ul, .article-body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body ul ul, .article-body ol ol, .article-body ul ol, .article-body ol ul {
	margin-top: 0.5rem; margin-bottom: 0.5rem;
}

/* ---------- Read-more toggle (Electric Ladders / Loft Hatches / About Us) ---------- */
.toggle-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--orange-hover);
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
}
.toggle-link:hover { color: var(--orange); }
.toggle-link i { font-size: 20px; transition: transform .2s ease; }
.toggle-link[aria-expanded="true"] i { transform: rotate(180deg); }
.toggle-content { margin-top: 1.2rem; }

/* ---------- Team/bio cards (About Us) ---------- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}
.team-card-avatar {
	width: 130px; height: 130px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 1rem;
}
.team-card-name { font-size: 1.2rem; margin-bottom: 0.2rem; }
.team-card-title {
	color: var(--muted);
	font-size: 0.82rem;
	margin-bottom: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.team-card p { font-size: 0.92rem; color: var(--body-text); margin-bottom: 0.6rem; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- Legal copy (Privacy Policy) ---------- */
.legal-copy {
	max-width: 760px;
	margin: 0 auto;
	color: var(--body-text);
	font-size: 0.98rem;
	line-height: 1.7;
}
.legal-copy p { margin-bottom: 1.1rem; }
.legal-copy strong { color: var(--ink); }

/* ---------- Alert banners ---------- */
.alert {
	border-radius: var(--radius-md);
	padding: 1rem 1.3rem;
	margin-bottom: 1.6rem;
	font-size: 0.95rem;
	border-left: 4px solid transparent;
}
.alert-success { background: #eef8f0; border-left-color: #2f9e44; color: #1f6b30; }
.alert-error { background: #fdeeee; border-left-color: #d64545; color: #a3302f; }
.alert-information { background: var(--orange-tint); border-left-color: var(--orange); color: #8a5a00; }

/* ======================================================================
   Utility
   ====================================================================== */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}