/* ═══════════════ FixorAssist — Car Service & Maintenance page ═══════════════ */

.cs-page{background:#fbfbfc}

/* ─── breadcrumb ─── */
.crumbs{display:flex;align-items:center;gap:10px;font-size:15.5px;color:#3c3f44;padding:26px 0 4px;position:relative;z-index:3}
.crumbs .ic-home{width:19px;height:19px;color:#26282c}
.crumbs .sep{color:#9a9ea4;font-size:14px}
.crumbs .cur{color:var(--red);font-weight:500}

/* ─── hero ─── */
.cs-hero{position:relative;background:#f9f9fa;overflow:hidden}
.cs-hero .hero-visual{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%);mask-image:linear-gradient(to right,transparent 0,#000 14%)}
.cs-hero .hero-inner{position:relative;z-index:2}
.cs-hero .hero-copy{max-width:600px;padding:26px 0 96px}
.cs-hero .eyebrow{margin-bottom:26px}
.cs-hero h1{font-size:66px;line-height:1.14;font-weight:700;letter-spacing:-.015em}
.cs-hero .lead-strong{font-size:20px;font-weight:600;margin-top:26px;color:var(--ink)}
.cs-hero .lead-sub{font-size:17.5px;font-weight:300;color:#3f4247;line-height:1.75;margin-top:6px}
.cs-hero .hero-actions{display:flex;align-items:center;gap:36px;margin-top:40px}
.cs-hero .btn-red{padding:17px 30px;font-size:15.5px;letter-spacing:.04em;font-weight:600}
.cs-hero .btn-red .ic-cal{width:19px;height:19px}
.explore-link{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;letter-spacing:.04em;color:var(--ink);position:relative;padding-bottom:8px}
.explore-link::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--red);border-radius:2px}
.explore-link .chev-r{width:15px;height:15px;transform:rotate(-90deg);color:var(--ink)}

/* ─── white features strip ─── */
.cs-strip{position:relative;z-index:4;margin-top:-58px;padding-bottom:8px}
.cs-strip-in{background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(15,15,20,.08);display:grid;grid-template-columns:repeat(5,1fr);padding:34px 8px 30px}
.gs5-item{text-align:center;padding:0 20px;position:relative}
.gs5-item + .gs5-item::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:#e9eaec}
.gs5-item .gs5-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 14px;color:var(--ink)}
.gs5-item .gs5-ic svg{width:100%;height:100%}
.gs5-item h5{font-size:15.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.gs5-item p{font-size:14.5px;color:#5d6167;font-weight:300;line-height:1.55;margin-top:8px}

/* ─── regular care / timeline ─── */
.regular{position:relative;background:#fbfbfc;padding:88px 0 40px;overflow:hidden}
.regular .gear-mark{position:absolute;right:120px;top:110px;width:245px;opacity:.9;pointer-events:none}
.regular .eyebrow{margin-bottom:20px}
.regular h2{font-size:56px;line-height:1.15;letter-spacing:-.015em}
.regular .reg-sub{font-size:17.5px;color:var(--gray);font-weight:300;line-height:1.75;margin-top:18px}
.reg-car{max-width:845px;margin:26px auto 0;position:relative;z-index:2}
.timeline{position:relative;margin-top:8px}
.tl-line{position:absolute;left:0;right:0;top:75px;height:3px;background:linear-gradient(to right,rgba(225,24,30,.12),var(--red) 14%,var(--red))}
.tl-line::after{content:"";position:absolute;right:-2px;top:-6px;border:7.5px solid transparent;border-left:11px solid var(--red);border-right:0}
.tl-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.tl-item{text-align:center;position:relative;padding-bottom:56px}
.tl-item .tl-km{font-size:20px;font-weight:700;color:var(--red);letter-spacing:.01em}
.tl-item .tl-dot{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--red);margin:22px auto 0;position:relative;z-index:2;box-shadow:0 0 0 4px #fbfbfc}
.tl-item .tl-dash{width:2px;height:26px;margin:2px auto 8px;background-image:linear-gradient(#c9ccd1 55%,transparent 55%);background-size:2px 8px}
.tl-item .tl-circle{width:104px;height:104px;border-radius:50%;background:#f1f1f3;display:flex;align-items:center;justify-content:center;margin:0 auto}
.tl-item .tl-circle svg{width:52px;height:52px;color:var(--red)}
.tl-item h4{font-size:19px;font-weight:700;margin-top:22px}
.tl-item p{font-size:15px;color:var(--gray);font-weight:300;line-height:1.6;margin:8px auto 0;max-width:280px}

/* ─── why fixorassist ─── */
.cswhy{background:#fbfbfc;padding:56px 0 84px}
.cswhy .section-sub{font-size:17px}
.cswhy-grid{display:grid;grid-template-columns:.93fr 1.72fr;gap:30px;margin-top:52px;align-items:stretch}
.cswhy-photo img{border-radius:16px;width:100%;height:100%;object-fit:cover}
.cswhy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wf-card{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(15,15,20,.05);text-align:center;padding:30px 24px 26px}
.wf-card .wf-ic{width:78px;height:78px;border-radius:50%;background:#f3f3f5;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.wf-card .wf-ic svg{width:40px;height:40px;color:var(--ink)}
.wf-card h4{font-size:18.5px;font-weight:700}
.wf-card .wf-rule{display:block;width:34px;height:2.5px;background:var(--red);border-radius:2px;margin:12px auto 14px}
.wf-card p{font-size:14.5px;color:#585c62;font-weight:300;line-height:1.65}

/* ─── maintenance services cards ─── */
.mserv{background:#fbfbfc;padding:8px 0 64px}
.mserv .section-sub{font-size:17px}
.mserv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:48px}
.ms-card{background:#fff;border-radius:14px;box-shadow:0 5px 20px rgba(15,15,20,.06);overflow:hidden}
.ms-card .ms-photo{position:relative}
.ms-badge{position:absolute;left:12px;bottom:-29px;width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.ms-badge::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.7px solid transparent;border-bottom-color:#e1363c;border-right-color:#f0989b;transform:rotate(14deg)}
.ms-badge svg{width:34px;height:34px;color:#1c1e22}
.ms-card .ms-photo img{width:100%;height:164px;object-fit:cover;object-position:bottom}
.ms-card .ms-body{padding:38px 22px 26px}
.ms-card h4{font-size:18px;font-weight:700}
.ms-card .ms-rule{display:block;width:34px;height:2.5px;background:var(--red);border-radius:2px;margin:12px 0 14px}
.ms-card p{font-size:14px;color:#585c62;font-weight:300;line-height:1.7}
.mserv-divider{height:1px;background:#e9eaec;margin-top:60px}

/* ─── how it works ─── */
.cshow{background:#fbfbfc;padding:64px 0 60px}
.cshow .section-sub{font-size:17px}
.cshow-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:52px}
.cstep{display:flex;align-items:flex-start;gap:16px;flex:1}
.cstep .cst-num{width:74px;height:74px;border-radius:50%;background:#f1f1f3;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:var(--red);flex:none}
.cstep .cst-ic{width:42px;height:42px;color:var(--ink);flex:none;margin-top:14px}
.cstep .cst-body h4{font-size:20px;font-weight:700;margin-top:10px}
.cstep .cst-body p{font-size:14.5px;color:var(--gray);font-weight:300;line-height:1.6;margin-top:6px;max-width:190px}
.cstep-sep{color:var(--red);flex:none;margin-top:24px}
.cstep-sep svg{width:26px;height:26px;transform:rotate(-90deg)}
.cshow-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.hw-card{background:#fff;border-radius:14px;box-shadow:0 5px 20px rgba(15,15,20,.06);overflow:hidden;display:flex;flex-direction:column}
.hw-card img{width:100%;height:352px;object-fit:cover}
.hw-card .hw-cap{display:flex;gap:12px;padding:22px 22px 26px}
.hw-card .hw-cap .chk{width:26px;height:26px;flex:none;color:var(--red);margin-top:2px}
.hw-card .hw-cap p{font-size:14.5px;color:#43464c;font-weight:300;line-height:1.7}
.cshow-band{background:#fff;border-radius:16px;box-shadow:0 8px 26px rgba(15,15,20,.06);display:grid;grid-template-columns:repeat(4,1fr);padding:26px 10px;margin-top:34px}
.hb-item{display:flex;align-items:flex-start;gap:16px;padding:0 26px;position:relative}
.hb-item + .hb-item::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:#e9eaec}
.hb-item .hb-ic2{display:flex;width:46px;height:46px;flex:none;color:var(--ink)}
.hb-item .hb-ic2 svg{width:100%;height:100%}
.hb-item h5{font-size:16.5px;font-weight:700}
.hb-item p{font-size:14px;color:#5d6167;font-weight:300;line-height:1.6;margin-top:4px}

/* ─── book your service ─── */
.csbook{position:relative;background:#f5f5f7;overflow:hidden;padding:78px 0 56px}
.csbook .book-visual{position:absolute;top:0;right:0;width:52%;max-width:820px;height:auto}
.csbook .csbook-in{position:relative;z-index:2}
.csbook .eyebrow.dashes{justify-content:flex-start;color:var(--red);font-weight:700}
.csbook h2{font-size:60px;line-height:1.14;letter-spacing:-.015em;margin-top:22px}
.csbook .red-rule{margin:26px 0}
.csbook .bk-sub{font-size:17.5px;color:#3f4247;font-weight:300;line-height:1.75}
.bk-minis{display:flex;gap:0;margin-top:46px;max-width:900px}
.bk-mini{flex:1;text-align:center;padding:0 22px;position:relative}
.bk-mini + .bk-mini::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:#dfe0e3}
.bk-mini .bkm-ic{width:66px;height:66px;border-radius:50%;background:#fff;box-shadow:0 5px 18px rgba(15,15,20,.07);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.bk-mini .bkm-ic svg{width:32px;height:32px;color:var(--red)}
.bk-mini h5{font-size:16.5px;font-weight:700}
.bk-mini p{font-size:14px;color:#5d6167;font-weight:300;line-height:1.55;margin-top:6px}
.ready-bar{background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(15,15,20,.08);display:flex;align-items:center;gap:34px;padding:30px 44px;margin-top:56px;position:relative;z-index:2;overflow:hidden}
.ready-bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:180px;background:radial-gradient(circle at 3px 3px,rgba(225,24,30,.14) 1.6px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000);mask-image:linear-gradient(115deg,transparent 40%,#000);pointer-events:none}
.ready-bar .rb-cal{width:96px;height:96px;border-radius:50%;background:#fdeeee;display:flex;align-items:center;justify-content:center;flex:none}
.ready-bar .rb-cal svg{width:44px;height:44px;color:var(--red)}
.ready-bar .rb-copy{padding-left:34px;border-left:1px solid #e9eaec;flex:1}
.ready-bar h3{font-size:30px;font-weight:700}
.ready-bar .rb-copy p{font-size:16.5px;color:var(--gray);font-weight:300;margin-top:6px;max-width:300px;line-height:1.6}
.ready-bar .btn-red{padding:20px 66px;font-size:17px;letter-spacing:.03em;font-weight:600;border-radius:10px}
.ready-bar .rb-secure{display:flex;align-items:center;gap:14px;flex:none}
.ready-bar .rb-secure svg{width:38px;height:38px;color:var(--red)}
.ready-bar .rb-secure p{font-size:16px;color:#3f4247;font-weight:300;line-height:1.5}
.prefer{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:44px;position:relative;z-index:2}
.prefer .pf-ic{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(15,15,20,.08);display:flex;align-items:center;justify-content:center}
.prefer .pf-ic svg{width:22px;height:22px;color:var(--red)}
.prefer p{font-size:18px;color:#3f4247;font-weight:300}
.prefer strong{font-weight:700;color:var(--ink)}
.prefer a{font-weight:700;color:var(--red)}

/* ─── faq ─── */
.csfaq{background:#fbfbfc;padding:78px 0 40px}
.csfaq .section-sub{font-size:17px}
.csfaq-grid{display:grid;grid-template-columns:.92fr 1.6fr;gap:44px;margin-top:52px;align-items:start}
.csfaq-photo img{border-radius:16px;width:100%}
.still-card{background:#fdf0f1;border-radius:16px;display:flex;gap:22px;padding:30px 30px 32px;margin-top:26px;align-items:flex-start}
.still-card .st-ic{display:block;width:104px;height:104px;flex:none;color:#e5474c;opacity:.85}
.still-card .st-ic svg{width:100%;height:100%}
.still-card h4{font-size:22px;font-weight:700}
.still-card p{font-size:15.5px;color:#4a4d52;font-weight:300;line-height:1.7;margin-top:8px}
.still-card .btn-red{margin-top:18px;padding:13px 22px;font-size:15px;border-radius:8px}
.csfaq-list{display:flex;flex-direction:column;gap:18px}
.csfaq-list .faq-item{border-radius:14px;box-shadow:0 4px 16px rgba(15,15,20,.05)}
.csfaq-list .faq-q{gap:20px;padding:21px 30px}
.csfaq-list .qnum{width:52px;height:52px;border-radius:50%;background:#fbf3f3;color:var(--red);font-size:18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.csfaq-list .qt{font-size:19px}
.csfaq-list .faq-a p{padding:0 30px 26px 102px}

/* ─── closing line ─── */
.cs-close{background:#fbfbfc;text-align:center;padding:34px 0 72px}
.cs-close .cl-row{display:flex;align-items:center;justify-content:center;gap:22px}
.cs-close .cl-rule{width:220px;height:1.6px;background:linear-gradient(to right,transparent,#c9333a);flex:none}
.cs-close .cl-rule.r{background:linear-gradient(to left,transparent,#c9333a)}
.cs-close h3{font-size:27px;font-weight:700;display:flex;align-items:center;gap:16px}
.cs-close .cl-shield{width:44px;height:44px;color:var(--ink)}
.cs-close p{font-size:15.5px;color:var(--gray);font-weight:300;margin-top:14px}

/* ═══ responsive ═══ */
@media (max-width:1280px){
  .cs-hero h1{font-size:52px}
  .cs-hero .hero-visual{opacity:.32}
  .regular h2{font-size:46px}
  .csbook h2{font-size:48px}
  .cswhy-grid{grid-template-columns:1fr}
  .cshow-cards,.mserv-grid{grid-template-columns:repeat(2,1fr)}
  .cshow-steps{flex-wrap:wrap}
}
@media (max-width:1024px){
  .cs-strip-in{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .cswhy-cards{grid-template-columns:repeat(2,1fr)}
  .cshow-band{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .csbook .book-visual{display:none}
  .ready-bar{flex-wrap:wrap}
  .csfaq-grid{grid-template-columns:1fr}
  .tl-grid{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .tl-line{display:none}
}
@media (max-width:720px){
  .cs-hero h1{font-size:40px}
  .cs-strip-in,.cswhy-cards,.cshow-cards,.mserv-grid,.cshow-band,.tl-grid{grid-template-columns:1fr}
  .bk-minis{flex-wrap:wrap}
  .bk-mini{flex:1 1 45%;margin-bottom:20px}
  .cs-close .cl-rule{width:60px}
  .regular h2,.csbook h2{font-size:36px}
}

/* ── mobile: stop timeline items inheriting index's flex-row (.tl-item collision) ── */
@media (max-width:720px){
  .regular .tl-item{display:block}
}