/* ===========================================================
   RR MOTOR SERVICES LLC — Brand Stylesheet
   Signal Red #E63027 / Charcoal Black #1A1A1A
   Fonts: Anton (display) · Oswald (subhead) · Rajdhani (labels) · Inter (body)
   =========================================================== */

:root {
  --red: #E63027;
  --red-deep: #C0202B;
  --charcoal: #1A1A1A;
  --black: #0D0D0D;
  --steel: #232323;
  --steel-2: #2D2D2D;
  --line: #3A3A3A;
  --smoke: #9A9A9A;
  --cream: #F4F1EC;
  --white: #FFFFFF;

  --maxw: 1140px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--black);
  color: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* tire-tread + grain atmosphere */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 9px);
  pointer-events: none; z-index: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }

/* ---------- TYPE ---------- */
.eyebrow {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--red);
}
h1, h2, h3 { font-family: 'Anton', sans-serif; font-weight: 400; line-height: .98; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2.7rem, 9vw, 5.4rem); }
h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.sub { font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
p { color: #D8D4CC; }
.lead { font-size: 1.12rem; color: #E8E4DC; max-width: 56ch; }

.red { color: var(--red); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .98rem;
  padding: 15px 26px; border: 2px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background .18s, color .18s, border-color .18s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn svg { width: 18px; height: 18px; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { border-color: var(--cream); color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--black); transform: translateY(-2px); }

/* ---------- HEADER ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,13,13,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark {
  font-family: 'Anton', sans-serif; font-size: 1.15rem; letter-spacing: .02em;
  text-transform: uppercase; color: #fff;
}
.brand .mark b { color: var(--red); }
.brand .tag { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.22em; color: var(--smoke); display:block; margin-top:-3px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a.link { font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:#cfcbc3; transition:color .15s; }
.nav a.link:hover { color: var(--red); }
.hdr .btn { padding: 10px 18px; font-size: .82rem; }
.burger { display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; }
.burger span { width:26px; height:2px; background:#fff; display:block; }

/* ---------- HERO ---------- */
.hero { position: relative; padding: 96px 0 84px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(230,48,39,.22), transparent 60%),
    linear-gradient(180deg, #141414, var(--black)); }
.hero .stripe { position:absolute; top:0; right:0; width:42%; height:100%;
  background: repeating-linear-gradient(135deg, rgba(230,48,39,.05) 0 10px, transparent 10px 26px);
  -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
.hero h1 { margin: 16px 0 18px; }
.hero h1 .em { color: var(--red); }
.hero .lead { margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.trust { display:flex; flex-wrap:wrap; gap: 10px 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.trust span { font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; font-size:.92rem; color:#cfcbc3; display:flex; align-items:center; gap:8px; }
.trust span i { color: var(--red); font-style: normal; font-weight: 700; }

/* reveal */
.reveal { opacity:0; transform: translateY(22px); animation: rise .7s var(--ease) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}

/* ---------- SECTIONS ---------- */
section { padding: 78px 0; position: relative; }
.sec-head { margin-bottom: 42px; max-width: 60ch; }
.sec-head h2 { margin: 12px 0 0; }

/* WHY cards */
.cards { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.card { background: linear-gradient(180deg, var(--steel), var(--charcoal)); border:1px solid var(--line);
  padding: 26px 22px; transition: transform .2s var(--ease), border-color .2s; }
.card:hover { transform: translateY(-4px); border-color: var(--red); }
.card .ic { width:42px; height:42px; color: var(--red); margin-bottom: 14px; }
.card h3 { color:#fff; margin-bottom: 8px; font-size: 1.05rem; }
.card p { font-size: .94rem; }

/* SERVICES */
#services { background: linear-gradient(180deg, var(--black), #121212); }
.svc { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.svc .item { display:flex; gap:14px; align-items:flex-start; background: var(--steel);
  border:1px solid var(--line); padding: 20px; transition: border-color .2s, transform .2s; }
.svc .item:hover { border-color: var(--red); transform: translateY(-3px); }
.svc .item .ic { flex:0 0 auto; width: 34px; height:34px; color: var(--red); }
.svc .item h3 { color:#fff; font-size: 1rem; margin-bottom: 3px; }
.svc .item p { font-size: .88rem; color: var(--smoke); }

/* STEPS */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; counter-reset: s; }
.step { position:relative; padding: 30px 24px; background: var(--charcoal); border:1px solid var(--line); }
.step::before { counter-increment: s; content: counter(s); font-family:'Anton',sans-serif;
  font-size: 3.4rem; color: var(--red); line-height: .8; display:block; margin-bottom: 12px; }
.step h3 { color:#fff; margin-bottom: 8px; }
.step p { font-size: .95rem; }

/* AREA */
#area { background:
   radial-gradient(700px 380px at 15% 0%, rgba(230,48,39,.16), transparent 60%), #101010; }
.area-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; }
.area-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip { font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.04em; font-size:.9rem;
  border:1px solid var(--line); padding:8px 14px; color:#d6d2ca; }
.area-card { background: var(--steel); border:1px solid var(--line); padding: 30px; }
.area-card .big { font-family:'Anton',sans-serif; font-size:2rem; color:#fff; }

/* REVIEWS */
.rev { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-bottom: 30px; }
.quote { background: var(--charcoal); border:1px solid var(--line); padding: 24px; }
.stars { color: var(--red); letter-spacing:2px; margin-bottom:10px; }
.quote p { font-style: italic; color:#E8E4DC; }
.quote .who { font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:var(--smoke); margin-top:12px; }
.note { font-size:.82rem; color: #6f6f6f; font-style: italic; }

/* FAQ */
#faq { background: linear-gradient(180deg, #121212, var(--black)); }
.faq details { border:1px solid var(--line); background: var(--charcoal); margin-bottom: 10px; }
.faq summary { list-style:none; cursor:pointer; padding: 18px 20px; font-family:'Oswald',sans-serif;
  text-transform:uppercase; letter-spacing:.04em; font-weight:500; color:#fff; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--red); font-size:1.4rem; font-family:'Anton',sans-serif; }
.faq details[open] summary::after { content:"–"; }
.faq .ans { padding: 0 20px 20px; color:#cfcbc3; font-size:.96rem; }

/* CONTACT */
#contact { background:
   radial-gradient(800px 420px at 85% 110%, rgba(230,48,39,.18), transparent 60%), #0f0f0f; }
.contact-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: 40px; }
.contact-info .row { display:flex; align-items:center; gap:12px; margin: 14px 0; }
.contact-info .row svg { width:22px; height:22px; color:var(--red); flex:0 0 auto; }
.contact-info .row a, .contact-info .row span { font-family:'Oswald',sans-serif; letter-spacing:.03em; font-size:1.05rem; color:#fff; }
.form { background: var(--steel); border:1px solid var(--line); padding: 28px; }
.form .field { margin-bottom: 14px; }
.form label { font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.74rem; color:var(--smoke); display:block; margin-bottom:6px; }
.form input, .form textarea { width:100%; background: var(--black); border:1px solid var(--line); color:#fff;
  padding: 12px 14px; font-family:'Inter',sans-serif; font-size:.95rem; }
.form input:focus, .form textarea:focus { outline:none; border-color: var(--red); }
.consent { display:flex; gap:10px; align-items:flex-start; margin: 8px 0 18px; }
.consent input { width:18px; height:18px; margin-top:3px; flex:0 0 auto; accent-color: var(--red); }
.consent label { font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-size:.78rem; color:#b9b5ad; line-height:1.5; }
.consent a { color: var(--red); text-decoration: underline; }
.form .btn { width:100%; justify-content:center; }
.form-msg { display:none; margin-top:14px; padding:12px; font-size:.9rem; border:1px solid; }
.form-msg.ok { display:block; border-color:#2f7d32; color:#7ddc80; background:rgba(47,125,50,.12); }
.form-msg.err { display:block; border-color:var(--red); color:#ff8a82; background:rgba(230,48,39,.1); }

/* FOOTER */
footer { background: var(--black); border-top: 1px solid var(--line); padding: 40px 0; }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
footer .mark { font-family:'Anton',sans-serif; text-transform:uppercase; color:#fff; }
footer .mark b{color:var(--red);}
footer .links { display:flex; gap:20px; }
footer .links a { font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:var(--smoke); }
footer .links a:hover { color:var(--red); }
.socials { display:flex; gap:14px; }
.socials a { width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:#cfcbc3; transition:border-color .2s, color .2s, transform .2s; }
.socials a svg { width:18px; height:18px; }
.socials a:hover { border-color:var(--red); color:var(--red); transform:translateY(-2px); }
footer small { color:#5f5f5f; font-family:'Inter',sans-serif; width:100%; font-size:.78rem; }

/* LEGAL PAGES */
.legal { padding: 60px 0 80px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(2.2rem,6vw,3.4rem); margin-bottom: 8px; }
.legal .eff { font-family:'Rajdhani',sans-serif; letter-spacing:.06em; color:var(--smoke); margin-bottom: 30px; }
.legal h2 { font-size: 1.4rem; margin: 32px 0 10px; color:#fff; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 20px; }
.legal li { margin-bottom: 8px; color:#D8D4CC; }
.legal strong { color: #fff; }
.legal .back { display:inline-block; margin-bottom: 24px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:var(--red); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2,1fr); }
  .svc { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: 1fr; }
  .area-grid, .contact-grid { grid-template-columns: 1fr; }
  .rev { grid-template-columns: 1fr; }
  .nav .link { display:none; }
  .burger { display:flex; }
  .nav.open { position:absolute; top:68px; left:0; right:0; background:#101010; border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 0; }
  .nav.open .link { display:block; padding:14px 22px; width:100%; }
}
@media (max-width: 560px) {
  .cards, .svc { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 100%; justify-content:center; }
}