/* Charlie Hinds Wrecker Service - site stylesheet
   Rebuilt 2026-09-29 ("truck door" redesign). Previous stylesheet: styles.css.pre-redesign-2026-09-29.bak
*/
/* Charlie Hinds - "truck door" design system
   Colour: CH truck orange for every call-to-action and accent (Richard 2026-09-29), logo blue, door-lettering navy.
   Type: Barlow Condensed set like vehicle lettering, Barlow for reading.
   One bold thing per screen; no eyebrow labels, no emoji, no numbered lists that aren't sequences. */
:root{
  --navy:#0C2242; --navy-deep:#081729; --blue:#1B3FD8; --blue-soft:#A9BBFF;
  --orange:#E85000; --white:#FFFFFF; --steel:#EEF1F5; --line:#C9D1DD; --ink:#0C2242; --muted:#2E3E5C;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--ink);background:var(--white);font-size:18px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,4.4vw,58px);line-height:.98;letter-spacing:-.005em}
h3{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.05}
.lead{font-size:20px;max-width:36em;color:var(--muted);margin-top:14px}

/* header */
.top{background:var(--navy-deep);color:var(--white);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:26px;padding-top:12px;padding-bottom:12px;max-width:1320px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:auto}
.brand span{font-family:var(--display);font-weight:700;font-size:21px}
.top nav{margin-left:auto;display:flex;gap:24px}
.top nav a{font-family:var(--display);font-weight:600;font-size:18px;text-decoration:none;color:#DCE3F2}
.top nav a:hover{color:var(--white)}
.phone-btn{font-family:var(--display);font-weight:700;font-size:19px;background:var(--orange);color:var(--white);text-decoration:none;padding:9px 16px;white-space:nowrap}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);min-height:620px;background:var(--navy)}
.door{color:var(--white);padding:64px 44px 48px;max-width:640px;margin-left:auto;width:100%;display:flex;flex-direction:column;justify-content:center}
.door h1{font-family:var(--display);font-weight:800;font-size:clamp(56px,6.2vw,92px);line-height:.92}
.door h1 span{display:block;font-weight:700;font-size:.46em;line-height:1.05;margin-top:8px;letter-spacing:.02em}
.door .towns{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.9vw,26px);color:var(--blue-soft);margin-top:12px}
.call{display:inline-block;margin-top:32px;text-decoration:none;color:var(--white);align-self:flex-start}
.call .num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(52px,6vw,88px);line-height:1;border-bottom:8px solid var(--orange);padding-bottom:6px}
.call .note{display:block;font-size:17px;margin-top:12px;color:#DCE3F2}
.call:hover .num{color:#FFE3D1}
.door .say{font-size:18px;max-width:34em;margin-top:26px;color:#E6EBF5}
.plate{margin-top:28px;align-self:flex-start;border:2px solid #3A4E73;padding:12px 16px;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.35;color:#DCE3F2}
.plate strong{color:var(--white);font-weight:700}
.hero-photo{position:relative;min-height:420px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.tape{height:16px;background:repeating-linear-gradient(-45deg,var(--orange) 0 18px,var(--white) 18px 36px)}

/* services: the wrecker classes on a weight scale */
.classes{padding:96px 0 40px}
.scale{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid var(--navy)}
.cls{padding:28px 28px 32px 0;position:relative}
.cls+.cls{padding-left:28px;border-left:1px solid var(--line)}
.cls .tag{font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:var(--blue)}
.cls .lbs{font-family:var(--display);font-weight:700;font-size:22px;margin-top:4px}
.cls h3{margin-top:18px}
.cls p{margin-top:8px;color:var(--muted)}
.cls:nth-child(2) .tag{color:var(--navy)}
.cls:nth-child(3) .tag{color:var(--orange)}
.bar{height:10px;margin-top:-4px;background:linear-gradient(90deg,var(--blue) 0 33.33%,var(--navy) 33.33% 66.66%,var(--orange) 66.66%)}
.also{padding:32px 0 96px}
.also-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.also-head img{width:100%;height:280px;object-fit:cover}
.also-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:22px}
.also-item{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.also-item h3{font-size:22px}
.also-item p{color:var(--muted);font-size:17px}

/* the door: real lettering photo + why */
.why{background:var(--steel);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.why-photo{min-height:520px;position:relative}
.why-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why-copy{padding:80px 56px;max-width:620px}
.why-copy blockquote{font-family:var(--display);font-weight:800;font-size:clamp(40px,4vw,56px);line-height:1;color:var(--navy)}
.why-copy ul{list-style:none;margin-top:28px}
.why-copy li{padding:14px 0;border-top:1px solid var(--line)}
.why-copy li strong{font-family:var(--display);font-weight:700;font-size:22px;display:block}
.why-copy li span{color:var(--muted)}

/* yards */
.yards{padding:96px 0}
.yard-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;margin-top:40px}
.yard{background:var(--white);border:1px solid var(--line)}
.yard img{width:100%;height:300px;object-fit:cover}
.yard .body{padding:24px}
.yard .kind{font-family:var(--display);font-weight:700;font-size:18px;color:var(--blue)}
.yard address{font-style:normal;font-size:20px;margin-top:6px}
.yard .hrs{color:var(--muted);margin-top:4px}
.yard .links{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap}
.yard .links a{font-family:var(--display);font-weight:700;font-size:19px;color:var(--blue)}
.yard-note{margin-top:24px;padding:18px 22px;border-left:6px solid var(--orange);background:var(--steel)}
.area{margin-top:48px}
.area p{max-width:48em}
.area .towns-list{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.5;margin-top:10px;color:var(--navy)}

.where{position:relative;min-height:460px;display:flex;align-items:center;color:var(--white);overflow:hidden}
.where img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.where::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(8,23,41,.92) 0%,rgba(8,23,41,.8) 36%,rgba(8,23,41,.2) 62%,rgba(8,23,41,0) 80%);z-index:1}
.where-copy{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;padding:64px 28px;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.where-copy>*{max-width:520px}
.where-copy h2{color:var(--white)}
.where-copy p{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.45;max-width:30em;margin-top:14px;color:#E6EBF5}
/* who we work with */
.work{background:var(--navy);color:var(--white);padding:96px 0}
.work h2{color:var(--white)}
.work .lead{color:#C9D3E6}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:40px}
.work-grid div{padding:18px 0;border-top:1px solid #2E4470}
.work-grid strong{font-family:var(--display);font-weight:700;font-size:22px;display:block}
.work-grid span{color:#C9D3E6;font-size:17px}

/* reviews */
.reviews{padding:96px 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.quotes figure{border-top:4px solid var(--orange);padding-top:18px}
.quotes blockquote{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.1}
.quotes figcaption{margin-top:10px;color:var(--muted);font-size:16px}

/* faq */
.faq{padding:0 0 96px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-family:var(--display);font-weight:700;font-size:24px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--orange);font-weight:800}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:10px;color:var(--muted);max-width:52em}
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:56px}

/* customers */
.cust{background:var(--steel);padding:80px 0}
.cust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.cust-grid a{display:block;background:var(--white);border:1px solid var(--line);padding:22px;text-decoration:none}
.cust-grid a strong{font-family:var(--display);font-weight:700;font-size:24px;display:block;color:var(--navy)}
.cust-grid a span{color:var(--muted);font-size:16px}
.cust-grid a:hover{border-color:var(--blue)}
.pay-line{margin-top:28px;font-size:17px}
.pay-line b{font-family:var(--display);font-size:20px}

/* closing call + footer */
.last{background:var(--orange);color:var(--white);text-align:center;padding:64px 20px}
.last p{font-family:var(--display);font-weight:700;font-size:28px}
.last a{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(56px,8vw,104px);line-height:1;color:var(--white);text-decoration:none;margin-top:6px}
footer{background:var(--navy-deep);color:#C9D3E6;padding:56px 0 28px;font-size:16px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer strong{font-family:var(--display);font-size:22px;color:var(--white);display:block;margin-bottom:8px}
footer a{color:#DCE3F2}
footer ul{list-style:none}
footer li{padding:3px 0}
.fine{margin-top:36px;border-top:1px solid #1F3257;padding-top:18px;font-size:14px}
.mcall{display:none}


@media (max-width:900px){
  body{font-size:17px}
  .top nav{display:none}.top .wrap{gap:12px;padding-left:16px;padding-right:16px}.brand span{font-size:17px}.brand img{width:38px}
  .hero{grid-template-columns:1fr;min-height:0}.hero-photo{order:-1;min-height:0;aspect-ratio:3/2}.door{padding:30px 22px 34px;max-width:none}
  .scale{grid-template-columns:1fr}.cls,.cls+.cls{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .bar{display:none}
  .also-grid{grid-template-columns:1fr}.also-head{grid-template-columns:1fr;gap:16px}.also-head img{height:220px}.also-item{grid-template-columns:1fr;gap:4px}
  .why{grid-template-columns:1fr}.why-photo{min-height:0;aspect-ratio:4/3}.why-copy{padding:40px 22px}
  .yard-grid,.work-grid,.quotes,.faq-grid,.foot{grid-template-columns:1fr}
  .cust-grid{grid-template-columns:1fr 1fr}
  .where{min-height:0;display:block}.where img{position:static;height:220px}.where::before{display:none}.where-copy{background:var(--navy-deep);padding:32px 22px}
  .wrap{padding:0 22px}
  .classes,.yards,.work,.reviews{padding-top:64px;padding-bottom:64px}
  .mcall{display:block;position:fixed;left:0;right:0;bottom:0;background:var(--orange);color:var(--white);text-align:center;font-family:var(--display);font-weight:800;font-size:22px;padding:14px;text-decoration:none;z-index:30}
  footer{padding-bottom:90px}
}

/* ═══ INNER PAGES (pay, feedback, auctions) ═══════════════════ */
.page-head{background:var(--navy);color:var(--white);padding:72px 0 64px}
.page-head h1{font-family:var(--display);font-weight:800;font-size:clamp(46px,5.4vw,76px);line-height:.95}
.page-head p{font-size:20px;max-width:38em;margin-top:16px;color:#DCE3F2}
.page-head p a{color:var(--white)}
.band{padding:80px 0}
.band.alt{background:var(--steel)}
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.pay-card{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--orange);padding:22px}
.pay-card .nm{font-family:var(--display);font-weight:700;font-size:20px;color:var(--muted)}
.pay-card .hd{font-family:var(--display);font-weight:800;font-size:28px;line-height:1.1;margin-top:4px;word-break:break-word}
.pay-card .hd.small{font-size:19px}
.pay-card .sub{font-size:16px;color:var(--muted);margin-top:8px}
.pay-card .sub a{color:var(--blue);font-weight:600}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.doc{display:block;background:var(--white);border:1px solid var(--line);padding:22px 24px;text-decoration:none}
.doc:hover{border-color:var(--blue)}
.doc strong{font-family:var(--display);font-weight:700;font-size:24px;display:block;color:var(--navy)}
.doc span{color:var(--muted);font-size:16px}
.doc em{font-style:normal;font-family:var(--display);font-weight:700;color:var(--blue);display:inline-block;margin-top:8px}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.contact-list{margin-top:24px}
.contact-list p{padding:10px 0;border-top:1px solid var(--line)}
.contact-list strong{font-family:var(--display);font-size:19px;display:block}
.contact-list a{color:var(--blue)}
.callout{margin-top:24px;padding:16px 20px;border-left:6px solid var(--orange);background:var(--steel);font-size:17px}
.band.alt .callout{background:var(--white)}
.contact-form{background:var(--white);border:1px solid var(--line);padding:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{margin-bottom:16px}
.form-field label,.rating-fieldset legend{display:block;font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:6px}
.form-field input,.form-field select,.form-field textarea{width:100%;font:inherit;font-size:17px;padding:11px 12px;border:1px solid #9AA6BA;background:var(--white);color:var(--ink)}
.form-field textarea{min-height:130px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.form-checkbox{display:flex;gap:10px;align-items:flex-start}
.form-checkbox input{width:auto;margin-top:6px}
.form-checkbox label{font-family:var(--body);font-weight:400;font-size:16px}
.form-warning{font-size:15px;color:#7A2E00;background:#FFF1E8;border-left:4px solid var(--orange);padding:10px 14px;margin:0 0 16px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-submit{font-family:var(--display);font-weight:800;font-size:22px;background:var(--orange);color:var(--white);border:0;padding:14px 26px;cursor:pointer}
.form-submit:hover{background:#C84300}
.form-submit:disabled{opacity:.6;cursor:wait}
.form-thanks{display:none;margin-top:16px;padding:14px 16px;background:#E8F4EA;border-left:4px solid #2E7D32;font-size:17px}
.form-thanks.show{display:block}
.rating-fieldset{border:0;margin:0 0 16px}
.star-rating{display:inline-flex;flex-direction:row-reverse;gap:4px}
.star-rating input{position:absolute;opacity:0;width:1px;height:1px}
.star-rating label{font-size:34px;color:#C9D1DD;cursor:pointer;line-height:1}
.star-rating input:checked~label,.star-rating label:hover,.star-rating label:hover~label{color:var(--orange)}
.star-rating input:focus-visible+label{outline:3px solid var(--blue)}
.review-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.btn-line{font-family:var(--display);font-weight:700;font-size:19px;border:2px solid var(--navy);color:var(--navy);padding:10px 16px;text-decoration:none}
.btn-line:hover{background:var(--navy);color:var(--white)}
.auction-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid var(--navy);margin-top:28px}
.auction-facts div{padding:20px 20px 20px 0}
.auction-facts div+div{padding-left:20px;border-left:1px solid var(--line)}
.auction-facts span{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--muted)}
.auction-facts strong{font-family:var(--display);font-weight:800;font-size:30px}
.auction-table{width:100%;border-collapse:collapse;margin-top:28px;background:var(--white)}
.auction-table th,.auction-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.auction-table th{font-family:var(--display);font-weight:700;font-size:19px;background:var(--navy);color:var(--white)}
.auction-table .col-num{width:60px}
.auction-empty-row td{color:var(--muted);font-style:italic}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:32px;counter-reset:s}
.steps li{list-style:none;border-top:4px solid var(--orange);padding-top:14px}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--display);font-weight:800;font-size:44px;color:var(--orange);line-height:1}
.steps strong{font-family:var(--display);font-weight:700;font-size:22px;display:block;margin-top:6px}
.steps span{color:var(--muted);font-size:17px}
.top nav a[aria-current="page"]{color:var(--white);border-bottom:3px solid var(--orange)}
@media (max-width:900px){
  .pay-grid{grid-template-columns:1fr 1fr}.docs,.split,.form-row,.steps,.auction-facts{grid-template-columns:1fr}
  .auction-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .band,.page-head{padding:48px 0}
  .contact-form{padding:20px}
}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:var(--white);padding:10px 16px;font-family:var(--display);font-weight:700;z-index:100}
.skip:focus{left:12px;top:12px}