/* ═══════════════════════════════════════════════════════
   LUX4RIDES · Services Hub CSS
   White luxury · Gold accents · Ultra-clean
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  --bg: #ffffff;
  --bg2: #faf9f7;
  --ink: #0c0c0e;
  --ink2: #2a2a30;
  --muted: #6b6b78;
  --light: #9d9da8;
  --ghost: #d4d3cf;
  --line: rgba(12,12,14,.08);
  --gold: #b08d3e;
  --gold2: #d4af5a;
  --gold-bg: rgba(176,141,62,.06);
  --gold-border: rgba(176,141,62,.22);
  --gold-glow: rgba(176,141,62,.10);
  --card: #ffffff;
  --shadow-sm: 0 2px 8px rgba(12,12,14,.04);
  --shadow: 0 12px 40px rgba(12,12,14,.07);
  --shadow-lg: 0 24px 64px rgba(12,12,14,.10);
  --radius: 20px;
  --radius-sm: 14px;
  --max: 1140px;
  --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: 'Playfair Display', Georgia, serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ─── GLOBAL.CSS DARK THEME OVERRIDE ───
   Forces white luxury theme on /services/ pages
   These override any body{background:#000;color:#fff}
   from the site's global.css stylesheet
   ─────────────────────────────────────── */
body {
  background: #ffffff !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}
main {
  background: #ffffff !important;
  color: var(--ink) !important;
}
/* Keep header/footer dark (they have their own namespaced styles) */
.lux-hd, .lux-hd-mobile, footer, .footer, .lux-ft, [class*="footer"] {
  color: unset;
}
/* Override any global link color */
main a { color: inherit; text-decoration: none; }
/* Force all headings + body text sharp dark inside main */
main h1, main h2, main h3, main h4, main h5, main h6,
main p, main li, main span, main div, main td, main th,
main summary, main label, main dt, main dd {
  color: #0c0c0e;
}
/* Re-apply our intentional muted/gold colors (override the above) */
main .sv-lead, main .sv-section-desc, main .sv-card-desc,
main .sv-body p, main .sv-faq-answer, main .sv-small,
main .sv-sidebar-box p { color: var(--muted); }
main .sv-kicker, main .sv-section-label, main .sv-card-label,
main .sv-hero h1 em, main .sv-section h2 em, main .sv-body h2 em,
main .sv-mega-all, main .sv-sidebar-box .sv-small a,
main .sv-card-arrow, main .sv-breadcrumb a:hover,
main .sv-tag.gold { color: var(--gold); }
main .sv-breadcrumb { color: var(--light); }
main .sv-breadcrumb span { color: var(--ghost); }
main .sv-breadcrumb a { color: var(--muted); }

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }

/* ─── LAYOUT ─── */
.sv-container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ─── HERO ─── */
.sv-hero {
  position: relative;
  padding: clamp(100px, 12vw, 150px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.sv-hero::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 400px;
  background: radial-gradient(ellipse, var(--gold-glow), transparent 70%);
  pointer-events: none;
}
.sv-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.sv-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--light);
  letter-spacing: .4px; text-transform: uppercase;
  margin-bottom: 20px;
}
.sv-breadcrumb a { color: var(--muted); transition: color .2s; }
.sv-breadcrumb a:hover { color: var(--gold); }
.sv-breadcrumb span { color: var(--ghost); }

.sv-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  background: var(--gold-bg);
  font-size: 12px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.sv-kicker::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold);
}

.sv-hero h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600; line-height: 1.08;
  letter-spacing: -.5px;
  margin: 0 0 16px;
  color: #0c0c0e !important;
}
.sv-hero h1 em {
  font-style: italic; color: var(--gold);
}

.sv-lead {
  max-width: 680px;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--muted); line-height: 1.7;
  margin: 0 0 24px;
}

/* ─── BUTTONS ─── */
.sv-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  font-family: var(--sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.sv-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--gold-border); }
.sv-btn.primary {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border-color: var(--gold-border);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.sv-btn.primary:hover { box-shadow: 0 12px 32px var(--gold-glow); }
.sv-btn.dark {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.sv-btn.dark:hover { background: #000; }
.sv-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── SECTION ─── */
.sv-section {
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.sv-section.alt { background: var(--bg2); }
.sv-section-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.sv-section h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600; letter-spacing: -.3px;
  margin: 0 0 10px; line-height: 1.15;
}
.sv-section h2 em { font-style: italic; color: var(--gold); }
.sv-section-desc {
  max-width: 580px;
  color: var(--muted); font-size: 15px;
  margin-bottom: 28px;
}

/* ─── SERVICE CARDS GRID ─── */
.sv-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}
.sv-card {
  grid-column: span 6;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  padding: 22px 22px 20px;
  overflow: hidden;
  transition: all .25s var(--ease);
  box-shadow: var(--shadow-sm);
}
.sv-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
  opacity: 0; transition: opacity .3s;
}
.sv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold-border);
}
.sv-card:hover::before { opacity: 1; }
.sv-card-kicker {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.sv-card h3 {
  font-size: 17px; font-weight: 700;
  letter-spacing: -.2px; margin: 0 0 6px;
}
.sv-card p {
  color: var(--muted); font-size: 13.5px;
  line-height: 1.6; margin: 0 0 12px;
}
.sv-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-tag {
  font-size: 10.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg2);
  letter-spacing: .2px;
}
.sv-tag.gold { border-color: var(--gold-border); background: var(--gold-bg); color: var(--gold); }

.sv-card-arrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--gold); margin-top: 14px;
  letter-spacing: .3px; text-transform: uppercase;
}
.sv-card-arrow svg {
  width: 14px; height: 14px; stroke: var(--gold);
  fill: none; stroke-width: 2;
  transition: transform .2s;
}
.sv-card:hover .sv-card-arrow svg { transform: translateX(4px); }

/* ─── CONTENT BODY (service pages) ─── */
.sv-body { max-width: 760px; }
.sv-body h2 {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600; letter-spacing: -.3px;
  margin: 0 0 12px; line-height: 1.2;
}
.sv-body h2 em { font-style: italic; color: var(--gold); }
.sv-body p {
  color: var(--ink2); font-size: 15px;
  line-height: 1.75; margin: 0 0 18px;
}
.sv-body ul {
  margin: 0 0 18px; padding: 0 0 0 20px;
  color: var(--ink2); font-size: 15px; line-height: 1.8;
}
.sv-body ul li::marker { color: var(--gold); }

/* ─── FAQ ─── */
.sv-faq { margin-top: 8px; }
.sv-faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .2s;
}
.sv-faq details[open] { border-color: var(--gold-border); }
.sv-faq summary {
  padding: 16px 18px;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after {
  content: '+'; font-size: 18px; color: var(--gold);
  font-weight: 300; transition: transform .2s;
}
details[open] .sv-faq summary::after,
.sv-faq details[open] summary::after { content: '−'; }
.sv-faq .sv-faq-answer {
  padding: 0 18px 16px;
  color: var(--muted); font-size: 14px; line-height: 1.7;
}

/* ─── SIDEBAR BOX ─── */
.sv-sidebar-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 100px;
}
.sv-sidebar-box h3 {
  font-size: 16px; font-weight: 700;
  margin: 0 0 8px;
}
.sv-sidebar-box .sv-small {
  color: var(--muted); font-size: 13px; line-height: 1.6;
}
.sv-sidebar-box .sv-small a { color: var(--gold); font-weight: 600; }
.sv-sidebar-box .sv-small a:hover { text-decoration: underline; }

/* ─── TWO-COL LAYOUT ─── */
.sv-two-col {
  display: grid; gap: 24px;
  grid-template-columns: 1.3fr .7fr;
  align-items: start;
}

/* ─── RELATED LINKS ─── */
.sv-related-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.sv-related-link {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  transition: all .2s var(--ease);
}
.sv-related-link:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
}
.sv-related-link svg {
  width: 16px; height: 16px; stroke: var(--gold);
  fill: none; stroke-width: 2; flex-shrink: 0;
}

/* ─── TIP NOTE ─── */
.sv-tip-note {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  font-size: 12px; font-weight: 600;
  color: var(--gold);
}

/* ─── PROOF / AUTHORITY GRID ─── */
.sv-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.sv-proof-item {
  text-align: center;
  padding: 20px 12px;
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
}
.sv-proof-item strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--gold) !important;
  line-height: 1.2;
}
.sv-proof-item span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ─── COMPARISON TABLE ─── */
.sv-compare-table {
  overflow-x: auto;
  margin-bottom: 8px;
}
.sv-compare-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sv-compare-table th {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-bottom: 2px solid var(--gold);
  text-align: center;
  color: var(--ink) !important;
}
.sv-compare-table th:first-child { text-align: left; }
.sv-compare-table th:nth-child(2) { color: var(--gold) !important; }
.sv-compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  color: var(--ink2) !important;
}
.sv-compare-table td:first-child { text-align: left; font-weight: 500; }
.sv-compare-table td:nth-child(2) { color: var(--gold) !important; font-weight: 700; }

/* ─── SERVICE AREA GRID ─── */
.sv-area-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.sv-area-link {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2) !important;
  transition: all .2s;
}
.sv-area-link:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold) !important;
}

/* ─── ANIMATIONS ─── */
.sv-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sv-fade.show { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 860px) {
  .sv-card { grid-column: span 12; }
  .sv-two-col { grid-template-columns: 1fr; }
  .sv-related-grid { grid-template-columns: 1fr; }
  .sv-sidebar-box { position: static; }
  .sv-proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sv-cta-row { flex-direction: column; }
  .sv-btn { width: 100%; justify-content: center; }
  .sv-proof-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sv-proof-item { padding: 14px 8px; }
  .sv-compare-table { font-size: 12px; }
}