/* Urban Rider homepage redesign (v2) — EN only.
   Scoped entirely under body.r2, loaded only by /public/index.html, so the
   locale homepages keep the current look until this is approved.
   Two things: (1) fixed-width "blocks" (each section a rounded card with a
   light shadow on the canvas), (2) a dotorange-style overlay menu, in the
   Urban Rider red accent. */

body.r2{
  --sh:0 1px 2px rgba(18,22,27,.06), 0 18px 42px -18px rgba(18,22,27,.24);
  --panel:#15171a;              /* dark nav card */
  background:#e1e4e8;           /* canvas deeper than the white cards so blocks read */
}

/* ---------- fixed-width block layout ---------- */
.r2 main{max-width:1280px;margin:0 auto;padding:16px 20px 0;display:flex;flex-direction:column;gap:20px}
.r2 main>section{border:0;border-radius:28px;box-shadow:var(--sh);overflow:hidden;position:relative;
  padding-block:clamp(44px,6vw,84px);scroll-margin-top:90px}
:where(.r2 main>section){background:var(--card)}      /* default white; colored sections keep their bg */
.r2 main>section.ctaband{padding-block:clamp(34px,4.5vw,56px);background:var(--red)}
.r2 .ctaband{color:#fff}
.r2 .ctaband .ctaband__note{color:rgba(255,255,255,.74)}
/* hero block: taller card with the phone popping out top & bottom for depth.
   margin-top opens space below the header so the popped phone never tucks
   under the menu on load. The photo stays rounded to the card (no bleed). */
.r2 main>section.hero{overflow:visible;z-index:3;margin-top:40px;padding-block:clamp(14px,1.6vw,22px)}
.r2 .hero .hero__bg{transform:none!important}         /* stop the parallax zoom bleeding past the rounded card */
.r2 .hero .hero__bg,.r2 .hero::before{border-radius:inherit}
.r2 .hero h1{font-size:clamp(38px,5vw,66px)}          /* smaller so the hero content fits the block */
.r2 .hero-dev{filter:drop-shadow(0 26px 42px rgba(16,18,20,.3))}
.r2 .hero .stage{transform:scale(1.15);transform-origin:center}
.r2 main>section>.shell{max-width:1180px}

/* footer becomes a block too */
.r2 footer{max-width:1240px;margin:20px auto 22px;border:0;border-radius:28px;box-shadow:var(--sh);
  background:var(--card);padding:clamp(44px,5vw,64px) 0 34px}
.r2 footer>.shell{max-width:1180px}

/* ---------- header: floating rounded bar ---------- */
.r2 header{position:sticky;top:14px;z-index:60;background:none;backdrop-filter:none;border:0;margin-top:14px}
.r2 header>.mast{width:min(1280px,calc(100% - 40px));margin:0 auto;height:72px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh);padding:0 10px 0 18px;gap:14px}
.r2 header .mast>nav{display:none}        /* overlay replaces the inline nav */
.r2 header .navtoggle{display:none}       /* old hamburger */
.r2 header .mast .btn{height:44px;padding:0 20px}   /* match the Menu pill height */
.r2 header .brand img{width:40px;height:40px;border-radius:12px}   /* bigger logo, nearer the pill height */

/* Menu button (pill) */
.r2 .menu-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:100px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 14px/1 var(--sans);cursor:pointer;
  transition:border-color .18s,background .18s}
.r2 .menu-btn:hover{border-color:var(--ink)}
.r2 .menu-btn i{position:relative;width:16px;height:11px;display:inline-block}
.r2 .menu-btn i::before,.r2 .menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .28s,top .28s,bottom .28s}
.r2 .menu-btn i::before{top:0}
.r2 .menu-btn i::after{bottom:0}
.r2.menu-open .menu-btn i::before{top:4.5px;transform:rotate(45deg)}
.r2.menu-open .menu-btn i::after{bottom:4.5px;transform:rotate(-45deg)}

/* ---------- overlay menu (dotorange-style) ---------- */
.r2 .ovl-scrim{position:fixed;inset:0;z-index:55;background:rgba(14,16,18,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.r2.menu-open .ovl-scrim{opacity:1;visibility:visible}

.r2 .ovl{position:fixed;z-index:65;top:98px;right:max(20px,calc((100vw - 1280px)/2 + 20px));
  width:min(380px,calc(100vw - 40px));max-height:calc(100dvh - 100px);overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;padding:4px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;
  transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1),visibility .28s;
  pointer-events:none}
.r2.menu-open .ovl{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.r2 .ovl-card{border-radius:30px}
.r2 .ovl-nav{background:var(--panel);padding:24px 30px;box-shadow:0 18px 50px -12px rgba(10,12,14,.5)}
.r2 .ovl-nav ul{list-style:none;margin:0;padding:0}
.r2 .ovl-nav li+li{border-top:1px solid rgba(255,255,255,.06)}
.r2 .ovl-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;
  color:#f3f3f2;font-size:clamp(24px,3.1vw,31px);line-height:1.1;letter-spacing:-.02em;font-weight:600;transition:color .18s,padding-left .3s}
.r2 .ovl-nav a:hover{padding-left:6px}
.r2 .ovl-nav a:hover,.r2 .ovl-nav a.active{color:var(--red)}
.r2 .ovl-nav a i{width:9px;height:9px;border-radius:50%;background:var(--red);opacity:0;flex:none;transition:opacity .18s}
.r2 .ovl-nav a:hover i,.r2 .ovl-nav a.active i{opacity:1}

.r2 .ovl-cta{background:var(--red);color:#fff;padding:26px 30px;box-shadow:0 18px 50px -12px rgba(255,90,31,.42)}
.r2 .ovl-cta h3{margin:0 0 7px;font-size:clamp(21px,2.4vw,27px);line-height:1.1;letter-spacing:-.03em;color:#fff}
.r2 .ovl-cta a{color:#fff;font-size:15px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:border-color .18s}
.r2 .ovl-cta a:hover{border-bottom-color:#fff}

.r2.menu-open{overflow:hidden}

/* ---------- mobile ---------- */
@media(max-width:1000px){
  .r2 main{padding:12px 13px 0;gap:14px}
  .r2 main>section{border-radius:22px}
  .r2 footer{margin:14px 13px 16px;border-radius:22px;width:auto}
  .r2 header>.mast{width:calc(100% - 26px)}
  .r2 .menu-btn{margin-left:auto}          /* push Menu to the right edge on mobile */
  .r2 .ovl{top:94px;right:13px;left:13px;width:auto}
}

/* ---------- microcar block: photo on the left ---------- */
.r2 #microcar .two{align-items:stretch}
.r2 #microcar .gal{display:block}
.r2 .mc-photo{margin:0;position:relative;width:100%;height:100%;min-height:320px;border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.r2 .mc-photo picture{display:block;width:100%;height:100%}
.r2 .mc-photo img{display:block;width:100%;height:100%;object-fit:cover}
.r2 .mc-photo figcaption{position:absolute;left:10px;bottom:10px;font-size:10.5px;line-height:1.35;
  color:rgba(255,255,255,.92);background:rgba(12,14,16,.44);backdrop-filter:blur(5px);
  padding:4px 9px;border-radius:9px;letter-spacing:.01em}
.r2 .mc-photo figcaption a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media(max-width:1000px){
  .r2 #microcar .two{align-items:start}
  .r2 .mc-photo{height:auto;aspect-ratio:4/3;min-height:0}
}