/* Drive2Up: a road-school visual identity for the existing static site. */
:root {
  --ink: #1b2520;
  --navy: #163b31;
  --blue: #17654d;
  --lime: #f1c34c;
  --paper: #f5f2e8;
  --muted: #68736a;
  --line: #d9ded3;
  --signal: #f1c34c;
  --forest: #163b31;
  --road: #26312c;
  --white: #fffef9;
}

html { scroll-padding-top: 86px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Trebuchet MS", Arial, sans-serif;
}
::selection { background: var(--signal); color: var(--ink); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }

.site-header {
  background: #f5f2e8f2;
  border-bottom: 1px solid #163b3124;
  box-shadow: 0 6px 22px #163b3108;
}
.header-inner { max-width: 1420px; height: 82px; }
.brand { gap: 11px; letter-spacing: -1.2px; }
.brand-mark {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: var(--forest);
  color: var(--signal);
  box-shadow: 0 4px 0 #102d26;
  transform: none;
}
.brand-mark:after { background: var(--signal); width: 14px; height: 3px; bottom: 7px; right: -3px; transform: rotate(-42deg); }
.brand b { color: var(--forest); font-weight: 800; }
.brand strong { color: #c18b16; font-weight: 900; }
.brand small { color: #6b756d; font-size: 8px; letter-spacing: 2.1px; }
.main-nav a { color: #4e5c53; font-size: 12px; font-weight: 700; }
.main-nav a:hover, .text-link:hover { color: #a6750a; }
.header-phone { color: var(--forest); font-weight: 700; }
.button {
  border-radius: 7px;
  padding: 15px 20px;
  font-size: 13px;
  box-shadow: 0 3px 0 #102d2615;
}
.button-primary { background: var(--forest); color: #fffef9; }
.button-primary:hover { background: #205745; }
.button-dark { background: #1b2520; color: #fffef9; }
.button-lime { background: var(--signal); color: var(--ink); }
.button-ghost { border-color: #bec7bb; background: #fffef966; }
.button-outline-light { border-color: #ffffff75; }
.button-small { padding: 12px 16px; }

.hero {
  max-width: 1480px;
  min-height: min(790px, calc(100vh - 82px));
  padding-top: 66px;
  padding-bottom: 30px;
  position: relative;
}
.hero:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30px;
  right: 0;
  width: 43%;
  height: 72%;
  background: #eae5d6;
  border-radius: 34px 0 0 34px;
}
.hero-grid, .hero-meta { position: relative; z-index: 1; }
.hero-grid { grid-template-columns: .9fr 1.1fr; gap: 5vw; }
.hero-copy { padding: 28px 0 48px; }
.eyebrow, .section-kicker {
  color: #647268;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
}
.eyebrow { margin-bottom: 23px; }
.pulse-dot { background: var(--signal); box-shadow: 0 0 0 5px #f1c34c45; }
.hero h1, h2 {
  color: var(--ink);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -4.3px;
}
.hero h1 { max-width: 660px; font-size: clamp(52px, 6.2vw, 87px); line-height: .97; }
.hero h1 em, .section-head h2 em { color: var(--blue); font-style: normal; }
.hero-lead { color: #56645b; max-width: 510px; font-size: 16px; line-height: 1.7; }
.hero-trust { border-top: 1px solid var(--line); max-width: 440px; padding-top: 20px; }
.hero-trust p { color: #58645c; }
.hero-trust strong { color: var(--ink); }
.avatar-stack span { background: #e7b83f; color: #243229; border: 2px solid var(--paper); }
.avatar-stack span:nth-child(2) { background: #426e5d; color: white; }
.avatar-stack span:nth-child(3) { background: #d9e0d1; color: var(--forest); }
.hero-visual {
  min-height: 570px;
  border: 8px solid var(--white);
  border-radius: 24px 24px 36px 24px;
  background: #303a34;
  box-shadow: 0 22px 55px #1b25201d;
}
.hero-photo { filter: saturate(.86) contrast(1.04); }
.hero-visual:after { background: linear-gradient(180deg, #10251d00 42%, #10251d9c 100%); }
.hero-visual:before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 35px;
  height: 35px;
  border: 2px solid #fff9;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: inset 0 0 0 5px var(--forest);
}
.hero-image-caption {
  z-index: 2;
  left: 28px;
  bottom: 27px;
  padding: 12px 15px;
  border-left: 3px solid var(--signal);
  background: #163b31dc;
  backdrop-filter: blur(5px);
}
.hero-image-caption span { color: var(--signal); }
.hero-image-caption b { font-size: 18px; }
.hero-meta { color: #677168; font-family: "Courier New", monospace; }
.meta-line { background: #d0d5ca; }
.meta-line i { background: var(--blue); }
.scroll-hint { color: #536159; }

.quick-contact {
  background: var(--forest);
  color: white;
  padding-top: 44px;
  padding-bottom: 44px;
  position: relative;
  overflow: hidden;
}
.quick-contact:after {
  content: "";
  position: absolute;
  right: 20%;
  top: -90px;
  width: 3px;
  height: 280px;
  border-left: 3px dashed #ffffff18;
  transform: rotate(26deg);
  pointer-events: none;
  z-index: 0;
}
.quick-contact > * { position: relative; z-index: 1; }
.quick-contact .section-kicker { color: var(--signal); }
.quick-contact h2 { color: white; font-size: 40px; letter-spacing: -2.2px; }
.quick-contact h2 span { color: var(--signal); }
.quick-contact .text-link { color: white; }
.quick-contact .muted-link { color: #c1cec5; }
.contact-stamp { color: #d6ded8; font-size: 11px; }
.stamp-ring { border-color: var(--signal); color: var(--signal); font-weight: 800; }

.section { padding-top: 108px; padding-bottom: 108px; }
.section-head { margin-bottom: 48px; }
.section-head h2 { font-size: clamp(44px, 5vw, 67px); letter-spacing: -3.6px; line-height: 1.02; }
.section-head > p { color: var(--muted); max-width: 390px; font-size: 14px; line-height: 1.75; }
.class-grid { gap: 17px; }
.class-card {
  min-height: 330px;
  padding: 24px;
  border: 1px solid #d8ded3;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 8px 24px #20362a08;
}
.class-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px #20362a16; }
.class-card.tone-blue, .class-card.tone-lime, .class-card.tone-violet { background: var(--white); }
.class-card.tone-lime { border-top: 4px solid var(--signal); }
.class-card.tone-blue { border-top: 4px solid #43806b; }
.class-card.tone-violet { border-top: 4px solid #8b987d; }
.card-index, .class-tag { color: #6c786d; font-family: "Courier New", monospace; }
.class-tag { color: var(--forest); }
.class-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 27px 0 18px;
  border: 2px solid var(--forest);
  border-radius: 14px;
  background: var(--signal);
  color: var(--forest);
  font-size: 19px;
  font-weight: 900;
  transform: rotate(-4deg);
}
.class-card h3 { font-size: 25px; font-weight: 800; }
.class-card p { color: #66736a; line-height: 1.65; }
.card-bottom { border-top: 1px solid var(--line); color: #647168; }
.card-bottom a { background: var(--forest); color: white; border-radius: 50%; }
.section-foot { border-top: 1px solid var(--line); color: #606d63; }
.text-link { color: var(--forest); font-weight: 800; }

.dark-section { background: var(--forest); color: white; }
.light-head h2, .dark-section h2 { color: white; }
.dark-section .section-kicker { color: var(--signal); }
.light-head > p { color: #c1cec4; }
.benefit-feature { border-right-color: #ffffff2b; }
.benefit-feature h3 { color: var(--signal); font-size: clamp(45px, 5vw, 68px); }
.benefit-feature p, .benefit-row p { color: #d4ddd6; }
.benefit-number { color: var(--signal); }
.benefit-row { border-top-color: #ffffff28; }
.benefit-row h3 { color: white; }
.benefit-row > span:last-child { color: var(--signal); }
.big-symbol { color: #ffffff20; }

.steps-section { background: #eeece1; }
.steps-track:before { border-top: 2px dashed #bec8bd; background: none; }
.step-number {
  border: 3px solid var(--forest);
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 0 0 6px #eeece1;
  font-weight: 900;
}
.step-number.active { background: var(--signal); color: var(--forest); }
.step h3 { color: var(--ink); font-weight: 800; }
.step p { color: #68736a; }

.schedule-section { background: var(--paper); }
.schedule-intro h2, .schedule-intro .section-kicker { color: var(--ink); }
.schedule-intro > p { color: var(--muted); line-height: 1.7; }
.schedule-board { border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 12px 35px #20362a0b; overflow: hidden; }
.board-header { background: var(--forest); color: white; }
.board-header > span:first-child { color: var(--signal); }
.live-dot { color: #d9e2da; }
.live-dot i { background: var(--signal); }
.schedule-row { border-top-color: #e5e8e0; }
.schedule-row.featured { background: #faf4df; }
.day { color: var(--forest); font-weight: 900; }
.time { color: #4f5e53; }
.topic { color: var(--ink); }
.seats { color: #69756b; }
.schedule-row > a { color: var(--forest); }
.board-footer { background: #eeece1; color: #5e6d61; }

.pricing-section { background: #e8ebe1; }
.price-card { border: 1px solid #d3dacf; border-top: 5px solid var(--signal); border-radius: 15px; background: var(--white); box-shadow: 0 15px 40px #20362a10; }
.price-card-head { background: var(--forest); color: white; }
.price-status { color: var(--signal); }
.price-row { border-top-color: var(--line); }
.price-row strong { color: var(--forest); }
.price-note { color: #6d786d; }
.price-aside h3 { color: var(--forest); }
.aside-num { color: #c18b16; }

.about-section { background: var(--paper); }
.about-image { min-height: 500px; border: 8px solid var(--white); border-radius: 20px; box-shadow: 0 18px 40px #20362a12; background-image: linear-gradient(120deg, #153b31aa, #153b3112), url(/images/vehicle-01.png); }
.about-label { background: #163b31e8; left: 22px; bottom: 22px; padding: 12px 15px; }
.about-label span { background: var(--signal); }
.about-copy h2 { line-height: 1.03; }
.about-copy > p { color: #5e6b61; line-height: 1.8; }
.facts { border-top-color: var(--line); }
.facts > div { border-color: var(--line); }
.facts strong { color: var(--forest); }
.facts span { color: #6b776d; }

.vehicles-section { background: var(--forest); color: white; }
.vehicles-section h2 { color: white; }
.vehicles-section .section-kicker { color: var(--signal); }
.vehicle-copy > p { color: #ccd7cf; line-height: 1.7; }
.vehicle-placeholder { border: 1px solid #ffffff2c; border-radius: 16px; background: #102f27; padding: 20px; }
.vehicle-tag { color: var(--signal); }
.vehicle-image { border-radius: 8px; object-fit: cover; }
.vehicle-caption { border-top-color: #ffffff35; }
.vehicle-caption span { color: #aebeb2; }
.vehicle-caption strong { color: white; }
.review-section { background: #e9e6da; }
.review-section .section-kicker { color: #657366; }
.review-section h2 { color: var(--ink); }
.review-placeholder { border-left: 4px solid var(--signal); background: var(--white); }
.review-mark { color: #c18b16; }

.faq-section { background: var(--white); }
.faq-section .section-kicker { color: #647268; }
.faq-section h2 { color: var(--ink); }
.faq-item { border-top-color: var(--line); }
.faq-item button { color: var(--ink); }
.faq-item button > span:first-child { color: #9a761f; font-family: "Courier New", monospace; }
.faq-item button > span:last-child { color: var(--forest); }
.faq-item p { color: #66736a; line-height: 1.75; }

.cta-section { background: var(--forest); color: white; overflow: hidden; }
.cta-section:before { content: ""; position: absolute; z-index: 0; top: 0; right: 18%; height: 100%; border-left: 2px dashed #ffffff22; transform: rotate(21deg); }
.cta-inner { position: relative; z-index: 1; }
.cta-section .section-kicker { color: var(--signal); }
.cta-section h2 { color: white; }
.cta-section p { color: #d1ddd3; }
.cta-road { border-color: #f1c34c; }
.cta-art { opacity: .82; }

.form-section { background: #eeece1; gap: 7vw; }
.form-intro h2 { color: var(--forest); }
.form-intro > p { color: #606d63; line-height: 1.75; }
.form-contact { border-top-color: #ccd4ca; color: var(--forest); }
.form-contact span { color: #78847a; }
.form-wrap { border: 1px solid #d8ded3; border-top: 5px solid var(--signal); border-radius: 14px; background: var(--white); padding: 32px; box-shadow: 0 14px 36px #20362a0b; }
.form-wrap label { color: #58665c; font-family: "Courier New", monospace; font-size: 11px; font-weight: 700; }
.form-wrap input, .form-wrap textarea, .form-wrap select { border-bottom-color: #cbd3c8; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 14px; }
.form-wrap input:focus, .form-wrap textarea:focus, .form-wrap select:focus { border-color: var(--forest); }
.check-label a { color: var(--blue); text-decoration: underline; }
.form-note { color: #778278; font-size: 10px; }
.success-message > span { background: var(--signal); color: var(--forest); }

.site-footer { background: #112f28; color: white; padding-top: 70px; }
.brand-light b, .brand-light strong { color: white; }
.brand-light strong { color: var(--signal); }
.brand-light .brand-mark { background: var(--signal); color: var(--forest); box-shadow: 0 4px 0 #0a211b; }
.brand-light .brand-mark:after { background: var(--forest); }
.brand-light small { color: #bfcbc1; }
.footer-brand p, .footer-col { color: #c4d0c7; }
.footer-mail { color: var(--signal); }
.footer-col > span { color: var(--signal); }
.footer-col p { color: #a8b8ac; }
.footer-bottom { border-top-color: #ffffff27; color: #a6b5aa; }
.footer-bottom a:hover, .footer-bottom b { color: var(--signal); }
.mobile-bar { background: #112f28; }
.mobile-bar span { color: var(--signal); }

.cookie-banner { border: 1px solid #d8ded3; border-top: 4px solid var(--signal); border-radius: 12px; box-shadow: 0 18px 45px #10251d2b; }
.cookie-actions .button { min-width: 154px; }
.cookie-modal-backdrop { background: #10251d99; }
.cookie-modal { border-radius: 16px; }
.cookie-modal h2 { color: var(--forest); }
.cookie-option { border-top-color: var(--line); }

.legal-page-hero { background: var(--forest); }
.legal-page-hero h1 { color: white; }
.legal-page-hero .section-kicker { color: var(--signal); }
.legal-page-hero .legal-intro { color: #d0dcd2; }
.legal-page-content { background: var(--paper); }
.legal-grid > div { border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.legal-grid strong, .legal-copy h2 { color: var(--forest); }
.legal-grid p, .legal-copy p { color: #5f6c62; }
.legal-footer { background: #112f28; }

@media (max-width: 1050px) {
  .hero { min-height: auto; }
  .hero-grid { gap: 3vw; }
  .hero-visual { min-height: 470px; }
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 11px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 70px; }
  .site-header { background: #f5f2e8f5; }
  .header-inner { height: 68px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand > span:last-child { width: 106px; }
  .menu-toggle { color: var(--forest); border: 1px solid #cbd4c9; border-radius: 7px; padding: 7px 10px; }
  .main-nav { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 14px 20px #1b252015; }
  .main-nav a { color: var(--forest); font-size: 13px; }
  .hero { padding: 43px 20px 22px; }
  .hero:before { top: auto; bottom: 16px; width: 84%; height: 39%; border-radius: 24px 0 0 24px; }
  .hero-grid { gap: 28px; }
  .hero h1 { font-size: clamp(47px, 12vw, 64px); letter-spacing: -3.2px; }
  .hero-lead { font-size: 15px; }
  .hero-visual { min-height: 390px; border-width: 6px; border-radius: 18px 18px 26px 18px; }
  .hero-visual:before { top: 13px; left: 13px; width: 29px; height: 29px; }
  .hero-image-caption { left: 17px; bottom: 17px; padding: 10px 12px; }
  .hero-image-caption b { font-size: 15px; }
  .hero-meta { gap: 10px; }
  .quick-contact { padding: 34px 20px 38px; }
  .quick-contact h2 { font-size: 34px; }
  .section { padding: 76px 20px; }
  .section-head h2 { font-size: clamp(42px, 11vw, 54px); letter-spacing: -2.8px; }
  .class-card { min-height: 285px; }
  .benefit-feature { border-right: 0; border-bottom: 1px solid #ffffff2b; padding-bottom: 25px; }
  .steps-track { gap: 27px 14px; }
  .schedule-section, .pricing-section, .about-section, .vehicles-section, .review-section, .faq-section { padding-left: 20px; padding-right: 20px; }
  .about-image { min-height: 350px; border-width: 6px; border-radius: 15px; }
  .vehicle-placeholder { margin-top: 35px; }
  .cta-section { padding: 75px 20px 230px; }
  .cta-section h2 { font-size: 45px; letter-spacing: -3px; }
  .form-section { padding: 76px 20px; }
  .form-wrap { padding: 21px; border-radius: 11px; }
  .site-footer { padding: 56px 20px 90px; }
  .cookie-banner { border-radius: 10px; }
  .cookie-actions .button { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}