*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Palette from the actual garage photo */
:root {
  --bg:         #F0ECE4;
  --fg:         #1C1917;
  --card:       #E8E4DC;
  --primary:    #1B52C4;
  --primary-fg: #fff;
  --red:        #C8371F;
  --amber:      #C07A0A;
  --dark:       #2E2A26;
  --muted-fg:   #706B64;
  --border:     #C4C0B8;
  --radius:     0.375rem;
  --font-display: 'Archivo Black', ui-sans-serif, sans-serif;
  --font-body:    'Inter', ui-sans-serif, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: inherit; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft{ from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleYIn  { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes bounceY   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.4} }

.reveal      { opacity:0; transform:translateY(20px);  transition:opacity .6s ease, transform .6s ease; }
.reveal-left { opacity:0; transform:translateX(-20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible, .reveal-left.visible { opacity:1; transform:none; }

/* ── LAYOUT ── */
.container { max-width:80rem; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .container{ padding:0 1.5rem; } }

.section-py { padding:6rem 0; }
.border-top { border-top:3px solid var(--border); }

.red-stripe {
  width:100%; height:6px;
  background: repeating-linear-gradient(
    90deg,
    var(--red) 0, var(--red) 24px,
    #B02E18 24px, #B02E18 48px
  );
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; background:var(--primary); color:var(--primary-fg);
  font-size:.875rem; font-weight:600; border-radius:var(--radius);
  text-decoration:none; border:none; cursor:pointer;
  transition:background .2s; font-family:var(--font-body);
}
.btn-primary:hover { background:#1442A8; }

.btn-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; background:transparent; color:var(--fg);
  font-size:.875rem; border:2px solid var(--fg);
  border-radius:var(--radius); text-decoration:none;
  cursor:pointer; transition:all .2s; font-family:var(--font-body);
}
.btn-outline:hover { background:var(--fg); color:var(--bg); }

/* ── NAVBAR ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background: var(--dark);
  border-bottom:4px solid var(--primary);
}
.nav-inner {
  display:flex; align-items:center;
  justify-content:space-between; height:4rem;
}
.nav-logo { display:flex; align-items:center; gap:.75rem; }
.nav-logo-e {
  width:2rem; height:2rem; border-radius:50%;
  border:3px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.9rem; color:var(--primary);
}
.nav-logo-name {
  font-family:var(--font-display); font-size:1.2rem;
  letter-spacing:.05em; color:#fff;
}

.nav-links { display:none; align-items:center; gap:2rem; }
@media(min-width:768px){ .nav-links{ display:flex; } }

.nav-link {
  background:none; border:none; cursor:pointer;
  font-size:.8rem; color:rgba(255,255,255,.65);
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .2s; font-family:var(--font-body);
}
.nav-link:hover { color:#fff; }

.nav-cta { display:none; align-items:center; gap:1rem; }
@media(min-width:768px){ .nav-cta{ display:flex; } }

.nav-email {
  display:flex; align-items:center; gap:.5rem;
  font-size:.875rem; color:rgba(255,255,255,.65);
  text-decoration:none; transition:color .2s;
}
.nav-email:hover { color:#fff; }

.nav-hamburger {
  display:flex; background:none; border:none;
  cursor:pointer; color:#fff; padding:.25rem;
}
@media(min-width:768px){ .nav-hamburger{ display:none; } }

.nav-mobile {
  overflow:hidden; max-height:0;
  transition:max-height .3s ease;
  background: var(--dark);
}
.nav-mobile.open { max-height:400px; border-bottom:2px solid var(--primary); }

.nav-mobile-inner { padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.nav-mobile-link {
  background:none; border:none; cursor:pointer;
  text-align:left; font-size:.875rem; color:rgba(255,255,255,.65);
  text-transform:uppercase; letter-spacing:.1em;
  padding:.5rem 0; font-family:var(--font-body);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-mobile-link:hover { color:#fff; }
.nav-mobile-sep {
  padding-top:.75rem; margin-top:.25rem;
  display:flex; flex-direction:column; gap:.75rem;
}

.icon { display:inline-block; vertical-align:middle; flex-shrink:0; }

/* ── HERO ── */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--bg);
}

.hero-brick {
  position:absolute; inset:0; opacity:.04;
  background-image:
    repeating-linear-gradient(0deg, var(--fg) 0, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, var(--fg) 0, transparent 1px, transparent 40px);
}

.hero-line {
  position:absolute; left:2rem; top:5rem; bottom:5rem;
  width:3px; background:var(--primary);
  transform-origin:top; animation:scaleYIn 1.2s .5s ease both;
  display:none;
}
@media(min-width:1024px){ .hero-line{ display:block; } }


.hero-content {
  position:relative; z-index:10; width:100%;
  padding-bottom:4rem; padding-top:8rem;
}
.hero-layout { display:grid; gap:3rem; align-items:flex-end; }
@media(min-width:1024px){ .hero-layout{ grid-template-columns:1fr 1fr; } }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem;
  border:2px solid var(--primary);
  border-radius:2px; margin-bottom:2rem;
  animation:fadeInLeft .6s .3s ease both;
  background: rgba(27,82,196,.06);
}
.hero-badge-dot {
  width:8px; height:8px; border-radius:50%;
  background:#22c55e; animation:pulse 2s infinite;
}
.hero-badge span { font-size:.8rem; letter-spacing:.12em; color:var(--primary); font-weight:600; }

.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2.25rem,8vw,3.75rem);
  line-height:1; letter-spacing:-.01em;
  animation:fadeInUp .8s .4s ease both;
  color: var(--dark);
}
@media(min-width:1024px){
  .hero-title { font-size:clamp(2rem,3.8vw,3.25rem); }
}
.hero-title .accent { color:var(--primary); }

.hero-desc {
  margin-top:1.5rem; font-size:1.125rem;
  color:var(--muted-fg); max-width:28rem;
  line-height:1.75; animation:fadeInUp .6s .7s ease both;
}
.hero-actions {
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem;
  animation:fadeInUp .6s .9s ease both;
}
.hero-strip {
  margin-top:2.5rem; display:grid; gap:.75rem;
  animation:fadeInUp .6s 1.1s ease both;
}
@media(min-width:640px){ .hero-strip{ grid-template-columns:repeat(3,1fr); } }

.info-card {
  display:flex; align-items:center; gap:.75rem;
  padding:1rem; border:2px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.5);
  transition:border-color .2s;
}
.info-card:hover { border-color:var(--primary); }
.info-card-icon { color:var(--primary); }
.info-card-lbl { font-size:.7rem; color:var(--muted-fg); text-transform:uppercase; letter-spacing:.08em; }
.info-card-val { font-size:.875rem; font-weight:700; color:var(--dark); }

.hero-right { display:none; animation:fadeInUp .8s .6s ease both; }
@media(min-width:1024px){ .hero-right{ display:block; } }

/* ── GARAGE FACADE ── */
.garage {
  position:relative; width:100%; height:18rem;
  background:#F2EEE6; border-radius:2px;
  overflow:hidden; border:3px solid var(--dark);
  box-shadow:inset 0 0 60px rgba(0,0,0,.08);
}
.g-top {
  position:absolute; top:0; left:0; right:0; height:45%;
  background:var(--dark);
  display:flex; flex-direction:column; justify-content:space-evenly;
  padding:6px 0; overflow:hidden;
}
.g-slat { height:6px; background:rgba(0,0,0,.4); margin:0 8px; border-radius:1px; }
.g-red  { position:absolute; top:44%; left:0; right:0; height:10px; background:var(--red); }
.g-amber-stripe { position:absolute; top:calc(44% + 12px); left:0; right:0; height:4px; background:var(--amber); }
.g-sign-area {
  position:absolute; top:55%; left:.75rem; right:.75rem; bottom:35%;
  background:#fff; border:2px solid #ccc;
  display:flex; align-items:center; padding:0 1rem; gap:1rem;
}
.g-e-circle {
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:2px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.65rem; color:var(--primary);
  flex-shrink:0;
}
.g-sign-text {
  flex:1; text-align:center;
  font-family:var(--font-display); font-size:clamp(.7rem,2vw,1rem);
  letter-spacing:.1em; color:var(--primary);
}
.g-door {
  position:absolute; bottom:0; left:10%; width:35%; height:35%;
  background:rgba(0,0,0,.55); border:2px solid #aaa; border-bottom:none;
  display:flex; align-items:center; justify-content:center;
}
.g-door span { font-size:.65rem; color:rgba(255,255,255,.5); letter-spacing:.1em; text-transform:uppercase; }
.g-windows {
  position:absolute; bottom:0; right:4%; width:45%; height:35%;
  display:flex; gap:6px; align-items:stretch; padding:6px;
}
.g-win { flex:1; border:3px solid var(--amber); background:rgba(0,0,0,.15); }

.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.stat-card {
  padding:1rem; border:2px solid var(--border); border-radius:var(--radius);
  background:rgba(255,255,255,.5); text-align:center; transition:border-color .2s;
}
.stat-card:hover { border-color:var(--primary); }
.stat-val { font-family:var(--font-display); font-size:1.5rem; color:var(--primary); }
.stat-lbl { font-size:.75rem; color:var(--muted-fg); margin-top:.25rem; }

.hero-scroll { display:flex; justify-content:center; margin-top:4rem; animation:fadeInUp .6s 1.5s ease both; }
.bounce { animation:bounceY 2s infinite; color:var(--muted-fg); }

/* ── SECTION HEADERS ── */
.sec-label {
  font-size:.8rem; color:var(--primary); text-transform:uppercase;
  letter-spacing:.12em; margin-bottom:.75rem; font-weight:600;
}
.sec-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1; color:var(--dark);
}
.sec-title .accent { color:var(--primary); }

/* ── ADVANTAGES ── */
.adv-grid { display:grid; gap:1rem; }
@media(min-width:640px){ .adv-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .adv-grid{ grid-template-columns:repeat(3,1fr); } }

.adv-card {
  padding:1.25rem; border:2px solid var(--border);
  border-radius:var(--radius); background:rgba(255,255,255,.5);
  transition:border-color .3s, box-shadow .3s;
}
.adv-card:hover { border-color:var(--primary); box-shadow:0 4px 20px rgba(27,82,196,.08); }
.adv-icon { color:var(--primary); margin-bottom:.75rem; transition:transform .2s; }
.adv-card:hover .adv-icon { transform:scale(1.1); }
.adv-title { font-family:var(--font-display); font-size:1rem; margin-bottom:.25rem; color:var(--dark); }
.adv-desc { font-size:.875rem; color:var(--muted-fg); line-height:1.75; }

/* ── FEATURES ── */
.feat-list { display:flex; flex-direction:column; gap:1.25rem; margin-top:2rem; }
.feat-item { display:flex; align-items:flex-start; gap:1rem; }
.feat-icon {
  width:2.25rem; height:2.25rem; border-radius:var(--radius);
  background:rgba(27,82,196,.1); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:var(--primary);
  border:1px solid rgba(27,82,196,.2);
}
.feat-title { font-weight:700; font-size:.875rem; color:var(--dark); }
.feat-desc  { font-size:.75rem; color:var(--muted-fg); margin-top:2px; }

/* ── SCHEDULE ── */
.sched-layout { display:grid; gap:4rem; }
@media(min-width:1024px){ .sched-layout{ grid-template-columns:1fr 1fr; } }

.sched-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 0; border-bottom:2px solid var(--border);
}
.sched-day { display:flex; align-items:center; gap:.75rem; color:var(--fg); }
.sched-time { font-size:.875rem; font-weight:700; color:var(--primary); letter-spacing:.08em; }
.sched-note {
  margin-top:2rem; padding:1rem;
  border-left:4px solid var(--primary);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(27,82,196,.06); font-size:.875rem;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
.sched-note strong { color:var(--primary); }

.modal-list { display:flex; flex-direction:column; gap:.75rem; margin-top:2rem; }
.modal-item {
  display:flex; align-items:flex-start; gap:1rem; padding:1rem;
  border:2px solid var(--border); border-radius:var(--radius);
  background:rgba(255,255,255,.5); transition:border-color .2s;
}
.modal-item:hover { border-color:var(--primary); }
.modal-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); margin-top:.3rem; flex-shrink:0; }
.modal-name { font-weight:700; font-size:.875rem; color:var(--dark); }
.modal-desc { font-size:.75rem; color:var(--muted-fg); margin-top:2px; }
.sched-foot { font-size:.75rem; color:var(--muted-fg); margin-top:1.25rem; }
.sched-foot a { color:var(--primary); font-weight:600; }
.sched-foot a:hover { text-decoration:underline; }

/* ── MAP ── */
.map-layout {
  display:grid; border:2px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
@media(min-width:1024px){ .map-layout{ grid-template-columns:2fr 1fr; } }

.map-embed { position:relative; height:20rem; }
@media(min-width:1024px){ .map-embed{ height:auto; min-height:25rem; } }
.map-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.map-info {
  padding:2rem; background:rgba(255,255,255,.6);
  display:flex; flex-direction:column; justify-content:space-between;
}
@media(min-width:1024px){ .map-info{ border-left:2px solid var(--border); } }
@media(max-width:1023px){ .map-info{ border-top:2px solid var(--border); } }

.map-items { display:flex; flex-direction:column; gap:1.5rem; }
.map-item  { display:flex; align-items:flex-start; gap:1rem; }
.map-ico {
  width:2.25rem; height:2.25rem; border-radius:var(--radius);
  background:rgba(27,82,196,.08); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:var(--primary);
  border:1px solid rgba(27,82,196,.15);
}
.map-lbl  { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-fg); margin-bottom:3px; }
.map-val  { font-size:.875rem; line-height:1.5; font-weight:600; color:var(--dark); }
.map-sub  { font-size:.75rem; color:var(--muted-fg); margin-top:2px; }

/* ── CORPORATE ── */
.corp-layout { display:grid; gap:4rem; align-items:start; }
@media(min-width:1024px){ .corp-layout{ grid-template-columns:1fr 1fr; } }

.corp-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.375rem .75rem;
  border:2px solid var(--primary);
  border-radius:2px; color:var(--primary); margin-bottom:1.5rem;
  background:rgba(27,82,196,.06);
}
.corp-badge span { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.corp-title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); line-height:1; margin-bottom:1.5rem; color:var(--dark); }
.corp-title .accent { color:var(--primary); }
.corp-desc { color:var(--muted-fg); line-height:1.75; margin-bottom:2rem; max-width:32rem; }

.corp-bens { display:flex; flex-direction:column; gap:.75rem; margin-bottom:2.5rem; }
.corp-ben  { display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:var(--fg); }
.corp-ben-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; }

/* ── FORM ── */
.form-card {
  padding:2rem; border:2px solid var(--border);
  border-radius:var(--radius); background:rgba(255,255,255,.7);
  box-shadow:0 4px 30px rgba(0,0,0,.06);
}
.form-title { font-family:var(--font-display); font-size:1.25rem; margin-bottom:1.5rem; color:var(--dark); }
.form-row2 { display:grid; gap:1rem; }
@media(min-width:640px){ .form-row2{ grid-template-columns:1fr 1fr; } }
.form-group { display:flex; flex-direction:column; gap:6px; margin-top:1rem; }
.form-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-fg); font-weight:600; }
.form-input, .form-textarea, .form-select {
  width:100%; padding:.625rem .75rem;
  background:#fff; border:2px solid var(--border);
  border-radius:var(--radius); color:var(--fg); font-size:.875rem;
  font-family:var(--font-body); outline:none; transition:border-color .2s;
}
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--primary); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--muted-fg); }
.form-textarea { resize:vertical; }
.form-select { appearance:none; cursor:pointer; }
.form-submit {
  width:100%; padding:.875rem; background:var(--primary);
  color:#fff; font-family:var(--font-body); font-size:1rem;
  font-weight:700; border:none; border-radius:var(--radius);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:.5rem; margin-top:1rem; transition:background .2s; letter-spacing:.04em;
}
.form-submit:hover { background:#1442A8; }
.form-success {
  display:none; flex-direction:column; align-items:center;
  padding:3rem 0; text-align:center;
}
.form-success.visible { display:flex; }
.form-success-icon { color:var(--primary); margin-bottom:1rem; }

/* ── FOOTER ── */
footer {
  background:var(--dark);
  color:rgba(255,255,255,.85);
  border-top:4px solid var(--primary);
  padding:4rem 0;
}
.footer-grid { display:grid; gap:2.5rem; }
@media(min-width:640px) { .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }

.footer-brand { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.footer-brand-e {
  width:2rem; height:2rem; border-radius:50%;
  border:2px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.9rem; color:var(--primary);
}
.footer-brand-name { font-family:var(--font-display); font-size:1.25rem; color:#fff; }
.footer-brand-desc { font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.75; }

.footer-sec-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--primary); margin-bottom:1rem; font-weight:700; }
.footer-links { display:flex; flex-direction:column; gap:.75rem; }
.footer-link {
  display:flex; align-items:center; gap:.75rem;
  font-size:.875rem; color:rgba(255,255,255,.55); text-decoration:none; transition:color .2s;
}
.footer-link:hover { color:#fff; }
.footer-addr { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; color:rgba(255,255,255,.55); }
.footer-hours p { font-size:.875rem; color:rgba(255,255,255,.55); margin-bottom:.5rem; }
.footer-hours span { color:#fff; font-weight:600; }

.footer-bottom {
  margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; gap:1rem;
  font-size:.75rem; color:rgba(255,255,255,.35);
}
@media(min-width:640px){ .footer-bottom{ flex-direction:row; } }

.mb-8  { margin-bottom:2rem; }
.mb-10 { margin-bottom:2.5rem; }