/* J&M Hub — cartoon yard brand (bone / bark / red / gold) */
:root{
  --bone:#FFF6E8;--bone-2:#FFE9C8;--bark:#2C1810;--ink:#1a120c;
  --red:#C8102E;--red-d:#9A0C23;--red-soft:#FFE8EC;
  --gold:#F0B429;--gold-d:#C48E12;--sky:#5BA3C9;--sky-soft:#E6F4FA;
  --green:#3d8b6e;--green-soft:#e6f5ef;
  --mud:#8B5E3C;--card:#fff;--line:#2C1810;
  --muted:#6b5344;--safe-b:env(safe-area-inset-bottom,0px);
  --shadow:4px 4px 0 var(--bark);
  --shadow-sm:3px 3px 0 var(--bark);
  --radius:22px;
  --font-display:"Fredoka",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bone);color:var(--ink);line-height:1.55;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'80'%20height%3D'80'%20viewBox%3D'0%200%2080%2080'%3E%3Cg%20fill%3D'%232C1810'%20opacity%3D'.04'%3E%3Cellipse%20cx%3D'28'%20cy%3D'36'%20rx%3D'7'%20ry%3D'9'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'24'%20r%3D'4.5'%2F%3E%3Ccircle%20cx%3D'28'%20cy%3D'20'%20r%3D'4.5'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'24'%20r%3D'4.5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:80px 80px;
  padding-bottom:calc(72px + var(--safe-b));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1040px,calc(100% - 1.5rem));margin:0 auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:13px 20px;font-weight:800;font-size:15px;
  border:3px solid var(--bark);cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;line-height:1.1;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--bark)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bark)}
.btn-red{background:var(--red);color:#fff}
.btn-gold{background:var(--gold);color:var(--bark)}
.btn-bone{background:var(--bone);color:var(--bark)}
.btn-sky{background:var(--sky);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-dark{background:var(--bark);color:var(--bone)}
.btn-sm{padding:10px 14px;font-size:13px;border-width:2.5px;box-shadow:2px 2px 0 var(--bark)}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bone-2);border:2.5px solid var(--bark);
  border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800;
  box-shadow:2px 2px 0 var(--bark);
}
.chip-red{background:var(--red-soft);color:var(--red-d)}
.chip-gold{background:#FFF3CC;color:var(--gold-d)}
.chip-sky{background:var(--sky-soft);color:#1e5f7a}
.chip-green{background:var(--green-soft);color:#1f5c45}

.card{
  background:var(--card);border:3.5px solid var(--bark);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.card-pad{padding:1.05rem 1.1rem 1.15rem}

.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,246,232,.94);backdrop-filter:blur(8px);
  border-bottom:3px solid var(--bark);
}
.topbar-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.65rem;padding:.65rem 0;
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800}
.brand img{width:44px;height:44px;border-radius:12px;border:3px solid var(--bark);box-shadow:2px 2px 0 var(--bark)}
.brand .name{font-family:var(--font-display);font-size:1.15rem;line-height:1.1}
.brand .tag{display:block;font-size:.72rem;font-weight:700;color:var(--muted)}
.top-links{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.top-links a{
  font-weight:800;font-size:.82rem;padding:.4rem .7rem;border-radius:999px;
  border:2px solid transparent;
}
.top-links a:hover{border-color:var(--bark);background:var(--bone-2)}

.hero{
  padding:1.5rem 0 1rem;
  display:grid;grid-template-columns:1.15fr .85fr;gap:1.1rem;align-items:center;
}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{
  font-family:var(--font-display);font-size:clamp(1.75rem,4.5vw,2.55rem);
  line-height:1.08;margin:.45rem 0 .65rem;letter-spacing:-.02em;
}
.hero .lead{color:var(--muted);font-size:1.05rem;max-width:36rem;margin-bottom:1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.hero-card{padding:1rem}
.hero-card .mascot-wrap{
  display:grid;place-items:center;padding:.5rem;
  background:linear-gradient(160deg,var(--bone-2),#fff);border-radius:18px;
  border:3px solid var(--bark);box-shadow:var(--shadow-sm);margin-bottom:.75rem;
}
.hero-card img{width:min(180px,50vw)}

.section{padding:1.75rem 0 0.5rem}
.section-kicker{
  font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red-d);margin-bottom:.25rem;
}
.section-title{font-family:var(--font-display);font-size:clamp(1.35rem,3vw,1.75rem);margin-bottom:.35rem}
.section-sub{color:var(--muted);max-width:40rem;margin-bottom:1rem}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
@media (max-width:900px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid3,.grid2,.grid4{grid-template-columns:1fr}}

.svc-top{
  height:88px;display:grid;place-items:center;font-size:2.2rem;
  border-bottom:3px solid var(--bark);
}
.st-store{background:#FFE8C8}
.st-wash{background:var(--sky-soft)}
.st-haul{background:#FFF3CC}
.st-cars{background:#e8f7f3}
.st-real{background:#efe8ff}
.st-hub{background:var(--red-soft)}
.svc h3{font-family:var(--font-display);font-size:1.15rem;margin:0 0 .35rem}
.svc p{color:var(--muted);font-size:.92rem;margin-bottom:.75rem}
.svc-foot{display:flex;flex-wrap:wrap;gap:8px}

.hub-strip{
  margin:1.25rem 0;padding:1rem 1.1rem;border-radius:var(--radius);
  border:3.5px solid var(--bark);background:linear-gradient(120deg,#fff,#FFE9C8);
  box-shadow:var(--shadow);
}
.hub-strip h2{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.35rem}
.hub-strip p{color:var(--muted);font-size:.92rem}
.domain-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}
.domain-list a{
  font-size:.78rem;font-weight:800;padding:.35rem .65rem;border-radius:999px;
  background:#fff;border:2.5px solid var(--bark);box-shadow:2px 2px 0 var(--bark);
}

.steps{counter-reset:step;list-style:none}
.steps li{
  counter-increment:step;position:relative;padding:.55rem 0 .55rem 2.5rem;
  border-bottom:2px dashed rgba(44,24,16,.15);color:var(--muted);font-size:.92rem;
}
.steps li:last-child{border-bottom:none}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:.5rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--gold);border:2.5px solid var(--bark);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;color:var(--bark);
}

.faq details{
  background:#fff;border:3px solid var(--bark);border-radius:16px;
  padding:.75rem 1rem;margin-bottom:.55rem;box-shadow:var(--shadow-sm);
}
.faq summary{font-weight:800;cursor:pointer;font-family:var(--font-display)}
.faq p{margin-top:.45rem;color:var(--muted);font-size:.9rem}

footer.site{
  margin:2rem 0 1rem;padding:1.1rem;border:3.5px solid var(--bark);
  border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);
  font-size:.85rem;color:var(--muted);
}
footer.site strong{color:var(--ink)}
footer.site a{font-weight:800;color:var(--red-d);text-decoration:underline}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-around;gap:2px;
  padding:calc(8px + var(--safe-b)) 6px 8px;
  background:rgba(255,246,232,.96);border-top:3px solid var(--bark);
  backdrop-filter:blur(8px);
}
.dock a{
  flex:1;text-align:center;font-size:11px;font-weight:800;
  padding:6px 2px;border-radius:12px;color:var(--bark);
}
.dock a .ico{display:block;font-size:1.15rem;line-height:1.2}
.dock a.hot{background:var(--red);color:#fff;border:2px solid var(--bark)}
.dock a:hover{background:var(--bone-2)}

.muted{color:var(--muted)}
.notice{
  border:3px solid var(--bark);background:#FFF3CC;border-radius:16px;
  padding:.75rem .9rem;font-size:.88rem;box-shadow:var(--shadow-sm);margin:0 0 1rem;
}