/* ==========================================================================
   SF Plumbing — Homepage experience
   Hero video · services · "behind the walls" pipe drawing · transition

   Everything is scoped under .sf-experience and prefixed sf- so nothing
   leaks into the theme's global styles.
   ========================================================================== */

.sf-experience {
	--sf-black: #000000;
	--sf-white: #ffffff;
	--sf-blue: #1567ab;
	--sf-blue-deep: #0f5390;
	--sf-grey: #f4f6f8;
	--sf-ink: #111315;
	--sf-charcoal: #1c1e21;
	--sf-steel: #3b4046;
	--sf-muted: #5c6670;
	--sf-line: #e2e6ea;
	--sf-channel: #eef1f4;
	--sf-live: #d6e5f3;

	--sf-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sf-gutter: clamp(20px, 5vw, 88px);

	position: relative;
	font-family: var(--sf-font);
	color: var(--sf-ink);
	background: var(--sf-grey);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip; /* never allow horizontal page scroll */
}

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

:where(.sf-experience) :where(h1, h2, h3, p, ul) {
	margin: 0;
	padding: 0;
}

.sf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Shared UI (.sf-eyebrow, .sf-btn, .sf-link) lives in sf-site.css */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.sf-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: #0c0d0e;
	color: var(--sf-white);
	isolation: isolate;
}

.sf-hero__media,
.sf-hero__media > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sf-hero__video {
	object-fit: cover;
	object-position: 50% 45%;
	background: #0c0d0e;
}

/* Base legibility gradient — kept soft so the video still breathes */
.sf-hero__shade {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 28%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 80%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
}

.sf-hero__content {
	position: absolute;
	z-index: 2;
	left: var(--sf-gutter);
	right: var(--sf-gutter);
	bottom: clamp(88px, 14vh, 150px);
	max-width: 1040px;
}

.sf-hero__eyebrow {
	display: block;
	line-height: 1.5;
	margin-bottom: clamp(18px, 2.4vh, 28px);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.sf-hero__title {
	font-size: clamp(2.6rem, 7.4vw, 7.2rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.sf-hero__title-line {
	display: block;
}

.sf-hero__title-line--light {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.82);
}

.sf-hero__lead {
	max-width: 33rem;
	margin: clamp(22px, 3vh, 34px) 0 clamp(28px, 4vh, 42px);
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.84);
}

.sf-hero__cue {
	position: absolute;
	z-index: 2;
	right: var(--sf-gutter);
	bottom: clamp(88px, 14vh, 150px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	writing-mode: vertical-rl;
}

.sf-hero__cue i {
	position: relative;
	display: block;
	width: 1px;
	height: 64px;
	background: rgba(255, 255, 255, 0.25);
	overflow: hidden;
}

.sf-hero__cue i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sf-white);
	transform: translateY(-100%);
	animation: sf-cue 2.4s var(--sf-ease) infinite;
}

@keyframes sf-cue {
	0% { transform: translateY(-100%); }
	60% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@media (max-width: 767.98px) {
	.sf-hero__cue { display: none; }
	.sf-hero__content { bottom: clamp(48px, 9vh, 88px); }
	.sf-hero__title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
	.sf-hero__eyebrow { letter-spacing: 0.2em; font-size: 0.66rem; }
}

/* --------------------------------------------------------------------------
   Behind the walls — pipe drawing (after Service areas)
   -------------------------------------------------------------------------- */

.sf-experience--blueprint { background: var(--sf-white); }

.sf-blueprint {
	--bp-bg: #0c0d0e;
	--bp-fg: var(--sf-white);
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 520px;
	overflow: hidden;
	background: #0c0d0e;
	isolation: isolate;
}

.sf-blueprint__paper,
.sf-blueprint__pipes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sf-blueprint__paper { background: var(--sf-grey); opacity: 0; }

.sf-blueprint__pipes {
	pointer-events: none;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sf-blueprint__guides { opacity: 0; }
.sf-blueprint__guides path { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 2 10; }
.sf-blueprint__main path { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.4; }
.sf-blueprint__hot path { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.sf-blueprint__fittings > * { fill: rgba(255, 255, 255, 0.95); stroke: none; opacity: 0; }
.sf-blueprint__fittings .sf-blueprint__fixture { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.4; }
.sf-blueprint__water { stroke: var(--sf-blue); stroke-width: 4; stroke-linecap: butt; }

/* Title block, like the one on an architect's drawing */
.sf-blueprint__text {
	position: absolute;
	z-index: 2;
	right: var(--sf-gutter);
	bottom: clamp(40px, 8vh, 88px);
	width: min(420px, calc(100% - 2 * var(--sf-gutter)));
	padding: clamp(20px, 2.4vw, 30px);
	border: 1px solid color-mix(in srgb, var(--bp-fg) 22%, transparent);
	background: var(--bp-bg);
	color: var(--bp-fg);
}

.sf-blueprint__title {
	margin-top: 12px;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

@media (max-width: 767.98px) {
	.sf-blueprint__text { top: calc(var(--sf-header-h, 72px) + 16px); bottom: auto; left: var(--sf-gutter); width: auto; }
}

/* Reduced motion / no GSAP: the finished drawing in ink on paper */
.sf-experience--blueprint.sf-is-static .sf-blueprint { --bp-bg: var(--sf-grey); --bp-fg: var(--sf-ink); background: var(--sf-grey); }
.sf-experience--blueprint.sf-is-static .sf-blueprint__guides { opacity: 1; }
.sf-experience--blueprint.sf-is-static .sf-blueprint__guides path { stroke: rgba(28, 30, 33, 0.18); }
.sf-experience--blueprint.sf-is-static .sf-blueprint__main path,
.sf-experience--blueprint.sf-is-static .sf-blueprint__fixture { stroke: var(--sf-charcoal); stroke-width: 3; }
.sf-experience--blueprint.sf-is-static .sf-blueprint__hot path { stroke: rgba(28, 30, 33, 0.35); }
.sf-experience--blueprint.sf-is-static .sf-blueprint__fittings > * { opacity: 1; }
.sf-experience--blueprint.sf-is-static .sf-blueprint__fittings > :not(.sf-blueprint__fixture) { fill: var(--sf-charcoal); }

/* --------------------------------------------------------------------------
   2. Transition pipe into Services
   -------------------------------------------------------------------------- */

.sf-services-transition {
	position: relative;
	height: clamp(140px, 24vh, 260px);
	background: linear-gradient(180deg, var(--sf-grey) 0%, var(--sf-white) 100%);
}

.sf-services-transition__track,
.sf-services-transition__water {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform-origin: top;
}

.sf-services-transition__track {
	width: 1px;
	margin-left: -0.5px;
	background: var(--sf-charcoal);
	opacity: 0.45;
}

.sf-services-transition__water {
	width: 4px;
	margin-left: -2px;
	background: var(--sf-blue);
	transform: scaleY(0);
}

.sf-services-transition__fitting {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 11px;
	height: 11px;
	transform: translate(-50%, 50%);
	border-radius: 50%;
	background: var(--sf-blue);
	box-shadow: 0 0 0 6px rgba(21, 103, 171, 0.14);
	z-index: 1;
}

/* --------------------------------------------------------------------------
   3. Services
   -------------------------------------------------------------------------- */

.sf-services {
	position: relative;
	padding: clamp(72px, 9vw, 128px) var(--sf-gutter) clamp(88px, 11vw, 150px);
	background: var(--sf-white);
	text-align: center;
}

.sf-services__rule {
	position: absolute;
	top: 0;
	left: var(--sf-gutter);
	right: var(--sf-gutter);
	height: 2px;
	background: linear-gradient(90deg, rgba(21, 103, 171, 0), var(--sf-blue) 30%, var(--sf-blue) 70%, rgba(21, 103, 171, 0));
	transform-origin: center;
}

.sf-services__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.sf-services__title {
	max-width: 18ch;
	margin: 18px auto 0;
	font-size: clamp(1.9rem, 3.8vw, 3.2rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--sf-black);
}

.sf-services__title:focus {
	outline: none;
}

.sf-services__grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: clamp(48px, 6vw, 80px);
	background: var(--sf-line);
	border: 1px solid var(--sf-line);
	text-align: left;
}

.sf-service {
	padding: clamp(28px, 3vw, 44px);
	background: var(--sf-white);
	transition: background-color 300ms;
}

.sf-service:hover {
	background: var(--sf-grey);
}

.sf-service__icon {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: var(--sf-black);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sf-service__title {
	margin-top: 28px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sf-black);
}

.sf-service__title::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin: 16px 0;
	background: var(--sf-blue);
}

.sf-service p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--sf-muted);
}

@media (max-width: 1023.98px) {
	.sf-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559.98px) {
	.sf-services__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Reduced motion — everything still works, it just doesn't travel.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sf-hero__cue i::after { animation: none; transform: none; }
	.sf-services-transition__water { transform: none; }
}

/* Static mode (reduced motion or GSAP unavailable): simple fades, no pinning */
.sf-experience.sf-is-static [data-sf-fade] {
	opacity: 0;
	transition: opacity 700ms ease;
}

.sf-experience.sf-is-static [data-sf-fade].sf-in-view {
	opacity: 1;
}

.sf-experience.sf-is-static .sf-services-transition__water {
	transform: none;
	transition: opacity 700ms ease;
}