:root{
  --graf:#1B1E22;
  --graf-2:#2A2F35;
  --acero:#4A5560;
  --amar:#F2B705;
  --amar-2:#D9A300;
  --conc:#ECEAE4;
  --conc-2:#DEDAD1;
  --white:#FFFFFF;
  --text:#1B1E22;
  --muted:#5A6068;
  --line:#D3CFC6;
  --head:'Oswald', system-ui, sans-serif;
  --body:'Barlow', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--conc);color:var(--text);line-height:1.55;font-size:1.03rem;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,.wordmark{font-family:var(--head);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
h1{font-weight:700}h2{font-weight:700;font-size:clamp(2rem,7.5vw,2.9rem)}h3{font-weight:600}

.demo-bar{background:var(--amar);color:var(--graf);font-size:.75rem;font-weight:600;text-align:center;padding:.35rem 1rem;letter-spacing:.04em}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:1rem 1.25rem;background:var(--graf);color:#fff}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;font-size:1.45rem;font-weight:500;text-decoration:none;color:#fff}
.wordmark b{font-weight:700;color:var(--amar)}
.nut{width:26px;height:26px;background:var(--amar);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);position:relative}
.nut::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--graf)}
.nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-weight:600;font-size:.95rem}
.nav a{text-decoration:none;color:#C9CDD2}
.nav a:hover{color:var(--amar)}

section{padding:3rem 1.25rem}

/* Hero */
.hero{display:grid;gap:2.2rem;background:var(--graf);color:#fff;padding-top:2.5rem;padding-bottom:3.5rem}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--graf);background:var(--amar);padding:.25rem .7rem}
.hero h1{font-size:clamp(2.3rem,10vw,4.2rem);margin:1rem 0;color:#fff;text-wrap:balance}
.hero h1 span{display:block;color:var(--amar);text-wrap:balance}
.hook{font-size:1.1rem;color:#C9CDD2;max-width:44ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.6rem}
.btn{display:inline-block;background:var(--amar);color:var(--graf);text-decoration:none;font-weight:700;font-size:1.02rem;padding:.95rem 1.5rem;border-radius:4px;box-shadow:4px 4px 0 rgba(0,0,0,.35);transition:transform .15s}
.btn:hover{transform:translate(-2px,-2px)}
.btn-dark{background:var(--graf);color:var(--amar);box-shadow:4px 4px 0 var(--amar-2)}
.text-link{font-weight:700;color:#fff;text-underline-offset:4px;text-decoration-color:var(--amar)}
.hint{font-size:.88rem;color:#9AA1A8;margin-top:.9rem}

.hero-art{position:relative;height:300px;width:100%;max-width:460px;margin:0 auto;background:var(--graf-2);border-radius:6px;overflow:hidden}
.stripes{position:absolute;left:0;right:0;bottom:0;height:22px;background:repeating-linear-gradient(-45deg,var(--amar) 0 16px,var(--graf) 16px 32px)}
.gear{position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;border:22px dashed var(--acero)}
.gear span{position:absolute;inset:26px;border-radius:50%;border:10px solid var(--acero)}
.car{position:absolute;left:8%;bottom:58px;width:62%;height:100px}
.car .body{position:absolute;left:0;right:0;bottom:18px;height:46px;background:var(--amar);border-radius:18px 26px 8px 8px}
.car .cabin{position:absolute;left:22%;width:46%;bottom:58px;height:38px;background:#E0E4E8;border:6px solid var(--amar);border-bottom:0;border-radius:24px 30px 0 0}
.wheel{position:absolute;bottom:0;width:44px;height:44px;border-radius:50%;background:#0F1113;border:9px solid #0F1113;box-shadow:inset 0 0 0 7px #9AA1A8}
.w1{left:12%}.w2{right:12%}
.ticket{position:absolute;right:6%;top:7%;background:var(--white);color:var(--graf);padding:.7rem .95rem;border-radius:4px;border-left:6px solid var(--amar);box-shadow:0 12px 24px rgba(0,0,0,.35);max-width:210px}
.tk-title{font-family:var(--head);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acero)}
.tk-line{font-weight:700;line-height:1.25;margin:.15rem 0}
.tk-sub{font-size:.8rem;color:var(--muted)}

/* Services */
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-bottom:1.6rem}
.badge{font-size:.8rem;font-weight:700;color:var(--graf);border:2px solid var(--graf);padding:.2rem .7rem}
.svc-grid{display:grid;gap:1rem}
.svc{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--amar);padding:1.3rem 1.2rem;display:flex;flex-direction:column;gap:.45rem}
.svc-num{font-family:var(--head);font-weight:600;color:var(--acero);font-size:.95rem}
.svc h3{font-size:1.35rem}
.svc p{color:var(--muted)}
.svc .svc-price{margin-top:auto;padding-top:.6rem;font-family:var(--head);font-size:1.6rem;font-weight:700;color:var(--graf)}
.svc-price span{font-family:var(--body);font-size:.85rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.fine{font-size:.85rem;color:var(--muted);margin-top:1.2rem}

/* How */
.how{background:var(--amar)}
.how h2{margin-bottom:1.6rem}
.steps{list-style:none;display:grid;gap:1rem}
.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start;background:rgba(255,255,255,.35);padding:1.1rem;border-radius:4px}
.step-n{display:grid;place-items:center;width:3rem;height:3rem;background:var(--graf);color:var(--amar);font-family:var(--head);font-weight:700;font-size:1.4rem}
.steps h3{font-size:1.25rem;margin-bottom:.2rem}
.steps p{color:#3A3520}
.how-cta{margin-top:1.8rem}

/* Where */
.where{display:grid;gap:1.8rem}
.hours{list-style:none;max-width:400px;margin-top:1.2rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-weight:500}
.hours .closed{color:var(--muted)}
.tag-ex{display:inline-block;font-size:.75rem;font-weight:700;color:var(--muted);border:1px dashed #A9A498;padding:.15rem .6rem;margin-top:.7rem}
.addr{margin-top:1.4rem}
.small-links{margin-top:.8rem;font-size:.95rem;color:var(--muted)}
.small-links a{color:var(--graf);font-weight:600}
.map{position:relative;height:240px;background:#D9D5CB;border-radius:4px;overflow:hidden}
.road{position:absolute;background:#F5F3EE}
.rd1{left:0;right:0;top:46%;height:22px}
.rd2{top:0;bottom:0;left:58%;width:18px}
.block{position:absolute;background:#C9C4B8;border-radius:3px}
.b1{left:8%;top:10%;width:40%;height:28%}.b2{left:66%;top:10%;width:26%;height:28%}.b3{left:8%;top:64%;width:42%;height:26%}
.pin{position:absolute;left:61%;top:58%;width:30px;height:30px;background:var(--amar);border:4px solid var(--graf);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.map-label{position:absolute;left:.7rem;bottom:.7rem;font-size:.75rem;font-weight:700;background:var(--white);padding:.15rem .55rem}

/* Contact */
.contact{background:var(--graf);color:#fff;position:relative}
.contact::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(-45deg,var(--amar) 0 14px,var(--graf) 14px 28px)}
.contact-box{max-width:640px}
.contact h2{color:#fff;margin-bottom:.8rem}
.contact p{color:#C9CDD2}
.checklist{list-style:none;margin:1rem 0 1.6rem;display:grid;gap:.5rem}
.checklist li{padding-left:1.6rem;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;background:var(--amar);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.wa-line{margin-top:1rem;font-weight:600}
.prov{font-weight:400;color:#9AA1A8}

/* Footer */
.footer{background:#111316;color:#9AA1A8;padding:2rem 1.25rem;font-size:.92rem;display:grid;gap:.5rem}
.wordmark-foot{font-size:1.25rem}
.demo-note{font-size:.78rem;color:#7A8087;margin-top:.6rem}

@media (min-width:640px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .top{padding:1.1rem 3rem}
  section{padding:4.5rem 3rem}
  .footer{padding:2.5rem 3rem}
  .hero{grid-template-columns:1.15fr 1fr;align-items:center;padding-top:4rem;padding-bottom:5rem}
  .hero-art{height:380px}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:1.3rem}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps li{grid-template-columns:1fr;gap:.8rem}
  .where{grid-template-columns:1fr 1.1fr;align-items:center;gap:3rem}
  .map{height:320px}
}
.nw{white-space:nowrap}