/* ============================================================
   VERMA DRIVING SCHOOL — hand-painted Ghibli-inspired cinematic
   ============================================================ */
:root {
  --paper: #faf5e8;
  --ink: #23372b;
  --forest: #1d3b2a;
  --leaf: #4d9a52;
  --sky: #4a9fd8;
  --sun: #f2c435;
  --poppy: #d64533;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito Sans", "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); overflow-x: hidden; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  background: linear-gradient(rgba(29,59,42,0.55), transparent);
  backdrop-filter: blur(2px);
}
.nav-brand { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: #fff8ea; letter-spacing: 0.04em; }
.nav-dot { color: var(--sun); }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a { color: #fff8ea; text-decoration: none; font-weight: 600; font-size: 0.9rem; opacity: 0.9; }
.nav-links a:hover { color: var(--sun); }
.nav-cta {
  background: var(--sun); color: var(--forest); text-decoration: none;
  font-weight: 800; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* ---------- cinematic scrub sections ---------- */
.cinematic { height: 480vh; position: relative; }
.cinematic .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.cinematic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tint { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(20,35,26,0.55) 100%); pointer-events: none; }

.overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; pointer-events: none; padding: 0 6vw;
}
.line { grid-area: 1/1; opacity: 0; will-change: opacity, transform; }
.overlay .btn-primary, .overlay a { pointer-events: auto; }

.kicker {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.35em;
  font-size: 0.75rem; font-weight: 800; color: var(--sun);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.overlay .kicker { position: relative; top: -16vh; }
.hero-title {
  font-family: var(--serif); font-weight: 600; letter-spacing: 0.06em;
  font-size: clamp(2.6rem, 7.5vw, 6rem); color: #fff8ea;
  text-shadow: 0 4px 30px rgba(15,30,20,0.7);
}
.hero-tag {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: #ffeec2; position: relative; top: 11vh; text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.mid-title {
  font-family: var(--serif); font-weight: 600; line-height: 1.2;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem); color: #fff8ea;
  text-shadow: 0 4px 26px rgba(15,30,20,0.75);
}
.story-copy {
  max-width: 620px; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.7;
  color: #fdf6e6; font-weight: 600; text-shadow: 0 2px 16px rgba(10,25,15,0.85);
}
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: #fff8ea; font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.85; transition: opacity 0.4s; animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* ---------- paper sections ---------- */
.paper { position: relative; background: var(--paper); padding: 7rem 0; z-index: 2; }
.paper::before {
  content: ""; position: absolute; top: -28px; left: 0; right: 0; height: 30px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 92% 65%, 80% 35%, 68% 70%, 55% 30%, 42% 68%, 30% 38%, 18% 72%, 8% 42%, 0 60%);
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 6vw; }
.paper .kicker { color: var(--leaf); }
.section-title {
  font-family: var(--serif); font-weight: 700; color: var(--forest);
  font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0.6rem 0 1rem;
}
.section-sub { max-width: 640px; font-size: 1.05rem; line-height: 1.7; color: #45584c; margin-bottom: 3rem; }

/* courses */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.course-card {
  background: #fffdf4; border: 1px solid #e5dcc2; border-radius: 18px;
  padding: 2rem 1.7rem; box-shadow: 0 10px 28px rgba(29,59,42,0.09);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.course-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(29,59,42,0.16); }
.course-emblem { font-size: 2rem; margin-bottom: 0.8rem; }
.course-card h3 { font-family: var(--serif); font-size: 1.35rem; color: var(--forest); margin-bottom: 0.3rem; }
.course-badge {
  display: inline-block; background: #eaf4e2; color: #3c7a41; font-weight: 800;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.course-card p { font-size: 0.95rem; line-height: 1.65; color: #45584c; }
.course-card ul { margin-top: 0.9rem; padding-left: 1.1rem; }
.course-card li { font-size: 0.9rem; line-height: 1.8; color: #3c5245; }
.course-card li::marker { color: var(--sun); }
.course-price { margin-top: 1rem; font-weight: 800; color: var(--forest); font-size: 0.92rem; }
.course-price small { font-weight: 600; color: #6a7d6e; }
.course-cta {
  display: inline-block; margin-top: 1rem; background: var(--forest); color: #fff8ea;
  text-decoration: none; font-weight: 800; font-size: 0.9rem;
  padding: 0.6rem 1.2rem; border-radius: 999px; transition: background 0.25s;
}
.course-cta:hover { background: var(--leaf); }
.free-note a { color: var(--sky); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 4rem 0 1.5rem; text-align: center; }
.stat-num { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: var(--leaf); }
.stat-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6a7d6e; }
.free-note { text-align: center; font-size: 1rem; color: #45584c; }
.free-note strong { color: var(--forest); }

/* ---------- visit: 3D map + hours + form ---------- */
.visit-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; margin-top: 2.5rem; align-items: start; }

.map-stage { perspective: 1100px; }
.map-tilt {
  transform: rotateX(38deg) rotateZ(-7deg);
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 24px 48px 60px rgba(29,59,42,0.35);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.map-stage:hover .map-tilt { transform: rotateX(24deg) rotateZ(-4deg) scale(1.02); }
.map3d { display: block; width: 100%; height: auto; border-radius: 20px; }
.map-label text { font-family: var(--sans); font-weight: 800; font-size: 15px; fill: #1d3b2a; opacity: 0.85; }
.map-guelph { font-family: var(--serif); font-weight: 700; font-size: 26px; fill: #fff8ea; letter-spacing: 4px;
  paint-order: stroke; stroke: #1d3b2a; stroke-width: 5px; }
.pin { animation: pinFloat 2.6s ease-in-out infinite; transform-origin: 320px 282px; }
@keyframes pinFloat { 50% { transform: translateY(-10px); } }
.map-car { offset-path: path("M60,470 C140,380 200,360 320,300 C440,240 480,160 560,60"); animation: drive 14s linear infinite; }
@keyframes drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.map-caption { margin-top: 2.2rem; font-weight: 700; color: #45584c; font-size: 0.92rem; }
.map-link { display: inline-block; margin-top: 0.4rem; color: var(--sky); font-weight: 800; text-decoration: none; }
.map-link:hover { text-decoration: underline; }

.hours { background: #fffdf4; border: 1px solid #e5dcc2; border-radius: 18px; padding: 1.8rem; margin-bottom: 1.6rem; }
.hours h3, .book-form h3 { font-family: var(--serif); color: var(--forest); font-size: 1.3rem; margin-bottom: 1rem; }
.hours ul { list-style: none; }
.hours li { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px dashed #e0d6ba; font-size: 0.95rem; }
.hours li span:last-child { font-weight: 700; color: var(--forest); }
.hours-note { margin-top: 0.9rem; font-size: 0.83rem; color: #6a7d6e; }
.hours-note a { color: var(--sky); font-weight: 700; text-decoration: none; }
.footer a { color: #cfe3cf; }
.footer-links { text-align: center; }

.book-form { background: var(--forest); border-radius: 18px; padding: 1.9rem; color: #fff8ea; }
.book-form h3 { color: #fff8ea; }
.book-form label { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; color: #cfe3cf; }
.book-form input, .book-form select {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.9rem; border-radius: 10px;
  border: 1px solid #3c5e48; background: #fffdf4; color: var(--ink);
  font-family: var(--sans); font-size: 0.95rem;
}
.btn-primary {
  display: inline-block; width: 100%; border: 0; cursor: pointer; text-align: center;
  background: var(--sun); color: var(--forest); font-family: var(--sans);
  font-weight: 800; font-size: 1rem; padding: 0.9rem 1.6rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); text-decoration: none;
  transition: transform 0.25s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary.big { width: auto; font-size: 1.15rem; padding: 1rem 2.4rem; }
.form-done { margin-top: 1rem; font-size: 0.9rem; line-height: 1.6; color: #ffeec2; }
.form-done a { color: var(--sun); }

/* ---------- footer ---------- */
.footer {
  background: #142a1d; color: #9db8a3; font-size: 0.85rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.6rem 2rem;
}

/* ---------- film grain ---------- */
.grain { position: fixed; inset: -100%; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(4) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)} 100%{transform:translate(2%,1%)} }

/* ---------- scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- mobile pass ---------- */
@media (max-width: 860px) {
  .nav { padding: 0.8rem 1.1rem; }
  .nav-links { display: none; }
  .course-grid, .stats, .visit-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .cinematic { height: 380vh; }
  .map-tilt { transform: rotateX(30deg) rotateZ(-5deg); }
  .footer { justify-content: center; text-align: center; }
}