/* Double Down Plumbing landing page. Styling matches doubledownmechanical.com */
:root {
	--teal: #2d929e;
	--teal-deep: #1d6a74;
	--teal-mid: #12404a;
	--teal-ink: #0e2a30;
	--teal-night: #0a1d21;
	--teal-glow: #6fd0db;
	--red: #d5181e;
	--red-deep: #b01318;
	--ink: #14262a;
	--line: #dde5e7;
	--text-on-dark: #d6e8eb;
	--text-on-dark-muted: #b4cdd1;
	--max: 1200px;
	--font-head: "Sora", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--teal-night);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1 {
	font-family: var(--font-head);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	color: #fff;
}
p { margin: 0 0 1.1em; }
.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: .7rem 1rem; z-index: 200; }
.skip:focus { left: 0; }

.eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--font-head); font-weight: 600; font-size: .8rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep);
	margin-bottom: 1rem;
}
.eyebrow.on-dark { color: var(--teal-glow); }
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--teal); border-radius: 2px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 48px; padding: .75rem 1.6rem;
	font-family: var(--font-head); font-weight: 600; font-size: .98rem;
	text-decoration: none; border-radius: 999px; border: 2px solid transparent;
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--teal-glow); outline-offset: 3px; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(213, 24, 30, .3); }
.btn-red:hover { background: var(--red-deep); color: #fff; }

.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; min-height: 82px; padding: .5rem 0; }
.brand { width: 200px; height: auto; }

main { flex: 1; display: flex; flex-direction: column; }
.hero {
	flex: 1;
	display: flex;
	align-items: center;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(110deg, var(--teal-ink) 0%, var(--teal-mid) 60%, var(--teal-deep) 100%);
}
.hero .wrap {
	display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.lead { font-size: 1.2rem; color: var(--text-on-dark); max-width: 54ch; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero-art { text-align: center; }
.hint { margin: 1rem auto 0; min-height: 3em; max-width: 24ch; font-size: .95rem; color: var(--text-on-dark-muted); font-style: italic; }
.hint.quip { color: #fff; font-style: normal; font-weight: 600; }

.site-footer { background: var(--teal-night); color: var(--text-on-dark-muted); font-size: .88rem; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.4rem 0; }
.footer-logo { background: #fff; display: inline-block; padding: .6rem .8rem; border-radius: 10px; }
.footer-logo img { width: 150px; }

/* Chip the mascot: light motion (body bob + swinging toolbox arm), same as the About page */
.chip { position: relative; width: min(380px, 80%); aspect-ratio: 900 / 861; margin: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); transform-origin: 50% 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip:focus-visible { outline: 3px solid var(--teal-glow); outline-offset: 6px; border-radius: 50%; }
.chip img { position: absolute; inset: 0; width: 100%; height: 100%; }
.chip-arm { transform-origin: 76.4% 52.1%; }
@media (prefers-reduced-motion: no-preference) {
	.chip { animation: chip-bob 4.5s ease-in-out infinite; }
	.chip-arm { animation: chip-swing 3s ease-in-out infinite; }
	.chip.in-view { animation: chip-hop .9s cubic-bezier(.3, .7, .4, 1) 1, chip-bob 4.5s ease-in-out .9s infinite; }
	/* Poke uses translate/rotate/scale so it layers on top of the idle bob instead of being overridden by it */
	.chip.wiggle { animation: chip-hop .9s cubic-bezier(.3, .7, .4, 1) 1, chip-bob 4.5s ease-in-out .9s infinite, chip-wiggle 1s ease-in-out 1; }
	.chip.wiggle .chip-arm { animation: chip-swing 3s ease-in-out infinite, chip-swing-big 1.3s ease-in-out 1; }
}
@keyframes chip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4%); } }
@keyframes chip-swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes chip-swing-big { 0%, 100% { rotate: 0deg; } 20% { rotate: 28deg; } 45% { rotate: -22deg; } 70% { rotate: 14deg; } 85% { rotate: -6deg; } }
@keyframes chip-hop { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.04, .95); } 55% { transform: translateY(-5%) scale(.98, 1.03); } 80% { transform: translateY(0) scale(1.03, .97); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes chip-wiggle { 0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; } 15% { translate: 0 -7%; rotate: -10deg; scale: 1.06; } 35% { translate: 0 0; rotate: 9deg; scale: .97; } 55% { translate: 0 -4%; rotate: -6deg; scale: 1.03; } 75% { translate: 0 0; rotate: 3deg; scale: 1; } }

@media (max-width: 800px) {
	.hero .wrap { grid-template-columns: 1fr; text-align: left; }
	.hero-art { order: -1; }
	.chip { width: 200px; }
	.brand { width: 160px; }
	.site-footer .wrap { justify-content: center; text-align: center; }
}