/* ═══════════ Ride-Now.ie · "coming soon" splash (Oct 2026) ═══════════
   One screen that covers the home page after the intro animation, until the service opens to the public.
   Always the dark brand room, whatever the system setting. The countdown date lives in index.html (data-launch). */
html.sp-lock,html.sp-lock body{overflow:hidden;height:100%}
.sp{
  position:fixed;inset:0;z-index:250;overflow-y:auto;overscroll-behavior:contain;
  background:#0f1113;color:#f4f5f6;font-family:var(--font);-webkit-font-smoothing:antialiased;
}
.sp-bg{
  position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 60% at 88% 8%, rgba(244,130,31,.20), transparent 62%),
    radial-gradient(45% 55% at 0% 100%, rgba(244,130,31,.10), transparent 60%),
    linear-gradient(180deg, rgba(15,17,19,.82), rgba(15,17,19,.95)),
    url('assets/hero.jpg') center/cover no-repeat;
}
.sp-wrap{
  position:relative;min-height:100%;max-width:1180px;margin:0 auto;
  padding:clamp(14px,3vh,30px) 20px clamp(12px,2.4vh,22px);
  display:flex;flex-direction:column;gap:clamp(10px,2.6vh,24px);
}
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-top img{height:clamp(30px,4.6vh,42px);width:auto}
.sp-pill{
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:.45rem .8rem;border-radius:999px;color:#f4821f;background:rgba(244,130,31,.12);border:1px solid rgba(244,130,31,.4);
}
.sp-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f4821f;margin-right:.45rem;vertical-align:1px;animation:spPulse 1.6s ease-in-out infinite}
@keyframes spPulse{50%{opacity:.25}}

.sp-grid{flex:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,3.4vw,48px);align-items:center}
.sp-kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f4821f;margin-bottom:.6rem}
.sp h1{font-size:clamp(2rem,4.4vw,3.5rem);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin-bottom:.8rem;color:#fff}
.sp h1 em{font-style:normal;color:#f4821f}
.sp-lead{color:#b9c0c9;font-size:clamp(.92rem,1.25vw,1.04rem);line-height:1.55;max-width:560px}
.sp-lead b{color:#fff;font-weight:700}

/* countdown */
.sp-count{margin-top:clamp(14px,2.8vh,26px)}
.sp-count-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa1ab;margin-bottom:.5rem}
.sp-clock{display:flex;gap:.55rem}
.sp-clock>div{
  min-width:clamp(62px,7vw,84px);padding:.6rem .5rem .5rem;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.sp-clock b{display:block;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.sp-clock span{display:block;margin-top:.3rem;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9aa1ab}
.sp-clock .sep{min-width:0;padding:0;background:none;border:0;box-shadow:none;align-self:center;color:#f4821f;font-weight:800;font-size:1.4rem}
.sp-date{margin-top:.55rem;font-size:.86rem;color:#9aa1ab}
.sp-date b{color:#f4f5f6}

/* pictures */
.sp-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.sp-pics figure{position:relative;margin:0;border-radius:14px;overflow:hidden;height:clamp(110px,24vh,220px);border:1px solid rgba(255,255,255,.1)}
.sp-pics img{width:100%;height:100%;object-fit:cover;display:block}
.sp-pics figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,11,13,.85))}
.sp-pics figcaption{position:absolute;left:.7rem;bottom:.55rem;z-index:1;font-size:.78rem;font-weight:800;color:#fff}

/* drivers */
.sp-drv{
  margin-top:.7rem;display:grid;grid-template-columns:42px 1fr;gap:.85rem;align-items:start;
  padding:.9rem 1rem;border-radius:14px;background:rgba(244,130,31,.08);border:1px solid rgba(244,130,31,.35);
}
.sp-drv-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#f4821f;color:#181006}
.sp-drv-ic svg{width:22px;height:22px}
.sp-drv b{display:block;font-size:.98rem;margin-bottom:.15rem}
.sp-drv p{color:#c8cdd4;font-size:.86rem;line-height:1.5}
.sp-note{margin-top:.6rem;font-size:.8rem;color:#9aa1ab}
.sp-apply{
  display:inline-block;margin-top:.6rem;padding:.55rem 1rem;border-radius:11px;font-size:.88rem;font-weight:800;
  background:linear-gradient(180deg,#ff9740,#f4821f);color:#181006;box-shadow:0 8px 22px rgba(244,130,31,.3);
}
.sp-apply:hover{background:#ff9740}
/* "We hear you" — the drivers' voice card under the drivers box */
.sp-voice{
  margin-top:.6rem;display:grid;grid-template-columns:42px 1fr auto;gap:.85rem;align-items:center;
  padding:.8rem 1rem;border-radius:14px;color:#f4f5f6;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:border-color .2s,background .2s;
}
.sp-voice:hover{border-color:rgba(244,130,31,.55);background:rgba(244,130,31,.06)}
.sp-voice-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(244,130,31,.16);color:#f4821f}
.sp-voice-ic svg{width:21px;height:21px}
.sp-voice b{display:block;font-size:.98rem;margin-bottom:.1rem}
.sp-voice-t{display:block;color:#c8cdd4;font-size:.84rem;line-height:1.45}
.sp-voice-go{color:#f4821f;font-weight:800;font-size:1.1rem}

.sp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;font-size:.74rem;color:#7d8590;border-top:1px solid rgba(255,255,255,.08);padding-top:.7rem}
.sp-foot a{color:#9aa1ab}
.sp-foot a:hover{color:#fff}

/* the splash's own entrance, played as the intro fades */
.sp .a{opacity:0;transform:translateY(14px)}
.sp.in .a{animation:spIn .7s cubic-bezier(.22,1,.36,1) forwards}
.sp.in .a2{animation-delay:.08s}.sp.in .a3{animation-delay:.16s}.sp.in .a4{animation-delay:.26s}
.sp.in .a5{animation-delay:.36s}.sp.in .a6{animation-delay:.46s}.sp.in .a7{animation-delay:.56s}
@keyframes spIn{to{opacity:1;transform:none}}
.sp.in .sp-pics figure{animation:spPic .9s cubic-bezier(.22,1,.36,1) both}
.sp.in .sp-pics figure:nth-child(2){animation-delay:.1s}.sp.in .sp-pics figure:nth-child(3){animation-delay:.2s}
@keyframes spPic{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .sp .a{opacity:1;transform:none} .sp.in .a,.sp.in .sp-pics figure,.sp-pill i{animation:none} }

/* phones: one column, small pictures, everything tighter */
@media (max-width:860px){
  .sp-grid{grid-template-columns:1fr;align-items:start;align-content:start;gap:14px;flex:0 0 auto}
  .sp-foot{margin-top:auto}
  .sp h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .sp-pics figure{height:clamp(72px,12vh,110px);border-radius:12px}
  .sp-pics figcaption{font-size:.7rem;left:.5rem;bottom:.4rem}
  .sp-drv{padding:.75rem .85rem;grid-template-columns:36px 1fr;gap:.7rem}
  .sp-drv-ic{width:36px;height:36px;border-radius:10px}
  .sp-drv p{font-size:.82rem}
  .sp-clock>div{min-width:0;flex:1}
  .sp-clock .sep{display:none}
  .sp-pill{font-size:.64rem;padding:.38rem .6rem}
  .sp-wrap{gap:12px;padding-top:14px}
  .sp-top img{height:30px}
  .sp-kicker{font-size:.66rem;margin-bottom:.4rem}
  .sp h1{font-size:clamp(1.65rem,7.4vw,2.2rem);margin-bottom:.5rem}
  .sp-lead{font-size:.86rem;line-height:1.45}
  .sp-count{margin-top:12px}
  .sp-count-label{font-size:.64rem;margin-bottom:.35rem}
  .sp-clock{gap:.4rem}
  .sp-clock>div{padding:.45rem .3rem .4rem;border-radius:11px}
  .sp-clock b{font-size:1.45rem}
  .sp-clock span{font-size:.56rem;margin-top:.2rem}
  .sp-date{font-size:.78rem;margin-top:.4rem}
  .sp-pics{gap:.45rem}
  .sp-drv{margin-top:.55rem}
  .sp-drv b{font-size:.9rem}
  .sp-drv p{font-size:.78rem;line-height:1.42}
  .sp-note{font-size:.72rem;margin-top:.45rem}
  .sp-apply{margin-top:.45rem;padding:.45rem .85rem;font-size:.8rem}
  .sp-voice{margin-top:.5rem;grid-template-columns:36px 1fr auto;gap:.7rem;padding:.65rem .85rem}
  .sp-voice-ic{width:36px;height:36px;border-radius:10px}
  .sp-voice b{font-size:.9rem}
  .sp-voice-t{font-size:.76rem;line-height:1.4}
  .sp-foot{font-size:.66rem;padding-top:.5rem}
}
@media (max-width:860px) and (max-height:760px){ .sp-lead{font-size:.88rem} .sp-pics figure{height:64px} }