/*
Theme Name: Steadfast Irrigation & Lawn
Version: 1.0.0
Text Domain: kit
*/

:root {
  --ink: #18202a;
  --mute: rgba(24, 32, 42, .7);
  --water: #1e88e5;
  --water-deep: #1565c0;
  --mist: #e7f3fd;
  --lawn: #3fa34d;
  --lawn-deep: #2b7a36;
  --dry: #c9a86a;
  --sun: #ffc93c;
  --panel: #1d2630;
  --lcd: #b6f3a0;
  --wrap: 1200px;
  --gap: 24px;
  --head: 'Oxanium', 'Arial Narrow', sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { font: 400 17px/1.6 var(--body); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1; letter-spacing: -.01em; margin: 0 0 .35em; }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.kicker { font: 500 .98rem/1.2 var(--mono); color: var(--water); margin: 0 0 12px; letter-spacing: .04em; text-transform: uppercase; }
.sub { color: var(--mute); }
.proto-note { margin: 0; padding: 7px var(--gap); background: var(--ink); color: #fff; font: 500 .88rem/1.3 var(--body); text-align: center; }

.masthead { background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); }
.masthead-in { max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gap); min-height: 72px; }
.brand-name { display: grid; font: 800 1.55rem/1 var(--head); letter-spacing: .06em; color: var(--ink); }
.brand-name em { font: 500 .78rem/1.2 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--lawn-deep); text-transform: uppercase; margin-top: 4px; }
.nav-list a { font: 500 1rem/1 var(--body); color: var(--ink); padding: 8px 0; border-bottom: 3px solid transparent; }
.nav-list a:hover { border-color: var(--lawn); }
.nav-call { font: 800 1.1rem/1 var(--head); text-decoration: none; background: var(--lawn); color: #fff; padding: 13px 16px; border-radius: 10px; box-shadow: 0 4px 0 var(--lawn-deep); }
.nav-toggle { background: none; border: 2px solid var(--ink); color: var(--ink); border-radius: 10px; padding: 0 14px; font: 500 1rem var(--body); }
.top-call { display: none; }
@media (max-width: 1080px) {
  .site-nav { background: #fff; padding: 8px var(--gap) 22px; border-bottom: 3px solid var(--lawn); }
  .nav-list a { font-size: 1.2rem; border-bottom: 1px solid rgba(0,0,0,.08); }
  .top-call { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 14px; background: var(--lawn); color: #fff; font: 800 1.05rem/1 var(--head); text-decoration: none; border-radius: 10px; }
  .nav-toggle { margin-left: 10px; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; font: 800 1.15rem/1 var(--head); text-decoration: none; border-radius: 12px; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-go { background: var(--lawn); color: #fff; box-shadow: 0 5px 0 var(--lawn-deep); }

/* hero: the controller on the left, the lawn running on the right */
.sti-hero { position: relative; min-height: calc(100svh - 106px); max-height: 960px; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #0f1a14; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.ctl { position: relative; margin-left: max(var(--gap), calc((100vw - var(--wrap)) / 2 + var(--gap))); width: min(500px, 46vw); background: linear-gradient(160deg, rgba(36,47,58,.93), rgba(22,30,38,.95)); color: #fff; border-radius: 22px; padding: 26px 28px 24px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.ctl::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.12) 0 3px, transparent 4px), radial-gradient(circle at 72% 6%, rgba(255,255,255,.1) 0 2px, transparent 3px), radial-gradient(circle at 88% 40%, rgba(255,255,255,.08) 0 3px, transparent 4px); pointer-events: none; }
.ctl-brand { font: 800 1rem/1 var(--head); letter-spacing: .3em; margin: 0 0 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ctl-brand span { font: 400 .72rem/1 var(--mono); letter-spacing: .12em; opacity: .65; text-transform: uppercase; }
.ctl-screen { background: #0e1a12; border-radius: 10px; padding: 14px 16px; box-shadow: inset 0 2px 12px rgba(0,0,0,.6), 0 0 0 2px #2c3a46; margin-bottom: 20px; }
.lcd { font: 400 .95rem/1.3 var(--mono); color: var(--lcd); margin: 0; letter-spacing: .08em; text-shadow: 0 0 8px rgba(182,243,160,.5); }
.lcd-big { font: 400 2.1rem/1.15 var(--mono); color: var(--lcd); margin: 4px 0; text-shadow: 0 0 10px rgba(182,243,160,.55); }
.lcd-tick::after { content: '_'; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sti-hero h1 { font-size: clamp(2.3rem, 3.8vw, 3.4rem); line-height: 1; }
.sti-hero h1 span { color: var(--lcd); }
.ctl-lead { color: rgba(255,255,255,.8); margin: 0 0 20px; }
.ctl-keys { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.key { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; text-decoration: none; background: #2b3845; color: #fff; font: 600 1rem/1.15 var(--body); box-shadow: 0 5px 0 #121a21, inset 0 1px 0 rgba(255,255,255,.12); transition: transform .1s, box-shadow .1s; }
.key span { font: 400 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.key:active { transform: translateY(4px); box-shadow: 0 1px 0 #121a21; }
.key-start { background: var(--lawn); box-shadow: 0 5px 0 var(--lawn-deep), inset 0 1px 0 rgba(255,255,255,.25); font: 800 1.12rem/1.1 var(--head); }
.ctl-lic { margin: 18px 0 0; font: 400 .82rem/1.3 var(--mono); opacity: .6; letter-spacing: .04em; }

.band { padding: clamp(64px, 9vw, 110px) 0; }

/* zones */
.zones-sec { background: var(--mist); }
.zone-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 30px; align-items: stretch; }
.zone-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zone { position: relative; display: grid; gap: 3px; text-align: left; padding: 16px 16px 14px; border-radius: 16px; border: 0; cursor: pointer; background: #fff; color: var(--ink); font: inherit; box-shadow: 0 6px 0 #c9dbe8, 0 16px 24px -16px rgba(0,0,0,.3); transition: transform .12s, box-shadow .12s, background .2s; }
.zone:hover { transform: translateY(-2px); }
.zone[aria-selected="true"] { background: var(--panel); color: #fff; transform: translateY(4px); box-shadow: 0 2px 0 #0d141a; }
.zone-n { font: 400 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.zone b { font: 800 1.35rem/1.05 var(--head); }
.zone-s { font-size: .85rem; opacity: .7; }
.led { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: #c9d3db; }
.zone[aria-selected="true"] .led { background: var(--lcd); box-shadow: 0 0 10px var(--lcd); }
.zone-pane { position: relative; overflow: hidden; height: 100%; min-height: 300px; background: var(--panel); color: #fff; border-radius: 20px; padding: 28px 28px 120px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.6); }
.zone-pane[hidden] { display: none; }
.zone-pane h3 { font-size: clamp(2.2rem, 4vw, 3rem); margin-top: 10px; }
.zone-pane p { color: rgba(255,255,255,.82); }
.zone-pane .lcd { color: var(--lcd); }
.spray { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(0deg, var(--lawn-deep), var(--lawn) 40%, transparent 41%); }
.spray i { position: absolute; bottom: 44px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #bfe3ff; opacity: 0; }
.zone-pane.on .spray i { animation: drop 1.4s ease-out infinite; }
.spray i:nth-child(1) { --dx: -140px; } .spray i:nth-child(2) { --dx: -95px; animation-delay: .2s !important; } .spray i:nth-child(3) { --dx: -45px; animation-delay: .4s !important; } .spray i:nth-child(4) { --dx: 0px; animation-delay: .1s !important; } .spray i:nth-child(5) { --dx: 45px; animation-delay: .3s !important; } .spray i:nth-child(6) { --dx: 95px; animation-delay: .5s !important; } .spray i:nth-child(7) { --dx: 140px; animation-delay: .15s !important; }
@keyframes drop { 0% { opacity: .9; transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * .55), -64px); } 100% { opacity: 0; transform: translate(var(--dx), -10px); } }
.spray::before { content: ''; position: absolute; left: 50%; bottom: 40px; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px; background: #2a2f35; }

/* dry to green */
.lawnband { height: 120px; background: linear-gradient(90deg, var(--dry), #a8b15a 30%, var(--lawn) 60%, var(--lawn-deep)); background-size: 200% 100%; background-position: var(--p, 100%) 0; position: relative; overflow: hidden; }
.lawnband::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(95deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px), repeating-linear-gradient(85deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px); }
.lawn-track { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); font: 800 clamp(2rem, 5vw, 3.4rem)/1 var(--head); color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .04em; }
.lawn-dry { opacity: calc(1 - var(--k, 0)); } .lawn-green { opacity: calc(.25 + var(--k, 0)); }

/* about + license tag */
.about-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.about p { color: var(--mute); }
.tag-wrap { display: grid; place-items: center; }
.lic-tag { position: relative; width: min(320px, 80vw); padding: 44px 26px 26px; background: var(--sun); border-radius: 16px 16px 16px 16px; color: var(--ink); text-align: center; transform: rotate(-4deg); box-shadow: 0 24px 40px -20px rgba(0,0,0,.45); clip-path: polygon(14% 0, 86% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.hole { position: absolute; top: 14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,.3); }
.tag-top { font: 400 .85rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.tag-big { font: 800 2rem/1 var(--head); margin: 0 0 10px; }
.tag-num { font: 400 1rem/1.3 var(--mono); margin: 0; }

/* map */
.area { background: var(--mist); }
.area-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.area p { color: var(--mute); }
.map { margin: 0; justify-self: center; width: min(460px, 100%); background: #fff; padding: 12px; border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); }
.map-svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.map-svg .land { fill: #e3efd2; }
.map-svg .water { fill: #9fd0f3; }
.map-svg .sea { fill: var(--water); }
.map-svg .wl { fill: var(--water-deep); font: 400 13px var(--mono); letter-spacing: .1em; }
.map-svg .sl { fill: rgba(255,255,255,.85); font: 800 20px var(--head); letter-spacing: .2em; text-transform: uppercase; }
.map-svg .pin circle { fill: var(--lawn); stroke: #fff; stroke-width: 3; }
.map-svg .pin.hq circle { fill: var(--ink); stroke: var(--sun); stroke-width: 4; }
.map-svg .pin text { fill: var(--ink); font: 800 16px var(--head); paint-order: stroke; stroke: #e3efd2; stroke-width: 5px; }
.js .map .pin { opacity: 0; transform: translateY(-12px); transition: opacity .5s ease calc(var(--d) * .14s + .3s), transform .6s cubic-bezier(.3,1.6,.4,1) calc(var(--d) * .14s + .3s); }
.js .map.in .pin { opacity: 1; transform: none; }

/* schedule */
.sched { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day { border-radius: 14px; padding: 16px 12px; background: var(--panel); color: #fff; display: grid; gap: 6px; text-align: center; }
.day b { font: 800 1.3rem/1 var(--head); }
.day span { font: 400 .9rem/1.2 var(--mono); color: var(--lcd); }
.day.em { background: var(--sun); color: var(--ink); } .day.em span { color: var(--ink); }
.day.off { background: #e6ebef; color: var(--mute); } .day.off span { color: var(--mute); }
.pay { margin-top: 22px; color: var(--mute); }

/* estimate */
.estimate { background: linear-gradient(160deg, var(--lawn) 0%, var(--lawn-deep) 100%); color: #fff; }
.estimate .kicker { color: var(--lcd); }
.est-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.estimate p { color: rgba(255,255,255,.88); }
.mil { padding: 12px 14px; background: rgba(255,255,255,.14); border-left: 4px solid var(--sun); border-radius: 6px; }
.est-form { background: #fff; color: var(--ink); padding: clamp(22px, 3vw, 34px); border-radius: 20px; }
.kit-form label { font-weight: 500; font-size: .95rem; }
.kit-form input, .kit-form select, .kit-form textarea { border: 2px solid #cfdde8; border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); }
.kit-form input:focus, .kit-form select:focus, .kit-form textarea:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(30,136,229,.22); }
.kit-form input.touched:invalid { border-color: #b3261e; }
.btn-solid { background: var(--lawn); color: #fff; border: 0; border-radius: 12px; padding: 0 22px; font: 800 1.12rem/1 var(--head); box-shadow: 0 5px 0 var(--lawn-deep); }
.form-note { padding: 12px 14px; border-radius: 10px; font-weight: 500; }
.form-note.ok { background: #e3f3e5; color: var(--lawn-deep); }
.form-note.err { background: #fbe5e3; color: #8a1c14; }

.foot { background: var(--panel); color: rgba(255,255,255,.78); padding: 48px 0 0; border-top: 6px solid var(--lawn); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot-title { font: 800 1.6rem/1 var(--head); color: #fff; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--lcd); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-base { max-width: var(--wrap); margin: 36px auto 0; padding: 18px var(--gap) 26px; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }

.js .from-l { opacity: 0; transform: translateX(-60px); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.js .from-r { opacity: 0; transform: translateX(60px); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.js .from-l.in, .js .from-r.in { opacity: 1; transform: none; }
html { overflow-x: clip; }

@media (max-width: 900px) {
  .sti-hero { flex-direction: column; min-height: 0; max-height: none; align-items: stretch; background: var(--panel); }
  .hero-media { position: relative; inset: auto; height: 60vw; min-height: 230px; z-index: 0; }
  .ctl { width: auto; margin: -36px 14px 18px; padding: 22px 20px; }
  .zone-grid, .about-in, .area-in, .est-in { grid-template-columns: 1fr; }
  .zone-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zone { padding: 12px 10px; border-radius: 12px; }
  .zone b { font-size: 1.05rem; } .zone-s { display: none; } .led { top: 10px; right: 10px; width: 8px; height: 8px; }
  .sched { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: 1fr; }
  .js .from-l { transform: translateX(-26px); } .js .from-r { transform: translateX(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .zone-pane.on .spray i, .lcd-tick::after { animation: none; }
  .js .from-l, .js .from-r { opacity: 1; transform: none; }
}