/* Layout: one painted truck-door panel carries the swagger on the home page and a matching "tailgate" panel
   opens every inner page; everything below sits left-aligned on cool paper as patches, plates and stickers. */
:root{
  --paper:#EDEFEF;
  --paper-hi:#F8F9F9;
  --denim:#1F3A5C;
  --denim-deep:#13263D;
  --orange:#F2661E;
  --orange-deep:#C24A0B;
  --chrome:#AAB2BA;
  --chrome-hi:#E2E6E9;
  --ink:#16263B;
  --ink-soft:#4B5A6C;
  --on-denim:#C9D3DE;
  --f-slab:"Alfa Slab One","Rockwell","Roboto Slab",Georgia,serif;
  --f-script:"Yellowtail","Brush Script MT","Segoe Script",cursive;
  --f-body:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --s-sm:.875rem; --s-base:1.0625rem; --s-md:1.25rem;
  --s-lg:clamp(1.625rem,2.4vw,2.125rem); --s-xl:clamp(2.125rem,4.4vw,3.5rem);
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --chrome-grad:linear-gradient(180deg,#F4F6F7 0%,#B9C0C7 38%,#8E98A2 52%,#D5DADE 70%,#A7AFB7 100%);
  --door-grad:linear-gradient(112deg,transparent 30%,rgb(255 255 255/.07) 37%,transparent 45%),linear-gradient(172deg,#274A72 0%,var(--denim) 42%,#182F4C 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s-base);line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;line-height:1.08;text-wrap:balance}
h1,h2{font-family:var(--f-slab);letter-spacing:.005em}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--denim);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{font-family:var(--f-script);color:var(--orange);font-size:clamp(1.625rem,2.4vw,2rem);line-height:1}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-body);font-weight:700;font-size:var(--s-sm);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:var(--orange);color:var(--denim-deep);padding:.95rem 1.4rem;border:2px solid var(--denim-deep);border-radius:6px;box-shadow:4px 4px 0 var(--denim-deep);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--denim-deep)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn.ghost{background:var(--paper-hi)}

/* Header */
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding-block:1.1rem}
.mark{font-family:var(--f-slab);font-size:1.625rem;color:var(--denim);text-decoration:none;margin-right:auto;line-height:1}
.mark span{color:var(--orange)}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-weight:600;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase}
.nav a{text-decoration:none;padding-block:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--orange)}
.head-call{display:flex;align-items:center;gap:1.25rem}
.head-call .tel{font-weight:700;text-decoration:none;font-size:var(--s-base);color:var(--denim)}
.head-call .btn{padding:.7rem 1rem}

/* Home hero: the door */
.hero{padding-block:clamp(1.5rem,4vw,3.5rem) clamp(2.5rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.trim{padding:7px;border-radius:22px;background:var(--chrome-grad);box-shadow:0 2px 0 rgb(19 38 61/.25),0 24px 40px -24px rgb(19 38 61/.55)}
.door{position:relative;border-radius:16px;overflow:hidden;padding:clamp(5.5rem,11vw,7.5rem) clamp(.5rem,3vw,2.5rem) clamp(1.5rem,4vw,3rem);background:var(--door-grad)}
.door::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(3.25rem,6vw,4.25rem);background:linear-gradient(118deg,#4A6787 0%,#223B58 30%,#0E1D30 70%,#1C324D 100%);border-bottom:6px solid transparent;border-image:var(--chrome-grad) 1}
.handle{position:absolute;top:clamp(4.25rem,7.6vw,5.4rem);right:clamp(1rem,3vw,2rem);width:clamp(4rem,8vw,5.75rem);height:clamp(.9rem,1.5vw,1.15rem);border-radius:99px;background:var(--chrome-grad);box-shadow:0 2px 3px rgb(0 0 0/.35)}
.emblem{position:relative;z-index:1;display:block;width:100%;height:auto}
.hero-side{display:grid;gap:1.4rem;align-content:center}
.sticker{margin:0 0 .5rem -18%;width:min(118%,440px);background:var(--paper-hi);padding:9px;border-radius:24px;transform:rotate(3.5deg);box-shadow:0 1px 0 rgb(19 38 61/.15),0 18px 30px -16px rgb(19 38 61/.55);position:relative;z-index:2}
.sticker img{border-radius:16px;aspect-ratio:680/382;object-fit:cover;width:100%}
.hero-side h1{font-size:var(--s-lg);color:var(--denim);max-width:22ch}
.hero-side p{max-width:48ch;color:var(--ink-soft)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.cta-row .tel{font-family:var(--f-slab);font-size:1.5rem;color:var(--denim);text-decoration:none}
.cta-row .tel:hover{color:var(--orange-deep)}

/* Inner page hero: the tailgate */
.page-hero{padding-block:clamp(.5rem,2vw,1.5rem) clamp(2.5rem,6vw,4.5rem)}
.gate{position:relative;border-radius:16px;overflow:hidden;background:var(--door-grad);color:var(--paper-hi);padding:clamp(1.5rem,4vw,3.25rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.gate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;border-block:2px solid var(--orange);opacity:.8;margin-bottom:14px;pointer-events:none}
.gate-text{display:grid;gap:1.1rem;padding-bottom:1.25rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-denim)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--orange)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--orange)}
.gate h1{font-size:var(--s-xl);color:var(--paper-hi);max-width:18ch}
.gate h1 em{font-style:normal;color:var(--orange)}
.gate .lead{font-size:var(--s-md);line-height:1.5;color:var(--on-denim);max-width:56ch}
.gate .cta-row .tel{color:var(--paper-hi)}
.gate .cta-row .tel:hover{color:var(--orange)}
.gate-art{display:grid;justify-items:center;gap:1rem;padding-bottom:1.25rem}
.gate-art .badge{max-width:240px}

/* Ribbon + plaque */
.ribbon-band{padding-block:0 clamp(3rem,6vw,5rem)}
.ribbon{position:relative;display:flex;justify-content:center;margin-inline:auto;width:min(100%,56rem);filter:drop-shadow(0 3px 0 rgb(19 38 61/.25))}
.ribbon p{position:relative;z-index:1;background:var(--orange);color:var(--denim-deep);font-family:var(--f-slab);font-size:clamp(1rem,2.1vw,1.5rem);letter-spacing:.04em;text-transform:uppercase;padding:.7rem clamp(1rem,3vw,2.5rem);text-align:center;width:100%;margin:0 clamp(1.5rem,4vw,3rem);border-block:3px double var(--denim-deep)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:.8rem;bottom:-.8rem;width:clamp(3rem,7vw,5rem);background:var(--orange-deep);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,28% 50%)}
.ribbon::before{left:0}
.ribbon::after{right:0;transform:scaleX(-1)}
.plaque{margin-top:clamp(2.5rem,5vw,3.5rem);border-radius:12px;padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,4vw,3rem);border:1px solid #8E98A2;
  background:radial-gradient(circle at 18px 18px,#6D7883 0 4px,#E9ECEE 5px 6px,transparent 7px),radial-gradient(circle at calc(100% - 18px) 18px,#6D7883 0 4px,#E9ECEE 5px 6px,transparent 7px),radial-gradient(circle at 18px calc(100% - 18px),#6D7883 0 4px,#E9ECEE 5px 6px,transparent 7px),radial-gradient(circle at calc(100% - 18px) calc(100% - 18px),#6D7883 0 4px,#E9ECEE 5px 6px,transparent 7px),repeating-linear-gradient(90deg,rgb(255 255 255/.25) 0 1px,transparent 1px 3px),linear-gradient(180deg,#E6E9EC,#BFC6CC 55%,#D8DDE1);
  box-shadow:inset 0 1px 0 #fff,0 10px 24px -18px rgb(19 38 61/.6)}
.plaque dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.plaque div{display:flex;flex-direction:column-reverse;gap:.35rem;border-left:2px solid rgb(19 38 61/.2);padding-left:1rem}
.plaque div:first-child{border-left:0;padding-left:0}
.plaque dt{font-weight:600;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.plaque dd{margin:0;font-family:var(--f-slab);font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1;color:var(--denim);text-shadow:0 1px 0 #fff}
.plaque .fine{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgb(19 38 61/.2);font-weight:600;font-size:var(--s-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--denim);display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}

/* Sections */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec.tight{padding-top:0}
.sec-head{display:grid;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:46rem}
.sec-head h2{font-size:var(--s-xl);color:var(--denim)}
.sec-head p{max-width:60ch;color:var(--ink-soft);margin-top:.5rem}
.more-reviews{margin-top:1.5rem;font-weight:600}
.sec-head .kicker{color:var(--orange-deep);margin-top:0}
.sec-head p a{color:var(--denim);font-weight:600;text-decoration-color:var(--orange);text-underline-offset:3px}

/* Patches */
.patches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.5rem 1.75rem}
.patches.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:48rem}
.patch{display:grid;gap:.9rem;justify-items:center;align-content:start;text-align:center}
.patch a{display:grid;gap:.9rem;justify-items:center;text-decoration:none;width:100%}
.patch a:hover .badge{transform:rotate(-4deg) scale(1.03)}
.patch a:hover h3{color:var(--orange-deep)}
.badge{--bg:var(--denim);--rim:var(--orange);--fg:var(--paper-hi);--st:rgb(255 255 255/.55);
  position:relative;width:100%;max-width:190px;aspect-ratio:1;border-radius:50%;container-type:inline-size;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgb(255 255 255/.07) 0 1.5px,transparent 1.5px 4px),var(--bg);
  border:7px solid var(--rim);box-shadow:0 0 0 1px rgb(19 38 61/.35),0 6px 10px -6px rgb(19 38 61/.6);color:var(--fg);transition:transform .2s}
.badge::before,.badge::after{content:"";position:absolute;border-radius:50%;border:2px dashed var(--st)}
.badge::before{inset:5px}
.badge::after{inset:21%}
.badge svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--fg);font-family:var(--f-body);font-weight:700;font-size:15px;letter-spacing:2.5px}
.badge b{position:relative;font-family:var(--f-slab);font-weight:400;font-size:min(12.5cqi,calc(50cqi / (var(--n,6) * .74)));line-height:1;text-transform:uppercase;max-width:58%;text-wrap:balance;text-align:center}
.badge.o{--bg:var(--orange);--rim:var(--denim);--fg:var(--denim-deep);--st:rgb(19 38 61/.5)}
.badge.c{--bg:var(--chrome-hi);--rim:var(--denim);--fg:var(--denim);--st:rgb(31 58 92/.45)}
.badge.emg b{font-size:19cqi}
.hub .badge b{font-size:min(15cqi,calc(58cqi / (var(--n,6) * .74)));max-width:66%}
.gate .badge{--rim:var(--chrome-hi)}
.patch h3{font-weight:700;font-size:1rem;line-height:1.3;color:var(--denim)}
.patch p{font-size:.9375rem;color:var(--ink-soft);max-width:24ch}
.also{margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:2px solid var(--denim);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.also p{max-width:62ch}
.also b{color:var(--denim)}

/* Reviews */
.reviews{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,3vw,2.25rem);align-items:start}
.reviews.single{grid-template-columns:minmax(0,1fr);max-width:48rem}
.reviews.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.review{background:var(--paper-hi);border:2px solid var(--denim-deep);border-radius:10px;box-shadow:6px 6px 0 var(--orange);padding:clamp(1.25rem,2.5vw,1.75rem);display:grid;gap:1rem;margin:0}
.review blockquote{margin:0;font-size:var(--s-base);line-height:1.6;max-width:60ch}
.review blockquote::before{content:"\201C";display:block;font-family:var(--f-slab);font-size:3.5rem;line-height:.6;height:1.4rem;color:var(--orange)}
.review figcaption{font-family:var(--f-script);font-size:2rem;line-height:1;color:var(--denim);display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.review figcaption span{font-family:var(--f-body);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.review.lead{grid-row:span 2}
.review.lead blockquote{font-size:var(--s-md);line-height:1.5}

/* Service area: plates */
.area{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.area .sec-head{margin:0}
.plates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.plates.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.plate{position:relative;container-type:inline-size;aspect-ratio:2/1;border-radius:12px;background:var(--paper-hi);border:3px solid var(--denim);box-shadow:inset 0 0 0 4px var(--paper-hi),inset 0 0 0 6px var(--denim),0 4px 0 rgb(19 38 61/.2);display:grid;align-content:center;justify-items:center;text-align:center;padding:.6rem;color:var(--denim);text-decoration:none;transition:transform .15s}
a.plate:hover{transform:translateY(-3px) rotate(-1deg)}
a.plate:hover b{color:var(--orange-deep)}
.plate::before,.plate::after{content:"";position:absolute;top:13px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#6D7883 0 2px,var(--chrome) 3px)}
.plate::before{left:22%}.plate::after{right:22%}
.plate small{font-weight:700;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase}
.plate b{font-family:var(--f-slab);font-weight:400;font-size:min(1.75rem,calc(84cqi / (var(--n,7) * .78)));line-height:1.05;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.plate.home{background:var(--orange);box-shadow:inset 0 0 0 4px var(--orange),inset 0 0 0 6px var(--denim),0 4px 0 rgb(19 38 61/.2);color:var(--denim-deep)}
.plate.big{width:min(100%,300px);border-width:4px}
.plate.big b{font-size:min(2.4rem,calc(84cqi / (var(--n,7) * .78)))}
.gate .plate{color:var(--denim)}
.county{display:grid;gap:1rem}
.county+.county{margin-top:clamp(1.75rem,3vw,2.5rem)}
.county h3{font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:.75rem;align-items:center}
.county h3::after{content:"";flex:1;height:2px;background:var(--denim);opacity:.2}

/* Article */
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.prose{display:grid;gap:1.1rem;max-width:68ch;min-width:0}
.prose h2{font-size:var(--s-lg);color:var(--denim);margin-top:1.4rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{line-height:1.7}
.prose ul{margin:0;padding-left:1.25rem;display:grid;gap:.4rem}
.prose li::marker{color:var(--orange)}
.prose a{color:var(--denim);font-weight:600;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--orange-deep)}
.prose strong{color:var(--denim)}
.shot{margin:.75rem 0;display:grid;gap:.7rem}
.shot .frame{background:var(--paper-hi);padding:7px;border-radius:20px;box-shadow:0 1px 0 rgb(19 38 61/.15),0 12px 22px -14px rgb(19 38 61/.5);transform:rotate(-.6deg)}
.shot img{border-radius:14px;aspect-ratio:16/9;object-fit:cover;width:100%}
.shot figcaption{font-weight:600;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:.6rem;align-items:center}
.shot figcaption::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--orange);flex:none}
.aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 1.25rem);display:grid;gap:1.25rem}
.card{background:var(--paper-hi);border:2px solid var(--denim-deep);border-radius:10px;padding:1.4rem;display:grid;gap:.9rem}
.card.dark{background:var(--door-grad);color:var(--on-denim);border-color:var(--denim-deep);box-shadow:6px 6px 0 var(--orange)}
.card h2{font-family:var(--f-body);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.card.dark h2{color:var(--chrome)}
.card .big{font-family:var(--f-slab);font-size:1.9rem;color:var(--orange);text-decoration:none;line-height:1}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.card li a{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px dashed rgb(31 58 92/.3);text-decoration:none;font-weight:600;color:var(--denim)}
.card li a::after{content:"\2192";color:var(--orange-deep)}
.card li a:hover{color:var(--orange-deep)}
.card li a[aria-current]{color:var(--orange-deep)}

/* FAQ */
.faq{display:grid;gap:.9rem;max-width:52rem}
.faq details{background:var(--paper-hi);border:2px solid var(--denim-deep);border-radius:10px}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3.25rem 1.1rem 1.25rem;position:relative;font-weight:700;font-size:1.0625rem;color:var(--denim)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:50%;translate:0 -50%;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--orange);color:var(--denim-deep);display:grid;place-items:center;font-family:var(--f-slab);font-size:1.1rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary h3{display:inline;font:inherit;color:inherit}
.faq .ans{padding:0 1.25rem 1.2rem;display:grid;gap:.75rem;max-width:66ch;line-height:1.7}
.faq .ans a{color:var(--denim);font-weight:600;text-decoration-color:var(--orange);text-underline-offset:3px}

/* Hub list */
.hub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2.5rem}
.hub a{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.25rem;align-items:center;text-decoration:none;padding:1rem 0;border-bottom:2px solid rgb(31 58 92/.15)}
.hub .badge{max-width:5.5rem;border-width:4px}
.hub .badge::after{inset:16%}
.hub h3{font-family:var(--f-slab);font-size:1.35rem;color:var(--denim);line-height:1.15}
.hub p{color:var(--ink-soft);font-size:.9375rem;margin-top:.3rem}
.hub a:hover h3{color:var(--orange-deep)}

/* Quote */
.quote{background:linear-gradient(112deg,transparent 30%,rgb(255 255 255/.05) 37%,transparent 45%),var(--denim);color:var(--paper-hi);border-radius:22px;padding:clamp(1.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);border:7px solid transparent;background-clip:padding-box;outline:7px solid var(--chrome);outline-offset:-7px}
.quote h2{font-size:var(--s-xl)}
.quote .kicker{margin-bottom:.25rem}
.quote-info{display:grid;gap:1.25rem;align-content:start}
.quote-info p{max-width:44ch;color:var(--on-denim)}
.quote-info .big{font-family:var(--f-slab);font-size:clamp(2rem,3.6vw,2.75rem);color:var(--orange);text-decoration:none;line-height:1}
.quote-info .big:hover{color:#FF8A4D}
.quote-info .mail{color:var(--paper-hi);font-weight:600}
.quote-top{padding-top:clamp(1.25rem,3vw,2.5rem)}
.quote h1{font-size:var(--s-xl);line-height:1.05}
.quote .lead{font-size:var(--s-md);line-height:1.5}
.promise{list-style:none;margin:0;padding:1.25rem 0 0;border-top:1px solid rgb(255 255 255/.2);display:grid;gap:.5rem;font-size:var(--s-sm)}
.promise li{display:flex;gap:.6rem;align-items:baseline}
.promise li::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--orange);flex:none;translate:0 -.1rem}
.form{background:var(--paper-hi);color:var(--ink);border-radius:12px;padding:clamp(1.25rem,3vw,2rem);display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-content:start}
.field{display:grid;gap:.3rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--denim)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid #B9C1CA;border-radius:6px;padding:.7rem .8rem;width:100%;min-width:0}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--denim);outline:3px solid var(--orange);outline-offset:1px}
.field textarea{resize:vertical;min-height:7rem}
.form .btn{justify-self:start;margin-top:.25rem}
.thanks{display:none;grid-column:1/-1;font-family:var(--f-script);font-size:2rem;color:var(--denim);line-height:1.1}
.form.sent .thanks{display:block}
.form-err{grid-column:1/-1;margin:0;font-weight:600;color:#B3261E}.form-err:empty{display:none}
.field .opt{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.75}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer */
.site-foot{background:var(--denim-deep);color:var(--on-denim);margin-top:clamp(3.5rem,8vw,6rem);padding-block:3rem 2rem}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.site-foot .nm{font-family:var(--f-slab);font-size:2rem;color:var(--orange);line-height:1}
.site-foot .nm+span{display:block;font-family:var(--f-script);font-size:1.5rem;color:var(--paper-hi);margin-top:.25rem}
.site-foot h2{font-family:var(--f-body);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome);margin-bottom:.75rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.site-foot a{text-decoration:none;color:var(--paper-hi)}.site-foot a:hover{color:var(--orange)}
.pin{grid-column:1/-1;height:10px;border-block:2px solid var(--orange);opacity:.85;margin-top:.5rem}
.site-foot .copy{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;font-size:.8125rem}

/* 404 */
.lost{display:grid;gap:1.25rem;justify-items:start;padding-block:clamp(3rem,8vw,6rem)}
.lost h1{font-size:var(--s-xl);color:var(--denim)}

/* Responsive */
@media (max-width:1100px){
  .patches{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plates.five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1060px){
  .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review.lead{grid-row:auto;grid-column:1/-1}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .quote-top .promise,.quote-top .quote-info>hr{display:none}
  .hero-grid,.gate,.article,.area,.quote{grid-template-columns:minmax(0,1fr)}
  .sticker{margin:-3.5rem 0 .25rem auto;width:min(78%,400px)}
  .gate-art{justify-items:start}
  .gate-art .badge{max-width:170px}
  .plaque dl{grid-template-columns:1fr 1fr}
  .plaque div:nth-child(3){border-left:0;padding-left:0}
  .patches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}
@media (max-width:600px){
  .nav{order:3;width:100%;gap:.25rem 1.1rem;font-size:.75rem}
  .head-call .btn{display:none}
  .sticker{margin-top:-2rem;width:82%}
  .patches,.patches.three{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .reviews,.reviews.pair{grid-template-columns:minmax(0,1fr)}
  .plates,.plates.five{grid-template-columns:1fr 1fr;gap:.9rem}
  .plate::before,.plate::after{top:9px;width:7px;height:7px}
  .form{grid-template-columns:1fr}
  .quote{border-radius:16px}
  .site-foot .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}