/* Evans Repair LTD — Pequot Lakes, MN */
:root{
  --black:#0C0D0E; --gun:#141618; --plate:#1B1D20; --seam:#2C2F33;
  --gold:#D2451E; --gold-hot:#F0592C; --gold-dim:#8C3317;   /* equipment red-orange */
  --bone:#F3F4F5; --ash:#9BA1A7; --smoke:#6C7177;
  --paper:#F4F5F6; --paper-2:#E2E4E7; --ink:#101113; --ink-soft:#3A3D42;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Source Sans 3','Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  --r:3px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:92px}
body{font-family:var(--body);font-size:17px;line-height:1.65;color:var(--bone);background:var(--black)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
@media(max-width:640px){.wrap{padding:0 18px}}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:.012em;line-height:1.06;text-transform:uppercase}
h1{font-size:clamp(2.1rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.2rem}
p{margin-bottom:14px}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.lede{font-size:1.14rem;color:var(--ash);max-width:62ch}
.tagline{font-family:var(--display);font-weight:500;text-transform:none;font-size:clamp(1.1rem,2.2vw,1.45rem);color:var(--gold);margin:10px 0 0}
.opt{text-transform:none;letter-spacing:0;color:var(--smoke)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.95rem;padding:14px 26px;
  border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-hot);border-color:var(--gold-hot)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--seam)}
.btn-ghost:hover{border-color:var(--bone)}
.btn-lg{padding:17px 32px;font-size:1rem}

.strip{background:var(--gold);color:#fff;font-size:.78rem;font-family:var(--mono);letter-spacing:.07em}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.strip a{white-space:nowrap}
@media(max-width:860px){.strip .left{display:none}.strip .wrap{justify-content:center}}

.nav{position:sticky;top:0;z-index:120;background:var(--black);border-bottom:1px solid var(--seam)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:76px}
.nav .brand img{height:46px;width:auto}
.links{display:flex;gap:24px;margin-left:12px;font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;font-size:.92rem}
.links a{color:var(--ash);padding:4px 0;border-bottom:2px solid transparent}
.links a:hover{color:var(--bone)}
.links a.on{color:var(--bone);border-bottom-color:var(--gold)}
.navright{margin-left:auto;display:flex;align-items:center;gap:16px}
.navright .num{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em}
@media(max-width:980px){.links,.navright .num{display:none}}

.phero{position:relative;isolation:isolate;border-bottom:1px solid var(--seam);padding:104px 0 96px;
  background:var(--black)}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("/hero.jpg");
  background-image:image-set(url("/hero.webp") 1x);
  background-size:cover;background-position:center 48%}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(97deg,rgba(10,11,12,.96) 0%,rgba(10,11,12,.93) 30%,rgba(10,11,12,.80) 46%,rgba(10,11,12,.22) 60%,rgba(10,11,12,.06) 72%,rgba(10,11,12,.28) 100%),
             linear-gradient(180deg,rgba(10,11,12,.30) 0%,rgba(10,11,12,0) 22%,rgba(10,11,12,0) 72%,rgba(10,11,12,.55) 100%)}
.phero .mono{color:var(--gold-hot)}
.phero h1{text-shadow:0 2px 24px rgba(0,0,0,.55)}
@media(max-width:900px){
  .phero::after{background:linear-gradient(180deg,rgba(10,11,12,.80) 0%,rgba(10,11,12,.90) 55%,var(--black) 100%)}
}
.phero h1{max-width:19ch}
.phero .lede{margin-top:16px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.sec{padding:76px 0}
.sec.tight{padding:54px 0}
.light{background:var(--paper);color:var(--ink)}
.light h2,.light h3{color:var(--ink)}
.light .lede,.light p{color:var(--ink-soft)}
.light .mono{color:var(--gold-dim)}
.plate{background:var(--gun)}
.head{max-width:720px;margin-bottom:44px}
.rule{width:62px;height:3px;background:var(--gold);margin:16px 0 20px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.tile{background:var(--gun);border:1px solid var(--seam);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:28px 26px 30px}
.light .tile{background:#fff;border-color:var(--paper-2)}
.tile .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--gold);margin-bottom:12px}
.tile h3{margin-bottom:8px}
.tile p{color:var(--ash);font-size:.97rem;margin:0}
.light .tile p{color:var(--ink-soft)}

.band{background:var(--gold);color:#fff;padding:52px 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{color:#fff;max-width:18ch}
.band p{color:rgba(255,255,255,.92);margin:8px 0 0;max-width:52ch}
.band .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--seam);font-size:.97rem}
.light .spec th,.light .spec td{border-bottom-color:var(--paper-2)}
.spec th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);white-space:nowrap}
.spec td.p{font-family:var(--display);font-size:1.15rem;color:var(--gold);white-space:nowrap}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chips span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;padding:8px 13px;
  border:1px solid var(--seam);border-radius:var(--r);color:var(--ash)}
.light .chips span{border-color:var(--paper-2);color:var(--ink-soft);background:#fff}

.faq details{border-bottom:1px solid var(--seam);padding:20px 0}
.light .faq details{border-bottom-color:var(--paper-2)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:1.12rem;font-weight:600;
  text-transform:uppercase;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:12px 0 0;color:var(--ash)}
.light .faq p{color:var(--ink-soft)}

.phero .quote-card{background:rgba(16,18,20,.90);backdrop-filter:blur(6px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.quote-card{background:var(--gun);border:1px solid var(--seam);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:28px 26px 30px}
.quote-card h2{font-size:1.5rem}
.quote-card .sub{color:var(--ash);font-size:.95rem;margin:6px 0 18px}
.quote-card label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--smoke);margin:14px 0 6px}
.quote-card input,.quote-card select,.quote-card textarea{width:100%;background:var(--plate);
  border:1px solid var(--seam);border-radius:var(--r);color:var(--bone);padding:12px 13px;
  font-family:var(--body);font-size:1rem}
.quote-card input:focus,.quote-card select:focus,.quote-card textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.quote-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote-card .btn{width:100%;margin-top:18px}
.quote-card .fine{font-size:.84rem;color:var(--smoke);text-align:center;margin-top:12px}
.quote-card .fine a{color:var(--gold)}
.quote-card .consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;
  font-family:var(--body);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ash);line-height:1.5}
.quote-card .consent input{width:auto;margin-top:3px;flex:none;accent-color:var(--gold)}
.quote-card .consent b{color:var(--bone)}
.hp{position:absolute;left:-9999px;opacity:0;height:0}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.phero .split{grid-template-columns:1fr .86fr;gap:54px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.quote-card .row2{grid-template-columns:1fr}}

.cta{background:var(--paper);color:var(--ink);padding:52px 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta h2{color:var(--ink)}
.cta p{color:var(--ink-soft);margin:6px 0 0}
.cta .big{font-family:var(--display);font-size:2.1rem;color:var(--gold)}
.cta .sub{display:block;font-size:.86rem;color:var(--ink-soft)}

footer{background:var(--black);border-top:1px solid var(--seam);padding:56px 0 26px;color:var(--ash);font-size:.93rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:30px;border-bottom:1px solid var(--seam)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer h4{font-size:.92rem;letter-spacing:.1em;color:var(--bone);margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a:hover{color:var(--gold)}
.mark-foot{height:56px;width:auto;margin-bottom:14px}
.fbot{padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--smoke)}

.callbar{display:none}
@media(max-width:720px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:200;
    border-top:1px solid var(--seam)}
  .callbar a{background:var(--gold);color:#fff;text-align:center;padding:15px 8px;
    font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
  .callbar a.alt{background:var(--plate);color:var(--bone)}
  body{padding-bottom:54px}
}
.legal{max-width:820px}
.legal h2{font-size:1.4rem;margin:30px 0 8px}
.legal p,.legal li{color:var(--ash);line-height:1.75}
.legal ul{margin:10px 0 14px 20px}
.legal a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.legal-date{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;color:var(--smoke);margin-bottom:18px}

/* real photography */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.shot{border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;background:var(--gun)}
.light .shot{border-color:var(--paper-2);background:#fff}
.shot img{aspect-ratio:4/3;object-fit:cover;width:100%}
.shot .cap{padding:12px 14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smoke)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feature img{border:1px solid var(--seam);border-radius:var(--r);width:100%}
.light .feature img{border-color:var(--paper-2)}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:26px}}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.light .stats{border-color:var(--paper-2)}
.stat{padding:28px 24px;border-right:1px solid var(--seam);text-align:center}
.light .stat{border-right-color:var(--paper-2);background:#fff}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--gold)}
.stat span{display:block;margin-top:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--smoke)}
@media(max-width:760px){.stat{border-right:0;border-bottom:1px solid var(--seam)}
  .light .stat{border-bottom-color:var(--paper-2)}.stat:last-child{border-bottom:0}}

/* review carousel (dormant until REVIEWS is populated) */
.rtop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.rtop .n{font-family:var(--display);font-size:3rem;line-height:1;color:var(--ink)}
.rtop .of{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.rtop .cnt{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft)}
.rwrap{display:flex;align-items:center;gap:14px}
.rview{overflow:hidden;flex:1}
.rtrack{display:flex;transition:transform .42s cubic-bezier(.4,0,.2,1)}
.rcard{flex:0 0 100%;background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);padding:28px 26px}
.rhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rhead .stars{color:#E8B23A;letter-spacing:.14em}
.gm{width:20px;height:20px}
.rcard p{color:var(--ink-soft);font-size:1.02rem}
.who{display:flex;align-items:center;gap:11px;margin-top:18px}
.who .av{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;display:grid;
  place-items:center;font-family:var(--display);font-size:1rem}
.who b{color:var(--ink);display:block;font-size:.95rem}
.who small{color:var(--smoke);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.rprev,.rnext{width:42px;height:42px;border-radius:50%;border:1px solid var(--paper-2);background:#fff;
  color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;flex:none}
.rprev:hover,.rnext:hover{border-color:var(--gold);color:var(--gold)}
.rdots{display:flex;gap:7px;justify-content:center;margin-top:20px}
.rdots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--paper-2);cursor:pointer;padding:0}
.rdots button[aria-current="true"]{background:var(--gold);width:22px;border-radius:5px}

/* ---------------------------------------------------------------
   MOBILE. Modelled on X-Treme's responsive block.

   The bug this fixes: `.phero .split` is (0,2,0) and the collapse rule
   `@media(max-width:900px){.split{...}}` is only (0,1,0), so the media
   query LOST and the hero stayed two-column on a 375px screen - the
   quote card squeezed into a sliver and ran off the right edge.
   Every override below is written at or above the specificity of the
   rule it is beating, and sits last in the file so source order helps
   too. Same class of bug as .head h2 beating .light h2 on X-Treme.
   --------------------------------------------------------------- */
@media(max-width:1000px){
  .split,.phero .split{grid-template-columns:1fr;gap:38px}
  .phero h1{font-size:clamp(2rem,6.4vw,2.9rem);max-width:100%}
  .phero .wrap{padding-top:52px;padding-bottom:56px}
  .feature,.phero .feature{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  h1{font-size:clamp(1.85rem,7.4vw,2.5rem)}
  h2{font-size:clamp(1.5rem,5.6vw,2rem)}
  .sec{padding:54px 0}
  .sec.tight{padding:40px 0}
  .quote-card{padding:22px 18px 24px}
  .quote-card h2{font-size:1.3rem}
  .quote-card .row2{grid-template-columns:1fr;gap:0}
  .tiles,.shots,.stats{grid-template-columns:1fr}
  .band .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .acts{flex-direction:column;align-items:stretch}
  .acts .btn{width:100%;text-align:center;justify-content:center}
}
/* nothing may push the page sideways */
html,body{max-width:100%;overflow-x:hidden}
img,video,table,pre{max-width:100%}

/* Spec table on a phone: five columns cannot fit 375px, and letting it
   overflow just clips the price off the right edge. Stack each machine
   into its own block instead - no sideways scroll, nothing hidden. */
@media(max-width:640px){
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%}
  .spec thead{display:none}
  .spec tr{padding:16px 0;border-bottom:1px solid var(--seam)}
  .light .spec tr{border-bottom-color:var(--paper-2)}
  .spec td{border:0;padding:2px 0;font-size:.95rem}
  .spec td:first-child{font-size:1.08rem;margin-bottom:4px}
  .spec td:first-child b{font-family:var(--display);letter-spacing:.01em}
  .spec td.p{font-size:1.25rem;margin-top:8px}
  .spec tr:last-child{border-bottom:0}
}