/* Design pass. Picks: Signature B, header 5, hero 5, trust 1, build 5, service 1, who 4, gallery 3, job 2, area 5, questions 1, quote 3, footer 3. Generated from site/design-lab/lab.css by design-lab/build-live.py. */
html{
  --acc:#F5A220; --accd:#F5A220; --m:var(--acc);
  --on-m:#092634; --on-md:#092634;
  --lc:#092634;
  --hlc:color-mix(in srgb,var(--acc) 42%,#fff);   /* pale highlighter under dark text */
  --rot:.7deg; --rad:0px; --chip-r:0px; --stamp-r:6px;
  --sh:5px 5px 0 #092634; --shd:5px 5px 0 var(--accd);
  --hl-clip:none;
  --tape:rgba(245,162,32,.93);
  --lab:700 .82rem/1.1 var(--body);               /* small label type: sentence case, Public Sans */
  /* marks: dimension line, corner brackets, arrow, check */
  --mk-u:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M3 10.8L100 9.4L197 10.6M3 3V17M197 3V17' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square' vector-effect='non-scaling-stroke'/></svg>");
  --mk-o:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M4 26V4H30M170 4H196V26M196 54V76H170M30 76H4V54' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' vector-effect='non-scaling-stroke'/></svg>");
  --mk-a:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'><path d='M4 30H108M92 14L110 30L92 46M4 20V40' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' vector-effect='non-scaling-stroke'/></svg>");
  --mk-c:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 13L9.5 19.5L21 4.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'/></svg>");
  --band-mask:linear-gradient(#000,#000) 0 100%/100% 3px no-repeat,repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 12px) 0 0/100% 72% no-repeat;
}
html[data-sig="B"]{
  --acc:#28469E; --accd:#9DB2EC; --on-m:#fff; --on-md:#092634;
  --rot:2deg; --rad:3px; --chip-r:5px; --stamp-r:50%;
  --sh:5px 5px 0 #092634; --shd:5px 5px 0 var(--accd);
  --hl-clip:polygon(0 14%,2% 0,99% 9%,100% 88%,97% 100%,1% 94%);
  --tape:rgba(255,238,205,.94);
  --mk-u:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M4 12C40 5 70 17 110 10S170 6 196 11' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M14 17C60 13 120 18 186 15' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --mk-o:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M34 12C90 4 192 10 194 40C196 68 100 76 40 68C8 62 4 32 38 16C70 6 120 6 168 13' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/></svg>");
  --mk-a:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'><path d='M6 46C30 12 70 14 104 32M88 18L106 33L84 40' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/></svg>");
  --mk-c:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 14C6 15.5 8.5 19 10 21C12 12 17 7 22 3.5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --band-mask:repeating-linear-gradient(-45deg,#000 0 14px,transparent 14px 28px);
}
header.top,.hA,.bridge5,#who,#area,footer.site{--m:var(--accd);--on-m:var(--on-md);--sh:var(--shd);--lc:var(--accd)}
body{overflow-x:clip}
.kw{position:relative;display:inline-block;z-index:0}
.kw::after,.kw::before{transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
.kw::after,.kw::before,h2[id$="-h"]::after{transition:transform .7s cubic-bezier(.3,.7,.2,1) .15s}
html.lr .kw::after,html.lr .kw::before,html.lr h2[id$="-h"]::after,html.lr .tC .big::after,html.lr .tel-big::before{transform:scaleX(0);transform-origin:left center}
html.lr .in .kw::after,html.lr .in .kw::before,html.lr .in h2[id$="-h"]::after,html.lr .tC.in .big::after,html.lr #quote.in .tel-big::before{transform:none;transition:transform .7s cubic-bezier(.3,.7,.2,1) .2s}
}
:where(html[data-sig="B"]) :where(main h2,.bridge5 h2) .kw::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.1em;height:.2em;background:var(--m);mask:var(--mk-u) 0 0/100% 100% no-repeat;pointer-events:none}
html[data-sig="B"] .btn{border-radius:5px;box-shadow:5px 5px 0 var(--lc)}
.lph{position:relative;display:block}
.lph img{border-radius:var(--rad)}
html[data-sig="B"] .lph{border:5px solid #fff;box-shadow:var(--sh)}
html:not([data-sig="0"]) .lph.stage{overflow:visible}
html:not([data-sig="0"]) #build .wE .zz .pic.car{overflow:visible}
html:not([data-sig="0"]) .pic .track{border-radius:inherit}
html:not([data-sig="0"]) .stage>img{border-radius:var(--rad)}
.lph::before{content:"";display:var(--deco,none);position:absolute;z-index:4;pointer-events:none}
html[data-sig="B"] .lph::before{top:-18px;left:50%;translate:-50% 0;width:112px;height:30px;rotate:-3deg;background:var(--tape);clip-path:polygon(0 0,100% 0,98% 25%,100% 50%,98% 75%,100% 100%,0 100%,2% 75%,0 50%,2% 25%)}
html[data-nav="5"] header.top{background:var(--navy);box-shadow:0 12px 0 -2px var(--navy)}
html[data-nav="5"] header.top::after{content:"";position:absolute;left:0;right:0;top:100%;margin-top:10px;height:14px;background:var(--m);mask:var(--band-mask)}
html[data-nav="5"] header.top .wrap{min-height:72px}
.hA{position:relative}
html[data-hero="5"] .hA{background:var(--navy)}
html[data-hero="5"] .hA>img{inset:auto 3% auto auto;top:11%;width:min(68%,1020px);height:72%;border:6px solid #fff;border-radius:var(--rad);box-shadow:var(--sh);rotate:calc(var(--rot)*1.2)}
html[data-hero="5"] .hA .hl{font-size:clamp(2.1rem,4.4vw,4rem);max-width:10ch}
html[data-hero="5"] .hA::after{background:linear-gradient(90deg,rgba(9,38,52,.9),rgba(9,38,52,.5) 45%,transparent 75%)}
@media (max-width:700px){
html[data-hero="5"] .hA>img{inset:auto auto auto 16px;top:84px;width:calc(100% - 82px);height:34%;rotate:0deg}
}
html[data-trust="1"] .tC .fact{font-size:clamp(1.5rem,2.4vw,2rem)}
html[data-trust="1"] .tC .fact .big{font-size:2.6em;line-height:.8;padding:0 .1em;margin-right:.08em;background:linear-gradient(transparent 58%,var(--hlc) 58% 94%,transparent 94%);display:inline-block}
html[data-build="5"] #build .wE .zz::before{content:none}
html[data-svc="1"] .bridge5 .kw::after{content:"";position:absolute;inset:-.16em -.22em -.12em;height:auto;background:var(--m);mask:var(--mk-o) 0 0/100% 100% no-repeat;pointer-events:none}
html[data-svc="1"] .bridge5{position:relative;z-index:3;padding:56px 0 92px}
html[data-svc="1"] .bridge5 .wrap{display:block;text-align:center}
html[data-svc="1"] .bridge5 h2{text-align:center;margin-inline:auto}
html[data-svc="1"] .bridge5 .pq{position:relative;display:inline-block}
html[data-svc="1"] .bridge5 .pq::after{content:"";position:absolute;left:calc(100% - 21px);top:calc(40% + 33px);width:150px;height:84px;background:var(--m);mask:var(--mk-a) 0 0/100% 100% no-repeat;rotate:90deg;pointer-events:none}
@media (max-width:900px){
html[data-svc="1"] .bridge5{padding:44px 0 84px}
html[data-svc="1"] .bridge5 .pq::after{left:calc(100% - 15px);top:calc(40% + 21px);width:96px;height:54px}
}
@media (min-width:1001px){
html[data-who="4"] #who .portrait{margin-top:0;position:relative;z-index:1}
html[data-who="4"] #who .portrait.lph{outline:0}
html[data-who="4"] #who .portrait img{box-shadow:var(--sh)}
}
@media (max-width:1000px){
html[data-who="4"] #who .portrait{margin-top:0;max-width:360px;position:relative;z-index:1}
}
html[data-gal="3"] #gallery .stage::after{content:attr(data-cap);position:absolute;z-index:3;left:-14px;top:22px;max-width:min(430px,72%);padding:14px 18px;background:#fff;color:var(--navy);font:600 1rem/1.35 var(--body);border-left:10px solid var(--m);box-shadow:var(--sh);border-radius:var(--rad);pointer-events:none}
@media (max-width:700px){
html[data-gal="3"] #gallery .stage::after{left:-8px;font-size:.88rem;padding:10px 12px;top:12px}
}
#job .card{position:relative}
html[data-job="2"] #job .card .n{width:auto;height:auto;background:linear-gradient(transparent 58%,var(--hlc) 58% 92%,transparent 92%);color:var(--navy);font-size:7rem;line-height:.85;padding:0 .12em;display:block;font-stretch:125%;margin-bottom:auto}
html[data-area="5"] #area .sa .lead{position:relative;background:var(--blue);color:#fff;padding:30px 34px;border-radius:16px;outline:3px solid #fff;outline-offset:-12px;box-shadow:0 0 0 4px var(--blue),var(--sh);max-width:none;font-weight:600;font-size:1.15rem;
  background-image:radial-gradient(circle,var(--m) 0 4px,transparent 5px),radial-gradient(circle,var(--m) 0 4px,transparent 5px),radial-gradient(circle,var(--m) 0 4px,transparent 5px),radial-gradient(circle,var(--m) 0 4px,transparent 5px);
  background-size:12px 12px;background-repeat:no-repeat;background-position:left 14px top 14px,right 14px top 14px,left 14px bottom 14px,right 14px bottom 14px}
html[data-faq="1"] .fA summary::after{content:"";width:32px;height:17px;background:var(--navy);mask:var(--mk-a) center/100% 100% no-repeat;transition:rotate .25s;font-size:0}
html[data-faq="1"] .fA details[open] summary::after{content:"";rotate:90deg;background:var(--blue)}
html[data-quote="3"] #quote .sheet{--m:var(--accd);--on-m:var(--on-md);background:var(--navy);color:#fff;border-color:var(--navy);border-radius:var(--rad);box-shadow:var(--sh)}
html[data-quote="3"] #quote .sheet .sh,html[data-quote="3"] #quote .qf label,html[data-quote="3"] #quote .sheet p{color:#fff}
html[data-quote="3"] #quote .tel-big{color:#fff !important}
html[data-quote="3"] #quote .sheet .meta a{color:#fff}
html[data-quote="3"] #quote .sheet input,html[data-quote="3"] #quote .sheet select,html[data-quote="3"] #quote .sheet textarea{border-bottom-color:var(--accd)}
html[data-quote="3"] #quote .sheet .sent{color:var(--accd)}
html[data-foot="3"] footer.site{position:relative;padding-top:calc(var(--s-5) + 16px)}
html[data-foot="3"] footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:var(--m);mask:var(--band-mask)}
html[data-foot="3"] footer.site a{position:relative}
html[data-foot="3"] footer.site a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:10px;background:var(--m);mask:var(--mk-u) 0 0/100% 100% no-repeat;transform:scaleX(0);transform-origin:left center;transition:transform .3s}
html[data-foot="3"] footer.site a:hover::after,html[data-foot="3"] footer.site a:focus-visible::after{transform:none}
html{--gold:#F5A220;--coral:#FF6E42;--bsc:#092634;--h2:clamp(2.2rem,4.4vw,3.6rem)}
@media (max-width:700px){
html{--h2:clamp(2rem,9.4vw,2.6rem)}
}
.hA,header.top,#who,#area,.callcard,html[data-quote="3"] #quote .sheet{--bsc:#fff}
html body :is(.btn-call,a.btn[href="#quote"],.top nav a.only-m){background:var(--coral) !important;color:var(--navy) !important;border:2px solid transparent !important;box-shadow:4px 4px 0 var(--bsc) !important;min-height:56px;padding:14px 30px !important;font:800 1.05rem/1 var(--display);font-stretch:110%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;margin-left:0;transition:transform .12s ease,background-color .12s ease}
html body :is(.btn-call,a.btn[href="#quote"],.top nav a.only-m):hover{background:#ff8460 !important;color:var(--navy) !important;text-decoration:none}
html body :is(.btn-call,a.btn[href="#quote"],.top nav a.only-m):active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--bsc) !important}
html body .top nav a.only-m{width:fit-content;margin:14px 0 8px;border-bottom:2px solid transparent !important}
@media (min-width:901px){
html body .top nav a.only-m{display:none !important}
}
@media (max-width:700px){
html body :is(.btn-call,a.btn[href="#quote"]){min-height:60px}
}
.swash{display:none !important}
html body :is(main h2,.bridge5 h2){font-size:var(--h2) !important}
@media (min-width:1001px){
#area .sa{grid-template-columns:1fr 1.25fr}
}
.ar{display:inline-block;width:1.7em;height:.9em;margin-left:.45em;vertical-align:-.12em;background:currentColor;mask:var(--mk-a) center/100% 100% no-repeat}
html .sl::before,html .sl.prev::before{border:0 !important;width:30px;height:16px;background:#fff;mask:var(--mk-a) center/100% 100% no-repeat}
html .sl.prev::before{scale:-1 1}
html .sl:hover{background:var(--blue)}
html .sl:hover::before,html .sl.prev:hover::before{background:#fff}
dialog.lb .prev,dialog.lb .next{font-size:0}
dialog.lb .prev::before,dialog.lb .next::before{content:"";width:24px;height:14px;background:currentColor;mask:var(--mk-a) center/100% 100% no-repeat}
dialog.lb .prev::before{scale:-1 1}
html .fA summary::after,html .fA details[open] summary::after{content:"";width:22px;height:22px;flex:none;font-size:0;color:var(--blue);background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat,linear-gradient(currentColor,currentColor) center/3px 100% no-repeat}
html .fA details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat}
#build .wE .zz.z1{--cat:#1A6FBF;--on-cat:#fff}
#build .wE .zz.z2{--cat:#F5A220;--on-cat:#092634}
#build .wE .zz.z3{--cat:#8A5A44;--on-cat:#fff}
#build .wE .zz.z3 .chips li{background:#EBDDD5;border-color:#8A5A44}
html #build .wE .zz,html #build .wE .zz:nth-child(odd),html #build .wE .zz:nth-child(even){border:2px solid var(--navy) !important;background:#fff;box-shadow:5px 5px 0 var(--cat) !important;margin-bottom:var(--space-block)}
.hA .hl em{color:var(--accd)}
.callcard{border-left-color:var(--accd)}
.slider .more figure.cur img{outline-color:var(--acc)}
#area .pinbox .you{background:var(--accd)}
#area .legend i{background:var(--accd)}
html[data-hero="5"] .hA .hl{text-shadow:3px 3px 0 var(--navy)}
@media (min-width:901px) and (max-width:1200px){
html body .top nav{gap:12px;margin-left:12px;margin-right:12px}
html body .top nav a{font-size:.9rem}
html body .top .tel{font-size:1rem}
html body .top .logo img{height:44px}
}
@media (min-width:901px) and (max-width:1099px){
html body .top .tel{display:none !important}
}
@media (max-width:1049px){
html body .top .hcta{display:none !important}
}
#who .portrait figcaption{display:none}
@media (min-width:1001px){
#who .who{grid-template-columns:4fr 8fr}
}
#area .lead .big{display:block;font:850 clamp(1.6rem,2.5vw,2.1rem)/1.15 var(--display);font-stretch:112%;letter-spacing:-.02em;margin-bottom:12px}
#area .lead .big+*{font-size:1rem}
html #job .card .n{margin-bottom:0 !important;padding-bottom:0}
html #job .card h3{margin-top:var(--s-4);min-height:2.4em}
html #job .card p{margin-top:0}
footer.site .fcard{box-shadow:var(--sh);border-radius:var(--rad)}
#area .night-map{filter:none;mix-blend-mode:normal}
#area .pinbox .you{box-shadow:3px 3px 0 var(--navy)}
#quote .sheet :is(input,select,textarea){border-bottom:3px solid var(--acc)}
#quote .sheet :is(input,select,textarea):focus{outline:3px solid var(--navy);outline-offset:2px;background:#fff}
html[data-quote="3"] #quote .sheet :is(input,select,textarea):focus{outline-color:var(--coral)}

/* ---- Header and hero fix ---- */
/* logo: transparent version, no white box, larger */
html body header.top .logo{background:none;border-radius:0;padding:0;display:block;flex:none}
html body header.top .logo img{height:80px;width:auto;display:block}
html[data-nav="5"] header.top .wrap{min-height:104px}
/* nav sits in the middle, phone and button are a separate group on the right with clear space */
html body .top nav{flex:1 1 auto;justify-content:center;margin:0 24px 0 var(--s-3);gap:16px}
html body .top nav a{font-size:.92rem}
html body .top .tel{font-size:1.15rem;margin-right:28px;padding-left:20px;border-left:2px solid rgba(255,255,255,.28)}
html body .top .hcta{margin-left:0;min-height:56px;padding:14px 22px !important;font-size:1.1rem;font-weight:850;letter-spacing:0}
@media (min-width:901px) and (max-width:1200px){
html body header.top .logo img{height:64px}
html[data-nav="5"] header.top .wrap{min-height:92px}
html body .top nav{gap:14px;margin:0 14px}
html body .top nav a{font-size:.9rem}
html body .top .tel{font-size:1rem;margin-right:20px}
html body .top .hcta{padding:12px 18px !important;font-size:1rem;min-height:50px}
}
/* hero: text column on the left, photo frame in its own space on the right, fully below the header band */
.hA{--ex:max(16px,calc((100% - 1200px)/2));--col:clamp(320px,36vw,500px)}
.hA .hl,.hA .lede{max-width:var(--col)}
html[data-hero="5"] .hA .hl{max-width:var(--col)}
html[data-hero="5"] .hA>img{top:156px;bottom:auto;left:calc(var(--ex) + var(--col) + 48px);right:auto;width:calc(100% - var(--ex) - max(64px,var(--ex)) - var(--col) - 48px - 12px);height:min(calc(100% - 330px),540px)}
@media (max-width:900px){
html body header.top .logo img{height:54px}
html[data-nav="5"] header.top .wrap,html body .top .wrap{min-height:72px}
}
@media (max-width:700px){
html[data-hero="5"] .hA>img{top:124px;left:16px;right:auto;width:calc(100% - 78px);height:220px;rotate:0deg}
html .hA>.wrap{padding-top:374px}
html .hA .hl,html .hA .lede{max-width:none}
}
@media (min-width:901px) and (max-width:1179px){
html body .top .tel{display:none !important}
}

/* ---- Trust strip: BBB is the lead item, two icon items beside it ---- */
html .tC .strip.trust3{display:grid;grid-template-columns:1fr 1.05fr 1.15fr;gap:0;padding:0;align-items:stretch;overflow:visible}
.trust3 .t-bbb{background:var(--blue);display:grid;place-items:center;padding:44px 40px 48px}
.trust3 .t-logo{display:block;background:#fff;padding:18px 22px;box-shadow:9px 9px 0 var(--accd)}
.trust3 .t-logo img{display:block;width:min(100%,300px);height:auto}
.trust3 .t-it{display:flex;align-items:center;gap:20px;padding:32px 28px}
.trust3 .t-ico{flex:none;display:grid;place-items:center;width:88px;height:88px;background:var(--accd);rotate:-4deg;box-shadow:5px 5px 0 var(--navy);border-radius:var(--rad)}
.trust3 .t-ico svg{width:50px;height:50px;rotate:4deg;fill:none;stroke:var(--navy);stroke-width:1.75}
.trust3 .fact{font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1.08;color:var(--navy);font-variant-numeric:lining-nums;text-wrap:balance}
.trust3 .fsub{font-size:1.02rem;line-height:1.4;margin:8px 0 0;color:var(--muted)}
@media (max-width:900px){
html .tC .strip.trust3{grid-template-columns:1fr}
.trust3 .t-bbb{padding:36px 28px 40px;order:-1}
.trust3 .t-it{border-top:2px solid var(--navy)}
}
@media (max-width:700px){
.trust3 .t-logo img{width:min(100%,250px)}
.trust3 .t-it{gap:16px;padding:24px 18px}
.trust3 .t-ico{width:64px;height:64px}
.trust3 .t-ico svg{width:36px;height:36px}
.trust3 .fact{font-size:1.4rem}
}

.trust3 .fsub.est{display:inline-block;margin:12px 0 0;padding:6px 14px;border:2px solid var(--navy);border-radius:var(--rad);background:#fff;box-shadow:4px 4px 0 var(--accd);color:var(--navy);font:850 1.05rem/1 var(--display);font-stretch:112%;letter-spacing:-.01em}

/* Meet Fredrick: one frame only. The photo's own offset shadow is removed, the frame carries the single shadow, and the image no longer leaves a gap under itself. */
html[data-who="4"] #who .portrait img{box-shadow:none}
#who .portrait img{display:block;border-radius:0}
/* Already Have a Pool: bigger circle with room around the word */
html[data-svc="1"] .bridge5 .kw{margin-inline:.3em}
html[data-svc="1"] .bridge5 .kw::after{inset:-.3em -.4em -.26em}

/* ---- What We Build: photo-led cards, one structure (label, title, intro, chips), strong category colors ---- */
html body #build .wE :is(.zz,.zz:nth-child(odd),.zz:nth-child(even)){grid-template-columns:1.35fr 1fr;gap:0;padding:0 !important;align-items:stretch;border:2px solid var(--navy) !important;box-shadow:10px 10px 0 var(--cat) !important;background:#fff;margin-bottom:var(--space-block)}
html body #build .wE .zz.rev{grid-template-columns:1fr 1.35fr}
html body #build .wE .zz .pic{aspect-ratio:auto;min-height:440px;border-radius:0}
html body #build .wE .zz .pic.lph{border:0;box-shadow:none;margin:0}
html body #build .wE .zz .pic.lph::before{display:none}
html body #build .wE .zz.z1 .pic{border-right:2px solid var(--navy)}
html body #build .wE .zz.z2 .pic{border-left:2px solid var(--navy)}
html body #build .wE .zz.z3 .pic{border-right:2px solid var(--navy)}
html body #build .wE .zz .pic.car{overflow:hidden}
html body #build .wE .zz .tx,html body #build .wE .zz.rev .tx{padding:36px clamp(24px,3vw,44px);align-self:center;color:var(--navy)}
#build .tx .kick{display:inline-block;width:fit-content;margin:0 0 14px;padding:6px 12px;background:var(--cat);color:var(--on-cat);font:700 .88rem/1.1 var(--body);border-radius:var(--chip-r)}
#build .tx h3{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1;margin:0 0 14px}
#build .tx .intro{font-size:1.02rem;line-height:1.5;margin:0 0 20px;max-width:44ch}
#build .tx .cgs{display:grid;gap:18px}
#build .tx .cg h4{margin:0 0 8px;font:700 .95rem/1.2 var(--body);color:var(--navy)}
#build .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#build .chips li{padding:6px 12px;background:color-mix(in srgb,var(--cat) 16%,#fff);border:1.5px solid color-mix(in srgb,var(--cat) 70%,#fff);border-radius:var(--chip-r);font:600 .93rem/1.25 var(--body);color:var(--navy)}
@media (max-width:900px){
html body #build .wE :is(.zz,.zz:nth-child(odd),.zz:nth-child(even)){grid-template-columns:minmax(0,1fr);box-shadow:7px 7px 0 var(--cat) !important}
html body #build .wE .zz .pic{aspect-ratio:3/2;min-height:0}
html body #build .wE .zz .tx,html body #build .wE .zz.rev .tx{padding:26px 20px 28px}
}
html body #build .pic .track{padding:0;margin:0;gap:0}

/* ---- How a Pool Job Goes: number, icon, title, sentence, same lines on every card ---- */
html #job .card{width:min(300px,78vw);min-height:0;padding:24px 24px 28px;display:grid;grid-template-rows:52px 84px 2.3em auto;row-gap:16px;align-content:start}
html[data-job="2"] #job .card .n{display:block;font-size:2.6rem;line-height:52px;height:52px;margin:0 !important;padding:0 .12em;width:fit-content;align-self:start;background:linear-gradient(transparent 58%,var(--hlc) 58% 92%,transparent 92%);color:var(--navy);font-stretch:125%}
#job .jico{display:grid;place-items:center;width:76px;height:76px;margin:6px 0 0 4px;background:var(--accd);rotate:-4deg;box-shadow:5px 5px 0 var(--navy);border-radius:var(--rad);justify-self:start}
#job .jico svg{width:42px;height:42px;rotate:4deg;fill:none;stroke:var(--navy);stroke-width:1.75}
html #job .card h3{margin:0;min-height:0;font-size:1.35rem;line-height:1.1;text-wrap:balance;align-self:start}
html #job .card p{margin:0;font-size:1rem;line-height:1.45}

/* Quote form: Turnstile widget and honeypot */
.qf .ts{min-height:65px;display:flex;align-items:center;max-width:100%;overflow:hidden}
.qf .ts .cf-turnstile{width:100%}
.qf .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.qf button[disabled]{opacity:.6;cursor:wait}

/* ---- Pool service: three colored cards across, same structure as What We Build ---- */
#service .sv5head{margin-bottom:var(--s-5)}
#service .svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;align-items:stretch;padding-right:10px}
#service .svc{--cat:#3F4FB8;--on-cat:#fff;display:flex;flex-direction:column;background:#fff;border:2px solid var(--navy);box-shadow:9px 9px 0 var(--cat)}
#service .svc-pic{aspect-ratio:3/2;border-bottom:2px solid var(--navy);overflow:hidden;background:var(--navy)}
#service .svc-pic img{display:block;width:100%;height:100%;object-fit:cover}
#service .svc-tx{display:flex;flex-direction:column;padding:26px clamp(20px,2vw,30px) 30px;color:var(--navy);flex:1}
#service .svc .kick{display:inline-block;width:fit-content;margin:0 0 12px;padding:6px 12px;background:var(--cat);color:var(--on-cat);font:700 .88rem/1.1 var(--body);border-radius:var(--chip-r)}
#service .svc h3{font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1;margin:0 0 12px;color:var(--navy)}
#service .svc .intro{font-size:1rem;line-height:1.5;margin:0 0 18px;color:var(--navy)}
#service .svc .chips{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:0;list-style:none}
#service .svc .chips li{padding:6px 11px;background:color-mix(in srgb,var(--cat) 15%,#fff);border:1.5px solid color-mix(in srgb,var(--cat) 70%,#fff);border-radius:var(--chip-r);font:600 .9rem/1.25 var(--body);color:var(--navy)}
@media (max-width:1000px){
#service .svcs{grid-template-columns:minmax(0,1fr);gap:32px;padding-right:9px}
}

/* ---- Calls to action: three bands, each its own layout ---- */
.band{padding:56px 0}
.band h2{font:850 clamp(1.7rem,3.2vw,2.6rem)/1.05 var(--display);font-stretch:118%;letter-spacing:-.03em;margin:0;color:var(--navy)}
.band p{margin:0}
.band .num{font:850 1.5rem/1 var(--display);font-stretch:112%;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.band .num:hover{text-decoration:underline;text-underline-offset:6px}
/* 2. after pool service: one wide, short card */
.band.b2{background:var(--bg);padding:56px 0 72px}
.b2 .box{max-width:1040px;margin:0 auto;padding:32px clamp(20px,4vw,56px);background:#fff;border:2px solid var(--navy);box-shadow:10px 10px 0 var(--accd);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
html body .b2 .box h2{max-width:none;text-wrap:balance;font-size:clamp(1.7rem,3vw,2.6rem) !important;line-height:1.1}
.b2 .box p{font-size:1.1rem;line-height:1.45;max-width:52ch}
.b2 .box .acts2{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px;margin-top:6px}
.b2 .box .num{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--blue)}
/* 3. after How a Pool Job Goes: what happens next */
.band.b3{background:var(--ocean)}
.b3 h2{margin-bottom:var(--s-4)}
.next3{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);counter-reset:n}
.next3 li{counter-increment:n;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;border-top:4px solid var(--navy);padding-top:16px}
.next3 li::before{content:counter(n);grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;background:var(--navy);color:#fff;font:850 1.2rem/1 var(--display);border-radius:var(--chip-r)}
.next3 b{font:850 1.15rem/1.15 var(--display);font-stretch:112%;color:var(--navy)}
.next3 span{margin-top:6px;line-height:1.45;color:var(--navy)}
.b3 .bgo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px}
html body .b3 .bgo a.btn[href="#quote"]{min-width:260px;min-height:60px;font-size:1.2rem}
.b3 .bgo .num{font-size:1.7rem}
.band.b3{padding:64px 0}
@media (max-width:900px){
.next3{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.band{padding:44px 0}
}
.areanote{margin:var(--space-block) 0 0;font-size:1.05rem;line-height:1.5;max-width:42ch;color:#fff}
.areanote a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
#service .svc-pic{position:relative}
#service .svc-pic img{position:absolute;inset:0}
#service .svc .chips{margin-top:0}
.next3 li{align-content:start}

/* ---- Revision pass: Where We Work ---- */
#area .sa .sh2{line-height:1.15;letter-spacing:-.5px}
html[data-area="5"] #area .sa .lead{display:grid;place-items:center;text-align:center;width:fit-content;max-width:100%;padding:36px;margin:0 0 var(--space-block)}
html[data-area="5"] #area .sa .lead .big{margin:0;text-wrap:balance;text-align:center}
html[data-area="5"] #area .sa .lead .big::after{content:none}
#area .areanote{margin:0 0 var(--s-4)}

/* ---- Revision pass: bottom bar (phones) ---- */
.mbar{display:none}
@media (max-width:768px){
:root{--gutter:20px}
html body .pin{display:none !important}
html body .wrap{width:auto;margin-left:20px;margin-right:20px}
html body #build .wE{width:auto;margin-left:20px;margin-right:20px}
html body .tC .strip{margin-left:0;margin-right:0}
html body .wE .zz .tx,html body .wE .zz.rev .tx,html body .wG .tx{padding-right:var(--gutter);padding-left:var(--gutter)}
html body .top nav{padding-right:20px;padding-left:20px}
html body dialog.lb .in{padding-right:12px}
html body #service .svcs{padding-right:0}
/* no reveal motion on phones */
.hA .hl,.hA .lede,.hA .acts{animation:none !important;opacity:1 !important}
/* hero photo shows at full brightness, framed above the text */
html body .hA::after{content:none}
html[data-hero="5"] .hA>img{top:124px;left:20px;right:auto;width:calc(100% - 40px);height:220px;rotate:0deg}
html .hA>.wrap{padding-top:374px}
html[data-hero="5"] .hA .hl,html .hA .lede{max-width:none}
html .hA .lede{margin:var(--s-3) 0 var(--s-4)}
html .hA .acts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
html .hA .acts .btn{width:100%}
/* sticky bottom bar */
.mbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--navy);border-top:3px solid var(--accd)}
html body .mbar a.btn{min-height:56px;padding:12px 10px !important;box-shadow:none !important;font-size:1.05rem}
html body .mbar a.mcall{background:#fff;color:var(--navy);border-color:#fff}
footer.site{padding-bottom:calc(var(--s-5) + 84px + env(safe-area-inset-bottom))}
.b3 .bgo{flex-direction:column}
html body .b3 .bgo a.btn[href="#quote"]{width:100%}
.b2 .box .acts2{flex-direction:column}
html body .b2 .box a.btn[href="#quote"]{width:100%}
}