/* ==========================================================================
   SERVICES OVERVIEW (/services/) -- archive-service_page.php

   A hero beside a drifting wall of the services' own photos, a sticky
   Residential / Commercial switch, then each sector as a bento grid of photo
   cards (the first card tall, an enquiry card closing a short last row).

   main.css pins every <section> background to transparent with !important,
   so the grounds here are pseudo-elements. Reveal states wait for
   html.svc-js (js/pages/services-archive.js); without it everything shows.
   ========================================================================== */
.svc-page {
	--svc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--svc-col: max(24px, calc((100% - 1280px) / 2));
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.svc-hero {
	overflow: hidden;
	isolation: isolate;
	padding: clamp(7.5rem, 12vw, 9.5rem) var(--svc-col) clamp(3.5rem, 6vw, 5rem);
}
.svc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 60% at 85% 40%, rgba(var(--color-accent-rgb), 0.16), transparent 70%),
		radial-gradient(40% 50% at 0% 100%, rgba(0, 164, 153, 0.08), transparent 70%);
}
/* blueprint dots, fading out towards the photo wall */
.svc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(var(--ink-rgb), 0.12) 1px, transparent 1.4px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 55%);
	mask-image: linear-gradient(90deg, #000, transparent 55%);
	opacity: 0.6;
}
.svc-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.svc-hero-title {
	margin: 0 0 1.3rem;
	color: var(--color-text);
	font-size: clamp(2.4rem, 4.8vw, 3.9rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
}
/* the sector line in a slow sheen across the brand gradient */
.svc-hero-title .accent {
	background: linear-gradient(100deg, #26d07c 0%, #00a499 45%, #26d07c 90%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: svc-sheen 8s ease-in-out infinite;
}
@keyframes svc-sheen { 50% { background-position: 100% 0; } }
.svc-hero-lede {
	max-width: 34rem;
	margin: 0 0 2rem;
	color: var(--color-text-muted);
	font-size: 1.08rem;
	line-height: 1.75;
}
.svc-hero-stats {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
	margin: 0 0 2.2rem;
	padding: 0;
	list-style: none;
}
.svc-hero-stats li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0 1.75rem;
	border-left: 1px solid var(--color-border);
}
.svc-hero-stats li:first-child { padding-left: 0; border-left: 0; }
.svc-hero-stats b {
	color: var(--color-text);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.svc-hero-stats span { color: var(--color-text-muted); font-size: 0.8rem; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.svc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.95rem 1.6rem;
	border-radius: 100px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.35s var(--svc-ease), box-shadow 0.35s var(--svc-ease),
	            border-color 0.35s ease, color 0.35s ease;
}
.svc-btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--svc-ease); }
.svc-btn--primary {
	background: linear-gradient(135deg, #26d07c, #00a499);
	color: #04120b;
	box-shadow: 0 14px 30px -12px rgba(38, 208, 124, 0.7);
}
.svc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(38, 208, 124, 0.85); color: #04120b; }
.svc-btn--primary:hover svg { transform: translateY(3px); }
.svc-btn--ghost {
	border: 1px solid var(--color-border);
	background: var(--card-bg);
	color: var(--color-text);
}
.svc-btn--ghost:hover { transform: translateY(-2px); border-color: rgba(var(--color-accent-rgb), 0.5); color: var(--color-text); }
.svc-btn--ghost:hover svg { transform: translateX(4px); }

/* the copy arrives line by line on load */
.svc-hero-copy > * { animation: svc-up 0.9s var(--svc-ease) backwards; }
.svc-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
.svc-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
.svc-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
@keyframes svc-up { from { opacity: 0; transform: translateY(24px); } }

/* ---- the photo wall: three columns drifting, the middle one the other way */
.svc-wall {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	height: clamp(440px, 46vw, 600px);
	overflow: hidden;
	transform: rotate(-4deg) scale(1.06);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
	animation: svc-fade 1.2s ease 0.2s backwards;
}
@keyframes svc-fade { from { opacity: 0; } }
.svc-wall-col:nth-child(2) { margin-top: -70px; }
.svc-wall-track {
	display: flex;
	flex-direction: column;
	gap: 14px;
	animation: svc-drift 38s linear infinite;
}
.svc-wall-col:nth-child(2) .svc-wall-track { animation-duration: 46s; animation-direction: reverse; }
.svc-wall-col:nth-child(3) .svc-wall-track { animation-duration: 42s; }
/* each track holds its photos twice: move one set (plus its gap) and loop */
@keyframes svc-drift { to { transform: translateY(calc(-50% - 7px)); } }
.svc-wall:hover .svc-wall-track { animation-play-state: paused; }
.svc-wall-tile {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 18px;
	background: var(--color-surface);
	box-shadow: 0 20px 40px -24px rgba(var(--ink-rgb), 0.5);
}
.svc-wall-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Sector switch: pinned under the header while the services scroll past;
   the pill slides to the sector in view (the script sets --sx / --sw and
   .is-stuck). Not position: sticky -- html and body both set overflow-x:
   hidden, which leaves sticky nothing to stick to. The outer bar keeps its
   height in the flow while the pill is fixed. Without the script the
   switch simply sits above the first sector, its active link carrying the
   pill.
   -------------------------------------------------------------------------- */
.svc-switch {
	z-index: 50;
	display: flex;
	justify-content: center;
	height: 52px;
	padding: 0 var(--svc-col);
}
.svc-switch.is-stuck .svc-switch-inner {
	position: fixed;
	top: 92px;
	left: 50%;
	z-index: 900;
	translate: -50% 0;
	animation: svc-pin 0.45s var(--svc-ease);
}
@keyframes svc-pin { from { opacity: 0; transform: translateY(-10px); } }
.svc-switch-inner {
	position: relative;
	display: inline-flex;
	width: max-content;
	gap: 4px;
	padding: 5px;
	border: 1px solid var(--color-border);
	border-radius: 100px;
	background: color-mix(in srgb, var(--card-bg) 82%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px -20px rgba(var(--ink-rgb), 0.45);
}
.svc-switch-inner.is-live::before {
	content: "";
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: var(--sx, 5px);
	width: var(--sw, 0);
	border-radius: 100px;
	background: linear-gradient(135deg, #26d07c, #00a499);
	box-shadow: 0 8px 20px -8px rgba(38, 208, 124, 0.7);
	transition: left 0.5s var(--svc-ease), width 0.5s var(--svc-ease);
}
.svc-switch a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border-radius: 100px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.3s ease;
}
.svc-switch a:hover { color: var(--color-text); }
.svc-switch a span {
	display: grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.35rem;
	border-radius: 100px;
	background: rgba(var(--color-accent-rgb), 0.12);
	color: var(--color-accent);
	font-size: 0.72rem;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.svc-switch a.is-active,
.svc-switch a.is-active:hover { color: #04120b; }
.svc-switch a.is-active span { background: rgba(4, 18, 11, 0.14); color: #04120b; }
.svc-switch-inner:not(.is-live) a.is-active { background: linear-gradient(135deg, #26d07c, #00a499); }

/* --------------------------------------------------------------------------
   Sectors
   -------------------------------------------------------------------------- */
.svc-sector {
	padding: clamp(3rem, 6vw, 4.5rem) var(--svc-col);
	scroll-margin-top: 150px;
}
.svc-sector + .svc-sector { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.svc-sector-head {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.svc-sector-head h2 {
	margin: 0;
	color: var(--color-text);
	font-size: clamp(2.1rem, 4vw, 3.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}
.svc-sector-head h2 .accent { color: var(--color-accent); }
.svc-sector-intro p {
	margin: 0 0 0.9rem;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.75;
}
.svc-sector-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.5);
	color: var(--color-text);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.3s ease, gap 0.3s var(--svc-ease);
}
.svc-sector-link svg { width: 15px; height: 15px; }
.svc-sector-link:hover { gap: 0.7rem; color: var(--color-accent); }

/* ---- bento */
.svc-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(280px, auto);
	gap: 1rem;
}
.svc-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 280px;
	border-radius: 22px;
	background: #0e181b;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 24px 50px -30px rgba(var(--ink-rgb), 0.55);
	transition: transform 0.6s var(--svc-ease), box-shadow 0.6s var(--svc-ease);
}
.svc-card:hover { color: #fff; }
.svc-card.is-feature { grid-row: span 2; }
.svc-card-media { position: absolute; inset: 0; z-index: -2; }
.svc-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.4s var(--svc-ease);
}
/* shade for the text */
.svc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(7, 14, 16, 0.94) 0%, rgba(7, 14, 16, 0.6) 42%, rgba(7, 14, 16, 0.08) 100%);
}
/* a green glow that follows the cursor (--mx / --my), and a hairline edge */
.svc-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 120%), rgba(38, 208, 124, 0.24), transparent 60%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.svc-card:hover,
.svc-js .svc-card.is-in:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 60px -28px rgba(var(--ink-rgb), 0.7), 0 0 0 1px rgba(38, 208, 124, 0.35);
}
.svc-card:hover::after { opacity: 1; }
.svc-card:hover .svc-card-media img { transform: scale(1.09); }

.svc-card-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	width: 100%;
	padding: 1.5rem 1.6rem 1.55rem;
}
.svc-card-index {
	color: #26d07c;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}
.svc-card-title {
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}
.svc-card.is-feature .svc-card-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; }
/* the line opens on hover on the smaller cards; the tall card always shows it */
.svc-card-desc {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.9rem;
	line-height: 1.6;
	transition: max-height 0.6s var(--svc-ease), opacity 0.45s ease;
}
.svc-card:hover .svc-card-desc,
.svc-card:focus-visible .svc-card-desc,
.svc-card.is-feature .svc-card-desc { max-height: 10em; opacity: 1; }
.svc-card.is-feature .svc-card-desc { max-width: 34rem; font-size: 0.98rem; }
.svc-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
}
.svc-card-cta svg { width: 15px; height: 15px; transition: transform 0.35s var(--svc-ease); }
.svc-card:hover .svc-card-cta svg { transform: translateX(5px); }

/* the enquiry card closing a short row */
.svc-card--cta {
	background: linear-gradient(135deg, #26d07c 0%, #00a499 100%);
	color: #04120b;
}
.svc-card--cta:hover { color: #04120b; }
.svc-card--cta::before {
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.35), transparent 55%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 14px);
}
.svc-card--cta::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 120%), rgba(255, 255, 255, 0.3), transparent 60%); }
.svc-card--cta .svc-card-title { font-size: 1.45rem; }
.svc-card--cta .svc-card-desc { max-height: none; opacity: 1; color: rgba(4, 18, 11, 0.78); }

/* ---- rising in (the script staggers .is-in) */
.svc-js .svc-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.9s var(--svc-ease), transform 0.9s var(--svc-ease), box-shadow 0.6s var(--svc-ease);
}
.svc-js .svc-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.svc-hero-inner { grid-template-columns: minmax(0, 1fr); }
	.svc-wall { height: 360px; transform: rotate(-3deg) scale(1.04); }
	.svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc-card.is-feature { grid-column: span 2; grid-row: auto; min-height: 360px; }
}
@media (max-width: 760px) {
	.svc-sector-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }
}
@media (max-width: 640px) {
	.svc-hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
	.svc-hero-stats li { padding: 0 0.85rem; }
	.svc-hero-stats b { font-size: 1.45rem; }
	.svc-hero-stats span { font-size: 0.74rem; }
	.svc-wall { height: 280px; }
	.svc-switch.is-stuck .svc-switch-inner { top: 78px; }
	.svc-switch a { padding: 0.55rem 1rem; font-size: 0.85rem; }
	.svc-bento { grid-template-columns: minmax(0, 1fr); }
	.svc-card.is-feature { grid-column: auto; min-height: 340px; }
}
/* no hover to open them: show every line */
@media (hover: none) {
	.svc-card-desc { max-height: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.svc-hero-title .accent,
	.svc-hero-copy > *,
	.svc-wall,
	.svc-wall-track { animation: none; }
	.svc-card:hover,
	.svc-card:hover .svc-card-media img,
	.svc-btn:hover,
	.svc-btn:hover svg { transform: none; }
}