/* Hatfield Solar and Water - simple, high-contrast, mobile-first. Generated by build.py - edit there. */
:root{--navy:#12304f;--navy2:#0b2038;--gold:#e3ab3c;--gold-pale:#f6e3b8;--ink:#1a1a1a;--bg:#fffdf8;--soft:#eef3f7;--line:#c9d3dd;--muted:#3d4b5a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--navy2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 12c10-7 20-7 30 0s20 7 30 0 20-7 20-7' fill='none' stroke='%23e3ab3c' stroke-opacity='.13' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/80px 24px}
body{margin:0;padding:9px;color:var(--ink);font:1.2rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
/* the page frame: cream page inside a gold double line on a navy "water" background */
.page{max-width:84rem;margin:0 auto;background:var(--bg);border-radius:14px;overflow:hidden;overflow:clip;
 box-shadow:0 0 0 2px var(--gold),0 0 0 6px var(--navy2),0 0 0 7px rgba(227,171,60,.6),0 14px 40px rgba(0,0,0,.45)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.25em}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:1.2em 0 .5em}
h1{font-size:2rem;margin-top:.4em}
h2{font-size:1.6rem}
h2::after{content:"";display:block;width:3.4rem;height:4px;margin-top:.4rem;border-radius:2px;background:linear-gradient(90deg,var(--gold) 65%,var(--navy) 65%)}
.card h2::after{display:none}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.1rem}
.narrow{max-width:42rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:9}
/* header */
.site-header{background:#fff;border-bottom:3px solid var(--gold);box-shadow:0 3px 0 var(--navy)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-top:.7rem;padding-bottom:.5rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);font-weight:800;font-size:1.3rem;line-height:1.05}
.brand img{width:48px;height:48px;border-radius:8px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--gold)}
.brand small{white-space:nowrap;font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.nav{list-style:none;margin:0;padding:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.3rem .4rem}
.nav a{display:block;padding:.55rem .75rem;font-weight:700;text-decoration:none;border-radius:8px;font-size:1.05rem}
.nav a:hover,.nav a[aria-current]{background:var(--soft);text-decoration:underline;box-shadow:inset 0 -3px 0 var(--gold)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.4rem;padding:.8rem 1.4rem;border-radius:10px;font-weight:800;font-size:1.2rem;text-decoration:none;text-align:center;border:2px solid var(--navy);cursor:pointer;margin:0 .4rem .7rem 0;transition:transform .15s,box-shadow .15s,filter .15s}
.btn-call{background:linear-gradient(180deg,#1d4774,var(--navy));color:#fff;box-shadow:0 3px 0 var(--navy2),0 6px 14px -6px rgba(11,32,56,.6)}
.btn-call::before{content:"";width:1.05em;height:1.05em;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.btn-quote{background:linear-gradient(180deg,#f2c766,var(--gold));color:var(--navy2);border-color:#c9922c;box-shadow:0 3px 0 #a87a22,0 6px 14px -6px rgba(120,80,10,.6)}
.btn:hover{filter:brightness(1.07);text-decoration:underline;transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:none}
.head-call{min-height:3rem;padding:.6rem .9rem;font-size:1.05rem;margin:0;white-space:nowrap}
/* hero: warm gradient + faint sun rays + water ripples */
.hero{position:relative;padding:1.4rem 0 3rem;background:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='g' cx='800' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e3ab3c' stop-opacity='.20'/%3E%3Cstop offset='1' stop-color='%23e3ab3c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpolygon points='800,0 800,1300 732,1298'/%3E%3Cpolygon points='800,0 664,1293 597,1284'/%3E%3Cpolygon points='800,0 530,1272 464,1256'/%3E%3Cpolygon points='800,0 398,1236 334,1214'/%3E%3Cpolygon points='800,0 271,1188 210,1158'/%3E%3Cpolygon points='800,0 150,1126 92,1090'/%3E%3Cpolygon points='800,0 36,1052 -18,1010'/%3E%3Cpolygon points='800,0 -70,966 -119,919'/%3E%3Cpolygon points='800,0 -166,870 -210,818'/%3E%3Cpolygon points='800,0 -252,764 -290,708'/%3E%3Cpolygon points='800,0 -326,650 -358,590'/%3E%3Cpolygon points='800,0 -388,529 -414,466'/%3E%3Cpolygon points='800,0 -436,402 -456,336'/%3E%3Cpolygon points='800,0 -472,270 -484,203'/%3E%3Cpolygon points='800,0 -493,136 -498,68'/%3E%3C/g%3E%3C/svg%3E") right top/min(56rem,120%) auto no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 320'%3E%3Cdefs%3E%3CradialGradient id='r' cx='140' cy='290' r='420' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2312304f' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%2312304f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23r)' stroke-width='2'%3E%3Cellipse cx='140' cy='290' rx='40' ry='12'/%3E%3Cellipse cx='140' cy='290' rx='90' ry='27'/%3E%3Cellipse cx='140' cy='290' rx='140' ry='42'/%3E%3Cellipse cx='140' cy='290' rx='190' ry='57'/%3E%3Cellipse cx='140' cy='290' rx='240' ry='72'/%3E%3Cellipse cx='140' cy='290' rx='290' ry='87'/%3E%3Cellipse cx='140' cy='290' rx='340' ry='102'/%3E%3Cellipse cx='140' cy='290' rx='390' ry='117'/%3E%3C/g%3E%3C/svg%3E") left bottom/min(36rem,110%) auto no-repeat,
 radial-gradient(circle at 95% 0,rgba(227,171,60,.30),transparent 42%),
 linear-gradient(172deg,#fffaf0 0%,#fdf5e4 50%,#e6eef6 100%)}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin:.8rem 0 0;padding:.3rem .8rem;border-radius:99px;background:#fff;border:1px solid var(--gold);color:var(--navy);font-weight:700;font-size:.95rem}
.eyebrow .ico{color:#b07a16}
.lead{font-size:1.3rem}
.hero-grid,.two{display:grid;gap:1.8rem}
.hero-sub{display:grid;gap:1rem;align-items:center}
.emblem{display:none}
/* framed photos */
.frame{position:relative;margin:0;background:#fff;padding:.55rem;border-radius:14px;border:1px solid var(--line);box-shadow:0 14px 30px -14px rgba(11,32,56,.55)}
.frame img,.frame video{border-radius:9px;width:100%}
.accent{box-shadow:14px 14px 0 -2px var(--gold-pale),14px 14px 0 1px var(--gold),0 14px 30px -14px rgba(11,32,56,.55);margin:0 14px 14px 0}
.hero-photo{position:relative;margin:0 14px 30px 0}
.hero-photo img{max-height:30rem;object-fit:cover}
.badge{position:absolute;left:-10px;bottom:-26px;width:104px;height:104px;border-radius:50%;background:#fff;padding:6px;box-shadow:0 0 0 3px var(--gold),0 0 0 7px #fff,0 8px 18px rgba(0,0,0,.35)}
.badge img{border-radius:50%;width:92px;height:92px}
.polaroid{position:relative;margin:1.2rem auto 1.6rem;max-width:26rem;background:#fff;padding:.7rem .7rem 2.6rem;border-radius:4px;box-shadow:0 12px 26px -12px rgba(0,0,0,.5),0 0 0 1px #e4e0d6;transform:rotate(-2deg);transition:transform .25s}
.polaroid:nth-child(even){transform:rotate(1.6deg)}
.polaroid::before{content:"";position:absolute;top:-13px;left:50%;width:7rem;height:1.6rem;margin-left:-3.5rem;background:rgba(227,171,60,.55);border-left:2px dotted rgba(255,255,255,.6);border-right:2px dotted rgba(255,255,255,.6);transform:rotate(-3deg)}
.polaroid:hover{transform:rotate(0) scale(1.02)}
.gallery{display:grid;gap:.6rem 1.6rem;margin-top:1rem}
/* sections and dividers */
section{padding:.6rem 0 2.4rem}
.soft{background:var(--soft)}
.soft,.cta,.trust,.site-footer{position:relative}
.soft::before,.cta::before,.trust::before,.site-footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(18px,3vw,38px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V27C240 5 480 5 720 25s480 22 720-4v20z' fill='%23eef3f7'/%3E%3Cpath d='M0 23C240 1 480 1 720 21s480 22 720-4' fill='none' stroke='%23e3ab3c' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none}
.cta::before,.trust::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V27C240 5 480 5 720 25s480 22 720-4v20z' fill='%2312304f'/%3E%3Cpath d='M0 23C240 1 480 1 720 21s480 22 720-4' fill='none' stroke='%23e3ab3c' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.site-footer::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V27C240 5 480 5 720 25s480 22 720-4v20z' fill='%230b2038'/%3E%3Cpath d='M0 23C240 1 480 1 720 21s480 22 720-4' fill='none' stroke='%23e3ab3c' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.rule{border:0;height:30px;margin:2rem auto;max-width:30rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3ab3c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1%22/%3E%3C/svg%3E") center/30px no-repeat,linear-gradient(var(--gold),var(--gold)) left center/calc(50% - 26px) 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right center/calc(50% - 26px) 2px no-repeat}
/* trust strip */
.trust{background:var(--navy);color:#fff;padding:.9rem 0 .7rem;border-bottom:3px solid var(--gold)}
.trust ul{list-style:none;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem 1.3rem}
.trust li{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:1rem}
.trust .ico{color:var(--gold)}
/* cards */
.cards{display:grid;gap:2.6rem 1.2rem;padding-top:1.9rem}
.card{position:relative;background:#fff;border:2px solid var(--line);border-top:5px solid var(--gold);border-radius:14px;padding:2.2rem 1.1rem .4rem;box-shadow:0 6px 16px -12px rgba(11,32,56,.5);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover,.card:focus-within{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 28px -14px rgba(11,32,56,.55)}
.card h2,.card h3{margin-top:.4em}
.card-ico{position:absolute;top:-1.9rem;left:1rem;width:3.7rem;height:3.7rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold)}
.card-ico .ico{width:2.1rem;height:2.1rem}
.more{font-weight:700}
/* call-to-action band */
.cta{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='g' cx='800' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e3ab3c' stop-opacity='.20'/%3E%3Cstop offset='1' stop-color='%23e3ab3c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpolygon points='800,0 800,1300 732,1298'/%3E%3Cpolygon points='800,0 664,1293 597,1284'/%3E%3Cpolygon points='800,0 530,1272 464,1256'/%3E%3Cpolygon points='800,0 398,1236 334,1214'/%3E%3Cpolygon points='800,0 271,1188 210,1158'/%3E%3Cpolygon points='800,0 150,1126 92,1090'/%3E%3Cpolygon points='800,0 36,1052 -18,1010'/%3E%3Cpolygon points='800,0 -70,966 -119,919'/%3E%3Cpolygon points='800,0 -166,870 -210,818'/%3E%3Cpolygon points='800,0 -252,764 -290,708'/%3E%3Cpolygon points='800,0 -326,650 -358,590'/%3E%3Cpolygon points='800,0 -388,529 -414,466'/%3E%3Cpolygon points='800,0 -436,402 -456,336'/%3E%3Cpolygon points='800,0 -472,270 -484,203'/%3E%3Cpolygon points='800,0 -493,136 -498,68'/%3E%3C/g%3E%3C/svg%3E") right top/34rem auto no-repeat;color:#fff;padding-top:1.4rem}
.cta h2{color:#fff}
.cta h2::after{background:var(--gold)}
.cta .btn-call{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 3px 0 #9fb2c6}
figure{margin:0}
.media video{background:#000}
/* form */
.panel{background:#fff;border:2px solid var(--line);border-top:5px solid var(--gold);border-radius:14px;padding:.4rem 1.1rem 1.2rem;box-shadow:0 10px 24px -16px rgba(11,32,56,.55)}
.quote label{display:block;font-weight:700;margin:.9rem 0 .3rem}
.quote input,.quote select,.quote textarea{width:100%;font:inherit;padding:.75rem;border:2px solid #5a6b7d;border-radius:8px;background:#fff;color:var(--ink)}
.quote input:focus,.quote select:focus,.quote textarea:focus,a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.quote button{margin-top:1.2rem;width:100%}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.small{font-size:1rem}
.link-call{font-weight:800}
/* footer */
.site-footer{background:var(--navy2);color:#fff;padding:1.6rem 0 1rem}
.site-footer a{color:#fff}
.site-footer .btn-call{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 3px 0 #9fb2c6}
.foot-brand{display:flex;align-items:center;gap:.9rem}
.foot-brand img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--gold)}
@media (min-width:760px){
 body{font-size:1.25rem;padding:18px}
 h1{font-size:2.6rem}
 .hero{padding:2rem 0 3.6rem}
 .hero-grid,.two{grid-template-columns:3fr 2fr;align-items:center}
 .hero-sub{grid-template-columns:1fr auto}
 .emblem{display:grid;place-items:center;width:9.5rem;height:9.5rem;border-radius:50%;background:var(--navy);color:var(--gold);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--gold),0 0 0 13px rgba(227,171,60,.18),0 14px 28px -10px rgba(11,32,56,.6)}
 .emblem .ico{width:4.8rem;height:4.8rem;stroke-width:1.5}
 .two.flip{grid-template-columns:2fr 3fr}
 .cards{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
 .gallery{grid-template-columns:repeat(3,1fr)}
 .quote button{width:auto}
 .head-call{font-size:1.15rem}
 .panel{padding:.4rem 1.8rem 1.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover,.btn:hover,.polaroid:hover{transform:none}}