/* Elohim Driving School — client brand (red + blue), v4 layout
   Full-bleed hero, light middle, one continuous navy base (about + contact + footer).
   Type: Archivo (variable width axis). Swap hexes below if exact brand colours arrive. */

:root{
  --red:#d1232a;
  --red-dark:#a81b21;
  --blue:#0b3d91;
  --base:#061f4d;

  --ink:#4b4b4b;
  --head:#061f4d;
  --muted:#6b6b6b;
  --line:#e2e6ec;
  --tint:#eef1f6;
  --white:#fff;

  --r:6px;
  --r-plate:4px;

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:80px; --s8:104px;

  --wrap:1160px;
  --font:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;line-height:1.65;color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{margin:0 0 var(--s2);color:var(--head);font-weight:700}
h1{font-size:clamp(2.25rem,calc(5vw + 1rem),3.5rem);line-height:1.05;letter-spacing:-.02em;font-stretch:116%}
h2{font-size:clamp(1.625rem,3vw,2.125rem);line-height:1.15;letter-spacing:-.015em;font-stretch:112%}
h3{font-size:1.125rem;line-height:1.3;font-weight:650}
p{margin:0 0 var(--s2);max-width:36em}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--red-dark)}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s2)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:999}
.skip-link:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px var(--s3);
  font-family:inherit;font-size:1rem;font-weight:650;line-height:1.15;
  border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-align:center;
}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn--invert{background:#fff;color:var(--base)}
.btn--invert:hover{background:var(--red);color:#fff}

/* Any WhatsApp call-to-action uses the site red */
.btn[href*="wa.me"],.btn--primary[href*="wa.me"],.btn--invert[href*="wa.me"]{
  background:var(--red);border-color:var(--red);color:#fff
}
.btn[href*="wa.me"]:hover,.btn--primary[href*="wa.me"]:hover,.btn--invert[href*="wa.me"]:hover{
  background:var(--red-dark);border-color:var(--red-dark);color:#fff
}

.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--red);cursor:pointer;text-decoration:underline}

/* ---------- Learner plate (the one mark) ---------- */
.plate{
  display:inline-grid;place-items:center;
  background:#fff;border:3px solid var(--red);border-radius:var(--r-plate);
  color:var(--red);font-weight:800;font-stretch:116%;line-height:1;
}
.plate--sm{width:34px;height:34px;font-size:1.0625rem}
.plate--lg{width:68px;height:68px;font-size:2.25rem;margin-bottom:var(--s3)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:76px}
.nav__brand{display:flex;align-items:center;gap:10px;color:var(--head);white-space:nowrap}
.brand__logo{height:30px;width:auto;display:block}
.brand__chip{height:74px;width:auto;display:block;margin-bottom:var(--s3);border-radius:8px;box-shadow:0 14px 34px rgba(6,31,77,.28);animation:plate-in .6s cubic-bezier(.2,.8,.2,1) both}
.brand__chip--sm{height:50px;margin:0 0 12px;box-shadow:none;animation:none}

.nav__name{font-size:1.0625rem;font-weight:750;font-stretch:112%;letter-spacing:-.01em}
.nav__sub{font-weight:450;color:var(--muted);font-stretch:100%}

.nav__toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer;
}
.nav__toggle span{display:block;height:2px;width:100%;background:var(--blue);transition:.2s}

.nav__menu{
  position:absolute;top:76px;left:0;right:0;display:none;flex-direction:column;
  background:#fff;border-bottom:1px solid var(--line);
  padding:var(--s1) var(--s2) var(--s2);box-shadow:0 12px 24px rgba(6,31,77,.08);
}
.nav__menu.is-open{display:flex}
.nav__menu a{padding:13px 4px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
.nav__menu a:last-child{border-bottom:0}
.nav__menu a:hover{color:var(--red-dark)}
.nav__cta{border-bottom:0!important;margin-top:var(--s1);justify-content:center;gap:8px;height:48px;padding:0 20px;white-space:nowrap;color:#fff!important}
.nav__cta svg{width:16px;height:16px;flex:0 0 auto;display:block}
.nav__cta:hover{color:#fff!important}

/* ---------- Hero: full-bleed photo + scrim ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--base);
  display:flex;align-items:center;
  padding:var(--s6) 0 var(--s5);
}
.hero picture,.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::after{content:"";position:absolute;inset:0;background:rgba(6,31,77,.72)}
.hero__inner{position:relative;z-index:1}
.hero h1{color:#fff;max-width:15ch;margin-bottom:var(--s3)}
.hero__lead{font-size:1.125rem;line-height:1.6;color:rgba(255,255,255,.95);max-width:34em}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.hero__alt{font-size:1rem;color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero__alt:hover{color:#fff}

.hero__proof{
  list-style:none;margin:var(--s6) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid rgba(255,255,255,.32);
  display:grid;gap:var(--s3);grid-template-columns:1fr;
}
.hero__proof li{display:flex;flex-direction:column;gap:2px}
.hero__proof strong{font-size:1.0625rem;font-weight:700;font-stretch:108%;color:#fff;line-height:1.3}
.hero__proof span{font-size:.9375rem;color:rgba(255,255,255,.85)}

/* ---------- Light sections ---------- */
.section{padding:var(--s7) 0}
.section--tint{background:var(--tint)}
.section__head{max-width:640px;margin-bottom:var(--s5)}
.section__head h2{margin-bottom:var(--s2)}
.section__head p{margin:0}

/* ---------- Journey (a real sequence, so numbered) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);grid-template-columns:1fr}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s2);align-items:start}
.steps__n{
  grid-row:1 / span 2;font-size:2.5rem;font-weight:800;font-stretch:118%;
  color:var(--red);line-height:1;letter-spacing:-.03em;
}
.steps h3{margin-bottom:4px}
.steps p{margin:0;font-size:.9375rem;max-width:40em}

/* ---------- Licence classes ---------- */
.classes{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:1fr}
.classes li{padding-top:var(--s2);border-top:3px solid var(--red)}
.classes h3{margin-bottom:6px;font-size:1.25rem;font-stretch:110%}
.classes p{margin:0;font-size:.9375rem}

/* ---------- Navy base: about + values ---------- */
.section--base{background:var(--base);color:rgba(255,255,255,.85)}
.section--base h2,.section--base h3{color:#fff}
.section--base p{color:rgba(255,255,255,.85)}
.section--base .btn--invert{margin-top:var(--s1)}

.about{display:grid;gap:var(--s6);grid-template-columns:1fr}
.about__text p{max-width:38em}

.values{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:1fr}
.values li{position:relative;padding-left:26px}
.values li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:12px;height:12px;background:var(--red);border-radius:1px;
}
.values h3{margin-bottom:6px}
.values p{margin:0;font-size:.9375rem;color:rgba(255,255,255,.85)}

/* ---------- Contact (on navy) ---------- */
.section--base-last{padding-bottom:var(--s7)}
.contact{display:grid;gap:var(--s4);grid-template-columns:1fr}
.contact__panel{
  background:#fff;color:var(--ink);border-radius:var(--r-plate);
  padding:var(--s5) var(--s4);
}
.contact__panel h2{color:var(--head)}
.contact__panel p{color:var(--ink);margin-bottom:var(--s3)}

.details{font-style:normal}
.details__row{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.details__row:first-child{padding-top:0}
.details__row:last-child{border-bottom:0;padding-bottom:0}
.details__row span{font-size:.875rem;color:rgba(255,255,255,.8)}
.details__row a,.details__row strong{font-size:1.0625rem;font-weight:600;color:#fff;line-height:1.5}
.details__row a:hover{color:#fff;text-decoration:underline}

/* ---------- Footer (continuous with the base) ---------- */
.footer{background:#fff;color:var(--ink);border-top:1px solid var(--line);padding:var(--s6) 0 var(--s3)}
.footer__grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
.footer__name{font-size:1.125rem;font-weight:700;font-stretch:112%;color:var(--head);margin-bottom:8px}
.footer__brand p{font-size:.9375rem;margin:0}
.footer__title{font-size:.9375rem;font-weight:650;color:var(--head);margin-bottom:var(--s1)}
.footer__col{display:flex;flex-direction:column;gap:10px;font-size:.9375rem}
.footer__col a{color:var(--ink)}
.footer__col a:hover{color:var(--red-dark)}
.footer__bottom{
  display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--muted);
}
.footer__bottom p{margin:0;max-width:64ch}
.footer__note .link-btn{color:var(--red);font-size:inherit}

/* ---------- Passing learners wall ---------- */
.wall{padding:var(--s7) 0;background:var(--white)}
.wall__head{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;margin-bottom:var(--s5)}
.wall__head h2{max-width:18ch;margin-bottom:var(--s1)}
.wall__head p{margin:0;max-width:42em}
.wall__cta{flex:0 0 auto}
.wall__marquee{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wall__marquee-track{display:flex;width:max-content;animation:marquee 90s linear infinite;will-change:transform}
.wall__marquee-group{display:flex;gap:10px;flex:0 0 auto;padding-right:10px}
.wall__marquee-group picture{flex:0 0 auto;overflow:hidden;border-radius:4px}
.wall__marquee-group img{height:clamp(150px,20vw,240px);width:auto;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:4px;background:var(--tint);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wall__marquee-group picture:hover img{transform:scale(1.3)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .wall__marquee-track{animation:none}
  .wall__marquee{overflow-x:auto}
  .wall__marquee-group picture:hover img{transform:none}
}

/* ---------- WhatsApp float ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 22px;border-radius:999px;border:0;
  background:var(--red);color:#fff;font-family:inherit;font-size:1rem;font-weight:650;line-height:1;
  text-decoration:none;box-shadow:0 10px 26px rgba(209,35,42,.45);
  transition:transform .2s,box-shadow .2s;
}
.wa svg{width:24px;height:24px;display:block;flex:0 0 auto}
.wa:hover{transform:translateY(-3px);color:#fff;background:var(--red-dark);box-shadow:0 16px 34px rgba(209,35,42,.55)}
.wa:active{transform:scale(.98)}
.cookie{bottom:100px}

/* ---------- Cookie ---------- */
.cookie{
  position:fixed;left:16px;right:16px;bottom:88px;z-index:95;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-plate);
  padding:var(--s2);box-shadow:0 12px 28px rgba(6,31,77,.16);font-size:.875rem;color:var(--ink);
}
.cookie p{margin:0;max-width:none}

/* ---------- One page-load moment: the plate ---------- */
@keyframes plate-in{
  from{opacity:0;transform:translateY(10px) rotate(-6deg)}
  to{opacity:1;transform:none}
}
.plate--lg{animation:plate-in .6s cubic-bezier(.2,.8,.2,1) both}

/* ---------- Responsive ---------- */
@media (min-width:480px){
  .hero__proof{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .values{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5)}
  .wall__head{flex-direction:row;justify-content:space-between;align-items:flex-end}
}

@media (min-width:768px){
  .container{padding:0 var(--s4)}
  .hero{padding:var(--s8) 0 var(--s7)}
  .plate--lg{width:80px;height:80px;font-size:2.75rem}
  .brand__logo{height:44px;width:auto}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .steps li{grid-template-columns:1fr}
  .steps__n{grid-row:auto;font-size:3rem}
  .classes{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .contact{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
  .cookie{left:auto;right:24px;max-width:400px}
}

@media (min-width:1024px){
  .container{padding:0 var(--s6)}
  .nav__toggle{display:none}
  .nav__menu{
    position:static;display:flex!important;flex-direction:row;align-items:center;
    gap:var(--s3);background:none;border-bottom:0;padding:0;box-shadow:none;
  }
  .nav__menu a{padding:0;border-bottom:0;color:var(--ink)}
  .nav__cta{margin-top:0;height:44px}

  .section{padding:var(--s8) 0}
  .section--base-last{padding-bottom:var(--s8)}
  .about{grid-template-columns:1.1fr .9fr;gap:var(--s7)}

  .footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;transform:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Multi-page: subpage heroes, gallery grid, extras ---------- */
.page-hero{background:var(--base);color:#fff;padding:var(--s6) 0 var(--s4)}
.page-hero h1{color:#fff;margin:0 0 var(--s2)}
.page-hero .hero__lead{color:rgba(255,255,255,.92);margin:0;max-width:38em}

.nav__menu a.is-active{color:var(--red-dark);font-weight:700}

.wall__link{display:inline-block;margin-top:var(--s3);font-weight:650;color:var(--red);text-decoration:underline}
.wall__link:hover{color:var(--red-dark)}

.gallery{padding:var(--s6) 0 var(--s8)}
.gallery__head{font-size:.9375rem;color:var(--muted);margin-bottom:var(--s4)}
.gallery__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gallery__grid picture{overflow:hidden;border-radius:4px;background:var(--tint)}
.gallery__grid img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.gallery__grid picture:hover img{transform:scale(1.08)}
@media (min-width:480px){.gallery__grid{gap:10px}}
@media (min-width:768px){.gallery__grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (min-width:1024px){.gallery__grid{grid-template-columns:repeat(4,1fr);gap:14px}}

.section__head--center{align-items:center;text-align:center}
.section__head--center p{margin-left:auto;margin-right:auto}
.cta-band{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s3)}
.cta-band .btn{margin:0}

/* ---------- Booking form ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:var(--s4);box-shadow:0 10px 24px rgba(6,31,77,.06)}
.form__grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.form__field{display:flex;flex-direction:column;gap:6px}
.form__label{font-size:.875rem;font-weight:650;color:var(--head)}
.form input,.form select{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:var(--r)}
.form input:focus,.form select:focus{outline:3px solid var(--red);outline-offset:2px;border-color:var(--red)}
.form input::placeholder{color:var(--muted)}
.form__submit{margin-top:var(--s4);width:100%;gap:8px}
.form__note{font-size:.875rem;color:var(--muted);margin:12px 0 0;text-align:center}
@media (min-width:480px){
  .form__grid{grid-template-columns:1fr 1fr}
  .form__submit{width:auto}
  .form__note{text-align:left}
}