/* === Ride Chats — Global === */
:root{
  --bg:#0B0B0C; --panel:#111214; --text:#EDEEEF; --muted:#B9BBC1;
  --gold:#C8A24B; --border:#1A1B1E; --max:1250px;
  --underline-offset:2px; --underline-thickness:2px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ font-size:16px; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Site-wide paragraph & list size (1.25rem ≈ 20px) */
p, li{ font-size:1.25rem; line-height:1.75; }

/* Links */
a{ color:inherit; text-decoration:none; }
a:hover, a:focus-visible{
  text-decoration:underline; text-underline-offset:var(--underline-offset); text-decoration-thickness:var(--underline-thickness); outline:none;
}

/* Never underline UI controls (buttons, toggles, nav) */
.button-bar a, .rc-btn, .rc-toggle, .btn, nav.main-nav a, .btn-route{ text-decoration:none !important; }
.button-bar a:hover, .rc-btn:hover, .rc-toggle:hover, .btn:hover, nav.main-nav a:hover, .btn-route:hover, .btn-route:focus-visible{ text-decoration:none !important; }

/* Layout */
.wrap{ max-width:var(--max); margin:0 auto; padding:24px; }
@media (max-width:960px){ .wrap{ padding-left:16px; padding-right:16px; } }

/* Header (sticky) */
.site-header-outer{
  position:sticky; top:0; z-index:1000;
  background:rgba(11,11,12,0.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(2px);
}
.header-wrap{ padding:10px 0; }
header.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:8px 0; transition:padding .18s ease;
}
.brand{ display:flex; align-items:center; width:300px; height:100px; transform-origin:left center; transition:transform .18s ease; }
.brand .logo-link{ display:inline-flex; align-items:center; }
.brand img{ width:100%; height:100%; object-fit:contain; display:block; }

nav.main-nav{ display:flex; gap:34px; flex-wrap:wrap; }
nav.main-nav a{ position:relative; font-size:18px; font-weight:600; color:var(--muted); padding:8px 2px; transition:color .2s ease; }
nav.main-nav a:hover, nav.main-nav a:focus{ color:var(--text); }
nav.main-nav a::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .22s ease; }
nav.main-nav a:hover::after, nav.main-nav a:focus::after{ width:100%; }
nav.main-nav a.active{ color:var(--text); }
nav.main-nav a.active::after{ width:100%; }

.site-header-outer.is-sticky header.site-header{ padding:4px 0; }
.site-header-outer.is-sticky .brand{ transform:scale(.82); }

@media (max-width:960px){
  .header-wrap{ padding:6px 0; }
  nav.main-nav{ gap:20px; }
  nav.main-nav a{ font-size:16px; }
  .brand{ width:240px; height:80px; }
}

/* Hero */
.hero-full{
  position:relative; width:100%;
  min-height:320px; height:clamp(320px,55vh,600px);
  overflow:hidden;
  background:#0b0b0c url('/images/hero-blur.jpg') center/cover no-repeat;
}
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.hero-img.is-loaded{ opacity:1; }
.hero-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.35) 50%,rgba(0,0,0,0)); pointer-events:none; }
.hero-box{ max-width:var(--max); margin:0 auto; padding:30px 24px 28px; pointer-events:auto; }
.hero-title{ margin:0 0 12px; font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.05; }
.hero-sub{ margin:0 0 20px; color:#E8E9EC; font-weight:500; font-size:1.25rem; max-width:900px; letter-spacing:.1px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:4px; padding:12px 18px; font-weight:700; font-size:1rem; border:1px solid var(--gold); background:transparent; color:var(--text); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.btn.solid{ background:var(--gold); color:#111214; border-color:var(--gold); }

/* Sections / grids / cards */
.section{ padding:32px 0; }
.section h2{ margin:0 0 16px; font-size:1.6rem; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; }
.card h3{ margin:0 0 8px; font-size:1.2rem; }
.desc{ margin:0; color:#fff; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:5.4em; }
@media (max-width:960px){ .grid{ grid-template-columns:1fr; } }

.route-actions{ margin-top:14px; display:flex; justify-content:center; }
.btn-route{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:1rem; border-radius:4px; padding:10px 14px; color:#fff; border:1px solid var(--gold); background:linear-gradient(180deg,#0b0b0c 0%, #0f0f10 100%); box-shadow: inset 0 1px 0 rgba(200,162,75,.20), 0 0 0 1px rgba(200,162,75,.12); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-route:hover{ background:linear-gradient(180deg,#0e0e0f 0%, #141518 100%); transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(200,162,75,.30), 0 6px 18px rgba(200,162,75,.22); }

/* Footer */
footer{ border-top:1px solid var(--border); margin-top:40px; padding:24px 0; color:var(--muted); }
:focus-visible{ outline:2px solid rgba(200,162,75,.7); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }