/* Reed's Mobile Services — light, photo-forward design system */
:root{
  --gold:#D9941F; --gold-d:#B97C12; --ink:#1A1712; --ink-soft:#5A554C; --ink-faint:#8A8478;
  --cream:#F7F3EA; --cream-2:#EFE9DB; --paper:#FFFFFF; --line:#E6DECE; --dark:#171410;
  --maxw:1180px; --r:12px; --shadow:0 1px 2px rgba(26,23,18,.05), 0 14px 34px rgba(26,23,18,.07);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--cream); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{text-decoration:none; color:inherit}
img{display:block; max-width:100%}
h1,h2,h3{line-height:1.05; letter-spacing:-.02em; font-weight:800}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.kick{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d)}
.kick::before{content:""; width:28px; height:2px; background:var(--gold)}
[hidden]{display:none !important}
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:16px; padding:15px 26px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:.15s; border:1.6px solid transparent}
.btn-gold{background:var(--gold); color:#fff} .btn-gold:hover{background:var(--gold-d)}
.btn-out{background:var(--paper); color:var(--ink); border-color:var(--line)} .btn-out:hover{border-color:var(--ink)}
.btn-lg{padding:17px 30px; font-size:18px}

/* nav */
nav.bar{display:flex; align-items:center; justify-content:space-between; padding:14px clamp(18px,4vw,56px); background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.brand{display:flex; align-items:center; gap:11px}
.brand img{height:46px; width:auto}
.brand b{font-weight:800; font-size:19px; letter-spacing:-.02em; display:block}
.brand small{display:block; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-d); margin-top:2px}
.nav-links{display:none; gap:28px; font-weight:600; font-size:15px; color:var(--ink-soft)}
@media(min-width:980px){ .nav-links{display:flex} }
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; align-items:center; gap:16px}
.nav-phone{display:none; font-weight:800; font-size:15px}
@media(min-width:620px){ .nav-phone{display:inline} }

/* hero (split) */
.hero{display:grid; grid-template-columns:1fr; min-height:calc(100vh - 76px)}
@media(min-width:880px){ .hero{grid-template-columns:1.05fr .95fr} }
.hero .htext{display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,6vw,76px)}
.hero h1{font-size:clamp(40px,5.6vw,68px); font-weight:900; margin:20px 0 0}
.hero h1 .g{color:var(--gold-d)}
.hero .sub{font-size:clamp(17px,1.5vw,20px); font-weight:500; color:var(--ink-soft); max-width:46ch; margin:22px 0 32px}
.hero .cta{display:flex; gap:13px; flex-wrap:wrap}
.hero .strip{display:flex; gap:14px 26px; flex-wrap:wrap; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); font-weight:600; font-size:15px}
.hero .strip span{display:flex; align-items:center; gap:9px}
.hero .strip svg{color:var(--gold-d); flex:none}
.hero .hphoto{position:relative; min-height:48vh; background:#000 center 28%/cover no-repeat}
@media(min-width:880px){ .hero .hphoto{min-height:auto} }

/* sections */
section{padding:clamp(56px,8vw,90px) 0}
.sec-head{max-width:60ch; margin-bottom:42px}
.sec-head h2{font-size:clamp(30px,4.2vw,46px); margin:14px 0 14px}
.sec-head p{color:var(--ink-soft); font-size:18px}

/* what we fix */
.fix-grid{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:620px){ .fix-grid{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .fix-grid{grid-template-columns:1fr 1fr 1fr} .fix-grid .fix-mid{grid-column:2} }
.fix{display:flex; gap:15px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; font-weight:600; transition:.15s}
#fix .fix:hover{border-color:var(--gold); box-shadow:0 4px 18px rgba(0,0,0,.06)}
.fix svg{color:var(--gold-d); flex:none}
.fix .m-ico{width:38px; height:38px; background:var(--gold-tint,#f3e7d0); border-radius:10px; padding:6px; box-sizing:border-box}

/* brand carousel (marquee) */
.brands-band{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 0; overflow:hidden}
.brands-cap{text-align:center; color:var(--ink-faint); font-weight:600; font-size:14px; margin-bottom:24px}
.marquee{display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.mtrack{display:flex; align-items:center; gap:56px; padding-right:56px; animation:scroll 46s linear infinite; flex:none}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack img{height:46px; width:auto; object-fit:contain; opacity:.85; transition:opacity .2s}
.mtrack img:hover{opacity:1}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .mtrack{animation:none} }

/* feature row (image + text) */
.feature{display:grid; gap:40px; grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .feature{grid-template-columns:1fr 1fr; gap:60px} .feature.rev .fimg{order:2} }
.feature h2{font-size:clamp(28px,3.8vw,42px); margin-bottom:18px}
.feature p{color:var(--ink-soft); margin-bottom:14px}
.feature .points{list-style:none; display:grid; gap:12px; margin-top:22px}
.feature .points li{display:flex; gap:11px; align-items:flex-start; font-weight:600}
.feature .points svg{color:var(--gold-d); flex:none; margin-top:3px}
.fimg{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; background:#000}
.fimg img{width:100%; height:100%; object-fit:cover}

/* dark band (limp mode) */
.band{background:var(--dark); color:var(--cream)}
.band .kick{color:var(--gold)}
.band h2{color:#fff; font-size:clamp(28px,4vw,44px); margin:14px 0 16px}
.band p{color:#CFC6B6; font-size:18px; max-width:60ch}
.band .note{margin-top:18px; font-size:14px; color:#9B9384}
.band .blink{margin-top:26px}

/* about (Tyler) */
.about{display:grid; gap:40px; grid-template-columns:1fr; align-items:center}
@media(min-width:880px){ .about{grid-template-columns:.85fr 1.15fr; gap:56px} }
.about .aimg{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; background:#000}
.about .aimg img{width:100%; height:100%; object-fit:cover}
.about h2{font-size:clamp(28px,4vw,44px); margin-bottom:18px}
.about p{color:var(--ink-soft); margin-bottom:14px}
.about .badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.about .badge{display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-weight:700; font-size:14px}
.about .badge svg{color:var(--gold-d)}

/* gallery */
.gallery{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .gallery{grid-template-columns:repeat(4,1fr)} }
.gallery figure{border-radius:var(--r); overflow:hidden; aspect-ratio:1; background:#000; box-shadow:var(--shadow)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.gallery figure:hover img{transform:scale(1.05)}

/* review */
.review{max-width:760px; margin:0 auto; text-align:center}
.review .stars{color:var(--gold); font-size:22px; letter-spacing:3px}
.review blockquote{font-size:clamp(20px,2.4vw,27px); font-weight:600; line-height:1.4; margin:18px 0 20px; letter-spacing:-.01em}
.review .who{font-weight:700; color:var(--ink-soft); font-size:15px}

/* reviews grid */
.rev-grid{display:grid; gap:16px; grid-template-columns:1fr; max-width:900px; margin:0 auto}
@media(min-width:680px){ .rev-grid{grid-template-columns:1fr 1fr} }
.rev-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.rev-card .stars{color:var(--gold); font-size:16px; letter-spacing:2px}
.rev-card p{font-size:16px; line-height:1.5; margin:12px 0 16px; font-weight:500; color:var(--ink)}
.rev-card .who{font-weight:700; font-size:14px}
.rev-card .who span{color:var(--ink-faint); font-weight:600}

/* faq */
.faq{display:grid; gap:12px; max-width:840px; margin:0 auto}
.faq details{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:0 22px}
.faq details[open]{border-color:var(--gold)}
.faq summary{cursor:pointer; list-style:none; padding:19px 0; font-weight:700; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold-d); font-size:24px; font-weight:400; line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:-2px 0 19px; color:var(--ink-soft); font-size:15.5px}

/* equipment page */
.eq-intro{max-width:760px}
.eq-intro h1{font-size:clamp(34px,5vw,56px); margin:14px 0 16px}
.eq-intro p{color:var(--ink-soft); font-size:18px; margin-bottom:14px}
.eq-list{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:820px){ .eq-list{grid-template-columns:1fr 1fr} }
.eq-brand{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; box-shadow:var(--shadow)}
.eq-head{display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:16px}
.eq-head img{height:34px; width:auto; max-width:130px; object-fit:contain; flex:none}
.eq-head h2{font-size:21px; line-height:1.1}
.eq-head .mach{display:block; color:var(--ink-faint); font-size:13px; font-weight:600; margin-top:3px}
.eq-prob{margin-bottom:15px}
.eq-prob:last-child{margin-bottom:0}
.eq-prob b{display:block; font-size:15.5px; margin-bottom:3px; color:var(--ink)}
.eq-prob p{color:var(--ink-soft); font-size:14.5px; line-height:1.5}
.eq-prob .fix{display:inline; background:none; border:0; padding:0; margin:0; color:var(--gold-d); font-weight:700}

/* CTA strip */
.ctas{background:var(--gold); color:#fff}
.ctas .wrap{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-top:50px; padding-bottom:50px}
.ctas h2{font-size:clamp(26px,3.6vw,40px); color:#fff}
.ctas p{color:rgba(255,255,255,.92); margin-top:6px}
.ctas .btn-dark{background:var(--dark); color:#fff} .ctas .btn-dark:hover{background:#000}
.ctas .btn-wout{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)} .ctas .btn-wout:hover{background:rgba(255,255,255,.15)}

/* footer */
footer{background:var(--dark); color:#B7AE9E; padding:56px 0 30px}
footer .cols{display:grid; gap:32px; grid-template-columns:1fr}
@media(min-width:760px){ footer .cols{grid-template-columns:1.5fr 1fr 1fr} }
footer img{height:58px; width:auto; margin-bottom:14px}
footer h4{color:var(--cream); font-size:16px; margin-bottom:14px; font-weight:700}
footer a:hover{color:var(--gold)}
footer ul{list-style:none} footer li{margin-bottom:9px; font-size:15px}
footer .big-phone{font-size:25px; color:#fff; font-weight:800}
.legal{border-top:1px solid rgba(247,243,234,.13); margin-top:40px; padding-top:22px; font-size:13px; color:#80796B; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* center call-to-action buttons on mobile */
@media(max-width:600px){
  .hero .cta, .ctas .cta, .submit-row{ justify-content:center }
  .blink{ text-align:center }
  .ctas .wrap{ justify-content:center; text-align:center }
}
/* keep the nav brand tidy on small phones */
@media(max-width:480px){
  .brand img{ height:40px }
  .brand b{ font-size:15px; line-height:1.12 }
  .brand small{ display:none }
  nav.bar{ padding-left:16px; padding-right:16px }
}

/* ===== forms (request / contact pages) ===== */
.form-band{background:var(--cream-2)}
.form-shell{display:grid; gap:40px; grid-template-columns:1fr}
@media(min-width:920px){ .form-shell{grid-template-columns:.82fr 1.18fr; gap:56px} }
.form-aside h1{font-size:clamp(30px,4.4vw,48px); margin-bottom:16px}
.form-aside p{color:var(--ink-soft); margin-bottom:22px}
.form-aside .reassure{list-style:none; margin-bottom:26px}
.form-aside .reassure li{display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; font-weight:600}
.form-aside .reassure svg{color:var(--gold-d); flex:none; margin-top:3px}
.callout{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px; padding:16px 18px; font-size:15px; color:var(--ink-soft)}
.callout b{color:var(--ink)}
form.req{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow)}
@media(min-width:560px){ form.req{padding:34px} }
.field{margin-bottom:18px}
.row2{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:540px){ .row2{grid-template-columns:1fr 1fr} }
label{display:block; font-weight:700; font-size:14px; margin-bottom:7px}
label .req-star{color:var(--gold-d)} label .opt{color:var(--ink-faint); font-weight:500}
input[type=text],input[type=tel],input[type=email],textarea{width:100%; padding:13px 14px; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:10px}
input:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,148,31,.16)}
textarea{resize:vertical; min-height:96px}
.hint{font-size:13px; color:var(--ink-faint); margin-top:6px}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chip span{display:inline-block; padding:9px 15px; border:1.5px solid var(--line); border-radius:999px; font-size:14px; font-weight:600; background:#fff; cursor:pointer}
.chip input:checked + span{background:var(--ink); color:#fff; border-color:var(--ink)}
.radios{display:grid; gap:10px}
.radio{display:flex; align-items:center; gap:11px; padding:13px 15px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; background:#fff; font-weight:600; font-size:15px}
.radio:hover{border-color:var(--gold)} .radio.sel{border-color:var(--gold); background:var(--cream)}
.radio input{accent-color:var(--gold); width:18px; height:18px}
.filebox{border:1.5px dashed var(--line); border-radius:10px; padding:18px; text-align:center; background:#fff; cursor:pointer}
.filebox:hover{border-color:var(--gold)} .filebox input{display:none}
.filebox .fb-main{font-weight:700; font-size:15px} .filebox .fb-sub{font-size:13px; color:var(--ink-faint); margin-top:4px}
.filelist{font-size:13.5px; color:var(--ink-soft); margin-top:10px}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.submit-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px}
.formmsg{font-size:15px; font-weight:600; margin-top:16px; display:none}
.formmsg.ok{display:block; color:#2e7d32} .formmsg.err{display:block; color:#c0392b}
.wiz-progress{margin-bottom:24px}
.wiz-bar{height:6px; background:var(--line); border-radius:99px; overflow:hidden}
.wiz-bar i{display:block; height:100%; width:50%; background:var(--gold); border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.wiz-label{display:inline-block; margin-top:9px; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint)}
.wiz-step h3.wiz-h{font-size:21px; margin-bottom:18px}
.wiz-nav{display:flex; gap:12px; align-items:center; margin-top:8px}
.wiz-nav .spacer{flex:1}
.btn-back{background:transparent; color:var(--ink-soft); border-color:var(--line)} .btn-back:hover{color:var(--ink); border-color:var(--ink-soft)}
.page-top{padding:54px 0 0}