:root{
  --red:#e91616;
  --red-dark:#8d0707;
  --yellow:#fff200;
  --yellow-soft:#fff8b8;
  --black:#111111;
  --white:#ffffff;
  --cream:#fff6c8;
  --brown:#4b2116;
  --green:#1fb85b;
  --shadow:0 24px 60px rgba(0,0,0,.22);
  --hard:7px 7px 0 var(--black);
  --radius:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--black);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,242,0,.9) 0 14rem, transparent 25rem),
    radial-gradient(circle at 92% 18%, rgba(233,22,22,.22) 0 12rem, transparent 28rem),
    linear-gradient(180deg,#fffce6 0%,#ffffff 45%,#fff2a4 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit}
.skip-link{position:absolute;left:14px;top:-60px;background:#111;color:#fff;padding:12px 18px;border-radius:999px;z-index:999}
.skip-link:focus{top:14px}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,242,0,.98);
  border-bottom:6px solid var(--red);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}
.nav{
  width:min(1180px,92%);
  min-height:86px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.2px}
.brand img{width:64px;height:64px;object-fit:contain;background:var(--yellow);border:3px solid var(--black);border-radius:18px;box-shadow:5px 5px 0 var(--red)}
.brand span{font-size:clamp(.78rem,2vw,1.08rem)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{font-weight:1000;padding:12px 16px;border-radius:999px;transition:.2s ease}
.nav-links a:hover{background:var(--black);color:var(--yellow)}
.nav-toggle{display:none;width:50px;height:50px;border:3px solid #111;border-radius:16px;background:#fff;box-shadow:4px 4px 0 #111;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:3px;background:#111;border-radius:999px}

.hero,.section,.quick-info{width:min(1180px,92%);margin:auto}
.hero{min-height:calc(100vh - 86px);padding:64px 0;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;position:relative}
.hero::before{content:"";position:absolute;right:-120px;bottom:10%;width:290px;height:290px;background:var(--yellow);border:14px solid var(--red);border-radius:50%;opacity:.28;z-index:-1}
.badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:var(--yellow);border:3px solid #111;border-radius:999px;box-shadow:6px 6px 0 #111;padding:10px 18px;font-weight:1000;text-transform:uppercase;letter-spacing:1px;font-size:.82rem}
.badge-yellow{background:var(--yellow);color:#111}
h1{font-size:clamp(3rem,8vw,7.4rem);line-height:.86;text-transform:uppercase;font-weight:1000;letter-spacing:-.07em;color:var(--red);margin:28px 0 18px;text-shadow:5px 5px 0 var(--yellow),9px 9px 0 var(--black)}
.business-name{font-size:clamp(1.35rem,3vw,2.25rem);line-height:1.05;text-transform:uppercase;font-weight:1000;margin-bottom:12px}
.hero-text{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:900;line-height:1.55;color:var(--brown);max-width:670px}
.hero-actions,.contact-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:13px 20px;border:3px solid #111;border-radius:999px;font-weight:1000;text-align:center;box-shadow:var(--hard);transition:.2s ease}
.btn:hover{transform:translateY(-3px);box-shadow:10px 10px 0 #111;filter:saturate(1.05)}
.btn-red{background:var(--red);color:var(--yellow)}
.btn-dark{background:#111;color:var(--yellow)}
.btn-wa{background:var(--green);color:#fff}
.btn-wa-outline{background:#fff;color:#111}
.hero-media{background:var(--yellow);border:8px solid var(--red);border-radius:42px;padding:16px;box-shadow:var(--shadow);transform:rotate(1deg)}
.hero-media img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--yellow);border:6px solid #111;border-radius:30px}

.quick-info{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:30px}
.quick-info article{min-height:175px;background:#fff;border:4px solid #111;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.quick-info article::after{content:"";position:absolute;right:-50px;bottom:-50px;width:135px;height:135px;background:var(--red);border-radius:50%;opacity:.12}
.quick-info span{display:inline-flex;background:var(--yellow);border:3px solid #111;border-radius:999px;padding:8px 14px;font-size:.78rem;font-weight:1000;text-transform:uppercase;margin-bottom:16px}
.quick-info strong{display:block;font-size:1.08rem;line-height:1.55;color:var(--brown)}

.section{padding:84px 0}
.section-heading{text-align:center;max-width:890px;margin:0 auto 42px}
.section-heading h2,.schedule-box h2,.contact-box h2{font-size:clamp(2rem,4.8vw,4.1rem);line-height:1.02;text-transform:uppercase;font-weight:1000;margin-top:24px;text-shadow:4px 4px 0 var(--yellow)}
.specialty{width:100%;max-width:none;background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);border-top:8px solid #111;border-bottom:8px solid #111;padding-left:max(4%,calc((100% - 1180px)/2));padding-right:max(4%,calc((100% - 1180px)/2))}
.specialty .section-heading h2{color:#fff;text-shadow:5px 5px 0 #111}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{min-height:190px;background:#fffbea;border:4px solid #111;border-radius:var(--radius);padding:30px 24px;box-shadow:12px 12px 0 rgba(0,0,0,.34);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;right:-42px;top:-42px;width:118px;height:118px;background:var(--yellow);border:5px solid #111;border-radius:50%;opacity:.78}
.card span{width:58px;height:58px;border:3px solid #111;border-radius:18px;background:var(--yellow);display:grid;place-items:center;font-weight:1000;box-shadow:4px 4px 0 #111;position:relative;z-index:1}
.card h3{font-size:clamp(1.28rem,2.5vw,1.65rem);text-transform:uppercase;line-height:1.08;position:relative;z-index:1}

.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.media-card,.video-card{background:#111;border:5px solid #111;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-height:430px}
.media-card{padding:0;cursor:pointer}
.media-card img{width:100%;height:100%;object-fit:contain;background:#111;transition:transform .22s ease}
.media-card:hover img{transform:scale(1.015)}
.video-card{grid-column:1/-1;display:grid;place-items:center;background:#000}
.video-card video{width:100%;max-height:760px;background:#000;object-fit:contain}

.schedule{display:grid;place-items:center;padding-top:44px}
.schedule-box{text-align:center;width:min(930px,100%);background:linear-gradient(145deg,#fff 0%,#fff3a0 100%);border:5px solid #111;border-radius:36px;padding:50px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.schedule-box::before{content:"";position:absolute;inset:18px;border:3px dashed rgba(16,16,16,.28);border-radius:26px;pointer-events:none}
.schedule-box strong{display:block;margin:30px auto 0;width:min(720px,100%);background:#111;color:var(--yellow);border:6px solid var(--red);border-radius:28px;padding:28px 18px;font-size:clamp(2rem,6vw,5.2rem);line-height:1;font-weight:1000}

.contact{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;padding-top:34px}
.contact-box{background:linear-gradient(135deg,var(--yellow) 0%,#fff 100%);border:5px solid #111;border-radius:36px;padding:42px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:26px}
.phones{margin-top:18px;font-size:1.25rem;line-height:1.55;font-weight:1000;color:var(--brown)}
.contact-buttons{justify-content:flex-end;margin-top:0}
.address-box{background:#111;color:#fff;border:5px solid var(--red);border-radius:36px;padding:42px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}
.address-box h3{font-size:1.55rem;text-transform:uppercase;margin-bottom:12px;color:var(--yellow)}
.address-box p{font-size:1.1rem;line-height:1.55;font-weight:900}

.footer{background:#111;color:#fff;text-align:center;padding:34px 16px 112px;border-top:8px solid var(--red);font-weight:1000}
.footer img{width:78px;height:78px;object-fit:contain;margin:0 auto 12px;background:var(--yellow);border:3px solid var(--red);border-radius:18px}
.footer span{display:block;color:#fff0a2;margin-top:8px}
.floating-actions{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px;max-width:min(340px,calc(100vw - 36px))}
.floating-actions a{background:var(--green);color:#fff;border:3px solid #111;border-radius:999px;padding:12px 18px;font-weight:1000;box-shadow:5px 5px 0 #111;text-align:center}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.active{display:flex}
.lightbox img{max-width:min(1000px,92vw);max-height:86vh;object-fit:contain;border:5px solid #fff;border-radius:20px;background:#111}
.lightbox-close{position:absolute;right:22px;top:20px;width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:var(--red);color:#fff;font-size:2rem;line-height:1;cursor:pointer;font-weight:1000}

@media (max-width:980px){
  .nav{min-height:78px}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;left:0;right:0;top:78px;background:var(--yellow);border-bottom:6px solid var(--red);padding:18px;display:none;flex-direction:column;gap:10px;box-shadow:0 18px 30px rgba(0,0,0,.18)}
  .nav-links.open{display:flex}
  .nav-links a{width:min(520px,92%);text-align:center;background:#fff;border:3px solid #111;box-shadow:4px 4px 0 #111}
  .hero{grid-template-columns:1fr;min-height:auto;padding:42px 0 50px;text-align:center}
  .hero-actions{justify-content:center}
  .hero-media{width:min(520px,100%);margin:auto;transform:none}
  .quick-info,.cards,.contact{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .contact-box{flex-direction:column;text-align:center;align-items:stretch}
  .contact-buttons{justify-content:center}
}

@media (max-width:620px){
  .brand img{width:54px;height:54px}
  .brand span{max-width:165px;line-height:1.05}
  .hero,.section,.quick-info{width:min(100% - 28px,1180px)}
  h1{text-shadow:3px 3px 0 var(--yellow),6px 6px 0 #111}
  .btn{width:100%;box-shadow:5px 5px 0 #111}
  .quick-info article,.schedule-box,.contact-box,.address-box{padding:28px 22px;border-radius:24px}
  .section{padding:62px 0}
  .media-card,.video-card{min-height:300px;border-radius:22px}
  .floating-actions{left:12px;right:12px;bottom:12px;max-width:none}
  .floating-actions a{font-size:.9rem;padding:10px 12px}
  .footer{padding-bottom:120px}
}
