:root{
  --paper:#E7E1D2;
  --paper-deep:#DCD4C0;
  --ink:#20241F;
  --ink-soft:#4A5148;
  --orange:#E8611F;
  --orange-deep:#C74E14;
  --steel:#2E4A5A;
  --steel-deep:#1E333F;
  --caution:#EFB120;
  --whatsapp:#25D366;
  --whatsapp-deep:#1DA851;
  --line:#20241F33;
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.display{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.92;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
@media(max-width:720px){section{padding:56px 0;}}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--ink);color:var(--paper);
  border-bottom:3px solid var(--orange);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Big Shoulders Display';font-weight:800;font-size:22px;letter-spacing:0.02em;text-transform:uppercase;}
.brand .dot{width:10px;height:10px;background:var(--orange);border-radius:50%;flex:none;}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.tel-link{
  display:none;
  font-family:'IBM Plex Mono';font-size:14px;letter-spacing:0.02em;
  border:1px solid var(--paper);padding:8px 12px;border-radius:var(--radius);
  text-decoration:none;
}
@media(min-width:640px){.tel-link{display:inline-block;}}
.btn-wa-mini{
  background:var(--whatsapp);color:#0B2412;font-weight:700;
  padding:9px 16px;border-radius:var(--radius);font-size:14px;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--whatsapp-deep);
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 85% 10%, #ffffff22, transparent 45%),
    var(--paper);
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono';font-size:12.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--orange-deep);
  background:#fff;border:1px solid var(--orange);
  padding:6px 10px;border-radius:var(--radius);margin-bottom:20px;
}
.eyebrow::before{content:"●";color:var(--whatsapp-deep);font-size:10px;}
.hero h1{
  font-size:clamp(40px,6.6vw,78px);
  margin:0 0 20px;
}
.hero h1 .accent{color:var(--orange);}
.hero p.lede{
  font-size:19px;line-height:1.55;color:var(--ink-soft);
  max-width:46ch;margin:0 0 32px;
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.btn{
  font-weight:700;font-size:16px;padding:16px 26px;border-radius:var(--radius);
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  border:2px solid transparent;transition:transform .12s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--whatsapp);color:#0B2412;border-color:var(--whatsapp-deep);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.hero-note{font-family:'IBM Plex Mono';font-size:13px;color:var(--ink-soft);}

/* route animation */
.route-card{
  position:relative;background:var(--steel);border-radius:6px;
  padding:26px;min-height:280px;overflow:hidden;
  border:1px solid var(--steel-deep);
}
.route-card::before{
  content:"KAWASAN SERVIS";
  font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0.18em;
  color:#ffffff99;
}
.route-svg{width:100%;height:220px;margin-top:14px;}
.route-path{
  fill:none;stroke:#ffffff55;stroke-width:2;stroke-dasharray:6 8;
}
.route-progress{
  fill:none;stroke:var(--caution);stroke-width:2.5;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:draw 4.5s linear infinite;
}
@keyframes draw{
  0%{stroke-dashoffset:340;}
  45%{stroke-dashoffset:0;}
  55%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-340;}
}
.scooter-dot{
  offset-path:path('M20,190 C70,60 150,220 200,120 C230,55 260,90 290,40');
  animation:ride 4.5s linear infinite;
}
@keyframes ride{
  0%{offset-distance:0%;}
  100%{offset-distance:100%;}
}
.house-mark{fill:var(--paper);}
@media (prefers-reduced-motion: reduce){
  .route-progress,.scooter-dot{animation:none;}
  .route-progress{stroke-dashoffset:0;}
}

/* ---------- trust strip ---------- */
.trust{
  background:var(--ink);color:var(--paper);
  padding:0;border-bottom:3px solid var(--orange);
  overflow:hidden;
}
.trust-track{
  display:flex;gap:0;white-space:nowrap;
  animation:scroll-left 26s linear infinite;
  width:max-content;
}
@media (prefers-reduced-motion: reduce){.trust-track{animation:none;}}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.trust-item{
  font-family:'IBM Plex Mono';font-size:14px;letter-spacing:0.04em;
  padding:14px 28px;border-right:1px solid #ffffff22;
  display:flex;align-items:center;gap:10px;
}
.trust-item b{color:var(--caution);font-weight:600;}

/* ---------- section heads ---------- */
.kicker{
  font-family:'IBM Plex Mono';font-size:12.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--orange-deep);margin:0 0 10px;
}
.sec-title{font-size:clamp(30px,4.2vw,46px);margin:0 0 14px;}
.sec-lede{color:var(--ink-soft);font-size:16.5px;max-width:56ch;line-height:1.6;margin:0 0 44px;}

/* ---------- symptom picker (signature: service docket) ---------- */
.picker{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
}
@media(max-width:860px){.picker{grid-template-columns:1fr;}}
.tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.tab{
  font-family:'IBM Plex Mono';font-size:14px;font-weight:500;
  padding:10px 16px;border:1.5px solid var(--ink);border-radius:var(--radius);
  background:transparent;cursor:pointer;color:var(--ink);
}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.symptom-grid{grid-template-columns:1fr;}}
.symptom{
  text-align:left;font-family:'IBM Plex Sans';font-size:14.5px;
  padding:14px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;cursor:pointer;display:flex;align-items:center;gap:10px;
}
.symptom:hover{border-color:var(--orange);}
.symptom[aria-pressed="true"]{border-color:var(--orange);background:#fff2ea;box-shadow:inset 0 0 0 1px var(--orange);}
.symptom .mark{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;}
.symptom[aria-pressed="true"] .mark{background:var(--orange);}

/* docket */
.docket{
  background:#FBF9F3;border:1px solid var(--ink);border-radius:2px;
  padding:26px 24px;position:relative;
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 27px, #20241F0d 28px);
}
.docket::before{
  content:"";position:absolute;left:-8px;top:24px;bottom:24px;width:16px;
  background:
    radial-gradient(circle 4px at 8px 0, transparent 4px, var(--paper) 4.5px) repeat-y;
  background-size:16px 16px;
}
.docket-head{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px dashed var(--ink);padding-bottom:12px;margin-bottom:16px;
}
.docket-head .t1{font-family:'Big Shoulders Display';font-weight:800;font-size:22px;text-transform:uppercase;}
.docket-head .t2{font-family:'IBM Plex Mono';font-size:12px;color:var(--ink-soft);}
.docket-row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:13.5px;padding:6px 0;}
.docket-row .k{color:var(--ink-soft);}
.docket-row .v{font-weight:600;text-align:right;max-width:60%;}
.docket-stamp{
  display:inline-block;margin-top:16px;
  font-family:'Big Shoulders Display';font-weight:800;font-size:14px;
  letter-spacing:0.08em;color:var(--orange-deep);
  border:2px solid var(--orange-deep);padding:4px 10px;border-radius:2px;
  transform:rotate(-3deg);
}
.docket-cta{margin-top:20px;}

/* ---------- process ---------- */
.process-list{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--ink);border:1px solid var(--ink);
}
@media(max-width:860px){.process-list{grid-template-columns:1fr;}}
.stub{
  background:var(--paper);padding:26px 22px;position:relative;
}
.stub .num{font-family:'IBM Plex Mono';font-size:13px;color:var(--orange-deep);letter-spacing:0.1em;}
.stub h3{font-family:'Big Shoulders Display';font-weight:800;font-size:21px;text-transform:uppercase;margin:8px 0 10px;line-height:1.05;}
.stub p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0;}

/* ---------- service area ---------- */
.area-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.chip{
  font-family:'IBM Plex Mono';font-size:13.5px;
  padding:9px 15px;border:1px solid var(--ink);border-radius:20px;
  background:#fff;cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--orange);border-color:var(--orange-deep);color:#fff;}
.area-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.area-hint{font-size:14px;color:var(--ink-soft);}

/* ---------- story ---------- */
.story{background:var(--steel);color:var(--paper);}
.story .kicker{color:var(--caution);}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media(max-width:860px){.story-grid{grid-template-columns:1fr;}}
.story p{font-size:17px;line-height:1.7;color:#EDE9DC;}
.story .sec-title{color:#fff;}
.scooter-illustration{width:100%;height:auto;}

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--ink);border:1px solid var(--ink);
}
@media(max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-item{
  background:var(--paper);aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:'IBM Plex Mono';font-size:12px;letter-spacing:0.04em;color:var(--ink-soft);
  text-align:center;padding:12px;
}
.gallery-item .emoji{font-size:28px;}

/* ---------- hours + cta band ---------- */
.band{
  background:var(--orange);color:var(--ink);
  padding:56px 0;
}
.band-grid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.status{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono';font-size:15px;}
.status-dot{width:11px;height:11px;border-radius:50%;background:var(--whatsapp-deep);flex:none;}
.status-dot.closed{background:var(--steel-deep);}
.hours-table{font-family:'IBM Plex Mono';font-size:13.5px;margin-top:10px;line-height:1.7;color:#20241Fcc;}
.band .btn-outline{border-color:var(--ink);}

/* ---------- reviews ---------- */
.review-card{
  border:1px solid var(--line);border-radius:2px;background:#fff;
  padding:26px;display:flex;flex-direction:column;gap:14px;
}
.stars{color:var(--caution);letter-spacing:2px;font-size:16px;}
.review-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:stretch;}
@media(max-width:760px){.review-grid{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:56px 0 110px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;}}
.foot-title{font-family:'IBM Plex Mono';font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:#ffffff88;margin-bottom:14px;}
.foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;}
.foot-links a{text-decoration:none;}
.foot-links a:hover{color:var(--orange);}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid #ffffff22;font-family:'IBM Plex Mono';font-size:12.5px;color:#ffffff88;}

/* ---------- sticky mobile bar ---------- */
.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;gap:1px;background:var(--ink);
  border-top:3px solid var(--orange);
}
.mobile-bar a{
  flex:1;text-align:center;padding:15px 8px;text-decoration:none;
  font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.mobile-bar .call{background:var(--steel);color:#fff;}
.mobile-bar .wa{background:var(--whatsapp);color:#0B2412;}
@media(min-width:640px){.mobile-bar{display:none;}}
body{padding-bottom:64px;}
@media(min-width:640px){body{padding-bottom:0;}}